@daydreamui/has-lab 0.0.0-stage → 0.3.0

package/dist/index.js

@@ -0,0 +1,1568 @@
+import { addEvent, className, createComponent, delegateEvents, effect, insert, setAttribute, setStyleProperty, template } from "@solidjs/web";
+import { For, Show, createEffect, createMemo, createSignal, onCleanup, untrack } from "solid-js";
+var base = String.raw`(?:[a-zA-Z][\w-]*|\*)?(?:[.#][\w-]+)*`;
+var attribute = String.raw`\[(?:[\w-]+)(?:=(?:"[\w -]+"|'[\w -]+'|[\w-]+))?\]`;
+var simple = String.raw`(?:[a-zA-Z][\w-]*|\*)?(?:[.#][\w-]+|${attribute})*`;
+var pseudoStates = [
+	{
+		token: ":checked",
+		message: "No candidate input is checked."
+	},
+	{
+		token: ":hover",
+		message: "The element is present. Hover it while browsing the page."
+	},
+	...[
+		":focus-visible",
+		":focus-within",
+		":focus"
+	].map((token) => ({
+		token,
+		message: "The control is present. Focus it while browsing the page."
+	})),
+	{
+		token: ":not(:placeholder-shown)",
+		message: "The fields are empty. This condition waits until text is entered."
+	},
+	{
+		token: ":invalid",
+		message: "No candidate field is invalid."
+	},
+	{
+		token: ":valid",
+		message: "No candidate field is valid."
+	}
+];
+var statePattern = pseudoStates.map(({ token }) => token.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")).join("|");
+var states = `(?:${statePattern}|:nth-child\\(\\d+\\))*`;
+var whitespace = String.raw`[\t\n\f\r ]`;
+var trim = (text) => text.replace(/^[\t\n\f\r ]+|[\t\n\f\r ]+$/g, "");
+var condition = `(?:[>+~]${whitespace}*)?${simple}${states}`;
+var shape = new RegExp(`^(${base}):has\\(${whitespace}*(${condition})${whitespace}*\\)([\\s\\S]*)$`);
+var recipientShape = new RegExp(`^(?:>${whitespace}*)?${simple}$`);
+function relationshipOf(selector) {
+	const match = shape.exec(trim(selector));
+	if (!match) return null;
+	const carrier = match[1], condition = trim(match[2]), suffix = match[3];
+	const recipient = trim(suffix);
+	if (!carrier || !condition || /^[>+~]$/.test(condition)) return null;
+	if (suffix && !/^[\t\n\f\r >]/.test(suffix)) return null;
+	if (recipient && (recipient === ">" || !recipientShape.test(recipient))) return null;
+	return {
+		carrier,
+		condition,
+		recipient,
+		candidate: candidateOf(condition)
+	};
+}
+function candidateOf(condition) {
+	let candidate = trim(condition.replace(new RegExp(statePattern, "g"), ""));
+	if (!candidate || /^[>+~]$/.test(candidate)) candidate += " *";
+	return trim(candidate);
+}
+var sourceKey = (source) => "file" in source ? `file:${source.file}` : "style" in source ? `style:${source.style}` : `url:${source.url}`;
+var sourceName = (source) => "file" in source ? source.file : "style" in source ? `Style block ${source.style + 1}` : source.url;
+function rulesIn(blocks, text, source) {
+	const result = [];
+	const visit = (blocks, nested) => {
+		for (const block of blocks) {
+			if (!block.statement && !block.prelude.startsWith("@") && block.prelude.includes(":has(")) result.push({
+				id: `${sourceKey(source)}:${result.length}:${block.prelude}`,
+				selector: block.prelude,
+				declarations: sourceBody(text.slice(...block.range)),
+				source: sourceName(source),
+				relationship: nested || block.children.length ? null : relationshipOf(block.prelude),
+				limitation: nested || block.children.length ? "This rule has nesting or conditions. Use the CSS editor to inspect its context." : "The lens explains one :has() with a simple parent, child or sibling condition, and an optional descendant to style."
+			});
+			visit(block.children, true);
+		}
+	};
+	visit(blocks, false);
+	return result;
+}
+function sourceBody(rule) {
+	let quote = "", comment = false;
+	for (let i = 0; i < rule.length; i++) {
+		const ch = rule[i];
+		if (comment) {
+			if (ch === "*" && rule[i + 1] === "/") {
+				comment = false;
+				i++;
+			}
+			continue;
+		}
+		if (ch === "\\") {
+			i++;
+			continue;
+		}
+		if (quote) {
+			if (ch === quote) quote = "";
+			continue;
+		}
+		if (ch === "/" && rule[i + 1] === "*") {
+			comment = true;
+			i++;
+			continue;
+		}
+		if (ch === "\"" || ch === "'") {
+			quote = ch;
+			continue;
+		}
+		if (ch === "{") return rule.slice(i + 1, rule.endsWith("}") ? -1 : void 0);
+	}
+	return "";
+}
+function relative(element, selector) {
+	if (selector.startsWith("+") || selector.startsWith("~")) {
+		const matches = [];
+		for (let next = element.nextElementSibling; next; next = next.nextElementSibling) {
+			if (next.matches(selector.slice(1).trim())) matches.push(next);
+			if (selector.startsWith("+")) break;
+		}
+		return matches;
+	}
+	return [...element.querySelectorAll(`:scope ${selector}`)];
+}
+function describe(element) {
+	const heading = element.querySelector(":scope > h1, :scope > h2, :scope > h3");
+	const label = element.getAttribute("aria-label") ?? heading?.textContent?.trim();
+	return label ? label : element.id ? `${element.localName}#${element.id}` : `${element.localName}${element.classList[0] ? `.${element.classList[0]}` : ""}`;
+}
+function explain(relationship, carrier, matches, candidates, witnesses) {
+	if (matches) return `Matches: ${witnesses.slice(0, 2).map(describe).join(" and ")} ${witnesses.length === 1 ? "satisfies" : "satisfy"} the condition.`;
+	const { condition } = relationship;
+	if (candidates[0]) {
+		const missing = pseudoStates.find(({ token }) => condition.includes(token) && candidates.every((el) => !el.matches(token)));
+		if (missing) return missing.message;
+	}
+	const count = condition.match(/^>\s*:nth-child\((\d+)\)$/);
+	if (count) return `${carrier.children.length} direct children; this condition needs at least ${count[1]}.`;
+	if (condition.startsWith("+") && !carrier.nextElementSibling) return "There is no next sibling.";
+	return `No ${condition.startsWith("+") || condition.startsWith("~") ? "following sibling" : "element inside"} currently matches ${condition}.`;
+}
+function readRelationship(dd, target, relationship, chosen) {
+	const node = dd.geometry.node(target.elementId);
+	if (!node) return {
+		entries: [],
+		selected: null,
+		matched: 0,
+		total: 0
+	};
+	const all = node.getRootNode().querySelectorAll(relationship.carrier);
+	const carriers = Array.from({ length: Math.min(all.length, 200) }, (_, i) => all[i]);
+	const chosenId = chosen?.markup === target.markup ? dd.pageFind(target.viewportId, chosen.selector) : null;
+	const chosenNode = chosenId ? dd.geometry.node(chosenId) : void 0;
+	const selectedCarrier = carriers.find((element) => element === chosenNode) ?? carriers.find((element) => element === node || element.contains(node)) ?? carriers[0];
+	const entries = carriers.map((carrier, index) => {
+		const matches = carrier.matches(`${relationship.carrier}:has(${relationship.condition})`);
+		const entry = {
+			key: String(index),
+			name: describe(carrier),
+			matches,
+			explanation: "",
+			recipientNames: [],
+			recipientId: null,
+			marks: []
+		};
+		if (carrier !== selectedCarrier) return entry;
+		const witnesses = relative(carrier, relationship.condition);
+		const candidates = relative(carrier, relationship.candidate);
+		const recipients = relationship.recipient ? relative(carrier, relationship.recipient) : [carrier];
+		const marks = [];
+		const mark = (element, role, label) => {
+			const id = target.idOf(element);
+			if (id) marks.push({
+				id,
+				role,
+				label
+			});
+		};
+		mark(carrier, "carrier", recipients[0] === carrier ? "Condition + style" : "Condition lives here");
+		for (const source of (witnesses.length ? witnesses : candidates).slice(0, 3)) mark(source, "condition", matches ? "Condition met" : "Looks for this");
+		for (const recipient of recipients.slice(0, 4)) if (recipient !== carrier) mark(recipient, "recipient", matches ? "Selector matches here" : "Would style this");
+		return {
+			...entry,
+			explanation: explain(relationship, carrier, matches, candidates, witnesses),
+			recipientNames: recipients.slice(0, 4).map(describe),
+			recipientId: recipients[0] ? target.idOf(recipients[0]) : null,
+			marks
+		};
+	});
+	return {
+		entries,
+		selected: entries[carriers.indexOf(selectedCarrier)] ?? null,
+		matched: entries.filter((entry) => entry.matches).length,
+		total: all.length
+	};
+}
+var _tmpl$$4 = template(`<svg aria-hidden=true><path>`);
+var _tmpl$2$4 = template(`<div><span>`);
+function createMarkEffect(dd, nodes, publish) {
+	createEffect(() => ({
+		nodes: nodes(),
+		geometry: dd.geometry.version()
+	}), ({ nodes }) => untrack(() => {
+		publish(nodes.flatMap((mark) => {
+			const rect = dd.geometry.rect(mark.id);
+			return rect ? [{
+				...mark,
+				rect
+			}] : [];
+		}));
+	}));
+	onCleanup(() => publish([]));
+}
+function RelationshipOverlay(props) {
+	const connection = () => {
+		const a = props.marks().find((mark) => mark.role === "condition")?.rect;
+		const b = props.marks().find((mark) => mark.role === "carrier")?.rect;
+		return a && b ? `M ${a.x + a.width / 2} ${a.y} Q ${a.x + a.width / 2} ${Math.min(a.y, b.y) - 18} ${b.x + b.width / 2} ${b.y}` : "";
+	};
+	return [(() => {
+		var _el$ = _tmpl$$4();
+		var _el$2 = _el$.firstChild;
+		effect(() => {
+			return {
+				e: `${props.p}-wires`,
+				t: connection()
+			};
+		}, ({ e, t }, _p$) => {
+			className(_el$, e, _p$?.e);
+			t !== _p$?.t && setAttribute(_el$2, "d", t);
+		});
+		return _el$;
+	})(), createComponent(For, {
+		get each() {
+			return props.marks();
+		},
+		children: (mark) => (() => {
+			var _el$3 = _tmpl$2$4();
+			var _el$4 = _el$3.firstChild;
+			insert(_el$4, () => {
+				return mark.label;
+			});
+			effect(() => {
+				return {
+					e: `${props.p}-box`,
+					t: mark.role,
+					a: `${mark.rect.x}px`,
+					o: `${mark.rect.y}px`,
+					i: `${mark.rect.width}px`,
+					n: `${mark.rect.height}px`
+				};
+			}, ({ e, t, a, o, i, n }, _p$) => {
+				className(_el$3, e, _p$?.e);
+				t !== _p$?.t && setAttribute(_el$3, "data-role", t);
+				a !== _p$?.a && setStyleProperty(_el$3, "left", a);
+				o !== _p$?.o && setStyleProperty(_el$3, "top", o);
+				i !== _p$?.i && setStyleProperty(_el$3, "width", i);
+				n !== _p$?.n && setStyleProperty(_el$3, "height", n);
+			});
+			return _el$3;
+		})()
+	})];
+}
+function createReading(dd, source, relationship, publish, chosen = () => null) {
+	const [reading, setReading] = createSignal(null);
+	const [drawing, setDrawing] = createSignal(true);
+	createEffect(() => ({
+		target: source.target(),
+		relationship: relationship(),
+		chosen: chosen(),
+		input: source.input(),
+		interaction: dd.interactionVersion(),
+		resize: dd.geometry.resizeVersion()
+	}), (state) => untrack(() => {
+		setReading(state.target && state.relationship ? readRelationship(dd, state.target, state.relationship, state.chosen) : null);
+	}));
+	createMarkEffect(dd, () => drawing() ? reading()?.selected?.marks ?? [] : [], publish);
+	const carrierChoice = (key) => {
+		const target = source.target(), relation = relationship(), index = Number(key);
+		if (!target || !relation || !Number.isInteger(index) || index < 0 || index >= 200) return null;
+		const node = (dd.geometry.node(target.elementId)?.getRootNode())?.querySelectorAll(relation.carrier)[index];
+		const id = node ? target.idOf(node) : null;
+		const selector = id ? dd.pageElement(id)?.selector : null;
+		return selector ? {
+			selector,
+			markup: target.markup
+		} : null;
+	};
+	return {
+		reading,
+		drawing,
+		setDrawing,
+		carrierChoice
+	};
+}
+var _tmpl$$3 = template(`<div><label><input type=checkbox>Canvas lens</label><div><span><i data-role=carrier></i>Condition carrier</span><span><i data-role=condition></i>Condition witness</span><span><i data-role=recipient></i>Style recipient`);
+var _tmpl$2$3 = template(`<p>Showing the first <!> of <!> elements. Counts cover only these elements; choose a narrower rule to inspect the rest.`);
+function LensControls(props) {
+	var _el$ = _tmpl$$3();
+	var _el$2 = _el$.firstChild;
+	var _el$3 = _el$2.firstChild;
+	var _el$4 = _el$2.nextSibling;
+	_el$3.addEventListener("change", (event) => props.setDrawing(event.currentTarget.checked));
+	insert(_el$, createComponent(Show, {
+		get when() {
+			return props.reading();
+		},
+		children: (reading) => createComponent(Show, {
+			get when() {
+				return reading().total > reading().entries.length;
+			},
+			get children() {
+				var _el$5 = _tmpl$2$3();
+				var _el$7 = _el$5.firstChild.nextSibling;
+				var _el$9 = _el$7.nextSibling.nextSibling;
+				_el$9.nextSibling;
+				insert(_el$5, () => {
+					return reading().entries.length;
+				}, _el$7);
+				insert(_el$5, () => {
+					return reading().total;
+				}, _el$9);
+				effect(() => `${props.p}-muted`, (_v$, _$p) => {
+					className(_el$5, _v$, _$p);
+				});
+				return _el$5;
+			}
+		})
+	}), null);
+	effect(() => {
+		return {
+			e: `${props.p}-lens-controls`,
+			t: `${props.p}-check`,
+			a: props.drawing(),
+			o: `${props.p}-legend`
+		};
+	}, ({ e, t, a, o }, _p$) => {
+		className(_el$, e, _p$?.e);
+		className(_el$2, t, _p$?.t);
+		_el$3.checked = a;
+		className(_el$4, o, _p$?.o);
+	});
+	return _el$;
+}
+var _tmpl$$2 = template(`<div><p>Select an element on the canvas to explore what can affect it.`);
+var _tmpl$2$2 = template(`<p>`);
+var _tmpl$3$1 = template(`<div><code></code><button type=button>Use parent`);
+var _tmpl$4$1 = template(`<label><input type=checkbox>All elements matching <code>`);
+var _tmpl$5$1 = template(`<label>When…<select aria-label="Relationship condition">`);
+var _tmpl$6$1 = template(`<label>Then apply these declarations<textarea aria-label="CSS declarations">`);
+var _tmpl$7$1 = template(`<pre>`);
+var _tmpl$8$1 = template(`<div><span role=status> of <!> match now`);
+var _tmpl$9$1 = template(`<p>Move over the page, then hold ⌥ to interact. Release it to see the lens. Counts follow the real selector condition.`);
+var _tmpl$10$1 = template(`<div><button type=button>Keep rule</button><button type=button>Revert trial`);
+var _tmpl$11$1 = template(`<p>Edits <!>. A trial writes to the file; Revert restores it.`);
+var _tmpl$12$1 = template(`<p>This sheet is also linked by <!>.`);
+var _tmpl$13$1 = template(`<p>This element has no children or next sibling. Select its parent to explore a relationship.`);
+var _tmpl$14$1 = template(`<option>`);
+var _tmpl$15$1 = template(`<button type=button>Try on canvas`);
+function CreatePanel(props) {
+	const { dd, p, ops, source, publish } = untrack(() => props);
+	const target = source.target;
+	const [recipeId, setRecipeId] = createSignal("checked");
+	const [similar, setSimilar] = createSignal(false);
+	const [declarations, setDeclarations] = createSignal("background: #e4f1ce;\nborder-color: #679b41;");
+	const recipe = () => target()?.recipes.find((item) => item.id === recipeId()) ?? target()?.recipes[0];
+	const selector = () => `${similar() && target()?.group ? target().group : target()?.selector}:has(${recipe()?.relative})`;
+	const rule = () => `${selector()} {\n${declarations().split("\n").map((line) => `  ${line}`).join("\n")}\n}`;
+	const sheetName = () => target()?.sheet ? sourceName(target().sheet) : "No unconditional writable stylesheet";
+	const sharedPages = () => {
+		const t = target();
+		if (!t?.sheet || !("file" in t.sheet)) return [];
+		const file = t.sheet.file;
+		return dd.document().pages.filter((entry) => entry.path !== t.page && dd.page(entry.path)?.sheets.some((sheet) => "file" in sheet.source && sheet.source.file === file)).map((entry) => entry.path);
+	};
+	const relationship = createMemo(() => {
+		const t = target(), choice = recipe();
+		return t && choice ? {
+			carrier: similar() && t.group ? t.group : t.selector,
+			condition: choice.relative,
+			recipient: "",
+			candidate: candidateOf(choice.relative)
+		} : null;
+	});
+	const { reading: inspection, drawing, setDrawing } = createReading(dd, source, () => relationship(), publish);
+	onCleanup(() => {
+		if (ops.trial()) ops.revert();
+	});
+	const tryRule = () => {
+		const t = target();
+		if (t && recipe()) ops.tryRule(t, selector(), declarations());
+	};
+	var _el$ = _tmpl$$2();
+	var _el$2 = _el$.firstChild;
+	insert(_el$, createComponent(Show, {
+		get when() {
+			return target();
+		},
+		get fallback() {
+			var _el$3 = _tmpl$2$2();
+			insert(_el$3, () => {
+				return source.reason();
+			});
+			return _el$3;
+		},
+		children: (target) => [
+			(() => {
+				var _el$4 = _tmpl$3$1();
+				var _el$5 = _el$4.firstChild;
+				var _el$6 = _el$5.nextSibling;
+				insert(_el$5, () => {
+					return target().selector;
+				});
+				_el$6._$$click = () => {
+					const t = target();
+					const parent = t ? dd.pageElement(t.elementId)?.parentId : null;
+					if (parent) dd.select(parent);
+				};
+				effect(() => {
+					return {
+						e: `${p}-row`,
+						t: !!ops.trial()
+					};
+				}, ({ e, t }, _p$) => {
+					className(_el$4, e, _p$?.e);
+					t !== _p$?.t && setAttribute(_el$6, "disabled", t);
+				});
+				return _el$4;
+			})(),
+			(() => {
+				var _el$7 = _tmpl$2$2();
+				insert(_el$7, () => {
+					return target().page;
+				});
+				effect(() => `${p}-muted`, (_v$, _$p) => {
+					className(_el$7, _v$, _$p);
+				});
+				return _el$7;
+			})(),
+			createComponent(Show, {
+				get when() {
+					return target().group;
+				},
+				get children() {
+					var _el$8 = _tmpl$4$1();
+					var _el$9 = _el$8.firstChild;
+					var _el$11 = _el$9.nextSibling.nextSibling;
+					_el$9.addEventListener("change", (event) => setSimilar(event.currentTarget.checked));
+					insert(_el$11, () => {
+						return target().group;
+					});
+					effect(() => {
+						return {
+							e: `${p}-check`,
+							t: similar(),
+							a: !!ops.trial()
+						};
+					}, ({ e, t, a }, _p$) => {
+						className(_el$8, e, _p$?.e);
+						_el$9.checked = t;
+						a !== _p$?.a && setAttribute(_el$9, "disabled", a);
+					});
+					return _el$8;
+				}
+			}),
+			createComponent(Show, {
+				get when() {
+					return recipe();
+				},
+				get fallback() {
+					return _tmpl$13$1();
+				},
+				get children() {
+					return [
+						(() => {
+							var _el$12 = _tmpl$5$1();
+							var _el$14 = _el$12.firstChild.nextSibling;
+							_el$14.addEventListener("change", (event) => {
+								setRecipeId(event.currentTarget.value);
+								ops.clearStatus();
+							});
+							insert(_el$14, createComponent(For, {
+								get each() {
+									return target().recipes;
+								},
+								children: (option) => (() => {
+									var _el$37 = _tmpl$14$1();
+									insert(_el$37, () => {
+										return option.title;
+									});
+									effect(() => option.id, (_v$) => {
+										_el$37.value = _v$;
+									});
+									return _el$37;
+								})()
+							}));
+							effect(() => {
+								return {
+									e: !!ops.trial(),
+									t: recipe()?.id
+								};
+							}, ({ e, t }, _p$) => {
+								e !== _p$?.e && setAttribute(_el$14, "disabled", e);
+								queueMicrotask(() => {
+									return _el$14.value = t;
+								}) || (_el$14.value = t);
+							});
+							return _el$12;
+						})(),
+						(() => {
+							var _el$15 = _tmpl$6$1();
+							var _el$17 = _el$15.firstChild.nextSibling;
+							_el$17._$$input = (event) => {
+								setDeclarations(event.currentTarget.value);
+								ops.clearStatus();
+							};
+							effect(() => {
+								return {
+									e: declarations(),
+									t: !!ops.trial()
+								};
+							}, ({ e, t }, _p$) => {
+								_el$17.value = e ?? "";
+								t !== _p$?.t && setAttribute(_el$17, "disabled", t);
+							});
+							return _el$15;
+						})(),
+						(() => {
+							var _el$18 = _tmpl$7$1();
+							insert(_el$18, rule);
+							effect(() => `${p}-rule`, (_v$, _$p) => {
+								className(_el$18, _v$, _$p);
+							});
+							return _el$18;
+						})(),
+						(() => {
+							var _el$19 = _tmpl$8$1();
+							var _el$20 = _el$19.firstChild;
+							var _el$21 = _el$20.firstChild;
+							var _el$22 = _el$21.nextSibling;
+							_el$22.nextSibling;
+							insert(_el$20, () => {
+								return inspection()?.matched ?? 0;
+							}, _el$21);
+							insert(_el$20, () => {
+								return inspection()?.entries.length ?? 0;
+							}, _el$22);
+							effect(() => `${p}-row`, (_v$, _$p) => {
+								className(_el$19, _v$, _$p);
+							});
+							return _el$19;
+						})(),
+						createComponent(LensControls, {
+							p,
+							drawing,
+							setDrawing,
+							reading: inspection
+						}),
+						(() => {
+							var _el$24 = _tmpl$9$1();
+							effect(() => `${p}-muted`, (_v$, _$p) => {
+								className(_el$24, _v$, _$p);
+							});
+							return _el$24;
+						})(),
+						createComponent(Show, {
+							get when() {
+								return ops.trial();
+							},
+							get fallback() {
+								var _el$38 = _tmpl$15$1();
+								_el$38._$$click = tryRule;
+								effect(() => {
+									return {
+										e: `${p}-primary`,
+										t: ops.creating() || !target().sheet || !declarations().trim()
+									};
+								}, ({ e, t }, _p$) => {
+									className(_el$38, e, _p$?.e);
+									t !== _p$?.t && setAttribute(_el$38, "disabled", t);
+								});
+								return _el$38;
+							},
+							get children() {
+								var _el$25 = _tmpl$10$1();
+								var _el$26 = _el$25.firstChild;
+								var _el$27 = _el$26.nextSibling;
+								addEvent(_el$26, "click", ops.keep, true);
+								addEvent(_el$27, "click", ops.revert, true);
+								effect(() => {
+									return {
+										e: `${p}-row`,
+										t: `${p}-primary`
+									};
+								}, ({ e, t }, _p$) => {
+									className(_el$25, e, _p$?.e);
+									className(_el$26, t, _p$?.t);
+								});
+								return _el$25;
+							}
+						}),
+						(() => {
+							var _el$28 = _tmpl$11$1();
+							var _el$30 = _el$28.firstChild.nextSibling;
+							_el$30.nextSibling;
+							insert(_el$28, sheetName, _el$30);
+							effect(() => `${p}-muted`, (_v$, _$p) => {
+								className(_el$28, _v$, _$p);
+							});
+							return _el$28;
+						})(),
+						createComponent(Show, {
+							get when() {
+								return sharedPages().length;
+							},
+							get children() {
+								var _el$32 = _tmpl$12$1();
+								var _el$34 = _el$32.firstChild.nextSibling;
+								_el$34.nextSibling;
+								insert(_el$32, () => {
+									return sharedPages().join(", ");
+								}, _el$34);
+								effect(() => `${p}-muted`, (_v$, _$p) => {
+									className(_el$32, _v$, _$p);
+								});
+								return _el$32;
+							}
+						})
+					];
+				}
+			})
+		]
+	}), null);
+	effect(() => {
+		return {
+			e: `${p}-panel`,
+			t: `${p}-muted`
+		};
+	}, ({ e, t }, _p$) => {
+		className(_el$, e, _p$?.e);
+		className(_el$2, t, _p$?.t);
+	});
+	return _el$;
+}
+delegateEvents(["click", "input"]);
+function observeRelationships(dd, source, publish) {
+	const [choices, setChoices] = createSignal({});
+	const [view, setView] = createSignal(null);
+	let cache = null;
+	createEffect(() => ({
+		target: source.target(),
+		choices: choices(),
+		load: dd.loadVersion()
+	}), (state) => untrack(() => {
+		const target = state.target;
+		if (!target) {
+			setView(null);
+			cache = null;
+			return;
+		}
+		if (cache?.target !== target) {
+			const live = new Set(target.sources.map(sourceKey));
+			const rules = (dd.page(target.page)?.sheets ?? []).filter((sheet) => live.has(sourceKey(sheet.source))).flatMap((sheet) => rulesIn(dd.core.cssBlocks(sheet.text), sheet.text, sheet.source));
+			for (const rule of rules) if (rule.relationship && !CSS.supports(`selector(${rule.selector})`)) rule.relationship = null;
+			cache = {
+				target,
+				rules
+			};
+		}
+		const rules = cache.rules, choice = state.choices[`${state.load}:${target.viewportId}`];
+		const rule = rules.find((entry) => entry.id === choice?.rule) ?? rules.find((entry) => entry.relationship) ?? rules[0] ?? null;
+		setView({
+			target,
+			rules,
+			rule,
+			carrier: choice?.carrier ?? null
+		});
+	}));
+	const reader = createReading(dd, source, () => view()?.rule?.relationship ?? null, publish, () => view()?.carrier ?? null);
+	const choose = (change) => {
+		const id = source.target()?.viewportId;
+		if (id) {
+			const key = `${dd.loadVersion()}:${id}`;
+			setChoices((all) => ({
+				...all,
+				[key]: {
+					rule: null,
+					carrier: null,
+					...all[key],
+					...change
+				}
+			}));
+		}
+	};
+	return {
+		view,
+		...reader,
+		selected: () => reader.reading()?.selected,
+		setRuleId: (rule) => choose({
+			rule,
+			carrier: null
+		}),
+		setCarrier: (key) => choose({ carrier: reader.carrierChoice(key) })
+	};
+}
+var _tmpl$$1 = template(`<div><p>`);
+var _tmpl$2$1 = template(`<div>`);
+var _tmpl$3 = template(`<div><div><span>Rules in this page</span><span></span></div><p>`);
+var _tmpl$4 = template(`<p>No :has() rules yet. Create a rule for the selected element.`);
+var _tmpl$5 = template(`<button type=button><span aria-hidden=true></span><code>`);
+var _tmpl$6 = template(`<details><summary>Declarations <span></span></summary><pre></pre><p>Counts describe the selector condition. Stylesheet conditions and other rules can affect which styles apply. Select the target to inspect the cascade in the CSS panel.`);
+var _tmpl$7 = template(`<p>`);
+var _tmpl$8 = template(`<label>Inspect element`);
+var _tmpl$9 = template(`<select aria-label="Inspect element">`);
+var _tmpl$10 = template(`<div><div><span>Relationship</span><span role=status> of <!> match</span></div><!><!>`);
+var _tmpl$11 = template(`<option><!><!>`);
+var _tmpl$12 = template(`<p>No element currently matches <!>.`);
+var _tmpl$13 = template(`<ol><li><span>1</span><div><span>Condition lives on</span><code></code></div></li><li><span>2</span><div><span>Looks for</span><code></code></div></li><li><span>3</span><div><span>Rule targets</span><code>`);
+var _tmpl$14 = template(`<p role=status>`);
+var _tmpl$15 = template(`<p>Hold ⌥ over the page to interact. This panel follows the real state; canvas labels return when you release it.`);
+var _tmpl$16 = template(`<div><button type=button>Select styled element`);
+function ExplorePanel(props) {
+	const { dd, p, source, publish } = untrack(() => props);
+	const { view, reading, selected, setRuleId, setCarrier, drawing, setDrawing } = observeRelationships(dd, source, publish);
+	return createComponent(Show, {
+		get when() {
+			return view();
+		},
+		get fallback() {
+			var _el$ = _tmpl$$1();
+			var _el$2 = _el$.firstChild;
+			insert(_el$2, () => {
+				return source.reason();
+			});
+			effect(() => `${p}-empty`, (_v$, _$p) => {
+				className(_el$, _v$, _$p);
+			});
+			return _el$;
+		},
+		children: (view) => [(() => {
+			var _el$3 = _tmpl$3();
+			var _el$4 = _el$3.firstChild;
+			var _el$6 = _el$4.firstChild.nextSibling;
+			var _el$7 = _el$4.nextSibling;
+			insert(_el$6, () => {
+				return view().rules.length;
+			});
+			insert(_el$7, () => {
+				return view().target.page;
+			});
+			insert(_el$3, createComponent(Show, {
+				get when() {
+					return view().rules.length;
+				},
+				get fallback() {
+					return _tmpl$4();
+				},
+				get children() {
+					var _el$8 = _tmpl$2$1();
+					insert(_el$8, createComponent(For, {
+						get each() {
+							return view().rules;
+						},
+						children: (rule) => (() => {
+							var _el$10 = _tmpl$5();
+							var _el$11 = _el$10.firstChild;
+							var _el$12 = _el$11.nextSibling;
+							_el$10._$$click = () => setRuleId(rule.id);
+							insert(_el$11, () => {
+								return view().rule?.id === rule.id ? "●" : "○";
+							});
+							insert(_el$12, () => {
+								return rule.selector;
+							});
+							effect(() => {
+								return {
+									e: `${p}-rule-row`,
+									t: view().rule?.id === rule.id ? "true" : "false"
+								};
+							}, ({ e, t }, _p$) => {
+								className(_el$10, e, _p$?.e);
+								t !== _p$?.t && setAttribute(_el$10, "aria-pressed", t);
+							});
+							return _el$10;
+						})()
+					}));
+					effect(() => `${p}-rules`, (_v$, _$p) => {
+						className(_el$8, _v$, _$p);
+					});
+					return _el$8;
+				}
+			}), null);
+			effect(() => {
+				return {
+					e: `${p}-section`,
+					t: `${p}-heading`,
+					a: `${p}-muted ${p}-path`
+				};
+			}, ({ e, t, a }, _p$) => {
+				className(_el$3, e, _p$?.e);
+				className(_el$4, t, _p$?.t);
+				className(_el$7, a, _p$?.a);
+			});
+			return _el$3;
+		})(), createComponent(Show, {
+			get when() {
+				return view().rule;
+			},
+			children: (rule) => [createComponent(Show, {
+				get when() {
+					return rule().relationship;
+				},
+				get fallback() {
+					var _el$19 = _tmpl$7();
+					insert(_el$19, () => {
+						return rule().limitation;
+					});
+					effect(() => `${p}-muted`, (_v$, _$p) => {
+						className(_el$19, _v$, _$p);
+					});
+					return _el$19;
+				},
+				children: (relationship) => (() => {
+					var _el$20 = _tmpl$10();
+					var _el$21 = _el$20.firstChild;
+					var _el$23 = _el$21.firstChild.nextSibling;
+					var _el$24 = _el$23.firstChild;
+					var _el$25 = _el$24.nextSibling;
+					_el$25.nextSibling;
+					var _el$29 = _el$21.nextSibling;
+					var _el$30 = _el$29.nextSibling;
+					insert(_el$23, () => {
+						return reading()?.matched;
+					}, _el$24);
+					insert(_el$23, () => {
+						return reading()?.entries.length;
+					}, _el$25);
+					insert(_el$20, createComponent(Show, {
+						get when() {
+							return (reading()?.entries.length ?? 0) > 1;
+						},
+						get children() {
+							return [(() => {
+								var _el$27 = _tmpl$8();
+								setAttribute(_el$27, "for", `${p}-carrier`);
+								effect(() => `${p}-sr-only`, (_v$, _$p) => {
+									className(_el$27, _v$, _$p);
+								});
+								return _el$27;
+							})(), (() => {
+								var _el$28 = _tmpl$9();
+								_el$28.addEventListener("change", (event) => setCarrier(event.currentTarget.value));
+								setAttribute(_el$28, "id", `${p}-carrier`);
+								insert(_el$28, createComponent(For, {
+									get each() {
+										return reading()?.entries;
+									},
+									children: (entry) => (() => {
+										var _el$31 = _tmpl$11();
+										var _el$32 = _el$31.firstChild;
+										var _el$33 = _el$32.nextSibling;
+										insert(_el$31, () => {
+											return entry.name;
+										}, _el$32);
+										insert(_el$31, () => {
+											return entry.matches ? " · matches" : " · waiting";
+										}, _el$33);
+										effect(() => {
+											return {
+												e: entry.key,
+												t: selected()?.key === entry.key
+											};
+										}, ({ e, t }, _p$) => {
+											_el$31.value = e;
+											_el$31.selected = t;
+										});
+										return _el$31;
+									})()
+								}));
+								effect(() => selected()?.key ?? "", (_v$) => {
+									queueMicrotask(() => {
+										return _el$28.value = _v$;
+									}) || (_el$28.value = _v$);
+								});
+								return _el$28;
+							})()];
+						}
+					}), _el$29);
+					insert(_el$20, createComponent(Show, {
+						get when() {
+							return selected();
+						},
+						get fallback() {
+							var _el$34 = _tmpl$12();
+							var _el$36 = _el$34.firstChild.nextSibling;
+							_el$36.nextSibling;
+							insert(_el$34, () => {
+								return relationship().carrier;
+							}, _el$36);
+							return _el$34;
+						},
+						children: (entry) => [
+							(() => {
+								var _el$38 = _tmpl$13();
+								var _el$39 = _el$38.firstChild;
+								var _el$40 = _el$39.firstChild;
+								var _el$42 = _el$40.nextSibling.firstChild;
+								var _el$43 = _el$42.nextSibling;
+								var _el$44 = _el$39.nextSibling;
+								var _el$45 = _el$44.firstChild;
+								var _el$47 = _el$45.nextSibling.firstChild;
+								var _el$48 = _el$47.nextSibling;
+								var _el$50 = _el$44.nextSibling.firstChild;
+								var _el$52 = _el$50.nextSibling.firstChild;
+								var _el$53 = _el$52.nextSibling;
+								insert(_el$43, () => {
+									return entry().name;
+								});
+								insert(_el$48, () => {
+									return relationship().condition;
+								});
+								insert(_el$53, () => {
+									return entry().recipientNames.join(", ") || "No target found";
+								});
+								effect(() => {
+									return {
+										e: `${p}-roles`,
+										t: `${p}-step`,
+										a: `${p}-muted`,
+										o: `${p}-step`,
+										i: `${p}-muted`,
+										n: `${p}-step`,
+										s: `${p}-muted`
+									};
+								}, ({ e, t, a, o, i, n, s }, _p$) => {
+									className(_el$38, e, _p$?.e);
+									className(_el$40, t, _p$?.t);
+									className(_el$42, a, _p$?.a);
+									className(_el$45, o, _p$?.o);
+									className(_el$47, i, _p$?.i);
+									className(_el$50, n, _p$?.n);
+									className(_el$52, s, _p$?.s);
+								});
+								return _el$38;
+							})(),
+							(() => {
+								var _el$54 = _tmpl$14();
+								insert(_el$54, () => {
+									return entry().explanation;
+								});
+								effect(() => {
+									return {
+										e: `${p}-verdict`,
+										t: entry().matches
+									};
+								}, ({ e, t }, _p$) => {
+									className(_el$54, e, _p$?.e);
+									t !== _p$?.t && setAttribute(_el$54, "data-matches", t);
+								});
+								return _el$54;
+							})(),
+							(() => {
+								var _el$55 = _tmpl$15();
+								effect(() => `${p}-hint`, (_v$, _$p) => {
+									className(_el$55, _v$, _$p);
+								});
+								return _el$55;
+							})(),
+							(() => {
+								var _el$56 = _tmpl$16();
+								var _el$57 = _el$56.firstChild;
+								_el$57._$$click = () => {
+									const id = entry().recipientId;
+									if (id) dd.select(id);
+								};
+								insert(_el$56, createComponent(LensControls, {
+									p,
+									drawing,
+									setDrawing,
+									reading
+								}), null);
+								effect(() => {
+									return {
+										e: `${p}-row`,
+										t: !entry().recipientId
+									};
+								}, ({ e, t }, _p$) => {
+									className(_el$56, e, _p$?.e);
+									t !== _p$?.t && setAttribute(_el$57, "disabled", t);
+								});
+								return _el$56;
+							})()
+						]
+					}), _el$30);
+					effect(() => {
+						return {
+							e: `${p}-section`,
+							t: `${p}-heading`
+						};
+					}, ({ e, t }, _p$) => {
+						className(_el$20, e, _p$?.e);
+						className(_el$21, t, _p$?.t);
+					});
+					return _el$20;
+				})()
+			}), (() => {
+				var _el$13 = _tmpl$6();
+				var _el$14 = _el$13.firstChild;
+				var _el$16 = _el$14.firstChild.nextSibling;
+				var _el$17 = _el$14.nextSibling;
+				var _el$18 = _el$17.nextSibling;
+				insert(_el$16, () => {
+					return rule().source;
+				});
+				insert(_el$17, () => {
+					return rule().declarations;
+				});
+				effect(() => {
+					return {
+						e: `${p}-details`,
+						t: `${p}-rule`,
+						a: `${p}-muted`
+					};
+				}, ({ e, t, a }, _p$) => {
+					className(_el$13, e, _p$?.e);
+					className(_el$17, t, _p$?.t);
+					className(_el$18, a, _p$?.a);
+				});
+				return _el$13;
+			})()]
+		})]
+	});
+}
+delegateEvents(["click"]);
+var playground = `<!doctype html>
+<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Has lab playground</title>
+<style>
+* { box-sizing: border-box; }
+body { margin: 0; padding: 40px; background: #f5f4ef; color: #242b23; font: 16px/1.5 system-ui, sans-serif; }
+h1 { font-weight: 500; font-size: 32px; margin: 0 0 6px; }
+h2 { font-size: 20px; font-weight: 500; margin: 0 0 12px; }
+p { margin: 0; color: #60675b; }
+main { display: grid; gap: 32px; }
+header { margin-bottom: 32px; }
+.tickets { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
+.ticket { display: grid; gap: 16px; padding: 24px; border: 1px solid #cdd2c5; border-radius: 8px; background: white; }
+.ticket header { display: flex; justify-content: space-between; align-items: center; margin: 0; }
+.letter { font: 64px Georgia, serif; }
+.ticket footer { border-top: 1px dashed #cdd2c5; padding-top: 12px; font-size: 13px; }
+input { accent-color: #38672b; }
+input[type=checkbox] { width: 20px; height: 20px; }
+.steps { display: flex; gap: 16px; }
+.step { flex: 1; min-width: 0; padding: 20px; border: 1px solid #cdd2c5; background: white; border-radius: 6px; }
+.signup { padding: 24px; border: 1px solid #cdd2c5; background: white; border-radius: 8px; }
+.signup label { display: grid; gap: 8px; }
+input[type=email] { font: inherit; padding: 10px; border: 1px solid #a2aa99; border-radius: 4px; }
+details { padding: 20px; background: white; border: 1px solid #cdd2c5; border-radius: 6px; }
+summary { cursor: pointer; }
+.ticket:has(input:checked) footer { background: #e4f1ce; color: #365829; border-color: #679b41; }
+.step:has(+ .step:hover) { background: #efe2c7; border-color: #a9864f; }
+.signup:has(input:invalid:not(:placeholder-shown)) button { background: #a34d3c; }
+.ticket footer { margin: 0 -12px -12px; padding: 12px; border-radius: 0 0 4px 4px; }
+.signup button { justify-self: start; margin-top: 12px; padding: 10px 16px; border: 0; border-radius: 4px; color: white; background: #38672b; font: inherit; }
+details p { margin-top: 12px; }
+@media(max-width:600px) { body { padding: 24px; } .tickets { grid-template-columns: 1fr; } .steps { flex-direction: column; } }
+</style></head><body>
+<header><h1>Small causes. Visible effects.</h1><p>A page to explore with the :has lab panel.</p></header>
+<main>
+<section class="tickets" aria-label="Tickets">
+<label class="ticket" id="field-ticket"><header><span>Field notes / 01</span><input type="checkbox" aria-label="Select field ticket"></header><span class="letter">Aa</span><h2>Type in the wild</h2><p>A walk through the city’s letterforms.</p><footer>Saturday · 10:00</footer></label>
+<label class="ticket" id="studio-ticket"><header><span>Studio visit / 02</span><input type="checkbox" checked aria-label="Select studio ticket"></header><span class="letter">&amp;</span><h2>Objects with stories</h2><p>Inside an independent design studio.</p><footer>Sunday · 14:00</footer></label>
+</section>
+<section><h2>A sibling can look ahead</h2><div class="steps"><div class="step" id="step-one">Choose a focus</div><div class="step" id="step-two">Make it tangible</div><div class="step" id="step-three">Keep a trail</div></div></section>
+<section class="signup" id="signup"><h2>A field can change its surroundings</h2><label>Your email<input type="email" required placeholder="you@example.com"></label><button type="button">Join updates</button></section>
+<section id="disclosure"><details><summary>What makes a good experiment?</summary><p>One clear question, and something you can change.</p></details></section>
+</main></body></html>`;
+var classPrefix = (id) => id.replace(/[^A-Za-z0-9_-]/g, "-");
+var errorMessage = (cause) => cause instanceof Error ? cause.message : String(cause);
+function operations(dd) {
+	const [trial, setTrial] = createSignal(null);
+	const [creating, setCreating] = createSignal(false);
+	const [status, setStatus] = createSignal(null);
+	const clearStatus = () => setStatus(null);
+	const message = (text) => setStatus(text ? {
+		kind: "message",
+		text
+	} : null);
+	const error = (cause) => setStatus({
+		kind: "error",
+		text: errorMessage(cause)
+	});
+	let generation = 0;
+	function revert() {
+		const current = trial();
+		setTrial(null);
+		current?.transaction.cancel();
+		message(current ? "Trial reverted." : "");
+	}
+	function keep() {
+		const current = trial();
+		if (!current) return;
+		setTrial(null);
+		current.transaction.commit();
+		const id = dd.pageFind(current.target.viewportId, current.target.selector);
+		if (id) dd.select(id);
+		message("Rule kept. Undo with ⌘Z.");
+	}
+	function tryRule(target, selector, declarations) {
+		if (trial() || creating() || !target.sheet) return;
+		clearStatus();
+		const transaction = dd.beginItemTransaction({ onInterrupted: () => {
+			setTrial(null);
+			message("The trial ended after another edit. Use Daydream’s undo to review it.");
+		} });
+		setTrial({
+			transaction,
+			target: {
+				viewportId: target.viewportId,
+				selector: target.selector,
+				elementId: target.elementId
+			}
+		});
+		try {
+			const result = transaction.write({
+				kind: "add",
+				viewportId: target.viewportId,
+				sheet: target.sheet,
+				selector,
+				declarations
+			});
+			if (typeof result === "string") throw new Error(result);
+			message("Trial is live. Move over the page, hold ⌥, then interact.");
+		} catch (cause) {
+			setTrial(null);
+			transaction.cancel();
+			error(cause);
+		}
+	}
+	async function addPlayground() {
+		if (creating() || trial()) return;
+		setCreating(true);
+		clearStatus();
+		const started = generation;
+		try {
+			const made = await dd.createPage(playground, { frame: { width: 820 } });
+			if (started !== generation) return;
+			dd.select(made.viewportId);
+			dd.canvas.reveal([made.viewportId]);
+			message(`Added ${made.path}. Explore its rules or select an element to create one.`);
+		} catch (cause) {
+			if (started === generation) error(cause);
+		} finally {
+			if (started === generation) setCreating(false);
+		}
+	}
+	const leave = () => {
+		generation++;
+		revert();
+		setCreating(false);
+	};
+	dd.on("leave", () => untrack(leave));
+	onCleanup(() => leave());
+	return {
+		trial,
+		creating,
+		status,
+		clearStatus,
+		revert,
+		keep,
+		tryRule,
+		addPlayground
+	};
+}
+function pageEvents(dd) {
+	const [version, setVersion] = createSignal(0);
+	let root = null;
+	let frame = 0;
+	const changed = () => setVersion((value) => value + 1);
+	const reset = () => {
+		cancelAnimationFrame(frame);
+		frame = requestAnimationFrame(changed);
+	};
+	function connect(next) {
+		if (next === root) return;
+		cancelAnimationFrame(frame);
+		for (const name of [
+			"input",
+			"change",
+			"toggle"
+		]) {
+			root?.removeEventListener(name, changed, true);
+			next?.addEventListener(name, changed, true);
+		}
+		root?.removeEventListener("reset", reset, true);
+		next?.addEventListener("reset", reset, true);
+		root = next;
+	}
+	onCleanup(() => connect(null));
+	const hook = dd.on("leave", () => connect(null));
+	onCleanup(() => hook.dispose());
+	return {
+		version,
+		connect
+	};
+}
+function content(root) {
+	const out = [];
+	const visit = (node) => {
+		if ([
+			"head",
+			"style",
+			"script",
+			"link",
+			"meta",
+			"title",
+			"base"
+		].includes(node.localName)) return;
+		out.push(node);
+		if (node.localName !== "noscript") for (const child of node.children) visit(child);
+	};
+	visit(root);
+	return out;
+}
+function storedIds(dd, viewport, stored, mounted) {
+	const root = mounted.querySelector("html");
+	const ours = content(stored.documentElement), theirs = root ? content(root) : [];
+	const paired = ours.length === theirs.length && ours.every((node, i) => node.localName === theirs[i].localName);
+	const twins = new Map(paired ? theirs.map((node, i) => [node, ours[i]]) : []);
+	const ids = new Map();
+	return (node) => {
+		if (ids.has(node)) return ids.get(node);
+		const twin = twins.get(node);
+		const selector = dd.core.uniqueSelector(twin ?? node, twin ? stored : mounted);
+		const id = dd.pageFind(viewport, selector);
+		const resolved = id && dd.geometry.node(id) === node ? id : null;
+		ids.set(node, resolved);
+		return resolved;
+	};
+}
+function targetOf(dd, selection) {
+	const empty = {
+		target: null,
+		reason: "Select a page element to see its :has() relationships.",
+		nodeId: selection,
+		node: selection ? dd.geometry.node(selection) : void 0,
+		pending: false
+	};
+	if (!selection) return empty;
+	const selected = dd.pageElement(selection);
+	const item = dd.core.viewportItems(dd.document()).find((item) => item.id === (selected?.viewportId ?? selection));
+	if (!item) return empty;
+	const id = selected ? selection : dd.pageFind(item.id, "body");
+	const node = id ? dd.geometry.node(id) : void 0;
+	const unavailable = {
+		...empty,
+		nodeId: id,
+		node,
+		pending: !id,
+		reason: "This viewport does not expose rendered elements to the lens. Select an element in a simulated viewport."
+	};
+	if (!id || !node) return unavailable;
+	const info = selected ?? dd.pageElement(id);
+	if (!info?.selector) return unavailable;
+	const stack = dd.pageStack(id);
+	const page = dd.page(item.payload.page);
+	if (!stack || !page) return {
+		...unavailable,
+		reason: "The selected page is not available yet."
+	};
+	const recipes = [];
+	const offer = (source, recipe) => {
+		if (node.querySelector(source)) recipes.push(recipe);
+	};
+	offer("input[type=\"checkbox\"], input[type=\"radio\"]", {
+		id: "checked",
+		title: "An input is checked",
+		relative: "input:checked"
+	});
+	offer("input, select, textarea, button, a[href]", {
+		id: "focus",
+		title: "A control has keyboard focus",
+		relative: ":focus-visible"
+	});
+	offer("input[required], input[type=\"email\"], input[type=\"url\"], input[pattern], input[min], input[max], select[required], textarea[required]", {
+		id: "invalid",
+		title: "A field is invalid",
+		relative: ":invalid"
+	});
+	offer("img", {
+		id: "image",
+		title: "Contains an image",
+		relative: "img"
+	});
+	offer("details", {
+		id: "open",
+		title: "A disclosure is open",
+		relative: "details[open]"
+	});
+	offer(":scope > *", {
+		id: "hover",
+		title: "A direct child is hovered",
+		relative: "> :hover"
+	});
+	offer(":scope > :nth-child(3)", {
+		id: "three",
+		title: "Has at least three children",
+		relative: "> :nth-child(3)"
+	});
+	if (node.nextElementSibling) recipes.push({
+		id: "sibling",
+		title: "The next sibling is hovered",
+		relative: "+ :hover"
+	});
+	const className = [...node.classList].find((name) => !name.startsWith("dream-"));
+	const stored = dd.core.parsePage(page.html);
+	return {
+		target: {
+			viewportId: info.viewportId,
+			elementId: id,
+			selector: info.selector,
+			group: className ? `.${CSS.escape(className)}` : null,
+			page: item.payload.page,
+			markup: page.html,
+			recipes,
+			sheet: [...stack.sheets].reverse().find((sheet) => sheet.editable && (sheet.absent || unconditional(sheet.source, page, stored)))?.source ?? null,
+			sources: stack.sheets.map((sheet) => sheet.source),
+			idOf: storedIds(dd, info.viewportId, stored, node.getRootNode())
+		},
+		reason: "",
+		nodeId: id,
+		node,
+		pending: false
+	};
+}
+function unconditional(source, page, stored) {
+	const sheet = page.sheets.find((entry) => sourceKey(entry.source) === sourceKey(source));
+	if (!sheet) return false;
+	const base = new URL(page.path, "https://project.invalid/");
+	return [...stored.querySelectorAll("link, style")].filter((node) => {
+		if (node.localName === "style") return "style" in source && node.textContent === sheet.text;
+		if (!("file" in source)) return false;
+		try {
+			return new URL(node.getAttribute("href") ?? "", base).href === new URL(source.file, "https://project.invalid/").href;
+		} catch {
+			return false;
+		}
+	}).some((node) => !node.getAttribute("media")?.trim() || node.getAttribute("media")?.trim() === "all");
+}
+function trialSelection(dd, selected, trial, previous) {
+	if (!trial) return selected;
+	const pinned = trial.target;
+	const id = previous?.viewportId === pinned.viewportId && previous.selector === pinned.selector ? previous.elementId : pinned.elementId;
+	return dd.geometry.node(id) ? id : dd.pageFind(pinned.viewportId, pinned.selector);
+}
+function panelSource(dd, context, ops) {
+	const [result, setResult] = createSignal(null);
+	const events = pageEvents(dd);
+	let last = null;
+	createEffect(() => ({
+		selection: context.selection(),
+		version: dd.documentVersion(),
+		load: dd.loadVersion(),
+		geometry: dd.geometry.version(),
+		trial: ops.trial()
+	}), (state) => untrack(() => {
+		const key = state.trial ? `${state.trial.target.viewportId}:${state.trial.target.selector}` : state.selection;
+		const node = last?.result.nodeId ? dd.geometry.node(last.result.nodeId) : void 0;
+		if (last && !last.result.pending && last.key === key && last.version === state.version && last.load === state.load && last.result.node === node) return;
+		const next = targetOf(dd, trialSelection(dd, state.selection, state.trial, result()?.target ?? null));
+		last = {
+			key,
+			version: state.version,
+			load: state.load,
+			result: next
+		};
+		events.connect(next.target ? next.node?.getRootNode() ?? null : null);
+		setResult(next);
+	}));
+	return {
+		target: () => result()?.target ?? null,
+		reason: () => result()?.reason ?? "Select a page element.",
+		input: events.version
+	};
+}
+var roles = (selector) => `
+${selector}[data-role=carrier] { border:1.5px solid var(--dream-app-sage, #8ea99b); }
+${selector}[data-role=condition] { border:1.5px solid var(--dream-app-amber, #c5a16b); background:color-mix(in srgb, var(--dream-app-amber, #c5a16b) 10%, transparent); }
+${selector}[data-role=recipient] { border:1.5px dashed var(--dream-app-sage, #8ea99b); }
+`;
+var panelStyles = (p) => `
+.${p}-panel { display:flex; flex-direction:column; gap:16px; padding:8px 14px 14px; min-width:0; color:var(--dream-app-text, #b8b8be); font-size:11px; line-height:1.5; --lens-line:var(--dream-app-line, #34343b); }
+.${p}-panel p { margin:0; }
+.${p}-panel label { display:flex; flex-direction:column; gap:5px; }
+.${p}-panel .${p}-check { flex-direction:row; align-items:center; }
+.${p}-panel input[type=checkbox] { margin:0; }
+.${p}-panel button, .${p}-panel select { font:inherit; padding:6px 8px; border:1px solid var(--dream-app-line, #414149); border-radius:4px; background:var(--dream-app-field, #26262b); color:var(--dream-app-bright, #c8c8ce); }
+.${p}-panel button:disabled { opacity:.45; }
+.${p}-panel .${p}-primary { background:var(--dream-app-success-surface, #34452e); border-color:var(--dream-app-success, #6e8d54); }
+.${p}-panel textarea { width:100%; resize:vertical; min-height:76px; padding:8px; font-size:11px; line-height:1.5; font-family:var(--dream-app-mono, monospace); border:1px solid var(--dream-app-line, #414149); border-radius:4px; background:var(--dream-app-field, #26262b); color:var(--dream-app-bright, #c8c8ce); }
+.${p}-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
+.${p}-row > code { flex:1; }
+.${p}-panel code { font-size:11px; line-height:1.5; font-family:var(--dream-app-mono, monospace); overflow-wrap:anywhere; }
+.${p}-rule { white-space:pre-wrap; overflow-wrap:anywhere; margin:0; padding:8px; background:var(--dream-app-line, #232328); border-radius:4px; font-size:11px; line-height:1.5; font-family:var(--dream-app-mono, monospace); color:var(--dream-app-bright, #c8c8ce); }
+.${p}-muted { color:var(--dream-app-dim, #9a9aa0); }
+.${p}-status { color:var(--dream-app-success, #a2c987); }
+.${p}-error { color:var(--dream-app-danger, #ed9d89); }
+.${p}-legend { display:flex; flex-wrap:wrap; gap:12px; font-size:10px; }
+.${p}-legend span { display:flex; gap:4px; align-items:center; }
+.${p}-panel .${p}-panel { padding:0; }
+.${p}-tabs { display:flex; gap:4px; border-bottom:1px solid var(--lens-line); padding-bottom:6px; }
+.${p}-tabs button { flex:1; border:0; background:transparent; padding:6px 4px; color:var(--dream-app-dim, #9a9aa0); }
+.${p}-tabs button[aria-pressed=true] { color:var(--dream-app-bright, #e0e4df); background:var(--dream-app-hover, #27292a); }
+.${p}-section { display:grid; gap:10px; }
+.${p}-heading { display:flex; justify-content:space-between; gap:12px; color:var(--dream-app-bright, #c8c8ce); }
+.${p}-heading > span:last-child { color:var(--dream-app-text, #a7b4ab); font-variant-numeric:tabular-nums; }
+.${p}-path { overflow-wrap:anywhere; }
+.${p}-rules { display:grid; gap:2px; }
+.${p}-panel .${p}-rule-row { display:grid; grid-template-columns:8px minmax(0,1fr); gap:8px; text-align:left; padding:8px 6px; border:0; background:transparent; align-items:baseline; }
+.${p}-rule-row > span { color:var(--dream-app-muted, #87938c); font-size:9px; }
+.${p}-panel .${p}-rule-row:hover { background:var(--dream-app-hover, #222225); }
+.${p}-panel .${p}-rule-row[aria-pressed=true] { background:var(--dream-app-selection, #292e2c); color:var(--dream-app-bright, #d3e6dc); }
+.${p}-roles { margin:0; padding:0; list-style:none; display:grid; gap:10px; }
+.${p}-roles li { display:flex; align-items:start; gap:10px; }
+.${p}-roles li > div { display:grid; gap:2px; min-width:0; }
+.${p}-step { display:grid; place-items:center; width:18px; height:18px; flex:none; border:1px solid var(--dream-app-line-strong, #4a5951); color:var(--dream-app-text, #adc5b8); border-radius:50%; font-size:10px; }
+.${p}-verdict { border-left:2px solid var(--dream-app-muted, #74767a); padding:6px 0 6px 10px; color:var(--dream-app-bright, #c8c8ce); }
+.${p}-verdict[data-matches=true] { border-color:var(--dream-app-sage, #9dc3ae); color:var(--dream-app-bright, #c4dfcf); }
+.${p}-hint { color:var(--dream-app-dim, #9a9aa0); }
+.${p}-details { border-top:1px solid var(--lens-line); padding-top:10px; }
+.${p}-details summary { cursor:pointer; color:var(--dream-app-text, #b8b8be); }
+.${p}-details summary > span { display:block; font-size:10px; color:var(--dream-app-dim, #9a9aa0); overflow-wrap:anywhere; margin:4px 0 8px; }
+.${p}-empty { display:grid; gap:12px; }
+.${p}-sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
+.${p}-panel button:focus-visible, .${p}-panel select:focus-visible, .${p}-panel textarea:focus-visible, .${p}-panel summary:focus-visible { outline:2px solid var(--dream-app-accent, #8bb7e0); outline-offset:2px; }
+.${p}-lens-controls { display:grid; gap:8px; width:100%; }
+.${p}-legend i { width:9px; height:9px; box-sizing:border-box; }
+${roles(`.${p}-legend i`)}
+`;
+var overlayStyles = (p) => `
+.${p}-box { position:absolute; box-sizing:border-box; border:1px dashed var(--dream-app-muted, #9b9e95); pointer-events:none; }
+.${p}-wires { position:absolute; width:1px; height:1px; overflow:visible; pointer-events:none; }
+.${p}-wires path { fill:none; stroke:var(--dream-app-sage, #b2c7bd); stroke-width:1; opacity:.8; }
+.${p}-box > span { position:absolute; top:0; left:-1px; transform:translateY(-100%); white-space:nowrap; background:var(--dream-app-selection, #26372e); color:var(--dream-app-bright, #d5e7dd); border-radius:2px 2px 0 0; padding:1px 5px; font-size:10px; line-height:16px; }
+.${p}-box[data-role=condition] > span { background:var(--dream-app-raised, #473b28); color:var(--dream-app-bright, #f1dfbd); }
+${roles(`.${p}-box`)}
+`;
+var _tmpl$ = template(`<div><div aria-label=":has lab mode"><button type=button>Explore rules</button><button type=button>Create a rule</button></div><!><button type=button>`);
+var _tmpl$2 = template(`<p>`);
+function LabPanel(props) {
+	const { dd, p, ops, context, publish } = untrack(() => props);
+	const [mode, setMode] = createSignal("inspect");
+	const source = panelSource(dd, context, ops);
+	var _el$ = _tmpl$();
+	var _el$2 = _el$.firstChild;
+	var _el$3 = _el$2.firstChild;
+	var _el$4 = _el$3.nextSibling;
+	var _el$5 = _el$2.nextSibling;
+	var _el$6 = _el$5.nextSibling;
+	_el$3._$$click = () => setMode("inspect");
+	_el$4._$$click = () => setMode("create");
+	insert(_el$, createComponent(Show, {
+		get when() {
+			return mode() === "inspect";
+		},
+		get fallback() {
+			return createComponent(CreatePanel, {
+				dd,
+				p,
+				source,
+				ops,
+				publish
+			});
+		},
+		get children() {
+			return createComponent(ExplorePanel, {
+				dd,
+				p,
+				source,
+				publish
+			});
+		}
+	}), _el$5);
+	insert(_el$, createComponent(Show, {
+		get when() {
+			return ops.status();
+		},
+		children: (status) => (() => {
+			var _el$7 = _tmpl$2();
+			insert(_el$7, () => {
+				return status().text;
+			});
+			effect(() => {
+				return {
+					e: `${p}-${status().kind === "error" ? "error" : "status"}`,
+					t: status().kind === "error" ? "alert" : "status"
+				};
+			}, ({ e, t }, _p$) => {
+				className(_el$7, e, _p$?.e);
+				t !== _p$?.t && setAttribute(_el$7, "role", t);
+			});
+			return _el$7;
+		})()
+	}), _el$6);
+	_el$6._$$click = () => void ops.addPlayground();
+	insert(_el$6, () => {
+		return ops.creating() ? "Adding playground…" : "Add playground page";
+	});
+	effect(() => {
+		return {
+			e: `${p}-panel`,
+			t: `${p}-tabs`,
+			a: !!ops.trial(),
+			o: mode() === "inspect" ? "true" : "false",
+			i: !!ops.trial(),
+			n: mode() === "create" ? "true" : "false",
+			s: ops.creating() || !!ops.trial()
+		};
+	}, ({ e, t, a, o, i, n, s }, _p$) => {
+		className(_el$, e, _p$?.e);
+		className(_el$2, t, _p$?.t);
+		a !== _p$?.a && setAttribute(_el$3, "disabled", a);
+		o !== _p$?.o && setAttribute(_el$3, "aria-pressed", o);
+		i !== _p$?.i && setAttribute(_el$4, "disabled", i);
+		n !== _p$?.n && setAttribute(_el$4, "aria-pressed", n);
+		s !== _p$?.s && setAttribute(_el$6, "disabled", s);
+	});
+	return _el$;
+}
+function activate(dd) {
+	const p = classPrefix(dd.plugin.id);
+	const ops = operations(dd);
+	dd.registerCommand({
+		id: `${dd.plugin.id}.playground`,
+		title: "Add :has playground",
+		scope: "canvas",
+		run: () => {
+			ops.addPlayground();
+		}
+	});
+	const [marks, setMarks] = createSignal([]);
+	dd.registerPanel({
+		id: "relationships",
+		title: ":has lab",
+		ariaLabel: ":has relationship lab",
+		lands: "right",
+		grow: 1,
+		styles: panelStyles(p),
+		render: (context) => createComponent(LabPanel, {
+			dd,
+			context,
+			p,
+			ops,
+			publish: setMarks
+		})
+	});
+	dd.registerOverlay({
+		id: "relationships",
+		slot: "overlay.screen",
+		styles: overlayStyles(p),
+		render: () => createComponent(RelationshipOverlay, {
+			p,
+			marks
+		})
+	});
+}
+delegateEvents(["click"]);
+export { activate as default };