jazz-tools 0.18.29 → 0.18.30

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

@@ -1,5 +1,13 @@
-import { JsonObject, LocalNode, RawAccount } from "cojson";
+import {
+  Everyone,
+  JsonObject,
+  LocalNode,
+  RawAccount,
+  RawCoValue,
+  RawGroup,
+} from "cojson";
 import { CoID } from "cojson";
+import { useState } from "react";
 import {
   Table,
   TableBody,
@@ -8,60 +16,336 @@ import {
   TableHeader,
   TableRow,
 } from "../ui/table.js";
-import { Text } from "../ui/text.js";
 import { AccountOrGroupText } from "./account-or-group-text.js";
 import { RawDataCard } from "./raw-data-card.js";
 import { PageInfo, isCoId } from "./types.js";
+import { Button, Icon, Modal, Input, Select } from "../ui/index.js";
+
+function partitionMembers(data: Record<string, string>) {
+  const everyone = Object.entries(data)
+    .filter(([key]) => key === "everyone")
+    .map(([key, value]) => ({
+      id: key as CoID<RawCoValue>,
+      role: value as string,
+    }));
+
+  const members = Object.entries(data)
+    .filter(([key]) => isCoId(key))
+    .map(([key, value]) => ({
+      id: key as CoID<RawCoValue>,
+      role: value,
+    }));
+
+  const parentGroups = Object.entries(data)
+    .filter(([key]) => key.startsWith("parent_co_"))
+    .map(([key, value]) => ({
+      id: key.slice(7) as CoID<RawCoValue>,
+      role: value,
+    }));
+
+  const childGroups = Object.entries(data)
+    .filter(
+      ([key, value]) => key.startsWith("child_co_") && value !== "revoked",
+    )
+    .map(([key, value]) => ({
+      id: key.slice(6) as CoID<RawCoValue>,
+      role: value,
+    }));
+
+  return { everyone, members, parentGroups, childGroups };
+}
 
 export function GroupView({
+  coValue,
   data,
   onNavigate,
   node,
 }: {
+  coValue: RawCoValue;
   data: JsonObject;
   onNavigate: (pages: PageInfo[]) => void;
   node: LocalNode;
 }) {
+  const [addMemberType, setAddMemberType] = useState<
+    null | "account" | "group"
+  >(null);
+
+  const { everyone, members, parentGroups, childGroups } = partitionMembers(
+    data as Record<string, string>,
+  );
+
+  const onRemoveMember = async (id: CoID<RawCoValue>) => {
+    if (confirm("Are you sure you want to remove this member?") === false) {
+      return;
+    }
+    try {
+      const group = await node.load(coValue.id);
+      if (group === "unavailable") {
+        throw new Error("Group not found");
+      }
+      const rawGroup = group as RawGroup;
+      rawGroup.removeMember(id as any);
+    } catch (error) {
+      console.error(error);
+      throw error;
+    }
+  };
+
+  const onRemoveGroup = async (id: CoID<RawCoValue>) => {
+    if (confirm("Are you sure you want to remove this group?") === false) {
+      return;
+    }
+    try {
+      const group = await node.load(coValue.id);
+      if (group === "unavailable") {
+        throw new Error("Group not found");
+      }
+      const rawGroup = group as RawGroup;
+      const targetGroup = await node.load(id);
+      if (targetGroup === "unavailable") {
+        throw new Error("Group not found");
+      }
+      const rawTargetGroup = targetGroup as RawGroup;
+      rawGroup.revokeExtend(rawTargetGroup);
+    } catch (error) {
+      console.error(error);
+      throw error;
+    }
+  };
+
+  const handleAddMemberSubmit = async (
+    event: React.FormEvent<HTMLFormElement>,
+  ) => {
+    event.preventDefault();
+    const form = event.currentTarget;
+
+    const memberId = (form.elements.namedItem("memberId") as HTMLInputElement)
+      ?.value;
+    const role = (form.elements.namedItem("role") as HTMLSelectElement)?.value;
+
+    try {
+      const group = await node.load(coValue.id);
+      if (group === "unavailable") {
+        throw new Error("Group not found");
+      }
+
+      const rawGroup = group as RawGroup;
+
+      // Adding an account
+      if (addMemberType === "account") {
+        let rawAccount: RawAccount | Everyone = "everyone";
+
+        if (memberId !== "everyone") {
+          const account = await node.load(memberId as CoID<RawCoValue>);
+          if (account === "unavailable") {
+            throw new Error("Account not found");
+          }
+          rawAccount = account as RawAccount;
+        }
+
+        rawGroup.addMember(rawAccount, role as "reader" | "writer" | "admin");
+      }
+      // Adding a group
+      else if (addMemberType === "group") {
+        const targetGroup = await node.load(memberId as CoID<RawCoValue>);
+        if (targetGroup === "unavailable") {
+          throw new Error("Group not found");
+        }
+
+        const rawTargetGroup = targetGroup as RawGroup;
+        rawGroup.extend(
+          rawTargetGroup,
+          role as "reader" | "writer" | "admin" | "inherit",
+        );
+      }
+
+      setAddMemberType(null);
+    } catch (error: any) {
+      console.error(error);
+      alert(`Failed to add ${addMemberType}: ${error.message}`);
+    }
+  };
+
   return (
     <>
-      <Text strong>Members</Text>
-
       <Table>
         <TableHead>
           <TableRow>
-            <TableHeader>Account</TableHeader>
+            <TableHeader>Member</TableHeader>
             <TableHeader>Permission</TableHeader>
+            <TableHeader></TableHeader>
           </TableRow>
         </TableHead>
         <TableBody>
-          {"everyone" in data && typeof data.everyone === "string" ? (
-            <TableRow>
-              <TableCell>everyone</TableCell>
-              <TableCell>{data.everyone}</TableCell>
+          {everyone.map((member) => (
+            <TableRow key={member.id}>
+              <TableCell>{member.id}</TableCell>
+              <TableCell>{member.role}</TableCell>
+              <TableCell>
+                {member.role !== "revoked" && (
+                  <Button
+                    variant="secondary"
+                    onClick={() => onRemoveMember(member.id)}
+                  >
+                    <Icon name="delete" />
+                  </Button>
+                )}
+              </TableCell>
+            </TableRow>
+          ))}
+          {members.map((member) => (
+            <TableRow key={member.id}>
+              <TableCell>
+                <AccountOrGroupText
+                  coId={member.id}
+                  node={node}
+                  showId
+                  onClick={() => {
+                    onNavigate([{ coId: member.id, name: member.id }]);
+                  }}
+                />
+              </TableCell>
+              <TableCell>{member.role}</TableCell>
+              <TableCell>
+                {member.role !== "revoked" && (
+                  <Button
+                    variant="secondary"
+                    onClick={() => onRemoveMember(member.id)}
+                  >
+                    <Icon name="delete" />
+                  </Button>
+                )}
+              </TableCell>
+            </TableRow>
+          ))}
+          {parentGroups.map((group) => (
+            <TableRow key={group.id}>
+              <TableCell>
+                <AccountOrGroupText
+                  coId={group.id}
+                  node={node}
+                  showId
+                  onClick={() => {
+                    onNavigate([{ coId: group.id, name: group.id }]);
+                  }}
+                />
+              </TableCell>
+              <TableCell>{group.role}</TableCell>
+              <TableCell>
+                {group.role !== "revoked" && (
+                  <Button
+                    variant="secondary"
+                    onClick={() => onRemoveGroup(group.id)}
+                  >
+                    <Icon name="delete" />
+                  </Button>
+                )}
+              </TableCell>
             </TableRow>
-          ) : null}
+          ))}
+        </TableBody>
+      </Table>
 
-          {Object.entries(data).map(([key, value]) =>
-            isCoId(key) ? (
-              <TableRow key={key}>
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "flex-end",
+          gap: "0.75rem",
+          marginTop: "1rem",
+        }}
+      >
+        <Button variant="primary" onClick={() => setAddMemberType("account")}>
+          Add Account
+        </Button>
+        <Button variant="primary" onClick={() => setAddMemberType("group")}>
+          Add Group
+        </Button>
+      </div>
+
+      {childGroups.length > 0 && (
+        <Table>
+          <TableHead>
+            <TableRow>
+              <TableHeader>Member of</TableHeader>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {childGroups.map((group) => (
+              <TableRow key={group.id}>
                 <TableCell>
                   <AccountOrGroupText
-                    coId={key as CoID<RawAccount>}
+                    coId={group.id}
                     node={node}
                     showId
                     onClick={() => {
-                      onNavigate([{ coId: key, name: key }]);
+                      onNavigate([{ coId: group.id, name: group.id }]);
                     }}
                   />
                 </TableCell>
-                <TableCell>{value as string}</TableCell>
               </TableRow>
-            ) : null,
-          )}
-        </TableBody>
-      </Table>
+            ))}
+          </TableBody>
+        </Table>
+      )}
 
       <RawDataCard data={data} />
+
+      <Modal
+        isOpen={addMemberType !== null}
+        onClose={() => setAddMemberType(null)}
+        heading={addMemberType === "account" ? "Add Account" : "Add Group"}
+        showButtons={false}
+      >
+        <form onSubmit={handleAddMemberSubmit}>
+          <div
+            style={{ display: "flex", flexDirection: "column", gap: "1rem" }}
+          >
+            <Input
+              name="memberId"
+              label={addMemberType === "account" ? "Account ID" : "Group ID"}
+              placeholder={
+                addMemberType === "account"
+                  ? "Enter account ID"
+                  : "Enter group ID"
+              }
+              required
+            />
+            <Select name="role" label="Role">
+              <option value="reader">Reader</option>
+              <option value="writer">Writer</option>
+              <option value="admin">Admin</option>
+              {addMemberType === "account" ? (
+                <>
+                  <option value="writeOnly">Write Only</option>
+                </>
+              ) : (
+                <>
+                  <option value="inherit">Inherit</option>
+                </>
+              )}
+            </Select>
+            <div
+              style={{
+                display: "flex",
+                gap: "0.75rem",
+                justifyContent: "flex-end",
+                marginTop: "0.5rem",
+              }}
+            >
+              <Button
+                type="button"
+                variant="secondary"
+                onClick={() => setAddMemberType(null)}
+              >
+                Cancel
+              </Button>
+              <Button type="submit" variant="primary">
+                Add
+              </Button>
+            </div>
+          </div>
+        </form>
+      </Modal>
     </>
   );
 }

package/src/inspector/viewer/new-app.tsx

@@ -91,8 +91,8 @@ export function JazzInspectorInternal({
     <InspectorContainer as={GlobalStyles} style={{ zIndex: 999 }}>
       <HeaderContainer>
         <Breadcrumbs path={path} onBreadcrumbClick={goToIndex} />
-        <Form onSubmit={handleCoValueIdSubmit}>
-          {path.length !== 0 && (
+        {path.length !== 0 && (
+          <Form onSubmit={handleCoValueIdSubmit}>
             <Input
               label="CoValue ID"
               style={{ fontFamily: "monospace" }}
@@ -101,8 +101,8 @@ export function JazzInspectorInternal({
               value={coValueId}
               onChange={(e) => setCoValueId(e.target.value as CoID<RawCoValue>)}
             />
-          )}
-        </Form>
+          </Form>
+        )}
         <DeleteLocalData />
         <Button variant="plain" type="button" onClick={() => setOpen(false)}>
           Close

package/src/inspector/viewer/page.tsx

@@ -1,4 +1,11 @@
-import { CoID, LocalNode, RawCoList, RawCoStream, RawCoValue } from "cojson";
+import {
+  CoID,
+  LocalNode,
+  RawCoList,
+  RawCoStream,
+  RawCoValue,
+  RawGroup,
+} from "cojson";
 import { styled } from "goober";
 import React from "react";
 import { Badge } from "../ui/badge.js";
@@ -117,7 +124,14 @@ function View(
   }
 
   if (extendedType === "group") {
-    return <GroupView data={snapshot} node={node} onNavigate={onNavigate} />;
+    return (
+      <GroupView
+        coValue={value}
+        data={snapshot}
+        node={node}
+        onNavigate={onNavigate}
+      />
+    );
   }
 
   if (extendedType === "account") {

package/src/react/media/image.tsx

@@ -51,6 +51,13 @@ export type ImageProps = Omit<
    * ```
    */
   height?: number | "original";
+  /**
+   * A custom placeholder to display while an image is loading. This will
+   * be passed as the src of the img tag, so a data URL works well here.
+   * This will be used as a fallback if no images are ready and no placeholder
+   * is available otherwise.
+   */
+  placeholder?: string;
 };
 
 /**
@@ -69,11 +76,13 @@ export type ImageProps = Omit<
  *       height={100}
  *       alt="Avatar"
  *       style={{ borderRadius: "50%", objectFit: "cover" }}
+         placeholder={myPlaceholder}
  *     />
  *   );
  * }
  * ```
  */
+
 export const Image = forwardRef<HTMLImageElement, ImageProps>(function Image(
   { imageId, width, height, ...props },
   ref,
@@ -150,7 +159,7 @@ export const Image = forwardRef<HTMLImageElement, ImageProps>(function Image(
       dimensions.height || dimensions.width || 9999,
     );
 
-    if (!bestImage) return image.placeholderDataURL;
+    if (!bestImage) return image.placeholderDataURL ?? props?.placeholder;
     if (lastBestImage.current?.[0] === bestImage.image.$jazz.id)
       return lastBestImage.current?.[1];
 
@@ -163,7 +172,7 @@ export const Image = forwardRef<HTMLImageElement, ImageProps>(function Image(
       return url;
     }
 
-    return image.placeholderDataURL;
+    return image.placeholderDataURL ?? props?.placeholder;
   }, [image, dimensions.width, dimensions.height, waitingLazyLoading]);
 
   const onThresholdReached = useCallback(() => {

package/src/react/tests/media/image.test.tsx

@@ -101,6 +101,100 @@ describe("Image", async () => {
       expect(img!.src).toBe(placeholderDataUrl);
     });
 
+    it("should not override actual placeholders", async () => {
+      const placeholderDataUrl =
+        "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII=";
+      const customPlaceholder =
+        "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLXVzZXItaWNvbiBsdWNpZGUtdXNlciI+PHBhdGggZD0iTTE5IDIxdi0yYTQgNCAwIDAgMC00LTRIOWE0IDQgMCAwIDAtNCA0djIiLz48Y2lyY2xlIGN4PSIxMiIgY3k9IjciIHI9IjQiLz48L3N2Zz4=";
+
+      const original = FileStream.create({ owner: account });
+      original.start({ mimeType: "image/jpeg" });
+      // Don't end original, so it has no chunks
+
+      const im = ImageDefinition.create(
+        {
+          original,
+          originalSize: [100, 100],
+          progressive: false,
+          placeholderDataURL: placeholderDataUrl,
+        },
+        {
+          owner: account,
+        },
+      );
+
+      const { container } = render(
+        <Image
+          imageId={im.$jazz.id}
+          alt="test"
+          placeholder={customPlaceholder}
+        />,
+        {
+          account,
+        },
+      );
+
+      const img = container.querySelector("img");
+      expect(img).toBeDefined();
+      expect(img!.src).toBe(placeholderDataUrl);
+    });
+
+    it("should show custom placeholder while loading and replace with loaded image", async () => {
+      const createObjectURLSpy = vi
+        .spyOn(URL, "createObjectURL")
+        .mockImplementation((blob) => {
+          if (!(blob instanceof Blob)) {
+            throw new Error("Blob expected");
+          }
+          return `blob:test-${blob.size}`;
+        });
+
+      const customPlaceholder =
+        "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLXVzZXItaWNvbiBsdWNpZGUtdXNlciI+PHBhdGggZD0iTTE5IDIxdi0yYTQgNCAwIDAgMC00LTRIOWE0IDQgMCAwIDAtNCA0djIiLz48Y2lyY2xlIGN4PSIxMiIgY3k9IjciIHI9IjQiLz48L3N2Zz4=";
+
+      // Create an image with no chunks initially (loading state)
+      const original = FileStream.create({ owner: account });
+      original.start({ mimeType: "image/jpeg" });
+      // Don't end original, so it has no chunks
+
+      const im = ImageDefinition.create(
+        {
+          original,
+          originalSize: [100, 100],
+          progressive: false,
+        },
+        {
+          owner: account,
+        },
+      );
+
+      const { container } = render(
+        <Image
+          imageId={im.$jazz.id}
+          alt="test-loading-custom-placeholder"
+          placeholder={customPlaceholder}
+        />,
+        { account },
+      );
+
+      // Initially should show custom placeholder
+      let img = container.querySelector("img");
+      expect(img).toBeDefined();
+      expect(img!.src).toBe(customPlaceholder);
+
+      // Now add the actual image data
+      const imageData = await createDummyFileStream(100, account);
+      im.$jazz.set("100x100", imageData);
+
+      // Wait for the image to load and replace the placeholder
+      await waitFor(() => {
+        img = container.querySelector("img");
+        expect(img!.src).toBe("blob:test-100");
+      });
+
+      expect(createObjectURLSpy).toHaveBeenCalledTimes(1);
+    });
+
     it("should render the original image once loaded", async () => {
       const createObjectURLSpy = vi
         .spyOn(URL, "createObjectURL")

package/src/react-native-core/media/image.tsx

@@ -35,6 +35,13 @@ export type ImageProps = Omit<RNImageProps, "width" | "height" | "source"> & {
    * ```
    */
   height?: number | "original";
+  /**
+   * A custom placeholder to display while an image is loading. This will
+   * be passed as the src of the img tag, so a data URL works well here.
+   * This will be used as a fallback if no images are ready and no placeholder
+   * is available otherwise.
+   */
+  placeholder?: string;
 };
 
 /**
@@ -53,6 +60,7 @@ export type ImageProps = Omit<RNImageProps, "width" | "height" | "source"> & {
  *       width={100}
  *       height={100}
  *       resizeMode="cover"
+ *       placeholder="/placeholder.png"
  *     />
  *   );
  * }
@@ -65,7 +73,7 @@ export type ImageProps = Omit<RNImageProps, "width" | "height" | "source"> & {
  * ```
  */
 export const Image = forwardRef<RNImage, ImageProps>(function Image(
-  { imageId, width, height, ...props },
+  { imageId, width, height, placeholder, ...props },
   ref,
 ) {
   const image = useCoState(ImageDefinition, imageId);
@@ -117,7 +125,7 @@ export const Image = forwardRef<RNImage, ImageProps>(function Image(
     if (!image) return;
 
     let lastBestImage: FileStream | string | undefined =
-      image.placeholderDataURL;
+      image?.placeholderDataURL ?? placeholder;
 
     const unsub = image.$jazz.subscribe({}, (update) => {
       if (lastBestImage === undefined && update.placeholderDataURL) {
@@ -146,7 +154,7 @@ export const Image = forwardRef<RNImage, ImageProps>(function Image(
     return unsub;
   }, [image]);
 
-  if (!image) {
+  if (!src) {
     return null;
   }
 

package/src/svelte/media/image.svelte

@@ -5,7 +5,7 @@
   import { CoState } from "../jazz.class.svelte";
   import type { ImageProps } from "./image.types.js";
 
-  const { imageId, width, height, ...rest }: ImageProps = $props();
+  const { imageId, width, height, placeholder, ...rest }: ImageProps = $props();
 
   const imageState = new CoState(ImageDefinition, () => imageId);
   let lastBestImage: [string, string] | null = null;
@@ -69,7 +69,10 @@
 
     const image = imageState.current;
     if (image === undefined)
-      return "data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==";
+      return (
+        placeholder ??
+        "data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
+      );
 
     if (!image) return undefined;
 
@@ -79,7 +82,7 @@
       dimensions.height || dimensions.width || 9999,
     );
 
-    if (!bestImage) return image.placeholderDataURL;
+    if (!bestImage) return image.placeholderDataURL ?? placeholder;
     if (lastBestImage?.[0] === bestImage.image.$jazz.id)
       return lastBestImage?.[1];
 
@@ -92,7 +95,7 @@
       return url;
     }
 
-    return image.placeholderDataURL;
+    return image.placeholderDataURL ?? placeholder;
   });
 
   // Cleanup object URL on component destroy

package/src/svelte/media/image.types.ts

@@ -4,4 +4,5 @@ export interface ImageProps extends Omit<HTMLImgAttributes, "width" | "height">
   imageId: string;
   width?: number | "original";
   height?: number | "original";
+  placeholder?: string;
 }