jazz-tools 0.19.1 → 0.19.3

package/src/inspector/viewer/co-value-editor.tsx

@@ -0,0 +1,164 @@
+import { LocalNode, RawCoValue } from "cojson";
+import { JsonValue } from "cojson";
+import { useState } from "react";
+import { styled } from "goober";
+import { Button } from "../ui/button.js";
+import { Select } from "../ui/select.js";
+
+type ValueType =
+  | "number"
+  | "string"
+  | "true"
+  | "false"
+  | "object"
+  | "null"
+  | "undefined";
+
+export function CoValueEditor({
+  node,
+  property,
+  value,
+  coValue,
+  onCancel,
+}: {
+  node: LocalNode;
+  property: string;
+  value: JsonValue | undefined;
+  coValue: RawCoValue;
+  onCancel: () => void;
+}) {
+  const getInitialType = (): ValueType => {
+    if (value === null) return "null";
+    if (value === undefined) return "undefined";
+    if (typeof value === "number") return "number";
+    if (typeof value === "string") return "string";
+    if (typeof value === "boolean") return value ? "true" : "false";
+    if (typeof value === "object") return "object";
+    return "undefined";
+  };
+
+  const [selectedType, setSelectedType] = useState<ValueType>(getInitialType());
+  const [editValue, setEditValue] = useState(
+    value === undefined || value === null
+      ? ""
+      : typeof value === "object"
+        ? JSON.stringify(value, null, 2)
+        : String(value),
+  );
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    let newValue;
+    switch (selectedType) {
+      case "null":
+        newValue = null;
+        break;
+      case "undefined":
+        newValue = undefined;
+        break;
+      case "true":
+        newValue = true;
+        break;
+      case "false":
+        newValue = false;
+        break;
+      case "number":
+        newValue = parseFloat(editValue);
+        break;
+      case "string":
+        newValue = editValue;
+        break;
+      case "object":
+        newValue = JSON.parse(editValue);
+        break;
+      default:
+        throw new Error(`Invalid type: ${selectedType}`);
+    }
+
+    coValue.core.makeTransaction(
+      [
+        {
+          op: "set",
+          key: property,
+          value: newValue,
+        },
+      ],
+      "private",
+    );
+
+    onCancel();
+  };
+
+  const showTextarea =
+    selectedType === "number" ||
+    selectedType === "string" ||
+    selectedType === "object";
+
+  return (
+    <EditForm onSubmit={handleSubmit}>
+      <Select
+        label="Type"
+        value={selectedType}
+        onChange={(e) => {
+          setSelectedType(e.target.value as ValueType);
+        }}
+        onClick={(e) => e.stopPropagation()}
+      >
+        <option value="number">number</option>
+        <option value="string">string</option>
+        <option value="true">true</option>
+        <option value="false">false</option>
+        <option value="object">object</option>
+        <option value="null">null</option>
+        <option value="undefined">undefined</option>
+      </Select>
+      {showTextarea && (
+        <StyledTextarea
+          value={editValue}
+          onChange={(e) => setEditValue(e.target.value)}
+          onClick={(e) => e.stopPropagation()}
+        />
+      )}
+      <FormActions>
+        <Button type="button" variant="secondary" onClick={onCancel}>
+          Cancel
+        </Button>
+        <Button type="submit" variant="primary">
+          Submit
+        </Button>
+      </FormActions>
+    </EditForm>
+  );
+}
+
+const EditForm = styled("form")`
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+`;
+
+const StyledTextarea = styled("textarea")`
+  width: 100%;
+  min-height: 120px;
+  border-radius: var(--j-radius-md);
+  border: 1px solid var(--j-border-color);
+  padding: 0.5rem 0.875rem;
+  box-shadow: var(--j-shadow-sm);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-size: 0.875rem;
+  background-color: white;
+  color: var(--j-text-color-strong);
+  resize: vertical;
+
+  @media (prefers-color-scheme: dark) {
+    background-color: var(--j-foreground);
+  }
+`;
+
+const FormActions = styled("div")`
+  display: flex;
+  gap: 0.5rem;
+  justify-content: flex-end;
+`;

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

@@ -1,27 +1,94 @@
 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";
+import { isWriter } from "../utils/permissions.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 +102,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 && isWriter(coValue.group.myRole()) && (
+          <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 +155,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 +171,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;
@@ -133,7 +115,9 @@ function getTransactionChanges(
   if (tx.isValid === false && tx.tx.privacy === "private") {
     const readKey = coValue.core.getReadKey(tx.tx.keyUsed);
     if (!readKey) {
-      throw new Error("Read key not found");
+      return [
+        `Unable to decrypt transaction: read key ${tx.tx.keyUsed} not found.`,
+      ];
     }
 
     return (
@@ -168,7 +152,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 +160,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 +195,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 +209,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 +219,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 +253,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.
  */