docs: clarifications

feat(deepLoading): return undefined when an optional field is not accessible

.changeset/breezy-boxes-unite.md

@@ -0,0 +1,6 @@
+---
+"jazz-tools": minor
+"cojson": minor
+---
+
+Check CoValue access permissions when loading

.changeset/fast-beans-decide.md

@@ -0,0 +1,5 @@
+---
+"jazz-tools": minor
+---
+
+Implement new API for deep loading

.changeset/funny-birds-flash.md

@@ -0,0 +1,5 @@
+---
+"cojson": minor
+---
+
+Return the EVERYONE role if the account is not direct a member of the group

examples/chat-rn-clerk/CHANGELOG.md

@@ -1,15 +1,5 @@
 # chat-rn-clerk
 
-## 1.0.83
-
-### Patch Changes
-
-- Updated dependencies [6892dc6]
-  - jazz-tools@0.11.2
-  - jazz-react-native@0.11.2
-  - jazz-react-native-auth-clerk@0.11.2
-  - jazz-react-native-media-images@0.11.2
-
 ## 1.0.82
 
 ### Patch Changes

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

@@ -28,7 +28,7 @@ export default function Conversation() {
   const { me } = useAccount();
   const [chat, setChat] = useState<Chat>();
   const [message, setMessage] = useState("");
-  const loadedChat = useCoState(Chat, chat?.id, [{}]);
+  const loadedChat = useCoState(Chat, chat?.id, { resolve: { $each: true } });
   const navigation = useNavigation();
   const [isUploading, setIsUploading] = useState(false);
 
@@ -71,7 +71,7 @@ export default function Conversation() {
 
   const loadChat = async (chatId: ID<Chat>) => {
     try {
-      const chat = await Chat.load(chatId, me, []);
+      const chat = await Chat.load(chatId, me);
       setChat(chat);
     } catch (error) {
       console.log("Error loading chat", error);

examples/chat-rn-clerk/package.json

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

examples/chat-rn/CHANGELOG.md

@@ -1,13 +1,5 @@
 # chat-rn
 
-## 1.0.79
-
-### Patch Changes
-
-- Updated dependencies [6892dc6]
-  - jazz-tools@0.11.2
-  - jazz-react-native@0.11.2
-
 ## 1.0.78
 
 ### Patch Changes

examples/chat-rn/package.json

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

examples/chat-rn/src/chat.tsx

@@ -20,7 +20,7 @@ import { Chat, Message } from "./schema";
 export default function ChatScreen({ navigation }: { navigation: any }) {
   const { me, logOut } = useAccount();
   const [chatId, setChatId] = useState<ID<Chat>>();
-  const loadedChat = useCoState(Chat, chatId, [{}]);
+  const loadedChat = useCoState(Chat, chatId, { resolve: { $each: true } });
   const [message, setMessage] = useState("");
   const profile = useCoState(Profile, me._refs.profile?.id, {});
 

examples/chat-vue/CHANGELOG.md

@@ -1,14 +1,5 @@
 # chat-vue
 
-## 0.0.64
-
-### Patch Changes
-
-- Updated dependencies [6892dc6]
-  - jazz-tools@0.11.2
-  - jazz-browser@0.11.2
-  - jazz-vue@0.11.2
-
 ## 0.0.63
 
 ### Patch Changes

examples/chat-vue/package.json

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

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

@@ -49,7 +49,7 @@ export default defineComponent({
     },
   },
   setup(props) {
-    const chat = useCoState(Chat, props.chatId, [{}]);
+    const chat = useCoState(Chat, props.chatId, { resolve: { $each: true } });
     const showNLastMessages = ref(30);
 
     const displayedMessages = computed(() => {

examples/chat/CHANGELOG.md

@@ -1,14 +1,5 @@
 # jazz-example-chat
 
-## 0.0.161
-
-### Patch Changes
-
-- Updated dependencies [6892dc6]
-  - jazz-tools@0.11.2
-  - jazz-react@0.11.2
-  - jazz-browser-media-images@0.11.2
-
 ## 0.0.160
 
 ### Patch Changes

examples/chat/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jazz-example-chat",
   "private": true,
-  "version": "0.0.161",
+  "version": "0.0.160",
   "type": "module",
   "scripts": {
     "dev": "vite",

examples/chat/src/chatScreen.tsx

@@ -17,7 +17,7 @@ import {
 } from "./ui.tsx";
 
 export function ChatScreen(props: { chatID: ID<Chat> }) {
-  const chat = useCoState(Chat, props.chatID, [{}]);
+  const chat = useCoState(Chat, props.chatID, { resolve: { $each: true } });
   const [showNLastMessages, setShowNLastMessages] = useState(30);
 
   if (!chat)

examples/clerk/CHANGELOG.md

@@ -1,14 +1,5 @@
 # minimal-auth-clerk
 
-## 0.0.60
-
-### Patch Changes
-
-- Updated dependencies [6892dc6]
-  - jazz-tools@0.11.2
-  - jazz-react@0.11.2
-  - jazz-react-auth-clerk@0.11.2
-
 ## 0.0.59
 
 ### Patch Changes

examples/clerk/package.json

@@ -1,7 +1,7 @@
 {
   "name": "clerk",
   "private": true,
-  "version": "0.0.60",
+  "version": "0.0.59",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -13,7 +13,7 @@
   "dependencies": {
     "@clerk/clerk-react": "^5.4.1",
     "jazz-react": "workspace:*",
-    "jazz-react-auth-clerk": "workspace:0.11.2",
+    "jazz-react-auth-clerk": "workspace:0.11.1",
     "jazz-tools": "workspace:*",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"

examples/file-share-svelte/CHANGELOG.md

@@ -1,13 +1,5 @@
 # file-share-svelte
 
-## 0.0.44
-
-### Patch Changes
-
-- Updated dependencies [6892dc6]
-  - jazz-tools@0.11.2
-  - jazz-svelte@0.11.2
-
 ## 0.0.43
 
 ### Patch Changes

examples/file-share-svelte/package.json

@@ -1,6 +1,6 @@
 {
   "name": "file-share-svelte",
-  "version": "0.0.44",
+  "version": "0.0.43",
   "private": true,
   "type": "module",
   "scripts": {

examples/form/CHANGELOG.md

@@ -1,14 +1,5 @@
 # form
 
-## 0.1.2
-
-### Patch Changes
-
-- Updated dependencies [6892dc6]
-  - jazz-tools@0.11.2
-  - jazz-react@0.11.2
-  - jazz-browser-media-images@0.11.2
-
 ## 0.1.1
 
 ### Patch Changes

examples/form/package.json

@@ -1,7 +1,7 @@
 {
   "name": "form",
   "private": true,
-  "version": "0.1.2",
+  "version": "0.1.1",
   "type": "module",
   "scripts": {
     "dev": "vite",

examples/form/src/CreateOrder.tsx

@@ -12,7 +12,9 @@ import {
 } from "./schema.ts";
 
 export function CreateOrder() {
-  const { me } = useAccount({ root: { draft: {}, orders: [] } });
+  const { me } = useAccount({
+    resolve: { root: { draft: true, orders: true } },
+  });
   const router = useIframeHashRouter();
   const [errors, setErrors] = useState<string[]>([]);
 
@@ -60,7 +62,7 @@ function CreateOrderForm({
   onSave: (draft: DraftBubbleTeaOrder) => void;
 }) {
   const draft = useCoState(DraftBubbleTeaOrder, id, {
-    addOns: [],
+    resolve: { addOns: true },
   });
 
   if (!draft) return;

examples/form/src/DraftIndicator.tsx

@@ -2,7 +2,7 @@ import { useAccount } from "jazz-react";
 
 export function DraftIndicator() {
   const { me } = useAccount({
-    root: { draft: {} },
+    resolve: { root: { draft: true } },
   });
 
   if (me?.root.draft?.hasChanges) {

examples/form/src/EditOrder.tsx

@@ -6,7 +6,7 @@ import { OrderThumbnail } from "./OrderThumbnail.tsx";
 import { BubbleTeaOrder } from "./schema.ts";
 
 export function EditOrder(props: { id: ID<BubbleTeaOrder> }) {
-  const order = useCoState(BubbleTeaOrder, props.id, []);
+  const order = useCoState(BubbleTeaOrder, props.id);
 
   if (!order) return;
 

examples/form/src/Orders.tsx

@@ -4,7 +4,7 @@ import { OrderThumbnail } from "./OrderThumbnail.tsx";
 
 export function Orders() {
   const { me } = useAccount({
-    root: { orders: [] },
+    resolve: { root: { orders: true } },
   });
 
   return (

examples/image-upload/CHANGELOG.md

@@ -1,14 +1,5 @@
 # image-upload
 
-## 0.0.58
-
-### Patch Changes
-
-- Updated dependencies [6892dc6]
-  - jazz-tools@0.11.2
-  - jazz-react@0.11.2
-  - jazz-browser-media-images@0.11.2
-
 ## 0.0.57
 
 ### Patch Changes

examples/image-upload/package.json

@@ -1,7 +1,7 @@
 {
   "name": "image-upload",
   "private": true,
-  "version": "0.0.58",
+  "version": "0.0.57",
   "type": "module",
   "scripts": {
     "dev": "vite",

examples/multiauth/.env

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

examples/multiauth/.gitignore

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

examples/multiauth/CHANGELOG.md

@@ -1,10 +0,0 @@
-# multiauth
-
-## 0.0.1
-
-### Patch Changes
-
-- Updated dependencies [6892dc6]
-  - jazz-tools@0.11.2
-  - jazz-react@0.11.2
-  - jazz-react-auth-clerk@0.11.2

examples/multiauth/README.md

@@ -1,43 +0,0 @@
-# Multi-auth example with Jazz and React
-
-This example demonstrates using Jazz with multiple authentication methods; in this case, Clerk and passphrases are able to be used.
-
-## Getting started
-
-To run this example, you may either:
-* Clone the Jazz monorepo and run this example from within.
-* Create a new Jazz project using this example as a template, and run that new project.
-
-
-### Using this example as a template
-
-1. Create a new Jazz project, and use this example as a template.
-```bash
-npx create-jazz-app@latest --example counter --project-name counter
-```
-2. Navigate to the new project and start the development server.
-```bash
-cd counter
-npm run dev
-```
-
-### Using the monorepo
-
-This requires `pnpm` to be installed; see [https://pnpm.io/installation](https://pnpm.io/installation).
-
-1. Clone the `jazz` repository.
-```bash
-git clone https://github.com/garden-co/jazz.git
-```
-2. Install dependencies.
-```bash
-cd jazz
-pnpm install
-```
-3. Navigate to the example and start the development server.
-```bash
-cd examples/counter
-pnpm dev
-```
-
-The example should be running at [http://localhost:5173](http://localhost:5173) by default.

examples/multiauth/eslint.config.js

@@ -1,28 +0,0 @@
-import js from "@eslint/js";
-import reactHooks from "eslint-plugin-react-hooks";
-import reactRefresh from "eslint-plugin-react-refresh";
-import globals from "globals";
-import tseslint from "typescript-eslint";
-
-export default tseslint.config(
-  { ignores: ["dist"] },
-  {
-    extends: [js.configs.recommended, ...tseslint.configs.recommended],
-    files: ["**/*.{ts,tsx}"],
-    languageOptions: {
-      ecmaVersion: 2020,
-      globals: globals.browser,
-    },
-    plugins: {
-      "react-hooks": reactHooks,
-      "react-refresh": reactRefresh,
-    },
-    rules: {
-      ...reactHooks.configs.recommended.rules,
-      "react-refresh/only-export-components": [
-        "warn",
-        { allowConstantExport: true },
-      ],
-    },
-  },
-);

examples/multiauth/index.html

@@ -1,12 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Jazz Multi-auth (React)</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
-</html>

examples/multiauth/package.json

@@ -1,30 +0,0 @@
-{
-  "name": "multiauth",
-  "private": true,
-  "version": "0.0.1",
-  "type": "module",
-  "scripts": {
-    "dev": "vite",
-    "build": "tsc -b && vite build",
-    "preview": "vite preview",
-    "format-and-lint": "biome check .",
-    "format-and-lint:fix": "biome check . --write"
-  },
-  "dependencies": {
-    "@clerk/clerk-react": "^5.4.1",
-    "jazz-react": "workspace:*",
-    "jazz-react-auth-clerk": "workspace:*",
-    "jazz-tools": "workspace:*",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
-  },
-  "devDependencies": {
-    "@biomejs/biome": "1.9.4",
-    "@types/react": "^18.3.12",
-    "@types/react-dom": "^18.3.1",
-    "@vitejs/plugin-react": "^4.3.3",
-    "globals": "^15.11.0",
-    "typescript": "~5.6.2",
-    "vite": "^6.0.11"
-  }
-}

examples/multiauth/src/App.css

@@ -1,12 +0,0 @@
-#root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-.card {
-  padding: 2em;
-  display: flex;
-  flex-direction: column;
-}

examples/multiauth/src/App.tsx

@@ -1,12 +0,0 @@
-import { Home } from "./components/Home.tsx";
-import "./App.css";
-
-export default function App() {
-  return (
-    <div className="card">
-      <h1>Jazz Multi-auth (React)</h1>
-
-      <Home />
-    </div>
-  );
-}

examples/multiauth/src/apiKey.ts

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

examples/multiauth/src/components/Home.tsx

@@ -1,26 +0,0 @@
-import { useAccount, useIsAuthenticated } from "jazz-react";
-
-export function Home() {
-  const { me, logOut } = useAccount({ root: {} });
-  const isAuthenticated = useIsAuthenticated();
-
-  if (!me) return;
-  if (!isAuthenticated) return;
-
-  return (
-    <div
-      style={{
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "center",
-        gap: "1rem",
-      }}
-    >
-      <div className="container">
-        <h1>You're logged in</h1>
-        <p>Welcome back, {me?.profile?.name}</p>
-        <button onClick={() => logOut()}>Logout</button>
-      </div>
-    </div>
-  );
-}

examples/multiauth/src/components/OmniAuth.tsx

@@ -1,184 +0,0 @@
-import { SignInButton } from "@clerk/clerk-react";
-import { usePassphraseAuth } from "jazz-react";
-import { JazzProviderProps, useIsAuthenticated } from "jazz-react";
-import { useState } from "react";
-import "../index.css";
-import { useClerk } from "@clerk/clerk-react";
-import { JazzProviderWithClerk } from "jazz-react-auth-clerk";
-import { wordlist } from "../wordlist.ts";
-
-export function OmniAuthContainer(props: {
-  appName: string;
-  wordlist: string[];
-  children?: React.ReactNode;
-}) {
-  const isAuthenticated = useIsAuthenticated();
-
-  const passphraseAuth = usePassphraseAuth({
-    wordlist: props.wordlist,
-  });
-
-  const [step, setStep] = useState<
-    "initial" | "create" | "loginWithPassphrase" | "loginWithClerk"
-  >("initial");
-  const [loginPassphrase, setLoginPassphrase] = useState("");
-  const [isCopied, setIsCopied] = useState(false);
-  const [currentPassphrase, setCurrentPassphrase] = useState(() =>
-    passphraseAuth.generateRandomPassphrase(),
-  );
-
-  if (passphraseAuth.state === "signedIn" || isAuthenticated) {
-    return props.children ?? null;
-  }
-
-  const handleCreateAccount = async () => {
-    setStep("create");
-  };
-
-  const handleLoginWithPassphrase = () => {
-    setStep("loginWithPassphrase");
-  };
-
-  const handleLoginWithClerk = () => {
-    setStep("loginWithClerk");
-  };
-
-  const handleReroll = () => {
-    const newPassphrase = passphraseAuth.generateRandomPassphrase();
-    setCurrentPassphrase(newPassphrase);
-    setIsCopied(false);
-  };
-
-  const handleBack = () => {
-    setStep("initial");
-    setLoginPassphrase("");
-  };
-
-  const handleCopy = async () => {
-    await navigator.clipboard.writeText(passphraseAuth.passphrase);
-    setIsCopied(true);
-  };
-
-  const handleLoginSubmit = async () => {
-    await passphraseAuth.logIn(loginPassphrase);
-    setStep("initial");
-    setLoginPassphrase("");
-  };
-
-  const handleNext = async () => {
-    await passphraseAuth.registerNewAccount(currentPassphrase, "My Account");
-    setStep("initial");
-    setLoginPassphrase("");
-  };
-
-  return (
-    <div className="auth-container">
-      <div className="auth-card">
-        {step === "initial" && (
-          <div>
-            <h1 className="auth-heading">{props.appName}</h1>
-            <button
-              onClick={handleCreateAccount}
-              className="auth-button-primary"
-            >
-              Signup with passphrase
-            </button>
-            <button
-              onClick={handleLoginWithPassphrase}
-              className="auth-button-secondary"
-            >
-              Login with passphrase
-            </button>
-            <button
-              onClick={handleLoginWithClerk}
-              className="auth-button-secondary"
-            >
-              Login with Clerk
-            </button>
-          </div>
-        )}
-
-        {step === "create" && (
-          <>
-            <h1 className="auth-heading">Your Passphrase</h1>
-            <p className="auth-description">
-              Please copy and store this passphrase somewhere safe. You'll need
-              it to log in.
-            </p>
-            <textarea
-              readOnly
-              value={currentPassphrase}
-              className="auth-textarea"
-              rows={5}
-            />
-            <button onClick={handleCopy} className="auth-button-primary">
-              {isCopied ? "Copied!" : "Copy"}
-            </button>
-            <div className="auth-button-group">
-              <button onClick={handleBack} className="auth-button-secondary">
-                Back
-              </button>
-              <button onClick={handleReroll} className="auth-button-secondary">
-                Generate New Passphrase
-              </button>
-              <button onClick={handleNext} className="auth-button-primary">
-                Register
-              </button>
-            </div>
-          </>
-        )}
-
-        {step === "loginWithPassphrase" && (
-          <div>
-            <h1 className="auth-heading">Log In</h1>
-            <textarea
-              value={loginPassphrase}
-              onChange={(e) => setLoginPassphrase(e.target.value)}
-              placeholder="Enter your passphrase"
-              className="auth-textarea"
-              rows={5}
-            />
-            <div className="auth-button-group">
-              <button onClick={handleBack} className="auth-button-secondary">
-                Back
-              </button>
-              <button
-                onClick={handleLoginSubmit}
-                className="auth-button-primary"
-              >
-                Log In
-              </button>
-            </div>
-          </div>
-        )}
-
-        {step === "loginWithClerk" && <SignInButton />}
-      </div>
-    </div>
-  );
-}
-
-export function OmniAuth({
-  children,
-  AccountSchema,
-  sync,
-}: {
-  children: React.ReactNode;
-} & JazzProviderProps) {
-  const clerk = useClerk();
-
-  return (
-    <JazzProviderWithClerk
-      clerk={clerk}
-      sync={sync}
-      AccountSchema={AccountSchema}
-    >
-      <OmniAuthContainer
-        appName="Jazz Multi-Authentication Example"
-        wordlist={wordlist}
-      >
-        {children}
-      </OmniAuthContainer>
-    </JazzProviderWithClerk>
-  );
-}

examples/multiauth/src/index.css

@@ -1,151 +0,0 @@
-:root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
-body {
-  margin: auto 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
-h1 {
-  font-size: 2.2em;
-  line-height: 1.1;
-  font-weight: 500;
-  letter-spacing: 0.6px;
-}
-
-button {
-  border-radius: 6px;
-  border: 1px solid white;
-  color: inherit;
-  padding: 0.5rem 1rem;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: transparent;
-  cursor: pointer;
-  transition: all 0.05s ease, border-color 0.1s ease;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
-}
-button:hover {
-  background-color: #313131;
-}
-
-button:active {
-  border-color: #3313f7;
-  transform: translateY(2px);
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: rgb(21, 20, 20);
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    border-color: #e5e4e2;
-  }
-  button:hover {
-    border-color: rgb(47, 46, 46);
-    background-color: white;
-  }
-
-  button:active {
-    border-color: #3313f7;
-  }
-}
-
-.auth-container {
-  min-height: 100vh;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: #f3f4f6;
-}
-
-.auth-card {
-  background-color: white;
-  padding: 2rem;
-  border-radius: 0.5rem;
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px
-    rgba(0, 0, 0, 0.06);
-  width: 28rem;
-}
-
-.auth-button-primary,
-.auth-button-secondary {
-  width: 100%;
-  padding: 0.5rem 1rem;
-  border-radius: 0.25rem;
-  font-weight: bold;
-  cursor: pointer;
-  margin-bottom: 1rem;
-}
-
-.auth-button-primary {
-  background-color: black;
-  color: white;
-  border: none;
-}
-
-.auth-button-secondary {
-  background-color: white;
-  color: black;
-  border: 1px solid black;
-}
-
-.auth-heading {
-  color: black;
-  font-size: 1.5rem;
-  font-weight: bold;
-  text-align: center;
-  margin-bottom: 1rem;
-}
-
-.auth-textarea {
-  width: 100%;
-  padding: 0.5rem;
-  border: 1px solid #d1d5db;
-  border-radius: 0.25rem;
-  margin-bottom: 1rem;
-  box-sizing: border-box;
-}
-
-.auth-description {
-  font-size: 0.875rem;
-  color: #4b5563;
-  text-align: center;
-  margin-bottom: 1rem;
-}
-
-.auth-button-group {
-  display: flex;
-  justify-content: space-between;
-  gap: 1rem;
-}

examples/multiauth/src/main.tsx

@@ -1,29 +0,0 @@
-import { ClerkProvider } from "@clerk/clerk-react";
-import { StrictMode } from "react";
-import { createRoot } from "react-dom/client";
-import App from "./App";
-import "./index.css";
-import { apiKey } from "./apiKey.ts";
-import { OmniAuth } from "./components/OmniAuth.tsx";
-
-// Import your publishable key
-const PUBLISHABLE_KEY = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY;
-
-if (!PUBLISHABLE_KEY) {
-  throw new Error("Add your Clerk publishable key to the .env.local file");
-}
-
-createRoot(document.getElementById("root")!).render(
-  <StrictMode>
-    <ClerkProvider publishableKey={PUBLISHABLE_KEY} afterSignOutUrl="/">
-      <OmniAuth
-        sync={{
-          peer: `wss://cloud.jazz.tools/?key=${apiKey}`,
-          when: "signedUp", // This makes the app work in local mode when the user is not authenticated
-        }}
-      >
-        <App />
-      </OmniAuth>
-    </ClerkProvider>
-  </StrictMode>,
-);

examples/multiauth/src/vite-env.d.ts

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

examples/multiauth/tsconfig.app.json

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

examples/multiauth/tsconfig.json

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

examples/multiauth/tsconfig.node.json

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

examples/multiauth/vite.config.ts

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

examples/music-player/CHANGELOG.md

@@ -1,14 +1,5 @@
 # jazz-example-musicplayer
 
-## 0.0.82
-
-### Patch Changes
-
-- Updated dependencies [6892dc6]
-  - jazz-tools@0.11.2
-  - jazz-inspector@0.11.2
-  - jazz-react@0.11.2
-
 ## 0.0.81
 
 ### Patch Changes

examples/music-player/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jazz-example-music-player",
   "private": true,
-  "version": "0.0.82",
+  "version": "0.0.81",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -22,8 +22,8 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
     "jazz-inspector": "workspace:*",
-    "jazz-react": "workspace:0.11.2",
-    "jazz-tools": "workspace:0.11.2",
+    "jazz-react": "workspace:0.11.1",
+    "jazz-tools": "workspace:0.11.0",
     "lucide-react": "^0.274.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

examples/music-player/src/3_HomePage.tsx

@@ -24,10 +24,7 @@ export function HomePage({ mediaPlayer }: { mediaPlayer: MediaPlayer }) {
    *  access rights to CoValues. We get it from the top-level provider `<WithJazz/>`.
    */
   const { me } = useAccount({
-    root: {
-      rootPlaylist: {},
-      playlists: [],
-    },
+    resolve: { root: { rootPlaylist: true, playlists: true } },
   });
 
   const navigate = useNavigate();
@@ -51,8 +48,9 @@ export function HomePage({ mediaPlayer }: { mediaPlayer: MediaPlayer }) {
 
   const params = useParams<{ playlistId: ID<Playlist> }>();
   const playlistId = params.playlistId ?? me?.root._refs.rootPlaylist.id;
+
   const playlist = useCoState(Playlist, playlistId, {
-    tracks: [],
+    resolve: { tracks: true },
   });
 
   const isRootPlaylist = !params.playlistId;

examples/music-player/src/4_actions.ts

@@ -27,9 +27,11 @@ export async function uploadMusicTracks(
   isExampleTrack: boolean = false,
 ) {
   const { root } = await MusicaAccount.getMe().ensureLoaded({
-    root: {
-      rootPlaylist: {
-        tracks: [],
+    resolve: {
+      root: {
+        rootPlaylist: {
+          tracks: true,
+        },
       },
     },
   });
@@ -65,8 +67,10 @@ export async function uploadMusicTracks(
 
 export async function createNewPlaylist() {
   const { root } = await MusicaAccount.getMe().ensureLoaded({
-    root: {
-      playlists: [],
+    resolve: {
+      root: {
+        playlists: true,
+      },
     },
   });
 
@@ -149,9 +153,11 @@ export async function updateMusicTrackTitle(track: MusicTrack, title: string) {
 
 export async function updateActivePlaylist(playlist?: Playlist) {
   const { root } = await MusicaAccount.getMe().ensureLoaded({
-    root: {
-      activePlaylist: {},
-      rootPlaylist: {},
+    resolve: {
+      root: {
+        activePlaylist: true,
+        rootPlaylist: true,
+      },
     },
   });
 
@@ -160,7 +166,9 @@ export async function updateActivePlaylist(playlist?: Playlist) {
 
 export async function updateActiveTrack(track: MusicTrack) {
   const { root } = await MusicaAccount.getMe().ensureLoaded({
-    root: {},
+    resolve: {
+      root: {},
+    },
   });
 
   root.activeTrack = track;
@@ -170,17 +178,23 @@ export async function onAnonymousAccountDiscarded(
   anonymousAccount: MusicaAccount,
 ) {
   const { root: anonymousAccountRoot } = await anonymousAccount.ensureLoaded({
-    root: {
-      rootPlaylist: {
-        tracks: [{}],
+    resolve: {
+      root: {
+        rootPlaylist: {
+          tracks: {
+            $each: true,
+          },
+        },
       },
     },
   });
 
   const me = await MusicaAccount.getMe().ensureLoaded({
-    root: {
-      rootPlaylist: {
-        tracks: [],
+    resolve: {
+      root: {
+        rootPlaylist: {
+          tracks: true,
+        },
       },
     },
   });

examples/music-player/src/5_useMediaPlayer.ts

@@ -9,7 +9,7 @@ import { getNextTrack, getPrevTrack } from "./lib/getters";
 
 export function useMediaPlayer() {
   const { me } = useAccount({
-    root: {},
+    resolve: { root: true },
   });
 
   const playState = usePlayState();

examples/music-player/src/6_InvitePage.tsx

@@ -16,8 +16,10 @@ export function InvitePage() {
         const playlist = await Playlist.load(playlistId, {});
 
         const me = await MusicaAccount.getMe().ensureLoaded({
-          root: {
-            playlists: [],
+          resolve: {
+            root: {
+              playlists: true,
+            },
           },
         });
 

examples/music-player/src/components/AuthModal.tsx

@@ -22,9 +22,13 @@ export function AuthModal({ open, onOpenChange }: AuthModalProps) {
   const [error, setError] = useState<string | null>(null);
 
   const { me } = useAccount({
-    root: {
-      rootPlaylist: {
-        tracks: [{}],
+    resolve: {
+      root: {
+        rootPlaylist: {
+          tracks: {
+            $each: true,
+          },
+        },
       },
     },
   });

examples/music-player/src/components/MusicTrackRow.tsx

@@ -30,9 +30,7 @@ export function MusicTrackRow({
   const track = useCoState(MusicTrack, trackId);
 
   const { me } = useAccount({
-    root: {
-      playlists: [{}],
-    },
+    resolve: { root: { playlists: { $each: true } } },
   });
 
   const playlists = me?.root.playlists ?? [];

examples/music-player/src/components/PlayerControls.tsx

@@ -12,9 +12,7 @@ export function PlayerControls({ mediaPlayer }: { mediaPlayer: MediaPlayer }) {
   const isPlaying = playState.value === "play";
 
   const activePlaylist = useAccount({
-    root: {
-      activePlaylist: {},
-    },
+    resolve: { root: { activePlaylist: true } },
   }).me?.root.activePlaylist;
 
   useMediaEndListener(mediaPlayer.playNextTrack);
@@ -25,7 +23,7 @@ export function PlayerControls({ mediaPlayer }: { mediaPlayer: MediaPlayer }) {
   });
 
   const activeTrack = useCoState(MusicTrack, mediaPlayer.activeTrackId, {
-    waveform: {},
+    resolve: { waveform: true },
   });
 
   if (!activeTrack) return null;

examples/music-player/src/components/SidePanel.tsx

@@ -6,9 +6,7 @@ export function SidePanel() {
   const { playlistId } = useParams();
   const navigate = useNavigate();
   const { me } = useAccount({
-    root: {
-      playlists: [{}],
-    },
+    resolve: { root: { playlists: { $each: true } } },
   });
 
   function handleAllTracksClick(evt: React.MouseEvent<HTMLAnchorElement>) {

examples/music-player/src/components/Waveform.tsx

@@ -8,7 +8,6 @@ export function Waveform(props: { track: MusicTrack; height: number }) {
   const waveformData = useCoState(
     MusicTrackWaveform,
     track._refs.waveform.id,
-    {},
   )?.data;
   const duration = track.duration;
 

examples/music-player/src/lib/getters.ts

@@ -2,9 +2,11 @@ import { MusicaAccount } from "../1_schema";
 
 export async function getNextTrack() {
   const me = await MusicaAccount.getMe().ensureLoaded({
-    root: {
-      activePlaylist: {
-        tracks: [],
+    resolve: {
+      root: {
+        activePlaylist: {
+          tracks: true,
+        },
       },
     },
   });
@@ -21,9 +23,11 @@ export async function getNextTrack() {
 
 export async function getPrevTrack() {
   const me = await MusicaAccount.getMe().ensureLoaded({
-    root: {
-      activePlaylist: {
-        tracks: [],
+    resolve: {
+      root: {
+        activePlaylist: {
+          tracks: true,
+        },
       },
     },
   });

examples/music-player/src/lib/useUploadExampleData.ts

@@ -13,7 +13,7 @@ export function useUploadExampleData() {
 
 async function uploadOnboardingData() {
   const me = await MusicaAccount.getMe().ensureLoaded({
-    root: {},
+    resolve: { root: true },
   });
 
   if (me.root.exampleDataLoaded) return;

examples/organization/CHANGELOG.md

@@ -1,13 +1,5 @@
 # organization
 
-## 0.0.54
-
-### Patch Changes
-
-- Updated dependencies [6892dc6]
-  - jazz-tools@0.11.2
-  - jazz-react@0.11.2
-
 ## 0.0.53
 
 ### Patch Changes

examples/organization/package.json

@@ -1,7 +1,7 @@
 {
   "name": "organization",
   "private": true,
-  "version": "0.0.54",
+  "version": "0.0.53",
   "type": "module",
   "scripts": {
     "dev": "vite",

examples/organization/src/AcceptInvitePage.tsx

@@ -5,11 +5,11 @@ import { Organization } from "./schema.ts";
 
 export function AcceptInvitePage() {
   const navigate = useNavigate();
-  const { me } = useAccount({ root: { organizations: [] } });
+  const { me } = useAccount({ resolve: { root: { organizations: true } } });
 
   const onAccept = (organizationId: ID<Organization>) => {
     if (me?.root?.organizations) {
-      Organization.load(organizationId, me, []).then((organization) => {
+      Organization.load(organizationId).then((organization) => {
         if (organization) {
           // avoid duplicates
           const ids = me.root.organizations.map(

examples/organization/src/HomePage.tsx

@@ -5,7 +5,7 @@ import { Heading } from "./components/Heading.tsx";
 
 export function HomePage() {
   const { me } = useAccount({
-    root: { organizations: [{}] },
+    resolve: { root: { organizations: true } },
   });
 
   if (!me?.root.organizations) return;

examples/organization/src/Layout.tsx

@@ -3,7 +3,7 @@ import { UserIcon } from "lucide-react";
 
 export function Layout({ children }: { children: React.ReactNode }) {
   const { me, logOut } = useAccount({
-    root: { draftOrganization: {} },
+    resolve: { root: { draftOrganization: true } },
   });
 
   return (

examples/organization/src/OrganizationPage.tsx

@@ -13,7 +13,7 @@ export function OrganizationPage() {
     .organizationId;
 
   const organization = useCoState(Organization, paramOrganizationId, {
-    projects: [],
+    resolve: { projects: true },
   });
 
   if (!organization) return <p>Loading organization...</p>;

examples/organization/src/components/CreateOrganization.tsx

@@ -8,7 +8,7 @@ import { OrganizationForm } from "./OrganizationForm.tsx";
 
 export function CreateOrganization() {
   const { me } = useAccount({
-    root: { draftOrganization: {}, organizations: [] },
+    resolve: { root: { draftOrganization: true, organizations: true } },
   });
   const [errors, setErrors] = useState<string[]>([]);
   const navigate = useNavigate();

examples/organization/src/components/OrganizationSelector.tsx

@@ -7,7 +7,7 @@ import { Organization } from "../schema.ts";
 
 export function OrganizationSelector({ className }: { className?: string }) {
   const { me } = useAccount({
-    root: { organizations: [{}] },
+    resolve: { root: { organizations: { $each: true } } },
   });
 
   const navigate = useNavigate();

examples/passkey-svelte/CHANGELOG.md

@@ -1,11 +1,5 @@
 # passkey-svelte
 
-## 0.0.48
-
-### Patch Changes
-
-- jazz-svelte@0.11.2
-
 ## 0.0.47
 
 ### Patch Changes

examples/passkey-svelte/package.json

@@ -1,6 +1,6 @@
 {
   "name": "passkey-svelte",
-  "version": "0.0.48",
+  "version": "0.0.47",
   "type": "module",
   "private": true,
   "scripts": {

examples/passkey/CHANGELOG.md

@@ -1,13 +1,5 @@
 # minimal-auth-passkey
 
-## 0.0.59
-
-### Patch Changes
-
-- Updated dependencies [6892dc6]
-  - jazz-tools@0.11.2
-  - jazz-react@0.11.2
-
 ## 0.0.58
 
 ### Patch Changes

examples/passkey/package.json

@@ -1,7 +1,7 @@
 {
   "name": "passkey",
   "private": true,
-  "version": "0.0.59",
+  "version": "0.0.58",
   "type": "module",
   "scripts": {
     "dev": "vite",

examples/passphrase/CHANGELOG.md

@@ -1,13 +1,5 @@
 # passphrase
 
-## 0.0.56
-
-### Patch Changes
-
-- Updated dependencies [6892dc6]
-  - jazz-tools@0.11.2
-  - jazz-react@0.11.2
-
 ## 0.0.55
 
 ### Patch Changes

examples/passphrase/package.json

@@ -1,7 +1,7 @@
 {
   "name": "passphrase",
   "private": true,
-  "version": "0.0.56",
+  "version": "0.0.55",
   "type": "module",
   "scripts": {
     "dev": "vite",

examples/password-manager/CHANGELOG.md

@@ -1,13 +1,5 @@
 # jazz-password-manager
 
-## 0.0.80
-
-### Patch Changes
-
-- Updated dependencies [6892dc6]
-  - jazz-tools@0.11.2
-  - jazz-react@0.11.2
-
 ## 0.0.79
 
 ### Patch Changes

examples/password-manager/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jazz-password-manager",
   "private": true,
-  "version": "0.0.80",
+  "version": "0.0.79",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -12,8 +12,8 @@
     "clean-install": "rm -rf node_modules pnpm-lock.yaml && pnpm install"
   },
   "dependencies": {
-    "jazz-react": "workspace:0.11.2",
-    "jazz-tools": "workspace:0.11.2",
+    "jazz-react": "workspace:0.11.1",
+    "jazz-tools": "workspace:0.11.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.41.5",

examples/password-manager/src/3_vault.tsx

@@ -43,9 +43,11 @@ const VaultPage: React.FC = () => {
         (item): item is Exclude<typeof item, null> => !!item,
       ) || [],
   );
-  const folders = useCoState(FolderList, me.root?._refs.folders?.id, [
-    { items: [{}] },
-  ]);
+  const folders = useCoState(FolderList, me.root?._refs.folders?.id, {
+    resolve: {
+      $each: { items: { $each: true } },
+    },
+  });
 
   const [selectedFolder, setSelectedFolder] = useState<Folder | undefined>();
   const [isNewItemModalOpen, setIsNewItemModalOpen] = useState(false);

examples/password-manager/src/4_actions.ts

@@ -60,11 +60,9 @@ export async function addSharedFolder(
   me: PasswordManagerAccount,
 ) {
   const [sharedFolder, account] = await Promise.all([
-    Folder.load(sharedFolderId, me, {}),
-    PasswordManagerAccount.load(me.id, me, {
-      root: {
-        folders: [],
-      },
+    Folder.load(sharedFolderId),
+    PasswordManagerAccount.load(me.id, {
+      resolve: { root: { folders: true } },
     }),
   ]);
 

examples/pets/CHANGELOG.md

@@ -1,14 +1,5 @@
 # jazz-example-pets
 
-## 0.0.178
-
-### Patch Changes
-
-- Updated dependencies [6892dc6]
-  - jazz-tools@0.11.2
-  - jazz-react@0.11.2
-  - jazz-browser-media-images@0.11.2
-
 ## 0.0.177
 
 ### Patch Changes

examples/pets/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jazz-example-pets",
   "private": true,
-  "version": "0.0.178",
+  "version": "0.0.177",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -19,9 +19,9 @@
     "@radix-ui/react-toast": "^1.1.4",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
-    "jazz-browser-media-images": "workspace:0.11.2",
-    "jazz-react": "workspace:0.11.2",
-    "jazz-tools": "workspace:0.11.2",
+    "jazz-browser-media-images": "workspace:0.11.0",
+    "jazz-react": "workspace:0.11.1",
+    "jazz-tools": "workspace:0.11.0",
     "lucide-react": "^0.274.0",
     "qrcode": "^1.5.3",
     "react": "^18.3.1",
@@ -41,7 +41,7 @@
     "@vitejs/plugin-react-swc": "^3.3.2",
     "autoprefixer": "^10.4.20",
     "is-ci": "^3.0.1",
-    "jazz-run": "workspace:0.11.2",
+    "jazz-run": "workspace:0.11.0",
     "postcss": "^8.4.27",
     "tailwindcss": "^3.4.17",
     "typescript": "~5.6.2",

examples/reactions/CHANGELOG.md

@@ -1,14 +1,5 @@
 # reactions
 
-## 0.0.58
-
-### Patch Changes
-
-- Updated dependencies [6892dc6]
-  - jazz-tools@0.11.2
-  - jazz-react@0.11.2
-  - jazz-browser-media-images@0.11.2
-
 ## 0.0.57
 
 ### Patch Changes

examples/reactions/package.json

@@ -1,7 +1,7 @@
 {
   "name": "reactions",
   "private": true,
-  "version": "0.0.58",
+  "version": "0.0.57",
   "type": "module",
   "scripts": {
     "dev": "vite",

examples/reactions/src/ReactionsScreen.tsx

@@ -14,7 +14,7 @@ const reactionEmojiMap: {
 };
 
 export function ReactionsScreen(props: { id: ID<Reactions> }) {
-  const reactions = useCoState(Reactions, props.id, []);
+  const reactions = useCoState(Reactions, props.id);
 
   if (!reactions) return;
 

examples/todo-vue/CHANGELOG.md

@@ -1,14 +1,5 @@
 # todo-vue
 
-## 0.0.62
-
-### Patch Changes
-
-- Updated dependencies [6892dc6]
-  - jazz-tools@0.11.2
-  - jazz-browser@0.11.2
-  - jazz-vue@0.11.2
-
 ## 0.0.61
 
 ### Patch Changes

examples/todo-vue/package.json

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

examples/todo-vue/src/views/HomeView.vue

@@ -4,15 +4,15 @@
       <div class="section-header">
         <h2>Folders</h2>
         <div class="new-folder">
-          <input 
-            v-model="newFolderName" 
-            placeholder="New folder name" 
+          <input
+            v-model="newFolderName"
+            placeholder="New folder name"
             class="input"
           />
           <button class="btn btn-primary" @click="createFolder">Create</button>
         </div>
       </div>
-      
+
       <div class="folder-list">
         <div
           v-for="folder in folders"
@@ -32,9 +32,9 @@
       <div class="section-header">
         <h2>{{ selectedFolder?.name }}</h2>
         <div class="new-todo">
-          <input 
-            v-model="newTodoTitle" 
-            placeholder="Add a new task" 
+          <input
+            v-model="newTodoTitle"
+            placeholder="Add a new task"
             class="input"
           />
           <button class="btn btn-primary" @click="createTodo">Add</button>
@@ -72,7 +72,9 @@ import { Folder, FolderList, ToDoItem, ToDoList } from "../schema";
 const { me } = useAccount();
 
 const computedFoldersId = computed(() => me.value?.root?.folders?.id);
-const folders = useCoState(FolderList, computedFoldersId, [{ items: [{}] }]);
+const folders = useCoState(FolderList, computedFoldersId, {
+  resolve: { $each: { items: true } },
+});
 
 const selectedFolder = ref<Folder>();
 const newFolderName = ref("");

examples/todo/CHANGELOG.md

@@ -1,13 +1,5 @@
 # jazz-example-todo
 
-## 0.0.177
-
-### Patch Changes
-
-- Updated dependencies [6892dc6]
-  - jazz-tools@0.11.2
-  - jazz-react@0.11.2
-
 ## 0.0.176
 
 ### Patch Changes

examples/todo/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jazz-example-todo",
   "private": true,
-  "version": "0.0.177",
+  "version": "0.0.176",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -16,8 +16,8 @@
     "@radix-ui/react-toast": "^1.1.4",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
-    "jazz-react": "workspace:0.11.2",
-    "jazz-tools": "workspace:0.11.2",
+    "jazz-react": "workspace:0.11.1",
+    "jazz-tools": "workspace:0.11.0",
     "lucide-react": "^0.274.0",
     "qrcode": "^1.5.3",
     "react": "^18.3.1",

examples/todo/src/2_main.tsx

@@ -122,7 +122,7 @@ export default function App() {
 
 function HomeScreen() {
   const { me } = useAccount({
-    root: { projects: [{}] },
+    resolve: { root: { projects: { $each: true } } },
   });
   const navigate = useNavigate();
 

examples/version-history/CHANGELOG.md

@@ -1,13 +1,5 @@
 # version-history
 
-## 0.0.55
-
-### Patch Changes
-
-- Updated dependencies [6892dc6]
-  - jazz-tools@0.11.2
-  - jazz-react@0.11.2
-
 ## 0.0.54
 
 ### Patch Changes

examples/version-history/package.json

@@ -1,7 +1,7 @@
 {
   "name": "version-history",
   "private": true,
-  "version": "0.0.55",
+  "version": "0.0.54",
   "type": "module",
   "scripts": {
     "dev": "vite",

examples/version-history/src/Project.tsx

@@ -4,7 +4,9 @@ import { ID } from "jazz-tools";
 import { IssueComponent } from "./Issue.tsx";
 import { Issue, Project } from "./schema.ts";
 export function ProjectComponent({ projectID }: { projectID: ID<Project> }) {
-  const project = useCoState(Project, projectID, { issues: [{}] });
+  const project = useCoState(Project, projectID, {
+    resolve: { issues: { $each: true } },
+  });
 
   if (!project) return;
 

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

@@ -8,8 +8,8 @@ import {
   CheckIcon,
   ChevronDown,
   ChevronRight,
-  ClipboardIcon,
   CodeIcon,
+  CopyIcon,
   FileLock2Icon,
   FileTextIcon,
   FingerprintIcon,
@@ -49,7 +49,7 @@ const icons = {
   chevronDown: ChevronDown,
   close: XIcon,
   code: CodeIcon,
-  copy: ClipboardIcon,
+  copy: CopyIcon,
   darkTheme: MoonIcon,
   delete: TrashIcon,
   devices: MonitorSmartphoneIcon,

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

@@ -6,11 +6,7 @@ import { Icon } from "../atoms/Icon";
 
 // TODO: add tabs feature, and remove CodeExampleTabs
 
-export function CopyButton({
-  code,
-  size,
-  className,
-}: { code: string; size: "md" | "lg"; className?: string }) {
+function CopyButton({ code, size }: { code: string; size: "md" | "lg" }) {
   const [copyCount, setCopyCount] = useState(0);
   const copied = copyCount > 0;
 
@@ -27,7 +23,6 @@ export function CopyButton({
     <button
       type="button"
       className={clsx(
-        className,
         "group/button absolute overflow-hidden rounded text-2xs font-medium md:opacity-0 backdrop-blur transition md:focus:opacity-100 group-hover:opacity-100",
         copied
           ? "bg-emerald-400/10 ring-1 ring-inset ring-emerald-400/20"

homepage/homepage/README.md

@@ -2,10 +2,6 @@
 
 The homepage of the [Jazz](https://github.com/garden-co/jazz) project, including information about the project, features, and resources.
 
-## Documentation
-
-Documentation about the documentation can be found in the `./docs` folder.
-
 ## Build
 
 The homepage is built using [Next.js](https://nextjs.org/) and [Tailwind CSS](https://tailwindcss.com/).

homepage/homepage/app/(docs)/docs/[framework]/[...slug]/guide/react.mdx

@@ -331,7 +331,7 @@ This works because CoValues
 
   <CodeGroup>
         ```ts
-        const unsub = issue.subscribe([], (updatedIssue) => console.log(updatedIssue));
+        const unsub = issue.subscribe({ resolve: true }, (updatedIssue) => console.log(updatedIssue));
         ```
   </CodeGroup>
 
@@ -339,7 +339,7 @@ This works because CoValues
 
   <CodeGroup>
         ```ts
-        const unsub = Issue.subscribe(issueID, me, [], (updatedIssue) => {
+        const unsub = Issue.subscribe(issueID, me, { resolve: true }, (updatedIssue) => {
             console.log(updatedIssue);
         });
         ```
@@ -358,7 +358,7 @@ This works because CoValues
             function useCoState<V extends CoValue>(Schema: CoValueClass<V>, id?: ID<V>): V | undefined {
                 const [value, setValue] = useState<V>();
 
-                useEffect(() => Schema.subscribe(id, [], setValue), [id]);
+                useEffect(() => Schema.subscribe(id, { resolve: true }, setValue), [id]);
 
                 return value;
             }
@@ -454,7 +454,7 @@ function App() { // old
     const issue = useCoState(Issue, issueID); // old
     // old
     const createIssue = () => { // old
-        const group = Group.create({ owner: me });
+        const group = Group.create();
         group.addMember("everyone", "writer");
         // old
         const newIssue = Issue.create( // old
@@ -605,6 +605,8 @@ export function ProjectComponent({ projectID }: { projectID: ID<Project> }) {
                 <button onClick={createAndAddIssue}>Create Issue</button>
             </div>
         </div>
+    ) : project === null ? (
+        <div>Project not found or access denied</div>
     ) : (
         <div>Loading project...</div>
     );
@@ -635,7 +637,7 @@ import { IssueComponent } from "./Issue.tsx"; // old
 import { useCoState } from "jazz-react"; // old
 // old
 export function ProjectComponent({ projectID }: { projectID: ID<Project> }) {// old
-    const project = useCoState(Project, projectID, { issues: [{}] });
+    const project = useCoState(Project, projectID, { resolve: { issues: { $each: true } } });
 
     const createAndAddIssue = () => {// old
         project?.issues.push(Issue.create({
@@ -663,7 +665,7 @@ export function ProjectComponent({ projectID }: { projectID: ID<Project> }) {//
 ```
 </CodeGroup>
 
-The loading-depth spec `{ issues: [{}] }` means "in `Project`, load `issues` and load each item in `issues` shallowly". (Since an `Issue` doesn't have any further references, "shallowly" actually means all its properties will be available).
+The loading-depth spec `{ resolve: { issues: { $each: true } } }` means "in `Project`, load `issues` and load each item in `issues` deeply". (Since an `Issue` doesn't have any further references, "deeply" actually means all its properties will be available).
 
 -   Now, we can get rid of a lot of conditional accesses because we know that once `project` is loaded, `project.issues` and each `Issue` in it will be loaded as well.
 -   This also results in only one rerender and visual update when everything is loaded, which is faster (especially for long lists) and gives you more control over the loading UX.
@@ -747,7 +749,7 @@ import { createInviteLink } from "jazz-react";
 // old
 
 export function ProjectComponent({ projectID }: { projectID: ID<Project> }) {// old
-    const project = useCoState(Project, projectID, { issues: [{}] }); // old
+    const project = useCoState(Project, projectID, { resolve: { issues:  { $each: true } } }); // old
 
     const { me } = useAccount();
 

homepage/homepage/app/(docs)/docs/[framework]/[...slug]/upgrade/0-12-0.mdx

@@ -0,0 +1,110 @@
+import { CodeGroup } from '@/components/forMdx'
+
+export const metadata = { title: "Jazz 0.11.0 - Deeply resolved data" };
+
+# Jazz 0.11.0 - Deeply resolved data
+
+<h2 className="not-prose text-sm text-stone-600 dark:text-stone-400 mb-5 pb-2 border-b">
+  15 March 2025
+</h2>
+
+<div>
+  Jazz 0.11.0 makes it easier and safer to load nested data. You can now specify exactly which nested data you want to load, and Jazz will check permissions and handle missing data gracefully. This helps catch errors earlier during development and makes your code more reliable.
+
+  <h3>What's new?</h3>
+  - New resolve API for a more type-safe deep loading
+  - Improved permission checks on deep loading
+  - Easier type safety with the Resolved type
+</div>
+
+<h3>New Resolve API</h3>
+<div>
+  We're introducing a new resolve API for deep loading, more friendly to TypeScript, IDE autocompletion and LLMs.
+  
+  To get started with the new resolve API, replace empty array/object parameters with structured resolve configs:
+
+<CodeGroup>
+{/* prettier-ignore */}
+```tsx
+// Before
+const playlist = useCoState(Playlist, id, [{}]);
+const { me } = useAccount({ root: { playlists: [] } });
+
+// After
+const playlist = useCoState(Playlist, id, { 
+  resolve: { $each: true } 
+});
+const { me } = useAccount({ 
+  resolve: { root: { playlists: true } } 
+});
+```
+</CodeGroup>
+
+The new API works across all loading methods:
+<CodeGroup>
+{/* prettier-ignore */}
+```ts
+// Before
+Playlist.load(id, account, {
+  tracks: [],
+});
+
+// After
+Playlist.load(id, { 
+  loadAs: account,
+  resolve: { tracks: true } 
+});
+```
+</CodeGroup>
+</div>
+
+<h3>Improved permission checks on deep loading</h3>
+<div>
+  Now `useCoState` will return `null` when the current user lacks permissions to load the requested data.
+
+  Previously, `useCoState` would return `undefined` if the current user lacked permissions, making it hard to tell if the value is loading or if it's missing.
+
+  Now `undefined` means that the value is definitely loading, and `null` means that the value is temporarily missing.
+
+  We also have implemented a more granular permission checking, where if an optional coValue cannot be accessed, useCoState will return the data stripped of that coValue.
+
+<CodeGroup>
+{/* prettier-ignore */}
+```tsx
+class ListOfTracks extends CoList.Of(co.optional.ref(Track)) {}
+// Before (ambiguous states)
+const value = useCoState(ListOfTracks, id, [{}]);
+if (value === undefined) return <div>Loading or access denied</div>;
+if (value === null) return <div>Not found</div>;
+
+// After
+const value = useCoState(ListOfTracks, id, { resolve: { $each: true } });
+if (value === undefined) return <div>Loading...</div>;
+if (value === null) return <div>Not found or access denied</div>;
+
+// If the current user lacks permissions to load a Track, the ListOfTracks will be returned without that Track.
+return tracks.map(track => track && <MusicTrack track={track} />);
+```
+</CodeGroup>
+</div>
+
+<h3>Type Safety Improvements</h3>
+<div>
+  The new `Resolved` type can be used to define what kind of deeply loaded data you expect in your parameters:
+
+  <CodeGroup>
+{/* prettier-ignore */}
+```ts
+// Before
+type PlaylistResolved = Resolved<Playlist, {
+  tracks: { $each: true }
+}>;
+
+// After
+function TrackList({ playlist }: { playlist: PlaylistResolved }) {
+  // Safe access to resolved tracks
+  return playlist.tracks.map(track => /* ... */);
+}
+```
+</CodeGroup>
+</div>

homepage/homepage/components/home/CreateJazzApp.mdx

@@ -1,7 +0,0 @@
-```sh
-npx create-jazz-app@latest
-
-> Framework: react
-> Auth: passkey
-> Project name: _
-```

homepage/homepage/components/home/HeroSection.tsx

@@ -2,9 +2,6 @@ import { H1 } from "gcmp-design-system/src/app/components/atoms/Headings";
 import { Icon } from "gcmp-design-system/src/app/components/atoms/Icon";
 import { Prose } from "gcmp-design-system/src/app/components/molecules/Prose";
 import Link from "next/link";
-import { CopyButton } from "gcmp-design-system/src/app/components/molecules/CodeGroup";
-import CreateJazzApp from "@/components/home/CreateJazzApp.mdx";
-import { SectionHeader } from "gcmp-design-system/src/app/components/molecules/SectionHeader";
 
 const features = [
   {
@@ -43,8 +40,8 @@ const features = [
 
 export function HeroSection() {
   return (
-    <div className="container grid items-center gap-x-8 gap-y-10 py-12 md:py-16 lg:py-24 lg:gap-x-10 lg:grid-cols-3">
-      <div className="flex flex-col justify-center gap-5 lg:col-span-2 lg:gap-8">
+    <div className="container grid gap-x-8 gap-y-10 py-12 md:py-16 lg:py-24 lg:gap-0 lg:grid-cols-3">
+      <div className="flex flex-col justify-center gap-4 lg:col-span-3 lg:gap-8">
         <p className="uppercase text-blue tracking-widest text-sm font-medium dark:text-stone-400">
           Local-first development toolkit
         </p>
@@ -82,23 +79,6 @@ export function HeroSection() {
           ))}
         </div>
       </div>
-
-      <div className="h-full pt-12 group grid md:grid-cols-2 items-center lg:grid-cols-1">
-        <SectionHeader className="md:col-span-2 lg:sr-only" title="Get a Jazz app running in minutes."/>
-        <div className="  overflow-hidden sm:rounded-xl sm:border  h-full sm:px-8 sm:pt-6 bg-stone-50 dark:bg-stone-950">
-          <div className="rounded-lg bg-white dark:bg-stone-925 sm:ring-4 ring-stone-400/20 sm:shadow-xl shadow-blue/20 border relative sm:top-2 h-full w-full">
-            <div className="py-4 flex items-center gap-2.5 px-6 border-b">
-              <span className="rounded-full size-3 bg-stone-200 dark:bg-stone-900"/>
-              <span className="rounded-full size-3 bg-stone-200 dark:bg-stone-900"/>
-              <span className="rounded-full size-3 bg-stone-200 dark:bg-stone-900"/>
-              <CopyButton code="npx create-jazz-app@latest" size="md" className="mt-0.5 mr-0.5" />
-            </div>
-            <div className="p-3">
-              <CreateJazzApp/>
-            </div>
-          </div>
-        </div>
-      </div>
     </div>
   );
 }