framer-export 4.4.2 → 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.2",
+      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"() {
@@ -1680,6 +1735,9 @@ 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',
 };
 
@@ -1687,10 +1745,32 @@ 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 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'));
 }
 
 function drawServerUi() {
@@ -1698,10 +1778,10 @@ function drawServerUi() {
   console.log('  ' + color('border', '\u256D\u2500' + '\u2500'.repeat(56) + '\u2500\u256E'));
   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');
+  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');
@@ -1710,11 +1790,13 @@ 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(() => {
-    const step = steps[Math.min(steps.length - 1, Math.floor(i / 6))];
+    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('text', step) + dots);
+    process.stdout.write('\\r\\x1B[2K  ' + color('primary', frames[i % frames.length]) + ' ' + color(stepColors[stepIndex], step) + dots);
     i++;
   }, 80);
 
@@ -2172,7 +2254,7 @@ function buildServeCommand(exporter) {
   return `cd ${path5.basename(exporter.outDir)} && node serve.js`;
 }
 async function runExportCompletePrompt(exporter, serveCommand) {
-  let copyServeCommand = false;
+  let copyServeCommand = true;
   while (true) {
     const action = await select(
       "Export complete",