jazz-tools 0.18.6 → 0.18.7

package/dist/inspector/index.d.ts

@@ -9,7 +9,7 @@ export { Icon } from "./ui/icon.js";
 export { GlobalStyles } from "./ui/global-styles.js";
 export { resolveCoValue, useResolvedCoValue, } from "./viewer/use-resolve-covalue.js";
 export type { PageInfo } from "./viewer/types.js";
-import { Position } from "./viewer/inpsector-button.js";
+import { Position } from "./viewer/inspector-button.js";
 export declare function JazzInspector({ position }: {
     position?: Position;
 }): import("react/jsx-runtime").JSX.Element | null;

package/dist/inspector/index.js

@@ -4,8 +4,8 @@
 import React7 from "react";
 
 // src/inspector/viewer/new-app.tsx
-import { styled as styled18 } from "goober";
-import { useState as useState9 } from "react";
+import { styled as styled19 } from "goober";
+import { useState as useState10 } from "react";
 
 // src/inspector/ui/button.tsx
 import { styled } from "goober";
@@ -32,6 +32,9 @@ var StyledButton = styled("button")`
           border-color: var(--j-primary-color);
           color: white;
           font-weight: 500;
+          &:hover {
+            opacity: 0.8;
+          }
         `;
     case "secondary":
       return `
@@ -50,6 +53,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 "";
   }
@@ -95,7 +109,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);
@@ -106,7 +120,15 @@ var Input = forwardRef2(
     const generatedId = useId();
     const id = customId || generatedId;
     return /* @__PURE__ */ jsxs(Container, { className, children: [
-      /* @__PURE__ */ jsx2("label", { htmlFor: id, className: hideLabel ? "j-sr-only" : "", children: label }),
+      /* @__PURE__ */ jsx2(
+        "label",
+        {
+          htmlFor: id,
+          className: hideLabel ? "j-sr-only" : "",
+          style: { color: "var(--j-text-color)" },
+          children: label
+        }
+      ),
       /* @__PURE__ */ jsx2(StyledInput, { ref, ...inputProps, id })
     ] });
   }
@@ -196,9 +218,10 @@ var StyledHeading = styled5("h1")`
 `;
 function Heading({
   children,
-  className
+  className,
+  id
 }) {
-  return /* @__PURE__ */ jsx5(StyledHeading, { className, children });
+  return /* @__PURE__ */ jsx5(StyledHeading, { className, id, children });
 }
 
 // src/inspector/ui/text.tsx
@@ -1797,7 +1820,7 @@ var GlobalStyles = styled16("div")`
   }
 `;
 
-// src/inspector/viewer/inpsector-button.tsx
+// src/inspector/viewer/inspector-button.tsx
 import { styled as styled17 } from "goober";
 import { jsx as jsx25, jsxs as jsxs15 } from "react/jsx-runtime";
 var StyledInspectorButton = styled17("button")`
@@ -1896,9 +1919,246 @@ function useOpenInspector() {
   return [open, setOpen];
 }
 
+// src/inspector/ui/modal.tsx
+import { styled as styled18 } from "goober";
+import { forwardRef as forwardRef3, useEffect as useEffect7, useRef } from "react";
+import { jsx as jsx26, jsxs as jsxs16 } from "react/jsx-runtime";
+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 = forwardRef3(
+  ({
+    isOpen,
+    onClose,
+    heading,
+    text,
+    children,
+    confirmText = "Confirm",
+    cancelText = "Cancel",
+    onConfirm,
+    onCancel,
+    showButtons = true,
+    className
+  }, ref) => {
+    const modalRef = useRef(null);
+    useEffect7(() => {
+      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__ */ jsxs16(
+      ModalContent,
+      {
+        ref: ref || modalRef,
+        className,
+        role: "dialog",
+        "aria-labelledby": "modal-heading",
+        onClose,
+        children: [
+          /* @__PURE__ */ jsxs16(ModalHeader, { children: [
+            /* @__PURE__ */ jsx26(Heading, { id: "modal-heading", children: heading }),
+            /* @__PURE__ */ jsx26(CloseButton, { onClick: onClose, "aria-label": "Close modal", type: "button", children: "\xD7" })
+          ] }),
+          /* @__PURE__ */ jsxs16(ModalBody, { children: [
+            text && /* @__PURE__ */ jsx26("p", { style: { margin: "0 0 1rem 0", color: "var(--j-text-color)" }, children: text }),
+            children
+          ] }),
+          showButtons && /* @__PURE__ */ jsxs16(ModalFooter, { children: [
+            /* @__PURE__ */ jsx26(Button, { variant: "secondary", onClick: handleCancel, children: cancelText }),
+            /* @__PURE__ */ jsx26(Button, { variant: "primary", onClick: handleConfirm, children: confirmText })
+          ] })
+        ]
+      }
+    );
+  }
+);
+Modal.displayName = "Modal";
+
+// src/inspector/viewer/delete-local-data.tsx
+import { useState as useState9 } from "react";
+import { Fragment as Fragment11, jsx as jsx27, jsxs as jsxs17 } from "react/jsx-runtime";
+var DELETE_LOCAL_DATA_STRING = "delete my local data";
+function DeleteLocalData() {
+  const [showDeleteModal, setShowDeleteModal] = useState9(false);
+  const [confirmDeleteString, setConfirmDeleteString] = useState9("");
+  return /* @__PURE__ */ jsxs17(Fragment11, { children: [
+    /* @__PURE__ */ jsx27(Button, { variant: "destructive", onClick: () => setShowDeleteModal(true), children: "Delete my local data" }),
+    /* @__PURE__ */ jsxs17(
+      Modal,
+      {
+        isOpen: showDeleteModal,
+        onClose: () => setShowDeleteModal(false),
+        heading: "Delete Local Data",
+        showButtons: false,
+        children: [
+          /* @__PURE__ */ jsxs17(
+            "div",
+            {
+              style: {
+                margin: "0 0 1rem 0",
+                color: "var(--j-text-color)",
+                display: "flex",
+                flexDirection: "column",
+                gap: "0.5rem"
+              },
+              children: [
+                /* @__PURE__ */ jsxs17("p", { children: [
+                  "This action ",
+                  /* @__PURE__ */ jsx27("strong", { children: "cannot" }),
+                  " be undone."
+                ] }),
+                /* @__PURE__ */ jsxs17("p", { children: [
+                  "Be aware that the following data will be",
+                  " ",
+                  /* @__PURE__ */ jsx27("strong", { children: "permanently" }),
+                  " deleted:"
+                ] }),
+                /* @__PURE__ */ jsxs17("ul", { style: { listStyleType: "disc", paddingLeft: "1rem" }, children: [
+                  /* @__PURE__ */ jsxs17("li", { children: [
+                    "Unsynced data for ",
+                    /* @__PURE__ */ jsx27("strong", { children: "all apps" }),
+                    " on",
+                    " ",
+                    /* @__PURE__ */ jsx27("code", { children: window.location.origin })
+                  ] }),
+                  /* @__PURE__ */ jsx27("li", { children: "Accounts" }),
+                  /* @__PURE__ */ jsx27("li", { children: "Logged in sessions" })
+                ] }),
+                /* @__PURE__ */ jsx27("p", {})
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx27(
+            Input,
+            {
+              label: `Type "${DELETE_LOCAL_DATA_STRING}" to confirm`,
+              placeholder: DELETE_LOCAL_DATA_STRING,
+              value: confirmDeleteString,
+              onChange: (e) => {
+                setConfirmDeleteString(e.target.value);
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx27(
+            "p",
+            {
+              style: {
+                margin: "0 0 1rem 0",
+                color: "var(--j-text-color)",
+                display: "flex",
+                flexDirection: "column",
+                gap: "0.5rem"
+              },
+              children: /* @__PURE__ */ jsxs17("small", { children: [
+                "Data synced to a sync server will ",
+                /* @__PURE__ */ jsx27("strong", { children: "not" }),
+                " be deleted, and will be synced when you log in again."
+              ] })
+            }
+          ),
+          /* @__PURE__ */ jsxs17(
+            "div",
+            {
+              style: {
+                display: "flex",
+                marginTop: "0.5rem",
+                justifyContent: "flex-end",
+                gap: "0.5rem"
+              },
+              children: [
+                /* @__PURE__ */ jsx27(Button, { variant: "secondary", onClick: () => setShowDeleteModal(false), children: "Cancel" }),
+                /* @__PURE__ */ jsx27(
+                  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
-import { Fragment as Fragment11, jsx as jsx26, jsxs as jsxs16 } from "react/jsx-runtime";
-var InspectorContainer = styled18("div")`
+import { Fragment as Fragment12, jsx as jsx28, jsxs as jsxs18 } from "react/jsx-runtime";
+var InspectorContainer = styled19("div")`
   position: fixed;
   height: 50vh;
   max-height: 800px;
@@ -1915,17 +2175,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;
@@ -1937,7 +2197,7 @@ var InitialForm = styled18("form")`
   max-width: 24rem;
   margin: 0 auto;
 `;
-var OrText = styled18("p")`
+var OrText = styled19("p")`
   text-align: center;
 `;
 function JazzInspectorInternal({
@@ -1946,7 +2206,7 @@ function JazzInspectorInternal({
   accountId
 }) {
   const [open, setOpen] = useOpenInspector();
-  const [coValueId, setCoValueId] = useState9("");
+  const [coValueId, setCoValueId] = useState10("");
   const { path, addPages, goToIndex, goBack, setPage } = usePagePath();
   const handleCoValueIdSubmit = (e) => {
     e.preventDefault();
@@ -1956,12 +2216,12 @@ function JazzInspectorInternal({
     setCoValueId("");
   };
   if (!open) {
-    return /* @__PURE__ */ jsx26(InspectorButton, { position, onClick: () => setOpen(true) });
+    return /* @__PURE__ */ jsx28(InspectorButton, { position, onClick: () => setOpen(true) });
   }
-  return /* @__PURE__ */ jsxs16(InspectorContainer, { as: GlobalStyles, style: { zIndex: 999 }, children: [
-    /* @__PURE__ */ jsxs16(HeaderContainer2, { children: [
-      /* @__PURE__ */ jsx26(Breadcrumbs, { path, onBreadcrumbClick: goToIndex }),
-      /* @__PURE__ */ jsx26(Form, { onSubmit: handleCoValueIdSubmit, children: path.length !== 0 && /* @__PURE__ */ jsx26(
+  return /* @__PURE__ */ jsxs18(InspectorContainer, { as: GlobalStyles, style: { zIndex: 999 }, children: [
+    /* @__PURE__ */ jsxs18(HeaderContainer2, { children: [
+      /* @__PURE__ */ jsx28(Breadcrumbs, { path, onBreadcrumbClick: goToIndex }),
+      /* @__PURE__ */ jsx28(Form, { onSubmit: handleCoValueIdSubmit, children: path.length !== 0 && /* @__PURE__ */ jsx28(
         Input,
         {
           label: "CoValue ID",
@@ -1972,23 +2232,24 @@ function JazzInspectorInternal({
           onChange: (e) => setCoValueId(e.target.value)
         }
       ) }),
-      /* @__PURE__ */ jsx26(Button, { variant: "plain", type: "button", onClick: () => setOpen(false), children: "Close" })
+      /* @__PURE__ */ jsx28(DeleteLocalData, {}),
+      /* @__PURE__ */ jsx28(Button, { variant: "plain", type: "button", onClick: () => setOpen(false), children: "Close" })
     ] }),
-    /* @__PURE__ */ jsx26(
+    /* @__PURE__ */ jsx28(
       PageStack,
       {
         path,
         node: localNode,
         goBack,
         addPages,
-        children: path.length <= 0 && /* @__PURE__ */ jsxs16(
+        children: path.length <= 0 && /* @__PURE__ */ jsxs18(
           InitialForm,
           {
             onSubmit: handleCoValueIdSubmit,
             "aria-hidden": path.length !== 0,
             children: [
-              /* @__PURE__ */ jsx26(Heading, { children: "Jazz CoValue Inspector" }),
-              /* @__PURE__ */ jsx26(
+              /* @__PURE__ */ jsx28(Heading, { children: "Jazz CoValue Inspector" }),
+              /* @__PURE__ */ jsx28(
                 Input,
                 {
                   label: "CoValue ID",
@@ -1999,10 +2260,10 @@ function JazzInspectorInternal({
                   onChange: (e) => setCoValueId(e.target.value)
                 }
               ),
-              /* @__PURE__ */ jsx26(Button, { type: "submit", variant: "primary", children: "Inspect CoValue" }),
-              accountId && /* @__PURE__ */ jsxs16(Fragment11, { children: [
-                /* @__PURE__ */ jsx26(OrText, { children: "or" }),
-                /* @__PURE__ */ jsx26(
+              /* @__PURE__ */ jsx28(Button, { type: "submit", variant: "primary", children: "Inspect CoValue" }),
+              accountId && /* @__PURE__ */ jsxs18(Fragment12, { children: [
+                /* @__PURE__ */ jsx28(OrText, { children: "or" }),
+                /* @__PURE__ */ jsx28(
                   Button,
                   {
                     variant: "secondary",
@@ -2023,19 +2284,19 @@ function JazzInspectorInternal({
 }
 
 // src/inspector/ui/select.tsx
-import { styled as styled19 } from "goober";
+import { styled as styled20 } from "goober";
 import { useId as useId2 } from "react";
-import { jsx as jsx27, jsxs as jsxs17 } from "react/jsx-runtime";
-var SelectContainer = styled19("div")`
+import { jsx as jsx29, jsxs as jsxs19 } from "react/jsx-runtime";
+var SelectContainer = styled20("div")`
   display: grid;
   gap: 0.25rem;
 `;
-var SelectWrapper = styled19("div")`
+var SelectWrapper = styled20("div")`
   position: relative;
   display: flex;
   align-items: center;
 `;
-var StyledSelect = styled19("select")`
+var StyledSelect = styled20("select")`
   width: 100%;
   border-radius: var(--j-radius-md);
   border: 1px solid var(--j-border-color);
@@ -2053,7 +2314,7 @@ var StyledSelect = styled19("select")`
     background-color: var(--j-foreground);
   }
 `;
-var SelectIcon = styled19("span")`
+var SelectIcon = styled20("span")`
   position: absolute;
   right: 0.5em;
   color: var(--j-neutral-400);
@@ -2067,11 +2328,11 @@ function Select(props) {
   const { label, hideLabel, id: customId, className, ...selectProps } = props;
   const generatedId = useId2();
   const id = customId || generatedId;
-  return /* @__PURE__ */ jsxs17(SelectContainer, { className, children: [
-    /* @__PURE__ */ jsx27("label", { htmlFor: id, className: hideLabel ? "j-sr-only" : "", children: label }),
-    /* @__PURE__ */ jsxs17(SelectWrapper, { children: [
-      /* @__PURE__ */ jsx27(StyledSelect, { ...selectProps, id, children: props.children }),
-      /* @__PURE__ */ jsx27(SelectIcon, { children: /* @__PURE__ */ jsx27(Icon, { name: "chevronDown", size: "sm" }) })
+  return /* @__PURE__ */ jsxs19(SelectContainer, { className, children: [
+    /* @__PURE__ */ jsx29("label", { htmlFor: id, className: hideLabel ? "j-sr-only" : "", children: label }),
+    /* @__PURE__ */ jsxs19(SelectWrapper, { children: [
+      /* @__PURE__ */ jsx29(StyledSelect, { ...selectProps, id, children: props.children }),
+      /* @__PURE__ */ jsx29(SelectIcon, { children: /* @__PURE__ */ jsx29(Icon, { name: "chevronDown", size: "sm" }) })
     ] })
   ] });
 }
@@ -2079,13 +2340,13 @@ function Select(props) {
 // src/inspector/index.tsx
 import { setup } from "goober";
 import { useJazzContext } from "jazz-tools/react-core";
-import { jsx as jsx28 } from "react/jsx-runtime";
+import { jsx as jsx30 } from "react/jsx-runtime";
 function JazzInspector({ position = "right" }) {
   const context = useJazzContext();
   const localNode = context.node;
   const me = "me" in context ? context.me : void 0;
   if (process.env.NODE_ENV !== "development") return null;
-  return /* @__PURE__ */ jsx28(
+  return /* @__PURE__ */ jsx30(
     JazzInspectorInternal,
     {
       position,