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

Version Packages
2025-08-15 14:33:35 +02:00 · 2025-08-15 12:31:47 +00:00 · 2025-08-15 14:29:33 +02:00 · 2025-08-15 14:27:30 +02:00 · 2025-08-15 14:26:30 +02:00 · 2025-08-15 13:21:28 +02:00
155 changed files with 12050 additions and 290 deletions
--- a/.changeset/config.json
+++ b/.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",
--- a/.github/workflows/playwright.yml
+++ b/.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"
--- a/biome.json
+++ b/biome.json
@@ -42,6 +42,15 @@
    }
  },
  "overrides": [
    {
      "includes": ["packages/community-jazz-vue/src/**"],
      "linter": {
        "enabled": true,
        "rules": {
          "recommended": true
        }
      }
    },
    {
      "includes": ["**/packages/**/src/**"],
      "linter": {
--- a/examples/chat-svelte/CHANGELOG.md
+++ b/examples/chat-svelte/CHANGELOG.md
@@ -1,5 +1,13 @@
 # passkey-svelte
 ## 0.0.115
 ### Patch Changes
 - Updated dependencies [794681a]
 - Updated dependencies [83fc22f]
  - jazz-tools@0.17.2
 ## 0.0.114
 ### Patch Changes
--- a/examples/chat-svelte/package.json
+++ b/examples/chat-svelte/package.json
@@ -1,6 +1,6 @@
 {
  "name": "chat-svelte",
-  "version": "0.0.114",
+  "version": "0.0.115",
  "type": "module",
  "private": true,
  "scripts": {
--- a/examples/community-chat-vue/.gitignore
+++ b/examples/community-chat-vue/.gitignore
@@ -0,0 +1,6 @@
 dist
 # env files
 .env
 .env.*
 !.env.example
 !.env.test
--- a/examples/community-chat-vue/CHANGELOG.md
+++ b/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
--- a/examples/community-chat-vue/README.md
+++ b/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" }`.
--- a/examples/community-chat-vue/env.d.ts
+++ b/examples/community-chat-vue/env.d.ts
@@ -0,0 +1 @@
 /// <reference types="vite/client" />
--- a/examples/community-chat-vue/index.html
+++ b/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>
--- a/examples/community-chat-vue/package.json
+++ b/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"
  }
 }
--- a/examples/community-chat-vue/postcss.config.js
+++ b/examples/community-chat-vue/postcss.config.js
@@ -0,0 +1,5 @@
 export default {
  plugins: {
    "@tailwindcss/postcss": {},
  },
 };
--- a/examples/community-chat-vue/public/favicon.ico
+++ b/examples/community-chat-vue/public/favicon.ico
--- a/examples/community-chat-vue/src/App.vue
+++ b/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>
--- a/examples/community-chat-vue/src/RootApp.vue
+++ b/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>
--- a/examples/community-chat-vue/src/apiKey.ts
+++ b/examples/community-chat-vue/src/apiKey.ts
@@ -0,0 +1 @@
 export const apiKey = "chat-example-jazz@garden.co";
--- a/examples/community-chat-vue/src/assets/base.css
+++ b/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;
 }
--- a/examples/community-chat-vue/src/assets/logo.svg
+++ b/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>
--- a/examples/community-chat-vue/src/assets/main.css
+++ b/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;
  }
 }
--- a/examples/community-chat-vue/src/components/AppContainer.vue
+++ b/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>
--- a/examples/community-chat-vue/src/components/BubbleBody.vue
+++ b/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>
--- a/examples/community-chat-vue/src/components/BubbleContainer.vue
+++ b/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>
--- a/examples/community-chat-vue/src/components/BubbleImage.vue
+++ b/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>
--- a/examples/community-chat-vue/src/components/BubbleInfo.vue
+++ b/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>
--- a/examples/community-chat-vue/src/components/ChatBody.vue
+++ b/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>
--- a/examples/community-chat-vue/src/components/ChatBubble.vue
+++ b/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>
--- a/examples/community-chat-vue/src/components/ChatInput.vue
+++ b/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>
--- a/examples/community-chat-vue/src/components/EmptyChatMessage.vue
+++ b/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>
--- a/examples/community-chat-vue/src/components/ImageInput.vue
+++ b/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>
--- a/examples/community-chat-vue/src/components/TopBar.vue
+++ b/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>
--- a/examples/community-chat-vue/src/index.css
+++ b/examples/community-chat-vue/src/index.css
@@ -0,0 +1 @@
@import "tailwindcss";
--- a/examples/community-chat-vue/src/main.ts
+++ b/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");
--- a/examples/community-chat-vue/src/router.ts
+++ b/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;
--- a/examples/community-chat-vue/src/schema.ts
+++ b/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);
--- a/examples/community-chat-vue/src/views/ChatView.vue
+++ b/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>
--- a/examples/community-chat-vue/src/views/HomeView.vue
+++ b/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>
--- a/examples/community-chat-vue/tsconfig.app.json
+++ b/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/*"]
    }
  }
 }
--- a/examples/community-chat-vue/tsconfig.json
+++ b/examples/community-chat-vue/tsconfig.json
@@ -0,0 +1,11 @@
 {
  "files": [],
  "references": [
    {
      "path": "./tsconfig.node.json"
    },
    {
      "path": "./tsconfig.app.json"
    }
  ]
 }
--- a/examples/community-chat-vue/tsconfig.node.json
+++ b/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"]
  }
 }
--- a/examples/community-chat-vue/vite.config.ts
+++ b/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)),
    },
  },
 });
--- a/examples/community-clerk-vue/.env.example
+++ b/examples/community-clerk-vue/.env.example
@@ -0,0 +1 @@
 VITE_CLERK_PUBLISHABLE_KEY=
--- a/examples/community-clerk-vue/.env.test
+++ b/examples/community-clerk-vue/.env.test
@@ -0,0 +1 @@
 VITE_CLERK_PUBLISHABLE_KEY=pk_test_ZXZpZGVudC1kYW5lLTg5LmNsZXJrLmFjY291bnRzLmRldiQ
--- a/examples/community-clerk-vue/.gitignore
+++ b/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
--- a/examples/community-clerk-vue/CHANGELOG.md
+++ b/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
--- a/examples/community-clerk-vue/README.md
+++ b/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.
--- a/examples/community-clerk-vue/index.html
+++ b/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>
--- a/examples/community-clerk-vue/package.json
+++ b/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"
  }
 }
--- a/examples/community-clerk-vue/playwright.config.ts
+++ b/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,
    },
  ],
 });
--- a/examples/community-clerk-vue/public/favicon.ico
+++ b/examples/community-clerk-vue/public/favicon.ico
--- a/examples/community-clerk-vue/src/App.vue
+++ b/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>
--- a/examples/community-clerk-vue/src/apiKey.ts
+++ b/examples/community-clerk-vue/src/apiKey.ts
@@ -0,0 +1 @@
 export const apiKey = "minimal-auth-clerk-example@garden.co";
--- a/examples/community-clerk-vue/src/components/ExpirationTest.vue
+++ b/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>
--- a/examples/community-clerk-vue/src/components/JazzProvider.vue
+++ b/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>
--- a/examples/community-clerk-vue/src/components/RootApp.vue
+++ b/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>
--- a/examples/community-clerk-vue/src/index.css
+++ b/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%;
 }
--- a/examples/community-clerk-vue/src/main.ts
+++ b/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");
--- a/examples/community-clerk-vue/src/vite-env.d.ts
+++ b/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;
 }
--- a/examples/community-clerk-vue/tests/clerk-integration.spec.ts
+++ b/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);
  }
 });
--- a/examples/community-clerk-vue/tests/expiration.spec.ts
+++ b/examples/community-clerk-vue/tests/expiration.spec.ts
@@ -0,0 +1,68 @@
 import { clerk } from "@clerk/testing/playwright";
 import { expect, test } from "@playwright/test";
 test("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" });
 });
--- a/examples/community-clerk-vue/tests/logout.spec.ts
+++ b/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();
 });
--- a/examples/community-clerk-vue/tests/reload.spec.ts
+++ b/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();
 });
--- a/examples/community-clerk-vue/tsconfig.app.json
+++ b/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"]
 }
--- a/examples/community-clerk-vue/tsconfig.json
+++ b/examples/community-clerk-vue/tsconfig.json
@@ -0,0 +1,7 @@
 {
  "files": [],
  "references": [
    { "path": "./tsconfig.app.json" },
    { "path": "./tsconfig.node.json" }
  ]
 }
--- a/examples/community-clerk-vue/tsconfig.node.json
+++ b/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"]
 }
--- a/examples/community-clerk-vue/vercel.json
+++ b/examples/community-clerk-vue/vercel.json
@@ -0,0 +1,3 @@
 {
  "ignoreCommand": "npx turbo-ignore"
 }
--- a/examples/community-clerk-vue/vite.config.ts
+++ b/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()],
 });
--- a/examples/community-todo-vue/.gitignore
+++ b/examples/community-todo-vue/.gitignore
@@ -0,0 +1,7 @@
 dist
 # env files
 .env
 .env.*
 !.env.example
 !.env.test
--- a/examples/community-todo-vue/CHANGELOG.md
+++ b/examples/community-todo-vue/CHANGELOG.md
--- a/examples/community-todo-vue/README.md
+++ b/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" }`.
--- a/examples/community-todo-vue/env.d.ts
+++ b/examples/community-todo-vue/env.d.ts
@@ -0,0 +1 @@
 /// <reference types="vite/client" />
--- a/examples/community-todo-vue/index.html
+++ b/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>
--- a/examples/community-todo-vue/package.json
+++ b/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"
  }
 }
--- a/examples/community-todo-vue/postcss.config.js
+++ b/examples/community-todo-vue/postcss.config.js
@@ -0,0 +1,5 @@
 export default {
  plugins: {
    "@tailwindcss/postcss": {},
  },
 };
--- a/examples/community-todo-vue/public/favicon.ico
+++ b/examples/community-todo-vue/public/favicon.ico
--- a/examples/community-todo-vue/src/App.vue
+++ b/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>
--- a/examples/community-todo-vue/src/apiKey.ts
+++ b/examples/community-todo-vue/src/apiKey.ts
@@ -0,0 +1 @@
 export const apiKey = "vue-todo-example-jazz@garden.co";
--- a/examples/community-todo-vue/src/assets/base.css
+++ b/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;
 }
--- a/examples/community-todo-vue/src/assets/main.css
+++ b/examples/community-todo-vue/src/assets/main.css
@@ -0,0 +1 @@
@import "./base.css";
--- a/examples/community-todo-vue/src/components/InviteButton.vue
+++ b/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>
--- a/examples/community-todo-vue/src/components/NewProjectForm.vue
+++ b/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>
--- a/examples/community-todo-vue/src/components/NewTaskRow.vue
+++ b/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>
--- a/examples/community-todo-vue/src/components/TaskRow.vue
+++ b/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>
--- a/examples/community-todo-vue/src/main.ts
+++ b/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");
--- a/examples/community-todo-vue/src/router/index.ts
+++ b/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;
--- a/examples/community-todo-vue/src/schema.ts
+++ b/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 }),
      });
    }
  });
--- a/examples/community-todo-vue/src/views/AcceptInviteView.vue
+++ b/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>
--- a/examples/community-todo-vue/src/views/Home.vue
+++ b/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>
--- a/examples/community-todo-vue/src/views/ProjectView.vue
+++ b/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>
--- a/examples/community-todo-vue/tsconfig.app.json
+++ b/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/*"]
    }
  }
 }
--- a/examples/community-todo-vue/tsconfig.json
+++ b/examples/community-todo-vue/tsconfig.json
@@ -0,0 +1,11 @@
 {
  "files": [],
  "references": [
    {
      "path": "./tsconfig.node.json"
    },
    {
      "path": "./tsconfig.app.json"
    }
  ]
 }
--- a/examples/community-todo-vue/tsconfig.node.json
+++ b/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"]
  }
 }
--- a/examples/community-todo-vue/vite.config.ts
+++ b/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)),
    },
  },
 });
--- a/examples/server-worker-inbox/src/routeTree.gen.ts
+++ b/examples/server-worker-inbox/src/routeTree.gen.ts
@@ -8,77 +8,101 @@
 // You should NOT make any changes in this file as it will be overwritten.
 // Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
-// Import Routes
+import { Route as rootRouteImport } from './routes/__root'
 import { Route as AuthenticatedRouteImport } from './routes/_authenticated'
 import { Route as IndexRouteImport } from './routes/index'
 import { Route as AuthenticatedWaitingRoomWaitingRoomIdRouteImport } from './routes/_authenticated/waiting-room.$waitingRoomId'
 import { Route as AuthenticatedGameGameIdRouteImport } from './routes/_authenticated/game.$gameId'
-import { Route as rootRoute } from './routes/__root'
+const AuthenticatedRoute = AuthenticatedRouteImport.update({
 import { Route as AuthenticatedImport } from './routes/_authenticated'
 import { Route as IndexImport } from './routes/index'
 import { Route as AuthenticatedWaitingRoomWaitingRoomIdImport } from './routes/_authenticated/waiting-room.$waitingRoomId'
 import { Route as AuthenticatedGameGameIdImport } from './routes/_authenticated/game.$gameId'
 // Create/Update Routes
 const AuthenticatedRoute = AuthenticatedImport.update({
  id: '/_authenticated',
-  getParentRoute: () => rootRoute,
+  getParentRoute: () => rootRouteImport,
 } as any)
-
+const IndexRoute = IndexRouteImport.update({
 const IndexRoute = IndexImport.update({
  id: '/',
  path: '/',
-  getParentRoute: () => rootRoute,
+  getParentRoute: () => rootRouteImport,
 } as any)
 const AuthenticatedWaitingRoomWaitingRoomIdRoute =
-  AuthenticatedWaitingRoomWaitingRoomIdImport.update({
+  AuthenticatedWaitingRoomWaitingRoomIdRouteImport.update({
    id: '/waiting-room/$waitingRoomId',
    path: '/waiting-room/$waitingRoomId',
    getParentRoute: () => AuthenticatedRoute,
  } as any)
-
+const AuthenticatedGameGameIdRoute = AuthenticatedGameGameIdRouteImport.update({
 const AuthenticatedGameGameIdRoute = AuthenticatedGameGameIdImport.update({
  id: '/game/$gameId',
  path: '/game/$gameId',
  getParentRoute: () => AuthenticatedRoute,
 } as any)
-// Populate the FileRoutesByPath interface
+export interface FileRoutesByFullPath {
  '/': typeof IndexRoute
  '/game/$gameId': typeof AuthenticatedGameGameIdRoute
  '/waiting-room/$waitingRoomId': typeof AuthenticatedWaitingRoomWaitingRoomIdRoute
 }
 export interface FileRoutesByTo {
  '/': typeof IndexRoute
  '/game/$gameId': typeof AuthenticatedGameGameIdRoute
  '/waiting-room/$waitingRoomId': typeof AuthenticatedWaitingRoomWaitingRoomIdRoute
 }
 export interface FileRoutesById {
  __root__: typeof rootRouteImport
  '/': typeof IndexRoute
  '/_authenticated': typeof AuthenticatedRouteWithChildren
  '/_authenticated/game/$gameId': typeof AuthenticatedGameGameIdRoute
  '/_authenticated/waiting-room/$waitingRoomId': typeof AuthenticatedWaitingRoomWaitingRoomIdRoute
 }
 export interface FileRouteTypes {
  fileRoutesByFullPath: FileRoutesByFullPath
  fullPaths: '/' | '/game/$gameId' | '/waiting-room/$waitingRoomId'
  fileRoutesByTo: FileRoutesByTo
  to: '/' | '/game/$gameId' | '/waiting-room/$waitingRoomId'
  id:
    | '__root__'
    | '/'
    | '/_authenticated'
    | '/_authenticated/game/$gameId'
    | '/_authenticated/waiting-room/$waitingRoomId'
  fileRoutesById: FileRoutesById
 }
 export interface RootRouteChildren {
  IndexRoute: typeof IndexRoute
  AuthenticatedRoute: typeof AuthenticatedRouteWithChildren
 }
 declare module '@tanstack/react-router' {
  interface FileRoutesByPath {
    '/': {
      id: '/'
      path: '/'
      fullPath: '/'
      preLoaderRoute: typeof IndexImport
      parentRoute: typeof rootRoute
    }
    '/_authenticated': {
      id: '/_authenticated'
      path: ''
      fullPath: ''
-      preLoaderRoute: typeof AuthenticatedImport
+      preLoaderRoute: typeof AuthenticatedRouteImport
-      parentRoute: typeof rootRoute
+      parentRoute: typeof rootRouteImport
    }
-    '/_authenticated/game/$gameId': {
+    '/': {
-      id: '/_authenticated/game/$gameId'
+      id: '/'
-      path: '/game/$gameId'
+      path: '/'
-      fullPath: '/game/$gameId'
+      fullPath: '/'
-      preLoaderRoute: typeof AuthenticatedGameGameIdImport
+      preLoaderRoute: typeof IndexRouteImport
-      parentRoute: typeof AuthenticatedImport
+      parentRoute: typeof rootRouteImport
    }
    '/_authenticated/waiting-room/$waitingRoomId': {
      id: '/_authenticated/waiting-room/$waitingRoomId'
      path: '/waiting-room/$waitingRoomId'
      fullPath: '/waiting-room/$waitingRoomId'
-      preLoaderRoute: typeof AuthenticatedWaitingRoomWaitingRoomIdImport
+      preLoaderRoute: typeof AuthenticatedWaitingRoomWaitingRoomIdRouteImport
-      parentRoute: typeof AuthenticatedImport
+      parentRoute: typeof AuthenticatedRoute
    }
    '/_authenticated/game/$gameId': {
      id: '/_authenticated/game/$gameId'
      path: '/game/$gameId'
      fullPath: '/game/$gameId'
      preLoaderRoute: typeof AuthenticatedGameGameIdRouteImport
      parentRoute: typeof AuthenticatedRoute
    }
  }
 }
 // Create and export the route tree
 interface AuthenticatedRouteChildren {
  AuthenticatedGameGameIdRoute: typeof AuthenticatedGameGameIdRoute
  AuthenticatedWaitingRoomWaitingRoomIdRoute: typeof AuthenticatedWaitingRoomWaitingRoomIdRoute
@@ -94,84 +118,10 @@ const AuthenticatedRouteWithChildren = AuthenticatedRoute._addFileChildren(
  AuthenticatedRouteChildren,
 )
 export interface FileRoutesByFullPath {
  '/': typeof IndexRoute
  '': typeof AuthenticatedRouteWithChildren
  '/game/$gameId': typeof AuthenticatedGameGameIdRoute
  '/waiting-room/$waitingRoomId': typeof AuthenticatedWaitingRoomWaitingRoomIdRoute
 }
 export interface FileRoutesByTo {
  '/': typeof IndexRoute
  '': typeof AuthenticatedRouteWithChildren
  '/game/$gameId': typeof AuthenticatedGameGameIdRoute
  '/waiting-room/$waitingRoomId': typeof AuthenticatedWaitingRoomWaitingRoomIdRoute
 }
 export interface FileRoutesById {
  __root__: typeof rootRoute
  '/': typeof IndexRoute
  '/_authenticated': typeof AuthenticatedRouteWithChildren
  '/_authenticated/game/$gameId': typeof AuthenticatedGameGameIdRoute
  '/_authenticated/waiting-room/$waitingRoomId': typeof AuthenticatedWaitingRoomWaitingRoomIdRoute
 }
 export interface FileRouteTypes {
  fileRoutesByFullPath: FileRoutesByFullPath
  fullPaths: '/' | '' | '/game/$gameId' | '/waiting-room/$waitingRoomId'
  fileRoutesByTo: FileRoutesByTo
  to: '/' | '' | '/game/$gameId' | '/waiting-room/$waitingRoomId'
  id:
    | '__root__'
    | '/'
    | '/_authenticated'
    | '/_authenticated/game/$gameId'
    | '/_authenticated/waiting-room/$waitingRoomId'
  fileRoutesById: FileRoutesById
 }
 export interface RootRouteChildren {
  IndexRoute: typeof IndexRoute
  AuthenticatedRoute: typeof AuthenticatedRouteWithChildren
 }
 const rootRouteChildren: RootRouteChildren = {
  IndexRoute: IndexRoute,
  AuthenticatedRoute: AuthenticatedRouteWithChildren,
 }
-
+export const routeTree = rootRouteImport
 export const routeTree = rootRoute
  ._addFileChildren(rootRouteChildren)
  ._addFileTypes<FileRouteTypes>()
 /* ROUTE_MANIFEST_START
 {
  "routes": {
    "__root__": {
      "filePath": "__root.tsx",
      "children": [
        "/",
        "/_authenticated"
      ]
    },
    "/": {
      "filePath": "index.tsx"
    },
    "/_authenticated": {
      "filePath": "_authenticated.tsx",
      "children": [
        "/_authenticated/game/$gameId",
        "/_authenticated/waiting-room/$waitingRoomId"
      ]
    },
    "/_authenticated/game/$gameId": {
      "filePath": "_authenticated/game.$gameId.tsx",
      "parent": "/_authenticated"
    },
    "/_authenticated/waiting-room/$waitingRoomId": {
      "filePath": "_authenticated/waiting-room.$waitingRoomId.tsx",
      "parent": "/_authenticated"
    }
  }
 }
 ROUTE_MANIFEST_END */
--- a/packages/cojson-storage-indexeddb/CHANGELOG.md
+++ b/packages/cojson-storage-indexeddb/CHANGELOG.md
@@ -1,5 +1,12 @@
 # cojson-storage-indexeddb
 ## 0.17.2
 ### Patch Changes
 - Updated dependencies [5b2b16a]
  - cojson@0.17.2
 ## 0.17.1
 ### Patch Changes
--- a/packages/cojson-storage-indexeddb/package.json
+++ b/packages/cojson-storage-indexeddb/package.json
@@ -1,6 +1,6 @@
 {
  "name": "cojson-storage-indexeddb",
-  "version": "0.17.1",
+  "version": "0.17.2",
  "main": "dist/index.js",
  "type": "module",
  "types": "dist/index.d.ts",
--- a/packages/cojson-storage-sqlite/CHANGELOG.md
+++ b/packages/cojson-storage-sqlite/CHANGELOG.md
@@ -1,5 +1,12 @@
 # cojson-storage-sqlite
 ## 0.17.2
 ### Patch Changes
 - Updated dependencies [5b2b16a]
  - cojson@0.17.2
 ## 0.17.1
 ### Patch Changes
--- a/packages/cojson-storage-sqlite/package.json
+++ b/packages/cojson-storage-sqlite/package.json
@@ -1,7 +1,7 @@
 {
  "name": "cojson-storage-sqlite",
  "type": "module",
-  "version": "0.17.1",
+  "version": "0.17.2",
  "main": "dist/index.js",
  "types": "dist/index.d.ts",
  "license": "MIT",
--- a/packages/cojson-transport-ws/CHANGELOG.md
+++ b/packages/cojson-transport-ws/CHANGELOG.md
@@ -1,5 +1,12 @@
 # cojson-transport-nodejs-ws
 ## 0.17.2
 ### Patch Changes
 - Updated dependencies [5b2b16a]
  - cojson@0.17.2
 ## 0.17.1
 ### Patch Changes
--- a/packages/cojson-transport-ws/package.json
+++ b/packages/cojson-transport-ws/package.json
@@ -1,7 +1,7 @@
 {
  "name": "cojson-transport-ws",
  "type": "module",
-  "version": "0.17.1",
+  "version": "0.17.2",
  "main": "dist/index.js",
  "types": "dist/index.d.ts",
  "license": "MIT",
--- a/packages/cojson/CHANGELOG.md
+++ b/packages/cojson/CHANGELOG.md
@@ -1,5 +1,11 @@
 # cojson
 ## 0.17.2
 ### Patch Changes
 - 5b2b16a: Filter invalid sessions when storing a content message
 ## 0.17.1
 ### Patch Changes
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Guido D'Orsi	97699a6d5b	Merge pull request #2739 from garden-co/changeset-release/main Version Packages	2025-08-15 14:33:35 +02:00
github-actions[bot]	5f8a2ba8df	Version Packages	2025-08-15 12:31:47 +00:00
Guido D'Orsi	fe06e12b85	Merge pull request #2737 from garden-co/justin-gco-730-bug-correction-callback-returned-undefined Closes GCO-730: Don't attempt to store sessions with invalid assumptions	2025-08-15 14:29:33 +02:00
Guido D'Orsi	5b2b16a5c6	chore: changeset	2025-08-15 14:27:30 +02:00
Guido D'Orsi	a966912c8a	test: cover InvalidSignature storage	2025-08-15 14:26:30 +02:00
Guido D'Orsi	b63b70fb80	fix: move the msg new filtering in handleNewContent	2025-08-15 13:21:28 +02:00
Guido D'Orsi	6b3e02920a	chore: changeset	2025-08-15 12:58:27 +02:00
Guido D'Orsi	f566961390	Merge pull request #2738 from garden-co/fix/media-rn-fixes Fixes in image management for React Native	2025-08-15 12:54:14 +02:00
Guido D'Orsi	265b265365	Merge pull request #2646 from nicolasembleton/community-vue-packages Add community-maintained VueJS bindings packages and examples	2025-08-15 12:53:28 +02:00
Matteo Manchi	83fc22f39a	fix(jazz-tools/media): import react-native-image-resizer only when needed	2025-08-15 11:22:49 +02:00
Matteo Manchi	794681a8bb	fix(react/media): EmptyPixelBlob initialization when needed	2025-08-15 11:22:49 +02:00
Justin Rosenthal	899bb0d2a1	Don't attempt to store content with invalid assumptions	2025-08-14 16:26:27 -07:00
Guido D'Orsi	33cfc4cc25	chore: format	2025-08-14 17:27:44 +02:00
Guido D'Orsi	42c60c99fe	chore: remove the vue biome config	2025-08-14 17:25:42 +02:00
Guido D'Orsi	e42518ed29	feat: upgrade to jazz 0.16	2025-08-14 17:22:07 +02:00
Guido D'Orsi	5b7ef3cd89	Merge remote-tracking branch 'origin/main' into community-vue-packages	2025-08-14 16:03:11 +02:00
Guido D'Orsi	fc02fc0608	chore: simplify InvalidSignature test with less whiteboxing	2025-08-14 12:12:30 +02:00
Nicolas Embleton	8c56445882	chore(packages/community-jazz-vue): merge main into branch + address type issues that prevent the build fix(packages/community-jazz-vue): address an issue where the transition right after login was not triggering a reactive cascade, making the example apps stuck in "Anonymous" until manual refresh chore(packages/community-jazz-vue): minor clean-up removing an un-necessary use of nextTick that can disrupt some reactive behaviors chore(examples/community-todo-vue): fix a warning / remove un-needed CSS file, remnant of the VueJS inspector chore(examples/community-chat-vue,examples/community-clerk-vue): fix a warning about the inspector component imported from VanillaJS not being detected by VueJS as a component	2025-08-08 20:11:34 +07:00
Nicolas Embleton	d9c9b5f099	Merge branch 'main' into community-vue-packages	2025-08-08 16:34:02 +07:00
Guido D'Orsi	cc291b590a	Merge remote-tracking branch 'origin/main' into community-vue-packages	2025-08-01 15:46:12 +02:00
Guido D'Orsi	1f144e89bf	chore: update lockfile	2025-08-01 15:43:09 +02:00
Guido D'Orsi	8e9acb37f8	chore(ci): add community-clerk-vue to e2e tests	2025-08-01 15:06:21 +02:00
nembleton	8115e194d3	chore(packages/community-jazz-vue): remove DemoAuth UI chore(packages/community-jazz-vue): remove VueJS Inspector since every package uses the VanillaJS one now chore(packages/community-jazz-vue): update models to be Zod-based rather than CoValue-based in the tests chore(examples/community-clerk-vue): add + fix Playwright tests	2025-08-01 09:24:49 +07:00
Nicolas Embleton	c2c223f22a	Merge branch 'garden-co:main' into community-vue-packages	2025-07-22 21:41:47 +07:00
nembleton	d60e345b4d	fix(packages/community-jazz-vue): small typescript inconsistency	2025-07-15 23:23:34 +07:00
Nicolas Embleton	be47d866bc	Merge branch 'garden-co:main' into community-vue-packages	2025-07-15 22:38:52 +07:00
Nicolas Embleton	ac88bdcb98	Merge branch 'garden-co:main' into community-vue-packages	2025-07-11 22:44:03 +07:00
nembleton	30704bcaf7	feat(@community-jazz-vue): port Jazz Vue bindings to 0.15 and match React signatures 1-to-1 for easier forward maintenance and to make it easier to infer Vue Bindings usage from React documentation feat(@community-jazz-vue): port React Inspector to Vue to make it easier to use within Vue projects chore(@community-jazz-vue): add tests to prevent regressions with Vue Proxy / Reactivity, which works quite differently from React's feat(@community-chat-vue): add up-to-date, reworked Chat Vue example feat(@community-clerk-vue): add Clerk Auth example with Vue feat(@community-todo-vue): add up-to-date, reworked Todo Vue example	2025-07-11 22:42:22 +07:00
nembleton	03108871e9	chore: restore vue examples and bindings under community prefix chore: update dependencies to new single package structure	2025-06-30 11:58:08 +07:00
		`@@ -0,0 +1 @@`
							`export const apiKey = "chat-example-jazz@garden.co";`
		`@@ -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>`
		`@@ -0,0 +1 @@`
							`VITE_CLERK_PUBLISHABLE_KEY=pk_test_ZXZpZGVudC1kYW5lLTg5LmNsZXJrLmFjY291bnRzLmRldiQ`
		`@@ -0,0 +1 @@`
							`export const apiKey = "minimal-auth-clerk-example@garden.co";`
		`@@ -0,0 +1 @@`
							`export const apiKey = "vue-todo-example-jazz@garden.co";`