@popcorn245/cornfield-components 0.52.0 → 0.53.0

package/dist/chunks/node-panel-CC8UrSzJ.js

@@ -0,0 +1,410 @@
+import { t as e } from "./rolldown-runtime-CGnMp29N.js";
+import { Dn as t, En as n, Jt as r, Kt as i, Tn as a, an as o, dn as s, fn as c, in as l, jn as u, kt as d, nn as f, on as p, qt as m, rn as h, sn as g } from "./engine-xmHJvQY9.js";
+import { D as _, F as v, I as ee, L as y, a as te, b, f as x, g as S, i as C, l as ne, t as w } from "./panel-review-ih7RlfkH.js";
+import { a as re, c as ie, d as ae, i as oe, n as se, o as T, u as E } from "./sheets-BWANwtZP.js";
+// ../explorer/engine/flow-ui.js
+function ce(e, t) {
+	let { state: n } = e, r = (e) => (n.nodes.find((t) => t.id === e) || { label: e }).label, a = n.edges.filter((e) => e.kind === "flow" && (e.from === t.id || e.to === t.id)), o = (e, t, n) => t.length ? `<div class="hx-fact" data-corn="section"><div class="hx-fact-k">${e}</div><div class="hx-fact-v">${C(t.map((e) => `<div class="hx-line"><span><span class="hx-name">${i(r(n ? e.to : e.from))}</span> · ${i(e.label)}${e.status === "live" ? "" : " <span class=\"hx-warn\">(proposed)</span>"}</span></div>`))}</div></div>` : "";
+	return o("Sends to", a.filter((e) => e.from === t.id), !0) + o("Gets from", a.filter((e) => e.to === t.id && e.from !== t.id), !1);
+}
+// ../explorer/mockups-model.js
+var D = {
+	approved: "Reviewed",
+	changed: "Changed since you approved",
+	unreviewed: "Not reviewed yet",
+	missing: "File not found"
+}, O = (e) => D[e] || D.unreviewed, k = (e) => /\.html$/i.test(String(e)) ? "page" : "image";
+function A(e, t, n) {
+	return `/proposals/${encodeURIComponent(e)}/mockups/${n}${t ? `?source=${encodeURIComponent(t)}` : ""}`;
+}
+function j(e, t, n, r, i = {}) {
+	return !e || !t ? [] : x(e).filter((e) => e.node === r).map((e) => ({
+		...e,
+		type: k(e.path),
+		url: A(t, n, e.index),
+		state: i[e.index] || "unreviewed"
+	}));
+}
+function M(e) {
+	if (!e.length) return "";
+	let t = e.map((e) => `<li class="hx-mockup-item" data-corn="row">
+      <button data-corn-kind="secondary" type="button" class="hx-btn hx-mockup-open" data-mockup="${e.index}" aria-haspopup="dialog">${i(e.title)}<span class="hx-sr-only"> (${e.type === "page" ? "page" : "image"}, opens in a window)</span></button>
+      <span class="hx-mockup-state hx-mockup-state--${i(e.state)}" data-corn="state-pill"${v(e.state)}>${i(O(e.state))}</span>
+    </li>`).join("");
+	return `<div class="hx-sec hx-mockups" data-mockups data-corn="section">
+    <h3 class="hx-sec-title" id="hx-mockups-h">${e.length === 1 ? "Mockup" : "Mockups"}</h3>
+    <ul class="hx-mockup-list" aria-labelledby="hx-mockups-h">${t}</ul>
+  </div>`;
+}
+function le(e, t) {
+	return M(j(e.proposal, e.proposalSlug, e.proposalSource, t, e.mockupStates || {}));
+}
+// ../explorer/file-url.js
+var N = {
+	github: "blob",
+	forgejo: "src/branch"
+};
+function P(e) {
+	if (typeof e != "string" || !e || /[\\\u0000-\u001f\u007f]/.test(e) || e.startsWith("/") || /^[A-Za-z][A-Za-z0-9+.-]*:/.test(e)) return null;
+	let t = e.split("/");
+	return t.every((e) => e && e !== "." && e !== "..") ? t : null;
+}
+function ue(e, t, n) {
+	let r = e && Object.hasOwn(N, e.type) && N[e.type], i = P(t), a = P(n || "HEAD"), o = P(e && e.repo);
+	if (!r || !i || !a || !o || o.length !== 2) return null;
+	try {
+		let t = new URL(e.url);
+		if (t.protocol !== "https:" || t.username || t.password || String(e.url).includes("\\")) return null;
+		let n = (e) => e.map(encodeURIComponent).join("/");
+		return t.pathname = `${t.pathname.replace(/\/+$/, "")}/${n(o)}/${r}/${n(a)}/${n(i)}`, t.search = "", t.hash = "", t.href;
+	} catch {
+		return null;
+	}
+}
+// ../explorer/engine/feedback.js
+var F = 6e3, I = (e) => e.slot("feedback", () => /* @__PURE__ */ new Map());
+function L(e, t, n, r = !0) {
+	I(e).set(t, {
+		text: n,
+		ok: r
+	}), m(e, n);
+}
+function R(e, t) {
+	I(e).delete(t);
+}
+function z(e, t, n) {
+	if (!t) return;
+	let r = I(e).get(n);
+	t.hidden = !r, t.textContent = r ? r.text : "", r ? t.dataset.cornState = r.ok ? "success" : "failure" : delete t.dataset.cornState;
+}
+// ../explorer/selection-words.js
+var B = [
+	"ownership",
+	"usage",
+	"flow",
+	"reads",
+	"writes",
+	"calls",
+	"triggers",
+	"delivers",
+	"runs-on",
+	"uses",
+	"extends"
+], V = (e) => Object.hasOwn(o, e) ? o[e].panel : String(e);
+function de(e) {
+	let t = (e) => {
+		let t = B.indexOf(e);
+		return t < 0 ? B.length : t;
+	};
+	return [...e.kinds.entries()].sort((e, n) => t(e[0]) - t(n[0]) || (e[0] < n[0] ? -1 : +(e[0] > n[0]))).map(([e, t]) => ({
+		kind: e,
+		count: t,
+		word: V(e)
+	}));
+}
+function fe(e, t) {
+	let n = [], r = /* @__PURE__ */ new Set();
+	for (let i of e.edges) {
+		if (g(i) !== t) continue;
+		let a = i.from === e.selectedId, o = a ? i.to : i.from;
+		r.has(o) || (r.add(o), n.push({
+			id: o,
+			out: a
+		}));
+	}
+	return n;
+}
+function H(e, t) {
+	return t > 0 ? `${e} connected · ${t} off screen` : `${e} connected · all on screen`;
+}
+// ../explorer/pieces/node-panel.js
+var U = /* @__PURE__ */ e({
+	LINES_CAP: () => 12,
+	copySpec: () => Q,
+	diffPillWords: () => Y,
+	markup: () => X,
+	mount: () => $
+}), W = (e) => `<code class="hx-code">${i(e)}</code>`, G = (e) => `<div class="hx-line">${e}</div>`, K = {
+	"Uses design tokens": "Tokens",
+	"Loaded by the server per request": "Loaded by",
+	"Domains served (Caddyfile → service)": "Domains",
+	"Compose file": "File",
+	"Baked pages": "Baked",
+	"Reads tables": "Reads",
+	"Writes tables": "Writes",
+	"Self-hosted": "Role",
+	"Pushes to (webhook)": "Pushes to",
+	"Calls outside": "Calls",
+	"Client modules": "Modules",
+	"Data flows": "Flows"
+}, pe = /^(?:Defines )?\d+ (?:CSS )?(variable|service)\(s\)$/, me = (e) => {
+	let t = e.replace(/:$/, ""), n = pe.exec(t);
+	return n ? n[1] === "service" ? "Services" : t.startsWith("Defines") ? "Defines" : "Variables" : K[t] || t;
+}, q = (e, t) => t.length ? `<div class="hx-fact" data-corn="section"><div class="hx-fact-k">${i(me(e))}</div><div class="hx-fact-v">${C(t)}</div></div>` : "", J = (e) => `<div class="hx-chips">${C(e.map((e) => `<code class="hx-var">${i(e)}</code>`))}</div>`;
+function he(e) {
+	if (e.type === "external" && e.kind) return e.kind === "web" ? "Public web" : "Cloud";
+	let t = e.type.charAt(0).toUpperCase() + e.type.slice(1);
+	return typeof e.kind == "string" && e.kind ? `${t} · ${e.kind}` : t;
+}
+function ge(e) {
+	if (e.url) try {
+		return new URL(e.url).host;
+	} catch {}
+	return e.host || "";
+}
+function Y(e, t) {
+	let n = e && e.mark;
+	if (!n || n === "none") return "";
+	if (n === "edit") return `${e.editOp === "removed" ? "Removed" : "Added"} by your edit`;
+	let r = t && typeof t.title == "string" ? t.title : "";
+	return r ? `${S[n] || n} by ${r}` : `${S[n] || n} by this proposal`;
+}
+var X = () => ({
+	drawer: "<aside id=\"spec-drawer\" class=\"hx-drawer glass\" aria-label=\"Node details\" inert data-corn=\"node-panel\"><div class=\"hx-drawer-body\"><div class=\"hx-drawer-head\"><div class=\"hx-drawer-id\"><p class=\"hx-kicker\"><span id=\"drawer-badge\" data-corn=\"badge\">Atom</span><span id=\"drawer-host\" data-corn=\"node-host\"></span><span id=\"drawer-diff\" class=\"hx-diffpill\" data-corn=\"diff-pill\" hidden></span></p><h2 id=\"drawer-title\" class=\"hx-drawer-title\" data-corn=\"node-title\">&lt;pop-button&gt;</h2></div><button type=\"button\" class=\"hx-close\" data-action=\"close-drawer\" aria-label=\"Close\" data-corn-kind=\"icon\">✕</button></div><p id=\"drawer-description\" class=\"hx-lead\" hidden></p><div class=\"hx-block\"><div id=\"drawer-meta-list\" class=\"hx-meta\"></div></div></div><div class=\"hx-drawer-foot\" data-corn=\"node-foot\"><a data-corn=\"open-link\" id=\"drawer-file-btn\" data-corn-kind=\"primary\" class=\"hx-open\" href=\"#\" target=\"_blank\" rel=\"noreferrer\" hidden>Open file ↗</a><a data-corn=\"open-link\" id=\"drawer-open-btn\" data-corn-kind=\"primary\" class=\"hx-open\" href=\"#\" target=\"_blank\" rel=\"noreferrer\" hidden>Open route ↗</a><button data-corn-kind=\"secondary\" type=\"button\" id=\"drawer-run-btn\" class=\"hx-btn hx-foot-btn\" data-action=\"start-run\" data-corn-string=\"startRun\" hidden>Start a run</button><button data-corn-kind=\"quiet\" type=\"button\" class=\"hx-btn hx-btn--quiet hx-foot-btn\" data-action=\"copy-spec\" data-corn-string=\"copySpec\">Copy Spec</button><p id=\"copy-spec-result\" class=\"hx-forge-result\" data-corn=\"result\" hidden></p></div></aside>",
+	backdrop: "<div id=\"drawer-backdrop\" class=\"hx-backdrop\" data-action=\"close-drawer\" hidden data-corn=\"backdrop\"></div>"
+}), Z = (e) => e.slot("copy-spec", () => ({ timer: 0 }));
+async function Q(e, t) {
+	let { state: n } = e;
+	if (!n.selectedNode) return;
+	let r = Z(e), i = JSON.stringify({ node: n.selectedNode }, null, 2);
+	clearTimeout(r.timer), R(e, "copy-spec");
+	try {
+		await e.win.navigator.clipboard.writeText(i), L(e, "copy-spec", `Copied the spec of ${n.selectedNode.label || n.selectedNode.id} to the clipboard.`, !0);
+	} catch {
+		L(e, "copy-spec", "The browser did not allow copying, so nothing was copied. Allow clipboard access for this page, then press Copy Spec again.", !1);
+	}
+	z(e, t, "copy-spec"), r.timer = setTimeout(() => {
+		R(e, "copy-spec"), z(e, t, "copy-spec");
+	}, F);
+}
+function _e(e) {
+	let { state: t } = e, n = (e) => t.nodes.find((t) => t.id === e), r = (e) => (n(e) || { label: e }).label, a = (e) => `<span class="hx-name">${i(r(e))}</span>`, o = (e, n, r) => t.edges.filter((t) => t.kind === e && t[n] === r);
+	function s(e) {
+		let s = t.edges.filter((e) => e.kind === "reads"), c = t.edges.filter((e) => e.kind === "writes"), l = t.edges.filter((t) => t.kind === "uses" && t.from === e.id), u = q("Extends:", t.edges.filter((t) => t.kind === "extends" && t.from === e.id).map((e) => G(a(e.to)))) + q("Uses design tokens:", l.map((e) => G(`${a(e.to)} · ${e.vars.length}${J(e.vars)}`))) + (e.type !== "token" && e.vars ? q(`Defines ${e.vars.length} CSS variable(s):`, [J(e.vars)]) : "");
+		if (e.type === "app") {
+			let n = e.deployed ? G(`${/^https?:\/\//.test(e.url) ? `<a data-corn="text-link" class="hx-link" href="${i(e.url)}" target="_blank" rel="noreferrer">${i(e.url)}</a>` : W(e.url)} → ${(e.upstreams || []).map(W).join(" ")}${e.stack ? ` <span class="hx-faint">[${i(e.stack)}]</span>` : ""}`) : G("Not deployed by any stack in this repo"), r = t.edges.filter((t) => t.kind === "runs-on" && t.from === e.id).map((e) => G(`${a(e.to)}${(e.mappings || []).map((e) => `<div class="hx-faint">${W(e.host)} → ${W(e.upstream)}${e.service ? ` = ${W(e.service)}` : ""}</div>`).join("")}`));
+			return q("Served:", [n]) + q("Runs on:", r) + q("Loaded by the server per request:", s.filter((t) => t.to === e.id).map((e) => G(a(e.from)))) + u;
+		}
+		if (e.type === "token") {
+			let n = t.edges.filter((t) => t.kind === "uses" && t.to === e.id);
+			return q(`${e.vars.length} variable(s):`, [J(e.vars)]) + q("Used by:", n.map((e) => G(`${a(e.from)} · ${i(e.vars.join(" "))}`)));
+		}
+		if ([
+			"atom",
+			"molecule",
+			"core"
+		].includes(e.type)) {
+			let n = t.edges.filter((t) => t.dashed && t.to === e.id).map((e) => G(a(e.from)));
+			return (e.table ? q("Record of:", [G(`${i(e.model)} · table ${W(e.table)}`)]) : "") + q("Rendered by:", n) + u;
+		}
+		if (e.type === "stack") return q("Domains served (Caddyfile → service):", t.edges.filter((t) => t.kind === "runs-on" && t.to === e.id).flatMap((e) => (e.mappings || []).map((e) => G(`<span class="hx-name">${i(e.host)}</span> → ${W(e.upstream)}${e.service ? ` = ${W(e.service)}` : ""}`)))) + q(`${(e.services || []).length} service(s):`, (e.services || []).map((e) => G(`<span class="hx-name">${i(e.name)}</span>${e.image ? ` <span class="hx-faint">${i(e.image)}</span>` : ""}${e.ports.length ? `<div>${e.ports.map(W).join(" ")}</div>` : ""}${e.volumes.length ? `<div class="hx-faint">${e.volumes.map(i).join("<br>")}</div>` : ""}`))) + q("Compose file:", [G(W(e.file))]);
+		if (e.type === "table") {
+			let t = s.filter((t) => t.from === e.id), o = c.filter((t) => t.to === e.id), l = t.filter((e) => (n(e.to) || {}).render?.rom === "bake");
+			return (e.model ? q("Model:", [G(i(e.model))]) : "") + q("Read by:", t.map((e) => G(`${a(e.to)} · ${e.keys.map(W).join(" ")}`))) + q("Written by:", o.map((e) => G(`${a(e.from)} · ${i(e.label)}`))) + (l.length ? q("Baked pages:", [G(`a write here re-bakes <span class="hx-rom hx-bold">${l.length}</span> file(s): ${l.map((e) => i(r(e.to))).join(", ")}`)]) : "");
+		}
+		if (e.type === "service") {
+			let t = (e, t) => `${a(e[t])}${e.label && e.label !== "imports" ? ` · ${i(e.label)}` : ""}`;
+			return (e.summary && !String(e.desc || "").includes(e.summary) ? q("Summary:", [G(`<span class="hx-faint">${i(e.summary)}</span>`)]) : "") + q("Started by:", [...(e.triggers || []).map((e) => G(i(e))), ...o("triggers", "to", e.id).map((e) => G(t(e, "from")))]) + q("Jobs:", (e.jobs || []).map((e) => G(`${W(e.name)} · cron ${W(e.cron)}`))) + q("Runs:", o("triggers", "from", e.id).map((e) => G(t(e, "to")))) + q("Calls:", o("calls", "from", e.id).map((e) => G(t(e, "to")))) + q("Called by:", o("calls", "to", e.id).map((e) => G(t(e, "from")))) + q("Reads tables:", s.filter((t) => t.to === e.id).map((e) => G(a(e.from)))) + q("Writes tables:", c.filter((t) => t.from === e.id).map((e) => G(a(e.to)))) + q("Mechanisms:", (e.mechanisms || []).map((e) => G(i(e))));
+		}
+		if (e.type === "container" && e.selfHosted) {
+			let o = (e, t) => `${a(e[t])}${e.label && e.label !== "calls" ? ` · ${i(e.label)}` : ""}`, s = t.edges.filter((t) => t.to === e.id && (t.kind === "calls" || t.kind === "flow" && t.flow === "api")), c = (e) => s.filter((t) => n(t.from)?.type === e).map((e) => G(o(e, "from"))), l = new Set(t.nodes.filter((t) => t.type === "container" && t.stack === e.stack).map((e) => e.id));
+			return q("Self-hosted:", [G(i(e.summary || ""))]) + q("Called by services:", c("service")) + q("Called by endpoints:", c("page")) + q("Called by apps:", c("app")) + q("Pushes to (webhook):", t.edges.filter((e) => e.kind === "delivers" && l.has(e.from) && n(e.to)?.type === "page").map((t) => G(`${a(t.to)}${t.from === e.id ? "" : ` <span class="hx-faint">from ${i(r(t.from))}</span>`}`)));
+		}
+		if (e.type === "external" && e.kind) return w(e, t.nodes, t.edges);
+		if (e.type === "external") {
+			let t = (t) => o("calls", "to", e.id).filter((e) => n(e.from)?.type === t);
+			return q("System:", [G(`${i(e.summary || "")}${e.host ? `<div class="hx-faint">Runs here as ${W(e.host)}</div>` : "<div class=\"hx-faint\">Not run by this stack</div>"}`)]) + q("Client modules:", (e.modules || []).map((e) => G(W(e)))) + q("Called by services:", t("service").map((e) => G(a(e.from)))) + q("Called by endpoints:", t("page").map((e) => G(a(e.from)))) + q("Pushes to (webhook):", o("delivers", "from", e.id).map((e) => G(a(e.to))));
+		}
+		if (e.type === "page") {
+			let n = e.render, r = t.edges.filter((t) => t.dashed && t.from === e.id).map((e) => G(a(e.to)));
+			return (e.methods ? q("Methods:", [G(e.methods.map(W).join(" "))]) : "") + (e.render_fn ? q("Rendered by:", [G(`${W(e.render_fn)} · ${i(e.file)}`)]) : "") + q("Calls outside:", o("calls", "from", e.id).map((e) => G(a(e.to)))) + q("Pushed to by:", o("delivers", "to", e.id).map((e) => G(`${a(e.from)} · ${i(e.label)}`))) + q("Starts:", o("triggers", "from", e.id).map((e) => G(`${a(e.to)} · ${i(e.label)}`))) + q("Renders:", r) + q("Reads:", s.filter((t) => t.to === e.id).map((e) => G(`${a(e.from)} · ${e.keys.map(W).join(" ")}`))) + q("Writes:", c.filter((t) => t.from === e.id).map((e) => G(`${a(e.to)} · ${i(e.label)}`))) + (n ? q("Render:", [G(`today: ${W(n.now)} · ROM: ${n.rom === "bake" ? "<span class=\"hx-rom hx-bold\">bake</span>" : "<span class=\"hx-faint\">skip (per request)</span>"}${n.note ? `<div class="hx-faint">${i(n.note)}</div>` : ""}`)]) : "");
+		}
+		return "";
+	}
+	function c(t) {
+		let n = e.ask("threads:index", t.id);
+		if (!n) return "";
+		let r = n.threads, a = n.start ? `<button data-corn-kind="quiet" type="button" class="hx-btn hx-btn--quiet hx-textact" data-thread-start="${i(t.id)}" aria-label="Start a thread about this: opens the New idea form for ${i(n.forge)}, with this node mentioned">Start a thread about this</button>` : "";
+		return !r || !r.length ? a : `<div class="hx-sec-block" data-corn="section"><h3 class="hx-sec-title">Threads</h3><ul class="hx-rows">${r.map((e) => {
+			let t = Number(e.comments) || 0;
+			return `<li><button type="button" class="hx-row hx-thread-open" data-thread-open="${i(e.number)}" data-corn="row" aria-label="Open thread #${i(e.number)}, ${i(e.title)}, ${t} ${t === 1 ? "comment" : "comments"}, in the issues and pull requests panel"><span class="hx-row-title">${i(e.title)}</span><span class="hx-row-meta">#${i(e.number)} · ${t}</span></button></li>`;
+		}).join("")}</ul>${a}</div>`;
+	}
+	function l(e) {
+		let n = d(e);
+		if (!Y(e, t.proposal)) return "";
+		let r = (e, t) => `<div class="hx-diff-k">${i(e)}</div><div class="hx-diff-v">${t}</div>`, a = [r("id", i(e.id))], o = t.edges.find((t) => !t.kind && !t.dashed && t.to === e.id);
+		o && a.push(r("parent", i(o.from)));
+		let s = t.edges.filter((t) => t.from === e.id || t.to === e.id), c = s.filter((e) => d(e) === "added").length, l = s.filter((e) => d(e) === "removed").length;
+		if ((c || l) && a.push(r("edges", i([c ? `+${c}` : "", l ? `−${l}` : ""].filter(Boolean).join(" ")))), n === "changed") for (let t of b(e)) a.push(r(t.field, `<span class="hx-change-before">${i(t.before) || "<em>nothing</em>"}</span> <span aria-hidden="true">→</span><span class="hx-sr-only"> became </span> <span class="hx-change-after">${i(t.after) || "<em>nothing</em>"}</span>`));
+		return `<div class="hx-sec-block" data-proposal-mark="${i(e.mark)}" data-corn="section"><h3 class="hx-sec-title">In this proposal</h3>${e.why ? `<p class="hx-why">${i(e.why)}</p>` : ""}<div class="hx-diff hx-diff--${i(n)}" data-corn="diff-block"${y(e.mark)}>${a.join("")}</div></div>`;
+	}
+	return {
+		dataSummary: s,
+		threadsSection: c,
+		diffSection: l,
+		nameOf: r,
+		nodeById: n
+	};
+}
+function $(e, o, d = {}) {
+	let { state: g } = o, v = t(o), y = _e(o), b = d.inline === !0, x = [...n(o, e, X().drawer, d.slots, "drawer"), ...b ? n(o, e, `<p class="hx-panel-empty" data-corn="empty">${i(u(o, "nodePanelEmpty"))}</p>`, null, "empty") : n(o, e, X().backdrop, d.slots, "backdrop")], S = (e) => {
+		for (let t of x) {
+			if (t.id === e) return t;
+			let n = t.querySelector(`[id="${e}"]`);
+			if (n) return n;
+		}
+		return null;
+	};
+	v.keepParts(...x);
+	let w = S("spec-drawer"), D = b ? { hidden: !0 } : S("drawer-backdrop"), O = b ? x.find((e) => e.matches("[data-corn=\"empty\"]")) : null, k = (e) => {
+		O && (O.hidden = !e);
+	}, A = !1, j = () => p(g.selectedNode, o.viewEdges(), {
+		throughChildren: g.throughChildren,
+		kind: g.selectedKind
+	});
+	function M(e) {
+		let t = j();
+		if (!t || !t.kinds.size) return "";
+		let n = de(t).map(({ kind: e, count: n, word: r }) => `<button type="button" class="hx-lines-kind" data-corn="lines-kind" data-corn-kind="quiet" data-lines-kind="${i(e)}" data-focus-key="kind:${i(e)}" aria-pressed="${t.kind === e}">${i(r)} <span class="hx-lines-count" data-corn="count">${n}</span></button>`).join(""), r = t.kind ? fe(t, t.kind).map((e) => `<button type="button" class="hx-linkbtn" data-corn="node-link" data-action="select-node" data-id="${i(e.id)}"><span class="hx-sr-only">${e.out ? "to " : "from "}</span><span aria-hidden="true">${e.out ? "→" : "←"}</span> ${i(y.nameOf(e.id))}</button>`) : [], a = r.length ? `<div class="hx-lines-list">${C(r, 12)}</div>` : "", s = p(e, o.viewEdges(), { throughChildren: !1 }).childIds.size > 0 ? `<label class="hx-lines-switch"><input type="checkbox" data-corn="lines-switch" data-lines-switch data-focus-key="switch"${g.throughChildren ? " checked" : ""}> <span>${i(u(o, "throughChildren"))}</span></label>` : "", { connected: c, off: d } = l(o);
+		return `<div class="hx-sec-block hx-lines" id="drawer-lines" data-corn="lines-by-kind"><h3 class="hx-sec-title">Lines</h3><div class="hx-chips" role="group" aria-label="Lit lines by kind">${n}</div>${a}${s}<div class="hx-lines-reach"><span data-lines-reach>${i(H(c, d))}</span> <button type="button" data-corn="frame-button" data-corn-kind="secondary" class="hx-btn hx-btn--secondary" data-action="frame-selection" data-focus-key="frame">${i(u(o, "frame"))}</button></div></div>`;
+	}
+	function N() {
+		let e = S("drawer-lines");
+		if (!e || !g.selectedNode) return;
+		let t = o.active(), n = t && e.contains(t) ? t.dataset.focusKey : "", r = o.doc.createElement("div");
+		r.innerHTML = M(g.selectedNode), a(r);
+		let i = r.firstElementChild;
+		if (i ? e.replaceWith(i) : e.remove(), n) {
+			let e = S("drawer-lines"), t = e && [...e.querySelectorAll("[data-focus-key]")].find((e) => e.dataset.focusKey === n);
+			t && t.focus();
+		}
+	}
+	function P(e) {
+		let t = e.target.closest && e.target.closest("[data-lines-kind]");
+		if (!t || !g.selectedNode) return !1;
+		let n = t.dataset.linesKind;
+		g.selectedKind = g.selectedKind === n ? null : n, o.touchScene(), o.map.render(), N();
+		let r = j();
+		return m(o, r && r.kind ? `Showing ${V(r.kind).toLowerCase()} only: ${r.edges.length} ${r.edges.length === 1 ? "line" : "lines"}` : "Showing every kind of line"), !0;
+	}
+	function F(e) {
+		let t = e.target.closest && e.target.closest("[data-lines-switch]");
+		if (!t || !g.selectedNode) return;
+		g.throughChildren = !!t.checked, g.selectedKind = null, o.touchScene(), o.map.render(), N();
+		let n = j();
+		m(o, `${g.throughChildren ? "Including" : "Not including"} its children's lines: ${n ? n.connectedNodeIds.size - 1 : 0} connected`);
+	}
+	let I = S("drawer-meta-list");
+	v.listen(I, "click", (e) => {
+		P(e) || te(e.target);
+	}), v.listen(I, "change", F), v.own(o.map.onPaint(() => {
+		if (!g.selectedNode) return;
+		let e = w.querySelector("[data-lines-reach]");
+		if (!e) return;
+		let { connected: t, off: n } = l(o), r = H(t, n);
+		e.textContent !== r && (e.textContent = r);
+	}));
+	function L() {
+		let e = S("drawer-threads");
+		e && g.selectedNode && (e.innerHTML = y.threadsSection(g.selectedNode), a(e));
+	}
+	function R(e, { frame: t = !1 } = {}) {
+		if (!e || A) return;
+		let n = S("drawer-title");
+		n.textContent = e.tag ? `<${e.tag}>` : e.label, n.classList.toggle("hx-mono", e.type === "page" || !!e.tag), S("drawer-badge").textContent = he(e);
+		let r = ge(e);
+		S("drawer-host").textContent = r ? ` · ${r}` : "";
+		let i = Y(e, g.proposal), s = S("drawer-diff");
+		s.textContent = i, s.hidden = !i;
+		let c = ee(i ? e.mark : "");
+		c ? s.dataset.cornState = c : delete s.dataset.cornState;
+		let l = S("drawer-description");
+		l.textContent = e.desc || "", l.hidden = !e.desc;
+		let d = `${e.file ? q("File", [W(e.file)]) : ""}${ce(o, e)}${y.dataSummary(e)}`, f = o.ask("live:section", e) || "";
+		I.innerHTML = `${M(e)}${d ? `<div class="hx-facts">${d}</div>` : ""}
+    <div id="drawer-live">${f}</div>
+    ${le(g, e.id)}
+    <div id="drawer-threads">${y.threadsSection(e)}</div>
+    ${y.diffSection(e)}`, a(I), o.emit("threads:ensure"), o.emit("live:hydrate", S("drawer-live"));
+		let p = S("drawer-file-btn"), m = S("drawer-open-btn"), h = e.file && g.forge ? ue(g.forge, e.file, g.forge.baseBranch) : null;
+		p.hidden = !h, h ? p.href = h : p.removeAttribute("href");
+		let _ = !!(e.url && /^https?:\/\//.test(e.url));
+		_ ? m.href = e.url : m.removeAttribute("href"), m.hidden = !_, m.className = h ? "hx-btn hx-btn--quiet hx-foot-btn" : "hx-open", h ? m.dataset.cornKind = "quiet" : m.dataset.cornKind = "primary", m.textContent = `${u(o, "openRoute")} ↗`, p.textContent = `${u(o, "openFile")} ↗`, S("drawer-run-btn").hidden = !(g.proposalSlug && o.ask("forge:can-start")), w.classList.add("drawer-open"), w.inert = !1, D.hidden = !1, k(!1), b || E(o, "drawer"), !t && !b && B(), o.emit("node:painted", { node: e });
+	}
+	function z(e) {
+		if (!e || A) return;
+		let t = (e, t) => t ? `<div class="hx-fact" data-corn="section"><div class="hx-fact-k">${i(e)}</div><div class="hx-fact-v">${i(t)}</div></div>` : "", n = t("Kind", e.kind || (e.dashed ? "usage" : "ownership")) + t("Flow", e.flow) + t("Label", e.label) + t("Reads", Array.isArray(e.keys) ? e.keys.join(", ") : ""), r = S("drawer-title");
+		r.textContent = `${y.nameOf(e.from)} → ${y.nameOf(e.to)}`, r.classList.remove("hx-mono"), S("drawer-badge").textContent = "Edge", S("drawer-host").textContent = "", S("drawer-diff").hidden = !0;
+		let o = S("drawer-description");
+		o.textContent = "", o.hidden = !0, I.innerHTML = `${n ? `<div class="hx-facts">${n}</div>` : ""}
+    <div class="hx-facts">
+      <div class="hx-fact" data-corn="section"><div class="hx-fact-k">From</div><div class="hx-fact-v"><button data-corn="node-link" type="button" class="hx-linkbtn" data-action="select-node" data-id="${i(e.from)}">${i(y.nameOf(e.from))}</button></div></div>
+      <div class="hx-fact" data-corn="section"><div class="hx-fact-k">To</div><div class="hx-fact-v"><button data-corn="node-link" type="button" class="hx-linkbtn" data-action="select-node" data-id="${i(e.to)}">${i(y.nameOf(e.to))}</button></div></div>
+    </div>${_(e)}`, a(I), S("drawer-open-btn").hidden = !0, S("drawer-file-btn").hidden = !0, S("drawer-run-btn").hidden = !0, w.classList.add("drawer-open"), w.inert = !1, D.hidden = !1, k(!1);
+	}
+	function B() {
+		let e = g.selectedNode;
+		if (!e || !g.width || !s(o) || A) return;
+		let t = c(o), n = ne(g.camera, e, {
+			left: 0,
+			top: 0,
+			right: g.width,
+			bottom: g.height - t
+		}, e.r * g.camera.zoom + 16);
+		n && (Object.assign(g.camera, n), o.map.render());
+	}
+	function U() {
+		w.classList.remove("drawer-open"), w.inert = !0, D.hidden = !0, k(!0), b || se(o, "drawer");
+	}
+	function G() {
+		g.proposalSlug && o.emit("forge:start", {
+			slug: g.proposalSlug,
+			returnTo: "#drawer-run-btn"
+		});
+	}
+	v.own(() => clearTimeout(Z(o).timer));
+	let K = {
+		"close-drawer": () => f(o, { source: "tap" }),
+		"copy-spec": () => Q(o, S("copy-spec-result")),
+		"start-run": () => G(),
+		"select-node": (e) => h(o, y.nodeById(e.dataset.id), {
+			frame: !0,
+			source: "link"
+		}),
+		"frame-selection": () => r(o)
+	};
+	return v.listen(w, "click", (e) => {
+		let t = e.target.closest && e.target.closest("[data-action]");
+		if (!t) return;
+		let n = K[t.dataset.action];
+		n && n(t), t.dataset.action === "close-drawer" && g.canvas && v.timeout(() => g.canvas.focus(), 0);
+	}), v.listen(w, "click", (e) => {
+		let t = e.target.closest && e.target.closest("[data-thread-open]");
+		t ? o.emit("thread:open", { number: Number(t.dataset.threadOpen) }) : e.target.closest && e.target.closest("[data-thread-start]") && g.selectedNode && o.emit("thread:start", { node: g.selectedNode });
+	}), v.on("threads:changed", () => L()), b || v.listen(D, "click", (e) => {
+		s(o) ? re(o, e) : f(o, { source: "tap" });
+	}, !0), v.listen(w, "keydown", (e) => {
+		e.key !== "Escape" || e.defaultPrevented || e.target.closest && e.target.closest("select, input, textarea") || (e.preventDefault(), f(o, { source: "keyboard" }), g.canvas && g.canvas.focus(), m(o, "Panel closed"));
+	}), v.on("panel:present", () => !0), v.on("panel:covers", () => !b && !A && !w.hidden && w.classList.contains("drawer-open") ? { right: w.offsetWidth } : void 0), v.on("node:show", ({ node: e, frame: t }) => R(e, { frame: t })), v.on("node:close", U), v.on("node:show-edge", ({ edge: e }) => z(e)), v.on("node:focus", () => {
+		let e = S("drawer-title");
+		if (!e) return;
+		let t = o.active();
+		b && t && t !== e && typeof t.matches == "function" && t.matches("[data-corn=\"node-title\"]") || (e.setAttribute("tabindex", "-1"), e.focus());
+	}), b || (v.own(T(o, () => B())), oe(o), ie(o, "drawer", w, { stub: () => ({ title: S("drawer-title") && S("drawer-title").textContent || "Node" }) }), v.own(() => ae(o, "drawer"))), g.selectedNode && R(g.selectedNode, { frame: !1 }), v.own(() => {
+		A = !0, x.forEach((e) => e.remove());
+	}), {
+		elements: x,
+		show: R,
+		close: U,
+		repaintThreads: L,
+		copySpec: () => Q(o, S("copy-spec-result")),
+		startRun: G,
+		keepSelectedInView: B,
+		update(e) {
+			e && "node" in e ? e.node ? h(o, e.node, { source: "api" }) : f(o, { source: "api" }) : g.selectedNode && w.classList.contains("drawer-open") && R(g.selectedNode, { frame: !1 });
+		},
+		destroy: () => v.destroy()
+	};
+}
+export { U as n, $ as t };