Merge pull request #872 from garden-co/changeset-release/main

Fix `jazz-*-auth-clerk` readmes

e2e/BinaryCoStream/CHANGELOG.md

@@ -1,5 +1,34 @@
 # @jazz-e2e/binarycostream
 
+## 0.0.109
+
+### Patch Changes
+
+- Updated dependencies [df42b2b]
+- Updated dependencies [df42b2b]
+  - cojson@0.8.32
+  - jazz-tools@0.8.32
+  - jazz-react@0.8.32
+
+## 0.0.108
+
+### Patch Changes
+
+- Updated dependencies [e511d6d]
+  - cojson@0.8.31
+  - jazz-react@0.8.31
+  - jazz-tools@0.8.31
+
+## 0.0.107
+
+### Patch Changes
+
+- Updated dependencies [0a2fae3]
+- Updated dependencies [99cda2f]
+  - cojson@0.8.30
+  - jazz-react@0.8.30
+  - jazz-tools@0.8.30
+
 ## 0.0.106
 
 ### Patch Changes

e2e/BinaryCoStream/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@jazz-e2e/filestream",
   "private": true,
-  "version": "0.0.106",
+  "version": "0.0.109",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -13,11 +13,11 @@
     "test:ui": "playwright test --ui"
   },
   "dependencies": {
-    "cojson": "workspace:0.8.29",
+    "cojson": "workspace:0.8.32",
     "hash-slash": "workspace:0.2.1",
     "is-ci": "^3.0.1",
-    "jazz-react": "workspace:0.8.29",
-    "jazz-tools": "workspace:0.8.29",
+    "jazz-react": "workspace:0.8.32",
+    "jazz-tools": "workspace:0.8.32",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

e2e/CoValues/CHANGELOG.md

@@ -1,5 +1,34 @@
 # @jazz-e2e/covalues
 
+## 0.0.108
+
+### Patch Changes
+
+- Updated dependencies [df42b2b]
+- Updated dependencies [df42b2b]
+  - cojson@0.8.32
+  - jazz-tools@0.8.32
+  - jazz-react@0.8.32
+
+## 0.0.107
+
+### Patch Changes
+
+- Updated dependencies [e511d6d]
+  - cojson@0.8.31
+  - jazz-react@0.8.31
+  - jazz-tools@0.8.31
+
+## 0.0.106
+
+### Patch Changes
+
+- Updated dependencies [0a2fae3]
+- Updated dependencies [99cda2f]
+  - cojson@0.8.30
+  - jazz-react@0.8.30
+  - jazz-tools@0.8.30
+
 ## 0.0.105
 
 ### Patch Changes

e2e/CoValues/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@jazz-e2e/covalues",
   "private": true,
-  "version": "0.0.105",
+  "version": "0.0.108",
   "type": "module",
   "scripts": {
     "dev": "vite",

examples/book-shelf/CHANGELOG.md

@@ -1,5 +1,30 @@
 # jazz-example-book-shelf
 
+## 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

examples/book-shelf/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jazz-example-book-shelf",
-  "version": "0.1.21",
+  "version": "0.1.24",
   "private": true,
   "scripts": {
     "dev": "next dev",
@@ -11,9 +11,9 @@
   },
   "dependencies": {
     "clsx": "^2.0.0",
-    "jazz-browser-media-images": "workspace:0.8.29",
-    "jazz-react": "workspace:0.8.29",
-    "jazz-tools": "workspace:0.8.29",
+    "jazz-browser-media-images": "workspace:0.8.32",
+    "jazz-react": "workspace:0.8.32",
+    "jazz-tools": "workspace:0.8.32",
     "next": "14.2.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"

examples/chat-clerk/CHANGELOG.md

@@ -1,5 +1,38 @@
 # jazz-example-chat
 
+## 0.0.108
+
+### Patch Changes
+
+- Updated dependencies [df42b2b]
+- Updated dependencies [1a4bda0]
+- Updated dependencies [df42b2b]
+  - cojson@0.8.32
+  - jazz-react-auth-clerk@0.8.32
+  - jazz-tools@0.8.32
+  - jazz-react@0.8.32
+
+## 0.0.107
+
+### Patch Changes
+
+- Updated dependencies [e511d6d]
+  - cojson@0.8.31
+  - jazz-react@0.8.31
+  - jazz-react-auth-clerk@0.8.31
+  - jazz-tools@0.8.31
+
+## 0.0.106
+
+### Patch Changes
+
+- Updated dependencies [0a2fae3]
+- Updated dependencies [99cda2f]
+  - cojson@0.8.30
+  - jazz-react@0.8.30
+  - jazz-react-auth-clerk@0.8.30
+  - jazz-tools@0.8.30
+
 ## 0.0.105
 
 ### Patch Changes

examples/chat-clerk/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jazz-example-chat-clerk",
   "private": true,
-  "version": "0.0.105",
+  "version": "0.0.108",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -17,11 +17,11 @@
     "@radix-ui/react-toast": "^1.1.4",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
-    "cojson": "workspace:0.8.29",
+    "cojson": "workspace:0.8.32",
     "hash-slash": "workspace:0.2.1",
-    "jazz-react": "workspace:0.8.29",
-    "jazz-react-auth-clerk": "workspace:0.8.29",
-    "jazz-tools": "workspace:0.8.29",
+    "jazz-react": "workspace:0.8.32",
+    "jazz-react-auth-clerk": "workspace:0.8.32",
+    "jazz-tools": "workspace:0.8.32",
     "lucide-react": "^0.274.0",
     "qrcode": "^1.5.3",
     "react": "^18.2.0",

examples/chat-rn-clerk/CHANGELOG.md

@@ -1,5 +1,34 @@
 # chat-rn-clerk
 
+## 1.0.24
+
+### Patch Changes
+
+- Updated dependencies [1a4bda0]
+- Updated dependencies [df42b2b]
+  - jazz-react-auth-clerk@0.8.32
+  - jazz-tools@0.8.32
+  - jazz-react-native@0.8.32
+  - jazz-react-native-media-images@0.8.24
+
+## 1.0.23
+
+### Patch Changes
+
+- jazz-react-auth-clerk@0.8.31
+- jazz-react-native@0.8.31
+- jazz-tools@0.8.31
+- jazz-react-native-media-images@0.8.23
+
+## 1.0.22
+
+### Patch Changes
+
+- jazz-react-auth-clerk@0.8.30
+- jazz-react-native@0.8.30
+- jazz-tools@0.8.30
+- jazz-react-native-media-images@0.8.22
+
 ## 1.0.21
 
 ### Patch Changes

examples/chat-rn-clerk/package.json

@@ -1,7 +1,7 @@
 {
   "name": "chat-rn-clerk",
   "main": "index.js",
-  "version": "1.0.21",
+  "version": "1.0.24",
   "scripts": {
     "build": "expo export -p ios",
     "start": "expo start",

examples/chat-rn/CHANGELOG.md

@@ -1,5 +1,27 @@
 # chat-rn
 
+## 1.0.23
+
+### Patch Changes
+
+- Updated dependencies [df42b2b]
+  - jazz-tools@0.8.32
+  - jazz-react-native@0.8.32
+
+## 1.0.22
+
+### Patch Changes
+
+- jazz-react-native@0.8.31
+- jazz-tools@0.8.31
+
+## 1.0.21
+
+### Patch Changes
+
+- jazz-react-native@0.8.30
+- jazz-tools@0.8.30
+
 ## 1.0.20
 
 ### Patch Changes

examples/chat-rn/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chat-rn",
-  "version": "1.0.20",
+  "version": "1.0.23",
   "main": "index.js",
   "scripts": {
     "build": "expo export -p ios",

examples/chat-vue/CHANGELOG.md

@@ -1,5 +1,30 @@
 # chat-vue
 
+## 0.0.15
+
+### Patch Changes
+
+- Updated dependencies [df42b2b]
+  - jazz-tools@0.8.32
+  - jazz-browser@0.8.32
+  - jazz-vue@0.8.20
+
+## 0.0.14
+
+### Patch Changes
+
+- jazz-browser@0.8.31
+- jazz-tools@0.8.31
+- jazz-vue@0.8.19
+
+## 0.0.13
+
+### Patch Changes
+
+- jazz-browser@0.8.30
+- jazz-tools@0.8.30
+- jazz-vue@0.8.18
+
 ## 0.0.12
 
 ### Patch Changes

examples/chat-vue/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chat-vue",
-  "version": "0.0.12",
+  "version": "0.0.15",
   "private": true,
   "type": "module",
   "scripts": {

examples/chat/CHANGELOG.md

@@ -1,5 +1,34 @@
 # jazz-example-chat
 
+## 0.0.110
+
+### Patch Changes
+
+- Updated dependencies [df42b2b]
+- Updated dependencies [df42b2b]
+  - cojson@0.8.32
+  - jazz-tools@0.8.32
+  - jazz-react@0.8.32
+
+## 0.0.109
+
+### Patch Changes
+
+- Updated dependencies [e511d6d]
+  - cojson@0.8.31
+  - jazz-react@0.8.31
+  - jazz-tools@0.8.31
+
+## 0.0.108
+
+### Patch Changes
+
+- Updated dependencies [0a2fae3]
+- Updated dependencies [99cda2f]
+  - cojson@0.8.30
+  - jazz-react@0.8.30
+  - jazz-tools@0.8.30
+
 ## 0.0.107
 
 ### Patch Changes

examples/chat/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jazz-example-chat",
   "private": true,
-  "version": "0.0.107",
+  "version": "0.0.110",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -18,10 +18,10 @@
     "@radix-ui/react-toast": "^1.1.4",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
-    "cojson": "workspace:0.8.29",
+    "cojson": "workspace:0.8.32",
     "hash-slash": "workspace:0.2.1",
-    "jazz-react": "workspace:0.8.29",
-    "jazz-tools": "workspace:0.8.29",
+    "jazz-react": "workspace:0.8.32",
+    "jazz-tools": "workspace:0.8.32",
     "lucide-react": "^0.274.0",
     "qrcode": "^1.5.3",
     "react": "^18.2.0",

examples/inspector/CHANGELOG.md

@@ -1,5 +1,30 @@
 # jazz-example-inspector
 
+## 0.0.80
+
+### Patch Changes
+
+- Updated dependencies [df42b2b]
+  - cojson@0.8.32
+  - cojson-transport-ws@0.8.32
+
+## 0.0.79
+
+### Patch Changes
+
+- Updated dependencies [e511d6d]
+  - cojson@0.8.31
+  - cojson-transport-ws@0.8.31
+
+## 0.0.78
+
+### Patch Changes
+
+- Updated dependencies [0a2fae3]
+- Updated dependencies [99cda2f]
+  - cojson@0.8.30
+  - cojson-transport-ws@0.8.30
+
 ## 0.0.77
 
 ### Patch Changes

examples/inspector/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jazz-inspector",
   "private": true,
-  "version": "0.0.77",
+  "version": "0.0.80",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -16,8 +16,8 @@
     "@radix-ui/react-toast": "^1.1.4",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
-    "cojson": "workspace:0.8.29",
-    "cojson-transport-ws": "workspace:0.8.29",
+    "cojson": "workspace:0.8.32",
+    "cojson-transport-ws": "workspace:0.8.32",
     "hash-slash": "workspace:0.2.1",
     "lucide-react": "^0.274.0",
     "qrcode": "^1.5.3",

examples/minimal-auth-clerk/CHANGELOG.md

@@ -1,5 +1,31 @@
 # minimal-auth-clerk
 
+## 0.0.9
+
+### Patch Changes
+
+- Updated dependencies [1a4bda0]
+- Updated dependencies [df42b2b]
+  - jazz-react-auth-clerk@0.8.32
+  - jazz-tools@0.8.32
+  - jazz-react@0.8.32
+
+## 0.0.8
+
+### Patch Changes
+
+- jazz-react@0.8.31
+- jazz-react-auth-clerk@0.8.31
+- jazz-tools@0.8.31
+
+## 0.0.7
+
+### Patch Changes
+
+- jazz-react@0.8.30
+- jazz-react-auth-clerk@0.8.30
+- jazz-tools@0.8.30
+
 ## 0.0.6
 
 ### Patch Changes

examples/minimal-auth-clerk/package.json

@@ -1,7 +1,7 @@
 {
   "name": "minimal-auth-clerk",
   "private": true,
-  "version": "0.0.6",
+  "version": "0.0.9",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -14,7 +14,7 @@
     "@clerk/clerk-react": "^5.4.1",
     "jazz-tools": "workspace:*",
     "jazz-react": "workspace:*",
-    "jazz-react-auth-clerk": "workspace:0.8.29",
+    "jazz-react-auth-clerk": "workspace:0.8.32",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },

examples/minimal-auth-passkey/CHANGELOG.md

@@ -1,5 +1,27 @@
 # minimal-auth-passkey
 
+## 0.0.8
+
+### Patch Changes
+
+- Updated dependencies [df42b2b]
+  - jazz-tools@0.8.32
+  - jazz-react@0.8.32
+
+## 0.0.7
+
+### Patch Changes
+
+- jazz-react@0.8.31
+- jazz-tools@0.8.31
+
+## 0.0.6
+
+### Patch Changes
+
+- jazz-react@0.8.30
+- jazz-tools@0.8.30
+
 ## 0.0.5
 
 ### Patch Changes

examples/minimal-auth-passkey/package.json

@@ -1,7 +1,7 @@
 {
   "name": "minimal-auth-passkey",
   "private": true,
-  "version": "0.0.5",
+  "version": "0.0.8",
   "type": "module",
   "scripts": {
     "dev": "vite",

examples/music-player/CHANGELOG.md

@@ -1,5 +1,27 @@
 # jazz-example-musicplayer
 
+## 0.0.30
+
+### Patch Changes
+
+- Updated dependencies [df42b2b]
+  - jazz-tools@0.8.32
+  - jazz-react@0.8.32
+
+## 0.0.29
+
+### Patch Changes
+
+- jazz-react@0.8.31
+- jazz-tools@0.8.31
+
+## 0.0.28
+
+### Patch Changes
+
+- jazz-react@0.8.30
+- jazz-tools@0.8.30
+
 ## 0.0.27
 
 ### Patch Changes

examples/music-player/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jazz-example-music-player",
   "private": true,
-  "version": "0.0.27",
+  "version": "0.0.30",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -18,8 +18,8 @@
     "@radix-ui/react-toast": "^1.1.4",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
-    "jazz-react": "workspace:0.8.29",
-    "jazz-tools": "workspace:0.8.29",
+    "jazz-react": "workspace:0.8.32",
+    "jazz-tools": "workspace:0.8.32",
     "lucide-react": "^0.274.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

examples/onboarding/CHANGELOG.md

@@ -1,5 +1,30 @@
 # jazz-example-onboarding
 
+## 0.0.11
+
+### Patch Changes
+
+- Updated dependencies [df42b2b]
+  - jazz-tools@0.8.32
+  - jazz-react@0.8.32
+  - jazz-browser-media-images@0.8.32
+
+## 0.0.10
+
+### Patch Changes
+
+- jazz-react@0.8.31
+- jazz-tools@0.8.31
+- jazz-browser-media-images@0.8.31
+
+## 0.0.9
+
+### Patch Changes
+
+- jazz-react@0.8.30
+- jazz-tools@0.8.30
+- jazz-browser-media-images@0.8.30
+
 ## 0.0.8
 
 ### Patch Changes

examples/onboarding/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jazz-example-onboarding",
   "private": true,
-  "version": "0.0.8",
+  "version": "0.0.11",
   "type": "module",
   "scripts": {
     "dev": "vite",

examples/password-manager/CHANGELOG.md

@@ -1,5 +1,27 @@
 # jazz-password-manager
 
+## 0.0.29
+
+### Patch Changes
+
+- Updated dependencies [df42b2b]
+  - jazz-tools@0.8.32
+  - jazz-react@0.8.32
+
+## 0.0.28
+
+### Patch Changes
+
+- jazz-react@0.8.31
+- jazz-tools@0.8.31
+
+## 0.0.27
+
+### Patch Changes
+
+- jazz-react@0.8.30
+- jazz-tools@0.8.30
+
 ## 0.0.26
 
 ### Patch Changes

examples/password-manager/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jazz-password-manager",
   "private": true,
-  "version": "0.0.26",
+  "version": "0.0.29",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -12,8 +12,8 @@
     "clean-install": "rm -rf node_modules pnpm-lock.yaml && pnpm install"
   },
   "dependencies": {
-    "jazz-react": "workspace:0.8.29",
-    "jazz-tools": "workspace:0.8.29",
+    "jazz-react": "workspace:0.8.32",
+    "jazz-tools": "workspace:0.8.32",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.41.5",

examples/pets/CHANGELOG.md

@@ -1,5 +1,30 @@
 # jazz-example-pets
 
+## 0.0.127
+
+### Patch Changes
+
+- Updated dependencies [df42b2b]
+  - jazz-tools@0.8.32
+  - jazz-react@0.8.32
+  - jazz-browser-media-images@0.8.32
+
+## 0.0.126
+
+### Patch Changes
+
+- jazz-react@0.8.31
+- jazz-tools@0.8.31
+- jazz-browser-media-images@0.8.31
+
+## 0.0.125
+
+### Patch Changes
+
+- jazz-react@0.8.30
+- jazz-tools@0.8.30
+- jazz-browser-media-images@0.8.30
+
 ## 0.0.124
 
 ### Patch Changes

examples/pets/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jazz-example-pets",
   "private": true,
-  "version": "0.0.124",
+  "version": "0.0.127",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -19,9 +19,9 @@
     "@radix-ui/react-toast": "^1.1.4",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
-    "jazz-browser-media-images": "workspace:0.8.29",
-    "jazz-react": "workspace:0.8.29",
-    "jazz-tools": "workspace:0.8.29",
+    "jazz-browser-media-images": "workspace:0.8.32",
+    "jazz-react": "workspace:0.8.32",
+    "jazz-tools": "workspace:0.8.32",
     "lucide-react": "^0.274.0",
     "qrcode": "^1.5.3",
     "react": "^18.2.0",
@@ -41,7 +41,7 @@
     "@vitejs/plugin-react-swc": "^3.3.2",
     "autoprefixer": "^10.4.14",
     "is-ci": "^3.0.1",
-    "jazz-run": "workspace:0.8.29",
+    "jazz-run": "workspace:0.8.32",
     "postcss": "^8.4.27",
     "tailwindcss": "3.3.2",
     "typescript": "^5.3.3",

examples/todo-vue/CHANGELOG.md

@@ -1,5 +1,30 @@
 # todo-vue
 
+## 0.0.13
+
+### Patch Changes
+
+- Updated dependencies [df42b2b]
+  - jazz-tools@0.8.32
+  - jazz-browser@0.8.32
+  - jazz-vue@0.8.20
+
+## 0.0.12
+
+### Patch Changes
+
+- jazz-browser@0.8.31
+- jazz-tools@0.8.31
+- jazz-vue@0.8.19
+
+## 0.0.11
+
+### Patch Changes
+
+- jazz-browser@0.8.30
+- jazz-tools@0.8.30
+- jazz-vue@0.8.18
+
 ## 0.0.10
 
 ### Patch Changes

examples/todo-vue/package.json

@@ -1,6 +1,6 @@
 {
   "name": "todo-vue",
-  "version": "0.0.10",
+  "version": "0.0.13",
   "private": true,
   "type": "module",
   "scripts": {

examples/todo/CHANGELOG.md

@@ -1,5 +1,27 @@
 # jazz-example-todo
 
+## 0.0.126
+
+### Patch Changes
+
+- Updated dependencies [df42b2b]
+  - jazz-tools@0.8.32
+  - jazz-react@0.8.32
+
+## 0.0.125
+
+### Patch Changes
+
+- jazz-react@0.8.31
+- jazz-tools@0.8.31
+
+## 0.0.124
+
+### Patch Changes
+
+- jazz-react@0.8.30
+- jazz-tools@0.8.30
+
 ## 0.0.123
 
 ### Patch Changes

examples/todo/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jazz-example-todo",
   "private": true,
-  "version": "0.0.123",
+  "version": "0.0.126",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -16,8 +16,8 @@
     "@radix-ui/react-toast": "^1.1.4",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
-    "jazz-react": "workspace:0.8.29",
-    "jazz-tools": "workspace:0.8.29",
+    "jazz-react": "workspace:0.8.32",
+    "jazz-tools": "workspace:0.8.32",
     "lucide-react": "^0.274.0",
     "qrcode": "^1.5.3",
     "react": "^18.2.0",

homepage/design-system/package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "@evilmartians/harmony": "^1.0.0",
     "@headlessui/react": "^2.2.0",
+    "@icons-pack/react-simple-icons": "^9.1.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "lucide-react": "^0.436.0",
@@ -19,6 +20,7 @@
     "next-themes": "^0.2.1",
     "react": "^18",
     "react-dom": "^18",
+    "resend": "^4.0.0",
     "tailwind-merge": "^1.14.0",
     "tailwindcss-animate": "^1.0.7"
   },

homepage/design-system/src/app/components/atoms/Button.tsx

@@ -1,5 +1,7 @@
 import { clsx } from "clsx";
+import { LucideIcon } from "lucide-react";
 import Link from "next/link";
+import { Spinner } from "./Spinner";
 
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   children: React.ReactNode;
@@ -7,6 +9,19 @@ interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   size?: "sm" | "md" | "lg";
   href?: string;
   newTab?: boolean;
+  icon?: LucideIcon;
+  loading?: boolean;
+  loadingText?: string;
+}
+
+function ButtonIcon({ icon: Icon, loading }: ButtonProps) {
+  if (!Icon) return null;
+
+  const className = "size-5";
+
+  if (loading) return <Spinner className={className} />;
+
+  return <Icon strokeWidth={1.5} className={className} />;
 }
 
 export function Button(props: ButtonProps) {
@@ -18,6 +33,7 @@ export function Button(props: ButtonProps) {
     href,
     disabled,
     newTab,
+    loadingText,
   } = props;
 
   const sizeClasses = {
@@ -37,6 +53,7 @@ export function Button(props: ButtonProps) {
   const classNames = clsx(
     className,
     "inline-flex items-center justify-center gap-2 rounded-lg text-center transition-colors",
+    "disabled:pointer-events-none disabled:opacity-70",
     sizeClasses[size],
     variantClasses[variant],
     disabled && "opacity-50 cursor-not-allowed pointer-events-none",
@@ -49,14 +66,21 @@ export function Button(props: ButtonProps) {
         target={newTab ? "_blank" : undefined}
         className={classNames}
       >
+        <ButtonIcon {...props} />
         {children}
       </Link>
     );
   }
 
   return (
-    <button {...props} className={classNames}>
-      {children}
+    <button
+      {...props}
+      disabled={props.disabled || props.loading}
+      className={classNames}
+    >
+      <ButtonIcon {...props} />
+
+      {props.loading && props.loadingText ? props.loadingText : children}
     </button>
   );
 }

homepage/design-system/src/app/components/atoms/Card.tsx

@@ -0,0 +1,12 @@
+import { clsx } from "clsx";
+
+export function Card({
+  children,
+  className,
+}: { children: React.ReactNode; className?: string }) {
+  return (
+    <div className={clsx(className, "border rounded-xl shadow-sm")}>
+      {children}
+    </div>
+  );
+}

homepage/design-system/src/app/components/atoms/GridCard.tsx

@@ -1,16 +1,16 @@
 import clsx from "clsx";
 import { ReactNode } from "react";
+import { Card } from "../atoms/Card";
 
 export function GridCard(props: { children: ReactNode; className?: string }) {
   return (
-    <div
+    <Card
       className={clsx(
         "col-span-2 p-4 [&>h4]:mt-0 [&>h3]:mt-0 [&>:last-child]:mb-0",
-        "border rounded-xl shadow-sm",
         props.className,
       )}
     >
       {props.children}
-    </div>
+    </Card>
   );
 }

homepage/design-system/src/app/components/atoms/Spinner.tsx

@@ -0,0 +1,26 @@
+import clsx from "clsx";
+
+export function Spinner({ className }: { className?: string }) {
+  return (
+    <svg
+      className={clsx(className, "animate-spin")}
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+    >
+      <circle
+        className="opacity-25"
+        cx="12"
+        cy="12"
+        r="10"
+        stroke="currentColor"
+        stroke-width="4"
+      ></circle>
+      <path
+        className="opacity-75"
+        fill="currentColor"
+        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+      ></path>
+    </svg>
+  );
+}

homepage/design-system/src/app/components/molecules/FeatureCard.tsx

@@ -0,0 +1,36 @@
+import clsx from "clsx";
+import { LucideIcon } from "lucide-react";
+import { Card } from "../atoms/Card";
+import { Prose } from "./Prose";
+
+export function FeatureCard({
+  label,
+  icon: Icon,
+  explanation,
+  children,
+  className,
+}: {
+  label: React.ReactNode;
+  icon?: LucideIcon;
+  explanation?: React.ReactNode;
+  children?: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <Card className={clsx(className, "p-4")}>
+      {Icon && (
+        <Icon
+          className="size-8 text-blue p-1.5 rounded-lg bg-blue-50 dark:text-blue-500 dark:bg-stone-900 mb-2.5 md:size-10"
+          strokeWidth={1.5}
+          strokeLinecap="butt"
+          size={80}
+        />
+      )}
+      <div className="text-stone-900 font-medium md:text-base dark:text-stone-100 mb-2">
+        {label}
+      </div>
+      {explanation && <Prose>{explanation}</Prose>}
+      {children}
+    </Card>
+  );
+}

homepage/design-system/src/app/components/molecules/GappedGrid.tsx

@@ -6,15 +6,23 @@ export function GappedGrid({
   children,
   className,
   title,
+  cols = 3,
 }: {
   children: ReactNode;
   className?: string;
   title?: string;
+  cols?: 3 | 4;
 }) {
+  const colsClassName =
+    cols === 3
+      ? "md:grid-cols-4 lg:grid-cols-6"
+      : "sm:grid-cols-2 lg:grid-cols-4";
+
   return (
     <div
       className={clsx(
-        "grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4 lg:gap-8",
+        "grid grid-cols-2 gap-4 lg:gap-8",
+        colsClassName,
         "items-stretch",
         className,
       )}

homepage/design-system/src/app/components/molecules/LabelledFeatureIcon.tsx

@@ -1,37 +0,0 @@
-import clsx from "clsx";
-import { LucideIcon } from "lucide-react";
-import { Prose } from "./Prose";
-
-export function LabelledFeatureIcon({
-  label,
-  icon: Icon,
-  explanation,
-  className,
-}: {
-  label: string;
-  icon: LucideIcon;
-  explanation: React.ReactNode;
-  className?: string;
-}) {
-  return (
-    <div
-      className={clsx(
-        className,
-        "text-base",
-        "rounded-xl",
-        "border p-4 shadow-sm",
-      )}
-    >
-      <Icon
-        className="size-8 text-blue p-1.5 rounded-lg bg-blue-50 dark:text-blue-500 dark:bg-stone-900 mb-2.5 md:size-10"
-        strokeWidth={1.5}
-        strokeLinecap="butt"
-        size={80}
-      />
-      <div className="text-stone-900 font-medium md:text-base dark:text-stone-100 mb-2">
-        {label}
-      </div>
-      <Prose>{explanation}</Prose>
-    </div>
-  );
-}

homepage/design-system/src/app/components/organisms/Footer.tsx

@@ -5,6 +5,8 @@ import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { ReactNode } from "react";
 import { ThemeToggle } from "../molecules/ThemeToggle";
+import { NewsletterForm } from "./NewsletterForm";
+import { SocialLinks, SocialLinksProps } from "./SocialLinks";
 
 type FooterSection = {
   title: string;
@@ -19,6 +21,7 @@ type FooterProps = {
   logo: ReactNode;
   companyName: string;
   sections: FooterSection[];
+  socials: SocialLinksProps;
 };
 
 function Copyright({
@@ -35,38 +38,47 @@ function Copyright({
   );
 }
 
-export function Footer({ logo, companyName, sections }: FooterProps) {
+export function Footer({ logo, companyName, sections, socials }: FooterProps) {
   return (
-    <footer className="w-full border-t bg-stone-100 mt-12 md:mt-20 dark:bg-stone-925">
-      <div className="container py-8 md:py-16 grid gap-y-8 grid-cols-12">
-        <div className="flex flex-col justify-between col-span-full md:col-span-4">
-          {logo}
-
-          <Copyright className="hidden md:block" companyName={companyName} />
-        </div>
-
-        {sections.map((section, index) => (
-          <div
-            key={index}
-            className="flex flex-col gap-2 text-sm col-span-4 sm:col-span-4 md:col-span-2"
-          >
-            <h2 className="font-medium">{section.title}</h2>
-            {section.links.map((link, linkIndex) => (
-              <FooterLink key={linkIndex} href={link.href} newTab={link.newTab}>
-                {link.label}
-              </FooterLink>
-            ))}
+    <footer className="w-full border-t py-8 mt-12 md:mt-20">
+      <div className="container grid gap-8 md:gap-12">
+        <div className=" grid gap-y-8 grid-cols-12">
+          <div className="flex flex-col gap-6 justify-between col-span-full md:col-span-7">
+            {logo}
+            <NewsletterForm />
           </div>
-        ))}
 
-        <div className="hidden md:flex justify-end items-end md:col-span-2">
-          <ThemeToggle />
+          {sections.map((section, index) => (
+            <div
+              key={index}
+              className="flex flex-col gap-2 text-sm col-span-6 md:col-span-2"
+            >
+              <h2 className="font-medium">{section.title}</h2>
+              {section.links.map((link, linkIndex) => (
+                <FooterLink
+                  key={linkIndex}
+                  href={link.href}
+                  newTab={link.newTab}
+                >
+                  {link.label}
+                </FooterLink>
+              ))}
+            </div>
+          ))}
+
+          <div className="hidden md:flex justify-end items-end md:col-span-1">
+            <ThemeToggle />
+          </div>
         </div>
 
-        <Copyright
-          className="col-span-full md:hidden"
-          companyName={companyName}
-        />
+        <div className="flex flex-col justify-between gap-y-6 gap-3 md:flex-row">
+          <Copyright companyName={companyName} />
+
+          <SocialLinks
+            {...socials}
+            className="order-first md:order-last"
+          ></SocialLinks>
+        </div>
       </div>
     </footer>
   );

homepage/design-system/src/app/components/organisms/Nav.tsx

@@ -14,6 +14,7 @@ import { usePathname } from "next/navigation";
 import { ReactNode, useEffect, useLayoutEffect, useRef, useState } from "react";
 import { BreadCrumb } from "../molecules/Breadcrumb";
 import { ThemeToggle } from "../molecules/ThemeToggle";
+import { SocialLinks, SocialLinksProps } from "./SocialLinks";
 
 type NavItemProps = {
   href: string;
@@ -30,6 +31,7 @@ type NavProps = {
   items: NavItemProps[];
   docNav?: ReactNode;
   cta?: ReactNode;
+  socials?: SocialLinksProps;
 };
 
 function NavItem({
@@ -110,7 +112,7 @@ function NavItem({
   );
 }
 
-export function MobileNav({ mainLogo, items, docNav, cta }: NavProps) {
+export function MobileNav({ mainLogo, items, docNav, cta, socials }: NavProps) {
   const [menuOpen, setMenuOpen] = useState(false);
   const [searchOpen, setSearchOpen] = useState(false);
   const searchRef = useRef<HTMLInputElement>(null);
@@ -170,13 +172,8 @@ export function MobileNav({ mainLogo, items, docNav, cta }: NavProps) {
             >
               {mainLogo}
             </NavLinkLogo>
-            {items
-              .filter((item) => "icon" in item)
-              .map((item, i) => (
-                <NavLinkLogo key={i} href={item.href} newTab={item.newTab}>
-                  {item.icon}
-                </NavLinkLogo>
-              ))}
+
+            <SocialLinks className="px-2 gap-2" {...socials} />
           </div>
 
           {pathname.startsWith("/docs") && docNav && (
@@ -310,6 +307,8 @@ export function Nav(props: NavProps) {
             />
           ))}
 
+          <SocialLinks {...props.socials} />
+
           {cta}
         </PopoverGroup>
       </div>

homepage/design-system/src/app/components/organisms/NewsletterForm.tsx

@@ -1,30 +1,37 @@
 "use client";
 
-import { subscribe } from "@/app/actions/resend";
-import { Button } from "gcmp-design-system/src/app/components/atoms/Button";
-import { Input } from "gcmp-design-system/src/app/components/molecules/Input";
-import { CheckIcon } from "lucide-react";
+import { CheckIcon, MailIcon } from "lucide-react";
 import { useState } from "react";
 import { ErrorResponse } from "resend";
+import { subscribe } from "../../../actions/resend";
+import { Button } from "../atoms/Button";
+import { Input } from "../molecules/Input";
 
 export function NewsletterForm() {
   const [email, setEmail] = useState("");
-  const [subscribed, setSubscribed] = useState(false);
+  // const [subscribed, setSubscribed] = useState(false);
   const [error, setError] = useState<ErrorResponse | undefined>();
 
+  const [state, setState] = useState<"ready" | "loading" | "success" | "error">(
+    "ready",
+  );
+
   const submit = async (e: React.FormEvent) => {
     e.preventDefault();
 
+    setState("loading");
+
     const res = await subscribe(email);
 
     if (res.error) {
       setError(res.error);
+      setState("error");
     } else {
-      setSubscribed(true);
+      setState("success");
     }
   };
 
-  if (subscribed) {
+  if (state === "success") {
     return (
       <div className="flex gap-3 items-center">
         <CheckIcon className="text-green-500" size={16} />
@@ -33,12 +40,12 @@ export function NewsletterForm() {
     );
   }
 
-  if (error) {
+  if (state === "error" && error?.message) {
     return <p className="text-red-700">Error: {error.message}</p>;
   }
 
   return (
-    <form action="" onSubmit={submit} className="flex gap-x-4 w-120 max-w-xl">
+    <form action="" onSubmit={submit} className="flex gap-x-4 w-120 max-w-md">
       <Input
         id="email-address"
         name="email"
@@ -51,7 +58,13 @@ export function NewsletterForm() {
         className="flex-1 label:sr-only"
         label="Email address"
       />
-      <Button type="submit" variant="secondary">
+      <Button
+        type="submit"
+        variant="secondary"
+        loadingText="Subscribing..."
+        loading={state === "loading"}
+        icon={MailIcon}
+      >
         Subscribe
       </Button>
     </form>

homepage/design-system/src/app/components/organisms/SocialLinks.tsx

@@ -0,0 +1,48 @@
+import { SiDiscord, SiGithub, SiX } from "@icons-pack/react-simple-icons";
+import { clsx } from "clsx";
+
+export interface SocialLinksProps {
+  github?: string;
+  x?: string;
+  discord?: string;
+}
+
+const socials = [
+  {
+    name: "Github",
+    icon: SiGithub,
+    key: "github",
+  },
+  {
+    name: "Discord",
+    icon: SiDiscord,
+    key: "discord",
+  },
+  {
+    name: "X",
+    icon: SiX,
+    key: "x",
+  },
+];
+
+export function SocialLinks(props: SocialLinksProps & { className?: string }) {
+  return (
+    <div className={clsx(props.className, "flex gap-6 ")}>
+      {socials.map(
+        (social) =>
+          props[social.key as keyof SocialLinksProps] && (
+            <a
+              key={social.key}
+              href={props[social.key as keyof SocialLinksProps]}
+              target="_blank"
+              rel="noreferrer"
+              className="flex items-center gap-2 hover:text-stone-900 hover:dark:text-white"
+            >
+              <social.icon className="w-5" />
+              <span className="sr-only">{social.name}</span>
+            </a>
+          ),
+      )}
+    </div>
+  );
+}

homepage/design-system/src/app/page.tsx

@@ -1,4 +1,5 @@
 import { Prose } from "@components/molecules/Prose";
+import { NewsletterForm } from "@components/organisms/NewsletterForm";
 
 export default function Home() {
   return (
@@ -63,6 +64,12 @@ export default function Home() {
           </Prose>
         </div>
       </div>
+
+      <h2>Newsletter Subscription Form</h2>
+
+      <div className="p-3 border">
+        <NewsletterForm />
+      </div>
     </main>
   );
 }

homepage/gcmp/app/news/page.tsx

@@ -1,7 +1,7 @@
-import { NewsletterForm } from "@/components/NewsletterForm";
 import { Posts } from "@/components/blog/Posts";
 import { HeroHeader } from "gcmp-design-system/src/app/components/molecules/HeroHeader";
 import { Prose } from "gcmp-design-system/src/app/components/molecules/Prose";
+import { NewsletterForm } from "gcmp-design-system/src/app/components/organisms/NewsletterForm";
 import Link from "next/link";
 
 export const metadata = {

homepage/gcmp/app/team/page.tsx

@@ -69,6 +69,15 @@ const team: Array<TeamMember> = [
     github: "marinoska",
     image: "marina.jpeg",
   },
+  {
+    name: "Giordano Ricci",
+    titles: ["Full-Stack Dev", "DevOps"],
+    location: "Lisbon, Portugal ",
+    linkedin: "giordanoricci",
+    github: "Elfo404",
+    website: "https://giordanoricci.com",
+    image: "gio.jpg",
+  },
 ];
 
 function SocialLink({

homepage/gcmp/package.json

@@ -28,7 +28,6 @@
     "next": "14.2.15",
     "react": "^18",
     "react-dom": "^18",
-    "resend": "^4.0.0",
     "shiki": "^0.14.6",
     "shiki-twoslash": "^3.1.2",
     "tailwind-merge": "^1.14.0",

homepage/homepage/app/api-reference/layout.tsx

@@ -15,7 +15,7 @@ export default function Layout({
 }) {
   return (
     <DocsLayout nav={<ApiNav />}>
-      <Prose className="py-8">{children}</Prose>
+      <Prose className="py-8 [&_*]:scroll-mt-[8rem]">{children}</Prose>
     </DocsLayout>
   );
 }

homepage/homepage/app/docs/[...slug]/authentication/auth-methods.mdx

@@ -0,0 +1,111 @@
+import { CodeGroup } from "@/components/forMdx";
+
+# Authentication methods
+
+Jazz supports a variety of authentication methods, which you can use to authenticate users in your app.
+
+- Passphrase (built-in)
+- Passkey (built-in)
+- Clerk ([React](https://www.npmjs.com/package/jazz-react-auth-clerk) and [vanilla](https://www.npmjs.com/package/jazz-browser-auth-clerk) packages)
+
+## Passphrase
+
+Passphrase authentication allows users to create a new account or log in with an existing one by providing a passphrase.
+
+Passphrase authentication is supported out of the box and imported from `jazz-react`.
+
+### How to use
+
+1. Setup up Jazz as described in the [React setup guide](/docs/project-setup/react).
+
+2. Use the `usePassphraseAuth` hook to authenticate.
+
+<CodeGroup>
+```ts
+import { usePassphraseAuth } from "jazz-react";
+
+// ...
+
+const [passphraseAuth, passphraseState] = usePassphraseAuth({ appName });
+```
+</CodeGroup>
+
+## Passkey
+
+Passkey authentication allows users to create a new account or log in with an existing one by providing a passkey.
+
+Passkey authentication is supported out of the box.
+
+We have a [minimal example of a passkey authentication setup](https://github.com/garden-co/jazz/tree/main/examples/minimal-auth-passkey).
+
+### How to use
+
+1. Setup up Jazz as described in the [React setup guide](/docs/project-setup/react).
+
+2. Use the `usePasskeyAuth` hook to authenticate.
+
+<CodeGroup>
+```ts
+import { usePasskeyAuth } from "jazz-react";
+
+// ...
+
+const [passkeyAuth, passkeyState] = usePasskeyAuth({ appName });
+```
+</CodeGroup>
+
+## Clerk
+
+We have a React package `jazz-react-auth-clerk` to add Clerk authentication to your app. 
+
+We have a [minimal example of a Clerk authentication setup](https://github.com/garden-co/jazz/tree/main/examples/minimal-auth-clerk).
+
+### How to use
+
+1. Setup up Jazz as described in the [React setup guide](/docs/project-setup/react).
+
+2. Install Clerk as described in the [Clerk docs](https://clerk.com/docs/components/overview).
+
+3. Then add the appropriate package to your project (e.g. `jazz-react-auth-clerk`).
+
+<CodeGroup>
+```bash
+pnpm install jazz-react-auth-clerk
+```
+</CodeGroup>
+
+4. Provide a Clerk instance to the `useJazzClerkAuth` hook.
+
+<CodeGroup>
+```tsx
+import { useClerk, SignInButton } from "@clerk/clerk-react";
+import { useJazzClerkAuth } from "jazz-react-auth-clerk";
+
+// ...
+
+function JazzAndAuth({ children }: { children: React.ReactNode }) {
+  const clerk = useClerk();
+  const [auth, state] = useJazzClerkAuth(clerk);
+
+  return (
+    <>
+      {clerk.user && auth ? (
+        <Jazz.Provider auth={auth}></Jazz.Provider>
+      ) : (
+        <SignInButton />
+      )}
+    </>
+  );
+}
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <ClerkProvider publishableKey={PUBLISHABLE_KEY} afterSignOutUrl="/">
+      <JazzAndAuth>
+        <App />
+      </JazzAndAuth>
+    </ClerkProvider>
+  </StrictMode>,
+);
+```
+</CodeGroup>

homepage/homepage/components/docs/packageDocs.tsx

@@ -70,7 +70,11 @@ function RenderPackageChild({
     return child.getAllSignatures().map((signature, i) => {
       const paramTypes = printParamsWithTypes(signature);
       return (
-        <div key={i} id={child.name} className="not-prose mt-4">
+        <div
+          key={i}
+          id={child.name}
+          className="not-prose mt-4 p-3 rounded bg-stone-50 dark:bg-stone-925"
+        >
           {
             <Highlight hide={[0, 2]}>
               {`function \n${printSimpleSignature(child, signature) + ":"}\n {}`}
@@ -171,10 +175,7 @@ function RenderClassOrInterface({
         </div>
       )}
       {classOrInterface.categories?.map((category) => (
-        <div
-          className="flex flex-col divide-y divide-stone-200 dark:divide-stone-900"
-          key={category.title}
-        >
+        <div className="flex flex-col mt-6 first:mt-0" key={category.title}>
           <PropCategory
             name={category.title}
             description={renderSummary(

homepage/homepage/components/docs/tags.tsx

@@ -80,15 +80,15 @@ export function ClassOrInterface({
           className="inline-flex items-center gap-2 lg:-ml-[22px]"
         >
           <LinkIcon size={14} className="hidden lg:inline" />
-          <h3>
+          <h3 className="text-lg lg:text-xl">
             <Highlight>
               {(isInterface ? "interface " : "class ") + name + typeParameters}
             </Highlight>
           </h3>
         </Link>
       </div>
-      <div className="flex flex-col gap-5">
-        <div>{doc}</div>
+      <div className="flex flex-col gap-5 mt-5">
+        {doc && <div>{doc}</div>}
         <div>{children}</div>
       </div>
     </div>
@@ -119,7 +119,7 @@ export function PropDecl({
   example?: ReactNode;
 }) {
   return (
-    <div className="text-sm py-3 flex flex-col gap-5">
+    <div className="text-sm flex flex-col gap-3 my-2 p-3 rounded bg-stone-50 dark:bg-stone-925">
       {(name || type) && (
         <div>
           {name && <Highlight>{name + ":"}</Highlight>}
@@ -157,7 +157,7 @@ export function FnDecl({
   example: ReactNode;
 }) {
   return (
-    <div className="text-sm py-3 flex flex-col gap-5">
+    <div className="text-sm flex flex-col gap-3 my-2 p-3 rounded bg-stone-50 dark:bg-stone-925">
       <div className="flex flex-col gap-2">
         <div>
           {<Highlight>{signature + ":"}</Highlight>}{" "}
@@ -201,7 +201,7 @@ export function PropCategory({
 }) {
   return (
     <>
-      <div className="col-span-6 uppercase font-medium tracking-widest text-stone-500 text-xs py-3">
+      <div className="col-span-6 py-3 font-display font-semibold text-lg text-stone-900 dark:text-white">
         {name}
       </div>
       {description && <PropDecl doc={description} example={example} />}

homepage/homepage/components/footer.tsx

@@ -1,3 +1,4 @@
+import { socials } from "@/lib/socials";
 import { GcmpLogo } from "gcmp-design-system/src/app/components/atoms/logos/GcmpLogo";
 import { Footer } from "gcmp-design-system/src/app/components/organisms/Footer";
 
@@ -6,6 +7,7 @@ export function JazzFooter() {
     <Footer
       logo={<GcmpLogo monochrome className="w-32" />}
       companyName="Garden Computing, Inc."
+      socials={socials}
       sections={[
         {
           title: "Resources",
@@ -15,26 +17,6 @@ export function JazzFooter() {
             { href: "/docs", label: "Docs" },
           ],
         },
-        {
-          title: "Community",
-          links: [
-            {
-              href: "https://github.com/gardencmp/jazz",
-              label: "GitHub",
-              newTab: true,
-            },
-            {
-              href: "https://discord.gg/utDMjHYg42",
-              label: "Discord",
-              newTab: true,
-            },
-            {
-              href: "https://x.com/jazz_tools",
-              label: "X",
-              newTab: true,
-            },
-          ],
-        },
         {
           title: "News",
           links: [

homepage/homepage/components/home/ChatDemoSection.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { Card } from "gcmp-design-system/src/app/components/atoms/Card";
 import { H3 } from "gcmp-design-system/src/app/components/atoms/Headings";
 import { GappedGrid } from "gcmp-design-system/src/app/components/molecules/GappedGrid";
 import { SectionHeader } from "gcmp-design-system/src/app/components/molecules/SectionHeader";
@@ -22,7 +23,7 @@ function Iframe(
   const { src, user } = props;
 
   return (
-    <div className="relative col-span-2 w-full border rounded-xl shadow-sm overflow-hidden lg:col-span-2 dark:bg-black">
+    <Card className="relative col-span-2 w-full overflow-hidden lg:col-span-2 dark:bg-black">
       <iframe
         {...props}
         src={src}
@@ -31,7 +32,7 @@ function Iframe(
         height="390"
         allowFullScreen
       />
-    </div>
+    </Card>
   );
 }
 

homepage/homepage/components/home/CollaborationFeaturesSection.tsx

@@ -1,3 +1,4 @@
+import { Card } from "gcmp-design-system/src/app/components/atoms/Card";
 import { GappedGrid } from "gcmp-design-system/src/app/components/molecules/GappedGrid";
 import { Prose } from "gcmp-design-system/src/app/components/molecules/Prose";
 import { SectionHeader } from "gcmp-design-system/src/app/components/molecules/SectionHeader";
@@ -42,8 +43,8 @@ export function CollaborationFeaturesSection() {
 
       <GappedGrid>
         {data.map(({ title, description, codeSample: CodeSample }) => (
-          <div
-            className="col-span-2 border rounded-xl shadow-sm pt-4 px-4 flex flex-col gap-3"
+          <Card
+            className="col-span-2 pt-4 px-4 flex flex-col gap-3"
             key={title}
           >
             <div>
@@ -57,7 +58,7 @@ export function CollaborationFeaturesSection() {
             <pre className="flex-1 text-sm border-t border-x rounded-t-lg bg-stone-50 dark:bg-stone-925">
               <CodeSample />
             </pre>
-          </div>
+          </Card>
         ))}
       </GappedGrid>
     </div>

homepage/homepage/components/home/ComingSoonSection.tsx

@@ -3,9 +3,8 @@ import CursorsAndCaretsDescription from "@/app/(home)/toolkit/cursorsAndCarets.m
 import TwoWaySyncDescription from "@/app/(home)/toolkit/twoWaySync.mdx";
 import VideoPresenceCallsDescription from "@/app/(home)/toolkit/videoPresenceCalls.mdx";
 import { CodeRef } from "gcmp-design-system/src/app/components/atoms/CodeRef";
-import { GridCard } from "gcmp-design-system/src/app/components/atoms/GridCard";
-import { H3 } from "gcmp-design-system/src/app/components/atoms/Headings";
 import { P } from "gcmp-design-system/src/app/components/atoms/Paragraph";
+import { FeatureCard } from "gcmp-design-system/src/app/components/molecules/FeatureCard";
 import { GappedGrid } from "gcmp-design-system/src/app/components/molecules/GappedGrid";
 import { Prose } from "gcmp-design-system/src/app/components/molecules/Prose";
 import { SectionHeader } from "gcmp-design-system/src/app/components/molecules/SectionHeader";
@@ -15,39 +14,40 @@ export function ComingSoonSection() {
     <div>
       <SectionHeader title="More features coming soon" />
 
-      <GappedGrid>
-        <GridCard>
-          <H3>Cursors & carets</H3>
-          <P className="text-lg">Ready-made spatial presence.</P>
+      <GappedGrid cols={4}>
+        <FeatureCard className="p-4" label={<h3>Cursors & carets</h3>}>
+          <P>Ready-made spatial presence.</P>
           <Prose size="sm">
             <CursorsAndCaretsDescription />
           </Prose>
-        </GridCard>
+        </FeatureCard>
 
-        <GridCard>
-          <H3>Two-way sync to your DB</H3>
-          <P className="text-lg">Add Jazz to an existing app.</P>
+        <FeatureCard className="p-4" label={<h3>Two-way sync to your DB</h3>}>
+          <P>Add Jazz to an existing app.</P>
           <Prose size="sm">
             <TwoWaySyncDescription />
           </Prose>
-        </GridCard>
+        </FeatureCard>
 
-        <GridCard>
-          <H3>Video presence & calls</H3>
-          <P className="text-lg">Stream and record audio & video.</P>
+        <FeatureCard className="p-4" label={<h3>Video presence & calls</h3>}>
+          <P>Stream and record audio & video.</P>
           <Prose size="sm">
             <VideoPresenceCallsDescription />
           </Prose>
-        </GridCard>
+        </FeatureCard>
 
-        <GridCard>
-          <H3>
-            <CodeRef>CoPlainText</CodeRef> & <CodeRef>CoRichText</CodeRef>
-          </H3>
+        <FeatureCard
+          className="p-4"
+          label={
+            <h3>
+              <CodeRef>CoPlainText</CodeRef> & <CodeRef>CoRichText</CodeRef>
+            </h3>
+          }
+        >
           <Prose size="sm">
             <CoPlainTextDescription />
           </Prose>
-        </GridCard>
+        </FeatureCard>
       </GappedGrid>
     </div>
   );

homepage/homepage/components/home/EarlyAdopterSection.tsx

@@ -1,10 +1,11 @@
 import { Button } from "gcmp-design-system/src/app/components/atoms/Button";
+import { Card } from "gcmp-design-system/src/app/components/atoms/Card";
 import { H2 } from "gcmp-design-system/src/app/components/atoms/Headings";
 import { Prose } from "gcmp-design-system/src/app/components/molecules/Prose";
 
 export function EarlyAdopterSection() {
   return (
-    <div className="border rounded-xl shadow-sm p-4 md:py-16">
+    <Card className="p-4 md:py-16">
       <div className="lg:max-w-3xl md:text-center mx-auto space-y-6">
         <p className="uppercase text-blue tracking-widest text-sm font-medium dark:text-stone-400">
           Become an early adopter
@@ -31,6 +32,6 @@ export function EarlyAdopterSection() {
           </Button>
         </div>
       </div>
-    </div>
+    </Card>
   );
 }

homepage/homepage/components/home/EncryptionSection.tsx

@@ -1,3 +1,4 @@
+import { Card } from "gcmp-design-system/src/app/components/atoms/Card";
 import { H3 } from "gcmp-design-system/src/app/components/atoms/Headings";
 import { Prose } from "gcmp-design-system/src/app/components/molecules/Prose";
 import { LockKeyholeIcon } from "lucide-react";
@@ -64,7 +65,7 @@ function Illustration() {
 
 export function EncryptionSection() {
   return (
-    <div className="border rounded-xl bg-white shadow-sm overflow-hidden dark:bg-stone-925">
+    <Card className="overflow-hidden dark:bg-stone-925">
       <div className="flex grid md:grid-cols-3 md:gap-3">
         <div className="md:col-span-2 px-4 pb-4 md:p-8">
           <H3 className="mb-0 text-balance">
@@ -86,6 +87,6 @@ export function EncryptionSection() {
 
         <Illustration />
       </div>
-    </div>
+    </Card>
   );
 }

homepage/homepage/components/home/FeaturesSection.tsx

@@ -1,6 +1,7 @@
 import { ServerWorkersDiagram } from "@/components/home/ServerWorkersDiagram";
 import { ClerkLogo } from "@/components/icons/ClerkLogo";
 import { Button } from "gcmp-design-system/src/app/components/atoms/Button";
+import { Card } from "gcmp-design-system/src/app/components/atoms/Card";
 import { H3 } from "gcmp-design-system/src/app/components/atoms/Headings";
 import { Prose } from "gcmp-design-system/src/app/components/molecules/Prose";
 import { SectionHeader } from "gcmp-design-system/src/app/components/molecules/SectionHeader";
@@ -124,10 +125,7 @@ export function FeaturesSection() {
 
       <div className="grid grid-cols-2 sm:grid-cols-4 md:grid-cols-6 gap-4 lg:gap-8">
         {features.map(({ title, icon: Icon, description, illustration }) => (
-          <div
-            key={title}
-            className="col-span-2 border rounded-xl shadow-sm overflow-hidden"
-          >
+          <Card key={title} className="col-span-2 overflow-hidden">
             <div className="h-48 flex w-full items-center justify-center">
               {illustration}
             </div>
@@ -137,7 +135,7 @@ export function FeaturesSection() {
               </h3>
               <Prose size="sm">{description}</Prose>
             </div>
-          </div>
+          </Card>
         ))}
 
         <div className="border p-4 sm:p-8 shadow-sm rounded-xl col-span-2 sm:col-span-4 space-y-5">

homepage/homepage/components/home/HowJazzWorksSection.tsx

@@ -1,4 +1,5 @@
 import { clsx } from "clsx";
+import { Card } from "gcmp-design-system/src/app/components/atoms/Card";
 import { H2 } from "gcmp-design-system/src/app/components/atoms/Headings";
 import { GappedGrid } from "gcmp-design-system/src/app/components/molecules/GappedGrid";
 import CodeStepAction from "./CodeStepAction.mdx";
@@ -48,10 +49,10 @@ function Step({
   className?: string;
 }) {
   return (
-    <div
+    <Card
       className={clsx(
         className,
-        "rounded-lg overflow-hidden shadow-sm flex flex-col gap-6 border",
+        "overflow-hidden flex flex-col gap-6",
         "pt-4 sm:pt-6",
         "col-span-2 lg:col-span-3",
       )}
@@ -70,7 +71,7 @@ function Step({
         <p className="max-w-md">{description}</p>
       </div>
       <div className="flex-1 pl-4 sm:pl-12">{children}</div>
-    </div>
+    </Card>
   );
 }
 

homepage/homepage/components/home/LocalFirstFeaturesSection.tsx

@@ -1,4 +1,5 @@
-import { LabelledFeatureIcon } from "gcmp-design-system/src/app/components/molecules/LabelledFeatureIcon";
+import { FeatureCard } from "gcmp-design-system/src/app/components/molecules/FeatureCard";
+import { GappedGrid } from "gcmp-design-system/src/app/components/molecules/GappedGrid";
 import { SectionHeader } from "gcmp-design-system/src/app/components/molecules/SectionHeader";
 import {
   GaugeIcon,
@@ -64,16 +65,16 @@ export function LocalFirstFeaturesSection() {
           </>
         }
       />
-      <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-4 lg:gap-8">
+      <GappedGrid cols={4}>
         {features.map(({ title, icon: Icon, description }) => (
-          <LabelledFeatureIcon
+          <FeatureCard
             label={title}
             icon={Icon}
             explanation={description}
             key={title}
-          ></LabelledFeatureIcon>
+          ></FeatureCard>
         ))}
-      </div>
+      </GappedGrid>
     </div>
   );
 }

homepage/homepage/components/nav.tsx

@@ -1,5 +1,4 @@
-import { SiDiscord, SiGithub, SiX } from "@icons-pack/react-simple-icons";
-import { Button } from "gcmp-design-system/src/app/components/atoms/Button";
+import { socials } from "@/lib/socials";
 import { JazzLogo } from "gcmp-design-system/src/app/components/atoms/logos/JazzLogo";
 import { Nav } from "gcmp-design-system/src/app/components/organisms/Nav";
 import { BookTextIcon, BoxIcon, CodeIcon } from "lucide-react";
@@ -68,25 +67,8 @@ export function JazzNav() {
           href: "https://github.com/gardencmp/jazz/releases",
           newTab: true,
         },
-        {
-          title: "GitHub",
-          href: "https://github.com/gardencmp/jazz",
-          newTab: true,
-          icon: <SiGithub className="w-5" />,
-        },
-        {
-          title: "Discord",
-          href: "https://discord.gg/utDMjHYg42",
-          newTab: true,
-          icon: <SiDiscord className="w-5" />,
-        },
-        {
-          title: "X",
-          href: "https://x.com/jazz_tools",
-          newTab: true,
-          icon: <SiX className="w-5" />,
-        },
       ]}
+      socials={socials}
       docNav={<DocNav className="block h-auto" />}
     />
   );

homepage/homepage/lib/docNavigationItems.ts

@@ -111,12 +111,27 @@ export const docNavigationItems = [
     ],
   },
   {
-    name: "Authentication",
+    name: "Authentication methods",
     items: [
       {
-        name: "Auth methods overview",
+        name: "Overview",
         href: "/docs/authentication/auth-methods",
-        done: 0,
+        done: 80,
+      },
+      {
+        name: "Passphrase",
+        href: "/docs/authentication/auth-methods#passphrase",
+        done: 20,
+      },
+      {
+        name: "Passkey",
+        href: "/docs/authentication/auth-methods#passkey",
+        done: 20,
+      },
+      {
+        name: "Clerk",
+        href: "/docs/authentication/auth-methods#clerk",
+        done: 20,
       },
       {
         name: "Writing your own",

homepage/homepage/lib/socials.ts

@@ -0,0 +1,5 @@
+export const socials = {
+  github: "https://github.com/gardencmp/jazz",
+  discord: "https://discord.gg/utDMjHYg42",
+  x: "https://x.com/jazz_tools",
+};

homepage/homepage/next.config.mjs

@@ -10,10 +10,6 @@ const nextConfig = {
   // Configure `pageExtensions`` to include MDX files
   pageExtensions: ["js", "jsx", "mdx", "ts", "tsx"],
   transpilePackages: ["gcmp-design-system"],
-  // Optionally, add any other Next.js config below
-  experimental: {
-    serverActions: true,
-  },
 };
 
 const withMDX = createMDX({

homepage/homepage/package.json

@@ -5,7 +5,8 @@
   "type": "module",
   "scripts": {
     "dev": "NODE_OPTIONS=--max-old-space-size=8192 next dev",
-    "build": "node genDocs.mjs --build && next build",
+    "build:generate-docs": "node genDocs.mjs --build",
+    "build": "pnpm run build:generate-docs && next build",
     "start": "next start",
     "format-and-lint": "biome check .",
     "format-and-lint:fix": "biome check . --write"
@@ -27,7 +28,7 @@
     "mdast-util-from-markdown": "^2.0.0",
     "mdast-util-mdx": "^3.0.0",
     "micromark-extension-mdxjs": "^3.0.0",
-    "next": "13.5.4",
+    "next": "14.2.15",
     "qrcode": "^1.5.4",
     "react": "^18",
     "react-dom": "^18",

packages/cojson-storage-indexeddb/CHANGELOG.md

@@ -1,5 +1,27 @@
 # cojson-storage-indexeddb
 
+## 0.8.32
+
+### Patch Changes
+
+- Updated dependencies [df42b2b]
+  - cojson@0.8.32
+
+## 0.8.31
+
+### Patch Changes
+
+- Updated dependencies [e511d6d]
+  - cojson@0.8.31
+
+## 0.8.30
+
+### Patch Changes
+
+- Updated dependencies [0a2fae3]
+- Updated dependencies [99cda2f]
+  - cojson@0.8.30
+
 ## 0.8.29
 
 ### Patch Changes

packages/cojson-storage-indexeddb/package.json

@@ -1,12 +1,12 @@
 {
   "name": "cojson-storage-indexeddb",
-  "version": "0.8.29",
+  "version": "0.8.32",
   "main": "dist/index.js",
   "type": "module",
   "types": "src/index.ts",
   "license": "MIT",
   "dependencies": {
-    "cojson": "workspace:0.8.29"
+    "cojson": "workspace:0.8.32"
   },
   "devDependencies": {
     "@vitest/browser": "^0.34.1",

packages/cojson-storage-sqlite/CHANGELOG.md

@@ -1,5 +1,27 @@
 # cojson-storage-sqlite
 
+## 0.8.32
+
+### Patch Changes
+
+- Updated dependencies [df42b2b]
+  - cojson@0.8.32
+
+## 0.8.31
+
+### Patch Changes
+
+- Updated dependencies [e511d6d]
+  - cojson@0.8.31
+
+## 0.8.30
+
+### Patch Changes
+
+- Updated dependencies [0a2fae3]
+- Updated dependencies [99cda2f]
+  - cojson@0.8.30
+
 ## 0.8.29
 
 ### Patch Changes

packages/cojson-storage-sqlite/package.json

@@ -1,13 +1,13 @@
 {
   "name": "cojson-storage-sqlite",
   "type": "module",
-  "version": "0.8.29",
+  "version": "0.8.32",
   "main": "dist/index.js",
   "types": "src/index.ts",
   "license": "MIT",
   "dependencies": {
     "better-sqlite3": "^8.5.2",
-    "cojson": "workspace:0.8.29",
+    "cojson": "workspace:0.8.32",
     "typescript": "^5.3.3"
   },
   "devDependencies": {

packages/cojson-transport-ws/CHANGELOG.md

@@ -1,5 +1,27 @@
 # cojson-transport-nodejs-ws
 
+## 0.8.32
+
+### Patch Changes
+
+- Updated dependencies [df42b2b]
+  - cojson@0.8.32
+
+## 0.8.31
+
+### Patch Changes
+
+- Updated dependencies [e511d6d]
+  - cojson@0.8.31
+
+## 0.8.30
+
+### Patch Changes
+
+- Updated dependencies [0a2fae3]
+- Updated dependencies [99cda2f]
+  - cojson@0.8.30
+
 ## 0.8.29
 
 ### Patch Changes

packages/cojson-transport-ws/package.json

@@ -1,12 +1,12 @@
 {
   "name": "cojson-transport-ws",
   "type": "module",
-  "version": "0.8.29",
+  "version": "0.8.32",
   "main": "dist/index.js",
   "types": "src/index.ts",
   "license": "MIT",
   "dependencies": {
-    "cojson": "workspace:0.8.29",
+    "cojson": "workspace:0.8.32",
     "typescript": "^5.3.3"
   },
   "scripts": {

packages/cojson/CHANGELOG.md

@@ -1,5 +1,24 @@
 # cojson
 
+## 0.8.32
+
+### Patch Changes
+
+- df42b2b: Catch hard-to-debug errors when trying to get edits at a CoMap key called "constructor"
+
+## 0.8.31
+
+### Patch Changes
+
+- e511d6d: Performance: make the isUploaded check on the SyncStateManager lazy
+
+## 0.8.30
+
+### Patch Changes
+
+- 0a2fae3: More optimised way to get knownState
+- 99cda2f: Reduce noise on peer close and increase the load timeout
+
 ## 0.8.29
 
 ### Patch Changes

packages/cojson/package.json

@@ -19,7 +19,7 @@
   },
   "type": "module",
   "license": "MIT",
-  "version": "0.8.29",
+  "version": "0.8.32",
   "devDependencies": {
     "@types/jest": "^29.5.3",
     "typescript": "^5.3.3",

packages/cojson/src/PeerState.ts

@@ -121,7 +121,8 @@ export class PeerState {
   private closeQueue() {
     let entry: QueueEntry | undefined;
     while ((entry = this.queue.pull())) {
-      entry.reject(new Error("Peer disconnected"));
+      // Using resolve here to avoid unnecessary noise in the logs
+      entry.resolve();
     }
   }
 

packages/cojson/src/SyncStateSubscriptionManager.ts

@@ -6,29 +6,31 @@ import {
   emptyKnownState,
 } from "./sync.js";
 
+export type SyncStateGetter = {
+  isUploaded: boolean;
+};
+
+export type GlobalSyncStateListenerCallback = (
+  peerId: PeerID,
+  knownState: CoValueKnownState,
+  sync: SyncStateGetter,
+) => void;
+
+export type PeerSyncStateListenerCallback = (
+  knownState: CoValueKnownState,
+  sync: SyncStateGetter,
+) => void;
+
 export class SyncStateSubscriptionManager {
   constructor(private syncManager: SyncManager) {}
 
-  private listeners = new Set<
-    (
-      peerId: PeerID,
-      knownState: CoValueKnownState,
-      uploadCompleted: boolean,
-    ) => void
-  >();
-
+  private listeners = new Set<GlobalSyncStateListenerCallback>();
   private listenersByPeers = new Map<
     PeerID,
-    Set<(knownState: CoValueKnownState, uploadCompleted: boolean) => void>
+    Set<PeerSyncStateListenerCallback>
   >();
 
-  subscribeToUpdates(
-    listener: (
-      peerId: PeerID,
-      knownState: CoValueKnownState,
-      uploadCompleted: boolean,
-    ) => void,
-  ) {
+  subscribeToUpdates(listener: GlobalSyncStateListenerCallback) {
     this.listeners.add(listener);
 
     return () => {
@@ -38,7 +40,7 @@ export class SyncStateSubscriptionManager {
 
   subscribeToPeerUpdates(
     peerId: PeerID,
-    listener: (knownState: CoValueKnownState, uploadCompleted: boolean) => void,
+    listener: PeerSyncStateListenerCallback,
   ) {
     const listeners = this.listenersByPeers.get(peerId) ?? new Set();
 
@@ -68,19 +70,29 @@ export class SyncStateSubscriptionManager {
     }
 
     const knownState = peer.knownStates.get(id) ?? emptyKnownState(id);
-    const fullyUploadedIntoPeer = this.getIsCoValueFullyUploadedIntoPeer(
-      peerId,
-      id,
+
+    // Build a lazy sync state object to process the isUploaded info
+    // only when requested
+    const syncState = {} as SyncStateGetter;
+
+    const getIsUploaded = simpleMemoize(() =>
+      this.getIsCoValueFullyUploadedIntoPeer(peerId, id),
     );
+    Object.defineProperties(syncState, {
+      isUploaded: {
+        enumerable: true,
+        get: getIsUploaded,
+      },
+    });
 
     for (const listener of this.listeners) {
-      listener(peerId, knownState, fullyUploadedIntoPeer);
+      listener(peerId, knownState, syncState);
     }
 
     if (!peerListeners) return;
 
     for (const listener of peerListeners) {
-      listener(knownState, fullyUploadedIntoPeer);
+      listener(knownState, syncState);
     }
   }
 
@@ -122,3 +134,8 @@ function getIsUploadCompleted(
 
   return true;
 }
+
+function simpleMemoize<T>(fn: () => T): () => T {
+  let value: T | undefined;
+  return () => value ?? (value = fn());
+}

packages/cojson/src/coValueCore.ts

@@ -155,15 +155,16 @@ export class CoValueCore {
 
   /** @internal */
   knownStateUncached(): CoValueKnownState {
+    const sessions: CoValueKnownState["sessions"] = {};
+
+    for (const [sessionID, sessionLog] of this.sessionLogs.entries()) {
+      sessions[sessionID] = sessionLog.transactions.length;
+    }
+
     return {
       id: this.id,
       header: true,
-      sessions: Object.fromEntries(
-        [...this.sessionLogs.entries()].map(([k, v]) => [
-          k,
-          v.transactions.length,
-        ]),
-      ),
+      sessions,
     };
   }
 

packages/cojson/src/coValueState.ts

@@ -4,7 +4,7 @@ import { RawCoID } from "./ids.js";
 import { PeerID } from "./sync.js";
 
 export const CO_VALUE_LOADING_MAX_RETRIES = 5;
-export const CO_VALUE_LOADING_TIMEOUT = 5000;
+export const CO_VALUE_LOADING_TIMEOUT = 30_000;
 
 export class CoValueUnknownState {
   type = "unknown" as const;

packages/cojson/src/coValues/coMap.ts

@@ -107,6 +107,10 @@ export class RawCoMapView<
   timeFilteredOps<K extends keyof Shape & string>(
     key: K,
   ): MapOp<K, Shape[K]>[] | undefined {
+    if (key === "constructor") {
+      return undefined;
+    }
+
     if (this.atTimeFilter) {
       return this.ops[key]?.filter((op) => op.madeAt <= this.atTimeFilter!);
     } else {

packages/cojson/src/sync.ts

@@ -718,8 +718,8 @@ export class SyncManager {
       const unsubscribe =
         this.syncStateSubscriptionManager.subscribeToPeerUpdates(
           peerId,
-          (knownState, uploadCompleted) => {
-            if (uploadCompleted && knownState.id === id) {
+          (knownState, syncState) => {
+            if (syncState.isUploaded && knownState.id === id) {
               resolve(true);
               unsubscribe?.();
             }

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

@@ -84,7 +84,7 @@ describe("PeerState", () => {
     await Promise.allSettled([message1, message2]);
 
     await expect(message1).resolves.toBe(undefined);
-    await expect(message2).rejects.toThrow("Peer disconnected");
+    await expect(message2).resolves.toBe(undefined);
   });
 
   test("should schedule outgoing messages based on their priority", async () => {

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

@@ -1,4 +1,8 @@
 import { describe, expect, onTestFinished, test, vi } from "vitest";
+import {
+  GlobalSyncStateListenerCallback,
+  PeerSyncStateListenerCallback,
+} from "../SyncStateSubscriptionManager.js";
 import { connectedPeers } from "../streamUtils.js";
 import { emptyKnownState } from "../sync.js";
 import { createTestNode, waitFor } from "./testUtils.js";
@@ -29,7 +33,7 @@ describe("SyncStateSubscriptionManager", () => {
 
     const subscriptionManager = client.syncManager.syncStateSubscriptionManager;
 
-    const updateSpy = vi.fn();
+    const updateSpy: GlobalSyncStateListenerCallback = vi.fn();
     const unsubscribe = subscriptionManager.subscribeToUpdates(updateSpy);
 
     await client.syncManager.actuallySyncCoValue(map.core);
@@ -37,7 +41,7 @@ describe("SyncStateSubscriptionManager", () => {
     expect(updateSpy).toHaveBeenCalledWith(
       "jazzCloudConnection",
       emptyKnownState(map.core.id),
-      false,
+      { isUploaded: false },
     );
 
     await waitFor(() => {
@@ -52,7 +56,7 @@ describe("SyncStateSubscriptionManager", () => {
       client.syncManager.peers["jazzCloudConnection"]!.knownStates.get(
         map.core.id,
       )!,
-      true,
+      { isUploaded: true },
     );
 
     // Cleanup
@@ -90,8 +94,8 @@ describe("SyncStateSubscriptionManager", () => {
 
     const subscriptionManager = client.syncManager.syncStateSubscriptionManager;
 
-    const updateToJazzCloudSpy = vi.fn();
-    const updateToStorageSpy = vi.fn();
+    const updateToJazzCloudSpy: PeerSyncStateListenerCallback = vi.fn();
+    const updateToStorageSpy: PeerSyncStateListenerCallback = vi.fn();
     const unsubscribe1 = subscriptionManager.subscribeToPeerUpdates(
       "jazzCloudConnection",
       updateToJazzCloudSpy,
@@ -110,7 +114,7 @@ describe("SyncStateSubscriptionManager", () => {
 
     expect(updateToJazzCloudSpy).toHaveBeenCalledWith(
       emptyKnownState(map.core.id),
-      false,
+      { isUploaded: false },
     );
 
     await waitFor(() => {
@@ -124,12 +128,12 @@ describe("SyncStateSubscriptionManager", () => {
       client.syncManager.peers["jazzCloudConnection"]!.knownStates.get(
         map.core.id,
       )!,
-      true,
+      { isUploaded: true },
     );
 
     expect(updateToStorageSpy).toHaveBeenLastCalledWith(
       emptyKnownState(map.core.id),
-      false,
+      { isUploaded: false },
     );
   });
 

packages/jazz-browser-auth-clerk/CHANGELOG.md

@@ -1,5 +1,35 @@
 # jazz-browser-media-images
 
+## 0.8.32
+
+### Patch Changes
+
+- 1a4bda0: Document usage in readme
+- Updated dependencies [df42b2b]
+- Updated dependencies [df42b2b]
+  - cojson@0.8.32
+  - jazz-tools@0.8.32
+  - jazz-browser@0.8.32
+
+## 0.8.31
+
+### Patch Changes
+
+- Updated dependencies [e511d6d]
+  - cojson@0.8.31
+  - jazz-browser@0.8.31
+  - jazz-tools@0.8.31
+
+## 0.8.30
+
+### Patch Changes
+
+- Updated dependencies [0a2fae3]
+- Updated dependencies [99cda2f]
+  - cojson@0.8.30
+  - jazz-browser@0.8.30
+  - jazz-tools@0.8.30
+
 ## 0.8.29
 
 ### Patch Changes

packages/jazz-browser-auth-clerk/README.md

@@ -2,40 +2,30 @@
 
 This package provides a [Clerk-based](https://clerk.com/) authentication strategy for Jazz.
 
+Looking for a React integration? Check out [`jazz-react-auth-clerk`](https://www.npmjs.com/package/jazz-react-auth-clerk).
+
 ## Usage
 
-`useJazzClerkAuth` is a hook that returns a `JazzAuth` object and a `JazzAuthState` object. Provide a Clerk instance to `useJazzClerkAuth`, and it will return the appropriate `JazzAuth` object. Once authenticated, authentication will persist across page reloads, even if the device is offline.
+`BrowserClerkAuth` is a class that provides a `JazzAuth` object. Provide a Clerk instance to `BrowserClerkAuth`, and it will return the appropriate `JazzAuth` object. Once authenticated, authentication will persist across page reloads, even if the device is offline.
 
 
 From [the example chat app](https://github.com/gardencmp/jazz/tree/main/examples/chat-clerk):
 
-```typescript
-import { ClerkProvider, SignInButton, useClerk } from "@clerk/clerk-react";
-import { useJazzClerkAuth } from "jazz-react-auth-clerk";
+```ts
+import { BrowserClerkAuth } from "jazz-browser-auth-clerk";
 
-const Jazz = createJazzReactApp();
-export const { useAccount, useCoState } = Jazz;
+// ...
 
-function JazzAndAuth({ children }: { children: React.ReactNode }) {
-  const clerk = useClerk();
-  const [auth, state] = useJazzClerkAuth(clerk);
-
-  return (
-    <>
-      {state.errors.map((error) => (
-        <div key={error}>{error}</div>
-      ))}
-      {auth ? (
-        <Jazz.Provider
-          auth={auth}
-          peer="wss://cloud.jazz.tools/?key=chat-example-jazz-clerk@gcmp.io"
-        >
-          {children}
-        </Jazz.Provider>
-      ) : (
-        <SignInButton />
-      )}
-    </>
-  );
-}
+const auth = new BrowserClerkAuth(
+  {
+    onError: (error) => {
+      void clerk.signOut();
+      setState((state) => ({
+        ...state,
+        errors: [...state.errors, error.toString()],
+      }));
+    },
+  },
+  clerk,
+);
 ```

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

@@ -1,14 +1,14 @@
 {
   "name": "jazz-browser-auth-clerk",
-  "version": "0.8.29",
+  "version": "0.8.32",
   "type": "module",
   "main": "dist/index.js",
   "types": "src/index.ts",
   "license": "MIT",
   "dependencies": {
-    "cojson": "workspace:0.8.29",
-    "jazz-browser": "workspace:0.8.29",
-    "jazz-tools": "workspace:0.8.29"
+    "cojson": "workspace:0.8.32",
+    "jazz-browser": "workspace:0.8.32",
+    "jazz-tools": "workspace:0.8.32"
   },
   "scripts": {
     "format-and-lint": "biome check .",

packages/jazz-browser-media-images/CHANGELOG.md

@@ -1,5 +1,27 @@
 # jazz-browser-media-images
 
+## 0.8.32
+
+### Patch Changes
+
+- Updated dependencies [df42b2b]
+  - jazz-tools@0.8.32
+  - jazz-browser@0.8.32
+
+## 0.8.31
+
+### Patch Changes
+
+- jazz-browser@0.8.31
+- jazz-tools@0.8.31
+
+## 0.8.30
+
+### Patch Changes
+
+- jazz-browser@0.8.30
+- jazz-tools@0.8.30
+
 ## 0.8.29
 
 ### Patch Changes

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

@@ -1,6 +1,6 @@
 {
   "name": "jazz-browser-media-images",
-  "version": "0.8.29",
+  "version": "0.8.32",
   "type": "module",
   "main": "dist/index.js",
   "types": "src/index.ts",
@@ -8,8 +8,8 @@
   "dependencies": {
     "@types/image-blob-reduce": "^4.1.1",
     "image-blob-reduce": "^4.1.0",
-    "jazz-browser": "workspace:0.8.29",
-    "jazz-tools": "workspace:0.8.29",
+    "jazz-browser": "workspace:0.8.32",
+    "jazz-tools": "workspace:0.8.32",
     "pica": "^9.0.1",
     "typescript": "^5.3.3"
   },

packages/jazz-browser/CHANGELOG.md

@@ -1,5 +1,37 @@
 # jazz-browser
 
+## 0.8.32
+
+### Patch Changes
+
+- Updated dependencies [df42b2b]
+- Updated dependencies [df42b2b]
+  - cojson@0.8.32
+  - jazz-tools@0.8.32
+  - cojson-storage-indexeddb@0.8.32
+  - cojson-transport-ws@0.8.32
+
+## 0.8.31
+
+### Patch Changes
+
+- Updated dependencies [e511d6d]
+  - cojson@0.8.31
+  - cojson-storage-indexeddb@0.8.31
+  - cojson-transport-ws@0.8.31
+  - jazz-tools@0.8.31
+
+## 0.8.30
+
+### Patch Changes
+
+- Updated dependencies [0a2fae3]
+- Updated dependencies [99cda2f]
+  - cojson@0.8.30
+  - cojson-storage-indexeddb@0.8.30
+  - cojson-transport-ws@0.8.30
+  - jazz-tools@0.8.30
+
 ## 0.8.29
 
 ### Patch Changes

packages/jazz-browser/package.json

@@ -1,16 +1,16 @@
 {
   "name": "jazz-browser",
-  "version": "0.8.29",
+  "version": "0.8.32",
   "type": "module",
   "main": "dist/index.js",
   "types": "src/index.ts",
   "license": "MIT",
   "dependencies": {
     "@scure/bip39": "^1.3.0",
-    "cojson": "workspace:0.8.29",
-    "cojson-storage-indexeddb": "workspace:0.8.29",
-    "cojson-transport-ws": "workspace:0.8.29",
-    "jazz-tools": "workspace:0.8.29",
+    "cojson": "workspace:0.8.32",
+    "cojson-storage-indexeddb": "workspace:0.8.32",
+    "cojson-transport-ws": "workspace:0.8.32",
+    "jazz-tools": "workspace:0.8.32",
     "typescript": "^5.3.3"
   },
   "scripts": {

packages/jazz-browser/src/auth/DemoAuth.ts

@@ -8,6 +8,19 @@ type StorageData = {
 
 const localStorageKey = "demo-auth-logged-in-secret";
 
+/**
+ * `BrowserDemoAuth` provides a `JazzAuth` object for demo authentication.
+ *
+ * Demo authentication is useful for quickly testing your app, as it allows you to create new accounts and log in as existing ones. The authentication persists across page reloads, but as the data is stored in `localStorage`, it will be lost when the browser is closed.
+ *
+ * ```
+ * import { BrowserDemoAuth } from "jazz-browser";
+ *
+ * const auth = new BrowserDemoAuth(driver);
+ * ```
+ *
+ * @category Auth Providers
+ */
 export class BrowserDemoAuth implements AuthMethod {
   constructor(
     public driver: BrowserDemoAuth.Driver,
@@ -37,6 +50,9 @@ export class BrowserDemoAuth implements AuthMethod {
     }
   }
 
+  /**
+   * @returns A `JazzAuth` object
+   */
   async start() {
     if (localStorage["demo-auth-logged-in-secret"]) {
       const localStorageData = JSON.parse(
@@ -129,7 +145,7 @@ export class BrowserDemoAuth implements AuthMethod {
   }
 }
 
-/** @category Auth Providers */
+/** @internal */
 // eslint-disable-next-line @typescript-eslint/no-namespace
 export namespace BrowserDemoAuth {
   export interface Driver {

packages/jazz-browser/src/auth/PasskeyAuth.ts

@@ -13,6 +13,17 @@ type LocalStorageData = {
 
 const localStorageKey = "jazz-logged-in-secret";
 
+/**
+ * `BrowserPasskeyAuth` provides a `JazzAuth` object for passkey authentication.
+ *
+ * ```ts
+ * import { BrowserPasskeyAuth } from "jazz-browser";
+ *
+ * const auth = new BrowserPasskeyAuth(driver, appName);
+ * ```
+ *
+ * @category Auth Providers
+ */
 export class BrowserPasskeyAuth implements AuthMethod {
   constructor(
     public driver: BrowserPasskeyAuth.Driver,
@@ -29,6 +40,9 @@ export class BrowserPasskeyAuth implements AuthMethod {
     this.driver.onError(error);
   }
 
+  /**
+   * @returns A `JazzAuth` object
+   */
   async start(crypto: CryptoProvider): Promise<AuthResult> {
     if (localStorage[localStorageKey]) {
       const localStorageData = JSON.parse(
@@ -171,7 +185,7 @@ export class BrowserPasskeyAuth implements AuthMethod {
   }
 }
 
-/** @category Auth Providers */
+/** @internal */
 // eslint-disable-next-line @typescript-eslint/no-namespace
 export namespace BrowserPasskeyAuth {
   export interface Driver {

packages/jazz-browser/src/auth/PassphraseAuth.ts

@@ -9,6 +9,17 @@ type LocalStorageData = {
 
 const localStorageKey = "jazz-logged-in-secret";
 
+/**
+ * `BrowserPassphraseAuth` provides a `JazzAuth` object for passphrase authentication.
+ *
+ * ```ts
+ * import { BrowserPassphraseAuth } from "jazz-browser";
+ *
+ * const auth = new BrowserPassphraseAuth(driver, wordlist, appName);
+ * ```
+ *
+ * @category Auth Providers
+ */
 export class BrowserPassphraseAuth implements AuthMethod {
   constructor(
     public driver: BrowserPassphraseAuth.Driver,
@@ -18,6 +29,9 @@ export class BrowserPassphraseAuth implements AuthMethod {
     public appHostname: string = window.location.hostname,
   ) {}
 
+  /**
+   * @returns A `JazzAuth` object
+   */
   async start(crypto: CryptoProvider): Promise<AuthResult> {
     if (localStorage[localStorageKey]) {
       const localStorageData = JSON.parse(
@@ -121,8 +135,7 @@ export class BrowserPassphraseAuth implements AuthMethod {
   }
 }
 
-/** @category Auth Providers */
-// eslint-disable-next-line @typescript-eslint/no-namespace
+/** @internal */
 export namespace BrowserPassphraseAuth {
   export interface Driver {
     onReady: (next: {

packages/jazz-nodejs/CHANGELOG.md

@@ -1,5 +1,34 @@
 # jazz-autosub
 
+## 0.8.32
+
+### Patch Changes
+
+- Updated dependencies [df42b2b]
+- Updated dependencies [df42b2b]
+  - cojson@0.8.32
+  - jazz-tools@0.8.32
+  - cojson-transport-ws@0.8.32
+
+## 0.8.31
+
+### Patch Changes
+
+- Updated dependencies [e511d6d]
+  - cojson@0.8.31
+  - cojson-transport-ws@0.8.31
+  - jazz-tools@0.8.31
+
+## 0.8.30
+
+### Patch Changes
+
+- Updated dependencies [0a2fae3]
+- Updated dependencies [99cda2f]
+  - cojson@0.8.30
+  - cojson-transport-ws@0.8.30
+  - jazz-tools@0.8.30
+
 ## 0.8.29
 
 ### Patch Changes

packages/jazz-nodejs/package.json

@@ -5,11 +5,11 @@
   "types": "src/index.ts",
   "type": "module",
   "license": "MIT",
-  "version": "0.8.29",
+  "version": "0.8.32",
   "dependencies": {
-    "cojson": "workspace:0.8.29",
-    "cojson-transport-ws": "workspace:0.8.29",
-    "jazz-tools": "workspace:0.8.29",
+    "cojson": "workspace:0.8.32",
+    "cojson-transport-ws": "workspace:0.8.32",
+    "jazz-tools": "workspace:0.8.32",
     "ws": "^8.14.2"
   },
   "devDependencies": {

packages/jazz-react-auth-clerk/CHANGELOG.md

@@ -1,5 +1,39 @@
 # jazz-browser-media-images
 
+## 0.8.32
+
+### Patch Changes
+
+- 1a4bda0: Document usage in readme
+- Updated dependencies [df42b2b]
+- Updated dependencies [1a4bda0]
+- Updated dependencies [df42b2b]
+  - cojson@0.8.32
+  - jazz-browser-auth-clerk@0.8.32
+  - jazz-tools@0.8.32
+  - jazz-react@0.8.32
+
+## 0.8.31
+
+### Patch Changes
+
+- Updated dependencies [e511d6d]
+  - cojson@0.8.31
+  - jazz-browser-auth-clerk@0.8.31
+  - jazz-react@0.8.31
+  - jazz-tools@0.8.31
+
+## 0.8.30
+
+### Patch Changes
+
+- Updated dependencies [0a2fae3]
+- Updated dependencies [99cda2f]
+  - cojson@0.8.30
+  - jazz-browser-auth-clerk@0.8.30
+  - jazz-react@0.8.30
+  - jazz-tools@0.8.30
+
 ## 0.8.29
 
 ### Patch Changes