@gradial/aci 0.1.20-preview.2 → 0.1.20

package/dist/next/config.js

@@ -1,26 +1,26 @@
 import { createContentWatchWebpackPlugin } from './content-watch.js';
-export function withGradialAci(nextConfig = {}, options = {}) {
+export function withAci(nextConfig = {}, options = {}) {
     const assetPrefix = options.assetPrefix || '/.gradial-dam';
     const userRewrites = nextConfig.rewrites;
     const userWebpack = nextConfig.webpack;
     return {
         ...nextConfig,
         rewrites: async () => {
-            const gradialRewrites = [
+            const rewrites = [
                 {
                     source: `${assetPrefix}/:path*`,
-                    destination: `/api/aci-assets${assetPrefix}/:path*`,
+                    destination: `/gradial/assets/local${assetPrefix}/:path*`,
                 },
             ];
             if (!userRewrites)
-                return gradialRewrites;
+                return rewrites;
             const userResult = await (typeof userRewrites === 'function' ? userRewrites() : userRewrites);
             if (Array.isArray(userResult)) {
-                return [...gradialRewrites, ...userResult];
+                return [...rewrites, ...userResult];
             }
             return {
                 ...userResult,
-                beforeFiles: [...gradialRewrites, ...(userResult.beforeFiles ?? [])],
+                beforeFiles: [...rewrites, ...(userResult.beforeFiles ?? [])],
             };
         },
         webpack: (config, context) => {

package/dist/next/content-watch.js

@@ -80,14 +80,19 @@ function startContentWatcher() {
     }
     rebuild('startup');
     try {
-        fs.watch(src, { recursive: true }, (_event, filename) => {
+        const watcher = fs.watch(src, { recursive: true }, (_event, filename) => {
             if (!filename)
                 return;
+            if (filename.split(path.sep).includes('.gradial-dam'))
+                return;
             clearTimeout(timer);
             timer = setTimeout(() => {
                 rebuild(path.relative(src, path.resolve(src, filename)));
             }, 100);
         });
+        watcher.on('error', (error) => {
+            console.warn(`[aci] content watch error: ${error.message}`);
+        });
     }
     catch {
         console.warn('[aci] fs.watch not supported on this platform, content watch disabled');

package/dist/next/index.d.ts

@@ -1,4 +1,4 @@
 export { DevRefresh, type DevRefreshProps } from './dev-refresh.js';
-export { withGradialAci, type WithGradialOptions } from './config.js';
+export { withAci, type WithAciOptions } from './config.js';
 export { isPreviewMode } from './preview-mode.js';
-export { createPreviewBannerHTML, createPreviewCookies, extractPreviewToken, resolvePreviewContext, PREVIEW_HEADER, RELEASE_HEADER, PREVIEW_TOKEN_COOKIE, PREVIEW_RELEASE_COOKIE, type PreviewContext, type PreviewClaims, type PreviewCookie, } from '../preview/core.js';
+export { createPage, type CreatePageOptions, type SlotPropsFn } from './page.js';

package/dist/next/index.js

@@ -1,4 +1,4 @@
 export { DevRefresh } from './dev-refresh.js';
-export { withGradialAci } from './config.js';
+export { withAci } from './config.js';
 export { isPreviewMode } from './preview-mode.js';
-export { createPreviewBannerHTML, createPreviewCookies, extractPreviewToken, resolvePreviewContext, PREVIEW_HEADER, RELEASE_HEADER, PREVIEW_TOKEN_COOKIE, PREVIEW_RELEASE_COOKIE, } from '../preview/core.js';
+export { createPage } from './page.js';

package/dist/next/middleware.d.ts

@@ -1,7 +1,11 @@
 import { NextResponse, type NextRequest } from 'next/server.js';
-export interface GradialMiddlewareConfig {
-    siteId: string;
+export interface MiddlewareConfig {
+    siteId?: string;
     edgeConfig?: string;
+    previewSignKey?: string;
     deploymentId?: string;
 }
-export declare function createGradialMiddleware(config: GradialMiddlewareConfig): (request: NextRequest) => Promise<NextResponse<unknown>>;
+export declare function createMiddleware(config?: MiddlewareConfig): (request: NextRequest) => Promise<NextResponse<unknown>>;
+export declare const config: {
+    matcher: string[];
+};

package/dist/next/middleware.js

@@ -3,8 +3,8 @@ import { getUncachedEdgeConfigValue } from './edge-config.js';
 import { PREVIEW_TOKEN_COOKIE, PREVIEW_RELEASE_COOKIE, PREVIEW_HEADER, RELEASE_HEADER, extractPreviewToken, resolvePreviewContext, createPreviewCookies, previewSignKey, } from '../preview/core.js';
 const ROUTE_HEADER = 'x-gradial-route';
 const DISPATCH_HEADER = 'x-gradial-dispatch';
-export function createGradialMiddleware(config) {
-    return async function gradialMiddleware(request) {
+export function createMiddleware(config = {}) {
+    return async function middleware(request) {
         const url = request.nextUrl;
         // ?leave_preview=1 → clear cookies, redirect to clean URL
         if (url.searchParams.get('leave_preview') === '1') {
@@ -14,7 +14,7 @@ export function createGradialMiddleware(config) {
             response.cookies.delete(PREVIEW_RELEASE_COOKIE);
             return response;
         }
-        const requestHeaders = gradialHeaders(request.headers);
+        const requestHeaders = headers(request.headers);
         // Try preview token first; if valid, use that release.
         // If no token or invalid, fall through to active release from edge config.
         const preview = await resolvePreviewFromRequest(request, config);
@@ -38,7 +38,12 @@ export function createGradialMiddleware(config) {
         return response;
     };
 }
-function gradialHeaders(headers) {
+export const config = {
+    matcher: [
+        '/((?!_next/static|_next/image|favicon.ico|.*\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)',
+    ],
+};
+function headers(headers) {
     const next = new Headers(headers);
     next.delete(RELEASE_HEADER);
     next.delete(ROUTE_HEADER);
@@ -54,12 +59,12 @@ async function resolvePreviewFromRequest(request, config) {
     });
     if (!token)
         return null;
-    const signKey = previewSignKey();
+    const signKey = config.previewSignKey || previewSignKey();
     if (!signKey) {
-        console.warn('[gradial/mw] GRADIAL_PREVIEW_SIGN_KEY not set — preview tokens will be ignored');
+        console.warn('[aci/mw] GRADIAL_PREVIEW_SIGN_KEY not set — preview tokens will be ignored');
         return null;
     }
-    return await resolvePreviewContext({ token, siteId: config.siteId, signKey });
+    return await resolvePreviewContext({ token, siteId: config.siteId || '', signKey });
 }
 function cookieMap(cookies) {
     const map = new Map();

package/dist/next/page.d.ts

@@ -1,38 +1,39 @@
-import type { ComponentType } from 'react';
 import type { Metadata } from 'next';
-import { type KernelPage, type KernelSiteConfig } from '../content/index.js';
-export interface AciPageProps {
-    page: KernelPage;
-    siteConfig: KernelSiteConfig;
-}
-export interface CreateAciPageOptions {
-    /** The site's CmsPage component that renders chrome + content blocks. */
-    CmsPage: ComponentType<AciPageProps>;
-}
+import { type KernelPage } from '../content/index.js';
+import type { Registry } from '../registry.js';
 type NextPageProps = {
     params: Promise<{
         slug?: string[];
     }>;
 };
+export type SlotPropsFn = (slotName: string, page: KernelPage) => Record<string, unknown> | undefined;
+export interface CreatePageOptions {
+    slotProps?: SlotPropsFn;
+}
 /**
  * Creates the catch-all route handler for a Next.js ACI site.
  *
  * Usage in `src/app/[[...slug]]/page.tsx`:
  *
  * ```tsx
- * import { createAciPage } from '@gradial/aci/next/page';
- * import { CmsPage } from '@/components/CmsPage';
+ * import { createPage } from '@gradial/aci/next';
+ * import { registry } from '@/cms/registry';
  *
- * const page = createAciPage({ CmsPage });
+ * const page = createPage(registry);
  * export const dynamic = page.dynamic;
  * export const generateMetadata = page.generateMetadata;
  * export default page.default;
  * ```
  *
  * The SDK owns param normalization, content loading, metadata generation,
- * and notFound handling. The site only provides its CmsPage component.
+ * notFound handling, layout resolution, and block rendering via the registry.
+ *
+ * Layout slots: createPage loads the page's layout, iterates all slots, and
+ * fills each from the page's regions. If a slot is empty, it falls back to
+ * the layout's fragment defaults (loaded via getFragment). This lets chrome
+ * be CMS-managed fragments instead of hardcoded component imports.
  */
-export declare function createAciPage({ CmsPage }: CreateAciPageOptions): {
+export declare function createPage(registry: Registry, options?: CreatePageOptions): {
     dynamic: "force-dynamic";
     generateMetadata: ({ params }: NextPageProps) => Promise<Metadata>;
     default: ({ params }: NextPageProps) => Promise<import("react").JSX.Element>;

package/dist/next/page.js

@@ -1,26 +1,33 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { notFound } from 'next/navigation.js';
-import { PageNotFoundError, routeFromNextParams, getRenderInput, } from './server.js';
-import { routeMetadataForContent, } from '../content/index.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';
 /**
  * Creates the catch-all route handler for a Next.js ACI site.
  *
  * Usage in `src/app/[[...slug]]/page.tsx`:
  *
  * ```tsx
- * import { createAciPage } from '@gradial/aci/next/page';
- * import { CmsPage } from '@/components/CmsPage';
+ * import { createPage } from '@gradial/aci/next';
+ * import { registry } from '@/cms/registry';
  *
- * const page = createAciPage({ CmsPage });
+ * const page = createPage(registry);
  * export const dynamic = page.dynamic;
  * export const generateMetadata = page.generateMetadata;
  * export default page.default;
  * ```
  *
  * The SDK owns param normalization, content loading, metadata generation,
- * and notFound handling. The site only provides its CmsPage component.
+ * notFound handling, layout resolution, and block rendering via the registry.
+ *
+ * Layout slots: createPage loads the page's layout, iterates all slots, and
+ * fills each from the page's regions. If a slot is empty, it falls back to
+ * the layout's fragment defaults (loaded via getFragment). This lets chrome
+ * be CMS-managed fragments instead of hardcoded component imports.
  */
-export function createAciPage({ CmsPage }) {
+export function createPage(registry, options) {
     const dynamic = 'force-dynamic';
     async function generateMetadata({ params }) {
         const route = await routeFromNextParams(params);
@@ -41,9 +48,22 @@ export function createAciPage({ CmsPage }) {
         const route = await routeFromNextParams(params);
         try {
             const input = await getRenderInput(route);
-            if (!input.page || input.page.status !== 'published')
+            if (!input.page)
                 notFound();
-            return _jsx(CmsPage, { page: input.page, siteConfig: input.siteConfig });
+            const layout = await getLayout(input.page.layout);
+            const resolvedSlots = await resolveSlots(layout, input.page.regions || {}, (id) => getFragment(id));
+            const renderedSlots = await Promise.all(layout.slots.map(async (slot) => {
+                const blocks = resolvedSlots[slot.name];
+                if (!blocks?.length)
+                    return null;
+                const extraProps = options?.slotProps?.(slot.name, input.page);
+                const renderedBlocks = await renderBlocks(blocks, registry, extraProps);
+                if (slot.name === 'main') {
+                    return (_jsx("main", { id: "content-main", children: renderedBlocks }, "main"));
+                }
+                return (_jsx(Fragment, { children: renderedBlocks }, slot.name));
+            }));
+            return _jsx(_Fragment, { children: renderedSlots.filter(Boolean) });
         }
         catch (error) {
             if (error instanceof PageNotFoundError)

package/dist/next/render.d.ts

@@ -0,0 +1,5 @@
+import type { ReactElement } from 'react';
+import type { KernelPageBlock } from '../content/types.js';
+import type { Registry } from '../registry.js';
+export declare function renderBlock(block: KernelPageBlock, registry: Registry, extraProps?: Record<string, unknown>): Promise<ReactElement>;
+export declare function renderBlocks(blocks: readonly KernelPageBlock[], registry: Registry, extraProps?: Record<string, unknown>): Promise<ReactElement[]>;

package/dist/next/render.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export async function renderBlock(block, registry, extraProps) {
+    const entry = registry.find((r) => r.id === block.component);
+    if (!entry) {
+        return (_jsxs("div", { className: "mx-auto my-4 max-w-[var(--max-width-container)] rounded-card border-2 border-red-600 bg-red-50 px-5 py-4 font-mono text-sm leading-relaxed text-red-900", children: [_jsx("strong", { children: "Unknown block:" }), " ", _jsx("code", { children: block.component }), _jsx("br", {}), _jsxs("span", { className: "text-red-800 opacity-70", children: ["id: ", block.id] })] }, block.id));
+    }
+    const Component = entry.component;
+    const hasBlockSlots = !!entry.contract.blockSlots;
+    const componentProps = { ...block.props, ...extraProps };
+    if (hasBlockSlots) {
+        componentProps.renderChildren = (blocks) => renderBlocks(blocks, registry, extraProps);
+    }
+    return _jsx(Component, { ...componentProps }, block.id);
+}
+export async function renderBlocks(blocks, registry, extraProps) {
+    return Promise.all(blocks.map((block) => renderBlock(block, registry, extraProps)));
+}

package/dist/next/root-layout.d.ts

@@ -0,0 +1,4 @@
+import type { ReactNode } from 'react';
+export declare function RootLayout({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;

package/dist/next/root-layout.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DevRefresh } from './dev-refresh.js';
+export function RootLayout({ children }) {
+    return (_jsx("html", { lang: "en", children: _jsxs("body", { children: [children, _jsx(DevRefresh, {})] }) }));
+}

package/dist/next/server.d.ts

@@ -1,7 +1,7 @@
-import { FragmentNotFoundError, PageNotFoundError } from '../content/provider.js';
+import { FragmentNotFoundError, LayoutNotFoundError, PageNotFoundError } from '../content/provider.js';
 import type { RenderInput } from '../content/types.js';
-export { FragmentNotFoundError, PageNotFoundError };
-export interface GradialFetchConfig {
+export { FragmentNotFoundError, PageNotFoundError, LayoutNotFoundError };
+export interface FetchConfig {
     siteId?: string;
     bucket?: string;
     keyPrefix?: string;
@@ -14,7 +14,7 @@ export interface GradialFetchConfig {
     edgeConfig?: string;
     deploymentId?: string;
 }
-export interface GradialRenderInput<TPage, TSite extends GradialSiteConfig = GradialSiteConfig> {
+export interface ServerRenderInput<TPage, TSite extends SiteConfig = SiteConfig> {
     route: string;
     domain: string;
     locale: string;
@@ -22,15 +22,16 @@ export interface GradialRenderInput<TPage, TSite extends GradialSiteConfig = Gra
     page: TPage;
     fragments?: Record<string, unknown>;
 }
-export interface GradialSiteConfig {
+export interface SiteConfig {
     domain?: string;
     defaultLocale?: string;
 }
-export declare function getPage<T = unknown>(route?: string, config?: GradialFetchConfig): Promise<T>;
-export declare function getSiteConfig<T extends GradialSiteConfig = GradialSiteConfig>(config?: GradialFetchConfig): Promise<T>;
-export declare function getFragment<T = unknown>(name: string, config?: GradialFetchConfig): Promise<T>;
-export declare function getRoutes(config?: GradialFetchConfig): Promise<string[]>;
-export declare function getRenderInput<TPage, TSite extends GradialSiteConfig = GradialSiteConfig>(route?: string, config?: GradialFetchConfig): Promise<GradialRenderInput<TPage, TSite>>;
+export declare function getPage<T = unknown>(route?: string, config?: FetchConfig): Promise<T>;
+export declare function getSiteConfig<T extends SiteConfig = SiteConfig>(config?: FetchConfig): Promise<T>;
+export declare function getFragment<T = unknown>(name: string, config?: FetchConfig): Promise<T>;
+export declare function getLayout<T = unknown>(name: string, config?: FetchConfig): Promise<T>;
+export declare function getRoutes(config?: FetchConfig): Promise<string[]>;
+export declare function getRenderInput<TPage, TSite extends SiteConfig = SiteConfig>(route?: string, config?: FetchConfig): Promise<ServerRenderInput<TPage, TSite>>;
 export declare function getPageRuntimeRenderInput(): Promise<RenderInput | null>;
 export { isPreviewMode } from './preview-mode.js';
 export declare function routeFromNextParams(params?: Promise<{
@@ -38,11 +39,11 @@ export declare function routeFromNextParams(params?: Promise<{
 }> | {
     slug?: string[];
 }): Promise<string>;
-export declare function generateGradialStaticParams(): Promise<Array<{
+export declare function generateStaticParams(): Promise<Array<{
     slug?: string[];
 }>>;
 export declare class ReleaseAssetNotFoundError extends Error {
     constructor(releaseId: string, assetPath: string, cause?: unknown);
 }
-export declare function getReleaseAssetResponse(releaseId: string, assetPath: string, config?: GradialFetchConfig): Promise<Response>;
-export declare function resolveReleaseId(config?: GradialFetchConfig): Promise<string>;
+export declare function getReleaseAssetResponse(releaseId: string, assetPath: string, config?: FetchConfig): Promise<Response>;
+export declare function resolveReleaseId(config?: FetchConfig): Promise<string>;

package/dist/next/server.js

@@ -1,12 +1,12 @@
 import { headers } from 'next/headers.js';
-import { FragmentNotFoundError, PageNotFoundError, } from '../content/provider.js';
+import { FragmentNotFoundError, LayoutNotFoundError, PageNotFoundError, } from '../content/provider.js';
 import { getCachedManifest, getCachedSiteConfig } from '../content/cache.js';
 import { S3ContentProvider } from '../providers/s3.js';
 import { GRADIAL_RENDER_INPUT_HEADER, getPendingRenderInput } from '../runtime/page.js';
 import { getUncachedEdgeConfigValue } from './edge-config.js';
 const RELEASE_HEADER = 'x-gradial-release-id';
 const PREVIEW_HEADER = 'x-gradial-preview';
-export { FragmentNotFoundError, PageNotFoundError };
+export { FragmentNotFoundError, PageNotFoundError, LayoutNotFoundError };
 export async function getPage(route = '', config = {}) {
     const runtimeInput = await getPageRuntimeRenderInput();
     if (runtimeInput)
@@ -31,6 +31,16 @@ export async function getFragment(name, config = {}) {
     const provider = await resolveProviderWithFallback(config);
     return await provider.getFragment(name);
 }
+export async function getLayout(name, config = {}) {
+    const runtimeInput = await getPageRuntimeRenderInput();
+    if (runtimeInput) {
+        const layouts = runtimeInput.layouts || {};
+        if (name in layouts)
+            return layouts[name];
+    }
+    const provider = await resolveProviderWithFallback(config);
+    return await provider.getLayout(name);
+}
 export async function getRoutes(config = {}) {
     const provider = await resolveProviderWithFallback(config);
     const routes = await provider.listRoutes();
@@ -74,7 +84,7 @@ export async function routeFromNextParams(params) {
         return '/';
     return `/${resolved.slug.join('/')}/`;
 }
-export async function generateGradialStaticParams() {
+export async function generateStaticParams() {
     const { FileContentProvider } = await import('../providers/file.js');
     const provider = new FileContentProvider();
     const routes = await provider.listRoutes();

package/dist/providers/file.d.ts

@@ -7,6 +7,8 @@ export declare class FileContentProvider implements ContentProvider {
     getSiteConfig<T = unknown>(): Promise<T>;
     getPage<T = unknown>(route: string): Promise<T>;
     getFragment<T = unknown>(id: string): Promise<T>;
+    getLayout<T = unknown>(name: string): Promise<T>;
     manifest(): Promise<CompiledManifest>;
+    fetchRaw(key: string): Promise<Response>;
     private readJSON;
 }

package/dist/providers/file.js

@@ -1,6 +1,6 @@
 import fs from 'node:fs/promises';
 import path from 'node:path';
-import { FragmentNotFoundError, PageNotFoundError } from '../content/provider.js';
+import { FragmentNotFoundError, LayoutNotFoundError, PageNotFoundError } from '../content/provider.js';
 import { normalizeRoute } from '../content/routes.js';
 export class FileContentProvider {
     root;
@@ -46,12 +46,72 @@ export class FileContentProvider {
             throw new FragmentNotFoundError(id, error);
         }
     }
+    async getLayout(name) {
+        const manifest = await this.manifest();
+        const layouts = manifest.layouts;
+        if (!layouts || !layouts[name]) {
+            throw new LayoutNotFoundError(name);
+        }
+        try {
+            return await this.readJSON(`layouts/${name}.json`);
+        }
+        catch (error) {
+            throw new LayoutNotFoundError(name, error);
+        }
+    }
     async manifest() {
         this.#manifest ??= this.readJSON('manifest.json');
         return await this.#manifest;
     }
+    async fetchRaw(key) {
+        const relativeKey = key.replace(/^\/+/, '');
+        const filePath = path.resolve(this.root, relativeKey);
+        const rel = path.relative(this.root, filePath);
+        if (rel === '' || rel.startsWith('..') || path.isAbsolute(rel)) {
+            return new Response('not found', { status: 404 });
+        }
+        let body;
+        try {
+            body = await fs.readFile(filePath);
+        }
+        catch {
+            return new Response('not found', { status: 404 });
+        }
+        return new Response(new Uint8Array(body), {
+            status: 200,
+            headers: {
+                'content-type': contentType(filePath),
+                'cache-control': 'public, max-age=31536000, immutable',
+            },
+        });
+    }
     async readJSON(key) {
         const raw = await fs.readFile(path.join(this.root, key), 'utf8');
         return JSON.parse(raw);
     }
 }
+function contentType(filePath) {
+    switch (path.extname(filePath).toLowerCase()) {
+        case '.webp':
+            return 'image/webp';
+        case '.svg':
+            return 'image/svg+xml';
+        case '.jpg':
+        case '.jpeg':
+            return 'image/jpeg';
+        case '.png':
+            return 'image/png';
+        case '.avif':
+            return 'image/avif';
+        case '.gif':
+            return 'image/gif';
+        case '.css':
+            return 'text/css';
+        case '.js':
+            return 'application/javascript';
+        case '.json':
+            return 'application/json';
+        default:
+            return 'application/octet-stream';
+    }
+}

package/dist/providers/s3.d.ts

@@ -17,6 +17,7 @@ export declare class S3ContentProvider implements ContentProvider {
     getSiteConfig<T = unknown>(): Promise<T>;
     getPage<T = unknown>(route: string): Promise<T>;
     getFragment<T = unknown>(id: string): Promise<T>;
+    getLayout<T = unknown>(name: string): Promise<T>;
     manifest(): Promise<CompiledManifest>;
     fetchRaw(key: string): Promise<Response>;
     private getJSON;

package/dist/providers/s3.js

@@ -1,5 +1,5 @@
 import crypto from 'node:crypto';
-import { FragmentNotFoundError, PageNotFoundError } from '../content/provider.js';
+import { FragmentNotFoundError, LayoutNotFoundError, PageNotFoundError } from '../content/provider.js';
 import { normalizeRoute } from '../content/routes.js';
 // ---------------------------------------------------------------------------
 // S3 content provider — reads compiled content files from S3
@@ -45,6 +45,19 @@ export class S3ContentProvider {
             throw new FragmentNotFoundError(id, error);
         }
     }
+    async getLayout(name) {
+        const manifest = await this.manifest();
+        const layouts = manifest.layouts;
+        if (!layouts || !layouts[name]) {
+            throw new LayoutNotFoundError(name);
+        }
+        try {
+            return await this.getJSON(`layouts/${name}.json`);
+        }
+        catch (error) {
+            throw new LayoutNotFoundError(name, error);
+        }
+    }
     async manifest() {
         this.#manifest ??= this.getJSON('manifest.json');
         return await this.#manifest;

package/dist/react/Media.d.ts

@@ -0,0 +1,24 @@
+import { type CSSProperties, type ImgHTMLAttributes, type VideoHTMLAttributes } from 'react';
+import type { Asset } from '../types/media.js';
+export interface MediaProps {
+    /** The compiler-resolved media to render. */
+    media: Asset;
+    /** CSS class applied to the rendered element. */
+    className?: string;
+    /** Inline styles applied to the rendered element. */
+    style?: CSSProperties;
+    /** Loading strategy for images. Defaults to 'lazy'. */
+    loading?: 'eager' | 'lazy';
+    /** Additional image attributes (only applied when media is an image). */
+    imgProps?: Omit<ImgHTMLAttributes<HTMLImageElement>, 'src' | 'alt'>;
+    /** Additional video attributes (only applied when media is a video). */
+    videoProps?: Omit<VideoHTMLAttributes<HTMLVideoElement>, 'src' | 'poster' | 'width' | 'height'>;
+}
+/**
+ * Polymorphic media component — renders an Image or Video as the appropriate
+ * HTML element based on $type.
+ *
+ * - gradial.image → <img> with srcset via Picture
+ * - gradial.video → <video> via VideoPlayer
+ */
+export declare function Media({ media, className, style, loading, imgProps, videoProps, }: MediaProps): import("react").FunctionComponentElement<import("./VideoPlayer.js").VideoPlayerProps> | import("react").FunctionComponentElement<import("./Picture.js").PictureProps>;

package/dist/react/Media.js

@@ -0,0 +1,30 @@
+import { createElement } from 'react';
+import { Picture } from './Picture.js';
+import { VideoPlayer } from './VideoPlayer.js';
+/**
+ * Polymorphic media component — renders an Image or Video as the appropriate
+ * HTML element based on $type.
+ *
+ * - gradial.image → <img> with srcset via Picture
+ * - gradial.video → <video> via VideoPlayer
+ */
+export function Media({ media, className, style, loading = 'lazy', imgProps, videoProps, }) {
+    switch (media.$type) {
+        case 'gradial.video':
+            return createElement(VideoPlayer, {
+                video: media,
+                className,
+                style,
+                ...videoProps,
+            });
+        case 'gradial.image':
+        default:
+            return createElement(Picture, {
+                image: media,
+                className,
+                style,
+                loading,
+                ...imgProps,
+            });
+    }
+}

package/dist/react/Picture.d.ts

@@ -0,0 +1,12 @@
+import { type ImgHTMLAttributes } from 'react';
+import { type Image } from '../types/image.js';
+export interface PictureProps extends Omit<ImgHTMLAttributes<HTMLImageElement>, 'src' | 'alt' | 'width' | 'height'> {
+    image: Image;
+}
+/**
+ * Renders an Image as a responsive <img> element.
+ *
+ * Delegates attribute computation to the shared `imageAttrs()` pure function
+ * so React, Astro, and Svelte all produce identical output.
+ */
+export declare function Picture({ image, ...attrs }: PictureProps): import("react").DetailedReactHTMLElement<import("../types/image.js").ImageAttrs, HTMLElement>;

package/dist/react/Picture.js

@@ -0,0 +1,11 @@
+import { createElement } from 'react';
+import { imageAttrs } from '../types/image.js';
+/**
+ * Renders an Image as a responsive <img> element.
+ *
+ * Delegates attribute computation to the shared `imageAttrs()` pure function
+ * so React, Astro, and Svelte all produce identical output.
+ */
+export function Picture({ image, ...attrs }) {
+    return createElement('img', imageAttrs(image, attrs));
+}

package/dist/react/VideoPlayer.d.ts

@@ -0,0 +1,13 @@
+import { type VideoHTMLAttributes } from 'react';
+import type { Video } from '../types/video.js';
+export interface VideoPlayerProps extends Omit<VideoHTMLAttributes<HTMLVideoElement>, 'src' | 'poster' | 'width' | 'height'> {
+    video: Video;
+}
+/**
+ * Renders a Video as a <video> element.
+ *
+ * - Uses the primary source from poster for the poster attribute.
+ * - Includes <source> elements for format variants when available.
+ * - Uses the src attribute on <video> when no source variants exist.
+ */
+export declare function VideoPlayer({ video, ...attrs }: VideoPlayerProps): import("react").DetailedReactHTMLElement<Record<string, unknown>, HTMLElement>;

package/dist/react/{GradialVideoPlayer.js → VideoPlayer.js}

@@ -1,13 +1,14 @@
 import { createElement } from 'react';
+import { primaryImageSource } from '../types/image.js';
 /**
- * Renders a GradialVideo as a <video> element.
+ * Renders a Video as a <video> element.
  *
- * - Uses poster.fallback.src for the poster attribute (single URL — browser limitation).
+ * - Uses the primary source from poster for the poster attribute.
  * - Includes <source> elements for format variants when available.
- * - Falls back to src attribute on <video> when no source variants exist.
+ * - Uses the src attribute on <video> when no source variants exist.
  */
-export function GradialVideoPlayer({ video, ...attrs }) {
-    const posterSrc = video.poster?.fallback.src;
+export function VideoPlayer({ video, ...attrs }) {
+    const posterSrc = video.poster ? primaryImageSource(video.poster).src : undefined;
     const hasSources = video.sources && video.sources.length > 0;
     const videoAttrs = {
         poster: posterSrc,