@gradial/aci 0.1.20-preview.3 → 0.1.21

package/dist/next/middleware.js

@@ -4,7 +4,7 @@ import { PREVIEW_TOKEN_COOKIE, PREVIEW_RELEASE_COOKIE, PREVIEW_HEADER, RELEASE_H
 const ROUTE_HEADER = 'x-gradial-route';
 const DISPATCH_HEADER = 'x-gradial-dispatch';
 export function createGradialMiddleware(config = {}) {
-    return async function gradialMiddleware(request) {
+    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') {
@@ -22,6 +22,19 @@ export function createGradialMiddleware(config = {}) {
         if (!releaseId) {
             return NextResponse.next({ request: { headers: requestHeaders } });
         }
+        // Cross-deployment preview: if the token was staged on a different Vercel
+        // deployment, rewrite the request to that deployment. This keeps the browser
+        // on the production domain while the correct code runtime serves the request.
+        const rewriteTarget = preview ? previewRewriteTarget(request, preview, config) : null;
+        if (rewriteTarget) {
+            const response = NextResponse.rewrite(rewriteTarget, { request: { headers: requestHeaders } });
+            if (preview?.token && preview.isPreview) {
+                for (const cookie of createPreviewCookies(preview.token, releaseId)) {
+                    response.cookies.set(cookie.name, cookie.value, cookie.options);
+                }
+            }
+            return response;
+        }
         requestHeaders.set(RELEASE_HEADER, releaseId);
         requestHeaders.set(ROUTE_HEADER, url.pathname);
         requestHeaders.set(DISPATCH_HEADER, 'ssr-page');
@@ -38,11 +51,32 @@ export function createGradialMiddleware(config = {}) {
         return response;
     };
 }
-export const config = {
-    matcher: [
-        '/((?!_next/static|_next/image|favicon.ico|.*\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)',
-    ],
-};
+function previewRewriteTarget(request, preview, config) {
+    const claims = preview.claims;
+    if (!claims?.deploymentId || !claims?.deploymentUrl || !preview.token) {
+        return null;
+    }
+    const currentDeploymentId = config.deploymentId || process.env.VERCEL_DEPLOYMENT_ID || '';
+    if (!currentDeploymentId || currentDeploymentId === claims.deploymentId) {
+        return null;
+    }
+    const base = buildDeploymentUrl(claims.deploymentUrl);
+    const target = new URL(request.nextUrl.pathname + request.nextUrl.search, base);
+    if (!target.searchParams.has('preview_token')) {
+        target.searchParams.set('preview_token', preview.token);
+    }
+    const bypass = config.deploymentProtectionBypass || process.env.VERCEL_DEPLOYMENT_PROTECTION_BYPASS;
+    if (bypass) {
+        target.searchParams.set('x-vercel-protection-bypass', bypass);
+    }
+    return target;
+}
+function buildDeploymentUrl(value) {
+    if (value.startsWith('http://') || value.startsWith('https://')) {
+        return value;
+    }
+    return `https://${value}`;
+}
 function gradialHeaders(headers) {
     const next = new Headers(headers);
     next.delete(RELEASE_HEADER);
@@ -59,9 +93,9 @@ 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 });
@@ -143,3 +177,10 @@ function clampRelease(activeReleaseId, activeSequence, compatibility) {
 function edgeKeySegment(value) {
     return value.replace(/[^A-Za-z0-9_-]/g, '_');
 }
+// Default matcher. _next/static is included so that cross-deployment previews
+// can rewrite static assets to the staged deployment. _next/image is excluded
+// because it is a generic optimization endpoint and does not carry code-specific
+// assets in most configurations. Consumers can override this if needed.
+export const config = {
+    matcher: ['/((?!_next/image|favicon.ico|\\.gradial-dam|api/baremetal-assets|gradial/assets).*)'],
+};

package/dist/next/page.d.ts

@@ -16,7 +16,7 @@ export interface CreatePageOptions {
  * Usage in `src/app/[[...slug]]/page.tsx`:
  *
  * ```tsx
- * import { createPage } from '@gradial/aci/next/page';
+ * import { createPage } from '@gradial/aci/next';
  * import { registry } from '@/cms/registry';
  *
  * const page = createPage(registry);

package/dist/next/page.js

@@ -10,7 +10,7 @@ import { renderBlocks } from './render.js';
  * Usage in `src/app/[[...slug]]/page.tsx`:
  *
  * ```tsx
- * import { createPage } from '@gradial/aci/next/page';
+ * import { createPage } from '@gradial/aci/next';
  * import { registry } from '@/cms/registry';
  *
  * const page = createPage(registry);
@@ -48,20 +48,22 @@ export function createPage(registry, options) {
         const route = await routeFromNextParams(params);
         try {
             const input = await getRenderInput(route);
-            if (!input.page || input.page.status !== 'published')
+            if (!input.page)
                 notFound();
             const layout = await getLayout(input.page.layout);
             const resolvedSlots = await resolveSlots(layout, input.page.regions || {}, (id) => getFragment(id));
-            return (_jsx(_Fragment, { children: layout.slots.map((slot) => {
-                    const blocks = resolvedSlots[slot.name];
-                    if (!blocks?.length)
-                        return null;
-                    const extraProps = options?.slotProps?.(slot.name, input.page);
-                    if (slot.name === 'main') {
-                        return (_jsx("main", { id: "content-main", children: renderBlocks(blocks, registry, extraProps) }, "main"));
-                    }
-                    return (_jsx(Fragment, { children: renderBlocks(blocks, registry, extraProps) }, slot.name));
-                }) }));
+            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

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

@@ -1,15 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export function renderBlock(block, registry, extraProps) {
-    const entry = registry.find((r) => r.name === block.component);
+export async function renderBlock(block, registry, extraProps) {
+    const entry = registry.find((r) => r.id === block.component);
     if (!entry) {
-        if (process.env.NODE_ENV !== 'production') {
-            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));
-        }
-        return null;
+        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;
-    return _jsx(Component, { ...block.props, ...extraProps }, block.id);
+    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 function renderBlocks(blocks, registry, extraProps) {
-    return blocks.map((block) => renderBlock(block, registry, extraProps));
+export async function renderBlocks(blocks, registry, extraProps) {
+    return Promise.all(blocks.map((block) => renderBlock(block, registry, extraProps)));
 }

package/dist/next/server.d.ts

@@ -1,7 +1,7 @@
 import { FragmentNotFoundError, LayoutNotFoundError, PageNotFoundError } from '../content/provider.js';
 import type { RenderInput } from '../content/types.js';
 export { FragmentNotFoundError, PageNotFoundError, LayoutNotFoundError };
-export interface GradialFetchConfig {
+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,16 +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 getLayout<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<{
@@ -39,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

@@ -84,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/preview/core.d.ts

@@ -2,6 +2,10 @@ export interface PreviewClaims {
     scope?: string;
     releaseId?: string;
     siteId?: string;
+    codeDigest?: string;
+    contentSnapshotId?: string;
+    deploymentId?: string;
+    deploymentUrl?: string;
     expiresAt?: string;
 }
 export interface PreviewTokenSource {
@@ -18,6 +22,7 @@ export interface PreviewContext {
     isPreview: boolean;
     releaseId?: string;
     token?: string;
+    claims?: PreviewClaims;
 }
 export interface PreviewCookie {
     name: string;

package/dist/preview/core.js

@@ -63,7 +63,7 @@ export async function resolvePreviewContext(options) {
     if (!claims.expiresAt || Date.parse(claims.expiresAt) <= Date.now()) {
         return { isPreview: false };
     }
-    return { isPreview: true, releaseId: claims.releaseId, token };
+    return { isPreview: true, releaseId: claims.releaseId, token, claims };
 }
 export function createPreviewCookies(token, releaseId) {
     const common = {

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,