Publish

- jazz-example-chat@0.0.44
 - jazz-example-file-drop@0.0.61
 - jazz-example-pets@0.0.61
 - jazz-example-todo@0.0.61
 - jazz-example-twit@0.0.61
 - hashroute@0.1.2
 - jazz-browser@0.4.14
 - jazz-browser-auth-local@0.4.14
 - jazz-browser-media-images@0.4.14
 - jazz-react@0.4.14
 - jazz-react-auth-local@0.4.14

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

@@ -11,7 +11,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        example: ["todo", "pets", "twit"]
+        example: ["todo", "pets", "twit", "file-drop"]
 
     steps:
     - uses: actions/checkout@v3
@@ -58,7 +58,7 @@ jobs:
     needs: build
     strategy:
       matrix:
-        example: ["todo", "pets", "twit"]
+        example: ["todo", "pets", "twit", "file-drop"]
 
     steps:
     - uses: actions/checkout@v3

DOCS.md

@@ -54,6 +54,7 @@ export function WithJazz(props: {
   children: ReactNode,
   syncAddress?: string,
   migration?: AccountMigration,
+  apiKey?: string,
 }): Element
 ```
 Top-level component that provides Jazz context to your whole app, so you can use Jazz hooks in your components.
@@ -67,6 +68,7 @@ Top-level component that provides Jazz context to your whole app, so you can use
 | `props.auth` | An auth provider (renders login/sign-up UI if not logged in) - see available providers in the [Documentation](../../../DOCS.md#auth-providers) |
 | `props.syncAddress?` | The address of the upstream syncing peer. Defaults to `wss://sync.jazz.tool` (Jazz Global Mesh). If not set explicitly, it can also be temporarily overwritten by setting the `sync` query parameter in the URL, like `https://your-app.example.net?sync=ws://localhost:4200`. |
 | `props.migration?` | TODO: document |
+| `props.apiKey?` | TODO: document |
 
 ##### Example:
 
@@ -2723,13 +2725,14 @@ TODO: document
 
 
 <details>
-<summary><b><code>.load(id)</code></b>  </summary>
+<summary><b><code>.load(id, onProgress?)</code></b>  </summary>
 
 ```typescript
 class LocalNode {
 
   load<T extends CoValue>(
-    id: CoID<T>
+    id: CoID<T>,
+    onProgress?: (progress: number) => void
   ): Promise<T> {...}
 
 }
@@ -2746,6 +2749,7 @@ for listening to subsequent updates to the CoValue.
 | ----: | ---- |
 | `id` | TODO: document  |
 
+
 </details>
 
 
@@ -2929,9 +2933,9 @@ class Group<P, R, Meta> {
 
   asObject(): {
     everyone: undefined | Role,
-    readKey: undefined | `key_z${string}`,
     profile: undefined | null | CoID<P>,
     root: undefined | null | CoID<R>,
+    readKey: undefined | `key_z${string}`,
   } {...}
 
 }
@@ -2950,9 +2954,9 @@ class Group<P, R, Meta> {
 
   toJSON(): {
     everyone: undefined | Role,
-    readKey: undefined | `key_z${string}`,
     profile: undefined | null | CoID<P>,
     root: undefined | null | CoID<R>,
+    readKey: undefined | `key_z${string}`,
   } {...}
 
 }
@@ -3054,9 +3058,9 @@ class Group<P, R, Meta> {
   set(
     kv: {
       everyone: undefined | Role,
-      readKey: undefined | `key_z${string}`,
       profile: undefined | null | CoID<P>,
       root: undefined | null | CoID<R>,
+      readKey: undefined | `key_z${string}`,
     },
     privacy?: "private" | "trusting"
   ): Group<P, R, Meta> {...}
@@ -3070,9 +3074,9 @@ TODO: document
 | name | description |
 | ----: | ---- |
 | `kv.everyone` | TODO: document |
-| `kv.readKey` | TODO: document |
 | `kv.profile` | TODO: document |
 | `kv.root` | TODO: document |
+| `kv.readKey` | TODO: document |
 | `privacy?` | TODO: document  |
 
 </details>
@@ -3401,7 +3405,7 @@ class Group<P, R, Meta> {
     key: K,
     n: number
   ): undefined | {
-    by: AccountID | AgentID,
+    by: AgentID | AccountID,
     tx: TransactionID,
     at: Date,
     value?: GroupShape<P, R>[K],
@@ -3431,7 +3435,7 @@ class Group<P, R, Meta> {
   lastEditAt<K extends Object>(
     key: K
   ): undefined | {
-    by: AccountID | AgentID,
+    by: AgentID | AccountID,
     tx: TransactionID,
     at: Date,
     value?: GroupShape<P, R>[K],
@@ -3460,7 +3464,7 @@ class Group<P, R, Meta> {
   editsAt<K extends Object>(
     key: K
   ): Generator<{
-    by: AccountID | AgentID,
+    by: AgentID | AccountID,
     tx: TransactionID,
     at: Date,
     value?: GroupShape<P, R>[K],
@@ -3907,7 +3911,7 @@ class CoMap<Shape, Meta> {
     key: K,
     n: number
   ): undefined | {
-    by: AccountID | AgentID,
+    by: AgentID | AccountID,
     tx: TransactionID,
     at: Date,
     value?: Shape[K],
@@ -3937,7 +3941,7 @@ class CoMap<Shape, Meta> {
   lastEditAt<K extends string>(
     key: K
   ): undefined | {
-    by: AccountID | AgentID,
+    by: AgentID | AccountID,
     tx: TransactionID,
     at: Date,
     value?: Shape[K],
@@ -3966,7 +3970,7 @@ class CoMap<Shape, Meta> {
   editsAt<K extends string>(
     key: K
   ): Generator<{
-    by: AccountID | AgentID,
+    by: AgentID | AccountID,
     tx: TransactionID,
     at: Date,
     value?: Shape[K],
@@ -4351,7 +4355,7 @@ class MutableCoMap<Shape, Meta> {
     key: K,
     n: number
   ): undefined | {
-    by: AccountID | AgentID,
+    by: AgentID | AccountID,
     tx: TransactionID,
     at: Date,
     value?: Shape[K],
@@ -4381,7 +4385,7 @@ class MutableCoMap<Shape, Meta> {
   lastEditAt<K extends string>(
     key: K
   ): undefined | {
-    by: AccountID | AgentID,
+    by: AgentID | AccountID,
     tx: TransactionID,
     at: Date,
     value?: Shape[K],
@@ -4410,7 +4414,7 @@ class MutableCoMap<Shape, Meta> {
   editsAt<K extends string>(
     key: K
   ): Generator<{
-    by: AccountID | AgentID,
+    by: AgentID | AccountID,
     tx: TransactionID,
     at: Date,
     value?: Shape[K],
@@ -4809,7 +4813,7 @@ class CoList<Item, Meta> {
   editAt(
     idx: number
   ): undefined | {
-    by: AccountID | AgentID,
+    by: AgentID | AccountID,
     tx: TransactionID,
     at: Date,
     value: Item,
@@ -4836,7 +4840,7 @@ TODO: document
 class CoList<Item, Meta> {
 
   deletionEdits(): {
-    by: AccountID | AgentID,
+    by: AgentID | AccountID,
     tx: TransactionID,
     at: Date,
   }[] {...}
@@ -5238,7 +5242,7 @@ class MutableCoList<Item, Meta> {
   editAt(
     idx: number
   ): undefined | {
-    by: AccountID | AgentID,
+    by: AgentID | AccountID,
     tx: TransactionID,
     at: Date,
     value: Item,
@@ -5265,7 +5269,7 @@ TODO: document
 class MutableCoList<Item, Meta> {
 
   deletionEdits(): {
-    by: AccountID | AgentID,
+    by: AgentID | AccountID,
     tx: TransactionID,
     at: Date,
   }[] {...}
@@ -5635,7 +5639,7 @@ class CoStream<Item, Meta> {
     sessionID: SessionID,
     n: number
   ): undefined | {
-    by: AccountID | AgentID,
+    by: AgentID | AccountID,
     tx: TransactionID,
     at: Date,
     value: Item,
@@ -5665,7 +5669,7 @@ class CoStream<Item, Meta> {
   lastItemIn(
     sessionID: SessionID
   ): undefined | {
-    by: AccountID | AgentID,
+    by: AgentID | AccountID,
     tx: TransactionID,
     at: Date,
     value: Item,
@@ -5694,7 +5698,7 @@ class CoStream<Item, Meta> {
   itemsIn(
     sessionID: SessionID
   ): Generator<{
-    by: AccountID | AgentID,
+    by: AgentID | AccountID,
     tx: TransactionID,
     at: Date,
     value: Item,
@@ -5721,9 +5725,9 @@ TODO: document
 class CoStream<Item, Meta> {
 
   lastItemBy(
-    account: AccountID | AgentID
+    account: AgentID | AccountID
   ): undefined | {
-    by: AccountID | AgentID,
+    by: AgentID | AccountID,
     tx: TransactionID,
     at: Date,
     value: Item,
@@ -5750,9 +5754,9 @@ TODO: document
 class CoStream<Item, Meta> {
 
   itemsBy(
-    account: AccountID | AgentID
+    account: AgentID | AccountID
   ): Generator<{
-    by: AccountID | AgentID,
+    by: AgentID | AccountID,
     tx: TransactionID,
     at: Date,
     value: Item,
@@ -6101,7 +6105,7 @@ class MutableCoStream<Item, Meta> {
     sessionID: SessionID,
     n: number
   ): undefined | {
-    by: AccountID | AgentID,
+    by: AgentID | AccountID,
     tx: TransactionID,
     at: Date,
     value: Item,
@@ -6131,7 +6135,7 @@ class MutableCoStream<Item, Meta> {
   lastItemIn(
     sessionID: SessionID
   ): undefined | {
-    by: AccountID | AgentID,
+    by: AgentID | AccountID,
     tx: TransactionID,
     at: Date,
     value: Item,
@@ -6160,7 +6164,7 @@ class MutableCoStream<Item, Meta> {
   itemsIn(
     sessionID: SessionID
   ): Generator<{
-    by: AccountID | AgentID,
+    by: AgentID | AccountID,
     tx: TransactionID,
     at: Date,
     value: Item,
@@ -6187,9 +6191,9 @@ TODO: document
 class MutableCoStream<Item, Meta> {
 
   lastItemBy(
-    account: AccountID | AgentID
+    account: AgentID | AccountID
   ): undefined | {
-    by: AccountID | AgentID,
+    by: AgentID | AccountID,
     tx: TransactionID,
     at: Date,
     value: Item,
@@ -6216,9 +6220,9 @@ TODO: document
 class MutableCoStream<Item, Meta> {
 
   itemsBy(
-    account: AccountID | AgentID
+    account: AgentID | AccountID
   ): Generator<{
-    by: AccountID | AgentID,
+    by: AgentID | AccountID,
     tx: TransactionID,
     at: Date,
     value: Item,
@@ -6455,6 +6459,88 @@ TODO: document
 
 ### `BinaryCoStream`: Methods
 
+<details>
+<summary><b><code>.push(item, privacy?)</code></b>  </summary>
+
+```typescript
+class BinaryCoStream<Meta> {
+
+  push(
+    item: BinaryStreamItem,
+    privacy?: "private" | "trusting"
+  ): BinaryCoStream<Meta> {...}
+
+}
+```
+
+
+
+
+### Parameters:
+
+| name | description |
+| ----: | ---- |
+| `item` | TODO: document  |
+| `privacy?` | TODO: document  |
+
+</details>
+
+
+
+<details>
+<summary><b><code>.push(item, privacy, returnNewStream)</code></b>  <sub><sup>(undocumented)</sup></sub></summary>
+
+```typescript
+class BinaryCoStream<Meta> {
+
+  push(
+    item: BinaryStreamItem,
+    privacy: "private" | "trusting",
+    returnNewStream: true
+  ): BinaryCoStream<Meta> {...}
+
+}
+```
+TODO: document
+
+### Parameters:
+
+| name | description |
+| ----: | ---- |
+| `item` | TODO: document  |
+| `privacy` | TODO: document  |
+| `returnNewStream` | TODO: document  |
+
+</details>
+
+
+
+<details>
+<summary><b><code>.push(item, privacy, returnNewStream)</code></b>  <sub><sup>(undocumented)</sup></sub></summary>
+
+```typescript
+class BinaryCoStream<Meta> {
+
+  push(
+    item: BinaryStreamItem,
+    privacy: "private" | "trusting",
+    returnNewStream: false
+  ): void {...}
+
+}
+```
+TODO: document
+
+### Parameters:
+
+| name | description |
+| ----: | ---- |
+| `item` | TODO: document  |
+| `privacy` | TODO: document  |
+| `returnNewStream` | TODO: document  |
+
+</details>
+
 
 
 <details>
@@ -6466,7 +6552,7 @@ class BinaryCoStream<Meta> {
   startBinaryStream(
     settings: BinaryStreamInfo,
     privacy?: "private" | "trusting" = "private"
-  ): BinaryCoStream<Meta> {...}
+  ): void {...}
 
 }
 ```
@@ -6492,7 +6578,7 @@ class BinaryCoStream<Meta> {
   pushBinaryStreamChunk(
     chunk: Uint8Array,
     privacy?: "private" | "trusting" = "private"
-  ): BinaryCoStream<Meta> {...}
+  ): void {...}
 
 }
 ```
@@ -6696,7 +6782,7 @@ class BinaryCoStream<Meta> {
     sessionID: SessionID,
     n: number
   ): undefined | {
-    by: AccountID | AgentID,
+    by: AgentID | AccountID,
     tx: TransactionID,
     at: Date,
     value: BinaryStreamItem,
@@ -6726,7 +6812,7 @@ class BinaryCoStream<Meta> {
   lastItemIn(
     sessionID: SessionID
   ): undefined | {
-    by: AccountID | AgentID,
+    by: AgentID | AccountID,
     tx: TransactionID,
     at: Date,
     value: BinaryStreamItem,
@@ -6755,7 +6841,7 @@ class BinaryCoStream<Meta> {
   itemsIn(
     sessionID: SessionID
   ): Generator<{
-    by: AccountID | AgentID,
+    by: AgentID | AccountID,
     tx: TransactionID,
     at: Date,
     value: BinaryStreamItem,
@@ -6782,9 +6868,9 @@ TODO: document
 class BinaryCoStream<Meta> {
 
   lastItemBy(
-    account: AccountID | AgentID
+    account: AgentID | AccountID
   ): undefined | {
-    by: AccountID | AgentID,
+    by: AgentID | AccountID,
     tx: TransactionID,
     at: Date,
     value: BinaryStreamItem,
@@ -6811,9 +6897,9 @@ TODO: document
 class BinaryCoStream<Meta> {
 
   itemsBy(
-    account: AccountID | AgentID
+    account: AgentID | AccountID
   ): Generator<{
-    by: AccountID | AgentID,
+    by: AgentID | AccountID,
     tx: TransactionID,
     at: Date,
     value: BinaryStreamItem,
@@ -7241,7 +7327,7 @@ class MutableBinaryCoStream<Meta> {
     sessionID: SessionID,
     n: number
   ): undefined | {
-    by: AccountID | AgentID,
+    by: AgentID | AccountID,
     tx: TransactionID,
     at: Date,
     value: BinaryStreamItem,
@@ -7271,7 +7357,7 @@ class MutableBinaryCoStream<Meta> {
   lastItemIn(
     sessionID: SessionID
   ): undefined | {
-    by: AccountID | AgentID,
+    by: AgentID | AccountID,
     tx: TransactionID,
     at: Date,
     value: BinaryStreamItem,
@@ -7300,7 +7386,7 @@ class MutableBinaryCoStream<Meta> {
   itemsIn(
     sessionID: SessionID
   ): Generator<{
-    by: AccountID | AgentID,
+    by: AgentID | AccountID,
     tx: TransactionID,
     at: Date,
     value: BinaryStreamItem,
@@ -7327,9 +7413,9 @@ TODO: document
 class MutableBinaryCoStream<Meta> {
 
   lastItemBy(
-    account: AccountID | AgentID
+    account: AgentID | AccountID
   ): undefined | {
-    by: AccountID | AgentID,
+    by: AgentID | AccountID,
     tx: TransactionID,
     at: Date,
     value: BinaryStreamItem,
@@ -7356,9 +7442,9 @@ TODO: document
 class MutableBinaryCoStream<Meta> {
 
   itemsBy(
-    account: AccountID | AgentID
+    account: AgentID | AccountID
   ): Generator<{
-    by: AccountID | AgentID,
+    by: AgentID | AccountID,
     tx: TransactionID,
     at: Date,
     value: BinaryStreamItem,
@@ -7605,9 +7691,9 @@ class Account<P, R, Meta> {
 
   asObject(): {
     everyone: undefined | Role,
-    readKey: undefined | `key_z${string}`,
     profile: undefined | null | CoID<P>,
     root: undefined | null | CoID<R>,
+    readKey: undefined | `key_z${string}`,
   } {...}
 
 }
@@ -7626,9 +7712,9 @@ class Account<P, R, Meta> {
 
   toJSON(): {
     everyone: undefined | Role,
-    readKey: undefined | `key_z${string}`,
     profile: undefined | null | CoID<P>,
     root: undefined | null | CoID<R>,
+    readKey: undefined | `key_z${string}`,
   } {...}
 
 }
@@ -7730,9 +7816,9 @@ class Account<P, R, Meta> {
   set(
     kv: {
       everyone: undefined | Role,
-      readKey: undefined | `key_z${string}`,
       profile: undefined | null | CoID<P>,
       root: undefined | null | CoID<R>,
+      readKey: undefined | `key_z${string}`,
     },
     privacy?: "private" | "trusting"
   ): Account<P, R, Meta> {...}
@@ -7746,9 +7832,9 @@ TODO: document
 | name | description |
 | ----: | ---- |
 | `kv.everyone` | TODO: document |
-| `kv.readKey` | TODO: document |
 | `kv.profile` | TODO: document |
 | `kv.root` | TODO: document |
+| `kv.readKey` | TODO: document |
 | `privacy?` | TODO: document  |
 
 </details>
@@ -8077,7 +8163,7 @@ class Account<P, R, Meta> {
     key: K,
     n: number
   ): undefined | {
-    by: AccountID | AgentID,
+    by: AgentID | AccountID,
     tx: TransactionID,
     at: Date,
     value?: GroupShape<P, R>[K],
@@ -8107,7 +8193,7 @@ class Account<P, R, Meta> {
   lastEditAt<K extends Object>(
     key: K
   ): undefined | {
-    by: AccountID | AgentID,
+    by: AgentID | AccountID,
     tx: TransactionID,
     at: Date,
     value?: GroupShape<P, R>[K],
@@ -8136,7 +8222,7 @@ class Account<P, R, Meta> {
   editsAt<K extends Object>(
     key: K
   ): Generator<{
-    by: AccountID | AgentID,
+    by: AgentID | AccountID,
     tx: TransactionID,
     at: Date,
     value?: GroupShape<P, R>[K],
@@ -8598,7 +8684,7 @@ class Profile<Shape, Meta> {
     key: K,
     n: number
   ): undefined | {
-    by: AccountID | AgentID,
+    by: AgentID | AccountID,
     tx: TransactionID,
     at: Date,
     value?: Shape[K],
@@ -8628,7 +8714,7 @@ class Profile<Shape, Meta> {
   lastEditAt<K extends string>(
     key: K
   ): undefined | {
-    by: AccountID | AgentID,
+    by: AgentID | AccountID,
     tx: TransactionID,
     at: Date,
     value?: Shape[K],
@@ -8657,7 +8743,7 @@ class Profile<Shape, Meta> {
   editsAt<K extends string>(
     key: K
   ): Generator<{
-    by: AccountID | AgentID,
+    by: AgentID | AccountID,
     tx: TransactionID,
     at: Date,
     value?: Shape[K],
@@ -9443,7 +9529,7 @@ TODO: document
 class CoValueCore {
 
   _decryptionCache: {
-    [key: Encrypted<JsonValue[], JsonValue>]: Stringified<JsonValue[]> | undefined }
+    [key: Encrypted<JsonValue[], JsonValue>]: JsonValue[] | undefined }
 
 }
 ```
@@ -10111,14 +10197,14 @@ TODO: document
 
 ----
 
-## `createBinaryStreamFromBlob(blob, inGroup, meta?)`
+## `createBinaryStreamFromBlob(blob, inGroup, meta?, onProgress?)`
 
 <sup>(function in `jazz-browser`)</sup>
 
 ```typescript
 export function createBinaryStreamFromBlob<C extends BinaryCoStream<BinaryCoStreamMeta>>(blob: Blob | File, inGroup: Group<Profile<ProfileShape, ProfileMeta>, CoMap<{
   [key: string]: JsonValue | undefined }, null | JsonObject>, null | JsonObject> | ResolvedGroup<Group<Profile<ProfileShape, ProfileMeta>, CoMap<{
-  [key: string]: JsonValue | undefined }, null | JsonObject>, null | JsonObject>>, meta: C["headerMeta"]): Promise<C>
+  [key: string]: JsonValue | undefined }, null | JsonObject>, null | JsonObject>>, meta: C["headerMeta"], onProgress: (progress: number) => void): Promise<C>
 ```
 TODO: document
 
@@ -10134,14 +10220,15 @@ TODO: document
 
 
 
+
 ----
 
-## `readBlobFromBinaryStream(streamId, node, allowUnfinished?)`
+## `readBlobFromBinaryStream(streamId, node, allowUnfinished?, onProgress?)`
 
 <sup>(function in `jazz-browser`)</sup>
 
 ```typescript
-export function readBlobFromBinaryStream<C extends BinaryCoStream<BinaryCoStreamMeta>>(streamId: CoID<C>, node: LocalNode, allowUnfinished: boolean): Promise<Blob | undefined>
+export function readBlobFromBinaryStream<C extends BinaryCoStream<BinaryCoStreamMeta>>(streamId: CoID<C>, node: LocalNode, allowUnfinished: boolean, onProgress: (progress: number) => void): Promise<Blob | undefined>
 ```
 TODO: document
 
@@ -10157,6 +10244,7 @@ TODO: document
 
 
 
+
 ----
 
 ## `autoSub(id, node, callback)`

examples/chat/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jazz-example-chat",
   "private": true,
-  "version": "0.0.43",
+  "version": "0.0.44",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -16,8 +16,9 @@
     "@types/qrcode": "^1.5.1",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
-    "jazz-react": "^0.4.6",
-    "jazz-react-auth-local": "^0.4.6",
+    "hashroute": "^0.1.2",
+    "jazz-react": "^0.4.14",
+    "jazz-react-auth-local": "^0.4.14",
     "lucide-react": "^0.274.0",
     "qrcode": "^1.5.3",
     "react": "^18.2.0",

examples/file-drop/.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/file-drop/.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/file-drop/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/file-drop/README.md

@@ -0,0 +1,64 @@
+# Jazz Todo List Example
+
+Live version: https://example-todo.jazz.tools
+
+## Installing & running the example locally
+
+Start by checking out just the example app to a folder:
+
+```bash
+npx degit gardencmp/jazz/examples/todo jazz-example-todo
+cd jazz-example-todo
+```
+
+(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
+
+- [`src/basicComponents`](./src/basicComponents): simple components to build the UI, unrelated to Jazz (uses [shadcn/ui](https://ui.shadcn.com))
+- [`src/components`](./src/components/): helper components that do contain Jazz-specific logic, but aren't very relevant to understand the basics of Jazz and CoJSON
+- [`src/1_types.ts`](./src/1_types.ts),
+[`src/2_main.tsx`](./src/2_main.tsx),
+[`src/3_NewProjectForm.tsx`](./src/3_NewProjectForm.tsx),
+[`src/4_ProjectTodoTable.tsx`](./src/4_ProjectTodoTable.tsx): the main files for this example, see the walkthrough below
+
+## Walkthrough
+
+### Main parts
+
+1. Defining the data model with CoJSON: [`src/1_types.ts`](./src/1_types.ts)
+
+2. The top-level provider `<WithJazz/>` and routing: [`src/2_main.tsx`](./src/2_main.tsx)
+
+3. Creating a new todo project: [`src/3_NewProjectForm.tsx`](./src/3_NewProjectForm.tsx)
+
+4. Reactively rendering a todo project as a table, adding and editing tasks: [`src/4_ProjectTodoTable.tsx`](./src/4_ProjectTodoTable.tsx)
+
+### Helpers
+
+- (not yet explained) Creating invite links/QR codes with `<InviteButton/>`: [`src/components/InviteButton.tsx`](./src/components/InviteButton.tsx)
+
+This is the whole Todo List app!
+
+## 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/2_main.tsx](./src/2_main.tsx).

examples/file-drop/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/file-drop/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 File Drop Example</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/2_main.tsx"></script>
+  </body>
+</html>

examples/file-drop/job-template.nomad

@@ -0,0 +1,56 @@
+job "example-file-drop$BRANCH_SUFFIX" {
+  region     = "global"
+  datacenters = ["*"]
+
+  group "static" {
+    count = 4
+
+    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-file-drop$BRANCH_SUFFIX"
+        port = "http"
+        provider = "consul"
+      }
+
+      resources {
+        cpu    = 50 # MHz
+        memory = 50 # MB
+      }
+    }
+  }
+}
+# deploy bump 4

examples/file-drop/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "jazz-example-file-drop",
+  "private": true,
+  "version": "0.0.61",
+  "type": "module",
+  "scripts": {
+    "dev": "vite --port 6610",
+    "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.4.14",
+    "jazz-react-auth-local": "^0.4.14",
+    "lucide-react": "^0.274.0",
+    "qrcode": "^1.5.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router": "^6.16.0",
+    "react-router-dom": "^6.16.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/file-drop/postcss.config.js

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

examples/file-drop/src/1_types.ts

@@ -0,0 +1,5 @@
+import { CoMap, BinaryCoStream } from "cojson";
+
+export type FileBundle = CoMap<{
+    [filename: string]: BinaryCoStream['id']
+}>;

examples/file-drop/src/2_main.tsx

@@ -0,0 +1,187 @@
+import React, { ChangeEvent, useCallback, useState } from "react";
+import ReactDOM from "react-dom/client";
+import {
+    RouterProvider,
+    createHashRouter,
+    useNavigate,
+    useParams,
+} from "react-router-dom";
+import "./index.css";
+
+import { WithJazz, useJazz, useAcceptInvite, useAutoSub } from "jazz-react";
+import { LocalAuth } from "jazz-react-auth-local";
+
+import {
+    Button,
+    Input,
+    ThemeProvider,
+    TitleAndLogo,
+} from "./basicComponents/index.ts";
+import { PrettyAuthUI } from "./components/Auth.tsx";
+import { FileBundle } from "./1_types.ts";
+import {
+    createBinaryStreamFromBlob,
+    readBlobFromBinaryStream,
+} from "jazz-browser";
+import { DownloadIcon } from "lucide-react";
+
+const appName = "Jazz File Drop Example";
+
+const auth = LocalAuth({
+    appName,
+    Component: PrettyAuthUI,
+});
+
+ReactDOM.createRoot(document.getElementById("root")!).render(
+    <React.StrictMode>
+        <ThemeProvider>
+            <TitleAndLogo name={appName} />
+            <div className="flex flex-col h-full items-center justify-start gap-10 pt-10 pb-10 px-5">
+                <WithJazz auth={auth}>
+                    <App />
+                </WithJazz>
+            </div>
+        </ThemeProvider>
+    </React.StrictMode>
+);
+
+function App() {
+    // logOut logs out the AuthProvider passed to `<WithJazz/>` above.
+    const { logOut } = useJazz();
+
+    const router = createHashRouter([
+        {
+            path: "/",
+            element: <FileDropUI />,
+        },
+        {
+            path: "/bundle/:bundleId",
+            element: <FileDropUIPage />,
+        },
+        {
+            path: "/invite/*",
+            element: <p>Accepting invite...</p>,
+        },
+    ]);
+
+    // `useAcceptInvite()` is a hook that accepts an invite link from the URL hash,
+    // and on success calls our callback where we navigate to the project that we were just invited to.
+    useAcceptInvite((bundleId) => router.navigate("/v/" + bundleId));
+
+    return (
+        <>
+            <RouterProvider router={router} />
+
+            <Button
+                onClick={() => router.navigate("/").then(logOut)}
+                variant="outline"
+            >
+                Log Out
+            </Button>
+        </>
+    );
+}
+
+export function FileDropUIPage() {
+    const { bundleId } = useParams<{ bundleId: FileBundle["id"] }>();
+
+    return <FileDropUI bundleId={bundleId} />;
+}
+
+export function FileDropUI({ bundleId }: { bundleId?: FileBundle["id"] }) {
+    const navigate = useNavigate();
+    const { me, localNode } = useJazz();
+    const fileBundle = useAutoSub(bundleId);
+
+    const [progressMessage, setProgressMessage] = useState<{
+        [name: string]: string;
+    }>({});
+
+    const onChange = useCallback(
+        (event: ChangeEvent<HTMLInputElement>) => {
+            let fileBundleToUse = fileBundle?.meta.coValue;
+            let isFirstUpload = false;
+
+            if (!fileBundleToUse) {
+                const group = me.createGroup().addMember("everyone", "reader");
+                fileBundleToUse = group.createMap<FileBundle>();
+                isFirstUpload = true;
+            }
+
+            const files = [...(event.target.files || [])];
+
+            Promise.all(
+                files.map((file) =>
+                    createBinaryStreamFromBlob(
+                        file,
+                        fileBundleToUse!.group,
+                        { type: "binary" },
+                        (progress) =>
+                            setProgressMessage((old) => ({
+                                ...old,
+                                [file.name]: `Creating ${Math.round(
+                                    progress * 100
+                                )}%`,
+                            }))
+                    ).then((stream) => {
+                        fileBundleToUse!.set(file.name, stream.id);
+                    })
+                )
+            ).then(() => {
+                if (isFirstUpload) {
+                    navigate("/bundle/" + fileBundleToUse!.id);
+                }
+            });
+
+            event.target.value = "";
+        },
+        [me, navigate, fileBundle]
+    );
+
+    return (
+        <div className="max-w-full p-5 w-[40rem]">
+            <h1 className="text-3xl font-bold mb-5">File Drop</h1>
+            {[
+                ...new Set([
+                    ...Object.keys(fileBundle || {}),
+                    ...Object.keys(progressMessage),
+                ]),
+            ].map((name) => (
+                <div className="mb-5 flex justify-between" key={name}>
+                    {name} {progressMessage[name]}
+                    <Button
+                        size="sm"
+                        disabled={!(name in (fileBundle || {}))}
+                        onClick={() => {
+                            const streamId = fileBundle?.meta.coValue.get(name);
+                            streamId &&
+                                readBlobFromBinaryStream(
+                                    streamId,
+                                    localNode,
+                                    false,
+                                    (progress) =>
+                                        setProgressMessage((old) => ({
+                                            ...old,
+                                            [name]: `Loading ${Math.round(
+                                                progress * 100
+                                            )}%`,
+                                        }))
+                                ).then((blob) => {
+                                    if (!blob) return;
+                                    const url = URL.createObjectURL(blob);
+                                    window.open(url, "_blank");
+                                });
+                        }}
+                    >
+                        <DownloadIcon />
+                    </Button>
+                </div>
+            ))}
+            {(!fileBundle || fileBundle.meta.group.myRole() === "admin") && (
+                <Input type="file" onChange={onChange} multiple />
+            )}
+        </div>
+    );
+}
+
+/** Walkthrough: Continue with ./3_NewProjectForm.tsx */

examples/file-drop/src/basicComponents/SubmittableInput.tsx

@@ -0,0 +1,39 @@
+import { Input } from "@/basicComponents/ui/input";
+import { Button } from "@/basicComponents/ui/button";
+
+export function SubmittableInput({
+    onSubmit,
+    label,
+    placeholder,
+    disabled,
+}: {
+    onSubmit: (text: string) => void;
+    label: string;
+    placeholder: string;
+    disabled?: boolean;
+}) {
+    return (
+        <form
+            className="flex flex-row items-center gap-3"
+            onSubmit={(e) => {
+                e.preventDefault();
+                const textEl = e.currentTarget.elements.namedItem(
+                    "text"
+                ) as HTMLInputElement;
+                onSubmit(textEl.value);
+                textEl.value = "";
+            }}
+        >
+            <Input
+                className="-ml-3 -my-2 flex-grow flex-3 text-base"
+                name="text"
+                placeholder={placeholder}
+                autoComplete="off"
+                disabled={disabled}
+            />
+            <Button asChild type="submit" className="flex-shrink flex-1 cursor-pointer">
+                <Input type="submit" value={label} disabled={disabled} />
+            </Button>
+        </form>
+    );
+}

examples/file-drop/src/basicComponents/TitleAndLogo.tsx

@@ -0,0 +1,10 @@
+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/file-drop/src/basicComponents/index.ts

@@ -0,0 +1,17 @@
+export { Button } from "./ui/button";
+export { Checkbox } from "./ui/checkbox";
+export { Input } from "./ui/input";
+export { Skeleton } from "./ui/skeleton";
+export { Toaster } from "./ui/toaster";
+export { useToast } from "./ui/use-toast";
+export { SubmittableInput } from "./SubmittableInput";
+export { TitleAndLogo } from "./TitleAndLogo";
+export { ThemeProvider } from "./themeProvider";
+export {
+    Table,
+    TableBody,
+    TableCell,
+    TableHead,
+    TableHeader,
+    TableRow,
+} from "./ui/table";

examples/file-drop/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/file-drop/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/file-drop/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/file-drop/src/basicComponents/ui/checkbox.tsx

@@ -0,0 +1,28 @@
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { Check } from "lucide-react"
+
+import { cn } from "@/basicComponents/lib/utils"
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      className
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator
+      className={cn("flex items-center justify-center text-current")}
+    >
+      <Check className="h-4 w-4" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+))
+Checkbox.displayName = CheckboxPrimitive.Root.displayName
+
+export { Checkbox }

examples/file-drop/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/file-drop/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/file-drop/src/basicComponents/ui/table.tsx

@@ -0,0 +1,114 @@
+import * as React from "react"
+
+import { cn } from "@/basicComponents/lib/utils"
+
+const Table = React.forwardRef<
+  HTMLTableElement,
+  React.HTMLAttributes<HTMLTableElement>
+>(({ className, ...props }, ref) => (
+  <div className="w-full overflow-auto">
+    <table
+      ref={ref}
+      className={cn("w-full caption-bottom text-sm", className)}
+      {...props}
+    />
+  </div>
+))
+Table.displayName = "Table"
+
+const TableHeader = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
+))
+TableHeader.displayName = "TableHeader"
+
+const TableBody = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tbody
+    ref={ref}
+    className={cn("[&_tr:last-child]:border-0", className)}
+    {...props}
+  />
+))
+TableBody.displayName = "TableBody"
+
+const TableFooter = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tfoot
+    ref={ref}
+    className={cn("bg-primary font-medium text-primary-foreground", className)}
+    {...props}
+  />
+))
+TableFooter.displayName = "TableFooter"
+
+const TableRow = React.forwardRef<
+  HTMLTableRowElement,
+  React.HTMLAttributes<HTMLTableRowElement>
+>(({ className, ...props }, ref) => (
+  <tr
+    ref={ref}
+    className={cn(
+      "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+      className
+    )}
+    {...props}
+  />
+))
+TableRow.displayName = "TableRow"
+
+const TableHead = React.forwardRef<
+  HTMLTableCellElement,
+  React.ThHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <th
+    ref={ref}
+    className={cn(
+      "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
+      className
+    )}
+    {...props}
+  />
+))
+TableHead.displayName = "TableHead"
+
+const TableCell = React.forwardRef<
+  HTMLTableCellElement,
+  React.TdHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <td
+    ref={ref}
+    className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
+    {...props}
+  />
+))
+TableCell.displayName = "TableCell"
+
+const TableCaption = React.forwardRef<
+  HTMLTableCaptionElement,
+  React.HTMLAttributes<HTMLTableCaptionElement>
+>(({ className, ...props }, ref) => (
+  <caption
+    ref={ref}
+    className={cn("mt-4 text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+TableCaption.displayName = "TableCaption"
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}

examples/file-drop/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/file-drop/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/file-drop/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/file-drop/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/file-drop/src/components/InviteButton.tsx

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

examples/file-drop/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/file-drop/src/vite-env.d.ts

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

examples/file-drop/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/file-drop/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/file-drop/tsconfig.node.json

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

examples/file-drop/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/pets/job-template.nomad

@@ -3,7 +3,7 @@ job "example-pets$BRANCH_SUFFIX" {
   datacenters = ["*"]
 
   group "static" {
-    count = 8
+    count = 4
 
     network {
       port "http" {

examples/pets/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jazz-example-pets",
   "private": true,
-  "version": "0.0.19",
+  "version": "0.0.61",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -16,9 +16,9 @@
     "@types/qrcode": "^1.5.1",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
-    "jazz-browser-media-images": "^0.4.7",
-    "jazz-react": "^0.4.6",
-    "jazz-react-auth-local": "^0.4.6",
+    "jazz-browser-media-images": "^0.4.14",
+    "jazz-react": "^0.4.14",
+    "jazz-react-auth-local": "^0.4.14",
     "lucide-react": "^0.274.0",
     "qrcode": "^1.5.3",
     "react": "^18.2.0",

examples/todo/job-template.nomad

@@ -3,7 +3,7 @@ job "example-todo$BRANCH_SUFFIX" {
   datacenters = ["*"]
 
   group "static" {
-    count = 8
+    count = 4
 
     network {
       port "http" {

examples/todo/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jazz-example-todo",
   "private": true,
-  "version": "0.0.43",
+  "version": "0.0.61",
   "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.4.6",
-    "jazz-react-auth-local": "^0.4.6",
+    "jazz-react": "^0.4.14",
+    "jazz-react-auth-local": "^0.4.14",
     "lucide-react": "^0.274.0",
     "qrcode": "^1.5.3",
     "react": "^18.2.0",

examples/twit/job-template.nomad

@@ -3,7 +3,7 @@ job "twit$BRANCH_SUFFIX" {
   datacenters = ["*"]
 
   group "static" {
-    count = 8
+    count = 4
 
     network {
       port "http" {

examples/twit/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jazz-example-twit",
   "private": true,
-  "version": "0.0.6",
+  "version": "0.0.61",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -18,9 +18,9 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
     "javascript-time-ago": "^2.5.9",
-    "jazz-browser-media-images": "^0.4.7",
-    "jazz-react": "^0.4.6",
-    "jazz-react-auth-local": "^0.4.6",
+    "jazz-browser-media-images": "^0.4.14",
+    "jazz-react": "^0.4.14",
+    "jazz-react-auth-local": "^0.4.14",
     "lucide-react": "^0.274.0",
     "qrcode": "^1.5.3",
     "react": "^18.2.0",

generateDocs.ts

@@ -1,47 +1,8 @@
-import { readFile, writeFile } from "fs/promises";
 import { genDocsMd } from "./genDocsMd";
 
 export const manuallyIgnore = new Set(["CojsonInternalTypes"]);
 
 async function main() {
-    const exampleFilesInDocs = {
-        "examples/chat/src/dataModel.ts": "homepage/homepage-jazz/pages/index.mdx",
-        "examples/chat/src/app.tsx": "homepage/homepage-jazz/pages/index.mdx",
-        "examples/chat/src/chatWindow.tsx": "homepage/homepage-jazz/pages/index.mdx",
-    };
-
-    for (const [src, dest] of Object.entries(exampleFilesInDocs)) {
-        const srcStr = await readFile(src, "utf8");
-        const destStr = await readFile(dest, "utf8");
-        const srcFilename = src.split("/").pop()!;
-        const regexp = new RegExp(
-            '```(\\w+?) filename="' + srcFilename + '"(.+?)\n(.+?)```',
-            "s"
-        );
-        console.log(regexp);
-        await writeFile(
-            dest,
-            destStr.replace(regexp, (match, filetype, attrs, _oldCode) => {
-                console.log(
-                    { filetype },
-                    { attrs },
-                    { oldCode: _oldCode.slice(0, 30) }
-                );
-                return (
-                    "```" +
-                    filetype +
-                    ' filename="' +
-                    srcFilename +
-                    '"' +
-                    attrs +
-                    "\n" +
-                    srcStr +
-                    "```"
-                );
-            })
-        );
-    }
-
     await genDocsMd();
 }
 

packages/cojson-simple-sync/package.json

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

packages/cojson-storage-indexeddb/package.json

@@ -1,11 +1,11 @@
 {
   "name": "cojson-storage-indexeddb",
-  "version": "0.4.5",
+  "version": "0.4.13",
   "main": "dist/index.js",
   "types": "src/index.ts",
   "license": "MIT",
   "dependencies": {
-    "cojson": "^0.4.5",
+    "cojson": "^0.4.13",
     "typescript": "^5.1.6"
   },
   "devDependencies": {

packages/cojson-storage-sqlite/package.json

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

packages/cojson/package.json

@@ -5,7 +5,7 @@
     "types": "src/index.ts",
     "type": "module",
     "license": "MIT",
-    "version": "0.4.5",
+    "version": "0.4.13",
     "devDependencies": {
         "@types/jest": "^29.5.3",
         "@typescript-eslint/eslint-plugin": "^6.2.1",

packages/cojson/src/coValue.ts

@@ -65,15 +65,4 @@ export function expectStream(content: CoValue): CoStream {
     }
 
     return content as CoStream;
-}
-
-export function isCoValue(
-    value: JsonValue | CoValue | undefined
-): value is CoValue {
-    return (
-        value instanceof CoMap ||
-        value instanceof CoList ||
-        value instanceof CoStream ||
-        value instanceof BinaryCoStream
-    );
-}
+}

packages/cojson/src/coValueCore.ts

@@ -1,7 +1,5 @@
 import { randomBytes } from "@noble/hashes/utils";
 import { AnyCoValue, CoValue } from "./coValue.js";
-import { BinaryCoStream, CoStream } from "./coValues/coStream.js";
-import { CoMap } from "./coValues/coMap.js";
 import {
     Encrypted,
     Hash,
@@ -26,18 +24,19 @@ import {
     determineValidTransactions,
     isKeyForKeyField,
 } from "./permissions.js";
-import { Group, expectGroup } from "./coValues/group.js";
+import { Group } from "./coValues/group.js";
 import { LocalNode } from "./localNode.js";
 import { CoValueKnownState, NewContentMessage } from "./sync.js";
 import { AgentID, RawCoID, SessionID, TransactionID } from "./ids.js";
-import { CoList } from "./coValues/coList.js";
 import {
-    Account,
     AccountID,
     GeneralizedControlledAccount,
-    isAccountID,
 } from "./coValues/account.js";
-import { Stringified, stableStringify } from "./jsonStringify.js";
+import { Stringified, parseJSON, stableStringify } from "./jsonStringify.js";
+import { coreToCoValue } from "./coreToCoValue.js";
+import { expectGroup } from "./typeUtils/expectGroup.js";
+import { isAccountID } from "./typeUtils/isAccountID.js";
+import { accountOrAgentIDfromSessionID } from "./typeUtils/accountOrAgentIDfromSessionID.js";
 
 export const MAX_RECOMMENDED_TX_SIZE = 100 * 1024;
 
@@ -54,12 +53,6 @@ export function idforHeader(header: CoValueHeader): RawCoID {
     return `co_z${hash.slice("shortHash_z".length)}`;
 }
 
-export function accountOrAgentIDfromSessionID(
-    sessionID: SessionID
-): AccountID | AgentID {
-    return sessionID.split("_session")[0] as AccountID | AgentID;
-}
-
 export function newRandomSessionID(accountID: AccountID | AgentID): SessionID {
     return `${accountID}_session_z${base58.encode(randomBytes(8))}`;
 }
@@ -92,7 +85,7 @@ export type Transaction = PrivateTransaction | TrustingTransaction;
 
 export type DecryptedTransaction = {
     txID: TransactionID;
-    changes: Stringified<JsonValue[]>;
+    changes: JsonValue[];
     madeAt: number;
 };
 
@@ -107,7 +100,7 @@ export class CoValueCore {
     listeners: Set<(content?: CoValue) => void> = new Set();
     _decryptionCache: {
         [key: Encrypted<JsonValue[], JsonValue>]:
-            | Stringified<JsonValue[]>
+            | JsonValue[]
             | undefined;
     } = {};
 
@@ -464,7 +457,7 @@ export class CoValueCore {
                 tx: this.nextTransactionID(),
             });
 
-            this._decryptionCache[encrypted] = stableStringify(changes);
+            this._decryptionCache[encrypted] = changes;
 
             transaction = {
                 privacy: "private",
@@ -517,31 +510,7 @@ export class CoValueCore {
             return this._cachedContent;
         }
 
-        let newContent;
-        if (this.header.type === "comap") {
-            if (this.header.ruleset.type === "group") {
-                if (
-                    this.header.meta?.type === "account" &&
-                    !options?.ignorePrivateTransactions
-                ) {
-                    newContent = new Account(this);
-                } else {
-                    newContent = new Group(this, options);
-                }
-            } else {
-                newContent = new CoMap(this);
-            }
-        } else if (this.header.type === "colist") {
-            newContent = new CoList(this);
-        } else if (this.header.type === "costream") {
-            if (this.header.meta && this.header.meta.type === "binary") {
-                newContent = new BinaryCoStream(this);
-            } else {
-                newContent = new CoStream(this);
-            }
-        } else {
-            throw new Error(`Unknown coValue type ${this.header.type}`);
-        }
+        const newContent = coreToCoValue(this, options);
 
         if (!options?.ignorePrivateTransactions) {
             this._cachedContent = newContent;
@@ -561,7 +530,7 @@ export class CoValueCore {
                     return {
                         txID,
                         madeAt: tx.madeAt,
-                        changes: tx.changes,
+                        changes: parseJSON(tx.changes),
                     };
                 } else {
                     if (options?.ignorePrivateTransactions) {
@@ -576,14 +545,15 @@ export class CoValueCore {
                             this._decryptionCache[tx.encryptedChanges];
 
                         if (!decrytedChanges) {
-                            decrytedChanges = decryptRawForTransaction(
+                            const decryptedString = decryptRawForTransaction(
                                 tx.encryptedChanges,
                                 readKey,
                                 {
                                     in: this.id,
                                     tx: txID,
                                 }
-                            );
+                            )
+                            decrytedChanges = decryptedString && parseJSON(decryptedString);
                             this._decryptionCache[tx.encryptedChanges] =
                                 decrytedChanges;
                         }

packages/cojson/src/coValues/account.ts

@@ -153,10 +153,6 @@ export class AnonymousControlledAccount
 export type AccountMeta = { type: "account" };
 export type AccountID = CoID<Account>;
 
-export function isAccountID(id: AccountID | AgentID): id is AccountID {
-    return id.startsWith("co_");
-}
-
 export type ProfileShape = {
     name: string;
 };

packages/cojson/src/coValues/coList.ts

@@ -1,9 +1,10 @@
 import { JsonObject, JsonValue } from "../jsonValue.js";
-import { CoID, CoValue, isCoValue } from "../coValue.js";
-import { CoValueCore, accountOrAgentIDfromSessionID } from "../coValueCore.js";
+import { CoID, CoValue } from "../coValue.js";
+import { isCoValue } from "../typeUtils/isCoValue.js";
+import { CoValueCore } from "../coValueCore.js";
+import { accountOrAgentIDfromSessionID } from "../typeUtils/accountOrAgentIDfromSessionID.js";
 import { AgentID, SessionID, TransactionID } from "../ids.js";
 import { AccountID } from "./account.js";
-import { parseJSON } from "../jsonStringify.js";
 import { Group } from "./group.js";
 
 type OpID = TransactionID & { changeIdx: number };
@@ -93,9 +94,7 @@ export class CoListView<
             changes,
             madeAt,
         } of this.core.getValidSortedTransactions()) {
-            for (const [changeIdx, changeUntyped] of parseJSON(
-                changes
-            ).entries()) {
+            for (const [changeIdx, changeUntyped] of changes.entries()) {
                 const change = changeUntyped as ListOpPayload<Item>;
 
                 if (change.op === "pre" || change.op === "app") {

packages/cojson/src/coValues/coMap.ts

@@ -1,10 +1,11 @@
 import { JsonObject, JsonValue } from "../jsonValue.js";
 import { AgentID, TransactionID } from "../ids.js";
-import { CoID, CoValue, isCoValue } from "../coValue.js";
-import { CoValueCore, accountOrAgentIDfromSessionID } from "../coValueCore.js";
+import { CoID, CoValue } from "../coValue.js";
+import { isCoValue } from "../typeUtils/isCoValue.js";
+import { CoValueCore } from "../coValueCore.js";
+import { accountOrAgentIDfromSessionID } from "../typeUtils/accountOrAgentIDfromSessionID.js";
 import { AccountID } from "./account.js";
-import { parseJSON } from "../jsonStringify.js";
-import { Group } from "./group.js";
+import type { Group } from "./group.js";
 
 type MapOp<K extends string, V extends JsonValue | undefined> = {
     txID: TransactionID;
@@ -58,9 +59,7 @@ export class CoMapView<
         for (const { txID, changes, madeAt } of core.getValidSortedTransactions(
             options
         )) {
-            for (const [changeIdx, changeUntyped] of parseJSON(
-                changes
-            ).entries()) {
+            for (const [changeIdx, changeUntyped] of changes.entries()) {
                 const change = changeUntyped as MapOpPayload<
                     keyof Shape & string,
                     Shape[keyof Shape & string]
@@ -121,7 +120,7 @@ export class CoMapView<
      * Get all keys currently in the map.
      *
      * @category 1. Reading */
-    keys<K extends (keyof Shape & string) = (keyof Shape & string)>(): K[] {
+    keys<K extends keyof Shape & string = keyof Shape & string>(): K[] {
         const keys = Object.keys(this.ops) as K[];
 
         if (this.atTimeFilter) {

packages/cojson/src/coValues/coStream.ts

@@ -1,11 +1,13 @@
 import { JsonObject, JsonValue } from "../jsonValue.js";
-import { CoValue, CoID, isCoValue } from "../coValue.js";
-import { CoValueCore, accountOrAgentIDfromSessionID } from "../coValueCore.js";
+import { CoValue, CoID } from "../coValue.js";
+import { isAccountID } from "../typeUtils/isAccountID.js";
+import { isCoValue } from "../typeUtils/isCoValue.js";
+import { CoValueCore } from "../coValueCore.js";
+import { accountOrAgentIDfromSessionID } from "../typeUtils/accountOrAgentIDfromSessionID.js";
 import { Group } from "./group.js";
 import { AgentID, SessionID, TransactionID } from "../ids.js";
 import { base64URLtoBytes, bytesToBase64url } from "../base64url.js";
-import { AccountID, isAccountID } from "./account.js";
-import { parseJSON } from "../jsonStringify.js";
+import { AccountID } from "./account.js";
 
 export type BinaryStreamInfo = {
     mimeType: string;
@@ -81,7 +83,7 @@ export class CoStreamView<
             madeAt,
             changes,
         } of this.core.getValidSortedTransactions()) {
-            for (const changeUntyped of parseJSON(changes)) {
+            for (const changeUntyped of changes) {
                 const change = changeUntyped as Item;
                 let entries = this.items[txID.sessionID];
                 if (!entries) {
@@ -291,7 +293,7 @@ export class BinaryCoStreamView<
     implements CoValue
 {
     getBinaryChunks(
-        allowUnfinished?: boolean
+        allowUnfinished?: boolean,
     ):
         | (BinaryStreamInfo & { chunks: Uint8Array[]; finished: boolean })
         | undefined {
@@ -316,6 +318,8 @@ export class BinaryCoStreamView<
         let finished = false;
         // let totalLength = 0;
 
+        let lastProgressUpdate = Date.now();
+
         for (const item of items.slice(1)) {
             if (item.type === "end") {
                 finished = true;
@@ -332,6 +336,10 @@ export class BinaryCoStreamView<
             );
             // totalLength += chunk.length;
             chunks.push(chunk);
+
+            if (Date.now() - lastProgressUpdate > 100) {
+                lastProgressUpdate = Date.now();
+            }
         }
 
         // const after = performance.now();
@@ -359,36 +367,55 @@ export class BinaryCoStream<
     /** @internal */
     push(
         item: BinaryStreamItem,
-        privacy: "private" | "trusting" = "private"
-    ): this {
+        privacy?: "private" | "trusting",
+    ): this
+    push(
+        item: BinaryStreamItem,
+        privacy: "private" | "trusting",
+        returnNewStream: true
+    ): this
+    push(
+        item: BinaryStreamItem,
+        privacy: "private" | "trusting",
+        returnNewStream: false
+    ): void
+    push(
+        item: BinaryStreamItem,
+        privacy: "private" | "trusting" = "private",
+        returnNewStream: boolean = true
+    ): this | void {
         this.core.makeTransaction([item], privacy);
-        return new BinaryCoStream(this.core) as this;
+        if (returnNewStream) {
+            return new BinaryCoStream(this.core) as this;
+        }
     }
 
     startBinaryStream(
         settings: BinaryStreamInfo,
         privacy: "private" | "trusting" = "private"
-    ): this {
+    ): void {
         return this.push(
             {
                 type: "start",
                 ...settings,
             } satisfies BinaryStreamStart,
-            privacy
+            privacy,
+            false
         );
     }
 
     pushBinaryStreamChunk(
         chunk: Uint8Array,
         privacy: "private" | "trusting" = "private"
-    ): this {
+    ): void {
         // const before = performance.now();
         return this.push(
             {
                 type: "chunk",
                 chunk: `binary_U${bytesToBase64url(chunk)}`,
             } satisfies BinaryStreamChunk,
-            privacy
+            privacy,
+            false
         );
         // const after = performance.now();
         // console.log(
@@ -402,7 +429,8 @@ export class BinaryCoStream<
             {
                 type: "end",
             } satisfies BinaryStreamEnd,
-            privacy
+            privacy,
+            true
         );
     }
 

packages/cojson/src/coValues/group.ts

@@ -1,4 +1,4 @@
-import { CoID, CoValue, expectMap } from "../coValue.js";
+import { CoID } from "../coValue.js";
 import { CoMap } from "./coMap.js";
 import { CoList } from "./coList.js";
 import { JsonObject } from "../jsonValue.js";
@@ -39,19 +39,6 @@ export type GroupShape<P extends Profile, R extends CoMap> = {
     >;
 };
 
-export function expectGroup(content: CoValue): Group {
-    const map = expectMap(content);
-    if (map.core.header.ruleset.type !== "group") {
-        throw new Error("Expected group ruleset in group");
-    }
-
-    if (!(map instanceof Group)) {
-        throw new Error("Expected group");
-    }
-
-    return map;
-}
-
 /** A `Group` is a scope for permissions of its members (`"reader" | "writer" | "admin"`), applying to objects owned by that group.
  *
  *  A `Group` object exposes methods for permission management and allows you to create new CoValues owned by that group.

packages/cojson/src/coreToCoValue.ts

@@ -0,0 +1,37 @@
+import type { CoValueCore } from "./coValueCore.js";
+import { Account } from "./coValues/account.js";
+import { Group } from "./coValues/group.js";
+import { CoMap } from "./coValues/coMap.js";
+import { CoList } from "./coValues/coList.js";
+import { CoStream } from "./coValues/coStream.js";
+import { BinaryCoStream } from "./coValues/coStream.js";
+
+export function coreToCoValue(
+    core: CoValueCore,
+    options?: { ignorePrivateTransactions: true }
+) {
+    if (core.header.type === "comap") {
+        if (core.header.ruleset.type === "group") {
+            if (
+                core.header.meta?.type === "account" &&
+                !options?.ignorePrivateTransactions
+            ) {
+                return new Account(core);
+            } else {
+                return new Group(core, options);
+            }
+        } else {
+            return new CoMap(core);
+        }
+    } else if (core.header.type === "colist") {
+        return new CoList(core);
+    } else if (core.header.type === "costream") {
+        if (core.header.meta && core.header.meta.type === "binary") {
+            return new BinaryCoStream(core);
+        } else {
+            return new CoStream(core);
+        }
+    } else {
+        throw new Error(`Unknown coValue type ${core.header.type}`);
+    }
+}

packages/cojson/src/index.ts

@@ -2,8 +2,8 @@ import {
     CoValueCore,
     newRandomSessionID,
     MAX_RECOMMENDED_TX_SIZE,
-    accountOrAgentIDfromSessionID,
 } from "./coValueCore.js";
+import { accountOrAgentIDfromSessionID } from "./typeUtils/accountOrAgentIDfromSessionID.js";
 import { LocalNode } from "./localNode.js";
 import type { CoValue } from "./coValue.js";
 import { CoMap, MutableCoMap } from "./coValues/coMap.js";
@@ -32,11 +32,13 @@ import {
 } from "./coValues/account.js";
 import type { Role } from "./permissions.js";
 import { rawCoIDtoBytes, rawCoIDfromBytes } from "./ids.js";
-import { Group, expectGroup, EVERYONE } from "./coValues/group.js";
+import { Group, EVERYONE } from "./coValues/group.js";
 import type { Everyone } from "./coValues/group.js";
 import { base64URLtoBytes, bytesToBase64url } from "./base64url.js";
 import { parseJSON } from "./jsonStringify.js";
-import { Account, Profile, isAccountID } from "./coValues/account.js";
+import { Account, Profile } from "./coValues/account.js";
+import { expectGroup } from "./typeUtils/expectGroup.js";
+import { isAccountID } from "./typeUtils/isAccountID.js";
 
 import type { SessionID, AgentID } from "./ids.js";
 import type { CoID, AnyCoValue } from "./coValue.js";

packages/cojson/src/localNode.ts

@@ -17,7 +17,6 @@ import {
 import {
     InviteSecret,
     Group,
-    expectGroup,
     secretSeedFromInviteSecret,
 } from "./coValues/group.js";
 import { Peer, SyncManager } from "./sync.js";
@@ -36,6 +35,7 @@ import {
 } from "./coValues/account.js";
 import { CoMap } from "./coValues/coMap.js";
 import { CoValue } from "./index.js";
+import { expectGroup } from "./typeUtils/expectGroup.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).
 
@@ -199,10 +199,10 @@ export class LocalNode {
     }
 
     /** @internal */
-    loadCoValue(id: RawCoID): Promise<CoValueCore> {
+    loadCoValue(id: RawCoID, onProgress?: (progress: number) => void): Promise<CoValueCore> {
         let entry = this.coValues[id];
         if (!entry) {
-            entry = newLoadingState();
+            entry = newLoadingState(onProgress);
 
             this.coValues[id] = entry;
 
@@ -221,8 +221,8 @@ export class LocalNode {
      *
      * @category 3. Low-level
      */
-    async load<T extends CoValue>(id: CoID<T>): Promise<T> {
-        return (await this.loadCoValue(id)).getCurrentContent() as T;
+    async load<T extends CoValue>(id: CoID<T>, onProgress?: (progress: number) => void): Promise<T> {
+        return (await this.loadCoValue(id, onProgress)).getCurrentContent() as T;
     }
 
     /** @category 3. Low-level */
@@ -577,11 +577,12 @@ type CoValueState =
           state: "loading";
           done: Promise<CoValueCore>;
           resolve: (coValue: CoValueCore) => void;
+          onProgress?: (progress: number) => void;
       }
-    | { state: "loaded"; coValue: CoValueCore };
+    | { state: "loaded"; coValue: CoValueCore; onProgress?: (progress: number) => void; };
 
 /** @internal */
-export function newLoadingState(): CoValueState {
+export function newLoadingState(onProgress?: (progress: number) => void): CoValueState {
     let resolve: (coValue: CoValueCore) => void;
 
     const promise = new Promise<CoValueCore>((r) => {
@@ -592,5 +593,6 @@ export function newLoadingState(): CoValueState {
         state: "loading",
         done: promise,
         resolve: resolve!,
+        onProgress
     };
 }

packages/cojson/src/permissions.ts

@@ -5,12 +5,13 @@ import { KeyID } from "./crypto.js";
 import {
     CoValueCore,
     Transaction,
-    accountOrAgentIDfromSessionID,
 } from "./coValueCore.js";
+import { accountOrAgentIDfromSessionID } from "./typeUtils/accountOrAgentIDfromSessionID.js";
 import { AgentID, RawCoID, SessionID, TransactionID } from "./ids.js";
 import { Account, AccountID, Profile } from "./coValues/account.js";
 import { parseJSON } from "./jsonStringify.js";
-import { EVERYONE, Everyone, expectGroup } from "./coValues/group.js";
+import { EVERYONE, Everyone } from "./coValues/group.js";
+import { expectGroup } from "./typeUtils/expectGroup.js";
 
 export type PermissionsDef =
     | { type: "group"; initialAdmin: AccountID | AgentID }

packages/cojson/src/sync.ts

@@ -225,12 +225,19 @@ export class SyncManager {
                 peer.optimisticKnownStates[id] || emptyKnownState(id);
 
             const sendPieces = async () => {
+                let lastYield = performance.now();
                 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);
+                    if (performance.now() - lastYield > 10) {
+                        await new Promise<void>((resolve) => {
+                            setTimeout(resolve, 0);
+                        });
+                        lastYield = performance.now();
+                    }
                 }
             };
 
@@ -315,19 +322,20 @@ export class SyncManager {
 
     trySendToPeer(peer: PeerState, msg: SyncMessage) {
         return new Promise<void>((resolve) => {
-            const timeout = setTimeout(() => {
-                console.error(
-                    new Error(
-                        `Writing to peer ${peer.id} took >1s - this should never happen as write should resolve quickly or error`
-                    )
-                );
-                resolve();
-            }, 1000);
+            const start = Date.now()
             peer.outgoing
                 .write(msg)
                 .then(() => {
-                    clearTimeout(timeout);
-                    resolve();
+                    const end = Date.now();
+                    if (end - start > 1000) {
+                        console.error(
+                            new Error(
+                                `Writing to peer "${peer.id}" took ${Math.round((Date.now() - start)/100)/10}s - this should never happen as write should resolve quickly or error`
+                            )
+                        );
+                    } else {
+                        resolve();
+                    }
                 })
                 .catch((e) => {
                     console.error(
@@ -450,6 +458,7 @@ export class SyncManager {
             entry = {
                 state: "loaded",
                 coValue: coValue,
+                onProgress: entry.onProgress
             };
 
             this.local.coValues[msg.id] = entry;
@@ -509,6 +518,11 @@ export class SyncManager {
                 );
             }
 
+            const theirTotalnTxs = Object.values(peer.optimisticKnownStates[msg.id]?.sessions || {}).reduce((sum, nTxs) => sum + nTxs, 0);
+            const ourTotalnTxs = Object.values(coValue.sessions).reduce((sum, session) => sum + session.transactions.length, 0);
+
+            entry.onProgress?.(ourTotalnTxs / theirTotalnTxs);
+
             if (!success) {
                 console.error(
                     "Failed to add transactions",
@@ -522,9 +536,9 @@ export class SyncManager {
                 continue;
             }
 
-            peerOptimisticKnownState.sessions[sessionID] =
+            peerOptimisticKnownState.sessions[sessionID] = Math.max(peerOptimisticKnownState.sessions[sessionID] || 0,
                 newContentForSession.after +
-                newContentForSession.newTransactions.length;
+                newContentForSession.newTransactions.length);
         }
 
         if (resolveAfterDone) {

packages/cojson/src/tests/testUtils.ts

@@ -1,7 +1,7 @@
 import { AgentSecret, createdNowUnique, getAgentID, newRandomAgentSecret  } from "../crypto.js";
 import { newRandomSessionID } from "../coValueCore.js";
 import { LocalNode } from "../localNode.js";
-import { expectGroup } from "../coValues/group.js";
+import { expectGroup } from "../typeUtils/expectGroup.js";
 import { AnonymousControlledAccount } from "../coValues/account.js";
 import { SessionID } from "../ids.js";
 // @ts-ignore

packages/cojson/src/typeUtils/accountOrAgentIDfromSessionID.ts

@@ -0,0 +1,9 @@
+import { AgentID, SessionID } from "../ids.js";
+import { AccountID } from "../coValues/account.js";
+
+
+export function accountOrAgentIDfromSessionID(
+    sessionID: SessionID
+): AccountID | AgentID {
+    return sessionID.split("_session")[0] as AccountID | AgentID;
+}

packages/cojson/src/typeUtils/expectGroup.ts

@@ -0,0 +1,15 @@
+import { expectMap, type CoValue } from "../coValue.js";
+import { Group } from "../coValues/group.js";
+
+export function expectGroup(content: CoValue): Group {
+    const map = expectMap(content);
+    if (map.core.header.ruleset.type !== "group") {
+        throw new Error("Expected group ruleset in group");
+    }
+
+    if (!(map instanceof Group)) {
+        throw new Error("Expected group");
+    }
+
+    return map;
+}

packages/cojson/src/typeUtils/isAccountID.ts

@@ -0,0 +1,7 @@
+import type { AccountID } from "../coValues/account.js";
+import type { AgentID } from "../ids.js";
+
+
+export function isAccountID(id: AccountID | AgentID): id is AccountID {
+    return id.startsWith("co_");
+}

packages/cojson/src/typeUtils/isCoValue.ts

@@ -0,0 +1,18 @@
+import { type CoValue } from "../coValue.js";
+import type { JsonValue } from "../jsonValue.js";
+import { CoMap } from "../coValues/coMap.js";
+import { CoList } from "../coValues/coList.js";
+import { CoStream } from "../coValues/coStream.js";
+import { BinaryCoStream } from "../coValues/coStream.js";
+
+
+export function isCoValue(
+    value: JsonValue | CoValue | undefined
+): value is CoValue {
+    return (
+        value instanceof CoMap ||
+        value instanceof CoList ||
+        value instanceof CoStream ||
+        value instanceof BinaryCoStream
+    );
+}

packages/hashroute/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hashroute",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "main": "dist/index.js",
   "types": "src/index.tsx",
   "license": "MIT",

packages/jazz-autosub/package.json

@@ -5,9 +5,9 @@
     "types": "src/index.ts",
     "type": "module",
     "license": "MIT",
-    "version": "0.4.5",
+    "version": "0.4.13",
     "dependencies": {
-        "cojson": "^0.4.5"
+        "cojson": "^0.4.13"
     },
     "scripts": {
         "test": "jest",

packages/jazz-autosub/src/resolvedCoValues/resolvedCoMap.ts

@@ -1,5 +1,9 @@
 import { CoID, CoMap, Group, MutableCoMap, CojsonInternalTypes } from "cojson";
-import { ValueOrResolvedRef, AutoSubContext, AutoSubExtension } from "../autoSub.js";
+import {
+    ValueOrResolvedRef,
+    AutoSubContext,
+    AutoSubExtension,
+} from "../autoSub.js";
 import { ResolvedAccount } from "./resolvedAccount.js";
 
 export type ResolvedCoMap<M extends CoMap> = {
@@ -41,16 +45,14 @@ export class ResolvedCoMapBase<M extends CoMap> {
         coMap: M,
         autoSubContext: AutoSubContext
     ): ResolvedCoMap<M> {
-        const kv = {} as {
-            [K in keyof M["_shape"] & string]: ValueOrResolvedRef<M["_shape"][K]>;
-        };
+        const extendedCoMap = new ResolvedCoMapBase(coMap, autoSubContext) as ResolvedCoMap<M>;
         for (const key of coMap.keys()) {
             const value = coMap.get(key);
 
             if (value === undefined) continue;
 
             autoSubContext.defineResolvedRefPropertiesIn(
-                kv,
+                extendedCoMap,
                 {
                     [key]: { value, enumerable: true },
                 },
@@ -58,7 +60,7 @@ export class ResolvedCoMapBase<M extends CoMap> {
             );
         }
 
-        return Object.assign(new ResolvedCoMapBase(coMap, autoSubContext), kv);
+        return extendedCoMap;
     }
 
     /** @internal */
@@ -95,11 +97,15 @@ export class ResolvedCoMapBase<M extends CoMap> {
                             if (!lastEdit) return [];
                             // eslint-disable-next-line @typescript-eslint/no-explicit-any
                             const editsAtKey = {
-                                by: lastEdit.by,
+                                get by() {
+                                    return lastEdit.by;
+                                },
                                 tx: lastEdit.tx,
                                 at: lastEdit.at,
-                                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                                value: lastEdit.value as any,
+                                get value() {
+                                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                                    return lastEdit.value as any;
+                                },
                                 all: edits,
                             };
 

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

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

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

@@ -1,15 +1,15 @@
 {
   "name": "jazz-browser-media-images",
-  "version": "0.4.7",
+  "version": "0.4.14",
   "main": "dist/index.js",
   "types": "src/index.ts",
   "license": "MIT",
   "dependencies": {
     "@types/image-blob-reduce": "^4.1.1",
-    "cojson": "^0.4.5",
+    "cojson": "^0.4.13",
     "image-blob-reduce": "^4.1.0",
-    "jazz-autosub": "^0.4.5",
-    "jazz-browser": "^0.4.6",
+    "jazz-autosub": "^0.4.13",
+    "jazz-browser": "^0.4.14",
     "typescript": "^5.1.6"
   },
   "scripts": {

packages/jazz-browser/package.json

@@ -1,13 +1,13 @@
 {
   "name": "jazz-browser",
-  "version": "0.4.6",
+  "version": "0.4.14",
   "main": "dist/index.js",
   "types": "src/index.ts",
   "license": "MIT",
   "dependencies": {
-    "cojson": "^0.4.5",
-    "cojson-storage-indexeddb": "^0.4.5",
-    "jazz-autosub": "^0.4.5",
+    "cojson": "^0.4.13",
+    "cojson-storage-indexeddb": "^0.4.13",
+    "jazz-autosub": "^0.4.13",
     "typescript": "^5.1.6"
   },
   "scripts": {

packages/jazz-browser/src/index.ts

@@ -430,38 +430,52 @@ export async function createBinaryStreamFromBlob<
 >(
     blob: Blob | File,
     inGroup: Group | Resolved<Group>,
-    meta: C["headerMeta"] = { type: "binary" }
+    meta: C["headerMeta"] = { type: "binary" },
+    onProgress?: (progress: number) => void
 ): Promise<C> {
     let stream = inGroup.createBinaryStream(meta);
 
+    const start = Date.now();
+
     const reader = new FileReader();
     const done = new Promise<void>((resolve) => {
         reader.onload = async () => {
             const data = new Uint8Array(reader.result as ArrayBuffer);
-            stream = stream.edit((stream) => {
-                stream.startBinaryStream({
-                    mimeType: blob.type,
-                    totalSizeBytes: blob.size,
-                    fileName: blob instanceof File ? blob.name : undefined,
-                });
-            }) as C; // TODO: fix this
+            stream.startBinaryStream({
+                mimeType: blob.type,
+                totalSizeBytes: blob.size,
+                fileName: blob instanceof File ? blob.name : undefined,
+            });
             const chunkSize = MAX_RECOMMENDED_TX_SIZE;
 
+            let lastProgressUpdate = Date.now();
+
             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
+                stream.pushBinaryStreamChunk(data.slice(idx, idx + chunkSize));
+
+                if (Date.now() - lastProgressUpdate > 100) {
+                    onProgress?.(idx / data.length);
+                    lastProgressUpdate = Date.now();
+                }
+
                 await new Promise((resolve) => setTimeout(resolve, 0));
             }
-            stream = stream.edit((stream) => {
-                stream.endBinaryStream();
-            }) as C; // TODO: fix this
+            stream = stream.endBinaryStream();
+            const end = Date.now();
+
+            console.debug(
+                "Finished creating binary stream in",
+                (end - start) / 1000,
+                "s - Throughput in MB/s",
+                (1000 * (blob.size / (end - start))) / (1024 * 1024)
+            );
+            onProgress?.(1);
             resolve();
         };
     });
-    reader.readAsArrayBuffer(blob);
+    setTimeout(() => {
+        reader.readAsArrayBuffer(blob);
+    });
 
     await done;
 
@@ -473,13 +487,10 @@ export async function readBlobFromBinaryStream<
 >(
     streamId: CoID<C>,
     node: LocalNode,
-    allowUnfinished?: boolean
+    allowUnfinished?: boolean,
+    onProgress?: (progress: number) => void
 ): Promise<Blob | undefined> {
-    const stream = await node.load<C>(streamId);
-
-    if (!stream) {
-        return undefined;
-    }
+    const stream = await node.load<C>(streamId, onProgress);
 
     const chunks = stream.getBinaryChunks(allowUnfinished);
 

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

@@ -1,12 +1,12 @@
 {
     "name": "jazz-react-auth-local",
-    "version": "0.4.6",
+    "version": "0.4.14",
     "main": "dist/index.js",
     "types": "src/index.tsx",
     "license": "MIT",
     "dependencies": {
-        "jazz-browser-auth-local": "^0.4.6",
-        "jazz-react": "^0.4.6",
+        "jazz-browser-auth-local": "^0.4.14",
+        "jazz-react": "^0.4.14",
         "typescript": "^5.1.6"
     },
     "devDependencies": {

packages/jazz-react/package.json

@@ -1,12 +1,12 @@
 {
   "name": "jazz-react",
-  "version": "0.4.6",
+  "version": "0.4.14",
   "main": "dist/index.js",
   "types": "src/index.ts",
   "license": "MIT",
   "dependencies": {
-    "cojson": "^0.4.5",
-    "jazz-browser": "^0.4.6",
+    "cojson": "^0.4.13",
+    "jazz-browser": "^0.4.14",
     "typescript": "^5.1.6"
   },
   "devDependencies": {

yarn.lock

@@ -7475,11 +7475,6 @@ readdirp@~3.6.0:
   dependencies:
     picomatch "^2.2.1"
 
-recordrtc@^5.6.2:
-  version "5.6.2"
-  resolved "https://registry.yarnpkg.com/recordrtc/-/recordrtc-5.6.2.tgz#48fc214b35084973ccce82c6251198b5742bc327"
-  integrity sha512-1QNKKNtl7+KcwD1lyOgP3ZlbiJ1d0HtXnypUy7yq49xEERxk31PHvE9RCciDrulPCY7WJ+oz0R9hpNxgsIurGQ==
-
 redent@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/redent/-/redent-3.0.0.tgz#e557b7998316bb53c9f1f56fa626352c6963059f"