jazz-tools 0.20.0 → 0.20.2

package/dist/inspector/{custom-element-5YWVZBWA.js → custom-element-PWRX4VCA.js}

@@ -31782,13 +31782,14 @@ var require_jsx_runtime = __commonJS({
 });
 
 // src/inspector/custom-element.tsx
-var import_react32 = __toESM(require_react(), 1);
+var import_react36 = __toESM(require_react(), 1);
 var import_client = __toESM(require_client(), 1);
 import { setup } from "goober";
 import { Account } from "jazz-tools";
 
 // src/inspector/in-app.tsx
-import { styled as styled29 } from "goober";
+var import_react35 = __toESM(require_react(), 1);
+import { styled as styled33 } from "goober";
 
 // src/inspector/viewer/page-stack.tsx
 import { styled as styled24 } from "goober";
@@ -35336,7 +35337,7 @@ function useNode() {
 
 // src/inspector/pages/home.tsx
 import { styled as styled23 } from "goober";
-var import_react27 = __toESM(require_react(), 1);
+var import_react28 = __toESM(require_react(), 1);
 
 // src/inspector/router/in-memory-router.tsx
 var import_react25 = __toESM(require_react(), 1);
@@ -35395,14 +35396,161 @@ function InMemoryRouterProvider({
 var import_react26 = __toESM(require_react(), 1);
 var import_jsx_runtime38 = __toESM(require_jsx_runtime(), 1);
 
-// src/inspector/pages/home.tsx
+// src/inspector/viewer/delete-local-data.tsx
+var import_react27 = __toESM(require_react(), 1);
 var import_jsx_runtime39 = __toESM(require_jsx_runtime(), 1);
-function HomePage() {
+import { useJazzContext } from "jazz-tools/react-core";
+var DELETE_LOCAL_DATA_STRING = "delete my local data";
+function DeleteLocalData() {
+  const [showDeleteModal, setShowDeleteModal] = (0, import_react27.useState)(false);
+  const [confirmDeleteString, setConfirmDeleteString] = (0, import_react27.useState)("");
+  const jazzContext = useJazzContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_jsx_runtime39.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+      Button,
+      {
+        variant: "destructive",
+        onClick: () => setShowDeleteModal(true),
+        title: "Delete my local data",
+        children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+          "svg",
+          {
+            width: "16",
+            height: "16",
+            viewBox: "0 0 16 16",
+            fill: "none",
+            xmlns: "http://www.w3.org/2000/svg",
+            children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+              "path",
+              {
+                d: "M2 4h12M5.333 4V2.667a1.333 1.333 0 011.334-1.334h2.666a1.333 1.333 0 011.334 1.334V4m2 0v9.333a1.333 1.333 0 01-1.334 1.334H4.667a1.333 1.333 0 01-1.334-1.334V4h9.334z",
+                stroke: "currentColor",
+                strokeWidth: "1.5",
+                strokeLinecap: "round",
+                strokeLinejoin: "round"
+              }
+            )
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
+      Modal,
+      {
+        isOpen: showDeleteModal,
+        onClose: () => setShowDeleteModal(false),
+        heading: "Delete Local Data",
+        showButtons: false,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
+            "div",
+            {
+              style: {
+                margin: "0 0 1rem 0",
+                color: "var(--j-text-color)",
+                display: "flex",
+                flexDirection: "column",
+                gap: "0.5rem"
+              },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("p", { children: [
+                  "This action ",
+                  /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("strong", { children: "cannot" }),
+                  " be undone."
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("p", { children: [
+                  "Be aware that the following data will be",
+                  " ",
+                  /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("strong", { children: "permanently" }),
+                  " deleted:"
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("ul", { style: { listStyleType: "disc", paddingLeft: "1rem" }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("li", { children: [
+                    "Unsynced data for ",
+                    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("strong", { children: "all apps" }),
+                    " on",
+                    " ",
+                    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("code", { children: window.location.origin })
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("li", { children: "Accounts" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("li", { children: "Logged in sessions" })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("p", {})
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+            Input,
+            {
+              label: `Type "${DELETE_LOCAL_DATA_STRING}" to confirm`,
+              placeholder: DELETE_LOCAL_DATA_STRING,
+              value: confirmDeleteString,
+              onChange: (e) => {
+                setConfirmDeleteString(e.target.value);
+              }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+            "p",
+            {
+              style: {
+                margin: "0 0 1rem 0",
+                color: "var(--j-text-color)",
+                display: "flex",
+                flexDirection: "column",
+                gap: "0.5rem"
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("small", { children: [
+                "Data synced to a sync server will ",
+                /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("strong", { children: "not" }),
+                " be deleted, and will be synced when you log in again."
+              ] })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
+            "div",
+            {
+              style: {
+                display: "flex",
+                marginTop: "0.5rem",
+                justifyContent: "flex-end",
+                gap: "0.5rem"
+              },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Button, { variant: "secondary", onClick: () => setShowDeleteModal(false), children: "Cancel" }),
+                /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+                  Button,
+                  {
+                    variant: "destructive",
+                    disabled: confirmDeleteString !== DELETE_LOCAL_DATA_STRING,
+                    onClick: () => {
+                      localStorage.removeItem(
+                        jazzContext.getAuthSecretStorage().getStorageKey()
+                      );
+                      indexedDB.deleteDatabase("jazz-storage");
+                      window.location.reload();
+                      setShowDeleteModal(false);
+                    },
+                    children: "I'm sure, delete my local data"
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+
+// src/inspector/pages/home.tsx
+var import_jsx_runtime40 = __toESM(require_jsx_runtime(), 1);
+function HomePage({ showDeleteLocalData }) {
   const { localNode, accountID } = useNode();
   const { path, setPage } = useRouter();
-  const [coValueId, setCoValueId] = (0, import_react27.useState)("");
+  const [coValueId, setCoValueId] = (0, import_react28.useState)("");
   if (!localNode || !accountID) {
-    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { children: "Loading..." });
+    return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { children: "Loading..." });
   }
   const handleCoValueIdSubmit = (e) => {
     e.preventDefault();
@@ -35411,40 +35559,48 @@ function HomePage() {
     }
     setCoValueId("");
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_jsx_runtime39.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
-    CenteredForm,
-    {
-      onSubmit: handleCoValueIdSubmit,
-      "aria-hidden": path.length !== 0,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Heading, { children: "Jazz CoValue Inspector" }),
-        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
-          Input,
-          {
-            label: "CoValue ID",
-            className: "font-mono",
-            hideLabel: true,
-            placeholder: "co_z1234567890abcdef123456789",
-            value: coValueId,
-            onChange: (e) => setCoValueId(e.target.value)
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Button, { type: "submit", variant: "primary", children: "Inspect CoValue" }),
-        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(OrText, { children: "or" }),
-        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
-          Button,
-          {
-            variant: "secondary",
-            onClick: () => {
-              setPage(accountID);
-            },
-            children: "Inspect my account"
-          }
-        )
-      ]
-    }
-  ) });
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(PageContainer2, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
+      CenteredForm,
+      {
+        onSubmit: handleCoValueIdSubmit,
+        "aria-hidden": path.length !== 0,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Heading, { children: "Jazz CoValue Inspector" }),
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+            Input,
+            {
+              label: "CoValue ID",
+              className: "font-mono",
+              hideLabel: true,
+              placeholder: "co_z1234567890abcdef123456789",
+              value: coValueId,
+              onChange: (e) => setCoValueId(e.target.value)
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Button, { type: "submit", variant: "primary", children: "Inspect CoValue" }),
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(OrText, { children: "or" }),
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+            Button,
+            {
+              variant: "secondary",
+              onClick: () => {
+                setPage(accountID);
+              },
+              children: "Inspect my account"
+            }
+          )
+        ]
+      }
+    ),
+    showDeleteLocalData && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(BottomRight, { children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(DeleteLocalData, {}) })
+  ] });
 }
+var PageContainer2 = styled23("div")`
+  position: relative;
+  height: 100%;
+  width: 100%;
+`;
 var CenteredForm = styled23("form")`
   display: flex;
   flex-direction: column;
@@ -35460,9 +35616,14 @@ var CenteredForm = styled23("form")`
 var OrText = styled23("p")`
   text-align: center;
 `;
+var BottomRight = styled23("div")`
+  position: absolute;
+  bottom: 0.75rem;
+  right: 0;
+`;
 
 // src/inspector/viewer/page-stack.tsx
-var import_jsx_runtime40 = __toESM(require_jsx_runtime(), 1);
+var import_jsx_runtime41 = __toESM(require_jsx_runtime(), 1);
 var PageStackContainer = styled24("article")`
   position: relative;
   padding: 0 0.75rem;
@@ -35471,15 +35632,15 @@ var PageStackContainer = styled24("article")`
   color: var(--j-text-color);
   font-size: 16px;
 `;
-function PageStack({ homePage }) {
+function PageStack({ homePage, style }) {
   const { path, addPages, goBack } = useRouter();
   const { localNode } = useNode();
   const page = path[path.length - 1];
   const index = path.length - 1;
   if (path.length <= 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(PageStackContainer, { children: homePage ?? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(HomePage, {}) });
+    return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(PageStackContainer, { style, children: homePage ?? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(HomePage, {}) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_jsx_runtime40.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(PageStackContainer, { children: localNode && page && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(ErrorBoundary, { title: "An error occurred while rendering this CoValue", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(PageStackContainer, { style, children: localNode && page && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(ErrorBoundary, { title: "An error occurred while rendering this CoValue", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
     Page,
     {
       coId: page.coId,
@@ -35489,7 +35650,7 @@ function PageStack({ homePage }) {
       onNavigate: addPages,
       isTopLevel: index === path.length - 1
     }
-  ) }) }) });
+  ) }) });
 }
 
 // src/inspector/ui/global-styles.tsx
@@ -35568,7 +35729,7 @@ var GlobalStyles = styled25("div")`
 `;
 
 // src/inspector/viewer/inspector-button.tsx
-var import_jsx_runtime41 = __toESM(require_jsx_runtime(), 1);
+var import_jsx_runtime42 = __toESM(require_jsx_runtime(), 1);
 import { styled as styled26 } from "goober";
 var StyledInspectorButton = styled26("button")`
   position: fixed;
@@ -35612,8 +35773,8 @@ function InspectorButton({
   position = "right",
   ...buttonProps
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(StyledInspectorButton, { position, ...buttonProps, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(StyledInspectorButton, { position, ...buttonProps, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
       JazzIcon,
       {
         xmlns: "http://www.w3.org/2000/svg",
@@ -35621,7 +35782,7 @@ function InspectorButton({
         height: "115",
         viewBox: "0 0 119 115",
         fill: "none",
-        children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
           "path",
           {
             fillRule: "evenodd",
@@ -35632,7 +35793,7 @@ function InspectorButton({
         )
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
       "span",
       {
         style: {
@@ -35653,15 +35814,15 @@ function InspectorButton({
 }
 
 // src/inspector/viewer/use-open-inspector.ts
-var import_react28 = __toESM(require_react(), 1);
+var import_react29 = __toESM(require_react(), 1);
 var STORAGE_KEY2 = "jazz-inspector-open";
 function useOpenInspector() {
-  const [open, setOpen] = (0, import_react28.useState)(() => {
+  const [open, setOpen] = (0, import_react29.useState)(() => {
     if (typeof window === "undefined") return false;
     const stored = localStorage.getItem(STORAGE_KEY2);
     return stored ? JSON.parse(stored) : false;
   });
-  (0, import_react28.useEffect)(() => {
+  (0, import_react29.useEffect)(() => {
     localStorage.setItem(STORAGE_KEY2, JSON.stringify(open));
   }, [open]);
   return [open, setOpen];
@@ -35672,9 +35833,9 @@ var import_react31 = __toESM(require_react(), 1);
 import { styled as styled28 } from "goober";
 
 // src/inspector/viewer/breadcrumbs.tsx
-var import_react29 = __toESM(require_react(), 1);
+var import_react30 = __toESM(require_react(), 1);
 import { styled as styled27 } from "goober";
-var import_jsx_runtime42 = __toESM(require_jsx_runtime(), 1);
+var import_jsx_runtime43 = __toESM(require_jsx_runtime(), 1);
 var BreadcrumbsContainer = styled27("div")`
   position: relative;
   z-index: 20;
@@ -35687,8 +35848,8 @@ var Separator = styled27("span")`
 `;
 var Breadcrumbs = () => {
   const { path, goToIndex } = useRouter();
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(BreadcrumbsContainer, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(BreadcrumbsContainer, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
       Button,
       {
         variant: "link",
@@ -35698,9 +35859,9 @@ var Breadcrumbs = () => {
       }
     ),
     path.map((page, index) => {
-      return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_react29.default.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Separator, { "aria-hidden": true, children: "/" }),
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_react30.default.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Separator, { "aria-hidden": true, children: "/" }),
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
           Button,
           {
             variant: "link",
@@ -35714,131 +35875,13 @@ var Breadcrumbs = () => {
   ] });
 };
 
-// src/inspector/viewer/delete-local-data.tsx
-var import_react30 = __toESM(require_react(), 1);
-var import_jsx_runtime43 = __toESM(require_jsx_runtime(), 1);
-var DELETE_LOCAL_DATA_STRING = "delete my local data";
-function DeleteLocalData() {
-  const [showDeleteModal, setShowDeleteModal] = (0, import_react30.useState)(false);
-  const [confirmDeleteString, setConfirmDeleteString] = (0, import_react30.useState)("");
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_jsx_runtime43.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Button, { variant: "destructive", onClick: () => setShowDeleteModal(true), children: "Delete my local data" }),
-    /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
-      Modal,
-      {
-        isOpen: showDeleteModal,
-        onClose: () => setShowDeleteModal(false),
-        heading: "Delete Local Data",
-        showButtons: false,
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
-            "div",
-            {
-              style: {
-                margin: "0 0 1rem 0",
-                color: "var(--j-text-color)",
-                display: "flex",
-                flexDirection: "column",
-                gap: "0.5rem"
-              },
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("p", { children: [
-                  "This action ",
-                  /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("strong", { children: "cannot" }),
-                  " be undone."
-                ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("p", { children: [
-                  "Be aware that the following data will be",
-                  " ",
-                  /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("strong", { children: "permanently" }),
-                  " deleted:"
-                ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("ul", { style: { listStyleType: "disc", paddingLeft: "1rem" }, children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("li", { children: [
-                    "Unsynced data for ",
-                    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("strong", { children: "all apps" }),
-                    " on",
-                    " ",
-                    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("code", { children: window.location.origin })
-                  ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("li", { children: "Accounts" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("li", { children: "Logged in sessions" })
-                ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("p", {})
-              ]
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
-            Input,
-            {
-              label: `Type "${DELETE_LOCAL_DATA_STRING}" to confirm`,
-              placeholder: DELETE_LOCAL_DATA_STRING,
-              value: confirmDeleteString,
-              onChange: (e) => {
-                setConfirmDeleteString(e.target.value);
-              }
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
-            "p",
-            {
-              style: {
-                margin: "0 0 1rem 0",
-                color: "var(--j-text-color)",
-                display: "flex",
-                flexDirection: "column",
-                gap: "0.5rem"
-              },
-              children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("small", { children: [
-                "Data synced to a sync server will ",
-                /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("strong", { children: "not" }),
-                " be deleted, and will be synced when you log in again."
-              ] })
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
-            "div",
-            {
-              style: {
-                display: "flex",
-                marginTop: "0.5rem",
-                justifyContent: "flex-end",
-                gap: "0.5rem"
-              },
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Button, { variant: "secondary", onClick: () => setShowDeleteModal(false), children: "Cancel" }),
-                /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
-                  Button,
-                  {
-                    variant: "destructive",
-                    disabled: confirmDeleteString !== DELETE_LOCAL_DATA_STRING,
-                    onClick: () => {
-                      const jazzKeys = Object.keys(localStorage).filter(
-                        (key) => key.startsWith("jazz-") || key.startsWith("co_z")
-                      );
-                      jazzKeys.forEach((key) => localStorage.removeItem(key));
-                      indexedDB.deleteDatabase("jazz-storage");
-                      window.location.reload();
-                      setShowDeleteModal(false);
-                    },
-                    children: "I'm sure, delete my local data"
-                  }
-                )
-              ]
-            }
-          )
-        ]
-      }
-    )
-  ] });
-}
-
 // src/inspector/viewer/header.tsx
 var import_jsx_runtime44 = __toESM(require_jsx_runtime(), 1);
 function Header({
-  showDeleteLocalData = false,
   showClose = false,
   onClose,
+  activeTab,
+  onTabChange,
   children
 }) {
   const [coValueId, setCoValueId] = (0, import_react31.useState)("");
@@ -35851,21 +35894,59 @@ function Header({
     setCoValueId("");
   };
   return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(HeaderContainer2, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Breadcrumbs, {}),
-    path.length !== 0 && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Form, { onSubmit: handleCoValueIdSubmit, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-      Input,
-      {
-        label: "CoValue ID",
-        style: { fontFamily: "monospace" },
-        hideLabel: true,
-        placeholder: "co_z1234567890abcdef123456789",
-        value: coValueId,
-        onChange: (e) => setCoValueId(e.target.value)
-      }
-    ) }),
+    activeTab && onTabChange && /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(TabBar, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+        Tab,
+        {
+          active: activeTab === "inspector",
+          onClick: () => onTabChange("inspector"),
+          children: "Inspector"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+        Tab,
+        {
+          active: activeTab === "performance",
+          onClick: () => onTabChange("performance"),
+          children: "Performance"
+        }
+      )
+    ] }),
+    (activeTab === "inspector" || !activeTab) && /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_jsx_runtime44.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Breadcrumbs, {}),
+      path.length !== 0 && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Form, { onSubmit: handleCoValueIdSubmit, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+        Input,
+        {
+          label: "CoValue ID",
+          style: { fontFamily: "monospace" },
+          hideLabel: true,
+          placeholder: "co_z1234567890abcdef123456789",
+          value: coValueId,
+          onChange: (e) => setCoValueId(e.target.value)
+        }
+      ) })
+    ] }),
     children,
-    showDeleteLocalData && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(DeleteLocalData, {}),
-    showClose && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Button, { variant: "plain", type: "button", onClick: onClose, children: "Close" })
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Spacer, {}),
+    showClose && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Button, { variant: "plain", type: "button", onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+      "svg",
+      {
+        width: "14",
+        height: "14",
+        viewBox: "0 0 14 14",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+          "path",
+          {
+            d: "M1 1L13 13M1 13L13 1",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round"
+          }
+        )
+      }
+    ) })
   ] });
 }
 var HeaderContainer2 = styled28("div")`
@@ -35878,31 +35959,1081 @@ var HeaderContainer2 = styled28("div")`
 var Form = styled28("form")`
   width: 24rem;
 `;
+var TabBar = styled28("div")`
+  display: flex;
+  gap: 0.25rem;
+  background-color: var(--j-foreground);
+  border-radius: var(--j-radius-lg);
+  padding: 0.25rem;
+`;
+var Tab = styled28("button")`
+  padding: 0.375rem 0.75rem;
+  border: none;
+  border-radius: var(--j-radius-md);
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.15s ease;
 
-// src/inspector/in-app.tsx
+  ${(props) => props.active ? `
+    background-color: white;
+    color: var(--j-text-color-strong);
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--j-neutral-800);
+    }
+  ` : `
+    background-color: transparent;
+    color: var(--j-neutral-500);
+
+    &:hover {
+      color: var(--j-text-color-strong);
+    }
+  `}
+`;
+var Spacer = styled28("div")`
+  flex: 1;
+`;
+
+// src/inspector/pages/performance/PerformancePage.tsx
+var import_react34 = __toESM(require_react(), 1);
+import { styled as styled32 } from "goober";
+
+// src/inspector/pages/performance/Timeline.tsx
+var import_react32 = __toESM(require_react(), 1);
+import { styled as styled29 } from "goober";
+
+// src/inspector/pages/performance/helpers.ts
+function formatTime(startTime) {
+  const date = new Date(performance.timeOrigin + startTime);
+  return date.toLocaleTimeString(void 0, {
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit",
+    fractionalSecondDigits: 3
+  });
+}
+function formatDuration(duration) {
+  if (duration < 1) {
+    return `${(duration * 1e3).toFixed(0)}\u03BCs`;
+  }
+  if (duration < 1e3) {
+    return `${duration.toFixed(2)}ms`;
+  }
+  return `${(duration / 1e3).toFixed(2)}s`;
+}
+function getCallerLocation(stack) {
+  if (!stack) return void 0;
+  const lines = stack.split("\n").slice(2, 15);
+  const normalizeLine = (line) => line.replace(/https?:\/\/[^/\s)]+/g, "");
+  const userFrame = lines.find(
+    (line) => !line.includes("node_modules") && !line.includes("useCoValueSubscription") && !line.includes("useCoState") && !line.includes("useAccount") && !line.includes("useSuspenseCoState") && !line.includes("useSuspenseAccount") && !line.includes("jazz-tools") && !line.includes("trackLoadingPerformance")
+  );
+  if (userFrame) {
+    const cleanedFrame = normalizeLine(userFrame).trim();
+    const match = cleanedFrame.match(/\(?([^)]+:\d+:\d+)\)?$/);
+    if (match) {
+      return match[1];
+    }
+    return cleanedFrame;
+  }
+  return lines[0] ? normalizeLine(lines[0]).trim() : void 0;
+}
+function getCallerStack(stack) {
+  if (!stack) return void 0;
+  const lines = stack.split("\n").slice(2, 15);
+  return lines.filter(
+    (line) => !line.includes("Error:") && !line.includes("renderWithHooks") && !line.includes("react-stack-bottom-frame")
+  ).map((line) => line.replace(/https?:\/\/[^/\s)]+/g, "").trim()).reverse().join("\n");
+}
+
+// src/inspector/pages/performance/Timeline.tsx
 var import_jsx_runtime45 = __toESM(require_jsx_runtime(), 1);
+var TimelineContainer = styled29("div")`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--j-foreground);
+  border: 1px solid var(--j-border-color);
+  border-radius: var(--j-radius-sm);
+  overflow: hidden;
+`;
+var TimelineTrack = styled29("div")`
+  position: relative;
+  height: 48px;
+  background-color: var(--j-background);
+  cursor: crosshair;
+  user-select: none;
+`;
+var TimeMarker = styled29("div")`
+  position: absolute;
+  font-size: 0.5rem;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  color: var(--j-text-color);
+  padding: 2px 4px;
+  white-space: nowrap;
+
+  @media (prefers-color-scheme: dark) {
+    color: var(--j-neutral-500);
+  }
+
+  &::after {
+    content: "";
+    position: absolute;
+    left: 0;
+    top: 100%;
+    width: 1px;
+    height: 32px;
+    background-color: var(--j-border-color);
+  }
+`;
+var TimelineBars = styled29("div")`
+  position: absolute;
+  top: 16px;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  pointer-events: none;
+`;
+var TimelineBar = styled29("div")`
+  position: absolute;
+  border-radius: 1px;
+  min-width: 2px;
+`;
+var TimelineSelection = styled29("div")`
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  background-color: var(--j-primary-color);
+  opacity: 0.2;
+  cursor: grab;
+  pointer-events: auto;
+
+  &:active {
+    cursor: grabbing;
+  }
+`;
+var TimelineSelectionHandle = styled29("div")`
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 2px;
+  background-color: var(--j-primary-color);
+  cursor: ew-resize;
+  pointer-events: auto;
+
+  &::after {
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 8px;
+    height: 16px;
+    background-color: var(--j-primary-color);
+    border-radius: 2px;
+  }
+`;
+var ClearSelectionButton = styled29("button")`
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 6px;
+  font-size: 0.5rem;
+  background-color: var(--j-foreground);
+  border: 1px solid var(--j-border-color);
+  border-radius: var(--j-radius-sm);
+  cursor: pointer;
+  color: var(--j-neutral-500);
+  z-index: 10;
+
+  &:hover {
+    background-color: var(--j-background);
+    color: var(--j-text-color);
+  }
+`;
+function Timeline({
+  entries,
+  timeRange,
+  selection,
+  onSelectionChange
+}) {
+  const trackRef = (0, import_react32.useRef)(null);
+  const [dragMode, setDragMode] = (0, import_react32.useState)(null);
+  const [dragStartTime, setDragStartTime] = (0, import_react32.useState)(null);
+  const [dragCurrentTime, setDragCurrentTime] = (0, import_react32.useState)(null);
+  const [dragInitialSelection, setDragInitialSelection] = (0, import_react32.useState)(null);
+  const duration = timeRange.max - timeRange.min;
+  const timeMarkers = (0, import_react32.useMemo)(() => {
+    const markers = [];
+    if (duration <= 0) return markers;
+    const maxMarkers = 5;
+    const minInterval = duration / maxMarkers;
+    const magnitude = Math.pow(10, Math.floor(Math.log10(minInterval)));
+    const normalized = minInterval / magnitude;
+    let niceMultiplier;
+    if (normalized <= 1) niceMultiplier = 1;
+    else if (normalized <= 2) niceMultiplier = 2;
+    else if (normalized <= 5) niceMultiplier = 5;
+    else niceMultiplier = 10;
+    const interval = niceMultiplier * magnitude;
+    const startMarker = Math.ceil(timeRange.min / interval) * interval;
+    for (let time = startMarker; time <= timeRange.max; time += interval) {
+      const position = (time - timeRange.min) / duration * 100;
+      markers.push({
+        time,
+        label: formatDuration(time),
+        position
+      });
+    }
+    return markers;
+  }, [timeRange, duration]);
+  const getTimeFromPosition = (clientX) => {
+    if (!trackRef.current) return 0;
+    const rect = trackRef.current.getBoundingClientRect();
+    const position = Math.max(
+      0,
+      Math.min(1, (clientX - rect.left) / rect.width)
+    );
+    return timeRange.min + position * duration;
+  };
+  const handleTrackMouseDown = (e) => {
+    const time = getTimeFromPosition(e.clientX);
+    setDragMode("creating");
+    setDragStartTime(time);
+    setDragCurrentTime(time);
+  };
+  const handleSelectionMouseDown = (e) => {
+    e.stopPropagation();
+    if (!selection) return;
+    const time = getTimeFromPosition(e.clientX);
+    setDragMode("moving");
+    setDragStartTime(time);
+    setDragCurrentTime(time);
+    setDragInitialSelection(selection);
+  };
+  const handleLeftHandleMouseDown = (e) => {
+    e.stopPropagation();
+    if (!selection) return;
+    setDragMode("resizing-left");
+    setDragStartTime(selection[0]);
+    setDragCurrentTime(selection[0]);
+    setDragInitialSelection(selection);
+  };
+  const handleRightHandleMouseDown = (e) => {
+    e.stopPropagation();
+    if (!selection) return;
+    setDragMode("resizing-right");
+    setDragStartTime(selection[1]);
+    setDragCurrentTime(selection[1]);
+    setDragInitialSelection(selection);
+  };
+  (0, import_react32.useEffect)(() => {
+    if (!dragMode) return;
+    const handleMouseMove = (e) => {
+      const time = getTimeFromPosition(e.clientX);
+      setDragCurrentTime(time);
+    };
+    const handleMouseUp = () => {
+      if (dragMode === "creating" && dragStartTime !== null && dragCurrentTime !== null) {
+        const start = Math.min(dragStartTime, dragCurrentTime);
+        const end = Math.max(dragStartTime, dragCurrentTime);
+        if ((end - start) / duration > 0.01) {
+          onSelectionChange([start, end]);
+        }
+      } else if (dragMode === "moving" && dragInitialSelection && dragStartTime !== null && dragCurrentTime !== null) {
+        const delta = dragCurrentTime - dragStartTime;
+        const selectionWidth2 = dragInitialSelection[1] - dragInitialSelection[0];
+        let newStart = dragInitialSelection[0] + delta;
+        let newEnd = dragInitialSelection[1] + delta;
+        if (newStart < timeRange.min) {
+          newStart = timeRange.min;
+          newEnd = timeRange.min + selectionWidth2;
+        }
+        if (newEnd > timeRange.max) {
+          newEnd = timeRange.max;
+          newStart = timeRange.max - selectionWidth2;
+        }
+        onSelectionChange([newStart, newEnd]);
+      } else if (dragMode === "resizing-left" && dragInitialSelection && dragCurrentTime !== null) {
+        const newStart = Math.min(
+          dragCurrentTime,
+          dragInitialSelection[1] - duration * 0.01
+        );
+        onSelectionChange([
+          Math.max(timeRange.min, newStart),
+          dragInitialSelection[1]
+        ]);
+      } else if (dragMode === "resizing-right" && dragInitialSelection && dragCurrentTime !== null) {
+        const newEnd = Math.max(
+          dragCurrentTime,
+          dragInitialSelection[0] + duration * 0.01
+        );
+        onSelectionChange([
+          dragInitialSelection[0],
+          Math.min(timeRange.max, newEnd)
+        ]);
+      }
+      setDragMode(null);
+      setDragStartTime(null);
+      setDragCurrentTime(null);
+      setDragInitialSelection(null);
+    };
+    window.addEventListener("mousemove", handleMouseMove);
+    window.addEventListener("mouseup", handleMouseUp);
+    return () => {
+      window.removeEventListener("mousemove", handleMouseMove);
+      window.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, [
+    dragMode,
+    dragStartTime,
+    dragCurrentTime,
+    dragInitialSelection,
+    duration,
+    timeRange,
+    onSelectionChange
+  ]);
+  const laneAssignments = (0, import_react32.useMemo)(() => {
+    const now = performance.now();
+    const barHeight = 3;
+    const barGap = 1;
+    const maxLanes = 8;
+    const sortedEntries = [...entries].sort(
+      (a, b) => a.startTime - b.startTime
+    );
+    const laneEndTimes = Array(maxLanes).fill(0);
+    const assignments = /* @__PURE__ */ new Map();
+    for (const entry of sortedEntries) {
+      const entryEnd = entry.endTime ?? now;
+      let assignedLane = laneEndTimes.findIndex(
+        (endTime) => entry.startTime >= endTime
+      );
+      if (assignedLane === -1) {
+        const earliestEnd = Math.min(...laneEndTimes);
+        assignedLane = laneEndTimes.indexOf(earliestEnd);
+      }
+      laneEndTimes[assignedLane] = entryEnd;
+      assignments.set(entry.uuid, assignedLane * (barHeight + barGap));
+    }
+    return assignments;
+  }, [entries]);
+  const getBarStyle = (entry) => {
+    const now = performance.now();
+    const start = entry.startTime;
+    const end = entry.endTime ?? now;
+    const left = (start - timeRange.min) / duration * 100;
+    const width = Math.max(0.5, (end - start) / duration * 100);
+    const color = entry.status === "pending" ? "var(--j-warning-color)" : entry.status === "error" ? "var(--j-error-color)" : "var(--j-success-color)";
+    const top = laneAssignments.get(entry.uuid) ?? 0;
+    return {
+      left: `${left}%`,
+      width: `${width}%`,
+      backgroundColor: color,
+      top: `${top}px`,
+      height: "3px"
+    };
+  };
+  const currentSelection = (0, import_react32.useMemo)(() => {
+    if (dragMode === "creating" && dragStartTime !== null && dragCurrentTime !== null) {
+      return [
+        Math.min(dragStartTime, dragCurrentTime),
+        Math.max(dragStartTime, dragCurrentTime)
+      ];
+    }
+    if (dragMode === "moving" && dragInitialSelection && dragStartTime !== null && dragCurrentTime !== null) {
+      const delta = dragCurrentTime - dragStartTime;
+      const selectionWidth2 = dragInitialSelection[1] - dragInitialSelection[0];
+      let newStart = dragInitialSelection[0] + delta;
+      let newEnd = dragInitialSelection[1] + delta;
+      if (newStart < timeRange.min) {
+        newStart = timeRange.min;
+        newEnd = timeRange.min + selectionWidth2;
+      }
+      if (newEnd > timeRange.max) {
+        newEnd = timeRange.max;
+        newStart = timeRange.max - selectionWidth2;
+      }
+      return [newStart, newEnd];
+    }
+    if (dragMode === "resizing-left" && dragInitialSelection && dragCurrentTime !== null) {
+      const newStart = Math.max(
+        timeRange.min,
+        Math.min(dragCurrentTime, dragInitialSelection[1] - duration * 0.01)
+      );
+      return [newStart, dragInitialSelection[1]];
+    }
+    if (dragMode === "resizing-right" && dragInitialSelection && dragCurrentTime !== null) {
+      const newEnd = Math.min(
+        timeRange.max,
+        Math.max(dragCurrentTime, dragInitialSelection[0] + duration * 0.01)
+      );
+      return [dragInitialSelection[0], newEnd];
+    }
+    return selection;
+  }, [
+    dragMode,
+    dragStartTime,
+    dragCurrentTime,
+    dragInitialSelection,
+    selection,
+    timeRange,
+    duration
+  ]);
+  const selectionLeft = currentSelection ? (currentSelection[0] - timeRange.min) / duration * 100 : 0;
+  const selectionWidth = currentSelection ? (currentSelection[1] - currentSelection[0]) / duration * 100 : 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(TimelineContainer, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(TimelineTrack, { ref: trackRef, onMouseDown: handleTrackMouseDown, children: [
+      timeMarkers.map((marker) => /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(TimeMarker, { style: { left: `${marker.position}%` }, children: marker.label }, marker.time)),
+      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(TimelineBars, { children: entries.map((entry) => /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(TimelineBar, { style: getBarStyle(entry) }, entry.uuid)) }),
+      currentSelection && /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_jsx_runtime45.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+          TimelineSelection,
+          {
+            style: {
+              left: `${selectionLeft}%`,
+              width: `${selectionWidth}%`
+            },
+            onMouseDown: handleSelectionMouseDown
+          }
+        ),
+        !dragMode && /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_jsx_runtime45.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+            TimelineSelectionHandle,
+            {
+              style: { left: `${selectionLeft}%` },
+              onMouseDown: handleLeftHandleMouseDown
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+            TimelineSelectionHandle,
+            {
+              style: { left: `${selectionLeft + selectionWidth}%` },
+              onMouseDown: handleRightHandleMouseDown
+            }
+          )
+        ] })
+      ] })
+    ] }),
+    currentSelection && !dragMode && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+      ClearSelectionButton,
+      {
+        onClick: (e) => {
+          e.stopPropagation();
+          onSelectionChange(null);
+        },
+        children: "Clear selection"
+      }
+    )
+  ] });
+}
+
+// src/inspector/pages/performance/SubscriptionRow.tsx
+import { styled as styled30 } from "goober";
+var import_jsx_runtime46 = __toESM(require_jsx_runtime(), 1);
+var RowWrapper = styled30("div")`
+  display: grid;
+  grid-template-columns: subgrid;
+  grid-column: 1 / -1;
+  position: relative;
+  cursor: pointer;
+
+  &:hover,
+  &:focus {
+    background-color: var(--j-foreground);
+    outline: none;
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--j-primary-color);
+    outline-offset: -2px;
+  }
+
+  &[data-expanded="true"] {
+    background-color: var(--j-foreground);
+  }
+`;
+var TimeBar = styled30("div")`
+  position: absolute;
+  bottom: 0;
+  height: 4px;
+  transition: transform 0.15s ease;
+  z-index: 1;
+  container-type: inline-size;
+
+  .row-wrapper:hover &, [data-expanded="true"] & {
+    transform: scaleY(4);
+
+    .time-label {
+      opacity: 1;
+    }
+  }
+
+  &[data-status="pending"] {
+    animation: pulse 1.5s ease-in-out infinite;
+  }
+
+  @keyframes pulse {
+    0%,
+    100% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.5;
+    }
+  }
+`;
+var TimeLabel = styled30("span")`
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%) scaleY(0.25);
+  font-size: 0.5rem;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  color: white;
+  white-space: nowrap;
+  opacity: 0;
+  transition: opacity 0.15s ease;
+  pointer-events: none;
+  left: 4px;
+  --time-label-overflow-color: black;
+
+  @media (prefers-color-scheme: dark) {
+    --time-label-overflow-color: white;
+  }
+
+  @container (max-width: 50px) {
+    color: var(--time-label-overflow-color);
+    left: 100%;
+    margin-left: 4px;
+  }
+
+  [data-near-edge="true"] & {
+    @container (max-width: 50px) {
+      left: auto;
+      right: 100%;
+      margin-left: 0;
+      margin-right: 4px;
+    }
+  }
+`;
+var Cell = styled30("div")`
+  padding: 0.5rem;
+  padding-bottom: 0.75rem;
+  font-size: 0.625rem;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  border-bottom: 1px solid var(--j-border-color);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  &[data-clickable="true"] {
+    cursor: pointer;
+    color: var(--j-link-color);
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+`;
+var StatusBadge = styled30("span")`
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.125rem 0.375rem;
+  border-radius: 0.25rem;
+  font-size: 0.625rem;
+
+  &[data-status="pending"] {
+    background-color: var(--j-warning-bg);
+    color: var(--j-warning-color);
+  }
+  &[data-status="loaded"] {
+    background-color: var(--j-success-bg);
+    color: var(--j-success-color);
+  }
+  &[data-status="error"] {
+    background-color: var(--j-error-bg);
+    color: var(--j-error-color);
+  }
+`;
+var PendingDot = styled30("span")`
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background-color: var(--j-warning-color);
+  animation: pendingPulse 1.5s ease-in-out infinite;
+
+  @keyframes pendingPulse {
+    0%,
+    100% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.4;
+    }
+  }
+`;
+function SubscriptionRow({
+  entry,
+  isSelected,
+  onSelect,
+  barLeft,
+  barWidth,
+  barColor
+}) {
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      onSelect();
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
+    RowWrapper,
+    {
+      className: "row-wrapper",
+      "data-expanded": isSelected,
+      onClick: onSelect,
+      onKeyDown: handleKeyDown,
+      tabIndex: 0,
+      role: "button",
+      "aria-label": `View details for ${entry.source} ${entry.id}`,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Cell, { children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(StatusBadge, { "data-status": entry.status, children: entry.source }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Cell, { children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
+          "div",
+          {
+            style: {
+              display: "flex",
+              flexDirection: "column",
+              gap: "0.125rem"
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { children: entry.id }),
+              /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { style: { color: "var(--j-neutral-500)" }, children: entry.resolve })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Cell, { children: getCallerLocation(entry.callerStack) ?? "-" }),
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Cell, { children: entry.duration !== void 0 ? entry.duration === 0 ? "\u26A1 cached" : formatDuration(entry.duration) : /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(PendingDot, {}) }),
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+          TimeBar,
+          {
+            className: "time-bar",
+            "data-status": entry.status,
+            "data-near-edge": parseFloat(barLeft) + parseFloat(barWidth) > 85,
+            style: {
+              left: barLeft,
+              width: barWidth,
+              backgroundColor: barColor
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(TimeLabel, { className: "time-label", children: entry.duration === 0 ? "\u26A1 cached" : entry.duration ? formatDuration(entry.duration) : "-" })
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/inspector/pages/performance/SubscriptionDetailPanel.tsx
+import { styled as styled31 } from "goober";
+var import_jsx_runtime47 = __toESM(require_jsx_runtime(), 1);
+var DetailPanel = styled31("div")`
+  width: 320px;
+  flex-shrink: 0;
+  padding: 0.75rem 1rem;
+  background-color: var(--j-foreground);
+  border: 1px solid var(--j-border-color);
+  border-radius: var(--j-radius-sm);
+  overflow-y: auto;
+  position: relative;
+`;
+var CloseButton2 = styled31("button")`
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  padding: 0;
+  background: none;
+  border: none;
+  border-radius: var(--j-radius-sm);
+  cursor: pointer;
+  color: var(--j-neutral-500);
+
+  &:hover {
+    background-color: var(--j-background);
+    color: var(--j-text-color);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--j-primary-color);
+    outline-offset: -2px;
+  }
+`;
+var DetailsGrid = styled31("div")`
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 0.5rem 1rem;
+  font-size: 0.625rem;
+`;
+var DetailLabel = styled31("span")`
+  color: var(--j-neutral-500);
+  font-weight: 500;
+`;
+var DetailValue = styled31("span")`
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  color: var(--j-text-color);
+`;
+var Pre = styled31("pre")`
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-size: 0.625rem;
+  color: var(--j-text-color);
+  margin: 0;
+  white-space: pre-wrap;
+  word-break: break-all;
+  max-height: 200px;
+  overflow-y: auto;
+  background-color: var(--j-background);
+  padding: 0.5rem;
+  border-radius: var(--j-radius-sm);
+`;
+var StatusBadge2 = styled31("span")`
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.125rem 0.375rem;
+  border-radius: 0.25rem;
+  font-size: 0.625rem;
+
+  &[data-status="pending"] {
+    background-color: var(--j-warning-bg);
+    color: var(--j-warning-color);
+  }
+  &[data-status="loaded"] {
+    background-color: var(--j-success-bg);
+    color: var(--j-success-color);
+  }
+  &[data-status="error"] {
+    background-color: var(--j-error-bg);
+    color: var(--j-error-color);
+  }
+`;
+function SubscriptionDetailPanel({
+  entry,
+  onNavigate,
+  onClose
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(DetailPanel, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(CloseButton2, { onClick: onClose, "aria-label": "Close detail panel", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+      "svg",
+      {
+        width: "10",
+        height: "10",
+        viewBox: "0 0 14 14",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+          "path",
+          {
+            d: "M1 1L13 13M1 13L13 1",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round"
+          }
+        )
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(DetailsGrid, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(DetailLabel, { children: "Source" }),
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(DetailValue, { children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(StatusBadge2, { "data-status": entry.status, children: entry.source }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(DetailLabel, { children: "CoValue" }),
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(DetailValue, { children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+        "button",
+        {
+          title: "Click to navigate to CoValue",
+          onClick: () => onNavigate(entry.id),
+          style: {
+            color: "var(--j-link-color)",
+            cursor: "pointer",
+            background: "none",
+            border: "none",
+            padding: 0,
+            font: "inherit"
+          },
+          children: entry.id
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(DetailLabel, { children: "Time" }),
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(DetailValue, { children: [
+        formatTime(entry.startTime),
+        " -",
+        " ",
+        entry.duration !== void 0 ? formatTime(entry.startTime + entry.duration) : "Pending..."
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(DetailLabel, { children: "Duration" }),
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(DetailValue, { children: entry.duration !== void 0 ? formatDuration(entry.duration) : "Pending..." }),
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(DetailLabel, { children: "Resolve Query" }),
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Pre, { children: JSON.stringify(JSON.parse(entry.resolve), null, 2) }),
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(DetailLabel, { children: "Stack Trace" }),
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Pre, { children: getCallerStack(entry.callerStack) ?? "No stack trace available" })
+    ] })
+  ] });
+}
+
+// src/inspector/pages/performance/usePerformanceEntries.ts
+var import_react33 = __toESM(require_react(), 1);
+function usePerformanceEntries() {
+  const [entries, setEntries] = (0, import_react33.useState)([]);
+  (0, import_react33.useEffect)(() => {
+    const entriesByUuid = /* @__PURE__ */ new Map();
+    const handlePerformanceEntries = (entries2) => {
+      for (const mark of entries2) {
+        const detail = mark.detail;
+        if (detail?.type !== "jazz-subscription") continue;
+        const prevEntry = entriesByUuid.get(detail.uuid);
+        if (mark.entryType === "mark" && prevEntry) continue;
+        entriesByUuid.set(detail.uuid, {
+          uuid: detail.uuid,
+          id: detail.id,
+          source: detail.source,
+          resolve: JSON.stringify(detail.resolve),
+          status: detail.status,
+          startTime: mark.startTime,
+          callerStack: detail.callerStack ?? prevEntry?.callerStack,
+          duration: mark.entryType === "mark" ? void 0 : mark.duration,
+          endTime: mark.startTime + mark.duration,
+          errorType: detail.errorType
+        });
+      }
+    };
+    handlePerformanceEntries(performance.getEntriesByType("mark"));
+    handlePerformanceEntries(performance.getEntriesByType("measure"));
+    setEntries(Array.from(entriesByUuid.values()));
+    const observer = new PerformanceObserver((list) => {
+      handlePerformanceEntries(list.getEntries());
+      setEntries(Array.from(entriesByUuid.values()));
+    });
+    observer.observe({ entryTypes: ["mark", "measure"] });
+    return () => observer.disconnect();
+  }, []);
+  return entries;
+}
+
+// src/inspector/pages/performance/PerformancePage.tsx
+var import_jsx_runtime48 = __toESM(require_jsx_runtime(), 1);
+import { SubscriptionScope } from "jazz-tools";
+var Container2 = styled32("div")`
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding: 1rem;
+  height: 100%;
+  min-height: 0;
+`;
+var MainLayout = styled32("div")`
+  display: flex;
+  flex: 1;
+  min-height: 0;
+  gap: 1rem;
+`;
+var ListPanel = styled32("div")`
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+`;
+var Grid2 = styled32("div")`
+  display: grid;
+  grid-template-columns:
+    minmax(100px, 150px)
+    minmax(150px, 1fr)
+    minmax(100px, 200px)
+    80px;
+  grid-template-rows: min-content;
+  overflow-y: auto;
+  overflow-x: hidden;
+  flex: 1;
+  min-height: 0;
+  position: relative;
+`;
+var HeaderCell = styled32("div")`
+  padding: 0.5rem;
+  font-size: 0.625rem;
+  font-weight: 600;
+  color: var(--j-neutral-500);
+  border-bottom: 1px solid var(--j-border-color);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+`;
+var EmptyState = styled32("div")`
+  text-align: center;
+  padding: 2rem;
+  color: var(--j-neutral-500);
+  font-size: 0.875rem;
+`;
+function PerformancePage({ onNavigate, style }) {
+  const entries = usePerformanceEntries();
+  const [selectedRow, setSelectedRow] = (0, import_react34.useState)(null);
+  const [timeSelection, setTimeSelection] = (0, import_react34.useState)(
+    null
+  );
+  const deferredSelection = (0, import_react34.useDeferredValue)(timeSelection);
+  const { setPage } = useRouter();
+  const selectRow = (uuid) => {
+    setSelectedRow((prev) => prev === uuid ? null : uuid);
+  };
+  const sortedEntries = (0, import_react34.useMemo)(() => {
+    return [...entries].sort((a, b) => a.startTime - b.startTime);
+  }, [entries]);
+  const overallTimeRange = (0, import_react34.useMemo)(() => {
+    if (entries.length === 0) return null;
+    const now = performance.now();
+    return {
+      min: Math.min(...entries.map((e) => e.startTime)),
+      max: Math.max(...entries.map((e) => e.endTime ?? now))
+    };
+  }, [entries]);
+  const filteredEntries = (0, import_react34.useMemo)(() => {
+    if (!deferredSelection) return sortedEntries;
+    const [startTime, endTime] = deferredSelection;
+    const now = performance.now();
+    return sortedEntries.filter((entry) => {
+      const entryEnd = entry.endTime ?? now;
+      return entry.startTime <= endTime && entryEnd >= startTime;
+    });
+  }, [sortedEntries, deferredSelection]);
+  const displayRange = deferredSelection ? { min: deferredSelection[0], max: deferredSelection[1] } : overallTimeRange;
+  const getBarProps = (entry) => {
+    const range = (displayRange?.max ?? 1) - (displayRange?.min ?? 0) || 1;
+    const now = performance.now();
+    const clampedStart = Math.max(entry.startTime, displayRange?.min ?? 0);
+    const clampedEnd = Math.min(entry.endTime ?? now, displayRange?.max ?? now);
+    const left = Math.max(
+      0,
+      (clampedStart - (displayRange?.min ?? 0)) / range * 100
+    );
+    const width = Math.max(0.5, (clampedEnd - clampedStart) / range * 100);
+    const color = entry.status === "pending" ? "var(--j-warning-color)" : entry.status === "error" ? "var(--j-error-color)" : "var(--j-success-color)";
+    return {
+      barLeft: `${left}%`,
+      barWidth: `${width}%`,
+      barColor: color
+    };
+  };
+  const handleNavigateToCoValue = (id) => {
+    setPage(id);
+    onNavigate();
+  };
+  if (!SubscriptionScope.isProfilingEnabled) {
+    return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Container2, { style, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(EmptyState, { children: "Profiling is not enabled in production builds." }) });
+  }
+  if (entries.length === 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Container2, { style, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(EmptyState, { children: "No subscriptions recorded yet. Interact with your app to see subscription performance data." }) });
+  }
+  const selectedEntry = selectedRow ? filteredEntries.find((e) => e.uuid === selectedRow) : null;
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(Container2, { style, children: [
+    overallTimeRange && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+      Timeline,
+      {
+        entries: sortedEntries,
+        timeRange: overallTimeRange,
+        selection: timeSelection,
+        onSelectionChange: setTimeSelection
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(MainLayout, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(ListPanel, { children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(Grid2, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(HeaderCell, { children: "Source" }),
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(HeaderCell, { children: "CoValue" }),
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(HeaderCell, { children: "Caller" }),
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(HeaderCell, { children: "Duration" }),
+        filteredEntries.map((entry) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+          SubscriptionRow,
+          {
+            entry,
+            isSelected: selectedRow === entry.uuid,
+            onSelect: () => selectRow(entry.uuid),
+            ...getBarProps(entry)
+          },
+          entry.uuid
+        ))
+      ] }) }),
+      selectedEntry && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+        SubscriptionDetailPanel,
+        {
+          entry: selectedEntry,
+          onNavigate: handleNavigateToCoValue,
+          onClose: () => setSelectedRow(null)
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/inspector/in-app.tsx
+var import_jsx_runtime49 = __toESM(require_jsx_runtime(), 1);
+var STORAGE_KEY3 = "jazz-inspector-tab";
+function getStoredTab() {
+  try {
+    const stored = localStorage.getItem(STORAGE_KEY3);
+    if (stored === "inspector" || stored === "performance") {
+      return stored;
+    }
+  } catch {
+  }
+  return "inspector";
+}
 function InspectorInApp({
   position = "right",
   localNode,
   accountId
 }) {
   const [open, setOpen] = useOpenInspector();
+  const [activeTab, setActiveTabState] = (0, import_react35.useState)(getStoredTab);
+  const setActiveTab = (0, import_react35.useCallback)((tab) => {
+    setActiveTabState(tab);
+    try {
+      localStorage.setItem(STORAGE_KEY3, tab);
+    } catch {
+    }
+  }, []);
   if (!open) {
-    return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(InspectorButton, { position, onClick: () => setOpen(true) });
+    return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(InspectorButton, { position, onClick: () => setOpen(true) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(NodeProvider, { localNode: localNode ?? null, accountID: accountId ?? null, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(InMemoryRouterProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(InspectorContainer, { as: GlobalStyles, style: { zIndex: 999 }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(NodeProvider, { localNode: localNode ?? null, accountID: accountId ?? null, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(InMemoryRouterProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(InspectorContainer, { as: GlobalStyles, style: { zIndex: 999 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
       Header,
       {
-        showDeleteLocalData: true,
         showClose: true,
-        onClose: () => setOpen(false)
+        onClose: () => setOpen(false),
+        activeTab,
+        onTabChange: setActiveTab
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+      PageStack,
+      {
+        style: { display: activeTab === "inspector" ? "flex" : "none" },
+        homePage: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(HomePage, { showDeleteLocalData: true })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(PageStack, {})
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+      PerformancePage,
+      {
+        style: { display: activeTab === "performance" ? "flex" : "none" },
+        onNavigate: () => setActiveTab("inspector")
+      }
+    )
   ] }) }) });
 }
-var InspectorContainer = styled29("div")`
+var InspectorContainer = styled33("div")`
   position: fixed;
   height: 50vh;
   max-height: 800px;
@@ -35921,8 +37052,8 @@ var InspectorContainer = styled29("div")`
 `;
 
 // src/inspector/custom-element.tsx
-var import_jsx_runtime46 = __toESM(require_jsx_runtime(), 1);
-setup(import_react32.default.createElement);
+var import_jsx_runtime50 = __toESM(require_jsx_runtime(), 1);
+setup(import_react36.default.createElement);
 var JazzInspectorElement = class extends HTMLElement {
   constructor() {
     super(...arguments);
@@ -35964,7 +37095,7 @@ var JazzInspectorElement = class extends HTMLElement {
       return;
     }
     this.root?.render(
-      /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
         InspectorInApp,
         {
           localNode: this.account.$jazz.localNode,
@@ -36090,4 +37221,4 @@ react/cjs/react-jsx-runtime.development.js:
    * LICENSE file in the root directory of this source tree.
    *)
 */
-//# sourceMappingURL=custom-element-5YWVZBWA.js.map
+//# sourceMappingURL=custom-element-PWRX4VCA.js.map