@ohos-ports/stacksjs-stx 0.2.287-beta.0

package/dist/builtins/stx-image.js

@@ -0,0 +1,222 @@
+import { forwardResolvedAttrs, forwardStaticAttrs } from "./attrs.js";
+import { getImageDelivery } from "./image-delivery.js";
+import { getImagePlaceholder } from "./image-placeholder.js";
+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 efficientDeliverySources(delivery) {
+  const bytesByFormat = (format) => delivery.variants.filter((variant) => variant.format === format).reduce((total, variant) => total + variant.bytes, 0), fallbackBytes = bytesByFormat(delivery.fallback.format);
+  return ["avif", "webp"].map((format) => ({ format, srcset: delivery.sources[format] || "", bytes: bytesByFormat(format) })).filter((candidate) => candidate.srcset && candidate.bytes > 0 && candidate.bytes < fallbackBytes).sort((a, b) => a.bytes - b.bytes).map(({ format, srcset }) => ({ format, srcset }));
+}
+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: ["Image", "stx-image", "stx-img"],
+  render(props, _slotContent, _ctx) {
+    const src = resolveProp(props, "src") || "", delivery = getImageDelivery(src), alt = resolveProp(props, "alt") || "", width = resolveProp(props, "width") || (delivery ? String(delivery.source.width) : void 0), height = resolveProp(props, "height") || (delivery ? String(delivery.source.height) : void 0), sizes = resolveProp(props, "sizes"), srcset = resolveProp(props, "srcset"), densities = resolveProp(props, "densities"), format = resolveProp(props, "format"), placeholder = resolveProp(props, "placeholder") || (delivery ? "thumbhash" : void 0), 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), priority = resolveBoolProp(props, "priority", !1), explicitLoading = resolveProp(props, "loading"), decoding = resolveProp(props, "decoding") || "async", usePicture = !!delivery || resolveBoolProp(props, "picture", !1) || !!format, numWidth = width ? Number.parseInt(width) : void 0, numHeight = height ? Number.parseInt(height) : void 0;
+    let finalSrcset = srcset || "", finalSizes = "";
+    if (delivery) {
+      finalSrcset = delivery.sources[delivery.fallback.format] || "";
+      finalSizes = sizes ? parseSizes(sizes) : "100vw";
+    } else if (!finalSrcset && sizes && provider && provider !== "local" && provider !== "static") {
+      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 derived = delivery?.placeholder ? { dataUrl: delivery.placeholder.dataUrl, color: placeholderColor } : getImagePlaceholder(src);
+      if (derived && placeholder === "color")
+        styles.push(`background-color:${derived.color}`);
+      else if (derived) {
+        styles.push(`background-color:${derived.color}`);
+        styles.push(`background-image:url(${derived.dataUrl})`);
+        styles.push("background-size:cover");
+        styles.push("background-repeat:no-repeat");
+      } else {
+        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 = delivery?.fallback.url || 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)}"`);
+    const loading = explicitLoading || (priority || preload ? "eager" : lazy ? "lazy" : "");
+    if (loading)
+      imgAttrs.push(`loading="${escapeAttr(loading)}"`);
+    if (priority)
+      imgAttrs.push('fetchpriority="high"');
+    imgAttrs.push(`decoding="${escapeAttr(decoding)}"`);
+    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",
+      "priority",
+      "picture",
+      "loading",
+      "decoding"
+    ]);
+    imgAttrs.push(...forwardStaticAttrs(props, consumedStatic));
+    imgAttrs.push(...forwardResolvedAttrs(props, consumedStatic));
+    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 (delivery)
+        for (const candidate of efficientDeliverySources(delivery))
+          sources.push(`<source type="image/${candidate.format}" srcset="${escapeAttr(candidate.srcset)}"${finalSizes ? ` sizes="${escapeAttr(finalSizes)}"` : ""} />`);
+      if (!delivery && (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 (!delivery && (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.d.ts

@@ -0,0 +1,11 @@
+/**
+ * StxLink Builtin Component
+ *
+ * Renders a client-side navigation-aware `<a>` element with support for
+ * active class management, prefetching, and reactive href bindings.
+ * Produces plain HTML — no wrapper component or custom element overhead.
+ *
+ * @module builtins/stx-link
+ */
+import type { BuiltinComponentDef } from '../component-registry';
+export declare const StxLinkBuiltin: BuiltinComponentDef;

package/dist/builtins/stx-link.js

@@ -0,0 +1,35 @@
+import { forwardResolvedAttrs, forwardStaticAttrs } from "./attrs.js";
+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"]);
+    attrs.push(...forwardStaticAttrs(props, consumedStatic));
+    attrs.push(...forwardResolvedAttrs(props, consumedStatic));
+    return `<a ${attrs.join(" ")}>${slotContent}</a>`;
+  }
+};

package/dist/builtins/stx-loading-indicator.d.ts

@@ -0,0 +1,13 @@
+/**
+ * StxLoadingIndicator Builtin Component
+ *
+ * Renders a fixed-position progress bar at the top of the viewport that
+ * activates on navigation. Includes shimmer animation, automatic
+ * link-click interception, and a global `window.stxLoading` API.
+ *
+ * Ported from the inline implementation in component-processing.ts.
+ *
+ * @module builtins/stx-loading-indicator
+ */
+import type { BuiltinComponentDef } from '../component-registry';
+export declare const StxLoadingIndicatorBuiltin: BuiltinComponentDef;

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

@@ -0,0 +1,35 @@
+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.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Suspense Builtin Component (stacksjs/stx#1742)
+ *
+ * A client loading boundary. Renders three regions that the signals runtime
+ * (`bindSuspense`) toggles based on the aggregated state of descendant suspense
+ * queries (`useQuery` / `useFetch` with `{ suspense: true }`):
+ *
+ *   - `[data-stx-suspense-fallback]` — shown while any descendant query loads
+ *   - `[data-stx-suspense-error]`    — shown when a descendant query errors
+ *   - `[data-stx-suspense-content]`  — shown once all descendant queries resolve
+ *
+ * The default slot is the content; `fallback` / `errorFallback` come from props
+ * or from `slot="fallback"` / `slot="error"` elements in the slot content.
+ *
+ * ```stx
+ * <Suspense fallback="Loading…">
+ *   <CommentsList />   <!-- uses useQuery(url, { suspense: true }) -->
+ * </Suspense>
+ *
+ * <Suspense>
+ *   <template slot="fallback"><Skeleton count="2" /></template>
+ *   <template slot="error">Couldn't load comments.</template>
+ *   <CommentsList />
+ * </Suspense>
+ * ```
+ *
+ * @module builtins/suspense
+ */
+import type { BuiltinComponentDef } from '../component-registry';
+export declare const SuspenseBuiltin: BuiltinComponentDef;

package/dist/builtins/suspense.js

@@ -0,0 +1,24 @@
+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.d.ts

@@ -0,0 +1,19 @@
+/**
+ * StxToast Builtin Component
+ *
+ * Renders a fixed-position toast notification container. The runtime
+ * `toast()` global (success / error / info / warning / dismiss) creates
+ * and animates individual toast elements inside this container.
+ *
+ * Usage:
+ *   <StxToast />
+ *   <StxToast position="top-right" max="5" />
+ *   <StxToast position="bottom-left" />
+ *
+ * Positions: top-right (default), top-left, top-center,
+ *            bottom-right, bottom-left, bottom-center
+ *
+ * @module builtins/toast
+ */
+import type { BuiltinComponentDef } from '../component-registry';
+export declare const StxToastBuiltin: BuiltinComponentDef;

package/dist/builtins/toast.js

@@ -0,0 +1,42 @@
+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>`;
+  }
+};

package/dist/builtins/tooltip.d.ts

@@ -0,0 +1,18 @@
+/**
+ * x-tooltip Directive Runtime
+ *
+ * Provides a lightweight tooltip directive for the signals runtime.
+ * Uses event delegation with a single shared tooltip element.
+ *
+ * Usage:
+ *   <button x-tooltip="Save changes">Save</button>
+ *   <button x-tooltip="Delete item" x-tooltip-position="bottom">Delete</button>
+ *   <span x-tooltip="Copy to clipboard" x-tooltip-position="left">Copy</span>
+ *   <span x-tooltip="More info" x-tooltip-position="right">Info</span>
+ *
+ * Positions: top (default), bottom, left, right
+ * Override with x-tooltip-position attribute.
+ *
+ * @module builtins/tooltip
+ */
+export declare function getTooltipRuntime(): string;

package/dist/builtins/tooltip.js

@@ -0,0 +1,106 @@
+export function getTooltipRuntime() {
+  return `
+(function(){
+var tip=null,hideTimer=null,currentEl=null;
+
+function createTip(){
+  tip=document.createElement("div");
+  tip.id="stx-tooltip";
+  tip.style.cssText="position:absolute;background:#1f2937;color:#fff;font-size:12px;line-height:1.4;padding:6px 10px;border-radius:6px;max-width:250px;z-index:999999;pointer-events:none;opacity:0;transition:opacity .15s ease;white-space:pre-wrap;word-wrap:break-word;box-shadow:0 2px 8px rgba(0,0,0,.25)";
+  var arrow=document.createElement("div");
+  arrow.className="stx-tip-arrow";
+  arrow.style.cssText="position:absolute;width:0;height:0;border:5px solid transparent";
+  tip.appendChild(arrow);
+  var text=document.createElement("span");
+  text.className="stx-tip-text";
+  tip.appendChild(text);
+  document.body.appendChild(tip);
+}
+
+function position(el){
+  var pos=el.getAttribute("x-tooltip-position")||"top";
+  var r=el.getBoundingClientRect();
+  var sy=window.scrollY,sx=window.scrollX;
+  tip.style.display="block";
+  tip.style.opacity="0";
+  // Force layout so we can measure
+  var tw=tip.offsetWidth,th=tip.offsetHeight;
+  var arrow=tip.querySelector(".stx-tip-arrow");
+  var left,top;
+
+  if(pos==="top"){
+    left=r.left+r.width/2-tw/2+sx;
+    top=r.top-th-8+sy;
+    if(top-sy<0){pos="bottom";}
+  }
+  if(pos==="bottom"){
+    left=r.left+r.width/2-tw/2+sx;
+    top=r.bottom+8+sy;
+    arrow.style.cssText="position:absolute;width:0;height:0;border:5px solid transparent;border-bottom-color:#1f2937;top:-10px;left:50%;transform:translateX(-50%)";
+  }
+  if(pos==="left"){
+    left=r.left-tw-8+sx;
+    top=r.top+r.height/2-th/2+sy;
+    if(left-sx<0){pos="right";}
+  }
+  if(pos==="right"){
+    left=r.right+8+sx;
+    top=r.top+r.height/2-th/2+sy;
+    arrow.style.cssText="position:absolute;width:0;height:0;border:5px solid transparent;border-right-color:#1f2937;left:-10px;top:50%;transform:translateY(-50%)";
+  }
+
+  // Set arrow for top/left after potential flips
+  if(pos==="top"){
+    arrow.style.cssText="position:absolute;width:0;height:0;border:5px solid transparent;border-top-color:#1f2937;bottom:-10px;left:50%;transform:translateX(-50%)";
+  }
+  if(pos==="left"){
+    arrow.style.cssText="position:absolute;width:0;height:0;border:5px solid transparent;border-left-color:#1f2937;right:-10px;top:50%;transform:translateY(-50%)";
+  }
+
+  // Clamp horizontal
+  if(left<sx+4) left=sx+4;
+  if(left+tw>sx+window.innerWidth-4) left=sx+window.innerWidth-tw-4;
+
+  tip.style.left=left+"px";
+  tip.style.top=top+"px";
+  tip.style.opacity="1";
+}
+
+function showTip(el){
+  if(hideTimer){clearTimeout(hideTimer);hideTimer=null;}
+  if(!tip) createTip();
+  var text=el.getAttribute("x-tooltip");
+  if(!text) return;
+  tip.querySelector(".stx-tip-text").textContent=text;
+  currentEl=el;
+  position(el);
+}
+
+function hideTip(){
+  if(!tip) return;
+  tip.style.opacity="0";
+  hideTimer=setTimeout(function(){
+    if(tip) tip.style.display="none";
+    currentEl=null;
+  },150);
+}
+
+document.addEventListener("mouseover",function(e){
+  var el=e.target.closest("[x-tooltip]");
+  if(el) showTip(el);
+});
+document.addEventListener("mouseout",function(e){
+  var el=e.target.closest("[x-tooltip]");
+  if(el&&el===currentEl) hideTip();
+});
+document.addEventListener("focusin",function(e){
+  var el=e.target.closest("[x-tooltip]");
+  if(el) showTip(el);
+});
+document.addEventListener("focusout",function(e){
+  var el=e.target.closest("[x-tooltip]");
+  if(el) hideTip();
+});
+})();
+`;
+}

package/dist/builtins/transition-group.d.ts

@@ -0,0 +1,27 @@
+/**
+ * TransitionGroup Builtin Component (stacksjs/stx#1742)
+ *
+ * Class-driven enter/leave + FLIP move animations for a keyed list. Renders a
+ * single wrapper element marked `data-stx-transition-group="<name>"`; the
+ * signals runtime's `bindFor` animates the list items inside it when they are
+ * added, removed, or reordered.
+ *
+ * The default slot must contain a single `:for` (or `x-for`) element whose
+ * rendered items become the wrapper's direct children:
+ *
+ * ```stx
+ * <TransitionGroup name="card" tag="ul" class="space-y-2">
+ *   <li :for="r in reviews()" :key="r.id" class="card">{{ r.title }}</li>
+ * </TransitionGroup>
+ * ```
+ *
+ * With `name="card"`, supply the transition classes (e.g. via css/CSS):
+ * `card-enter-from` / `card-enter-active` / `card-enter-to`,
+ * `card-leave-from` / `card-leave-active` / `card-leave-to`, and `card-move`
+ * (applied to elements that shift position during a reorder). The first render
+ * does not animate; subsequent list changes do.
+ *
+ * @module builtins/transition-group
+ */
+import type { BuiltinComponentDef } from '../component-registry';
+export declare const TransitionGroupBuiltin: BuiltinComponentDef;

package/dist/builtins/transition-group.js

@@ -0,0 +1,22 @@
+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;
+}
+export const TransitionGroupBuiltin = {
+  name: "TransitionGroup",
+  aliases: ["transition-group"],
+  render(props, slotContent, _ctx) {
+    const name = (resolveProp(props, "name") || "v").replace(/["'<>]/g, ""), tag = (resolveProp(props, "tag") || "div").replace(/[^a-z0-9-]/gi, "") || "div", cls = resolveProp(props, "class"), id = resolveProp(props, "id"), attrs = [
+      `data-stx-transition-group="${name}"`,
+      cls ? `class="${cls}"` : "",
+      id ? `id="${id}"` : ""
+    ].filter(Boolean).join(" ");
+    return `<${tag} ${attrs}>${slotContent}</${tag}>`;
+  }
+};