jazz-tools 0.19.10 → 0.19.12

package/src/inspector/tests/utils/transactions-changes.test.ts

@@ -0,0 +1,102 @@
+import { assert, describe, expect, it } from "vitest";
+import { setActiveAccount, setupJazzTestSync } from "jazz-tools/testing";
+import { co, z } from "jazz-tools";
+import * as TransactionsChanges from "../../utils/transactions-changes";
+
+describe("transactions changes", async () => {
+  const account = await setupJazzTestSync();
+  setActiveAccount(account);
+
+  describe("ambiguous values in Group's transactions", () => {
+    it("isGroupExtension should return false for a CoMap", () => {
+      const value = co.map({ test: z.string() }).create({ test: "extend" })
+        .$jazz.raw;
+
+      const transactions = value.core.verifiedTransactions;
+      expect(
+        TransactionsChanges.isGroupExtension(
+          value,
+          transactions[0]?.changes?.[0],
+        ),
+      ).toBe(false);
+    });
+
+    it("isGroupExtendRevocation should return false for a CoMap", () => {
+      const value = co.map({ test: z.string() }).create({ test: "revoked" })
+        .$jazz.raw;
+
+      const transactions = value.core.verifiedTransactions;
+      expect(
+        TransactionsChanges.isGroupExtendRevocation(
+          value,
+          transactions[0]?.changes?.[0],
+        ),
+      ).toBe(false);
+    });
+
+    it("isGroupPromotion should return false for a CoMap", () => {
+      const value = co
+        .map({ parent_co_test: z.string() })
+        .create({ parent_co_test: "foo" }).$jazz.raw;
+
+      const transactions = value.core.verifiedTransactions;
+      expect(
+        TransactionsChanges.isGroupPromotion(
+          value,
+          transactions[0]?.changes?.[0],
+        ),
+      ).toBe(false);
+    });
+
+    it("isUserPromotion should return false for a CoMap", () => {
+      const value = co.map({ everyone: z.string() }).create({ everyone: "foo" })
+        .$jazz.raw;
+
+      const transactions = value.core.verifiedTransactions;
+      expect(
+        TransactionsChanges.isUserPromotion(
+          value,
+          transactions[0]?.changes?.[0],
+        ),
+      ).toBe(false);
+    });
+
+    it("isUserPromotion should return false for a CoMap", () => {
+      const value = co.map({ everyone: z.string() }).create({ everyone: "foo" })
+        .$jazz.raw;
+
+      const transactions = value.core.verifiedTransactions;
+      expect(
+        TransactionsChanges.isUserPromotion(
+          value,
+          transactions[0]?.changes?.[0],
+        ),
+      ).toBe(false);
+
+      const value2 = co.map({ co_z123: z.string() }).create({ co_z123: "foo" })
+        .$jazz.raw;
+
+      const transactions2 = value2.core.verifiedTransactions;
+      expect(
+        TransactionsChanges.isUserPromotion(
+          value2,
+          transactions2[0]?.changes?.[0],
+        ),
+      ).toBe(false);
+    });
+
+    it("isKeyRevelation should return false for a CoMap", () => {
+      const value = co
+        .map({ "123_for_test": z.string() })
+        .create({ "123_for_test": "foo" }).$jazz.raw;
+
+      const transactions = value.core.verifiedTransactions;
+      expect(
+        TransactionsChanges.isKeyRevelation(
+          value,
+          transactions[0]?.changes?.[0],
+        ),
+      ).toBe(false);
+    });
+  });
+});

package/src/inspector/ui/icons/add-icon.tsx

@@ -12,9 +12,9 @@ export function AddIcon(props: React.SVGProps<SVGSVGElement>) {
     >
       <path
         d="M4 12H20M12 4V20"
-        stroke-width="2"
-        stroke-linecap="round"
-        stroke-linejoin="round"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
       />
     </svg>
   );

package/src/inspector/ui/modal.tsx

@@ -15,14 +15,15 @@ interface ModalProps {
   onCancel?: () => void;
   showButtons?: boolean;
   className?: string;
+  wide?: boolean;
 }
 
-const ModalContent = styled("dialog")`
+const ModalContent = styled("dialog")<{ wide?: boolean }>`
   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;
+  ${(props) => (props.wide ? "max-width: 60vw;" : "max-width: 32rem;")}
   margin-block: auto;
   margin-inline: auto;
   &::backdrop {
@@ -90,6 +91,7 @@ export const Modal = forwardRef<HTMLDialogElement, ModalProps>(
       onCancel,
       showButtons = true,
       className,
+      wide = false,
     },
     ref,
   ) => {
@@ -123,6 +125,7 @@ export const Modal = forwardRef<HTMLDialogElement, ModalProps>(
         role="dialog"
         aria-labelledby="modal-heading"
         onClose={onClose}
+        wide={wide}
       >
         <ModalHeader>
           <Heading id="modal-heading">{heading}</Heading>

package/src/inspector/utils/history.ts

@@ -62,10 +62,10 @@ export function getTransactionChanges(
     const firstChange = tx.changes[0]!;
 
     if (
-      TransactionChanges.isItemAppend(firstChange) &&
+      TransactionChanges.isItemAppend(coValue, firstChange) &&
       tx.changes.every(
         (c) =>
-          TransactionChanges.isItemAppend(c) &&
+          TransactionChanges.isItemAppend(coValue, c) &&
           areSameOpIds(c.after, firstChange.after),
       )
     ) {
@@ -84,10 +84,10 @@ export function getTransactionChanges(
     }
 
     if (
-      TransactionChanges.isItemPrepend(firstChange) &&
+      TransactionChanges.isItemPrepend(coValue, firstChange) &&
       tx.changes.every(
         (c) =>
-          TransactionChanges.isItemPrepend(c) &&
+          TransactionChanges.isItemPrepend(coValue, c) &&
           areSameOpIds(c.before, firstChange.before),
       )
     ) {
@@ -106,8 +106,8 @@ export function getTransactionChanges(
     }
 
     if (
-      TransactionChanges.isItemDeletion(firstChange) &&
-      tx.changes.every((c) => TransactionChanges.isItemDeletion(c))
+      TransactionChanges.isItemDeletion(coValue, firstChange) &&
+      tx.changes.every((c) => TransactionChanges.isItemDeletion(coValue, c))
     ) {
       const coValueBeforeDeletions = coValue.atTime(tx.madeAt - 1);
 

package/src/inspector/utils/transactions-changes.ts

@@ -14,85 +14,119 @@ import type {
 import { isCoId } from "../viewer/types";
 
 export const isGroupExtension = (
+  coValue: RawCoValue,
   change: any,
 ): change is Extract<
   MapOpPayload<`child_${string}`, "extend">,
   { op: "set" }
 > => {
+  if (coValue.core.isGroup() === false) return false;
   return change?.op === "set" && change?.value === "extend";
 };
 
 export const isGroupExtendRevocation = (
+  coValue: RawCoValue,
   change: any,
 ): change is Extract<
   MapOpPayload<`child_${string}`, "revoked">,
   { op: "set" }
 > => {
+  if (coValue.core.isGroup() === false) return false;
   return change?.op === "set" && change?.value === "revoked";
 };
 
 export const isGroupPromotion = (
+  coValue: RawCoValue,
   change: any,
 ): change is Extract<
   MapOpPayload<`parent_co_${string}`, AccountRole>,
   { op: "set" }
 > => {
+  if (coValue.core.isGroup() === false) return false;
   return change?.op === "set" && change?.key.startsWith("parent_co_");
 };
 
 export const isUserPromotion = (
+  coValue: RawCoValue,
   change: any,
 ): change is Extract<MapOpPayload<CoID<RawCoValue>, Role>, { op: "set" }> => {
+  if (coValue.core.isGroup() === false) return false;
   return (
     change?.op === "set" && (isCoId(change?.key) || change?.key === "everyone")
   );
 };
 
 export const isKeyRevelation = (
+  coValue: RawCoValue,
   change: any,
 ): change is Extract<
   MapOpPayload<`${string}_for_${string}`, string>,
   { op: "set" }
 > => {
+  if (
+    coValue.core.isGroup() === false &&
+    coValue.headerMeta?.type !== "account"
+  )
+    return false;
   return change?.op === "set" && change?.key.includes("_for_");
 };
 
 export const isPropertySet = (
+  coValue: RawCoValue,
   change: any,
 ): change is Extract<MapOpPayload<string, any>, { op: "set" }> => {
   return change?.op === "set" && "key" in change && "value" in change;
 };
 export const isPropertyDeletion = (
+  coValue: RawCoValue,
   change: any,
 ): change is Extract<MapOpPayload<string, any>, { op: "del" }> => {
   return change?.op === "del" && "key" in change;
 };
 
 export const isItemAppend = (
+  coValue: RawCoValue,
   change: any,
 ): change is Extract<ListOpPayload<any>, { op: "app" }> => {
+  if (coValue.type !== "colist" && coValue.type !== "coplaintext") return false;
   return change?.op === "app" && "after" in change && "value" in change;
 };
 export const isItemPrepend = (
+  coValue: RawCoValue,
   change: any,
 ): change is Extract<ListOpPayload<any>, { op: "pre" }> => {
+  if (coValue.type !== "colist" && coValue.type !== "coplaintext") return false;
   return change?.op === "pre" && "before" in change && "value" in change;
 };
 
 export const isItemDeletion = (
+  coValue: RawCoValue,
   change: any,
 ): change is Extract<ListOpPayload<any>, { op: "del" }> => {
+  if (coValue.type !== "colist" && coValue.type !== "coplaintext") return false;
   return change?.op === "del" && "insertion" in change;
 };
 
-export const isStreamStart = (change: any): change is BinaryStreamStart => {
+export const isStreamStart = (
+  coValue: RawCoValue,
+  change: any,
+): change is BinaryStreamStart => {
+  if (coValue.type !== "coStream") return false;
   return change?.type === "start" && "mimeType" in change;
 };
 
-export const isStreamChunk = (change: any): change is BinaryStreamChunk => {
+export const isStreamChunk = (
+  coValue: RawCoValue,
+  change: any,
+): change is BinaryStreamChunk => {
+  if (coValue.type !== "coStream") return false;
   return change?.type === "chunk" && "chunk" in change;
 };
 
-export const isStreamEnd = (change: any): change is BinaryStreamEnd => {
+export const isStreamEnd = (
+  coValue: RawCoValue,
+  change: any,
+): change is BinaryStreamEnd => {
+  if (coValue.type !== "coStream") return false;
   return change?.type === "end";
 };

package/src/inspector/viewer/breadcrumbs.tsx

@@ -1,7 +1,7 @@
 import { styled } from "goober";
 import React from "react";
 import { Button } from "../ui/button.js";
-import { PageInfo } from "./types.js";
+import { useRouter } from "../router/context.js";
 
 const BreadcrumbsContainer = styled("div")`
   position: relative;
@@ -15,21 +15,15 @@ const Separator = styled("span")`
   padding: 0 0.125rem;
 `;
 
-interface BreadcrumbsProps {
-  path: PageInfo[];
-  onBreadcrumbClick: (index: number) => void;
-}
+export const Breadcrumbs: React.FC<{}> = () => {
+  const { path, goToIndex } = useRouter();
 
-export const Breadcrumbs: React.FC<BreadcrumbsProps> = ({
-  path,
-  onBreadcrumbClick,
-}) => {
   return (
     <BreadcrumbsContainer>
       <Button
         variant="link"
         style={{ padding: "0 0.25rem" }}
-        onClick={() => onBreadcrumbClick(-1)}
+        onClick={() => goToIndex(-1)}
       >
         Home
       </Button>
@@ -40,7 +34,7 @@ export const Breadcrumbs: React.FC<BreadcrumbsProps> = ({
             <Button
               variant="link"
               style={{ padding: "0 0.25rem" }}
-              onClick={() => onBreadcrumbClick(index)}
+              onClick={() => goToIndex(index)}
             >
               {index === 0 ? page.name || "Root" : page.name}
             </Button>

package/src/inspector/viewer/header.tsx

@@ -0,0 +1,67 @@
+import { CoID, RawCoValue } from "cojson";
+import { styled } from "goober";
+import React, { type PropsWithChildren, useState } from "react";
+import { Button } from "../ui/button.js";
+import { Input } from "../ui/input.js";
+import { Breadcrumbs } from "./breadcrumbs.js";
+import { DeleteLocalData } from "./delete-local-data.js";
+import { useRouter } from "../router/context.js";
+
+export function Header({
+  showDeleteLocalData = false,
+  showClose = false,
+  onClose,
+  children,
+}: PropsWithChildren<{
+  showDeleteLocalData?: boolean;
+  showClose?: boolean;
+  onClose?: () => void;
+}>) {
+  const [coValueId, setCoValueId] = useState<CoID<RawCoValue> | "">("");
+  const { path, setPage } = useRouter();
+
+  const handleCoValueIdSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (coValueId) {
+      setPage(coValueId);
+    }
+    setCoValueId("");
+  };
+
+  return (
+    <HeaderContainer>
+      <Breadcrumbs />
+      {path.length !== 0 && (
+        <Form onSubmit={handleCoValueIdSubmit}>
+          <Input
+            label="CoValue ID"
+            style={{ fontFamily: "monospace" }}
+            hideLabel
+            placeholder="co_z1234567890abcdef123456789"
+            value={coValueId}
+            onChange={(e) => setCoValueId(e.target.value as CoID<RawCoValue>)}
+          />
+        </Form>
+      )}
+      {children}
+      {showDeleteLocalData && <DeleteLocalData />}
+      {showClose && (
+        <Button variant="plain" type="button" onClick={onClose}>
+          Close
+        </Button>
+      )}
+    </HeaderContainer>
+  );
+}
+
+const HeaderContainer = styled("div")`
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  padding: 0 0.75rem;
+  margin: 0.75rem 0;
+`;
+
+const Form = styled("form")`
+  width: 24rem;
+`;

package/src/inspector/viewer/history-view.tsx

@@ -128,7 +128,7 @@ function mapTransactionToAction(
   coValue: RawCoValue,
 ): string {
   // Group changes
-  if (TransactionChanges.isUserPromotion(change)) {
+  if (TransactionChanges.isUserPromotion(coValue, change)) {
     if (change.value === "revoked") {
       return `${change.key} has been revoked`;
     }
@@ -136,28 +136,28 @@ function mapTransactionToAction(
     return `${change.key} has been promoted to ${change.value}`;
   }
 
-  if (TransactionChanges.isGroupExtension(change)) {
+  if (TransactionChanges.isGroupExtension(coValue, change)) {
     const child = change.key.slice(6);
     return `Group became a member of ${child}`;
   }
 
-  if (TransactionChanges.isGroupExtendRevocation(change)) {
+  if (TransactionChanges.isGroupExtendRevocation(coValue, change)) {
     const child = change.key.slice(6);
     return `Group's membership of ${child} has been revoked.`;
   }
 
-  if (TransactionChanges.isGroupPromotion(change)) {
+  if (TransactionChanges.isGroupPromotion(coValue, change)) {
     const parent = change.key.slice(7);
     return `Group ${parent} has been promoted to ${change.value}`;
   }
 
-  if (TransactionChanges.isKeyRevelation(change)) {
+  if (TransactionChanges.isKeyRevelation(coValue, change)) {
     const [key, target] = change.key.split("_for_");
     return `Key "${key}" has been revealed to "${target}"`;
   }
 
   // coList changes
-  if (TransactionChanges.isItemAppend(change)) {
+  if (TransactionChanges.isItemAppend(coValue, change)) {
     if (change.after === "start") {
       return `"${change.value}" has been appended`;
     }
@@ -171,7 +171,7 @@ function mapTransactionToAction(
     return `"${change.value}" has been inserted after "${(after as any).value}"`;
   }
 
-  if (TransactionChanges.isItemPrepend(change)) {
+  if (TransactionChanges.isItemPrepend(coValue, change)) {
     if (change.before === "end") {
       return `"${change.value}" has been prepended`;
     }
@@ -185,7 +185,7 @@ function mapTransactionToAction(
     return `"${change.value}" has been inserted before "${(before as any).value}"`;
   }
 
-  if (TransactionChanges.isItemDeletion(change)) {
+  if (TransactionChanges.isItemDeletion(coValue, change)) {
     const insertion = findListChange(change.insertion, coValue);
     if (insertion === undefined) {
       return `An undefined item has been deleted`;
@@ -195,24 +195,24 @@ function mapTransactionToAction(
   }
 
   // coStream changes
-  if (TransactionChanges.isStreamStart(change)) {
+  if (TransactionChanges.isStreamStart(coValue, change)) {
     return `Stream started with mime type "${change.mimeType}" and file name "${change.fileName}"`;
   }
 
-  if (TransactionChanges.isStreamChunk(change)) {
+  if (TransactionChanges.isStreamChunk(coValue, change)) {
     return `Stream chunk added`;
   }
 
-  if (TransactionChanges.isStreamEnd(change)) {
+  if (TransactionChanges.isStreamEnd(coValue, change)) {
     return `Stream ended`;
   }
 
   // coMap changes
-  if (TransactionChanges.isPropertySet(change)) {
+  if (TransactionChanges.isPropertySet(coValue, change)) {
     return `Property "${change.key}" has been set to ${JSON.stringify(change.value)}`;
   }
 
-  if (TransactionChanges.isPropertyDeletion(change)) {
+  if (TransactionChanges.isPropertyDeletion(coValue, change)) {
     return `Property "${change.key}" has been deleted`;
   }
 

package/src/inspector/viewer/page-stack.tsx

@@ -2,23 +2,11 @@ import { CoID, LocalNode, RawCoValue } from "cojson";
 import { styled } from "goober";
 import { Page } from "./page.js";
 import { ErrorBoundary } from "../ui/error-boundary.js";
+import { useRouter } from "../router/context.js";
+import { useNode } from "../contexts/node.js";
+import { HomePage } from "../pages/home.js";
 
-// Define the structure of a page in the path
-interface PageInfo {
-  coId: CoID<RawCoValue>;
-  name?: string;
-}
-
-// Props for the PageStack component
-interface PageStackProps {
-  path: PageInfo[];
-  node?: LocalNode | null;
-  goBack: () => void;
-  addPages: (pages: PageInfo[]) => void;
-  children?: React.ReactNode;
-}
-
-const PageStackContainer = styled("div")`
+const PageStackContainer = styled("article")`
   position: relative;
   padding: 0 0.75rem;
   overflow-y: auto;
@@ -27,25 +15,29 @@ const PageStackContainer = styled("div")`
   font-size: 16px;
 `;
 
-export function PageStack({
-  path,
-  node,
-  goBack,
-  addPages,
-  children,
-}: PageStackProps) {
+type PageStackProps = {
+  homePage?: React.ReactNode;
+};
+
+export function PageStack({ homePage }: PageStackProps) {
+  const { path, addPages, goBack } = useRouter();
+  const { localNode } = useNode();
+
   const page = path[path.length - 1];
   const index = path.length - 1;
 
+  if (path.length <= 0) {
+    return <PageStackContainer>{homePage ?? <HomePage />}</PageStackContainer>;
+  }
+
   return (
     <>
       <PageStackContainer>
-        {children}
-        {node && page && (
+        {localNode && page && (
           <ErrorBoundary title="An error occurred while rendering this CoValue">
             <Page
               coId={page.coId}
-              node={node}
+              node={localNode}
               name={page.name || page.coId}
               onHeaderClick={goBack}
               onNavigate={addPages}

package/src/inspector/viewer/page.tsx

@@ -6,7 +6,6 @@ import {
   RawCoPlainText,
   RawCoStream,
   RawCoValue,
-  RawGroup,
 } from "cojson";
 import { styled } from "goober";
 import React from "react";

package/src/react/provider.tsx

@@ -58,6 +58,9 @@ export function JazzReactProvider<
   );
   const logoutReplacementActiveRef = useRef(false);
   logoutReplacementActiveRef.current = Boolean(logOutReplacement);
+  const onAnonymousAccountDiscardedEnabled = Boolean(
+    onAnonymousAccountDiscarded,
+  );
 
   const value = React.useSyncExternalStore<
     JazzContextType<InstanceOfSchema<S>> | undefined
@@ -74,7 +77,9 @@ export function JazzReactProvider<
           logOutReplacement: logoutReplacementActiveRef.current
             ? logOutReplacementRefCallback
             : undefined,
-          onAnonymousAccountDiscarded: onAnonymousAccountDiscardedRefCallback,
+          onAnonymousAccountDiscarded: onAnonymousAccountDiscardedEnabled
+            ? onAnonymousAccountDiscardedRefCallback
+            : undefined,
         } satisfies JazzContextManagerProps<S>;
 
         if (contextManager.propsChanged(props)) {

package/src/react-core/hooks.ts

@@ -489,7 +489,7 @@ export function useSuspenseCoState<
     throw new Error("Subscription not found");
   }
 
-  use(subscription.getPromise());
+  use(subscription.getCachedPromise());
 
   const getCurrentValue = () => {
     const value = subscription.getCurrentValue();
@@ -824,7 +824,7 @@ export function useSuspenseAccount<
     );
   }
 
-  use(subscription.getPromise());
+  use(subscription.getCachedPromise());
 
   const getCurrentValue = () => {
     const value = subscription.getCurrentValue();

package/src/react-core/tests/useSuspenseCoState.test.tsx

@@ -370,6 +370,53 @@ describe("useSuspenseCoState", () => {
     });
   });
 
+  it("should throw error when CoValue becomes unauthorized", async () => {
+    const TestMap = co.map({
+      value: z.string(),
+    });
+
+    const group = Group.create();
+    group.addMember("everyone", "reader");
+
+    // Create CoValue owned by another account without sharing
+    const map = TestMap.create(
+      {
+        value: "123",
+      },
+      group,
+    );
+
+    await createJazzTestAccount({
+      isCurrentActiveAccount: true,
+    });
+
+    const TestComponent = () => {
+      const value = useSuspenseCoState(TestMap, map.$jazz.id);
+      return <div>{value.value}</div>;
+    };
+
+    const { container } = await act(async () => {
+      return render(
+        <ErrorBoundary fallback={<div>Error!</div>}>
+          <Suspense fallback={<div>Loading...</div>}>
+            <TestComponent />
+          </Suspense>
+        </ErrorBoundary>,
+      );
+    });
+    await waitFor(() => {
+      expect(container.textContent).toContain("123");
+      expect(container.textContent).not.toContain("Loading...");
+    });
+
+    group.removeMember("everyone");
+
+    // Wait for error to be thrown (unauthorized access)
+    await waitFor(() => {
+      expect(container.textContent).toContain("Error!");
+    });
+  });
+
   it("should update value when CoValue changes", async () => {
     const TestMap = co.map({
       value: z.string(),