veryfront 0.1.124 → 0.1.127

package/esm/src/transforms/mdx/esm-module-loader/import-transformer.js

@@ -143,7 +143,7 @@ export async function transformJsxImports(code, adapter, esmCacheDir) {
             // Rewrite _dnt.polyfills.js / _dnt.shims.js relative imports to absolute file:// paths.
             // Framework files from the npm package contain relative dnt imports that resolve
             // incorrectly when cached to a different directory.
-            transformed = rewriteDntImports(transformed, filePath);
+            transformed = await rewriteDntImports(transformed, filePath);
             await getLocalFs().writeTextFile(transformedPath, transformed);
             return {
                 original: fullMatch,

package/esm/src/transforms/mdx/esm-module-loader/jsx-cache.js

@@ -17,7 +17,7 @@ export async function ensureCachedJsxModulePatched(transformedPath, sourceFilePa
     const fs = getLocalFs();
     try {
         const cachedCode = await fs.readTextFile(transformedPath);
-        const rewritten = rewriteDntImports(cachedCode, sourceFilePath);
+        const rewritten = await rewriteDntImports(cachedCode, sourceFilePath);
         if (rewritten === cachedCode)
             return true;
         await fs.writeTextFile(transformedPath, rewritten);

package/esm/src/transforms/mdx/esm-module-loader/module-fetcher/import-rewriter.d.ts

@@ -8,18 +8,5 @@
  * Uses deno.json exports/imports as the source of truth and appends ?ssr=true.
  */
 export declare function rewriteVeryfrontImports(code: string): string;
-/**
- * Rewrite relative imports in framework files to absolute file:// paths.
- *
- * Framework files from the npm package (e.g., Head.js) contain relative imports like:
- *   import "../../../_dnt.polyfills.js"
- *   import { collectHead } from "../head-collector.js"
- *
- * These resolve correctly when loaded from the npm package directory, but break when
- * the transformed code is cached to a different directory (e.g., /app/.cache/veryfront-mdx-esm/...).
- * The relative path would resolve to /app/.cache/head-collector.js which doesn't exist.
- *
- * Fix: Replace ALL relative imports with absolute file:// paths resolved from the source file's directory.
- */
-export declare function rewriteDntImports(code: string, sourceFilePath: string): string;
+export declare function rewriteDntImports(code: string, sourceFilePath: string): Promise<string>;
 //# sourceMappingURL=import-rewriter.d.ts.map

package/esm/src/transforms/mdx/esm-module-loader/module-fetcher/import-rewriter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"import-rewriter.d.ts","sourceRoot":"","sources":["../../../../../../src/src/transforms/mdx/esm-module-loader/module-fetcher/import-rewriter.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAMH;;;GAGG;AACH,wBAAgB,uBAAuB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAM5D;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,MAAM,EAAE,cAAc,EAAE,MAAM,GAAG,MAAM,CA8B9E"}
+{"version":3,"file":"import-rewriter.d.ts","sourceRoot":"","sources":["../../../../../../src/src/transforms/mdx/esm-module-loader/module-fetcher/import-rewriter.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAOH;;;GAGG;AACH,wBAAgB,uBAAuB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAM5D;AAwCD,wBAAsB,iBAAiB,CAAC,IAAI,EAAE,MAAM,EAAE,cAAc,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC,CA8C7F"}

package/esm/src/transforms/mdx/esm-module-loader/module-fetcher/import-rewriter.js

@@ -6,6 +6,7 @@
 import { dirname, join, resolve } from "../../../../platform/compat/path/index.js";
 import { FRAMEWORK_ROOT } from "../constants.js";
 import { resolveVeryfrontModuleUrl } from "../../../veryfront-module-urls.js";
+import { getLocalFs } from "../cache/index.js";
 /**
  * Rewrite veryfront/* imports to /_vf_modules/_veryfront/ paths for MDX module loading.
  * Uses deno.json exports/imports as the source of truth and appends ?ssr=true.
@@ -31,7 +32,27 @@ export function rewriteVeryfrontImports(code) {
  *
  * Fix: Replace ALL relative imports with absolute file:// paths resolved from the source file's directory.
  */
-export function rewriteDntImports(code, sourceFilePath) {
+async function findExistingFrameworkRelativeTarget(absolutePath) {
+    const fs = getLocalFs();
+    const candidates = [absolutePath, `${absolutePath}.src`];
+    if (absolutePath.endsWith(".js") || absolutePath.endsWith(".mjs")) {
+        const stem = absolutePath.replace(/\.(?:m?js)$/, "");
+        for (const ext of [".ts", ".tsx", ".jsx", ".js", ".mjs"]) {
+            candidates.push(`${stem}${ext}.src`, `${stem}${ext}`);
+        }
+    }
+    for (const candidate of candidates) {
+        try {
+            await fs.stat(candidate);
+            return candidate;
+        }
+        catch {
+            /* expected: candidate may not exist */
+        }
+    }
+    return null;
+}
+export async function rewriteDntImports(code, sourceFilePath) {
     // Only needed for framework files that come from the npm package.
     // IMPORTANT: Use FRAMEWORK_ROOT + "src/" or dist/framework-src to avoid matching project source files
     // that live under FRAMEWORK_ROOT (e.g., projects/myproject/components/...).
@@ -46,11 +67,32 @@ export function rewriteDntImports(code, sourceFilePath) {
         return code;
     }
     const sourceDir = dirname(sourceFilePath);
-    return code.replace(/from\s*["'](\.\.?\/[^"']+)["']/g, (_match, relativePath) => {
-        const absolutePath = resolve(sourceDir, relativePath);
-        return `from "file://${absolutePath}"`;
-    }).replace(/import\s*["'](\.\.?\/[^"']+)["']/g, (_match, relativePath) => {
-        const absolutePath = resolve(sourceDir, relativePath);
-        return `import "file://${absolutePath}"`;
-    });
+    const needsFrameworkSourceFallback = sourceFilePath.startsWith(frameworkSrcRoot) ||
+        sourceFilePath.startsWith(embeddedSrcRoot);
+    let rewritten = code;
+    const patterns = [
+        {
+            regex: /from\s*["'](\.\.?\/[^"']+)["']/g,
+            buildReplacement: (path) => `from "file://${path}"`,
+        },
+        {
+            regex: /import\s*["'](\.\.?\/[^"']+)["']/g,
+            buildReplacement: (path) => `import "file://${path}"`,
+        },
+    ];
+    for (const { regex, buildReplacement } of patterns) {
+        const matches = [...rewritten.matchAll(regex)];
+        for (const match of matches) {
+            const original = match[0];
+            const relativePath = match[1];
+            if (!relativePath)
+                continue;
+            const absolutePath = resolve(sourceDir, relativePath);
+            const resolvedPath = needsFrameworkSourceFallback
+                ? await findExistingFrameworkRelativeTarget(absolutePath) ?? absolutePath
+                : absolutePath;
+            rewritten = rewritten.replace(original, buildReplacement(resolvedPath));
+        }
+    }
+    return rewritten;
 }

package/esm/src/transforms/mdx/esm-module-loader/module-fetcher/index.js

@@ -244,7 +244,7 @@ async function doFetchAndCacheModule(normalizedPath, context, fetchAndCacheModul
                 outputLength: moduleCode.length,
             });
             // Rewrite _dnt.polyfills.js / _dnt.shims.js relative imports to absolute file:// paths
-            moduleCode = rewriteDntImports(moduleCode, actualFilePath);
+            moduleCode = await rewriteDntImports(moduleCode, actualFilePath);
             // Cache HTTP imports (esm.sh URLs) to local file:// paths.
             // This ensures the same cache works for both compiled and non-compiled Deno.
             // Compiled binaries cannot do dynamic HTTP imports, but non-compiled Deno

package/esm/src/transforms/pipeline/stages/ssr-vf-modules/path-resolver.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"path-resolver.d.ts","sourceRoot":"","sources":["../../../../../../src/src/transforms/pipeline/stages/ssr-vf-modules/path-resolver.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,gBAAgB,EAAU,MAAM,mCAAmC,CAAC;AAY7E,wBAAsB,qBAAqB,CACzC,EAAE,EAAE,UAAU,CAAC,OAAO,gBAAgB,CAAC,EACvC,QAAQ,EAAE,MAAM,EAChB,QAAQ,GAAE,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,OAAO,CAAU,GACpD,OAAO,CAAC;IAAE,UAAU,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CAAC,CAmBzD;AAED;;GAEG;AACH,wBAAsB,oBAAoB,CACxC,YAAY,EAAE,MAAM,EACpB,EAAE,EAAE,UAAU,CAAC,OAAO,gBAAgB,CAAC,EACvC,QAAQ,GAAE,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,OAAO,CAAU,GACpD,OAAO,CAAC;IAAE,UAAU,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CAAC,CA6DzD;AAED;;;;;;;GAOG;AACH,wBAAsB,0BAA0B,CAC9C,SAAS,EAAE,MAAM,EACjB,QAAQ,GAAE,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,OAAO,CAAU,GACpD,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,CAkExB;AAED;;;;;;GAMG;AACH,wBAAsB,8BAA8B,CAClD,SAAS,EAAE,MAAM,EACjB,cAAc,EAAE,MAAM,EACtB,GAAG,EAAE,UAAU,CAAC,OAAO,gBAAgB,CAAC,EACxC,QAAQ,GAAE,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,OAAO,CAAU,GACpD,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,CAiExB"}
+{"version":3,"file":"path-resolver.d.ts","sourceRoot":"","sources":["../../../../../../src/src/transforms/pipeline/stages/ssr-vf-modules/path-resolver.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,gBAAgB,EAAU,MAAM,mCAAmC,CAAC;AAY7E,wBAAsB,qBAAqB,CACzC,EAAE,EAAE,UAAU,CAAC,OAAO,gBAAgB,CAAC,EACvC,QAAQ,EAAE,MAAM,EAChB,QAAQ,GAAE,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,OAAO,CAAU,GACpD,OAAO,CAAC;IAAE,UAAU,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CAAC,CAmBzD;AAED;;GAEG;AACH,wBAAsB,oBAAoB,CACxC,YAAY,EAAE,MAAM,EACpB,EAAE,EAAE,UAAU,CAAC,OAAO,gBAAgB,CAAC,EACvC,QAAQ,GAAE,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,OAAO,CAAU,GACpD,OAAO,CAAC;IAAE,UAAU,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CAAC,CA6DzD;AAED;;;;;;;GAOG;AACH,wBAAsB,0BAA0B,CAC9C,SAAS,EAAE,MAAM,EACjB,QAAQ,GAAE,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,OAAO,CAAU,GACpD,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,CAkExB;AAED;;;;;;GAMG;AACH,wBAAsB,8BAA8B,CAClD,SAAS,EAAE,MAAM,EACjB,cAAc,EAAE,MAAM,EACtB,GAAG,EAAE,UAAU,CAAC,OAAO,gBAAgB,CAAC,EACxC,QAAQ,GAAE,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,OAAO,CAAU,GACpD,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,CAqExB"}

package/esm/src/transforms/pipeline/stages/ssr-vf-modules/path-resolver.js

@@ -184,26 +184,27 @@ export async function resolveRelativeFrameworkImport(specifier, fromSourcePath,
     // If specifier already has extension (e.g., ./Head.tsx), we need to try:
     // 1. The exact path (basePath)
     // 2. The path with .src suffix (basePath.src) for embedded sources
-    // 3. Fall back to extension probing
+    // 3. For transpiled .js/.mjs imports, fall back to sibling TS/TSX/JSX sources
     if (/\.(tsx?|jsx?|mjs)$/.test(specifier)) {
-        // Try exact path first
-        try {
-            if (await existsFn(basePath))
-                return basePath;
-        }
-        catch (_) {
-            /* expected: file may not exist at this path */
-        }
-        // Try with .src suffix for embedded sources
-        try {
-            const srcPath = basePath + ".src";
-            if (await existsFn(srcPath))
-                return srcPath;
+        const explicitCandidates = [basePath, `${basePath}.src`];
+        // esbuild rewrites TS/TSX relative imports to .js in transformed output.
+        // When the original source only exists as .ts/.tsx (or embedded .src),
+        // probe those sibling source extensions before giving up.
+        if (basePath.endsWith(".js") || basePath.endsWith(".mjs")) {
+            const stem = basePath.replace(/\.(?:m?js)$/, "");
+            for (const ext of [".ts", ".tsx", ".jsx", ".js", ".mjs"]) {
+                explicitCandidates.push(`${stem}${ext}.src`, `${stem}${ext}`);
+            }
         }
-        catch (_) {
-            /* expected: file may not exist at this path */
+        for (const candidate of explicitCandidates) {
+            try {
+                if (await existsFn(candidate))
+                    return candidate;
+            }
+            catch (_) {
+                /* expected: file may not exist at this path */
+            }
         }
-        // Not found with explicit extension
         return null;
     }
     // No extension provided - try all extensions (including .src for embedded sources)

package/esm/src/utils/version-constant.d.ts

@@ -1,2 +1,2 @@
-export declare const VERSION = "0.1.124";
+export declare const VERSION = "0.1.127";
 //# sourceMappingURL=version-constant.d.ts.map

package/esm/src/utils/version-constant.js

@@ -1,3 +1,3 @@
 // Keep in sync with deno.json version.
 // scripts/release.ts updates this constant during releases.
-export const VERSION = "0.1.124";
+export const VERSION = "0.1.127";

package/package.json

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

package/src/deno.js

@@ -1,6 +1,6 @@
 export default {
   "name": "veryfront",
-  "version": "0.1.124",
+  "version": "0.1.127",
   "license": "Apache-2.0",
   "nodeModulesDir": "auto",
   "exclude": [

package/src/src/html/hydration-script-builder/templates/router.ts

@@ -42,6 +42,13 @@ export const getRouterScript = () => `
     const log = DEBUG ? console.log.bind(console, '[Veryfront]') : () => {};
     const logError = console.error.bind(console, '[Veryfront]');
 
+    function getDocumentNonce() {
+      const element = document.querySelector('script[nonce], style[nonce], link[nonce]');
+      if (!element) return undefined;
+
+      return element.nonce || element.getAttribute('nonce') || undefined;
+    }
+
     // ============================================
     // Version tracking for cache invalidation
     // ============================================
@@ -417,6 +424,8 @@ export const getRouterScript = () => `
           existingStyle.textContent = pageData.css;
         } else {
           const styleEl = document.createElement('style');
+          const nonce = getDocumentNonce();
+          if (nonce) styleEl.setAttribute('nonce', nonce);
           styleEl.id = 'veryfront-spa-css';
           styleEl.textContent = pageData.css;
           document.head.appendChild(styleEl);

package/src/src/react/components/Head.tsx

@@ -25,6 +25,7 @@ import "../../../_dnt.polyfills.js";
 import React, { useEffect, useRef } from "react";
 import { collectHead } from "../head-collector.js";
 import { isServerEnvironment } from "../../platform/compat/runtime.js";
+import { getDocumentNonce } from "./ai/csp-nonce.js";
 
 export function Head({ children }: { children: React.ReactNode }): React.ReactElement {
   const mountedRef = useRef(false);
@@ -94,6 +95,7 @@ export function Head({ children }: { children: React.ReactNode }): React.ReactEl
     if (!children) return;
 
     const addedElements: Element[] = [];
+    const nonce = getDocumentNonce();
 
     React.Children.forEach(children, (child) => {
       if (!React.isValidElement(child)) return;
@@ -109,6 +111,9 @@ export function Head({ children }: { children: React.ReactNode }): React.ReactEl
       }
 
       const element = document.createElement(type);
+      if ((type === "style" || type === "script") && !props.nonce && nonce) {
+        element.setAttribute("nonce", nonce);
+      }
 
       // For scripts, check if already SSR'd via <Head> to avoid double execution
       if (type === "script") {

package/src/src/react/components/ai/chat/composition/chat-root.tsx

@@ -11,6 +11,7 @@ import * as React from "react";
 import { ChatContainer } from "../../../../primitives/index.js";
 import type { UIMessage } from "../../../../../agent/react/index.js";
 import type { ChatTheme } from "../../theme.js";
+import { getDocumentNonce } from "../../csp-nonce.js";
 import { cn, defaultChatTheme, generateTokenCSS, mergeThemes } from "../../theme.js";
 import type { ModelOption } from "../../model-selector.js";
 import type { AttachmentInfo } from "../components/attachment-pill.js";
@@ -97,6 +98,7 @@ export const ChatRoot = React.forwardRef<HTMLDivElement, ChatRootProps>(
     ref,
   ) {
     const theme = React.useMemo(() => mergeThemes(defaultChatTheme, userTheme), [userTheme]);
+    const nonce = getDocumentNonce();
     const tokenCSS = React.useMemo(() => generateTokenCSS(), []);
     const [isAtBottom, _setIsAtBottom] = React.useState(true);
     const scrollAreaRef = React.useRef<HTMLDivElement>(null);
@@ -164,7 +166,7 @@ export const ChatRoot = React.forwardRef<HTMLDivElement, ChatRootProps>(
 
     return (
       <ChatContextProvider value={contextValue}>
-        <style dangerouslySetInnerHTML={{ __html: tokenCSS }} />
+        <style nonce={nonce} dangerouslySetInnerHTML={{ __html: tokenCSS }} />
         <ChatContainer
           ref={ref}
           data-vf-chat=""

package/src/src/react/components/ai/chat-with-sidebar.tsx

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { getDocumentNonce } from "./csp-nonce.js";
 import { cn, generateTokenCSS } from "./theme.js";
 import { Chat, type ChatProps } from "./chat/index.js";
 import { ChatSidebar } from "./chat/components/sidebar.js";
@@ -142,6 +143,7 @@ export const ChatWithSidebar = React.forwardRef<HTMLDivElement, ChatWithSidebarP
     },
     ref,
   ): React.ReactElement {
+    const nonce = getDocumentNonce();
     const storageKey = sidebar?.storageKey;
     const controlledOpen = sidebar?.open;
     const onSidebarToggle = sidebar?.onToggle;
@@ -320,7 +322,7 @@ export const ChatWithSidebar = React.forwardRef<HTMLDivElement, ChatWithSidebarP
         className={cn("flex h-full bg-[var(--background)]", className)}
         data-vf-chat=""
       >
-        <style dangerouslySetInnerHTML={{ __html: tokenCSS }} />
+        <style nonce={nonce} dangerouslySetInnerHTML={{ __html: tokenCSS }} />
         {sidebarOpen && (
           <ChatSidebar
             threads={threads}

package/src/src/react/components/ai/csp-nonce.ts

@@ -0,0 +1,13 @@
+/**
+ * Reuse the server-issued CSP nonce for client-created style/script elements
+ * during hydration and SPA updates.
+ */
+export function getDocumentNonce(): string | undefined {
+  if (typeof document === "undefined") return undefined;
+
+  const element = document.querySelector<HTMLElement>("script[nonce], style[nonce], link[nonce]");
+  if (!element) return undefined;
+
+  const nonce = element.nonce || element.getAttribute("nonce") || "";
+  return nonce || undefined;
+}

package/src/src/security/http/response/security-handler.ts

@@ -20,9 +20,16 @@ export function generateNonce(): string {
  *
  * - Scripts: nonce-based + cdn.jsdelivr.net + esm.sh (Scalar API docs,
  *   html2canvas, legacy/browser ESM hydration)
- * - Styles: 'self' + 'unsafe-inline' + nonce + Google Fonts + cdn.veryfront.com
- *   plus style-src-attr 'unsafe-inline' so React style="" attributes remain
- *   compatible while inline <style> tags continue to use the nonce
+ * - Styles:
+ *   - style-src: 'self' + 'unsafe-inline' + Google Fonts + cdn.veryfront.com
+ *     so React style="" attributes and framework inline styles remain
+ *     compatible. Do not include a nonce in style-src here: browsers ignore
+ *     'unsafe-inline' when a nonce/hash is present on the directive, which
+ *     breaks React style attributes.
+ *   - style-src-elem: nonce-based + Google Fonts + cdn.veryfront.com for
+ *     inline <style> tags and stylesheet elements
+ *   - style-src-attr: 'unsafe-inline' for modern browsers with directive-level
+ *     style attribute support
  * - Images/media/fonts: 'self' + data: + https: + cdn.veryfront.com
  * - Connections: 'self' + wss: + https: (WebSocket for HMR/live reload, API calls)
  * - Objects: 'none' (block Flash/plugins)
@@ -35,7 +42,8 @@ function buildDefaultCSP(nonce: string): string {
   return [
     `default-src 'self'`,
     `script-src 'self' 'nonce-${nonce}' https://cdn.jsdelivr.net https://esm.sh`,
-    `style-src 'self' 'unsafe-inline' 'nonce-${nonce}' https://fonts.googleapis.com https://cdn.veryfront.com`,
+    `style-src 'self' 'unsafe-inline' https://fonts.googleapis.com https://cdn.veryfront.com`,
+    `style-src-elem 'self' 'nonce-${nonce}' https://fonts.googleapis.com https://cdn.veryfront.com`,
     `style-src-attr 'unsafe-inline'`,
     `img-src 'self' data: https:`,
     `font-src 'self' data: https://fonts.gstatic.com https://cdn.veryfront.com`,