@stacksjs/stx 0.2.94 → 0.2.96

package/dist/media/image/directive.js

@@ -1,2 +1,160 @@
-// @bun
-import{tu as a,uu as b}from"../../chunk-8fgwhhb8.js";import"../../chunk-tj6zfxeb.js";import"../../chunk-7xcfy2fn.js";import"../../chunk-9yz5d003.js";import"../../chunk-ywkrxp2h.js";import"../../chunk-3jm3snz8.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{$j as c,Zj as a,_j as b,ak as d,bk as e,ck as f,dk as g,ek as h,fk as i,gk as j,hk as k,ik as l,jk as m,kk as n,lk as o,mk as p,nk as q,ok as r,pk as s,qk as t,rk as u,sk as v,tk as w,uk as x,vk as y,wk as z,xk as A,yk as B,zk as C}from"../../chunk-tmgz5t2g.js";import"../../chunk-3jm3snz8.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{$j as R,Zj as P,_j as Q,ak as S,bk as T,ck as U,dk as V,ek as W,fk as X,gk as Y,hk as Z,ik as _,jk as $,kk as aa,lk as ba,mk as ca,nk as da,ok as ea,pk as fa,qk as ga,rk as ha,sk as ia,tk as ja,uk as ka,vk as la,wk as ma,xk as na,yk as oa,zk as pa}from"../../chunk-tmgz5t2g.js";import{tu as N,uu as O}from"../../chunk-8fgwhhb8.js";import{vu as K,wu as L,xu as M}from"../../chunk-tj6zfxeb.js";import{Au as c,Bu as d,Cu as e,Du as f,Eu as g,Fu as h,Gu as i,Hu as j,Iu as k,Ju as l,Ku as m,Lu as n,Mu as o,Nu as p,Ou as q,Pu as r,Qu as s,Ru as t,Su as u,Tu as v,Uu as w,yu as a,zu as b}from"../../chunk-7xcfy2fn.js";import{$u as D,Vu as x,Wu as y,Xu as z,Yu as A,Zu as B,_u as C,av as E,bv as F,cv as G,dv as H,ev as I,fv as J}from"../../chunk-9yz5d003.js";import"../../chunk-ywkrxp2h.js";import"../../chunk-3jm3snz8.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 g,Vu as a,Wu as b,Xu as c,Yu as d,Zu as e,_u as f,av as h,bv as i,cv as j,dv as k,ev as l,fv as m}from"../../chunk-9yz5d003.js";import"../../chunk-3jm3snz8.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{Dk as a,Ek as b,Fk as c,Gk as d}from"../../../chunk-5q87fgkk.js";import"../../../chunk-gqpkp459.js";import"../../../chunk-5ggw1dyv.js";import"../../../chunk-3jm3snz8.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{Ak as e,Bk as f,Ck as g}from"../../../chunk-sn07azv3.js";import{Dk as a,Ek as b,Fk as c,Gk as d}from"../../../chunk-5q87fgkk.js";import"../../../chunk-gqpkp459.js";import{Pk as h,Qk as i}from"../../../chunk-1z2yq9em.js";import"../../../chunk-5ggw1dyv.js";import"../../../chunk-3jm3snz8.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";