@gradial/aci 0.1.1 → 0.1.2

package/dist/providers/s3.js

@@ -2,7 +2,7 @@ import crypto from 'node:crypto';
 import { FragmentNotFoundError, PageNotFoundError } from '../content/provider.js';
 import { normalizeRoute } from '../content/routes.js';
 // ---------------------------------------------------------------------------
-// S3 content provider — reads compiled manifest + payloads from S3
+// S3 content provider — reads compiled content files from S3
 // ---------------------------------------------------------------------------
 export class S3ContentProvider {
     config;
@@ -49,6 +49,9 @@ export class S3ContentProvider {
         this.#manifest ??= this.getJSON('manifest.json');
         return await this.#manifest;
     }
+    async fetchRaw(key) {
+        return await getS3Raw(key, this.config);
+    }
     async getJSON(key) {
         return await getS3JSON(joinKey(this.config.keyPrefix, key), this.config);
     }
@@ -69,6 +72,15 @@ export async function getS3JSON(key, config) {
     }
     return (await res.json());
 }
+export async function getS3Raw(key, config) {
+    const url = s3ObjectURL(config, key);
+    const signedHeaders = signedS3Headers('GET', url, config);
+    return await fetch(url, {
+        method: 'GET',
+        headers: signedHeaders,
+        cache: 'no-store'
+    });
+}
 // ---------------------------------------------------------------------------
 // Internal helpers
 // ---------------------------------------------------------------------------

package/dist/react/GradialMedia.d.ts

@@ -0,0 +1,24 @@
+import { type CSSProperties, type ImgHTMLAttributes, type VideoHTMLAttributes } from 'react';
+import type { GradialAsset } from '../types/media.js';
+export interface GradialMediaProps {
+    /** The compiler-resolved asset to render. */
+    asset: GradialAsset;
+    /** 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 asset is an image). */
+    imgProps?: Omit<ImgHTMLAttributes<HTMLImageElement>, 'src' | 'alt'>;
+    /** Additional video attributes (only applied when asset is a video). */
+    videoProps?: Omit<VideoHTMLAttributes<HTMLVideoElement>, 'src' | 'poster' | 'width' | 'height'>;
+}
+/**
+ * Polymorphic media component — renders a GradialAsset as the appropriate
+ * HTML element based on $type.
+ *
+ * - gradial.image → <picture> or <img> via GradialPicture
+ * - gradial.video → <video> via GradialVideoPlayer
+ */
+export declare function GradialMedia({ asset, className, style, loading, imgProps, videoProps, }: GradialMediaProps): import("react").FunctionComponentElement<import("./GradialPicture.js").GradialPictureProps> | import("react").FunctionComponentElement<import("./GradialVideoPlayer.js").GradialVideoPlayerProps> | null;

package/dist/react/GradialMedia.js

@@ -0,0 +1,31 @@
+import { createElement } from 'react';
+import { GradialPicture } from './GradialPicture.js';
+import { GradialVideoPlayer } from './GradialVideoPlayer.js';
+/**
+ * Polymorphic media component — renders a GradialAsset as the appropriate
+ * HTML element based on $type.
+ *
+ * - gradial.image → <picture> or <img> via GradialPicture
+ * - gradial.video → <video> via GradialVideoPlayer
+ */
+export function GradialMedia({ asset, className, style, loading = 'lazy', imgProps, videoProps, }) {
+    switch (asset.$type) {
+        case 'gradial.image':
+            return createElement(GradialPicture, {
+                image: asset,
+                className,
+                style,
+                loading,
+                ...imgProps,
+            });
+        case 'gradial.video':
+            return createElement(GradialVideoPlayer, {
+                video: asset,
+                className,
+                style,
+                ...videoProps,
+            });
+        default:
+            return null;
+    }
+}

package/dist/react/GradialPicture.d.ts

@@ -0,0 +1,14 @@
+import { type ImgHTMLAttributes } from 'react';
+import type { GradialImage } from '../types/image.js';
+export interface GradialPictureProps extends Omit<ImgHTMLAttributes<HTMLImageElement>, 'src' | 'alt'> {
+    image: GradialImage;
+}
+/**
+ * Renders a GradialImage as a <picture> element with responsive <source> entries,
+ * or a plain <img> when no art-directed sources exist.
+ *
+ * The compiler output determines the rendering:
+ * - sources[] populated → <picture> with <source> elements (art direction / format variants)
+ * - sources[] empty → <img> with fallback src
+ */
+export declare function GradialPicture({ image, ...attrs }: GradialPictureProps): import("react").DetailedReactHTMLElement<import("react").HTMLAttributes<HTMLElement>, HTMLElement>;

package/dist/react/GradialPicture.js

@@ -0,0 +1,30 @@
+import { createElement } from 'react';
+/**
+ * Renders a GradialImage as a <picture> element with responsive <source> entries,
+ * or a plain <img> when no art-directed sources exist.
+ *
+ * The compiler output determines the rendering:
+ * - sources[] populated → <picture> with <source> elements (art direction / format variants)
+ * - sources[] empty → <img> with fallback src
+ */
+export function GradialPicture({ image, ...attrs }) {
+    const img = createElement('img', {
+        src: image.fallback.src,
+        alt: image.alt,
+        width: image.fallback.width > 0 ? image.fallback.width : undefined,
+        height: image.fallback.height > 0 ? image.fallback.height : undefined,
+        loading: 'lazy',
+        decoding: 'async',
+        ...attrs,
+    });
+    if (!image.sources?.length) {
+        return img;
+    }
+    return createElement('picture', null, ...image.sources.map((source, index) => createElement('source', {
+        key: index,
+        media: source.media,
+        type: source.type,
+        srcSet: source.srcset,
+        sizes: source.sizes,
+    })), img);
+}

package/dist/react/GradialVideoPlayer.d.ts

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

package/dist/react/GradialVideoPlayer.js

@@ -0,0 +1,28 @@
+import { createElement } from 'react';
+/**
+ * Renders a GradialVideo as a <video> element.
+ *
+ * - Uses poster.fallback.src for the poster attribute (single URL — browser limitation).
+ * - Includes <source> elements for format variants when available.
+ * - Falls back to src attribute on <video> when no source variants exist.
+ */
+export function GradialVideoPlayer({ video, ...attrs }) {
+    const posterSrc = video.poster?.fallback.src;
+    const hasSources = video.sources && video.sources.length > 0;
+    const videoAttrs = {
+        poster: posterSrc,
+        width: video.width > 0 ? video.width : undefined,
+        height: video.height > 0 ? video.height : undefined,
+        ...attrs,
+    };
+    // If no format variants, put src directly on <video>
+    if (!hasSources) {
+        videoAttrs.src = video.src;
+    }
+    const children = (video.sources ?? []).map((source, index) => createElement('source', {
+        key: index,
+        src: source.src,
+        type: source.type,
+    }));
+    return createElement('video', videoAttrs, ...children);
+}

package/dist/react/index.d.ts

@@ -0,0 +1,3 @@
+export { GradialPicture } from './GradialPicture.js';
+export { GradialVideoPlayer } from './GradialVideoPlayer.js';
+export { GradialMedia } from './GradialMedia.js';

package/dist/react/index.js

@@ -0,0 +1,3 @@
+export { GradialPicture } from './GradialPicture.js';
+export { GradialVideoPlayer } from './GradialVideoPlayer.js';
+export { GradialMedia } from './GradialMedia.js';

package/dist/sveltekit/index.js

@@ -1,4 +1,4 @@
-import { gradialContentWatchPlugin, devRefreshPort, devRefreshScriptTag, } from '../dev/index.js';
+import { gradialContentWatchPlugin, gradialDamAssetPlugin, devRefreshPort, devRefreshScriptTag, } from '../dev/index.js';
 // ---------------------------------------------------------------------------
 // Entries helper — for SvelteKit SSG prerendering
 // ---------------------------------------------------------------------------
@@ -32,9 +32,14 @@ export async function gradialEntries() {
 // ---------------------------------------------------------------------------
 export function gradialSvelteKit(options = {}) {
     const watchPlugin = gradialContentWatchPlugin(options);
+    const damAssetPlugin = gradialDamAssetPlugin(options);
     return {
         ...watchPlugin,
         name: 'gradial-sveltekit',
+        configureServer(server) {
+            damAssetPlugin.configureServer?.(server);
+            watchPlugin.configureServer?.(server);
+        },
         transformIndexHtml(html) {
             if (process.env.NODE_ENV === 'production') {
                 return html;

package/dist/types/component.d.ts

@@ -19,8 +19,12 @@ type CmsComponentFn<TProps = any> = ((props: TProps) => import('react').ReactEle
 type InferContentProps<TSchema> = TSchema extends z.ZodType<infer T> ? T : Record<string, unknown>;
 export interface ComponentDefinition<TSchema = unknown> {
     name: string;
-    /** The React component that renders this CMS block. Typed against the schema. */
-    component?: CmsComponentFn<InferContentProps<TSchema>>;
+    /**
+     * The React component that renders this CMS block.
+     * Accepts at least the schema-derived props, but may accept additional
+     * composition params (className, etc.) passed by parent sections.
+     */
+    component?: CmsComponentFn<any>;
     schema: TSchema;
     renderModes?: ComponentRenderModes;
     render?: ComponentRenderModes;
@@ -31,7 +35,7 @@ export interface ComponentDefinition<TSchema = unknown> {
 }
 export interface ComponentContract<TSchema = unknown> {
     name: string;
-    component?: CmsComponentFn<InferContentProps<TSchema>>;
+    component?: CmsComponentFn<any>;
     schema: TSchema;
     renderModes: ComponentRenderModes;
     render: ComponentRenderModes;
@@ -40,4 +44,5 @@ export interface ComponentContract<TSchema = unknown> {
     vary?: VaryDimension[];
     imageSlots?: Record<string, ImageSlotContract>;
 }
+export type InferComponentProps<TContract> = TContract extends ComponentContract<infer TSchema> ? InferContentProps<TSchema> : Record<string, unknown>;
 export type { CmsComponentFn, InferContentProps };

package/dist/types/image.d.ts

@@ -40,12 +40,12 @@ export declare const GradialImageSchema: z.ZodObject<{
         height: z.ZodNumber;
         type: z.ZodString;
     }, z.core.$strip>;
-    sources: z.ZodArray<z.ZodObject<{
+    sources: z.ZodDefault<z.ZodNullable<z.ZodArray<z.ZodObject<{
         media: z.ZodOptional<z.ZodString>;
         type: z.ZodString;
         srcset: z.ZodString;
         sizes: z.ZodOptional<z.ZodString>;
-    }, z.core.$strip>>;
+    }, z.core.$strip>>>>;
 }, z.core.$strip>;
 export type ImageHTMLAttributes = Record<string, string | number | boolean | undefined | null>;
 export declare function renderImageHTML(image: GradialImage, attrs?: ImageHTMLAttributes): string;

package/dist/types/image.js

@@ -15,7 +15,7 @@ export const GradialImageSchema = z.object({
         type: z.string().min(1),
         srcset: z.string().min(1),
         sizes: z.string().optional(),
-    })),
+    })).nullable().default([]),
 });
 export function renderImageHTML(image, attrs = {}) {
     const imgAttrs = renderAttrs({

package/dist/types/index.d.ts

@@ -5,3 +5,5 @@ export * from './page.js';
 export * from './renderer.js';
 export * from './render-mode.js';
 export * from './image.js';
+export * from './video.js';
+export * from './media.js';

package/dist/types/index.js

@@ -5,3 +5,5 @@ export * from './page.js';
 export * from './renderer.js';
 export * from './render-mode.js';
 export * from './image.js';
+export * from './video.js';
+export * from './media.js';

package/dist/types/media.d.ts

@@ -0,0 +1,69 @@
+import { z } from 'zod';
+import { type GradialImage } from './image.js';
+import { type GradialVideo } from './video.js';
+/** Discriminated union of all compiler-resolved asset types. */
+export type GradialAsset = GradialImage | GradialVideo;
+export declare const GradialAssetSchema: z.ZodDiscriminatedUnion<[z.ZodObject<{
+    $type: z.ZodLiteral<"gradial.image">;
+    assetId: z.ZodString;
+    versionId: z.ZodString;
+    alt: z.ZodString;
+    fallback: z.ZodObject<{
+        src: z.ZodString;
+        width: z.ZodNumber;
+        height: z.ZodNumber;
+        type: z.ZodString;
+    }, z.core.$strip>;
+    sources: z.ZodDefault<z.ZodNullable<z.ZodArray<z.ZodObject<{
+        media: z.ZodOptional<z.ZodString>;
+        type: z.ZodString;
+        srcset: z.ZodString;
+        sizes: z.ZodOptional<z.ZodString>;
+    }, z.core.$strip>>>>;
+}, z.core.$strip>, z.ZodObject<{
+    $type: z.ZodLiteral<"gradial.video">;
+    assetId: z.ZodString;
+    versionId: z.ZodString;
+    alt: z.ZodString;
+    src: z.ZodString;
+    type: z.ZodString;
+    width: z.ZodNumber;
+    height: z.ZodNumber;
+    poster: z.ZodOptional<z.ZodObject<{
+        $type: z.ZodLiteral<"gradial.image">;
+        assetId: z.ZodString;
+        versionId: z.ZodString;
+        alt: z.ZodString;
+        fallback: z.ZodObject<{
+            src: z.ZodString;
+            width: z.ZodNumber;
+            height: z.ZodNumber;
+            type: z.ZodString;
+        }, z.core.$strip>;
+        sources: z.ZodDefault<z.ZodNullable<z.ZodArray<z.ZodObject<{
+            media: z.ZodOptional<z.ZodString>;
+            type: z.ZodString;
+            srcset: z.ZodString;
+            sizes: z.ZodOptional<z.ZodString>;
+        }, z.core.$strip>>>>;
+    }, z.core.$strip>>;
+    sources: z.ZodOptional<z.ZodArray<z.ZodObject<{
+        src: z.ZodString;
+        type: z.ZodString;
+    }, z.core.$strip>>>;
+    duration: z.ZodOptional<z.ZodNumber>;
+}, z.core.$strip>], "$type">;
+export declare function isGradialImage(value: unknown): value is GradialImage;
+export declare function isGradialVideo(value: unknown): value is GradialVideo;
+export declare function isGradialAsset(value: unknown): value is GradialAsset;
+/**
+ * Renders a GradialVideo to an HTML string.
+ * Uses poster.fallback.src for the poster attribute.
+ * Includes <source> elements for format variants.
+ */
+export declare function renderVideoHTML(video: GradialVideo, attrs?: Record<string, string | number | boolean | undefined | null>): string;
+/**
+ * Renders any GradialAsset to an HTML string.
+ * Delegates to renderImageHTML or renderVideoHTML based on $type.
+ */
+export declare function renderAssetHTML(asset: GradialAsset, attrs?: Record<string, string | number | boolean | undefined | null>): string;

package/dist/types/media.js

@@ -0,0 +1,86 @@
+import { z } from 'zod';
+import { GradialImageSchema, renderImageHTML } from './image.js';
+import { GradialVideoSchema } from './video.js';
+// ---------------------------------------------------------------------------
+// Zod schema — discriminated on $type
+// ---------------------------------------------------------------------------
+export const GradialAssetSchema = z.discriminatedUnion('$type', [
+    GradialImageSchema,
+    GradialVideoSchema,
+]);
+// ---------------------------------------------------------------------------
+// Type guards
+// ---------------------------------------------------------------------------
+export function isGradialImage(value) {
+    return (typeof value === 'object' &&
+        value !== null &&
+        value.$type === 'gradial.image');
+}
+export function isGradialVideo(value) {
+    return (typeof value === 'object' &&
+        value !== null &&
+        value.$type === 'gradial.video');
+}
+export function isGradialAsset(value) {
+    return isGradialImage(value) || isGradialVideo(value);
+}
+// ---------------------------------------------------------------------------
+// HTML string renderers (framework-agnostic)
+// ---------------------------------------------------------------------------
+/**
+ * Renders a GradialVideo to an HTML string.
+ * Uses poster.fallback.src for the poster attribute.
+ * Includes <source> elements for format variants.
+ */
+export function renderVideoHTML(video, attrs = {}) {
+    const posterSrc = video.poster?.fallback.src;
+    const attrPairs = [
+        ...Object.entries(attrs),
+        ['src', video.sources?.length ? undefined : video.src],
+        ['poster', posterSrc],
+        ['width', video.width > 0 ? video.width : undefined],
+        ['height', video.height > 0 ? video.height : undefined],
+    ];
+    const attrString = renderAttrs(attrPairs);
+    const sources = (video.sources ?? [])
+        .map((s) => `<source${renderAttrs([['src', s.src], ['type', s.type]])}>`)
+        .join('');
+    // If no format variants, src is on the <video> element itself
+    if (!sources) {
+        return `<video${attrString}></video>`;
+    }
+    return `<video${attrString}>${sources}</video>`;
+}
+/**
+ * Renders any GradialAsset to an HTML string.
+ * Delegates to renderImageHTML or renderVideoHTML based on $type.
+ */
+export function renderAssetHTML(asset, attrs = {}) {
+    if (asset.$type === 'gradial.image') {
+        return renderImageHTML(asset, attrs);
+    }
+    return renderVideoHTML(asset, attrs);
+}
+// ---------------------------------------------------------------------------
+// Internal helpers
+// ---------------------------------------------------------------------------
+function renderAttrs(pairs) {
+    const rendered = pairs
+        .filter(([, value]) => value !== undefined && value !== null && value !== false)
+        .map(([name, value]) => value === true
+        ? escapeName(name)
+        : `${escapeName(name)}="${escapeAttr(String(value))}"`);
+    if (!rendered.length)
+        return '';
+    return ' ' + rendered.join(' ');
+}
+function escapeName(name) {
+    return name.replace(/[^A-Za-z0-9_:-]/g, '');
+}
+function escapeAttr(value) {
+    return value
+        .replace(/&/g, '&amp;')
+        .replace(/"/g, '&quot;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;');
+}

package/dist/types/video.d.ts

@@ -0,0 +1,70 @@
+import { z } from 'zod';
+import { type GradialImage } from './image.js';
+export interface VideoSource {
+    src: string;
+    type: string;
+}
+export interface GradialVideo {
+    /** Discriminator — always 'gradial.video'. */
+    $type: 'gradial.video';
+    /** DAM asset identifier. */
+    assetId: string;
+    /** DAM version identifier. */
+    versionId: string;
+    /** Accessible description of the video content. */
+    alt: string;
+    /** Primary video URL (compiler-resolved). */
+    src: string;
+    /** Primary video MIME type (e.g. 'video/mp4'). */
+    type: string;
+    /** Intrinsic width in pixels. */
+    width: number;
+    /** Intrinsic height in pixels. */
+    height: number;
+    /**
+     * Poster frame — a full GradialImage with responsive srcset.
+     * The compiler extracts or generates this from the video asset.
+     */
+    poster?: GradialImage;
+    /** Format variants (e.g. mp4 + webm). Maps to <video><source> elements. */
+    sources?: VideoSource[];
+    /** Duration in seconds (if known). */
+    duration?: number;
+}
+export declare const VideoSourceSchema: z.ZodObject<{
+    src: z.ZodString;
+    type: z.ZodString;
+}, z.core.$strip>;
+export declare const GradialVideoSchema: z.ZodObject<{
+    $type: z.ZodLiteral<"gradial.video">;
+    assetId: z.ZodString;
+    versionId: z.ZodString;
+    alt: z.ZodString;
+    src: z.ZodString;
+    type: z.ZodString;
+    width: z.ZodNumber;
+    height: z.ZodNumber;
+    poster: z.ZodOptional<z.ZodObject<{
+        $type: z.ZodLiteral<"gradial.image">;
+        assetId: z.ZodString;
+        versionId: z.ZodString;
+        alt: z.ZodString;
+        fallback: z.ZodObject<{
+            src: z.ZodString;
+            width: z.ZodNumber;
+            height: z.ZodNumber;
+            type: z.ZodString;
+        }, z.core.$strip>;
+        sources: z.ZodDefault<z.ZodNullable<z.ZodArray<z.ZodObject<{
+            media: z.ZodOptional<z.ZodString>;
+            type: z.ZodString;
+            srcset: z.ZodString;
+            sizes: z.ZodOptional<z.ZodString>;
+        }, z.core.$strip>>>>;
+    }, z.core.$strip>>;
+    sources: z.ZodOptional<z.ZodArray<z.ZodObject<{
+        src: z.ZodString;
+        type: z.ZodString;
+    }, z.core.$strip>>>;
+    duration: z.ZodOptional<z.ZodNumber>;
+}, z.core.$strip>;

package/dist/types/video.js

@@ -0,0 +1,22 @@
+import { z } from 'zod';
+import { GradialImageSchema } from './image.js';
+// ---------------------------------------------------------------------------
+// Zod schema
+// ---------------------------------------------------------------------------
+export const VideoSourceSchema = z.object({
+    src: z.string().min(1),
+    type: z.string().min(1),
+});
+export const GradialVideoSchema = z.object({
+    $type: z.literal('gradial.video'),
+    assetId: z.string().min(1),
+    versionId: z.string().min(1),
+    alt: z.string(),
+    src: z.string().min(1),
+    type: z.string().min(1),
+    width: z.number().int().nonnegative(),
+    height: z.number().int().nonnegative(),
+    poster: GradialImageSchema.optional(),
+    sources: z.array(VideoSourceSchema).optional(),
+    duration: z.number().nonnegative().optional(),
+});

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@gradial/aci",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "files": [
     "dist",
     "bin/aci.js",
+    "bin/aci",
     "src/cli/*.mjs",
     "README.md"
   ],
@@ -57,13 +58,18 @@
       "types": "./dist/assets/index.d.ts",
       "import": "./dist/assets/index.js"
     },
+    "./react": {
+      "types": "./dist/react/index.d.ts",
+      "import": "./dist/react/index.js"
+    },
     "./astro": {
       "types": "./dist/astro/index.d.ts",
       "import": "./dist/astro/index.js"
     },
     "./next": {
       "types": "./dist/next/index.d.ts",
-      "import": "./dist/next/index.js"
+      "import": "./dist/next/index.js",
+      "default": "./dist/next/index.js"
     },
     "./next/server": {
       "types": "./dist/next/server.d.ts",
@@ -79,6 +85,10 @@
       "types": "./dist/next/dev-refresh.d.ts",
       "import": "./dist/next/dev-refresh.js"
     },
+    "./next/asset-route": {
+      "types": "./dist/next/asset-route.d.ts",
+      "import": "./dist/next/asset-route.js"
+    },
     "./sveltekit": {
       "types": "./dist/sveltekit/index.d.ts",
       "import": "./dist/sveltekit/index.js"
@@ -93,6 +103,7 @@
   },
   "scripts": {
     "build": "tsc -p tsconfig.json",
+    "build:cli": "cd ../.. && ./scripts/build-cli.sh",
     "compile-registry": "tsx src/cli/compile-registry.mjs",
     "prepack": "npm run build"
   },
@@ -116,13 +127,6 @@
       "optional": true
     }
   },
-  "optionalDependencies": {
-    "@gradial/cli-darwin-arm64": "0.1.0",
-    "@gradial/cli-darwin-x64": "0.1.0",
-    "@gradial/cli-linux-x64": "0.1.0",
-    "@gradial/cli-linux-arm64": "0.1.0",
-    "@gradial/cli-win32-x64": "0.1.0"
-  },
   "devDependencies": {
     "@vercel/edge-config": "^1.4.3",
     "@types/node": "^24.10.1",