@qwik.dev/devtools 0.2.8 → 2.0.0-beta.43

package/dist/ui/packages/devtools/ui/src/features/BuildAnalysis/BuildAnalysis.qwik.mjs

@@ -0,0 +1,122 @@
+import { getDevtoolsRpc } from "../../devtools/rpc.qwik.mjs";
+import { _captures, _fnSignal, _jsxSorted, _wrapProp, componentQrl, inlinedQrl, isBrowser, useSignal, useVisibleTaskQrl } from "@qwik.dev/core";
+import { Fragment } from "@qwik.dev/core/jsx-runtime";
+var _hf0 = (p0) => p0.value ? "Rebuilding..." : "Rebuild Report";
+var _hf1 = (p0) => p0.value ? "Building..." : "Build Report";
+var BUILD_ANALYSIS_VIEW_PATH = "/__qwik_devtools/build-analysis/report";
+function getBuildAnalysisIframeSrc(version, origin) {
+	const baseOrigin = origin ?? (isBrowser ? location.origin : "");
+	if (!baseOrigin) return "";
+	const url = new URL(BUILD_ANALYSIS_VIEW_PATH, baseOrigin);
+	url.searchParams.set("v", String(version));
+	return url.href;
+}
+var BuildAnalysis = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl(() => {
+	const iframeVersion = useSignal(0);
+	const isChecking = useSignal(true);
+	const isBuilding = useSignal(false);
+	const hasReport = useSignal(false);
+	const canTriggerBuild = useSignal(false);
+	const reportPath = useSignal("");
+	const buildCommand = useSignal(null);
+	const buildTriggerHint = useSignal("");
+	const errorMessage = useSignal("");
+	const loadStatus = /*#__PURE__*/ inlinedQrl(async () => {
+		const buildCommand = _captures[0], buildTriggerHint = _captures[1], canTriggerBuild = _captures[2], errorMessage = _captures[3], hasReport = _captures[4], isChecking = _captures[5], reportPath = _captures[6];
+		isChecking.value = true;
+		errorMessage.value = "";
+		try {
+			const status = await (await getDevtoolsRpc()).getBuildAnalysisStatus();
+			hasReport.value = status.exists;
+			canTriggerBuild.value = status.canTriggerBuild;
+			reportPath.value = status.reportPath;
+			buildCommand.value = status.buildCommand;
+			buildTriggerHint.value = status.buildTriggerHint || "";
+		} catch (error) {
+			errorMessage.value = error instanceof Error ? error.message : "Failed to load build analysis status.";
+		} finally {
+			isChecking.value = false;
+		}
+	}, "BuildAnalysis_component_loadStatus_QWxBjbeSM7U", [
+		buildCommand,
+		buildTriggerHint,
+		canTriggerBuild,
+		errorMessage,
+		hasReport,
+		isChecking,
+		reportPath
+	]);
+	const refreshFrame = /*#__PURE__*/ inlinedQrl(() => {
+		const iframeVersion = _captures[0];
+		iframeVersion.value += 1;
+	}, "BuildAnalysis_component_refreshFrame_KBOtgw7vjAM", [iframeVersion]);
+	const buildReport = /*#__PURE__*/ inlinedQrl(async () => {
+		const buildCommand = _captures[0], buildTriggerHint = _captures[1], canTriggerBuild = _captures[2], errorMessage = _captures[3], iframeVersion = _captures[4], isBuilding = _captures[5], loadStatus = _captures[6];
+		if (!buildCommand.value) {
+			errorMessage.value = "No build script found. Expected \"build.client\" or \"build\" in package.json.";
+			return;
+		}
+		if (!canTriggerBuild.value) {
+			errorMessage.value = buildTriggerHint.value || "Automatic rebuild is unavailable from this DevTools client.";
+			return;
+		}
+		if (!(globalThis.confirm?.(`Build analysis needs a fresh build to generate the report.\n\nRun: ${buildCommand.value} ?`) ?? true)) return;
+		isBuilding.value = true;
+		errorMessage.value = "";
+		try {
+			const result = await (await getDevtoolsRpc()).buildBuildAnalysisReport();
+			if (!result.success) {
+				errorMessage.value = result.error || "Build failed.";
+				return;
+			}
+			await loadStatus();
+			iframeVersion.value += 1;
+		} catch (error) {
+			errorMessage.value = error instanceof Error ? error.message : "Build failed.";
+		} finally {
+			isBuilding.value = false;
+		}
+	}, "BuildAnalysis_component_buildReport_9o7VY9p0bIQ", [
+		buildCommand,
+		buildTriggerHint,
+		canTriggerBuild,
+		errorMessage,
+		iframeVersion,
+		isBuilding,
+		loadStatus
+	]);
+	useVisibleTaskQrl(/*#__PURE__*/ inlinedQrl(async () => {
+		const loadStatus = _captures[0];
+		await loadStatus();
+	}, "BuildAnalysis_component_useVisibleTask_aOkClGsXcvo", [loadStatus]));
+	return /*#__PURE__*/ _jsxSorted("div", null, { class: "flex h-full min-h-0 flex-col gap-4" }, [/*#__PURE__*/ _jsxSorted("div", null, { class: "border-glass-border bg-card-item-bg rounded-2xl border p-5" }, /*#__PURE__*/ _jsxSorted("div", null, { class: "flex flex-col gap-3" }, [
+		/*#__PURE__*/ _jsxSorted("div", null, { class: "text-lg font-semibold" }, "Build Analysis", 3, null),
+		/*#__PURE__*/ _jsxSorted("div", null, { class: "text-muted-foreground max-w-3xl text-sm leading-6" }, "This tab embeds the HTML report generated by the visualizer plugin after a build.", 3, null),
+		buildCommand.value ? /*#__PURE__*/ _jsxSorted("code", null, { class: "text-muted-foreground bg-foreground/5 rounded-lg px-3 py-2 text-xs" }, _wrapProp(buildCommand), 3, "iP_0") : null,
+		buildTriggerHint.value ? /*#__PURE__*/ _jsxSorted("div", null, { class: "rounded-xl border border-amber-500/20 bg-amber-500/10 px-3 py-2 text-sm text-amber-200" }, _wrapProp(buildTriggerHint), 3, "iP_1") : null,
+		errorMessage.value ? /*#__PURE__*/ _jsxSorted("div", null, { class: "rounded-xl border border-red-500/20 bg-red-500/10 px-3 py-2 text-sm text-red-300" }, _wrapProp(errorMessage), 3, "iP_2") : null
+	], 1, null), 1, null), isChecking.value ? /*#__PURE__*/ _jsxSorted("div", null, { class: "border-glass-border bg-card-item-bg text-muted-foreground rounded-2xl border p-6 text-sm" }, "Checking build analysis report...", 3, "iP_3") : hasReport.value ? /*#__PURE__*/ _jsxSorted(Fragment, null, null, [/*#__PURE__*/ _jsxSorted("div", null, { class: "flex items-center justify-end gap-3" }, [buildCommand.value && canTriggerBuild.value ? /*#__PURE__*/ _jsxSorted("button", null, {
+		type: "button",
+		"q-e:click": buildReport,
+		disabled: _wrapProp(isBuilding),
+		class: "border-border bg-foreground/5 hover:bg-foreground/10 rounded-xl border px-4 py-2 text-sm transition-colors disabled:cursor-not-allowed disabled:opacity-50"
+	}, _fnSignal(_hf0, [isBuilding]), 3, "iP_4") : null, /*#__PURE__*/ _jsxSorted("button", null, {
+		type: "button",
+		"q-e:click": refreshFrame,
+		class: "border-border bg-foreground/5 hover:bg-foreground/10 rounded-xl border px-4 py-2 text-sm transition-colors"
+	}, "Reload Report", 3, null)], 1, null), /*#__PURE__*/ _jsxSorted("div", null, { class: "border-glass-border bg-card-item-bg min-h-0 flex-1 overflow-hidden rounded-2xl border" }, /*#__PURE__*/ _jsxSorted("iframe", { src: getBuildAnalysisIframeSrc(iframeVersion.value) }, {
+		title: "Build Analysis Report",
+		class: "h-full min-h-[680px] w-full border-0 bg-white"
+	}, null, 3, getBuildAnalysisIframeSrc(iframeVersion.value)), 1, null)], 1, "iP_5") : /*#__PURE__*/ _jsxSorted("div", null, { class: "border-glass-border bg-card-item-bg rounded-2xl border p-6" }, /*#__PURE__*/ _jsxSorted("div", null, { class: "flex max-w-3xl flex-col gap-4" }, [
+		/*#__PURE__*/ _jsxSorted("div", null, { class: "text-base font-semibold" }, "No build analysis report yet", 3, null),
+		/*#__PURE__*/ _jsxSorted("div", null, { class: "text-muted-foreground text-sm leading-6" }, canTriggerBuild.value ? "The visualizer HTML file does not exist yet. You need to build the current project first, and DevTools will ask for your confirmation before running that build." : "The visualizer HTML file does not exist yet. Run the build command locally to generate it, or reconnect from localhost if you want DevTools to trigger it for you.", 1, null),
+		/*#__PURE__*/ _jsxSorted("code", null, { class: "text-muted-foreground bg-foreground/5 rounded-lg px-3 py-2 text-xs" }, _wrapProp(reportPath), 3, null),
+		/*#__PURE__*/ _jsxSorted("div", null, null, buildCommand.value && canTriggerBuild.value ? /*#__PURE__*/ _jsxSorted("button", null, {
+			type: "button",
+			"q-e:click": buildReport,
+			disabled: _wrapProp(isBuilding),
+			class: "border-border bg-foreground/5 hover:bg-foreground/10 rounded-xl border px-4 py-2 text-sm transition-colors disabled:cursor-not-allowed disabled:opacity-50"
+		}, _fnSignal(_hf1, [isBuilding]), 3, "iP_6") : null, 1, null)
+	], 1, null), 1, "iP_7")], 1, "iP_8");
+}, "BuildAnalysis_component_wViM53DMgX4"));
+export { BuildAnalysis, getBuildAnalysisIframeSrc };

package/dist/ui/packages/devtools/ui/src/features/CodeBreak/CodeBreak.qwik.mjs

@@ -0,0 +1,42 @@
+import { StateParser } from "./StateParser.qwik.mjs";
+import { HtmlParser } from "./HtmlParser.qwik.mjs";
+import { _jsxSorted, componentQrl, inlinedQrl, useSignal, useStylesQrl } from "@qwik.dev/core";
+var CodeBreak = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl(() => {
+	useStylesQrl(/*#__PURE__*/ inlinedQrl(`
+  .code-output-container {
+    overflow-x: auto;
+    overflow-y: auto;
+  }
+  .code-output-container > div {
+    width: fit-content;
+    min-width: 100%;
+  }
+  .code-output-container pre[class*='language-'] {
+    margin: 0;
+    min-width: max-content;
+  }
+  `, "CodeBreak_component_useStyles_lHrOlzOysW0"));
+	const currentTab = useSignal("state");
+	return /*#__PURE__*/ _jsxSorted("div", null, { class: "h-full space-y-6 overflow-hidden" }, [
+		/*#__PURE__*/ _jsxSorted("div", null, { class: "flex justify-center" }, /*#__PURE__*/ _jsxSorted("div", null, { class: "border-glass-border bg-card-item-bg inline-flex rounded-xl border p-0.5" }, [/*#__PURE__*/ _jsxSorted("button", {
+			class: {
+				"rounded-lg px-3 py-2 text-sm font-medium transition-colors md:px-4": true,
+				"bg-accent text-white shadow": currentTab.value === "state",
+				"text-muted-foreground hover:bg-foreground/5": currentTab.value !== "state"
+			},
+			"q-e:click": /*#__PURE__*/ inlinedQrl((_, _1, currentTab) => currentTab.value = "state", "CodeBreak_component_div_div_div_button_q_e_click_xWgXsjQPkqw").m(),
+			"q:p": currentTab
+		}, null, "State Parser", 6, null), /*#__PURE__*/ _jsxSorted("button", {
+			class: {
+				"rounded-lg px-3 py-2 text-sm font-medium transition-colors md:px-4": true,
+				"bg-accent text-white shadow": currentTab.value === "html",
+				"text-muted-foreground hover:bg-foreground/5": currentTab.value !== "html"
+			},
+			"q-e:click": /*#__PURE__*/ inlinedQrl((_, _1, currentTab) => currentTab.value = "html", "CodeBreak_component_div_div_div_button_q_e_click_1_LC2WyereJ0c").m(),
+			"q:p": currentTab
+		}, null, "HTML Parser", 6, null)], 1, null), 1, null),
+		currentTab.value === "state" && /*#__PURE__*/ _jsxSorted(StateParser, null, null, null, 3, "on_0"),
+		currentTab.value === "html" && /*#__PURE__*/ _jsxSorted(HtmlParser, null, null, null, 3, "on_1")
+	], 1, "on_2");
+}, "CodeBreak_component_TGxTKTmWfNE"));
+export { CodeBreak };

package/dist/ui/{features/CodeBreack → packages/devtools/ui/src/features/CodeBreak}/HtmlParser.qwik.mjs

@@ -1,17 +1,16 @@
 import { getHighlighter } from "../../utils/shiki.qwik.mjs";
 import { _captures, _fnSignal, _jsxSorted, _wrapProp, componentQrl, inlinedQrl, useSignal, useStylesQrl, useVisibleTaskQrl } from "@qwik.dev/core";
 import { _getDomContainer, _vnode_toString } from "@qwik.dev/core/internal";
-//#region src/features/CodeBreack/HtmlParser.tsx
 var _hf0 = (p0) => p0.value || "";
-var HtmlParser = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl(() => {
-	useStylesQrl(/* @__PURE__ */ inlinedQrl(`
+var HtmlParser = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl(() => {
+	useStylesQrl(/*#__PURE__*/ inlinedQrl(`
     pre.shiki { overflow: auto; padding: 10px; height: 100%; }
-  `, "HtmlParser_component_useStyles_3vm0r670gQo"));
+  `, "HtmlParser_component_useStyles_KHu0RoU38Nk"));
 	const inputHtml = useSignal("");
 	const parsingTime = useSignal(null);
 	const htmlResult = useSignal("");
 	const highlightedHtml = useSignal("");
-	const onParseHtml$ = /* @__PURE__ */ inlinedQrl(() => {
+	const onParseHtml$ = /*#__PURE__*/ inlinedQrl(() => {
 		const htmlResult = _captures[0], inputHtml = _captures[1], parsingTime = _captures[2];
 		if (!inputHtml.value.trim()) {
 			parsingTime.value = null;
@@ -46,12 +45,13 @@ var HtmlParser = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl(() => {
 			htmlResult.value = `// Error parsing HTML: ${error instanceof Error ? error.message : "Invalid HTML format"}\n\n// Raw input:\n${inputHtml.value}`;
 			return;
 		}
-	}, "HtmlParser_component_onParseHtml_snV50t6EhQc", [
+	}, "HtmlParser_component_onParseHtml_GHew9R9Z8jA", [
 		htmlResult,
 		inputHtml,
 		parsingTime
 	]);
-	useVisibleTaskQrl(/* @__PURE__ */ inlinedQrl(async ({ track }) => {
+	const shikiRef = useSignal(null);
+	useVisibleTaskQrl(/*#__PURE__*/ inlinedQrl(async ({ track }) => {
 		const highlightedHtml = _captures[0], htmlResult = _captures[1], shikiRef = _captures[2];
 		track(() => htmlResult.value);
 		if (!htmlResult.value) {
@@ -63,25 +63,24 @@ var HtmlParser = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl(() => {
 			lang: "html",
 			theme: "nord"
 		});
-	}, "HtmlParser_component_useVisibleTask_N0N7lePHuYM", [
+	}, "HtmlParser_component_useVisibleTask_avGFXLf3huI", [
 		highlightedHtml,
 		htmlResult,
-		useSignal(null)
+		shikiRef
 	]));
-	return /* @__PURE__ */ _jsxSorted("div", null, { class: "grid grid-cols-1 gap-4 md:grid-cols-2" }, [/* @__PURE__ */ _jsxSorted("div", null, { class: "border-glass-border bg-card-item-bg flex h-[60vh] min-h-0 flex-col rounded-xl border" }, [/* @__PURE__ */ _jsxSorted("div", null, { class: "border-glass-border flex items-center justify-between border-b p-3" }, [/* @__PURE__ */ _jsxSorted("div", null, { class: "text-sm font-medium" }, "Input HTML", 3, null), parsingTime.value !== null && /* @__PURE__ */ _jsxSorted("span", null, { class: "border-glass-border text-muted-foreground rounded-full border px-2 py-0.5 text-xs" }, [_wrapProp(parsingTime), "ms"], 3, "nt_0")], 1, null), /* @__PURE__ */ _jsxSorted("div", null, { class: "min-h-0 flex-1 flex-col space-y-3 p-3" }, [/* @__PURE__ */ _jsxSorted("textarea", {
-		"q-e:input": /* @__PURE__ */ inlinedQrl((e, t, inputHtml) => inputHtml.value = t.value, "HtmlParser_component_div_div_div_textarea_q_e_input_1n1clJVgZc4"),
+	return /*#__PURE__*/ _jsxSorted("div", null, { class: "grid grid-cols-1 gap-4 md:grid-cols-2" }, [/*#__PURE__*/ _jsxSorted("div", null, { class: "border-glass-border bg-card-item-bg flex h-[60vh] min-h-0 flex-col rounded-xl border" }, [/*#__PURE__*/ _jsxSorted("div", null, { class: "border-glass-border flex items-center justify-between border-b p-3" }, [/*#__PURE__*/ _jsxSorted("div", null, { class: "text-sm font-medium" }, "Input HTML", 3, null), parsingTime.value !== null && /*#__PURE__*/ _jsxSorted("span", null, { class: "border-glass-border text-muted-foreground rounded-full border px-2 py-0.5 text-xs" }, [_wrapProp(parsingTime), "ms"], 3, "la_0")], 1, null), /*#__PURE__*/ _jsxSorted("div", null, { class: "min-h-0 flex-1 flex-col space-y-3 p-3" }, [/*#__PURE__*/ _jsxSorted("textarea", {
+		"q-e:input": /*#__PURE__*/ inlinedQrl((e, t, inputHtml) => inputHtml.value = t.value, "HtmlParser_component_div_div_div_textarea_q_e_input_XIyjbAjuy8w").m(),
 		"q:p": inputHtml
 	}, {
 		value: _wrapProp(inputHtml),
 		placeholder: "Paste HTML and click to parse/format.",
-		class: "border-glass-border bg-card-item-bg text-foreground h-full min-h-0 w-full flex-1 resize-none rounded-md border p-3 font-mono text-sm placeholder:text-muted-foreground"
-	}, null, 6, null), /* @__PURE__ */ _jsxSorted("div", null, { class: "flex items-center gap-3" }, /* @__PURE__ */ _jsxSorted("button", null, {
+		class: "border-glass-border bg-card-item-bg text-foreground placeholder:text-muted-foreground h-full min-h-0 w-full flex-1 resize-none rounded-md border p-3 font-mono text-sm"
+	}, null, 6, null), /*#__PURE__*/ _jsxSorted("div", null, { class: "flex items-center gap-3" }, /*#__PURE__*/ _jsxSorted("button", null, {
 		"q-e:click": onParseHtml$,
 		class: "bg-accent rounded-md px-3 py-1.5 text-sm text-white hover:opacity-90"
-	}, "Parse HTML", 3, null), 3, null)], 1, null)], 1, null), /* @__PURE__ */ _jsxSorted("div", null, { class: "border-glass-border bg-card-item-bg flex h-[60vh] min-h-0 flex-col overflow-hidden rounded-xl border" }, [/* @__PURE__ */ _jsxSorted("div", null, { class: "border-glass-border flex items-center justify-between border-b p-3" }, [/* @__PURE__ */ _jsxSorted("div", null, { class: "text-sm font-medium" }, "VNode Tree", 3, null), parsingTime.value !== null && /* @__PURE__ */ _jsxSorted("span", null, { class: "border-glass-border text-muted-foreground rounded-full border px-2 py-0.5 text-xs" }, [_wrapProp(parsingTime), "ms"], 3, "nt_1")], 1, null), /* @__PURE__ */ _jsxSorted("div", null, { class: "h-full min-h-0 flex-1" }, /* @__PURE__ */ _jsxSorted("pre", null, {
+	}, "Parse HTML", 3, null), 3, null)], 1, null)], 1, null), /*#__PURE__*/ _jsxSorted("div", null, { class: "border-glass-border bg-card-item-bg flex h-[60vh] min-h-0 flex-col overflow-hidden rounded-xl border" }, [/*#__PURE__*/ _jsxSorted("div", null, { class: "border-glass-border flex items-center justify-between border-b p-3" }, [/*#__PURE__*/ _jsxSorted("div", null, { class: "text-sm font-medium" }, "VNode Tree", 3, null), parsingTime.value !== null && /*#__PURE__*/ _jsxSorted("span", null, { class: "border-glass-border text-muted-foreground rounded-full border px-2 py-0.5 text-xs" }, [_wrapProp(parsingTime), "ms"], 3, "la_1")], 1, null), /*#__PURE__*/ _jsxSorted("div", null, { class: "h-full min-h-0 flex-1" }, /*#__PURE__*/ _jsxSorted("pre", null, {
 		class: "h-full overflow-auto",
 		dangerouslySetInnerHTML: _fnSignal(_hf0, [highlightedHtml])
-	}, null, 3, null), 3, null)], 1, null)], 1, "nt_2");
-}, "HtmlParser_component_8lXelHwAVNw"));
-//#endregion
+	}, null, 3, null), 3, null)], 1, null)], 1, "la_2");
+}, "HtmlParser_component_9YnEezFEUMA"));
 export { HtmlParser };

package/dist/ui/{features/CodeBreack → packages/devtools/ui/src/features/CodeBreak}/StateParser.qwik.mjs

@@ -1,17 +1,16 @@
 import { getHighlighter } from "../../utils/shiki.qwik.mjs";
 import { _captures, _fnSignal, _jsxSorted, _wrapProp, componentQrl, inlinedQrl, useSignal, useStylesQrl, useVisibleTaskQrl } from "@qwik.dev/core";
 import { _dumpState, _preprocessState } from "@qwik.dev/core/internal";
-//#region src/features/CodeBreack/StateParser.tsx
 var _hf0 = (p0) => p0.value || "";
-var StateParser = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl(() => {
-	useStylesQrl(/* @__PURE__ */ inlinedQrl(`
+var StateParser = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl(() => {
+	useStylesQrl(/*#__PURE__*/ inlinedQrl(`
     pre.shiki { overflow: auto; padding: 10px;  height: 100%; }
-  `, "StateParser_component_useStyles_EEff1o82UPQ"));
+  `, "StateParser_component_useStyles_d7YwbFNR03Y"));
 	const inputState = useSignal("");
 	const parsingTime = useSignal(null);
 	const stateResult = useSignal("");
 	const highlightedState = useSignal("");
-	const onParseState$ = /* @__PURE__ */ inlinedQrl(() => {
+	const onParseState$ = /*#__PURE__*/ inlinedQrl(() => {
 		const inputState = _captures[0], parsingTime = _captures[1], stateResult = _captures[2];
 		if (!inputState.value.trim()) {
 			parsingTime.value = null;
@@ -61,12 +60,13 @@ var StateParser = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl(() =>
 		}
 		parsingTime.value = performance.now() - startTime;
 		stateResult.value = "// Unable to parse the provided state";
-	}, "StateParser_component_onParseState_Vw3Sfsgu02E", [
+	}, "StateParser_component_onParseState_yEHmlh0J6WE", [
 		inputState,
 		parsingTime,
 		stateResult
 	]);
-	useVisibleTaskQrl(/* @__PURE__ */ inlinedQrl(async ({ track }) => {
+	const shikiRef = useSignal(null);
+	useVisibleTaskQrl(/*#__PURE__*/ inlinedQrl(async ({ track }) => {
 		const highlightedState = _captures[0], shikiRef = _captures[1], stateResult = _captures[2];
 		track(() => stateResult?.value);
 		const currentState = stateResult?.value ?? "";
@@ -89,25 +89,24 @@ var StateParser = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl(() =>
 		} catch {
 			if (highlightedState) highlightedState.value = currentState;
 		}
-	}, "StateParser_component_useVisibleTask_XIR02OCRVMA", [
+	}, "StateParser_component_useVisibleTask_OxLba1ofkKs", [
 		highlightedState,
-		useSignal(null),
+		shikiRef,
 		stateResult
 	]));
-	return /* @__PURE__ */ _jsxSorted("div", null, { class: "grid grid-cols-1 gap-4 md:grid-cols-2" }, [/* @__PURE__ */ _jsxSorted("div", null, { class: "border-glass-border bg-card-item-bg flex h-[60vh] min-h-0 flex-col rounded-xl border" }, [/* @__PURE__ */ _jsxSorted("div", null, { class: "border-glass-border flex items-center justify-between border-b p-3" }, [/* @__PURE__ */ _jsxSorted("div", null, { class: "text-sm font-medium" }, "Input State", 3, null), parsingTime.value !== null && /* @__PURE__ */ _jsxSorted("span", null, { class: "border-glass-border text-muted-foreground rounded-full border px-2 py-0.5 text-xs" }, [_wrapProp(parsingTime), "ms"], 3, "EG_0")], 1, null), /* @__PURE__ */ _jsxSorted("div", null, { class: "min-h-0 flex-1 flex-col space-y-3 p-3" }, [/* @__PURE__ */ _jsxSorted("textarea", {
-		"q-e:input": /* @__PURE__ */ inlinedQrl((e, t, inputState) => inputState.value = t.value, "StateParser_component_div_div_div_textarea_q_e_input_UI4xRl0sXrQ"),
+	return /*#__PURE__*/ _jsxSorted("div", null, { class: "grid grid-cols-1 gap-4 md:grid-cols-2" }, [/*#__PURE__*/ _jsxSorted("div", null, { class: "border-glass-border bg-card-item-bg flex h-[60vh] min-h-0 flex-col rounded-xl border" }, [/*#__PURE__*/ _jsxSorted("div", null, { class: "border-glass-border flex items-center justify-between gap-3 border-b p-3" }, [/*#__PURE__*/ _jsxSorted("div", null, { class: "flex items-center gap-3" }, [/*#__PURE__*/ _jsxSorted("div", null, { class: "text-sm font-medium" }, "Input State", 3, null), parsingTime.value !== null && /*#__PURE__*/ _jsxSorted("span", null, { class: "border-glass-border text-muted-foreground rounded-full border px-2 py-0.5 text-xs" }, [_wrapProp(parsingTime), "ms"], 3, "O4_0")], 1, null), /*#__PURE__*/ _jsxSorted("button", null, {
+		"q-e:click": onParseState$,
+		class: "bg-accent rounded-md px-3 py-1.5 text-sm text-white hover:opacity-90"
+	}, "Parse State", 3, null)], 1, null), /*#__PURE__*/ _jsxSorted("div", null, { class: "flex min-h-0 flex-1 flex-col p-3" }, /*#__PURE__*/ _jsxSorted("textarea", {
+		"q-e:input": /*#__PURE__*/ inlinedQrl((e, t, inputState) => inputState.value = t.value, "StateParser_component_div_div_div_textarea_q_e_input_kcp2t0mamTI").m(),
 		"q:p": inputState
 	}, {
 		value: _wrapProp(inputState),
 		placeholder: "Paste Qwik state and click to parse/format.",
-		class: "border-glass-border bg-card-item-bg text-foreground h-full min-h-0 w-full flex-1 resize-none rounded-md border p-3 font-mono text-sm placeholder:text-muted-foreground"
-	}, null, 6, null), /* @__PURE__ */ _jsxSorted("div", null, { class: "flex items-center gap-3" }, /* @__PURE__ */ _jsxSorted("button", null, {
-		"q-e:click": onParseState$,
-		class: "bg-accent rounded-md px-3 py-1.5 text-sm text-white hover:opacity-90"
-	}, "Parse State", 3, null), 3, null)], 1, null)], 1, null), /* @__PURE__ */ _jsxSorted("div", null, { class: "border-glass-border bg-card-item-bg flex h-[60vh] min-h-0 flex-col overflow-hidden rounded-xl border" }, [/* @__PURE__ */ _jsxSorted("div", null, { class: "border-glass-border flex items-center justify-between border-b p-3" }, [/* @__PURE__ */ _jsxSorted("div", null, { class: "text-sm font-medium" }, "Parsed State", 3, null), parsingTime.value !== null && /* @__PURE__ */ _jsxSorted("span", null, { class: "border-glass-border text-muted-foreground rounded-full border px-2 py-0.5 text-xs" }, [_wrapProp(parsingTime), "ms"], 3, "EG_1")], 1, null), /* @__PURE__ */ _jsxSorted("div", null, { class: "h-full min-h-0 flex-1" }, /* @__PURE__ */ _jsxSorted("pre", null, {
+		class: "border-glass-border bg-card-item-bg text-foreground placeholder:text-muted-foreground min-h-0 w-full flex-1 resize-none rounded-md border p-3 font-mono text-sm"
+	}, null, 6, null), 1, null)], 1, null), /*#__PURE__*/ _jsxSorted("div", null, { class: "border-glass-border bg-card-item-bg flex h-[60vh] min-h-0 flex-col overflow-hidden rounded-xl border" }, [/*#__PURE__*/ _jsxSorted("div", null, { class: "border-glass-border flex items-center justify-between border-b p-3" }, [/*#__PURE__*/ _jsxSorted("div", null, { class: "text-sm font-medium" }, "Parsed State", 3, null), parsingTime.value !== null && /*#__PURE__*/ _jsxSorted("span", null, { class: "border-glass-border text-muted-foreground rounded-full border px-2 py-0.5 text-xs" }, [_wrapProp(parsingTime), "ms"], 3, "O4_1")], 1, null), /*#__PURE__*/ _jsxSorted("div", null, { class: "h-full min-h-0 flex-1" }, /*#__PURE__*/ _jsxSorted("pre", null, {
 		class: "h-full overflow-auto",
 		dangerouslySetInnerHTML: _fnSignal(_hf0, [highlightedState])
-	}, null, 3, null), 3, null)], 1, null)], 1, "EG_2");
-}, "StateParser_component_HMASm9n0HkM"));
-//#endregion
+	}, null, 3, null), 3, null)], 1, null)], 1, "O4_2");
+}, "StateParser_component_WYGTcR6czK0"));
 export { StateParser };