@qwik.dev/devtools 0.2.7 → 0.3.0-beta.3

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

@@ -0,0 +1,185 @@
+import { componentQrl, inlinedQrl, useSignal, useVisibleTaskQrl, _captures, _jsxSorted, _wrapProp, _fnSignal, isBrowser } from "@qwik.dev/core";
+import { Fragment } from "@qwik.dev/core/jsx-runtime";
+import { getDevtoolsRpc } from "../../devtools/rpc.qwik.mjs";
+const _hf0 = (p0) => p0.value ? "Rebuilding..." : "Rebuild Report";
+const _hf1 = (p0) => p0.value ? "Building..." : "Build Report";
+const BUILD_ANALYSIS_VIEW_PATH = "/__qwik_devtools/build-analysis/report";
+function getBuildAnalysisIframeSrc(version, origin) {
+  const baseOrigin = isBrowser ? location.origin : "";
+  if (!baseOrigin) {
+    return "";
+  }
+  const url = new URL(BUILD_ANALYSIS_VIEW_PATH, baseOrigin);
+  url.searchParams.set("v", String(version));
+  return url.href;
+}
+const 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 buildCommand2 = _captures[0], buildTriggerHint2 = _captures[1], canTriggerBuild2 = _captures[2], errorMessage2 = _captures[3], hasReport2 = _captures[4], isChecking2 = _captures[5], reportPath2 = _captures[6];
+    isChecking2.value = true;
+    errorMessage2.value = "";
+    try {
+      const rpc = await getDevtoolsRpc();
+      const status = await rpc.getBuildAnalysisStatus();
+      hasReport2.value = status.exists;
+      canTriggerBuild2.value = status.canTriggerBuild;
+      reportPath2.value = status.reportPath;
+      buildCommand2.value = status.buildCommand;
+      buildTriggerHint2.value = status.buildTriggerHint || "";
+    } catch (error) {
+      errorMessage2.value = error instanceof Error ? error.message : "Failed to load build analysis status.";
+    } finally {
+      isChecking2.value = false;
+    }
+  }, "BuildAnalysis_component_loadStatus_QWxBjbeSM7U", [
+    buildCommand,
+    buildTriggerHint,
+    canTriggerBuild,
+    errorMessage,
+    hasReport,
+    isChecking,
+    reportPath
+  ]);
+  const refreshFrame = /* @__PURE__ */ inlinedQrl(() => {
+    const iframeVersion2 = _captures[0];
+    iframeVersion2.value += 1;
+  }, "BuildAnalysis_component_refreshFrame_KBOtgw7vjAM", [
+    iframeVersion
+  ]);
+  const buildReport = /* @__PURE__ */ inlinedQrl(async () => {
+    const buildCommand2 = _captures[0], buildTriggerHint2 = _captures[1], canTriggerBuild2 = _captures[2], errorMessage2 = _captures[3], iframeVersion2 = _captures[4], isBuilding2 = _captures[5], loadStatus2 = _captures[6];
+    if (!buildCommand2.value) {
+      errorMessage2.value = 'No build script found. Expected "build.client" or "build" in package.json.';
+      return;
+    }
+    if (!canTriggerBuild2.value) {
+      errorMessage2.value = buildTriggerHint2.value || "Automatic rebuild is unavailable from this DevTools client.";
+      return;
+    }
+    const confirmed = globalThis.confirm?.(`Build analysis needs a fresh build to generate the report.
+
+Run: ${buildCommand2.value} ?`) ?? true;
+    if (!confirmed) {
+      return;
+    }
+    isBuilding2.value = true;
+    errorMessage2.value = "";
+    try {
+      const rpc = await getDevtoolsRpc();
+      const result = await rpc.buildBuildAnalysisReport();
+      if (!result.success) {
+        errorMessage2.value = result.error || "Build failed.";
+        return;
+      }
+      await loadStatus2();
+      iframeVersion2.value += 1;
+    } catch (error) {
+      errorMessage2.value = error instanceof Error ? error.message : "Build failed.";
+    } finally {
+      isBuilding2.value = false;
+    }
+  }, "BuildAnalysis_component_buildReport_9o7VY9p0bIQ", [
+    buildCommand,
+    buildTriggerHint,
+    canTriggerBuild,
+    errorMessage,
+    iframeVersion,
+    isBuilding,
+    loadStatus
+  ]);
+  useVisibleTaskQrl(/* @__PURE__ */ inlinedQrl(async () => {
+    const loadStatus2 = _captures[0];
+    await loadStatus2();
+  }, "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,53 @@
+import { componentQrl, inlinedQrl, useStylesQrl, useSignal, _jsxSorted } from "@qwik.dev/core";
+import { StateParser } from "./StateParser.qwik.mjs";
+import { HtmlParser } from "./HtmlParser.qwik.mjs";
+const 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, currentTab2) => currentTab2.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, currentTab2) => currentTab2.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/packages/devtools/ui/src/features/CodeBreak/HtmlParser.qwik.mjs

@@ -0,0 +1,149 @@
+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(`
+    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");
+}, "HtmlParser_component_9YnEezFEUMA"));
+export {
+  HtmlParser
+};

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

@@ -0,0 +1,181 @@
+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(`
+    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");
+}, "StateParser_component_WYGTcR6czK0"));
+export {
+  StateParser
+};