wip: cleanup

`git clean -dfX; rm ./pnpm-lock.yaml; rm ./homepage/pnpm-lock.yaml; pnpm install; cd homepage && pnpm install; cd ../; pnpm install; pnpm format-and-lint:fix; pnpm build`

.changeset/config.json

@@ -12,10 +12,6 @@
       "cojson-transport-ws",
       "jazz-browser",
       "jazz-auth-clerk",
-      "jazz-auth-betterauth",
-      "jazz-betterauth-client-plugin",
-      "jazz-betterauth-server-plugin",
-      "jazz-react-auth-betterauth",
       "jazz-browser-media-images",
       "jazz-expo",
       "jazz-inspector",

.github/ISSUE_TEMPLATE/docs-request.md

@@ -1,10 +0,0 @@
----
-name: Docs request
-about: Allow people to quickly report issues & improvements for the docs
-title: 'Docs: '
-labels: docs, requested
-assignees: bensleveritt
-
----
-
-

.github/workflows/playwright.yml

@@ -13,7 +13,7 @@ jobs:
     continue-on-error: true
     strategy:
       matrix:
-        project: ["tests/e2e", "examples/chat",  "examples/clerk", "examples/betterauth", "examples/file-share-svelte", "examples/form", "examples/music-player", "examples/organization", "examples/pets", "starters/react-passkey-auth"]
+        project: ["tests/e2e", "examples/chat",  "examples/clerk", "examples/file-share-svelte", "examples/form", "examples/music-player", "examples/pets", "starters/react-passkey-auth"]
 
     steps:
       - uses: actions/checkout@v4

.gitignore

@@ -29,5 +29,3 @@ test-results
 
 .cursorrules
 .windsurfrules
-
-playwright-report

examples/betterauth/.env

@@ -1 +1 @@
-BETTER_AUTH_SECRET="TEST_SECRET"
+BETTER_AUTH_SECRET="TEST_SECRET"

examples/betterauth/CHANGELOG.md

@@ -1,132 +0,0 @@
-# betterauth
-
-## 0.1.11
-
-### Patch Changes
-
-- Updated dependencies [365b0ea]
-  - jazz-tools@0.14.7
-  - jazz-betterauth-server-plugin@0.14.7
-  - jazz-inspector@0.14.7
-  - jazz-react@0.14.7
-  - jazz-react-auth-betterauth@0.14.7
-  - jazz-betterauth-client-plugin@0.14.7
-
-## 0.1.10
-
-### Patch Changes
-
-- Updated dependencies [9d6d9fe]
-- Updated dependencies [9d6d9fe]
-  - jazz-tools@0.14.6
-  - jazz-betterauth-server-plugin@0.14.6
-  - jazz-inspector@0.14.6
-  - jazz-react@0.14.6
-  - jazz-react-auth-betterauth@0.14.6
-  - jazz-betterauth-client-plugin@0.14.6
-
-## 0.1.9
-
-### Patch Changes
-
-- Updated dependencies [91cbb2f]
-- Updated dependencies [20b3d88]
-  - jazz-tools@0.14.5
-  - jazz-betterauth-server-plugin@0.14.5
-  - jazz-inspector@0.14.5
-  - jazz-react@0.14.5
-  - jazz-react-auth-betterauth@0.14.5
-  - jazz-betterauth-client-plugin@0.14.5
-
-## 0.1.8
-
-### Patch Changes
-
-- Updated dependencies [011af55]
-  - jazz-tools@0.14.4
-  - jazz-betterauth-server-plugin@0.14.4
-  - jazz-inspector@0.14.4
-  - jazz-react@0.14.4
-  - jazz-react-auth-betterauth@0.14.4
-  - jazz-betterauth-client-plugin@0.14.4
-
-## 0.1.7
-
-### Patch Changes
-
-- Updated dependencies [3d1027f]
-- Updated dependencies [c240eed]
-  - jazz-tools@0.14.2
-  - jazz-betterauth-server-plugin@0.14.2
-  - jazz-inspector@0.14.2
-  - jazz-react@0.14.2
-  - jazz-react-auth-betterauth@0.14.2
-  - jazz-betterauth-client-plugin@0.14.2
-
-## 0.1.6
-
-### Patch Changes
-
-- Updated dependencies [cdfc105]
-  - jazz-tools@0.14.1
-  - jazz-betterauth-server-plugin@0.14.1
-  - jazz-inspector@0.14.1
-  - jazz-react@0.14.1
-  - jazz-react-auth-betterauth@0.14.1
-  - jazz-betterauth-client-plugin@0.14.1
-
-## 0.1.5
-
-### Patch Changes
-
-- Updated dependencies [5835ed1]
-  - jazz-tools@0.14.0
-  - jazz-betterauth-server-plugin@0.14.0
-  - jazz-inspector@0.14.0
-  - jazz-react@0.14.0
-  - jazz-react-auth-betterauth@0.14.0
-  - jazz-betterauth-client-plugin@0.14.0
-
-## 0.1.4
-
-### Patch Changes
-
-- jazz-betterauth-server-plugin@0.13.32
-- jazz-react@0.13.32
-- jazz-react-auth-betterauth@0.13.32
-- jazz-betterauth-client-plugin@0.13.32
-
-## 0.1.3
-
-### Patch Changes
-
-- Updated dependencies [e5b170f]
-  - jazz-tools@0.13.31
-  - jazz-betterauth-server-plugin@0.13.31
-  - jazz-inspector@0.13.31
-  - jazz-react@0.13.31
-  - jazz-react-auth-betterauth@0.13.31
-  - jazz-betterauth-client-plugin@0.13.31
-
-## 0.1.2
-
-### Patch Changes
-
-- jazz-betterauth-server-plugin@0.13.30
-- jazz-inspector@0.13.30
-- jazz-react@0.13.30
-- jazz-react-auth-betterauth@0.13.30
-- jazz-tools@0.13.30
-- jazz-betterauth-client-plugin@0.13.30
-
-## 0.1.1
-
-### Patch Changes
-
-- Updated dependencies [8e5ff13]
-  - jazz-inspector@0.13.29
-  - jazz-betterauth-server-plugin@0.0.1
-  - jazz-react@0.13.29
-  - jazz-react-auth-betterauth@0.0.1
-  - jazz-tools@0.13.29
-  - jazz-betterauth-client-plugin@0.0.1

examples/betterauth/README.md

@@ -1,6 +1,6 @@
 # Better Auth Integration Example
 
-This example demonstrates how to integrate [Better Auth](https://www.better-auth.com/) with Jazz.
+This example demonstrates using Jazz with Better Auth and Next.js.
 
 ## Getting started
 
@@ -29,26 +29,21 @@ pnpm dev
 
 ### Using the monorepo
 
-This requires `pnpm` to be installed, see [https://pnpm.io/installation](https://pnpm.io/installation).
+This requires `pnpm` to be installed; see [https://pnpm.io/installation](https://pnpm.io/installation).
 
-Clone the jazz repository.
-```bash
+1. Clone the `jazz` repository.
+```sh
 git clone https://github.com/garden-co/jazz.git
 ```
-
-Install and build dependencies.
-```bash
-pnpm i && npx turbo build
+2. Install dependencies.
+```sh
+cd jazz
+pnpm install
 ```
-
-Go to the example directory.
-```bash
-cd jazz/examples/betterauth/
-```
-
-Start the dev server.
-```bash
+3. Navigate to the example and start the development server.
+```sh
+cd examples/betterauth
 pnpm dev
 ```
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+The example should be running at [http://localhost:3000](http://localhost:3000) by default.

examples/betterauth/components.json

@@ -1,21 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema.json",
-  "style": "new-york",
-  "rsc": false,
-  "tsx": true,
-  "tailwind": {
-    "config": "",
-    "css": "src/styles/globals.css",
-    "baseColor": "neutral",
-    "cssVariables": true,
-    "prefix": ""
-  },
-  "aliases": {
-    "components": "@/components",
-    "utils": "@/lib/utils",
-    "ui": "@/components/ui",
-    "lib": "@/lib",
-    "hooks": "@/hooks"
-  },
-  "iconLibrary": "lucide"
-}

examples/betterauth/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "betterauth",
-	"version": "0.1.11",
+	"version": "0.1.0",
 	"private": true,
 	"type": "module",
 	"scripts": {
@@ -15,26 +15,19 @@
 		"email": "email dev --dir src/components/emails"
 	},
 	"dependencies": {
-		"@icons-pack/react-simple-icons": "^12.8.0",
-		"@radix-ui/react-label": "^2.1.6",
-		"@radix-ui/react-slot": "^1.2.2",
+		"@garden-co/design-system": "workspace:*",
+		"@react-email/components": "^0.0.38",
 		"better-auth": "^1.2.4",
 		"better-sqlite3": "^11.9.1",
-		"class-variance-authority": "^0.7.1",
-		"clsx": "^2.1.1",
-		"jazz-betterauth-client-plugin": "workspace:*",
 		"jazz-betterauth-server-plugin": "workspace:*",
+		"jazz-betterauth-client-plugin": "workspace:*",
 		"jazz-inspector": "workspace:*",
 		"jazz-react": "workspace:*",
 		"jazz-react-auth-betterauth": "workspace:*",
 		"jazz-tools": "workspace:*",
-		"lucide-react": "^0.510.0",
-		"next": "15.3.2",
+		"next": "15.3.1",
 		"react": "^18.0.0",
-		"react-dom": "^18.0.0",
-		"sonner": "^2.0.3",
-		"tailwind-merge": "^3.3.0",
-		"tw-animate-css": "^1.2.5"
+		"react-dom": "^18.0.0"
 	},
 	"devDependencies": {
 		"@biomejs/biome": "1.9.4",

examples/betterauth/public/file.svg

@@ -0,0 +1 @@
+<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>

examples/betterauth/public/globe.svg

@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>

examples/betterauth/public/jazz-logo.svg

@@ -1,11 +1,17 @@
 <svg
       viewBox="0 0 386 146"
-      fill="currentColor"
+      fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path id="text"
         d="M176.725 33.865H188.275V22.7H176.725V33.865ZM164.9 129.4H172.875C182.72 129.4 188.275 123.9 188.275 114.22V43.6H176.725V109.545C176.725 115.65 173.975 118.51 167.925 118.51H164.9V129.4ZM245.298 53.28C241.613 45.47 233.363 41.95 222.748 41.95C208.998 41.95 200.748 48.44 197.888 58.615L208.613 61.915C210.648 55.315 216.368 52.565 222.638 52.565C231.933 52.565 235.673 56.415 236.058 64.61C226.433 65.93 216.643 67.195 209.768 69.23C200.583 72.145 195.743 77.865 195.743 86.83C195.743 96.51 202.673 104.65 215.818 104.65C225.443 104.65 232.318 101.35 237.213 94.365V103H247.388V66.425C247.388 61.475 247.168 57.185 245.298 53.28ZM217.853 95.245C210.483 95.245 207.128 91.34 207.128 86.72C207.128 82.045 210.593 79.515 215.323 77.92C220.328 76.435 226.983 75.5 235.948 74.18C235.893 76.93 235.673 80.725 234.738 83.475C233.418 89.25 227.643 95.245 217.853 95.245ZM251.22 103H301.545V92.715H269.535L303.195 45.47V43.6H254.3V53.885H284.935L251.22 101.185V103ZM304.815 103H355.14V92.715H323.13L356.79 45.47V43.6H307.895V53.885H338.53L304.815 101.185V103Z"
       />
+      <style>
+        path#text { fill: #000 }
+        @media (prefers-color-scheme: dark) {
+          path#text { fill: #fff }
+        }
+      </style>
       <path
         fillRule="evenodd"
         clipRule="evenodd"

examples/betterauth/public/link.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-link-icon lucide-link"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>

examples/betterauth/public/mail.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-mail-icon lucide-mail"><path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7"/><rect x="2" y="4" width="20" height="16" rx="2"/></svg>

examples/betterauth/public/social/github.svg

@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>

examples/betterauth/public/window.svg

@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>

examples/betterauth/public/wrench.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-wrench-icon lucide-wrench"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg>

examples/betterauth/src/app/(app)/layout.tsx

@@ -1,22 +0,0 @@
-import { Navbar } from "@/components/navbar";
-import type { Metadata } from "next";
-
-export const metadata: Metadata = {
-  title: "Jazz Example: Better Auth",
-  description: "Jazz example application demonstrating Better Auth integration",
-};
-
-export default function RootLayout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
-  return (
-    <>
-      <Navbar />
-      <div className="container mx-auto pt-16 min-h-screen flex flex-col items-center justify-center">
-        {children}
-      </div>
-    </>
-  );
-}

examples/betterauth/src/app/(app)/page.tsx

@@ -1,113 +0,0 @@
-"use client";
-
-import { Button } from "@/components/ui/button";
-import { useAccount } from "jazz-react";
-import { Account } from "jazz-tools";
-import {
-  AppWindowMacIcon,
-  FileTextIcon,
-  GlobeIcon,
-  WrenchIcon,
-} from "lucide-react";
-import Image from "next/image";
-
-export default function Home() {
-  const { me } = useAccount(Account, { resolve: { profile: {} } });
-
-  if (!me) {
-    return null;
-  }
-
-  return (
-    <div className="grow flex flex-col items-center justify-center">
-      <main className="flex flex-col gap-8 row-start-2 grow justify-center">
-        <Image
-          src="/jazz-logo.svg"
-          alt="Jazz logo"
-          width={180}
-          height={38}
-          priority
-        />
-        <p className="text-sm/6 text-center sm:text-left">
-          Signed in as{" "}
-          <span className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-mono font-semibold">
-            {me.profile.name}
-          </span>{" "}
-          with id{" "}
-          <span className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-mono font-semibold">
-            {me.id}
-          </span>
-        </p>
-
-        <div className="flex gap-4 items-center flex-row">
-          <Button asChild size="lg">
-            <a
-              href="https://jazz.tools/docs"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              <Image src="/jazz.svg" alt="" width={20} height={20} />
-              Start building
-            </a>
-          </Button>
-
-          <Button asChild variant="secondary" size="lg">
-            <a
-              href="https://jazz.tools/docs"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              <FileTextIcon className="size-4" />
-              Read the docs
-            </a>
-          </Button>
-        </div>
-      </main>
-
-      <footer className="flex gap-4 py-8">
-        <Button asChild variant="ghost">
-          <a
-            href="https://jazz.tools/api-reference"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <FileTextIcon className="size-4" />
-            API reference
-          </a>
-        </Button>
-        <Button asChild variant="ghost">
-          <a
-            href="https://jazz.tools/examples"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <AppWindowMacIcon className="size-4" />
-            Examples
-          </a>
-        </Button>
-
-        <Button asChild variant="ghost">
-          <a
-            href="https://jazz.tools/status"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <GlobeIcon className="size-4" />
-            Status
-          </a>
-        </Button>
-
-        <Button asChild variant="ghost">
-          <a
-            href="https://jazz.tools/showcase"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <WrenchIcon className="size-4" />
-            Built with Jazz
-          </a>
-        </Button>
-      </footer>
-    </div>
-  );
-}

examples/betterauth/src/app/(app)/settings/page.tsx

@@ -1,14 +0,0 @@
-import { UserSettings } from "@/components/user-settings";
-import type { Metadata } from "next";
-
-export const metadata: Metadata = {
-  title: "Settings | Jazz Example: Better Auth",
-};
-
-export default function SettingsPage() {
-  return (
-    <div className="max-w-screen-md w-full mx-auto px-4">
-      <UserSettings />
-    </div>
-  );
-}

examples/betterauth/src/app/api/auth/[...all]/route.ts

@@ -1,10 +1,4 @@
 import { auth } from "@/lib/auth";
 import { toNextJsHandler } from "better-auth/next-js";
 
-export const { GET, POST } = (() => {
-  if (!process.env.NEXT_PUBLIC_AUTH_BASE_URL) {
-    return toNextJsHandler(auth.handler);
-  } else {
-    return { GET: undefined, POST: undefined };
-  }
-})();
+export const { GET, POST } = toNextJsHandler(auth.handler);

examples/betterauth/src/app/auth/forgot-password/page.tsx

@@ -1,10 +0,0 @@
-import { ForgotPasswordForm } from "@/components/forgot-password-form";
-import type { Metadata } from "next";
-
-export const metadata: Metadata = {
-  title: "Forgot password | Jazz Example: Better Auth",
-};
-
-export default function ForgotPasswordPage() {
-  return <ForgotPasswordForm />;
-}

examples/betterauth/src/app/auth/layout.tsx

@@ -1,23 +0,0 @@
-import Image from "next/image";
-import Link from "next/link";
-
-interface Props {
-  children: React.ReactNode;
-}
-
-export default function AuthLayout({ children }: Props) {
-  return (
-    <div className="bg-muted flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10">
-      <div className="flex w-full max-w-sm flex-col gap-6">
-        <Link
-          href="/"
-          className="flex items-center gap-2 self-center font-medium"
-        >
-          <Image src="/jazz.svg" alt="Jazz Logo" width={24} height={24} />
-          Jazz BetterAuth Demo
-        </Link>
-        {children}
-      </div>
-    </div>
-  );
-}

examples/betterauth/src/app/auth/reset-password/page.tsx

@@ -1,10 +0,0 @@
-import { ResetPasswordForm } from "@/components/reset-password-form";
-import type { Metadata } from "next";
-
-export const metadata: Metadata = {
-  title: "Reset password | Jazz Example: Better Auth",
-};
-
-export default function ResetPasswordPage() {
-  return <ResetPasswordForm />;
-}

examples/betterauth/src/app/auth/sign-in/page.tsx

@@ -1,11 +0,0 @@
-import { SigninForm } from "@/components/signin-form";
-import type { Metadata } from "next";
-import { ssoProviders } from "../sso-providers";
-
-export const metadata: Metadata = {
-  title: "Sign in | Jazz Example: Better Auth",
-};
-
-export default function LoginPage() {
-  return <SigninForm providers={ssoProviders} />;
-}

examples/betterauth/src/app/auth/sign-up/page.tsx

@@ -1,11 +0,0 @@
-import { SignupForm } from "@/components/signup-form";
-import type { Metadata } from "next";
-import { ssoProviders } from "../sso-providers";
-
-export const metadata: Metadata = {
-  title: "Sign up | Jazz Example: Better Auth",
-};
-
-export default function LoginPage() {
-  return <SignupForm providers={ssoProviders} />;
-}

examples/betterauth/src/app/auth/sso-providers.ts

@@ -1,4 +0,0 @@
-import type { SSOProviderType } from "jazz-react-auth-betterauth";
-
-// Fill in the providers you want to use
-export const ssoProviders: SSOProviderType[] = ["github"];

examples/betterauth/src/app/delete-account/page.tsx

@@ -0,0 +1,10 @@
+"use client";
+
+import { useAccount } from "jazz-react";
+import { redirect } from "next/navigation";
+
+export default function Page() {
+  const { logOut } = useAccount({ resolve: { profile: true } });
+  logOut();
+  redirect("/");
+}

examples/betterauth/src/app/forgot/page.tsx

@@ -0,0 +1,7 @@
+"use client";
+
+import { ForgotForm } from "jazz-react-auth-betterauth";
+
+export default function ForgotPage() {
+  return <ForgotForm.default />;
+}

examples/betterauth/src/app/globals.css

@@ -1,123 +1,30 @@
 @import "tailwindcss";
-@import "tw-animate-css";
-
-@custom-variant dark (&:is(.dark *));
+@import "tailwindcss/utilities";
+@import "@garden-co/design-system/src/app/globals.css";
+@source "../../node_modules/@garden-co/design-system/src";
+@source "../../node_modules/jazz-react-auth-betterauth/dist";
 
 :root {
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.145 0 0);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.145 0 0);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.145 0 0);
-  --primary: oklch(0.205 0 0);
-  --primary-foreground: oklch(0.985 0 0);
-  --secondary: oklch(0.97 0 0);
-  --secondary-foreground: oklch(0.205 0 0);
-  --muted: oklch(0.97 0 0);
-  --muted-foreground: oklch(0.556 0 0);
-  --accent: oklch(0.97 0 0);
-  --accent-foreground: oklch(0.205 0 0);
-  --destructive: oklch(0.577 0.245 27.325);
-  --destructive-foreground: oklch(0.577 0.245 27.325);
-  --border: oklch(0.922 0 0);
-  --input: oklch(0.922 0 0);
-  --ring: oklch(0.708 0 0);
-  --chart-1: oklch(0.646 0.222 41.116);
-  --chart-2: oklch(0.6 0.118 184.704);
-  --chart-3: oklch(0.398 0.07 227.392);
-  --chart-4: oklch(0.828 0.189 84.429);
-  --chart-5: oklch(0.769 0.188 70.08);
-  --radius: 0.625rem;
-  --sidebar: oklch(0.985 0 0);
-  --sidebar-foreground: oklch(0.145 0 0);
-  --sidebar-primary: oklch(0.205 0 0);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.97 0 0);
-  --sidebar-accent-foreground: oklch(0.205 0 0);
-  --sidebar-border: oklch(0.922 0 0);
-  --sidebar-ring: oklch(0.708 0 0);
-}
-
-.dark {
-  --background: oklch(0.145 0 0);
-  --foreground: oklch(0.985 0 0);
-  --card: oklch(0.145 0 0);
-  --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.145 0 0);
-  --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.985 0 0);
-  --primary-foreground: oklch(0.205 0 0);
-  --secondary: oklch(0.269 0 0);
-  --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.269 0 0);
-  --muted-foreground: oklch(0.708 0 0);
-  --accent: oklch(0.269 0 0);
-  --accent-foreground: oklch(0.985 0 0);
-  --destructive: oklch(0.396 0.141 25.723);
-  --destructive-foreground: oklch(0.637 0.237 25.331);
-  --border: oklch(0.269 0 0);
-  --input: oklch(0.269 0 0);
-  --ring: oklch(0.439 0 0);
-  --chart-1: oklch(0.488 0.243 264.376);
-  --chart-2: oklch(0.696 0.17 162.48);
-  --chart-3: oklch(0.769 0.188 70.08);
-  --chart-4: oklch(0.627 0.265 303.9);
-  --chart-5: oklch(0.645 0.246 16.439);
-  --sidebar: oklch(0.205 0 0);
-  --sidebar-foreground: oklch(0.985 0 0);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.269 0 0);
-  --sidebar-accent-foreground: oklch(0.985 0 0);
-  --sidebar-border: oklch(0.269 0 0);
-  --sidebar-ring: oklch(0.439 0 0);
+  --background: #ffffff;
+  --foreground: #171717;
 }
 
 @theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);
-  --color-card: var(--card);
-  --color-card-foreground: var(--card-foreground);
-  --color-popover: var(--popover);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-primary: var(--primary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-secondary: var(--secondary);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-muted: var(--muted);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-accent: var(--accent);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-destructive: var(--destructive);
-  --color-destructive-foreground: var(--destructive-foreground);
-  --color-border: var(--border);
-  --color-input: var(--input);
-  --color-ring: var(--ring);
-  --color-chart-1: var(--chart-1);
-  --color-chart-2: var(--chart-2);
-  --color-chart-3: var(--chart-3);
-  --color-chart-4: var(--chart-4);
-  --color-chart-5: var(--chart-5);
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
-  --color-sidebar: var(--sidebar);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-ring: var(--sidebar-ring);
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
 }
 
-@layer base {
-  * {
-    @apply border-border outline-ring/50;
-  }
-  body {
-    @apply bg-background text-foreground;
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: #0a0a0a;
+    --foreground: #ededed;
   }
 }
+
+body {
+  background: var(--background);
+  color: var(--foreground);
+  font-family: Arial, Helvetica, sans-serif;
+}

examples/betterauth/src/app/layout.tsx

@@ -1,7 +1,17 @@
-import { JazzAndAuth } from "@/components/JazzAndAuth";
-import { Toaster } from "@/components/ui/sonner";
 import type { Metadata } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
+import { JazzAndAuth } from "@/components/JazzAndAuth";
+
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
 
 export const metadata: Metadata = {
   title: "Jazz Example: Better Auth",
@@ -10,16 +20,15 @@ export const metadata: Metadata = {
 
 export default function RootLayout({
   children,
-}: {
+}: Readonly<{
   children: React.ReactNode;
-}) {
+}>) {
   return (
     <html lang="en">
-      <body className="antialiased">
-        <JazzAndAuth>
-          {children}
-          <Toaster richColors />
-        </JazzAndAuth>
+      <body
+        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+      >
+        <JazzAndAuth>{children}</JazzAndAuth>
       </body>
     </html>
   );

examples/betterauth/src/app/magic-link/logIn/page.tsx

@@ -0,0 +1,5 @@
+"use client";
+
+import { MagicLinkSignIn } from "jazz-react-auth-betterauth";
+
+export default MagicLinkSignIn.default;

examples/betterauth/src/app/magic-link/signIn/page.tsx

@@ -0,0 +1,5 @@
+"use client";
+
+import { MagicLinkSignUp } from "jazz-react-auth-betterauth";
+
+export default MagicLinkSignUp.default;

examples/betterauth/src/app/mockEmail/email-verification/page.tsx

@@ -0,0 +1,11 @@
+"use client";
+
+import { Verify } from "@/components/emails";
+
+export default function Page() {
+  const searchParams = new URLSearchParams(window.location.search);
+  const name = searchParams.get("name") ?? undefined;
+  const url = searchParams.get("url") ?? undefined;
+  const otp = searchParams.get("otp") ?? undefined;
+  return <Verify name={name} url={url} otp={otp}></Verify>;
+}

examples/betterauth/src/app/mockEmail/forgot-password/page.tsx

@@ -0,0 +1,11 @@
+"use client";
+
+import { Reset } from "@/components/emails";
+
+export default function Page() {
+  const searchParams = new URLSearchParams(window.location.search);
+  const name = searchParams.get("name") ?? undefined;
+  const url = searchParams.get("url") ?? undefined;
+  const otp = searchParams.get("otp") ?? undefined;
+  return <Reset name={name} url={url} otp={otp}></Reset>;
+}

examples/betterauth/src/app/mockEmail/sign-in/page.tsx

@@ -0,0 +1,11 @@
+"use client";
+
+import { Login } from "@/components/emails";
+
+export default function Page() {
+  const searchParams = new URLSearchParams(window.location.search);
+  const name = searchParams.get("name") ?? undefined;
+  const url = searchParams.get("url") ?? undefined;
+  const otp = searchParams.get("otp") ?? undefined;
+  return <Login name={name} url={url} otp={otp}></Login>;
+}

examples/betterauth/src/app/mockEmail/welcome/page.tsx

@@ -0,0 +1,7 @@
+"use client";
+
+import { Welcome } from "@/components/emails";
+
+export default function Page() {
+  return <Welcome></Welcome>;
+}

examples/betterauth/src/app/page.tsx

@@ -0,0 +1,170 @@
+"use client";
+
+import { Button } from "@/components/Button";
+import { useAccount, useIsAuthenticated } from "jazz-react";
+import { useAuth } from "jazz-react-auth-betterauth";
+import Image from "next/image";
+import { useCallback } from "react";
+
+export default function Home() {
+  const { auth, user, account } = useAuth();
+  const { me, logOut } = useAccount({ resolve: { profile: {} } });
+  const isAuthenticated = useIsAuthenticated();
+  const signOut = useCallback(() => {
+    auth.authClient.signOut({
+      fetchOptions: {
+        onSuccess: () => {
+          logOut();
+        },
+      },
+    });
+  }, [logOut, auth]);
+  console.log("me", me);
+  console.log("user", user);
+  console.log("account", account);
+  console.log("auth.state", auth.state);
+  console.log("isAuthenticated", isAuthenticated);
+
+  return (
+    <>
+      <header className="absolute p-4 top-0 left-0 w-full z-10 flex items-center justify-between gap-4">
+        <div className="float-start flex gap-4">
+          {me && user && isAuthenticated && (
+            <>
+              <Button onClick={signOut}>Sign out</Button>
+              <Button href="/settings">Settings</Button>
+            </>
+          )}
+        </div>
+        <div className="float-end flex gap-4">
+          {!user && !isAuthenticated && (
+            <>
+              <Button href="/sign-in" variant="secondary">
+                Sign in
+              </Button>
+              <Button href="/sign-up">Sign up</Button>
+            </>
+          )}
+        </div>
+      </header>
+      <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
+        <main className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start">
+          <Image
+            src="/jazz-logo.svg"
+            alt="Jazz logo"
+            width={180}
+            height={38}
+            priority
+          />
+          <p className="text-sm/6 text-center sm:text-left font-[family-name:var(--font-geist-mono)]">
+            {me && user && isAuthenticated && (
+              <>
+                {"Signed in as "}
+                <span className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-[family-name:var(--font-geist-mono)] font-semibold">
+                  {me.profile.name}
+                </span>
+                .
+              </>
+            )}
+            {!user && !isAuthenticated && <>Not signed in.</>}
+            {!user && isAuthenticated && (
+              <>Not connected to the authentication server.</>
+            )}
+            {user && !isAuthenticated && (
+              <>Authenticated, but not logged in. Try refreshing.</>
+            )}
+          </p>
+
+          <div className="flex gap-4 items-center flex-col sm:flex-row">
+            <a
+              className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:w-auto"
+              href="https://jazz.tools/"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <Image src="/jazz.svg" alt="Jazz logo" width={20} height={20} />
+              Start building
+            </a>
+            <a
+              className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center gap-2 hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 w-full sm:w-auto"
+              href="https://jazz.tools/docs"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <Image
+                aria-hidden
+                src="/file.svg"
+                alt="File icon"
+                width={16}
+                height={16}
+              />
+              Read the docs
+            </a>
+          </div>
+        </main>
+        <footer className="row-start-3 flex gap-[24px] flex-wrap items-center justify-center">
+          <a
+            className="flex items-center gap-2 hover:underline hover:underline-offset-4"
+            href="https://jazz.tools/api-reference"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <Image
+              aria-hidden
+              src="/file.svg"
+              alt="File icon"
+              width={16}
+              height={16}
+            />
+            API reference
+          </a>
+          <a
+            className="flex items-center gap-2 hover:underline hover:underline-offset-4"
+            href="https://jazz.tools/examples"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <Image
+              aria-hidden
+              src="/window.svg"
+              alt="Window icon"
+              width={16}
+              height={16}
+            />
+            Examples
+          </a>
+          <a
+            className="flex items-center gap-2 hover:underline hover:underline-offset-4"
+            href="https://jazz.tools/status"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <Image
+              aria-hidden
+              src="/globe.svg"
+              alt="Globe icon"
+              width={16}
+              height={16}
+            />
+            Status
+          </a>
+          <a
+            className="flex items-center gap-2 hover:underline hover:underline-offset-4"
+            href="https://jazz.tools/showcase"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <Image
+              aria-hidden
+              src="/wrench.svg"
+              alt="Wrench icon"
+              width={16}
+              height={16}
+            />
+            Built with Jazz
+          </a>
+        </footer>
+      </div>
+    </>
+  );
+}

examples/betterauth/src/app/pages/api/auth/[...all].ts

@@ -0,0 +1,7 @@
+import { auth } from "@/lib/auth";
+import { toNodeHandler } from "better-auth/node";
+
+// Disallow body parsing, we will parse it manually
+export const config = { api: { bodyParser: false } };
+
+export default toNodeHandler(auth.handler);

examples/betterauth/src/app/reset/page.tsx

@@ -0,0 +1,7 @@
+"use client";
+
+import { ResetForm } from "jazz-react-auth-betterauth";
+
+export default function ResetPage() {
+  return <ResetForm.default />;
+}

examples/betterauth/src/app/settings/page.tsx

@@ -0,0 +1,7 @@
+"use client";
+
+import { SettingsForm } from "jazz-react-auth-betterauth";
+
+export default function SettingsPage() {
+  return <SettingsForm.default providers={["github"]} />;
+}

examples/betterauth/src/app/sign-in/page.tsx

@@ -0,0 +1,7 @@
+"use client";
+
+import { SignInForm } from "jazz-react-auth-betterauth";
+
+export default function SignInPage() {
+  return <SignInForm.default providers={["github"]} />;
+}

examples/betterauth/src/app/sign-up/page.tsx

@@ -0,0 +1,7 @@
+"use client";
+
+import { SignUpForm } from "jazz-react-auth-betterauth";
+
+export default function SignUpPage() {
+  return <SignUpForm.default providers={["github"]} />;
+}

examples/betterauth/src/app/social/logIn/page.tsx

@@ -0,0 +1,10 @@
+"use client";
+
+import { useAuth } from "jazz-react-auth-betterauth";
+import { redirect } from "next/navigation";
+
+export default function Page() {
+  const { auth, user, account } = useAuth();
+  auth.logIn().then(redirect("/"));
+  return null;
+}

examples/betterauth/src/app/social/signIn/page.tsx

@@ -0,0 +1,10 @@
+"use client";
+
+import { useAuth } from "jazz-react-auth-betterauth";
+import { redirect } from "next/navigation";
+
+export default function Page() {
+  const { auth, user, account } = useAuth();
+  auth.signIn().then(redirect("/"));
+  return null;
+}

examples/betterauth/src/components/Button.tsx

@@ -0,0 +1,80 @@
+"use client";
+
+import { clsx } from "clsx";
+import Image from "next/image";
+import Link from "next/link";
+import { forwardRef } from "react";
+
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: "primary" | "secondary" | "danger";
+  children?: React.ReactNode;
+  className?: string;
+  src?: Parameters<typeof Image>[0]["src"];
+  alt?: Parameters<typeof Image>[0]["alt"];
+  href?: string;
+  newTab?: boolean;
+}
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    {
+      className,
+      children,
+      variant = "primary",
+      src,
+      alt,
+      href,
+      newTab = false,
+      ...buttonProps
+    },
+    ref,
+  ) => {
+    const primary =
+      "rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:w-auto";
+    const secondary =
+      "rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center gap-2 hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 w-full sm:w-auto";
+    const danger =
+      "rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center bg-red-400 dark:bg-red-600 gap-2 hover:bg-red-300 dark:hover:bg-red-700 hover:border-transparent font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 w-full sm:w-auto";
+    const classes = clsx(
+      variant === "primary"
+        ? primary
+        : variant === "secondary"
+          ? secondary
+          : danger,
+      className,
+    );
+    const [width, height] = [
+      variant === "primary" ? 20 : 16,
+      variant === "primary" ? 20 : 16,
+    ];
+    if (href) {
+      return (
+        <Link
+          href={href}
+          target={newTab ? "_blank" : undefined}
+          className={classes}
+          rel="noopener noreferrer"
+        >
+          {src && alt && (
+            <Image src={src} alt={alt} width={width} height={height} />
+          )}
+          {children}
+        </Link>
+      );
+    } else {
+      return (
+        <button
+          ref={ref}
+          {...buttonProps}
+          className={classes}
+          rel="noopener noreferrer"
+        >
+          {src && alt && (
+            <Image src={src} alt={alt} width={width} height={height} />
+          )}
+          {children}
+        </button>
+      );
+    }
+  },
+);

examples/betterauth/src/components/JazzAndAuth.tsx

@@ -1,7 +1,11 @@
 "use client";
 
+import { emailOTPClient, magicLinkClient } from "better-auth/client/plugins";
 import { JazzProvider } from "jazz-react";
 import { AuthProvider } from "jazz-react-auth-betterauth";
+import * as NextImage from "next/image";
+import * as NextLink from "next/link";
+import { useRouter } from "next/navigation";
 import { type ReactNode, lazy } from "react";
 
 const JazzDevTools =
@@ -14,20 +18,28 @@ const JazzDevTools =
       );
 
 export function JazzAndAuth({ children }: { children: ReactNode }) {
+  const router = useRouter();
   return (
     <JazzProvider
       sync={{
         peer: "wss://cloud.jazz.tools/?key=betterauth-example@garden.co",
       }}
     >
-      <AuthProvider
-        options={{
-          baseURL: process.env.NEXT_PUBLIC_AUTH_BASE_URL,
-        }}
-      >
-        {children}
-      </AuthProvider>
-      <JazzDevTools />
+      <>
+        <AuthProvider
+          Link={NextLink.default}
+          Image={NextImage.default}
+          navigate={router.push}
+          replace={router.replace}
+          options={{
+            baseURL: process.env.NEXT_PUBLIC_AUTH_BASE_URL,
+            plugins: [magicLinkClient(), emailOTPClient()],
+          }}
+        >
+          {children}
+        </AuthProvider>
+        <JazzDevTools />
+      </>
     </JazzProvider>
   );
 }

examples/betterauth/src/components/SSOButton.tsx

@@ -1,137 +0,0 @@
-import { Button } from "@/components/ui/button";
-import {
-  SiApple,
-  SiDiscord,
-  SiDropbox,
-  SiFacebook,
-  SiGithub,
-  SiGitlab,
-  SiGoogle,
-  SiKick,
-  SiReddit,
-  SiRoblox,
-  SiSpotify,
-  SiTiktok,
-  SiTwitch,
-  SiVk,
-  SiX,
-  SiZoom,
-} from "@icons-pack/react-simple-icons";
-import { type SSOProviderType, useAuth } from "jazz-react-auth-betterauth";
-import { useRouter } from "next/navigation";
-import type { ReactNode } from "react";
-import { toast } from "sonner";
-
-interface SocialProvider {
-  name: string;
-  icon?: ReactNode;
-}
-
-const socialProviderMap: Record<SSOProviderType, SocialProvider> = {
-  github: {
-    name: "GitHub",
-    icon: <SiGithub />,
-  },
-  google: {
-    name: "Google",
-    icon: <SiGoogle />,
-  },
-  apple: {
-    name: "Apple",
-    icon: <SiApple />,
-  },
-  discord: {
-    name: "Discord",
-    icon: <SiDiscord />,
-  },
-  facebook: {
-    name: "Facebook",
-    icon: <SiFacebook />,
-  },
-  microsoft: {
-    name: "Microsoft",
-  },
-  twitter: {
-    name: "X",
-    icon: <SiX />,
-  },
-  dropbox: {
-    name: "Dropbox",
-    icon: <SiDropbox />,
-  },
-  linkedin: {
-    name: "LinkedIn",
-  },
-  gitlab: {
-    name: "GitLab",
-    icon: <SiGitlab />,
-  },
-  kick: {
-    name: "Kick",
-    icon: <SiKick />,
-  },
-  tiktok: {
-    name: "TikTok",
-    icon: <SiTiktok />,
-  },
-  twitch: {
-    name: "Twitch",
-    icon: <SiTwitch />,
-  },
-  vk: {
-    name: "VK",
-    icon: <SiVk />,
-  },
-  zoom: {
-    name: "Zoom",
-    icon: <SiZoom />,
-  },
-  roblox: {
-    name: "Roblox",
-    icon: <SiRoblox />,
-  },
-  reddit: {
-    name: "Reddit",
-    icon: <SiReddit />,
-  },
-  spotify: {
-    name: "Spotify",
-    icon: <SiSpotify />,
-  },
-};
-
-interface Props {
-  provider: SSOProviderType;
-}
-
-export function SSOButton({ provider }: Props) {
-  const auth = useAuth();
-  const router = useRouter();
-
-  return (
-    <Button
-      type="button"
-      variant="outline"
-      onClick={() => {
-        auth.authClient.signIn.social(
-          {
-            provider,
-          },
-          {
-            onSuccess: () => {
-              router.push("/");
-            },
-            onError: (error) => {
-              toast.error("Error", {
-                description: error.error.message,
-              });
-            },
-          },
-        );
-      }}
-    >
-      {socialProviderMap[provider].icon}
-      Continue with {socialProviderMap[provider].name}
-    </Button>
-  );
-}

examples/betterauth/src/components/emails/Common.ts

@@ -0,0 +1,68 @@
+import { COLORS } from "@garden-co/design-system/colors/colors";
+
+export const appName = "Jazz Example App";
+
+export const main = {
+  backgroundColor: "#f6f9fc",
+  padding: "10px 0",
+};
+
+export const container = {
+  backgroundColor: "#ffffff",
+  border: "1px solid #f0f0f0",
+  padding: "45px",
+};
+
+export const text = {
+  fontSize: "16px",
+  fontFamily:
+    "'Open Sans', 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif",
+  fontWeight: "300",
+  color: "#404040",
+  lineHeight: "26px",
+};
+
+export const h1 = {
+  ...text,
+  fontSize: "24px",
+  fontWeight: "bold",
+};
+
+export const button = {
+  backgroundColor: COLORS.BLUE,
+  borderRadius: "4px",
+  color: "#fff",
+  fontFamily: "'Open Sans', 'Helvetica Neue', Arial",
+  fontSize: "15px",
+  textDecoration: "none",
+  textAlign: "center" as const,
+  display: "block",
+  width: "210px",
+  padding: "14px 7px",
+};
+
+export const anchor = {
+  textDecoration: "underline",
+};
+
+export const codeContainer = {
+  background: "rgba(0,0,0,.05)",
+  borderRadius: "4px",
+  margin: "16px auto 14px",
+  verticalAlign: "middle",
+  width: "280px",
+};
+
+export const code = {
+  color: "#000",
+  fontFamily: "HelveticaNeue-Bold",
+  fontSize: "32px",
+  fontWeight: 700,
+  letterSpacing: "6px",
+  lineHeight: "40px",
+  paddingBottom: "8px",
+  paddingTop: "8px",
+  margin: "0 auto",
+  display: "block",
+  textAlign: "center" as const,
+};

examples/betterauth/src/components/emails/Login.tsx

@@ -0,0 +1,91 @@
+import {
+  Body,
+  Button,
+  Container,
+  Head,
+  Heading,
+  Html,
+  Preview,
+  Section,
+  Text,
+} from "@react-email/components";
+import Image from "next/image";
+import * as React from "react";
+import {
+  appName,
+  button,
+  code,
+  codeContainer,
+  container,
+  h1,
+  main,
+  text,
+} from "./Common";
+
+export const Login = ({
+  name = undefined,
+  url = undefined,
+  otp = undefined,
+}: {
+  name?: string;
+  url?: string;
+  otp?: string;
+}) => {
+  return (
+    <Html>
+      <Head>
+        <title>
+          {url && !otp
+            ? `Your login link for ${appName}`
+            : `Your login code for ${appName}`}
+        </title>
+      </Head>
+      <Preview>
+        {url && !otp
+          ? `Your login link for ${appName}`
+          : `Your login code for ${appName}`}
+      </Preview>
+      <Body style={main}>
+        <Container style={container}>
+          <Image
+            src="/jazz.svg"
+            alt="Jazz logo"
+            width={100}
+            height={100}
+            priority
+          />
+          <Heading style={h1}>
+            {url && !otp
+              ? `Your login link for ${appName}`
+              : `Your login code for ${appName}`}
+          </Heading>
+          <Section>
+            <Text style={text}>Hello{name ? ` ${name}` : ""},</Text>
+            <Text style={text}>
+              Someone recently attempted to login to {appName} using your email
+              address.
+              {url && !otp ? " If this was you, you can login here:" : ""}
+            </Text>
+            {url && !otp && (
+              <Button style={button} href={url}>
+                Login
+              </Button>
+            )}
+            {otp && !url && (
+              <Section style={codeContainer}>
+                <Text style={code}>{otp}</Text>
+              </Section>
+            )}
+            <Text style={text}>
+              To keep your account secure, please do not forward this email to
+              anyone. If you did not try to login, just ignore and delete this
+              message.
+            </Text>
+          </Section>
+        </Container>
+      </Body>
+    </Html>
+  );
+};
+
+export default Login;

examples/betterauth/src/components/emails/Reset.tsx

@@ -0,0 +1,84 @@
+import {
+  Body,
+  Button,
+  Container,
+  Head,
+  Heading,
+  Html,
+  Preview,
+  Section,
+  Text,
+} from "@react-email/components";
+import Image from "next/image";
+import * as React from "react";
+import {
+  appName,
+  button,
+  code,
+  codeContainer,
+  container,
+  h1,
+  main,
+  text,
+} from "./Common";
+
+export const Reset = ({
+  name = undefined,
+  url = undefined,
+  otp = undefined,
+}: {
+  name?: string;
+  url?: string;
+  otp?: string;
+}) => {
+  return (
+    <Html>
+      <Head>
+        <title>{`Reset your ${appName} password`}</title>
+      </Head>
+      <Preview>Reset your {appName} password</Preview>
+      <Body style={main}>
+        <Container style={container}>
+          <Image
+            src="/jazz.svg"
+            alt="Jazz logo"
+            width={100}
+            height={100}
+            priority
+          />
+          <Heading style={h1}>Reset your {appName} password</Heading>
+          <Section>
+            <Text style={text}>Hello{name ? ` ${name}` : ""},</Text>
+            <Text style={text}>
+              Someone recently requested a password change for your {appName}{" "}
+              account.
+              {url && !otp
+                ? " If this was you, you can set a new password here:"
+                : ""}
+            </Text>
+            {url && !otp && (
+              <Button style={button} href={url}>
+                Reset password
+              </Button>
+            )}
+            {otp && !url && (
+              <Section style={codeContainer}>
+                <Text style={code}>{otp}</Text>
+              </Section>
+            )}
+            <Text style={text}>
+              If you do not want to change your password or did not request
+              this, just ignore and delete this message.
+            </Text>
+            <Text style={text}>
+              To keep your account secure, please do not forward this email to
+              anyone.
+            </Text>
+          </Section>
+        </Container>
+      </Body>
+    </Html>
+  );
+};
+
+export default Reset;

examples/betterauth/src/components/emails/Verify.tsx

@@ -0,0 +1,80 @@
+import {
+  Body,
+  Button,
+  Container,
+  Head,
+  Heading,
+  Html,
+  Preview,
+  Section,
+  Text,
+} from "@react-email/components";
+import Image from "next/image";
+import * as React from "react";
+import {
+  appName,
+  button,
+  code,
+  codeContainer,
+  container,
+  h1,
+  main,
+  text,
+} from "./Common";
+
+export const Verify = ({
+  name = undefined,
+  url = undefined,
+  otp = undefined,
+}: {
+  name?: string;
+  url?: string;
+  otp?: string;
+}) => {
+  return (
+    <Html>
+      <Head>
+        <title>{`Verify your ${appName} account`}</title>
+      </Head>
+      <Preview>Verify your {appName} account</Preview>
+      <Body style={main}>
+        <Container style={container}>
+          <Image
+            src="/jazz.svg"
+            alt="Jazz logo"
+            width={100}
+            height={100}
+            priority
+          />
+          <Heading style={h1}>Verify your {appName} account</Heading>
+          <Section>
+            <Text style={text}>Hello{name ? ` ${name}` : ""},</Text>
+            <Text style={text}>
+              Someone recently signed up for a {appName} account using your
+              email address.
+              {url && !otp
+                ? " If this was you, you can verify your account here:"
+                : ""}
+            </Text>
+            {url && !otp && (
+              <Button style={button} href={url}>
+                Verify account
+              </Button>
+            )}
+            {otp && !url && (
+              <Section style={codeContainer}>
+                <Text style={code}>{otp}</Text>
+              </Section>
+            )}
+            <Text style={text}>
+              To keep your account secure, please do not forward this email to
+              anyone.
+            </Text>
+          </Section>
+        </Container>
+      </Body>
+    </Html>
+  );
+};
+
+export default Verify;

examples/betterauth/src/components/emails/Welcome.tsx

@@ -0,0 +1,53 @@
+import {
+  Body,
+  Button,
+  Container,
+  Head,
+  Heading,
+  Html,
+  Preview,
+  Row,
+  Section,
+  Text,
+} from "@react-email/components";
+import Image from "next/image";
+import * as React from "react";
+import { appName, button, container, h1, main, text } from "./Common";
+
+export const Welcome = () => {
+  return (
+    <Html>
+      <Head>
+        <title>{`Welcome to ${appName}`}</title>
+      </Head>
+      <Preview>Welcome to {appName}</Preview>
+      <Body style={main}>
+        <Container style={container}>
+          <Image
+            src="/jazz.svg"
+            alt="Jazz logo"
+            width={100}
+            height={100}
+            priority
+          />
+          <Heading style={h1}>Welcome to {appName}</Heading>
+          <Section>
+            <Row>
+              <Text style={text}>
+                Congratulations! You have successfully registered for {appName}.
+                We are excited to have you on board!
+              </Text>
+            </Row>
+          </Section>
+          <Section>
+            <Button style={button} href="/">
+              Go home
+            </Button>
+          </Section>
+        </Container>
+      </Body>
+    </Html>
+  );
+};
+
+export default Welcome;

examples/betterauth/src/components/emails/index.ts

@@ -0,0 +1,5 @@
+export * from "./Common";
+export * from "./Welcome";
+export * from "./Verify";
+export * from "./Reset";
+export * from "./Login";

examples/betterauth/src/components/forgot-password-form.tsx

@@ -1,85 +0,0 @@
-"use client";
-
-import { Button } from "@/components/ui/button";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { useAuth } from "jazz-react-auth-betterauth";
-import Link from "next/link";
-import { useRouter } from "next/navigation";
-import { useState } from "react";
-import { toast } from "sonner";
-
-export function ForgotPasswordForm() {
-  const router = useRouter();
-  const [email, setEmail] = useState("");
-  const auth = useAuth();
-
-  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-    auth.authClient.forgetPassword(
-      { email, redirectTo: `${window.location.origin}/auth/reset-password` },
-      {
-        onSuccess: () => {
-          toast.success("Email sent");
-        },
-        onError: (error) => {
-          toast.error("Error", {
-            description: error.error.message,
-          });
-        },
-      },
-    );
-  };
-
-  return (
-    <div className="flex flex-col gap-6">
-      <Card>
-        <CardHeader className="text-center">
-          <CardTitle className="text-xl">Recover password</CardTitle>
-          <CardDescription>
-            Enter your email to receive a link to reset your password
-          </CardDescription>
-        </CardHeader>
-        <CardContent>
-          <form onSubmit={handleSubmit}>
-            <div className="grid gap-6">
-              <div className="grid gap-6">
-                <div className="grid gap-3">
-                  <Label htmlFor="email">Email</Label>
-                  <Input
-                    id="email"
-                    type="email"
-                    placeholder="you@example.com"
-                    required
-                    value={email}
-                    onChange={(e) => setEmail(e.target.value)}
-                  />
-                </div>
-
-                <Button type="submit" className="w-full">
-                  Recover password
-                </Button>
-              </div>
-              <div className="text-center text-sm">
-                Back to{" "}
-                <Link
-                  href="/auth/sign-in"
-                  className="underline underline-offset-4"
-                >
-                  Sign in
-                </Link>
-              </div>
-            </div>
-          </form>
-        </CardContent>
-      </Card>
-    </div>
-  );
-}

examples/betterauth/src/components/navbar.tsx

@@ -1,55 +0,0 @@
-"use client";
-
-import { Button } from "@/components/ui/button";
-import { useAccount, useIsAuthenticated } from "jazz-react";
-import { useAuth } from "jazz-react-auth-betterauth";
-import { Account } from "jazz-tools";
-import Image from "next/image";
-import Link from "next/link";
-import { useCallback } from "react";
-
-export function Navbar() {
-  const { authClient } = useAuth();
-  const { logOut } = useAccount(Account, { resolve: { profile: {} } });
-
-  const isAuthenticated = useIsAuthenticated();
-
-  const signOut = useCallback(() => {
-    authClient.signOut().catch(console.error).finally(logOut);
-  }, [logOut, authClient]);
-
-  return (
-    <header className="absolute p-4 top-0 left-0 w-full z-10 flex justify-between">
-      <nav className="flex gap-4">
-        <Link href="/">
-          <Image
-            src="/jazz-logo.svg"
-            alt="Jazz logo"
-            width={96}
-            height={96}
-            priority
-          />
-        </Link>
-        {isAuthenticated && (
-          <Button asChild variant="link">
-            <Link href="/settings">Settings</Link>
-          </Button>
-        )}
-      </nav>
-      <nav className="flex gap-4">
-        {isAuthenticated ? (
-          <Button onClick={signOut}>Sign out</Button>
-        ) : (
-          <>
-            <Button asChild variant="secondary">
-              <Link href="/auth/sign-in">Sign in</Link>
-            </Button>
-            <Button asChild>
-              <Link href="/auth/sign-up">Sign up</Link>
-            </Button>
-          </>
-        )}
-      </nav>
-    </header>
-  );
-}

examples/betterauth/src/components/reset-password-form.tsx

@@ -1,108 +0,0 @@
-"use client";
-
-import { Button } from "@/components/ui/button";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { useAuth } from "jazz-react-auth-betterauth";
-import Link from "next/link";
-import { useRouter, useSearchParams } from "next/navigation";
-import { useState } from "react";
-import { toast } from "sonner";
-
-export function ResetPasswordForm() {
-  const router = useRouter();
-  const [password, setPassword] = useState("");
-  const [confirmPassword, setConfirmPassword] = useState("");
-  const auth = useAuth();
-  const searchParams = useSearchParams();
-
-  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-    const token = searchParams.get("token");
-
-    if (password !== confirmPassword) {
-      toast.error("Passwords do not match");
-      return;
-    }
-
-    if (!token) {
-      toast.error("Invalid token");
-      return;
-    }
-
-    auth.authClient.resetPassword(
-      { newPassword: password, token },
-      {
-        onSuccess: () => {
-          toast.success("Password successfully updated");
-          router.push("/auth/sign-in");
-        },
-        onError: (error) => {
-          toast.error("Error", {
-            description: error.error.message,
-          });
-        },
-      },
-    );
-  };
-
-  return (
-    <div className="flex flex-col gap-6">
-      <Card>
-        <CardHeader className="text-center">
-          <CardTitle className="text-xl">Reset password</CardTitle>
-          <CardDescription>Enter your new password</CardDescription>
-        </CardHeader>
-        <CardContent>
-          <form onSubmit={handleSubmit}>
-            <div className="grid gap-6">
-              <div className="grid gap-6">
-                <div className="grid gap-3">
-                  <Label htmlFor="password">New password</Label>
-                  <Input
-                    id="password"
-                    type="password"
-                    required
-                    value={password}
-                    onChange={(e) => setPassword(e.target.value)}
-                  />
-                </div>
-
-                <div className="grid gap-3">
-                  <Label htmlFor="confirmPassword">Confirm password</Label>
-                  <Input
-                    id="confirmPassword"
-                    type="password"
-                    required
-                    value={confirmPassword}
-                    onChange={(e) => setConfirmPassword(e.target.value)}
-                  />
-                </div>
-
-                <Button type="submit" className="w-full">
-                  Set password
-                </Button>
-              </div>
-              <div className="text-center text-sm">
-                Back to{" "}
-                <Link
-                  href="/auth/sign-in"
-                  className="underline underline-offset-4"
-                >
-                  Sign in
-                </Link>
-              </div>
-            </div>
-          </form>
-        </CardContent>
-      </Card>
-    </div>
-  );
-}

examples/betterauth/src/components/signin-form.tsx

@@ -1,124 +0,0 @@
-"use client";
-
-import { Button } from "@/components/ui/button";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { type SSOProviderType, useAuth } from "jazz-react-auth-betterauth";
-import Link from "next/link";
-import { useRouter } from "next/navigation";
-import { useState } from "react";
-import { toast } from "sonner";
-import { SSOButton } from "./SSOButton";
-
-interface Props {
-  providers: SSOProviderType[];
-}
-
-export function SigninForm({ providers }: Props) {
-  const router = useRouter();
-  const [email, setEmail] = useState("");
-  const [password, setPassword] = useState("");
-
-  const auth = useAuth();
-
-  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-    await auth.authClient.signIn.email(
-      { email, password },
-      {
-        onSuccess: async () => {
-          await auth.logIn();
-          router.push("/");
-        },
-        onError: (error) => {
-          toast.error("Error", {
-            description: error.error.message,
-          });
-        },
-      },
-    );
-  };
-
-  return (
-    <div className="flex flex-col gap-6">
-      <Card>
-        <CardHeader className="text-center">
-          <CardTitle className="text-xl">Welcome back</CardTitle>
-          <CardDescription>
-            Sign in with one of the following providers
-          </CardDescription>
-        </CardHeader>
-        <CardContent>
-          <form onSubmit={handleSubmit}>
-            <div className="grid gap-6">
-              {providers.length > 0 && (
-                <>
-                  <div className="flex flex-col gap-4">
-                    {providers?.map((provider) => (
-                      <SSOButton key={provider} provider={provider} />
-                    ))}
-                  </div>
-                  <div className="after:border-border relative text-center text-sm after:absolute after:inset-0 after:top-1/2 after:z-0 after:flex after:items-center after:border-t">
-                    <span className="bg-card text-muted-foreground relative z-10 px-2">
-                      Or continue with
-                    </span>
-                  </div>
-                </>
-              )}
-              <div className="grid gap-6">
-                <div className="grid gap-3">
-                  <Label htmlFor="email">Email</Label>
-                  <Input
-                    id="email"
-                    type="email"
-                    placeholder="you@example.com"
-                    required
-                    value={email}
-                    onChange={(e) => setEmail(e.target.value)}
-                  />
-                </div>
-                <div className="grid gap-3">
-                  <div className="flex items-center justify-between">
-                    <Label htmlFor="password">Password</Label>
-                    <Link
-                      href="/auth/forgot-password"
-                      className="ml-auto inline-block text-sm underline-offset-4 hover:underline"
-                    >
-                      Forgot your password?
-                    </Link>
-                  </div>
-                  <Input
-                    id="password"
-                    type="password"
-                    required
-                    value={password}
-                    onChange={(e) => setPassword(e.target.value)}
-                  />
-                </div>
-                <Button type="submit" className="w-full">
-                  Sign in
-                </Button>
-              </div>
-              <div className="text-center text-sm">
-                Don&apos;t have an account?{" "}
-                <Link
-                  href="/auth/sign-up"
-                  className="underline underline-offset-4"
-                >
-                  Sign up
-                </Link>
-              </div>
-            </div>
-          </form>
-        </CardContent>
-      </Card>
-    </div>
-  );
-}

examples/betterauth/src/components/signup-form.tsx

@@ -1,151 +0,0 @@
-"use client";
-
-import { Button } from "@/components/ui/button";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { type SSOProviderType, useAuth } from "jazz-react-auth-betterauth";
-import Link from "next/link";
-import { useRouter } from "next/navigation";
-import { useState } from "react";
-import { toast } from "sonner";
-import { SSOButton } from "./SSOButton";
-
-interface Props {
-  providers: SSOProviderType[];
-}
-
-export function SignupForm({ providers }: Props) {
-  const router = useRouter();
-  const auth = useAuth();
-  const [name, setName] = useState("");
-  const [email, setEmail] = useState("");
-  const [password, setPassword] = useState("");
-  const [confirmPassword, setConfirmPassword] = useState("");
-
-  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-
-    if (password !== confirmPassword) {
-      toast.error("Error", {
-        description: "Passwords do not match",
-      });
-      return;
-    }
-
-    await auth.authClient.signUp.email(
-      {
-        email,
-        password,
-        name,
-      },
-      {
-        onSuccess: async () => {
-          await auth.signIn();
-          router.push("/");
-        },
-        onError: (error) => {
-          toast.error("Sign up error", {
-            description: error.error.message,
-          });
-        },
-      },
-    );
-  };
-
-  return (
-    <div className="flex flex-col gap-6">
-      <Card>
-        <CardHeader className="text-center">
-          <CardTitle className="text-xl">Welcome</CardTitle>
-          <CardDescription>
-            Sign up with one of the following providers
-          </CardDescription>
-        </CardHeader>
-        <CardContent>
-          <form onSubmit={handleSubmit}>
-            <div className="grid gap-6">
-              {providers.length > 0 && (
-                <>
-                  <div className="flex flex-col gap-4">
-                    {providers?.map((provider) => (
-                      <SSOButton key={provider} provider={provider} />
-                    ))}
-                  </div>
-                  <div className="after:border-border relative text-center text-sm after:absolute after:inset-0 after:top-1/2 after:z-0 after:flex after:items-center after:border-t">
-                    <span className="bg-card text-muted-foreground relative z-10 px-2">
-                      Or continue with
-                    </span>
-                  </div>
-                </>
-              )}
-              <div className="grid gap-6">
-                <div className="grid gap-3">
-                  <Label htmlFor="name">Name</Label>
-                  <Input
-                    id="name"
-                    type="text"
-                    placeholder="John Doe"
-                    required
-                    value={name}
-                    onChange={(e) => setName(e.target.value)}
-                  />
-                </div>
-                <div className="grid gap-3">
-                  <Label htmlFor="email">Email</Label>
-                  <Input
-                    id="email"
-                    type="email"
-                    placeholder="you@example.com"
-                    required
-                    value={email}
-                    onChange={(e) => setEmail(e.target.value)}
-                  />
-                </div>
-                <div className="grid gap-3">
-                  <Label htmlFor="password">Password</Label>
-                  <Input
-                    id="password"
-                    type="password"
-                    placeholder="********"
-                    required
-                    value={password}
-                    onChange={(e) => setPassword(e.target.value)}
-                  />
-                </div>
-                <div className="grid gap-3">
-                  <Label htmlFor="confirmPassword">Confirm password</Label>
-                  <Input
-                    id="confirmPassword"
-                    type="password"
-                    required
-                    value={confirmPassword}
-                    onChange={(e) => setConfirmPassword(e.target.value)}
-                  />
-                </div>
-                <Button type="submit" className="w-full">
-                  Sign up
-                </Button>
-              </div>
-              <div className="text-center text-sm">
-                Already have an account?{" "}
-                <Link
-                  href="/auth/sign-in"
-                  className="underline underline-offset-4"
-                >
-                  Sign in
-                </Link>
-              </div>
-            </div>
-          </form>
-        </CardContent>
-      </Card>
-    </div>
-  );
-}

examples/betterauth/src/components/ui/button.tsx

@@ -1,59 +0,0 @@
-import { Slot } from "@radix-ui/react-slot";
-import { type VariantProps, cva } from "class-variance-authority";
-import * as React from "react";
-
-import { cn } from "@/lib/utils";
-
-const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
-  {
-    variants: {
-      variant: {
-        default:
-          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
-        destructive:
-          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
-        outline:
-          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
-        secondary:
-          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
-        ghost:
-          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
-        link: "text-primary underline-offset-4 hover:underline",
-      },
-      size: {
-        default: "h-9 px-4 py-2 has-[>svg]:px-3",
-        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
-        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
-        icon: "size-9",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  },
-);
-
-function Button({
-  className,
-  variant,
-  size,
-  asChild = false,
-  ...props
-}: React.ComponentProps<"button"> &
-  VariantProps<typeof buttonVariants> & {
-    asChild?: boolean;
-  }) {
-  const Comp = asChild ? Slot : "button";
-
-  return (
-    <Comp
-      data-slot="button"
-      className={cn(buttonVariants({ variant, size, className }))}
-      {...props}
-    />
-  );
-}
-
-export { Button, buttonVariants };

examples/betterauth/src/components/ui/card.tsx

@@ -1,92 +0,0 @@
-import * as React from "react";
-
-import { cn } from "@/lib/utils";
-
-function Card({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card"
-      className={cn(
-        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-header"
-      className={cn(
-        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-title"
-      className={cn("leading-none font-semibold", className)}
-      {...props}
-    />
-  );
-}
-
-function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-description"
-      className={cn("text-muted-foreground text-sm", className)}
-      {...props}
-    />
-  );
-}
-
-function CardAction({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-action"
-      className={cn(
-        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function CardContent({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-content"
-      className={cn("px-6", className)}
-      {...props}
-    />
-  );
-}
-
-function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-footer"
-      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
-      {...props}
-    />
-  );
-}
-
-export {
-  Card,
-  CardHeader,
-  CardFooter,
-  CardTitle,
-  CardAction,
-  CardDescription,
-  CardContent,
-};

examples/betterauth/src/components/ui/input.tsx

@@ -1,21 +0,0 @@
-import * as React from "react";
-
-import { cn } from "@/lib/utils";
-
-function Input({ className, type, ...props }: React.ComponentProps<"input">) {
-  return (
-    <input
-      type={type}
-      data-slot="input"
-      className={cn(
-        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
-        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-export { Input };

examples/betterauth/src/components/ui/label.tsx

@@ -1,22 +0,0 @@
-import * as LabelPrimitive from "@radix-ui/react-label";
-import * as React from "react";
-
-import { cn } from "@/lib/utils";
-
-function Label({
-  className,
-  ...props
-}: React.ComponentProps<typeof LabelPrimitive.Root>) {
-  return (
-    <LabelPrimitive.Root
-      data-slot="label"
-      className={cn(
-        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-export { Label };

examples/betterauth/src/components/ui/sonner.tsx

@@ -1,22 +0,0 @@
-"use client";
-
-import { Toaster as Sonner, type ToasterProps } from "sonner";
-
-const Toaster = ({ ...props }: ToasterProps) => {
-  return (
-    <Sonner
-      theme="light"
-      className="toaster group"
-      style={
-        {
-          "--normal-bg": "var(--popover)",
-          "--normal-text": "var(--popover-foreground)",
-          "--normal-border": "var(--border)",
-        } as React.CSSProperties
-      }
-      {...props}
-    />
-  );
-};
-
-export { Toaster };

examples/betterauth/src/components/user-settings.tsx

@@ -1,60 +0,0 @@
-"use client";
-
-import { Button } from "@/components/ui/button";
-import { useAccount, useIsAuthenticated } from "jazz-react";
-import { useAuth } from "jazz-react-auth-betterauth";
-import Link from "next/link";
-import { useRouter } from "next/navigation";
-import { toast } from "sonner";
-
-export function UserSettings() {
-  const router = useRouter();
-  const { authClient } = useAuth();
-  const { logOut } = useAccount();
-  const isAuthenticated = useIsAuthenticated();
-
-  if (!isAuthenticated) {
-    return (
-      <div className="flex flex-col gap-8">
-        <h1 className="text-center text-2xl">Forbidden</h1>
-        <p className="text-center text-sm text-muted-foreground">
-          Please{" "}
-          <Link href="/auth/sign-in" className="underline text-primary">
-            sign in
-          </Link>{" "}
-          to access this page.
-        </p>
-      </div>
-    );
-  }
-
-  return (
-    <>
-      <div className="flex flex-col gap-8">
-        <h1 className="text-4xl font-semibold">Settings</h1>
-
-        <Button
-          variant="destructive"
-          className="relative"
-          type="button"
-          onClick={async (e) => {
-            e.preventDefault();
-            authClient.deleteUser(undefined, {
-              onSuccess: () => {
-                logOut();
-                router.push("/");
-              },
-              onError: (error) => {
-                toast.error("Error", {
-                  description: error.error.message,
-                });
-              },
-            });
-          }}
-        >
-          Delete account
-        </Button>
-      </div>
-    </>
-  );
-}

examples/betterauth/src/lib/auth-email.ts

@@ -0,0 +1,63 @@
+import type { betterAuth } from "better-auth";
+import type { emailOTP } from "better-auth/plugins";
+import type { magicLink } from "better-auth/plugins";
+
+export const sendEmailOtpCb: Parameters<
+  typeof emailOTP
+>[0]["sendVerificationOTP"] = async ({ email, otp, type }) => {
+  const searchParams = new URLSearchParams();
+  searchParams.set("email", email);
+  searchParams.set("otp", otp);
+
+  let emailLink = "";
+  if (type === "sign-in") {
+    // Send the OTP for sign-in
+    emailLink = `/mockEmail/sign-in?${searchParams.toString()}`;
+  } else if (type === "email-verification") {
+    // Send the OTP for email verification
+    emailLink = `/mockEmail/email-verification?${searchParams.toString()}`;
+  } else {
+    // Send the OTP for password reset
+    emailLink = `/mockEmail/forget-password?${searchParams.toString()}`;
+  }
+  console.log("Mock email sent: " + emailLink);
+};
+
+export const sendMagicLinkCb: Parameters<typeof magicLink>[0]["sendMagicLink"] =
+  async ({ email, url }) => {
+    const searchParams = new URLSearchParams();
+    searchParams.set("url", url);
+    const emailLink = `/mockEmail/sign-in?${searchParams.toString()}`;
+    console.log("Mock email sent: " + emailLink);
+  };
+
+export const sendWelcomeEmailCb: NonNullable<
+  NonNullable<
+    NonNullable<Parameters<typeof betterAuth>[0]["databaseHooks"]>["user"]
+  >["create"]
+>["after"] = async (user) => {
+  const searchParams = new URLSearchParams();
+  searchParams.set("name", user.name);
+  const emailLink = `/mockEmail/welcome?${searchParams.toString()}`;
+  console.log("Mock email sent: " + emailLink);
+};
+
+export const sendVerificationEmailCb: NonNullable<
+  Parameters<typeof betterAuth>[0]["emailVerification"]
+>["sendVerificationEmail"] = async ({ user, url }) => {
+  const searchParams = new URLSearchParams();
+  searchParams.set("name", user.name);
+  searchParams.set("url", url);
+  const emailLink = `/mockEmail/email-verification?${searchParams.toString()}`;
+  console.log("Mock email sent: " + emailLink);
+};
+
+export const sendResetPasswordCb: NonNullable<
+  Parameters<typeof betterAuth>[0]["emailAndPassword"]
+>["sendResetPassword"] = async ({ user, url }) => {
+  const searchParams = new URLSearchParams();
+  searchParams.set("name", user.name);
+  searchParams.set("url", url);
+  const emailLink = `/mockEmail/forgot-password?${searchParams.toString()}`;
+  console.log("Mock email sent: " + emailLink);
+};

examples/betterauth/src/lib/auth.ts

@@ -1,42 +1,64 @@
+import * as crypto from "node:crypto";
+import { appName } from "@/components/emails";
 import { betterAuth } from "better-auth";
 import { getMigrations } from "better-auth/db";
+import { emailOTP, haveIBeenPwned, magicLink } from "better-auth/plugins";
 import Database from "better-sqlite3";
 import { jazzPlugin } from "jazz-betterauth-server-plugin";
+import {
+  sendEmailOtpCb,
+  sendMagicLinkCb,
+  sendResetPasswordCb,
+  sendVerificationEmailCb,
+  sendWelcomeEmailCb,
+} from "./auth-email";
 import { socialProviders } from "./socialProviders";
 
 export const auth = await (async () => {
+  const generatedKeys = crypto.generateKeyPairSync("ed25519");
+
   // Configure Better Auth server
   const auth = betterAuth({
-    appName: "Jazz Example: Better Auth",
+    appName: appName,
+    secret: undefined as string | undefined,
     database: new Database("sqlite.db"),
     emailAndPassword: {
       enabled: true,
-      async sendResetPassword({ url }) {
-        // Here we can send an email to the user with the reset password link
-        console.log("****** RESET PASSWORD ******");
-        console.log("navigate to", url, "to reset your password");
-        console.log("******");
-      },
+      sendResetPassword: sendResetPasswordCb,
     },
     emailVerification: {
-      async sendVerificationEmail(data) {
-        console.error("Not implemented");
+      sendVerificationEmail: sendVerificationEmailCb,
+    },
+    socialProviders: socialProviders,
+    account: {
+      accountLinking: {
+        allowDifferentEmails: true,
+        allowUnlinkingAll: true,
       },
     },
-    socialProviders,
     user: {
       deleteUser: {
         enabled: true,
       },
     },
-    plugins: [jazzPlugin()],
+    plugins: [
+      haveIBeenPwned(),
+      jazzPlugin(
+        generatedKeys.publicKey.export({
+          type: "spki",
+          format: "pem",
+        }) as string,
+        process.env.BETTER_AUTH_SECRET,
+      ),
+      magicLink({
+        sendMagicLink: sendMagicLinkCb,
+      }),
+      emailOTP({ sendVerificationOTP: sendEmailOtpCb }),
+    ],
     databaseHooks: {
       user: {
         create: {
-          async after(user) {
-            // Here we can send a welcome email to the user
-            console.error("Not implemented");
-          },
+          after: sendWelcomeEmailCb,
         },
       },
     },
@@ -46,5 +68,27 @@ export const auth = await (async () => {
   const migrations = await getMigrations(auth.options);
   await migrations.runMigrations();
 
+  // Set database encryption secret
+  auth.options.secret = process.env.BETTER_AUTH_SECRET;
+  if (process.env.BETTER_AUTH_SECRET) {
+    const signedSecret = crypto
+      .sign(
+        undefined,
+        Buffer.from(process.env.BETTER_AUTH_SECRET),
+        generatedKeys.privateKey,
+      )
+      .toString("hex");
+    auth.api
+      .setSecret({
+        body: {
+          secret: process.env.BETTER_AUTH_SECRET,
+          signedSecret,
+        },
+      })
+      .then((response) => response)
+      .then((data) => console.log(`Set secret: ${data.status}`))
+      .catch((error) => console.error(error));
+  }
+
   return auth;
 })();

examples/betterauth/src/lib/utils.ts

@@ -1,6 +0,0 @@
-import { type ClassValue, clsx } from "clsx";
-import { twMerge } from "tailwind-merge";
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs));
-}

examples/betterauth/tests/authFlow.spec.ts

@@ -11,14 +11,14 @@ test("should sign up, sign in, and logout", async ({ page }) => {
   await page.goto("/");
   const homePage = new HomePage(page);
   await homePage.expectLoggedOut();
-  await homePage.signUpLink.click();
+  await homePage.signUpLinkButton.click();
   await homePage.signUpEmail(username, email, password);
   await homePage.expectLoggedIn(username);
 
   // Log out & sign in
   await homePage.logout();
   await homePage.expectLoggedOut();
-  await homePage.signInLink.click();
+  await homePage.signInLinkButton.click();
   await homePage.signInEmail(email, password);
   await homePage.expectLoggedIn(username);
 

examples/betterauth/tests/pages/HomePage.ts

@@ -4,11 +4,11 @@ export class HomePage {
   constructor(public page: Page) {}
 
   usernameInput = this.page.getByRole("textbox", {
-    name: "Name",
+    name: "Full name",
     exact: true,
   });
   emailInput = this.page.getByRole("textbox", {
-    name: "Email",
+    name: "Email address",
     exact: true,
   });
   passwordInput = this.page.getByRole("textbox", {
@@ -27,11 +27,11 @@ export class HomePage {
     name: "Sign in",
     exact: true,
   });
-  signUpLink = this.page.getByRole("link", {
+  signUpLinkButton = this.page.getByRole("link", {
     name: "Sign up",
     exact: true,
   });
-  signInLink = this.page.getByRole("link", {
+  signInLinkButton = this.page.getByRole("link", {
     name: "Sign in",
     exact: true,
   });
@@ -60,17 +60,17 @@ export class HomePage {
 
   async expectLoggedIn(name?: string) {
     await expect(this.logoutButton).toBeVisible();
-    await expect(this.signInLink).not.toBeVisible();
-    await expect(this.signUpLink).not.toBeVisible();
+    await expect(this.signInLinkButton).not.toBeVisible();
+    await expect(this.signUpLinkButton).not.toBeVisible();
     if (name) {
-      await expect(this.page.getByText(`Signed in as ${name}`)).toBeVisible();
+      await expect(this.page.getByText(`Signed in as ${name}.`)).toBeVisible();
     }
   }
 
   async expectLoggedOut() {
     await expect(this.logoutButton).not.toBeVisible();
-    await expect(this.signInLink).toBeVisible();
-    await expect(this.signUpLink).toBeVisible();
-    await expect(this.page.getByText(`Anonymous user`)).toBeVisible();
+    await expect(this.signInLinkButton).toBeVisible();
+    await expect(this.signUpLinkButton).toBeVisible();
+    await expect(this.page.getByText(`Not signed in.`)).toBeVisible();
   }
 }

examples/chat-rn-expo-clerk/CHANGELOG.md

@@ -1,135 +1,5 @@
 # chat-rn-expo-clerk
 
-## 1.0.130
-
-### Patch Changes
-
-- Updated dependencies [365b0ea]
-  - jazz-tools@0.14.7
-  - jazz-expo@0.14.7
-  - jazz-react-native-media-images@0.14.7
-
-## 1.0.129
-
-### Patch Changes
-
-- Updated dependencies [9d6d9fe]
-- Updated dependencies [9d6d9fe]
-  - jazz-tools@0.14.6
-  - jazz-expo@0.14.6
-  - jazz-react-native-media-images@0.14.6
-
-## 1.0.128
-
-### Patch Changes
-
-- Updated dependencies [91cbb2f]
-- Updated dependencies [20b3d88]
-  - jazz-tools@0.14.5
-  - jazz-expo@0.14.5
-  - jazz-react-native-media-images@0.14.5
-
-## 1.0.127
-
-### Patch Changes
-
-- Updated dependencies [011af55]
-  - jazz-tools@0.14.4
-  - jazz-expo@0.14.4
-  - jazz-react-native-media-images@0.14.4
-
-## 1.0.126
-
-### Patch Changes
-
-- Updated dependencies [3d1027f]
-- Updated dependencies [c240eed]
-  - jazz-tools@0.14.2
-  - jazz-expo@0.14.2
-  - jazz-react-native-media-images@0.14.2
-
-## 1.0.125
-
-### Patch Changes
-
-- Updated dependencies [cdfc105]
-  - jazz-tools@0.14.1
-  - jazz-expo@0.14.1
-  - jazz-react-native-media-images@0.14.1
-
-## 1.0.124
-
-### Patch Changes
-
-- Updated dependencies [5835ed1]
-  - jazz-tools@0.14.0
-  - jazz-expo@0.14.0
-  - jazz-react-native-media-images@0.14.0
-
-## 1.0.123
-
-### Patch Changes
-
-- jazz-expo@0.13.32
-
-## 1.0.122
-
-### Patch Changes
-
-- Updated dependencies [e5b170f]
-  - jazz-tools@0.13.31
-  - jazz-expo@0.13.31
-  - jazz-react-native-media-images@0.13.31
-
-## 1.0.121
-
-### Patch Changes
-
-- jazz-expo@0.13.30
-- jazz-tools@0.13.30
-- jazz-react-native-media-images@0.13.30
-
-## 1.0.120
-
-### Patch Changes
-
-- jazz-expo@0.13.29
-- jazz-tools@0.13.29
-- jazz-react-native-media-images@0.13.29
-
-## 1.0.119
-
-### Patch Changes
-
-- jazz-expo@0.13.28
-- jazz-tools@0.13.28
-- jazz-react-native-media-images@0.13.28
-
-## 1.0.118
-
-### Patch Changes
-
-- jazz-expo@0.13.27
-- jazz-tools@0.13.27
-- jazz-react-native-media-images@0.13.27
-
-## 1.0.117
-
-### Patch Changes
-
-- Updated dependencies [ff846d9]
-  - jazz-tools@0.13.26
-  - jazz-expo@0.13.26
-  - jazz-react-native-media-images@0.13.26
-
-## 1.0.116
-
-### Patch Changes
-
-- jazz-expo@0.13.25
-- jazz-tools@0.13.25
-- jazz-react-native-media-images@0.13.25
-
 ## 1.0.115
 
 ### Patch Changes

examples/chat-rn-expo-clerk/app/chat/[chatId].tsx

@@ -7,7 +7,7 @@ import { useLocalSearchParams } from "expo-router";
 import { useAccount, useCoState } from "jazz-expo";
 import { ProgressiveImg } from "jazz-expo";
 import { createImage } from "jazz-react-native-media-images";
-import { CoPlainText, Group, Loaded } from "jazz-tools";
+import { Group, ID } from "jazz-tools";
 import { useEffect, useLayoutEffect, useState } from "react";
 import React, {
   SafeAreaView,
@@ -26,7 +26,7 @@ import React, {
 export default function Conversation() {
   const { chatId } = useLocalSearchParams();
   const { me } = useAccount();
-  const [chat, setChat] = useState<Loaded<typeof Chat>>();
+  const [chat, setChat] = useState<Chat>();
   const [message, setMessage] = useState("");
   const loadedChat = useCoState(Chat, chat?.id, { resolve: { $each: true } });
   const navigation = useNavigation();
@@ -37,7 +37,7 @@ export default function Conversation() {
     if (chatId === "new") {
       createChat();
     } else {
-      loadChat(chatId as string);
+      loadChat(chatId as ID<Chat>);
     }
   }, [chat]);
 
@@ -69,10 +69,10 @@ export default function Conversation() {
     setChat(chat);
   };
 
-  const loadChat = async (chatId: string) => {
+  const loadChat = async (chatId: ID<Chat>) => {
     try {
-      const chat = await Chat.load(chatId);
-      if (chat) setChat(chat);
+      const chat = await Chat.load(chatId, me);
+      setChat(chat);
     } catch (error) {
       console.log("Error loading chat", error);
       Alert.alert("Error", `Error loading chat: ${error}`);
@@ -82,12 +82,7 @@ export default function Conversation() {
   const sendMessage = () => {
     if (!chat) return;
     if (message.trim()) {
-      chat.push(
-        Message.create(
-          { text: CoPlainText.create(message, chat._owner) },
-          chat._owner,
-        ),
-      );
+      chat.push(Message.create({ text: message }, { owner: chat._owner }));
       setMessage("");
     }
   };
@@ -109,12 +104,7 @@ export default function Conversation() {
           maxSize: 2048,
         });
 
-        chat.push(
-          Message.create(
-            { text: CoPlainText.create("", chat._owner), image },
-            chat._owner,
-          ),
-        );
+        chat.push(Message.create({ text: "", image }, { owner: chat._owner }));
       }
     } catch (error) {
       Alert.alert("Error", "Failed to upload image");
@@ -123,8 +113,8 @@ export default function Conversation() {
     }
   };
 
-  const renderMessageItem = ({ item }: { item: Loaded<typeof Message> }) => {
-    const isMe = item._edits.text?.by?.isMe;
+  const renderMessageItem = ({ item }: { item: Message }) => {
+    const isMe = item._edits.text.by?.isMe;
     return (
       <View
         className={clsx(
@@ -139,7 +129,7 @@ export default function Conversation() {
               isMe ? "text-right" : "text-left",
             )}
           >
-            {item._edits.text?.by?.profile?.name}
+            {item._edits.text.by?.profile?.name}
           </Text>
         ) : null}
         <View
@@ -175,8 +165,8 @@ export default function Conversation() {
               !isMe ? "mt-2 text-gray-500" : "mt-1 text-gray-200",
             )}
           >
-            {item._edits.text?.madeAt?.getHours().toString().padStart(2, "0")}:
-            {item._edits.text?.madeAt?.getMinutes().toString().padStart(2, "0")}
+            {item._edits.text.madeAt?.getHours().toString().padStart(2, "0")}:
+            {item._edits.text.madeAt?.getMinutes().toString().padStart(2, "0")}
           </Text>
         </View>
       </View>

examples/chat-rn-expo-clerk/app/chat/index.tsx

@@ -32,7 +32,7 @@ export default function ChatScreen() {
     });
   }, [navigation]);
 
-  const loadChat = async (chatId: string | "new") => {
+  const loadChat = async (chatId: ID<Chat> | "new") => {
     router.navigate(`/chat/${chatId}`);
   };
 
@@ -49,7 +49,7 @@ export default function ChatScreen() {
           text: "Join",
           onPress: (chatId) => {
             if (chatId) {
-              loadChat(chatId);
+              loadChat(chatId as ID<Chat>);
             } else {
               Alert.alert("Error", "Chat ID cannot be empty.");
             }

examples/chat-rn-expo-clerk/package.json

@@ -1,7 +1,7 @@
 {
   "name": "chat-rn-expo-clerk",
   "main": "index.js",
-  "version": "1.0.130",
+  "version": "1.0.115",
   "scripts": {
     "build": "expo export -p ios",
     "start": "expo start",
@@ -18,50 +18,50 @@
     "@bam.tech/react-native-image-resizer": "^3.0.11",
     "@clerk/clerk-expo": "^2.2.21",
     "@craftzdog/react-native-buffer": "6.0.5",
-    "@expo/vector-icons": "^14.1.0",
+    "@expo/vector-icons": "^14.0.2",
     "@react-native-community/netinfo": "11.4.1",
     "@react-navigation/native": "7.0.19",
     "@react-navigation/native-stack": "7.2.1",
     "clsx": "^2.0.0",
-    "expo": "^53.0.8",
-    "expo-build-properties": "~0.14.6",
-    "expo-clipboard": "~7.1.4",
-    "expo-constants": "~17.1.6",
-    "expo-crypto": "~14.1.4",
-    "expo-dev-client": "~5.1.8",
-    "expo-file-system": "^18.1.9",
-    "expo-font": "~13.3.1",
-    "expo-image-picker": "~16.1.4",
-    "expo-linking": "~7.1.4",
-    "expo-router": "~5.0.6",
-    "expo-secure-store": "~14.2.3",
-    "expo-splash-screen": "~0.30.8",
-    "expo-sqlite": "15.2.9",
-    "expo-status-bar": "~2.2.3",
-    "expo-web-browser": "~14.1.6",
+    "expo": "^52.0.42",
+    "expo-build-properties": "~0.13.1",
+    "expo-clipboard": "~7.0.0",
+    "expo-constants": "~17.0.8",
+    "expo-crypto": "~14.0.2",
+    "expo-dev-client": "~5.0.16",
+    "expo-file-system": "^18.0.4",
+    "expo-font": "~13.0.1",
+    "expo-image-picker": "~16.0.6",
+    "expo-linking": "~7.0.5",
+    "expo-router": "~4.0.19",
+    "expo-secure-store": "~14.0.0",
+    "expo-splash-screen": "~0.29.22",
+    "expo-sqlite": "15.1.3",
+    "expo-status-bar": "~2.0.1",
+    "expo-web-browser": "~14.0.1",
     "jazz-expo": "workspace:*",
     "jazz-react-native-media-images": "workspace:*",
     "jazz-tools": "workspace:*",
     "nativewind": "^4.1.21",
-    "react": "19.0.0",
-    "react-dom": "19.0.0",
-    "react-native": "0.79.2",
-    "react-native-gesture-handler": "~2.24.0",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "react-native": "0.76.7",
+    "react-native-gesture-handler": "~2.20.2",
     "react-native-get-random-values": "^1.11.0",
-    "react-native-reanimated": "~3.17.5",
-    "react-native-safe-area-context": "5.4.0",
-    "react-native-screens": "4.10.0",
+    "react-native-reanimated": "~3.16.3",
+    "react-native-safe-area-context": "4.12.0",
+    "react-native-screens": "4.4.0",
     "react-native-url-polyfill": "^2.0.0",
-    "react-native-web": "~0.20.0",
+    "react-native-web": "~0.19.13",
     "readable-stream": "4.7.0"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",
-    "@types/react": "~19.0.14",
+    "@types/react": "~18.3.12",
     "@types/react-test-renderer": "^19.0.0",
     "react-test-renderer": "18.3.1",
     "tailwindcss": "^3.4.17",
-    "typescript": "5.8.3"
+    "typescript": "5.6.2"
   },
   "private": true
 }

examples/chat-rn-expo-clerk/src/schema.ts

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

examples/chat-rn-expo/CHANGELOG.md

@@ -1,121 +1,5 @@
 # chat-rn-expo
 
-## 1.0.117
-
-### Patch Changes
-
-- Updated dependencies [365b0ea]
-  - jazz-tools@0.14.7
-  - jazz-expo@0.14.7
-
-## 1.0.116
-
-### Patch Changes
-
-- Updated dependencies [9d6d9fe]
-- Updated dependencies [9d6d9fe]
-  - jazz-tools@0.14.6
-  - jazz-expo@0.14.6
-
-## 1.0.115
-
-### Patch Changes
-
-- Updated dependencies [91cbb2f]
-- Updated dependencies [20b3d88]
-  - jazz-tools@0.14.5
-  - jazz-expo@0.14.5
-
-## 1.0.114
-
-### Patch Changes
-
-- Updated dependencies [011af55]
-  - jazz-tools@0.14.4
-  - jazz-expo@0.14.4
-
-## 1.0.113
-
-### Patch Changes
-
-- Updated dependencies [3d1027f]
-- Updated dependencies [c240eed]
-  - jazz-tools@0.14.2
-  - jazz-expo@0.14.2
-
-## 1.0.112
-
-### Patch Changes
-
-- Updated dependencies [cdfc105]
-  - jazz-tools@0.14.1
-  - jazz-expo@0.14.1
-
-## 1.0.111
-
-### Patch Changes
-
-- Updated dependencies [5835ed1]
-  - jazz-tools@0.14.0
-  - jazz-expo@0.14.0
-
-## 1.0.110
-
-### Patch Changes
-
-- jazz-expo@0.13.32
-
-## 1.0.109
-
-### Patch Changes
-
-- Updated dependencies [e5b170f]
-  - jazz-tools@0.13.31
-  - jazz-expo@0.13.31
-
-## 1.0.108
-
-### Patch Changes
-
-- jazz-expo@0.13.30
-- jazz-tools@0.13.30
-
-## 1.0.107
-
-### Patch Changes
-
-- jazz-expo@0.13.29
-- jazz-tools@0.13.29
-
-## 1.0.106
-
-### Patch Changes
-
-- jazz-expo@0.13.28
-- jazz-tools@0.13.28
-
-## 1.0.105
-
-### Patch Changes
-
-- jazz-expo@0.13.27
-- jazz-tools@0.13.27
-
-## 1.0.104
-
-### Patch Changes
-
-- Updated dependencies [ff846d9]
-  - jazz-tools@0.13.26
-  - jazz-expo@0.13.26
-
-## 1.0.103
-
-### Patch Changes
-
-- jazz-expo@0.13.25
-- jazz-tools@0.13.25
-
 ## 1.0.102
 
 ### Patch Changes

examples/chat-rn-expo/app.json

@@ -23,12 +23,7 @@
       },
       "package": "com.jazz.chatrn"
     },
-    "plugins": [
-      "expo-secure-store",
-      "expo-sqlite",
-      "expo-build-properties",
-      "expo-web-browser"
-    ],
+    "plugins": ["expo-secure-store", "expo-sqlite", "expo-build-properties"],
     "extra": {
       "eas": {
         "projectId": "e0e61872-1906-4c84-b9d8-9be77355cad0"

examples/chat-rn-expo/package.json

@@ -1,9 +1,9 @@
 {
   "name": "chat-rn-expo",
-  "version": "1.0.117",
+  "version": "1.0.102",
   "main": "index.js",
   "scripts": {
-    "build": "tsc --noEmit && expo export -p ios",
+    "build": "expo export -p ios",
     "start": "expo start",
     "format-and-lint": "biome check .",
     "format-and-lint:fix": "biome check . --write",
@@ -19,35 +19,35 @@
     "@react-navigation/native": "7.0.19",
     "@react-navigation/native-stack": "7.2.1",
     "clsx": "^2.0.0",
-    "expo": "53.0.8",
-    "expo-build-properties": "~0.14.6",
-    "expo-clipboard": "~7.1.4",
-    "expo-constants": "~17.1.6",
-    "expo-dev-client": "~5.1.8",
-    "expo-linking": "~7.1.4",
-    "expo-secure-store": "~14.2.3",
-    "expo-sqlite": "15.2.9",
-    "expo-status-bar": "~2.2.3",
-    "expo-web-browser": "~14.1.6",
+    "expo": "52.0.42",
+    "expo-build-properties": "~0.13.1",
+    "expo-clipboard": "~7.0.0",
+    "expo-constants": "~17.0.8",
+    "expo-dev-client": "~5.0.16",
+    "expo-linking": "~7.0.5",
+    "expo-secure-store": "~14.0.0",
+    "expo-sqlite": "15.1.3",
+    "expo-status-bar": "~2.0.1",
+    "expo-web-browser": "~14.0.1",
     "jazz-expo": "workspace:*",
     "jazz-tools": "workspace:*",
     "nativewind": "^4.1.21",
-    "react": "19.0.0",
-    "react-dom": "19.0.0",
-    "react-native": "0.79.2",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "react-native": "0.76.7",
     "react-native-get-random-values": "^1.11.0",
-    "react-native-safe-area-context": "5.4.0",
-    "react-native-screens": "4.10.0",
     "react-native-nitro-modules": "0.25.2",
     "react-native-quick-crypto": "1.0.0-beta.15",
+    "react-native-safe-area-context": "4.12.0",
+    "react-native-screens": "4.4.0",
     "react-native-url-polyfill": "^2.0.0",
     "readable-stream": "4.7.0"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",
-    "@types/react": "~19.0.14",
+    "@types/react": "~18.3.12",
     "tailwindcss": "^3.4.17",
-    "typescript": "5.8.3"
+    "typescript": "5.6.2"
   },
   "private": true
 }

examples/chat-rn-expo/src/chat.tsx

@@ -1,6 +1,6 @@
 import clsx from "clsx";
 import * as Clipboard from "expo-clipboard";
-import { Group, ID, Loaded, Profile } from "jazz-tools";
+import { Group, ID, Profile } from "jazz-tools";
 import { useEffect, useState } from "react";
 import React, {
   Button,
@@ -19,7 +19,7 @@ import { Chat, Message } from "./schema";
 
 export default function ChatScreen({ navigation }: { navigation: any }) {
   const { me, logOut } = useAccount();
-  const [chatId, setChatId] = useState<string>();
+  const [chatId, setChatId] = useState<ID<Chat>>();
   const [chatIdInput, setChatIdInput] = useState<string>();
   const loadedChat = useCoState(Chat, chatId, { resolve: { $each: true } });
   const [message, setMessage] = useState("");
@@ -59,7 +59,7 @@ export default function ChatScreen({ navigation }: { navigation: any }) {
 
   const joinChat = () => {
     if (chatIdInput) {
-      setChatId(chatIdInput);
+      setChatId(chatIdInput as ID<Chat>);
     } else {
       Alert.alert("Error", "Chat ID cannot be empty.");
     }
@@ -75,7 +75,7 @@ export default function ChatScreen({ navigation }: { navigation: any }) {
     }
   };
 
-  const renderMessageItem = ({ item }: { item: Loaded<typeof Message> }) => {
+  const renderMessageItem = ({ item }: { item: Message }) => {
     const isMe = item._edits?.text?.by?.isMe;
     return (
       <View
@@ -156,7 +156,7 @@ export default function ChatScreen({ navigation }: { navigation: any }) {
             textAlignVertical="center"
             onSubmitEditing={() => {
               if (chatIdInput) {
-                setChatId(chatIdInput);
+                setChatId(chatIdInput as ID<Chat>);
               }
             }}
             testID="chat-id-input"

examples/chat-rn-expo/src/schema.ts

@@ -1,7 +1,7 @@
-import { co, z } from "jazz-tools";
+import { CoList, CoMap, co } from "jazz-tools";
 
-export const Message = co.map({
-  text: z.string(),
-});
+export class Message extends CoMap {
+  text = co.string;
+}
 
-export const Chat = co.list(Message);
+export class Chat extends CoList.Of(co.ref(Message)) {}

examples/chat-rn/CHANGELOG.md

@@ -1,149 +1,5 @@
 # chat-rn
 
-## 1.0.125
-
-### Patch Changes
-
-- Updated dependencies [365b0ea]
-  - jazz-tools@0.14.7
-  - jazz-react-native@0.14.7
-
-## 1.0.124
-
-### Patch Changes
-
-- Updated dependencies [9d6d9fe]
-- Updated dependencies [9d6d9fe]
-  - jazz-tools@0.14.6
-  - jazz-react-native@0.14.6
-
-## 1.0.123
-
-### Patch Changes
-
-- Updated dependencies [91cbb2f]
-- Updated dependencies [20b3d88]
-  - jazz-tools@0.14.5
-  - jazz-react-native@0.14.5
-
-## 1.0.122
-
-### Patch Changes
-
-- Updated dependencies [011af55]
-  - jazz-tools@0.14.4
-  - jazz-react-native@0.14.4
-
-## 1.0.121
-
-### Patch Changes
-
-- Updated dependencies [3d1027f]
-- Updated dependencies [c240eed]
-  - jazz-tools@0.14.2
-  - jazz-react-native@0.14.2
-
-## 1.0.120
-
-### Patch Changes
-
-- Updated dependencies [c8b33ad]
-- Updated dependencies [cdfc105]
-  - cojson@0.14.1
-  - jazz-tools@0.14.1
-  - cojson-transport-ws@0.14.1
-  - jazz-react-native@0.14.1
-
-## 1.0.119
-
-### Patch Changes
-
-- Updated dependencies [5835ed1]
-- Updated dependencies [5835ed1]
-  - cojson@0.14.0
-  - jazz-tools@0.14.0
-  - cojson-transport-ws@0.14.0
-  - jazz-react-native@0.14.0
-
-## 1.0.118
-
-### Patch Changes
-
-- jazz-react-native@0.13.32
-
-## 1.0.117
-
-### Patch Changes
-
-- Updated dependencies [e5b170f]
-- Updated dependencies [d63716a]
-- Updated dependencies [d5edad7]
-  - jazz-tools@0.13.31
-  - cojson@0.13.31
-  - jazz-react-native@0.13.31
-  - cojson-transport-ws@0.13.31
-
-## 1.0.116
-
-### Patch Changes
-
-- Updated dependencies [07dd2c5]
-  - cojson@0.13.30
-  - cojson-transport-ws@0.13.30
-  - jazz-react-native@0.13.30
-  - jazz-tools@0.13.30
-
-## 1.0.115
-
-### Patch Changes
-
-- Updated dependencies [eef1a5d]
-- Updated dependencies [191ae38]
-- Updated dependencies [daee7b9]
-  - cojson@0.13.29
-  - jazz-react-native@0.13.29
-  - cojson-transport-ws@0.13.29
-  - jazz-tools@0.13.29
-
-## 1.0.114
-
-### Patch Changes
-
-- Updated dependencies [e7ccb2c]
-- Updated dependencies [422dbc4]
-  - cojson@0.13.28
-  - cojson-transport-ws@0.13.28
-  - jazz-react-native@0.13.28
-  - jazz-tools@0.13.28
-
-## 1.0.113
-
-### Patch Changes
-
-- Updated dependencies [6357052]
-  - cojson@0.13.27
-  - cojson-transport-ws@0.13.27
-  - jazz-react-native@0.13.27
-  - jazz-tools@0.13.27
-
-## 1.0.112
-
-### Patch Changes
-
-- Updated dependencies [ff846d9]
-  - jazz-tools@0.13.26
-  - jazz-react-native@0.13.26
-
-## 1.0.111
-
-### Patch Changes
-
-- Updated dependencies [a846e07]
-  - cojson@0.13.25
-  - cojson-transport-ws@0.13.25
-  - jazz-react-native@0.13.25
-  - jazz-tools@0.13.25
-
 ## 1.0.110
 
 ### Patch Changes

examples/chat-rn/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chat-rn",
-  "version": "1.0.125",
+  "version": "1.0.110",
   "main": "index.js",
   "scripts": {
     "android": "react-native run-android",
@@ -24,7 +24,7 @@
     "jazz-react-native": "workspace:*",
     "jazz-tools": "workspace:*",
     "react": "18.3.1",
-    "react-native": "0.79.2",
+    "react-native": "0.76.7",
     "react-native-get-random-values": "^1.11.0",
     "react-native-mmkv": "^3.2.0",
     "react-native-polyfill-globals": "^3.1.0",

examples/chat-rn/src/chat.tsx

@@ -1,6 +1,6 @@
 import Clipboard from "@react-native-clipboard/clipboard";
 import { useAccount, useCoState } from "jazz-react-native";
-import { CoPlainText, Group, ID, Loaded, Profile } from "jazz-tools";
+import { Group, ID, Profile } from "jazz-tools";
 import { useEffect, useState } from "react";
 import {
   Alert,
@@ -18,7 +18,7 @@ import { Chat, Message } from "./schema";
 
 export function ChatScreen({ navigation }: { navigation: any }) {
   const { me, logOut } = useAccount();
-  const [chatId, setChatId] = useState<string>();
+  const [chatId, setChatId] = useState<ID<Chat>>();
   const loadedChat = useCoState(Chat, chatId, { resolve: { $each: true } });
   const [message, setMessage] = useState("");
   const profile = useCoState(Profile, me._refs.profile?.id, {});
@@ -68,7 +68,7 @@ export function ChatScreen({ navigation }: { navigation: any }) {
           text: "Join",
           onPress: (chatId) => {
             if (chatId) {
-              setChatId(chatId);
+              setChatId(chatId as ID<Chat>);
             } else {
               Alert.alert("Error", "Chat ID cannot be empty.");
             }
@@ -83,18 +83,13 @@ export function ChatScreen({ navigation }: { navigation: any }) {
     if (!loadedChat) return;
     if (message.trim()) {
       loadedChat.push(
-        Message.create(
-          { text: CoPlainText.create(message, loadedChat?._owner) },
-          loadedChat?._owner,
-        ),
+        Message.create({ text: message }, { owner: loadedChat?._owner }),
       );
       setMessage("");
     }
   };
 
-  const renderMessageItem = ({
-    item,
-  }: { item: Loaded<typeof Message, { text: true }> }) => {
+  const renderMessageItem = ({ item }: { item: Message }) => {
     const isMe = item._edits?.text?.by?.isMe;
     return (
       <View

examples/chat-rn/src/schema.ts

@@ -1,7 +1,7 @@
-import { co } from "jazz-tools";
+import { CoList, CoMap, co } from "jazz-tools";
 
-export const Message = co.map({
-  text: co.plainText(),
-});
+export class Message extends CoMap {
+  text = co.string;
+}
 
-export const Chat = co.list(Message);
+export class Chat extends CoList.Of(co.ref(Message)) {}

examples/chat-vue/CHANGELOG.md

@@ -1,136 +1,5 @@
 # chat-vue
 
-## 0.0.108
-
-### Patch Changes
-
-- Updated dependencies [365b0ea]
-  - jazz-tools@0.14.7
-  - jazz-browser@0.14.7
-  - jazz-vue@0.14.7
-
-## 0.0.107
-
-### Patch Changes
-
-- Updated dependencies [9d6d9fe]
-- Updated dependencies [9d6d9fe]
-  - jazz-tools@0.14.6
-  - jazz-browser@0.14.6
-  - jazz-vue@0.14.6
-
-## 0.0.106
-
-### Patch Changes
-
-- Updated dependencies [91cbb2f]
-- Updated dependencies [20b3d88]
-  - jazz-tools@0.14.5
-  - jazz-browser@0.14.5
-  - jazz-vue@0.14.5
-
-## 0.0.105
-
-### Patch Changes
-
-- Updated dependencies [011af55]
-  - jazz-tools@0.14.4
-  - jazz-browser@0.14.4
-  - jazz-vue@0.14.4
-
-## 0.0.104
-
-### Patch Changes
-
-- Updated dependencies [3d1027f]
-- Updated dependencies [c240eed]
-  - jazz-tools@0.14.2
-  - jazz-browser@0.14.2
-  - jazz-vue@0.14.2
-
-## 0.0.103
-
-### Patch Changes
-
-- Updated dependencies [cdfc105]
-  - jazz-tools@0.14.1
-  - jazz-browser@0.14.1
-  - jazz-vue@0.14.1
-
-## 0.0.102
-
-### Patch Changes
-
-- Updated dependencies [5835ed1]
-  - jazz-tools@0.14.0
-  - jazz-browser@0.14.0
-  - jazz-vue@0.14.0
-
-## 0.0.101
-
-### Patch Changes
-
-- jazz-browser@0.13.32
-- jazz-vue@0.13.32
-
-## 0.0.100
-
-### Patch Changes
-
-- Updated dependencies [e5b170f]
-  - jazz-tools@0.13.31
-  - jazz-browser@0.13.31
-  - jazz-vue@0.13.31
-
-## 0.0.99
-
-### Patch Changes
-
-- jazz-browser@0.13.30
-- jazz-tools@0.13.30
-- jazz-vue@0.13.30
-
-## 0.0.98
-
-### Patch Changes
-
-- jazz-browser@0.13.29
-- jazz-tools@0.13.29
-- jazz-vue@0.13.29
-
-## 0.0.97
-
-### Patch Changes
-
-- jazz-browser@0.13.28
-- jazz-tools@0.13.28
-- jazz-vue@0.13.28
-
-## 0.0.96
-
-### Patch Changes
-
-- jazz-browser@0.13.27
-- jazz-tools@0.13.27
-- jazz-vue@0.13.27
-
-## 0.0.95
-
-### Patch Changes
-
-- Updated dependencies [ff846d9]
-  - jazz-tools@0.13.26
-  - jazz-browser@0.13.26
-  - jazz-vue@0.13.26
-
-## 0.0.94
-
-### Patch Changes
-
-- jazz-browser@0.13.25
-- jazz-tools@0.13.25
-- jazz-vue@0.13.25
-
 ## 0.0.93
 
 ### Patch Changes

examples/chat-vue/package.json

@@ -1,11 +1,11 @@
 {
   "name": "chat-vue",
-  "version": "0.0.108",
+  "version": "0.0.93",
   "private": true,
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build-type-check": "run-p type-check \"build {@}\" --",
+    "build-type-check": "run-p type-check \"build-only {@}\" --",
     "preview": "vite preview",
     "build": "vite build",
     "type-check": "vue-tsc --build --force",

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

@@ -1,9 +1,9 @@
 <template>
-  <BubbleContainer :fromMe="lastEdit.by?.isMe">
-    <BubbleBody>{{ msg.text }}</BubbleBody>
-    <BubbleInfo :by="lastEdit.by?.profile?.name" :madeAt="lastEdit.madeAt" />
-  </BubbleContainer>
-</template>
+    <BubbleContainer :fromMe="lastEdit.by?.isMe">
+      <BubbleBody>{{ msg.text }}</BubbleBody>
+      <BubbleInfo :by="lastEdit.by?.profile?.name" :madeAt="lastEdit.madeAt" />
+    </BubbleContainer>
+  </template>
   
   <script lang="ts">
 import { computed, defineComponent } from "vue";

examples/chat-vue/src/schema.ts

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

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

@@ -25,7 +25,7 @@
 </template>
 
 <script lang="ts">
-import { CoPlainText, type ID } from "jazz-tools";
+import type { ID } from "jazz-tools";
 import { useCoState } from "jazz-vue";
 import { type PropType, computed, defineComponent, ref } from "vue";
 import ChatBody from "../components/ChatBody.vue";
@@ -61,12 +61,7 @@ export default defineComponent({
     }
 
     function handleSubmit(text: string) {
-      chat?.value?.push(
-        Message.create(
-          { text: CoPlainText.create(text, chat.value._owner) },
-          chat.value._owner,
-        ),
-      );
+      chat?.value?.push(Message.create({ text }, { owner: chat.value._owner }));
     }
 
     return {

examples/chat/CHANGELOG.md

@@ -1,136 +1,5 @@
 # jazz-example-chat
 
-## 0.0.206
-
-### Patch Changes
-
-- Updated dependencies [365b0ea]
-  - jazz-tools@0.14.7
-  - jazz-inspector@0.14.7
-  - jazz-react@0.14.7
-
-## 0.0.205
-
-### Patch Changes
-
-- Updated dependencies [9d6d9fe]
-- Updated dependencies [9d6d9fe]
-  - jazz-tools@0.14.6
-  - jazz-inspector@0.14.6
-  - jazz-react@0.14.6
-
-## 0.0.204
-
-### Patch Changes
-
-- Updated dependencies [91cbb2f]
-- Updated dependencies [20b3d88]
-  - jazz-tools@0.14.5
-  - jazz-inspector@0.14.5
-  - jazz-react@0.14.5
-
-## 0.0.203
-
-### Patch Changes
-
-- Updated dependencies [011af55]
-  - jazz-tools@0.14.4
-  - jazz-inspector@0.14.4
-  - jazz-react@0.14.4
-
-## 0.0.202
-
-### Patch Changes
-
-- Updated dependencies [3d1027f]
-- Updated dependencies [c240eed]
-  - jazz-tools@0.14.2
-  - jazz-inspector@0.14.2
-  - jazz-react@0.14.2
-
-## 0.0.201
-
-### Patch Changes
-
-- Updated dependencies [cdfc105]
-  - jazz-tools@0.14.1
-  - jazz-inspector@0.14.1
-  - jazz-react@0.14.1
-
-## 0.0.200
-
-### Patch Changes
-
-- Updated dependencies [5835ed1]
-  - jazz-tools@0.14.0
-  - jazz-inspector@0.14.0
-  - jazz-react@0.14.0
-
-## 0.0.199
-
-### Patch Changes
-
-- jazz-react@0.13.32
-
-## 0.0.198
-
-### Patch Changes
-
-- Updated dependencies [e5b170f]
-  - jazz-tools@0.13.31
-  - jazz-inspector@0.13.31
-  - jazz-react@0.13.31
-
-## 0.0.197
-
-### Patch Changes
-
-- jazz-inspector@0.13.30
-- jazz-react@0.13.30
-- jazz-tools@0.13.30
-
-## 0.0.196
-
-### Patch Changes
-
-- Updated dependencies [8e5ff13]
-  - jazz-inspector@0.13.29
-  - jazz-react@0.13.29
-  - jazz-tools@0.13.29
-
-## 0.0.195
-
-### Patch Changes
-
-- jazz-inspector@0.13.28
-- jazz-react@0.13.28
-- jazz-tools@0.13.28
-
-## 0.0.194
-
-### Patch Changes
-
-- jazz-inspector@0.13.27
-- jazz-react@0.13.27
-- jazz-tools@0.13.27
-
-## 0.0.193
-
-### Patch Changes
-
-- Updated dependencies [ff846d9]
-  - jazz-tools@0.13.26
-  - jazz-inspector@0.13.26
-  - jazz-react@0.13.26
-
-## 0.0.192
-
-### Patch Changes
-
-- jazz-inspector@0.13.25
-- jazz-react@0.13.25
-- jazz-tools@0.13.25
-
 ## 0.0.191
 
 ### Patch Changes

examples/chat/package.json

@@ -1,38 +1,37 @@
 {
-  "name": "jazz-example-chat",
-  "private": true,
-  "version": "0.0.206",
-  "type": "module",
-  "scripts": {
-    "dev": "vite",
-    "build": "tsc && vite build",
-    "format-and-lint": "biome check .",
-    "format-and-lint:fix": "biome check . --write",
-    "preview": "vite preview",
-    "test:e2e": "playwright test",
-    "test:e2e:ui": "playwright test --ui"
-  },
-  "dependencies": {
-    "clsx": "^2.0.0",
-    "hash-slash": "workspace:*",
-    "jazz-inspector": "workspace:*",
-    "jazz-react": "workspace:*",
-    "jazz-tools": "workspace:*",
-    "lucide-react": "^0.274.0",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "zod": "4.0.0-beta.20250505T012514"
-  },
-  "devDependencies": {
-    "@playwright/test": "^1.50.1",
-    "@types/react": "^18.3.12",
-    "@types/react-dom": "^18.3.1",
-    "@vitejs/plugin-react-swc": "^3.3.2",
-    "autoprefixer": "^10.4.20",
-    "is-ci": "^3.0.1",
-    "postcss": "^8.4.27",
-    "tailwindcss": "^3.4.17",
-    "typescript": "5.6.2",
-    "vite": "6.0.11"
-  }
+	"name": "jazz-example-chat",
+	"private": true,
+	"version": "0.0.191",
+	"type": "module",
+	"scripts": {
+		"dev": "vite",
+		"build": "tsc && vite build",
+		"format-and-lint": "biome check .",
+		"format-and-lint:fix": "biome check . --write",
+		"preview": "vite preview",
+		"test:e2e": "playwright test",
+		"test:e2e:ui": "playwright test --ui"
+	},
+	"dependencies": {
+		"clsx": "^2.0.0",
+		"hash-slash": "workspace:*",
+		"jazz-inspector": "workspace:*",
+		"jazz-react": "workspace:*",
+		"jazz-tools": "workspace:*",
+		"lucide-react": "^0.485.0",
+		"react": "^18.3.1",
+		"react-dom": "^18.3.1"
+	},
+	"devDependencies": {
+		"@playwright/test": "^1.50.1",
+		"@types/react": "^18.3.12",
+		"@types/react-dom": "^18.3.1",
+		"@vitejs/plugin-react-swc": "^3.3.2",
+		"autoprefixer": "^10.4.20",
+		"is-ci": "^3.0.1",
+		"postcss": "^8.4.27",
+		"tailwindcss": "^3.4.17",
+		"typescript": "5.6.2",
+		"vite": "6.0.11"
+	}
 }

examples/chat/src/app.tsx

@@ -3,7 +3,7 @@ import { getRandomUsername, inIframe, onChatLoad } from "@/util.ts";
 import { useIframeHashRouter } from "hash-slash";
 import { JazzInspector } from "jazz-inspector";
 import { JazzProvider, useAccount } from "jazz-react";
-import { Group } from "jazz-tools";
+import { Group, ID } from "jazz-tools";
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import { ChatScreen } from "./chatScreen.tsx";
@@ -43,7 +43,7 @@ export function App() {
       </TopBar>
       {router.route({
         "/": () => createChat() as never,
-        "/chat/:id": (id) => <ChatScreen chatID={id} />,
+        "/chat/:id": (id) => <ChatScreen chatID={id as ID<Chat>} />,
       })}
     </AppContainer>
   );

examples/chat/src/chatScreen.tsx

@@ -1,5 +1,5 @@
 import { createImage, useAccount, useCoState } from "jazz-react";
-import { Account, co } from "jazz-tools";
+import { Account, ID } from "jazz-tools";
 import { useState } from "react";
 import { Chat, Message } from "./schema.ts";
 import {
@@ -15,10 +15,8 @@ import {
   TextInput,
 } from "./ui.tsx";
 
-export function ChatScreen(props: { chatID: string }) {
-  const chat = useCoState(Chat, props.chatID, {
-    resolve: { $each: { text: true } },
-  });
+export function ChatScreen(props: { chatID: ID<Chat> }) {
+  const chat = useCoState(Chat, props.chatID, { resolve: { $each: true } });
   const account = useAccount();
   const [showNLastMessages, setShowNLastMessages] = useState(30);
 
@@ -38,15 +36,7 @@ export function ChatScreen(props: { chatID: string }) {
     }
 
     createImage(file, { owner: chat._owner }).then((image) => {
-      chat.push(
-        Message.create(
-          {
-            text: co.plainText().create(file.name, chat._owner),
-            image: image,
-          },
-          chat._owner,
-        ),
-      );
+      chat.push(Message.create({ text: file.name, image: image }, chat._owner));
     });
   };
 
@@ -76,12 +66,7 @@ export function ChatScreen(props: { chatID: string }) {
 
         <TextInput
           onSubmit={(text) => {
-            chat.push(
-              Message.create(
-                { text: co.plainText().create(text, chat._owner) },
-                chat._owner,
-              ),
-            );
+            chat.push(Message.create({ text }, { owner: chat._owner }));
           }}
         />
       </InputBar>
@@ -89,11 +74,8 @@ export function ChatScreen(props: { chatID: string }) {
   );
 }
 
-function ChatBubble(props: {
-  me: Account;
-  msg: co.loaded<typeof Message, { text: true }>;
-}) {
-  if (!props.me.canRead(props.msg) || !props.msg.text?.toString()) {
+function ChatBubble(props: { me: Account; msg: Message }) {
+  if (!props.me.canRead(props.msg)) {
     return (
       <BubbleContainer fromMe={false}>
         <BubbleBody fromMe={false}>
@@ -107,7 +89,7 @@ function ChatBubble(props: {
   }
 
   const lastEdit = props.msg._edits.text;
-  const fromMe = lastEdit?.by?.isMe;
+  const fromMe = lastEdit.by?.isMe;
   const { text, image } = props.msg;
 
   return (
@@ -116,9 +98,7 @@ function ChatBubble(props: {
         {image && <BubbleImage image={image} />}
         <BubbleText text={text} />
       </BubbleBody>
-      {lastEdit && (
-        <BubbleInfo by={lastEdit.by?.profile?.name} madeAt={lastEdit.madeAt} />
-      )}
+      <BubbleInfo by={lastEdit.by?.profile?.name} madeAt={lastEdit.madeAt} />
     </BubbleContainer>
   );
 }

examples/chat/src/schema.ts

@@ -1,10 +1,8 @@
-import { co, z } from "jazz-tools";
+import { CoList, CoMap, ImageDefinition, co } from "jazz-tools";
 
-export const Message = co.map({
-  text: co.plainText(),
-  image: z.optional(co.image()),
-});
-export type Message = co.loaded<typeof Message>;
+export class Message extends CoMap {
+  text = co.string;
+  image = co.optional.ref(ImageDefinition);
+}
 
-export const Chat = co.list(Message);
-export type Chat = co.loaded<typeof Chat>;
+export class Chat extends CoList.Of(co.ref(Message)) {}

examples/chat/src/ui.tsx

@@ -1,6 +1,6 @@
 import clsx from "clsx";
 import { ProgressiveImg } from "jazz-react";
-import { CoPlainText, ImageDefinition } from "jazz-tools";
+import { ImageDefinition } from "jazz-tools";
 import { ImageIcon } from "lucide-react";
 import { useId, useRef } from "react";
 
@@ -70,10 +70,7 @@ export function BubbleBody(props: {
   );
 }
 
-export function BubbleText(props: {
-  text: CoPlainText | string;
-  className?: string;
-}) {
+export function BubbleText(props: { text: string; className?: string }) {
   return (
     <p className={clsx("px-2 leading-relaxed", props.className)}>
       {props.text}

examples/clerk/CHANGELOG.md

@@ -1,136 +1,5 @@
 # minimal-auth-clerk
 
-## 0.0.105
-
-### Patch Changes
-
-- Updated dependencies [365b0ea]
-  - jazz-tools@0.14.7
-  - jazz-react@0.14.7
-  - jazz-react-auth-clerk@0.14.7
-
-## 0.0.104
-
-### Patch Changes
-
-- Updated dependencies [9d6d9fe]
-- Updated dependencies [9d6d9fe]
-  - jazz-tools@0.14.6
-  - jazz-react@0.14.6
-  - jazz-react-auth-clerk@0.14.6
-
-## 0.0.103
-
-### Patch Changes
-
-- Updated dependencies [91cbb2f]
-- Updated dependencies [20b3d88]
-  - jazz-tools@0.14.5
-  - jazz-react@0.14.5
-  - jazz-react-auth-clerk@0.14.5
-
-## 0.0.102
-
-### Patch Changes
-
-- Updated dependencies [011af55]
-  - jazz-tools@0.14.4
-  - jazz-react@0.14.4
-  - jazz-react-auth-clerk@0.14.4
-
-## 0.0.101
-
-### Patch Changes
-
-- Updated dependencies [3d1027f]
-- Updated dependencies [c240eed]
-  - jazz-tools@0.14.2
-  - jazz-react@0.14.2
-  - jazz-react-auth-clerk@0.14.2
-
-## 0.0.100
-
-### Patch Changes
-
-- Updated dependencies [cdfc105]
-  - jazz-tools@0.14.1
-  - jazz-react@0.14.1
-  - jazz-react-auth-clerk@0.14.1
-
-## 0.0.99
-
-### Patch Changes
-
-- Updated dependencies [5835ed1]
-  - jazz-tools@0.14.0
-  - jazz-react@0.14.0
-  - jazz-react-auth-clerk@0.14.0
-
-## 0.0.98
-
-### Patch Changes
-
-- jazz-react@0.13.32
-- jazz-react-auth-clerk@0.13.32
-
-## 0.0.97
-
-### Patch Changes
-
-- Updated dependencies [e5b170f]
-  - jazz-tools@0.13.31
-  - jazz-react@0.13.31
-  - jazz-react-auth-clerk@0.13.31
-
-## 0.0.96
-
-### Patch Changes
-
-- jazz-react@0.13.30
-- jazz-react-auth-clerk@0.13.30
-- jazz-tools@0.13.30
-
-## 0.0.95
-
-### Patch Changes
-
-- jazz-react@0.13.29
-- jazz-react-auth-clerk@0.13.29
-- jazz-tools@0.13.29
-
-## 0.0.94
-
-### Patch Changes
-
-- jazz-react@0.13.28
-- jazz-react-auth-clerk@0.13.28
-- jazz-tools@0.13.28
-
-## 0.0.93
-
-### Patch Changes
-
-- jazz-react@0.13.27
-- jazz-react-auth-clerk@0.13.27
-- jazz-tools@0.13.27
-
-## 0.0.92
-
-### Patch Changes
-
-- Updated dependencies [ff846d9]
-  - jazz-tools@0.13.26
-  - jazz-react@0.13.26
-  - jazz-react-auth-clerk@0.13.26
-
-## 0.0.91
-
-### Patch Changes
-
-- jazz-react@0.13.25
-- jazz-react-auth-clerk@0.13.25
-- jazz-tools@0.13.25
-
 ## 0.0.90
 
 ### Patch Changes

examples/clerk/package.json

@@ -1,7 +1,7 @@
 {
   "name": "clerk",
   "private": true,
-  "version": "0.0.105",
+  "version": "0.0.90",
   "type": "module",
   "scripts": {
     "dev": "vite",

examples/file-share-svelte/CHANGELOG.md

@@ -1,142 +1,5 @@
 # file-share-svelte
 
-## 0.0.90
-
-### Patch Changes
-
-- Updated dependencies [365b0ea]
-  - jazz-tools@0.14.7
-  - jazz-inspector-element@0.14.7
-  - jazz-svelte@0.14.7
-
-## 0.0.89
-
-### Patch Changes
-
-- Updated dependencies [9d6d9fe]
-- Updated dependencies [9d6d9fe]
-  - jazz-tools@0.14.6
-  - jazz-inspector-element@0.14.6
-  - jazz-svelte@0.14.6
-
-## 0.0.88
-
-### Patch Changes
-
-- Updated dependencies [91cbb2f]
-- Updated dependencies [20b3d88]
-  - jazz-tools@0.14.5
-  - jazz-inspector-element@0.14.5
-  - jazz-svelte@0.14.5
-
-## 0.0.87
-
-### Patch Changes
-
-- Updated dependencies [011af55]
-  - jazz-tools@0.14.4
-  - jazz-inspector-element@0.14.4
-  - jazz-svelte@0.14.4
-
-## 0.0.86
-
-### Patch Changes
-
-- Updated dependencies [b2ee306]
-  - jazz-svelte@0.14.3
-
-## 0.0.85
-
-### Patch Changes
-
-- Updated dependencies [3d1027f]
-- Updated dependencies [c240eed]
-  - jazz-tools@0.14.2
-  - jazz-inspector-element@0.14.2
-  - jazz-svelte@0.14.2
-
-## 0.0.84
-
-### Patch Changes
-
-- Updated dependencies [cdfc105]
-  - jazz-tools@0.14.1
-  - jazz-svelte@0.14.1
-  - jazz-inspector-element@0.14.1
-
-## 0.0.83
-
-### Patch Changes
-
-- Updated dependencies [5835ed1]
-  - jazz-tools@0.14.0
-  - jazz-svelte@0.14.0
-  - jazz-inspector-element@0.14.0
-
-## 0.0.82
-
-### Patch Changes
-
-- jazz-svelte@0.13.32
-
-## 0.0.81
-
-### Patch Changes
-
-- Updated dependencies [e5b170f]
-  - jazz-tools@0.13.31
-  - jazz-inspector-element@0.13.31
-  - jazz-svelte@0.13.31
-
-## 0.0.80
-
-### Patch Changes
-
-- jazz-svelte@0.13.30
-- jazz-tools@0.13.30
-- jazz-inspector-element@0.13.30
-
-## 0.0.79
-
-### Patch Changes
-
-- jazz-svelte@0.13.29
-- jazz-tools@0.13.29
-- jazz-inspector-element@0.13.29
-
-## 0.0.78
-
-### Patch Changes
-
-- jazz-svelte@0.13.28
-- jazz-tools@0.13.28
-- jazz-inspector-element@0.13.28
-
-## 0.0.77
-
-### Patch Changes
-
-- jazz-svelte@0.13.27
-- jazz-tools@0.13.27
-- jazz-inspector-element@0.13.27
-
-## 0.0.76
-
-### Patch Changes
-
-- Updated dependencies [ff846d9]
-  - jazz-tools@0.13.26
-  - jazz-inspector-element@0.13.26
-  - jazz-svelte@0.13.26
-
-## 0.0.75
-
-### Patch Changes
-
-- jazz-svelte@0.13.25
-- jazz-tools@0.13.25
-- jazz-inspector-element@0.13.25
-
 ## 0.0.74
 
 ### Patch Changes

examples/file-share-svelte/package.json

@@ -1,11 +1,11 @@
 {
   "name": "file-share-svelte",
-  "version": "0.0.90",
+  "version": "0.0.74",
   "private": true,
   "type": "module",
   "scripts": {
     "dev": "vite dev",
-    "build": "pnpm run check && vite build",
+    "build": "vite build",
     "preview": "vite preview",
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",

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

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { slide } from 'svelte/transition';
-  import { type SharedFile } from '$lib/schema';
-  import { FileStream, type Loaded } from 'jazz-tools';
+  import { SharedFile } from '$lib/schema';
+  import { FileStream } from 'jazz-tools';
   import { File, FileDown, Trash2, Link2 } from 'lucide-svelte';
   import { toast } from 'svelte-sonner';
   import { downloadFileBlob, formatFileSize } from '$lib/utils';
@@ -11,9 +11,9 @@
     loading = false,
     onDelete
   }: {
-    file: Loaded<SharedFile>;
+    file: SharedFile;
     loading?: boolean;
-    onDelete: (file: Loaded<SharedFile>) => void;
+    onDelete: (file: SharedFile) => void;
   } = $props();
 
   const isAdmin = $derived(file._owner?.myRole() === 'admin');
@@ -55,7 +55,7 @@
   class="flex items-center justify-between rounded-lg border border-gray-200 bg-white p-4"
   transition:slide={{ duration: 200 }}
 >
-  <div class="flex flex-grow items-center space-x-4">
+  <div class="flex items-center space-x-4 flex-grow">
     <div class="flex h-10 w-10 items-center justify-center rounded-lg bg-blue-100 text-blue-600">
       <File class="h-6 w-6" />
     </div>
@@ -64,12 +64,7 @@
         <label class="sr-only" for={`file-name-${file.id}`}>File name</label>
         <!-- Jazz values are reactive, but they are not recognized as reactive by Svelte -->
         <!-- svelte-ignore binding_property_non_reactive -->
-        <input
-          class="w-full py-1 font-medium text-gray-900"
-          type="text"
-          bind:value={file.name}
-          id={`file-name-${file.id}`}
-        />
+        <input class="font-medium text-gray-900 w-full py-1" type="text" bind:value={file.name} id={`file-name-${file.id}`} />
       {:else}
         <h3 class="font-medium text-gray-900">{file.name}</h3>
       {/if}