jazz-tools 0.20.1 → 0.20.2

package/dist/index.js

@@ -50,7 +50,7 @@ import {
   subscribeToCoValue,
   unstable_loadUnique,
   zodReExport_exports
-} from "./chunk-2OPP7KWV.js";
+} from "./chunk-Q5RNSSUM.js";
 import {
   createSSRJazzAgent
 } from "./chunk-K4D7IMFM.js";

package/dist/inspector/{chunk-MCTB5ZJC.js → chunk-6JPVMI3V.js}

@@ -3706,14 +3706,163 @@ var StyledHeading2 = styled22("h1")`
 
 // src/inspector/pages/home.tsx
 import { styled as styled23 } from "goober";
+import { useState as useState18 } from "react";
+
+// src/inspector/viewer/delete-local-data.tsx
 import { useState as useState17 } from "react";
+import { useJazzContext } from "jazz-tools/react-core";
 import { Fragment as Fragment13, jsx as jsx38, jsxs as jsxs23 } from "react/jsx-runtime";
-function HomePage() {
+var DELETE_LOCAL_DATA_STRING = "delete my local data";
+function DeleteLocalData() {
+  const [showDeleteModal, setShowDeleteModal] = useState17(false);
+  const [confirmDeleteString, setConfirmDeleteString] = useState17("");
+  const jazzContext = useJazzContext();
+  return /* @__PURE__ */ jsxs23(Fragment13, { children: [
+    /* @__PURE__ */ jsx38(
+      Button,
+      {
+        variant: "destructive",
+        onClick: () => setShowDeleteModal(true),
+        title: "Delete my local data",
+        children: /* @__PURE__ */ jsx38(
+          "svg",
+          {
+            width: "16",
+            height: "16",
+            viewBox: "0 0 16 16",
+            fill: "none",
+            xmlns: "http://www.w3.org/2000/svg",
+            children: /* @__PURE__ */ jsx38(
+              "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__ */ jsxs23(
+      Modal,
+      {
+        isOpen: showDeleteModal,
+        onClose: () => setShowDeleteModal(false),
+        heading: "Delete Local Data",
+        showButtons: false,
+        children: [
+          /* @__PURE__ */ jsxs23(
+            "div",
+            {
+              style: {
+                margin: "0 0 1rem 0",
+                color: "var(--j-text-color)",
+                display: "flex",
+                flexDirection: "column",
+                gap: "0.5rem"
+              },
+              children: [
+                /* @__PURE__ */ jsxs23("p", { children: [
+                  "This action ",
+                  /* @__PURE__ */ jsx38("strong", { children: "cannot" }),
+                  " be undone."
+                ] }),
+                /* @__PURE__ */ jsxs23("p", { children: [
+                  "Be aware that the following data will be",
+                  " ",
+                  /* @__PURE__ */ jsx38("strong", { children: "permanently" }),
+                  " deleted:"
+                ] }),
+                /* @__PURE__ */ jsxs23("ul", { style: { listStyleType: "disc", paddingLeft: "1rem" }, children: [
+                  /* @__PURE__ */ jsxs23("li", { children: [
+                    "Unsynced data for ",
+                    /* @__PURE__ */ jsx38("strong", { children: "all apps" }),
+                    " on",
+                    " ",
+                    /* @__PURE__ */ jsx38("code", { children: window.location.origin })
+                  ] }),
+                  /* @__PURE__ */ jsx38("li", { children: "Accounts" }),
+                  /* @__PURE__ */ jsx38("li", { children: "Logged in sessions" })
+                ] }),
+                /* @__PURE__ */ jsx38("p", {})
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx38(
+            Input,
+            {
+              label: `Type "${DELETE_LOCAL_DATA_STRING}" to confirm`,
+              placeholder: DELETE_LOCAL_DATA_STRING,
+              value: confirmDeleteString,
+              onChange: (e) => {
+                setConfirmDeleteString(e.target.value);
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx38(
+            "p",
+            {
+              style: {
+                margin: "0 0 1rem 0",
+                color: "var(--j-text-color)",
+                display: "flex",
+                flexDirection: "column",
+                gap: "0.5rem"
+              },
+              children: /* @__PURE__ */ jsxs23("small", { children: [
+                "Data synced to a sync server will ",
+                /* @__PURE__ */ jsx38("strong", { children: "not" }),
+                " be deleted, and will be synced when you log in again."
+              ] })
+            }
+          ),
+          /* @__PURE__ */ jsxs23(
+            "div",
+            {
+              style: {
+                display: "flex",
+                marginTop: "0.5rem",
+                justifyContent: "flex-end",
+                gap: "0.5rem"
+              },
+              children: [
+                /* @__PURE__ */ jsx38(Button, { variant: "secondary", onClick: () => setShowDeleteModal(false), children: "Cancel" }),
+                /* @__PURE__ */ jsx38(
+                  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
+import { jsx as jsx39, jsxs as jsxs24 } from "react/jsx-runtime";
+function HomePage({ showDeleteLocalData }) {
   const { localNode, accountID } = useNode();
   const { path, setPage } = useRouter();
-  const [coValueId, setCoValueId] = useState17("");
+  const [coValueId, setCoValueId] = useState18("");
   if (!localNode || !accountID) {
-    return /* @__PURE__ */ jsx38("div", { children: "Loading..." });
+    return /* @__PURE__ */ jsx39("div", { children: "Loading..." });
   }
   const handleCoValueIdSubmit = (e) => {
     e.preventDefault();
@@ -3722,40 +3871,48 @@ function HomePage() {
     }
     setCoValueId("");
   };
-  return /* @__PURE__ */ jsx38(Fragment13, { children: /* @__PURE__ */ jsxs23(
-    CenteredForm,
-    {
-      onSubmit: handleCoValueIdSubmit,
-      "aria-hidden": path.length !== 0,
-      children: [
-        /* @__PURE__ */ jsx38(Heading, { children: "Jazz CoValue Inspector" }),
-        /* @__PURE__ */ jsx38(
-          Input,
-          {
-            label: "CoValue ID",
-            className: "font-mono",
-            hideLabel: true,
-            placeholder: "co_z1234567890abcdef123456789",
-            value: coValueId,
-            onChange: (e) => setCoValueId(e.target.value)
-          }
-        ),
-        /* @__PURE__ */ jsx38(Button, { type: "submit", variant: "primary", children: "Inspect CoValue" }),
-        /* @__PURE__ */ jsx38(OrText, { children: "or" }),
-        /* @__PURE__ */ jsx38(
-          Button,
-          {
-            variant: "secondary",
-            onClick: () => {
-              setPage(accountID);
-            },
-            children: "Inspect my account"
-          }
-        )
-      ]
-    }
-  ) });
+  return /* @__PURE__ */ jsxs24(PageContainer2, { children: [
+    /* @__PURE__ */ jsxs24(
+      CenteredForm,
+      {
+        onSubmit: handleCoValueIdSubmit,
+        "aria-hidden": path.length !== 0,
+        children: [
+          /* @__PURE__ */ jsx39(Heading, { children: "Jazz CoValue Inspector" }),
+          /* @__PURE__ */ jsx39(
+            Input,
+            {
+              label: "CoValue ID",
+              className: "font-mono",
+              hideLabel: true,
+              placeholder: "co_z1234567890abcdef123456789",
+              value: coValueId,
+              onChange: (e) => setCoValueId(e.target.value)
+            }
+          ),
+          /* @__PURE__ */ jsx39(Button, { type: "submit", variant: "primary", children: "Inspect CoValue" }),
+          /* @__PURE__ */ jsx39(OrText, { children: "or" }),
+          /* @__PURE__ */ jsx39(
+            Button,
+            {
+              variant: "secondary",
+              onClick: () => {
+                setPage(accountID);
+              },
+              children: "Inspect my account"
+            }
+          )
+        ]
+      }
+    ),
+    showDeleteLocalData && /* @__PURE__ */ jsx39(BottomRight, { children: /* @__PURE__ */ jsx39(DeleteLocalData, {}) })
+  ] });
 }
+var PageContainer2 = styled23("div")`
+  position: relative;
+  height: 100%;
+  width: 100%;
+`;
 var CenteredForm = styled23("form")`
   display: flex;
   flex-direction: column;
@@ -3771,9 +3928,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
-import { Fragment as Fragment14, jsx as jsx39 } from "react/jsx-runtime";
+import { jsx as jsx40 } from "react/jsx-runtime";
 var PageStackContainer = styled24("article")`
   position: relative;
   padding: 0 0.75rem;
@@ -3782,15 +3944,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__ */ jsx39(PageStackContainer, { children: homePage ?? /* @__PURE__ */ jsx39(HomePage, {}) });
+    return /* @__PURE__ */ jsx40(PageStackContainer, { style, children: homePage ?? /* @__PURE__ */ jsx40(HomePage, {}) });
   }
-  return /* @__PURE__ */ jsx39(Fragment14, { children: /* @__PURE__ */ jsx39(PageStackContainer, { children: localNode && page && /* @__PURE__ */ jsx39(ErrorBoundary, { title: "An error occurred while rendering this CoValue", children: /* @__PURE__ */ jsx39(
+  return /* @__PURE__ */ jsx40(PageStackContainer, { style, children: localNode && page && /* @__PURE__ */ jsx40(ErrorBoundary, { title: "An error occurred while rendering this CoValue", children: /* @__PURE__ */ jsx40(
     Page,
     {
       coId: page.coId,
@@ -3800,7 +3962,7 @@ function PageStack({ homePage }) {
       onNavigate: addPages,
       isTopLevel: index === path.length - 1
     }
-  ) }) }) });
+  ) }) });
 }
 
 // src/inspector/ui/global-styles.tsx
@@ -3885,7 +4047,7 @@ import { useState as useState19 } from "react";
 // src/inspector/viewer/breadcrumbs.tsx
 import { styled as styled26 } from "goober";
 import React7 from "react";
-import { jsx as jsx40, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx41, jsxs as jsxs25 } from "react/jsx-runtime";
 var BreadcrumbsContainer = styled26("div")`
   position: relative;
   z-index: 20;
@@ -3898,8 +4060,8 @@ var Separator = styled26("span")`
 `;
 var Breadcrumbs = () => {
   const { path, goToIndex } = useRouter();
-  return /* @__PURE__ */ jsxs24(BreadcrumbsContainer, { children: [
-    /* @__PURE__ */ jsx40(
+  return /* @__PURE__ */ jsxs25(BreadcrumbsContainer, { children: [
+    /* @__PURE__ */ jsx41(
       Button,
       {
         variant: "link",
@@ -3909,9 +4071,9 @@ var Breadcrumbs = () => {
       }
     ),
     path.map((page, index) => {
-      return /* @__PURE__ */ jsxs24(React7.Fragment, { children: [
-        /* @__PURE__ */ jsx40(Separator, { "aria-hidden": true, children: "/" }),
-        /* @__PURE__ */ jsx40(
+      return /* @__PURE__ */ jsxs25(React7.Fragment, { children: [
+        /* @__PURE__ */ jsx41(Separator, { "aria-hidden": true, children: "/" }),
+        /* @__PURE__ */ jsx41(
           Button,
           {
             variant: "link",
@@ -3925,131 +4087,13 @@ var Breadcrumbs = () => {
   ] });
 };
 
-// src/inspector/viewer/delete-local-data.tsx
-import { useState as useState18 } from "react";
-import { Fragment as Fragment15, jsx as jsx41, jsxs as jsxs25 } from "react/jsx-runtime";
-var DELETE_LOCAL_DATA_STRING = "delete my local data";
-function DeleteLocalData() {
-  const [showDeleteModal, setShowDeleteModal] = useState18(false);
-  const [confirmDeleteString, setConfirmDeleteString] = useState18("");
-  return /* @__PURE__ */ jsxs25(Fragment15, { children: [
-    /* @__PURE__ */ jsx41(Button, { variant: "destructive", onClick: () => setShowDeleteModal(true), children: "Delete my local data" }),
-    /* @__PURE__ */ jsxs25(
-      Modal,
-      {
-        isOpen: showDeleteModal,
-        onClose: () => setShowDeleteModal(false),
-        heading: "Delete Local Data",
-        showButtons: false,
-        children: [
-          /* @__PURE__ */ jsxs25(
-            "div",
-            {
-              style: {
-                margin: "0 0 1rem 0",
-                color: "var(--j-text-color)",
-                display: "flex",
-                flexDirection: "column",
-                gap: "0.5rem"
-              },
-              children: [
-                /* @__PURE__ */ jsxs25("p", { children: [
-                  "This action ",
-                  /* @__PURE__ */ jsx41("strong", { children: "cannot" }),
-                  " be undone."
-                ] }),
-                /* @__PURE__ */ jsxs25("p", { children: [
-                  "Be aware that the following data will be",
-                  " ",
-                  /* @__PURE__ */ jsx41("strong", { children: "permanently" }),
-                  " deleted:"
-                ] }),
-                /* @__PURE__ */ jsxs25("ul", { style: { listStyleType: "disc", paddingLeft: "1rem" }, children: [
-                  /* @__PURE__ */ jsxs25("li", { children: [
-                    "Unsynced data for ",
-                    /* @__PURE__ */ jsx41("strong", { children: "all apps" }),
-                    " on",
-                    " ",
-                    /* @__PURE__ */ jsx41("code", { children: window.location.origin })
-                  ] }),
-                  /* @__PURE__ */ jsx41("li", { children: "Accounts" }),
-                  /* @__PURE__ */ jsx41("li", { children: "Logged in sessions" })
-                ] }),
-                /* @__PURE__ */ jsx41("p", {})
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsx41(
-            Input,
-            {
-              label: `Type "${DELETE_LOCAL_DATA_STRING}" to confirm`,
-              placeholder: DELETE_LOCAL_DATA_STRING,
-              value: confirmDeleteString,
-              onChange: (e) => {
-                setConfirmDeleteString(e.target.value);
-              }
-            }
-          ),
-          /* @__PURE__ */ jsx41(
-            "p",
-            {
-              style: {
-                margin: "0 0 1rem 0",
-                color: "var(--j-text-color)",
-                display: "flex",
-                flexDirection: "column",
-                gap: "0.5rem"
-              },
-              children: /* @__PURE__ */ jsxs25("small", { children: [
-                "Data synced to a sync server will ",
-                /* @__PURE__ */ jsx41("strong", { children: "not" }),
-                " be deleted, and will be synced when you log in again."
-              ] })
-            }
-          ),
-          /* @__PURE__ */ jsxs25(
-            "div",
-            {
-              style: {
-                display: "flex",
-                marginTop: "0.5rem",
-                justifyContent: "flex-end",
-                gap: "0.5rem"
-              },
-              children: [
-                /* @__PURE__ */ jsx41(Button, { variant: "secondary", onClick: () => setShowDeleteModal(false), children: "Cancel" }),
-                /* @__PURE__ */ jsx41(
-                  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
-import { jsx as jsx42, jsxs as jsxs26 } from "react/jsx-runtime";
+import { Fragment as Fragment14, jsx as jsx42, jsxs as jsxs26 } from "react/jsx-runtime";
 function Header({
-  showDeleteLocalData = false,
   showClose = false,
   onClose,
+  activeTab,
+  onTabChange,
   children
 }) {
   const [coValueId, setCoValueId] = useState19("");
@@ -4062,21 +4106,59 @@ function Header({
     setCoValueId("");
   };
   return /* @__PURE__ */ jsxs26(HeaderContainer2, { children: [
-    /* @__PURE__ */ jsx42(Breadcrumbs, {}),
-    path.length !== 0 && /* @__PURE__ */ jsx42(Form, { onSubmit: handleCoValueIdSubmit, children: /* @__PURE__ */ jsx42(
-      Input,
+    activeTab && onTabChange && /* @__PURE__ */ jsxs26(TabBar, { children: [
+      /* @__PURE__ */ jsx42(
+        Tab,
+        {
+          active: activeTab === "inspector",
+          onClick: () => onTabChange("inspector"),
+          children: "Inspector"
+        }
+      ),
+      /* @__PURE__ */ jsx42(
+        Tab,
+        {
+          active: activeTab === "performance",
+          onClick: () => onTabChange("performance"),
+          children: "Performance"
+        }
+      )
+    ] }),
+    (activeTab === "inspector" || !activeTab) && /* @__PURE__ */ jsxs26(Fragment14, { children: [
+      /* @__PURE__ */ jsx42(Breadcrumbs, {}),
+      path.length !== 0 && /* @__PURE__ */ jsx42(Form, { onSubmit: handleCoValueIdSubmit, children: /* @__PURE__ */ jsx42(
+        Input,
+        {
+          label: "CoValue ID",
+          style: { fontFamily: "monospace" },
+          hideLabel: true,
+          placeholder: "co_z1234567890abcdef123456789",
+          value: coValueId,
+          onChange: (e) => setCoValueId(e.target.value)
+        }
+      ) })
+    ] }),
+    children,
+    /* @__PURE__ */ jsx42(Spacer, {}),
+    showClose && /* @__PURE__ */ jsx42(Button, { variant: "plain", type: "button", onClick: onClose, children: /* @__PURE__ */ jsx42(
+      "svg",
       {
-        label: "CoValue ID",
-        style: { fontFamily: "monospace" },
-        hideLabel: true,
-        placeholder: "co_z1234567890abcdef123456789",
-        value: coValueId,
-        onChange: (e) => setCoValueId(e.target.value)
+        width: "14",
+        height: "14",
+        viewBox: "0 0 14 14",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        children: /* @__PURE__ */ jsx42(
+          "path",
+          {
+            d: "M1 1L13 13M1 13L13 1",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round"
+          }
+        )
       }
-    ) }),
-    children,
-    showDeleteLocalData && /* @__PURE__ */ jsx42(DeleteLocalData, {}),
-    showClose && /* @__PURE__ */ jsx42(Button, { variant: "plain", type: "button", onClick: onClose, children: "Close" })
+    ) })
   ] });
 }
 var HeaderContainer2 = styled27("div")`
@@ -4089,6 +4171,42 @@ var HeaderContainer2 = styled27("div")`
 var Form = styled27("form")`
   width: 24rem;
 `;
+var TabBar = styled27("div")`
+  display: flex;
+  gap: 0.25rem;
+  background-color: var(--j-foreground);
+  border-radius: var(--j-radius-lg);
+  padding: 0.25rem;
+`;
+var Tab = styled27("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;
+
+  ${(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 = styled27("div")`
+  flex: 1;
+`;
 
 export {
   Button,
@@ -4096,13 +4214,15 @@ export {
   Icon,
   Modal,
   Input,
+  useRouter,
   NodeContext,
   NodeProvider,
   useNode,
   InMemoryRouterProvider,
   HashRouterProvider,
+  HomePage,
   PageStack,
   GlobalStyles,
   Header
 };
-//# sourceMappingURL=chunk-MCTB5ZJC.js.map
+//# sourceMappingURL=chunk-6JPVMI3V.js.map