@octane-xplat/ui 0.2.1 → 0.4.0

package/dist/web/ui2.js

@@ -1,105 +1,17 @@
-import { __s, bag7, clone, hookSlots, queueRefAttach, queueRefDetach, setStyle, template, useEffect, useRef } from "octane";
-import { bindSignalAttribute, bindSignalChild, enableSignalBindings, replaceRef, updateFreshClassName } from "octane/internal/client";
-//#region src/View.web.tsrx
-enableSignalBindings(1, true);
-var _t$0 = /* @__PURE__ */ template("<div></div>");
-var _hs$ = /* @__PURE__ */ hookSlots(2);
-var _rm$1 = [
-	"r",
-	"c",
-	"b"
-];
-var View = /* @__PURE__ */ __s(function View(props, __s, __extra) {
-	const el = useRef(null, _hs$ + 0);
-	useEffect(() => {
-		const node = el.current;
-		const cb = props.onPan;
-		if (!node || !cb) return;
-		let sx = 0, sy = 0, active = false, last = 0, lx = 0, t0 = 0;
-		const emit = (e, state) => {
-			const now = performance.now();
-			const dt = Math.max(now - t0, 1) / 1e3;
-			const vx = (e.clientX - lx) / dt;
-			const vy = (e.clientY - last) / dt;
-			lx = e.clientX;
-			last = e.clientY;
-			t0 = now;
-			cb({
-				x: e.clientX - sx,
-				y: e.clientY - sy,
-				dx: e.clientX - sx,
-				dy: e.clientY - sy,
-				vx,
-				vy,
-				state,
-				target: node
-			});
-		};
-		const down = (e) => {
-			active = true;
-			sx = e.clientX;
-			sy = e.clientY;
-			t0 = performance.now();
-			lx = sx;
-			last = sy;
-			node.setPointerCapture?.(e.pointerId);
-			emit(e, "began");
-		};
-		const move = (e) => {
-			if (active) emit(e, "moved");
-		};
-		const up = (e) => {
-			if (active) {
-				active = false;
-				emit(e, "ended");
-			}
-		};
-		const cancel = (e) => {
-			if (active) {
-				active = false;
-				emit(e, "cancelled");
-			}
-		};
-		node.addEventListener("pointerdown", down);
-		node.addEventListener("pointermove", move);
-		node.addEventListener("pointerup", up);
-		node.addEventListener("pointercancel", cancel);
-		return () => {
-			node.removeEventListener("pointerdown", down);
-			node.removeEventListener("pointermove", move);
-			node.removeEventListener("pointerup", up);
-			node.removeEventListener("pointercancel", cancel);
-		};
-	}, [props.onPan], _hs$ + 1);
-	let _b = __s.slots[0];
-	if (_b === void 0) {
-		let _m1, _m2;
-		const _root = clone(_t$0);
-		_m1 = _root;
-		queueRefAttach(__s, _m2 = (e) => {
-			el.current = e;
-			props.bind?.(e);
-		}, _m1);
-		(__s.cleanups ??= []).push(() => _b && queueRefDetach(_b.c, _b.b));
-		_b = bag7(__s, _root, void 0, _m1, _m2, void 0, void 0, null, void 0);
-		__s.refFields = _rm$1;
-	} else {
-		const _r = (e) => {
-			el.current = e;
-			props.bind?.(e);
-		};
-		if (_r !== _b.c) _b.c = replaceRef(__s, _b.c, _r, _b.b);
+//#region src/escape-props.web.ts
+/** Apply DOM escape props after the primitive's own props. Dash-named keys
+*  are attributes; other keys use the DOM property where available. */
+function applyEscapeProps(element, props) {
+	if (!element || !props.web) return;
+	for (const [key, value] of Object.entries(props.web)) if (key.includes("-")) {
+		if (value == null || value === false) element.removeAttribute(key);
+		else element.setAttribute(key, value === true ? "" : String(value));
+	} else if (key in element) try {
+		element[key] = value;
+	} catch {
+		element.setAttribute(key, String(value));
 	}
-	_b.a = bindSignalAttribute(__s, _b.a, _b.b, "id", props.id, "b:82d7ce4a", "attr");
-	_b.d = updateFreshClassName(["vx-view", props.className], _b.d, _b.b);
-	{
-		const _v = props.style;
-		if (_b.e !== _v) {
-			setStyle(_b.b, _v, _b.e);
-			_b.e = _v;
-		}
-	}
-	_b.h = bindSignalChild(__s, _b.h, 1, _b.b, props.children, "b:f8e3deeb", null, void 0, void 0, void 0, true);
-});
+	else if (value != null) element.setAttribute(key, String(value));
+}
 //#endregion
-export { View };
+export { applyEscapeProps };

package/dist/web/ui20.js

@@ -0,0 +1,85 @@
+import { applyEscapeProps } from "./ui2.js";
+import { normStyle } from "./ui4.js";
+import { __s, bag11, clone, delegateEvents, queueRefAttach, queueRefDetach, setEventHandler, setStyle, template } from "octane";
+import { bindSignalAttribute, bindSignalValue, enableSignalBindings, replaceRef, setBooleanAttributeIfChanged, setPlainAttribute } from "octane/internal/client";
+//#region src/TextInput.web.tsrx
+enableSignalBindings(1, true);
+delegateEvents([
+	"focusin",
+	"focusout",
+	"input",
+	"keydown"
+]);
+var _t$0 = /* @__PURE__ */ template("<input data-octane-input=\"i:cd4865f9\"/>");
+var _rm$0 = [
+	"r",
+	"b",
+	"a"
+];
+var TextInput = /* @__PURE__ */ __s(function TextInput(props, __s, __extra) {
+	const keyboardType = props.keyboardType === "phone" ? "tel" : props.keyboardType === "default" ? "text" : props.keyboardType;
+	const inputMode = props.keyboardType === "number" ? "numeric" : props.keyboardType === "phone" ? "tel" : props.keyboardType === "default" ? "text" : props.keyboardType;
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m0, _m1, _m5;
+		const _root = clone(_t$0);
+		queueRefAttach(__s, _m1 = (el) => {
+			if (!el) return;
+			applyEscapeProps(el, props);
+			props.bind?.({
+				focus: () => el.focus(),
+				blur: () => el.blur(),
+				native: el
+			});
+		}, _m0 = _root);
+		(__s.cleanups ??= []).push(() => _b && queueRefDetach(_b.b, _b.a));
+		_m5 = bindSignalValue(__s, void 0, _root, props.value, "i:cd4865f9");
+		setEventHandler(_root, "$$input", (e) => props.onChange?.(e.target.value));
+		setEventHandler(_root, "$$keydown", (e) => {
+			if (e.key === "Enter" && !e.shiftKey) props.onSubmit?.();
+		});
+		setEventHandler(_root, "$$focusin", props.onFocus);
+		setEventHandler(_root, "$$focusout", props.onBlur);
+		_b = bag11(__s, _root, _m0, _m1, void 0, void 0, void 0, _m5, void 0, void 0, void 0, void 0, void 0);
+		__s.refFields = _rm$0;
+	} else {
+		{
+			const _r = (el) => {
+				if (!el) return;
+				applyEscapeProps(el, props);
+				props.bind?.({
+					focus: () => el.focus(),
+					blur: () => el.blur(),
+					native: el
+				});
+			};
+			if (_r !== _b.b) _b.b = replaceRef(__s, _b.b, _r, _b.a);
+		}
+		_b.f = bindSignalValue(__s, _b.f, _b.a, props.value, "i:cd4865f9");
+		setEventHandler(_b.a, "$$input", (e) => props.onChange?.(e.target.value));
+		setEventHandler(_b.a, "$$keydown", (e) => {
+			if (e.key === "Enter" && !e.shiftKey) props.onSubmit?.();
+		});
+		setEventHandler(_b.a, "$$focusin", props.onFocus);
+		setEventHandler(_b.a, "$$focusout", props.onBlur);
+	}
+	_b.c = bindSignalAttribute(__s, _b.c, _b.a, "id", props.id, "b:b371d08c", setPlainAttribute);
+	_b.d = bindSignalAttribute(__s, _b.d, _b.a, "class", props.className, "b:2afd54b5", "class");
+	{
+		const _v = {
+			...normStyle(props.style),
+			...props.placeholderTextColor ? { "--placeholder-color": props.placeholderTextColor } : {}
+		};
+		if (_b.e !== _v) {
+			setStyle(_b.a, _v, _b.e);
+			_b.e = _v;
+		}
+	}
+	_b.g = bindSignalAttribute(__s, _b.g, _b.a, "type", props.secure ? "password" : props.keyboardType === "number" || props.keyboardType === "decimal" ? "number" : keyboardType, "b:b9f25817", setPlainAttribute);
+	_b.h = bindSignalAttribute(__s, _b.h, _b.a, "inputMode", inputMode, "b:b382c01e", setPlainAttribute);
+	_b.i = bindSignalAttribute(__s, _b.i, _b.a, "enterKeyHint", props.returnKeyType, "b:b9b532c0", setPlainAttribute);
+	_b.j = setBooleanAttributeIfChanged(props.editable === false, _b.j, _b.a, "readonly");
+	_b.k = bindSignalAttribute(__s, _b.k, _b.a, "placeholder", props.placeholder ?? props.hint, "b:e9b4ae0b", setPlainAttribute);
+});
+//#endregion
+export { TextInput };

package/dist/web/ui21.js

@@ -0,0 +1,111 @@
+import { applyEscapeProps } from "./ui2.js";
+import { normStyle } from "./ui4.js";
+import { __s, bag11, clone, delegateEvents, hookSlots, queueRefAttach, queueRefDetach, setAttribute, setEventHandler, setStyle, template, useLayoutEffect, useRef } from "octane";
+import { bindSignalAttribute, bindSignalValue, enableSignalBindings, replaceRef, setBooleanAttributeIfChanged, setPlainAttribute, updateFreshClassName } from "octane/internal/client";
+//#region src/TextArea.web.tsrx
+enableSignalBindings(1, true);
+delegateEvents([
+	"focusin",
+	"focusout",
+	"input",
+	"keydown"
+]);
+var _t$0 = /* @__PURE__ */ template("<textarea data-octane-input=\"i:bf482a0b\"></textarea>");
+var _hs$ = /* @__PURE__ */ hookSlots(2);
+var _rm$0 = [
+	"r",
+	"b",
+	"a"
+];
+var TextArea = /* @__PURE__ */ __s(function TextArea(props, __s, __extra) {
+	const el = useRef(null, _hs$ + 0);
+	useLayoutEffect(() => {
+		const t = el.current;
+		if (!t) return;
+		const cs = getComputedStyle(t);
+		const pad = parseFloat(cs.paddingTop) + parseFloat(cs.paddingBottom);
+		const bord = parseFloat(cs.borderTopWidth) + parseFloat(cs.borderBottomWidth);
+		const adj = cs.boxSizing === "border-box" ? bord : -pad;
+		const line = parseFloat(cs.lineHeight) || parseFloat(cs.fontSize) * 1.2;
+		const cap = props.maxRows ? props.maxRows * line + (cs.boxSizing === "border-box" ? pad + bord : 0) : parseFloat(cs.maxHeight) || Infinity;
+		if (props.maxRows) t.style.maxHeight = Math.ceil(cap) + "px";
+		if (props.autoGrow) {
+			t.style.height = "auto";
+			const need = t.scrollHeight + adj;
+			t.style.height = Math.min(need, cap) + "px";
+			t.style.overflowY = need > cap ? "auto" : "hidden";
+		}
+	}, [
+		props.value,
+		props.rows,
+		props.autoGrow,
+		props.maxRows,
+		props.className,
+		props.style
+	], _hs$ + 1);
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m0, _m1, _m5;
+		const _root = clone(_t$0);
+		queueRefAttach(__s, _m1 = (node) => {
+			el.current = node;
+			if (!node) return;
+			applyEscapeProps(node, props);
+			props.bind?.({
+				focus: () => node.focus(),
+				blur: () => node.blur(),
+				native: node
+			});
+		}, _m0 = _root);
+		(__s.cleanups ??= []).push(() => _b && queueRefDetach(_b.b, _b.a));
+		_m5 = bindSignalValue(__s, void 0, _root, props.value, "i:bf482a0b");
+		setEventHandler(_root, "$$input", (e) => props.onChange?.(e.target.value));
+		setEventHandler(_root, "$$keydown", (e) => {
+			if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) props.onSubmit?.();
+		});
+		setEventHandler(_root, "$$focusin", props.onFocus);
+		setEventHandler(_root, "$$focusout", props.onBlur);
+		_b = bag11(__s, _root, _m0, _m1, void 0, void 0, void 0, _m5, void 0, void 0, void 0, void 0, void 0);
+		__s.refFields = _rm$0;
+	} else {
+		{
+			const _r = (node) => {
+				el.current = node;
+				if (!node) return;
+				applyEscapeProps(node, props);
+				props.bind?.({
+					focus: () => node.focus(),
+					blur: () => node.blur(),
+					native: node
+				});
+			};
+			if (_r !== _b.b) _b.b = replaceRef(__s, _b.b, _r, _b.a);
+		}
+		_b.f = bindSignalValue(__s, _b.f, _b.a, props.value, "i:bf482a0b");
+		setEventHandler(_b.a, "$$input", (e) => props.onChange?.(e.target.value));
+		setEventHandler(_b.a, "$$keydown", (e) => {
+			if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) props.onSubmit?.();
+		});
+		setEventHandler(_b.a, "$$focusin", props.onFocus);
+		setEventHandler(_b.a, "$$focusout", props.onBlur);
+	}
+	_b.c = bindSignalAttribute(__s, _b.c, _b.a, "id", props.id, "b:601d47ca", setPlainAttribute);
+	_b.d = updateFreshClassName(["vx-textarea", props.className], _b.d, _b.a);
+	{
+		const _v = {
+			...normStyle(props.style),
+			...props.placeholderTextColor ? { "--placeholder-color": props.placeholderTextColor } : {}
+		};
+		if (_b.e !== _v) {
+			setStyle(_b.a, _v, _b.e);
+			_b.e = _v;
+		}
+	}
+	_b.g = bindSignalAttribute(__s, _b.g, _b.a, "inputMode", props.keyboardType === "number" ? "numeric" : props.keyboardType === "phone" ? "tel" : props.keyboardType === "default" ? "text" : props.keyboardType, "b:ef3d0153", setPlainAttribute);
+	_b.h = bindSignalAttribute(__s, _b.h, _b.a, "enterKeyHint", props.returnKeyType, "b:c58c3b7f", setPlainAttribute);
+	_b.i = setBooleanAttributeIfChanged(props.editable === false, _b.i, _b.a, "readonly");
+	_b.j = bindSignalAttribute(__s, _b.j, _b.a, "placeholder", props.placeholder ?? props.hint, "b:49264ef3", setPlainAttribute);
+	_b.k = bindSignalAttribute(__s, _b.k, _b.a, "rows", props.rows ?? (props.autoGrow ? 1 : 3), "b:3f250714", setAttribute);
+});
+//#endregion
+export { TextArea };

package/dist/web/ui22.js

@@ -0,0 +1,108 @@
+import { __s, bag4, bag6, child, clone, drainFrag, forBlock, hookSlots, queueRefAttach, queueRefDetach, setStyle, template, useLayoutEffect, useRef } from "octane";
+import { bindSignalAttribute, bindSignalChild, enableSignalBindings, replaceRef, setPlainAttribute, updateFreshClassName } from "octane/internal/client";
+//#region src/List.web.tsrx
+enableSignalBindings(1, true);
+var _t$0 = /* @__PURE__ */ template("<!>", 0, 1);
+var _t$1 = /* @__PURE__ */ template("<div><!></div>");
+var _hs$ = /* @__PURE__ */ hookSlots(3);
+function __empty$1(__props, __s, __extra) {
+	const __block = __s.block;
+	const props = __extra[0];
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m0, _m1;
+		const _root = clone(_t$0);
+		_m0 = __block.parentNode;
+		_m1 = child(_root);
+		drainFrag(_root, __block.parentNode, __block.endMarker);
+		_b = bag4(__s, null, _m0, _m1, null, void 0);
+	}
+	_b.e = bindSignalChild(__s, _b.e, 1, _b.a, props.renderEmpty?.(), "b:0fabf1d6", _b.b, true, void 0, true, void 0);
+}
+function __item$3(item, __s, __extra) {
+	const __block = __s.block;
+	const props = __extra[0];
+	const i = __block.itemIndex;
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m0, _m1;
+		const _root = clone(_t$0);
+		_m0 = __block.parentNode;
+		_m1 = child(_root);
+		drainFrag(_root, __block.parentNode, __block.endMarker);
+		_b = bag4(__s, null, _m0, _m1, null, void 0);
+	}
+	_b.e = bindSignalChild(__s, _b.e, 1, _b.a, props.renderItem(item, i), "b:0d1e153e", _b.b, true, void 0, true, void 0);
+}
+var _rm$6 = [
+	"r",
+	"c",
+	"b"
+];
+var List = /* @__PURE__ */ __s(function List(props, __s, __extra) {
+	const el = useRef(null, _hs$ + 0);
+	const reachedEnd = useRef(false, _hs$ + 1);
+	useLayoutEffect(() => {
+		const node = el.current;
+		if (!node) return;
+		for (const [name, value] of Object.entries(props.web ?? {})) if (name.includes("-")) {
+			if (value == null) node.removeAttribute(name);
+			else node.setAttribute(name, String(value));
+		} else node[name] = value;
+		let frame = 0;
+		const checkEnd = () => {
+			frame = 0;
+			if (node.scrollHeight - node.scrollTop - node.clientHeight > node.clientHeight) reachedEnd.current = false;
+			else if (!reachedEnd.current) {
+				reachedEnd.current = true;
+				props.onEndReached?.();
+			}
+		};
+		const onScroll = () => {
+			if (!frame) frame = requestAnimationFrame(checkEnd);
+		};
+		node.addEventListener("scroll", onScroll, { passive: true });
+		checkEnd();
+		return () => {
+			node.removeEventListener("scroll", onScroll);
+			if (frame) cancelAnimationFrame(frame);
+		};
+	}, [
+		props.onEndReached,
+		props.web,
+		props.items
+	], _hs$ + 2);
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m1, _m2, _m5;
+		const _root = clone(_t$1);
+		_m1 = _root;
+		queueRefAttach(__s, _m2 = el, _m1);
+		(__s.cleanups ??= []).push(() => _b && queueRefDetach(_b.c, _b.b));
+		_m5 = child(_root);
+		_b = bag6(__s, _root, void 0, _m1, _m2, void 0, void 0, _m5);
+		__s.refFields = _rm$6;
+	} else {
+		const _r = el;
+		if (_r !== _b.c) _b.c = replaceRef(__s, _b.c, _r, _b.b);
+	}
+	_b.a = bindSignalAttribute(__s, _b.a, _b.b, "id", props.id, "b:7d4c5670", setPlainAttribute);
+	_b.d = updateFreshClassName(["vx-list", props.className], _b.d, _b.b);
+	{
+		const _v = Object.assign({
+			display: "flex",
+			flexDirection: "column",
+			flexWrap: "nowrap",
+			alignItems: "stretch",
+			overflowY: "auto",
+			minHeight: 0
+		}, props.style);
+		if (_b.e !== _v) {
+			setStyle(_b.b, _v, _b.e);
+			_b.e = _v;
+		}
+	}
+	forBlock(__s, 1, _b.b, props.items, (item, i) => props.keyFor?.(item) ?? item.id, __item$3, 32, [props], __empty$1, _b.f, true, "f3hh71u");
+});
+//#endregion
+export { List };

package/dist/web/ui23.js

@@ -0,0 +1,96 @@
+import { applyEscapeProps } from "./ui2.js";
+import { glassClassOf, glassStyleOf } from "./ui3.js";
+import { layoutChildProps } from "./ui4.js";
+import { __s, bag8, clone, snapshotSpread, template } from "octane";
+import { bindSignalChild, bindSignalHostPropSources, enableSignalBindings } from "octane/internal/client";
+//#region src/ScrollView.web.tsrx
+enableSignalBindings(1, true);
+var _t$0 = /* @__PURE__ */ template("<div></div>");
+var _rm$1 = [
+	"s",
+	"f",
+	"e"
+];
+var ScrollView = /* @__PURE__ */ __s(function ScrollView(props, __s, __extra) {
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m0, _m1, _m2, _m3, _m4, _m5;
+		const _root = clone(_t$0);
+		_m0 = (e) => applyEscapeProps(e, props);
+		_m1 = props.id;
+		_m2 = [
+			"vx-scroll",
+			glassClassOf(props.glass),
+			props.className
+		];
+		_m3 = snapshotSpread(layoutChildProps(props, {
+			...glassStyleOf(props.glass),
+			...props.horizontal ? { overflowX: "auto" } : { overflowY: "auto" },
+			...props.style
+		}));
+		_m4 = _root;
+		_m5 = bindSignalHostPropSources(__s, void 0, _root, [
+			[
+				false,
+				"ref",
+				_m0
+			],
+			[
+				false,
+				"id",
+				_m1
+			],
+			[
+				false,
+				"className",
+				_m2
+			],
+			[true, _m3]
+		], "b:bf7e328f", true);
+		_b = bag8(__s, _root, _m0, _m1, _m2, _m3, _m4, _m5, null, void 0);
+		__s.refFields = _rm$1;
+	} else {
+		{
+			const _v = (e) => applyEscapeProps(e, props);
+			if (_b.a !== _v) _b.a = _v;
+		}
+		{
+			const _v = props.id;
+			if (_b.b !== _v) _b.b = _v;
+		}
+		{
+			const _v = [
+				"vx-scroll",
+				glassClassOf(props.glass),
+				props.className
+			];
+			if (_b.c !== _v) _b.c = _v;
+		}
+		_b.d = snapshotSpread(layoutChildProps(props, {
+			...glassStyleOf(props.glass),
+			...props.horizontal ? { overflowX: "auto" } : { overflowY: "auto" },
+			...props.style
+		}));
+		_b.f = bindSignalHostPropSources(__s, _b.f, _b.e, [
+			[
+				false,
+				"ref",
+				_b.a
+			],
+			[
+				false,
+				"id",
+				_b.b
+			],
+			[
+				false,
+				"className",
+				_b.c
+			],
+			[true, _b.d]
+		], "b:bf7e328f", true);
+	}
+	_b.i = bindSignalChild(__s, _b.i, 1, _b.e, props.children, "b:b1e7e75b", null, void 0, void 0, void 0, true);
+});
+//#endregion
+export { ScrollView };

package/dist/web/ui24.js

@@ -0,0 +1,32 @@
+import { ScrollView } from "./ui23.js";
+import { bag4, child, clone, componentSlotVoid, drainFrag, markChildrenBlock, template } from "octane";
+import { textHoleUpdate } from "octane/internal/client";
+//#region src/ScrollBox.web.tsrx
+var _t$0 = /* @__PURE__ */ template("<!>", 0, 1);
+var __childrenBody = {};
+var ScrollBox = function ScrollBox(props, __s, __extra) {
+	const __block = __s.block;
+	function __children$1(__props, __s, __extra) {
+		const __block = __s.block;
+		let _b = __s.slots[0];
+		if (_b === void 0) {
+			let _m0, _m1;
+			const _root = clone(_t$0);
+			_m0 = __block.parentNode;
+			_m1 = child(_root);
+			drainFrag(_root, __block.parentNode, __block.endMarker);
+			_b = bag4(__s, null, _m0, _m1, null, void 0);
+		}
+		{
+			const _v = props.children;
+			_b.c = textHoleUpdate(__s, 1, _b.a, _v, _b.c, _b.d, _b.b, true, true);
+			_b.d = _v;
+		}
+	}
+	componentSlotVoid(__s, 0, __block.parentNode, ScrollView, {
+		...props,
+		"children": markChildrenBlock(__children$1, __childrenBody)
+	}, __block.endMarker, void 0, void 0, true, void 0, "c:09467f8a");
+};
+//#endregion
+export { ScrollBox };

package/dist/web/ui25.js

@@ -0,0 +1,108 @@
+import { applyEscapeProps } from "./ui2.js";
+import { layoutChildProps } from "./ui4.js";
+import { __s, bag8, clone, snapshotSpread, template } from "octane";
+import { bindSignalHostPropSources, enableSignalBindings } from "octane/internal/client";
+//#region src/Image.web.tsrx
+enableSignalBindings(1, true);
+var _t$0 = /* @__PURE__ */ template("<img/>");
+var _rm$0 = [
+	"s",
+	"h",
+	"g"
+];
+var Image = /* @__PURE__ */ __s(function Image(props, __s, __extra) {
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m0, _m1, _m2, _m3, _m4, _m5, _m6, _m7;
+		const _root = clone(_t$0);
+		_m0 = (e) => applyEscapeProps(e, props);
+		_m1 = props.id;
+		_m2 = props.className;
+		_m3 = snapshotSpread(layoutChildProps(props));
+		_m4 = props.src;
+		_m5 = props.alt;
+		_m6 = _root;
+		_m7 = bindSignalHostPropSources(__s, void 0, _root, [
+			[
+				false,
+				"ref",
+				_m0
+			],
+			[
+				false,
+				"id",
+				_m1
+			],
+			[
+				false,
+				"className",
+				_m2
+			],
+			[true, _m3],
+			[
+				false,
+				"src",
+				_m4
+			],
+			[
+				false,
+				"alt",
+				_m5
+			]
+		], "b:ed5f7791", false);
+		_b = bag8(__s, _root, _m0, _m1, _m2, _m3, _m4, _m5, _m6, _m7);
+		__s.refFields = _rm$0;
+	} else {
+		{
+			const _v = (e) => applyEscapeProps(e, props);
+			if (_b.a !== _v) _b.a = _v;
+		}
+		{
+			const _v = props.id;
+			if (_b.b !== _v) _b.b = _v;
+		}
+		{
+			const _v = props.className;
+			if (_b.c !== _v) _b.c = _v;
+		}
+		_b.d = snapshotSpread(layoutChildProps(props));
+		{
+			const _v = props.src;
+			if (_b.e !== _v) _b.e = _v;
+		}
+		{
+			const _v = props.alt;
+			if (_b.f !== _v) _b.f = _v;
+		}
+		_b.h = bindSignalHostPropSources(__s, _b.h, _b.g, [
+			[
+				false,
+				"ref",
+				_b.a
+			],
+			[
+				false,
+				"id",
+				_b.b
+			],
+			[
+				false,
+				"className",
+				_b.c
+			],
+			[true, _b.d],
+			[
+				false,
+				"src",
+				_b.e
+			],
+			[
+				false,
+				"alt",
+				_b.f
+			]
+		], "b:ed5f7791", false);
+	}
+});
+//#endregion
+export { Image };