cyrus-studio 1.0.7 → 1.1.0

package/bin/htmlParser.mjs

@@ -0,0 +1,337 @@
+import fs from 'node:fs';
+import path from 'node:path';
+
+/**
+ * Universal HTML/CSS to Cyrus Canvas IR Parser
+ * Parses ANY HTML file (Cyrus exported layer files OR standard semantic HTML pages)
+ * into a full visual Cyrus Canvas project with elements, styles, and coordinates.
+ */
+export function parseHtmlToCyrusProject(htmlContent, filename = 'Imported Project') {
+  if (!htmlContent || typeof htmlContent !== 'string') {
+    return createEmptyProject(filename);
+  }
+
+  // 1. Extract all CSS rules from <style> blocks
+  const cssRules = {};
+  const styleBlockRegex = /<style[^>]*>([\s\S]*?)<\/style>/gi;
+  let styleMatch;
+  while ((styleMatch = styleBlockRegex.exec(htmlContent)) !== null) {
+    const cssText = styleMatch[1];
+    const ruleRegex = /([^{]+)\{([^}]+)\}/g;
+    let ruleMatch;
+    while ((ruleMatch = ruleRegex.exec(cssText)) !== null) {
+      const selector = ruleMatch[1].trim();
+      const body = ruleMatch[2].trim();
+      const props = {};
+      body.split(';').forEach(p => {
+        const parts = p.split(':');
+        if (parts.length >= 2) {
+          const k = parts[0].trim().toLowerCase();
+          const v = parts.slice(1).join(':').trim();
+          if (k && v) props[k] = v;
+        }
+      });
+      // Store under selector
+      cssRules[selector] = { ...(cssRules[selector] || {}), ...props };
+    }
+  }
+
+  // 2. Parse body / canvas background color
+  let backgroundColor = '#0f0f12';
+  const bgMatch = htmlContent.match(/\.screen-canvas\s*\{[^}]*background-color:\s*([^;]+);/i) ||
+                  htmlContent.match(/body\s*\{[^}]*background-color:\s*([^;]+);/i) ||
+                  htmlContent.match(/style=["'][^"']*background(-color)?:\s*([^;]+);/i);
+  if (bgMatch) {
+    const rawCol = (bgMatch[1] || bgMatch[2]).trim();
+    if (rawCol && !rawCol.startsWith('url')) backgroundColor = rawCol;
+  }
+
+  // 3. Parse page title
+  const titleMatch = htmlContent.match(/<title>(.*?)<\/title>/i);
+  const pageTitle = titleMatch ? titleMatch[1].trim() : path.basename(filename, path.extname(filename));
+
+  const parseIntVal = (v, def = 0) => {
+    if (!v) return def;
+    const num = parseInt(v, 10);
+    return isNaN(num) ? def : num;
+  };
+
+  const parseInlineStyles = (styleAttr) => {
+    if (!styleAttr) return {};
+    const props = {};
+    styleAttr.split(';').forEach(p => {
+      const parts = p.split(':');
+      if (parts.length >= 2) {
+        const k = parts[0].trim().toLowerCase();
+        const v = parts.slice(1).join(':').trim();
+        if (k && v) props[k] = v;
+      }
+    });
+    return props;
+  };
+
+  const elements = [];
+
+  // 4A. Check if file uses Cyrus Layer class pattern (.layer-*)
+  const layerTagRegex = /<(div|button|img|h1|h2|h3|h4|p|span|input|a|header|nav|section)[^>]*class=["'][^"']*layer-([a-zA-Z0-9_]+)[^"']*["'][^>]*>([\s\S]*?)<\/\1>|<img[^>]*class=["'][^"']*layer-([a-zA-Z0-9_]+)[^"']*["'][^>]*\/?>/gi;
+  let hasLayerMatch = false;
+  let elemMatch;
+  let elemIndex = 0;
+
+  while ((elemMatch = layerTagRegex.exec(htmlContent)) !== null) {
+    hasLayerMatch = true;
+    const tag = (elemMatch[1] || 'img').toLowerCase();
+    const classId = elemMatch[2] || elemMatch[4];
+    const innerHtml = (elemMatch[3] || '').trim();
+    
+    // Lookup CSS rules for .layer-<classId>
+    const matchedCss = cssRules[`.layer-${classId}`] || cssRules[`#${classId}`] || {};
+
+    const matchIndex = elemMatch.index;
+    const precedingSlice = htmlContent.slice(Math.max(0, matchIndex - 120), matchIndex);
+    const commentMatch = precedingSlice.match(/<!--\s*([^\n>]+?)\s*-->\s*$/);
+    const commentName = commentMatch ? commentMatch[1].trim() : '';
+
+    const textMatch = innerHtml.match(/<span>(.*?)<\/span>/i) || innerHtml.match(/<div[^>]*>(.*?)<\/div>/i);
+    const cleanText = textMatch ? textMatch[1].replace(/<[^>]+>/g, '').trim() : innerHtml.replace(/<[^>]+>/g, '').trim();
+
+    let type = 'box';
+    const lowerComment = commentName.toLowerCase();
+    if (tag === 'button' || lowerComment.includes('button') || lowerComment.includes('cta')) {
+      type = 'button';
+    } else if (lowerComment.includes('navbar') || lowerComment.includes('nav')) {
+      type = 'navbar';
+    } else if (lowerComment.includes('search')) {
+      type = 'searchBar';
+    } else if (lowerComment.includes('chart')) {
+      type = 'lineChart';
+    } else if (lowerComment.includes('switch') || lowerComment.includes('toggle')) {
+      type = 'switch';
+    } else if (lowerComment.includes('header') || lowerComment.includes('heading') || tag === 'h1' || tag === 'h2') {
+      type = 'heading';
+    } else if (lowerComment.includes('pricing')) {
+      type = 'pricingCard';
+    } else if (lowerComment.includes('card')) {
+      type = 'card';
+    } else if (tag === 'img') {
+      type = 'image';
+    }
+
+    const element = {
+      id: classId.startsWith('el_') ? classId : `el_${classId}`,
+      type,
+      name: commentName || `${type.charAt(0).toUpperCase() + type.slice(1)} ${elemIndex + 1}`,
+      x: parseIntVal(matchedCss.left, 40 + (elemIndex * 20)),
+      y: parseIntVal(matchedCss.top, 40 + (elemIndex * 60)),
+      width: parseIntVal(matchedCss.width, 320),
+      height: parseIntVal(matchedCss.height, 44),
+      styles: {
+        backgroundColor: matchedCss['background-color'] || matchedCss.background || undefined,
+        textColor: matchedCss.color || undefined,
+        borderRadius: parseIntVal(matchedCss['border-radius'], 0),
+        fontSize: parseIntVal(matchedCss['font-size'], 14),
+        fontWeight: matchedCss['font-weight'] || undefined,
+        border: matchedCss.border || undefined,
+        zIndex: parseIntVal(matchedCss['z-index'], elemIndex + 1),
+      },
+      content: {
+        title: cleanText || commentName || undefined,
+        text: cleanText || undefined,
+        label: cleanText || undefined,
+        headline: cleanText || undefined,
+        brandName: cleanText || undefined,
+      }
+    };
+
+    elements.push(element);
+    elemIndex++;
+  }
+
+  // 4B. Generic HTML Fallback Parser (for standard HTML files without .layer-* classes)
+  if (!hasLayerMatch) {
+    // Extract elements inside body or main content
+    const bodyMatch = htmlContent.match(/<body[^>]*>([\s\S]*?)<\/body>/i);
+    const contentToParse = bodyMatch ? bodyMatch[1] : htmlContent;
+
+    // Match all prominent HTML tags
+    const genericTagRegex = /<(header|nav|section|main|article|aside|form|div|button|h1|h2|h3|h4|h5|h6|p|input|a|img)[^>]*>([\s\S]*?)<\/\1>|<(input|img)[^>]*\/?>/gi;
+    let genericMatch;
+    let curY = 40;
+    let autoIndex = 0;
+
+    while ((genericMatch = genericTagRegex.exec(contentToParse)) !== null && autoIndex < 35) {
+      const fullTag = genericMatch[0];
+      const tag = (genericMatch[1] || genericMatch[3] || 'div').toLowerCase();
+      const innerContent = (genericMatch[2] || '').trim();
+
+      // Extract attributes
+      const classAttrMatch = fullTag.match(/class=["']([^"']*)["']/i);
+      const idAttrMatch = fullTag.match(/id=["']([^"']*)["']/i);
+      const styleAttrMatch = fullTag.match(/style=["']([^"']*)["']/i);
+      const typeAttrMatch = fullTag.match(/type=["']([^"']*)["']/i);
+      const placeholderMatch = fullTag.match(/placeholder=["']([^"']*)["']/i);
+      const srcMatch = fullTag.match(/src=["']([^"']*)["']/i);
+
+      const classNames = classAttrMatch ? classAttrMatch[1].split(/\s+/) : [];
+      const elementId = idAttrMatch ? idAttrMatch[1] : `node_${autoIndex + 1}`;
+      const inlineStyle = parseInlineStyles(styleAttrMatch ? styleAttrMatch[1] : '');
+
+      // Combine matching CSS rules
+      let matchedCss = { ...inlineStyle };
+      for (const cls of classNames) {
+        if (cssRules[`.${cls}`]) {
+          matchedCss = { ...cssRules[`.${cls}`], ...matchedCss };
+        }
+      }
+      if (idAttrMatch && cssRules[`#${idAttrMatch[1]}`]) {
+        matchedCss = { ...cssRules[`#${idAttrMatch[1]}`], ...matchedCss };
+      }
+      if (cssRules[tag]) {
+        matchedCss = { ...cssRules[tag], ...matchedCss };
+      }
+
+      // Clean text
+      const cleanText = innerContent.replace(/<[^>]+>/g, ' ').replace(/\s+/g, ' ').trim();
+
+      // Determine component type
+      let type = 'box';
+      const inputType = typeAttrMatch ? typeAttrMatch[1].toLowerCase() : '';
+      const combinedClass = classNames.join(' ').toLowerCase();
+
+      if (tag === 'nav' || tag === 'header' || combinedClass.includes('nav') || combinedClass.includes('header')) {
+        type = 'navbar';
+      } else if (tag === 'button' || inputType === 'submit' || inputType === 'button' || combinedClass.includes('btn') || combinedClass.includes('button')) {
+        type = 'button';
+      } else if (inputType === 'search' || combinedClass.includes('search')) {
+        type = 'searchBar';
+      } else if (inputType === 'checkbox' || combinedClass.includes('switch') || combinedClass.includes('toggle')) {
+        type = 'switch';
+      } else if (tag.startsWith('h') || combinedClass.includes('title') || combinedClass.includes('heading')) {
+        type = 'heading';
+      } else if (tag === 'p' || tag === 'span' || tag === 'a') {
+        type = 'paragraph';
+      } else if (tag === 'img' || srcMatch) {
+        type = 'image';
+      } else if (combinedClass.includes('chart')) {
+        type = 'lineChart';
+      } else if (combinedClass.includes('card') || combinedClass.includes('panel')) {
+        type = 'card';
+      }
+
+      // Skip empty nested generic divs with no styling, no text, and no dimensions
+      if (tag === 'div' && !cleanText && !matchedCss['background-color'] && !matchedCss.background && !matchedCss.width && !matchedCss.height) {
+        continue;
+      }
+
+      // Calculate width & height
+      let width = parseIntVal(matchedCss.width, 0);
+      let height = parseIntVal(matchedCss.height, 0);
+
+      if (!width) {
+        if (type === 'navbar') width = 880;
+        else if (type === 'card' || type === 'lineChart') width = 420;
+        else if (type === 'heading' || type === 'paragraph') width = Math.min(680, Math.max(220, cleanText.length * 10));
+        else if (type === 'button') width = Math.min(240, Math.max(120, cleanText.length * 12 + 32));
+        else if (type === 'searchBar') width = 320;
+        else if (type === 'switch') width = 180;
+        else width = 380;
+      }
+
+      if (!height) {
+        if (type === 'navbar') height = 64;
+        else if (type === 'card') height = 220;
+        else if (type === 'lineChart') height = 240;
+        else if (type === 'heading') height = 48;
+        else if (type === 'paragraph') height = 36;
+        else if (type === 'button') height = 44;
+        else if (type === 'searchBar') height = 40;
+        else if (type === 'switch') height = 36;
+        else height = 60;
+      }
+
+      const x = parseIntVal(matchedCss.left, 40);
+      const y = parseIntVal(matchedCss.top, curY);
+
+      curY = Math.max(curY, y + height + 20);
+
+      elements.push({
+        id: `el_${elementId.replace(/[^a-zA-Z0-9_]/g, '_')}`,
+        type,
+        name: cleanText.slice(0, 24) || `${type.charAt(0).toUpperCase() + type.slice(1)} ${autoIndex + 1}`,
+        x,
+        y,
+        width,
+        height,
+        styles: {
+          backgroundColor: matchedCss['background-color'] || matchedCss.background || undefined,
+          textColor: matchedCss.color || undefined,
+          borderRadius: parseIntVal(matchedCss['border-radius'], type === 'button' ? 8 : 0),
+          fontSize: parseIntVal(matchedCss['font-size'], type === 'heading' ? 24 : 14),
+          fontWeight: matchedCss['font-weight'] || (type === 'heading' || type === 'button' ? 'bold' : undefined),
+          border: matchedCss.border || undefined,
+          zIndex: parseIntVal(matchedCss['z-index'], autoIndex + 1),
+        },
+        content: {
+          title: cleanText || undefined,
+          text: cleanText || undefined,
+          label: cleanText || undefined,
+          headline: cleanText || undefined,
+          brandName: type === 'navbar' ? (cleanText || 'Brand') : undefined,
+          placeholder: placeholderMatch ? placeholderMatch[1] : undefined,
+        }
+      });
+
+      autoIndex++;
+    }
+  }
+
+  const cleanBase = path.basename(filename).replace(/[^a-zA-Z0-9]/g, '_');
+  const pageId = `page_${cleanBase || 'main'}`;
+  const projectId = `proj_${cleanBase || 'main'}`;
+
+  return {
+    id: projectId,
+    name: pageTitle,
+    version: '1.0',
+    backgroundColor,
+    pages: [
+      {
+        id: pageId,
+        name: pageTitle,
+        backgroundColor,
+        settings: {
+          backgroundColor,
+          width: 1440,
+          height: 900,
+          minHeight: 900,
+        },
+        elements
+      }
+    ]
+  };
+}
+
+function createEmptyProject(filename = 'Imported Project') {
+  const cleanBase = path.basename(filename).replace(/[^a-zA-Z0-9]/g, '_');
+  return {
+    id: `proj_${cleanBase || 'main'}`,
+    name: cleanBase || 'Imported Project',
+    version: '1.0',
+    backgroundColor: '#0f0f12',
+    pages: [
+      {
+        id: `page_${cleanBase || 'main'}`,
+        name: 'Page 1',
+        backgroundColor: '#0f0f12',
+        settings: {
+          backgroundColor: '#0f0f12',
+          width: 1440,
+          height: 900,
+          minHeight: 900,
+        },
+        elements: []
+      }
+    ]
+  };
+}
+