cyrus-studio 1.0.7 → 1.0.8

package/dist/index.cjs

@@ -29,93 +29,1139 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // packages/cyrus-sdk/src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  CYRUS_MCP_TOOL_DEFINITIONS: () => CYRUS_MCP_TOOL_DEFINITIONS,
+  CyrusCanvasController: () => CyrusCanvasController,
   CyrusCanvasIframe: () => CyrusCanvasIframe,
+  DESIGN_SYSTEM_PRESETS: () => DESIGN_SYSTEM_PRESETS,
+  compileCyrusIR: () => compileCyrusIR,
   createCyrusEmbedUrl: () => createCyrusEmbedUrl,
+  executeCyrusMCPTool: () => executeCyrusMCPTool,
+  exportToCssVariables: () => exportToCssVariables,
+  generateFlutter: () => generateFlutter,
+  generateHtmlCss: () => generateHtmlCss,
+  generateReactTailwind: () => generateReactTailwind,
+  generateSwiftUI: () => generateSwiftUI,
   getCyrusLLMSystemPrompt: () => getCyrusLLMSystemPrompt,
-  validateAndRepairCyrusIR: () => validateAndRepairCyrusIR
+  importTailwindConfig: () => importTailwindConfig,
+  parseFigmaTokens: () => parseFigmaTokens,
+  renderHeadlessSVG: () => renderHeadlessSVG,
+  validateAndRepairCyrusIR: () => validateAndRepairCyrusIR,
+  validateIRHeadless: () => validateIRHeadless
 });
 module.exports = __toCommonJS(index_exports);
 var import_react = __toESM(require("react"), 1);
 
 // packages/cyrus-sdk/src/protocol.ts
-function validateAndRepairCyrusIR(rawInput) {
+function validateAndRepairCyrusIR(rawInput, fallbackTitle = "AI Application") {
   let doc = rawInput;
   if (typeof rawInput === "string") {
+    const clean = rawInput.trim();
+    const stripped = clean.replace(/```(?:json)?\s*([\s\S]*?)\s*```/gi, "$1").trim();
     try {
-      const cleaned = rawInput.replace(/```json\s*/gi, "").replace(/```\s*$/gi, "").trim();
-      doc = JSON.parse(cleaned);
+      doc = JSON.parse(stripped);
     } catch {
-      return { version: "1.0", projectTitle: "AI Application", pages: [{ name: "Page 1", elements: [] }] };
+      const start = clean.indexOf("{");
+      const end = clean.lastIndexOf("}");
+      if (start !== -1 && end !== -1 && end > start) {
+        let jsonSub = clean.substring(start, end + 1).replace(/,\s*([\]}])/g, "$1");
+        try {
+          doc = JSON.parse(jsonSub);
+        } catch {
+          const openBrackets = (jsonSub.match(/\[/g) || []).length;
+          const closeBrackets = (jsonSub.match(/\]/g) || []).length;
+          const openBraces = (jsonSub.match(/\{/g) || []).length;
+          const closeBraces = (jsonSub.match(/\}/g) || []).length;
+          for (let i = 0; i < openBrackets - closeBrackets; i++) jsonSub += "]";
+          for (let i = 0; i < openBraces - closeBraces; i++) jsonSub += "}";
+          try {
+            doc = JSON.parse(jsonSub);
+          } catch {
+            doc = null;
+          }
+        }
+      }
     }
   }
   if (!doc || typeof doc !== "object") {
-    return { version: "1.0", projectTitle: "AI Application", pages: [{ name: "Page 1", elements: [] }] };
+    return {
+      version: "1.0",
+      projectTitle: fallbackTitle,
+      type: "webapp",
+      theme: "dark",
+      palette: { primary: "#0071e3", secondary: "#7d2ae8", background: "#09090b", surface: "#18181b", text: "#ffffff" },
+      pages: [{ name: "Home", slug: "home", elements: [] }]
+    };
   }
-  const pages = Array.isArray(doc.pages) ? doc.pages : [{ name: "Home", elements: doc.elements || [] }];
+  const rawElements = Array.isArray(doc.elements) ? doc.elements : Array.isArray(doc.pages?.[0]?.elements) ? doc.pages[0].elements : [];
+  const sanitizedElements = rawElements.map((el, idx) => {
+    return {
+      id: el.id || `el_${Date.now()}_${idx}`,
+      type: el.type || "card",
+      name: el.name || el.content?.title || el.content?.headline || el.type || `Element ${idx + 1}`,
+      x: typeof el.x === "number" ? el.x : 0,
+      y: typeof el.y === "number" ? el.y : idx * 120,
+      width: typeof el.width === "number" ? el.width : 1200,
+      height: typeof el.height === "number" ? el.height : 160,
+      styles: el.styles || {
+        backgroundColor: "#18181b",
+        textColor: "#ffffff",
+        borderRadius: 12,
+        padding: 20
+      },
+      content: el.content || {}
+    };
+  });
+  const pages = Array.isArray(doc.pages) && doc.pages.length > 0 ? doc.pages.map((p, idx) => ({
+    id: p.id || `page_${idx + 1}`,
+    name: p.name || `Page ${idx + 1}`,
+    slug: p.slug || `page-${idx + 1}`,
+    backgroundColor: p.backgroundColor || doc.palette?.background || "#09090b",
+    elements: Array.isArray(p.elements) ? p.elements : sanitizedElements
+  })) : [{
+    id: "page_home",
+    name: "Home",
+    slug: "home",
+    backgroundColor: doc.palette?.background || "#09090b",
+    elements: sanitizedElements
+  }];
   return {
     version: "1.0",
-    projectTitle: String(doc.projectTitle || doc.name || "AI Application"),
+    projectTitle: String(doc.projectTitle || doc.title || doc.name || fallbackTitle),
     type: doc.type || "webapp",
-    theme: doc.theme || "light",
-    palette: doc.palette || { primary: "#0071e3", secondary: "#7d2ae8", background: "#ffffff", surface: "#f5f5f7", text: "#1d1d1f" },
-    pages: pages.map((p, idx) => ({
-      name: p.name || `Page ${idx + 1}`,
-      slug: p.slug || `page-${idx + 1}`,
-      elements: Array.isArray(p.elements) ? p.elements : []
-    }))
+    theme: doc.theme || "dark",
+    palette: doc.palette || { primary: "#0071e3", secondary: "#7d2ae8", background: "#09090b", surface: "#18181b", text: "#ffffff" },
+    pages
   };
 }
-function getCyrusLLMSystemPrompt() {
-  return `Output your designs strictly in the Cyrus IR JSON format:
+function getCyrusLLMSystemPrompt(options = {}) {
+  const theme = options.theme || "dark";
+  const type = options.type || "webapp";
+  return `You are Cyrus Studio AI, the world's most capable visual UI/UX designer.
+When generating user interfaces, output ONLY valid JSON adhering strictly to the Cyrus IR schema.
+
+CANVAS RESOLUTION & LAYOUT:
+- Desktop standard width: 1440px.
+- Use explicit coordinates (x, y, width, height) stacked vertically without overlapping.
+- Use composite component types for realistic, high-fidelity interfaces.
+
+SUPPORTED COMPONENT TYPES:
+1. "navbar": Navigation header with brandName, icon, links array, buttonText.
+2. "hero" / "heroSection": Hero section with badge, headline, subhead, buttonText, secondaryButtonText, imageUrl.
+3. "featureCard" / "featureSection": Feature card with title, subtitle, description/text, icon, buttonText.
+4. "pricingCard": Pricing tier with planName, price, badge, features array, buttonText.
+5. "metricCard" / "statCard" / "kpiCard": KPI card with value, title/label, trend (e.g. "+14.2%"), icon.
+6. "testimonialCard": Customer quote with text, author (title), role (subtitle), avatar (imageUrl), rating (1-5).
+7. "productCard": E-commerce card with title, price, text (description), imageUrl, badge, buttonText.
+8. "chart" / "lineChart" / "barChart" / "areaChart": Data visualization cards with title and subtitle.
+9. "table" / "dataTable": Data grid component.
+10. "footer": Footer section with brandName, copyright text, and links array.
+11. "image": Dedicated image component with imageUrl, alt, borderRadius.
+12. "button" / "badge": Interactive buttons and status chips with label/text and icon.
+
+AVAILABLE ICONS:
+"Sparkles", "Cpu", "Zap", "Flame", "Shield", "Activity", "Layers", "ArrowRight", "Database", "Terminal", "Star", "Users", "Globe", "Lock", "Cloud", "Code2", "Heart", "TrendingUp", "TrendingDown", "Rocket", "Settings", "Package", "Camera", "Music", "Phone", "Mail", "Search", "Home", "Menu", "Bell", "CreditCard", "ShoppingBag", "Award", "CheckCircle2", "Download", "Filter", "Grid", "List"
+
+OUTPUT FORMAT (Valid JSON only):
 {
   "version": "1.0",
-  "projectTitle": "Title",
-  "type": "webapp",
-  "theme": "light",
+  "projectTitle": "Application Title",
+  "type": "${type}",
+  "theme": "${theme}",
   "pages": [
-    { "name": "Home", "elements": [{ "type": "navbar" }, { "type": "heading" }, { "type": "button" }] }
+    {
+      "name": "Home",
+      "elements": [
+        {
+          "type": "navbar",
+          "name": "Navbar",
+          "x": 0,
+          "y": 0,
+          "width": 1440,
+          "height": 72,
+          "styles": {
+            "backgroundColor": "#0f0f11",
+            "textColor": "#ffffff",
+            "borderRadius": 0
+          },
+          "content": {
+            "brandName": "Acme Inc",
+            "icon": "Sparkles",
+            "links": ["Features", "Pricing", "Docs"],
+            "buttonText": "Get Started"
+          }
+        }
+      ]
+    }
   ]
 }`;
 }
 
+// packages/cyrus-sdk/src/mcp.ts
+var CYRUS_MCP_TOOL_DEFINITIONS = [
+  {
+    name: "cyrus_create_element",
+    description: "Create and place a new UI widget/element on the Cyrus visual canvas (e.g. navbar, hero, button, pricingCard, featureCard, metricCard, chart).",
+    inputSchema: {
+      type: "object",
+      properties: {
+        type: {
+          type: "string",
+          description: "Element type: navbar, hero, button, badge, input, searchBar, pricingCard, featureCard, testimonialCard, metricCard, lineChart, footer, container, etc."
+        },
+        name: { type: "string", description: "Human-readable element name" },
+        x: { type: "number", description: "X position in pixels" },
+        y: { type: "number", description: "Y position in pixels" },
+        width: { type: "number", description: "Width in pixels (e.g. 1440 for full-width navbar/hero)" },
+        height: { type: "number", description: "Height in pixels" },
+        styles: {
+          type: "object",
+          description: "Visual styles (backgroundColor, textColor, borderRadius, padding, shadow, borderColor, fontSize)"
+        },
+        content: {
+          type: "object",
+          description: "Component content properties (headline, title, subtitle, buttonText, icon, brandName, price, features, imageUrl)"
+        }
+      },
+      required: ["type"]
+    }
+  },
+  {
+    name: "cyrus_update_styles",
+    description: "Update visual styles (colors, typography, border radius, padding, background gradients) of an existing canvas element.",
+    inputSchema: {
+      type: "object",
+      properties: {
+        elementId: { type: "string", description: "Unique ID of the canvas element" },
+        styles: {
+          type: "object",
+          description: 'Updated style dictionary (e.g. { backgroundColor: "#0071e3", borderRadius: 16 })'
+        }
+      },
+      required: ["elementId", "styles"]
+    }
+  },
+  {
+    name: "cyrus_update_content",
+    description: "Update text, headlines, badges, button copy, icons, prices, or images of an existing canvas element.",
+    inputSchema: {
+      type: "object",
+      properties: {
+        elementId: { type: "string", description: "Unique ID of the canvas element" },
+        content: {
+          type: "object",
+          description: 'Updated content dictionary (e.g. { headline: "Next-Gen AI", buttonText: "Get Started" })'
+        }
+      },
+      required: ["elementId", "content"]
+    }
+  },
+  {
+    name: "cyrus_apply_design_system",
+    description: "Apply a global design system token set (colors, primary brand, fonts, border radii, presets) across the entire canvas.",
+    inputSchema: {
+      type: "object",
+      properties: {
+        preset: {
+          type: "string",
+          enum: ["shadcn-zinc", "shadcn-slate", "shadcn-violet", "shadcn-rose", "apple-hig", "tailwind-cyberpunk"],
+          description: "Pre-configured design system preset"
+        },
+        colors: {
+          type: "object",
+          description: "Custom color overrides (primary, secondary, background, foreground, border)"
+        },
+        radii: {
+          type: "object",
+          description: "Corner radiuses (sm, md, lg, xl, full)"
+        }
+      }
+    }
+  },
+  {
+    name: "cyrus_batch_update_elements",
+    description: "Apply updates to multiple elements atomically in one step.",
+    inputSchema: {
+      type: "object",
+      properties: {
+        updates: {
+          type: "array",
+          items: {
+            type: "object",
+            properties: {
+              id: { type: "string" },
+              styles: { type: "object" },
+              content: { type: "object" },
+              x: { type: "number" },
+              y: { type: "number" },
+              width: { type: "number" },
+              height: { type: "number" }
+            },
+            required: ["id"]
+          }
+        }
+      },
+      required: ["updates"]
+    }
+  },
+  {
+    name: "cyrus_get_canvas_document",
+    description: "Get the full structured Cyrus IR JSON document of the current canvas for analysis or code generation.",
+    inputSchema: {
+      type: "object",
+      properties: {}
+    }
+  },
+  {
+    name: "cyrus_take_canvas_snapshot",
+    description: "Request a visual layout snapshot / SVG representation for multimodal inspection and layout validation.",
+    inputSchema: {
+      type: "object",
+      properties: {
+        format: { type: "string", enum: ["svg", "json", "png"], default: "svg" }
+      }
+    }
+  },
+  {
+    name: "cyrus_stream_elements",
+    description: "Stream elements onto the canvas progressively as the AI generates them (real-time materialization).",
+    inputSchema: {
+      type: "object",
+      properties: {
+        elements: {
+          type: "array",
+          description: "Batch of incremental elements to render with spring animation"
+        },
+        isComplete: { type: "boolean", description: "Whether streaming generation has finished" }
+      },
+      required: ["elements"]
+    }
+  }
+];
+async function executeCyrusMCPTool(controller, toolCall) {
+  const { name, arguments: args, id } = toolCall;
+  switch (name) {
+    case "cyrus_create_element": {
+      controller.sendMessage({
+        type: "CYRUS_CREATE_ELEMENT",
+        payload: {
+          element: {
+            type: args.type,
+            name: args.name,
+            x: args.x,
+            y: args.y,
+            width: args.width,
+            height: args.height,
+            styles: args.styles,
+            content: args.content
+          },
+          select: true
+        }
+      });
+      return { toolCallId: id, success: true, data: { created: true, type: args.type } };
+    }
+    case "cyrus_update_styles": {
+      controller.sendMessage({
+        type: "CYRUS_UPDATE_ELEMENT",
+        payload: {
+          id: args.elementId,
+          updates: { styles: args.styles }
+        }
+      });
+      return { toolCallId: id, success: true, data: { updated: true, elementId: args.elementId } };
+    }
+    case "cyrus_update_content": {
+      controller.sendMessage({
+        type: "CYRUS_UPDATE_ELEMENT",
+        payload: {
+          id: args.elementId,
+          updates: { content: args.content }
+        }
+      });
+      return { toolCallId: id, success: true, data: { updated: true, elementId: args.elementId } };
+    }
+    case "cyrus_apply_design_system": {
+      controller.sendMessage({
+        type: "CYRUS_SET_DESIGN_TOKENS",
+        payload: args
+      });
+      return { toolCallId: id, success: true, data: { appliedPreset: args.preset || "custom" } };
+    }
+    case "cyrus_batch_update_elements": {
+      if (Array.isArray(args.updates)) {
+        for (const update of args.updates) {
+          controller.sendMessage({
+            type: "CYRUS_UPDATE_ELEMENT",
+            payload: {
+              id: update.id,
+              updates: {
+                styles: update.styles,
+                content: update.content,
+                x: update.x,
+                y: update.y,
+                width: update.width,
+                height: update.height
+              }
+            }
+          });
+        }
+      }
+      return { toolCallId: id, success: true, data: { updatedCount: args.updates?.length || 0 } };
+    }
+    case "cyrus_stream_elements": {
+      controller.sendMessage({
+        type: "CYRUS_STREAM_INCREMENTAL_ELEMENTS",
+        payload: {
+          elements: args.elements || [],
+          isComplete: Boolean(args.isComplete)
+        }
+      });
+      return { toolCallId: id, success: true, data: { streamedCount: args.elements?.length || 0 } };
+    }
+    case "cyrus_take_canvas_snapshot": {
+      controller.sendMessage({
+        type: "CYRUS_REQUEST_CANVAS_SNAPSHOT",
+        payload: { format: args.format || "svg" }
+      });
+      return { toolCallId: id, success: true, data: { requested: true } };
+    }
+    default:
+      return {
+        toolCallId: id,
+        success: false,
+        error: `Unknown Cyrus MCP Tool: ${name}`
+      };
+  }
+}
+
+// packages/cyrus-sdk/src/tokens.ts
+var DESIGN_SYSTEM_PRESETS = {
+  "shadcn-zinc": {
+    preset: "shadcn-zinc",
+    colors: {
+      primary: "#18181b",
+      primaryForeground: "#fafafa",
+      secondary: "#27272a",
+      secondaryForeground: "#fafafa",
+      accent: "#0071e3",
+      accentForeground: "#ffffff",
+      background: "#09090b",
+      foreground: "#f4f4f5",
+      surface: "#121215",
+      card: "#18181b",
+      cardForeground: "#f4f4f5",
+      muted: "#27272a",
+      mutedForeground: "#a1a1aa",
+      border: "rgba(255, 255, 255, 0.1)",
+      ring: "#0071e3"
+    },
+    radii: { sm: 6, md: 8, lg: 12, xl: 16, full: 9999 },
+    typography: {
+      fontFamilySans: "Inter, system-ui, -apple-system, sans-serif",
+      baseFontSize: 14
+    }
+  },
+  "shadcn-slate": {
+    preset: "shadcn-slate",
+    colors: {
+      primary: "#0f172a",
+      primaryForeground: "#f8fafc",
+      secondary: "#1e293b",
+      secondaryForeground: "#f8fafc",
+      accent: "#38bdf8",
+      accentForeground: "#0f172a",
+      background: "#020617",
+      foreground: "#f8fafc",
+      surface: "#0f172a",
+      card: "#1e293b",
+      cardForeground: "#f8fafc",
+      muted: "#334155",
+      mutedForeground: "#94a3b8",
+      border: "rgba(148, 163, 184, 0.15)",
+      ring: "#38bdf8"
+    },
+    radii: { sm: 4, md: 6, lg: 10, xl: 14, full: 9999 }
+  },
+  "shadcn-violet": {
+    preset: "shadcn-violet",
+    colors: {
+      primary: "#7c3aed",
+      primaryForeground: "#ffffff",
+      secondary: "#4c1d95",
+      secondaryForeground: "#f5f3ff",
+      accent: "#a78bfa",
+      accentForeground: "#2e1065",
+      background: "#0f0a1c",
+      foreground: "#f5f3ff",
+      surface: "#1a1033",
+      card: "#241447",
+      cardForeground: "#f5f3ff",
+      muted: "#2e1065",
+      mutedForeground: "#c4b5fd",
+      border: "rgba(167, 139, 250, 0.2)",
+      ring: "#7c3aed"
+    },
+    radii: { sm: 8, md: 12, lg: 16, xl: 24, full: 9999 }
+  },
+  "shadcn-rose": {
+    preset: "shadcn-rose",
+    colors: {
+      primary: "#e11d48",
+      primaryForeground: "#ffffff",
+      secondary: "#4c0519",
+      secondaryForeground: "#ffe4e6",
+      accent: "#fb7185",
+      accentForeground: "#881337",
+      background: "#0f0508",
+      foreground: "#fff1f2",
+      surface: "#1c0b11",
+      card: "#2a111a",
+      cardForeground: "#fff1f2",
+      muted: "#4c0519",
+      mutedForeground: "#fda4af",
+      border: "rgba(251, 113, 133, 0.2)",
+      ring: "#e11d48"
+    },
+    radii: { sm: 6, md: 10, lg: 14, xl: 18, full: 9999 }
+  },
+  "apple-hig": {
+    preset: "apple-hig",
+    colors: {
+      primary: "#0071e3",
+      primaryForeground: "#ffffff",
+      secondary: "#5e5ce6",
+      secondaryForeground: "#ffffff",
+      accent: "#30b0c7",
+      accentForeground: "#ffffff",
+      background: "#000000",
+      foreground: "#f5f5f7",
+      surface: "#1c1c1e",
+      card: "#2c2c2e",
+      cardForeground: "#f5f5f7",
+      muted: "#3a3a3c",
+      mutedForeground: "#86868b",
+      border: "rgba(255, 255, 255, 0.12)",
+      ring: "#0071e3"
+    },
+    radii: { sm: 8, md: 12, lg: 16, xl: 22, full: 9999 },
+    typography: {
+      fontFamilySans: '-apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif',
+      baseFontSize: 15
+    }
+  },
+  "tailwind-cyberpunk": {
+    preset: "tailwind-cyberpunk",
+    colors: {
+      primary: "#00ffcc",
+      primaryForeground: "#050508",
+      secondary: "#ff007f",
+      secondaryForeground: "#ffffff",
+      accent: "#ffe600",
+      accentForeground: "#000000",
+      background: "#08080f",
+      foreground: "#00ffcc",
+      surface: "#101020",
+      card: "#16162d",
+      cardForeground: "#ffffff",
+      muted: "#202040",
+      mutedForeground: "#00c8ff",
+      border: "#ff007f",
+      ring: "#00ffcc"
+    },
+    radii: { sm: 2, md: 4, lg: 6, xl: 8, full: 0 }
+  }
+};
+function parseFigmaTokens(rawTokensJson) {
+  const data = typeof rawTokensJson === "string" ? JSON.parse(rawTokensJson) : rawTokensJson;
+  const tokens = {
+    preset: "custom",
+    colors: {},
+    radii: {},
+    typography: {}
+  };
+  const extractVal = (val) => {
+    if (!val) return "";
+    if (typeof val === "string") return val;
+    if (typeof val === "object" && val.value) return extractVal(val.value);
+    return String(val);
+  };
+  const traverse = (obj, path = []) => {
+    if (!obj || typeof obj !== "object") return;
+    for (const [key, val] of Object.entries(obj)) {
+      const currentPath = [...path, key.toLowerCase()];
+      const pathStr = currentPath.join(".");
+      if (val && typeof val === "object" && "value" in val) {
+        const rawValue = extractVal(val.value);
+        if (pathStr.includes("color") || pathStr.includes("primary") || pathStr.includes("background")) {
+          if (pathStr.includes("primary")) tokens.colors.primary = rawValue;
+          else if (pathStr.includes("secondary")) tokens.colors.secondary = rawValue;
+          else if (pathStr.includes("background") || pathStr.includes("bg")) tokens.colors.background = rawValue;
+          else if (pathStr.includes("surface") || pathStr.includes("card")) tokens.colors.card = rawValue;
+          else if (pathStr.includes("text") || pathStr.includes("foreground")) tokens.colors.foreground = rawValue;
+          else if (pathStr.includes("accent")) tokens.colors.accent = rawValue;
+          else if (pathStr.includes("border")) tokens.colors.border = rawValue;
+          else tokens.colors[key] = rawValue;
+        } else if (pathStr.includes("radius") || pathStr.includes("rounded")) {
+          const num = parseInt(rawValue, 10);
+          if (!isNaN(num)) {
+            if (pathStr.includes("sm")) tokens.radii.sm = num;
+            else if (pathStr.includes("md")) tokens.radii.md = num;
+            else if (pathStr.includes("lg")) tokens.radii.lg = num;
+            else if (pathStr.includes("xl")) tokens.radii.xl = num;
+          }
+        }
+      } else {
+        traverse(val, currentPath);
+      }
+    }
+  };
+  traverse(data);
+  return tokens;
+}
+function importTailwindConfig(tailwindConfig) {
+  const config = typeof tailwindConfig === "string" ? JSON.parse(tailwindConfig) : tailwindConfig;
+  const themeColors = config?.theme?.extend?.colors || config?.theme?.colors || {};
+  const themeRadii = config?.theme?.extend?.borderRadius || config?.theme?.borderRadius || {};
+  const colors = {};
+  for (const [k, v] of Object.entries(themeColors)) {
+    if (typeof v === "string") colors[k] = v;
+    else if (typeof v === "object" && v !== null) {
+      if ("DEFAULT" in v) colors[k] = v.DEFAULT;
+      else if ("500" in v) colors[k] = v["500"];
+      else if ("600" in v) colors[k] = v["600"];
+    }
+  }
+  return {
+    preset: "custom",
+    colors: {
+      primary: colors.primary || colors.blue || "#0071e3",
+      secondary: colors.secondary || colors.purple || "#7d2ae8",
+      background: colors.background || "#09090b",
+      foreground: colors.foreground || "#ffffff",
+      surface: colors.surface || colors.card || "#18181b",
+      border: colors.border || "rgba(255,255,255,0.1)",
+      ...colors
+    },
+    radii: {
+      sm: parseInt(String(themeRadii.sm || 6), 10) || 6,
+      md: parseInt(String(themeRadii.md || 10), 10) || 10,
+      lg: parseInt(String(themeRadii.lg || 14), 10) || 14,
+      xl: parseInt(String(themeRadii.xl || 20), 10) || 20
+    }
+  };
+}
+function exportToCssVariables(tokens) {
+  const vars = [":root {"];
+  if (tokens.colors) {
+    for (const [k, v] of Object.entries(tokens.colors)) {
+      if (v) vars.push(`  --color-${k}: ${v};`);
+    }
+  }
+  if (tokens.radii) {
+    for (const [k, v] of Object.entries(tokens.radii)) {
+      if (typeof v === "number") vars.push(`  --radius-${k}: ${v}px;`);
+    }
+  }
+  vars.push("}");
+  return vars.join("\n");
+}
+
+// packages/cyrus-sdk/src/generators.ts
+function escapeString(str) {
+  return (str || "").replace(/\\/g, "\\\\").replace(/"/g, '\\"');
+}
+function generateReactTailwind(doc) {
+  const page = doc.pages[0] || { name: "Home", elements: [] };
+  const elements = page.elements || [];
+  return `import React from 'react';
+import { Sparkles, ArrowRight, CheckCircle2, TrendingUp, Star, Globe, Shield, Zap, Cpu } from 'lucide-react';
+
+export default function ${doc.projectTitle.replace(/[^a-zA-Z0-9]/g, "") || "App"}() {
+  return (
+    <div className="min-h-screen bg-[${doc.palette?.background || "#09090b"}] text-[${doc.palette?.text || "#ffffff"}] font-sans antialiased overflow-x-hidden selection:bg-[#0071e3]/30">
+      <div className="max-w-[1440px] mx-auto px-6 py-8 space-y-12">
+${elements.map((el) => renderReactElement(el)).join("\n\n")}
+      </div>
+    </div>
+  );
+}
+`;
+}
+function renderReactElement(el) {
+  const c = el.content || {};
+  const s = el.styles || {};
+  const bg = s.backgroundGradient || s.backgroundColor || "#18181b";
+  const tc = s.textColor || "#ffffff";
+  const radius = s.borderRadius ?? 14;
+  switch (el.type) {
+    case "navbar":
+      return `        {/* Navbar */}
+        <header className="w-full flex items-center justify-between px-8 py-4 rounded-[${radius}px] bg-[${bg}] text-[${tc}] border border-white/10 backdrop-blur-md shadow-lg">
+          <div className="flex items-center gap-3">
+            <div className="w-9 h-9 rounded-xl bg-[#0071e3] text-white flex items-center justify-center font-bold">
+              <Sparkles className="w-5 h-5" />
+            </div>
+            <span className="text-lg font-bold tracking-tight">${escapeString(c.brandName || c.title || "Brand")}</span>
+          </div>
+          <nav className="hidden md:flex items-center gap-8 text-sm font-medium text-white/80">
+            ${(c.links || ["Features", "Solutions", "Pricing", "Docs"]).map((l) => `<a href="#${l.toLowerCase()}" className="hover:text-white transition-colors">${escapeString(l)}</a>`).join("\n            ")}
+          </nav>
+          ${c.buttonText ? `<button className="px-5 py-2 rounded-xl bg-[#0071e3] hover:bg-[#0077ed] text-white text-sm font-semibold shadow-md transition-all active:scale-95">${escapeString(c.buttonText)}</button>` : ""}
+        </header>`;
+    case "hero":
+    case "heroSection":
+      return `        {/* Hero Section */}
+        <section className="relative overflow-hidden rounded-[${radius}px] px-8 py-20 md:py-28 text-center flex flex-col items-center justify-center bg-[${bg}] border border-white/10 shadow-2xl">
+          ${c.badge ? `<div className="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full bg-white/10 text-white/90 text-xs font-semibold uppercase tracking-wider mb-6 border border-white/15 backdrop-blur-md">${escapeString(c.badge)}</div>` : ""}
+          <h1 className="text-4xl md:text-6xl font-extrabold tracking-tight max-w-4xl text-white leading-tight">
+            ${escapeString(c.headline || c.title || "Build the Future of Web Applications")}
+          </h1>
+          <p className="mt-6 text-lg md:text-xl text-white/70 max-w-2xl leading-relaxed">
+            ${escapeString(c.subhead || c.subtitle || c.text || "Experience seamless visual design powered by generative artificial intelligence.")}
+          </p>
+          <div className="mt-10 flex flex-wrap items-center justify-center gap-4">
+            <button className="px-8 py-3.5 rounded-xl bg-[#0071e3] hover:bg-[#0077ed] text-white font-semibold shadow-lg transition-all active:scale-95 flex items-center gap-2">
+              <span>${escapeString(c.buttonText || "Get Started Free")}</span>
+              <ArrowRight className="w-4 h-4" />
+            </button>
+            ${c.secondaryButtonText ? `<button className="px-8 py-3.5 rounded-xl bg-white/10 hover:bg-white/15 text-white font-semibold border border-white/20 backdrop-blur-md transition-all active:scale-95">${escapeString(c.secondaryButtonText)}</button>` : ""}
+          </div>
+          ${c.imageUrl ? `<div className="mt-14 w-full max-w-5xl rounded-2xl overflow-hidden border border-white/15 shadow-2xl"><img src="${escapeString(c.imageUrl)}" alt="Preview" className="w-full h-auto object-cover" /></div>` : ""}
+        </section>`;
+    case "pricingCard":
+      return `        {/* Pricing Card */}
+        <div className="rounded-[${radius}px] p-8 bg-[${bg}] text-[${tc}] border border-white/10 shadow-xl flex flex-col justify-between">
+          <div>
+            ${c.badge ? `<span className="inline-block px-3 py-1 rounded-full bg-[#0071e3]/20 text-[#0071e3] text-xs font-semibold mb-4">${escapeString(c.badge)}</span>` : ""}
+            <h3 className="text-xl font-bold">${escapeString(c.planName || c.title || "Pro Plan")}</h3>
+            <div className="mt-4 flex items-baseline gap-1">
+              <span className="text-4xl font-extrabold text-[#0071e3]">${escapeString(c.price || "$29/mo")}</span>
+            </div>
+            <ul className="mt-8 space-y-3 text-sm text-white/80">
+              ${(c.features || ["Unlimited Projects", "Custom Domains", "Priority 24/7 Support", "Team Collaboration"]).map((f) => `<li className="flex items-center gap-2.5"><CheckCircle2 className="w-4 h-4 text-[#34c759] shrink-0" /><span>${escapeString(f)}</span></li>`).join("\n              ")}
+            </ul>
+          </div>
+          <button className="mt-8 w-full py-3 rounded-xl bg-[#0071e3] hover:bg-[#0077ed] text-white font-semibold shadow-md transition-all active:scale-95">
+            ${escapeString(c.buttonText || "Choose Plan")}
+          </button>
+        </div>`;
+    case "metricCard":
+    case "statCard":
+      return `        {/* Metric Card */}
+        <div className="rounded-[${radius}px] p-6 bg-[${bg}] text-[${tc}] border border-white/10 shadow-lg flex items-center justify-between">
+          <div>
+            <p className="text-sm font-medium text-white/60">${escapeString(c.title || c.label || "Total Metric")}</p>
+            <p className="text-3xl font-extrabold text-white mt-1">${escapeString(c.value || "100%")}</p>
+            ${c.trend ? `<p className="text-xs font-semibold text-[#34c759] mt-2 flex items-center gap-1"><TrendingUp className="w-3.5 h-3.5" /> ${escapeString(c.trend)}</p>` : ""}
+          </div>
+          <div className="w-12 h-12 rounded-xl bg-white/5 border border-white/10 flex items-center justify-center text-[#0071e3]">
+            <Zap className="w-6 h-6" />
+          </div>
+        </div>`;
+    case "footer":
+      return `        {/* Footer */}
+        <footer className="w-full py-12 border-t border-white/10 flex flex-col md:flex-row items-center justify-between gap-6 text-sm text-white/60">
+          <div className="flex items-center gap-2">
+            <span className="font-bold text-white">${escapeString(c.brandName || "Cyrus")}</span>
+            <span>\u2014 ${escapeString(c.text || c.copyright || "\xA9 2026 All rights reserved.")}</span>
+          </div>
+          <div className="flex items-center gap-6">
+            ${(c.links || ["Privacy Policy", "Terms of Service", "Support", "GitHub"]).map((l) => `<a href="#" className="hover:text-white transition-colors">${escapeString(l)}</a>`).join("\n            ")}
+          </div>
+        </footer>`;
+    default:
+      return `        {/* ${el.name || el.type} */}
+        <div className="rounded-[${radius}px] p-6 bg-[${bg}] text-[${tc}] border border-white/10 shadow-md">
+          <h4 className="text-lg font-bold">${escapeString(c.title || c.headline || el.name || "Component")}</h4>
+          <p className="text-sm text-white/70 mt-2">${escapeString(c.text || c.description || c.subtitle || "")}</p>
+        </div>`;
+  }
+}
+function generateHtmlCss(doc) {
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>${escapeString(doc.projectTitle)}</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
+  <style>
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    body {
+      font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+      background-color: ${doc.palette?.background || "#09090b"};
+      color: ${doc.palette?.text || "#ffffff"};
+      min-height: 100vh;
+      padding: 32px 24px;
+    }
+    .container { max-width: 1440px; margin: 0 auto; display: flex; flex-direction: column; gap: 32px; }
+    .card { background: #18181b; border: 1px solid rgba(255,255,255,0.1); border-radius: 14px; padding: 24px; }
+    .btn { background: #0071e3; color: #ffffff; border: none; border-radius: 10px; padding: 10px 20px; font-weight: 600; cursor: pointer; }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <header class="card" style="display: flex; justify-content: space-between; align-items: center;">
+      <h2 style="font-weight: 800;">${escapeString(doc.projectTitle)}</h2>
+      <button class="btn">Get Started</button>
+    </header>
+  </div>
+</body>
+</html>`;
+}
+function generateFlutter(doc) {
+  return `import 'package:flutter/material.dart';
+
+void main() => runApp(const CyrusGeneratedApp());
+
+class CyrusGeneratedApp extends StatelessWidget {
+  const CyrusGeneratedApp({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return MaterialApp(
+      title: '${escapeString(doc.projectTitle)}',
+      theme: ThemeData.dark().copyWith(
+        scaffoldBackgroundColor: const Color(0xFF09090B),
+      ),
+      home: const HomePage(),
+    );
+  }
+}
+
+class HomePage extends StatelessWidget {
+  const HomePage({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        title: const Text('${escapeString(doc.projectTitle)}'),
+        backgroundColor: const Color(0xFF18181B),
+      ),
+      body: const Center(
+        child: Text(
+          'Exported with Cyrus Studio',
+          style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
+        ),
+      ),
+    );
+  }
+}
+`;
+}
+function generateSwiftUI(doc) {
+  return `import SwiftUI
+
+struct ContentView: View {
+    var body: some View {
+        ZStack {
+            Color(red: 0.04, green: 0.04, blue: 0.05).ignoresSafeArea()
+            VStack(spacing: 20) {
+                Text("${escapeString(doc.projectTitle)}")
+                    .font(.largeTitle)
+                    .fontWeight(.bold)
+                    .foregroundColor(.white)
+            }
+            .padding()
+        }
+    }
+}
+`;
+}
+
+// packages/cyrus-sdk/src/compiler.ts
+function compileCyrusIR(rawDocument, options = {}) {
+  const doc = validateAndRepairCyrusIR(rawDocument);
+  const framework = options.framework || "react-tailwind";
+  switch (framework) {
+    case "react-tailwind":
+      return generateReactTailwind(doc);
+    case "flutter":
+      return generateFlutter(doc);
+    case "swiftui":
+      return generateSwiftUI(doc);
+    case "html-css":
+      return generateHtmlCss(doc);
+    default:
+      return generateReactTailwind(doc);
+  }
+}
+function validateIRHeadless(rawJson) {
+  const warnings = [];
+  const doc = validateAndRepairCyrusIR(rawJson);
+  let elementCount = 0;
+  doc.pages.forEach((p, pIdx) => {
+    if (!p.name) warnings.push(`Page index ${pIdx} is missing a name`);
+    elementCount += p.elements?.length || 0;
+    p.elements?.forEach((el, eIdx) => {
+      if (!el.type) warnings.push(`Page ${p.name || pIdx} Element ${eIdx} has undefined type`);
+      if (typeof el.x !== "number" || typeof el.y !== "number") {
+        warnings.push(`Page ${p.name || pIdx} Element ${el.name || el.type} missing explicit (x, y) coordinates`);
+      }
+    });
+  });
+  return {
+    valid: warnings.length === 0,
+    document: doc,
+    elementCount,
+    pageCount: doc.pages.length,
+    warnings
+  };
+}
+function renderHeadlessSVG(rawDocument, pageIndex = 0, viewportWidth = 1440) {
+  const doc = validateAndRepairCyrusIR(rawDocument);
+  const page = doc.pages[pageIndex] || doc.pages[0] || { elements: [] };
+  const bg = page.backgroundColor || doc.palette?.background || "#09090b";
+  let maxY = 900;
+  page.elements.forEach((el) => {
+    const bottom = (el.y || 0) + (el.height || 100);
+    if (bottom > maxY) maxY = bottom + 80;
+  });
+  const svgElements = [];
+  page.elements.forEach((el) => {
+    const x = el.x || 0;
+    const y = el.y || 0;
+    const w = el.width || 200;
+    const h = el.height || 100;
+    const bgCol = el.styles?.backgroundColor || "#18181b";
+    const textCol = el.styles?.textColor || "#ffffff";
+    const radius = el.styles?.borderRadius ?? 8;
+    const title = el.content?.headline || el.content?.title || el.content?.brandName || el.content?.text || el.name || el.type;
+    svgElements.push(`
+    <g transform="translate(${x}, ${y})">
+      <rect width="${w}" height="${h}" rx="${radius}" fill="${bgCol}" stroke="rgba(255,255,255,0.08)" stroke-width="1" />
+      <text x="20" y="${Math.min(h / 2 + 6, 36)}" fill="${textCol}" font-family="system-ui, -apple-system, sans-serif" font-size="16" font-weight="600">
+        ${escapeXml(String(title))}
+      </text>
+      <text x="20" y="${Math.min(h / 2 + 26, 60)}" fill="${textCol}" fill-opacity="0.6" font-family="system-ui, -apple-system, sans-serif" font-size="12">
+        Type: ${escapeXml(el.type)} (${w}x${h})
+      </text>
+    </g>`);
+  });
+  return `<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${viewportWidth} ${maxY}" width="${viewportWidth}" height="${maxY}">
+  <rect width="100%" height="100%" fill="${bg}" />
+  ${svgElements.join("\n")}
+</svg>`;
+}
+function escapeXml(unsafe) {
+  return unsafe.replace(/[<>&'"]/g, (c) => {
+    switch (c) {
+      case "<":
+        return "&lt;";
+      case ">":
+        return "&gt;";
+      case "&":
+        return "&amp;";
+      case "'":
+        return "&apos;";
+      case '"':
+        return "&quot;";
+      default:
+        return c;
+    }
+  });
+}
+
 // packages/cyrus-sdk/src/index.ts
 function createCyrusEmbedUrl(options = {}) {
-  const host = options.hostUrl || "http://localhost:5173";
+  const host = (options.hostUrl || "http://localhost:5173").replace(/\/$/, "");
   const pid = options.projectId || "demo";
-  const theme = options.theme || "light";
-  return `${host}/#/embed/${pid}?theme=${theme}&readOnly=${Boolean(options.readOnly)}`;
+  const theme = options.theme || "dark";
+  const readOnly = Boolean(options.readOnly);
+  const queryParams = new URLSearchParams({
+    theme,
+    readOnly: String(readOnly)
+  });
+  if (options.whiteLabel) {
+    if (options.whiteLabel.brandName) queryParams.set("brand", options.whiteLabel.brandName);
+    if (options.whiteLabel.primaryColor) queryParams.set("primary", options.whiteLabel.primaryColor);
+    if (options.whiteLabel.logoUrl) queryParams.set("logo", options.whiteLabel.logoUrl);
+    if (options.whiteLabel.hideHeader) queryParams.set("hideHeader", "true");
+    if (options.whiteLabel.hideAIPanel) queryParams.set("hideAI", "true");
+    if (options.whiteLabel.hideProperties) queryParams.set("hideInspector", "true");
+    if (options.whiteLabel.hideCodeDrawer) queryParams.set("hideCode", "true");
+  }
+  return `${host}/#/embed/${pid}?${queryParams.toString()}`;
 }
+var CyrusCanvasController = class {
+  iframeWindow = null;
+  targetOrigin = "*";
+  constructor(iframeWindow, targetOrigin = "*") {
+    this.iframeWindow = iframeWindow || null;
+    this.targetOrigin = targetOrigin;
+  }
+  setIframeWindow(win, origin = "*") {
+    this.iframeWindow = win;
+    this.targetOrigin = origin;
+  }
+  sendMessage(msg) {
+    if (!this.iframeWindow) return;
+    this.iframeWindow.postMessage(msg, this.targetOrigin);
+  }
+  setDocument(doc) {
+    this.sendMessage({ type: "CYRUS_SET_DOCUMENT", payload: doc });
+  }
+  setTheme(theme) {
+    this.sendMessage({ type: "CYRUS_SET_THEME", payload: { theme } });
+  }
+  selectElement(elementId) {
+    this.sendMessage({ type: "CYRUS_SELECT_ELEMENT", payload: { elementId } });
+  }
+  createElement(element, select = true) {
+    this.sendMessage({ type: "CYRUS_CREATE_ELEMENT", payload: { element, select } });
+  }
+  updateStyles(elementId, styles) {
+    this.sendMessage({
+      type: "CYRUS_UPDATE_ELEMENT",
+      payload: { id: elementId, updates: { styles } }
+    });
+  }
+  updateContent(elementId, content) {
+    this.sendMessage({
+      type: "CYRUS_UPDATE_ELEMENT",
+      payload: { id: elementId, updates: { content } }
+    });
+  }
+  deleteElement(elementId) {
+    this.sendMessage({ type: "CYRUS_DELETE_ELEMENT", payload: { id: elementId } });
+  }
+  setDesignTokens(tokens) {
+    this.sendMessage({ type: "CYRUS_SET_DESIGN_TOKENS", payload: tokens });
+  }
+  importTailwindTokens(tailwindConfig) {
+    const tokens = importTailwindConfig(tailwindConfig);
+    this.setDesignTokens(tokens);
+  }
+  importFigmaTokens(figmaTokensJson) {
+    const tokens = parseFigmaTokens(figmaTokensJson);
+    this.setDesignTokens(tokens);
+  }
+  registerComponent(definition) {
+    this.sendMessage({ type: "CYRUS_REGISTER_CUSTOM_COMPONENT", payload: definition });
+  }
+  setWhiteLabelConfig(config) {
+    this.sendMessage({ type: "CYRUS_SET_WHITELABEL_CONFIG", payload: config });
+  }
+  streamIncrementalElements(elements, isComplete = false) {
+    this.sendMessage({
+      type: "CYRUS_STREAM_INCREMENTAL_ELEMENTS",
+      payload: { elements, isComplete }
+    });
+  }
+  requestCanvasSnapshot(format = "svg") {
+    this.sendMessage({ type: "CYRUS_REQUEST_CANVAS_SNAPSHOT", payload: { format } });
+  }
+  async executeMCPTool(toolCall) {
+    return executeCyrusMCPTool(this, toolCall);
+  }
+  generateFromPrompt(prompt, provider, apiKey) {
+    this.sendMessage({
+      type: "CYRUS_GENERATE_FROM_PROMPT",
+      payload: { prompt, provider, apiKey }
+    });
+  }
+};
 function CyrusCanvasIframe({
   projectId = "demo",
   hostUrl = "http://localhost:5173",
-  theme = "light",
+  theme = "dark",
+  initialDocument,
+  whiteLabel,
+  designTokens,
+  customComponents,
+  onReady,
   onStateChange,
+  onCodeSync,
+  onSelectionChange,
+  onMCPToolResult,
+  controllerRef,
   style,
   className,
   ...rest
 }) {
-  const embedUrl = createCyrusEmbedUrl({ projectId, hostUrl, theme });
+  const iframeRef = import_react.default.useRef(null);
+  const controllerInstance = import_react.default.useMemo(() => new CyrusCanvasController(null, "*"), []);
+  const embedUrl = createCyrusEmbedUrl({
+    projectId,
+    hostUrl,
+    theme,
+    whiteLabel
+  });
+  import_react.default.useEffect(() => {
+    if (iframeRef.current?.contentWindow) {
+      controllerInstance.setIframeWindow(iframeRef.current.contentWindow, "*");
+    }
+    if (controllerRef) {
+      controllerRef.current = controllerInstance;
+    }
+  }, [controllerInstance, controllerRef]);
   import_react.default.useEffect(() => {
-    if (!onStateChange || typeof window === "undefined") return;
+    if (typeof window === "undefined") return;
     const handleMessage = (event) => {
-      if (event.data && event.data.type === "CYRUS_STATE_CHANGED") {
-        onStateChange(event.data.payload);
+      const data = event.data;
+      if (!data || typeof data !== "object" || !data.type) return;
+      switch (data.type) {
+        case "CYRUS_READY":
+          if (onReady) onReady(data.payload);
+          if (initialDocument && iframeRef.current?.contentWindow) {
+            controllerInstance.setDocument(validateAndRepairCyrusIR(initialDocument));
+          }
+          if (whiteLabel && iframeRef.current?.contentWindow) {
+            controllerInstance.setWhiteLabelConfig(whiteLabel);
+          }
+          if (designTokens && iframeRef.current?.contentWindow) {
+            controllerInstance.setDesignTokens(designTokens);
+          }
+          if (customComponents && Array.isArray(customComponents) && iframeRef.current?.contentWindow) {
+            customComponents.forEach((comp) => controllerInstance.registerComponent(comp));
+          }
+          break;
+        case "CYRUS_STATE_CHANGED":
+          if (onStateChange) {
+            const doc = "document" in data.payload ? data.payload.document : data.payload;
+            onStateChange(doc);
+          }
+          break;
+        case "CYRUS_CODE_SYNC":
+          if (onCodeSync) onCodeSync(data.payload);
+          break;
+        case "CYRUS_SELECTION_CHANGED":
+          if (onSelectionChange) onSelectionChange(data.payload.selectedIds);
+          break;
+        case "CYRUS_MCP_TOOL_RESULT":
+          if (onMCPToolResult) onMCPToolResult(data.payload);
+          break;
       }
     };
     window.addEventListener("message", handleMessage);
     return () => window.removeEventListener("message", handleMessage);
-  }, [onStateChange]);
+  }, [
+    initialDocument,
+    whiteLabel,
+    designTokens,
+    customComponents,
+    onReady,
+    onStateChange,
+    onCodeSync,
+    onSelectionChange,
+    onMCPToolResult,
+    controllerInstance
+  ]);
   return import_react.default.createElement("iframe", {
+    ref: iframeRef,
     src: embedUrl,
-    className: className || "w-full h-full border-0 rounded-2xl shadow-lg",
+    className: className || "w-full h-full border-0 rounded-2xl shadow-xl",
     style: {
       width: "100%",
-      height: "600px",
+      height: "750px",
       border: "none",
       borderRadius: "16px",
+      backgroundColor: "#09090b",
       ...style
     },
-    title: "Cyrus Visual Canvas Studio",
+    title: whiteLabel?.brandName || "Cyrus Visual Canvas Studio",
     ...rest
   });
 }