@popcorn245/cornfield-components 0.52.1 → 0.54.0

package/dist/corn-search.js

@@ -1 +1,484 @@
-export { t as CornSearch } from "./chunks/corn-search-CXs5d06S.js";
+import { t as e } from "./chunks/rolldown-runtime-CGnMp29N.js";
+import { n as t, r as n, t as r } from "./chunks/runtime-DFu6W5g-.js";
+import { n as i, t as a } from "./chunks/around-BcnegEdS.js";
+import { Dn as o, En as s, F as c, Kt as l, O as u, P as d, Q as f, Ut as p, cn as m, dn as h, et as g, hn as _, jn as v, qt as y, rn as b, t as x } from "./chunks/engine-xmHJvQY9.js";
+import { _ as ee } from "./chunks/layers-ho10a2y7.js";
+import "./chunks/sheets-BWANwtZP.js";
+var S = (e, t) => `${v(e, "searchNoMatch")} “${t}”`, C = (e) => e.slot("search-status", () => {
+	let t = { pending: null };
+	return e.own(() => clearTimeout(t.pending)), t;
+});
+function w(e, t) {
+	e.emit("search:status", t);
+}
+function T(e, t) {
+	let n = C(e);
+	clearTimeout(n.pending), n.pending = null, w(e, t);
+}
+function E(e, t, n, r = "") {
+	let i = C(e);
+	clearTimeout(i.pending), i.pending = null, w(e, "");
+	let a = t ? n ? r : S(e, t) : "";
+	a && (i.pending = setTimeout(() => {
+		i.pending = null, w(e, a);
+	}, 400));
+}
+// ../explorer/search-model.js
+var D = "In layers that are off";
+function O(e, t, n = {}) {
+	let r = String(t || "").trim().toLowerCase(), i = n.visible || (() => !0), a = n.parentLabel || (() => ""), o = {
+		query: String(t || "").trim(),
+		matches: [],
+		groups: [],
+		total: 0,
+		onMap: 0,
+		off: 0,
+		rows: 0,
+		more: 0
+	};
+	if (!r) return o;
+	let s = [];
+	for (let t of e) {
+		let e = c(t, r);
+		e < 0 || s.push({
+			node: t,
+			rank: e,
+			on: !!i(t),
+			group: d(t),
+			parent: a(t)
+		});
+	}
+	s.sort((e, t) => e.rank - t.rank || String(e.node.label).localeCompare(String(t.node.label)) || String(e.node.id).localeCompare(String(t.node.id)));
+	let l = /* @__PURE__ */ new Map();
+	for (let e of s) {
+		let t = e.on ? `on|${e.group}` : "off";
+		l.has(t) || l.set(t, {
+			name: e.on ? e.group : D,
+			off: !e.on,
+			rows: []
+		}), l.get(t).rows.push(e);
+	}
+	let u = [...l.values()].sort((e, t) => Number(e.off) - Number(t.off) || e.rows[0].rank - t.rows[0].rank || e.name.localeCompare(t.name));
+	o.matches = u.flatMap((e) => e.rows), o.total = o.matches.length, o.onMap = s.filter((e) => e.on).length, o.off = o.total - o.onMap;
+	let f = 50;
+	for (let e of u) {
+		if (f <= 0) break;
+		o.groups.push({
+			name: e.name,
+			off: e.off,
+			count: e.rows.length,
+			rows: e.rows.slice(0, f)
+		}), f -= e.rows.length;
+	}
+	return o.rows = Math.min(50, o.total), o.more = Math.max(0, o.total - 50), o;
+}
+function k(e, t, n) {
+	if (!e.length) return -1;
+	let r = e.findIndex((e) => e.node.id === t);
+	return r < 0 ? n < 0 ? e.length - 1 : 0 : (r + (n < 0 ? -1 : 1) + e.length) % e.length;
+}
+function A(e, t) {
+	if (!e.query) return "";
+	if (!e.total) return "No match";
+	let n = e.matches.findIndex((e) => e.node.id === t);
+	return n >= 0 ? `${n + 1} of ${e.total}` : e.total === 1 ? "1 match" : `${e.total} matches`;
+}
+var j = (e) => `No node matches “${e}”. Search reads names, files, types and kinds.`, M = (e) => `and ${e} more: type more to narrow`, N = /* @__PURE__ */ e({
+	MATCH_ZOOM: () => 1,
+	markup: () => I,
+	mount: () => V,
+	resultsHtml: () => R
+}), P = [{
+	input: "node-search",
+	count: "search-count",
+	results: "search-results",
+	steps: "search-steps"
+}, {
+	input: "mobile-node-search",
+	count: "mobile-search-count",
+	results: "mobile-search-results",
+	steps: "mobile-search-steps"
+}], F = Symbol("frame all"), I = ({ phone: e = !0 } = {}) => ({
+	field: `${e ? "<button type=\"button\" id=\"mobile-search-toggle\" class=\"hx-hdr-icon hx-only-mobile\" data-corn=\"mobile-search-button\" data-action=\"toggle-mobile-search\" aria-label=\"Open Search\" title=\"Search nodes\" data-corn-kind=\"icon\">\n  <svg viewBox=\"0 0 16 16\" width=\"18\" height=\"18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" aria-hidden=\"true\" focusable=\"false\"><circle cx=\"7\" cy=\"7\" r=\"4.5\" /><path d=\"M10.5 10.5L14 14\" /></svg>\n</button>\n\n" : ""}<div class="hx-search" role="search" data-corn="search">
+  <svg class="hx-search-icon" viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" aria-hidden="true" focusable="false"><circle cx="7" cy="7" r="4.5" /><path d="M10.5 10.5L14 14" /></svg>
+  <input type="text" id="node-search" class="hx-search-input" placeholder="Search..." data-corn-string-placeholder="searchPlaceholder" aria-label="Search nodes" aria-keyshortcuts="/" data-corn="search-input" />
+  <kbd class="hx-kbd" data-corn="search-key" aria-hidden="true">/</kbd>
+  <span id="search-steps" class="hx-search-steps" data-corn="search-steps" hidden>
+    <span id="search-count" class="hx-search-count" data-corn="search-count" aria-hidden="true"></span>
+    <button type="button" class="hx-search-btn" data-action="search-prev" aria-label="Previous match" title="Previous match (Shift+Enter)" data-corn-kind="icon"><svg viewBox="0 0 16 16" width="12" height="12" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M3.5 10.5L8 6l4.5 4.5" /></svg></button>
+    <button type="button" class="hx-search-btn" data-action="search-next" aria-label="Next match" title="Next match (Enter)" data-corn-kind="icon"><svg viewBox="0 0 16 16" width="12" height="12" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M3.5 5.5L8 10l4.5-4.5" /></svg></button>
+    <button type="button" class="hx-search-btn" data-action="clear-search" aria-label="Clear search" title="Clear search (Escape)" data-corn-kind="icon"><svg viewBox="0 0 16 16" width="12" height="12" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" aria-hidden="true" focusable="false"><path d="M4 4l8 8M12 4l-8 8" /></svg></button>
+  </span>
+  <div id="search-status" class="hx-search-status" role="status" aria-live="polite" data-corn="search-status"></div>
+  <div id="search-results" class="hx-search-results" data-corn="search-results" hidden></div>
+</div>`,
+	bar: e ? "<div id=\"mobile-search-bar\" class=\"hx-mobile-search glass-header\" role=\"search\" hidden data-corn=\"mobile-search\">\n  <input type=\"text\" id=\"mobile-node-search\" class=\"hx-input hx-input--wide\" placeholder=\"Search nodes, apps, components...\" aria-label=\"Search nodes\" data-corn=\"search-input\" />\n  <button type=\"button\" class=\"hx-textbtn\" data-action=\"close-mobile-search\" data-corn-kind=\"quiet\">Cancel</button>\n  <span id=\"mobile-search-steps\" class=\"hx-search-steps\" data-corn=\"search-steps\" hidden>\n        <span id=\"mobile-search-count\" class=\"hx-search-count\" data-corn=\"search-count\" aria-hidden=\"true\"></span>\n        <button type=\"button\" class=\"hx-search-btn\" data-action=\"search-prev\" aria-label=\"Previous match\" title=\"Previous match (Shift+Enter)\" data-corn-kind=\"icon\"><svg viewBox=\"0 0 16 16\" width=\"12\" height=\"12\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M3.5 10.5L8 6l4.5 4.5\" /></svg></button>\n        <button type=\"button\" class=\"hx-search-btn\" data-action=\"search-next\" aria-label=\"Next match\" title=\"Next match (Enter)\" data-corn-kind=\"icon\"><svg viewBox=\"0 0 16 16\" width=\"12\" height=\"12\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M3.5 5.5L8 10l4.5-4.5\" /></svg></button>\n        <button type=\"button\" class=\"hx-search-btn\" data-action=\"clear-search\" aria-label=\"Clear search\" title=\"Clear search (Escape)\" data-corn-kind=\"icon\"><svg viewBox=\"0 0 16 16\" width=\"12\" height=\"12\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M4 4l8 8M12 4l-8 8\" /></svg></button>\n      </span>\n  <div id=\"mobile-search-status\" class=\"hx-search-status\" role=\"status\" aria-live=\"polite\" data-corn=\"search-status\"></div>\n  <div id=\"mobile-search-results\" class=\"hx-search-results\" data-corn=\"search-results\" hidden></div>\n</div>" : ""
+});
+function L(e, t, n, r = !1) {
+	let i = n ? ` · ${l(t.group)}` : "", a = t.parent ? l(t.parent) : "", o = e.searchCurrent === t.node.id;
+	return `<button type="button" role="option" class="hx-search-row" data-corn="search-result" data-search-id="${l(t.node.id)}" tabindex="${r ? 0 : -1}" aria-selected="${o}"${o ? " aria-current=\"true\"" : ""}><span class="hx-search-row-label">${l(t.node.label)}</span><span class="hx-search-row-parent">${a}${i}</span></button>`;
+}
+function R(e, t, n = "search-listbox") {
+	if (!t.query) return "";
+	if (!t.total) return `<p class="hx-search-empty" data-corn="search-empty">${l(j(t.query))}</p>`;
+	let r = t.groups.flatMap((e) => e.rows), i = r.some((t) => t.node.id === e.searchCurrent) ? e.searchCurrent : t.onMap ? F : r[0].node.id, a = t.onMap ? `<button type="button" role="option" aria-selected="false" class="hx-search-row hx-search-frame" data-corn="search-result" data-search-frame tabindex="${i === F ? 0 : -1}">Frame all ${t.onMap}</button>` : "", o = t.groups.map((t) => `<div class="hx-search-group" role="group" aria-label="${l(t.name)}, ${t.count}" data-corn="search-group"><div class="hx-search-group-title" aria-hidden="true">${l(t.name)} <span class="hx-search-group-count">${t.count}</span></div>${t.rows.map((n) => L(e, n, t.off, n.node.id === i)).join("")}</div>`).join(""), s = t.more ? `<p class="hx-search-more">${l(M(t.more))}</p>` : "";
+	return `<div role="listbox" id="${l(n)}" aria-label="Search results">${a}${o}</div>${s}`;
+}
+var z = (e) => [...e.querySelectorAll("[data-corn=\"search-result\"]")], B = (e) => !!e && (e.isContentEditable || /^(INPUT|TEXTAREA|SELECT)$/.test(e.tagName));
+function V(e, t, n = {}) {
+	let { state: r } = t, a = o(t), c = [...s(t, e, I({ phone: n.phone !== !1 }).field, n.slots, "field"), ...s(t, e, I({ phone: n.phone !== !1 }).bar, n.slots, "bar")], l = (e) => {
+		for (let t of c) {
+			if (t.id === e) return t;
+			let n = t.querySelector(`[id="${e}"]`);
+			if (n) return n;
+		}
+		return null;
+	};
+	a.keepParts(...c);
+	let d = P.filter((e) => l(e.input)), p = null, v = 0;
+	function x() {
+		let e = new Map(r.nodes.map((e) => [e.id, e])), t = /* @__PURE__ */ new Map();
+		for (let e of r.edges) e.kind || e.dashed || t.has(e.to) || t.set(e.to, e.from);
+		return (n) => {
+			let r = e.get(t.get(n.id));
+			return r ? String(r.label || "") : "";
+		};
+	}
+	function S() {
+		let e = `${r.searchQuery}|${r.sceneVersion}|${r.nodes.length}`;
+		if (p && p.key === e && p.nodes === r.nodes) return p.result;
+		let n = O(r.nodes, r.searchQuery, {
+			visible: (e) => t.map.isNodeVisible(e),
+			parentLabel: x()
+		});
+		return p = {
+			key: e,
+			nodes: r.nodes,
+			result: n
+		}, n;
+	}
+	let C = () => !!r.searchQuery && S().total > 0, w = (e) => l(e.results);
+	function D({ keepOpen: e = !0 } = {}) {
+		let n = S(), i = A(n, r.searchCurrent);
+		for (let a of d) {
+			let o = l(a.count);
+			o && (o.textContent = i, o.dataset.empty = n.query && !n.total ? "true" : "false");
+			let s = l(a.steps);
+			if (s) {
+				s.hidden = !n.query;
+				for (let e of s.querySelectorAll("[data-action=\"search-prev\"], [data-action=\"search-next\"]")) e.disabled = !n.total;
+			}
+			let c = w(a);
+			if (!c) continue;
+			let u = l(a.input), d = t.active(), f = !!n.query && e && (d === u || c.contains(d) || c.dataset.open === "true"), p = c.contains(d) ? d : null, m = p ? p.dataset.searchId || (p.hasAttribute("data-search-frame") ? "" : null) : null, h = `${a.results}-listbox`;
+			if (c.innerHTML = f ? R(r, n, h) : "", f) for (let e of c.querySelectorAll("[data-corn]:not([part])")) e.setAttribute("part", e.getAttribute("data-corn"));
+			if (p && f && m !== null) {
+				let e = z(c).find((e) => m === "" ? e.hasAttribute("data-search-frame") : e.dataset.searchId === m);
+				e && e.focus();
+			}
+			if (c.hidden = !f, c.dataset.open = f ? "true" : "false", u) {
+				let e = f && n.total > 0;
+				u.setAttribute("aria-expanded", String(e)), u.setAttribute("aria-controls", e ? h : a.results);
+			}
+		}
+	}
+	function j(e) {
+		let t = w(e);
+		if (!t) return;
+		t.hidden = !0, t.dataset.open = "false", t.innerHTML = "";
+		let n = l(e.input);
+		n && n.setAttribute("aria-expanded", "false");
+	}
+	function M(e) {
+		E(t, e.query, e.total > 0, A(e, r.searchCurrent));
+	}
+	function N(e) {
+		let n = String(e || "").trim(), i = n !== r.searchQuery;
+		r.searchQuery = n, i && (r.searchCurrent = null), t.touchScene();
+		for (let n of d) {
+			let r = l(n.input);
+			r && r.value !== e && (r.value = e || "");
+			let i = w(n);
+			i && r && t.active() === r && (i.dataset.open = "true");
+		}
+		D(), M(S()), t.map.render(), i && t.emit("search", {
+			query: r.searchQuery,
+			current: r.searchCurrent
+		});
+	}
+	function F(e) {
+		let n = [
+			g(r, e),
+			u(e),
+			e.type === "store" || e.type === "rom" ? "flow" : null,
+			e.type === "core" ? "pkg" : null,
+			e.type === "core" ? "core" : null
+		];
+		for (let i of n) {
+			if (t.map.isNodeVisible(e)) return;
+			i && !f(r, i) && ee(t, i);
+		}
+	}
+	function L(e, n) {
+		let r = _(t);
+		return {
+			x: r.x + r.width / 2 - e.x * n,
+			y: r.y + r.height / 2 - e.y * n,
+			zoom: n
+		};
+	}
+	async function V(e, { say: n = !0 } = {}) {
+		let i = e.node, a = ++v;
+		t.map.isNodeVisible(i) || F(i), r.searchCurrent = i.id, t.touchScene();
+		let o = S(), s = o.matches.findIndex((e) => e.node.id === i.id);
+		if (b(t, i, { source: "search" }), a !== v || r.searchCurrent !== i.id) return;
+		m(t, L(i, Math.max(r.camera.zoom, 1))), D(), t.emit("search", {
+			query: r.searchQuery,
+			current: r.searchCurrent
+		});
+		let c = `${s + 1} of ${o.total}: ${i.label}${e.parent ? `, in ${e.parent}` : ""}`;
+		T(t, ""), n && y(t, c);
+	}
+	function H(e) {
+		let t = S();
+		if (!r.searchQuery || !t.total) return !1;
+		let n = k(t.matches, r.searchCurrent, e);
+		return n < 0 ? !1 : (V(t.matches[n]), !0);
+	}
+	function U() {
+		let e = S(), n = new Set(e.matches.filter((e) => e.on).map((e) => e.node.id));
+		n.size && (t.map.fitGraphToViewport(t.map.fitPadding(), n), T(t, ""), y(t, `Framed ${n.size} ${n.size === 1 ? "match" : "matches"}`));
+	}
+	function W(e, n) {
+		let i = e.currentTarget;
+		if (e.key === "Enter") {
+			if (e.isComposing) return;
+			e.preventDefault();
+			let n = i.value.trim();
+			if (n !== r.searchQuery && N(i.value), !n) return;
+			if (!S().total) {
+				y(t, `No node matches ${n}`);
+				return;
+			}
+			H(e.shiftKey ? -1 : 1);
+		} else if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+			let t = w(n);
+			if (!t || t.hidden) {
+				e.key === "ArrowDown" && r.searchQuery && (e.preventDefault(), t.dataset.open = "true", D());
+				return;
+			}
+			let i = z(t);
+			if (!i.length) return;
+			e.preventDefault(), (e.key === "ArrowDown" ? i[0] : i[i.length - 1]).focus();
+		} else if (e.key === "Escape") {
+			let i = w(n);
+			if (i && !i.hidden) {
+				e.preventDefault(), j(n);
+				return;
+			}
+			r.searchQuery && (e.preventDefault(), N(""), y(t, "Search cleared"));
+		}
+	}
+	function G(e, n) {
+		let r = z(w(n)), i = r.indexOf(t.active());
+		if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+			e.preventDefault();
+			let t = i + (e.key === "ArrowDown" ? 1 : -1);
+			t < 0 ? l(n.input).focus() : r[Math.min(r.length - 1, t)].focus();
+		} else e.key === "Home" || e.key === "End" ? (e.preventDefault(), r[e.key === "Home" ? 0 : r.length - 1].focus()) : e.key === "Escape" && (e.preventDefault(), l(n.input).focus());
+	}
+	function K(e) {
+		let n = e.target.closest && e.target.closest("[data-corn=\"search-result\"]");
+		if (!n) return;
+		if (n.hasAttribute("data-search-frame")) {
+			U();
+			return;
+		}
+		let r = S().matches.find((e) => e.node.id === n.dataset.searchId);
+		if (!r) return;
+		V(r);
+		let i = d.find((t) => w(t) === e.currentTarget);
+		if (i && i.input === "mobile-node-search" && h(t)) {
+			j(i);
+			let e = l(i.steps) && l(i.steps).querySelector("[data-action=\"search-next\"]");
+			e && e.focus();
+		}
+	}
+	function q(e, t) {
+		let n = e.relatedTarget, r = l(t.input).closest("[data-corn=\"search\"], [data-corn=\"mobile-search\"]");
+		n && r && r.contains(n) || !n && e.target && e.target.matches && e.target.matches("[data-corn=\"search-result\"]") || j(t);
+	}
+	function J(e) {
+		let t = l("mobile-search-bar"), n = l("mobile-node-search"), i = e === void 0 ? t.hidden : e;
+		t.hidden = !i, i && (n.value = r.searchQuery, a.timeout(() => n.focus(), 60));
+	}
+	for (let e of d) {
+		let t = l(e.input);
+		t.setAttribute("role", "combobox"), t.setAttribute("aria-haspopup", "listbox"), t.setAttribute("aria-autocomplete", "none"), t.setAttribute("aria-expanded", "false"), t.setAttribute("aria-controls", e.results), a.listen(t, "input", (e) => N(e.target.value)), a.listen(t, "keydown", (t) => W(t, e)), a.listen(t, "focus", () => {
+			let t = w(e);
+			t && r.searchQuery && (t.dataset.open = "true", D());
+		});
+		let n = t.closest("[data-corn=\"search\"], [data-corn=\"mobile-search\"]");
+		n && a.listen(n, "focusout", (t) => q(t, e));
+		let i = w(e);
+		i && (a.listen(i, "mousedown", (e) => {
+			e.target.closest && e.target.closest("[data-corn=\"search-result\"]") && e.preventDefault();
+		}), a.listen(i, "click", K), a.listen(i, "keydown", (t) => G(t, e)));
+	}
+	let Y = {
+		"toggle-mobile-search": () => J(),
+		"close-mobile-search": () => J(!1),
+		"clear-search": () => {
+			N("");
+			let e = l("mobile-search-bar");
+			(e && !e.hidden ? l("mobile-node-search") : l("node-search")).focus();
+		},
+		"search-prev": () => H(-1),
+		"search-next": () => H(1)
+	};
+	for (let e of c) a.listen(e, "click", (t) => {
+		let n = t.target.closest && t.target.closest("[data-action]");
+		if (!n || !e.contains(n)) return;
+		let r = Y[n.dataset.action];
+		r && r(n);
+	});
+	function X() {
+		let e = l("node-search");
+		if (e && e.closest(".hx-search") && t.win.getComputedStyle(e.closest(".hx-search")).display !== "none") {
+			e.focus(), e.select();
+			return;
+		}
+		let n = l("mobile-search-bar");
+		if (n && !n.hidden) {
+			l("mobile-node-search").focus();
+			return;
+		}
+		let r = l("mobile-search-toggle");
+		r && r.click();
+	}
+	let Z = typeof e.getRootNode == "function" ? e.getRootNode() : e;
+	a.own(i(t, "keydown", (e) => {
+		if (e.key === "/" && !e.ctrlKey && !e.metaKey && !e.altKey && !B(e.target) && !(Z.querySelector && Z.querySelector("[data-corn=\"dialog-scrim\"]:not([hidden]), .hx-mockup-dialog"))) {
+			e.preventDefault();
+			let n = t.active();
+			if (n && typeof n.matches == "function" && n.matches("[data-corn=\"search-input\"]") && !c.some((e) => e.contains(n))) return;
+			X();
+		}
+	}));
+	let Q = t.slot("search-voice", () => ({
+		current: null,
+		all: /* @__PURE__ */ new Set()
+	})), $ = {};
+	Q.all.add($), Q.current ||= $;
+	for (let e of d) a.listen(l(e.input), "focus", () => {
+		Q.current = $;
+	});
+	return a.own(() => {
+		Q.all.delete($), Q.current === $ && (Q.current = null);
+	}), a.on("search:status", (e) => {
+		Q.current ||= $;
+		for (let t of ["search-status", "mobile-search-status"]) {
+			let n = l(t);
+			n && (n.textContent = Q.current === $ ? e : "");
+		}
+	}), a.on("search", () => {
+		if (!(Q.all.size < 2 || c.some((e) => e.contains(t.active())))) {
+			for (let e of d) {
+				let t = l(e.input);
+				t && t.value.trim() !== r.searchQuery && (t.value = r.searchQuery);
+			}
+			D({ keepOpen: !1 });
+		}
+	}), a.on("search:active", () => C()), a.on("search:step", (e) => H(e)), a.on("layers", () => {
+		r.searchQuery && D();
+	}), a.own(() => {
+		v++, c.forEach((e) => e.remove());
+	}), {
+		elements: c,
+		setQuery: N,
+		stepMatch: H,
+		frameAll: U,
+		chooseMatch: V,
+		currentResult: S,
+		searchActive: C,
+		paintSearch: D,
+		toggleMobileSearch: J,
+		focusField() {
+			let e = l("node-search");
+			e && (e.focus(), e.select());
+		},
+		reset() {
+			p = null, v++, r.searchQuery = "", r.searchCurrent = null;
+		},
+		update(e) {
+			e && "query" in e ? N(e.query) : D();
+		},
+		destroy: () => a.destroy()
+	};
+}
+// \0stencil-css:/home/runner/work/CornField/CornField/explorer/css/base?tag=corn-search&encapsulation=shadow&__ext=css
+var H = () => "*,:before,:after{box-sizing:border-box}*{--hx-control-h:var(--corn-control-height);--hx-seg-inner:calc(var(--hx-control-h) - var(--corn-space-1) - 2 * var(--corn-border))}@container corn-box (width<=767px){*{--hx-control-h:max(44px, var(--corn-control-height));--hx-seg-inner:var(--hx-control-h)}}img{image-rendering:var(--hx-pixelated,auto)}[hidden]{display:none!important}button{font:inherit;color:inherit;cursor:pointer}h1,h2,h3,p{margin:0}.glass{background:var(--corn-surface-1);-webkit-backdrop-filter:blur(var(--corn-blur));border:var(--corn-border) solid var(--corn-line);box-shadow:var(--corn-shadow)}.glass-header{background:color-mix(in srgb, var(--corn-ground) 88%, transparent);-webkit-backdrop-filter:blur(var(--corn-blur));border-bottom:var(--corn-border) solid var(--corn-line)}::-webkit-scrollbar{width:5px;height:5px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:color-mix(in srgb, var(--corn-text) 18%, transparent);border-radius:var(--corn-radius-pill)}::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb, var(--corn-text) 28%, transparent)}.hx-faint{color:var(--corn-text-3)}.hx-mono{font-family:var(--corn-mono);font-size:var(--corn-text-2xs)}.hx-strong{color:var(--corn-text-2)}.hx-bold{font-weight:700}.hx-name{color:var(--corn-text-2)}.hx-accent{color:var(--corn-accent-text)}.hx-good{color:var(--corn-ok)}.hx-warn{color:var(--corn-warn)}.hx-rom{color:var(--corn-hue-fuchsia)}.hx-link{color:var(--corn-info);text-decoration:underline}.hx-link-faint{color:var(--corn-text-3);font-family:var(--corn-mono);font-size:var(--corn-text-2xs)}.hx-link-faint:hover{color:var(--corn-warn)}.hx-code{color:var(--corn-warn);font-family:var(--corn-mono);font-size:var(--corn-text-2xs)}.hx-chips{gap:var(--corn-space-1);padding-top:var(--corn-space-1);flex-wrap:wrap;display:flex}.hx-pt{padding-top:var(--corn-space-3)}.hx-switch{border-radius:var(--corn-radius-pill);border:var(--corn-border) solid var(--corn-line);background:var(--corn-surface-3);flex:none;width:28px;height:16px;position:relative}.hx-switch:after{content:\"\";background:var(--corn-text-3);border-radius:50%;width:10px;height:10px;transition:transform .15s;position:absolute;top:2px;left:2px}[aria-checked=true]>.hx-switch{background:var(--corn-accent);border-color:var(--corn-accent)}[aria-checked=true]>.hx-switch:after{background:var(--corn-text-on-accent);transform:translate(12px)}@media (prefers-reduced-motion:reduce){.hx-switch:after{transition:none}}.hx-btn{align-items:center;gap:var(--corn-space-2);padding:var(--corn-space-1) var(--corn-space-3);border-radius:var(--corn-radius-sm);border:var(--corn-border) solid var(--corn-line);background:var(--corn-surface-2);color:var(--corn-text-2);font-size:var(--corn-text-xs);white-space:nowrap;font-weight:600;transition:background .15s,color .15s,border-color .15s;display:inline-flex}.hx-btn:hover{background:var(--corn-surface-3);color:var(--corn-text)}.hx-btn:focus-visible,.hx-textbtn:focus-visible{outline:var(--corn-focus-width) solid var(--corn-focus);outline-offset:var(--corn-focus-offset)}.hx-btn--active,.hx-btn--active:hover{background:var(--corn-accent);border-color:var(--corn-accent-text);color:var(--corn-text-on-accent);box-shadow:var(--corn-shadow-sm)}.hx-btn--quiet{color:var(--corn-text-3);font-weight:500}.hx-btn--icon{width:28px;height:28px;font-size:var(--corn-text-base);justify-content:center;padding:0}.hx-btn--rom{width:100%;margin-top:var(--corn-space-1);padding:var(--corn-space-2);background:color-mix(in srgb, var(--corn-hue-fuchsia) 20%, transparent);border-color:color-mix(in srgb, var(--corn-hue-fuchsia) 40%, transparent);color:color-mix(in srgb, var(--corn-hue-fuchsia) 60%, var(--corn-text));justify-content:center;font-weight:700}.hx-btn--rom:hover{background:color-mix(in srgb, var(--corn-hue-fuchsia) 30%, transparent)}.hx-input{width:128px;padding:var(--corn-space-1) var(--corn-space-3) var(--corn-space-1) var(--corn-space-6);border-radius:var(--corn-radius-sm);border:var(--corn-border) solid var(--corn-line);background:color-mix(in srgb, var(--corn-ground) 80%, transparent);color:var(--corn-text);font:inherit;font-size:var(--corn-text-sm);user-select:text;outline:none;transition:width .2s,border-color .2s}.hx-input:focus{border-color:var(--corn-focus);width:208px}.hx-input::placeholder{color:var(--corn-text-3)}.hx-input--wide,.hx-input--wide:focus{flex:1;width:100%}.hx-menu-wrap{flex:none;position:relative}.hx-menu{margin-top:var(--corn-space-3);width:288px;max-width:calc(100cqw - 24px);max-height:calc(100cqh - 80px);padding:var(--corn-space-4);border-radius:var(--corn-radius-lg);font-size:var(--corn-text-xs);z-index:50;user-select:none;position:absolute;top:100%;left:0;overflow-y:auto}.hx-textbtn{padding:calc(var(--corn-space-1) / 2) var(--corn-space-1);border-radius:var(--corn-radius-xs);color:var(--corn-text-3);font-size:var(--corn-text-2xs);background:0 0;border:0;font-weight:600}.hx-textbtn:hover{background:var(--corn-line-soft);color:var(--corn-text-2)}.hx-textbtn--accent{color:var(--corn-accent-text)}.hx-close{width:var(--hx-control-h);height:var(--hx-control-h);border-radius:var(--corn-radius-sm);background:var(--corn-surface-2);color:var(--corn-text-3);font-weight:700;font-size:var(--corn-text-base);border:0;flex:none}.hx-close:hover{color:var(--corn-text)}.hx-mark-dot{width:12px;height:12px;margin-right:var(--corn-space-2);border:var(--corn-border-strong) solid var(--corn-changed);vertical-align:-2px;border-radius:50%;flex:none;display:inline-block}.hx-mark-dot--added{border-color:var(--corn-added);border-style:dashed}.hx-mark-dot--changed{border-color:var(--corn-changed)}.hx-mark-dot--removed{border-color:var(--corn-removed);background:color-mix(in srgb, var(--corn-removed) 25%, transparent)}.hx-mark-dot--edit{border-color:var(--corn-edit);border-style:dotted}.hx-glyph{color:color-mix(in srgb, var(--glyph) var(--corn-glyph-mix), var(--corn-text))}.hx-sr-only{clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:0;padding:0;overflow:hidden;position:absolute!important}:where(button,a[href],summary,select,textarea,[tabindex]):focus-visible{outline:var(--corn-focus-width) solid var(--corn-focus);outline-offset:var(--corn-focus-offset)}@media (prefers-reduced-motion:reduce){.hx-input,.hx-btn,.hx-menu{transition:none;animation:none}}.hx-btn[aria-disabled=true]{opacity:.6;cursor:progress}@container corn-box (width<=767px){.hx-textbtn{min-width:44px;min-height:44px}}@media (pointer:coarse){.hx-textbtn{min-width:44px;min-height:44px}}", U = () => ".hx-search{align-items:center;gap:var(--corn-space-3);width:260px;min-width:120px;height:var(--hx-control-h);padding:0 var(--corn-space-3);border-radius:var(--corn-radius-sm);border:var(--corn-border) solid var(--corn-line);background:var(--corn-surface-2);color:var(--corn-text-3);display:none}.hx-search:focus-within{border-color:var(--corn-focus);outline:var(--corn-focus-width) solid var(--corn-focus);outline-offset:var(--corn-focus-offset)}.hx-search-icon{flex:none}.hx-search-input{min-width:0;color:var(--corn-text);font:inherit;font-size:var(--corn-text-sm);user-select:text;background:0 0;border:0;outline:none;flex:1}.hx-search-input::placeholder{color:var(--corn-text-3)}.hx-kbd{padding:0 var(--corn-space-1);border-radius:var(--corn-radius-xs);border:var(--corn-border) solid var(--corn-line);font-family:var(--corn-mono);font-size:var(--corn-text-2xs);color:var(--corn-text-3);flex:none}.hx-search:focus-within .hx-kbd{display:none}.hx-hdr-icon{width:var(--hx-control-h);height:var(--hx-control-h);border-radius:var(--corn-radius-sm);color:var(--corn-text-2);background:0 0;border:0;justify-content:center;align-items:center;padding:0}.hx-hdr-icon:hover{background:var(--corn-surface-3);color:var(--corn-text)}@container corn-box (width>=768px){.hx-search{flex:0 260px;width:auto;display:flex}}.hx-mobile-search{align-items:center;gap:var(--corn-space-3);padding:var(--corn-space-3);z-index:30;display:flex;position:absolute;top:56px;left:0;right:0}.hx-mobile-search:before{content:\"\";top:50%;left:calc(var(--corn-space-3) + 8px);background:var(--corn-text-3);pointer-events:none;z-index:1;width:14px;height:14px;position:absolute;transform:translateY(-50%);-webkit-mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z'/%3E%3C/svg%3E\") 50%/contain no-repeat;mask:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z'/%3E%3C/svg%3E\") 50%/contain no-repeat}@media (forced-colors:active){.hx-mobile-search:before{background:canvastext}}.hx-search{position:relative}.hx-search-status{clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:0;padding:0;position:absolute;overflow:hidden}@container corn-box (width<=767px){.hx-mobile-search .hx-input{min-height:44px}}@media (pointer:coarse){.hx-mobile-search .hx-input{min-height:44px}}.hx-search-steps{align-items:center;gap:var(--corn-space-1);flex:none;display:flex}.hx-search-steps[hidden]{display:none}.hx-search-count{padding:0 var(--corn-space-2);font-size:var(--corn-text-2xs);color:var(--corn-text-2);white-space:nowrap;font-variant-numeric:tabular-nums}.hx-search-count[data-empty=true]{color:var(--corn-text);font-weight:600}.hx-search-btn{border-radius:var(--corn-radius-xs);width:24px;height:24px;color:var(--corn-text-3);background:0 0;border:0;justify-content:center;align-items:center;padding:0;display:inline-flex}.hx-search-btn:hover{background:var(--corn-surface-3);color:var(--corn-text)}.hx-search-btn:focus-visible,.hx-search-row:focus-visible{outline:var(--corn-focus-width) solid var(--corn-focus);outline-offset:calc(var(--corn-focus-offset) * -1)}.hx-search:has(.hx-search-steps:not([hidden])){flex-basis:340px}@container corn-box (width>=768px) and (width<=959px){.hx-search [data-action=search-prev],.hx-search [data-action=search-next]{display:none}}.hx-search-results{top:calc(100% + var(--corn-space-2));z-index:40;width:min(440px,92cqw);max-height:min(calc(60 * var(--hx-vh,1cqh)), 560px);padding:var(--corn-space-1) 0;border-radius:var(--corn-radius-sm);border:var(--corn-border) solid var(--corn-line);background:var(--corn-ground);box-shadow:var(--corn-shadow);color:var(--corn-text);font-size:var(--corn-text-sm);position:absolute;right:0;overflow-y:auto}.hx-search-results[hidden]{display:none}.hx-header:has(.hx-search-results:not([hidden])),.hx-mobile-search:has(.hx-search-results:not([hidden])){z-index:46}.hx-search-group-title{justify-content:space-between;gap:var(--corn-space-3);padding:var(--corn-space-2) var(--corn-space-3) var(--corn-space-1);background:var(--corn-ground);color:var(--corn-text-3);font-size:var(--corn-text-2xs);text-transform:uppercase;letter-spacing:.05em;font-weight:700;display:flex;position:sticky;top:0}.hx-search-row{justify-content:space-between;align-items:baseline;gap:var(--corn-space-3);width:100%;min-height:28px;padding:var(--corn-space-1) var(--corn-space-3);border:0;border-left:var(--corn-border-strong) solid transparent;color:var(--corn-text);font:inherit;text-align:left;cursor:pointer;background:0 0;display:flex}.hx-search-row:hover,.hx-search-row:focus-visible{background:var(--corn-surface-3)}.hx-search-row[aria-current=true]{border-left-color:var(--corn-accent);background:var(--corn-accent-soft)}.hx-search-row-label{text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}.hx-search-row-parent{text-overflow:ellipsis;white-space:nowrap;max-width:45%;color:var(--corn-text-3);font-size:var(--corn-text-xs);flex:none;overflow:hidden}.hx-search-frame{color:var(--corn-text);font-weight:600}.hx-search-empty,.hx-search-more{padding:var(--corn-space-2) var(--corn-space-3);color:var(--corn-text-2);overflow-wrap:anywhere;margin:0}.hx-mobile-search{flex-wrap:wrap}.hx-mobile-search .hx-input{flex:1 1 0;min-width:0}.hx-mobile-search:before{top:calc(var(--corn-space-3) + 22px)}.hx-mobile-search .hx-search-steps{justify-content:flex-end;gap:var(--corn-space-1);flex:1 0 100%}.hx-mobile-search .hx-search-count{font-size:var(--corn-text-xs);margin-right:auto}.hx-mobile-search .hx-search-results{width:auto;max-height:calc(50 * var(--hx-vh,1cqh));border-left:0;border-right:0;border-radius:0;top:100%;left:0;right:0}@container corn-box (width<=767px){.hx-search-btn{min-width:44px;min-height:44px}.hx-search-row{min-height:44px}}@media (pointer:coarse){.hx-search-btn{min-width:44px;min-height:44px}.hx-search-row{min-height:44px}}@media (forced-colors:active){.hx-search-row[aria-current=true]{border-left-color:highlight}}", W = () => ":host{min-width:0;color:var(--corn-text);font-family:var(--corn-font);display:block;position:relative;container:corn-box/inline-size}:host([hidden]){display:none!important}.hx-search{flex:auto;width:100%;min-width:0;display:flex}@container corn-box (width<=767px){.hx-search{height:auto;min-height:var(--hx-control-h);padding-block:var(--corn-space-1);flex-wrap:wrap}.hx-search .hx-search-input{min-height:var(--hx-control-h);flex:6rem}.hx-search .hx-search-steps{flex:1 0 100%;justify-content:flex-end}}.hx-search-results{width:max(100%,min(26rem,92cqw));left:0;right:auto}.hx-needs{color:var(--corn-text-3);font-size:var(--corn-text-sm);margin:0}", G = class extends r {
+	constructor(e) {
+		super(), e !== !1 && this.__registerHost(), this.__attachShadow(), this.cornSearch = t(this, "cornSearch", 7);
+	}
+	get el() {
+		return this;
+	}
+	query;
+	cornSearch;
+	piece = null;
+	scope = null;
+	loaded = !1;
+	changes = {};
+	connectedCallback() {
+		this.loaded && this.mountPiece();
+	}
+	componentDidLoad() {
+		this.loaded = !0, this.mountPiece();
+	}
+	disconnectedCallback() {
+		this.unmountPiece();
+	}
+	unmountPiece() {
+		this.piece && this.piece.destroy(), this.piece = null, this.scope && this.scope.leave(), this.scope = null;
+	}
+	remount() {
+		this.unmountPiece(), this.loaded && this.el.isConnected && this.mountPiece();
+	}
+	mountPiece() {
+		!this.piece && this.el.shadowRoot && (this.changes = {}, this.scope = p(this.el, () => this.remount()), this.piece = a(N, this.el.shadowRoot, this.scope.inst, {
+			tokens: x,
+			initial: this.query ? { query: this.query } : {},
+			onSearch: (e) => {
+				this.query = e.query, delete this.changes.query, this.cornSearch.emit(e);
+			}
+		}));
+	}
+	componentDidRender() {
+		let e = this.changes;
+		this.changes = {}, this.piece && Object.keys(e).length && this.piece.update(e);
+	}
+	changed(e, t, n) {
+		this.changes[n] = e;
+	}
+	async focusField() {
+		this.piece && this.piece.focusField();
+	}
+	static get watchers() {
+		return { query: [{ changed: 0 }] };
+	}
+	static get style() {
+		return H() + U() + W();
+	}
+};
+n(G, [
+	513,
+	"corn-search",
+	{
+		query: [1025],
+		focusField: [64]
+	},
+	void 0,
+	{ query: [{ changed: 0 }] }
+]);
+export { G as CornSearch };

package/dist/index.js

@@ -1,9 +1,12 @@
-import { t as e } from "./chunks/corn-layers-Cni5rISZ.js";
-import { t } from "./chunks/corn-map-B2-YxiEL.js";
-import { t as n } from "./chunks/corn-node-panel-BkvJThlp.js";
-import { t as r } from "./chunks/corn-review-5wf7AT4o.js";
-import { CornScope as i } from "./corn-scope.js";
-import { t as a } from "./chunks/corn-search-CXs5d06S.js";
+import { CornChanges as e } from "./corn-changes.js";
+import { CornDecision as t } from "./corn-decision.js";
+import { CornLayers as n } from "./corn-layers.js";
+import { CornMap as r } from "./corn-map.js";
+import { CornNodePanel as i } from "./corn-node-panel.js";
+import { CornProposal as a } from "./corn-proposal.js";
+import { CornReview as o } from "./corn-review.js";
+import { CornScope as s } from "./corn-scope.js";
+import { CornSearch as c } from "./corn-search.js";
 // src/index.ts
-var o = "0.52.1";
-export { e as CornLayers, t as CornMap, n as CornNodePanel, r as CornReview, i as CornScope, a as CornSearch, o as version };
+var l = "0.54.0";
+export { e as CornChanges, t as CornDecision, n as CornLayers, r as CornMap, i as CornNodePanel, a as CornProposal, o as CornReview, s as CornScope, c as CornSearch, l as version };