@qwik.dev/devtools 0.3.0-beta.3 → 2.0.0-beta.45

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

@@ -1,149 +1,88 @@
-import { componentQrl, inlinedQrl, useStylesQrl, useSignal, useVisibleTaskQrl, _captures, _jsxSorted, _wrapProp, _fnSignal } from "@qwik.dev/core";
-import { _getDomContainer, _vnode_toString } from "@qwik.dev/core/internal";
 import { getHighlighter } from "../../utils/shiki.qwik.mjs";
-const _hf0 = (p0) => p0.value || "";
-const HtmlParser = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl(() => {
-  useStylesQrl(/* @__PURE__ */ inlinedQrl(`
+import { _captures, _fnSignal, _jsxSorted, _wrapProp, componentQrl, inlinedQrl, useSignal, useStylesQrl, useVisibleTaskQrl } from "@qwik.dev/core";
+import { _getDomContainer, _vnode_toString } from "@qwik.dev/core/internal";
+var _hf0 = (p0) => p0.value || "";
+var _hf0_str = "p0.value||\"\"";
+var HtmlParser = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl(() => {
+	useStylesQrl(/*#__PURE__*/ inlinedQrl(`
     pre.shiki { overflow: auto; padding: 10px; height: 100%; }
   `, "HtmlParser_component_useStyles_KHu0RoU38Nk"));
-  const inputHtml = useSignal("");
-  const parsingTime = useSignal(null);
-  const htmlResult = useSignal("");
-  const highlightedHtml = useSignal("");
-  const onParseHtml$ = /* @__PURE__ */ inlinedQrl(() => {
-    const htmlResult2 = _captures[0], inputHtml2 = _captures[1], parsingTime2 = _captures[2];
-    if (!inputHtml2.value.trim()) {
-      parsingTime2.value = null;
-      htmlResult2.value = "// Paste HTML on the left to parse";
-      return;
-    }
-    const startTime = performance.now();
-    try {
-      const parser = new DOMParser();
-      const doc = parser.parseFromString(inputHtml2.value, "text/html");
-      let output = "";
-      try {
-        const container = _getDomContainer(doc.documentElement);
-        if (container) {
-          output += "// Qwik Container Found:\n";
-          output += `- Container Type: ${container.qContainer}
-`;
-          output += `- Manifest Hash: ${container.qManifestHash}
-
-`;
-          try {
-            const vdomTree = _vnode_toString.call(container.rootVNode, Number.MAX_SAFE_INTEGER, "", true, false, false);
-            output += "// VNode Tree:\n" + vdomTree + "\n\n";
-          } catch (vnodeErr) {
-            output += "// VNode parsing error: " + vnodeErr + "\n\n";
-          }
-        } else {
-          output = "// No Qwik container found in the HTML";
-        }
-      } catch (containerErr) {
-        output = "// No Qwik container found or error: " + containerErr;
-      }
-      parsingTime2.value = performance.now() - startTime;
-      htmlResult2.value = output;
-      return;
-    } catch (error) {
-      parsingTime2.value = performance.now() - startTime;
-      htmlResult2.value = `// Error parsing HTML: ${error instanceof Error ? error.message : "Invalid HTML format"}
-
-// Raw input:
-${inputHtml2.value}`;
-      return;
-    }
-  }, "HtmlParser_component_onParseHtml_GHew9R9Z8jA", [
-    htmlResult,
-    inputHtml,
-    parsingTime
-  ]);
-  const shikiRef = useSignal(null);
-  useVisibleTaskQrl(/* @__PURE__ */ inlinedQrl(async ({ track }) => {
-    const highlightedHtml2 = _captures[0], htmlResult2 = _captures[1], shikiRef2 = _captures[2];
-    track(() => htmlResult2.value);
-    if (!htmlResult2.value) {
-      highlightedHtml2.value = "";
-      return;
-    }
-    if (!shikiRef2.value) {
-      shikiRef2.value = await getHighlighter();
-    }
-    highlightedHtml2.value = shikiRef2.value.codeToHtml(htmlResult2.value, {
-      lang: "html",
-      theme: "nord"
-    });
-  }, "HtmlParser_component_useVisibleTask_avGFXLf3huI", [
-    highlightedHtml,
-    htmlResult,
-    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, "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, inputHtml2) => inputHtml2.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 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, "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, "la_2");
+	const inputHtml = useSignal("");
+	const parsingTime = useSignal(null);
+	const htmlResult = useSignal("");
+	const highlightedHtml = useSignal("");
+	const onParseHtml$ = /*#__PURE__*/ inlinedQrl(() => {
+		const htmlResult = _captures[0], inputHtml = _captures[1], parsingTime = _captures[2];
+		if (!inputHtml.value.trim()) {
+			parsingTime.value = null;
+			htmlResult.value = "// Paste HTML on the left to parse";
+			return;
+		}
+		const startTime = performance.now();
+		try {
+			const doc = new DOMParser().parseFromString(inputHtml.value, "text/html");
+			let output = "";
+			try {
+				const container = _getDomContainer(doc.documentElement);
+				if (container) {
+					output += "// Qwik Container Found:\n";
+					output += `- Container Type: ${container.qContainer}\n`;
+					output += `- Manifest Hash: ${container.qManifestHash}\n\n`;
+					try {
+						const vdomTree = _vnode_toString.call(container.rootVNode, Number.MAX_SAFE_INTEGER, "", true, false, false);
+						output += "// VNode Tree:\n" + vdomTree + "\n\n";
+					} catch (vnodeErr) {
+						output += "// VNode parsing error: " + vnodeErr + "\n\n";
+					}
+				} else output = "// No Qwik container found in the HTML";
+			} catch (containerErr) {
+				output = "// No Qwik container found or error: " + containerErr;
+			}
+			parsingTime.value = performance.now() - startTime;
+			htmlResult.value = output;
+			return;
+		} catch (error) {
+			parsingTime.value = performance.now() - startTime;
+			htmlResult.value = `// Error parsing HTML: ${error instanceof Error ? error.message : "Invalid HTML format"}\n\n// Raw input:\n${inputHtml.value}`;
+			return;
+		}
+	}, "HtmlParser_component_onParseHtml_GHew9R9Z8jA", [
+		htmlResult,
+		inputHtml,
+		parsingTime
+	]);
+	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) {
+			highlightedHtml.value = "";
+			return;
+		}
+		if (!shikiRef.value) shikiRef.value = await getHighlighter();
+		highlightedHtml.value = shikiRef.value.codeToHtml(htmlResult.value, {
+			lang: "html",
+			theme: "nord"
+		});
+	}, "HtmlParser_component_useVisibleTask_avGFXLf3huI", [
+		highlightedHtml,
+		htmlResult,
+		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, "nu_0")], 1, null), /*#__PURE__*/ _jsxSorted("div", null, { class: "min-h-0 flex-1 flex-col space-y-3 p-3" }, [/*#__PURE__*/ _jsxSorted("textarea", null, {
+		value: _wrapProp(inputHtml),
+		"q-e:input": /*#__PURE__*/ inlinedQrl((e, t) => {
+			const inputHtml = _captures[0];
+			return inputHtml.value = t.value;
+		}, "HtmlParser_component_div_div_div_textarea_q_e_input_XIyjbAjuy8w", [inputHtml]),
+		placeholder: "Paste HTML and click to parse/format.",
+		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, 3, 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)], 3, 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, "nu_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], _hf0_str)
+	}, null, 3, null), 3, null)], 1, null)], 1, "nu_2");
 }, "HtmlParser_component_9YnEezFEUMA"));
-export {
-  HtmlParser
-};
+export { HtmlParser };

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

@@ -1,181 +1,114 @@
-import { componentQrl, inlinedQrl, useStylesQrl, useSignal, useVisibleTaskQrl, _captures, _jsxSorted, _wrapProp, _fnSignal } from "@qwik.dev/core";
-import { _preprocessState, _dumpState } from "@qwik.dev/core/internal";
 import { getHighlighter } from "../../utils/shiki.qwik.mjs";
-const _hf0 = (p0) => p0.value || "";
-const StateParser = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl(() => {
-  useStylesQrl(/* @__PURE__ */ inlinedQrl(`
+import { _captures, _fnSignal, _jsxSorted, _wrapProp, componentQrl, inlinedQrl, useSignal, useStylesQrl, useVisibleTaskQrl } from "@qwik.dev/core";
+import { _dumpState, _preprocessState } from "@qwik.dev/core/internal";
+var _hf0 = (p0) => p0.value || "";
+var _hf0_str = "p0.value||\"\"";
+var StateParser = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl(() => {
+	useStylesQrl(/*#__PURE__*/ inlinedQrl(`
     pre.shiki { overflow: auto; padding: 10px;  height: 100%; }
   `, "StateParser_component_useStyles_d7YwbFNR03Y"));
-  const inputState = useSignal("");
-  const parsingTime = useSignal(null);
-  const stateResult = useSignal("");
-  const highlightedState = useSignal("");
-  const onParseState$ = /* @__PURE__ */ inlinedQrl(() => {
-    const inputState2 = _captures[0], parsingTime2 = _captures[1], stateResult2 = _captures[2];
-    if (!inputState2.value.trim()) {
-      parsingTime2.value = null;
-      stateResult2.value = "// Paste state on the left to parse";
-      return;
-    }
-    const startTime = performance.now();
-    try {
-      const stateData = JSON.parse(inputState2.value);
-      const container = {
-        $getObjectById$: (id) => id,
-        element: null,
-        getSyncFn: () => () => {
-        },
-        $storeProxyMap$: /* @__PURE__ */ new WeakMap(),
-        $forwardRefs$: null,
-        $initialQRLsIndexes$: null,
-        $scheduler$: null
-      };
-      _preprocessState(stateData, container);
-      const dumpedState = _dumpState(stateData, false, "", null).replace(/\n/, "");
-      parsingTime2.value = performance.now() - startTime;
-      stateResult2.value = dumpedState;
-      return;
-    } catch (error) {
-      try {
-        const cleanInput = inputState2.value.replace(/<script[^>]*>/gi, "").replace(/<\/script>/gi, "").trim();
-        if (cleanInput) {
-          const stateData = JSON.parse(cleanInput);
-          const container = {
-            $getObjectById$: (id) => id,
-            element: null,
-            getSyncFn: () => () => {
-            },
-            $storeProxyMap$: /* @__PURE__ */ new WeakMap(),
-            $forwardRefs$: null,
-            $initialQRLsIndexes$: null,
-            $scheduler$: null
-          };
-          _preprocessState(stateData, container);
-          const dumpedState = _dumpState(stateData, false, "", null);
-          parsingTime2.value = performance.now() - startTime;
-          stateResult2.value = dumpedState;
-          return;
-        }
-      } catch {
-        parsingTime2.value = performance.now() - startTime;
-        stateResult2.value = `// Error parsing state: ${error instanceof Error ? error.message : "Invalid state format"}
-
-// Raw input:
-${inputState2.value}`;
-        return;
-      }
-    }
-    parsingTime2.value = performance.now() - startTime;
-    stateResult2.value = "// Unable to parse the provided state";
-  }, "StateParser_component_onParseState_yEHmlh0J6WE", [
-    inputState,
-    parsingTime,
-    stateResult
-  ]);
-  const shikiRef = useSignal(null);
-  useVisibleTaskQrl(/* @__PURE__ */ inlinedQrl(async ({ track }) => {
-    const highlightedState2 = _captures[0], shikiRef2 = _captures[1], stateResult2 = _captures[2];
-    track(() => stateResult2?.value);
-    const currentState = stateResult2?.value ?? "";
-    if (!currentState) {
-      if (highlightedState2) {
-        highlightedState2.value = "";
-      }
-      return;
-    }
-    try {
-      if (!shikiRef2?.value) {
-        if (shikiRef2) {
-          shikiRef2.value = await getHighlighter();
-        }
-      }
-      if (!shikiRef2?.value) {
-        if (highlightedState2) {
-          highlightedState2.value = currentState;
-        }
-        return;
-      }
-      if (highlightedState2) {
-        highlightedState2.value = shikiRef2.value.codeToHtml(currentState, {
-          lang: "json",
-          theme: "nord"
-        });
-      }
-    } catch {
-      if (highlightedState2) {
-        highlightedState2.value = currentState;
-      }
-    }
-  }, "StateParser_component_useVisibleTask_OxLba1ofkKs", [
-    highlightedState,
-    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 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, inputState2) => inputState2.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 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, "O4_2");
+	const inputState = useSignal("");
+	const parsingTime = useSignal(null);
+	const stateResult = useSignal("");
+	const highlightedState = useSignal("");
+	const onParseState$ = /*#__PURE__*/ inlinedQrl(() => {
+		const inputState = _captures[0], parsingTime = _captures[1], stateResult = _captures[2];
+		if (!inputState.value.trim()) {
+			parsingTime.value = null;
+			stateResult.value = "// Paste state on the left to parse";
+			return;
+		}
+		const startTime = performance.now();
+		try {
+			const stateData = JSON.parse(inputState.value);
+			_preprocessState(stateData, {
+				$getObjectById$: (id) => id,
+				element: null,
+				getSyncFn: () => () => {},
+				$storeProxyMap$: /* @__PURE__ */ new WeakMap(),
+				$forwardRefs$: null,
+				$initialQRLsIndexes$: null,
+				$scheduler$: null
+			});
+			const dumpedState = _dumpState(stateData, false, "", null).replace(/\n/, "");
+			parsingTime.value = performance.now() - startTime;
+			stateResult.value = dumpedState;
+			return;
+		} catch (error) {
+			try {
+				const cleanInput = inputState.value.replace(/<script[^>]*>/gi, "").replace(/<\/script>/gi, "").trim();
+				if (cleanInput) {
+					const stateData = JSON.parse(cleanInput);
+					_preprocessState(stateData, {
+						$getObjectById$: (id) => id,
+						element: null,
+						getSyncFn: () => () => {},
+						$storeProxyMap$: /* @__PURE__ */ new WeakMap(),
+						$forwardRefs$: null,
+						$initialQRLsIndexes$: null,
+						$scheduler$: null
+					});
+					const dumpedState = _dumpState(stateData, false, "", null);
+					parsingTime.value = performance.now() - startTime;
+					stateResult.value = dumpedState;
+					return;
+				}
+			} catch {
+				parsingTime.value = performance.now() - startTime;
+				stateResult.value = `// Error parsing state: ${error instanceof Error ? error.message : "Invalid state format"}\n\n// Raw input:\n${inputState.value}`;
+				return;
+			}
+		}
+		parsingTime.value = performance.now() - startTime;
+		stateResult.value = "// Unable to parse the provided state";
+	}, "StateParser_component_onParseState_yEHmlh0J6WE", [
+		inputState,
+		parsingTime,
+		stateResult
+	]);
+	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 ?? "";
+		if (!currentState) {
+			if (highlightedState) highlightedState.value = "";
+			return;
+		}
+		try {
+			if (!shikiRef?.value) {
+				if (shikiRef) shikiRef.value = await getHighlighter();
+			}
+			if (!shikiRef?.value) {
+				if (highlightedState) highlightedState.value = currentState;
+				return;
+			}
+			if (highlightedState) highlightedState.value = shikiRef.value.codeToHtml(currentState, {
+				lang: "json",
+				theme: "nord"
+			});
+		} catch {
+			if (highlightedState) highlightedState.value = currentState;
+		}
+	}, "StateParser_component_useVisibleTask_OxLba1ofkKs", [
+		highlightedState,
+		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 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, "97_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", null, {
+		value: _wrapProp(inputState),
+		"q-e:input": /*#__PURE__*/ inlinedQrl((e, t) => {
+			const inputState = _captures[0];
+			return inputState.value = t.value;
+		}, "StateParser_component_div_div_div_textarea_q_e_input_kcp2t0mamTI", [inputState]),
+		placeholder: "Paste Qwik state and click to parse/format.",
+		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, 3, null), 3, 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, "97_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], _hf0_str)
+	}, null, 3, null), 3, null)], 1, null)], 1, "97_2");
 }, "StateParser_component_WYGTcR6czK0"));
-export {
-  StateParser
-};
+export { StateParser };