@tea-agent/loop-agent 0.35.0-beta.2 → 0.35.1-beta.0

package/dist/worker/observe/static/dom.js

@@ -1,220 +1,220 @@
-/** DOM helpers (Observe UI R5). */
-
-/**
- * Stable key → node maps, kept per (parent, scope) so reconcileKeyed never
- * depends on dataset support. A WeakMap keyed by parent holds a map of
- * scope → Map<key, node>. A stale parent (e.g. after view teardown) releases
- * its bookkeeping automatically. The default scope "default" is used when a
- * caller reconciles all keyed children of a parent in a single pass; multiple
- * reconcilers that share one parent must pass distinct scope strings so they
- * do not clobber each other's keys.
- */
-const reconcileMaps = new WeakMap();
-
-/**
- * Keyed DOM reconciliation: preserve node identity when a stable key recurs
- * across renders; create a fresh node (with fresh closures) when the key is
- * new; remove nodes whose key dropped out of the item set.
- *
- * Callers drive node construction via `create` and content sync via optional
- * `update`. The parent is not bulk-cleared, so headings/headers placed outside
- * this call survive, and scrolling/focus/pointer state on reused nodes is kept.
- *
- * @param {Node} parent
- * @param {Array} items
- * @param {{ getKey: (item: any, index: number) => string,
- *           create: (item: any, index: number) => Node,
- *           update?: (node: any, item: any, index: number) => void,
- *           scope?: string }} opts
- * @returns {Array<Node>} the (possibly reused) nodes in item order
- */
-export function reconcileKeyed(parent, items, opts) {
-	const { getKey, create, update, scope = "default" } = opts;
-	let scopes = reconcileMaps.get(parent);
-	if (!scopes) {
-		scopes = new Map();
-		reconcileMaps.set(parent, scopes);
-	}
-	let map = scopes.get(scope);
-	if (!map) {
-		map = new Map();
-		scopes.set(scope, map);
-	}
-
-	const nextKeys = new Set();
-	const result = [];
-	for (let i = 0; i < items.length; i++) {
-		const item = items[i];
-		const key = String(getKey(item, i));
-		nextKeys.add(key);
-		let node = map.get(key);
-		if (node) {
-			if (update) update(node, item, i);
-		} else {
-			node = create(item, i);
-			map.set(key, node);
-			// Sync freshly created nodes so callers can split structure (create) from
-			// content (update) and still populate the first paint.
-			if (update) update(node, item, i);
-		}
-		result.push(node);
-	}
-
-	// Remove nodes whose key is no longer present in THIS scope.
-	for (const [key, node] of map) {
-		if (!nextKeys.has(key)) {
-			parent.removeChild(node);
-			map.delete(key);
-		}
-	}
-
-	const resultSet = new Set(result);
-	const currentOrder = childNodesOf(parent).filter((node) => resultSet.has(node));
-	const orderChanged =
-		currentOrder.length !== result.length ||
-		currentOrder.some((node, index) => node !== result[index]);
-	if (orderChanged) {
-		for (const node of result) parent.appendChild(node);
-	}
-
-	return result;
-}
-
-function childNodesOf(node) {
-	return Array.from(node.childNodes ?? node.children ?? []);
-}
-
-function nodeKind(node) {
-	if (node.nodeType === 3) return "#text";
-	return node.nodeName ?? node.tagName ?? "";
-}
-
-function syncElementAttributes(current, next) {
-	if (current.getAttributeNames && next.getAttributeNames) {
-		const nextNames = new Set(next.getAttributeNames());
-		for (const name of current.getAttributeNames()) {
-			if (!nextNames.has(name)) current.removeAttribute(name);
-		}
-		for (const name of nextNames) {
-			current.setAttribute(name, next.getAttribute(name));
-		}
-	} else if (current.attrs && next.attrs) {
-		for (const name of Object.keys(current.attrs)) {
-			if (!(name in next.attrs)) delete current.attrs[name];
-		}
-		for (const [name, value] of Object.entries(next.attrs)) {
-			current.setAttribute(name, value);
-		}
-	}
-
-	for (const prop of [
-		"className",
-		"href",
-		"title",
-		"target",
-		"type",
-		"value",
-		"hidden",
-		"tabIndex",
-	]) {
-		if (prop in next) current[prop] = next[prop];
-	}
-}
-
-/**
- * Recursively sync a structurally compatible node without replacing compatible
- * descendants. Existing event listeners and focusable node identity survive;
- * incompatible tag/node kinds are reported to the caller for replacement.
- */
-export function syncCompatibleNode(current, next) {
-	if (!current || !next || nodeKind(current) !== nodeKind(next)) return false;
-	if (current.nodeType === 3 || nodeKind(current) === "#TEXT") {
-		current.textContent = next.textContent;
-		return true;
-	}
-
-	syncElementAttributes(current, next);
-	const currentChildren = childNodesOf(current);
-	const nextChildren = childNodesOf(next);
-	if (nextChildren.length === 0) {
-		current.textContent = next.textContent;
-		return true;
-	}
-
-	for (let index = 0; index < Math.max(currentChildren.length, nextChildren.length); index++) {
-		const currentChild = currentChildren[index];
-		const nextChild = nextChildren[index];
-		if (!nextChild && currentChild) {
-			current.removeChild(currentChild);
-			continue;
-		}
-		if (nextChild && !currentChild) {
-			current.appendChild(nextChild);
-			continue;
-		}
-		if (!syncCompatibleNode(currentChild, nextChild)) {
-			current.replaceChild(nextChild, currentChild);
-		}
-	}
-	return true;
-}
-
-export function clearNode(node) {
-	while (node.firstChild) node.removeChild(node.firstChild);
-}
-
-export function el(tag, className, text) {
-	const node = document.createElement(tag);
-	if (className) node.className = className;
-	if (text !== undefined) node.textContent = text;
-	return node;
-}
-
-export function metaGrid(entries) {
-	const dl = el("dl", "meta-grid");
-	for (const [label, value] of entries) {
-		const item = document.createElement("div");
-		item.className = "meta-item";
-		const dt = document.createElement("dt");
-		dt.textContent = label;
-		const dd = document.createElement("dd");
-		if (value instanceof Node) dd.appendChild(value);
-		else dd.textContent = value ?? "—";
-		item.appendChild(dt);
-		item.appendChild(dd);
-		dl.appendChild(item);
-	}
-	return dl;
-}
-
-export function buildTable(headers, rows) {
-	const table = document.createElement("table");
-	const thead = document.createElement("thead");
-	const headRow = document.createElement("tr");
-	for (const h of headers) {
-		const th = document.createElement("th");
-		th.textContent = h;
-		headRow.appendChild(th);
-	}
-	thead.appendChild(headRow);
-	table.appendChild(thead);
-
-	const tbody = document.createElement("tbody");
-	for (const row of rows) {
-		const tr = document.createElement("tr");
-		if (row.className) tr.className = row.className;
-		if (row.onClick) {
-			tr.classList.add("clickable");
-			tr.addEventListener("click", row.onClick);
-		}
-		for (const cell of row.cells) {
-			const td = document.createElement("td");
-			if (cell instanceof Node) td.appendChild(cell);
-			else td.textContent = cell ?? "—";
-			tr.appendChild(td);
-		}
-		tbody.appendChild(tr);
-	}
-	table.appendChild(tbody);
-	return table;
-}
+/** DOM helpers (Observe UI R5). */
+
+/**
+ * Stable key → node maps, kept per (parent, scope) so reconcileKeyed never
+ * depends on dataset support. A WeakMap keyed by parent holds a map of
+ * scope → Map<key, node>. A stale parent (e.g. after view teardown) releases
+ * its bookkeeping automatically. The default scope "default" is used when a
+ * caller reconciles all keyed children of a parent in a single pass; multiple
+ * reconcilers that share one parent must pass distinct scope strings so they
+ * do not clobber each other's keys.
+ */
+const reconcileMaps = new WeakMap();
+
+/**
+ * Keyed DOM reconciliation: preserve node identity when a stable key recurs
+ * across renders; create a fresh node (with fresh closures) when the key is
+ * new; remove nodes whose key dropped out of the item set.
+ *
+ * Callers drive node construction via `create` and content sync via optional
+ * `update`. The parent is not bulk-cleared, so headings/headers placed outside
+ * this call survive, and scrolling/focus/pointer state on reused nodes is kept.
+ *
+ * @param {Node} parent
+ * @param {Array} items
+ * @param {{ getKey: (item: any, index: number) => string,
+ *           create: (item: any, index: number) => Node,
+ *           update?: (node: any, item: any, index: number) => void,
+ *           scope?: string }} opts
+ * @returns {Array<Node>} the (possibly reused) nodes in item order
+ */
+export function reconcileKeyed(parent, items, opts) {
+	const { getKey, create, update, scope = "default" } = opts;
+	let scopes = reconcileMaps.get(parent);
+	if (!scopes) {
+		scopes = new Map();
+		reconcileMaps.set(parent, scopes);
+	}
+	let map = scopes.get(scope);
+	if (!map) {
+		map = new Map();
+		scopes.set(scope, map);
+	}
+
+	const nextKeys = new Set();
+	const result = [];
+	for (let i = 0; i < items.length; i++) {
+		const item = items[i];
+		const key = String(getKey(item, i));
+		nextKeys.add(key);
+		let node = map.get(key);
+		if (node) {
+			if (update) update(node, item, i);
+		} else {
+			node = create(item, i);
+			map.set(key, node);
+			// Sync freshly created nodes so callers can split structure (create) from
+			// content (update) and still populate the first paint.
+			if (update) update(node, item, i);
+		}
+		result.push(node);
+	}
+
+	// Remove nodes whose key is no longer present in THIS scope.
+	for (const [key, node] of map) {
+		if (!nextKeys.has(key)) {
+			parent.removeChild(node);
+			map.delete(key);
+		}
+	}
+
+	const resultSet = new Set(result);
+	const currentOrder = childNodesOf(parent).filter((node) => resultSet.has(node));
+	const orderChanged =
+		currentOrder.length !== result.length ||
+		currentOrder.some((node, index) => node !== result[index]);
+	if (orderChanged) {
+		for (const node of result) parent.appendChild(node);
+	}
+
+	return result;
+}
+
+function childNodesOf(node) {
+	return Array.from(node.childNodes ?? node.children ?? []);
+}
+
+function nodeKind(node) {
+	if (node.nodeType === 3) return "#text";
+	return node.nodeName ?? node.tagName ?? "";
+}
+
+function syncElementAttributes(current, next) {
+	if (current.getAttributeNames && next.getAttributeNames) {
+		const nextNames = new Set(next.getAttributeNames());
+		for (const name of current.getAttributeNames()) {
+			if (!nextNames.has(name)) current.removeAttribute(name);
+		}
+		for (const name of nextNames) {
+			current.setAttribute(name, next.getAttribute(name));
+		}
+	} else if (current.attrs && next.attrs) {
+		for (const name of Object.keys(current.attrs)) {
+			if (!(name in next.attrs)) delete current.attrs[name];
+		}
+		for (const [name, value] of Object.entries(next.attrs)) {
+			current.setAttribute(name, value);
+		}
+	}
+
+	for (const prop of [
+		"className",
+		"href",
+		"title",
+		"target",
+		"type",
+		"value",
+		"hidden",
+		"tabIndex",
+	]) {
+		if (prop in next) current[prop] = next[prop];
+	}
+}
+
+/**
+ * Recursively sync a structurally compatible node without replacing compatible
+ * descendants. Existing event listeners and focusable node identity survive;
+ * incompatible tag/node kinds are reported to the caller for replacement.
+ */
+export function syncCompatibleNode(current, next) {
+	if (!current || !next || nodeKind(current) !== nodeKind(next)) return false;
+	if (current.nodeType === 3 || nodeKind(current) === "#TEXT") {
+		current.textContent = next.textContent;
+		return true;
+	}
+
+	syncElementAttributes(current, next);
+	const currentChildren = childNodesOf(current);
+	const nextChildren = childNodesOf(next);
+	if (nextChildren.length === 0) {
+		current.textContent = next.textContent;
+		return true;
+	}
+
+	for (let index = 0; index < Math.max(currentChildren.length, nextChildren.length); index++) {
+		const currentChild = currentChildren[index];
+		const nextChild = nextChildren[index];
+		if (!nextChild && currentChild) {
+			current.removeChild(currentChild);
+			continue;
+		}
+		if (nextChild && !currentChild) {
+			current.appendChild(nextChild);
+			continue;
+		}
+		if (!syncCompatibleNode(currentChild, nextChild)) {
+			current.replaceChild(nextChild, currentChild);
+		}
+	}
+	return true;
+}
+
+export function clearNode(node) {
+	while (node.firstChild) node.removeChild(node.firstChild);
+}
+
+export function el(tag, className, text) {
+	const node = document.createElement(tag);
+	if (className) node.className = className;
+	if (text !== undefined) node.textContent = text;
+	return node;
+}
+
+export function metaGrid(entries) {
+	const dl = el("dl", "meta-grid");
+	for (const [label, value] of entries) {
+		const item = document.createElement("div");
+		item.className = "meta-item";
+		const dt = document.createElement("dt");
+		dt.textContent = label;
+		const dd = document.createElement("dd");
+		if (value instanceof Node) dd.appendChild(value);
+		else dd.textContent = value ?? "—";
+		item.appendChild(dt);
+		item.appendChild(dd);
+		dl.appendChild(item);
+	}
+	return dl;
+}
+
+export function buildTable(headers, rows) {
+	const table = document.createElement("table");
+	const thead = document.createElement("thead");
+	const headRow = document.createElement("tr");
+	for (const h of headers) {
+		const th = document.createElement("th");
+		th.textContent = h;
+		headRow.appendChild(th);
+	}
+	thead.appendChild(headRow);
+	table.appendChild(thead);
+
+	const tbody = document.createElement("tbody");
+	for (const row of rows) {
+		const tr = document.createElement("tr");
+		if (row.className) tr.className = row.className;
+		if (row.onClick) {
+			tr.classList.add("clickable");
+			tr.addEventListener("click", row.onClick);
+		}
+		for (const cell of row.cells) {
+			const td = document.createElement("td");
+			if (cell instanceof Node) td.appendChild(cell);
+			else td.textContent = cell ?? "—";
+			tr.appendChild(td);
+		}
+		tbody.appendChild(tr);
+	}
+	table.appendChild(tbody);
+	return table;
+}