cyrus-studio 1.0.0

package/dist/assets/reactTsGenerator-CkYUg1Bs.js

@@ -0,0 +1,1330 @@
+import{r as e}from"./rolldown-runtime-W7wSyTde.js";import{t}from"./themes-CNabH9CH.js";import{t as n}from"./vendor-jszip-Cv4gVObP.js";var r=e(n(),1);async function i(e,t,n=`react`){let i=new r.default;for(let e of t)i.file(e.path,e.content);let a=await i.generateAsync({type:`blob`}),o=URL.createObjectURL(a),s=document.createElement(`a`);s.href=o,s.download=`${e.toLowerCase().replace(/[^a-z0-9]/g,`_`)}_${n}_app.zip`,s.click(),URL.revokeObjectURL(o)}function a(e,n=`nextjs`){let r=(e.components||[]).map(e=>{let t=o(e.templateElement),n=l(e.name);return{name:n,fileName:`${n}.tsx`,propsSchema:[{name:`title`,type:`string`,defaultValue:e.templateElement.content?.title},{name:`className`,type:`string`,defaultValue:``}],rootNode:t}}),i=e.pages.map(t=>{let n=s(t.elements);return{id:t.id,name:t.name,slug:t.slug,route:t.slug===`home`||t.slug===`index`?`/`:`/${t.slug}`,sections:n,metaTitle:t.settings?.metaTitle||`${t.name} | ${e.name}`,metaDescription:t.settings?.metaDescription||`${t.name} page for ${e.name}`,favicon:t.settings?.favicon||e.settings?.favicon,canonicalUrl:t.settings?.canonicalUrl,socialImage:t.settings?.socialImage||e.settings?.defaultOgImage,ogType:t.settings?.ogType||`website`,twitterCard:t.settings?.twitterCard||`summary_large_image`,noIndex:t.settings?.noIndex||!1,keywords:t.settings?.keywords||[]}}),a=[];return e.pages.forEach(e=>{e.elements.forEach(e=>{let t=e.content?.src||e.content?.url;t&&typeof t==`string`&&a.push({id:e.id,name:e.name||`Asset`,url:t})})}),{id:e.id,name:e.name,description:e.description,target:n,designTokens:e.designSystem||t,pages:i,components:r,assets:a,variables:e.variables||[],dataSources:e.dataSources||[],siteUrl:e.settings?.siteUrl||`https://example.com`,defaultOgImage:e.settings?.defaultOgImage,defaultFavicon:e.settings?.favicon,sitemapEnabled:e.settings?.sitemapEnabled??!0,robotsTxtEnabled:e.settings?.robotsTxtEnabled??!0}}function o(e){let t=c(e.type);return{id:e.id,type:e.type,semanticRole:t,name:e.name,props:{...e.content},styles:{...e.styles},responsive:e.responsive,bindings:e.bindings,collectionBinding:e.collectionBinding,formConfig:e.formConfig,interactions:(e.interactions||[]).map(e=>({trigger:e.trigger,action:e.action,target:e.target,targetName:e.targetName})),animations:(e.animations||[]).map(e=>({trigger:e.trigger===`hover`?`hover`:`load`,type:e.type||`none`,duration:e.duration,delay:e.delay,easing:e.easing})),componentName:e.isComponentInstance?l(e.name):void 0,accessibility:e.accessibility}}function s(e){if(e.length===0)return[];let t=[...e].sort((e,t)=>e.y-t.y),n=[],r=0;for(;r<t.length;){let e=t[r];if(e.type===`navbar`||e.type===`hero`||e.type===`heroSection`||e.type===`footer`||e.type===`cta`||e.type===`sidebar`||e.type===`bottomNav`||e.type===`loginForm`){n.push(o(e)),r++;continue}if(e.type.includes(`Card`)||e.type===`card`){let i=[e],a=r+1;for(;a<t.length;){let n=t[a];if((n.type.includes(`Card`)||n.type===`card`)&&Math.abs(n.y-e.y)<=60)i.push(n),a++;else break}if(i.length>1){let t={id:`grid_${e.id}`,type:`grid`,semanticRole:e.type===`pricingCard`?`pricing`:e.type===`metricCard`?`stats`:`features`,name:`${e.name} Grid (${i.length} items)`,props:{columns:i.length},styles:{display:`grid`,gap:24},children:i.map(o)};n.push(t),r=a;continue}}n.push(o(e)),r++}return n}function c(e){return e===`navbar`?`header`:e===`hero`||e===`heroSection`?`hero`:e===`pricingCard`?`pricing`:e===`metricCard`||e===`chart`||e===`dataTable`?`stats`:e===`featureCard`||e===`card`?`features`:e===`loginForm`?`auth`:e===`footer`?`footer`:`content`}function l(e){return e.replace(/[^a-zA-Z0-9]/g,` `).split(` `).filter(Boolean).map(e=>e.charAt(0).toUpperCase()+e.slice(1).toLowerCase()).join(``)||`Component`}function u(e){let t=0,n=0,r=0,i=[];e.pages.forEach(e=>{(!e.metaTitle||e.metaTitle.length<5)&&i.push(`${e.name} (Missing or short title)`),(!e.metaDescription||e.metaDescription.length<10)&&i.push(`${e.name} (Missing meta description)`),(e.sections||[]).forEach(e=>{r++,(e.type===`image`||e.props?.src)&&(t++,!e.props?.alt&&!e.accessibility?.altText&&n++)})});let a=Math.max(0,Math.round(100-n*10)),o=Math.max(0,Math.round(100-i.length*15)),s=[];return n>0&&s.push(`Add descriptive alt text to ${n} image elements.`),i.length>0&&s.push(`Provide custom meta descriptions for ${i.length} pages.`),s.length===0&&s.push(`All core WCAG 2.1 AA and SEO standards are met!`),{accessibilityReport:`
+# Accessibility Compliance Report (WCAG 2.1 AA)
+
+**Project:** ${e.name}  
+**Audit Date:** ${new Date().toISOString().split(`T`)[0]}  
+**Target:** ${(e.target||`react`).toUpperCase()}  
+**Compliance Score:** ${a}%
+
+---
+
+## 1. Landmark & Semantic Structure
+- **Landmark Regions Verified:** ${r} landmarks across ${e.pages.length} pages.
+- **Semantic Roles:** \`<header>\`, \`<nav>\`, \`<main>\`, \`<section>\`, \`<article>\`, \`<aside>\`, \`<footer>\`.
+- **Keyboard Navigation:** Native interactive elements (buttons, links, inputs) with accessible focus ring styles.
+
+## 2. Image & Media Accessibility
+- **Total Images Audited:** ${t}
+- **Images with Alt Text:** ${t-n}
+- **Decorative Images:** Marked with \`aria-hidden="true"\` or empty \`alt=""\`.
+
+## 3. WCAG AA Color Contrast
+- Primary text on surface meets minimum 4.5:1 ratio for normal text and 3:1 for large text.
+- Form inputs include explicit labels and high-visibility focus borders.
+
+---
+*Generated automatically by Cyrus Production Quality Engine.*
+`.trim(),seoAuditReport:`
+# Production SEO & Open Graph Audit
+
+**Project:** ${e.name}  
+**Site URL:** ${e.siteUrl||`https://example.com`}  
+**SEO Health Score:** ${o}%
+
+---
+
+## 1. Page Index & Metadata Coverage
+
+| Route | Title Tag | Meta Description | Canonical URL | Open Graph Image |
+| :--- | :--- | :--- | :--- | :--- |
+${e.pages.map(t=>`| \`${t.route}\` | ${t.metaTitle?`✅ `+t.metaTitle.slice(0,30)+`...`:`⚠️ Default`} | ${t.metaDescription?`✅ Provided`:`⚠️ Missing`} | \`${t.canonicalUrl||(e.siteUrl||``)+t.route}\` | ${t.socialImage||e.defaultOgImage?`✅ Configured`:`ℹ️ None`} |`).join(`
+`)}
+
+---
+
+## 2. Search Engine Indexing
+- **Sitemap XML:** Generated at \`public/sitemap.xml\` (${e.pages.length} URLs indexed).
+- **Robots.txt:** Generated at \`public/robots.txt\` with crawler allow policies.
+- **Font Optimization:** Preconnect links for Google Fonts with \`display=swap\`.
+- **Image Performance:** Native \`loading="lazy"\` and \`decoding="async"\` applied across all media.
+
+---
+*Generated automatically by Cyrus Production Quality Engine.*
+`.trim(),summary:{wcagComplianceScore:a,seoScore:o,totalLandmarks:r,totalImagesChecked:t,lazyLoadedImagesCount:t,seoMetadataPagesCount:e.pages.length,recommendations:s}}}function d(e){let t=[],n=e.name.toLowerCase().replace(/[^a-z0-9]/g,`-`).replace(/-+/g,`-`),r=e.designTokens;t.push({path:`package.json`,language:`json`,content:JSON.stringify({name:n,private:!0,version:`0.1.0`,type:`module`,scripts:{dev:`vite`,build:`tsc -b && vite build`,preview:`vite preview`},dependencies:{clsx:`^2.1.1`,"lucide-react":`^1.16.0`,react:`^18.3.1`,"react-dom":`^18.3.1`},devDependencies:{"@types/react":`^18.3.3`,"@types/react-dom":`^18.3.0`,"@vitejs/plugin-react":`^4.3.1`,typescript:`^5.5.3`,vite:`^5.4.0`}},null,2)}),t.push({path:`tsconfig.json`,language:`json`,content:JSON.stringify({compilerOptions:{target:`ES2020`,useDefineForClassFields:!0,lib:[`ES2020`,`DOM`,`DOM.Iterable`],module:`ESNext`,skipLibCheck:!0,moduleResolution:`bundler`,allowImportingTsExtensions:!0,resolveJsonModule:!0,isolatedModules:!0,noEmit:!0,jsx:`react-jsx`,strict:!0,noUnusedLocals:!0,noUnusedParameters:!0,noFallthroughCasesInSwitch:!0},include:[`src`]},null,2)}),t.push({path:`vite.config.ts`,language:`typescript`,content:`import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+});
+`});let i=e.pages[0],a=e.siteUrl||`https://example.com`,o=i?.metaTitle||e.name,s=i?.metaDescription||e.description||`Modern web application built with Cyrus`,c=i?.socialImage||e.defaultOgImage||``;if(t.push({path:`index.html`,language:`html`,content:`<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>${o}</title>
+    <meta name="description" content="${s}" />
+    ${i?.keywords&&i.keywords.length>0?`<meta name="keywords" content="${i.keywords.join(`, `)}" />`:``}
+    <link rel="canonical" href="${i?.canonicalUrl||a+(i?.route||`/`)}" />
+    ${e.defaultFavicon||i?.favicon?`<link rel="icon" type="image/svg+xml" href="${i?.favicon||e.defaultFavicon}" />`:`<link rel="icon" type="image/svg+xml" href="/favicon.svg" />`}
+
+    <!-- Open Graph / Facebook -->
+    <meta property="og:type" content="${i?.ogType||`website`}" />
+    <meta property="og:url" content="${a}${i?.route||`/`}" />
+    <meta property="og:title" content="${o}" />
+    <meta property="og:description" content="${s}" />
+    ${c?`<meta property="og:image" content="${c}" />`:``}
+
+    <!-- Twitter Cards -->
+    <meta name="twitter:card" content="${i?.twitterCard||`summary_large_image`}" />
+    <meta name="twitter:title" content="${o}" />
+    <meta name="twitter:description" content="${s}" />
+    ${c?`<meta name="twitter:image" content="${c}" />`:``}
+
+    <!-- Security: Referrer Policy & Sniff Protection -->
+    <meta http-equiv="X-Content-Type-Options" content="nosniff" />
+    <meta name="referrer" content="strict-origin-when-cross-origin" />
+
+    <!-- Performance: Preconnect Google Fonts with swap -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"><\/script>
+  </body>
+</html>
+`}),e.sitemapEnabled!==!1){let n=new Date().toISOString().split(`T`)[0],r=`<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+${e.pages.map(e=>`  <url>
+    <loc>${a}${e.route}</loc>
+    <lastmod>${n}</lastmod>
+    <changefreq>${e.route===`/`?`daily`:`weekly`}</changefreq>
+    <priority>${e.route===`/`?`1.0`:`0.8`}</priority>
+  </url>`).join(`
+`)}
+</urlset>
+`.trim();t.push({path:`public/sitemap.xml`,language:`html`,content:r})}e.robotsTxtEnabled!==!1&&t.push({path:`public/robots.txt`,language:`javascript`,content:`# Robots.txt generated by Cyrus Production Engine
+User-agent: *
+Allow: /
+
+Sitemap: ${a}/sitemap.xml
+`});let{accessibilityReport:l,seoAuditReport:d}=u(e);t.push({path:`ACCESSIBILITY_REPORT.md`,language:`javascript`,content:l}),t.push({path:`SEO_AUDIT.md`,language:`javascript`,content:d}),t.push({path:`src/components/SeoHead.tsx`,language:`typescript`,content:`import { useEffect } from 'react';
+
+export interface SeoHeadProps {
+  title: string;
+  description?: string;
+  canonicalUrl?: string;
+  socialImage?: string;
+  ogType?: string;
+}
+
+export function SeoHead({
+  title,
+  description,
+  canonicalUrl,
+  socialImage,
+  ogType = 'website',
+}: SeoHeadProps) {
+  useEffect(() => {
+    document.title = title;
+
+    if (description) {
+      let metaDesc = document.querySelector('meta[name="description"]');
+      if (!metaDesc) {
+        metaDesc = document.createElement('meta');
+        metaDesc.setAttribute('name', 'description');
+        document.head.appendChild(metaDesc);
+      }
+      metaDesc.setAttribute('content', description);
+    }
+
+    if (canonicalUrl) {
+      let canonical = document.querySelector('link[rel="canonical"]');
+      if (!canonical) {
+        canonical = document.createElement('link');
+        canonical.setAttribute('rel', 'canonical');
+        document.head.appendChild(canonical);
+      }
+      canonical.setAttribute('href', canonicalUrl);
+    }
+  }, [title, description, canonicalUrl, socialImage, ogType]);
+
+  return null;
+}
+`}),t.push({path:`src/theme/tokens.ts`,language:`typescript`,content:`// Production 3-Tier Design Tokens generated by Cyrus
+export const themeTokens = ${JSON.stringify(r,null,2)};
+`}),t.push({path:`src/components/ThemeToggle.tsx`,language:`typescript`,content:`import React, { useEffect, useState } from 'react';
+import { Sun, Moon } from 'lucide-react';
+
+export function ThemeToggle() {
+  const [theme, setTheme] = useState<'light' | 'dark'>('light');
+
+  useEffect(() => {
+    const root = document.documentElement;
+    const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    const initial = isDark ? 'dark' : 'light';
+    setTheme(initial);
+    root.setAttribute('data-theme', initial);
+  }, []);
+
+  const toggleTheme = () => {
+    const next = theme === 'light' ? 'dark' : 'light';
+    setTheme(next);
+    document.documentElement.setAttribute('data-theme', next);
+    if (next === 'dark') {
+      document.documentElement.classList.add('dark');
+    } else {
+      document.documentElement.classList.remove('dark');
+    }
+  };
+
+  return (
+    <button
+      type="button"
+      onClick={toggleTheme}
+      aria-label="Toggle Light/Dark Theme"
+      style={{
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: '0.375rem',
+        padding: '0.375rem 0.625rem',
+        borderRadius: '8px',
+        backgroundColor: 'var(--color-surface-secondary, #f4f4f6)',
+        border: '1px solid var(--color-border, #e5e5ea)',
+        color: 'var(--color-text, #1d1d1f)',
+        fontSize: '0.8125rem',
+        fontWeight: 500,
+        cursor: 'pointer',
+        transition: 'all 0.15s ease',
+      }}
+    >
+      {theme === 'light' ? (
+        <>
+          <Moon style={{ width: '14px', height: '14px', color: 'var(--color-primary)' }} />
+          <span>Dark Mode</span>
+        </>
+      ) : (
+        <>
+          <Sun style={{ width: '14px', height: '14px', color: '#ff9500' }} />
+          <span>Light Mode</span>
+        </>
+      )}
+    </button>
+  );
+}
+`}),t.push({path:`src/styles/globals.css`,language:`css`,content:`/* Generated by Cyrus — Production 3-Tier Design System & Theme Engine */
+:root {
+  /* 1. Primitive Tokens */
+  --primitive-blue-500: #0071e3;
+  --primitive-gray-50: #fbfbfd;
+  --primitive-gray-100: #f5f5f7;
+  --primitive-gray-200: #e5e5ea;
+  --primitive-gray-800: #2c2c2e;
+  --primitive-gray-900: #1c1c1e;
+
+  /* 2. Semantic Tokens (Light Default) */
+  --color-primary: ${r?.colors?.primary||`#0071e3`};
+  --color-primary-hover: #0077ed;
+  --color-secondary: ${r?.colors?.secondary||`#5856d6`};
+  --color-background: ${r?.colors?.background||`#f5f5f7`};
+  --color-surface: ${r?.colors?.surface||`#ffffff`};
+  --color-surface-secondary: ${r?.colors?.surfaceSecondary||`#f4f4f6`};
+  --color-text: ${r?.colors?.text||`#1d1d1f`};
+  --color-text-secondary: ${r?.colors?.textSecondary||`#86868b`};
+  --color-border: ${r?.colors?.border||`#e5e5ea`};
+  --color-success: ${r?.colors?.success||`#34c759`};
+  --color-error: ${r?.colors?.error||`#ff3b30`};
+
+  /* 3. Component Tokens */
+  --button-primary-bg: var(--color-primary);
+  --button-primary-text: #ffffff;
+  --button-radius: ${r?.radius?.medium||10}px;
+  --card-bg: var(--color-surface);
+  --card-border: var(--color-border);
+  --card-radius: ${r?.radius?.large||16}px;
+  --input-bg: var(--color-surface-secondary);
+  --input-border: var(--color-border);
+
+  --font-family: '${r?.typography?.body?.fontFamily||`Inter`}', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+}
+
+/* Dark Mode Theme Tokens */
+[data-theme="dark"], .dark {
+  --color-primary: #0a84ff;
+  --color-primary-hover: #409cff;
+  --color-secondary: #5e5ce6;
+  --color-background: #000000;
+  --color-surface: #1c1c1e;
+  --color-surface-secondary: #2c2c2e;
+  --color-text: #ffffff;
+  --color-text-secondary: #8e8e93;
+  --color-border: #38383a;
+  --button-primary-bg: #0a84ff;
+  --button-primary-text: #ffffff;
+  --card-bg: #1c1c1e;
+  --card-border: #38383a;
+  --input-bg: #1c1c1e;
+  --input-border: #38383a;
+}
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: var(--font-family);
+  background-color: var(--color-background);
+  color: var(--color-text);
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+  transition: background-color 0.2s ease, color 0.2s ease;
+}
+
+button, input, select, textarea {
+  font-family: inherit;
+}
+
+button:focus-visible, a:focus-visible, input:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 2px;
+}
+
+.container {
+  max-width: 1200px;
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+}
+
+.grid-responsive {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: 1.5rem;
+}
+
+@media (max-width: 768px) {
+  .grid-responsive {
+    grid-template-columns: 1fr;
+  }
+}
+`}),t.push({path:`src/main.tsx`,language:`typescript`,content:`import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { App } from './App';
+import './styles/globals.css';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
+`}),t.push({path:`src/components/Navbar.tsx`,language:`typescript`,content:`import React, { useState } from 'react';
+import { Menu, X } from 'lucide-react';
+
+interface NavbarProps {
+  brandName?: string;
+  links?: string[];
+  activePage: string;
+  onNavigate: (pageSlug: string) => void;
+  onOpenAuthModal?: () => void;
+}
+
+export function Navbar({
+  brandName = '${e.name}',
+  links = ['Home', 'Pricing', 'Login'],
+  activePage,
+  onNavigate,
+  onOpenAuthModal,
+}: NavbarProps) {
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+
+  return (
+    <header className="sticky top-0 z-40 w-full bg-white/90 backdrop-blur-md border-b border-[#e5e5ea] px-6 py-3.5">
+      <div className="max-w-6xl mx-auto flex items-center justify-between">
+        <div className="flex items-center gap-8">
+          <button
+            type="button"
+            onClick={() => onNavigate('home')}
+            className="text-[16px] font-bold tracking-tight text-[#1d1d1f] hover:opacity-80 transition-opacity bg-transparent border-0 cursor-pointer"
+          >
+            {brandName}
+          </button>
+          <nav className="hidden md:flex items-center gap-6 text-[13.5px]">
+            {links.map((link) => {
+              const slug = link.toLowerCase();
+              const isCurrent = activePage === slug;
+              return (
+                <button
+                  key={link}
+                  type="button"
+                  onClick={() => onNavigate(slug)}
+                  className={\`font-medium transition-colors bg-transparent border-0 cursor-pointer \${
+                    isCurrent ? 'text-[#0071e3] font-semibold' : 'text-[#6e6e73] hover:text-[#1d1d1f]'
+                  }\`}
+                >
+                  {link}
+                </button>
+              );
+            })}
+          </nav>
+        </div>
+
+        <div className="hidden md:flex items-center gap-3">
+          <button
+            type="button"
+            onClick={() => onOpenAuthModal ? onOpenAuthModal() : onNavigate('login')}
+            className="px-4 py-1.5 rounded-[8px] bg-[#0071e3] hover:bg-[#0077ed] text-white text-[13px] font-medium transition-all shadow-sm cursor-pointer border-0"
+          >
+            Get Started
+          </button>
+        </div>
+
+        <button
+          type="button"
+          onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
+          aria-label="Toggle Navigation"
+          className="md:hidden p-1.5 text-[#1d1d1f] bg-transparent border-0 cursor-pointer"
+        >
+          {mobileMenuOpen ? <X className="w-5 h-5" /> : <Menu className="w-5 h-5" />}
+        </button>
+      </div>
+
+      {mobileMenuOpen && (
+        <div className="md:hidden pt-3 pb-2 border-t border-[#e5e5ea] mt-2 flex flex-col gap-2">
+          {links.map((link) => (
+            <button
+              key={link}
+              type="button"
+              onClick={() => {
+                onNavigate(link.toLowerCase());
+                setMobileMenuOpen(false);
+              }}
+              className="text-left px-2 py-1.5 text-[14px] text-[#1d1d1f] font-medium bg-transparent border-0 cursor-pointer"
+            >
+              {link}
+            </button>
+          ))}
+        </div>
+      )}
+    </header>
+  );
+}
+`}),t.push({path:`src/components/Hero.tsx`,language:`typescript`,content:`import React from 'react';
+import { Sparkles, ArrowRight } from 'lucide-react';
+
+interface HeroProps {
+  badge?: string;
+  headline?: string;
+  subhead?: string;
+  primaryBtnText?: string;
+  onPrimaryClick?: () => void;
+  secondaryBtnText?: string;
+  onSecondaryClick?: () => void;
+}
+
+export function Hero({
+  badge = 'Engineering Precision',
+  headline = 'Transform ideas into shipped software.',
+  subhead = 'The complete visual product engine for developers and design teams.',
+  primaryBtnText = 'Start Free Trial',
+  onPrimaryClick,
+  secondaryBtnText = 'View Pricing',
+  onSecondaryClick,
+}: HeroProps) {
+  return (
+    <section className="w-full py-16 md:py-24 px-6 flex flex-col items-center justify-center text-center">
+      {badge && (
+        <span className="inline-flex items-center gap-1.5 px-3.5 py-1 rounded-full bg-[#e8f2fc] text-[#0071e3] text-[12px] font-medium border border-[#d0e5fa] mb-6">
+          <Sparkles className="w-3.5 h-3.5" />
+          <span>{badge}</span>
+        </span>
+      )}
+      <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold tracking-tight text-[#1d1d1f] max-w-3xl leading-[1.1] mb-5">
+        {headline}
+      </h1>
+      <p className="text-base md:text-lg text-[#6e6e73] max-w-xl leading-relaxed mb-8">
+        {subhead}
+      </p>
+      <div className="flex flex-col sm:flex-row items-center gap-3 w-full sm:w-auto">
+        <button
+          type="button"
+          onClick={onPrimaryClick}
+          className="w-full sm:w-auto inline-flex items-center justify-center gap-2 px-6 py-2.5 rounded-[10px] bg-[#0071e3] hover:bg-[#0077ed] text-white text-[14.5px] font-medium shadow-sm transition-all cursor-pointer border-0"
+        >
+          <span>{primaryBtnText}</span>
+          <ArrowRight className="w-4 h-4" />
+        </button>
+        {secondaryBtnText && (
+          <button
+            type="button"
+            onClick={onSecondaryClick}
+            className="w-full sm:w-auto px-6 py-2.5 rounded-[10px] bg-white border border-[#e5e5ea] hover:bg-[#f4f4f6] text-[#1d1d1f] text-[14.5px] font-medium shadow-sm transition-all cursor-pointer"
+          >
+            {secondaryBtnText}
+          </button>
+        )}
+      </div>
+    </section>
+  );
+}
+`}),t.push({path:`src/components/PricingCard.tsx`,language:`typescript`,content:`import React from 'react';
+import { Check } from 'lucide-react';
+
+interface PricingCardProps {
+  planName: string;
+  price: string;
+  period?: string;
+  description?: string;
+  buttonText?: string;
+  features?: string[];
+  isPopular?: boolean;
+  onSelect?: () => void;
+}
+
+export function PricingCard({
+  planName,
+  price,
+  period = '/month',
+  description,
+  buttonText = 'Get Started',
+  features = [
+    'Full visual design workbench',
+    'High-resolution code export',
+    'Responsive mobile layouts',
+    'Interactive runtime prototype',
+  ],
+  isPopular = false,
+  onSelect,
+}: PricingCardProps) {
+  return (
+    <article
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'space-between',
+        padding: '1.75rem',
+        borderRadius: '16px',
+        backgroundColor: '#ffffff',
+        border: isPopular ? '2px solid #0071e3' : '1px solid #e5e5ea',
+        boxShadow: isPopular ? '0 8px 24px rgba(0, 113, 227, 0.12)' : '0 2px 8px rgba(0,0,0,0.04)',
+      }}
+    >
+      <div>
+        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '0.5rem' }}>
+          <h3 style={{ fontSize: '1.125rem', fontWeight: 600, color: '#1d1d1f' }}>{planName}</h3>
+          {isPopular && (
+            <span style={{ fontSize: '0.6875rem', fontWeight: 600, backgroundColor: '#0071e3', color: '#ffffff', padding: '0.2rem 0.6rem', borderRadius: '999px' }}>
+              Popular
+            </span>
+          )}
+        </div>
+        <div style={{ display: 'flex', alignItems: 'baseline', gap: '0.25rem', marginBottom: '0.75rem' }}>
+          <span style={{ fontSize: '2.25rem', fontWeight: 700, letterSpacing: '-0.02em', color: '#1d1d1f' }}>{price}</span>
+          <span style={{ fontSize: '0.8125rem', color: '#86868b' }}>{period}</span>
+        </div>
+        {description && (
+          <p style={{ fontSize: '0.875rem', color: '#6e6e73', lineHeight: 1.5, marginBottom: '1.5rem' }}>
+            {description}
+          </p>
+        )}
+
+        <ul style={{ listStyle: 'none', padding: 0, margin: '0 0 1.5rem 0', display: 'flex', flexDirection: 'column', gap: '0.625rem' }}>
+          {features.map((feat, idx) => (
+            <li key={idx} style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', fontSize: '0.8125rem', color: '#1d1d1f' }}>
+              <Check style={{ width: '1rem', height: '1rem', color: '#0071e3', flexShrink: 0 }} />
+              <span>{feat}</span>
+            </li>
+          ))}
+        </ul>
+      </div>
+
+      <button
+        type="button"
+        onClick={onSelect}
+        style={{
+          width: '100%',
+          padding: '0.625rem 1rem',
+          borderRadius: '10px',
+          fontSize: '0.875rem',
+          fontWeight: 600,
+          border: 'none',
+          cursor: 'pointer',
+          transition: 'all 0.15s ease',
+          backgroundColor: isPopular ? '#0071e3' : '#f4f4f6',
+          color: isPopular ? '#ffffff' : '#1d1d1f',
+        }}
+      >
+        {buttonText}
+      </button>
+    </article>
+  );
+}
+`}),t.push({path:`src/components/MetricCard.tsx`,language:`typescript`,content:`import React from 'react';
+
+interface MetricCardProps {
+  title: string;
+  value: string;
+  change?: string;
+  isPositive?: boolean;
+  timeframe?: string;
+}
+
+export function MetricCard({
+  title,
+  value,
+  change,
+  isPositive = true,
+  timeframe,
+}: MetricCardProps) {
+  return (
+    <div style={{
+      padding: '1.25rem',
+      borderRadius: '14px',
+      backgroundColor: '#ffffff',
+      border: '1px solid #e5e5ea',
+      boxShadow: '0 2px 8px rgba(0,0,0,0.04)',
+      display: 'flex',
+      flexDirection: 'column',
+      justifyContent: 'space-between',
+    }}>
+      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '0.75rem' }}>
+        <span style={{ fontSize: '0.8125rem', fontWeight: 500, color: '#86868b' }}>{title}</span>
+        {change && (
+          <span style={{ fontSize: '0.75rem', fontWeight: 600, color: isPositive ? '#34c759' : '#ff3b30' }}>
+            {change}
+          </span>
+        )}
+      </div>
+      <div>
+        <div style={{ fontSize: '1.5rem', fontWeight: 700, letterSpacing: '-0.02em', color: '#1d1d1f' }}>{value}</div>
+        {timeframe && <div style={{ fontSize: '0.6875rem', color: '#86868b', marginTop: '0.125rem' }}>{timeframe}</div>}
+      </div>
+    </div>
+  );
+}
+`}),t.push({path:`src/components/DashboardCharts.tsx`,language:`typescript`,content:`import React from 'react';
+import { TrendingUp, TrendingDown, ArrowRight, Sparkles, Check } from 'lucide-react';
+
+export interface StatCardProps {
+  title: string;
+  value: string;
+  change?: string;
+  isPositive?: boolean;
+  timeframe?: string;
+}
+
+export function StatCard({
+  title,
+  value,
+  change = '+14.2%',
+  isPositive = true,
+  timeframe = 'vs last month',
+}: StatCardProps) {
+  return (
+    <div style={{
+      padding: '1.25rem',
+      borderRadius: '16px',
+      backgroundColor: '#ffffff',
+      border: '1px solid #e5e5ea',
+      boxShadow: '0 2px 8px rgba(0,0,0,0.04)',
+      display: 'flex',
+      flexDirection: 'column',
+      justifyContent: 'space-between',
+    }}>
+      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '0.75rem' }}>
+        <span style={{ fontSize: '0.75rem', fontWeight: 600, color: '#86868b' }}>{title}</span>
+        <div style={{
+          width: '28px',
+          height: '28px',
+          borderRadius: '8px',
+          backgroundColor: 'rgba(0, 113, 227, 0.08)',
+          color: '#0071e3',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}>
+          <TrendingUp style={{ width: '14px', height: '14px' }} />
+        </div>
+      </div>
+      <div>
+        <div style={{ fontSize: '1.5rem', fontWeight: 800, letterSpacing: '-0.02em', color: '#1d1d1f' }}>{value}</div>
+        <div style={{ display: 'flex', alignItems: 'center', gap: '0.375rem', marginTop: '0.25rem', fontSize: '0.6875rem' }}>
+          <span style={{
+            fontWeight: 700,
+            padding: '0.125rem 0.375rem',
+            borderRadius: '9999px',
+            backgroundColor: isPositive ? 'rgba(52, 199, 89, 0.12)' : 'rgba(255, 59, 48, 0.12)',
+            color: isPositive ? '#34c759' : '#ff3b30',
+          }}>
+            {change}
+          </span>
+          <span style={{ color: '#86868b' }}>{timeframe}</span>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export interface LineChartProps {
+  title?: string;
+  subtitle?: string;
+  data?: Array<{ label: string; value: number }>;
+  color?: string;
+}
+
+export function LineChart({
+  title = 'Revenue Growth',
+  subtitle = 'Monthly MRR performance',
+  data = [
+    { label: 'Jan', value: 24000 },
+    { label: 'Feb', value: 32500 },
+    { label: 'Mar', value: 28900 },
+    { label: 'Apr', value: 46200 },
+    { label: 'May', value: 54100 },
+    { label: 'Jun', value: 78900 },
+  ],
+  color = '#0071e3',
+}: LineChartProps) {
+  const maxVal = Math.max(...data.map(d => d.value), 1);
+  const w = 400;
+  const h = 180;
+  const padL = 40;
+  const padR = 20;
+  const padT = 20;
+  const padB = 30;
+  const chartW = w - padL - padR;
+  const chartH = h - padT - padB;
+
+  const points = data.map((d, i) => ({
+    x: padL + (i / (data.length - 1)) * chartW,
+    y: padT + chartH - (d.value / maxVal) * chartH,
+    ...d,
+  }));
+
+  const path = points.reduce((acc, p, i) => {
+    if (i === 0) return \`M \${p.x} \${p.y}\`;
+    const prev = points[i - 1];
+    const cpX1 = prev.x + (p.x - prev.x) / 3;
+    const cpX2 = prev.x + ((p.x - prev.x) * 2) / 3;
+    return \`\${acc} C \${cpX1} \${prev.y}, \${cpX2} \${p.y}, \${p.x} \${p.y}\`;
+  }, '');
+
+  return (
+    <div style={{
+      padding: '1.25rem',
+      borderRadius: '16px',
+      backgroundColor: '#ffffff',
+      border: '1px solid #e5e5ea',
+      boxShadow: '0 2px 8px rgba(0,0,0,0.04)',
+    }}>
+      <div style={{ marginBottom: '0.75rem' }}>
+        <h4 style={{ fontSize: '0.875rem', fontWeight: 700, color: '#1d1d1f', margin: 0 }}>{title}</h4>
+        {subtitle && <p style={{ fontSize: '0.6875rem', color: '#86868b', margin: '0.25rem 0 0 0' }}>{subtitle}</p>}
+      </div>
+      <svg width="100%" height={h} viewBox={\`0 0 \${w} \${h}\`} style={{ overflow: 'visible' }}>
+        {[0, 0.5, 1].map((step, idx) => (
+          <line
+            key={idx}
+            x1={padL}
+            y1={padT + chartH * (1 - step)}
+            x2={padL + chartW}
+            y2={padT + chartH * (1 - step)}
+            stroke="#e5e5ea"
+            strokeDasharray="3 3"
+          />
+        ))}
+        <path d={path} fill="none" stroke={color} strokeWidth="2.5" strokeLinecap="round" />
+        {points.map((p, i) => (
+          <g key={i}>
+            <circle cx={p.x} cy={p.y} r="4" fill="#ffffff" stroke={color} strokeWidth="2" />
+            <text x={p.x} y={h - 8} textAnchor="middle" fontSize="10" fill="#86868b">
+              {p.label}
+            </text>
+          </g>
+        ))}
+      </svg>
+    </div>
+  );
+}
+
+export interface DataTableProps {
+  title?: string;
+  columns?: string[];
+  rows?: Array<{ [key: string]: any }>;
+}
+
+export function DataTable({
+  title = 'Recent Activity',
+  columns = ['Customer', 'Plan', 'Amount', 'Status', 'Date'],
+  rows = [
+    { customer: 'Acme Corp', plan: 'Enterprise', amount: '$4,800.00', status: 'Completed', date: 'Just now' },
+    { customer: 'Linear Labs', plan: 'Pro Studio', amount: '$590.00', status: 'Completed', date: '5m ago' },
+    { customer: 'Vercel Edge', plan: 'Enterprise', amount: '$12,400.00', status: 'Processing', date: '22m ago' },
+  ],
+}: DataTableProps) {
+  return (
+    <div style={{
+      padding: '1.25rem',
+      borderRadius: '16px',
+      backgroundColor: '#ffffff',
+      border: '1px solid #e5e5ea',
+      boxShadow: '0 2px 8px rgba(0,0,0,0.04)',
+    }}>
+      {title && <h4 style={{ fontSize: '0.875rem', fontWeight: 700, color: '#1d1d1f', marginBottom: '0.75rem' }}>{title}</h4>}
+      <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: '0.75rem' }}>
+        <thead>
+          <tr style={{ borderBottom: '1px solid #f4f4f6', color: '#86868b', textAlign: 'left' }}>
+            {columns.map((c, i) => (
+              <th key={i} style={{ padding: '0.5rem', fontWeight: 600 }}>{c}</th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {rows.map((r, i) => (
+            <tr key={i} style={{ borderBottom: '1px solid #f4f4f6' }}>
+              <td style={{ padding: '0.5rem', fontWeight: 600, color: '#1d1d1f' }}>{r.customer || r.name}</td>
+              <td style={{ padding: '0.5rem', color: '#6e6e73' }}>{r.plan || r.category}</td>
+              <td style={{ padding: '0.5rem', fontFamily: 'monospace', fontWeight: 600 }}>{r.amount}</td>
+              <td style={{ padding: '0.5rem' }}>
+                <span style={{
+                  padding: '0.125rem 0.5rem',
+                  borderRadius: '9999px',
+                  fontSize: '0.625rem',
+                  fontWeight: 700,
+                  backgroundColor: r.status === 'Completed' ? 'rgba(52, 199, 89, 0.12)' : 'rgba(255, 149, 0, 0.12)',
+                  color: r.status === 'Completed' ? '#34c759' : '#ff9500',
+                }}>
+                  {r.status}
+                </span>
+              </td>
+              <td style={{ padding: '0.5rem', color: '#86868b' }}>{r.date}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+`});let m=(e.variables||[]).map(e=>`export const ${e.name} = ${JSON.stringify(e.sampleValue??e.defaultValue,null,2)};`).join(`
+
+`);t.push({path:`src/data/variables.ts`,language:`typescript`,content:`// Auto-generated Cyrus Project Data & Variables\n\n${m||`export const defaultState = {};`}\n`}),t.push({path:`src/components/ProductCard.tsx`,language:`typescript`,content:`import React from 'react';
+import { Star, ShoppingBag } from 'lucide-react';
+
+export interface ProductCardProps {
+  title: string;
+  price: string;
+  image?: string;
+  rating?: number;
+  badge?: string;
+  onAddToCart?: () => void;
+}
+
+export function ProductCard({
+  title,
+  price,
+  image = 'https://images.unsplash.com/photo-1542291026-7eec264c27ff?w=600&auto=format&fit=crop&q=80',
+  rating = 4.9,
+  badge,
+  onAddToCart,
+}: ProductCardProps) {
+  return (
+    <div style={{
+      borderRadius: '16px',
+      backgroundColor: '#ffffff',
+      border: '1px solid #e5e5ea',
+      overflow: 'hidden',
+      boxShadow: '0 2px 8px rgba(0,0,0,0.04)',
+      display: 'flex',
+      flexDirection: 'column',
+    }}>
+      <div style={{ position: 'relative', width: '100%', height: '180px', backgroundColor: '#f4f4f6' }}>
+        <img src={image} alt={title} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
+        {badge && (
+          <span style={{
+            position: 'absolute',
+            top: '10px',
+            left: '10px',
+            backgroundColor: '#0071e3',
+            color: '#fff',
+            fontSize: '10px',
+            fontWeight: 600,
+            padding: '2px 8px',
+            borderRadius: '99px',
+          }}>
+            {badge}
+          </span>
+        )}
+      </div>
+
+      <div style={{ padding: '16px', display: 'flex', flexDirection: 'column', flex: 1, justifyContent: 'space-between' }}>
+        <div>
+          <div style={{ display: 'flex', alignItems: 'center', gap: '4px', marginBottom: '6px' }}>
+            <Star style={{ width: '12px', height: '12px', fill: '#ff9500', color: '#ff9500' }} />
+            <span style={{ fontSize: '11px', fontWeight: 600, color: '#1d1d1f' }}>{rating}</span>
+          </div>
+          <h4 style={{ fontSize: '14px', fontWeight: 600, color: '#1d1d1f', marginBottom: '4px' }}>{title}</h4>
+          <div style={{ fontSize: '15px', fontWeight: 700, color: '#0071e3' }}>{price}</div>
+        </div>
+
+        <button
+          type="button"
+          onClick={onAddToCart}
+          style={{
+            marginTop: '12px',
+            width: '100%',
+            padding: '8px 12px',
+            borderRadius: '8px',
+            backgroundColor: '#f4f4f6',
+            color: '#1d1d1f',
+            fontSize: '12px',
+            fontWeight: 600,
+            border: 'none',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            gap: '6px',
+            cursor: 'pointer',
+          }}
+        >
+          <ShoppingBag style={{ width: '13px', height: '13px' }} />
+          <span>Add to Bag</span>
+        </button>
+      </div>
+    </div>
+  );
+}
+`}),t.push({path:`src/components/LoginForm.tsx`,language:`typescript`,content:`import React, { useState } from 'react';
+import { Lock } from 'lucide-react';
+
+export interface LoginFormProps {
+  title?: string;
+  subtitle?: string;
+  onSubmit?: (values: { email: string; pass: string }) => void;
+}
+
+export function LoginForm({
+  title = 'Sign In to Your Account',
+  subtitle = 'Enter your credentials to access workspace',
+  onSubmit,
+}: LoginFormProps) {
+  const [email, setEmail] = useState('');
+  const [pass, setPass] = useState('');
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    setIsSubmitting(true);
+    setTimeout(() => {
+      setIsSubmitting(false);
+      onSubmit?.({ email, pass });
+    }, 600);
+  };
+
+  return (
+    <form onSubmit={handleSubmit} style={{
+      maxWidth: '400px',
+      margin: '0 auto',
+      padding: '32px',
+      borderRadius: '18px',
+      backgroundColor: '#ffffff',
+      border: '1px solid #e5e5ea',
+      boxShadow: '0 8px 30px rgba(0,0,0,0.06)',
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '16px',
+    }}>
+      <div style={{ textAlign: 'center' }}>
+        <div style={{
+          width: '36px',
+          height: '36px',
+          borderRadius: '10px',
+          backgroundColor: '#0071e3',
+          color: '#ffffff',
+          display: 'inline-flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          marginBottom: '12px',
+        }}>
+          <Lock style={{ width: '18px', height: '18px' }} />
+        </div>
+        <h3 style={{ fontSize: '18px', fontWeight: 700, color: '#1d1d1f' }}>{title}</h3>
+        <p style={{ fontSize: '12px', color: '#86868b', marginTop: '4px' }}>{subtitle}</p>
+      </div>
+
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
+          <label style={{ fontSize: '11.5px', fontWeight: 600, color: '#6e6e73' }}>Email</label>
+          <input
+            type="email"
+            required
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            placeholder="name@company.com"
+            style={{
+              height: '36px',
+              padding: '0 12px',
+              borderRadius: '8px',
+              border: '1px solid #e5e5ea',
+              fontSize: '13px',
+              outline: 'none',
+            }}
+          />
+        </div>
+
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
+          <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: '11.5px' }}>
+            <label style={{ fontWeight: 600, color: '#6e6e73' }}>Password</label>
+            <span style={{ color: '#0071e3', cursor: 'pointer' }}>Forgot?</span>
+          </div>
+          <input
+            type="password"
+            required
+            value={pass}
+            onChange={(e) => setPass(e.target.value)}
+            placeholder="••••••••••••"
+            style={{
+              height: '36px',
+              padding: '0 12px',
+              borderRadius: '8px',
+              border: '1px solid #e5e5ea',
+              fontSize: '13px',
+              outline: 'none',
+            }}
+          />
+        </div>
+      </div>
+
+      <button
+        type="submit"
+        disabled={isSubmitting}
+        style={{
+          width: '100%',
+          padding: '10px',
+          borderRadius: '10px',
+          backgroundColor: '#0071e3',
+          color: '#ffffff',
+          fontWeight: 600,
+          fontSize: '13.5px',
+          border: 'none',
+          cursor: isSubmitting ? 'not-allowed' : 'pointer',
+          opacity: isSubmitting ? 0.7 : 1,
+        }}
+      >
+        {isSubmitting ? 'Signing In...' : 'Sign In'}
+      </button>
+    </form>
+  );
+}
+`}),t.push({path:`src/components/Modal.tsx`,language:`typescript`,content:`import React, { useEffect } from 'react';
+import { X } from 'lucide-react';
+
+interface ModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  title: string;
+  children: React.ReactNode;
+}
+
+export function Modal({ isOpen, onClose, title, children }: ModalProps) {
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose();
+    };
+    if (isOpen) window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [isOpen, onClose]);
+
+  if (!isOpen) return null;
+
+  return (
+    <div
+      onClick={onClose}
+      style={{
+        position: 'fixed',
+        inset: 0,
+        backgroundColor: 'rgba(0,0,0,0.45)',
+        backdropFilter: 'blur(4px)',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: '1.5rem',
+        zIndex: 9999,
+      }}
+    >
+      <div
+        onClick={(e) => e.stopPropagation()}
+        style={{
+          width: '100%',
+          maxWidth: '440px',
+          backgroundColor: '#ffffff',
+          borderRadius: '16px',
+          border: '1px solid #e5e5ea',
+          boxShadow: '0 20px 40px rgba(0,0,0,0.15)',
+          overflow: 'hidden',
+        }}
+      >
+        <div style={{ padding: '1rem 1.25rem', borderBottom: '1px solid #f4f4f6', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+          <h3 style={{ fontSize: '0.9375rem', fontWeight: 600, color: '#1d1d1f' }}>{title}</h3>
+          <button
+            type="button"
+            onClick={onClose}
+            style={{
+              width: '1.75rem',
+              height: '1.75rem',
+              borderRadius: '50%',
+              backgroundColor: '#f4f4f6',
+              border: 'none',
+              cursor: 'pointer',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              color: '#86868b',
+            }}
+          >
+            <X style={{ width: '1rem', height: '1rem' }} />
+          </button>
+        </div>
+        <div style={{ padding: '1.25rem' }}>{children}</div>
+      </div>
+    </div>
+  );
+}
+`}),t.push({path:`src/components/Footer.tsx`,language:`typescript`,content:`import React from 'react';
+
+export function Footer() {
+  return (
+    <footer style={{
+      width: '100%',
+      borderTop: '1px solid #e5e5ea',
+      backgroundColor: '#ffffff',
+      padding: '2rem 1.5rem',
+      marginTop: '4rem',
+      fontSize: '0.8125rem',
+      color: '#86868b',
+      textAlign: 'center',
+    }}>
+      <div style={{ maxWidth: '1000px', margin: '0 auto', display: 'flex', flexDirection: 'column', gap: '0.5rem', alignItems: 'center' }}>
+        <span style={{ fontWeight: 600, color: '#1d1d1f' }}>${e.name}</span>
+        <span>© 2026 ${e.name}. All rights reserved. Generated with Cyrus.</span>
+      </div>
+    </footer>
+  );
+}
+`}),e.pages.forEach(e=>{let n=p(e.name);t.push({path:`src/pages/${n}Page.tsx`,language:`typescript`,content:`import React from 'react';
+import { Hero } from '../components/Hero';
+import { PricingCard } from '../components/PricingCard';
+import { MetricCard } from '../components/MetricCard';
+
+interface ${n}PageProps {
+  onNavigate: (page: string) => void;
+  onOpenModal: (title: string) => void;
+}
+
+export function ${n}Page({ onNavigate, onOpenModal }: ${n}PageProps) {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '3rem' }}>
+      ${f(e.sections)}
+    </div>
+  );
+}
+`})});let h=e.pages[0]?.slug||`home`;t.push({path:`src/App.tsx`,language:`typescript`,content:`import React, { useState } from 'react';
+import { Navbar } from './components/Navbar';
+import { Footer } from './components/Footer';
+import { Modal } from './components/Modal';
+${e.pages.map(e=>`import { ${p(e.name)}Page } from './pages/${p(e.name)}Page';`).join(`
+`)}
+
+export function App() {
+  const [activePage, setActivePage] = useState('${h}');
+  const [modalState, setModalState] = useState<{ isOpen: boolean; title: string }>({
+    isOpen: false,
+    title: '',
+  });
+
+  const handleOpenModal = (title: string) => {
+    setModalState({ isOpen: true, title });
+  };
+
+  const handleCloseModal = () => {
+    setModalState({ isOpen: false, title: '' });
+  };
+
+  return (
+    <div style={{ minHeight: '100vh', display: 'flex', flexDirection: 'column' }}>
+      <Navbar
+        brandName="${e.name}"
+        links={[${e.pages.map(e=>`'${e.name}'`).join(`, `)}]}
+        activePage={activePage}
+        onNavigate={(slug) => setActivePage(slug)}
+        onOpenAuthModal={() => handleOpenModal('Sign in to ${e.name}')}
+      />
+
+      <main style={{ flex: 1, maxWidth: '1200px', width: '100%', margin: '0 auto', padding: '2rem 1.5rem' }}>
+        ${e.pages.map(e=>`{activePage === '${e.slug}' && <${p(e.name)}Page onNavigate={setActivePage} onOpenModal={handleOpenModal} />}`).join(`
+        `)}
+      </main>
+
+      <Footer />
+
+      <Modal
+        isOpen={modalState.isOpen}
+        onClose={handleCloseModal}
+        title={modalState.title}
+      >
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+          <p style={{ fontSize: '0.875rem', color: '#6e6e73' }}>
+            Enter your work email address to continue to your workspace.
+          </p>
+          <input
+            type="email"
+            placeholder="you@company.com"
+            style={{
+              width: '100%',
+              height: '2.5rem',
+              padding: '0 0.75rem',
+              borderRadius: '8px',
+              border: '1px solid #e5e5ea',
+              fontSize: '0.875rem',
+              outline: 'none',
+            }}
+          />
+          <button
+            type="button"
+            onClick={handleCloseModal}
+            style={{
+              width: '100%',
+              padding: '0.625rem',
+              backgroundColor: '#0071e3',
+              color: '#ffffff',
+              borderRadius: '8px',
+              border: 'none',
+              fontWeight: 600,
+              cursor: 'pointer',
+            }}
+          >
+            Continue with Email
+          </button>
+        </div>
+      </Modal>
+    </div>
+  );
+}
+`}),t.push({path:`README.md`,language:`json`,content:`# ${e.name}
+
+Production application generated by **Cyrus** visual product builder.
+
+## Getting Started
+
+1. Install dependencies:
+\`\`\`bash
+npm install
+\`\`\`
+
+2. Start the local development server:
+\`\`\`bash
+npm run dev
+\`\`\`
+
+3. Build for production:
+\`\`\`bash
+npm run build
+\`\`\`
+`});for(let n of e.pages){let e=`${p(n.name)}Page`;t.push({path:`src/pages/${e}.tsx`,language:`typescript`,content:`import React from 'react';
+import { SeoHead } from '../components/SeoHead';
+import { Hero } from '../components/Hero';
+import { PricingCard } from '../components/PricingCard';
+import { MetricCard } from '../components/MetricCard';
+import { LoginForm } from '../components/LoginForm';
+
+interface ${e}Props {
+  onNavigate: (slug: string) => void;
+  onOpenModal: (title: string) => void;
+}
+
+export function ${e}({ onNavigate, onOpenModal }: ${e}Props) {
+  return (
+    <>
+      <SeoHead title="${n.metaTitle||n.name}" description="${n.metaDescription||``}" />
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '2.5rem' }}>
+        ${f(n.sections)}
+      </div>
+    </>
+  );
+}
+`})}return t}function f(e){return!e||e.length===0?`      <div className="p-8 text-center text-gray-500">Page Content Container</div>`:e.map(e=>{if(e.type===`hero`)return`<Hero
+        badge="${e.props.badge||`Engineering`}"
+        headline="${e.props.headline||`Transform ideas into shipped software.`}"
+        subhead="${e.props.subhead||``}"
+        primaryBtnText="${e.props.primaryBtnText||`Start Free Trial`}"
+        onPrimaryClick={() => onNavigate('pricing')}
+        secondaryBtnText="${e.props.secondaryBtnText||`View Pricing`}"
+        onSecondaryClick={() => onNavigate('pricing')}
+      />`;if(e.type===`grid`)return`<div className="grid-responsive">
+${(e.children||[]).map(e=>e.type===`pricingCard`?`        <PricingCard
+          planName="${e.props.planName||`Pro`}"
+          price="${e.props.price||`$29`}"
+          period="${e.props.period||`/month`}"
+          description="${e.props.description||``}"
+          buttonText="${e.props.buttonText||`Subscribe`}"
+          onSelect={() => onOpenModal('Subscribe to ${e.props.planName||`Plan`}')}
+        />`:e.type===`metricCard`?`        <MetricCard
+          title="${e.props.title||`Metric`}"
+          value="${e.props.value||`$0`}"
+          change="${e.props.change||``}"
+          timeframe="${e.props.timeframe||``}"
+        />`:`        <div style={{ padding: '1.5rem', backgroundColor: '#fff', border: '1px solid #e5e5ea', borderRadius: '14px' }}>
+          <h4>${e.name}</h4>
+        </div>`).join(`
+`)}
+      </div>`;if(e.type===`pricingCard`)return`<div style={{ maxWidth: '400px', margin: '0 auto', width: '100%' }}>
+        <PricingCard
+          planName="${e.props.planName||`Pro`}"
+          price="${e.props.price||`$29`}"
+          period="${e.props.period||`/month`}"
+          description="${e.props.description||``}"
+          buttonText="${e.props.buttonText||`Get Started`}"
+          onSelect={() => onOpenModal('Subscribe to ${e.props.planName||`Plan`}')}
+        />
+      </div>`;if(e.collectionBinding){let{variableKey:t=`products`,columns:n=3}=e.collectionBinding;return`<div style={{ display: 'grid', gridTemplateColumns: 'repeat(${n}, 1fr)', gap: '1.5rem' }}>
+        {${t}.map((item, idx) => (
+          <ProductCard
+            key={idx}
+            title={item.name || item.title || 'Product Item'}
+            price={item.price || '$0.00'}
+            image={item.image}
+            rating={item.rating}
+            badge={item.badge}
+            onAddToCart={() => onOpenModal('Added ' + (item.name || 'item') + ' to bag')}
+          />
+        ))}
+      </div>`}if(e.type===`loginForm`)return`<div style={{ maxWidth: '420px', margin: '2rem auto', width: '100%' }}>
+        <LoginForm
+          title="${e.props.title||`Sign In to Your Account`}"
+          subtitle="${e.props.subtitle||`Enter your email and password`}"
+          onSubmit={(creds) => onOpenModal('Signed in successfully as ' + creds.email)}
+        />
+      </div>`;if(e.type===`signupForm`)return`<div style={{ maxWidth: '420px', margin: '2rem auto', width: '100%' }}>
+        <LoginForm
+          title="${e.props.title||`Create Your Account`}"
+          subtitle="${e.props.subtitle||`Start building with Cyrus`}"
+          onSubmit={(creds) => onOpenModal('Account created for ' + creds.email)}
+        />
+      </div>`;if(e.type===`contactForm`)return`<div style={{ maxWidth: '460px', margin: '2rem auto', width: '100%', padding: '2rem', backgroundColor: '#fff', borderRadius: '18px', border: '1px solid #e5e5ea' }}>
+        <h3 style={{ fontSize: '1.25rem', fontWeight: 700, color: '#1d1d1f', marginBottom: '0.5rem' }}>${e.props.title||`Contact Our Team`}</h3>
+        <p style={{ fontSize: '0.875rem', color: '#86868b', marginBottom: '1.5rem' }}>${e.props.subtitle||`We respond within 24 hours.`}</p>
+        <form onSubmit={(e) => { e.preventDefault(); onOpenModal('Message sent successfully!'); }} style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+          <input required type="text" placeholder="Your Name" style={{ height: '38px', padding: '0 12px', borderRadius: '8px', border: '1px solid #e5e5ea', fontSize: '13px' }} />
+          <input required type="email" placeholder="Your Email" style={{ height: '38px', padding: '0 12px', borderRadius: '8px', border: '1px solid #e5e5ea', fontSize: '13px' }} />
+          <textarea required rows={3} placeholder="How can we help?" style={{ padding: '10px 12px', borderRadius: '8px', border: '1px solid #e5e5ea', fontSize: '13px', resize: 'none' }} />
+          <button type="submit" style={{ padding: '10px', borderRadius: '10px', backgroundColor: '#0071e3', color: '#fff', fontWeight: 600, border: 'none', cursor: 'pointer' }}>
+            ${e.props.submitLabel||`Send Message`}
+          </button>
+        </form>
+      </div>`;let t=e.accessibility||{},n=t.semanticTag&&t.semanticTag!==`div`?t.semanticTag:`div`;return`<${n}${t.ariaRole&&t.ariaRole!==`presentation`?` role="${t.ariaRole}"`:``}${t.ariaLabel?` aria-label="${t.ariaLabel}"`:``} style={{ padding: '1.5rem', backgroundColor: '#ffffff', borderRadius: '14px', border: '1px solid #e5e5ea' }}>
+        <h3 style={{ fontSize: '1.125rem', fontWeight: 600, color: '#1d1d1f' }}>${e.name}</h3>
+      </${n}>`}).join(`
+
+      `)}function p(e){return e.replace(/[^a-zA-Z0-9]/g,` `).split(` `).filter(Boolean).map(e=>e.charAt(0).toUpperCase()+e.slice(1).toLowerCase()).join(``)||`Page`}export{i,u as n,a as r,d as t};