@cloudwerk/vite-plugin 0.6.2 → 0.6.5

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import { Plugin } from 'vite';
-import { CloudwerkConfig, RouteManifest, ScanResult, QueueManifest, ServiceManifest } from '@cloudwerk/core/build';
+import { CloudwerkConfig, QueueManifest, ServiceManifest, AuthManifest, RouteManifest, ScanResult } from '@cloudwerk/core/build';
 
 /**
  * @cloudwerk/vite-plugin - Types
@@ -96,6 +96,17 @@ interface ClientComponentInfo {
     /** Absolute file path */
     absolutePath: string;
 }
+/**
+ * Information about a CSS import detected in a layout or page.
+ */
+interface CssImportInfo {
+    /** Absolute path to the CSS file */
+    absolutePath: string;
+    /** File that imports the CSS */
+    importedBy: string;
+    /** Whether the importing file is a layout */
+    isLayout: boolean;
+}
 /**
  * Virtual module IDs used by the plugin.
  */
@@ -150,6 +161,20 @@ declare function cloudwerkPlugin(options?: CloudwerkVitePluginOptions): Plugin;
  * a Hono app with all routes registered from the file-based routing manifest.
  */
 
+/**
+ * Asset manifest entry from Vite build.
+ */
+interface AssetManifestEntry {
+    file: string;
+    css?: string[];
+    assets?: string[];
+    isEntry?: boolean;
+    isDynamicEntry?: boolean;
+}
+/**
+ * Asset manifest from Vite build (maps source to output files).
+ */
+type AssetManifest = Record<string, AssetManifestEntry>;
 /**
  * Options for generating server entry.
  */
@@ -158,6 +183,12 @@ interface GenerateServerEntryOptions {
     queueManifest?: QueueManifest | null;
     /** Service manifest if services are configured */
     serviceManifest?: ServiceManifest | null;
+    /** Asset manifest from Vite build for CSS injection */
+    assetManifest?: AssetManifest | null;
+    /** Auth manifest if auth providers are configured */
+    authManifest?: AuthManifest | null;
+    /** CSS imports from layouts/pages (for dev mode injection) */
+    cssImports?: Map<string, CssImportInfo[]>;
 }
 /**
  * Generate the server entry module code.
@@ -187,14 +218,16 @@ declare function generateServerEntry(manifest: RouteManifest, scanResult: ScanRe
  * Generate the client entry module code.
  *
  * This creates a hydration bootstrap that:
+ * - Imports CSS files from layouts and pages
  * - Finds all elements with data-hydrate-id attributes
  * - Dynamically imports the corresponding component bundles
  * - Hydrates each component with its serialized props
  *
  * @param clientComponents - Map of detected client components
+ * @param cssImports - Map of CSS imports from layouts and pages
  * @param options - Resolved plugin options
  * @returns Generated JavaScript code
  */
-declare function generateClientEntry(clientComponents: Map<string, ClientComponentInfo>, options: ResolvedCloudwerkOptions): string;
+declare function generateClientEntry(clientComponents: Map<string, ClientComponentInfo>, cssImports: Map<string, CssImportInfo[]>, options: ResolvedCloudwerkOptions): string;
 
-export { type ClientComponentInfo, type CloudwerkVitePluginOptions, RESOLVED_VIRTUAL_IDS, type ResolvedCloudwerkOptions, VIRTUAL_MODULE_IDS, cloudwerkPlugin, cloudwerkPlugin as default, generateClientEntry, generateServerEntry };
+export { type AssetManifest, type AssetManifestEntry, type ClientComponentInfo, type CloudwerkVitePluginOptions, type CssImportInfo, type GenerateServerEntryOptions, RESOLVED_VIRTUAL_IDS, type ResolvedCloudwerkOptions, VIRTUAL_MODULE_IDS, cloudwerkPlugin, cloudwerkPlugin as default, generateClientEntry, generateServerEntry };

package/dist/index.js

@@ -19,7 +19,13 @@ import {
   scanServices,
   buildServiceManifest,
   SERVICES_DIR,
-  SERVICE_FILE_NAME
+  SERVICE_FILE_NAME,
+  scanImages,
+  buildImageManifest,
+  IMAGES_DIR,
+  scanAuth,
+  buildAuthManifestWithModules,
+  AUTH_DIR
 } from "@cloudwerk/core/build";
 
 // src/types.ts
@@ -39,6 +45,8 @@ import * as path from "path";
 function generateServerEntry(manifest, scanResult, options, entryOptions) {
   const queueManifest = entryOptions?.queueManifest;
   const serviceManifest = entryOptions?.serviceManifest;
+  const assetManifest = entryOptions?.assetManifest;
+  const authManifest = entryOptions?.authManifest;
   const imports = [];
   const pageRegistrations = [];
   const routeRegistrations = [];
@@ -57,6 +65,10 @@ function generateServerEntry(manifest, scanResult, options, entryOptions) {
   let middlewareIndex = 0;
   let errorIndex = 0;
   let notFoundIndex = 0;
+  const rootMiddleware = scanResult.middleware.find(
+    (m) => m.relativePath === "middleware.ts" || m.relativePath === "middleware.tsx"
+  );
+  let rootMiddlewareVarName = null;
   const ssgPageInfo = [];
   for (const err of scanResult.errors) {
     if (!importedModules.has(err.absolutePath)) {
@@ -88,6 +100,12 @@ function generateServerEntry(manifest, scanResult, options, entryOptions) {
     const varName = notFoundModules.get(nf.absolutePath);
     notFoundBoundaryMapEntries.push(`  ['${normalizedDir}', ${varName}]`);
   }
+  if (rootMiddleware) {
+    rootMiddlewareVarName = `middleware_${middlewareIndex++}`;
+    middlewareImports.push(`import { middleware as ${rootMiddlewareVarName} } from '${rootMiddleware.absolutePath}'`);
+    middlewareModules.set(rootMiddleware.absolutePath, rootMiddlewareVarName);
+    importedModules.add(rootMiddleware.absolutePath);
+  }
   for (const route of manifest.routes) {
     for (const middlewarePath of route.middleware) {
       if (!importedModules.has(middlewarePath)) {
@@ -138,7 +156,40 @@ function generateServerEntry(manifest, scanResult, options, entryOptions) {
     }
   }
   const rendererName = options.renderer;
-  const clientEntryPath = options.isProduction ? `${options.hydrationEndpoint}/client.js` : "/@id/__x00__virtual:cloudwerk/client-entry";
+  let clientEntryPath = "/@id/__x00__virtual:cloudwerk/client-entry";
+  if (options.isProduction && assetManifest) {
+    const clientEntry = assetManifest["virtual:cloudwerk/client-entry"];
+    if (clientEntry?.file) {
+      clientEntryPath = `/${clientEntry.file}`;
+    } else {
+      clientEntryPath = `${options.hydrationEndpoint}/client.js`;
+    }
+  } else if (options.isProduction) {
+    clientEntryPath = `${options.hydrationEndpoint}/client.js`;
+  }
+  let cssLinksCode = "";
+  if (options.isProduction && assetManifest) {
+    const clientEntry = assetManifest["virtual:cloudwerk/client-entry"];
+    if (clientEntry?.css && clientEntry.css.length > 0) {
+      const cssLinks = clientEntry.css.map((css) => `<link rel="stylesheet" href="/${css}" />`).join("");
+      cssLinksCode = `const CSS_LINKS = '${cssLinks}'`;
+    }
+  } else if (!options.isProduction && entryOptions?.cssImports) {
+    const allCss = /* @__PURE__ */ new Set();
+    for (const imports2 of entryOptions.cssImports.values()) {
+      for (const info of imports2) {
+        allCss.add(info.absolutePath);
+      }
+    }
+    if (allCss.size > 0) {
+      const cssLinks = Array.from(allCss).map((css) => `<link rel="stylesheet" href="/@fs${css}" />`).join("");
+      cssLinksCode = `const CSS_LINKS = '${cssLinks}'`;
+    }
+  }
+  if (!cssLinksCode) {
+    cssLinksCode = `const CSS_LINKS = ''`;
+  }
+  const viteClientScript = options.isProduction ? "" : '<script type="module" src="/@vite/client"></script>';
   return `/**
  * Generated Cloudwerk Server Entry
  * This file is auto-generated by @cloudwerk/vite-plugin - do not edit
@@ -176,6 +227,16 @@ const notFoundBoundaryMap = new Map([
 ${notFoundBoundaryMapEntries.join(",\n")}
 ])
 
+// ============================================================================
+// Asset Injection Configuration
+// ============================================================================
+
+// CSS links from asset manifest (production) or empty (dev - CSS served by Vite)
+${cssLinksCode}
+
+// Vite client script for HMR (dev only)
+const VITE_CLIENT = '${viteClientScript}'
+
 // ============================================================================
 // Helper Functions
 // ============================================================================
@@ -395,20 +456,34 @@ function registerPage(app, pattern, pageModule, layoutModules, middlewareModules
 }
 
 /**
- * Render element to a Response, injecting hydration script before </body>.
+ * Render element to a Response, injecting CSS and scripts.
+ * - CSS links are injected before </head>
+ * - Vite client (dev) and hydration script are injected before </body>
  */
 function renderWithHydration(element, status = 200) {
   // Hono JSX elements have toString() for synchronous rendering
-  const html = '<!DOCTYPE html>' + String(element)
+  let html = '<!DOCTYPE html>' + String(element)
+
+  // Inject CSS links before </head> if present
+  if (CSS_LINKS) {
+    const headCloseRegex = /<\\/head>/i
+    if (headCloseRegex.test(html)) {
+      html = html.replace(headCloseRegex, CSS_LINKS + '</head>')
+    }
+  }
 
-  // Inject hydration script before </body> if it exists (case-insensitive for HTML compat)
-  const hydrationScript = '<script type="module" src="${clientEntryPath}"></script>'
+  // Inject scripts before </body>
+  // - Vite client for HMR (dev only)
+  // - Hydration script for client components
+  const scripts = VITE_CLIENT + '<script type="module" src="${clientEntryPath}"></script>'
   const bodyCloseRegex = /<\\/body>/i
-  const injectedHtml = bodyCloseRegex.test(html)
-    ? html.replace(bodyCloseRegex, hydrationScript + '</body>')
-    : html + hydrationScript
+  if (bodyCloseRegex.test(html)) {
+    html = html.replace(bodyCloseRegex, scripts + '</body>')
+  } else {
+    html = html + scripts
+  }
 
-  return new Response(injectedHtml, {
+  return new Response(html, {
     status,
     headers: {
       'Content-Type': 'text/html; charset=utf-8',
@@ -434,7 +509,7 @@ function registerRoute(app, pattern, routeModule, middlewareModules) {
   for (const method of HTTP_METHODS) {
     const handler = routeModule[method]
     if (handler && typeof handler === 'function') {
-      const h = handler.length === 2 ? createHandlerAdapter(handler) : handler
+      const h = createHandlerAdapter(handler)
       switch (method) {
         case 'GET': app.get(pattern, h); break
         case 'POST': app.post(pattern, h); break
@@ -460,7 +535,10 @@ const app = new Hono({ strict: false })
 
 // Add context middleware
 app.use('*', contextMiddleware())
-${options.isProduction ? `
+${rootMiddlewareVarName ? `
+// Apply root middleware globally (for all routes including auth)
+app.use('*', createMiddlewareAdapter(${rootMiddlewareVarName}))
+` : ""}${options.isProduction ? `
 // Serve static assets using Workers Static Assets binding (production only)
 app.use('*', async (c, next) => {
   // Check if ASSETS binding is available
@@ -469,12 +547,39 @@ app.use('*', async (c, next) => {
     return
   }
 
+  // Only serve static assets for GET/HEAD requests
+  // Other methods (POST, PUT, etc.) should go directly to route handlers
+  // to avoid consuming the request body
+  const method = c.req.method
+  if (method !== 'GET' && method !== 'HEAD') {
+    await next()
+    return
+  }
+
   // Try to serve the request as a static asset
   const response = await c.env.ASSETS.fetch(c.req.raw)
 
-  // If asset found (not 404), return it
+  // If asset found (not 404), return it with cache headers
   if (response.status !== 404) {
-    return response
+    const path = new URL(c.req.url).pathname
+
+    // Check if this is a hashed asset (Vite adds content hash to filename)
+    // Hashed assets are immutable and can be cached forever
+    const isHashedAsset = path.startsWith('/__cloudwerk/') ||
+      /-[a-zA-Z0-9]{8,}\\.(js|css|woff2?|ttf|eot|svg|png|jpg|jpeg|gif|webp|avif|ico)$/.test(path)
+
+    const cacheControl = isHashedAsset
+      ? 'public, max-age=31536000, immutable'
+      : 'public, max-age=3600'
+
+    return new Response(response.body, {
+      status: response.status,
+      statusText: response.statusText,
+      headers: {
+        ...Object.fromEntries(response.headers.entries()),
+        'Cache-Control': cacheControl,
+      },
+    })
   }
 
   // Asset not found, continue to routes
@@ -485,6 +590,9 @@ app.use('*', async (c, next) => {
 ${pageRegistrations.join("\n")}
 ${routeRegistrations.join("\n")}
 
+// Register auth routes
+${generateAuthRouteRegistrations(authManifest)}
+
 // SSG routes endpoint - returns all static routes for build-time generation
 app.get('/__ssg/routes', async (c) => {
   const routes = []
@@ -720,14 +828,266 @@ function generateServiceRegistration(serviceManifest) {
   }
   return lines.join("\n");
 }
+function generateAuthRouteRegistrations(authManifest) {
+  if (!authManifest) {
+    return "";
+  }
+  const lines = [];
+  const imports = [];
+  const basePath = authManifest.config?.basePath || "/auth";
+  lines.push("");
+  lines.push("// ============================================================================");
+  lines.push("// Auth Route Registration");
+  lines.push("// ============================================================================");
+  lines.push("");
+  imports.push(`import {
+  handleSession,
+  handleProviders,
+  handleSignIn,
+  handleSignInProvider,
+  handleSignOutGet,
+  handleSignOutPost,
+} from '@cloudwerk/auth/routes'`);
+  imports.push(`import { createSessionManager, createKVSessionAdapter } from '@cloudwerk/auth/session'`);
+  const passkeyProviders = authManifest.providers.filter((p) => p.type === "passkey" && !p.disabled);
+  if (passkeyProviders.length > 0) {
+    imports.push(`import {
+  handlePasskeyRegisterOptions,
+  handlePasskeyRegisterVerify,
+  handlePasskeyAuthenticateOptions,
+  handlePasskeyAuthenticateVerify,
+} from '@cloudwerk/auth/routes'`);
+    imports.push(`import {
+  createKVChallengeStorage,
+  createD1CredentialStorage,
+} from '@cloudwerk/auth/providers'`);
+    for (let i = 0; i < passkeyProviders.length; i++) {
+      const provider = passkeyProviders[i];
+      imports.push(`import passkeyProviderDef_${i} from '${provider.filePath}'`);
+    }
+  }
+  lines.push(imports.join("\n"));
+  lines.push("");
+  lines.push(`
+/**
+ * Build auth context for standard auth routes.
+ */
+function buildAuthContext(c) {
+  const env = c.env || {}
+
+  // Get KV binding - fall back to common binding names
+  let kvBinding = undefined
+  for (const name of ['FLAGSHIP_AUTH_SESSIONS', 'AUTH_KV', 'AUTH_SESSIONS', 'KV']) {
+    const binding = env[name]
+    if (binding && typeof binding.get === 'function') {
+      kvBinding = binding
+      break
+    }
+  }
+
+  // Create session manager from KV
+  const sessionAdapter = kvBinding ? createKVSessionAdapter({ binding: kvBinding, enableUserIndex: true }) : undefined
+  const sessionManager = sessionAdapter ? createSessionManager({ adapter: sessionAdapter }) : undefined
+
+  // Build providers map
+  const providers = new Map()
+
+  return {
+    request: c.req.raw,
+    env,
+    config: { basePath: '${basePath}', session: { strategy: '${authManifest.config?.sessionStrategy || "database"}' } },
+    sessionManager,
+    providers,
+    user: c.get?.('user') ?? null,
+    session: c.get?.('session') ?? null,
+    url: new URL(c.req.url),
+    responseHeaders: new Headers(),
+  }
+}
+`);
+  lines.push(`
+// Standard auth routes
+app.get('${basePath}/session', async (c) => {
+  const ctx = buildAuthContext(c)
+  return handleSession(ctx)
+})
+
+app.get('${basePath}/providers', async (c) => {
+  const ctx = buildAuthContext(c)
+  return handleProviders(ctx)
+})
+
+app.get('${basePath}/signin', async (c) => {
+  const ctx = buildAuthContext(c)
+  return handleSignIn(ctx)
+})
+
+app.get('${basePath}/signin/:provider', async (c) => {
+  const ctx = buildAuthContext(c)
+  const providerId = c.req.param('provider')
+  return handleSignInProvider(ctx, providerId)
+})
+
+app.get('${basePath}/signout', async (c) => {
+  const ctx = buildAuthContext(c)
+  return handleSignOutGet(ctx)
+})
+
+app.post('${basePath}/signout', async (c) => {
+  const ctx = buildAuthContext(c)
+  return handleSignOutPost(ctx)
+})
+`);
+  if (passkeyProviders.length > 0) {
+    lines.push(`
+/**
+ * Build auth context for passkey handlers.
+ */
+function buildPasskeyAuthContext(c, passkeyProvider) {
+  const env = c.env || {}
+
+  // Get KV binding for challenges - use provider config or fall back to common names
+  const kvBindingName = passkeyProvider.kvBinding
+  let kvBinding = kvBindingName ? env[kvBindingName] : undefined
+  if (!kvBinding) {
+    // Fall back to common binding names
+    for (const name of ['AUTH_KV', 'AUTH_SESSIONS', 'KV']) {
+      const binding = env[name]
+      if (binding && typeof binding.get === 'function') {
+        kvBinding = binding
+        break
+      }
+    }
+  }
+  const challengeStorage = kvBinding ? createKVChallengeStorage(kvBinding, 'auth:challenge:') : undefined
+
+  // Get D1 binding for credentials - use provider config or fall back to common names
+  const d1BindingName = passkeyProvider.d1Binding
+  const d1Binding = d1BindingName ? env[d1BindingName] : (env.DB || env.D1 || env.DATABASE)
+  const credentialStorage = d1Binding ? createD1CredentialStorage(d1Binding, 'webauthn_credentials') : undefined
+
+  // Create user adapter from D1
+  const userAdapter = d1Binding ? {
+    async getUserByEmail(email) {
+      const user = await d1Binding.prepare(
+        'SELECT id, email, email_verified, name, image, created_at, updated_at FROM users WHERE email = ?'
+      ).bind(email).first()
+      if (!user) return null
+      return {
+        id: user.id,
+        email: user.email,
+        emailVerified: user.email_verified ? new Date(user.email_verified) : null,
+        name: user.name,
+        image: user.image,
+        createdAt: new Date(user.created_at),
+        updatedAt: new Date(user.updated_at),
+      }
+    },
+    async createUser(userData) {
+      const id = crypto.randomUUID()
+      const now = new Date().toISOString()
+      await d1Binding.prepare(
+        'INSERT INTO users (id, email, email_verified, name, created_at, updated_at) VALUES (?, ?, ?, ?, ?, ?)'
+      ).bind(id, userData.email, userData.emailVerified?.toISOString() ?? null, userData.name ?? null, now, now).run()
+      return { id, email: userData.email, emailVerified: userData.emailVerified, name: userData.name ?? null, image: null, createdAt: new Date(now), updatedAt: new Date(now) }
+    },
+    async getUser(id) {
+      const user = await d1Binding.prepare(
+        'SELECT id, email, email_verified, name, image, created_at, updated_at FROM users WHERE id = ?'
+      ).bind(id).first()
+      if (!user) return null
+      return {
+        id: user.id,
+        email: user.email,
+        emailVerified: user.email_verified ? new Date(user.email_verified) : null,
+        name: user.name,
+        image: user.image,
+        createdAt: new Date(user.created_at),
+        updatedAt: new Date(user.updated_at),
+      }
+    },
+  } : undefined
+
+  // Create session manager from KV
+  const sessionAdapter = kvBinding ? createKVSessionAdapter({ binding: kvBinding, enableUserIndex: true }) : undefined
+  const sessionManager = sessionAdapter ? createSessionManager({ adapter: sessionAdapter }) : undefined
+
+  // Build providers map
+  const providers = new Map()
+  providers.set(passkeyProvider.id, passkeyProvider)
+
+  return {
+    request: c.req.raw,
+    env,
+    config: { basePath: '${basePath}', session: { strategy: '${authManifest.config?.sessionStrategy || "database"}' } },
+    sessionManager,
+    providers,
+    user: null,
+    session: null,
+    url: new URL(c.req.url),
+    responseHeaders: new Headers(),
+    challengeStorage,
+    credentialStorage,
+    userAdapter,
+  }
+}
+`);
+    for (let i = 0; i < passkeyProviders.length; i++) {
+      const provider = passkeyProviders[i];
+      lines.push(`
+// Get provider from definition
+const passkeyProvider_${i} = passkeyProviderDef_${i}.provider || passkeyProviderDef_${i}
+`);
+      lines.push(`
+// Passkey registration routes
+app.post('${basePath}/passkey/register/options', async (c) => {
+  const ctx = buildPasskeyAuthContext(c, passkeyProvider_${i})
+  return handlePasskeyRegisterOptions(ctx, '${provider.id}')
+})
+
+app.post('${basePath}/passkey/register/verify', async (c) => {
+  const ctx = buildPasskeyAuthContext(c, passkeyProvider_${i})
+  return handlePasskeyRegisterVerify(ctx, '${provider.id}')
+})
+
+app.post('${basePath}/passkey/authenticate/options', async (c) => {
+  const ctx = buildPasskeyAuthContext(c, passkeyProvider_${i})
+  return handlePasskeyAuthenticateOptions(ctx, '${provider.id}')
+})
+
+app.post('${basePath}/passkey/authenticate/verify', async (c) => {
+  const ctx = buildPasskeyAuthContext(c, passkeyProvider_${i})
+  return handlePasskeyAuthenticateVerify(ctx, '${provider.id}')
+})
+`);
+    }
+  }
+  return lines.join("\n");
+}
 
 // src/virtual-modules/client-entry.ts
-function generateClientEntry(clientComponents, options) {
+function collectCssImports(cssImports) {
+  const allCss = /* @__PURE__ */ new Set();
+  for (const imports of cssImports.values()) {
+    for (const info of imports) {
+      allCss.add(info.absolutePath);
+    }
+  }
+  return Array.from(allCss);
+}
+function generateCssImportStatements(cssPaths) {
+  if (cssPaths.length === 0) {
+    return "";
+  }
+  return cssPaths.map((cssPath) => `import '${cssPath}'`).join("\n") + "\n\n";
+}
+function generateClientEntry(clientComponents, cssImports, options) {
   const { renderer, hydrationEndpoint, isProduction } = options;
+  const cssPaths = collectCssImports(cssImports);
   if (renderer === "react") {
-    return generateReactClientEntry(clientComponents, hydrationEndpoint, isProduction);
+    return generateReactClientEntry(clientComponents, cssPaths, hydrationEndpoint, isProduction);
   }
-  return generateHonoClientEntry(clientComponents, hydrationEndpoint, isProduction);
+  return generateHonoClientEntry(clientComponents, cssPaths, hydrationEndpoint, isProduction);
 }
 function generateStaticImportsAndMap(clientComponents) {
   const components = Array.from(clientComponents.values());
@@ -746,7 +1106,7 @@ function generateProductionClientEntry(clientComponents, config) {
  * This file is auto-generated by @cloudwerk/vite-plugin - do not edit
  */
 
-${config.rendererImports}
+${config.cssImports}${config.rendererImports}
 
 // Static component imports
 ${imports}
@@ -810,10 +1170,12 @@ if (document.readyState === 'loading') {
 export { hydrate }
 `;
 }
-function generateHonoClientEntry(clientComponents, _hydrationEndpoint, isProduction = false) {
+function generateHonoClientEntry(clientComponents, cssPaths, _hydrationEndpoint, isProduction = false) {
+  const cssImportStatements = generateCssImportStatements(cssPaths);
   if (isProduction) {
     return generateProductionClientEntry(clientComponents, {
       header: "Generated Cloudwerk Client Entry (Hono JSX - Production)",
+      cssImports: cssImportStatements,
       rendererImports: `import { render } from 'hono/jsx/dom'
 import { jsx } from 'hono/jsx/jsx-runtime'`,
       additionalDeclarations: "",
@@ -830,7 +1192,7 @@ import { jsx } from 'hono/jsx/jsx-runtime'`,
  * This file is auto-generated by @cloudwerk/vite-plugin - do not edit
  */
 
-import { render } from 'hono/jsx/dom'
+${cssImportStatements}import { render } from 'hono/jsx/dom'
 import { jsx } from 'hono/jsx/jsx-runtime'
 
 // Bundle map for component lookups
@@ -914,10 +1276,12 @@ if (document.readyState === 'loading') {
 export { hydrate }
 `;
 }
-function generateReactClientEntry(clientComponents, _hydrationEndpoint, isProduction = false) {
+function generateReactClientEntry(clientComponents, cssPaths, _hydrationEndpoint, isProduction = false) {
+  const cssImportStatements = generateCssImportStatements(cssPaths);
   if (isProduction) {
     return generateProductionClientEntry(clientComponents, {
       header: "Generated Cloudwerk Client Entry (React - Production)",
+      cssImports: cssImportStatements,
       rendererImports: `import { hydrateRoot } from 'react-dom/client'
 import { createElement } from 'react'`,
       additionalDeclarations: `
@@ -937,7 +1301,7 @@ const rootCache = new Map()
  * This file is auto-generated by @cloudwerk/vite-plugin - do not edit
  */
 
-import { hydrateRoot, createRoot } from 'react-dom/client'
+${cssImportStatements}import { hydrateRoot, createRoot } from 'react-dom/client'
 import { createElement } from 'react'
 
 // Bundle map for component lookups
@@ -1594,6 +1958,66 @@ async function scanClientComponents(root, state) {
   }
   await scanDir(appDir);
 }
+var CSS_IMPORT_REGEX = /import\s+(?:['"]([^'"]+\.css)['"]|(?:\w+\s+from\s+)?['"]([^'"]+\.css)['"])/g;
+function extractCssImports(code) {
+  const imports = [];
+  let match;
+  CSS_IMPORT_REGEX.lastIndex = 0;
+  while ((match = CSS_IMPORT_REGEX.exec(code)) !== null) {
+    const cssPath = match[1] || match[2];
+    if (cssPath) {
+      imports.push(cssPath);
+    }
+  }
+  return imports;
+}
+function isLayoutOrPage(filePath) {
+  const basename2 = path3.basename(filePath);
+  const nameWithoutExt = basename2.replace(/\.(ts|tsx|js|jsx)$/, "");
+  return {
+    isLayout: nameWithoutExt === "layout",
+    isPage: nameWithoutExt === "page"
+  };
+}
+async function scanCssImports(root, state) {
+  const appDir = path3.resolve(root, state.options.appDir);
+  try {
+    await fs2.promises.access(appDir);
+  } catch {
+    return;
+  }
+  async function scanDir(dir) {
+    const entries = await fs2.promises.readdir(dir, { withFileTypes: true });
+    await Promise.all(
+      entries.map(async (entry) => {
+        const fullPath = path3.join(dir, entry.name);
+        if (entry.isDirectory()) {
+          if (entry.name !== "node_modules" && !entry.name.startsWith(".")) {
+            await scanDir(fullPath);
+          }
+        } else if (entry.isFile() && (entry.name.endsWith(".tsx") || entry.name.endsWith(".ts"))) {
+          const { isLayout, isPage } = isLayoutOrPage(fullPath);
+          if (isLayout || isPage) {
+            const content = await fs2.promises.readFile(fullPath, "utf-8");
+            const cssImportPaths = extractCssImports(content);
+            if (cssImportPaths.length > 0) {
+              const cssInfos = cssImportPaths.map((cssPath) => ({
+                absolutePath: path3.resolve(path3.dirname(fullPath), cssPath),
+                importedBy: fullPath,
+                isLayout
+              }));
+              state.cssImports.set(fullPath, cssInfos);
+              if (state.options.verbose) {
+                console.log(`[cloudwerk] Found ${cssInfos.length} CSS import(s) in ${path3.relative(root, fullPath)}`);
+              }
+            }
+          }
+        }
+      })
+    );
+  }
+  await scanDir(appDir);
+}
 function cloudwerkPlugin(options = {}) {
   let state = null;
   let server = null;
@@ -1672,6 +2096,62 @@ function cloudwerkPlugin(options = {}) {
       console.log(`[cloudwerk] Found ${state.serviceManifest.services.length} service(s)`);
     }
   }
+  async function buildImageManifestIfExists(root) {
+    if (!state) {
+      throw new Error("Plugin state not initialized");
+    }
+    const imagesPath = path3.resolve(root, state.options.appDir, IMAGES_DIR);
+    try {
+      await fs2.promises.access(imagesPath);
+    } catch {
+      state.imageScanResult = null;
+      state.imageManifest = null;
+      return;
+    }
+    state.imageScanResult = await scanImages(
+      path3.resolve(root, state.options.appDir),
+      { extensions: state.options.config.extensions }
+    );
+    state.imageManifest = buildImageManifest(
+      state.imageScanResult,
+      root
+    );
+    if (state.options.verbose && state.imageManifest.images.length > 0) {
+      console.log(`[cloudwerk] Found ${state.imageManifest.images.length} image(s)`);
+    }
+  }
+  async function buildAuthManifestIfExists(root) {
+    if (!state) {
+      throw new Error("Plugin state not initialized");
+    }
+    const authPath = path3.resolve(root, state.options.appDir, AUTH_DIR);
+    try {
+      await fs2.promises.access(authPath);
+    } catch {
+      state.authScanResult = null;
+      state.authManifest = null;
+      return;
+    }
+    state.authScanResult = await scanAuth(
+      path3.resolve(root, state.options.appDir),
+      { extensions: state.options.config.extensions }
+    );
+    state.authManifest = await buildAuthManifestWithModules(state.authScanResult);
+    state.serverEntryCache = null;
+    if (state.options.verbose && state.authManifest.providers.length > 0) {
+      console.log(`[cloudwerk] Found ${state.authManifest.providers.length} auth provider(s)`);
+      for (const provider of state.authManifest.providers) {
+        console.log(`[cloudwerk]   - ${provider.id} (${provider.type})`);
+      }
+    }
+  }
+  function isAuthFile(filePath) {
+    if (!state) return false;
+    const authDir = path3.resolve(state.options.root, state.options.appDir, AUTH_DIR);
+    if (!filePath.startsWith(authDir)) return false;
+    const ext = path3.extname(filePath);
+    return state.options.config.extensions.includes(ext);
+  }
   function isRouteFile(filePath) {
     if (!state) return false;
     const appDir = path3.resolve(state.options.root, state.options.appDir);
@@ -1699,6 +2179,15 @@ function cloudwerkPlugin(options = {}) {
     if (nameWithoutExt !== SERVICE_FILE_NAME) return false;
     return state.options.config.extensions.includes(ext);
   }
+  function isImageFile(filePath) {
+    if (!state) return false;
+    const imagesDir = path3.resolve(state.options.root, state.options.appDir, IMAGES_DIR);
+    if (!filePath.startsWith(imagesDir)) return false;
+    const relativePath = path3.relative(imagesDir, filePath);
+    if (relativePath.includes(path3.sep)) return false;
+    const ext = path3.extname(filePath);
+    return state.options.config.extensions.includes(ext);
+  }
   function invalidateVirtualModules() {
     if (!server) return;
     const idsToInvalidate = [
@@ -1793,14 +2282,22 @@ function cloudwerkPlugin(options = {}) {
         queueScanResult: null,
         serviceManifest: null,
         serviceScanResult: null,
+        imageManifest: null,
+        imageScanResult: null,
+        authManifest: null,
+        authScanResult: null,
         clientComponents: /* @__PURE__ */ new Map(),
+        cssImports: /* @__PURE__ */ new Map(),
         serverEntryCache: null,
         clientEntryCache: null
       };
       await buildManifest(root);
       await buildQueueManifestIfExists(root);
       await buildServiceManifestIfExists(root);
+      await buildImageManifestIfExists(root);
+      await buildAuthManifestIfExists(root);
       await scanClientComponents(root, state);
+      await scanCssImports(root, state);
     },
     /**
      * Configure the dev server with file watching.
@@ -1835,6 +2332,22 @@ function cloudwerkPlugin(options = {}) {
           await buildServiceManifestIfExists(state.options.root);
           invalidateVirtualModules();
         }
+        if (isImageFile(filePath)) {
+          const imagesDir = path3.resolve(root, state.options.appDir, IMAGES_DIR);
+          if (state?.options.verbose) {
+            console.log(`[cloudwerk] Image added: ${path3.relative(imagesDir, filePath)}`);
+          }
+          await buildImageManifestIfExists(state.options.root);
+          invalidateVirtualModules();
+        }
+        if (isAuthFile(filePath)) {
+          const authDir = path3.resolve(root, state.options.appDir, AUTH_DIR);
+          if (state?.options.verbose) {
+            console.log(`[cloudwerk] Auth file added: ${path3.relative(authDir, filePath)}`);
+          }
+          await buildAuthManifestIfExists(state.options.root);
+          invalidateVirtualModules();
+        }
       });
       devServer.watcher.on("unlink", async (filePath) => {
         if (isRouteFile(filePath)) {
@@ -1860,6 +2373,22 @@ function cloudwerkPlugin(options = {}) {
           await buildServiceManifestIfExists(state.options.root);
           invalidateVirtualModules();
         }
+        if (isImageFile(filePath)) {
+          const imagesDir = path3.resolve(root, state.options.appDir, IMAGES_DIR);
+          if (state?.options.verbose) {
+            console.log(`[cloudwerk] Image removed: ${path3.relative(imagesDir, filePath)}`);
+          }
+          await buildImageManifestIfExists(state.options.root);
+          invalidateVirtualModules();
+        }
+        if (isAuthFile(filePath)) {
+          const authDir = path3.resolve(root, state.options.appDir, AUTH_DIR);
+          if (state?.options.verbose) {
+            console.log(`[cloudwerk] Auth file removed: ${path3.relative(authDir, filePath)}`);
+          }
+          await buildAuthManifestIfExists(state.options.root);
+          invalidateVirtualModules();
+        }
       });
       devServer.watcher.on("change", async (filePath) => {
         if (isRouteFile(filePath)) {
@@ -1885,6 +2414,22 @@ function cloudwerkPlugin(options = {}) {
           await buildServiceManifestIfExists(state.options.root);
           invalidateVirtualModules();
         }
+        if (isImageFile(filePath)) {
+          const imagesDir = path3.resolve(root, state.options.appDir, IMAGES_DIR);
+          if (state?.options.verbose) {
+            console.log(`[cloudwerk] Image changed: ${path3.relative(imagesDir, filePath)}`);
+          }
+          await buildImageManifestIfExists(state.options.root);
+          invalidateVirtualModules();
+        }
+        if (isAuthFile(filePath)) {
+          const authDir = path3.resolve(root, state.options.appDir, AUTH_DIR);
+          if (state?.options.verbose) {
+            console.log(`[cloudwerk] Auth file changed: ${path3.relative(authDir, filePath)}`);
+          }
+          await buildAuthManifestIfExists(state.options.root);
+          invalidateVirtualModules();
+        }
         const wranglerPath2 = findWranglerTomlPath(root);
         if (wranglerPath2 && filePath === wranglerPath2) {
           if (verbose) {
@@ -1932,7 +2477,9 @@ function cloudwerkPlugin(options = {}) {
             state.options,
             {
               queueManifest: state.queueManifest,
-              serviceManifest: state.serviceManifest
+              serviceManifest: state.serviceManifest,
+              authManifest: state.authManifest,
+              cssImports: state.cssImports
             }
           );
         }
@@ -1945,6 +2492,7 @@ function cloudwerkPlugin(options = {}) {
         if (!state.clientEntryCache) {
           state.clientEntryCache = generateClientEntry(
             state.clientComponents,
+            state.cssImports,
             state.options
           );
         }
@@ -2001,6 +2549,13 @@ function cloudwerkPlugin(options = {}) {
             "getDurableObject",
             "hasDurableObject",
             "getDurableObjectNames",
+            "images",
+            "getImages",
+            "hasImages",
+            "getImagesNames",
+            "registerLocalImages",
+            "unregisterLocalImages",
+            "clearLocalImages",
             "createLazyBinding"
           ];
           const runtimeImports = [];
@@ -2031,6 +2586,22 @@ function cloudwerkPlugin(options = {}) {
           return parts.join("\n");
         });
       }
+      const { isLayout, isPage } = isLayoutOrPage(id);
+      if (isLayout || isPage) {
+        const cssImportPaths = extractCssImports(transformedCode);
+        if (cssImportPaths.length > 0) {
+          const cssInfos = cssImportPaths.map((cssPath) => ({
+            absolutePath: path3.resolve(path3.dirname(id), cssPath),
+            importedBy: id,
+            isLayout
+          }));
+          state.cssImports.set(id, cssInfos);
+          state.clientEntryCache = null;
+          if (state.options.verbose) {
+            console.log(`[cloudwerk] Detected ${cssInfos.length} CSS import(s) in ${path3.relative(state.options.root, id)}`);
+          }
+        }
+      }
       if (hasUseClientDirective(transformedCode)) {
         const componentId = generateComponentId(id, state.options.root);
         const bundlePath = `${state.options.hydrationEndpoint}/${componentId}.js`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cloudwerk/vite-plugin",
-  "version": "0.6.2",
+  "version": "0.6.5",
   "description": "Vite plugin for Cloudwerk file-based routing with virtual entry generation",
   "repository": {
     "type": "git",
@@ -19,8 +19,8 @@
   ],
   "dependencies": {
     "@swc/core": "^1.3.100",
-    "@cloudwerk/core": "^0.15.0",
-    "@cloudwerk/ui": "^0.15.0"
+    "@cloudwerk/core": "^0.15.1",
+    "@cloudwerk/ui": "^0.15.1"
   },
   "peerDependencies": {
     "vite": "^5.0.0 || ^6.0.0",