jazz-tools 0.19.1 → 0.19.3

package/src/inspector/ui/icon.tsx

@@ -1,13 +1,19 @@
 import { CautionIcon } from "./icons/caution.js";
 import { ChevronDownIcon } from "./icons/chevron-down-icon.js";
 import { DeleteIcon } from "./icons/delete-icon.js";
+import { EditIcon } from "./icons/edit-icon.js";
 import { LinkIcon } from "./icons/link-icon.js";
+import { HistoryIcon } from "./icons/history.js";
+import { AddIcon } from "./icons/add-icon.js";
 
 const icons = {
   caution: CautionIcon,
   chevronDown: ChevronDownIcon,
   delete: DeleteIcon,
+  edit: EditIcon,
   link: LinkIcon,
+  history: HistoryIcon,
+  add: AddIcon,
 };
 
 // copied from tailwind line height https://tailwindcss.com/docs/font-size

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

@@ -0,0 +1,21 @@
+export function AddIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeLinejoin="round"
+    >
+      <path
+        d="M4 12H20M12 4V20"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  );
+}

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

@@ -0,0 +1,17 @@
+export function EditIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeLinejoin="round"
+      className="lucide lucide-edit lucide-pencil"
+    >
+      <path d="M13.2942 7.95881C13.5533 7.63559 13.5013 7.16358 13.178 6.90453C12.8548 6.64549 12.3828 6.6975 12.1238 7.02072L13.2942 7.95881ZM6.811 14.8488L7.37903 15.3385C7.38489 15.3317 7.39062 15.3248 7.39623 15.3178L6.811 14.8488ZM6.64 15.2668L5.89146 15.2179L5.8908 15.2321L6.64 15.2668ZM6.5 18.2898L5.7508 18.2551C5.74908 18.2923 5.75013 18.3296 5.75396 18.3667L6.5 18.2898ZM7.287 18.9768L7.31152 19.7264C7.36154 19.7247 7.41126 19.7181 7.45996 19.7065L7.287 18.9768ZM10.287 18.2658L10.46 18.9956L10.4716 18.9927L10.287 18.2658ZM10.672 18.0218L11.2506 18.4991L11.2571 18.491L10.672 18.0218ZM17.2971 10.959C17.5562 10.6358 17.5043 10.1638 17.1812 9.90466C16.8581 9.64552 16.386 9.69742 16.1269 10.0206L17.2971 10.959ZM12.1269 7.02052C11.8678 7.34365 11.9196 7.81568 12.2428 8.07484C12.5659 8.33399 13.0379 8.28213 13.2971 7.95901L12.1269 7.02052ZM14.3 5.50976L14.8851 5.97901C14.8949 5.96672 14.9044 5.95412 14.9135 5.94123L14.3 5.50976ZM15.929 5.18976L16.4088 4.61332C16.3849 4.59344 16.3598 4.57507 16.3337 4.5583L15.929 5.18976ZM18.166 7.05176L18.6968 6.52192C18.6805 6.50561 18.6635 6.49007 18.6458 6.47532L18.166 7.05176ZM18.5029 7.87264L19.2529 7.87676V7.87676L18.5029 7.87264ZM18.157 8.68976L17.632 8.15412C17.6108 8.17496 17.5908 8.19704 17.5721 8.22025L18.157 8.68976ZM16.1271 10.0203C15.8678 10.3433 15.9195 10.8153 16.2425 11.0746C16.5655 11.3339 17.0376 11.2823 17.2969 10.9593L16.1271 10.0203ZM13.4537 7.37862C13.3923 6.96898 13.0105 6.68666 12.6009 6.74805C12.1912 6.80943 11.9089 7.19127 11.9703 7.60091L13.4537 7.37862ZM16.813 11.2329C17.2234 11.1772 17.5109 10.7992 17.4552 10.3888C17.3994 9.97834 17.0215 9.69082 16.611 9.74659L16.813 11.2329ZM12.1238 7.02072L6.22577 14.3797L7.39623 15.3178L13.2942 7.95881L12.1238 7.02072ZM6.24297 14.359C6.03561 14.5995 5.91226 14.9011 5.89159 15.218L7.38841 15.3156C7.38786 15.324 7.38457 15.3321 7.37903 15.3385L6.24297 14.359ZM5.8908 15.2321L5.7508 18.2551L7.2492 18.3245L7.3892 15.3015L5.8908 15.2321ZM5.75396 18.3667C5.83563 19.1586 6.51588 19.7524 7.31152 19.7264L7.26248 18.2272C7.25928 18.2273 7.25771 18.2268 7.25669 18.2264C7.25526 18.2259 7.25337 18.2249 7.25144 18.2232C7.2495 18.2215 7.24825 18.2198 7.24754 18.2185C7.24703 18.2175 7.24637 18.216 7.24604 18.2128L5.75396 18.3667ZM7.45996 19.7065L10.46 18.9955L10.114 17.536L7.11404 18.247L7.45996 19.7065ZM10.4716 18.9927C10.7771 18.9151 11.05 18.7422 11.2506 18.499L10.0934 17.5445C10.0958 17.5417 10.0989 17.5397 10.1024 17.5388L10.4716 18.9927ZM11.2571 18.491L17.2971 10.959L16.1269 10.0206L10.0869 17.5526L11.2571 18.491ZM13.2971 7.95901L14.8851 5.97901L13.7149 5.04052L12.1269 7.02052L13.2971 7.95901ZM14.9135 5.94123C15.0521 5.74411 15.3214 5.6912 15.5243 5.82123L16.3337 4.5583C15.4544 3.99484 14.2873 4.2241 13.6865 5.0783L14.9135 5.94123ZM15.4492 5.7662L17.6862 7.6282L18.6458 6.47532L16.4088 4.61332L15.4492 5.7662ZM17.6352 7.58161C17.7111 7.6577 17.7535 7.761 17.7529 7.86852L19.2529 7.87676C19.2557 7.36905 19.0555 6.88127 18.6968 6.52192L17.6352 7.58161ZM17.7529 7.86852C17.7524 7.97604 17.7088 8.07886 17.632 8.15412L18.682 9.22541C19.0446 8.87002 19.2501 8.38447 19.2529 7.87676L17.7529 7.86852ZM17.5721 8.22025L16.1271 10.0203L17.2969 10.9593L18.7419 9.15928L17.5721 8.22025ZM11.9703 7.60091C12.3196 9.93221 14.4771 11.5503 16.813 11.2329L16.611 9.74659C15.0881 9.95352 13.6815 8.89855 13.4537 7.37862L11.9703 7.60091Z" />
+    </svg>
+  );
+}

package/src/inspector/ui/icons/history.tsx

@@ -0,0 +1,28 @@
+export function HistoryIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeLinejoin="round"
+      className="lucide lucide-trash-icon lucide-trash"
+    >
+      <path
+        d="M5.52786 16.7023C6.6602 18.2608 8.3169 19.3584 10.1936 19.7934C12.0703 20.2284 14.0409 19.9716 15.7434 19.0701C17.446 18.1687 18.766 16.6832 19.4611 14.8865C20.1562 13.0898 20.1796 11.1027 19.527 9.29011C18.8745 7.47756 17.5898 5.96135 15.909 5.02005C14.2282 4.07875 12.2641 3.77558 10.3777 4.16623C8.49129 4.55689 6.80919 5.61514 5.64045 7.14656C4.47171 8.67797 3.89482 10.5797 4.01579 12.5023M4.01579 12.5023L2.51579 11.0023M4.01579 12.5023L5.51579 11.0023"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M12 8V12L15 15"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

package/src/inspector/ui/modal.tsx

@@ -28,7 +28,7 @@ const ModalContent = styled("dialog")`
   &::backdrop {
     background-color: rgba(0, 0, 0, 0.7);
   }
-  
+
 `;
 
 const ModalHeader = styled("div")`
@@ -65,11 +65,11 @@ const CloseButton = styled("button")`
   justify-content: center;
   min-width: 2rem;
   min-height: 2rem;
-  
+
   &:hover {
     background-color: var(--j-foreground);
   }
-  
+
   &:focus-visible {
     outline: 2px solid var(--j-border-focus);
     outline-offset: 2px;

package/src/inspector/utils/history.ts

@@ -0,0 +1,49 @@
+import type { JsonObject, JsonValue, RawCoMap, Role } from "cojson";
+import type { MapOpPayload } from "cojson/dist/coValues/coMap.js";
+
+export function restoreCoMapToTimestamp(
+  coValue: RawCoMap,
+  timestamp: number,
+  removeUnknownProperties: boolean,
+): void {
+  const myRole = coValue.group.myRole();
+
+  if (
+    myRole === undefined ||
+    !(["admin", "manager", "writer", "writerOnly"] as Role[]).includes(myRole)
+  ) {
+    return;
+  }
+
+  const newCoValue = coValue.atTime(timestamp).toJSON() as JsonObject | null;
+  const oldCoValue = coValue.toJSON() as JsonObject;
+
+  if (newCoValue === null) return;
+
+  let changes: MapOpPayload<string, JsonValue | undefined>[] = [];
+
+  if (removeUnknownProperties) {
+    for (const key in oldCoValue) {
+      if (!(key in newCoValue)) {
+        changes.push({
+          op: "del",
+          key,
+        });
+      }
+    }
+  }
+
+  for (const key in newCoValue) {
+    if (newCoValue[key] !== oldCoValue[key]) {
+      changes.push({
+        op: "set",
+        key,
+        value: newCoValue[key],
+      });
+    }
+  }
+
+  if (changes.length > 0) {
+    coValue.core.makeTransaction(changes, "private");
+  }
+}

package/src/inspector/utils/permissions.ts

@@ -0,0 +1,10 @@
+import { Role } from "cojson";
+
+export function isWriter(role: Role | undefined): boolean {
+  return (
+    role === "writer" ||
+    role === "admin" ||
+    role === "manager" ||
+    role === "writeOnly"
+  );
+}

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

@@ -0,0 +1,98 @@
+import type {
+  AccountRole,
+  BinaryStreamStart,
+  CoID,
+  RawCoValue,
+  Role,
+} from "cojson";
+import type { ListOpPayload } from "cojson/dist/coValues/coList.js";
+import type { MapOpPayload } from "cojson/dist/coValues/coMap.js";
+import type {
+  BinaryStreamChunk,
+  BinaryStreamEnd,
+} from "cojson/dist/coValues/coStream.js";
+import { isCoId } from "../viewer/types";
+
+export const isGroupExtension = (
+  change: any,
+): change is Extract<
+  MapOpPayload<`child_${string}`, "extend">,
+  { op: "set" }
+> => {
+  return change?.op === "set" && change?.value === "extend";
+};
+
+export const isGroupExtendRevocation = (
+  change: any,
+): change is Extract<
+  MapOpPayload<`child_${string}`, "revoked">,
+  { op: "set" }
+> => {
+  return change?.op === "set" && change?.value === "revoked";
+};
+
+export const isGroupPromotion = (
+  change: any,
+): change is Extract<
+  MapOpPayload<`parent_co_${string}`, AccountRole>,
+  { op: "set" }
+> => {
+  return change?.op === "set" && change?.key.startsWith("parent_co_");
+};
+
+export const isUserPromotion = (
+  change: any,
+): change is Extract<MapOpPayload<CoID<RawCoValue>, Role>, { op: "set" }> => {
+  return (
+    change?.op === "set" && (isCoId(change?.key) || change?.key === "everyone")
+  );
+};
+
+export const isKeyRevelation = (
+  change: any,
+): change is Extract<
+  MapOpPayload<`${string}_for_${string}`, string>,
+  { op: "set" }
+> => {
+  return change?.op === "set" && change?.key.includes("_for_");
+};
+
+export const isPropertySet = (
+  change: any,
+): change is Extract<MapOpPayload<string, any>, { op: "set" }> => {
+  return change?.op === "set" && "key" in change && "value" in change;
+};
+export const isPropertyDeletion = (
+  change: any,
+): change is Extract<MapOpPayload<string, any>, { op: "del" }> => {
+  return change?.op === "del" && "key" in change;
+};
+
+export const isItemAppend = (
+  change: any,
+): change is Extract<ListOpPayload<any>, { op: "app" }> => {
+  return change?.op === "app" && "after" in change && "value" in change;
+};
+export const isItemPrepend = (
+  change: any,
+): change is Extract<ListOpPayload<any>, { op: "pre" }> => {
+  return change?.op === "pre" && "before" in change && "value" in change;
+};
+
+export const isItemDeletion = (
+  change: any,
+): change is Extract<ListOpPayload<any>, { op: "del" }> => {
+  return change?.op === "del" && "insertion" in change;
+};
+
+export const isStreamStart = (change: any): change is BinaryStreamStart => {
+  return change?.type === "start" && "mimeType" in change;
+};
+
+export const isStreamChunk = (change: any): change is BinaryStreamChunk => {
+  return change?.type === "chunk" && "chunk" in change;
+};
+
+export const isStreamEnd = (change: any): change is BinaryStreamEnd => {
+  return change?.type === "end";
+};

package/src/inspector/viewer/co-map-view.tsx

@@ -0,0 +1,324 @@
+import { JsonObject, LocalNode, RawCoMap } from "cojson";
+import { PageInfo } from "./types";
+import { GridView } from "./grid-view.js";
+import { useState, useMemo } from "react";
+import { Button, Icon, Input, Modal } from "../ui";
+import { styled } from "goober";
+import { restoreCoMapToTimestamp } from "../utils/history";
+import { CoValueEditor } from "./co-value-editor.js";
+import { isWriter } from "../utils/permissions";
+
+export function CoMapView({
+  coValue,
+  data,
+  node,
+  onNavigate,
+}: {
+  coValue: RawCoMap;
+  data: JsonObject;
+  node: LocalNode;
+  onNavigate: (pages: PageInfo[]) => void;
+}) {
+  return (
+    <>
+      <GridView
+        data={data}
+        onNavigate={onNavigate}
+        node={node}
+        coValue={coValue}
+      />
+      <div>
+        <AddPropertyModal
+          disabled={!isWriter(coValue.group.myRole())}
+          coValue={coValue}
+          node={node}
+        />{" "}
+        <RestoreSnapshotModal coValue={coValue} />
+      </div>
+    </>
+  );
+}
+
+function AddPropertyModal({
+  coValue,
+  node,
+  disabled,
+}: {
+  coValue: RawCoMap;
+  node: LocalNode;
+  disabled: boolean;
+}) {
+  const [isAddPropertyModalOpen, setIsAddPropertyModalOpen] = useState(false);
+  const [propertyName, setPropertyName] = useState("");
+
+  const openAddPropertyModal = () => {
+    setIsAddPropertyModalOpen(true);
+    setPropertyName("");
+  };
+
+  const handleCancel = () => {
+    setIsAddPropertyModalOpen(false);
+    setPropertyName("");
+  };
+
+  return (
+    <>
+      <Button
+        title="Add Property"
+        variant="secondary"
+        disabled={disabled}
+        onClick={openAddPropertyModal}
+      >
+        <Icon name="add" />
+      </Button>
+
+      <Modal
+        isOpen={isAddPropertyModalOpen}
+        onClose={handleCancel}
+        heading="Add Property"
+        showButtons={false}
+      >
+        <Input
+          label="Property Name"
+          value={propertyName}
+          onChange={(e) => setPropertyName(e.target.value)}
+          placeholder="Enter property name"
+        />
+        {propertyName && (
+          <EditorContainer>
+            <CoValueEditor
+              node={node}
+              property={propertyName}
+              value={undefined}
+              coValue={coValue}
+              onCancel={handleCancel}
+            />
+          </EditorContainer>
+        )}
+      </Modal>
+    </>
+  );
+}
+
+function RestoreSnapshotModal({ coValue }: { coValue: RawCoMap }) {
+  const [isRestoreModalOpen, setIsRestoreModalOpen] = useState(false);
+  const [selectedIndex, setSelectedIndex] = useState<number>(-1);
+  const [removeUnknownProperties, setRemoveUnknownProperties] = useState(false);
+
+  const timestamps = useMemo(
+    () => coValue.core.verifiedTransactions.map((tx) => tx.madeAt),
+    [coValue.core.verifiedTransactions.length],
+  );
+
+  const coMapAtSelectedIndex = useMemo(() => {
+    if (selectedIndex === -1) return null;
+    return coValue.atTime(timestamps[selectedIndex]!).toJSON() as JsonObject;
+  }, [coValue, timestamps, selectedIndex]);
+
+  const openRestoreModal = () => {
+    setIsRestoreModalOpen(true);
+    setSelectedIndex(timestamps.length - 1);
+  };
+
+  const handleRestore = () => {
+    if (timestamps.length < 2) return;
+    if (timestamps.length === 0) return;
+
+    const selectedTimestamp = timestamps[selectedIndex];
+    if (selectedTimestamp === undefined) return;
+
+    restoreCoMapToTimestamp(
+      coValue,
+      selectedTimestamp,
+      removeUnknownProperties,
+    );
+
+    setIsRestoreModalOpen(false);
+  };
+
+  const handleClose = () => {
+    setIsRestoreModalOpen(false);
+  };
+
+  const canRestore = isWriter(coValue.group.myRole());
+
+  return (
+    <>
+      <Button title="Timeline" variant="secondary" onClick={openRestoreModal}>
+        <Icon name="history" />
+      </Button>
+
+      <Modal
+        isOpen={isRestoreModalOpen}
+        onClose={handleClose}
+        heading="Timeline"
+        confirmText="Restore"
+        cancelText="Cancel"
+        onConfirm={handleRestore}
+        onCancel={handleClose}
+        showButtons={timestamps.length > 1 && canRestore}
+      >
+        {timestamps.length > 1 && (
+          <>
+            <RangeContainer>
+              <RangeLabel>Select Timestamp</RangeLabel>
+              <RangeInput
+                type="range"
+                min={0}
+                max={Math.max(0, timestamps.length - 1)}
+                value={selectedIndex}
+                onChange={(e) => setSelectedIndex(Number(e.target.value))}
+                disabled={timestamps.length === 0}
+              />
+              <TimestampDisplay>
+                {timestamps[selectedIndex] !== undefined
+                  ? new Date(timestamps[selectedIndex]!).toISOString()
+                  : "No timestamps available"}
+              </TimestampDisplay>
+            </RangeContainer>
+
+            {canRestore && (
+              <CheckboxContainer>
+                <CheckboxInput
+                  type="checkbox"
+                  id="remove-unknown-properties"
+                  checked={removeUnknownProperties}
+                  onChange={(e) => setRemoveUnknownProperties(e.target.checked)}
+                />
+                <CheckboxLabel htmlFor="remove-unknown-properties">
+                  Remove unknown properties (properties that don't exist in the
+                  selected snapshot)
+                </CheckboxLabel>
+              </CheckboxContainer>
+            )}
+          </>
+        )}
+
+        {timestamps.length > 0 && timestamps[selectedIndex] !== undefined && (
+          <PreviewSection>
+            <PreviewLabel>State at that time:</PreviewLabel>
+            <PreviewPre>
+              {JSON.stringify(coMapAtSelectedIndex, null, 2)}
+            </PreviewPre>
+          </PreviewSection>
+        )}
+
+        {timestamps.length < 2 && (
+          <div style={{ color: "var(--j-text-color)" }}>
+            At least 2 timestamps are required to restore a snapshot.
+          </div>
+        )}
+      </Modal>
+    </>
+  );
+}
+
+const PreviewSection = styled("div")`
+  margin-top: 1.5rem;
+`;
+
+const PreviewLabel = styled("div")`
+  font-weight: 500;
+  margin-bottom: 0.5rem;
+  color: var(--j-text-color-strong);
+`;
+
+const PreviewPre = styled("pre")`
+  background-color: var(--j-foreground);
+  border: 1px solid var(--j-border-color);
+  border-radius: var(--j-radius-md);
+  padding: 1rem;
+  overflow-x: auto;
+  font-size: 0.875rem;
+  max-height: 400px;
+  overflow-y: auto;
+  color: var(--j-text-color);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+`;
+
+const RangeContainer = styled("div")`
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+`;
+
+const RangeLabel = styled("label")`
+  font-weight: 500;
+  color: var(--j-text-color-strong);
+  font-size: 0.875rem;
+`;
+
+const RangeInput = styled("input")`
+  width: 100%;
+  height: 0.5rem;
+  border-radius: var(--j-radius-sm);
+  outline: none;
+  -webkit-appearance: none;
+  appearance: none;
+  background: var(--j-foreground);
+  cursor: pointer;
+
+  &::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 1.25rem;
+    height: 1.25rem;
+    border-radius: 50%;
+    background: var(--j-primary-color);
+    cursor: pointer;
+    border: 2px solid var(--j-background);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  }
+
+  &::-moz-range-thumb {
+    width: 1.25rem;
+    height: 1.25rem;
+    border-radius: 50%;
+    background: var(--j-primary-color);
+    cursor: pointer;
+    border: 2px solid var(--j-background);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+`;
+
+const TimestampDisplay = styled("div")`
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-size: 0.875rem;
+  color: var(--j-text-color);
+  padding: 0.5rem;
+  background-color: var(--j-foreground);
+  border: 1px solid var(--j-border-color);
+  border-radius: var(--j-radius-md);
+  text-align: center;
+`;
+
+const CheckboxContainer = styled("div")`
+  display: flex;
+  align-items: flex-start;
+  gap: 0.5rem;
+  margin-top: 1rem;
+`;
+
+const CheckboxInput = styled("input")`
+  width: 1rem;
+  height: 1rem;
+  margin-top: 0.125rem;
+  cursor: pointer;
+  accent-color: var(--j-primary-color);
+`;
+
+const CheckboxLabel = styled("label")`
+  font-size: 0.875rem;
+  color: var(--j-text-color);
+  cursor: pointer;
+  line-height: 1.25rem;
+`;
+
+const EditorContainer = styled("div")`
+  margin-top: 1rem;
+`;