fix(jazz-tools): add a bundle step to not expose the circular deps to users

Version Packages

.changeset/odd-numbers-mix.md

@@ -0,0 +1,5 @@
+---
+"jazz-tools": patch
+---
+
+Add a bundle step to not expose the circular deps to the lib consumers

.changeset/ten-toes-cross.md

@@ -0,0 +1,5 @@
+---
+"jazz-tools": patch
+---
+
+Reduce the amount of circular deps

.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/music-player", "examples/pets", "examples/onboarding"]
+        project: ["tests/e2e", "examples/chat", "examples/file-share-svelte", "examples/form", "examples/music-player", "examples/pets", "examples/onboarding"]
 
     steps:
       - uses: actions/checkout@v3
@@ -45,10 +45,6 @@ jobs:
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
 
-      - name: Setup .env
-        run: echo "VITE_WS_PEER=ws://localhost:4200/" >> .env
-        working-directory: ./${{ matrix.project }}
-
       - name: Pnpm Build
         run: pnpm turbo build
         working-directory: ./${{ matrix.project }}

.github/workflows/release.yml

@@ -4,6 +4,13 @@ on:
   push:
     branches:
       - main
+  workflow_dispatch:
+    inputs:
+      debug_enabled:
+        type: boolean
+        description: "Run tmate session for debugging"
+        required: false
+        default: false
 
 concurrency: ${{ github.workflow }}-${{ github.ref }}
 
@@ -48,4 +55,11 @@ jobs:
           publish: pnpm release
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+
+      # Enable tmate debugging only if the workflow is manually triggered, debug_enabled is true, and the workflow failed
+      - name: Setup tmate session for debugging
+        if: ${{ failure() && github.event_name == 'workflow_dispatch' && inputs.debug_enabled }}
+        uses: mxschmitt/action-tmate@v3
+        with:
+          timeout-minutes: 15

examples/book-shelf/CHANGELOG.md

@@ -1,5 +1,28 @@
 # jazz-example-book-shelf
 
+## 0.1.34
+
+### Patch Changes
+
+- jazz-react@0.8.44
+- jazz-tools@0.8.44
+- jazz-browser-media-images@0.8.44
+
+## 0.1.33
+
+### Patch Changes
+
+- jazz-react@0.8.41
+- jazz-tools@0.8.41
+- jazz-browser-media-images@0.8.41
+
+## 0.1.32
+
+### Patch Changes
+
+- jazz-browser-media-images@0.8.40
+- jazz-react@0.8.40
+
 ## 0.1.31
 
 ### Patch Changes

examples/book-shelf/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jazz-example-book-shelf",
-  "version": "0.1.31",
+  "version": "0.1.34",
   "private": true,
   "scripts": {
     "dev": "next dev",
@@ -11,9 +11,9 @@
   },
   "dependencies": {
     "clsx": "^2.0.0",
-    "jazz-browser-media-images": "workspace:0.8.39",
-    "jazz-react": "workspace:0.8.39",
-    "jazz-tools": "workspace:0.8.39",
+    "jazz-browser-media-images": "workspace:0.8.44",
+    "jazz-react": "workspace:0.8.44",
+    "jazz-tools": "workspace:0.8.44",
     "next": "14.2.5",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"

examples/book-shelf/vercel.json

@@ -0,0 +1,8 @@
+{
+  "build": {
+    "env": {
+      "APP_NAME": "books-demo"
+    }
+  },
+  "ignoreCommand": "node ../../ignore-vercel-build.js"
+}

examples/chat-rn-clerk/CHANGELOG.md

@@ -1,5 +1,31 @@
 # chat-rn-clerk
 
+## 1.0.34
+
+### Patch Changes
+
+- jazz-react-native@0.8.44
+- jazz-react-native-auth-clerk@0.8.44
+- jazz-tools@0.8.44
+- jazz-react-native-media-images@0.8.44
+
+## 1.0.33
+
+### Patch Changes
+
+- cdc7f9f: Fixing react-native examples
+- Updated dependencies [cdc7f9f]
+  - jazz-react-native-auth-clerk@0.8.43
+
+## 1.0.32
+
+### Patch Changes
+
+- jazz-react-native@0.8.41
+- jazz-react-native-auth-clerk@0.8.41
+- jazz-tools@0.8.41
+- jazz-react-native-media-images@0.8.41
+
 ## 1.0.31
 
 ### Patch Changes

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

@@ -1,3 +1,4 @@
+import "../global.css";
 import { ClerkLoaded, ClerkProvider } from "@clerk/clerk-expo";
 import { useFonts } from "expo-font";
 import { Slot } from "expo-router";

examples/chat-rn-clerk/babel.config.js

@@ -1,7 +1,9 @@
 module.exports = function (api) {
   api.cache(true);
   return {
-    presets: ["babel-preset-expo"],
-    plugins: ["nativewind/babel"],
+    presets: [
+      ["babel-preset-expo", { jsxImportSource: "nativewind" }],
+      "nativewind/babel",
+    ],
   };
 };

examples/chat-rn-clerk/global.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

examples/chat-rn-clerk/metro.config.js

@@ -1,5 +1,6 @@
 // Learn more https://docs.expo.dev/guides/monorepos
 const { getDefaultConfig } = require("expo/metro-config");
+const { withNativeWind } = require("nativewind/metro");
 const { FileStore } = require("metro-cache");
 const path = require("path");
 
@@ -31,4 +32,5 @@ config.cacheStores = [
   }),
 ];
 
-module.exports = config;
+// module.exports = config;
+module.exports = withNativeWind(config, { input: "./global.css" });

examples/chat-rn-clerk/package.json

@@ -1,7 +1,7 @@
 {
   "name": "chat-rn-clerk",
   "main": "index.js",
-  "version": "1.0.31",
+  "version": "1.0.34",
   "scripts": {
     "build": "expo export -p ios",
     "start": "expo start",
@@ -45,7 +45,7 @@
     "jazz-react-native-auth-clerk": "workspace:*",
     "jazz-react-native-media-images": "workspace:*",
     "jazz-tools": "workspace:*",
-    "nativewind": "^2.0.11",
+    "nativewind": "^4.1.21",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-native": "~0.76.3",
@@ -70,7 +70,7 @@
     "jest": "^29.2.1",
     "jest-expo": "~52.0.2",
     "react-test-renderer": "18.2.0",
-    "tailwindcss": "^3.4.9",
+    "tailwindcss": "^3.4.15",
     "typescript": "~5.6.2"
   },
   "private": true

examples/chat-rn-clerk/tailwind.config.js

@@ -0,0 +1,14 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  // NOTE: Update this to include the paths to all of your component files.
+  content: [
+    "./app/**/*.{js,jsx,ts,tsx}",
+    "./components/**/*.{js,jsx,ts,tsx}",
+    "./src/**/*.{js,jsx,ts,tsx}",
+  ],
+  presets: [require("nativewind/preset")],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};

examples/chat-rn-clerk/tailwind.config.ts

@@ -1,15 +0,0 @@
-import type { Config } from "tailwindcss";
-
-const config: Config = {
-  content: [
-    "./app/**/*.{js,jsx,ts,tsx}",
-    "./components/**/*.{js,jsx,ts,tsx}",
-    "./src/**/*.{js,jsx,ts,tsx}",
-  ],
-  theme: {
-    extend: {},
-  },
-  plugins: [],
-};
-
-export default config;

examples/chat-rn-clerk/tsconfig.json

@@ -7,5 +7,5 @@
       "@/*": ["./*"]
     }
   },
-  "include": ["**/*.ts", "**/*.tsx"]
+  "include": ["**/*.ts", "**/*.tsx", "nativewind-env.d.ts"]
 }

examples/chat-rn/CHANGELOG.md

@@ -1,5 +1,19 @@
 # chat-rn
 
+## 1.0.31
+
+### Patch Changes
+
+- jazz-react-native@0.8.44
+- jazz-tools@0.8.44
+
+## 1.0.30
+
+### Patch Changes
+
+- jazz-react-native@0.8.41
+- jazz-tools@0.8.41
+
 ## 1.0.29
 
 ### Patch Changes

examples/chat-rn/package.json

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

examples/chat-vue/CHANGELOG.md

@@ -1,5 +1,29 @@
 # chat-vue
 
+## 0.0.25
+
+### Patch Changes
+
+- jazz-browser@0.8.44
+- jazz-tools@0.8.44
+- jazz-vue@0.8.44
+
+## 0.0.24
+
+### Patch Changes
+
+- Updated dependencies [ac216b9]
+  - jazz-browser@0.8.41
+  - jazz-tools@0.8.41
+  - jazz-vue@0.8.41
+
+## 0.0.23
+
+### Patch Changes
+
+- jazz-browser@0.8.40
+- jazz-vue@0.8.40
+
 ## 0.0.22
 
 ### Patch Changes

examples/chat-vue/package.json

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

examples/chat/CHANGELOG.md

@@ -1,5 +1,34 @@
 # jazz-example-chat
 
+## 0.0.120
+
+### Patch Changes
+
+- Updated dependencies [5d20c81]
+  - cojson@0.8.44
+  - jazz-react@0.8.44
+  - jazz-tools@0.8.44
+  - jazz-browser-media-images@0.8.44
+
+## 0.0.119
+
+### Patch Changes
+
+- Updated dependencies [3252502]
+- Updated dependencies [6370348]
+- Updated dependencies [ac216b9]
+  - cojson@0.8.41
+  - jazz-react@0.8.41
+  - jazz-tools@0.8.41
+  - jazz-browser-media-images@0.8.41
+
+## 0.0.118
+
+### Patch Changes
+
+- jazz-browser-media-images@0.8.40
+- jazz-react@0.8.40
+
 ## 0.0.117
 
 ### Patch Changes

examples/chat/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jazz-example-chat",
   "private": true,
-  "version": "0.0.117",
+  "version": "0.0.120",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -18,11 +18,11 @@
     "@radix-ui/react-toast": "^1.1.4",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
-    "cojson": "workspace:0.8.39",
+    "cojson": "workspace:0.8.44",
     "hash-slash": "workspace:0.2.1",
-    "jazz-browser-media-images": "workspace:0.8.39",
-    "jazz-react": "workspace:0.8.39",
-    "jazz-tools": "workspace:0.8.39",
+    "jazz-browser-media-images": "workspace:0.8.44",
+    "jazz-react": "workspace:0.8.44",
+    "jazz-tools": "workspace:0.8.44",
     "lucide-react": "^0.274.0",
     "qrcode": "^1.5.3",
     "react": "^18.3.1",

examples/chat/vercel.json

@@ -0,0 +1,8 @@
+{
+  "build": {
+    "env": {
+      "APP_NAME": "jazz-chat"
+    }
+  },
+  "ignoreCommand": "node ../../ignore-vercel-build.js"
+}

examples/clerk/CHANGELOG.md

@@ -1,5 +1,28 @@
 # minimal-auth-clerk
 
+## 0.0.19
+
+### Patch Changes
+
+- jazz-react@0.8.44
+- jazz-react-auth-clerk@0.8.44
+- jazz-tools@0.8.44
+
+## 0.0.18
+
+### Patch Changes
+
+- jazz-react@0.8.41
+- jazz-react-auth-clerk@0.8.41
+- jazz-tools@0.8.41
+
+## 0.0.17
+
+### Patch Changes
+
+- jazz-react@0.8.40
+- jazz-react-auth-clerk@0.8.40
+
 ## 0.0.16
 
 ### Patch Changes

examples/clerk/package.json

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

examples/clerk/vercel.json

@@ -0,0 +1,8 @@
+{
+  "build": {
+    "env": {
+      "APP_NAME": "clerk-demo"
+    }
+  },
+  "ignoreCommand": "node ../../ignore-vercel-build.js"
+}

examples/file-share-svelte/CHANGELOG.md

@@ -1,5 +1,25 @@
 # file-share-svelte
 
+## 0.0.5
+
+### Patch Changes
+
+- jazz-tools@0.8.44
+- jazz-svelte@0.8.44
+
+## 0.0.4
+
+### Patch Changes
+
+- jazz-tools@0.8.41
+- jazz-svelte@0.8.41
+
+## 0.0.3
+
+### Patch Changes
+
+- jazz-svelte@0.8.40
+
 ## 0.0.2
 
 ### Patch Changes

examples/file-share-svelte/package.json

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

examples/form/.gitignore

@@ -22,3 +22,6 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+/test-results/
+/playwright-report/

examples/form/CHANGELOG.md

@@ -0,0 +1,24 @@
+# form
+
+## 0.0.15
+
+### Patch Changes
+
+- jazz-react@0.8.44
+- jazz-tools@0.8.44
+- jazz-browser-media-images@0.8.44
+
+## 0.0.14
+
+### Patch Changes
+
+- jazz-react@0.8.41
+- jazz-tools@0.8.41
+- jazz-browser-media-images@0.8.41
+
+## 0.0.13
+
+### Patch Changes
+
+- jazz-browser-media-images@0.8.40
+- jazz-react@0.8.40

examples/form/package.json

@@ -1,7 +1,7 @@
 {
   "name": "form",
   "private": true,
-  "version": "0.0.12",
+  "version": "0.0.15",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -21,11 +21,13 @@
   },
   "devDependencies": {
     "@biomejs/biome": "1.9.4",
+    "@playwright/test": "^1.46.1",
     "@tailwindcss/forms": "^0.5.9",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@vitejs/plugin-react": "^4.3.3",
     "autoprefixer": "^10.4.20",
+    "is-ci": "^3.0.1",
     "globals": "^15.11.0",
     "postcss": "^8.4.27",
     "tailwindcss": "^3.4.9",

examples/form/playwright.config.ts

@@ -0,0 +1,46 @@
+import { defineConfig, devices } from "@playwright/test";
+import isCI from "is-ci";
+
+/**
+ * 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/form/src/Orders.tsx

@@ -22,6 +22,7 @@ export function Orders() {
           <h1 className="text-lg pb-2 border-b mb-3">
             <strong>Your orders 🧋</strong>
           </h1>
+
           {me?.profile?.orders?.length ? (
             me?.profile?.orders.map((order) =>
               order ? <OrderThumbnail key={order.id} order={order} /> : null,

examples/form/tests/form.spec.ts

@@ -0,0 +1,56 @@
+import { expect, test } from "@playwright/test";
+import { LoginPage } from "./pages/LoginPage";
+
+test("create and edit an order", async ({ page }) => {
+  const loginPage = new LoginPage(page);
+
+  await loginPage.goto();
+  await loginPage.fillUsername("Alice");
+  await loginPage.signup();
+
+  // start an order
+  await page.getByRole("link", { name: "Add new order" }).click();
+  await page.getByLabel("Base tea").selectOption("Oolong");
+
+  // test draft indicator
+  await page.getByRole("link", { name: /Back to all orders/ }).click();
+  await expect(page.getByText("You have a draft")).toBeVisible();
+
+  // fill out the rest of order form
+  await page.getByRole("link", { name: "Add new order" }).click();
+  await page.getByLabel("Pearl").check();
+  await page.getByLabel("Taro").check();
+  await page.getByLabel("Delivery date").fill("2024-12-21");
+  await page.getByLabel("With milk?").check();
+  await page.getByLabel("Special instructions").fill("25% sugar");
+  await page.getByRole("button", { name: "Submit" }).click();
+
+  await page.waitForURL("/");
+
+  // the draft indicator should be gone because the order was submitted
+  await expect(page.getByText("You have a draft")).toHaveCount(0);
+
+  // check if order was created correctly
+  const firstOrder = page.getByRole("link", { name: "Oolong milk tea" });
+  await expect(firstOrder).toHaveText(/25% sugar/);
+  await expect(firstOrder).toHaveText(/12\/21\/2024/);
+  await expect(firstOrder).toHaveText(/with pearl, taro/);
+
+  // edit order
+  await firstOrder.click();
+  await page.getByLabel("Base tea").selectOption("Jasmine");
+  await page.getByLabel("Red bean").check();
+  await page.getByLabel("Brown sugar").check();
+  await page.getByLabel("Delivery date").fill("2024-12-25");
+  await page.getByLabel("With milk?").uncheck();
+  await page.getByLabel("Special instructions").fill("10% sugar");
+  await page.getByRole("link", { name: /Back to all orders/ }).click();
+
+  // check if order was edited correctly
+  const editedOrder = page.getByRole("link", { name: "Jasmine tea" });
+  await expect(editedOrder).toHaveText(/10% sugar/);
+  await expect(editedOrder).toHaveText(/12\/25\/2024/);
+  await expect(editedOrder).toHaveText(
+    /with pearl, taro, red bean, brown sugar/,
+  );
+});

examples/form/tests/pages/LoginPage.ts

@@ -0,0 +1,40 @@
+import { Locator, Page, expect } from "@playwright/test";
+
+export class LoginPage {
+  readonly page: Page;
+  readonly usernameInput: Locator;
+  readonly signupButton: Locator;
+
+  constructor(page: Page) {
+    this.page = page;
+    this.usernameInput = page.getByRole("textbox");
+    this.signupButton = page.getByRole("button", {
+      name: "Sign up",
+    });
+  }
+
+  async goto() {
+    this.page.goto("/");
+  }
+
+  async fillUsername(value: string) {
+    await this.usernameInput.clear();
+    await this.usernameInput.fill(value);
+  }
+
+  async loginAs(value: string) {
+    await this.page
+      .getByRole("button", {
+        name: value,
+      })
+      .click();
+  }
+
+  async signup() {
+    await this.signupButton.click();
+  }
+
+  async expectLoaded() {
+    await expect(this.signupButton).toBeVisible();
+  }
+}

examples/form/vercel.json

@@ -0,0 +1,8 @@
+{
+  "build": {
+    "env": {
+      "APP_NAME": "form-demo"
+    }
+  },
+  "ignoreCommand": "node ../../ignore-vercel-build.js"
+}

examples/image-upload/CHANGELOG.md

@@ -1,5 +1,28 @@
 # image-upload
 
+## 0.0.17
+
+### Patch Changes
+
+- jazz-react@0.8.44
+- jazz-tools@0.8.44
+- jazz-browser-media-images@0.8.44
+
+## 0.0.16
+
+### Patch Changes
+
+- jazz-react@0.8.41
+- jazz-tools@0.8.41
+- jazz-browser-media-images@0.8.41
+
+## 0.0.15
+
+### Patch Changes
+
+- jazz-browser-media-images@0.8.40
+- jazz-react@0.8.40
+
 ## 0.0.14
 
 ### Patch Changes

examples/image-upload/package.json

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

examples/image-upload/vercel.json

@@ -0,0 +1,8 @@
+{
+  "build": {
+    "env": {
+      "APP_NAME": "image-upload-demo"
+    }
+  },
+  "ignoreCommand": "node ../../ignore-vercel-build.js"
+}

examples/inspector/CHANGELOG.md

@@ -1,5 +1,23 @@
 # jazz-example-inspector
 
+## 0.0.88
+
+### Patch Changes
+
+- Updated dependencies [5d20c81]
+  - cojson@0.8.44
+  - cojson-transport-ws@0.8.44
+
+## 0.0.87
+
+### Patch Changes
+
+- Updated dependencies [3252502]
+- Updated dependencies [6370348]
+- Updated dependencies [ac216b9]
+  - cojson@0.8.41
+  - cojson-transport-ws@0.8.41
+
 ## 0.0.86
 
 ### Patch Changes

examples/inspector/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jazz-inspector",
   "private": true,
-  "version": "0.0.86",
+  "version": "0.0.88",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -16,8 +16,8 @@
     "@radix-ui/react-toast": "^1.1.4",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
-    "cojson": "workspace:0.8.39",
-    "cojson-transport-ws": "workspace:0.8.39",
+    "cojson": "workspace:0.8.44",
+    "cojson-transport-ws": "workspace:0.8.44",
     "hash-slash": "workspace:0.2.1",
     "lucide-react": "^0.274.0",
     "qrcode": "^1.5.3",

examples/inspector/vercel.json

@@ -0,0 +1,8 @@
+{
+  "build": {
+    "env": {
+      "APP_NAME": "jazz-inspector"
+    }
+  },
+  "ignoreCommand": "node ../../ignore-vercel-build.js"
+}

examples/music-player/CHANGELOG.md

@@ -1,5 +1,25 @@
 # jazz-example-musicplayer
 
+## 0.0.40
+
+### Patch Changes
+
+- jazz-react@0.8.44
+- jazz-tools@0.8.44
+
+## 0.0.39
+
+### Patch Changes
+
+- jazz-react@0.8.41
+- jazz-tools@0.8.41
+
+## 0.0.38
+
+### Patch Changes
+
+- jazz-react@0.8.40
+
 ## 0.0.37
 
 ### Patch Changes

examples/music-player/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jazz-example-music-player",
   "private": true,
-  "version": "0.0.37",
+  "version": "0.0.40",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -18,8 +18,8 @@
     "@radix-ui/react-toast": "^1.1.4",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
-    "jazz-react": "workspace:0.8.39",
-    "jazz-tools": "workspace:0.8.39",
+    "jazz-react": "workspace:0.8.44",
+    "jazz-tools": "workspace:0.8.44",
     "lucide-react": "^0.274.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

examples/music-player/vercel.json

@@ -0,0 +1,8 @@
+{
+  "build": {
+    "env": {
+      "APP_NAME": "music-demo"
+    }
+  },
+  "ignoreCommand": "node ../../ignore-vercel-build.js"
+}

examples/onboarding/CHANGELOG.md

@@ -1,5 +1,28 @@
 # jazz-example-onboarding
 
+## 0.0.21
+
+### Patch Changes
+
+- jazz-react@0.8.44
+- jazz-tools@0.8.44
+- jazz-browser-media-images@0.8.44
+
+## 0.0.20
+
+### Patch Changes
+
+- jazz-react@0.8.41
+- jazz-tools@0.8.41
+- jazz-browser-media-images@0.8.41
+
+## 0.0.19
+
+### Patch Changes
+
+- jazz-browser-media-images@0.8.40
+- jazz-react@0.8.40
+
 ## 0.0.18
 
 ### Patch Changes

examples/onboarding/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jazz-example-onboarding",
   "private": true,
-  "version": "0.0.18",
+  "version": "0.0.21",
   "type": "module",
   "scripts": {
     "dev": "vite",

examples/passkey-svelte/CHANGELOG.md

@@ -1,5 +1,23 @@
 # passkey-svelte
 
+## 0.0.9
+
+### Patch Changes
+
+- jazz-svelte@0.8.44
+
+## 0.0.8
+
+### Patch Changes
+
+- jazz-svelte@0.8.41
+
+## 0.0.7
+
+### Patch Changes
+
+- jazz-svelte@0.8.40
+
 ## 0.0.6
 
 ### Patch Changes

examples/passkey-svelte/package.json

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

examples/passkey/CHANGELOG.md

@@ -1,5 +1,25 @@
 # minimal-auth-passkey
 
+## 0.0.18
+
+### Patch Changes
+
+- jazz-react@0.8.44
+- jazz-tools@0.8.44
+
+## 0.0.17
+
+### Patch Changes
+
+- jazz-react@0.8.41
+- jazz-tools@0.8.41
+
+## 0.0.16
+
+### Patch Changes
+
+- jazz-react@0.8.40
+
 ## 0.0.15
 
 ### Patch Changes

examples/passkey/package.json

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

examples/passkey/vercel.json

@@ -0,0 +1,8 @@
+{
+  "build": {
+    "env": {
+      "APP_NAME": "passkey-demo"
+    }
+  },
+  "ignoreCommand": "node ../../ignore-vercel-build.js"
+}

examples/password-manager/CHANGELOG.md

@@ -1,5 +1,25 @@
 # jazz-password-manager
 
+## 0.0.39
+
+### Patch Changes
+
+- jazz-react@0.8.44
+- jazz-tools@0.8.44
+
+## 0.0.38
+
+### Patch Changes
+
+- jazz-react@0.8.41
+- jazz-tools@0.8.41
+
+## 0.0.37
+
+### Patch Changes
+
+- jazz-react@0.8.40
+
 ## 0.0.36
 
 ### Patch Changes

examples/password-manager/package.json

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

examples/password-manager/vercel.json

@@ -0,0 +1,8 @@
+{
+  "build": {
+    "env": {
+      "APP_NAME": "passwords-demo"
+    }
+  },
+  "ignoreCommand": "node ../../ignore-vercel-build.js"
+}

examples/pets/CHANGELOG.md

@@ -1,5 +1,28 @@
 # jazz-example-pets
 
+## 0.0.137
+
+### Patch Changes
+
+- jazz-react@0.8.44
+- jazz-tools@0.8.44
+- jazz-browser-media-images@0.8.44
+
+## 0.0.136
+
+### Patch Changes
+
+- jazz-react@0.8.41
+- jazz-tools@0.8.41
+- jazz-browser-media-images@0.8.41
+
+## 0.0.135
+
+### Patch Changes
+
+- jazz-browser-media-images@0.8.40
+- jazz-react@0.8.40
+
 ## 0.0.134
 
 ### Patch Changes

examples/pets/package.json

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

examples/pets/vercel.json

@@ -0,0 +1,8 @@
+{
+  "build": {
+    "env": {
+      "APP_NAME": "jazz-pets"
+    }
+  },
+  "ignoreCommand": "node ../../ignore-vercel-build.js"
+}

examples/reactions/CHANGELOG.md

@@ -1,5 +1,28 @@
 # reactions
 
+## 0.0.17
+
+### Patch Changes
+
+- jazz-react@0.8.44
+- jazz-tools@0.8.44
+- jazz-browser-media-images@0.8.44
+
+## 0.0.16
+
+### Patch Changes
+
+- jazz-react@0.8.41
+- jazz-tools@0.8.41
+- jazz-browser-media-images@0.8.41
+
+## 0.0.15
+
+### Patch Changes
+
+- jazz-browser-media-images@0.8.40
+- jazz-react@0.8.40
+
 ## 0.0.14
 
 ### Patch Changes

examples/reactions/package.json

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

examples/reactions/vercel.json

@@ -0,0 +1,8 @@
+{
+  "build": {
+    "env": {
+      "APP_NAME": "reactions-demo"
+    }
+  },
+  "ignoreCommand": "node ../../ignore-vercel-build.js"
+}

examples/todo-vue/CHANGELOG.md

@@ -1,5 +1,29 @@
 # todo-vue
 
+## 0.0.23
+
+### Patch Changes
+
+- jazz-browser@0.8.44
+- jazz-tools@0.8.44
+- jazz-vue@0.8.44
+
+## 0.0.22
+
+### Patch Changes
+
+- Updated dependencies [ac216b9]
+  - jazz-browser@0.8.41
+  - jazz-tools@0.8.41
+  - jazz-vue@0.8.41
+
+## 0.0.21
+
+### Patch Changes
+
+- jazz-browser@0.8.40
+- jazz-vue@0.8.40
+
 ## 0.0.20
 
 ### Patch Changes

examples/todo-vue/package.json

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

examples/todo/CHANGELOG.md

@@ -1,5 +1,25 @@
 # jazz-example-todo
 
+## 0.0.136
+
+### Patch Changes
+
+- jazz-react@0.8.44
+- jazz-tools@0.8.44
+
+## 0.0.135
+
+### Patch Changes
+
+- jazz-react@0.8.41
+- jazz-tools@0.8.41
+
+## 0.0.134
+
+### Patch Changes
+
+- jazz-react@0.8.40
+
 ## 0.0.133
 
 ### Patch Changes

examples/todo/package.json

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

examples/todo/vercel.json

@@ -0,0 +1,8 @@
+{
+  "build": {
+    "env": {
+      "APP_NAME": "jazz-todo"
+    }
+  },
+  "ignoreCommand": "node ../../ignore-vercel-build.js"
+}

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

@@ -1,7 +1,7 @@
 import { clsx } from "clsx";
-import { LucideIcon } from "lucide-react";
 import Link from "next/link";
 import { forwardRef } from "react";
+import { Icon } from "../atoms/Icon";
 import { Spinner } from "./Spinner";
 
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
@@ -9,7 +9,7 @@ interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   size?: "sm" | "md" | "lg";
   href?: string;
   newTab?: boolean;
-  icon?: LucideIcon;
+  icon?: string;
   loading?: boolean;
   loadingText?: string;
   children?: React.ReactNode;
@@ -17,14 +17,16 @@ interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   disabled?: boolean;
 }
 
-function ButtonIcon({ icon: Icon, loading }: ButtonProps) {
+function ButtonIcon({ icon, loading }: ButtonProps) {
   if (!Icon) return null;
 
   const className = "size-5";
 
   if (loading) return <Spinner className={className} />;
 
-  return <Icon strokeWidth={1.5} className={className} />;
+  if (icon) {
+    return <Icon name={icon} className={className} />;
+  }
 }
 
 export const Button = forwardRef<HTMLButtonElement, ButtonProps>(

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

@@ -0,0 +1,138 @@
+import {
+  ArrowDownIcon,
+  ArrowRightIcon,
+  BookTextIcon,
+  BoxIcon,
+  CheckIcon,
+  ChevronDown,
+  ChevronRight,
+  CodeIcon,
+  CopyIcon,
+  FileLock2Icon,
+  FileTextIcon,
+  FingerprintIcon,
+  FolderArchiveIcon,
+  GaugeIcon,
+  GlobeIcon,
+  ImageIcon,
+  LinkIcon,
+  LockKeyholeIcon,
+  LucideIcon,
+  MailIcon,
+  MenuIcon,
+  MessageCircleQuestionIcon,
+  MonitorSmartphoneIcon,
+  MoonIcon,
+  MousePointerSquareDashedIcon,
+  PencilLineIcon,
+  ScanFace,
+  SunIcon,
+  TrashIcon,
+  UploadCloudIcon,
+  UserIcon,
+  UserPlusIcon,
+  UsersIcon,
+  WifiOffIcon,
+  XIcon,
+} from "lucide-react";
+
+const icons = {
+  addUser: UserPlusIcon,
+  arrowDown: ArrowDownIcon,
+  arrowRight: ArrowRightIcon,
+  auth: UserIcon,
+  browser: GlobeIcon,
+  check: CheckIcon,
+  chevronRight: ChevronRight,
+  chevronDown: ChevronDown,
+  close: XIcon,
+  code: CodeIcon,
+  copy: CopyIcon,
+  darkTheme: MoonIcon,
+  delete: TrashIcon,
+  devices: MonitorSmartphoneIcon,
+  docs: BookTextIcon,
+  encryption: LockKeyholeIcon,
+  faceId: ScanFace,
+  file: FileTextIcon,
+  help: MessageCircleQuestionIcon,
+  image: ImageIcon,
+  instant: GaugeIcon,
+  lightTheme: SunIcon,
+  link: LinkIcon,
+  menu: MenuIcon,
+  newsletter: MailIcon,
+  offline: WifiOffIcon,
+  package: BoxIcon,
+  permissions: FileLock2Icon,
+  social: UsersIcon,
+  spatialPresence: MousePointerSquareDashedIcon,
+  touchId: FingerprintIcon,
+  upload: UploadCloudIcon,
+  write: PencilLineIcon,
+  zip: FolderArchiveIcon,
+};
+
+// copied from tailwind line height https://tailwindcss.com/docs/font-size
+const sizes = {
+  xs: 16,
+  sm: 20,
+  md: 24,
+  lg: 28,
+  xl: 28,
+  "2xl": 32,
+  "3xl": 36,
+  "4xl": 40,
+  "5xl": 48,
+  "6xl": 60,
+  "7xl": 72,
+  "8xl": 96,
+  "9xl": 128,
+};
+
+const strokeWidths = {
+  xs: 2,
+  sm: 2,
+  md: 1.5,
+  lg: 1.5,
+  xl: 1.5,
+  "2xl": 1.25,
+  "3xl": 1.25,
+  "4xl": 1.25,
+  "5xl": 1,
+  "6xl": 1,
+  "7xl": 1,
+  "8xl": 1,
+  "9xl": 1,
+};
+
+export function Icon({
+  name,
+  icon,
+  size = "md",
+  className,
+  ...svgProps
+}: {
+  name?: string;
+  icon?: LucideIcon;
+  size?: keyof typeof sizes;
+  className?: string;
+} & React.SVGProps<SVGSVGElement>) {
+  if (!icon && (!name || !icons.hasOwnProperty(name))) {
+    throw new Error(`Icon not found`);
+  }
+
+  // @ts-ignore
+  const IconComponent = icons?.hasOwnProperty(name) ? icons[name] : icon;
+
+  return (
+    <IconComponent
+      aria-hidden="true"
+      size={sizes[size]}
+      strokeWidth={strokeWidths[size]}
+      strokeLinecap="butt"
+      className={className}
+      {...svgProps}
+    />
+  );
+}

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

@@ -1,8 +1,8 @@
 "use client";
 
 import { clsx } from "clsx";
-import { Clipboard } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
+import { Icon } from "../atoms/Icon";
 
 // TODO: add tabs feature, and remove CodeExampleTabs
 
@@ -44,11 +44,12 @@ function CopyButton({ code, size }: { code: string; size?: "sm" | "md" }) {
           copied && "-translate-y-1.5 opacity-0",
         )}
       >
-        <Clipboard
-          strokeWidth={1}
+        <Icon
+          name="copy"
+          size="xs"
           className={clsx(
-            size === "sm" ? "h-3 w-3" : "h-4 w-4",
-            "fill-stone-500/20 stroke-stone-500 transition-colors group-hover/button:stroke-stone-600 dark:group-hover/button:stroke-stone-400",
+            size === "sm" ? "size-2" : "size-3",
+            "stroke-stone-500 transition-colors group-hover/button:stroke-stone-600 dark:group-hover/button:stroke-stone-400",
           )}
         />
         Copy

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

@@ -1,29 +1,28 @@
 import clsx from "clsx";
-import { LucideIcon } from "lucide-react";
 import { Card } from "../atoms/Card";
+import { Icon } from "../atoms/Icon";
 import { Prose } from "./Prose";
 
 export function FeatureCard({
   label,
-  icon: Icon,
+  icon,
   explanation,
   children,
   className,
 }: {
   label: React.ReactNode;
-  icon?: LucideIcon;
+  icon?: string;
   explanation?: React.ReactNode;
   children?: React.ReactNode;
   className?: string;
 }) {
   return (
     <Card className={clsx(className, "p-4")}>
-      {Icon && (
+      {icon && (
         <Icon
-          className="size-8 text-blue p-1.5 rounded-lg bg-blue-50 dark:text-blue-500 dark:bg-stone-900 mb-2.5 md:size-10"
-          strokeWidth={1.5}
-          strokeLinecap="butt"
-          size={80}
+          name={icon}
+          className="text-blue p-1.5 rounded-lg bg-blue-50 dark:text-blue-500 dark:bg-stone-900 mb-2.5"
+          size="3xl"
         />
       )}
       <div className="text-stone-900 font-medium md:text-base dark:text-stone-100 mb-2">

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

@@ -1,8 +1,8 @@
 "use client";
 
 import { clsx } from "clsx";
-import { ChevronDownIcon } from "lucide-react";
 import { useId } from "react";
+import { Icon } from "../atoms/Icon";
 
 export function Select(
   props: React.SelectHTMLAttributes<HTMLSelectElement> & { label: string },
@@ -32,9 +32,10 @@ export function Select(
           {props.children}
         </select>
 
-        <ChevronDownIcon
+        <Icon
+          name="chevronDown"
           className="absolute right-[0.5em] text-stone-400 dark:text-stone-600"
-          size={16}
+          size="xs"
         />
       </div>
     </div>

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

@@ -1,10 +1,9 @@
 "use client";
 
 import clsx from "clsx";
-import { MoonIcon, SunIcon } from "lucide-react";
-import { useTheme } from "next-themes";
 import { UseThemeProps } from "next-themes/dist/types";
 import { useEffect, useState } from "react";
+import { Icon } from "../atoms/Icon";
 
 export function ThemeToggle({
   className,
@@ -31,14 +30,14 @@ export function ThemeToggle({
       aria-label={mounted ? `Switch to ${otherTheme} theme` : "Toggle theme"}
       onClick={() => setTheme(otherTheme)}
     >
-      <MoonIcon
-        size={24}
-        strokeWidth={2}
+      <Icon
+        name="darkTheme"
+        size="lg"
         className="size-5 stroke-stone-900 dark:hidden"
       />
-      <SunIcon
-        size={24}
-        strokeWidth={2}
+      <Icon
+        name="lightTheme"
+        size="lg"
         className="size-5 hidden stroke-white dark:block"
       />
     </button>

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

@@ -8,7 +8,6 @@ import {
   PopoverPanel,
 } from "@headlessui/react";
 import clsx from "clsx";
-import { ChevronDownIcon, MenuIcon, XIcon } from "lucide-react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import {
@@ -19,12 +18,13 @@ import {
   useRef,
   useState,
 } from "react";
+import { Icon } from "../atoms/Icon";
 import { BreadCrumb } from "../molecules/Breadcrumb";
 import { SocialLinks, SocialLinksProps } from "./SocialLinks";
 
 type NavItemProps = {
   href: string;
-  icon?: ReactNode;
+  icon?: string;
   title: string;
   firstOnRight?: boolean;
   newTab?: boolean;
@@ -56,7 +56,7 @@ function NavItem({
     if (item.icon) {
       return (
         <NavLinkLogo className="px-3" {...item}>
-          {icon}
+          <Icon name={item.icon} />
           <span className="sr-only">{title}</span>
         </NavLinkLogo>
       );
@@ -86,7 +86,7 @@ function NavItem({
         )}
       >
         <span>{title}</span>
-        <ChevronDownIcon aria-hidden="true" className="size-4" />
+        <Icon name="chevronDown" size="xs" />
       </PopoverButton>
 
       <PopoverPanel
@@ -103,7 +103,13 @@ function NavItem({
                 as={Link}
                 key={href}
               >
-                {icon}
+                {icon && (
+                  <Icon
+                    className="stroke-blue dark:stroke-blue-500 shrink-0"
+                    size="sm"
+                    name={icon}
+                  />
+                )}
                 <div className="grid gap-1.5 mt-px">
                   <p className="text-sm font-medium text-stone-900 dark:text-white">
                     {title}
@@ -155,7 +161,7 @@ export function MobileNav({
           }}
           aria-label="Open menu"
         >
-          <MenuIcon />
+          <Icon name="menu" />
           <BreadCrumb items={items} />
         </button>
       </div>
@@ -223,10 +229,10 @@ export function MobileNav({
             aria-label="Close menu"
           >
             {menuOpen || searchOpen ? (
-              <XIcon />
+              <Icon name="close" />
             ) : (
               <>
-                <MenuIcon />
+                <Icon name="menu" />
                 <BreadCrumb items={items} />
               </>
             )}

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

@@ -1,10 +1,10 @@
 "use client";
 
-import { CheckIcon, MailIcon } from "lucide-react";
 import { useState } from "react";
 import { ErrorResponse } from "resend";
 import { subscribe } from "../../../actions/resend";
 import { Button } from "../atoms/Button";
+import { Icon } from "../atoms/Icon";
 import { Input } from "../molecules/Input";
 
 export function NewsletterForm() {
@@ -34,7 +34,7 @@ export function NewsletterForm() {
   if (state === "success") {
     return (
       <div className="flex gap-3 items-center">
-        <CheckIcon className="text-green-500" size={16} />
+        <Icon name="check" className="text-green-500" />
         <p>Thanks for subscribing!</p>
       </div>
     );
@@ -63,7 +63,7 @@ export function NewsletterForm() {
         variant="secondary"
         loadingText="Subscribing..."
         loading={state === "loading"}
-        icon={MailIcon}
+        icon="newsletter"
       >
         Subscribe
       </Button>

homepage/homepage/app/api-reference/page.tsx

@@ -1,6 +1,6 @@
 import { packages } from "@/lib/packages";
 import { clsx } from "clsx";
-import { MessageCircleQuestionIcon, PackageIcon } from "lucide-react";
+import { Icon } from "gcmp-design-system/src/app/components/atoms/Icon";
 import Link from "next/link";
 
 const CardHeading = ({
@@ -64,9 +64,8 @@ export default function Page() {
             key={name}
           >
             <Card className="border shadow-sm">
-              <PackageIcon
-                size={25}
-                strokeWidth={1.5}
+              <Icon
+                name="package"
                 className="text-stone-500 dark:text-stone-400"
               />
               <CardHeading className="group-hover:text-blue dark:group-hover:text-blue-600">
@@ -78,9 +77,9 @@ export default function Page() {
         ))}
 
         <Card className="bg-stone-50 dark:bg-stone-925">
-          <MessageCircleQuestionIcon
-            size={25}
-            strokeWidth={1.5}
+          <Icon
+            name="help"
+            size="md"
             className="text-stone-500 dark:text-stone-400"
           />
           <CardHeading>

homepage/homepage/app/docs/[framework]/[...slug]/design-patterns/organization.mdx

@@ -0,0 +1,127 @@
+import { CodeGroup } from "@/components/forMdx";
+
+# Sharing data through Organizations
+
+Organizations are a way to share a set of data between users.
+Different apps have different names for this concept, such as "teams" or "workspaces".
+
+We'll use the term Organization.
+
+## Defining the schema for an Organization
+
+Create a CoMap shared by the users of the same organization to act as a root (or "main database") for the shared data within an organization.
+
+For this example, users within an `Organization` will be sharing `Project`s.
+
+<CodeGroup>
+```ts
+// schema.ts
+export class Project extends CoMap {
+  name = co.string;
+}
+
+export class ListOfProjects extends CoList.Of(co.ref(Project)) {}
+
+export class Organization extends CoMap {
+  name = co.string;
+
+  // shared data between users of each organization
+  projects = co.ref(ListOfProjects);
+}
+
+export class ListOfOrganizations extends CoList.Of(co.ref(Organization)) {}
+```
+</CodeGroup>
+
+Learn more about [defining schemas](/docs/schemas/covalues).
+
+## Adding a list of Organizations to the user's Account
+
+Let's add the list of `Organization`s to the user's Account `root` so they can access them.
+
+<CodeGroup>
+```ts
+// schema.ts
+export class JazzAccountRoot extends CoMap {
+  organizations = co.ref(ListOfOrganizations);
+}
+
+export class JazzAccount extends Account {
+  root = co.ref(JazzAccountRoot);
+
+  async migrate(creationProps?: { name: string }) {
+    super.migrate(creationProps);
+
+    if (!this._refs.root) {
+      // Using a Group as an owner allows you to give access to other users
+      const initialOrganizationOwnership = {
+        owner: Group.create({ owner: this }),
+      };
+
+      const organizations = ListOfOrganizations.create(
+        [
+          // Create the first Organization so users can start right away
+          Organization.create(
+            {
+              name: "My organization",
+              projects: ListOfProjects.create([], initialOrganizationOwnership),
+            },
+            initialOrganizationOwnership,
+          ),
+        ],
+        { owner: this },
+      );
+
+      this.root = JazzAccountRoot.create(
+        { organizations },
+        { owner: this },
+      );
+    }
+  }
+}
+```
+</CodeGroup>
+
+This schema now allows users to create `Organization`s and add `Project`s to them.
+
+## Adding other users to an Organization
+
+To give users access to an `Organization`, you can either send them an invite link, or
+add their `Account` manually.
+
+### Adding users through invite links
+
+Here's how you can generate an [invite link](/docs/groups/sharing#invite-links).
+
+When the user accepts the invite, add the `Organization` to the user's `organizations` list.
+
+<CodeGroup>
+```ts
+const onAccept = (organizationId: ID<Organization>) => {
+  if (me?.root?.organizations) {
+    Organization.load(organizationId, me, []).then((organization) => {
+      if (organization) {
+        // Avoid duplicates
+        const ids = me.root.organizations.map(
+          (organization) => organization?.id,
+        );
+
+        if (ids.includes(organizationId)) return;
+
+        me.root.organizations.push(organization);
+        navigate("/organizations/" + organizationId);
+      }
+    });
+  }
+};
+
+useAcceptInvite({
+  invitedObjectSchema: Organization,
+  onAccept,
+});
+```
+</CodeGroup>
+
+### Adding users through their Account ID
+
+...more on this coming soon

homepage/homepage/app/docs/[framework]/[...slug]/groups/intro.mdx

@@ -0,0 +1,57 @@
+import { CodeGroup } from "@/components/forMdx";
+
+...more docs coming soon
+
+## Adding Group Members by ID
+
+You can add group members by ID by using `Account.load` and `Group.addMember`.
+
+<CodeGroup>
+```tsx
+import { Group, Account } from "jazz-tools";
+
+const group = Group.create({ owner: me });
+
+const bob = await Account.load(bobsID, me, []);
+group.addMember(bob, "writer");
+```
+</CodeGroup>
+
+Note: if the account ID is of type `string`, because it comes from a URL parameter or something similar, you need to cast it to `ID<Account>` first:
+
+<CodeGroup>
+```tsx
+import { Group, Account, ID } from "jazz-tools";
+
+const bob = await Account.load(bobsID as ID<Account>, me, []);
+group.addMember(bob, "writer");
+```
+</CodeGroup>
+...more docs coming soon
+
+## Getting the Group of an existing CoValue
+
+You can get the group of an existing CoValue by using `coValue._owner`.
+
+<CodeGroup>
+```tsx
+const group = existingCoValue._owner;
+const newValue = MyCoMap.create(
+  { color: "red"},
+  { owner: group }
+);
+```
+</CodeGroup>
+
+Because `._owner` can be an `Account` or a `Group`, in cases where you specifically need to use `Group` methods (such as for adding members or getting your own role), you can cast it to assert it to be a Group:
+
+<CodeGroup>
+```tsx
+import { Group } from "jazz-tools";
+
+const group = existingCoValue._owner.castAs(Group);
+group.addMember(bob, "writer");
+group.myRole();
+```
+</CodeGroup>
+...more docs coming soon

homepage/homepage/app/examples/page.tsx

@@ -6,16 +6,6 @@ import { VueLogo } from "@/components/icons/VueLogo";
 import { H2 } from "gcmp-design-system/src/app/components/atoms/Headings";
 import { GappedGrid } from "gcmp-design-system/src/app/components/molecules/GappedGrid";
 import { HeroHeader } from "gcmp-design-system/src/app/components/molecules/HeroHeader";
-import {
-  CloudUploadIcon,
-  FingerprintIcon,
-  FolderArchiveIcon,
-  Icon,
-  ImageIcon,
-  LockIcon,
-  PencilLineIcon,
-  UserPlusIcon,
-} from "lucide-react";
 
 import {
   Schema_ts as ImageUploadSchema,
@@ -29,6 +19,7 @@ import { ExampleCard } from "@/components/examples/ExampleCard";
 import { ExampleDemo } from "@/components/examples/ExampleDemo";
 import { SvelteLogo } from "@/components/icons/SvelteLogo";
 import { Example, features, tech } from "@/lib/example";
+import { Icon } from "gcmp-design-system/src/app/components/atoms/Icon";
 
 const MockButton = ({ children }: { children: React.ReactNode }) => (
   <p className="bg-blue-100 text-blue-800 py-1 p-2 rounded-full font-medium text-center text-xs">
@@ -81,16 +72,16 @@ const OnboardingIllustration = () => (
   <div className="flex h-full flex-col justify-center text-sm dark:bg-transparent">
     <div className="mx-auto grid gap-3">
       {[
-        { icon: UserPlusIcon, text: "Add new employee" },
+        { icon: "addUser", text: "Add new employee" },
         {
-          icon: PencilLineIcon,
+          icon: "write",
           text: "Invite employee to fill in their profile",
         },
-        { icon: LockIcon, text: "Get confirmation from admin" },
-      ].map(({ text, icon: Icon }, index) => (
+        { icon: "permissions", text: "Get confirmation from admin" },
+      ].map(({ text, icon }, index) => (
         <div className="flex items-center gap-2">
           <span className="text-xs text-green-800 bg-green-100 leading-none font-medium text-center p-1.5 block rounded-full dark:bg-green-800 dark:text-green-200">
-            <Icon strokeWidth={2} size={15} />
+            <Icon name={icon} size="xs" />
           </span>
           {text}
         </div>
@@ -102,9 +93,9 @@ const OnboardingIllustration = () => (
 const MusicIllustration = () => (
   <div className="flex flex-col items-center justify-center h-full p-8">
     <div className="p-3 w-[12rem] h-[8rem] border border-dashed border-blue dark:border-blue-500 rounded-lg flex gap-2 flex-col items-center justify-center">
-      <CloudUploadIcon
-        size={40}
-        strokeWidth={1.5}
+      <Icon
+        name="upload"
+        size="4xl"
         className="stroke-blue mx-auto dark:stroke-blue-500"
       />
       <p className="whitespace-nowrap text-stone-900 dark:text-white">
@@ -117,9 +108,9 @@ const MusicIllustration = () => (
 const ImageUploadIllustration = () => (
   <div className="flex flex-col items-center justify-center h-full p-8">
     <div className="p-3 w-[12rem] h-[8rem] border border-dashed border-blue dark:border-blue-500 rounded-lg flex gap-2 flex-col items-center justify-center">
-      <ImageIcon
-        size={40}
-        strokeWidth={1.5}
+      <Icon
+        name="upload"
+        size="4xl"
         className="stroke-blue mx-auto dark:stroke-blue-500"
       />
       <p className="whitespace-nowrap text-stone-900 dark:text-white">
@@ -245,9 +236,9 @@ const FileShareIllustration = () => (
     <p>This file was shared with you.</p>
     <div className="p-3 w-full border rounded-lg flex justify-between gap-5">
       <div className="flex items-center gap-2">
-        <FolderArchiveIcon
-          size={24}
-          strokeWidth={1.5}
+        <Icon
+          name="zip"
+          size="xl"
           className="stroke-blue dark:stroke-blue-500"
         />
         <p className="whitespace-nowrap text-stone-900 dark:text-white">
@@ -263,11 +254,7 @@ const FileShareIllustration = () => (
 const PasskeyIllustration = () => (
   <div className="flex bg-stone-100 h-full flex-col items-center justify-center dark:bg-transparent">
     <div className="p-4 flex flex-col items-center gap-3 rounded-md shadow-xl shadow-stone-400/20 bg-white dark:shadow-none">
-      <FingerprintIcon
-        size={36}
-        strokeWidth={0.75}
-        className="stroke-red-600"
-      />
+      <Icon name="touchId" size="3xl" className="stroke-red-600" />
       <p className="text-xs dark:text-stone-900">Continue with Touch ID</p>
     </div>
   </div>

homepage/homepage/components/docs/ApiNav.tsx

@@ -1,12 +1,9 @@
-import { SideNav } from "@/components/SideNav";
 import { SideNavHeader } from "@/components/SideNavHeader";
 import { SideNavItem } from "@/components/SideNavItem";
-import { docNavigationItems } from "@/lib/docNavigationItems";
 import { packages } from "@/lib/packages";
 import { clsx } from "clsx";
-import { ChevronRight, PackageIcon } from "lucide-react";
+import { Icon } from "gcmp-design-system/src/app/components/atoms/Icon";
 import Link from "next/link";
-import { twMerge } from "tailwind-merge";
 import { requestProject } from "./requestProject";
 
 export function ApiNav({ className }: { className?: string }) {
@@ -37,7 +34,7 @@ export async function PackageNavItem({
         className="mb-1 flex gap-2 items-center"
         href={`/api-reference/${packageName}`}
       >
-        <PackageIcon size={15} strokeWidth={1.5} />
+        <Icon name="package" size="xs" />
         {packageName}
       </SideNavItem>
       {project.categories?.map((category) => {
@@ -50,7 +47,11 @@ export async function PackageNavItem({
             <summary className="pl-[13px] py-1 cursor-pointer flex gap-2 items-center justify-between hover:text-stone-800 dark:hover:text-stone-200 [&::-webkit-details-marker]:hidden">
               {category.title}
 
-              <ChevronRight className="w-4 h-4 text-stone-300 group-open:rotate-90 transition-transform dark:text-stone-800" />
+              <Icon
+                name="chevronRight"
+                size="sm"
+                className="text-stone-300 group-open:rotate-90 transition-transform dark:text-stone-800"
+              />
             </summary>
             <div className="pl-6">
               {category.children.map(

homepage/homepage/components/docs/packageDocs.tsx

@@ -1,4 +1,4 @@
-import { PackageIcon, Type } from "lucide-react";
+import { Icon } from "gcmp-design-system/src/app/components/atoms/Icon";
 import {
   CommentDisplayPart,
   DeclarationReflection,
@@ -30,7 +30,7 @@ export async function PackageDocs({
   return (
     <>
       <h2 className="flex items-center gap-2">
-        <code>{packageName}</code> <PackageIcon />
+        <code>{packageName}</code> <Icon name="package" size="md" />
       </h2>
       {project.categories?.map((category) => {
         return (

homepage/homepage/components/docs/tags.tsx

@@ -1,4 +1,4 @@
-import { LinkIcon } from "lucide-react";
+import { Icon } from "gcmp-design-system/src/app/components/atoms/Icon";
 import Link from "next/link";
 import { ReactNode } from "react";
 import { getHighlighter } from "shiki";
@@ -79,7 +79,7 @@ export function ClassOrInterface({
           href={"#" + name}
           className="inline-flex items-center gap-2 lg:-ml-[22px]"
         >
-          <LinkIcon size={14} className="hidden lg:inline" />
+          <Icon name="link" size="xs" className="hidden lg:inline" />
           <h3 className="text-lg lg:text-xl">
             <Highlight>
               {(isInterface ? "interface " : "class ") + name + typeParameters}

homepage/homepage/components/home/ChatDemoSection.tsx

@@ -2,9 +2,9 @@
 
 import { Card } from "gcmp-design-system/src/app/components/atoms/Card";
 import { H3 } from "gcmp-design-system/src/app/components/atoms/Headings";
+import { Icon } from "gcmp-design-system/src/app/components/atoms/Icon";
 import { GappedGrid } from "gcmp-design-system/src/app/components/molecules/GappedGrid";
 import { SectionHeader } from "gcmp-design-system/src/app/components/molecules/SectionHeader";
-import { CheckIcon, CopyIcon } from "lucide-react";
 import Link from "next/link";
 import QRCode from "qrcode";
 import {
@@ -179,7 +179,11 @@ export function ChatDemoSection() {
                     className="text-blue dark:text-blue-400"
                     onClick={copyUrl}
                   >
-                    {copied ? <CheckIcon size={16} /> : <CopyIcon size={16} />}
+                    {copied ? (
+                      <Icon name="check" size="xs" />
+                    ) : (
+                      <Icon name="copy" size="xs" />
+                    )}
                     <span className="sr-only">Copy URL</span>
                   </button>
                 </div>

homepage/homepage/components/home/EncryptionSection.tsx

@@ -1,7 +1,7 @@
 import { Card } from "gcmp-design-system/src/app/components/atoms/Card";
 import { H3 } from "gcmp-design-system/src/app/components/atoms/Headings";
+import { Icon } from "gcmp-design-system/src/app/components/atoms/Icon";
 import { Prose } from "gcmp-design-system/src/app/components/molecules/Prose";
-import { LockKeyholeIcon } from "lucide-react";
 
 const randomChars = [
   "SFPOHVKNPDKETOMQLMJKX#QDI=TFFFMRJDSJ",
@@ -48,13 +48,19 @@ function Illustration() {
         )}
       </div>
 
-      <LockKeyholeIcon
-        strokeWidth={1.5}
-        strokeLinecap="butt"
-        size={80}
-        className="z-30 size-8 text-blue p-1.5 rounded-lg bg-blue-50 dark:text-blue-500 dark:bg-stone-900 md:size-10"
+      <Icon
+        name="encryption"
+        size="3xl"
+        className="z-30 text-blue p-1.5 rounded-lg bg-blue-50 dark:text-blue-500 dark:bg-stone-900"
       />
 
+      {/*<LockKeyholeIcon*/}
+      {/*  strokeWidth={1.5}*/}
+      {/*  strokeLinecap="butt"*/}
+      {/*  size={80}*/}
+      {/*  className="z-30 size-8 text-blue p-1.5 rounded-lg bg-blue-50 dark:text-blue-500 dark:bg-stone-900 md:size-10"*/}
+      {/*/>*/}
+
       <div className="w-20 h-full bg-gradient-to-r from-white to-transparent absolute top-0 left-0 z-10 dark:from-stone-925"></div>
       <div className="hidden md:block h-20 w-full bg-gradient-to-b from-white to-transparent absolute top-0 left-0 z-10 dark:from-stone-925"></div>
       <div className="h-20 w-full bg-gradient-to-t from-white to-transparent absolute bottom-0 left-0 z-10 dark:from-stone-925"></div>

homepage/homepage/components/home/FeaturesSection.tsx

@@ -3,24 +3,14 @@ import { ClerkLogo } from "@/components/icons/ClerkLogo";
 import { Button } from "gcmp-design-system/src/app/components/atoms/Button";
 import { Card } from "gcmp-design-system/src/app/components/atoms/Card";
 import { H3 } from "gcmp-design-system/src/app/components/atoms/Headings";
+import { Icon } from "gcmp-design-system/src/app/components/atoms/Icon";
 import { Prose } from "gcmp-design-system/src/app/components/molecules/Prose";
 import { SectionHeader } from "gcmp-design-system/src/app/components/molecules/SectionHeader";
-import {
-  CheckIcon,
-  FileTextIcon,
-  FingerprintIcon,
-  ImageIcon,
-  ScanFace,
-  TrashIcon,
-  UploadCloudIcon,
-  UserIcon,
-} from "lucide-react";
 import Link from "next/link";
 
 const features = [
   {
     title: "File uploads",
-    icon: UploadCloudIcon,
     description: (
       <>
         Just use <code>{`<input type="file"/>`}</code>, and easily convert from
@@ -37,22 +27,21 @@ const features = [
         </pre>
 
         <div className="w-full bg-white rounded-md py-3 px-3 flex gap-4 items-center border rounded-xl shadow-lg shadow-stone-500/10 dark:bg-stone-925">
-          <FileTextIcon
-            size={32}
-            strokeWidth={1}
+          <Icon
+            size="2xl"
+            name="file"
             className="text-blue dark:text-blue-500"
           />
           <div className="text-2xl flex-1 text-blue dark:text-blue-500">
             file.pdf
           </div>
-          <TrashIcon size={32} strokeWidth={1} className="text-stone-500" />
+          <Icon size="2xl" name="delete" className="text-stone-500" />
         </div>
       </div>
     ),
   },
   {
     title: "Progressive image loading",
-    icon: ImageIcon,
     description: (
       <>
         Using Jazz&apos;s <code>ImageDefinition</code> component, you get
@@ -80,7 +69,6 @@ const features = [
   },
   {
     title: "Server workers",
-    icon: ImageIcon,
     description: (
       <>
         Expose an HTTP API that mutates Jazz state. Or subscribe to Jazz state
@@ -91,7 +79,6 @@ const features = [
   },
   {
     title: "Authentication",
-    icon: UserIcon,
     description: (
       <>
         Plug and play different kinds of auth like Passkeys (Touch ID, Face ID),
@@ -100,9 +87,9 @@ const features = [
     ),
     illustration: (
       <div className="flex gap-4 justify-center text-black dark:text-white">
-        <ScanFace className="h-16 w-auto" strokeWidth={1} />
+        <Icon size="5xl" name="faceId" className="h-16 w-auto" />
         <ClerkLogo className="h-16 py-0.5 w-auto" />
-        <FingerprintIcon className="h-16 w-auto" strokeWidth={1} />
+        <Icon size="5xl" name="touchId" className="h-16 w-auto" />
       </div>
     ),
   },
@@ -124,7 +111,7 @@ export function FeaturesSection() {
       />
 
       <div className="grid grid-cols-2 sm:grid-cols-4 md:grid-cols-6 gap-4 lg:gap-8">
-        {features.map(({ title, icon: Icon, description, illustration }) => (
+        {features.map(({ title, description, illustration }) => (
           <Card key={title} className="col-span-2 overflow-hidden">
             <div className="h-48 flex w-full items-center justify-center">
               {illustration}
@@ -183,7 +170,7 @@ export function FeaturesSection() {
                   className="flex items-center gap-1.5 whitespace-nowrap"
                 >
                   <span className="text-blue p-1 rounded-full bg-blue-50 dark:text-blue-500 dark:bg-white/10">
-                    <CheckIcon size={12} strokeWidth={3} />
+                    <Icon name="check" size="xs" />
                   </span>
                   {feature}
                 </li>

homepage/homepage/components/home/HeroSection.tsx

@@ -1,48 +1,39 @@
+import { Icon } from "gcmp-design-system/src/app/components/atoms/Icon";
 import { Prose } from "gcmp-design-system/src/app/components/molecules/Prose";
-import {
-  FileLock2Icon,
-  GaugeIcon,
-  LockKeyholeIcon,
-  MonitorSmartphoneIcon,
-  MousePointerSquareDashedIcon,
-  UploadCloudIcon,
-  UserIcon,
-  UsersIcon,
-} from "lucide-react";
 import Link from "next/link";
 
 const features = [
   {
     title: "Instant updates",
-    icon: GaugeIcon,
+    icon: "instant",
   },
   {
     title: "Real-time sync",
-    icon: MonitorSmartphoneIcon,
+    icon: "devices",
   },
   {
     title: "Multiplayer",
-    icon: MousePointerSquareDashedIcon,
+    icon: "spatialPresence",
   },
   {
     title: "File uploads",
-    icon: UploadCloudIcon,
+    icon: "upload",
   },
   {
     title: "Social features",
-    icon: UsersIcon,
+    icon: "social",
   },
   {
     title: "Permissions",
-    icon: FileLock2Icon,
+    icon: "permissions",
   },
   {
     title: "E2E encryption",
-    icon: LockKeyholeIcon,
+    icon: "encryption",
   },
   {
     title: "Authentication",
-    icon: UserIcon,
+    icon: "auth",
   },
 ];
 
@@ -74,13 +65,13 @@ export function HeroSection() {
         </Prose>
 
         <div className="grid grid-cols-2 gap-2 max-w-3xl sm:grid-cols-4 sm:gap-4">
-          {features.map(({ title, icon: Icon }) => (
+          {features.map(({ title, icon }) => (
             <div
               key={title}
               className="flex text-xs sm:text-sm gap-2 items-center"
             >
               <span className="text-blue p-1.5 rounded-lg bg-blue-50 dark:text-blue-500 dark:bg-stone-900">
-                <Icon size={16} />
+                <Icon size="xs" name={icon} />
               </span>
               <p>{title}</p>
             </div>

homepage/homepage/components/home/LocalFirstFeaturesSection.tsx

@@ -1,18 +1,12 @@
 import { FeatureCard } from "gcmp-design-system/src/app/components/molecules/FeatureCard";
 import { GappedGrid } from "gcmp-design-system/src/app/components/molecules/GappedGrid";
 import { SectionHeader } from "gcmp-design-system/src/app/components/molecules/SectionHeader";
-import {
-  GaugeIcon,
-  MonitorSmartphoneIcon,
-  MousePointerSquareDashedIcon,
-  WifiOffIcon,
-} from "lucide-react";
 
 export function LocalFirstFeaturesSection() {
   const features = [
     {
       title: "Offline-first",
-      icon: WifiOffIcon,
+      icon: "offline",
       description: (
         <>
           Your app works seamlessly offline or on sketchy connections. When
@@ -22,7 +16,7 @@ export function LocalFirstFeaturesSection() {
     },
     {
       title: "Instant updates",
-      icon: GaugeIcon,
+      icon: "instant",
       description: (
         <>
           Since you&apos;re working with local state, your UI updates instantly.
@@ -32,7 +26,7 @@ export function LocalFirstFeaturesSection() {
     },
     {
       title: "Real-time sync",
-      icon: MonitorSmartphoneIcon,
+      icon: "devices",
       description: (
         <>
           Every device with the same account will always have everything in
@@ -42,7 +36,7 @@ export function LocalFirstFeaturesSection() {
     },
     {
       title: "Multiplayer",
-      icon: MousePointerSquareDashedIcon,
+      icon: "spatialPresence",
       description: (
         <>
           Adding multiplayer is as easy as sharing synced data with other users.
@@ -66,10 +60,10 @@ export function LocalFirstFeaturesSection() {
         }
       />
       <GappedGrid cols={4}>
-        {features.map(({ title, icon: Icon, description }) => (
+        {features.map(({ title, icon, description }) => (
           <FeatureCard
             label={title}
-            icon={Icon}
+            icon={icon}
             explanation={description}
             key={title}
           ></FeatureCard>

homepage/homepage/components/home/ProblemStatementSection.tsx

@@ -1,8 +1,8 @@
 import { DiagramAfterJazz } from "@/components/DiagramAfterJazz";
 import { DiagramBeforeJazz } from "@/components/DiagramBeforeJazz";
+import { Icon } from "gcmp-design-system/src/app/components/atoms/Icon";
 import { Prose } from "gcmp-design-system/src/app/components/molecules/Prose";
 import { SectionHeader } from "gcmp-design-system/src/app/components/molecules/SectionHeader";
-import { ArrowDownIcon, ArrowRightIcon } from "lucide-react";
 
 export default function ProblemStatementSection() {
   return (
@@ -17,12 +17,12 @@ export default function ProblemStatementSection() {
         <div className="flex flex-col bg-stone-50 relative gap-3 p-4 pb-8 md:p-8 md:gap-5 border-b sm:border-b-0 sm:border-r dark:bg-transparent dark:border-stone-900">
           <span className="hidden absolute top-0 -right-4 md:-right-6 sm:flex items-center h-full">
             <span className="p-1 md:p-3 bg-stone-200 rounded-full dark:bg-stone-900 dark:text-white">
-              <ArrowRightIcon size={24} />
+              <Icon name="arrowRight" />
             </span>
           </span>
           <span className="sm:hidden w-full absolute -bottom-6 flex justify-center left-0">
             <span className="p-3 bg-stone-200 rounded-full dark:bg-stone-900 dark:text-white">
-              <ArrowDownIcon size={24} />
+              <Icon name="arrowDown" />
             </span>
           </span>
           <Prose>

homepage/homepage/components/home/SupportedEnvironmentsSection.tsx

@@ -6,7 +6,7 @@ import { RustLogo } from "@/components/icons/RustLogo";
 import { SvelteLogo } from "@/components/icons/SvelteLogo";
 import { SwiftLogo } from "@/components/icons/SwiftLogo";
 import { VueLogo } from "@/components/icons/VueLogo";
-import { GlobeIcon } from "lucide-react";
+import { Icon } from "gcmp-design-system/src/app/components/atoms/Icon";
 import React from "react";
 
 export function SupportedEnvironmentsSection() {
@@ -14,8 +14,9 @@ export function SupportedEnvironmentsSection() {
     {
       name: "Browser (vanilla JS)",
       icon: (
-        <GlobeIcon
-          strokeWidth={1}
+        <Icon
+          name="browser"
+          size="3xl"
           className="text-stone-900 dark:text-white"
           height="1em"
           width="1em"

homepage/homepage/components/nav.tsx

@@ -2,7 +2,6 @@ import { ThemeToggle } from "@/components/ThemeToggle";
 import { socials } from "@/lib/socials";
 import { JazzLogo } from "gcmp-design-system/src/app/components/atoms/logos/JazzLogo";
 import { Nav } from "gcmp-design-system/src/app/components/organisms/Nav";
-import { BookTextIcon, BoxIcon, CodeIcon } from "lucide-react";
 import { DocNav } from "./docs/nav";
 
 export function JazzNav() {
@@ -17,36 +16,21 @@ export function JazzNav() {
           href: "/docs",
           items: [
             {
-              icon: (
-                <BookTextIcon
-                  className="size-5 stroke-blue dark:stroke-blue-500 shrink-0"
-                  strokeWidth={1.5}
-                />
-              ),
+              icon: "docs",
               title: "Documentation",
               href: "/docs",
               description:
                 "Get started with using Jazz by learning the core concepts, and going through guides.",
             },
             {
-              icon: (
-                <CodeIcon
-                  className="size-5 stroke-blue dark:stroke-blue-500 shrink-0"
-                  strokeWidth={1.5}
-                />
-              ),
+              icon: "code",
               title: "Example apps",
               href: "/examples",
               description:
                 "Demo and source code for example apps built with Jazz.",
             },
             {
-              icon: (
-                <BoxIcon
-                  className="size-5 stroke-blue dark:stroke-blue-500 shrink-0"
-                  strokeWidth={1.5}
-                />
-              ),
+              icon: "package",
               title: "API reference",
               href: "/api-reference",
               description:

homepage/homepage/lib/docNavigationItems.ts

@@ -98,7 +98,7 @@ export const docNavigationItems = [
       {
         name: "Groups as permission scopes",
         href: "/docs/groups/intro",
-        done: 0,
+        done: 10,
       },
       {
         name: "Public sharing & Invites",
@@ -162,6 +162,16 @@ export const docNavigationItems = [
       },
     ],
   },
+  {
+    name: "Design patterns",
+    items: [
+      {
+        name: "Organization/Team",
+        href: "/docs/design-patterns/organization",
+        done: 80,
+      },
+    ],
+  },
   {
     name: "Resources",
     items: [

homepage/homepage/vercel.json

@@ -0,0 +1,8 @@
+{
+  "build": {
+    "env": {
+      "APP_NAME": "jazz-homepage"
+    }
+  },
+  "ignoreCommand": "node ../../ignore-vercel-build.js"
+}

ignore-vercel-build.js

@@ -0,0 +1,40 @@
+import { execSync } from "child_process";
+
+const branchName =
+  process.env.VERCEL_GIT_COMMIT_REF ||
+  execSync("git rev-parse --abbrev-ref HEAD").toString().trim();
+const currentAppName = process.env.APP_NAME;
+const homepageAppName = "jazz-homepage";
+
+if (
+  branchName === "main" &&
+  process.env.VERCEL_GIT_COMMIT_MESSAGE?.includes("docs")
+) {
+  // If merging a "docs" branch into "main" (commit message contains "docs"), skip all apps except "homepage"
+  if (currentAppName === homepageAppName) {
+    console.log(
+      `✅ Building homepage because a "docs" branch was merged into "main".`,
+    );
+    process.exit(1); // Continue with the build
+  } else {
+    console.log(
+      `🛑 Skipping build for ${currentAppName} after "docs" branch merged to main.`,
+    );
+    process.exit(0); // Skip the build
+  }
+} else if (branchName.includes("docs")) {
+  // If on a "docs" branch, skip all apps except "homepage"
+  if (currentAppName === homepageAppName) {
+    console.log(`✅ Building homepage for "docs" branch.`);
+    process.exit(1); // Continue with the build
+  } else {
+    console.log(`🛑 Skipping build for ${currentAppName} on "docs" branch.`);
+    process.exit(0); // Skip the build
+  }
+}
+
+// Default behavior: build everything.
+console.log(
+  `✅ Proceeding with build for ${currentAppName} on branch ${branchName}.`,
+);
+process.exit(1);

package.json

@@ -30,7 +30,7 @@
     "format-and-lint:fix": "biome check . --write",
     "changeset": "changeset",
     "changeset-version": "changeset version && pnpm i --no-frozen-lockfile",
-    "release": "pnpm changeset publish && git push --follow-tags",
+    "release": "turbo run build --filter='./packages/*' && pnpm changeset publish && git push --follow-tags",
     "clean": "rm -rf ./packages/*/dist && rm -rf ./packages/*/node_modules && rm -rf ./examples/*/node_modules && rm -rf ./examples/*/dist"
   },
   "version": "0.0.0",

packages/cojson-storage-indexeddb/CHANGELOG.md

@@ -1,5 +1,30 @@
 # cojson-storage-indexeddb
 
+## 0.8.44
+
+### Patch Changes
+
+- Updated dependencies [5d20c81]
+  - cojson@0.8.44
+  - cojson-storage@0.8.44
+
+## 0.8.41
+
+### Patch Changes
+
+- Updated dependencies [3252502]
+- Updated dependencies [6370348]
+- Updated dependencies [ac216b9]
+  - cojson@0.8.41
+  - cojson-storage@0.8.41
+
+## 0.8.40
+
+### Patch Changes
+
+- Updated dependencies [e905c84]
+  - cojson-storage@0.8.40
+
 ## 0.8.39
 
 ### Patch Changes

packages/cojson-storage-indexeddb/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cojson-storage-indexeddb",
-  "version": "0.8.39",
+  "version": "0.8.44",
   "main": "dist/index.js",
   "type": "module",
   "types": "src/index.ts",

packages/cojson-storage-sqlite/CHANGELOG.md

@@ -1,5 +1,30 @@
 # cojson-storage-sqlite
 
+## 0.8.44
+
+### Patch Changes
+
+- Updated dependencies [5d20c81]
+  - cojson@0.8.44
+  - cojson-storage@0.8.44
+
+## 0.8.41
+
+### Patch Changes
+
+- Updated dependencies [3252502]
+- Updated dependencies [6370348]
+- Updated dependencies [ac216b9]
+  - cojson@0.8.41
+  - cojson-storage@0.8.41
+
+## 0.8.40
+
+### Patch Changes
+
+- Updated dependencies [e905c84]
+  - cojson-storage@0.8.40
+
 ## 0.8.39
 
 ### Patch Changes

packages/cojson-storage-sqlite/package.json

@@ -1,13 +1,13 @@
 {
   "name": "cojson-storage-sqlite",
   "type": "module",
-  "version": "0.8.39",
+  "version": "0.8.44",
   "main": "dist/index.js",
   "types": "src/index.ts",
   "license": "MIT",
   "dependencies": {
     "better-sqlite3": "^11.7.0",
-    "cojson": "workspace:0.8.39",
+    "cojson": "workspace:0.8.44",
     "cojson-storage": "workspace:*"
   },
   "devDependencies": {

packages/cojson-storage/CHANGELOG.md

@@ -1,5 +1,27 @@
 # cojson-storage
 
+## 0.8.44
+
+### Patch Changes
+
+- Updated dependencies [5d20c81]
+  - cojson@0.8.44
+
+## 0.8.41
+
+### Patch Changes
+
+- Updated dependencies [3252502]
+- Updated dependencies [6370348]
+- Updated dependencies [ac216b9]
+  - cojson@0.8.41
+
+## 0.8.40
+
+### Patch Changes
+
+- e905c84: Stop the use of incremental streaming of large CoValue content from local storage peers that triggers sync protocol bug leading to redundant syncing from server peers.
+
 ## 0.8.39
 
 ### Patch Changes

packages/cojson-storage/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cojson-storage",
-  "version": "0.8.39",
+  "version": "0.8.44",
   "main": "dist/index.js",
   "type": "module",
   "types": "src/index.ts",

packages/cojson-storage/src/syncManager.ts

@@ -60,11 +60,6 @@ export class SyncManager {
 
     const firstNewTxIdx = peerKnownState.sessions[sessionRow.sessionID] || 0;
 
-    const signaturesAndIdxs = await this.dbClient.getSignatures(
-      sessionRow.rowID,
-      firstNewTxIdx,
-    );
-
     const newTxsInSession = await this.dbClient.getNewTransactionInSession(
       sessionRow.rowID,
       firstNewTxIdx,
@@ -74,8 +69,6 @@ export class SyncManager {
       newTxsInSession,
       newContentMessages,
       sessionRow,
-      signaturesAndIdxs,
-      peerKnownState,
       firstNewTxIdx,
     });
   }