remove unused packages and css

.changeset/plenty-walls-marry.md

@@ -1,5 +0,0 @@
----
-"jazz-inspector": patch
----
-
-install clsx, remove lucide-react

examples/chat-rn-clerk/CHANGELOG.md

@@ -1,16 +1,5 @@
 # chat-rn-clerk
 
-## 1.0.87
-
-### Patch Changes
-
-- 1bfa9bb: Removed when="singedUp" from examples apps' Jazz providers. This is a really niche use-case option and can lead to broken-feeling experiences when anonymous users try to load something.
-- Updated dependencies [e7c85b7]
-  - jazz-react-native@0.11.6
-  - jazz-tools@0.11.6
-  - jazz-react-native-auth-clerk@0.11.6
-  - jazz-react-native-media-images@0.11.6
-
 ## 1.0.86
 
 ### Patch Changes

examples/chat-rn-clerk/package.json

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

examples/chat-rn-clerk/src/auth-context.tsx

@@ -12,6 +12,7 @@ export function JazzAndAuth({ children }: PropsWithChildren) {
       storage="sqlite"
       sync={{
         peer: `wss://cloud.jazz.tools/?key=${apiKey}`,
+        when: "signedUp", // This makes the app work in local mode when the user is not authenticated
       }}
     >
       {children}

examples/chat-rn/CHANGELOG.md

@@ -1,13 +1,5 @@
 # chat-rn
 
-## 1.0.83
-
-### Patch Changes
-
-- Updated dependencies [e7c85b7]
-  - jazz-react-native@0.11.6
-  - jazz-tools@0.11.6
-
 ## 1.0.82
 
 ### Patch Changes

examples/chat-rn/package.json

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

examples/chat-vue/CHANGELOG.md

@@ -1,14 +1,5 @@
 # chat-vue
 
-## 0.0.68
-
-### Patch Changes
-
-- Updated dependencies [e7c85b7]
-  - jazz-tools@0.11.6
-  - jazz-vue@0.11.6
-  - jazz-browser@0.11.6
-
 ## 0.0.67
 
 ### Patch Changes

examples/chat-vue/README.md

@@ -11,12 +11,12 @@ You can either
 
 Create a new Jazz project, and use this example as a template.
 ```bash
-npx create-jazz-app@latest chat-vue-app --example chat-vue
+npx create-jazz-app@latest --example chat-vue --project-name chat-vue
 ```
 
 Go to the new project directory.
 ```bash
-cd chat-vue-app
+cd chat-vue
 ```
 
 Run the dev server.

examples/chat-vue/package.json

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

examples/chat/CHANGELOG.md

@@ -1,18 +1,5 @@
 # jazz-example-chat
 
-## 0.0.165
-
-### Patch Changes
-
-- Updated dependencies [e7c85b7]
-- Updated dependencies [09f0a98]
-- Updated dependencies [11da4d1]
-- Updated dependencies [8ed144e]
-  - jazz-react@0.11.6
-  - jazz-tools@0.11.6
-  - jazz-inspector@0.11.6
-  - jazz-browser-media-images@0.11.6
-
 ## 0.0.164
 
 ### Patch Changes

examples/chat/README.md

@@ -13,12 +13,12 @@ You can either
 
 Create a new Jazz project, and use this example as a template.
 ```bash
-npx create-jazz-app@latest chat-app --example chat
+npx create-jazz-app@latest --example chat --project-name chat
 ```
 
 Go to the new project directory.
 ```bash
-cd chat-app
+cd chat
 ```
 
 Run the dev server.

examples/chat/package.json

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

examples/clerk/CHANGELOG.md

@@ -1,15 +1,5 @@
 # minimal-auth-clerk
 
-## 0.0.64
-
-### Patch Changes
-
-- 1bfa9bb: Removed when="singedUp" from examples apps' Jazz providers. This is a really niche use-case option and can lead to broken-feeling experiences when anonymous users try to load something.
-- Updated dependencies [e7c85b7]
-  - jazz-react@0.11.6
-  - jazz-tools@0.11.6
-  - jazz-react-auth-clerk@0.11.6
-
 ## 0.0.63
 
 ### Patch Changes

examples/clerk/README.md

@@ -15,12 +15,12 @@ You can either
 
 Create a new Jazz project, and use this example as a template.
 ```bash
-npx create-jazz-app@latest clerk-app --example clerk
+npx create-jazz-app@latest --example clerk --project-name clerk
 ```
 
 Go to the new project directory.
 ```bash
-cd clerk-app
+cd clerk
 ```
 
 Run the dev server.

examples/clerk/package.json

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

examples/clerk/src/main.tsx

@@ -21,6 +21,7 @@ function JazzProvider({ children }: { children: React.ReactNode }) {
       clerk={clerk}
       sync={{
         peer: `wss://cloud.jazz.tools/?key=${apiKey}`,
+        when: "signedUp", // This makes the app work in local mode when the user is not authenticated
       }}
     >
       {children}

examples/file-share-svelte/CHANGELOG.md

@@ -1,14 +1,5 @@
 # file-share-svelte
 
-## 0.0.48
-
-### Patch Changes
-
-- 1bfa9bb: Removed when="singedUp" from examples apps' Jazz providers. This is a really niche use-case option and can lead to broken-feeling experiences when anonymous users try to load something.
-- Updated dependencies [e7c85b7]
-  - jazz-tools@0.11.6
-  - jazz-svelte@0.11.6
-
 ## 0.0.47
 
 ### Patch Changes

examples/file-share-svelte/package.json

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

examples/file-share-svelte/src/routes/+layout.svelte

@@ -27,6 +27,7 @@
   AccountSchema={FileShareAccount}
   sync={{
     peer: `wss://cloud.jazz.tools/?key=${apiKey}`,
+    when: "signedUp",
   }}
 >
   <PasskeyAuthBasicUI appName="File Share">

examples/filestream/CHANGELOG.md

@@ -1,13 +1,5 @@
 # jazz-tailwind-demo-auth-starter
 
-## 0.0.4
-
-### Patch Changes
-
-- Updated dependencies [e7c85b7]
-  - jazz-react@0.11.6
-  - jazz-tools@0.11.6
-
 ## 0.0.3
 
 ### Patch Changes

examples/filestream/package.json

@@ -1,7 +1,7 @@
 {
   "name": "filestream",
   "private": true,
-  "version": "0.0.4",
+  "version": "0.0.3",
   "type": "module",
   "scripts": {
     "dev": "vite",

examples/form/CHANGELOG.md

@@ -1,15 +1,5 @@
 # form
 
-## 0.1.6
-
-### Patch Changes
-
-- Updated dependencies [e7c85b7]
-- Updated dependencies [8ed144e]
-  - jazz-react@0.11.6
-  - jazz-tools@0.11.6
-  - jazz-browser-media-images@0.11.6
-
 ## 0.1.5
 
 ### Patch Changes

examples/form/README.md

@@ -28,12 +28,12 @@ You can either
 
 Create a new Jazz project, and use this example as a template.
 ```bash
-npx create-jazz-app@latest form-app --example form
+npx create-jazz-app@latest --example form --project-name form
 ```
 
 Go to the new project directory.
 ```bash
-cd form-app
+cd form
 ```
 
 Run the dev server.

examples/form/package.json

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

examples/image-upload/CHANGELOG.md

@@ -1,15 +1,5 @@
 # image-upload
 
-## 0.0.62
-
-### Patch Changes
-
-- Updated dependencies [e7c85b7]
-- Updated dependencies [8ed144e]
-  - jazz-react@0.11.6
-  - jazz-tools@0.11.6
-  - jazz-browser-media-images@0.11.6
-
 ## 0.0.61
 
 ### Patch Changes

examples/image-upload/README.md

@@ -15,12 +15,12 @@ You can either
 
 Create a new Jazz project, and use this example as a template.
 ```bash
-npx create-jazz-app@latest image-upload-app --example image-upload
+npx create-jazz-app@latest --example image-upload --project-name image-upload
 ```
 
 Go to the new project directory.
 ```bash
-cd image-upload-app
+cd image-upload
 ```
 
 Run the dev server.

examples/image-upload/package.json

@@ -1,7 +1,7 @@
 {
   "name": "image-upload",
   "private": true,
-  "version": "0.0.62",
+  "version": "0.0.61",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -24,9 +24,6 @@
     "@vitejs/plugin-react": "^4.3.3",
     "globals": "^15.11.0",
     "typescript": "~5.6.2",
-    "vite": "^6.0.11",
-    "autoprefixer": "^10.4.20",
-    "postcss": "^8.4.27",
-    "tailwindcss": "^3.4.17"
+    "vite": "^6.0.11"
   }
 }

examples/image-upload/postcss.config.js

@@ -1,6 +0,0 @@
-export default {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-};

examples/image-upload/src/App.tsx

@@ -3,7 +3,7 @@ import ImageUpload from "./ImageUpload.tsx";
 function App() {
   return (
     <>
-      <main className="container py-16">
+      <main className="container">
         <ImageUpload />
       </main>
     </>

examples/image-upload/src/ImageUpload.tsx

@@ -1,97 +1,60 @@
 import { createImage } from "jazz-browser-media-images";
 import { ProgressiveImg, useAccount } from "jazz-react";
-import { ChangeEvent, useEffect, useRef, useState } from "react";
+import { ImageDefinition } from "jazz-tools";
+import { ChangeEvent, useRef } from "react";
+
+function Image({ image }: { image: ImageDefinition }) {
+  return (
+    <ProgressiveImg image={image}>
+      {({ src }) => <img src={src} />}
+    </ProgressiveImg>
+  );
+}
 
 export default function ImageUpload() {
   const { me } = useAccount();
-  const [imagePreviewUrl, setImagePreviewUrl] = useState<string | null>(null);
+
   const inputRef = useRef<HTMLInputElement>(null);
 
-  useEffect(() => {
-    const handleBeforeUnload = (e: BeforeUnloadEvent) => {
-      if (imagePreviewUrl) {
-        e.preventDefault();
-        return "Upload in progress. Are you sure you want to leave?";
-      }
-    };
-
-    window.addEventListener("beforeunload", handleBeforeUnload);
-    return () => {
-      window.removeEventListener("beforeunload", handleBeforeUnload);
-
-      if (imagePreviewUrl) {
-        URL.revokeObjectURL(imagePreviewUrl);
-      }
-    };
-  }, [imagePreviewUrl]);
-
   const onImageChange = async (event: ChangeEvent<HTMLInputElement>) => {
     if (!me?.profile) return;
 
     const file = event.currentTarget.files?.[0];
 
     if (file) {
-      const objectUrl = URL.createObjectURL(file);
-      setImagePreviewUrl(objectUrl);
-
-      try {
-        me.profile.image = await createImage(file, {
-          owner: me.profile._owner,
-        });
-      } catch (error) {
-        console.error("Error uploading image:", error);
-      } finally {
-        URL.revokeObjectURL(objectUrl);
-        setImagePreviewUrl(null);
-      }
+      me.profile.image = await createImage(file, {
+        owner: me.profile._owner,
+      });
     }
   };
 
   const deleteImage = () => {
     if (!me?.profile) return;
+
     me.profile.image = null;
   };
 
-  if (me?.profile?.image) {
-    return (
-      <>
-        <ProgressiveImg image={me.profile.image}>
-          {({ src }) => <img alt="" src={src} className="w-full h-auto" />}
-        </ProgressiveImg>
-
-        <button type="button" onClick={deleteImage} className="mt-5">
-          Delete image
-        </button>
-      </>
-    );
-  }
-
-  if (imagePreviewUrl) {
-    return (
-      <div className="relative">
-        <p className="z-10 absolute font-semibold text-gray-900 inset-0 flex items-center justify-center">
-          Uploading image...
-        </p>
-        <img
-          src={imagePreviewUrl}
-          alt="Preview"
-          className="opacity-50 w-full h-auto"
-        />
-      </div>
-    );
-  }
-
   return (
-    <div className="flex flex-col gap-3">
-      <label htmlFor="image">Image</label>
-      <input
-        id="image"
-        name="image"
-        ref={inputRef}
-        type="file"
-        accept="image/png, image/jpeg, image/gif, image/bmp"
-        onChange={onImageChange}
-      />
-    </div>
+    <>
+      <div>{me?.profile?.image && <Image image={me.profile.image} />}</div>
+
+      <div>
+        {me?.profile?.image ? (
+          <button type="button" onClick={deleteImage}>
+            Delete image
+          </button>
+        ) : (
+          <div>
+            <label>Upload image</label>
+            <input
+              ref={inputRef}
+              type="file"
+              accept="image/png, image/jpeg, image/gif"
+              onChange={onImageChange}
+            />
+          </div>
+        )}
+      </div>
+    </>
   );
 }

examples/image-upload/src/index.css

@@ -1,3 +1,82 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  --border-color: #2f2e2d;
+}
+
+html,
+body,
+#root {
+  height: 100%;
+}
+
+body {
+  margin: 0;
+}
+
+button {
+  border-radius: 8px;
+  border: 0;
+  padding: 0.6em 1.2em;
+  font-weight: 500;
+  background-color: #1a1a1a;
+  cursor: pointer;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    --border-color: #e5e5e5;
+    color: #213547;
+    background-color: #ffffff;
+  }
+
+  a:hover {
+    color: #747bff;
+  }
+
+  button {
+    background-color: #f9f9f9;
+  }
+}
+
+* {
+  border-color: var(--border-color);
+}
+
+header,
+main {
+  padding: 0.5rem 0;
+}
+
+header {
+  border-bottom: 1px solid var(--border-color);
+  margin-bottom: 2rem;
+}
+
+nav {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.container {
+  margin-right: auto;
+  margin-left: auto;
+  padding: 2rem 0.75rem;
+  max-width: 800px;
+}
+
+label {
+  display: block;
+  margin-bottom: 0.25rem;
+}

examples/image-upload/tailwind.config.ts

@@ -1,18 +0,0 @@
-import type { Config } from "tailwindcss";
-
-const config: Config = {
-  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
-  theme: {
-    extend: {
-      container: {
-        center: true,
-        padding: {
-          DEFAULT: "0.75rem",
-          sm: "1rem",
-        },
-      },
-    },
-  },
-} as const;
-
-export default config;

examples/inspector/CHANGELOG.md

@@ -1,18 +1,5 @@
 # jazz-example-inspector
 
-## 0.0.115
-
-### Patch Changes
-
-- 09f0a98: UI and JSON display improvements
-- 11da4d1: isolate class name hashing on inspector
-- Updated dependencies [09f0a98]
-- Updated dependencies [11da4d1]
-- Updated dependencies [8ed144e]
-  - jazz-inspector@0.11.6
-  - cojson@0.11.6
-  - cojson-transport-ws@0.11.6
-
 ## 0.0.114
 
 ### Patch Changes

examples/inspector/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jazz-inspector-app",
   "private": true,
-  "version": "0.0.115",
+  "version": "0.0.114",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -13,8 +13,8 @@
   "dependencies": {
     "jazz-inspector": "workspace:*",
     "clsx": "^2.0.0",
-    "cojson": "workspace:0.11.6",
-    "cojson-transport-ws": "workspace:0.11.6",
+    "cojson": "workspace:0.11.5",
+    "cojson-transport-ws": "workspace:0.11.5",
     "hash-slash": "workspace:0.2.2",
     "lucide-react": "^0.274.0",
     "react": "^18.3.1",

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

@@ -9,14 +9,8 @@ import {
 } from "cojson";
 import { createWebSocketPeer } from "cojson-transport-ws";
 import { WasmCrypto } from "cojson/crypto/WasmCrypto";
-import {
-  Breadcrumbs,
-  Button,
-  Icon,
-  Input,
-  PageStack,
-  Select,
-} from "jazz-inspector";
+import { Breadcrumbs, PageStack } from "jazz-inspector";
+import { Trash2 } from "lucide-react";
 import React, { useState, useEffect } from "react";
 import { usePagePath } from "./use-page-path";
 import { resolveCoValue, useResolvedCoValue } from "./use-resolve-covalue";
@@ -126,23 +120,15 @@ export default function CoJsonViewerApp() {
   }
 
   return (
-    <div
-      className={clsx(
-        "h-screen overflow-hidden flex flex-col",
-        " text-stone-700 bg-white",
-        "dark:text-stone-300 dark:bg-stone-950",
-      )}
-    >
-      <header className="flex items-center gap-4 p-3">
+    <div className="w-full h-screen bg-white p-4 overflow-hidden flex flex-col">
+      <div className="flex items-center mb-4 gap-4">
         <Breadcrumbs path={path} onBreadcrumbClick={goToIndex} />
         <div className="flex-1">
           <form onSubmit={handleCoValueIdSubmit}>
             {path.length !== 0 && (
-              <Input
-                className="min-w-[21rem] font-mono"
+              <input
+                className="border p-2 rounded-lg min-w-[21rem] font-mono"
                 placeholder="co_z1234567890abcdef123456789"
-                label="CoValue ID"
-                hideLabel
                 value={coValueId}
                 onChange={(e) =>
                   setCoValueId(e.target.value as CoID<RawCoValue>)
@@ -158,7 +144,7 @@ export default function CoJsonViewerApp() {
           deleteCurrentAccount={deleteCurrentAccount}
           localNode={localNode}
         />
-      </header>
+      </div>
 
       <PageStack
         path={path}
@@ -166,39 +152,49 @@ export default function CoJsonViewerApp() {
         goBack={goBack}
         addPages={addPages}
       >
-        {!currentAccount && <AddAccountForm addAccount={addAccount} />}
-
-        {currentAccount && path.length <= 0 && (
+        {!currentAccount ? (
+          <AddAccountForm addAccount={addAccount} />
+        ) : (
           <form
             onSubmit={handleCoValueIdSubmit}
             aria-hidden={path.length !== 0}
-            className="flex flex-col relative -top-6 justify-center gap-2 h-full w-full max-w-sm mx-auto"
+            className={clsx(
+              "flex flex-col justify-center items-center gap-2 h-full w-full mb-20 ",
+              "transition-all duration-150",
+              path.length > 0
+                ? "opacity-0 -translate-y-2 scale-95"
+                : "opacity-100",
+            )}
           >
-            <h1 className="text-lg text-center font-medium mb-4 text-stone-900 dark:text-white">
-              Jazz CoValue Inspector
-            </h1>
-            <Input
-              label="CoValue ID"
-              className="font-mono"
-              hideLabel
-              placeholder="co_z1234567890abcdef123456789"
-              value={coValueId}
-              onChange={(e) => setCoValueId(e.target.value as CoID<RawCoValue>)}
-            />
-            <Button type="submit" variant="primary">
-              Inspect CoValue
-            </Button>
-
-            <p className="text-center">or</p>
-
-            <Button
-              variant="secondary"
-              onClick={() => {
-                setPage(currentAccount.id);
-              }}
-            >
-              Inspect my account
-            </Button>
+            <fieldset className="flex flex-col gap-2 text-sm">
+              <h2 className="text-3xl font-medium text-gray-950 text-center mb-4">
+                Jazz CoValue Inspector
+              </h2>
+              <input
+                className="border p-4 rounded-lg min-w-[21rem] font-mono"
+                placeholder="co_z1234567890abcdef123456789"
+                value={coValueId}
+                onChange={(e) =>
+                  setCoValueId(e.target.value as CoID<RawCoValue>)
+                }
+              />
+              <button
+                type="submit"
+                className="bg-indigo-500 hover:bg-indigo-500/80 text-white px-4 py-2 rounded-md"
+              >
+                Inspect
+              </button>
+              <hr />
+              <button
+                type="button"
+                className="border inline-block px-2 py-1.5 text-black rounded"
+                onClick={() => {
+                  setPage(currentAccount.id);
+                }}
+              >
+                Inspect My Account
+              </button>
+            </fieldset>
           </form>
         )}
       </PageStack>
@@ -220,11 +216,8 @@ function AccountSwitcher({
   localNode: LocalNode | null;
 }) {
   return (
-    <div className="relative flex items-stretch gap-1">
-      <Select
-        label="Account to inspect"
-        hideLabel
-        className="label:sr-only max-w-96"
+    <div className="relative flex items-center gap-1">
+      <select
         value={currentAccount?.id || "add-account"}
         onChange={(e) => {
           if (e.target.value === "add-account") {
@@ -234,6 +227,7 @@ function AccountSwitcher({
             setCurrentAccount(account || null);
           }
         }}
+        className="p-2 px-4 bg-gray-100/50 border border-indigo-500/10 backdrop-blur-sm rounded-md text-indigo-700 appearance-none"
       >
         {accounts.map((account) => (
           <option key={account.id} value={account.id}>
@@ -245,16 +239,15 @@ function AccountSwitcher({
           </option>
         ))}
         <option value="add-account">Add account</option>
-      </Select>
+      </select>
       {currentAccount && (
-        <Button
-          variant="secondary"
+        <button
           onClick={deleteCurrentAccount}
-          className="rounded-md p-2 ml-1"
-          aria-label="Remove account"
+          className="p-3 rounded hover:bg-gray-200 transition-colors"
+          title="Delete Account"
         >
-          <Icon name="delete" className="text-gray-500" />
-        </Button>
+          <Trash2 size={16} className="text-gray-500" />
+        </button>
       )}
     </div>
   );
@@ -278,34 +271,30 @@ function AddAccountForm({
   return (
     <form
       onSubmit={handleSubmit}
-      className="flex flex-col gap-3 max-w-md mx-auto h-full justify-center"
+      className="flex flex-col gap-2 max-w-md mx-auto h-full justify-center"
     >
-      <h2 className="text-2xl font-medium text-gray-900 dark:text-white">
-        Add an account to inspect
+      <h2 className="text-2xl font-medium text-gray-900 mb-3">
+        Add an Account to Inspect
       </h2>
-      <p className="leading-relaxed mb-5">
-        Use the{" "}
-        <code className="whitespace-nowrap text-stone-900 dark:text-white font-semibold">
-          jazz-logged-in-secret
-        </code>{" "}
-        local storage key from within your Jazz app for your account
-        credentials.
-      </p>
-      <Input
-        label="Account ID"
+      <input
+        className="border py-2 px-3 rounded-md"
+        placeholder="Account ID"
         value={id}
-        placeholder="co_z1234567890abcdef123456789"
         onChange={(e) => setId(e.target.value)}
       />
-      <Input
-        label="Account secret"
+      <input
         type="password"
+        className="border py-2 px-3 rounded-md"
+        placeholder="Account Secret"
         value={secret}
         onChange={(e) => setSecret(e.target.value)}
       />
-      <Button className="mt-3" type="submit">
-        Add account
-      </Button>
+      <button
+        type="submit"
+        className="bg-indigo-500 text-white px-4 py-2 rounded-md"
+      >
+        Add Account
+      </button>
     </form>
   );
 }

examples/inspector/tailwind.config.ts

@@ -1,5 +1,4 @@
 import type { Config } from "tailwindcss";
-import plugin from "tailwindcss/plugin";
 
 const stonePalette = {
   50: "oklch(0.988281 0.002 75)",
@@ -62,7 +61,6 @@ const config: Config = {
       },
     },
   },
-  plugins: [plugin(({ addVariant }) => addVariant("label", "& :is(label)"))],
 };
 
 export default config;

examples/multiauth/CHANGELOG.md

@@ -1,15 +1,5 @@
 # multiauth
 
-## 0.0.5
-
-### Patch Changes
-
-- 1bfa9bb: Removed when="singedUp" from examples apps' Jazz providers. This is a really niche use-case option and can lead to broken-feeling experiences when anonymous users try to load something.
-- Updated dependencies [e7c85b7]
-  - jazz-react@0.11.6
-  - jazz-tools@0.11.6
-  - jazz-react-auth-clerk@0.11.6
-
 ## 0.0.4
 
 ### Patch Changes

examples/multiauth/README.md

@@ -13,11 +13,11 @@ To run this example, you may either:
 
 1. Create a new Jazz project, and use this example as a template.
 ```bash
-npx create-jazz-app@latest counter-app --example counter
+npx create-jazz-app@latest --example counter --project-name counter
 ```
 2. Navigate to the new project and start the development server.
 ```bash
-cd counter-app
+cd counter
 npm run dev
 ```
 

examples/multiauth/package.json

@@ -1,7 +1,7 @@
 {
   "name": "multiauth",
   "private": true,
-  "version": "0.0.5",
+  "version": "0.0.4",
   "type": "module",
   "scripts": {
     "dev": "vite",

examples/multiauth/src/main.tsx

@@ -19,6 +19,7 @@ createRoot(document.getElementById("root")!).render(
       <OmniAuth
         sync={{
           peer: `wss://cloud.jazz.tools/?key=${apiKey}`,
+          when: "signedUp", // This makes the app work in local mode when the user is not authenticated
         }}
       >
         <App />

examples/music-player/CHANGELOG.md

@@ -1,17 +1,5 @@
 # jazz-example-musicplayer
 
-## 0.0.86
-
-### Patch Changes
-
-- 1bfa9bb: Removed when="singedUp" from examples apps' Jazz providers. This is a really niche use-case option and can lead to broken-feeling experiences when anonymous users try to load something.
-- Updated dependencies [e7c85b7]
-- Updated dependencies [09f0a98]
-- Updated dependencies [11da4d1]
-  - jazz-react@0.11.6
-  - jazz-tools@0.11.6
-  - jazz-inspector@0.11.6
-
 ## 0.0.85
 
 ### Patch Changes

examples/music-player/README.md

@@ -13,12 +13,12 @@ You can either
 
 Create a new Jazz project, and use this example as a template.
 ```bash
-npx create-jazz-app@latest music-player-app --example music-player
+npx create-jazz-app@latest --example music-player --project-name music-player
 ```
 
 Go to the new project directory.
 ```bash
-cd music-player-app
+cd music-player
 ```
 
 Run the dev server.

examples/music-player/package.json

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

examples/organization/CHANGELOG.md

@@ -1,13 +1,5 @@
 # organization
 
-## 0.0.58
-
-### Patch Changes
-
-- Updated dependencies [e7c85b7]
-  - jazz-react@0.11.6
-  - jazz-tools@0.11.6
-
 ## 0.0.57
 
 ### Patch Changes

examples/organization/README.md

@@ -16,12 +16,12 @@ You can either
 
 Create a new Jazz project, and use this example as a template.
 ```bash
-npx create-jazz-app@latest organization-app --example organization
+npx create-jazz-app@latest --example organization --project-name organization
 ```
 
 Go to the new project directory.
 ```bash
-cd organization-app
+cd organization
 ```
 
 Run the dev server.

examples/organization/package.json

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

examples/passkey-svelte/CHANGELOG.md

@@ -1,12 +1,5 @@
 # passkey-svelte
 
-## 0.0.52
-
-### Patch Changes
-
-- 1bfa9bb: Removed when="singedUp" from examples apps' Jazz providers. This is a really niche use-case option and can lead to broken-feeling experiences when anonymous users try to load something.
-  - jazz-svelte@0.11.6
-
 ## 0.0.51
 
 ### Patch Changes

examples/passkey-svelte/README.md

@@ -21,12 +21,12 @@ You can either
 
 Create a new Jazz project, and use this example as a template.
 ```bash
-npx create-jazz-app@latest passkey-svelte-app --example passkey-svelte
+npx create-jazz-app@latest --example passkey-svelte --project-name passkey-svelte
 ```
 
 Go to the new project directory.
 ```bash
-cd passkey-svelte-app
+cd passkey-svelte
 ```
 
 Run the dev server.

examples/passkey-svelte/package.json

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

examples/passkey-svelte/src/routes/+layout.svelte

@@ -8,6 +8,7 @@
 <JazzProvider
   sync={{
     peer: `wss://cloud.jazz.tools/?key={apiKey}`,
+    when: "signedUp",
   }}
 >
   <PasskeyAuthBasicUI appName="minimal-svelte-auth-passkey">

examples/passkey/CHANGELOG.md

@@ -1,14 +1,5 @@
 # minimal-auth-passkey
 
-## 0.0.63
-
-### Patch Changes
-
-- 1bfa9bb: Removed when="singedUp" from examples apps' Jazz providers. This is a really niche use-case option and can lead to broken-feeling experiences when anonymous users try to load something.
-- Updated dependencies [e7c85b7]
-  - jazz-react@0.11.6
-  - jazz-tools@0.11.6
-
 ## 0.0.62
 
 ### Patch Changes

examples/passkey/README.md

@@ -15,12 +15,12 @@ You can either
 
 Create a new Jazz project, and use this example as a template.
 ```bash
-npx create-jazz-app@latest passkey-app --example passkey
+npx create-jazz-app@latest --example passkey --project-name passkey
 ```
 
 Go to the new project directory.
 ```bash
-cd passkey-app
+cd passkey
 ```
 
 Run the dev server.

examples/passkey/package.json

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

examples/passkey/src/main.tsx

@@ -10,6 +10,7 @@ function JazzAndAuth({ children }: { children: React.ReactNode }) {
     <JazzProvider
       sync={{
         peer: `wss://cloud.jazz.tools/?key=${apiKey}`,
+        when: "signedUp",
       }}
     >
       <PasskeyAuthBasicUI appName="Jazz Minimal Auth Passkey Example">

examples/passphrase/CHANGELOG.md

@@ -1,14 +1,5 @@
 # passphrase
 
-## 0.0.60
-
-### Patch Changes
-
-- 1bfa9bb: Removed when="singedUp" from examples apps' Jazz providers. This is a really niche use-case option and can lead to broken-feeling experiences when anonymous users try to load something.
-- Updated dependencies [e7c85b7]
-  - jazz-react@0.11.6
-  - jazz-tools@0.11.6
-
 ## 0.0.59
 
 ### Patch Changes

examples/passphrase/README.md

@@ -12,12 +12,12 @@ You can either
 
 Create a new Jazz project, and use this example as a template.
 ```bash
-npx create-jazz-app@latest passphrase-app --example passphrase
+npx create-jazz-app@latest --example passphrase --project-name passphrase
 ```
 
 Go to the new project directory.
 ```bash
-cd passphrase-app
+cd passphrase
 ```
 
 Run the dev server.

examples/passphrase/package.json

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

examples/passphrase/src/main.tsx

@@ -142,6 +142,7 @@ function JazzAndAuth({ children }: { children: React.ReactNode }) {
     <JazzProvider
       sync={{
         peer: "wss://cloud.jazz.tools/?key=minimal-auth-passphrase-example@garden.co",
+        when: "signedUp",
       }}
     >
       <PassphraseAuthBasicUI

examples/password-manager/CHANGELOG.md

@@ -1,14 +1,5 @@
 # jazz-password-manager
 
-## 0.0.84
-
-### Patch Changes
-
-- 1bfa9bb: Removed when="singedUp" from examples apps' Jazz providers. This is a really niche use-case option and can lead to broken-feeling experiences when anonymous users try to load something.
-- Updated dependencies [e7c85b7]
-  - jazz-react@0.11.6
-  - jazz-tools@0.11.6
-
 ## 0.0.83
 
 ### Patch Changes

examples/password-manager/README.md

@@ -15,12 +15,12 @@ You can either
 
 Create a new Jazz project, and use this example as a template.
 ```bash
-npx create-jazz-app@latest password-manager-app --example password-manager
+npx create-jazz-app@latest --example password-manager --project-name password-manager
 ```
 
 Go to the new project directory.
 ```bash
-cd password-manager-app
+cd password-manager
 ```
 
 Run the dev server.

examples/password-manager/package.json

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

examples/password-manager/src/2_main.tsx

@@ -12,6 +12,7 @@ function JazzAndAuth({ children }: { children: React.ReactNode }) {
       AccountSchema={PasswordManagerAccount}
       sync={{
         peer: `wss://cloud.jazz.tools/?key=${apiKey}`,
+        when: "signedUp",
       }}
     >
       <PasskeyAuthBasicUI appName="Jazz Password Manager">

examples/pets/CHANGELOG.md

@@ -1,16 +1,5 @@
 # jazz-example-pets
 
-## 0.0.182
-
-### Patch Changes
-
-- 1bfa9bb: Removed when="singedUp" from examples apps' Jazz providers. This is a really niche use-case option and can lead to broken-feeling experiences when anonymous users try to load something.
-- Updated dependencies [e7c85b7]
-- Updated dependencies [8ed144e]
-  - jazz-react@0.11.6
-  - jazz-tools@0.11.6
-  - jazz-browser-media-images@0.11.6
-
 ## 0.0.181
 
 ### Patch Changes

examples/pets/README.md

@@ -13,12 +13,12 @@ You can either
 
 Create a new Jazz project, and use this example as a template.
 ```bash
-npx create-jazz-app@latest pets-app --example pets
+npx create-jazz-app@latest --example pets --project-name pets
 ```
 
 Go to the new project directory.
 ```bash
-cd pets-app
+cd pets
 ```
 
 Run the dev server.

examples/pets/package.json

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

examples/pets/src/2_main.tsx

@@ -52,6 +52,7 @@ ReactDOM.createRoot(document.getElementById("root")!).render(
         <JazzProvider
           sync={{
             peer,
+            when: "signedUp",
           }}
           AccountSchema={PetAccount}
         >

examples/reactions/CHANGELOG.md

@@ -1,16 +1,5 @@
 # reactions
 
-## 0.0.62
-
-### Patch Changes
-
-- 1bfa9bb: Removed when="singedUp" from examples apps' Jazz providers. This is a really niche use-case option and can lead to broken-feeling experiences when anonymous users try to load something.
-- Updated dependencies [e7c85b7]
-- Updated dependencies [8ed144e]
-  - jazz-react@0.11.6
-  - jazz-tools@0.11.6
-  - jazz-browser-media-images@0.11.6
-
 ## 0.0.61
 
 ### Patch Changes

examples/reactions/README.md

@@ -13,12 +13,12 @@ You can either
 
 Create a new Jazz project, and use this example as a template.
 ```bash
-npx create-jazz-app@latest reactions-app --example reactions
+npx create-jazz-app@latest --example reactions --project-name reactions
 ```
 
 Go to the new project directory.
 ```bash
-cd reactions-app
+cd reactions
 ```
 
 Run the dev server.

examples/reactions/package.json

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

examples/reactions/src/main.tsx

@@ -10,6 +10,7 @@ createRoot(document.getElementById("root")!).render(
     <JazzProvider
       sync={{
         peer: `wss://cloud.jazz.tools/?key=${apiKey}`,
+        when: "signedUp",
       }}
     >
       <PasskeyAuthBasicUI appName="Jazz Reactions Example">

examples/todo-vue/CHANGELOG.md

@@ -1,14 +1,5 @@
 # todo-vue
 
-## 0.0.66
-
-### Patch Changes
-
-- Updated dependencies [e7c85b7]
-  - jazz-tools@0.11.6
-  - jazz-vue@0.11.6
-  - jazz-browser@0.11.6
-
 ## 0.0.65
 
 ### Patch Changes

examples/todo-vue/README.md

@@ -11,12 +11,12 @@ You can either
 
 Create a new Jazz project, and use this example as a template.
 ```bash
-npx create-jazz-app@latest todo-vue-app --example todo-vue
+npx create-jazz-app@latest --example todo-vue --project-name todo-vue
 ```
 
 Go to the new project directory.
 ```bash
-cd todo-vue-app
+cd todo-vue
 ```
 
 Run the dev server.

examples/todo-vue/package.json

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

examples/todo/CHANGELOG.md

@@ -1,14 +1,5 @@
 # jazz-example-todo
 
-## 0.0.181
-
-### Patch Changes
-
-- 1bfa9bb: Removed when="singedUp" from examples apps' Jazz providers. This is a really niche use-case option and can lead to broken-feeling experiences when anonymous users try to load something.
-- Updated dependencies [e7c85b7]
-  - jazz-react@0.11.6
-  - jazz-tools@0.11.6
-
 ## 0.0.180
 
 ### Patch Changes

examples/todo/README.md

@@ -13,12 +13,12 @@ You can either
 
 Create a new Jazz project, and use this example as a template.
 ```bash
-npx create-jazz-app@latest todo-app --example todo
+npx create-jazz-app@latest --example todo --project-name todo
 ```
 
 Go to the new project directory.
 ```bash
-cd todo-app
+cd todo
 ```
 
 Run the dev server.

examples/todo/package.json

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

examples/todo/src/2_main.tsx

@@ -42,6 +42,7 @@ function JazzAndAuth({ children }: { children: React.ReactNode }) {
     <JazzProvider
       sync={{
         peer: `wss://cloud.jazz.tools/?key=${apiKey}`,
+        when: "signedUp",
       }}
       AccountSchema={TodoAccount}
     >

examples/version-history/CHANGELOG.md

@@ -1,17 +1,5 @@
 # version-history
 
-## 0.0.59
-
-### Patch Changes
-
-- 1bfa9bb: Removed when="singedUp" from examples apps' Jazz providers. This is a really niche use-case option and can lead to broken-feeling experiences when anonymous users try to load something.
-- Updated dependencies [e7c85b7]
-- Updated dependencies [09f0a98]
-- Updated dependencies [11da4d1]
-  - jazz-react@0.11.6
-  - jazz-tools@0.11.6
-  - jazz-inspector@0.11.6
-
 ## 0.0.58
 
 ### Patch Changes

examples/version-history/README.md

@@ -13,12 +13,12 @@ You can either
 
 Create a new Jazz project, and use this example as a template.
 ```bash
-npx create-jazz-app@latest version-history-app --example version-history
+npx create-jazz-app@latest --example version-history --project-name version-history
 ```
 
 Go to the new project directory.
 ```bash
-cd version-history-app
+cd version-history
 ```
 
 Run the dev server.

examples/version-history/package.json

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

examples/version-history/src/main.tsx

@@ -11,6 +11,7 @@ createRoot(document.getElementById("root")!).render(
     <JazzProvider
       sync={{
         peer: `wss://cloud.jazz.tools/?key=${apiKey}`,
+        when: "signedUp",
       }}
     >
       <DemoAuthBasicUI appName="Jazz Version History Example">

homepage/gcmp/app/api/rss/route.ts

@@ -1,37 +0,0 @@
-import { metaTags } from "@/app/layout";
-import { posts } from "@/lib/posts";
-import { Feed } from "feed";
-import { NextResponse } from "next/server";
-
-export async function GET() {
-  const feed = new Feed({
-    title: "Garden Computing Blog",
-    description: "News from Garden Computing",
-    id: metaTags.url,
-    link: `${metaTags.url}/news`,
-    language: "en",
-    image: `${metaTags.url}/social-image.png`,
-    favicon: `${metaTags.url}/favicon.ico`,
-    copyright: `${new Date().getFullYear()} Garden Computing, Inc.`,
-  });
-
-  posts.forEach((post) => {
-    feed.addItem({
-      title: post.meta.title,
-      description: post.meta.subtitle,
-      id: post.meta.slug,
-      link: `${metaTags.url}/news/${post.meta.slug}`,
-      date: new Date(post.meta.date),
-      author: [{ name: post.meta.author.name }],
-      guid: post.meta.slug,
-      image: `${metaTags.url}${post.meta.coverImage}`,
-    });
-  });
-
-  return new NextResponse(feed.rss2(), {
-    headers: {
-      "Content-Type": "application/xml",
-      "Cache-Control": "public, s-maxage=3600, stale-while-revalidate=86400",
-    },
-  });
-}

homepage/gcmp/app/layout.tsx

@@ -41,7 +41,7 @@ const commitMono = localFont({
   display: "swap",
 });
 
-export const metaTags = {
+const metaTags = {
   title: "garden computing",
   description:
     "Computers are magic. So why do we put up with so much complexity? We believe just a few new ideas can make all the difference.",
@@ -70,16 +70,6 @@ export const metadata: Metadata = {
       },
     ],
   },
-  alternates: {
-    canonical: metaTags.url,
-    types: {
-      "application/rss+xml": `${
-        process.env.VERCEL_URL
-          ? `https://${process.env.VERCEL_URL}`
-          : "http://localhost:3000"
-      }/api/rss`,
-    },
-  },
 };
 
 export default function RootLayout({

homepage/gcmp/package.json

@@ -20,7 +20,6 @@
     "@vercel/analytics": "^1.3.1",
     "@vercel/speed-insights": "^1.0.12",
     "clsx": "^2.1.1",
-    "feed": "^4.2.2",
     "gcmp-design-system": "workspace:*",
     "lucide-react": "^0.436.0",
     "mdast-util-from-markdown": "^2.0.0",

homepage/homepage/app/(docs)/docs/[framework]/[...slug]/project-setup/react-native.mdx

@@ -286,7 +286,7 @@ To display images, use the `ProgressiveImg` component from `jazz-react-native`.
   import { Image } from "react-native";
 
   // Inside your render function:
-  <ProgressiveImg image={someCovalue.image} targetWidth={1024}>
+  <ProgressiveImg image={someCovalue.image} maxWidth={1024}>
     {({ src, res, originalSize }) => (
       <Image
         source={{ uri: src }}
@@ -305,7 +305,7 @@ To display images, use the `ProgressiveImg` component from `jazz-react-native`.
 The `ProgressiveImg` component:
 - Automatically handles different image formats
 - Provides progressive loading with placeholder images
-- Supports different resolutions based on the `targetWidth` prop
+- Supports different resolutions based on the `maxWidth` prop
 - Works seamlessly with React Native's `Image` component
 
 For a complete implementation example, see the [Chat Example](https://github.com/garden-co/jazz/blob/main/examples/chat-rn-clerk/app/chat/[chatId].tsx).

homepage/homepage/app/(docs)/docs/[framework]/[...slug]/using-covalues/imagedef.mdx

@@ -152,8 +152,8 @@ if (highestRes) {
 }
 
 // Or constrain by maximum width
-const targetWidth = window.innerWidth;
-const appropriateRes = image.highestResAvailable({ targetWidth });
+const maxWidth = window.innerWidth;
+const appropriateRes = image.highestResAvailable({ maxWidth });
 ```
 </CodeGroup>
 
@@ -188,7 +188,7 @@ if (image.placeholderDataURL) {
 
 // Then load the best resolution for the current display
 const screenWidth = window.innerWidth;
-const bestRes = image.highestResAvailable({ targetWidth: screenWidth });
+const bestRes = image.highestResAvailable({ maxWidth: screenWidth });
 
 if (bestRes) {
   const blob = bestRes.stream.toBlob();

homepage/homepage/app/(docs)/docs/[framework]/[...slug]/using-covalues/imagedef/react-native.mdx

@@ -91,7 +91,7 @@ function GalleryView({ image }) {
   return (
     <ProgressiveImg
       image={image}  // The image definition to load
-      targetWidth={800} //  Looks for the best available resolution for a 800px image
+      maxWidth={800} // Limit to resolutions up to 800px wide
     >
       {({ src }) => (
         <Image 
@@ -137,7 +137,7 @@ function CustomImageComponent({ image }) {
     originalSize // The original size of the image
   } = useProgressiveImg({
     image: image,  // The image definition to load
-    targetWidth: 800  // Limit to resolutions up to 800px wide
+    maxWidth: 800  // Limit to resolutions up to 800px wide
   });
 
   // When image is not available yet

homepage/homepage/app/(docs)/docs/[framework]/[...slug]/using-covalues/imagedef/react.mdx

@@ -80,7 +80,7 @@ function GalleryView({ image }) {
     <div className="image-container">
       <ProgressiveImg
         image={image}  // The image definition to load
-        targetWidth={800} // Looks for the best available resolution for a 800px image
+        maxWidth={800} // Limit to resolutions up to 800px wide
       >
         {({ src }) => (
           <img 
@@ -118,7 +118,7 @@ function CustomImageComponent({ image }) {
     originalSize // The original size of the image
   } = useProgressiveImg({
     image: image,  // The image definition to load
-    targetWidth: 800  // Limit to resolutions up to 800px wide
+    maxWidth: 800  // Limit to resolutions up to 800px wide
   });
 
   // When image is not available yet

homepage/homepage/app/(others)/status/page.tsx

@@ -7,9 +7,6 @@ import { Fragment } from "react";
 
 const title = "Status";
 
-export const revalidate = 300
-
-
 export const metadata: Metadata = {
   title,
   openGraph: {
@@ -17,22 +14,6 @@ export const metadata: Metadata = {
   },
 };
 
-const PROBES = [
-  "Montreal",
-  "NorthCalifornia",
-  "NorthVirginia",
-  "SaoPaulo",
-  "Mumbai",
-  "Singapore",
-  "Sydney",
-  "Tokyo",
-  "CapeTown",
-  "London",
-  "Spain",
-  "UAE",
-  "Zurich",
-] as const;
-
 interface DataRow {
   up: boolean;
   latencyOverTime: [number[], number[]];
@@ -40,9 +21,9 @@ interface DataRow {
   p99Latency: number;
 }
 
-
 const query = async () => {
   const res = await fetch("https://gcmp.grafana.net/api/ds/query", {
+    next: { revalidate: 300 },
     method: "POST",
     headers: {
       "Content-Type": "application/json",
@@ -57,7 +38,7 @@ const query = async () => {
             type: "prometheus",
             uid: "grafanacloud-prom",
           },
-          expr: `probe_success{instance="https://mesh.jazz.tools/self-sync-check", job="self-sync-check", probe=~"${PROBES.join("|")}"}`,
+          expr: 'probe_success{instance="https://mesh.jazz.tools/self-sync-check", job="self-sync-check"}',
           instant: true,
           refId: "up",
         },
@@ -66,7 +47,7 @@ const query = async () => {
             type: "prometheus",
             uid: "grafanacloud-prom",
           },
-          expr: `1000 * sum(avg_over_time(probe_duration_seconds{instance="https://mesh.jazz.tools/self-sync-check", job="self-sync-check", probe=~"${PROBES.join("|")}"}[$__interval])) by (probe) / 2`,
+          expr: '1000 * avg_over_time(probe_duration_seconds{instance="https://mesh.jazz.tools/self-sync-check", job="self-sync-check"}[$__interval]) / 2',
           instant: false,
           range: true,
           interval: "15m",
@@ -77,7 +58,7 @@ const query = async () => {
             type: "prometheus",
             uid: "grafanacloud-prom",
           },
-          expr: `1000 * avg(avg_over_time(probe_duration_seconds{instance="https://mesh.jazz.tools/self-sync-check", job="self-sync-check", probe=~"${PROBES.join("|")}"}[$__range])) by (probe) / 2`,
+          expr: '1000 * avg(avg_over_time(probe_duration_seconds{instance="https://mesh.jazz.tools/self-sync-check", job="self-sync-check"}[$__range])) by (probe) / 2',
           instant: true,
           refId: "avg_latency",
         },
@@ -86,7 +67,7 @@ const query = async () => {
             type: "prometheus",
             uid: "grafanacloud-prom",
           },
-          expr: `1000 * histogram_quantile(0.95, sum(rate(probe_all_duration_seconds_bucket{instance="https://mesh.jazz.tools/self-sync-check", job="self-sync-check", probe=~"${PROBES.join("|")}"}[$__range])) by (le, probe)) / 2`,
+          expr: '1000 * histogram_quantile(0.95, sum(rate(probe_all_duration_seconds_bucket{instance="https://mesh.jazz.tools/self-sync-check", job="self-sync-check"}[$__range])) by (le, probe)) / 2',
           instant: true,
           refId: "p99_latency",
         },
@@ -99,9 +80,9 @@ const query = async () => {
   }
 
   const responseData = await res.json();
-  
+
   const byProbe: Record<string, DataRow> = {};
-  
+
   for (const frame of responseData.results.up.frames) {
     const probe = startCase(frame.schema.fields[1].labels.probe);
     byProbe[probe] = {
@@ -112,10 +93,10 @@ const query = async () => {
 
   for (const frame of responseData.results.latency_over_time.frames) {
     const probe = startCase(frame.schema.fields[1].labels.probe);
+
     byProbe[probe].latencyOverTime = frame.data.values;
   }
 
-
   for (const frame of responseData.results.avg_latency.frames) {
     const probe = startCase(frame.schema.fields[1].labels.probe);
     byProbe[probe].avgLatency = frame.data.values[1];
@@ -123,29 +104,35 @@ const query = async () => {
 
   for (const frame of responseData.results.p99_latency.frames) {
     const probe = startCase(frame.schema.fields[1].labels.probe);
-    byProbe[probe].p99Latency = frame.data.values[1]; 
+    byProbe[probe].p99Latency = frame.data.values[1];
   }
 
   const byRegion = Object.entries(byProbe).reduce<
-    Record<string, Record<"EMEA" | "AMER" | "APAC", DataRow>>
+    Record<string, Record<string, DataRow>>
   >((acc, [label, row]) => {
     switch (label) {
+      case "Amsterdam":
+      case "Frankfurt":
       case "London":
+      case "Paris":
       case "Cape Town":
-      case "Spain":
-      case "Zurich":
-      case "UAE":
         return { ...acc, EMEA: { ...acc["EMEA"], [label]: row } };
+      case "Atlanta":
+      case "Dallas":
+      case "New York":
+      case "San Francisco":
       case "North Virginia":
-      case "North California":
-      case "Montreal":
+      case "Ohio":
+      case "Oregon":
       case "Sao Paulo":
+      case "Toronto":
         return { ...acc, AMER: { ...acc["AMER"], [label]: row } };
       default:
-      case "Mumbai":
       case "Sydney":
       case "Tokyo":
-      case "Singapore":
+      case "Seoul":
+      case "Mumbai":
+      case "Bangalore":
         return { ...acc, APAC: { ...acc["APAC"], [label]: row } };
     }
   }, {});

homepage/homepage/app/globals.css

@@ -10,15 +10,6 @@
   :focus-visible {
     @apply ring-2 ring-blue/75 dark:ring-blue-400/75;
   }
-
-  details > summary {
-    @apply cursor-pointer;
-
-    &.list-none::-webkit-details-marker,
-    &.list-none::marker {
-      display: none;
-    }
-  }
 }
 
 @layer components {

homepage/homepage/app/layout.tsx

@@ -40,9 +40,9 @@ const commitMono = localFont({
 });
 
 const metaTags = {
-  title: "Jazz - Whip up an app",
+  title: "Jazz - Build local-first apps",
   description:
-    "Jazz gives you data without needing a database — plus auth, permissions, files and multiplayer without needing a backend. Do everything right from the frontend and ship better apps, faster.",
+    "Jazz is an open-source framework for building local-first apps, removing 90% of the backend and infrastructure complexity.",
   url: "https://jazz.tools",
 };
 

homepage/homepage/components/LatencyChart.tsx

@@ -57,17 +57,7 @@ export default function LatencyChart({ data }: Props) {
   return (
     <>
       <TooltipProvider delayDuration={0} skipDelayDuration={0}>
-        <figure className="flex items-stretch w-full gap-px justify-end">
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <div className={cn("rounded-md grow hover:opacity-50 dark:bg-gray-900 bg-gray-200")} />
-            </TooltipTrigger>
-            <TooltipContent>
-              <p>
-                <span className="font-semibold">No data</span>
-              </p>
-            </TooltipContent>
-          </Tooltip>
+        <figure className="flex items-stretch w-full gap-px">
           {series.map(({ value, ts }) => {
             const valueClass = getClassForValue(value);
             return (
@@ -75,7 +65,7 @@ export default function LatencyChart({ data }: Props) {
                 <TooltipTrigger asChild>
                   <div
                     className={cn(
-                      "h-6 w-1 lg:w-2 rounded-md hover:opacity-50",
+                      "h-6 w-full rounded-md hover:opacity-50",
                       valueClass,
                     )}
                   />

homepage/homepage/components/SideNav.tsx

@@ -1,10 +1,7 @@
 import { SideNavHeader } from "@/components/SideNavHeader";
 import { SideNavItem } from "@/components/SideNavItem";
 import { Framework } from "@/lib/framework";
-import { useFramework } from "@/lib/use-framework";
 import { clsx } from "clsx";
-import { Icon } from "gcmp-design-system/src/app/components/atoms/Icon";
-import { usePathname } from "next/navigation";
 import React from "react";
 
 interface SideNavItem {
@@ -16,8 +13,6 @@ interface SideNavItem {
         [key in Framework]: number;
       };
   items?: SideNavItem[];
-  collapse?: boolean;
-  prefix?: string;
 }
 export function SideNav({
   items,
@@ -31,98 +26,51 @@ export function SideNav({
   footer?: React.ReactNode;
 }) {
   return (
-    <div
-      className={clsx(
-        className,
-        "text-sm h-full pt-3 md:pt-8 flex flex-col gap-4 px-2",
-      )}
-    >
+    <div className={clsx(className, "text-sm space-y-5 px-2")}>
       {children}
 
-      <div className="flex-1 relative overflow-y-auto px-2 -mx-2">
-        {items.map((item) => (
-          <SideNavSection item={item} key={item.name} />
-        ))}
-
-        {footer}
-
-        <div
-          aria-hidden
-          className={clsx(
-            "h-12 right-0 sticky bottom-0 left-0",
-            "bg-gradient-to-t from-white  to-transparent",
-            "dark:from-stone-950",
-            "hidden md:block",
-          )}
-        />
+      <div className="flex items-center gap-2">
+        <span className="inline-block size-2 rounded-full bg-yellow-400"></span>{" "}
+        Documentation coming soon
       </div>
+
+      {items.map(({ name, href, items }) => (
+        <div key={name}>
+          <SideNavHeader href={href}>{name}</SideNavHeader>
+          {items &&
+            items.map(({ name, href, items, done }) => (
+              <ul key={name}>
+                <li>
+                  <SideNavItem href={href}>
+                    {done == 0 && (
+                      <span className="mr-1.5 inline-block size-2 rounded-full bg-yellow-400"></span>
+                    )}
+
+                    <span
+                      className={
+                        done === 0 ? "text-stone-400 dark:text-stone-600" : ""
+                      }
+                    >
+                      {name}
+                    </span>
+                  </SideNavItem>
+                </li>
+
+                {items && items?.length > 0 && (
+                  <ul className="pl-4">
+                    {items.map(({ name, href }) => (
+                      <li key={href}>
+                        <SideNavItem href={href}>{name}</SideNavItem>
+                      </li>
+                    ))}
+                  </ul>
+                )}
+              </ul>
+            ))}
+        </div>
+      ))}
+
+      {footer}
     </div>
   );
 }
-
-export function SideNavSection({
-  item: { name, href, collapse, items, prefix },
-}: { item: SideNavItem }) {
-  const path = usePathname();
-  const framework = useFramework();
-  if (!collapse) {
-    return (
-      <>
-        <SideNavHeader href={href}>{name}</SideNavHeader>
-
-        <SideNavSectionList items={items} />
-      </>
-    );
-  }
-  return (
-    <>
-      <details
-        className="group [&:not(:first-child)]:mt-4"
-        open={
-          prefix
-            ? path.startsWith(
-                prefix.replace("/docs/", "/docs/" + framework + "/"),
-              )
-            : true
-        }
-      >
-        <summary className="list-none">
-          <SideNavHeader href={href}>
-            {name}
-            {collapse && (
-              <Icon
-                className="group-open:rotate-180 transition-transform group-hover:text-stone-500 text-stone-400 dark:text-stone-600"
-                name="chevronDown"
-                size="xs"
-              />
-            )}
-          </SideNavHeader>
-        </summary>
-
-        <SideNavSectionList items={items} />
-      </details>
-    </>
-  );
-}
-
-export function SideNavSectionList({ items }: { items?: SideNavItem[] }) {
-  return (
-    !!items?.length && (
-      <ul>
-        {items.map(({ name, href, items, done }) => (
-          <li key={name}>
-            <SideNavItem href={href}>
-              <span
-                className={
-                  done === 0 ? "text-stone-400 dark:text-stone-600" : ""
-                }
-              >
-                {name}
-              </span>
-            </SideNavItem>
-          </li>
-        ))}
-      </ul>
-    )
-  );
-}

homepage/homepage/components/SideNavHeader.tsx

@@ -1,26 +1,22 @@
-import { clsx } from "clsx";
 import Link from "next/link";
 
 export function SideNavHeader({
   href,
   children,
-  className,
 }: {
   href?: string;
   children: React.ReactNode;
-  className?: string;
 }) {
-  const classes = clsx(
-    className,
-    "flex items-center gap-2 justify-between font-medium text-stone-900 py-1 dark:text-white mb-1 [&:not(:first-child)]:mt-4",
-  );
+  const className =
+    "block font-medium text-stone-900 py-1 dark:text-white mb-1";
+
   if (href) {
     return (
-      <Link className={classes} href={href}>
+      <Link className={className} href={href}>
         {children}
       </Link>
     );
   }
 
-  return <p className={classes}>{children}</p>;
+  return <p className={className}>{children}</p>;
 }

homepage/homepage/components/SideNavItem.tsx

@@ -17,7 +17,7 @@ export function SideNavItem({
 }) {
   const classes = clsx(
     className,
-    "py-1 px-2 -mx-2 group rounded-md flex items-center  transition-colors",
+    "py-1.5 px-2 -mx-2 group rounded-md flex items-center  transition-colors",
   );
   const path = usePathname();
 

homepage/homepage/components/docs/DocsLayout.tsx

@@ -40,8 +40,9 @@ export default function DocsLayout({
         <div className="container relative md:grid md:grid-cols-12 md:gap-12">
           <div
             className={clsx(
+              "py-8",
               "pr-3 md:col-span-4 lg:col-span-3",
-              "sticky align-start top-[61px] h-[calc(100vh-61px)] overflow-y-auto",
+              "sticky align-start top-[72px] h-[calc(100vh-72px)] overflow-y-auto",
               "hidden md:block",
             )}
           >
@@ -52,7 +53,7 @@ export default function DocsLayout({
             {tocItems?.length && (
               <>
                 <TableOfContents
-                  className="pl-3 py-6 shrink-0 text-sm sticky align-start top-[61px] w-[16rem] h-[calc(100vh-61px)] overflow-y-auto hidden lg:block"
+                  className="pl-3 py-6 shrink-0 text-sm sticky align-start top-[72px] w-[16rem] h-[calc(100vh-72px)] overflow-y-auto hidden lg:block"
                   items={tocItems}
                 />
               </>

homepage/homepage/components/docs/TableOfContents.tsx

@@ -20,9 +20,9 @@ const TocList = ({
   };
 
   return (
-    <ul className="space-y-2" style={{ paddingLeft: "1rem" }}>
+    <ul className="space-y-3" style={{ paddingLeft: `${level}rem` }}>
       {items.map((item) => (
-        <li key={item.id} className="space-y-2">
+        <li key={item.id} className="space-y-3">
           {item.id && (
             <Link
               href={`#${item.id}`}
@@ -35,7 +35,7 @@ const TocList = ({
               {item.value}
             </Link>
           )}
-          {!!item.children?.length && (
+          {item.children && (
             <TocList
               items={item.children}
               level={level + 1}

homepage/homepage/components/docs/nav.tsx

@@ -20,7 +20,8 @@ export function DocNav({ className }: { className?: string }) {
           if (!item.href?.startsWith("/docs")) return item;
 
           const frameworkDone = (item.done as any)[framework] ?? 0;
-          let done = typeof item.done === "number" ? item.done : frameworkDone;
+          let done =
+            typeof item.done === "number" ? item.done : frameworkDone;
           let href = item.href.replace("/docs", `/docs/${framework}`);
 
           return {

homepage/homepage/components/docs/tags.tsx

@@ -73,7 +73,7 @@ export function ClassOrInterface({
     <div className="relative not-prose">
       <div
         id={name}
-        className="peer sticky top-0 mt-4 md:top-[61px] md:pt-8 bg-white dark:bg-stone-950 z-20"
+        className="peer sticky top-0 mt-4 md:top-[72px] md:pt-8 bg-white dark:bg-stone-950 z-20"
       >
         <Link
           href={"#" + name}

homepage/homepage/components/home/HeroSection.tsx

@@ -2,7 +2,6 @@ import CreateJazzApp from "@/components/home/CreateJazzApp.mdx";
 import { H1 } from "gcmp-design-system/src/app/components/atoms/Headings";
 import { Icon } from "gcmp-design-system/src/app/components/atoms/Icon";
 import { CopyButton } from "gcmp-design-system/src/app/components/molecules/CodeGroup";
-import { Kicker } from "gcmp-design-system/src/app/components/atoms/Kicker";
 import { Prose } from "gcmp-design-system/src/app/components/molecules/Prose";
 import { SectionHeader } from "gcmp-design-system/src/app/components/molecules/SectionHeader";
 import Link from "next/link";
@@ -44,26 +43,26 @@ const features = [
 
 export function HeroSection() {
   return (
-    <div className="container grid items-center gap-x-8 gap-y-12 my-12 md:my-16 lg:my-24 lg:gap-x-10 lg:grid-cols-3">
+    <div className="container grid items-center gap-x-8 gap-y-10 py-12 md:py-16 lg:py-24 lg:gap-x-10 lg:grid-cols-3">
       <div className="flex flex-col justify-center gap-5 lg:col-span-2 lg:gap-8">
-        <Kicker>Toolkit for backendless apps</Kicker>
+        <p className="uppercase text-blue tracking-widest text-sm font-medium dark:text-stone-400">
+          Toolkit for cloud-synced local state
+        </p>
         <H1>
           <span className="inline-block">Whip up an app.</span>
         </H1>
 
         <Prose size="lg" className="text-pretty max-w-2xl dark:text-stone-200">
           <p>
-            Jazz gives you data without needing a database — plus auth, permissions, files and multiplayer without needing a backend.
-          </p>
-          <p>
-            Do everything right from the frontend and ship better apps, faster.
+            Jazz lets you build with cloud-synced local state, completely
+            replacing backends and databases. You'll ship better apps, much faster.
           </p>
           <p>
             Open source. Self-host or use{" "}
             <Link className="text-reset" href="/cloud">
               Jazz Cloud
             </Link>{" "}
-            for zero-config magic.
+            for an &ldquo;it just works&rdquo; DX.
           </p>
         </Prose>
 
@@ -82,12 +81,12 @@ export function HeroSection() {
         </div>
       </div>
 
-      <div className="h-full group grid md:grid-cols-2 items-center lg:grid-cols-1 lg:pt-36">
+      <div className="h-full pt-12 group grid md:grid-cols-2 items-center lg:grid-cols-1">
         <SectionHeader
           className="md:col-span-2 lg:sr-only"
           title="Get a Jazz app running in minutes."
         />
-        <div className="overflow-hidden sm:rounded-xl sm:border  h-full sm:px-8 sm:pt-6 bg-stone-50 dark:bg-stone-950">
+        <div className="  overflow-hidden sm:rounded-xl sm:border  h-full sm:px-8 sm:pt-6 bg-stone-50 dark:bg-stone-950">
           <div className="rounded-lg bg-white dark:bg-stone-925 sm:ring-4 ring-stone-400/20 sm:shadow-xl sm:shadow-blue/20 border relative sm:top-2 h-full w-full">
             <div className="py-4 flex items-center gap-2.5 px-6 border-b">
               <span className="rounded-full size-3 bg-stone-200 dark:bg-stone-900" />