veryfront 0.1.26 → 0.1.28

package/esm/src/transforms/css-modules/naming.d.ts

@@ -0,0 +1,33 @@
+/**
+ * CSS Module naming and selector rewriting helpers.
+ *
+ * Provides deterministic class-name scoping that is stable across
+ * transform/runtime boundaries and HTML CSS aggregation.
+ */
+/**
+ * Normalize a module key to a stable slash-based format.
+ * Removes query/hash suffixes and normalizes duplicate separators.
+ */
+export declare function normalizeCssModuleKey(path: string): string;
+/**
+ * Resolve a CSS import specifier to a deterministic module key.
+ * Supports relative imports, @/ aliases, absolute paths, and URLs.
+ */
+export declare function resolveCssModuleKey(specifier: string, importerFilePath: string, projectDir: string): string;
+/**
+ * Build deterministic module scope info.
+ */
+export declare function getCssModuleScope(moduleKey: string): {
+    base: string;
+    hash: string;
+};
+/**
+ * Convert a local class name to its scoped CSS Module class.
+ */
+export declare function toScopedCssModuleClass(moduleKey: string, localName: string): string;
+/**
+ * Rewrite `.module.css` selectors to deterministic scoped class names.
+ * Keeps `:global(...)` segments untouched.
+ */
+export declare function rewriteCssModuleContent(content: string, moduleKey: string): string;
+//# sourceMappingURL=naming.d.ts.map

package/esm/src/transforms/css-modules/naming.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"naming.d.ts","sourceRoot":"","sources":["../../../../src/src/transforms/css-modules/naming.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH;;;GAGG;AACH,wBAAgB,qBAAqB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAQ1D;AA2BD;;;GAGG;AACH,wBAAgB,mBAAmB,CACjC,SAAS,EAAE,MAAM,EACjB,gBAAgB,EAAE,MAAM,EACxB,UAAU,EAAE,MAAM,GACjB,MAAM,CAqBR;AAcD;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,SAAS,EAAE,MAAM,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,CAUnF;AAED;;GAEG;AACH,wBAAgB,sBAAsB,CAAC,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,GAAG,MAAM,CAInF;AAsBD;;;GAGG;AACH,wBAAgB,uBAAuB,CAAC,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,GAAG,MAAM,CAYlF"}

package/esm/src/transforms/css-modules/naming.js

@@ -0,0 +1,128 @@
+/**
+ * CSS Module naming and selector rewriting helpers.
+ *
+ * Provides deterministic class-name scoping that is stable across
+ * transform/runtime boundaries and HTML CSS aggregation.
+ */
+const CSS_MODULE_EXTENSION = ".module.css";
+/**
+ * Normalize a module key to a stable slash-based format.
+ * Removes query/hash suffixes and normalizes duplicate separators.
+ */
+export function normalizeCssModuleKey(path) {
+    const withoutFilePrefix = path.startsWith("file://") ? path.slice("file://".length) : path;
+    const withoutQuery = withoutFilePrefix.replace(/[?#].*$/, "");
+    const slashed = withoutQuery.replace(/\\/g, "/");
+    const collapsed = slashed.replace(/\/{2,}/g, "/");
+    if (collapsed.startsWith("/"))
+        return collapsed;
+    if (collapsed.startsWith("http://") || collapsed.startsWith("https://"))
+        return collapsed;
+    return `/${collapsed.replace(/^\/+/, "")}`;
+}
+function dirname(path) {
+    const normalized = normalizeCssModuleKey(path);
+    const lastSlash = normalized.lastIndexOf("/");
+    return lastSlash <= 0 ? "/" : normalized.slice(0, lastSlash);
+}
+function normalizePathSegments(path) {
+    const normalized = normalizeCssModuleKey(path);
+    if (normalized.startsWith("http://") || normalized.startsWith("https://"))
+        return normalized;
+    const parts = normalized.split("/").filter(Boolean);
+    const resolved = [];
+    for (const part of parts) {
+        if (part === ".")
+            continue;
+        if (part === "..") {
+            resolved.pop();
+            continue;
+        }
+        resolved.push(part);
+    }
+    return `/${resolved.join("/")}`;
+}
+/**
+ * Resolve a CSS import specifier to a deterministic module key.
+ * Supports relative imports, @/ aliases, absolute paths, and URLs.
+ */
+export function resolveCssModuleKey(specifier, importerFilePath, projectDir) {
+    if (specifier.startsWith("http://") || specifier.startsWith("https://")) {
+        return normalizeCssModuleKey(specifier);
+    }
+    if (specifier.startsWith("@/")) {
+        const aliasPath = specifier.slice(2).replace(/^\/+/, "");
+        return normalizePathSegments(`${normalizeCssModuleKey(projectDir)}/${aliasPath}`);
+    }
+    if (specifier.startsWith("/")) {
+        return normalizePathSegments(specifier);
+    }
+    if (specifier.startsWith("./") || specifier.startsWith("../")) {
+        const importerDir = dirname(importerFilePath);
+        return normalizePathSegments(`${importerDir}/${specifier}`);
+    }
+    // Bare specifiers are uncommon for CSS in this system, but keep deterministic behavior.
+    return normalizeCssModuleKey(specifier);
+}
+function hashString(input) {
+    let hash = 5381;
+    for (let i = 0; i < input.length; i++) {
+        hash = ((hash << 5) + hash) ^ input.charCodeAt(i);
+    }
+    return (hash >>> 0).toString(36);
+}
+function sanitizeToken(token) {
+    return token.replace(/[^\w-]/g, "_");
+}
+/**
+ * Build deterministic module scope info.
+ */
+export function getCssModuleScope(moduleKey) {
+    const normalized = normalizeCssModuleKey(moduleKey);
+    const filename = normalized.split("/").pop() || "module";
+    const base = sanitizeToken(filename.endsWith(CSS_MODULE_EXTENSION)
+        ? filename.slice(0, -CSS_MODULE_EXTENSION.length)
+        : filename.replace(/\.css$/, "")) || "module";
+    const hash = hashString(normalized).slice(0, 6);
+    return { base, hash };
+}
+/**
+ * Convert a local class name to its scoped CSS Module class.
+ */
+export function toScopedCssModuleClass(moduleKey, localName) {
+    const { base, hash } = getCssModuleScope(moduleKey);
+    const normalizedLocal = sanitizeToken(localName);
+    return `${base}_${normalizedLocal}__${hash}`;
+}
+function maskGlobalSelectors(css) {
+    const segments = [];
+    const masked = css.replace(/:global\(([^()]*)\)/g, (match) => {
+        const token = `__VF_CSS_GLOBAL_${segments.length}__`;
+        segments.push(match);
+        return token;
+    });
+    return {
+        masked,
+        restore: (input) => {
+            let result = input;
+            for (const [i, segment] of segments.entries()) {
+                result = result.replaceAll(`__VF_CSS_GLOBAL_${i}__`, segment);
+            }
+            return result;
+        },
+    };
+}
+/**
+ * Rewrite `.module.css` selectors to deterministic scoped class names.
+ * Keeps `:global(...)` segments untouched.
+ */
+export function rewriteCssModuleContent(content, moduleKey) {
+    const { masked, restore } = maskGlobalSelectors(content);
+    // After :global() masking, every `.identifier` in the CSS is a local class
+    // selector. No lookbehind needed — numeric decimals like `0.5em` won't
+    // match because digits aren't in [_a-zA-Z].
+    const rewritten = masked.replace(/\.([_a-zA-Z][_a-zA-Z0-9-]*)/g, (_match, className) => {
+        return `.${toScopedCssModuleClass(moduleKey, className)}`;
+    });
+    return restore(rewritten);
+}

package/esm/src/transforms/esm/import-parser.d.ts

@@ -16,6 +16,7 @@ export interface MissingImport {
 }
 export interface ParseLocalImportsResult {
     imports: LocalImport[];
+    cssImports: LocalImport[];
     crossProjectImports: CrossProjectImport[];
     missing: MissingImport[];
 }

package/esm/src/transforms/esm/import-parser.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"import-parser.d.ts","sourceRoot":"","sources":["../../../../src/src/transforms/esm/import-parser.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAC;AAKtE,MAAM,WAAW,WAAW;IAC1B,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,kBAAkB;IACjC,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,aAAa;IAC5B,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,uBAAuB;IACtC,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,mBAAmB,EAAE,kBAAkB,EAAE,CAAC;IAC1C,OAAO,EAAE,aAAa,EAAE,CAAC;CAC1B;AAKD,wBAAsB,iBAAiB,CACrC,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,MAAM,EAChB,UAAU,EAAE,MAAM,EAClB,OAAO,CAAC,EAAE,cAAc,GACvB,OAAO,CAAC,uBAAuB,CAAC,CAwElC"}
+{"version":3,"file":"import-parser.d.ts","sourceRoot":"","sources":["../../../../src/src/transforms/esm/import-parser.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAC;AAKtE,MAAM,WAAW,WAAW;IAC1B,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,kBAAkB;IACjC,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,aAAa;IAC5B,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,uBAAuB;IACtC,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,UAAU,EAAE,WAAW,EAAE,CAAC;IAC1B,mBAAmB,EAAE,kBAAkB,EAAE,CAAC;IAC1C,OAAO,EAAE,aAAa,EAAE,CAAC;CAC1B;AAKD,wBAAsB,iBAAiB,CACrC,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,MAAM,EAChB,UAAU,EAAE,MAAM,EAClB,OAAO,CAAC,EAAE,cAAc,GACvB,OAAO,CAAC,uBAAuB,CAAC,CAiFlC"}

package/esm/src/transforms/esm/import-parser.js

@@ -5,10 +5,10 @@ import { isCrossProjectImport, parseCrossProjectImport } from "./path-resolver.j
 import { parseImports } from "./lexer.js";
 import { getLoaderFromPath } from "./transform-utils.js";
 const EXTENSIONS = [".tsx", ".ts", ".jsx", ".js", ".mdx"];
-const HAS_EXTENSION_RE = /\.(tsx?|jsx?|mjs|cjs|mdx)$/;
+const HAS_EXTENSION_RE = /\.(tsx?|jsx?|mjs|cjs|mdx|css)$/;
 export async function parseLocalImports(code, filePath, projectDir, adapter) {
     if (filePath.endsWith(".css") || filePath.endsWith(".json")) {
-        return { imports: [], crossProjectImports: [], missing: [] };
+        return { imports: [], cssImports: [], crossProjectImports: [], missing: [] };
     }
     const esbuild = await getEsbuild();
     const result = await esbuild.transform(code, {
@@ -24,6 +24,7 @@ export async function parseLocalImports(code, filePath, projectDir, adapter) {
     });
     const imports = await parseImports(result.code);
     const localImports = [];
+    const cssImports = [];
     const crossProjectImports = [];
     const missingImports = [];
     for (const imp of imports) {
@@ -33,7 +34,12 @@ export async function parseLocalImports(code, filePath, projectDir, adapter) {
         if (specifier.startsWith("./") || specifier.startsWith("../")) {
             const resolved = await resolveLocalImportPath(filePath, specifier, adapter);
             if (resolved) {
-                localImports.push({ specifier, absolutePath: resolved });
+                if (resolved.endsWith(".css")) {
+                    cssImports.push({ specifier, absolutePath: resolved });
+                }
+                else {
+                    localImports.push({ specifier, absolutePath: resolved });
+                }
                 continue;
             }
             missingImports.push({
@@ -47,7 +53,12 @@ export async function parseLocalImports(code, filePath, projectDir, adapter) {
             const aliasPath = specifier.slice(2);
             const resolved = await resolveAliasImportPath(aliasPath, projectDir, adapter);
             if (resolved) {
-                localImports.push({ specifier, absolutePath: resolved });
+                if (resolved.endsWith(".css")) {
+                    cssImports.push({ specifier, absolutePath: resolved });
+                }
+                else {
+                    localImports.push({ specifier, absolutePath: resolved });
+                }
                 continue;
             }
             missingImports.push({
@@ -69,7 +80,7 @@ export async function parseLocalImports(code, filePath, projectDir, adapter) {
             path: parsed.path,
         });
     }
-    return { imports: localImports, crossProjectImports, missing: missingImports };
+    return { imports: localImports, cssImports, crossProjectImports, missing: missingImports };
 }
 async function checkFileExists(path, adapter) {
     try {

package/esm/src/transforms/pipeline/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/src/transforms/pipeline/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAYH,OAAO,KAAK,EACV,cAAc,EACd,gBAAgB,EAChB,eAAe,EACf,eAAe,EAChB,MAAM,YAAY,CAAC;AAyIpB,wBAAgB,WAAW,CACzB,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,MAAM,EAChB,UAAU,EAAE,MAAM,EAClB,OAAO,EAAE,gBAAgB,EACzB,MAAM,CAAC,EAAE,cAAc,GACtB,OAAO,CAAC,eAAe,CAAC,CAoI1B;AAoBD,wBAAsB,cAAc,CAClC,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,MAAM,EAChB,UAAU,EAAE,MAAM,EAClB,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,gBAAgB,GACxB,OAAO,CAAC,MAAM,CAAC,CASjB;AAkCD,wBAAgB,iBAAiB,CAAC,GAAG,EAAE,OAAO,GAAG,eAAe,EAAE,CAEjE;AAED,YAAY,EACV,cAAc,EACd,gBAAgB,EAChB,gBAAgB,EAChB,eAAe,EACf,eAAe,EACf,eAAe,GAChB,MAAM,YAAY,CAAC;AAEpB,OAAO,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAE5C,OAAO,EACL,sBAAsB,EACtB,0BAA0B,EAC1B,SAAS,EACT,KAAK,EACL,KAAK,EACL,YAAY,GACb,MAAM,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/src/transforms/pipeline/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAYH,OAAO,KAAK,EACV,cAAc,EACd,gBAAgB,EAChB,eAAe,EACf,eAAe,EAChB,MAAM,YAAY,CAAC;AA4IpB,wBAAgB,WAAW,CACzB,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,MAAM,EAChB,UAAU,EAAE,MAAM,EAClB,OAAO,EAAE,gBAAgB,EACzB,MAAM,CAAC,EAAE,cAAc,GACtB,OAAO,CAAC,eAAe,CAAC,CAoI1B;AAoBD,wBAAsB,cAAc,CAClC,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,MAAM,EAChB,UAAU,EAAE,MAAM,EAClB,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,gBAAgB,GACxB,OAAO,CAAC,MAAM,CAAC,CASjB;AAkCD,wBAAgB,iBAAiB,CAAC,GAAG,EAAE,OAAO,GAAG,eAAe,EAAE,CAEjE;AAED,YAAY,EACV,cAAc,EACd,gBAAgB,EAChB,gBAAgB,EAChB,eAAe,EACf,eAAe,EACf,eAAe,GAChB,MAAM,YAAY,CAAC;AAEpB,OAAO,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAE5C,OAAO,EACL,sBAAsB,EACtB,0BAA0B,EAC1B,SAAS,EACT,KAAK,EACL,KAAK,EACL,YAAY,GACb,MAAM,cAAc,CAAC"}

package/esm/src/transforms/pipeline/index.js

@@ -9,7 +9,7 @@ import { createTransformContext, formatTimingLog, recordStageTiming } from "./co
 import { withSpan } from "../../observability/tracing/otlp-setup.js";
 import { computeConfigHash } from "../../cache/config-hash.js";
 import { computeDepsHash } from "../../cache/dependency-graph.js";
-import { compilePlugin, finalizePlugin, parsePlugin, resolveImportsPlugin, ssrHttpCachePlugin, ssrHttpStubPlugin, ssrVfModulesPlugin, } from "./stages/index.js";
+import { compilePlugin, cssStripPlugin, finalizePlugin, parsePlugin, resolveImportsPlugin, ssrHttpCachePlugin, ssrHttpStubPlugin, ssrVfModulesPlugin, } from "./stages/index.js";
 import { createFileSystem, exists } from "../../platform/compat/fs.js";
 import { ensureHttpBundlesExist } from "../esm/http-cache.js";
 import { extractHttpBundlePaths } from "../../modules/react-loader/ssr-module-loader/http-bundle-helpers.js";
@@ -19,6 +19,7 @@ import { extractFrameworkBundlePaths } from "../shared/framework-bundle-paths.js
 const SSR_PIPELINE = [
     parsePlugin,
     compilePlugin,
+    cssStripPlugin, // Strip CSS imports before they hit import resolution
     resolveImportsPlugin, // Unified import resolution
     ssrVfModulesPlugin, // Resolve /_vf_modules/ to framework files with React transforms
     ssrHttpStubPlugin,
@@ -28,6 +29,7 @@ const SSR_PIPELINE = [
 const BROWSER_PIPELINE = [
     parsePlugin,
     compilePlugin,
+    cssStripPlugin, // Strip CSS imports before they hit import resolution
     resolveImportsPlugin, // Unified import resolution
     finalizePlugin,
 ];

package/esm/src/transforms/pipeline/stages/index.d.ts

@@ -5,6 +5,7 @@
  */
 export { parsePlugin } from "./parse.js";
 export { compilePlugin } from "./compile.js";
+export { cssStripPlugin } from "./ssr-css-strip.js";
 export { resolveImportsPlugin } from "./resolve-imports.js";
 export { ssrVfModulesPlugin } from "./ssr-vf-modules.js";
 export { ssrHttpStubPlugin } from "./ssr-http-stub.js";

package/esm/src/transforms/pipeline/stages/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/src/transforms/pipeline/stages/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AACzC,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAC7C,OAAO,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAC5D,OAAO,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AACzD,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AACvD,OAAO,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AACzD,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/src/transforms/pipeline/stages/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AACzC,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAC7C,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACpD,OAAO,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAC5D,OAAO,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AACzD,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AACvD,OAAO,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AACzD,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC"}

package/esm/src/transforms/pipeline/stages/index.js

@@ -5,6 +5,7 @@
  */
 export { parsePlugin } from "./parse.js";
 export { compilePlugin } from "./compile.js";
+export { cssStripPlugin } from "./ssr-css-strip.js";
 export { resolveImportsPlugin } from "./resolve-imports.js";
 export { ssrVfModulesPlugin } from "./ssr-vf-modules.js";
 export { ssrHttpStubPlugin } from "./ssr-http-stub.js";

package/esm/src/transforms/pipeline/stages/ssr-css-strip.d.ts

@@ -0,0 +1,18 @@
+/**
+ * CSS Strip Stage - removes CSS import statements from compiled code.
+ *
+ * CSS files are not valid JS modules and will crash both the SSR module
+ * loader and browser module system if left in compiled code. This plugin
+ * strips them and records the CSS specifiers in pipeline metadata for
+ * downstream collection (used by the SSR rendering pipeline to include
+ * the CSS content in the HTML output).
+ *
+ * For CSS Module imports (`import styles from "./X.module.css"`), the
+ * import is replaced with a Proxy stub that returns the property name
+ * as the class name. This matches the Next.js convention where
+ * `styles.container` → `"container"` (identity mapping), which works
+ * correctly with Tailwind CSS class-based styling.
+ */
+import type { TransformPlugin } from "../types.js";
+export declare const cssStripPlugin: TransformPlugin;
+//# sourceMappingURL=ssr-css-strip.d.ts.map

package/esm/src/transforms/pipeline/stages/ssr-css-strip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ssr-css-strip.d.ts","sourceRoot":"","sources":["../../../../../src/src/transforms/pipeline/stages/ssr-css-strip.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AA2JnD,eAAO,MAAM,cAAc,EAAE,eA6B5B,CAAC"}

package/esm/src/transforms/pipeline/stages/ssr-css-strip.js

@@ -0,0 +1,168 @@
+/**
+ * CSS Strip Stage - removes CSS import statements from compiled code.
+ *
+ * CSS files are not valid JS modules and will crash both the SSR module
+ * loader and browser module system if left in compiled code. This plugin
+ * strips them and records the CSS specifiers in pipeline metadata for
+ * downstream collection (used by the SSR rendering pipeline to include
+ * the CSS content in the HTML output).
+ *
+ * For CSS Module imports (`import styles from "./X.module.css"`), the
+ * import is replaced with a Proxy stub that returns the property name
+ * as the class name. This matches the Next.js convention where
+ * `styles.container` → `"container"` (identity mapping), which works
+ * correctly with Tailwind CSS class-based styling.
+ */
+import { TransformStage } from "../types.js";
+import { parseImports, rewriteImports } from "../../esm/lexer.js";
+import { getCssModuleScope, resolveCssModuleKey, toScopedCssModuleClass, } from "../../css-modules/naming.js";
+function isCSSImport(specifier) {
+    return specifier?.endsWith(".css") || false;
+}
+function isCssModuleImport(specifier) {
+    return specifier?.endsWith(".module.css") || false;
+}
+function cssModuleProxyExpression() {
+    return "new Proxy({}, { get: (_, p) => String(p) })";
+}
+function scopedCssModuleProxyExpression(moduleKey) {
+    const scope = getCssModuleScope(moduleKey);
+    return `new Proxy({}, { get: (_, p) => typeof p === "string" ? "${scope.base}_" + String(p).replace(/[^\\w-]/g, "_") + "__${scope.hash}" : "" })`;
+}
+function parseNamedImportBindings(namedClause) {
+    const bindings = [];
+    for (const rawPart of namedClause.split(",")) {
+        const part = rawPart.trim();
+        if (!part)
+            continue;
+        const aliasMatch = part.match(/^([_$a-zA-Z][\w$-]*)\s+as\s+([_$a-zA-Z][\w$]*)$/);
+        if (aliasMatch) {
+            const imported = aliasMatch[1];
+            const local = aliasMatch[2];
+            if (!imported || !local)
+                continue;
+            bindings.push({ imported, local });
+            continue;
+        }
+        if (/^[_$a-zA-Z][\w$]*$/.test(part)) {
+            bindings.push({ imported: part, local: part });
+        }
+    }
+    return bindings;
+}
+/**
+ * Generate a replacement for a static CSS import statement.
+ *
+ * - Side-effect import: `import "./globals.css"` → comment
+ * - Default import: `import styles from "./X.module.css"` → Proxy stub
+ * - Named imports: `import { a } from "./X.css"` → null stubs
+ */
+function generateCSSStub(statement, specifier) {
+    const trimmed = statement.trim();
+    // Re-export from CSS: export { default as styles } from './module.css'
+    // → strip entirely, the CSS is collected separately
+    if (/^export\s/.test(trimmed)) {
+        return `/* css re-export stripped: ${specifier} */`;
+    }
+    // Side-effect import: import "./globals.css"
+    if (/^import\s+['"`]/.test(trimmed)) {
+        return `/* css import: ${specifier} */`;
+    }
+    const fromIndex = trimmed.lastIndexOf(" from ");
+    if (fromIndex === -1) {
+        return `/* css import: ${specifier} */`;
+    }
+    const cssModuleKey = isCssModuleImport(specifier) ? specifier : undefined;
+    const importClause = trimmed.slice(6, fromIndex).trim(); // Skip "import "
+    // Default import: import styles from "./Button.module.css"
+    // → const styles = new Proxy({}, { get: (_, p) => String(p) })
+    // This makes styles.container return "container" (identity mapping)
+    if (/^[a-zA-Z_$][a-zA-Z0-9_$]*$/.test(importClause)) {
+        const expr = cssModuleKey
+            ? scopedCssModuleProxyExpression(cssModuleKey)
+            : cssModuleProxyExpression();
+        return `const ${importClause} = ${expr}; /* css module: ${specifier} */`;
+    }
+    // Namespace import: import * as styles from "./X.module.css"
+    const nsMatch = importClause.match(/^\*\s+as\s+([a-zA-Z_$][a-zA-Z0-9_$]*)$/);
+    if (nsMatch) {
+        const expr = cssModuleKey
+            ? scopedCssModuleProxyExpression(cssModuleKey)
+            : cssModuleProxyExpression();
+        return `const ${nsMatch[1]} = ${expr}; /* css module: ${specifier} */`;
+    }
+    // Named imports: import { container, header } from "./X.module.css"
+    const namedMatch = importClause.match(/^\{([^}]+)\}$/);
+    if (namedMatch?.[1]) {
+        const bindings = parseNamedImportBindings(namedMatch[1]);
+        if (bindings.length > 0) {
+            const stubs = bindings
+                .map((binding) => {
+                const value = cssModuleKey
+                    ? toScopedCssModuleClass(cssModuleKey, binding.imported)
+                    : binding.imported;
+                return `${binding.local} = "${value}"`;
+            })
+                .join(", ");
+            return `const ${stubs}; /* css module: ${specifier} */`;
+        }
+    }
+    // Mixed: import styles, { container } from "./X.module.css"
+    const mixedMatch = importClause.match(/^([a-zA-Z_$][a-zA-Z0-9_$]*)\s*,\s*\{([^}]+)\}$/);
+    if (mixedMatch?.[1] && mixedMatch[2]) {
+        const defaultName = mixedMatch[1];
+        const bindings = parseNamedImportBindings(mixedMatch[2]);
+        const namedStubs = bindings
+            .map((binding) => {
+            const value = cssModuleKey
+                ? toScopedCssModuleClass(cssModuleKey, binding.imported)
+                : binding.imported;
+            return `${binding.local} = "${value}"`;
+        })
+            .join(", ");
+        const defaultExpr = cssModuleKey
+            ? scopedCssModuleProxyExpression(cssModuleKey)
+            : cssModuleProxyExpression();
+        return namedStubs.length > 0
+            ? `const ${defaultName} = ${defaultExpr}, ${namedStubs}; /* css module: ${specifier} */`
+            : `const ${defaultName} = ${defaultExpr}; /* css module: ${specifier} */`;
+    }
+    return `/* css import: ${specifier} */`;
+}
+/**
+ * Generate a replacement for dynamic CSS imports.
+ * Keeps syntax valid in expression position (e.g. await import("./x.css")).
+ */
+function generateDynamicCSSStub(specifier) {
+    if (isCssModuleImport(specifier)) {
+        return `Promise.resolve({ default: ${scopedCssModuleProxyExpression(specifier)} }) /* css import: ${specifier} */`;
+    }
+    return `Promise.resolve({}) /* css import: ${specifier} */`;
+}
+export const cssStripPlugin = {
+    name: "css-strip",
+    stage: TransformStage.COMPILE + 0.5, // Run after esbuild compile, before import resolution
+    async transform(ctx) {
+        const imports = await parseImports(ctx.code);
+        const hasCssImports = imports.some((imp) => isCSSImport(imp.n));
+        if (!hasCssImports)
+            return ctx.code;
+        const cssSpecifiers = [];
+        const result = await rewriteImports(ctx.code, (imp, statement) => {
+            if (!isCSSImport(imp.n))
+                return null;
+            cssSpecifiers.push(imp.n);
+            const moduleKey = isCssModuleImport(imp.n)
+                ? resolveCssModuleKey(imp.n, ctx.filePath, ctx.projectDir)
+                : undefined;
+            const specifierForStub = moduleKey ?? imp.n;
+            if (imp.d > -1)
+                return generateDynamicCSSStub(specifierForStub);
+            return generateCSSStub(statement, specifierForStub);
+        });
+        if (cssSpecifiers.length > 0) {
+            ctx.metadata.set("cssImports", cssSpecifiers);
+        }
+        return result;
+    },
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "veryfront",
-  "version": "0.1.26",
+  "version": "0.1.28",
   "description": "The simplest way to build AI-powered apps",
   "keywords": [
     "react",

package/src/cli/app/shell.ts

@@ -98,12 +98,16 @@ export function createApp(config: AppConfig): App {
   }
 
   state = setTemplates([
-    { id: "chat", name: "AI Chatbot", description: "Agent + chat UI + streaming" },
-    { id: "rag", name: "Chat with Docs", description: "RAG with source citations" },
-    { id: "multi-agent", name: "Multi-Agent", description: "Agents that delegate to each other" },
-    { id: "workflow", name: "AI Workflow", description: "Steps + approvals + parallelism" },
+    { id: "ai-agent", name: "AI Chatbot", description: "Agent + chat UI + streaming" },
+    { id: "chat-with-your-docs", name: "Chat with Docs", description: "RAG with source citations" },
+    {
+      id: "multi-agent-system",
+      name: "Multi-Agent",
+      description: "Agents that delegate to each other",
+    },
+    { id: "agentic-workflow", name: "AI Workflow", description: "Steps + approvals + parallelism" },
     { id: "coding-agent", name: "Coding Agent", description: "AI code assistant with file tools" },
-    { id: "saas", name: "AI SaaS", description: "Auth + chat + per-user memory" },
+    { id: "saas-starter", name: "AI SaaS", description: "Auth + chat + per-user memory" },
     { id: "minimal", name: "Minimal", description: "Blank canvas" },
   ])(state);
 

package/src/cli/commands/demo/demo.ts

@@ -329,7 +329,7 @@ async function executeStepAction(
     case "create": {
       await initCommand({
         name: projectName,
-        template: "chat",
+        template: "ai-agent",
         quiet: true,
         skipInstall: true,
         skipEnvPrompt: true,

package/src/cli/commands/init/catalog.ts

@@ -19,16 +19,24 @@ export interface TemplateOption {
 
 export const TEMPLATES: readonly TemplateOption[] = [
   { id: "minimal", label: "Minimal", description: "Blank canvas, no extras" },
-  { id: "chat", label: "AI Chatbot", description: "Agent + chat UI + streaming" },
-  { id: "rag", label: "Chat with Your Docs", description: "RAG with source citations" },
-  { id: "workflow", label: "AI Workflow Pipeline", description: "Steps + approvals + parallelism" },
+  { id: "ai-agent", label: "AI Agent", description: "Agent + chat UI + streaming" },
   {
-    id: "multi-agent",
+    id: "chat-with-your-docs",
+    label: "Chat with Your Docs",
+    description: "RAG with source citations",
+  },
+  {
+    id: "agentic-workflow",
+    label: "Agentic Workflow",
+    description: "Steps + approvals + parallelism",
+  },
+  {
+    id: "multi-agent-system",
     label: "Multi-Agent System",
     description: "Agents that delegate to each other",
   },
   { id: "coding-agent", label: "Coding Agent", description: "AI code assistant with file tools" },
-  { id: "saas", label: "AI SaaS", description: "Auth + chat + per-user memory" },
+  { id: "saas-starter", label: "SaaS Starter", description: "Auth + chat + per-user memory" },
 ] as const;
 
 /** Get templates as SelectOption[] for terminal-select */

package/src/cli/commands/init/command-help.ts

@@ -8,7 +8,7 @@ export const initHelp: CommandHelp = {
     {
       flag: "-t, --template <name>",
       description:
-        "Project template (minimal | chat | rag | workflow | multi-agent | coding-agent | saas)",
+        "Project template (minimal | ai-agent | chat-with-your-docs | agentic-workflow | multi-agent-system | coding-agent | saas-starter)",
     },
     {
       flag: "--integrations <list>",
@@ -38,9 +38,9 @@ export const initHelp: CommandHelp = {
   examples: [
     "veryfront init                              # Interactive wizard",
     "veryfront init my-app",
-    "veryfront init my-app --template chat",
-    "veryfront init my-rag --template rag",
-    "veryfront init my-pipeline --template workflow",
+    "veryfront init my-app --template ai-agent",
+    "veryfront init my-rag --template chat-with-your-docs",
+    "veryfront init my-pipeline --template agentic-workflow",
     "veryfront init my-app --deploy              # Create and deploy",
     "veryfront init --config project.json        # From config file",
   ],

package/src/cli/commands/init/types.ts

@@ -1,12 +1,12 @@
 import type { FeatureName, IntegrationName } from "../../templates/types.js";
 
 export type InitTemplate =
-  | "chat"
-  | "rag"
-  | "multi-agent"
-  | "workflow"
+  | "ai-agent"
+  | "chat-with-your-docs"
+  | "multi-agent-system"
+  | "agentic-workflow"
   | "coding-agent"
-  | "saas"
+  | "saas-starter"
   | "minimal";
 
 export type EnvValues = Record<string, string>;

package/src/cli/commands/serve/command.ts

@@ -37,11 +37,6 @@ async function runProxy(options: ServeOptions): Promise<void> {
   setEnv("PORT", String(options.port));
   setEnv("HOST", options.bindAddress);
 
-  registerTerminationSignals((signal) => {
-    cliLogger.info(`Received ${signal}, shutting down proxy server...`);
-    exitProcess(0);
-  });
-
   // DenoHttpServer.serve() blocks until the server stops,
   // so this import keeps the process alive.
   await import("../../../src/proxy/main.js");

package/src/cli/commands/start/command.ts

@@ -233,22 +233,27 @@ export async function startCommand(options: StartOptions): Promise<void> {
   app.setServerReady();
 
   let shuttingDown = false;
-  async function shutdown(): Promise<void> {
+  async function shutdown(signal: "SIGINT" | "SIGTERM"): Promise<void> {
     if (shuttingDown) return;
     shuttingDown = true;
 
     restoreConsole();
-    cliLogger.info("Shutting down...");
-
-    app.stop();
-    await mcpServer.stop();
-    shutdownController.abort();
-    await server.stop();
-    await proxy.close();
-    exitProcess(0);
+    cliLogger.info(`Received ${signal}, shutting down...`);
+
+    try {
+      app.stop();
+      await mcpServer.stop();
+      shutdownController.abort();
+      await server.stop();
+      await proxy.close();
+    } catch (error) {
+      cliLogger.warn("Error while shutting down start command:", error);
+    } finally {
+      exitProcess(0);
+    }
   }
 
-  registerTerminationSignals(() => void shutdown());
+  registerTerminationSignals((signal) => shutdown(signal));
   app.start();
 
   await new Promise(() => {});