veryfront 0.1.127 → 0.1.129

package/esm/src/html/html-shell-generator.js

@@ -1,14 +1,15 @@
 import { resolveRelativePath } from "../modules/react-loader/path-resolver.js";
 import { withSpan } from "../observability/tracing/otlp-setup.js";
 import { SpanNames } from "../observability/tracing/span-names.js";
+import { profilePhase } from "../observability/request-profiler.js";
 import { serverLogger } from "../utils/logger/logger.js";
 import { isMarkdownPreview as checkMarkdownPreview } from "../transforms/md/utils.js";
 import { generateModulePreloadHintsFromManifest, getRouteManifest, } from "../modules/manifest/route-module-manifest.js";
-import { escapeHTML } from "./html-escape.js";
-import { generateHydrationData, getDevScripts, getProdScripts, } from "./hydration-script-builder/index.js";
-import { getStudioScripts } from "./dev-scripts.js";
+import { buildNonceAttribute, escapeHTML } from "./html-escape.js";
+import { generateHydrationData, getDevScripts, getProdScripts, PROD_HYDRATION_MODULE_PATH, } from "./hydration-script-builder/index.js";
+import { getPreviewStylesheetLink, getStudioScripts } from "./dev-scripts.js";
 import { processMetadata } from "./metadata-builder.js";
-import { extractCandidates, getDevStyles, getProjectCSS } from "./styles-builder/index.js";
+import { extractCandidates, getDevStyles as getErrorOverlayStyles, getProjectCSS, } from "./styles-builder/index.js";
 import { buildImportMapJson, buildRootAttributes, shouldDisableLayout } from "./utils.js";
 function pathToModuleUrl(path, studioEmbed) {
     if (!path)
@@ -27,6 +28,9 @@ function getRelativePagePath(fullPath, projectDir) {
         return normalized.replace(/^\//, "");
     return resolveRelativePath(normalized, projectDir);
 }
+function resolveProjectCSSScope(options, metaSlug) {
+    return options.projectSlug || options.projectId || metaSlug || "default";
+}
 function generateModulePreloadHints(options) {
     const hints = [];
     const addedUrls = new Set();
@@ -55,7 +59,7 @@ function generateModulePreloadHints(options) {
     if (studioEmbed || options.environment === "preview") {
         return hints.join("\n  ");
     }
-    const projectSlug = options.projectId;
+    const projectSlug = options.projectSlug ?? options.projectId;
     const route = options.pagePath
         ? getRelativePagePath(options.pagePath, projectDir)
             .replace(/\.(tsx|ts|jsx|mdx)$/, "")
@@ -73,15 +77,15 @@ function generateModulePreloadHints(options) {
     }
     return hints.join("\n  ");
 }
-export function generateHTMLShellParts(meta, options, params, props, contentForTailwind) {
-    return withSpan(SpanNames.HTML_GENERATE_SHELL_PARTS, () => generateHTMLShellPartsImpl(meta, options, params, props, contentForTailwind), {
+export function generateHTMLShellParts(meta, options, params, props, contentForTailwind, projectCSSPromise) {
+    return withSpan(SpanNames.HTML_GENERATE_SHELL_PARTS, () => generateHTMLShellPartsImpl(meta, options, params, props, contentForTailwind, projectCSSPromise), {
         "html.slug": meta.slug || "",
         "html.has_content": !!contentForTailwind,
         "html.mode": options.mode || "production",
         "html.is_local_project": options.isLocalProject ?? false,
     });
 }
-async function generateHTMLShellPartsImpl(meta, options, params, props, contentForTailwind) {
+async function generateHTMLShellPartsImpl(meta, options, params, props, contentForTailwind, prefetchedProjectCSSPromise) {
     const stylesheetContent = options.globalCSS;
     const isLocalProject = options.isLocalProject ?? false;
     const isPreviewMode = options.environment === "preview";
@@ -92,40 +96,41 @@ async function generateHTMLShellPartsImpl(meta, options, params, props, contentF
         for (const cls of extractCandidates(contentForTailwind))
             candidates.add(cls);
     }
-    const projectSlug = options.projectId || meta.slug || "default";
-    let cssHash = "";
-    // Only generate CSS for production mode (dev/preview uses link tag to StylesCSSHandler)
-    if (useProductionCSS && projectSlug !== "default") {
-        const projectCSS = await getProjectCSS(projectSlug, stylesheetContent, candidates, {
-            minify: true,
-            environment: options.environment,
-            buildMode: options.mode,
-        });
-        cssHash = projectCSS.hash;
-    }
+    const projectSlug = resolveProjectCSSScope(options, meta.slug);
+    const projectCSSPromise = prefetchedProjectCSSPromise ??
+        (useProductionCSS && projectSlug !== "default"
+            ? getProjectCSS(projectSlug, stylesheetContent, candidates, {
+                minify: true,
+                environment: options.environment,
+                buildMode: options.mode,
+            })
+            : Promise.resolve(null));
     const { effectiveTitle, metaTags, linkTags, scriptTags, styleTags, lang, bodyClass, } = processMetadata(meta);
     const noLayout = shouldDisableLayout(meta.frontmatter);
     const rootAttributes = buildRootAttributes(meta.slug || "", options.mode || "production", noLayout, meta.ssrHash);
-    const importMapJson = await buildImportMapJson({
+    const skipDevHMR = isPreviewMode || options.noHmr;
+    // Error logger endpoint only enabled in local dev (returns 404 in preview/prod)
+    const skipErrorLogger = isPreviewMode;
+    // Enable dev scripts for local dev OR preview mode (for HMR support in Studio),
+    // unless a caller explicitly forces production client scripts for fair benchmarking.
+    const useDevScripts = !options.forceProductionScripts && (isLocalProject || isPreviewMode);
+    const importMapJsonPromise = buildImportMapJson({
         projectDir: options.projectDir,
         config: options.config,
         customImports: options.importMap,
+        pretty: useDevScripts,
     });
-    const hydrationDataJson = generateHydrationData(meta.slug || "", params ?? {}, props ?? {}, options);
+    const hydrationDataJson = generateHydrationData(meta.slug || "", params ?? {}, props ?? {}, options, { pretty: useDevScripts });
     const nonce = options.nonce ?? "";
-    const skipDevHMR = isPreviewMode || options.noHmr;
-    // Error logger endpoint only enabled in local dev (returns 404 in preview/prod)
-    const skipErrorLogger = isPreviewMode;
-    // Enable dev scripts for local dev OR preview mode (for HMR support in Studio)
-    const useDevScripts = isLocalProject || isPreviewMode;
     const modeScripts = useDevScripts
         ? getDevScripts(meta.slug || "", options.config, params, props, nonce, {
             skipDevHMR,
             skipErrorLogger,
         })
         : getProdScripts(meta.slug || "", params, props, nonce);
-    const modeStyles = useDevScripts ? getDevStyles(nonce) : "";
+    const modeStyles = useDevScripts ? getErrorOverlayStyles(nonce) : "";
     const modulePreloadHints = generateModulePreloadHints(options);
+    const importMapJson = await profilePhase("html.import_map", () => importMapJsonPromise);
     // Preload critical React dependencies to avoid waterfall delays.
     // jsx-runtime is discovered late (only when modules execute), adding ~500ms latency.
     const importMapData = JSON.parse(importMapJson);
@@ -133,7 +138,10 @@ async function generateHTMLShellPartsImpl(meta, options, params, props, contentF
     const criticalDepsPreload = jsxRuntimeUrl
         ? `<link rel="modulepreload" href="${jsxRuntimeUrl}">`
         : "";
-    const nonceAttr = nonce ? ` nonce="${escapeHTML(nonce)}"` : "";
+    const prodHydrationModulePreload = useDevScripts
+        ? ""
+        : `<link rel="modulepreload" href="${PROD_HYDRATION_MODULE_PATH}">`;
+    const nonceAttr = buildNonceAttribute(nonce);
     // Expose project slug for runtime error overlay "Fix in Veryfront" button
     const overlaySlug = options.projectId || meta.slug;
     const slugForOverlay = useDevScripts && overlaySlug
@@ -176,6 +184,8 @@ async function generateHTMLShellPartsImpl(meta, options, params, props, contentF
         : "";
     let tailwindCSSBlock = "";
     if (useProductionCSS) {
+        const projectCSS = await profilePhase("html.project_css", () => projectCSSPromise);
+        const cssHash = projectCSS?.hash ?? "";
         if (cssHash) {
             tailwindCSSBlock = `<link rel="stylesheet" href="/_vf/css/${cssHash}.css">`;
         }
@@ -189,8 +199,7 @@ async function generateHTMLShellPartsImpl(meta, options, params, props, contentF
     }
     else {
         // Dev/preview: use link tag for HMR cache-busting
-        tailwindCSSBlock =
-            `<link id="vf-tailwind-css" rel="stylesheet" href="/_vf_styles/styles.css?t=${Date.now()}">`;
+        tailwindCSSBlock = getPreviewStylesheetLink();
     }
     // Markdown styles: .md files with prose !== false get GitHub markdown CSS
     const isMarkdownPreview = options.pageType === "md" &&
@@ -217,6 +226,7 @@ async function generateHTMLShellPartsImpl(meta, options, params, props, contentF
   <!-- Modulepreload hints for faster cold start -->
   ${modulePreloadHints}
   ${criticalDepsPreload}
+  ${prodHydrationModulePreload}
 
   <!-- Tailwind CSS: Server-side JIT compiled -->
   ${tailwindCSSBlock}
@@ -239,7 +249,7 @@ async function generateHTMLShellPartsImpl(meta, options, params, props, contentF
             sourceHash: options.sourceHash,
         })
         : "";
-    const previewHMRScript = isPreviewMode
+    const previewHMRScript = isPreviewMode && !options.forceProductionScripts
         ? `<script src="/_veryfront/preview-hmr.js"${nonceAttr}></script>`
         : "";
     const mermaidScript = isMarkdownPreview
@@ -276,10 +286,10 @@ mermaid.run();
 </html>`;
     return { start, end };
 }
-export function wrapInHTMLShell(content, meta, options, params, props) {
+export function wrapInHTMLShell(content, meta, options, params, props, projectCSSPromise) {
     return withSpan(SpanNames.HTML_WRAP_IN_SHELL, async () => {
         const cleanedContent = content.trim();
-        const { start, end } = await generateHTMLShellParts(meta, options, params, props, cleanedContent);
+        const { start, end } = await generateHTMLShellParts(meta, options, params, props, cleanedContent, projectCSSPromise);
         return `${start}${cleanedContent}${end}`;
     }, {
         "html.slug": meta.slug || "",

package/esm/src/html/hydration-script-builder/dev-client-renderer.js

@@ -1,7 +1,7 @@
 import { getLoaderScript, getRendererScript, getRouterScript } from "./templates/index.js";
-import { escapeHtml } from "../html-escape.js";
+import { buildNonceAttribute } from "../html-escape.js";
 export function generateDevClientRendererScript(nonce) {
-    const nonceAttr = nonce ? ` nonce="${escapeHtml(nonce)}"` : "";
+    const nonceAttr = buildNonceAttribute(nonce);
     return `
   <script type="module"${nonceAttr}>
     import * as React from 'react';

package/esm/src/html/hydration-script-builder/dev-component-manifest.js

@@ -1,6 +1,6 @@
-import { escapeHtml } from "../html-escape.js";
+import { buildNonceAttribute } from "../html-escape.js";
 export function generateDevComponentManifestScript(config, nonce) {
-    const nonceAttr = nonce ? ` nonce="${escapeHtml(nonce)}"` : "";
+    const nonceAttr = buildNonceAttribute(nonce);
     const components = config.dev?.components ?? [];
     return `
   <script${nonceAttr}>

package/esm/src/html/hydration-script-builder/dev-error-logger.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dev-error-logger.d.ts","sourceRoot":"","sources":["../../../../src/src/html/hydration-script-builder/dev-error-logger.ts"],"names":[],"mappings":"AAMA,wBAAgB,4BAA4B,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAyDnE"}
+{"version":3,"file":"dev-error-logger.d.ts","sourceRoot":"","sources":["../../../../src/src/html/hydration-script-builder/dev-error-logger.ts"],"names":[],"mappings":"AAEA,wBAAgB,4BAA4B,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAuDnE"}

package/esm/src/html/hydration-script-builder/dev-error-logger.js

@@ -1,12 +1,8 @@
-import { escapeHtml } from "../html-escape.js";
-function getOpenScriptTag(nonce) {
-    return nonce ? `<script nonce="${escapeHtml(nonce)}">` : "<script>";
-}
+import { buildNonceAttribute } from "../html-escape.js";
 export function generateDevErrorLoggerScript(nonce) {
-    const openScriptTag = getOpenScriptTag(nonce);
     return `
   <!-- Client-side error logger -->
-  ${openScriptTag}
+  <script${buildNonceAttribute(nonce)}>
     (function() {
       const logToServer = (level, message, details) => {
         try {

package/esm/src/html/hydration-script-builder/dev-scripts.js

@@ -1,4 +1,4 @@
-import { escapeHtml } from "../html-escape.js";
+import { buildNonceAttribute } from "../html-escape.js";
 import { generateDevErrorLoggerScript } from "./dev-error-logger.js";
 import { generateDevComponentManifestScript } from "./dev-component-manifest.js";
 import { generateDevClientRendererScript } from "./dev-client-renderer.js";
@@ -6,7 +6,7 @@ function generateHMRScript(config, nonce, skipDevHMR) {
     // Skip dev HMR script when preview-hmr.js will be used instead
     if (skipDevHMR || !config.dev?.hmr)
         return "";
-    const nonceAttr = nonce ? ` nonce="${escapeHtml(nonce)}"` : "";
+    const nonceAttr = buildNonceAttribute(nonce);
     return `<script type="module" src="/_veryfront/hmr.js"${nonceAttr}></script>`;
 }
 export function getDevScripts(_slug, config, _params, _props, nonce, options) {

package/esm/src/html/hydration-script-builder/hydration-data-generator.d.ts

@@ -1,4 +1,6 @@
 import type { ComponentProps } from "../../types/index.js";
 import type { HTMLGenerationOptions } from "../types.js";
-export declare function generateHydrationData(slug: string, params: Record<string, string | string[]>, props: ComponentProps, options: HTMLGenerationOptions): string;
+export declare function generateHydrationData(slug: string, params: Record<string, string | string[]>, props: ComponentProps, options: HTMLGenerationOptions, serializeOptions?: {
+    pretty?: boolean;
+}): string;
 //# sourceMappingURL=hydration-data-generator.d.ts.map

package/esm/src/html/hydration-script-builder/hydration-data-generator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"hydration-data-generator.d.ts","sourceRoot":"","sources":["../../../../src/src/html/hydration-script-builder/hydration-data-generator.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAI3D,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,aAAa,CAAC;AAyBzD,wBAAgB,qBAAqB,CACnC,IAAI,EAAE,MAAM,EACZ,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC,EACzC,KAAK,EAAE,cAAc,EACrB,OAAO,EAAE,qBAAqB,GAC7B,MAAM,CA2CR"}
+{"version":3,"file":"hydration-data-generator.d.ts","sourceRoot":"","sources":["../../../../src/src/html/hydration-script-builder/hydration-data-generator.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAI3D,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,aAAa,CAAC;AAyBzD,wBAAgB,qBAAqB,CACnC,IAAI,EAAE,MAAM,EACZ,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC,EACzC,KAAK,EAAE,cAAc,EACrB,OAAO,EAAE,qBAAqB,EAC9B,gBAAgB,CAAC,EAAE;IAAE,MAAM,CAAC,EAAE,OAAO,CAAA;CAAE,GACtC,MAAM,CA2CR"}

package/esm/src/html/hydration-script-builder/hydration-data-generator.js

@@ -18,7 +18,7 @@ function inferPageType(pagePath) {
         return undefined;
     return PAGE_TYPE_EXTENSIONS.has(ext) ? ext : undefined;
 }
-export function generateHydrationData(slug, params, props, options) {
+export function generateHydrationData(slug, params, props, options, serializeOptions) {
     const layouts = (options.nestedLayouts ?? [])
         .map((layout) => {
         const path = toProjectRelativePath(layout.path ?? layout.componentPath ?? "", options.projectDir);
@@ -54,5 +54,5 @@ export function generateHydrationData(slug, params, props, options) {
         headings: options.headings,
         studioEmbed: options.studioEmbed,
     };
-    return JSON.stringify(data, null, 2);
+    return JSON.stringify(data, null, serializeOptions?.pretty ?? true ? 2 : undefined);
 }

package/esm/src/html/hydration-script-builder/index.d.ts

@@ -9,6 +9,6 @@ export { getDevScripts } from "./dev-scripts.js";
 export { generateDevErrorLoggerScript } from "./dev-error-logger.js";
 export { generateDevComponentManifestScript } from "./dev-component-manifest.js";
 export { generateDevClientRendererScript } from "./dev-client-renderer.js";
-export { getProdScripts } from "./prod-scripts.js";
+export { generateProdHydrationModule, getProdScripts, PROD_HYDRATION_MODULE_PATH, } from "./prod-scripts.js";
 export { generateProdHydrationScript } from "./prod-hydration.js";
 //# sourceMappingURL=index.d.ts.map

package/esm/src/html/hydration-script-builder/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/src/html/hydration-script-builder/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,YAAY,EAAE,sBAAsB,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAE1E,OAAO,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AAEtE,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,EAAE,4BAA4B,EAAE,MAAM,uBAAuB,CAAC;AACrE,OAAO,EAAE,kCAAkC,EAAE,MAAM,6BAA6B,CAAC;AACjF,OAAO,EAAE,+BAA+B,EAAE,MAAM,0BAA0B,CAAC;AAE3E,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,2BAA2B,EAAE,MAAM,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/src/html/hydration-script-builder/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,YAAY,EAAE,sBAAsB,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAE1E,OAAO,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AAEtE,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,EAAE,4BAA4B,EAAE,MAAM,uBAAuB,CAAC;AACrE,OAAO,EAAE,kCAAkC,EAAE,MAAM,6BAA6B,CAAC;AACjF,OAAO,EAAE,+BAA+B,EAAE,MAAM,0BAA0B,CAAC;AAE3E,OAAO,EACL,2BAA2B,EAC3B,cAAc,EACd,0BAA0B,GAC3B,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,2BAA2B,EAAE,MAAM,qBAAqB,CAAC"}

package/esm/src/html/hydration-script-builder/index.js

@@ -8,5 +8,5 @@ export { getDevScripts } from "./dev-scripts.js";
 export { generateDevErrorLoggerScript } from "./dev-error-logger.js";
 export { generateDevComponentManifestScript } from "./dev-component-manifest.js";
 export { generateDevClientRendererScript } from "./dev-client-renderer.js";
-export { getProdScripts } from "./prod-scripts.js";
+export { generateProdHydrationModule, getProdScripts, PROD_HYDRATION_MODULE_PATH, } from "./prod-scripts.js";
 export { generateProdHydrationScript } from "./prod-hydration.js";

package/esm/src/html/hydration-script-builder/prod-hydration.js

@@ -1,6 +1,6 @@
-import { escapeHtml } from "../html-escape.js";
+import { buildNonceAttribute } from "../html-escape.js";
 export function generateProdHydrationScript(slug, _params, props, nonce) {
-    const nonceAttr = nonce ? ` nonce="${escapeHtml(nonce)}"` : "";
+    const nonceAttr = buildNonceAttribute(nonce);
     const pageProps = JSON.stringify(props ?? {});
     return `
   <script type="module"${nonceAttr}>

package/esm/src/html/hydration-script-builder/prod-scripts.d.ts

@@ -1,2 +1,4 @@
+export declare const PROD_HYDRATION_MODULE_PATH = "/_veryfront/hydration-runtime.js";
+export declare function generateProdHydrationModule(): string;
 export declare function getProdScripts(_slug: string, _params?: Record<string, string | string[]>, _props?: Record<string, unknown>, nonce?: string): string;
 //# sourceMappingURL=prod-scripts.d.ts.map

package/esm/src/html/hydration-script-builder/prod-scripts.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"prod-scripts.d.ts","sourceRoot":"","sources":["../../../../src/src/html/hydration-script-builder/prod-scripts.ts"],"names":[],"mappings":"AAGA,wBAAgB,cAAc,CAC5B,KAAK,EAAE,MAAM,EACb,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC,EAC3C,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAChC,KAAK,CAAC,EAAE,MAAM,GACb,MAAM,CAeR"}
+{"version":3,"file":"prod-scripts.d.ts","sourceRoot":"","sources":["../../../../src/src/html/hydration-script-builder/prod-scripts.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,0BAA0B,qCAAqC,CAAC;AAE7E,wBAAgB,2BAA2B,IAAI,MAAM,CASpD;AAED,wBAAgB,cAAc,CAC5B,KAAK,EAAE,MAAM,EACb,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC,EAC3C,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAChC,KAAK,CAAC,EAAE,MAAM,GACb,MAAM,CAGR"}

package/esm/src/html/hydration-script-builder/prod-scripts.js

@@ -1,17 +1,17 @@
 import { getLoaderScript, getRendererScript, getRouterScript } from "./templates/index.js";
-import { escapeHtml } from "../html-escape.js";
+import { buildNonceAttribute } from "../html-escape.js";
+export const PROD_HYDRATION_MODULE_PATH = "/_veryfront/hydration-runtime.js";
+export function generateProdHydrationModule() {
+    return [
+        `import * as React from 'react';`,
+        `import { RouterProvider, useRouter as useRouterFromModule } from 'veryfront/router';`,
+        `import { PageContextProvider } from 'veryfront/context';`,
+        getRouterScript().trim(),
+        getLoaderScript().trim(),
+        getRendererScript().trim(),
+    ].join("\n\n");
+}
 export function getProdScripts(_slug, _params, _props, nonce) {
-    const nonceAttr = nonce ? ` nonce="${escapeHtml(nonce)}"` : "";
-    return `
-  <script type="module"${nonceAttr}>
-    import * as React from 'react';
-    import { RouterProvider, useRouter as useRouterFromModule } from 'veryfront/router';
-    import { PageContextProvider } from 'veryfront/context';
-
-    ${getRouterScript()}
-
-    ${getLoaderScript()}
-
-    ${getRendererScript()}
-  </script>`;
+    const nonceAttr = buildNonceAttribute(nonce);
+    return `\n  <script type="module" src="${PROD_HYDRATION_MODULE_PATH}"${nonceAttr}></script>`;
 }

package/esm/src/html/schemas/html.schema.d.ts

@@ -48,6 +48,7 @@ export declare const HTMLGenerationOptionsSchema: z.ZodObject<{
     layoutProps: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodRecord<z.ZodString, z.ZodUnknown>>>;
     studioEmbed: z.ZodOptional<z.ZodBoolean>;
     projectId: z.ZodOptional<z.ZodString>;
+    projectSlug: z.ZodOptional<z.ZodString>;
     pageId: z.ZodOptional<z.ZodString>;
     sourceHash: z.ZodOptional<z.ZodString>;
     colorScheme: z.ZodOptional<z.ZodEnum<{
@@ -68,6 +69,7 @@ export declare const HTMLGenerationOptionsSchema: z.ZodObject<{
     projectClasses: z.ZodOptional<z.ZodSet<z.ZodString>>;
     isLocalProject: z.ZodOptional<z.ZodBoolean>;
     noHmr: z.ZodOptional<z.ZodBoolean>;
+    forceProductionScripts: z.ZodOptional<z.ZodBoolean>;
 }, z.core.$strip>;
 export declare const HydrationDataSchema: z.ZodObject<{
     slug: z.ZodString;

package/esm/src/html/schemas/html.schema.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"html.schema.d.ts","sourceRoot":"","sources":["../../../../src/src/html/schemas/html.schema.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAExB,eAAO,MAAM,iBAAiB;;;EAA4B,CAAC;AAE3D,eAAO,MAAM,iBAAiB;;;EAAoC,CAAC;AAEnE,eAAO,MAAM,cAAc;;;;;;;EAAkD,CAAC;AAC9E,eAAO,MAAM,0BAA0B;;;EAA+B,CAAC;AAEvE,eAAO,MAAM,2BAA2B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAyCtC,CAAC;AAEH,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;iBAa9B,CAAC;AAGH,MAAM,MAAM,qBAAqB,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,2BAA2B,CAAC,CAAC;AAChF,MAAM,MAAM,aAAa,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,mBAAmB,CAAC,CAAC"}
+{"version":3,"file":"html.schema.d.ts","sourceRoot":"","sources":["../../../../src/src/html/schemas/html.schema.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAExB,eAAO,MAAM,iBAAiB;;;EAA4B,CAAC;AAE3D,eAAO,MAAM,iBAAiB;;;EAAoC,CAAC;AAEnE,eAAO,MAAM,cAAc;;;;;;;EAAkD,CAAC;AAC9E,eAAO,MAAM,0BAA0B;;;EAA+B,CAAC;AAEvE,eAAO,MAAM,2BAA2B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA2CtC,CAAC;AAEH,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;iBAa9B,CAAC;AAGH,MAAM,MAAM,qBAAqB,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,2BAA2B,CAAC,CAAC;AAChF,MAAM,MAAM,aAAa,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,mBAAmB,CAAC,CAAC"}

package/esm/src/html/schemas/html.schema.js

@@ -24,6 +24,7 @@ export const HTMLGenerationOptionsSchema = z.object({
     layoutProps: z.record(z.string(), z.record(z.string(), z.unknown())).optional(),
     studioEmbed: z.boolean().optional(),
     projectId: z.string().optional(),
+    projectSlug: z.string().optional(),
     pageId: z.string().optional(),
     sourceHash: z.string().optional(),
     colorScheme: colorSchemeSchema.optional(),
@@ -40,6 +41,7 @@ export const HTMLGenerationOptionsSchema = z.object({
     projectClasses: z.set(z.string()).optional(),
     isLocalProject: z.boolean().optional(),
     noHmr: z.boolean().optional(),
+    forceProductionScripts: z.boolean().optional(),
 });
 export const HydrationDataSchema = z.object({
     slug: z.string(),

package/esm/src/html/styles-builder/css-pregeneration.d.ts

@@ -5,8 +5,9 @@
  * until HTML shell generation during SSR. This runs in parallel with other
  * initialization work, reducing first-request latency by ~2-3 seconds.
  */
+import { type FileSystem } from "../../platform/compat/fs.js";
 import { createPreparedProjectCSSContext } from "./prepared-project-css-cache.js";
-import type { StyleScopeProfile } from "./style-scope-profile.js";
+import { type StyleScopeProfile } from "./style-scope-profile.js";
 interface CSSPregenerationOptions {
     /** Project slug for cache keying */
     projectSlug: string;
@@ -39,7 +40,22 @@ export interface PreparedCSSArtifactBuildResult {
     fromCache: boolean;
     context: ReturnType<typeof createPreparedProjectCSSContext>;
 }
+interface LocalProjectSourceFilesOptions {
+    projectDir: string;
+    styleProfile: StyleScopeProfile;
+    fs?: FileSystem;
+}
 export declare function buildPreparedCSSArtifactFromFiles(options: CSSPregenerationOptions): Promise<PreparedCSSArtifactBuildResult>;
+export declare function collectLocalProjectSourceFiles(options: LocalProjectSourceFilesOptions): Promise<Array<{
+    path: string;
+    content?: string;
+}>>;
+export declare function readLocalProjectStylesheet(projectDir: string, stylesheetPath?: string, fs?: FileSystem): Promise<string | undefined>;
+/**
+ * Trigger prepared CSS generation in the background when the artifact is not
+ * already cached or currently being built.
+ */
+export declare function warmPreparedCSSArtifactFromFiles(options: CSSPregenerationOptions): Promise<boolean>;
 /**
  * Pre-generate and cache CSS from file list.
  *

package/esm/src/html/styles-builder/css-pregeneration.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"css-pregeneration.d.ts","sourceRoot":"","sources":["../../../../src/src/html/styles-builder/css-pregeneration.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAIH,OAAO,EACL,+BAA+B,EAEhC,MAAM,iCAAiC,CAAC;AACzC,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAIlE,UAAU,uBAAuB;IAC/B,oCAAoC;IACpC,WAAW,EAAE,MAAM,CAAC;IACpB,mEAAmE;IACnE,cAAc,EAAE,MAAM,CAAC;IACvB,kDAAkD;IAClD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,4DAA4D;IAC5D,KAAK,EAAE,KAAK,CAAC;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACjD,yDAAyD;IACzD,YAAY,EAAE,iBAAiB,CAAC;IAChC,uDAAuD;IACvD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,wEAAwE;IACxE,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,0CAA0C;IAC1C,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,wEAAwE;IACxE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,2DAA2D;IAC3D,SAAS,CAAC,EAAE,aAAa,GAAG,YAAY,CAAC;CAC1C;AAED,MAAM,WAAW,8BAA8B;IAC7C,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,cAAc,EAAE,MAAM,CAAC;IACvB,SAAS,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,UAAU,CAAC,OAAO,+BAA+B,CAAC,CAAC;CAC7D;AAED,wBAAsB,iCAAiC,CACrD,OAAO,EAAE,uBAAuB,GAC/B,OAAO,CAAC,8BAA8B,CAAC,CA0CzC;AAED;;;;;;;;;;;GAWG;AACH,wBAAsB,uBAAuB,CAC3C,OAAO,EAAE,uBAAuB,GAC/B,OAAO,CAAC,IAAI,CAAC,CAwCf;AAED;;GAEG;AACH,wBAAgB,uBAAuB,CACrC,KAAK,EAAE,KAAK,CAAC;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC,EAChD,cAAc,CAAC,EAAE,MAAM,GACtB,MAAM,GAAG,SAAS,CAUpB;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,oBAAoB,CAClC,KAAK,EAAE,KAAK,CAAC;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC,GAC/C,MAAM,GAAG,SAAS,CAgBpB"}
+{"version":3,"file":"css-pregeneration.d.ts","sourceRoot":"","sources":["../../../../src/src/html/styles-builder/css-pregeneration.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAIH,OAAO,EAAoB,KAAK,UAAU,EAAE,MAAM,6BAA6B,CAAC;AAEhF,OAAO,EACL,+BAA+B,EAGhC,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAGL,KAAK,iBAAiB,EACvB,MAAM,0BAA0B,CAAC;AAMlC,UAAU,uBAAuB;IAC/B,oCAAoC;IACpC,WAAW,EAAE,MAAM,CAAC;IACpB,mEAAmE;IACnE,cAAc,EAAE,MAAM,CAAC;IACvB,kDAAkD;IAClD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,4DAA4D;IAC5D,KAAK,EAAE,KAAK,CAAC;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACjD,yDAAyD;IACzD,YAAY,EAAE,iBAAiB,CAAC;IAChC,uDAAuD;IACvD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,wEAAwE;IACxE,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,0CAA0C;IAC1C,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,wEAAwE;IACxE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,2DAA2D;IAC3D,SAAS,CAAC,EAAE,aAAa,GAAG,YAAY,CAAC;CAC1C;AAED,MAAM,WAAW,8BAA8B;IAC7C,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,cAAc,EAAE,MAAM,CAAC;IACvB,SAAS,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,UAAU,CAAC,OAAO,+BAA+B,CAAC,CAAC;CAC7D;AAED,UAAU,8BAA8B;IACtC,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,iBAAiB,CAAC;IAChC,EAAE,CAAC,EAAE,UAAU,CAAC;CACjB;AAED,wBAAsB,iCAAiC,CACrD,OAAO,EAAE,uBAAuB,GAC/B,OAAO,CAAC,8BAA8B,CAAC,CA0CzC;AAED,wBAAsB,8BAA8B,CAClD,OAAO,EAAE,8BAA8B,GACtC,OAAO,CAAC,KAAK,CAAC;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC,CAAC,CAuCpD;AAED,wBAAsB,0BAA0B,CAC9C,UAAU,EAAE,MAAM,EAClB,cAAc,CAAC,EAAE,MAAM,EACvB,EAAE,GAAE,UAA+B,GAClC,OAAO,CAAC,MAAM,GAAG,SAAS,CAAC,CAoB7B;AAED;;;GAGG;AACH,wBAAsB,gCAAgC,CACpD,OAAO,EAAE,uBAAuB,GAC/B,OAAO,CAAC,OAAO,CAAC,CAwClB;AAED;;;;;;;;;;;GAWG;AACH,wBAAsB,uBAAuB,CAC3C,OAAO,EAAE,uBAAuB,GAC/B,OAAO,CAAC,IAAI,CAAC,CAwCf;AAED;;GAEG;AACH,wBAAgB,uBAAuB,CACrC,KAAK,EAAE,KAAK,CAAC;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC,EAChD,cAAc,CAAC,EAAE,MAAM,GACtB,MAAM,GAAG,SAAS,CAUpB;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,oBAAoB,CAClC,KAAK,EAAE,KAAK,CAAC;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC,GAC/C,MAAM,GAAG,SAAS,CAgBpB"}

package/esm/src/html/styles-builder/css-pregeneration.js

@@ -6,9 +6,14 @@
  * initialization work, reducing first-request latency by ~2-3 seconds.
  */
 import { serverLogger } from "../../utils/index.js";
+import { join } from "../../platform/compat/path/index.js";
+import { createFileSystem } from "../../platform/compat/fs.js";
 import { extractCandidatesFromFiles, getProjectCSS } from "./tailwind-compiler.js";
-import { createPreparedProjectCSSContext, storePreparedProjectCSS, } from "./prepared-project-css-cache.js";
+import { createPreparedProjectCSSContext, storePreparedProjectCSS, tryGetPreparedProjectCSS, } from "./prepared-project-css-cache.js";
+import { shouldIncludeStylePath, shouldTraverseStyleDirectory, } from "./style-scope-profile.js";
 const logger = serverLogger.component("css-pregeneration");
+const inFlightPreparedCSSBuilds = new Map();
+const SOURCE_EXTENSIONS = [".tsx", ".jsx", ".mdx", ".ts", ".js"];
 export async function buildPreparedCSSArtifactFromFiles(options) {
     const { projectSlug, projectVersion, projectDir, files, styleProfile, stylesheet, stylesheetPath, minify = true, environment = "preview", buildMode = "production", } = options;
     const resolvedStylesheet = stylesheet ?? findStylesheetFromFiles(files, stylesheetPath);
@@ -31,6 +36,103 @@ export async function buildPreparedCSSArtifactFromFiles(options) {
         context,
     };
 }
+export async function collectLocalProjectSourceFiles(options) {
+    const fs = options.fs ?? createFileSystem();
+    const files = [];
+    const scanDir = async (directoryPath) => {
+        let entries;
+        try {
+            entries = fs.readDir(directoryPath);
+        }
+        catch {
+            return;
+        }
+        for await (const entry of entries) {
+            const fullPath = join(directoryPath, entry.name);
+            if (entry.isDirectory) {
+                if (shouldTraverseStyleDirectory(options.styleProfile, fullPath, options.projectDir)) {
+                    await scanDir(fullPath);
+                }
+                continue;
+            }
+            if (!entry.isFile)
+                continue;
+            if (!shouldIncludeStylePath(options.styleProfile, fullPath, options.projectDir))
+                continue;
+            if (!SOURCE_EXTENSIONS.some((extension) => entry.name.endsWith(extension)))
+                continue;
+            try {
+                files.push({
+                    path: fullPath,
+                    content: await fs.readTextFile(fullPath),
+                });
+            }
+            catch {
+                // ignore unreadable files during warmup
+            }
+        }
+    };
+    await scanDir(options.projectDir);
+    return files;
+}
+export async function readLocalProjectStylesheet(projectDir, stylesheetPath, fs = createFileSystem()) {
+    const candidatePaths = stylesheetPath ? [stylesheetPath.replace(/^\/+/, "")] : [
+        "globals.css",
+        "global.css",
+        "styles/globals.css",
+        "app/globals.css",
+        "src/globals.css",
+        "src/styles/globals.css",
+    ];
+    for (const relativePath of candidatePaths) {
+        const absolutePath = join(projectDir, relativePath);
+        try {
+            return await fs.readTextFile(absolutePath);
+        }
+        catch {
+            // keep searching
+        }
+    }
+    return undefined;
+}
+/**
+ * Trigger prepared CSS generation in the background when the artifact is not
+ * already cached or currently being built.
+ */
+export async function warmPreparedCSSArtifactFromFiles(options) {
+    const stylesheet = options.stylesheet ??
+        findStylesheetFromFiles(options.files, options.stylesheetPath);
+    const context = createPreparedProjectCSSContext(options.projectSlug, options.projectVersion, stylesheet, options.styleProfile.hash, {
+        minify: options.minify ?? true,
+        environment: options.environment ?? "preview",
+        buildMode: options.buildMode ?? "production",
+    });
+    if (await tryGetPreparedProjectCSS(context))
+        return false;
+    if (inFlightPreparedCSSBuilds.has(context.cacheKey))
+        return false;
+    const task = buildPreparedCSSArtifactFromFiles({
+        ...options,
+        stylesheet,
+    }).then(() => {
+        logger.debug("Warm prepared CSS complete", {
+            projectSlug: options.projectSlug,
+            projectVersion: options.projectVersion,
+            cacheKey: context.cacheKey,
+        });
+    }).catch((error) => {
+        logger.debug("Warm prepared CSS failed", {
+            projectSlug: options.projectSlug,
+            projectVersion: options.projectVersion,
+            cacheKey: context.cacheKey,
+            error: error instanceof Error ? error.message : String(error),
+        });
+    }).finally(() => {
+        inFlightPreparedCSSBuilds.delete(context.cacheKey);
+    });
+    inFlightPreparedCSSBuilds.set(context.cacheKey, task);
+    return true;
+}
 /**
  * Pre-generate and cache CSS from file list.
  *

package/esm/src/html/styles-builder/dev-styles.js

@@ -1,7 +1,7 @@
 import { Z_INDEX_ERROR_OVERLAY } from "../../utils/index.js";
-import { escapeHtml } from "../html-escape.js";
+import { buildNonceAttribute } from "../html-escape.js";
 export function getDevStyles(nonce) {
-    const nonceAttr = nonce ? ` nonce="${escapeHtml(nonce)}"` : "";
+    const nonceAttr = buildNonceAttribute(nonce);
     return `
   <style${nonceAttr}>
     #veryfront-error-overlay {

package/esm/src/html/utils.d.ts

@@ -4,8 +4,10 @@ interface BuildImportMapOptions {
     projectDir?: string;
     config?: VeryfrontConfig;
     customImports?: Record<string, string>;
+    pretty?: boolean;
 }
 export declare function buildImportMapJson(options?: BuildImportMapOptions | Record<string, string>): Promise<string>;
+export declare function clearImportMapCache(): void;
 export declare function shouldDisableLayout(frontmatter?: Record<string, unknown>): boolean;
 export {};
 //# sourceMappingURL=utils.d.ts.map

package/esm/src/html/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/src/html/utils.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAa1D,wBAAgB,mBAAmB,CACjC,IAAI,EAAE,MAAM,EACZ,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,OAAO,EACjB,OAAO,CAAC,EAAE,MAAM,GACf,MAAM,CAQR;AA6MD,UAAU,qBAAqB;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,eAAe,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CACxC;AAQD,wBAAsB,kBAAkB,CACtC,OAAO,CAAC,EAAE,qBAAqB,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GACvD,OAAO,CAAC,MAAM,CAAC,CAwCjB;AAED,wBAAgB,mBAAmB,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,OAAO,CAElF"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/src/html/utils.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAc1D,wBAAgB,mBAAmB,CACjC,IAAI,EAAE,MAAM,EACZ,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,OAAO,EACjB,OAAO,CAAC,EAAE,MAAM,GACf,MAAM,CAQR;AAiND,UAAU,qBAAqB;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,eAAe,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACvC,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAWD,wBAAsB,kBAAkB,CACtC,OAAO,CAAC,EAAE,qBAAqB,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GACvD,OAAO,CAAC,MAAM,CAAC,CA4DjB;AAED,wBAAgB,mBAAmB,IAAI,IAAI,CAE1C;AAED,wBAAgB,mBAAmB,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,OAAO,CAElF"}