@zenithbuild/cli 0.6.17 → 0.7.0

package/dist/framework-components/Image.zen

@@ -0,0 +1,316 @@
+<script setup="ts">
+const rawProps = props as any;
+const IMAGE_RUNTIME_GLOBAL = "__zenith_image_runtime";
+const DEFAULT_DEVICE_SIZES = [640, 750, 828, 1080, 1200, 1920, 2048, 3840];
+const DEFAULT_IMAGE_SIZES = [16, 32, 48, 64, 96, 128, 256, 384];
+
+function safeString(value: unknown): string {
+  if (typeof value === "string") return value.trim();
+  if (typeof value === "number" && Number.isFinite(value)) return String(value);
+  return "";
+}
+
+function isPlainObject(value: unknown): value is Record<string, any> {
+  return Boolean(value) && typeof value === "object" && !Array.isArray(value);
+}
+
+function escapeHtml(value: unknown): string {
+  return String(value || "")
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#39;");
+}
+
+function buildAttr(name: string, value: unknown): string {
+  if (value === null || value === undefined || value === "") return "";
+  return ` ${name}="${escapeHtml(value)}"`;
+}
+
+function normalizeFormat(value: unknown): string {
+  return String(value || "").trim().toLowerCase().replace(/^\./, "");
+}
+
+function isRemoteUrl(value: string): boolean {
+  return /^https?:\/\//i.test(value);
+}
+
+function normalizeSource(input: unknown) {
+  if (typeof input === "string") {
+    const trimmed = input.trim();
+    if (!trimmed) return null;
+    if (isRemoteUrl(trimmed)) return { kind: "remote", url: trimmed, width: null, height: null, alt: "" };
+    if (trimmed.startsWith("/")) return { kind: "local", path: trimmed, width: null, height: null, alt: "" };
+    return null;
+  }
+  if (!isPlainObject(input)) return null;
+  const rawUrl = typeof input.url === "string"
+    ? input.url
+    : typeof input.src === "string"
+    ? input.src
+    : typeof input.path === "string"
+    ? input.path
+    : "";
+  const normalized = normalizeSource(rawUrl);
+  if (!normalized) return null;
+  return {
+    ...normalized,
+    width: Number.isInteger(input.width) && input.width > 0 ? input.width : null,
+    height: Number.isInteger(input.height) && input.height > 0 ? input.height : null,
+    alt: typeof input.alt === "string" ? input.alt : ""
+  };
+}
+
+function buildLocalImageKey(publicPath: string): string {
+  let hash = 2166136261;
+  for (let index = 0; index < publicPath.length; index += 1) {
+    hash ^= publicPath.charCodeAt(index);
+    hash = Math.imul(hash, 16777619);
+  }
+  return (hash >>> 0).toString(16).padStart(8, "0");
+}
+
+function buildLocalVariantPath(publicPath: string, width: number, quality: number, format: string): string {
+  return `/_zenith/image/local/${buildLocalImageKey(publicPath)}/w${width}-q${quality}.${normalizeFormat(format)}`;
+}
+
+function buildRemoteVariantPath(remoteUrl: string, width: number, quality: number, format: string): string {
+  const query = new URLSearchParams();
+  query.set("url", remoteUrl);
+  query.set("w", String(width));
+  query.set("q", String(quality));
+  if (format) query.set("f", normalizeFormat(format));
+  return `/_zenith/image?${query.toString()}`;
+}
+
+function escapeRegex(value: string): string {
+  return value.replace(/[|\\{}()[\]^$+?.*]/g, "\\$&");
+}
+
+function globToRegExp(glob: string, isHostname = false): RegExp {
+  let pattern = escapeRegex(glob);
+  pattern = pattern.replaceAll("\\*\\*", "__DOUBLE_STAR__");
+  pattern = pattern.replaceAll("\\*", isHostname ? "[^.]*" : "[^/]*");
+  pattern = pattern.replaceAll("__DOUBLE_STAR__", ".*");
+  return new RegExp(`^${pattern}$`, "i");
+}
+
+function hostnameMatches(hostname: string, pattern: string): boolean {
+  if (pattern.startsWith("*.")) {
+    const suffix = pattern.slice(1);
+    return hostname.endsWith(suffix) && hostname.length > suffix.length;
+  }
+  return globToRegExp(pattern, true).test(hostname);
+}
+
+function matchRemotePattern(inputUrl: string, patterns: any[]): boolean {
+  if (!inputUrl || !Array.isArray(patterns) || patterns.length === 0) return false;
+  const url = new URL(inputUrl);
+  const protocol = url.protocol.replace(/:$/, "").toLowerCase();
+  const hostname = url.hostname.toLowerCase();
+  const port = url.port || "";
+  const pathname = url.pathname || "/";
+  const search = url.search || "";
+  return patterns.some((pattern) => {
+    if (pattern.protocol && pattern.protocol !== protocol) return false;
+    if (!hostnameMatches(hostname, String(pattern.hostname || ""))) return false;
+    if (pattern.port && pattern.port !== port) return false;
+    if (pattern.search && pattern.search !== search) return false;
+    return globToRegExp(String(pattern.pathname || "/**")).test(pathname);
+  });
+}
+
+function resolveWidthCandidates(width: number | null, sizes: string, config: any, manifestEntry: any): number[] {
+  const base = new Set<number>([
+    ...((config?.deviceSizes as number[]) || DEFAULT_DEVICE_SIZES),
+    ...((config?.imageSizes as number[]) || DEFAULT_IMAGE_SIZES)
+  ]);
+  if (Number.isInteger(width) && width > 0) {
+    base.add(width);
+    base.add(width * 2);
+  }
+  if (!width && sizes) {
+    for (const candidate of (config?.deviceSizes as number[]) || DEFAULT_DEVICE_SIZES) {
+      base.add(candidate);
+    }
+  }
+  let widths = [...base].filter((entry) => Number.isInteger(entry) && entry > 0).sort((a, b) => a - b);
+  const available = Array.isArray(manifestEntry?.availableWidths) ? manifestEntry.availableWidths : null;
+  if (Array.isArray(available) && available.length > 0) {
+    widths = widths.filter((entry) => available.includes(entry));
+    if (widths.length === 0) widths = [...available];
+  }
+  return widths;
+}
+
+function mimeTypeForFormat(format: string): string {
+  switch (normalizeFormat(format)) {
+    case "avif": return "image/avif";
+    case "webp": return "image/webp";
+    case "png": return "image/png";
+    case "jpg":
+    case "jpeg": return "image/jpeg";
+    default: return "";
+  }
+}
+
+function pickNumeric(value: unknown, fallback: number | null): number | null {
+  return Number.isInteger(value) && Number(value) > 0 ? Number(value) : fallback;
+}
+
+function mergeStyle(style: unknown, fit: unknown, position: unknown): string {
+  const segments: string[] = [];
+  const incoming = safeString(style);
+  if (incoming) segments.push(incoming.replace(/;+\s*$/, ""));
+  const fitValue = safeString(fit);
+  const positionValue = safeString(position);
+  if (fitValue) segments.push(`object-fit: ${fitValue}`);
+  if (positionValue) segments.push(`object-position: ${positionValue}`);
+  return segments.join("; ");
+}
+
+function buildSourceTags(sources: Array<{ type: string; srcset: string; sizes: string }>): string {
+  return sources.map((entry) => {
+    const attrs = [
+      buildAttr("type", entry.type),
+      buildAttr("srcset", entry.srcset),
+      buildAttr("sizes", entry.sizes)
+    ].join("");
+    return `<source${attrs}>`;
+  }).join("");
+}
+
+function readPayload() {
+  if (typeof globalThis !== "object" || !globalThis) return null;
+  const payload = (globalThis as any)[IMAGE_RUNTIME_GLOBAL];
+  return isPlainObject(payload) ? payload : null;
+}
+
+function encodeBase64(value: string): string {
+  if (typeof Buffer !== "undefined") return Buffer.from(value, "utf8").toString("base64");
+  if (typeof btoa === "function" && typeof TextEncoder === "function") {
+    const bytes = new TextEncoder().encode(value);
+    let binary = "";
+    for (const byte of bytes) binary += String.fromCharCode(byte);
+    return btoa(binary);
+  }
+  return "";
+}
+
+function buildSerializableProps(): Record<string, unknown> {
+  return {
+    src: rawProps.src,
+    alt: rawProps.alt,
+    width: rawProps.width,
+    height: rawProps.height,
+    sizes: rawProps.sizes,
+    quality: rawProps.quality,
+    priority: rawProps.priority,
+    loading: rawProps.loading,
+    decoding: rawProps.decoding,
+    fit: rawProps.fit,
+    position: rawProps.position,
+    placeholder: rawProps.placeholder,
+    unoptimized: rawProps.unoptimized,
+    class: rawProps.class,
+    style: rawProps.style
+  };
+}
+
+function renderImage(): string {
+  const payload = readPayload();
+  if (!payload) return "";
+
+  const source = normalizeSource(rawProps.src);
+  const alt = safeString(rawProps.alt) || safeString(source?.alt);
+  if (!source || !alt) return "";
+
+  const config = isPlainObject(payload.config) ? payload.config : {};
+  const className = safeString(rawProps.class);
+  const style = mergeStyle(rawProps.style, rawProps.fit, rawProps.position);
+  const loading = rawProps.priority === true ? "eager" : safeString(rawProps.loading) || "lazy";
+  const decoding = safeString(rawProps.decoding) || "async";
+  const fetchPriority = rawProps.priority === true ? "high" : "";
+
+  let model: any = null;
+  if (source.kind === "local") {
+    const manifestEntry = isPlainObject(payload.localImages) ? payload.localImages[source.path] : null;
+    const width = pickNumeric(rawProps.width, pickNumeric(source.width, pickNumeric(manifestEntry?.width, null)));
+    const height = pickNumeric(rawProps.height, pickNumeric(source.height, pickNumeric(manifestEntry?.height, null)));
+    const quality = pickNumeric(rawProps.quality, pickNumeric(config.quality, 75)) || 75;
+    const sizes = safeString(rawProps.sizes);
+    const widths = resolveWidthCandidates(width, sizes, config, manifestEntry);
+    const fallbackFormat = safeString(manifestEntry?.originalFormat) || "jpg";
+    const sourceFormats = ((config.formats as string[]) || []).filter((format) =>
+      Array.isArray(manifestEntry?.availableFormats) ? manifestEntry.availableFormats.includes(format) : true
+    );
+    const fallbackWidth = widths.length > 0 ? widths[widths.length - 1] : (width || manifestEntry?.width || 0);
+    model = {
+      src: rawProps.unoptimized === true
+        ? source.path
+        : buildLocalVariantPath(source.path, fallbackWidth, quality, fallbackFormat),
+      width,
+      height,
+      sizes,
+      sources: rawProps.unoptimized === true
+        ? []
+        : sourceFormats.map((format) => ({
+            type: mimeTypeForFormat(format),
+            sizes,
+            srcset: widths.map((candidate) => `${buildLocalVariantPath(source.path, candidate, quality, format)} ${candidate}w`).join(", ")
+          })).filter((entry) => entry.type && entry.srcset)
+    };
+  } else {
+    const width = pickNumeric(rawProps.width, pickNumeric(source.width, null));
+    const height = pickNumeric(rawProps.height, pickNumeric(source.height, null));
+    const quality = pickNumeric(rawProps.quality, pickNumeric(config.quality, 75)) || 75;
+    const sizes = safeString(rawProps.sizes);
+    const widths = resolveWidthCandidates(width, sizes, config, null);
+    if (!matchRemotePattern(source.url, Array.isArray(config.remotePatterns) ? config.remotePatterns : [])) return "";
+    if (payload.mode !== "endpoint" || rawProps.unoptimized === true || !width) {
+      model = { src: source.url, width, height, sizes, sources: [] };
+    } else {
+      model = {
+        src: buildRemoteVariantPath(source.url, widths[widths.length - 1] || width, quality, ""),
+        width,
+        height,
+        sizes,
+        sources: ((config.formats as string[]) || []).map((format) => ({
+          type: mimeTypeForFormat(format),
+          sizes,
+          srcset: widths.map((candidate) => `${buildRemoteVariantPath(source.url, candidate, quality, format)} ${candidate}w`).join(", ")
+        })).filter((entry) => entry.type && entry.srcset)
+      };
+    }
+  }
+
+  if (!model?.src) return "";
+  const imgAttrs = [
+    buildAttr("src", model.src),
+    buildAttr("alt", alt),
+    buildAttr("class", className),
+    buildAttr("style", style),
+    buildAttr("loading", loading),
+    buildAttr("decoding", decoding),
+    buildAttr("fetchpriority", fetchPriority),
+    buildAttr("sizes", model.sizes),
+    buildAttr("width", model.width),
+    buildAttr("height", model.height)
+  ].join("");
+  const sourcesHtml = buildSourceTags(model.sources || []);
+  return sourcesHtml ? `<picture>${sourcesHtml}<img${imgAttrs} /></picture>` : `<img${imgAttrs} />`;
+}
+
+function serializeImageProps(): string {
+  const source = normalizeSource(rawProps.src);
+  const alt = safeString(rawProps.alt) || safeString(source?.alt);
+  if (!source || !alt) return "";
+  return encodeBase64(JSON.stringify(buildSerializableProps()));
+}
+
+const imageHtml = renderImage();
+const imagePayload = serializeImageProps();
+</script>
+
+<span class="contents" data-zenith-image={imagePayload} innerHTML={imageHtml}></span>

package/dist/images/materialize.d.ts

@@ -0,0 +1,17 @@
+type ImagePayload = {
+    mode: string;
+    config: Record<string, unknown>;
+    localImages: Record<string, unknown>;
+};
+export declare function materializeImageMarkup(options: {
+    html: string;
+    pageAssetPath?: string | null;
+    payload: ImagePayload;
+    ssrData?: Record<string, unknown> | null;
+    routePathname?: string;
+}): Promise<string>;
+export declare function materializeImageMarkupInHtmlFiles(options: {
+    distDir: string;
+    payload: ImagePayload;
+}): Promise<void>;
+export {};

package/dist/images/materialize.js

@@ -0,0 +1,200 @@
+import { readFile, writeFile } from 'node:fs/promises';
+import { join } from 'node:path';
+const RUNTIME_EXPORTS = {
+    hydrate: () => () => { },
+    signal: (value) => value,
+    state: (value) => value,
+    ref: () => ({ current: null }),
+    zeneffect: () => () => { },
+    zenEffect: () => () => { },
+    zenMount: () => { },
+    zenWindow: () => undefined,
+    zenDocument: () => undefined,
+    zenOn: () => () => { },
+    zenResize: () => () => { },
+    collectRefs: (...refs) => refs.filter(Boolean)
+};
+function escapeRegex(value) {
+    return value.replace(/[|\\{}()[\]^$+?.]/g, '\\$&');
+}
+function escapeHtml(value) {
+    return String(value ?? '')
+        .replace(/&/g, '&')
+        .replace(/"/g, '"')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;');
+}
+function parseMarkerSelector(selector) {
+    const match = selector.match(/^\[([^\]=]+)=["']([^"']+)["']\]$/);
+    if (!match)
+        return null;
+    return {
+        attrName: match[1],
+        attrValue: match[2]
+    };
+}
+function upsertAttributeMarkup(attributes, attrName, value) {
+    const trimmedName = String(attrName || '').trim();
+    if (!trimmedName)
+        return attributes;
+    const attrPattern = new RegExp(`(\\s${escapeRegex(trimmedName)}=)(["']).*?\\2`, 'i');
+    if (value === null || value === undefined || value === false || value === '') {
+        return attributes.replace(attrPattern, '');
+    }
+    const serialized = ` ${trimmedName}="${escapeHtml(value)}"`;
+    if (attrPattern.test(attributes)) {
+        return attributes.replace(attrPattern, serialized);
+    }
+    return `${attributes}${serialized}`;
+}
+function applyAttributeMarker(html, selector, attrName, value) {
+    const parsed = parseMarkerSelector(selector);
+    if (!parsed)
+        return html;
+    const markerRe = new RegExp(`<([A-Za-z][\\w:-]*)([^>]*\\s${escapeRegex(parsed.attrName)}=(["'])${escapeRegex(parsed.attrValue)}\\3[^>]*)>`, 'g');
+    return html.replace(markerRe, (match, tagName, attrs) => {
+        const nextAttrs = upsertAttributeMarkup(String(attrs || ''), attrName, value);
+        return `<${tagName}${nextAttrs}>`;
+    });
+}
+function applyInnerHtmlMarker(html, selector, value) {
+    const parsed = parseMarkerSelector(selector);
+    if (!parsed)
+        return html;
+    const markerRe = new RegExp(`<([A-Za-z][\\w:-]*)([^>]*\\s${escapeRegex(parsed.attrName)}=(["'])${escapeRegex(parsed.attrValue)}\\3[^>]*)>([\\s\\S]*?)</\\1>`, 'g');
+    const replacement = value === null || value === undefined || value === false ? '' : String(value);
+    return html.replace(markerRe, (_match, tagName, attrs) => `<${tagName}${attrs}>${replacement}</${tagName}>`);
+}
+function stripModuleSyntax(source) {
+    let next = source.replace(/^import\s+[^;]+;\s*$/gm, '');
+    if (/(^|\n)\s*import\s+/m.test(next)) {
+        throw new Error('[Zenith:Image] Cannot materialize page asset with unresolved imports');
+    }
+    next = next.replace(/^export\s+default\s+function\s+/gm, 'function ');
+    next = next.replace(/^export\s+function\s+/gm, 'function ');
+    next = next.replace(/^export\s+const\s+/gm, 'const ');
+    next = next.replace(/^export\s+let\s+/gm, 'let ');
+    next = next.replace(/^export\s+var\s+/gm, 'var ');
+    next = next.replace(/\bexport\s*\{[^}]*\};?/g, '');
+    return next;
+}
+async function evaluatePageModule(assetPath, payload, ssrData, routePathname) {
+    const source = stripModuleSyntax(await readFile(assetPath, 'utf8'));
+    const runtimeNames = Object.keys(RUNTIME_EXPORTS);
+    const evaluator = new Function('runtime', 'payload', 'ssrData', 'routePathname', [
+        '"use strict";',
+        `const { ${runtimeNames.join(', ')} } = runtime;`,
+        'const document = {};',
+        'const location = { pathname: routePathname || "/" };',
+        'const Document = class ZenithServerDocument {};',
+        'const globalThis = {',
+        '  __zenith_image_runtime: payload,',
+        '  document,',
+        '  location,',
+        '  Document',
+        '};',
+        'if (ssrData && typeof ssrData === "object" && !Array.isArray(ssrData)) {',
+        '  globalThis.__zenith_ssr_data = ssrData;',
+        '}',
+        'globalThis.globalThis = globalThis;',
+        'globalThis.window = globalThis;',
+        'globalThis.self = globalThis;',
+        source,
+        'return {',
+        '  __zenith_markers: typeof __zenith_markers !== "undefined" ? __zenith_markers : [],',
+        '  __zenith_expression_bindings: typeof __zenith_expression_bindings !== "undefined" ? __zenith_expression_bindings : [],',
+        '  __zenith_expr_fns: typeof __zenith_expr_fns !== "undefined" ? __zenith_expr_fns : []',
+        '};'
+    ].join('\n'));
+    return evaluator(RUNTIME_EXPORTS, payload, ssrData, routePathname);
+}
+function buildExpressionContext(ssrData) {
+    return {
+        signalMap: new Map(),
+        params: {},
+        props: {},
+        ssrData: ssrData || {},
+        componentBindings: {},
+        zenhtml: null,
+        fragment: null
+    };
+}
+export async function materializeImageMarkup(options) {
+    const { html, pageAssetPath, payload, ssrData = null, routePathname = '/' } = options;
+    if (!pageAssetPath || !html.includes('data-zx-data-zenith-image')) {
+        return html;
+    }
+    const namespace = await evaluatePageModule(pageAssetPath, payload, ssrData, routePathname);
+    if (!namespace) {
+        return html;
+    }
+    const markers = Array.isArray(namespace.__zenith_markers) ? namespace.__zenith_markers : [];
+    const bindings = Array.isArray(namespace.__zenith_expression_bindings) ? namespace.__zenith_expression_bindings : [];
+    const exprFns = Array.isArray(namespace.__zenith_expr_fns) ? namespace.__zenith_expr_fns : [];
+    if (markers.length === 0 || bindings.length === 0 || exprFns.length === 0) {
+        return html;
+    }
+    const markerByIndex = new Map(markers.map((marker) => [marker.index, marker]));
+    let nextHtml = html;
+    const context = buildExpressionContext(ssrData);
+    for (const binding of bindings) {
+        const marker = markerByIndex.get(Number(binding.marker_index));
+        const exprFn = Number.isInteger(binding.fn_index) ? exprFns[binding.fn_index] : null;
+        if (!marker ||
+            typeof exprFn !== 'function' ||
+            marker.kind !== 'attr' ||
+            typeof marker.selector !== 'string' ||
+            marker.selector.includes('data-zx-data-zenith-image') === false &&
+                marker.selector.includes('data-zx-innerHTML') === false) {
+            continue;
+        }
+        const value = exprFn(context);
+        if (marker.attr === 'innerHTML') {
+            nextHtml = applyInnerHtmlMarker(nextHtml, marker.selector, value);
+            continue;
+        }
+        nextHtml = applyAttributeMarker(nextHtml, marker.selector, marker.attr || '', value);
+    }
+    return nextHtml;
+}
+async function loadRouteManifest(distDir) {
+    try {
+        const manifestRaw = await readFile(join(distDir, 'assets', 'router-manifest.json'), 'utf8');
+        const parsed = JSON.parse(manifestRaw);
+        return Array.isArray(parsed?.routes) ? parsed.routes : [];
+    }
+    catch {
+        return [];
+    }
+}
+export async function materializeImageMarkupInHtmlFiles(options) {
+    const { distDir, payload } = options;
+    const routes = await loadRouteManifest(distDir);
+    for (const route of routes) {
+        if (route.server_script && route.prerender !== true) {
+            continue;
+        }
+        const outputPath = typeof route.output === 'string' ? route.output.replace(/^\//, '') : '';
+        const assetPath = typeof route.page_asset === 'string' ? route.page_asset.replace(/^\//, '') : '';
+        if (!outputPath || !assetPath)
+            continue;
+        const fullHtmlPath = join(distDir, outputPath);
+        const fullAssetPath = join(distDir, assetPath);
+        let html = '';
+        try {
+            html = await readFile(fullHtmlPath, 'utf8');
+        }
+        catch {
+            continue;
+        }
+        const nextHtml = await materializeImageMarkup({
+            html,
+            pageAssetPath: fullAssetPath,
+            payload,
+            routePathname: typeof route.path === 'string' ? route.path : '/'
+        });
+        if (nextHtml !== html) {
+            await writeFile(fullHtmlPath, nextHtml, 'utf8');
+        }
+    }
+}

package/dist/images/payload.d.ts

@@ -0,0 +1,18 @@
+export function createImageRuntimePayload(config: any, localImages: any, mode?: string): {
+    mode: string;
+    config: {
+        formats: string[];
+        deviceSizes: number[];
+        imageSizes: number[];
+        remotePatterns: any[];
+        quality: number;
+        allowSvg: boolean;
+        maxRemoteBytes: number;
+        maxPixels: number;
+        minimumCacheTTL: number;
+        dangerouslyAllowLocalNetwork: boolean;
+    };
+    localImages: any;
+} | null;
+export function injectImageRuntimePayload(html: any, payload: any): any;
+export function injectImageRuntimePayloadIntoHtmlFiles(rootDir: any, payload: any): Promise<void>;

package/dist/images/payload.js

@@ -0,0 +1,65 @@
+import { imageRuntimeGlobalName, normalizeImageConfig, normalizeImageRuntimePayload } from './shared.js';
+import { readdir, readFile, stat, writeFile } from 'node:fs/promises';
+import { join } from 'node:path';
+export function createImageRuntimePayload(config, localImages, mode = 'passthrough') {
+    return normalizeImageRuntimePayload({
+        mode,
+        config: normalizeImageConfig(config),
+        localImages: localImages && typeof localImages === 'object' ? localImages : {}
+    });
+}
+function serializeInlineScriptJson(payload) {
+    return JSON.stringify(payload)
+        .replace(/</g, '\\u003C')
+        .replace(/>/g, '\\u003E')
+        .replace(/\//g, '\\u002F')
+        .replace(/\u2028/g, '\\u2028')
+        .replace(/\u2029/g, '\\u2029');
+}
+export function injectImageRuntimePayload(html, payload) {
+    const safePayload = createImageRuntimePayload(payload?.config || {}, payload?.localImages || {}, payload?.mode || 'passthrough');
+    const globalName = imageRuntimeGlobalName();
+    const serialized = serializeInlineScriptJson(safePayload);
+    const scriptTag = `<script id="zenith-image-runtime">window.${globalName} = ${serialized};</script>`;
+    const existingTagRe = /<script\b[^>]*\bid=(["'])zenith-image-runtime\1[^>]*>[\s\S]*?<\/script>/i;
+    if (existingTagRe.test(html)) {
+        return html.replace(existingTagRe, scriptTag);
+    }
+    if (/<\/head>/i.test(html)) {
+        return html.replace(/<\/head>/i, `${scriptTag}</head>`);
+    }
+    const bodyOpen = html.match(/<body\b[^>]*>/i);
+    if (bodyOpen) {
+        return html.replace(bodyOpen[0], `${bodyOpen[0]}${scriptTag}`);
+    }
+    return `${scriptTag}${html}`;
+}
+export async function injectImageRuntimePayloadIntoHtmlFiles(rootDir, payload) {
+    async function walk(dir) {
+        let entries = [];
+        try {
+            entries = await readdir(dir);
+        }
+        catch {
+            return;
+        }
+        entries.sort((left, right) => left.localeCompare(right));
+        for (const entry of entries) {
+            const fullPath = join(dir, entry);
+            const info = await stat(fullPath);
+            if (info.isDirectory()) {
+                await walk(fullPath);
+                continue;
+            }
+            if (!entry.endsWith('.html')) {
+                continue;
+            }
+            const html = await readFile(fullPath, 'utf8');
+            const next = injectImageRuntimePayload(html, payload);
+            if (next !== html) {
+                await writeFile(fullPath, next, 'utf8');
+            }
+        }
+    }
+    await walk(rootDir);
+}

package/dist/images/runtime.d.ts

@@ -0,0 +1,4 @@
+export function renderImageHtmlWithPayload(rawProps: any, payload: any): string;
+export function renderImageHtml(rawProps: any): string;
+export function serializeImageProps(rawProps: any): string;
+export function replaceImageMarkers(html: any, payload: any): any;