viewfit 0.0.1 → 0.1.0

package/dist/cli.js

@@ -0,0 +1,1451 @@
+#!/usr/bin/env node
+
+// src/cli.ts
+import { readFileSync } from "fs";
+import chalk3 from "chalk";
+import { Command } from "commander";
+
+// src/config/devices.ts
+var DEVICE_PRESETS = {
+  desktop: {
+    name: "Desktop",
+    viewport: { width: 1440, height: 900 },
+    deviceScaleFactor: 1,
+    isMobile: false
+  },
+  mobile: {
+    name: "Mobile",
+    viewport: { width: 390, height: 844 },
+    deviceScaleFactor: 3,
+    isMobile: true
+  }
+};
+function isDeviceMode(value) {
+  return value === "desktop" || value === "mobile";
+}
+function parseViewport(value) {
+  const match = /^(\d+)x(\d+)$/i.exec(value.trim());
+  if (!match) {
+    throw new Error(`Invalid viewport "${value}". Expected a value like 1440x900.`);
+  }
+  const width = Number(match[1]);
+  const height = Number(match[2]);
+  if (width <= 0 || height <= 0) {
+    throw new Error("Viewport dimensions must be positive.");
+  }
+  return { width, height };
+}
+function getDevicePreset(mode, dpr, viewport) {
+  const base = DEVICE_PRESETS[mode];
+  return {
+    ...base,
+    viewport: viewport ?? base.viewport,
+    deviceScaleFactor: dpr ?? base.deviceScaleFactor
+  };
+}
+
+// src/config/presets.ts
+var PRESETS = {
+  web: {
+    description: "Mobile \xB7 WebP \xB7 90% tier \xB7 quality 80",
+    device: "mobile",
+    tier: "safe",
+    format: "webp",
+    quality: 80
+  },
+  hq: {
+    description: "Desktop \xB7 AVIF \xB7 exact tier \xB7 quality 85",
+    device: "desktop",
+    tier: "exact",
+    format: "avif",
+    quality: 85
+  },
+  fast: {
+    description: "Mobile \xB7 WebP \xB7 75% tier \xB7 quality 70",
+    device: "mobile",
+    tier: "aggressive",
+    format: "webp",
+    quality: 70
+  }
+};
+function getPreset(name) {
+  const preset = PRESETS[name.toLowerCase()];
+  if (!preset) {
+    throw new Error(
+      `Unknown preset "${name}". Use ${Object.keys(PRESETS).join(", ")}.`
+    );
+  }
+  return preset;
+}
+
+// src/core/tiers.ts
+var TIER_PRESETS = {
+  exact: 1,
+  safe: 0.9,
+  aggressive: 0.75,
+  extreme: 0.5
+};
+var TIER_DESCRIPTIONS = {
+  exact: "Exact rendered size (100%)",
+  safe: "Slightly below rendered size (90%)",
+  aggressive: "Clearly below rendered size (75%)",
+  extreme: "Half of the rendered size (50%)"
+};
+function isTierName(value) {
+  return Object.prototype.hasOwnProperty.call(TIER_PRESETS, value);
+}
+function resolveTierScale(tier) {
+  if (typeof tier === "number") {
+    const scale = tier > 1 ? tier / 100 : tier;
+    if (!Number.isFinite(scale) || scale <= 0) {
+      throw new Error("Tier number must be a positive percentage or ratio.");
+    }
+    return Math.min(scale, 1);
+  }
+  const preset = TIER_PRESETS[tier];
+  if (preset === void 0) {
+    throw new Error(`Unknown tier "${tier}".`);
+  }
+  return preset;
+}
+function parseTier(value) {
+  const normalized = value.trim().toLowerCase();
+  if (isTierName(normalized)) {
+    return normalized;
+  }
+  const numeric = Number(normalized);
+  if (Number.isFinite(numeric) && numeric > 0) {
+    return numeric > 1 ? numeric / 100 : numeric;
+  }
+  throw new Error(
+    `Invalid tier "${value}". Use exact, safe, aggressive, extreme or a number between 1 and 100.`
+  );
+}
+
+// src/index.ts
+import { existsSync as existsSync3, statSync } from "fs";
+import { dirname as dirname3, relative as relative3, resolve as resolve4, sep as sep4 } from "path";
+import chalk2 from "chalk";
+import ora from "ora";
+
+// src/browser/inspector.ts
+import { chromium } from "playwright";
+
+// src/browser/collector.ts
+function collectImagesInPage() {
+  const results = [];
+  const absolute = (value) => {
+    try {
+      return new URL(value, document.baseURI).href;
+    } catch {
+      return value;
+    }
+  };
+  const selectorFor = (element) => {
+    const tag = element.tagName.toLowerCase();
+    if (element.id) {
+      return `#${CSS.escape(element.id)}`;
+    }
+    const className = element.getAttribute("class");
+    if (className) {
+      const classes = className.trim().split(/\s+/).filter(Boolean).map((name) => `.${CSS.escape(name)}`).join("");
+      if (classes) {
+        return `${tag}${classes}`;
+      }
+    }
+    return tag;
+  };
+  const normalizeFit = (value) => {
+    switch (value) {
+      case "cover":
+      case "contain":
+      case "fill":
+      case "none":
+      case "scale-down":
+        return value;
+      default:
+        return "fill";
+    }
+  };
+  const normalizeBackgroundFit = (value) => {
+    const normalized = value.trim().toLowerCase();
+    if (normalized === "cover" || normalized === "contain") {
+      return normalized;
+    }
+    if (normalized === "auto" || normalized === "") {
+      return "auto";
+    }
+    return "fill";
+  };
+  const backgroundUrls = (value) => {
+    const urls = [];
+    const pattern = /url\((['"]?)(.*?)\1\)/g;
+    let match;
+    while ((match = pattern.exec(value)) !== null) {
+      const url = match[2];
+      if (url && !url.startsWith("data:")) {
+        urls.push(url);
+      }
+    }
+    return urls;
+  };
+  for (const image of Array.from(document.images)) {
+    const rect = image.getBoundingClientRect();
+    if (rect.width <= 0 || rect.height <= 0) {
+      continue;
+    }
+    const src = image.currentSrc || image.src;
+    if (!src || src.startsWith("data:")) {
+      continue;
+    }
+    results.push({
+      src: absolute(src),
+      kind: "img",
+      cssWidth: rect.width,
+      cssHeight: rect.height,
+      fit: normalizeFit(getComputedStyle(image).objectFit),
+      selector: selectorFor(image)
+    });
+  }
+  const elements = Array.from(document.querySelectorAll("*"));
+  const addBackground = (element, pseudo, style) => {
+    if (!style.backgroundImage || style.backgroundImage === "none") {
+      return;
+    }
+    const rect = element.getBoundingClientRect();
+    if (rect.width <= 0 || rect.height <= 0) {
+      return;
+    }
+    const fit = normalizeBackgroundFit(style.backgroundSize);
+    const selector = `${selectorFor(element)}${pseudo}`;
+    for (const url of backgroundUrls(style.backgroundImage)) {
+      results.push({
+        src: absolute(url),
+        kind: "background",
+        cssWidth: rect.width,
+        cssHeight: rect.height,
+        fit,
+        selector
+      });
+    }
+  };
+  for (const element of elements) {
+    addBackground(element, "", getComputedStyle(element));
+    addBackground(element, "::before", getComputedStyle(element, "::before"));
+    addBackground(element, "::after", getComputedStyle(element, "::after"));
+  }
+  return results;
+}
+
+// src/browser/inspector.ts
+async function launchBrowser(channel) {
+  const requested = channel === "chromium" ? void 0 : channel;
+  try {
+    return await chromium.launch({ channel: requested, headless: true });
+  } catch (error) {
+    if (requested) {
+      throw error;
+    }
+    try {
+      return await chromium.launch({ channel: "chrome", headless: true });
+    } catch {
+      throw new Error(
+        "Unable to launch Chromium. Install it with `npx playwright install chromium` or use `--browser chrome` if Google Chrome is installed."
+      );
+    }
+  }
+}
+async function autoScroll(page) {
+  await page.evaluate(async () => {
+    const delay = (ms) => new Promise((resolvePromise) => setTimeout(resolvePromise, ms));
+    const distance = Math.max(window.innerHeight, 400);
+    const height = document.body?.scrollHeight ?? document.documentElement.scrollHeight;
+    for (let y = 0; y < height; y += distance) {
+      window.scrollTo(0, y);
+      await delay(60);
+    }
+    window.scrollTo(0, 0);
+    await delay(100);
+  });
+}
+async function decodeImages(page) {
+  await page.evaluate(async () => {
+    await Promise.all(
+      Array.from(document.images).map(
+        (image) => image.decode().catch(() => void 0)
+      )
+    );
+  });
+}
+async function inspectPageInContext(page, pageUrl, timeout) {
+  await page.goto(pageUrl, {
+    waitUntil: "load",
+    timeout
+  });
+  await page.waitForLoadState("networkidle", { timeout: 5e3 }).catch(() => void 0);
+  await autoScroll(page);
+  await decodeImages(page);
+  return await page.evaluate(collectImagesInPage);
+}
+async function inspectPages(pageUrls, options) {
+  const preset = getDevicePreset(options.device, options.dpr, options.viewport);
+  const browser = await launchBrowser(options.browser);
+  try {
+    const context = await browser.newContext({
+      viewport: preset.viewport,
+      deviceScaleFactor: preset.deviceScaleFactor,
+      isMobile: preset.isMobile,
+      hasTouch: preset.isMobile
+    });
+    const images = [];
+    const failures = [];
+    try {
+      for (const pageUrl of pageUrls) {
+        const page = await context.newPage();
+        try {
+          images.push(...await inspectPageInContext(page, pageUrl, options.timeout));
+        } catch (error) {
+          failures.push({
+            pageUrl,
+            message: error instanceof Error ? error.message : String(error)
+          });
+        } finally {
+          await page.close();
+        }
+      }
+    } finally {
+      await context.close();
+    }
+    return {
+      images,
+      pageUrl: pageUrls[0] ?? "",
+      pages: pageUrls,
+      failures,
+      deviceName: preset.name,
+      viewport: preset.viewport,
+      dpr: preset.deviceScaleFactor
+    };
+  } finally {
+    await browser.close();
+  }
+}
+
+// src/core/compress.ts
+import { mkdir, rename, writeFile } from "fs/promises";
+import { basename, dirname, join, relative } from "path";
+
+// src/core/encode.ts
+import sharp from "sharp";
+function extensionFor(format, originalFormat) {
+  const target = format === "original" ? originalFormat ?? "jpg" : format;
+  return target === "jpeg" ? "jpg" : target;
+}
+function applyFormat(pipeline, options) {
+  const target = options.format === "original" ? options.originalFormat : options.format;
+  const quality = options.quality;
+  switch (target) {
+    case "jpeg":
+    case "jpg":
+      return pipeline.jpeg({ quality, mozjpeg: true });
+    case "png":
+      return pipeline.png({ compressionLevel: 9 });
+    case "webp":
+      return pipeline.webp({ quality });
+    case "avif":
+      return pipeline.avif({ quality });
+    case "gif":
+      return pipeline.gif();
+    default:
+      return pipeline;
+  }
+}
+async function encodeImage(input, width, height, options) {
+  const pipeline = sharp(input).rotate().resize({
+    width,
+    height,
+    fit: "inside",
+    withoutEnlargement: true
+  });
+  return applyFormat(pipeline, options).toBuffer();
+}
+async function estimateEncodedSize(input, width, height, options) {
+  try {
+    const buffer = await encodeImage(input, width, height, options);
+    return buffer.length;
+  } catch {
+    return null;
+  }
+}
+
+// src/core/compress.ts
+function outputPathFor(analysis, options) {
+  const source = analysis.filePath;
+  const relativePath = options.rootDir ? relative(options.rootDir, source) : basename(source);
+  const extension = extensionFor(options.format, analysis.originalFormat);
+  const withoutExtension = relativePath.replace(/\.[^./\\]+$/, "");
+  return join(options.outputDir, `${withoutExtension}.${extension}`);
+}
+async function compressImage(analysis, options) {
+  if (!analysis.filePath || !analysis.recommended) {
+    return {
+      input: analysis.filePath ?? analysis.url,
+      output: "",
+      bytes: 0,
+      mode: "skipped"
+    };
+  }
+  const buffer = await encodeImage(
+    analysis.filePath,
+    analysis.targetWidth,
+    analysis.targetHeight,
+    {
+      format: options.format,
+      quality: options.quality,
+      originalFormat: analysis.originalFormat
+    }
+  );
+  if (options.write) {
+    const temporaryPath = `${analysis.filePath}.viewfit-${process.pid}.tmp`;
+    await writeFile(temporaryPath, buffer);
+    await rename(temporaryPath, analysis.filePath);
+    return {
+      input: analysis.filePath,
+      output: analysis.filePath,
+      bytes: buffer.length,
+      mode: "overwrite"
+    };
+  }
+  const outputPath = outputPathFor(analysis, options);
+  await mkdir(dirname(outputPath), { recursive: true });
+  await writeFile(outputPath, buffer);
+  return {
+    input: analysis.filePath,
+    output: outputPath,
+    bytes: buffer.length,
+    mode: "output"
+  };
+}
+
+// src/core/pages.ts
+import { readdir } from "fs/promises";
+import { extname, join as join2, resolve, sep } from "path";
+var HTML_EXTENSIONS = /* @__PURE__ */ new Set([".html", ".htm"]);
+var IGNORED_DIRECTORIES = /* @__PURE__ */ new Set(["node_modules", ".git"]);
+async function findHtmlFiles(rootDir, options = {}) {
+  const root = resolve(rootDir);
+  const excluded = (options.exclude ?? []).map((path) => resolve(path)).filter((path) => path !== root);
+  const results = [];
+  async function walk2(directory) {
+    const entries = await readdir(directory, { withFileTypes: true });
+    for (const entry of entries) {
+      const fullPath = join2(directory, entry.name);
+      if (entry.isSymbolicLink()) {
+        continue;
+      }
+      if (entry.isDirectory()) {
+        if (IGNORED_DIRECTORIES.has(entry.name)) {
+          continue;
+        }
+        const resolved = resolve(fullPath);
+        if (excluded.some(
+          (path) => resolved === path || resolved.startsWith(path + sep)
+        )) {
+          continue;
+        }
+        await walk2(fullPath);
+        continue;
+      }
+      if (entry.isFile() && HTML_EXTENSIONS.has(extname(entry.name).toLowerCase())) {
+        results.push(fullPath);
+      }
+    }
+  }
+  await walk2(root);
+  return results.sort();
+}
+
+// src/utils/url.ts
+import { existsSync } from "fs";
+import { resolve as resolve2, sep as sep2 } from "path";
+function urlToFilePath(url, rootDir, pageUrl) {
+  let parsed;
+  let base;
+  try {
+    parsed = new URL(url);
+    base = new URL(pageUrl);
+  } catch {
+    return null;
+  }
+  if (parsed.origin !== base.origin) {
+    return null;
+  }
+  const root = resolve2(rootDir);
+  const relativePath = decodeURIComponent(parsed.pathname).replace(/^\/+/, "");
+  if (relativePath === "" || relativePath.includes("\0")) {
+    return null;
+  }
+  const filePath = resolve2(root, relativePath);
+  if (filePath !== root && !filePath.startsWith(root + sep2)) {
+    return null;
+  }
+  return existsSync(filePath) ? filePath : null;
+}
+
+// src/core/metadata.ts
+import { stat } from "fs/promises";
+import sharp2 from "sharp";
+async function readImageMetadata(filePath) {
+  const [metadata, fileInfo] = await Promise.all([
+    sharp2(filePath).metadata(),
+    stat(filePath)
+  ]);
+  if (!metadata.width || !metadata.height) {
+    throw new Error("Unable to read image dimensions.");
+  }
+  const swapped = typeof metadata.orientation === "number" && metadata.orientation >= 5;
+  return {
+    width: swapped ? metadata.height : metadata.width,
+    height: swapped ? metadata.width : metadata.height,
+    format: metadata.format ?? null,
+    bytes: fileInfo.size
+  };
+}
+
+// src/core/recommend.ts
+function requiredScale(fit, cssWidth, cssHeight, naturalWidth, naturalHeight, dpr) {
+  const widthRatio = cssWidth * dpr / naturalWidth;
+  const heightRatio = cssHeight * dpr / naturalHeight;
+  switch (fit) {
+    case "contain":
+    case "scale-down":
+      return Math.min(widthRatio, heightRatio, 1);
+    case "none":
+    case "auto":
+      return 1;
+    case "cover":
+    case "fill":
+    default:
+      return Math.min(Math.max(widthRatio, heightRatio), 1);
+  }
+}
+function groupByUrl(images) {
+  const groups = /* @__PURE__ */ new Map();
+  for (const image of images) {
+    const contexts = groups.get(image.src) ?? [];
+    contexts.push({
+      kind: image.kind,
+      cssWidth: image.cssWidth,
+      cssHeight: image.cssHeight,
+      fit: image.fit,
+      selector: image.selector
+    });
+    groups.set(image.src, contexts);
+  }
+  return groups;
+}
+function emptyAnalysis(url, contexts, options, reason) {
+  const renderedWidth = Math.max(...contexts.map((context) => context.cssWidth));
+  const renderedHeight = Math.max(
+    ...contexts.map((context) => context.cssHeight)
+  );
+  return {
+    url,
+    filePath: null,
+    originalWidth: 0,
+    originalHeight: 0,
+    originalBytes: 0,
+    originalFormat: null,
+    renderedWidth,
+    renderedHeight,
+    contexts,
+    targetWidth: Math.max(
+      1,
+      Math.round(renderedWidth * options.dpr * options.tierScale)
+    ),
+    targetHeight: Math.max(
+      1,
+      Math.round(renderedHeight * options.dpr * options.tierScale)
+    ),
+    estimatedBytes: null,
+    savingsBytes: null,
+    savingsPercent: null,
+    transformable: false,
+    recommended: false,
+    reason
+  };
+}
+async function analyzeImages(images, options) {
+  const groups = groupByUrl(images);
+  const analyses = [];
+  for (const [url, contexts] of groups) {
+    const filePath = options.rootDir ? urlToFilePath(url, options.rootDir, options.pageUrl) : null;
+    if (!filePath) {
+      analyses.push(
+        emptyAnalysis(
+          url,
+          contexts,
+          options,
+          options.rootDir ? "File not found under the project root (remote or generated asset)." : "No local root provided; reporting only."
+        )
+      );
+      continue;
+    }
+    let metadata;
+    try {
+      metadata = await readImageMetadata(filePath);
+    } catch (error) {
+      const message = error instanceof Error ? error.message : "Unable to read image.";
+      analyses.push(emptyAnalysis(url, contexts, options, message));
+      continue;
+    }
+    const scale = contexts.reduce(
+      (current, context) => Math.max(
+        current,
+        requiredScale(
+          context.fit,
+          context.cssWidth,
+          context.cssHeight,
+          metadata.width,
+          metadata.height,
+          options.dpr
+        )
+      ),
+      0
+    );
+    const targetWidth = Math.max(
+      1,
+      Math.min(
+        metadata.width,
+        Math.round(metadata.width * scale * options.tierScale)
+      )
+    );
+    const targetHeight = Math.max(
+      1,
+      Math.min(
+        metadata.height,
+        Math.round(metadata.height * scale * options.tierScale)
+      )
+    );
+    const renderedWidth = Math.max(
+      ...contexts.map((context) => context.cssWidth)
+    );
+    const renderedHeight = Math.max(
+      ...contexts.map((context) => context.cssHeight)
+    );
+    const resizeNeeded = targetWidth < metadata.width || targetHeight < metadata.height;
+    const formatChanges = options.format !== "original" && options.format !== (metadata.format ?? void 0);
+    let estimatedBytes = null;
+    const willTransform = resizeNeeded || formatChanges;
+    if (willTransform && options.estimate) {
+      estimatedBytes = await estimateEncodedSize(
+        filePath,
+        targetWidth,
+        targetHeight,
+        {
+          format: options.format,
+          quality: options.quality,
+          originalFormat: metadata.format
+        }
+      );
+    }
+    const savingsBytes = estimatedBytes === null ? null : metadata.bytes - estimatedBytes;
+    const savingsPercent = savingsBytes === null || metadata.bytes === 0 ? null : savingsBytes / metadata.bytes * 100;
+    analyses.push({
+      url,
+      filePath,
+      originalWidth: metadata.width,
+      originalHeight: metadata.height,
+      originalBytes: metadata.bytes,
+      originalFormat: metadata.format,
+      renderedWidth,
+      renderedHeight,
+      contexts,
+      targetWidth,
+      targetHeight,
+      estimatedBytes,
+      savingsBytes,
+      savingsPercent,
+      transformable: willTransform,
+      recommended: willTransform && estimatedBytes !== null && estimatedBytes < metadata.bytes,
+      reason: willTransform ? void 0 : "Already at or below the rendered size."
+    });
+  }
+  return analyses;
+}
+
+// src/core/site.ts
+import { existsSync as existsSync2 } from "fs";
+import {
+  copyFile,
+  mkdir as mkdir2,
+  readdir as readdir2,
+  readFile,
+  writeFile as writeFile2
+} from "fs/promises";
+import { dirname as dirname2, extname as extname2, join as join3, relative as relative2, resolve as resolve3, sep as sep3 } from "path";
+var TEXT_EXTENSIONS = /* @__PURE__ */ new Set([
+  ".html",
+  ".htm",
+  ".css",
+  ".js",
+  ".mjs",
+  ".cjs",
+  ".jsx",
+  ".ts",
+  ".tsx",
+  ".json",
+  ".svg",
+  ".txt",
+  ".xml",
+  ".map"
+]);
+var IMAGE_EXTENSIONS = /* @__PURE__ */ new Set([
+  ".jpg",
+  ".jpeg",
+  ".png",
+  ".gif",
+  ".webp",
+  ".avif",
+  ".tif",
+  ".tiff",
+  ".bmp"
+]);
+var IGNORED_DIRECTORIES2 = /* @__PURE__ */ new Set(["node_modules", ".git"]);
+var REFERENCE_EXTENSIONS = ["webp", "avif", "png", "jpg", "jpeg"];
+var IMAGE_REFERENCE = /([A-Za-z0-9_@%+~.,/\-]+)\.(jpe?g|png|gif|tiff?|bmp)(?=(["')\s?#>]|$))/gi;
+function rewriteImageReferences(content, textRelativePath, outputDir) {
+  const textDirectory = dirname2(textRelativePath);
+  let replacements = 0;
+  const rewritten = content.replace(
+    IMAGE_REFERENCE,
+    (full, rawPath, extension) => {
+      if (rawPath.includes("://") || rawPath.startsWith("//") || rawPath.startsWith("data:")) {
+        return full;
+      }
+      const referenceDirectory = rawPath.startsWith("/") ? "" : textDirectory;
+      const relativeReference = rawPath.startsWith("/") ? rawPath.slice(1) : join3(referenceDirectory, rawPath);
+      const outputReference = resolve3(outputDir, relativeReference);
+      const withoutExtension = outputReference.slice(
+        0,
+        outputReference.length - extname2(outputReference).length
+      );
+      const current = extension.toLowerCase();
+      for (const candidate of REFERENCE_EXTENSIONS) {
+        const sameFormat = candidate === current || candidate === "jpg" && current === "jpeg" || candidate === "jpeg" && current === "jpg";
+        if (sameFormat) {
+          continue;
+        }
+        if (existsSync2(`${withoutExtension}.${candidate}`)) {
+          replacements += 1;
+          return `${rawPath}.${candidate}`;
+        }
+      }
+      return full;
+    }
+  );
+  return { content: rewritten, replacements };
+}
+async function walk(currentDirectory, options, result) {
+  const entries = await readdir2(currentDirectory, { withFileTypes: true });
+  for (const entry of entries) {
+    const sourcePath = join3(currentDirectory, entry.name);
+    if (entry.isSymbolicLink()) {
+      continue;
+    }
+    if (entry.isDirectory()) {
+      if (IGNORED_DIRECTORIES2.has(entry.name)) {
+        continue;
+      }
+      const resolved = resolve3(sourcePath);
+      if (resolved === options.outputDir || resolved.startsWith(options.outputDir + sep3)) {
+        continue;
+      }
+      await walk(sourcePath, options, result);
+      continue;
+    }
+    if (!entry.isFile()) {
+      continue;
+    }
+    const absoluteSource = resolve3(sourcePath);
+    if (options.optimized.has(absoluteSource)) {
+      continue;
+    }
+    const relativePath = relative2(options.rootDir, sourcePath);
+    const destinationPath = join3(options.outputDir, relativePath);
+    const extension = extname2(sourcePath).toLowerCase();
+    if (TEXT_EXTENSIONS.has(extension)) {
+      const original = await readFile(sourcePath, "utf8");
+      const { content, replacements } = rewriteImageReferences(
+        original,
+        relativePath,
+        options.outputDir
+      );
+      await mkdir2(dirname2(destinationPath), { recursive: true });
+      await writeFile2(destinationPath, content);
+      result.copiedFiles += 1;
+      if (replacements > 0) {
+        result.rewrittenFiles += 1;
+        result.rewrittenReferences += replacements;
+      }
+      continue;
+    }
+    if (IMAGE_EXTENSIONS.has(extension)) {
+      if (!options.analyzed.has(absoluteSource)) {
+        continue;
+      }
+      if (existsSync2(destinationPath)) {
+        continue;
+      }
+      await mkdir2(dirname2(destinationPath), { recursive: true });
+      await copyFile(sourcePath, destinationPath);
+      result.copiedFiles += 1;
+      continue;
+    }
+    if (existsSync2(destinationPath)) {
+      continue;
+    }
+    await mkdir2(dirname2(destinationPath), { recursive: true });
+    await copyFile(sourcePath, destinationPath);
+    result.copiedFiles += 1;
+  }
+}
+async function copyStaticSite(options) {
+  const result = {
+    copiedFiles: 0,
+    rewrittenFiles: 0,
+    rewrittenReferences: 0
+  };
+  await walk(resolve3(options.rootDir), {
+    ...options,
+    rootDir: resolve3(options.rootDir),
+    outputDir: resolve3(options.outputDir)
+  }, result);
+  return result;
+}
+
+// src/report/prompts.ts
+import prompts from "prompts";
+
+// src/utils/bytes.ts
+var UNITS = ["B", "KB", "MB", "GB"];
+function formatBytes(bytes) {
+  if (!Number.isFinite(bytes) || bytes < 0) {
+    return "-";
+  }
+  let value = bytes;
+  let unit = 0;
+  while (value >= 1024 && unit < UNITS.length - 1) {
+    value /= 1024;
+    unit += 1;
+  }
+  const digits = unit === 0 ? 0 : value >= 100 ? 0 : value >= 10 ? 1 : 2;
+  return `${value.toFixed(digits)} ${UNITS[unit]}`;
+}
+
+// src/report/prompts.ts
+async function chooseInteractiveOptions(defaults, imageCount) {
+  const tierChoices = Object.entries(TIER_DESCRIPTIONS).map(([value, title]) => ({ title, value }));
+  tierChoices.push({ title: "Custom percentage", value: "custom" });
+  const tierResponse = await prompts({
+    type: "select",
+    name: "tier",
+    message: `Compression tier for ${imageCount} images`,
+    choices: tierChoices,
+    initial: Math.max(
+      0,
+      tierChoices.findIndex((choice) => choice.value === defaults.tier)
+    )
+  });
+  let tier = defaults.tier;
+  if (tierResponse.tier === "custom") {
+    const customResponse = await prompts({
+      type: "number",
+      name: "percentage",
+      message: "Target scale as a percentage of the exact rendered size",
+      initial: 80,
+      min: 1,
+      max: 100
+    });
+    tier = Number(customResponse.percentage ?? 80);
+  } else if (tierResponse.tier) {
+    tier = tierResponse.tier;
+  }
+  const formatResponse = await prompts({
+    type: "select",
+    name: "format",
+    message: "Output format",
+    choices: [
+      { title: "Keep original format", value: "original" },
+      { title: "WebP", value: "webp" },
+      { title: "AVIF", value: "avif" }
+    ],
+    initial: ["original", "webp", "avif"].indexOf(defaults.format)
+  });
+  const qualityResponse = await prompts({
+    type: "number",
+    name: "quality",
+    message: "Encoder quality (1-100)",
+    initial: defaults.quality,
+    min: 1,
+    max: 100
+  });
+  return {
+    tier,
+    format: formatResponse.format ?? defaults.format,
+    quality: Number(qualityResponse.quality ?? defaults.quality)
+  };
+}
+async function confirmProceed(analyses, options) {
+  const selected = analyses.filter((analysis) => analysis.recommended);
+  if (selected.length === 0) {
+    return false;
+  }
+  if (options.yes) {
+    return true;
+  }
+  const totalOriginal = selected.reduce(
+    (total, analysis) => total + analysis.originalBytes,
+    0
+  );
+  const totalEstimated = selected.reduce(
+    (total, analysis) => total + (analysis.estimatedBytes ?? analysis.originalBytes),
+    0
+  );
+  const destination = options.write ? "overwrite the original files" : `write to ${options.output} (original files are kept)`;
+  const response = await prompts({
+    type: "confirm",
+    name: "proceed",
+    message: `Compress ${selected.length} images (${formatBytes(
+      totalOriginal
+    )} \u2192 ${formatBytes(totalEstimated)}) and ${destination}?`,
+    initial: true
+  });
+  return Boolean(response.proceed);
+}
+
+// src/report/table.ts
+import chalk from "chalk";
+var MAX_FILE_WIDTH = 44;
+function displayPath(analysis, rootDir) {
+  if (analysis.filePath && rootDir) {
+    const normalizedRoot = rootDir.endsWith("/") ? rootDir : `${rootDir}/`;
+    if (analysis.filePath.startsWith(normalizedRoot)) {
+      return analysis.filePath.slice(normalizedRoot.length);
+    }
+  }
+  if (analysis.filePath) {
+    return analysis.filePath;
+  }
+  try {
+    return new URL(analysis.url).pathname;
+  } catch {
+    return analysis.url;
+  }
+}
+function truncate(value, maxWidth) {
+  if (value.length <= maxWidth) {
+    return value;
+  }
+  return `${value.slice(0, maxWidth - 1)}\u2026`;
+}
+function buildRows(analyses, options) {
+  return analyses.map((analysis) => {
+    const kinds = new Set(analysis.contexts.map((context) => context.kind));
+    const magnitude = analysis.savingsPercent === null ? null : Math.abs(analysis.savingsPercent);
+    const savings = magnitude === null ? "-" : `${analysis.savingsPercent >= 0 ? "-" : "+"}${magnitude >= 99.5 ? magnitude.toFixed(1) : magnitude.toFixed(0)}%`;
+    return {
+      file: truncate(displayPath(analysis, options.rootDir), MAX_FILE_WIDTH),
+      kind: kinds.size === 2 ? "mixed" : analysis.contexts[0]?.kind ?? "img",
+      rendered: `${Math.round(analysis.renderedWidth)}\xD7${Math.round(
+        analysis.renderedHeight
+      )}`,
+      target: `${analysis.targetWidth}\xD7${analysis.targetHeight}`,
+      original: analysis.originalBytes > 0 ? formatBytes(analysis.originalBytes) : "-",
+      estimated: analysis.estimatedBytes !== null ? `~${formatBytes(analysis.estimatedBytes)}` : "-",
+      savings,
+      recommended: analysis.recommended,
+      reason: analysis.reason ?? ""
+    };
+  });
+}
+function pad(value, width) {
+  return value.padEnd(width);
+}
+function renderReport(analyses, options) {
+  const rows = buildRows(analyses, options);
+  const headers = [
+    "FILE",
+    "KIND",
+    "RENDERED",
+    "TARGET",
+    "ORIGINAL",
+    "EST. SIZE",
+    "SAVE"
+  ];
+  const widths = headers.map((header, index) => {
+    const key = [
+      "file",
+      "kind",
+      "rendered",
+      "target",
+      "original",
+      "estimated",
+      "savings"
+    ][index];
+    const values = rows.map((row) => String(row[key]).length);
+    return Math.max(header.length, ...values);
+  });
+  const lines = [];
+  const headerLine = headers.map((header, index) => pad(header, widths[index] ?? header.length)).join("  ");
+  const pages = options.pageCount && options.pageCount > 1 ? ` \xB7 ${options.pageCount} pages` : "";
+  lines.push(
+    chalk.bold(
+      `${options.deviceName} ${options.viewport.width}\xD7${options.viewport.height} @${options.dpr}x \xB7 tier ${Math.round(
+        options.tierScale * 100
+      )}% \xB7 ${options.format} q${options.quality}${pages}`
+    )
+  );
+  lines.push(chalk.dim(headerLine));
+  lines.push(chalk.dim(widths.map((width) => "\u2500".repeat(width)).join("  ")));
+  let totalOriginal = 0;
+  let totalEstimated = 0;
+  let recommendedCount = 0;
+  for (const row of rows) {
+    const cells = [
+      row.file,
+      row.kind,
+      row.rendered,
+      row.target,
+      row.original,
+      row.estimated,
+      row.savings
+    ].map((value, index) => pad(value, widths[index] ?? value.length));
+    const line = cells.join("  ");
+    if (row.recommended) {
+      recommendedCount += 1;
+      lines.push(chalk.green(line));
+    } else {
+      lines.push(chalk.dim(line));
+    }
+    if (row.reason) {
+      lines.push(chalk.dim(`  ${row.reason}`));
+    }
+  }
+  for (const analysis of analyses) {
+    if (!analysis.recommended) {
+      continue;
+    }
+    totalOriginal += analysis.originalBytes;
+    totalEstimated += analysis.estimatedBytes ?? analysis.originalBytes;
+  }
+  const saved = totalOriginal - totalEstimated;
+  const percent = totalOriginal > 0 ? saved / totalOriginal * 100 : 0;
+  lines.push("");
+  lines.push(
+    `${recommendedCount} of ${analyses.length} images optimizable \xB7 ${chalk.bold(
+      formatBytes(totalOriginal)
+    )} \u2192 ${chalk.bold(formatBytes(totalEstimated))} \xB7 save ${chalk.green(
+      `${formatBytes(saved)} (${percent.toFixed(0)}%)`
+    )}`
+  );
+  return lines.join("\n");
+}
+
+// src/server/static.ts
+import http from "http";
+import sirv from "sirv";
+async function startStaticServer(root) {
+  const serve = sirv(root, {
+    dev: true,
+    etag: true,
+    single: false,
+    ignores: false
+  });
+  const server = http.createServer((request, response) => {
+    serve(request, response, () => {
+      response.statusCode = 404;
+      response.end("Not found");
+    });
+  });
+  await new Promise((resolvePromise, rejectPromise) => {
+    server.once("error", rejectPromise);
+    server.listen(0, "127.0.0.1", () => resolvePromise());
+  });
+  const address = server.address();
+  return {
+    url: `http://127.0.0.1:${address.port}`,
+    close: () => new Promise((resolvePromise, rejectPromise) => {
+      server.close(
+        (error) => error ? rejectPromise(error) : resolvePromise()
+      );
+    })
+  };
+}
+
+// src/index.ts
+async function run(options) {
+  const isUrl = /^https?:\/\//i.test(options.target);
+  let rootDir = options.root ? resolve4(options.root) : null;
+  let server = null;
+  let pageUrl = options.target;
+  let pageUrls = [options.target];
+  const outputDir = resolve4(options.output);
+  try {
+    if (isUrl) {
+      if (rootDir && !isDirectory(rootDir)) {
+        throw new Error(`Root directory not found: ${rootDir}`);
+      }
+    } else {
+      const targetPath = resolve4(options.target);
+      if (!existsSync3(targetPath)) {
+        throw new Error(`Target not found: ${targetPath}`);
+      }
+      const stats = statSync(targetPath);
+      if (stats.isDirectory()) {
+        rootDir = targetPath;
+        server = await startStaticServer(targetPath);
+        const exclude = outputDir !== rootDir && outputDir.startsWith(rootDir + sep4) ? [outputDir] : [];
+        const htmlFiles = await findHtmlFiles(targetPath, { exclude });
+        if (htmlFiles.length === 0) {
+          throw new Error(`No HTML files found under ${targetPath}.`);
+        }
+        pageUrls = htmlFiles.map(
+          (filePath) => toPageUrl(server.url, rootDir, filePath)
+        );
+        pageUrl = pageUrls[0];
+      } else if (stats.isFile()) {
+        let serveDir = resolve4(options.root ?? dirname3(targetPath));
+        let relativeFile = relative3(serveDir, targetPath);
+        if (relativeFile.startsWith("..") || relativeFile === "") {
+          serveDir = dirname3(targetPath);
+          relativeFile = relative3(serveDir, targetPath);
+        }
+        rootDir = serveDir;
+        server = await startStaticServer(serveDir);
+        pageUrl = new URL(
+          relativeFile.split(sep4).join("/"),
+          `${server.url}/`
+        ).href;
+        pageUrls = [pageUrl];
+      } else {
+        throw new Error(`Target is not a file or directory: ${targetPath}`);
+      }
+    }
+    const preset = getDevicePreset(
+      options.device,
+      options.dpr,
+      options.viewport
+    );
+    const pageCount = pageUrls.length;
+    const inspectLabel = pageCount === 1 ? pageUrls[0] : `${pageCount} pages`;
+    const inspectSpinner = ora(
+      `Inspecting ${inspectLabel} as ${preset.name} ${preset.viewport.width}\xD7${preset.viewport.height} @${preset.deviceScaleFactor}x`
+    ).start();
+    let inspection;
+    try {
+      inspection = await inspectPages(pageUrls, {
+        device: options.device,
+        dpr: preset.deviceScaleFactor,
+        viewport: preset.viewport,
+        timeout: options.timeout,
+        browser: options.browser
+      });
+      inspectSpinner.succeed(
+        pageCount === 1 ? `Found ${inspection.images.length} rendered image references` : `Found ${inspection.images.length} rendered image references across ${pageCount} pages`
+      );
+      if (inspection.failures.length > 0) {
+        console.log(
+          chalk2.yellow(
+            `${inspection.failures.length} page(s) could not be inspected:`
+          )
+        );
+        for (const failure of inspection.failures) {
+          console.log(
+            chalk2.yellow(`  - ${failure.pageUrl}: ${failure.message}`)
+          );
+        }
+      }
+    } catch (error) {
+      inspectSpinner.fail("Inspection failed");
+      throw error;
+    }
+    if (inspection.images.length === 0) {
+      console.log(chalk2.yellow("No rendered images found on the page(s)."));
+      return;
+    }
+    let tier = options.tier;
+    let format = options.format;
+    let quality = options.quality;
+    if (options.interactive) {
+      const chosen = await chooseInteractiveOptions(
+        { tier, format, quality },
+        inspection.images.length
+      );
+      tier = chosen.tier;
+      format = chosen.format;
+      quality = chosen.quality;
+    }
+    if (options.write && format !== "original") {
+      throw new Error(
+        "--in-place keeps the original file names, so it requires --format original. Use --out to convert formats."
+      );
+    }
+    const tierScale = resolveTierScale(tier);
+    const analyzeSpinner = ora("Analyzing image dimensions and sizes...").start();
+    let analyses;
+    try {
+      analyses = await analyzeImages(inspection.images, {
+        dpr: inspection.dpr,
+        tierScale,
+        quality,
+        format,
+        pageUrl,
+        rootDir,
+        estimate: true
+      });
+      analyzeSpinner.succeed(`Analyzed ${analyses.length} unique images`);
+    } catch (error) {
+      analyzeSpinner.fail("Analysis failed");
+      throw error;
+    }
+    if (options.json) {
+      console.log(JSON.stringify(analyses, null, 2));
+      return;
+    }
+    console.log("");
+    console.log(
+      renderReport(analyses, {
+        rootDir,
+        deviceName: inspection.deviceName,
+        viewport: inspection.viewport,
+        dpr: inspection.dpr,
+        tierScale,
+        format,
+        quality,
+        pageCount: inspection.pages.length
+      })
+    );
+    console.log("");
+    if (options.dryRun) {
+      return;
+    }
+    const proceed = await confirmProceed(analyses, {
+      write: options.write,
+      output: options.output,
+      yes: options.yes
+    });
+    if (!proceed) {
+      console.log(chalk2.yellow("Nothing to do."));
+      return;
+    }
+    const selected = analyses.filter((analysis) => analysis.recommended);
+    if (!options.write && rootDir && outputDir === rootDir) {
+      throw new Error(
+        "--out cannot be the project root. Choose a subfolder or use --in-place."
+      );
+    }
+    const compressSpinner = ora(`Compressing ${selected.length} images...`).start();
+    let originalBytes = 0;
+    let outputBytes = 0;
+    const failures = [];
+    for (const analysis of selected) {
+      try {
+        const result = await compressImage(analysis, {
+          format,
+          quality,
+          outputDir,
+          write: options.write,
+          rootDir
+        });
+        originalBytes += analysis.originalBytes;
+        outputBytes += result.bytes;
+      } catch (error) {
+        const message = error instanceof Error ? error.message : String(error);
+        failures.push(`${analysis.filePath ?? analysis.url}: ${message}`);
+      }
+    }
+    const saved = originalBytes - outputBytes;
+    compressSpinner.succeed(
+      `Compressed ${selected.length - failures.length} images \xB7 ${formatBytes(
+        originalBytes
+      )} \u2192 ${formatBytes(outputBytes)} \xB7 saved ${formatBytes(Math.max(saved, 0))}`
+    );
+    if (failures.length > 0) {
+      console.log(chalk2.red(`
+${failures.length} image(s) failed:`));
+      for (const failure of failures) {
+        console.log(chalk2.red(`  - ${failure}`));
+      }
+      process.exitCode = 1;
+    }
+    if (options.site) {
+      if (!rootDir) {
+        console.log(
+          chalk2.yellow("--site requires a local root; site copy was skipped.")
+        );
+      } else {
+        const siteSpinner = ora("Copying site files...").start();
+        try {
+          const analyzed = new Set(
+            analyses.map((analysis) => analysis.filePath).filter((filePath) => Boolean(filePath))
+          );
+          const optimized = new Set(
+            selected.map((analysis) => analysis.filePath).filter((filePath) => Boolean(filePath))
+          );
+          const siteResult = await copyStaticSite({
+            rootDir,
+            outputDir,
+            analyzed,
+            optimized
+          });
+          siteSpinner.succeed(
+            `Copied ${siteResult.copiedFiles} files \xB7 rewrote ${siteResult.rewrittenReferences} image references`
+          );
+        } catch (error) {
+          siteSpinner.fail("Site copy failed");
+          throw error;
+        }
+      }
+    }
+    if (options.write) {
+      console.log(chalk2.dim("Original files were overwritten."));
+    } else {
+      console.log(chalk2.dim(`Output written to ${outputDir}`));
+    }
+  } finally {
+    if (server) {
+      await server.close();
+    }
+  }
+}
+function isDirectory(path) {
+  return existsSync3(path) && statSync(path).isDirectory();
+}
+function toPageUrl(serverUrl, rootDir, filePath) {
+  const relativePath = relative3(rootDir, filePath).split(sep4).join("/");
+  return new URL(relativePath, `${serverUrl}/`).href;
+}
+
+// src/cli.ts
+var packageJson = JSON.parse(
+  readFileSync(new URL("../package.json", import.meta.url), "utf8")
+);
+var program = new Command();
+program.name("viewfit").description(
+  "Fit and compress images to their actual rendered dimensions using a headless browser."
+).version(packageJson.version).addHelpText(
+  "after",
+  "\nRun `viewfit inspect --help` or `viewfit optimize --help` for the full option list."
+);
+addCommonOptions(
+  program.command("inspect").description("Analyze images and print a report. Never writes files.").argument(
+    "[target]",
+    "local directory, HTML file or URL to inspect",
+    "."
+  )
+).action(async (target, raw) => {
+  await run(normalizeOptions(target, raw, false));
+});
+addCommonOptions(
+  program.command("optimize").description("Analyze images and write the optimized files.").argument(
+    "[target]",
+    "local directory, HTML file or URL to optimize",
+    "."
+  )
+).option("--out <dir>", "output directory (default: viewfit-output)").option("-w, --in-place", "overwrite the original files", false).option(
+  "--site",
+  "copy HTML/CSS/JS into the output folder and rewrite image references",
+  false
+).option("-y, --yes", "skip confirmation prompts", false).action(async (target, raw) => {
+  await run(normalizeOptions(target, raw, true, raw));
+});
+function addCommonOptions(command) {
+  return command.option(
+    "-p, --preset <name>",
+    `preset: ${Object.keys(PRESETS).join(", ")}`
+  ).option("-d, --device <mode>", "device mode: desktop or mobile").option("--viewport <width>x<height>", "viewport override, e.g. 1440x900").option(
+    "-t, --tier <tier>",
+    "exact, safe, aggressive, extreme or a number (1-100)"
+  ).option("-q, --quality <number>", "encoder quality (1-100)").option("-f, --format <format>", "original, webp or avif").option("--root <dir>", "project root used to map URLs to local files").option(
+    "--browser <channel>",
+    "Playwright browser channel (chromium or chrome)",
+    "chromium"
+  ).option("--timeout <ms>", "navigation timeout in milliseconds", "30000").option(
+    "-i, --interactive",
+    "choose tier, format and quality interactively",
+    false
+  ).option("--json", "print the analysis as JSON", false);
+}
+function normalizeOptions(target, raw, apply, optimize) {
+  const preset = raw.preset ? getPreset(raw.preset) : void 0;
+  const deviceValue = raw.device ?? preset?.device ?? "desktop";
+  if (!isDeviceMode(deviceValue)) {
+    throw new Error(`Invalid device "${deviceValue}". Use desktop or mobile.`);
+  }
+  const device = deviceValue;
+  const viewport = raw.viewport ? parseViewport(raw.viewport) : void 0;
+  const tier = raw.tier !== void 0 ? parseTier(raw.tier) : preset?.tier ?? "exact";
+  const quality = Number(raw.quality ?? preset?.quality ?? 80);
+  if (!Number.isInteger(quality) || quality < 1 || quality > 100) {
+    throw new Error("--quality must be an integer between 1 and 100.");
+  }
+  const formatValue = raw.format ?? preset?.format ?? "original";
+  if (!isOutputFormat(formatValue)) {
+    throw new Error(
+      `Invalid format "${formatValue}". Use original, webp or avif.`
+    );
+  }
+  const format = formatValue;
+  const timeout = Number(raw.timeout);
+  if (!Number.isFinite(timeout) || timeout <= 0) {
+    throw new Error("--timeout must be a positive number.");
+  }
+  const write = optimize?.inPlace ?? false;
+  const site = optimize?.site ?? false;
+  if (write && format !== "original") {
+    throw new Error(
+      "--in-place requires --format original. Use --out to convert formats."
+    );
+  }
+  if (write && site) {
+    throw new Error(
+      "--site cannot be combined with --in-place. Use --out to keep a copy of the site."
+    );
+  }
+  if (write && optimize?.out) {
+    throw new Error("--in-place cannot be combined with --out.");
+  }
+  return {
+    target,
+    root: raw.root,
+    device,
+    viewport,
+    tier,
+    quality,
+    format,
+    output: optimize?.out ?? "viewfit-output",
+    write,
+    site,
+    browser: raw.browser,
+    timeout,
+    dryRun: !apply,
+    interactive: raw.interactive,
+    yes: optimize?.yes ?? false,
+    json: raw.json
+  };
+}
+function isOutputFormat(value) {
+  return value === "original" || value === "webp" || value === "avif";
+}
+var argv = process.argv.slice();
+var first = argv[2];
+var isHelpOrVersion = first === "--help" || first === "-h" || first === "--version" || first === "-V";
+if (!isHelpOrVersion && first !== "inspect" && first !== "optimize") {
+  argv.splice(2, 0, "inspect");
+}
+program.parseAsync(argv).catch((error) => {
+  const message = error instanceof Error ? error.message : String(error);
+  console.error(chalk3.red(message));
+  process.exitCode = 1;
+});
+//# sourceMappingURL=cli.js.map