@stacksjs/stx 0.2.95 → 0.2.97

package/dist/media/image/directive.js

@@ -1,2 +1,160 @@
-// @bun
-import{su as a,tu as b}from"../../chunk-31dr4bys.js";import"../../chunk-mgj88zeq.js";import"../../chunk-m167kjhv.js";import"../../chunk-3a4qsygv.js";import"../../chunk-h5jxydqq.js";import"../../chunk-xv34zbp4.js";export{b as imgDirective,a as createImgDirective};
+import { defineDirective } from "../../directive-api.js";
+import { renderImgComponent } from "./component.js";
+import { DEFAULT_WIDTHS, DEFAULT_FORMATS } from "./srcset.js";
+export function createImgDirective() {
+  return defineDirective({
+    name: "img",
+    hasEndTag: !1,
+    description: "Render an optimized responsive image with srcset and lazy loading",
+    transform: async (content, params, context, filePath) => {
+      const { src, alt, options } = parseImgArgs(content, params, context);
+      if (!src) {
+        console.warn("@img directive: missing src argument");
+        return "<!-- @img: missing src -->";
+      }
+      const props = {
+        src,
+        alt: alt || "",
+        widths: options.widths || DEFAULT_WIDTHS,
+        formats: options.formats || DEFAULT_FORMATS,
+        quality: options.quality,
+        sizes: options.sizes,
+        dpr: options.dpr,
+        params: options.params,
+        placeholder: options.placeholder,
+        placeholderOptions: options.placeholderOptions,
+        lazy: options.lazy !== !1,
+        priority: options.priority || !1,
+        loading: options.loading,
+        decoding: options.decoding,
+        fetchpriority: options.fetchpriority,
+        objectFit: options.objectFit,
+        objectPosition: options.objectPosition,
+        class: options.class,
+        style: options.style,
+        id: options.id,
+        width: options.width,
+        height: options.height
+      }, isDev = context.__isDev || !1, result = await renderImgComponent(props, { isDev });
+      let output = result.html;
+      if (result.preloadLink)
+        output = result.preloadLink + `
+` + output;
+      if (result.css)
+        output += `
+<style>${result.css}</style>`;
+      if (result.script)
+        output += `
+<script>${result.script}</script>`;
+      return output;
+    },
+    defaults: {
+      src: "",
+      alt: "",
+      options: {
+        lazy: !0,
+        placeholder: "none"
+      }
+    }
+  });
+}
+function parseImgArgs(content, params, context) {
+  if (params.src)
+    return {
+      src: String(params.src),
+      alt: String(params.alt || ""),
+      options: params.options || {}
+    };
+  let args = content.trim();
+  if (args.startsWith("@img(") || args.startsWith("("))
+    args = args.replace(/^@img\(/, "").replace(/^\(/, "").replace(/\)$/, "");
+  const parsed = parseArguments(args);
+  let src = resolveValue(parsed[0], context) || "", alt = resolveValue(parsed[1], context) || "", options = {};
+  if (parsed[2]) {
+    const resolvedOptions = resolveValue(parsed[2], context);
+    if (typeof resolvedOptions === "object" && resolvedOptions !== null)
+      options = resolvedOptions;
+    else if (typeof parsed[2] === "string")
+      try {
+        options = JSON.parse(parsed[2]);
+      } catch {}
+  }
+  return { src, alt, options };
+}
+function parseArguments(argsStr) {
+  const args = [];
+  let current = "", inString = !1, stringChar = "", braceDepth = 0, bracketDepth = 0;
+  for (let i = 0;i < argsStr.length; i++) {
+    const char = argsStr[i], prevChar = i > 0 ? argsStr[i - 1] : "";
+    if ((char === '"' || char === "'" || char === "`") && prevChar !== "\\") {
+      if (!inString) {
+        inString = !0;
+        stringChar = char;
+      } else if (char === stringChar) {
+        inString = !1;
+        stringChar = "";
+      } else
+        current += char;
+      continue;
+    }
+    if (!inString) {
+      if (char === "{")
+        braceDepth++;
+      if (char === "}")
+        braceDepth--;
+      if (char === "[")
+        bracketDepth++;
+      if (char === "]")
+        bracketDepth--;
+      if (char === "," && braceDepth === 0 && bracketDepth === 0) {
+        args.push(current.trim());
+        current = "";
+        continue;
+      }
+    }
+    current += char;
+  }
+  if (current.trim())
+    args.push(current.trim());
+  return args;
+}
+function resolveValue(value, context) {
+  if (typeof value !== "string")
+    return value;
+  const trimmed = value.trim();
+  if (trimmed.startsWith('"') && trimmed.endsWith('"') || trimmed.startsWith("'") && trimmed.endsWith("'"))
+    return trimmed.slice(1, -1);
+  if (!trimmed.startsWith("/") && !trimmed.startsWith(".") && !trimmed.startsWith("http") && !trimmed.startsWith("{")) {
+    const contextValue = context[trimmed];
+    if (contextValue !== void 0)
+      return contextValue;
+  }
+  if (trimmed.startsWith("{") || trimmed.startsWith("["))
+    try {
+      return JSON.parse(trimmed);
+    } catch {}
+  return trimmed;
+}
+function renderSimpleImage(src, alt, options) {
+  const attrs = [`src="${escapeAttr(src)}"`];
+  if (alt)
+    attrs.push(`alt="${escapeAttr(alt)}"`);
+  if (options.width)
+    attrs.push(`width="${options.width}"`);
+  if (options.height)
+    attrs.push(`height="${options.height}"`);
+  if (options.class)
+    attrs.push(`class="${escapeAttr(options.class)}"`);
+  if (options.style)
+    attrs.push(`style="${escapeAttr(options.style)}"`);
+  if (options.id)
+    attrs.push(`id="${escapeAttr(options.id)}"`);
+  if (options.lazy !== !1)
+    attrs.push('loading="lazy"');
+  attrs.push('decoding="async"');
+  return `<img ${attrs.join(" ")} />`;
+}
+function escapeAttr(str) {
+  return str.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/'/g, "&#039;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+export const imgDirective = createImgDirective();

package/dist/media/image/editing.js

@@ -1,2 +1,193 @@
-// @bun
-import{Ak as A,Bk as B,Ck as C,ak as a,bk as b,ck as c,dk as d,ek as e,fk as f,gk as g,hk as h,ik as i,jk as j,kk as k,lk as l,mk as m,nk as n,ok as o,pk as p,qk as q,rk as r,sk as s,tk as t,uk as u,vk as v,wk as w,xk as x,yk as y,zk as z}from"../../chunk-rqxf5hns.js";import"../../chunk-xv34zbp4.js";export{w as watermark,B as validateParams,f as thumbnail,z as srcsetUrls,j as sharpen,l as sepia,p as saturation,C as sanitizeParams,q as rotate,d as resize,u as quality,b as parseImageUrl,c as mergeParams,m as invert,k as grayscale,t as format,s as flipVertical,r as flipHorizontal,A as dprUrls,e as crop,h as cover,o as contrast,g as contain,a as buildImageUrl,n as brightness,i as blur,v as auto,y as applyPreset,x as PRESETS};
+export function buildImageUrl(src, params = {}) {
+  const queryParams = [];
+  for (const [key, value] of Object.entries(params)) {
+    if (value === void 0 || value === null)
+      continue;
+    if (Array.isArray(value))
+      queryParams.push(`${key}=${encodeURIComponent(value.join(","))}`);
+    else if (typeof value === "boolean") {
+      if (value)
+        queryParams.push(`${key}=true`);
+    } else
+      queryParams.push(`${key}=${encodeURIComponent(String(value))}`);
+  }
+  if (queryParams.length === 0)
+    return src;
+  const separator = src.includes("?") ? "&" : "?";
+  return `${src}${separator}${queryParams.join("&")}`;
+}
+export function parseImageUrl(url) {
+  const questionIndex = url.indexOf("?");
+  if (questionIndex === -1)
+    return { src: url, params: {} };
+  const src = url.slice(0, questionIndex), queryString = url.slice(questionIndex + 1), params = {};
+  for (const pair of queryString.split("&")) {
+    const [key, rawValue] = pair.split("="), value = rawValue ? decodeURIComponent(rawValue) : "";
+    if (value === "true")
+      params[key] = !0;
+    else if (value === "false")
+      params[key] = !1;
+    else if (/^-?\d+$/.test(value))
+      params[key] = Number.parseInt(value, 10);
+    else if (/^-?\d+\.\d+$/.test(value))
+      params[key] = Number.parseFloat(value);
+    else if (value.includes(","))
+      params[key] = value.split(",");
+    else
+      params[key] = value;
+  }
+  return { src, params };
+}
+export function mergeParams(...paramSets) {
+  const result = {};
+  for (const params of paramSets)
+    if (params)
+      Object.assign(result, params);
+  return result;
+}
+export function resize(src, width, height, fit) {
+  const params = { w: width };
+  if (height)
+    params.h = height;
+  if (fit)
+    params.fit = fit;
+  return buildImageUrl(src, params);
+}
+export function crop(src, width, height, position = "center") {
+  return buildImageUrl(src, {
+    w: width,
+    h: height,
+    fit: "crop",
+    crop: position
+  });
+}
+export function thumbnail(src, size, cropPosition = "center") {
+  return buildImageUrl(src, {
+    w: size,
+    h: size,
+    fit: "crop",
+    crop: cropPosition
+  });
+}
+export function contain(src, maxWidth, maxHeight) {
+  return buildImageUrl(src, {
+    w: maxWidth,
+    h: maxHeight,
+    fit: "max"
+  });
+}
+export function cover(src, width, height) {
+  return buildImageUrl(src, {
+    w: width,
+    h: height,
+    fit: "crop"
+  });
+}
+export function blur(src, radius) {
+  return buildImageUrl(src, { blur: Math.min(2000, Math.max(0, radius)) });
+}
+export function sharpen(src, amount) {
+  return buildImageUrl(src, { sharp: Math.min(100, Math.max(0, amount)) });
+}
+export function grayscale(src) {
+  return buildImageUrl(src, { sat: -100 });
+}
+export function sepia(src, amount = 100) {
+  return buildImageUrl(src, { sepia: Math.min(100, Math.max(0, amount)) });
+}
+export function invert(src) {
+  return buildImageUrl(src, { invert: !0 });
+}
+export function brightness(src, amount) {
+  return buildImageUrl(src, { bri: Math.min(100, Math.max(-100, amount)) });
+}
+export function contrast(src, amount) {
+  return buildImageUrl(src, { con: Math.min(100, Math.max(-100, amount)) });
+}
+export function saturation(src, amount) {
+  return buildImageUrl(src, { sat: Math.min(100, Math.max(-100, amount)) });
+}
+export function rotate(src, degrees) {
+  return buildImageUrl(src, { rot: (degrees % 360 + 360) % 360 });
+}
+export function flipHorizontal(src) {
+  return buildImageUrl(src, { flip: "h" });
+}
+export function flipVertical(src) {
+  return buildImageUrl(src, { flip: "v" });
+}
+export function format(src, fmt, quality) {
+  const params = { fm: fmt };
+  if (quality !== void 0)
+    params.q = quality;
+  return buildImageUrl(src, params);
+}
+export function quality(src, q) {
+  return buildImageUrl(src, { q: Math.min(100, Math.max(1, q)) });
+}
+export function auto(src, enhancements = ["format", "compress"]) {
+  return buildImageUrl(src, { auto: enhancements });
+}
+export function watermark(src, markUrl, options = {}) {
+  return buildImageUrl(src, {
+    mark: markUrl,
+    markx: options.x,
+    marky: options.y,
+    markalpha: options.alpha,
+    markscale: options.scale,
+    markalign: options.align
+  });
+}
+export const PRESETS = {
+  web: { fm: "webp", q: 80, auto: ["format", "compress"] },
+  highQuality: { q: 95 },
+  thumb: { w: 150, h: 150, fit: "crop", crop: "center" },
+  avatar: { w: 200, h: 200, fit: "crop", crop: "faces" },
+  social: { w: 1200, h: 630, fit: "crop" },
+  preview: { w: 400, q: 70 },
+  placeholder: { w: 20, blur: 200, q: 20 }
+};
+export function applyPreset(src, preset, additionalParams) {
+  return buildImageUrl(src, mergeParams(PRESETS[preset], additionalParams));
+}
+export function srcsetUrls(src, widths, params) {
+  return widths.map((w) => buildImageUrl(src, { ...params, w }));
+}
+export function dprUrls(src, width, dprValues = [1, 2, 3], params) {
+  return dprValues.map((dpr) => buildImageUrl(src, { ...params, w: Math.round(width * dpr), dpr }));
+}
+export function validateParams(params) {
+  const errors = [];
+  if (params.w !== void 0 && (params.w < 1 || params.w > 16383))
+    errors.push("Width must be between 1 and 16383");
+  if (params.h !== void 0 && (params.h < 1 || params.h > 16383))
+    errors.push("Height must be between 1 and 16383");
+  if (params.q !== void 0 && (params.q < 1 || params.q > 100))
+    errors.push("Quality must be between 1 and 100");
+  if (params.blur !== void 0 && (params.blur < 0 || params.blur > 2000))
+    errors.push("Blur must be between 0 and 2000");
+  if (params.rot !== void 0 && (params.rot < 0 || params.rot > 359))
+    errors.push("Rotation must be between 0 and 359");
+  if (params.dpr !== void 0 && (params.dpr < 1 || params.dpr > 5))
+    errors.push("DPR must be between 1 and 5");
+  return {
+    valid: errors.length === 0,
+    errors
+  };
+}
+export function sanitizeParams(params) {
+  const sanitized = { ...params };
+  if (sanitized.w !== void 0)
+    sanitized.w = Math.min(16383, Math.max(1, sanitized.w));
+  if (sanitized.h !== void 0)
+    sanitized.h = Math.min(16383, Math.max(1, sanitized.h));
+  if (sanitized.q !== void 0)
+    sanitized.q = Math.min(100, Math.max(1, sanitized.q));
+  if (sanitized.blur !== void 0)
+    sanitized.blur = Math.min(2000, Math.max(0, sanitized.blur));
+  if (sanitized.rot !== void 0)
+    sanitized.rot = (sanitized.rot % 360 + 360) % 360;
+  if (sanitized.dpr !== void 0)
+    sanitized.dpr = Math.min(5, Math.max(1, sanitized.dpr));
+  return sanitized;
+}

package/dist/media/image/index.js

@@ -1,2 +1,80 @@
-// @bun
-import"../../chunk-mv4fb50w.js";import{Ak as na,Bk as oa,Ck as pa,ak as P,bk as Q,ck as R,dk as S,ek as T,fk as U,gk as V,hk as W,ik as X,jk as Y,kk as Z,lk as _,mk as $,nk as aa,ok as ba,pk as ca,qk as da,rk as ea,sk as fa,tk as ga,uk as ha,vk as ia,wk as ja,xk as ka,yk as la,zk as ma}from"../../chunk-rqxf5hns.js";import{su as N,tu as O}from"../../chunk-31dr4bys.js";import{uu as K,vu as L,wu as M}from"../../chunk-mgj88zeq.js";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{$u as E,Uu as x,Vu as y,Wu as z,Xu as A,Yu as B,Zu as C,_u as D,av as F,bv as G,cv as H,dv as I,ev as J}from"../../chunk-3a4qsygv.js";import"../../chunk-h5jxydqq.js";import"../../chunk-xv34zbp4.js";export{ja as watermark,oa as validateParams,U as thumbnail,ma as srcsetUrls,Y as sharpen,_ as sepia,ca as saturation,pa as sanitizeParams,da as rotate,S as resize,K as renderImgComponent,ha as quality,M as processImgComponents,Q as parseUrl,L as parseImgComponent,o as parseImageUrl,R as mergeParams,$ as invert,O as imgDirective,t as groupVariantsByFormat,Z as grayscale,J as getPlaceholderCacheStats,u as getMimeType,v as getFormatExtension,s as getFallbackVariant,H as getCachedPlaceholder,r as getBestVariant,f as generateWidthSrcset,A as generateThumbhashPlaceholder,p as generateSrcsetData,q as generateSourceTags,l as generateSizesFromBreakpoints,k as generateSizesAttribute,G as generatePlaceholderStyle,F as generatePlaceholderCSS,z as generatePlaceholder,C as generateLQIP,j as generateDprSrcsetWithVariableQuality,i as generateDprSrcset,E as generateColorPlaceholder,g as generateAutoWidthSrcset,ga as format,fa as flipVertical,ea as flipHorizontal,D as extractDominantColor,na as dprUrls,w as detectFormat,B as decodeThumbhash,T as crop,N as createImgDirective,W as cover,ba as contrast,V as contain,I as clearPlaceholderCache,h as calculateOptimalWidths,P as buildUrl,n as buildImageUrl,aa as brightness,X as blur,ia as auto,la as applyPreset,ka as PRESETS,d as MIME_TYPES,e as FORMAT_EXTENSIONS,a as DEFAULT_WIDTHS,x as DEFAULT_PLACEHOLDER_OPTIONS,c as DEFAULT_FORMATS,b as DEFAULT_DPR_VALUES,m as COMMON_SIZES,y as BLUR_UP_CSS};
+export {
+  renderImgComponent,
+  parseImgComponent,
+  processImgComponents
+} from "./component.js";
+export {
+  createImgDirective,
+  imgDirective
+} from "./directive.js";
+export {
+  DEFAULT_WIDTHS,
+  DEFAULT_DPR_VALUES,
+  DEFAULT_FORMATS,
+  MIME_TYPES,
+  FORMAT_EXTENSIONS,
+  COMMON_SIZES,
+  generateWidthSrcset,
+  generateAutoWidthSrcset,
+  calculateOptimalWidths,
+  generateDprSrcset,
+  generateDprSrcsetWithVariableQuality,
+  generateSizesAttribute,
+  generateSizesFromBreakpoints,
+  buildImageUrl,
+  parseImageUrl,
+  generateSrcsetData,
+  generateSourceTags,
+  getBestVariant,
+  getFallbackVariant,
+  groupVariantsByFormat,
+  getMimeType,
+  getFormatExtension,
+  detectFormat
+} from "./srcset.js";
+export {
+  DEFAULT_PLACEHOLDER_OPTIONS,
+  BLUR_UP_CSS,
+  generatePlaceholder,
+  generateThumbhashPlaceholder,
+  generateLQIP,
+  extractDominantColor,
+  generateColorPlaceholder,
+  decodeThumbhash,
+  generatePlaceholderCSS,
+  generatePlaceholderStyle,
+  getCachedPlaceholder,
+  clearPlaceholderCache,
+  getPlaceholderCacheStats
+} from "./placeholder.js";
+export {
+  buildImageUrl as buildUrl,
+  parseImageUrl as parseUrl,
+  mergeParams,
+  resize,
+  crop,
+  thumbnail,
+  contain,
+  cover,
+  blur,
+  sharpen,
+  grayscale,
+  sepia,
+  invert,
+  brightness,
+  contrast,
+  saturation,
+  rotate,
+  flipHorizontal,
+  flipVertical,
+  format,
+  quality,
+  auto,
+  watermark,
+  PRESETS,
+  applyPreset,
+  srcsetUrls,
+  dprUrls,
+  validateParams,
+  sanitizeParams
+} from "./editing.js";

package/dist/media/image/placeholder.js

@@ -1,2 +1,188 @@
-// @bun
-import{$u as h,Uu as a,Vu as b,Wu as c,Xu as d,Yu as e,Zu as f,_u as g,av as i,bv as j,cv as k,dv as l,ev as m}from"../../chunk-3a4qsygv.js";import"../../chunk-xv34zbp4.js";export{m as getPlaceholderCacheStats,k as getCachedPlaceholder,d as generateThumbhashPlaceholder,j as generatePlaceholderStyle,i as generatePlaceholderCSS,c as generatePlaceholder,f as generateLQIP,h as generateColorPlaceholder,g as extractDominantColor,e as decodeThumbhash,l as clearPlaceholderCache,a as DEFAULT_PLACEHOLDER_OPTIONS,b as BLUR_UP_CSS};
+export const DEFAULT_PLACEHOLDER_OPTIONS = {
+  strategy: "thumbhash",
+  width: 20,
+  quality: 50,
+  blurLevel: 40,
+  transitionDuration: 300,
+  easing: "ease-out"
+}, BLUR_UP_CSS = `
+.stx-img-placeholder {
+  position: relative;
+  overflow: hidden;
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+.stx-img-placeholder img {
+  opacity: 0;
+  transition: opacity var(--stx-img-transition-duration, 300ms) var(--stx-img-transition-easing, ease-out);
+}
+
+.stx-img-placeholder.stx-img-loaded img {
+  opacity: 1;
+}
+
+.stx-img-blur {
+  filter: blur(20px);
+  transform: scale(1.1);
+  transition: filter var(--stx-img-transition-duration, 300ms) var(--stx-img-transition-easing, ease-out),
+              transform var(--stx-img-transition-duration, 300ms) var(--stx-img-transition-easing, ease-out);
+}
+
+.stx-img-loaded .stx-img-blur {
+  filter: blur(0);
+  transform: scale(1);
+}
+`.trim();
+async function getTsImages() {
+  try {
+    return await import("ts-images");
+  } catch {
+    return null;
+  }
+}
+export async function generatePlaceholder(src, options = {}) {
+  const opts = { ...DEFAULT_PLACEHOLDER_OPTIONS, ...options }, tsImages = await getTsImages();
+  if (tsImages)
+    try {
+      return await generateWithTsImages(src, opts, tsImages);
+    } catch (error) {
+      console.warn(`[stx-media] ts-images placeholder generation failed, using fallback: ${error}`);
+    }
+  return generateFallbackPlaceholder(src, opts);
+}
+async function generateWithTsImages(src, options, tsImages) {
+  const { generatePlaceholder: tsGeneratePlaceholder, generateThumbHash } = tsImages, tsStrategy = {
+    blur: "blur",
+    thumbhash: "thumbhash",
+    blurhash: "thumbhash",
+    pixelate: "pixelate",
+    "dominant-color": "dominant-color",
+    none: "blur"
+  }[options.strategy] || "blur";
+  if (options.strategy === "thumbhash")
+    return {
+      dataURL: (await generateThumbHash(src)).dataUrl,
+      width: 32,
+      height: 32,
+      aspectRatio: 1,
+      originalWidth: 0,
+      originalHeight: 0,
+      strategy: "thumbhash"
+    };
+  const result = await tsGeneratePlaceholder(src, {
+    width: options.width,
+    height: options.height,
+    quality: options.quality,
+    blurLevel: options.blurLevel,
+    strategy: tsStrategy,
+    base64Encode: !0
+  });
+  return {
+    dataURL: result.dataURL,
+    width: result.width,
+    height: result.height,
+    aspectRatio: result.aspectRatio,
+    originalWidth: result.originalWidth,
+    originalHeight: result.originalHeight,
+    strategy: options.strategy,
+    dominantColor: result.dominantColor,
+    css: result.css
+  };
+}
+function generateFallbackPlaceholder(_src, options) {
+  const width = options.width || 20, height = options.height || width, color = "#e5e7eb", svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}"><rect fill="${color}" width="${width}" height="${height}"/></svg>`;
+  return {
+    dataURL: `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`,
+    width,
+    height,
+    aspectRatio: width / height,
+    originalWidth: 0,
+    originalHeight: 0,
+    strategy: options.strategy,
+    dominantColor: color
+  };
+}
+export async function generateThumbhashPlaceholder(src) {
+  const tsImages = await getTsImages();
+  if (tsImages)
+    try {
+      return (await tsImages.generateThumbHash(src)).dataUrl;
+    } catch {}
+  return (await generateFallbackPlaceholder(src, {
+    strategy: "thumbhash",
+    width: 32,
+    height: 32
+  })).dataURL;
+}
+export function decodeThumbhash(hash) {
+  const header = hash[0] | hash[1] << 8 | hash[2] << 16, l_dc = (header & 63) / 63, p_dc = (header >> 6 & 63) / 31.5 - 1, q_dc = (header >> 12 & 63) / 31.5 - 1, l_scale = (header >> 18 & 31) / 31, hasAlpha = header >> 23 !== 0, header2 = hash[3] | hash[4] << 8, p_scale = (header2 >> 3 & 63) / 63, q_scale = (header2 >> 9 & 63) / 63, isLandscape = header2 >> 15 !== 0, lx = Math.max(3, isLandscape ? hasAlpha ? 5 : 7 : hasAlpha ? 5 : 7), ly = Math.max(3, isLandscape ? hasAlpha ? 5 : 7 : hasAlpha ? 5 : 7), width = 32, height = 32, r = Math.max(0, Math.min(255, Math.round((l_dc + p_dc) * 255))), g = Math.max(0, Math.min(255, Math.round(l_dc * 255))), b = Math.max(0, Math.min(255, Math.round((l_dc - p_dc) * 255))), svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}">
+    <rect fill="rgb(${r},${g},${b})" width="${width}" height="${height}"/>
+  </svg>`;
+  return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`;
+}
+export async function generateLQIP(src, width = 20, quality = 50) {
+  return generatePlaceholder(src, {
+    strategy: "blur",
+    width,
+    quality,
+    blurLevel: 40
+  });
+}
+export async function extractDominantColor(src) {
+  const tsImages = await getTsImages();
+  if (tsImages)
+    try {
+      return (await tsImages.generatePlaceholder(src, {
+        strategy: "dominant-color"
+      })).dominantColor || "#e5e7eb";
+    } catch {}
+  return "#e5e7eb";
+}
+export function generateColorPlaceholder(color, width = 1, height = 1) {
+  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}"><rect fill="${color}" width="${width}" height="${height}"/></svg>`;
+  return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`;
+}
+export function generatePlaceholderCSS(id, placeholder, options = {}) {
+  const duration = options.transitionDuration || 300, easing = options.easing || "ease-out";
+  return `
+#${id} {
+  --stx-img-transition-duration: ${duration}ms;
+  --stx-img-transition-easing: ${easing};
+  background-image: url('${placeholder.dataURL}');
+  background-size: cover;
+  background-position: center;
+}
+
+#${id} img {
+  opacity: 0;
+  transition: opacity var(--stx-img-transition-duration) var(--stx-img-transition-easing);
+}
+
+#${id}.stx-img-loaded img {
+  opacity: 1;
+}
+`.trim();
+}
+export function generatePlaceholderStyle(placeholder) {
+  return `background-image: url('${placeholder.dataURL}'); background-size: cover; background-position: center;`;
+}
+const placeholderCache = new Map;
+export async function getCachedPlaceholder(src, options = {}) {
+  const cacheKey = `${src}:${JSON.stringify(options)}`;
+  if (placeholderCache.has(cacheKey))
+    return placeholderCache.get(cacheKey);
+  const placeholder = await generatePlaceholder(src, options);
+  placeholderCache.set(cacheKey, placeholder);
+  return placeholder;
+}
+export function clearPlaceholderCache() {
+  placeholderCache.clear();
+}
+export function getPlaceholderCacheStats() {
+  return {
+    size: placeholderCache.size,
+    keys: Array.from(placeholderCache.keys())
+  };
+}

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

@@ -1,2 +1,51 @@
-// @bun
-import{Gk as a,Hk as b,Ik as c,Jk as d}from"../../../chunk-khdn7jwe.js";import"../../../chunk-ckxjqqn9.js";import"../../../chunk-jpndqst5.js";import"../../../chunk-xv34zbp4.js";export{c as setCachedImageResult,b as getCachedImageResult,d as clearImageCache,a as ImageProcessorCache};
+import {
+  getCached,
+  setCached,
+  clearCache
+} from "../../shared/cache.js";
+const defaultImageCacheConfig = {
+  enabled: !0,
+  directory: ".stx/media-cache",
+  maxAge: 30,
+  maxSize: 500,
+  cacheVariants: !0,
+  cachePlaceholders: !0
+};
+
+export class ImageProcessorCache {
+  config;
+  constructor(config = {}) {
+    this.config = { ...defaultImageCacheConfig, ...config };
+  }
+  async get(src, options) {
+    return getCached(src, options, "image", this.config);
+  }
+  async set(src, options, result) {
+    return setCached(src, options, result, "image", this.config);
+  }
+  async clear() {
+    return clearCache("image", this.config);
+  }
+  updateConfig(config) {
+    this.config = { ...this.config, ...config };
+  }
+}
+let globalImageCache = null;
+function getImageCache(config) {
+  if (!globalImageCache)
+    globalImageCache = new ImageProcessorCache(config);
+  else if (config)
+    globalImageCache.updateConfig(config);
+  return globalImageCache;
+}
+export async function getCachedImageResult(src, options, config) {
+  const cacheConfig = config ? { directory: `${config.outputDir}/../.cache` } : {};
+  return getImageCache(cacheConfig).get(src, options);
+}
+export async function setCachedImageResult(src, options, result, config) {
+  const cacheConfig = config ? { directory: `${config.outputDir}/../.cache` } : {};
+  return getImageCache(cacheConfig).set(src, options, result);
+}
+export async function clearImageCache() {
+  return getImageCache().clear();
+}

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

@@ -1,2 +1,3 @@
-// @bun
-import"../../../chunk-7sqdeqsw.js";import{Dk as e,Ek as f,Fk as g}from"../../../chunk-bndmdahk.js";import{Gk as a,Hk as b,Ik as c,Jk as d}from"../../../chunk-khdn7jwe.js";import"../../../chunk-ckxjqqn9.js";import{Sk as h,Tk as i}from"../../../chunk-3te20hqw.js";import"../../../chunk-jpndqst5.js";import"../../../chunk-xv34zbp4.js";export{c as setCachedImageResult,e as processImage,f as optimizeImage,b as getCachedImageResult,i as generateSrcset,h as generateResponsiveVariants,d as clearImageCache,g as applyTransformations,a as ImageProcessorCache};
+export { processImage, optimizeImage, applyTransformations } from "./optimizer.js";
+export { generateResponsiveVariants, generateSrcset } from "./responsive.js";
+export { getCachedImageResult, setCachedImageResult, clearImageCache, ImageProcessorCache } from "./cache.js";