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

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

@@ -0,0 +1,277 @@
+import { componentQrl, inlinedQrl, useStylesQrl, useComputedQrl, _captures, useSignal, useResourceQrl, useVisibleTaskQrl, _jsxSorted, _wrapProp, Resource } from "@qwik.dev/core";
+import { Tree } from "../../components/Tree/Tree.qwik.mjs";
+import debug from "../../../../../../_virtual/browser.qwik.mjs";
+import { getViteClientRpc } from "@qwik.dev/devtools/kit";
+import { getHighlighter } from "../../utils/shiki.qwik.mjs";
+import { HighlightedCodeList } from "./components/HighlightedCodeList.qwik.mjs";
+import { HookFiltersCard } from "./components/HookFiltersCard.qwik.mjs";
+import { RenderTreeTabs } from "./components/RenderTreeTabs.qwik.mjs";
+import { StateTreeNodeLabel } from "./components/StateTreeNodeLabel.qwik.mjs";
+import { getCodeLanguage } from "./utils/getCodeLanguage.qwik.mjs";
+import { getPageDataSource } from "../../devtools/page-data-source.qwik.mjs";
+import { treeIdFingerprint, toTreeNodes, buildDetailTree } from "../HookTree/hookTreeHelpers.qwik.mjs";
+const log = debug("qwik:devtools:renderTree");
+const LOAD_RETRY_DELAY_MS = 300;
+function applyHookFilters(tree, filters) {
+  if (filters.length === 0) {
+    return tree;
+  }
+  return tree.filter((node) => filters.some((filter) => filter.key === (node.label || node.name) && filter.display));
+}
+const RenderTree = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((_rawProps) => {
+  useStylesQrl(/* @__PURE__ */ inlinedQrl(`
+    pre.shiki {
+      overflow: auto;
+      padding: 10px;
+    }
+  `, "RenderTree_component_useStyles_AWhkWvC33YA"));
+  const revealNode = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
+    const _rawProps2 = _captures[0];
+    return _rawProps2.state.componentReveal;
+  }, "RenderTree_component_revealNode_useComputed_kosn0Rf4154", [
+    _rawProps
+  ]));
+  const codes = useSignal([]);
+  const data = useSignal([]);
+  const lastTreeIds = useSignal("");
+  const stateTree = useSignal([]);
+  const fullStateTree = useSignal([]);
+  const hookFilters = useSignal([]);
+  const hooksOpen = useSignal(true);
+  const highlightedCodesResource = useResourceQrl(/* @__PURE__ */ inlinedQrl(async (_rawProps2) => {
+    const codes2 = _captures[0];
+    _rawProps2.track(() => codes2.value);
+    if (!codes2.value.length) {
+      return [];
+    }
+    const highlighter = await getHighlighter();
+    return codes2.value.map((item) => {
+      return item?.modules?.code ? highlighter.codeToHtml(item.modules.code, {
+        lang: getCodeLanguage(item.pathId),
+        theme: "nord"
+      }) : "";
+    });
+  }, "RenderTree_component_highlightedCodesResource_useResource_hdA49UhUQ7M", [
+    codes
+  ]));
+  useVisibleTaskQrl(/* @__PURE__ */ inlinedQrl(({ cleanup }) => {
+    const data2 = _captures[0], lastTreeIds2 = _captures[1];
+    const source = getPageDataSource();
+    const syncTree = (tree) => {
+      if (!tree || tree.length === 0) {
+        return false;
+      }
+      const fp = treeIdFingerprint(tree);
+      if (fp !== lastTreeIds2.value) {
+        lastTreeIds2.value = fp;
+        data2.value = toTreeNodes(tree);
+      }
+      return true;
+    };
+    const loadInitial = async (retries = 3) => {
+      const tree = await source.readVNodeTree();
+      if (!syncTree(tree) && retries > 0) {
+        window.setTimeout(() => loadInitial(retries - 1), LOAD_RETRY_DELAY_MS);
+      }
+    };
+    loadInitial();
+    const unsub = source.subscribeTreeUpdates((tree) => {
+      syncTree(tree);
+    });
+    cleanup(() => {
+      unsub?.();
+    });
+  }, "RenderTree_component_useVisibleTask_zrAfIjp4mH4", [
+    data,
+    lastTreeIds
+  ]));
+  const onNodeClick = /* @__PURE__ */ inlinedQrl(async (node) => {
+    const codes2 = _captures[0], fullStateTree2 = _captures[1], hookFilters2 = _captures[2], stateTree2 = _captures[3];
+    log(" current node clicked: %O", node);
+    const source = getPageDataSource();
+    const name = node.name || node.label || "";
+    const props = node.props;
+    const qrlChunk = props?.__qrlChunk;
+    const qrlPath = props?.__qrlPath;
+    if (!name) {
+      codes2.value = [];
+      fullStateTree2.value = [];
+      stateTree2.value = [];
+      hookFilters2.value = [];
+      return;
+    }
+    const [detail, vnodeProps] = await Promise.all([
+      source.readComponentDetail(name, qrlChunk),
+      source.readNodeProps(node.id)
+    ]);
+    const entries = detail ? [
+      ...detail
+    ] : [];
+    if (vnodeProps && Object.keys(vnodeProps).length > 0) {
+      entries.push({
+        hookType: "props",
+        variableName: "props",
+        data: vnodeProps
+      });
+    }
+    const full = buildDetailTree(entries);
+    fullStateTree2.value = full;
+    hookFilters2.value = full.map((item) => ({
+      key: item.label || item.name || "",
+      display: true
+    }));
+    stateTree2.value = full;
+    codes2.value = [];
+    if (qrlPath) {
+      const rpc = getViteClientRpc();
+      const res = await rpc?.getModulesByPathIds([
+        qrlPath
+      ]) ?? [];
+      log("getModulesByPathIds return: %O", res);
+      codes2.value = res.filter((item) => item.modules);
+    }
+  }, "RenderTree_component_onNodeClick_iFUxWwAkzko", [
+    codes,
+    fullStateTree,
+    hookFilters,
+    stateTree
+  ]);
+  const currentTab = useSignal("state");
+  const showStateTab = /* @__PURE__ */ inlinedQrl(() => {
+    const currentTab2 = _captures[0];
+    currentTab2.value = "state";
+  }, "RenderTree_component_showStateTab_O4o7nNS0Yc4", [
+    currentTab
+  ]);
+  const showCodeTab = /* @__PURE__ */ inlinedQrl(() => {
+    const currentTab2 = _captures[0];
+    currentTab2.value = "code";
+  }, "RenderTree_component_showCodeTab_m6wrkPHXkYM", [
+    currentTab
+  ]);
+  const refreshFilteredStateTree = /* @__PURE__ */ inlinedQrl(() => {
+    const fullStateTree2 = _captures[0], hookFilters2 = _captures[1], stateTree2 = _captures[2];
+    stateTree2.value = applyHookFilters(fullStateTree2.value, hookFilters2.value);
+  }, "RenderTree_component_refreshFilteredStateTree_Ng6tq73zzek", [
+    fullStateTree,
+    hookFilters,
+    stateTree
+  ]);
+  const handleSelectAll = /* @__PURE__ */ inlinedQrl(() => {
+    const hookFilters2 = _captures[0], refreshFilteredStateTree2 = _captures[1];
+    hookFilters2.value = hookFilters2.value.map((item) => ({
+      ...item,
+      display: true
+    }));
+    refreshFilteredStateTree2();
+  }, "RenderTree_component_handleSelectAll_yl6MuzcFZk0", [
+    hookFilters,
+    refreshFilteredStateTree
+  ]);
+  const handleClear = /* @__PURE__ */ inlinedQrl(() => {
+    const hookFilters2 = _captures[0], refreshFilteredStateTree2 = _captures[1];
+    hookFilters2.value = hookFilters2.value.map((item) => ({
+      ...item,
+      display: false
+    }));
+    refreshFilteredStateTree2();
+  }, "RenderTree_component_handleClear_0fY9KH70S2A", [
+    hookFilters,
+    refreshFilteredStateTree
+  ]);
+  const handleFilterChange = /* @__PURE__ */ inlinedQrl((index, checked) => {
+    const hookFilters2 = _captures[0], refreshFilteredStateTree2 = _captures[1];
+    hookFilters2.value = hookFilters2.value.map((item, itemIndex) => itemIndex === index ? {
+      ...item,
+      display: checked
+    } : item);
+    refreshFilteredStateTree2();
+  }, "RenderTree_component_handleFilterChange_4t8lpGTaUG0", [
+    hookFilters,
+    refreshFilteredStateTree
+  ]);
+  return /* @__PURE__ */ _jsxSorted("div", null, {
+    class: "border-glass-border bg-card-item-bg h-full w-full flex-1 overflow-hidden rounded-2xl border"
+  }, /* @__PURE__ */ _jsxSorted("div", null, {
+    class: "flex h-full w-full"
+  }, [
+    /* @__PURE__ */ _jsxSorted("div", null, {
+      class: "custom-scrollbar w-1/2 overflow-hidden p-3",
+      style: {
+        minWidth: "360px"
+      }
+    }, /* @__PURE__ */ _jsxSorted(Tree, {
+      onRevealed$: /* @__PURE__ */ inlinedQrl(() => {
+        const _rawProps2 = _captures[0];
+        return _rawProps2.state.componentReveal = null;
+      }, "RenderTree_component_div_div_div_Tree_onRevealed_EevePL82QY4", [
+        _rawProps
+      ])
+    }, {
+      data,
+      onNodeClick,
+      revealNode
+    }, null, 2, "0a_0"), 1, null),
+    /* @__PURE__ */ _jsxSorted("div", null, {
+      class: "border-glass-border border-l"
+    }, null, 3, null),
+    /* @__PURE__ */ _jsxSorted("div", null, {
+      class: "flex h-full min-h-0 w-1/2 flex-col overflow-hidden p-4"
+    }, [
+      /* @__PURE__ */ _jsxSorted(RenderTreeTabs, null, {
+        currentTab: _wrapProp(currentTab),
+        onStateClick$: showStateTab,
+        onCodeClick$: showCodeTab
+      }, null, 3, "0a_1"),
+      currentTab.value === "state" && /* @__PURE__ */ _jsxSorted("div", null, {
+        class: "mt-5 flex min-h-0 flex-1 flex-col"
+      }, [
+        /* @__PURE__ */ _jsxSorted(HookFiltersCard, {
+          onToggleOpen$: /* @__PURE__ */ inlinedQrl(() => {
+            const hooksOpen2 = _captures[0];
+            return hooksOpen2.value = !hooksOpen2.value;
+          }, "RenderTree_component_div_div_div_div_HookFiltersCard_onToggleOpen_htBb6dFJgKk", [
+            hooksOpen
+          ])
+        }, {
+          filters: _wrapProp(hookFilters),
+          isOpen: _wrapProp(hooksOpen),
+          onSelectAll$: handleSelectAll,
+          onClear$: handleClear,
+          onFilterChange$: handleFilterChange
+        }, null, 2, "0a_2"),
+        /* @__PURE__ */ _jsxSorted("div", null, {
+          class: "mt-4 min-h-0 flex-1 overflow-y-auto p-2"
+        }, /* @__PURE__ */ _jsxSorted(Tree, {
+          renderNode: /* @__PURE__ */ inlinedQrl((node) => {
+            return /* @__PURE__ */ _jsxSorted(StateTreeNodeLabel, {
+              node
+            }, null, null, 3, "0a_3");
+          }, "RenderTree_component_div_div_div_div_div_Tree_renderNode_h2NF5iZQX8A")
+        }, {
+          data: stateTree,
+          gap: 10,
+          animate: true,
+          animationDuration: 200,
+          isHover: true
+        }, null, 3, "0a_4"), 1, null)
+      ], 1, "0a_5"),
+      currentTab.value === "code" && /* @__PURE__ */ _jsxSorted("div", null, {
+        class: "border-glass-border bg-card-item-bg mt-4 min-h-0 flex-1 overflow-y-auto rounded-xl border p-2"
+      }, /* @__PURE__ */ _jsxSorted(Resource, null, {
+        value: highlightedCodesResource,
+        onPending: () => /* @__PURE__ */ _jsxSorted("div", null, {
+          class: "text-muted-foreground p-2 text-sm"
+        }, "Loading code highlights…", 3, "0a_6"),
+        onResolved: (highlighted) => /* @__PURE__ */ _jsxSorted(HighlightedCodeList, {
+          highlighted
+        }, {
+          codes: _wrapProp(codes)
+        }, null, 3, "0a_7")
+      }, null, 3, "0a_8"), 1, "0a_9")
+    ], 1, null)
+  ], 1, null), 1, "0a_10");
+}, "RenderTree_component_Sf4kwEPC9Qg"));
+export {
+  RenderTree
+};

package/dist/ui/packages/devtools/ui/src/features/RenderTree/components/HighlightedCodeList.qwik.mjs

@@ -0,0 +1,23 @@
+import { componentQrl, inlinedQrl, _jsxSorted, _wrapProp, _fnSignal } from "@qwik.dev/core";
+import { Fragment } from "@qwik.dev/core/jsx-runtime";
+const _hf0 = (p0, p1) => p0.highlighted[p1] || "";
+const HighlightedCodeList = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((_rawProps) => {
+  return /* @__PURE__ */ _jsxSorted(Fragment, null, null, _rawProps.codes.map((item, index) => /* @__PURE__ */ _jsxSorted("div", null, {
+    class: "border-glass-border bg-card-item-bg hover:bg-card-item-hover-bg mb-4 rounded-xl border p-4 transition-colors"
+  }, [
+    /* @__PURE__ */ _jsxSorted("div", null, {
+      class: "text-primary mb-2 text-base font-semibold break-all"
+    }, _wrapProp(item, "pathId"), 1, null),
+    /* @__PURE__ */ _jsxSorted("pre", {
+      dangerouslySetInnerHTML: _fnSignal(_hf0, [
+        _rawProps,
+        index
+      ])
+    }, {
+      class: "overflow-hidden"
+    }, null, 3, null)
+  ], 1, item.pathId)), 1, "XI_0");
+}, "HighlightedCodeList_component_R9Fi7pmo1qQ"));
+export {
+  HighlightedCodeList
+};

package/dist/ui/packages/devtools/ui/src/features/RenderTree/components/HookFiltersCard.qwik.mjs

@@ -0,0 +1,80 @@
+import { componentQrl, inlinedQrl, _jsxSorted, _fnSignal, _wrapProp, _captures } from "@qwik.dev/core";
+import { IconChevronUpMini } from "../../../components/Icons/Icons.qwik.mjs";
+const _hf0 = (p0) => ({
+  maxHeight: p0.isOpen ? "800px" : "0px",
+  opacity: p0.isOpen ? "1" : "0",
+  transition: "max-height 200ms ease, opacity 200ms ease"
+});
+const HookFiltersCard = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((_rawProps) => {
+  return /* @__PURE__ */ _jsxSorted("div", null, {
+    class: "border-glass-border bg-card-item-bg rounded-xl border"
+  }, [
+    /* @__PURE__ */ _jsxSorted("div", null, {
+      class: "border-glass-border flex items-center justify-between border-b px-2 py-2"
+    }, [
+      /* @__PURE__ */ _jsxSorted("span", null, {
+        class: "text-muted-foreground text-xs font-medium"
+      }, "Hooks", 3, null),
+      /* @__PURE__ */ _jsxSorted("div", null, {
+        class: "flex items-center space-x-2"
+      }, [
+        /* @__PURE__ */ _jsxSorted("button", {
+          "q-e:click": _rawProps.onSelectAll$
+        }, {
+          class: "text-primary px-2 py-1 text-xs hover:underline"
+        }, "Select all", 2, null),
+        /* @__PURE__ */ _jsxSorted("button", {
+          "q-e:click": _rawProps.onClear$
+        }, {
+          class: "text-muted-foreground hover:text-foreground px-2 py-1 text-xs hover:underline"
+        }, "Clear", 2, null),
+        /* @__PURE__ */ _jsxSorted("button", {
+          "q-e:click": _rawProps.onToggleOpen$
+        }, {
+          "aria-label": "toggle hooks",
+          class: "text-muted-foreground hover:text-foreground rounded p-1"
+        }, /* @__PURE__ */ _jsxSorted(IconChevronUpMini, {
+          class: `h-4 w-4 transition-transform duration-200 ${_rawProps.isOpen ? "rotate-180" : "-rotate-90"}`
+        }, null, null, 3, "pG_0"), 0, null)
+      ], 1, null)
+    ], 1, null),
+    /* @__PURE__ */ _jsxSorted("div", {
+      style: _fnSignal(_hf0, [
+        _rawProps
+      ])
+    }, {
+      class: "grid grid-cols-2 gap-x-4 gap-y-3 overflow-hidden px-3 py-2 text-sm"
+    }, _rawProps.filters.map((item, index) => {
+      const qrl_0 = /* @__PURE__ */ inlinedQrl((event, _1, index2) => {
+        const _rawProps2 = _captures[0];
+        const target = event.target;
+        _rawProps2.onFilterChange$(index2, target.checked);
+      }, "HookFiltersCard_component_div_div_label_input_q_e_change_FeP7wk8oowk", [
+        _rawProps
+      ]).m();
+      return /* @__PURE__ */ _jsxSorted("label", null, {
+        class: "flex min-w-0 cursor-pointer items-center gap-2"
+      }, [
+        /* @__PURE__ */ _jsxSorted("input", {
+          checked: _wrapProp(item, "display"),
+          "q-e:change": qrl_0,
+          "q:p": index
+        }, {
+          type: "checkbox",
+          class: "h-4 w-4 shrink-0 cursor-pointer rounded focus:ring-0",
+          style: {
+            accentColor: "var(--color-primary-active)"
+          }
+        }, null, 6, null),
+        /* @__PURE__ */ _jsxSorted("span", {
+          title: _wrapProp(item, "key")
+        }, {
+          class: "ml-2 truncate select-none"
+        }, _wrapProp(item, "key"), 1, null)
+      ], 1, item.key);
+    }), 1, null)
+  ], 1, "pG_1");
+}, "HookFiltersCard_component_nIw23Ky2Txs"));
+export {
+  HookFiltersCard
+};

package/dist/ui/packages/devtools/ui/src/features/RenderTree/components/RenderTreeTabs.qwik.mjs

@@ -0,0 +1,25 @@
+import { componentQrl, inlinedQrl, _jsxSorted, _fnSignal } from "@qwik.dev/core";
+const _hf0 = (p0, p1) => p0.currentTab === p1 ? {
+  boxShadow: "inset 0 -2px 0 0 var(--color-primary)"
+} : {};
+const RenderTreeTabs = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((_rawProps) => {
+  return /* @__PURE__ */ _jsxSorted("div", null, {
+    class: "border-glass-border flex space-x-2 border-b pb-1"
+  }, [
+    "state",
+    "code"
+  ].map((tabId) => /* @__PURE__ */ _jsxSorted("button", {
+    class: [
+      "rounded-lg px-4 py-2.5 text-sm font-medium transition-all duration-200",
+      _rawProps.currentTab === tabId ? "text-primary bg-primary/10" : "text-muted-foreground hover:text-foreground hover:bg-foreground/5"
+    ],
+    "q-e:click": tabId === "state" ? _rawProps.onStateClick$ : _rawProps.onCodeClick$,
+    style: _fnSignal(_hf0, [
+      _rawProps,
+      tabId
+    ])
+  }, null, tabId === "state" ? "State" : "Code", 0, tabId)), 1, "Mj_0");
+}, "RenderTreeTabs_component_fyOtScBp88U"));
+export {
+  RenderTreeTabs
+};

package/dist/ui/packages/devtools/ui/src/features/RenderTree/components/StateTreeNodeLabel.qwik.mjs

@@ -0,0 +1,32 @@
+import { componentQrl, inlinedQrl, _jsxSorted } from "@qwik.dev/core";
+import { Fragment } from "@qwik.dev/core/jsx-runtime";
+import { getValueColorClass } from "../utils/getValueColorClass.qwik.mjs";
+const StateTreeNodeLabel = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((_rawProps) => {
+  const label = _rawProps.node.label || _rawProps.node.name || "";
+  const parts = label.split(":");
+  if (_rawProps.node.children && parts.length === 1) {
+    return /* @__PURE__ */ _jsxSorted("span", null, {
+      class: "font-semibold text-pink-400"
+    }, label, 1, "mY_0");
+  }
+  if (parts.length > 1) {
+    const key = parts[0];
+    const value = parts.slice(1).join(":").trim();
+    const valueClass = getValueColorClass(_rawProps.node, value);
+    return /* @__PURE__ */ _jsxSorted(Fragment, null, null, [
+      /* @__PURE__ */ _jsxSorted("span", null, {
+        class: "text-blue-400"
+      }, key, 1, null),
+      /* @__PURE__ */ _jsxSorted("span", null, {
+        class: "text-foreground/70"
+      }, " : ", 3, null),
+      /* @__PURE__ */ _jsxSorted("span", {
+        class: valueClass
+      }, null, value, 1, null)
+    ], 1, "mY_1");
+  }
+  return /* @__PURE__ */ _jsxSorted("span", null, null, label, 1, "mY_2");
+}, "StateTreeNodeLabel_component_ONzjgo7C9iQ"));
+export {
+  StateTreeNodeLabel
+};

package/dist/ui/packages/devtools/ui/src/features/RenderTree/utils/getCodeLanguage.qwik.mjs

@@ -0,0 +1,18 @@
+function getCodeLanguage(pathId) {
+  if (pathId.endsWith(".js")) {
+    return "js";
+  }
+  if (pathId.endsWith(".ts")) {
+    return "ts";
+  }
+  if (pathId.endsWith(".jsx")) {
+    return "jsx";
+  }
+  if (pathId.endsWith(".tsx")) {
+    return "tsx";
+  }
+  return "tsx";
+}
+export {
+  getCodeLanguage
+};

package/dist/ui/packages/devtools/ui/src/features/RenderTree/utils/getValueColorClass.qwik.mjs

@@ -0,0 +1,21 @@
+function getValueColorClass(node, valueText) {
+  switch (node.elementType) {
+    case "string":
+      return "text-red-400";
+    case "number":
+      return "text-green-400";
+    case "boolean":
+      return "text-amber-400";
+    case "function":
+      return "text-purple-400";
+    case "array":
+      return "text-muted-foreground";
+    case "object":
+      return /(Array\[|Object\s\{|Class\s\{)/.test(valueText) ? "text-muted-foreground" : "text-foreground";
+    default:
+      return "text-foreground";
+  }
+}
+export {
+  getValueColorClass
+};

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

@@ -0,0 +1,51 @@
+import { componentQrl, inlinedQrl, _jsxSorted, _fnSignal, _wrapProp } from "@qwik.dev/core";
+const _hf0 = (p0) => p0.relativePath === "" ? "/" : `/${p0.relativePath}/`;
+const _hf1 = (p0, p1, p2) => p1 && p0 > 0 ? `${p2.relativePath}/layout` : "default";
+const Routes = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((_rawProps) => {
+  return /* @__PURE__ */ _jsxSorted("div", null, {
+    class: "border-border flex-1 overflow-hidden rounded-xl border"
+  }, [
+    /* @__PURE__ */ _jsxSorted("div", null, {
+      class: "bg-card-item-bg grid grid-cols-4 gap-4 p-4 text-sm font-medium"
+    }, [
+      /* @__PURE__ */ _jsxSorted("div", null, null, "Route Path", 3, null),
+      /* @__PURE__ */ _jsxSorted("div", null, null, "Name", 3, null),
+      /* @__PURE__ */ _jsxSorted("div", null, null, "Middleware", 3, null),
+      /* @__PURE__ */ _jsxSorted("div", null, null, "Layout", 3, null)
+    ], 3, null),
+    _rawProps.state.routes?.map((route, i) => {
+      const children = route.children || [];
+      const layout = route.relativePath !== "" && route.type === "directory" && children.find((child) => child.name.startsWith("layout"));
+      return /* @__PURE__ */ _jsxSorted("div", null, {
+        class: "border-border hover:bg-card-item-hover-bg grid grid-cols-4 gap-4 border-t p-4 text-sm"
+      }, [
+        /* @__PURE__ */ _jsxSorted("div", null, null, /* @__PURE__ */ _jsxSorted("span", {
+          class: {
+            "text-accent": location.pathname === "/" && route.relativePath === "" || location.pathname === `/${route.relativePath}/`
+          }
+        }, null, _fnSignal(_hf0, [
+          route
+        ]), 1, null), 1, null),
+        /* @__PURE__ */ _jsxSorted("div", null, {
+          class: "text-muted-foreground"
+        }, _wrapProp(route, "name"), 1, null),
+        /* @__PURE__ */ _jsxSorted("div", null, {
+          class: "text-muted-foreground"
+        }, "-", 3, null),
+        /* @__PURE__ */ _jsxSorted("div", null, null, /* @__PURE__ */ _jsxSorted("span", {
+          class: {
+            "text-accent": layout && i > 0,
+            "text-muted-foreground": !layout || i === 0
+          }
+        }, null, _fnSignal(_hf1, [
+          i,
+          layout,
+          route
+        ]), 1, null), 1, null)
+      ], 1, route.relativePath);
+    })
+  ], 1, "Q2_0");
+}, "Routes_component_0J1MQ3ONHgI"));
+export {
+  Routes
+};