@see-ms/converter 0.1.1 → 0.1.3

package/dist/index.mjs

@@ -1,6 +1,7 @@
 // src/converter.ts
 import pc3 from "picocolors";
-import fs4 from "fs-extra";
+import path11 from "path";
+import fs9 from "fs-extra";
 
 // src/filesystem.ts
 import fs from "fs-extra";
@@ -319,9 +320,86 @@ ${styles}`, "utf-8");
   }
 }
 
-// src/boilerplate.ts
+// src/editor-integration.ts
 import fs3 from "fs-extra";
 import path4 from "path";
+async function createEditorPlugin(outputDir) {
+  const pluginsDir = path4.join(outputDir, "plugins");
+  await fs3.ensureDir(pluginsDir);
+  const pluginContent = `/**
+ * CMS Editor Overlay Plugin
+ * Loads the inline editor when ?preview=true
+ */
+
+export default defineNuxtPlugin(() => {
+  // Only run on client side
+  if (process.server) return;
+  
+  // Check for preview mode
+  const params = new URLSearchParams(window.location.search);
+  
+  if (params.get('preview') === 'true') {
+    // Dynamically import the editor
+    import('@see-ms/editor-overlay').then(({ initEditor, createToolbar }) => {
+      const editor = initEditor({
+        apiEndpoint: '/api/cms/save',
+        richText: true,
+      });
+      
+      editor.enable();
+      
+      const toolbar = createToolbar(editor);
+      document.body.appendChild(toolbar);
+    });
+  }
+});
+`;
+  const pluginPath = path4.join(pluginsDir, "cms-editor.client.ts");
+  await fs3.writeFile(pluginPath, pluginContent, "utf-8");
+}
+async function addEditorDependency(outputDir) {
+  const packageJsonPath = path4.join(outputDir, "package.json");
+  if (await fs3.pathExists(packageJsonPath)) {
+    const packageJson = await fs3.readJson(packageJsonPath);
+    if (!packageJson.dependencies) {
+      packageJson.dependencies = {};
+    }
+    packageJson.dependencies["@see-ms/editor-overlay"] = "^0.1.1";
+    await fs3.writeJson(packageJsonPath, packageJson, { spaces: 2 });
+  }
+}
+async function createSaveEndpoint(outputDir) {
+  const serverDir = path4.join(outputDir, "server", "api", "cms");
+  await fs3.ensureDir(serverDir);
+  const endpointContent = `/**
+ * API endpoint for saving CMS changes
+ */
+
+export default defineEventHandler(async (event) => {
+  const body = await readBody(event);
+  
+  // TODO: Implement actual saving to Strapi
+  // For now, just log the changes
+  console.log('CMS changes:', body);
+  
+  // In production, this would:
+  // 1. Validate the changes
+  // 2. Send to Strapi API
+  // 3. Return success/error
+  
+  return {
+    success: true,
+    message: 'Changes saved (demo mode)',
+  };
+});
+`;
+  const endpointPath = path4.join(serverDir, "save.post.ts");
+  await fs3.writeFile(endpointPath, endpointContent, "utf-8");
+}
+
+// src/boilerplate.ts
+import fs4 from "fs-extra";
+import path5 from "path";
 import { execSync as execSync2 } from "child_process";
 import pc2 from "picocolors";
 function isGitHubURL(source) {
@@ -331,8 +409,8 @@ async function cloneFromGitHub(repoUrl, outputDir) {
   console.log(pc2.blue("  Cloning from GitHub..."));
   try {
     execSync2(`git clone ${repoUrl} ${outputDir}`, { stdio: "inherit" });
-    const gitDir = path4.join(outputDir, ".git");
-    await fs3.remove(gitDir);
+    const gitDir = path5.join(outputDir, ".git");
+    await fs4.remove(gitDir);
     console.log(pc2.green("  \u2713 Boilerplate cloned successfully"));
   } catch (error) {
     throw new Error(`Failed to clone repository: ${error instanceof Error ? error.message : String(error)}`);
@@ -340,13 +418,13 @@ async function cloneFromGitHub(repoUrl, outputDir) {
 }
 async function copyFromLocal(sourcePath, outputDir) {
   console.log(pc2.blue("  Copying from local path..."));
-  const sourceExists = await fs3.pathExists(sourcePath);
+  const sourceExists = await fs4.pathExists(sourcePath);
   if (!sourceExists) {
     throw new Error(`Local boilerplate not found: ${sourcePath}`);
   }
-  await fs3.copy(sourcePath, outputDir, {
+  await fs4.copy(sourcePath, outputDir, {
     filter: (src) => {
-      const name = path4.basename(src);
+      const name = path5.basename(src);
       return !["node_modules", ".nuxt", ".output", ".git", "dist"].includes(name);
     }
   });
@@ -355,25 +433,25 @@ async function copyFromLocal(sourcePath, outputDir) {
 async function setupBoilerplate(boilerplateSource, outputDir) {
   if (!boilerplateSource) {
     console.log(pc2.blue("\n\u{1F4E6} Creating minimal Nuxt structure..."));
-    await fs3.ensureDir(outputDir);
-    await fs3.ensureDir(path4.join(outputDir, "pages"));
-    await fs3.ensureDir(path4.join(outputDir, "assets"));
-    await fs3.ensureDir(path4.join(outputDir, "public"));
-    await fs3.ensureDir(path4.join(outputDir, "utils"));
-    const configPath = path4.join(outputDir, "nuxt.config.ts");
-    const configExists = await fs3.pathExists(configPath);
+    await fs4.ensureDir(outputDir);
+    await fs4.ensureDir(path5.join(outputDir, "pages"));
+    await fs4.ensureDir(path5.join(outputDir, "assets"));
+    await fs4.ensureDir(path5.join(outputDir, "public"));
+    await fs4.ensureDir(path5.join(outputDir, "utils"));
+    const configPath = path5.join(outputDir, "nuxt.config.ts");
+    const configExists = await fs4.pathExists(configPath);
     if (!configExists) {
       const basicConfig = `export default defineNuxtConfig({
   devtools: { enabled: true },
   css: [],
 })
 `;
-      await fs3.writeFile(configPath, basicConfig, "utf-8");
+      await fs4.writeFile(configPath, basicConfig, "utf-8");
     }
     console.log(pc2.green("  \u2713 Structure created"));
     return;
   }
-  const outputExists = await fs3.pathExists(outputDir);
+  const outputExists = await fs4.pathExists(outputDir);
   if (outputExists) {
     throw new Error(`Output directory already exists: ${outputDir}. Please choose a different path or remove it first.`);
   }
@@ -385,6 +463,652 @@ async function setupBoilerplate(boilerplateSource, outputDir) {
   }
 }
 
+// src/manifest.ts
+import fs6 from "fs-extra";
+import path7 from "path";
+
+// src/detector.ts
+import * as cheerio2 from "cheerio";
+import fs5 from "fs-extra";
+import path6 from "path";
+function cleanClassName(className) {
+  return className.split(" ").filter((cls) => !cls.startsWith("c-") && !cls.startsWith("w-")).filter((cls) => cls.length > 0).join(" ");
+}
+function getPrimaryClass(classAttr) {
+  if (!classAttr) return null;
+  const cleaned = cleanClassName(classAttr);
+  const classes = cleaned.split(" ").filter((c) => c.length > 0);
+  if (classes.length === 0) return null;
+  const original = classes[0];
+  return {
+    selector: original,
+    // Keep original with dashes for CSS selector
+    fieldName: original.replace(/-/g, "_")
+    // Normalize for field name
+  };
+}
+function getContextModifier(_$, $el) {
+  let $current = $el.parent();
+  let depth = 0;
+  while ($current.length > 0 && depth < 5) {
+    const classes = $current.attr("class");
+    if (classes) {
+      const ccClass = classes.split(" ").find((c) => c.startsWith("cc-"));
+      if (ccClass) {
+        return ccClass.replace("cc-", "").replace(/-/g, "_");
+      }
+    }
+    $current = $current.parent();
+    depth++;
+  }
+  return null;
+}
+function isDecorativeImage(_$, $img) {
+  const $parent = $img.parent();
+  const parentClass = $parent.attr("class") || "";
+  const decorativePatterns = [
+    "nav",
+    "logo",
+    "icon",
+    "arrow",
+    "button",
+    "quote",
+    "pagination",
+    "footer",
+    "link"
+  ];
+  return decorativePatterns.some(
+    (pattern) => parentClass.includes(pattern) || parentClass.includes(`${pattern}_`)
+  );
+}
+function isInsideButton($, el) {
+  const $el = $(el);
+  const $button = $el.closest("button, a, NuxtLink, .c_button, .c_icon_button");
+  return $button.length > 0;
+}
+function extractTemplateFromVue(vueContent) {
+  const templateMatch = vueContent.match(/<template>([\s\S]*?)<\/template>/);
+  if (!templateMatch) {
+    return "";
+  }
+  return templateMatch[1];
+}
+function detectEditableFields(templateHtml) {
+  const $ = cheerio2.load(templateHtml);
+  const detectedFields = {};
+  const detectedCollections = {};
+  const collectionElements = /* @__PURE__ */ new Set();
+  const processedCollectionClasses = /* @__PURE__ */ new Set();
+  const potentialCollections = /* @__PURE__ */ new Map();
+  $("[class]").each((_, el) => {
+    const primaryClass = getPrimaryClass($(el).attr("class"));
+    if (primaryClass && (primaryClass.fieldName.includes("card") || primaryClass.fieldName.includes("item") || primaryClass.fieldName.includes("post") || primaryClass.fieldName.includes("feature")) && !primaryClass.fieldName.includes("image") && !primaryClass.fieldName.includes("inner")) {
+      if (!potentialCollections.has(primaryClass.fieldName)) {
+        potentialCollections.set(primaryClass.fieldName, []);
+      }
+      potentialCollections.get(primaryClass.fieldName)?.push(el);
+    }
+  });
+  potentialCollections.forEach((elements, className) => {
+    if (elements.length >= 2) {
+      const $first = $(elements[0]);
+      const collectionFields = {};
+      processedCollectionClasses.add(className);
+      elements.forEach((el) => {
+        collectionElements.add(el);
+        $(el).find("*").each((_, child) => {
+          collectionElements.add(child);
+        });
+      });
+      const collectionClassInfo = getPrimaryClass($(elements[0]).attr("class"));
+      const collectionSelector = collectionClassInfo ? `.${collectionClassInfo.selector}` : `.${className}`;
+      $first.find("img").each((_, img) => {
+        if (isInsideButton($, img)) return;
+        const $img = $(img);
+        const $parent = $img.parent();
+        const parentClassInfo = getPrimaryClass($parent.attr("class"));
+        if (parentClassInfo && parentClassInfo.fieldName.includes("image")) {
+          collectionFields.image = `.${parentClassInfo.selector}`;
+          return false;
+        }
+      });
+      $first.find("div").each((_, el) => {
+        const classInfo = getPrimaryClass($(el).attr("class"));
+        if (classInfo && classInfo.fieldName.includes("tag") && !classInfo.fieldName.includes("container")) {
+          collectionFields.tag = `.${classInfo.selector}`;
+          return false;
+        }
+      });
+      $first.find("h1, h2, h3, h4, h5, h6").first().each((_, el) => {
+        const classInfo = getPrimaryClass($(el).attr("class"));
+        if (classInfo) {
+          collectionFields.title = `.${classInfo.selector}`;
+        }
+      });
+      $first.find("p").first().each((_, el) => {
+        const classInfo = getPrimaryClass($(el).attr("class"));
+        if (classInfo) {
+          collectionFields.description = `.${classInfo.selector}`;
+        }
+      });
+      $first.find("a, NuxtLink").not(".c_button, .c_icon_button").each((_, el) => {
+        const $link = $(el);
+        const linkText = $link.text().trim();
+        if (linkText) {
+          const classInfo = getPrimaryClass($link.attr("class"));
+          collectionFields.link = classInfo ? `.${classInfo.selector}` : "a";
+          return false;
+        }
+      });
+      if (Object.keys(collectionFields).length > 0) {
+        let collectionName = className;
+        if (!collectionName.endsWith("s")) {
+          collectionName += "s";
+        }
+        detectedCollections[collectionName] = {
+          selector: collectionSelector,
+          fields: collectionFields
+        };
+      }
+    }
+  });
+  const $body = $("body");
+  $body.find("h1, h2, h3, h4, h5, h6").each((index, el) => {
+    if (collectionElements.has(el)) return;
+    const $el = $(el);
+    const text = $el.text().trim();
+    const classInfo = getPrimaryClass($el.attr("class"));
+    if (text) {
+      let fieldName;
+      let selector;
+      if (classInfo && !classInfo.fieldName.startsWith("heading_")) {
+        fieldName = classInfo.fieldName;
+        selector = `.${classInfo.selector}`;
+      } else {
+        const $parent = $el.closest('[class*="header"], [class*="hero"], [class*="cta"]').first();
+        const parentClassInfo = getPrimaryClass($parent.attr("class"));
+        const modifier = getContextModifier($, $el);
+        if (parentClassInfo) {
+          fieldName = modifier ? `${modifier}_${parentClassInfo.fieldName}` : parentClassInfo.fieldName;
+          selector = classInfo ? `.${classInfo.selector}` : `.${parentClassInfo.selector}`;
+        } else if (modifier) {
+          fieldName = `${modifier}_heading`;
+          selector = classInfo ? `.${classInfo.selector}` : el.tagName.toLowerCase();
+        } else {
+          fieldName = `heading_${index}`;
+          selector = classInfo ? `.${classInfo.selector}` : el.tagName.toLowerCase();
+        }
+      }
+      detectedFields[fieldName] = {
+        selector,
+        type: "plain",
+        editable: true
+      };
+    }
+  });
+  $body.find("p").each((_index, el) => {
+    if (collectionElements.has(el)) return;
+    const $el = $(el);
+    const text = $el.text().trim();
+    const classInfo = getPrimaryClass($el.attr("class"));
+    if (text && text.length > 20 && classInfo) {
+      const hasFormatting = $el.find("strong, em, b, i, a, NuxtLink").length > 0;
+      detectedFields[classInfo.fieldName] = {
+        selector: `.${classInfo.selector}`,
+        type: hasFormatting ? "rich" : "plain",
+        editable: true
+      };
+    }
+  });
+  $body.find("img").each((_index, el) => {
+    if (collectionElements.has(el)) return;
+    if (isInsideButton($, el)) return;
+    const $el = $(el);
+    if (isDecorativeImage($, $el)) return;
+    const $parent = $el.parent();
+    const parentClassInfo = getPrimaryClass($parent.attr("class"));
+    if (parentClassInfo) {
+      const fieldName = parentClassInfo.fieldName.includes("image") ? parentClassInfo.fieldName : `${parentClassInfo.fieldName}_image`;
+      detectedFields[fieldName] = {
+        selector: `.${parentClassInfo.selector}`,
+        type: "image",
+        editable: true
+      };
+    }
+  });
+  $body.find("NuxtLink.c_button, a.c_button, .c_button").each((_index, el) => {
+    if (collectionElements.has(el)) return;
+    const $el = $(el);
+    const text = $el.contents().filter(function() {
+      return this.type === "text" || this.type === "tag" && this.name === "div";
+    }).first().text().trim();
+    if (text && text.length > 2) {
+      const $parent = $el.closest('[class*="cta"]').first();
+      const parentClassInfo = getPrimaryClass($parent.attr("class"));
+      const fieldName = parentClassInfo ? `${parentClassInfo.fieldName}_button_text` : "button_text";
+      detectedFields[fieldName] = {
+        selector: `.c_button`,
+        type: "plain",
+        editable: true
+      };
+    }
+  });
+  return {
+    fields: detectedFields,
+    collections: detectedCollections
+  };
+}
+async function analyzeVuePages(pagesDir) {
+  const results = {};
+  const vueFiles = await fs5.readdir(pagesDir);
+  for (const file of vueFiles) {
+    if (file.endsWith(".vue")) {
+      const filePath = path6.join(pagesDir, file);
+      const content = await fs5.readFile(filePath, "utf-8");
+      const template = extractTemplateFromVue(content);
+      if (template) {
+        const pageName = file.replace(".vue", "");
+        results[pageName] = detectEditableFields(template);
+      }
+    }
+  }
+  return results;
+}
+
+// src/manifest.ts
+async function generateManifest(pagesDir) {
+  const analyzed = await analyzeVuePages(pagesDir);
+  const pages = {};
+  for (const [pageName, detection] of Object.entries(analyzed)) {
+    pages[pageName] = {
+      fields: detection.fields,
+      collections: detection.collections,
+      meta: {
+        route: pageName === "index" ? "/" : `/${pageName}`
+      }
+    };
+  }
+  const manifest = {
+    version: "1.0",
+    pages
+  };
+  return manifest;
+}
+async function writeManifest(outputDir, manifest) {
+  const manifestPath = path7.join(outputDir, "cms-manifest.json");
+  await fs6.writeFile(manifestPath, JSON.stringify(manifest, null, 2), "utf-8");
+}
+
+// src/transformer.ts
+function mapFieldTypeToStrapi(fieldType) {
+  const typeMap = {
+    plain: "string",
+    rich: "richtext",
+    html: "richtext",
+    image: "media",
+    link: "string",
+    email: "email",
+    phone: "string"
+  };
+  return typeMap[fieldType] || "string";
+}
+function pluralize(word) {
+  if (word.endsWith("s") || word.endsWith("x") || word.endsWith("z") || word.endsWith("ch") || word.endsWith("sh")) {
+    return word + "es";
+  }
+  if (word.endsWith("y") && word.length > 1) {
+    const secondLast = word[word.length - 2];
+    if (!"aeiou".includes(secondLast.toLowerCase())) {
+      return word.slice(0, -1) + "ies";
+    }
+  }
+  return word + "s";
+}
+function pageToStrapiSchema(pageName, fields) {
+  const attributes = {};
+  for (const [fieldName, field] of Object.entries(fields)) {
+    attributes[fieldName] = {
+      type: mapFieldTypeToStrapi(field.type),
+      required: field.required || false
+    };
+    if (field.default) {
+      attributes[fieldName].default = field.default;
+    }
+  }
+  const displayName = pageName.split("-").map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join(" ");
+  const kebabCaseName = pageName;
+  const pluralName = pluralize(kebabCaseName);
+  return {
+    kind: "singleType",
+    collectionName: kebabCaseName,
+    info: {
+      singularName: kebabCaseName,
+      pluralName,
+      displayName
+    },
+    options: {
+      draftAndPublish: true
+    },
+    attributes
+  };
+}
+function collectionToStrapiSchema(collectionName, collection) {
+  const attributes = {};
+  for (const [fieldName, _selector] of Object.entries(collection.fields)) {
+    let type = "string";
+    if (fieldName === "image" || fieldName.includes("image")) {
+      type = "media";
+    } else if (fieldName === "description" || fieldName === "content") {
+      type = "richtext";
+    } else if (fieldName === "link" || fieldName === "url") {
+      type = "string";
+    } else if (fieldName === "title" || fieldName === "tag") {
+      type = "string";
+    }
+    attributes[fieldName] = {
+      type
+    };
+  }
+  const displayName = collectionName.split(/[-_]/).map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join(" ");
+  const kebabCaseName = collectionName.replace(/_/g, "-");
+  const singularName = kebabCaseName.endsWith("s") ? kebabCaseName.slice(0, -1) : kebabCaseName;
+  return {
+    kind: "collectionType",
+    collectionName: kebabCaseName,
+    info: {
+      singularName,
+      pluralName: kebabCaseName,
+      displayName
+    },
+    options: {
+      draftAndPublish: true
+    },
+    attributes
+  };
+}
+function manifestToSchemas(manifest) {
+  const schemas = {};
+  for (const [pageName, page] of Object.entries(manifest.pages)) {
+    if (page.fields && Object.keys(page.fields).length > 0) {
+      schemas[pageName] = pageToStrapiSchema(pageName, page.fields);
+    }
+    if (page.collections) {
+      for (const [collectionName, collection] of Object.entries(page.collections)) {
+        schemas[collectionName] = collectionToStrapiSchema(collectionName, collection);
+      }
+    }
+  }
+  return schemas;
+}
+
+// src/schema-writer.ts
+import fs7 from "fs-extra";
+import path8 from "path";
+async function writeStrapiSchema(outputDir, name, schema) {
+  const schemasDir = path8.join(outputDir, "cms-schemas");
+  await fs7.ensureDir(schemasDir);
+  const schemaPath = path8.join(schemasDir, `${name}.json`);
+  await fs7.writeFile(schemaPath, JSON.stringify(schema, null, 2), "utf-8");
+}
+async function writeAllSchemas(outputDir, schemas) {
+  for (const [name, schema] of Object.entries(schemas)) {
+    await writeStrapiSchema(outputDir, name, schema);
+  }
+}
+async function createStrapiReadme(outputDir) {
+  const readmePath = path8.join(outputDir, "cms-schemas", "README.md");
+  const content = `# CMS Schemas
+
+Auto-generated Strapi content type schemas from your Webflow export.
+
+## What's in this folder?
+
+Each \`.json\` file is a Strapi content type schema:
+
+- **Pages** (single types) - Unique pages like \`index.json\`, \`about.json\`
+- **Collections** (collection types) - Repeating content like \`portfolio_cards.json\`
+
+## How to use with Strapi
+
+### Option 1: Manual Setup (Recommended for learning)
+
+1. Start your Strapi project
+2. In Strapi admin, go to **Content-Type Builder**
+3. Create each content type manually using these schemas as reference
+4. Match the field names and types
+
+### Option 2: Automated Setup (Advanced)
+
+Copy schemas to your Strapi project structure:
+
+\`\`\`bash
+# For each schema file, create the Strapi directory structure
+# Example for index.json (single type):
+mkdir -p strapi/src/api/index/content-types/index
+cp cms-schemas/index.json strapi/src/api/index/content-types/index/schema.json
+
+# Example for portfolio_cards.json (collection type):
+mkdir -p strapi/src/api/portfolio-cards/content-types/portfolio-card
+cp cms-schemas/portfolio_cards.json strapi/src/api/portfolio-cards/content-types/portfolio-card/schema.json
+\`\`\`
+
+Then restart Strapi - it will auto-create the content types.
+
+## Schema Structure
+
+Each schema defines:
+- \`kind\`: "singleType" (unique page) or "collectionType" (repeating)
+- \`attributes\`: Fields and their types (string, richtext, media, etc.)
+- \`displayName\`: How it appears in Strapi admin
+
+## Field Types
+
+- \`string\` - Plain text
+- \`richtext\` - Formatted text with HTML
+- \`media\` - Image uploads
+
+## Next Steps
+
+1. Set up a Strapi project: \`npx create-strapi-app@latest my-strapi\`
+2. Use these schemas to create content types
+3. Populate content in Strapi admin
+4. Connect your Nuxt app to Strapi API
+
+## API Usage in Nuxt
+
+Once Strapi is running with these content types:
+
+\`\`\`typescript
+// Fetch single type (e.g., home page)
+const { data } = await $fetch('http://localhost:1337/api/index')
+
+// Fetch collection type (e.g., portfolio cards)
+const { data } = await $fetch('http://localhost:1337/api/portfolio-cards')
+\`\`\`
+`;
+  await fs7.writeFile(readmePath, content, "utf-8");
+}
+
+// src/content-extractor.ts
+import * as cheerio3 from "cheerio";
+import path9 from "path";
+function extractContentFromHTML(html, _pageName, pageManifest) {
+  const $ = cheerio3.load(html);
+  const content = {
+    fields: {},
+    collections: {}
+  };
+  if (pageManifest.fields) {
+    for (const [fieldName, field] of Object.entries(pageManifest.fields)) {
+      const selector = field.selector;
+      const element = $(selector).first();
+      if (element.length > 0) {
+        if (field.type === "image") {
+          const src = element.attr("src") || element.find("img").attr("src") || "";
+          content.fields[fieldName] = src;
+        } else {
+          const text = element.text().trim();
+          content.fields[fieldName] = text;
+        }
+      }
+    }
+  }
+  if (pageManifest.collections) {
+    for (const [collectionName, collection] of Object.entries(pageManifest.collections)) {
+      const items = [];
+      const collectionElements = $(collection.selector);
+      collectionElements.each((_, elem) => {
+        const item = {};
+        const $elem = $(elem);
+        for (const [fieldName, fieldSelector] of Object.entries(collection.fields)) {
+          const fieldElement = $elem.find(fieldSelector).first();
+          if (fieldElement.length > 0) {
+            if (fieldName === "image" || fieldName.includes("image")) {
+              const src = fieldElement.attr("src") || fieldElement.find("img").attr("src") || "";
+              item[fieldName] = src;
+            } else if (fieldName === "link" || fieldName === "url") {
+              const href = fieldElement.attr("href") || "";
+              item[fieldName] = href;
+            } else {
+              const text = fieldElement.text().trim();
+              item[fieldName] = text;
+            }
+          }
+        }
+        if (Object.keys(item).length > 0) {
+          items.push(item);
+        }
+      });
+      if (items.length > 0) {
+        content.collections[collectionName] = items;
+      }
+    }
+  }
+  return content;
+}
+function extractAllContent(htmlFiles, manifest) {
+  const extractedContent = {
+    pages: {}
+  };
+  for (const [pageName, pageManifest] of Object.entries(manifest.pages)) {
+    const html = htmlFiles.get(pageName);
+    if (html) {
+      const content = extractContentFromHTML(html, pageName, pageManifest);
+      extractedContent.pages[pageName] = content;
+    }
+  }
+  return extractedContent;
+}
+function normalizeImagePath(imageSrc) {
+  if (!imageSrc) return "";
+  if (imageSrc.startsWith("/")) return imageSrc;
+  const filename = path9.basename(imageSrc);
+  if (imageSrc.includes("images/")) {
+    return `/images/${filename}`;
+  }
+  return `/${filename}`;
+}
+function formatForStrapi(extracted) {
+  const seedData = {};
+  for (const [pageName, content] of Object.entries(extracted.pages)) {
+    if (Object.keys(content.fields).length > 0) {
+      const formattedFields = {};
+      for (const [fieldName, value] of Object.entries(content.fields)) {
+        if (fieldName.includes("image") || fieldName.includes("bg")) {
+          formattedFields[fieldName] = normalizeImagePath(value);
+        } else {
+          formattedFields[fieldName] = value;
+        }
+      }
+      seedData[pageName] = formattedFields;
+    }
+    for (const [collectionName, items] of Object.entries(content.collections)) {
+      const formattedItems = items.map((item) => {
+        const formattedItem = {};
+        for (const [fieldName, value] of Object.entries(item)) {
+          if (fieldName === "image" || fieldName.includes("image")) {
+            formattedItem[fieldName] = normalizeImagePath(value);
+          } else {
+            formattedItem[fieldName] = value;
+          }
+        }
+        return formattedItem;
+      });
+      seedData[collectionName] = formattedItems;
+    }
+  }
+  return seedData;
+}
+
+// src/seed-writer.ts
+import fs8 from "fs-extra";
+import path10 from "path";
+async function writeSeedData(outputDir, seedData) {
+  const seedDir = path10.join(outputDir, "cms-seed");
+  await fs8.ensureDir(seedDir);
+  const seedPath = path10.join(seedDir, "seed-data.json");
+  await fs8.writeJson(seedPath, seedData, { spaces: 2 });
+}
+async function createSeedReadme(outputDir) {
+  const readmePath = path10.join(outputDir, "cms-seed", "README.md");
+  const content = `# CMS Seed Data
+
+Auto-extracted content from your Webflow export, ready to seed into Strapi.
+
+## What's in this folder?
+
+\`seed-data.json\` contains the actual content extracted from your HTML:
+- **Single types** - Page-specific content (homepage, about page, etc.)
+- **Collection types** - Repeating items (portfolio cards, team members, etc.)
+
+## Structure
+
+\`\`\`json
+{
+  "index": {
+    "hero_heading_container": "Actual heading from HTML",
+    "hero_bg_image": "/images/hero.jpg",
+    ...
+  },
+  "portfolio_cards": [
+    {
+      "image": "/images/card1.jpg",
+      "tag": "Technology",
+      "description": "Card description"
+    }
+  ]
+}
+\`\`\`
+
+## How to Seed Strapi
+
+### Option 1: Manual Entry
+1. Open Strapi admin panel
+2. Go to Content Manager
+3. Create entries using the data from \`seed-data.json\`
+
+### Option 2: Automated Seeding (Coming Soon)
+We'll provide a seeding script that:
+1. Uploads images to Strapi media library
+2. Creates content entries via Strapi API
+3. Handles relationships between content types
+
+## Image Paths
+
+Image paths in the seed data reference files in your Nuxt \`public/\` directory:
+- \`/images/hero.jpg\` \u2192 \`public/images/hero.jpg\`
+
+When seeding Strapi, these images will be uploaded to Strapi's media library.
+
+## Next Steps
+
+1. Review the extracted data for accuracy
+2. Set up your Strapi instance with the schemas from \`cms-schemas/\`
+3. Use this seed data to populate your CMS
+`;
+  await fs8.writeFile(readmePath, content, "utf-8");
+}
+
 // src/converter.ts
 async function convertWebflowExport(options) {
   const { inputDir, outputDir, boilerplate } = options;
@@ -393,7 +1117,7 @@ async function convertWebflowExport(options) {
   console.log(pc3.dim(`Output: ${outputDir}`));
   try {
     await setupBoilerplate(boilerplate, outputDir);
-    const inputExists = await fs4.pathExists(inputDir);
+    const inputExists = await fs9.pathExists(inputDir);
     if (!inputExists) {
       throw new Error(`Input directory not found: ${inputDir}`);
     }
@@ -409,10 +1133,17 @@ async function convertWebflowExport(options) {
     console.log(pc3.blue("\n\u{1F50D} Finding HTML files..."));
     const htmlFiles = await findHTMLFiles(inputDir);
     console.log(pc3.green(`  \u2713 Found ${htmlFiles.length} HTML files`));
+    const htmlContentMap = /* @__PURE__ */ new Map();
+    for (const htmlFile of htmlFiles) {
+      const html = await readHTMLFile(inputDir, htmlFile);
+      const pageName = htmlFile.replace(".html", "").replace(/\//g, "-");
+      htmlContentMap.set(pageName, html);
+      console.log(pc3.dim(`  Stored: ${pageName} from ${htmlFile}`));
+    }
     console.log(pc3.blue("\n\u2699\uFE0F  Converting HTML to Vue components..."));
     let allEmbeddedStyles = "";
     for (const htmlFile of htmlFiles) {
-      const html = await readHTMLFile(inputDir, htmlFile);
+      const html = htmlContentMap.get(htmlFile.replace(".html", "").replace(/\//g, "-"));
       const parsed = parseHTML(html, htmlFile);
       if (parsed.embeddedStyles) {
         allEmbeddedStyles += `
@@ -427,6 +1158,41 @@ ${parsed.embeddedStyles}
       console.log(pc3.green(`  \u2713 Created ${htmlFile.replace(".html", ".vue")}`));
     }
     await formatVueFiles(outputDir);
+    console.log(pc3.blue("\n\u{1F50D} Analyzing pages for CMS fields..."));
+    const pagesDir = path11.join(outputDir, "pages");
+    const manifest = await generateManifest(pagesDir);
+    await writeManifest(outputDir, manifest);
+    const totalFields = Object.values(manifest.pages).reduce(
+      (sum, page) => sum + Object.keys(page.fields || {}).length,
+      0
+    );
+    const totalCollections = Object.values(manifest.pages).reduce(
+      (sum, page) => sum + Object.keys(page.collections || {}).length,
+      0
+    );
+    console.log(pc3.green(`  \u2713 Detected ${totalFields} fields across ${Object.keys(manifest.pages).length} pages`));
+    console.log(pc3.green(`  \u2713 Detected ${totalCollections} collections`));
+    console.log(pc3.green("  \u2713 Generated cms-manifest.json"));
+    console.log(pc3.blue("\n\u{1F4DD} Extracting content from HTML..."));
+    console.log(pc3.dim(`  HTML map has ${htmlContentMap.size} entries`));
+    console.log(pc3.dim(`  Manifest has ${Object.keys(manifest.pages).length} pages`));
+    const extractedContent = extractAllContent(htmlContentMap, manifest);
+    const seedData = formatForStrapi(extractedContent);
+    await writeSeedData(outputDir, seedData);
+    await createSeedReadme(outputDir);
+    const pagesWithContent = Object.keys(seedData).filter((key) => {
+      const data = seedData[key];
+      if (Array.isArray(data)) return data.length > 0;
+      return Object.keys(data).length > 0;
+    }).length;
+    console.log(pc3.green(`  \u2713 Extracted content from ${pagesWithContent} pages`));
+    console.log(pc3.green(`  \u2713 Generated cms-seed/seed-data.json`));
+    console.log(pc3.blue("\n\u{1F4CB} Generating Strapi schemas..."));
+    const schemas = manifestToSchemas(manifest);
+    await writeAllSchemas(outputDir, schemas);
+    await createStrapiReadme(outputDir);
+    console.log(pc3.green(`  \u2713 Generated ${Object.keys(schemas).length} Strapi content types`));
+    console.log(pc3.dim("    View schemas in: cms-schemas/"));
     if (allEmbeddedStyles.trim()) {
       console.log(pc3.blue("\n\u2728 Writing embedded styles..."));
       const dedupedStyles = deduplicateStyles(allEmbeddedStyles);
@@ -441,14 +1207,24 @@ ${parsed.embeddedStyles}
       await updateNuxtConfig(outputDir, assets.css);
       console.log(pc3.green("  \u2713 Config updated"));
     } catch (error) {
-      console.log(pc3.yellow("  \u26A0 Could not update nuxt.config.ts automatically"));
+      console.log(pc3.yellow("  \u26A0  Could not update nuxt.config.ts automatically"));
       console.log(pc3.dim("    Please add CSS files manually"));
     }
+    console.log(pc3.blue("\n\u{1F3A8} Setting up editor overlay..."));
+    await createEditorPlugin(outputDir);
+    await addEditorDependency(outputDir);
+    await createSaveEndpoint(outputDir);
+    console.log(pc3.green("  \u2713 Editor plugin created"));
+    console.log(pc3.green("  \u2713 Editor dependency added"));
+    console.log(pc3.green("  \u2713 Save endpoint created"));
     console.log(pc3.green("\n\u2705 Conversion completed successfully!"));
     console.log(pc3.cyan("\n\u{1F4CB} Next steps:"));
     console.log(pc3.dim(`  1. cd ${outputDir}`));
-    console.log(pc3.dim("  2. pnpm install"));
-    console.log(pc3.dim("  3. pnpm dev"));
+    console.log(pc3.dim("  2. Review cms-manifest.json and cms-seed/seed-data.json"));
+    console.log(pc3.dim("  3. Set up Strapi and install schemas from cms-schemas/"));
+    console.log(pc3.dim("  4. Seed Strapi with data from cms-seed/"));
+    console.log(pc3.dim("  5. pnpm install && pnpm dev"));
+    console.log(pc3.dim("  6. Visit http://localhost:3000?preview=true to edit inline!"));
   } catch (error) {
     console.error(pc3.red("\n\u274C Conversion failed:"));
     console.error(pc3.red(error instanceof Error ? error.message : String(error)));
@@ -456,31 +1232,16 @@ ${parsed.embeddedStyles}
   }
 }
 
-// src/detector.ts
-function detectEditableFields(_html) {
-  throw new Error("Not yet implemented");
-}
-
-// src/manifest.ts
-function generateManifest(_data) {
-  throw new Error("Not yet implemented");
-}
-
 // src/generator.ts
 async function generateSchemas(_manifestPath, _cmsType) {
   throw new Error("Not yet implemented");
 }
-
-// src/transformer.ts
-function manifestToSchema(_manifest, _cmsType) {
-  throw new Error("Not yet implemented");
-}
 export {
   convertWebflowExport,
   detectEditableFields,
   generateManifest,
   generateSchemas,
-  manifestToSchema,
+  manifestToSchemas,
   setupBoilerplate
 };
 //# sourceMappingURL=index.mjs.map