@zenithbuild/cli 0.7.1 → 0.7.2

package/dist/build.js

@@ -1,4 +1,9 @@
-import { resolve } from 'node:path';
+import { mkdir, rm } from 'node:fs/promises';
+import { join, resolve } from 'node:path';
+import { resolveBuildAdapter } from './adapters/resolve-adapter.js';
+import { normalizeBasePath } from './base-path.js';
+import { rewriteSoftNavigationHrefBasePathInHtmlFiles } from './base-path-html.js';
+import { writeBuildOutputManifest } from './build-output-manifest.js';
 import { generateManifest } from './manifest.js';
 import { buildComponentRegistry } from './resolve-components.js';
 import { collectAssets, createCompilerWarningEmitter, runBundler } from './build/compiler-runtime.js';
@@ -8,6 +13,7 @@ import { materializeImageMarkupInHtmlFiles } from './images/materialize.js';
 import { buildImageArtifacts } from './images/service.js';
 import { createImageRuntimePayload, injectImageRuntimePayloadIntoHtmlFiles } from './images/payload.js';
 import { createStartupProfiler } from './startup-profile.js';
+import { writeServerOutput } from './server-output.js';
 import { resolveBundlerBin } from './toolchain-paths.js';
 import { createBundlerToolchain, createCompilerToolchain, ensureToolchainCompatibility, getActiveToolchainCandidate } from './toolchain-runner.js';
 import { maybeWarnAboutZenithVersionMismatch } from './version-check.js';
@@ -41,15 +47,18 @@ export async function build(options) {
     const { pagesDir, outDir, config = {}, logger = null, showBundlerInfo = true } = options;
     const startupProfile = createStartupProfiler('cli-build');
     const projectRoot = deriveProjectRootFromPagesDir(pagesDir);
+    const coreOutputDir = join(projectRoot, '.zenith-output');
+    const staticOutputDir = join(coreOutputDir, 'static');
     const srcDir = resolve(pagesDir, '..');
     const compilerBin = createCompilerToolchain({ projectRoot, logger });
     const bundlerBin = createBundlerToolchain({ projectRoot, logger });
     const compilerTotals = createCompilerTotals();
-    const softNavigationEnabled = config.softNavigation === true || config.router === true;
+    const { target, adapter, mode } = resolveBuildAdapter(config);
+    const basePath = normalizeBasePath(config.basePath || '/');
+    const routerEnabled = config.router === true;
     const compilerOpts = {
         typescriptDefault: config.typescriptDefault === true,
-        experimentalEmbeddedMarkup: config.embeddedMarkupExpressions === true
-            || config.experimental?.embeddedMarkupExpressions === true,
+        experimentalEmbeddedMarkup: config.embeddedMarkupExpressions === true,
         strictDomLints: config.strictDomLints === true
     };
     ensureToolchainCompatibility(bundlerBin);
@@ -64,11 +73,16 @@ export async function build(options) {
     }
     const registry = startupProfile.measureSync('build_component_registry', () => buildComponentRegistry(srcDir));
     void RUNTIME_MARKUP_BINDING;
-    const manifest = await startupProfile.measureAsync('generate_manifest', () => generateManifest(pagesDir));
+    const manifest = await startupProfile.measureAsync('generate_manifest', () => generateManifest(pagesDir, '.zen', { compilerOpts }));
+    if (mode !== 'legacy') {
+        adapter.validateRoutes(manifest);
+    }
     await startupProfile.measureAsync('ensure_zenith_type_declarations', () => ensureZenithTypeDeclarations({
         manifest,
         pagesDir
     }));
+    await startupProfile.measureAsync('reset_core_output', () => rm(coreOutputDir, { recursive: true, force: true }));
+    await startupProfile.measureAsync('prepare_core_output', () => mkdir(staticOutputDir, { recursive: true }));
     const emitCompilerWarning = createCompilerWarningEmitter((line) => {
         if (logger && typeof logger.warn === 'function') {
             logger.warn(line, { onceKey: `compiler-warning:${line}` });
@@ -83,29 +97,46 @@ export async function build(options) {
         registry,
         compilerOpts,
         compilerBin,
-        softNavigationEnabled,
+        routerEnabled,
         startupProfile,
         compilerTotals,
         emitCompilerWarning
     });
     if (envelopes.length > 0) {
-        await startupProfile.measureAsync('run_bundler', () => runBundler(envelopes, outDir, projectRoot, logger, showBundlerInfo, bundlerBin), { envelopes: envelopes.length });
+        await startupProfile.measureAsync('run_bundler', () => runBundler(envelopes, staticOutputDir, projectRoot, logger, showBundlerInfo, bundlerBin, { basePath }), { envelopes: envelopes.length });
     }
+    await startupProfile.measureAsync('rewrite_soft_navigation_base_path', () => rewriteSoftNavigationHrefBasePathInHtmlFiles(staticOutputDir, basePath));
     const { manifest: imageManifest } = await startupProfile.measureAsync('build_image_artifacts', () => buildImageArtifacts({
         projectRoot,
-        outDir,
+        outDir: staticOutputDir,
         config: config.images
     }));
-    const imageRuntimePayload = createImageRuntimePayload(config.images, imageManifest, 'passthrough');
+    const imageRuntimePayload = createImageRuntimePayload(config.images, imageManifest, 'passthrough', basePath);
     await startupProfile.measureAsync('materialize_image_markup', () => materializeImageMarkupInHtmlFiles({
-        distDir: outDir,
+        distDir: staticOutputDir,
         payload: imageRuntimePayload
     }));
-    await startupProfile.measureAsync('inject_image_runtime_payload', () => injectImageRuntimePayloadIntoHtmlFiles(outDir, imageRuntimePayload));
+    await startupProfile.measureAsync('inject_image_runtime_payload', () => injectImageRuntimePayloadIntoHtmlFiles(staticOutputDir, imageRuntimePayload));
+    const buildManifest = await startupProfile.measureAsync('write_core_manifest', () => writeBuildOutputManifest({
+        coreOutputDir,
+        staticDir: staticOutputDir,
+        target,
+        routeManifest: manifest,
+        basePath
+    }));
+    await startupProfile.measureAsync('write_server_output', () => writeServerOutput({
+        coreOutputDir,
+        staticDir: staticOutputDir,
+        projectRoot,
+        config,
+        basePath
+    }));
+    await startupProfile.measureAsync('adapt_output', () => adapter.adapt({ coreOutput: coreOutputDir, outDir, manifest: buildManifest, config }));
     const assets = await startupProfile.measureAsync('collect_assets', () => collectAssets(outDir));
     startupProfile.emit('build_complete', {
         pages: manifest.length,
         assets: assets.length,
+        target,
         compilerTotals,
         expressionRewriteMetrics
     });

package/dist/config.d.ts

@@ -1,55 +1,19 @@
-export function validateConfig(config: any): {
-    images: {
-        formats: string[];
-        deviceSizes: number[];
-        imageSizes: number[];
-        remotePatterns: any[];
-        quality: number;
-        allowSvg: boolean;
-        maxRemoteBytes: number;
-        maxPixels: number;
-        minimumCacheTTL: number;
-        dangerouslyAllowLocalNetwork: boolean;
-    };
-    router: boolean;
-    embeddedMarkupExpressions: boolean;
-    types: boolean;
-    typescriptDefault: boolean;
-    outDir: string;
-    pagesDir: string;
-    experimental: {};
-    strictDomLints: boolean;
-};
-export function loadConfig(projectRoot: any): Promise<{
-    images: {
-        formats: string[];
-        deviceSizes: number[];
-        imageSizes: number[];
-        remotePatterns: any[];
-        quality: number;
-        allowSvg: boolean;
-        maxRemoteBytes: number;
-        maxPixels: number;
-        minimumCacheTTL: number;
-        dangerouslyAllowLocalNetwork: boolean;
-    };
-    router: boolean;
-    embeddedMarkupExpressions: boolean;
-    types: boolean;
-    typescriptDefault: boolean;
-    outDir: string;
-    pagesDir: string;
-    experimental: {};
-    strictDomLints: boolean;
-}>;
+export function hasExplicitConfigKey(config: any, key: any): boolean;
+export function isLoadedConfig(config: any): boolean;
+export function isConfigKeyExplicit(config: any, key: any): boolean;
+export function resolveConfigPagesDir(projectRoot: any, config: any): string;
+export function resolveConfigOutDir(projectRoot: any, config: any): string;
+export function validateConfig(config: any): any;
+export function loadConfig(projectRoot: any): Promise<any>;
 export namespace DEFAULT_CONFIG {
     let router: boolean;
     let embeddedMarkupExpressions: boolean;
-    let types: boolean;
     let typescriptDefault: boolean;
     let outDir: string;
     let pagesDir: string;
-    let experimental: {};
+    let basePath: string;
+    let target: string;
+    let adapter: null;
     let strictDomLints: boolean;
     let images: {
         formats: string[];

package/dist/config.js

@@ -1,31 +1,166 @@
-import { join } from 'node:path';
+import { existsSync } from 'node:fs';
+import { readFile, rm, writeFile } from 'node:fs/promises';
+import { createRequire } from 'node:module';
+import { join, resolve } from 'node:path';
 import { pathToFileURL } from 'node:url';
+import { KNOWN_TARGETS } from './adapters/adapter-types.js';
+import { normalizeBasePath } from './base-path.js';
 import { normalizeImageConfig } from './images/shared.js';
+const PACKAGE_REQUIRE = createRequire(import.meta.url);
+const CONFIG_FILES = ['zenith.config.ts', 'zenith.config.js'];
+const CONFIG_META = Symbol('zenith.config.meta');
 export const DEFAULT_CONFIG = {
     router: false,
     embeddedMarkupExpressions: false,
-    types: true,
     typescriptDefault: true,
     outDir: 'dist',
     pagesDir: 'pages',
-    experimental: {},
+    basePath: '/',
+    target: 'static',
+    adapter: null,
     strictDomLints: false,
     images: normalizeImageConfig()
 };
 const TOP_LEVEL_SCHEMA = {
     router: 'boolean',
     embeddedMarkupExpressions: 'boolean',
-    types: 'boolean',
     typescriptDefault: 'boolean',
     outDir: 'string',
     pagesDir: 'string',
-    experimental: 'object',
+    basePath: 'string',
+    target: 'string',
+    adapter: 'object',
     strictDomLints: 'boolean',
     images: 'object'
 };
+function attachConfigMeta(config, explicitKeys) {
+    Object.defineProperty(config, CONFIG_META, {
+        value: { explicitKeys: new Set(explicitKeys), loaded: false },
+        enumerable: false,
+        configurable: true,
+        writable: true
+    });
+    return config;
+}
+function markLoaded(config) {
+    if (config?.[CONFIG_META]) {
+        config[CONFIG_META].loaded = true;
+    }
+    return config;
+}
+function validateAdapterValue(value) {
+    if (!value || typeof value !== 'object' || Array.isArray(value)) {
+        throw new Error('[Zenith:Config] Key "adapter" must be a plain object');
+    }
+    if (typeof value.name !== 'string' || value.name.trim().length === 0) {
+        throw new Error('[Zenith:Config] Key "adapter.name" must be a non-empty string');
+    }
+    if (typeof value.validateRoutes !== 'function') {
+        throw new Error('[Zenith:Config] Key "adapter.validateRoutes" must be a function');
+    }
+    if (typeof value.adapt !== 'function') {
+        throw new Error('[Zenith:Config] Key "adapter.adapt" must be a function');
+    }
+    return value;
+}
+function resolveConfigFile(projectRoot) {
+    const matches = CONFIG_FILES
+        .map((name) => join(projectRoot, name))
+        .filter((candidate) => existsSync(candidate));
+    if (matches.length > 1) {
+        throw new Error(`[Zenith:Config] Multiple config files found. Keep exactly one of: ${CONFIG_FILES.join(', ')}`);
+    }
+    return matches[0] || null;
+}
+function resolveTypeScriptApi(projectRoot) {
+    try {
+        const projectRequire = createRequire(join(projectRoot, '__zenith_config_loader__.js'));
+        return projectRequire('typescript');
+    }
+    catch {
+        try {
+            return PACKAGE_REQUIRE('typescript');
+        }
+        catch {
+            throw new Error('[Zenith:Config] zenith.config.ts requires the `typescript` package to be installed.');
+        }
+    }
+}
+async function importTypescriptConfig(configPath, projectRoot) {
+    const source = await readFile(configPath, 'utf8');
+    const ts = resolveTypeScriptApi(projectRoot);
+    const transpiled = ts.transpileModule(source, {
+        compilerOptions: {
+            module: ts.ModuleKind.ESNext,
+            target: ts.ScriptTarget.ES2022,
+            moduleResolution: ts.ModuleResolutionKind.NodeNext,
+            esModuleInterop: true,
+            allowSyntheticDefaultImports: true
+        },
+        fileName: configPath
+    }).outputText;
+    const tempConfigPath = join(projectRoot, `.zenith.config.${process.pid}.${Date.now()}.${Math.random().toString(36).slice(2)}.mjs`);
+    await writeFile(tempConfigPath, transpiled, 'utf8');
+    try {
+        return await import(`${pathToFileURL(tempConfigPath).href}?t=${Date.now()}`);
+    }
+    finally {
+        await rm(tempConfigPath, { force: true });
+    }
+}
+async function importJavascriptConfig(configPath, projectRoot) {
+    const source = await readFile(configPath, 'utf8');
+    const isCommonJs = /\bmodule\.exports\b|\bexports\./.test(source);
+    const tempConfigPath = join(projectRoot, `.zenith.config.${process.pid}.${Date.now()}.${Math.random().toString(36).slice(2)}.${isCommonJs ? 'cjs' : 'mjs'}`);
+    await writeFile(tempConfigPath, source, 'utf8');
+    try {
+        if (isCommonJs) {
+            const projectRequire = createRequire(join(projectRoot, '__zenith_config_loader__.js'));
+            const resolvedPath = projectRequire.resolve(tempConfigPath);
+            const requireCache = projectRequire.cache || PACKAGE_REQUIRE.cache;
+            if (requireCache && resolvedPath in requireCache) {
+                delete requireCache[resolvedPath];
+            }
+            return projectRequire(tempConfigPath);
+        }
+        return await import(`${pathToFileURL(tempConfigPath).href}?t=${Date.now()}`);
+    }
+    finally {
+        await rm(tempConfigPath, { force: true });
+    }
+}
+export function hasExplicitConfigKey(config, key) {
+    return Boolean(config?.[CONFIG_META]?.explicitKeys?.has(key));
+}
+export function isLoadedConfig(config) {
+    return Boolean(config?.[CONFIG_META]?.loaded === true);
+}
+export function isConfigKeyExplicit(config, key) {
+    if (config && typeof config === 'object' && config[CONFIG_META]) {
+        return hasExplicitConfigKey(config, key);
+    }
+    return Boolean(config && Object.prototype.hasOwnProperty.call(config, key));
+}
+export function resolveConfigPagesDir(projectRoot, config) {
+    if (isConfigKeyExplicit(config, 'pagesDir')) {
+        return resolve(projectRoot, config.pagesDir);
+    }
+    const rootPagesDir = join(projectRoot, 'pages');
+    if (existsSync(rootPagesDir)) {
+        return rootPagesDir;
+    }
+    const srcPagesDir = join(projectRoot, 'src', 'pages');
+    if (existsSync(srcPagesDir)) {
+        return srcPagesDir;
+    }
+    return resolve(projectRoot, config?.pagesDir || DEFAULT_CONFIG.pagesDir);
+}
+export function resolveConfigOutDir(projectRoot, config) {
+    return resolve(projectRoot, config?.outDir || DEFAULT_CONFIG.outDir);
+}
 export function validateConfig(config) {
     if (config === null || config === undefined) {
-        return { ...DEFAULT_CONFIG, images: normalizeImageConfig() };
+        return attachConfigMeta({ ...DEFAULT_CONFIG, images: normalizeImageConfig() }, []);
     }
     if (typeof config !== 'object' || Array.isArray(config)) {
         throw new Error('[Zenith:Config] Config must be a plain object');
@@ -35,6 +170,9 @@ export function validateConfig(config) {
             throw new Error(`[Zenith:Config] Unknown key: "${key}"`);
         }
     }
+    if ('target' in config && 'adapter' in config) {
+        throw new Error('[Zenith:Config] Keys "target" and "adapter" are mutually exclusive');
+    }
     const result = {
         ...DEFAULT_CONFIG,
         images: normalizeImageConfig(DEFAULT_CONFIG.images)
@@ -48,11 +186,8 @@ export function validateConfig(config) {
             result.images = normalizeImageConfig(value);
             continue;
         }
-        if (expectedType === 'object') {
-            if (typeof value !== 'object' || value === null || Array.isArray(value)) {
-                throw new Error(`[Zenith:Config] Key "${key}" must be a plain object`);
-            }
-            result[key] = { ...value };
+        if (key === 'adapter') {
+            result.adapter = validateAdapterValue(value);
             continue;
         }
         if (typeof value !== expectedType) {
@@ -61,26 +196,25 @@ export function validateConfig(config) {
         if (expectedType === 'string' && value.trim().length === 0) {
             throw new Error(`[Zenith:Config] Key "${key}" must be a non-empty string`);
         }
+        if (key === 'target' && !KNOWN_TARGETS.includes(value)) {
+            throw new Error(`[Zenith:Config] Unsupported target: "${value}"`);
+        }
+        if (key === 'basePath') {
+            result.basePath = normalizeBasePath(value);
+            continue;
+        }
         result[key] = value;
     }
-    return result;
+    return attachConfigMeta(result, Object.keys(config));
 }
 export async function loadConfig(projectRoot) {
-    const configPath = join(projectRoot, 'zenith.config.js');
-    try {
-        const url = pathToFileURL(configPath).href;
-        const mod = await import(url);
-        return validateConfig(mod.default || mod);
-    }
-    catch (error) {
-        const code = typeof error?.code === 'string' ? error.code : '';
-        const message = typeof error?.message === 'string' ? error.message : '';
-        if (code === 'ERR_MODULE_NOT_FOUND'
-            || code === 'ENOENT'
-            || message.includes('Cannot find module')
-            || message.includes('ENOENT')) {
-            return validateConfig(null);
-        }
-        throw error;
+    const resolvedProjectRoot = resolve(projectRoot);
+    const configPath = resolveConfigFile(resolvedProjectRoot);
+    if (!configPath) {
+        return markLoaded(validateConfig(null));
     }
+    const mod = configPath.endsWith('.ts')
+        ? await importTypescriptConfig(configPath, resolvedProjectRoot)
+        : await importJavascriptConfig(configPath, resolvedProjectRoot);
+    return markLoaded(validateConfig(mod.default || mod));
 }

package/dist/dev-build-session.d.ts

@@ -6,6 +6,7 @@ export function createDevBuildSession(options: any): {
     }>;
     getImageRuntimePayload(): {
         mode: string;
+        basePath: string;
         config: {
             formats: string[];
             deviceSizes: number[];

package/dist/dev-build-session.js

@@ -237,11 +237,10 @@ export function createDevBuildSession(options) {
     const srcDir = resolve(resolvedPagesDir, '..');
     const compilerBin = createCompilerToolchain({ projectRoot, logger });
     const bundlerBin = createBundlerToolchain({ projectRoot, logger });
-    const softNavigationEnabled = config.softNavigation === true || config.router === true;
+    const routerEnabled = config.router === true;
     const compilerOpts = {
         typescriptDefault: config.typescriptDefault === true,
-        experimentalEmbeddedMarkup: config.embeddedMarkupExpressions === true
-            || config.experimental?.embeddedMarkupExpressions === true,
+        experimentalEmbeddedMarkup: config.embeddedMarkupExpressions === true,
         strictDomLints: config.strictDomLints === true
     };
     ensureToolchainCompatibility(bundlerBin);
@@ -308,7 +307,7 @@ export function createDevBuildSession(options) {
             registry: state.registry,
             compilerOpts,
             compilerBin,
-            softNavigationEnabled,
+            routerEnabled,
             startupProfile,
             compilerTotals,
             emitCompilerWarning,
@@ -356,7 +355,7 @@ export function createDevBuildSession(options) {
             registry: state.registry,
             compilerOpts,
             compilerBin,
-            softNavigationEnabled,
+            routerEnabled,
             startupProfile,
             compilerTotals,
             emitCompilerWarning,

package/dist/framework-components/Image.zen

@@ -32,6 +32,24 @@ function normalizeFormat(value: unknown): string {
   return String(value || "").trim().toLowerCase().replace(/^\./, "");
 }
 
+function normalizeBasePath(value: unknown): string {
+  const raw = safeString(value);
+  if (!raw || raw === "/") return "/";
+  if (!raw.startsWith("/")) return "/";
+  const normalized = raw.replace(/\/{2,}/g, "/").replace(/\/+$/g, "");
+  return normalized || "/";
+}
+
+function prependBasePath(basePath: string, pathname: string): string {
+  const normalizedBasePath = normalizeBasePath(basePath);
+  if (normalizedBasePath === "/") return pathname;
+  if (pathname === "/") return normalizedBasePath;
+  if (pathname === normalizedBasePath || pathname.startsWith(normalizedBasePath + "/")) {
+    return pathname;
+  }
+  return `${normalizedBasePath}${pathname}`;
+}
+
 function isRemoteUrl(value: string): boolean {
   return /^https?:\/\//i.test(value);
 }
@@ -71,17 +89,20 @@ function buildLocalImageKey(publicPath: string): string {
   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 buildLocalVariantPath(publicPath: string, width: number, quality: number, format: string, basePath: string): string {
+  return prependBasePath(
+    basePath,
+    `/_zenith/image/local/${buildLocalImageKey(publicPath)}/w${width}-q${quality}.${normalizeFormat(format)}`
+  );
 }
 
-function buildRemoteVariantPath(remoteUrl: string, width: number, quality: number, format: string): string {
+function buildRemoteVariantPath(remoteUrl: string, width: number, quality: number, format: string, basePath: 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()}`;
+  return `${prependBasePath(basePath, "/_zenith/image")}?${query.toString()}`;
 }
 
 function escapeRegex(value: string): string {
@@ -227,6 +248,7 @@ function renderImage(): string {
   if (!source || !alt) return "";
 
   const config = isPlainObject(payload.config) ? payload.config : {};
+  const basePath = normalizeBasePath((payload as any).basePath);
   const className = safeString(rawProps.class);
   const style = mergeStyle(rawProps.style, rawProps.fit, rawProps.position);
   const loading = rawProps.priority === true ? "eager" : safeString(rawProps.loading) || "lazy";
@@ -248,8 +270,8 @@ function renderImage(): string {
     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),
+        ? prependBasePath(basePath, source.path)
+        : buildLocalVariantPath(source.path, fallbackWidth, quality, fallbackFormat, basePath),
       width,
       height,
       sizes,
@@ -258,7 +280,7 @@ function renderImage(): string {
         : sourceFormats.map((format) => ({
             type: mimeTypeForFormat(format),
             sizes,
-            srcset: widths.map((candidate) => `${buildLocalVariantPath(source.path, candidate, quality, format)} ${candidate}w`).join(", ")
+            srcset: widths.map((candidate) => `${buildLocalVariantPath(source.path, candidate, quality, format, basePath)} ${candidate}w`).join(", ")
           })).filter((entry) => entry.type && entry.srcset)
     };
   } else {
@@ -272,14 +294,14 @@ function renderImage(): string {
       model = { src: source.url, width, height, sizes, sources: [] };
     } else {
       model = {
-        src: buildRemoteVariantPath(source.url, widths[widths.length - 1] || width, quality, ""),
+        src: buildRemoteVariantPath(source.url, widths[widths.length - 1] || width, quality, "", basePath),
         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(", ")
+          srcset: widths.map((candidate) => `${buildRemoteVariantPath(source.url, candidate, quality, format, basePath)} ${candidate}w`).join(", ")
         })).filter((entry) => entry.type && entry.srcset)
       };
     }

package/dist/images/payload.d.ts

@@ -1,5 +1,6 @@
-export function createImageRuntimePayload(config: any, localImages: any, mode?: string): {
+export function createImageRuntimePayload(config: any, localImages: any, mode?: string, basePath?: string): {
     mode: string;
+    basePath: string;
     config: {
         formats: string[];
         deviceSizes: number[];

package/dist/images/payload.js

@@ -1,9 +1,10 @@
 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') {
+export function createImageRuntimePayload(config, localImages, mode = 'passthrough', basePath = '/') {
     return normalizeImageRuntimePayload({
         mode,
+        basePath,
         config: normalizeImageConfig(config),
         localImages: localImages && typeof localImages === 'object' ? localImages : {}
     });
@@ -17,7 +18,7 @@ function serializeInlineScriptJson(payload) {
         .replace(/\u2029/g, '\\u2029');
 }
 export function injectImageRuntimePayload(html, payload) {
-    const safePayload = createImageRuntimePayload(payload?.config || {}, payload?.localImages || {}, payload?.mode || 'passthrough');
+    const safePayload = createImageRuntimePayload(payload?.config || {}, payload?.localImages || {}, payload?.mode || 'passthrough', payload?.basePath || '/');
     const globalName = imageRuntimeGlobalName();
     const serialized = serializeInlineScriptJson(safePayload);
     const scriptTag = `<script id="zenith-image-runtime">window.${globalName} = ${serialized};</script>`;

package/dist/images/runtime.js

@@ -1,3 +1,4 @@
+import { prependBasePath } from '../base-path.js';
 import { buildLocalVariantPath, buildRemoteVariantPath, imageRuntimeGlobalName, matchRemotePattern, normalizeImageRuntimePayload, normalizeImageSource, resolveWidthCandidates } from './shared.js';
 function safeString(value) {
     if (typeof value === 'string') {
@@ -128,14 +129,14 @@ function buildLocalImageModel(props, payload, source) {
         : true);
     const fallbackWidth = widths.length > 0 ? widths[widths.length - 1] : width;
     const imgSrc = props.unoptimized === true
-        ? source.path
-        : buildLocalVariantPath(source.path, fallbackWidth || width || manifestEntry?.width || 0, quality, fallbackFormat);
+        ? prependBasePath(payload?.basePath || '/', source.path)
+        : buildLocalVariantPath(source.path, fallbackWidth || width || manifestEntry?.width || 0, quality, fallbackFormat, payload?.basePath || '/');
     const sources = props.unoptimized === true
         ? []
         : sourceFormats.map((format) => ({
             type: mimeTypeForFormat(format),
             sizes,
-            srcset: widths.map((candidate) => `${buildLocalVariantPath(source.path, candidate, quality, format)} ${candidate}w`).join(', ')
+            srcset: widths.map((candidate) => `${buildLocalVariantPath(source.path, candidate, quality, format, payload?.basePath || '/')} ${candidate}w`).join(', ')
         })).filter((entry) => entry.type && entry.srcset);
     return {
         src: imgSrc,
@@ -168,10 +169,10 @@ function buildRemoteImageModel(props, payload, source) {
     const sources = (config.formats || []).map((format) => ({
         type: mimeTypeForFormat(format),
         sizes,
-        srcset: widths.map((candidate) => `${buildRemoteVariantPath(source.url, candidate, quality, format)} ${candidate}w`).join(', ')
+        srcset: widths.map((candidate) => `${buildRemoteVariantPath(source.url, candidate, quality, format, payload?.basePath || '/')} ${candidate}w`).join(', ')
     })).filter((entry) => entry.type && entry.srcset);
     return {
-        src: buildRemoteVariantPath(source.url, widths[widths.length - 1] || width, quality, ''),
+        src: buildRemoteVariantPath(source.url, widths[widths.length - 1] || width, quality, '', payload?.basePath || '/'),
         width,
         height,
         sizes,

package/dist/images/service.js

@@ -3,7 +3,7 @@ import { existsSync } from 'node:fs';
 import { mkdir, readFile, stat, writeFile, readdir } from 'node:fs/promises';
 import { dirname, extname, join, relative, resolve } from 'node:path';
 import sharp from 'sharp';
-import { buildLocalImageKey, buildLocalVariantPath, matchRemotePattern, normalizeImageConfig, normalizeImageFormat } from './shared.js';
+import { buildLocalImageKey, buildLocalVariantAssetPath, matchRemotePattern, normalizeImageConfig, normalizeImageFormat } from './shared.js';
 const RASTER_EXTENSIONS = new Set(['.jpg', '.jpeg', '.png', '.webp', '.avif']);
 const MIME_BY_FORMAT = {
     avif: 'image/avif',
@@ -95,7 +95,7 @@ async function writeIfStale(sourcePath, targetPath, buffer) {
     await writeFile(targetPath, buffer);
 }
 function variantRelativePath(publicPath, width, quality, format) {
-    return buildLocalVariantPath(publicPath, width, quality, format).replace(/^\//, '');
+    return buildLocalVariantAssetPath(publicPath, width, quality, format).replace(/^\//, '');
 }
 function createRemoteCacheKey(url, width, quality, format) {
     return buildLocalImageKey(`${url}|${width}|${quality}|${format || 'original'}`);

package/dist/images/shared.d.ts

@@ -15,12 +15,14 @@ export function isRemoteImageUrl(value: any): boolean;
 export function normalizeImageSource(input: any): any;
 export function normalizeImageFormat(value: any): string;
 export function buildLocalImageKey(publicPath: any): string;
-export function buildLocalVariantPath(publicPath: any, width: any, quality: any, format: any): string;
-export function buildRemoteVariantPath(remoteUrl: any, width: any, quality: any, format: any): string;
+export function buildLocalVariantAssetPath(publicPath: any, width: any, quality: any, format: any): string;
+export function buildLocalVariantPath(publicPath: any, width: any, quality: any, format: any, basePath?: string): string;
+export function buildRemoteVariantPath(remoteUrl: any, width: any, quality: any, format: any, basePath?: string): string;
 export function resolveWidthCandidates(width: any, sizes: any, config: any, manifestEntry: any): any[];
 export function imageRuntimeGlobalName(): string;
 export function normalizeImageRuntimePayload(payload: any): {
     mode: string;
+    basePath: string;
     config: {
         formats: string[];
         deviceSizes: number[];