@constela/start 1.8.25 → 1.8.27

package/dist/{chunk-IZPFJSX3.js → chunk-C7LIB2RS.js}

@@ -1,5 +1,104 @@
 // src/runtime/entry-server.ts
 import { renderToString } from "@constela/server";
+
+// src/runtime/theme.ts
+function escapeCssValue(value) {
+  return value.replace(/[;<>{}]/g, "");
+}
+function escapeJsString(str) {
+  return str.replace(/\\/g, "\\\\").replace(/'/g, "\\'").replace(/"/g, '\\"').replace(/\n/g, "\\n").replace(/\r/g, "\\r").replace(/<\/script>/gi, "<\\/script>");
+}
+function generateThemeCss(options) {
+  const { config, cssPrefix: optionsPrefix } = options;
+  if (!config) {
+    return "";
+  }
+  const { colors, darkColors, fonts, cssPrefix: configPrefix } = config;
+  const prefix = optionsPrefix ?? configPrefix ?? "";
+  const hasColors = colors && Object.keys(colors).length > 0;
+  const hasDarkColors = darkColors && Object.keys(darkColors).length > 0;
+  const hasFonts = fonts && Object.keys(fonts).length > 0;
+  if (!hasColors && !hasDarkColors && !hasFonts) {
+    return "";
+  }
+  const lines = [];
+  const rootVars = [];
+  const separator = prefix && !prefix.endsWith("-") ? "-" : "";
+  if (colors) {
+    for (const [key, value] of Object.entries(colors)) {
+      if (value !== void 0) {
+        rootVars.push(`  --${prefix}${separator}${key}: ${escapeCssValue(value)};`);
+      }
+    }
+  }
+  if (fonts) {
+    for (const [key, value] of Object.entries(fonts)) {
+      if (value !== void 0) {
+        rootVars.push(`  --${prefix}${separator}font-${key}: ${escapeCssValue(value)};`);
+      }
+    }
+  }
+  if (rootVars.length > 0) {
+    lines.push(":root {");
+    lines.push(...rootVars);
+    lines.push("}");
+  }
+  if (darkColors) {
+    const darkVars = [];
+    for (const [key, value] of Object.entries(darkColors)) {
+      if (value !== void 0) {
+        darkVars.push(`  --${prefix}${separator}${key}: ${escapeCssValue(value)};`);
+      }
+    }
+    if (darkVars.length > 0) {
+      lines.push(".dark {");
+      lines.push(...darkVars);
+      lines.push("}");
+    }
+  }
+  return lines.join("\n");
+}
+function generateThemeScript(storageKey = "theme") {
+  if (storageKey === "") {
+    storageKey = "theme";
+  }
+  const escapedKey = escapeJsString(storageKey);
+  return `(function() {
+  try {
+    var theme;
+    var cookies = document.cookie.split(';');
+    for (var i = 0; i < cookies.length; i++) {
+      var cookie = cookies[i].trim();
+      if (cookie.indexOf('${escapedKey}=') === 0) {
+        theme = decodeURIComponent(cookie.substring('${escapedKey}='.length));
+        break;
+      }
+    }
+    if (!theme) {
+      theme = localStorage.getItem('${escapedKey}');
+    }
+    if (theme === 'dark') {
+      document.documentElement.classList.add('dark');
+    } else if (theme === 'light') {
+      document.documentElement.classList.remove('dark');
+    }
+  } catch (e) {}
+})();`;
+}
+function getHtmlThemeClass(config, cookieMode) {
+  if (cookieMode === "dark") {
+    return "dark";
+  }
+  if (cookieMode === "light" || cookieMode === "system") {
+    return "";
+  }
+  if (config?.mode === "dark") {
+    return "dark";
+  }
+  return "";
+}
+
+// src/runtime/entry-server.ts
 async function renderPage(program, ctx) {
   const stateOverrides = {};
   if (ctx.cookies?.["theme"] && program.state?.["theme"]) {
@@ -26,7 +125,7 @@ async function renderPage(program, ctx) {
   }
   return await renderToString(program, options);
 }
-function escapeJsString(str) {
+function escapeJsString2(str) {
   return str.replace(/\\/g, "\\\\").replace(/'/g, "\\'").replace(/\n/g, "\\n").replace(/\r/g, "\\r");
 }
 function escapeJsonForScript(json) {
@@ -70,7 +169,7 @@ function generateHydrationScript(program, widgets, route, hmrUrl) {
   }).join("\n") : "";
   const widgetMounting = hasWidgets ? widgets.map((widget) => {
     const jsId = toJsIdentifier(widget.id);
-    const escapedId = escapeJsString(widget.id);
+    const escapedId = escapeJsString2(widget.id);
     return `
 const container_${jsId} = document.getElementById('${escapedId}');
 if (container_${jsId}) {
@@ -93,14 +192,16 @@ if (container_${jsId}) {
 }`;
   let hmrSetup = "";
   if (enableHmr) {
-    const escapedHmrUrl = escapeJsString(hmrUrl);
+    const escapedHmrUrl = escapeJsString2(hmrUrl);
     const handlerOptions = route ? `{
   container: document.getElementById('app'),
   program,
-  route
+  route,
+  skipInitialRender: true
 }` : `{
   container: document.getElementById('app'),
-  program
+  program,
+  skipInitialRender: true
 }`;
     hmrSetup = `
 
@@ -128,7 +229,15 @@ function wrapHtml(content, hydrationScript, head, options) {
     }
     langAttr = ` lang="${options.lang}"`;
   }
-  const htmlClass = options?.defaultTheme === "dark" || options?.theme === "dark" ? ' class="dark"' : "";
+  let htmlClass = "";
+  if (options?.themeConfig) {
+    const themeClass = getHtmlThemeClass(options.themeConfig, options.themeCookie);
+    if (themeClass) {
+      htmlClass = ` class="${themeClass}"`;
+    }
+  } else if (options?.defaultTheme === "dark" || options?.theme === "dark") {
+    htmlClass = ' class="dark"';
+  }
   let processedScript = hydrationScript;
   let importMapScript = "";
   if (options?.runtimePath) {
@@ -153,8 +262,20 @@ ${importMapJson}
 </script>
 `;
   }
+  let themeCssStyle = "";
+  if (options?.themeConfig) {
+    const themeCss = generateThemeCss({ config: options.themeConfig });
+    if (themeCss) {
+      themeCssStyle = `<style>${themeCss}</style>
+`;
+    }
+  }
   let themeScript = "";
-  if (options?.themeStorageKey) {
+  if (options?.themeConfig) {
+    const storageKey = options.themeStorageKey ?? "theme";
+    themeScript = `<script>${generateThemeScript(storageKey)}</script>
+`;
+  } else if (options?.themeStorageKey) {
     if (!/^[a-zA-Z0-9_-]+$/.test(options.themeStorageKey)) {
       throw new Error(`Invalid themeStorageKey: ${options.themeStorageKey}. Only alphanumeric characters, underscores, and hyphens are allowed.`);
     }
@@ -193,7 +314,7 @@ ${importMapJson}
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
-${themeScript}${importMapScript}${head ?? ""}
+${themeCssStyle}${themeScript}${importMapScript}${head ?? ""}
 </head>
 <body>
 <div id="app">${content}</div>

package/dist/{chunk-E4SJFPTB.js → chunk-VL6BMHBL.js}

@@ -3,7 +3,7 @@ import {
   generateMetaTags,
   renderPage,
   wrapHtml
-} from "./chunk-IZPFJSX3.js";
+} from "./chunk-C7LIB2RS.js";
 
 // src/router/file-router.ts
 import fg from "fast-glob";
@@ -770,6 +770,8 @@ async function mdxContentToNode(content, options) {
 import { existsSync as existsSync3, readFileSync } from "fs";
 import { basename, dirname, extname as extname2, join as join3 } from "path";
 import fg2 from "fast-glob";
+import { isAiDataSource } from "@constela/core";
+import { createDslGenerator } from "@constela/ai";
 var mdxContentToNode2 = mdxContentToNode;
 function resolveJsonRefs(json) {
   const cloned = JSON.parse(JSON.stringify(json));
@@ -1099,6 +1101,19 @@ async function loadApi(url, transform) {
     throw new Error(`Network error: ${error.message}`);
   }
 }
+async function loadAi(dataSource, generator) {
+  const gen = generator ?? createDslGenerator({
+    provider: dataSource.provider
+  });
+  const result = await gen.generate({
+    prompt: dataSource.prompt,
+    output: dataSource.output
+  });
+  if (!result.validated && result.errors && result.errors.length > 0) {
+    throw new Error(`AI generated DSL validation failed: ${result.errors.join(", ")}`);
+  }
+  return result.dsl;
+}
 function evaluateParamExpression(expr, item) {
   switch (expr.expr) {
     case "lit":
@@ -1211,6 +1226,12 @@ var DataLoader = class {
         }
         data = await loadApi(dataSource.url, dataSource.transform);
         break;
+      case "ai":
+        if (!isAiDataSource(dataSource)) {
+          throw new Error(`Invalid AI data source '${name}'`);
+        }
+        data = await loadAi(dataSource);
+        break;
       default:
         throw new Error(`Unknown data source type: ${dataSource.type}`);
     }
@@ -1373,8 +1394,65 @@ function parseCookies(cookieHeader) {
   }
   return cookies;
 }
+function wrapHtmlStream(contentStream, hydrationScript, options) {
+  const encoder = new TextEncoder();
+  const lang = options?.lang ?? "en";
+  const themeClass = options?.theme === "dark" ? 'class="dark"' : "";
+  const docStart = `<!DOCTYPE html>
+<html lang="${lang}" ${themeClass}>
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+${options?.head ?? ""}
+</head>
+<body>
+<div id="app">`;
+  const docEnd = `</div>
+${options?.runtimePath ? `<script type="module" src="${options.runtimePath}"></script>` : ""}
+<script type="module">
+${hydrationScript}
+</script>
+</body>
+</html>`;
+  let contentReader = null;
+  let startSent = false;
+  let contentDone = false;
+  return new ReadableStream({
+    async start() {
+      contentReader = contentStream.getReader();
+    },
+    async pull(controller) {
+      try {
+        if (!startSent) {
+          controller.enqueue(encoder.encode(docStart));
+          startSent = true;
+          return;
+        }
+        if (!contentDone && contentReader) {
+          const { done, value } = await contentReader.read();
+          if (done) {
+            contentDone = true;
+            controller.enqueue(encoder.encode(docEnd));
+            controller.close();
+            return;
+          }
+          controller.enqueue(value);
+          return;
+        }
+        controller.close();
+      } catch (error) {
+        controller.error(error);
+      }
+    },
+    cancel(reason) {
+      if (contentReader) {
+        contentReader.cancel(reason);
+      }
+    }
+  });
+}
 function createAdapter(options) {
-  const { routes, loadModule = defaultLoadModule } = options;
+  const { routes, loadModule = defaultLoadModule, streaming = false } = options;
   async function fetch2(request) {
     try {
       const url = new URL(request.url);
@@ -1435,6 +1513,29 @@ function createAdapter(options) {
             initialTheme = themeState.initial;
           }
         }
+        if (streaming) {
+          const encoder = new TextEncoder();
+          const contentStream = new ReadableStream({
+            start(controller) {
+              controller.enqueue(encoder.encode(content));
+              controller.close();
+            }
+          });
+          const streamOptions = {
+            lang: "en"
+          };
+          if (initialTheme) {
+            streamOptions.theme = initialTheme;
+          }
+          const htmlStream = wrapHtmlStream(contentStream, hydrationScript, streamOptions);
+          return new Response(htmlStream, {
+            status: 200,
+            headers: {
+              "Content-Type": "text/html; charset=utf-8",
+              "Transfer-Encoding": "chunked"
+            }
+          });
+        }
         const html = wrapHtml(content, hydrationScript, void 0, initialTheme ? {
           theme: initialTheme,
           defaultTheme: initialTheme,
@@ -2948,14 +3049,14 @@ async function resolveConfig(fileConfig, cliOptions) {
 
 // src/build/index.ts
 import { existsSync as existsSync9, readFileSync as readFileSync6 } from "fs";
-import { mkdir as mkdir2, writeFile, cp, readdir } from "fs/promises";
+import { mkdir as mkdir2, writeFile as writeFile2, cp, readdir } from "fs/promises";
 import { join as join11, dirname as dirname6, relative as relative5, basename as basename4, isAbsolute as isAbsolute3, resolve as resolve4 } from "path";
 import { isCookieInitialExpr as isCookieInitialExpr3 } from "@constela/core";
 
 // src/build/bundler.ts
 import * as esbuild from "esbuild";
 import { existsSync as existsSync8 } from "fs";
-import { mkdir, readFile } from "fs/promises";
+import { mkdir, readFile, writeFile } from "fs/promises";
 import { createRequire } from "module";
 import { join as join10, dirname as dirname5, isAbsolute as isAbsolute2, relative as relative4 } from "path";
 import { fileURLToPath } from "url";
@@ -3703,14 +3804,14 @@ async function build2(options) {
         const program = await convertToCompiledProgram(processedPageInfo);
         const html = await renderPageToHtml(program, params, routePath, runtimePath, cssPath, processedPageInfo.page.externalImports, processedPageInfo.widgets, seoLang);
         await mkdir2(dirname6(outputPath), { recursive: true });
-        await writeFile(outputPath, html, "utf-8");
+        await writeFile2(outputPath, html, "utf-8");
         generatedFiles.push(outputPath);
         const slugValue = params["slug"];
         if (slugValue && (slugValue === "index" || slugValue.endsWith("/index"))) {
           const parentOutputPath = join11(dirname6(dirname6(outputPath)), "index.html");
           if (!generatedFiles.includes(parentOutputPath)) {
             await mkdir2(dirname6(parentOutputPath), { recursive: true });
-            await writeFile(parentOutputPath, html, "utf-8");
+            await writeFile2(parentOutputPath, html, "utf-8");
             generatedFiles.push(parentOutputPath);
           }
         }
@@ -3737,7 +3838,7 @@ async function build2(options) {
       const program = await convertToCompiledProgram(pageInfo);
       const html = await renderPageToHtml(program, {}, routePath, runtimePath, cssPath, pageInfo.page.externalImports, pageInfo.widgets, seoLang);
       await mkdir2(dirname6(outputPath), { recursive: true });
-      await writeFile(outputPath, html, "utf-8");
+      await writeFile2(outputPath, html, "utf-8");
       generatedFiles.push(outputPath);
     }
   }

package/dist/cli/index.js

@@ -4,8 +4,8 @@ import {
   hyperlink,
   loadConfig,
   resolveConfig
-} from "../chunk-E4SJFPTB.js";
-import "../chunk-IZPFJSX3.js";
+} from "../chunk-VL6BMHBL.js";
+import "../chunk-C7LIB2RS.js";
 
 // src/cli/index.ts
 import { Command } from "commander";

package/dist/index.d.ts

@@ -80,6 +80,10 @@ interface ConstelaConfig {
     edge?: {
         adapter?: 'cloudflare' | 'vercel' | 'deno' | 'node';
     };
+    /** Enable streaming SSR */
+    streaming?: boolean;
+    /** Flush strategy for streaming SSR */
+    streamingFlushStrategy?: 'immediate' | 'batched' | 'manual';
 }
 /**
  * Development server options
@@ -97,6 +101,8 @@ interface DevServerOptions {
     seo?: {
         lang?: string;
     };
+    /** Enable streaming SSR */
+    streaming?: boolean;
 }
 /**
  * Build options
@@ -115,6 +121,8 @@ interface BuildOptions {
     seo?: {
         lang?: string;
     };
+    /** Enable streaming SSR */
+    streaming?: boolean;
 }
 
 /**
@@ -279,6 +287,10 @@ interface AdapterOptions {
     platform: PlatformAdapter;
     routes: ScannedRoute[];
     loadModule?: (file: string) => Promise<unknown>;
+    /** Enable streaming SSR */
+    streaming?: boolean;
+    /** Flush strategy for streaming SSR */
+    streamingFlushStrategy?: 'immediate' | 'batched' | 'manual';
 }
 interface EdgeAdapter {
     fetch: (request: Request) => Promise<Response>;

package/dist/index.js

@@ -28,14 +28,14 @@ import {
   transformCsv,
   transformMdx,
   transformYaml
-} from "./chunk-E4SJFPTB.js";
+} from "./chunk-VL6BMHBL.js";
 import {
   evaluateMetaExpression,
   generateHydrationScript,
   generateMetaTags,
   renderPage,
   wrapHtml
-} from "./chunk-IZPFJSX3.js";
+} from "./chunk-C7LIB2RS.js";
 
 // src/build/ssg.ts
 import { mkdir, writeFile } from "fs/promises";

package/dist/runtime/entry-client.js

@@ -5,6 +5,58 @@ import {
   createHMRHandler,
   createErrorOverlay
 } from "@constela/runtime";
+
+// src/runtime/theme-provider.ts
+import { createThemeProvider } from "@constela/runtime";
+var instance = null;
+var ThemeProvider = {
+  /**
+   * Initializes the ThemeProvider with the given configuration.
+   * Creates a new instance if one doesn't exist.
+   */
+  init(config) {
+    if (instance) {
+      instance.destroy();
+    }
+    instance = createThemeProvider({ config });
+  },
+  /**
+   * Sets the color scheme mode.
+   */
+  setMode(mode) {
+    if (instance) {
+      instance.setMode(mode);
+    }
+  },
+  /**
+   * Applies CSS variables to the document.
+   * Called internally by init, but can be called manually if needed.
+   */
+  applyCssVariables() {
+    if (instance) {
+      const currentMode = instance.getMode();
+      instance.setMode(currentMode);
+    }
+  },
+  /**
+   * Destroys the ThemeProvider instance and cleans up resources.
+   */
+  destroy() {
+    if (instance) {
+      instance.destroy();
+      instance = null;
+    }
+  },
+  /**
+   * Gets the underlying ThemeProvider instance.
+   * Returns null if not initialized.
+   */
+  getInstance() {
+    return instance;
+  }
+};
+
+// src/runtime/entry-client.ts
 function initClient(options) {
   const { program, container, escapeHandlers = [], route } = options;
   const appInstance = hydrateApp({ program, container, ...route && { route } });
@@ -36,6 +88,16 @@ function initClient(options) {
     } catch {
     }
   }
+  const programTheme = program.theme;
+  const hasThemeProvider = !!programTheme;
+  if (hasThemeProvider) {
+    ThemeProvider.init(programTheme);
+    ThemeProvider.applyCssVariables();
+    const currentTheme = appInstance.getState?.("theme");
+    if (currentTheme === "dark") {
+      document.documentElement.classList.add("dark");
+    }
+  }
   if (program.state?.["theme"]) {
     const updateThemeClass = (value) => {
       if (value === "dark") {
@@ -44,11 +106,18 @@ function initClient(options) {
         document.documentElement.classList.remove("dark");
       }
     };
-    const currentTheme = appInstance.getState?.("theme");
-    if (currentTheme) {
-      updateThemeClass(currentTheme);
+    if (!hasThemeProvider) {
+      const currentTheme = appInstance.getState?.("theme");
+      if (currentTheme) {
+        updateThemeClass(currentTheme);
+      }
     }
-    const unsubscribeTheme = appInstance.subscribe("theme", updateThemeClass);
+    const unsubscribeTheme = appInstance.subscribe("theme", (value) => {
+      updateThemeClass(value);
+      if (hasThemeProvider && typeof value === "string") {
+        ThemeProvider.setMode(value);
+      }
+    });
     cleanupFns.push(unsubscribeTheme);
   }
   let destroyed = false;
@@ -59,6 +128,9 @@ function initClient(options) {
       for (const cleanup of cleanupFns) {
         cleanup();
       }
+      if (hasThemeProvider) {
+        ThemeProvider.destroy();
+      }
       appInstance.destroy();
     },
     setState(name, value) {

package/dist/runtime/entry-server.d.ts

@@ -1,4 +1,5 @@
 import { CompiledRouteDefinition, CompiledExpression, CompiledProgram } from '@constela/compiler';
+import { ThemeConfig, ColorScheme } from '@constela/core';
 
 /**
  * Server-side entry point for Constela applications
@@ -23,6 +24,10 @@ interface WrapHtmlOptions {
     themeStorageKey?: string;
     /** Default theme to use when no stored preference exists */
     defaultTheme?: 'dark' | 'light';
+    /** Full theme configuration from program */
+    themeConfig?: ThemeConfig;
+    /** Theme from cookie (takes precedence over themeConfig.mode) */
+    themeCookie?: ColorScheme;
 }
 interface WidgetConfig {
     /** The DOM element ID where the widget should be mounted */

package/dist/runtime/entry-server.js

@@ -4,7 +4,7 @@ import {
   generateMetaTags,
   renderPage,
   wrapHtml
-} from "../chunk-IZPFJSX3.js";
+} from "../chunk-C7LIB2RS.js";
 export {
   evaluateMetaExpression,
   generateHydrationScript,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@constela/start",
-  "version": "1.8.25",
+  "version": "1.8.27",
   "description": "Meta-framework for Constela applications",
   "type": "module",
   "main": "./dist/index.js",
@@ -44,11 +44,12 @@
     "@tailwindcss/postcss": "^4.0.0",
     "tailwindcss": "^4.0.0",
     "ws": "^8.18.0",
-    "@constela/compiler": "0.14.6",
-    "@constela/core": "0.16.1",
-    "@constela/server": "12.0.1",
-    "@constela/router": "18.0.0",
-    "@constela/runtime": "0.19.5"
+    "@constela/compiler": "0.14.7",
+    "@constela/core": "0.16.2",
+    "@constela/ai": "1.0.2",
+    "@constela/server": "12.0.2",
+    "@constela/router": "18.0.1",
+    "@constela/runtime": "0.19.7"
   },
   "devDependencies": {
     "@types/ws": "^8.5.0",