Styling improvements for code snippets

Feat: add status page to homepage

.changeset/config.json

@@ -6,18 +6,23 @@
   "linked": [
     [
       "cojson",
-      "jazz-tools",
-      "jazz-browser",
-      "jazz-browser-media-images",
-      "jazz-browser-auth-clerk",
-      "jazz-react-auth-clerk",
-      "jazz-react",
-      "jazz-react-native",
-      "jazz-nodejs",
-      "jazz-run",
-      "cojson-transport-ws",
+      "cojson-storage",
       "cojson-storage-indexeddb",
-      "cojson-storage-sqlite"
+      "cojson-storage-sqlite",
+      "cojson-transport-ws",
+      "jazz-browser",
+      "jazz-browser-auth-clerk",
+      "jazz-browser-media-images",
+      "jazz-nodejs",
+      "jazz-react",
+      "jazz-react-auth-clerk",
+      "jazz-react-native",
+      "jazz-react-native-auth-clerk",
+      "jazz-react-native-media-images",
+      "jazz-run",
+      "jazz-svelte",
+      "jazz-tools",
+      "jazz-vue"
     ]
   ],
   "access": "public",

.changeset/stupid-tigers-relate.md

@@ -0,0 +1,7 @@
+---
+"jazz-react-native": patch
+---
+
+Fix username key hashing in DemoAuth
+Improve error handling when loading an existing account fails
+Fix the double context creation in Reacc development mode

.changeset/tiny-trains-vanish.md

@@ -0,0 +1,5 @@
+---
+"cojson": patch
+---
+
+Add the assign method to RawCoMap to create bulk transactions and optimize RawCoMap init

.github/workflows/build-starters.yaml

@@ -0,0 +1,52 @@
+name: Build Starters
+
+on:
+  push:
+    branches: [ "main" ]
+
+jobs:
+  build-starters:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        starter: [
+          "react-demo-auth-tailwind",
+        ]
+
+    steps:
+    - uses: actions/checkout@v3
+      with:
+        submodules: true
+
+    - name: Enable corepack
+      run: corepack enable
+
+    - name: Install Node.js
+      uses: actions/setup-node@v3
+      with:
+        node-version-file: '.node-version'
+        cache: 'pnpm'
+
+    - name: Get pnpm store directory
+      shell: bash
+      run: |
+        echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+
+    - uses: actions/cache@v3
+      name: Setup pnpm cache
+      with:
+        path: ${{ env.STORE_PATH }}
+        key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+        restore-keys: |
+          ${{ runner.os }}-pnpm-store-
+
+
+    - name: Install dependencies
+      run: pnpm install --frozen-lockfile
+
+
+    - name: Pnpm Build
+      run: |
+        pnpm install
+        pnpm turbo build;
+      working-directory: ./starters/${{ matrix.starter }}

.github/workflows/playwright.yml

@@ -13,7 +13,7 @@ jobs:
     continue-on-error: true
     strategy:
       matrix:
-        project: ["tests/e2e", "examples/chat", "examples/music-player", "examples/pets", "examples/onboarding"]
+        project: ["tests/e2e", "examples/chat", "examples/file-share-svelte", "examples/form", "examples/music-player", "examples/pets", "examples/onboarding"]
 
     steps:
       - uses: actions/checkout@v3
@@ -48,10 +48,6 @@ jobs:
       - name: Pnpm 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

.github/workflows/release.yml

@@ -4,6 +4,13 @@ on:
   push:
     branches:
       - main
+  workflow_dispatch:
+    inputs:
+      debug_enabled:
+        type: boolean
+        description: "Run tmate session for debugging"
+        required: false
+        default: false
 
 concurrency: ${{ github.workflow }}-${{ github.ref }}
 
@@ -48,4 +55,11 @@ jobs:
           publish: pnpm release
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+
+      # Enable tmate debugging only if the workflow is manually triggered, debug_enabled is true, and the workflow failed
+      - name: Setup tmate session for debugging
+        if: ${{ failure() && github.event_name == 'workflow_dispatch' && inputs.debug_enabled }}
+        uses: mxschmitt/action-tmate@v3
+        with:
+          timeout-minutes: 15

.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 --filter="./packages/*"
 
       - name: Unit Tests
         run: pnpm test:ci

.gitignore

@@ -5,6 +5,7 @@ docsTmp
 .DS_Store
 .turbo
 coverage
+.direnv
 
 # Next.js
 **/.next

.node-version

@@ -1 +1 @@
-20
+22

.nvmrc

@@ -0,0 +1 @@
+22

biome.json

@@ -25,7 +25,53 @@
   "linter": {
     "enabled": false,
     "rules": {
-      "recommended": true
+      "recommended": true,
+      "correctness": {
+        "useImportExtensions": {
+          "level": "error",
+          "options": {
+            "suggestedExtensions": {
+              "ts": {
+                "module": "js",
+                "component": "jsx"
+              }
+            }
+          }
+        }
+      }
     }
-  }
+  },
+  "overrides": [
+    {
+      "include": ["packages/**/src/**"],
+      "linter": {
+        "enabled": true,
+        "rules": {
+          "recommended": false
+        }
+      }
+    },
+    {
+      "include": ["packages/**/src/tests/**", "packages/**/src/test/**"],
+      "linter": {
+        "rules": {
+          "correctness": {
+            "useImportExtensions": "off"
+          }
+        }
+      }
+    },
+    {
+      "include": ["packages/cojson-storage-indexeddb/**"],
+      "linter": {
+        "enabled": true,
+        "rules": {
+          "recommended": true,
+          "suspicious": {
+            "noExplicitAny": "info"
+          }
+        }
+      }
+    }
+  ]
 }

examples/book-shelf/.gitignore

@@ -1,36 +0,0 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
-.yarn/install-state.gz
-
-# testing
-/coverage
-
-# next.js
-/.next/
-/out/
-
-# production
-/build
-
-# misc
-.DS_Store
-*.pem
-
-# debug
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-
-# local env files
-.env*.local
-
-# vercel
-.vercel
-
-# typescript
-*.tsbuildinfo
-next-env.d.ts

examples/book-shelf/CHANGELOG.md

@@ -1,238 +0,0 @@
-# jazz-example-book-shelf
-
-## 0.1.28
-
-### Patch Changes
-
-- Updated dependencies [441fe27]
-  - jazz-tools@0.8.36
-  - jazz-react@0.8.36
-  - jazz-browser-media-images@0.8.36
-
-## 0.1.27
-
-### Patch Changes
-
-- Updated dependencies [9212ab8]
-- Updated dependencies [8b87117]
-  - jazz-react@0.8.35
-  - jazz-tools@0.8.35
-  - jazz-browser-media-images@0.8.35
-
-## 0.1.26
-
-### Patch Changes
-
-- jazz-react@0.8.34
-- jazz-tools@0.8.34
-- jazz-browser-media-images@0.8.34
-
-## 0.1.25
-
-### Patch Changes
-
-- jazz-browser-media-images@0.8.33
-- jazz-react@0.8.33
-
-## 0.1.24
-
-### Patch Changes
-
-- Updated dependencies [df42b2b]
-  - jazz-tools@0.8.32
-  - jazz-react@0.8.32
-  - jazz-browser-media-images@0.8.32
-
-## 0.1.23
-
-### Patch Changes
-
-- jazz-react@0.8.31
-- jazz-tools@0.8.31
-- jazz-browser-media-images@0.8.31
-
-## 0.1.22
-
-### Patch Changes
-
-- jazz-react@0.8.30
-- jazz-tools@0.8.30
-- jazz-browser-media-images@0.8.30
-
-## 0.1.21
-
-### Patch Changes
-
-- jazz-react@0.8.29
-- jazz-tools@0.8.29
-- jazz-browser-media-images@0.8.29
-
-## 0.1.20
-
-### Patch Changes
-
-- jazz-react@0.8.28
-- jazz-tools@0.8.28
-- jazz-browser-media-images@0.8.28
-
-## 0.1.19
-
-### Patch Changes
-
-- jazz-react@0.8.27
-- jazz-tools@0.8.27
-- jazz-browser-media-images@0.8.27
-
-## 0.1.18
-
-### Patch Changes
-
-- Updated dependencies [59d37df]
-  - jazz-react@0.8.26
-
-## 0.1.17
-
-### Patch Changes
-
-- jazz-browser-media-images@0.8.24
-- jazz-react@0.8.24
-
-## 0.1.16
-
-### Patch Changes
-
-- Updated dependencies [d348c2d]
-- Updated dependencies [6902b5b]
-- Updated dependencies [1a0cd3d]
-  - jazz-tools@0.8.23
-  - jazz-react@0.8.23
-  - jazz-browser-media-images@0.8.23
-
-## 0.1.15
-
-### Patch Changes
-
-- Updated dependencies [59cc64d]
-  - jazz-react@0.8.22
-  - jazz-browser-media-images@0.8.22
-
-## 0.1.14
-
-### Patch Changes
-
-- Updated dependencies [149ca97]
-  - jazz-tools@0.8.21
-  - jazz-react@0.8.21
-  - jazz-browser-media-images@0.8.21
-
-## 0.1.13
-
-### Patch Changes
-
-- Updated dependencies [dd9b13f]
-- Updated dependencies [a69ed0b]
-- Updated dependencies [3ef3ff3]
-- Updated dependencies [c6931b8]
-  - jazz-react@0.8.20
-  - jazz-browser-media-images@0.8.20
-
-## 0.1.12
-
-### Patch Changes
-
-- jazz-react@0.8.19
-- jazz-tools@0.8.19
-- jazz-browser-media-images@0.8.19
-
-## 0.1.11
-
-### Patch Changes
-
-- jazz-react@0.8.18
-- jazz-tools@0.8.18
-- jazz-browser-media-images@0.8.18
-
-## 0.1.10
-
-### Patch Changes
-
-- jazz-react@0.8.17
-- jazz-tools@0.8.17
-- jazz-browser-media-images@0.8.17
-
-## 0.1.9
-
-### Patch Changes
-
-- Updated dependencies [2af107c]
-  - jazz-react@0.8.16
-  - jazz-browser-media-images@0.8.16
-  - jazz-tools@0.8.16
-
-## 0.1.8
-
-### Patch Changes
-
-- Updated dependencies [cce679b]
-  - jazz-tools@0.8.15
-  - jazz-browser-media-images@0.8.15
-  - jazz-react@0.8.15
-
-## 0.1.7
-
-### Patch Changes
-
-- Updated dependencies [36273b3]
-  - jazz-tools@0.8.14
-  - jazz-browser-media-images@0.8.14
-  - jazz-react@0.8.14
-
-## 0.1.6
-
-### Patch Changes
-
-- Updated dependencies [fd011d7]
-  - jazz-tools@0.8.13
-  - jazz-browser-media-images@0.8.13
-  - jazz-react@0.8.13
-
-## 0.1.5
-
-### Patch Changes
-
-- Updated dependencies [3cc6aee]
-  - jazz-react@0.8.12
-  - jazz-tools@0.8.12
-  - jazz-browser-media-images@0.8.12
-
-## 0.1.4
-
-### Patch Changes
-
-- jazz-react@0.8.11
-- jazz-tools@0.8.11
-- jazz-browser-media-images@0.8.11
-
-## 0.1.3
-
-### Patch Changes
-
-- jazz-browser-media-images@0.8.7
-- jazz-react@0.8.7
-
-## 0.1.2
-
-### Patch Changes
-
-- jazz-browser-media-images@0.8.6
-- jazz-react@0.8.6
-
-## 0.1.1
-
-### Patch Changes
-
-- Updated dependencies [c3f4e6b]
-- Updated dependencies [d9152ed]
-  - jazz-tools@0.8.5
-  - jazz-browser-media-images@0.8.5
-  - jazz-react@0.8.5

examples/book-shelf/Dockerfile

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

examples/book-shelf/job-template.nomad

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

examples/book-shelf/next-env.d.ts

@@ -1,5 +0,0 @@
-/// <reference types="next" />
-/// <reference types="next/image-types/global" />
-
-// NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.

examples/book-shelf/next.config.mjs

@@ -1,4 +0,0 @@
-/** @type {import('next').NextConfig} */
-const nextConfig = {};
-
-export default nextConfig;

examples/book-shelf/package.json

@@ -1,29 +0,0 @@
-{
-  "name": "jazz-example-book-shelf",
-  "version": "0.1.28",
-  "private": true,
-  "scripts": {
-    "dev": "next dev",
-    "format-and-lint": "biome check .",
-    "format-and-lint:fix": "biome check . --write",
-    "build": "next build",
-    "start": "next start"
-  },
-  "dependencies": {
-    "clsx": "^2.0.0",
-    "jazz-browser-media-images": "workspace:0.8.36",
-    "jazz-react": "workspace:0.8.36",
-    "jazz-tools": "workspace:0.8.36",
-    "next": "14.2.5",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
-  },
-  "devDependencies": {
-    "@types/node": "^22.5.1",
-    "@types/react": "^18.2.19",
-    "@types/react-dom": "^18.2.7",
-    "postcss": "^8.4.27",
-    "tailwindcss": "3.3.2",
-    "typescript": "^5.3.3"
-  }
-}

examples/book-shelf/postcss.config.mjs

@@ -1,8 +0,0 @@
-/** @type {import('postcss-load-config').Config} */
-const config = {
-  plugins: {
-    tailwindcss: {},
-  },
-};
-
-export default config;

examples/book-shelf/src/app/add/page.tsx

@@ -1,139 +0,0 @@
-"use client";
-
-import { Button } from "@/components/Button";
-import { Container } from "@/components/Container";
-import { useAccount } from "@/components/JazzAndAuth";
-import RatingInput from "@/components/RatingInput";
-import { BookReview, ListOfBookReviews } from "@/schema";
-import { createImage } from "jazz-browser-media-images";
-import { Group, ImageDefinition } from "jazz-tools";
-import { useRouter } from "next/navigation";
-import { ChangeEvent, useState } from "react";
-
-export default function AddBookReview() {
-  const { me } = useAccount();
-
-  const [title, setTitle] = useState("");
-  const [author, setAuthor] = useState("");
-  const [review, setReview] = useState("");
-  const [rating, setRating] = useState(0);
-  const [dateRead, setDateRead] = useState(
-    new Date().toISOString().split("T")[0],
-  );
-  const [coverImage, setCoverImage] = useState<ImageDefinition | undefined>();
-
-  const router = useRouter();
-
-  const onDateChange = (event: ChangeEvent<HTMLInputElement>) => {
-    const date = new Date(event.currentTarget.value)
-      .toISOString()
-      .split("T")[0];
-    setDateRead(date);
-  };
-
-  const onImageChange = (event: ChangeEvent<HTMLInputElement>) => {
-    const file = event.currentTarget.files?.[0];
-    const group = Group.create({ owner: me });
-    group.addMember("everyone", "reader");
-
-    if (file) {
-      createImage(file, { owner: group }).then((image) => {
-        setCoverImage(image);
-      });
-    }
-  };
-
-  const onSubmit = (event: React.FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
-
-    if (!me?.profile) return;
-
-    const bookReview = BookReview.create(
-      {
-        title,
-        author,
-        review,
-        rating,
-        dateRead: new Date(dateRead),
-        cover: coverImage,
-      },
-      {
-        owner: me.profile._owner,
-      },
-    );
-
-    if (!me.profile.bookReviews) {
-      me.profile.bookReviews = ListOfBookReviews.create([], {
-        owner: me.profile._owner,
-      });
-    }
-
-    me.profile.bookReviews.push(bookReview);
-    router.push("/");
-  };
-
-  return (
-    <Container className="grid max-w-lg gap-8 py-8">
-      <h1 className="text-lg font-semibold text-black">Add book review</h1>
-      <form action="" className="grid gap-4" onSubmit={onSubmit}>
-        <label className="grid gap-1 text-sm text-gray-600">
-          Cover
-          <input type="file" onChange={onImageChange} />
-        </label>
-
-        <label className="grid gap-1 text-sm text-gray-600">
-          Title
-          <input
-            className="rounded border border-gray-300 px-2 py-1 shadow-sm"
-            type="text"
-            value={title}
-            required
-            onChange={(e) => setTitle(e.target.value)}
-          ></input>
-        </label>
-
-        <label className="grid gap-1 text-sm text-gray-600">
-          Author
-          <input
-            className="rounded border border-gray-300 px-2 py-1 shadow-sm"
-            type="text"
-            value={author}
-            required
-            onChange={(e) => setAuthor(e.target.value)}
-          ></input>
-        </label>
-
-        <label className="grid gap-1 text-sm text-gray-600">
-          Date read
-          <input
-            className="rounded border border-gray-300 px-2 py-1 shadow-sm"
-            type="date"
-            value={dateRead}
-            required
-            onChange={onDateChange}
-          />
-        </label>
-
-        <div className="grid gap-1 text-sm text-gray-600">
-          Rating
-          <RatingInput
-            value={rating}
-            onChange={(rating) => setRating(rating)}
-          />
-        </div>
-
-        <label className="grid gap-1 text-sm text-gray-600">
-          Review
-          <textarea
-            className="rounded border border-gray-300 px-2 py-1 shadow-sm"
-            value={review}
-            onChange={(e) => setReview(e.target.value)}
-          ></textarea>
-        </label>
-        <Button variant="primary" type="submit">
-          Add
-        </Button>
-      </form>
-    </Container>
-  );
-}

examples/book-shelf/src/app/book/[slug]/page.tsx

@@ -1,172 +0,0 @@
-"use client";
-
-import { BookCover } from "@/components/BookCover";
-import { Container } from "@/components/Container";
-import { useCoState } from "@/components/JazzAndAuth";
-import Rating from "@/components/Rating";
-import RatingInput from "@/components/RatingInput";
-import { BookReview } from "@/schema";
-import clsx from "clsx";
-import { Group, ID } from "jazz-tools";
-
-const BookReviewTitle = ({
-  bookReview,
-  readOnly,
-}: {
-  bookReview: BookReview;
-  readOnly: boolean;
-}) => {
-  const className = "font-serif text-2xl font-bold lg:text-4xl";
-
-  if (readOnly) {
-    return <h1 className={className}>{bookReview.title}</h1>;
-  }
-
-  return (
-    <input
-      value={bookReview.title}
-      placeholder="Book title"
-      className={clsx(
-        className,
-        "w-full rounded border border-transparent px-2 py-1 hover:border-gray-300 hover:shadow-sm",
-      )}
-      onChange={(e) => (bookReview.title = e.target.value)}
-    ></input>
-  );
-};
-
-const BookReviewAuthor = ({
-  bookReview,
-  readOnly,
-}: {
-  bookReview: BookReview;
-  readOnly: boolean;
-}) => {
-  const className = "text-gray-700";
-
-  if (readOnly) {
-    return <p className={className}>by {bookReview.author}</p>;
-  }
-
-  return (
-    <input
-      value={bookReview.author}
-      placeholder="Author"
-      className={clsx(
-        className,
-        "w-full rounded border border-transparent px-2 py-1 hover:border-gray-300 hover:shadow-sm",
-      )}
-      onChange={(e) => (bookReview.author = e.target.value)}
-    ></input>
-  );
-};
-
-const BookReviewDateRead = ({
-  bookReview,
-  readOnly,
-}: {
-  bookReview: BookReview;
-  readOnly: boolean;
-}) => {
-  const className = "text-gray-700 max-w-[10rem]";
-
-  if (readOnly) {
-    return (
-      bookReview.dateRead && (
-        <p className={className}>{bookReview.dateRead.toLocaleDateString()}</p>
-      )
-    );
-  }
-
-  return (
-    <input
-      type="date"
-      value={bookReview.dateRead?.toISOString().split("T")[0]}
-      placeholder="Date read"
-      className={clsx(
-        className,
-        "w-full rounded border border-transparent px-2 py-1 hover:border-gray-300 hover:shadow-sm",
-      )}
-      onChange={(e) => {
-        const date = new Date(e.target.value);
-        bookReview.dateRead = date;
-      }}
-    ></input>
-  );
-};
-
-const BookReviewReview = ({
-  bookReview,
-  readOnly,
-}: {
-  bookReview: BookReview;
-  readOnly: boolean;
-}) => {
-  const className = "text-sm leading-relaxed text-gray-600";
-
-  if (readOnly) {
-    if (bookReview.review) {
-      return <p className={className}>{bookReview.review}</p>;
-    }
-  }
-
-  return (
-    <textarea
-      value={bookReview.review}
-      placeholder="Write your review here..."
-      className={clsx(
-        className,
-        "w-full rounded border border-transparent px-2 py-1 hover:border-gray-300 hover:shadow-sm",
-      )}
-      onChange={(e) => (bookReview.review = e.target.value)}
-    ></textarea>
-  );
-};
-
-const BookReviewRating = ({
-  bookReview,
-  readOnly,
-}: {
-  bookReview: BookReview;
-  readOnly: boolean;
-}) => {
-  const className = "text-2xl sm:mx-0";
-
-  if (readOnly) {
-    return <Rating className={className} rating={bookReview.rating} />;
-  }
-
-  return (
-    <RatingInput
-      className={clsx(className, "p-2")}
-      onChange={(rating) => (bookReview.rating = rating)}
-      value={bookReview.rating}
-    />
-  );
-};
-
-export default function Page({ params }: { params: { slug: string } }) {
-  const bookReview = useCoState(BookReview, params.slug as ID<BookReview>);
-
-  if (!bookReview) return <></>;
-
-  const readOnly = !(bookReview._owner.castAs(Group).myRole() === "admin");
-
-  return (
-    <Container className="grid gap-12 py-8">
-      <div className="flex flex-col gap-6 sm:flex-row md:gap-10">
-        <div className="w-[180px]">
-          <BookCover bookReview={bookReview} readOnly={readOnly} />
-        </div>
-
-        <div className="-mx-2 grid max-w-lg flex-1 gap-3 sm:mx-0">
-          <BookReviewTitle bookReview={bookReview} readOnly={readOnly} />
-          <BookReviewAuthor bookReview={bookReview} readOnly={readOnly} />
-          <BookReviewDateRead bookReview={bookReview} readOnly={readOnly} />
-          <BookReviewRating bookReview={bookReview} readOnly={readOnly} />
-          <BookReviewReview bookReview={bookReview} readOnly={readOnly} />
-        </div>
-      </div>
-    </Container>
-  );
-}

examples/book-shelf/src/app/globals.css

@@ -1,13 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer base {
-  :focus {
-    @apply outline-none;
-  }
-
-  :focus-visible {
-    @apply ring-2 ring-purple-600/75 dark:ring-2 dark:ring-white/75;
-  }
-}

examples/book-shelf/src/app/layout.tsx

@@ -1,39 +0,0 @@
-import type { Metadata } from "next";
-import { Inter } from "next/font/google";
-import "./globals.css";
-import { JazzAndAuth } from "@/components/JazzAndAuth";
-import { Nav } from "@/components/Nav";
-import clsx from "clsx";
-import { Fraunces } from "next/font/google";
-
-const fraunces = Fraunces({
-  subsets: ["latin"],
-  display: "swap",
-  variable: "--font-fraunces",
-});
-
-const inter = Inter({ subsets: ["latin"] });
-
-export const metadata: Metadata = {
-  title: "Jazz Book Shelf",
-  description: "Jazz Book Shelf",
-};
-
-export default function RootLayout({
-  children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) {
-  return (
-    <html lang="en">
-      <body className={clsx(inter.className, fraunces.variable)}>
-        <JazzAndAuth>
-          <header>
-            <Nav />
-          </header>
-          <main>{children}</main>
-        </JazzAndAuth>
-      </body>
-    </html>
-  );
-}

examples/book-shelf/src/app/page.tsx

@@ -1,27 +0,0 @@
-"use client";
-
-import { Container } from "@/components/Container";
-import { useAccount } from "@/components/JazzAndAuth";
-import UserProfile from "@/components/UserProfile";
-import { JazzAccount } from "@/schema";
-import { ID } from "jazz-tools";
-
-export default function Home() {
-  const { me } = useAccount();
-
-  return (
-    <Container className="grid gap-12 py-8">
-      <UserProfile id={me?.id as ID<JazzAccount>} />
-
-      <label className="flex flex-wrap items-center gap-3">
-        Share your profile:
-        <input
-          type="text"
-          className="w-full rounded border p-1"
-          value={`${window.location.origin}/user/${me?.id}`}
-          readOnly
-        />
-      </label>
-    </Container>
-  );
-}

examples/book-shelf/src/app/user/[slug]/page.tsx

@@ -1,14 +0,0 @@
-import { Container } from "@/components/Container";
-import UserProfile from "@/components/UserProfile";
-import { JazzAccount } from "@/schema";
-import { ID } from "jazz-tools";
-
-export default function Page({ params }: { params: { slug: string } }) {
-  const { slug } = params;
-
-  return (
-    <Container className="py-8">
-      <UserProfile id={slug as ID<JazzAccount>} />
-    </Container>
-  );
-}

examples/book-shelf/src/components/BookCover.tsx

@@ -1,134 +0,0 @@
-import { Button } from "@/components/Button";
-import { useAccount } from "@/components/JazzAndAuth";
-import PlusIcon from "@/components/icons/PlusIcon";
-import { BookReview } from "@/schema";
-import clsx from "clsx";
-import { createImage } from "jazz-browser-media-images";
-import { ProgressiveImg } from "jazz-react";
-import { Group, ImageDefinition } from "jazz-tools";
-import { ChangeEvent, useRef, useState } from "react";
-
-const BookCoverContainer = ({
-  children,
-  className = "",
-}: {
-  children: React.ReactNode;
-  className?: string;
-}) => {
-  return (
-    <div className={clsx("h-[240px] lg:h-[260px]", className)}>{children}</div>
-  );
-};
-
-const MockCover = ({ bookReview }: { bookReview: BookReview }) => {
-  return (
-    <div className="flex h-full flex-col items-center justify-center gap-3 rounded-l-sm rounded-r-md bg-gray-100 px-3 text-center shadow-lg">
-      <p className="font-medium">{bookReview.title}</p>
-      <p className="text-xs">{bookReview.author}</p>
-    </div>
-  );
-};
-
-export function BookCoverReadOnly({
-  bookReview,
-  className,
-}: {
-  bookReview: BookReview;
-  className?: string;
-}) {
-  if (bookReview.cover) {
-    return (
-      <BookCoverContainer className={className}>
-        <ProgressiveImg image={bookReview.cover}>
-          {({ src }) => (
-            <img
-              className="max-h-full max-w-full rounded-l-sm rounded-r-md shadow-lg"
-              src={src}
-            />
-          )}
-        </ProgressiveImg>
-      </BookCoverContainer>
-    );
-  }
-
-  return (
-    <BookCoverContainer className={className}>
-      <MockCover bookReview={bookReview} />
-    </BookCoverContainer>
-  );
-}
-
-export function BookCoverInput({ bookReview }: { bookReview: BookReview }) {
-  const { me } = useAccount();
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  const onImageChange = (event: ChangeEvent<HTMLInputElement>) => {
-    if (!me?.profile) return;
-
-    const file = event.currentTarget.files?.[0];
-
-    if (file) {
-      createImage(file, { owner: me.profile._owner }).then((image) => {
-        bookReview.cover = image;
-      });
-    }
-  };
-
-  const onUploadClick = () => {
-    inputRef.current?.click();
-  };
-
-  const remove = () => {
-    bookReview.cover = null;
-  };
-
-  if (bookReview.cover) {
-    return (
-      <div className="group relative inline-block">
-        <BookCoverReadOnly
-          className="transition-opacity group-hover:opacity-40"
-          bookReview={bookReview}
-        />
-        <div className="absolute left-0 top-0 hidden h-full w-full items-center justify-center rounded-l-sm rounded-r-md group-hover:flex">
-          <Button
-            variant="tertiary"
-            type="button"
-            className="shadow"
-            onClick={remove}
-          >
-            Remove
-          </Button>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <BookCoverContainer className="flex w-[180px] flex-col justify-center rounded-l-sm rounded-r-md bg-gray-100 p-3 shadow-lg">
-      <button
-        className="flex h-full w-full flex-col items-center justify-center gap-3 text-gray-500 transition-colors hover:text-gray-600"
-        type="button"
-        onClick={onUploadClick}
-      >
-        <PlusIcon className="h-10 w-10" />
-        Upload book cover
-      </button>
-      <label className="sr-only">
-        Cover
-        <input ref={inputRef} type="file" onChange={onImageChange} />
-      </label>
-    </BookCoverContainer>
-  );
-}
-
-export function BookCover({
-  bookReview,
-  readOnly,
-}: {
-  bookReview: BookReview;
-  readOnly?: boolean;
-}) {
-  if (readOnly) return <BookCoverReadOnly bookReview={bookReview} />;
-
-  return <BookCoverInput bookReview={bookReview} />;
-}

examples/book-shelf/src/components/BookReviewHeader.tsx

@@ -1,30 +0,0 @@
-import { BookCover } from "@/components/BookCover";
-import Rating from "@/components/Rating";
-import RatingInput from "@/components/RatingInput";
-import { BookReview } from "@/schema";
-import { Group } from "jazz-tools";
-
-export function BookReviewHeader({ bookReview }: { bookReview: BookReview }) {
-  const { title, author, rating, review, dateRead } = bookReview;
-
-  return (
-    <div className="grid gap-5">
-      <div>
-        <h1 className="mb-1 font-serif text-2xl font-bold md:mb-3 lg:text-4xl">
-          {title}
-        </h1>
-
-        <p className="text-gray-500">by {author}</p>
-      </div>
-
-      {bookReview._owner.castAs(Group).myRole() === "admin" ? (
-        <RatingInput
-          onChange={(rating) => (bookReview.rating = rating)}
-          value={rating}
-        />
-      ) : (
-        <Rating className="mx-auto text-2xl sm:mx-0" rating={rating} />
-      )}
-    </div>
-  );
-}

examples/book-shelf/src/components/BookReviewThumbnail.tsx

@@ -1,35 +0,0 @@
-"use client";
-
-import { BookCover, BookCoverReadOnly } from "@/components/BookCover";
-import { useCoState } from "@/components/JazzAndAuth";
-import StarIcon from "@/components/icons/StarIcon";
-import { ID } from "jazz-tools";
-import Link from "next/link";
-import { BookReview } from "../schema";
-
-export function BookReviewThumbnail({ id }: { id: ID<BookReview> }) {
-  const bookReview = useCoState(BookReview, id);
-
-  if (!bookReview) return <></>;
-
-  return (
-    <div className="inline-flex shrink-0 gap-4 rounded border p-4 sm:block sm:space-y-6 sm:border-0 sm:p-0 md:w-[200px]">
-      <Link href={`/book/${bookReview.id}`} className="sm:block sm:flex-1">
-        <BookCoverReadOnly bookReview={bookReview} />
-      </Link>
-
-      <div className="flex-1">
-        <Link href={`/book/${bookReview.id}`}>
-          <h2 className="mb-1 text-sm font-medium">{bookReview.title}</h2>
-        </Link>
-        <div className="mb-2 flex flex-col gap-2 text-sm text-gray-500 sm:flex-row sm:items-center">
-          <p>{bookReview.author}</p>
-          <div className="flex items-center gap-0.5 text-xs font-semibold leading-none">
-            <StarIcon className="-mt-px text-base text-yellow-400" />
-            {bookReview.rating}
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}

examples/book-shelf/src/components/Button.tsx

@@ -1,65 +0,0 @@
-import clsx from "clsx";
-import Link from "next/link";
-import type { ComponentProps } from "react";
-
-interface Props {
-  variant?: "primary" | "secondary" | "tertiary";
-  className?: string;
-  size?: "sm" | "md" | "lg";
-}
-
-interface AnchorProps
-  extends Props,
-    React.AnchorHTMLAttributes<HTMLAnchorElement> {
-  href: string;
-}
-
-type ButtonProps = ComponentProps<"button"> & Props;
-
-export function Button(props: AnchorProps | ButtonProps) {
-  const {
-    className: customClassName = "",
-    variant = "primary",
-    children,
-    size = "md",
-  } = props;
-
-  const variantClassNames = {
-    base: "inline-flex gap-2 items-center justify-center rounded-full overflow-hidden transition-colors",
-    primary:
-      "bg-purple-300 font-medium text-purple-950 px-4 py-2 rounded-full hover:bg-purple-200",
-    secondary:
-      "rounded-full bg-slate-100 font-medium text-slate-600 hover:bg-slate-200",
-    tertiary: "rounded-full bg-white text-purple-950 font-medium",
-  };
-
-  const sizeClassNames = {
-    sm: "py-1.5 px-3 text-sm",
-    md: "py-2 px-5",
-    lg: "py-2 md:py-2.5 px-6 md:text-lg",
-  };
-
-  const className = clsx(
-    customClassName,
-    variantClassNames.base,
-    variantClassNames[variant],
-    sizeClassNames[size],
-  );
-
-  if (!!(props as AnchorProps).href) {
-    const anchorProps = props as AnchorProps;
-    return (
-      <Link href={anchorProps.href} className={className}>
-        {children}
-      </Link>
-    );
-  }
-
-  const buttonProps = props as ButtonProps;
-
-  return (
-    <button {...buttonProps} className={className}>
-      {children}
-    </button>
-  );
-}

examples/book-shelf/src/components/Container.tsx

@@ -1,13 +0,0 @@
-import clsx from "clsx";
-
-export function Container({
-  children,
-  className,
-}: {
-  children: React.ReactNode;
-  className?: string;
-}) {
-  return (
-    <div className={clsx("mx-auto max-w-4xl px-4", className)}>{children}</div>
-  );
-}

examples/book-shelf/src/components/JazzAndAuth.tsx

@@ -1,29 +0,0 @@
-"use client";
-
-import { JazzAccount } from "@/schema";
-import { DemoAuthBasicUI, createJazzReactApp, useDemoAuth } from "jazz-react";
-
-const Jazz = createJazzReactApp({
-  AccountSchema: JazzAccount,
-});
-
-export const { useAccount, useCoState } = Jazz;
-
-export function JazzAndAuth({ children }: { children: React.ReactNode }) {
-  const [auth, authState] = useDemoAuth();
-
-  return (
-    <>
-      <Jazz.Provider
-        auth={auth}
-        // replace `you@example.com` with your email as a temporary API key
-        peer="wss://cloud.jazz.tools/?key=you@example.com"
-      >
-        {children}
-      </Jazz.Provider>
-      {authState.state !== "signedIn" && (
-        <DemoAuthBasicUI appName="Jazz Book Shelf" state={authState} />
-      )}
-    </>
-  );
-}

examples/book-shelf/src/components/Nav.tsx

@@ -1,26 +0,0 @@
-"use client";
-
-import { Button } from "@/components/Button";
-import { Container } from "@/components/Container";
-import { useAccount } from "@/components/JazzAndAuth";
-import Link from "next/link";
-
-export function Nav() {
-  const { me, logOut } = useAccount();
-
-  return (
-    <nav className="border-b py-3">
-      <Container className="flex items-center justify-between gap-12 text-sm">
-        <Link href="/" className="font-serif text-lg font-semibold">
-          Jazz Book Shelf
-        </Link>
-        <div className="flex items-center gap-4 text-sm">
-          <p>{me?.profile?.name}</p>
-          <Button variant="secondary" onClick={logOut}>
-            Log out
-          </Button>
-        </div>
-      </Container>
-    </nav>
-  );
-}

examples/book-shelf/src/components/Rating.tsx

@@ -1,21 +0,0 @@
-import StarIcon from "@/components/icons/StarIcon";
-import StarOutlineIcon from "@/components/icons/StarOutlineIcon";
-
-export default function Rating({
-  rating,
-  className = "",
-}: {
-  rating?: number;
-  className?: string;
-}) {
-  const max = 5;
-  const outline = max - (rating || 0);
-  return (
-    <div className={`inline-flex gap-0.5 text-yellow-400 ${className}`}>
-      {rating ? [...Array(rating)].map((x, i) => <StarIcon key={i} />) : <></>}
-      {[...Array(outline)].map((x, i) => (
-        <StarOutlineIcon key={i} />
-      ))}
-    </div>
-  );
-}

examples/book-shelf/src/components/RatingInput.tsx

@@ -1,47 +0,0 @@
-"use client";
-
-import StarIcon from "@/components/icons/StarIcon";
-import StarOutlineIcon from "@/components/icons/StarOutlineIcon";
-import clsx from "clsx";
-
-interface RatingInputProps {
-  value?: number;
-  onChange: (value: number) => void;
-  className?: string;
-}
-
-export default function RatingInput({
-  value = 0,
-  onChange,
-  className,
-}: RatingInputProps) {
-  const handleChange = (newRating: number) => {
-    onChange(newRating > 5 ? 5 : newRating);
-  };
-
-  return (
-    <div className={clsx(className, "flex gap-0.5 text-2xl text-yellow-400")}>
-      {[...Array(5)].map((_, i) => {
-        return i < value ? (
-          <button
-            type="button"
-            className="focus:outline-none"
-            onClick={() => handleChange(i + 1)}
-            key={i}
-          >
-            <StarIcon />
-          </button>
-        ) : (
-          <button
-            type="button"
-            className="focus:outline-none"
-            onClick={() => handleChange(i + 1)}
-            key={i}
-          >
-            <StarOutlineIcon />
-          </button>
-        );
-      })}
-    </div>
-  );
-}

examples/book-shelf/src/components/UserProfile.tsx

@@ -1,39 +0,0 @@
-"use client";
-
-import { BookReviewThumbnail } from "@/components/BookReviewThumbnail";
-import { Button } from "@/components/Button";
-import { useCoState } from "@/components/JazzAndAuth";
-import { JazzAccount, JazzProfile, ListOfBookReviews } from "@/schema";
-import { Group, ID } from "jazz-tools";
-
-export default function UserProfile({ id }: { id: ID<JazzAccount> }) {
-  const user = useCoState(JazzAccount, id);
-  const profile = useCoState(JazzProfile, user?.profile?.id);
-
-  const bookReviews = useCoState(
-    ListOfBookReviews,
-    user?.profile?._refs.bookReviews?.id,
-    [{}],
-  );
-
-  return (
-    <div className="grid gap-4">
-      <div className="flex items-center justify-between">
-        <h1 className="font-serif text-lg font-medium sm:text-2xl">
-          {profile?.name}&apos;s book shelf
-        </h1>
-        {profile?._owner.castAs(Group).myRole() === "admin" && (
-          <Button href="/add" variant="primary">
-            Add book
-          </Button>
-        )}
-      </div>
-
-      <div className="grid gap-4 md:grid-cols-4">
-        {bookReviews?.map((bookReview) => (
-          <BookReviewThumbnail key={bookReview.id} id={bookReview.id} />
-        ))}
-      </div>
-    </div>
-  );
-}

examples/book-shelf/src/components/icons/PlusIcon.tsx

@@ -1,20 +0,0 @@
-export default function PlusIcon({ className }: { className?: string }) {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      fill="none"
-      viewBox="0 0 24 24"
-      strokeWidth={1.5}
-      stroke="currentColor"
-      className={className}
-      width="1em"
-      height="1em"
-    >
-      <path
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        d="M12 4.5v15m7.5-7.5h-15"
-      />
-    </svg>
-  );
-}

examples/book-shelf/src/components/icons/StarIcon.tsx

@@ -1,18 +0,0 @@
-export default function StarIcon({ className }: { className?: string }) {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 24 24"
-      fill="currentColor"
-      className={className}
-      width="1em"
-      height="1em"
-    >
-      <path
-        fillRule="evenodd"
-        d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z"
-        clipRule="evenodd"
-      />
-    </svg>
-  );
-}

examples/book-shelf/src/components/icons/StarOutlineIcon.tsx

@@ -1,20 +0,0 @@
-export default function StarOutlineIcon({ className }: { className?: string }) {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      fill="none"
-      viewBox="0 0 24 24"
-      strokeWidth={1.5}
-      stroke="currentColor"
-      className={className}
-      width="1em"
-      height="1em"
-    >
-      <path
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        d="M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345L11.48 3.5Z"
-      />
-    </svg>
-  );
-}

examples/book-shelf/src/schema.ts

@@ -1,37 +0,0 @@
-import {
-  Account,
-  CoList,
-  CoMap,
-  Encoders,
-  ImageDefinition,
-  Profile,
-  co,
-} from "jazz-tools";
-
-export class BookReview extends CoMap {
-  title = co.string;
-  author = co.string;
-  rating = co.number;
-  dateRead? = co.encoded(Encoders.Date);
-  review? = co.string;
-  cover? = co.ref(ImageDefinition, { optional: true });
-}
-
-export class ListOfBookReviews extends CoList.Of(co.ref(BookReview)) {}
-
-/** The profile is an app-specific per-user public `CoMap`
- *  where you can store top-level objects for that user */
-export class JazzProfile extends Profile {
-  bookReviews = co.ref(ListOfBookReviews);
-}
-
-export class JazzAccount extends Account {
-  profile = co.ref(JazzProfile);
-
-  /** The account migration is run on account creation and on every log-in.
-   *  You can use it to set up the account root and any other initial CoValues you need.
-   */
-  migrate(this: JazzAccount, creationProps?: { name: string }) {
-    super.migrate(creationProps);
-  }
-}

examples/book-shelf/tailwind.config.ts

@@ -1,25 +0,0 @@
-import type { Config } from "tailwindcss";
-const colors = require("tailwindcss/colors");
-
-const config: Config = {
-  content: [
-    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
-    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
-    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
-  ],
-  theme: {
-    extend: {
-      fontFamily: {
-        serif: ["var(--font-fraunces)"],
-      },
-      colors: {
-        purple: {
-          ...colors.purple,
-          950: "#211f5a",
-        },
-      },
-    },
-  },
-  plugins: [],
-};
-export default config;

examples/chat-rn-clerk/CHANGELOG.md

@@ -1,5 +1,129 @@
 # chat-rn-clerk
 
+## 1.0.41
+
+### Patch Changes
+
+- Updated dependencies [dc62b95]
+- Updated dependencies [1de26f8]
+  - jazz-tools@0.8.51
+  - jazz-react-native@0.8.51
+  - jazz-react-native-auth-clerk@0.8.51
+  - jazz-react-native-media-images@0.8.51
+
+## 1.0.40
+
+### Patch Changes
+
+- jazz-react-native@0.8.50
+- jazz-react-native-auth-clerk@0.8.50
+- jazz-tools@0.8.50
+- jazz-react-native-media-images@0.8.50
+
+## 1.0.39
+
+### Patch Changes
+
+- jazz-react-native@0.8.49
+- jazz-react-native-auth-clerk@0.8.49
+- jazz-tools@0.8.49
+- jazz-react-native-media-images@0.8.49
+
+## 1.0.38
+
+### Patch Changes
+
+- Updated dependencies [635e824]
+- Updated dependencies [0a85982]
+  - jazz-tools@0.8.48
+  - jazz-react-native@0.8.48
+  - jazz-react-native-auth-clerk@0.8.48
+  - jazz-react-native-media-images@0.8.48
+
+## 1.0.37
+
+### Patch Changes
+
+- Updated dependencies [33ef9c4]
+  - jazz-react-native@0.8.47
+  - jazz-react-native-auth-clerk@0.8.47
+
+## 1.0.36
+
+### Patch Changes
+
+- Updated dependencies [ab4ffbd]
+  - jazz-react-native@0.8.46
+  - jazz-react-native-auth-clerk@0.8.46
+
+## 1.0.35
+
+### Patch Changes
+
+- Updated dependencies [7701307]
+- Updated dependencies [fa41f8e]
+- Updated dependencies [88d7d9a]
+- Updated dependencies [60e35ea]
+  - jazz-react-native@0.8.45
+  - jazz-tools@0.8.45
+  - jazz-react-native-auth-clerk@0.8.45
+  - jazz-react-native-media-images@0.8.45
+
+## 1.0.34
+
+### Patch Changes
+
+- jazz-react-native@0.8.44
+- jazz-react-native-auth-clerk@0.8.44
+- jazz-tools@0.8.44
+- jazz-react-native-media-images@0.8.44
+
+## 1.0.33
+
+### Patch Changes
+
+- cdc7f9f: Fixing react-native examples
+- Updated dependencies [cdc7f9f]
+  - jazz-react-native-auth-clerk@0.8.43
+
+## 1.0.32
+
+### Patch Changes
+
+- jazz-react-native@0.8.41
+- jazz-react-native-auth-clerk@0.8.41
+- jazz-tools@0.8.41
+- jazz-react-native-media-images@0.8.41
+
+## 1.0.31
+
+### Patch Changes
+
+- Updated dependencies [0c6b0f3]
+- Updated dependencies [249eecb]
+  - jazz-react-native@0.8.39
+  - jazz-tools@0.8.39
+  - jazz-react-native-auth-clerk@0.8.39
+  - jazz-react-native-media-images@0.8.39
+
+## 1.0.30
+
+### Patch Changes
+
+- jazz-react-native@0.8.38
+- jazz-react-native-auth-clerk@0.8.38
+- jazz-tools@0.8.38
+- jazz-react-native-media-images@0.8.38
+
+## 1.0.29
+
+### Patch Changes
+
+- jazz-react-native@0.8.37
+- jazz-react-native-auth-clerk@0.8.37
+- jazz-tools@0.8.37
+- jazz-react-native-media-images@0.8.28
+
 ## 1.0.28
 
 ### Patch Changes

examples/chat-rn-clerk/app/_layout.tsx

@@ -1,3 +1,4 @@
+import "../global.css";
 import { ClerkLoaded, ClerkProvider } from "@clerk/clerk-expo";
 import { useFonts } from "expo-font";
 import { Slot } from "expo-router";

examples/chat-rn-clerk/babel.config.js

@@ -1,7 +1,9 @@
 module.exports = function (api) {
   api.cache(true);
   return {
-    presets: ["babel-preset-expo"],
-    plugins: ["nativewind/babel"],
+    presets: [
+      ["babel-preset-expo", { jsxImportSource: "nativewind" }],
+      "nativewind/babel",
+    ],
   };
 };

examples/chat-rn-clerk/global.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

examples/chat-rn-clerk/metro.config.js

@@ -1,5 +1,6 @@
 // Learn more https://docs.expo.dev/guides/monorepos
 const { getDefaultConfig } = require("expo/metro-config");
+const { withNativeWind } = require("nativewind/metro");
 const { FileStore } = require("metro-cache");
 const path = require("path");
 
@@ -31,4 +32,5 @@ config.cacheStores = [
   }),
 ];
 
-module.exports = config;
+// module.exports = config;
+module.exports = withNativeWind(config, { input: "./global.css" });

examples/chat-rn-clerk/package.json

@@ -1,7 +1,7 @@
 {
   "name": "chat-rn-clerk",
   "main": "index.js",
-  "version": "1.0.28",
+  "version": "1.0.41",
   "scripts": {
     "build": "expo export -p ios",
     "start": "expo start",
@@ -45,9 +45,9 @@
     "jazz-react-native-auth-clerk": "workspace:*",
     "jazz-react-native-media-images": "workspace:*",
     "jazz-tools": "workspace:*",
-    "nativewind": "^2.0.11",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "nativewind": "^4.1.21",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-native": "~0.76.3",
     "react-native-fetch-api": "^3.0.0",
     "react-native-gesture-handler": "~2.20.2",
@@ -70,8 +70,8 @@
     "jest": "^29.2.1",
     "jest-expo": "~52.0.2",
     "react-test-renderer": "18.2.0",
-    "tailwindcss": "3.3.2",
-    "typescript": "^5.3.3"
+    "tailwindcss": "^3.4.15",
+    "typescript": "~5.6.2"
   },
   "private": true
 }

examples/chat-rn-clerk/tailwind.config.js

@@ -1,10 +1,12 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
+  // NOTE: Update this to include the paths to all of your component files.
   content: [
     "./app/**/*.{js,jsx,ts,tsx}",
     "./components/**/*.{js,jsx,ts,tsx}",
     "./src/**/*.{js,jsx,ts,tsx}",
   ],
+  presets: [require("nativewind/preset")],
   theme: {
     extend: {},
   },

examples/chat-rn-clerk/tsconfig.json

@@ -7,5 +7,5 @@
       "@/*": ["./*"]
     }
   },
-  "include": ["**/*.ts", "**/*.tsx"]
+  "include": ["**/*.ts", "**/*.tsx", "nativewind-env.d.ts"]
 }

examples/chat-rn/CHANGELOG.md

@@ -1,5 +1,99 @@
 # chat-rn
 
+## 1.0.38
+
+### Patch Changes
+
+- Updated dependencies [dc62b95]
+- Updated dependencies [1de26f8]
+  - jazz-tools@0.8.51
+  - jazz-react-native@0.8.51
+
+## 1.0.37
+
+### Patch Changes
+
+- jazz-react-native@0.8.50
+- jazz-tools@0.8.50
+
+## 1.0.36
+
+### Patch Changes
+
+- jazz-react-native@0.8.49
+- jazz-tools@0.8.49
+
+## 1.0.35
+
+### Patch Changes
+
+- Updated dependencies [635e824]
+- Updated dependencies [0a85982]
+  - jazz-tools@0.8.48
+  - jazz-react-native@0.8.48
+
+## 1.0.34
+
+### Patch Changes
+
+- Updated dependencies [33ef9c4]
+  - jazz-react-native@0.8.47
+
+## 1.0.33
+
+### Patch Changes
+
+- Updated dependencies [ab4ffbd]
+  - jazz-react-native@0.8.46
+
+## 1.0.32
+
+### Patch Changes
+
+- Updated dependencies [7701307]
+- Updated dependencies [fa41f8e]
+- Updated dependencies [88d7d9a]
+- Updated dependencies [60e35ea]
+  - jazz-react-native@0.8.45
+  - jazz-tools@0.8.45
+
+## 1.0.31
+
+### Patch Changes
+
+- jazz-react-native@0.8.44
+- jazz-tools@0.8.44
+
+## 1.0.30
+
+### Patch Changes
+
+- jazz-react-native@0.8.41
+- jazz-tools@0.8.41
+
+## 1.0.29
+
+### Patch Changes
+
+- Updated dependencies [0c6b0f3]
+- Updated dependencies [249eecb]
+  - jazz-react-native@0.8.39
+  - jazz-tools@0.8.39
+
+## 1.0.28
+
+### Patch Changes
+
+- jazz-react-native@0.8.38
+- jazz-tools@0.8.38
+
+## 1.0.27
+
+### Patch Changes
+
+- jazz-react-native@0.8.37
+- jazz-tools@0.8.37
+
 ## 1.0.26
 
 ### Patch Changes

examples/chat-rn/babel.config.js

@@ -1,7 +1,9 @@
 module.exports = function (api) {
   api.cache(true);
   return {
-    presets: ["babel-preset-expo"],
-    plugins: ["nativewind/babel"],
+    presets: [
+      ["babel-preset-expo", { jsxImportSource: "nativewind" }],
+      "nativewind/babel",
+    ],
   };
 };

examples/chat-rn/global.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

examples/chat-rn/metro.config.js

@@ -1,5 +1,6 @@
 // Learn more https://docs.expo.dev/guides/monorepos
 const { getDefaultConfig } = require("expo/metro-config");
+const { withNativeWind } = require("nativewind/metro");
 const { FileStore } = require("metro-cache");
 const path = require("path");
 
@@ -7,7 +8,7 @@ const path = require("path");
 const projectRoot = __dirname;
 const workspaceRoot = path.resolve(projectRoot, "../..");
 
-const config = getDefaultConfig(projectRoot);
+const config = getDefaultConfig(projectRoot, { isCSSEnabled: true });
 
 // Since we are using pnpm, we have to setup the monorepo manually for Metro
 // #1 - Watch all files in the monorepo
@@ -19,7 +20,10 @@ config.resolver.nodeModulesPaths = [
 ];
 config.resolver.sourceExts = ["mjs", "js", "json", "ts", "tsx"];
 config.resolver.unstable_enablePackageExports = true;
-config.resolver.requireCycleIgnorePatterns = [/(^|\/|\\)node_modules($|\/|\\)/];
+config.resolver.requireCycleIgnorePatterns = [
+  /(^|\/|\\)node_modules($|\/|\\)/,
+  /(^|\/|\\)packages($|\/|\\)/,
+];
 
 // Use turborepo to restore the cache when possible
 config.cacheStores = [
@@ -28,4 +32,5 @@ config.cacheStores = [
   }),
 ];
 
-module.exports = config;
+// module.exports = config;
+module.exports = withNativeWind(config, { input: "./global.css" });

examples/chat-rn/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chat-rn",
-  "version": "1.0.26",
+  "version": "1.0.38",
   "main": "index.js",
   "scripts": {
     "build": "expo export -p ios",
@@ -14,8 +14,8 @@
   "dependencies": {
     "@azure/core-asynciterator-polyfill": "^1.0.2",
     "@react-native-community/netinfo": "^11.4.1",
-    "@react-navigation/native": "^6.1.18",
-    "@react-navigation/native-stack": "^6.11.0",
+    "@react-navigation/native": "^7.0.13",
+    "@react-navigation/native-stack": "^7.1.14",
     "base-64": "^1.0.0",
     "clsx": "^2.0.0",
     "expo": "^52.0.0",
@@ -30,8 +30,8 @@
     "expo-web-browser": "~14.0.1",
     "jazz-react-native": "workspace:*",
     "jazz-tools": "workspace:*",
-    "nativewind": "^2.0.11",
-    "react": "18.2.0",
+    "nativewind": "^4.1.21",
+    "react": "^18.3.1",
     "react-native": "~0.76.3",
     "react-native-fetch-api": "^3.0.0",
     "react-native-get-random-values": "^1.11.0",
@@ -45,8 +45,8 @@
   "devDependencies": {
     "@babel/core": "^7.20.0",
     "@types/react": "^18.3.12",
-    "tailwindcss": "3.3.2",
-    "typescript": "^5.3.3"
+    "tailwindcss": "^3.4.15",
+    "typescript": "~5.6.2"
   },
   "private": true
 }

examples/chat-rn/src/App.tsx

@@ -1,3 +1,5 @@
+import "../global.css";
+
 import {
   NavigationContainer,
   useNavigationContainerRef,

examples/chat-rn/src/chat.tsx

@@ -19,45 +19,35 @@ import { Chat, Message } from "./schema";
 
 export default function ChatScreen({ navigation }: { navigation: any }) {
   const { me, logOut } = useAccount();
-  const [chat, setChat] = useState<Chat>();
+  const [chatId, setChatId] = useState<ID<Chat>>();
+  const loadedChat = useCoState(Chat, chatId, [{}]);
   const [message, setMessage] = useState("");
-  const loadedChat = useCoState(Chat, chat?.id, [{}]);
 
   useEffect(() => {
     navigation.setOptions({
       headerRight: () => <Button onPress={logOut} title="Logout" />,
       headerLeft: () =>
-        chat ? (
+        loadedChat ? (
           <Button
             onPress={() => {
-              if (chat?.id) {
+              if (loadedChat?.id) {
                 Clipboard.setStringAsync(
-                  `https://chat.jazz.tools/#/chat/${chat.id}`,
+                  `https://chat.jazz.tools/#/chat/${loadedChat.id}`,
                 );
-                Alert.alert("Copied to clipboard", `Chat ID: ${chat.id}`);
+                Alert.alert("Copied to clipboard", `Chat ID: ${loadedChat.id}`);
               }
             }}
             title="Share"
           />
         ) : null,
     });
-  }, [navigation, chat]);
+  }, [navigation, loadedChat]);
 
   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}`);
-    }
+    setChatId(chat.id);
   };
 
   const joinChat = () => {
@@ -73,7 +63,7 @@ export default function ChatScreen({ navigation }: { navigation: any }) {
           text: "Join",
           onPress: (chatId) => {
             if (chatId) {
-              loadChat(chatId as ID<Chat>);
+              setChatId(chatId as ID<Chat>);
             } else {
               Alert.alert("Error", "Chat ID cannot be empty.");
             }
@@ -85,9 +75,11 @@ export default function ChatScreen({ navigation }: { navigation: any }) {
   };
 
   const sendMessage = () => {
-    if (!chat) return;
+    if (!loadedChat) return;
     if (message.trim()) {
-      chat.push(Message.create({ text: message }, { owner: chat._owner }));
+      loadedChat.push(
+        Message.create({ text: message }, { owner: loadedChat?._owner }),
+      );
       setMessage("");
     }
   };
@@ -137,7 +129,7 @@ export default function ChatScreen({ navigation }: { navigation: any }) {
 
   return (
     <View className="flex flex-col h-full">
-      {!chat ? (
+      {!loadedChat ? (
         <View className="flex flex-col h-full items-center justify-center">
           <TouchableOpacity
             onPress={createChat}

examples/chat-rn/tailwind.config.js

@@ -1,10 +1,12 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
+  // NOTE: Update this to include the paths to all of your component files.
   content: [
     "./app/**/*.{js,jsx,ts,tsx}",
     "./components/**/*.{js,jsx,ts,tsx}",
     "./src/**/*.{js,jsx,ts,tsx}",
   ],
+  presets: [require("nativewind/preset")],
   theme: {
     extend: {},
   },

examples/chat-vue/CHANGELOG.md

@@ -1,5 +1,103 @@
 # chat-vue
 
+## 0.0.30
+
+### Patch Changes
+
+- Updated dependencies [dc62b95]
+- Updated dependencies [1de26f8]
+  - jazz-tools@0.8.51
+  - jazz-browser@0.8.51
+  - jazz-vue@0.8.51
+
+## 0.0.29
+
+### Patch Changes
+
+- jazz-browser@0.8.50
+- jazz-tools@0.8.50
+- jazz-vue@0.8.50
+
+## 0.0.28
+
+### Patch Changes
+
+- jazz-browser@0.8.49
+- jazz-tools@0.8.49
+- jazz-vue@0.8.49
+
+## 0.0.27
+
+### Patch Changes
+
+- Updated dependencies [635e824]
+- Updated dependencies [0a85982]
+  - jazz-tools@0.8.48
+  - jazz-browser@0.8.48
+  - jazz-vue@0.8.48
+
+## 0.0.26
+
+### Patch Changes
+
+- Updated dependencies [6f0bd7f]
+- Updated dependencies [fa41f8e]
+- Updated dependencies [88d7d9a]
+- Updated dependencies [60e35ea]
+  - jazz-browser@0.8.45
+  - jazz-tools@0.8.45
+  - jazz-vue@0.8.45
+
+## 0.0.25
+
+### Patch Changes
+
+- jazz-browser@0.8.44
+- jazz-tools@0.8.44
+- jazz-vue@0.8.44
+
+## 0.0.24
+
+### Patch Changes
+
+- Updated dependencies [ac216b9]
+  - jazz-browser@0.8.41
+  - jazz-tools@0.8.41
+  - jazz-vue@0.8.41
+
+## 0.0.23
+
+### Patch Changes
+
+- jazz-browser@0.8.40
+- jazz-vue@0.8.40
+
+## 0.0.22
+
+### Patch Changes
+
+- Updated dependencies [e386f2b]
+- Updated dependencies [249eecb]
+  - jazz-browser@0.8.39
+  - jazz-tools@0.8.39
+  - jazz-vue@0.8.39
+
+## 0.0.21
+
+### Patch Changes
+
+- jazz-browser@0.8.38
+- jazz-tools@0.8.38
+- jazz-vue@0.8.38
+
+## 0.0.20
+
+### Patch Changes
+
+- jazz-browser@0.8.37
+- jazz-tools@0.8.37
+- jazz-vue@0.8.25
+
 ## 0.0.19
 
 ### Patch Changes

examples/chat-vue/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chat-vue",
-  "version": "0.0.19",
+  "version": "0.0.30",
   "private": true,
   "type": "module",
   "scripts": {
@@ -25,14 +25,14 @@
     "@vitejs/plugin-vue": "^5.1.4",
     "@vitejs/plugin-vue-jsx": "^4.0.1",
     "@vue/tsconfig": "^0.5.1",
-    "autoprefixer": "^10.4.14",
-    "eslint": "^8.46.0",
+    "autoprefixer": "^10.4.20",
+    "eslint": "^9.7.0",
     "eslint-plugin-vue": "^9.28.0",
     "npm-run-all2": "^6.2.3",
     "postcss": "^8.4.27",
-    "tailwindcss": "3.3.2",
-    "typescript": "^5.3.3",
-    "vite": "^5.0.10",
+    "tailwindcss": "^3.4.15",
+    "typescript": "~5.6.2",
+    "vite": "^5.4.10",
     "vite-plugin-vue-devtools": "^7.4.6",
     "vue-tsc": "^2.1.6"
   }

examples/chat-vue/tailwind.config.js

@@ -1,8 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-export default {
-  purge: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
-  theme: {
-    extend: {},
-  },
-  plugins: [],
-};

examples/chat-vue/tailwind.config.ts

@@ -0,0 +1,11 @@
+import type { Config } from "tailwindcss";
+
+const config: Config = {
+  content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};
+
+export default config;

examples/chat/CHANGELOG.md

@@ -1,5 +1,114 @@
 # jazz-example-chat
 
+## 0.0.125
+
+### Patch Changes
+
+- Updated dependencies [dc62b95]
+- Updated dependencies [1de26f8]
+  - jazz-tools@0.8.51
+  - jazz-browser-media-images@0.8.51
+  - jazz-react@0.8.51
+
+## 0.0.124
+
+### Patch Changes
+
+- jazz-react@0.8.50
+- jazz-tools@0.8.50
+- jazz-browser-media-images@0.8.50
+
+## 0.0.123
+
+### Patch Changes
+
+- jazz-react@0.8.49
+- jazz-tools@0.8.49
+- jazz-browser-media-images@0.8.49
+
+## 0.0.122
+
+### Patch Changes
+
+- Updated dependencies [635e824]
+- Updated dependencies [0a85982]
+  - jazz-tools@0.8.48
+  - jazz-browser-media-images@0.8.48
+  - jazz-react@0.8.48
+
+## 0.0.121
+
+### Patch Changes
+
+- Updated dependencies [6f0bd7f]
+- Updated dependencies [fca6a0b]
+- Updated dependencies [fa41f8e]
+- Updated dependencies [88d7d9a]
+- Updated dependencies [60e35ea]
+  - cojson@0.8.45
+  - jazz-tools@0.8.45
+  - jazz-react@0.8.45
+  - jazz-browser-media-images@0.8.45
+
+## 0.0.120
+
+### Patch Changes
+
+- Updated dependencies [5d20c81]
+  - cojson@0.8.44
+  - jazz-react@0.8.44
+  - jazz-tools@0.8.44
+  - jazz-browser-media-images@0.8.44
+
+## 0.0.119
+
+### Patch Changes
+
+- Updated dependencies [3252502]
+- Updated dependencies [6370348]
+- Updated dependencies [ac216b9]
+  - cojson@0.8.41
+  - jazz-react@0.8.41
+  - jazz-tools@0.8.41
+  - jazz-browser-media-images@0.8.41
+
+## 0.0.118
+
+### Patch Changes
+
+- jazz-browser-media-images@0.8.40
+- jazz-react@0.8.40
+
+## 0.0.117
+
+### Patch Changes
+
+- Updated dependencies [249eecb]
+- Updated dependencies [3121551]
+  - jazz-tools@0.8.39
+  - cojson@0.8.39
+  - jazz-browser-media-images@0.8.39
+  - jazz-react@0.8.39
+
+## 0.0.116
+
+### Patch Changes
+
+- Updated dependencies [b00ee91]
+- Updated dependencies [f488c09]
+  - cojson@0.8.38
+  - jazz-react@0.8.38
+  - jazz-tools@0.8.38
+
+## 0.0.115
+
+### Patch Changes
+
+- Updated dependencies [3d9f12e]
+  - cojson@0.8.37
+  - jazz-react@0.8.37
+  - jazz-tools@0.8.37
+
 ## 0.0.114
 
 ### Patch Changes

examples/chat/index.html

@@ -7,7 +7,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Jazz Chat Example</title>
   </head>
-  <body class="h-full">
+  <body class="h-full bg-white text-stone-700 dark:text-stone-400 dark:bg-stone-925">
     <div id="root" class="h-full"></div>
     <script type="module" src="/src/app.tsx"></script>
   </body>

examples/chat/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jazz-example-chat",
   "private": true,
-  "version": "0.0.114",
+  "version": "0.0.125",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -13,37 +13,25 @@
     "test:ui": "playwright test --ui"
   },
   "dependencies": {
-    "@radix-ui/react-checkbox": "^1.0.4",
-    "@radix-ui/react-slot": "^1.0.2",
-    "@radix-ui/react-toast": "^1.1.4",
-    "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
-    "cojson": "workspace:0.8.36",
-    "hash-slash": "workspace:0.2.1",
-    "jazz-react": "workspace:0.8.36",
-    "jazz-tools": "workspace:0.8.36",
+    "hash-slash": "workspace:*",
+    "jazz-browser-media-images": "workspace:*",
+    "jazz-react": "workspace:*",
+    "jazz-tools": "workspace:*",
     "lucide-react": "^0.274.0",
-    "qrcode": "^1.5.3",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-router": "^6.16.0",
-    "react-router-dom": "^6.16.0",
-    "react-use": "^17.4.0",
-    "tailwind-merge": "^1.14.0",
-    "tailwindcss-animate": "^1.0.7",
-    "uniqolor": "^1.1.0"
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
   },
   "devDependencies": {
     "@playwright/test": "^1.46.1",
-    "@types/qrcode": "^1.5.1",
-    "@types/react": "^18.2.19",
-    "@types/react-dom": "^18.2.7",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
     "@vitejs/plugin-react-swc": "^3.3.2",
-    "autoprefixer": "^10.4.14",
+    "autoprefixer": "^10.4.20",
     "is-ci": "^3.0.1",
     "postcss": "^8.4.27",
-    "tailwindcss": "3.3.2",
-    "typescript": "^5.3.3",
-    "vite": "^5.0.10"
+    "tailwindcss": "^3.4.15",
+    "typescript": "~5.6.2",
+    "vite": "^5.4.10"
   }
 }

examples/chat/src/app.tsx

@@ -18,7 +18,7 @@ export function App() {
     router.navigate("/#/chat/" + chat.id);
 
     // for https://jazz.tools marketing site demo only
-    onChatLoad(chat, me);
+    onChatLoad(chat);
   };
 
   return (

examples/chat/src/chatScreen.tsx

@@ -1,21 +1,54 @@
+import { createImage } from "jazz-browser-media-images";
 import { ID } from "jazz-tools";
 import { useState } from "react";
-import { useCoState } from "./main.tsx";
+import { useAccount, useCoState } from "./main.tsx";
 import { Chat, Message } from "./schema.ts";
 import {
   BubbleBody,
   BubbleContainer,
+  BubbleImage,
   BubbleInfo,
+  BubbleText,
   ChatBody,
-  ChatInput,
   EmptyChatMessage,
+  ImageInput,
+  InputBar,
+  TextInput,
 } from "./ui.tsx";
 
 export function ChatScreen(props: { chatID: ID<Chat> }) {
   const chat = useCoState(Chat, props.chatID, [{}]);
+  const { me } = useAccount();
   const [showNLastMessages, setShowNLastMessages] = useState(30);
 
-  return chat ? (
+  if (!chat)
+    return (
+      <div className="flex-1 flex justify-center items-center">Loading...</div>
+    );
+
+  const sendImage = (event: React.ChangeEvent<HTMLInputElement>) => {
+    if (!me?.profile) return;
+
+    const file = event.currentTarget.files?.[0];
+
+    if (!file) return;
+
+    if (file.size > 5000000) {
+      alert("Please upload an image less than 5MB.");
+      return;
+    }
+
+    createImage(file, { owner: chat._owner }).then((image) => {
+      chat.push(
+        Message.create(
+          { text: file.name, image: image },
+          { owner: chat._owner },
+        ),
+      );
+    });
+  };
+
+  return (
     <>
       <ChatBody>
         {chat.length > 0 ? (
@@ -35,24 +68,31 @@ export function ChatScreen(props: { chatID: ID<Chat> }) {
           </button>
         )}
       </ChatBody>
-      <ChatInput
-        onSubmit={(text) => {
-          chat.push(Message.create({ text }, { owner: chat._owner }));
-        }}
-      />
+
+      <InputBar>
+        <ImageInput onImageChange={sendImage} />
+
+        <TextInput
+          onSubmit={(text) => {
+            chat.push(Message.create({ text }, { owner: chat._owner }));
+          }}
+        />
+      </InputBar>
     </>
-  ) : (
-    <div className="flex-1 flex justify-center items-center">Loading...</div>
   );
 }
 
 function ChatBubble(props: { msg: Message }) {
   const lastEdit = props.msg._edits.text;
   const fromMe = lastEdit.by?.isMe;
+  const { text, image } = props.msg;
 
   return (
     <BubbleContainer fromMe={fromMe}>
-      <BubbleBody fromMe={fromMe}>{props.msg.text}</BubbleBody>
+      <BubbleBody fromMe={fromMe}>
+        {image && <BubbleImage image={image} />}
+        <BubbleText text={text} />
+      </BubbleBody>
       <BubbleInfo by={lastEdit.by?.profile?.name} madeAt={lastEdit.madeAt} />
     </BubbleContainer>
   );

examples/chat/src/index.css

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

examples/chat/src/main.tsx

@@ -1,3 +1,4 @@
+import { ThemeProvider } from "@/themeProvider.tsx";
 import { DemoAuthBasicUI, createJazzReactApp, useDemoAuth } from "jazz-react";
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
@@ -25,9 +26,11 @@ function JazzAndAuth({ children }: { children: React.ReactNode }) {
 }
 
 createRoot(document.getElementById("root")!).render(
-  <StrictMode>
-    <JazzAndAuth>
-      <App />
-    </JazzAndAuth>
-  </StrictMode>,
+  <ThemeProvider>
+    <StrictMode>
+      <JazzAndAuth>
+        <App />
+      </JazzAndAuth>
+    </StrictMode>
+  </ThemeProvider>,
 );

examples/chat/src/schema.ts

@@ -1,7 +1,8 @@
-import { CoList, CoMap, co } from "jazz-tools";
+import { CoList, CoMap, ImageDefinition, co } from "jazz-tools";
 
 export class Message extends CoMap {
   text = co.string;
+  image = co.optional.ref(ImageDefinition);
 }
 
 export class Chat extends CoList.Of(co.ref(Message)) {}

examples/chat/src/themeProvider.tsx

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

examples/chat/src/ui.tsx

@@ -1,5 +1,8 @@
 import clsx from "clsx";
-import { useId } from "react";
+import { ProgressiveImg } from "jazz-react";
+import { ImageDefinition } from "jazz-tools";
+import { ImageIcon } from "lucide-react";
+import { useId, useRef } from "react";
 
 export function AppContainer(props: { children: React.ReactNode }) {
   return (
@@ -56,7 +59,7 @@ export function BubbleBody(props: {
     <div
       className={clsx(
         "line-clamp-10 text-ellipsis whitespace-pre-wrap",
-        "rounded-2xl max-w-full py-1 px-3 shadow-sm",
+        "rounded-2xl overflow-hidden max-w-[calc(100%-5rem)] shadow-sm p-1",
         props.fromMe
           ? "bg-white dark:bg-stone-700 dark:text-white"
           : "bg-blue text-white",
@@ -67,6 +70,23 @@ export function BubbleBody(props: {
   );
 }
 
+export function BubbleText(props: { text: string }) {
+  return <p className="px-2 leading-relaxed">{props.text}</p>;
+}
+
+export function BubbleImage(props: { image: ImageDefinition }) {
+  return (
+    <ProgressiveImg image={props.image}>
+      {({ src }) => (
+        <img
+          className="h-auto max-h-[20rem] max-w-full rounded-t-xl mb-1"
+          src={src}
+        />
+      )}
+    </ProgressiveImg>
+  );
+}
+
 export function BubbleInfo(props: { by: string | undefined; madeAt: Date }) {
   return (
     <div className="text-xs text-neutral-500 mt-1.5">
@@ -75,17 +95,59 @@ export function BubbleInfo(props: { by: string | undefined; madeAt: Date }) {
   );
 }
 
-export function ChatInput(props: { onSubmit: (text: string) => void }) {
+export function InputBar(props: { children: React.ReactNode }) {
+  return (
+    <div className="p-3 bg-white border-t shadow-2xl mt-auto flex gap-1 dark:bg-transparent dark:border-stone-800">
+      {props.children}
+    </div>
+  );
+}
+
+export function ImageInput({
+  onImageChange,
+}: { onImageChange?: (event: React.ChangeEvent<HTMLInputElement>) => void }) {
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const onUploadClick = () => {
+    inputRef.current?.click();
+  };
+
+  return (
+    <>
+      <button
+        type="button"
+        aria-label="Send image"
+        title="Send image"
+        onClick={onUploadClick}
+        className="text-stone-500 p-1.5 rounded-full hover:bg-stone-100 hover:text-stone-800 dark:hover:bg-stone-800 dark:hover:text-stone-200 transition-colors"
+      >
+        <ImageIcon size={24} strokeWidth={1.5} />
+      </button>
+
+      <label className="sr-only">
+        Image
+        <input
+          ref={inputRef}
+          type="file"
+          accept="image/png, image/jpeg, image/gif"
+          onChange={onImageChange}
+        />
+      </label>
+    </>
+  );
+}
+
+export function TextInput(props: { onSubmit: (text: string) => void }) {
   const inputId = useId();
 
   return (
-    <div className="p-3 bg-white border-t shadow-2xl mt-auto dark:bg-transparent dark:border-stone-800">
+    <div className="flex-1">
       <label className="sr-only" htmlFor={inputId}>
         Type a message and press Enter
       </label>
       <input
         id={inputId}
-        className="rounded-full py-2 px-4 border block w-full dark:bg-black dark:text-white dark:border-stone-700"
+        className="rounded-full py-1 px-3 border block w-full placeholder:text-stone-500 dark:bg-black dark:text-white dark:border-stone-700"
         placeholder="Type a message and press Enter"
         maxLength={2048}
         onKeyDown={({ key, currentTarget: input }) => {

examples/chat/src/util.ts

@@ -2,20 +2,10 @@
 // This is NOT needed to make the chat work
 
 import { Chat } from "@/schema.ts";
-import { Account, CoValue, ID } from "jazz-tools";
 
-export function waitForUpload(id: ID<CoValue>, me: Account) {
-  const syncManager = me._raw.core.node.syncManager;
-  const peers = syncManager.getPeers();
-
-  return Promise.all(
-    peers.map((peer) => syncManager.waitForUploadIntoPeer(peer.id, id)),
-  );
-}
-
-export function onChatLoad(chat: Chat, me: Account) {
+export function onChatLoad(chat: Chat) {
   if (window.parent) {
-    waitForUpload(chat.id, me).then(() => {
+    chat.waitForSync().then(() => {
       window.parent.postMessage(
         { type: "chat-load", id: "/chat/" + chat.id },
         "*",

examples/chat/tailwind.config.js

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

examples/chat/tailwind.config.ts

@@ -0,0 +1,79 @@
+import type { Config } from "tailwindcss";
+import plugin from "tailwindcss/plugin";
+const colors = require("tailwindcss/colors");
+
+const stonePalette = {
+  50: "oklch(0.988281 0.002 75)",
+  75: "oklch(0.980563 0.002 75)",
+  100: "oklch(0.964844 0.002 75)",
+  200: "oklch(0.917969 0.002 75)",
+  300: "oklch(0.853516 0.002 75)",
+  400: "oklch(0.789063 0.002 75)",
+  500: "oklch(0.726563 0.002 75)",
+  600: "oklch(0.613281 0.002 75)",
+  700: "oklch(0.523438 0.002 75)",
+  800: "oklch(0.412109 0.002 75)",
+  900: "oklch(0.302734 0.002 75)",
+  925: "oklch(0.220000 0.002 75)",
+  950: "oklch(0.193359 0.002 75)",
+} as const;
+
+const stonePaletteWithAlpha = { ...stonePalette };
+
+Object.keys(stonePalette).forEach((key) => {
+  stonePaletteWithAlpha[key] = stonePaletteWithAlpha[key].replace(
+    ")",
+    "/ <alpha-value>)",
+  );
+});
+
+const config: Config = {
+  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
+  theme: {
+    extend: {
+      colors: {
+        stone: stonePaletteWithAlpha,
+        blue: {
+          ...colors.indigo,
+          500: "#5870F1",
+          DEFAULT: "#3313F7",
+        },
+      },
+      container: {
+        center: true,
+        padding: {
+          DEFAULT: "0.75rem",
+          sm: "1rem",
+        },
+        screens: {
+          md: "500px",
+          lg: "500px",
+          xl: "500px",
+        },
+      },
+    },
+  },
+  plugins: [
+    plugin(({ addBase }) =>
+      addBase({
+        ":root": {
+          "--gcmp-border-color": stonePalette[200],
+          "--gcmp-invert-border-color": stonePalette[900],
+        },
+        "*": {
+          borderColor: "var(--gcmp-border-color)",
+        },
+        "@media (prefers-color-scheme: dark)": {
+          "*": {
+            borderColor: "var(--gcmp-invert-border-color)",
+          },
+        },
+        "*:focus": {
+          outline: "none",
+        },
+      }),
+    ),
+  ],
+} as const;
+
+export default config;

examples/chat/tests/chat.spec.ts

@@ -38,14 +38,11 @@ test("chat between two users", async ({ page }) => {
   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.logout();
+  await loginPage.loginAs(mario);
 
-  // await chatPage.expectLoaded();
+  await page.goto(roomURL);
 
-  // await page.goto(roomURL);
-
-  // await chatPage.expectMessageRow(message1ByMario);
-  // await chatPage.expectMessageRow(message2ByLuigi);
+  await chatPage.expectMessageRow(message1ByMario);
+  await chatPage.expectMessageRow(message2ByLuigi);
 });

examples/chat/tests/pages/LoginPage.ts

@@ -25,7 +25,7 @@ export class LoginPage {
   async loginAs(value: string) {
     await this.page
       .getByRole("button", {
-        name: `Log in as "${value}"`,
+        name: value,
       })
       .click();
   }

examples/chat/vercel.json

@@ -0,0 +1,8 @@
+{
+  "build": {
+    "env": {
+      "APP_NAME": "jazz-chat"
+    }
+  },
+  "ignoreCommand": "node ../../ignore-vercel-build.js"
+}

examples/clerk/CHANGELOG.md

@@ -1,5 +1,100 @@
 # minimal-auth-clerk
 
+## 0.0.24
+
+### Patch Changes
+
+- Updated dependencies [dc62b95]
+- Updated dependencies [1de26f8]
+  - jazz-tools@0.8.51
+  - jazz-react@0.8.51
+  - jazz-react-auth-clerk@0.8.51
+
+## 0.0.23
+
+### Patch Changes
+
+- jazz-react@0.8.50
+- jazz-react-auth-clerk@0.8.50
+- jazz-tools@0.8.50
+
+## 0.0.22
+
+### Patch Changes
+
+- jazz-react@0.8.49
+- jazz-react-auth-clerk@0.8.49
+- jazz-tools@0.8.49
+
+## 0.0.21
+
+### Patch Changes
+
+- Updated dependencies [635e824]
+- Updated dependencies [0a85982]
+  - jazz-tools@0.8.48
+  - jazz-react@0.8.48
+  - jazz-react-auth-clerk@0.8.48
+
+## 0.0.20
+
+### Patch Changes
+
+- Updated dependencies [fa41f8e]
+- Updated dependencies [88d7d9a]
+- Updated dependencies [60e35ea]
+  - jazz-tools@0.8.45
+  - jazz-react@0.8.45
+  - jazz-react-auth-clerk@0.8.45
+
+## 0.0.19
+
+### Patch Changes
+
+- jazz-react@0.8.44
+- jazz-react-auth-clerk@0.8.44
+- jazz-tools@0.8.44
+
+## 0.0.18
+
+### Patch Changes
+
+- jazz-react@0.8.41
+- jazz-react-auth-clerk@0.8.41
+- jazz-tools@0.8.41
+
+## 0.0.17
+
+### Patch Changes
+
+- jazz-react@0.8.40
+- jazz-react-auth-clerk@0.8.40
+
+## 0.0.16
+
+### Patch Changes
+
+- Updated dependencies [249eecb]
+  - jazz-tools@0.8.39
+  - jazz-react@0.8.39
+  - jazz-react-auth-clerk@0.8.39
+
+## 0.0.15
+
+### Patch Changes
+
+- jazz-react@0.8.38
+- jazz-react-auth-clerk@0.8.38
+- jazz-tools@0.8.38
+
+## 0.0.14
+
+### Patch Changes
+
+- jazz-react@0.8.37
+- jazz-react-auth-clerk@0.8.37
+- jazz-tools@0.8.37
+
 ## 0.0.13
 
 ### Patch Changes

examples/clerk/README.md

@@ -1,4 +1,4 @@
-# Passkey authentication example with Jazz and React
+# Clerk authentication example with Jazz and React
 
 This is an example of how to use clerk authentication with Jazz.
 

examples/clerk/package.json

@@ -1,7 +1,7 @@
 {
   "name": "clerk",
   "private": true,
-  "version": "0.0.13",
+  "version": "0.0.24",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -12,9 +12,9 @@
   },
   "dependencies": {
     "@clerk/clerk-react": "^5.4.1",
-    "jazz-tools": "workspace:*",
     "jazz-react": "workspace:*",
-    "jazz-react-auth-clerk": "workspace:0.8.36",
+    "jazz-react-auth-clerk": "workspace:0.8.51",
+    "jazz-tools": "workspace:*",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },

examples/clerk/vercel.json

@@ -0,0 +1,8 @@
+{
+  "build": {
+    "env": {
+      "APP_NAME": "clerk-demo"
+    }
+  },
+  "ignoreCommand": "node ../../ignore-vercel-build.js"
+}

examples/file-share-svelte/.gitignore

@@ -0,0 +1,23 @@
+node_modules
+
+# Output
+.output
+.vercel
+/.svelte-kit
+/build
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Env
+.env
+.env.*
+!.env.example
+!.env.test
+
+# Vite
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*
+
+playwright-report

examples/file-share-svelte/.npmrc

@@ -0,0 +1 @@
+engine-strict=true

examples/file-share-svelte/.prettierignore

@@ -0,0 +1,4 @@
+# Package Managers
+package-lock.json
+pnpm-lock.yaml
+yarn.lock

examples/file-share-svelte/.prettierrc

@@ -0,0 +1,16 @@
+{
+  "useTabs": false,
+  "tabWidth": 2,
+  "singleQuote": true,
+  "trailingComma": "none",
+  "printWidth": 100,
+  "plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
+  "overrides": [
+    {
+      "files": "*.svelte",
+      "options": {
+        "parser": "svelte"
+      }
+    }
+  ]
+}

examples/file-share-svelte/CHANGELOG.md

@@ -0,0 +1,72 @@
+# file-share-svelte
+
+## 0.0.10
+
+### Patch Changes
+
+- Updated dependencies [dc62b95]
+- Updated dependencies [1de26f8]
+  - jazz-tools@0.8.51
+  - jazz-svelte@0.8.51
+
+## 0.0.9
+
+### Patch Changes
+
+- jazz-tools@0.8.50
+- jazz-svelte@0.8.50
+
+## 0.0.8
+
+### Patch Changes
+
+- jazz-tools@0.8.49
+- jazz-svelte@0.8.49
+
+## 0.0.7
+
+### Patch Changes
+
+- Updated dependencies [635e824]
+- Updated dependencies [0a85982]
+  - jazz-tools@0.8.48
+  - jazz-svelte@0.8.48
+
+## 0.0.6
+
+### Patch Changes
+
+- Updated dependencies [fa41f8e]
+- Updated dependencies [88d7d9a]
+- Updated dependencies [60e35ea]
+  - jazz-tools@0.8.45
+  - jazz-svelte@0.8.45
+
+## 0.0.5
+
+### Patch Changes
+
+- jazz-tools@0.8.44
+- jazz-svelte@0.8.44
+
+## 0.0.4
+
+### Patch Changes
+
+- jazz-tools@0.8.41
+- jazz-svelte@0.8.41
+
+## 0.0.3
+
+### Patch Changes
+
+- jazz-svelte@0.8.40
+
+## 0.0.2
+
+### Patch Changes
+
+- Updated dependencies [249eecb]
+- Updated dependencies [aa21072]
+  - jazz-tools@0.8.39
+  - jazz-svelte@0.8.39

examples/file-share-svelte/README.md

@@ -0,0 +1,56 @@
+# File share example with Jazz and Svelte
+
+This example app demonstrates how to implement secure file sharing in a Svelte application using Jazz.
+
+## Features
+
+This example showcases how to:
+
+- Upload files securely with end-to-end encryption
+- Generate and manage sharing links
+- Handle file downloads with decryption
+- Manage file access permissions
+- Authenticate users using passkeys
+
+## Getting Started
+
+1. Clone the repository:
+
+```sh
+git clone https://github.com/garden-co/jazz.git
+```
+
+2. Navigate to the example directory:
+
+```sh
+cd examples/file-share-svelte
+```
+
+3. Install dependencies:
+
+```sh
+pnpm install
+```
+
+4. Run the development server:
+
+```sh
+turbo dev
+```
+
+5. Open your browser and visit [http://localhost:5173](http://localhost:5173)
+
+---
+
+Alternatively, you can build and preview the app:
+
+```sh
+turbo build
+pnpm preview
+```
+
+## Learn More
+
+- [Jazz Documentation](https://jazz.tools/docs/svelte)
+- [Svelte Documentation](https://svelte.dev)
+- [WebAuthn API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Authentication_API)

examples/file-share-svelte/eslint.config.js

@@ -0,0 +1,33 @@
+import js from '@eslint/js';
+import prettier from 'eslint-config-prettier';
+import svelte from 'eslint-plugin-svelte';
+import globals from 'globals';
+import ts from 'typescript-eslint';
+
+export default ts.config(
+  js.configs.recommended,
+  ...ts.configs.recommended,
+  ...svelte.configs['flat/recommended'],
+  prettier,
+  ...svelte.configs['flat/prettier'],
+  {
+    languageOptions: {
+      globals: {
+        ...globals.browser,
+        ...globals.node
+      }
+    }
+  },
+  {
+    files: ['**/*.svelte'],
+
+    languageOptions: {
+      parserOptions: {
+        parser: ts.parser
+      }
+    }
+  },
+  {
+    ignores: ['build/', '.svelte-kit/', 'dist/']
+  }
+);

examples/file-share-svelte/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "file-share-svelte",
+  "version": "0.0.10",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build",
+    "preview": "vite preview",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "format": "prettier --write .",
+    "lint": "prettier --check . && eslint .",
+    "format-and-lint": "pnpm run format && pnpm run lint",
+    "format-and-lint:fix": "pnpm run format --write && pnpm run lint --fix",
+    "test": "playwright test",
+    "test:ui": "playwright test --ui"
+  },
+  "devDependencies": {
+    "@sveltejs/adapter-vercel": "^5.5.0",
+    "@sveltejs/kit": "^2.0.0",
+    "@sveltejs/vite-plugin-svelte": "^4.0.1",
+    "@types/is-ci": "^3.0.4",
+    "autoprefixer": "^10.4.20",
+    "eslint": "^9.7.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-svelte": "^2.36.0",
+    "globals": "^15.11.0",
+    "is-ci": "^3.0.1",
+    "prettier": "^3.3.2",
+    "prettier-plugin-svelte": "^3.2.6",
+    "prettier-plugin-tailwindcss": "^0.6.5",
+    "svelte": "^5.0.0",
+    "svelte-check": "^4.0.0",
+    "tailwindcss": "^3.4.15",
+    "typescript": "~5.6.2",
+    "typescript-eslint": "^8.0.0",
+    "vite": "^5.4.10"
+  },
+  "dependencies": {
+    "@tailwindcss/typography": "^0.5.15",
+    "jazz-svelte": "workspace:*",
+    "jazz-tools": "workspace:*",
+    "lucide-svelte": "^0.463.0",
+    "svelte-sonner": "^0.3.28"
+  }
+}

examples/file-share-svelte/playwright.config.ts

@@ -0,0 +1,53 @@
+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: "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: [
+    {
+      command: "pnpm preview --port 5173",
+      url: "http://localhost:5173/",
+      reuseExistingServer: !isCI,
+    },
+  ],
+});

examples/file-share-svelte/postcss.config.js

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

examples/file-share-svelte/src/app.css

@@ -0,0 +1,3 @@
+@import 'tailwindcss/base';
+@import 'tailwindcss/components';
+@import 'tailwindcss/utilities';

examples/file-share-svelte/src/app.d.ts

@@ -0,0 +1,13 @@
+// See https://svelte.dev/docs/kit/types#app.d.ts
+// for information about these interfaces
+declare global {
+  namespace App {
+    // interface Error {}
+    // interface Locals {}
+    // interface PageData {}
+    // interface PageState {}
+    // interface Platform {}
+  }
+}
+
+export {};

examples/file-share-svelte/src/app.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%sveltekit.assets%/favicon.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    %sveltekit.head%
+  </head>
+  <body data-sveltekit-preload-data="hover">
+    <div style="display: contents">%sveltekit.body%</div>
+  </body>
+</html>

examples/file-share-svelte/src/lib/components/FileItem.svelte

@@ -0,0 +1,117 @@
+<script lang="ts">
+  import { slide } from 'svelte/transition';
+  import { SharedFile } from '$lib/schema';
+  import { FileStream } from 'jazz-tools';
+  import { File, FileDown, Trash2, Link2 } from 'lucide-svelte';
+  import { useAccount } from '$lib/jazz';
+  import { toast } from 'svelte-sonner';
+  import { formatFileSize } from '$lib/utils';
+
+  const {
+    file,
+    loading = false,
+    onDelete
+  }: {
+    file: SharedFile;
+    loading?: boolean;
+    onDelete: (file: SharedFile) => void;
+  } = $props();
+
+  const { me } = useAccount();
+  const isAdmin = $derived(me && file._owner?.myRole() === 'admin');
+
+  async function downloadFile() {
+    if (!file._refs.file?.id || !me) {
+      toast.error('Failed to download file');
+      return;
+    }
+
+    try {
+      const fileId = file._refs.file.id;
+
+      // Load the file as a blob, can take a while
+      const blob = await FileStream.loadAsBlob(fileId, me, {});
+      if (!blob) {
+        toast.error('Failed to download file');
+        return;
+      }
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = file.name;
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      URL.revokeObjectURL(url);
+      toast.success('File downloaded successfully');
+    } catch (error) {
+      console.error('Error downloading file:', error);
+      toast.error('Failed to download file');
+    }
+  }
+
+  async function shareFile() {
+    try {
+      const fileUrl = `${window.location.origin}/file/${file.id}`;
+      await navigator.clipboard.writeText(fileUrl);
+      toast.success('Share link copied to clipboard');
+    } catch (error) {
+      console.error('Error sharing file:', error);
+      toast.error('Failed to create share link');
+    }
+  }
+</script>
+
+<div
+  class="flex items-center justify-between rounded-lg border border-gray-200 bg-white p-4"
+  transition:slide={{ duration: 200 }}
+>
+  <div class="flex items-center space-x-4">
+    <div class="flex h-10 w-10 items-center justify-center rounded-lg bg-blue-100 text-blue-600">
+      <File class="h-6 w-6" />
+    </div>
+    <div>
+      <a href="/file/{file.id}" class="hover:text-blue-600 hover:underline">
+        <h3 class="font-medium text-gray-900">{file.name}</h3>
+      </a>
+      <p class="text-sm text-gray-500">
+        {isAdmin ? 'Owned by you' : ''} • Uploaded {new Date(
+          file.createdAt || 0
+        ).toLocaleDateString()} •
+        {formatFileSize(file.size || 0)}
+      </p>
+    </div>
+  </div>
+
+  <div class="flex items-center space-x-2">
+    {#if loading}
+      <div class="text-sm text-gray-500">Uploading...</div>
+    {:else}
+      <button
+        onclick={downloadFile}
+        class="rounded-lg p-2 text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-700"
+        aria-label="Download file"
+      >
+        <FileDown class="h-5 w-5" />
+      </button>
+
+      {#if isAdmin}
+        <button
+          onclick={shareFile}
+          class="rounded-lg p-2 text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-700"
+          aria-label="Share file"
+        >
+          <Link2 class="h-5 w-5" />
+        </button>
+
+        <button
+          onclick={() => onDelete(file)}
+          class="rounded-lg p-2 text-gray-500 transition-colors hover:bg-gray-100 hover:text-red-600"
+          aria-label="Delete file"
+        >
+          <Trash2 class="h-5 w-5" />
+        </button>
+      {/if}
+    {/if}
+  </div>
+</div>

examples/file-share-svelte/src/lib/index.ts

@@ -0,0 +1 @@
+// place files you want to import through the `$lib` alias in this folder.

examples/file-share-svelte/src/lib/jazz.ts

@@ -0,0 +1,7 @@
+import { createJazzApp } from 'jazz-svelte';
+import { FileShareAccount } from './schema';
+
+export const { useAccount, useCoState, useAcceptInvite, useAccountOrGuest, Provider } =
+  createJazzApp({
+    AccountSchema: FileShareAccount
+  });

examples/file-share-svelte/src/lib/schema.ts

@@ -0,0 +1,49 @@
+import { Account, CoList, CoMap, FileStream, Profile, co, Group } from 'jazz-tools';
+
+export class SharedFile extends CoMap {
+  name = co.string;
+  file = co.ref(FileStream);
+  createdAt = co.Date;
+  uploadedAt = co.Date;
+  size = co.number;
+}
+
+export class FileShareProfile extends Profile {
+  name = co.string;
+}
+
+export class ListOfSharedFiles extends CoList.Of(co.ref(SharedFile)) {}
+
+export class FileShareAccountRoot extends CoMap {
+  type = co.string;
+  sharedFiles = co.ref(ListOfSharedFiles);
+  publicGroup = co.ref(Group);
+}
+
+export class FileShareAccount extends Account {
+  profile = co.ref(FileShareProfile);
+  root = co.ref(FileShareAccountRoot);
+
+  /** The account migration is run on account creation and on every log-in.
+   *  You can use it to set up the account root and any other initial CoValues you need.
+   */
+  async migrate() {
+    await this._refs.root?.load();
+
+    // Initialize root if it doesn't exist
+    if (!this.root || this.root.type !== 'file-share-account') {
+      // Create a group that will own all shared files
+      const publicGroup = Group.create({ owner: this });
+      publicGroup.addMember('everyone', 'reader');
+
+      this.root = FileShareAccountRoot.create(
+        {
+          type: 'file-share-account',
+          sharedFiles: ListOfSharedFiles.create([], { owner: publicGroup }),
+          publicGroup
+        },
+        { owner: this }
+      );
+    }
+  }
+}

examples/file-share-svelte/src/lib/utils.ts

@@ -0,0 +1,22 @@
+/**
+ * Formats a file size in bytes to a human readable string
+ * @param bytes The size in bytes
+ * @returns A formatted string like "1.5 MB"
+ */
+export function formatFileSize(bytes: number): string {
+  if (bytes === 0) return '0 B';
+  const k = 1024;
+  const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(1))} ${sizes[i]}`;
+}
+
+/**
+ * Generates a temporary file ID based on the file name and creation time
+ * @param fileName The name of the file
+ * @param createdAt The creation date
+ * @returns A unique file ID string
+ */
+export function generateTempFileId(fileName: string, createdAt: Date): string {
+  return `file-${fileName}-${createdAt.getTime()}`;
+}

examples/file-share-svelte/src/routes/+layout.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+  import { Provider } from '$lib/jazz';
+  import { PasskeyAuthBasicUI, usePasskeyAuth } from 'jazz-svelte';
+  import { Toaster } from 'svelte-sonner';
+  import '../app.css';
+
+  let { children } = $props();
+  const auth = usePasskeyAuth({
+    appName: 'File Share'
+  });
+</script>
+
+<svelte:head>
+  <title>File Share</title>
+</svelte:head>
+
+<Toaster richColors />
+
+{#if auth.state.state === 'ready'}
+  <div class="fixed inset-0 flex items-center justify-center bg-gray-50/80">
+    <div class="rounded-lg bg-white p-8 shadow-lg">
+      <PasskeyAuthBasicUI state={auth.state} />
+    </div>
+  </div>
+{/if}
+{#if auth.current}
+  <Provider auth={auth.current} peer="wss://cloud.jazz.tools/?key=file-share-svelte@garden.co">
+    <div class="min-h-screen bg-gray-100">
+      {@render children()}
+    </div>
+  </Provider>
+{/if}