Release

Auth refactor & Clerk integration

.changeset/config.json

@@ -9,6 +9,8 @@
             "jazz-tools",
             "jazz-browser",
             "jazz-browser-media-images",
+            "jazz-browser-auth-clerk",
+            "jazz-react-auth-clerk",
             "jazz-react",
             "jazz-nodejs",
             "jazz-run",
@@ -20,5 +22,8 @@
     "access": "public",
     "baseBranch": "main",
     "updateInternalDependencies": "patch",
-    "ignore": []
+    "ignore": [],
+    "___experimentalUnsafeOptions_WILL_CHANGE_IN_PATCH": {
+        "onlyUpdatePeerDependentsWhenOutOfRange": true
+    }
 }

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

@@ -17,15 +17,32 @@ jobs:
       with:
         submodules: true
 
-    - uses: pnpm/action-setup@v2
-      with:
-        version: 8
+    - name: Enable corepack
+      run: corepack enable
 
-    - uses: actions/setup-node@v3
+    - name: Install Node.js
+      uses: actions/setup-node@v3
       with:
-        node-version: 16
+        node-version-file: '.node-version'
         cache: 'pnpm'
 
+    - name: Get pnpm store directory
+      shell: bash
+      run: |
+        echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+
+    - uses: actions/cache@v3
+      name: Setup pnpm cache
+      with:
+        path: ${{ env.STORE_PATH }}
+        key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+        restore-keys: |
+          ${{ runner.os }}-pnpm-store-
+      
+    
+    - name: Install dependencies
+      run: pnpm install --frozen-lockfile
+
     - name: Set up Docker Buildx
       uses: docker/setup-buildx-action@v2
 

.github/workflows/monorepo-linting.yml

@@ -0,0 +1,21 @@
+name: Monorepo linting
+
+on:
+  pull_request:
+    types: [opened, synchronize, reopened]
+
+jobs:
+  monorepo-linting:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Install Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version-file: '.node-version'
+
+      - name: Run sherif
+        run: npx sherif@1.0.0

.github/workflows/playwright.yml

@@ -0,0 +1,64 @@
+name: Playwright Tests
+
+on:
+  push:
+    branches: ["main"]
+  pull_request:
+    types: [opened, synchronize, reopened]
+
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        project: ["e2e/BinaryCoStream", "examples/pets"]
+
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          submodules: true
+
+      - name: Enable corepack
+        run: corepack enable
+
+      - name: Install Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version-file: '.node-version'
+          cache: 'pnpm'
+
+      - name: Get pnpm store directory
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+
+      - uses: actions/cache@v3
+        name: Setup pnpm cache
+        with:
+          path: ${{ env.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+      
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Pnpm Build
+        run: pnpm turbo build;
+        working-directory: ./${{ matrix.project }}
+
+      - name: Install Playwright Browsers
+        run: pnpm exec playwright install --with-deps
+        working-directory: ./${{ matrix.project }}
+
+      - name: Run Playwright tests
+        run: pnpm exec playwright test
+        working-directory: ./${{ matrix.project }}
+
+      - uses: actions/upload-artifact@v4
+        if: failure()
+        with:
+          name: ${{ hashFiles(format('{0}/package.json', matrix.project)) }}-playwright-report
+          path: ./${{ matrix.project }}/playwright-report/
+          retention-days: 30

.github/workflows/unit-test.yml

@@ -0,0 +1,47 @@
+name: Unit Tests
+
+on:
+  pull_request:
+    types: [opened, synchronize, reopened]
+  push:
+    branches:
+      - 'main'
+
+jobs:
+  unit-tests:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Enable corepack
+        run: corepack enable
+
+      - name: Install Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version-file: '.node-version'
+          cache: 'pnpm'
+
+      - name: Get pnpm store directory
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+
+      - uses: actions/cache@v3
+        name: Setup pnpm cache
+        with:
+          path: ${{ env.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Pnpm Build
+        run: pnpm turbo build;
+
+      - name: Unit Tests
+        run: pnpm test

.gitignore

@@ -3,4 +3,5 @@ yarn-error.log
 lerna-debug.log
 docsTmp
 .DS_Store
-.turbo
+.turbo
+coverage

.node-version

@@ -0,0 +1 @@
+20

e2e/BinaryCoStream/.gitignore

@@ -23,5 +23,8 @@ dist-ssr
 *.sln
 *.sw?
 
-.env
-TwitAllTwitsCreatorCredentials.json
+sync-db/
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

e2e/BinaryCoStream/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@jazz-e2e/binarycostream",
+  "private": true,
+  "version": "0.0.81",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "test": "playwright test",
+    "test:ui": "playwright test --ui"
+  },
+  "lint-staged": {
+    "*.{js,jsx,mdx,json}": "prettier --write"
+  },
+  "dependencies": {
+    "cojson": "workspace:0.7.35-guest-auth.5",
+    "hash-slash": "workspace:0.2.0",
+    "is-ci": "^3.0.1",
+    "jazz-react": "workspace:0.7.35-guest-auth.6",
+    "jazz-tools": "workspace:0.7.35-guest-auth.6",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.46.1",
+    "@types/node": "^22.5.1",
+    "@types/react": "^18.2.19",
+    "@types/react-dom": "^18.2.7",
+    "@vitejs/plugin-react-swc": "^3.3.2",
+    "typescript": "^5.3.3",
+    "vite": "^5.0.10"
+  }
+}

e2e/BinaryCoStream/playwright.config.ts

@@ -0,0 +1,49 @@
+import { defineConfig, devices } from "@playwright/test";
+import isCI from "is-ci";
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// import dotenv from 'dotenv';
+// dotenv.config({ path: path.resolve(__dirname, '.env') });
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+    testDir: "./tests",
+    /* Run tests in files in parallel */
+    fullyParallel: true,
+    /* Fail the build on CI if you accidentally left test.only in the source code. */
+    forbidOnly: isCI,
+    /* Retry on CI only */
+    retries: isCI ? 2 : 0,
+    /* Opt out of parallel tests on CI. */
+    workers: isCI ? 1 : undefined,
+    /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+    reporter: "html",
+
+    /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+    use: {
+        /* Base URL to use in actions like `await page.goto('/')`. */
+        baseURL: isCI ? "http://localhost:4173/" : "http://localhost:5173",
+
+        /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+        trace: "on-first-retry",
+    },
+
+    /* Configure projects for major browsers */
+    projects: [
+        {
+            name: "chromium",
+            use: { ...devices["Desktop Chrome"] },
+        },
+    ],
+
+    /* Run your local dev server before starting the tests */
+    webServer: isCI ? {
+        command: "pnpm preview",
+        url: "http://localhost:4173/",
+    } : undefined,
+});

e2e/BinaryCoStream/src/DownloaderPeer.tsx

@@ -0,0 +1,42 @@
+import { Account, BinaryCoStream, ID } from "jazz-tools";
+import { useEffect } from "react";
+import { useAccount, useCoState } from "./jazz";
+import { UploadedFile } from "./schema";
+import { waitForCoValue } from "./lib/waitForCoValue";
+
+async function getUploadedFile(
+  me: Account,
+  uploadedFileId: ID<UploadedFile>) {
+  const uploadedFile = await waitForCoValue(UploadedFile, uploadedFileId, me, Boolean, {})
+
+  uploadedFile.coMapDownloaded = true;
+
+  await BinaryCoStream.loadAsBlob(uploadedFile._refs.file.id, me);
+
+  return uploadedFile;
+}
+
+export function DownloaderPeer(props: { testCoMapId: ID<UploadedFile> }) {
+  const account = useAccount();
+  const testCoMap = useCoState(UploadedFile, props.testCoMapId, {});
+
+  useEffect(() => {
+    getUploadedFile(account.me, props.testCoMapId).then(value => {
+      value.syncCompleted = true;
+    });
+  }, []);
+
+  return (
+    <>
+      <h1>Downloader Peer</h1>
+      <div>Fetching: {props.testCoMapId}</div>
+      <div data-testid="result">
+        Covalue: {Boolean(testCoMap?.id) ? "Downloaded" : "Not Downloaded"}
+      </div>
+      <div data-testid="result">
+        File:{" "}
+        {Boolean(testCoMap?.syncCompleted) ? "Downloaded" : "Not Downloaded"}
+      </div>
+    </>
+  );
+}

e2e/BinaryCoStream/src/UploaderPeer.tsx

@@ -0,0 +1,86 @@
+import { ID } from "jazz-tools";
+import { useEffect, useState } from "react";
+import { useAccount, useCoState } from "./jazz";
+import { createCredentiallessIframe } from "./lib/createCredentiallessIframe";
+import { generateTestFile } from "./lib/generateTestFile";
+import { getDownloaderPeerUrl } from "./lib/getDownloaderPeerUrl";
+import { UploadedFile } from "./schema";
+import { waitForCoValue } from "./lib/waitForCoValue";
+import { getDefaultFileSize, getIsAutoUpload } from "./lib/searchParams";
+import { BytesRadioGroup } from "./lib/BytesRadioGroup";
+
+export function UploaderPeer() {
+  const account = useAccount();
+  const [uploadedFileId, setUploadedFileId] = useState<
+    ID<UploadedFile> | undefined
+  >(undefined);
+  const [syncDuration, setSyncDuration] = useState<number | null>(null);
+  const [bytes, setBytes] = useState(getDefaultFileSize);
+
+  const testFile = useCoState(UploadedFile, uploadedFileId, {});
+
+  async function uploadTestFile() {
+    if (!account) return;
+
+    // Mark the sync start
+    performance.mark("sync-start");
+
+    const file = await generateTestFile(account.me, bytes);
+
+    // Create a credential-less iframe to spawn the downloader peer
+    const iframe = createCredentiallessIframe(getDownloaderPeerUrl(file));
+    document.body.appendChild(iframe);
+
+    setSyncDuration(null);
+    setUploadedFileId(file.id);
+
+    // The downloader peer will set the syncCompleted to true when the download is complete.
+    // We use this to measure the sync duration.
+    await waitForCoValue(
+      UploadedFile,
+      file.id,
+      account.me,
+      (value) => value.syncCompleted,
+      {}
+    );
+
+    iframe.remove();
+
+    // Calculate the sync duration
+    performance.mark("sync-end");
+    const measure = performance.measure("sync", "sync-start", "sync-end");
+    setSyncDuration(measure.duration);
+  }
+
+  useEffect(() => {
+    if (getIsAutoUpload()) {
+      uploadTestFile();
+    }
+  }, []);
+
+  return (
+    <>
+      <BytesRadioGroup selectedValue={bytes} onChange={setBytes} />
+
+      <button onClick={uploadTestFile}>Upload Test File</button>
+      {uploadedFileId && <div>{uploadedFileId}</div>}
+      {syncDuration && (
+        <div data-testid="sync-duration">
+          Sync Duration: {syncDuration.toFixed(2)}ms
+        </div>
+      )}
+      {uploadedFileId && (
+        <div data-testid="result">
+          Sync Completed: {String(Boolean(syncDuration))}
+        </div>
+      )}
+      {testFile?.coMapDownloaded && (
+        <div data-testid="co-map-downloaded">
+          CoMap synced!
+        </div>
+      )}
+    </>
+  );
+}
+
+

e2e/BinaryCoStream/src/app.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import { DownloaderPeer } from "./DownloaderPeer";
+import { UploaderPeer } from "./UploaderPeer";
+import { getValueId } from "./lib/searchParams";
+import { AuthAndJazz } from "./jazz";
+
+function Main() {
+  const valueId = getValueId();
+
+  if (valueId) {
+    return <DownloaderPeer testCoMapId={valueId} />;
+  }
+
+  return <UploaderPeer />;
+}
+
+ReactDOM.createRoot(document.getElementById("root")!).render(
+  <React.StrictMode>
+      <AuthAndJazz>
+          <Main />
+      </AuthAndJazz>
+  </React.StrictMode>,
+);

e2e/BinaryCoStream/src/jazz.tsx

@@ -0,0 +1,28 @@
+import { createJazzReactApp } from "jazz-react";
+import { getValueId } from "./lib/searchParams";
+import { ephemeralCredentialsAuth } from "jazz-tools";
+import { useState } from "react";
+
+const key = getValueId()
+  ? `downloader-e2e@jazz.tools`
+  : `uploader-e2e@jazz.tools`;
+
+const localSync = new URLSearchParams(location.search).has("localSync");
+
+const Jazz = createJazzReactApp();
+
+export const { useAccount, useCoState } = Jazz;
+
+export function AuthAndJazz({ children }: { children: React.ReactNode }) {
+  const [ephemeralAuth] = useState(ephemeralCredentialsAuth())
+
+  return (
+    <Jazz.Provider auth={ephemeralAuth} peer={
+      localSync
+        ? `ws://localhost:4200?key=${key}`
+        : `wss://mesh.jazz.tools/?key=${key}`
+    }>
+      {children}
+    </Jazz.Provider>
+  );
+}

e2e/BinaryCoStream/src/lib/BytesRadioGroup.tsx

@@ -0,0 +1,67 @@
+export function BytesRadioGroup(props: {
+  selectedValue: number;
+  onChange: (value: number) => void;
+}) {
+  return (
+    <p>
+    <BytesRadioInput
+      label="1KB"
+      value={1e3}
+      selectedValue={props.selectedValue}
+      onChange={props.onChange} />
+    <BytesRadioInput
+      label="10KB"
+      value={1e4}
+      selectedValue={props.selectedValue}
+      onChange={props.onChange} />
+      <BytesRadioInput
+        label="100KB"
+        value={1e5}
+        selectedValue={props.selectedValue}
+        onChange={props.onChange} />
+      <BytesRadioInput
+        label="150KB"
+        value={1e5 + 5e4}
+        selectedValue={props.selectedValue}
+        onChange={props.onChange} />
+      <BytesRadioInput
+        label="200KB"
+        value={2e6}
+        selectedValue={props.selectedValue}
+        onChange={props.onChange} />
+      <BytesRadioInput
+        label="500KB"
+        value={5e6}
+        selectedValue={props.selectedValue}
+        onChange={props.onChange} />
+      <BytesRadioInput
+        label="1MB"
+        value={1e6}
+        selectedValue={props.selectedValue}
+        onChange={props.onChange} />
+      <BytesRadioInput
+        label="10MB"
+        value={1e7}
+        selectedValue={props.selectedValue}
+        onChange={props.onChange} />
+    </p>
+  );
+}
+function BytesRadioInput(props: {
+  label: string;
+  value: number;
+  selectedValue: number;
+  onChange: (value: number) => void;
+}) {
+  return (
+    <label>
+      <input
+        type="radio"
+        name="bytes"
+        value={props.value}
+        checked={props.value === props.selectedValue}
+        onChange={() => props.onChange(props.value)} />
+      {props.label}
+    </label>
+  );
+}

e2e/BinaryCoStream/src/lib/createCredentiallessIframe.ts

@@ -0,0 +1,21 @@
+/**
+ * Creates a credentialess iframe that can be used to test the sync
+ * in an isolated environment. (no storage sharing)
+ *
+ * see: https://developer.mozilla.org/en-US/docs/Web/Security/IFrame_credentialless
+ */
+export function createCredentiallessIframe(url: string) {
+  const iframe = document.createElement("iframe");
+  // @ts-ignore
+  iframe.credentialless = true;
+  iframe.src = url;
+  iframe.style.width = "300px";
+  iframe.style.height = "300px";
+  iframe.style.border = "1px solid black";
+  iframe.style.position = "absolute";
+  iframe.style.top = "0";
+  iframe.style.right = "0";
+  iframe.setAttribute("data-testid", "downloader-peer");
+
+  return iframe;
+}

e2e/BinaryCoStream/src/lib/generateTestFile.ts

@@ -0,0 +1,27 @@
+import { Account, Group, BinaryCoStream } from "jazz-tools";
+import { UploadedFile } from "../schema";
+
+export async function generateTestFile(me: Account, bytes: number) {
+  const group = Group.create({ owner: me });
+  group.addMember("everyone", "writer");
+
+  const ownership = { owner: group };
+  const testFile = UploadedFile.create(
+    {
+      file: await BinaryCoStream.createFromBlob(
+        new Blob(['1'.repeat(bytes)], { type: 'image/png' }),
+        ownership
+      ),
+      syncCompleted: false,
+      coMapDownloaded: false,
+    },
+    ownership
+  );
+
+  const url = new URL(window.location.href);
+
+  url.searchParams.set("valueId", testFile.id);
+
+  return testFile;
+}
+

e2e/BinaryCoStream/src/lib/getDownloaderPeerUrl.ts

@@ -0,0 +1,8 @@
+import { UploadedFile } from "src/schema";
+
+
+export function getDownloaderPeerUrl(value: UploadedFile) {
+  const url = new URL(window.location.href);
+  url.searchParams.set("valueId", value.id);
+  return url.toString();
+}

e2e/BinaryCoStream/src/lib/searchParams.ts

@@ -0,0 +1,14 @@
+import { ID } from "jazz-tools";
+import { UploadedFile } from "../schema";
+
+export function getValueId() {
+    return new URLSearchParams(location.search).get("valueId") as ID<UploadedFile> | undefined ?? undefined;
+}
+
+export function getIsAutoUpload() {
+    return new URLSearchParams(location.search).has("auto");
+}
+
+export function getDefaultFileSize() {
+    return parseInt(new URLSearchParams(location.search).get("fileSize") ?? 1e3.toString());
+}

e2e/BinaryCoStream/src/lib/waitForCoValue.ts

@@ -0,0 +1,39 @@
+import {
+  Account,
+  CoValue,
+  CoValueClass,
+  DepthsIn,
+  ID,
+  subscribeToCoValue,
+} from "jazz-tools";
+
+export function waitForCoValue<T extends CoValue>(
+  coMap: CoValueClass<T>,
+  valueId: ID<T>,
+  account: Account,
+  predicate: (value: T) => boolean,
+  depth: DepthsIn<T>
+) {
+  return new Promise<T>((resolve) => {
+    function subscribe() {
+      const unsubscribe = subscribeToCoValue(
+        coMap,
+        valueId,
+        account,
+        depth,
+        (value) => {
+          if (predicate(value)) {
+            resolve(value);
+            unsubscribe();
+          }
+        },
+        () => {
+          unsubscribe();
+          setTimeout(subscribe, 100);
+        }
+      );
+    }
+
+    subscribe();
+  });
+}

e2e/BinaryCoStream/src/schema.tsx

@@ -0,0 +1,7 @@
+import { BinaryCoStream, co, CoMap } from "jazz-tools";
+
+export class UploadedFile extends CoMap {
+  file = co.ref(BinaryCoStream);
+  syncCompleted = co.boolean;
+  coMapDownloaded = co.boolean;
+}

e2e/BinaryCoStream/tests/sync.spec.ts

@@ -0,0 +1,36 @@
+import { test, expect } from "@playwright/test";
+import { setTimeout } from "node:timers/promises";
+
+test.describe("BinaryCoStream - Sync", () => {
+  test("should sync a file between the two peers", async ({ page }) => {
+    await page.goto("/");
+
+    await page.getByRole("button", { name: "Upload Test File" }).click();
+
+    await page.getByTestId("sync-duration").waitFor();
+
+    await expect(page.getByTestId("result")).toHaveText("Sync Completed: true");
+  });
+
+  test("should handle reconnections", async ({ page, browser }) => {
+    const context = browser.contexts()[0];
+    await page.goto("/?fileSize=" + 1e6); // 1MB file
+
+    await page.getByRole("button", { name: "Upload Test File" }).click();
+
+    // Wait for the coMapDonwloaded signal to ensure that the iframe is loaded
+    await page.getByTestId("co-map-downloaded").waitFor();
+
+    await context.setOffline(true);
+
+    // Wait for the ping system to detect the offline state
+    await setTimeout(10000);
+
+    await context.setOffline(false);
+
+    // Wait for the sync to complete
+    await page.getByTestId("sync-duration").waitFor();
+
+    await expect(page.getByTestId("result")).toHaveText("Sync Completed: true");
+  });
+});

e2e/BinaryCoStream/tsconfig.json

@@ -19,11 +19,7 @@
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true,
-    "baseUrl": ".",
-    "paths": {
-      "@/*": ["./src/*"]
-    }
+    "baseUrl": "."
   },
   "include": ["src"],
-  "references": [{ "path": "./tsconfig.node.json" }]
 }

e2e/BinaryCoStream/vite.config.ts

@@ -1,15 +1,9 @@
 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/chat-clerk/.env

@@ -0,0 +1 @@
+VITE_CLERK_PUBLISHABLE_KEY=pk_test_ZXZpZGVudC1kYW5lLTg5LmNsZXJrLmFjY291bnRzLmRldiQ

examples/chat-clerk/.eslintrc.cjs

@@ -9,10 +9,5 @@ module.exports = {
   ignorePatterns: ['dist', '.eslintrc.cjs'],
   parser: '@typescript-eslint/parser',
   plugins: ['react-refresh'],
-  rules: {
-    'react-refresh/only-export-components': [
-      'warn',
-      { allowConstantExport: true },
-    ],
-  },
+  rules: {},
 }

examples/chat-clerk/CHANGELOG.md

@@ -0,0 +1,790 @@
+# jazz-example-chat
+
+## 0.0.80
+
+### Patch Changes
+
+- bcec3be: Implement Clerk auth method + example
+- Updated dependencies [6a147c2]
+- Updated dependencies [ad40b88]
+- Updated dependencies [23369dc]
+- Updated dependencies [c2b62a0]
+- Updated dependencies [bcec3be]
+- Updated dependencies [1a979b6]
+- Updated dependencies [bcec3be]
+- Updated dependencies [6ce2051]
+  - cojson@0.8.0
+  - jazz-tools@0.8.0
+  - jazz-react@0.8.0
+  - jazz-react-auth-clerk@0.8.0
+
+## 0.0.80-guest-auth.6
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-react@0.7.35-guest-auth.6
+  - jazz-tools@0.7.35-guest-auth.6
+  - jazz-react-auth-clerk@0.7.35-guest-auth.6
+
+## 0.0.80-guest-auth.5
+
+### Patch Changes
+
+- Updated dependencies
+  - cojson@0.7.35-guest-auth.5
+  - jazz-react@0.7.35-guest-auth.5
+  - jazz-react-auth-clerk@0.7.35-guest-auth.5
+  - jazz-tools@0.7.35-guest-auth.5
+
+## 0.0.80-guest-auth.4
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-react@0.7.35-guest-auth.4
+  - jazz-tools@0.7.35-guest-auth.4
+  - jazz-react-auth-clerk@0.7.35-guest-auth.4
+
+## 0.0.80-guest-auth.3
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-react@0.7.35-guest-auth.3
+  - jazz-tools@0.7.35-guest-auth.3
+  - jazz-react-auth-clerk@0.7.33-guest-auth.3
+
+## 0.0.80-unique.2
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.35-unique.2
+  - cojson@0.7.35-unique.2
+  - jazz-react@0.7.35-unique.2
+  - jazz-react-auth-clerk@0.7.33-unique.2
+
+## 0.0.80-new-auth.1
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-react@0.7.35-new-auth.1
+  - jazz-react-auth-clerk@0.7.33-new-auth.1
+
+## 0.0.80-new-auth.0
+
+### Patch Changes
+
+- Implement Clerk auth method + example
+- Updated dependencies
+- Updated dependencies
+  - jazz-react-auth-clerk@0.7.33-new-auth.0
+  - jazz-react@0.7.35-new-auth.0
+  - jazz-tools@0.7.35-new-auth.0
+
+## 0.0.79
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.32
+  - jazz-react@0.7.32
+
+## 0.0.78
+
+### Patch Changes
+
+- Updated dependencies
+  - cojson@0.7.31
+  - jazz-react@0.7.31
+  - jazz-tools@0.7.31
+
+## 0.0.77
+
+### Patch Changes
+
+- jazz-react@0.7.30
+
+## 0.0.76
+
+### Patch Changes
+
+- Updated dependencies
+  - cojson@0.7.29
+  - jazz-react@0.7.29
+  - jazz-tools@0.7.29
+
+## 0.0.75
+
+### Patch Changes
+
+- Updated dependencies
+  - cojson@0.7.28
+  - jazz-react@0.7.28
+  - jazz-tools@0.7.28
+
+## 0.0.74
+
+### Patch Changes
+
+- jazz-react@0.7.27
+
+## 0.0.73
+
+### Patch Changes
+
+- Updated dependencies
+  - cojson@0.7.26
+  - jazz-react@0.7.26
+  - jazz-tools@0.7.26
+
+## 0.0.72
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.25
+  - jazz-react@0.7.25
+
+## 0.0.71
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.24
+  - jazz-react@0.7.24
+
+## 0.0.70
+
+### Patch Changes
+
+- Updated dependencies
+  - cojson@0.7.23
+  - jazz-react@0.7.23
+  - jazz-tools@0.7.23
+
+## 0.0.69
+
+### Patch Changes
+
+- jazz-react@0.7.22
+
+## 0.0.68
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.21
+  - jazz-react@0.7.21
+
+## 0.0.67
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.20
+  - jazz-react@0.7.20
+
+## 0.0.66
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.19
+  - jazz-react@0.7.19
+
+## 0.0.65
+
+### Patch Changes
+
+- Updated dependencies
+  - cojson@0.7.18
+  - jazz-react@0.7.18
+  - jazz-tools@0.7.18
+
+## 0.0.64
+
+### Patch Changes
+
+- Updated dependencies
+  - cojson@0.7.17
+  - jazz-react@0.7.17
+  - jazz-tools@0.7.17
+
+## 0.0.63
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.16
+  - jazz-react@0.7.16
+
+## 0.0.62
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-react@0.7.15
+
+## 0.0.61
+
+### Patch Changes
+
+- Updated dependencies
+  - cojson@0.7.14
+  - jazz-tools@0.7.14
+  - jazz-react@0.7.14
+
+## 0.0.60
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.13
+  - jazz-react@0.7.13
+
+## 0.0.59
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.12
+  - jazz-react@0.7.12
+
+## 0.0.58
+
+### Patch Changes
+
+- Updated dependencies
+  - cojson@0.7.11
+  - jazz-react@0.7.11
+  - jazz-tools@0.7.11
+
+## 0.0.57
+
+### Patch Changes
+
+- Updated dependencies
+  - cojson@0.7.10
+  - jazz-react@0.7.10
+  - jazz-tools@0.7.10
+
+## 0.0.56
+
+### Patch Changes
+
+- Updated dependencies
+  - cojson@0.7.9
+  - jazz-react@0.7.9
+  - jazz-tools@0.7.9
+
+## 0.0.55
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.8
+  - jazz-react@0.7.8
+
+## 0.0.54
+
+### Patch Changes
+
+- Updated dependencies [9fdc91c]
+  - jazz-react@0.7.7
+
+## 0.0.53
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.6
+  - jazz-react@0.7.6
+
+## 0.0.52
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-react@0.7.5
+
+## 0.0.51
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-react@0.7.4
+
+## 0.0.50
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.3
+  - jazz-react@0.7.3
+
+## 0.0.49
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-react@0.7.2
+
+## 0.0.48
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.1
+  - jazz-react@0.7.1
+
+## 0.0.47
+
+### Patch Changes
+
+- Updated dependencies [8636319]
+- Updated dependencies [1a35307]
+- Updated dependencies [8636319]
+- Updated dependencies [1a35307]
+- Updated dependencies [96c494f]
+- Updated dependencies [59c18c3]
+- Updated dependencies [19f52b7]
+- Updated dependencies [8636319]
+- Updated dependencies [1a35307]
+- Updated dependencies [d8fe2b1]
+- Updated dependencies [19004b4]
+- Updated dependencies [a78f168]
+- Updated dependencies [1200aae]
+- Updated dependencies [60d5ca2]
+- Updated dependencies [52675c9]
+- Updated dependencies [129e2c1]
+- Updated dependencies [6d49e9b]
+- Updated dependencies [1cfa279]
+- Updated dependencies [704af7d]
+- Updated dependencies [e97f730]
+- Updated dependencies [1a35307]
+- Updated dependencies [460478f]
+- Updated dependencies [6b0418f]
+- Updated dependencies [e299c3e]
+- Updated dependencies [ed5643a]
+- Updated dependencies [bde684f]
+- Updated dependencies [bf0f8ec]
+- Updated dependencies [c4151fc]
+- Updated dependencies [63374cc]
+- Updated dependencies [8636319]
+- Updated dependencies [01ac646]
+- Updated dependencies [a5e68a4]
+- Updated dependencies [8636319]
+- Updated dependencies [952982e]
+- Updated dependencies [1a35307]
+- Updated dependencies [5fa277c]
+- Updated dependencies [60d5ca2]
+- Updated dependencies [21771c4]
+- Updated dependencies [77c2b56]
+- Updated dependencies [63374cc]
+- Updated dependencies [d2e03ff]
+- Updated dependencies [354bdcd]
+- Updated dependencies [ece35b3]
+- Updated dependencies [60d5ca2]
+- Updated dependencies [69ac514]
+- Updated dependencies [f8a5c46]
+- Updated dependencies [f0f6f1b]
+- Updated dependencies [e5eed5b]
+- Updated dependencies [1a44f87]
+- Updated dependencies [627d895]
+- Updated dependencies [1200aae]
+- Updated dependencies [63374cc]
+- Updated dependencies [ece35b3]
+- Updated dependencies [38d4410]
+- Updated dependencies [85d2b62]
+- Updated dependencies [fd86c11]
+- Updated dependencies [52675c9]
+  - jazz-tools@0.7.0
+  - cojson@0.7.0
+  - jazz-react@0.7.0
+  - hash-slash@0.2.0
+
+## 0.0.47-alpha.42
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.0-alpha.42
+  - cojson@0.7.0-alpha.42
+  - jazz-react@0.7.0-alpha.42
+
+## 0.0.47-alpha.41
+
+### Patch Changes
+
+- jazz-tools@0.7.0-alpha.41
+- jazz-react@0.7.0-alpha.41
+
+## 0.0.47-alpha.40
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-react@0.7.0-alpha.40
+
+## 0.0.47-alpha.39
+
+### Patch Changes
+
+- Updated dependencies
+  - cojson@0.7.0-alpha.39
+  - jazz-react@0.7.0-alpha.39
+  - jazz-tools@0.7.0-alpha.39
+
+## 0.0.47-alpha.38
+
+### Patch Changes
+
+- Updated dependencies
+- Updated dependencies
+- Updated dependencies
+- Updated dependencies
+- Updated dependencies
+  - jazz-tools@0.7.0-alpha.38
+  - jazz-react@0.7.0-alpha.38
+  - cojson@0.7.0-alpha.38
+
+## 0.0.47-alpha.37
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-react@0.7.0-alpha.37
+  - cojson@0.7.0-alpha.37
+  - jazz-tools@0.7.0-alpha.37
+
+## 0.0.47-alpha.36
+
+### Patch Changes
+
+- Updated dependencies [1a35307]
+- Updated dependencies [1a35307]
+- Updated dependencies [1a35307]
+- Updated dependencies [1a35307]
+- Updated dependencies [6b0418f]
+- Updated dependencies [1a35307]
+  - cojson@0.7.0-alpha.36
+  - jazz-tools@0.7.0-alpha.36
+  - jazz-react@0.7.0-alpha.36
+
+## 0.0.47-alpha.35
+
+### Patch Changes
+
+- Updated dependencies
+- Updated dependencies
+  - cojson@0.7.0-alpha.35
+  - jazz-tools@0.7.0-alpha.35
+  - jazz-react@0.7.0-alpha.35
+
+## 0.0.47-alpha.34
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.0-alpha.34
+  - jazz-react@0.7.0-alpha.34
+
+## 0.0.47-alpha.33
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-react@0.7.0-alpha.33
+
+## 0.0.47-alpha.32
+
+### Patch Changes
+
+- Updated dependencies
+- Updated dependencies
+- Updated dependencies
+  - hash-slash@0.2.0-alpha.3
+  - jazz-tools@0.7.0-alpha.32
+  - jazz-react@0.7.0-alpha.32
+
+## 0.0.47-alpha.31
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.0-alpha.31
+  - jazz-react@0.7.0-alpha.31
+
+## 0.0.47-alpha.30
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.0-alpha.30
+  - jazz-react@0.7.0-alpha.30
+
+## 0.0.47-alpha.29
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.0-alpha.29
+  - cojson@0.7.0-alpha.29
+  - jazz-react@0.7.0-alpha.29
+
+## 0.0.47-alpha.28
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.0-alpha.28
+  - cojson@0.7.0-alpha.28
+  - jazz-react@0.7.0-alpha.28
+
+## 0.0.47-alpha.27
+
+### Patch Changes
+
+- Updated dependencies
+- Updated dependencies
+  - jazz-tools@0.7.0-alpha.27
+  - cojson@0.7.0-alpha.27
+  - jazz-react@0.7.0-alpha.27
+
+## 0.0.47-alpha.26
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.0-alpha.26
+  - jazz-react@0.7.0-alpha.26
+
+## 0.0.47-alpha.25
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.0-alpha.25
+  - jazz-react@0.7.0-alpha.25
+
+## 0.0.47-alpha.24
+
+### Patch Changes
+
+- Updated dependencies
+- Updated dependencies
+- Updated dependencies
+  - jazz-tools@0.7.0-alpha.24
+  - cojson@0.7.0-alpha.24
+  - jazz-react@0.7.0-alpha.24
+
+## 0.0.47-alpha.23
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.0-alpha.23
+  - jazz-react@0.7.0-alpha.23
+
+## 0.0.47-alpha.22
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.0-alpha.22
+  - jazz-react@0.7.0-alpha.22
+
+## 0.0.47-alpha.21
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-react@0.7.0-alpha.21
+  - jazz-tools@0.7.0-alpha.21
+
+## 0.0.47-alpha.20
+
+### Patch Changes
+
+- Updated dependencies
+- Updated dependencies
+  - jazz-react@0.7.0-alpha.20
+  - jazz-tools@0.7.0-alpha.20
+
+## 0.0.47-alpha.19
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.0-alpha.19
+  - jazz-react@0.7.0-alpha.19
+
+## 0.0.47-alpha.18
+
+### Patch Changes
+
+- jazz-react@0.7.0-alpha.18
+
+## 0.0.47-alpha.17
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.0-alpha.17
+  - jazz-react@0.7.0-alpha.17
+
+## 0.0.47-alpha.16
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.0-alpha.16
+  - jazz-react@0.7.0-alpha.16
+
+## 0.0.47-alpha.15
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.0-alpha.15
+  - jazz-react@0.7.0-alpha.15
+
+## 0.0.47-alpha.14
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.0-alpha.14
+  - jazz-react@0.7.0-alpha.14
+
+## 0.0.47-alpha.13
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.0-alpha.13
+  - jazz-react@0.7.0-alpha.13
+
+## 0.0.47-alpha.12
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-react@0.7.0-alpha.12
+  - jazz-tools@0.7.0-alpha.12
+
+## 0.0.47-alpha.11
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-react@0.7.0-alpha.11
+  - jazz-tools@0.7.0-alpha.11
+  - cojson@0.7.0-alpha.11
+
+## 0.0.47-alpha.10
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-react@0.7.0-alpha.10
+  - jazz-tools@0.7.0-alpha.10
+  - cojson@0.7.0-alpha.10
+
+## 0.0.47-alpha.9
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-react@0.7.0-alpha.9
+  - jazz-tools@0.7.0-alpha.9
+
+## 0.0.47-alpha.8
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-react@0.7.0-alpha.8
+  - jazz-tools@0.7.0-alpha.8
+
+## 0.0.47-alpha.7
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-react@0.7.0-alpha.7
+  - jazz-tools@0.7.0-alpha.7
+  - cojson@0.7.0-alpha.7
+
+## 0.0.47-alpha.6
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-react@0.7.0-alpha.6
+  - jazz-tools@0.7.0-alpha.6
+
+## 0.0.47-alpha.5
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-react@0.7.0-alpha.5
+  - jazz-tools@0.7.0-alpha.5
+  - cojson@0.7.0-alpha.5
+
+## 0.0.47-alpha.4
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.0-alpha.4
+  - jazz-react@0.7.0-alpha.4
+
+## 0.0.47-alpha.3
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-tools@0.7.0-alpha.3
+  - jazz-react@0.7.0-alpha.3
+
+## 0.0.47-alpha.2
+
+### Patch Changes
+
+- Updated dependencies
+  - hash-slash@0.2.0-alpha.2
+  - jazz-react@0.7.0-alpha.2
+  - jazz-tools@0.7.0-alpha.2
+
+## 0.0.47-alpha.1
+
+### Patch Changes
+
+- Updated dependencies
+  - hash-slash@0.2.0-alpha.1
+  - jazz-react@0.7.0-alpha.1
+  - jazz-tools@0.7.0-alpha.1
+  - cojson@0.7.0-alpha.1
+
+## 0.0.47-alpha.0
+
+### Patch Changes
+
+- Updated dependencies
+  - hash-slash@0.2.0-alpha.0
+  - jazz-react@0.7.0-alpha.0
+  - jazz-tools@0.7.0-alpha.0
+  - cojson@0.7.0-alpha.0
+
+## 0.0.46
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-react@0.5.0
+  - jazz-react-auth-local@0.4.16

examples/chat-clerk/README.md

@@ -1,6 +1,6 @@
-# Jazz Twit Example
+# Jazz Chat Example
 
-Live version: https://twit.jazz.tools
+Live version: https://example-chat.jazz.tools
 
 ## Installing & running the example locally
 
@@ -9,11 +9,11 @@ Live version: https://twit.jazz.tools
 Start by checking out `jazz`
 ```bash
 git clone https://github.com/gardencmp/jazz.git
-cd jazz/examples/twit
+cd jazz/examples/chat
 pnpm pack --pack-destination /tmp
-mkdir -p ~/jazz-examples/twit # or any other directory
-tar -xf /tmp/jazz-example-twit-* --strip-components 1 -C ~/jazz-examples/twit
-cd ~/jazz-examples/twit
+mkdir -p ~/jazz-examples/chat # or any other directory
+tar -xf /tmp/jazz-example-chat-* --strip-components 1 -C ~/jazz-examples/chat
+cd ~/jazz-examples/chat
 ```
 
 This ensures that you have the example app without git history and independent of the Jazz multi-package monorepo.

examples/chat-clerk/index.html

@@ -3,11 +3,12 @@
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/png" href="/jazz-logo.png" />
+    <link rel="stylesheet" href="/src/index.css" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Jazz File Drop Example</title>
+    <title>Jazz Chat Example</title>
   </head>
   <body>
     <div id="root"></div>
-    <script type="module" src="/src/2_main.tsx"></script>
+    <script type="module" src="/src/app.tsx"></script>
   </body>
 </html>

examples/chat-clerk/package.json

@@ -1,26 +1,34 @@
 {
-  "name": "jazz-example-chat-passphrase",
+  "name": "jazz-example-chat-clerk",
   "private": true,
-  "version": "0.0.48-alpha.0",
+  "version": "0.0.80",
   "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "format": "echo 'chat example is codegolfed'",
     "preview": "vite preview"
   },
+  "lint-staged": {
+    "*.{ts,tsx}": "eslint --fix",
+    "*.{js,jsx,mdx,json}": "prettier --write"
+  },
   "dependencies": {
+    "@clerk/clerk-react": "^5.4.1",
     "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-toast": "^1.1.4",
-    "@scure/bip39": "^1.2.2",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
-    "cojson": "workspace:*",
-    "hash-slash": "workspace:*",
-    "jazz-react": "workspace:*",
+    "cojson": "workspace:0.8.0",
+    "hash-slash": "workspace:0.2.0",
+    "jazz-react": "workspace:0.8.0",
+    "jazz-react-auth-clerk": "workspace:0.8.0",
+    "jazz-tools": "workspace:0.8.0",
     "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",
@@ -31,19 +39,18 @@
   },
   "devDependencies": {
     "@types/qrcode": "^1.5.1",
-    "@types/react": "^18.2.15",
+    "@types/react": "^18.2.19",
     "@types/react-dom": "^18.2.7",
-    "@typescript-eslint/eslint-plugin": "^6.0.0",
-    "@typescript-eslint/parser": "^6.0.0",
+    "@typescript-eslint/eslint-plugin": "^6.2.1",
+    "@typescript-eslint/parser": "^6.2.1",
     "@vitejs/plugin-react-swc": "^3.3.2",
     "autoprefixer": "^10.4.14",
-    "eslint": "^8.45.0",
+    "eslint": "^8.46.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.3",
     "postcss": "^8.4.27",
-    "react": "^18.2.0",
     "tailwindcss": "^3.3.3",
-    "typescript": "^5.0.2",
-    "vite": "^4.4.5"
+    "typescript": "^5.3.3",
+    "vite": "^5.0.10"
   }
 }

examples/chat-clerk/src/app.tsx

@@ -0,0 +1,85 @@
+import { CoMap, CoList, co, Group, ID } from "jazz-tools";
+import { createJazzReactApp } from "jazz-react";
+import { useJazzClerkAuth } from "jazz-react-auth-clerk";
+import { createRoot } from "react-dom/client";
+import { useIframeHashRouter } from "hash-slash";
+import { ChatScreen } from "./chatScreen.tsx";
+import { StrictMode } from "react";
+
+import {
+    ClerkProvider,
+    SignInButton,
+    useAuth,
+    useClerk,
+} from "@clerk/clerk-react";
+
+export class Message extends CoMap {
+    text = co.string;
+}
+
+export class Chat extends CoList.Of(co.ref(Message)) {}
+
+const Jazz = createJazzReactApp();
+export const { useAccount, useCoState } = Jazz;
+
+function AuthAndJazz({ children }: { children: React.ReactNode }) {
+    const clerk = useClerk();
+    const [auth, state] = useJazzClerkAuth(clerk);
+
+    return (
+        <>
+            {state.errors.map((error) => (
+                <div key={error}>{error}</div>
+            ))}
+            {auth ? (
+                <Jazz.Provider
+                    auth={auth}
+                    peer="wss://mesh.jazz.tools/?key=chat-example-jazz-clerk@gcmp.io"
+                >
+                    {children}
+                </Jazz.Provider>
+            ) : (
+                <SignInButton />
+            )}
+        </>
+    );
+}
+
+function App() {
+    const { signOut } = useAuth();
+    const { me } = useAccount();
+
+    const createChat = () => {
+        if (!me) return;
+        const group = Group.create({ owner: me });
+        group.addMember("everyone", "writer");
+        const chat = Chat.create([], { owner: group });
+        location.hash = "/chat/" + chat.id;
+    };
+
+    return (
+        <div className="flex flex-col items-center justify-between w-screen h-screen p-2 dark:bg-black dark:text-white">
+            <div className="rounded mb-5 px-2 py-1 text-sm self-end">
+                {me?.profile?.name} ·{" "}
+                <button onClick={() => signOut()}>Log Out</button>
+            </div>
+            {useIframeHashRouter().route({
+                "/": () => createChat() as never,
+                "/chat/:id": (id) => <ChatScreen chatID={id as ID<Chat>} />,
+            })}
+        </div>
+    );
+}
+
+createRoot(document.getElementById("root")!).render(
+    <StrictMode>
+        <ClerkProvider
+            publishableKey={import.meta.env.VITE_CLERK_PUBLISHABLE_KEY}
+            afterSignOutUrl="/"
+        >
+            <AuthAndJazz>
+                <App />
+            </AuthAndJazz>
+        </ClerkProvider>
+    </StrictMode>
+);

examples/chat-clerk/src/chatScreen.tsx

@@ -0,0 +1,42 @@
+import { ID } from 'jazz-tools';
+import { Chat, Message, useCoState } from './app.tsx';
+
+export function ChatScreen(props: { chatID: ID<Chat> }) {
+  const chat = useCoState(Chat, props.chatID, [{}]);
+
+  return chat ? <div className='w-full max-w-xl h-full flex flex-col items-stretch'>
+    {chat.length > 0
+      ? chat.map((msg) => <ChatBubble msg={msg} key={msg.id} />)
+      : <div className='m-auto text-sm'>(Empty chat)</div>}
+    <ChatInput onSubmit={(text) => {
+      chat.push(
+        Message.create({ text }, { owner: chat._owner })
+      );
+    }} />
+  </div> : <div>Loading...</div>;
+}
+
+function ChatBubble(props: { msg: Message }) {
+  const lastEdit = props.msg._edits.text;
+  const align = lastEdit.by?.isMe ? 'items-end' : 'items-start';
+
+  return <div className={`${align} flex flex-col`}>
+    <div className='rounded-xl bg-stone-100 dark:bg-stone-700 dark:text-white py-2 px-4 mt-2 min-w-[5rem]'>
+      { props.msg.text }
+    </div>
+    <div className='text-xs text-neutral-500 ml-2'>
+      { lastEdit.by?.profile?.name }{' '}
+      { lastEdit.madeAt?.toLocaleTimeString() }
+    </div>
+  </div>;
+}
+
+function ChatInput(props: { onSubmit: (text: string) => void }) {
+  return <input className='rounded p-2 border mt-auto dark:bg-black dark:text-white border-stone-300 dark:border-stone-700'
+    placeholder='Type a message and press Enter'
+    onKeyDown={({ key, currentTarget: input }) => {
+      if (key !== 'Enter' || !input.value) return;
+      props.onSubmit(input.value);
+      input.value = '';
+    }} />;
+}

examples/chat/.gitignore

@@ -22,3 +22,5 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+sync-db/

examples/chat/CHANGELOG.md

@@ -1,5 +1,42 @@
 # jazz-example-chat
 
+## 0.0.82
+
+### Patch Changes
+
+- Updated dependencies [6a147c2]
+- Updated dependencies [ad40b88]
+- Updated dependencies [23369dc]
+- Updated dependencies [c2b62a0]
+- Updated dependencies [1a979b6]
+- Updated dependencies [bcec3be]
+- Updated dependencies [6ce2051]
+  - cojson@0.8.0
+  - jazz-tools@0.8.0
+  - jazz-react@0.8.0
+
+## 0.0.82-guest-auth.6
+
+### Patch Changes
+
+- Updated dependencies
+  - jazz-react@0.7.35-guest-auth.6
+  - jazz-tools@0.7.35-guest-auth.6
+
+## 0.0.82
+
+### Patch Changes
+
+- Updated dependencies [49a8b54]
+- Updated dependencies [35bbcd9]
+- Updated dependencies [6f80282]
+- Updated dependencies [35bbcd9]
+- Updated dependencies [cac2ec9]
+- Updated dependencies [f350e90]
+  - jazz-tools@0.7.35
+  - cojson@0.7.35
+  - jazz-react@0.7.35
+
 ## 0.0.81
 
 ### Patch Changes

examples/chat/README.md

@@ -39,4 +39,4 @@ If you have feedback, let us know on [Discord](https://discord.gg/utDMjHYg42) or
 
 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 `<Jazz.Provider>` provider component in [./src/2_main.tsx](./src/2_main.tsx).
+You can also run a local sync server by running `npx jazz-run sync` and adding the query param `?sync=ws://localhost:4200` to the URL of the example app (for example: `http://localhost:5173/?peer=ws://localhost:4200`), or by setting the `sync` parameter of the `<Jazz.Provider>` provider component in [./src/2_main.tsx](./src/2_main.tsx).

examples/chat/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jazz-example-chat",
   "private": true,
-  "version": "0.0.81",
+  "version": "0.0.82",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -18,13 +18,12 @@
     "@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",
-    "hash-slash": "workspace:*",
-    "jazz-tools": "workspace:*",
-    "jazz-react": "workspace:*",
-    "cojson": "workspace:*",
+    "cojson": "workspace:0.8.0",
+    "hash-slash": "workspace:0.2.0",
+    "jazz-react": "workspace:0.8.0",
+    "jazz-tools": "workspace:0.8.0",
     "lucide-react": "^0.274.0",
     "qrcode": "^1.5.3",
     "react": "^18.2.0",
@@ -37,18 +36,19 @@
     "uniqolor": "^1.1.0"
   },
   "devDependencies": {
-    "@types/react": "^18.2.15",
+    "@types/qrcode": "^1.5.1",
+    "@types/react": "^18.2.19",
     "@types/react-dom": "^18.2.7",
-    "@typescript-eslint/eslint-plugin": "^6.0.0",
-    "@typescript-eslint/parser": "^6.0.0",
+    "@typescript-eslint/eslint-plugin": "^6.2.1",
+    "@typescript-eslint/parser": "^6.2.1",
     "@vitejs/plugin-react-swc": "^3.3.2",
     "autoprefixer": "^10.4.14",
-    "eslint": "^8.45.0",
+    "eslint": "^8.46.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",
+    "typescript": "^5.3.3",
     "vite": "^5.0.10"
   }
 }

examples/chat/src/app.tsx

@@ -1,43 +1,65 @@
 import { CoMap, CoList, co, Group, ID } from "jazz-tools";
-import { createJazzReactContext, DemoAuth } from "jazz-react";
+import { createJazzReactApp, DemoAuthBasicUI, useDemoAuth } from "jazz-react";
 import { createRoot } from "react-dom/client";
 import { useIframeHashRouter } from "hash-slash";
 import { ChatScreen } from "./chatScreen.tsx";
 import { StrictMode } from "react";
 
 export class Message extends CoMap {
-  text = co.string;
+    text = co.string;
 }
 
 export class Chat extends CoList.Of(co.ref(Message)) {}
 
-const Jazz = createJazzReactContext({
-  auth: DemoAuth({ appName: "Jazz Chat" }),
-  peer: `wss://mesh.jazz.tools/?key=you@example.com`
-});
+const Jazz = createJazzReactApp();
 export const { useAccount, useCoState } = Jazz;
 
-
 function App() {
-  const { me, logOut } = useAccount();
+    const { me, logOut } = useAccount();
 
-  const createChat = () => {
-    const group = Group.create({ owner: me });
-    group.addMember("everyone", "writer");
-    const chat = Chat.create([], { owner: group });
-    location.hash = "/chat/" + chat.id;
-  };
+    const createChat = () => {
+        if (!me) return;
+        const group = Group.create({ owner: me });
+        group.addMember("everyone", "writer");
+        const chat = Chat.create([], { owner: group });
+        location.hash = "/chat/" + chat.id;
+    };
 
-  return <div className="flex flex-col items-center justify-between w-screen h-screen p-2 dark:bg-black dark:text-white">
-    <div className="rounded mb-5 px-2 py-1 text-sm self-end">
-      {me.profile?.name} · <button onClick={logOut}>Log Out</button>
-    </div>
-    {useIframeHashRouter().route({
-      '/': () => createChat() as never,
-      '/chat/:id': (id) => <ChatScreen chatID={id as ID<Chat>} />
-    })}
-  </div>;
+    return (
+        <div className="flex flex-col items-center justify-between w-screen h-screen p-2 dark:bg-black dark:text-white">
+            <div className="rounded mb-5 px-2 py-1 text-sm self-end">
+                {me?.profile?.name} ·{" "}
+                <button onClick={logOut}>Log Out</button>
+            </div>
+            {useIframeHashRouter().route({
+                "/": () => createChat() as never,
+                "/chat/:id": (id) => <ChatScreen chatID={id as ID<Chat>} />,
+            })}
+        </div>
+    );
 }
 
-createRoot(document.getElementById("root")!)
-  .render(<StrictMode><Jazz.Provider><App/></Jazz.Provider></StrictMode>);
+function AuthAndJazz({ children }: { children: React.ReactNode }) {
+    const [auth, state] = useDemoAuth();
+
+    return (
+        <Jazz.Provider
+            auth={auth}
+            peer="wss://mesh.jazz.tools/?key=chat-example-jazz@gcmp.io"
+        >
+            {state.state === "signedIn" ? (
+                children
+            ) : (
+                <DemoAuthBasicUI appName="Jazz Chat" state={state} />
+            )}
+        </Jazz.Provider>
+    );
+}
+
+createRoot(document.getElementById("root")!).render(
+    <StrictMode>
+        <AuthAndJazz>
+            <App />
+        </AuthAndJazz>
+    </StrictMode>
+);

examples/inspector/.gitignore

@@ -22,3 +22,5 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+sync-db/

examples/inspector/CHANGELOG.md

@@ -1,4 +1,23 @@
-# jazz-example-chat
+# jazz-example-inspector
+
+## 0.0.60
+
+### Patch Changes
+
+- Updated dependencies [6a147c2]
+- Updated dependencies [ad40b88]
+  - cojson@0.8.0
+  - cojson-transport-ws@0.8.0
+
+## 0.0.60
+
+### Patch Changes
+
+- 63daf6a: fix(inspector): subscribe to latent covalues instead of loading them immediately
+- Updated dependencies [35bbcd9]
+- Updated dependencies [f350e90]
+  - cojson@0.7.35
+  - cojson-transport-ws@0.7.35
 
 ## 0.0.59
 

examples/inspector/README.md

@@ -1,42 +1,7 @@
-# Jazz Chat Example
+# Jazz Inspector
 
-Live version: https://example-chat.jazz.tools
+Live address: https://inspector.jazz.tools
 
-## Installing & running the example locally
+Use this to visually inspect a Jazz account or other CoValue.
 
-(this requires `pnpm` to be installed, see [https://pnpm.io/installation](https://pnpm.io/installation))
-
-Start by checking out `jazz`
-```bash
-git clone https://github.com/gardencmp/jazz.git
-cd jazz/examples/chat
-pnpm pack --pack-destination /tmp
-mkdir -p ~/jazz-examples/chat # or any other directory
-tar -xf /tmp/jazz-example-chat-* --strip-components 1 -C ~/jazz-examples/chat
-cd ~/jazz-examples/chat
-```
-
-This ensures that you have the example app without git history and independent of the Jazz multi-package monorepo.
-
-Install dependencies:
-
-```bash
-pnpm install
-```
-
-Start the dev server:
-
-```bash
-pnpm dev
-```
-
-## 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).
+For now, you can get your account credentials from the `jazz-logged-in-secret` local-storage key from within your Jazz app.

examples/inspector/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jazz-inspector",
   "private": true,
-  "version": "0.0.59",
+  "version": "0.0.60",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -13,12 +13,11 @@
     "@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",
-    "hash-slash": "workspace:*",
-    "cojson": "workspace:*",
-    "cojson-transport-ws": "workspace:*",
+    "cojson": "workspace:0.8.0",
+    "cojson-transport-ws": "workspace:0.8.0",
+    "hash-slash": "workspace:0.2.0",
     "lucide-react": "^0.274.0",
     "qrcode": "^1.5.3",
     "react": "^18.2.0",
@@ -31,18 +30,19 @@
     "uniqolor": "^1.1.0"
   },
   "devDependencies": {
-    "@types/react": "^18.2.15",
+    "@types/qrcode": "^1.5.1",
+    "@types/react": "^18.2.19",
     "@types/react-dom": "^18.2.7",
-    "@typescript-eslint/eslint-plugin": "^6.0.0",
-    "@typescript-eslint/parser": "^6.0.0",
+    "@typescript-eslint/eslint-plugin": "^6.2.1",
+    "@typescript-eslint/parser": "^6.2.1",
     "@vitejs/plugin-react-swc": "^3.3.2",
     "autoprefixer": "^10.4.14",
-    "eslint": "^8.45.0",
+    "eslint": "^8.46.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",
+    "typescript": "^5.3.3",
     "vite": "^5.0.10"
   }
 }

examples/inspector/src/viewer/new-app.tsx

@@ -5,8 +5,7 @@ import {
     RawCoValue,
     RawAccount,
     AgentSecret,
-    AccountID,
-    cojsonInternals,
+    RawAccountID,
     WasmCrypto,
 } from "cojson";
 import { createWebSocketPeer } from "cojson-transport-ws";
@@ -69,7 +68,7 @@ export default function CoJsonViewerApp() {
             const node = await LocalNode.withLoadedAccount({
                 accountID: currentAccount.id,
                 accountSecret: currentAccount.secret,
-                sessionID: cojsonInternals.newRandomSessionID(
+                sessionID: crypto.newRandomSessionID(
                     currentAccount.id,
                 ),
                 peersToLoadFrom: [wsPeer],
@@ -82,7 +81,7 @@ export default function CoJsonViewerApp() {
         });
     }, [currentAccount, goToIndex]);
 
-    const addAccount = (id: AccountID, secret: AgentSecret) => {
+    const addAccount = (id: RawAccountID, secret: AgentSecret) => {
         const newAccount = { id, secret };
         setAccounts([...accounts, newAccount]);
         setCurrentAccount(newAccount);
@@ -238,14 +237,14 @@ function AccountSwitcher({
 function AddAccountForm({
     addAccount,
 }: {
-    addAccount: (id: AccountID, secret: AgentSecret) => void;
+    addAccount: (id: RawAccountID, secret: AgentSecret) => void;
 }) {
     const [id, setId] = useState("");
     const [secret, setSecret] = useState("");
 
     const handleSubmit = (e: React.FormEvent) => {
         e.preventDefault();
-        addAccount(id as AccountID, secret as AgentSecret);
+        addAccount(id as RawAccountID, secret as AgentSecret);
         setId("");
         setSecret("");
     };

examples/inspector/src/viewer/use-resolve-covalue.ts

@@ -104,6 +104,54 @@ export async function resolveCoValue(
     };
 }
 
+function subscribeToCoValue(
+    coValueId: CoID<RawCoValue>,
+    node: LocalNode,
+    callback: (result: Awaited<ReturnType<typeof resolveCoValue>>) => void,
+) {
+    return node.subscribe(coValueId, (value) => {
+        if (value === "unavailable") {
+            callback({
+                value: undefined,
+                snapshot: "unavailable",
+                type: null,
+                extendedType: undefined,
+            });
+        } else {
+            const snapshot = value.toJSON() as JSONObject;
+            const type = value.type as CoJsonType;
+            let extendedType: ExtendedCoJsonType | undefined;
+
+            if (type === "comap") {
+                if (isBrowserImage(snapshot)) {
+                    extendedType = "image";
+                } else if (isAccount(snapshot)) {
+                    extendedType = "account";
+                } else if (isGroup(snapshot)) {
+                    extendedType = "group";
+                } else {
+                    const children = Object.values(snapshot).slice(0, 10);
+                    if (
+                        children.every(
+                            (c) => typeof c === "string" && c.startsWith("co_"),
+                        ) &&
+                        children.length > 3
+                    ) {
+                        extendedType = "record";
+                    }
+                }
+            }
+
+            callback({
+                value,
+                snapshot,
+                type,
+                extendedType,
+            });
+        }
+    });
+}
+
 export function useResolvedCoValue(
     coValueId: CoID<RawCoValue>,
     node: LocalNode,
@@ -112,7 +160,17 @@ export function useResolvedCoValue(
         useState<Awaited<ReturnType<typeof resolveCoValue>>>();
 
     useEffect(() => {
-        resolveCoValue(coValueId, node).then(setResult);
+        let isMounted = true;
+        const unsubscribe = subscribeToCoValue(coValueId, node, (newResult) => {
+            if (isMounted) {
+                setResult(newResult);
+            }
+        });
+
+        return () => {
+            isMounted = false;
+            unsubscribe();
+        };
     }, [coValueId, node]);
 
     return (
@@ -134,18 +192,30 @@ export function useResolvedCoValues(
     >([]);
 
     useEffect(() => {
-        console.log("RETECHING", coValueIds);
-        const fetchResults = async () => {
-            if (coValueIds.length === 0) return;
-            const resolvedValues = await Promise.all(
-                coValueIds.map((coValueId) => resolveCoValue(coValueId, node)),
+        let isMounted = true;
+        const unsubscribes: (() => void)[] = [];
+
+        coValueIds.forEach((coValueId, index) => {
+            const unsubscribe = subscribeToCoValue(
+                coValueId,
+                node,
+                (newResult) => {
+                    if (isMounted) {
+                        setResults((prevResults) => {
+                            const newResults = [...prevResults];
+                            newResults[index] = newResult;
+                            return newResults;
+                        });
+                    }
+                },
             );
+            unsubscribes.push(unsubscribe);
+        });
 
-            console.log({ resolvedValues });
-            setResults(resolvedValues);
+        return () => {
+            isMounted = false;
+            unsubscribes.forEach((unsubscribe) => unsubscribe());
         };
-
-        fetchResults();
     }, [coValueIds, node]);
 
     return results;

examples/musicPlayer/.eslintrc.cjs

@@ -5,6 +5,7 @@ module.exports = {
     'eslint:recommended',
     'plugin:@typescript-eslint/recommended',
     'plugin:react-hooks/recommended',
+    'prettier'
   ],
   ignorePatterns: ['dist', '.eslintrc.cjs'],
   parser: '@typescript-eslint/parser',

examples/musicPlayer/.prettierrc.js

@@ -0,0 +1,9 @@
+/** @type {import("prettier").Config} */
+const config = {
+    trailingComma: "all",
+    tabWidth: 4,
+    semi: true,
+    singleQuote: false,
+};
+
+export default config;

examples/musicPlayer/CHANGELOG.md

@@ -0,0 +1,34 @@
+# jazz-example-musicplayer
+
+## 0.0.3
+
+### Patch Changes
+
+-   Updated dependencies [ad40b88]
+-   Updated dependencies [23369dc]
+-   Updated dependencies [c2b62a0]
+-   Updated dependencies [1a979b6]
+-   Updated dependencies [bcec3be]
+-   Updated dependencies [6ce2051]
+    -   jazz-tools@0.8.0
+    -   jazz-react@0.8.0
+
+## 0.0.3-guest-auth.0
+
+### Patch Changes
+
+-   Updated dependencies
+    -   jazz-react@0.7.35-guest-auth.6
+    -   jazz-tools@0.7.35-guest-auth.6
+
+## 0.0.2
+
+### Patch Changes
+
+-   Updated dependencies [49a8b54]
+-   Updated dependencies [6f80282]
+-   Updated dependencies [35bbcd9]
+-   Updated dependencies [cac2ec9]
+-   Updated dependencies [f350e90]
+    -   jazz-tools@0.7.35
+    -   jazz-react@0.7.35

examples/musicPlayer/README.md

@@ -1,19 +1,20 @@
-# Jazz Chat Example (with passphrase auth)
+# Jazz Music Player Example
 
-Live version: https://example-chat-passphrase.jazz.tools
+Live version: https://music-demo.jazz.tools
 
 ## Installing & running the example locally
 
 (this requires `pnpm` to be installed, see [https://pnpm.io/installation](https://pnpm.io/installation))
 
 Start by checking out `jazz`
+
 ```bash
 git clone https://github.com/gardencmp/jazz.git
-cd jazz/examples/chat-passphrase
+cd jazz/examples/musicPlayer
 pnpm pack --pack-destination /tmp
-mkdir -p ~/jazz-examples/chat-passphrase # or any other directory
-tar -xf /tmp/jazz-example-chat-passphrase-* --strip-components 1 -C ~/jazz-examples/chat-passphrase
-cd ~/jazz-examples/chat-passphrase
+mkdir -p ~/jazz-examples/musicPlayer # or any other directory
+tar -xf /tmp/jazz-example-musicPlayer-* --strip-components 1 -C ~/jazz-examples/musicPlayer
+cd ~/jazz-examples/musicPlayer
 ```
 
 This ensures that you have the example app without git history and independent of the Jazz multi-package monorepo.
@@ -34,9 +35,8 @@ pnpm dev
 
 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 `<Jazz.Provider>` provider component in [./src/2_main.tsx](./src/2_main.tsx).
+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/?peer=ws://localhost:4200`), or by setting the `sync` parameter of the `<Jazz.Provider>` provider component in [./src/2_main.tsx](./src/2_main.tsx).

examples/musicPlayer/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 - Music Player example</title>
+    </head>
+    <body>
+        <div id="root"></div>
+        <script type="module" src="/src/2_main.tsx"></script>
+    </body>
+</html>

examples/musicPlayer/job-template.nomad

@@ -1,4 +1,4 @@
-job "twit$BRANCH_SUFFIX" {
+job "example-musicPlayer$BRANCH_SUFFIX" {
   region     = "global"
   datacenters = ["*"]
 
@@ -41,7 +41,7 @@ job "twit$BRANCH_SUFFIX" {
 
       service {
         tags = ["public"]
-        name = "twit$BRANCH_SUFFIX"
+        name = "example-pets$BRANCH_SUFFIX"
         port = "http"
         provider = "consul"
       }

examples/musicPlayer/package.json

@@ -0,0 +1,44 @@
+{
+    "name": "jazz-example-music-player",
+    "private": true,
+    "version": "0.0.3",
+    "type": "module",
+    "scripts": {
+        "dev": "vite",
+        "build": "tsc && vite build",
+        "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+        "format": "prettier --write './src/**/*.{ts,tsx}'",
+        "preview": "vite preview"
+    },
+    "lint-staged": {
+        "*.{ts,tsx}": "eslint --fix",
+        "*.{js,jsx,mdx,json}": "prettier --write"
+    },
+    "dependencies": {
+        "class-variance-authority": "^0.7.0",
+        "clsx": "^2.0.0",
+        "jazz-react": "workspace:0.8.0",
+        "jazz-tools": "workspace:0.8.0",
+        "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"
+    },
+    "devDependencies": {
+        "@types/react": "^18.2.19",
+        "@types/react-dom": "^18.2.7",
+        "@typescript-eslint/eslint-plugin": "^6.2.1",
+        "@typescript-eslint/parser": "^6.2.1",
+        "@vitejs/plugin-react-swc": "^3.3.2",
+        "autoprefixer": "^10.4.14",
+        "eslint": "^8.46.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.3.3",
+        "vite": "^5.0.10"
+    }
+}

examples/musicPlayer/src/1_schema.ts

@@ -0,0 +1,124 @@
+import {
+    CoMap,
+    CoList,
+    BinaryCoStream,
+    co,
+    Profile,
+    Account,
+} from "jazz-tools";
+
+/** Walkthrough: Defining the data model with CoJSON
+ *
+ *  Here, we define our main data model of tasks, lists of tasks and projects
+ *  using CoJSON's collaborative map and list types, CoMap & CoList.
+ *
+ *  CoMap values and CoLists items can contain:
+ *  - arbitrary immutable JSON
+ *  - other CoValues
+ **/
+
+export class MusicTrack extends CoMap {
+    /**
+     *  Attributes are defined as class properties
+     *  and you can get the types from the `co` module
+     *  here we are defining the title and duration for our music track
+     *
+     *  Tip: try to follow the co.string defintion to discover the other available primitives!
+     */
+    title = co.string;
+    duration = co.number;
+
+    /**
+     * With `co.ref` you can define relations between your coValues.
+     *
+     * Attributes are required by default unless you mark them as optional.
+     */
+    sourceTrack = co.optional.ref(MusicTrack);
+
+    /**
+     * In Jazz you can files using BinaryCoStream.
+     *
+     * As for any other coValue the music files we put inside BinaryCoStream
+     * is available offline and end-to-end encrypted 😉
+     */
+    file = co.ref(BinaryCoStream);
+    waveform = co.ref(MusicTrackWaveform);
+}
+
+export class MusicTrackWaveform extends CoMap {
+    data = co.json<number[]>();
+}
+
+/**
+ * CoList is the collaborative version of Array
+ *
+ * They are strongly typed and accept only the type you define here
+ * as "CoList.Of" argument
+ */
+export class ListOfTracks extends CoList.Of(co.ref(MusicTrack)) {}
+
+export class Playlist extends CoMap {
+    title = co.string;
+    tracks = co.ref(ListOfTracks);
+}
+
+export class ListOfPlaylists extends CoList.Of(co.ref(Playlist)) {}
+
+/** The account root is an app-specific per-user private `CoMap`
+ *  where you can store top-level objects for that user */
+export class MusicaAccountRoot extends CoMap {
+    // The root playlist works as container for the tracks that
+    // the user has uploaded
+    rootPlaylist = co.ref(Playlist);
+    // Here we store the list of playlists that the user has created
+    // or that has been invited to
+    playlists = co.ref(ListOfPlaylists);
+    // We store the active track and playlist as coValue here
+    // so when the user reloads the page can see the last played
+    // track and playlist
+    // You can also add the position in time if you want make it possible
+    // to resume the song
+    activeTrack = co.optional.ref(MusicTrack);
+    activePlaylist = co.ref(Playlist);
+
+    exampleDataLoaded = co.optional.boolean;
+}
+
+export class MusicaAccount extends Account {
+    profile = co.ref(Profile);
+    root = co.ref(MusicaAccountRoot);
+
+    /** 
+     *  The account migration is run on account creation and on every log-in.
+     *  You can use it to set up the account root and any other initial CoValues you need.
+     */
+    async migrate(creationProps?: { name: string }) {
+        super.migrate(creationProps);
+
+        if (!this._refs.root) {
+            const ownership = { owner: this };
+
+            const tracks = ListOfTracks.create([], ownership);
+            const rootPlaylist = Playlist.create(
+                {
+                    tracks,
+                    title: "",
+                },
+                ownership,
+            );
+
+            this.root = MusicaAccountRoot.create(
+                {
+                    rootPlaylist,
+                    playlists: ListOfPlaylists.create([], ownership),
+                    activeTrack: null,
+                    activePlaylist: rootPlaylist,
+                    exampleDataLoaded: false,
+                },
+                ownership,
+            );
+        }
+    }
+}
+
+/** Walkthrough: Continue with ./2_main.tsx */

examples/musicPlayer/src/2_main.tsx

@@ -0,0 +1,115 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import { createHashRouter, RouterProvider } from "react-router-dom";
+import { useMediaPlayer } from "./4_useMediaPlayer";
+import { HomePage } from "./5_HomePage";
+import { createNewPlaylist, uploadMusicTracks } from "./3_actions";
+import { PlaylistPage } from "./6_PlaylistPage";
+import { InvitePage } from "./7_InvitePage";
+import { Button } from "./basicComponents/Button";
+import { FileUploadButton } from "./basicComponents/FileUploadButton";
+import { PlayerControls } from "./components/PlayerControls";
+import "./index.css";
+
+import { MusicaAccount } from "@/1_schema";
+import { createJazzReactApp, DemoAuthBasicUI, useDemoAuth } from "jazz-react";
+import { useUploadExampleData } from "./lib/useUploadExampleData";
+
+/**
+ * Walkthrough: The top-level provider `<Jazz.Provider/>`
+ *
+ * This shows how to use the top-level provider `<Jazz.Provider/>`,
+ * which provides the rest of the app with a controlled account (used through `useAccount` later).
+ * Here we use `DemoAuth` which is great for prototyping you app without wasting time on figuring out
+ * the best way to do auth.
+ *
+ * `<Jazz.Provider/>` also runs our account migration
+ */
+const Jazz = createJazzReactApp({
+    AccountSchema: MusicaAccount
+});
+
+export const { useAccount, useCoState, useAcceptInvite } = Jazz;
+
+function Main() {
+    const mediaPlayer = useMediaPlayer();
+
+    useUploadExampleData();
+
+    /**
+     * `me` represents the current user account, which will determine
+     *  access rights to CoValues. We get it from the top-level provider `<WithJazz/>`.
+     */
+    const { me } = useAccount();
+
+    async function handleFileLoad(files: FileList) {
+        if (!me) return;
+
+        /**
+         * Follow this function definition to see how we update
+         * values in Jazz and manage files!
+         */
+        /** Walkthrough: Continue with ./3_actions.ts */
+        await uploadMusicTracks(me, files);
+    }
+
+    async function handleCreatePlaylist() {
+        if (!me) return;
+
+        const playlist = await createNewPlaylist(me);
+
+        router.navigate(`/playlist/${playlist.id}`);
+    }
+
+    const router = createHashRouter([
+        {
+            path: "/",
+            element: <HomePage mediaPlayer={mediaPlayer} />,
+        },
+        {
+            path: "/playlist/:playlistId",
+            element: <PlaylistPage mediaPlayer={mediaPlayer} />,
+        },
+        {
+            path: "/invite/*",
+            element: <InvitePage />,
+        },
+    ]);
+
+    return (
+        <>
+            <div className="flex items-center bg-gray-300">
+                <img src="jazz-logo.png" className="px-3 h-[20px]" />
+                <div className="text-nowrap">Jazz music player</div>
+                <div className="flex w-full gap-1 justify-end">
+                    <FileUploadButton onFileLoad={handleFileLoad}>
+                        Add file
+                    </FileUploadButton>
+                    <Button onClick={handleCreatePlaylist}>
+                        Create new playlist
+                    </Button>
+                </div>
+            </div>
+            <RouterProvider router={router} />
+            <PlayerControls mediaPlayer={mediaPlayer} />
+        </>
+    );
+}
+
+function AuthAndJazz({ children }: { children: React.ReactNode }) {
+    const [auth, state] = useDemoAuth();
+
+    return (
+        <Jazz.Provider auth={auth} peer="wss://mesh.jazz.tools/?key=music-player-example-jazz@gcmp.io">
+            {state.state === "signedIn" ? children : <DemoAuthBasicUI appName="Jazz Music Player" state={state} />}
+        </Jazz.Provider>
+    );
+}
+
+ReactDOM.createRoot(document.getElementById("root")!).render(
+    <React.StrictMode>
+        <AuthAndJazz>
+            <Main />
+        </AuthAndJazz>
+    </React.StrictMode>,
+);

examples/musicPlayer/src/3_actions.ts

@@ -0,0 +1,128 @@
+import { getAudioFileData } from "@/lib/audio/getAudioFileData";
+import { BinaryCoStream, Group } from "jazz-tools";
+import {
+    ListOfTracks,
+    MusicaAccount,
+    MusicTrack,
+    MusicTrackWaveform,
+    Playlist,
+} from "./1_schema";
+
+/**
+ * Walkthrough: Actions
+ *
+ * With Jazz is very simple to update the state, you
+ * just mutate the values and we take care of triggering
+ * the updates and sync  and persist the values you change.
+ *
+ * We have grouped the complex updates here in an actions file
+ * just to keep them separated from the components.
+ *
+ * Jazz is very unopinionated in this sense and you can adopt the
+ * pattern that best fits your app.
+ */
+
+export async function uploadMusicTracks(
+    account: MusicaAccount,
+    files: Iterable<File>,
+) {
+    // The ownership object defines the user that owns the created coValues
+    // by setting the ownership with "account" we configure the coValues to be private
+    const ownership = {
+        owner: account,
+    };
+
+    for (const file of files) {
+        const data = await getAudioFileData(file);
+
+        // We transform the file blob into a BinaryCoStream
+        // making it a collaborative value that is encrypted, easy
+        // to share across devices and users and available offline!
+        const binaryCoStream = await BinaryCoStream.createFromBlob(
+            file,
+            ownership,
+        );
+
+        const musicTrack = MusicTrack.create(
+            {
+                file: binaryCoStream,
+                duration: data.duration,
+                waveform: MusicTrackWaveform.create(
+                    { data: data.waveform },
+                    ownership,
+                ),
+                title: file.name,
+            },
+            ownership,
+        );
+
+        // The newly created musicTrack can be associated to the
+        // user track list using a simple push call
+        account.root?.rootPlaylist?.tracks?.push(musicTrack);
+    }
+}
+
+export async function createNewPlaylist(account: MusicaAccount) {
+    // Since playlists are meant to be shared we associate them
+    // to a group which will contain the keys required to get
+    // access to the "owned" values
+    const playlistGroup = Group.create({ owner: account });
+
+    const ownership = { owner: playlistGroup };
+
+    const playlist = Playlist.create(
+        {
+            title: "New Playlist",
+            tracks: ListOfTracks.create([], ownership),
+        },
+        ownership,
+    );
+
+    // Again, we associate the new playlist to the
+    // user by pushing it into the playlists CoList
+    account.root?.playlists?.push(playlist);
+
+    return playlist;
+}
+
+export async function addTrackToPlaylist(
+    playlist: Playlist,
+    track: MusicTrack,
+    account: MusicaAccount | undefined,
+) {
+    if (!account) return;
+
+    /**
+     * Since musicTracks are created as private values (see uploadMusicTracks)
+     * to make them shareable as part of the playlist we are cloning them
+     * and setting the playlist group as owner of the clone
+     *
+     * In the future it will be possible to "inherit" the parent group so you
+     * won't need to clone values to have this kind of sharing granularity
+     */
+    const ownership = { owner: playlist._owner };
+    const blob = await BinaryCoStream.loadAsBlob(track._refs.file.id, account);
+    const waveform = await MusicTrackWaveform.load(
+        track._refs.waveform.id,
+        account,
+        {},
+    );
+
+    if (!blob || !waveform) return;
+
+    const trackClone = MusicTrack.create(
+        {
+            file: await BinaryCoStream.createFromBlob(blob, ownership),
+            duration: track.duration,
+            waveform: MusicTrackWaveform.create(
+                { data: waveform.data },
+                ownership,
+            ),
+            title: track.title,
+            sourceTrack: track,
+        },
+        ownership,
+    );
+
+    playlist.tracks?.push(trackClone);
+}

examples/musicPlayer/src/4_useMediaPlayer.ts

@@ -0,0 +1,99 @@
+import { usePlayMedia } from "@/lib/audio/usePlayMedia";
+import { usePlayState } from "@/lib/audio/usePlayState";
+import { useAccount, useCoState } from "./2_main";
+import { MusicTrack, Playlist } from "@/1_schema";
+import { useRef, useState } from "react";
+import { getNextTrack, getPrevTrack } from "./lib/getters";
+import { BinaryCoStream, ID } from "jazz-tools";
+
+export function useMediaPlayer() {
+    const { me } = useAccount();
+
+    const playState = usePlayState();
+    const playMedia = usePlayMedia();
+
+    const [loading, setLoading] = useState<ID<MusicTrack> | null>(null);
+
+    const activeTrack = useCoState(MusicTrack, me?.root?._refs.activeTrack?.id);
+
+    // Reference used to avoid out-of-order track loads
+    const lastLoadedTrackId = useRef<ID<MusicTrack> | null>(null);
+
+    async function loadTrack(track: MusicTrack) {
+        if (!me.root) return;
+
+        lastLoadedTrackId.current = track.id;
+
+        setLoading(track.id);
+
+        const file = await BinaryCoStream.loadAsBlob(track._refs.file.id, me);
+
+        if (!file) {
+            setLoading(null);
+            return;
+        }
+
+        // Check if another track has been loaded during
+        // the file download
+        if (lastLoadedTrackId.current !== track.id) {
+            return;
+        }
+
+        me.root.activeTrack = track;
+
+        await playMedia(file);
+
+        setLoading(null);
+    }
+
+    async function playNextTrack() {
+        if (!me?.root) return;
+
+        const track = await getNextTrack(me);
+
+        if (track) {
+            me.root.activeTrack = track;
+            await loadTrack(track);
+        }
+    }
+
+    async function playPrevTrack() {
+        if (!me?.root) return;
+
+        const track = await getPrevTrack(me);
+
+        if (track) {
+            await loadTrack(track);
+        }
+    }
+
+    async function setActiveTrack(track: MusicTrack, playlist?: Playlist) {
+        if (!me?.root) return;
+
+        if (
+            activeTrack?.id === track.id &&
+            lastLoadedTrackId.current !== null
+        ) {
+            playState.toggle();
+            return;
+        }
+
+        me.root.activePlaylist = playlist ?? me.root.rootPlaylist;
+
+        await loadTrack(track);
+
+        if (playState.value === "pause") {
+            playState.toggle();
+        }
+    }
+
+    return {
+        activeTrack,
+        setActiveTrack,
+        playNextTrack,
+        playPrevTrack,
+        loading,
+    };
+}
+
+export type MediaPlayer = ReturnType<typeof useMediaPlayer>;

examples/musicPlayer/src/5_HomePage.tsx

@@ -0,0 +1,60 @@
+import { useAccount } from "./2_main";
+import { MediaPlayer } from "./4_useMediaPlayer";
+import { Link } from "./basicComponents/Link";
+import { MusicTrackRow } from "./components/MusicTrackRow";
+import { usePlayState } from "./lib/audio/usePlayState";
+
+export function HomePage({ mediaPlayer }: { mediaPlayer: MediaPlayer }) {
+    const { me } = useAccount({
+        root: {
+            rootPlaylist: {
+                tracks: [{}],
+            },
+            playlists: [{}],
+        },
+    });
+
+    const tracks = me?.root.rootPlaylist.tracks;
+
+    const playState = usePlayState();
+    const isPlaying = playState.value === "play";
+
+    const playlists = me?.root.playlists;
+
+    return (
+        <>
+            {playlists && playlists.length > 0 && (
+                <div className="p-3">
+                    <b>Playlists</b>
+                    <div className="flex py-6 gap-6">
+                        {playlists.map((playlist) => (
+                            <Link
+                                key={playlist.id}
+                                to={`/playlist/${playlist.id}`}
+                            >
+                                {playlist.title}
+                            </Link>
+                        ))}
+                    </div>
+                </div>
+            )}
+            <ul className="flex flex-col">
+                {tracks?.map(
+                    (track) =>
+                        track && (
+                            <MusicTrackRow
+                                track={track}
+                                key={track.id}
+                                isLoading={mediaPlayer.loading === track.id}
+                                isPlaying={
+                                    mediaPlayer.activeTrack?.id === track.id &&
+                                    isPlaying
+                                }
+                                onClick={mediaPlayer.setActiveTrack}
+                            />
+                        ),
+                )}
+            </ul>
+        </>
+    );
+}

examples/musicPlayer/src/6_PlaylistPage.tsx

@@ -0,0 +1,84 @@
+import { createInviteLink } from "jazz-react";
+import { ID } from "jazz-tools";
+import { ChangeEvent } from "react";
+import { useParams } from "react-router";
+import { useAccount, useCoState } from "./2_main";
+import { Playlist } from "./1_schema";
+import { MediaPlayer } from "./4_useMediaPlayer";
+import { addTrackToPlaylist } from "./3_actions";
+import { Button } from "./basicComponents/Button";
+import { Link } from "./basicComponents/Link";
+import { MusicTrackRow } from "./components/MusicTrackRow";
+import { usePlayState } from "./lib/audio/usePlayState";
+import { AddTracksToPlaylistSection } from "./components/AddTracksToPlaylistSection";
+
+export function PlaylistPage({ mediaPlayer }: { mediaPlayer: MediaPlayer }) {
+    const { playlistId } = useParams<{ playlistId: ID<Playlist> }>();
+
+    const playlist = useCoState(Playlist, playlistId, {
+        tracks: [{}],
+    });
+
+    const { me } = useAccount();
+
+    const playState = usePlayState();
+    const isPlaying = playState.value === "play";
+
+    if (!playlist) return null;
+
+    const handlePlaylistTitleChange = (evt: ChangeEvent<HTMLInputElement>) => {
+        playlist.title = evt.target.value;
+    };
+
+    const handlePlaylistShareClick = async () => {
+        if (playlist._owner.myRole() !== "admin") return;
+
+        const inviteLink = createInviteLink(playlist, "reader");
+
+        await navigator.clipboard.writeText(inviteLink);
+
+        alert(`Invite link copied into the clipboard`);
+    };
+
+    return (
+        <>
+            <div className="flex bg-gray-200">
+                <Link to="/">Back</Link>
+
+                <input
+                    className="w-full bg-transparent p-1 m-1"
+                    value={playlist.title}
+                    onChange={handlePlaylistTitleChange}
+                />
+
+                <Button onClick={handlePlaylistShareClick}>Share</Button>
+            </div>
+            <ul className="flex flex-col py-6">
+                {playlist.tracks?.map(
+                    (track) =>
+                        track && (
+                            <MusicTrackRow
+                                track={track}
+                                key={track.id}
+                                isLoading={mediaPlayer.loading === track.id}
+                                isPlaying={
+                                    mediaPlayer.activeTrack?.id === track.id &&
+                                    isPlaying
+                                }
+                                onClick={() => {
+                                    mediaPlayer.setActiveTrack(track, playlist);
+                                }}
+                            />
+                        ),
+                )}
+            </ul>
+
+            <AddTracksToPlaylistSection
+                playlist={playlist}
+                onTrackClick={(track) =>
+                    addTrackToPlaylist(playlist, track, me)
+                }
+            />
+        </>
+    );
+}

examples/musicPlayer/src/7_InvitePage.tsx

@@ -0,0 +1,38 @@
+import { ID } from "jazz-tools";
+import { useCallback } from "react";
+import { useNavigate } from "react-router-dom";
+import { useAcceptInvite, useAccount } from "./2_main";
+import { Playlist } from "./1_schema";
+
+export function InvitePage() {
+    const navigate = useNavigate();
+
+    const { me } = useAccount({
+        root: {
+            playlists: [],
+        },
+    });
+
+    useAcceptInvite({
+        invitedObjectSchema: Playlist,
+        onAccept: useCallback(
+            async (playlistId: ID<Playlist>) => {
+                if (!me) return;
+
+                const playlist = await Playlist.load(playlistId, me, {});
+
+                if (
+                    playlist &&
+                    !me.root.playlists.some((item) => playlist.id === item?.id)
+                ) {
+                    me.root.playlists.push(playlist);
+                }
+
+                navigate("/playlist/" + playlistId);
+            },
+            [navigate, me],
+        ),
+    });
+
+    return <p>Accepting invite....</p>;
+}

examples/musicPlayer/src/basicComponents/Button.tsx

@@ -0,0 +1,20 @@
+import { cn } from "@/lib/utils";
+import { ReactNode } from "react";
+
+export function Button(props: {
+    className?: string;
+    onClick?: () => void;
+    children: ReactNode;
+}) {
+    return (
+        <button
+            onClick={props.onClick}
+            className={cn(
+                "p-2 bg-blue-300 hover:cursor-pointer flex items-center",
+                props.className,
+            )}
+        >
+            {props.children}
+        </button>
+    );
+}

examples/musicPlayer/src/basicComponents/FileUploadButton.tsx

@@ -0,0 +1,23 @@
+import { ReactNode } from "react";
+
+export function FileUploadButton(props: {
+    onFileLoad: (files: FileList) => Promise<void>;
+    children: ReactNode;
+}) {
+    async function handleFileLoad(evt: React.ChangeEvent<HTMLInputElement>) {
+        if (!evt.target.files) return;
+
+        await props.onFileLoad(evt.target.files);
+
+        evt.target.value = "";
+    }
+
+    return (
+        <button className="bg-blue-300 hover:cursor-pointer flex items-center">
+            <label className="flex items-center  cursor-pointer p-2">
+                <input type="file" onChange={handleFileLoad} multiple hidden />
+                {props.children}
+            </label>
+        </button>
+    );
+}

examples/musicPlayer/src/basicComponents/Link.tsx

@@ -0,0 +1,13 @@
+import { ReactNode } from "react";
+import { Link as RouterLink } from "react-router-dom";
+
+export function Link(props: { to: string; children: ReactNode }) {
+    return (
+        <RouterLink
+            to={props.to}
+            className="p-2 w-fit bg-blue-300 hover:cursor-pointer flex items-center"
+        >
+            {props.children}
+        </RouterLink>
+    );
+}

examples/musicPlayer/src/components/AddTracksToPlaylistSection.tsx

@@ -0,0 +1,79 @@
+import { useAccount, useCoState } from "@/2_main";
+import { Playlist, MusicTrack, ListOfTracks } from "@/1_schema";
+import { Button } from "@/basicComponents/Button";
+import { useState } from "react";
+
+export function AddTracksToPlaylistSection({
+    playlist,
+    onTrackClick,
+}: {
+    playlist: Playlist;
+    onTrackClick: (track: MusicTrack) => Promise<void>;
+}) {
+    const { me } = useAccount({
+        root: {
+            rootPlaylist: {
+                tracks: [{}],
+            },
+        },
+    });
+
+    const listOfTracks = useCoState(ListOfTracks, playlist._refs.tracks.id, []);
+
+    const currentTracksIds = new Set(
+        listOfTracks?.map((track) => track?._refs.sourceTrack?.id),
+    );
+    const tracksToAdd = me?.root.rootPlaylist.tracks.filter(
+        (track) => !currentTracksIds.has(track.id),
+    );
+
+    if (!tracksToAdd?.length) return null;
+
+    return (
+        <div>
+            Add tracks to the playlist
+            <ul className="flex flex-col px-1 py-6 gap-6">
+                {tracksToAdd.map((track) => (
+                    <li
+                        key={track.id}
+                        className={"flex items-center gap-6 bg-slate-200"}
+                    >
+                        <AddTrackButton
+                            track={track}
+                            onTrackClick={onTrackClick}
+                        />
+                        {track.title}
+                    </li>
+                ))}
+            </ul>
+        </div>
+    );
+}
+
+function AddTrackButton({
+    track,
+    onTrackClick,
+}: {
+    track: MusicTrack;
+    onTrackClick: (track: MusicTrack) => Promise<void>;
+}) {
+    const [isLoading, setLoading] = useState(false);
+
+    async function handleClick() {
+        if (isLoading) return;
+
+        setLoading(true);
+
+        try {
+            await onTrackClick(track);
+        } finally {
+            setLoading(false);
+        }
+    }
+
+    return (
+        <Button className="py-2 px-4" onClick={handleClick}>
+            {isLoading ? <div className="animate-spin">߷</div> : "+"}
+        </Button>
+    );
+}

examples/musicPlayer/src/components/MusicTrackRow.tsx

@@ -0,0 +1,55 @@
+import { MusicTrack } from "@/1_schema";
+import { cn } from "@/lib/utils";
+import { ChangeEvent } from "react";
+
+export function MusicTrackRow({
+    track,
+    isLoading,
+    isPlaying,
+    onClick,
+}: {
+    track: MusicTrack;
+    isLoading: boolean;
+    isPlaying: boolean;
+    onClick: (track: MusicTrack) => void;
+}) {
+    function handleTrackTitleChange(evt: ChangeEvent<HTMLInputElement>) {
+        track.title = evt.target.value;
+    }
+
+    return (
+        <li
+            className={
+                "flex gap-1  hover:bg-slate-200 group py-2 px-2 cursor-pointer"
+            }
+            onClick={() => onClick(track)}
+        >
+            <button
+                className={cn(
+                    "flex items-center justify-center bg-transparent w-8 h-8 ",
+                    !isPlaying && "group-hover:bg-slate-300 rounded-full",
+                )}
+                onClick={() => onClick(track)}
+            >
+                {isLoading ? (
+                    <div className="animate-spin">߷</div>
+                ) : isPlaying ? (
+                    "⏸️"
+                ) : (
+                    "▶️"
+                )}
+            </button>
+            <div className="relative" onClick={(evt) => evt.stopPropagation()}>
+                <input
+                    className="absolute w-full h-full left-0 bg-transparent px-1"
+                    value={track.title}
+                    onChange={handleTrackTitleChange}
+                    spellCheck="false"
+                />
+                <span className="opacity-0 px-1 w-fit pointer-events-none whitespace-pre">
+                    {track.title}
+                </span>
+            </div>
+        </li>
+    );
+}

examples/musicPlayer/src/components/PlayerControls.tsx

@@ -0,0 +1,53 @@
+import { MediaPlayer } from "@/4_useMediaPlayer";
+import { usePlayState } from "@/lib/audio/usePlayState";
+import { Waveform } from "./Waveform";
+import { useAccount } from "@/2_main";
+import { useMediaEndListener } from "@/lib/audio/useMediaEndListener";
+import { useKeyboardListener } from "@/lib/useKeyboardListener";
+
+export function PlayerControls({ mediaPlayer }: { mediaPlayer: MediaPlayer }) {
+    const playState = usePlayState();
+    const isPlaying = playState.value === "play";
+
+    const activePlaylist = useAccount({
+        root: {
+            activePlaylist: {},
+        },
+    }).me?.root.activePlaylist;
+
+    useMediaEndListener(mediaPlayer.playNextTrack);
+    useKeyboardListener("Space", () => {
+        if (document.activeElement !== document.body) return;
+
+        playState.toggle();
+    });
+
+    if (!mediaPlayer.activeTrack) return null;
+
+    const activeTrackTitle = mediaPlayer.activeTrack.title;
+
+    const head = activePlaylist?.title
+        ? `${activePlaylist.title} / ${activeTrackTitle}`
+        : activeTrackTitle;
+
+    return (
+        <div className=" flex flex-col fixed bottom-0 left-0 border-t-2 w-full p-4 gap-3">
+            <div>Playling: {head}</div>
+            <div className="flex items-center w-full">
+                <div className="flex flex-shrink gap-3 text-xl">
+                    {" "}
+                    <button onClick={mediaPlayer.playPrevTrack}>⏮️</button>
+                    {mediaPlayer.loading ? (
+                        <div className="animate-spin">߷</div>
+                    ) : !isPlaying ? (
+                        <button onClick={playState.toggle}>▶️</button>
+                    ) : (
+                        <button onClick={playState.toggle}>⏸️</button>
+                    )}
+                    <button onClick={mediaPlayer.playNextTrack}>⏭️</button>
+                </div>
+                <Waveform track={mediaPlayer.activeTrack} height={30} />
+            </div>
+        </div>
+    );
+}

examples/musicPlayer/src/components/Waveform.tsx

@@ -0,0 +1,60 @@
+import { useCoState } from "@/2_main";
+import { MusicTrack, MusicTrackWaveform } from "@/1_schema";
+import { usePlayerCurrentTime } from "@/lib/audio/usePlayerCurrentTime";
+import { cn } from "@/lib/utils";
+
+export function Waveform(props: { track: MusicTrack; height: number }) {
+    const { track, height } = props;
+    const waveformData = useCoState(
+        MusicTrackWaveform,
+        track._refs.waveform.id,
+        {},
+    )?.data;
+    const duration = track.duration;
+
+    const currentTime = usePlayerCurrentTime();
+
+    if (!waveformData) {
+        return (
+            <div
+                style={{
+                    height,
+                }}
+            />
+        );
+    }
+
+    const barCount = waveformData.length;
+    const activeBar = Math.ceil(barCount * (currentTime.value / duration));
+
+    function seek(i: number) {
+        currentTime.setValue((i / barCount) * duration);
+    }
+
+    return (
+        <div
+            className="flex justify-center items-end w-full"
+            style={{
+                height,
+                gap: 1,
+            }}
+        >
+            {waveformData.map((value, i) => (
+                <button
+                    type="button"
+                    key={i}
+                    onClick={() => seek(i)}
+                    className={cn(
+                        "w-1 transition-colors rounded-none rounded-t-lg min-h-1",
+                        activeBar >= i ? "bg-gray-500" : "bg-gray-300",
+                        "hover:bg-black hover:border-1 hover:border-solid hover:border-black",
+                        "focus-visible:outline-black focus:outline-none",
+                    )}
+                    style={{
+                        height: height * value,
+                    }}
+                />
+            ))}
+        </div>
+    );
+}

examples/musicPlayer/src/lib/audio/AudioManager.ts

@@ -0,0 +1,56 @@
+import { createContext, useContext } from "react";
+
+export class AudioManager {
+    mediaElement: HTMLAudioElement;
+
+    audioObjectURL: string | null = null;
+
+    constructor() {
+        const mediaElement = new Audio();
+
+        this.mediaElement = mediaElement;
+    }
+
+    async unloadCurrentAudio() {
+        if (this.audioObjectURL) {
+            URL.revokeObjectURL(this.audioObjectURL);
+            this.audioObjectURL = null;
+        }
+    }
+
+    async loadAudio(file: Blob) {
+        await this.unloadCurrentAudio();
+
+        const { mediaElement } = this;
+        const audioObjectURL = URL.createObjectURL(file);
+
+        this.audioObjectURL = audioObjectURL;
+
+        mediaElement.src = audioObjectURL;
+    }
+
+    play() {
+        if (this.mediaElement.ended) {
+            this.mediaElement.fastSeek(0);
+        }
+
+        this.mediaElement.play();
+    }
+
+    pause() {
+        this.mediaElement.pause();
+    }
+
+    destroy() {
+        this.unloadCurrentAudio();
+        this.mediaElement.pause();
+    }
+}
+
+const context = createContext<AudioManager>(new AudioManager());
+
+export function useAudioManager() {
+    return useContext(context);
+}
+
+export const AudionManagerProvider = context.Provider;

examples/musicPlayer/src/lib/audio/getAudioFileData.ts

@@ -0,0 +1,45 @@
+export async function getAudioFileData(file: Blob, samples = 200) {
+    const ctx = new AudioContext();
+
+    const buffer = await file.arrayBuffer();
+    const decodedAudio = await ctx.decodeAudioData(buffer);
+
+    return {
+        waveform: transformDecodedAudioToWaveformData(decodedAudio, samples),
+        duration: decodedAudio.duration,
+    };
+}
+
+const transformDecodedAudioToWaveformData = (
+    audioBuffer: AudioBuffer,
+    samples: number,
+) => {
+    const rawData = audioBuffer.getChannelData(0); // We only need to work with one channel of data
+    const blockSize = Math.floor(rawData.length / samples); // the number of samples in each subdivision
+
+    const sampledData: number[] = new Array(samples);
+    let max = 0;
+
+    for (let i = 0; i < samples; i++) {
+        const blockStart = blockSize * i; // the location of the first sample in the block
+        let sum = 0;
+        for (let j = 0; j < blockSize; j++) {
+            sum = sum + Math.abs(rawData[blockStart + j]); // find the sum of all the samples in the block
+        }
+        const sampledValue = sum / blockSize; // divide the sum by the block size to get the average
+
+        if (max < sampledValue) {
+            max = sampledValue;
+        }
+
+        sampledData[i] = sampledValue;
+    }
+
+    const multiplier = max ** -1;
+
+    for (let i = 0; i < samples; i++) {
+        sampledData[i] = sampledData[i] * multiplier;
+    }
+
+    return sampledData;
+};

examples/musicPlayer/src/lib/audio/useMediaEndListener.ts

@@ -0,0 +1,14 @@
+import { useEffect } from "react";
+import { useAudioManager } from "./AudioManager";
+
+export function useMediaEndListener(callback: () => void) {
+    const audioManager = useAudioManager();
+
+    useEffect(() => {
+        audioManager.mediaElement.addEventListener("ended", callback);
+
+        return () => {
+            audioManager.mediaElement.removeEventListener("ended", callback);
+        };
+    }, [audioManager, callback]);
+}

examples/musicPlayer/src/lib/audio/usePlayMedia.ts

@@ -0,0 +1,24 @@
+import { useRef } from "react";
+import { useAudioManager } from "./AudioManager";
+
+export function usePlayMedia() {
+    const audioManager = useAudioManager();
+
+    const previousMediaLoad = useRef<Promise<unknown>>();
+
+    async function playMedia(file: Blob) {
+        // Wait for the previous load to finish
+        // to avoid to incur into concurrency issues
+        await previousMediaLoad.current;
+
+        const promise = audioManager.loadAudio(file);
+
+        previousMediaLoad.current = promise;
+
+        await promise;
+
+        audioManager.play();
+    }
+
+    return playMedia;
+}

examples/musicPlayer/src/lib/audio/usePlayState.ts

@@ -0,0 +1,39 @@
+import { useLayoutEffect, useState } from "react";
+import { useAudioManager } from "./AudioManager";
+
+export type PlayState = "pause" | "play";
+
+export function usePlayState() {
+    const audioManager = useAudioManager();
+    const [value, setValue] = useState<PlayState>("pause");
+
+    useLayoutEffect(() => {
+        setValue(audioManager.mediaElement.paused ? "pause" : "play");
+
+        const onPlay = () => {
+            setValue("play");
+        };
+
+        const onPause = () => {
+            setValue("pause");
+        };
+
+        audioManager.mediaElement.addEventListener("play", onPlay);
+        audioManager.mediaElement.addEventListener("pause", onPause);
+
+        return () => {
+            audioManager.mediaElement.removeEventListener("play", onPlay);
+            audioManager.mediaElement.removeEventListener("pause", onPause);
+        };
+    }, [audioManager]);
+
+    function togglePlayState() {
+        if (value === "pause") {
+            audioManager.play();
+        } else {
+            audioManager.pause();
+        }
+    }
+
+    return { value, toggle: togglePlayState };
+}

examples/musicPlayer/src/lib/audio/usePlayerCurrentTime.ts

@@ -0,0 +1,32 @@
+import { useLayoutEffect, useState } from "react";
+import { useAudioManager } from "./AudioManager";
+
+export function usePlayerCurrentTime() {
+	const audioManager = useAudioManager();
+	const [value, setValue] = useState<number>(0);
+
+	useLayoutEffect(() => {
+		setValue(audioManager.mediaElement.currentTime);
+
+		const onTimeUpdate = () => {
+			setValue(audioManager.mediaElement.currentTime);
+		};
+
+		audioManager.mediaElement.addEventListener("timeupdate", onTimeUpdate);
+
+		return () => {
+			audioManager.mediaElement.removeEventListener("timeupdate", onTimeUpdate);
+		};
+	}, [audioManager]);
+
+	function setCurrentTime(time: number) {
+		if (audioManager.mediaElement.paused) audioManager.play();
+
+		audioManager.mediaElement.currentTime = time;
+	}
+
+	return {
+		value,
+		setValue: setCurrentTime,
+	};
+}

examples/musicPlayer/src/lib/getters.ts

@@ -0,0 +1,30 @@
+import { MusicaAccount } from "../1_schema";
+
+export async function getNextTrack(account: MusicaAccount) {
+    if (!account.root?.activePlaylist?.tracks) return;
+
+    const tracks = account.root.activePlaylist.tracks;
+    const activeTrack = account.root._refs.activeTrack;
+
+    const currentIndex = tracks.findIndex(
+        (item) => item?.id === activeTrack.id,
+    );
+
+    const nextIndex = (currentIndex + 1) % tracks.length;
+
+    return tracks[nextIndex];
+}
+
+export async function getPrevTrack(account: MusicaAccount) {
+    if (!account.root?.activePlaylist?.tracks) return;
+
+    const tracks = account.root.activePlaylist.tracks;
+    const activeTrack = account.root._refs.activeTrack;
+
+    const currentIndex = tracks.findIndex(
+        (item) => item?.id === activeTrack.id,
+    );
+
+    const previousIndex = (currentIndex - 1 + tracks.length) % tracks.length;
+    return tracks[previousIndex];
+}

examples/musicPlayer/src/lib/useKeyboardListener.ts

@@ -0,0 +1,16 @@
+import { useEffect } from "react";
+
+export function useKeyboardListener(code: string, callback: () => void) {
+    useEffect(() => {
+        const handler = (evt: KeyboardEvent) => {
+            if (evt.code === code) {
+                callback();
+            }
+        };
+        window.addEventListener("keyup", handler);
+
+        return () => {
+            window.removeEventListener("keyup", handler);
+        };
+    }, [callback, code]);
+}

examples/musicPlayer/src/lib/useUploadExampleData.ts

@@ -0,0 +1,28 @@
+import { useEffect } from "react";
+import { useAccount } from "../2_main";
+import { uploadMusicTracks } from "@/3_actions";
+import { MusicaAccount } from "@/1_schema";
+
+export function useUploadExampleData() {
+    const { me } = useAccount({
+        root: {}
+    });
+
+    const shouldUploadOnboardingData = me?.root?.exampleDataLoaded === false;
+
+    useEffect(() => {
+        if (me?.root && shouldUploadOnboardingData) {
+            me.root.exampleDataLoaded = true;
+
+            uploadOnboardingData(me).then(() => {
+                me.root.exampleDataLoaded = true;
+            });
+        }
+    }, [shouldUploadOnboardingData])
+}
+
+async function uploadOnboardingData(me: MusicaAccount) {
+    const trackFile = await (await fetch("/example.mp3")).blob();
+
+    return uploadMusicTracks(me, [new File([trackFile], "Example song")]);
+}

examples/musicPlayer/src/lib/utils.ts

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