@qilin-agent/experimental-inspector 0.0.0-stage → 3.1.6

package/lib/devtools/chunks/components-DlE11Hk_.js

@@ -0,0 +1,1338 @@
+import { G as e } from "./platform-BzB373NB.js";
+import { Ot as t, bt as n, d as r, wt as i } from "./common-qd_KLeYO.js";
+import { Co as a, Da as o, Fo as s, Io as ee, Ji as te, Jn as c, La as l, Ma as ne, No as u, Po as d, So as f, Vd as p, Vo as m, Zo as h, fo as re, ha as ie, pu as ae, ul as g, vn as oe, wo as se } from "./legacy-C0IOfyhX.js";
+import { t as ce } from "./checkbox.css-Cwxn2mfx.js";
+import { n as le } from "./helpers-BypUnKdS.js";
+//#region \0dsh-devtools:css:/home/runner/work/QiLin/QiLin/node_modules/.pnpm/chrome-devtools-frontend@1.0.1638082/node_modules/chrome-devtools-frontend/front_end/panels/elements/components/accessibilityTreeNode.css.mjs
+var ue = "/*\n * Copyright 2021 The Chromium Authors\n * Use of this source code is governed by a BSD-style license that can be\n * found in the LICENSE file.\n */\n\n.container {\n  width: 100%;\n  display: inline-block;\n}\n\n.container:hover {\n  background-color: var(--sys-color-state-hover-on-subtle);\n}\n\nspan {\n  color: var(--sys-color-token-meta);\n  font-family: var(--monospace-font-family);\n  font-size: var(--monospace-font-size);\n}\n\n.role-value {\n  color: var(--sys-color-token-tag);\n}\n\n.attribute-name {\n  color: var(--sys-color-token-attribute);\n}\n\n.attribute-value {\n  color: var(--sys-color-token-attribute-value);\n}\n", de = { ignored: "Ignored" }, fe = i("panels/elements/components/AccessibilityTreeNode.ts", de), pe = n.bind(void 0, fe);
+function me(t) {
+	let n = 1e4;
+	return t.length > n ? e(t, n) : t;
+}
+function he(e) {
+	switch (e) {
+		case p.AXValueType.Boolean:
+		case p.AXValueType.BooleanOrUndefined:
+		case p.AXValueType.String:
+		case p.AXValueType.Number: return !0;
+		default: return !1;
+	}
+}
+var ge = class extends HTMLElement {
+	#e = oe(this, { cssFile: ue });
+	#t = !0;
+	#n = "";
+	#r = "";
+	#i = [];
+	#a = "";
+	set data(e) {
+		this.#t = e.ignored, this.#n = e.name, this.#r = e.role, this.#i = e.properties, this.#a = e.id, this.#o();
+	}
+	async #o() {
+		let e = d`<span class='role-value'>${me(this.#r)}</span>`, t = d`"<span class='attribute-value'>${this.#n}</span>"`, n = this.#i.map(({ name: e, value: t }) => he(t.type) ? d` <span class='attribute-name'>${e}</span>:&nbsp;<span class='attribute-value'>${t.value}</span>` : h), r = this.#t ? d`<span>${pe(de.ignored)}</span>` : d`${e}&nbsp;${t}${n}`;
+		await se(`Accessibility node ${this.#a} render`, () => {
+			s(d`<div class='container'>${r}</div>`, this.#e, { host: this });
+		});
+	}
+};
+customElements.define("devtools-accessibility-tree-node", ge);
+//#endregion
+//#region node_modules/.pnpm/chrome-devtools-frontend@1.0.1638082/node_modules/chrome-devtools-frontend/front_end/panels/elements/components/AdornerManager.ts
+var _e = /* @__PURE__ */ function(e) {
+	return e.AD = "ad", e.CONTAINER = "container", e.FLEX = "flex", e.GRID = "grid", e.GRID_LANES = "grid-lanes", e.MEDIA = "media", e.POPOVER = "popover", e.REVEAL = "reveal", e.SCROLL = "scroll", e.SCROLL_SNAP = "scroll-snap", e.SLOT = "slot", e.VIEW_SOURCE = "view-source", e.STARTING_STYLE = "starting-style", e.SUBGRID = "subgrid", e.TOP_LAYER = "top-layer", e;
+}({}), ve = class {
+	#e = /* @__PURE__ */ new Map();
+	#t;
+	constructor(e) {
+		this.#t = e, this.#i();
+	}
+	updateSettings(e) {
+		this.#e = e, this.#n();
+	}
+	getSettings() {
+		return this.#e;
+	}
+	isAdornerEnabled(e) {
+		return this.#e.get(e) || !1;
+	}
+	#n() {
+		let e = [];
+		for (let [t, n] of this.#e) e.push({
+			adorner: t,
+			isEnabled: n
+		});
+		this.#t.set(e);
+	}
+	#r() {
+		let e = this.#t.get();
+		for (let t of e) this.#e.set(t.adorner, t.isEnabled);
+	}
+	#i() {
+		this.#r();
+		let e = new Set(this.#e.keys());
+		for (let t of Object.values(_e)) if (e.delete(t), !this.#e.has(t)) {
+			let e = t !== "media";
+			this.#e.set(t, e);
+		}
+		for (let t of e) this.#e.delete(t);
+		this.#n();
+	}
+}, ye = "/*\n * Copyright 2021 The Chromium Authors\n * Use of this source code is governed by a BSD-style license that can be\n * found in the LICENSE file.\n */\n\n:host {\n  position: relative;\n  overflow: hidden;\n  flex: auto;\n  text-overflow: ellipsis;\n}\n\n.computed-style-property {\n  --goto-size: 16px;\n\n  font-family: var(--monospace-font-family);\n  font-size: var(--monospace-font-size);\n  min-height: 16px;\n  box-sizing: border-box;\n  padding-top: 2px;\n  white-space: var(--override-computed-style-property-white-space, nowrap);\n  user-select: text;\n}\n\n.computed-style-property:hover {\n  background-color: var(--sys-color-state-hover-on-subtle);\n  cursor: text;\n}\n\n.computed-style-property.inherited {\n  opacity: 75%;\n  font-style: italic;\n}\n\n.property-name,\n.property-value {\n  display: contents;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.property-name {\n  width: 16em;\n  max-width: 52%;\n  margin-right: calc(var(--goto-size) / 2);\n  display: inline-block;\n  vertical-align: text-top;\n  color: var(--webkit-css-property-color, var(--sys-color-token-property-special)); /* stylelint-disable-line plugin/use_theme_colors */ /* See: crbug.com/1152736 for color variable migration. */\n}\n\n.property-value {\n  margin-left: 2em;\n}\n\n.goto {\n  display: none;\n  cursor: pointer;\n  position: absolute;\n  width: var(--goto-size);\n  height: var(--goto-size);\n  margin: -1px 0 0 calc(-1 * var(--goto-size));\n  mask: var(--image-file-goto-filled) center / contain no-repeat;\n  background-color: var(--sys-color-primary-bright);\n}\n\n.computed-style-property:hover .goto {\n  display: inline-block;\n}\n\n.hidden {\n  display: none;\n}\n/* narrowed styles */\n:host-context(.computed-narrow) .computed-style-property {\n  white-space: normal;\n\n  & .goto {\n    display: none;\n    margin-left: 0;\n  }\n}\n\n:host-context(.computed-narrow) .property-name,\n:host-context(.computed-narrow) .property-value {\n  display: inline-block;\n  width: 100%;\n  max-width: 100%;\n  margin-left: 0;\n  white-space: nowrap;\n}\n\n:host-context(.computed-narrow) .computed-style-property:not(.inherited):hover {\n  & .property-value {\n    margin-left: var(--goto-size);\n  }\n\n  & .goto {\n    display: inline-block;\n  }\n}\n/* high-contrast styles */\n@media (forced-colors: active) {\n  .computed-style-property.inherited {\n    opacity: 100%;\n  }\n\n  .computed-style-property:hover {\n    forced-color-adjust: none;\n    background-color: Highlight;\n  }\n\n  .computed-style-property:hover * {\n    color: HighlightText;\n  }\n\n  .goto {\n    background-color: HighlightText;\n  }\n}\n", be = class e extends Event {
+	static eventName = "onnavigatetosource";
+	constructor() {
+		super(e.eventName, {
+			bubbles: !0,
+			composed: !0
+		});
+	}
+}, xe = class extends HTMLElement {
+	#e = this.attachShadow({ mode: "open" });
+	#t = !1;
+	#n = !1;
+	connectedCallback() {
+		this.#i();
+	}
+	set inherited(e) {
+		e !== this.#t && (this.#t = e, this.#i());
+	}
+	set traceable(e) {
+		e !== this.#n && (this.#n = e, this.#i());
+	}
+	#r() {
+		this.dispatchEvent(new be());
+	}
+	#i() {
+		s(d`
+      <style>${ye}</style>
+      <div class="computed-style-property ${this.#t ? "inherited" : ""}">
+        <div class="property-name">
+          <slot name="name"></slot>
+        </div>
+        <span class="hidden" aria-hidden="false">: </span>
+        ${this.#n ? d`<span class="goto" @click=${this.#r} jslog=${ie("elements.jump-to-style").track({ click: !0 })}></span>` : null}
+        <div class="property-value">
+          <slot name="value"></slot>
+        </div>
+        <span class="hidden" aria-hidden="false">;</span>
+      </div>
+    `, this.#e, { host: this });
+	}
+};
+customElements.define("devtools-computed-style-property", xe);
+//#endregion
+//#region \0dsh-devtools:css:/home/runner/work/QiLin/QiLin/node_modules/.pnpm/chrome-devtools-frontend@1.0.1638082/node_modules/chrome-devtools-frontend/front_end/panels/elements/components/computedStyleTrace.css.mjs
+var Se = "/*\n * Copyright 2021 The Chromium Authors\n * Use of this source code is governed by a BSD-style license that can be\n * found in the LICENSE file.\n */\n\n:host {\n  text-overflow: ellipsis;\n  overflow: hidden;\n  flex-grow: 1;\n}\n\n.computed-style-trace {\n  margin-left: 16px;\n  font-family: var(--monospace-font-family);\n  font-size: var(--monospace-font-size);\n}\n\n.computed-style-trace:hover {\n  background-color: var(--sys-color-state-hover-on-subtle);\n  cursor: text;\n}\n\n.goto {\n  /* TODO: reuse with ComputedStyleProperty */\n  --size: 16px;\n\n  display: none;\n  cursor: pointer;\n  position: absolute;\n  width: var(--size);\n  height: var(--size);\n  margin: -1px 0 0 calc(-1 * var(--size));\n  mask: var(--image-file-goto-filled) center / contain no-repeat;\n  background-color: var(--sys-color-primary-bright);\n}\n\n.computed-style-trace:hover .goto {\n  display: inline-block;\n}\n\n.devtools-link {\n  color: var(--sys-color-on-surface);\n  text-decoration-color: var(--sys-color-token-subtle);\n  text-decoration-line: underline;\n  cursor: pointer;\n}\n\n.trace-value {\n  margin-left: 16px;\n}\n\n.computed-style-trace.inactive slot[name=\"trace-value\"] {\n  text-decoration: line-through;\n}\n\n.trace-selector {\n  --override-trace-selector-color: var(--sys-color-token-subtle);\n\n  color: var(--override-trace-selector-color);\n  padding-left: 2em;\n}\n\n.trace-link {\n  user-select: none;\n  float: right;\n  padding-left: 1em;\n  position: relative;\n  z-index: 1;\n}\n/* high-contrast styles */\n@media (forced-colors: active) {\n  .computed-style-trace:hover {\n    forced-color-adjust: none;\n    background-color: Highlight;\n  }\n\n  .goto {\n    background-color: Highlight;\n  }\n\n  .computed-style-trace:hover * {\n    color: HighlightText;\n  }\n\n  .computed-style-trace:hover .trace-selector {\n    --override-trace-selector-color: HighlightText;\n  }\n}\n", Ce = class extends HTMLElement {
+	#e = this.attachShadow({ mode: "open" });
+	#t = "";
+	#n = !1;
+	#r = () => {};
+	#i;
+	connectedCallback() {
+		this.#a();
+	}
+	set data(e) {
+		this.#t = e.selector, this.#n = e.active, this.#r = e.onNavigateToSource, this.#i = e.ruleOriginNode, this.#a();
+	}
+	#a() {
+		s(d`
+      <style>${te}</style>
+      <style>${c}</style>
+      <style>${Se}</style>
+      <div class="computed-style-trace ${this.#n ? "active" : "inactive"}">
+        <span class="goto" @click=${this.#r}></span>
+        <slot name="trace-value" @click=${this.#r}></slot>
+        <span class="trace-selector">${this.#t}</span>
+        <span class="trace-link">${this.#i}</span>
+      </div>
+    `, this.#e, { host: this });
+	}
+};
+customElements.define("devtools-computed-style-trace", Ce);
+//#endregion
+//#region \0dsh-devtools:css:/home/runner/work/QiLin/QiLin/node_modules/.pnpm/chrome-devtools-frontend@1.0.1638082/node_modules/chrome-devtools-frontend/front_end/panels/elements/components/cssHintDetailsView.css.mjs
+var we = "/*\n * Copyright 2022 The Chromium Authors\n * Use of this source code is governed by a BSD-style license that can be\n * found in the LICENSE file.\n */\n\n.hint-popup-wrapper {\n  max-width: 232px;\n}\n\ncode {\n  font-weight: bold;\n  font-family: inherit;\n}\n\n.hint-popup-possible-fix {\n  margin-top: 8px;\n}\n\n.clickable {\n  color: var(--sys-color-primary);\n}\n\n.underlined {\n  text-decoration: underline;\n}\n\n.unbreakable-text {\n  white-space: nowrap;\n}\n\n.footer {\n  margin-top: var(--sys-size-5);\n}\n", Te = { learnMore: "Learn More" }, Ee = i("panels/elements/components/CSSHintDetailsView.ts", Te), De = n.bind(void 0, Ee), _ = class extends HTMLElement {
+	#e = this.attachShadow({ mode: "open" });
+	#t;
+	constructor(e) {
+		super(), this.#t = e, this.#n();
+	}
+	#n() {
+		let e = this.#t.getLearnMoreLink();
+		s(d`
+        <style>${we}</style>
+        <div class="hint-popup-wrapper">
+          <div class="hint-popup-reason">
+            ${this.#t.getMessage()}
+          </div>
+          ${this.#t.getPossibleFixMessage() ? d`
+              <div class="hint-popup-possible-fix">
+                  ${this.#t.getPossibleFixMessage()}
+              </div>
+          ` : ""}
+          ${e ? d`
+                      <div class="footer">
+                        <devtools-link id="learn-more" href=${e} class="clickable underlined unbreakable-text">
+                            ${De(Te.learnMore)}
+                        </devtools-link>
+                      </div>
+                  ` : ""}
+        </div>
+      `, this.#e, { host: this });
+	}
+};
+customElements.define("devtools-css-hint-details-view", _);
+//#endregion
+//#region \0dsh-devtools:css:/home/runner/work/QiLin/QiLin/node_modules/.pnpm/chrome-devtools-frontend@1.0.1638082/node_modules/chrome-devtools-frontend/front_end/panels/elements/components/cssPropertyDocsView.css.mjs
+var Oe = "/*\n * Copyright 2023 The Chromium Authors\n * Use of this source code is governed by a BSD-style license that can be\n * found in the LICENSE file.\n */\n\n.docs-popup-wrapper {\n  max-width: 420px;\n  font-size: 12px;\n  line-height: 1.4;\n}\n\n.docs-popup-section {\n  margin-top: 8px;\n}\n\n.clickable {\n  color: var(--sys-color-primary);\n}\n\n.underlined {\n  text-decoration: underline;\n}\n\n.unbreakable-text {\n  white-space: nowrap;\n}\n\n.footer {\n  display: flex;\n  justify-content: space-between;\n}\n\n#baseline {\n  display: inline-flex;\n  align-items: flex-start;\n  gap: 4px;\n}\n\n#baseline-icon {\n  width: 18px;\n  height: 18px;\n}\n", v = {
+	learnMore: "Learn more",
+	dontShow: "Don't show",
+	limitedAvailability: "Limited availability across major browsers",
+	limitedAvailabilityInBrowsers: "Limited availability across major browsers (not fully implemented in {PH1})",
+	browserOnPlatform: "{PH1} on {PH2}",
+	newlyAvailableSince: "Newly available across major browsers (`Baseline` since {PH1})",
+	widelyAvailableSince: "Widely available across major browsers (`Baseline` since {PH1})",
+	unknownDate: "an unknown date"
+}, ke = i("panels/elements/components/CSSPropertyDocsView.ts", v), y = n.bind(void 0, ke), Ae = "../../../Images/baseline-high-availability.svg", je = "../../../Images/baseline-low-availability.svg", Me = "../../../Images/baseline-limited-availability.svg", Ne = (e) => {
+	let t;
+	switch (e.status) {
+		case "high":
+			t = Ae;
+			break;
+		case "low":
+			t = je;
+			break;
+		default: t = Me;
+	}
+	return new URL(t, new URL("panels/elements/components/CSSPropertyDocsView.js", typeof document < "u" ? document.baseURI : new URL("../../", self.location.href).href).href).toString();
+}, Pe = new Set([
+	"C",
+	"CA",
+	"E",
+	"FF",
+	"FFA",
+	"S",
+	"SM"
+]), Fe = new Map([
+	["C", {
+		name: "Chrome",
+		platform: "desktop"
+	}],
+	["CA", {
+		name: "Chrome",
+		platform: "Android"
+	}],
+	["E", {
+		name: "Edge",
+		platform: "desktop"
+	}],
+	["FF", {
+		name: "Firefox",
+		platform: "desktop"
+	}],
+	["FFA", {
+		name: "Firefox",
+		platform: "Android"
+	}],
+	["S", {
+		name: "Safari",
+		platform: "macOS"
+	}],
+	["SM", {
+		name: "Safari",
+		platform: "iOS"
+	}]
+]);
+function Ie(e) {
+	return new Intl.ListFormat(t.instance().locale, {
+		style: "long",
+		type: "disjunction"
+	}).format(e.entries().map(([e, t]) => t.length !== 1 || t[0] === "desktop" ? e : y(v.browserOnPlatform, {
+		PH1: e,
+		PH2: t[0]
+	})));
+}
+var b = (e) => {
+	if (!e) return y(v.unknownDate);
+	let n = new Date(e);
+	return new Intl.DateTimeFormat(t.instance().locale, {
+		month: "long",
+		year: "numeric"
+	}).format(n);
+}, Le = (e) => {
+	let t = e.map((e) => e.replace(/\d*$/, "")), n = Pe.difference(new Set(t)), r = /* @__PURE__ */ new Map();
+	for (let e of n) {
+		let t = Fe.get(e);
+		if (t) {
+			let { name: e, platform: n } = t;
+			r.set(e, [...r.get(e) ?? [], n]);
+		}
+	}
+	return r;
+}, Re = (e, t) => {
+	if (e.status === "false") {
+		let e = t && Le(t);
+		return e ? y(v.limitedAvailabilityInBrowsers, { PH1: Ie(e) }) : y(v.limitedAvailability);
+	}
+	return e.status === "low" ? y(v.newlyAvailableSince, { PH1: b(e.baseline_low_date) }) : y(v.widelyAvailableSince, { PH1: b(e.baseline_high_date) });
+}, x = class extends HTMLElement {
+	#e = this.attachShadow({ mode: "open" });
+	#t;
+	constructor(e) {
+		super(), this.#t = e, this.#r();
+	}
+	#n(e) {
+		let t = !e.target.checked;
+		r.instance().moduleSetting("show-css-property-documentation-on-hover").set(t);
+	}
+	#r() {
+		let { description: e, references: t, baseline: n, browsers: r } = this.#t, i = t?.[0].url;
+		s(d`
+      <style>${Oe}</style>
+      <div class="docs-popup-wrapper">
+        ${e ? d`
+          <div id="description">
+            ${e}
+          </div>
+        ` : h}
+        ${n ? d`
+          <div id="baseline" class="docs-popup-section">
+            <img
+              id="baseline-icon"
+              src=${Ne(n)}
+              role="presentation"
+            >
+            <span>
+              ${Re(n, r)}
+            </span>
+          </div>
+        ` : h}
+        ${i ? d`
+          <div class="docs-popup-section footer">
+            <devtools-link
+              id="learn-more"
+              href=${i}
+              class="clickable underlined unbreakable-text"
+            >
+              ${y(v.learnMore)}
+            </devtools-link>
+            <devtools-checkbox
+              @change=${this.#n}
+              jslog=${re("css-property-doc").track({ change: !0 })}>
+              ${y(v.dontShow)}
+            </devtools-checkbox>
+          </div>
+        ` : h}
+      </div>
+    `, this.#e, { host: this });
+	}
+};
+customElements.define("devtools-css-property-docs-view", x);
+//#endregion
+//#region node_modules/.pnpm/chrome-devtools-frontend@1.0.1638082/node_modules/chrome-devtools-frontend/front_end/panels/elements/components/CSSPropertyIconResolver.ts
+var ze = new Set([
+	"tb",
+	"tb-rl",
+	"vertical-lr",
+	"vertical-rl"
+]);
+function S(e) {
+	if (e === "left-to-right") return "right-to-left";
+	if (e === "right-to-left") return "left-to-right";
+	if (e === "top-to-bottom") return "bottom-to-top";
+	if (e === "bottom-to-top") return "top-to-bottom";
+	throw Error("Unknown PhysicalFlexDirection");
+}
+function C(e) {
+	return {
+		...e,
+		"row-reverse": S(e.row),
+		"column-reverse": S(e.column)
+	};
+}
+function w(e) {
+	let t = e.get("direction") === "rtl", n = e.get("writing-mode");
+	return n && ze.has(n) ? C({
+		row: t ? "bottom-to-top" : "top-to-bottom",
+		column: n === "vertical-lr" ? "left-to-right" : "right-to-left"
+	}) : C({
+		row: t ? "right-to-left" : "left-to-right",
+		column: "top-to-bottom"
+	});
+}
+function Be(e) {
+	let t = !0, n = !1, r = -90;
+	return e === "right-to-left" ? (r = 90, n = !1, t = !1) : e === "top-to-bottom" ? (r = 0, t = !1, n = !1) : e === "bottom-to-top" && (r = 0, t = !1, n = !0), {
+		iconName: "flex-direction",
+		rotate: r,
+		scaleX: t ? -1 : 1,
+		scaleY: n ? -1 : 1
+	};
+}
+function Ve(e) {
+	let t = !0, n = !1, r = -90;
+	return e === "right-to-left" ? (r = 90, n = !1, t = !1) : e === "top-to-bottom" ? (r = 0, t = !1, n = !1) : e === "bottom-to-top" && (r = 0, t = !1, n = !0), {
+		iconName: "grid-direction",
+		rotate: r,
+		scaleX: t ? -1 : 1,
+		scaleY: n ? -1 : 1
+	};
+}
+function T(e, t) {
+	return {
+		iconName: e,
+		rotate: t === "right-to-left" ? 90 : t === "left-to-right" ? -90 : 0,
+		scaleX: 1,
+		scaleY: 1
+	};
+}
+function E(e, t) {
+	return {
+		iconName: e,
+		rotate: t === "top-to-bottom" ? 90 : t === "bottom-to-top" ? -90 : 0,
+		scaleX: t === "right-to-left" ? -1 : 1,
+		scaleY: 1
+	};
+}
+function He(e, t) {
+	return {
+		iconName: e,
+		rotate: t === "top-to-bottom" ? 90 : t === "bottom-to-top" ? -90 : 0,
+		scaleX: t === "right-to-left" ? -1 : 1,
+		scaleY: 1
+	};
+}
+function D(e, t) {
+	return {
+		iconName: e,
+		rotate: t === "right-to-left" ? 90 : t === "left-to-right" ? -90 : 0,
+		scaleX: 1,
+		scaleY: 1
+	};
+}
+function O(e) {
+	function t(t) {
+		return Be(w(t)[e]);
+	}
+	return t;
+}
+function Ue(e) {
+	function t(t) {
+		return Ve(w(t)[e]);
+	}
+	return t;
+}
+function k(e) {
+	function t(t) {
+		let n = w(t), r = new Map([
+			["column", n.row],
+			["row", n.column],
+			["column-reverse", n.row],
+			["row-reverse", n.column]
+		]), i = t.get("flex-direction") || "row", a = r.get(i);
+		if (!a) throw Error("Unknown direction for flex-align icon");
+		return T(e, a);
+	}
+	return t;
+}
+function A(e) {
+	function t(t) {
+		let n = w(t);
+		return T(e, (t.get("grid-auto-flow") || "row").includes("column") ? n.row : n.column);
+	}
+	return t;
+}
+function j(e) {
+	function t(t) {
+		return E(e, w(t)[t.get("flex-direction") || "row"]);
+	}
+	return t;
+}
+function M(e) {
+	function t(t) {
+		let n = w(t);
+		return E(e, (t.get("grid-auto-flow") || "row").includes("column") ? n.column : n.row);
+	}
+	return t;
+}
+function N(e) {
+	function t(t) {
+		let n = w(t);
+		return He(e, (t.get("grid-auto-flow") || "row").includes("column") ? n.column : n.row);
+	}
+	return t;
+}
+function P(e) {
+	function t(t) {
+		let n = w(t), r = new Map([
+			["column", n.row],
+			["row", n.column],
+			["column-reverse", n.row],
+			["row-reverse", n.column]
+		]), i = t.get("flex-direction") || "row", a = r.get(i);
+		if (!a) throw Error("Unknown direction for flex-align icon");
+		return D(e, a);
+	}
+	return t;
+}
+function F(e) {
+	function t(t) {
+		let n = w(t);
+		return D(e, (t.get("grid-auto-flow") || "row").includes("column") ? n.row : n.column);
+	}
+	return t;
+}
+function I() {
+	return {
+		iconName: "align-items-baseline",
+		rotate: 0,
+		scaleX: 1,
+		scaleY: 1
+	};
+}
+function L(e) {
+	function t(t) {
+		return P(e)(t);
+	}
+	return t;
+}
+function R(e) {
+	function t(t) {
+		return F(e)(t);
+	}
+	return t;
+}
+function We(e, t) {
+	return {
+		iconName: e,
+		rotate: t === "bottom-to-top" || t === "top-to-bottom" ? 90 : 0,
+		scaleX: 1,
+		scaleY: 1
+	};
+}
+function Ge(e) {
+	function t(t) {
+		return We(e, w(t)[t.get("flex-direction") || "row"]);
+	}
+	return t;
+}
+var Ke = new Map([
+	["flex-direction: row", O("row")],
+	["flex-direction: column", O("column")],
+	["flex-direction: column-reverse", O("column-reverse")],
+	["flex-direction: row-reverse", O("row-reverse")],
+	["flex-direction: initial", O("row")],
+	["flex-direction: unset", O("row")],
+	["flex-direction: revert", O("row")],
+	["align-content: center", k("align-content-center")],
+	["align-content: space-around", k("align-content-space-around")],
+	["align-content: space-between", k("align-content-space-between")],
+	["align-content: stretch", k("align-content-stretch")],
+	["align-content: space-evenly", k("align-content-space-evenly")],
+	["align-content: flex-end", k("align-content-end")],
+	["align-content: flex-start", k("align-content-start")],
+	["align-content: start", k("align-content-start")],
+	["align-content: end", k("align-content-end")],
+	["align-content: normal", k("align-content-stretch")],
+	["align-content: revert", k("align-content-stretch")],
+	["align-content: unset", k("align-content-stretch")],
+	["align-content: initial", k("align-content-stretch")],
+	["justify-content: center", j("justify-content-center")],
+	["justify-content: space-around", j("justify-content-space-around")],
+	["justify-content: space-between", j("justify-content-space-between")],
+	["justify-content: space-evenly", j("justify-content-space-evenly")],
+	["justify-content: flex-end", j("justify-content-end")],
+	["justify-content: flex-start", j("justify-content-start")],
+	["justify-content: end", j("justify-content-end")],
+	["justify-content: start", j("justify-content-start")],
+	["justify-content: right", j("justify-content-end")],
+	["justify-content: left", j("justify-content-start")],
+	["align-items: stretch", P("align-items-stretch")],
+	["align-items: flex-end", P("align-items-end")],
+	["align-items: flex-start", P("align-items-start")],
+	["align-items: end", P("align-items-end")],
+	["align-items: start", P("align-items-start")],
+	["align-items: self-end", P("align-items-end")],
+	["align-items: self-start", P("align-items-start")],
+	["align-items: center", P("align-items-center")],
+	["align-items: baseline", I],
+	["align-content: baseline", I],
+	["flex-wrap: wrap", Ge("flex-wrap")],
+	["flex-wrap: nowrap", Ge("flex-no-wrap")]
+]), qe = new Map([
+	["align-self: baseline", I],
+	["align-self: center", L("align-self-center")],
+	["align-self: flex-start", L("align-self-start")],
+	["align-self: flex-end", L("align-self-end")],
+	["align-self: start", R("align-self-start")],
+	["align-self: end", R("align-self-end")],
+	["align-self: self-start", R("align-self-start")],
+	["align-self: self-end", R("align-self-end")],
+	["align-self: stretch", L("align-self-stretch")]
+]), Je = new Map([
+	["grid-auto-flow: row", Ue("row")],
+	["grid-auto-flow: column", Ue("column")],
+	["align-content: center", A("align-content-center")],
+	["align-content: space-around", A("align-content-space-around")],
+	["align-content: space-between", A("align-content-space-between")],
+	["align-content: stretch", A("align-content-stretch")],
+	["align-content: space-evenly", A("align-content-space-evenly")],
+	["align-content: end", A("align-content-end")],
+	["align-content: start", A("align-content-start")],
+	["align-content: baseline", I],
+	["justify-content: center", M("justify-content-center")],
+	["justify-content: space-around", M("justify-content-space-around")],
+	["justify-content: space-between", M("justify-content-space-between")],
+	["justify-content: space-evenly", M("justify-content-space-evenly")],
+	["justify-content: end", M("justify-content-end")],
+	["justify-content: start", M("justify-content-start")],
+	["justify-content: right", M("justify-content-end")],
+	["justify-content: left", M("justify-content-start")],
+	["justify-content: stretch", M("justify-content-stretch")],
+	["align-items: stretch", F("align-items-stretch")],
+	["align-items: end", F("align-items-end")],
+	["align-items: start", F("align-items-start")],
+	["align-items: self-end", F("align-items-end")],
+	["align-items: self-start", F("align-items-start")],
+	["align-items: center", F("align-items-center")],
+	["align-items: baseline", I],
+	["justify-items: center", N("justify-items-center")],
+	["justify-items: stretch", N("justify-items-stretch")],
+	["justify-items: end", N("justify-items-end")],
+	["justify-items: start", N("justify-items-start")],
+	["justify-items: self-end", N("justify-items-end")],
+	["justify-items: self-start", N("justify-items-start")],
+	["justify-items: right", N("justify-items-end")],
+	["justify-items: left", N("justify-items-start")],
+	["justify-items: baseline", I]
+]), Ye = new Map([
+	["align-self: baseline", I],
+	["align-self: center", R("align-self-center")],
+	["align-self: start", R("align-self-start")],
+	["align-self: end", R("align-self-end")],
+	["align-self: self-start", R("align-self-start")],
+	["align-self: self-end", R("align-self-end")],
+	["align-self: stretch", R("align-self-stretch")]
+]), Xe = (e) => {
+	let t = e?.get("display");
+	return t === "flex" || t === "inline-flex";
+}, z = (e) => {
+	let t = e?.get("display");
+	return t === "grid" || t === "inline-grid";
+};
+function Ze(e, t, n) {
+	if (Xe(t)) {
+		let n = Qe(e, t);
+		if (n) return n;
+	}
+	if (Xe(n)) {
+		let t = $e(e, n);
+		if (t) return t;
+	}
+	if (z(t)) {
+		let n = B(e, t);
+		if (n) return n;
+	}
+	if (z(n)) {
+		let t = et(e, n);
+		if (t) return t;
+	}
+	return null;
+}
+function Qe(e, t) {
+	let n = Ke.get(e);
+	return n ? n(t || /* @__PURE__ */ new Map()) : null;
+}
+function $e(e, t) {
+	let n = qe.get(e);
+	return n ? n(t || /* @__PURE__ */ new Map()) : null;
+}
+function B(e, t) {
+	let n = Je.get(e);
+	return n ? n(t || /* @__PURE__ */ new Map()) : null;
+}
+function et(e, t) {
+	let n = Ye.get(e);
+	return n ? n(t || /* @__PURE__ */ new Map()) : null;
+}
+//#endregion
+//#region \0dsh-devtools:css:/home/runner/work/QiLin/QiLin/node_modules/.pnpm/chrome-devtools-frontend@1.0.1638082/node_modules/chrome-devtools-frontend/front_end/panels/elements/components/cssQuery.css.mjs
+var tt = "/*\n * Copyright 2021 The Chromium Authors\n * Use of this source code is governed by a BSD-style license that can be\n * found in the LICENSE file.\n */\n\n.query:not(.editing-query) {\n  overflow: hidden;\n}\n\n.editable .query-text {\n  color: var(--sys-color-on-surface);\n}\n\n.editable .query-text:hover {\n  text-decoration: var(--override-styles-section-text-hover-text-decoration);\n  cursor: var(--override-styles-section-text-hover-cursor);\n}\n", { render: nt, html: V } = u, rt = class extends HTMLElement {
+	#e = this.attachShadow({ mode: "open" });
+	#t = "";
+	#n;
+	#r = "";
+	#i;
+	#a;
+	set data(e) {
+		this.#t = e.queryPrefix, this.#n = e.queryName, this.#r = e.queryText, this.#i = e.onQueryTextClick, this.#a = e.jslogContext, this.#o();
+	}
+	#o() {
+		let e = m({
+			query: !0,
+			editable: !!this.#i
+		}), t = V`
+      <span class="query-text" @click=${this.#i}>${this.#r}</span>
+    `;
+		nt(V`
+        <style>${tt}</style>
+        <style>${c}</style>
+        <div class=${e} jslog=${o(this.#a).track({
+			click: !0,
+			change: !0
+		})}>
+          <slot name="indent"></slot>
+          ${this.#t ? V`<span>${this.#t + " "}</span>` : h}
+          ${this.#n ? V`<span>${this.#n + " "}</span>` : h}
+          ${t} {
+        </div>`, this.#e, { host: this });
+	}
+};
+customElements.define("devtools-css-query", rt);
+//#endregion
+//#region \0dsh-devtools:css:/home/runner/work/QiLin/QiLin/node_modules/.pnpm/chrome-devtools-frontend@1.0.1638082/node_modules/chrome-devtools-frontend/front_end/panels/elements/components/cssVariableValueView.css.mjs
+var it = "/*\n * Copyright 2023 The Chromium Authors\n * Use of this source code is governed by a BSD-style license that can be\n * found in the LICENSE file.\n */\n\n.registered-property-popup-wrapper {\n  max-width: 232px;\n  font-size: 12px;\n  line-height: 1.4;\n  word-break: break-all;\n}\n\n.monospace {\n  font-family: var(--monospace-font-family);\n  font-size: var(--monospace-font-size);\n}\n\n.divider {\n  margin: 8px -7px;\n  border: 1px solid var(--sys-color-divider);\n}\n\n.registered-property-links {\n  margin-top: 8px;\n}\n\n.clickable {\n  color: var(--sys-color-primary);\n  cursor: pointer;\n}\n\n.underlined {\n  text-decoration: underline;\n}\n\n.unbreakable-text {\n  white-space: nowrap;\n}\n\n.css-property {\n  color: var(--webkit-css-property-color, var(--sys-color-token-property-special)); /* stylelint-disable-line plugin/use_theme_colors */ /* See: crbug.com/1152736 for color variable migration. */\n}\n\n.title {\n  color: var(--sys-color-state-disabled);\n}\n", H = {
+	registeredPropertyLinkTitle: "View registered property",
+	invalidPropertyValue: "Invalid property value, expected type {type}",
+	sIsNotDefined: "{PH1} is not defined"
+}, at = i("panels/elements/components/CSSVariableValueView.ts", H), ot = n.bind(void 0, at), st = ee.bind(void 0, at), { render: ct, html: U } = u;
+function lt(e) {
+	return U`<div class="registered-property-links">
+            <span role="button" @click=${e?.goToDefinition} class="clickable underlined unbreakable-text">
+              ${ot(H.registeredPropertyLinkTitle)}
+            </span>
+          </div>`;
+}
+var ut = class extends HTMLElement {
+	#e = this.attachShadow({ mode: "open" });
+	constructor(e) {
+		super(), this.#t(e);
+	}
+	#t(e) {
+		let t = U`<span class="monospace css-property">${e.registration.syntax()}</span>`;
+		ct(U`
+      <style>${it}</style>
+      <div class="variable-value-popup-wrapper">
+        ${st(H.invalidPropertyValue, { type: t })}
+        ${lt(e)}
+      </div>`, this.#e, { host: this });
+	}
+}, dt = class extends HTMLElement {
+	#e = this.attachShadow({ mode: "open" });
+	variableName;
+	#t;
+	details;
+	constructor({ variableName: e, value: t, details: n }) {
+		super(), this.variableName = e, this.details = n, this.value = t;
+	}
+	get value() {
+		return this.#t;
+	}
+	set value(e) {
+		this.#t = e, this.#n();
+	}
+	#n() {
+		let e = this.details?.registration.initialValue(), t = this.details ? U`
+        <hr class=divider />
+        <div class=registered-property-popup-wrapper>
+          <div class="monospace">
+            <div><span class="css-property">syntax:</span> ${this.details.registration.syntax()}</div>
+            <div><span class="css-property">inherits:</span> ${this.details.registration.inherits()}</div>
+            ${e ? U`<div><span class="css-property">initial-value:</span> ${e}</div>` : ""}
+          </div>
+          ${lt(this.details)}
+        </div>` : "";
+		ct(U`<style>${it}</style>
+             <div class="variable-value-popup-wrapper">
+               ${this.value ?? ot(H.sIsNotDefined, { PH1: this.variableName })}
+             </div>
+             ${t}
+             `, this.#e, { host: this });
+	}
+};
+customElements.define("devtools-css-variable-value-view", dt), customElements.define("devtools-css-variable-parser-error", ut);
+//#endregion
+//#region \0dsh-devtools:css:/home/runner/work/QiLin/QiLin/node_modules/.pnpm/chrome-devtools-frontend@1.0.1638082/node_modules/chrome-devtools-frontend/front_end/ui/components/node_text/nodeText.css.mjs
+var ft = "/*\n * Copyright 2021 The Chromium Authors\n * Use of this source code is governed by a BSD-style license that can be\n * found in the LICENSE file.\n */\n\n/* See: https://crbug.com/1227651 for details on changing these to --override pattern. */\n\n.node-label-name {\n  color: var(--override-node-text-label-color, var(--sys-color-token-tag));\n}\n\n.node-label-class {\n  color: var(--override-node-text-class-color, var(--sys-color-token-attribute));\n}\n\n.node-label-id {\n  color: var(--override-node-text-id-color, var(--sys-color-token-attribute));\n}\n\n.node-label-class.node-multiple-descriptors {\n  color: var(--override-node-text-multiple-descriptors-class, var(--override-node-text-class-color, var(--sys-color-token-attribute)));\n}\n\n.node-label-id.node-multiple-descriptors {\n  color: var(--override-node-text-multiple-descriptors-id, var(--override-node-text-id-color, var(--sys-color-token-attribute)));\n}\n", { render: pt, html: W } = u, mt = class extends HTMLElement {
+	#e = this.attachShadow({ mode: "open" });
+	#t = "";
+	#n = "";
+	#r = [];
+	set data(e) {
+		this.#t = e.nodeTitle, this.#n = e.nodeId, this.#r = e.nodeClasses, this.#i();
+	}
+	#i() {
+		let e = !!this.#n, t = !!(this.#r && this.#r.length > 0), n = [W`<span class="node-label-name">${this.#t}</span>`];
+		if (this.#n) {
+			let e = m({
+				"node-label-id": !0,
+				"node-multiple-descriptors": t
+			});
+			n.push(W`<span class=${e}>#${CSS.escape(this.#n)}</span>`);
+		}
+		if (this.#r && this.#r.length > 0) {
+			let t = this.#r.map((e) => `.${CSS.escape(e)}`).join(""), r = m({
+				"node-label-class": !0,
+				"node-multiple-descriptors": e
+			});
+			n.push(W`<span class=${r}>${t}</span>`);
+		}
+		pt(W`
+      <style>${ft}</style>
+      ${n}
+    `, this.#e, { host: this });
+	}
+};
+customElements.define("devtools-node-text", mt);
+//#endregion
+//#region \0dsh-devtools:css:/home/runner/work/QiLin/QiLin/node_modules/.pnpm/chrome-devtools-frontend@1.0.1638082/node_modules/chrome-devtools-frontend/front_end/panels/elements/components/elementsBreadcrumbs.css.mjs
+var ht = "/*\n * Copyright 2021 The Chromium Authors\n * Use of this source code is governed by a BSD-style license that can be\n * found in the LICENSE file.\n */\n\n:host {\n  --override-node-text-label-color: var(--sys-color-token-tag);\n  --override-node-text-class-color: var(--sys-color-token-attribute);\n  --override-node-text-id-color: var(--sys-color-token-attribute);\n  --override-node-text-multiple-descriptors-id: var(--sys-color-on-surface);\n  --override-node-text-multiple-descriptors-class: var(--sys-color-token-property);\n}\n\n.crumbs {\n  display: inline-flex;\n  align-items: stretch;\n  width: 100%;\n  overflow: hidden;\n  pointer-events: auto;\n  cursor: default;\n  white-space: nowrap;\n  position: relative;\n  background: var(--sys-color-cdt-base-container);\n  font-size: inherit;\n  font-family: inherit;\n}\n\n.crumbs-window {\n  flex-grow: 2;\n  overflow: hidden;\n}\n\n.crumbs-scroll-container {\n  display: inline-flex;\n  margin: 0;\n  padding: 0;\n}\n\n.crumb {\n  display: block;\n  padding: 0 7px;\n  line-height: 23px;\n  white-space: nowrap;\n}\n\n.overflow {\n  padding: 0 5px;\n  font-weight: bold;\n  display: block;\n  border: none;\n  flex-grow: 0;\n  flex-shrink: 0;\n  text-align: center;\n  background-color: var(--sys-color-cdt-base-container);\n  color: var(--sys-color-token-subtle);\n  margin: 1px;\n  outline: 1px solid var(--sys-color-neutral-outline);\n}\n\n.overflow.hidden {\n  display: none;\n}\n\n.overflow:disabled {\n  opacity: 50%;\n}\n\n.overflow:focus {\n  outline-color: var(--sys-color-primary);\n}\n\n.overflow:not(:disabled):hover {\n  background-color: var(--sys-color-state-hover-on-subtle);\n  color: var(--sys-color-on-surface);\n}\n\n.crumb-link {\n  text-decoration: none;\n  color: inherit;\n}\n\n.crumb:hover {\n  background: var(--sys-color-state-hover-on-subtle);\n}\n\n.crumb.selected {\n  background: var(--sys-color-tonal-container);\n}\n\n.crumb:focus {\n  outline: var(--sys-color-primary) auto 1px;\n}\n", gt = { text: "(text)" }, _t = i("panels/elements/components/ElementsBreadcrumbsUtils.ts", gt), vt = n.bind(void 0, _t), yt = (e, t) => t ? e.filter((e) => e.nodeType() !== Node.DOCUMENT_NODE).map((e) => ({
+	title: bt(e),
+	selected: e.id === t.id,
+	node: e
+})).reverse() : [], G = (e, t = {}) => ({
+	main: e,
+	extras: t
+}), bt = (e) => {
+	switch (e.nodeType()) {
+		case Node.ELEMENT_NODE: {
+			let t = e.pseudoType();
+			if (t) return G("::" + t);
+			let n = G(e.nodeNameInCorrectCase()), r = e.getAttribute("id");
+			r && (n.extras.id = r);
+			let i = e.getAttribute("class");
+			if (i) {
+				let e = new Set(i.split(/\s+/));
+				n.extras.classes = Array.from(e);
+			}
+			return n;
+		}
+		case Node.TEXT_NODE: return G(vt(gt.text));
+		case Node.COMMENT_NODE: return G("<!-->");
+		case Node.DOCUMENT_TYPE_NODE: return G("<!doctype>");
+		case Node.DOCUMENT_FRAGMENT_NODE: return G(e.shadowRootType() ? "#shadow-root" : e.nodeNameInCorrectCase());
+		default: return G(e.nodeNameInCorrectCase());
+	}
+}, { html: K } = u, q = {
+	breadcrumbs: "DOM tree breadcrumbs",
+	scrollLeft: "Scroll left",
+	scrollRight: "Scroll right"
+}, xt = i("panels/elements/components/ElementsBreadcrumbs.ts", q), St = n.bind(void 0, xt), Ct = class e extends Event {
+	static eventName = "breadcrumbsnodeselected";
+	node;
+	constructor(t) {
+		super(e.eventName, {}), this.node = t;
+	}
+}, wt = class extends HTMLElement {
+	#e = this.attachShadow({ mode: "open" });
+	#t = new ResizeObserver(() => this.#l());
+	#n = [];
+	#r = null;
+	#i = !1;
+	#a = "start";
+	#o = !1;
+	#s = !1;
+	set data(e) {
+		this.#r = e.selectedNode, this.#n = e.crumbs, this.#s = !1, le(this, this.#b);
+	}
+	disconnectedCallback() {
+		this.#o = !1, this.#t.disconnect();
+	}
+	#c(e) {
+		return (t) => {
+			t.preventDefault(), this.dispatchEvent(new Ct(e));
+		};
+	}
+	async #l() {
+		let e = this.#e.querySelector(".crumbs-scroll-container"), t = this.#e.querySelector(".crumbs-window");
+		if (!e || !t) return;
+		let n = await f(() => t.clientWidth), r = await f(() => e.clientWidth);
+		this.#i ? r < n && (this.#i = !1) : r > n && (this.#i = !0), this.#x(), this.#_(t);
+	}
+	#u(e) {
+		return () => e.highlight();
+	}
+	#d() {
+		g.hideDOMNodeHighlight();
+	}
+	#f(e) {
+		return () => e.highlight();
+	}
+	#p() {
+		g.hideDOMNodeHighlight();
+	}
+	#m() {
+		if (!this.#t || this.#o === !0) return;
+		let e = this.#e.querySelector(".crumbs");
+		e && (this.#t.observe(e), this.#o = !0);
+	}
+	async #h() {
+		let e = this.#e.querySelector(".crumbs-scroll-container"), t = this.#e.querySelector(".crumbs-window");
+		if (!e || !t) return;
+		let n = await f(() => t.clientWidth), r = await f(() => e.clientWidth);
+		this.#i ? r < n && (this.#i = !1, this.#b()) : r > n && (this.#i = !0, this.#b());
+	}
+	#g(e) {
+		if (!e.target) return;
+		let t = e.target;
+		this.#_(t);
+	}
+	#_(e) {
+		let t = e.scrollWidth - e.clientWidth, n = e.scrollLeft;
+		n < 10 ? this.#a = "start" : n >= t - 10 ? this.#a = "end" : this.#a = "middle", this.#b();
+	}
+	#v(e) {
+		return () => {
+			this.#s = !0;
+			let t = this.#e.querySelector(".crumbs-window");
+			if (!t) return;
+			let n = t.clientWidth / 2, r = e === "left" ? Math.max(Math.floor(t.scrollLeft - n), 0) : t.scrollLeft + n;
+			t.scrollTo({
+				behavior: "smooth",
+				left: r
+			});
+		};
+	}
+	#y(e, t) {
+		let n = m({
+			overflow: !0,
+			[e]: !0,
+			hidden: !this.#i
+		}), r = St(e === "left" ? q.scrollLeft : q.scrollRight);
+		return K`
+      <button
+        class=${n}
+        @click=${this.#v(e)}
+        ?disabled=${t}
+        aria-label=${r}
+        title=${r}>
+        <devtools-icon name=${"triangle-" + e} style="width: var(--sys-size-6); height: 10px;">
+        </devtools-icon>
+      </button>
+      `;
+	}
+	#b() {
+		let e = yt(this.#n, this.#r);
+		s(K`
+      <style>${ht}</style>
+      <nav class="crumbs" aria-label=${St(q.breadcrumbs)} jslog=${ne()}>
+        ${this.#y("left", this.#a === "start")}
+
+        <div class="crumbs-window" @scroll=${this.#g}>
+          <ul class="crumbs-scroll-container">
+            ${e.map((e) => K`
+                <li class=${m({
+			crumb: !0,
+			selected: e.selected
+		})}
+                  data-node-id=${e.node.id}
+                  data-crumb="true"
+                >
+                  <a href="#" draggable=false class="crumb-link"
+                    jslog=${l().track({
+			click: !0,
+			resize: !0
+		})}
+                    @click=${this.#c(e.node)}
+                    @mousemove=${this.#u(e.node)}
+                    @mouseleave=${this.#d}
+                    @focus=${this.#f(e.node)}
+                    @blur=${this.#p}
+                  >
+                    <devtools-node-text data-node-title=${e.title.main} .data=${{
+			nodeTitle: e.title.main,
+			nodeId: e.title.extras.id,
+			nodeClasses: e.title.extras.classes
+		}}>
+                    </devtools-node-text>
+                  </a>
+                </li>`)}
+          </ul>
+        </div>
+        ${this.#y("right", this.#a === "end")}
+      </nav>
+    `, this.#e, { host: this }), this.#h(), this.#m(), this.#x();
+	}
+	async #x() {
+		if (!this.#r || !this.#e || !this.#i || this.#s) return;
+		let e = this.#r.id, t = this.#e.querySelector(`.crumb[data-node-id="${e}"]`);
+		t && await a(() => {
+			t.scrollIntoView({ behavior: "auto" });
+		});
+	}
+};
+customElements.define("devtools-elements-breadcrumbs", wt);
+//#endregion
+//#region \0dsh-devtools:css:/home/runner/work/QiLin/QiLin/node_modules/.pnpm/chrome-devtools-frontend@1.0.1638082/node_modules/chrome-devtools-frontend/front_end/panels/elements/components/elementsTreeExpandButton.css.mjs
+var Tt = "/*\n * Copyright 2022 The Chromium Authors\n * Use of this source code is governed by a BSD-style license that can be\n * found in the LICENSE file.\n */\n\n:host {\n  display: inline-flex;\n  vertical-align: middle;\n}\n\n:host(.hidden) {\n  display: none;\n}\n\n.expand-button {\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  box-sizing: border-box;\n  width: 14px;\n  height: 10px;\n  margin: 0 2px;\n  border: 1px solid var(--override-adorner-border-color, var(--sys-color-tonal-outline));\n  border-radius: 10px;\n  background: var(--override-adorner-background-color, var(--sys-color-cdt-base-container));\n  padding: 0;\n  position: relative;\n\n  &:hover::after,\n  &:active::before {\n    content: \"\";\n    height: 100%;\n    width: 100%;\n    border-radius: inherit;\n    position: absolute;\n    top: 0;\n    left: 0;\n  }\n\n  &:hover::after {\n    background-color: var(--sys-color-state-hover-on-subtle);\n  }\n\n  &:active::before {\n    background-color: var(--sys-color-state-ripple-neutral-on-subtle);\n  }\n}\n\n.expand-button devtools-icon {\n  width: 14px;\n  height: 14px;\n  color: var(--sys-color-primary);\n}\n", Et = { expand: "Expand" }, Dt = i("panels/elements/components/ElementsTreeExpandButton.ts", Et), Ot = n.bind(void 0, Dt), kt = class extends HTMLElement {
+	#e = this.attachShadow({ mode: "open" });
+	#t = () => {};
+	set data(e) {
+		this.#t = e.clickHandler, this.#n();
+	}
+	#n() {
+		this.#r();
+	}
+	#r() {
+		s(d`
+      <style>${Tt}</style>
+      <button
+        class="expand-button"
+        tabindex="-1"
+        aria-label=${Ot(Et.expand)}
+        jslog=${ie("expand").track({ click: !0 })}
+        @click=${this.#t}><devtools-icon name="dots-horizontal"></devtools-icon></button>`, this.#e, { host: this });
+	}
+};
+customElements.define("devtools-elements-tree-expand-button", kt);
+//#endregion
+//#region \0dsh-devtools:css:/home/runner/work/QiLin/QiLin/node_modules/.pnpm/chrome-devtools-frontend@1.0.1638082/node_modules/chrome-devtools-frontend/front_end/panels/elements/components/queryContainer.css.mjs
+var At = "/*\n * Copyright 2021 The Chromium Authors\n * Use of this source code is governed by a BSD-style license that can be\n * found in the LICENSE file.\n */\n\n.container-link {\n  display: inline-block;\n  color: var(--sys-color-state-disabled);\n}\n\n.container-link:hover {\n  color: var(--sys-color-primary);\n}\n\n.queried-size-details {\n  color: var(--sys-color-on-surface);\n}\n\n.axis-icon {\n  margin-left: 0.4em;\n  width: 16px;\n  height: 12px;\n  vertical-align: text-top;\n}\n\n.axis-icon.hidden {\n  display: none;\n}\n\n.axis-icon.vertical {\n  transform: rotate(90deg);\n}\n", { render: jt, html: Mt } = u, { PhysicalAxis: Nt, QueryAxis: Pt } = ae, Ft = class e extends Event {
+	static eventName = "queriedsizerequested";
+	constructor() {
+		super(e.eventName, {});
+	}
+}, It = class extends HTMLElement {
+	#e = this.attachShadow({ mode: "open" });
+	#t;
+	#n;
+	#r;
+	#i = !1;
+	#a;
+	set data(e) {
+		this.#t = e.queryName, this.#n = e.container, this.#r = e.onContainerLinkClick, this.#c();
+	}
+	updateContainerQueriedSizeDetails(e) {
+		this.#a = e, this.#c();
+	}
+	async #o() {
+		this.#n?.highlight("container-outline"), this.#i = !0, this.dispatchEvent(new Ft());
+	}
+	#s() {
+		g.hideDOMNodeHighlight(), this.#i = !1, this.#c();
+	}
+	#c() {
+		if (!this.#n) return;
+		let e, t;
+		this.#t || (e = this.#n.getAttribute("id"), t = this.#n.getAttribute("class")?.split(/\s+/).filter(Boolean));
+		let n = this.#t || this.#n.nodeNameInCorrectCase();
+		jt(Mt`
+      <style>${At}</style>
+      →
+      <a href="#" draggable=false class="container-link"
+         jslog=${o("container-query").track({ click: !0 })}
+         @click=${this.#r}
+         @mouseenter=${this.#o}
+         @mouseleave=${this.#s}>
+        <devtools-node-text data-node-title=${n} .data=${{
+			nodeTitle: n,
+			nodeId: e,
+			nodeClasses: t
+		}}>
+        </devtools-node-text>
+      </a>
+      ${this.#i ? this.#l() : h}
+    `, this.#e, { host: this });
+	}
+	#l() {
+		if (!this.#a || this.#a.queryAxis === Pt.NONE) return h;
+		let e = this.#a.queryAxis === Pt.BOTH, t = m({
+			"axis-icon": !0,
+			hidden: e,
+			vertical: this.#a.physicalAxis === Nt.VERTICAL
+		});
+		return Mt`
+      <span class="queried-size-details">
+        (${this.#a.queryAxis}
+        <devtools-icon
+          class=${t} name="width"></devtools-icon>
+        ) ${e && this.#a.width ? " width: " : h}
+        ${this.#a.width || h}
+        ${e && this.#a.height ? " height: " : h}
+        ${this.#a.height || h}
+      </span>
+    `;
+	}
+};
+customElements.define("devtools-query-container", It);
+//#endregion
+//#region \0dsh-devtools:css:/home/runner/work/QiLin/QiLin/node_modules/.pnpm/chrome-devtools-frontend@1.0.1638082/node_modules/chrome-devtools-frontend/front_end/panels/elements/components/stylePropertyEditor.css.mjs
+var Lt = "/*\n * Copyright 2021 The Chromium Authors\n * Use of this source code is governed by a BSD-style license that can be\n * found in the LICENSE file.\n */\n\n.container {\n  min-width: 170px;\n}\n\n.row {\n  padding: 0;\n  color: var(--sys-color-on-surface);\n  padding-bottom: 16px;\n}\n\n.row:last-child {\n  padding-bottom: 0;\n}\n\n.property {\n  padding-bottom: 4px;\n  white-space: nowrap;\n}\n\n.property-name {\n  color: var(--sys-color-token-property-special);\n}\n\n.property-value {\n  color: var(--sys-color-on-surface);\n}\n\n.property-value.not-authored {\n  color: var(--sys-color-state-disabled);\n}\n\n.buttons {\n  display: flex;\n  flex-direction: row;\n}\n\n.buttons > :first-child {\n  border-radius: 3px 0 0 3px;\n}\n\n.buttons > :last-child {\n  border-radius: 0 3px 3px 0;\n}\n\n.button {\n  border: 1px solid var(--sys-color-neutral-outline);\n  background-color: var(--sys-color-cdt-base-container);\n  width: 24px;\n  height: 24px;\n  min-width: 24px;\n  min-height: 24px;\n  padding: 0;\n  margin: 0;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n}\n\n.button:focus-visible {\n  outline: auto 5px -webkit-focus-ring-color;\n}\n\n.button devtools-icon {\n  color: var(--icon-default);\n}\n\n.button:hover devtools-icon {\n  color: var(--icon-default-hover);\n}\n\n.button.selected devtools-icon {\n  color: var(--icon-toggled);\n}\n", J = {
+	selectButton: "Add {propertyName}: {propertyValue}",
+	deselectButton: "Remove {propertyName}: {propertyValue}",
+	denseLabel: "Dense"
+}, Rt = i("panels/elements/components/StylePropertyEditor.ts", J), zt = n.bind(void 0, Rt), { render: Bt, html: Y, Directives: Vt } = u, X = class e extends Event {
+	static eventName = "propertyselected";
+	data;
+	constructor(t, n) {
+		super(e.eventName, {}), this.data = {
+			name: t,
+			value: n
+		};
+	}
+}, Z = class e extends Event {
+	static eventName = "propertydeselected";
+	data;
+	constructor(t, n) {
+		super(e.eventName, {}), this.data = {
+			name: t,
+			value: n
+		};
+	}
+}, Q = class extends HTMLElement {
+	#e = this.attachShadow({ mode: "open" });
+	#t = /* @__PURE__ */ new Map();
+	#n = /* @__PURE__ */ new Map();
+	editableProperties = [];
+	getEditableProperties() {
+		return this.editableProperties;
+	}
+	set data(e) {
+		this.#t = e.authoredProperties, this.#n = e.computedProperties, this.#r();
+	}
+	#r() {
+		Bt(Y`
+      <style>${Lt}</style>
+      <style>${ce}</style>
+      <div class="container">
+        ${this.editableProperties.map((e) => this.#i(e))}
+      </div>
+    `, this.#e, { host: this });
+	}
+	#i(e) {
+		let t = this.#t.get(e.propertyName), n = !t, r = t || this.#n.get(e.propertyName), i = Vt.classMap({
+			"property-value": !0,
+			"not-authored": n
+		});
+		return e.propertyName === "grid-auto-flow" ? this.#a(e, r, i) : Y`<div class="row">
+      <div class="property">
+        <span class="property-name">${e.propertyName}</span>: <span class=${i}>${r}</span>
+      </div>
+      <div class="buttons">
+        ${e.propertyValues.map((n) => this.#s(n, e.propertyName, n === t))}
+      </div>
+    </div>`;
+	}
+	#a(e, t, n) {
+		let r = this.#t.get(e.propertyName), i = r === "dense" || r === "row dense" || r === "column dense", a = r === "row" || r === "row dense", o = r === "column" || r === "column dense";
+		return Y`<div class="row">
+      <div class="property">
+        <span class="property-name">${e.propertyName}</span>: <span class=${n}>${t}</span>
+      </div>
+      <div class="buttons">
+        ${this.#s("row", e.propertyName, a)}
+        ${this.#s("column", e.propertyName, o)}
+        <devtools-checkbox
+          .checked=${i}
+          @change=${(e) => this.#o(e, a, o)}
+        >
+          ${zt(J.denseLabel)}
+        </devtools-checkbox>
+      </div>
+    </div>`;
+	}
+	#o(e, t, n) {
+		let r = e.target.checked, i = "grid-auto-flow", a = this.#t.get(i), o = "";
+		o = t ? r ? "row dense" : "row" : n ? r ? "column dense" : "column" : r ? "dense" : "", a && this.dispatchEvent(new Z(i, a)), o && this.dispatchEvent(new X(i, o));
+	}
+	#s(e, t, n = !1) {
+		let r = `${t}: ${e}`, i = this.findIcon(r, this.#n);
+		if (!i) throw Error(`Icon for ${r} is not found`);
+		let a = `transform: rotate(${i.rotate}deg) scale(${i.scaleX}, ${i.scaleY})`, o = Vt.classMap({
+			button: !0,
+			selected: n
+		}), s = {
+			propertyName: t,
+			propertyValue: e
+		};
+		return Y`
+      <button title=${zt(n ? J.deselectButton : J.selectButton, s)}
+              class=${o}
+              jslog=${l().track({
+			click: !0,
+			resize: !0
+		}).context(`${t}-${e}`)}
+              @click=${() => this.#c(t, e, n)}>
+        <devtools-icon style=${a} name=${i.iconName}>
+        </devtools-icon>
+      </button>
+    `;
+	}
+	#c(e, t, n) {
+		if (e === "grid-auto-flow") {
+			let r = this.#t.get(e), i = r?.includes("dense") || !1;
+			if (n) {
+				let t = i ? "dense" : "";
+				r && this.dispatchEvent(new Z(e, r)), t && this.dispatchEvent(new X(e, t));
+			} else {
+				let n = i ? `${t} dense` : t;
+				r && this.dispatchEvent(new Z(e, r)), this.dispatchEvent(new X(e, n));
+			}
+		} else n ? this.dispatchEvent(new Z(e, t)) : this.dispatchEvent(new X(e, t));
+	}
+	findIcon(e, t) {
+		throw Error("Not implemented");
+	}
+}, Ht = class extends Q {
+	jslogContext = "cssFlexboxEditor";
+	editableProperties = Wt;
+	findIcon(e, t) {
+		return Qe(e, t);
+	}
+};
+customElements.define("devtools-flexbox-editor", Ht);
+var Ut = class extends Q {
+	jslogContext = "cssGridEditor";
+	editableProperties = Gt;
+	findIcon(e, t) {
+		return B(e, t);
+	}
+};
+customElements.define("devtools-grid-editor", Ut);
+var $ = class extends Q {
+	jslogContext = "cssGridLanesEditor";
+	editableProperties = Kt;
+	findIcon(e, t) {
+		return B(e, t);
+	}
+};
+customElements.define("devtools-grid-lanes-editor", $);
+var Wt = [
+	{
+		propertyName: "flex-direction",
+		propertyValues: [
+			"row",
+			"column",
+			"row-reverse",
+			"column-reverse"
+		]
+	},
+	{
+		propertyName: "flex-wrap",
+		propertyValues: ["nowrap", "wrap"]
+	},
+	{
+		propertyName: "align-content",
+		propertyValues: [
+			"center",
+			"flex-start",
+			"flex-end",
+			"space-around",
+			"space-between",
+			"stretch"
+		]
+	},
+	{
+		propertyName: "justify-content",
+		propertyValues: [
+			"center",
+			"flex-start",
+			"flex-end",
+			"space-between",
+			"space-around",
+			"space-evenly"
+		]
+	},
+	{
+		propertyName: "align-items",
+		propertyValues: [
+			"center",
+			"flex-start",
+			"flex-end",
+			"stretch",
+			"baseline"
+		]
+	}
+], Gt = [
+	{
+		propertyName: "grid-auto-flow",
+		propertyValues: ["row", "column"]
+	},
+	{
+		propertyName: "align-content",
+		propertyValues: [
+			"center",
+			"start",
+			"end",
+			"space-between",
+			"space-around",
+			"space-evenly",
+			"stretch"
+		]
+	},
+	{
+		propertyName: "justify-content",
+		propertyValues: [
+			"center",
+			"start",
+			"end",
+			"space-between",
+			"space-around",
+			"space-evenly",
+			"stretch"
+		]
+	},
+	{
+		propertyName: "align-items",
+		propertyValues: [
+			"center",
+			"start",
+			"end",
+			"stretch",
+			"baseline"
+		]
+	},
+	{
+		propertyName: "justify-items",
+		propertyValues: [
+			"center",
+			"start",
+			"end",
+			"stretch"
+		]
+	}
+], Kt = [
+	{
+		propertyName: "align-content",
+		propertyValues: [
+			"center",
+			"start",
+			"end",
+			"space-between",
+			"space-around",
+			"space-evenly",
+			"stretch"
+		]
+	},
+	{
+		propertyName: "justify-content",
+		propertyValues: [
+			"center",
+			"start",
+			"end",
+			"space-between",
+			"space-around",
+			"space-evenly",
+			"stretch"
+		]
+	},
+	{
+		propertyName: "align-items",
+		propertyValues: [
+			"center",
+			"start",
+			"end",
+			"stretch"
+		]
+	},
+	{
+		propertyName: "justify-items",
+		propertyValues: [
+			"center",
+			"start",
+			"end",
+			"stretch"
+		]
+	}
+];
+//#endregion
+export { wt as a, rt as c, _ as d, Ce as f, It as i, Ze as l, _e as m, Ut as n, ut as o, ve as p, $ as r, dt as s, Ht as t, x as u };