@gradial/aci 0.1.10 → 0.1.12

package/dist/index.d.ts

@@ -2,3 +2,4 @@ export * from './block-ref.js';
 export * from './define-component.js';
 export * from './define-layout.js';
 export * from './types/index.js';
+export * from './render.js';

package/dist/index.js

@@ -2,6 +2,7 @@ export * from './block-ref.js';
 export * from './define-component.js';
 export * from './define-layout.js';
 export * from './types/index.js';
+export * from './render.js';
 // Note: content/ is NOT re-exported here because it imports node:path,
 // making it incompatible with client-side bundlers. Import server-only
 // content utilities from '@gradial/aci/content' explicitly.

package/dist/next/index.d.ts

@@ -1,2 +1,3 @@
 export { DevRefresh, type DevRefreshProps } from './dev-refresh.js';
 export { withGradial, type WithGradialOptions } from './config.js';
+export { PreviewBanner } from './preview-banner.js';

package/dist/next/index.js

@@ -1,2 +1,3 @@
 export { DevRefresh } from './dev-refresh.js';
 export { withGradial } from './config.js';
+export { PreviewBanner } from './preview-banner.js';

package/dist/next/middleware.js

@@ -6,6 +6,14 @@ const ROUTE_HEADER = 'x-gradial-route';
 const DISPATCH_HEADER = 'x-gradial-dispatch';
 export function createGradialMiddleware(config) {
     return async function gradialMiddleware(request) {
+        const url = request.nextUrl;
+        if (url.searchParams.get('leave_preview') === '1') {
+            const cleanUrl = new URL(url.pathname, url.origin);
+            const response = NextResponse.redirect(cleanUrl);
+            response.cookies.delete('aci_preview');
+            response.cookies.delete('aci_preview_release');
+            return response;
+        }
         const requestHeaders = gradialHeaders(request.headers);
         const preview = await releaseFromPreviewToken(request, config);
         if (preview.invalid) {
@@ -16,13 +24,28 @@ export function createGradialMiddleware(config) {
             return NextResponse.next({ request: { headers: requestHeaders } });
         }
         requestHeaders.set(RELEASE_HEADER, releaseId);
-        requestHeaders.set(ROUTE_HEADER, request.nextUrl.pathname);
+        requestHeaders.set(ROUTE_HEADER, url.pathname);
         requestHeaders.set(DISPATCH_HEADER, 'ssr-page');
-        return NextResponse.next({
-            request: {
-                headers: requestHeaders,
-            },
-        });
+        if (preview.releaseId) {
+            requestHeaders.set('x-gradial-preview', '1');
+        }
+        const response = NextResponse.next({ request: { headers: requestHeaders } });
+        const queryToken = url.searchParams.get('preview_token');
+        if (queryToken && preview.releaseId) {
+            response.cookies.set('aci_preview', queryToken, {
+                httpOnly: true,
+                sameSite: 'lax',
+                maxAge: 60 * 60,
+                path: '/',
+            });
+            response.cookies.set('aci_preview_release', preview.releaseId, {
+                httpOnly: false,
+                sameSite: 'lax',
+                maxAge: 60 * 60,
+                path: '/',
+            });
+        }
+        return response;
     };
 }
 function gradialHeaders(headers) {
@@ -106,9 +129,11 @@ async function releaseFromPreviewToken(request, config) {
     const token = previewTokenFromRequest(request);
     if (!token)
         return { releaseId: '', invalid: false };
-    const signKey = config.previewSignKey || process.env.ACI_PREVIEW_SIGN_KEY || '';
-    if (!signKey)
-        return { releaseId: '', invalid: true };
+    const signKey = config.previewSignKey || process.env.ACI_PREVIEW_SIGN_KEY || process.env.GRADIAL_PREVIEW_SIGN_KEY || '';
+    if (!signKey) {
+        console.warn('[gradial] preview sign key not set (ACI_PREVIEW_SIGN_KEY or GRADIAL_PREVIEW_SIGN_KEY) — preview token ignored');
+        return { releaseId: '', invalid: false };
+    }
     const claims = await validatePreviewToken(token, signKey);
     if (!claims || claims.scope !== 'preview' || !claims.releaseId)
         return { releaseId: '', invalid: true };

package/dist/next/preview-banner.d.ts

@@ -0,0 +1 @@
+export declare function PreviewBanner(): Promise<import("react").JSX.Element | null>;

package/dist/next/preview-banner.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { isPreviewMode } from './server.js';
+export async function PreviewBanner() {
+    const releaseId = await isPreviewMode();
+    if (!releaseId)
+        return null;
+    const shortId = releaseId.length > 20
+        ? `${releaseId.slice(0, 8)}\u2026${releaseId.slice(-6)}`
+        : releaseId;
+    return (_jsxs("div", { role: "alert", style: {
+            position: 'fixed',
+            top: 0,
+            left: 0,
+            right: 0,
+            zIndex: 9999,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            gap: '12px',
+            padding: '8px 16px',
+            backgroundColor: '#1a1a2e',
+            color: '#fff',
+            fontSize: '13px',
+            fontFamily: 'system-ui, -apple-system, sans-serif',
+            boxShadow: '0 2px 8px rgba(0,0,0,0.3)',
+        }, children: [_jsx("span", { "aria-hidden": "true", style: {
+                    display: 'inline-flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    width: '18px',
+                    height: '18px',
+                    borderRadius: '50%',
+                    backgroundColor: '#f59e0b',
+                    color: '#1a1a2e',
+                    fontWeight: 700,
+                    fontSize: '11px',
+                    flexShrink: 0,
+                }, children: "P" }), _jsx("span", { style: { fontWeight: 500 }, children: "Release Preview" }), _jsx("span", { style: {
+                    fontFamily: 'monospace',
+                    opacity: 0.7,
+                    fontSize: '12px',
+                }, title: releaseId, children: shortId }), _jsx("a", { href: "?leave_preview=1", style: {
+                    marginLeft: 'auto',
+                    padding: '4px 12px',
+                    borderRadius: '6px',
+                    backgroundColor: '#dc2626',
+                    color: '#fff',
+                    textDecoration: 'none',
+                    fontSize: '12px',
+                    fontWeight: 600,
+                    whiteSpace: 'nowrap',
+                }, children: "Exit Preview" })] }));
+}

package/dist/next/server.d.ts

@@ -32,6 +32,7 @@ export declare function getFragment<T = unknown>(name: string, config?: GradialF
 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 getPageRuntimeRenderInput(): Promise<RenderInput | null>;
+export declare function isPreviewMode(): Promise<string>;
 export declare function routeFromNextParams(params?: Promise<{
     slug?: string[];
 }> | {

package/dist/next/server.js

@@ -5,6 +5,7 @@ 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 async function getPage(route = '', config = {}) {
     const runtimeInput = await getPageRuntimeRenderInput();
@@ -70,6 +71,16 @@ export async function getPageRuntimeRenderInput() {
         return null;
     }
 }
+export async function isPreviewMode() {
+    try {
+        const current = await headers();
+        if (current.get(PREVIEW_HEADER) === '1') {
+            return current.get(RELEASE_HEADER) || '';
+        }
+    }
+    catch { }
+    return '';
+}
 export async function routeFromNextParams(params) {
     if (!params)
         return '/';

package/dist/render.d.ts

@@ -0,0 +1,14 @@
+import type { ComponentType, ReactNode } from 'react';
+export interface BlockData {
+    id: string;
+    component: string;
+    props: Record<string, unknown>;
+}
+export type ComponentRegistry = Record<string, ComponentType<any>>;
+export interface RenderBlocksOptions {
+    registry: ComponentRegistry;
+    compositionParams?: Record<string, unknown>;
+    slot?: string;
+}
+export declare function renderBlock(block: BlockData, registry: ComponentRegistry, compositionParams?: Record<string, unknown>): ReactNode;
+export declare function renderBlocks(blocks: readonly BlockData[], opts: RenderBlocksOptions): ReactNode[];

package/dist/render.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PreviewBanner } from './next/preview-banner.js';
+function BlockError({ component, id }) {
+    return (_jsxs("div", { style: {
+            padding: '1rem 1.25rem',
+            margin: '1rem 0',
+            background: '#fef2f2',
+            border: '2px solid #dc2626',
+            borderRadius: '6px',
+            fontFamily: 'ui-monospace, monospace',
+            fontSize: '13px',
+            lineHeight: 1.5,
+            color: '#991b1b',
+        }, children: [_jsx("strong", { children: "Unknown block:" }), " ", _jsx("code", { children: component }), _jsx("br", {}), _jsxs("span", { style: { color: '#b91c1c', opacity: 0.7 }, children: ["id: ", id] })] }));
+}
+export function renderBlock(block, registry, compositionParams) {
+    const Component = registry[block.component];
+    if (!Component) {
+        if (process.env.NODE_ENV !== 'production') {
+            return _jsx(BlockError, { component: block.component, id: block.id }, block.id);
+        }
+        return null;
+    }
+    return _jsx(Component, { ...block.props, ...compositionParams }, block.id);
+}
+export function renderBlocks(blocks, opts) {
+    const { registry, compositionParams, slot } = opts;
+    const rendered = blocks.map((block) => renderBlock(block, registry, compositionParams));
+    if (slot === 'main') {
+        return [_jsx(PreviewBanner, {}, "__gradial_preview"), ...rendered];
+    }
+    return rendered;
+}

package/package.json

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