jazz-tools 0.19.0 → 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/coValues/coList.ts

@@ -397,7 +397,7 @@ export class CoList<out Item = any>
         });
       },
       onUpdateWhenFound(value) {
-        value.$jazz.applyDiff(options.value);
+        (value as Resolved<L>).$jazz.applyDiff(options.value);
       },
     });
   }

package/src/tools/coValues/deepLoading.ts

@@ -6,16 +6,23 @@ import { type CoKeys } from "./coMap.js";
 import { type CoValue, type ID } from "./interfaces.js";
 
 /**
- * Used to check if T is a union type.
+ * Returns a boolean for whether the given type is a union.
  *
- * If T is a union type, the left hand side of the extends becomes a union of function types.
- * The right hand side is always a single function type.
+ * Taken from https://github.com/sindresorhus/type-fest/blob/main/source/is-union.d.ts
  */
-type IsUnion<T, U = T> = (T extends any ? (x: T) => void : never) extends (
-  x: U,
-) => void
-  ? false
-  : true;
+type IsUnion<T, U = T> = (
+  [T] extends [never]
+    ? false
+    : T extends any
+      ? [U] extends [T]
+        ? false
+        : true
+      : never
+) extends infer Result
+  ? boolean extends Result
+    ? true
+    : Result
+  : never;
 
 /**
  * A CoValue that may or may not be loaded.
@@ -67,61 +74,57 @@ export type RefsToResolve<
   | (DepthLimit extends CurrentDepth["length"]
       ? // eslint-disable-next-line @typescript-eslint/no-explicit-any
         any
-      : IsUnion<LoadedAndRequired<V>> extends true
-        ? true
-        : // Basically V extends CoList - but if we used that we'd introduce circularity into the definition of CoList itself
-          V extends ReadonlyArray<infer Item>
-          ? LoadedAndRequired<Item> extends CoValue
+      : // Basically V extends CoList - but if we used that we'd introduce circularity into the definition of CoList itself
+        V extends ReadonlyArray<infer Item>
+        ? LoadedAndRequired<Item> extends CoValue
+          ?
+              | ({
+                  $each?: RefsToResolve<
+                    AsLoaded<Item>,
+                    DepthLimit,
+                    [0, ...CurrentDepth]
+                  >;
+                } & OnError)
+              | boolean
+          : OnError | boolean
+        : // Basically V extends CoMap | Group | Account - but if we used that we'd introduce circularity into the definition of CoMap itself
+          V extends { [TypeSym]: "CoMap" | "Group" | "Account" }
+          ?
+              | ({
+                  [Key in CoKeys<V> as LoadedAndRequired<V[Key]> extends CoValue
+                    ? Key
+                    : never]?: RefsToResolve<
+                    LoadedAndRequired<V[Key]>,
+                    DepthLimit,
+                    [0, ...CurrentDepth]
+                  >;
+                } & OnError)
+              | (ItemsSym extends keyof V
+                  ? {
+                      $each: RefsToResolve<
+                        LoadedAndRequired<V[ItemsSym]>,
+                        DepthLimit,
+                        [0, ...CurrentDepth]
+                      >;
+                    } & OnError
+                  : never)
+              | boolean
+          : V extends {
+                [TypeSym]: "CoStream";
+                byMe: CoFeedEntry<infer Item> | undefined;
+              }
             ?
                 | ({
-                    $each?: RefsToResolve<
+                    $each: RefsToResolve<
                       AsLoaded<Item>,
                       DepthLimit,
                       [0, ...CurrentDepth]
                     >;
                   } & OnError)
                 | boolean
-            : OnError | boolean
-          : // Basically V extends CoMap | Group | Account - but if we used that we'd introduce circularity into the definition of CoMap itself
-            V extends { [TypeSym]: "CoMap" | "Group" | "Account" }
-            ?
-                | ({
-                    [Key in CoKeys<V> as LoadedAndRequired<
-                      V[Key]
-                    > extends CoValue
-                      ? Key
-                      : never]?: RefsToResolve<
-                      LoadedAndRequired<V[Key]>,
-                      DepthLimit,
-                      [0, ...CurrentDepth]
-                    >;
-                  } & OnError)
-                | (ItemsSym extends keyof V
-                    ? {
-                        $each: RefsToResolve<
-                          LoadedAndRequired<V[ItemsSym]>,
-                          DepthLimit,
-                          [0, ...CurrentDepth]
-                        >;
-                      } & OnError
-                    : never)
-                | boolean
-            : V extends {
-                  [TypeSym]: "CoStream";
-                  byMe: CoFeedEntry<infer Item> | undefined;
-                }
-              ?
-                  | ({
-                      $each: RefsToResolve<
-                        AsLoaded<Item>,
-                        DepthLimit,
-                        [0, ...CurrentDepth]
-                      >;
-                    } & OnError)
-                  | boolean
-              : V extends { [TypeSym]: "CoPlainText" | "BinaryCoStream" }
-                ? boolean | OnError
-                : boolean);
+            : V extends { [TypeSym]: "CoPlainText" | "BinaryCoStream" }
+              ? boolean | OnError
+              : boolean);
 
 export type RefsToResolveStrict<T, V> = [V] extends [RefsToResolve<T>]
   ? RefsToResolve<T>
@@ -130,7 +133,7 @@ export type RefsToResolveStrict<T, V> = [V] extends [RefsToResolve<T>]
 export type Resolved<
   T,
   R extends RefsToResolve<T> | undefined = true,
-> = DeeplyLoaded<T, R, 10, []>;
+> = DeeplyLoaded<T, R>;
 
 /**
  * If the resolve query contains `$onError: "catch"`, we return a not loaded value for this nested CoValue.
@@ -145,21 +148,32 @@ type CoMapLikeLoaded<
   Depth,
   DepthLimit extends number,
   CurrentDepth extends number[],
-> = {
-  readonly [Key in keyof Omit<Depth, "$onError">]-?: Key extends CoKeys<V>
-    ? LoadedAndRequired<V[Key]> extends CoValue
-      ?
-          | DeeplyLoaded<
-              LoadedAndRequired<V[Key]>,
-              Depth[Key],
-              DepthLimit,
-              [0, ...CurrentDepth]
-            >
-          | (undefined extends V[Key] ? undefined : never)
-          | OnErrorResolvedValue<V[Key], Depth[Key]>
-      : never
-    : never;
-} & V;
+> = IsUnion<LoadedAndRequired<V>> extends true
+  ? // Trigger conditional type distributivity to deeply resolve each member of the union separately
+    // Otherwise, deeply loaded values will resolve to `never`
+    V extends V
+    ? CoMapLikeLoaded<
+        V,
+        Pick<Depth, keyof V & keyof Depth>,
+        DepthLimit,
+        CurrentDepth
+      >
+    : never
+  : {
+      readonly [Key in keyof Omit<Depth, "$onError">]-?: Key extends CoKeys<V>
+        ? LoadedAndRequired<V[Key]> extends CoValue
+          ?
+              | DeeplyLoaded<
+                  LoadedAndRequired<V[Key]>,
+                  Depth[Key],
+                  DepthLimit,
+                  [0, ...CurrentDepth]
+                >
+              | (undefined extends V[Key] ? undefined : never)
+              | OnErrorResolvedValue<V[Key], Depth[Key]>
+          : never
+        : never;
+    } & V;
 
 export type DeeplyLoaded<
   V,