@geajs/ui 0.2.4 → 0.2.9

package/dist/combobox.mjs

@@ -1,27 +1,32 @@
 import { t as ZagComponent } from "./zag-component.mjs";
-import { Component, GEA_APPLY_LIST_CHANGES, GEA_DOM_ITEM, GEA_DOM_KEY, GEA_ELEMENT, GEA_ENSURE_ARRAY_CONFIGS, GEA_OBSERVE, GEA_ON_PROP_CHANGE, GEA_PATCH_COND, GEA_REGISTER_COND, GEA_SETUP_LOCAL_STATE_OBSERVERS, GEA_STORE_ROOT, geaCondValueSymbol, geaEscapeHtml } from "@geajs/core";
+import { o as GEA_CREATE_TEMPLATE, u as GEA_PROXY_RAW } from "./bind.mjs";
+import { n as _DIRTY_PROPS, t as _DIRTY } from "./dirty-symbols.mjs";
+import { n as reactiveTextValue } from "./reactive-text.mjs";
+import { t as reactiveClass } from "./reactive-class.mjs";
+import { t as conditionalTruthy } from "./conditional-truthy.mjs";
+import { t as GEA_DOM_ITEM } from "./keyed-list-symbols.mjs";
 import { normalizeProps } from "@zag-js/vanilla";
 import * as combobox from "@zag-js/combobox";
 //#region src/components/combobox.tsx
-const __v = (v) => v != null && typeof v === "object" ? v.valueOf() : v;
+let _tpl0_root = null;
+function _tpl0_create() {
+	const t = document.createElement("template");
+	t.innerHTML = "<div data-part=root><!--1--><div data-part=control class=\"combobox-control flex\"><input data-part=input class=\"combobox-input flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-xs focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring\"><button data-part=trigger class=\"combobox-trigger inline-flex h-9 items-center justify-center rounded-r-md border border-l-0 border-input px-2\">▼</button></div><div data-part=positioner class=combobox-positioner><div data-part=content class=\"combobox-content z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md\"><div data-part=list>";
+	return t.content.firstChild;
+}
+let _tpl1_root = null;
+function _tpl1_create() {
+	const t = document.createElement("template");
+	t.innerHTML = "<label data-part=label class=\"combobox-label text-sm font-medium mb-1 block\">0";
+	return t.content.firstChild;
+}
+let _tpl2_root = null;
+function _tpl2_create() {
+	const t = document.createElement("template");
+	t.innerHTML = "<div data-part=item class=\"combobox-item relative flex cursor-pointer select-none items-center rounded-xs px-2 py-1.5 text-sm outline-hidden data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground\"><span data-part=item-text>0</span><span data-part=item-indicator class=\"combobox-item-indicator ml-auto\">✓";
+	return t.content.firstChild;
+}
 var Combobox = class extends ZagComponent {
-	static {
-		this.__geaTagName = "gea-combobox";
-	}
-	#__rowEls_b1;
-	#__dc_b1;
-	constructor(...args) {
-		super(...args);
-		this.props;
-		this[geaCondValueSymbol(0)] = !!this.props.label;
-		this[GEA_REGISTER_COND](0, "c0", () => {
-			this.props;
-			return this.props.label;
-		}, () => {
-			this.props;
-			return `<label data-part="label" class="combobox-label text-sm font-medium mb-1 block">${geaEscapeHtml(String(this.props.label))}</label>`;
-		}, null);
-	}
 	created(props) {
 		this._allItems = props.items || [];
 		this.filteredItems = [...this._allItems];
@@ -129,258 +134,314 @@ var Combobox = class extends ZagComponent {
 		this.value = api.value;
 		this.inputValue = api.inputValue;
 	}
-	template(props) {
-		const __id = this.id;
-		Component._register(ZagComponent, "zag-component");
-		return `<div id="${__id}" data-part="root"${(props.class || "") == null || (props.class || "") === false ? "" : ` class="${((props.class || "") != null ? String(props.class || "") : "").trim()}"`}><!--${__id + "-c0"}-->${props.label && `<label data-part="label" class="combobox-label text-sm font-medium mb-1 block">${geaEscapeHtml(String(props.label))}</label>` || ""}<!--${__id + "-c0-end"}--><div data-part="control" class="combobox-control flex"><input data-part="input" class="combobox-input flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-xs focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring" /><button data-part="trigger" class="combobox-trigger inline-flex h-9 items-center justify-center rounded-r-md border border-l-0 border-input px-2">▼</button></div><div data-part="positioner" class="combobox-positioner"><div data-part="content" class="combobox-content z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md"><div id="${__id + "-b1"}" data-part="list">${this.filteredItems.map((item) => this.renderFilteredItemsItem(item)).join("")}</div></div></div></div>`;
-	}
-	[GEA_ON_PROP_CHANGE](key, value) {
-		if (key === "class") {
-			const __el = this[GEA_ELEMENT];
-			this.props;
-			const __boundValue = value || "";
-			if (__el) {
-				const __newClass = String(__boundValue ?? "").trim().replace(/\s+/g, " ");
-				if (__el.className !== __newClass) __el.className = __newClass;
+	[GEA_CREATE_TEMPLATE](d) {
+		const root = (_tpl0_root || (_tpl0_root = _tpl0_create())).cloneNode(true);
+		const el0 = root;
+		const anchor1 = root.firstChild;
+		const parent2 = root.childNodes[2].firstChild.firstChild;
+		reactiveClass(el0, d, this, () => this.props.class || "");
+		conditionalTruthy(anchor1.parentNode, anchor1, d, this, () => this.props.label, (d) => {
+			const root = (_tpl1_root || (_tpl1_root = _tpl1_create())).cloneNode(true);
+			const t0 = root.firstChild;
+			reactiveTextValue(t0, d, this, () => this.props.label);
+			return root;
+		});
+		const __ki_L0 = (item, idx, d) => {
+			const root = (_tpl2_root || (_tpl2_root = _tpl2_create())).cloneNode(true);
+			root.setAttribute("data-value", String(item.value));
+			root.setAttribute("data-label", String(item.label));
+			root.firstChild.setAttribute("data-value", String(item.value));
+			root.firstChild.setAttribute("data-label", String(item.label));
+			{
+				const __n = root.firstChild.firstChild;
+				__n.nodeValue = `${item.label ?? ""}`;
 			}
-		}
-		if (key === "label") this[GEA_PATCH_COND](0);
-	}
-	renderFilteredItemsItem(item) {
-		return `<div data-gid="${item?.value ?? item}" data-part="item"${__v(item.value) == null || __v(item.value) === false ? "" : ` data-value="${item.value}"`}${__v(item.label) == null || __v(item.label) === false ? "" : ` data-label="${item.label}"`} class="combobox-item relative flex cursor-pointer select-none items-center rounded-xs px-2 py-1.5 text-sm outline-hidden data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground"><span data-part="item-text"${__v(item.value) == null || __v(item.value) === false ? "" : ` data-value="${item.value}"`}${__v(item.label) == null || __v(item.label) === false ? "" : ` data-label="${item.label}"`}>${item.label}</span><span data-part="item-indicator"${__v(item.value) == null || __v(item.value) === false ? "" : ` data-value="${item.value}"`}${__v(item.label) == null || __v(item.label) === false ? "" : ` data-label="${item.label}"`} class="combobox-item-indicator ml-auto">✓</span></div>`;
-	}
-	createFilteredItemsItem(item) {
-		var __c = this.#__dc_b1 || (this.#__dc_b1 = this.__filteredItems_container);
-		if (!__c.__geaTpl) try {
-			var __tw = document.createElement("template");
-			__tw.innerHTML = this.renderFilteredItemsItem({
-				value: 0,
-				label: " "
-			});
-			__c.__geaTpl = __tw.content.firstElementChild;
-			__c.__geaTpl?.removeAttribute("data-gid");
-		} catch (__err) {
-			console.error(__err);
-		}
-		if (__c.__geaTpl) var el = __c.__geaTpl.cloneNode(true);
-		else {
-			var __fw = document.createElement("template");
-			__fw.innerHTML = this.renderFilteredItemsItem(item);
-			var el = __fw.content.firstElementChild;
-		}
-		el.__ref_0 = el.firstElementChild;
-		el.__ref_1 = el.firstElementChild.nextElementSibling;
-		var __av = item.value;
-		if (__av == null || __av === false) el.removeAttribute("data-value");
-		else {
-			const __newAttr = String(__av);
-			if (el.getAttribute("data-value") !== __newAttr) el.setAttribute("data-value", __newAttr);
-		}
-		var __av = item.label;
-		if (__av == null || __av === false) el.removeAttribute("data-label");
-		else {
-			const __newAttr = String(__av);
-			if (el.getAttribute("data-label") !== __newAttr) el.setAttribute("data-label", __newAttr);
-		}
-		var __av = item.value;
-		if (__av == null || __av === false) el.__ref_0.removeAttribute("data-value");
-		else {
-			const __newAttr = String(__av);
-			if (el.__ref_0.getAttribute("data-value") !== __newAttr) el.__ref_0.setAttribute("data-value", __newAttr);
-		}
-		var __av = item.label;
-		if (__av == null || __av === false) el.__ref_0.removeAttribute("data-label");
-		else {
-			const __newAttr = String(__av);
-			if (el.__ref_0.getAttribute("data-label") !== __newAttr) el.__ref_0.setAttribute("data-label", __newAttr);
-		}
-		if (el.__ref_0.textContent !== `
-                    ${item.label}
-                  `) el.__ref_0.textContent = `
-                    ${item.label}
-                  `;
-		var __av = item.value;
-		if (__av == null || __av === false) el.__ref_1.removeAttribute("data-value");
-		else {
-			const __newAttr = String(__av);
-			if (el.__ref_1.getAttribute("data-value") !== __newAttr) el.__ref_1.setAttribute("data-value", __newAttr);
-		}
-		var __av = item.label;
-		if (__av == null || __av === false) el.__ref_1.removeAttribute("data-label");
-		else {
-			const __newAttr = String(__av);
-			if (el.__ref_1.getAttribute("data-label") !== __newAttr) el.__ref_1.setAttribute("data-label", __newAttr);
-		}
-		el[GEA_DOM_KEY] = String(item?.value ?? item);
-		el[GEA_DOM_ITEM] = item;
-		return el;
-	}
-	patchFilteredItemsItem(row, item, __prevItem) {
-		if (!row) return;
-		if (!row.__ref_0) row.__ref_0 = row.firstElementChild;
-		if (!row.__ref_1) row.__ref_1 = row.firstElementChild.nextElementSibling;
-		var __av = item.value;
-		if (__av == null || __av === false) row.removeAttribute("data-value");
-		else {
-			const __newAttr = String(__av);
-			if (row.getAttribute("data-value") !== __newAttr) row.setAttribute("data-value", __newAttr);
-		}
-		var __av = item.label;
-		if (__av == null || __av === false) row.removeAttribute("data-label");
-		else {
-			const __newAttr = String(__av);
-			if (row.getAttribute("data-label") !== __newAttr) row.setAttribute("data-label", __newAttr);
-		}
-		var __av = item.value;
-		if (__av == null || __av === false) row.__ref_0.removeAttribute("data-value");
-		else {
-			const __newAttr = String(__av);
-			if (row.__ref_0.getAttribute("data-value") !== __newAttr) row.__ref_0.setAttribute("data-value", __newAttr);
-		}
-		var __av = item.label;
-		if (__av == null || __av === false) row.__ref_0.removeAttribute("data-label");
-		else {
-			const __newAttr = String(__av);
-			if (row.__ref_0.getAttribute("data-label") !== __newAttr) row.__ref_0.setAttribute("data-label", __newAttr);
-		}
-		if (row.__ref_0.textContent !== `
-                    ${item.label}
-                  `) row.__ref_0.textContent = `
-                    ${item.label}
-                  `;
-		var __av = item.value;
-		if (__av == null || __av === false) row.__ref_1.removeAttribute("data-value");
-		else {
-			const __newAttr = String(__av);
-			if (row.__ref_1.getAttribute("data-value") !== __newAttr) row.__ref_1.setAttribute("data-value", __newAttr);
-		}
-		var __av = item.label;
-		if (__av == null || __av === false) row.__ref_1.removeAttribute("data-label");
-		else {
-			const __newAttr = String(__av);
-			if (row.__ref_1.getAttribute("data-label") !== __newAttr) row.__ref_1.setAttribute("data-label", __newAttr);
-		}
-		row[GEA_DOM_KEY] = String(item?.value ?? item);
-		(this.#__rowEls_b1 || (this.#__rowEls_b1 = {}))[String(item?.value ?? item)] = row;
-		row[GEA_DOM_ITEM] = item;
-	}
-	__observe_local_filteredItems(filteredItems, change) {
-		const __id = this.id;
-		if (!this.__filteredItems_container) this.__filteredItems_container = __gid(__id + "-b1");
-		if (!this.__filteredItems_container) return;
-		if (Array.isArray(filteredItems) && filteredItems.length === 0) {
-			this.#__rowEls_b1 = null;
-			this.__filteredItems_container.textContent = "";
-			return;
-		}
-		this[GEA_ENSURE_ARRAY_CONFIGS]();
-		this[GEA_APPLY_LIST_CHANGES](this.__filteredItems_container, filteredItems, change, this.__filteredItemsListConfig);
-	}
-	[GEA_ENSURE_ARRAY_CONFIGS]() {
-		if (!this.__filteredItemsListConfig) this.__filteredItemsListConfig = {
-			arrayPathParts: ["filteredItems"],
-			render: this.renderFilteredItemsItem.bind(this),
-			create: this.createFilteredItemsItem.bind(this),
-			patchRow: this.patchFilteredItemsItem && this.patchFilteredItemsItem.bind(this),
-			getKey: (item) => String(item?.value ?? item),
-			propPatchers: {
-				"value": [
-					(row, value, item) => {
-						var __av = item.value;
-						if (__av == null || __av === false) row.removeAttribute("data-value");
-						else {
-							const __newAttr = String(__av);
-							if (row.getAttribute("data-value") !== __newAttr) row.setAttribute("data-value", __newAttr);
+			root.childNodes[1].setAttribute("data-value", String(item.value));
+			root.childNodes[1].setAttribute("data-label", String(item.label));
+			root[GEA_DOM_ITEM] = item;
+			return root;
+		};
+		const __kp_L0 = (el, item) => {
+			if (!item[_DIRTY_PROPS] || item[_DIRTY_PROPS].has("value")) el.setAttribute("data-value", String(item.value));
+			if (!item[_DIRTY_PROPS] || item[_DIRTY_PROPS].has("label")) el.setAttribute("data-label", String(item.label));
+			if (!item[_DIRTY_PROPS] || item[_DIRTY_PROPS].has("value")) (el.__r0 || (el.__r0 = el.firstChild)).setAttribute("data-value", String(item.value));
+			if (!item[_DIRTY_PROPS] || item[_DIRTY_PROPS].has("label")) (el.__r0 || (el.__r0 = el.firstChild)).setAttribute("data-label", String(item.label));
+			if (!item[_DIRTY_PROPS] || item[_DIRTY_PROPS].has("label")) {
+				const __n = el.__r1 || (el.__r1 = el.firstChild.firstChild);
+				__n.nodeValue = `${item.label ?? ""}`;
+			}
+			if (!item[_DIRTY_PROPS] || item[_DIRTY_PROPS].has("value")) (el.__r2 || (el.__r2 = el.childNodes[1])).setAttribute("data-value", String(item.value));
+			if (!item[_DIRTY_PROPS] || item[_DIRTY_PROPS].has("label")) (el.__r2 || (el.__r2 = el.childNodes[1])).setAttribute("data-label", String(item.label));
+		};
+		{
+			const __kl_container = parent2;
+			const __kl_root = this;
+			const __kl_key = (item, idx) => item.value;
+			const __kl_create = (item, idx) => {
+				const __k = item.value;
+				const __el = __ki_L0(item, idx);
+				return {
+					key: __k,
+					item: item && item[GEA_PROXY_RAW] || item,
+					element: __el
+				};
+			};
+			const __kl_patch = (e, newItem, newIdx) => {
+				e.item = newItem && newItem[GEA_PROXY_RAW] || newItem;
+				__kp_L0(e.element, newItem);
+			};
+			const __kl_unwrap = (v) => v && typeof v === "object" && v[GEA_PROXY_RAW] || v;
+			const __kl_resolve = () => {
+				const v = __kl_root?.["filteredItems"];
+				return Array.isArray(v) ? v : [];
+			};
+			let __kl_entries = [];
+			const __kl_byKey = /* @__PURE__ */ new Map();
+			const __kl_remove = (entry) => {
+				entry.disposer?.dispose();
+				__kl_byKey.delete(entry.key);
+				if (entry.element.parentNode) entry.element.parentNode.removeChild(entry.element);
+			};
+			const __kl_first = __kl_resolve();
+			if (__kl_first.length > 0) {
+				const frag = __kl_container.ownerDocument.createDocumentFragment();
+				for (let i = 0; i < __kl_first.length; i++) {
+					const item = __kl_first[i];
+					const entry = __kl_create(item, i);
+					__kl_entries.push(entry);
+					__kl_byKey.set(entry.key, entry);
+					frag.appendChild(entry.element);
+					if (item && typeof item === "object") {
+						item[_DIRTY] = false;
+						item[_DIRTY_PROPS]?.clear();
+					}
+				}
+				__kl_container.appendChild(frag);
+			}
+			let __kl_prev = __kl_first;
+			const __kl_reconcile = (arr, changes) => {
+				if (arr === __kl_prev && __kl_entries.length === arr.length) {
+					let structural = false;
+					let aipuOnly = changes && changes.length > 0;
+					if (changes && changes.length > 0) for (let i = 0; i < changes.length; i++) {
+						const change = changes[i];
+						if (change.type === "append" || change.type === "remove" || change.type === "delete" || change.type === "reorder") {
+							structural = true;
+							aipuOnly = false;
+							break;
+						}
+						if (!change.aipu) aipuOnly = false;
+						else structural = true;
+					}
+					if (aipuOnly && changes.length === 2) {
+						const a = changes[0].arix;
+						const b = changes[1].arix;
+						if (a >= 0 && b >= 0 && a < __kl_entries.length && b < __kl_entries.length && a !== b) {
+							const entryA = __kl_entries[a];
+							const entryB = __kl_entries[b];
+							const newAKey = __kl_key(arr[a], a);
+							const newBKey = __kl_key(arr[b], b);
+							if (entryA.key === newBKey && entryB.key === newAKey) {
+								const refB = entryB.element.nextSibling;
+								__kl_container.insertBefore(entryB.element, entryA.element);
+								if (refB) __kl_container.insertBefore(entryA.element, refB);
+								else __kl_container.appendChild(entryA.element);
+								__kl_entries[a] = entryB;
+								__kl_entries[b] = entryA;
+								if (__kl_unwrap(arr[a]) !== entryB.item) __kl_patch(entryB, arr[a], a);
+								if (__kl_unwrap(arr[b]) !== entryA.item) __kl_patch(entryA, arr[b], b);
+								__kl_prev = arr;
+								return;
+							}
+						}
+					}
+					if (!structural) {
+						const raw = arr[GEA_PROXY_RAW] || arr;
+						for (let i = 0; i < raw.length; i++) {
+							const item = raw[i];
+							if (item && typeof item === "object" && item[_DIRTY]) {
+								__kl_patch(__kl_entries[i], item, i);
+								item[_DIRTY] = false;
+								item[_DIRTY_PROPS]?.clear();
+								__kl_entries[i].item = item;
+							}
+						}
+						return;
+					}
+				}
+				if (changes && changes.length > 0 && __kl_entries.length < arr.length) {
+					let onlyAppends = true;
+					let appendCount = 0;
+					for (let i = 0; i < changes.length; i++) {
+						if (changes[i].type !== "append") {
+							onlyAppends = false;
+							break;
 						}
-					},
-					(row, value, item) => {
-						const __target = row.__ref_0 || (row.__ref_0 = row.firstElementChild);
-						if (!__target) return;
-						var __av = item.value;
-						if (__av == null || __av === false) __target.removeAttribute("data-value");
-						else {
-							const __newAttr = String(__av);
-							if (__target.getAttribute("data-value") !== __newAttr) __target.setAttribute("data-value", __newAttr);
+						appendCount += changes[i].count || 0;
+					}
+					if (onlyAppends && appendCount === arr.length - __kl_entries.length) {
+						const start = __kl_entries.length;
+						const frag = __kl_container.ownerDocument.createDocumentFragment();
+						for (let i = start; i < arr.length; i++) {
+							const entry = __kl_create(arr[i], i);
+							__kl_entries.push(entry);
+							__kl_byKey.set(entry.key, entry);
+							frag.appendChild(entry.element);
 						}
-					},
-					(row, value, item) => {
-						const __target = row.__ref_1 || (row.__ref_1 = row.firstElementChild.nextElementSibling);
-						if (!__target) return;
-						var __av = item.value;
-						if (__av == null || __av === false) __target.removeAttribute("data-value");
-						else {
-							const __newAttr = String(__av);
-							if (__target.getAttribute("data-value") !== __newAttr) __target.setAttribute("data-value", __newAttr);
+						__kl_container.appendChild(frag);
+						__kl_prev = arr;
+						return;
+					}
+				}
+				if (changes && changes.length > 0 && __kl_entries.length > arr.length) {
+					let onlyRemoves = true;
+					let totalRemoved = 0;
+					for (let i = 0; i < changes.length; i++) {
+						const change = changes[i];
+						if (change.type !== "remove") {
+							onlyRemoves = false;
+							break;
 						}
-					},
-					(row, value) => {
-						row.classList.toggle("value", value);
-					},
-					(row, value) => {
-						row.classList.toggle("value", value);
-					},
-					(row, value) => {
-						row.classList.toggle("value", value);
-					},
-					(row, value) => {
-						row.classList.toggle("value", value);
+						totalRemoved += change.count || 0;
 					}
-				],
-				"label": [
-					(row, value, item) => {
-						var __av = item.label;
-						if (__av == null || __av === false) row.removeAttribute("data-label");
-						else {
-							const __newAttr = String(__av);
-							if (row.getAttribute("data-label") !== __newAttr) row.setAttribute("data-label", __newAttr);
+					if (onlyRemoves && __kl_entries.length - arr.length === totalRemoved) {
+						if (changes.length === 1 && changes[0].count === 1) {
+							const idx = changes[0].start;
+							if (idx >= 0 && idx < __kl_entries.length) {
+								__kl_remove(__kl_entries[idx]);
+								__kl_entries.splice(idx, 1);
+							}
+							__kl_prev = arr;
+							return;
+						}
+						const removed = [];
+						for (let i = 0; i < changes.length; i++) {
+							const start = changes[i].start;
+							const count = changes[i].count;
+							for (let j = 0; j < count; j++) removed.push(start + j);
 						}
-					},
-					(row, value, item) => {
-						const __target = row.__ref_0 || (row.__ref_0 = row.firstElementChild);
-						if (!__target) return;
-						var __av = item.label;
-						if (__av == null || __av === false) __target.removeAttribute("data-label");
-						else {
-							const __newAttr = String(__av);
-							if (__target.getAttribute("data-label") !== __newAttr) __target.setAttribute("data-label", __newAttr);
+						removed.sort((a, b) => b - a);
+						for (let i = 0; i < removed.length; i++) {
+							const idx = removed[i];
+							if (idx >= 0 && idx < __kl_entries.length) {
+								__kl_remove(__kl_entries[idx]);
+								__kl_entries.splice(idx, 1);
+							}
 						}
-					},
-					(row, value, item) => {
-						const __target = row.__ref_0 || (row.__ref_0 = row.firstElementChild);
-						if (!__target) return;
-						if (__target.textContent !== `
-                    ${item.label}
-                  `) __target.textContent = `
-                    ${item.label}
-                  `;
-					},
-					(row, value, item) => {
-						const __target = row.__ref_1 || (row.__ref_1 = row.firstElementChild.nextElementSibling);
-						if (!__target) return;
-						var __av = item.label;
-						if (__av == null || __av === false) __target.removeAttribute("data-label");
-						else {
-							const __newAttr = String(__av);
-							if (__target.getAttribute("data-label") !== __newAttr) __target.setAttribute("data-label", __newAttr);
+						__kl_prev = arr;
+						return;
+					}
+				}
+				const newLen = arr.length;
+				const oldLen = __kl_entries.length;
+				if (oldLen === 0 && newLen > 0) {
+					const nextEntries = new Array(newLen);
+					const frag = __kl_container.ownerDocument.createDocumentFragment();
+					for (let i = 0; i < newLen; i++) {
+						const entry = __kl_create(arr[i], i);
+						nextEntries[i] = entry;
+						__kl_byKey.set(entry.key, entry);
+						frag.appendChild(entry.element);
+					}
+					__kl_container.appendChild(frag);
+					__kl_entries = nextEntries;
+					__kl_prev = arr;
+					return;
+				}
+				const newKeys = new Array(newLen);
+				for (let i = 0; i < newLen; i++) newKeys[i] = __kl_key(arr[i], i);
+				if (newLen === 0) {
+					if (__kl_container.childNodes.length === oldLen) {
+						for (let i = 0; i < oldLen; i++) __kl_entries[i].disposer?.dispose();
+						__kl_container.textContent = "";
+					} else for (let i = oldLen - 1; i >= 0; i--) __kl_remove(__kl_entries[i]);
+					__kl_entries = [];
+					__kl_byKey.clear();
+					__kl_prev = arr;
+					return;
+				}
+				if (newLen === oldLen) {
+					let diffA = -1;
+					let diffB = -1;
+					let diffCount = 0;
+					for (let i = 0; i < newLen; i++) if (__kl_entries[i].key !== newKeys[i]) {
+						if (diffCount === 0) diffA = i;
+						else if (diffCount === 1) diffB = i;
+						diffCount++;
+						if (diffCount > 2) break;
+					}
+					if (diffCount === 2 && __kl_entries[diffA].key === newKeys[diffB] && __kl_entries[diffB].key === newKeys[diffA]) {
+						const entryA = __kl_entries[diffA];
+						const entryB = __kl_entries[diffB];
+						const refB = entryB.element.nextSibling;
+						__kl_container.insertBefore(entryB.element, entryA.element);
+						if (refB) __kl_container.insertBefore(entryA.element, refB);
+						else __kl_container.appendChild(entryA.element);
+						__kl_entries[diffA] = entryB;
+						__kl_entries[diffB] = entryA;
+						if (__kl_unwrap(arr[diffA]) !== entryB.item) __kl_patch(entryB, arr[diffA], diffA);
+						if (__kl_unwrap(arr[diffB]) !== entryA.item) __kl_patch(entryA, arr[diffB], diffB);
+						__kl_prev = arr;
+						return;
+					}
+				}
+				if (oldLen > 0 && newLen > 0 && __kl_container.childNodes.length === oldLen) {
+					let disjoint = true;
+					for (let i = 0; i < newLen; i++) if (__kl_byKey.has(newKeys[i])) {
+						disjoint = false;
+						break;
+					}
+					if (disjoint) {
+						for (let i = 0; i < oldLen; i++) __kl_entries[i].disposer?.dispose();
+						__kl_byKey.clear();
+						const nextEntries = new Array(newLen);
+						const nextNodes = new Array(newLen);
+						for (let i = 0; i < newLen; i++) {
+							const entry = __kl_create(arr[i], i);
+							nextEntries[i] = entry;
+							nextNodes[i] = entry.element;
+							__kl_byKey.set(entry.key, entry);
 						}
-					},
-					(row, value) => {
-						row.classList.toggle("label", value);
-					},
-					(row, value) => {
-						row.classList.toggle("label", value);
-					},
-					(row, value) => {
-						row.classList.toggle("label", value);
+						__kl_container.replaceChildren(...nextNodes);
+						__kl_entries = nextEntries;
+						__kl_prev = arr;
+						return;
+					}
+				}
+				for (let i = 0; i < oldLen; i++) __kl_entries[i]._i = i;
+				const seenOld = new Array(oldLen).fill(false);
+				const nextEntries = new Array(newLen);
+				for (let i = 0; i < newLen; i++) {
+					const entry = __kl_byKey.get(newKeys[i]);
+					if (entry) {
+						const oldIdx = entry._i;
+						seenOld[oldIdx] = true;
+						nextEntries[i] = entry;
 					}
-				]
+				}
+				for (let i = oldLen - 1; i >= 0; i--) if (!seenOld[i]) __kl_remove(__kl_entries[i]);
+				let nextRef = null;
+				for (let i = newLen - 1; i >= 0; i--) {
+					let entry = nextEntries[i];
+					if (!entry) {
+						entry = __kl_create(arr[i], i);
+						__kl_byKey.set(entry.key, entry);
+					} else if (entry.item !== __kl_unwrap(arr[i])) __kl_patch(entry, arr[i], i);
+					if (entry.element.parentNode !== __kl_container || entry.element.nextSibling !== nextRef) __kl_container.insertBefore(entry.element, nextRef);
+					nextEntries[i] = entry;
+					nextRef = entry.element;
+				}
+				__kl_entries = nextEntries;
+				__kl_prev = arr;
+			};
+			if (__kl_root && typeof __kl_root.observe === "function") {
+				const off = __kl_root.observe("filteredItems", (_value, changes) => {
+					__kl_reconcile(__kl_resolve(), changes);
+				});
+				d.add(off);
 			}
-		};
-	}
-	[GEA_SETUP_LOCAL_STATE_OBSERVERS]() {
-		this[GEA_ENSURE_ARRAY_CONFIGS]();
-		if (!this[GEA_STORE_ROOT]) return;
-		this[GEA_OBSERVE](this, ["filteredItems"], this.__observe_local_filteredItems);
+		}
+		return root;
 	}
 };
 //#endregion