wip

2024-10-09 17:52:55 +01:00 · 2024-10-09 17:37:42 +01:00 · 2024-10-09 17:29:39 +01:00 · 2024-10-09 17:13:32 +01:00 · 2024-10-09 10:55:09 +01:00 · 2024-10-09 10:50:52 +01:00
237 changed files with 15972 additions and 2258 deletions
--- a/.changeset/config.json
+++ b/.changeset/config.json
@@ -12,6 +12,7 @@
            "jazz-browser-auth-clerk",
            "jazz-react-auth-clerk",
            "jazz-react",
+            "jazz-react-native",
            "jazz-nodejs",
            "jazz-run",
            "cojson-transport-ws",
--- a/.changeset/twenty-moons-search.md
+++ b/.changeset/twenty-moons-search.md
@@ -0,0 +1,6 @@
+---
+"jazz-tools": patch
+"cojson": patch
+---
+
+Allow interface types as generic argument in co.json
--- a/.github/workflows/playwright.yml
+++ b/.github/workflows/playwright.yml
@@ -10,9 +10,10 @@ jobs:
  test:
    timeout-minutes: 60
    runs-on: ubuntu-latest
+    continue-on-error: true
    strategy:
      matrix:
-        project: ["e2e/BinaryCoStream", "examples/pets"]
+        project: ["e2e/BinaryCoStream", "e2e/CoValues", "examples/chat", "examples/pets"]

    steps:
      - uses: actions/checkout@v3
@@ -45,8 +46,12 @@ jobs:
        run: pnpm install --frozen-lockfile

      - name: Pnpm Build
-        run: pnpm turbo build;
+        run: pnpm turbo build
        working-directory: ./${{ matrix.project }}
+      
+      - name: Build jazz-run
+        run: pnpm exec turbo build && chmod +x dist/index.js;
+        working-directory: ./packages/jazz-run

      - name: Install Playwright Browsers
        run: pnpm exec playwright install --with-deps
--- a/.github/workflows/unit-test.yml
+++ b/.github/workflows/unit-test.yml
@@ -41,7 +41,7 @@ jobs:
        run: pnpm install --frozen-lockfile

      - name: Pnpm Build
-        run: pnpm turbo build;
+        run: pnpm turbo build

      - name: Unit Tests
        run: pnpm test
--- a/.npmrc
+++ b/.npmrc
@@ -0,0 +1 @@
+node-linker=hoisted
--- a/.prettierrc.js
+++ b/.prettierrc.js
@@ -0,0 +1,9 @@
+/** @type {import("prettier").Config} */
+const config = {
+    trailingComma: "all",
+    tabWidth: 4,
+    semi: true,
+    singleQuote: false,
+};
+
+export default config;
--- a/e2e/BinaryCoStream/CHANGELOG.md
+++ b/e2e/BinaryCoStream/CHANGELOG.md
@@ -1,9 +1,33 @@
 # @jazz-e2e/binarycostream

+## 0.0.85
+
+### Patch Changes
+
+-   Updated dependencies
+    -   hash-slash@0.2.1
+
+## 0.0.84
+
+### Patch Changes
+
+-   Updated dependencies
+    -   cojson@0.8.3
+    -   jazz-react@0.8.3
+    -   jazz-tools@0.8.3
+
+## 0.0.83
+
+### Patch Changes
+
+-   Updated dependencies [a075f90]
+    -   jazz-tools@0.8.2
+    -   jazz-react@0.8.2
+
 ## 0.0.82

 ### Patch Changes

- Updated dependencies
-  - jazz-tools@0.8.1
-  - jazz-react@0.8.1
+-   Updated dependencies
+    -   jazz-tools@0.8.1
+    -   jazz-react@0.8.1
--- a/e2e/BinaryCoStream/index.html
+++ b/e2e/BinaryCoStream/index.html
@@ -5,7 +5,7 @@
    <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 Chat Example</title>
+    <title>Jazz BinaryCoStream Tests</title>
  </head>
  <body>
    <div id="root"></div>
--- a/e2e/BinaryCoStream/package.json
+++ b/e2e/BinaryCoStream/package.json
@@ -1,7 +1,7 @@
 {
  "name": "@jazz-e2e/binarycostream",
  "private": true,
-  "version": "0.0.82",
+  "version": "0.0.85",
  "type": "module",
  "scripts": {
    "dev": "vite",
@@ -14,11 +14,11 @@
    "*.{js,jsx,mdx,json}": "prettier --write"
  },
  "dependencies": {
-    "cojson": "workspace:0.8.0",
-    "hash-slash": "workspace:0.2.0",
+    "cojson": "workspace:0.8.3",
+    "hash-slash": "workspace:0.2.1",
    "is-ci": "^3.0.1",
-    "jazz-react": "workspace:0.8.1",
-    "jazz-tools": "workspace:0.8.1",
+    "jazz-react": "workspace:0.8.3",
+    "jazz-tools": "workspace:0.8.3",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
--- a/e2e/CoValues/.gitignore
+++ b/e2e/CoValues/.gitignore
@@ -0,0 +1,30 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+sync-db/
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
--- a/e2e/CoValues/CHANGELOG.md
+++ b/e2e/CoValues/CHANGELOG.md
@@ -0,0 +1,25 @@
+# @jazz-e2e/covalues
+
+## 0.0.84
+
+### Patch Changes
+
+-   Updated dependencies
+    -   hash-slash@0.2.1
+
+## 0.0.83
+
+### Patch Changes
+
+-   Updated dependencies
+    -   cojson@0.8.3
+    -   jazz-react@0.8.3
+    -   jazz-tools@0.8.3
+
+## 0.0.82
+
+### Patch Changes
+
+-   Updated dependencies [a075f90]
+    -   jazz-tools@0.8.2
+    -   jazz-react@0.8.2
--- a/e2e/CoValues/index.html
+++ b/e2e/CoValues/index.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <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 CoValues tests</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/app.tsx"></script>
+  </body>
+</html>
--- a/e2e/CoValues/package.json
+++ b/e2e/CoValues/package.json
@@ -0,0 +1,37 @@
+{
+  "name": "@jazz-e2e/covalues",
+  "private": true,
+  "version": "0.0.84",
+  "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:*",
+    "hash-slash": "workspace:*",
+    "is-ci": "^3.0.1",
+    "jazz-react": "workspace:*",
+    "jazz-tools": "workspace:*",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router": "^6.16.0",
+    "react-router-dom": "^6.16.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",
+    "jstat": "^1.9.6",
+    "typescript": "^5.3.3",
+    "vite": "^5.0.10"
+  }
+}
--- a/e2e/CoValues/playwright.config.ts
+++ b/e2e/CoValues/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,
+});
--- a/e2e/CoValues/src/app.tsx
+++ b/e2e/CoValues/src/app.tsx
@@ -0,0 +1,25 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import { AuthAndJazz } from "./jazz";
+import { TestInput } from "./pages/TestInput";
+import { RouterProvider, createHashRouter } from "react-router-dom";
+
+const router = createHashRouter([
+  {
+      path: "/",
+      element: <TestInput />,
+  },
+  {
+      path: "/test-input",
+      element: <TestInput />,
+  },
+]);
+
+
+ReactDOM.createRoot(document.getElementById("root")!).render(
+  <React.StrictMode>
+      <AuthAndJazz>
+          <RouterProvider router={router} />
+      </AuthAndJazz>
+  </React.StrictMode>,
+);
--- a/e2e/CoValues/src/jazz.tsx
+++ b/e2e/CoValues/src/jazz.tsx
@@ -0,0 +1,25 @@
+import { createJazzReactApp } from "jazz-react";
+import { ephemeralCredentialsAuth } from "jazz-tools";
+import { useState } from "react";
+
+const key = `test-comap@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>
+  );
+}
--- a/e2e/CoValues/src/pages/TestInput.tsx
+++ b/e2e/CoValues/src/pages/TestInput.tsx
@@ -0,0 +1,35 @@
+import { co, CoMap, Group, ID } from "jazz-tools";
+import { useAccount, useCoState } from "../jazz";
+import { useEffect, useState } from "react";
+
+export class InputTestCoMap extends CoMap {
+  title = co.string;
+}
+
+export function TestInput() {
+  const [id, setId] = useState<ID<InputTestCoMap> | undefined>(undefined);
+  const coMap = useCoState(InputTestCoMap, id);
+  const { me } = useAccount();
+
+  useEffect(() => {
+    if (!me || id) return;
+
+    const group = Group.create({ owner: me });
+
+    group.addMember("everyone", "writer");
+
+    setId(InputTestCoMap.create({ title: "" }, { owner: group }).id);
+  }, [me]);
+
+  if (!coMap) return null;
+
+  return (
+    <input
+      value={coMap?.title ?? ""}
+      onChange={(e) => {
+        if (!coMap) return;
+        coMap.title = e.target.value;
+      }}
+    />
+  );
+}
--- a/e2e/CoValues/src/vite-env.d.ts
+++ b/e2e/CoValues/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
--- a/e2e/CoValues/tests/TestInput.spec.ts
+++ b/e2e/CoValues/tests/TestInput.spec.ts
@@ -0,0 +1,14 @@
+import { test, expect } from "@playwright/test";
+
+test.describe("CoMap - TestInput", () => {
+  test("should keep the cursor position when typing", async ({ page }) => {
+    await page.goto("/test-input");
+
+    await page.getByRole("textbox").fill("xx");
+    await page.getByRole('textbox').press('ArrowLeft');
+    await page.getByRole("textbox").press("y");
+    await page.getByRole("textbox").press("y");
+
+    await expect(page.getByRole('textbox')).toHaveValue("xyyx");
+  });
+});
--- a/e2e/CoValues/tsconfig.json
+++ b/e2e/CoValues/tsconfig.json
@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2023", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "baseUrl": "."
+  },
+  "include": ["src"],
+}
--- a/e2e/CoValues/vite.config.ts
+++ b/e2e/CoValues/vite.config.ts
@@ -0,0 +1,10 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react-swc'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  build: {
+    minify: false
+  }
+})
--- a/examples/chat-clerk/CHANGELOG.md
+++ b/examples/chat-clerk/CHANGELOG.md
@@ -1,5 +1,31 @@
 # jazz-example-chat

+## 0.0.84
+
+### Patch Changes
+
+- Updated dependencies
+  - hash-slash@0.2.1
+
+## 0.0.83
+
+### Patch Changes
+
+- Updated dependencies
+  - cojson@0.8.3
+  - jazz-react@0.8.3
+  - jazz-react-auth-clerk@0.8.3
+  - jazz-tools@0.8.3
+
+## 0.0.82
+
+### Patch Changes
+
+- Updated dependencies [a075f90]
+  - jazz-tools@0.8.2
+  - jazz-react@0.8.2
+  - jazz-react-auth-clerk@0.8.2
+
 ## 0.0.81

 ### Patch Changes
--- a/examples/chat-clerk/package.json
+++ b/examples/chat-clerk/package.json
@@ -1,7 +1,7 @@
 {
  "name": "jazz-example-chat-clerk",
  "private": true,
-  "version": "0.0.81",
+  "version": "0.0.84",
  "type": "module",
  "scripts": {
    "dev": "vite",
@@ -21,11 +21,11 @@
    "@radix-ui/react-toast": "^1.1.4",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.0.0",
-    "cojson": "workspace:0.8.0",
-    "hash-slash": "workspace:0.2.0",
-    "jazz-react": "workspace:0.8.1",
-    "jazz-react-auth-clerk": "workspace:0.8.1",
-    "jazz-tools": "workspace:0.8.1",
+    "cojson": "workspace:0.8.3",
+    "hash-slash": "workspace:0.2.1",
+    "jazz-react": "workspace:0.8.3",
+    "jazz-react-auth-clerk": "workspace:0.8.3",
+    "jazz-tools": "workspace:0.8.3",
    "lucide-react": "^0.274.0",
    "qrcode": "^1.5.3",
    "react": "^18.2.0",
@@ -49,7 +49,7 @@
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.3",
    "postcss": "^8.4.27",
-    "tailwindcss": "^3.3.3",
+    "tailwindcss": "3.3.2",
    "typescript": "^5.3.3",
    "vite": "^5.0.10"
  }
--- a/examples/chat-clerk/src/app.tsx
+++ b/examples/chat-clerk/src/app.tsx
@@ -7,13 +7,14 @@ import { AppContainer, TopBar } from "./ui.tsx";

 export function App() {
  const { me, logOut } = useAccount();
+  const router = useIframeHashRouter();

  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;
+    router.navigate("/#/chat/" + chat.id);
  };

  return (
@@ -21,7 +22,7 @@ export function App() {
      <TopBar>
        {me?.profile?.name} · <button onClick={logOut}>Log out</button>
      </TopBar>
-      {useIframeHashRouter().route({
+      {router.route({
        "/": () => createChat() as never,
        "/chat/:id": id => <ChatScreen chatID={id as ID<Chat>} />,
      })}
--- a/examples/chat-rn/.gitignore
+++ b/examples/chat-rn/.gitignore
@@ -0,0 +1,38 @@
+# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files
+
+# dependencies
+node_modules/
+
+# Expo
+.expo/
+dist/
+web-build/
+
+# Native
+*.orig.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+
+# Metro
+.metro-health-check*
+
+# debug
+npm-debug.*
+yarn-debug.*
+yarn-error.*
+
+# macOS
+.DS_Store
+*.pem
+
+# local env files
+.env*.local
+
+# typescript
+*.tsbuildinfo
+
+ios
+android
--- a/examples/chat-rn/CHANGELOG.md
+++ b/examples/chat-rn/CHANGELOG.md
@@ -0,0 +1,9 @@
+# chat-rn
+
+## 1.0.1
+
+### Patch Changes
+
+-   Updated dependencies
+    -   jazz-react-native@0.8.3
+    -   jazz-tools@0.8.3
--- a/examples/chat-rn/app.json
+++ b/examples/chat-rn/app.json
@@ -0,0 +1,46 @@
+{
+  "expo": {
+    "name": "jazz-chat-rn",
+    "scheme": "jazz-chat-rn",
+    "slug": "jazz-chat-rn",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "userInterfaceStyle": "light",
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "ios": {
+      "supportsTablet": true,
+      "bundleIdentifier": "com.jazz.chatrn"
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/adaptive-icon.png",
+        "backgroundColor": "#ffffff"
+      },
+      "package": "com.jazz.chatrn"
+    },
+    "plugins": [
+      [
+        "expo-build-properties",
+        {
+          "ios": {
+            "newArchEnabled": true
+          },
+          "android": {
+            "newArchEnabled": true
+          }
+        }
+      ]
+    ],
+    "extra": {
+      "eas": {
+        "projectId": "e0e61872-1906-4c84-b9d8-9be77355cad0"
+      }
+    },
+    "owner": "paxx"
+  }
+}
--- a/examples/chat-rn/assets/adaptive-icon.png
+++ b/examples/chat-rn/assets/adaptive-icon.png
--- a/examples/chat-rn/assets/favicon.png
+++ b/examples/chat-rn/assets/favicon.png
--- a/examples/chat-rn/assets/icon.png
+++ b/examples/chat-rn/assets/icon.png
--- a/examples/chat-rn/assets/splash.png
+++ b/examples/chat-rn/assets/splash.png
--- a/examples/chat-rn/babel.config.js
+++ b/examples/chat-rn/babel.config.js
@@ -0,0 +1,10 @@
+module.exports = function (api) {
+    api.cache(true);
+    return {
+        presets: ["babel-preset-expo"],
+        plugins: [
+            "nativewind/babel",
+            "@babel/plugin-transform-class-static-block",
+        ],
+    };
+};
--- a/examples/chat-rn/eas.json
+++ b/examples/chat-rn/eas.json
@@ -0,0 +1,27 @@
+{
+    "cli": {
+        "version": ">= 12.5.1",
+        "appVersionSource": "remote"
+    },
+    "build": {
+        "development": {
+            "developmentClient": true,
+            "distribution": "internal"
+        },
+        "ios-simulator": {
+            "extends": "development",
+            "ios": {
+                "simulator": true
+            }
+        },
+        "preview": {
+            "distribution": "internal"
+        },
+        "production": {
+            "autoIncrement": true
+        }
+    },
+    "submit": {
+        "production": {}
+    }
+}
--- a/examples/chat-rn/index.js
+++ b/examples/chat-rn/index.js
@@ -0,0 +1,5 @@
+import "./polyfills";
+import { registerRootComponent } from "expo";
+import App from "./src/App";
+
+registerRootComponent(App);
--- a/examples/chat-rn/metro.config.js
+++ b/examples/chat-rn/metro.config.js
@@ -0,0 +1,29 @@
+// Learn more https://docs.expo.dev/guides/monorepos
+const { getDefaultConfig } = require("expo/metro-config");
+const { FileStore } = require("metro-cache");
+const path = require("path");
+
+const projectRoot = __dirname;
+const workspaceRoot = path.resolve(projectRoot, "../..");
+
+const config = getDefaultConfig(projectRoot);
+
+// Since we are using pnpm, we have to setup the monorepo manually for Metro
+// #1 - Watch all files in the monorepo
+config.watchFolders = [workspaceRoot];
+// #2 - Try resolving with project modules first, then workspace modules
+config.resolver.nodeModulesPaths = [
+    path.resolve(projectRoot, "node_modules"),
+    path.resolve(workspaceRoot, "node_modules"),
+];
+config.resolver.sourceExts = ["js", "json", "ts", "tsx"];
+config.resolver.unstable_enablePackageExports = true;
+
+// Use turborepo to restore the cache when possible
+config.cacheStores = [
+    new FileStore({
+        root: path.join(projectRoot, "node_modules", ".cache", "metro"),
+    }),
+];
+
+module.exports = config;
--- a/examples/chat-rn/nativewind-env.d.ts
+++ b/examples/chat-rn/nativewind-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="nativewind/types" />
--- a/examples/chat-rn/package.json
+++ b/examples/chat-rn/package.json
@@ -0,0 +1,49 @@
+{
+    "name": "chat-rn",
+    "version": "1.0.1",
+    "main": "index.js",
+    "scripts": {
+        "start": "expo start",
+        "android": "expo run:android",
+        "ios": "expo run:ios",
+        "web": "expo start --web"
+    },
+    "dependencies": {
+        "@azure/core-asynciterator-polyfill": "^1.0.2",
+        "@react-native-community/netinfo": "^11.3.1",
+        "@react-navigation/native": "^6.1.18",
+        "@react-navigation/native-stack": "^6.11.0",
+        "base-64": "^1.0.0",
+        "clsx": "^2.0.0",
+        "expo": "~51.0.36",
+        "expo-build-properties": "~0.12.5",
+        "expo-clipboard": "~6.0.3",
+        "expo-constants": "~16.0.2",
+        "expo-crypto": "~13.0.2",
+        "expo-dev-client": "~4.0.27",
+        "expo-linking": "~6.3.1",
+        "expo-status-bar": "~1.12.1",
+        "jazz-react-native": "workspace:*",
+        "jazz-tools": "workspace:*",
+        "nativewind": "^2.0.11",
+        "react": "^18.2.0",
+        "react-native": "~0.74.5",
+        "react-native-fetch-api": "^3.0.0",
+        "react-native-get-random-values": "^1.11.0",
+        "react-native-mmkv": "3.0.1",
+        "react-native-polyfill-globals": "^3.1.0",
+        "react-native-safe-area-context": "4.10.5",
+        "react-native-screens": "3.31.1",
+        "react-native-url-polyfill": "^2.0.0",
+        "text-encoding": "^0.7.0",
+        "web-streams-polyfill": "^3.2.1"
+    },
+    "devDependencies": {
+        "@babel/core": "^7.20.0",
+        "@babel/plugin-transform-class-static-block": "^7.24.7",
+        "@types/react": "^18.2.19",
+        "tailwindcss": "3.3.2",
+        "typescript": "^5.3.3"
+    },
+    "private": true
+}
--- a/examples/chat-rn/polyfills.js
+++ b/examples/chat-rn/polyfills.js
@@ -0,0 +1,6 @@
+import "react-native-polyfill-globals/auto";
+import "@azure/core-asynciterator-polyfill";
+import { ReadableStream } from "web-streams-polyfill/ponyfill/es6";
+import { polyfillGlobal } from "react-native/Libraries/Utilities/PolyfillFunctions";
+
+polyfillGlobal("ReadableStream", () => ReadableStream);
--- a/examples/chat-rn/src/App.tsx
+++ b/examples/chat-rn/src/App.tsx
@@ -0,0 +1,78 @@
+import React, { StrictMode, useEffect, useState } from "react";
+import {
+    NavigationContainer,
+    useNavigationContainerRef,
+} from "@react-navigation/native";
+import { createNativeStackNavigator } from "@react-navigation/native-stack";
+import * as Linking from "expo-linking";
+import HandleInviteScreen from "./invite";
+
+import { useDemoAuth, DemoAuthBasicUI } from "jazz-react-native";
+import ChatScreen from "./chat";
+import { Jazz } from "./jazz";
+
+const Stack = createNativeStackNavigator();
+
+const prefix = Linking.createURL("/");
+
+const linking = {
+    prefixes: [prefix],
+    config: {
+        screens: {
+            HandleInviteScreen: {
+                path: "router/invite/:valueHint?/:valueID/:inviteSecret",
+            },
+        },
+    },
+};
+
+function App() {
+    const [auth, state] = useDemoAuth();
+    const [initialRoute, setInitialRoute] = useState<
+        "ChatScreen" | "HandleInviteScreen"
+    >("ChatScreen");
+    const navigationRef = useNavigationContainerRef();
+
+    useEffect(() => {
+        Linking.getInitialURL().then((url) => {
+            if (url) {
+                if (url && url.includes("invite")) {
+                    setInitialRoute("HandleInviteScreen");
+                }
+            }
+        });
+    }, []);
+
+    if (!auth) {
+        return null;
+    }
+
+    return (
+        <StrictMode>
+            <Jazz.Provider
+                auth={auth}
+                peer="wss://mesh.jazz.tools/?key=chat-rn-example-jazz@gcmp.io"
+                storage={undefined}
+            >
+                <NavigationContainer linking={linking} ref={navigationRef}>
+                    <Stack.Navigator initialRouteName={initialRoute}>
+                        <Stack.Screen
+                            options={{ title: "Jazz Chat" }}
+                            name="ChatScreen"
+                            component={ChatScreen}
+                        />
+                        <Stack.Screen
+                            name="HandleInviteScreen"
+                            component={HandleInviteScreen}
+                        />
+                    </Stack.Navigator>
+                </NavigationContainer>
+            </Jazz.Provider>
+            {state.state !== "signedIn" ? (
+                <DemoAuthBasicUI appName="Jazz Chat" state={state} />
+            ) : null}
+        </StrictMode>
+    );
+}
+
+export default App;
--- a/examples/chat-rn/src/chat.tsx
+++ b/examples/chat-rn/src/chat.tsx
@@ -0,0 +1,208 @@
+import { useEffect, useState } from "react";
+import React, {
+    Button,
+    FlatList,
+    KeyboardAvoidingView,
+    SafeAreaView,
+    Text,
+    TextInput,
+    TouchableOpacity,
+    View,
+    Alert,
+} from "react-native";
+import { Group, ID } from "jazz-tools";
+import clsx from "clsx";
+import * as Clipboard from "expo-clipboard";
+
+import { Chat, Message } from "./schema";
+import { useAccount, useCoState } from "./jazz";
+
+export default function ChatScreen({ navigation }: { navigation: any }) {
+    const { me, logOut } = useAccount();
+    const [chat, setChat] = useState<Chat>();
+    const [message, setMessage] = useState("");
+    const loadedChat = useCoState(Chat, chat?.id, [{}]);
+    const [isLoading, setIsLoading] = useState(false);
+
+    useEffect(() => {
+        navigation.setOptions({
+            headerRight: () => <Button onPress={logOut} title="Logout" />,
+            headerLeft: () =>
+                chat ? (
+                    <Button
+                        onPress={() => {
+                            if (chat?.id) {
+                                Clipboard.setStringAsync(
+                                    `https://chat.jazz.tools/#/chat/${chat.id}`,
+                                );
+                                Alert.alert(
+                                    "Copied to clipboard",
+                                    `Chat ID: ${chat.id}`,
+                                );
+                            }
+                        }}
+                        title="Share"
+                    />
+                ) : null,
+        });
+    }, [navigation, chat]);
+
+    const createChat = () => {
+        const group = Group.create({ owner: me });
+        group.addMember("everyone", "writer");
+        const chat = Chat.create([], { owner: group });
+        setChat(chat);
+    };
+
+    const loadChat = async (chatId: ID<Chat>) => {
+        try {
+            const chat = await Chat.load(chatId, me, []);
+            setChat(chat);
+        } catch (error) {
+            console.log("Error loading chat", error);
+            Alert.alert("Error", `Error loading chat: ${error}`);
+        }
+    };
+
+    const joinChat = () => {
+        Alert.prompt(
+            "Join Chat",
+            "Enter the Chat ID (example: co_zBGEHYvRfGuT2YSBraY3njGjnde)",
+            [
+                {
+                    text: "Cancel",
+                    style: "cancel",
+                },
+                {
+                    text: "Join",
+                    onPress: (chatId) => {
+                        if (chatId) {
+                            loadChat(chatId as ID<Chat>);
+                        } else {
+                            Alert.alert("Error", "Chat ID cannot be empty.");
+                        }
+                    },
+                },
+            ],
+            "plain-text",
+        );
+    };
+
+    const sendMessage = () => {
+        if (!chat) return;
+        if (message.trim()) {
+            chat.push(
+                Message.create({ text: message }, { owner: chat._owner }),
+            );
+            setMessage("");
+        }
+    };
+
+    const renderMessageItem = ({ item }: { item: Message }) => {
+        const isMe = item._edits.text.by?.isMe;
+        return (
+            <View
+                className={clsx(
+                    `rounded-lg p-1 px-1.5 max-w-[80%] `,
+
+                    isMe
+                        ? `bg-gray-200 self-end text-right`
+                        : `bg-gray-300 self-start `,
+                )}
+            >
+                {!isMe ? (
+                    <Text
+                        className={clsx(
+                            `text-xs text-gray-500`,
+                            isMe ? "text-right" : "text-left",
+                        )}
+                    >
+                        {item._edits.text.by?.profile?.name}
+                    </Text>
+                ) : null}
+                <View
+                    className={clsx(
+                        "flex relative items-end justify-between",
+                        isMe ? "flex-row" : "flex-row",
+                    )}
+                >
+                    <Text className={clsx(`text-black text-md max-w-[85%]`)}>
+                        {item.text}
+                    </Text>
+                    <Text
+                        className={clsx(
+                            "text-[10px] text-gray-500 text-right ml-2",
+                            !isMe ? "mt-2" : "mt-1",
+                        )}
+                    >
+                        {item._edits.text.madeAt.getHours()}:
+                        {item._edits.text.madeAt.getMinutes()}
+                    </Text>
+                </View>
+            </View>
+        );
+    };
+
+    return (
+        <View className="flex flex-col h-full">
+            {!chat ? (
+                <View className="flex flex-col h-full items-center justify-center">
+                    <TouchableOpacity
+                        onPress={createChat}
+                        className="bg-blue-500 p-4 rounded-md"
+                    >
+                        <Text className="text-white font-semibold">
+                            Start new chat
+                        </Text>
+                    </TouchableOpacity>
+                    <TouchableOpacity
+                        onPress={joinChat}
+                        className="bg-green-500 p-4 rounded-md mt-4"
+                    >
+                        <Text className="text-white font-semibold">
+                            Join chat
+                        </Text>
+                    </TouchableOpacity>
+                </View>
+            ) : (
+                <>
+                    <FlatList
+                        contentContainerStyle={{
+                            flexGrow: 1,
+                            flex: 1,
+                            gap: 6,
+                            padding: 8,
+                        }}
+                        className="flex"
+                        data={loadedChat}
+                        keyExtractor={(item) => item.id}
+                        renderItem={renderMessageItem}
+                    />
+
+                    <KeyboardAvoidingView
+                        keyboardVerticalOffset={110}
+                        behavior="padding"
+                        className="p-3 bg-white border-t border-gray-300"
+                    >
+                        <SafeAreaView className="flex flex-row items-center gap-2">
+                            <TextInput
+                                className="rounded-full h-8 py-0 px-2  border border-gray-200 block flex-1"
+                                value={message}
+                                onChangeText={setMessage}
+                                placeholder="Type a message..."
+                                textAlignVertical="center"
+                                onSubmitEditing={sendMessage}
+                            />
+                            <TouchableOpacity
+                                onPress={sendMessage}
+                                className="bg-gray-300 text-white rounded-full h-8 w-8 items-center justify-center"
+                            >
+                                <Text>↑</Text>
+                            </TouchableOpacity>
+                        </SafeAreaView>
+                    </KeyboardAvoidingView>
+                </>
+            )}
+        </View>
+    );
+}
--- a/examples/chat-rn/src/invite.tsx
+++ b/examples/chat-rn/src/invite.tsx
@@ -0,0 +1,24 @@
+import React, { Text } from "react-native";
+import { useAcceptInvite } from "./jazz";
+import { Chat } from "./schema";
+
+type ChatScreenParams = {
+    valueHint?: string;
+    valueID?: string;
+    inviteSecret?: string;
+};
+
+export default function HandleInviteScreen({
+    navigation,
+}: {
+    navigation: any;
+}) {
+    useAcceptInvite({
+        invitedObjectSchema: Chat,
+        onAccept: async (chatId) => {
+            navigation.navigate("ChatScreen", { chatId });
+        },
+    });
+
+    return <Text>Accepting invite...</Text>;
+}
--- a/examples/chat-rn/src/jazz.tsx
+++ b/examples/chat-rn/src/jazz.tsx
@@ -0,0 +1,8 @@
+import { createJazzRNApp } from "jazz-react-native";
+import { MMKVStorage } from "./mmkv-storage";
+import { Account } from "jazz-tools";
+
+const nativeStorage = new MMKVStorage();
+
+export const Jazz = createJazzRNApp({ nativeStorage });
+export const { useAccount, useCoState, useAcceptInvite } = Jazz;
--- a/examples/chat-rn/src/mmkv-storage.ts
+++ b/examples/chat-rn/src/mmkv-storage.ts
@@ -0,0 +1,25 @@
+import { MMKV } from "react-native-mmkv";
+import type { NativeStorage } from "jazz-react-native";
+
+const storage = new MMKV();
+
+export class MMKVStorage implements NativeStorage {
+    get(key: string): Promise<string | undefined> {
+        return Promise.resolve(storage.getString(key));
+    }
+
+    set(key: string, value: string): Promise<void> {
+        storage.set(key, value);
+        return Promise.resolve();
+    }
+
+    delete(key: string): Promise<void> {
+        storage.delete(key);
+        return Promise.resolve();
+    }
+
+    clearAll(): Promise<void> {
+        storage.clearAll();
+        return Promise.resolve();
+    }
+}
--- a/examples/chat-rn/src/schema.ts
+++ b/examples/chat-rn/src/schema.ts
@@ -0,0 +1,7 @@
+import { CoMap, CoList, co } from "jazz-tools";
+
+export class Message extends CoMap {
+    text = co.string;
+}
+
+export class Chat extends CoList.Of(co.ref(Message)) {}
--- a/examples/chat-rn/tailwind.config.js
+++ b/examples/chat-rn/tailwind.config.js
@@ -0,0 +1,12 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+    content: [
+        "./app/**/*.{js,jsx,ts,tsx}",
+        "./components/**/*.{js,jsx,ts,tsx}",
+        "./src/**/*.{js,jsx,ts,tsx}",
+    ],
+    theme: {
+        extend: {},
+    },
+    plugins: [],
+};
--- a/examples/chat-rn/tsconfig.json
+++ b/examples/chat-rn/tsconfig.json
@@ -0,0 +1,10 @@
+{
+  "extends": "expo/tsconfig.base",
+  "compilerOptions": {
+    "strict": true,
+    "moduleResolution": "bundler"
+  },
+  "exclude": [
+    "src/tests"
+  ]
+}
--- a/examples/chat/.gitignore
+++ b/examples/chat/.gitignore
@@ -23,4 +23,9 @@ dist-ssr
 *.sln
 *.sw?

-sync-db/
+sync-db/
+
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
--- a/examples/chat/CHANGELOG.md
+++ b/examples/chat/CHANGELOG.md
@@ -1,5 +1,30 @@
 # jazz-example-chat

+## 0.0.86
+
+### Patch Changes
+
+- Parent-frame friendlier naviation
+- Updated dependencies
+  - hash-slash@0.2.1
+
+## 0.0.85
+
+### Patch Changes
+
+- Updated dependencies
+  - cojson@0.8.3
+  - jazz-react@0.8.3
+  - jazz-tools@0.8.3
+
+## 0.0.84
+
+### Patch Changes
+
+- Updated dependencies [a075f90]
+  - jazz-tools@0.8.2
+  - jazz-react@0.8.2
+
 ## 0.0.83

 ### Patch Changes
--- a/examples/chat/index.html
+++ b/examples/chat/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" class="h-full">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/png" href="/jazz-logo.png" />
@@ -7,8 +7,8 @@
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Jazz Chat Example</title>
  </head>
-  <body>
-    <div id="root"></div>
+  <body class="h-full">
+    <div id="root" class="h-full"></div>
    <script type="module" src="/src/app.tsx"></script>
  </body>
 </html>
--- a/examples/chat/package.json
+++ b/examples/chat/package.json
@@ -1,14 +1,16 @@
 {
  "name": "jazz-example-chat",
  "private": true,
-  "version": "0.0.83",
+  "version": "0.0.86",
  "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"
+    "preview": "vite preview",
+    "test": "playwright test",
+    "test:ui": "playwright test --ui"
  },
  "lint-staged": {
    "*.{ts,tsx}": "eslint --fix",
@@ -20,10 +22,10 @@
    "@radix-ui/react-toast": "^1.1.4",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.0.0",
-    "cojson": "workspace:0.8.0",
-    "hash-slash": "workspace:0.2.0",
-    "jazz-react": "workspace:0.8.1",
-    "jazz-tools": "workspace:0.8.1",
+    "cojson": "workspace:0.8.3",
+    "hash-slash": "workspace:0.2.1",
+    "jazz-react": "workspace:0.8.3",
+    "jazz-tools": "workspace:0.8.3",
    "lucide-react": "^0.274.0",
    "qrcode": "^1.5.3",
    "react": "^18.2.0",
@@ -36,6 +38,7 @@
    "uniqolor": "^1.1.0"
  },
  "devDependencies": {
+    "@playwright/test": "^1.46.1",
    "@types/qrcode": "^1.5.1",
    "@types/react": "^18.2.19",
    "@types/react-dom": "^18.2.7",
@@ -46,8 +49,9 @@
    "eslint": "^8.46.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.3",
+    "is-ci": "^3.0.1",
    "postcss": "^8.4.27",
-    "tailwindcss": "^3.3.3",
+    "tailwindcss": "3.3.2",
    "typescript": "^5.3.3",
    "vite": "^5.0.10"
  }
--- a/examples/chat/playwright.config.ts
+++ b/examples/chat/playwright.config.ts
@@ -0,0 +1,50 @@
+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",
+        permissions: ["clipboard-read", "clipboard-write"],
+    },
+
+    /* 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,
+});
--- a/examples/chat/src/app.tsx
+++ b/examples/chat/src/app.tsx
@@ -7,21 +7,22 @@ import { AppContainer, TopBar } from "./ui.tsx";

 export function App() {
  const { me, logOut } = useAccount();
+  const router = useIframeHashRouter();

  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;
+    router.navigate("/#/chat/" + chat.id);
  };

  return (
    <AppContainer>
      <TopBar>
-        {me?.profile?.name} · <button onClick={logOut}>Log out</button>
+        <p>{me?.profile?.name}</p> · <button onClick={logOut}>Log out</button>
      </TopBar>
-      {useIframeHashRouter().route({
+      {router.route({
        "/": () => createChat() as never,
        "/chat/:id": id => <ChatScreen chatID={id as ID<Chat>} />,
      })}
--- a/examples/chat/src/chatScreen.tsx
+++ b/examples/chat/src/chatScreen.tsx
@@ -5,29 +5,44 @@ import {
  BubbleBody,
  BubbleContainer,
  BubbleInfo,
-  ChatContainer,
+  ChatBody,
  ChatInput,
  EmptyChatMessage,
 } from "./ui.tsx";
+import { useState } from "react";

 export function ChatScreen(props: { chatID: ID<Chat> }) {
  const chat = useCoState(Chat, props.chatID, [{}]);
+  const [showNLastMessages, setShowNLastMessages] = useState(30);

  return chat ? (
-    <ChatContainer>
-      {chat.length > 0 ? (
-        chat.map(msg => <ChatBubble msg={msg} key={msg.id} />)
-      ) : (
-        <EmptyChatMessage />
-      )}
+    <>
+      <ChatBody>
+        {chat.length > 0 ? (
+          chat
+            .slice(-showNLastMessages)
+            .reverse() // this plus flex-col-reverse on ChatBody gives us scroll-to-bottom behavior
+            .map(msg => <ChatBubble msg={msg} key={msg.id} />)
+        ) : (
+          <EmptyChatMessage />
+        )}
+        {chat.length > showNLastMessages && (
+          <button
+            className="px-4 py-1 block mx-auto my-2 border rounded"
+            onClick={() => setShowNLastMessages(showNLastMessages + 10)}
+          >
+            Show more
+          </button>
+        )}
+      </ChatBody>
      <ChatInput
        onSubmit={text => {
          chat.push(Message.create({ text }, { owner: chat._owner }));
        }}
      />
-    </ChatContainer>
+    </>
  ) : (
-    <div>Loading...</div>
+    <div className="flex-1 flex justify-center items-center">Loading...</div>
  );
 }

--- a/examples/chat/src/main.tsx
+++ b/examples/chat/src/main.tsx
@@ -9,8 +9,6 @@ export const { useAccount, useCoState } = Jazz;
 function JazzAndAuth({ children }: { children: React.ReactNode }) {
  const [auth, state] = useDemoAuth();

-  console.log(state, auth)
-
  return (
    <>
      <Jazz.Provider
@@ -19,7 +17,10 @@ function JazzAndAuth({ children }: { children: React.ReactNode }) {
      >
        {children}
      </Jazz.Provider>
-      {state.state !== "signedIn" && <DemoAuthBasicUI appName="Jazz Chat" state={state} />}
+      {
+        state.state !== "signedIn"
+        && <DemoAuthBasicUI appName="Jazz Chat" state={state} />
+      }
    </>
  );
 }
--- a/examples/chat/src/ui.tsx
+++ b/examples/chat/src/ui.tsx
@@ -1,6 +1,8 @@
+import { useId } from "react";
+
 export function AppContainer(props: { children: React.ReactNode }) {
  return (
-    <div className="flex flex-col items-center justify-between w-screen h-screen p-2 dark:bg-black dark:text-white">
+    <div className="flex flex-col justify-between w-screen h-screen bg-stone-50 dark:bg-black dark:text-white">
      {props.children}
    </div>
  );
@@ -8,20 +10,22 @@ export function AppContainer(props: { children: React.ReactNode }) {

 export function TopBar(props: { children: React.ReactNode }) {
  return (
-    <div className="mb-5 px-2 py-1 text-sm self-end">{props.children}</div>
+    <div className="p-3 bg-white w-full flex justify-end gap-1 text-xs border-b dark:bg-transparent dark:border-stone-800">
+      {props.children}
+    </div>
  );
 }

-export function ChatContainer(props: { children: React.ReactNode }) {
+export function ChatBody(props: { children: React.ReactNode }) {
  return (
-    <div className="w-full max-w-xl h-full flex flex-col items-stretch">
+    <div className="flex-1 overflow-y-auto flex flex-col-reverse" role="application">
      {props.children}
    </div>
  );
 }

 export function EmptyChatMessage() {
-  return <div className="m-auto text-sm">(Empty chat)</div>;
+  return <div className="h-full text-base text-stone-500 flex items-center justify-center px-3 md:text-xl">Start a conversation below.</div>;
 }

 export function BubbleContainer(props: {
@@ -29,12 +33,12 @@ export function BubbleContainer(props: {
  fromMe: boolean | undefined;
 }) {
  const align = props.fromMe ? "items-end" : "items-start";
-  return <div className={`${align} flex flex-col`}>{props.children}</div>;
+  return <div className={`${align} flex flex-col m-2`} role="row">{props.children}</div>;
 }

 export function BubbleBody(props: { children: React.ReactNode }) {
  return (
-    <div className="rounded-xl bg-stone-100 dark:bg-stone-700 dark:text-white py-2 px-4 mt-2 min-w-[5rem]">
+    <div className="rounded-2xl text-sm line-clamp-10 text-ellipsis bg-white max-w-full whitespace-pre-wrap dark:bg-stone-700 dark:text-white py-1 px-3 shadow-sm">
      {props.children}
    </div>
  );
@@ -42,22 +46,29 @@ export function BubbleBody(props: { children: React.ReactNode }) {

 export function BubbleInfo(props: { by: string | undefined; madeAt: Date }) {
  return (
-    <div className="text-xs text-neutral-500 ml-2">
-      {props.by} {props.madeAt.toLocaleTimeString()}
+    <div className="text-xs text-neutral-500 mt-1.5">
+      {props.by} · {props.madeAt.toLocaleTimeString()}
    </div>
  );
 }

 export function ChatInput(props: { onSubmit: (text: string) => void }) {
+  const inputId = useId();
+
  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 = "";
-      }}
-    />
+    <div className="p-3 bg-white border-t shadow-2xl mt-auto dark:bg-transparent dark:border-stone-800">
+      <label className="sr-only" htmlFor={inputId}>Type a message and press Enter</label>
+      <input
+        id={inputId}
+        className="rounded-full py-2 px-4 text-sm border block w-full dark:bg-black dark:text-white dark:border-stone-700"
+        placeholder="Type a message and press Enter"
+        maxLength={2048}
+        onKeyDown={({ key, currentTarget: input }) => {
+          if (key !== "Enter" || !input.value) return;
+          props.onSubmit(input.value);
+          input.value = "";
+        }}
+      />
+    </div>
  );
 }
--- a/examples/chat/tailwind.config.js
+++ b/examples/chat/tailwind.config.js
@@ -69,6 +69,9 @@ module.exports = {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
      },
+      lineClamp: {
+        10: '10',
+      },
    },
  },
  plugins: [require("tailwindcss-animate")],
--- a/examples/chat/tests/chat.spec.ts
+++ b/examples/chat/tests/chat.spec.ts
@@ -0,0 +1,50 @@
+import { test } from "@playwright/test";
+import { LoginPage } from "./pages/LoginPage";
+import { ChatPage } from "./pages/ChatPage";
+
+test("chat between two users", async ({ page }) => {
+    const loginPage = new LoginPage(page);
+
+    const mario = "S. Mario";
+    const luigi = "Luigi";
+
+    await loginPage.goto();
+    await loginPage.fillUsername(mario);
+    await loginPage.signup();
+
+    const chatPage = new ChatPage(page);
+
+    const message1ByMario = "Hello Luigi, are you ready to save the princess?"
+
+    await chatPage.sendMessage(message1ByMario);
+    await chatPage.expectMessageRow(message1ByMario);
+
+    const roomURL = page.url();
+
+    await chatPage.logout();
+
+    await loginPage.expectLoaded();
+
+    await loginPage.fillUsername(luigi);
+    await loginPage.signup();
+
+    await page.goto(roomURL);
+
+    await chatPage.expectMessageRow(message1ByMario);
+
+    const message2ByLuigi = "No, I'm not ready yet. I'm still trying to find the key to the castle."
+
+    await chatPage.sendMessage(message2ByLuigi);
+    await chatPage.expectMessageRow(message2ByLuigi);
+
+    // This breaks with (Error: Error reading from peer storage, handling msg)
+    // await chatPage.logout();
+    // await loginPage.loginAs(mario);
+
+    // await chatPage.expectLoaded();
+
+    // await page.goto(roomURL);
+
+    // await chatPage.expectMessageRow(message1ByMario);
+    // await chatPage.expectMessageRow(message2ByLuigi);
+});
--- a/examples/chat/tests/pages/ChatPage.ts
+++ b/examples/chat/tests/pages/ChatPage.ts
@@ -0,0 +1,35 @@
+import { Page, Locator, expect } from "@playwright/test";
+
+export class ChatPage {
+  readonly page: Page;
+  readonly messageInput: Locator;
+  readonly logoutButton: Locator;
+
+  constructor(page: Page) {
+    this.page = page;
+    this.messageInput = page.getByRole("textbox", {
+        name: "Type a message and press Enter"
+    });
+    this.logoutButton = page.getByRole("button", {
+      name: "Log out",
+    });
+  }
+
+  async sendMessage(message: string) {
+    await this.messageInput.fill(message);
+    await this.messageInput.press("Enter");
+  }
+
+  async expectLoaded() {
+    await expect(this.messageInput).toBeVisible();
+  }
+
+  async expectMessageRow(message: string) {
+    await expect(this.page.getByText(message)).toBeVisible();
+  }
+
+  async logout() {
+    await this.logoutButton.click();
+    await this.page.goto("/");
+  }
+}
--- a/examples/chat/tests/pages/LoginPage.ts
+++ b/examples/chat/tests/pages/LoginPage.ts
@@ -0,0 +1,40 @@
+import { Page, Locator, expect } from "@playwright/test";
+
+export class LoginPage {
+    readonly page: Page;
+    readonly usernameInput: Locator;
+    readonly signupButton: Locator;
+
+    constructor(page: Page) {
+        this.page = page;
+        this.usernameInput = page.getByRole("textbox");
+        this.signupButton = page.getByRole("button", {
+            name: "Sign up",
+        });
+    }
+
+    async goto() {
+        this.page.goto("/");
+    }
+
+    async fillUsername(value: string) {
+        await this.usernameInput.clear();
+        await this.usernameInput.fill(value);
+    }
+
+    async loginAs(value: string) {
+        await this.page
+            .getByRole("button", {
+                name: `Log in as "${value}"`,
+            })
+            .click();
+    }
+
+    async signup() {
+        await this.signupButton.click();
+    }
+
+    async expectLoaded() {
+        await expect(this.signupButton).toBeVisible();
+    }
+}
--- a/examples/inspector/CHANGELOG.md
+++ b/examples/inspector/CHANGELOG.md
@@ -1,243 +1,258 @@
 # jazz-example-inspector

-## 0.0.60
+## 0.0.62

 ### Patch Changes

- Updated dependencies [6a147c2]
- Updated dependencies [ad40b88]
-  - cojson@0.8.0
-  - cojson-transport-ws@0.8.0
+-   Updated dependencies
+    -   hash-slash@0.2.1
+
+## 0.0.61
+
+### Patch Changes
+
+-   Updated dependencies
+    -   cojson@0.8.3
+    -   cojson-transport-ws@0.8.3

 ## 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
+-   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

 ### Patch Changes

- Updated dependencies [5d91f9f]
- Updated dependencies [5094e6d]
- Updated dependencies [b09589b]
- Updated dependencies [2c3a40c]
- Updated dependencies [406ab9b]
- Updated dependencies [4e16575]
- Updated dependencies [ea882ab]
-  - cojson@0.7.34
-  - cojson-transport-ws@0.7.34
+-   Updated dependencies [5d91f9f]
+-   Updated dependencies [5094e6d]
+-   Updated dependencies [b09589b]
+-   Updated dependencies [2c3a40c]
+-   Updated dependencies [406ab9b]
+-   Updated dependencies [4e16575]
+-   Updated dependencies [ea882ab]
+    -   cojson@0.7.34
+    -   cojson-transport-ws@0.7.34

 ## 0.0.59-neverthrow.6

 ### Patch Changes

- Updated dependencies
-  - cojson@0.7.34-neverthrow.8
-  - cojson-transport-ws@0.7.34-neverthrow.8
+-   Updated dependencies
+    -   cojson@0.7.34-neverthrow.8
+    -   cojson-transport-ws@0.7.34-neverthrow.8

 ## 0.0.59-neverthrow.5

 ### Patch Changes

- Updated dependencies
-  - cojson@0.7.34-neverthrow.7
-  - cojson-transport-ws@0.7.34-neverthrow.7
+-   Updated dependencies
+    -   cojson@0.7.34-neverthrow.7
+    -   cojson-transport-ws@0.7.34-neverthrow.7

 ## 0.0.59-neverthrow.4

 ### Patch Changes

- Updated dependencies
-  - cojson@0.7.34-neverthrow.4
-  - cojson-transport-ws@0.7.34-neverthrow.4
+-   Updated dependencies
+    -   cojson@0.7.34-neverthrow.4
+    -   cojson-transport-ws@0.7.34-neverthrow.4

 ## 0.0.59-neverthrow.3

 ### Patch Changes

- Updated dependencies
-  - cojson@0.7.34-neverthrow.3
-  - cojson-transport-ws@0.7.34-neverthrow.3
+-   Updated dependencies
+    -   cojson@0.7.34-neverthrow.3
+    -   cojson-transport-ws@0.7.34-neverthrow.3

 ## 0.0.59-neverthrow.2

 ### Patch Changes

- Updated dependencies
-  - cojson-transport-ws@0.7.34-neverthrow.2
+-   Updated dependencies
+    -   cojson-transport-ws@0.7.34-neverthrow.2

 ## 0.0.59-neverthrow.1

 ### Patch Changes

- Updated dependencies
-  - cojson@0.7.34-neverthrow.1
-  - cojson-transport-ws@0.7.34-neverthrow.1
+-   Updated dependencies
+    -   cojson@0.7.34-neverthrow.1
+    -   cojson-transport-ws@0.7.34-neverthrow.1

 ## 0.0.59-neverthrow.0

 ### Patch Changes

- Updated dependencies
-  - cojson@0.7.34-neverthrow.0
-  - cojson-transport-ws@0.7.34-neverthrow.0
+-   Updated dependencies
+    -   cojson@0.7.34-neverthrow.0
+    -   cojson-transport-ws@0.7.34-neverthrow.0

 ## 0.0.58

 ### Patch Changes

- Updated dependencies [fdde8db]
- Updated dependencies [b297c93]
- Updated dependencies [07fe2b9]
- Updated dependencies [3bf5127]
- Updated dependencies [a8b74ff]
- Updated dependencies [db53161]
-  - cojson-transport-ws@0.7.33
-  - cojson@0.7.33
+-   Updated dependencies [fdde8db]
+-   Updated dependencies [b297c93]
+-   Updated dependencies [07fe2b9]
+-   Updated dependencies [3bf5127]
+-   Updated dependencies [a8b74ff]
+-   Updated dependencies [db53161]
+    -   cojson-transport-ws@0.7.33
+    -   cojson@0.7.33

 ## 0.0.58-hotfixes.5

 ### Patch Changes

- Updated dependencies
-  - cojson@0.7.33-hotfixes.5
-  - cojson-transport-ws@0.7.33-hotfixes.5
+-   Updated dependencies
+    -   cojson@0.7.33-hotfixes.5
+    -   cojson-transport-ws@0.7.33-hotfixes.5

 ## 0.0.58-hotfixes.4

 ### Patch Changes

- Updated dependencies
-  - cojson@0.7.33-hotfixes.4
-  - cojson-transport-ws@0.7.33-hotfixes.4
+-   Updated dependencies
+    -   cojson@0.7.33-hotfixes.4
+    -   cojson-transport-ws@0.7.33-hotfixes.4

 ## 0.0.58-hotfixes.3

 ### Patch Changes

- Updated dependencies
-  - cojson-transport-ws@0.7.33-hotfixes.3
-  - cojson@0.7.33-hotfixes.3
+-   Updated dependencies
+    -   cojson-transport-ws@0.7.33-hotfixes.3
+    -   cojson@0.7.33-hotfixes.3

 ## 0.0.58-hotfixes.2

 ### Patch Changes

- Updated dependencies
-  - cojson-transport-ws@0.7.33-hotfixes.2
+-   Updated dependencies
+    -   cojson-transport-ws@0.7.33-hotfixes.2

 ## 0.0.58-hotfixes.1

 ### Patch Changes

- Updated dependencies
-  - cojson-transport-ws@0.7.33-hotfixes.1
+-   Updated dependencies
+    -   cojson-transport-ws@0.7.33-hotfixes.1

 ## 0.0.58-hotfixes.0

 ### Patch Changes

- Updated dependencies
-  - cojson@0.7.33-hotfixes.0
-  - cojson-transport-ws@0.7.33-hotfixes.0
+-   Updated dependencies
+    -   cojson@0.7.33-hotfixes.0
+    -   cojson-transport-ws@0.7.33-hotfixes.0

 ## 0.0.57

 ### Patch Changes

- Updated dependencies
- Updated dependencies
-  - cojson-transport-ws@0.7.31
-  - cojson@0.7.31
+-   Updated dependencies
+-   Updated dependencies
+    -   cojson-transport-ws@0.7.31
+    -   cojson@0.7.31

 ## 0.0.56

 ### Patch Changes

- Updated dependencies
-  - cojson-transport-ws@0.7.30
+-   Updated dependencies
+    -   cojson-transport-ws@0.7.30

 ## 0.0.55

 ### Patch Changes

- Updated dependencies
-  - cojson@0.7.29
-  - cojson-transport-ws@0.7.29
+-   Updated dependencies
+    -   cojson@0.7.29
+    -   cojson-transport-ws@0.7.29

 ## 0.0.54

 ### Patch Changes

- Updated dependencies
-  - cojson@0.7.28
-  - cojson-transport-ws@0.7.28
+-   Updated dependencies
+    -   cojson@0.7.28
+    -   cojson-transport-ws@0.7.28

 ## 0.0.53

 ### Patch Changes

- Updated dependencies
-  - cojson-transport-ws@0.7.27
+-   Updated dependencies
+    -   cojson-transport-ws@0.7.27

 ## 0.0.52

 ### Patch Changes

- Updated dependencies
-  - cojson@0.7.26
-  - cojson-transport-ws@0.7.26
+-   Updated dependencies
+    -   cojson@0.7.26
+    -   cojson-transport-ws@0.7.26

 ## 0.0.51

 ### Patch Changes

- Updated dependencies
-  - cojson@0.7.23
-  - cojson-transport-ws@0.7.23
+-   Updated dependencies
+    -   cojson@0.7.23
+    -   cojson-transport-ws@0.7.23

 ## 0.0.50

 ### Patch Changes

- Updated dependencies
-  - cojson-transport-ws@0.7.22
+-   Updated dependencies
+    -   cojson-transport-ws@0.7.22

 ## 0.0.49

 ### Patch Changes

- Updated dependencies
-  - cojson@0.7.18
-  - cojson-transport-ws@0.7.18
+-   Updated dependencies
+    -   cojson@0.7.18
+    -   cojson-transport-ws@0.7.18

 ## 0.0.48

 ### Patch Changes

- Updated dependencies
-  - cojson@0.7.17
-  - cojson-transport-ws@0.7.17
+-   Updated dependencies
+    -   cojson@0.7.17
+    -   cojson-transport-ws@0.7.17

 ## 0.0.47

 ### Patch Changes

- Updated dependencies
-  - cojson@0.6.7
-  - jazz-react@0.5.5
-  - jazz-react-auth-local@0.4.18
+-   Updated dependencies
+    -   cojson@0.6.7
+    -   jazz-react@0.5.5
+    -   jazz-react-auth-local@0.4.18

 ## 0.0.46

 ### Patch Changes

- Updated dependencies
-  - jazz-react@0.5.0
-  - jazz-react-auth-local@0.4.16
+-   Updated dependencies
+    -   jazz-react@0.5.0
+    -   jazz-react-auth-local@0.4.16
--- a/examples/inspector/package.json
+++ b/examples/inspector/package.json
@@ -1,7 +1,7 @@
 {
  "name": "jazz-inspector",
  "private": true,
-  "version": "0.0.60",
+  "version": "0.0.62",
  "type": "module",
  "scripts": {
    "dev": "vite",
@@ -15,9 +15,9 @@
    "@radix-ui/react-toast": "^1.1.4",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.0.0",
-    "cojson": "workspace:0.8.0",
-    "cojson-transport-ws": "workspace:0.8.0",
-    "hash-slash": "workspace:0.2.0",
+    "cojson": "workspace:0.8.3",
+    "cojson-transport-ws": "workspace:0.8.3",
+    "hash-slash": "workspace:0.2.1",
    "lucide-react": "^0.274.0",
    "qrcode": "^1.5.3",
    "react": "^18.2.0",
@@ -41,7 +41,7 @@
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.3",
    "postcss": "^8.4.27",
-    "tailwindcss": "^3.3.3",
+    "tailwindcss": "3.3.2",
    "typescript": "^5.3.3",
    "vite": "^5.0.10"
  }
--- a/examples/inspector/src/viewer/co-stream-view.tsx
+++ b/examples/inspector/src/viewer/co-stream-view.tsx
@@ -5,16 +5,16 @@ import {
    RawCoStream,
    RawCoValue,
 } from "cojson";
-import { JsonObject, JsonValue } from "cojson/src/jsonValue";
+import { JsonObject, JsonValue } from "cojson/src/jsonValue.ts";
 import { PageInfo } from "./types";
-import { base64URLtoBytes } from "cojson/src/base64url";
+import { base64URLtoBytes } from "cojson/src/base64url.ts";
 import { useEffect, useState } from "react";
 import { ArrowDownToLine } from "lucide-react";
 import {
    BinaryStreamItem,
    BinaryStreamStart,
    CoStreamItem,
-} from "cojson/src/coValues/coStream";
+} from "cojson/src/coValues/coStream.ts";
 import { AccountOrGroupPreview } from "./value-renderer";

 // typeguard for BinaryStreamStart
--- a/examples/inspector/src/viewer/grid-view.tsx
+++ b/examples/inspector/src/viewer/grid-view.tsx
@@ -1,5 +1,5 @@
 import { CoID, LocalNode, RawCoValue } from "cojson";
-import { JsonObject } from "cojson/src/jsonValue";
+import { JsonObject } from "cojson/src/jsonValue.ts";
 import { CoMapPreview, ValueRenderer } from "./value-renderer";
 import clsx from "clsx";
 import { PageInfo, isCoId } from "./types";
--- a/examples/inspector/src/viewer/table-viewer.tsx
+++ b/examples/inspector/src/viewer/table-viewer.tsx
@@ -1,5 +1,5 @@
 import { CoID, LocalNode, RawCoValue } from "cojson";
-import { JsonObject } from "cojson/src/jsonValue";
+import { JsonObject } from "cojson/src/jsonValue.ts";
 import { PageInfo } from "./types";
 import { useMemo, useState } from "react";
 import { ValueRenderer } from "./value-renderer";
--- a/examples/music-player/CHANGELOG.md
+++ b/examples/music-player/CHANGELOG.md
@@ -1,5 +1,20 @@
 # jazz-example-musicplayer

+## 0.0.6
+
+### Patch Changes
+
+-   jazz-react@0.8.3
+-   jazz-tools@0.8.3
+
+## 0.0.5
+
+### Patch Changes
+
+-   Updated dependencies [a075f90]
+    -   jazz-tools@0.8.2
+    -   jazz-react@0.8.2
+
 ## 0.0.4

 ### Patch Changes
--- a/examples/music-player/README.md
+++ b/examples/music-player/README.md
@@ -10,14 +10,14 @@ Start by checking out `jazz`

 ```bash
 git clone https://github.com/gardencmp/jazz.git
-cd jazz/examples/musicPlayer
+cd jazz/examples/music-player
 pnpm pack --pack-destination /tmp
-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
+mkdir -p ~/jazz-examples/music-player # or any other directory
+tar -xf /tmp/jazz-example-music-player-* --strip-components 1 -C ~/jazz-examples/music-player
+cd ~/jazz-examples/music-player
 ```

-This ensures that you have the example app without git history and independent of the Jazz multi-package monorepo.
+This ensures you have the example app without git history and independent of the Jazz multi-package monorepo.

 Install dependencies:

--- a/examples/music-player/components.json
+++ b/examples/music-player/components.json
@@ -10,7 +10,7 @@
    "cssVariables": true
  },
  "aliases": {
-    "components": "@/basicComponents",
-    "utils": "@/basicComponents/lib/utils"
+    "components": "@/components",
+    "utils": "@/lib/utils"
  }
 }
--- a/examples/music-player/package.json
+++ b/examples/music-player/package.json
@@ -1,7 +1,7 @@
 {
    "name": "jazz-example-music-player",
    "private": true,
-    "version": "0.0.4",
+    "version": "0.0.6",
    "type": "module",
    "scripts": {
        "dev": "vite",
@@ -15,10 +15,14 @@
        "*.{js,jsx,mdx,json}": "prettier --write"
    },
    "dependencies": {
+        "@radix-ui/react-dropdown-menu": "^2.1.1",
+        "@radix-ui/react-slot": "^1.0.2",
+        "@radix-ui/react-toast": "^1.1.4",
        "class-variance-authority": "^0.7.0",
        "clsx": "^2.0.0",
-        "jazz-react": "workspace:0.8.1",
-        "jazz-tools": "workspace:0.8.1",
+        "jazz-react": "workspace:0.8.3",
+        "jazz-tools": "workspace:0.8.3",
+        "lucide-react": "^0.274.0",
        "react": "^18.2.0",
        "react-dom": "^18.2.0",
        "react-router": "^6.16.0",
@@ -37,7 +41,7 @@
        "eslint-plugin-react-hooks": "^4.6.0",
        "eslint-plugin-react-refresh": "^0.4.3",
        "postcss": "^8.4.27",
-        "tailwindcss": "^3.3.3",
+        "tailwindcss": "3.3.2",
        "typescript": "^5.3.3",
        "vite": "^5.0.10"
    }
--- a/examples/music-player/src/2_main.tsx
+++ b/examples/music-player/src/2_main.tsx
@@ -1,13 +1,11 @@
+/* eslint-disable react-refresh/only-export-components */
 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 { Toaster } from "@/components/ui/toaster"
+import { useMediaPlayer } from "./5_useMediaPlayer";
+import { HomePage } from "./3_HomePage";
+import { InvitePage } from "./6_InvitePage";
 import { PlayerControls } from "./components/PlayerControls";
 import "./index.css";

@@ -25,8 +23,9 @@ import { useUploadExampleData } from "./lib/useUploadExampleData";
 *
 * `<Jazz.Provider/>` also runs our account migration
 */
+
 const Jazz = createJazzReactApp({
-    AccountSchema: MusicaAccount
+    AccountSchema: MusicaAccount,
 });

 export const { useAccount, useCoState, useAcceptInvite } = Jazz;
@@ -36,31 +35,6 @@ function Main() {

    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: "/",
@@ -68,7 +42,7 @@ function Main() {
        },
        {
            path: "/playlist/:playlistId",
-            element: <PlaylistPage mediaPlayer={mediaPlayer} />,
+            element: <HomePage mediaPlayer={mediaPlayer} />,
        },
        {
            path: "/invite/*",
@@ -78,20 +52,9 @@ function Main() {

    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} />
+            <Toaster />
        </>
    );
 }
@@ -101,7 +64,10 @@ function JazzAndAuth({ children }: { children: React.ReactNode }) {

    return (
        <>
-            <Jazz.Provider auth={auth} peer="wss://mesh.jazz.tools/?key=music-player-example-jazz@gcmp.io">
+            <Jazz.Provider
+                auth={auth}
+                peer="wss://mesh.jazz.tools/?key=music-player-example-jazz@gcmp.io"
+            >
                {children}
            </Jazz.Provider>
            <DemoAuthBasicUI appName="Jazz Music Player" state={state} />
--- a/examples/music-player/src/3_HomePage.tsx
+++ b/examples/music-player/src/3_HomePage.tsx
@@ -0,0 +1,144 @@
+import { useAccount, useCoState } from "./2_main";
+import { MediaPlayer } from "./5_useMediaPlayer";
+import { MusicTrackRow } from "./components/MusicTrackRow";
+import { usePlayState } from "./lib/audio/usePlayState";
+import { SidePanel } from "./components/SidePanel";
+import { FileUploadButton } from "./components/FileUploadButton";
+import { Button } from "./components/ui/button";
+import { createNewPlaylist, uploadMusicTracks } from "./4_actions";
+import { useNavigate, useParams } from "react-router";
+import { ID } from "jazz-tools";
+import { Playlist } from "./1_schema";
+import { createInviteLink } from "jazz-react";
+import { useToast } from "@/hooks/use-toast"
+
+export function HomePage({ mediaPlayer }: { mediaPlayer: MediaPlayer }) {
+    /**
+     * `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({
+        root: {
+            rootPlaylist: {},
+            playlists: [],
+        },
+    });
+
+    const navigate = useNavigate();
+    const playState = usePlayState();
+    const isPlaying = playState.value === "play";
+    const { toast } = useToast()
+
+    async function handleFileLoad(files: FileList) {
+        if (!me) return;
+
+        /**
+         * Follow this function definition to see how we update
+         * values in Jazz and manage files!
+         */
+        await uploadMusicTracks(me, files);
+    }
+
+    async function handleCreatePlaylist() {
+        if (!me) return;
+
+        const playlist = await createNewPlaylist(me);
+
+        navigate(`/playlist/${playlist.id}`);
+    }
+
+    const params = useParams<{ playlistId: ID<Playlist> }>();
+    const playlistId = params.playlistId ?? me?.root._refs.rootPlaylist.id;
+    const playlist = useCoState(Playlist, playlistId, {
+        tracks: [],
+    });
+
+    const isRootPlaylist = !params.playlistId;
+    const isPlaylistOwner = playlist?._owner.myRole() === "admin";
+    const isActivePlaylist = playlistId === me?.root.activePlaylist?.id;
+
+    const handlePlaylistTitleChange = (
+        evt: React.ChangeEvent<HTMLInputElement>,
+    ) => {
+        if (!playlist) return;
+
+        playlist.title = evt.target.value;
+    };
+
+    const handlePlaylistShareClick = async () => {
+        if (!isPlaylistOwner) return;
+
+        const inviteLink = createInviteLink(playlist, "reader");
+
+        await navigator.clipboard.writeText(inviteLink);
+
+        toast({
+            title: "Invite link copied into the clipboard",
+        });
+    };
+
+    return (
+        <div className="flex flex-col h-screen text-gray-800 bg-blue-50">
+            <div className="flex flex-1 overflow-hidden">
+                <SidePanel />
+                <main className="flex-1 p-6 overflow-y-auto">
+                    <div className="flex items-center justify-between mb-6">
+                        {isRootPlaylist ? (
+                            <h1 className="text-2xl font-bold text-blue-800">
+                                All tracks
+                            </h1>
+                        ) : (
+                            <input
+                                value={playlist?.title ?? ""}
+                                onChange={handlePlaylistTitleChange}
+                                className="text-2xl font-bold text-blue-800 bg-transparent"
+                                disabled={!isPlaylistOwner}
+                            />
+                        )}
+                        <div className="flex items-center space-x-4">
+                            {isRootPlaylist && (
+                                <>
+                                    <FileUploadButton
+                                        onFileLoad={handleFileLoad}
+                                    >
+                                        Add file
+                                    </FileUploadButton>
+                                    <Button onClick={handleCreatePlaylist}>
+                                        Create new playlist
+                                    </Button>
+                                </>
+                            )}
+                            {!isRootPlaylist && (
+                                <Button onClick={handlePlaylistShareClick}>
+                                    Share playlist
+                                </Button>
+                            )}
+                        </div>
+                    </div>
+                    <ul className="flex flex-col">
+                        {playlist?.tracks?.map(
+                            (track) =>
+                                track && (
+                                    <MusicTrackRow
+                                        trackId={track.id}
+                                        key={track.id}
+                                        isLoading={
+                                            mediaPlayer.loading === track.id
+                                        }
+                                        isPlaying={
+                                            mediaPlayer.activeTrackId ===
+                                                track.id && isActivePlaylist && isPlaying
+                                        }
+                                        onClick={() => {
+                                            mediaPlayer.setActiveTrack(track, playlist);
+                                        }}
+                                        showAddToPlaylist={isRootPlaylist}
+                                    />
+                                ),
+                        )}
+                    </ul>
+                </main>
+            </div>
+        </div>
+    );
+}
--- a/examples/music-player/src/4_actions.ts
+++ b/examples/music-player/src/4_actions.ts
@@ -92,6 +92,8 @@ export async function addTrackToPlaylist(
 ) {
    if (!account) return;

+    if (playlist.tracks?.some((t) => t?._refs.sourceTrack.id === track.id)) return;
+
    /**
     * Since musicTracks are created as private values (see uploadMusicTracks)
     * to make them shareable as part of the playlist we are cloning them
--- a/examples/music-player/src/5_HomePage.tsx
+++ b/examples/music-player/src/5_HomePage.tsx
@@ -1,60 +0,0 @@
-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>
-        </>
-    );
-}
--- a/examples/music-player/src/5_useMediaPlayer.ts
+++ b/examples/music-player/src/5_useMediaPlayer.ts
@@ -1,6 +1,6 @@
 import { usePlayMedia } from "@/lib/audio/usePlayMedia";
 import { usePlayState } from "@/lib/audio/usePlayState";
-import { useAccount, useCoState } from "./2_main";
+import { useAccount } from "./2_main";
 import { MusicTrack, Playlist } from "@/1_schema";
 import { useRef, useState } from "react";
 import { getNextTrack, getPrevTrack } from "./lib/getters";
@@ -14,7 +14,7 @@ export function useMediaPlayer() {

    const [loading, setLoading] = useState<ID<MusicTrack> | null>(null);

-    const activeTrack = useCoState(MusicTrack, me?.root?._refs.activeTrack?.id);
+    const activeTrackId = me?.root?._refs.activeTrack?.id

    // Reference used to avoid out-of-order track loads
    const lastLoadedTrackId = useRef<ID<MusicTrack> | null>(null);
@@ -71,7 +71,7 @@ export function useMediaPlayer() {
        if (!me?.root) return;

        if (
-            activeTrack?.id === track.id &&
+            activeTrackId === track.id &&
            lastLoadedTrackId.current !== null
        ) {
            playState.toggle();
@@ -88,7 +88,7 @@ export function useMediaPlayer() {
    }

    return {
-        activeTrack,
+        activeTrackId,
        setActiveTrack,
        playNextTrack,
        playPrevTrack,
--- a/examples/music-player/src/6_InvitePage.tsx
+++ b/examples/music-player/src/6_InvitePage.tsx
--- a/examples/music-player/src/6_PlaylistPage.tsx
+++ b/examples/music-player/src/6_PlaylistPage.tsx
@@ -1,84 +0,0 @@
-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)
-                }
-            />
-        </>
-    );
-}
--- a/examples/music-player/src/basicComponents/Button.tsx
+++ b/examples/music-player/src/basicComponents/Button.tsx
@@ -1,20 +0,0 @@
-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>
-    );
-}
--- a/examples/music-player/src/basicComponents/Link.tsx
+++ b/examples/music-player/src/basicComponents/Link.tsx
@@ -1,13 +0,0 @@
-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>
-    );
-}
--- a/examples/music-player/src/components/AddTracksToPlaylistSection.tsx
+++ b/examples/music-player/src/components/AddTracksToPlaylistSection.tsx
@@ -1,79 +0,0 @@
-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>
-    );
-}
--- a/examples/music-player/src/basicComponents/FileUploadButton.tsx
+++ b/examples/music-player/src/basicComponents/FileUploadButton.tsx
@@ -1,4 +1,5 @@
 import { ReactNode } from "react";
+import { Button } from "./ui/button";

 export function FileUploadButton(props: {
    onFileLoad: (files: FileList) => Promise<void>;
@@ -13,11 +14,11 @@ export function FileUploadButton(props: {
    }

    return (
-        <button className="bg-blue-300 hover:cursor-pointer flex items-center">
+        <Button>
            <label className="flex items-center  cursor-pointer p-2">
                <input type="file" onChange={handleFileLoad} multiple hidden />
                {props.children}
            </label>
-        </button>
+        </Button>
    );
 }
--- a/examples/music-player/src/components/MusicTrackRow.tsx
+++ b/examples/music-player/src/components/MusicTrackRow.tsx
@@ -1,35 +1,69 @@
-import { MusicTrack } from "@/1_schema";
+import { MusicTrack, Playlist } from "@/1_schema";
 import { cn } from "@/lib/utils";
+import {
+    DropdownMenu,
+    DropdownMenuTrigger,
+    DropdownMenuContent,
+    DropdownMenuItem,
+} from "@/components/ui/dropdown-menu";
+import { MoreHorizontal } from "lucide-react";
 import { ChangeEvent } from "react";
+import { Button } from "./ui/button";
+import { useAccount, useCoState } from "@/2_main";
+import { addTrackToPlaylist } from "@/4_actions";
+import { ID } from "jazz-tools";

 export function MusicTrackRow({
-    track,
+    trackId,
    isLoading,
    isPlaying,
    onClick,
+    showAddToPlaylist,
 }: {
-    track: MusicTrack;
+    trackId: ID<MusicTrack>;
    isLoading: boolean;
    isPlaying: boolean;
    onClick: (track: MusicTrack) => void;
+    showAddToPlaylist: boolean;
 }) {
+    const track = useCoState(MusicTrack, trackId);
+
    function handleTrackTitleChange(evt: ChangeEvent<HTMLInputElement>) {
+        if (!track) return;
        track.title = evt.target.value;
    }

+    const { me } = useAccount({
+        root: {
+            playlists: [{}],
+        },
+    });
+
+    const playlists = me?.root.playlists ?? [];
+
+    function handleTrackClick() {
+        if (!track) return;
+        onClick(track);
+    }
+
+    function handleAddToPlaylist(playlist: Playlist) {
+        if (!track) return;
+        addTrackToPlaylist(playlist, track, me);
+    }
+
    return (
        <li
            className={
                "flex gap-1  hover:bg-slate-200 group py-2 px-2 cursor-pointer"
            }
-            onClick={() => onClick(track)}
+            onClick={handleTrackClick}
        >
            <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)}
+                onClick={handleTrackClick}
            >
                {isLoading ? (
                    <div className="animate-spin">߷</div>
@@ -39,17 +73,44 @@ export function MusicTrackRow({
                    "▶️"
                )}
            </button>
-            <div className="relative" onClick={(evt) => evt.stopPropagation()}>
+            <div
+                className="relative flex-grow"
+                onClick={(evt) => evt.stopPropagation()}
+            >
                <input
                    className="absolute w-full h-full left-0 bg-transparent px-1"
-                    value={track.title}
+                    value={track?.title}
                    onChange={handleTrackTitleChange}
                    spellCheck="false"
                />
                <span className="opacity-0 px-1 w-fit pointer-events-none whitespace-pre">
-                    {track.title}
+                    {track?.title}
                </span>
            </div>
+            <div onClick={(evt) => evt.stopPropagation()}>
+                {showAddToPlaylist && (
+                    <DropdownMenu>
+                        <DropdownMenuTrigger asChild>
+                            <Button variant="ghost" className="h-8 w-8 p-0">
+                                <span className="sr-only">Open menu</span>
+                                <MoreHorizontal className="h-4 w-4" />
+                            </Button>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent align="end">
+                            {playlists.map((playlist, index) => (
+                                <DropdownMenuItem
+                                    key={index}
+                                    onSelect={() =>
+                                        handleAddToPlaylist(playlist)
+                                    }
+                                >
+                                    Add to {playlist.title}
+                                </DropdownMenuItem>
+                            ))}
+                        </DropdownMenuContent>
+                    </DropdownMenu>
+                )}
+            </div>
        </li>
    );
 }
--- a/examples/music-player/src/components/PlayerControls.tsx
+++ b/examples/music-player/src/components/PlayerControls.tsx
@@ -1,9 +1,11 @@
-import { MediaPlayer } from "@/4_useMediaPlayer";
+import { MediaPlayer } from "@/5_useMediaPlayer";
 import { usePlayState } from "@/lib/audio/usePlayState";
 import { Waveform } from "./Waveform";
-import { useAccount } from "@/2_main";
+import { useAccount, useCoState } from "@/2_main";
 import { useMediaEndListener } from "@/lib/audio/useMediaEndListener";
 import { useKeyboardListener } from "@/lib/useKeyboardListener";
+import { Pause, Play, SkipBack, SkipForward } from "lucide-react";
+import { MusicTrack } from "@/1_schema";

 export function PlayerControls({ mediaPlayer }: { mediaPlayer: MediaPlayer }) {
    const playState = usePlayState();
@@ -22,32 +24,51 @@ export function PlayerControls({ mediaPlayer }: { mediaPlayer: MediaPlayer }) {
        playState.toggle();
    });

-    if (!mediaPlayer.activeTrack) return null;
+    const activeTrack = useCoState(MusicTrack, mediaPlayer.activeTrackId, {
+        waveform: {}
+    });

-    const activeTrackTitle = mediaPlayer.activeTrack.title;
+    if (!activeTrack) return null;

-    const head = activePlaylist?.title
-        ? `${activePlaylist.title} / ${activeTrackTitle}`
-        : activeTrackTitle;
+    const activeTrackTitle = activeTrack.title;

    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>
+        <footer className="flex items-center justify-between p-4 gap-4 bg-white border-t border-gray-200 fixed bottom-0 left-0 right-0 w-full">
+            <div className="flex justify-center items-center space-x-2">
+                <div className="flex items-center space-x-4">
+                    <button
+                        onClick={mediaPlayer.playPrevTrack}
+                        className="text-blue-600 hover:text-blue-800"
+                    >
+                        <SkipBack size={20} />
+                    </button>
+                    <button
+                        onClick={playState.toggle}
+                        className="w-[42px] h-[42px] flex items-center justify-center bg-blue-600 rounded-full text-white hover:bg-blue-700"
+                    >
+                        {isPlaying ? (
+                            <Pause size={24} fill="currentColor" />
+                        ) : (
+                            <Play size={24} fill="currentColor" />
+                        )}
+                    </button>
+                    <button
+                        onClick={mediaPlayer.playNextTrack}
+                        className="text-blue-600 hover:text-blue-800"
+                    >
+                        <SkipForward size={20} />
+                    </button>
                </div>
-                <Waveform track={mediaPlayer.activeTrack} height={30} />
            </div>
-        </div>
+            <div className=" sm:hidden md:flex flex-col flex-shrink-1 items-center w-[75%]"> 
+                <Waveform track={activeTrack} height={30} />
+            </div>
+            <div className="flex flex-col items-end  gap-1 text-right min-w-fit w-[25%]">
+                <h4 className="font-medium text-blue-800">
+                    {activeTrackTitle}
+                </h4>
+                <p className="text-sm text-gray-600">{activePlaylist?.title || "All tracks"}</p>
+            </div>
+        </footer>
    );
 }
--- a/examples/music-player/src/components/SidePanel.tsx
+++ b/examples/music-player/src/components/SidePanel.tsx
@@ -0,0 +1,92 @@
+import { useAccount } from "@/2_main";
+import { useNavigate, useParams } from "react-router";
+
+export function SidePanel() {
+    const { playlistId } = useParams();
+    const navigate = useNavigate();
+    const { me } = useAccount({
+        root: {
+            playlists: [{}],
+        },
+    });
+
+    function handleAllTracksClick(
+        evt: React.MouseEvent<HTMLAnchorElement>,
+    ) {
+        evt.preventDefault();
+        navigate(`/`);
+    }
+
+    function handlePlaylistClick(
+        evt: React.MouseEvent<HTMLAnchorElement>,
+        playlistId: string,
+    ) {
+        evt.preventDefault();
+        navigate(`/playlist/${playlistId}`);
+    }
+
+    return (
+        <aside className="w-64 p-6 bg-white overflow-y-auto">
+            <div className="flex items-center mb-6">
+                <svg
+                    className="w-8 h-8 mr-2"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                >
+                    <path
+                        d="M9 18V5l12-2v13"
+                        stroke="#3b82f6"
+                        strokeWidth="2"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                    />
+                    <path
+                        d="M6 15H3c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h3c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2zM18 13h-3c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h3c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2z"
+                        fill="#3b82f6"
+                    />
+                </svg>
+                <span className="text-xl font-bold text-blue-600">
+                    Music Player
+                </span>
+            </div>
+            <nav>
+                <h2 className="mb-2 text-sm font-semibold text-gray-600">
+                    Playlists
+                </h2>
+                <ul className="space-y-1">
+                    <li>
+                        <a
+                            href="#"
+                            className={`block px-2 py-1 text-sm rounded ${
+                                !playlistId
+                                    ? "bg-blue-100 text-blue-600"
+                                    : "hover:bg-blue-100"
+                            }`}
+                            onClick={handleAllTracksClick}
+                        >
+                            All tracks
+                        </a>
+                    </li>
+                    {me?.root.playlists.map((playlist, index) => (
+                        <li key={index}>
+                            <a
+                                href="#"
+                                className={`block px-2 py-1 text-sm rounded ${
+                                    playlist.id === playlistId
+                                        ? "bg-blue-100 text-blue-600"
+                                        : "hover:bg-blue-100"
+                                }`}
+                                onClick={(evt) =>
+                                    handlePlaylistClick(evt, playlist.id)
+                                }
+                            >
+                                {playlist.title}
+                            </a>
+                        </li>
+                    ))}
+                </ul>
+            </nav>
+        </aside>
+    );
+}
--- a/examples/music-player/src/components/ui/button.tsx
+++ b/examples/music-player/src/components/ui/button.tsx
@@ -0,0 +1,56 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button"
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Button.displayName = "Button"
+
+export { Button, buttonVariants }
--- a/examples/music-player/src/components/ui/dropdown-menu.tsx
+++ b/examples/music-player/src/components/ui/dropdown-menu.tsx
@@ -0,0 +1,198 @@
+import * as React from "react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import { Check, ChevronRight, Circle } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const DropdownMenu = DropdownMenuPrimitive.Root
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
+
+const DropdownMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto h-4 w-4" />
+  </DropdownMenuPrimitive.SubTrigger>
+))
+DropdownMenuSubTrigger.displayName =
+  DropdownMenuPrimitive.SubTrigger.displayName
+
+const DropdownMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuSubContent.displayName =
+  DropdownMenuPrimitive.SubContent.displayName
+
+const DropdownMenuContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props}
+    />
+  </DropdownMenuPrimitive.Portal>
+))
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
+
+const DropdownMenuItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
+
+const DropdownMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <DropdownMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.CheckboxItem>
+))
+DropdownMenuCheckboxItem.displayName =
+  DropdownMenuPrimitive.CheckboxItem.displayName
+
+const DropdownMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Circle className="h-2 w-2 fill-current" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.RadioItem>
+))
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
+
+const DropdownMenuLabel = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Label
+    ref={ref}
+    className={cn(
+      "px-2 py-1.5 text-sm font-semibold",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
+
+const DropdownMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+))
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
+
+const DropdownMenuShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
+      {...props}
+    />
+  )
+}
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+}
--- a/examples/music-player/src/components/ui/toast.tsx
+++ b/examples/music-player/src/components/ui/toast.tsx
@@ -0,0 +1,127 @@
+import * as React from "react"
+import * as ToastPrimitives from "@radix-ui/react-toast"
+import { cva, type VariantProps } from "class-variance-authority"
+import { X } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const ToastProvider = ToastPrimitives.Provider
+
+const ToastViewport = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Viewport>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Viewport
+    ref={ref}
+    className={cn(
+      "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
+      className
+    )}
+    {...props}
+  />
+))
+ToastViewport.displayName = ToastPrimitives.Viewport.displayName
+
+const toastVariants = cva(
+  "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
+  {
+    variants: {
+      variant: {
+        default: "border bg-background text-foreground",
+        destructive:
+          "destructive group border-destructive bg-destructive text-destructive-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+const Toast = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
+    VariantProps<typeof toastVariants>
+>(({ className, variant, ...props }, ref) => {
+  return (
+    <ToastPrimitives.Root
+      ref={ref}
+      className={cn(toastVariants({ variant }), className)}
+      {...props}
+    />
+  )
+})
+Toast.displayName = ToastPrimitives.Root.displayName
+
+const ToastAction = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Action>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Action
+    ref={ref}
+    className={cn(
+      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
+      className
+    )}
+    {...props}
+  />
+))
+ToastAction.displayName = ToastPrimitives.Action.displayName
+
+const ToastClose = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Close>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Close
+    ref={ref}
+    className={cn(
+      "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
+      className
+    )}
+    toast-close=""
+    {...props}
+  >
+    <X className="h-4 w-4" />
+  </ToastPrimitives.Close>
+))
+ToastClose.displayName = ToastPrimitives.Close.displayName
+
+const ToastTitle = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Title>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Title
+    ref={ref}
+    className={cn("text-sm font-semibold", className)}
+    {...props}
+  />
+))
+ToastTitle.displayName = ToastPrimitives.Title.displayName
+
+const ToastDescription = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Description>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Description
+    ref={ref}
+    className={cn("text-sm opacity-90", className)}
+    {...props}
+  />
+))
+ToastDescription.displayName = ToastPrimitives.Description.displayName
+
+type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>
+
+type ToastActionElement = React.ReactElement<typeof ToastAction>
+
+export {
+  type ToastProps,
+  type ToastActionElement,
+  ToastProvider,
+  ToastViewport,
+  Toast,
+  ToastTitle,
+  ToastDescription,
+  ToastClose,
+  ToastAction,
+}
--- a/examples/music-player/src/components/ui/toaster.tsx
+++ b/examples/music-player/src/components/ui/toaster.tsx
@@ -0,0 +1,33 @@
+import { useToast } from "@/hooks/use-toast"
+import {
+  Toast,
+  ToastClose,
+  ToastDescription,
+  ToastProvider,
+  ToastTitle,
+  ToastViewport,
+} from "@/components/ui/toast"
+
+export function Toaster() {
+  const { toasts } = useToast()
+
+  return (
+    <ToastProvider>
+      {toasts.map(function ({ id, title, description, action, ...props }) {
+        return (
+          <Toast key={id} {...props}>
+            <div className="grid gap-1">
+              {title && <ToastTitle>{title}</ToastTitle>}
+              {description && (
+                <ToastDescription>{description}</ToastDescription>
+              )}
+            </div>
+            {action}
+            <ToastClose />
+          </Toast>
+        )
+      })}
+      <ToastViewport />
+    </ToastProvider>
+  )
+}
--- a/examples/music-player/src/hooks/use-toast.ts
+++ b/examples/music-player/src/hooks/use-toast.ts
@@ -0,0 +1,191 @@
+import * as React from "react"
+
+import type {
+  ToastActionElement,
+  ToastProps,
+} from "@/components/ui/toast"
+
+const TOAST_LIMIT = 1
+const TOAST_REMOVE_DELAY = 1000000
+
+type ToasterToast = ToastProps & {
+  id: string
+  title?: React.ReactNode
+  description?: React.ReactNode
+  action?: ToastActionElement
+}
+
+const actionTypes = {
+  ADD_TOAST: "ADD_TOAST",
+  UPDATE_TOAST: "UPDATE_TOAST",
+  DISMISS_TOAST: "DISMISS_TOAST",
+  REMOVE_TOAST: "REMOVE_TOAST",
+} as const
+
+let count = 0
+
+function genId() {
+  count = (count + 1) % Number.MAX_SAFE_INTEGER
+  return count.toString()
+}
+
+type ActionType = typeof actionTypes
+
+type Action =
+  | {
+      type: ActionType["ADD_TOAST"]
+      toast: ToasterToast
+    }
+  | {
+      type: ActionType["UPDATE_TOAST"]
+      toast: Partial<ToasterToast>
+    }
+  | {
+      type: ActionType["DISMISS_TOAST"]
+      toastId?: ToasterToast["id"]
+    }
+  | {
+      type: ActionType["REMOVE_TOAST"]
+      toastId?: ToasterToast["id"]
+    }
+
+interface State {
+  toasts: ToasterToast[]
+}
+
+const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()
+
+const addToRemoveQueue = (toastId: string) => {
+  if (toastTimeouts.has(toastId)) {
+    return
+  }
+
+  const timeout = setTimeout(() => {
+    toastTimeouts.delete(toastId)
+    dispatch({
+      type: "REMOVE_TOAST",
+      toastId: toastId,
+    })
+  }, TOAST_REMOVE_DELAY)
+
+  toastTimeouts.set(toastId, timeout)
+}
+
+export const reducer = (state: State, action: Action): State => {
+  switch (action.type) {
+    case "ADD_TOAST":
+      return {
+        ...state,
+        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
+      }
+
+    case "UPDATE_TOAST":
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === action.toast.id ? { ...t, ...action.toast } : t
+        ),
+      }
+
+    case "DISMISS_TOAST": {
+      const { toastId } = action
+
+      // ! Side effects ! - This could be extracted into a dismissToast() action,
+      // but I'll keep it here for simplicity
+      if (toastId) {
+        addToRemoveQueue(toastId)
+      } else {
+        state.toasts.forEach((toast) => {
+          addToRemoveQueue(toast.id)
+        })
+      }
+
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === toastId || toastId === undefined
+            ? {
+                ...t,
+                open: false,
+              }
+            : t
+        ),
+      }
+    }
+    case "REMOVE_TOAST":
+      if (action.toastId === undefined) {
+        return {
+          ...state,
+          toasts: [],
+        }
+      }
+      return {
+        ...state,
+        toasts: state.toasts.filter((t) => t.id !== action.toastId),
+      }
+  }
+}
+
+const listeners: Array<(state: State) => void> = []
+
+let memoryState: State = { toasts: [] }
+
+function dispatch(action: Action) {
+  memoryState = reducer(memoryState, action)
+  listeners.forEach((listener) => {
+    listener(memoryState)
+  })
+}
+
+type Toast = Omit<ToasterToast, "id">
+
+function toast({ ...props }: Toast) {
+  const id = genId()
+
+  const update = (props: ToasterToast) =>
+    dispatch({
+      type: "UPDATE_TOAST",
+      toast: { ...props, id },
+    })
+  const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id })
+
+  dispatch({
+    type: "ADD_TOAST",
+    toast: {
+      ...props,
+      id,
+      open: true,
+      onOpenChange: (open) => {
+        if (!open) dismiss()
+      },
+    },
+  })
+
+  return {
+    id: id,
+    dismiss,
+    update,
+  }
+}
+
+function useToast() {
+  const [state, setState] = React.useState<State>(memoryState)
+
+  React.useEffect(() => {
+    listeners.push(setState)
+    return () => {
+      const index = listeners.indexOf(setState)
+      if (index > -1) {
+        listeners.splice(index, 1)
+      }
+    }
+  }, [state])
+
+  return {
+    ...state,
+    toast,
+    dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
+  }
+}
+
+export { useToast, toast }
--- a/examples/music-player/src/lib/useUploadExampleData.ts
+++ b/examples/music-player/src/lib/useUploadExampleData.ts
@@ -1,11 +1,12 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import { useEffect } from "react";
 import { useAccount } from "../2_main";
-import { uploadMusicTracks } from "@/3_actions";
+import { uploadMusicTracks } from "@/4_actions";
 import { MusicaAccount } from "@/1_schema";

 export function useUploadExampleData() {
    const { me } = useAccount({
-        root: {}
+        root: {},
    });

    const shouldUploadOnboardingData = me?.root?.exampleDataLoaded === false;
@@ -18,11 +19,11 @@ export function useUploadExampleData() {
                me.root.exampleDataLoaded = true;
            });
        }
-    }, [shouldUploadOnboardingData])
+    }, [shouldUploadOnboardingData]);
 }

 async function uploadOnboardingData(me: MusicaAccount) {
    const trackFile = await (await fetch("/example.mp3")).blob();

    return uploadMusicTracks(me, [new File([trackFile], "Example song")]);
-}
+}
--- a/examples/password-manager/CHANGELOG.md
+++ b/examples/password-manager/CHANGELOG.md
@@ -1,42 +1,57 @@
 # jazz-password-manager

+## 0.0.5
+
+### Patch Changes
+
+-   jazz-react@0.8.3
+-   jazz-tools@0.8.3
+
+## 0.0.4
+
+### Patch Changes
+
+-   Updated dependencies [a075f90]
+    -   jazz-tools@0.8.2
+    -   jazz-react@0.8.2
+
 ## 0.0.3

 ### Patch Changes

- Updated dependencies
-  - jazz-tools@0.8.1
-  - jazz-react@0.8.1
+-   Updated dependencies
+    -   jazz-tools@0.8.1
+    -   jazz-react@0.8.1

 ## 0.0.2

 ### 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
+-   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.2-guest-auth.0

 ### Patch Changes

- Updated dependencies
-  - jazz-react@0.7.35-guest-auth.6
-  - jazz-tools@0.7.35-guest-auth.6
+-   Updated dependencies
+    -   jazz-react@0.7.35-guest-auth.6
+    -   jazz-tools@0.7.35-guest-auth.6

 ## 0.0.1

 ### 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
+-   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
--- a/examples/password-manager/package.json
+++ b/examples/password-manager/package.json
@@ -1,7 +1,7 @@
 {
  "name": "jazz-password-manager",
  "private": true,
-  "version": "0.0.3",
+  "version": "0.0.5",
  "type": "module",
  "scripts": {
    "dev": "vite",
@@ -11,8 +11,8 @@
    "clean-install": "rm -rf node_modules pnpm-lock.yaml && pnpm install"
  },
  "dependencies": {
-    "jazz-react": "workspace:0.8.1",
-    "jazz-tools": "workspace:0.8.1",
+    "jazz-react": "workspace:0.8.3",
+    "jazz-tools": "workspace:0.8.3",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-hook-form": "^7.41.5",
@@ -30,7 +30,7 @@
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.3",
    "postcss": "^8.4.27",
-    "tailwindcss": "^3.3.3",
+    "tailwindcss": "3.3.2",
    "typescript": "^5.3.3",
    "vite": "^5.0.10"
  }
--- a/examples/pets/CHANGELOG.md
+++ b/examples/pets/CHANGELOG.md
@@ -1,5 +1,22 @@
 # jazz-example-pets

+## 0.0.103
+
+### Patch Changes
+
+-   jazz-react@0.8.3
+-   jazz-tools@0.8.3
+-   jazz-browser-media-images@0.8.3
+
+## 0.0.102
+
+### Patch Changes
+
+-   Updated dependencies [a075f90]
+    -   jazz-tools@0.8.2
+    -   jazz-browser-media-images@0.8.2
+    -   jazz-react@0.8.2
+
 ## 0.0.101

 ### Patch Changes
--- a/examples/pets/package.json
+++ b/examples/pets/package.json
@@ -1,7 +1,7 @@
 {
  "name": "jazz-example-pets",
  "private": true,
-  "version": "0.0.101",
+  "version": "0.0.103",
  "type": "module",
  "scripts": {
    "dev": "vite",
@@ -9,6 +9,7 @@
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "format": "prettier --write './src/**/*.{ts,tsx}'",
    "preview": "vite preview",
+    "sync": "jazz-run sync",
    "test": "playwright test",
    "test:ui": "playwright test --ui"
  },
@@ -22,9 +23,9 @@
    "@radix-ui/react-toast": "^1.1.4",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.0.0",
-    "jazz-browser-media-images": "workspace:0.8.1",
-    "jazz-react": "workspace:0.8.1",
-    "jazz-tools": "workspace:0.8.1",
+    "jazz-browser-media-images": "workspace:0.8.3",
+    "jazz-react": "workspace:0.8.3",
+    "jazz-tools": "workspace:0.8.3",
    "lucide-react": "^0.274.0",
    "qrcode": "^1.5.3",
    "react": "^18.2.0",
@@ -49,8 +50,9 @@
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.3",
    "is-ci": "^3.0.1",
+    "jazz-run": "workspace:0.8.4",
    "postcss": "^8.4.27",
-    "tailwindcss": "^3.3.3",
+    "tailwindcss": "3.3.2",
    "typescript": "^5.3.3",
    "vite": "^5.0.10",
    "vite-plugin-top-level-await": "^1.4.4"
--- a/examples/pets/playwright.config.ts
+++ b/examples/pets/playwright.config.ts
@@ -27,7 +27,7 @@ export default defineConfig({
    /* 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",
+        baseURL: "http://localhost:5173/?peer=ws://localhost:1234",

        /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
        trace: "on-first-retry",
@@ -43,8 +43,16 @@ export default defineConfig({
    ],

    /* Run your local dev server before starting the tests */
-    webServer: isCI ? {
-        command: "pnpm preview",
-        url: "http://localhost:4173/",
-    } : undefined,
+    webServer: [
+        {
+            command: "pnpm preview --port 5173",
+            url: "http://localhost:5173/",
+            reuseExistingServer: !isCI,
+        },
+        {
+            command: "pnpm sync --in-memory --port 1234",
+            url: "http://localhost:1234/health",
+            reuseExistingServer: !isCI,
+        },
+    ],
 });
--- a/examples/pets/src/2_main.tsx
+++ b/examples/pets/src/2_main.tsx
@@ -3,17 +3,23 @@ import ReactDOM from "react-dom/client";
 import { Link, RouterProvider, createHashRouter } from "react-router-dom";
 import "./index.css";

-import {
-    createJazzReactApp,
-    DemoAuthBasicUI,
-    useDemoAuth,
-} from "jazz-react";
+import { createJazzReactApp, DemoAuthBasicUI, useDemoAuth } from "jazz-react";

-import { Button, ThemeProvider, TitleAndLogo } from "./basicComponents/index.ts";
+import {
+    Button,
+    ThemeProvider,
+    TitleAndLogo,
+} from "./basicComponents/index.ts";
 import { NewPetPostForm } from "./3_NewPetPostForm.tsx";
 import { RatePetPostUI } from "./4_RatePetPostUI.tsx";
 import { PetAccount, PetPost } from "./1_schema.ts";

+const peer =
+    (new URL(window.location.href).searchParams.get(
+        "peer",
+    ) as `ws://${string}`) ??
+    "wss://mesh.jazz.tools/?key=music-player-example-jazz@gcmp.io";
+
 /** Walkthrough: The top-level provider `<Jazz.Provider/>`
 *
 *  This shows how to use the top-level provider `<Jazz.Provider/>`,
@@ -34,7 +40,7 @@ function JazzAndAuth({ children }: { children: React.ReactNode }) {
        <>
            <Jazz.Provider
                auth={auth}
-                peer="wss://mesh.jazz.tools/?key=pets-example-jazz@gcmp.io"
+                peer={peer}
            >
                {children}
            </Jazz.Provider>
--- a/examples/pets/src/3_NewPetPostForm.tsx
+++ b/examples/pets/src/3_NewPetPostForm.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import { ChangeEvent, useCallback, useState } from "react";
 import { useNavigate } from "react-router";
 import { createImage } from "jazz-browser-media-images";
--- a/examples/pets/tests/pages/LoginPage.ts
+++ b/examples/pets/tests/pages/LoginPage.ts
@@ -9,7 +9,7 @@ export class LoginPage {
        this.page = page;
        this.usernameInput = page.getByRole("textbox");
        this.signupButton = page.getByRole("button", {
-            name: "Sign up as new account",
+            name: "Sign up",
        });
    }

@@ -25,7 +25,7 @@ export class LoginPage {
    async loginAs(value: string) {
        await this.page
            .getByRole("button", {
-                name: `Log in as "${value}"`,
+                name: value,
            })
            .click();
    }
--- a/examples/todo/CHANGELOG.md
+++ b/examples/todo/CHANGELOG.md
@@ -1,5 +1,20 @@
 # jazz-example-todo

+## 0.0.102
+
+### Patch Changes
+
+-   jazz-react@0.8.3
+-   jazz-tools@0.8.3
+
+## 0.0.101
+
+### Patch Changes
+
+-   Updated dependencies [a075f90]
+    -   jazz-tools@0.8.2
+    -   jazz-react@0.8.2
+
 ## 0.0.100

 ### Patch Changes
--- a/examples/todo/package.json
+++ b/examples/todo/package.json
@@ -1,7 +1,7 @@
 {
  "name": "jazz-example-todo",
  "private": true,
-  "version": "0.0.100",
+  "version": "0.0.102",
  "type": "module",
  "scripts": {
    "dev": "vite",
@@ -20,8 +20,8 @@
    "@radix-ui/react-toast": "^1.1.4",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.0.0",
-    "jazz-react": "workspace:0.8.1",
-    "jazz-tools": "workspace:0.8.1",
+    "jazz-react": "workspace:0.8.3",
+    "jazz-tools": "workspace:0.8.3",
    "lucide-react": "^0.274.0",
    "qrcode": "^1.5.3",
    "react": "^18.2.0",
@@ -45,7 +45,7 @@
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.3",
    "postcss": "^8.4.27",
-    "tailwindcss": "^3.3.3",
+    "tailwindcss": "3.3.2",
    "typescript": "^5.3.3",
    "vite": "^5.0.10"
  }
--- a/homepage/design-system/package.json
+++ b/homepage/design-system/package.json
@@ -1,34 +1,34 @@
 {
-  "name": "gcmp-design-system",
-  "version": "0.1.0",
-  "private": true,
-  "scripts": {
-    "dev": "next dev",
-    "build": "next build",
-    "start": "next start",
-    "lint": "next lint"
-  },
-  "dependencies": {
-    "@evilmartians/harmony": "^1.0.0",
-    "class-variance-authority": "^0.7.0",
-    "clsx": "^2.1.1",
-    "lucide-react": "^0.436.0",
-    "next": "14.2.7",
-    "react": "^18",
-    "react-dom": "^18",
-    "tailwind-merge": "^1.14.0",
-    "tailwindcss-animate": "^1.0.7"
-  },
-  "devDependencies": {
-    "@csstools/postcss-oklab-function": "^3.0.6",
-    "@tailwindcss/typography": "^0.5.10",
-    "@types/node": "^20",
-    "@types/react": "^18",
-    "@types/react-dom": "^18",
-    "eslint": "^8",
-    "eslint-config-next": "14.2.7",
-    "postcss": "^8",
-    "tailwindcss": "^3.4.1",
-    "typescript": "^5"
-  }
+    "name": "gcmp-design-system",
+    "version": "0.1.0",
+    "private": true,
+    "scripts": {
+        "dev": "next dev",
+        "build": "next build",
+        "start": "next start",
+        "lint": "next lint"
+    },
+    "dependencies": {
+        "@evilmartians/harmony": "^1.0.0",
+        "class-variance-authority": "^0.7.0",
+        "clsx": "^2.1.1",
+        "lucide-react": "^0.436.0",
+        "next": "14.2.7",
+        "react": "^18",
+        "react-dom": "^18",
+        "tailwind-merge": "^1.14.0",
+        "tailwindcss-animate": "^1.0.7"
+    },
+    "devDependencies": {
+        "@csstools/postcss-oklab-function": "^3.0.6",
+        "@tailwindcss/typography": "^0.5.10",
+        "@types/node": "^20",
+        "@types/react": "^18",
+        "@types/react-dom": "^18",
+        "eslint": "^8",
+        "eslint-config-next": "14.2.7",
+        "postcss": "^8",
+        "tailwindcss": "^3.4.1",
+        "typescript": "^5.3.3"
+    }
 }
--- a/homepage/design-system/src/app/components/molecules/Breadcrumb.tsx
+++ b/homepage/design-system/src/app/components/molecules/Breadcrumb.tsx
@@ -8,10 +8,13 @@ export function BreadCrumb({
    items: { title: string; href: string }[];
 }) {
    const pathName = usePathname();
+    const title = items.find((item) => item.href === pathName)?.title;
+
+    if (!title) return null;

    return (
-        <span className="text-sm font-bold">
-            {items.find((item) => item.href === pathName)?.title}
+        <span className="text-sm font-semibold">
+            {title}
        </span>
    );
 }
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Trisha Lim	e00f1599c8	wip	2024-10-09 17:52:55 +01:00
Trisha Lim	3adbe72fda	wip	2024-10-09 17:37:42 +01:00
Trisha Lim	79ed3c9c11	wip	2024-10-09 17:29:39 +01:00
Trisha Lim	478a851200	wip	2024-10-09 17:13:32 +01:00
Anselm Eickhoff	863eb73ad1	Merge pull request #484 from gardencmp/feature/chat-e2e test: add basic e2e tests for the chat app	2024-10-09 10:55:09 +01:00
Anselm Eickhoff	5a41a9e7b9	Merge pull request #464 from gardencmp/feature/music-remake feat: ui refresh for the music player	2024-10-09 10:50:52 +01:00
Anselm Eickhoff	f89e2772bc	Fix expected Sign up button label	2024-10-09 10:49:09 +01:00
Anselm Eickhoff	7ca45c4a24	Merge pull request #494 from gardencmp/turbo-config-changes Add build task as dependency for dev and test	2024-10-09 10:45:12 +01:00
Anselm Eickhoff	b4449b92bb	Merge branch 'main' into feature/chat-e2e	2024-10-09 10:41:42 +01:00
Guido D'Orsi	10738a7c3d	chore: update pkg	2024-10-09 11:41:17 +02:00
Anselm Eickhoff	08fdb0316a	Merge pull request #492 from gardencmp/feature/co-json-types fix(co.json): allow interface types as generic argument	2024-10-09 10:41:06 +01:00
Guido D'Orsi	6ebc5967f4	Merge remote-tracking branch 'origin/main' into feature/music-remake	2024-10-09 11:40:26 +02:00
Anselm	11a3da61e1	Fix jazz-run dev dep in chat example	2024-10-09 10:39:18 +01:00
Anselm Eickhoff	ef1592dbee	Merge pull request #513 from gardencmp/test/pets-with-local-sync test(pets): run tests using local sync	2024-10-09 10:35:44 +01:00
Anselm	d9152ed556	Add changeset	2024-10-09 10:31:38 +01:00
Anselm	509c8fad3f	Merge branch 'main' into feature/co-json-types	2024-10-09 10:30:28 +01:00
Anselm Eickhoff	19b4f6d21d	Merge pull request #510 from gardencmp/trishalim-jazz-370 Rename mesh to "Jazz Mesh", move section higher in the home page	2024-10-09 10:26:47 +01:00
Anselm	d705ef7e14	Release jazz-run	2024-10-09 10:19:36 +01:00
Guido D'Orsi	b99cc2a665	test(pets): run tests using local sync	2024-10-09 11:01:13 +02:00
Anselm Eickhoff	4e6e87aadd	Merge pull request #512 from gardencmp/fix/jazz-run	2024-10-09 08:44:35 +01:00
Guido D'Orsi	561924f18f	fix(jazz-run): fix broken import	2024-10-09 09:40:53 +02:00
Trisha Lim	80d5c32405	Update Jazz Mesh subheading	2024-10-08 18:04:12 +01:00
Trisha Lim	4b33a13758	Move Jazz Mesh section up the home page	2024-10-08 18:01:18 +01:00
Trisha Lim	8878c1eebd	Fix home page spacing	2024-10-08 17:55:55 +01:00
Trisha Lim	c10ad968f9	Change "ours" to "Jazz Mesh" in diagram	2024-10-08 17:53:42 +01:00
Trisha Lim	a19b817818	Rename "Sync & Storage Mesh" to "Jazz Mesh"	2024-10-08 17:53:26 +01:00
Anselm Eickhoff	7192b142a3	Merge pull request #509 from gardencmp/fix/feature-section-layout	2024-10-08 17:19:09 +01:00
Trisha Lim	fc34a18934	Fix layout in homepage feature section	2024-10-08 17:08:40 +01:00
Anselm Eickhoff	d7ce6fa254	Merge branch 'main' into feature/co-json-types	2024-10-08 17:01:00 +01:00
Anselm Eickhoff	ed94e2ca2c	Merge pull request #453 from gardencmp/trishalim-jazz-336 Fix scroll issue on chat example app if there are many users	2024-10-08 16:46:08 +01:00
Anselm Eickhoff	0c6e05e7ab	Merge pull request #483 from gardencmp/trishalim-jazz-354 Make example code in package API reference readable	2024-10-08 16:44:21 +01:00
Anselm Eickhoff	a6e966438b	Merge branch 'main' into trishalim-jazz-354	2024-10-08 16:39:07 +01:00
Anselm Eickhoff	f668bc05f2	Merge pull request #476 from davidvasandani/patch-1 fix: path issues	2024-10-08 16:37:31 +01:00
Anselm Eickhoff	4d95f8ea8e	Merge pull request #477 from gardencmp/trishalim-jazz-348 Add copy button for code snippets	2024-10-08 16:37:05 +01:00
Anselm Eickhoff	9172558481	Merge pull request #508 from gardencmp/remove-top-cta Remove top-level CTA buttons	2024-10-08 16:36:25 +01:00
Trisha Lim	fbdf091dd8	Remove top-level CTA buttons	2024-10-08 16:32:02 +01:00
Anselm Eickhoff	16c4fad514	Merge pull request #449 from gardencmp/trishalim-jazz-287 Homepage: redesign hero, add diagrams	2024-10-08 16:27:25 +01:00
Anselm	6e7591ab38	Last copy changes	2024-10-08 16:21:05 +01:00
Anselm	a85875bc53	Fix lint issues	2024-10-08 15:15:58 +01:00
Anselm	e1b25750b9	New feature copy	2024-10-08 15:06:17 +01:00
Anselm Eickhoff	eae6c27566	Merge pull request #497 from gardencmp/467-create-codate-shortcut Add co.Date and update test	2024-10-08 14:31:22 +01:00
Anselm	f66079ea22	Fix lockfile	2024-10-08 12:18:49 +01:00
Anselm Eickhoff	2a35761401	Merge pull request #503 from gardencmp/fix/chat-height Wrap text in chat message	2024-10-08 13:17:41 +02:00
Anselm	103a82075d	Parent-frame friendlier navigation	2024-10-08 12:16:08 +01:00
Anselm	e85ab79026	Manually trigger hashchange event for now	2024-10-08 12:06:57 +01:00
Anselm	5f3680e749	Manually trigger hashchange for now	2024-10-08 12:06:27 +01:00
Trisha Lim	5956217b41	Revert "Fix: can't find input box in mobile til scrolling down" This reverts commit `7295abeac5`.	2024-10-08 12:02:41 +01:00
Anselm	03c0d81ca1	Stop chat example from creating history entries	2024-10-08 12:00:44 +01:00
Trisha Lim	0d53f378a0	Wrap text in chat app	2024-10-08 11:46:54 +01:00
Anselm	428ec8c170	Limit number of messages and scroll to bottom	2024-10-08 11:31:50 +01:00
Anselm Eickhoff	4cc442babc	Merge pull request #500 from gardencmp/trishalim-jazz-365 Set 2048 character limit per message to chat app	2024-10-08 12:13:29 +02:00
Anselm Eickhoff	1f9b94c0c7	Apply suggestions from code review Let's clamp to 10 lines	2024-10-08 11:11:27 +01:00
Trisha Lim	4c9d2b5a41	Limit chat messages to display 20 lines max	2024-10-08 11:08:11 +01:00
Trisha Lim	183e384819	Center align loading text in chat app	2024-10-08 11:08:11 +01:00
Trisha Lim	7295abeac5	Fix: can't find input box in mobile til scrolling down	2024-10-08 11:08:11 +01:00
Trisha Lim	77f1351000	Set 2048 character limit per message to chat app	2024-10-08 11:00:15 +01:00
Anselm Eickhoff	ba3e09a2a0	Merge pull request #501 from gardencmp/fix/chat-crash fix(localNode): do not crash the app when we fail to resolve the account agent	2024-10-08 11:59:38 +02:00
Guido D'Orsi	21890eb99d	fix(localNode): do not crash the app when we fail to resolve the account agent	2024-10-08 11:55:15 +02:00
Guido D'Orsi	489de02696	chore: update lockfile	2024-10-08 11:54:38 +02:00
Guido D'Orsi	4c3be94376	chore: update lockfile	2024-10-07 19:30:47 +02:00
Benjamin S. Leveritt	37180974a8	chore: update pnpm lock	2024-10-07 17:43:35 +01:00
Benjamin S. Leveritt	8cf1aa5ac4	Add co.Date and update test	2024-10-07 17:30:26 +01:00
Guido D'Orsi	7aee91eb83	fix(co.json): accept optional types	2024-10-07 16:38:55 +02:00
Guido D'Orsi	8890c84d39	fix(co.json): accept types with optional parameters	2024-10-07 16:38:55 +02:00
Guido D'Orsi	2b301c723b	chore(jsonValue): fix typo in a comment	2024-10-07 16:38:55 +02:00
Guido D'Orsi	6e7f4facbd	fix(co.json): allow nested interface types	2024-10-07 16:38:55 +02:00
Guido D'Orsi	a2ec72eab2	fix(co.json): disallow functions and Regexp	2024-10-07 16:38:55 +02:00
Guido D'Orsi	7ac660820f	fix(co.json): allow interface types as generic argument	2024-10-07 16:38:55 +02:00
Anselm	a8d33d14c8	Release	2024-10-07 15:20:11 +01:00
Benjamin S. Leveritt	72c33640f6	Add build task as dependency for dev and test	2024-10-07 15:16:06 +01:00
Anselm Eickhoff	fd21db18fc	Merge pull request #471 from gardencmp/JAZZ-314/react-native-proof-of-concept React Native Support	2024-10-07 16:08:33 +02:00
Trisha Lim	92e9ea50d4	Fix scroll issue on chat example app if there are many users	2024-10-07 14:55:18 +01:00
Trisha Lim	d1c4f16df0	Change "Sign up as new account" to "Sign up"	2024-10-07 14:44:41 +01:00
pax-k	738940a634	fix: sherif lint - pin dependencies versions	2024-10-07 16:35:11 +03:00
pax-k	a0d3dcafdc	chore: lint issues	2024-10-07 16:22:05 +03:00
pax-k	9bae5569de	chore: pnpm lock	2024-10-07 16:18:44 +03:00
pax-k	6f6fcf25e7	Merge branch 'main' into JAZZ-314/react-native-proof-of-concept	2024-10-07 16:17:27 +03:00
pax-k	430cf732a6	fix: temporary skipErrorChecking for jazz-react in genDocs	2024-10-07 16:15:43 +03:00
pax-k	9851227258	chore: use the same typescript version across packages	2024-10-07 16:00:16 +03:00
pax-k	3c302cb675	fix(react-native): handle duplicate usernames by appending incremental suffix	2024-10-07 15:47:25 +03:00
pax-k	0fb11b4f98	fix(react-native): native chat UI	2024-10-07 15:46:28 +03:00
pax-k	cee3750f2e	fix(react-native): polyfils	2024-10-07 15:46:00 +03:00
pax-k	140c5fc928	fix(react-native): polyfils	2024-10-07 15:45:42 +03:00
pax	fd331a5692	Merge pull request #488 from tobiaslins/improve-chat-ui-rn First iteration of improved chat ui	2024-10-07 12:21:51 +03:00
Tobias Lins	7c12a16ad4	First iteration of chat ui	2024-10-06 21:18:16 +02:00
Guido D'Orsi	079963fb47	chore(chat): add a sr-only label to the message box	2024-10-06 11:35:39 +02:00
Guido D'Orsi	82f0ebaf6f	test: add basic e2e tests for the chat app	2024-10-04 19:28:22 +02:00
Trisha Lim	3772ef9645	Don't wrap code in the middle of paragraph	2024-10-04 17:18:24 +01:00
Trisha Lim	0e67bdccfc	Fix spacing in mobile menu hamburger icon	2024-10-04 17:13:42 +01:00
Trisha Lim	39e33f4fac	Make example code in package API reference readable	2024-10-04 17:13:42 +01:00
pax-k	358dec2e09	feat(react-native): chat demo to handle invite links (wip)	2024-10-03 22:46:23 +03:00
pax-k	b76b9aa267	feat(react-native): added support for handling invite deep links	2024-10-03 22:45:49 +03:00
Trisha Lim	f2f10c58d7	Add copy button for code snippets	2024-10-02 20:43:05 +01:00
David Vasandani	3d77fff140	fix: path issues	2024-10-02 09:50:11 -07:00
pax-k	9cb111373b	fix(react-native): added native kv storage support	2024-10-02 17:46:13 +03:00
pax-k	e07fb36c26	fix(react-native): implement network connectivity logic	2024-10-02 14:58:29 +03:00
Anselm Eickhoff	79bb915b43	Merge pull request #473 from gardencmp/trishalim-jazz-321 Remove empty space in code example tab	2024-10-02 09:38:40 +01:00
Trisha Lim	9926c485e7	Remove empty space in code example tab	2024-10-01 21:03:08 +01:00
Guido D'Orsi	abbda85c16	feat: clean up unused files and optimize subscriptions	2024-10-01 19:42:38 +02:00
pax-k	d77fb9db0c	chore(react-native): cleanup	2024-10-01 20:10:09 +03:00
pax-k	595b1c71b4	feat(rn-poc): implementing react-native support	2024-10-01 19:30:13 +03:00
Guido D'Orsi	625ddd5db9	feat: ui refresh for the music player	2024-10-01 16:30:05 +02:00
Trisha Lim	9e1fa1adc6	Update illustration copy to be lowercase	2024-10-01 11:33:10 +01:00
Anselm	d87c081055	Fix lockfile	2024-10-01 10:40:25 +01:00
Anselm	f224b2b4ea	Release	2024-10-01 10:11:26 +01:00
Anselm Eickhoff	f70d34fb0b	Merge pull request #462 from gardencmp/gudorsi-jazz-173 changeset for the cursor fix	2024-10-01 10:09:49 +01:00
Guido D'Orsi	a075f90890	changeset	2024-10-01 11:08:36 +02:00
Anselm Eickhoff	66686e4f71	Merge pull request #461 from gardencmp/gudorsi-jazz-173 fix(jazz-react): fix cursor reset on text input updates	2024-10-01 10:07:34 +01:00
Anselm Eickhoff	e8a6f9d123	Merge pull request #460 from gardencmp/feature/text-cursor-position-test test(CoMap): add a failing test to check the cursor position while editing text inputs	2024-10-01 10:06:44 +01:00
Trisha Lim	9246c009b8	Add example apps to docs (#456 ) * Add example apps to docs	2024-10-01 09:58:25 +01:00
Guido D'Orsi	afa43dc248	fix(jazz-react): fix cursor reset on text input updates	2024-09-30 19:27:54 +02:00
Guido D'Orsi	effa15082e	test(CoMap): add a failing test to check the cursor position while editing text inputs	2024-09-30 19:27:27 +02:00
pax-k	958f534a16	Merge branch 'main' into JAZZ-314/react-native-proof-of-concept	2024-09-30 16:56:02 +03:00
Anselm Eickhoff	2a648a620c	Merge pull request #459 from gardencmp/fix-tests Fix tests	2024-09-30 14:52:52 +01:00
pax-k	f10d13be3b	fix: tests	2024-09-30 16:49:31 +03:00
Anselm Eickhoff	e8f7e90220	Merge pull request #454 from gardencmp/trishalim-jazz-334 Add api-reference page listing packages and descriptions	2024-09-30 11:23:03 +01:00
Trisha Lim	6bf16fd52c	Add api-reference page listing packages and descriptions	2024-09-27 14:41:54 +01:00
Trisha Lim	f290f7716e	Fix logo not center aligned	2024-09-27 12:48:11 +01:00
Trisha Lim	3a83fdf005	Button hover styles	2024-09-26 19:06:42 +01:00
Trisha Lim	88ca9fe406	Make arrow more subtle	2024-09-26 19:06:42 +01:00
Trisha Lim	00e5847fbe	Add CTA buttons to bottom of home page	2024-09-26 19:06:42 +01:00
Trisha Lim	7d54bc8cdd	Add button component	2024-09-26 19:06:42 +01:00
Trisha Lim	b684ca1fd6	Add diagram for light mode	2024-09-26 19:06:42 +01:00
Trisha Lim	3c934e97ac	Add diagram to homepage, rewrite copy	2024-09-26 19:06:42 +01:00
Anselm Eickhoff	f143a4aa4d	Merge pull request #451 from gardencmp/trishalim-jazz-337 Set blue (primary) color palette	2024-09-26 10:50:09 -07:00
Trisha Lim	0c07fcee1c	Set blue (primary) color palette	2024-09-26 18:01:06 +01:00
Anselm Eickhoff	eca9698bbc	Merge pull request #448 from gardencmp/trishalim-jazz-320 Improve styling for code snippets	2024-09-25 08:46:40 -07:00
Trisha Lim	de66d90b85	Styling for removed line in code snippet	2024-09-25 16:16:55 +01:00
Trisha Lim	4bc815a576	Improve styling for code snippets	2024-09-25 14:30:19 +01:00
Anselm Eickhoff	0bd4fea0dd	Merge pull request #444 from gardencmp/trishalim-jazz-307 Emphasize invite link to join chat in chat example	2024-09-24 13:01:57 -07:00
Trisha Lim	35c310dc47	Add "copy url to invite" button	2024-09-24 19:53:04 +01:00
Trisha Lim	f80442793a	Switch to url field	2024-09-24 19:17:44 +01:00
Anselm Eickhoff	98be05f697	Merge pull request #441 from gardencmp/anselm-jazz-332 Finish Guide	2024-09-24 11:13:39 -07:00
Trisha Lim	0b6e9e6c4d	Dark mode styling for homepage chat example	2024-09-24 18:59:49 +01:00
Trisha Lim	45046f571f	Mobile view for homepage chat example	2024-09-24 18:36:11 +01:00
Trisha Lim	4ccad8ac0b	Add invite link	2024-09-24 18:17:46 +01:00
Anselm	e4d68bb56b	Heading structure for Groups & Permissions	2024-09-24 10:02:27 -07:00
Anselm	ab7c560fbb	Merge branch 'main' into anselm-jazz-332	2024-09-24 09:48:55 -07:00
Anselm Eickhoff	32c820be56	Merge pull request #440 from gardencmp/trishalim-jazz-322 Redesign UI of docs side nav	2024-09-24 09:43:30 -07:00
Anselm	f5d7c9fd6b	Fix details marker on Safari	2024-09-24 09:36:59 -07:00
Anselm	6b90c6048b	New intro	2024-09-24 09:29:52 -07:00
Trisha Lim	80bb793e3a	Scroll chat body only, not whole screen	2024-09-24 15:56:09 +01:00
Trisha Lim	b275ffbe01	Redesign code example section	2024-09-24 15:43:37 +01:00
Trisha Lim	49f60bda67	Minimal UI improvements to chat example	2024-09-24 15:19:03 +01:00
Trisha Lim	8b52f180af	Get design system app running	2024-09-24 13:47:33 +01:00
Trisha Lim	46365a35fe	Redesign UI of docs side nav	2024-09-24 13:46:53 +01:00
Anselm	f3232b5361	Fix lockfile	2024-09-23 14:20:14 -07:00
Anselm	ac9dab0b3b	Group explanation and half of invitation flow	2024-09-23 12:30:56 -07:00
Anselm	9b1227915e	Comment out TODOs	2024-09-23 11:34:38 -07:00
Anselm	dbb024e4da	Reshuffle headings	2024-09-23 11:34:18 -07:00
pax-k	15356960e9	chore: react-native scaffolding (wip)	2024-09-23 12:52:48 +03:00