jazz-tools 0.18.5 → 0.18.7

package/dist/index.js

@@ -37,7 +37,7 @@ import {
   randomSessionProvider,
   subscribeToCoValue,
   zodReExport_exports
-} from "./chunk-3LE7N6TH.js";
+} from "./chunk-CFAY3FMQ.js";
 
 // src/tools/auth/clerk/index.ts
 import {

package/dist/inspector/{custom-element-WCY6D3QJ.js → custom-element-G6SPZEBR.js}

@@ -1970,7 +1970,7 @@ var require_react = __commonJS({
 var require_react_dom_production = __commonJS({
   "../../node_modules/react-dom/cjs/react-dom.production.js"(exports) {
     "use strict";
-    var React8 = require_react();
+    var React7 = require_react();
     function formatProdErrorMessage(code) {
       var url = "https://react.dev/errors/" + code;
       if (1 < arguments.length) {
@@ -2010,7 +2010,7 @@ var require_react_dom_production = __commonJS({
         implementation
       };
     }
-    var ReactSharedInternals = React8.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;
+    var ReactSharedInternals = React7.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;
     function getCrossOriginStringAs(as, input) {
       if ("font" === as) return "";
       if ("string" === typeof input)
@@ -2164,7 +2164,7 @@ var require_react_dom_development = __commonJS({
         return dispatcher;
       }
       "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(Error());
-      var React8 = require_react(), Internals = {
+      var React7 = require_react(), Internals = {
         d: {
           f: noop,
           r: function() {
@@ -2182,7 +2182,7 @@ var require_react_dom_development = __commonJS({
         },
         p: 0,
         findDOMNode: null
-      }, REACT_PORTAL_TYPE = Symbol.for("react.portal"), ReactSharedInternals = React8.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;
+      }, REACT_PORTAL_TYPE = Symbol.for("react.portal"), ReactSharedInternals = React7.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;
       "function" === typeof Map && null != Map.prototype && "function" === typeof Map.prototype.forEach && "function" === typeof Set && null != Set.prototype && "function" === typeof Set.prototype.clear && "function" === typeof Set.prototype.forEach || console.error(
         "React depends on Map and Set built-in types. Make sure that you load a polyfill in older browsers. https://reactjs.org/link/react-polyfills"
       );
@@ -2390,7 +2390,7 @@ var require_react_dom_client_production = __commonJS({
   "../../node_modules/react-dom/cjs/react-dom-client.production.js"(exports) {
     "use strict";
     var Scheduler = require_scheduler();
-    var React8 = require_react();
+    var React7 = require_react();
     var ReactDOM = require_react_dom();
     function formatProdErrorMessage(code) {
       var url = "https://react.dev/errors/" + code;
@@ -2578,7 +2578,7 @@ var require_react_dom_client_production = __commonJS({
       return null;
     }
     var isArrayImpl = Array.isArray;
-    var ReactSharedInternals = React8.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;
+    var ReactSharedInternals = React7.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;
     var ReactDOMSharedInternals = ReactDOM.__DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;
     var sharedNotPendingObject = {
       pending: false,
@@ -13570,7 +13570,7 @@ var require_react_dom_client_production = __commonJS({
         0 === i && attemptExplicitHydrationTarget(target);
       }
     };
-    var isomorphicReactPackageVersion$jscomp$inline_1785 = React8.version;
+    var isomorphicReactPackageVersion$jscomp$inline_1785 = React7.version;
     if ("19.1.0" !== isomorphicReactPackageVersion$jscomp$inline_1785)
       throw Error(
         formatProdErrorMessage(
@@ -15021,7 +15021,7 @@ var require_react_dom_client_development = __commonJS({
         "number" === type && getActiveElement(node.ownerDocument) === node || node.defaultValue === "" + value || (node.defaultValue = "" + value);
       }
       function validateOptionProps(element, props) {
-        null == props.value && ("object" === typeof props.children && null !== props.children ? React8.Children.forEach(props.children, function(child) {
+        null == props.value && ("object" === typeof props.children && null !== props.children ? React7.Children.forEach(props.children, function(child) {
           null == child || "string" === typeof child || "number" === typeof child || "bigint" === typeof child || didWarnInvalidChild || (didWarnInvalidChild = true, console.error(
             "Cannot infer the option value of complex children. Pass a `value` prop or use a plain string as children to <option>."
           ));
@@ -28603,14 +28603,14 @@ var require_react_dom_client_development = __commonJS({
         ));
       }
       "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(Error());
-      var Scheduler = require_scheduler(), React8 = require_react(), ReactDOM = require_react_dom(), assign = Object.assign, REACT_LEGACY_ELEMENT_TYPE = Symbol.for("react.element"), REACT_ELEMENT_TYPE = Symbol.for("react.transitional.element"), REACT_PORTAL_TYPE = Symbol.for("react.portal"), REACT_FRAGMENT_TYPE = Symbol.for("react.fragment"), REACT_STRICT_MODE_TYPE = Symbol.for("react.strict_mode"), REACT_PROFILER_TYPE = Symbol.for("react.profiler"), REACT_PROVIDER_TYPE = Symbol.for("react.provider"), REACT_CONSUMER_TYPE = Symbol.for("react.consumer"), REACT_CONTEXT_TYPE = Symbol.for("react.context"), REACT_FORWARD_REF_TYPE = Symbol.for("react.forward_ref"), REACT_SUSPENSE_TYPE = Symbol.for("react.suspense"), REACT_SUSPENSE_LIST_TYPE = Symbol.for("react.suspense_list"), REACT_MEMO_TYPE = Symbol.for("react.memo"), REACT_LAZY_TYPE = Symbol.for("react.lazy");
+      var Scheduler = require_scheduler(), React7 = require_react(), ReactDOM = require_react_dom(), assign = Object.assign, REACT_LEGACY_ELEMENT_TYPE = Symbol.for("react.element"), REACT_ELEMENT_TYPE = Symbol.for("react.transitional.element"), REACT_PORTAL_TYPE = Symbol.for("react.portal"), REACT_FRAGMENT_TYPE = Symbol.for("react.fragment"), REACT_STRICT_MODE_TYPE = Symbol.for("react.strict_mode"), REACT_PROFILER_TYPE = Symbol.for("react.profiler"), REACT_PROVIDER_TYPE = Symbol.for("react.provider"), REACT_CONSUMER_TYPE = Symbol.for("react.consumer"), REACT_CONTEXT_TYPE = Symbol.for("react.context"), REACT_FORWARD_REF_TYPE = Symbol.for("react.forward_ref"), REACT_SUSPENSE_TYPE = Symbol.for("react.suspense"), REACT_SUSPENSE_LIST_TYPE = Symbol.for("react.suspense_list"), REACT_MEMO_TYPE = Symbol.for("react.memo"), REACT_LAZY_TYPE = Symbol.for("react.lazy");
       Symbol.for("react.scope");
       var REACT_ACTIVITY_TYPE = Symbol.for("react.activity");
       Symbol.for("react.legacy_hidden");
       Symbol.for("react.tracing_marker");
       var REACT_MEMO_CACHE_SENTINEL = Symbol.for("react.memo_cache_sentinel");
       Symbol.for("react.view_transition");
-      var MAYBE_ITERATOR_SYMBOL = Symbol.iterator, REACT_CLIENT_REFERENCE = Symbol.for("react.client.reference"), isArrayImpl = Array.isArray, ReactSharedInternals = React8.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, ReactDOMSharedInternals = ReactDOM.__DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, NotPending = Object.freeze({
+      var MAYBE_ITERATOR_SYMBOL = Symbol.iterator, REACT_CLIENT_REFERENCE = Symbol.for("react.client.reference"), isArrayImpl = Array.isArray, ReactSharedInternals = React7.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, ReactDOMSharedInternals = ReactDOM.__DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, NotPending = Object.freeze({
         pending: false,
         data: null,
         method: null,
@@ -31324,7 +31324,7 @@ var require_react_dom_client_development = __commonJS({
         }
       };
       (function() {
-        var isomorphicReactPackageVersion = React8.version;
+        var isomorphicReactPackageVersion = React7.version;
         if ("19.1.0" !== isomorphicReactPackageVersion)
           throw Error(
             'Incompatible React versions: The "react" and "react-dom" packages must have the exact same version. Instead got:\n  - react:      ' + (isomorphicReactPackageVersion + "\n  - react-dom:  19.1.0\nLearn more: https://react.dev/warnings/version-mismatch")
@@ -31720,20 +31720,20 @@ var require_react_jsx_runtime_development = __commonJS({
       function validateChildKeys(node) {
         "object" === typeof node && null !== node && node.$$typeof === REACT_ELEMENT_TYPE && node._store && (node._store.validated = 1);
       }
-      var React8 = require_react(), REACT_ELEMENT_TYPE = Symbol.for("react.transitional.element"), REACT_PORTAL_TYPE = Symbol.for("react.portal"), REACT_FRAGMENT_TYPE = Symbol.for("react.fragment"), REACT_STRICT_MODE_TYPE = Symbol.for("react.strict_mode"), REACT_PROFILER_TYPE = Symbol.for("react.profiler");
+      var React7 = require_react(), REACT_ELEMENT_TYPE = Symbol.for("react.transitional.element"), REACT_PORTAL_TYPE = Symbol.for("react.portal"), REACT_FRAGMENT_TYPE = Symbol.for("react.fragment"), REACT_STRICT_MODE_TYPE = Symbol.for("react.strict_mode"), REACT_PROFILER_TYPE = Symbol.for("react.profiler");
       Symbol.for("react.provider");
-      var REACT_CONSUMER_TYPE = Symbol.for("react.consumer"), REACT_CONTEXT_TYPE = Symbol.for("react.context"), REACT_FORWARD_REF_TYPE = Symbol.for("react.forward_ref"), REACT_SUSPENSE_TYPE = Symbol.for("react.suspense"), REACT_SUSPENSE_LIST_TYPE = Symbol.for("react.suspense_list"), REACT_MEMO_TYPE = Symbol.for("react.memo"), REACT_LAZY_TYPE = Symbol.for("react.lazy"), REACT_ACTIVITY_TYPE = Symbol.for("react.activity"), REACT_CLIENT_REFERENCE = Symbol.for("react.client.reference"), ReactSharedInternals = React8.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, hasOwnProperty = Object.prototype.hasOwnProperty, isArrayImpl = Array.isArray, createTask = console.createTask ? console.createTask : function() {
+      var REACT_CONSUMER_TYPE = Symbol.for("react.consumer"), REACT_CONTEXT_TYPE = Symbol.for("react.context"), REACT_FORWARD_REF_TYPE = Symbol.for("react.forward_ref"), REACT_SUSPENSE_TYPE = Symbol.for("react.suspense"), REACT_SUSPENSE_LIST_TYPE = Symbol.for("react.suspense_list"), REACT_MEMO_TYPE = Symbol.for("react.memo"), REACT_LAZY_TYPE = Symbol.for("react.lazy"), REACT_ACTIVITY_TYPE = Symbol.for("react.activity"), REACT_CLIENT_REFERENCE = Symbol.for("react.client.reference"), ReactSharedInternals = React7.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, hasOwnProperty = Object.prototype.hasOwnProperty, isArrayImpl = Array.isArray, createTask = console.createTask ? console.createTask : function() {
         return null;
       };
-      React8 = {
+      React7 = {
         "react-stack-bottom-frame": function(callStackForError) {
           return callStackForError();
         }
       };
       var specialPropKeyWarningShown;
       var didWarnAboutElementRef = {};
-      var unknownOwnerDebugStack = React8["react-stack-bottom-frame"].bind(
-        React8,
+      var unknownOwnerDebugStack = React7["react-stack-bottom-frame"].bind(
+        React7,
         UnknownOwner
       )();
       var unknownOwnerDebugTask = createTask(getTaskName(UnknownOwner));
@@ -31785,13 +31785,9 @@ var require_jsx_runtime = __commonJS({
 var import_client = __toESM(require_client(), 1);
 import { Account } from "jazz-tools";
 
-// src/inspector/index.ts
-var import_react17 = __toESM(require_react(), 1);
-
 // src/inspector/viewer/new-app.tsx
-var import_react15 = __toESM(require_react(), 1);
-import { styled as styled18 } from "goober";
-import { useJazzContext } from "jazz-tools/react-core";
+var import_react17 = __toESM(require_react(), 1);
+import { styled as styled19 } from "goober";
 
 // src/inspector/ui/button.tsx
 var import_react = __toESM(require_react(), 1);
@@ -31818,6 +31814,9 @@ var StyledButton = styled("button")`
           border-color: var(--j-primary-color);
           color: white;
           font-weight: 500;
+          &:hover {
+            opacity: 0.8;
+          }
         `;
     case "secondary":
       return `
@@ -31836,6 +31835,17 @@ var StyledButton = styled("button")`
             text-decoration: underline;
           }
         `;
+    case "destructive":
+      return `
+          padding: 0.375rem 0.75rem;
+          background-color: var(--j-destructive-color);
+          border-color: var(--j-destructive-color);
+          color: white;
+          font-weight: 500;
+          &:hover {
+            opacity: 0.8;
+          }
+        `;
     default:
       return "";
   }
@@ -31881,7 +31891,7 @@ var StyledInput = styled2("input")`
   box-shadow: var(--j-shadow-sm);
   font-weight: 500;
   background-color: white;
-  color: var(--text-color-strong);
+  color: var(--j-text-color-strong);
 
   @media (prefers-color-scheme: dark) {
     background-color: var(--j-foreground);
@@ -31892,7 +31902,15 @@ var Input = (0, import_react2.forwardRef)(
     const generatedId = (0, import_react2.useId)();
     const id = customId || generatedId;
     return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Container, { className, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { htmlFor: id, className: hideLabel ? "j-sr-only" : "", children: label }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "label",
+        {
+          htmlFor: id,
+          className: hideLabel ? "j-sr-only" : "",
+          style: { color: "var(--j-text-color)" },
+          children: label
+        }
+      ),
       /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(StyledInput, { ref, ...inputProps, id })
     ] });
   }
@@ -31982,9 +32000,10 @@ var StyledHeading = styled5("h1")`
 `;
 function Heading({
   children,
-  className
+  className,
+  id
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(StyledHeading, { className, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(StyledHeading, { className, id, children });
 }
 
 // src/inspector/ui/text.tsx
@@ -33583,7 +33602,7 @@ var GlobalStyles = styled16("div")`
   }
 `;
 
-// src/inspector/viewer/inpsector-button.tsx
+// src/inspector/viewer/inspector-button.tsx
 var import_jsx_runtime26 = __toESM(require_jsx_runtime(), 1);
 import { styled as styled17 } from "goober";
 var StyledInspectorButton = styled17("button")`
@@ -33682,9 +33701,246 @@ function useOpenInspector() {
   return [open, setOpen];
 }
 
-// src/inspector/viewer/new-app.tsx
+// src/inspector/ui/modal.tsx
+var import_react15 = __toESM(require_react(), 1);
+import { styled as styled18 } from "goober";
 var import_jsx_runtime27 = __toESM(require_jsx_runtime(), 1);
-var InspectorContainer = styled18("div")`
+var ModalContent = styled18("dialog")`
+  background-color: var(--j-background);
+  border-radius: var(--j-radius-lg);
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
+  border: 1px solid var(--j-border-color);
+  max-width: 32rem;
+  margin-block: auto;
+  margin-inline: auto;
+  &::backdrop {
+    background-color: rgba(0, 0, 0, 0.7);
+  }
+  
+`;
+var ModalHeader = styled18("div")`
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  padding: 1.5rem 1.5rem 0 1.5rem;
+  gap: 1rem;
+`;
+var ModalBody = styled18("div")`
+  padding: 1rem 1.5rem;
+  flex: 1;
+`;
+var ModalFooter = styled18("div")`
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.75rem;
+  padding: 0 1.5rem 1.5rem 1.5rem;
+`;
+var CloseButton = styled18("button")`
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0.25rem;
+  border-radius: var(--j-radius-sm);
+  color: var(--j-text-color);
+  font-size: 1.25rem;
+  line-height: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 2rem;
+  min-height: 2rem;
+  
+  &:hover {
+    background-color: var(--j-foreground);
+  }
+  
+  &:focus-visible {
+    outline: 2px solid var(--j-border-focus);
+    outline-offset: 2px;
+  }
+`;
+var Modal = (0, import_react15.forwardRef)(
+  ({
+    isOpen,
+    onClose,
+    heading,
+    text,
+    children,
+    confirmText = "Confirm",
+    cancelText = "Cancel",
+    onConfirm,
+    onCancel,
+    showButtons = true,
+    className
+  }, ref) => {
+    const modalRef = (0, import_react15.useRef)(null);
+    (0, import_react15.useEffect)(() => {
+      if (isOpen) {
+        modalRef.current?.showModal();
+      } else {
+        onClose();
+        modalRef.current?.close();
+      }
+    }, [isOpen, onClose]);
+    const handleConfirm = () => {
+      onConfirm?.();
+      onClose();
+    };
+    const handleCancel = () => {
+      onCancel?.();
+      onClose();
+    };
+    if (!isOpen) return null;
+    return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+      ModalContent,
+      {
+        ref: ref || modalRef,
+        className,
+        role: "dialog",
+        "aria-labelledby": "modal-heading",
+        onClose,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(ModalHeader, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Heading, { id: "modal-heading", children: heading }),
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(CloseButton, { onClick: onClose, "aria-label": "Close modal", type: "button", children: "\xD7" })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(ModalBody, { children: [
+            text && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("p", { style: { margin: "0 0 1rem 0", color: "var(--j-text-color)" }, children: text }),
+            children
+          ] }),
+          showButtons && /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(ModalFooter, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Button, { variant: "secondary", onClick: handleCancel, children: cancelText }),
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Button, { variant: "primary", onClick: handleConfirm, children: confirmText })
+          ] })
+        ]
+      }
+    );
+  }
+);
+Modal.displayName = "Modal";
+
+// src/inspector/viewer/delete-local-data.tsx
+var import_react16 = __toESM(require_react(), 1);
+var import_jsx_runtime28 = __toESM(require_jsx_runtime(), 1);
+var DELETE_LOCAL_DATA_STRING = "delete my local data";
+function DeleteLocalData() {
+  const [showDeleteModal, setShowDeleteModal] = (0, import_react16.useState)(false);
+  const [confirmDeleteString, setConfirmDeleteString] = (0, import_react16.useState)("");
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Button, { variant: "destructive", onClick: () => setShowDeleteModal(true), children: "Delete my local data" }),
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+      Modal,
+      {
+        isOpen: showDeleteModal,
+        onClose: () => setShowDeleteModal(false),
+        heading: "Delete Local Data",
+        showButtons: false,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime28.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_runtime28.jsxs)("p", { children: [
+                  "This action ",
+                  /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("strong", { children: "cannot" }),
+                  " be undone."
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("p", { children: [
+                  "Be aware that the following data will be",
+                  " ",
+                  /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("strong", { children: "permanently" }),
+                  " deleted:"
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("ul", { style: { listStyleType: "disc", paddingLeft: "1rem" }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("li", { children: [
+                    "Unsynced data for ",
+                    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("strong", { children: "all apps" }),
+                    " on",
+                    " ",
+                    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("code", { children: window.location.origin })
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("li", { children: "Accounts" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("li", { children: "Logged in sessions" })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("p", {})
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime28.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_runtime28.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_runtime28.jsxs)("small", { children: [
+                "Data synced to a sync server will ",
+                /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("strong", { children: "not" }),
+                " be deleted, and will be synced when you log in again."
+              ] })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+            "div",
+            {
+              style: {
+                display: "flex",
+                marginTop: "0.5rem",
+                justifyContent: "flex-end",
+                gap: "0.5rem"
+              },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Button, { variant: "secondary", onClick: () => setShowDeleteModal(false), children: "Cancel" }),
+                /* @__PURE__ */ (0, import_jsx_runtime28.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/new-app.tsx
+var import_jsx_runtime29 = __toESM(require_jsx_runtime(), 1);
+var InspectorContainer = styled19("div")`
   position: fixed;
   height: 50vh;
   max-height: 800px;
@@ -33701,17 +33957,17 @@ var InspectorContainer = styled18("div")`
     background-color: var(--j-background);
   }
 `;
-var HeaderContainer2 = styled18("div")`
+var HeaderContainer2 = styled19("div")`
   display: flex;
   align-items: center;
   gap: 1rem;
   padding: 0 0.75rem;
   margin: 0.75rem 0;
 `;
-var Form = styled18("form")`
+var Form = styled19("form")`
   width: 24rem;
 `;
-var InitialForm = styled18("form")`
+var InitialForm = styled19("form")`
   display: flex;
   flex-direction: column;
   position: relative;
@@ -33723,7 +33979,7 @@ var InitialForm = styled18("form")`
   max-width: 24rem;
   margin: 0 auto;
 `;
-var OrText = styled18("p")`
+var OrText = styled19("p")`
   text-align: center;
 `;
 function JazzInspectorInternal({
@@ -33732,7 +33988,7 @@ function JazzInspectorInternal({
   accountId
 }) {
   const [open, setOpen] = useOpenInspector();
-  const [coValueId, setCoValueId] = (0, import_react15.useState)("");
+  const [coValueId, setCoValueId] = (0, import_react17.useState)("");
   const { path, addPages, goToIndex, goBack, setPage } = usePagePath();
   const handleCoValueIdSubmit = (e) => {
     e.preventDefault();
@@ -33742,12 +33998,12 @@ function JazzInspectorInternal({
     setCoValueId("");
   };
   if (!open) {
-    return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(InspectorButton, { position, onClick: () => setOpen(true) });
+    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(InspectorButton, { position, onClick: () => setOpen(true) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(InspectorContainer, { as: GlobalStyles, style: { zIndex: 999 }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(HeaderContainer2, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Breadcrumbs, { path, onBreadcrumbClick: goToIndex }),
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Form, { onSubmit: handleCoValueIdSubmit, children: path.length !== 0 && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(InspectorContainer, { as: GlobalStyles, style: { zIndex: 999 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(HeaderContainer2, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Breadcrumbs, { path, onBreadcrumbClick: goToIndex }),
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Form, { onSubmit: handleCoValueIdSubmit, children: path.length !== 0 && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
         Input,
         {
           label: "CoValue ID",
@@ -33758,23 +34014,24 @@ function JazzInspectorInternal({
           onChange: (e) => setCoValueId(e.target.value)
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Button, { variant: "plain", type: "button", onClick: () => setOpen(false), children: "Close" })
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(DeleteLocalData, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Button, { variant: "plain", type: "button", onClick: () => setOpen(false), children: "Close" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
       PageStack,
       {
         path,
         node: localNode,
         goBack,
         addPages,
-        children: path.length <= 0 && /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+        children: path.length <= 0 && /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
           InitialForm,
           {
             onSubmit: handleCoValueIdSubmit,
             "aria-hidden": path.length !== 0,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Heading, { children: "Jazz CoValue Inspector" }),
-              /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Heading, { children: "Jazz CoValue Inspector" }),
+              /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
                 Input,
                 {
                   label: "CoValue ID",
@@ -33785,10 +34042,10 @@ function JazzInspectorInternal({
                   onChange: (e) => setCoValueId(e.target.value)
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Button, { type: "submit", variant: "primary", children: "Inspect CoValue" }),
-              accountId && /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_jsx_runtime27.Fragment, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(OrText, { children: "or" }),
-                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Button, { type: "submit", variant: "primary", children: "Inspect CoValue" }),
+              accountId && /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_jsx_runtime29.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(OrText, { children: "or" }),
+                /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
                   Button,
                   {
                     variant: "secondary",
@@ -33808,54 +34065,8 @@ function JazzInspectorInternal({
   ] });
 }
 
-// src/inspector/ui/select.tsx
-var import_react16 = __toESM(require_react(), 1);
-import { styled as styled19 } from "goober";
-var import_jsx_runtime28 = __toESM(require_jsx_runtime(), 1);
-var SelectContainer = styled19("div")`
-  display: grid;
-  gap: 0.25rem;
-`;
-var SelectWrapper = styled19("div")`
-  position: relative;
-  display: flex;
-  align-items: center;
-`;
-var StyledSelect = styled19("select")`
-  width: 100%;
-  border-radius: var(--j-radius-md);
-  border: 1px solid var(--j-border-color);
-  padding: 0.5rem 0.875rem 0.5rem 0.875rem;
-  padding-right: 2rem;
-  box-shadow: var(--j-shadow-sm);
-  font-weight: 500;
-  color: var(--j-text-color-strong);
-  appearance: none;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-
-  @media (prefers-color-scheme: dark) {
-    background-color: var(--j-foreground);
-  }
-`;
-var SelectIcon = styled19("span")`
-  position: absolute;
-  right: 0.5em;
-  color: var(--j-neutral-400);
-  pointer-events: none;
-
-  @media (prefers-color-scheme: dark) {
-    color: var(--j-neutral-900);
-  }
-`;
-
-// src/inspector/index.ts
-import { setup } from "goober";
-setup(import_react17.default.createElement);
-
 // src/inspector/custom-element.tsx
-var import_jsx_runtime29 = __toESM(require_jsx_runtime(), 1);
+var import_jsx_runtime30 = __toESM(require_jsx_runtime(), 1);
 var JazzInspectorElement = class extends HTMLElement {
   constructor() {
     super(...arguments);
@@ -33897,7 +34108,7 @@ var JazzInspectorElement = class extends HTMLElement {
       return;
     }
     this.root?.render(
-      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
         JazzInspectorInternal,
         {
           localNode: this.account.$jazz.localNode,
@@ -34023,4 +34234,4 @@ react/cjs/react-jsx-runtime.development.js:
    * LICENSE file in the root directory of this source tree.
    *)
 */
-//# sourceMappingURL=custom-element-WCY6D3QJ.js.map
+//# sourceMappingURL=custom-element-G6SPZEBR.js.map