@wireweave/core 1.3.0 → 1.4.0-beta.1

package/dist/index.cjs

@@ -8043,6 +8043,9 @@ var BaseRenderer = class {
   }
   /**
    * Build theme configuration based on options
+   * Note: background option is NOT applied to theme.colors.background
+   * It's only used for page background in renderPage() to avoid affecting
+   * component colors that use var(--wf-bg)
    */
   buildTheme(options) {
     return options.theme === "dark" ? { ...darkTheme } : { ...defaultTheme };
@@ -55671,7 +55674,10 @@ var HtmlRenderer = class extends BaseRenderer {
     const title = node.title ? `<title>${this.escapeHtml(node.title)}</title>
 ` : "";
     const commonStyles = this.buildCommonStyles(node);
-    const viewportStyle = `position: relative; width: ${viewport.width}px; height: ${viewport.height}px; overflow: hidden`;
+    let viewportStyle = `position: relative; width: ${viewport.width}px; height: ${viewport.height}px; overflow: hidden`;
+    if (this.context.options.background) {
+      viewportStyle += `; background: ${this.context.options.background}`;
+    }
     const combinedStyle = commonStyles ? `${viewportStyle}; ${commonStyles}` : viewportStyle;
     const dataAttrs = `data-viewport-width="${viewport.width}" data-viewport-height="${viewport.height}" data-viewport-label="${viewport.label}"`;
     return `<div class="${classes}" style="${combinedStyle}" ${dataAttrs}>

package/dist/index.js

@@ -7903,6 +7903,9 @@ var BaseRenderer = class {
   }
   /**
    * Build theme configuration based on options
+   * Note: background option is NOT applied to theme.colors.background
+   * It's only used for page background in renderPage() to avoid affecting
+   * component colors that use var(--wf-bg)
    */
   buildTheme(options) {
     return options.theme === "dark" ? { ...darkTheme } : { ...defaultTheme };
@@ -55531,7 +55534,10 @@ var HtmlRenderer = class extends BaseRenderer {
     const title = node.title ? `<title>${this.escapeHtml(node.title)}</title>
 ` : "";
     const commonStyles = this.buildCommonStyles(node);
-    const viewportStyle = `position: relative; width: ${viewport.width}px; height: ${viewport.height}px; overflow: hidden`;
+    let viewportStyle = `position: relative; width: ${viewport.width}px; height: ${viewport.height}px; overflow: hidden`;
+    if (this.context.options.background) {
+      viewportStyle += `; background: ${this.context.options.background}`;
+    }
     const combinedStyle = commonStyles ? `${viewportStyle}; ${commonStyles}` : viewportStyle;
     const dataAttrs = `data-viewport-width="${viewport.width}" data-viewport-height="${viewport.height}" data-viewport-label="${viewport.label}"`;
     return `<div class="${classes}" style="${combinedStyle}" ${dataAttrs}>

package/dist/renderer.cjs

@@ -1723,6 +1723,9 @@ var BaseRenderer = class {
   }
   /**
    * Build theme configuration based on options
+   * Note: background option is NOT applied to theme.colors.background
+   * It's only used for page background in renderPage() to avoid affecting
+   * component colors that use var(--wf-bg)
    */
   buildTheme(options) {
     return options.theme === "dark" ? { ...darkTheme } : { ...defaultTheme };
@@ -49322,7 +49325,10 @@ var HtmlRenderer = class extends BaseRenderer {
     const title = node.title ? `<title>${this.escapeHtml(node.title)}</title>
 ` : "";
     const commonStyles = this.buildCommonStyles(node);
-    const viewportStyle = `position: relative; width: ${viewport.width}px; height: ${viewport.height}px; overflow: hidden`;
+    let viewportStyle = `position: relative; width: ${viewport.width}px; height: ${viewport.height}px; overflow: hidden`;
+    if (this.context.options.background) {
+      viewportStyle += `; background: ${this.context.options.background}`;
+    }
     const combinedStyle = commonStyles ? `${viewportStyle}; ${commonStyles}` : viewportStyle;
     const dataAttrs = `data-viewport-width="${viewport.width}" data-viewport-height="${viewport.height}" data-viewport-label="${viewport.label}"`;
     return `<div class="${classes}" style="${combinedStyle}" ${dataAttrs}>

package/dist/renderer.d.cts

@@ -16,6 +16,8 @@ interface RenderOptions {
     minify?: boolean;
     /** CSS class prefix for scoping */
     classPrefix?: string;
+    /** Background color (e.g., '#ffffff', 'transparent') */
+    background?: string;
 }
 interface RenderResult {
     /** Rendered HTML content */
@@ -121,8 +123,11 @@ declare abstract class BaseRenderer {
     constructor(options?: RenderOptions);
     /**
      * Build theme configuration based on options
+     * Note: background option is NOT applied to theme.colors.background
+     * It's only used for page background in renderPage() to avoid affecting
+     * component colors that use var(--wf-bg)
      */
-    protected buildTheme(options: Required<RenderOptions>): ThemeConfig;
+    protected buildTheme(options: RenderOptions): ThemeConfig;
     /**
      * Render a wireframe document to HTML and CSS
      */

package/dist/renderer.d.ts

@@ -16,6 +16,8 @@ interface RenderOptions {
     minify?: boolean;
     /** CSS class prefix for scoping */
     classPrefix?: string;
+    /** Background color (e.g., '#ffffff', 'transparent') */
+    background?: string;
 }
 interface RenderResult {
     /** Rendered HTML content */
@@ -121,8 +123,11 @@ declare abstract class BaseRenderer {
     constructor(options?: RenderOptions);
     /**
      * Build theme configuration based on options
+     * Note: background option is NOT applied to theme.colors.background
+     * It's only used for page background in renderPage() to avoid affecting
+     * component colors that use var(--wf-bg)
      */
-    protected buildTheme(options: Required<RenderOptions>): ThemeConfig;
+    protected buildTheme(options: RenderOptions): ThemeConfig;
     /**
      * Render a wireframe document to HTML and CSS
      */

package/dist/renderer.js

@@ -1685,6 +1685,9 @@ var BaseRenderer = class {
   }
   /**
    * Build theme configuration based on options
+   * Note: background option is NOT applied to theme.colors.background
+   * It's only used for page background in renderPage() to avoid affecting
+   * component colors that use var(--wf-bg)
    */
   buildTheme(options) {
     return options.theme === "dark" ? { ...darkTheme } : { ...defaultTheme };
@@ -49284,7 +49287,10 @@ var HtmlRenderer = class extends BaseRenderer {
     const title = node.title ? `<title>${this.escapeHtml(node.title)}</title>
 ` : "";
     const commonStyles = this.buildCommonStyles(node);
-    const viewportStyle = `position: relative; width: ${viewport.width}px; height: ${viewport.height}px; overflow: hidden`;
+    let viewportStyle = `position: relative; width: ${viewport.width}px; height: ${viewport.height}px; overflow: hidden`;
+    if (this.context.options.background) {
+      viewportStyle += `; background: ${this.context.options.background}`;
+    }
     const combinedStyle = commonStyles ? `${viewportStyle}; ${commonStyles}` : viewportStyle;
     const dataAttrs = `data-viewport-width="${viewport.width}" data-viewport-height="${viewport.height}" data-viewport-label="${viewport.label}"`;
     return `<div class="${classes}" style="${combinedStyle}" ${dataAttrs}>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wireweave/core",
-  "version": "1.3.0",
+  "version": "1.4.0-beta.1",
   "description": "Core parser and renderer for wireweave",
   "type": "module",
   "main": "dist/index.js",