@stacksjs/stx 0.2.95 → 0.2.97

package/dist/media/image/processor/optimizer.js

@@ -1,2 +1,202 @@
-// @bun
-import{Dk as a,Ek as b,Fk as c}from"../../../chunk-bndmdahk.js";import"../../../chunk-khdn7jwe.js";import"../../../chunk-ckxjqqn9.js";import"../../../chunk-jpndqst5.js";import"../../../chunk-xv34zbp4.js";export{a as processImage,b as optimizeImage,c as applyTransformations};
+import { resolve, basename, dirname, extname, join } from "node:path";
+import { mkdir, writeFile } from "node:fs/promises";
+import { hashFile, fileExists } from "../../shared/hash.js";
+import { getCachedImageResult, setCachedImageResult } from "./cache.js";
+async function getTsImages() {
+  try {
+    return await import("ts-images");
+  } catch {
+    return null;
+  }
+}
+function getPresetQuality(preset) {
+  switch (preset) {
+    case "quality":
+      return {
+        jpeg: { quality: 90, mozjpeg: !0, progressive: !0 },
+        png: { compressionLevel: 6, palette: !1 },
+        webp: { quality: 90, effort: 6, smartSubsample: !0 },
+        avif: { quality: 85, effort: 6 }
+      };
+    case "performance":
+      return {
+        jpeg: { quality: 70, mozjpeg: !0, progressive: !0 },
+        png: { compressionLevel: 9, palette: !0 },
+        webp: { quality: 70, effort: 4, smartSubsample: !0 },
+        avif: { quality: 60, effort: 2 }
+      };
+    case "web":
+    default:
+      return {
+        jpeg: { quality: 82, mozjpeg: !0, progressive: !0 },
+        png: { compressionLevel: 8, palette: !1 },
+        webp: { quality: 82, effort: 5, smartSubsample: !0 },
+        avif: { quality: 75, effort: 4 }
+      };
+  }
+}
+function mergeQualitySettings(config, preset) {
+  const presetQuality = preset ? getPresetQuality(preset) : getPresetQuality("web"), configQuality = config.formatQuality || {};
+  return {
+    jpeg: { ...presetQuality.jpeg, ...configQuality.jpeg },
+    png: { ...presetQuality.png, ...configQuality.png },
+    webp: { ...presetQuality.webp, ...configQuality.webp },
+    avif: { ...presetQuality.avif, ...configQuality.avif }
+  };
+}
+export async function processImage(src, options, config) {
+  const tsImages = await getTsImages();
+  if (!tsImages) {
+    console.warn("[stx-media] ts-images not installed, skipping optimization");
+    return { src, processed: !1 };
+  }
+  const cached = await getCachedImageResult(src, options, config);
+  if (cached)
+    return cached;
+  try {
+    const srcPath = resolve(src);
+    if (!await fileExists(srcPath))
+      return { src, processed: !1, errors: [`Source file not found: ${src}`] };
+    const qualitySettings = mergeQualitySettings(config, options.preset), outputDir = config.outputDir || "dist/images", baseUrl = config.baseUrl || "/images";
+    await mkdir(outputDir, { recursive: !0 });
+    const srcHash = await hashFile(srcPath), srcBasename = basename(src, extname(src)), formats = options.outputFormat ? [options.outputFormat] : config.defaultFormats || ["avif", "webp", "jpeg"], result = {
+      src,
+      processed: !0,
+      variants: [],
+      hash: srcHash
+    };
+    let processedBuffer = null;
+    if (options.transformations && options.transformations.length > 0)
+      processedBuffer = await applyTransformations(srcPath, options.transformations, tsImages);
+    for (const format of formats) {
+      const formatQuality = qualitySettings[format] || {}, outputFilename = `${srcBasename}-${srcHash}.${format}`, outputPath = join(outputDir, outputFilename);
+      try {
+        const optimizeResult = await tsImages.optimizeImage({
+          input: processedBuffer || srcPath,
+          output: outputPath,
+          format,
+          quality: formatQuality.quality,
+          progressive: formatQuality.progressive
+        });
+        if (optimizeResult) {
+          result.variants.push({
+            path: outputPath,
+            url: `${baseUrl}/${outputFilename}`,
+            width: optimizeResult.width || 0,
+            height: optimizeResult.height || 0,
+            format,
+            size: optimizeResult.outputSize || 0
+          });
+          if (!result.originalWidth && optimizeResult.width) {
+            result.originalWidth = optimizeResult.width;
+            result.originalHeight = optimizeResult.height;
+          }
+        }
+      } catch (error) {
+        result.errors = result.errors || [];
+        result.errors.push(`Failed to optimize ${format}: ${error}`);
+      }
+    }
+    if (options.embedThumbhash || options.placeholder === "thumbhash")
+      try {
+        const thumbhash = await tsImages.generateThumbHash(srcPath);
+        result.placeholder = thumbhash.dataUrl;
+      } catch (error) {
+        result.errors = result.errors || [];
+        result.errors.push(`Failed to generate thumbhash: ${error}`);
+      }
+    if (options.useDominantColor)
+      try {
+        const placeholder = await tsImages.generatePlaceholder(srcPath, {
+          strategy: "dominant-color"
+        });
+        result.dominantColor = placeholder.dominantColor;
+      } catch (error) {
+        result.errors = result.errors || [];
+        result.errors.push(`Failed to extract dominant color: ${error}`);
+      }
+    await setCachedImageResult(src, options, result, config);
+    return result;
+  } catch (error) {
+    return {
+      src,
+      processed: !1,
+      errors: [`Processing failed: ${error}`]
+    };
+  }
+}
+export async function optimizeImage(src, format, quality, outputPath) {
+  const tsImages = await getTsImages();
+  if (!tsImages)
+    return { success: !1, error: "ts-images not installed" };
+  try {
+    return { success: !0, size: (await tsImages.optimizeImage({
+      input: src,
+      output: outputPath,
+      format,
+      quality
+    }))?.outputSize };
+  } catch (error) {
+    return { success: !1, error: String(error) };
+  }
+}
+export async function applyTransformations(src, transformations, tsImages) {
+  const lib = tsImages || await getTsImages();
+  if (!lib) {
+    console.warn("[stx-media] ts-images not installed, skipping transformations");
+    return null;
+  }
+  try {
+    let imageData = await lib.decode(src);
+    for (const transform of transformations) {
+      const opts = transform.options || {};
+      switch (transform.type) {
+        case "resize":
+          if (opts.width || opts.height)
+            imageData = await lib.resize(imageData, {
+              width: opts.width,
+              height: opts.height,
+              fit: opts.fit
+            });
+          break;
+        case "blur":
+          if (opts.sigma !== void 0)
+            imageData = await lib.blur(imageData, opts.sigma);
+          break;
+        case "sharpen":
+          if (opts.amount !== void 0)
+            imageData = await lib.sharpen(imageData, opts.amount);
+          break;
+        case "grayscale":
+          imageData = await lib.grayscale(imageData);
+          break;
+        case "rotate":
+          if (opts.angle !== void 0)
+            imageData = await lib.rotate(imageData, opts.angle);
+          break;
+        case "flip":
+          imageData = await lib.flip(imageData);
+          break;
+        case "flop":
+          imageData = await lib.flop(imageData);
+          break;
+        case "brightness":
+          if (opts.value !== void 0)
+            imageData = await lib.brightness(imageData, opts.value);
+          break;
+        case "contrast":
+          if (opts.value !== void 0)
+            imageData = await lib.contrast(imageData, opts.value);
+          break;
+        case "saturation":
+          if (opts.value !== void 0)
+            imageData = await lib.saturation(imageData, opts.value);
+          break;
+      }
+    }
+    return await lib.encode(imageData, "png");
+  } catch (error) {
+    console.error(`[stx-media] Transformation failed: ${error}`);
+    return null;
+  }
+}

package/dist/media/image/processor/responsive.js

@@ -1,2 +1,162 @@
-// @bun
-import{Rk as a,Sk as b,Tk as c,Uk as d}from"../../../chunk-3te20hqw.js";import"../../../chunk-jpndqst5.js";import"../../../chunk-xv34zbp4.js";export{c as generateSrcset,b as generateResponsiveVariants,d as generateArtDirectionSources,a as DEFAULT_RESPONSIVE_WIDTHS};
+import { resolve, basename, extname, join } from "node:path";
+import { mkdir } from "node:fs/promises";
+import { hashFile, fileExists } from "../../shared/hash.js";
+import { getCachedImageResult, setCachedImageResult } from "./cache.js";
+async function getTsImages() {
+  try {
+    return await import("ts-images");
+  } catch {
+    return null;
+  }
+}
+export const DEFAULT_RESPONSIVE_WIDTHS = [320, 480, 640, 768, 1024, 1280, 1536, 1920];
+export async function generateResponsiveVariants(src, options, config) {
+  const tsImages = await getTsImages();
+  if (!tsImages) {
+    console.warn("[stx-media] ts-images not installed, skipping responsive generation");
+    return null;
+  }
+  const srcPath = resolve(src);
+  if (!await fileExists(srcPath)) {
+    console.warn(`[stx-media] Source file not found: ${src}`);
+    return null;
+  }
+  try {
+    const widths = options.responsiveWidths || config.breakpoints || DEFAULT_RESPONSIVE_WIDTHS, formats = options.formats || config.defaultFormats || ["avif", "webp", "jpeg"], outputDir = config.outputDir || "dist/images", baseUrl = config.baseUrl || "/images";
+    await mkdir(outputDir, { recursive: !0 });
+    const srcHash = await hashFile(srcPath), srcBasename = basename(src, extname(src)), formatQuality = config.formatQuality || {
+      jpeg: { quality: 82 },
+      png: { quality: 80 },
+      webp: { quality: 82 },
+      avif: { quality: 75 }
+    }, result = {
+      src,
+      byFormat: {},
+      srcsets: {}
+    };
+    for (const format of formats) {
+      result.byFormat[format] = [];
+      const srcsetParts = [];
+      for (const width of widths) {
+        const outputFilename = `${srcBasename}-${width}w-${srcHash}.${format}`, outputPath = join(outputDir, outputFilename), outputUrl = `${baseUrl}/${outputFilename}`;
+        try {
+          const quality = formatQuality[format]?.quality || 80;
+          if (await fileExists(outputPath)) {
+            result.byFormat[format].push({
+              path: outputPath,
+              url: outputUrl,
+              width,
+              height: 0,
+              format,
+              size: 0
+            });
+            srcsetParts.push(`${outputUrl} ${width}w`);
+            continue;
+          }
+          const processResult = await tsImages.processImage({
+            input: srcPath,
+            output: outputPath,
+            format,
+            quality,
+            resize: { width }
+          });
+          if (processResult) {
+            result.byFormat[format].push({
+              path: outputPath,
+              url: outputUrl,
+              width,
+              height: processResult.height || Math.round(width * (processResult.height || 1) / (processResult.width || 1)),
+              format,
+              size: processResult.outputSize || 0
+            });
+            srcsetParts.push(`${outputUrl} ${width}w`);
+          }
+        } catch (error) {
+          console.warn(`[stx-media] Failed to generate ${format} at ${width}w: ${error}`);
+        }
+      }
+      result.srcsets[format] = srcsetParts.join(", ");
+    }
+    const placeholderStrategy = options.placeholder || config.placeholderStrategy || "thumbhash";
+    if (placeholderStrategy !== "none")
+      try {
+        if (placeholderStrategy === "thumbhash") {
+          const thumbhash = await tsImages.generateThumbHash(srcPath);
+          result.placeholder = {
+            dataURL: thumbhash.dataUrl,
+            width: thumbhash.width || 32,
+            height: thumbhash.height || 32,
+            strategy: "thumbhash"
+          };
+        } else {
+          const placeholder = await tsImages.generatePlaceholder(srcPath, {
+            strategy: placeholderStrategy,
+            width: 20
+          });
+          result.placeholder = {
+            dataURL: placeholder.dataURL,
+            width: placeholder.width,
+            height: placeholder.height,
+            strategy: placeholderStrategy
+          };
+        }
+      } catch (error) {
+        console.warn(`[stx-media] Failed to generate placeholder: ${error}`);
+      }
+    result.sizes = options.sizes || generateDefaultSizes(widths);
+    return result;
+  } catch (error) {
+    console.error(`[stx-media] Responsive generation failed: ${error}`);
+    return null;
+  }
+}
+function generateDefaultSizes(widths) {
+  const sorted = [...widths].sort((a, b) => a - b), parts = [];
+  for (let i = 0;i < sorted.length - 1; i++) {
+    const width = sorted[i];
+    parts.push(`(max-width: ${width}px) ${width}px`);
+  }
+  parts.push(`${sorted[sorted.length - 1]}px`);
+  return parts.join(", ");
+}
+export function generateSrcset(variants, type = "width") {
+  if (!variants || variants.length === 0)
+    return "";
+  if (type === "dpr")
+    return variants.filter((v) => v.dpr).map((v) => `${v.url} ${v.dpr}x`).join(", ");
+  return variants.map((v) => `${v.url} ${v.width}w`).join(", ");
+}
+export async function generateArtDirectionSources(src, artDirection, config) {
+  const sources = [];
+  for (const art of artDirection) {
+    const variants = await generateResponsiveVariants(art.src, {
+      responsiveWidths: art.widths
+    }, config);
+    if (variants) {
+      for (const [format, srcset] of Object.entries(variants.srcsets))
+        if (srcset)
+          sources.push({
+            media: art.media,
+            srcset,
+            type: getMimeType(format)
+          });
+    }
+  }
+  return sources;
+}
+function getMimeType(format) {
+  switch (format) {
+    case "avif":
+      return "image/avif";
+    case "webp":
+      return "image/webp";
+    case "jpeg":
+      return "image/jpeg";
+    case "png":
+      return "image/png";
+    case "gif":
+      return "image/gif";
+    default:
+      return "image/jpeg";
+  }
+}

package/dist/media/image/srcset.js

@@ -1,2 +1,194 @@
-// @bun
-import{Au as d,Bu as e,Cu as f,Du as g,Eu as h,Fu as i,Gu as j,Hu as k,Iu as l,Ju as m,Ku as n,Lu as o,Mu as p,Nu as q,Ou as r,Pu as s,Qu as t,Ru as u,Su as v,Tu as w,xu as a,yu as b,zu as c}from"../../chunk-m167kjhv.js";import"../../chunk-xv34zbp4.js";export{o as parseImageUrl,t as groupVariantsByFormat,u as getMimeType,v as getFormatExtension,s as getFallbackVariant,r as getBestVariant,f as generateWidthSrcset,p as generateSrcsetData,q as generateSourceTags,l as generateSizesFromBreakpoints,k as generateSizesAttribute,j as generateDprSrcsetWithVariableQuality,i as generateDprSrcset,g as generateAutoWidthSrcset,w as detectFormat,h as calculateOptimalWidths,n as buildImageUrl,d as MIME_TYPES,e as FORMAT_EXTENSIONS,a as DEFAULT_WIDTHS,c as DEFAULT_FORMATS,b as DEFAULT_DPR_VALUES,m as COMMON_SIZES};
+export const DEFAULT_WIDTHS = [320, 480, 640, 768, 1024, 1280, 1536, 1920, 2560], DEFAULT_DPR_VALUES = [1, 1.5, 2, 3], DEFAULT_FORMATS = ["avif", "webp", "jpeg"], MIME_TYPES = {
+  avif: "image/avif",
+  webp: "image/webp",
+  jpeg: "image/jpeg",
+  png: "image/png",
+  gif: "image/gif"
+}, FORMAT_EXTENSIONS = {
+  avif: "avif",
+  webp: "webp",
+  jpeg: "jpg",
+  png: "png",
+  gif: "gif"
+};
+export function generateWidthSrcset(src, widths = DEFAULT_WIDTHS, params = {}, format) {
+  return widths.sort((a, b) => a - b).map((width) => {
+    return `${buildImageUrl(src, { ...params, w: width, fm: format })} ${width}w`;
+  }).join(", ");
+}
+export function generateAutoWidthSrcset(src, minWidth = 320, maxWidth = 2560, tolerance = 0.08, params = {}, format) {
+  const widths = calculateOptimalWidths(minWidth, maxWidth, tolerance);
+  return generateWidthSrcset(src, widths, params, format);
+}
+export function calculateOptimalWidths(minWidth, maxWidth, tolerance = 0.08) {
+  const widths = [];
+  let currentWidth = minWidth;
+  while (currentWidth < maxWidth) {
+    widths.push(Math.round(currentWidth));
+    currentWidth *= 1 + tolerance * 2;
+  }
+  if (widths[widths.length - 1] !== maxWidth)
+    widths.push(maxWidth);
+  return widths;
+}
+export function generateDprSrcset(src, width, dprValues = DEFAULT_DPR_VALUES, params = {}, format) {
+  return dprValues.sort((a, b) => a - b).map((dpr) => {
+    const actualWidth = Math.round(width * dpr);
+    return `${buildImageUrl(src, { ...params, w: actualWidth, dpr, fm: format })} ${dpr}x`;
+  }).join(", ");
+}
+export function generateDprSrcsetWithVariableQuality(src, width, dprValues = DEFAULT_DPR_VALUES, baseQuality = 80, params = {}, format) {
+  const qualityMap = {
+    1: baseQuality,
+    1.5: Math.round(baseQuality * 0.9),
+    2: Math.round(baseQuality * 0.8),
+    3: Math.round(baseQuality * 0.7),
+    4: Math.round(baseQuality * 0.6),
+    5: Math.round(baseQuality * 0.5)
+  };
+  return dprValues.sort((a, b) => a - b).map((dpr) => {
+    const actualWidth = Math.round(width * dpr), quality = qualityMap[dpr] || Math.round(baseQuality * Math.max(0.5, 1 - dpr * 0.1));
+    return `${buildImageUrl(src, { ...params, w: actualWidth, q: quality, dpr, fm: format })} ${dpr}x`;
+  }).join(", ");
+}
+export function generateSizesAttribute(breakpoints, defaultSize = "100vw") {
+  if (!breakpoints || Object.keys(breakpoints).length === 0)
+    return defaultSize;
+  const parts = Object.entries(breakpoints).map(([breakpoint, size]) => {
+    const bp = /^\d+$/.test(breakpoint) ? `${breakpoint}px` : breakpoint;
+    return { bp, size, numericBp: Number.parseInt(bp) || 0 };
+  }).sort((a, b) => a.numericBp - b.numericBp).map(({ bp, size }) => `(max-width: ${bp}) ${size}`);
+  parts.push(defaultSize);
+  return parts.join(", ");
+}
+export function generateSizesFromBreakpoints(breakpoints, defaultSize = "100vw") {
+  if (!breakpoints || breakpoints.length === 0)
+    return defaultSize;
+  const parts = [...breakpoints].sort((a, b) => (a.maxWidth || 0) - (b.maxWidth || 0)).filter((bp) => bp.maxWidth).map((bp) => `(max-width: ${bp.maxWidth}px) ${bp.imageWidth}`);
+  parts.push(defaultSize);
+  return parts.join(", ");
+}
+export const COMMON_SIZES = {
+  fullWidth: "100vw",
+  halfDesktop: "(max-width: 768px) 100vw, 50vw",
+  thirdDesktop: "(max-width: 768px) 100vw, 33.33vw",
+  quarterDesktop: "(max-width: 480px) 100vw, (max-width: 768px) 50vw, 25vw",
+  contentWidth: "(max-width: 768px) 100vw, (max-width: 1200px) 80vw, 960px"
+};
+export function buildImageUrl(src, params = {}) {
+  const filteredParams = Object.entries(params).filter(([, value]) => value !== void 0 && value !== null).map(([key, value]) => {
+    if (Array.isArray(value))
+      return [key, value.join(",")];
+    return [key, String(value)];
+  });
+  if (filteredParams.length === 0)
+    return src;
+  const queryString = filteredParams.map(([key, value]) => `${key}=${encodeURIComponent(value)}`).join("&"), separator = src.includes("?") ? "&" : "?";
+  return `${src}${separator}${queryString}`;
+}
+export function parseImageUrl(url) {
+  const [src, queryString] = url.split("?"), params = {};
+  if (queryString)
+    new URLSearchParams(queryString).forEach((value, key) => {
+      if (/^\d+$/.test(value))
+        params[key] = Number.parseInt(value, 10);
+      else if (/^\d+\.\d+$/.test(value))
+        params[key] = Number.parseFloat(value);
+      else if (value === "true")
+        params[key] = !0;
+      else if (value === "false")
+        params[key] = !1;
+      else
+        params[key] = value;
+    });
+  return { src, params };
+}
+export function generateSrcsetData(options) {
+  const { src, widths, dprValues, fixedWidth, formats = DEFAULT_FORMATS, baseUrl = "", params = {} } = options, results = [];
+  for (const format of formats) {
+    let srcset, variants;
+    if (fixedWidth !== void 0 && dprValues) {
+      srcset = generateDprSrcset(src, fixedWidth, dprValues, params, format);
+      variants = dprValues.map((dpr) => ({
+        path: "",
+        url: buildImageUrl(src, { ...params, w: Math.round(fixedWidth * dpr), fm: format }),
+        width: Math.round(fixedWidth * dpr),
+        height: 0,
+        format,
+        size: 0,
+        dpr
+      }));
+    } else {
+      const usedWidths = widths || DEFAULT_WIDTHS;
+      srcset = generateWidthSrcset(src, usedWidths, params, format);
+      variants = usedWidths.map((width) => ({
+        path: "",
+        url: buildImageUrl(src, { ...params, w: width, fm: format }),
+        width,
+        height: 0,
+        format,
+        size: 0
+      }));
+    }
+    results.push({
+      srcset,
+      format,
+      mimeType: MIME_TYPES[format],
+      variants
+    });
+  }
+  return results;
+}
+export function generateSourceTags(srcsetData, sizes = "100vw") {
+  return srcsetData.map(({ srcset, mimeType }) => `<source type="${mimeType}" srcset="${srcset}" sizes="${sizes}" />`).join(`
+`);
+}
+export function getBestVariant(variants, targetWidth) {
+  if (variants.length === 0)
+    return;
+  const sorted = [...variants].sort((a, b) => a.width - b.width), larger = sorted.find((v) => v.width >= targetWidth);
+  if (larger)
+    return larger;
+  return sorted[sorted.length - 1];
+}
+export function getFallbackVariant(variants, preferFormat) {
+  const filtered = preferFormat ? variants.filter((v) => v.format === preferFormat) : variants;
+  if (filtered.length === 0) {
+    const jpegVariants = variants.filter((v) => v.format === "jpeg"), source = jpegVariants.length > 0 ? jpegVariants : variants;
+    return source[Math.floor(source.length / 2)];
+  }
+  const sorted = filtered.sort((a, b) => a.width - b.width);
+  return sorted[Math.floor(sorted.length / 2)];
+}
+export function groupVariantsByFormat(variants) {
+  const grouped = new Map;
+  for (const variant of variants) {
+    const existing = grouped.get(variant.format) || [];
+    existing.push(variant);
+    grouped.set(variant.format, existing);
+  }
+  return grouped;
+}
+export function getMimeType(format) {
+  return MIME_TYPES[format] || "application/octet-stream";
+}
+export function getFormatExtension(format) {
+  return FORMAT_EXTENSIONS[format] || format;
+}
+export function detectFormat(src) {
+  switch (src.split(".").pop()?.toLowerCase()) {
+    case "jpg":
+    case "jpeg":
+      return "jpeg";
+    case "png":
+      return "png";
+    case "webp":
+      return "webp";
+    case "avif":
+      return "avif";
+    case "gif":
+      return "gif";
+    default:
+      return;
+  }
+}