jazz-tools 0.18.6 → 0.18.8

package/dist/index.js

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

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

@@ -31786,8 +31786,8 @@ var import_client = __toESM(require_client(), 1);
 import { Account } from "jazz-tools";
 
 // src/inspector/viewer/new-app.tsx
-var import_react15 = __toESM(require_react(), 1);
-import { styled as styled18 } from "goober";
+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);
@@ -31814,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 `
@@ -31832,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 "";
   }
@@ -31877,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);
@@ -31888,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 })
     ] });
   }
@@ -31978,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
@@ -33579,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")`
@@ -33678,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;
@@ -33697,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;
@@ -33719,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({
@@ -33728,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();
@@ -33738,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",
@@ -33754,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",
@@ -33781,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",
@@ -33805,7 +34066,7 @@ function JazzInspectorInternal({
 }
 
 // src/inspector/custom-element.tsx
-var import_jsx_runtime28 = __toESM(require_jsx_runtime(), 1);
+var import_jsx_runtime30 = __toESM(require_jsx_runtime(), 1);
 var JazzInspectorElement = class extends HTMLElement {
   constructor() {
     super(...arguments);
@@ -33847,7 +34108,7 @@ var JazzInspectorElement = class extends HTMLElement {
       return;
     }
     this.root?.render(
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
         JazzInspectorInternal,
         {
           localNode: this.account.$jazz.localNode,
@@ -33973,4 +34234,4 @@ react/cjs/react-jsx-runtime.development.js:
    * LICENSE file in the root directory of this source tree.
    *)
 */
-//# sourceMappingURL=custom-element-IBHKHN27.js.map
+//# sourceMappingURL=custom-element-G6SPZEBR.js.map