jazz-tools 0.19.1 → 0.19.2

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

@@ -1,27 +1,93 @@
 import { CoID, LocalNode, RawCoValue } from "cojson";
 import { JsonObject, JsonValue } from "cojson";
+import { useState } from "react";
+import { styled } from "goober";
 import { ResolveIcon } from "./type-icon.js";
 import { PageInfo, isCoId } from "./types.js";
 import { CoMapPreview, ValueRenderer } from "./value-renderer.js";
+import { CoValueEditor } from "./co-value-editor.js";
 
 import { Badge } from "../ui/badge.js";
 import { Card, CardBody, CardHeader } from "../ui/card.js";
 import { Grid } from "../ui/grid.js";
+import { Icon } from "../ui/icon.js";
 import { Text } from "../ui/text.js";
 
 function GridItem({
   entry,
   onNavigate,
   node,
+  coValue,
 }: {
   entry: [string, JsonValue | undefined];
   onNavigate: (pages: PageInfo[]) => void;
   node: LocalNode;
+  coValue?: RawCoValue;
 }) {
   const [key, value] = entry;
   const isCoValue = isCoId(value);
+  const [isEditing, setIsEditing] = useState(false);
 
-  const props = isCoValue
+  const handleEditClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    setIsEditing(true);
+  };
+
+  const handleCancel = () => {
+    setIsEditing(false);
+  };
+
+  const handleDelete = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    if (confirm(`Are you sure you want to delete the property "${key}"?`)) {
+      coValue?.core.makeTransaction(
+        [
+          {
+            op: "del",
+            key,
+          },
+        ],
+        "private",
+      );
+    }
+  };
+
+  if (isEditing) {
+    return (
+      <Card
+        style={{
+          backgroundColor: "var(--j-foreground)",
+          borderColor: "var(--j-foreground)",
+        }}
+      >
+        <CardHeader>
+          <div style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>
+            {isCoValue ? (
+              <>
+                <Text strong>{key}</Text>
+                <Badge>
+                  <ResolveIcon coId={value as CoID<RawCoValue>} node={node} />
+                </Badge>
+              </>
+            ) : (
+              <Text strong>{key}</Text>
+            )}
+          </div>
+        </CardHeader>
+        <CardBody style={{ wordBreak: "break-word" }}>
+          <CoValueEditor
+            node={node}
+            property={key}
+            value={value}
+            coValue={coValue!}
+            onCancel={handleCancel}
+          />
+        </CardBody>
+      </Card>
+    );
+  }
+
+  const cardProps = isCoValue
     ? {
         onClick: () =>
           onNavigate([{ coId: value as CoID<RawCoValue>, name: key }]),
@@ -35,17 +101,37 @@ function GridItem({
       };
 
   return (
-    <Card {...props}>
+    <Card {...cardProps}>
       <CardHeader>
-        {isCoValue ? (
-          <>
+        <div style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>
+          {isCoValue ? (
+            <>
+              <Text strong>{key}</Text>
+              <Badge>
+                <ResolveIcon coId={value as CoID<RawCoValue>} node={node} />
+              </Badge>
+            </>
+          ) : (
             <Text strong>{key}</Text>
-            <Badge>
-              <ResolveIcon coId={value as CoID<RawCoValue>} node={node} />
-            </Badge>
-          </>
-        ) : (
-          <Text strong>{key}</Text>
+          )}
+        </div>
+        {coValue && (
+          <ActionButtons>
+            <EditButton
+              onClick={handleEditClick}
+              type="button"
+              aria-label="Edit"
+            >
+              <Icon name="edit" size="sm" />
+            </EditButton>
+            <DeleteButton
+              onClick={handleDelete}
+              type="button"
+              aria-label="Delete"
+            >
+              <Icon name="delete" size="sm" />
+            </DeleteButton>
+          </ActionButtons>
         )}
       </CardHeader>
       <CardBody style={{ wordBreak: "break-word" }}>
@@ -68,10 +154,12 @@ export function GridView({
   data,
   onNavigate,
   node,
+  coValue,
 }: {
   data: JsonObject;
   onNavigate: (pages: PageInfo[]) => void;
   node: LocalNode;
+  coValue?: RawCoValue;
 }) {
   const entries = Object.entries(data);
 
@@ -82,9 +170,50 @@ export function GridView({
           entry={entry}
           onNavigate={onNavigate}
           node={node}
+          coValue={coValue}
           key={childIndex}
         />
       ))}
     </Grid>
   );
 }
+
+const EditButton = styled("button")`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.25rem;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  color: var(--j-text-color);
+  border-radius: var(--j-radius-sm);
+  transition: background-color 0.2s;
+
+  &:hover {
+    background-color: var(--j-foreground);
+  }
+`;
+
+const DeleteButton = styled("button")`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.25rem;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  color: var(--j-text-color);
+  border-radius: var(--j-radius-sm);
+  transition: background-color 0.2s;
+
+  &:hover {
+    background-color: var(--j-foreground);
+  }
+`;
+
+const ActionButtons = styled("div")`
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+`;

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

@@ -1,29 +1,11 @@
-import {
-  AccountRole,
-  BinaryStreamStart,
-  CoID,
-  JsonValue,
-  LocalNode,
-  OpID,
-  RawCoValue,
-  Role,
-} from "cojson";
+import { CoID, JsonValue, LocalNode, OpID, RawCoValue } from "cojson";
 import { useMemo } from "react";
 import { styled } from "goober";
-import { isCoId } from "./types";
 import { AccountOrGroupText } from "./account-or-group-text";
 import { DataTable, ColumnDef } from "../ui/data-table";
-import { MapOpPayload } from "cojson/dist/coValues/coMap.js";
-import {
-  DeletionOpPayload,
-  InsertionOpPayload,
-} from "cojson/dist/coValues/coList.js";
-import {
-  BinaryStreamChunk,
-  BinaryStreamEnd,
-} from "cojson/dist/coValues/coStream.js";
-import { VerifiedTransaction } from "cojson/dist/coValueCore/coValueCore.js";
+import type { VerifiedTransaction } from "cojson/dist/coValueCore/coValueCore.js";
 import { Icon, Accordion } from "../ui";
+import * as TransactionChanges from "../utils/transactions-changes";
 
 type HistoryEntry = {
   id: string;
@@ -168,7 +150,7 @@ function mapTransactionToAction(
   coValue: RawCoValue,
 ): string {
   // Group changes
-  if (isUserPromotion(change)) {
+  if (TransactionChanges.isUserPromotion(change)) {
     if (change.value === "revoked") {
       return `${change.key} has been revoked`;
     }
@@ -176,28 +158,28 @@ function mapTransactionToAction(
     return `${change.key} has been promoted to ${change.value}`;
   }
 
-  if (isGroupExtension(change)) {
+  if (TransactionChanges.isGroupExtension(change)) {
     const child = change.key.slice(6);
     return `Group became a member of ${child}`;
   }
 
-  if (isGroupExtendRevocation(change)) {
+  if (TransactionChanges.isGroupExtendRevocation(change)) {
     const child = change.key.slice(6);
     return `Group's membership of ${child} has been revoked.`;
   }
 
-  if (isGroupPromotion(change)) {
+  if (TransactionChanges.isGroupPromotion(change)) {
     const parent = change.key.slice(7);
     return `Group ${parent} has been promoted to ${change.value}`;
   }
 
-  if (isKeyRevelation(change)) {
+  if (TransactionChanges.isKeyRevelation(change)) {
     const [key, target] = change.key.split("_for_");
     return `Key "${key}" has been revealed to "${target}"`;
   }
 
   // coList changes
-  if (isItemAppend(change)) {
+  if (TransactionChanges.isItemAppend(change)) {
     if (change.after === "start") {
       return `"${change.value}" has been appended`;
     }
@@ -211,7 +193,7 @@ function mapTransactionToAction(
     return `"${change.value}" has been inserted after "${(after as any).value}"`;
   }
 
-  if (isItemPrepend(change)) {
+  if (TransactionChanges.isItemPrepend(change)) {
     if (change.before === "end") {
       return `"${change.value}" has been prepended`;
     }
@@ -225,7 +207,7 @@ function mapTransactionToAction(
     return `"${change.value}" has been inserted before "${(before as any).value}"`;
   }
 
-  if (isItemDeletion(change)) {
+  if (TransactionChanges.isItemDeletion(change)) {
     const insertion = findListChange(change.insertion, coValue);
     if (insertion === undefined) {
       return `An undefined item has been deleted`;
@@ -235,24 +217,24 @@ function mapTransactionToAction(
   }
 
   // coStream changes
-  if (isStreamStart(change)) {
+  if (TransactionChanges.isStreamStart(change)) {
     return `Stream started with mime type "${change.mimeType}" and file name "${change.fileName}"`;
   }
 
-  if (isStreamChunk(change)) {
+  if (TransactionChanges.isStreamChunk(change)) {
     return `Stream chunk added`;
   }
 
-  if (isStreamEnd(change)) {
+  if (TransactionChanges.isStreamEnd(change)) {
     return `Stream ended`;
   }
 
   // coMap changes
-  if (isPropertySet(change)) {
+  if (TransactionChanges.isPropertySet(change)) {
     return `Property "${change.key}" has been set to ${JSON.stringify(change.value)}`;
   }
 
-  if (isPropertyDeletion(change)) {
+  if (TransactionChanges.isPropertyDeletion(change)) {
     return `Property "${change.key}" has been deleted`;
   }
 
@@ -269,90 +251,6 @@ const findListChange = (
   )?.changes?.[opId.changeIdx];
 };
 
-const isGroupExtension = (
-  change: any,
-): change is Extract<
-  MapOpPayload<`child_${string}`, "extend">,
-  { op: "set" }
-> => {
-  return change?.op === "set" && change?.value === "extend";
-};
-
-const isGroupExtendRevocation = (
-  change: any,
-): change is Extract<
-  MapOpPayload<`child_${string}`, "revoked">,
-  { op: "set" }
-> => {
-  return change?.op === "set" && change?.value === "revoked";
-};
-
-const isGroupPromotion = (
-  change: any,
-): change is Extract<
-  MapOpPayload<`parent_co_${string}`, AccountRole>,
-  { op: "set" }
-> => {
-  return change?.op === "set" && change?.key.startsWith("parent_co_");
-};
-
-const isUserPromotion = (
-  change: any,
-): change is Extract<MapOpPayload<CoID<RawCoValue>, Role>, { op: "set" }> => {
-  return (
-    change?.op === "set" && (isCoId(change?.key) || change?.key === "everyone")
-  );
-};
-
-const isKeyRevelation = (
-  change: any,
-): change is Extract<
-  MapOpPayload<`${string}_for_${string}`, string>,
-  { op: "set" }
-> => {
-  return change?.op === "set" && change?.key.includes("_for_");
-};
-
-const isPropertySet = (
-  change: any,
-): change is Extract<MapOpPayload<string, any>, { op: "set" }> => {
-  return change?.op === "set" && "key" in change && "value" in change;
-};
-const isPropertyDeletion = (
-  change: any,
-): change is Extract<MapOpPayload<string, any>, { op: "del" }> => {
-  return change?.op === "del" && "key" in change;
-};
-
-const isItemAppend = (
-  change: any,
-): change is Extract<InsertionOpPayload<any>, { op: "app" }> => {
-  return change?.op === "app" && "after" in change && "value" in change;
-};
-const isItemPrepend = (
-  change: any,
-): change is Extract<InsertionOpPayload<any>, { op: "pre" }> => {
-  return change?.op === "pre" && "before" in change && "value" in change;
-};
-
-const isItemDeletion = (
-  change: any,
-): change is Extract<DeletionOpPayload, { op: "del" }> => {
-  return change?.op === "del" && "insertion" in change;
-};
-
-const isStreamStart = (change: any): change is BinaryStreamStart => {
-  return change?.type === "start" && "mimeType" in change;
-};
-
-const isStreamChunk = (change: any): change is BinaryStreamChunk => {
-  return change?.type === "chunk" && "chunk" in change;
-};
-
-const isStreamEnd = (change: any): change is BinaryStreamEnd => {
-  return change?.type === "end";
-};
-
 const RedTooltip = styled("span")`
   position:relative; /* making the .tooltip span a container for the tooltip text */
   border-bottom:1px dashed #000; /* little indicater to indicate it's hoverable */

package/src/inspector/viewer/page.tsx

@@ -2,6 +2,7 @@ import {
   CoID,
   LocalNode,
   RawCoList,
+  RawCoMap,
   RawCoStream,
   RawCoValue,
   RawGroup,
@@ -23,6 +24,7 @@ import { TypeIcon } from "./type-icon.js";
 import { PageInfo } from "./types.js";
 import { resolveCoValue, useResolvedCoValue } from "./use-resolve-covalue.js";
 import { HistoryView } from "./history-view.js";
+import { CoMapView } from "./co-map-view.js";
 
 interface PageContainerProps extends React.HTMLAttributes<HTMLDivElement> {
   isTopLevel?: boolean;
@@ -165,6 +167,17 @@ function View(
     return <TableView data={snapshot} node={node} onNavigate={onNavigate} />;
   }
 
+  if (type === "comap") {
+    return (
+      <CoMapView
+        coValue={value as RawCoMap}
+        data={snapshot}
+        node={node}
+        onNavigate={onNavigate}
+      />
+    );
+  }
+
   return <GridView data={snapshot} onNavigate={onNavigate} node={node} />;
 }
 

package/src/react-core/tests/usePassPhraseAuth.test.ts

@@ -119,7 +119,7 @@ describe("usePassphraseAuth", () => {
         const me = useAccount();
         const logOut = useLogOut();
 
-        if (me) {
+        if (me.$isLoaded) {
           if (!accounts.includes(me.$jazz.id)) {
             accounts.push(me.$jazz.id);
           }

package/src/tools/coValues/CoFieldInit.ts

@@ -3,6 +3,7 @@ import { CoList } from "./coList.js";
 import { CoMap, CoMapInit } from "./coMap.js";
 import { CoPlainText } from "./coPlainText.js";
 import { CoRichText } from "./coRichText.js";
+import { CoVector } from "./coVector.js";
 
 /**
  * Returns the type of values that can be used to initialize a field of the provided type.
@@ -15,6 +16,8 @@ export type CoFieldInit<V> = V extends CoMap
   ? V | CoMapInit<V>
   : V extends CoList<infer T> | CoFeed<infer T>
     ? V | ReadonlyArray<CoFieldInit<T>>
-    : V extends CoPlainText | CoRichText
-      ? V | string
-      : V;
+    : V extends CoVector | Readonly<CoVector>
+      ? V | ReadonlyArray<number> | Float32Array
+      : V extends CoPlainText | CoRichText
+        ? V | string
+        : V;

package/src/tools/implementation/zodSchema/typeConverters/CoFieldSchemaInit.ts

@@ -5,6 +5,7 @@ import {
   CoreCoListSchema,
   CoreCoMapSchema,
   CoreCoRecordSchema,
+  CoreCoVectorSchema,
   CorePlainTextSchema,
   Simplify,
 } from "../../../internal.js";
@@ -33,13 +34,15 @@ export type CoFieldSchemaInit<S extends CoValueClass | AnyZodOrCoValueSchema> =
                 ? CoListSchemaInit<T>
                 : S extends CoreCoFeedSchema<infer T>
                   ? CoFeedSchemaInit<T>
-                  : S extends CorePlainTextSchema | CoreRichTextSchema
-                    ? string
-                    : S extends CoreCoOptionalSchema<infer T>
-                      ? CoFieldSchemaInit<T> | undefined
-                      : S extends CoDiscriminatedUnionSchema<infer Members>
-                        ? CoFieldSchemaInit<Members[number]>
-                        : never)
+                  : S extends CoreCoVectorSchema
+                    ? CoVectorSchemaInit
+                    : S extends CorePlainTextSchema | CoreRichTextSchema
+                      ? string
+                      : S extends CoreCoOptionalSchema<infer T>
+                        ? CoFieldSchemaInit<T> | undefined
+                        : S extends CoDiscriminatedUnionSchema<infer Members>
+                          ? CoFieldSchemaInit<Members[number]>
+                          : never)
     : S extends z.core.$ZodType
       ? TypeOfZodSchema<S>
       : S extends CoValueClass
@@ -76,6 +79,8 @@ export type CoFeedSchemaInit<T extends AnyZodOrCoValueSchema> = Simplify<
   ReadonlyArray<CoFieldSchemaInit<T>>
 >;
 
+export type CoVectorSchemaInit = ReadonlyArray<number> | Float32Array;
+
 /**
  * The convenience type for extracting the init type of a CoValue schema.
  */

package/src/tools/tests/coVector.test.ts

@@ -112,6 +112,49 @@ describe("Creating a CoVector", async () => {
 
     expect(embedding.$jazz.owner).toEqual(group);
   });
+
+  describe("nested inside a container CoValue", async () => {
+    test("from an array of numbers", () => {
+      const VectorMap = co.map({
+        embedding: EmbeddingSchema,
+      });
+
+      const container = VectorMap.create({
+        embedding: [1, 2, 3],
+      });
+
+      expect(container.embedding).toBeInstanceOf(CoVector);
+      expect(Array.from(container.embedding)).toEqual([1, 2, 3]);
+      const vectorOwner = container.embedding.$jazz.owner;
+      expect(
+        vectorOwner.getParentGroups().map((group) => group.$jazz.id),
+      ).toContain(container.$jazz.owner.$jazz.id);
+
+      container.$jazz.set("embedding", [4, 5, 6]);
+      expect(Array.from(container.embedding)).toEqual([4, 5, 6]);
+    });
+
+    test("from a Float32Array", () => {
+      const VectorList = co.list(EmbeddingSchema);
+
+      const list = VectorList.create([new Float32Array([1, 2, 3])]);
+
+      const vector = list[0];
+      assert(vector);
+      expect(vector).toBeInstanceOf(CoVector);
+      expect(Array.from(vector)).toEqual([1, 2, 3]);
+      const vectorOwner = vector.$jazz.owner;
+      expect(
+        vectorOwner.getParentGroups().map((group) => group.$jazz.id),
+      ).toContain(list.$jazz.owner.$jazz.id);
+
+      list.$jazz.push(new Float32Array([4, 5, 6]));
+
+      const vector2 = list[1];
+      assert(vector2);
+      expect(Array.from(vector2)).toEqual([4, 5, 6]);
+    });
+  });
 });
 
 describe("CoVector structure", async () => {