framer-export 4.4.1 → 4.4.3

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.3",
       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",
@@ -215,7 +215,8 @@ async function showLoadingIntro(version) {
       const title = renderShinyText(`Framer Export v${version}`, frame, {
         baseColor: "#969696",
         shineColor: "#ffffff",
-        shineWidth: 18
+        shineWidth: 18,
+        speed: 1.2
       });
       const dots = ".".repeat(frame % 4).padEnd(3, " ");
       process.stdout.write(
@@ -237,8 +238,9 @@ function renderShinyText(text, frame, options = {}) {
   const baseColor = options.baseColor || "#808080";
   const shineColor = options.shineColor || "#ffffff";
   const shineWidth = options.shineWidth || SHINE_WIDTH;
+  const speed = options.speed ?? SHINE_SPEED;
   const travel = text.length + shineWidth * 2;
-  const pos = frame * SHINE_SPEED % travel - shineWidth;
+  const pos = frame * speed % travel - shineWidth;
   const base = hexToRgb(baseColor);
   const shine = hexToRgb(shineColor);
   let result = "";
@@ -338,9 +340,66 @@ function maxWidth() {
   return Math.min(process.stdout.columns || 80, 76);
 }
 function padRight(text, w) {
-  const visible = stripAnsi(text).length;
-  if (visible >= w) return text;
-  return text + " ".repeat(w - visible);
+  const fitted = fitAnsi(text, w);
+  const visible = stripAnsi(fitted).length;
+  if (visible >= w) return fitted;
+  return fitted + " ".repeat(w - visible);
+}
+function fitAnsi(text, width) {
+  if (stripAnsi(text).length <= width) return text;
+  if (width <= 2) return ".".repeat(Math.max(0, width));
+  let out = "";
+  let visible = 0;
+  let i = 0;
+  const limit = width - 2;
+  while (i < text.length && visible < limit) {
+    if (text[i] === "\x1B") {
+      const match = text.slice(i).match(/^\x1B\[[0-9;]*[a-zA-Z]/);
+      if (match) {
+        out += match[0];
+        i += match[0].length;
+        continue;
+      }
+    }
+    out += text[i];
+    visible++;
+    i++;
+  }
+  return out + "..\x1B[0m";
+}
+function fitValue(value, width) {
+  if (value.length <= width) return value;
+  const pathLike = value.includes("\\") || value.includes("/");
+  if (pathLike) {
+    const shortened = shortenPath(value, width);
+    if (shortened.length <= width) return shortened;
+  }
+  if (width <= 3) return ".".repeat(Math.max(0, width));
+  return value.slice(0, width - 2) + "..";
+}
+function shortenPath(value, width) {
+  if (width <= 12) {
+    return width <= 3 ? ".".repeat(Math.max(0, width)) : value.slice(0, width - 2) + "..";
+  }
+  const separator = value.includes("\\") ? "\\" : "/";
+  const parts = value.split(/[\\/]+/).filter(Boolean);
+  const prefix = value.startsWith(separator) ? separator : "";
+  const shortened = parts.map((part, index) => {
+    const isLast = index === parts.length - 1;
+    if (isLast) return part;
+    if (/^[A-Za-z]:$/.test(part)) return part;
+    return part.length > 5 ? part.slice(0, 3) + ".." : part;
+  }).join(separator);
+  const withPrefix = prefix + shortened;
+  if (withPrefix.length <= width) return withPrefix;
+  const last = parts.at(-1) || value;
+  const first = parts.slice(0, -1).map((part) => /^[A-Za-z]:$/.test(part) ? part : part.slice(0, 3) + "..");
+  const compact = prefix + [...first, last].join(separator);
+  if (compact.length <= width) return compact;
+  const tailSpace = Math.max(8, Math.floor(width * 0.45));
+  const headSpace = Math.max(0, width - tailSpace - 4);
+  const middle = compact.slice(0, headSpace) + separator + ".." + separator + compact.slice(-tailSpace);
+  return middle.length <= width ? middle : compact.slice(0, width - 2) + "..";
 }
 function boxTop(w) {
   const inner = w - 4;
@@ -379,14 +438,10 @@ function panelSep(w) {
 function boxRow(w, label, value) {
   const inner = w - 4;
   const labelPlain = stripAnsi(chalk3.bold(label));
-  const visible = labelPlain.length + 1 + value.length;
-  if (visible > inner) {
-    const avail = inner - labelPlain.length - 2;
-    const truncated = value.length > avail ? value.slice(0, avail - 1) + ".." : value;
-    return "  " + ui.border("\u2502 ") + chalk3.bold(label) + ": " + ui.primary(truncated) + " ".repeat(Math.max(0, inner - labelPlain.length - 1 - truncated.length)) + ui.border(" \u2502");
-  }
-  const right = inner - labelPlain.length - 1 - value.length;
-  return "  " + ui.border("\u2502 ") + chalk3.bold(label) + ": " + ui.primary(value) + " ".repeat(right) + ui.border(" \u2502");
+  const avail = Math.max(0, inner - labelPlain.length - 2);
+  const fittedValue = fitValue(value, avail);
+  const right = Math.max(0, inner - labelPlain.length - 2 - fittedValue.length);
+  return "  " + ui.border("\u2502 ") + chalk3.bold(label) + ": " + ui.primary(fittedValue) + " ".repeat(right) + ui.border(" \u2502");
 }
 var init_box = __esm({
   "src/cli/box.ts"() {
@@ -1603,12 +1658,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,37 +1735,53 @@ const ANSI = {
   border: '\\x1b[38;2;72;72;72m',
   success: '\\x1b[38;2;127;216;143m',
   info: '\\x1b[38;2;86;182;194m',
+  accent: '\\x1b[38;2;157;124;216m',
+  warning: '\\x1b[38;2;245;167;66m',
+  command: '\\x1b[38;2;255;192;159m',
+  error: '\\x1b[38;2;224;108;117m',
 };
 
 function color(name, value) {
   return ANSI[name] + value + ANSI.reset;
 }
 
-function frameLine(label, value) {
-  const text = '  ' + label.padEnd(10) + value;
-  const pad = Math.max(0, 56 - text.length);
-  console.log('  ' + color('border', '\u2502 ') + color('muted', label.padEnd(10)) + color('text', value) + ' '.repeat(pad) + color('border', ' \u2502'));
+function fitValue(value, width) {
+  const text = String(value);
+  if (text.length <= width) return text;
+  if ((text.includes('\\\\') || text.includes('/')) && width > 12) {
+    const separator = text.includes('\\\\') ? '\\\\' : '/';
+    const prefix = text.startsWith(separator) ? separator : '';
+    const parts = text.split(/[\\\\/]+/).filter(Boolean);
+    const compact = prefix + parts.map((part, index) => {
+      if (index === parts.length - 1) return part;
+      if (/^[A-Za-z]:$/.test(part)) return part;
+      return part.length > 5 ? part.slice(0, 3) + '..' : part;
+    }).join(separator);
+    if (compact.length <= width) return compact;
+    const tail = Math.max(8, Math.floor(width * 0.45));
+    const head = Math.max(0, width - tail - 4);
+    return compact.slice(0, head) + separator + '..' + separator + compact.slice(-tail);
+  }
+  return width <= 3 ? '.'.repeat(Math.max(0, width)) : text.slice(0, width - 2) + '..';
 }
 
-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   ',
-  ];
+function frameLine(label, value, colorName = 'text') {
+  const labelText = label.padEnd(10);
+  const valueWidth = Math.max(0, 56 - labelText.length);
+  const shown = fitValue(value, valueWidth);
+  const pad = Math.max(0, 56 - labelText.length - shown.length);
+  console.log('  ' + color('border', '\u2502 ') + color('muted', labelText) + color(colorName, shown) + ' '.repeat(pad) + color('border', ' \u2502'));
+}
 
-  console.log('');
-  for (const line of logo) console.log('  ' + color('primary', line));
+function drawServerUi() {
   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('Mode', 'static mirror + SPA fallback');
+  frameLine('URL', 'http://localhost:' + PORT, 'primary');
+  frameLine('Root', ROOT, 'soft');
+  frameLine('Run', 'node serve.js', 'command');
+  frameLine('Mode', 'static mirror + SPA fallback', 'accent');
   console.log('  ' + color('border', '\u2570\u2500' + '\u2500'.repeat(56) + '\u2500\u256F'));
   console.log('');
   console.log('  ' + color('success', 'ready') + color('muted', '  press Ctrl+C to stop') + '\\n');
@@ -1717,9 +1789,14 @@ 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'];
+  const stepColors = ['text', 'info', 'warning', 'success'];
   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 stepIndex = Math.min(steps.length - 1, Math.floor(i / 6));
+    const step = steps[stepIndex];
+    const dots = color('error', '.'.repeat(i % 4).padEnd(3, ' '));
+    process.stdout.write('\\r\\x1B[2K  ' + color('primary', frames[i % frames.length]) + ' ' + color(stepColors[stepIndex], step) + dots);
     i++;
   }, 80);
 
@@ -1727,7 +1804,7 @@ server.listen(PORT, () => {
     clearInterval(timer);
     process.stdout.write('\\r\\x1B[2K');
     drawServerUi();
-  }, 720);
+  }, 1280);
 });
 `;
   }
@@ -1893,8 +1970,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 +2126,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 +2159,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 +2191,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 +2250,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 = true;
+  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 +2523,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"() {