Publish

- jazz-example-pets@0.0.9
 - jazz-example-todo@0.0.34
 - cojson@0.2.3
 - cojson-simple-sync@0.2.6
 - cojson-storage-sqlite@0.2.6
 - jazz-browser@0.2.5
 - jazz-browser-auth-local@0.2.5
 - jazz-browser-media-images@0.2.5
 - jazz-react@0.2.5
 - jazz-react-auth-local@0.2.5
 - jazz-react-media-images@0.2.5
 - jazz-storage-indexeddb@0.2.5

.github/workflows/build-and-deploy.yaml

@@ -7,8 +7,11 @@ on:
     branches: [ "main" ]
 
 jobs:
-  build-and-deploy:
+  build:
     runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        example: ["todo", "pets"]
 
     steps:
     - uses: actions/checkout@v3
@@ -17,40 +20,50 @@ jobs:
 
     - uses: actions/setup-node@v3
       with:
-        node-version: 18
+        node-version: 16
         cache: 'yarn'
         cache-dependency-path: yarn.lock
-    - name: Nuke Workspace
-      run: |
-        rm package.json yarn.lock;
-    - name: Yarn Build
-      run: |
-        yarn install --frozen-lockfile;
-        yarn build;
-      working-directory: ./examples/todo
 
-    - uses: satackey/action-docker-layer-caching@v0.0.11
-      continue-on-error: true
-      with:
-        key: docker-layer-caching-${{ github.workflow }}-{hash}
-        restore-keys: |
-          docker-layer-caching-${{ github.workflow }}-
+    - name: Set up Docker Buildx
+      uses: docker/setup-buildx-action@v2
 
     - name: Login to GitHub Container Registry
-      uses: docker/login-action@v1
+      uses: docker/login-action@v2
       with:
         registry: ghcr.io
         username: gardencmp
         password: ${{ secrets.GITHUB_TOKEN }}
 
-    - name: Docker Build & Push
+    - name: Nuke Workspace
       run: |
-        export DOCKER_TAG=ghcr.io/gardencmp/jazz-example-todo:${{github.head_ref || github.ref_name}}-${{github.sha}}-$(date +%s) ;
-        docker build . --file Dockerfile --tag $DOCKER_TAG;
-        docker push $DOCKER_TAG;
-        echo "DOCKER_TAG=$DOCKER_TAG" >> $GITHUB_ENV
-      working-directory: ./examples/todo
+        rm package.json yarn.lock;
 
+    - name: Yarn Build
+      run: |
+        yarn install --frozen-lockfile;
+        yarn build;
+      working-directory: ./examples/${{ matrix.example }}
+
+    - name: Docker Build & Push
+      uses: docker/build-push-action@v4
+      with:
+        context: ./examples/${{ matrix.example }}
+        push: true
+        tags: ghcr.io/gardencmp/${{github.event.repository.name}}-example-${{ matrix.example }}:${{github.head_ref || github.ref_name}}-${{github.sha}}-${{github.run_number}}-${{github.run_attempt}}
+        cache-from: type=gha
+        cache-to: type=gha,mode=max
+
+  deploy:
+    runs-on: ubuntu-latest
+    needs: build
+    strategy:
+      matrix:
+        example: ["todo", "pets"]
+
+    steps:
+    - uses: actions/checkout@v3
+      with:
+        submodules: true
     - uses: gacts/install-nomad@v1
     - name: Tailscale
       uses: tailscale/github-action@v1
@@ -69,9 +82,9 @@ jobs:
 
         export DOCKER_USER=gardencmp;
         export DOCKER_PASSWORD=${{ secrets.DOCKER_PULL_PAT }};
-        export DOCKER_TAG=${{ env.DOCKER_TAG }};
+        export DOCKER_TAG=ghcr.io/gardencmp/${{github.event.repository.name}}-example-${{ matrix.example }}:${{github.head_ref || github.ref_name}}-${{github.sha}}-${{github.run_number}}-${{github.run_attempt}};
 
         envsubst '${DOCKER_USER} ${DOCKER_PASSWORD} ${DOCKER_TAG} ${BRANCH_SUFFIX} ${BRANCH_SUBDOMAIN}' < job-template.nomad > job-instance.nomad;
         cat job-instance.nomad;
         NOMAD_ADDR='http://control1v2-london:4646' nomad job run job-instance.nomad;
-      working-directory: ./examples/todo
+      working-directory: ./examples/${{ matrix.example }}

README.md

@@ -79,4 +79,13 @@ framework-agnostic primitives that allow you to use CoJSON in the browser. Used
 **`jazz-storage-indexeddb`**
 
 Provides local, offline-capable persistence. Included and enabled in `jazz-react` by default.
+
+**`jazz-react-media-images`**  → [DOCS](./DOCS.md#jazz-react-media-images)
+
+TODO: document
+
+**`jazz-browser-media-images`**  → [DOCS](./DOCS.md#jazz-browser-media-images)
+
+TODO: document
+
 </small>

examples/pets/.eslintrc.cjs

@@ -0,0 +1,18 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}

examples/pets/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

examples/pets/Dockerfile

@@ -0,0 +1,4 @@
+FROM caddy:2.7.3-alpine
+LABEL org.opencontainers.image.source="https://github.com/gardencmp/jazz"
+
+COPY ./dist /usr/share/caddy/

examples/pets/README.md

@@ -0,0 +1,51 @@
+# Jazz Rate-My-Pet List Example
+
+Live version: https://example-pets.jazz.tools
+
+## Installing & running the example locally
+
+Start by checking out just the example app to a folder:
+
+```bash
+npx degit gardencmp/jazz/examples/pets jazz-example-pets
+cd jazz-example-pets
+```
+
+(This ensures that you have the example app without git history or our multi-package monorepo)
+
+Install dependencies:
+
+```bash
+npm install
+```
+
+Start the dev server:
+
+```bash
+npm run dev
+```
+
+## Structure
+
+TODO
+
+## Walkthrough
+
+### Main parts
+
+TODO
+
+### Helpers
+
+TODO
+
+## Questions / problems / feedback
+
+If you have feedback, let us know on [Discord](https://discord.gg/utDMjHYg42) or open an issue or PR to fix something that seems wrong.
+
+
+## Configuration: sync server
+
+By default, the example app uses [Jazz Global Mesh](https://jazz.tools/mesh) (`wss://sync.jazz.tools`) - so cross-device use, invites and collaboration should just work.
+
+You can also run a local sync server by running `npx cojson-simple-sync` and adding the query param `?sync=ws://localhost:4200` to the URL of the example app (for example: `http://localhost:5173/?sync=ws://localhost:4200`), or by setting the `sync` parameter of the `<WithJazz>` provider component in [./src/0_main.tsx](./src/0_main.tsx).

examples/pets/components.json

@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/index.css",
+    "baseColor": "stone",
+    "cssVariables": true
+  },
+  "aliases": {
+    "components": "@/basicComponents",
+    "utils": "@/basicComponents/lib/utils"
+  }
+}

examples/pets/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/png" href="/jazz-logo.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Jazz Rate My Pet Example</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/0_main.tsx"></script>
+  </body>
+</html>

examples/pets/job-template.nomad

@@ -0,0 +1,56 @@
+job "example-pets$BRANCH_SUFFIX" {
+  region     = "global"
+  datacenters = ["*"]
+
+  group "static" {
+    count = 8
+
+    network {
+      port "http" {
+        to = 80
+      }
+    }
+
+    constraint {
+      attribute = "${node.class}"
+      operator  = "="
+      value     = "mesh"
+    }
+
+    spread {
+      attribute = "${node.datacenter}"
+      weight    = 100
+    }
+
+    constraint {
+      distinct_hosts = true
+    }
+
+    task "server" {
+      driver = "docker"
+
+      config {
+        image = "$DOCKER_TAG"
+        ports = ["http"]
+
+        auth = {
+          username = "$DOCKER_USER"
+          password = "$DOCKER_PASSWORD"
+        }
+      }
+
+      service {
+        tags = ["public"]
+        name = "example-pets$BRANCH_SUFFIX"
+        port = "http"
+        provider = "consul"
+      }
+
+      resources {
+        cpu    = 50 # MHz
+        memory = 50 # MB
+      }
+    }
+  }
+}
+# deploy bump 4

examples/pets/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "jazz-example-pets",
+  "private": true,
+  "version": "0.0.9",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@radix-ui/react-checkbox": "^1.0.4",
+    "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-toast": "^1.1.4",
+    "@types/qrcode": "^1.5.1",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.0.0",
+    "jazz-react": "^0.2.5",
+    "jazz-react-auth-local": "^0.2.5",
+    "jazz-react-media-images": "^0.2.5",
+    "lucide-react": "^0.274.0",
+    "qrcode": "^1.5.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "tailwind-merge": "^1.14.0",
+    "tailwindcss-animate": "^1.0.7",
+    "uniqolor": "^1.1.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.15",
+    "@types/react-dom": "^18.2.7",
+    "@typescript-eslint/eslint-plugin": "^6.0.0",
+    "@typescript-eslint/parser": "^6.0.0",
+    "@vitejs/plugin-react-swc": "^3.3.2",
+    "autoprefixer": "^10.4.14",
+    "eslint": "^8.45.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.3",
+    "postcss": "^8.4.27",
+    "tailwindcss": "^3.3.3",
+    "typescript": "^5.0.2",
+    "vite": "^4.4.5"
+  }
+}

examples/pets/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

examples/pets/src/0_main.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import "./index.css";
+
+import { WithJazz } from "jazz-react";
+import { LocalAuth } from "jazz-react-auth-local";
+
+import { ThemeProvider, TitleAndLogo } from "./basicComponents/index.ts";
+import { PrettyAuthUI } from "./components/Auth.tsx";
+import App from "./2_App.tsx";
+
+/** Walkthrough: The top-level provider `<WithJazz/>`
+ *
+ *  This shows how to use the top-level provider `<WithJazz/>`,
+ *  which provides the rest of the app with a `LocalNode` (used through `useJazz` later),
+ *  based on `LocalAuth` that uses PassKeys (aka WebAuthn) to store a user's account secret
+ *  - no backend needed. */
+
+const appName = "Jazz Rate My Pet Example";
+
+const auth = LocalAuth({
+    appName,
+    Component: PrettyAuthUI,
+});
+
+ReactDOM.createRoot(document.getElementById("root")!).render(
+    <React.StrictMode>
+        <ThemeProvider>
+            <TitleAndLogo name={appName} />
+
+            <WithJazz auth={auth}>
+                <App />
+            </WithJazz>
+        </ThemeProvider>
+    </React.StrictMode>
+);
+
+/** Walkthrough: Continue with ./1_types.ts */

examples/pets/src/1_types.ts

@@ -0,0 +1,29 @@
+import { CoMap, CoStream, Media } from "cojson";
+
+/** Walkthrough: Defining the data model with CoJSON
+ *
+ *  Here, we define our main data model of TODO
+ *
+ *  TODO
+ **/
+
+export type PetPost = CoMap<{
+    name: string;
+    image: Media.ImageDefinition;
+    reactions: PetReactions;
+}>;
+
+export const REACTION_TYPES = [
+    "aww",
+    "love",
+    "haha",
+    "wow",
+    "tiny",
+    "chonkers",
+] as const;
+
+export type ReactionType = (typeof REACTION_TYPES)[number];
+
+export type PetReactions = CoStream<ReactionType>;
+
+/** Walkthrough: Continue with ./2_App.tsx */

examples/pets/src/2_App.tsx

@@ -0,0 +1,48 @@
+import { useJazz } from "jazz-react";
+
+import { PetPost } from "./1_types";
+
+import { Button } from "./basicComponents";
+
+import { useSimpleHashRouterThatAcceptsInvites } from "./router";
+import { RatePetPostUI } from "./4_RatePetPostUI";
+import { CreatePetPostForm } from "./3_CreatePetPostForm";
+
+/** Walkthrough: Creating pet posts & routing in `<App/>`
+ *
+ *  <App> is the main app component, handling client-side routing based
+ *  on the CoValue ID (CoID) of our PetPost, stored in the URL hash
+ *  - which can also contain invite links.
+ */
+
+export default function App() {
+    // A `LocalNode` represents a local view of loaded & created CoValues.
+    // It is associated with a current user account, which will determine
+    // access rights to CoValues. We get it from the top-level provider `<WithJazz/>`.
+    const { localNode, logOut } = useJazz();
+
+    // This sets up routing and accepting invites, skip for now
+    const [currentPetPostID, navigateToPetPostID] =
+        useSimpleHashRouterThatAcceptsInvites<PetPost>(localNode);
+
+    return (
+        <div className="flex flex-col h-full items-center justify-start gap-10 pt-10 pb-10 px-5">
+            {currentPetPostID ? (
+                <RatePetPostUI petPostID={currentPetPostID} />
+            ) : (
+                <CreatePetPostForm onCreate={navigateToPetPostID} />
+            )}
+            <Button
+                onClick={() => {
+                    navigateToPetPostID(undefined);
+                    logOut();
+                }}
+                variant="outline"
+            >
+                Log Out
+            </Button>
+        </div>
+    );
+}
+
+/** Walkthrough: continue with ./3_CreatePetPostForm.tsx */

examples/pets/src/3_CreatePetPostForm.tsx

@@ -0,0 +1,106 @@
+import { ChangeEvent, useCallback, useState } from "react";
+
+import { CoID, CoMap, Media } from "cojson";
+import { useJazz, useTelepathicQuery } from "jazz-react";
+import { createImage } from "jazz-browser-media-images";
+
+import { PetPost, PetReactions } from "./1_types";
+
+import { Input, Button } from "./basicComponents";
+import { useLoadImage } from "jazz-react-media-images";
+
+/** Walkthrough: TODO
+ */
+
+type PartialPetPost = CoMap<{
+    name: string;
+    image?: Media.ImageDefinition;
+    reactions: PetReactions;
+}>
+
+export function CreatePetPostForm({
+    onCreate,
+}: {
+    onCreate: (id: CoID<PetPost>) => void;
+}) {
+    const { localNode } = useJazz();
+
+    const [newPostId, setNewPostId] = useState<CoID<PartialPetPost> | undefined>(
+        undefined
+    );
+
+    const newPetPost = useTelepathicQuery(newPostId);
+
+    const onChangeName = useCallback(
+        (name: string) => {
+            if (newPetPost) {
+                newPetPost.edit((petPost) => {
+                    petPost.set("name", name);
+                });
+            } else {
+                const petPostGroup = localNode.createGroup();
+                const petPost = petPostGroup.createMap<PartialPetPost>({
+                    name,
+                    reactions: petPostGroup.createStream<PetReactions>(),
+                });
+
+                setNewPostId(petPost.id);
+            }
+        },
+        [localNode, newPetPost]
+    );
+
+    const onImageSelected = useCallback(
+        async (event: ChangeEvent<HTMLInputElement>) => {
+            if (!newPetPost || !event.target.files) return;
+
+            const image = await createImage(
+                event.target.files[0],
+                newPetPost.group
+            );
+
+            newPetPost.edit((petPost) => {
+                petPost.set("image", image);
+            });
+        },
+        [newPetPost]
+    );
+
+    const petImage = useLoadImage(newPetPost?.image?.id);
+
+    return (
+        <div className="flex flex-col gap-10">
+            <p>Share your pet with friends!</p>
+            <Input
+                type="text"
+                placeholder="Pet Name"
+                className="text-3xl py-6"
+                onChange={(event) => onChangeName(event.target.value)}
+                value={newPetPost?.name || ""}
+            />
+
+            {petImage ? (
+                <img
+                    className="w-80 max-w-full rounded"
+                    src={petImage.highestResSrc || petImage.placeholderDataURL}
+                />
+            ) : (
+                <Input
+                    type="file"
+                    disabled={!newPetPost?.name}
+                    onChange={onImageSelected}
+                />
+            )}
+
+            {newPetPost?.name && newPetPost?.image && (
+                <Button
+                    onClick={() => {
+                        onCreate(newPetPost.id as CoID<PetPost>);
+                    }}
+                >
+                    Submit Post
+                </Button>
+            )}
+        </div>
+    );
+}

examples/pets/src/4_RatePetPostUI.tsx

@@ -0,0 +1,119 @@
+import { CoID, Queried } from "cojson";
+import { useTelepathicQuery } from "jazz-react";
+
+import { PetPost, ReactionType, REACTION_TYPES, PetReactions } from "./1_types";
+
+import { ShareButton } from "./components/ShareButton";
+import { Button, Skeleton } from "./basicComponents";
+import { useLoadImage } from "jazz-react-media-images";
+import uniqolor from "uniqolor";
+
+/** Walkthrough: TODO
+ */
+
+const reactionEmojiMap: { [reaction in ReactionType]: string } = {
+    aww: "😍",
+    love: "❤️",
+    haha: "😂",
+    wow: "😮",
+    tiny: "🐥",
+    chonkers: "🐘",
+};
+
+export function RatePetPostUI({ petPostID }: { petPostID: CoID<PetPost> }) {
+    const petPost = useTelepathicQuery(petPostID);
+    const petImage = useLoadImage(petPost?.image);
+
+    return (
+        <div className="flex flex-col gap-8">
+            <div className="flex justify-between">
+                <h1 className="text-3xl font-bold">{petPost?.name}</h1>
+                <ShareButton petPost={petPost} />
+            </div>
+
+            {petImage && (
+                <img
+                    className="w-80 max-w-full rounded"
+                    src={petImage.highestResSrc || petImage.placeholderDataURL}
+                />
+            )}
+
+            <div className="flex justify-between max-w-xs flex-wrap">
+                {REACTION_TYPES.map((reactionType) => (
+                    <Button
+                        key={reactionType}
+                        variant={
+                            petPost?.reactions?.me?.last === reactionType
+                                ? "default"
+                                : "outline"
+                        }
+                        onClick={() => {
+                            petPost?.reactions?.edit((reactions) => {
+                                reactions.push(reactionType);
+                            });
+                        }}
+                        title={`React with ${reactionType}`}
+                        className="text-2xl px-2"
+                    >
+                        {reactionEmojiMap[reactionType]}
+                    </Button>
+                ))}
+            </div>
+
+            {petPost?.group.myRole() === "admin" && petPost.reactions && (
+                <ReactionOverview petReactions={petPost.reactions} />
+            )}
+        </div>
+    );
+}
+
+function ReactionOverview({
+    petReactions,
+}: {
+    petReactions: Queried<PetReactions>;
+}) {
+    return (
+        <div>
+            <h2>Reactions</h2>
+            <div className="flex flex-col gap-1">
+                {REACTION_TYPES.map((reactionType) => {
+                    const reactionsOfThisType = Object.values(
+                        petReactions.perAccount
+                    ).filter(({ last }) => last === reactionType);
+
+                    if (reactionsOfThisType.length === 0) return null;
+
+                    return (
+                        <div
+                            className="flex gap-2 items-center"
+                            key={reactionType}
+                        >
+                            {reactionEmojiMap[reactionType]}{" "}
+                            {reactionsOfThisType.map((reaction) =>
+                                reaction.by?.profile?.name ? (
+                                    <span
+                                        className="rounded-full py-0.5 px-2 text-xs"
+                                        style={uniqueColoring(reaction.by.id)}
+                                    >
+                                        {reaction.by.profile.name}
+                                    </span>
+                                ) : (
+                                    <Skeleton className="mt-1 w-[50px] h-[1em] rounded-full" />
+                                )
+                            )}
+                        </div>
+                    );
+                })}
+            </div>
+        </div>
+    );
+}
+
+function uniqueColoring(seed: string) {
+    const darkMode = window.matchMedia("(prefers-color-scheme: dark)").matches;
+
+    return {
+        color: uniqolor(seed, { lightness: darkMode ? 80 : 20 }).color,
+        background: uniqolor(seed, { lightness: darkMode ? 20 : 80 }).color,
+    };
+}

examples/pets/src/basicComponents/TitleAndLogo.tsx

@@ -0,0 +1,12 @@
+import { Toaster } from ".";
+
+export function TitleAndLogo({ name }: { name: string }) {
+    return (
+        <>
+            <div className="flex items-center gap-2 justify-center mt-5">
+                <img src="jazz-logo.png" className="h-5" /> {name}
+            </div>
+            <Toaster />
+        </>
+    );
+}

examples/pets/src/basicComponents/index.ts

@@ -0,0 +1,7 @@
+export { Button } from "./ui/button";
+export { Input } from "./ui/input";
+export { Toaster } from "./ui/toaster";
+export { useToast } from "./ui/use-toast";
+export { Skeleton } from "./ui/skeleton";
+export { TitleAndLogo } from "./TitleAndLogo";
+export { ThemeProvider } from "./themeProvider";

examples/pets/src/basicComponents/lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+ 
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

examples/pets/src/basicComponents/themeProvider.tsx

@@ -0,0 +1,72 @@
+import { createContext, useContext, useEffect, useState } from "react";
+
+type ThemeProviderProps = {
+    children: React.ReactNode;
+    defaultTheme?: string;
+    storageKey?: string;
+};
+
+type ThemeProviderState = {
+    theme: string;
+    setTheme: (theme: string) => void;
+};
+
+const initialState = {
+    theme: "system",
+    setTheme: () => null,
+};
+
+const ThemeProviderContext = createContext<ThemeProviderState>(initialState);
+
+export function ThemeProvider({
+    children,
+    defaultTheme = "system",
+    storageKey = "vite-ui-theme",
+    ...props
+}: ThemeProviderProps) {
+    const [theme, setTheme] = useState(
+        () => localStorage.getItem(storageKey) || defaultTheme
+    );
+
+    useEffect(() => {
+        const root = window.document.documentElement;
+
+        root.classList.remove("light", "dark");
+
+        if (theme === "system") {
+            const systemTheme = window.matchMedia(
+                "(prefers-color-scheme: dark)"
+            ).matches
+                ? "dark"
+                : "light";
+
+            root.classList.add(systemTheme);
+            return;
+        }
+
+        root.classList.add(theme);
+    }, [theme]);
+
+    const value = {
+        theme,
+        setTheme: (theme: string) => {
+            localStorage.setItem(storageKey, theme);
+            setTheme(theme);
+        },
+    };
+
+    return (
+        <ThemeProviderContext.Provider {...props} value={value}>
+            {children}
+        </ThemeProviderContext.Provider>
+    );
+}
+
+export const useTheme = () => {
+    const context = useContext(ThemeProviderContext);
+
+    if (context === undefined)
+        throw new Error("useTheme must be used within a ThemeProvider");
+
+    return context;
+};

examples/pets/src/basicComponents/ui/button.tsx

@@ -0,0 +1,56 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/basicComponents/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button"
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Button.displayName = "Button"
+
+export { Button, buttonVariants }

examples/pets/src/basicComponents/ui/input.tsx

@@ -0,0 +1,25 @@
+import * as React from "react"
+
+import { cn } from "@/basicComponents/lib/utils"
+
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Input.displayName = "Input"
+
+export { Input }

examples/pets/src/basicComponents/ui/skeleton.tsx

@@ -0,0 +1,15 @@
+import { cn } from "@/basicComponents/lib/utils"
+
+function Skeleton({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn("animate-pulse rounded-md bg-muted", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }

examples/pets/src/basicComponents/ui/toast.tsx

@@ -0,0 +1,127 @@
+import * as React from "react"
+import * as ToastPrimitives from "@radix-ui/react-toast"
+import { cva, type VariantProps } from "class-variance-authority"
+import { X } from "lucide-react"
+
+import { cn } from "@/basicComponents/lib/utils"
+
+const ToastProvider = ToastPrimitives.Provider
+
+const ToastViewport = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Viewport>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Viewport
+    ref={ref}
+    className={cn(
+      "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
+      className
+    )}
+    {...props}
+  />
+))
+ToastViewport.displayName = ToastPrimitives.Viewport.displayName
+
+const toastVariants = cva(
+  "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
+  {
+    variants: {
+      variant: {
+        default: "border bg-background text-foreground",
+        destructive:
+          "destructive group border-destructive bg-destructive text-destructive-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+const Toast = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
+    VariantProps<typeof toastVariants>
+>(({ className, variant, ...props }, ref) => {
+  return (
+    <ToastPrimitives.Root
+      ref={ref}
+      className={cn(toastVariants({ variant }), className)}
+      {...props}
+    />
+  )
+})
+Toast.displayName = ToastPrimitives.Root.displayName
+
+const ToastAction = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Action>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Action
+    ref={ref}
+    className={cn(
+      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
+      className
+    )}
+    {...props}
+  />
+))
+ToastAction.displayName = ToastPrimitives.Action.displayName
+
+const ToastClose = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Close>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Close
+    ref={ref}
+    className={cn(
+      "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
+      className
+    )}
+    toast-close=""
+    {...props}
+  >
+    <X className="h-4 w-4" />
+  </ToastPrimitives.Close>
+))
+ToastClose.displayName = ToastPrimitives.Close.displayName
+
+const ToastTitle = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Title>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Title
+    ref={ref}
+    className={cn("text-sm font-semibold", className)}
+    {...props}
+  />
+))
+ToastTitle.displayName = ToastPrimitives.Title.displayName
+
+const ToastDescription = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Description>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Description
+    ref={ref}
+    className={cn("text-sm opacity-90", className)}
+    {...props}
+  />
+))
+ToastDescription.displayName = ToastPrimitives.Description.displayName
+
+type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>
+
+type ToastActionElement = React.ReactElement<typeof ToastAction>
+
+export {
+  type ToastProps,
+  type ToastActionElement,
+  ToastProvider,
+  ToastViewport,
+  Toast,
+  ToastTitle,
+  ToastDescription,
+  ToastClose,
+  ToastAction,
+}

examples/pets/src/basicComponents/ui/toaster.tsx

@@ -0,0 +1,33 @@
+import {
+  Toast,
+  ToastClose,
+  ToastDescription,
+  ToastProvider,
+  ToastTitle,
+  ToastViewport,
+} from "@/basicComponents/ui/toast"
+import { useToast } from "@/basicComponents/ui/use-toast"
+
+export function Toaster() {
+  const { toasts } = useToast()
+
+  return (
+    <ToastProvider>
+      {toasts.map(function ({ id, title, description, action, ...props }) {
+        return (
+          <Toast key={id} {...props}>
+            <div className="grid gap-1">
+              {title && <ToastTitle>{title}</ToastTitle>}
+              {description && (
+                <ToastDescription>{description}</ToastDescription>
+              )}
+            </div>
+            {action}
+            <ToastClose />
+          </Toast>
+        )
+      })}
+      <ToastViewport />
+    </ToastProvider>
+  )
+}

examples/pets/src/basicComponents/ui/use-toast.ts

@@ -0,0 +1,192 @@
+// Inspired by react-hot-toast library
+import * as React from "react"
+
+import type {
+  ToastActionElement,
+  ToastProps,
+} from "@/basicComponents/ui/toast"
+
+const TOAST_LIMIT = 1
+const TOAST_REMOVE_DELAY = 1000000
+
+type ToasterToast = ToastProps & {
+  id: string
+  title?: React.ReactNode
+  description?: React.ReactNode
+  action?: ToastActionElement
+}
+
+const actionTypes = {
+  ADD_TOAST: "ADD_TOAST",
+  UPDATE_TOAST: "UPDATE_TOAST",
+  DISMISS_TOAST: "DISMISS_TOAST",
+  REMOVE_TOAST: "REMOVE_TOAST",
+} as const
+
+let count = 0
+
+function genId() {
+  count = (count + 1) % Number.MAX_VALUE
+  return count.toString()
+}
+
+type ActionType = typeof actionTypes
+
+type Action =
+  | {
+      type: ActionType["ADD_TOAST"]
+      toast: ToasterToast
+    }
+  | {
+      type: ActionType["UPDATE_TOAST"]
+      toast: Partial<ToasterToast>
+    }
+  | {
+      type: ActionType["DISMISS_TOAST"]
+      toastId?: ToasterToast["id"]
+    }
+  | {
+      type: ActionType["REMOVE_TOAST"]
+      toastId?: ToasterToast["id"]
+    }
+
+interface State {
+  toasts: ToasterToast[]
+}
+
+const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()
+
+const addToRemoveQueue = (toastId: string) => {
+  if (toastTimeouts.has(toastId)) {
+    return
+  }
+
+  const timeout = setTimeout(() => {
+    toastTimeouts.delete(toastId)
+    dispatch({
+      type: "REMOVE_TOAST",
+      toastId: toastId,
+    })
+  }, TOAST_REMOVE_DELAY)
+
+  toastTimeouts.set(toastId, timeout)
+}
+
+export const reducer = (state: State, action: Action): State => {
+  switch (action.type) {
+    case "ADD_TOAST":
+      return {
+        ...state,
+        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
+      }
+
+    case "UPDATE_TOAST":
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === action.toast.id ? { ...t, ...action.toast } : t
+        ),
+      }
+
+    case "DISMISS_TOAST": {
+      const { toastId } = action
+
+      // ! Side effects ! - This could be extracted into a dismissToast() action,
+      // but I'll keep it here for simplicity
+      if (toastId) {
+        addToRemoveQueue(toastId)
+      } else {
+        state.toasts.forEach((toast) => {
+          addToRemoveQueue(toast.id)
+        })
+      }
+
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === toastId || toastId === undefined
+            ? {
+                ...t,
+                open: false,
+              }
+            : t
+        ),
+      }
+    }
+    case "REMOVE_TOAST":
+      if (action.toastId === undefined) {
+        return {
+          ...state,
+          toasts: [],
+        }
+      }
+      return {
+        ...state,
+        toasts: state.toasts.filter((t) => t.id !== action.toastId),
+      }
+  }
+}
+
+const listeners: Array<(state: State) => void> = []
+
+let memoryState: State = { toasts: [] }
+
+function dispatch(action: Action) {
+  memoryState = reducer(memoryState, action)
+  listeners.forEach((listener) => {
+    listener(memoryState)
+  })
+}
+
+type Toast = Omit<ToasterToast, "id">
+
+function toast({ ...props }: Toast) {
+  const id = genId()
+
+  const update = (props: ToasterToast) =>
+    dispatch({
+      type: "UPDATE_TOAST",
+      toast: { ...props, id },
+    })
+  const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id })
+
+  dispatch({
+    type: "ADD_TOAST",
+    toast: {
+      ...props,
+      id,
+      open: true,
+      onOpenChange: (open) => {
+        if (!open) dismiss()
+      },
+    },
+  })
+
+  return {
+    id: id,
+    dismiss,
+    update,
+  }
+}
+
+function useToast() {
+  const [state, setState] = React.useState<State>(memoryState)
+
+  React.useEffect(() => {
+    listeners.push(setState)
+    return () => {
+      const index = listeners.indexOf(setState)
+      if (index > -1) {
+        listeners.splice(index, 1)
+      }
+    }
+  }, [state])
+
+  return {
+    ...state,
+    toast,
+    dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
+  }
+}
+
+export { useToast, toast }

examples/pets/src/components/Auth.tsx

@@ -0,0 +1,48 @@
+import { useState } from "react";
+
+import { LocalAuthComponent } from "jazz-react-auth-local";
+
+import { Input, Button } from "../basicComponents";
+
+export const PrettyAuthUI: LocalAuthComponent = ({
+    loading,
+    logIn,
+    signUp,
+}) => {
+    const [username, setUsername] = useState<string>("");
+
+    return (
+        <div className="w-full h-full flex items-center justify-center p-5">
+            {loading ? (
+                <div>Loading...</div>
+            ) : (
+                <div className="w-72 flex flex-col gap-4">
+                    <form
+                        className="w-72 flex flex-col gap-2"
+                        onSubmit={(e) => {
+                            e.preventDefault();
+                            signUp(username);
+                        }}
+                    >
+                        <Input
+                            placeholder="Display name"
+                            value={username}
+                            onChange={(e) => setUsername(e.target.value)}
+                            autoComplete="webauthn"
+                            className="text-base"
+                        />
+                        <Button asChild>
+                            <Input
+                                type="submit"
+                                value="Sign Up as new account"
+                            />
+                        </Button>
+                    </form>
+                    <Button onClick={logIn}>
+                        Log In with existing account
+                    </Button>
+                </div>
+            )}
+        </div>
+    );
+};

examples/pets/src/components/ShareButton.tsx

@@ -0,0 +1,47 @@
+import { useState } from "react";
+
+import { PetPost } from "../1_types";
+
+import { createInviteLink } from "jazz-react";
+import QRCode from "qrcode";
+
+import { useToast, Button } from "../basicComponents";
+import { Queried } from "cojson";
+
+export function ShareButton({ petPost }: { petPost?: Queried<PetPost> }) {
+    const [existingInviteLink, setExistingInviteLink] = useState<string>();
+    const { toast } = useToast();
+
+    return (
+        petPost?.group.myRole() === "admin" && (
+            <Button
+                size="sm"
+                className="py-0"
+                disabled={!petPost}
+                variant="outline"
+                onClick={async () => {
+                    let inviteLink = existingInviteLink;
+                    if (petPost && !inviteLink) {
+                        inviteLink = createInviteLink(petPost, "writer");
+                        setExistingInviteLink(inviteLink);
+                    }
+                    if (inviteLink) {
+                        const qr = await QRCode.toDataURL(inviteLink, {
+                            errorCorrectionLevel: "L",
+                        });
+                        navigator.clipboard.writeText(inviteLink).then(() =>
+                            toast({
+                                title: "Copied invite link to clipboard!",
+                                description: (
+                                    <img src={qr} className="w-20 h-20" />
+                                ),
+                            })
+                        );
+                    }
+                }}
+            >
+                Share
+            </Button>
+        )
+    );
+}

examples/pets/src/index.css

@@ -0,0 +1,76 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+ 
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 20 14.3% 4.1%;
+
+    --card: 0 0% 100%;
+    --card-foreground: 20 14.3% 4.1%;
+ 
+    --popover: 0 0% 100%;
+    --popover-foreground: 20 14.3% 4.1%;
+ 
+    --primary: 24 9.8% 10%;
+    --primary-foreground: 60 9.1% 97.8%;
+ 
+    --secondary: 60 4.8% 95.9%;
+    --secondary-foreground: 24 9.8% 10%;
+ 
+    --muted: 60 4.8% 95.9%;
+    --muted-foreground: 25 5.3% 44.7%;
+ 
+    --accent: 60 4.8% 95.9%;
+    --accent-foreground: 24 9.8% 10%;
+ 
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 60 9.1% 97.8%;
+
+    --border: 20 5.9% 90%;
+    --input: 20 5.9% 90%;
+    --ring: 20 14.3% 4.1%;
+ 
+    --radius: 0.5rem;
+  }
+ 
+  .dark {
+    --background: 20 14.3% 4.1%;
+    --foreground: 60 9.1% 97.8%;
+ 
+    --card: 20 14.3% 4.1%;
+    --card-foreground: 60 9.1% 97.8%;
+ 
+    --popover: 20 14.3% 4.1%;
+    --popover-foreground: 60 9.1% 97.8%;
+ 
+    --primary: 60 9.1% 97.8%;
+    --primary-foreground: 24 9.8% 10%;
+ 
+    --secondary: 12 6.5% 15.1%;
+    --secondary-foreground: 60 9.1% 97.8%;
+ 
+    --muted: 12 6.5% 15.1%;
+    --muted-foreground: 24 5.4% 63.9%;
+ 
+    --accent: 12 6.5% 15.1%;
+    --accent-foreground: 60 9.1% 97.8%;
+ 
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 60 9.1% 97.8%;
+ 
+    --border: 12 6.5% 15.1%;
+    --input: 12 6.5% 15.1%;
+    --ring: 24 5.7% 82.9%;
+  }
+}
+ 
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

examples/pets/src/router.ts

@@ -0,0 +1,37 @@
+import { useCallback, useEffect, useState } from "react";
+import { CoID, LocalNode, CoValue } from "cojson";
+import { consumeInviteLinkFromWindowLocation } from "jazz-react";
+
+export function useSimpleHashRouterThatAcceptsInvites<C extends CoValue>(
+    localNode: LocalNode
+) {
+    const [currentValueId, setCurrentValueId] = useState<CoID<C>>();
+
+    useEffect(() => {
+        const listener = async () => {
+            const acceptedInvitation = await consumeInviteLinkFromWindowLocation<C>(localNode);
+
+            if (acceptedInvitation) {
+                setCurrentValueId(acceptedInvitation.valueID);
+                window.location.hash = acceptedInvitation.valueID;
+                return;
+            }
+
+            setCurrentValueId(
+                (window.location.hash.slice(1) as CoID<C>) || undefined
+            );
+        };
+        window.addEventListener("hashchange", listener);
+        listener();
+
+        return () => {
+            window.removeEventListener("hashchange", listener);
+        };
+    }, [localNode]);
+
+    const navigateToValue = useCallback((id: CoID<C> | undefined) => {
+        window.location.hash = id || "";
+    }, []);
+
+    return [currentValueId, navigateToValue] as const;
+}

examples/pets/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

examples/pets/tailwind.config.js

@@ -0,0 +1,76 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  darkMode: ["class"],
+  content: [
+    './pages/**/*.{ts,tsx}',
+    './components/**/*.{ts,tsx}',
+    './app/**/*.{ts,tsx}',
+    './src/**/*.{ts,tsx}',
+	],
+  theme: {
+    container: {
+      center: true,
+      padding: "2rem",
+      screens: {
+        "2xl": "1400px",
+      },
+    },
+    extend: {
+      colors: {
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+      keyframes: {
+        "accordion-down": {
+          from: { height: 0 },
+          to: { height: "var(--radix-accordion-content-height)" },
+        },
+        "accordion-up": {
+          from: { height: "var(--radix-accordion-content-height)" },
+          to: { height: 0 },
+        },
+      },
+      animation: {
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out",
+      },
+    },
+  },
+  plugins: [require("tailwindcss-animate")],
+}

examples/pets/tsconfig.json

@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2023", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

examples/pets/tsconfig.node.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}

examples/pets/vite.config.ts

@@ -0,0 +1,16 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react-swc'
+import path from "path";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "./src"),
+    },
+  },
+  build: {
+    minify: false
+  }
+})

examples/todo/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jazz-example-todo",
   "private": true,
-  "version": "0.0.26",
+  "version": "0.0.34",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -16,8 +16,8 @@
     "@types/qrcode": "^1.5.1",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
-    "jazz-react": "^0.1.12",
-    "jazz-react-auth-local": "^0.1.12",
+    "jazz-react": "^0.2.5",
+    "jazz-react-auth-local": "^0.2.5",
     "lucide-react": "^0.274.0",
     "qrcode": "^1.5.3",
     "react": "^18.2.0",

examples/todo/src/1_types.ts

@@ -1,4 +1,4 @@
-import { CoMap, CoList, CoID } from "cojson";
+import { CoMap, CoList } from "cojson";
 
 /** Walkthrough: Defining the data model with CoJSON
  *
@@ -16,13 +16,11 @@ import { CoMap, CoList, CoID } from "cojson";
 /** An individual task which collaborators can tick or rename */
 export type Task = CoMap<{ done: boolean; text: string; }>;
 
-/** A collaborative, ordered list of task references */
-export type ListOfTasks = CoList<CoID<Task>>;
-
 /** Our top level object: a project with a title, referencing a list of tasks */
 export type TodoProject = CoMap<{
     title: string;
-    tasks: CoID<ListOfTasks>;
+    /** A collaborative, ordered list of tasks */
+    tasks: CoList<Task>;
 }>;
 
 /** Walkthrough: Continue with ./2_App.tsx */

examples/todo/src/2_App.tsx

@@ -2,12 +2,13 @@ import { useCallback } from "react";
 
 import { useJazz } from "jazz-react";
 
-import { TodoProject, ListOfTasks } from "./1_types";
+import { Task, TodoProject } from "./1_types";
 
 import { SubmittableInput, Button } from "./basicComponents";
 
 import { useSimpleHashRouterThatAcceptsInvites } from "./router";
 import { TodoTable } from "./3_TodoTable";
+import { CoList } from "cojson";
 
 /** Walkthrough: Creating todo projects & routing in `<App/>`
  *
@@ -35,15 +36,10 @@ export default function App() {
             // of its members, which will apply to all CoValues owned by that group.
             const projectGroup = localNode.createGroup();
 
-            // Then we create an empty todo project and list of tasks within that group.
-            const project = projectGroup.createMap<TodoProject>();
-            const tasks = projectGroup.createList<ListOfTasks>();
-
-            // We edit the todo project to initialise it.
-            // Inside the `.edit` callback we can mutate a CoValue
-            project.edit((project) => {
-                project.set("title", title);
-                project.set("tasks", tasks.id);
+            // Then we create an empty todo project
+            const project = projectGroup.createMap<TodoProject>({
+                title,
+                tasks: projectGroup.createList<CoList<Task>>()
             });
 
             navigateToProjectId(project.id);

examples/todo/src/3_TodoTable.tsx

@@ -1,7 +1,7 @@
 import { useCallback } from "react";
 
-import { CoID } from "cojson";
-import { useTelepathicState } from "jazz-react";
+import { CoID, Queried } from "cojson";
+import { useTelepathicQuery } from "jazz-react";
 
 import { TodoProject, Task } from "./1_types";
 
@@ -18,7 +18,7 @@ import {
 } from "./basicComponents";
 
 import { InviteButton } from "./components/InviteButton";
-import { NameBadge } from "./components/NameBadge";
+import uniqolor from "uniqolor";
 
 /** Walkthrough: Reactively rendering a todo project as a table,
  *               adding and editing tasks
@@ -32,27 +32,24 @@ export function TodoTable({ projectId }: { projectId: CoID<TodoProject> }) {
     // `useTelepathicData()` reactively subscribes to updates to a CoValue's
     // content - whether we create edits locally, load persisted data, or receive
     // sync updates from other devices or participants!
-    const project = useTelepathicState(projectId);
-    const projectTasks = useTelepathicState(project?.get("tasks"));
+    const project = useTelepathicQuery(projectId);
 
     // `createTask` is similar to `createProject` we saw earlier, creating a new CoMap
     // for a new task (in the same group as the list of tasks/the project), and then
     // adding it as an item to the project's list of tasks.
     const createTask = useCallback(
         (text: string) => {
-            if (!projectTasks || !text) return;
-            const task = projectTasks.group.createMap<Task>();
-
-            task.edit((task) => {
-                task.set("text", text);
-                task.set("done", false);
+            if (!project?.tasks || !text) return;
+            const task = project?.group.createMap<Task>({
+                text,
+                done: false,
             });
 
-            projectTasks.edit((projectTasks) => {
-                projectTasks.push(task.id);
+            project?.tasks.edit((tasks) => {
+                tasks.push(task);
             });
         },
-        [projectTasks]
+        [project?.tasks, project?.group]
     );
 
     return (
@@ -60,11 +57,11 @@ export function TodoTable({ projectId }: { projectId: CoID<TodoProject> }) {
             <div className="flex justify-between items-center gap-4 mb-4">
                 <h1>
                     {
-                        // This is how we can access properties from the project,
+                        // This is how we can access properties from the project query,
                         // accounting for the fact that it might not be loaded yet
-                        project?.get("title") ? (
+                        project?.title ? (
                             <>
-                                {project.get("title")}{" "}
+                                {project.title}{" "}
                                 <span className="text-sm">({project.id})</span>
                             </>
                         ) : (
@@ -72,7 +69,7 @@ export function TodoTable({ projectId }: { projectId: CoID<TodoProject> }) {
                         )
                     }
                 </h1>
-                <InviteButton list={project} />
+                <InviteButton value={project} />
             </div>
             <Table>
                 <TableHeader>
@@ -82,14 +79,9 @@ export function TodoTable({ projectId }: { projectId: CoID<TodoProject> }) {
                     </TableRow>
                 </TableHeader>
                 <TableBody>
-                    {
-                        // Here, we iterate over the items of our `ListOfTasks`
-                        // and render a `<TaskRow>` for each.
-
-                        projectTasks?.map((taskId: CoID<Task>) => (
-                            <TaskRow key={taskId} taskId={taskId} />
-                        ))
-                    }
+                    {project?.tasks?.map(
+                        (task) => task && <TaskRow key={task.id} task={task} />
+                    )}
                     <NewTaskInputRow
                         createTask={createTask}
                         disabled={!project}
@@ -100,17 +92,13 @@ export function TodoTable({ projectId }: { projectId: CoID<TodoProject> }) {
     );
 }
 
-export function TaskRow({ taskId }: { taskId: CoID<Task> }) {
-    // `<TaskRow/>` uses `useTelepathicState()` as well, to granularly load and
-    // subscribe to changes for that particular task.
-    const task = useTelepathicState(taskId);
-
+export function TaskRow({ task }: { task: Queried<Task> | undefined }) {
     return (
         <TableRow>
             <TableCell>
                 <Checkbox
                     className="mt-1"
-                    checked={task?.get("done")}
+                    checked={task?.done}
                     onCheckedChange={(checked) => {
                         // (the only thing we let the user change is the "done" status)
                         task?.edit((task) => {
@@ -121,16 +109,23 @@ export function TaskRow({ taskId }: { taskId: CoID<Task> }) {
             </TableCell>
             <TableCell>
                 <div className="flex flex-row justify-between items-center gap-2">
-                    <span className={task?.get("done") ? "line-through" : ""}>
-                        {task?.get("text") || (
-                            <Skeleton className="mt-1 w-[200px] h-[1em] rounded-full" />
-                        )}
-                    </span>
-                    {/* We also use a `<NameBadge/>` helper component to render the name
-                        of the author of the task. We get the author by using the collaboration
-                        feature `whoEdited(key)` on our `Task` CoMap, which returns the accountID
-                        of the last account that changed a given key in the CoMap. */}
-                    <NameBadge accountID={task?.whoEdited("text")} />
+                    {task?.text ? (
+                        <span className={task?.done ? "line-through" : ""}>
+                            {task.text}
+                        </span>
+                    ) : (
+                        <Skeleton className="mt-1 w-[200px] h-[1em] rounded-full" />
+                    )}
+                    {task?.edits.text?.by?.profile?.name ? (
+                        <span
+                            className="rounded-full py-0.5 px-2 text-xs"
+                            style={uniqueColoring(task.edits.text.by.id)}
+                        >
+                            {task.edits.text.by.profile.name}
+                        </span>
+                    ) : (
+                        <Skeleton className="mt-1 w-[50px] h-[1em] rounded-full" />
+                    )}
                 </div>
             </TableCell>
         </TableRow>
@@ -160,3 +155,12 @@ function NewTaskInputRow({
         </TableRow>
     );
 }
+
+function uniqueColoring(seed: string) {
+    const darkMode = window.matchMedia("(prefers-color-scheme: dark)").matches;
+
+    return {
+        color: uniqolor(seed, { lightness: darkMode ? 80 : 20 }).color,
+        background: uniqolor(seed, { lightness: darkMode ? 20 : 80 }).color,
+    };
+}

examples/todo/src/components/InviteButton.tsx

@@ -1,27 +1,26 @@
 import { useState } from "react";
 
-import { TodoProject } from "../1_types";
-
 import { createInviteLink } from "jazz-react";
 import QRCode from "qrcode";
 
 import { useToast, Button } from "../basicComponents";
+import { CoValue, Queried } from "cojson";
 
-export function InviteButton({ list }: { list?: TodoProject }) {
+export function InviteButton<T extends CoValue>({ value }: { value: T | Queried<T> | undefined }) {
     const [existingInviteLink, setExistingInviteLink] = useState<string>();
     const { toast } = useToast();
 
     return (
-        list?.group.myRole() === "admin" && (
+        value?.group?.myRole() === "admin" && (
             <Button
                 size="sm"
                 className="py-0"
-                disabled={!list}
+                disabled={!value.group || !value.id}
                 variant="outline"
                 onClick={async () => {
                     let inviteLink = existingInviteLink;
-                    if (list && !inviteLink) {
-                        inviteLink = createInviteLink(list, "writer");
+                    if (value.group && value.id && !inviteLink) {
+                        inviteLink = createInviteLink(value, "writer");
                         setExistingInviteLink(inviteLink);
                     }
                     if (inviteLink) {

examples/todo/src/components/NameBadge.tsx

@@ -1,46 +0,0 @@
-import { AccountID } from "cojson";
-import { useProfile } from "jazz-react";
-
-import { Skeleton } from "@/basicComponents";
-import uniqolor from "uniqolor";
-
-/** Walkthrough: Getting user profiles in `<NameBadge/>`
- *
- *  `<NameBadge/>` uses `useProfile(accountID)`, which is a shorthand for
- *  useTelepathicState on an account's profile.
- *
- *  Profiles are always a `CoMap<{name: string}>`, but they might have app-specific
- *  additional properties).
- *
- *  In our case, we just display the profile name (which is set by the LocalAuth
- *  provider when we first create an account).
- */
-
-export function NameBadge({ accountID }: { accountID?: AccountID }) {
-    const profile = useProfile(accountID);
-
-    return accountID && profile?.get("name") ? (
-        <span
-            className="rounded-full py-0.5 px-2 text-xs"
-            style={randomUserColor(accountID)}
-        >
-            {profile.get("name")}
-        </span>
-    ) : (
-        <Skeleton className="mt-1 w-[50px] h-[1em] rounded-full" />
-    );
-}
-
-function randomUserColor(accountID: AccountID) {
-    const theme = window.matchMedia("(prefers-color-scheme: dark)").matches
-        ? "dark"
-        : "light";
-
-    const brightColor = uniqolor(accountID || "", { lightness: 80 }).color;
-    const darkColor = uniqolor(accountID || "", { lightness: 20 }).color;
-
-    return {
-        color: theme == "light" ? darkColor : brightColor,
-        background: theme == "light" ? brightColor : darkColor,
-    };
-}

examples/todo/src/router.ts

@@ -1,8 +1,8 @@
 import { useCallback, useEffect, useState } from "react";
-import { CoID, LocalNode, CoValueImpl } from "cojson";
+import { CoID, LocalNode, CoValue } from "cojson";
 import { consumeInviteLinkFromWindowLocation } from "jazz-react";
 
-export function useSimpleHashRouterThatAcceptsInvites<C extends CoValueImpl>(
+export function useSimpleHashRouterThatAcceptsInvites<C extends CoValue>(
     localNode: LocalNode
 ) {
     const [currentValueId, setCurrentValueId] = useState<CoID<C>>();

generateDocs.ts

@@ -11,11 +11,19 @@ async function main() {
         cojson: "index.ts",
         "jazz-react": "index.tsx",
         "jazz-browser": "index.ts",
+        "jazz-browser-media-images": "index.ts",
+        "jazz-react-media-images": "index.tsx",
     }).map(async ([packageName, entryPoint]) => {
         const app = await Application.bootstrapWithPlugins({
             entryPoints: [`packages/${packageName}/src/${entryPoint}`],
             tsconfig: `packages/${packageName}/tsconfig.json`,
             sort: ["required-first"],
+            groupOrder: [
+                "Functions",
+                "Classes",
+                "TypeAliases",
+                "Namespaces"
+            ]
         });
 
         const project = await app.convert();
@@ -61,7 +69,14 @@ async function main() {
                                               renderChildGroup(child, group)
                                           )
                                           .join("\n\n")
-                                    : "TODO: doc generator not implemented yet")
+                                    : child.kind === 4
+                                    ? child.groups
+                                          ?.map((group) =>
+                                              renderChildGroup(child, group)
+                                          )
+                                          .join("\n\n")
+                                    : "TODO: doc generator not implemented yet " +
+                                      child.kind)
                             );
                         })
                         .join("\n\n----\n\n");
@@ -129,6 +144,7 @@ async function main() {
             const isClass = child.kind === 128;
             const isTypeDef = child.kind === 2097152;
             const isInterface = child.kind === 256;
+            const isNamespace = child.kind === 4;
             const isFunction = !!child.signatures;
             return (
                 "```typescript\n" +
@@ -141,6 +157,8 @@ async function main() {
                         ? "function"
                         : isInterface
                         ? "interface"
+                        : isNamespace
+                        ? "namespace"
                         : ""
                 } ${child.name}` +
                 (child.typeParameters
@@ -156,7 +174,7 @@ async function main() {
                     ? " implements " +
                       child.implementedTypes.map(renderType).join(", ")
                     : "") +
-                (isClass || isInterface
+                (isClass || isInterface || isNamespace
                     ? " {...}"
                     : isTypeDef
                     ? ` = ${renderType(child.type)}`
@@ -184,20 +202,43 @@ async function main() {
                         )!;
 
                         if (member.kind === 2048 || member.kind === 512) {
-                            if (member.signatures?.every(sig => sig.comment?.modifierTags?.includes("@internal"))) {
-                                return ""
+                            if (
+                                member.signatures?.every((sig) =>
+                                    sig.comment?.modifierTags?.includes(
+                                        "@internal"
+                                    )
+                                )
+                            ) {
+                                return "";
                             } else {
-                                return documentConstructorOrMethod(member, child);
+                                return documentConstructorOrMethod(
+                                    member,
+                                    child
+                                );
                             }
                         } else if (
                             member.kind === 1024 ||
                             member.kind === 262144
                         ) {
-                            if (member.comment?.modifierTags?.includes("@internal")) {
-                                return ""
+                            if (
+                                member.comment?.modifierTags?.includes(
+                                    "@internal"
+                                )
+                            ) {
+                                return "";
                             } else {
                                 return documentProperty(member, child);
                             }
+                        } else if (member.kind === 2097152) {
+                            if (
+                                member.comment?.modifierTags?.includes(
+                                    "@internal"
+                                )
+                            ) {
+                                return "";
+                            } else {
+                                return documentProperty({...member, flags: {isStatic: true}}, child);
+                            }
                         } else {
                             return "Unknown member kind " + member.kind;
                         }
@@ -233,7 +274,14 @@ async function main() {
             } else if (t.type === "reflection") {
                 if (t.declaration.indexSignature) {
                     return (
-                        "{ [" +
+                        `{ ${t.declaration.children?t.declaration.children
+                            .map(
+                                (child) =>
+                                    `${child.name}${
+                                        child.flags.isOptional ? "?" : ""
+                                    }: ${renderType(child.type)}`
+                            )
+                            .join(", ") + ", " : ""}[` +
                         t.declaration.indexSignature?.parameters?.[0].name +
                         ": " +
                         renderType(
@@ -267,6 +315,8 @@ async function main() {
                 }
             } else if (t.type === "array") {
                 return renderType(t.elementType) + "[]";
+            } else if (t.type === "tuple") {
+                return `[${t.elements?.map(renderType).join(", ")}]`;
             } else if (t.type === "templateLiteral") {
                 const matchingNamedType = docs.children?.find(
                     (child) =>
@@ -296,7 +346,7 @@ async function main() {
                             return "AgentID";
                         }
                     } else {
-                        return "TEMPLATE_LITERAL";
+                        return "`" + t.head + t.tail.map(bit => "${" + renderType(bit[0]) + "}" + bit[1]).join("") + "`";
                     }
                 }
             } else {
@@ -418,9 +468,7 @@ async function main() {
                           member.inheritedFrom.name.split(".")[0] +
                           "</code>) "
                         : ""
-                } ${
-                    member.comment ? "" : "(undocumented)"
-                }</summary>\n\n` +
+                } ${member.comment ? "" : "(undocumented)"}</summary>\n\n` +
                 "```typescript\n" +
                 `${member.getSignature ? "get " : ""}${stem}.${member.name}${
                     member.getSignature ? "()" : ""

packages/cojson-simple-sync/package.json

@@ -4,7 +4,7 @@
     "types": "src/index.ts",
     "type": "module",
     "license": "MIT",
-    "version": "0.1.11",
+    "version": "0.2.6",
     "devDependencies": {
         "@types/jest": "^29.5.3",
         "@types/ws": "^8.5.5",
@@ -16,8 +16,8 @@
         "typescript": "5.0.2"
     },
     "dependencies": {
-        "cojson": "^0.1.10",
-        "cojson-storage-sqlite": "^0.1.8",
+        "cojson": "^0.2.3",
+        "cojson-storage-sqlite": "^0.2.6",
         "ws": "^8.13.0"
     },
     "scripts": {

packages/cojson-storage-sqlite/package.json

@@ -1,13 +1,13 @@
 {
   "name": "cojson-storage-sqlite",
   "type": "module",
-  "version": "0.1.8",
+  "version": "0.2.6",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "license": "MIT",
   "dependencies": {
     "better-sqlite3": "^8.5.2",
-    "cojson": "^0.1.10",
+    "cojson": "^0.2.3",
     "typescript": "^5.1.6"
   },
   "scripts": {

packages/cojson-storage-sqlite/src/index.ts

@@ -4,8 +4,7 @@ import {
     Peer,
     CojsonInternalTypes,
     SessionID,
-    // CojsonInternalTypes,
-    // SessionID,
+    MAX_RECOMMENDED_TX_SIZE,
 } from "cojson";
 import {
     ReadableStream,
@@ -15,7 +14,6 @@ import {
 } from "isomorphic-streams";
 
 import Database, { Database as DatabaseT } from "better-sqlite3";
-import { RawCoID } from "cojson/dist/ids";
 
 type CoValueRow = {
     id: CojsonInternalTypes.RawCoID;
@@ -29,6 +27,7 @@ type SessionRow = {
     sessionID: SessionID;
     lastIdx: number;
     lastSignature: CojsonInternalTypes.Signature;
+    bytesSinceLastSignature?: number;
 };
 
 type StoredSessionRow = SessionRow & { rowID: number };
@@ -39,6 +38,12 @@ type TransactionRow = {
     tx: string;
 };
 
+type SignatureAfterRow = {
+    ses: number;
+    idx: number;
+    signature: CojsonInternalTypes.Signature;
+};
+
 export class SQLiteStorage {
     fromLocalNode!: ReadableStreamDefaultReader<SyncMessage>;
     toLocalNode: WritableStreamDefaultWriter<SyncMessage>;
@@ -60,7 +65,7 @@ export class SQLiteStorage {
                 done = result.done;
 
                 if (result.value) {
-                    this.handleSyncMessage(result.value);
+                    await this.handleSyncMessage(result.value);
                 }
             }
         })();
@@ -98,41 +103,99 @@ export class SQLiteStorage {
         const db = Database(filename);
         db.pragma("journal_mode = WAL");
 
-        db.prepare(
-            `CREATE TABLE IF NOT EXISTS transactions (
-                ses INTEGER,
-                idx INTEGER,
-                tx TEXT NOT NULL ,
-                PRIMARY KEY (ses, idx)
-            ) WITHOUT ROWID;`
-        ).run();
+        const oldVersion = (
+            db.pragma("user_version") as [{ user_version: number }]
+        )[0].user_version as number;
 
-        db.prepare(
-            `CREATE TABLE IF NOT EXISTS sessions (
-                rowID INTEGER PRIMARY KEY,
-                coValue INTEGER NOT NULL,
-                sessionID TEXT NOT NULL,
-                lastIdx INTEGER,
-                lastSignature TEXT,
-                UNIQUE (sessionID, coValue)
-            );`
-        ).run();
+        console.log("DB version", oldVersion);
 
-        db.prepare(
-            `CREATE INDEX IF NOT EXISTS sessionsByCoValue ON sessions (coValue);`
-        ).run();
+        if (oldVersion === 0) {
+            console.log("Migration 0 -> 1: Basic schema");
+            db.prepare(
+                `CREATE TABLE IF NOT EXISTS transactions (
+                    ses INTEGER,
+                    idx INTEGER,
+                    tx TEXT NOT NULL,
+                    PRIMARY KEY (ses, idx)
+                ) WITHOUT ROWID;`
+            ).run();
 
-        db.prepare(
-            `CREATE TABLE IF NOT EXISTS coValues (
-                rowID INTEGER PRIMARY KEY,
-                id TEXT NOT NULL UNIQUE,
-                header TEXT NOT NULL UNIQUE
-            );`
-        ).run();
+            db.prepare(
+                `CREATE TABLE IF NOT EXISTS sessions (
+                    rowID INTEGER PRIMARY KEY,
+                    coValue INTEGER NOT NULL,
+                    sessionID TEXT NOT NULL,
+                    lastIdx INTEGER,
+                    lastSignature TEXT,
+                    UNIQUE (sessionID, coValue)
+                );`
+            ).run();
 
-        db.prepare(
-            `CREATE INDEX IF NOT EXISTS coValuesByID ON coValues (id);`
-        ).run();
+            db.prepare(
+                `CREATE INDEX IF NOT EXISTS sessionsByCoValue ON sessions (coValue);`
+            ).run();
+
+            db.prepare(
+                `CREATE TABLE IF NOT EXISTS coValues (
+                    rowID INTEGER PRIMARY KEY,
+                    id TEXT NOT NULL UNIQUE,
+                    header TEXT NOT NULL UNIQUE
+                );`
+            ).run();
+
+            db.prepare(
+                `CREATE INDEX IF NOT EXISTS coValuesByID ON coValues (id);`
+            ).run();
+
+            db.pragma("user_version = 1");
+            console.log("Migration 0 -> 1: Basic schema - done");
+        }
+
+        if (oldVersion <= 1) {
+            // fix embarrassing off-by-one error for transaction indices
+            console.log(
+                "Migration 1 -> 2: Fix off-by-one error for transaction indices"
+            );
+
+            const txs = db
+                .prepare(`SELECT * FROM transactions`)
+                .all() as TransactionRow[];
+
+            for (const tx of txs) {
+                db.prepare(
+                    `DELETE FROM transactions WHERE ses = ? AND idx = ?`
+                ).run(tx.ses, tx.idx);
+                tx.idx -= 1;
+                db.prepare(
+                    `INSERT INTO transactions (ses, idx, tx) VALUES (?, ?, ?)`
+                ).run(tx.ses, tx.idx, tx.tx);
+            }
+
+            db.pragma("user_version = 2");
+            console.log(
+                "Migration 1 -> 2: Fix off-by-one error for transaction indices - done"
+            );
+        }
+
+        if (oldVersion <= 2) {
+            console.log("Migration 2 -> 3: Add signatureAfter");
+
+            db.prepare(
+                `CREATE TABLE IF NOT EXISTS signatureAfter (
+                    ses INTEGER,
+                    idx INTEGER,
+                    signature TEXT NOT NULL,
+                    PRIMARY KEY (ses, idx)
+                ) WITHOUT ROWID;`
+            ).run();
+
+            db.prepare(
+                `ALTER TABLE sessions ADD COLUMN bytesSinceLastSignature INTEGER;`
+            ).run();
+
+            db.pragma("user_version = 3");
+            console.log("Migration 2 -> 3: Add signatureAfter - done");
+        }
 
         return new SQLiteStorage(db, fromLocalNode, toLocalNode);
     }
@@ -179,12 +242,14 @@ export class SQLiteStorage {
             | CojsonInternalTypes.CoValueHeader
             | undefined;
 
-        const newContent: CojsonInternalTypes.NewContentMessage = {
-            action: "content",
-            id: theirKnown.id,
-            header: theirKnown.header ? undefined : parsedHeader,
-            new: {},
-        };
+            const newContentPieces: CojsonInternalTypes.NewContentMessage[] = [
+                {
+                    action: "content",
+                    id: theirKnown.id,
+                    header: theirKnown.header ? undefined : parsedHeader,
+                    new: {},
+                },
+            ];
 
         for (const sessionRow of allOurSessions) {
             ourKnown.sessions[sessionRow.sessionID] = sessionRow.lastIdx;
@@ -196,28 +261,82 @@ export class SQLiteStorage {
                 const firstNewTxIdx =
                     theirKnown.sessions[sessionRow.sessionID] || 0;
 
+                const signaturesAndIdxs = this.db
+                    .prepare<[number, number]>(
+                        `SELECT * FROM signatureAfter WHERE ses = ? AND idx >= ?`
+                    )
+                    .all(sessionRow.rowID, firstNewTxIdx) as SignatureAfterRow[];
+
+                // console.log(
+                //     theirKnown.id,
+                //     "signaturesAndIdxs",
+                //     JSON.stringify(signaturesAndIdxs)
+                // );
+
                 const newTxInSession = this.db
                     .prepare<[number, number]>(
-                        `SELECT * FROM transactions WHERE ses = ? AND idx > ?`
+                        `SELECT * FROM transactions WHERE ses = ? AND idx >= ?`
                     )
                     .all(sessionRow.rowID, firstNewTxIdx) as TransactionRow[];
 
-                newContent.new[sessionRow.sessionID] = {
-                    after: firstNewTxIdx,
-                    lastSignature: sessionRow.lastSignature,
-                    newTransactions: newTxInSession.map((row) =>
-                        JSON.parse(row.tx)
-                    ),
-                };
+                let idx = firstNewTxIdx;
+
+                // console.log(
+                //     theirKnown.id,
+                //     "newTxInSession",
+                //     newTxInSession.length
+                // );
+
+                for (const tx of newTxInSession) {
+                    let sessionEntry =
+                        newContentPieces[newContentPieces.length - 1]!.new[
+                            sessionRow.sessionID
+                        ];
+                    if (!sessionEntry) {
+                        sessionEntry = {
+                            after: idx,
+                            lastSignature: "WILL_BE_REPLACED" as CojsonInternalTypes.Signature,
+                            newTransactions: [],
+                        };
+                        newContentPieces[newContentPieces.length - 1]!.new[
+                            sessionRow.sessionID
+                        ] = sessionEntry;
+                    }
+
+                    sessionEntry.newTransactions.push(JSON.parse(tx.tx));
+
+                    if (
+                        signaturesAndIdxs[0] &&
+                        idx === signaturesAndIdxs[0].idx
+                    ) {
+                        sessionEntry.lastSignature =
+                            signaturesAndIdxs[0].signature;
+                        signaturesAndIdxs.shift();
+                        newContentPieces.push({
+                            action: "content",
+                            id: theirKnown.id,
+                            new: {},
+                        });
+                    } else if (
+                        idx ===
+                        firstNewTxIdx + newTxInSession.length - 1
+                    ) {
+                        sessionEntry.lastSignature = sessionRow.lastSignature;
+                    }
+                    idx += 1;
+                }
             }
         }
 
         const dependedOnCoValues =
             parsedHeader?.ruleset.type === "group"
-                ? Object.values(newContent.new).flatMap((sessionEntry) =>
+                ? newContentPieces
+                .flatMap((piece) => Object.values(piece.new)).flatMap((sessionEntry) =>
                       sessionEntry.newTransactions.flatMap((tx) => {
                           if (tx.privacy !== "trusting") return [];
-                          return tx.changes
+                          // TODO: avoid parsing here?
+                          return cojsonInternals
+                              .parseJSON(tx.changes)
                               .map(
                                   (change) =>
                                       change &&
@@ -251,8 +370,15 @@ export class SQLiteStorage {
             asDependencyOf,
         });
 
-        if (newContent.header || Object.keys(newContent.new).length > 0) {
-            await this.toLocalNode.write(newContent);
+        const nonEmptyNewContentPieces = newContentPieces.filter(
+            (piece) => piece.header || Object.keys(piece.new).length > 0
+        );
+
+        // console.log(theirKnown.id, nonEmptyNewContentPieces);
+
+        for (const piece of nonEmptyNewContentPieces) {
+            await this.toLocalNode.write(piece);
+            await new Promise((resolve) => setTimeout(resolve, 0));
         }
     }
 
@@ -263,7 +389,9 @@ export class SQLiteStorage {
     async handleContent(msg: CojsonInternalTypes.NewContentMessage) {
         let storedCoValueRowID = (
             this.db
-                .prepare<RawCoID>(`SELECT rowID FROM coValues WHERE id = ?`)
+                .prepare<CojsonInternalTypes.RawCoID>(
+                    `SELECT rowID FROM coValues WHERE id = ?`
+                )
                 .get(msg.id) as StoredCoValueRow | undefined
         )?.rowID;
 
@@ -282,7 +410,7 @@ export class SQLiteStorage {
             }
 
             storedCoValueRowID = this.db
-                .prepare<[RawCoID, string]>(
+                .prepare<[CojsonInternalTypes.RawCoID, string]>(
                     `INSERT INTO coValues (id, header) VALUES (?, ?)`
                 )
                 .run(msg.id, JSON.stringify(header)).lastInsertRowid as number;
@@ -324,37 +452,72 @@ export class SQLiteStorage {
                     const actuallyNewOffset =
                         (sessionRow?.lastIdx || 0) -
                         (msg.new[sessionID]?.after || 0);
+
                     const actuallyNewTransactions =
                         newTransactions.slice(actuallyNewOffset);
 
+                    let newBytesSinceLastSignature =
+                        (sessionRow?.bytesSinceLastSignature || 0) +
+                        actuallyNewTransactions.reduce(
+                            (sum, tx) =>
+                                sum +
+                                (tx.privacy === "private"
+                                    ? tx.encryptedChanges.length
+                                    : tx.changes.length),
+                            0
+                        );
+
+                    const newLastIdx =
+                        (sessionRow?.lastIdx || 0) +
+                        actuallyNewTransactions.length;
+
+                    let shouldWriteSignature = false;
+
+                    if (newBytesSinceLastSignature > MAX_RECOMMENDED_TX_SIZE) {
+                        shouldWriteSignature = true;
+                        newBytesSinceLastSignature = 0;
+                    }
+
                     let nextIdx = sessionRow?.lastIdx || 0;
 
                     const sessionUpdate = {
                         coValue: storedCoValueRowID!,
                         sessionID: sessionID,
-                        lastIdx:
-                            (sessionRow?.lastIdx || 0) +
-                            actuallyNewTransactions.length,
+                        lastIdx: newLastIdx,
                         lastSignature: msg.new[sessionID]!.lastSignature,
+                        bytesSinceLastSignature: newBytesSinceLastSignature,
                     };
 
-                    const upsertedSession = (this.db
-                        .prepare<[number, string, number, string]>(
-                            `INSERT INTO sessions (coValue, sessionID, lastIdx, lastSignature) VALUES (?, ?, ?, ?)
-                            ON CONFLICT(coValue, sessionID) DO UPDATE SET lastIdx=excluded.lastIdx, lastSignature=excluded.lastSignature
+                    const upsertedSession = this.db
+                        .prepare<[number, string, number, string, number]>(
+                            `INSERT INTO sessions (coValue, sessionID, lastIdx, lastSignature, bytesSinceLastSignature) VALUES (?, ?, ?, ?, ?)
+                            ON CONFLICT(coValue, sessionID) DO UPDATE SET lastIdx=excluded.lastIdx, lastSignature=excluded.lastSignature, bytesSinceLastSignature=excluded.bytesSinceLastSignature
                             RETURNING rowID`
                         )
                         .get(
                             sessionUpdate.coValue,
                             sessionUpdate.sessionID,
                             sessionUpdate.lastIdx,
-                            sessionUpdate.lastSignature
-                        ) as {rowID: number});
+                            sessionUpdate.lastSignature,
+                            sessionUpdate.bytesSinceLastSignature,
+                        ) as { rowID: number };
 
                     const sessionRowID = upsertedSession.rowID;
 
+                    if (shouldWriteSignature) {
+                        this.db
+                            .prepare<[number, number, string]>(
+                                `INSERT INTO signatureAfter (ses, idx, signature) VALUES (?, ?, ?)`
+                            )
+                            .run(
+                                sessionRowID,
+                                // TODO: newLastIdx is a misnomer, it's actually more like nextIdx or length
+                                newLastIdx - 1,
+                                msg.new[sessionID]!.lastSignature
+                            );
+                    }
+
                     for (const newTransaction of actuallyNewTransactions) {
-                        nextIdx++;
                         this.db
                             .prepare<[number, number, string]>(
                                 `INSERT INTO transactions (ses, idx, tx) VALUES (?, ?, ?)`
@@ -364,6 +527,7 @@ export class SQLiteStorage {
                                 nextIdx,
                                 JSON.stringify(newTransaction)
                             );
+                        nextIdx++;
                     }
                 }
             }

packages/cojson/.eslintrc.cjs

@@ -9,6 +9,7 @@ module.exports = {
     parserOptions: {
         project: "./tsconfig.json",
     },
+    ignorePatterns: [".eslint.cjs", "**/tests/*"],
     root: true,
     rules: {
         "no-unused-vars": "off",

packages/cojson/package.json

@@ -5,7 +5,7 @@
     "types": "dist/index.d.ts",
     "type": "module",
     "license": "MIT",
-    "version": "0.1.10",
+    "version": "0.2.3",
     "devDependencies": {
         "@types/jest": "^29.5.3",
         "@typescript-eslint/eslint-plugin": "^6.2.1",
@@ -19,9 +19,8 @@
     "dependencies": {
         "@noble/ciphers": "^0.1.3",
         "@noble/curves": "^1.1.0",
-        "@noble/hashes": "^1.3.1",
         "@scure/base": "^1.1.1",
-        "fast-json-stable-stringify": "https://github.com/tirithen/fast-json-stable-stringify#7a3dcf2",
+        "hash-wasm": "^4.9.0",
         "isomorphic-streams": "https://github.com/sgwilym/isomorphic-streams.git#aa9394781bfc92f8d7c981be7daf8af4b4cd4fae"
     },
     "scripts": {

packages/cojson/src/account.ts

@@ -32,7 +32,7 @@ export function accountHeaderForInitialAgentSecret(
     };
 }
 
-export class Account extends Group {
+export class AccountGroup extends Group {
     get id(): AccountID {
         return this.underlyingMap.id as AccountID;
     }
@@ -65,7 +65,7 @@ export interface GeneralizedControlledAccount {
 
 /** @hidden */
 export class ControlledAccount
-    extends Account
+    extends AccountGroup
     implements GeneralizedControlledAccount
 {
     agentSecret: AgentSecret;
@@ -136,10 +136,10 @@ export class AnonymousControlledAccount
     }
 }
 
-export type AccountContent = GroupContent & { profile: CoID<Profile> };
+export type AccountContent = { profile: Profile } & GroupContent;
 export type AccountMeta = { type: "account" };
-export type AccountMap = CoMap<AccountContent, AccountMeta>;
-export type AccountID = CoID<AccountMap>;
+export type Account = CoMap<AccountContent, AccountMeta>;
+export type AccountID = CoID<Account>;
 
 export function isAccountID(id: AccountID | AgentID): id is AccountID {
     return id.startsWith("co_");

packages/cojson/src/base64url.test.ts

@@ -0,0 +1,32 @@
+import { base64URLtoBytes, bytesToBase64url } from "./base64url";
+
+const txt = new TextEncoder();
+
+test("Test our Base64 URL encoding and decoding", () => {
+    // tests from the RFC
+
+    expect(base64URLtoBytes("")).toEqual(new Uint8Array([]));
+    expect(bytesToBase64url(new Uint8Array([]))).toEqual("");
+
+    expect(bytesToBase64url(txt.encode("f"))).toEqual("Zg==");
+    expect(bytesToBase64url(txt.encode("fo"))).toEqual("Zm8=");
+    expect(bytesToBase64url(txt.encode("foo"))).toEqual("Zm9v");
+    expect(bytesToBase64url(txt.encode("foob"))).toEqual("Zm9vYg==");
+    expect(bytesToBase64url(txt.encode("fooba"))).toEqual("Zm9vYmE=");
+    expect(bytesToBase64url(txt.encode("foobar"))).toEqual("Zm9vYmFy");
+    // reverse
+    expect(base64URLtoBytes("Zg==")).toEqual(txt.encode("f"));
+    expect(base64URLtoBytes("Zm8=")).toEqual(txt.encode("fo"));
+    expect(base64URLtoBytes("Zm9v")).toEqual(txt.encode("foo"));
+    expect(base64URLtoBytes("Zm9vYg==")).toEqual(txt.encode("foob"));
+    expect(base64URLtoBytes("Zm9vYmE=")).toEqual(txt.encode("fooba"));
+    expect(base64URLtoBytes("Zm9vYmFy")).toEqual(txt.encode("foobar"));
+
+    expect(base64URLtoBytes("V2hhdCBkb2VzIDIgKyAyLjEgZXF1YWw_PyB-IDQ=")).toEqual(
+        txt.encode("What does 2 + 2.1 equal?? ~ 4")
+    );
+    // reverse
+    expect(
+        bytesToBase64url(txt.encode("What does 2 + 2.1 equal?? ~ 4"))
+    ).toEqual("V2hhdCBkb2VzIDIgKyAyLjEgZXF1YWw_PyB-IDQ=");
+});

packages/cojson/src/base64url.ts

@@ -0,0 +1,68 @@
+const encoder = new TextEncoder();
+const decoder = new TextDecoder();
+
+export function base64URLtoBytes(base64: string) {
+    base64 = base64.replace(/=/g, "");
+    const n = base64.length;
+    const rem = n % 4;
+    const k = rem && rem - 1; // how many bytes the last base64 chunk encodes
+    const m = (n >> 2) * 3 + k; // total encoded bytes
+
+    const encoded = new Uint8Array(n + 3);
+    encoder.encodeInto(base64 + "===", encoded);
+
+    for (let i = 0, j = 0; i < n; i += 4, j += 3) {
+        const x =
+            (lookup[encoded[i]!]! << 18) +
+            (lookup[encoded[i + 1]!]! << 12) +
+            (lookup[encoded[i + 2]!]! << 6) +
+            lookup[encoded[i + 3]!]!;
+        encoded[j] = x >> 16;
+        encoded[j + 1] = (x >> 8) & 0xff;
+        encoded[j + 2] = x & 0xff;
+    }
+    return new Uint8Array(encoded.buffer, 0, m);
+}
+
+export function bytesToBase64url(bytes: Uint8Array) {
+    // const before = performance.now();
+    const m = bytes.length;
+    const k = m % 3;
+    const n = Math.floor(m / 3) * 4 + (k && k + 1);
+    const N = Math.ceil(m / 3) * 4;
+    const encoded = new Uint8Array(N);
+
+    for (let i = 0, j = 0; j < m; i += 4, j += 3) {
+        const y =
+            (bytes[j]! << 16) + (bytes[j + 1]! << 8) + (bytes[j + 2]! | 0);
+        encoded[i] = encodeLookup[y >> 18]!;
+        encoded[i + 1] = encodeLookup[(y >> 12) & 0x3f]!;
+        encoded[i + 2] = encodeLookup[(y >> 6) & 0x3f]!;
+        encoded[i + 3] = encodeLookup[y & 0x3f]!;
+    }
+
+    let base64 = decoder.decode(new Uint8Array(encoded.buffer, 0, n));
+    if (k === 1) base64 += "==";
+    if (k === 2) base64 += "=";
+    // const after = performance.now();
+    // console.log(
+    //     "bytesToBase64url bandwidth in MB/s for length",
+    //     (1000 * bytes.length / (after - before)) / (1024 * 1024),
+    //     bytes.length
+    // );
+    return base64;
+}
+
+const alphabet =
+    "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-_";
+
+const lookup = new Uint8Array(128);
+for (const [i, a] of Array.from(alphabet).entries()) {
+    lookup[a.charCodeAt(0)] = i;
+}
+lookup["=".charCodeAt(0)] = 0;
+
+const encodeLookup = new Uint8Array(64);
+for (const [i, a] of Array.from(alphabet).entries()) {
+    encodeLookup[i] = a.charCodeAt(0);
+}

packages/cojson/src/coValue.ts

@@ -1,17 +1,32 @@
 import { JsonObject, JsonValue } from "./jsonValue.js";
 import { RawCoID } from "./ids.js";
 import { CoMap } from "./coValues/coMap.js";
-import { BinaryCoStream, BinaryCoStreamMeta, CoStream } from "./coValues/coStream.js";
+import {
+    BinaryCoStream,
+    BinaryCoStreamMeta,
+    CoStream,
+} from "./coValues/coStream.js";
 import { Static } from "./coValues/static.js";
 import { CoList } from "./coValues/coList.js";
 import { CoValueCore } from "./coValueCore.js";
 import { Group } from "./group.js";
 
-export type CoID<T extends CoValueImpl> = RawCoID & {
+export type CoID<T extends CoValue> = RawCoID & {
     readonly __type: T;
 };
 
-export interface ReadableCoValue extends CoValue {
+export interface CoValue {
+    /** The `CoValue`'s (precisely typed) `CoID` */
+    id: CoID<this>;
+    core: CoValueCore;
+    /** Specifies which kind of `CoValue` this is */
+    type: string;
+    /** The `CoValue`'s (precisely typed) static metadata */
+    meta: JsonObject | null;
+    /** The `Group` this `CoValue` belongs to (determining permissions) */
+    group: Group;
+    /** Returns an immutable JSON presentation of this `CoValue` */
+    toJSON(): JsonValue;
     /** Lets you subscribe to future updates to this CoValue (whether made locally or by other users).
      *
      * Takes a listener function that will be called with the current state for each update.
@@ -19,42 +34,37 @@ export interface ReadableCoValue extends CoValue {
      * Returns an unsubscribe function.
      *
      * Used internally by `useTelepathicData()` for reactive updates on changes to a `CoValue`. */
-    subscribe(listener: (coValue: CoValueImpl) => void): () => void;
+    subscribe(listener: (coValue: this) => void): () => void;
     /** Lets you apply edits to a `CoValue`, inside the changer callback, which receives a `WriteableCoValue`.
      *
      *  A `WritableCoValue` has all the same methods as a `CoValue`, but all edits made to it (with its additional mutator methods)
      *  are reflected in it immediately - so it behaves mutably, whereas a `CoValue` is always immutable
      *  (you need to use `subscribe` to receive new versions of it). */
-    edit?:
-        | ((changer: (editable: WriteableCoValue) => void) => CoValueImpl)
-        | undefined;
+    edit?: ((changer: (editable: CoValue) => void) => this) | undefined;
 }
 
-export interface CoValue {
-    /** The `CoValue`'s (precisely typed) `CoID` */
-    id: CoID<CoValueImpl>;
-    core: CoValueCore;
-    /** Specifies which kind of `CoValue` this is */
-    type: CoValueImpl["type"];
-    /** The `CoValue`'s (precisely typed) static metadata */
-    meta: JsonObject | null;
-    /** The `Group` this `CoValue` belongs to (determining permissions) */
-    group: Group;
-    /** Returns an immutable JSON presentation of this `CoValue` */
-    toJSON(): JsonValue;
-}
+export type AnyCoMap = CoMap<
+    { [key: string]: JsonValue | CoValue | undefined },
+    JsonObject | null
+>;
 
-export interface WriteableCoValue extends CoValue {}
+export type AnyCoList = CoList<JsonValue | CoValue, JsonObject | null>;
 
-export type CoValueImpl =
-    | CoMap<{ [key: string]: JsonValue }, JsonObject | null>
-    | CoList<JsonValue, JsonObject | null>
-    | CoStream<JsonValue, JsonObject | null>
-    | BinaryCoStream<BinaryCoStreamMeta>
-    | Static<JsonObject>;
+export type AnyCoStream = CoStream<JsonValue | CoValue, JsonObject | null>;
+
+export type AnyBinaryCoStream = BinaryCoStream<BinaryCoStreamMeta>;
+
+export type AnyStatic = Static<JsonObject>;
+
+export type AnyCoValue =
+    | AnyCoMap
+    | AnyCoList
+    | AnyCoStream
+    | AnyBinaryCoStream
+    | AnyStatic;
 
 export function expectMap(
-    content: CoValueImpl
+    content: CoValue
 ): CoMap<{ [key: string]: string }, JsonObject | null> {
     if (content.type !== "comap") {
         throw new Error("Expected map");
@@ -62,3 +72,19 @@ export function expectMap(
 
     return content as CoMap<{ [key: string]: string }, JsonObject | null>;
 }
+
+export function isCoValueImpl(
+    value: JsonValue | AnyCoValue | undefined
+): value is AnyCoValue {
+    return (
+        value instanceof CoMap ||
+        value instanceof CoList ||
+        value instanceof CoStream ||
+        value instanceof BinaryCoStream ||
+        value instanceof Static
+    );
+}
+
+export function isCoValue(value: JsonValue | CoValue | undefined) : value is CoValue {
+    return isCoValueImpl(value as AnyCoValue);
+}

packages/cojson/src/coValueCore.ts

@@ -1,5 +1,5 @@
 import { randomBytes } from "@noble/hashes/utils";
-import { CoValueImpl } from "./coValue.js";
+import { AnyCoValue } from "./coValue.js";
 import { Static } from "./coValues/static.js";
 import { BinaryCoStream, CoStream } from "./coValues/coStream.js";
 import { CoMap } from "./coValues/coMap.js";
@@ -14,11 +14,11 @@ import {
     sign,
     verify,
     encryptForTransaction,
-    decryptForTransaction,
     KeyID,
     decryptKeySecret,
     getAgentSignerID,
     getAgentSealerID,
+    decryptRawForTransaction,
 } from "./crypto.js";
 import { JsonObject, JsonValue } from "./jsonValue.js";
 import { base58 } from "@scure/base";
@@ -32,13 +32,13 @@ import { LocalNode } from "./node.js";
 import { CoValueKnownState, NewContentMessage } from "./sync.js";
 import { AgentID, RawCoID, SessionID, TransactionID } from "./ids.js";
 import { CoList } from "./coValues/coList.js";
-import {
-    AccountID,
-    GeneralizedControlledAccount,
-} from "./account.js";
+import { AccountID, GeneralizedControlledAccount } from "./account.js";
+import { Stringified, stableStringify } from "./jsonStringify.js";
+
+export const MAX_RECOMMENDED_TX_SIZE = 100 * 1024;
 
 export type CoValueHeader = {
-    type: CoValueImpl["type"];
+    type: AnyCoValue["type"];
     ruleset: RulesetDef;
     meta: JsonObject | null;
     createdAt: `2${string}` | null;
@@ -64,6 +64,7 @@ type SessionLog = {
     transactions: Transaction[];
     lastHash?: Hash;
     streamingHash: StreamingHash;
+    signatureAfter: { [txIdx: number]: Signature | undefined };
     lastSignature: Signature;
 };
 
@@ -80,14 +81,14 @@ export type PrivateTransaction = {
 export type TrustingTransaction = {
     privacy: "trusting";
     madeAt: number;
-    changes: JsonValue[];
+    changes: Stringified<JsonValue[]>;
 };
 
 export type Transaction = PrivateTransaction | TrustingTransaction;
 
 export type DecryptedTransaction = {
     txID: TransactionID;
-    changes: JsonValue[];
+    changes: Stringified<JsonValue[]>;
     madeAt: number;
 };
 
@@ -98,8 +99,13 @@ export class CoValueCore {
     node: LocalNode;
     header: CoValueHeader;
     _sessions: { [key: SessionID]: SessionLog };
-    _cachedContent?: CoValueImpl;
-    listeners: Set<(content?: CoValueImpl) => void> = new Set();
+    _cachedContent?: AnyCoValue;
+    listeners: Set<(content?: AnyCoValue) => void> = new Set();
+    _decryptionCache: {
+        [key: Encrypted<JsonValue[], JsonValue>]:
+            | Stringified<JsonValue[]>
+            | undefined;
+    } = {};
 
     constructor(
         header: CoValueHeader,
@@ -186,10 +192,16 @@ export class CoValueCore {
             return false;
         }
 
+        // const beforeHash = performance.now();
         const { expectedNewHash, newStreamingHash } = this.expectedNewHashAfter(
             sessionID,
             newTransactions
         );
+        // const afterHash = performance.now();
+        // console.log(
+        //     "Hashing took",
+        //     afterHash - beforeHash
+        // );
 
         if (givenExpectedNewHash && givenExpectedNewHash !== expectedNewHash) {
             console.warn("Invalid hash", {
@@ -199,39 +211,172 @@ export class CoValueCore {
             return false;
         }
 
+        // const beforeVerify = performance.now();
         if (!verify(newSignature, expectedNewHash, signerID)) {
             console.warn(
-                "Invalid signature",
+                "Invalid signature in",
+                this.id,
                 newSignature,
                 expectedNewHash,
                 signerID
             );
             return false;
         }
+        // const afterVerify = performance.now();
+        // console.log(
+        //     "Verify took",
+        //     afterVerify - beforeVerify
+        // );
 
+        this.doAddTransactions(
+            sessionID,
+            newTransactions,
+            newSignature,
+            expectedNewHash,
+            newStreamingHash
+        );
+
+        return true;
+    }
+
+    async tryAddTransactionsAsync(
+        sessionID: SessionID,
+        newTransactions: Transaction[],
+        givenExpectedNewHash: Hash | undefined,
+        newSignature: Signature
+    ): Promise<boolean> {
+        const signerID = getAgentSignerID(
+            this.node.resolveAccountAgent(
+                accountOrAgentIDfromSessionID(sessionID),
+                "Expected to know signer of transaction"
+            )
+        );
+
+        if (!signerID) {
+            console.warn(
+                "Unknown agent",
+                accountOrAgentIDfromSessionID(sessionID)
+            );
+            return false;
+        }
+
+        const nTxBefore = this.sessions[sessionID]?.transactions.length ?? 0;
+
+        // const beforeHash = performance.now();
+        const { expectedNewHash, newStreamingHash } =
+            await this.expectedNewHashAfterAsync(sessionID, newTransactions);
+        // const afterHash = performance.now();
+        // console.log(
+        //     "Hashing took",
+        //     afterHash - beforeHash
+        // );
+
+        const nTxAfter = this.sessions[sessionID]?.transactions.length ?? 0;
+
+        if (nTxAfter !== nTxBefore) {
+            const newTransactionLengthBefore = newTransactions.length;
+            newTransactions = newTransactions.slice(nTxAfter - nTxBefore);
+            console.warn("Transactions changed while async hashing", {
+                nTxBefore,
+                nTxAfter,
+                newTransactionLengthBefore,
+                remainingNewTransactions: newTransactions.length,
+            });
+        }
+
+        if (givenExpectedNewHash && givenExpectedNewHash !== expectedNewHash) {
+            console.warn("Invalid hash", {
+                expectedNewHash,
+                givenExpectedNewHash,
+            });
+            return false;
+        }
+
+        // const beforeVerify = performance.now();
+        if (!verify(newSignature, expectedNewHash, signerID)) {
+            console.warn(
+                "Invalid signature in",
+                this.id,
+                newSignature,
+                expectedNewHash,
+                signerID
+            );
+            return false;
+        }
+        // const afterVerify = performance.now();
+        // console.log(
+        //     "Verify took",
+        //     afterVerify - beforeVerify
+        // );
+
+        this.doAddTransactions(
+            sessionID,
+            newTransactions,
+            newSignature,
+            expectedNewHash,
+            newStreamingHash
+        );
+
+        return true;
+    }
+
+    private doAddTransactions(
+        sessionID: SessionID,
+        newTransactions: Transaction[],
+        newSignature: Signature,
+        expectedNewHash: Hash,
+        newStreamingHash: StreamingHash
+    ) {
         const transactions = this.sessions[sessionID]?.transactions ?? [];
-
         transactions.push(...newTransactions);
 
+        const signatureAfter = this.sessions[sessionID]?.signatureAfter ?? {};
+
+        const lastInbetweenSignatureIdx = Object.keys(signatureAfter).reduce(
+            (max, idx) => (parseInt(idx) > max ? parseInt(idx) : max),
+            -1
+        );
+
+        const sizeOfTxsSinceLastInbetweenSignature = transactions
+            .slice(lastInbetweenSignatureIdx + 1)
+            .reduce(
+                (sum, tx) =>
+                    sum +
+                    (tx.privacy === "private"
+                        ? tx.encryptedChanges.length
+                        : tx.changes.length),
+                0
+            );
+
+        if (sizeOfTxsSinceLastInbetweenSignature > 100 * 1024) {
+            // console.log(
+            //     "Saving inbetween signature for tx ",
+            //     sessionID,
+            //     transactions.length - 1,
+            //     sizeOfTxsSinceLastInbetweenSignature
+            // );
+            signatureAfter[transactions.length - 1] = newSignature;
+        }
+
         this._sessions[sessionID] = {
             transactions,
             lastHash: expectedNewHash,
             streamingHash: newStreamingHash,
             lastSignature: newSignature,
+            signatureAfter: signatureAfter,
         };
 
         this._cachedContent = undefined;
 
-        const content = this.getCurrentContent();
-
-        for (const listener of this.listeners) {
-            listener(content);
+        if (this.listeners.size > 0) {
+            const content = this.getCurrentContent();
+            for (const listener of this.listeners) {
+                listener(content);
+            }
         }
-
-        return true;
     }
 
-    subscribe(listener: (content?: CoValueImpl) => void): () => void {
+    subscribe(listener: (content?: AnyCoValue) => void): () => void {
         this.listeners.add(listener);
         listener(this.getCurrentContent());
 
@@ -259,6 +404,32 @@ export class CoValueCore {
         };
     }
 
+    async expectedNewHashAfterAsync(
+        sessionID: SessionID,
+        newTransactions: Transaction[]
+    ): Promise<{ expectedNewHash: Hash; newStreamingHash: StreamingHash }> {
+        const streamingHash =
+            this.sessions[sessionID]?.streamingHash.clone() ??
+            new StreamingHash();
+        let before = performance.now();
+        for (const transaction of newTransactions) {
+            streamingHash.update(transaction);
+            const after = performance.now();
+            if (after - before > 1) {
+                // console.log("Hashing blocked for", after - before);
+                await new Promise((resolve) => setTimeout(resolve, 0));
+                before = performance.now();
+            }
+        }
+
+        const newStreamingHash = streamingHash.clone();
+
+        return {
+            expectedNewHash: streamingHash.digest(),
+            newStreamingHash,
+        };
+    }
+
     makeTransaction(
         changes: JsonValue[],
         privacy: "private" | "trusting"
@@ -276,20 +447,24 @@ export class CoValueCore {
                 );
             }
 
+            const encrypted = encryptForTransaction(changes, keySecret, {
+                in: this.id,
+                tx: this.nextTransactionID(),
+            });
+
+            this._decryptionCache[encrypted] = stableStringify(changes);
+
             transaction = {
                 privacy: "private",
                 madeAt,
                 keyUsed: keyID,
-                encryptedChanges: encryptForTransaction(changes, keySecret, {
-                    in: this.id,
-                    tx: this.nextTransactionID(),
-                }),
+                encryptedChanges: encrypted,
             };
         } else {
             transaction = {
                 privacy: "trusting",
                 madeAt,
-                changes,
+                changes: stableStringify(changes),
             };
         }
 
@@ -318,7 +493,7 @@ export class CoValueCore {
         return success;
     }
 
-    getCurrentContent(): CoValueImpl {
+    getCurrentContent(): AnyCoValue {
         if (this._cachedContent) {
             return this._cachedContent;
         }
@@ -359,14 +534,21 @@ export class CoValueCore {
                     if (!readKey) {
                         return undefined;
                     } else {
-                        const decrytedChanges = decryptForTransaction(
-                            tx.encryptedChanges,
-                            readKey,
-                            {
-                                in: this.id,
-                                tx: txID,
-                            }
-                        );
+                        let decrytedChanges =
+                            this._decryptionCache[tx.encryptedChanges];
+
+                        if (!decrytedChanges) {
+                            decrytedChanges = decryptRawForTransaction(
+                                tx.encryptedChanges,
+                                readKey,
+                                {
+                                    in: this.id,
+                                    tx: txID,
+                                }
+                            );
+                            this._decryptionCache[tx.encryptedChanges] =
+                                decrytedChanges;
+                        }
 
                         if (!decrytedChanges) {
                             console.error(
@@ -537,47 +719,95 @@ export class CoValueCore {
 
     newContentSince(
         knownState: CoValueKnownState | undefined
-    ): NewContentMessage | undefined {
-        const newContent: NewContentMessage = {
+    ): NewContentMessage[] | undefined {
+        let currentPiece: NewContentMessage = {
             action: "content",
             id: this.id,
             header: knownState?.header ? undefined : this.header,
-            new: Object.fromEntries(
-                Object.entries(this.sessions)
-                    .map(([sessionID, log]) => {
-                        const newTransactions = log.transactions.slice(
-                            knownState?.sessions[sessionID as SessionID] || 0
-                        );
-
-                        if (
-                            newTransactions.length === 0 ||
-                            !log.lastHash ||
-                            !log.lastSignature
-                        ) {
-                            return undefined;
-                        }
-
-                        return [
-                            sessionID,
-                            {
-                                after:
-                                    knownState?.sessions[
-                                        sessionID as SessionID
-                                    ] || 0,
-                                newTransactions,
-                                lastSignature: log.lastSignature,
-                            },
-                        ];
-                    })
-                    .filter((x): x is Exclude<typeof x, undefined> => !!x)
-            ),
+            new: {},
         };
 
-        if (!newContent.header && Object.keys(newContent.new).length === 0) {
+        const pieces = [currentPiece];
+
+        const sentState: CoValueKnownState["sessions"] = {
+            ...knownState?.sessions,
+        };
+
+        let newTxsWereAdded = true;
+        let pieceSize = 0;
+        while (newTxsWereAdded) {
+            newTxsWereAdded = false;
+
+            for (const [sessionID, log] of Object.entries(this.sessions) as [
+                SessionID,
+                SessionLog
+            ][]) {
+                const nextKnownSignatureIdx = Object.keys(log.signatureAfter)
+                    .map(Number)
+                    .sort((a, b) => a - b)
+                    .find((idx) => idx >= (sentState[sessionID] ?? -1));
+
+                const txsToAdd = log.transactions.slice(
+                    sentState[sessionID] ?? 0,
+                    nextKnownSignatureIdx === undefined
+                        ? undefined
+                        : nextKnownSignatureIdx + 1
+                );
+
+                if (txsToAdd.length === 0) continue;
+
+                newTxsWereAdded = true;
+
+                const oldPieceSize = pieceSize;
+                pieceSize += txsToAdd.reduce(
+                    (sum, tx) =>
+                        sum +
+                        (tx.privacy === "private"
+                            ? tx.encryptedChanges.length
+                            : tx.changes.length),
+                    0
+                );
+
+                if (pieceSize >= MAX_RECOMMENDED_TX_SIZE) {
+                    currentPiece = {
+                        action: "content",
+                        id: this.id,
+                        header: undefined,
+                        new: {},
+                    };
+                    pieces.push(currentPiece);
+                    pieceSize = pieceSize - oldPieceSize;
+                }
+
+                let sessionEntry = currentPiece.new[sessionID];
+                if (!sessionEntry) {
+                    sessionEntry = {
+                        after: sentState[sessionID] ?? 0,
+                        newTransactions: [],
+                        lastSignature: "WILL_BE_REPLACED" as Signature
+                    };
+                    currentPiece.new[sessionID] = sessionEntry;
+                }
+
+                sessionEntry.newTransactions.push(...txsToAdd);
+                sessionEntry.lastSignature = nextKnownSignatureIdx === undefined
+                ? log.lastSignature!
+                : log.signatureAfter[nextKnownSignatureIdx]!
+
+                sentState[sessionID] =
+                    (sentState[sessionID] || 0) + txsToAdd.length;
+            }
+        }
+
+        const piecesWithContent = pieces.filter(
+            (piece) => Object.keys(piece.new).length > 0 || piece.header
+        );
+
+        if (piecesWithContent.length === 0) {
             return undefined;
         }
 
-        return newContent;
+        return piecesWithContent;
     }
 
     getDependedOnCoValues(): RawCoID[] {

packages/cojson/src/coValues/coList.ts

@@ -1,21 +1,22 @@
 import { JsonObject, JsonValue } from "../jsonValue.js";
-import { CoID, ReadableCoValue, WriteableCoValue } from "../coValue.js";
+import { CoID, CoValue, isCoValue } from "../coValue.js";
 import { CoValueCore, accountOrAgentIDfromSessionID } from "../coValueCore.js";
 import { SessionID, TransactionID } from "../ids.js";
 import { Group } from "../group.js";
 import { AccountID, isAccountID } from "../account.js";
+import { parseJSON } from "../jsonStringify.js";
 
 type OpID = TransactionID & { changeIdx: number };
 
-type InsertionOpPayload<T extends JsonValue> =
+type InsertionOpPayload<T extends JsonValue | CoValue> =
     | {
           op: "pre";
-          value: T;
+          value: T extends CoValue ? CoID<T> : Exclude<T, CoValue>;
           before: OpID | "end";
       }
     | {
           op: "app";
-          value: T;
+          value: T extends CoValue ? CoID<T> : Exclude<T, CoValue>;
           after: OpID | "start";
       };
 
@@ -24,11 +25,11 @@ type DeletionOpPayload = {
     insertion: OpID;
 };
 
-export type ListOpPayload<T extends JsonValue> =
+export type ListOpPayload<T extends JsonValue | CoValue> =
     | InsertionOpPayload<T>
     | DeletionOpPayload;
 
-type InsertionEntry<T extends JsonValue> = {
+type InsertionEntry<T extends JsonValue | CoValue> = {
     madeAt: number;
     predecessors: OpID[];
     successors: OpID[];
@@ -39,10 +40,12 @@ type DeletionEntry = {
     deletionID: OpID;
 } & DeletionOpPayload;
 
-export class CoList<T extends JsonValue, Meta extends JsonObject | null = null>
-    implements ReadableCoValue
+export class CoList<
+    T extends JsonValue | CoValue,
+    Meta extends JsonObject | null = null
+> implements CoValue
 {
-    id: CoID<CoList<T, Meta>>;
+    id: CoID<this>;
     type = "colist" as const;
     core: CoValueCore;
     /** @internal */
@@ -68,7 +71,7 @@ export class CoList<T extends JsonValue, Meta extends JsonObject | null = null>
 
     /** @internal */
     constructor(core: CoValueCore) {
-        this.id = core.id as CoID<CoList<T, Meta>>;
+        this.id = core.id as CoID<this>;
         this.core = core;
         this.afterStart = [];
         this.beforeEnd = [];
@@ -98,7 +101,9 @@ export class CoList<T extends JsonValue, Meta extends JsonObject | null = null>
             changes,
             madeAt,
         } of this.core.getValidSortedTransactions()) {
-            for (const [changeIdx, changeUntyped] of changes.entries()) {
+            for (const [changeIdx, changeUntyped] of parseJSON(
+                changes
+            ).entries()) {
                 const change = changeUntyped as ListOpPayload<T>;
 
                 if (change.op === "pre" || change.op === "app") {
@@ -200,7 +205,9 @@ export class CoList<T extends JsonValue, Meta extends JsonObject | null = null>
     }
 
     /** Get the item currently at `idx`. */
-    get(idx: number): T | undefined {
+    get(
+        idx: number
+    ): (T extends CoValue ? CoID<T> : Exclude<T, CoValue>) | undefined {
         const entry = this.entries()[idx];
         if (!entry) {
             return undefined;
@@ -209,12 +216,20 @@ export class CoList<T extends JsonValue, Meta extends JsonObject | null = null>
     }
 
     /** Returns the current items in the CoList as an array. */
-    asArray(): T[] {
+    asArray(): (T extends CoValue ? CoID<T> : Exclude<T, CoValue>)[] {
         return this.entries().map((entry) => entry.value);
     }
 
-    entries(): { value: T; madeAt: number; opID: OpID }[] {
-        const arr: { value: T; madeAt: number; opID: OpID }[] = [];
+    entries(): {
+        value: T extends CoValue ? CoID<T> : Exclude<T, CoValue>;
+        madeAt: number;
+        opID: OpID;
+    }[] {
+        const arr: {
+            value: T extends CoValue ? CoID<T> : Exclude<T, CoValue>;
+            madeAt: number;
+            opID: OpID;
+        }[] = [];
         for (const opID of this.afterStart) {
             this.fillArrayFromOpID(opID, arr);
         }
@@ -227,7 +242,11 @@ export class CoList<T extends JsonValue, Meta extends JsonObject | null = null>
     /** @internal */
     private fillArrayFromOpID(
         opID: OpID,
-        arr: { value: T; madeAt: number; opID: OpID }[]
+        arr: {
+            value: T extends CoValue ? CoID<T> : Exclude<T, CoValue>;
+            madeAt: number;
+            opID: OpID;
+        }[]
     ) {
         const entry =
             this.insertions[opID.sessionID]?.[opID.txIndex]?.[opID.changeIdx];
@@ -268,23 +287,42 @@ export class CoList<T extends JsonValue, Meta extends JsonObject | null = null>
     }
 
     /** Returns the current items in the CoList as an array. (alias of `asArray`) */
-    toJSON(): T[] {
+    toJSON(): (T extends CoValue ? CoID<T> : Exclude<T, CoValue>)[] {
         return this.asArray();
     }
 
-    map<U>(mapper: (value: T, idx: number) => U): U[] {
+    map<U>(
+        mapper: (
+            value: T extends CoValue ? CoID<T> : Exclude<T, CoValue>,
+            idx: number
+        ) => U
+    ): U[] {
         return this.entries().map((entry, idx) => mapper(entry.value, idx));
     }
 
-    filter<U extends T>(predicate: (value: T, idx: number) => value is U): U[];
-    filter(predicate: (value: T, idx: number) => boolean): T[] {
+    filter<U extends T extends CoValue ? CoID<T> : Exclude<T, CoValue>>(
+        predicate: (
+            value: T extends CoValue ? CoID<T> : Exclude<T, CoValue>,
+            idx: number
+        ) => value is U
+    ): U[];
+    filter(
+        predicate: (
+            value: T extends CoValue ? CoID<T> : Exclude<T, CoValue>,
+            idx: number
+        ) => boolean
+    ): (T extends CoValue ? CoID<T> : Exclude<T, CoValue>)[] {
         return this.entries()
             .filter((entry, idx) => predicate(entry.value, idx))
             .map((entry) => entry.value);
     }
 
     reduce<U>(
-        reducer: (accumulator: U, value: T, idx: number) => U,
+        reducer: (
+            accumulator: U,
+            value: T extends CoValue ? CoID<T> : Exclude<T, CoValue>,
+            idx: number
+        ) => U,
         initialValue: U
     ): U {
         return this.entries().reduce(
@@ -293,32 +331,28 @@ export class CoList<T extends JsonValue, Meta extends JsonObject | null = null>
         );
     }
 
-    subscribe(listener: (coMap: CoList<T, Meta>) => void): () => void {
+    subscribe(listener: (coList: this) => void): () => void {
         return this.core.subscribe((content) => {
-            listener(content as CoList<T, Meta>);
+            listener(content as this);
         });
     }
 
-    edit(
-        changer: (editable: WriteableCoList<T, Meta>) => void
-    ): CoList<T, Meta> {
+    edit(changer: (editable: WriteableCoList<T, Meta>) => void): this {
         const editable = new WriteableCoList<T, Meta>(this.core);
         changer(editable);
-        return new CoList(this.core);
+        return new CoList(this.core) as this;
     }
 }
 
 export class WriteableCoList<
-        T extends JsonValue,
+        T extends JsonValue | CoValue,
         Meta extends JsonObject | null = null
     >
     extends CoList<T, Meta>
-    implements WriteableCoValue
+    implements CoValue
 {
     /** @internal */
-    edit(
-        _changer: (editable: WriteableCoList<T, Meta>) => void
-    ): CoList<T, Meta> {
+    edit(_changer: (editable: WriteableCoList<T, Meta>) => void): this {
         throw new Error("Already editing.");
     }
 
@@ -329,7 +363,7 @@ export class WriteableCoList<
      * If `privacy` is `"trusting"`, both `value` is stored in plaintext in the transaction, visible to everyone who gets a hold of it, including sync servers. */
     append(
         after: number,
-        value: T,
+        value: T extends CoValue ? T | CoID<T> : T,
         privacy: "private" | "trusting" = "private"
     ): void {
         const entries = this.entries();
@@ -350,7 +384,7 @@ export class WriteableCoList<
             [
                 {
                     op: "app",
-                    value,
+                    value: isCoValue(value) ? value.id : value,
                     after: opIDBefore,
                 },
             ],
@@ -365,7 +399,10 @@ export class WriteableCoList<
      * If `privacy` is `"private"` **(default)**, both `value` is encrypted in the transaction, only readable by other members of the group this `CoList` belongs to. Not even sync servers can see the content in plaintext.
      *
      * If `privacy` is `"trusting"`, both `value` is stored in plaintext in the transaction, visible to everyone who gets a hold of it, including sync servers. */
-    push(value: T, privacy: "private" | "trusting" = "private"): void {
+    push(
+        value: T extends CoValue ? T | CoID<T> : T,
+        privacy: "private" | "trusting" = "private"
+    ): void {
         // TODO: optimize
         const entries = this.entries();
         this.append(
@@ -384,7 +421,7 @@ export class WriteableCoList<
      */
     prepend(
         before: number,
-        value: T,
+        value: T extends CoValue ? T | CoID<T> : T,
         privacy: "private" | "trusting" = "private"
     ): void {
         const entries = this.entries();
@@ -409,7 +446,7 @@ export class WriteableCoList<
             [
                 {
                     op: "pre",
-                    value,
+                    value: isCoValue(value) ? value.id : value,
                     before: opIDAfter,
                 },
             ],

packages/cojson/src/coValues/coMap.ts

@@ -1,49 +1,49 @@
-import { JsonObject, JsonValue } from '../jsonValue.js';
-import { TransactionID } from '../ids.js';
-import { CoID, ReadableCoValue, WriteableCoValue } from '../coValue.js';
-import { CoValueCore, accountOrAgentIDfromSessionID } from '../coValueCore.js';
-import { AccountID, isAccountID } from '../account.js';
-import { Group } from '../group.js';
+import { JsonObject, JsonValue } from "../jsonValue.js";
+import { TransactionID } from "../ids.js";
+import { CoID, CoValue, isCoValue } from "../coValue.js";
+import { CoValueCore, accountOrAgentIDfromSessionID } from "../coValueCore.js";
+import { AccountID, isAccountID } from "../account.js";
+import { Group } from "../group.js";
+import { parseJSON } from "../jsonStringify.js";
 
-type MapOp<K extends string, V extends JsonValue> = {
+type MapOp<K extends string, V extends JsonValue | CoValue | undefined> = {
     txID: TransactionID;
     madeAt: number;
     changeIdx: number;
 } & MapOpPayload<K, V>;
 // TODO: add after TransactionID[] for conflicts/ordering
 
-export type MapOpPayload<K extends string, V extends JsonValue> = {
-    op: "set";
-    key: K;
-    value: V;
-} |
-{
-    op: "del";
-    key: K;
-};
-
-export type MapK<M extends { [key: string]: JsonValue; }> = keyof M & string;
-export type MapV<M extends { [key: string]: JsonValue; }> = M[MapK<M>];
-export type MapM<M extends { [key: string]: JsonValue; }> = {
-    [KK in MapK<M>]: M[KK];
-}
+export type MapOpPayload<
+    K extends string,
+    V extends JsonValue | CoValue | undefined
+> =
+    | {
+          op: "set";
+          key: K;
+          value: V extends CoValue ? CoID<V> : Exclude<V, CoValue>;
+      }
+    | {
+          op: "del";
+          key: K;
+      };
 
 /** A collaborative map with precise shape `M` and optional static metadata `Meta` */
 export class CoMap<
-    M extends { [key: string]: JsonValue; },
-    Meta extends JsonObject | null = null,
-> implements ReadableCoValue {
-    id: CoID<CoMap<MapM<M>, Meta>>;
+    M extends { [key: string]: JsonValue | CoValue | undefined },
+    Meta extends JsonObject | null = null
+> implements CoValue
+{
+    id: CoID<this>;
     type = "comap" as const;
     core: CoValueCore;
     /** @internal */
     ops: {
-        [KK in MapK<M>]?: MapOp<KK, M[KK]>[];
+        [Key in keyof M & string]?: MapOp<Key, M[Key]>[];
     };
 
     /** @internal */
     constructor(core: CoValueCore) {
-        this.id = core.id as CoID<CoMap<MapM<M>, Meta>>;
+        this.id = core.id as CoID<this>;
         this.core = core;
         this.ops = {};
 
@@ -62,11 +62,18 @@ export class CoMap<
     protected fillOpsFromCoValue() {
         this.ops = {};
 
-        for (const { txID, changes, madeAt } of this.core.getValidSortedTransactions()) {
-            for (const [changeIdx, changeUntyped] of (
+        for (const {
+            txID,
+            changes,
+            madeAt,
+        } of this.core.getValidSortedTransactions()) {
+            for (const [changeIdx, changeUntyped] of parseJSON(
                 changes
             ).entries()) {
-                const change = changeUntyped as MapOpPayload<MapK<M>, MapV<M>>;
+                const change = changeUntyped as MapOpPayload<
+                    keyof M & string,
+                    M[keyof M & string]
+                >;
                 let entries = this.ops[change.key];
                 if (!entries) {
                     entries = [];
@@ -76,18 +83,25 @@ export class CoMap<
                     txID,
                     madeAt,
                     changeIdx,
-                    ...(change as MapOpPayload<MapK<M>, MapV<M>>),
+                    ...(change as MapOpPayload<
+                        keyof M & string,
+                        M[keyof M & string]
+                    >),
                 });
             }
         }
     }
 
-    keys(): MapK<M>[] {
-        return Object.keys(this.ops) as MapK<M>[];
+    keys(): (keyof M & string)[] {
+        return Object.keys(this.ops) as (keyof M & string)[];
     }
 
     /** Returns the current value for the given key. */
-    get<K extends MapK<M>>(key: K): M[K] | undefined {
+    get<K extends keyof M & string>(
+        key: K
+    ):
+        | (M[K] extends CoValue ? CoID<M[K]> : Exclude<M[K], CoValue>)
+        | undefined {
         const ops = this.ops[key];
         if (!ops) {
             return undefined;
@@ -102,7 +116,12 @@ export class CoMap<
         }
     }
 
-    getAtTime<K extends MapK<M>>(key: K, time: number): M[K] | undefined {
+    getAtTime<K extends keyof M & string>(
+        key: K,
+        time: number
+    ):
+        | (M[K] extends CoValue ? CoID<M[K]> : Exclude<M[K], CoValue>)
+        | undefined {
         const ops = this.ops[key];
         if (!ops) {
             return undefined;
@@ -122,8 +141,8 @@ export class CoMap<
     }
 
     /** Returns the accountID of the last account to modify the value for the given key. */
-    whoEdited<K extends MapK<M>>(key: K): AccountID | undefined {
-        const tx  = this.getLastTxID(key);
+    whoEdited<K extends keyof M & string>(key: K): AccountID | undefined {
+        const tx = this.getLastTxID(key);
         if (!tx) {
             return undefined;
         }
@@ -135,7 +154,7 @@ export class CoMap<
         }
     }
 
-    getLastTxID<K extends MapK<M>>(key: K): TransactionID | undefined {
+    getLastTxID<K extends keyof M & string>(key: K): TransactionID | undefined {
         const ops = this.ops[key];
         if (!ops) {
             return undefined;
@@ -146,7 +165,15 @@ export class CoMap<
         return lastEntry.txID;
     }
 
-    getLastEntry<K extends MapK<M>>(key: K): { at: number; txID: TransactionID; value: M[K]; } | undefined {
+    getLastEntry<K extends keyof M & string>(
+        key: K
+    ):
+        | {
+              at: number;
+              txID: TransactionID;
+              value: M[K] extends CoValue ? CoID<M[K]> : Exclude<M[K], CoValue>;
+          }
+        | undefined {
         const ops = this.ops[key];
         if (!ops) {
             return undefined;
@@ -157,21 +184,43 @@ export class CoMap<
         if (lastEntry.op === "del") {
             return undefined;
         } else {
-            return { at: lastEntry.madeAt, txID: lastEntry.txID, value: lastEntry.value };
+            return {
+                at: lastEntry.madeAt,
+                txID: lastEntry.txID,
+                value: lastEntry.value,
+            };
         }
     }
 
-    getHistory<K extends MapK<M>>(key: K): { at: number; txID: TransactionID; value: M[K] | undefined; }[] {
+    getHistory<K extends keyof M & string>(
+        key: K
+    ): {
+        at: number;
+        txID: TransactionID;
+        value:
+            | (M[K] extends CoValue ? CoID<M[K]> : Exclude<M[K], CoValue>)
+            | undefined;
+    }[] {
         const ops = this.ops[key];
         if (!ops) {
             return [];
         }
 
-        const history: { at: number; txID: TransactionID; value: M[K] | undefined; }[] = [];
+        const history: {
+            at: number;
+            txID: TransactionID;
+            value:
+                | (M[K] extends CoValue ? CoID<M[K]> : Exclude<M[K], CoValue>)
+                | undefined;
+        }[] = [];
 
         for (const op of ops) {
             if (op.op === "del") {
-                history.push({ at: op.madeAt, txID: op.txID, value: undefined });
+                history.push({
+                    at: op.madeAt,
+                    txID: op.txID,
+                    value: undefined,
+                });
             } else {
                 history.push({ at: op.madeAt, txID: op.txID, value: op.value });
             }
@@ -193,25 +242,28 @@ export class CoMap<
         return json;
     }
 
-    subscribe(listener: (coMap: CoMap<M, Meta>) => void): () => void {
+    subscribe(listener: (coMap: this) => void): () => void {
         return this.core.subscribe((content) => {
-            listener(content as CoMap<M, Meta>);
+            listener(content as this);
         });
     }
 
-    edit(changer: (editable: WriteableCoMap<M, Meta>) => void): CoMap<M, Meta> {
+    edit(changer: (editable: WriteableCoMap<M, Meta>) => void): this {
         const editable = new WriteableCoMap<M, Meta>(this.core);
         changer(editable);
-        return new CoMap(this.core);
+        return new CoMap(this.core) as this;
     }
 }
 
 export class WriteableCoMap<
-    M extends { [key: string]: JsonValue; },
-    Meta extends JsonObject | null = null,
-> extends CoMap<M, Meta> implements WriteableCoValue {
+        M extends { [key: string]: JsonValue | CoValue | undefined },
+        Meta extends JsonObject | null = null
+    >
+    extends CoMap<M, Meta>
+    implements CoValue
+{
     /** @internal */
-    edit(_changer: (editable: WriteableCoMap<M, Meta>) => void): CoMap<M, Meta> {
+    edit(_changer: (editable: WriteableCoMap<M, Meta>) => void): this {
         throw new Error("Already editing.");
     }
 
@@ -220,14 +272,21 @@ export class WriteableCoMap<
      * If `privacy` is `"private"` **(default)**, both `key` and `value` are encrypted in the transaction, only readable by other members of the group this `CoMap` belongs to. Not even sync servers can see the content in plaintext.
      *
      * If `privacy` is `"trusting"`, both `key` and `value` are stored in plaintext in the transaction, visible to everyone who gets a hold of it, including sync servers. */
-    set<K extends MapK<M>>(key: K, value: M[K], privacy: "private" | "trusting" = "private"): void {
-        this.core.makeTransaction([
-            {
-                op: "set",
-                key,
-                value,
-            },
-        ], privacy);
+    set<K extends keyof M & string>(
+        key: K,
+        value: M[K] extends CoValue ? M[K] | CoID<M[K]> : M[K],
+        privacy: "private" | "trusting" = "private"
+    ): void {
+        this.core.makeTransaction(
+            [
+                {
+                    op: "set",
+                    key,
+                    value: isCoValue(value) ? value.id : value,
+                },
+            ],
+            privacy
+        );
 
         this.fillOpsFromCoValue();
     }
@@ -237,13 +296,19 @@ export class WriteableCoMap<
      * If `privacy` is `"private"` **(default)**, `key` is encrypted in the transaction, only readable by other members of the group this `CoMap` belongs to. Not even sync servers can see the content in plaintext.
      *
      * If `privacy` is `"trusting"`, `key` is stored in plaintext in the transaction, visible to everyone who gets a hold of it, including sync servers. */
-    delete(key: MapK<M>, privacy: "private" | "trusting" = "private"): void {
-        this.core.makeTransaction([
-            {
-                op: "del",
-                key,
-            },
-        ], privacy);
+    delete(
+        key: keyof M & string,
+        privacy: "private" | "trusting" = "private"
+    ): void {
+        this.core.makeTransaction(
+            [
+                {
+                    op: "del",
+                    key,
+                },
+            ],
+            privacy
+        );
 
         this.fillOpsFromCoValue();
     }

packages/cojson/src/coValues/coStream.ts

@@ -1,11 +1,13 @@
 import { JsonObject, JsonValue } from "../jsonValue.js";
-import { CoID, ReadableCoValue, WriteableCoValue } from "../coValue.js";
-import { CoValueCore } from "../coValueCore.js";
+import { CoValue, CoID, isCoValue } from "../coValue.js";
+import { CoValueCore, accountOrAgentIDfromSessionID } from "../coValueCore.js";
 import { Group } from "../group.js";
 import { SessionID } from "../ids.js";
-import { base64url } from "@scure/base";
+import { base64URLtoBytes, bytesToBase64url } from "../base64url.js";
+import { AccountID, isAccountID } from "../account.js";
+import { parseJSON } from "../jsonStringify.js";
 
-export type BinaryChunkInfo = {
+export type BinaryStreamInfo = {
     mimeType: string;
     fileName?: string;
     totalSizeBytes?: number;
@@ -13,11 +15,11 @@ export type BinaryChunkInfo = {
 
 export type BinaryStreamStart = {
     type: "start";
-} & BinaryChunkInfo;
+} & BinaryStreamInfo;
 
 export type BinaryStreamChunk = {
     type: "chunk";
-    chunk: `U${string}`;
+    chunk: `binary_U${string}`;
 };
 
 export type BinaryStreamEnd = {
@@ -31,22 +33,28 @@ export type BinaryStreamItem =
     | BinaryStreamChunk
     | BinaryStreamEnd;
 
+export type CoStreamItem<T extends JsonValue | CoValue> = {
+    item: T extends CoValue ? CoID<T> : Exclude<T, CoValue>;
+    madeAt: number;
+};
+
 export class CoStream<
-    T extends JsonValue,
+    T extends JsonValue | CoValue,
     Meta extends JsonObject | null = null
-> implements ReadableCoValue
+> implements CoValue
 {
-    id: CoID<CoStream<T, Meta>>;
+    id: CoID<this>;
     type = "costream" as const;
     core: CoValueCore;
     items: {
-        [key: SessionID]: T[];
+        [key: SessionID]: CoStreamItem<T>[];
     };
 
     constructor(core: CoValueCore) {
-        this.id = core.id as CoID<CoStream<T, Meta>>;
+        this.id = core.id as CoID<this>;
         this.core = core;
         this.items = {};
+        this.fillFromCoValue();
     }
 
     get meta(): Meta {
@@ -63,21 +71,26 @@ export class CoStream<
 
         for (const {
             txID,
+            madeAt,
             changes,
         } of this.core.getValidSortedTransactions()) {
-            for (const changeUntyped of changes) {
-                const change = changeUntyped as T;
+            for (const changeUntyped of parseJSON(changes)) {
+                const change = changeUntyped as T extends CoValue
+                    ? CoID<T>
+                    : Exclude<T, CoValue>;
                 let entries = this.items[txID.sessionID];
                 if (!entries) {
                     entries = [];
                     this.items[txID.sessionID] = entries;
                 }
-                entries.push(change);
+                entries.push({ item: change, madeAt });
             }
         }
     }
 
-    getSingleStream(): T[] | undefined {
+    getSingleStream():
+        | (T extends CoValue ? CoID<T> : Exclude<T, CoValue>)[]
+        | undefined {
         if (Object.keys(this.items).length === 0) {
             return undefined;
         } else if (Object.keys(this.items).length !== 1) {
@@ -86,41 +99,111 @@ export class CoStream<
             );
         }
 
-        return Object.values(this.items)[0];
+        return Object.values(this.items)[0]?.map((item) => item.item);
+    }
+
+    getLastItemsPerAccount(): {
+        [account: AccountID]:
+            | (T extends CoValue ? CoID<T> : Exclude<T, CoValue>)
+            | undefined;
+    } {
+        const result: { [account: AccountID]: CoStreamItem<T> | undefined } =
+            {};
+
+        for (const [sessionID, items] of Object.entries(this.items)) {
+            const account = accountOrAgentIDfromSessionID(
+                sessionID as SessionID
+            );
+            if (!isAccountID(account)) continue;
+            if (items.length > 0) {
+                const lastItemOfSession = items[items.length - 1]!;
+                if (
+                    !result[account] ||
+                    lastItemOfSession.madeAt > result[account]!.madeAt
+                ) {
+                    result[account] = lastItemOfSession;
+                }
+            }
+        }
+
+        return Object.fromEntries(
+            Object.entries(result).map(([account, item]) => [
+                account,
+                item?.item,
+            ])
+        );
+    }
+
+    getLastItemFrom(
+        account: AccountID
+    ): (T extends CoValue ? CoID<T> : Exclude<T, CoValue>) | undefined {
+        let lastItem: CoStreamItem<T> | undefined;
+
+        for (const [sessionID, items] of Object.entries(this.items)) {
+            if (sessionID.startsWith(account)) {
+                if (items.length > 0) {
+                    const lastItemOfSession = items[items.length - 1]!;
+                    if (
+                        !lastItem ||
+                        lastItemOfSession.madeAt > lastItem.madeAt
+                    ) {
+                        lastItem = lastItemOfSession;
+                    }
+                }
+            }
+        }
+
+        return lastItem?.item;
+    }
+
+    getLastItemFromMe():
+        | (T extends CoValue ? CoID<T> : Exclude<T, CoValue>)
+        | undefined {
+        const myAccountID = this.core.node.account.id;
+        if (!isAccountID(myAccountID)) return undefined;
+        return this.getLastItemFrom(myAccountID);
     }
 
     toJSON(): {
-        [key: SessionID]: T[];
+        [key: SessionID]: (T extends CoValue ? CoID<T> : Exclude<T, CoValue>)[];
     } {
-        return this.items;
+        return Object.fromEntries(
+            Object.entries(this.items).map(([sessionID, items]) => [
+                sessionID,
+                items.map((item) => item.item),
+            ])
+        );
     }
 
-    subscribe(listener: (coMap: CoStream<T, Meta>) => void): () => void {
+    subscribe(listener: (coStream: this) => void): () => void {
         return this.core.subscribe((content) => {
-            listener(content as CoStream<T, Meta>);
+            listener(content as this);
         });
     }
 
-    edit(
-        changer: (editable: WriteableCoStream<T, Meta>) => void
-    ): CoStream<T, Meta> {
+    edit(changer: (editable: WriteableCoStream<T, Meta>) => void): this {
         const editable = new WriteableCoStream<T, Meta>(this.core);
         changer(editable);
-        return new CoStream(this.core);
+        return new CoStream(this.core) as this;
     }
 }
 
+const binary_U_prefixLength = 8; // "binary_U".length;
+
 export class BinaryCoStream<
         Meta extends BinaryCoStreamMeta = { type: "binary" }
     >
     extends CoStream<BinaryStreamItem, Meta>
-    implements ReadableCoValue
+    implements CoValue
 {
-    id!: CoID<BinaryCoStream<Meta>>;
+    id!: CoID<this>;
 
-    getBinaryChunks():
-        | (BinaryChunkInfo & { chunks: Uint8Array[]; finished: boolean })
+    getBinaryChunks(
+        allowUnfinished?: boolean
+    ):
+        | (BinaryStreamInfo & { chunks: Uint8Array[]; finished: boolean })
         | undefined {
+        // const before = performance.now();
         const items = this.getSingleStream();
 
         if (!items) return;
@@ -132,17 +215,19 @@ export class BinaryCoStream<
             return;
         }
 
+        const end = items[items.length - 1];
+
+        if (end?.type !== "end" && !allowUnfinished) return;
+
         const chunks: Uint8Array[] = [];
 
+        let finished = false;
+        // let totalLength = 0;
+
         for (const item of items.slice(1)) {
             if (item.type === "end") {
-                return {
-                    mimeType: start.mimeType,
-                    fileName: start.fileName,
-                    totalSizeBytes: start.totalSizeBytes,
-                    chunks,
-                    finished: true,
-                };
+                finished = true;
+                break;
             }
 
             if (item.type !== "chunk") {
@@ -150,43 +235,55 @@ export class BinaryCoStream<
                 return undefined;
             }
 
-            chunks.push(base64url.decode(item.chunk.slice(1)));
+            const chunk = base64URLtoBytes(
+                item.chunk.slice(binary_U_prefixLength)
+            );
+            // totalLength += chunk.length;
+            chunks.push(chunk);
         }
 
+        // const after = performance.now();
+        // console.log(
+        //     "getBinaryChunks bandwidth in MB/s",
+        //     (1000 * totalLength) / (after - before) / (1024 * 1024)
+        // );
+
         return {
             mimeType: start.mimeType,
             fileName: start.fileName,
             totalSizeBytes: start.totalSizeBytes,
             chunks,
-            finished: false,
+            finished,
         };
     }
 
-    edit(
-        changer: (editable: WriteableBinaryCoStream<Meta>) => void
-    ): BinaryCoStream<Meta> {
+    edit(changer: (editable: WriteableBinaryCoStream<Meta>) => void): this {
         const editable = new WriteableBinaryCoStream<Meta>(this.core);
         changer(editable);
-        return new BinaryCoStream(this.core);
+        return new BinaryCoStream(this.core) as this;
     }
 }
 
 export class WriteableCoStream<
-        T extends JsonValue,
+        T extends JsonValue | CoValue,
         Meta extends JsonObject | null = null
     >
     extends CoStream<T, Meta>
-    implements WriteableCoValue
+    implements CoValue
 {
     /** @internal */
-    edit(
-        _changer: (editable: WriteableCoStream<T, Meta>) => void
-    ): CoStream<T, Meta> {
+    edit(_changer: (editable: WriteableCoStream<T, Meta>) => void): this {
         throw new Error("Already editing.");
     }
 
-    push(item: T, privacy: "private" | "trusting" = "private") {
-        this.core.makeTransaction([item], privacy);
+    push(
+        item: T extends CoValue ? T | CoID<T> : T,
+        privacy: "private" | "trusting" = "private"
+    ) {
+        this.core.makeTransaction(
+            [isCoValue(item) ? item.id : item],
+            privacy
+        );
         this.fillFromCoValue();
     }
 }
@@ -195,25 +292,20 @@ export class WriteableBinaryCoStream<
         Meta extends BinaryCoStreamMeta = { type: "binary" }
     >
     extends BinaryCoStream<Meta>
-    implements WriteableCoValue
+    implements CoValue
 {
     /** @internal */
-    edit(
-        _changer: (editable: WriteableBinaryCoStream<Meta>) => void
-    ): BinaryCoStream<Meta> {
+    edit(_changer: (editable: WriteableBinaryCoStream<Meta>) => void): this {
         throw new Error("Already editing.");
     }
 
     /** @internal */
-    push(
-        item: BinaryStreamItem,
-        privacy: "private" | "trusting" = "private"
-    ) {
+    push(item: BinaryStreamItem, privacy: "private" | "trusting" = "private") {
         WriteableCoStream.prototype.push.call(this, item, privacy);
     }
 
     startBinaryStream(
-        settings: BinaryChunkInfo,
+        settings: BinaryStreamInfo,
         privacy: "private" | "trusting" = "private"
     ) {
         this.push(
@@ -229,13 +321,19 @@ export class WriteableBinaryCoStream<
         chunk: Uint8Array,
         privacy: "private" | "trusting" = "private"
     ) {
+        // const before = performance.now();
         this.push(
             {
                 type: "chunk",
-                chunk: `U${base64url.encode(chunk)}`,
+                chunk: `binary_U${bytesToBase64url(chunk)}`,
             } satisfies BinaryStreamChunk,
             privacy
         );
+        // const after = performance.now();
+        // console.log(
+        //     "pushBinaryStreamChunk bandwidth in MB/s",
+        //     (1000 * chunk.length) / (after - before) / (1024 * 1024)
+        // );
     }
 
     endBinaryStream(privacy: "private" | "trusting" = "private") {

packages/cojson/src/coValues/static.ts

@@ -1,15 +1,15 @@
 import { JsonObject } from '../jsonValue.js';
-import { CoID, ReadableCoValue } from '../coValue.js';
+import { CoID, CoValue } from '../coValue.js';
 import { CoValueCore } from '../coValueCore.js';
 import { Group } from '../index.js';
 
-export class Static<T extends JsonObject> implements ReadableCoValue{
-    id: CoID<Static<T>>;
+export class Static<T extends JsonObject> implements CoValue{
+    id: CoID<this>;
     type = "static" as const;
     core: CoValueCore;
 
     constructor(core: CoValueCore) {
-        this.id = core.id as CoID<Static<T>>;
+        this.id = core.id as CoID<this>;
         this.core = core;
     }
 
@@ -25,7 +25,7 @@ export class Static<T extends JsonObject> implements ReadableCoValue{
         throw new Error("Method not implemented.");
     }
 
-    subscribe(_listener: (coMap: Static<T>) => void): () => void {
+    subscribe(_listener: (st: this) => void): () => void {
         throw new Error("Method not implemented.");
     }
 }

packages/cojson/src/crypto.ts

@@ -1,11 +1,39 @@
 import { ed25519, x25519 } from "@noble/curves/ed25519";
 import { xsalsa20_poly1305, xsalsa20 } from "@noble/ciphers/salsa";
 import { JsonValue } from "./jsonValue.js";
-import { base58, base64url } from "@scure/base";
-import stableStringify from "fast-json-stable-stringify";
-import { blake3 } from "@noble/hashes/blake3";
+import { base58 } from "@scure/base";
 import { randomBytes } from "@noble/ciphers/webcrypto/utils";
 import { AgentID, RawCoID, TransactionID } from "./ids.js";
+import { base64URLtoBytes, bytesToBase64url } from "./base64url.js";
+
+import { createBLAKE3 } from 'hash-wasm';
+import { Stringified, parseJSON, stableStringify } from "./jsonStringify.js";
+
+let blake3Instance: Awaited<ReturnType<typeof createBLAKE3>>;
+let blake3HashOnce: (data: Uint8Array) => Uint8Array;
+let blake3HashOnceWithContext: (data: Uint8Array, {context}: {context: Uint8Array}) => Uint8Array;
+let blake3incrementalUpdateSLOW_WITH_DEVTOOLS: (state: Uint8Array, data: Uint8Array) => Uint8Array;
+let blake3digestForState: (state: Uint8Array) => Uint8Array;
+
+export const cryptoReady = new Promise<void>((resolve) => {
+    createBLAKE3().then(bl3 => {
+        blake3Instance = bl3;
+        blake3HashOnce = (data) => {
+            return bl3.init().update(data).digest('binary');
+        }
+        blake3HashOnceWithContext = (data, {context}) => {
+            return bl3.init().update(context).update(data).digest('binary');
+        }
+        blake3incrementalUpdateSLOW_WITH_DEVTOOLS = (state, data) => {
+            bl3.load(state).update(data);
+            return bl3.save();
+        }
+        blake3digestForState = (state) => {
+            return bl3.load(state).digest('binary');
+        }
+        resolve();
+    })
+});
 
 export type SignerSecret = `signerSecret_z${string}`;
 export type SignerID = `signer_z${string}`;
@@ -127,7 +155,7 @@ export function seal<T extends JsonValue>(
     to: SealerID,
     nOnceMaterial: { in: RawCoID; tx: TransactionID }
 ): Sealed<T> {
-    const nOnce = blake3(
+    const nOnce = blake3HashOnce(
         textEncoder.encode(stableStringify(nOnceMaterial))
     ).slice(0, 24);
 
@@ -143,7 +171,7 @@ export function seal<T extends JsonValue>(
         plaintext
     );
 
-    return `sealed_U${base64url.encode(sealedBytes)}` as Sealed<T>;
+    return `sealed_U${bytesToBase64url(sealedBytes)}` as Sealed<T>;
 }
 
 export function unseal<T extends JsonValue>(
@@ -152,7 +180,7 @@ export function unseal<T extends JsonValue>(
     from: SealerID,
     nOnceMaterial: { in: RawCoID; tx: TransactionID }
 ): T | undefined {
-    const nOnce = blake3(
+    const nOnce = blake3HashOnce(
         textEncoder.encode(stableStringify(nOnceMaterial))
     ).slice(0, 24);
 
@@ -160,7 +188,7 @@ export function unseal<T extends JsonValue>(
 
     const senderPub = base58.decode(from.substring("sealer_z".length));
 
-    const sealedBytes = base64url.decode(sealed.substring("sealed_U".length));
+    const sealedBytes = base64URLtoBytes(sealed.substring("sealed_U".length));
 
     const sharedSecret = x25519.getSharedSecret(sealerPriv, senderPub);
 
@@ -180,28 +208,32 @@ export type Hash = `hash_z${string}`;
 
 export function secureHash(value: JsonValue): Hash {
     return `hash_z${base58.encode(
-        blake3(textEncoder.encode(stableStringify(value)))
+        blake3HashOnce(textEncoder.encode(stableStringify(value)))
     )}`;
 }
 
 export class StreamingHash {
-    state: ReturnType<typeof blake3.create>;
+    state: Uint8Array;
 
-    constructor(fromClone?: ReturnType<typeof blake3.create>) {
-        this.state = fromClone || blake3.create({});
+    constructor(fromClone?: Uint8Array) {
+        this.state = fromClone || blake3Instance.init().save();
     }
 
     update(value: JsonValue) {
-        this.state.update(textEncoder.encode(stableStringify(value)));
+        const encoded = textEncoder.encode(stableStringify(value))
+        // const before = performance.now();
+        this.state = blake3incrementalUpdateSLOW_WITH_DEVTOOLS(this.state, encoded);
+        // const after = performance.now();
+        // console.log(`Hashing throughput in MB/s`, 1000 * (encoded.length / (after - before)) / (1024 * 1024));
     }
 
     digest(): Hash {
-        const hash = this.state.digest();
+        const hash = blake3digestForState(this.state);
         return `hash_z${base58.encode(hash)}`;
     }
 
     clone(): StreamingHash {
-        return new StreamingHash(this.state.clone());
+        return new StreamingHash(new Uint8Array(this.state));
     }
 }
 
@@ -210,7 +242,10 @@ export const shortHashLength = 19;
 
 export function shortHash(value: JsonValue): ShortHash {
     return `shortHash_z${base58.encode(
-        blake3(textEncoder.encode(stableStringify(value))).slice(0, shortHashLength)
+        blake3HashOnce(textEncoder.encode(stableStringify(value))).slice(
+            0,
+            shortHashLength
+        )
     )}`;
 }
 
@@ -237,13 +272,13 @@ function encrypt<T extends JsonValue, N extends JsonValue>(
     const keySecretBytes = base58.decode(
         keySecret.substring("keySecret_z".length)
     );
-    const nOnce = blake3(
+    const nOnce = blake3HashOnce(
         textEncoder.encode(stableStringify(nOnceMaterial))
     ).slice(0, 24);
 
     const plaintext = textEncoder.encode(stableStringify(value));
     const ciphertext = xsalsa20(keySecretBytes, nOnce, plaintext);
-    return `encrypted_U${base64url.encode(ciphertext)}` as Encrypted<T, N>;
+    return `encrypted_U${bytesToBase64url(ciphertext)}` as Encrypted<T, N>;
 }
 
 export function encryptForTransaction<T extends JsonValue>(
@@ -281,30 +316,48 @@ export function encryptKeySecret(keys: {
     };
 }
 
+function decryptRaw<T extends JsonValue, N extends JsonValue>(
+    encrypted: Encrypted<T, N>,
+    keySecret: KeySecret,
+    nOnceMaterial: N
+): Stringified<T> {
+    const keySecretBytes = base58.decode(
+        keySecret.substring("keySecret_z".length)
+    );
+    const nOnce = blake3HashOnce(
+        textEncoder.encode(stableStringify(nOnceMaterial))
+    ).slice(0, 24);
+
+    const ciphertext = base64URLtoBytes(
+        encrypted.substring("encrypted_U".length)
+    );
+    const plaintext = xsalsa20(keySecretBytes, nOnce, ciphertext);
+
+        return textDecoder.decode(plaintext) as Stringified<T>;
+
+}
+
 function decrypt<T extends JsonValue, N extends JsonValue>(
     encrypted: Encrypted<T, N>,
     keySecret: KeySecret,
     nOnceMaterial: N
 ): T | undefined {
-    const keySecretBytes = base58.decode(
-        keySecret.substring("keySecret_z".length)
-    );
-    const nOnce = blake3(
-        textEncoder.encode(stableStringify(nOnceMaterial))
-    ).slice(0, 24);
-
-    const ciphertext = base64url.decode(
-        encrypted.substring("encrypted_U".length)
-    );
-    const plaintext = xsalsa20(keySecretBytes, nOnce, ciphertext);
-
     try {
-        return JSON.parse(textDecoder.decode(plaintext));
+        return parseJSON(decryptRaw(encrypted, keySecret, nOnceMaterial));
     } catch (e) {
+        console.error("Decryption error", e)
         return undefined;
     }
 }
 
+export function decryptRawForTransaction<T extends JsonValue>(
+    encrypted: Encrypted<T, { in: RawCoID; tx: TransactionID }>,
+    keySecret: KeySecret,
+    nOnceMaterial: { in: RawCoID; tx: TransactionID }
+): Stringified<T> | undefined {
+    return decryptRaw(encrypted, keySecret, nOnceMaterial);
+}
+
 export function decryptForTransaction<T extends JsonValue>(
     encrypted: Encrypted<T, { in: RawCoID; tx: TransactionID }>,
     keySecret: KeySecret,
@@ -355,15 +408,17 @@ export function newRandomSecretSeed(): Uint8Array {
 
 export function agentSecretFromSecretSeed(secretSeed: Uint8Array): AgentSecret {
     if (secretSeed.length !== secretSeedLength) {
-        throw new Error(`Secret seed needs to be ${secretSeedLength} bytes long`);
+        throw new Error(
+            `Secret seed needs to be ${secretSeedLength} bytes long`
+        );
     }
 
     return `sealerSecret_z${base58.encode(
-        blake3(secretSeed, {
+        blake3HashOnceWithContext(secretSeed, {
             context: textEncoder.encode("seal"),
         })
     )}/signerSecret_z${base58.encode(
-        blake3(secretSeed, {
+        blake3HashOnceWithContext(secretSeed, {
             context: textEncoder.encode("sign"),
         })
     )}`;

packages/cojson/src/group.ts

@@ -1,4 +1,4 @@
-import { CoID, CoValueImpl } from "./coValue.js";
+import { CoID, CoValue, AnyCoValue } from "./coValue.js";
 import { CoMap } from "./coValues/coMap.js";
 import { JsonObject, JsonValue } from "./jsonValue.js";
 import {
@@ -21,7 +21,11 @@ import { AccountID, GeneralizedControlledAccount, Profile } from "./account.js";
 import { Role } from "./permissions.js";
 import { base58 } from "@scure/base";
 import { CoList } from "./coValues/coList.js";
-import { BinaryCoStream, BinaryCoStreamMeta, CoStream } from "./coValues/coStream.js";
+import {
+    BinaryCoStream,
+    BinaryCoStreamMeta,
+    CoStream,
+} from "./coValues/coStream.js";
 
 export type GroupContent = {
     profile: CoID<Profile> | null;
@@ -35,7 +39,7 @@ export type GroupContent = {
 };
 
 export function expectGroupContent(
-    content: CoValueImpl
+    content: CoValue
 ): CoMap<GroupContent, JsonObject | null> {
     if (content.type !== "comap") {
         throw new Error("Expected map");
@@ -238,10 +242,22 @@ export class Group {
 
     /** Creates a new `CoMap` within this group, with the specified specialized
      *  `CoMap` type `M` and optional static metadata. */
-    createMap<M extends CoMap<{ [key: string]: JsonValue }, JsonObject | null>>(
+    createMap<
+        M extends CoMap<
+            { [key: string]: JsonValue | AnyCoValue | undefined },
+            JsonObject | null
+        >
+    >(
+        init?: M extends CoMap<infer M, infer _Meta>
+            ? {
+                  [K in keyof M]: M[K] extends AnyCoValue
+                      ? M[K] | CoID<M[K]>
+                      : M[K];
+              }
+            : never,
         meta?: M["meta"]
     ): M {
-        return this.node
+        let map = this.node
             .createCoValue({
                 type: "comap",
                 ruleset: {
@@ -252,14 +268,27 @@ export class Group {
                 ...createdNowUnique(),
             })
             .getCurrentContent() as M;
+
+        if (init) {
+            map = map.edit((editable) => {
+                for (const [key, value] of Object.entries(init)) {
+                    editable.set(key, value);
+                }
+            });
+        }
+
+        return map;
     }
 
     /** Creates a new `CoList` within this group, with the specified specialized
      * `CoList` type `L` and optional static metadata. */
-    createList<L extends CoList<JsonValue, JsonObject | null>>(
+    createList<L extends CoList<JsonValue | CoValue, JsonObject | null>>(
+        init?: L extends CoList<infer I, infer _Meta>
+            ? (I extends CoValue ? CoID<I> | I : I)[]
+            : never,
         meta?: L["meta"]
     ): L {
-        return this.node
+        let list = this.node
             .createCoValue({
                 type: "colist",
                 ruleset: {
@@ -270,9 +299,19 @@ export class Group {
                 ...createdNowUnique(),
             })
             .getCurrentContent() as L;
+
+        if (init) {
+            list = list.edit((editable) => {
+                for (const item of init) {
+                    editable.push(item);
+                }
+            });
+        }
+
+        return list;
     }
 
-    createStream<C extends CoStream<JsonValue, JsonObject | null>>(
+    createStream<C extends CoStream<JsonValue | CoValue, JsonObject | null>>(
         meta?: C["meta"]
     ): C {
         return this.node
@@ -288,9 +327,9 @@ export class Group {
             .getCurrentContent() as C;
     }
 
-    createBinaryStream<
-        C extends BinaryCoStream<BinaryCoStreamMeta>
-    >(meta: C["meta"] = { type: "binary" }): C {
+    createBinaryStream<C extends BinaryCoStream<BinaryCoStreamMeta>>(
+        meta: C["meta"] = { type: "binary" }
+    ): C {
         return this.node
             .createCoValue({
                 type: "costream",

packages/cojson/src/index.ts

@@ -1,6 +1,6 @@
-import { CoValueCore, newRandomSessionID } from "./coValueCore.js";
+import { CoValueCore, newRandomSessionID, MAX_RECOMMENDED_TX_SIZE } from "./coValueCore.js";
 import { LocalNode } from "./node.js";
-import type { CoValue, ReadableCoValue } from "./coValue.js";
+import type { CoValue } from "./coValue.js";
 import { CoMap, WriteableCoMap } from "./coValues/coMap.js";
 import { CoList, WriteableCoList } from "./coValues/coList.js";
 import {
@@ -18,22 +18,27 @@ import {
     agentSecretFromSecretSeed,
     secretSeedLength,
     shortHashLength,
+    cryptoReady
 } from "./crypto.js";
 import { connectedPeers } from "./streamUtils.js";
 import { AnonymousControlledAccount, ControlledAccount } from "./account.js";
 import { rawCoIDtoBytes, rawCoIDfromBytes } from "./ids.js";
 import { Group, expectGroupContent } from "./group.js";
+import { base64URLtoBytes, bytesToBase64url } from "./base64url.js";
+import { parseJSON } from "./jsonStringify.js";
 
 import type { SessionID, AgentID } from "./ids.js";
-import type { CoID, CoValueImpl } from "./coValue.js";
-import type { BinaryChunkInfo, BinaryCoStreamMeta } from "./coValues/coStream.js";
+import type { CoID, AnyCoValue } from "./coValue.js";
+import type { Queried } from "./queries.js";
+import type { BinaryStreamInfo, BinaryCoStreamMeta } from "./coValues/coStream.js";
 import type { JsonValue } from "./jsonValue.js";
 import type { SyncMessage, Peer } from "./sync.js";
 import type { AgentSecret } from "./crypto.js";
-import type { AccountID, Profile } from "./account.js";
+import type { AccountID, Account, Profile } from "./account.js";
 import type { InviteSecret } from "./group.js";
+import type * as Media from "./media.js";
 
-type Value = JsonValue | CoValueImpl;
+type Value = JsonValue | AnyCoValue;
 
 /** @hidden */
 export const cojsonInternals = {
@@ -50,6 +55,9 @@ export const cojsonInternals = {
     secretSeedLength,
     shortHashLength,
     expectGroupContent,
+    base64URLtoBytes,
+    bytesToBase64url,
+    parseJSON
 };
 
 export {
@@ -66,25 +74,29 @@ export {
     CoValueCore,
     AnonymousControlledAccount,
     ControlledAccount,
+    cryptoReady as cojsonReady,
+    MAX_RECOMMENDED_TX_SIZE
 };
 
 export type {
     Value,
     JsonValue,
     CoValue,
-    ReadableCoValue,
-    CoValueImpl,
+    AnyCoValue,
     CoID,
+    Queried,
     AccountID,
+    Account,
     Profile,
     SessionID,
     Peer,
-    BinaryChunkInfo,
+    BinaryStreamInfo,
     BinaryCoStreamMeta,
     AgentID,
     AgentSecret,
     InviteSecret,
     SyncMessage,
+    Media
 };
 
 // eslint-disable-next-line @typescript-eslint/no-namespace

packages/cojson/src/jsonStringify.ts

@@ -0,0 +1,66 @@
+// adapted from fast-json-stable-stringify (https://github.com/epoberezkin/fast-json-stable-stringify)
+
+export type Stringified<T> = string & { __type: T };
+
+export function stableStringify<T>(data: T): Stringified<T>
+export function stableStringify(data: undefined): undefined
+export function stableStringify<T>(data: T | undefined): Stringified<T> | undefined {
+    const cycles = false;
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const seen: any[] = [];
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    let node = data as any;
+
+    if (node && node.toJSON && typeof node.toJSON === "function") {
+        node = node.toJSON();
+    }
+
+    if (node === undefined) return;
+    if (typeof node == "number")
+        return (isFinite(node) ? "" + node : "null") as Stringified<T>;
+    if (typeof node !== "object") {
+        if (
+            typeof node === "string" &&
+            (node.startsWith("encrypted_U") || node.startsWith("binary_U"))
+        ) {
+            return `"${node}"` as Stringified<T>;
+        }
+        return JSON.stringify(node) as Stringified<T>;
+    }
+
+    let i, out;
+    if (Array.isArray(node)) {
+        out = "[";
+        for (i = 0; i < node.length; i++) {
+            if (i) out += ",";
+            out += stableStringify(node[i]) || "null";
+        }
+        return (out + "]") as Stringified<T>;
+    }
+
+    if (node === null) return "null" as Stringified<T>;
+
+    if (seen.indexOf(node) !== -1) {
+        if (cycles) return JSON.stringify("__cycle__") as Stringified<T>;
+        throw new TypeError("Converting circular structure to JSON");
+    }
+
+    const seenIndex = seen.push(node) - 1;
+    const keys = Object.keys(node).sort();
+    out = "";
+    for (i = 0; i < keys.length; i++) {
+        const key = keys[i]!;
+        const value = stableStringify(node[key]);
+
+        if (!value) continue;
+        if (out) out += ",";
+        out += JSON.stringify(key) + ":" + value;
+    }
+    seen.splice(seenIndex, 1);
+    return ("{" + out + "}") as Stringified<T>;
+}
+
+export function parseJSON<T>(json: Stringified<T>): T {
+    return JSON.parse(json);
+}

packages/cojson/src/jsonValue.ts

@@ -3,4 +3,4 @@ import { RawCoID } from './ids.js';
 export type JsonAtom = string | number | boolean | null;
 export type JsonValue = JsonAtom | JsonArray | JsonObject | RawCoID;
 export type JsonArray = JsonValue[];
-export type JsonObject = { [key: string]: JsonValue; };
+export type JsonObject = { [key: string]: JsonValue | undefined; };

packages/cojson/src/media.ts

@@ -0,0 +1,8 @@
+import { CoMap } from './coValues/coMap.js'
+import { BinaryCoStream } from './coValues/coStream.js'
+
+export type ImageDefinition = CoMap<{
+    originalSize: [number, number];
+    placeholderDataURL?: string;
+    [res: `${number}x${number}`]: BinaryCoStream;
+}>;

packages/cojson/src/node.ts

@@ -9,7 +9,11 @@ import {
     newRandomKeySecret,
     seal,
 } from "./crypto.js";
-import { CoValueCore, CoValueHeader, newRandomSessionID } from "./coValueCore.js";
+import {
+    CoValueCore,
+    CoValueHeader,
+    newRandomSessionID,
+} from "./coValueCore.js";
 import {
     InviteSecret,
     Group,
@@ -19,9 +23,10 @@ import {
 } from "./group.js";
 import { Peer, SyncManager } from "./sync.js";
 import { AgentID, RawCoID, SessionID, isAgentID } from "./ids.js";
-import { CoID, CoValueImpl } from "./coValue.js";
+import { CoID } from "./coValue.js";
+import { Queried, query } from "./queries.js";
 import {
-    Account,
+    AccountGroup,
     AccountMeta,
     accountHeaderForInitialAgentSecret,
     GeneralizedControlledAccount,
@@ -30,9 +35,10 @@ import {
     AccountID,
     Profile,
     AccountContent,
-    AccountMap,
+    Account,
 } from "./account.js";
 import { CoMap } from "./coValues/coMap.js";
+import { CoValue } from "./index.js";
 
 /** A `LocalNode` represents a local view of a set of loaded `CoValue`s, from the perspective of a particular account (or primitive cryptographic agent).
 
@@ -152,16 +158,45 @@ export class LocalNode {
      * promise once a first version has been loaded. See `coValue.subscribe()` and `node.useTelepathicData()`
      * for listening to subsequent updates to the CoValue.
      */
-    async load<T extends CoValueImpl>(id: CoID<T>): Promise<T> {
+    async load<T extends CoValue>(id: CoID<T>): Promise<T> {
         return (await this.loadCoValue(id)).getCurrentContent() as T;
     }
 
+    subscribe<T extends CoValue>(id: CoID<T>, callback: (update: T) => void): () => void {
+        let stopped = false;
+        let unsubscribe!: () => void;
+
+        console.log("Subscribing to " + id);
+
+        this.load(id).then((coValue) => {
+            if (stopped) {
+                return;
+            }
+            unsubscribe = coValue.subscribe(callback);
+        }).catch((e) => {
+            console.error("Error subscribing to ", id, e);
+        });
+
+        return () => {
+            console.log("Unsubscribing from " + id);
+            stopped = true;
+            unsubscribe?.();
+        }
+    }
+
+    query<T extends CoValue>(
+        id: CoID<T>,
+        callback: (update: Queried<T> | undefined) => void
+    ): () => void {
+        return query(id, this, callback);
+    }
+
     /**
      * Loads a profile associated with an account. `Profile` is at least a `CoMap<{string: name}>`,
      * but might contain other, app-specific properties.
      */
     async loadProfile(id: AccountID): Promise<Profile> {
-        const account = await this.load<AccountMap>(id);
+        const account = await this.load<Account>(id);
         const profileID = account.get("profile");
 
         if (!profileID) {
@@ -172,7 +207,7 @@ export class LocalNode {
         ).getCurrentContent() as Profile;
     }
 
-    async acceptInvite<T extends CoValueImpl>(
+    async acceptInvite<T extends CoValue>(
         groupOrOwnedValueID: CoID<T>,
         inviteSecret: InviteSecret
     ): Promise<void> {
@@ -204,11 +239,8 @@ export class LocalNode {
                 }
             });
             setTimeout(
-                () =>
-                    reject(
-                        new Error("Couldn't find invite before timeout")
-                    ),
-                1000
+                () => reject(new Error("Couldn't find invite before timeout")),
+                2000
             );
         });
 
@@ -224,7 +256,9 @@ export class LocalNode {
             (existingRole === "writer" && inviteRole === "reader") ||
             (existingRole === "reader" && inviteRole === "readerInvite")
         ) {
-            console.debug("Not accepting invite that would replace or downgrade role");
+            console.debug(
+                "Not accepting invite that would replace or downgrade role"
+            );
             return;
         }
 
@@ -242,7 +276,8 @@ export class LocalNode {
                 : "reader"
         );
 
-        group.underlyingMap.core._sessions = groupAsInvite.underlyingMap.core.sessions;
+        group.underlyingMap.core._sessions =
+            groupAsInvite.underlyingMap.core.sessions;
         group.underlyingMap.core._cachedContent = undefined;
 
         for (const groupListener of group.underlyingMap.core.listeners) {
@@ -332,11 +367,11 @@ export class LocalNode {
             account.node
         );
 
-        const profile = accountAsGroup.createMap<Profile>({
+        let profile = accountAsGroup.createMap<Profile>(undefined, {
             type: "profile",
         });
 
-        profile.edit((editable) => {
+        profile = profile.edit((editable) => {
             editable.set("name", name, "trusting");
         });
 
@@ -346,14 +381,26 @@ export class LocalNode {
 
         const accountOnThisNode = this.expectCoValueLoaded(account.id);
 
-        accountOnThisNode._sessions = {...accountAsGroup.underlyingMap.core.sessions};
+        accountOnThisNode._sessions = {
+            ...accountAsGroup.underlyingMap.core.sessions,
+        };
         accountOnThisNode._cachedContent = undefined;
 
+        const profileOnThisNode = this.createCoValue(profile.core.header);
+
+        profileOnThisNode._sessions = {
+            ...profile.core.sessions,
+        };
+        profileOnThisNode._cachedContent = undefined;
+
         return controlledAccount;
     }
 
     /** @internal */
-    resolveAccountAgent(id: AccountID | AgentID, expectation?: string): AgentID {
+    resolveAccountAgent(
+        id: AccountID | AgentID,
+        expectation?: string
+    ): AgentID {
         if (isAgentID(id)) {
             return id;
         }
@@ -374,7 +421,7 @@ export class LocalNode {
             );
         }
 
-        return new Account(
+        return new AccountGroup(
             coValue.getCurrentContent() as CoMap<GroupContent, AccountMeta>,
             this
         ).getCurrentAgentID();
@@ -443,7 +490,11 @@ export class LocalNode {
                     continue;
                 }
 
-                const newCoValue = new CoValueCore(entry.coValue.header, newNode, {...entry.coValue.sessions});
+                const newCoValue = new CoValueCore(
+                    entry.coValue.header,
+                    newNode,
+                    { ...entry.coValue.sessions }
+                );
 
                 newNode.coValues[coValueID as RawCoID] = {
                     state: "loaded",

packages/cojson/src/permissions.ts

@@ -15,6 +15,7 @@ import {
     AccountID,
     Profile,
 } from "./account.js";
+import { parseJSON } from "./jsonStringify.js";
 
 export type PermissionsDef =
     | { type: "group"; initialAdmin: AccountID | AgentID }
@@ -76,11 +77,13 @@ export function determineValidTransactions(
             // console.log("before", { memberState, validTransactions });
             const transactor = accountOrAgentIDfromSessionID(sessionID);
 
-            const change = tx.changes[0] as
+            const changes = parseJSON(tx.changes)
+
+            const change = changes[0] as
                 | MapOpPayload<AccountID | AgentID, Role>
                 | MapOpPayload<"readKey", JsonValue>
                 | MapOpPayload<"profile", CoID<Profile>>;
-            if (tx.changes.length !== 1) {
+            if (changes.length !== 1) {
                 console.warn("Group transaction must have exactly one change");
                 continue;
             }

packages/cojson/src/queries.ts

@@ -0,0 +1,519 @@
+import { JsonValue } from "./jsonValue.js";
+import { CoMap, WriteableCoMap } from "./coValues/coMap.js";
+import {
+    BinaryCoStream,
+    BinaryStreamInfo,
+    CoStream,
+    WriteableBinaryCoStream,
+    WriteableCoStream,
+} from "./coValues/coStream.js";
+import { Static } from "./coValues/static.js";
+import { CoList, WriteableCoList } from "./coValues/coList.js";
+import { CoValueCore, accountOrAgentIDfromSessionID } from "./coValueCore.js";
+import { Group } from "./group.js";
+import { AccountID, Profile, isAccountID } from "./account.js";
+import {
+    AnyBinaryCoStream,
+    AnyCoList,
+    AnyCoMap,
+    AnyCoStream,
+    AnyCoValue,
+    AnyStatic,
+    CoID,
+    CoValue,
+} from "./coValue.js";
+import { SessionID } from "./ids.js";
+import { LocalNode } from "./node.js";
+
+export const AllReservedQueryProps = [
+    "id",
+    "type",
+    "meta",
+    "core",
+    "group",
+    "shadowed",
+    "edit",
+    "edits",
+] as const;
+
+export type ReservedQueryProps = (typeof AllReservedQueryProps)[number];
+
+export type QueriedCoMap<T extends AnyCoMap> = T extends CoMap<
+    infer M,
+    infer Meta
+>
+    ? Readonly<{
+          [K in keyof M as Exclude<K, ReservedQueryProps>]: ValueOrSubQueried<
+              M[K]
+          >;
+      }> &
+          (keyof M & ReservedQueryProps extends never
+              ? // eslint-disable-next-line @typescript-eslint/ban-types
+                {}
+              : Readonly<{
+                    shadowed: Readonly<{
+                        [K in keyof M as Extract<
+                            K,
+                            ReservedQueryProps
+                        >]: ValueOrSubQueried<M[K]>;
+                    }>;
+                }>) &
+          Readonly<{
+              id: CoID<T>;
+              type: "comap";
+              edits: Readonly<{
+                  [K in keyof M & string]: Readonly<{
+                      by?: QueriedAccountAndProfile;
+                      at: Date;
+                      // all: TODO;
+                  }>;
+              }>;
+              meta: Meta;
+              group: Group;
+              core: CoValueCore;
+              edit: (changer: (editable: WriteableCoMap<M, Meta>) => void) => T;
+          }>
+    : never;
+
+export type QueriedAccountAndProfile = Readonly<{
+    id: AccountID;
+    profile?: Readonly<{ name?: string; id: CoID<Profile> }>;
+    isMe?: boolean;
+}>;
+
+export type QueriedCoList<T extends AnyCoList> = T extends CoList<
+    infer I,
+    infer Meta
+>
+    ? readonly ValueOrSubQueried<I>[] &
+          Readonly<{
+              id: CoID<T>;
+              type: "colist";
+              meta: Meta;
+              group: Group;
+              core: CoValueCore;
+              edit: (
+                  changer: (editable: WriteableCoList<I, Meta>) => void
+              ) => T;
+              edits: readonly Readonly<{
+                  by?: QueriedAccountAndProfile;
+                  at: Date;
+              }>[] & {
+                  // deletions: TODO;
+              };
+          }>
+    : never;
+
+export type QueriedCoStreamItems<I extends JsonValue | CoValue> = Readonly<{
+    last: ValueOrSubQueried<I> | undefined;
+    by?: QueriedAccountAndProfile;
+    at?: Date;
+    all: { value: ValueOrSubQueried<I>; at: Date }[];
+}>;
+
+export type QueriedCoStream<T extends AnyCoStream> = T extends CoStream<
+    infer I,
+    infer Meta
+>
+    ? Readonly<{
+          id: CoID<T>;
+          type: "costream";
+          me?: QueriedCoStreamItems<I>;
+          perAccount: Readonly<{
+              [account: AccountID]: QueriedCoStreamItems<I>;
+          }>;
+          perSession: Readonly<{
+              [session: SessionID]: QueriedCoStreamItems<I>;
+          }>;
+          meta: Meta;
+          group: Group;
+          core: CoValueCore;
+          edit: (changer: (editable: WriteableCoStream<I, Meta>) => void) => T;
+      }>
+    : never;
+
+export type QueriedBinaryCoStreamItems = Readonly<{
+    last: Uint8Array | undefined;
+    by: QueriedAccountAndProfile;
+    at: Date;
+    all: { value: Uint8Array; at: Date }[];
+}>;
+
+export type QueriedBinaryCoStream<T extends AnyBinaryCoStream> =
+    T extends BinaryCoStream<infer Meta>
+        ? Readonly<
+              {
+                  id: CoID<T>;
+                  type: "costream";
+                  me?: QueriedBinaryCoStreamItems;
+                  perAccount: Readonly<{
+                      [account: AccountID]: QueriedBinaryCoStreamItems;
+                  }>;
+                  perSession: Readonly<{
+                      [session: SessionID]: QueriedBinaryCoStreamItems;
+                  }>;
+                  meta: Meta;
+                  group: Group;
+                  core: CoValueCore;
+                  edit: (
+                      changer: (editable: WriteableBinaryCoStream<Meta>) => void
+                  ) => T;
+              }
+          > & Readonly<BinaryStreamInfo>
+        : never;
+
+export type QueriedStatic<T extends AnyStatic> = T extends Static<infer Meta>
+    ? Readonly<{
+          id: CoID<T>;
+          type: "colist";
+          meta: Meta;
+          group: Group;
+          core: CoValueCore;
+      }>
+    : never;
+
+export type Queried<T extends CoValue> = T extends AnyCoMap
+    ? QueriedCoMap<T>
+    : T extends AnyCoList
+    ? QueriedCoList<T>
+    // : T extends BinaryCoStream<infer _>
+    // ? QueriedBinaryCoStream<T>
+    : T extends AnyCoStream
+    ? QueriedCoStream<T>
+    : T extends AnyStatic
+    ? QueriedStatic<T>
+    : never;
+
+export type ValueOrSubQueried<
+    V extends JsonValue | CoValue | CoID<CoValue> | undefined
+> = V extends CoID<infer C>
+    ? Queried<C> | undefined
+    : V extends CoValue
+    ? Queried<V> | undefined
+    : V;
+
+export type QueryInclude<T extends CoValue> = T extends CoMap<
+    infer M,
+    infer _Meta
+>
+    ? {
+          [K in keyof M as M[K] extends AnyCoValue | CoID<AnyCoValue>
+              ? K
+              : never]?: M[K] extends AnyCoValue
+              ? true | QueryInclude<M[K]>
+              : M[K] extends CoID<infer S>
+              ? true | QueryInclude<S>
+              : never;
+      }
+    : T extends CoList<infer I, infer _>
+    ? I extends AnyCoValue
+        ? [true] | [QueryInclude<I>]
+        : I extends CoID<infer S>
+        ? [true] | [QueryInclude<S>]
+        : never
+    : never; // TODO add CoStream;
+
+export function query<T extends CoValue>(
+    id: CoID<T>,
+    node: LocalNode,
+    callback: (queried: Queried<T> | undefined) => void
+): () => void {
+    console.log("querying", id);
+
+    const children: {
+        [id: CoID<CoValue>]: {
+            lastQueried: { [key: string]: any } | undefined;
+            unsubscribe: () => void;
+        };
+    } = {};
+
+    const unsubscribe = node.subscribe(id, (update) => {
+        lastRootValue = update;
+        onUpdate();
+    });
+
+    function getChildLastQueriedOrSubscribe<T extends CoValue>(
+        childID: CoID<T>
+    ) {
+        let child = children[childID];
+        if (!child) {
+            child = {
+                lastQueried: undefined,
+                unsubscribe: query(childID, node, (childQueried) => {
+                    child!.lastQueried = childQueried;
+                    onUpdate();
+                }),
+            };
+            children[childID] = child;
+        }
+        return child.lastQueried as Queried<T> | undefined;
+    }
+
+    function resolveValue<T extends JsonValue>(
+        value: T
+    ): T extends CoID<CoValue> ? Queried<CoValue> | undefined : T {
+        return (
+            typeof value === "string" && value.startsWith("co_")
+                ? getChildLastQueriedOrSubscribe(value as CoID<CoValue>)
+                : value
+        ) as T extends CoID<CoValue> ? Queried<CoValue> | undefined : T;
+    }
+
+    let lastRootValue: T | undefined;
+
+    function onUpdate() {
+        const rootValue = lastRootValue;
+
+        if (rootValue === undefined) {
+            return undefined;
+        }
+
+        if (rootValue instanceof CoMap) {
+            callback(queryMap(rootValue) as Queried<T>);
+        } else if (rootValue instanceof CoList) {
+            callback(queryList(rootValue) as unknown as Queried<T>);
+        } else if (rootValue instanceof CoStream) {
+            if (rootValue.meta?.type === "binary") {
+                // Querying binary string not yet implemented
+                return {}
+            } else {
+                callback(queryStream(rootValue) as unknown as Queried<T>);
+            }
+        }
+    }
+
+    return function cleanup() {
+        for (const child of Object.values(children)) {
+            child.unsubscribe();
+        }
+        unsubscribe();
+    };
+
+    function queryMap(rootValue: T & CoMap<any, any>) {
+        const mapResult: {
+            [key: string]: any;
+        } = {};
+        // let allChildrenAvailable = true;
+        for (const key of rootValue.keys()) {
+            const value = rootValue.get(key);
+
+            if (value === undefined) continue;
+
+            if (AllReservedQueryProps.includes(key as ReservedQueryProps)) {
+                mapResult.shadowed = mapResult.shadowed || {};
+                mapResult.shadowed[key] = resolveValue(value);
+            } else {
+                mapResult[key] = resolveValue(value);
+            }
+        }
+
+        Object.defineProperties(mapResult, {
+            id: { value: rootValue.id },
+            type: { value: "comap" },
+        });
+
+        if (
+            rootValue.meta?.type !== "account" &&
+            rootValue.meta?.type !== "profile"
+        ) {
+            Object.defineProperties(mapResult, {
+                edit: {
+                    value: (
+                        changer: (editable: WriteableCoMap<any, any>) => void
+                    ) => {
+                        rootValue.edit(changer);
+                        return rootValue;
+                    },
+                },
+                edits: {
+                    value: {},
+                },
+            });
+
+            for (const key of rootValue.keys()) {
+                const editorID = rootValue.whoEdited(key);
+                const editor =
+                    editorID && getChildLastQueriedOrSubscribe(editorID);
+                mapResult.edits[key] = {
+                    by: editor && {
+                        id: editorID,
+                        isMe: editorID === node.account.id ? true : undefined,
+                        profile: editor.profile && {
+                            id: editor.profile.id,
+                            name: editor.profile.name,
+                        },
+                    },
+                    at: new Date(rootValue.getLastEntry(key)!.at),
+                };
+            }
+        }
+
+        Object.defineProperties(mapResult, {
+            meta: { value: rootValue.meta },
+            group: {
+                get() {
+                    return rootValue.group;
+                },
+            },
+            core: {
+                get() {
+                    return rootValue.core;
+                },
+            },
+        });
+        return mapResult;
+    }
+
+    function queryList(rootValue: T & CoList<any, any>) {
+        const arr: any[] & { [key: string]: any } = rootValue
+            .asArray()
+            .map(resolveValue);
+
+        Object.defineProperties(arr, {
+            type: { value: "colist" },
+            id: { value: rootValue.id },
+            edit: {
+                value: (
+                    changer: (editable: WriteableCoList<any, any>) => void
+                ) => {
+                    rootValue.edit(changer);
+                    return rootValue;
+                },
+            },
+            edits: {
+                value: [],
+            },
+            meta: { value: rootValue.meta },
+            group: {
+                get() {
+                    return rootValue.group;
+                },
+            },
+            core: {
+                get() {
+                    return rootValue.core;
+                },
+            },
+        });
+
+        for (let i = 0; i < arr.length; i++) {
+            const editorID = rootValue.whoInserted(i);
+            const editor = editorID && getChildLastQueriedOrSubscribe(editorID);
+            arr.edits[i] = {
+                by: editor && {
+                    id: editorID,
+                    isMe: editorID === node.account.id ? true : undefined,
+                    profile: editor.profile && {
+                        id: editor.profile.id,
+                        name: editor.profile.name,
+                    },
+                },
+                at: new Date(rootValue.entries()[i]!.madeAt),
+            };
+        }
+        return arr;
+    }
+
+    function queryStream(rootValue: T & CoStream<any, any>) {
+        const seenAccounts = new Set<AccountID>();
+
+        const perSession = Object.fromEntries(
+            Object.entries(rootValue.items).map(([sessionID, items]) => {
+                const editorID = accountOrAgentIDfromSessionID(
+                    sessionID as SessionID
+                );
+                if (isAccountID(editorID)) seenAccounts.add(editorID);
+                const editor =
+                    editorID &&
+                    (isAccountID(editorID)
+                        ? getChildLastQueriedOrSubscribe(editorID)
+                        : undefined);
+                const lastItem = items[items.length - 1];
+                return [
+                    sessionID as SessionID,
+                    {
+                        last: lastItem && resolveValue(lastItem.item),
+                        by: editor && {
+                            id: editorID as AccountID,
+                            isMe:
+                                editorID === node.account.id ? true : undefined,
+                            profile: editor.profile && {
+                                id: editor.profile.id,
+                                name: editor.profile.name,
+                            },
+                        },
+                        at: lastItem && new Date(lastItem.madeAt),
+                        all: items.map((item) => ({
+                            value: item.item && resolveValue(item.item),
+                            at: new Date(item.madeAt),
+                        })),
+                    } satisfies QueriedCoStreamItems<JsonValue>,
+                ];
+            })
+        );
+
+        const perAccount = Object.fromEntries(
+            [...seenAccounts.values()].map((accountID) => {
+                const itemsFromAllMatchingSessions = Object.entries(perSession)
+                    .flatMap(([sessionID, sessionItems]) =>
+                        sessionID.startsWith(accountID) ? sessionItems.all : []
+                    )
+                    .sort((a, b) => {
+                        return a.at.getTime() - b.at.getTime();
+                    });
+                const editor = getChildLastQueriedOrSubscribe(accountID);
+                const lastItem =
+                    itemsFromAllMatchingSessions[
+                        itemsFromAllMatchingSessions.length - 1
+                    ];
+
+                return [
+                    accountID,
+                    {
+                        last: lastItem?.value,
+                        by: editor && {
+                            id: accountID,
+                            isMe:
+                                accountID === node.account.id
+                                    ? true
+                                    : undefined,
+                            profile: editor.profile && {
+                                id: editor.profile.id,
+                                name: editor.profile.name,
+                            },
+                        },
+                        at: lastItem && new Date(lastItem.at),
+                        all: itemsFromAllMatchingSessions,
+                    } satisfies QueriedCoStreamItems<JsonValue>,
+                ];
+            })
+        );
+
+        const me = isAccountID(node.account.id)
+            ? perAccount[node.account.id]
+            : undefined;
+
+        const streamResult: QueriedCoStream<AnyCoStream> = {
+            type: "costream",
+            id: rootValue.id,
+            perSession,
+            perAccount,
+            me,
+            meta: rootValue.meta,
+            get group() {
+                return rootValue.group;
+            },
+            get core() {
+                return rootValue.core;
+            },
+            edit: (
+                changer: (editable: WriteableCoStream<any, any>) => void
+            ) => {
+                rootValue.edit(changer);
+                return rootValue;
+            },
+        };
+
+        return streamResult;
+    }
+}

packages/cojson/src/streamUtils.ts

@@ -34,7 +34,14 @@ export function connectedPeers(
                     trace &&
                         console.debug(
                             `${peer2id} -> ${peer1id}`,
-                            JSON.stringify(chunk, null, 2)
+                            JSON.stringify(
+                                chunk,
+                                (k, v) =>
+                                    (k === "changes" || k === "encryptedChanges")
+                                        ? v.slice(0, 20) + "..."
+                                        : v,
+                                2
+                            )
                         );
                     controller.enqueue(chunk);
                 },
@@ -52,7 +59,14 @@ export function connectedPeers(
                     trace &&
                         console.debug(
                             `${peer1id} -> ${peer2id}`,
-                            JSON.stringify(chunk, null, 2)
+                            JSON.stringify(
+                                chunk,
+                                (k, v) =>
+                                    (k === "changes" || k === "encryptedChanges")
+                                        ? v.slice(0, 20) + "..."
+                                        : v,
+                                2
+                            )
                         );
                     controller.enqueue(chunk);
                 },
@@ -102,16 +116,22 @@ export function newStreamPair<T>(): [ReadableStream<T>, WritableStream<T>] {
         },
     });
 
+    let lastWritePromise = Promise.resolve();
+
     const writable = new WritableStream<T>({
         async write(chunk) {
             const enqueue = await enqueuePromise;
             if (readerClosed) {
                 throw new Error("Reader closed");
             } else {
-                // make sure write resolves before corresponding read
-                setTimeout(() => {
-                    enqueue(chunk);
-                })
+                // make sure write resolves before corresponding read, but make sure writes are still in order
+                await lastWritePromise;
+                lastWritePromise = new Promise((resolve) => {
+                    setTimeout(() => {
+                        enqueue(chunk);
+                        resolve();
+                    });
+                });
             }
         },
         async abort(reason) {

packages/cojson/src/sync.ts

@@ -9,6 +9,7 @@ import {
     WritableStreamDefaultWriter,
 } from "isomorphic-streams";
 import { RawCoID, SessionID } from "./ids.js";
+import { stableStringify } from "./jsonStringify.js";
 
 export type CoValueKnownState = {
     id: RawCoID;
@@ -214,14 +215,32 @@ export class SyncManager {
             await this.sendNewContentIncludingDependencies(id, peer);
         }
 
-        const newContent = coValue.newContentSince(
+        const newContentPieces = coValue.newContentSince(
             peer.optimisticKnownStates[id]
         );
 
-        if (newContent) {
-            await this.trySendToPeer(peer, newContent);
+        if (newContentPieces) {
+            const optimisticKnownStateBefore =
+                peer.optimisticKnownStates[id] || emptyKnownState(id);
+
+            const sendPieces = async () => {
+                for (const [i, piece] of newContentPieces.entries()) {
+                    // console.log(
+                    //     `${id} -> ${peer.id}: Sending content piece ${i + 1}/${newContentPieces.length} header: ${!!piece.header}`,
+                    //     // Object.values(piece.new).map((s) => s.newTransactions)
+                    // );
+                    await this.trySendToPeer(peer, piece);
+                }
+            };
+
+            sendPieces().catch((e) => {
+                console.error("Error sending new content piece, retrying", e);
+                peer.optimisticKnownStates[id] = optimisticKnownStateBefore;
+                return this.sendNewContentIncludingDependencies(id, peer);
+            });
+
             peer.optimisticKnownStates[id] = combinedKnownStates(
-                peer.optimisticKnownStates[id] || emptyKnownState(id),
+                optimisticKnownStateBefore,
                 coValue.knownState()
             );
         }
@@ -260,15 +279,21 @@ export class SyncManager {
                 for await (const msg of peerState.incoming) {
                     try {
                         await this.handleSyncMessage(msg, peerState);
+                        await new Promise<void>((resolve) => {
+                            setTimeout(resolve, 0);
+                        });
                     } catch (e) {
                         console.error(
                             `Error reading from peer ${peer.id}, handling msg`,
-                            JSON.stringify(msg),
+                            JSON.stringify(msg, (k, v) =>
+                                k === "changes" || k === "encryptedChanges"
+                                    ? v.slice(0, 20) + "..."
+                                    : v
+                            ),
                             e
                         );
                     }
                 }
-                console.log("DONE!!!");
             } catch (e) {
                 console.error(`Error reading from peer ${peer.id}`, e);
             }
@@ -445,15 +470,43 @@ export class SyncManager {
             const newTransactions =
                 newContentForSession.newTransactions.slice(alreadyKnownOffset);
 
-            const success = coValue.tryAddTransactions(
+            if (newTransactions.length === 0) {
+                continue;
+            }
+
+            const before = performance.now();
+            const success = await coValue.tryAddTransactionsAsync(
                 sessionID,
                 newTransactions,
                 undefined,
                 newContentForSession.lastSignature
             );
+            const after = performance.now();
+            if (after - before > 10) {
+                const totalTxLength = newTransactions
+                    .map((t) =>
+                        t.privacy === "private"
+                            ? t.encryptedChanges.length
+                            : t.changes.length
+                    )
+                    .reduce((a, b) => a + b, 0);
+                console.log(
+                    `Adding incoming transactions took ${(
+                        after - before
+                    ).toFixed(2)}ms for ${totalTxLength} bytes = bandwidth: ${(
+                        (1000 * totalTxLength) /
+                        (after - before) /
+                        (1024 * 1024)
+                    ).toFixed(2)} MB/s`
+                );
+            }
 
             if (!success) {
-                console.error("Failed to add transactions", newTransactions);
+                console.error(
+                    "Failed to add transactions",
+                    msg.id,
+                    newTransactions
+                );
                 continue;
             }
 
@@ -478,18 +531,9 @@ export class SyncManager {
     }
 
     async handleCorrection(msg: KnownStateMessage, peer: PeerState) {
-        const coValue = this.local.expectCoValueLoaded(msg.id);
+        peer.optimisticKnownStates[msg.id] = msg;
 
-        peer.optimisticKnownStates[msg.id] = combinedKnownStates(
-            msg,
-            coValue.knownState()
-        );
-
-        const newContent = coValue.newContentSince(msg);
-
-        if (newContent) {
-            await this.trySendToPeer(peer, newContent);
-        }
+        return this.sendNewContentIncludingDependencies(msg.id, peer);
     }
 
     handleUnsubscribe(_msg: DoneMessage) {

packages/cojson/src/tests/account.test.ts

@@ -1,6 +1,11 @@
-import { newRandomSessionID } from "./coValueCore.js";
-import { LocalNode } from "./node.js";
-import { connectedPeers } from "./streamUtils.js";
+import { newRandomSessionID } from "../coValueCore.js";
+import { cojsonReady } from "../index.js";
+import { LocalNode } from "../node.js";
+import { connectedPeers } from "../streamUtils.js";
+
+beforeEach(async () => {
+    await cojsonReady;
+});
 
 test("Can create a node while creating a new account with profile", async () => {
     const { node, accountID, accountSecret, sessionID } =

packages/cojson/src/tests/coValue.test.ts

@@ -1,9 +1,14 @@
-import { accountOrAgentIDfromSessionID } from "./coValueCore.js";
-import { BinaryCoStream } from "./coValues/coStream.js";
-import { createdNowUnique } from "./crypto.js";
-import { LocalNode } from "./node.js";
+import { accountOrAgentIDfromSessionID } from "../coValueCore.js";
+import { BinaryCoStream } from "../coValues/coStream.js";
+import { createdNowUnique } from "../crypto.js";
+import { MAX_RECOMMENDED_TX_SIZE, cojsonReady } from "../index.js";
+import { LocalNode } from "../node.js";
 import { randomAnonymousAccountAndSessionID } from "./testUtils.js";
 
+beforeEach(async () => {
+    await cojsonReady;
+});
+
 test("Empty CoMap works", () => {
     const node = new LocalNode(...randomAnonymousAccountAndSessionID());
 
@@ -377,11 +382,143 @@ test("Can push into BinaryCoStream", () => {
 
     content.edit((editable) => {
         editable.startBinaryStream({mimeType: "text/plain", fileName: "test.txt"}, "trusting");
-        expect(editable.getBinaryChunks()).toEqual({
+        expect(editable.getBinaryChunks(true)).toEqual({
             mimeType: "text/plain",
             fileName: "test.txt",
             chunks: [],
             finished: false,
         });
+        editable.pushBinaryStreamChunk(new Uint8Array([1, 2, 3]), "trusting");
+        expect(editable.getBinaryChunks(true)).toEqual({
+            mimeType: "text/plain",
+            fileName: "test.txt",
+            chunks: [new Uint8Array([1, 2, 3])],
+            finished: false,
+        });
+        editable.pushBinaryStreamChunk(new Uint8Array([4, 5, 6]), "trusting");
+
+        expect(editable.getBinaryChunks(true)).toEqual({
+            mimeType: "text/plain",
+            fileName: "test.txt",
+            chunks: [new Uint8Array([1, 2, 3]), new Uint8Array([4, 5, 6])],
+            finished: false,
+        });
+
+        editable.endBinaryStream("trusting");
+        expect(editable.getBinaryChunks()).toEqual({
+            mimeType: "text/plain",
+            fileName: "test.txt",
+            chunks: [new Uint8Array([1, 2, 3]), new Uint8Array([4, 5, 6])],
+            finished: true,
+        });
     });
 });
+
+test("When adding large transactions (small fraction of MAX_RECOMMENDED_TX_SIZE), we store an inbetween signature every time we reach MAX_RECOMMENDED_TX_SIZE and split up newContentSince accordingly", () => {
+    const node = new LocalNode(...randomAnonymousAccountAndSessionID());
+
+    const coValue = node.createCoValue({
+        type: "costream",
+        ruleset: { type: "unsafeAllowAll" },
+        meta: { type: "binary" },
+        ...createdNowUnique(),
+    });
+
+    const content = coValue.getCurrentContent();
+
+    if (content.type !== "costream" || content.meta?.type !== "binary" || !(content instanceof BinaryCoStream)) {
+        throw new Error("Expected binary stream");
+    }
+
+    content.edit((editable) => {
+        editable.startBinaryStream({mimeType: "text/plain", fileName: "test.txt"}, "trusting");
+    });
+
+    for (let i = 0; i < 10; i++) {
+        const chunk = new Uint8Array(MAX_RECOMMENDED_TX_SIZE/3 + 100);
+
+        content.edit((editable) => {
+            editable.pushBinaryStreamChunk(chunk, "trusting");
+        });
+    }
+
+    content.edit((editable) => {
+        editable.endBinaryStream("trusting");
+    });
+
+    const sessionEntry = coValue._sessions[node.currentSessionID]!;
+    expect(sessionEntry.transactions.length).toEqual(12);
+    expect(sessionEntry.signatureAfter[0]).not.toBeDefined();
+    expect(sessionEntry.signatureAfter[1]).not.toBeDefined();
+    expect(sessionEntry.signatureAfter[2]).not.toBeDefined();
+    expect(sessionEntry.signatureAfter[3]).toBeDefined();
+    expect(sessionEntry.signatureAfter[4]).not.toBeDefined();
+    expect(sessionEntry.signatureAfter[5]).not.toBeDefined();
+    expect(sessionEntry.signatureAfter[6]).toBeDefined();
+    expect(sessionEntry.signatureAfter[7]).not.toBeDefined();
+    expect(sessionEntry.signatureAfter[8]).not.toBeDefined();
+    expect(sessionEntry.signatureAfter[9]).toBeDefined();
+    expect(sessionEntry.signatureAfter[10]).not.toBeDefined();
+    expect(sessionEntry.signatureAfter[11]).not.toBeDefined();
+
+    const newContent = coValue.newContentSince({id: coValue.id, header: false, sessions: {}})!;
+
+    expect(newContent.length).toEqual(5)
+    expect(newContent[0]!.header).toBeDefined();
+    expect(newContent[1]!.new[node.currentSessionID]!.lastSignature).toEqual(sessionEntry.signatureAfter[3]);
+    expect(newContent[2]!.new[node.currentSessionID]!.lastSignature).toEqual(sessionEntry.signatureAfter[6]);
+    expect(newContent[3]!.new[node.currentSessionID]!.lastSignature).toEqual(sessionEntry.signatureAfter[9]);
+    expect(newContent[4]!.new[node.currentSessionID]!.lastSignature).toEqual(sessionEntry.lastSignature);
+});
+
+test("When adding large transactions (bigger than MAX_RECOMMENDED_TX_SIZE), we store an inbetween signature after every large transaction and split up newContentSince accordingly", () => {
+    const node = new LocalNode(...randomAnonymousAccountAndSessionID());
+
+    const coValue = node.createCoValue({
+        type: "costream",
+        ruleset: { type: "unsafeAllowAll" },
+        meta: { type: "binary" },
+        ...createdNowUnique(),
+    });
+
+    const content = coValue.getCurrentContent();
+
+    if (content.type !== "costream" || content.meta?.type !== "binary" || !(content instanceof BinaryCoStream)) {
+        throw new Error("Expected binary stream");
+    }
+
+    content.edit((editable) => {
+        editable.startBinaryStream({mimeType: "text/plain", fileName: "test.txt"}, "trusting");
+    });
+
+    const chunk = new Uint8Array(MAX_RECOMMENDED_TX_SIZE + 100);
+
+    for (let i = 0; i < 3; i++) {
+        content.edit((editable) => {
+            editable.pushBinaryStreamChunk(chunk, "trusting");
+        });
+    }
+
+    content.edit((editable) => {
+        editable.endBinaryStream("trusting");
+    });
+
+    const sessionEntry = coValue._sessions[node.currentSessionID]!;
+    expect(sessionEntry.transactions.length).toEqual(5);
+    expect(sessionEntry.signatureAfter[0]).not.toBeDefined();
+    expect(sessionEntry.signatureAfter[1]).toBeDefined();
+    expect(sessionEntry.signatureAfter[2]).toBeDefined();
+    expect(sessionEntry.signatureAfter[3]).toBeDefined();
+    expect(sessionEntry.signatureAfter[4]).not.toBeDefined();
+
+    const newContent = coValue.newContentSince({id: coValue.id, header: false, sessions: {}})!;
+
+    expect(newContent.length).toEqual(5)
+    expect(newContent[0]!.header).toBeDefined();
+    expect(newContent[1]!.new[node.currentSessionID]!.lastSignature).toEqual(sessionEntry.signatureAfter[1]);
+    expect(newContent[2]!.new[node.currentSessionID]!.lastSignature).toEqual(sessionEntry.signatureAfter[2]);
+    expect(newContent[3]!.new[node.currentSessionID]!.lastSignature).toEqual(sessionEntry.signatureAfter[3]);
+    expect(newContent[4]!.new[node.currentSessionID]!.lastSignature).toEqual(sessionEntry.lastSignature);
+});
+
+

packages/cojson/src/tests/coValueCore.test.ts

@@ -1,9 +1,15 @@
-import { Transaction } from "./coValueCore.js";
-import { LocalNode } from "./node.js";
-import { createdNowUnique, getAgentSignerSecret, newRandomAgentSecret, sign } from "./crypto.js";
+import { Transaction } from "../coValueCore.js";
+import { LocalNode } from "../node.js";
+import { createdNowUnique, getAgentSignerSecret, newRandomAgentSecret, sign } from "../crypto.js";
 import { randomAnonymousAccountAndSessionID } from "./testUtils.js";
-import { MapOpPayload } from "./coValues/coMap.js";
-import { Role } from "./permissions.js";
+import { MapOpPayload } from "../coValues/coMap.js";
+import { Role } from "../permissions.js";
+import { cojsonReady } from "../index.js";
+import { stableStringify } from "../jsonStringify.js";
+
+beforeEach(async () => {
+    await cojsonReady;
+});
 
 test("Can create coValue with new agent credentials and add transaction to it", () => {
     const [account, sessionID] = randomAnonymousAccountAndSessionID();
@@ -19,11 +25,11 @@ test("Can create coValue with new agent credentials and add transaction to it",
     const transaction: Transaction = {
         privacy: "trusting",
         madeAt: Date.now(),
-        changes: [
+        changes: stableStringify([
             {
                 hello: "world",
             },
-        ],
+        ]),
     };
 
     const { expectedNewHash } = coValue.expectedNewHashAfter(
@@ -56,11 +62,11 @@ test("transactions with wrong signature are rejected", () => {
     const transaction: Transaction = {
         privacy: "trusting",
         madeAt: Date.now(),
-        changes: [
+        changes: stableStringify([
             {
                 hello: "world",
             },
-        ],
+        ]),
     };
 
     const { expectedNewHash } = coValue.expectedNewHashAfter(
@@ -92,11 +98,11 @@ test("transactions with correctly signed, but wrong hash are rejected", () => {
     const transaction: Transaction = {
         privacy: "trusting",
         madeAt: Date.now(),
-        changes: [
+        changes: stableStringify([
             {
                 hello: "world",
             },
-        ],
+        ]),
     };
 
     const { expectedNewHash } = coValue.expectedNewHashAfter(
@@ -105,11 +111,11 @@ test("transactions with correctly signed, but wrong hash are rejected", () => {
             {
                 privacy: "trusting",
                 madeAt: Date.now(),
-                changes: [
+                changes: stableStringify([
                     {
                         hello: "wrong",
                     },
-                ],
+                ]),
             },
         ]
     );
@@ -149,13 +155,13 @@ test("New transactions in a group correctly update owned values, including subsc
     const resignationThatWeJustLearnedAbout = {
         privacy: "trusting",
         madeAt: timeBeforeEdit,
-        changes: [
+        changes: stableStringify([
             {
                 op: "set",
                 key: account.id,
                 value: "revoked"
             } satisfies MapOpPayload<typeof account.id, Role>
-        ]
+        ])
     } satisfies Transaction;
 
     const { expectedNewHash } = group.underlyingMap.core.expectedNewHashAfter(sessionID, [

packages/cojson/src/tests/crypto.test.ts

@@ -14,13 +14,18 @@ import {
     decryptForTransaction,
     encryptKeySecret,
     decryptKeySecret,
-} from './crypto.js';
+} from '../crypto.js';
 import { base58, base64url } from "@scure/base";
 import { x25519 } from "@noble/curves/ed25519";
 import { xsalsa20_poly1305 } from "@noble/ciphers/salsa";
 import { blake3 } from "@noble/hashes/blake3";
 import stableStringify from "fast-json-stable-stringify";
-import { SessionID } from './ids.js';
+import { SessionID } from '../ids.js';
+import { cojsonReady } from '../index.js';
+
+beforeEach(async () => {
+    await cojsonReady;
+});
 
 test("Signatures round-trip and use stable stringify", () => {
     const data = { b: "world", a: "hello" };

packages/cojson/src/tests/group.test.ts

@@ -1,5 +1,9 @@
-import { LocalNode, CoMap, CoList, CoStream, BinaryCoStream } from "./index";
-import { randomAnonymousAccountAndSessionID } from "./testUtils";
+import { LocalNode, CoMap, CoList, CoStream, BinaryCoStream, cojsonReady } from "../index";
+import { randomAnonymousAccountAndSessionID } from "./testUtils.js";
+
+beforeEach(async () => {
+    await cojsonReady;
+});
 
 test("Can create a CoMap in a group", () => {
     const node = new LocalNode(...randomAnonymousAccountAndSessionID());

packages/cojson/src/tests/permissions.test.ts

@@ -1,6 +1,6 @@
-import { newRandomSessionID } from "./coValueCore.js";
-import { expectMap } from "./coValue.js";
-import { Group, expectGroupContent } from "./group.js";
+import { newRandomSessionID } from "../coValueCore.js";
+import { expectMap } from "../coValue.js";
+import { Group, expectGroupContent } from "../group.js";
 import {
     createdNowUnique,
     newRandomKeySecret,
@@ -10,14 +10,18 @@ import {
     getAgentID,
     getAgentSealerSecret,
     getAgentSealerID,
-} from "./crypto.js";
+} from "../crypto.js";
 import {
     newGroup,
     newGroupHighLevel,
     groupWithTwoAdmins,
     groupWithTwoAdminsHighLevel,
 } from "./testUtils.js";
-import { AnonymousControlledAccount } from "./index.js";
+import { AnonymousControlledAccount, cojsonReady } from "../index.js";
+
+beforeEach(async () => {
+    await cojsonReady;
+});
 
 test("Initial admin can add another admin to a group", () => {
     groupWithTwoAdmins();

packages/cojson/src/tests/queries.test.ts

@@ -0,0 +1,301 @@
+import { BinaryCoStream, CoList, CoMap, CoStream, Group, LocalNode, cojsonReady } from "..";
+
+beforeEach(async () => {
+    await cojsonReady;
+});
+
+test("Queries with maps work", async () => {
+    const { node, accountID } =
+        LocalNode.withNewlyCreatedAccount("Hermes Puggington");
+
+    const group = node.createGroup();
+
+    let map = group.createMap<
+        CoMap<{
+            hello: "world";
+            subMap: CoMap<{
+                hello: "world" | "moon" | "sun";
+                id: string;
+            }>;
+        }>
+    >();
+
+    const done = new Promise<void>((resolve) => {
+        const unsubQuery = node.query(map.id, (queriedMap) => {
+            // console.log("update", update);
+            if (queriedMap) {
+                expect(queriedMap.type).toBe("comap");
+                expect(queriedMap.id).toEqual(map.id);
+                expect(queriedMap.core).toEqual(map.core);
+                expect(queriedMap.group).toBeInstanceOf(Group);
+                expect(queriedMap.group.id).toBe(group.id);
+                expect(queriedMap.meta).toBe(null);
+                expect(queriedMap.hello).toBe("world");
+                expect(Object.keys(queriedMap)).toEqual(["hello", "subMap"]);
+                if (queriedMap.edits.hello?.by?.profile?.name) {
+                    expect(queriedMap.edits.hello).toMatchObject({
+                        by: {
+                            id: accountID,
+                            profile: {
+                                id: node.expectProfileLoaded(accountID).id,
+                                name: "Hermes Puggington",
+                            },
+                            isMe: true,
+                        },
+                        at: new Date(map.getLastEntry("hello")!.at),
+                    });
+                    if (queriedMap.subMap) {
+                        expect(queriedMap.subMap.type).toBe("comap");
+                        expect(queriedMap.subMap.id).toEqual(subMap.id);
+                        expect(queriedMap.subMap.core).toEqual(subMap.core);
+                        expect(queriedMap.subMap.group).toBeInstanceOf(Group);
+                        expect(queriedMap.subMap.group.id).toBe(group.id);
+                        expect(queriedMap.subMap.meta).toBe(null);
+                        expect(queriedMap.subMap.shadowed.id).toBe("foreignID");
+                        if (queriedMap.subMap.hello === "moon") {
+                            // console.log("got to 'moon'");
+                            queriedMap.subMap.edit((subMap) => {
+                                subMap.set("hello", "sun");
+                            });
+                        } else if (
+                            queriedMap.subMap.hello === "sun" &&
+                            queriedMap.subMap.edits.hello?.by?.profile?.name ===
+                                "Hermes Puggington"
+                        ) {
+                            // console.log("final update", queriedMap);
+                            resolve();
+                            unsubQuery();
+                        }
+                    }
+                }
+            }
+        });
+    });
+
+    map = map.edit((map) => {
+        map.set("hello", "world");
+    });
+
+    let subMap = group.createMap<
+        CoMap<{
+            hello: "world" | "moon" | "sun";
+            id: string;
+        }>
+    >();
+
+    map = map.edit((map) => {
+        map.set("subMap", subMap);
+    });
+
+    subMap = subMap.edit((subMap) => {
+        subMap.set("hello", "world");
+        subMap.set("id", "foreignID");
+    });
+
+    subMap = subMap.edit((subMap) => {
+        subMap.set("hello", "moon");
+    });
+
+    await done;
+});
+
+test("Queries with lists work", () => {
+    const { node, accountID } =
+        LocalNode.withNewlyCreatedAccount("Hermes Puggington");
+
+    const group = node.createGroup();
+
+    let list = group.createList<CoList<string>>();
+
+    const done = new Promise<void>((resolve) => {
+        const unsubQuery = node.query(list.id, (queriedList) => {
+            if (queriedList) {
+                // console.log("update", queriedList, queriedList.edits);
+                expect(queriedList.type).toBe("colist");
+                expect(queriedList.id).toEqual(list.id);
+                expect(queriedList.core).toEqual(list.core);
+                expect(queriedList.group).toBeInstanceOf(Group);
+                expect(queriedList.group.id).toBe(group.id);
+                expect(queriedList.meta).toBe(null);
+                expect(queriedList[0]).toBe("hello");
+                expect(queriedList[1]).toBe("world");
+                expect(queriedList[2]).toBe("moon");
+                if (queriedList.edits[2]?.by?.profile?.name) {
+                    expect(queriedList.edits[2]).toMatchObject({
+                        by: {
+                            id: accountID,
+                            profile: {
+                                id: node.expectProfileLoaded(accountID).id,
+                                name: "Hermes Puggington",
+                            },
+                            isMe: true,
+                        },
+                        at: expect.any(Date),
+                    });
+                    if (queriedList.length === 3) {
+                        queriedList.edit((list) => {
+                            list.push("sun");
+                        });
+                    } else if (
+                        queriedList.length === 4 &&
+                        queriedList.edits[3]?.by?.profile?.name ===
+                            "Hermes Puggington"
+                    ) {
+                        expect(queriedList[3]).toBe("sun");
+                        // console.log("final update", queriedList);
+                        resolve();
+                        unsubQuery();
+                    }
+                }
+            }
+        });
+    });
+
+    list = list.edit((list) => {
+        list.push("hello");
+        list.push("world");
+        list.push("moon");
+    });
+
+    return done;
+});
+
+test("List of nested maps works", () => {
+    const { node } = LocalNode.withNewlyCreatedAccount("Hermes Puggington");
+
+    const group = node.createGroup();
+
+    let list = group.createList<CoList<CoMap<{ hello: "world" }>>>();
+
+    const done = new Promise<void>((resolve) => {
+        const unsubQuery = node.query(list.id, (queriedList) => {
+            if (queriedList && queriedList[0]) {
+                // console.log("update", queriedList);
+                expect(queriedList[0]).toMatchObject({
+                    hello: "world",
+                    id: list.get(0)!,
+                });
+                // console.log("final update", queriedList);
+                resolve();
+                unsubQuery();
+            }
+        });
+    });
+
+    list = list.edit((list) => {
+        list.push(
+            group.createMap<CoMap<{ hello: "world" }>>({
+                hello: "world",
+            })
+        );
+    });
+
+    return done;
+});
+
+test("Queries with streams work", () => {
+    const { node, accountID } =
+        LocalNode.withNewlyCreatedAccount("Hermes Puggington");
+
+    const group = node.createGroup();
+
+    let stream = group.createStream<CoStream<string>>();
+
+    const done = new Promise<void>((resolve) => {
+        const unsubQuery = node.query(stream.id, (queriedStream) => {
+            if (queriedStream) {
+                console.log("update", queriedStream);
+                if (queriedStream.me?.by?.profile?.name) {
+                    expect(queriedStream.type).toBe("costream");
+                    expect(queriedStream.id).toEqual(stream.id);
+                    expect(queriedStream.core).toEqual(stream.core);
+                    expect(queriedStream.group).toBeInstanceOf(Group);
+                    expect(queriedStream.group.id).toBe(group.id);
+                    expect(queriedStream.meta).toBe(null);
+                    const expectedEntry = {
+                        last: "world",
+                        by: {
+                            id: accountID,
+                            isMe: true,
+                            profile: {
+                                id: node.expectProfileLoaded(accountID).id,
+                                name: "Hermes Puggington",
+                            },
+                        },
+                        at: new Date(
+                            stream.items[node.currentSessionID][1].madeAt
+                        ),
+                        all: [
+                            {
+                                value: "hello",
+                                at: new Date(
+                                    stream.items[
+                                        node.currentSessionID
+                                    ][0].madeAt
+                                ),
+                            },
+                            {
+                                value: "world",
+                                at: new Date(
+                                    stream.items[
+                                        node.currentSessionID
+                                    ][1].madeAt
+                                ),
+                            },
+                        ],
+                    };
+                    expect(queriedStream.perSession).toMatchObject({
+                        [node.currentSessionID]: expectedEntry,
+                    });
+                    expect(queriedStream.perAccount).toMatchObject({
+                        [accountID]: expectedEntry,
+                    });
+                    expect(queriedStream.me).toMatchObject(expectedEntry);
+                    console.log("final update", queriedStream);
+                    resolve();
+                    unsubQuery();
+                }
+            }
+        });
+    });
+
+    stream = stream.edit((stream) => {
+        stream.push("hello");
+        stream.push("world");
+    });
+
+    return done;
+});
+
+test("Streams of nested maps work", () => {
+    const { node } = LocalNode.withNewlyCreatedAccount("Hermes Puggington");
+
+    const group = node.createGroup();
+
+    let stream = group.createStream<CoStream<CoMap<{ hello: "world" }>>>();
+
+    const done = new Promise<void>((resolve) => {
+        const unsubQuery = node.query(stream.id, (queriedStream) => {
+            if (queriedStream && queriedStream.me?.last) {
+                // console.log("update", queriedList);
+                expect(queriedStream.me.last).toMatchObject({
+                    hello: "world",
+                    id: map.id,
+                });
+                // console.log("final update", queriedList);
+                resolve();
+                unsubQuery();
+            }
+        });
+    });
+
+    const map = group.createMap<CoMap<{ hello: "world" }>>({
+        hello: "world",
+    });
+
+    stream = stream.edit((list) => {
+        list.push(map);
+    });
+
+    return done;
+});

packages/cojson/src/tests/sync.test.ts

@@ -1,23 +1,21 @@
-import { newRandomSessionID } from "./coValueCore.js";
-import { LocalNode } from "./node.js";
-import { Peer, PeerID, SyncMessage } from "./sync.js";
-import { expectMap } from "./coValue.js";
-import { MapOpPayload } from "./coValues/coMap.js";
-import { Group } from "./group.js";
-import {
-    ReadableStream,
-    WritableStream,
-    TransformStream,
-} from "isomorphic-streams";
+import { newRandomSessionID } from "../coValueCore.js";
+import { LocalNode } from "../node.js";
+import { SyncMessage } from "../sync.js";
+import { expectMap } from "../coValue.js";
+import { MapOpPayload } from "../coValues/coMap.js";
+import { Group } from "../group.js";
 import {
     randomAnonymousAccountAndSessionID,
     shouldNotResolve,
 } from "./testUtils.js";
-import {
-    connectedPeers,
-    newStreamPair
-} from "./streamUtils.js";
-import { AccountID } from "./account.js";
+import { connectedPeers, newStreamPair } from "../streamUtils.js";
+import { AccountID } from "../account.js";
+import { cojsonReady } from "../index.js";
+import { stableStringify } from "../jsonStringify.js";
+
+beforeEach(async () => {
+    await cojsonReady;
+});
 
 test("Node replies with initial tx and header to empty subscribe", async () => {
     const [admin, session] = randomAnonymousAccountAndSessionID();
@@ -84,13 +82,13 @@ test("Node replies with initial tx and header to empty subscribe", async () => {
                         privacy: "trusting" as const,
                         madeAt: map.core.sessions[node.currentSessionID]!
                             .transactions[0]!.madeAt,
-                        changes: [
+                        changes: stableStringify([
                             {
                                 op: "set",
                                 key: "hello",
                                 value: "world",
                             } satisfies MapOpPayload<string, string>,
-                        ],
+                        ]),
                     },
                 ],
                 lastSignature:
@@ -162,13 +160,13 @@ test("Node replies with only new tx to subscribe with some known state", async (
                         privacy: "trusting" as const,
                         madeAt: map.core.sessions[node.currentSessionID]!
                             .transactions[1]!.madeAt,
-                        changes: [
+                        changes: stableStringify([
                             {
                                 op: "set",
                                 key: "goodbye",
                                 value: "world",
                             } satisfies MapOpPayload<string, string>,
-                        ],
+                        ]),
                     },
                 ],
                 lastSignature:
@@ -251,13 +249,13 @@ test("After subscribing, node sends own known state and new txs to peer", async
                         privacy: "trusting" as const,
                         madeAt: map.core.sessions[node.currentSessionID]!
                             .transactions[0]!.madeAt,
-                        changes: [
+                        changes: stableStringify([
                             {
                                 op: "set",
                                 key: "hello",
                                 value: "world",
                             } satisfies MapOpPayload<string, string>,
-                        ],
+                        ]),
                     },
                 ],
                 lastSignature:
@@ -283,13 +281,13 @@ test("After subscribing, node sends own known state and new txs to peer", async
                         privacy: "trusting" as const,
                         madeAt: map.core.sessions[node.currentSessionID]!
                             .transactions[1]!.madeAt,
-                        changes: [
+                        changes: stableStringify([
                             {
                                 op: "set",
                                 key: "goodbye",
                                 value: "world",
                             } satisfies MapOpPayload<string, string>,
-                        ],
+                        ]),
                     },
                 ],
                 lastSignature:
@@ -362,13 +360,13 @@ test("Client replies with known new content to tellKnownState from server", asyn
                         privacy: "trusting" as const,
                         madeAt: map.core.sessions[node.currentSessionID]!
                             .transactions[0]!.madeAt,
-                        changes: [
+                        changes: stableStringify([
                             {
                                 op: "set",
                                 key: "hello",
                                 value: "world",
                             } satisfies MapOpPayload<string, string>,
-                        ],
+                        ]),
                     },
                 ],
                 lastSignature:
@@ -438,8 +436,9 @@ test("No matter the optimistic known state, node respects invalid known state me
         editable.set("goodbye", "world", "trusting");
     });
 
-    const _mapEditMsg1 = await reader.read();
-    const _mapEditMsg2 = await reader.read();
+    const _mapEditMsgs = await reader.read();
+
+    console.log("Sending correction");
 
     await writer.write({
         action: "known",
@@ -465,13 +464,13 @@ test("No matter the optimistic known state, node respects invalid known state me
                         privacy: "trusting" as const,
                         madeAt: map.core.sessions[node.currentSessionID]!
                             .transactions[1]!.madeAt,
-                        changes: [
+                        changes: stableStringify([
                             {
                                 op: "set",
                                 key: "goodbye",
                                 value: "world",
                             } satisfies MapOpPayload<string, string>,
-                        ],
+                        ]),
                     },
                 ],
                 lastSignature:
@@ -568,13 +567,13 @@ test("If we add a server peer, all updates to all coValues are sent to it, even
                         privacy: "trusting" as const,
                         madeAt: map.core.sessions[node.currentSessionID]!
                             .transactions[0]!.madeAt,
-                        changes: [
+                        changes: stableStringify([
                             {
                                 op: "set",
                                 key: "hello",
                                 value: "world",
                             } satisfies MapOpPayload<string, string>,
-                        ],
+                        ]),
                     },
                 ],
                 lastSignature:

packages/cojson/src/tests/testUtils.ts

@@ -1,9 +1,11 @@
-import { AgentSecret, createdNowUnique, getAgentID, newRandomAgentSecret  } from "./crypto.js";
-import { newRandomSessionID } from "./coValueCore.js";
-import { LocalNode } from "./node.js";
-import { expectGroupContent } from "./group.js";
-import { AnonymousControlledAccount } from "./account.js";
-import { SessionID } from "./ids.js";
+import { AgentSecret, createdNowUnique, getAgentID, newRandomAgentSecret  } from "../crypto.js";
+import { newRandomSessionID } from "../coValueCore.js";
+import { LocalNode } from "../node.js";
+import { expectGroupContent } from "../group.js";
+import { AnonymousControlledAccount } from "../account.js";
+import { SessionID } from "../ids.js";
+// @ts-ignore
+import { expect } from "bun:test";
 
 export function randomAnonymousAccountAndSessionID(): [AnonymousControlledAccount, SessionID] {
     const agentSecret = newRandomAgentSecret();

packages/jazz-browser-auth-local/package.json

@@ -1,11 +1,11 @@
 {
     "name": "jazz-browser-auth-local",
-    "version": "0.1.10",
+    "version": "0.2.5",
     "main": "dist/index.js",
     "types": "dist/index.d.ts",
     "license": "MIT",
     "dependencies": {
-        "jazz-browser": "^0.1.10",
+        "jazz-browser": "^0.2.5",
         "typescript": "^5.1.6"
     },
     "scripts": {

packages/jazz-browser-auth-local/src/index.ts

@@ -128,7 +128,7 @@ async function signUp(
             },
             user: {
                 id: webAuthNCredentialPayload,
-                name: username + `(${new Date().toLocaleString()})`,
+                name: username + ` (${new Date().toLocaleString()})`,
                 displayName: username,
             },
             pubKeyCredParams: [{ alg: -7, type: "public-key" }],

packages/jazz-browser-media-images/.eslintrc.cjs

@@ -0,0 +1,17 @@
+module.exports = {
+    extends: [
+        'eslint:recommended',
+        'plugin:@typescript-eslint/recommended',
+    ],
+    parser: '@typescript-eslint/parser',
+    plugins: ['@typescript-eslint'],
+    parserOptions: {
+        project: "./tsconfig.json",
+    },
+    root: true,
+    rules: {
+        "no-unused-vars": "off",
+        "@typescript-eslint/no-unused-vars": ["error", { "argsIgnorePattern": "^_", "varsIgnorePattern": "^_" }],
+        "@typescript-eslint/no-floating-promises": "error",
+    },
+};

packages/jazz-browser-media-images/.gitignore

@@ -0,0 +1,171 @@
+# Based on https://raw.githubusercontent.com/github/gitignore/main/Node.gitignore
+
+# Logs
+
+logs
+_.log
+npm-debug.log_
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+.pnpm-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+
+report.[0-9]_.[0-9]_.[0-9]_.[0-9]_.json
+
+# Runtime data
+
+pids
+_.pid
+_.seed
+\*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+
+lib-cov
+
+# Coverage directory used by tools like istanbul
+
+coverage
+\*.lcov
+
+# nyc test coverage
+
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+
+bower_components
+
+# node-waf configuration
+
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+
+build/Release
+
+# Dependency directories
+
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+
+web_modules/
+
+# TypeScript cache
+
+\*.tsbuildinfo
+
+# Optional npm cache directory
+
+.npm
+
+# Optional eslint cache
+
+.eslintcache
+
+# Optional stylelint cache
+
+.stylelintcache
+
+# Microbundle cache
+
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+
+.node_repl_history
+
+# Output of 'npm pack'
+
+\*.tgz
+
+# Yarn Integrity file
+
+.yarn-integrity
+
+# dotenv environment variable files
+
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# parcel-bundler cache (https://parceljs.org/)
+
+.cache
+.parcel-cache
+
+# Next.js build output
+
+.next
+out
+
+# Nuxt.js build / generate output
+
+.nuxt
+dist
+
+# Gatsby files
+
+.cache/
+
+# Comment in the public line in if your project uses Gatsby and not Next.js
+
+# https://nextjs.org/blog/next-9-1#public-directory-support
+
+# public
+
+# vuepress build output
+
+.vuepress/dist
+
+# vuepress v2.x temp and cache directory
+
+.temp
+.cache
+
+# Docusaurus cache and generated files
+
+.docusaurus
+
+# Serverless directories
+
+.serverless/
+
+# FuseBox cache
+
+.fusebox/
+
+# DynamoDB Local files
+
+.dynamodb/
+
+# TernJS port file
+
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+
+.vscode-test
+
+# yarn v2
+
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.\*
+
+.DS_Store

packages/jazz-browser-media-images/.npmignore

@@ -0,0 +1,2 @@
+coverage
+node_modules

packages/jazz-browser-media-images/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "jazz-browser-media-images",
+  "version": "0.2.5",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "license": "MIT",
+  "dependencies": {
+    "cojson": "^0.2.3",
+    "image-blob-reduce": "^4.1.0",
+    "jazz-browser": "^0.2.5",
+    "typescript": "^5.1.6"
+  },
+  "scripts": {
+    "lint": "eslint src/**/*.ts",
+    "build": "npm run lint && rm -rf ./dist && tsc --declaration --sourceMap --outDir dist",
+    "prepublishOnly": "npm run build"
+  },
+  "devDependencies": {
+    "@types/image-blob-reduce": "^4.1.1"
+  }
+}

packages/jazz-browser-media-images/src/index.ts

@@ -0,0 +1,334 @@
+import { CoID, Group, LocalNode, Media, Queried } from "cojson";
+
+import ImageBlobReduce from "image-blob-reduce";
+import Pica from "pica";
+import {
+    createBinaryStreamFromBlob,
+    readBlobFromBinaryStream,
+} from "jazz-browser";
+
+const pica = new Pica();
+
+export async function createImage(
+    image: Blob | File,
+    inGroup: Group
+): Promise<Media.ImageDefinition> {
+    let originalWidth!: number;
+    let originalHeight!: number;
+    const Reducer = new ImageBlobReduce({ pica });
+    Reducer.after("_blob_to_image", (env) => {
+        originalWidth =
+            (env as unknown as { orientation: number }).orientation & 4
+                ? env.image.height
+                : env.image.width;
+        originalHeight =
+            (env as unknown as { orientation: number }).orientation & 4
+                ? env.image.width
+                : env.image.height;
+        return Promise.resolve(env);
+    });
+
+    const placeholderDataURL = (
+        await Reducer.toCanvas(image, { max: 8 })
+    ).toDataURL("image/png");
+
+    let imageDefinition = inGroup.createMap<Media.ImageDefinition>();
+
+    imageDefinition = imageDefinition.edit((imageDefinition) => {
+        imageDefinition.set("originalSize", [originalWidth, originalHeight]);
+        imageDefinition.set("placeholderDataURL", placeholderDataURL);
+    });
+
+    setTimeout(async () => {
+        const max256 = await Reducer.toBlob(image, { max: 256 });
+
+        if (originalWidth > 256 || originalHeight > 256) {
+            const width =
+                originalWidth > originalHeight
+                    ? 256
+                    : Math.round(256 * (originalWidth / originalHeight));
+            const height =
+                originalHeight > originalWidth
+                    ? 256
+                    : Math.round(256 * (originalHeight / originalWidth));
+
+            const binaryStreamId = (
+                await createBinaryStreamFromBlob(max256, inGroup)
+            ).id;
+
+            imageDefinition.edit((imageDefinition) => {
+                imageDefinition.set(`${width}x${height}`, binaryStreamId);
+            });
+        }
+
+        await new Promise((resolve) => setTimeout(resolve, 0));
+
+        const max1024 = await Reducer.toBlob(image, { max: 1024 });
+
+        if (originalWidth > 1024 || originalHeight > 1024) {
+            const width =
+                originalWidth > originalHeight
+                    ? 1024
+                    : Math.round(1024 * (originalWidth / originalHeight));
+            const height =
+                originalHeight > originalWidth
+                    ? 1024
+                    : Math.round(1024 * (originalHeight / originalWidth));
+
+            const binaryStreamId = (
+                await createBinaryStreamFromBlob(max1024, inGroup)
+            ).id;
+
+            imageDefinition.edit((imageDefinition) => {
+                imageDefinition.set(`${width}x${height}`, binaryStreamId);
+            });
+        }
+
+        await new Promise((resolve) => setTimeout(resolve, 0));
+
+        const max2048 = await Reducer.toBlob(image, { max: 2048 });
+
+        if (originalWidth > 2048 || originalHeight > 2048) {
+            const width =
+                originalWidth > originalHeight
+                    ? 2048
+                    : Math.round(2048 * (originalWidth / originalHeight));
+            const height =
+                originalHeight > originalWidth
+                    ? 2048
+                    : Math.round(2048 * (originalHeight / originalWidth));
+
+            const binaryStreamId = (
+                await createBinaryStreamFromBlob(max2048, inGroup)
+            ).id;
+
+            imageDefinition.edit((imageDefinition) => {
+                imageDefinition.set(`${width}x${height}`, binaryStreamId);
+            });
+        }
+
+        await new Promise((resolve) => setTimeout(resolve, 0));
+
+        const originalBinaryStreamId = (
+            await createBinaryStreamFromBlob(image, inGroup)
+        ).id;
+
+        imageDefinition.edit((imageDefinition) => {
+            imageDefinition.set(
+                `${originalWidth}x${originalHeight}`,
+                originalBinaryStreamId
+            );
+        });
+    }, 0);
+
+    return imageDefinition;
+}
+
+export type LoadingImageInfo = {
+    originalSize?: [number, number];
+    placeholderDataURL?: string;
+    highestResSrc?: string;
+};
+
+export function loadImage(
+    image: CoID<Media.ImageDefinition> | Media.ImageDefinition | Queried<Media.ImageDefinition>,
+    localNode: LocalNode,
+    progressiveCallback: (update: LoadingImageInfo) => void
+): () => void {
+    let unsubscribe: (() => void) | undefined;
+    let stopped = false;
+
+    const resState: {
+        [res: `${number}x${number}`]:
+            | { state: "queued" }
+            | { state: "waiting" }
+            | { state: "loading"; doneOrFailed: Promise<void> }
+            | { state: "loaded"; blobURL: string }
+            | { state: "revoked" }
+            | { state: "failed" }
+            | undefined;
+    } = {};
+
+    const cleanUp = () => {
+        stopped = true;
+        for (const [res, entry] of Object.entries(resState)) {
+            if (entry?.state === "loaded") {
+                resState[res as `${number}x${number}`] = { state: "revoked" };
+                // prevent flashing from immediate revocation
+                setTimeout(() => {URL.revokeObjectURL(entry.blobURL)}, 3000);
+            }
+        }
+        unsubscribe?.();
+    };
+
+    localNode
+        .load(typeof image === "string" ? image : image.id)
+        .then((imageDefinition) => {
+            if (stopped) return;
+            unsubscribe = imageDefinition.subscribe(async (imageDefinition) => {
+                if (stopped) return;
+
+                const originalSize = imageDefinition.get("originalSize");
+                const placeholderDataURL =
+                    imageDefinition.get("placeholderDataURL");
+
+                const resolutions = imageDefinition
+                    .keys()
+                    .filter(
+                        (key): key is `${number}x${number}` =>
+                            !!key.match(/\d+x\d+/)
+                    )
+                    .sort((a, b) => {
+                        const widthA = Number(a.split("x")[0]);
+                        const widthB = Number(b.split("x")[0]);
+                        return widthA - widthB;
+                    });
+
+                const startLoading = async () => {
+                    const notYetQueuedOrLoading = resolutions.filter(
+                        (res) => !resState[res]
+                    );
+
+                    // console.log(
+                    //     "Loading iteration",
+                    //     resolutions,
+                    //     resState,
+                    //     notYetQueuedOrLoading
+                    // );
+
+                    for (const res of notYetQueuedOrLoading) {
+                        resState[res] = { state: "queued" };
+                    }
+
+                    for (const res of notYetQueuedOrLoading) {
+                        if (stopped) return;
+                        resState[res] = { state: "waiting" };
+
+                        const binaryStreamId = imageDefinition.get(res)!;
+                        // console.log(
+                        //     "Loading image res",
+                        //     imageID,
+                        //     res,
+                        //     binaryStreamId
+                        // );
+
+                        const binaryStream = await localNode.load(
+                            binaryStreamId
+                        );
+
+                        if (stopped) return;
+                        if (!binaryStream) {
+                            resState[res] = { state: "failed" };
+                            console.error(
+                                "Loading image res failed",
+                                image,
+                                res,
+                                binaryStreamId
+                            );
+                            return;
+                        }
+
+                        await new Promise<void>((resolveFullyLoaded) => {
+                            const unsubFromStream = binaryStream.subscribe(
+                                async (_) => {
+                                    if (stopped) return;
+                                    const currentState = resState[res];
+                                    if (currentState?.state === "loading") {
+                                        await currentState.doneOrFailed;
+                                        // console.log(
+                                        //     "Retrying image res after previous attempt",
+                                        //     imageID,
+                                        //     res,
+                                        //     binaryStreamId
+                                        // );
+                                    }
+                                    if (resState[res]?.state === "loaded") {
+                                        return;
+                                    }
+
+                                    const doneOrFailed = new Promise<void>(
+                                        // eslint-disable-next-line no-async-promise-executor
+                                        async (resolveDoneOrFailed) => {
+                                            const blob =
+                                                await readBlobFromBinaryStream(
+                                                    binaryStreamId,
+                                                    localNode
+                                                );
+
+                                            if (stopped) return;
+                                            if (!blob) {
+                                                // console.log(
+                                                //     "Image res not available yet",
+                                                //     imageID,
+                                                //     res,
+                                                //     binaryStreamId
+                                                // );
+                                                resolveDoneOrFailed();
+                                                return;
+                                            }
+
+                                            const blobURL =
+                                                URL.createObjectURL(blob);
+                                            resState[res] = {
+                                                state: "loaded",
+                                                blobURL,
+                                            };
+
+                                            // console.log(
+                                            //     "Loaded image res",
+                                            //     imageID,
+                                            //     res,
+                                            //     binaryStreamId
+                                            // );
+
+                                            progressiveCallback({
+                                                originalSize,
+                                                placeholderDataURL,
+                                                highestResSrc: blobURL,
+                                            });
+
+                                            unsubFromStream();
+                                            resolveDoneOrFailed();
+
+                                            await new Promise((resolve) =>
+                                                setTimeout(resolve, 0)
+                                            );
+
+                                            resolveFullyLoaded();
+                                        }
+                                    );
+
+                                    resState[res] = {
+                                        state: "loading",
+                                        doneOrFailed,
+                                    };
+                                }
+                            );
+                        });
+                    }
+                };
+
+                if (
+                    !Object.values(resState).some(
+                        (entry) => entry?.state === "loaded"
+                    )
+                ) {
+                    progressiveCallback({
+                        originalSize,
+                        placeholderDataURL,
+                    });
+                }
+
+                startLoading().catch((err) => {
+                    console.error("Error loading image", image, err);
+                    cleanUp();
+                });
+            });
+        })
+        .catch((err) => {
+            console.error("Error loading image", image, err);
+            cleanUp();
+        });
+
+    return cleanUp;
+}

packages/jazz-browser-media-images/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "lib": ["ESNext", "DOM"],
+    "module": "esnext",
+    "target": "ES2020",
+    "moduleResolution": "bundler",
+    "moduleDetection": "force",
+    "strict": true,
+    "skipLibCheck": true,
+    "jsx": "react",
+    "forceConsistentCasingInFileNames": true,
+    "noUncheckedIndexedAccess": true,
+    "esModuleInterop": true,
+  },
+  "include": ["./src/**/*"],
+}

packages/jazz-browser-media-images/yarn.lock

@@ -0,0 +1,75 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+"@noble/ciphers@^0.1.3":
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/@noble/ciphers/-/ciphers-0.1.4.tgz#96327dca147829ed9eee0d96cfdf7c57915765f0"
+  integrity sha512-d3ZR8vGSpy3v/nllS+bD/OMN5UZqusWiQqkyj7AwzTnhXFH72pF5oB4Ach6DQ50g5kXxC28LdaYBEpsyv9KOUQ==
+
+"@noble/curves@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@noble/curves/-/curves-1.1.0.tgz#f13fc667c89184bc04cccb9b11e8e7bae27d8c3d"
+  integrity sha512-091oBExgENk/kGj3AZmtBDMpxQPDtxQABR2B9lb1JbVTs6ytdzZNwvhxQ4MWasRNEzlbEH8jCWFCwhF/Obj5AA==
+  dependencies:
+    "@noble/hashes" "1.3.1"
+
+"@noble/hashes@1.3.1", "@noble/hashes@^1.3.1":
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/@noble/hashes/-/hashes-1.3.1.tgz#8831ef002114670c603c458ab8b11328406953a9"
+  integrity sha512-EbqwksQwz9xDRGfDST86whPBgM65E0OH/pCgqW0GBVzO22bNE+NuIbeTb714+IfSjU3aRk47EUvXIb5bTsenKA==
+
+"@scure/base@^1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@scure/base/-/base-1.1.1.tgz#ebb651ee52ff84f420097055f4bf46cfba403938"
+  integrity sha512-ZxOhsSyxYwLJj3pLZCefNitxsj093tb2vq90mp2txoYeBqbcjDjqFhyM8eUjq/uFm6zJ+mUuqxlS2FkuSY1MTA==
+
+"@types/prop-types@*":
+  version "15.7.5"
+  resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.5.tgz#5f19d2b85a98e9558036f6a3cacc8819420f05cf"
+  integrity sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==
+
+"@types/react@^18.2.19":
+  version "18.2.19"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.19.tgz#f77cb2c8307368e624d464a25b9675fa35f95a8b"
+  integrity sha512-e2S8wmY1ePfM517PqCG80CcE48Xs5k0pwJzuDZsfE8IZRRBfOMCF+XqnFxu6mWtyivum1MQm4aco+WIt6Coimw==
+  dependencies:
+    "@types/prop-types" "*"
+    "@types/scheduler" "*"
+    csstype "^3.0.2"
+
+"@types/scheduler@*":
+  version "0.16.3"
+  resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.3.tgz#cef09e3ec9af1d63d2a6cc5b383a737e24e6dcf5"
+  integrity sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ==
+
+cojson@^0.0.14:
+  version "0.0.14"
+  resolved "https://registry.yarnpkg.com/cojson/-/cojson-0.0.14.tgz#e7b190ade1efc20d6f0fa12411d7208cdc0f19f7"
+  integrity sha512-TFenIGswEEhnZlCmq+B1NZPztjovZ72AjK1YkkZca54ZFbB1lAHdPt2hqqu/QBO24C9+6DtuoS2ixm6gbSBWCg==
+  dependencies:
+    "@noble/ciphers" "^0.1.3"
+    "@noble/curves" "^1.1.0"
+    "@noble/hashes" "^1.3.1"
+    "@scure/base" "^1.1.1"
+    fast-json-stable-stringify "^2.1.0"
+    isomorphic-streams "https://github.com/sgwilym/isomorphic-streams.git#aa9394781bfc92f8d7c981be7daf8af4b4cd4fae"
+
+csstype@^3.0.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.2.tgz#1d4bf9d572f11c14031f0436e1c10bc1f571f50b"
+  integrity sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==
+
+fast-json-stable-stringify@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz#874bf69c6f404c2b5d99c481341399fd55892633"
+  integrity sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==
+
+"isomorphic-streams@git+https://github.com/sgwilym/isomorphic-streams.git#aa9394781bfc92f8d7c981be7daf8af4b4cd4fae":
+  version "1.0.3"
+  resolved "git+https://github.com/sgwilym/isomorphic-streams.git#aa9394781bfc92f8d7c981be7daf8af4b4cd4fae"
+
+typescript@^5.1.6:
+  version "5.1.6"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.1.6.tgz#02f8ac202b6dad2c0dd5e0913745b47a37998274"
+  integrity sha512-zaWCozRZ6DLEWAWFrVDz1H6FVXzUSfTy5FUMWsQlU8Ym5JP9eO4xkTIROFCQvhQf61z6O/G6ugw3SgAnvvm+HA==

packages/jazz-browser/package.json

@@ -1,12 +1,12 @@
 {
   "name": "jazz-browser",
-  "version": "0.1.10",
+  "version": "0.2.5",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "license": "MIT",
   "dependencies": {
-    "cojson": "^0.1.10",
-    "jazz-storage-indexeddb": "^0.1.10",
+    "cojson": "^0.2.3",
+    "jazz-storage-indexeddb": "^0.2.5",
     "typescript": "^5.1.6"
   },
   "scripts": {

packages/jazz-browser/src/index.ts

@@ -1,5 +1,7 @@
-import { BinaryCoStream, InviteSecret } from "cojson";
+import { BinaryCoStream, CoValue, InviteSecret, Queried } from "cojson";
 import { BinaryCoStreamMeta } from "cojson";
+import { MAX_RECOMMENDED_TX_SIZE } from "cojson";
+import { cojsonReady } from "cojson";
 import {
     LocalNode,
     cojsonInternals,
@@ -8,7 +10,6 @@ import {
     SessionID,
     SyncMessage,
     Peer,
-    CoValueImpl,
     Group,
     CoID,
 } from "cojson";
@@ -30,6 +31,7 @@ export async function createBrowserNode({
     syncAddress?: string;
     reconnectionTimeout?: number;
 }): Promise<BrowserNodeHandle> {
+    await cojsonReady;
     let sessionDone: () => void;
 
     const firstWsPeer = createWebSocketPeer(syncAddress);
@@ -70,6 +72,12 @@ export async function createBrowserNode({
         node,
         done: () => {
             shouldTryToReconnect = false;
+            console.log("Cleaning up node");
+            for (const peer of Object.values(node.sync.peers)) {
+                peer.outgoing
+                    .close()
+                    .catch((e) => console.error("Error while closing peer", e));
+            }
             sessionDone?.();
         },
     };
@@ -91,9 +99,7 @@ export type SessionHandle = {
     done: () => void;
 };
 
-function getSessionHandleFor(
-    accountID: AccountID | AgentID
-): SessionHandle {
+function getSessionHandleFor(accountID: AccountID | AgentID): SessionHandle {
     let done!: () => void;
     const donePromise = new Promise<void>((resolve) => {
         done = resolve;
@@ -176,15 +182,25 @@ function websocketReadableStream<T>(ws: WebSocket) {
 
                     pingTimeout = setTimeout(() => {
                         console.debug("Ping timeout");
-                        controller.close();
-                        ws.close();
+                        try {
+                            controller.close();
+                            ws.close();
+                        } catch (e) {
+                            console.error(
+                                "Error while trying to close ws on ping timeout",
+                                e
+                            );
+                        }
                     }, 2500);
 
                     return;
                 }
                 controller.enqueue(msg);
             };
-            const closeListener = () => controller.close();
+            const closeListener = () => {
+                controller.close();
+                clearTimeout(pingTimeout);
+            };
             ws.addEventListener("close", closeListener);
             ws.addEventListener("error", () => {
                 controller.error(new Error("The WebSocket errored!"));
@@ -275,8 +291,8 @@ function websocketWritableStream<T>(ws: WebSocket) {
     }
 }
 
-export function createInviteLink(
-    value: CoValueImpl,
+export function createInviteLink<T extends CoValue | Queried<CoValue>>(
+    value: T | Queried<T>,
     role: "reader" | "writer" | "admin",
     // default to same address as window.location, but without hash
     {
@@ -305,7 +321,9 @@ export function createInviteLink(
     return `${baseURL}#invitedTo=${value.id}&${inviteSecret}`;
 }
 
-export function parseInviteLink<C extends CoValueImpl>(inviteURL: string):
+export function parseInviteLink<C extends CoValue>(
+    inviteURL: string
+):
     | {
           valueID: CoID<C>;
           inviteSecret: InviteSecret;
@@ -322,7 +340,9 @@ export function parseInviteLink<C extends CoValueImpl>(inviteURL: string):
     return { valueID, inviteSecret };
 }
 
-export function consumeInviteLinkFromWindowLocation<C extends CoValueImpl>(node: LocalNode): Promise<
+export function consumeInviteLinkFromWindowLocation<C extends CoValue>(
+    node: LocalNode
+): Promise<
     | {
           valueID: CoID<C>;
           inviteSecret: string;
@@ -349,28 +369,39 @@ export function consumeInviteLinkFromWindowLocation<C extends CoValueImpl>(node:
     });
 }
 
-export async function createBinaryStreamFromBlob<C extends BinaryCoStream<BinaryCoStreamMeta>>(blob: Blob | File, inGroup: Group, meta: C["meta"] = {type: "binary"}): Promise<C> {
-    const stream = inGroup.createBinaryStream(meta);
+export async function createBinaryStreamFromBlob<
+    C extends BinaryCoStream<BinaryCoStreamMeta>
+>(
+    blob: Blob | File,
+    inGroup: Group,
+    meta: C["meta"] = { type: "binary" }
+): Promise<C> {
+    let stream = inGroup.createBinaryStream(meta);
 
     const reader = new FileReader();
     const done = new Promise<void>((resolve) => {
-
-        reader.onload = () => {
+        reader.onload = async () => {
             const data = new Uint8Array(reader.result as ArrayBuffer);
-            stream.edit(stream => {
+            stream = stream.edit((stream) => {
                 stream.startBinaryStream({
                     mimeType: blob.type,
                     totalSizeBytes: blob.size,
                     fileName: blob instanceof File ? blob.name : undefined,
                 });
-                const chunkSize = 100 * 1024;
-
-                for (let idx = 0; idx < data.length; idx += chunkSize) {
-                    stream.pushBinaryStreamChunk(data.slice(idx, idx + chunkSize));
-                }
+            }) as C; // TODO: fix this
+            const chunkSize = MAX_RECOMMENDED_TX_SIZE;
 
+            for (let idx = 0; idx < data.length; idx += chunkSize) {
+                stream = stream.edit((stream) => {
+                    stream.pushBinaryStreamChunk(
+                        data.slice(idx, idx + chunkSize)
+                    );
+                }) as C; // TODO: fix this
+                await new Promise((resolve) => setTimeout(resolve, 0));
+            }
+            stream = stream.edit((stream) => {
                 stream.endBinaryStream();
-            });
+            }) as C; // TODO: fix this
             resolve();
         };
     });
@@ -381,22 +412,24 @@ export async function createBinaryStreamFromBlob<C extends BinaryCoStream<Binary
     return stream;
 }
 
-export async function readBlobFromBinaryStream<C extends BinaryCoStream<BinaryCoStreamMeta>>(streamId: CoID<C>, node: LocalNode, allowUnfinished?: boolean): Promise<Blob | undefined> {
+export async function readBlobFromBinaryStream<
+    C extends BinaryCoStream<BinaryCoStreamMeta>
+>(
+    streamId: CoID<C>,
+    node: LocalNode,
+    allowUnfinished?: boolean
+): Promise<Blob | undefined> {
     const stream = await node.load<C>(streamId);
 
     if (!stream) {
         return undefined;
     }
 
-    const chunks = stream.getBinaryChunks();
+    const chunks = stream.getBinaryChunks(allowUnfinished);
 
     if (!chunks) {
         return undefined;
     }
 
-    if (!allowUnfinished && !chunks.finished) {
-        return undefined;
-    }
-
     return new Blob(chunks.chunks, { type: chunks.mimeType });
-}
+}

packages/jazz-react-auth-local/package.json

@@ -1,12 +1,12 @@
 {
     "name": "jazz-react-auth-local",
-    "version": "0.1.12",
+    "version": "0.2.5",
     "main": "dist/index.js",
     "types": "dist/index.d.ts",
     "license": "MIT",
     "dependencies": {
-        "jazz-browser-auth-local": "^0.1.10",
-        "jazz-react": "^0.1.12",
+        "jazz-browser-auth-local": "^0.2.5",
+        "jazz-react": "^0.2.5",
         "typescript": "^5.1.6"
     },
     "devDependencies": {

packages/jazz-react-media-images/.eslintrc.cjs

@@ -0,0 +1,17 @@
+module.exports = {
+    extends: [
+        'eslint:recommended',
+        'plugin:@typescript-eslint/recommended',
+    ],
+    parser: '@typescript-eslint/parser',
+    plugins: ['@typescript-eslint'],
+    parserOptions: {
+        project: "./tsconfig.json",
+    },
+    root: true,
+    rules: {
+        "no-unused-vars": "off",
+        "@typescript-eslint/no-unused-vars": ["error", { "argsIgnorePattern": "^_", "varsIgnorePattern": "^_" }],
+        "@typescript-eslint/no-floating-promises": "error",
+    },
+};

packages/jazz-react-media-images/.gitignore

@@ -0,0 +1,171 @@
+# Based on https://raw.githubusercontent.com/github/gitignore/main/Node.gitignore
+
+# Logs
+
+logs
+_.log
+npm-debug.log_
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+.pnpm-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+
+report.[0-9]_.[0-9]_.[0-9]_.[0-9]_.json
+
+# Runtime data
+
+pids
+_.pid
+_.seed
+\*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+
+lib-cov
+
+# Coverage directory used by tools like istanbul
+
+coverage
+\*.lcov
+
+# nyc test coverage
+
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+
+bower_components
+
+# node-waf configuration
+
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+
+build/Release
+
+# Dependency directories
+
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+
+web_modules/
+
+# TypeScript cache
+
+\*.tsbuildinfo
+
+# Optional npm cache directory
+
+.npm
+
+# Optional eslint cache
+
+.eslintcache
+
+# Optional stylelint cache
+
+.stylelintcache
+
+# Microbundle cache
+
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+
+.node_repl_history
+
+# Output of 'npm pack'
+
+\*.tgz
+
+# Yarn Integrity file
+
+.yarn-integrity
+
+# dotenv environment variable files
+
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# parcel-bundler cache (https://parceljs.org/)
+
+.cache
+.parcel-cache
+
+# Next.js build output
+
+.next
+out
+
+# Nuxt.js build / generate output
+
+.nuxt
+dist
+
+# Gatsby files
+
+.cache/
+
+# Comment in the public line in if your project uses Gatsby and not Next.js
+
+# https://nextjs.org/blog/next-9-1#public-directory-support
+
+# public
+
+# vuepress build output
+
+.vuepress/dist
+
+# vuepress v2.x temp and cache directory
+
+.temp
+.cache
+
+# Docusaurus cache and generated files
+
+.docusaurus
+
+# Serverless directories
+
+.serverless/
+
+# FuseBox cache
+
+.fusebox/
+
+# DynamoDB Local files
+
+.dynamodb/
+
+# TernJS port file
+
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+
+.vscode-test
+
+# yarn v2
+
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.\*
+
+.DS_Store

packages/jazz-react-media-images/.npmignore

@@ -0,0 +1,2 @@
+coverage
+node_modules

packages/jazz-react-media-images/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "jazz-react-media-images",
+  "version": "0.2.5",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "license": "MIT",
+  "dependencies": {
+    "cojson": "^0.2.3",
+    "jazz-browser": "^0.2.5",
+    "jazz-browser-media-images": "^0.2.5",
+    "jazz-react": "^0.2.5",
+    "typescript": "^5.1.6"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.19"
+  },
+  "peerDependencies": {
+    "react": "17 - 18"
+  },
+  "scripts": {
+    "lint": "eslint src/**/*.tsx",
+    "build": "npm run lint && rm -rf ./dist && tsc --declaration --sourceMap --outDir dist",
+    "prepublishOnly": "npm run build"
+  },
+  "gitHead": "33c27053293b4801b968c61d5c4c989f93a67d13"
+}

packages/jazz-react-media-images/src/index.tsx

@@ -0,0 +1,24 @@
+import { CoID, Media, Queried } from "cojson";
+import { loadImage, LoadingImageInfo } from "jazz-browser-media-images";
+import { useJazz } from "jazz-react";
+import { useEffect, useState } from "react";
+export { createImage, LoadingImageInfo } from "jazz-browser-media-images";
+
+export function useLoadImage(
+    imageID?: CoID<Media.ImageDefinition> | Media.ImageDefinition | Queried<Media.ImageDefinition>
+): LoadingImageInfo | undefined {
+    const { localNode } = useJazz();
+
+    const [imageInfo, setImageInfo] = useState<LoadingImageInfo>();
+
+    useEffect(() => {
+        if (!imageID) return;
+        const unsubscribe = loadImage(imageID, localNode, (imageInfo) => {
+            setImageInfo(imageInfo);
+        });
+
+        return unsubscribe;
+    }, [imageID, localNode]);
+
+    return imageInfo;
+}

packages/jazz-react-media-images/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "lib": ["ESNext", "DOM"],
+    "module": "esnext",
+    "target": "ES2020",
+    "moduleResolution": "bundler",
+    "moduleDetection": "force",
+    "strict": true,
+    "skipLibCheck": true,
+    "jsx": "react",
+    "forceConsistentCasingInFileNames": true,
+    "noUncheckedIndexedAccess": true,
+    "esModuleInterop": true,
+  },
+  "include": ["./src/**/*"],
+}

packages/jazz-react-media-images/yarn.lock

@@ -0,0 +1,75 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+"@noble/ciphers@^0.1.3":
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/@noble/ciphers/-/ciphers-0.1.4.tgz#96327dca147829ed9eee0d96cfdf7c57915765f0"
+  integrity sha512-d3ZR8vGSpy3v/nllS+bD/OMN5UZqusWiQqkyj7AwzTnhXFH72pF5oB4Ach6DQ50g5kXxC28LdaYBEpsyv9KOUQ==
+
+"@noble/curves@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@noble/curves/-/curves-1.1.0.tgz#f13fc667c89184bc04cccb9b11e8e7bae27d8c3d"
+  integrity sha512-091oBExgENk/kGj3AZmtBDMpxQPDtxQABR2B9lb1JbVTs6ytdzZNwvhxQ4MWasRNEzlbEH8jCWFCwhF/Obj5AA==
+  dependencies:
+    "@noble/hashes" "1.3.1"
+
+"@noble/hashes@1.3.1", "@noble/hashes@^1.3.1":
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/@noble/hashes/-/hashes-1.3.1.tgz#8831ef002114670c603c458ab8b11328406953a9"
+  integrity sha512-EbqwksQwz9xDRGfDST86whPBgM65E0OH/pCgqW0GBVzO22bNE+NuIbeTb714+IfSjU3aRk47EUvXIb5bTsenKA==
+
+"@scure/base@^1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@scure/base/-/base-1.1.1.tgz#ebb651ee52ff84f420097055f4bf46cfba403938"
+  integrity sha512-ZxOhsSyxYwLJj3pLZCefNitxsj093tb2vq90mp2txoYeBqbcjDjqFhyM8eUjq/uFm6zJ+mUuqxlS2FkuSY1MTA==
+
+"@types/prop-types@*":
+  version "15.7.5"
+  resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.5.tgz#5f19d2b85a98e9558036f6a3cacc8819420f05cf"
+  integrity sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==
+
+"@types/react@^18.2.19":
+  version "18.2.19"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.19.tgz#f77cb2c8307368e624d464a25b9675fa35f95a8b"
+  integrity sha512-e2S8wmY1ePfM517PqCG80CcE48Xs5k0pwJzuDZsfE8IZRRBfOMCF+XqnFxu6mWtyivum1MQm4aco+WIt6Coimw==
+  dependencies:
+    "@types/prop-types" "*"
+    "@types/scheduler" "*"
+    csstype "^3.0.2"
+
+"@types/scheduler@*":
+  version "0.16.3"
+  resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.3.tgz#cef09e3ec9af1d63d2a6cc5b383a737e24e6dcf5"
+  integrity sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ==
+
+cojson@^0.0.14:
+  version "0.0.14"
+  resolved "https://registry.yarnpkg.com/cojson/-/cojson-0.0.14.tgz#e7b190ade1efc20d6f0fa12411d7208cdc0f19f7"
+  integrity sha512-TFenIGswEEhnZlCmq+B1NZPztjovZ72AjK1YkkZca54ZFbB1lAHdPt2hqqu/QBO24C9+6DtuoS2ixm6gbSBWCg==
+  dependencies:
+    "@noble/ciphers" "^0.1.3"
+    "@noble/curves" "^1.1.0"
+    "@noble/hashes" "^1.3.1"
+    "@scure/base" "^1.1.1"
+    fast-json-stable-stringify "^2.1.0"
+    isomorphic-streams "https://github.com/sgwilym/isomorphic-streams.git#aa9394781bfc92f8d7c981be7daf8af4b4cd4fae"
+
+csstype@^3.0.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.2.tgz#1d4bf9d572f11c14031f0436e1c10bc1f571f50b"
+  integrity sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==
+
+fast-json-stable-stringify@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz#874bf69c6f404c2b5d99c481341399fd55892633"
+  integrity sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==
+
+"isomorphic-streams@git+https://github.com/sgwilym/isomorphic-streams.git#aa9394781bfc92f8d7c981be7daf8af4b4cd4fae":
+  version "1.0.3"
+  resolved "git+https://github.com/sgwilym/isomorphic-streams.git#aa9394781bfc92f8d7c981be7daf8af4b4cd4fae"
+
+typescript@^5.1.6:
+  version "5.1.6"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.1.6.tgz#02f8ac202b6dad2c0dd5e0913745b47a37998274"
+  integrity sha512-zaWCozRZ6DLEWAWFrVDz1H6FVXzUSfTy5FUMWsQlU8Ym5JP9eO4xkTIROFCQvhQf61z6O/G6ugw3SgAnvvm+HA==

packages/jazz-react/package.json

@@ -1,12 +1,12 @@
 {
   "name": "jazz-react",
-  "version": "0.1.12",
+  "version": "0.2.5",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "license": "MIT",
   "dependencies": {
-    "cojson": "^0.1.10",
-    "jazz-browser": "^0.1.10",
+    "cojson": "^0.2.3",
+    "jazz-browser": "^0.2.5",
     "typescript": "^5.1.6"
   },
   "devDependencies": {

packages/jazz-react/src/index.tsx

@@ -1,6 +1,5 @@
 import {
     LocalNode,
-    CoValueImpl,
     CoID,
     CoMap,
     AccountID,
@@ -8,14 +7,11 @@ import {
     CojsonInternalTypes,
     BinaryCoStream,
     BinaryCoStreamMeta,
-    Group,
+    Queried,
+    CoValue
 } from "cojson";
-import React, { ChangeEvent, useEffect, useState } from "react";
-import {
-    AuthProvider,
-    createBinaryStreamFromBlob,
-    createBrowserNode,
-} from "jazz-browser";
+import React, { useEffect, useState } from "react";
+import { AuthProvider, createBrowserNode } from "jazz-browser";
 import { readBlobFromBinaryStream } from "jazz-browser";
 
 export {
@@ -52,6 +48,7 @@ export function WithJazz({
 
     useEffect(() => {
         let done: (() => void) | undefined = undefined;
+        let stop = false;
 
         (async () => {
             const nodeHandle = await createBrowserNode({
@@ -62,6 +59,11 @@ export function WithJazz({
                     undefined,
             });
 
+            if (stop) {
+                nodeHandle.done();
+                return;
+            }
+
             setNode(nodeHandle.node);
 
             done = nodeHandle.done;
@@ -70,6 +72,7 @@ export function WithJazz({
         });
 
         return () => {
+            stop = true;
             done && done();
         };
     }, [auth, syncAddress]);
@@ -97,7 +100,7 @@ export function useJazz() {
     return context;
 }
 
-export function useTelepathicState<T extends CoValueImpl>(id?: CoID<T>) {
+export function useTelepathicState<T extends CoValue>(id?: CoID<T>) {
     const [state, setState] = useState<T>();
 
     const { localNode } = useJazz();
@@ -134,6 +137,22 @@ export function useTelepathicState<T extends CoValueImpl>(id?: CoID<T>) {
     return state;
 }
 
+export function useTelepathicQuery<T extends CoValue>(
+    id?: CoID<T>
+): Queried<T> | undefined {
+    const { localNode } = useJazz();
+
+    const [result, setResult] = useState<Queried<T> | undefined>();
+
+    useEffect(() => {
+        if (!id) return;
+        const unsubscribe = localNode.query(id, setResult);
+        return unsubscribe;
+    }, [id, localNode]);
+
+    return result;
+}
+
 export function useProfile<
     P extends {
         [key: string]: JsonValue;
@@ -158,7 +177,7 @@ export function useProfile<
 }
 
 export function useBinaryStream<C extends BinaryCoStream<BinaryCoStreamMeta>>(
-    streamID: CoID<C>,
+    streamID?: CoID<C>,
     allowUnfinished?: boolean
 ): { blob: Blob; blobURL: string } | undefined {
     const { localNode } = useJazz();
@@ -171,32 +190,23 @@ export function useBinaryStream<C extends BinaryCoStream<BinaryCoStreamMeta>>(
 
     useEffect(() => {
         if (!stream) return;
-        readBlobFromBinaryStream(stream.id, localNode, allowUnfinished).then(
-            (blob) =>
-                setBlob(blob && {
-                    blob,
-                    blobURL: URL.createObjectURL(blob),
-                })
-        );
+        readBlobFromBinaryStream(stream.id, localNode, allowUnfinished)
+            .then((blob) =>
+                setBlob(
+                    blob && {
+                        blob,
+                        blobURL: URL.createObjectURL(blob),
+                    }
+                )
+            )
+            .catch((e) => console.error("Failed to read binary stream", e));
     }, [stream, localNode]);
 
+    useEffect(() => {
+        return () => {
+            blob && URL.revokeObjectURL(blob.blobURL);
+        };
+    }, [blob?.blobURL]);
+
     return blob;
 }
-
-export function useCreateBinaryStreamHandler<
-    C extends BinaryCoStream<BinaryCoStreamMeta>
->(
-    onCreated: (createdStream: C) => void,
-    inGroup: Group,
-    meta: C["meta"]
-): (event: ChangeEvent) => void {
-    return async (event) => {
-        const file = (event.target as HTMLInputElement).files?.[0];
-
-        if (!file) return;
-
-        const stream = await createBinaryStreamFromBlob(file, inGroup, meta);
-
-        onCreated(stream);
-    };
-}