@stacksjs/stx 0.2.95 → 0.2.97

package/dist/builtins/drawer.js

@@ -1,2 +1,37 @@
-// @bun
-import{cz as a}from"../chunk-wg9k6h8w.js";import"../chunk-gz5fmp3q.js";import"../chunk-xv34zbp4.js";export{a as StxDrawerBuiltin};
+import { escapeAttr } from "./escape.js";
+function resolveProp(props, key) {
+  if (props.serverDynamic[key] !== void 0)
+    return String(props.serverDynamic[key]);
+  const val = props.static[key];
+  if (typeof val === "string")
+    return val;
+  return;
+}
+const SIZE_WIDTHS = {
+  sm: "16rem",
+  md: "24rem",
+  lg: "32rem",
+  xl: "40rem"
+};
+export const StxDrawerBuiltin = {
+  name: "StxDrawer",
+  aliases: ["stx-drawer"],
+  render(props, slotContent, _ctx) {
+    const rawId = resolveProp(props, "id");
+    if (!rawId) {
+      console.warn('[stx] <StxDrawer> requires an "id" prop');
+      return "<!-- StxDrawer: missing id prop -->";
+    }
+    const id = escapeAttr(rawId), side = resolveProp(props, "side") || "right", size = resolveProp(props, "size") || "md", closeOnBackdrop = resolveProp(props, "closeOnBackdrop") !== "false", closeOnEscape = resolveProp(props, "closeOnEscape") !== "false", overlay = resolveProp(props, "overlay") !== "false", width = SIZE_WIDTHS[size] || SIZE_WIDTHS.md, isLeft = side === "left", positionStyle = isLeft ? "left:0" : "right:0", translateHidden = isLeft ? "translateX(-100%)" : "translateX(100%)", animName = isLeft ? "stx-drawer-slide-left" : "stx-drawer-slide-right";
+    return `<div id="stx-drawer-${id}" class="stx-drawer-backdrop" data-stx-drawer="${id}" data-close-backdrop="${closeOnBackdrop}" data-close-escape="${closeOnEscape}" style="display:none;position:fixed;inset:0;z-index:99999;${overlay ? "background:rgba(0,0,0,0.5);backdrop-filter:blur(2px)" : "background:transparent;pointer-events:none"};opacity:0;transition:opacity 0.2s ease" role="dialog" aria-modal="true">
+  <div class="stx-drawer-panel" style="position:fixed;top:0;bottom:0;${positionStyle};width:${width};max-width:100vw;transform:${translateHidden};transition:transform 0.3s cubic-bezier(0.4,0,0.2,1);background:var(--stx-drawer-bg,#fff);color:var(--stx-drawer-text,#1f2937);box-shadow:0 20px 60px rgba(0,0,0,0.3);overflow-y:auto;pointer-events:auto">
+    <div style="padding:1.5rem">${slotContent}</div>
+  </div>
+</div>
+<style>
+@media(prefers-color-scheme:dark){[data-stx-drawer]{--stx-drawer-bg:#1f2937;--stx-drawer-text:#f3f4f6}}
+.stx-drawer-backdrop[data-stx-drawer-open]{display:block!important;opacity:1}
+.stx-drawer-backdrop[data-stx-drawer-open] .stx-drawer-panel{transform:translateX(0)}
+</style>`;
+  }
+};

package/dist/builtins/escape.js

@@ -1,2 +1,3 @@
-// @bun
-import{gz as a}from"../chunk-gz5fmp3q.js";import"../chunk-xv34zbp4.js";export{a as escapeAttr};
+export function escapeAttr(value) {
+  return value.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/'/g, "&#39;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}

package/dist/builtins/icon.js

@@ -1,2 +1,83 @@
-// @bun
-import{dz as a,ez as b}from"../chunk-9jtj77jx.js";import"../chunk-gz5fmp3q.js";import"../chunk-xv34zbp4.js";export{b as preloadIconCollection,a as IconBuiltin};
+var {require}=import.meta;import { escapeAttr } from "./escape.js";
+import { existsSync, readFileSync } from "node:fs";
+const collectionCache = new Map;
+function resolveCollectionPath(prefix) {
+  try {
+    return require.resolve(`@iconify/json/json/${prefix}.json`);
+  } catch {}
+  const cwd = process.cwd();
+  for (const candidate of [
+    `${cwd}/node_modules/@iconify/json/json/${prefix}.json`,
+    `${cwd}/pantry/@iconify/json/json/${prefix}.json`
+  ])
+    if (existsSync(candidate))
+      return candidate;
+  return null;
+}
+function loadCollectionSync(prefix) {
+  if (collectionCache.has(prefix))
+    return collectionCache.get(prefix);
+  const jsonPath = resolveCollectionPath(prefix);
+  if (!jsonPath)
+    return null;
+  try {
+    const data = JSON.parse(readFileSync(jsonPath, "utf8"));
+    collectionCache.set(prefix, data.icons);
+    return data.icons;
+  } catch {
+    return null;
+  }
+}
+async function loadCollection(prefix) {
+  if (collectionCache.has(prefix))
+    return collectionCache.get(prefix);
+  const jsonPath = resolveCollectionPath(prefix);
+  if (!jsonPath)
+    return null;
+  try {
+    const data = await Bun.file(jsonPath).json();
+    collectionCache.set(prefix, data.icons);
+    return data.icons;
+  } catch {
+    return null;
+  }
+}
+function resolveProp(props, key) {
+  if (props.serverDynamic[key] !== void 0)
+    return String(props.serverDynamic[key]);
+  if (props.static[key] !== void 0)
+    return String(props.static[key]);
+  if (props.clientReactive[key] !== void 0)
+    return props.clientReactive[key];
+  return;
+}
+export const IconBuiltin = {
+  name: "Icon",
+  aliases: ["icon", "stx-icon"],
+  render(props, _slotContent, _ctx) {
+    const nameRaw = resolveProp(props, "name") ?? resolveProp(props, "icon");
+    if (!nameRaw)
+      return "<!-- Icon: missing name/icon prop -->";
+    let collection = "lucide", iconName = nameRaw;
+    if (nameRaw.includes(":")) {
+      const parts = nameRaw.split(":");
+      collection = parts[0];
+      iconName = parts[1];
+    }
+    const size = escapeAttr(resolveProp(props, "size") || "24"), color = escapeAttr(resolveProp(props, "color") || "currentColor"), className = escapeAttr(resolveProp(props, "class") || ""), style = escapeAttr(resolveProp(props, "style") || ""), icons = collectionCache.get(collection) ?? loadCollectionSync(collection);
+    if (!icons)
+      return `<!-- Icon: collection "${collection}" not loaded -->`;
+    const iconData = icons[iconName];
+    if (!iconData)
+      return `<!-- Icon: "${iconName}" not found in ${collection} -->`;
+    const width = iconData.width || 24, height = iconData.height || 24, viewBox = `0 0 ${width} ${height}`;
+    let body = iconData.body;
+    if (color !== "currentColor")
+      body = body.replace(/currentColor/g, color);
+    const classAttr = className ? ` class="${className}"` : "", styleAttr = style ? ` style="${style}"` : "";
+    return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="${viewBox}" fill="none"${classAttr}${styleAttr}>${body}</svg>`;
+  }
+};
+export async function preloadIconCollection(prefix = "lucide") {
+  await loadCollection(prefix);
+}

package/dist/builtins/index.js

@@ -1,2 +1,34 @@
-// @bun
-import{cs as m}from"../chunk-1xz0w746.js";import"../chunk-m8448qby.js";import"../chunk-kx6eb6ma.js";import"../chunk-g1vt329s.js";import"../chunk-7074g241.js";import"../chunk-9cf97f9p.js";import"../chunk-6djzdes9.js";import"../chunk-v7f8jj15.js";import"../chunk-keawsbpn.js";import"../chunk-8b3z0zd5.js";import"../chunk-hbgxbgam.js";import"../chunk-ejh8fyak.js";import"../chunk-krqn0ddk.js";import"../chunk-y1k17c8b.js";import"../chunk-2j21d3ka.js";import"../chunk-frg705zq.js";import"../chunk-hjm2xab3.js";import"../chunk-07y6m5xx.js";import"../chunk-wazkqv7n.js";import"../chunk-x05nxhyv.js";import"../chunk-31dr4bys.js";import"../chunk-mgj88zeq.js";import"../chunk-m167kjhv.js";import"../chunk-3a4qsygv.js";import"../chunk-dqn9gyhb.js";import"../chunk-988dw6q3.js";import"../chunk-8qc1bsym.js";import"../chunk-xyg1r5w0.js";import"../chunk-7gd339hd.js";import"../chunk-4deg33rw.js";import"../chunk-pa9zb7ty.js";import"../chunk-a2g2qb2y.js";import"../chunk-h5jxydqq.js";import"../chunk-nhv099jv.js";import"../chunk-shv88d2d.js";import"../chunk-0dx4q6yq.js";import"../chunk-ek2w6zvy.js";import"../chunk-9wmq2272.js";import"../chunk-7dkz6z2s.js";import"../chunk-9ecv8aqj.js";import"../chunk-bdk6g1vj.js";import"../chunk-xqq1vxb6.js";import"../chunk-amaa1bev.js";import"../chunk-r5m9xtm7.js";import"../chunk-bs3gmfxz.js";import"../chunk-1zgsgk4b.js";import"../chunk-2jxbwnkz.js";import"../chunk-zen6ax1y.js";import"../chunk-yb1t2h8h.js";import"../chunk-fjk3x41y.js";import"../chunk-5shey2e4.js";import"../chunk-27zsyhrd.js";import"../chunk-7ed3tean.js";import"../chunk-8vtm0m84.js";import{Yy as a}from"../chunk-tzwtg722.js";import{Zy as d}from"../chunk-ah88wzbg.js";import{_y as k}from"../chunk-v8j49spx.js";import{$y as e}from"../chunk-tg2f1mzq.js";import{az as j}from"../chunk-n9dhs1dw.js";import{bz as l}from"../chunk-rwrv9wbf.js";import{cz as g}from"../chunk-wg9k6h8w.js";import{dz as h,ez as i}from"../chunk-9jtj77jx.js";import{fz as f}from"../chunk-qygvvygy.js";import"../chunk-gz5fmp3q.js";import{hz as c}from"../chunk-vjbefncc.js";import{iz as b}from"../chunk-8xj7c3mf.js";import"../chunk-qvrbjpdc.js";import"../chunk-w3b6m427.js";import"../chunk-rz2ec6g7.js";import"../chunk-35faj94w.js";import"../chunk-djddhmcc.js";import"../chunk-knm8a8yx.js";import"../chunk-xv34zbp4.js";export{m as registerBuiltins,i as preloadIconCollection,j as getTooltipRuntime,l as TransitionGroupBuiltin,k as SuspenseBuiltin,e as StxToastBuiltin,f as StxModalBuiltin,d as StxLoadingIndicatorBuiltin,a as StxLinkBuiltin,b as StxImageBuiltin,g as StxDrawerBuiltin,c as SafeImageBuiltin,h as IconBuiltin};
+export { StxLinkBuiltin } from "./stx-link.js";
+export { StxImageBuiltin } from "./stx-image.js";
+export { SafeImageBuiltin } from "./safe-image.js";
+export { StxLoadingIndicatorBuiltin } from "./stx-loading-indicator.js";
+export { StxToastBuiltin } from "./toast.js";
+export { StxModalBuiltin } from "./modal.js";
+export { StxDrawerBuiltin } from "./drawer.js";
+export { IconBuiltin, preloadIconCollection } from "./icon.js";
+export { getTooltipRuntime } from "./tooltip.js";
+export { SuspenseBuiltin } from "./suspense.js";
+export { TransitionGroupBuiltin } from "./transition-group.js";
+import { registry } from "../component-registry.js";
+import { StxLinkBuiltin } from "./stx-link.js";
+import { StxImageBuiltin } from "./stx-image.js";
+import { SafeImageBuiltin } from "./safe-image.js";
+import { StxLoadingIndicatorBuiltin } from "./stx-loading-indicator.js";
+import { StxToastBuiltin } from "./toast.js";
+import { StxModalBuiltin } from "./modal.js";
+import { StxDrawerBuiltin } from "./drawer.js";
+import { IconBuiltin } from "./icon.js";
+import { SuspenseBuiltin } from "./suspense.js";
+import { TransitionGroupBuiltin } from "./transition-group.js";
+export function registerBuiltins() {
+  registry.registerBuiltin(StxLinkBuiltin);
+  registry.registerBuiltin(StxImageBuiltin);
+  registry.registerBuiltin(SafeImageBuiltin);
+  registry.registerBuiltin(StxLoadingIndicatorBuiltin);
+  registry.registerBuiltin(StxToastBuiltin);
+  registry.registerBuiltin(StxModalBuiltin);
+  registry.registerBuiltin(StxDrawerBuiltin);
+  registry.registerBuiltin(IconBuiltin);
+  registry.registerBuiltin(SuspenseBuiltin);
+  registry.registerBuiltin(TransitionGroupBuiltin);
+}

package/dist/builtins/modal.js

@@ -1,2 +1,38 @@
-// @bun
-import{fz as a}from"../chunk-qygvvygy.js";import"../chunk-gz5fmp3q.js";import"../chunk-xv34zbp4.js";export{a as StxModalBuiltin};
+import { escapeAttr } from "./escape.js";
+function resolveProp(props, key) {
+  if (props.serverDynamic[key] !== void 0)
+    return String(props.serverDynamic[key]);
+  const val = props.static[key];
+  if (typeof val === "string")
+    return val;
+  return;
+}
+const SIZE_WIDTHS = {
+  sm: "max-width:24rem",
+  md: "max-width:32rem",
+  lg: "max-width:42rem",
+  xl: "max-width:56rem",
+  full: "max-width:calc(100vw - 2rem);max-height:calc(100vh - 2rem)"
+};
+export const StxModalBuiltin = {
+  name: "StxModal",
+  aliases: ["stx-modal"],
+  render(props, slotContent, _ctx) {
+    const rawId = resolveProp(props, "id");
+    if (!rawId) {
+      console.warn('[stx] <StxModal> requires an "id" prop');
+      return "<!-- StxModal: missing id prop -->";
+    }
+    const id = escapeAttr(rawId), size = resolveProp(props, "size") || "md", closeOnBackdrop = resolveProp(props, "closeOnBackdrop") !== "false", closeOnEscape = resolveProp(props, "closeOnEscape") !== "false", maxWidth = SIZE_WIDTHS[size] || SIZE_WIDTHS.md;
+    return `<div id="stx-modal-${id}" class="stx-modal-backdrop" data-stx-modal="${id}" data-close-backdrop="${closeOnBackdrop}" data-close-escape="${closeOnEscape}" style="display:none;position:fixed;inset:0;z-index:99999;align-items:center;justify-content:center;background:rgba(0,0,0,0.5);backdrop-filter:blur(2px);opacity:0;transition:opacity 0.2s ease" aria-modal="true" role="dialog">
+  <div class="stx-modal-panel" style="${maxWidth};width:100%;margin:1rem;border-radius:0.75rem;box-shadow:0 20px 60px rgba(0,0,0,0.3);overflow:hidden;transform:scale(0.95) translateY(8px);transition:transform 0.2s ease,opacity 0.2s ease;opacity:0;background:var(--stx-modal-bg,#fff);color:var(--stx-modal-text,#1f2937)">
+    <div style="padding:1.5rem">${slotContent}</div>
+  </div>
+</div>
+<style>
+@media(prefers-color-scheme:dark){[data-stx-modal]{--stx-modal-bg:#1f2937;--stx-modal-text:#f3f4f6}}
+.stx-modal-backdrop[data-stx-modal-open]{display:flex!important;opacity:1}
+.stx-modal-backdrop[data-stx-modal-open] .stx-modal-panel{transform:scale(1) translateY(0);opacity:1}
+</style>`;
+  }
+};

package/dist/builtins/safe-image.js

@@ -1,2 +1,51 @@
-// @bun
-import{hz as a}from"../chunk-vjbefncc.js";import"../chunk-xv34zbp4.js";export{a as SafeImageBuiltin};
+const DEFAULT_FALLBACK = "/images/safe-image-default.svg";
+function escapeAttr(value) {
+  return value.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+function resolveProp(props, key) {
+  if (props.serverDynamic[key] !== void 0)
+    return String(props.serverDynamic[key]);
+  const val = props.static[key];
+  if (typeof val === "string")
+    return val;
+  return;
+}
+const HANDLER_SCRIPT = `<script>window.__stxSafeImageHandler||(window.__stxSafeImageHandler=function(i){if(i.__stx_fb)return;i.__stx_fb=1;var f=i.getAttribute('data-fallback')||'${DEFAULT_FALLBACK}';var c=i.getAttribute('data-fallback-class');i.src=f;if(c)i.className=c;});</script>`;
+export const SafeImageBuiltin = {
+  name: "SafeImage",
+  aliases: ["safe-image", "safe-img"],
+  render(props, _slotContent, ctx) {
+    const src = resolveProp(props, "src") || "", alt = resolveProp(props, "alt") || "", fallback = resolveProp(props, "fallback") || DEFAULT_FALLBACK, className = resolveProp(props, "class") || resolveProp(props, "className") || "", fallbackClassName = resolveProp(props, "fallbackClassName") || "", imgAttrs = [];
+    imgAttrs.push(`src="${escapeAttr(src)}"`);
+    imgAttrs.push(`alt="${escapeAttr(alt)}"`);
+    if (className)
+      imgAttrs.push(`class="${escapeAttr(className)}"`);
+    imgAttrs.push(`data-fallback="${escapeAttr(fallback)}"`);
+    if (fallbackClassName)
+      imgAttrs.push(`data-fallback-class="${escapeAttr(fallbackClassName)}"`);
+    imgAttrs.push('onerror="window.__stxSafeImageHandler(this)"');
+    const consumed = new Set([
+      "src",
+      "alt",
+      "fallback",
+      "class",
+      "className",
+      "fallbackClassName"
+    ]);
+    for (const [key, value] of Object.entries(props.static)) {
+      if (consumed.has(key))
+        continue;
+      if (typeof value === "boolean") {
+        if (value)
+          imgAttrs.push(escapeAttr(key));
+      } else
+        imgAttrs.push(`${escapeAttr(key)}="${escapeAttr(value)}"`);
+    }
+    const imgTag = `<img ${imgAttrs.join(" ")} />`, renderCtx = ctx.context;
+    if (!renderCtx.__safeImageHandlerEmitted) {
+      renderCtx.__safeImageHandlerEmitted = !0;
+      return `${HANDLER_SCRIPT}${imgTag}`;
+    }
+    return imgTag;
+  }
+};

package/dist/builtins/stx-image.js

@@ -1,2 +1,200 @@
-// @bun
-import{iz as a}from"../chunk-8xj7c3mf.js";import"../chunk-xv34zbp4.js";export{a as StxImageBuiltin};
+const DEFAULT_BREAKPOINTS = {
+  sm: 640,
+  md: 768,
+  lg: 1024,
+  xl: 1280,
+  "2xl": 1536
+}, DEFAULT_SRCSET_WIDTHS = [320, 640, 768, 1024, 1280, 1536, 1920];
+function escapeAttr(value) {
+  return value.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+function resolveProp(props, key) {
+  if (props.serverDynamic[key] !== void 0)
+    return String(props.serverDynamic[key]);
+  const val = props.static[key];
+  if (typeof val === "string")
+    return val;
+  return;
+}
+function resolveBoolProp(props, key, defaultVal = !1) {
+  const dynamic = props.serverDynamic[key];
+  if (dynamic !== void 0)
+    return dynamic !== !1 && dynamic !== "false";
+  const stat = props.static[key];
+  if (stat !== void 0)
+    return stat !== "false" && stat !== !1;
+  return defaultVal;
+}
+function parseSizes(sizesStr) {
+  if (sizesStr.includes("(") || sizesStr.includes(","))
+    return sizesStr;
+  const parts = sizesStr.trim().split(/\s+/), conditions = [];
+  for (const part of parts)
+    if (part.includes(":")) {
+      const [bp, size] = part.split(":"), width = DEFAULT_BREAKPOINTS[bp];
+      if (width)
+        conditions.push(`(max-width: ${width}px) ${size}`);
+      else {
+        const numWidth = Number.parseInt(bp);
+        if (!Number.isNaN(numWidth))
+          conditions.push(`(max-width: ${numWidth}px) ${size}`);
+      }
+    } else
+      conditions.push(part);
+  return conditions.join(", ");
+}
+function generateSrcset(src, widths, provider, format) {
+  return widths.map((w) => `${transformSrc(src, w, void 0, provider, format)} ${w}w`).join(", ");
+}
+function generateDensitySrcset(src, densities, width, provider, format) {
+  return densities.map((d) => {
+    const w = width ? width * d : void 0;
+    return `${transformSrc(src, w, void 0, provider, format)} ${d}x`;
+  }).join(", ");
+}
+function transformSrc(src, width, height, provider, format) {
+  if (!provider || provider === "local" || provider === "static")
+    return src;
+  if (provider === "cloudinary") {
+    const transforms = [];
+    if (width)
+      transforms.push(`w_${width}`);
+    if (height)
+      transforms.push(`h_${height}`);
+    if (format)
+      transforms.push(`f_${format}`);
+    transforms.push("q_auto");
+    const transformStr = transforms.join(",");
+    return src.replace("/upload/", `/upload/${transformStr}/`);
+  }
+  if (provider === "imgix") {
+    const params = new URLSearchParams;
+    if (width)
+      params.set("w", String(width));
+    if (height)
+      params.set("h", String(height));
+    if (format)
+      params.set("fm", format);
+    params.set("auto", "format");
+    const sep = src.includes("?") ? "&" : "?";
+    return `${src}${sep}${params.toString()}`;
+  }
+  if (provider === "bunny") {
+    const params = new URLSearchParams;
+    if (width)
+      params.set("width", String(width));
+    if (height)
+      params.set("height", String(height));
+    if (format)
+      params.set("format", format);
+    const sep = src.includes("?") ? "&" : "?";
+    return `${src}${sep}${params.toString()}`;
+  }
+  return src;
+}
+function generateBlurPlaceholder(width, height, color = "#e5e7eb") {
+  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}"><rect width="100%" height="100%" fill="${color}"/></svg>`;
+  return `data:image/svg+xml;base64,${btoa(svg)}`;
+}
+export const StxImageBuiltin = {
+  name: "StxImage",
+  aliases: ["stx-image", "stx-img"],
+  render(props, _slotContent, _ctx) {
+    const src = resolveProp(props, "src") || "", alt = resolveProp(props, "alt") || "", width = resolveProp(props, "width"), height = resolveProp(props, "height"), sizes = resolveProp(props, "sizes"), srcset = resolveProp(props, "srcset"), densities = resolveProp(props, "densities"), format = resolveProp(props, "format"), placeholder = resolveProp(props, "placeholder"), placeholderColor = resolveProp(props, "placeholderColor") || "#e5e7eb", provider = resolveProp(props, "provider"), className = resolveProp(props, "class") || resolveProp(props, "className") || "", style = resolveProp(props, "style") || "", quality = resolveProp(props, "quality"), lazy = resolveBoolProp(props, "lazy", !0), preload = resolveBoolProp(props, "preload", !1), usePicture = resolveBoolProp(props, "picture", !1) || !!format, numWidth = width ? Number.parseInt(width) : void 0, numHeight = height ? Number.parseInt(height) : void 0;
+    let finalSrcset = srcset || "", finalSizes = "";
+    if (!finalSrcset && sizes) {
+      finalSrcset = generateSrcset(src, DEFAULT_SRCSET_WIDTHS, provider, format);
+      finalSizes = parseSizes(sizes);
+    } else if (!finalSrcset && densities) {
+      const densityValues = densities.split(/\s+/).map((d) => Number.parseFloat(d.replace("x", "")));
+      finalSrcset = generateDensitySrcset(src, densityValues, numWidth, provider, format);
+    } else if (sizes)
+      finalSizes = parseSizes(sizes);
+    const styles = [];
+    if (style)
+      styles.push(style);
+    if (numWidth && numHeight)
+      styles.push(`aspect-ratio:${numWidth}/${numHeight}`);
+    if (placeholder === "blur" || placeholder === "color" || placeholder === "thumbhash") {
+      const placeholderUrl = generateBlurPlaceholder(numWidth || 16, numHeight || 9, placeholderColor);
+      styles.push(`background-image:url(${placeholderUrl})`);
+      styles.push("background-size:cover");
+      styles.push("background-repeat:no-repeat");
+    } else if (placeholder && placeholder !== "empty" && placeholder !== "none") {
+      styles.push(`background-image:url(${escapeAttr(placeholder)})`);
+      styles.push("background-size:cover");
+      styles.push("background-repeat:no-repeat");
+    }
+    const finalSrc = transformSrc(src, numWidth, numHeight, provider, format), imgAttrs = [];
+    imgAttrs.push(`src="${escapeAttr(finalSrc)}"`);
+    imgAttrs.push(`alt="${escapeAttr(alt)}"`);
+    if (width)
+      imgAttrs.push(`width="${escapeAttr(width)}"`);
+    if (height)
+      imgAttrs.push(`height="${escapeAttr(height)}"`);
+    if (lazy)
+      imgAttrs.push('loading="lazy"');
+    imgAttrs.push('decoding="async"');
+    if (className)
+      imgAttrs.push(`class="${escapeAttr(className)}"`);
+    if (styles.length > 0)
+      imgAttrs.push(`style="${escapeAttr(styles.join(";"))}"`);
+    if (finalSrcset)
+      imgAttrs.push(`srcset="${escapeAttr(finalSrcset)}"`);
+    if (finalSizes)
+      imgAttrs.push(`sizes="${escapeAttr(finalSizes)}"`);
+    const consumedStatic = new Set([
+      "src",
+      "alt",
+      "width",
+      "height",
+      "lazy",
+      "sizes",
+      "srcset",
+      "placeholder",
+      "placeholderColor",
+      "class",
+      "className",
+      "style",
+      "format",
+      "provider",
+      "quality",
+      "densities",
+      "preload",
+      "picture"
+    ]);
+    for (const [key, value] of Object.entries(props.static)) {
+      if (consumedStatic.has(key))
+        continue;
+      if (typeof value === "boolean") {
+        if (value)
+          imgAttrs.push(escapeAttr(key));
+      } else
+        imgAttrs.push(`${escapeAttr(key)}="${escapeAttr(value)}"`);
+    }
+    const imgTag = `<img ${imgAttrs.join(" ")} />`;
+    let preloadTag = "";
+    if (preload) {
+      const preloadAs = "image", preloadType = format === "webp" ? "image/webp" : format === "avif" ? "image/avif" : "";
+      preloadTag = `<link rel="preload" as="${preloadAs}" href="${escapeAttr(finalSrc)}"${preloadType ? ` type="${preloadType}"` : ""}${finalSrcset ? ` imagesrcset="${escapeAttr(finalSrcset)}"` : ""}${finalSizes ? ` imagesizes="${escapeAttr(finalSizes)}"` : ""} />
+`;
+    }
+    if (usePicture) {
+      const sources = [];
+      if (format === "avif" || format === "auto") {
+        const avifSrc = transformSrc(src, numWidth, numHeight, provider, "avif"), avifSrcset = finalSrcset ? generateSrcset(src, DEFAULT_SRCSET_WIDTHS, provider, "avif") : `${avifSrc}`;
+        sources.push(`<source type="image/avif" srcset="${escapeAttr(avifSrcset)}"${finalSizes ? ` sizes="${escapeAttr(finalSizes)}"` : ""} />`);
+      }
+      if (format === "webp" || format === "auto") {
+        const webpSrc = transformSrc(src, numWidth, numHeight, provider, "webp"), webpSrcset = finalSrcset ? generateSrcset(src, DEFAULT_SRCSET_WIDTHS, provider, "webp") : `${webpSrc}`;
+        sources.push(`<source type="image/webp" srcset="${escapeAttr(webpSrcset)}"${finalSizes ? ` sizes="${escapeAttr(finalSizes)}"` : ""} />`);
+      }
+      return `${preloadTag}<picture>
+${sources.join(`
+`)}
+${imgTag}
+</picture>`;
+    }
+    return `${preloadTag}${imgTag}`;
+  }
+};

package/dist/builtins/stx-link.js

@@ -1,2 +1,41 @@
-// @bun
-import{Yy as a}from"../chunk-tzwtg722.js";import"../chunk-xv34zbp4.js";export{a as StxLinkBuiltin};
+function escapeAttr(value) {
+  return value.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+function resolveTo(props) {
+  if (props.clientReactive.to)
+    return { value: props.clientReactive.to, reactive: !0 };
+  if (props.serverDynamic.to !== void 0)
+    return { value: String(props.serverDynamic.to), reactive: !1 };
+  if (typeof props.static.to === "string")
+    return { value: props.static.to, reactive: !1 };
+  return { value: "#", reactive: !1 };
+}
+export const StxLinkBuiltin = {
+  name: "StxLink",
+  aliases: ["stx-link"],
+  render(props, slotContent, _ctx) {
+    const to = resolveTo(props), className = (typeof props.static.class === "string" ? props.static.class : "") || (typeof props.static.className === "string" ? props.static.className : ""), activeClass = typeof props.static.activeClass === "string" ? props.static.activeClass : "active", exactActiveClass = typeof props.static.exactActiveClass === "string" ? props.static.exactActiveClass : "exact-active", prefetch = props.static.prefetch === !0 || props.static.prefetch === "true" || props.serverDynamic.prefetch === !0, attrs = [];
+    if (to.reactive)
+      attrs.push(`:href="${escapeAttr(to.value)}"`);
+    else
+      attrs.push(`href="${escapeAttr(to.value)}"`);
+    if (className)
+      attrs.push(`class="${escapeAttr(className)}"`);
+    attrs.push("data-stx-link");
+    attrs.push(`data-stx-active-class="${escapeAttr(activeClass)}"`);
+    attrs.push(`data-stx-exact-active-class="${escapeAttr(exactActiveClass)}"`);
+    if (prefetch)
+      attrs.push("data-stx-prefetch");
+    const consumedStatic = new Set(["to", "class", "className", "activeClass", "exactActiveClass", "prefetch"]);
+    for (const [key, value] of Object.entries(props.static)) {
+      if (consumedStatic.has(key))
+        continue;
+      if (typeof value === "boolean") {
+        if (value)
+          attrs.push(escapeAttr(key));
+      } else
+        attrs.push(`${escapeAttr(key)}="${escapeAttr(value)}"`);
+    }
+    return `<a ${attrs.join(" ")}>${slotContent}</a>`;
+  }
+};

package/dist/builtins/stx-loading-indicator.js

@@ -1,2 +1,35 @@
-// @bun
-import{Zy as a}from"../chunk-ah88wzbg.js";import"../chunk-xv34zbp4.js";export{a as StxLoadingIndicatorBuiltin};
+function sanitizeCss(value) {
+  return value.replace(/[;{}()]/g, "").replace(/url/gi, "");
+}
+function resolveProp(props, key) {
+  if (props.serverDynamic[key] !== void 0)
+    return String(props.serverDynamic[key]);
+  const val = props.static[key];
+  if (typeof val === "string")
+    return val;
+  return;
+}
+function resolveNumericProp(props, key, defaultValue) {
+  const raw = resolveProp(props, key);
+  if (raw !== void 0) {
+    const parsed = Number.parseInt(raw, 10);
+    if (!Number.isNaN(parsed))
+      return parsed;
+  }
+  return defaultValue;
+}
+export const StxLoadingIndicatorBuiltin = {
+  name: "StxLoadingIndicator",
+  aliases: ["stx-loading-indicator"],
+  render(props, _slotContent, _ctx) {
+    const color = sanitizeCss(resolveProp(props, "color") || "#6366f1"), initialColor = sanitizeCss(resolveProp(props, "initialColor") || resolveProp(props, "initial-color") || ""), height = sanitizeCss(resolveProp(props, "height") || "3px"), duration = resolveNumericProp(props, "duration", 2000), throttle = resolveNumericProp(props, "throttle", 200), zIndex = resolveNumericProp(props, "zIndex", 999999) || resolveNumericProp(props, "z-index", 999999), gradient = initialColor ? `linear-gradient(to right, ${initialColor}, ${color})` : color;
+    return `
+<div id="stx-loading-indicator" style="position:fixed;top:0;left:0;right:0;height:${height};background:${gradient};z-index:${zIndex};transform:scaleX(0);transform-origin:left;transition:transform 0.1s ease-out,opacity 0.3s ease;opacity:0;pointer-events:none">
+  <div style="position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,0.4) 50%,transparent 100%);animation:stx-shimmer 1.5s infinite"></div>
+</div>
+<style>@keyframes stx-shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}</style>
+<script>
+(function(){var el=document.getElementById('stx-loading-indicator'),p=0,l=!1,i=null;function u(v){p=Math.min(Math.max(v,0),100);if(el){el.style.opacity=p>0?'1':'0';el.style.transform='scaleX('+(p/100)+')'}}window.stxLoading={start:function(){l=!0;p=0;u(10);if(i)clearInterval(i);i=setInterval(function(){if(!l)return;var r=90-p,inc=Math.max(0.5,r*0.1);if(p<90)u(p+inc)},${throttle})},finish:function(){l=!1;if(i){clearInterval(i);i=null}u(100);setTimeout(function(){if(el)el.style.opacity='0';setTimeout(function(){p=0;if(el)el.style.transform='scaleX(0)'},300)},200)},set:function(v){u(v)},clear:function(){l=!1;p=0;if(i){clearInterval(i);i=null}if(el){el.style.opacity='0';el.style.transform='scaleX(0)'}}};document.addEventListener('click',function(e){var a=e.target.closest&&e.target.closest('a');if(!a)return;var h=a.getAttribute('href');if(!h||h.startsWith('http')||h.startsWith('#')||h.startsWith('mailto:')||h.startsWith('tel:')||a.target==='_blank')return;window.stxLoading.start()});window.addEventListener('popstate',function(){window.stxLoading.start()});window.addEventListener('load',function(){window.stxLoading.finish()})})();
+</script>`;
+  }
+};

package/dist/builtins/suspense.js

@@ -1,2 +1,24 @@
-// @bun
-import{_y as a}from"../chunk-v8j49spx.js";import"../chunk-xv34zbp4.js";export{a as SuspenseBuiltin};
+function resolveProp(props, ...keys) {
+  for (const key of keys) {
+    if (props.serverDynamic[key] !== void 0)
+      return String(props.serverDynamic[key]);
+    const val = props.static[key];
+    if (typeof val === "string")
+      return val;
+  }
+  return;
+}
+function extractSlot(content, name) {
+  const re = new RegExp(`<(template|div|span)[^>]*\\bslot=["']${name}["'][^>]*>([\\s\\S]*?)<\\/\\1>`, "i"), m = content.match(re);
+  if (!m)
+    return { region: null, rest: content };
+  return { region: m[2], rest: content.replace(m[0], "") };
+}
+export const SuspenseBuiltin = {
+  name: "Suspense",
+  aliases: ["suspense"],
+  render(props, slotContent, _ctx) {
+    const fallbackSlot = extractSlot(slotContent, "fallback"), afterFallback = fallbackSlot.rest, errorSlot = extractSlot(afterFallback, "error"), content = errorSlot.rest, fallback = fallbackSlot.region ?? resolveProp(props, "fallback") ?? '<div class="stx-suspense-loading">Loading\u2026</div>', errorFallback = errorSlot.region ?? resolveProp(props, "errorFallback", "error-fallback") ?? '<div class="stx-suspense-error">Something went wrong.</div>';
+    return `<div data-stx-suspense><div data-stx-suspense-fallback>${fallback}</div><div data-stx-suspense-error hidden>${errorFallback}</div><div data-stx-suspense-content hidden>${content}</div></div>`;
+  }
+};

package/dist/builtins/toast.js

@@ -1,2 +1,42 @@
-// @bun
-import{$y as a}from"../chunk-tg2f1mzq.js";import"../chunk-gz5fmp3q.js";import"../chunk-xv34zbp4.js";export{a as StxToastBuiltin};
+import { escapeAttr } from "./escape.js";
+function resolveProp(props, key) {
+  if (props.serverDynamic[key] !== void 0)
+    return String(props.serverDynamic[key]);
+  const val = props.static[key];
+  if (typeof val === "string")
+    return val;
+  return;
+}
+function resolveNumericProp(props, key, defaultValue) {
+  const raw = resolveProp(props, key);
+  if (raw !== void 0) {
+    const parsed = Number.parseInt(raw, 10);
+    if (!Number.isNaN(parsed))
+      return parsed;
+  }
+  return defaultValue;
+}
+const POSITION_STYLES = {
+  "top-right": "top:1rem;right:1rem",
+  "top-left": "top:1rem;left:1rem",
+  "top-center": "top:1rem;left:50%;transform:translateX(-50%)",
+  "bottom-right": "bottom:1rem;right:1rem",
+  "bottom-left": "bottom:1rem;left:1rem",
+  "bottom-center": "bottom:1rem;left:50%;transform:translateX(-50%)"
+};
+export const StxToastBuiltin = {
+  name: "StxToast",
+  aliases: ["stx-toast"],
+  render(props, _slotContent, _ctx) {
+    const position = escapeAttr(resolveProp(props, "position") || "top-right"), max = resolveNumericProp(props, "max", 5), posStyle = POSITION_STYLES[position] || POSITION_STYLES["top-right"];
+    return `<div id="stx-toast-container" data-stx-toast-position="${position}" data-stx-toast-max="${max}" style="position:fixed;${posStyle};z-index:999999;display:flex;flex-direction:column;gap:0.5rem;pointer-events:none;max-width:24rem;width:100%"></div>
+<style>
+@keyframes stx-toast-in{from{opacity:0;transform:translateX(100%)}to{opacity:1;transform:translateX(0)}}
+@keyframes stx-toast-out{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(100%)}}
+@keyframes stx-toast-in-left{from{opacity:0;transform:translateX(-100%)}to{opacity:1;transform:translateX(0)}}
+@keyframes stx-toast-out-left{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(-100%)}}
+@keyframes stx-toast-in-center{from{opacity:0;transform:translateY(-1rem)}to{opacity:1;transform:translateY(0)}}
+@keyframes stx-toast-out-center{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-1rem)}}
+</style>`;
+  }
+};