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

Version Packages

.github/workflows/code-quality.yml

@@ -15,4 +15,7 @@ jobs:
         with:
           version: latest
       - name: Run Biome
-        run: biome ci .
+        run: biome ci .
+
+      - name: Check Catalog Dependencies
+        run: node scripts/check-catalog-deps.js

.github/workflows/playwright.yml

@@ -13,7 +13,7 @@ jobs:
     continue-on-error: true
     strategy:
       matrix:
-        project: ["tests/e2e", "examples/chat", "examples/file-share-svelte", "examples/form", "examples/music-player", "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

biome.json

@@ -13,8 +13,7 @@
       "**/android/**",
       "packages/jazz-svelte/**",
       "examples/*svelte*/**",
-      "homepage/homepage/**",
-      "**/package.json"
+      "homepage/homepage/**"
     ]
   },
   "formatter": {

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

@@ -1,5 +1,43 @@
 # chat-rn-expo-clerk
 
+## 1.0.99
+
+### Patch Changes
+
+- Updated dependencies [bc3d7bb]
+  - jazz-tools@0.13.7
+  - jazz-expo@0.13.7
+  - jazz-react-native-media-images@0.13.7
+
+## 1.0.98
+
+### Patch Changes
+
+- Updated dependencies [fe6f561]
+  - jazz-tools@0.13.5
+  - jazz-expo@0.13.5
+  - jazz-react-native-media-images@0.13.5
+
+## 1.0.97
+
+### Patch Changes
+
+- Updated dependencies [3129982]
+- Updated dependencies [3129982]
+  - jazz-expo@0.13.4
+  - jazz-tools@0.13.4
+  - jazz-react-native-media-images@0.13.4
+
+## 1.0.96
+
+### Patch Changes
+
+- Updated dependencies [12f8bfa]
+- Updated dependencies [bd57177]
+  - jazz-tools@0.13.3
+  - jazz-expo@0.13.3
+  - jazz-react-native-media-images@0.13.3
+
 ## 1.0.95
 
 ### Patch Changes

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

@@ -2,28 +2,39 @@ import "../global.css";
 import { ClerkLoaded, ClerkProvider } from "@clerk/clerk-expo";
 import { secureStore } from "@clerk/clerk-expo/secure-store";
 import { useFonts } from "expo-font";
-import { Slot } from "expo-router";
+import { Slot, useRouter, useSegments } from "expo-router";
 import * as SplashScreen from "expo-splash-screen";
+import { useIsAuthenticated, useJazzContext } from "jazz-expo";
 import React, { useEffect } from "react";
 import { tokenCache } from "../cache";
 import { JazzAndAuth } from "../src/auth-context";
 
 SplashScreen.preventAutoHideAsync();
 
-export default function RootLayout() {
-  const [loaded] = useFonts({
-    SpaceMono: require("../assets/fonts/SpaceMono-Regular.ttf"),
-  });
+function InitialLayout() {
+  const isAuthenticated = useIsAuthenticated();
+  const segments = useSegments();
+  const router = useRouter();
 
   useEffect(() => {
-    if (loaded) {
-      SplashScreen.hideAsync();
-    }
-  }, [loaded]);
+    const inAuthGroup = segments[0] === "(auth)";
 
-  if (!loaded) {
-    return null;
-  }
+    if (isAuthenticated && inAuthGroup) {
+      router.replace("/chat");
+    } else if (!isAuthenticated && !inAuthGroup) {
+      router.replace("/");
+    }
+
+    SplashScreen.hideAsync();
+  }, [isAuthenticated, segments, router]);
+
+  return <Slot />;
+}
+
+export default function RootLayout() {
+  const [fontsLoaded] = useFonts({
+    SpaceMono: require("../assets/fonts/SpaceMono-Regular.ttf"),
+  });
 
   const publishableKey = process.env.EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY;
 
@@ -33,6 +44,17 @@ export default function RootLayout() {
     );
   }
 
+  useEffect(() => {
+    if (fontsLoaded) {
+    } else {
+      SplashScreen.preventAutoHideAsync();
+    }
+  }, [fontsLoaded]);
+
+  if (!fontsLoaded) {
+    return null;
+  }
+
   return (
     <ClerkProvider
       tokenCache={tokenCache}
@@ -41,7 +63,7 @@ export default function RootLayout() {
     >
       <ClerkLoaded>
         <JazzAndAuth>
-          <Slot />
+          <InitialLayout />
         </JazzAndAuth>
       </ClerkLoaded>
     </ClerkProvider>

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

@@ -1,7 +1,7 @@
 {
   "name": "chat-rn-expo-clerk",
   "main": "index.js",
-  "version": "1.0.95",
+  "version": "1.0.99",
   "scripts": {
     "build": "expo export -p ios",
     "start": "expo start",
@@ -12,9 +12,6 @@
     "web": "expo start --web",
     "run:ios": "pnpm expo prebuild && npx pod-install && pnpm expo run:ios"
   },
-  "jest": {
-    "preset": "jest-expo"
-  },
   "dependencies": {
     "@azure/core-asynciterator-polyfill": "^1.0.2",
     "@bacons/text-decoder": "0.0.0",
@@ -60,14 +57,11 @@
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",
-    "@types/jest": "^29.5.13",
     "@types/react": "~18.3.12",
     "@types/react-test-renderer": "^19.0.0",
-    "jest": "^29.6.3",
-    "jest-expo": "~52.0.2",
     "react-test-renderer": "18.3.1",
     "tailwindcss": "^3.4.17",
-    "typescript": "~5.6.2"
+    "typescript": "5.6.2"
   },
   "private": true
 }

examples/chat-rn-expo/CHANGELOG.md

@@ -1,5 +1,39 @@
 # chat-rn-expo
 
+## 1.0.86
+
+### Patch Changes
+
+- Updated dependencies [bc3d7bb]
+  - jazz-tools@0.13.7
+  - jazz-expo@0.13.7
+
+## 1.0.85
+
+### Patch Changes
+
+- Updated dependencies [fe6f561]
+  - jazz-tools@0.13.5
+  - jazz-expo@0.13.5
+
+## 1.0.84
+
+### Patch Changes
+
+- Updated dependencies [3129982]
+- Updated dependencies [3129982]
+  - jazz-expo@0.13.4
+  - jazz-tools@0.13.4
+
+## 1.0.83
+
+### Patch Changes
+
+- Updated dependencies [12f8bfa]
+- Updated dependencies [bd57177]
+  - jazz-tools@0.13.3
+  - jazz-expo@0.13.3
+
 ## 1.0.82
 
 ### Patch Changes

examples/chat-rn-expo/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chat-rn-expo",
-  "version": "1.0.82",
+  "version": "1.0.86",
   "main": "index.js",
   "scripts": {
     "build": "expo export -p ios",
@@ -45,7 +45,7 @@
     "@babel/core": "^7.25.2",
     "@types/react": "~18.3.12",
     "tailwindcss": "^3.4.17",
-    "typescript": "~5.6.2"
+    "typescript": "5.6.2"
   },
   "private": true
 }

examples/chat-rn/CHANGELOG.md

@@ -1,5 +1,49 @@
 # chat-rn
 
+## 1.0.95
+
+### Patch Changes
+
+- Updated dependencies [bc3d7bb]
+- Updated dependencies [4e9aae1]
+- Updated dependencies [21c935c]
+- Updated dependencies [aa1c80e]
+- Updated dependencies [13074be]
+  - jazz-tools@0.13.7
+  - cojson@0.13.7
+  - jazz-react-native@0.13.7
+  - cojson-transport-ws@0.13.7
+
+## 1.0.94
+
+### Patch Changes
+
+- Updated dependencies [e090b39]
+- Updated dependencies [fe6f561]
+  - cojson@0.13.5
+  - jazz-tools@0.13.5
+  - cojson-transport-ws@0.13.5
+  - jazz-react-native@0.13.5
+
+## 1.0.93
+
+### Patch Changes
+
+- Updated dependencies [3129982]
+  - jazz-tools@0.13.4
+  - jazz-react-native@0.13.4
+
+## 1.0.92
+
+### Patch Changes
+
+- Updated dependencies [12f8bfa]
+- Updated dependencies [b19cab7]
+- Updated dependencies [bd57177]
+  - jazz-tools@0.13.3
+  - cojson-transport-ws@0.13.3
+  - jazz-react-native@0.13.3
+
 ## 1.0.91
 
 ### Patch Changes

examples/chat-rn/package.json

@@ -1,13 +1,12 @@
 {
   "name": "chat-rn",
-  "version": "1.0.91",
+  "version": "1.0.95",
   "main": "index.js",
   "scripts": {
     "android": "react-native run-android",
     "ios": "react-native run-ios",
     "lint": "eslint .",
     "start": "react-native start",
-    "test": "jest",
     "pods": "pod-install"
   },
   "dependencies": {
@@ -47,16 +46,13 @@
     "@react-native/typescript-config": "0.76.7",
     "@rnx-kit/metro-config": "^2.0.1",
     "@rnx-kit/metro-resolver-symlinks": "^0.2.1",
-    "@types/jest": "^29.5.13",
     "@types/react": "^18.3.12",
     "@types/react-test-renderer": "^18.0.0",
-    "babel-jest": "^29.6.3",
     "eslint": "^8.19.0",
-    "jest": "^29.6.3",
     "pod-install": "^0.3.5",
     "prettier": "2.8.8",
     "react-test-renderer": "18.3.1",
-    "typescript": "5.0.4"
+    "typescript": "5.6.2"
   },
   "engines": {
     "node": ">=18"

examples/chat-vue/CHANGELOG.md

@@ -1,5 +1,42 @@
 # chat-vue
 
+## 0.0.79
+
+### Patch Changes
+
+- Updated dependencies [bc3d7bb]
+  - jazz-tools@0.13.7
+  - jazz-browser@0.13.7
+  - jazz-vue@0.13.7
+
+## 0.0.78
+
+### Patch Changes
+
+- Updated dependencies [fe6f561]
+  - jazz-tools@0.13.5
+  - jazz-browser@0.13.5
+  - jazz-vue@0.13.5
+
+## 0.0.77
+
+### Patch Changes
+
+- Updated dependencies [3129982]
+  - jazz-browser@0.13.4
+  - jazz-tools@0.13.4
+  - jazz-vue@0.13.4
+
+## 0.0.76
+
+### Patch Changes
+
+- Updated dependencies [12f8bfa]
+- Updated dependencies [bd57177]
+  - jazz-tools@0.13.3
+  - jazz-browser@0.13.3
+  - jazz-vue@0.13.3
+
 ## 0.0.75
 
 ### Patch Changes

examples/chat-vue/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chat-vue",
-  "version": "0.0.75",
+  "version": "0.0.79",
   "private": true,
   "type": "module",
   "scripts": {
@@ -31,8 +31,8 @@
     "npm-run-all2": "^6.2.3",
     "postcss": "^8.4.27",
     "tailwindcss": "^3.4.17",
-    "typescript": "~5.6.2",
-    "vite": "^6.0.11",
+    "typescript": "5.6.2",
+    "vite": "6.0.11",
     "vite-plugin-vue-devtools": "^7.4.6",
     "vue-tsc": "^2.1.6"
   }

examples/chat/CHANGELOG.md

@@ -1,5 +1,54 @@
 # jazz-example-chat
 
+## 0.0.177
+
+### Patch Changes
+
+- Updated dependencies [22b5c4f]
+- Updated dependencies [31ea2ef]
+- Updated dependencies [4530c4a]
+- Updated dependencies [bc3d7bb]
+  - jazz-inspector@0.13.7
+  - jazz-tools@0.13.7
+  - jazz-react@0.13.7
+
+## 0.0.176
+
+### Patch Changes
+
+- Updated dependencies [c320615]
+  - jazz-inspector@0.13.6
+
+## 0.0.175
+
+### Patch Changes
+
+- Updated dependencies [08ae9b2]
+- Updated dependencies [fe6f561]
+  - jazz-inspector@0.13.5
+  - jazz-tools@0.13.5
+  - jazz-react@0.13.5
+
+## 0.0.174
+
+### Patch Changes
+
+- Updated dependencies [3129982]
+  - jazz-react@0.13.4
+  - jazz-tools@0.13.4
+  - jazz-inspector@0.13.4
+
+## 0.0.173
+
+### Patch Changes
+
+- Updated dependencies [12f8bfa]
+- Updated dependencies [bd57177]
+- Updated dependencies [017f6c8]
+  - jazz-tools@0.13.3
+  - jazz-inspector@0.13.3
+  - jazz-react@0.13.3
+
 ## 0.0.172
 
 ### Patch Changes

examples/chat/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jazz-example-chat",
   "private": true,
-  "version": "0.0.172",
+  "version": "0.0.177",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -31,7 +31,7 @@
     "is-ci": "^3.0.1",
     "postcss": "^8.4.27",
     "tailwindcss": "^3.4.17",
-    "typescript": "~5.6.2",
-    "vite": "^6.0.11"
+    "typescript": "5.6.2",
+    "vite": "6.0.11"
   }
 }

examples/chat/tailwind.config.ts

@@ -56,18 +56,6 @@ const config: Config = {
   plugins: [
     plugin(({ addBase }) =>
       addBase({
-        ":root": {
-          "--gcmp-border-color": stonePalette[200],
-          "--gcmp-invert-border-color": stonePalette[900],
-        },
-        "*": {
-          borderColor: "var(--gcmp-border-color)",
-        },
-        "@media (prefers-color-scheme: dark)": {
-          "*": {
-            borderColor: "var(--gcmp-invert-border-color)",
-          },
-        },
         "*:focus": {
           outline: "none",
         },

examples/clerk/.gitignore

@@ -22,3 +22,5 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+playwright-report

examples/clerk/CHANGELOG.md

@@ -1,5 +1,43 @@
 # minimal-auth-clerk
 
+## 0.0.75
+
+### Patch Changes
+
+- Updated dependencies [bc3d7bb]
+  - jazz-tools@0.13.7
+  - jazz-react@0.13.7
+  - jazz-react-auth-clerk@0.13.7
+
+## 0.0.74
+
+### Patch Changes
+
+- Updated dependencies [fe6f561]
+  - jazz-tools@0.13.5
+  - jazz-react@0.13.5
+  - jazz-react-auth-clerk@0.13.5
+
+## 0.0.73
+
+### Patch Changes
+
+- Updated dependencies [3129982]
+- Updated dependencies [3129982]
+  - jazz-react-auth-clerk@0.13.4
+  - jazz-react@0.13.4
+  - jazz-tools@0.13.4
+
+## 0.0.72
+
+### Patch Changes
+
+- Updated dependencies [12f8bfa]
+- Updated dependencies [bd57177]
+  - jazz-tools@0.13.3
+  - jazz-react@0.13.3
+  - jazz-react-auth-clerk@0.13.3
+
 ## 0.0.71
 
 ### Patch Changes

examples/clerk/package.json

@@ -1,14 +1,16 @@
 {
   "name": "clerk",
   "private": true,
-  "version": "0.0.71",
+  "version": "0.0.75",
   "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"
+    "format-and-lint:fix": "biome check . --write",
+    "test:e2e": "playwright test",
+    "test:e2e:ui": "playwright test --ui"
   },
   "dependencies": {
     "@clerk/clerk-react": "^5.4.1",
@@ -19,12 +21,13 @@
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
+    "@playwright/test": "^1.50.1",
     "@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"
+    "typescript": "5.6.2",
+    "vite": "6.0.11"
   }
 }

examples/clerk/playwright.config.ts

@@ -0,0 +1,53 @@
+import { defineConfig, devices } from "@playwright/test";
+import isCI from "is-ci";
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// import dotenv from 'dotenv';
+// dotenv.config({ path: path.resolve(__dirname, '.env') });
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: "./tests",
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: isCI,
+  /* Retry on CI only */
+  retries: isCI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: isCI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: "html",
+
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    baseURL: "http://localhost:5173/",
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: "on-first-retry",
+    permissions: ["clipboard-read", "clipboard-write"],
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: "chromium",
+      use: { ...devices["Desktop Chrome"] },
+    },
+  ],
+
+  /* Run your local dev server before starting the tests */
+  webServer: [
+    {
+      command: "pnpm preview --port 5173",
+      url: "http://localhost:5173/",
+      reuseExistingServer: !isCI,
+    },
+  ],
+});

examples/clerk/src/App.tsx

@@ -1,8 +1,8 @@
-import { SignInButton } from "@clerk/clerk-react";
+import { SignInButton, SignOutButton } from "@clerk/clerk-react";
 import { useAccount, useIsAuthenticated } from "jazz-react";
 
 function App() {
-  const { me, logOut } = useAccount();
+  const { me } = useAccount();
 
   const isAuthenticated = useIsAuthenticated();
 
@@ -11,7 +11,7 @@ function App() {
       <div className="container">
         <h1>You're logged in</h1>
         <p>Welcome back, {me?.profile?.name}</p>
-        <button onClick={() => logOut()}>Logout</button>
+        <SignOutButton>Logout</SignOutButton>
       </div>
     );
   }

examples/clerk/src/main.tsx

@@ -1,4 +1,4 @@
-import { ClerkProvider, useClerk } from "@clerk/clerk-react";
+import { ClerkProvider, SignOutButton, useClerk } from "@clerk/clerk-react";
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import App from "./App.tsx";
@@ -28,12 +28,23 @@ function JazzProvider({ children }: { children: React.ReactNode }) {
   );
 }
 
-createRoot(document.getElementById("root")!).render(
-  <StrictMode>
-    <ClerkProvider publishableKey={PUBLISHABLE_KEY} afterSignOutUrl="/">
-      <JazzProvider>
-        <App />
-      </JazzProvider>
-    </ClerkProvider>
-  </StrictMode>,
-);
+// Route to test that when the Clerk user expires, the app is logged out
+if (location.search.includes("expirationTest")) {
+  createRoot(document.getElementById("root")!).render(
+    <StrictMode>
+      <ClerkProvider publishableKey={PUBLISHABLE_KEY} afterSignOutUrl="/">
+        <SignOutButton>Simulate expiration</SignOutButton>
+      </ClerkProvider>
+    </StrictMode>,
+  );
+} else {
+  createRoot(document.getElementById("root")!).render(
+    <StrictMode>
+      <ClerkProvider publishableKey={PUBLISHABLE_KEY} afterSignOutUrl="/">
+        <JazzProvider>
+          <App />
+        </JazzProvider>
+      </ClerkProvider>
+    </StrictMode>,
+  );
+}

examples/clerk/tests/expiration.spec.ts

@@ -0,0 +1,36 @@
+import { expect, test } from "@playwright/test";
+
+test("login & expiration", async ({ page }) => {
+  await page.goto("/");
+
+  expect(page.getByText("You're not logged in")).toBeVisible();
+
+  await page.getByRole("button", { name: "Sign in" }).click();
+
+  await page
+    .getByRole("textbox", { name: "Email address" })
+    .fill("guido+clerk-test@garden.co");
+
+  await page.keyboard.press("Enter");
+
+  await page
+    .getByRole("textbox", { name: "Password" })
+    .fill("guido+clerk-test@garden.co");
+
+  await page.keyboard.press("Enter");
+
+  await page.waitForURL("/");
+
+  await page.getByText("You're logged in").waitFor({ state: "visible" });
+
+  expect(page.getByText("You're logged in")).toBeVisible();
+
+  await page.goto("/?expirationTest");
+
+  // Simulate expiration by logging out outside of Jazz
+  await page.getByRole("button", { name: "Simulate expiration" }).click();
+
+  await page.goto("/");
+
+  await page.getByText("You're not logged in").waitFor({ state: "visible" });
+});

examples/clerk/tests/logout.spec.ts

@@ -0,0 +1,33 @@
+import { expect, test } from "@playwright/test";
+
+test("login & logout", async ({ page }) => {
+  await page.goto("/");
+
+  expect(page.getByText("You're not logged in")).toBeVisible();
+
+  await page.getByRole("button", { name: "Sign in" }).click();
+
+  await page
+    .getByRole("textbox", { name: "Email address" })
+    .fill("guido+clerk-test@garden.co");
+
+  await page.keyboard.press("Enter");
+
+  await page
+    .getByRole("textbox", { name: "Password" })
+    .fill("guido+clerk-test@garden.co");
+
+  await page.keyboard.press("Enter");
+
+  await page.waitForURL("/");
+
+  await page.getByText("You're logged in").waitFor({ state: "visible" });
+
+  expect(page.getByText("You're logged in")).toBeVisible();
+
+  await page.getByRole("button", { name: "Logout" }).click();
+
+  await page.getByText("You're not logged in").waitFor({ state: "visible" });
+
+  expect(page.getByText("You're not logged in")).toBeVisible();
+});

examples/clerk/tests/reload.spec.ts

@@ -0,0 +1,33 @@
+import { expect, test } from "@playwright/test";
+
+test("login & reload", async ({ page }) => {
+  await page.goto("/");
+
+  expect(page.getByText("You're not logged in")).toBeVisible();
+
+  await page.getByRole("button", { name: "Sign in" }).click();
+
+  await page
+    .getByRole("textbox", { name: "Email address" })
+    .fill("guido+clerk-test@garden.co");
+
+  await page.keyboard.press("Enter");
+
+  await page
+    .getByRole("textbox", { name: "Password" })
+    .fill("guido+clerk-test@garden.co");
+
+  await page.keyboard.press("Enter");
+
+  await page.waitForURL("/");
+
+  await page.getByText("You're logged in").waitFor({ state: "visible" });
+
+  expect(page.getByText("You're logged in")).toBeVisible();
+
+  await page.reload();
+
+  await page.getByText("You're logged in").waitFor({ state: "visible" });
+
+  expect(page.getByText("You're logged in")).toBeVisible();
+});

examples/file-share-svelte/CHANGELOG.md

@@ -1,5 +1,38 @@
 # file-share-svelte
 
+## 0.0.59
+
+### Patch Changes
+
+- Updated dependencies [bc3d7bb]
+  - jazz-tools@0.13.7
+  - jazz-svelte@0.13.7
+
+## 0.0.58
+
+### Patch Changes
+
+- Updated dependencies [fe6f561]
+  - jazz-tools@0.13.5
+  - jazz-svelte@0.13.5
+
+## 0.0.57
+
+### Patch Changes
+
+- Updated dependencies [3129982]
+  - jazz-tools@0.13.4
+  - jazz-svelte@0.13.4
+
+## 0.0.56
+
+### Patch Changes
+
+- Updated dependencies [12f8bfa]
+- Updated dependencies [bd57177]
+  - jazz-tools@0.13.3
+  - jazz-svelte@0.13.3
+
 ## 0.0.55
 
 ### Patch Changes

examples/file-share-svelte/package.json

@@ -1,6 +1,6 @@
 {
   "name": "file-share-svelte",
-  "version": "0.0.55",
+  "version": "0.0.59",
   "private": true,
   "type": "module",
   "scripts": {
@@ -33,9 +33,9 @@
     "svelte": "^5.0.0",
     "svelte-check": "^4.0.0",
     "tailwindcss": "^3.4.17",
-    "typescript": "~5.6.2",
+    "typescript": "5.6.2",
     "typescript-eslint": "^8.0.0",
-    "vite": "^6.0.11"
+    "vite": "6.0.11"
   },
   "dependencies": {
     "@tailwindcss/typography": "^0.5.15",

examples/filestream/CHANGELOG.md

@@ -1,5 +1,54 @@
 # jazz-tailwind-demo-auth-starter
 
+## 0.0.16
+
+### Patch Changes
+
+- Updated dependencies [22b5c4f]
+- Updated dependencies [31ea2ef]
+- Updated dependencies [4530c4a]
+- Updated dependencies [bc3d7bb]
+  - jazz-inspector@0.13.7
+  - jazz-tools@0.13.7
+  - jazz-react@0.13.7
+
+## 0.0.15
+
+### Patch Changes
+
+- Updated dependencies [c320615]
+  - jazz-inspector@0.13.6
+
+## 0.0.14
+
+### Patch Changes
+
+- Updated dependencies [08ae9b2]
+- Updated dependencies [fe6f561]
+  - jazz-inspector@0.13.5
+  - jazz-tools@0.13.5
+  - jazz-react@0.13.5
+
+## 0.0.13
+
+### Patch Changes
+
+- Updated dependencies [3129982]
+  - jazz-react@0.13.4
+  - jazz-tools@0.13.4
+  - jazz-inspector@0.13.4
+
+## 0.0.12
+
+### Patch Changes
+
+- Updated dependencies [12f8bfa]
+- Updated dependencies [bd57177]
+- Updated dependencies [017f6c8]
+  - jazz-tools@0.13.3
+  - jazz-inspector@0.13.3
+  - jazz-react@0.13.3
+
 ## 0.0.11
 
 ### Patch Changes

examples/filestream/package.json

@@ -1,7 +1,7 @@
 {
   "name": "filestream",
   "private": true,
-  "version": "0.0.11",
+  "version": "0.0.16",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -27,7 +27,7 @@
     "is-ci": "^3.0.1",
     "postcss": "^8.5.3",
     "tailwindcss": "^3.4.17",
-    "typescript": "~5.6.2",
-    "vite": "^6.0.11"
+    "typescript": "5.6.2",
+    "vite": "6.0.11"
   }
 }

examples/form/CHANGELOG.md

@@ -1,5 +1,38 @@
 # form
 
+## 0.1.17
+
+### Patch Changes
+
+- Updated dependencies [bc3d7bb]
+  - jazz-tools@0.13.7
+  - jazz-react@0.13.7
+
+## 0.1.16
+
+### Patch Changes
+
+- Updated dependencies [fe6f561]
+  - jazz-tools@0.13.5
+  - jazz-react@0.13.5
+
+## 0.1.15
+
+### Patch Changes
+
+- Updated dependencies [3129982]
+  - jazz-react@0.13.4
+  - jazz-tools@0.13.4
+
+## 0.1.14
+
+### Patch Changes
+
+- Updated dependencies [12f8bfa]
+- Updated dependencies [bd57177]
+  - jazz-tools@0.13.3
+  - jazz-react@0.13.3
+
 ## 0.1.13
 
 ### Patch Changes

examples/form/package.json

@@ -1,7 +1,7 @@
 {
   "name": "form",
   "private": true,
-  "version": "0.1.13",
+  "version": "0.1.17",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -29,7 +29,7 @@
     "is-ci": "^3.0.1",
     "postcss": "^8.4.27",
     "tailwindcss": "^3.4.17",
-    "typescript": "~5.6.2",
-    "vite": "^6.0.11"
+    "typescript": "5.6.2",
+    "vite": "6.0.11"
   }
 }

examples/form/src/Orders.tsx

@@ -12,14 +12,14 @@ export function Orders() {
       <section className="space-y-5">
         <a
           href={`/#/order`}
-          className="block relative p-3 bg-white border text-center rounded-md dark:bg-stone-900"
+          className="block relative p-3 bg-white border border-stone-200 text-center rounded-md dark:bg-stone-900 dark:border-stone-900"
         >
           <strong>Add new order</strong>
           <DraftIndicator />
         </a>
 
         <div className="space-y-3">
-          <h1 className="text-lg pb-2 border-b mb-3">
+          <h1 className="text-lg pb-2 border-b mb-3 border-stone-200 dark:border-stone-700">
             <strong>Your orders 🧋</strong>
           </h1>
 

examples/form/src/index.css

@@ -2,6 +2,14 @@
 @tailwind components;
 @tailwind utilities;
 
+:root {
+  --border-default: theme("colors.stone.200");
+}
+
+.dark {
+  --border-default: theme("colors.stone.900");
+}
+
 @layer components {
   strong {
     @apply font-semibold text-stone-900 dark:text-white;

examples/form/tailwind.config.ts

@@ -34,6 +34,9 @@ const config: Config = {
       colors: {
         stone: stonePaletteWithAlpha,
       },
+      borderColor: {
+        default: "var(--border-default)",
+      },
       container: {
         center: true,
         padding: {
@@ -52,18 +55,6 @@ const config: Config = {
     formsPlugin,
     plugin(({ addBase }) =>
       addBase({
-        ":root": {
-          "--gcmp-border-color": stonePalette[200],
-          "--gcmp-invert-border-color": stonePalette[900],
-        },
-        "*": {
-          borderColor: "var(--gcmp-border-color)",
-        },
-        "@media (prefers-color-scheme: dark)": {
-          "*": {
-            borderColor: "var(--gcmp-invert-border-color)",
-          },
-        },
         "*:focus": {
           outline: "none",
         },

examples/image-upload/CHANGELOG.md

@@ -1,5 +1,38 @@
 # image-upload
 
+## 0.0.73
+
+### Patch Changes
+
+- Updated dependencies [bc3d7bb]
+  - jazz-tools@0.13.7
+  - jazz-react@0.13.7
+
+## 0.0.72
+
+### Patch Changes
+
+- Updated dependencies [fe6f561]
+  - jazz-tools@0.13.5
+  - jazz-react@0.13.5
+
+## 0.0.71
+
+### Patch Changes
+
+- Updated dependencies [3129982]
+  - jazz-react@0.13.4
+  - jazz-tools@0.13.4
+
+## 0.0.70
+
+### Patch Changes
+
+- Updated dependencies [12f8bfa]
+- Updated dependencies [bd57177]
+  - jazz-tools@0.13.3
+  - jazz-react@0.13.3
+
 ## 0.0.69
 
 ### Patch Changes

examples/image-upload/package.json

@@ -1,7 +1,7 @@
 {
   "name": "image-upload",
   "private": true,
-  "version": "0.0.69",
+  "version": "0.0.73",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -22,8 +22,8 @@
     "@types/react-dom": "^18.3.1",
     "@vitejs/plugin-react": "^4.3.3",
     "globals": "^15.11.0",
-    "typescript": "~5.6.2",
-    "vite": "^6.0.11",
+    "typescript": "5.6.2",
+    "vite": "6.0.11",
     "autoprefixer": "^10.4.20",
     "postcss": "^8.4.27",
     "tailwindcss": "^3.4.17"

examples/inspector/CHANGELOG.md

@@ -1,5 +1,54 @@
 # jazz-example-inspector
 
+## 0.0.127
+
+### Patch Changes
+
+- 4530c4a: improve preview of Account types
+- Updated dependencies [22b5c4f]
+- Updated dependencies [31ea2ef]
+- Updated dependencies [4530c4a]
+- Updated dependencies [bc3d7bb]
+- Updated dependencies [4e9aae1]
+- Updated dependencies [21c935c]
+- Updated dependencies [aa1c80e]
+- Updated dependencies [13074be]
+  - jazz-inspector@0.13.7
+  - cojson@0.13.7
+  - cojson-transport-ws@0.13.7
+
+## 0.0.126
+
+### Patch Changes
+
+- Updated dependencies [c320615]
+  - jazz-inspector@0.13.6
+
+## 0.0.125
+
+### Patch Changes
+
+- Updated dependencies [08ae9b2]
+- Updated dependencies [e090b39]
+  - jazz-inspector@0.13.5
+  - cojson@0.13.5
+  - cojson-transport-ws@0.13.5
+
+## 0.0.124
+
+### Patch Changes
+
+- jazz-inspector@0.13.4
+
+## 0.0.123
+
+### Patch Changes
+
+- Updated dependencies [b19cab7]
+- Updated dependencies [017f6c8]
+  - cojson-transport-ws@0.13.3
+  - jazz-inspector@0.13.3
+
 ## 0.0.122
 
 ### Patch Changes

examples/inspector/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jazz-inspector-app",
   "private": true,
-  "version": "0.0.122",
+  "version": "0.0.127",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -30,7 +30,7 @@
     "autoprefixer": "^10.4.20",
     "postcss": "^8.4.27",
     "tailwindcss": "^3.4.17",
-    "typescript": "~5.6.2",
-    "vite": "^6.0.11"
+    "typescript": "5.6.2",
+    "vite": "6.0.11"
   }
 }

examples/inspector/src/viewer/new-app.tsx

@@ -18,7 +18,7 @@ import {
   PageStack,
   Select,
 } from "jazz-inspector";
-import { resolveCoValue, useResolvedCoValue } from "jazz-inspector";
+import { AccountOrGroupText } from "jazz-inspector";
 import React, { useState, useEffect } from "react";
 import { usePagePath } from "./use-page-path";
 
@@ -239,7 +239,7 @@ function AccountSwitcher({
         {accounts.map((account) => (
           <option key={account.id} value={account.id}>
             {localNode ? (
-              <AccountNameDisplay accountId={account.id} node={localNode} />
+              <AccountOrGroupText coId={account.id} showId node={localNode} />
             ) : (
               account.id
             )}
@@ -311,31 +311,3 @@ function AddAccountForm({
     </form>
   );
 }
-
-function AccountNameDisplay({
-  accountId,
-  node,
-}: {
-  accountId: CoID<RawAccount>;
-  node: LocalNode;
-}) {
-  const { snapshot } = useResolvedCoValue(accountId, node);
-  const [name, setName] = useState<string | null>(null);
-
-  useEffect(() => {
-    if (snapshot && typeof snapshot === "object" && "profile" in snapshot) {
-      const profileId = snapshot.profile as CoID<RawCoValue>;
-      resolveCoValue(profileId, node).then((profileResult) => {
-        if (
-          profileResult.snapshot &&
-          typeof profileResult.snapshot === "object" &&
-          "name" in profileResult.snapshot
-        ) {
-          setName(profileResult.snapshot.name as string);
-        }
-      });
-    }
-  }, [snapshot, node]);
-
-  return name ? `${name} <${accountId}>` : accountId;
-}

examples/multi-cursors/.env

@@ -1,3 +1,3 @@
 VITE_CURSOR_FEED_ID=multi-cursors-250425-1708
 VITE_GROUP_ID=co_zXE8C8sd9QxEbxnt3neRvFRPFUc
-VITE_OLD_CURSOR_AGE_SECONDS=36000
+VITE_OLD_CURSOR_AGE_SECONDS=36000

examples/multi-cursors/CHANGELOG.md

@@ -1,5 +1,38 @@
 # multi-cursors
 
+## 0.0.69
+
+### Patch Changes
+
+- Updated dependencies [bc3d7bb]
+  - jazz-tools@0.13.7
+  - jazz-react@0.13.7
+
+## 0.0.68
+
+### Patch Changes
+
+- Updated dependencies [fe6f561]
+  - jazz-tools@0.13.5
+  - jazz-react@0.13.5
+
+## 0.0.67
+
+### Patch Changes
+
+- Updated dependencies [3129982]
+  - jazz-react@0.13.4
+  - jazz-tools@0.13.4
+
+## 0.0.66
+
+### Patch Changes
+
+- Updated dependencies [12f8bfa]
+- Updated dependencies [bd57177]
+  - jazz-tools@0.13.3
+  - jazz-react@0.13.3
+
 ## 0.0.65
 
 ### Patch Changes

examples/multi-cursors/package.json

@@ -1,7 +1,7 @@
 {
   "name": "multi-cursors",
   "private": true,
-  "version": "0.0.65",
+  "version": "0.0.69",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -28,8 +28,8 @@
     "is-ci": "^3.0.1",
     "postcss": "^8.4.27",
     "tailwindcss": "^3.4.17",
-    "typescript": "~5.6.2",
-    "vite": "^6.0.11",
+    "typescript": "5.6.2",
+    "vite": "6.0.11",
     "vitest": "3.1.1"
   }
-}
+}

examples/multi-cursors/src/components/Canvas.tsx

@@ -1,19 +1,11 @@
-import { useAccount } from "jazz-react";
 import { CoFeedEntry, co } from "jazz-tools";
 import { CursorMoveEvent, useCanvas } from "../hooks/useCanvas";
-import { Cursor as CursorType, ViewBox } from "../types";
+import { Cursor as CursorType, Vec2, ViewBox } from "../types";
 import { centerOfBounds } from "../utils/centerOfBounds";
-import { getColor } from "../utils/getColor";
-import { getName } from "../utils/getName";
 import { Boundary } from "./Boundary";
 import { CanvasBackground } from "./CanvasBackground";
 import { CanvasDemoContent } from "./CanvasDemoContent";
 import { Cursor } from "./Cursor";
-
-const OLD_CURSOR_AGE_SECONDS = Number(
-  import.meta.env.VITE_OLD_CURSOR_AGE_SECONDS,
-);
-
 const DEBUG = import.meta.env.VITE_DEBUG === "true";
 
 // For debugging purposes, we can set a fixed bounds
@@ -25,14 +17,20 @@ const debugBounds: ViewBox = {
 };
 
 interface CanvasProps {
-  remoteCursors: CoFeedEntry<co<CursorType>>[];
+  remoteCursors: {
+    entry: CoFeedEntry<co<CursorType>>;
+    position: Vec2;
+    color: string;
+    name: string;
+    age: number;
+    isMe?: boolean;
+    active?: boolean;
+  }[];
   onCursorMove: (move: CursorMoveEvent) => void;
   name: string;
 }
 
 function Canvas({ remoteCursors, onCursorMove, name }: CanvasProps) {
-  const { me } = useAccount();
-
   const {
     svgProps,
     isDragging,
@@ -56,33 +54,21 @@ function Canvas({ remoteCursors, onCursorMove, name }: CanvasProps) {
       <CanvasDemoContent />
       {DEBUG && <Boundary bounds={bounds} />}
 
-      {remoteCursors.map((entry) => {
-        if (
-          entry.tx.sessionID === me?.sessionID ||
-          (OLD_CURSOR_AGE_SECONDS &&
-            entry.madeAt < new Date(Date.now() - 1000 * OLD_CURSOR_AGE_SECONDS))
-        ) {
-          return null;
-        }
-
-        const name = getName(entry.by?.profile?.name, entry.tx.sessionID);
-        const color = getColor(entry.tx.sessionID);
-        const age = new Date().getTime() - new Date(entry.madeAt).getTime();
-
-        return (
+      {remoteCursors.map((cursor) =>
+        !cursor.isMe && cursor.active ? (
           <Cursor
-            key={entry.tx.sessionID}
-            position={entry.value.position}
-            color={color}
+            key={cursor.entry.tx.sessionID}
+            position={cursor.position}
+            color={cursor.color}
             isDragging={false}
             isRemote={true}
-            name={name}
-            age={age}
+            name={cursor.name}
+            age={cursor.age}
             centerOfBounds={center}
             bounds={bounds}
           />
-        );
-      })}
+        ) : null,
+      )}
 
       {isMouseOver ? (
         <Cursor

examples/multi-cursors/src/components/Container.tsx

@@ -1,29 +1,84 @@
 import { useAccount, useCoState } from "jazz-react";
 import { ID } from "jazz-tools";
 import { CursorFeed } from "../schema";
+import { getColor } from "../utils/getColor.ts";
 import { getName } from "../utils/getName";
 import Canvas from "./Canvas";
 
+const OLD_CURSOR_AGE_SECONDS = Number(
+  import.meta.env.VITE_OLD_CURSOR_AGE_SECONDS,
+);
+
+function Avatar({
+  name,
+  color,
+  active,
+}: { name: string; color: string; active: boolean }) {
+  return (
+    <span
+      title={name}
+      className={[
+        "size-6 text-xs font-medium uppercase bg-white inline-flex items-center justify-center rounded-full border-2",
+        active ? "" : "opacity-50",
+      ].join(" ")}
+      style={{ color, borderColor: color }}
+    >
+      {name.replace("Anonymous ", "")[0]}
+    </span>
+  );
+}
+
 /** A higher order component that wraps the canvas. */
 function Container({ cursorFeedID }: { cursorFeedID: ID<CursorFeed> }) {
   const { me } = useAccount();
   const cursors = useCoState(CursorFeed, cursorFeedID, { resolve: true });
 
-  return (
-    <Canvas
-      onCursorMove={(move) => {
-        if (!(cursors && me)) return;
+  const remoteCursors = Object.values(cursors?.perSession ?? {})
+    .map((entry) => ({
+      entry,
+      position: entry.value.position,
+      color: getColor(entry.tx.sessionID),
+      name: getName(entry.by?.profile?.name, entry.tx.sessionID),
+      age: new Date().getTime() - new Date(entry.madeAt).getTime(),
+      active:
+        !OLD_CURSOR_AGE_SECONDS ||
+        entry.madeAt >= new Date(Date.now() - 1000 * OLD_CURSOR_AGE_SECONDS),
+      isMe: entry.tx.sessionID === me?.sessionID,
+    }))
+    .sort((a, b) => {
+      return b.entry.madeAt.getTime() - a.entry.madeAt.getTime();
+    });
 
-        cursors.push({
-          position: {
-            x: move.position.x,
-            y: move.position.y,
-          },
-        });
-      }}
-      remoteCursors={Object.values(cursors?.perSession ?? {})}
-      name={getName(me?.profile?.name, me?.sessionID)}
-    />
+  return (
+    <>
+      <div className="absolute top-4 right-4 bg-white p-2 rounded-lg shadow">
+        <div className="flex items-center gap-1">
+          {remoteCursors.slice(0, 5).map(({ name, color, entry, active }) => (
+            <Avatar
+              key={entry.tx.sessionID}
+              name={name}
+              color={color}
+              active={active}
+            />
+          ))}
+        </div>
+      </div>
+
+      <Canvas
+        onCursorMove={(move) => {
+          if (!(cursors && me)) return;
+
+          cursors.push({
+            position: {
+              x: move.position.x,
+              y: move.position.y,
+            },
+          });
+        }}
+        remoteCursors={remoteCursors}
+        name={getName(me?.profile?.name, me?.sessionID)}
+      />
+    </>
   );
 }
 

examples/multiauth/CHANGELOG.md

@@ -1,5 +1,43 @@
 # multiauth
 
+## 0.0.16
+
+### Patch Changes
+
+- Updated dependencies [bc3d7bb]
+  - jazz-tools@0.13.7
+  - jazz-react@0.13.7
+  - jazz-react-auth-clerk@0.13.7
+
+## 0.0.15
+
+### Patch Changes
+
+- Updated dependencies [fe6f561]
+  - jazz-tools@0.13.5
+  - jazz-react@0.13.5
+  - jazz-react-auth-clerk@0.13.5
+
+## 0.0.14
+
+### Patch Changes
+
+- Updated dependencies [3129982]
+- Updated dependencies [3129982]
+  - jazz-react-auth-clerk@0.13.4
+  - jazz-react@0.13.4
+  - jazz-tools@0.13.4
+
+## 0.0.13
+
+### Patch Changes
+
+- Updated dependencies [12f8bfa]
+- Updated dependencies [bd57177]
+  - jazz-tools@0.13.3
+  - jazz-react@0.13.3
+  - jazz-react-auth-clerk@0.13.3
+
 ## 0.0.12
 
 ### Patch Changes

examples/multiauth/package.json

@@ -1,7 +1,7 @@
 {
   "name": "multiauth",
   "private": true,
-  "version": "0.0.12",
+  "version": "0.0.16",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -24,7 +24,7 @@
     "@types/react-dom": "^18.3.1",
     "@vitejs/plugin-react": "^4.3.3",
     "globals": "^15.11.0",
-    "typescript": "~5.6.2",
-    "vite": "^6.0.11"
+    "typescript": "5.6.2",
+    "vite": "6.0.11"
   }
 }

examples/music-player/CHANGELOG.md

@@ -1,5 +1,54 @@
 # jazz-example-musicplayer
 
+## 0.0.98
+
+### Patch Changes
+
+- Updated dependencies [22b5c4f]
+- Updated dependencies [31ea2ef]
+- Updated dependencies [4530c4a]
+- Updated dependencies [bc3d7bb]
+  - jazz-inspector@0.13.7
+  - jazz-tools@0.13.7
+  - jazz-react@0.13.7
+
+## 0.0.97
+
+### Patch Changes
+
+- Updated dependencies [c320615]
+  - jazz-inspector@0.13.6
+
+## 0.0.96
+
+### Patch Changes
+
+- Updated dependencies [08ae9b2]
+- Updated dependencies [fe6f561]
+  - jazz-inspector@0.13.5
+  - jazz-tools@0.13.5
+  - jazz-react@0.13.5
+
+## 0.0.95
+
+### Patch Changes
+
+- Updated dependencies [3129982]
+  - jazz-react@0.13.4
+  - jazz-tools@0.13.4
+  - jazz-inspector@0.13.4
+
+## 0.0.94
+
+### Patch Changes
+
+- Updated dependencies [12f8bfa]
+- Updated dependencies [bd57177]
+- Updated dependencies [017f6c8]
+  - jazz-tools@0.13.3
+  - jazz-inspector@0.13.3
+  - jazz-react@0.13.3
+
 ## 0.0.93
 
 ### Patch Changes

examples/music-player/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jazz-example-music-player",
   "private": true,
-  "version": "0.0.93",
+  "version": "0.0.98",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -40,7 +40,7 @@
     "autoprefixer": "^10.4.20",
     "postcss": "^8.4.27",
     "tailwindcss": "^3.4.17",
-    "typescript": "~5.6.2",
-    "vite": "^6.0.11"
+    "typescript": "5.6.2",
+    "vite": "6.0.11"
   }
 }

examples/music-player/tests/auth.spec.ts

@@ -0,0 +1,54 @@
+import { BrowserContext, test } from "@playwright/test";
+import { HomePage } from "./pages/HomePage";
+
+const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
+
+async function mockAuthenticator(context: BrowserContext) {
+  await context.addInitScript(() => {
+    Object.defineProperty(window.navigator, "credentials", {
+      value: {
+        ...window.navigator.credentials,
+        create: async () => ({
+          type: "public-key",
+          id: new Uint8Array([1, 2, 3, 4]),
+          rawId: new Uint8Array([1, 2, 3, 4]),
+          response: {
+            clientDataJSON: new Uint8Array([1]),
+            attestationObject: new Uint8Array([2]),
+          },
+        }),
+        get: async () => ({
+          type: "public-key",
+          id: new Uint8Array([1, 2, 3, 4]),
+          rawId: new Uint8Array([1, 2, 3, 4]),
+          response: {
+            authenticatorData: new Uint8Array([1]),
+            clientDataJSON: new Uint8Array([2]),
+            signature: new Uint8Array([3]),
+          },
+        }),
+      },
+      configurable: true,
+    });
+  });
+}
+
+// Configure the authenticator
+test.beforeEach(async ({ context }) => {
+  // Enable virtual authenticator environment
+  await mockAuthenticator(context);
+});
+
+test("sign up and log out", async ({ page: marioPage }) => {
+  await marioPage.goto("/");
+
+  const marioHome = new HomePage(marioPage);
+
+  await marioHome.signUp("Mario");
+
+  await marioHome.logoutButton.waitFor({
+    state: "visible",
+  });
+
+  await marioHome.logOut();
+});

examples/music-player/tests/pages/HomePage.ts

@@ -11,8 +11,12 @@ export class HomePage {
     name: "Playlist title",
   });
 
+  loginButton = this.page.getByRole("button", {
+    name: "Sign up",
+  });
+
   logoutButton = this.page.getByRole("button", {
-    name: "Logout",
+    name: "Sign out",
   });
 
   async expectActiveTrackPlaying() {
@@ -131,12 +135,21 @@ export class HomePage {
     await this.page
       .getByRole("button", { name: "Sign up with passkey" })
       .click();
-    await expect(
-      this.page.getByRole("button", { name: "Sign out" }),
-    ).toBeVisible();
+
+    await this.logoutButton.waitFor({
+      state: "visible",
+    });
+
+    await expect(this.logoutButton).toBeVisible();
   }
 
-  async logout() {
+  async logOut() {
     await this.logoutButton.click();
+
+    await this.loginButton.waitFor({
+      state: "visible",
+    });
+
+    await expect(this.loginButton).toBeVisible();
   }
 }

examples/organization/CHANGELOG.md

@@ -1,5 +1,38 @@
 # organization
 
+## 0.0.69
+
+### Patch Changes
+
+- Updated dependencies [bc3d7bb]
+  - jazz-tools@0.13.7
+  - jazz-react@0.13.7
+
+## 0.0.68
+
+### Patch Changes
+
+- Updated dependencies [fe6f561]
+  - jazz-tools@0.13.5
+  - jazz-react@0.13.5
+
+## 0.0.67
+
+### Patch Changes
+
+- Updated dependencies [3129982]
+  - jazz-react@0.13.4
+  - jazz-tools@0.13.4
+
+## 0.0.66
+
+### Patch Changes
+
+- Updated dependencies [12f8bfa]
+- Updated dependencies [bd57177]
+  - jazz-tools@0.13.3
+  - jazz-react@0.13.3
+
 ## 0.0.65
 
 ### Patch Changes

examples/organization/package.json

@@ -1,7 +1,7 @@
 {
   "name": "organization",
   "private": true,
-  "version": "0.0.65",
+  "version": "0.0.69",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -29,7 +29,7 @@
     "globals": "^15.11.0",
     "postcss": "^8.4.27",
     "tailwindcss": "^3.4.17",
-    "typescript": "~5.6.2",
-    "vite": "^6.0.11"
+    "typescript": "5.6.2",
+    "vite": "6.0.11"
   }
 }

examples/organization/src/index.css

@@ -12,10 +12,6 @@
 
   [type="text"],
   select {
-    border-color: var(--gcmp-border-color);
-
-    @media (prefers-color-scheme: dark) {
-      border-color: var(--gcmp-invert-border-color);
-    }
+    border-color: theme("colors.stone.200");
   }
 }

examples/organization/tailwind.config.ts

@@ -52,18 +52,6 @@ const config: Config = {
     formsPlugin,
     plugin(({ addBase }) =>
       addBase({
-        ":root": {
-          "--gcmp-border-color": stonePalette[200],
-          "--gcmp-invert-border-color": stonePalette[900],
-        },
-        "*": {
-          borderColor: "var(--gcmp-border-color)",
-        },
-        "@media (prefers-color-scheme: dark)": {
-          "*": {
-            borderColor: "var(--gcmp-invert-border-color)",
-          },
-        },
         "*:focus": {
           outline: "none",
         },

examples/passkey-svelte/CHANGELOG.md

@@ -1,5 +1,29 @@
 # passkey-svelte
 
+## 0.0.63
+
+### Patch Changes
+
+- jazz-svelte@0.13.7
+
+## 0.0.62
+
+### Patch Changes
+
+- jazz-svelte@0.13.5
+
+## 0.0.61
+
+### Patch Changes
+
+- jazz-svelte@0.13.4
+
+## 0.0.60
+
+### Patch Changes
+
+- jazz-svelte@0.13.3
+
 ## 0.0.59
 
 ### Patch Changes

examples/passkey-svelte/package.json

@@ -1,6 +1,6 @@
 {
   "name": "passkey-svelte",
-  "version": "0.0.59",
+  "version": "0.0.63",
   "type": "module",
   "private": true,
   "scripts": {
@@ -27,9 +27,9 @@
     "prettier-plugin-svelte": "^3.2.6",
     "svelte": "^5.0.0",
     "svelte-check": "^4.0.0",
-    "typescript": "~5.6.2",
+    "typescript": "5.6.2",
     "typescript-eslint": "^8.0.0",
-    "vite": "^6.0.11"
+    "vite": "6.0.11"
   },
   "dependencies": {
     "jazz-svelte": "workspace:*"

examples/passkey/CHANGELOG.md

@@ -1,5 +1,38 @@
 # minimal-auth-passkey
 
+## 0.0.74
+
+### Patch Changes
+
+- Updated dependencies [bc3d7bb]
+  - jazz-tools@0.13.7
+  - jazz-react@0.13.7
+
+## 0.0.73
+
+### Patch Changes
+
+- Updated dependencies [fe6f561]
+  - jazz-tools@0.13.5
+  - jazz-react@0.13.5
+
+## 0.0.72
+
+### Patch Changes
+
+- Updated dependencies [3129982]
+  - jazz-react@0.13.4
+  - jazz-tools@0.13.4
+
+## 0.0.71
+
+### Patch Changes
+
+- Updated dependencies [12f8bfa]
+- Updated dependencies [bd57177]
+  - jazz-tools@0.13.3
+  - jazz-react@0.13.3
+
 ## 0.0.70
 
 ### Patch Changes

examples/passkey/package.json

@@ -1,7 +1,7 @@
 {
   "name": "passkey",
   "private": true,
-  "version": "0.0.70",
+  "version": "0.0.74",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -22,7 +22,7 @@
     "@types/react-dom": "^18.3.1",
     "@vitejs/plugin-react": "^4.3.3",
     "globals": "^15.11.0",
-    "typescript": "~5.6.2",
-    "vite": "^6.0.11"
+    "typescript": "5.6.2",
+    "vite": "6.0.11"
   }
 }

examples/passphrase/CHANGELOG.md

@@ -1,5 +1,38 @@
 # passphrase
 
+## 0.0.71
+
+### Patch Changes
+
+- Updated dependencies [bc3d7bb]
+  - jazz-tools@0.13.7
+  - jazz-react@0.13.7
+
+## 0.0.70
+
+### Patch Changes
+
+- Updated dependencies [fe6f561]
+  - jazz-tools@0.13.5
+  - jazz-react@0.13.5
+
+## 0.0.69
+
+### Patch Changes
+
+- Updated dependencies [3129982]
+  - jazz-react@0.13.4
+  - jazz-tools@0.13.4
+
+## 0.0.68
+
+### Patch Changes
+
+- Updated dependencies [12f8bfa]
+- Updated dependencies [bd57177]
+  - jazz-tools@0.13.3
+  - jazz-react@0.13.3
+
 ## 0.0.67
 
 ### Patch Changes

examples/passphrase/package.json

@@ -1,7 +1,7 @@
 {
   "name": "passphrase",
   "private": true,
-  "version": "0.0.67",
+  "version": "0.0.71",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -22,7 +22,7 @@
     "@types/react-dom": "^18.3.1",
     "@vitejs/plugin-react": "^4.3.3",
     "globals": "^15.11.0",
-    "typescript": "~5.6.2",
-    "vite": "^6.0.11"
+    "typescript": "5.6.2",
+    "vite": "6.0.11"
   }
 }

examples/password-manager/CHANGELOG.md

@@ -1,5 +1,38 @@
 # jazz-password-manager
 
+## 0.0.95
+
+### Patch Changes
+
+- Updated dependencies [bc3d7bb]
+  - jazz-tools@0.13.7
+  - jazz-react@0.13.7
+
+## 0.0.94
+
+### Patch Changes
+
+- Updated dependencies [fe6f561]
+  - jazz-tools@0.13.5
+  - jazz-react@0.13.5
+
+## 0.0.93
+
+### Patch Changes
+
+- Updated dependencies [3129982]
+  - jazz-react@0.13.4
+  - jazz-tools@0.13.4
+
+## 0.0.92
+
+### Patch Changes
+
+- Updated dependencies [12f8bfa]
+- Updated dependencies [bd57177]
+  - jazz-tools@0.13.3
+  - jazz-react@0.13.3
+
 ## 0.0.91
 
 ### Patch Changes

examples/password-manager/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jazz-password-manager",
   "private": true,
-  "version": "0.0.91",
+  "version": "0.0.95",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -27,7 +27,7 @@
     "autoprefixer": "^10.4.20",
     "postcss": "^8.4.27",
     "tailwindcss": "^3.4.17",
-    "typescript": "~5.6.2",
-    "vite": "^6.0.11"
+    "typescript": "5.6.2",
+    "vite": "6.0.11"
   }
 }

examples/pets/CHANGELOG.md

@@ -1,5 +1,38 @@
 # jazz-example-pets
 
+## 0.0.193
+
+### Patch Changes
+
+- Updated dependencies [bc3d7bb]
+  - jazz-tools@0.13.7
+  - jazz-react@0.13.7
+
+## 0.0.192
+
+### Patch Changes
+
+- Updated dependencies [fe6f561]
+  - jazz-tools@0.13.5
+  - jazz-react@0.13.5
+
+## 0.0.191
+
+### Patch Changes
+
+- Updated dependencies [3129982]
+  - jazz-react@0.13.4
+  - jazz-tools@0.13.4
+
+## 0.0.190
+
+### Patch Changes
+
+- Updated dependencies [12f8bfa]
+- Updated dependencies [bd57177]
+  - jazz-tools@0.13.3
+  - jazz-react@0.13.3
+
 ## 0.0.189
 
 ### Patch Changes

examples/pets/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jazz-example-pets",
   "private": true,
-  "version": "0.0.189",
+  "version": "0.0.193",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -43,8 +43,8 @@
     "jazz-run": "workspace:*",
     "postcss": "^8.4.27",
     "tailwindcss": "^3.4.17",
-    "typescript": "~5.6.2",
-    "vite": "^6.0.11",
+    "typescript": "5.6.2",
+    "vite": "6.0.11",
     "vite-plugin-top-level-await": "^1.4.4"
   }
 }

examples/reactions/CHANGELOG.md

@@ -1,5 +1,38 @@
 # reactions
 
+## 0.0.73
+
+### Patch Changes
+
+- Updated dependencies [bc3d7bb]
+  - jazz-tools@0.13.7
+  - jazz-react@0.13.7
+
+## 0.0.72
+
+### Patch Changes
+
+- Updated dependencies [fe6f561]
+  - jazz-tools@0.13.5
+  - jazz-react@0.13.5
+
+## 0.0.71
+
+### Patch Changes
+
+- Updated dependencies [3129982]
+  - jazz-react@0.13.4
+  - jazz-tools@0.13.4
+
+## 0.0.70
+
+### Patch Changes
+
+- Updated dependencies [12f8bfa]
+- Updated dependencies [bd57177]
+  - jazz-tools@0.13.3
+  - jazz-react@0.13.3
+
 ## 0.0.69
 
 ### Patch Changes

examples/reactions/package.json

@@ -1,7 +1,7 @@
 {
   "name": "reactions",
   "private": true,
-  "version": "0.0.69",
+  "version": "0.0.73",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -23,7 +23,7 @@
     "@types/react-dom": "^18.3.1",
     "@vitejs/plugin-react": "^4.3.3",
     "globals": "^15.11.0",
-    "typescript": "~5.6.2",
-    "vite": "^6.0.11"
+    "typescript": "5.6.2",
+    "vite": "6.0.11"
   }
 }

examples/todo-vue/CHANGELOG.md

@@ -1,5 +1,42 @@
 # todo-vue
 
+## 0.0.77
+
+### Patch Changes
+
+- Updated dependencies [bc3d7bb]
+  - jazz-tools@0.13.7
+  - jazz-browser@0.13.7
+  - jazz-vue@0.13.7
+
+## 0.0.76
+
+### Patch Changes
+
+- Updated dependencies [fe6f561]
+  - jazz-tools@0.13.5
+  - jazz-browser@0.13.5
+  - jazz-vue@0.13.5
+
+## 0.0.75
+
+### Patch Changes
+
+- Updated dependencies [3129982]
+  - jazz-browser@0.13.4
+  - jazz-tools@0.13.4
+  - jazz-vue@0.13.4
+
+## 0.0.74
+
+### Patch Changes
+
+- Updated dependencies [12f8bfa]
+- Updated dependencies [bd57177]
+  - jazz-tools@0.13.3
+  - jazz-browser@0.13.3
+  - jazz-vue@0.13.3
+
 ## 0.0.73
 
 ### Patch Changes

examples/todo-vue/package.json

@@ -1,6 +1,6 @@
 {
   "name": "todo-vue",
-  "version": "0.0.73",
+  "version": "0.0.77",
   "private": true,
   "type": "module",
   "scripts": {
@@ -31,8 +31,8 @@
     "npm-run-all2": "^6.2.3",
     "postcss": "^8.4.27",
     "tailwindcss": "^3.4.17",
-    "typescript": "~5.6.2",
-    "vite": "^6.0.11",
+    "typescript": "5.6.2",
+    "vite": "6.0.11",
     "vite-plugin-vue-devtools": "^7.4.6",
     "vue-tsc": "^2.1.6"
   }

examples/todo/CHANGELOG.md

@@ -1,5 +1,38 @@
 # jazz-example-todo
 
+## 0.0.192
+
+### Patch Changes
+
+- Updated dependencies [bc3d7bb]
+  - jazz-tools@0.13.7
+  - jazz-react@0.13.7
+
+## 0.0.191
+
+### Patch Changes
+
+- Updated dependencies [fe6f561]
+  - jazz-tools@0.13.5
+  - jazz-react@0.13.5
+
+## 0.0.190
+
+### Patch Changes
+
+- Updated dependencies [3129982]
+  - jazz-react@0.13.4
+  - jazz-tools@0.13.4
+
+## 0.0.189
+
+### Patch Changes
+
+- Updated dependencies [12f8bfa]
+- Updated dependencies [bd57177]
+  - jazz-tools@0.13.3
+  - jazz-react@0.13.3
+
 ## 0.0.188
 
 ### Patch Changes

examples/todo/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jazz-example-todo",
   "private": true,
-  "version": "0.0.188",
+  "version": "0.0.192",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -36,7 +36,7 @@
     "autoprefixer": "^10.4.20",
     "postcss": "^8.4.27",
     "tailwindcss": "^3.4.17",
-    "typescript": "~5.6.2",
-    "vite": "^6.0.11"
+    "typescript": "5.6.2",
+    "vite": "6.0.11"
   }
 }

examples/version-history/CHANGELOG.md

@@ -1,5 +1,54 @@
 # version-history
 
+## 0.0.71
+
+### Patch Changes
+
+- Updated dependencies [22b5c4f]
+- Updated dependencies [31ea2ef]
+- Updated dependencies [4530c4a]
+- Updated dependencies [bc3d7bb]
+  - jazz-inspector@0.13.7
+  - jazz-tools@0.13.7
+  - jazz-react@0.13.7
+
+## 0.0.70
+
+### Patch Changes
+
+- Updated dependencies [c320615]
+  - jazz-inspector@0.13.6
+
+## 0.0.69
+
+### Patch Changes
+
+- Updated dependencies [08ae9b2]
+- Updated dependencies [fe6f561]
+  - jazz-inspector@0.13.5
+  - jazz-tools@0.13.5
+  - jazz-react@0.13.5
+
+## 0.0.68
+
+### Patch Changes
+
+- Updated dependencies [3129982]
+  - jazz-react@0.13.4
+  - jazz-tools@0.13.4
+  - jazz-inspector@0.13.4
+
+## 0.0.67
+
+### Patch Changes
+
+- Updated dependencies [12f8bfa]
+- Updated dependencies [bd57177]
+- Updated dependencies [017f6c8]
+  - jazz-tools@0.13.3
+  - jazz-inspector@0.13.3
+  - jazz-react@0.13.3
+
 ## 0.0.66
 
 ### Patch Changes

examples/version-history/package.json

@@ -1,7 +1,7 @@
 {
   "name": "version-history",
   "private": true,
-  "version": "0.0.66",
+  "version": "0.0.71",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -25,7 +25,7 @@
     "@types/react-dom": "^18.3.1",
     "@vitejs/plugin-react": "^4.3.3",
     "globals": "^15.11.0",
-    "typescript": "~5.6.2",
-    "vite": "^6.0.11"
+    "typescript": "5.6.2",
+    "vite": "6.0.11"
   }
 }

homepage/design-system/README.md

@@ -18,3 +18,18 @@ Open [http://localhost:3000](http://localhost:3000) with your browser to see the
 
 This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
 
+The design sysem is created to enable developers to create apps and components quickly, which have baked in design decisions, allowing you to focus on the code.
+
+## Design Tokens
+
+The design system purposefully reduces the number of decisions a designer needs to make, mainly reducing design decisions to whether something is:
+
+- `default` - the default appearance
+- `highlight` - a more prominent appearance
+- `muted` - a less prominent appearance
+
+These tokens have baked in `light` & `dark` modes, so the colour reacts to be less/more prominent corresponding to the background colour.
+
+They also handle `text` and `background` colours interchangably, this means a `text-highlight` is not the same colour as a `bg-highlight` so can be used correspondingly, for example to create double prominence on text, you can make the text 'bolder' and the background a transparent `primary` colour, to really emphasise text, the same applies to `muted`, which would have a similar but opposite effect.
+
+The design system is centered around the variable `primary`, with the `secondary` variable and some `highlight` variables being created from this single variable, this allows the entire theme to be quickly updated by changing this colour, converting the entire theme to a harmonious colour palette.

homepage/design-system/colors/colors.ts

@@ -0,0 +1,10 @@
+export const COLORS = {
+  BLUE: "#146AFF",
+  TURQUOISE: "#2DC9C9",
+  FOREST: "#42BB69",
+  GREEN: "#8BDA27",
+  PINK: "#EF478E",
+  PURPLE: "#B441EB",
+  YELLOW: "#FBC400",
+  RED: "#FF601C",
+};

homepage/design-system/package.json

@@ -15,6 +15,8 @@
     "@icons-pack/react-simple-icons": "^9.1.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
+    "jazz-tools": "link:../../packages/jazz-tools",
+    "jazz-react": "link:../../packages/jazz-react",
     "lucide-react": "^0.436.0",
     "next": "14.2.7",
     "next-themes": "^0.2.1",

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

@@ -56,10 +56,10 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
 
     const variantClasses = {
       primary:
-        "bg-blue border-blue text-white font-medium bg-blue hover:bg-blue-800 hover:border-blue-800",
+        "bg-primary border border-primary text-white font-medium hover:bg-highlight hover:border-primary hover:text-primary dark:hover:bg-highlight dark:hover:text-primary",
       secondary:
-        "text-stone-900 border font-medium hover:border-stone-300 hover:dark:border-stone-700 dark:text-white",
-      tertiary: "text-blue underline underline-offset-4",
+        "text-stone-900 border font-medium hover:border-primary hover:text-primary hover:bg-highlight hover:dark:border-primary dark:text-white dark:hover:text-primary",
+      tertiary: "text-primary underline underline-offset-4",
       destructive:
         "bg-red-600 border-red-600 text-white font-medium hover:bg-red-700 hover:border-red-700",
     };
@@ -86,7 +86,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
           <ButtonIcon icon={icon} loading={loading} />
           {children}
           {newTab ? (
-            <span className="inline-block text-stone-300 dark:text-stone-700 relative -top-0.5 -left-2 -mr-2">
+            <span className="inline-block text-muted relative -top-0.5 -left-2 -mr-2">
               ⌝
             </span>
           ) : (

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

@@ -6,7 +6,7 @@ export function ComingSoonBadge({ when = "soon" }: { when?: string }) {
       className={clsx(
         "bg-stone-100 dark:bg-stone-900",
         "text-stone-500 dark:text-stone-400",
-        "border border-stone-300 dark:border-stone-700",
+        "border border-muted",
         "text-[0.6rem]",
         "px-1 py-0.5",
         "rounded-xl",

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

@@ -6,30 +6,9 @@ type HeadingProps = {
 } & React.ComponentPropsWithoutRef<"h1" | "h2" | "h3" | "h4" | "h5" | "h6">;
 
 const classes = {
-  1: [
-    "font-display",
-    "text-stone-950 dark:text-white",
-    "text-5xl lg:text-6xl",
-    "mb-3",
-    "font-medium",
-    "tracking-tighter",
-  ],
-  2: [
-    "font-display",
-    "text-stone-950 dark:text-white",
-    "text-2xl md:text-4xl",
-    "mb-2",
-    "font-semibold",
-    "tracking-tight",
-  ],
-  3: [
-    "font-display",
-    "text-stone-950 dark:text-white",
-    "text-xl md:text-2xl",
-    "mb-2",
-    "font-semibold",
-    "tracking-tight",
-  ],
+  1: ["text-5xl lg:text-6xl", "mb-3", "font-medium", "tracking-tighter"],
+  2: ["text-2xl md:text-4xl", "mb-2", "font-semibold", "tracking-tight"],
+  3: ["text-xl md:text-2xl", "mb-2", "font-semibold", "tracking-tight"],
   4: ["text-bold"],
   5: [],
   6: [],
@@ -44,5 +23,13 @@ export function Heading({
   let Element: `h${typeof level}` = `h${level}`;
   const size = customSize || level;
 
-  return <Element {...props} className={clsx(classes[size])} />;
+  return (
+    <Element
+      {...props}
+      className={clsx(
+        "text-stone-950 dark:text-white font-display",
+        classes[size],
+      )}
+    />
+  );
 }

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

@@ -4,6 +4,8 @@ import {
   ArrowRightIcon,
   BookTextIcon,
   BoxIcon,
+  BracesIcon,
+  Brackets,
   CheckIcon,
   ChevronDown,
   ChevronRight,
@@ -39,6 +41,8 @@ import {
   XIcon,
 } from "lucide-react";
 
+import { GcmpIcons } from "./icons";
+
 const icons = {
   arrowDown: ArrowDownIcon,
   arrowRight: ArrowRightIcon,
@@ -77,6 +81,12 @@ const icons = {
   zip: FolderArchiveIcon,
   warning: AlertTriangleIcon,
   info: InfoIcon,
+  cofeed: GcmpIcons.IconCoFeed,
+  corecord: GcmpIcons.IconCoRecord,
+  comap: BracesIcon,
+  colist: Brackets,
+  user: UserIcon,
+  group: UsersIcon,
 };
 
 // copied from tailwind line height https://tailwindcss.com/docs/font-size

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

@@ -12,7 +12,7 @@ export function Kicker({
     <Element
       className={clsx(
         className,
-        "uppercase text-blue tracking-widest text-sm font-medium dark:text-stone-400",
+        "uppercase text-primary tracking-widest text-sm font-medium",
       )}
     >
       {children}

homepage/design-system/src/app/components/atoms/covalues/CoFeeds.tsx

@@ -0,0 +1,65 @@
+import { CoFeed, CoMap } from "jazz-tools";
+import { CoMapVisualizer } from "./CoMap";
+
+interface CoFeedVisualizerProps<T extends CoFeed> {
+  instance: T;
+  showData?: boolean;
+  showMetadata?: boolean;
+  showChildMetadata?: boolean;
+  showAllEntries?: boolean;
+}
+
+export function CoFeedVisualizer<T extends CoFeed>({
+  instance,
+  showData = true,
+  showMetadata = false,
+  showChildMetadata = false,
+  showAllEntries = false,
+}: CoFeedVisualizerProps<T>) {
+  const currentAccountEntries = instance.byMe?.all || [];
+
+  return (
+    <div className="flex justify-center p-4">
+      <div className="bg-white rounded-lg p-6 min-w-[200px] shadow-md">
+        {showMetadata && (
+          <div className="text-stone-500 text-xs mb-4">coId: {instance.id}</div>
+        )}
+
+        {showAllEntries ? (
+          <div className="flex flex-col gap-4">
+            <h3 className="text-sm font-medium">All Entries:</h3>
+            <div className="flex flex-row gap-4 overflow-x-auto">
+              {Array.from(currentAccountEntries).map((entry, index, array) => {
+                const isLatest = index === array.length - 1;
+                return (
+                  <div
+                    key={index}
+                    className={`flex-none ${!isLatest ? "opacity-75" : ""}`}
+                  >
+                    <div className="text-stone-500 text-xs mb-2">{index}</div>
+                    <CoMapVisualizer
+                      instance={entry.value as CoMap}
+                      showData={showData}
+                      showMetadata={showChildMetadata}
+                    />
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        ) : (
+          <div className="flex flex-col gap-4">
+            <h3 className="text-sm font-medium">Latest Entry:</h3>
+            {instance.byMe?.value && (
+              <CoMapVisualizer
+                instance={instance.byMe.value as CoMap}
+                showData={showData}
+                showMetadata={showChildMetadata}
+              />
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

homepage/design-system/src/app/components/atoms/covalues/CoList.tsx

@@ -0,0 +1,38 @@
+import { CoList, CoMap } from "jazz-tools";
+import { CoMapVisualizer } from "./CoMap";
+
+interface CoListVisualizerProps<T extends CoList> {
+  instance: T;
+  showData?: boolean;
+  showMetadata?: boolean;
+  showChildMetadata?: boolean;
+}
+
+export function CoListVisualizer<T extends CoList>({
+  instance,
+  showData = true,
+  showMetadata = false,
+  showChildMetadata = false,
+}: CoListVisualizerProps<T>) {
+  return (
+    <div className="flex justify-center p-4">
+      <div className="bg-white rounded-lg p-6 min-w-[200px] shadow-md">
+        {showMetadata && (
+          <div className="text-stone-500 text-xs mb-4">coId: {instance.id}</div>
+        )}
+        <div className="flex flex-row gap-4 overflow-x-auto">
+          {instance.map((coMap, index) => (
+            <div key={index} className="flex-none">
+              <div className="text-stone-500 text-xs mb-2">{index}</div>
+              <CoMapVisualizer
+                instance={coMap}
+                showData={showData}
+                showMetadata={showChildMetadata}
+              />
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

homepage/design-system/src/app/components/atoms/covalues/CoMap.tsx

@@ -0,0 +1,36 @@
+import { CoMap } from "jazz-tools";
+
+interface CoMapVisualizerProps<T extends CoMap> {
+  instance: T;
+  showData?: boolean;
+  showMetadata?: boolean;
+}
+
+export function CoMapVisualizer<T extends CoMap>({
+  instance,
+  showData = true,
+  showMetadata = false,
+}: CoMapVisualizerProps<T>) {
+  return (
+    <div className="flex justify-center">
+      <div className="bg-black rounded p-2 min-w-[16px] min-h-[32px] shadow-md">
+        {showMetadata && (
+          <div className="text-white/50 text-xs mb-1">coId: {instance.id}</div>
+        )}
+        {showData && (
+          <ul className="list-none p-0 m-0">
+            {Object.entries(instance).map(([key, value]) => (
+              <li
+                key={key}
+                className="text-white font-mono py-0.5 flex justify-between border-b border-white/10 last:border-b-0 text-sm"
+              >
+                <span className="font-bold mr-2">{key}:</span>
+                <span>{String(value)}</span>
+              </li>
+            ))}
+          </ul>
+        )}
+      </div>
+    </div>
+  );
+}

homepage/design-system/src/app/components/atoms/icons/404.tsx

@@ -0,0 +1,30 @@
+import clsx from "clsx";
+
+export function Icon404({ className }: { className?: string }) {
+  return (
+    <svg
+      viewBox="0 0 556 517"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={clsx(className)}
+    >
+      <path
+        d="M449.244 300.893C406.744 291.059 313.398 281.691 246.244 308.893C167.244 340.893 125.077 395.393 108.244 417.893"
+        stroke="currentColor"
+        strokeWidth="20"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M137.404 194H118.997V295.03C117.252 293.83 115.333 292.831 113.284 292.066C108.621 290.324 103.49 289.869 98.54 290.756C93.5899 291.644 89.043 293.836 85.4742 297.053C81.9054 300.271 79.475 304.371 78.4903 308.834C77.5057 313.297 78.0111 317.924 79.9425 322.128C81.8739 326.332 85.1447 329.925 89.3411 332.454C93.5376 334.982 98.4713 336.331 103.518 336.331C122.233 336.331 137.403 321.161 137.403 302.446L137.404 301.191V194Z"
+        fill="currentColor"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M468.404 100H449.997V201.03C448.252 199.83 446.333 198.831 444.284 198.066C439.621 196.324 434.49 195.869 429.54 196.756C424.59 197.644 420.043 199.836 416.474 203.053C412.905 206.271 410.475 210.371 409.49 214.834C408.506 219.297 409.011 223.924 410.942 228.128C412.874 232.332 416.145 235.925 420.341 238.454C424.538 240.982 429.471 242.331 434.518 242.331C453.233 242.331 468.403 227.161 468.403 208.446L468.404 207.191V100Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}

homepage/design-system/src/app/components/atoms/icons/CoFeed.tsx

@@ -0,0 +1,29 @@
+import clsx from "clsx";
+
+export function IconCoFeed({
+  className,
+  size,
+  strokeWidth,
+}: { className?: string; size?: number; strokeWidth: number }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      className={className}
+      stroke="currentColor"
+      strokeWidth={strokeWidth}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M6.11606 5H5.29285C4.85619 5 4.43741 5.17426 4.12865 5.48444C3.81989 5.79462 3.64642 6.21532 3.64642 6.65399V10.789C3.64642 11.2276 3.47296 11.6483 3.1642 11.9585C2.85543 12.2687 2.43666 12.4429 2 12.4429C2.43666 12.4429 2.85543 12.6172 3.1642 12.9274C3.47296 13.2376 3.64642 13.6583 3.64642 14.0969V18.2319C3.64642 19.1416 4.38731 19.8859 5.29285 19.8859H6.11606" />
+      <path d="M17.8838 19.8859H18.707C19.1437 19.8859 19.5624 19.7116 19.8712 19.4014C20.18 19.0912 20.3534 18.6706 20.3534 18.2319V14.0969C20.3534 13.1872 21.0943 12.4429 21.9998 12.4429C21.5632 12.4429 21.1444 12.2687 20.8357 11.9585C20.5269 11.6483 20.3534 11.2276 20.3534 10.789V6.65399C20.3534 6.21532 20.18 5.79462 19.8712 5.48444C19.5624 5.17426 19.1437 5 18.707 5H17.8838" />
+      <path d="M13.522 17.4455V16.504C13.522 16.0046 13.3245 15.5257 12.973 15.1726C12.6215 14.8195 12.1448 14.6211 11.6477 14.6211H8.83623C8.33913 14.6211 7.86239 14.8195 7.51089 15.1726C7.15939 15.5257 6.96191 16.0046 6.96191 16.504V17.4455" />
+      <path d="M10.2415 11.7424C11.2767 11.7424 12.1158 10.8994 12.1158 9.85948C12.1158 8.81957 11.2767 7.97656 10.2415 7.97656C9.20635 7.97656 8.36719 8.81957 8.36719 9.85948C8.36719 10.8994 9.20635 11.7424 10.2415 11.7424Z" />
+      <path d="M16.7192 17.4438V16.5024C16.7189 16.0852 16.5807 15.6799 16.3262 15.3502C16.0718 15.0205 15.7156 14.785 15.3135 14.6807" />
+      <path d="M13.9082 8.03809C14.3114 8.14179 14.6687 8.37734 14.9239 8.70761C15.1791 9.03788 15.3176 9.44408 15.3176 9.86217C15.3176 10.2803 15.1791 10.6865 14.9239 11.0167C14.6687 11.347 14.3114 11.5825 13.9082 11.6862" />
+    </svg>
+  );
+}

homepage/design-system/src/app/components/atoms/icons/CoRecord.tsx

@@ -0,0 +1,29 @@
+import clsx from "clsx";
+
+export function IconCoRecord({
+  className,
+  size,
+  strokeWidth,
+}: { className?: string; size?: number; color?: string; strokeWidth: number }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      className={className}
+      stroke="currentColor"
+      strokeWidth={strokeWidth}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M6.11606 5H5.29285C4.85619 5 4.43741 5.17426 4.12865 5.48444C3.81989 5.79462 3.64642 6.21532 3.64642 6.65399V10.789C3.64642 11.2276 3.47296 11.6483 3.1642 11.9585C2.85543 12.2687 2.43666 12.4429 2 12.4429C2.43666 12.4429 2.85543 12.6172 3.1642 12.9274C3.47296 13.2376 3.64642 13.6583 3.64642 14.0969V18.2319C3.64642 19.1416 4.38731 19.8859 5.29285 19.8859H6.11606" />
+      <path d="M17.8838 19.8859H18.707C19.1437 19.8859 19.5624 19.7116 19.8712 19.4014C20.18 19.0912 20.3534 18.6706 20.3534 18.2319V14.0969C20.3534 13.1872 21.0943 12.4429 21.9998 12.4429C21.5632 12.4429 21.1444 12.2687 20.8357 11.9585C20.5269 11.6483 20.3534 11.2276 20.3534 10.789V6.65399C20.3534 6.21532 20.18 5.79462 19.8712 5.48444C19.5624 5.17426 19.1437 5 18.707 5H17.8838" />
+      <path d="M11.988 17.9839C15.0523 17.9839 17.5365 15.4884 17.5365 12.4099C17.5365 9.3315 15.0523 6.83594 11.988 6.83594C8.92361 6.83594 6.43945 9.3315 6.43945 12.4099C6.43945 15.4884 8.92361 17.9839 11.988 17.9839Z" />
+      <path d="M8.65918 12.4104C8.65918 11.4628 9.04758 10.6267 9.65791 10.0693" />
+      <path d="M11.9876 13.5245C12.6005 13.5245 13.0973 13.0254 13.0973 12.4097C13.0973 11.794 12.6005 11.2949 11.9876 11.2949C11.3748 11.2949 10.8779 11.794 10.8779 12.4097C10.8779 13.0254 11.3748 13.5245 11.9876 13.5245Z" />
+      <path d="M15.3171 12.4102C15.3171 13.3577 14.9287 14.1938 14.3184 14.7512" />
+    </svg>
+  );
+}

homepage/design-system/src/app/components/atoms/icons/index.tsx

@@ -0,0 +1,7 @@
+import { IconCoFeed } from "./CoFeed";
+import { IconCoRecord } from "./CoRecord";
+
+export const GcmpIcons = {
+  IconCoFeed,
+  IconCoRecord,
+};

homepage/design-system/src/app/components/atoms/logos/GardenLogo.tsx

@@ -14,14 +14,14 @@ export function GardenLogo({
       xmlns="http://www.w3.org/2000/svg"
       className={clsx(className, "text-black dark:text-white")}
     >
-      <g clip-path="url(#clip0_3069_1)">
+      <g clipPath="url(#clip0_3069_1)">
         <path
           d="M226.005 55.6V60.935C221.77 56.535 215.885 53.95 208.515 53.95C191.795 53.95 181.4 67.315 181.4 85.245C181.4 103.065 191.74 116.65 208.295 116.65C215.005 116.65 220.45 114.56 224.63 110.875V116.485C224.795 126.715 219.075 131.995 209.285 131.995C204.005 131.995 198.835 129.74 196.25 124.68L185.635 130.07C190.475 138.54 199.605 143.05 209.175 143.05C223.035 143.05 232.935 137.44 235.41 125.395C236.015 122.59 236.18 119.785 236.18 116.595V55.6H226.005ZM209.89 106.255C198.835 106.255 193.61 97.015 193.61 85.245C193.61 73.585 198.835 64.345 210.275 64.345C221.11 64.345 226.005 72.925 226.005 85.245C226.005 97.565 221.22 106.255 209.89 106.255ZM291.829 65.28C288.144 57.47 279.894 53.95 269.279 53.95C255.529 53.95 247.279 60.44 244.419 70.615L255.144 73.915C257.179 67.315 262.899 64.565 269.169 64.565C278.464 64.565 282.204 68.415 282.589 76.61C272.964 77.93 263.174 79.195 256.299 81.23C247.114 84.145 242.274 89.865 242.274 98.83C242.274 108.51 249.204 116.65 262.349 116.65C271.974 116.65 278.849 113.35 283.744 106.365V115H293.919V78.425C293.919 73.475 293.699 69.185 291.829 65.28ZM264.384 107.245C257.014 107.245 253.659 103.34 253.659 98.72C253.659 94.045 257.124 91.515 261.854 89.92C266.859 88.435 273.514 87.5 282.479 86.18C282.424 88.93 282.204 92.725 281.269 95.475C279.949 101.25 274.174 107.245 264.384 107.245ZM317.881 58.955C315.626 60.44 313.756 62.585 312.381 65.06V55.6H302.151V115H313.756V85.025C313.756 78.04 315.626 71.77 321.236 68.195C325.196 65.665 330.366 65.335 334.216 66.38V55.6C328.881 54.61 322.336 55.655 317.881 58.955ZM377.551 35.8V59.67C373.426 56.04 368.036 53.95 361.381 53.95C344.661 53.95 334.266 67.315 334.266 85.245C334.266 103.065 344.606 116.65 361.161 116.65C368.641 116.65 374.581 114.01 378.871 109.555V115H389.101V35.8H377.551ZM362.756 106.255C351.701 106.255 346.476 97.015 346.476 85.245C346.476 73.585 351.701 64.345 363.141 64.345C373.976 64.345 378.871 72.925 378.871 85.245C378.871 97.565 374.086 106.255 362.756 106.255ZM407.459 88.545H451.734C452.944 67.26 442.384 53.95 424.234 53.95C406.854 53.95 395.139 66.325 395.139 85.795C395.139 104.165 407.019 116.65 424.784 116.65C436.279 116.65 446.344 110.545 450.964 99.93L439.689 96.355C436.774 102.46 431.384 105.815 424.234 105.815C414.224 105.815 408.394 99.6 407.459 88.545ZM424.674 64.125C433.804 64.125 438.754 69.075 439.964 79.58H407.734C409.219 69.515 414.884 64.125 424.674 64.125ZM486.278 54.005C477.698 54.005 470.988 57.195 466.643 62.695V55.6H456.358V115H468.018V84.09C468.018 70.01 474.838 64.895 483.088 64.895C495.738 64.895 498.103 76.555 498.103 85.795V115H509.763V82C509.763 72.815 506.738 54.005 486.278 54.005Z"
           fill="currentColor"
         />
         <path
-          fill-rule="evenodd"
-          clip-rule="evenodd"
+          fillRule="evenodd"
+          clipRule="evenodd"
           d="M129.988 44.3845C130.172 44.2449 130.355 44.1054 130.539 43.9661L130.658 44.0735C130.434 44.1767 130.211 44.2804 129.988 44.3845ZM39.0525 139.076L45.3628 139.076C49.6432 131.896 54.1741 124.911 58.9404 118.13L57.3623 112.133H52.1219C46.8244 120.321 42.1253 128.999 38.102 138.123L39.0525 139.076Z"
           fill={monochrome ? "currentColor" : "#42BB69"}
         />

homepage/design-system/src/app/components/atoms/logos/JazzLogo.tsx

@@ -1,12 +1,18 @@
 import { clsx } from "clsx";
 
-export function JazzLogo({ className }: { className?: string }) {
+export function JazzLogo({
+  className,
+  width = undefined,
+  height = undefined,
+}: { className?: string; width?: number; height?: number }) {
   return (
     <svg
       viewBox="0 0 386 146"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       className={clsx(className, "text-black dark:text-white")}
+      width={width}
+      height={height}
     >
       <path
         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"
@@ -16,7 +22,7 @@ export function JazzLogo({ className }: { className?: string }) {
         fillRule="evenodd"
         clipRule="evenodd"
         d="M136.179 44.8277C136.179 44.8277 136.179 44.8277 136.179 44.8276V21.168C117.931 28.5527 97.9854 32.6192 77.0897 32.6192C65.1466 32.6192 53.5138 31.2908 42.331 28.7737V51.4076C42.331 51.4076 42.331 51.4076 42.331 51.4076V81.1508C41.2955 80.4385 40.1568 79.8458 38.9405 79.3915C36.1732 78.358 33.128 78.0876 30.1902 78.6145C27.2524 79.1414 24.5539 80.4419 22.4358 82.3516C20.3178 84.2613 18.8754 86.6944 18.291 89.3433C17.7066 91.9921 18.0066 94.7377 19.1528 97.2329C20.2991 99.728 22.2403 101.861 24.7308 103.361C27.2214 104.862 30.1495 105.662 33.1448 105.662H33.1455C33.6061 105.662 33.8365 105.662 34.0314 105.659C44.5583 105.449 53.042 96.9656 53.2513 86.4386C53.2534 86.3306 53.2544 86.2116 53.2548 86.0486H53.2552V85.7149L53.2552 85.5521V82.0762L53.2552 53.1993C61.0533 54.2324 69.0092 54.7656 77.0897 54.7656C77.6696 54.7656 78.2489 54.7629 78.8276 54.7574V110.696C77.792 109.983 76.6533 109.391 75.437 108.936C72.6697 107.903 69.6246 107.632 66.6867 108.159C63.7489 108.686 61.0504 109.987 58.9323 111.896C56.8143 113.806 55.3719 116.239 54.7875 118.888C54.2032 121.537 54.5031 124.283 55.6494 126.778C56.7956 129.273 58.7368 131.405 61.2273 132.906C63.7179 134.406 66.646 135.207 69.6414 135.207C70.1024 135.207 70.3329 135.207 70.5279 135.203C81.0548 134.994 89.5385 126.51 89.7478 115.983C89.7517 115.788 89.7517 115.558 89.7517 115.097V111.621L89.7517 54.3266C101.962 53.4768 113.837 51.4075 125.255 48.2397V80.9017C124.219 80.1894 123.081 79.5966 121.864 79.1424C119.097 78.1089 116.052 77.8384 113.114 78.3653C110.176 78.8922 107.478 80.1927 105.36 82.1025C103.242 84.0122 101.799 86.4453 101.215 89.0941C100.631 91.743 100.931 94.4886 102.077 96.9837C103.223 99.4789 105.164 101.612 107.655 103.112C110.145 104.612 113.073 105.413 116.069 105.413C116.53 105.413 116.76 105.413 116.955 105.409C127.482 105.2 135.966 96.7164 136.175 86.1895C136.179 85.9945 136.179 85.764 136.179 85.3029V81.8271L136.179 44.8277Z"
-        fill="#3313F7"
+        className="fill-primary"
       />
     </svg>
   );

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

@@ -34,7 +34,7 @@ export function CopyButton({
           : "bg-white/5 hover:bg-white/7.5 dark:bg-white/2.5 dark:hover:bg-white/5",
         size == "md"
           ? "right-[8.5px] top-[8.5px] py-[2px] pl-1 pr-2"
-          : "right-2 top-2 py-1 pl-2 pr-3 ",
+          : "right-2 top-2 py-1 pl-2 pr-3",
       )}
       onClick={() => {
         window.navigator.clipboard.writeText(code).then(() => {

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

@@ -21,7 +21,7 @@ export function FeatureCard({
       {icon && (
         <Icon
           name={icon}
-          className="text-blue p-1.5 rounded-lg bg-blue-50 dark:text-blue-500 dark:bg-stone-900 mb-2.5"
+          className="text-primary p-1.5 rounded-lg bg-blue-50 dark:bg-stone-900 mb-2.5"
           size="3xl"
         />
       )}

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

@@ -33,7 +33,7 @@ export function Select(
 
         <Icon
           name="chevronDown"
-          className="absolute right-[0.5em] text-stone-400 dark:text-stone-600"
+          className="absolute right-[0.5em] text-muted"
           size="xs"
         />
       </div>

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

@@ -16,7 +16,7 @@ export function Testimonial({
   return (
     <figure className={clsx("max-w-2xl", className)}>
       <svg
-        className={clsx("text-blue", {
+        className={clsx("text-primary", {
           "size-8": size === "md",
           "size-6": size === "sm",
         })}
@@ -27,7 +27,7 @@ export function Testimonial({
         <path d="M9.352 4C4.456 7.456 1 13.12 1 19.36c0 5.088 3.072 8.064 6.624 8.064 3.36 0 5.856-2.688 5.856-5.856 0-3.168-2.208-5.472-5.088-5.472-.576 0-1.344.096-1.536.192.48-3.264 3.552-7.104 6.624-9.024L9.352 4zm16.512 0c-4.8 3.456-8.256 9.12-8.256 15.36 0 5.088 3.072 8.064 6.624 8.064 3.264 0 5.856-2.688 5.856-5.856 0-3.168-2.304-5.472-5.184-5.472-.576 0-1.248.096-1.44.192.48-3.264 3.456-7.104 6.528-9.024L25.864 4z"></path>
       </svg>
       <blockquote
-        className={clsx("text-balance text-stone-900 dark:text-white", {
+        className={clsx("text-balance text-highlight", {
           "mt-6 font-medium sm:text-lg leading-8 space-y-3": size === "md",
           "mt-4 leading-relaxed space-y-3": size === "sm",
         })}
@@ -41,9 +41,7 @@ export function Testimonial({
         })}
       >
         <div className="text-sm leading-6 sm:text-base">
-          <div className="font-semibold text-stone-900 dark:text-white">
-            {name}
-          </div>
+          <div className="font-semibold text-highlight">{name}</div>
           <div className="mt-0.5 text-stone-600 dark:text-stone-500">
             {role}
           </div>

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

@@ -23,7 +23,7 @@ export function ThemeToggle({
       className={clsx(
         className,
         "md:p-1.5 md:rounded-full md:border",
-        "text-stone-400 hover:text-stone-900 dark:text-stone-400 dark:hover:text-white",
+        "text-stone-400 hover:text-stone-900 dark:hover:text-white",
         "md:hover:bg-stone-200 md:dark:hover:bg-stone-900",
         "transition-colors",
       )}

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

@@ -64,7 +64,7 @@ export function DialogTitle({
       {...props}
       className={clsx(
         className,
-        "text-balance text-lg/6 font-semibold text-stone-900 dark:text-white",
+        "text-balance text-lg/6 font-semibold text-highlight",
       )}
     />
   );

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

@@ -64,7 +64,7 @@ export function DropdownItem({
     // Text styles
     "text-left text-sm/6 dark:text-white forced-colors:text-[CanvasText]",
     // Focus
-    "data-[focus]:bg-stone-100 dark:data-[focus]:bg-stone-900 ",
+    "data-[focus]:bg-stone-100 dark:data-[focus]:bg-stone-900",
     // Disabled state
     "data-[disabled]:opacity-50",
     // Forced colors mode
@@ -73,7 +73,7 @@ export function DropdownItem({
     "col-span-full grid grid-cols-[auto_1fr_1.5rem_0.5rem_auto] items-center",
     // Icons
     "[&>[data-slot=icon]]:col-start-1 [&>[data-slot=icon]]:row-start-1 [&>[data-slot=icon]]:-ml-0.5 [&>[data-slot=icon]]:mr-2.5 [&>[data-slot=icon]]:size-5 sm:[&>[data-slot=icon]]:mr-2 [&>[data-slot=icon]]:sm:size-4",
-    "[&>[data-slot=icon]]:text-stone-500 [&>[data-slot=icon]]:data-[focus]:text-white [&>[data-slot=icon]]:dark:text-stone-400 [&>[data-slot=icon]]:data-[focus]:dark:text-white",
+    "[&>[data-slot=icon]]:text-stone-500 [&>[data-slot=icon]]:data-[focus]:text-white [&>[data-slot=icon]]: [&>[data-slot=icon]]:data-[focus]:dark:text-white",
     // Avatar
     "[&>[data-slot=avatar]]:mr-2.5 [&>[data-slot=avatar]]:size-6 sm:[&>[data-slot=avatar]]:mr-2 sm:[&>[data-slot=avatar]]:size-5",
   );
@@ -133,7 +133,7 @@ export function DropdownHeading({
       {...props}
       className={clsx(
         className,
-        "col-span-full grid grid-cols-[1fr,auto] gap-x-12 px-3.5 pb-1 pt-2 text-sm/5 font-medium text-stone-500 sm:px-3 sm:text-xs/5 dark:text-stone-400",
+        "col-span-full grid grid-cols-[1fr,auto] gap-x-12 px-3.5 pb-1 pt-2 text-sm/5 font-medium text-stone-500 sm:px-3 sm:text-xs/5",
       )}
     />
   );
@@ -165,10 +165,7 @@ export function DropdownLabel({
     <Headless.Label
       {...props}
       data-slot="label"
-      className={clsx(
-        className,
-        "text-stone-900 dark:text-white col-start-2 row-start-1",
-      )}
+      className={clsx(className, "text-highlight col-start-2 row-start-1")}
       {...props}
     />
   );
@@ -187,7 +184,7 @@ export function DropdownDescription({
       {...props}
       className={clsx(
         className,
-        "col-span-2 col-start-2 row-start-2 text-sm/5 text-stone-500 group-data-[focus]:text-white sm:text-xs/5 dark:text-stone-400 forced-colors:group-data-[focus]:text-[HighlightText]",
+        "col-span-2 col-start-2 row-start-2 text-sm/5 text-stone-500 group-data-[focus]:text-white sm:text-xs/5  forced-colors:group-data-[focus]:text-[HighlightText]",
       )}
     />
   );

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

@@ -46,9 +46,7 @@ export function Footer({
         </div>
         <div className="grid gap-y-8 grid-cols-12">
           <div className="flex flex-col gap-4 col-span-full md:col-span-8">
-            <p className="font-medium text-stone-900 dark:text-white">
-              Stay up to date
-            </p>
+            <p className="font-medium text-highlight">Stay up to date</p>
             <NewsletterForm />
           </div>
 
@@ -57,7 +55,9 @@ export function Footer({
               key={index}
               className="flex flex-col gap-2 text-sm col-span-6 md:col-span-2"
             >
-              <h2 className="font-medium">{section.title}</h2>
+              <h2 className="font-medium dark:text-muted cursor-default">
+                {section.title}
+              </h2>
               {section.links.map((link, linkIndex) => (
                 <FooterLink
                   key={linkIndex}
@@ -112,7 +112,7 @@ function FooterLink({
     >
       {children}
       {newTab ? (
-        <span className="inline-block text-stone-300 dark:text-stone-700 relative -top-0.5 -left-0.5 -mr-2">
+        <span className="inline-block text-muted relative -top-0.5 -left-0.5 -mr-2">
           ⌝
         </span>
       ) : (

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

@@ -11,13 +11,14 @@ import clsx from "clsx";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { ComponentType, ReactNode, useEffect, useState } from "react";
+import React from "react";
 import { isActive } from "../../utils/nav";
 import { Icon } from "../atoms/Icon";
 import type { IconName } from "../atoms/Icon";
 import { BreadCrumb } from "../molecules/Breadcrumb";
 import { SocialLinks, SocialLinksProps } from "./SocialLinks";
 
-type NavItemProps = {
+export type NavItemProps = {
   href: string;
   icon?: IconName;
   title: string;
@@ -34,6 +35,7 @@ type NavProps = {
   socials?: SocialLinksProps;
   themeToggle: ComponentType<{ className?: string }>;
   sections?: NavSection[];
+  hideMobileNav?: boolean;
 };
 
 export type NavSection = {
@@ -68,9 +70,9 @@ function NavItem({
       <NavLink
         className={clsx(
           className,
-          "text-sm px-2 lg:px-4 py-3 ",
+          "text-sm px-2 lg:px-4 py-3",
           firstOnRight && "ml-auto",
-          active ? "text-stone-900 dark:text-white" : "",
+          active ? "text-highlight" : "",
         )}
         {...item}
       >
@@ -84,7 +86,7 @@ function NavItem({
       <PopoverButton
         className={clsx(
           "flex items-center gap-1.5 text-sm px-2 lg:px-4 py-3 max-sm:w-full hover:text-stone-900 dark:hover:text-white transition-colors hover:transition-none focus-visible:outline-none",
-          active ? "text-stone-900 dark:text-white" : "",
+          active ? "text-highlight" : "",
         )}
       >
         <span>{title}</span>
@@ -113,9 +115,7 @@ function NavItem({
                   />
                 )}
                 <div className="grid gap-1.5 mt-px">
-                  <p className="text-sm font-medium text-stone-900 dark:text-white">
-                    {title}
-                  </p>
+                  <p className="text-sm font-medium text-highlight">{title}</p>
                   <p className="text-sm leading-relaxed">{description}</p>
                 </div>
               </CloseButton>
@@ -130,11 +130,13 @@ function NavItem({
 export function MobileNav({
   mainLogo,
   items,
-  cta,
   socials,
   sections,
   themeToggle: ThemeToggle,
-}: NavProps) {
+  navBarClassName,
+}: NavProps & {
+  navBarClassName?: string;
+}) {
   const primarySection: {
     name: string;
     icon: IconName;
@@ -185,9 +187,15 @@ export function MobileNav({
   };
 
   const navSections = [primarySection, ...(sections || [])];
+
   return (
     <>
-      <div className="md:hidden px-4 flex items-center self-stretch dark:text-white">
+      <div
+        className={clsx(
+          "md:hidden px-4 flex items-center self-stretch dark:text-white",
+          navBarClassName,
+        )}
+      >
         <NavLinkLogo prominent href="/" className="mr-auto">
           {mainLogo}
         </NavLinkLogo>
@@ -217,13 +225,9 @@ export function MobileNav({
         className={clsx(
           "md:hidden bg-white border fixed z-50",
           "dark:bg-stone-925",
-
-          {
-            "rounded-lg right-6 left-6 bottom-6 sm:max-w-lg sm:w-full shadow-md sm:left-1/2 sm:-translate-x-1/2 ":
-              !!active,
-            "rounded-full shadow-sm left-1/2 -translate-x-1/2  bottom-7":
-              !active,
-          },
+          active
+            ? "rounded-lg right-6 left-6 bottom-6 sm:max-w-lg sm:w-full shadow-md sm:left-1/2 sm:-translate-x-1/2 "
+            : "rounded-full shadow-sm left-1/2 -translate-x-1/2  bottom-7",
         )}
       >
         {active && (
@@ -234,7 +238,11 @@ export function MobileNav({
             )}
           >
             {navSections.map((section) =>
-              section.name == active ? section.content : null,
+              section.name == active ? (
+                <React.Fragment key={section.name}>
+                  {section.content}
+                </React.Fragment>
+              ) : null,
             )}
           </div>
         )}
@@ -251,7 +259,7 @@ export function MobileNav({
                   type="button"
                   className={clsx(
                     "flex items-center gap-1 px-2 py-1 text-sm rounded-md whitespace-nowrap",
-                    "text-stone-900 dark:text-white",
+                    "text-highlight",
                     {
                       "bg-stone-100 dark:bg-stone-900": active === section.name,
                     },
@@ -297,7 +305,7 @@ function NavLink({
     >
       {children}
       {newTab ? (
-        <span className="inline-block text-stone-300 dark:text-stone-700 relative -top-0.5 -left-0.5 -mr-2">
+        <span className="inline-block text-muted relative -top-0.5 -left-0.5 -mr-2">
           ⌝
         </span>
       ) : (
@@ -337,7 +345,7 @@ function NavLinkLogo({
 }
 
 export function Nav(props: NavProps) {
-  const { mainLogo, items, cta } = props;
+  const { mainLogo, items, cta, hideMobileNav } = props;
   return (
     <>
       <div className="w-full border-b py-2 sticky top-0 z-50 bg-white dark:bg-stone-950 hidden md:block">
@@ -364,7 +372,7 @@ export function Nav(props: NavProps) {
           {cta}
         </PopoverGroup>
       </div>
-      <MobileNav {...props} />
+      {!hideMobileNav && <MobileNav {...props} />}
     </>
   );
 }

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

@@ -0,0 +1,49 @@
+import { readFile } from "node:fs/promises";
+import { join } from "node:path";
+import { ImageResponse } from "next/og";
+import { JazzLogo } from "../atoms/logos/JazzLogo";
+
+export const imageSize = {
+  width: 1200,
+  height: 630,
+};
+
+export const imageContentType = "image/png";
+
+export default async function OpenGraphImage({ title }: { title: string }) {
+  const manropeSemiBold = await readFile(
+    join(process.cwd(), "public/fonts/Manrope-SemiBold.ttf"),
+  );
+
+  return new ImageResponse(
+    <div
+      style={{
+        fontSize: "7em",
+        background: "white",
+        width: "100%",
+        height: "100%",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "flex-start",
+        padding: "77px",
+        letterSpacing: "-0.05em",
+      }}
+    >
+      {title}
+      <div
+        style={{ display: "flex", position: "absolute", bottom: 35, right: 45 }}
+      >
+        <JazzLogo width={193} height={73} />
+      </div>
+    </div>,
+    {
+      ...imageSize,
+      fonts: [
+        {
+          name: "Manrope",
+          data: manropeSemiBold,
+        },
+      ],
+    },
+  );
+}

homepage/design-system/src/app/covalues/layout.tsx

@@ -0,0 +1,11 @@
+"use client";
+
+import { JazzProvider } from "jazz-react";
+
+export default function CovaluesLayout({
+  children,
+}: {
+  children: any;
+}) {
+  return <JazzProvider sync={{ when: "never" }}>{children}</JazzProvider>;
+}

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

@@ -0,0 +1,72 @@
+"use client";
+
+import { CoFeed } from "jazz-tools";
+import { CoFeedVisualizer } from "../components/atoms/covalues/CoFeeds";
+import { CoListVisualizer } from "../components/atoms/covalues/CoList";
+import { CoMapVisualizer } from "../components/atoms/covalues/CoMap";
+import { ListOfPeople, Person, PersonFeed } from "./schema";
+
+export default function Playground() {
+  const examplePersonA = Person.create({
+    name: "John",
+    age: 20,
+    height: 180,
+    weight: 70,
+  });
+
+  const examplePersonB = Person.create({
+    name: "Jane",
+    age: 21,
+    height: 170,
+    weight: 60,
+  });
+
+  const examplePersonList = ListOfPeople.create([
+    examplePersonA,
+    examplePersonB,
+  ]);
+
+  const examplePersonFeed = PersonFeed.create([]);
+  examplePersonFeed.push(Person.create({ name: "John", age: 5 }));
+  examplePersonFeed.push(Person.create({ name: "John", age: 10 }));
+  examplePersonFeed.push(Person.create({ name: "John", age: 15 }));
+  examplePersonFeed.push(Person.create({ name: "John", age: 20 }));
+
+  return (
+    <div className="p-8">
+      <h1 className="text-2xl font-bold mb-4">
+        CoValues Visualizer Playground
+      </h1>
+      <div className="mb-8">
+        <h2 className="text-xl font-semibold mb-2">CoMaps</h2>
+        <div className="flex flex-col gap-4">
+          <CoMapVisualizer instance={examplePersonA} />
+          <CoMapVisualizer instance={examplePersonA} showMetadata={true} />
+          <CoMapVisualizer instance={examplePersonA} showData={false} />
+        </div>
+      </div>
+      <div className="mb-8">
+        <h2 className="text-xl font-semibold mb-2">CoLists</h2>
+        <div className="flex flex-col gap-4">
+          <CoListVisualizer instance={examplePersonList} />
+          <CoListVisualizer instance={examplePersonList} showMetadata={true} />
+          <CoListVisualizer instance={examplePersonList} showData={false} />
+        </div>
+      </div>
+      <div className="mb-8">
+        <h2 className="text-xl font-semibold mb-2">CoFeeds</h2>
+        <div className="flex flex-col gap-4">
+          <CoFeedVisualizer
+            instance={examplePersonFeed}
+            showAllEntries={true}
+          />
+          <CoFeedVisualizer
+            instance={examplePersonFeed}
+            showAllEntries={true}
+            showData={false}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}