@qwik.dev/devtools 0.1.0 → 0.1.2

package/dist/ui/devtools.qwik.mjs

@@ -1,8 +1,9 @@
-import { jsxs, jsx } from "@qwik.dev/core/jsx-runtime";
-import { component$, useStyles$, useStore, useVisibleTask$, noSerialize } from "@qwik.dev/core";
-import { tryCreateHotContext } from "./node_modules/.pnpm/vite-hot-client@0.2.4_vite@5.4.10_@types_node@20.14.11_/node_modules/vite-hot-client/dist/index.qwik.mjs";
-import { HiBoltOutline, HiCubeOutline, HiPhotoOutline } from "./node_modules/.pnpm/@qwikest_icons@0.0.13_@builder.io_qwik@1.11.0_vite@5.4.10_@types_node@20.14.11__/node_modules/@qwikest/icons/lib/hi.qwik.qwik.mjs";
-import { LuFolderTree } from "./node_modules/.pnpm/@qwikest_icons@0.0.13_@builder.io_qwik@1.11.0_vite@5.4.10_@types_node@20.14.11__/node_modules/@qwikest/icons/lib/lu.qwik.qwik.mjs";
+import { jsxs, Fragment, jsx } from "@qwik.dev/core/jsx-runtime";
+import { component$, useStyles$, useStore, useSignal, useVisibleTask$, noSerialize } from "@qwik.dev/core";
+import { tryCreateHotContext } from "./node_modules/.pnpm/vite-hot-client@2.0.4_vite@7.1.3_@types_node@20.14.11_jiti@2.4.2_tsx@4.19.2_yaml@2.7.0_/node_modules/vite-hot-client/dist/index.qwik.mjs";
+import { HiBoltOutline, HiCubeOutline, HiPhotoOutline, HiCodeBracketMini, HiMegaphoneMini } from "./node_modules/.pnpm/@qwikest_icons@0.0.13_@builder.io_qwik@1.11.0_vite@7.1.3_@types_node@20.14.11_jiti@2.4.2_tsx@4.19.2_yaml@2.7.0__/node_modules/@qwikest/icons/lib/hi.qwik.qwik.mjs";
+import { BsDiagram3 } from "./node_modules/.pnpm/@qwikest_icons@0.0.13_@builder.io_qwik@1.11.0_vite@7.1.3_@types_node@20.14.11_jiti@2.4.2_tsx@4.19.2_yaml@2.7.0__/node_modules/@qwikest/icons/lib/bs.qwik.qwik.mjs";
+import { LuFolderTree } from "./node_modules/.pnpm/@qwikest_icons@0.0.13_@builder.io_qwik@1.11.0_vite@7.1.3_@types_node@20.14.11_jiti@2.4.2_tsx@4.19.2_yaml@2.7.0__/node_modules/@qwikest/icons/lib/lu.qwik.qwik.mjs";
 import { createClientRpc } from "./packages/kit/src/client.qwik.mjs";
 import "./node_modules/.pnpm/superjson@2.2.2/node_modules/superjson/dist/index.qwik.mjs";
 import { setViteClientContext, getViteClientRpc } from "./packages/kit/src/context.qwik.mjs";
@@ -14,10 +15,15 @@ import { Overview } from "./features/Overview/Overview.qwik.mjs";
 import { Assets } from "./features/Assets/Assets.qwik.mjs";
 import { Routes } from "./features/Routes/Routes.qwik.mjs";
 import { TabTitle } from "./components/TabTitle/TabTitle.qwik.mjs";
+import { RenderTree } from "./features/RenderTree/RenderTree.qwik.mjs";
 import { DevtoolsButton } from "./components/DevtoolsButton/DevtoolsButton.qwik.mjs";
 import { DevtoolsContainer } from "./components/DevtoolsContainer/DevtoolsContainer.qwik.mjs";
 import { DevtoolsPanel } from "./components/DevtoolsPanel/DevtoolsPanel.qwik.mjs";
 import { Packages } from "./features/Packages/Packages.qwik.mjs";
+import { Components } from "./features/Components/Components.qwik.mjs";
+import { Inspect } from "./features/inspect/Inspect.qwik.mjs";
+import { ThemeToggle } from "./components/ThemeToggle/ThemeToggle.qwik.mjs";
+import { ThemeScript } from "./components/ThemeToggle/theme-script.qwik.mjs";
 function getClientRpcFunctions() {
   return {
     healthCheck: () => true
@@ -26,10 +32,11 @@ function getClientRpcFunctions() {
 const QwikDevtools = component$(() => {
   useStyles$(globalCss);
   const state = useStore({
-    isOpen: false,
+    isOpen: useSignal(false),
     activeTab: "overview",
     npmPackages: [],
     assets: [],
+    components: [],
     routes: void 0
   });
   useVisibleTask$(async ({ track }) => {
@@ -42,13 +49,16 @@ const QwikDevtools = component$(() => {
     setViteClientContext(hot);
     createClientRpc(getClientRpcFunctions());
     track(() => {
-      if (state.isOpen) {
+      if (state.isOpen.value) {
         const rpc = getViteClientRpc();
         rpc.getAssetsFromPublicDir().then((data) => {
           state.assets = data;
         });
+        rpc.getComponents().then((data) => {
+          state.components = data;
+        });
         rpc.getRoutes().then((data) => {
-          const children = data.children || [];
+          const children = data?.children || [];
           const directories = children.filter((child) => child.type === "directory");
           const values = [
             {
@@ -69,131 +79,191 @@ const QwikDevtools = component$(() => {
       }
     });
   });
-  return /* @__PURE__ */ jsxs(DevtoolsContainer, {
+  return /* @__PURE__ */ jsxs(Fragment, {
     children: [
-      /* @__PURE__ */ jsx(DevtoolsButton, {
-        state
-      }),
-      state.isOpen && /* @__PURE__ */ jsxs(DevtoolsPanel, {
-        state,
+      /* @__PURE__ */ jsx(ThemeScript, {}),
+      /* @__PURE__ */ jsxs(DevtoolsContainer, {
         children: [
-          /* @__PURE__ */ jsxs("div", {
-            class: "flex flex-col gap-2 border-r border-zinc-700 bg-zinc-900/95 p-3",
-            children: [
-              /* @__PURE__ */ jsx(Tab, {
-                state,
-                id: "overview",
-                title: "Overview",
-                children: /* @__PURE__ */ jsx(HiBoltOutline, {
-                  class: "h-5 w-5"
-                })
-              }),
-              /* @__PURE__ */ jsx(Tab, {
-                state,
-                id: "packages",
-                title: "Packages",
-                children: /* @__PURE__ */ jsx(HiCubeOutline, {
-                  class: "h-5 w-5"
-                })
-              }),
-              /* @__PURE__ */ jsx(Tab, {
-                state,
-                id: "routes",
-                title: "Routes",
-                children: /* @__PURE__ */ jsx(LuFolderTree, {
-                  class: "h-5 w-5"
-                })
-              }),
-              /* @__PURE__ */ jsx(Tab, {
-                state,
-                id: "assets",
-                title: "Assets",
-                children: /* @__PURE__ */ jsx(HiPhotoOutline, {
-                  class: "h-5 w-5"
-                })
-              })
-            ]
+          /* @__PURE__ */ jsx(DevtoolsButton, {
+            state
           }),
-          /* @__PURE__ */ jsxs("div", {
-            class: "custom-scrollbar flex-1 overflow-y-auto p-4",
+          state.isOpen.value && /* @__PURE__ */ jsxs(DevtoolsPanel, {
+            state,
             children: [
-              state.activeTab === "overview" && /* @__PURE__ */ jsxs(TabContent, {
+              /* @__PURE__ */ jsxs("div", {
+                class: "bg-background/95 flex flex-col gap-2 border-r border-border p-3",
                 children: [
-                  /* @__PURE__ */ jsxs("div", {
-                    class: "flex items-center gap-3",
-                    "q:slot": "title",
-                    children: [
-                      /* @__PURE__ */ jsx("img", {
-                        width: 32,
-                        height: 32,
-                        src: "https://qwik.dev/logos/qwik-logo.svg",
-                        alt: "Qwik Logo",
-                        class: "h-8 w-8"
-                      }),
-                      /* @__PURE__ */ jsx("h1", {
-                        class: "text-2xl font-semibold",
-                        children: "Qwik DevTools"
-                      })
-                    ]
+                  /* @__PURE__ */ jsx(Tab, {
+                    state,
+                    id: "overview",
+                    title: "Overview",
+                    children: /* @__PURE__ */ jsx(HiBoltOutline, {
+                      class: "h-5 w-5"
+                    })
                   }),
-                  /* @__PURE__ */ jsx(Overview, {
+                  /* @__PURE__ */ jsx(Tab, {
                     state,
-                    "q:slot": "content"
+                    id: "packages",
+                    title: "Packages",
+                    children: /* @__PURE__ */ jsx(HiCubeOutline, {
+                      class: "h-5 w-5"
+                    })
+                  }),
+                  /* @__PURE__ */ jsx(Tab, {
+                    state,
+                    id: "renderTree",
+                    title: "renderTree",
+                    children: /* @__PURE__ */ jsx(BsDiagram3, {
+                      class: "h-5 w-5"
+                    })
+                  }),
+                  /* @__PURE__ */ jsx(Tab, {
+                    state,
+                    id: "routes",
+                    title: "Routes",
+                    children: /* @__PURE__ */ jsx(LuFolderTree, {
+                      class: "h-5 w-5"
+                    })
+                  }),
+                  /* @__PURE__ */ jsx(Tab, {
+                    state,
+                    id: "assets",
+                    title: "Assets",
+                    children: /* @__PURE__ */ jsx(HiPhotoOutline, {
+                      class: "h-5 w-5"
+                    })
+                  }),
+                  /* @__PURE__ */ jsx(Tab, {
+                    state,
+                    id: "components",
+                    title: "Components Tree",
+                    children: /* @__PURE__ */ jsx(HiCodeBracketMini, {
+                      class: "h-5 w-5"
+                    })
+                  }),
+                  /* @__PURE__ */ jsx(Tab, {
+                    state,
+                    id: "inspect",
+                    title: "inspect",
+                    children: /* @__PURE__ */ jsx(HiMegaphoneMini, {
+                      class: "h-5 w-5"
+                    })
+                  }),
+                  /* @__PURE__ */ jsx("div", {
+                    class: "mt-auto",
+                    children: /* @__PURE__ */ jsx(ThemeToggle, {})
                   })
                 ]
               }),
-              state.activeTab === "assets" && /* @__PURE__ */ jsxs(TabContent, {
+              /* @__PURE__ */ jsxs("div", {
+                class: "custom-scrollbar flex-1 overflow-y-auto p-4",
                 children: [
-                  /* @__PURE__ */ jsx(TabTitle, {
-                    title: "Public Assets",
-                    "q:slot": "title"
-                  }),
-                  /* @__PURE__ */ jsxs("div", {
-                    class: "flex gap-4 text-sm text-zinc-400",
+                  state.activeTab === "overview" && /* @__PURE__ */ jsxs(TabContent, {
                     children: [
-                      /* @__PURE__ */ jsxs("span", {
+                      /* @__PURE__ */ jsxs("div", {
+                        class: "flex items-center gap-3",
+                        "q:slot": "title",
                         children: [
-                          "Total Size:",
-                          " ",
-                          (state.assets?.reduce((acc, asset) => acc + asset.size, 0) / 1024).toFixed(2),
-                          " ",
-                          "KB"
+                          /* @__PURE__ */ jsx("img", {
+                            width: 32,
+                            height: 32,
+                            src: "https://qwik.dev/logos/qwik-logo.svg",
+                            alt: "Qwik Logo",
+                            class: "h-8 w-8"
+                          }),
+                          /* @__PURE__ */ jsx("h1", {
+                            class: "text-2xl font-semibold",
+                            children: "Qwik DevTools"
+                          })
                         ]
                       }),
-                      /* @__PURE__ */ jsxs("span", {
+                      /* @__PURE__ */ jsx(Overview, {
+                        state,
+                        "q:slot": "content"
+                      })
+                    ]
+                  }),
+                  state.activeTab === "assets" && /* @__PURE__ */ jsxs(TabContent, {
+                    children: [
+                      /* @__PURE__ */ jsx(TabTitle, {
+                        title: "Public Assets",
+                        "q:slot": "title"
+                      }),
+                      /* @__PURE__ */ jsxs("div", {
+                        class: "flex gap-4 text-sm text-muted-foreground",
                         children: [
-                          "Count: ",
-                          state.assets?.length || 0
+                          /* @__PURE__ */ jsxs("span", {
+                            children: [
+                              "Total Size:",
+                              " ",
+                              (state.assets?.reduce((acc, asset) => acc + asset.size, 0) / 1024).toFixed(2),
+                              " ",
+                              "KB"
+                            ]
+                          }),
+                          /* @__PURE__ */ jsxs("span", {
+                            children: [
+                              "Count: ",
+                              state.assets?.length || 0
+                            ]
+                          })
                         ]
+                      }),
+                      /* @__PURE__ */ jsx(Assets, {
+                        state,
+                        "q:slot": "content"
                       })
                     ]
                   }),
-                  /* @__PURE__ */ jsx(Assets, {
-                    state,
-                    "q:slot": "content"
-                  })
-                ]
-              }),
-              state.activeTab === "packages" && /* @__PURE__ */ jsxs(TabContent, {
-                children: [
-                  /* @__PURE__ */ jsx(TabTitle, {
-                    title: "Install an npm package",
-                    "q:slot": "title"
+                  state.activeTab === "packages" && /* @__PURE__ */ jsxs(TabContent, {
+                    children: [
+                      /* @__PURE__ */ jsx(TabTitle, {
+                        title: "Install an npm package",
+                        "q:slot": "title"
+                      }),
+                      /* @__PURE__ */ jsx(Packages, {
+                        "q:slot": "content"
+                      })
+                    ]
                   }),
-                  /* @__PURE__ */ jsx(Packages, {
-                    "q:slot": "content"
-                  })
-                ]
-              }),
-              state.activeTab === "routes" && /* @__PURE__ */ jsxs(TabContent, {
-                children: [
-                  /* @__PURE__ */ jsx(TabTitle, {
-                    title: "Application Routes",
-                    "q:slot": "title"
+                  state.activeTab === "routes" && /* @__PURE__ */ jsxs(TabContent, {
+                    children: [
+                      /* @__PURE__ */ jsx(TabTitle, {
+                        title: "Application Routes",
+                        "q:slot": "title"
+                      }),
+                      /* @__PURE__ */ jsx(Routes, {
+                        state,
+                        "q:slot": "content"
+                      })
+                    ]
                   }),
-                  /* @__PURE__ */ jsx(Routes, {
-                    state,
-                    "q:slot": "content"
+                  state.activeTab === "components" && /* @__PURE__ */ jsxs(TabContent, {
+                    children: [
+                      /* @__PURE__ */ jsx(TabTitle, {
+                        title: "Components Tree",
+                        "q:slot": "title"
+                      }),
+                      /* @__PURE__ */ jsx(Components, {
+                        "q:slot": "content"
+                      })
+                    ]
+                  }),
+                  state.activeTab === "inspect" && /* @__PURE__ */ jsx(TabContent, {
+                    children: /* @__PURE__ */ jsx(Inspect, {
+                      "q:slot": "content"
+                    })
+                  }),
+                  state.activeTab === "renderTree" && /* @__PURE__ */ jsxs(TabContent, {
+                    children: [
+                      /* @__PURE__ */ jsx(TabTitle, {
+                        title: "render Tree",
+                        "q:slot": "title"
+                      }),
+                      /* @__PURE__ */ jsx(RenderTree, {
+                        "q:slot": "content"
+                      })
+                    ]
                   })
                 ]
               })

package/dist/ui/features/Assets/Assets.qwik.cjs

@@ -9,7 +9,7 @@ const Assets = core.component$(({ state }) => {
       const isImage = asset.path.match(/\.(jpg|jpeg|png|gif|svg|webp)$/i);
       const fileExt = asset.path.split(".").pop()?.toUpperCase();
       return /* @__PURE__ */ jsxRuntime.jsxs("div", {
-        class: "overflow-hidden rounded-xl border border-white/10 bg-white/[0.03] transition-all duration-200 hover:bg-white/[0.05]",
+        class: "overflow-hidden rounded-xl border border-border bg-card-item-bg transition-all duration-200 hover:bg-card-item-hover-bg",
         children: [
           isImage ? /* @__PURE__ */ jsxRuntime.jsx("div", {
             class: "aspect-square overflow-hidden bg-black/20",
@@ -23,7 +23,7 @@ const Assets = core.component$(({ state }) => {
           }) : /* @__PURE__ */ jsxRuntime.jsx("div", {
             class: "flex aspect-square items-center justify-center bg-black/20",
             children: /* @__PURE__ */ jsxRuntime.jsx("span", {
-              class: "font-mono text-2xl text-zinc-400",
+              class: "font-mono text-2xl text-muted-foreground",
               children: fileExt
             })
           }),
@@ -36,7 +36,7 @@ const Assets = core.component$(({ state }) => {
                 children: asset.path.split("/").pop()
               }),
               /* @__PURE__ */ jsxRuntime.jsxs("div", {
-                class: "flex items-center justify-between text-xs text-zinc-400",
+                class: "flex items-center justify-between text-xs text-muted-foreground",
                 children: [
                   /* @__PURE__ */ jsxRuntime.jsxs("span", {
                     children: [
@@ -45,7 +45,7 @@ const Assets = core.component$(({ state }) => {
                     ]
                   }),
                   /* @__PURE__ */ jsxRuntime.jsx("span", {
-                    class: "rounded-full bg-white/5 px-2 py-1",
+                    class: "bg-foreground/5 rounded-full px-2 py-1",
                     children: fileExt
                   })
                 ]

package/dist/ui/features/Assets/Assets.qwik.mjs

@@ -7,7 +7,7 @@ const Assets = component$(({ state }) => {
       const isImage = asset.path.match(/\.(jpg|jpeg|png|gif|svg|webp)$/i);
       const fileExt = asset.path.split(".").pop()?.toUpperCase();
       return /* @__PURE__ */ jsxs("div", {
-        class: "overflow-hidden rounded-xl border border-white/10 bg-white/[0.03] transition-all duration-200 hover:bg-white/[0.05]",
+        class: "overflow-hidden rounded-xl border border-border bg-card-item-bg transition-all duration-200 hover:bg-card-item-hover-bg",
         children: [
           isImage ? /* @__PURE__ */ jsx("div", {
             class: "aspect-square overflow-hidden bg-black/20",
@@ -21,7 +21,7 @@ const Assets = component$(({ state }) => {
           }) : /* @__PURE__ */ jsx("div", {
             class: "flex aspect-square items-center justify-center bg-black/20",
             children: /* @__PURE__ */ jsx("span", {
-              class: "font-mono text-2xl text-zinc-400",
+              class: "font-mono text-2xl text-muted-foreground",
               children: fileExt
             })
           }),
@@ -34,7 +34,7 @@ const Assets = component$(({ state }) => {
                 children: asset.path.split("/").pop()
               }),
               /* @__PURE__ */ jsxs("div", {
-                class: "flex items-center justify-between text-xs text-zinc-400",
+                class: "flex items-center justify-between text-xs text-muted-foreground",
                 children: [
                   /* @__PURE__ */ jsxs("span", {
                     children: [
@@ -43,7 +43,7 @@ const Assets = component$(({ state }) => {
                     ]
                   }),
                   /* @__PURE__ */ jsx("span", {
-                    class: "rounded-full bg-white/5 px-2 py-1",
+                    class: "bg-foreground/5 rounded-full px-2 py-1",
                     children: fileExt
                   })
                 ]

package/dist/ui/features/Components/Components.qwik.cjs

@@ -0,0 +1,108 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@qwik.dev/core/jsx-runtime");
+const core = require("@qwik.dev/core");
+const Tree = require("./components/Tree.qwik.cjs");
+const styleModern = require("../../node_modules/.pnpm/react-complex-tree@2.4.6_react@18.2.0/node_modules/react-complex-tree/lib/style-modern.css.qwik.cjs");
+const styles = require("./styles.css.qwik.cjs");
+const Components = core.component$(() => {
+  core.useStyles$(styleModern);
+  core.useStyles$(styles);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", {
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Tree.QGreetings, {}),
+      /* @__PURE__ */ jsxRuntime.jsx(ComponentsStore, {})
+    ]
+  });
+});
+const ComponentsStore = core.component$(() => {
+  const selectedComponent = core.useSignal(null);
+  const components = window.__QWIK_DEVTOOLS__.appState;
+  const componentStore = Object.keys(components);
+  const handleComponentSelected = core.$((key) => {
+    selectedComponent.value = key;
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", {
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("select", {
+        class: "mt-2 w-1/2 rounded-md border border-border bg-transparent p-2 font-mono text-foreground",
+        onChange$: (_, e) => handleComponentSelected(e.value),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("option", {
+            value: "",
+            children: "Select component"
+          }),
+          componentStore.map((key) => /* @__PURE__ */ jsxRuntime.jsx("option", {
+            value: key,
+            class: "p-2",
+            children: key
+          }, key))
+        ]
+      }),
+      selectedComponent.value && /* @__PURE__ */ jsxRuntime.jsx(ComponentStoreUpdate, {
+        value: components[selectedComponent.value].state
+      })
+    ]
+  });
+});
+const ComponentStoreUpdate = core.component$(({ value }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", {
+    class: "mt-2 flex w-1/2 flex-col font-mono text-foreground",
+    children: Object.keys(value).map((key) => {
+      if (value[key].type === "signal") {
+        return /* @__PURE__ */ jsxRuntime.jsxs("div", {
+          class: "flex flex-col",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("h2", {
+              class: "text-lg font-bold",
+              children: [
+                "Signal: ",
+                key
+              ]
+            }),
+            /* @__PURE__ */ jsxRuntime.jsx("input", {
+              class: "mt-2 rounded-md border border-border bg-transparent p-2 font-mono text-foreground",
+              type: typeof value[key].value === "string" ? "text" : "number",
+              "bind:value": value[key].value
+            })
+          ]
+        }, key);
+      }
+      if (value[key].type === "store") {
+        return /* @__PURE__ */ jsxRuntime.jsxs("div", {
+          class: "flex flex-col",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("h2", {
+              class: "text-lg font-bold",
+              children: [
+                "Store: ",
+                key
+              ]
+            }),
+            Object.keys(value[key].value).map((storeKey) => /* @__PURE__ */ jsxRuntime.jsxs("div", {
+              class: "flex flex-col",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("h3", {
+                  class: "text-md font-bold",
+                  children: [
+                    "Key: ",
+                    storeKey
+                  ]
+                }),
+                /* @__PURE__ */ jsxRuntime.jsx("input", {
+                  class: "mt-2 rounded-md border border-border bg-transparent p-2 font-mono text-foreground",
+                  type: typeof value[key].value[storeKey] === "string" ? "text" : "number",
+                  value: value[key].value[storeKey],
+                  onChange$: (_, e) => {
+                    value[key].value[storeKey] = typeof value[key].value[storeKey] === "string" ? e.value : Number(e.value);
+                  }
+                })
+              ]
+            }, storeKey))
+          ]
+        }, key);
+      }
+    })
+  });
+});
+exports.Components = Components;

package/dist/ui/features/Components/Components.qwik.mjs

@@ -0,0 +1,108 @@
+import { jsxs, jsx } from "@qwik.dev/core/jsx-runtime";
+import { component$, useStyles$, useSignal, $ } from "@qwik.dev/core";
+import { QGreetings } from "./components/Tree.qwik.mjs";
+import reactTreeCss from "../../node_modules/.pnpm/react-complex-tree@2.4.6_react@18.2.0/node_modules/react-complex-tree/lib/style-modern.css.qwik.mjs";
+import styles from "./styles.css.qwik.mjs";
+const Components = component$(() => {
+  useStyles$(reactTreeCss);
+  useStyles$(styles);
+  return /* @__PURE__ */ jsxs("div", {
+    children: [
+      /* @__PURE__ */ jsx(QGreetings, {}),
+      /* @__PURE__ */ jsx(ComponentsStore, {})
+    ]
+  });
+});
+const ComponentsStore = component$(() => {
+  const selectedComponent = useSignal(null);
+  const components = window.__QWIK_DEVTOOLS__.appState;
+  const componentStore = Object.keys(components);
+  const handleComponentSelected = $((key) => {
+    selectedComponent.value = key;
+  });
+  return /* @__PURE__ */ jsxs("div", {
+    children: [
+      /* @__PURE__ */ jsxs("select", {
+        class: "mt-2 w-1/2 rounded-md border border-border bg-transparent p-2 font-mono text-foreground",
+        onChange$: (_, e) => handleComponentSelected(e.value),
+        children: [
+          /* @__PURE__ */ jsx("option", {
+            value: "",
+            children: "Select component"
+          }),
+          componentStore.map((key) => /* @__PURE__ */ jsx("option", {
+            value: key,
+            class: "p-2",
+            children: key
+          }, key))
+        ]
+      }),
+      selectedComponent.value && /* @__PURE__ */ jsx(ComponentStoreUpdate, {
+        value: components[selectedComponent.value].state
+      })
+    ]
+  });
+});
+const ComponentStoreUpdate = component$(({ value }) => {
+  return /* @__PURE__ */ jsx("div", {
+    class: "mt-2 flex w-1/2 flex-col font-mono text-foreground",
+    children: Object.keys(value).map((key) => {
+      if (value[key].type === "signal") {
+        return /* @__PURE__ */ jsxs("div", {
+          class: "flex flex-col",
+          children: [
+            /* @__PURE__ */ jsxs("h2", {
+              class: "text-lg font-bold",
+              children: [
+                "Signal: ",
+                key
+              ]
+            }),
+            /* @__PURE__ */ jsx("input", {
+              class: "mt-2 rounded-md border border-border bg-transparent p-2 font-mono text-foreground",
+              type: typeof value[key].value === "string" ? "text" : "number",
+              "bind:value": value[key].value
+            })
+          ]
+        }, key);
+      }
+      if (value[key].type === "store") {
+        return /* @__PURE__ */ jsxs("div", {
+          class: "flex flex-col",
+          children: [
+            /* @__PURE__ */ jsxs("h2", {
+              class: "text-lg font-bold",
+              children: [
+                "Store: ",
+                key
+              ]
+            }),
+            Object.keys(value[key].value).map((storeKey) => /* @__PURE__ */ jsxs("div", {
+              class: "flex flex-col",
+              children: [
+                /* @__PURE__ */ jsxs("h3", {
+                  class: "text-md font-bold",
+                  children: [
+                    "Key: ",
+                    storeKey
+                  ]
+                }),
+                /* @__PURE__ */ jsx("input", {
+                  class: "mt-2 rounded-md border border-border bg-transparent p-2 font-mono text-foreground",
+                  type: typeof value[key].value[storeKey] === "string" ? "text" : "number",
+                  value: value[key].value[storeKey],
+                  onChange$: (_, e) => {
+                    value[key].value[storeKey] = typeof value[key].value[storeKey] === "string" ? e.value : Number(e.value);
+                  }
+                })
+              ]
+            }, storeKey))
+          ]
+        }, key);
+      }
+    })
+  });
+});
+export {
+  Components
+};