@stacksjs/stx 0.2.94 → 0.2.96

package/dist/markdown.js

@@ -1,2 +1,68 @@
-// @bun
-import{Cr as a,Dr as b}from"./chunk-w01y57f5.js";import"./chunk-x1hjv24z.js";import"./chunk-0g4gece6.js";import"./chunk-nap11ntr.js";import"./chunk-03c26pjz.js";import"./chunk-13yz561y.js";import"./chunk-nanw7yhz.js";import"./chunk-ghrx0hn1.js";import"./chunk-82t27pvd.js";import"./chunk-fhawx87n.js";import"./chunk-gc84b1d2.js";import"./chunk-yr1gdceh.js";import"./chunk-baa7h4yz.js";import"./chunk-kdxa9epn.js";import"./chunk-g2hekckm.js";import"./chunk-x39sfpvm.js";import"./chunk-tr0z0e1g.js";import"./chunk-4j188175.js";import"./chunk-eds0f8f1.js";import"./chunk-dyjnn5k8.js";import"./chunk-8fgwhhb8.js";import"./chunk-tj6zfxeb.js";import"./chunk-7xcfy2fn.js";import"./chunk-9yz5d003.js";import"./chunk-fms20x0n.js";import"./chunk-fe7r1mq1.js";import"./chunk-rb1e4cnb.js";import"./chunk-j4s5qwd7.js";import"./chunk-b0cyc09a.js";import"./chunk-0tatqxj2.js";import"./chunk-bykjk6vj.js";import"./chunk-7b0xdy5h.js";import"./chunk-ywkrxp2h.js";import"./chunk-y25pr13j.js";import"./chunk-q6h6yvzb.js";import"./chunk-qdc3aav1.js";import"./chunk-6wn85hn6.js";import"./chunk-qd5461tt.js";import"./chunk-77tga15w.js";import"./chunk-rv002yn0.js";import"./chunk-hke99a0v.js";import"./chunk-mwbng54r.js";import"./chunk-wxvyj65q.js";import"./chunk-yw2fzq86.js";import"./chunk-mrehzhxv.js";import"./chunk-1zgsgk4b.js";import"./chunk-48cw2nde.js";import"./chunk-jjvp4t5w.js";import"./chunk-94g3cahw.js";import"./chunk-ht4j68cs.js";import"./chunk-fch9tk1k.js";import"./chunk-cz25azze.js";import"./chunk-q60knhjf.js";import"./chunk-hrampcrj.js";import"./chunk-t37dp99j.js";import"./chunk-5kt3ay7x.js";import"./chunk-95w08s8v.js";import"./chunk-ceg2c2q2.js";import"./chunk-04mvcmcr.js";import"./chunk-n46a5g1g.js";import"./chunk-vv9wfz1c.js";import"./chunk-dzw95th7.js";import"./chunk-46mkpbkk.js";import"./chunk-3rh7va1z.js";import"./chunk-2xen423s.js";import"./chunk-cp3kwv17.js";import"./chunk-hpqr9e3x.js";import"./chunk-adqh2m9z.js";import"./chunk-8qbax8xn.js";import"./chunk-x64kb787.js";import"./chunk-gcf5v18y.js";import"./chunk-pc31m5x5.js";import"./chunk-3jm3snz8.js";export{a as processMarkdownDirectives,b as markdownDirectiveHandler};
+import { parseMarkdown } from "./internal-markdown.js";
+import { createDetailedErrorMessage } from "./utils.js";
+export async function processMarkdownDirectives(template, context, filePath = "") {
+  let output = template;
+  const matches = [], mdOpenRe = /@markdown(?:\([^)]*\))?/g;
+  let mdMatch;
+  while ((mdMatch = mdOpenRe.exec(template)) !== null) {
+    const startIdx = mdMatch.index, optMatch = mdMatch[0].match(/@markdown\(([^)]*)\)/), options = optMatch ? optMatch[1] : "", contentStart = startIdx + mdMatch[0].length;
+    let depth = 1, searchPos = contentStart, endPos = -1;
+    while (depth > 0 && searchPos < template.length) {
+      const nextOpen = template.indexOf("@markdown", searchPos), nextClose = template.indexOf("@endmarkdown", searchPos);
+      if (nextClose === -1)
+        break;
+      if (nextOpen !== -1 && nextOpen < nextClose && nextOpen !== startIdx) {
+        const charAfter = template[nextOpen + 9];
+        if (charAfter === "(" || charAfter === `
+` || charAfter === "\r" || charAfter === " " || charAfter === void 0)
+          depth++;
+        searchPos = nextOpen + 9;
+      } else {
+        depth--;
+        if (depth === 0) {
+          endPos = nextClose;
+          break;
+        }
+        searchPos = nextClose + 12;
+      }
+    }
+    if (endPos === -1)
+      continue;
+    const content = template.slice(contentStart, endPos), fullMatch = template.slice(startIdx, endPos + 12);
+    matches.push({ fullMatch, options, content, index: startIdx });
+    mdOpenRe.lastIndex = endPos + 12;
+  }
+  for (const { fullMatch, options, content, index } of matches)
+    try {
+      const optionsObj = {};
+      if (options)
+        options.split(",").forEach((opt) => {
+          const trimmed = opt.trim();
+          if (trimmed)
+            optionsObj[trimmed] = !0;
+        });
+      const parserOptions = {
+        gfm: optionsObj.gfm ?? !0,
+        breaks: optionsObj.breaks ?? !1
+      }, html = parseMarkdown(content.trim(), parserOptions);
+      output = output.split(fullMatch).join(html);
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : String(error), errorHtml = createDetailedErrorMessage("Markdown Directive", `Error processing markdown: ${errorMessage}`, filePath, template, index, fullMatch);
+      output = output.split(fullMatch).join(errorHtml);
+    }
+  return output;
+}
+export async function markdownDirectiveHandler(content, params, _context, _filePath) {
+  const options = {
+    gfm: !0,
+    breaks: !1
+  };
+  params.forEach((param) => {
+    const trimmed = param.trim().replace(/['"]/g, "");
+    if (trimmed === "breaks")
+      options.breaks = !0;
+    if (trimmed === "no-gfm")
+      options.gfm = !1;
+  });
+  return parseMarkdown(content.trim(), options);
+}

package/dist/media/client/blur-up.js

@@ -1,2 +1,217 @@
-// @bun
-import{bl as a,cl as b,dl as c,el as d,fl as e,gl as f,hl as g,il as h,jl as i}from"../../chunk-0wdar532.js";import"../../chunk-3jm3snz8.js";export{c as thumbHashToRGBA,d as thumbHashToDataURL,b as renderThumbhashToCanvas,e as parseThumbhashString,a as initBlurUp,g as initAllBlurUp,h as generateBlurUpRuntime,i as generateBlurUpCSS,f as crossfadeTransition};
+const DEFAULT_OPTIONS = {
+  duration: 300,
+  easing: "ease-out",
+  removePlaceholder: !1,
+  loadedClass: "stx-img-loaded",
+  loadingClass: "stx-img-loading"
+};
+export function initBlurUp(img, options = {}) {
+  const opts = { ...DEFAULT_OPTIONS, ...options }, wrapper = img.closest(".stx-img-placeholder");
+  if (!wrapper) {
+    handleImageLoad(img, opts);
+    return;
+  }
+  wrapper.style.setProperty("--stx-img-transition-duration", `${opts.duration}ms`);
+  wrapper.style.setProperty("--stx-img-transition-easing", opts.easing);
+  if (opts.loadingClass)
+    wrapper.classList.add(opts.loadingClass);
+  if (img.complete && img.naturalWidth > 0)
+    onImageLoaded(img, wrapper, opts);
+  else {
+    img.addEventListener("load", () => onImageLoaded(img, wrapper, opts), { once: !0 });
+    img.addEventListener("error", () => onImageError(img, wrapper, opts), { once: !0 });
+  }
+}
+function handleImageLoad(img, options) {
+  const handleLoad = () => {
+    img.style.transition = `opacity ${options.duration}ms ${options.easing}`;
+    img.style.opacity = "1";
+    img.classList.remove(options.loadingClass);
+    img.classList.add(options.loadedClass);
+  };
+  if (img.complete && img.naturalWidth > 0)
+    handleLoad();
+  else {
+    img.style.opacity = "0";
+    img.classList.add(options.loadingClass);
+    img.addEventListener("load", handleLoad, { once: !0 });
+  }
+}
+function onImageLoaded(img, wrapper, options) {
+  if (options.loadingClass)
+    wrapper.classList.remove(options.loadingClass);
+  if (options.loadedClass)
+    wrapper.classList.add(options.loadedClass);
+  img.style.opacity = "1";
+  if (options.removePlaceholder)
+    setTimeout(() => {
+      wrapper.style.backgroundImage = "none";
+    }, options.duration);
+}
+function onImageError(img, wrapper, options) {
+  if (options.loadingClass)
+    wrapper.classList.remove(options.loadingClass);
+  wrapper.classList.add("stx-img-error");
+  img.classList.add("stx-img-error");
+}
+export function renderThumbhashToCanvas(hash, canvas) {
+  const rgba = thumbHashToRGBA(hash), ctx = canvas.getContext("2d");
+  if (!ctx)
+    return;
+  canvas.width = rgba.w;
+  canvas.height = rgba.h;
+  const imageData = ctx.createImageData(rgba.w, rgba.h);
+  imageData.data.set(rgba.rgba);
+  ctx.putImageData(imageData, 0, 0);
+}
+export function thumbHashToRGBA(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 : 5), ly = Math.max(3, isLandscape ? hasAlpha ? 5 : 5 : hasAlpha ? 5 : 7), w = 32, h = 32, rgba = new Uint8ClampedArray(w * h * 4);
+  for (let y = 0;y < h; y++)
+    for (let x = 0;x < w; x++) {
+      const i = (y * w + x) * 4, fx = x / (w - 1), fy = y / (h - 1), l = l_dc + (fx - 0.5) * l_scale * 0.5 + (fy - 0.5) * l_scale * 0.5, p = p_dc * (1 - fx * 0.3), q = q_dc * (1 - fy * 0.3), b = l - 0.6666666666666666 * p, r = (3 * l - b + q) / 2, g = r - q;
+      rgba[i] = Math.max(0, Math.min(255, Math.round(r * 255)));
+      rgba[i + 1] = Math.max(0, Math.min(255, Math.round(g * 255)));
+      rgba[i + 2] = Math.max(0, Math.min(255, Math.round(b * 255)));
+      rgba[i + 3] = 255;
+    }
+  return { w, h, rgba };
+}
+export function thumbHashToDataURL(hash) {
+  const rgba = thumbHashToRGBA(hash), canvas = document.createElement("canvas");
+  canvas.width = rgba.w;
+  canvas.height = rgba.h;
+  const ctx = canvas.getContext("2d");
+  if (!ctx)
+    return "";
+  const imageData = ctx.createImageData(rgba.w, rgba.h);
+  imageData.data.set(rgba.rgba);
+  ctx.putImageData(imageData, 0, 0);
+  return canvas.toDataURL("image/png");
+}
+export function parseThumbhashString(base64) {
+  const binary = atob(base64), bytes = new Uint8Array(binary.length);
+  for (let i = 0;i < binary.length; i++)
+    bytes[i] = binary.charCodeAt(i);
+  return bytes;
+}
+export function crossfadeTransition(from, to, duration = 300) {
+  return new Promise((resolve) => {
+    from.style.transition = `opacity ${duration}ms ease-out`;
+    to.style.transition = `opacity ${duration}ms ease-out`;
+    to.style.opacity = "0";
+    to.offsetWidth;
+    from.style.opacity = "0";
+    to.style.opacity = "1";
+    setTimeout(resolve, duration);
+  });
+}
+export function initAllBlurUp(options = {}) {
+  document.querySelectorAll("[data-stx-blur-up], .stx-img-placeholder img").forEach((img) => {
+    initBlurUp(img, options);
+  });
+}
+export function generateBlurUpRuntime() {
+  return `
+(function() {
+  'use strict';
+
+  if (typeof window === 'undefined') return;
+
+  var defaultOptions = {
+    duration: 300,
+    easing: 'ease-out',
+    loadedClass: 'stx-img-loaded'
+  };
+
+  function initBlurUp(img, options) {
+    options = Object.assign({}, defaultOptions, options);
+    var wrapper = img.closest('.stx-img-placeholder');
+
+    if (!wrapper) {
+      if (img.complete && img.naturalWidth > 0) {
+        img.style.opacity = '1';
+      }
+else {
+        img.style.opacity = '0';
+        img.style.transition = 'opacity ' + options.duration + 'ms ' + options.easing;
+        img.onload = function() { img.style.opacity = '1'; };
+      }
+      return;
+    }
+
+    wrapper.style.setProperty('--stx-img-transition-duration', options.duration + 'ms');
+    wrapper.style.setProperty('--stx-img-transition-easing', options.easing);
+
+    var onLoaded = function() {
+      wrapper.classList.add(options.loadedClass);
+      img.style.opacity = '1';
+    };
+
+    if (img.complete && img.naturalWidth > 0) {
+      onLoaded();
+    }
+else {
+      img.addEventListener('load', onLoaded, { once: true });
+    }
+  }
+
+  function init() {
+    var elements = document.querySelectorAll('.stx-img-placeholder img, [data-stx-blur-up]');
+    elements.forEach(function(img) { initBlurUp(img); });
+  }
+
+  // Initialize when DOM is ready
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', init);
+  }
+else {
+    init();
+  }
+
+  // Expose for manual use
+  window.STX = window.STX || {};
+  window.STX.initBlurUp = initBlurUp;
+  window.STX.initAllBlurUp = init;
+})();
+`.trim();
+}
+export function generateBlurUpCSS() {
+  return `
+.stx-img-placeholder {
+  position: relative;
+  overflow: hidden;
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+.stx-img-placeholder img {
+  display: block;
+  width: 100%;
+  height: auto;
+  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,
+.stx-img-blur.stx-img-loaded {
+  filter: blur(0);
+  transform: scale(1);
+}
+
+.stx-img-error {
+  opacity: 0.5;
+}
+`.trim();
+}

package/dist/media/client/index.js

@@ -1,2 +1,53 @@
-// @bun
-import{$k as z,al as A}from"../../chunk-xhnpsngj.js";import{bl as k,cl as l,dl as m,el as n,fl as o,gl as p,hl as q,il as r,jl as s}from"../../chunk-0wdar532.js";import{kl as a,ll as b,ml as c,nl as d,ol as e,pl as f,ql as g,rl as h,sl as i,tl as j}from"../../chunk-9agvhp1x.js";import{ul as t,vl as u,wl as v,xl as w,yl as x,zl as y}from"../../chunk-znxp3zha.js";import"../../chunk-3jm3snz8.js";export{t as validateFile,v as uploadFiles,u as uploadFile,m as thumbHashToRGBA,n as thumbHashToDataURL,l as renderThumbhashToCanvas,o as parseThumbhashString,h as observeElement,d as loadElement,f as lazyLoadAll,e as lazyLoad,a as isNativeLazySupported,b as isIntersectionObserverSupported,c as initLazyLoading,k as initBlurUp,q as initAllBlurUp,x as generateVideoPreview,y as generateUploadRuntime,A as generateMinifiedMediaRuntime,z as generateMediaRuntime,j as generateLazyLoadRuntime,w as generateImagePreview,r as generateBlurUpRuntime,s as generateBlurUpCSS,i as disconnectObserver,p as crossfadeTransition,g as createLazyObserver};
+export {
+  isNativeLazySupported,
+  isIntersectionObserverSupported,
+  initLazyLoading,
+  loadElement,
+  lazyLoad,
+  lazyLoadAll,
+  createLazyObserver,
+  observeElement,
+  disconnectObserver,
+  generateLazyLoadRuntime
+} from "./lazy-load.js";
+export {
+  initBlurUp,
+  initAllBlurUp,
+  renderThumbhashToCanvas,
+  thumbHashToRGBA,
+  thumbHashToDataURL,
+  parseThumbhashString,
+  crossfadeTransition,
+  generateBlurUpRuntime,
+  generateBlurUpCSS
+} from "./blur-up.js";
+export {
+  validateFile,
+  uploadFile,
+  uploadFiles,
+  generateImagePreview,
+  generateVideoPreview,
+  generateUploadRuntime
+} from "./upload-handler.js";
+import { generateLazyLoadRuntime } from "./lazy-load.js";
+import { generateBlurUpRuntime, generateBlurUpCSS } from "./blur-up.js";
+import { generateUploadRuntime } from "./upload-handler.js";
+export function generateMediaRuntime() {
+  return {
+    script: [
+      generateLazyLoadRuntime(),
+      generateBlurUpRuntime(),
+      generateUploadRuntime()
+    ].join(`
+
+`),
+    css: generateBlurUpCSS()
+  };
+}
+export function generateMinifiedMediaRuntime() {
+  const { script, css } = generateMediaRuntime(), minScript = script.replace(/\/\*[\s\S]*?\*\//g, "").replace(/\/\/.*$/gm, "").replace(/\s+/g, " ").replace(/\s*([{};,:])\s*/g, "$1").trim(), minCss = css.replace(/\/\*[\s\S]*?\*\//g, "").replace(/\s+/g, " ").replace(/\s*([{};,:])\s*/g, "$1").trim();
+  return {
+    script: minScript,
+    css: minCss
+  };
+}

package/dist/media/client/lazy-load.js

@@ -1,2 +1,283 @@
-// @bun
-import{kl as a,ll as b,ml as c,nl as d,ol as e,pl as f,ql as g,rl as h,sl as i,tl as j}from"../../chunk-9agvhp1x.js";import"../../chunk-3jm3snz8.js";export{h as observeElement,d as loadElement,f as lazyLoadAll,e as lazyLoad,a as isNativeLazySupported,b as isIntersectionObserverSupported,c as initLazyLoading,j as generateLazyLoadRuntime,i as disconnectObserver,g as createLazyObserver};
+const DEFAULT_OPTIONS = {
+  root: null,
+  rootMargin: "50px 0px",
+  threshold: 0,
+  useNative: !0,
+  selector: "[data-stx-lazy]"
+};
+export function isNativeLazySupported() {
+  return "loading" in HTMLImageElement.prototype;
+}
+export function isIntersectionObserverSupported() {
+  return "IntersectionObserver" in window;
+}
+export function initLazyLoading(options = {}) {
+  const opts = { ...DEFAULT_OPTIONS, ...options }, elements = document.querySelectorAll(opts.selector);
+  if (elements.length === 0)
+    return () => {};
+  if (opts.useNative && isNativeLazySupported()) {
+    elements.forEach((el) => {
+      if (el.tagName === "IMG" || el.tagName === "IFRAME")
+        loadElement(el, opts);
+    });
+    return () => {};
+  }
+  if (!isIntersectionObserverSupported()) {
+    elements.forEach((el) => loadElement(el, opts));
+    return () => {};
+  }
+  const observer = new IntersectionObserver((entries) => {
+    entries.forEach((entry) => {
+      if (entry.isIntersecting) {
+        const el = entry.target;
+        loadElement(el, opts);
+        observer.unobserve(el);
+      }
+    });
+  }, {
+    root: opts.root,
+    rootMargin: opts.rootMargin,
+    threshold: opts.threshold
+  });
+  elements.forEach((el) => observer.observe(el));
+  return () => {
+    observer.disconnect();
+  };
+}
+export function loadElement(element, options = {}) {
+  const { onLoad, onLoaded, onError } = options;
+  if (onLoad)
+    onLoad(element);
+  const isImg = element.tagName === "IMG", isVideo = element.tagName === "VIDEO", isIframe = element.tagName === "IFRAME";
+  if (isImg)
+    loadImage(element, onLoaded, onError);
+  else if (isVideo)
+    loadVideo(element, onLoaded, onError);
+  else if (isIframe)
+    loadIframe(element, onLoaded, onError);
+  else {
+    const img = element.querySelector("img[data-src], img[data-srcset]"), video = element.querySelector("video[data-src]");
+    if (img)
+      loadImage(img, () => {
+        if (onLoaded)
+          onLoaded(element);
+      }, (error) => {
+        if (onError)
+          onError(element, error);
+      });
+    else if (video)
+      loadVideo(video, () => {
+        if (onLoaded)
+          onLoaded(element);
+      }, (error) => {
+        if (onError)
+          onError(element, error);
+      });
+    element.querySelectorAll("source[data-srcset]").forEach((source) => {
+      const sourceEl = source;
+      if (sourceEl.dataset.srcset) {
+        sourceEl.srcset = sourceEl.dataset.srcset;
+        delete sourceEl.dataset.srcset;
+      }
+      if (sourceEl.dataset.sizes) {
+        sourceEl.sizes = sourceEl.dataset.sizes;
+        delete sourceEl.dataset.sizes;
+      }
+    });
+  }
+}
+function loadImage(img, onLoaded, onError) {
+  const handleLoad = () => {
+    img.classList.add("stx-img-loaded");
+    img.style.opacity = "1";
+    const wrapper = img.closest(".stx-img-placeholder");
+    if (wrapper)
+      wrapper.classList.add("stx-img-loaded");
+    if (onLoaded)
+      onLoaded(img);
+  }, handleError = () => {
+    img.classList.add("stx-img-error");
+    if (onError)
+      onError(img, Error(`Failed to load image: ${img.src}`));
+  };
+  img.addEventListener("load", handleLoad, { once: !0 });
+  img.addEventListener("error", handleError, { once: !0 });
+  if (img.dataset.srcset) {
+    img.srcset = img.dataset.srcset;
+    delete img.dataset.srcset;
+  }
+  if (img.dataset.src) {
+    img.src = img.dataset.src;
+    delete img.dataset.src;
+  }
+  if (img.dataset.sizes) {
+    img.sizes = img.dataset.sizes;
+    delete img.dataset.sizes;
+  }
+}
+function loadVideo(video, onLoaded, onError) {
+  const handleLoaded = () => {
+    video.classList.add("stx-video-loaded");
+    if (onLoaded)
+      onLoaded(video);
+  }, handleError = () => {
+    video.classList.add("stx-video-error");
+    if (onError)
+      onError(video, Error(`Failed to load video: ${video.src}`));
+  };
+  video.addEventListener("loadeddata", handleLoaded, { once: !0 });
+  video.addEventListener("error", handleError, { once: !0 });
+  video.querySelectorAll("source[data-src]").forEach((source) => {
+    const sourceEl = source;
+    if (sourceEl.dataset.src) {
+      sourceEl.src = sourceEl.dataset.src;
+      delete sourceEl.dataset.src;
+    }
+  });
+  if (video.dataset.src) {
+    video.src = video.dataset.src;
+    delete video.dataset.src;
+  }
+  if (video.dataset.poster) {
+    video.poster = video.dataset.poster;
+    delete video.dataset.poster;
+  }
+  video.load();
+}
+function loadIframe(iframe, onLoaded, onError) {
+  const handleLoad = () => {
+    iframe.classList.add("stx-iframe-loaded");
+    if (onLoaded)
+      onLoaded(iframe);
+  }, handleError = () => {
+    iframe.classList.add("stx-iframe-error");
+    if (onError)
+      onError(iframe, Error(`Failed to load iframe: ${iframe.src}`));
+  };
+  iframe.addEventListener("load", handleLoad, { once: !0 });
+  iframe.addEventListener("error", handleError, { once: !0 });
+  if (iframe.dataset.src) {
+    iframe.src = iframe.dataset.src;
+    delete iframe.dataset.src;
+  }
+}
+export function lazyLoad(element) {
+  loadElement(element, {});
+}
+export function lazyLoadAll(selector = "[data-stx-lazy]") {
+  document.querySelectorAll(selector).forEach((el) => loadElement(el, {}));
+}
+export function createLazyObserver(options = {}) {
+  const opts = { ...DEFAULT_OPTIONS, ...options };
+  return new IntersectionObserver((entries, observer) => {
+    entries.forEach((entry) => {
+      if (entry.isIntersecting) {
+        loadElement(entry.target, opts);
+        observer.unobserve(entry.target);
+      }
+    });
+  }, {
+    root: opts.root,
+    rootMargin: opts.rootMargin,
+    threshold: opts.threshold
+  });
+}
+export function observeElement(observer, element) {
+  observer.observe(element);
+}
+export function disconnectObserver(observer) {
+  observer.disconnect();
+}
+export function generateLazyLoadRuntime() {
+  return `
+(function() {
+  'use strict';
+
+  if (typeof window === 'undefined') return;
+
+  var defaultOptions = {
+    root: null,
+    rootMargin: '50px 0px',
+    threshold: 0
+  };
+
+  function isNativeLazySupported() {
+    return 'loading' in HTMLImageElement.prototype;
+  }
+
+  function loadElement(el) {
+    var img = el.tagName === 'IMG' ? el : el.querySelector('img[data-src], img[data-srcset]');
+    var video = el.tagName === 'VIDEO' ? el : el.querySelector('video[data-src]');
+
+    // Load sources in picture elements
+    var sources = el.querySelectorAll('source[data-srcset]');
+    sources.forEach(function(source) {
+      if (source.dataset.srcset) {
+        source.srcset = source.dataset.srcset;
+        delete source.dataset.srcset;
+      }
+      if (source.dataset.sizes) {
+        source.sizes = source.dataset.sizes;
+        delete source.dataset.sizes;
+      }
+    });
+
+    if (img) {
+      img.onload = function() {
+        img.style.opacity = '1';
+        img.classList.add('stx-img-loaded');
+        var wrapper = img.closest('.stx-img-placeholder');
+        if (wrapper) wrapper.classList.add('stx-img-loaded');
+      };
+      if (img.dataset.srcset) { img.srcset = img.dataset.srcset; delete img.dataset.srcset; }
+      if (img.dataset.src) { img.src = img.dataset.src; delete img.dataset.src; }
+      if (img.dataset.sizes) { img.sizes = img.dataset.sizes; delete img.dataset.sizes; }
+    }
+
+    if (video) {
+      var videoSources = video.querySelectorAll('source[data-src]');
+      videoSources.forEach(function(source) {
+        if (source.dataset.src) { source.src = source.dataset.src; delete source.dataset.src; }
+      });
+      if (video.dataset.src) { video.src = video.dataset.src; delete video.dataset.src; }
+      if (video.dataset.poster) { video.poster = video.dataset.poster; delete video.dataset.poster; }
+      video.load();
+    }
+  }
+
+  function init() {
+    var elements = document.querySelectorAll('[data-stx-lazy]');
+    if (!elements.length) return;
+
+    if (!('IntersectionObserver' in window)) {
+      elements.forEach(loadElement);
+      return;
+    }
+
+    var observer = new IntersectionObserver(function(entries) {
+      entries.forEach(function(entry) {
+        if (entry.isIntersecting) {
+          loadElement(entry.target);
+          observer.unobserve(entry.target);
+        }
+      });
+    }, defaultOptions);
+
+    elements.forEach(function(el) { observer.observe(el); });
+  }
+
+  // Initialize when DOM is ready
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', init);
+  }
+else {
+    init();
+  }
+
+  // Expose for manual use
+  window.STX = window.STX || {};
+  window.STX.lazyLoad = loadElement;
+  window.STX.initLazyLoading = init;
+})();
+`.trim();
+}