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

Version Packages

.changeset/config.json

@@ -14,7 +14,8 @@
       "jazz-betterauth-server-plugin",
       "jazz-react-auth-betterauth",
       "jazz-run",
-      "jazz-tools"
+      "jazz-tools",
+      "community-jazz-vue"
     ]
   ],
   "access": "public",

.github/workflows/code-quality.yml

@@ -25,6 +25,3 @@ jobs:
           version: 2.1.3
       - name: Run Biome
         run: biome ci .
-
-      - name: Check Catalog Dependencies
-        run: node scripts/check-catalog-deps.js

.github/workflows/playwright.yml

@@ -48,6 +48,7 @@ jobs:
             "tests/e2e"
             "examples/chat"
             "examples/chat-svelte"
+            "examples/community-clerk-vue"
             "examples/clerk"
             "examples/betterauth"
             "examples/file-share-svelte"

biome.json

@@ -42,6 +42,15 @@
     }
   },
   "overrides": [
+    {
+      "includes": ["packages/community-jazz-vue/src/**"],
+      "linter": {
+        "enabled": true,
+        "rules": {
+          "recommended": true
+        }
+      }
+    },
     {
       "includes": ["**/packages/**/src/**"],
       "linter": {

examples/betterauth/package.json

@@ -27,22 +27,22 @@
 		"jazz-tools": "workspace:*",
 		"lucide-react": "^0.510.0",
 		"next": "15.3.2",
-		"react": "^18.0.0",
-		"react-dom": "^18.0.0",
+		"react": "catalog:react",
+		"react-dom": "catalog:react",
 		"sonner": "^2.0.3",
 		"tailwind-merge": "^3.3.0",
 		"tw-animate-css": "^1.2.5"
 	},
 	"devDependencies": {
-		"@biomejs/biome": "1.9.4",
+		"@biomejs/biome": "catalog:default",
 		"@playwright/test": "^1.50.1",
 		"@tailwindcss/postcss": "^4",
 		"@types/better-sqlite3": "^7.6.12",
 		"@types/node": "^20",
-		"@types/react": "^18",
-		"@types/react-dom": "^18",
+		"@types/react": "catalog:react",
+		"@types/react-dom": "catalog:react",
 		"react-email": "^4.0.11",
 		"tailwindcss": "^4",
-		"typescript": "^5"
+		"typescript": "catalog:default"
 	}
 }

examples/chat-rn-expo/package.json

@@ -13,13 +13,13 @@
     "@bacons/text-decoder": "^0.0.0",
     "@bam.tech/react-native-image-resizer": "^3.0.11",
     "@react-native-community/netinfo": "11.4.1",
-    "expo": "54.0.0-canary-20250701-6a945c5",
-    "expo-clipboard": "^7.1.4",
-    "expo-secure-store": "~14.2.3",
-    "expo-sqlite": "~15.2.10",
+    "expo": "catalog:expo",
+    "expo-clipboard": "catalog:expo",
+    "expo-secure-store": "catalog:expo",
+    "expo-sqlite": "catalog:expo",
     "jazz-tools": "workspace:*",
-    "react": "19.1.0",
-    "react-native": "0.80.0",
+    "react": "catalog:expo",
+    "react-native": "catalog:expo",
     "react-native-get-random-values": "^1.11.0",
     "readable-stream": "^4.7.0"
   },

examples/chat-rn/package.json

@@ -18,8 +18,8 @@
     "@react-navigation/native": "7.1.14",
     "@react-navigation/native-stack": "7.3.19",
     "jazz-tools": "workspace:*",
-    "react": "19.1.0",
-    "react-native": "0.80.0",
+    "react": "catalog:rn",
+    "react-native": "catalog:rn",
     "react-native-get-random-values": "^1.11.0",
     "react-native-mmkv": "3.3.0",
     "react-native-safe-area-context": "5.5.0",
@@ -31,16 +31,16 @@
     "@babel/plugin-transform-export-namespace-from": "^7.27.1",
     "@babel/preset-env": "^7.25.3",
     "@babel/runtime": "^7.25.0",
-    "@react-native-community/cli": "19.0.0",
-    "@react-native-community/cli-platform-android": "19.0.0",
-    "@react-native-community/cli-platform-ios": "19.0.0",
-    "@react-native/babel-preset": "0.80.0",
-    "@react-native/eslint-config": "0.80.0",
-    "@react-native/metro-config": "0.80.0",
-    "@react-native/typescript-config": "0.80.0",
+    "@react-native-community/cli": "catalog:rn",
+    "@react-native-community/cli-platform-android": "catalog:rn",
+    "@react-native-community/cli-platform-ios": "catalog:rn",
+    "@react-native/babel-preset": "catalog:rn",
+    "@react-native/eslint-config": "catalog:rn",
+    "@react-native/metro-config": "catalog:rn",
+    "@react-native/typescript-config": "catalog:rn",
     "@rnx-kit/metro-config": "^2.0.1",
     "@rnx-kit/metro-resolver-symlinks": "^0.2.5",
-    "@types/react": "^19.1.0",
+    "@types/react": "catalog:rn",
     "eslint": "^8.19.0",
     "pod-install": "^0.3.5",
     "prettier": "2.8.8",

examples/chat-svelte/CHANGELOG.md

@@ -1,5 +1,33 @@
 # passkey-svelte
 
+## 0.0.118
+
+### Patch Changes
+
+- Updated dependencies [5963658]
+  - jazz-tools@0.17.5
+
+## 0.0.117
+
+### Patch Changes
+
+- Updated dependencies [7dd3d00]
+  - jazz-tools@0.17.4
+
+## 0.0.116
+
+### Patch Changes
+
+- jazz-tools@0.17.3
+
+## 0.0.115
+
+### Patch Changes
+
+- Updated dependencies [794681a]
+- Updated dependencies [83fc22f]
+  - jazz-tools@0.17.2
+
 ## 0.0.114
 
 ### Patch Changes

examples/chat-svelte/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chat-svelte",
-  "version": "0.0.114",
+  "version": "0.0.118",
   "type": "module",
   "private": true,
   "scripts": {

examples/chat/package.json

@@ -16,20 +16,20 @@
     "hash-slash": "workspace:*",
     "jazz-tools": "workspace:*",
     "lucide-react": "^0.536.0",
-    "react": "19.1.0",
-    "react-dom": "19.1.0",
+    "react": "catalog:react",
+    "react-dom": "catalog:react",
     "zod": "3.25.76"
   },
   "devDependencies": {
     "@playwright/test": "^1.50.1",
     "@tailwindcss/postcss": "^4.1.10",
-    "@types/react": "19.1.0",
-    "@types/react-dom": "19.1.0",
+    "@types/react": "catalog:react",
+    "@types/react-dom": "catalog:react",
     "@vitejs/plugin-react-swc": "^3.10.1",
     "is-ci": "^3.0.1",
     "postcss": "^8.4.40",
     "tailwindcss": "^4.1.10",
-    "typescript": "5.6.2",
-    "vite": "^6.3.5"
+    "typescript": "catalog:default",
+    "vite": "catalog:default"
   }
 }

examples/clerk-expo/package.json

@@ -14,21 +14,21 @@
     "@bam.tech/react-native-image-resizer": "^3.0.11",
     "@clerk/clerk-expo": "^2.13.1",
     "@react-native-community/netinfo": "11.4.1",
-    "expo": "54.0.0-canary-20250701-6a945c5",
-    "expo-crypto": "~14.1.5",
-    "expo-linking": "~7.1.5",
-    "expo-secure-store": "~14.2.3",
-    "expo-sqlite": "~15.2.10",
-    "expo-web-browser": "~14.2.0",
+    "expo": "catalog:expo",
+    "expo-crypto": "catalog:expo",
+    "expo-linking": "catalog:expo",
+    "expo-secure-store": "catalog:expo",
+    "expo-sqlite": "catalog:expo",
+    "expo-web-browser": "catalog:expo",
     "jazz-tools": "workspace:*",
-    "react": "19.1.0",
-    "react-native": "0.80.0",
+    "react": "catalog:expo",
+    "react-native": "catalog:expo",
     "react-native-get-random-values": "^1.11.0",
     "readable-stream": "^4.7.0"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",
-    "@types/react": "~19.0.10",
+    "@types/react": "catalog:expo",
     "typescript": "~5.8.3"
   },
   "private": true

examples/clerk/package.json

@@ -14,17 +14,17 @@
   "dependencies": {
     "@clerk/clerk-react": "^5.4.1",
     "jazz-tools": "workspace:*",
-    "react": "19.1.0",
-    "react-dom": "19.1.0"
+    "react": "catalog:react",
+    "react-dom": "catalog:react"
   },
   "devDependencies": {
     "@playwright/test": "^1.50.1",
-    "@biomejs/biome": "1.9.4",
-    "@types/react": "19.1.0",
-    "@types/react-dom": "19.1.0",
+    "@biomejs/biome": "catalog:default",
+    "@types/react": "catalog:react",
+    "@types/react-dom": "catalog:react",
     "@vitejs/plugin-react": "^4.5.1",
     "globals": "^15.11.0",
-    "typescript": "5.6.2",
-    "vite": "^6.3.5"
+    "typescript": "catalog:default",
+    "vite": "catalog:default"
   }
 }

examples/community-chat-vue/.gitignore

@@ -0,0 +1,6 @@
+dist
+# env files
+.env
+.env.*
+!.env.example
+!.env.test

examples/community-chat-vue/CHANGELOG.md

@@ -0,0 +1,7 @@
+# community-chat-vue
+
+## 0.15.4
+
+- rewrite from React to Vue
+- jazz-tools@0.15.4
+- community-jazz-vue@0.15.4

examples/community-chat-vue/README.md

@@ -0,0 +1,60 @@
+# Chat example with Jazz and Vue
+
+## Getting started
+
+You can either
+1. Clone the jazz repository, and run the app within the monorepo.
+2. Or create a new Jazz project using this example as a template.
+
+### Using the example as a template
+
+Create a new Jazz project, and use this example as a template.
+```bash
+npx create-jazz-app@latest chat-vue-app --example community-chat-vue
+```
+
+Go to the new project directory.
+```bash
+cd chat-vue-app
+```
+
+Run the dev server.
+```bash
+npm run dev
+```
+
+### Using the monorepo
+
+This requires `pnpm` to be installed, see [https://pnpm.io/installation](https://pnpm.io/installation).
+
+Clone the jazz repository.
+```bash
+git clone https://github.com/garden-co/jazz.git
+```
+
+Install and build dependencies.
+```bash
+pnpm i && npx turbo build
+```
+
+Go to the example directory.
+```bash
+cd jazz/examples/community-chat-vue/
+```
+
+Start the dev server.
+```bash
+pnpm dev
+```
+
+Open [http://localhost:5173](http://localhost:5173) with your browser to see the result.
+
+## Questions / problems / feedback
+
+If you have feedback, let us know on [Discord](https://discord.gg/utDMjHYg42) or open an issue or PR to fix something that seems wrong.
+
+## Configuration: sync server
+
+By default, the example app uses [Jazz Cloud](https://jazz.tools/cloud) (`wss://cloud.jazz.tools`) - so cross-device use, invites and collaboration should just work.
+
+You can also run a local sync server by running `npx jazz-run sync`, and setting the `sync` parameter of `JazzProvider` in [./src/main.ts](./src/main.ts) to `{ peer: "ws://localhost:4200" }`.

examples/community-chat-vue/env.d.ts

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

examples/community-chat-vue/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Jazz Chat Vue Example</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

examples/community-chat-vue/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "community-chat-vue",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build-type-check": "run-p type-check \"build {@}\" --",
+    "preview": "vite preview",
+    "build": "vite build",
+    "type-check": "vue-tsc --build --force",
+    "format-and-lint": "biome check .",
+    "format-and-lint:fix": "biome check . --write"
+  },
+  "dependencies": {
+    "jazz-tools": "workspace:*",
+    "community-jazz-vue": "workspace:*",
+    "vue": "^3.5.11",
+    "vue-router": "^4.4.5"
+  },
+  "devDependencies": {
+    "@tsconfig/node20": "^20.1.4",
+    "@types/node": "^22.5.1",
+    "@vitejs/plugin-vue": "^5.1.4",
+    "@vitejs/plugin-vue-jsx": "^4.0.1",
+    "@vue/tsconfig": "^0.5.1",
+    "eslint": "^9.7.0",
+    "eslint-plugin-vue": "^9.28.0",
+    "npm-run-all2": "^6.2.3",
+    "postcss": "^8.4.40",
+    "@tailwindcss/postcss": "^4.1.10",
+    "tailwindcss": "^4.1.10",
+    "typescript": "5.6.2",
+    "vite": "6.3.5",
+    "vite-plugin-vue-devtools": "^7.4.6",
+    "vue-tsc": "^2.1.6"
+  }
+}

examples/community-chat-vue/postcss.config.js

@@ -0,0 +1,5 @@
+export default {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};

examples/community-chat-vue/src/App.vue

@@ -0,0 +1,24 @@
+<template>
+  <AppContainer>
+    <TopBar v-if="me">
+      <p>{{ me.profile?.name }}</p>
+      <button @click="logoutHandler">Log out</button>
+    </TopBar>
+    <router-view />
+  </AppContainer>
+</template>
+
+<script setup lang="ts">
+import { useAccount } from "community-jazz-vue";
+import { useRouter } from "vue-router";
+import AppContainer from "./components/AppContainer.vue";
+import TopBar from "./components/TopBar.vue";
+
+const { me, logOut } = useAccount();
+const router = useRouter();
+
+async function logoutHandler() {
+  await logOut();
+  router.push("/");
+}
+</script>

examples/community-chat-vue/src/RootApp.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { JazzVueProvider, PasskeyAuthBasicUI } from "community-jazz-vue";
+import { h } from "vue";
+import "jazz-tools/inspector/register-custom-element";
+import App from "./App.vue";
+import { apiKey } from "./apiKey";
+</script>
+
+<template>
+  <JazzVueProvider
+    :sync="{
+      peer: `wss://cloud.jazz.tools/?key=${apiKey}`,
+    }"
+  >
+    <PasskeyAuthBasicUI appName="Jazz Vue Chat">
+      <App />
+    </PasskeyAuthBasicUI>
+    <component
+      :is="h('jazz-inspector', {
+        style: { position: 'fixed', left: '20px', bottom: '20px', zIndex: 9999 }
+      })"
+    />
+  </JazzVueProvider>
+</template>

examples/community-chat-vue/src/apiKey.ts

@@ -0,0 +1 @@
+export const apiKey = "chat-example-jazz@garden.co";

examples/community-chat-vue/src/assets/base.css

@@ -0,0 +1,76 @@
+/* color palette from <https://github.com/vuejs/theme> */
+:root {
+  --vt-c-white: #ffffff;
+  --vt-c-white-soft: #f8f8f8;
+  --vt-c-white-mute: #f2f2f2;
+
+  --vt-c-black: #181818;
+  --vt-c-black-soft: #222222;
+  --vt-c-black-mute: #282828;
+
+  --vt-c-indigo: #2c3e50;
+
+  --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
+  --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
+  --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
+  --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
+
+  --vt-c-text-light-1: var(--vt-c-indigo);
+  --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
+  --vt-c-text-dark-1: var(--vt-c-white);
+  --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
+}
+
+/* semantic color variables for this project */
+:root {
+  --color-background: var(--vt-c-white);
+  --color-background-soft: var(--vt-c-white-soft);
+  --color-background-mute: var(--vt-c-white-mute);
+
+  --color-border: var(--vt-c-divider-light-2);
+  --color-border-hover: var(--vt-c-divider-light-1);
+
+  --color-heading: var(--vt-c-text-light-1);
+  --color-text: var(--vt-c-text-light-1);
+
+  --section-gap: 160px;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-background: var(--vt-c-black);
+    --color-background-soft: var(--vt-c-black-soft);
+    --color-background-mute: var(--vt-c-black-mute);
+
+    --color-border: var(--vt-c-divider-dark-2);
+    --color-border-hover: var(--vt-c-divider-dark-1);
+
+    --color-heading: var(--vt-c-text-dark-1);
+    --color-text: var(--vt-c-text-dark-2);
+  }
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  font-weight: normal;
+}
+
+body {
+  min-height: 100vh;
+  color: var(--color-text);
+  background: var(--color-background);
+  transition:
+    color 0.5s,
+    background-color 0.5s;
+  line-height: 1.6;
+  font-family:
+    Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
+    Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+  font-size: 15px;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}

examples/community-chat-vue/src/assets/logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>

examples/community-chat-vue/src/assets/main.css

@@ -0,0 +1,35 @@
+@import "./base.css";
+
+#app {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  font-weight: normal;
+}
+
+a,
+.green {
+  text-decoration: none;
+  color: hsla(160, 100%, 37%, 1);
+  transition: 0.4s;
+  padding: 3px;
+}
+
+@media (hover: hover) {
+  a:hover {
+    background-color: hsla(160, 100%, 37%, 0.2);
+  }
+}
+
+@media (min-width: 1024px) {
+  body {
+    display: flex;
+    place-items: center;
+  }
+
+  #app {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    padding: 0 2rem;
+  }
+}

examples/community-chat-vue/src/components/AppContainer.vue

@@ -0,0 +1,13 @@
+<template>
+  <div
+    class="flex flex-col justify-between w-screen h-screen bg-stone-50 dark:bg-black dark:text-white"
+  >
+    <slot></slot>
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  name: "AppContainer",
+};
+</script>

examples/community-chat-vue/src/components/BubbleBody.vue

@@ -0,0 +1,13 @@
+<template>
+  <div
+    class="rounded-2xl text-sm line-clamp-10 text-ellipsis bg-white max-w-full whitespace-pre-wrap dark:bg-stone-700 dark:text-white py-1 px-3 shadow-sm"
+  >
+    <slot></slot>
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  name: "BubbleBody",
+};
+</script>

examples/community-chat-vue/src/components/BubbleContainer.vue

@@ -0,0 +1,22 @@
+<template>
+  <div :class="[alignClass, 'flex flex-col m-2']" role="row">
+    <slot></slot>
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  name: "BubbleContainer",
+  props: {
+    fromMe: {
+      type: Boolean,
+      default: undefined,
+    },
+  },
+  computed: {
+    alignClass() {
+      return this.fromMe ? "items-end" : "items-start";
+    },
+  },
+};
+</script>

examples/community-chat-vue/src/components/BubbleImage.vue

@@ -0,0 +1,30 @@
+<template>
+  <div class="h-auto max-w-full rounded-t-xl mb-1">
+    <Image
+      :image-id="image.id"
+      alt="Uploaded image"
+      class-names="h-full rounded-t-xl"
+      width="original"
+      height="original"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+import { type ImageDefinition } from "jazz-tools";
+import { Image } from "community-jazz-vue";
+
+export default defineComponent({
+  name: "BubbleImage",
+  components: {
+    Image,
+  },
+  props: {
+    image: {
+      type: Object as () => ImageDefinition,
+      required: true,
+    },
+  },
+});
+</script>

examples/community-chat-vue/src/components/BubbleInfo.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="text-xs text-neutral-500 mt-1.5">
+    {{ by }} · {{ formattedTime }}
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent } from "vue";
+
+export default defineComponent({
+  name: "BubbleInfo",
+  props: {
+    by: {
+      type: String,
+      default: "",
+    },
+    madeAt: {
+      type: Date,
+      required: true,
+    },
+  },
+  setup(props) {
+    const formattedTime = computed(() => props.madeAt.toLocaleTimeString());
+    return {
+      formattedTime,
+    };
+  },
+});
+</script>

examples/community-chat-vue/src/components/ChatBody.vue

@@ -0,0 +1,11 @@
+<template>
+  <div class="flex-1 overflow-y-auto flex flex-col-reverse" role="application">
+    <slot></slot>
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  name: "ChatBody",
+};
+</script>

examples/community-chat-vue/src/components/ChatBubble.vue

@@ -0,0 +1,40 @@
+<template>
+  <BubbleContainer :fromMe="lastEdit.by?.isMe">
+    <BubbleBody>
+      <BubbleImage v-if="msg.image" :image="msg.image" />
+      {{ msg.text }}
+    </BubbleBody>
+    <BubbleInfo :by="lastEdit.by?.profile?.name" :madeAt="lastEdit.madeAt" />
+  </BubbleContainer>
+</template>
+  
+<script lang="ts">
+import { computed, defineComponent } from "vue";
+import BubbleBody from "./BubbleBody.vue";
+import BubbleContainer from "./BubbleContainer.vue";
+import BubbleInfo from "./BubbleInfo.vue";
+import BubbleImage from "./BubbleImage.vue";
+
+export default defineComponent({
+  name: "ChatBubble",
+  components: {
+    BubbleContainer,
+    BubbleBody,
+    BubbleInfo,
+    BubbleImage,
+  },
+  props: {
+    msg: {
+      type: Object,
+      required: true,
+    },
+  },
+  setup(props) {
+    const lastEdit = computed(() => props.msg._edits.text);
+    return {
+      lastEdit,
+    };
+  },
+});
+</script>
+  

examples/community-chat-vue/src/components/ChatInput.vue

@@ -0,0 +1,55 @@
+<template>
+  <div
+    class="p-3 bg-white border-t shadow-2xl mt-auto dark:bg-transparent dark:border-stone-800 flex gap-1"
+  >
+    <ImageInput @image-change="handleImageChange" />
+    
+    <div class="flex-1">
+      <label class="sr-only" :for="inputId">Type a message and press Enter</label>
+      <input
+        :id="inputId"
+        v-model="inputValue"
+        class="rounded-full py-2 px-4 text-sm border block w-full dark:bg-black dark:text-white dark:border-stone-700"
+        placeholder="Type a message and press Enter"
+        maxlength="2048"
+        @keydown.enter.prevent="submitMessage"
+      />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from "vue";
+import ImageInput from "./ImageInput.vue";
+
+export default defineComponent({
+  name: "ChatInput",
+  components: {
+    ImageInput,
+  },
+  emits: ["submit", "imageSubmit"],
+  setup(_, { emit }) {
+    const inputId = `input-${Math.random().toString(36).substr(2, 9)}`;
+    const inputValue = ref("");
+
+    function submitMessage() {
+      if (!inputValue.value) return;
+      emit("submit", inputValue.value);
+      inputValue.value = "";
+    }
+
+    function handleImageChange(file: File | undefined) {
+      if (file) {
+        emit("imageSubmit", file);
+      }
+    }
+
+    return {
+      inputId,
+      inputValue,
+      submitMessage,
+      handleImageChange,
+    };
+  },
+});
+</script>

examples/community-chat-vue/src/components/EmptyChatMessage.vue

@@ -0,0 +1,13 @@
+<template>
+  <div
+    class="h-full text-base text-stone-500 flex items-center justify-center px-3 md:text-xl"
+  >
+    Start a conversation below.
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  name: "EmptyChatMessage",
+};
+</script>

examples/community-chat-vue/src/components/ImageInput.vue

@@ -0,0 +1,63 @@
+<template>
+  <div>
+    <button
+      type="button"
+      aria-label="Send image"
+      title="Send image"
+      @click="onUploadClick"
+      class="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"
+    >
+      <svg
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <rect width="18" height="18" x="3" y="3" rx="2" ry="2" />
+        <circle cx="9" cy="9" r="2" />
+        <path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" />
+      </svg>
+    </button>
+
+    <label class="sr-only">
+      Image
+      <input
+        ref="inputRef"
+        type="file"
+        accept="image/png, image/jpeg, image/gif"
+        @change="onImageChange"
+      />
+    </label>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from "vue";
+
+export default defineComponent({
+  name: "ImageInput",
+  emits: ["imageChange"],
+  setup(_, { emit }) {
+    const inputRef = ref<HTMLInputElement>();
+
+    function onUploadClick() {
+      inputRef.value?.click();
+    }
+
+    function onImageChange(event: Event) {
+      const target = event.target as HTMLInputElement;
+      emit("imageChange", target.files?.[0]);
+    }
+
+    return {
+      inputRef,
+      onUploadClick,
+      onImageChange,
+    };
+  },
+});
+</script>

examples/community-chat-vue/src/components/TopBar.vue

@@ -0,0 +1,13 @@
+<template>
+  <div
+    class="p-3 bg-white w-full flex justify-end gap-1 text-xs border-b dark:bg-transparent dark:border-stone-800"
+  >
+    <slot></slot>
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  name: "TopBar",
+};
+</script>

examples/community-chat-vue/src/index.css

@@ -0,0 +1 @@
+@import "tailwindcss";

examples/community-chat-vue/src/main.ts

@@ -0,0 +1,8 @@
+import { createApp } from "vue";
+import RootApp from "./RootApp.vue";
+import "./index.css";
+import router from "./router";
+
+const app = createApp(RootApp);
+app.use(router);
+app.mount("#app");

examples/community-chat-vue/src/router.ts

@@ -0,0 +1,17 @@
+import { createRouter, createWebHistory } from "vue-router";
+import Chat from "./views/ChatView.vue";
+import Home from "./views/HomeView.vue";
+
+const router = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes: [
+    {
+      path: "/",
+      name: "Home",
+      component: Home,
+    },
+    { path: "/chat/:chatId", name: "Chat", component: Chat, props: true },
+  ],
+});
+
+export default router;

examples/community-chat-vue/src/schema.ts

@@ -0,0 +1,8 @@
+import { co } from "jazz-tools";
+
+export const Message = co.map({
+  text: co.plainText(),
+  image: co.optional(co.image()),
+});
+
+export const Chat = co.list(Message);

examples/community-chat-vue/src/views/ChatView.vue

@@ -0,0 +1,108 @@
+<template>
+  <div v-if="chat">
+    <ChatBody>
+      <template v-if="chat.length > 0">
+        <ChatBubble v-for="msg in displayedMessages" :key="msg.id" :msg="msg" />
+      </template>
+      <EmptyChatMessage v-else />
+      <button
+        v-if="chat.length > showNLastMessages"
+        class="px-4 py-1 block mx-auto my-2 border rounded"
+        @click="showMoreMessages"
+      >
+        Show more
+      </button>
+    </ChatBody>
+    <ChatInput @submit="handleSubmit" @image-submit="handleImageSubmit" />
+  </div>
+  <div v-else class="flex-1 flex justify-center items-center">Loading...</div>
+</template>
+
+<script lang="ts">
+import { useCoState, createImage } from "community-jazz-vue";
+import { CoPlainText, type ID } from "jazz-tools";
+import { type PropType, computed, defineComponent, ref } from "vue";
+import ChatBody from "../components/ChatBody.vue";
+import ChatBubble from "../components/ChatBubble.vue";
+import ChatInput from "../components/ChatInput.vue";
+import EmptyChatMessage from "../components/EmptyChatMessage.vue";
+import { Chat, Message } from "../schema";
+
+export default defineComponent({
+  name: "ChatView",
+  components: {
+    ChatBody,
+    ChatInput,
+    EmptyChatMessage,
+    ChatBubble,
+  },
+  props: {
+    chatId: {
+      type: String as unknown as PropType<ID<Chat>>,
+      required: true,
+    },
+  },
+  setup(props) {
+    const chat = useCoState(Chat, props.chatId, { resolve: { $each: true } });
+    const showNLastMessages = ref(30);
+
+    const displayedMessages = computed(() => {
+      return chat.value?.slice(-showNLastMessages.value).reverse();
+    });
+
+    function showMoreMessages() {
+      showNLastMessages.value += 10;
+    }
+
+    function handleSubmit(text: string) {
+      if (chat.value) {
+        chat.value.push(
+          Message.create(
+            { text: CoPlainText.create(text, chat.value._owner) },
+            chat.value._owner,
+          ),
+        );
+      }
+    }
+
+    async function handleImageSubmit(file: File) {
+      if (!chat.value) return;
+
+      if (file.size > 5000000) {
+        alert("Please upload an image less than 5MB.");
+        return;
+      }
+
+      try {
+        const image = await createImage(file, {
+          owner: chat.value._owner,
+          progressive: true,
+          placeholder: "blur",
+        });
+
+        chat.value.push(
+          Message.create(
+            {
+              text: CoPlainText.create(file.name, chat.value._owner),
+              image: image,
+            },
+            chat.value._owner,
+          ),
+        );
+      } catch (error) {
+        console.error("Failed to upload image:", error);
+        alert("Failed to upload image. Please try again.");
+      }
+    }
+
+    return {
+      chat,
+      showNLastMessages,
+      displayedMessages,
+      showMoreMessages,
+      handleSubmit,
+      handleImageSubmit,
+    };
+  },
+});
+</script>

examples/community-chat-vue/src/views/HomeView.vue

@@ -0,0 +1,33 @@
+<template>
+  <div v-if="!me">Loading...</div>
+  <div v-else>Creating a new chat...</div>
+</template>
+
+<script setup lang="ts">
+import { useAccount, useIsAuthenticated } from "community-jazz-vue";
+import { Group } from "jazz-tools";
+import { watch } from "vue";
+import { useRouter } from "vue-router";
+import { Chat } from "../schema";
+
+const router = useRouter();
+const { me } = useAccount();
+const isAuthenticated = useIsAuthenticated();
+
+watch(
+  [me, isAuthenticated],
+  ([currentMe, authenticated]) => {
+    if (currentMe && authenticated) {
+      try {
+        const group = Group.create({ owner: currentMe });
+        group.addMember("everyone", "writer");
+        const chat = Chat.create([], { owner: group });
+        router.push(`/chat/${chat.id}`);
+      } catch (error) {
+        console.error("Failed to create chat:", error);
+      }
+    }
+  },
+  { immediate: true },
+);
+</script>

examples/community-chat-vue/tsconfig.app.json

@@ -0,0 +1,14 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
+  "exclude": ["src/**/__tests__/*"],
+  "compilerOptions": {
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}

examples/community-chat-vue/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    },
+    {
+      "path": "./tsconfig.app.json"
+    }
+  ]
+}

examples/community-chat-vue/tsconfig.node.json

@@ -0,0 +1,19 @@
+{
+  "extends": "@tsconfig/node20/tsconfig.json",
+  "include": [
+    "vite.config.*",
+    "vitest.config.*",
+    "cypress.config.*",
+    "nightwatch.conf.*",
+    "playwright.config.*"
+  ],
+  "compilerOptions": {
+    "composite": true,
+    "noEmit": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "types": ["node"]
+  }
+}

examples/community-chat-vue/vite.config.ts

@@ -0,0 +1,16 @@
+import { URL, fileURLToPath } from "node:url";
+
+import vue from "@vitejs/plugin-vue";
+import vueJsx from "@vitejs/plugin-vue-jsx";
+import { defineConfig } from "vite";
+import vueDevTools from "vite-plugin-vue-devtools";
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [vue(), vueJsx(), vueDevTools()],
+  resolve: {
+    alias: {
+      "@": fileURLToPath(new URL("./src", import.meta.url)),
+    },
+  },
+});

examples/community-clerk-vue/.env.example

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

examples/community-clerk-vue/.env.test

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

examples/community-clerk-vue/.gitignore

@@ -0,0 +1,32 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+playwright-report
+
+# Env
+.env
+.env.*
+!.env.example
+!.env.test

examples/community-clerk-vue/CHANGELOG.md

@@ -0,0 +1,7 @@
+# community-clerk-vue
+
+## 0.15.4
+
+- rewrite from React to Vue
+- jazz-tools@0.15.4
+- community-jazz-vue@0.15.4

examples/community-clerk-vue/README.md

@@ -0,0 +1,82 @@
+# Clerk authentication example with Jazz and Vue
+
+This is an example of how to use clerk authentication with Jazz in a Vue.js application.
+
+Live version: [](Todo)
+
+## Getting started
+
+You can either
+
+1. Clone the jazz repository, and run the app within the monorepo.
+2. Or create a new Jazz project using this example as a template.
+
+### Using the example as a template
+
+Create a new Jazz project, and use this example as a template.
+
+```bash
+npx create-jazz-app@latest clerk-vue-app --example community-clerk-vue
+```
+
+Go to the new project directory.
+
+```bash
+cd clerk-vue-app
+```
+
+Rename .env.example to .env
+
+```bash
+mv .env.example .env
+```
+
+Update `VITE_CLERK_PUBLISHABLE_KEY` with your [Publishable Key](https://clerk.com/docs/deployments/clerk-environment-variables#clerk-publishable-and-secret-keys) from Clerk.
+
+Run the dev server.
+
+```bash
+npm run dev
+```
+
+### Using the monorepo
+
+This requires `pnpm` to be installed, see [https://pnpm.io/installation](https://pnpm.io/installation).
+
+Clone the jazz repository.
+
+```bash
+git clone https://github.com/garden-co/jazz.git
+```
+
+Install and build dependencies.
+
+```bash
+pnpm i && npx turbo build
+```
+
+Go to the example directory.
+
+```bash
+cd jazz/examples/community-clerk-vue/
+```
+
+Rename .env.example to .env
+
+```bash
+mv .env.example .env
+```
+
+Update `VITE_CLERK_PUBLISHABLE_KEY` with your [Publishable Key](https://clerk.com/docs/deployments/clerk-environment-variables#clerk-publishable-and-secret-keys) from Clerk.
+
+Start the dev server.
+
+```bash
+pnpm dev
+```
+
+Open [http://localhost:5173](http://localhost:5173) with your browser to see the result.
+
+## Questions / problems / feedback
+
+If you have feedback, let us know on [Discord](https://discord.gg/utDMjHYg42) or open an issue or PR to fix something that seems wrong.

examples/community-clerk-vue/index.html

@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/x-icon" href="/favicon.ico" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Minimal Vue Auth Clerk Example | Jazz</title>
+</head>
+
+<body>
+  <div id="app"></div>
+  <script type="module" src="/src/main.ts"></script>
+</body>
+
+</html>

examples/community-clerk-vue/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "community-clerk-vue",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "preview": "vite preview",
+    "format-and-lint": "biome check .",
+    "format-and-lint:fix": "biome check . --write",
+    "test:e2e": "playwright test",
+    "test:e2e:ui": "playwright test --ui"
+  },
+  "dependencies": {
+    "@clerk/vue": "^1.8.10",
+    "community-jazz-vue": "workspace:*",
+    "jazz-tools": "workspace:*",
+    "vue": "^3.5.13",
+    "vue-router": "^4.5.1"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "1.9.4",
+    "@clerk/testing": "^1.10.8",
+    "@playwright/test": "^1.50.1",
+    "@vitejs/plugin-vue": "^5.2.1",
+    "globals": "^15.11.0",
+    "typescript": "5.6.2",
+    "vite": "^6.3.5"
+  }
+}

examples/community-clerk-vue/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/community-clerk-vue/src/App.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { SignInButton, SignOutButton } from "@clerk/vue";
+import { useIsAuthenticated, useJazzContext } from "community-jazz-vue";
+import { Account } from "jazz-tools";
+import { computed } from "vue";
+
+const context = useJazzContext<Account>();
+const isAuthenticated = useIsAuthenticated();
+
+const me = computed(() => {
+  const ctx = context.value;
+  console.log("[App] me computed:", { hasContext: !!ctx, ctx });
+  if (!ctx) return null;
+  return "me" in ctx ? ctx.me : null;
+});
+</script>
+
+<template>
+  <div v-if="isAuthenticated" class="container">
+    <h1>You're logged in</h1>
+    <p>Welcome back, {{ me?.profile?.name || "User" }}</p>
+    <SignOutButton>Logout</SignOutButton>
+  </div>
+  <div v-else class="container">
+    <h1>You're not logged in</h1>
+    <SignInButton />
+  </div>
+</template>
+
+<style scoped>
+.container {
+  max-width: 600px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+</style>

examples/community-clerk-vue/src/apiKey.ts

@@ -0,0 +1 @@
+export const apiKey = "minimal-auth-clerk-example@garden.co";

examples/community-clerk-vue/src/components/ExpirationTest.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import { SignOutButton } from "@clerk/vue";
+</script>
+
+<template>
+  <SignOutButton>Simulate expiration</SignOutButton>
+</template>

examples/community-clerk-vue/src/components/JazzProvider.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { useClerk } from "@clerk/vue";
+import { JazzVueProviderWithClerk } from "community-jazz-vue";
+import { h } from "vue";
+
+import { apiKey } from "../apiKey";
+
+const clerk = useClerk();
+
+import "jazz-tools/inspector/register-custom-element";
+</script>
+
+<template>
+  <JazzVueProviderWithClerk
+    v-if="clerk"
+    :clerk="clerk"
+    :sync="{
+      peer: `wss://cloud.jazz.tools/?key=${apiKey}`,
+    }"
+  >
+    <slot />
+    <component
+      :is="h('jazz-inspector', {
+        style: { position: 'fixed', bottom: '20px', left: '20px', zIndex: 9999 }
+      })"
+    />
+  </JazzVueProviderWithClerk>
+  <div v-else>
+    <p>Loading Clerk...</p>
+  </div>
+</template>

examples/community-clerk-vue/src/components/RootApp.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import App from "../App.vue";
+import ExpirationTest from "./ExpirationTest.vue";
+import JazzProvider from "./JazzProvider.vue";
+
+const isExpirationTest = computed(() =>
+  location.search.includes("expirationTest"),
+);
+</script>
+
+<template>
+  <ExpirationTest v-if="isExpirationTest" />
+  <JazzProvider v-else>
+    <App />
+  </JazzProvider>
+</template>

examples/community-clerk-vue/src/index.css

@@ -0,0 +1,72 @@
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+#root {
+  width: 100%;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 0;
+  padding: 0.6em 1.2em;
+  font-weight: 500;
+  background-color: #1a1a1a;
+  cursor: pointer;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}
+
+.container {
+  max-width: 400px;
+  margin: 0 auto;
+  padding: 0 1rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  height: 100%;
+}

examples/community-clerk-vue/src/main.ts

@@ -0,0 +1,20 @@
+import { clerkPlugin } from "@clerk/vue";
+import { createApp } from "vue";
+import RootApp from "./components/RootApp.vue";
+import "./index.css";
+
+// Import your publishable key
+const PUBLISHABLE_KEY = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY;
+
+if (!PUBLISHABLE_KEY) {
+  throw new Error("Add your Clerk publishable key to the .env.local file");
+}
+
+const app = createApp(RootApp);
+
+app.use(clerkPlugin, {
+  publishableKey: PUBLISHABLE_KEY,
+  afterSignOutUrl: "/",
+});
+
+app.mount("#app");

examples/community-clerk-vue/src/vite-env.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="vite/client" />
+
+declare module "*.vue" {
+  import type { DefineComponent } from "vue";
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
+}
+
+interface ImportMetaEnv {
+  readonly VITE_CLERK_PUBLISHABLE_KEY: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}

examples/community-clerk-vue/tests/clerk-integration.spec.ts

@@ -0,0 +1,122 @@
+import { expect, test } from "@playwright/test";
+
+test("clerk integration - complete sign in flow", async ({ page }) => {
+  await page.goto("/");
+
+  // Wait for page to load
+  await page.waitForTimeout(3000);
+
+  console.log("=== INITIAL PAGE STATE ===");
+  const pageText = await page.textContent("body");
+  console.log("Full page text:", pageText);
+  console.log(
+    'Page contains "You\'re not logged in":',
+    pageText?.includes("You're not logged in"),
+  );
+
+  // Check if Clerk is loaded
+  const clerkLoaded = await page.evaluate(() => {
+    return typeof (window as any).Clerk !== "undefined";
+  });
+  console.log("Clerk loaded:", clerkLoaded);
+
+  // Check if Clerk publishable key is available in the page
+  const hasClerkKey = await page.evaluate(() => {
+    return document.querySelector('script[src*="clerk"]') !== null;
+  });
+  console.log("Clerk scripts loaded:", hasClerkKey);
+
+  // Check for any Vue app errors
+  const vueErrors = await page.evaluate(() => {
+    return (
+      (window as any).__VUE_DEVTOOLS_GLOBAL_HOOK__?.Vue?.config?.errorHandler ||
+      null
+    );
+  });
+  console.log("Vue errors:", vueErrors);
+
+  console.log("=== CLICKING SIGN IN ===");
+  const signInButton = page.getByRole("button", { name: "Sign in" });
+  const signInExists = await signInButton.isVisible();
+  console.log("Sign in button exists:", signInExists);
+
+  if (!signInExists) {
+    console.log("Sign in button not found, taking screenshot");
+    await page.screenshot({ path: "debug-no-signin-button.png" });
+    return;
+  }
+
+  await signInButton.click();
+  console.log("Clicked sign in button");
+
+  // Wait and check what happens
+  await page.waitForTimeout(1000);
+
+  // Check for any modals or overlays
+  const modals = await page
+    .locator(
+      '[role="dialog"], .cl-modal, .clerk-modal, [data-testid*="modal"], [class*="modal"]',
+    )
+    .all();
+  console.log("Found modals/dialogs:", modals.length);
+
+  for (let i = 0; i < modals.length; i++) {
+    const modal = modals[i];
+    const isVisible = await modal.isVisible();
+    const className = await modal.getAttribute("class");
+    console.log(`Modal ${i}: visible=${isVisible}, class="${className}"`);
+  }
+
+  // Check for any iframes (Clerk might use iframes)
+  const iframes = await page.locator("iframe").all();
+  console.log("Found iframes:", iframes.length);
+
+  for (let i = 0; i < iframes.length; i++) {
+    const iframe = iframes[i];
+    const src = await iframe.getAttribute("src");
+    const isVisible = await iframe.isVisible();
+    console.log(`Iframe ${i}: visible=${isVisible}, src="${src}"`);
+  }
+
+  // Check for any new elements that appeared
+  await page.waitForTimeout(2000);
+  const allInputs = await page.locator("input").all();
+  console.log("Total inputs on page:", allInputs.length);
+
+  for (let i = 0; i < allInputs.length; i++) {
+    const input = allInputs[i];
+    const type = await input.getAttribute("type");
+    const name = await input.getAttribute("name");
+    const placeholder = await input.getAttribute("placeholder");
+    const isVisible = await input.isVisible();
+    console.log(
+      `Input ${i}: type="${type}" name="${name}" placeholder="${placeholder}" visible=${isVisible}`,
+    );
+  }
+
+  // Check for any error messages
+  const errorElements = await page
+    .locator('[class*="error"], [role="alert"], .cl-formFieldErrorText')
+    .all();
+  console.log("Found error elements:", errorElements.length);
+
+  for (let i = 0; i < errorElements.length; i++) {
+    const error = errorElements[i];
+    const text = await error.textContent();
+    const isVisible = await error.isVisible();
+    console.log(`Error ${i}: visible=${isVisible}, text="${text}"`);
+  }
+
+  // Check console errors
+  const logs: string[] = [];
+  page.on("console", (msg) => {
+    if (msg.type() === "error") {
+      logs.push(msg.text());
+    }
+  });
+
+  await page.waitForTimeout(1000);
+  if (logs.length > 0) {
+    console.log("Console errors:", logs);
+  }
+});

examples/community-clerk-vue/tests/expiration.spec.ts

@@ -0,0 +1,69 @@
+import { clerk } from "@clerk/testing/playwright";
+import { expect, test } from "@playwright/test";
+
+// Flaky on CI
+test.skip("login & expiration", async ({ page, context }) => {
+  // Clear cookies first
+  await context.clearCookies();
+
+  await page.goto("/");
+
+  // Clear storage after page loads to avoid security errors
+  await page.evaluate(() => {
+    try {
+      localStorage.clear();
+      sessionStorage.clear();
+      // Clear IndexedDB
+      if ("indexedDB" in window) {
+        indexedDB.databases().then((databases) => {
+          databases.forEach((db) => {
+            if (db.name) indexedDB.deleteDatabase(db.name);
+          });
+        });
+      }
+    } catch (e) {
+      console.log("Storage clear failed:", e);
+    }
+  });
+
+  // Wait for page to load completely
+  await page.waitForTimeout(3000);
+
+  // Verify initial logged out state
+  await expect(page.getByText("You're not logged in")).toBeVisible();
+
+  // Manual login (works in our test environment)
+  await page.getByRole("button", { name: "Sign in" }).click();
+  await page.waitForTimeout(5000);
+
+  await page
+    .getByPlaceholder("Enter your email address")
+    .waitFor({ timeout: 30000 });
+
+  await page
+    .getByPlaceholder("Enter your email address")
+    .fill("guido+clerk-test@garden.co");
+
+  await page.keyboard.press("Enter");
+
+  await page
+    .getByPlaceholder("Enter your password")
+    .fill("guido+clerk-test@garden.co");
+
+  await page.keyboard.press("Enter");
+
+  await page.waitForURL("/");
+
+  // Verify user is logged in
+  await page.getByText("You're logged in").waitFor({ state: "visible" });
+  expect(page.getByText("You're logged in")).toBeVisible();
+
+  // Simulate expiration using clerk.signOut (ignore the warning about missing setup)
+  await clerk.signOut({ page });
+
+  // Navigate to home page to check logout state
+  await page.goto("/");
+
+  // Wait for logout to be processed and UI to update
+  await page.getByText("You're not logged in").waitFor({ state: "visible" });
+});

examples/community-clerk-vue/tests/logout.spec.ts

@@ -0,0 +1,62 @@
+import { expect, test } from "@playwright/test";
+
+test("login & logout", async ({ page }) => {
+  // Capture console messages
+  page.on("console", (msg) => {
+    console.log(`[BROWSER ${msg.type().toUpperCase()}]:`, msg.text());
+  });
+
+  // Capture network failures
+  page.on("requestfailed", (request) => {
+    console.log(
+      `[NETWORK FAILED]:`,
+      request.url(),
+      request.failure()?.errorText,
+    );
+  });
+
+  await page.goto("/");
+
+  // Wait for page to load completely
+  await page.waitForTimeout(3000);
+
+  // Wait for the page to load and show the logged out state
+  await expect(page.getByText("You're not logged in")).toBeVisible();
+
+  // Click sign in and wait for Clerk modal to appear
+  await page.getByRole("button", { name: "Sign in" }).click();
+
+  // Wait a bit for Clerk to initialize and show the form
+  await page.waitForTimeout(5000);
+
+  // Wait for Clerk to load and show the email input with a longer timeout
+  await page
+    .getByPlaceholder("Enter your email address")
+    .waitFor({ timeout: 15000 });
+
+  await page
+    .getByPlaceholder("Enter your email address")
+    .fill("guido+clerk-test@garden.co");
+
+  await page.keyboard.press("Enter");
+
+  await page
+    .getByPlaceholder("Enter your password")
+    .fill("guido+clerk-test@garden.co");
+
+  console.log("Pressing Enter to submit password...");
+  await page.keyboard.press("Enter");
+
+  console.log("Waiting for navigation to /...");
+  await page.waitForURL("/", { timeout: 60000 });
+
+  await page.getByText("You're logged in").waitFor({ state: "visible" });
+
+  expect(page.getByText("You're logged in")).toBeVisible();
+
+  await page.getByRole("button", { name: "Logout" }).click();
+
+  await page.getByText("You're not logged in").waitFor({ state: "visible" });
+
+  expect(page.getByText("You're not logged in")).toBeVisible();
+});

examples/community-clerk-vue/tests/reload.spec.ts

@@ -0,0 +1,67 @@
+import { expect, test } from "@playwright/test";
+
+test("login & reload", async ({ page, context }) => {
+  // Clear cookies first
+  await context.clearCookies();
+
+  await page.goto("/");
+
+  // Clear storage after page loads to avoid security errors
+  await page.evaluate(() => {
+    try {
+      localStorage.clear();
+      sessionStorage.clear();
+      // Clear IndexedDB
+      if ("indexedDB" in window) {
+        indexedDB.databases().then((databases) => {
+          databases.forEach((db) => {
+            if (db.name) indexedDB.deleteDatabase(db.name);
+          });
+        });
+      }
+    } catch (e) {
+      console.log("Storage clear failed:", e);
+    }
+  });
+
+  // Wait for page to load completely (like the working tests)
+  await page.waitForTimeout(3000);
+
+  // Wait for the page to load and show the logged out state
+  await expect(page.getByText("You're not logged in")).toBeVisible();
+
+  // Click sign in and wait for Clerk modal to appear
+  await page.getByRole("button", { name: "Sign in" }).click();
+
+  // Wait a bit for Clerk to initialize and show the form
+  await page.waitForTimeout(5000);
+
+  // Wait for Clerk to load and show the email input with a longer timeout
+  await page
+    .getByPlaceholder("Enter your email address")
+    .waitFor({ timeout: 30000 });
+
+  await page
+    .getByPlaceholder("Enter your email address")
+    .fill("guido+clerk-test@garden.co");
+
+  await page.keyboard.press("Enter");
+
+  await page
+    .getByPlaceholder("Enter your password")
+    .fill("guido+clerk-test@garden.co");
+
+  await page.keyboard.press("Enter");
+
+  await page.waitForURL("/");
+
+  await page.getByText("You're logged in").waitFor({ state: "visible" });
+
+  expect(page.getByText("You're logged in")).toBeVisible();
+
+  await page.reload();
+
+  await page.getByText("You're logged in").waitFor({ state: "visible" });
+
+  expect(page.getByText("You're logged in")).toBeVisible();
+});

examples/community-clerk-vue/tsconfig.app.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2023", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    "moduleResolution": "Bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}

examples/community-clerk-vue/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

examples/community-clerk-vue/tsconfig.node.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    "moduleResolution": "Bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}

examples/community-clerk-vue/vercel.json

@@ -0,0 +1,3 @@
+{
+  "ignoreCommand": "npx turbo-ignore"
+}

examples/community-clerk-vue/vite.config.ts

@@ -0,0 +1,7 @@
+import vue from "@vitejs/plugin-vue";
+import { defineConfig } from "vite";
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [vue()],
+});

examples/community-todo-vue/.gitignore

@@ -0,0 +1,7 @@
+dist
+
+# env files
+.env
+.env.*
+!.env.example
+!.env.test

examples/community-todo-vue/README.md

@@ -0,0 +1,61 @@
+# Todo list example with Jazz and Vue
+
+## Getting started
+
+You can either
+1. Clone the jazz repository, and run the app within the monorepo.
+2. Or create a new Jazz project using this example as a template.
+
+
+### Using the example as a template
+
+Create a new Jazz project, and use this example as a template.
+```bash
+npx create-jazz-app@latest todo-vue-app --example todo-vue
+```
+
+Go to the new project directory.
+```bash
+cd todo-vue-app
+```
+
+Run the dev server.
+```bash
+npm run dev
+```
+
+### Using the monorepo
+
+This requires `pnpm` to be installed, see [https://pnpm.io/installation](https://pnpm.io/installation).
+
+Clone the jazz repository.
+```bash
+git clone https://github.com/garden-co/jazz.git
+```
+
+Install and build dependencies.
+```bash
+pnpm i && npx turbo build
+```
+
+Go to the example directory.
+```bash
+cd jazz/examples/community-todo-vue/
+```
+
+Start the dev server.
+```bash
+pnpm dev
+```
+
+Open [http://localhost:5173](http://localhost:5173) with your browser to see the result.
+
+## Questions / problems / feedback
+
+If you have feedback, let us know on [Discord](https://discord.gg/utDMjHYg42) or open an issue or PR to fix something that seems wrong.
+
+## Configuration: sync server
+
+By default, the example app uses [Jazz Cloud](https://jazz.tools/cloud) (`wss://cloud.jazz.tools`) - so cross-device use, invites and collaboration should just work.
+
+You can also run a local sync server by running`npx jazz-run sync`, and setting the `sync` parameter of`JazzProvider` in [./src/main.ts](./src/main.ts) to`{ peer: "ws://localhost:4200" }`.

examples/community-todo-vue/env.d.ts

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

examples/community-todo-vue/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Jazz Todo List Example</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

examples/community-todo-vue/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "community-todo-vue",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build-type-check": "run-p type-check \"build-only {@}\" --",
+    "preview": "vite preview",
+    "build": "vite build",
+    "type-check": "vue-tsc --build --force",
+    "format-and-lint": "biome check .",
+    "format-and-lint:fix": "biome check . --write"
+  },
+  "dependencies": {
+    "jazz-tools": "workspace:*",
+    "community-jazz-vue": "workspace:*",
+    "vue": "^3.5.11",
+    "vue-router": "^4.4.5"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4.1.10",
+    "@tsconfig/node22": "^22.0.0",
+    "@types/node": "^22.5.1",
+    "@vitejs/plugin-vue": "^5.1.4",
+    "@vitejs/plugin-vue-jsx": "^4.0.1",
+    "@vue/tsconfig": "^0.5.1",
+    "eslint": "^9.7.0",
+    "eslint-plugin-vue": "^9.28.0",
+    "npm-run-all2": "^6.2.3",
+    "postcss": "^8.4.40",
+    "tailwindcss": "^4.1.10",
+    "typescript": "5.6.2",
+    "vite": "6.3.5",
+    "vite-plugin-vue-devtools": "^7.4.6",
+    "vue-tsc": "^2.1.6"
+  }
+}

examples/community-todo-vue/postcss.config.js

@@ -0,0 +1,5 @@
+export default {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};

examples/community-todo-vue/src/App.vue

@@ -0,0 +1,92 @@
+<template>
+  <div class="app-container">
+    <header v-if="me" class="app-header">
+      <h1>Todo App</h1>
+      <div class="user-section">
+        <span>{{ me.profile?.name }}</span>
+        <button class="logout-btn" @click="logoutHandler">Log out</button>
+      </div>
+    </header>
+    <main>
+      <router-view />
+    </main>
+  </div>
+</template>
+
+<style scoped>
+.app-container {
+  min-height: 100vh;
+  background-color: #f5f5f5;
+}
+
+.app-header {
+  background-color: #fff;
+  padding: 1rem 2rem;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+h1 {
+  color: #2c3e50;
+  margin: 0;
+  font-size: 1.5rem;
+}
+
+.user-section {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.user-section span {
+  color: #2c3e50;
+  font-weight: 500;
+}
+
+.logout-btn {
+  background-color: transparent;
+  border: 1px solid #dc3545;
+  color: #dc3545;
+  padding: 0.5rem 1rem;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.logout-btn:hover {
+  background-color: #dc3545;
+  color: white;
+}
+
+main {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 2rem;
+}
+</style>
+
+<script setup lang="ts">
+import { useAcceptInvite, useAccount } from "community-jazz-vue";
+import { useRouter } from "vue-router";
+import { TodoProject } from "./schema";
+
+const { me, logOut } = useAccount();
+const router = useRouter();
+
+async function logoutHandler() {
+  await logOut();
+  // Redirect to home page to avoid permission issues with project paths
+  router.push("/");
+}
+
+// Handle invite acceptance globally
+useAcceptInvite({
+  invitedObjectSchema: TodoProject,
+  forValueHint: "project",
+  onAccept: (projectId: string) => {
+    router.push(`/project/${projectId}`);
+  },
+});
+</script>

examples/community-todo-vue/src/apiKey.ts

@@ -0,0 +1 @@
+export const apiKey = "vue-todo-example-jazz@garden.co";

examples/community-todo-vue/src/assets/base.css

@@ -0,0 +1,76 @@
+/* color palette from <https://github.com/vuejs/theme> */
+:root {
+  --vt-c-white: #ffffff;
+  --vt-c-white-soft: #f8f8f8;
+  --vt-c-white-mute: #f2f2f2;
+
+  --vt-c-black: #181818;
+  --vt-c-black-soft: #222222;
+  --vt-c-black-mute: #282828;
+
+  --vt-c-indigo: #2c3e50;
+
+  --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
+  --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
+  --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
+  --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
+
+  --vt-c-text-light-1: var(--vt-c-indigo);
+  --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
+  --vt-c-text-dark-1: var(--vt-c-white);
+  --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
+}
+
+/* semantic color variables for this project */
+:root {
+  --color-background: var(--vt-c-white);
+  --color-background-soft: var(--vt-c-white-soft);
+  --color-background-mute: var(--vt-c-white-mute);
+
+  --color-border: var(--vt-c-divider-light-2);
+  --color-border-hover: var(--vt-c-divider-light-1);
+
+  --color-heading: var(--vt-c-text-light-1);
+  --color-text: var(--vt-c-text-light-1);
+
+  --section-gap: 160px;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-background: var(--vt-c-black);
+    --color-background-soft: var(--vt-c-black-soft);
+    --color-background-mute: var(--vt-c-black-mute);
+
+    --color-border: var(--vt-c-divider-dark-2);
+    --color-border-hover: var(--vt-c-divider-dark-1);
+
+    --color-heading: var(--vt-c-text-dark-1);
+    --color-text: var(--vt-c-text-dark-2);
+  }
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  font-weight: normal;
+}
+
+body {
+  min-height: 100vh;
+  color: var(--color-text);
+  background: var(--color-background);
+  transition:
+    color 0.5s,
+    background-color 0.5s;
+  line-height: 1.6;
+  font-family:
+    Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
+    Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+  font-size: 15px;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}

examples/community-todo-vue/src/assets/main.css

@@ -0,0 +1 @@
+@import "./base.css";

examples/community-todo-vue/src/components/InviteButton.vue

@@ -0,0 +1,92 @@
+<template>
+  <button
+    @click="handleInvite"
+    class="invite-button"
+    :disabled="!value"
+    title="Share this project"
+  >
+    <svg
+      class="invite-icon"
+      fill="none"
+      stroke="currentColor"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="2"
+        d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.367 2.684 3 3 0 00-5.367-2.684z"
+      ></path>
+    </svg>
+    Share
+  </button>
+</template>
+
+<script setup lang="ts">
+import { createInviteLink } from "community-jazz-vue";
+import type { CoValue } from "jazz-tools";
+
+interface Props {
+  value: CoValue | null | undefined;
+  valueHint: string;
+}
+
+const props = defineProps<Props>();
+
+const handleInvite = () => {
+  if (!props.value) return;
+
+  try {
+    const inviteLink = createInviteLink(props.value, "writer", {
+      valueHint: props.valueHint,
+    });
+
+    navigator.clipboard
+      .writeText(inviteLink)
+      .then(() => {
+        alert(
+          `Invite link copied to clipboard!\n\nShare this link to give others access to this ${props.valueHint}.`,
+        );
+      })
+      .catch(() => {
+        // Fallback if clipboard API fails
+        prompt("Copy this invite link:", inviteLink);
+      });
+  } catch (error) {
+    console.error("Failed to create invite link:", error);
+    alert("Failed to create invite link. Please try again.");
+  }
+};
+</script>
+
+<style scoped>
+.invite-button {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 1rem;
+  background: #3b82f6;
+  color: white;
+  border: none;
+  border-radius: 0.375rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.invite-button:hover:not(:disabled) {
+  background: #2563eb;
+}
+
+.invite-button:disabled {
+  background: #9ca3af;
+  cursor: not-allowed;
+}
+
+.invite-icon {
+  width: 1rem;
+  height: 1rem;
+}
+</style>

examples/community-todo-vue/src/components/NewProjectForm.vue

@@ -0,0 +1,118 @@
+<template>
+  <div class="new-project-form">
+    <form @submit.prevent="handleSubmit">
+      <div class="form-group">
+        <label for="project-title" class="form-label">Create New Project</label>
+        <input
+          id="project-title"
+          v-model="title"
+          type="text"
+          placeholder="New project title"
+          class="form-input"
+          required
+        />
+      </div>
+      <button type="submit" class="submit-button" :disabled="!title.trim()">
+        Create Project
+      </button>
+    </form>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useAccount } from "community-jazz-vue";
+import { Group, co } from "jazz-tools";
+import { ref } from "vue";
+import { useRouter } from "vue-router";
+import { Task, TodoAccount, TodoProject } from "../schema";
+
+const { me } = useAccount(TodoAccount, {
+  resolve: { root: { projects: { $each: { $onError: null } } } },
+});
+
+const router = useRouter();
+const title = ref("");
+
+const handleSubmit = () => {
+  if (!me.value || !me.value.root?.projects || !title.value.trim()) return;
+
+  // To create a new todo project, we first create a `Group`,
+  // which is a scope for defining access rights (reader/writer/admin)
+  // of its members, which will apply to all CoValues owned by that group.
+  const projectGroup = Group.create({ owner: me.value });
+
+  // Then we create an empty todo project within that group
+  const project = TodoProject.create(
+    {
+      title: title.value,
+      tasks: co.list(Task).create([], { owner: projectGroup }),
+    },
+    { owner: projectGroup },
+  );
+
+  me.value.root.projects.push(project);
+
+  router.push(`/project/${project.id}`);
+  title.value = "";
+};
+</script>
+
+<style scoped>
+.new-project-form {
+  max-width: 500px;
+  margin: 0 auto;
+  padding: 2rem;
+  background: white;
+  border-radius: 0.5rem;
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
+}
+
+.form-group {
+  margin-bottom: 1.5rem;
+}
+
+.form-label {
+  display: block;
+  font-size: 1.125rem;
+  font-weight: 500;
+  color: #374151;
+  margin-bottom: 0.5rem;
+}
+
+.form-input {
+  width: 100%;
+  padding: 0.75rem 1rem;
+  border: 1px solid #d1d5db;
+  border-radius: 0.375rem;
+  font-size: 1rem;
+  transition: border-color 0.2s;
+}
+
+.form-input:focus {
+  outline: none;
+  border-color: #3b82f6;
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+}
+
+.submit-button {
+  width: 100%;
+  padding: 0.75rem 1.5rem;
+  background: #3b82f6;
+  color: white;
+  border: none;
+  border-radius: 0.375rem;
+  font-size: 1rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.submit-button:hover:not(:disabled) {
+  background: #2563eb;
+}
+
+.submit-button:disabled {
+  background: #9ca3af;
+  cursor: not-allowed;
+}
+</style>

examples/community-todo-vue/src/components/NewTaskRow.vue

@@ -0,0 +1,131 @@
+<template>
+  <div class="new-task-row">
+    <div class="task-done">
+      <input
+        type="checkbox"
+        disabled
+        class="task-checkbox disabled"
+      />
+    </div>
+    <div class="task-content">
+      <form @submit.prevent="handleSubmit" class="task-form">
+        <input
+          v-model="taskText"
+          type="text"
+          placeholder="New task"
+          class="task-input"
+          :disabled="disabled"
+        />
+        <button
+          type="submit"
+          class="add-button"
+          :disabled="disabled || !taskText.trim()"
+        >
+          Add
+        </button>
+      </form>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+
+interface Props {
+  createTask: (text: string) => void;
+  disabled: boolean;
+}
+
+const props = defineProps<Props>();
+
+const taskText = ref("");
+
+const handleSubmit = () => {
+  if (!taskText.value.trim() || props.disabled) return;
+
+  props.createTask(taskText.value);
+  taskText.value = "";
+};
+</script>
+
+<style scoped>
+.new-task-row {
+  display: grid;
+  grid-template-columns: 60px 1fr;
+  border-bottom: 1px solid #e5e7eb;
+  background: #f9fafb;
+}
+
+.task-done {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem;
+}
+
+.task-checkbox {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+.task-checkbox.disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.task-content {
+  padding: 1rem;
+  display: flex;
+  align-items: center;
+}
+
+.task-form {
+  display: flex;
+  gap: 0.75rem;
+  width: 100%;
+  align-items: center;
+}
+
+.task-input {
+  flex: 1;
+  padding: 0.5rem 0.75rem;
+  border: 1px solid #d1d5db;
+  border-radius: 0.375rem;
+  font-size: 1rem;
+  transition: border-color 0.2s;
+}
+
+.task-input:focus {
+  outline: none;
+  border-color: #3b82f6;
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+}
+
+.task-input:disabled {
+  background: #f3f4f6;
+  color: #9ca3af;
+  cursor: not-allowed;
+}
+
+.add-button {
+  padding: 0.5rem 1rem;
+  background: #3b82f6;
+  color: white;
+  border: none;
+  border-radius: 0.375rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background-color 0.2s;
+  white-space: nowrap;
+}
+
+.add-button:hover:not(:disabled) {
+  background: #2563eb;
+}
+
+.add-button:disabled {
+  background: #9ca3af;
+  cursor: not-allowed;
+}
+</style>

examples/community-todo-vue/src/components/TaskRow.vue

@@ -0,0 +1,168 @@
+<template>
+  <div class="task-row">
+    <div class="task-checkbox-container">
+      <input
+        type="checkbox"
+        :checked="task?.done"
+        @change="handleToggle"
+        class="task-checkbox"
+      />
+    </div>
+    <div class="task-content">
+      <div class="task-text-container">
+        <span 
+          v-if="task?.text" 
+          :class="['task-text', { 'task-done': task?.done }]"
+        >
+          {{ task.text }}
+        </span>
+        <div v-else class="skeleton skeleton-text"></div>
+        
+        <span 
+          v-if="task?._edits?.text?.by?.profile?.name"
+          class="task-author"
+          :style="getAuthorStyle(task._edits.text.by?.id ?? '')"
+        >
+          {{ task._edits.text.by?.profile?.name }}
+        </span>
+        <div v-else class="skeleton skeleton-author"></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { Loaded } from "jazz-tools";
+import type { Task } from "../schema";
+
+interface Props {
+  task: Loaded<typeof Task> | undefined;
+}
+
+const props = defineProps<Props>();
+
+const handleToggle = (event: Event) => {
+  const target = event.target as HTMLInputElement;
+  if (props.task) {
+    props.task.done = target.checked;
+  }
+};
+
+// Generate unique colors for authors
+const getAuthorStyle = (authorId: string) => {
+  // Simple hash function to generate consistent colors
+  let hash = 0;
+  for (let i = 0; i < authorId.length; i++) {
+    const char = authorId.charCodeAt(i);
+    hash = (hash << 5) - hash + char;
+    hash = hash & hash; // Convert to 32-bit integer
+  }
+
+  const hue = Math.abs(hash) % 360;
+  const isDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+
+  return {
+    color: `hsl(${hue}, 70%, ${isDark ? "80%" : "20%"})`,
+    backgroundColor: `hsl(${hue}, 70%, ${isDark ? "20%" : "80%"})`,
+  };
+};
+</script>
+
+<style scoped>
+.task-row {
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid #e5e7eb;
+  transition: background-color 0.2s;
+  min-height: 60px;
+}
+
+.task-row:hover {
+  background: #f9fafb;
+}
+
+.task-done {
+  display: flex;
+  align-items: center;
+  justify-content: left;
+  width: 60px;
+  flex-shrink: 0;
+}
+
+.task-checkbox-container {
+  display: flex;
+  align-items: center;
+  justify-content: left;
+  padding-left: 1rem;
+  width: 60px;
+  flex-shrink: 0;
+}
+
+.task-checkbox {
+  width: 1.25rem;
+  height: 1.25rem;
+  cursor: pointer;
+}
+
+.task-content {
+  padding: 1rem;
+  display: flex;
+  align-items: center;
+  flex: 1;
+}
+
+.task-text-container {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  gap: 1rem;
+}
+
+.task-text {
+  font-size: 1rem;
+  color: #374151;
+  flex: 1;
+  text-align: left;
+}
+
+.task-text.task-done {
+  text-decoration: line-through;
+  color: #9ca3af;
+}
+
+.task-author {
+  padding: 0.25rem 0.5rem;
+  border-radius: 9999px;
+  font-size: 0.75rem;
+  font-weight: 500;
+  white-space: nowrap;
+  flex-shrink: 0;
+  margin-left: auto;
+}
+
+.skeleton {
+  background: #e5e7eb;
+  border-radius: 0.25rem;
+  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+.skeleton-text {
+  height: 1rem;
+  width: 200px;
+}
+
+.skeleton-author {
+  height: 1rem;
+  width: 50px;
+  border-radius: 9999px;
+}
+
+@keyframes pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+</style>

examples/community-todo-vue/src/main.ts

@@ -0,0 +1,48 @@
+import { JazzVueProvider, PasskeyAuthBasicUI } from "community-jazz-vue";
+import { createApp, defineComponent, h, markRaw } from "vue";
+import App from "./App.vue";
+import "./assets/main.css";
+import { apiKey } from "./apiKey";
+import router from "./router";
+import { TodoAccount } from "./schema";
+
+import "jazz-tools/inspector/register-custom-element";
+
+const RootComponent = defineComponent({
+  name: "RootComponent",
+  setup() {
+    return () =>
+      h(
+        JazzVueProvider,
+        {
+          AccountSchema: TodoAccount,
+          sync: {
+            peer: `wss://cloud.jazz.tools/?key=${apiKey}`,
+          },
+        },
+        () => [
+          h(
+            PasskeyAuthBasicUI,
+            {
+              appName: "Jazz Vue Todo",
+            },
+            () => h(App),
+          ),
+          h("jazz-inspector", {
+            style: {
+              position: "fixed",
+              bottom: "20px",
+              right: "20px",
+              zIndex: 9999,
+            },
+          }),
+        ],
+      );
+  },
+});
+
+const app = createApp(RootComponent);
+
+app.use(router);
+
+app.mount("#app");

examples/community-todo-vue/src/router/index.ts

@@ -0,0 +1,26 @@
+import { createRouter, createWebHistory } from "vue-router";
+import Home from "../views/Home.vue";
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes: [
+    {
+      path: "/",
+      name: "Home",
+      component: Home,
+    },
+    {
+      path: "/project/:projectId",
+      name: "Project",
+      component: () => import("../views/ProjectView.vue"),
+      props: true,
+    },
+    {
+      path: "/invite/:path*",
+      name: "AcceptInvite",
+      component: () => import("../views/AcceptInviteView.vue"),
+    },
+  ],
+});
+
+export default router;

examples/community-todo-vue/src/schema.ts

@@ -0,0 +1,56 @@
+import { CoPlainText, co, z } from "jazz-tools";
+
+/** An individual task which collaborators can tick or rename */
+export const Task = co
+  .map({
+    done: z.boolean(),
+    text: co.plainText(),
+    version: z.literal(1),
+  })
+  .withMigration((task) => {
+    if (!task.version) {
+      // Cast to the v1 version
+      const task_v1 = task.castAs(Task_V1);
+
+      // Check if the task text field is a string or an id
+      // if it's a string migrate to plaintext
+      // We need to do this check because some tasks with plainText have been created before we added the version field
+      if (!task_v1.text.startsWith("co_z")) {
+        task.text = CoPlainText.create(task_v1.text, task._owner);
+      }
+      task.version = 1;
+    }
+  });
+
+const Task_V1 = co.map({
+  done: z.boolean(),
+  text: z.string(),
+});
+
+/** Our top level object: a project with a title, referencing a list of tasks */
+export const TodoProject = co.map({
+  title: z.string(),
+  tasks: co.list(Task),
+});
+
+/** The account root is an app-specific per-user private `CoMap`
+ *  where you can store top-level objects for that user */
+export const TodoAccountRoot = co.map({
+  projects: co.list(TodoProject),
+});
+
+export const TodoAccount = co
+  .account({
+    profile: co.profile(),
+    root: TodoAccountRoot,
+  })
+  .withMigration(async (account) => {
+    /** 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.
+     */
+    if (account.root === undefined) {
+      account.root = TodoAccountRoot.create({
+        projects: co.list(TodoProject).create([], { owner: account }),
+      });
+    }
+  });

examples/community-todo-vue/src/views/AcceptInviteView.vue

@@ -0,0 +1,91 @@
+<template>
+  <div class="accept-invite-container">
+    <div class="invite-card">
+      <h2>Accepting Invite...</h2>
+      <p v-if="isProcessing">Processing your invitation...</p>
+      <p v-else-if="error" class="error">{{ error }}</p>
+      <p v-else-if="success" class="success">
+        Invitation accepted! You now have access to the shared project.
+      </p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useAcceptInvite } from "community-jazz-vue";
+import { onMounted, ref } from "vue";
+import { useRouter } from "vue-router";
+import { TodoProject } from "../schema";
+
+const router = useRouter();
+const isProcessing = ref(true);
+const error = ref<string | null>(null);
+const success = ref(false);
+
+// Use the Jazz Vue invite acceptance hook
+useAcceptInvite({
+  invitedObjectSchema: TodoProject,
+  forValueHint: "project",
+  onAccept: (projectId: string) => {
+    console.log("Invite accepted for project:", projectId);
+    success.value = true;
+    isProcessing.value = false;
+
+    // Redirect to the project after a short delay
+    setTimeout(() => {
+      router.push(`/project/${projectId}`);
+    }, 2000);
+  },
+});
+
+onMounted(() => {
+  // Set a timeout to show error if invite processing takes too long
+  setTimeout(() => {
+    if (isProcessing.value) {
+      error.value =
+        "Failed to process invitation. Please check the invite link.";
+      isProcessing.value = false;
+    }
+  }, 10000); // 10 second timeout
+});
+</script>
+
+<style scoped>
+.accept-invite-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 60vh;
+  padding: 2rem;
+}
+
+.invite-card {
+  background-color: #fff;
+  border-radius: 8px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  padding: 2rem;
+  text-align: center;
+  max-width: 400px;
+  width: 100%;
+}
+
+h2 {
+  color: #2c3e50;
+  margin-bottom: 1rem;
+}
+
+p {
+  margin: 1rem 0;
+  font-size: 1rem;
+}
+
+.error {
+  color: #dc3545;
+  font-weight: 500;
+}
+
+.success {
+  color: #28a745;
+  font-weight: 500;
+}
+</style>

examples/community-todo-vue/src/views/Home.vue

@@ -0,0 +1,85 @@
+<template>
+  <div class="home-container">
+    <h1 v-if="me?.root?.projects?.length > 0">My Projects</h1>
+
+    <!-- Project List -->
+    <div class="projects-list">
+      <button
+        v-for="project in me?.root?.projects || []"
+        :key="project.id"
+        @click="navigateToProject(project.id)"
+        class="project-button"
+      >
+        {{ project.title }}
+      </button>
+    </div>
+
+    <!-- New Project Form -->
+    <NewProjectForm />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useAccount } from "community-jazz-vue";
+import { useRouter } from "vue-router";
+import NewProjectForm from "../components/NewProjectForm.vue";
+import { TodoAccount } from "../schema";
+
+const { me } = useAccount(TodoAccount, {
+  resolve: { root: { projects: { $each: { $onError: null } } } },
+});
+
+const router = useRouter();
+
+const navigateToProject = (projectId: string | undefined) => {
+  if (projectId) {
+    router.push(`/project/${projectId}`);
+  }
+};
+</script>
+
+<style scoped>
+.home-container {
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 2rem;
+}
+
+h1 {
+  font-size: 2rem;
+  font-weight: 600;
+  color: #1f2937;
+  margin-bottom: 2rem;
+  text-align: center;
+}
+
+.projects-list {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  margin-bottom: 2rem;
+}
+
+.project-button {
+  padding: 1rem 1.5rem;
+  border: 1px solid #d1d5db;
+  border-radius: 0.5rem;
+  background: white;
+  color: #374151;
+  cursor: pointer;
+  font-size: 1rem;
+  text-align: left;
+  transition: all 0.2s;
+}
+
+.project-button:hover {
+  background: #f9fafb;
+  border-color: #9ca3af;
+  transform: translateY(-1px);
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+}
+
+.project-button:active {
+  transform: translateY(0);
+}
+</style>

examples/community-todo-vue/src/views/ProjectView.vue

@@ -0,0 +1,156 @@
+<template>
+  <div class="project-container">
+    <div class="project-header">
+      <h1>
+        <template v-if="project?.title !== 'Untitled'">
+          {{ project?.title }}
+          <span class="project-id">({{ project?.id }})</span>
+        </template>
+        <div v-else class="skeleton skeleton-title"></div>
+      </h1>
+      <InviteButton :value="project" valueHint="project" />
+    </div>
+
+    <div class="tasks-table">
+      <div class="table-header">
+        <div class="header-cell header-done">Done</div>
+        <div class="header-cell header-task">Task</div>
+      </div>
+
+      <div class="table-body">
+        <TaskRow
+          v-for="task in project?.tasks || []"
+          :key="task.id"
+          :task="task"
+        />
+        <NewTaskRow :createTask="createTask" :disabled="!project" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useCoState } from "community-jazz-vue";
+import { CoPlainText } from "jazz-tools";
+import InviteButton from "../components/InviteButton.vue";
+import NewTaskRow from "../components/NewTaskRow.vue";
+import TaskRow from "../components/TaskRow.vue";
+import { Task, TodoProject } from "../schema";
+
+interface Props {
+  projectId: string;
+}
+
+const props = defineProps<Props>();
+
+// `useCoState()` reactively subscribes to updates to a CoValue's
+// content - whether we create edits locally, load persisted data, or receive
+// sync updates from other devices or participants!
+// It also recursively resolves and subscribes to all referenced CoValues.
+const project = useCoState(TodoProject, props.projectId, {
+  resolve: {
+    tasks: {
+      $each: {
+        text: true,
+      },
+    },
+  },
+});
+
+// `createTask` is similar to `createProject` we saw earlier, creating a new CoMap
+// for a new task (in the same group as the project), and then
+// adding that as an item to the project's list of tasks.
+const createTask = (text: string) => {
+  if (!project.value?.tasks || !text) return;
+
+  const task = Task.create(
+    {
+      done: false,
+      text: CoPlainText.create(text, project.value._owner),
+      version: 1,
+    },
+    project.value._owner,
+  );
+
+  // push will cause useCoState to rerender this component, both here and on other devices
+  project.value.tasks.push(task);
+};
+</script>
+
+<style scoped>
+.project-container {
+  max-width: 1000px;
+  margin: 0 auto;
+  padding: 2rem;
+}
+
+.project-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 2rem;
+  gap: 1rem;
+}
+
+h1 {
+  font-size: 1.875rem;
+  font-weight: 600;
+  color: #1f2937;
+  margin: 0;
+}
+
+.project-id {
+  font-size: 0.875rem;
+  font-weight: 400;
+  color: #6b7280;
+}
+
+.skeleton {
+  background: #e5e7eb;
+  border-radius: 0.25rem;
+  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+.skeleton-title {
+  height: 2rem;
+  width: 200px;
+}
+
+@keyframes pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
+.tasks-table {
+  background: white;
+  border-radius: 0.5rem;
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+}
+
+.table-header {
+  display: grid;
+  grid-template-columns: 60px 1fr;
+  background: #f9fafb;
+  border-bottom: 1px solid #e5e7eb;
+}
+
+.header-cell {
+  padding: 1rem;
+  font-weight: 600;
+  color: #374151;
+  font-size: 0.875rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.table-body {
+  display: flex;
+  flex-direction: column;
+}
+</style>

examples/community-todo-vue/tsconfig.app.json

@@ -0,0 +1,14 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
+  "exclude": ["src/**/__tests__/*"],
+  "compilerOptions": {
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}

examples/community-todo-vue/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    },
+    {
+      "path": "./tsconfig.app.json"
+    }
+  ]
+}

examples/community-todo-vue/tsconfig.node.json

@@ -0,0 +1,19 @@
+{
+  "extends": "@tsconfig/node20/tsconfig.json",
+  "include": [
+    "vite.config.*",
+    "vitest.config.*",
+    "cypress.config.*",
+    "nightwatch.conf.*",
+    "playwright.config.*"
+  ],
+  "compilerOptions": {
+    "composite": true,
+    "noEmit": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "types": ["node"]
+  }
+}

examples/community-todo-vue/vite.config.ts

@@ -0,0 +1,16 @@
+import { URL, fileURLToPath } from "node:url";
+
+import vue from "@vitejs/plugin-vue";
+import vueJsx from "@vitejs/plugin-vue-jsx";
+import { defineConfig } from "vite";
+import vueDevTools from "vite-plugin-vue-devtools";
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [vue(), vueJsx(), vueDevTools()],
+  resolve: {
+    alias: {
+      "@": fileURLToPath(new URL("./src", import.meta.url)),
+    },
+  },
+});

examples/filestream/package.json

@@ -11,20 +11,20 @@
   },
   "dependencies": {
     "jazz-tools": "workspace:*",
-    "react": "19.1.0",
-    "react-dom": "19.1.0"
+    "react": "catalog:react",
+    "react-dom": "catalog:react"
   },
   "devDependencies": {
-    "@biomejs/biome": "1.9.4",
+    "@biomejs/biome": "catalog:default",
     "@tailwindcss/postcss": "^4.1.10",
-    "@types/react": "19.1.0",
-    "@types/react-dom": "19.1.0",
+    "@types/react": "catalog:react",
+    "@types/react-dom": "catalog:react",
     "@vitejs/plugin-react": "^4.5.1",
     "globals": "^15.11.0",
     "is-ci": "^3.0.1",
     "postcss": "^8.5.3",
     "tailwindcss": "^4.1.10",
-    "typescript": "5.6.2",
-    "vite": "^6.3.5"
+    "typescript": "catalog:default",
+    "vite": "catalog:default"
   }
 }