@tachui/primitives 0.8.16 → 0.8.18

package/dist/{ScrollView-CtvxVuuS.js → ScrollView-4WhOoZol.js}

@@ -1,29 +1,73 @@
-import { withModifiers as f, ComponentWithCSSClasses as z, processElementOverride as H, createSignal as b, useLifecycle as $, registerComponentWithLifecycleHooks as M, h as m, createEffect as v, ConcatenatedComponent as O, text as W, isSignal as S } from "@tachui/core";
-import { isSignal as Y, isComputed as D } from "@tachui/core/reactive";
-import { aspectRatio as A } from "@tachui/modifiers";
-var F = Object.defineProperty, V = (e, t, s) => t in e ? F(e, t, { enumerable: !0, configurable: !0, writable: !0, value: s }) : e[t] = s, u = (e, t, s) => V(e, typeof t != "symbol" ? t + "" : t, s);
-function x(e) {
+import { withModifiers as f, ComponentWithCSSClasses as V, processElementOverride as D, createSignal as w, useLifecycle as k, registerComponentWithLifecycleHooks as F, h as v, createEffect as y, ConcatenatedComponent as A, sanitizeSVG as N, text as Y, isSignal as b } from "@tachui/core";
+import { isSignal as x, isComputed as z } from "@tachui/core/reactive";
+import { aspectRatio as $ } from "@tachui/modifiers";
+var B = Object.defineProperty, j = (e, t, s) => t in e ? B(e, t, { enumerable: !0, configurable: !0, writable: !0, value: s }) : e[t] = s, m = (e, t, s) => j(e, typeof t != "symbol" ? t + "" : t, s);
+const M = /* @__PURE__ */ new Map(), L = /* @__PURE__ */ new Map();
+function H(e) {
   return typeof e == "object" && e !== null && typeof e.resolve == "function";
 }
-function k(e) {
-  return e && (x(e) ? e.resolve() : e);
+function G(e) {
+  return e && (H(e) ? e.resolve() : e);
 }
-class B extends z {
+function R(e) {
+  if (e !== void 0)
+    return x(e) || z(e) ? e() : e;
+}
+function X(e) {
+  if (e)
+    return H(e) ? e.resolve() : x(e) || z(e) ? e() : e;
+}
+function q(e) {
+  if (process.env.NODE_ENV === "production") return;
+  const t = [];
+  e.loadingStrategy !== void 0 && t.push("loadingStrategy"), e.decoding !== void 0 && t.push("decoding"), e.fetchPriority !== void 0 && t.push("fetchPriority"), e.crossOrigin !== void 0 && t.push("crossOrigin"), e.contentMode !== void 0 && t.push("contentMode"), e.resizeMode !== void 0 && t.push("resizeMode"), t.length > 0 && console.warn(
+    `Image(template): unsupported props ignored: ${t.join(", ")}`
+  );
+}
+async function U(e, t) {
+  if (M.has(e))
+    return M.get(e);
+  if (L.has(e))
+    return L.get(e);
+  const s = fetch(e).then(async (o) => {
+    if (!o.ok)
+      throw new Error(`Failed to load SVG: ${o.status}`);
+    const i = await o.text(), r = t ? t(i) : N(i);
+    if (!r || !/<svg[\s>]/i.test(r))
+      throw new Error("Sanitized SVG missing root <svg>");
+    return M.set(e, r), r;
+  }).finally(() => {
+    L.delete(e);
+  });
+  return L.set(e, s), s;
+}
+class J extends V {
   constructor(t) {
-    super(), this.props = t, u(this, "type", "component"), u(this, "id"), u(this, "mounted", !1), u(this, "cleanup", []), u(this, "effectiveTag"), u(this, "validationResult"), u(this, "loadingStateSignal"), u(this, "setLoadingState"), this.id = `image-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
-    const s = H("Image", "img", this.props.element);
+    super(), this.props = t, m(this, "type", "component"), m(this, "id"), m(this, "mounted", !1), m(this, "cleanup", []), m(this, "effectiveTag"), m(this, "validationResult"), m(this, "loadingStateSignal"), m(this, "setLoadingState"), this.id = `image-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+    const s = D("Image", "img", this.props.element);
     if (this.effectiveTag = s.tag, this.validationResult = s.validation, this.props.loadingState)
-      this.loadingStateSignal = this.props.loadingState, this.setLoadingState = (i) => {
+      this.loadingStateSignal = this.props.loadingState, this.setLoadingState = (o) => {
       };
     else {
-      const i = this.props.src ? "idle" : "error", [o, r] = b(i);
-      this.loadingStateSignal = o, this.setLoadingState = r;
+      const o = this.props.src ? "idle" : "error", [i, r] = w(o);
+      this.loadingStateSignal = i, this.setLoadingState = r;
     }
-    $(this, {
-      onDOMReady: (i, o) => {
-        o instanceof HTMLImageElement && this.setupLoadingStateReactivityForDOMElement(o);
+    k(this, {
+      onDOMReady: (o, i) => {
+        const r = this.props.renderingMode ?? "original";
+        if (r === "template" && i instanceof HTMLSpanElement) {
+          this.setupTemplateModeReactivityForDOMElement(i);
+          return;
+        }
+        if (r === "template") {
+          process.env.NODE_ENV !== "production" && console.warn(
+            "Image(template): expected HTMLSpanElement primary element; skipping mismatched lifecycle binding."
+          ), this.setLoadingStateWithCallback("error"), this.props.onError?.(new Event("error"));
+          return;
+        }
+        i instanceof HTMLImageElement && this.setupLoadingStateReactivityForDOMElement(i);
       }
-    }), M(this);
+    }), F(this);
   }
   /**
    * Set loading state and notify callback
@@ -38,7 +82,7 @@ class B extends z {
     const t = this.loadingStateSignal();
     if (t === "loading" && this.props.placeholder) {
       if (typeof this.props.placeholder == "string")
-        return [m("img", {
+        return [v("img", {
           class: "tachui-image-placeholder",
           src: this.props.placeholder,
           alt: "Loading..."
@@ -48,7 +92,7 @@ class B extends z {
     }
     if (t === "error" && this.props.errorPlaceholder) {
       if (typeof this.props.errorPlaceholder == "string")
-        return [m("img", {
+        return [v("img", {
           class: "tachui-image-error",
           src: this.props.errorPlaceholder,
           alt: "Error loading image"
@@ -56,17 +100,30 @@ class B extends z {
       if (this.props.errorPlaceholder && typeof this.props.errorPlaceholder == "object")
         return this.props.errorPlaceholder.render();
     }
-    const s = k(this.props.src), i = ["tachui-image"], o = this.createClassString(this.props, i), r = m(this.effectiveTag, {
-      className: o,
-      src: s,
-      // Pass resolved src for initial render
-      alt: this.props.alt,
-      // Pass reactive alt directly
-      loading: this.props.loadingStrategy || "lazy",
-      crossorigin: this.props.crossOrigin,
-      decoding: this.props.decoding || "async",
-      fetchpriority: this.props.fetchPriority
-    });
+    const s = ["tachui-image"], o = this.createClassString(this.props, s), i = this.props.renderingMode ?? "original";
+    let r;
+    if (i === "template") {
+      q(this.props);
+      const n = R(this.props.alt), p = !!R(this.props.decorative) || n === "";
+      r = v("span", {
+        className: `${o} tachui-image-template`,
+        role: "img",
+        ...p ? { "aria-hidden": "true" } : { "aria-label": n || this.props.accessibilityLabel || "Image" }
+      });
+    } else {
+      const n = G(this.props.src);
+      r = v(this.effectiveTag, {
+        className: o,
+        src: n,
+        // Pass resolved src for initial render
+        alt: this.props.alt,
+        // Pass reactive alt directly
+        loading: this.props.loadingStrategy || "lazy",
+        crossorigin: this.props.crossOrigin,
+        decoding: this.props.decoding || "async",
+        fetchpriority: this.props.fetchPriority
+      });
+    }
     return r.componentMetadata = {
       id: this.id,
       type: "Image",
@@ -79,41 +136,70 @@ class B extends z {
    * Set up ImageAsset reactivity for a real DOM element (called from onDOMReady)
    */
   setupImageAssetReactivityForDOMElement(t, s) {
-    const i = v(() => {
-      const o = t.resolve();
-      this.props.onLoadStart?.(), this.setLoadingStateWithCallback("loading"), s.src = o;
+    const o = y(() => {
+      const i = t.resolve();
+      this.props.onLoadStart?.(), this.setLoadingStateWithCallback("loading"), s.src = i;
+    });
+    this.cleanup.push(() => o.dispose());
+  }
+  setupTemplateModeReactivityForDOMElement(t) {
+    let s = 0;
+    const o = y(() => {
+      const r = R(this.props.alt) ?? this.props.accessibilityLabel, n = !!R(this.props.decorative) || r === "";
+      t.setAttribute("role", "img"), n ? (t.setAttribute("aria-hidden", "true"), t.removeAttribute("aria-label")) : (t.removeAttribute("aria-hidden"), t.setAttribute("aria-label", r || "Image"));
+    });
+    this.cleanup.push(() => o.dispose());
+    const i = y(() => {
+      const r = X(this.props.src), n = ++s;
+      if (!r) {
+        t.innerHTML = "", this.setLoadingStateWithCallback("error"), this.props.onError?.(new Event("error"));
+        return;
+      }
+      this.props.onLoadStart?.(), this.setLoadingStateWithCallback("loading"), U(r, this.props.customSanitizer).then((p) => {
+        if (n !== s)
+          return;
+        t.innerHTML = p;
+        const u = t.querySelector("svg");
+        if (!(u instanceof SVGElement))
+          throw new Error("No <svg> root after template injection");
+        u.setAttribute("aria-hidden", "true"), u.setAttribute("focusable", "false"), u.setAttribute("width", "100%"), u.setAttribute("height", "100%"), this.setLoadingStateWithCallback("loaded"), this.props.onLoad?.(new Event("load"));
+      }).catch((p) => {
+        n === s && (this.setLoadingStateWithCallback("error"), this.props.onError?.(new Event("error")));
+      });
+    });
+    this.cleanup.push(() => {
+      i.dispose(), s = Number.POSITIVE_INFINITY;
     });
-    this.cleanup.push(() => i.dispose());
   }
   setupLoadingStateReactivityForDOMElement(t) {
     const s = (n) => {
       this.setLoadingStateWithCallback("loaded"), this.props.onLoad?.(n);
-    }, i = (n) => {
+    }, o = (n) => {
       this.setLoadingStateWithCallback("error"), this.props.onError?.(n);
     };
-    t.addEventListener("load", s), t.addEventListener("error", i), this.cleanup.push(() => {
-      t.removeEventListener("load", s), t.removeEventListener("error", i);
+    t.addEventListener("load", s), t.addEventListener("error", o), this.cleanup.push(() => {
+      t.removeEventListener("load", s), t.removeEventListener("error", o);
     });
-    const o = (n) => {
+    const i = (n) => {
       if (!n) {
         t.src = "", this.setLoadingStateWithCallback("error");
         return;
       }
       this.props.onLoadStart?.(), this.setLoadingStateWithCallback("loading"), t.src = n;
     };
-    if (x(this.props.src)) {
+    if (H(this.props.src)) {
       this.setupImageAssetReactivityForDOMElement(this.props.src, t);
       return;
     }
     const r = this.props.src;
-    if (Y(r) || D(r)) {
-      const n = v(() => {
-        o(r());
+    if (x(r) || z(r)) {
+      const n = y(() => {
+        i(r());
       });
       this.cleanup.push(() => n.dispose());
       return;
     }
-    o(
+    i(
       typeof this.props.src == "string" ? this.props.src : void 0
     );
   }
@@ -124,16 +210,16 @@ class B extends z {
    * Concatenate this image with another concatenatable component
    */
   concat(t) {
-    const s = this.toSegment(), i = t.toSegment(), o = {
-      totalSegments: t instanceof O ? t.segments.length + 1 : 2,
-      accessibilityRole: t instanceof O ? this.mergeAccessibilityRoles(
+    const s = this.toSegment(), o = t.toSegment(), i = {
+      totalSegments: t instanceof A ? t.segments.length + 1 : 2,
+      accessibilityRole: t instanceof A ? this.mergeAccessibilityRoles(
         "group",
         t.metadata.accessibilityRole
       ) : this.determineAccessibilityRole(t),
       semanticStructure: "inline"
       // Images are typically inline in concatenation
     };
-    return new O([s, i], o);
+    return new A([s, o], i);
   }
   /**
    * Convert this image to a segment for concatenation
@@ -183,44 +269,44 @@ class B extends z {
   }
 }
 function P(e, t = {}) {
-  const s = { ...t, src: e }, i = new B(s), o = f(i), r = (n) => {
+  const s = { ...t, src: e }, o = new J(s), i = f(o), r = (n) => {
     if (n && Array.isArray(n.modifiers))
       return n;
     if (n?._modifiableComponent && Array.isArray(n._modifiableComponent.modifiers))
       return n._modifiableComponent;
-    if (Array.isArray(o?.modifiers))
-      return o;
-    if (o?._modifiableComponent && Array.isArray(o._modifiableComponent.modifiers))
-      return o._modifiableComponent;
+    if (Array.isArray(i?.modifiers))
+      return i;
+    if (i?._modifiableComponent && Array.isArray(i._modifiableComponent.modifiers))
+      return i._modifiableComponent;
     throw new Error("Image shorthand target is not modifiable");
   };
-  return o.scaledToFit = function() {
-    return r(this).modifiers.push(A(void 0, "fit")), o;
-  }, o.scaledToFill = function() {
-    return r(this).modifiers.push(A(void 0, "fill")), o;
-  }, o;
+  return i.scaledToFit = function() {
+    return r(this).modifiers.push($(void 0, "fit")), i;
+  }, i.scaledToFill = function() {
+    return r(this).modifiers.push($(void 0, "fill")), i;
+  }, i;
 }
-const Q = {
+const nt = {
   idle: "idle",
   loading: "loading",
   loaded: "loaded",
   error: "error"
-}, tt = {
+}, lt = {
   fit: "fit",
   fill: "fill",
   stretch: "stretch",
   center: "center",
   scaleDown: "scaleDown"
-}, et = {
+}, at = {
   /**
    * Create a responsive image with multiple sources
    */
   responsive(e, t, s = {}) {
-    const i = e.map((o) => {
-      const r = [o.src];
-      return o.width && r.push(`${o.width}w`), r.join(" ");
+    const o = e.map((i) => {
+      const r = [i.src];
+      return i.width && r.push(`${i.width}w`), r.join(" ");
     }).join(", ");
-    return P(t, { ...s, srcSet: i });
+    return P(t, { ...s, srcSet: o });
   },
   /**
    * Create an image with progressive loading
@@ -242,23 +328,23 @@ const Q = {
     });
   }
 };
-var N = Object.defineProperty, X = (e, t, s) => t in e ? N(e, t, { enumerable: !0, configurable: !0, writable: !0, value: s }) : e[t] = s, T = (e, t, s) => X(e, typeof t != "symbol" ? t + "" : t, s);
-class g {
-  constructor(t, s, i, o = {}) {
-    this.props = t, this.tag = s, this.content = i, this.attributes = o, T(this, "type", "component"), T(this, "id"), T(this, "mounted", !1), T(this, "cleanup", []), this.id = `element-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+var K = Object.defineProperty, Z = (e, t, s) => t in e ? K(e, t, { enumerable: !0, configurable: !0, writable: !0, value: s }) : e[t] = s, I = (e, t, s) => Z(e, typeof t != "symbol" ? t + "" : t, s);
+class S {
+  constructor(t, s, o, i = {}) {
+    this.props = t, this.tag = s, this.content = o, this.attributes = i, I(this, "type", "component"), I(this, "id"), I(this, "mounted", !1), I(this, "cleanup", []), this.id = `element-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
   }
   render() {
     return [
-      m(this.tag, this.attributes, this.content ? W(this.content) : "")
+      v(this.tag, this.attributes, this.content ? Y(this.content) : "")
     ];
   }
 }
-const y = {
+const E = {
   /**
    * Create a div element with modifier support
    */
   div: (e = {}) => {
-    const t = new g(
+    const t = new S(
       e,
       "div",
       e.children ? String(e.children) : void 0
@@ -269,7 +355,7 @@ const y = {
    * Create a span element with modifier support
    */
   span: (e = {}) => {
-    const t = new g(
+    const t = new S(
       e,
       "span",
       e.children ? String(e.children) : void 0
@@ -280,7 +366,7 @@ const y = {
    * Create an anchor element with modifier support
    */
   a: (e = {}) => {
-    const t = new g(
+    const t = new S(
       e,
       "a",
       e.children ? String(e.children) : void 0,
@@ -295,7 +381,7 @@ const y = {
    * Create a paragraph element with modifier support
    */
   p: (e = {}) => {
-    const t = new g(
+    const t = new S(
       e,
       "p",
       e.children ? String(e.children) : void 0
@@ -309,7 +395,7 @@ const y = {
    * use the main Button component instead.
    */
   button: (e = {}) => {
-    const t = new g(
+    const t = new S(
       e,
       "button",
       e.children ? String(e.children) : void 0,
@@ -323,13 +409,13 @@ const y = {
    * Create an input element with modifier support
    */
   input: (e = {}) => {
-    const t = new g(e, "input", void 0, {
+    const t = new S(e, "input", void 0, {
       type: e.type || "text",
       value: e.value || "",
       placeholder: e.placeholder || "",
       oninput: (s) => {
-        const i = s.target;
-        e.onChange?.(i.value);
+        const o = s.target;
+        e.onChange?.(o.value);
       }
     });
     return f(t);
@@ -341,7 +427,7 @@ const y = {
    * use the main Image component instead.
    */
   img: (e) => {
-    const t = new g(e, "img", void 0, {
+    const t = new S(e, "img", void 0, {
       src: e.src,
       alt: e.alt || "",
       width: e.width,
@@ -353,20 +439,20 @@ const y = {
    * Create a heading element with modifier support
    */
   heading: (e) => (t = {}) => {
-    const s = new g(
+    const s = new S(
       t,
       `h${e}`,
       t.children ? String(t.children) : void 0
     );
     return f(s);
   }
-}, st = y.heading(1), ot = y.heading(2), it = y.heading(3), nt = y.heading(4), rt = y.heading(5), lt = y.heading(6);
-var j = Object.defineProperty, U = (e, t, s) => t in e ? j(e, t, { enumerable: !0, configurable: !0, writable: !0, value: s }) : e[t] = s, l = (e, t, s) => U(e, typeof t != "symbol" ? t + "" : t, s);
-class q {
+}, ct = E.heading(1), ht = E.heading(2), dt = E.heading(3), pt = E.heading(4), ft = E.heading(5), ut = E.heading(6);
+var Q = Object.defineProperty, tt = (e, t, s) => t in e ? Q(e, t, { enumerable: !0, configurable: !0, writable: !0, value: s }) : e[t] = s, l = (e, t, s) => tt(e, typeof t != "symbol" ? t + "" : t, s);
+class et {
   constructor(t) {
     this.props = t, l(this, "type", "component"), l(this, "id"), l(this, "mounted", !1), l(this, "cleanup", []), l(this, "scrollElement", null), l(this, "contentOffsetSignal"), l(this, "setContentOffset"), l(this, "contentSizeSignal"), l(this, "setContentSize"), l(this, "setIsScrolling"), l(this, "pullToRefreshStateSignal"), l(this, "setPullToRefreshState"), l(this, "scrollEventThrottle"), l(this, "lastScrollTime", 0), l(this, "scrollVelocity", { x: 0, y: 0 }), l(this, "lastScrollOffset", { x: 0, y: 0 }), l(this, "pullStartY", 0), l(this, "isPulling", !1), l(this, "handleScroll", (h) => {
       if (!this.scrollElement) return;
-      const p = performance.now(), a = p - this.lastScrollTime;
+      const g = performance.now(), a = g - this.lastScrollTime;
       if (a < this.scrollEventThrottle) return;
       const d = {
         x: this.scrollElement.scrollLeft,
@@ -376,7 +462,7 @@ class q {
         width: this.scrollElement.scrollWidth,
         height: this.scrollElement.scrollHeight
       });
-      const c = this.detectScrollEdges(), w = {
+      const c = this.detectScrollEdges(), T = {
         offset: d,
         velocity: this.scrollVelocity,
         contentSize: {
@@ -389,7 +475,7 @@ class q {
         },
         edges: c
       };
-      this.props.onScroll && this.props.onScroll(w), c.top && this.props.onReachTop && this.props.onReachTop(), c.bottom && this.props.onReachBottom && this.props.onReachBottom(), c.left && this.props.onReachLeft && this.props.onReachLeft(), c.right && this.props.onReachRight && this.props.onReachRight(), this.lastScrollOffset = d, this.lastScrollTime = p;
+      this.props.onScroll && this.props.onScroll(T), c.top && this.props.onReachTop && this.props.onReachTop(), c.bottom && this.props.onReachBottom && this.props.onReachBottom(), c.left && this.props.onReachLeft && this.props.onReachLeft(), c.right && this.props.onReachRight && this.props.onReachRight(), this.lastScrollOffset = d, this.lastScrollTime = g;
     }), l(this, "handleScrollStart", () => {
       this.setIsScrolling(!0), this.props.onScrollBegin && this.props.onScrollBegin();
     }), l(this, "handleScrollEnd", () => {
@@ -406,8 +492,8 @@ class q {
         this.setPullToRefreshState("refreshing");
         try {
           await this.props.refreshControl.onRefresh();
-        } catch (p) {
-          console.error("Pull to refresh error:", p);
+        } catch (g) {
+          console.error("Pull to refresh error:", g);
         } finally {
           this.setPullToRefreshState("idle");
         }
@@ -415,29 +501,29 @@ class q {
         this.setPullToRefreshState("idle");
       this.isPulling = !1;
     }), this.id = `scrollview-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`, this.scrollEventThrottle = t.scrollEventThrottle || 16;
-    const [s, i] = b(
+    const [s, o] = w(
       { x: 0, y: 0 }
     );
-    this.contentOffsetSignal = s, this.setContentOffset = i;
-    const [o, r] = b({
+    this.contentOffsetSignal = s, this.setContentOffset = o;
+    const [i, r] = w({
       width: 0,
       height: 0
     });
-    this.contentSizeSignal = o, this.setContentSize = r;
-    const [, n] = b(!1);
+    this.contentSizeSignal = i, this.setContentSize = r;
+    const [, n] = w(!1);
     this.setIsScrolling = n;
-    const [E, R] = b("idle");
-    if (this.pullToRefreshStateSignal = E, this.setPullToRefreshState = R, t.contentOffset && S(t.contentOffset)) {
+    const [p, u] = w("idle");
+    if (this.pullToRefreshStateSignal = p, this.setPullToRefreshState = u, t.contentOffset && b(t.contentOffset)) {
       this.setContentOffset(t.contentOffset());
-      const h = v(() => {
-        t.contentOffset && S(t.contentOffset) && this.setContentOffset(t.contentOffset());
+      const h = y(() => {
+        t.contentOffset && b(t.contentOffset) && this.setContentOffset(t.contentOffset());
       });
       this.cleanup.push(() => h.dispose());
     }
-    if (t.contentSize && S(t.contentSize)) {
+    if (t.contentSize && b(t.contentSize)) {
       this.setContentSize(t.contentSize());
-      const h = v(() => {
-        t.contentSize && S(t.contentSize) && this.setContentSize(t.contentSize());
+      const h = y(() => {
+        t.contentSize && b(t.contentSize) && this.setContentSize(t.contentSize());
       });
       this.cleanup.push(() => h.dispose());
     }
@@ -446,10 +532,10 @@ class q {
    * Calculate scroll velocity
    */
   calculateVelocity(t, s) {
-    const i = t.x - this.lastScrollOffset.x, o = t.y - this.lastScrollOffset.y;
+    const o = t.x - this.lastScrollOffset.x, i = t.y - this.lastScrollOffset.y;
     return {
-      x: s > 0 ? i / s : 0,
-      y: s > 0 ? o / s : 0
+      x: s > 0 ? o / s : 0,
+      y: s > 0 ? i / s : 0
     };
   }
   /**
@@ -461,16 +547,16 @@ class q {
     const {
       scrollTop: t,
       scrollLeft: s,
-      scrollHeight: i,
-      scrollWidth: o,
+      scrollHeight: o,
+      scrollWidth: i,
       clientHeight: r,
       clientWidth: n
     } = this.scrollElement;
     return {
       top: t <= 0,
-      bottom: t + r >= i - 1,
+      bottom: t + r >= o - 1,
       left: s <= 0,
-      right: s + n >= o - 1
+      right: s + n >= i - 1
     };
   }
   /**
@@ -478,14 +564,14 @@ class q {
    */
   setupScrollHandlers(t) {
     let s;
-    const i = () => {
+    const o = () => {
       clearTimeout(s), this.handleScrollStart();
-    }, o = () => {
+    }, i = () => {
       clearTimeout(s), s = setTimeout(() => {
         this.handleScrollEnd();
       }, 150);
     }, r = (n) => {
-      i(), this.handleScroll(n), o();
+      o(), this.handleScroll(n), i();
     };
     t.addEventListener("scroll", r, { passive: !0 }), t.addEventListener("touchstart", this.handleTouchStart, {
       passive: !0
@@ -525,19 +611,19 @@ class q {
    * Apply additional scroll view styling (position and overflow already set in initial render)
    */
   applyScrollViewStyles(t) {
-    const { showsScrollIndicator: s = !0, bounces: i = !0 } = this.props;
+    const { showsScrollIndicator: s = !0, bounces: o = !0 } = this.props;
     if (!s) {
       t.style.scrollbarWidth = "none", t.style.msOverflowStyle = "none";
-      const o = document.createElement("style");
-      o.textContent = `
+      const i = document.createElement("style");
+      i.textContent = `
         #${t.id}::-webkit-scrollbar {
           display: none;
         }
-      `, document.head.appendChild(o), this.cleanup.push(() => {
-        document.head.removeChild(o);
+      `, document.head.appendChild(i), this.cleanup.push(() => {
+        document.head.removeChild(i);
       });
     }
-    i ? t.style.webkitOverflowScrolling = "touch" : t.style.overscrollBehavior = "none", t.style.scrollBehavior = "smooth";
+    o ? t.style.webkitOverflowScrolling = "touch" : t.style.overscrollBehavior = "none", t.style.scrollBehavior = "smooth";
   }
   /**
    * Apply content insets
@@ -545,8 +631,8 @@ class q {
   applyContentInsets(t) {
     const { contentInset: s } = this.props;
     if (s) {
-      const { top: i = 0, bottom: o = 0, left: r = 0, right: n = 0 } = s;
-      t.style.padding = `${i}px ${n}px ${o}px ${r}px`;
+      const { top: o = 0, bottom: i = 0, left: r = 0, right: n = 0 } = s;
+      t.style.padding = `${o}px ${n}px ${i}px ${r}px`;
     }
   }
   /**
@@ -555,28 +641,28 @@ class q {
   createPullToRefreshIndicator() {
     if (!this.props.refreshControl?.enabled) return null;
     const t = this.pullToRefreshStateSignal(), s = this.props.refreshControl.tintColor || "#007AFF";
-    let i = "";
+    let o = "";
     switch (t) {
       case "pulling":
-        i = "↓ Pull to refresh";
+        o = "↓ Pull to refresh";
         break;
       case "ready":
-        i = "↑ Release to refresh";
+        o = "↑ Release to refresh";
         break;
       case "refreshing":
-        i = "⟳ Refreshing...";
+        o = "⟳ Refreshing...";
         break;
       default:
-        i = "";
+        o = "";
     }
-    return i ? {
+    return o ? {
       type: "component",
       id: `${this.id}-refresh`,
       mounted: !1,
       cleanup: [],
       props: {},
       render: () => [
-        m(
+        v(
           "div",
           {
             style: {
@@ -596,7 +682,7 @@ class q {
               opacity: t === "idle" ? 0 : 1
             }
           },
-          i
+          o
         )
       ]
     } : null;
@@ -606,8 +692,8 @@ class q {
    */
   scrollTo(t, s = "smooth") {
     if (!this.scrollElement) return;
-    const i = { behavior: s };
-    t.x !== void 0 && (i.left = t.x), t.y !== void 0 && (i.top = t.y), this.scrollElement.scrollTo(i);
+    const o = { behavior: s };
+    t.x !== void 0 && (o.left = t.x), t.y !== void 0 && (o.top = t.y), this.scrollElement.scrollTo(o);
   }
   /**
    * Scroll to top
@@ -632,13 +718,13 @@ class q {
    */
   render() {
     const { children: t = [], scrollEnabled: s = !0 } = this.props;
-    let i = [];
-    const o = t;
-    if (typeof o == "function") {
-      const a = o();
-      i = Array.isArray(a) ? a : [];
-    } else Array.isArray(t) && (i = t);
-    const r = m(
+    let o = [];
+    const i = t;
+    if (typeof i == "function") {
+      const a = i();
+      o = Array.isArray(a) ? a : [];
+    } else Array.isArray(t) && (o = t);
+    const r = v(
       "div",
       {
         class: "tachui-scrollview-content",
@@ -647,14 +733,14 @@ class q {
           minWidth: "100%"
         }
       },
-      ...i.flatMap((a) => a.render())
-    ), n = this.createPullToRefreshIndicator(), E = [];
+      ...o.flatMap((a) => a.render())
+    ), n = this.createPullToRefreshIndicator(), p = [];
     if (n) {
       const a = n.render(), d = Array.isArray(a) ? a : [a];
-      E.push(...d.filter((c) => c));
+      p.push(...d.filter((c) => c));
     }
-    E.push(r);
-    const { direction: R = "vertical" } = this.props, h = this.getOverflowStyles(R), p = m(
+    p.push(r);
+    const { direction: u = "vertical" } = this.props, h = this.getOverflowStyles(u), g = v(
       "div",
       {
         id: this.id,
@@ -666,46 +752,46 @@ class q {
           ...h
         }
       },
-      ...E
+      ...p
     );
-    if (p.element) {
-      const a = p.element;
+    if (g.element) {
+      const a = g.element;
       this.scrollElement = a, this.applyScrollViewStyles(a), this.setupScrollHandlers(a), r.element && this.applyContentInsets(r.element);
       const d = () => {
-        const c = S(s) ? s() : s;
+        const c = b(s) ? s() : s;
         a.style.overflow = c ? "auto" : "hidden", a.style.pointerEvents = c ? "auto" : "none";
       };
-      if (S(s)) {
-        const c = v(d);
+      if (b(s)) {
+        const c = y(d);
         this.cleanup.push(() => c.dispose());
       } else
         d();
-      if (typeof o == "function") {
-        const c = v(() => {
-          const w = o(), _ = (Array.isArray(w) ? w : []).flatMap((C) => C.render());
+      if (typeof i == "function") {
+        const c = y(() => {
+          const T = i(), W = (Array.isArray(T) ? T : []).flatMap((C) => C.render());
           if (r.element) {
             const C = r.element;
-            C.innerHTML = "", _.forEach((L) => {
-              L && L.element && C.appendChild(L.element);
+            C.innerHTML = "", W.forEach((O) => {
+              O && O.element && C.appendChild(O.element);
             });
           }
         });
         this.cleanup.push(() => c.dispose());
       }
     }
-    return [p];
+    return [g];
   }
 }
-function I(e = {}) {
-  const t = new q(e);
+function _(e = {}) {
+  const t = new et(e);
   return f(t);
 }
-const at = {
+const gt = {
   /**
    * Create a scroll view with pull to refresh
    */
   withRefresh(e, t, s = {}) {
-    return I({
+    return _({
       children: e,
       refreshControl: {
         enabled: !0,
@@ -718,7 +804,7 @@ const at = {
    * Create a horizontal scroll view
    */
   horizontal(e, t = {}) {
-    return I({
+    return _({
       ...t,
       children: e,
       direction: "horizontal"
@@ -728,7 +814,7 @@ const at = {
    * Create a paged scroll view
    */
   paged(e, t = {}) {
-    return I({
+    return _({
       ...t,
       children: e,
       pagingEnabled: !0
@@ -736,19 +822,19 @@ const at = {
   }
 };
 export {
-  B as E,
-  y as H,
+  J as E,
+  E as H,
   P as I,
-  I as S,
-  Q as a,
-  tt as b,
-  et as c,
-  st as d,
-  ot as e,
-  it as f,
-  nt as g,
-  rt as h,
-  lt as i,
-  q as j,
-  at as k
+  _ as S,
+  nt as a,
+  lt as b,
+  at as c,
+  ct as d,
+  ht as e,
+  dt as f,
+  pt as g,
+  ft as h,
+  ut as i,
+  et as j,
+  gt as k
 };

package/dist/display/Image.d.ts

@@ -15,6 +15,7 @@ import { type ElementOverrideProps } from '@tachui/core';
 import { ComponentWithCSSClasses, type CSSClassesProps } from '@tachui/core';
 type ImageAssetLike = ImageAsset | ImageAssetProxy;
 type ImageSource = string | Signal<string> | ImageAssetLike;
+type ImageRenderingMode = 'original' | 'template';
 /**
  * Image loading state
  */
@@ -33,6 +34,9 @@ export type ImageResizeMode = 'cover' | 'contain' | 'fill' | 'none';
 export type ImageLoadingStrategy = 'eager' | 'lazy';
 export interface ImageProps extends ComponentProps, ElementOverrideProps, CSSClassesProps {
     src?: ImageSource;
+    renderingMode?: ImageRenderingMode;
+    decorative?: boolean | Signal<boolean>;
+    customSanitizer?: (markup: string) => string;
     srcSet?: string | Signal<string>;
     alt?: string | Signal<string>;
     width?: number | string | Signal<number | string>;
@@ -86,6 +90,7 @@ export declare class EnhancedImage extends ComponentWithCSSClasses implements Co
      * Set up ImageAsset reactivity for a real DOM element (called from onDOMReady)
      */
     private setupImageAssetReactivityForDOMElement;
+    private setupTemplateModeReactivityForDOMElement;
     private setupLoadingStateReactivityForDOMElement;
     /**
      * Concatenate this image with another concatenatable component
@@ -133,6 +138,7 @@ export interface ImageWithShorthands extends ModifiableComponentWithModifiers<Im
     scaledToFill(): ImageWithShorthands;
 }
 export declare function Image(src: ImageSource, props?: Omit<ImageProps, 'src'>): ImageWithShorthands;
+export declare function __resetImageTemplateCacheForTests(): void;
 /**
  * Image loading states for external use
  */

package/dist/display/Image.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Image.d.ts","sourceRoot":"","sources":["../../src/display/Image.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"Image.d.ts","sourceRoot":"","sources":["../../src/display/Image.ts"],"names":[],"mappings":"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"}

package/dist/display/index.js

@@ -1,5 +1,5 @@
 import { E as e, H as t, T as o, a as H, b as l, c as n } from "../Text-WpP4H9se.js";
-import { E as c, j as g, d as m, e as i, f as T, g as d, h as x, i as I, H as S, I as h, b as E, a as p, c as f, S as w, k as y } from "../ScrollView-CtvxVuuS.js";
+import { E as c, j as g, d as m, e as i, f as T, g as d, h as x, i as I, H as S, I as h, b as E, a as p, c as f, S as w, k as y } from "../ScrollView-4WhOoZol.js";
 export {
   c as EnhancedImage,
   g as EnhancedScrollView,

package/dist/index.js

@@ -1,6 +1,6 @@
 import { Divider as b, DividerComponent as P, DividerStyles as I, DividerUtils as y, HStack as j, Spacer as S, SpacerComponent as A, VStack as L, ZStack as C, defaultDividerTheme as V } from "./layout/index.js";
 import { E as O, H as E, T as $, a as F, b as q, c as U } from "./Text-WpP4H9se.js";
-import { E as N, j as _, d as W, e as R, f as M, g as G, h as K, i as Z, H as z, I as J, b as Q, a as X, c as Y, S as ee, k as te } from "./ScrollView-CtvxVuuS.js";
+import { E as N, j as _, d as W, e as R, f as M, g as G, h as K, i as Z, H as z, I as J, b as Q, a as X, c as Y, S as ee, k as te } from "./ScrollView-4WhOoZol.js";
 import { B as ne, a as ie, E as re, h as ae, c as se, L as ce, b as le, P as pe, i as de, j as ge, T as ue, e as me, f as he, g as fe, d as ve } from "./Picker-CpERkpVp.js";
 import { B as xe, a as ke, b as Be, c as Te, d as be, e as Pe, f as Ie } from "./BasicInput-BHfrSdoi.js";
 import { withModifiers as je } from "@tachui/core";
@@ -425,7 +425,7 @@ const w = {
     }
     console.groupEnd();
   }
-}, h = "@tachui/primitives", f = "0.8.16", x = h, k = f;
+}, h = "@tachui/primitives", f = "0.8.18", x = h, k = f;
 export {
   xe as BasicForm,
   ke as BasicFormImplementation,

package/dist/layout/Spacer.d.ts

@@ -4,7 +4,7 @@
  * SwiftUI-inspired Spacer component that expands to fill available space
  * along the main axis of its container. Behaves like SwiftUI.Spacer.
  */
-import type { ModifiableComponent, ModifierBuilder } from '@tachui/core';
+import type { ModifiableComponentWithModifiers } from '@tachui/core';
 import type { ComponentProps, DOMNode } from '@tachui/core';
 import { ComponentWithCSSClasses, type CSSClassesProps } from '@tachui/core';
 import type { CloneableComponent, CloneOptions } from '@tachui/core/runtime/types';
@@ -32,10 +32,6 @@ export declare class SpacerComponent extends ComponentWithCSSClasses implements
 /**
  * Create a Spacer component with optional minimum length
  */
-export declare function Spacer(minLength?: number): ModifiableComponent<SpacerProps> & {
-    modifier: ModifierBuilder<ModifiableComponent<SpacerProps>>;
-};
-export declare function Spacer(props?: SpacerProps): ModifiableComponent<SpacerProps> & {
-    modifier: ModifierBuilder<ModifiableComponent<SpacerProps>>;
-};
+export declare function Spacer(minLength?: number): ModifiableComponentWithModifiers<SpacerProps>;
+export declare function Spacer(props?: SpacerProps): ModifiableComponentWithModifiers<SpacerProps>;
 //# sourceMappingURL=Spacer.d.ts.map

package/dist/layout/Spacer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Spacer.d.ts","sourceRoot":"","sources":["../../src/layout/Spacer.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM,cAAc,CAAA;AAExE,OAAO,KAAK,EAAE,cAAc,EAAE,OAAO,EAAE,MAAM,cAAc,CAAA;AAC3D,OAAO,EAAE,uBAAuB,EAAE,KAAK,eAAe,EAAE,MAAM,cAAc,CAAA;AAC5E,OAAO,KAAK,EAAE,kBAAkB,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAA;AAMlF;;GAEG;AACH,MAAM,WAAW,WAAY,SAAQ,cAAc,EAAE,eAAe;IAClE,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED;;GAEG;AACH,qBAAa,eACX,SAAQ,uBACR,YAAW,kBAAkB,CAAC,WAAW,CAAC;IAE1C,SAAgB,IAAI,EAAG,WAAW,CAAS;IAC3C,SAAgB,EAAE,EAAE,MAAM,CAAA;IAC1B,SAAgB,KAAK,EAAE,WAAW,CAAA;IAC3B,OAAO,UAAQ;IACf,OAAO,EAAE,CAAC,MAAM,IAAI,CAAC,EAAE,CAAK;gBAEvB,KAAK,EAAE,WAAW;IAM9B,MAAM,IAAI,OAAO;IAgCjB,KAAK,CAAC,OAAO,GAAE,YAAiB,GAAG,IAAI;IAIvC,YAAY,IAAI,IAAI;IAOpB,SAAS,IAAI,IAAI;CAQlB;AAED;;GAEG;AACH,wBAAgB,MAAM,CAAC,SAAS,CAAC,EAAE,MAAM,GAAG,mBAAmB,CAAC,WAAW,CAAC,GAAG;IAC7E,QAAQ,EAAE,eAAe,CAAC,mBAAmB,CAAC,WAAW,CAAC,CAAC,CAAA;CAC5D,CAAA;AACD,wBAAgB,MAAM,CACpB,KAAK,CAAC,EAAE,WAAW,GAClB,mBAAmB,CAAC,WAAW,CAAC,GAAG;IACpC,QAAQ,EAAE,eAAe,CAAC,mBAAmB,CAAC,WAAW,CAAC,CAAC,CAAA;CAC5D,CAAA"}
+{"version":3,"file":"Spacer.d.ts","sourceRoot":"","sources":["../../src/layout/Spacer.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EAAE,gCAAgC,EAAE,MAAM,cAAc,CAAA;AAEpE,OAAO,KAAK,EAAE,cAAc,EAAE,OAAO,EAAE,MAAM,cAAc,CAAA;AAC3D,OAAO,EAAE,uBAAuB,EAAE,KAAK,eAAe,EAAE,MAAM,cAAc,CAAA;AAC5E,OAAO,KAAK,EAAE,kBAAkB,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAA;AAMlF;;GAEG;AACH,MAAM,WAAW,WAAY,SAAQ,cAAc,EAAE,eAAe;IAClE,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED;;GAEG;AACH,qBAAa,eACX,SAAQ,uBACR,YAAW,kBAAkB,CAAC,WAAW,CAAC;IAE1C,SAAgB,IAAI,EAAG,WAAW,CAAS;IAC3C,SAAgB,EAAE,EAAE,MAAM,CAAA;IAC1B,SAAgB,KAAK,EAAE,WAAW,CAAA;IAC3B,OAAO,UAAQ;IACf,OAAO,EAAE,CAAC,MAAM,IAAI,CAAC,EAAE,CAAK;gBAEvB,KAAK,EAAE,WAAW;IAM9B,MAAM,IAAI,OAAO;IAgCjB,KAAK,CAAC,OAAO,GAAE,YAAiB,GAAG,IAAI;IAIvC,YAAY,IAAI,IAAI;IAOpB,SAAS,IAAI,IAAI;CAQlB;AAED;;GAEG;AACH,wBAAgB,MAAM,CACpB,SAAS,CAAC,EAAE,MAAM,GACjB,gCAAgC,CAAC,WAAW,CAAC,CAAA;AAChD,wBAAgB,MAAM,CACpB,KAAK,CAAC,EAAE,WAAW,GAClB,gCAAgC,CAAC,WAAW,CAAC,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tachui/primitives",
-  "version": "0.8.16",
+  "version": "0.8.18",
   "description": "Basic UI components for tachUI framework",
   "homepage": "https://tachui.dev/",
   "type": "module",
@@ -33,8 +33,8 @@
     "dist"
   ],
   "dependencies": {
-    "@tachui/core": "0.8.16",
-    "@tachui/modifiers": "0.8.16"
+    "@tachui/core": "0.8.18",
+    "@tachui/modifiers": "0.8.18"
   },
   "devDependencies": {
     "@types/node": "^20.0.0",