framer-export 4.4.1 → 4.4.2

package/dist/cli/index.js

@@ -15,7 +15,7 @@ var init_package = __esm({
   "package.json"() {
     package_default = {
       name: "framer-export",
-      version: "4.4.1",
+      version: "4.4.2",
       description: "Export any Framer, Webflow, or Wix site into a fully working local mirror. Downloads all assets, strips badges, rewrites URLs, and pretty-prints JS.",
       type: "module",
       main: "dist/cli/index.js",
@@ -1603,12 +1603,13 @@ var init_template = __esm({
   "src/server/template.ts"() {
     "use strict";
     SERVE_SCRIPT = `#!/usr/bin/env node
-const http = require('http');
-const fs   = require('fs');
-const path = require('path');
+import http from 'node:http';
+import fs from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
 
 const PORT = process.env.PORT || 3000;
-const ROOT = __dirname;
+const ROOT = path.dirname(fileURLToPath(import.meta.url));
 
 const MIME = {
   '.html':      'text/html; charset=utf-8',
@@ -1679,6 +1680,7 @@ const ANSI = {
   border: '\\x1b[38;2;72;72;72m',
   success: '\\x1b[38;2;127;216;143m',
   info: '\\x1b[38;2;86;182;194m',
+  error: '\\x1b[38;2;224;108;117m',
 };
 
 function color(name, value) {
@@ -1692,23 +1694,13 @@ function frameLine(label, value) {
 }
 
 function drawServerUi() {
-  const logo = [
-    '\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2557\u2588\u2588\u2588\u2588\u2588\u2588\u2557  \u2588\u2588\u2588\u2588\u2588\u2557 \u2588\u2588\u2588\u2557   \u2588\u2588\u2588\u2557\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2557\u2588\u2588\u2588\u2588\u2588\u2588\u2557 ',
-    '\u2588\u2588\u2554\u2550\u2550\u2550\u2550\u255D\u2588\u2588\u2554\u2550\u2550\u2588\u2588\u2557\u2588\u2588\u2554\u2550\u2550\u2588\u2588\u2557\u2588\u2588\u2588\u2588\u2557 \u2588\u2588\u2588\u2588\u2551\u2588\u2588\u2554\u2550\u2550\u2550\u2550\u255D\u2588\u2588\u2554\u2550\u2550\u2588\u2588\u2557',
-    '\u2588\u2588\u2588\u2588\u2588\u2557  \u2588\u2588\u2588\u2588\u2588\u2588\u2554\u255D\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2551\u2588\u2588\u2554\u2588\u2588\u2588\u2588\u2554\u2588\u2588\u2551\u2588\u2588\u2588\u2588\u2588\u2557  \u2588\u2588\u2588\u2588\u2588\u2588\u2554\u255D',
-    '\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2557\u2588\u2588\u2557  \u2588\u2588\u2557\u2588\u2588\u2588\u2588\u2588\u2588\u2557  \u2588\u2588\u2588\u2588\u2588\u2588\u2557 \u2588\u2588\u2588\u2588\u2588\u2588\u2557 \u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2557',
-    '\u2588\u2588\u2554\u2550\u2550\u2550\u2550\u255D\u255A\u2588\u2588\u2557\u2588\u2588\u2554\u255D\u2588\u2588\u2554\u2550\u2550\u2588\u2588\u2557\u2588\u2588\u2554\u2550\u2550\u2550\u2588\u2588\u2557\u2588\u2588\u2554\u2550\u2550\u2588\u2588\u2557\u255A\u2550\u2550\u2588\u2588\u2554\u2550\u2550\u255D',
-    '\u2588\u2588\u2588\u2588\u2588\u2557   \u255A\u2588\u2588\u2588\u2554\u255D \u2588\u2588\u2588\u2588\u2588\u2588\u2554\u255D\u2588\u2588\u2551   \u2588\u2588\u2551\u2588\u2588\u2588\u2588\u2588\u2588\u2554\u255D   \u2588\u2588\u2551   ',
-  ];
-
-  console.log('');
-  for (const line of logo) console.log('  ' + color('primary', line));
   console.log('');
   console.log('  ' + color('border', '\u256D\u2500' + '\u2500'.repeat(56) + '\u2500\u256E'));
-  console.log('  ' + color('border', '\u2502 ') + color('text', '  Framer Export local server') + ' '.repeat(28) + color('border', ' \u2502'));
+  console.log('  ' + color('border', '\u2502 ') + color('text', '  Framer Export preview server') + ' '.repeat(26) + color('border', ' \u2502'));
   console.log('  ' + color('border', '\u251C\u2500' + '\u2500'.repeat(56) + '\u2500\u2524'));
   frameLine('URL', 'http://localhost:' + PORT);
   frameLine('Root', ROOT);
+  frameLine('Run', 'node serve.js');
   frameLine('Mode', 'static mirror + SPA fallback');
   console.log('  ' + color('border', '\u2570\u2500' + '\u2500'.repeat(56) + '\u2500\u256F'));
   console.log('');
@@ -1717,9 +1709,12 @@ function drawServerUi() {
 
 server.listen(PORT, () => {
   const frames = ['\u280B', '\u2819', '\u2839', '\u2838', '\u283C', '\u2834', '\u2826', '\u2827', '\u2807', '\u280F'];
+  const steps = ['Preparing server', 'Checking exported files', 'Binding local port', 'Serving static mirror'];
   let i = 0;
   const timer = setInterval(() => {
-    process.stdout.write('\\r\\x1B[2K  ' + color('primary', frames[i % frames.length]) + ' ' + color('muted', 'starting Framer Export server'));
+    const step = steps[Math.min(steps.length - 1, Math.floor(i / 6))];
+    const dots = color('error', '.'.repeat(i % 4).padEnd(3, ' '));
+    process.stdout.write('\\r\\x1B[2K  ' + color('primary', frames[i % frames.length]) + ' ' + color('text', step) + dots);
     i++;
   }, 80);
 
@@ -1727,7 +1722,7 @@ server.listen(PORT, () => {
     clearInterval(timer);
     process.stdout.write('\\r\\x1B[2K');
     drawServerUi();
-  }, 720);
+  }, 1280);
 });
 `;
   }
@@ -1893,8 +1888,13 @@ async function buildOutput(exporter) {
   log("Writing index.html (" + (html.length / 1024).toFixed(1) + " KB)...");
   await fs2.writeFile(path3.join(exporter.outDir, "index.html"), html);
   success("index.html written");
-  await fs2.writeFile(path3.join(exporter.outDir, "serve.cjs"), SERVE_SCRIPT);
-  log("serve.cjs written");
+  await fs2.writeFile(path3.join(exporter.outDir, "serve.js"), SERVE_SCRIPT);
+  log("serve.js written");
+  await fs2.writeFile(
+    path3.join(exporter.outDir, "package.json"),
+    JSON.stringify({ type: "module", scripts: { serve: "node serve.js" } }, null, 2) + "\n"
+  );
+  log("package.json written for serve.js");
   success("Output build complete");
 }
 async function rewriteDownloadedFiles(exporter) {
@@ -2044,21 +2044,19 @@ async function printSummary(exporter) {
     console.log(boxBot(w));
   }
   console.log("");
-  const cdCmd = "cd " + path4.basename(exporter.outDir) + " && node serve.cjs";
+  const cdCmd = "cd " + path4.basename(exporter.outDir);
+  const runCmd = "node serve.js";
   if (!isSmall) {
     console.log(boxTop(w));
     console.log(boxLine(w, ui.text.bold("  To serve locally")));
     console.log(boxSep(w));
-    const inner = w - 6;
-    const cmdLen = cdCmd.length;
-    const pad = Math.max(0, inner - cmdLen);
-    console.log(
-      "  " + ui.border("\u2502 ") + G(cdCmd) + " ".repeat(pad) + ui.muted(" copy") + ui.border(" \u2502")
-    );
+    console.log(boxRow(w, "Open", cdCmd));
+    console.log(boxRow(w, "Run", runCmd));
     console.log(boxBot(w));
   } else {
     console.log(ui.text.bold("  To serve locally:"));
     console.log(`  ${G(cdCmd)}`);
+    console.log(`  ${G(runCmd)}`);
   }
   console.log("");
   console.log(ui.muted("  note: must be served via HTTP for JS modules to work."));
@@ -2079,17 +2077,10 @@ import { stdin as stdin2, stdout as stdout2 } from "process";
 import { spawn } from "child_process";
 async function runAiPromptAssistant(exporter) {
   if (!stdin2.isTTY || !stdout2.isTTY) return;
-  printConvertPanel(exporter);
-  const action = await select(
-    "Framer Export AI Convert",
-    [
-      { label: `${buttonLabel("Convert")} open AI prompt modal`, value: "convert" },
-      { label: `${buttonLabel("Skip")} finish export`, value: "skip" }
-    ],
-    0
-  );
-  if (action === "skip") return;
-  printAssistantModal("AI conversion prompt", [
+  const serveCommand = buildServeCommand(exporter);
+  const shouldConvert = await runExportCompletePrompt(exporter, serveCommand);
+  if (!shouldConvert) return;
+  printAssistantModal(`${ui.text.bold("AI conversion prompt")} ${ui.error("BETA")}`, [
     "Choose a target stack, AI tool, and conversion situation.",
     "Mouse clicks are supported in the terminal when available.",
     "A detailed prompt file will be generated inside the export folder."
@@ -2118,16 +2109,8 @@ async function runAiPromptAssistant(exporter) {
   const promptPath = path5.join(aiDir, `${aiTool.id}-${target.id}-${goal.id}-prompt.md`);
   await fs4.mkdir(aiDir, { recursive: true });
   await fs4.writeFile(promptPath, prompt, "utf-8");
-  printPromptResult(promptPath, target, aiTool, goal);
-  const promptAction = await select(
-    "Prompt actions",
-    [
-      { label: `${buttonLabel("Copy prompt")} clipboard`, value: "copy" },
-      { label: `${buttonLabel("Done")} keep file only`, value: "done" }
-    ],
-    0
-  );
-  if (promptAction === "copy") {
+  const copyPrompt = await runPromptReadyPrompt(promptPath, target, aiTool, goal);
+  if (copyPrompt) {
     try {
       await copyToClipboard(prompt);
       console.log(`  ${ui.success("\u2713")} ${ui.text.bold("Prompt copied to clipboard")}
@@ -2185,27 +2168,97 @@ function centerText2(text, width) {
   const left = Math.floor((width - visible) / 2);
   return " ".repeat(left) + text + " ".repeat(width - visible - left);
 }
-function printConvertPanel(exporter) {
-  const w = maxWidth();
-  const inner = w - 4;
-  const rows = [
-    centerText2(`${ui.text.bold("AI Convert")} ${ui.muted("BETA")}`, inner),
-    centerText2(ui.muted("Generate a conversion prompt after the export."), inner),
-    centerText2(`${buttonLabel("Convert")} ${ui.muted("or")} ${buttonLabel("Skip")}`, inner),
-    centerText2(ui.muted(path5.basename(exporter.outDir)), inner)
-  ];
-  console.log("");
-  console.log(boxTop(w));
-  for (const row of rows) console.log(boxLine(w, row));
-  console.log(boxBot(w));
-  console.log("");
+function buildServeCommand(exporter) {
+  return `cd ${path5.basename(exporter.outDir)} && node serve.js`;
+}
+async function runExportCompletePrompt(exporter, serveCommand) {
+  let copyServeCommand = false;
+  while (true) {
+    const action = await select(
+      "Export complete",
+      [
+        {
+          label: `${checkboxLabel(copyServeCommand)} Copy serve command when finishing`,
+          value: "toggle-copy"
+        },
+        {
+          label: `${buttonLabel("Convert to AI code")} ${ui.error("BETA")}`,
+          value: "convert"
+        },
+        { label: buttonLabel("Finish"), value: "finish" }
+      ],
+      2,
+      {
+        headerLines: [
+          `Output: ${path5.basename(exporter.outDir)}`,
+          `Run: ${serveCommand}`,
+          "Use Convert to open the AI conversion assistant."
+        ],
+        footer: "enter select  \xB7  checkbox toggles copy  \xB7  mouse hover/click"
+      }
+    );
+    if (action === "toggle-copy") {
+      copyServeCommand = !copyServeCommand;
+      continue;
+    }
+    if (action === "finish") {
+      if (copyServeCommand) {
+        try {
+          await copyToClipboard(serveCommand);
+          console.log(`  ${ui.success("\u2713")} ${ui.text.bold("Serve command copied")}
+`);
+        } catch (error) {
+          console.log(
+            `  ${ui.warning("!")} ${ui.warning("Clipboard copy unavailable:")} ${ui.muted(error.message)}
+`
+          );
+        }
+      }
+      return false;
+    }
+    return true;
+  }
+}
+async function runPromptReadyPrompt(promptPath, target, aiTool, goal) {
+  const relPath = path5.relative(process.cwd(), promptPath) || promptPath;
+  let copyPrompt = false;
+  while (true) {
+    const action = await select(
+      `AI Prompt Ready ${ui.error("BETA")}`,
+      [
+        {
+          label: `${checkboxLabel(copyPrompt)} Copy prompt when finishing`,
+          value: "toggle-copy"
+        },
+        { label: buttonLabel("Finish"), value: "finish" }
+      ],
+      1,
+      {
+        headerLines: [
+          `Tool: ${aiTool.displayName}`,
+          `Stack: ${target.label}`,
+          `Mode: ${goal.label}`,
+          `File: ${relPath}`
+        ],
+        footer: "enter finish  \xB7  checkbox toggles copy  \xB7  mouse hover/click"
+      }
+    );
+    if (action === "toggle-copy") {
+      copyPrompt = !copyPrompt;
+      continue;
+    }
+    return copyPrompt;
+  }
+}
+function checkboxLabel(checked) {
+  return checked ? ui.success("\u2611") : ui.muted("\u2610");
 }
 function printAssistantModal(title, lines) {
   const w = maxWidth();
   const inner = w - 4;
   console.log("");
   console.log(boxTop(w));
-  console.log(boxLine(w, centerText2(`${ui.primary("\u25C6")} ${ui.text.bold(title)}`, inner)));
+  console.log(boxLine(w, centerText2(`${ui.primary("\u25C6")} ${title}`, inner)));
   console.log(boxSep(w));
   for (const line of lines) {
     console.log(boxLine(w, centerText2(ui.muted(line), inner)));
@@ -2388,44 +2441,6 @@ function pipeToCommand(command, args, input) {
     child.stdin?.end(input);
   });
 }
-function printPromptResult(promptPath, target, aiTool, goal) {
-  const w = maxWidth();
-  const isSmall = w < 50;
-  const inner = w - 4;
-  const relPath = path5.relative(process.cwd(), promptPath) || promptPath;
-  console.log("");
-  if (!isSmall) {
-    console.log(boxTop(w));
-    console.log(
-      boxLine(
-        w,
-        centerText2(
-          `${ui.success("\u2713")} ${ui.text.bold("AI Prompt Ready")} ${ui.muted("BETA")}`,
-          inner
-        )
-      )
-    );
-    console.log(boxSep(w));
-    console.log(
-      boxLine(w, centerText2(`${ui.muted("Tool")} ${ui.primary(aiTool.displayName)}`, inner))
-    );
-    console.log(boxLine(w, centerText2(`${ui.muted("Stack")} ${ui.primary(target.label)}`, inner)));
-    console.log(boxLine(w, centerText2(`${ui.muted("Mode")} ${ui.primary(goal.label)}`, inner)));
-    console.log(boxLine(w, centerText2(`${ui.muted("File")} ${ui.primary(relPath)}`, inner)));
-    console.log(boxSep(w));
-    console.log(
-      boxLine(w, centerText2(`${buttonLabel("Copy prompt")} ${buttonLabel("Done")}`, inner))
-    );
-    console.log(boxBot(w));
-  } else {
-    console.log(ui.text.bold("  AI Prompt Ready - BETA"));
-    console.log(`  Tool: ${ui.primary(aiTool.displayName)}`);
-    console.log(`  Stack: ${ui.primary(target.label)}`);
-    console.log(`  Situation: ${ui.primary(goal.label)}`);
-    console.log(`  File: ${ui.primary(relPath)}`);
-  }
-  console.log("");
-}
 var IMPORTANT_DIRS, AI_TOOLS, TARGETS, GOALS;
 var init_prompt_assistant = __esm({
   "src/ai/prompt-assistant.ts"() {