jazz-tools 0.14.27 → 0.15.0

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

@@ -0,0 +1,374 @@
+import {
+  CoID,
+  LocalNode,
+  RawBinaryCoStream,
+  RawCoStream,
+  RawCoValue,
+} from "cojson";
+import { base64URLtoBytes } from "cojson";
+import { BinaryStreamItem, BinaryStreamStart, CoStreamItem } from "cojson";
+import type { JsonObject, JsonValue } from "cojson";
+import { styled } from "goober";
+import { useEffect, useState } from "react";
+import { Badge } from "../ui/badge.js";
+import { Button } from "../ui/button.js";
+import { AccountOrGroupText } from "./account-or-group-text.js";
+import { PageInfo } from "./types.js";
+
+// typeguard for BinaryStreamStart
+function isBinaryStreamStart(item: unknown): item is BinaryStreamStart {
+  return (
+    typeof item === "object" &&
+    item !== null &&
+    "type" in item &&
+    item.type === "start"
+  );
+}
+
+export function detectCoStreamType(value: RawCoStream | RawBinaryCoStream) {
+  const firstKey = Object.keys(value.items)[0];
+  if (!firstKey)
+    return {
+      type: "unknown",
+    };
+
+  const items = value.items[firstKey as never]?.map((v) => v.value);
+
+  if (!items)
+    return {
+      type: "unknown",
+    };
+  const firstItem = items[0];
+  if (!firstItem)
+    return {
+      type: "unknown",
+    };
+  // This is a binary stream
+  if (isBinaryStreamStart(firstItem)) {
+    return {
+      type: "binary",
+      items: items as BinaryStreamItem[],
+    };
+  } else {
+    return {
+      type: "coStream",
+    };
+  }
+}
+
+async function getBlobFromCoStream({
+  items,
+  onlyFirstChunk = false,
+}: {
+  items: BinaryStreamItem[];
+  onlyFirstChunk?: boolean;
+}) {
+  if (onlyFirstChunk && items.length > 1) {
+    items = items.slice(0, 2);
+  }
+
+  const chunks: Uint8Array[] = [];
+
+  const binary_U_prefixLength = 8;
+
+  let lastProgressUpdate = Date.now();
+
+  for (const item of items.slice(1)) {
+    if (item.type === "end") {
+      break;
+    }
+
+    if (item.type !== "chunk") {
+      console.error("Invalid binary stream chunk", item);
+      return undefined;
+    }
+
+    const chunk = base64URLtoBytes(item.chunk.slice(binary_U_prefixLength));
+    // totalLength += chunk.length;
+    chunks.push(chunk);
+
+    if (Date.now() - lastProgressUpdate > 100) {
+      lastProgressUpdate = Date.now();
+    }
+  }
+  const defaultMime =
+    items[0] && "mimeType" in items[0] ? items[0].mimeType : null;
+
+  const blob = new Blob(chunks, defaultMime ? { type: defaultMime } : {});
+
+  const mimeType =
+    defaultMime === "" ? await detectPDFMimeType(blob) : defaultMime;
+
+  return {
+    blob,
+    mimeType: mimeType as string,
+    unfinishedChunks: items.length > 1,
+    totalSize:
+      items[0] && "totalSizeBytes" in items[0]
+        ? (items[0].totalSizeBytes as number)
+        : undefined,
+  };
+}
+
+const detectPDFMimeType = async (blob: Blob): Promise<string> => {
+  const arrayBuffer = await blob.slice(0, 4).arrayBuffer();
+  const uint8Array = new Uint8Array(arrayBuffer);
+  const header = uint8Array.reduce(
+    (acc, byte) => acc + String.fromCharCode(byte),
+    "",
+  );
+
+  if (header === "%PDF") {
+    return "application/pdf";
+  }
+  return "unknown";
+};
+
+const BinaryDownloadButton = ({
+  pdfBlob,
+  fileName = "document",
+  label,
+  mimeType,
+}: {
+  pdfBlob: Blob;
+  mimeType?: string;
+  fileName?: string;
+  label: string;
+}) => {
+  const downloadFile = () => {
+    const url = URL.createObjectURL(
+      new Blob([pdfBlob], mimeType ? { type: mimeType } : {}),
+    );
+    const link = document.createElement("a");
+    link.href = url;
+    link.download =
+      mimeType === "application/pdf" ? `${fileName}.pdf` : fileName;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    URL.revokeObjectURL(url);
+  };
+
+  return (
+    <Button variant="secondary" onClick={downloadFile}>
+      ⬇️ {label}
+      {/* Download {mimeType === "application/pdf" ? "PDF" : "File"} */}
+    </Button>
+  );
+};
+
+const LabelContentPairContainer = styled("div")`
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+`;
+
+const BinaryStreamGrid = styled("div")`
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 0.5rem;
+  max-width: 48rem;
+`;
+
+const ImagePreviewContainer = styled("div")`
+  background-color: rgb(249 250 251);
+  padding: 0.75rem;
+  border-radius: var(--j-radius-md);
+  @media (prefers-color-scheme: dark) {
+    background-color: rgb(28 25 23);
+  }
+`;
+
+const CoStreamGrid = styled("div")`
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 0.5rem;
+`;
+
+const CoStreamItemContainer = styled("div")`
+  padding: 0.75rem;
+  border-radius: var(--j-radius-lg);
+  overflow: hidden;
+  border: 1px solid rgb(229 231 235);
+  cursor: pointer;
+  box-shadow: var(--j-shadow-sm);
+  &:hover {
+    background-color: rgb(243 244 246 / 0.05);
+  }
+`;
+
+const LabelContentPair = ({
+  label,
+  content,
+}: {
+  label: string;
+  content: React.ReactNode;
+}) => {
+  return (
+    <LabelContentPairContainer>
+      <span>{label}</span>
+      <span>{content}</span>
+    </LabelContentPairContainer>
+  );
+};
+
+function RenderCoBinaryStream({
+  value,
+  items,
+}: {
+  items: BinaryStreamItem[];
+  value: RawBinaryCoStream;
+}) {
+  const [file, setFile] = useState<
+    | {
+        blob: Blob;
+        mimeType: string;
+        unfinishedChunks: boolean;
+        totalSize: number | undefined;
+      }
+    | undefined
+    | null
+  >(null);
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    // load only the first chunk to get the mime type and size
+    getBlobFromCoStream({
+      items,
+      onlyFirstChunk: true,
+    })
+      .then((v) => {
+        if (v) {
+          setFile(v);
+          if (v.mimeType.includes("image")) {
+            // If it's an image, load the full blob
+            getBlobFromCoStream({
+              items,
+            }).then((s) => {
+              if (s) setFile(s);
+            });
+          }
+        }
+      })
+      .finally(() => setIsLoading(false));
+  }, [items]);
+
+  if (!isLoading && !file) return <div>No blob</div>;
+
+  if (isLoading) return <div>Loading...</div>;
+  if (!file) return <div>No blob</div>;
+
+  const { blob, mimeType } = file;
+
+  const sizeInKB = (file.totalSize || 0) / 1024;
+
+  return (
+    <>
+      <BinaryStreamGrid>
+        <LabelContentPair
+          label="Mime Type"
+          content={<Badge>{mimeType || "No mime type"}</Badge>}
+        />
+        <LabelContentPair
+          label="Size"
+          content={<span>{sizeInKB.toFixed(2)} KB</span>}
+        />
+        <LabelContentPair
+          label="Download"
+          content={
+            <BinaryDownloadButton
+              fileName={value.id.toString()}
+              pdfBlob={blob}
+              mimeType={mimeType}
+              label={
+                mimeType === "application/pdf"
+                  ? "Download PDF"
+                  : "Download file"
+              }
+            />
+          }
+        />
+      </BinaryStreamGrid>
+      {mimeType === "image/png" || mimeType === "image/jpeg" ? (
+        <LabelContentPair
+          label="Preview"
+          content={
+            <ImagePreviewContainer>
+              <RenderBlobImage blob={blob} />
+            </ImagePreviewContainer>
+          }
+        />
+      ) : null}
+    </>
+  );
+}
+
+function RenderCoStream({
+  value,
+  node,
+}: {
+  value: RawCoStream;
+  node: LocalNode;
+}) {
+  const streamPerUser = Object.keys(value.items);
+  const userCoIds = streamPerUser.map((stream) => stream.split("_session")[0]);
+
+  return (
+    <CoStreamGrid>
+      {userCoIds.map((id, idx) => (
+        <CoStreamItemContainer key={id}>
+          <AccountOrGroupText coId={id as CoID<RawCoValue>} node={node} />
+          {/* @ts-expect-error - TODO: fix types */}
+          {value.items[streamPerUser[idx]]?.map(
+            (item: CoStreamItem<JsonValue>) => (
+              <div>
+                {new Date(item.madeAt).toLocaleString()}{" "}
+                {JSON.stringify(item.value)}
+              </div>
+            ),
+          )}
+        </CoStreamItemContainer>
+      ))}
+    </CoStreamGrid>
+  );
+}
+
+export function CoStreamView({
+  value,
+  node,
+}: {
+  data: JsonObject;
+  onNavigate: (pages: PageInfo[]) => void;
+  node: LocalNode;
+  value: RawCoStream;
+}) {
+  // if (!value) return <div>No value</div>;
+
+  const streamType = detectCoStreamType(value);
+
+  if (streamType.type === "binary") {
+    if (streamType.items === undefined) {
+      return <div>No binary stream</div>;
+    }
+
+    return (
+      <RenderCoBinaryStream
+        value={value as RawBinaryCoStream}
+        items={streamType.items}
+      />
+    );
+  }
+
+  if (streamType.type === "coStream") {
+    return <RenderCoStream value={value} node={node} />;
+  }
+
+  if (streamType.type === "unknown") return <div>Unknown stream type</div>;
+
+  return <div>Unknown stream type</div>;
+}
+
+function RenderBlobImage({ blob }: { blob: Blob }) {
+  const urlCreator = window.URL || window.webkitURL;
+  return <img src={urlCreator.createObjectURL(blob)} />;
+}

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

@@ -0,0 +1,90 @@
+import { CoID, LocalNode, RawCoValue } from "cojson";
+import { JsonObject, JsonValue } from "cojson";
+import { ResolveIcon } from "./type-icon.js";
+import { PageInfo, isCoId } from "./types.js";
+import { CoMapPreview, ValueRenderer } from "./value-renderer.js";
+
+import { Badge } from "../ui/badge.js";
+import { Card, CardBody, CardHeader } from "../ui/card.js";
+import { Grid } from "../ui/grid.js";
+import { Text } from "../ui/text.js";
+
+function GridItem({
+  entry,
+  onNavigate,
+  node,
+}: {
+  entry: [string, JsonValue | undefined];
+  onNavigate: (pages: PageInfo[]) => void;
+  node: LocalNode;
+}) {
+  const [key, value] = entry;
+  const isCoValue = isCoId(value);
+
+  const props = isCoValue
+    ? {
+        onClick: () =>
+          onNavigate([{ coId: value as CoID<RawCoValue>, name: key }]),
+        as: "button",
+      }
+    : {
+        style: {
+          backgroundColor: "var(--j-foreground)",
+          borderColor: "var(--j-foreground)",
+        },
+      };
+
+  return (
+    <Card {...props}>
+      <CardHeader>
+        {isCoValue ? (
+          <>
+            <Text strong>{key}</Text>
+            <Badge>
+              <ResolveIcon coId={value as CoID<RawCoValue>} node={node} />
+            </Badge>
+          </>
+        ) : (
+          <Text strong>{key}</Text>
+        )}
+      </CardHeader>
+      <CardBody style={{ wordBreak: "break-word" }}>
+        {isCoValue ? (
+          <CoMapPreview coId={value as CoID<RawCoValue>} node={node} />
+        ) : (
+          <ValueRenderer
+            json={value}
+            onCoIDClick={(coId) => {
+              onNavigate([{ coId, name: key }]);
+            }}
+          />
+        )}
+      </CardBody>
+    </Card>
+  );
+}
+
+export function GridView({
+  data,
+  onNavigate,
+  node,
+}: {
+  data: JsonObject;
+  onNavigate: (pages: PageInfo[]) => void;
+  node: LocalNode;
+}) {
+  const entries = Object.entries(data);
+
+  return (
+    <Grid cols={entries.length === 1 ? 1 : 3}>
+      {entries.map((entry, childIndex) => (
+        <GridItem
+          entry={entry}
+          onNavigate={onNavigate}
+          node={node}
+          key={childIndex}
+        />
+      ))}
+    </Grid>
+  );
+}

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

@@ -0,0 +1,67 @@
+import { JsonObject, LocalNode, RawAccount } from "cojson";
+import { CoID } from "cojson";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  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";
+
+export function GroupView({
+  data,
+  onNavigate,
+  node,
+}: {
+  data: JsonObject;
+  onNavigate: (pages: PageInfo[]) => void;
+  node: LocalNode;
+}) {
+  return (
+    <>
+      <Text strong>Members</Text>
+
+      <Table>
+        <TableHead>
+          <TableRow>
+            <TableHeader>Account</TableHeader>
+            <TableHeader>Permission</TableHeader>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {"everyone" in data && typeof data.everyone === "string" ? (
+            <TableRow>
+              <TableCell>everyone</TableCell>
+              <TableCell>{data.everyone}</TableCell>
+            </TableRow>
+          ) : null}
+
+          {Object.entries(data).map(([key, value]) =>
+            isCoId(key) ? (
+              <TableRow key={key}>
+                <TableCell>
+                  <AccountOrGroupText
+                    coId={key as CoID<RawAccount>}
+                    node={node}
+                    showId
+                    onClick={() => {
+                      onNavigate([{ coId: key, name: key }]);
+                    }}
+                  />
+                </TableCell>
+                <TableCell>{value as string}</TableCell>
+              </TableRow>
+            ) : null,
+          )}
+        </TableBody>
+      </Table>
+
+      <RawDataCard data={data} />
+    </>
+  );
+}

package/src/inspector/viewer/inpsector-button.tsx

@@ -0,0 +1,89 @@
+import { styled } from "goober";
+import React from "react";
+
+export type Position =
+  | "bottom right"
+  | "bottom left"
+  | "top right"
+  | "top left"
+  | "right"
+  | "left";
+
+const StyledInspectorButton = styled("button")<{ position: Position }>`
+  position: fixed;
+  width: 2.5rem;
+  height: 2.5rem;
+  background-color: white;
+  box-shadow:  0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  margin: 1rem;
+  padding: 0.5rem !important;
+  border: 1px solid #e5e3e4;
+  border-radius: 0.375rem;
+  z-index: 999;
+  
+  ${(props) => {
+    switch (props.position) {
+      case "bottom right":
+        return "bottom: 0; right: 0;";
+      case "bottom left":
+        return "bottom: 0; left: 0;";
+      case "top right":
+        return "top: 0; right: 0;";
+      case "top left":
+        return "top: 0; left: 0;";
+      case "right":
+        return "right: 0; top: 50%; transform: translateY(-50%);";
+      case "left":
+        return "left: 0; top: 50%; transform: translateY(-50%);";
+      default:
+        return "";
+    }
+  }}
+`;
+
+const JazzIcon = styled("svg")`
+  width: 100%;
+  height: auto;
+  position: relative;
+  left: -1px;
+  color: #146AFF;
+`;
+
+export function InspectorButton({
+  position = "right",
+  ...buttonProps
+}: React.ComponentPropsWithoutRef<"button"> & { position?: Position }) {
+  return (
+    <StyledInspectorButton position={position} {...buttonProps}>
+      <JazzIcon
+        xmlns="http://www.w3.org/2000/svg"
+        width="119"
+        height="115"
+        viewBox="0 0 119 115"
+        fill="none"
+      >
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M118.179 23.8277V0.167999C99.931 7.5527 79.9854 11.6192 59.0897 11.6192C47.1466 11.6192 35.5138 10.2908 24.331 7.7737V30.4076V60.1508C23.2955 59.4385 22.1568 58.8458 20.9405 58.3915C18.1732 57.358 15.128 57.0876 12.1902 57.6145C9.2524 58.1414 6.5539 59.4419 4.4358 61.3516C2.3178 63.2613 0.875401 65.6944 0.291001 68.3433C-0.293399 70.9921 0.00659978 73.7377 1.1528 76.2329C2.2991 78.728 4.2403 80.861 6.7308 82.361C9.2214 83.862 12.1495 84.662 15.1448 84.662C15.6054 84.662 15.8365 84.662 16.0314 84.659C26.5583 84.449 35.042 75.9656 35.2513 65.4386C35.2534 65.3306 35.2544 65.2116 35.2548 65.0486L35.2552 64.7149V64.5521V61.0762V32.1993C43.0533 33.2324 51.0092 33.7656 59.0897 33.7656C59.6696 33.7656 60.2489 33.7629 60.8276 33.7574V89.696C59.792 88.983 58.6533 88.391 57.437 87.936C54.6697 86.903 51.6246 86.632 48.6867 87.159C45.7489 87.686 43.0504 88.987 40.9323 90.896C38.8143 92.806 37.3719 95.239 36.7875 97.888C36.2032 100.537 36.5031 103.283 37.6494 105.778C38.7956 108.273 40.7368 110.405 43.2273 111.906C45.7179 113.406 48.646 114.207 51.6414 114.207C52.1024 114.207 52.3329 114.207 52.5279 114.203C63.0548 113.994 71.5385 105.51 71.7478 94.983C71.7517 94.788 71.7517 94.558 71.7517 94.097V90.621V33.3266C83.962 32.4768 95.837 30.4075 107.255 27.2397V59.9017C106.219 59.1894 105.081 58.5966 103.864 58.1424C101.097 57.1089 98.052 56.8384 95.114 57.3653C92.176 57.8922 89.478 59.1927 87.36 61.1025C85.242 63.0122 83.799 65.4453 83.215 68.0941C82.631 70.743 82.931 73.4886 84.077 75.9837C85.223 78.4789 87.164 80.612 89.655 82.112C92.145 83.612 95.073 84.413 98.069 84.413C98.53 84.413 98.76 84.413 98.955 84.409C109.482 84.2 117.966 75.7164 118.175 65.1895C118.179 64.9945 118.179 64.764 118.179 64.3029V60.8271V23.8277Z"
+          fill="currentColor"
+        />
+      </JazzIcon>
+      <span
+        style={{
+          position: "absolute",
+          width: "1px",
+          height: "1px",
+          padding: "0",
+          margin: "-1px",
+          overflow: "hidden",
+          clip: "rect(0, 0, 0, 0)",
+          whiteSpace: "nowrap",
+          border: "0",
+        }}
+      >
+        Open Jazz Inspector
+      </span>
+    </StyledInspectorButton>
+  );
+}