Publish

- jazz-example-file-drop@0.0.60
 - jazz-example-pets@0.0.60
 - jazz-example-todo@0.0.60
 - jazz-example-twit@0.0.60
 - cojson@0.4.13
 - cojson-simple-sync@0.4.13
 - cojson-storage-indexeddb@0.4.13
 - cojson-storage-sqlite@0.4.13
 - jazz-autosub@0.4.13
 - jazz-browser@0.4.13
 - jazz-browser-auth-local@0.4.13
 - jazz-browser-media-images@0.4.13
 - jazz-react@0.4.13
 - jazz-react-auth-local@0.4.13

.github/workflows/build-and-deploy.yaml

@@ -11,7 +11,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        example: ["todo", "pets"]
+        example: ["todo", "pets", "twit"]
 
     steps:
     - uses: actions/checkout@v3
@@ -58,7 +58,7 @@ jobs:
     needs: build
     strategy:
       matrix:
-        example: ["todo", "pets"]
+        example: ["todo", "pets", "twit"]
 
     steps:
     - uses: actions/checkout@v3

README.md

@@ -56,19 +56,19 @@ Jazz is open source and you can run your own sync & storage server, but to reall
 
 ### Building a new, entirely sync-based React app
 
-1. Define your data model with [cojson Collaborative Values (CoValues)](./DOCS.md/#covalue).
-2. Implement permission logic using [cojson Groups](./DOCS.md/#group).
-3. Build a user interface with [jazz-react](./DOCS.md/#jazz-react)'s reactive [synced queries](./DOCS.md/#usesyncedqueryid).
+1. Define your data model with [cojson Collaborative Values (CoValues)](./DOCS.md#covalue).
+2. Implement permission logic using [cojson Groups](./DOCS.md#group).
+3. Build a user interface with [jazz-react](./DOCS.md#jazz-react) and [auto-sub](./DOCS.md#useautosubid).
 
 ### Gradually adding sync to an existing React app
 
 Gradually migrate app features to use sync:
 
-1. Define data model for small aspect of your app with [cojson Collaborative Values (CoValues)](./DOCS.md/#covalue).
+1. Define data model for small aspect of your app with [cojson Collaborative Values (CoValues)](./DOCS.md#covalue).
     - Schema adapters/importers for Prisma/Drizzle/PostgreSQL introspection coming soon.
-2. Map existing permission logic with [cojson Groups](./DOCS.md/#group) & integrate existing auth.
+2. Map existing permission logic with [cojson Groups](./DOCS.md#group) & integrate existing auth.
     - Auth integrations coming soon.
-3. Replace some of the React state and API requests in your UI with [jazz-react](./DOCS.md/#jazz-react)'s reactive [synced queries](./DOCS.md/#usesyncedqueryid).
+3. Replace some of the React state and API requests in your UI with [jazz-react](./DOCS.md#jazz-react) and [auto-sub](./DOCS.md#useautosubid).
 
 # Example Apps
 
@@ -103,14 +103,14 @@ Demonstrates:
 
 For now, docs are hosted in a single well-structured markdown file: [`./DOCS.md`](./DOCS.md).
 
-- [Package Overview](./DOCS.md/#overview)
-- [`jazz-react` API](./DOCS.md/#jazz-react)
-- [`cojson` API](./DOCS.md/#cojson)
-- [`jazz-react-media-images` API](./DOCS.md/#jazz-react-media-images)
+- [Package Overview](./DOCS.md#overview)
+- [`jazz-react` API](./DOCS.md#jazz-react)
+- [`cojson` API](./DOCS.md#cojson)
+- [`jazz-browser-media-images` API](./DOCS.md#jazz-browser-media-images)
 
 
 In the future we'll build a dedicated docs page on the Jazz homepage.
 
 ----
 
-Copyright 2023: Garden Computing, Inc.
+Copyright 2023 — Garden Computing, Inc.

examples/file-drop/.eslintrc.cjs

@@ -0,0 +1,18 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}

examples/file-drop/.gitignore

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

examples/file-drop/Dockerfile

@@ -0,0 +1,4 @@
+FROM caddy:2.7.3-alpine
+LABEL org.opencontainers.image.source="https://github.com/gardencmp/jazz"
+
+COPY ./dist /usr/share/caddy/

examples/file-drop/README.md

@@ -0,0 +1,64 @@
+# Jazz Todo List Example
+
+Live version: https://example-todo.jazz.tools
+
+## Installing & running the example locally
+
+Start by checking out just the example app to a folder:
+
+```bash
+npx degit gardencmp/jazz/examples/todo jazz-example-todo
+cd jazz-example-todo
+```
+
+(This ensures that you have the example app without git history or our multi-package monorepo)
+
+Install dependencies:
+
+```bash
+npm install
+```
+
+Start the dev server:
+
+```bash
+npm run dev
+```
+
+## Structure
+
+- [`src/basicComponents`](./src/basicComponents): simple components to build the UI, unrelated to Jazz (uses [shadcn/ui](https://ui.shadcn.com))
+- [`src/components`](./src/components/): helper components that do contain Jazz-specific logic, but aren't very relevant to understand the basics of Jazz and CoJSON
+- [`src/1_types.ts`](./src/1_types.ts),
+[`src/2_main.tsx`](./src/2_main.tsx),
+[`src/3_NewProjectForm.tsx`](./src/3_NewProjectForm.tsx),
+[`src/4_ProjectTodoTable.tsx`](./src/4_ProjectTodoTable.tsx): the main files for this example, see the walkthrough below
+
+## Walkthrough
+
+### Main parts
+
+1. Defining the data model with CoJSON: [`src/1_types.ts`](./src/1_types.ts)
+
+2. The top-level provider `<WithJazz/>` and routing: [`src/2_main.tsx`](./src/2_main.tsx)
+
+3. Creating a new todo project: [`src/3_NewProjectForm.tsx`](./src/3_NewProjectForm.tsx)
+
+4. Reactively rendering a todo project as a table, adding and editing tasks: [`src/4_ProjectTodoTable.tsx`](./src/4_ProjectTodoTable.tsx)
+
+### Helpers
+
+- (not yet explained) Creating invite links/QR codes with `<InviteButton/>`: [`src/components/InviteButton.tsx`](./src/components/InviteButton.tsx)
+
+This is the whole Todo List app!
+
+## Questions / problems / feedback
+
+If you have feedback, let us know on [Discord](https://discord.gg/utDMjHYg42) or open an issue or PR to fix something that seems wrong.
+
+
+## Configuration: sync server
+
+By default, the example app uses [Jazz Global Mesh](https://jazz.tools/mesh) (`wss://sync.jazz.tools`) - so cross-device use, invites and collaboration should just work.
+
+You can also run a local sync server by running `npx cojson-simple-sync` and adding the query param `?sync=ws://localhost:4200` to the URL of the example app (for example: `http://localhost:5173/?sync=ws://localhost:4200`), or by setting the `sync` parameter of the `<WithJazz>` provider component in [./src/2_main.tsx](./src/2_main.tsx).

examples/file-drop/components.json

@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/index.css",
+    "baseColor": "stone",
+    "cssVariables": true
+  },
+  "aliases": {
+    "components": "@/basicComponents",
+    "utils": "@/basicComponents/lib/utils"
+  }
+}

examples/file-drop/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/png" href="/jazz-logo.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Jazz File Drop Example</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/2_main.tsx"></script>
+  </body>
+</html>

examples/file-drop/job-template.nomad

@@ -0,0 +1,56 @@
+job "example-file-drop$BRANCH_SUFFIX" {
+  region     = "global"
+  datacenters = ["*"]
+
+  group "static" {
+    count = 4
+
+    network {
+      port "http" {
+        to = 80
+      }
+    }
+
+    constraint {
+      attribute = "${node.class}"
+      operator  = "="
+      value     = "mesh"
+    }
+
+    spread {
+      attribute = "${node.datacenter}"
+      weight    = 100
+    }
+
+    constraint {
+      distinct_hosts = true
+    }
+
+    task "server" {
+      driver = "docker"
+
+      config {
+        image = "$DOCKER_TAG"
+        ports = ["http"]
+
+        auth = {
+          username = "$DOCKER_USER"
+          password = "$DOCKER_PASSWORD"
+        }
+      }
+
+      service {
+        tags = ["public"]
+        name = "example-file-drop$BRANCH_SUFFIX"
+        port = "http"
+        provider = "consul"
+      }
+
+      resources {
+        cpu    = 50 # MHz
+        memory = 50 # MB
+      }
+    }
+  }
+}
+# deploy bump 4

examples/file-drop/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "jazz-example-file-drop",
+  "private": true,
+  "version": "0.0.60",
+  "type": "module",
+  "scripts": {
+    "dev": "vite --port 6610",
+    "build": "tsc && vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@radix-ui/react-checkbox": "^1.0.4",
+    "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-toast": "^1.1.4",
+    "@types/qrcode": "^1.5.1",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.0.0",
+    "jazz-react": "^0.4.13",
+    "jazz-react-auth-local": "^0.4.13",
+    "lucide-react": "^0.274.0",
+    "qrcode": "^1.5.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router": "^6.16.0",
+    "react-router-dom": "^6.16.0",
+    "tailwind-merge": "^1.14.0",
+    "tailwindcss-animate": "^1.0.7",
+    "uniqolor": "^1.1.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.15",
+    "@types/react-dom": "^18.2.7",
+    "@typescript-eslint/eslint-plugin": "^6.0.0",
+    "@typescript-eslint/parser": "^6.0.0",
+    "@vitejs/plugin-react-swc": "^3.3.2",
+    "autoprefixer": "^10.4.14",
+    "eslint": "^8.45.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.3",
+    "postcss": "^8.4.27",
+    "tailwindcss": "^3.3.3",
+    "typescript": "^5.0.2",
+    "vite": "^4.4.5"
+  }
+}

examples/file-drop/postcss.config.js

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

examples/file-drop/src/1_types.ts

@@ -0,0 +1,5 @@
+import { CoMap, BinaryCoStream } from "cojson";
+
+export type FileBundle = CoMap<{
+    [filename: string]: BinaryCoStream['id']
+}>;

examples/file-drop/src/2_main.tsx

@@ -0,0 +1,188 @@
+import React, { ChangeEvent, useCallback, useState } from "react";
+import ReactDOM from "react-dom/client";
+import {
+    RouterProvider,
+    createHashRouter,
+    useNavigate,
+    useParams,
+} from "react-router-dom";
+import "./index.css";
+
+import { WithJazz, useJazz, useAcceptInvite, useAutoSub } from "jazz-react";
+import { LocalAuth } from "jazz-react-auth-local";
+
+import {
+    Button,
+    Input,
+    ThemeProvider,
+    TitleAndLogo,
+} from "./basicComponents/index.ts";
+import { PrettyAuthUI } from "./components/Auth.tsx";
+import { FileBundle } from "./1_types.ts";
+import {
+    createBinaryStreamFromBlob,
+    readBlobFromBinaryStream,
+} from "jazz-browser";
+import { DownloadIcon } from "lucide-react";
+import { flushSync } from "react-dom";
+
+const appName = "Jazz File Drop Example";
+
+const auth = LocalAuth({
+    appName,
+    Component: PrettyAuthUI,
+});
+
+ReactDOM.createRoot(document.getElementById("root")!).render(
+    <React.StrictMode>
+        <ThemeProvider>
+            <TitleAndLogo name={appName} />
+            <div className="flex flex-col h-full items-center justify-start gap-10 pt-10 pb-10 px-5">
+                <WithJazz auth={auth}>
+                    <App />
+                </WithJazz>
+            </div>
+        </ThemeProvider>
+    </React.StrictMode>
+);
+
+function App() {
+    // logOut logs out the AuthProvider passed to `<WithJazz/>` above.
+    const { logOut } = useJazz();
+
+    const router = createHashRouter([
+        {
+            path: "/",
+            element: <FileDropUI />,
+        },
+        {
+            path: "/bundle/:bundleId",
+            element: <FileDropUIPage />,
+        },
+        {
+            path: "/invite/*",
+            element: <p>Accepting invite...</p>,
+        },
+    ]);
+
+    // `useAcceptInvite()` is a hook that accepts an invite link from the URL hash,
+    // and on success calls our callback where we navigate to the project that we were just invited to.
+    useAcceptInvite((bundleId) => router.navigate("/v/" + bundleId));
+
+    return (
+        <>
+            <RouterProvider router={router} />
+
+            <Button
+                onClick={() => router.navigate("/").then(logOut)}
+                variant="outline"
+            >
+                Log Out
+            </Button>
+        </>
+    );
+}
+
+export function FileDropUIPage() {
+    const { bundleId } = useParams<{ bundleId: FileBundle["id"] }>();
+
+    return <FileDropUI bundleId={bundleId} />;
+}
+
+export function FileDropUI({ bundleId }: { bundleId?: FileBundle["id"] }) {
+    const navigate = useNavigate();
+    const { me, localNode } = useJazz();
+    const fileBundle = useAutoSub(bundleId);
+
+    const [progressMessage, setProgressMessage] = useState<{
+        [name: string]: string;
+    }>({});
+
+    const onChange = useCallback(
+        (event: ChangeEvent<HTMLInputElement>) => {
+            let fileBundleToUse = fileBundle?.meta.coValue;
+            let isFirstUpload = false;
+
+            if (!fileBundleToUse) {
+                const group = me.createGroup().addMember("everyone", "reader");
+                fileBundleToUse = group.createMap<FileBundle>();
+                isFirstUpload = true;
+            }
+
+            const files = [...(event.target.files || [])];
+
+            Promise.all(
+                files.map((file) =>
+                    createBinaryStreamFromBlob(
+                        file,
+                        fileBundleToUse.group,
+                        { type: "binary" },
+                        (progress) =>
+                            setProgressMessage((old) => ({
+                                ...old,
+                                [file.name]: `Creating ${Math.round(
+                                    progress * 100
+                                )}%`,
+                            }))
+                    ).then((stream) => {
+                        fileBundleToUse!.set(file.name, stream.id);
+                    })
+                )
+            ).then(() => {
+                if (isFirstUpload) {
+                    navigate("/bundle/" + fileBundleToUse!.id);
+                }
+            });
+
+            event.target.value = "";
+        },
+        [me, navigate, fileBundle]
+    );
+
+    return (
+        <div className="max-w-full p-5 w-[40rem]">
+            <h1 className="text-3xl font-bold mb-5">File Drop</h1>
+            {[
+                ...new Set([
+                    ...Object.keys(fileBundle || {}),
+                    ...Object.keys(progressMessage),
+                ]),
+            ].map((name) => (
+                <div className="mb-5 flex justify-between" key={name}>
+                    {name} {progressMessage[name]}
+                    <Button
+                        size="sm"
+                        disabled={!(name in (fileBundle || {}))}
+                        onClick={() => {
+                            const streamId = fileBundle?.meta.coValue.get(name);
+                            streamId &&
+                                readBlobFromBinaryStream(
+                                    streamId,
+                                    localNode,
+                                    false,
+                                    (progress) =>
+                                        setProgressMessage((old) => ({
+                                            ...old,
+                                            [name]: `Loading ${Math.round(
+                                                progress * 100
+                                            )}%`,
+                                        }))
+                                ).then((blob) => {
+                                    if (!blob) return;
+                                    const url = URL.createObjectURL(blob);
+                                    window.open(url, "_blank");
+                                });
+                        }}
+                    >
+                        <DownloadIcon />
+                    </Button>
+                </div>
+            ))}
+            {(!fileBundle || fileBundle.meta.group.myRole() === "admin") && (
+                <Input type="file" onChange={onChange} multiple />
+            )}
+        </div>
+    );
+}
+
+/** Walkthrough: Continue with ./3_NewProjectForm.tsx */

examples/file-drop/src/basicComponents/SubmittableInput.tsx

@@ -0,0 +1,39 @@
+import { Input } from "@/basicComponents/ui/input";
+import { Button } from "@/basicComponents/ui/button";
+
+export function SubmittableInput({
+    onSubmit,
+    label,
+    placeholder,
+    disabled,
+}: {
+    onSubmit: (text: string) => void;
+    label: string;
+    placeholder: string;
+    disabled?: boolean;
+}) {
+    return (
+        <form
+            className="flex flex-row items-center gap-3"
+            onSubmit={(e) => {
+                e.preventDefault();
+                const textEl = e.currentTarget.elements.namedItem(
+                    "text"
+                ) as HTMLInputElement;
+                onSubmit(textEl.value);
+                textEl.value = "";
+            }}
+        >
+            <Input
+                className="-ml-3 -my-2 flex-grow flex-3 text-base"
+                name="text"
+                placeholder={placeholder}
+                autoComplete="off"
+                disabled={disabled}
+            />
+            <Button asChild type="submit" className="flex-shrink flex-1 cursor-pointer">
+                <Input type="submit" value={label} disabled={disabled} />
+            </Button>
+        </form>
+    );
+}

examples/file-drop/src/basicComponents/TitleAndLogo.tsx

@@ -0,0 +1,10 @@
+import { Toaster } from ".";
+
+export function TitleAndLogo({name}: {name: string}) {
+    return <>
+        <div className="flex items-center gap-2 justify-center mt-5">
+                <img src="jazz-logo.png" className="h-5" /> {name}
+            </div>
+            <Toaster />
+    </>
+}

examples/file-drop/src/basicComponents/index.ts

@@ -0,0 +1,17 @@
+export { Button } from "./ui/button";
+export { Checkbox } from "./ui/checkbox";
+export { Input } from "./ui/input";
+export { Skeleton } from "./ui/skeleton";
+export { Toaster } from "./ui/toaster";
+export { useToast } from "./ui/use-toast";
+export { SubmittableInput } from "./SubmittableInput";
+export { TitleAndLogo } from "./TitleAndLogo";
+export { ThemeProvider } from "./themeProvider";
+export {
+    Table,
+    TableBody,
+    TableCell,
+    TableHead,
+    TableHeader,
+    TableRow,
+} from "./ui/table";

examples/file-drop/src/basicComponents/lib/utils.ts

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

examples/file-drop/src/basicComponents/themeProvider.tsx

@@ -0,0 +1,72 @@
+import { createContext, useContext, useEffect, useState } from "react";
+
+type ThemeProviderProps = {
+    children: React.ReactNode;
+    defaultTheme?: string;
+    storageKey?: string;
+};
+
+type ThemeProviderState = {
+    theme: string;
+    setTheme: (theme: string) => void;
+};
+
+const initialState = {
+    theme: "system",
+    setTheme: () => null,
+};
+
+const ThemeProviderContext = createContext<ThemeProviderState>(initialState);
+
+export function ThemeProvider({
+    children,
+    defaultTheme = "system",
+    storageKey = "vite-ui-theme",
+    ...props
+}: ThemeProviderProps) {
+    const [theme, setTheme] = useState(
+        () => localStorage.getItem(storageKey) || defaultTheme
+    );
+
+    useEffect(() => {
+        const root = window.document.documentElement;
+
+        root.classList.remove("light", "dark");
+
+        if (theme === "system") {
+            const systemTheme = window.matchMedia(
+                "(prefers-color-scheme: dark)"
+            ).matches
+                ? "dark"
+                : "light";
+
+            root.classList.add(systemTheme);
+            return;
+        }
+
+        root.classList.add(theme);
+    }, [theme]);
+
+    const value = {
+        theme,
+        setTheme: (theme: string) => {
+            localStorage.setItem(storageKey, theme);
+            setTheme(theme);
+        },
+    };
+
+    return (
+        <ThemeProviderContext.Provider {...props} value={value}>
+            {children}
+        </ThemeProviderContext.Provider>
+    );
+}
+
+export const useTheme = () => {
+    const context = useContext(ThemeProviderContext);
+
+    if (context === undefined)
+        throw new Error("useTheme must be used within a ThemeProvider");
+
+    return context;
+};

examples/file-drop/src/basicComponents/ui/button.tsx

@@ -0,0 +1,56 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/basicComponents/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button"
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Button.displayName = "Button"
+
+export { Button, buttonVariants }

examples/file-drop/src/basicComponents/ui/checkbox.tsx

@@ -0,0 +1,28 @@
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { Check } from "lucide-react"
+
+import { cn } from "@/basicComponents/lib/utils"
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      className
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator
+      className={cn("flex items-center justify-center text-current")}
+    >
+      <Check className="h-4 w-4" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+))
+Checkbox.displayName = CheckboxPrimitive.Root.displayName
+
+export { Checkbox }

examples/file-drop/src/basicComponents/ui/input.tsx

@@ -0,0 +1,25 @@
+import * as React from "react"
+
+import { cn } from "@/basicComponents/lib/utils"
+
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Input.displayName = "Input"
+
+export { Input }

examples/file-drop/src/basicComponents/ui/skeleton.tsx

@@ -0,0 +1,15 @@
+import { cn } from "@/basicComponents/lib/utils"
+
+function Skeleton({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn("animate-pulse rounded-md bg-muted", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }

examples/file-drop/src/basicComponents/ui/table.tsx

@@ -0,0 +1,114 @@
+import * as React from "react"
+
+import { cn } from "@/basicComponents/lib/utils"
+
+const Table = React.forwardRef<
+  HTMLTableElement,
+  React.HTMLAttributes<HTMLTableElement>
+>(({ className, ...props }, ref) => (
+  <div className="w-full overflow-auto">
+    <table
+      ref={ref}
+      className={cn("w-full caption-bottom text-sm", className)}
+      {...props}
+    />
+  </div>
+))
+Table.displayName = "Table"
+
+const TableHeader = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
+))
+TableHeader.displayName = "TableHeader"
+
+const TableBody = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tbody
+    ref={ref}
+    className={cn("[&_tr:last-child]:border-0", className)}
+    {...props}
+  />
+))
+TableBody.displayName = "TableBody"
+
+const TableFooter = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tfoot
+    ref={ref}
+    className={cn("bg-primary font-medium text-primary-foreground", className)}
+    {...props}
+  />
+))
+TableFooter.displayName = "TableFooter"
+
+const TableRow = React.forwardRef<
+  HTMLTableRowElement,
+  React.HTMLAttributes<HTMLTableRowElement>
+>(({ className, ...props }, ref) => (
+  <tr
+    ref={ref}
+    className={cn(
+      "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+      className
+    )}
+    {...props}
+  />
+))
+TableRow.displayName = "TableRow"
+
+const TableHead = React.forwardRef<
+  HTMLTableCellElement,
+  React.ThHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <th
+    ref={ref}
+    className={cn(
+      "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
+      className
+    )}
+    {...props}
+  />
+))
+TableHead.displayName = "TableHead"
+
+const TableCell = React.forwardRef<
+  HTMLTableCellElement,
+  React.TdHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <td
+    ref={ref}
+    className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
+    {...props}
+  />
+))
+TableCell.displayName = "TableCell"
+
+const TableCaption = React.forwardRef<
+  HTMLTableCaptionElement,
+  React.HTMLAttributes<HTMLTableCaptionElement>
+>(({ className, ...props }, ref) => (
+  <caption
+    ref={ref}
+    className={cn("mt-4 text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+TableCaption.displayName = "TableCaption"
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}

examples/file-drop/src/basicComponents/ui/toast.tsx

@@ -0,0 +1,127 @@
+import * as React from "react"
+import * as ToastPrimitives from "@radix-ui/react-toast"
+import { cva, type VariantProps } from "class-variance-authority"
+import { X } from "lucide-react"
+
+import { cn } from "@/basicComponents/lib/utils"
+
+const ToastProvider = ToastPrimitives.Provider
+
+const ToastViewport = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Viewport>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Viewport
+    ref={ref}
+    className={cn(
+      "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
+      className
+    )}
+    {...props}
+  />
+))
+ToastViewport.displayName = ToastPrimitives.Viewport.displayName
+
+const toastVariants = cva(
+  "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
+  {
+    variants: {
+      variant: {
+        default: "border bg-background text-foreground",
+        destructive:
+          "destructive group border-destructive bg-destructive text-destructive-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+const Toast = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
+    VariantProps<typeof toastVariants>
+>(({ className, variant, ...props }, ref) => {
+  return (
+    <ToastPrimitives.Root
+      ref={ref}
+      className={cn(toastVariants({ variant }), className)}
+      {...props}
+    />
+  )
+})
+Toast.displayName = ToastPrimitives.Root.displayName
+
+const ToastAction = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Action>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Action
+    ref={ref}
+    className={cn(
+      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
+      className
+    )}
+    {...props}
+  />
+))
+ToastAction.displayName = ToastPrimitives.Action.displayName
+
+const ToastClose = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Close>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Close
+    ref={ref}
+    className={cn(
+      "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
+      className
+    )}
+    toast-close=""
+    {...props}
+  >
+    <X className="h-4 w-4" />
+  </ToastPrimitives.Close>
+))
+ToastClose.displayName = ToastPrimitives.Close.displayName
+
+const ToastTitle = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Title>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Title
+    ref={ref}
+    className={cn("text-sm font-semibold", className)}
+    {...props}
+  />
+))
+ToastTitle.displayName = ToastPrimitives.Title.displayName
+
+const ToastDescription = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Description>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Description
+    ref={ref}
+    className={cn("text-sm opacity-90", className)}
+    {...props}
+  />
+))
+ToastDescription.displayName = ToastPrimitives.Description.displayName
+
+type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>
+
+type ToastActionElement = React.ReactElement<typeof ToastAction>
+
+export {
+  type ToastProps,
+  type ToastActionElement,
+  ToastProvider,
+  ToastViewport,
+  Toast,
+  ToastTitle,
+  ToastDescription,
+  ToastClose,
+  ToastAction,
+}

examples/file-drop/src/basicComponents/ui/toaster.tsx

@@ -0,0 +1,33 @@
+import {
+  Toast,
+  ToastClose,
+  ToastDescription,
+  ToastProvider,
+  ToastTitle,
+  ToastViewport,
+} from "@/basicComponents/ui/toast"
+import { useToast } from "@/basicComponents/ui/use-toast"
+
+export function Toaster() {
+  const { toasts } = useToast()
+
+  return (
+    <ToastProvider>
+      {toasts.map(function ({ id, title, description, action, ...props }) {
+        return (
+          <Toast key={id} {...props}>
+            <div className="grid gap-1">
+              {title && <ToastTitle>{title}</ToastTitle>}
+              {description && (
+                <ToastDescription>{description}</ToastDescription>
+              )}
+            </div>
+            {action}
+            <ToastClose />
+          </Toast>
+        )
+      })}
+      <ToastViewport />
+    </ToastProvider>
+  )
+}

examples/file-drop/src/basicComponents/ui/use-toast.ts

@@ -0,0 +1,192 @@
+// Inspired by react-hot-toast library
+import * as React from "react"
+
+import type {
+  ToastActionElement,
+  ToastProps,
+} from "@/basicComponents/ui/toast"
+
+const TOAST_LIMIT = 1
+const TOAST_REMOVE_DELAY = 1000000
+
+type ToasterToast = ToastProps & {
+  id: string
+  title?: React.ReactNode
+  description?: React.ReactNode
+  action?: ToastActionElement
+}
+
+const actionTypes = {
+  ADD_TOAST: "ADD_TOAST",
+  UPDATE_TOAST: "UPDATE_TOAST",
+  DISMISS_TOAST: "DISMISS_TOAST",
+  REMOVE_TOAST: "REMOVE_TOAST",
+} as const
+
+let count = 0
+
+function genId() {
+  count = (count + 1) % Number.MAX_VALUE
+  return count.toString()
+}
+
+type ActionType = typeof actionTypes
+
+type Action =
+  | {
+      type: ActionType["ADD_TOAST"]
+      toast: ToasterToast
+    }
+  | {
+      type: ActionType["UPDATE_TOAST"]
+      toast: Partial<ToasterToast>
+    }
+  | {
+      type: ActionType["DISMISS_TOAST"]
+      toastId?: ToasterToast["id"]
+    }
+  | {
+      type: ActionType["REMOVE_TOAST"]
+      toastId?: ToasterToast["id"]
+    }
+
+interface State {
+  toasts: ToasterToast[]
+}
+
+const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()
+
+const addToRemoveQueue = (toastId: string) => {
+  if (toastTimeouts.has(toastId)) {
+    return
+  }
+
+  const timeout = setTimeout(() => {
+    toastTimeouts.delete(toastId)
+    dispatch({
+      type: "REMOVE_TOAST",
+      toastId: toastId,
+    })
+  }, TOAST_REMOVE_DELAY)
+
+  toastTimeouts.set(toastId, timeout)
+}
+
+export const reducer = (state: State, action: Action): State => {
+  switch (action.type) {
+    case "ADD_TOAST":
+      return {
+        ...state,
+        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
+      }
+
+    case "UPDATE_TOAST":
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === action.toast.id ? { ...t, ...action.toast } : t
+        ),
+      }
+
+    case "DISMISS_TOAST": {
+      const { toastId } = action
+
+      // ! Side effects ! - This could be extracted into a dismissToast() action,
+      // but I'll keep it here for simplicity
+      if (toastId) {
+        addToRemoveQueue(toastId)
+      } else {
+        state.toasts.forEach((toast) => {
+          addToRemoveQueue(toast.id)
+        })
+      }
+
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === toastId || toastId === undefined
+            ? {
+                ...t,
+                open: false,
+              }
+            : t
+        ),
+      }
+    }
+    case "REMOVE_TOAST":
+      if (action.toastId === undefined) {
+        return {
+          ...state,
+          toasts: [],
+        }
+      }
+      return {
+        ...state,
+        toasts: state.toasts.filter((t) => t.id !== action.toastId),
+      }
+  }
+}
+
+const listeners: Array<(state: State) => void> = []
+
+let memoryState: State = { toasts: [] }
+
+function dispatch(action: Action) {
+  memoryState = reducer(memoryState, action)
+  listeners.forEach((listener) => {
+    listener(memoryState)
+  })
+}
+
+type Toast = Omit<ToasterToast, "id">
+
+function toast({ ...props }: Toast) {
+  const id = genId()
+
+  const update = (props: ToasterToast) =>
+    dispatch({
+      type: "UPDATE_TOAST",
+      toast: { ...props, id },
+    })
+  const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id })
+
+  dispatch({
+    type: "ADD_TOAST",
+    toast: {
+      ...props,
+      id,
+      open: true,
+      onOpenChange: (open) => {
+        if (!open) dismiss()
+      },
+    },
+  })
+
+  return {
+    id: id,
+    dismiss,
+    update,
+  }
+}
+
+function useToast() {
+  const [state, setState] = React.useState<State>(memoryState)
+
+  React.useEffect(() => {
+    listeners.push(setState)
+    return () => {
+      const index = listeners.indexOf(setState)
+      if (index > -1) {
+        listeners.splice(index, 1)
+      }
+    }
+  }, [state])
+
+  return {
+    ...state,
+    toast,
+    dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
+  }
+}
+
+export { useToast, toast }

examples/file-drop/src/components/Auth.tsx

@@ -0,0 +1,48 @@
+import { useState } from "react";
+
+import { LocalAuthComponent } from "jazz-react-auth-local";
+
+import { Input, Button } from "../basicComponents";
+
+export const PrettyAuthUI: LocalAuthComponent = ({
+    loading,
+    logIn,
+    signUp,
+}) => {
+    const [username, setUsername] = useState<string>("");
+
+    return (
+        <div className="w-full h-full flex items-center justify-center p-5">
+            {loading ? (
+                <div>Loading...</div>
+            ) : (
+                <div className="w-72 flex flex-col gap-4">
+                    <form
+                        className="w-72 flex flex-col gap-2"
+                        onSubmit={(e) => {
+                            e.preventDefault();
+                            signUp(username);
+                        }}
+                    >
+                        <Input
+                            placeholder="Display name"
+                            value={username}
+                            onChange={(e) => setUsername(e.target.value)}
+                            autoComplete="webauthn"
+                            className="text-base"
+                        />
+                        <Button asChild>
+                            <Input
+                                type="submit"
+                                value="Sign Up as new account"
+                            />
+                        </Button>
+                    </form>
+                    <Button onClick={logIn}>
+                        Log In with existing account
+                    </Button>
+                </div>
+            )}
+        </div>
+    );
+};

examples/file-drop/src/components/InviteButton.tsx

@@ -0,0 +1,45 @@
+import { useState } from "react";
+
+import QRCode from "qrcode";
+
+import { useToast, Button } from "../basicComponents";
+import { CoValue } from "cojson";
+import { Resolved, createInviteLink } from "jazz-react";
+
+export function InviteButton<T extends CoValue>({ value }: { value?: Resolved<T> }) {
+    const [existingInviteLink, setExistingInviteLink] = useState<string>();
+    const { toast } = useToast();
+
+    return (
+        value?.meta.group?.myRole() === "admin" && (
+            <Button
+                size="sm"
+                className="py-0"
+                disabled={!value.meta.group || !value.id}
+                variant="outline"
+                onClick={async () => {
+                    let inviteLink = existingInviteLink;
+                    if (value.meta.group && value.id && !inviteLink) {
+                        inviteLink = createInviteLink(value, "writer");
+                        setExistingInviteLink(inviteLink);
+                    }
+                    if (inviteLink) {
+                        const qr = await QRCode.toDataURL(inviteLink, {
+                            errorCorrectionLevel: "L",
+                        });
+                        navigator.clipboard.writeText(inviteLink).then(() =>
+                            toast({
+                                title: "Copied invite link to clipboard!",
+                                description: (
+                                    <img src={qr} className="w-20 h-20" />
+                                ),
+                            })
+                        );
+                    }
+                }}
+            >
+                Invite
+            </Button>
+        )
+    );
+}

examples/file-drop/src/index.css

@@ -0,0 +1,76 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+ 
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 20 14.3% 4.1%;
+
+    --card: 0 0% 100%;
+    --card-foreground: 20 14.3% 4.1%;
+ 
+    --popover: 0 0% 100%;
+    --popover-foreground: 20 14.3% 4.1%;
+ 
+    --primary: 24 9.8% 10%;
+    --primary-foreground: 60 9.1% 97.8%;
+ 
+    --secondary: 60 4.8% 95.9%;
+    --secondary-foreground: 24 9.8% 10%;
+ 
+    --muted: 60 4.8% 95.9%;
+    --muted-foreground: 25 5.3% 44.7%;
+ 
+    --accent: 60 4.8% 95.9%;
+    --accent-foreground: 24 9.8% 10%;
+ 
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 60 9.1% 97.8%;
+
+    --border: 20 5.9% 90%;
+    --input: 20 5.9% 90%;
+    --ring: 20 14.3% 4.1%;
+ 
+    --radius: 0.5rem;
+  }
+ 
+  .dark {
+    --background: 20 14.3% 4.1%;
+    --foreground: 60 9.1% 97.8%;
+ 
+    --card: 20 14.3% 4.1%;
+    --card-foreground: 60 9.1% 97.8%;
+ 
+    --popover: 20 14.3% 4.1%;
+    --popover-foreground: 60 9.1% 97.8%;
+ 
+    --primary: 60 9.1% 97.8%;
+    --primary-foreground: 24 9.8% 10%;
+ 
+    --secondary: 12 6.5% 15.1%;
+    --secondary-foreground: 60 9.1% 97.8%;
+ 
+    --muted: 12 6.5% 15.1%;
+    --muted-foreground: 24 5.4% 63.9%;
+ 
+    --accent: 12 6.5% 15.1%;
+    --accent-foreground: 60 9.1% 97.8%;
+ 
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 60 9.1% 97.8%;
+ 
+    --border: 12 6.5% 15.1%;
+    --input: 12 6.5% 15.1%;
+    --ring: 24 5.7% 82.9%;
+  }
+}
+ 
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

examples/file-drop/src/vite-env.d.ts

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

examples/file-drop/tailwind.config.js

@@ -0,0 +1,76 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  darkMode: ["class"],
+  content: [
+    './pages/**/*.{ts,tsx}',
+    './components/**/*.{ts,tsx}',
+    './app/**/*.{ts,tsx}',
+    './src/**/*.{ts,tsx}',
+	],
+  theme: {
+    container: {
+      center: true,
+      padding: "2rem",
+      screens: {
+        "2xl": "1400px",
+      },
+    },
+    extend: {
+      colors: {
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+      keyframes: {
+        "accordion-down": {
+          from: { height: 0 },
+          to: { height: "var(--radix-accordion-content-height)" },
+        },
+        "accordion-up": {
+          from: { height: "var(--radix-accordion-content-height)" },
+          to: { height: 0 },
+        },
+      },
+      animation: {
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out",
+      },
+    },
+  },
+  plugins: [require("tailwindcss-animate")],
+}

examples/file-drop/tsconfig.json

@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2023", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

examples/file-drop/tsconfig.node.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}

examples/file-drop/vite.config.ts

@@ -0,0 +1,16 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react-swc'
+import path from "path";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "./src"),
+    },
+  },
+  build: {
+    minify: false
+  }
+})

examples/pets/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jazz-example-pets",
   "private": true,
-  "version": "0.0.12",
+  "version": "0.0.60",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -16,9 +16,9 @@
     "@types/qrcode": "^1.5.1",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
-    "jazz-react": "^0.3.3",
-    "jazz-react-auth-local": "^0.3.3",
-    "jazz-react-media-images": "^0.3.3",
+    "jazz-browser-media-images": "^0.4.13",
+    "jazz-react": "^0.4.13",
+    "jazz-react-auth-local": "^0.4.13",
     "lucide-react": "^0.274.0",
     "qrcode": "^1.5.3",
     "react": "^18.2.0",

examples/pets/src/1_types.ts

@@ -1,4 +1,11 @@
-import { CoMap, CoStream, Media } from "cojson";
+import {
+    AccountMigration,
+    CoList,
+    CoMap,
+    CoStream,
+    Media,
+    Profile,
+} from "cojson";
 
 /** Walkthrough: Defining the data model with CoJSON
  *
@@ -9,8 +16,8 @@ import { CoMap, CoStream, Media } from "cojson";
 
 export type PetPost = CoMap<{
     name: string;
-    image: Media.ImageDefinition;
-    reactions: PetReactions;
+    image: Media.ImageDefinition["id"];
+    reactions: PetReactions["id"];
 }>;
 
 export const REACTION_TYPES = [
@@ -26,4 +33,20 @@ export type ReactionType = (typeof REACTION_TYPES)[number];
 
 export type PetReactions = CoStream<ReactionType>;
 
+export type ListOfPosts = CoList<PetPost["id"]>;
+
+export type PetAccountRoot = CoMap<{
+    posts: ListOfPosts["id"];
+}>;
+
+export const migration: AccountMigration<Profile, PetAccountRoot> = (account) => {
+    if (!account.get("root")) {
+        const root = account.createMap<PetAccountRoot>({
+            posts: account.createList<ListOfPosts>().id,
+        });
+        account.set("root", root.id);
+        console.log("Created root", root.id);
+    }
+};
+
 /** Walkthrough: Continue with ./2_App.tsx */

examples/pets/src/2_main.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
-import { RouterProvider, createHashRouter } from "react-router-dom";
+import { Link, RouterProvider, createHashRouter } from "react-router-dom";
 import "./index.css";
 
 import { WithJazz, useJazz, useAcceptInvite } from "jazz-react";
@@ -14,6 +14,8 @@ import {
 import { PrettyAuthUI } from "./components/Auth.tsx";
 import { NewPetPostForm } from "./3_NewPetPostForm.tsx";
 import { RatePetPostUI } from "./4_RatePetPostUI.tsx";
+import { PetAccountRoot, migration } from "./1_types.ts";
+import { AccountMigration, Profile } from "cojson";
 
 /** Walkthrough: The top-level provider `<WithJazz/>`
  *
@@ -31,9 +33,14 @@ const auth = LocalAuth({
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
     <React.StrictMode>
-        <WithJazz auth={auth}>
-            <App />
-        </WithJazz>
+        <ThemeProvider>
+            <TitleAndLogo name={appName} />
+            <div className="flex flex-col h-full items-center justify-start gap-10 pt-10 pb-10 px-5">
+                <WithJazz auth={auth} migration={migration as AccountMigration}>
+                    <App />
+                </WithJazz>
+            </div>
+        </ThemeProvider>
     </React.StrictMode>
 );
 
@@ -50,6 +57,10 @@ export default function App() {
     const router = createHashRouter([
         {
             path: "/",
+            element: <PostOverview />,
+        },
+        {
+            path: "/new",
             element: <NewPetPostForm />,
         },
         {
@@ -65,22 +76,40 @@ export default function App() {
     useAcceptInvite((petPostID) => router.navigate("/pet/" + petPostID));
 
     return (
-        <ThemeProvider>
-            <TitleAndLogo name={appName} />
-            <div className="flex flex-col h-full items-center justify-start gap-10 pt-10 pb-10 px-5">
-                <RouterProvider router={router} />
+        <>
+            <RouterProvider router={router} />
 
-                <Button
-                    onClick={() => router.navigate("/").then(logOut)}
-                    variant="outline"
-                >
-                    Log Out
-                </Button>
-            </div>
-        </ThemeProvider>
+            <Button
+                onClick={() => router.navigate("/").then(logOut)}
+                variant="outline"
+            >
+                Log Out
+            </Button>
+        </>
     );
 }
 
-/** Walkthrough: continue with ./3_CreatePetPostForm.tsx */
+export function PostOverview() {
+    const { me } = useJazz<Profile, PetAccountRoot>();
 
-/** Walkthrough: Continue with ./1_types.ts */
+    const myPosts = me.root?.posts;
+
+    return (
+        <>
+            {myPosts?.length ? (
+                <>
+                    <h1>My posts</h1>
+                    {myPosts.map(
+                        (post) =>
+                            post && (
+                                <Link key={post.id} to={"/pet/" + post.id}>
+                                    {post.name}
+                                </Link>
+                            )
+                    )}
+                </>
+            ) : undefined}
+            <Link to="/new">New post</Link>
+        </>
+    );
+}

examples/pets/src/3_NewPetPostForm.tsx

@@ -1,49 +1,48 @@
 import { ChangeEvent, useCallback, useState } from "react";
 import { useNavigate } from "react-router";
 
-import { CoID, CoMap, Media } from "cojson";
-import { useJazz, useSyncedQuery } from "jazz-react";
-import { createImage } from "jazz-browser-media-images";
+import { CoID, CoMap, Media, Profile } from "cojson";
+import { useAutoSub, useJazz } from "jazz-react";
+import { BrowserImage, createImage } from "jazz-browser-media-images";
 
-import { PetReactions } from "./1_types";
+import { PetAccountRoot, PetPost, PetReactions } from "./1_types";
 
 import { Input, Button } from "./basicComponents";
-import { useLoadImage } from "jazz-react-media-images";
 
 /** Walkthrough: TODO
  */
 
 type PartialPetPost = CoMap<{
     name: string;
-    image?: Media.ImageDefinition;
-    reactions: PetReactions;
+    image?: Media.ImageDefinition["id"];
+    reactions: PetReactions["id"];
 }>;
 
 export function NewPetPostForm() {
-    const { localNode } = useJazz();
+    const { me } = useJazz<Profile, PetAccountRoot>();
     const navigate = useNavigate();
 
     const [newPostId, setNewPostId] = useState<
         CoID<PartialPetPost> | undefined
     >(undefined);
 
-    const newPetPost = useSyncedQuery(newPostId);
+    const newPetPost = useAutoSub(newPostId);
 
     const onChangeName = useCallback(
         (name: string) => {
             if (newPetPost) {
                 newPetPost.set({ name });
             } else {
-                const petPostGroup = localNode.createGroup();
+                const petPostGroup = me.createGroup();
                 const petPost = petPostGroup.createMap<PartialPetPost>({
                     name,
-                    reactions: petPostGroup.createStream<PetReactions>(),
+                    reactions: petPostGroup.createStream<PetReactions>().id,
                 });
 
                 setNewPostId(petPost.id);
             }
         },
-        [localNode, newPetPost]
+        [me, newPetPost]
     );
 
     const onImageSelected = useCallback(
@@ -52,15 +51,26 @@ export function NewPetPostForm() {
 
             const image = await createImage(
                 event.target.files[0],
-                newPetPost.group
+                newPetPost.meta.group
             );
 
-            newPetPost.set({ image });
+            newPetPost.set({ image: image.id });
         },
         [newPetPost]
     );
 
-    const petImage = useLoadImage(newPetPost?.image?.id);
+    const onSubmit = useCallback(() => {
+        if (!newPetPost) return;
+        const myPosts = me.root?.posts;
+
+        if (!myPosts) {
+            throw new Error("No posts list found");
+        }
+
+        myPosts.append(newPetPost.id as PetPost["id"]);
+
+        navigate("/pet/" + newPetPost.id);
+    }, [me.root?.posts, newPetPost, navigate]);
 
     return (
         <div className="flex flex-col gap-10">
@@ -73,10 +83,13 @@ export function NewPetPostForm() {
                 value={newPetPost?.name || ""}
             />
 
-            {petImage ? (
+            {newPetPost?.image ? (
                 <img
                     className="w-80 max-w-full rounded"
-                    src={petImage.highestResSrc || petImage.placeholderDataURL}
+                    src={
+                        newPetPost?.image.as(BrowserImage)
+                            ?.highestResSrcOrPlaceholder
+                    }
                 />
             ) : (
                 <Input
@@ -87,13 +100,7 @@ export function NewPetPostForm() {
             )}
 
             {newPetPost?.name && newPetPost?.image && (
-                <Button
-                    onClick={() => {
-                        navigate("/pet/" + newPetPost.id);
-                    }}
-                >
-                    Submit Post
-                </Button>
+                <Button onClick={onSubmit}>Submit Post</Button>
             )}
         </div>
     );

examples/pets/src/4_RatePetPostUI.tsx

@@ -1,13 +1,13 @@
 import { useParams } from "react-router";
-import { CoID, Queried } from "cojson";
-import { useSyncedQuery } from "jazz-react";
+import { CoID } from "cojson";
 
 import { PetPost, ReactionType, REACTION_TYPES, PetReactions } from "./1_types";
 
 import { ShareButton } from "./components/ShareButton";
 import { Button, Skeleton } from "./basicComponents";
-import { useLoadImage } from "jazz-react-media-images";
+import { BrowserImage } from "jazz-browser-media-images";
 import uniqolor from "uniqolor";
+import { Resolved, useAutoSub } from "jazz-react";
 
 /** Walkthrough: TODO
  */
@@ -24,8 +24,7 @@ const reactionEmojiMap: { [reaction in ReactionType]: string } = {
 export function RatePetPostUI() {
     const petPostID = useParams<{ petPostId: CoID<PetPost> }>().petPostId;
 
-    const petPost = useSyncedQuery(petPostID);
-    const petImage = useLoadImage(petPost?.image);
+    const petPost = useAutoSub(petPostID);
 
     return (
         <div className="flex flex-col gap-8">
@@ -34,10 +33,13 @@ export function RatePetPostUI() {
                 <ShareButton petPost={petPost} />
             </div>
 
-            {petImage && (
+            {petPost?.image && (
                 <img
                     className="w-80 max-w-full rounded"
-                    src={petImage.highestResSrc || petImage.placeholderDataURL}
+                    src={
+                        petPost.image.as(BrowserImage)
+                            ?.highestResSrcOrPlaceholder
+                    }
                 />
             )}
 
@@ -61,7 +63,7 @@ export function RatePetPostUI() {
                 ))}
             </div>
 
-            {petPost?.group.myRole() === "admin" && petPost.reactions && (
+            {petPost?.meta.group.myRole() === "admin" && petPost.reactions && (
                 <ReactionOverview petReactions={petPost.reactions} />
             )}
         </div>
@@ -71,16 +73,16 @@ export function RatePetPostUI() {
 function ReactionOverview({
     petReactions,
 }: {
-    petReactions: Queried<PetReactions>;
+    petReactions: Resolved<PetReactions>;
 }) {
     return (
         <div>
             <h2>Reactions</h2>
             <div className="flex flex-col gap-1">
                 {REACTION_TYPES.map((reactionType) => {
-                    const reactionsOfThisType = Object.values(
-                        petReactions.perAccount
-                    ).filter(({ last }) => last === reactionType);
+                    const reactionsOfThisType = petReactions.perAccount
+                        .map(([, reaction]) => reaction)
+                        .filter(({ last }) => last === reactionType);
 
                     if (reactionsOfThisType.length === 0) return null;
 

examples/pets/src/components/ShareButton.tsx

@@ -2,18 +2,17 @@ import { useState } from "react";
 
 import { PetPost } from "../1_types";
 
-import { createInviteLink } from "jazz-react";
+import { Resolved, createInviteLink } from "jazz-react";
 import QRCode from "qrcode";
 
 import { useToast, Button } from "../basicComponents";
-import { Queried } from "cojson";
 
-export function ShareButton({ petPost }: { petPost?: Queried<PetPost> }) {
+export function ShareButton({ petPost }: { petPost?: Resolved<PetPost> }) {
     const [existingInviteLink, setExistingInviteLink] = useState<string>();
     const { toast } = useToast();
 
     return (
-        petPost?.group.myRole() === "admin" && (
+        petPost?.meta.group.myRole() === "admin" && (
             <Button
                 size="sm"
                 className="py-0"

examples/todo/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jazz-example-todo",
   "private": true,
-  "version": "0.0.37",
+  "version": "0.0.60",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -16,8 +16,8 @@
     "@types/qrcode": "^1.5.1",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
-    "jazz-react": "^0.3.3",
-    "jazz-react-auth-local": "^0.3.3",
+    "jazz-react": "^0.4.13",
+    "jazz-react-auth-local": "^0.4.13",
     "lucide-react": "^0.274.0",
     "qrcode": "^1.5.3",
     "react": "^18.2.0",

examples/todo/src/1_types.ts

@@ -1,4 +1,4 @@
-import { CoMap, CoList } from "cojson";
+import { CoMap, CoList, AccountMigration, Profile } from "cojson";
 
 /** Walkthrough: Defining the data model with CoJSON
  *
@@ -7,17 +7,36 @@ import { CoMap, CoList } from "cojson";
  *
  *  CoMap values and CoLists items can contain:
  *  - arbitrary immutable JSON
- *  - references to other CoValues (internally stored by their CoID)
+ *  - references to other CoValues by their CoID
  **/
 
 /** An individual task which collaborators can tick or rename */
 export type Task = CoMap<{ done: boolean; text: string; }>;
 
+export type ListOfTasks = CoList<Task["id"]>;
+
 /** Our top level object: a project with a title, referencing a list of tasks */
 export type TodoProject = CoMap<{
     title: string;
     /** A collaborative, ordered list of tasks */
-    tasks: CoList<Task>;
+    tasks: ListOfTasks["id"];
 }>;
 
+export type ListOfProjects = CoList<TodoProject["id"]>;
+
+export type TodoAccountRoot = CoMap<{
+    projects: ListOfProjects["id"];
+}>;
+
+export const migration: AccountMigration<Profile, TodoAccountRoot> = (account) => {
+    if (!account.get("root")) {
+        account.set(
+            "root",
+            account.createMap<TodoAccountRoot>({
+                projects: account.createList<ListOfProjects>().id,
+            }).id
+        );
+    }
+}
+
 /** Walkthrough: Continue with ./2_main.tsx */

examples/todo/src/2_main.tsx

@@ -1,6 +1,10 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
-import { RouterProvider, createHashRouter } from "react-router-dom";
+import {
+    RouterProvider,
+    createHashRouter,
+    useNavigate,
+} from "react-router-dom";
 import "./index.css";
 
 import { WithJazz, useJazz, useAcceptInvite } from "jazz-react";
@@ -14,6 +18,8 @@ import {
 import { PrettyAuthUI } from "./components/Auth.tsx";
 import { NewProjectForm } from "./3_NewProjectForm.tsx";
 import { ProjectTodoTable } from "./4_ProjectTodoTable.tsx";
+import { TodoAccountRoot, migration } from "./1_types.ts";
+import { AccountMigration, Profile } from "cojson";
 
 /**
  * Walkthrough: The top-level provider `<WithJazz/>`
@@ -33,9 +39,14 @@ const auth = LocalAuth({
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
     <React.StrictMode>
-        <WithJazz auth={auth}>
-            <App />
-        </WithJazz>
+        <ThemeProvider>
+            <TitleAndLogo name={appName} />
+            <div className="flex flex-col h-full items-center justify-start gap-10 pt-10 pb-10 px-5">
+                <WithJazz auth={auth} migration={migration as AccountMigration}>
+                    <App />
+                </WithJazz>
+            </div>
+        </ThemeProvider>
     </React.StrictMode>
 );
 
@@ -54,7 +65,7 @@ function App() {
     const router = createHashRouter([
         {
             path: "/",
-            element: <NewProjectForm />,
+            element: <HomeScreen />,
         },
         {
             path: "/project/:projectId",
@@ -62,8 +73,8 @@ function App() {
         },
         {
             path: "/invite/*",
-            element: <p>Accepting invite...</p>
-        }
+            element: <p>Accepting invite...</p>,
+        },
     ]);
 
     // `useAcceptInvite()` is a hook that accepts an invite link from the URL hash,
@@ -71,20 +82,39 @@ function App() {
     useAcceptInvite((projectID) => router.navigate("/project/" + projectID));
 
     return (
-        <ThemeProvider>
-            <TitleAndLogo name={appName} />
-            <div className="flex flex-col h-full items-center justify-start gap-10 pt-10 pb-10 px-5">
+        <>
+            <RouterProvider router={router} />
 
-                <RouterProvider router={router} />
+            <Button
+                onClick={() => router.navigate("/").then(logOut)}
+                variant="outline"
+            >
+                Log Out
+            </Button>
+        </>
+    );
+}
 
-                <Button
-                    onClick={() => router.navigate("/").then(logOut)}
-                    variant="outline"
-                >
-                    Log Out
-                </Button>
-            </div>
-        </ThemeProvider>
+export function HomeScreen() {
+    const { me } = useJazz<Profile, TodoAccountRoot>();
+    const navigate = useNavigate();
+
+    return (
+        <>
+            {me.root?.projects?.length ? <h1>My Projects</h1> : null}
+            {me.root?.projects?.map((project) => {
+                return (
+                    <Button
+                        key={project?.id}
+                        onClick={() => navigate("/project/" + project?.id)}
+                        variant="ghost"
+                    >
+                        {project?.title}
+                    </Button>
+                );
+            })}
+            <NewProjectForm />
+        </>
     );
 }
 

examples/todo/src/3_NewProjectForm.tsx

@@ -2,18 +2,17 @@ import { useCallback } from "react";
 
 import { useJazz } from "jazz-react";
 
-import { Task, TodoProject } from "./1_types";
+import { ListOfTasks, TodoAccountRoot, TodoProject } from "./1_types";
 
 import { SubmittableInput } from "./basicComponents";
 
-import { CoList } from "cojson";
 import { useNavigate } from "react-router";
+import { Profile } from "cojson";
 
 export function NewProjectForm() {
-    // A `LocalNode` represents a local view of loaded & created CoValues.
-    // It is associated with a current user account, which will determine
+    // `me` represents the current user account, which will determine
     // access rights to CoValues. We get it from the top-level provider `<WithJazz/>`.
-    const { localNode } = useJazz();
+    const { me } = useJazz<Profile, TodoAccountRoot>();
     const navigate = useNavigate();
 
     const createProject = useCallback(
@@ -23,17 +22,19 @@ export function NewProjectForm() {
             // To create a new todo project, we first create a `Group`,
             // which is a scope for defining access rights (reader/writer/admin)
             // of its members, which will apply to all CoValues owned by that group.
-            const projectGroup = localNode.createGroup();
+            const projectGroup = me.createGroup();
 
             // Then we create an empty todo project within that group
             const project = projectGroup.createMap<TodoProject>({
                 title,
-                tasks: projectGroup.createList<CoList<Task>>(),
+                tasks: projectGroup.createList<ListOfTasks>().id,
             });
 
+            me.root?.projects?.append(project.id);
+
             navigate("/project/" + project.id);
         },
-        [localNode, navigate]
+        [me, navigate]
     );
 
     return (

examples/todo/src/4_ProjectTodoTable.tsx

@@ -1,7 +1,6 @@
 import { useCallback } from "react";
 
-import { CoID, Queried } from "cojson";
-import { useSyncedQuery } from "jazz-react";
+import { CoID } from "cojson";
 
 import { TodoProject, Task } from "./1_types";
 
@@ -20,11 +19,12 @@ import {
 import { InviteButton } from "./components/InviteButton";
 import uniqolor from "uniqolor";
 import { useParams } from "react-router";
+import { Resolved, useAutoSub } from "jazz-react";
 
 /** Walkthrough: Reactively rendering a todo project as a table,
  *               adding and editing tasks
  *
- *  Here in `<TodoTable/>`, we use `useSyncedQuery()` for the first time,
+ *  Here in `<TodoTable/>`, we use `useAutoSub()` for the first time,
  *  in this case to load the CoValue for our `TodoProject` as well as
  *  the `ListOfTasks` referenced in it.
  */
@@ -32,11 +32,11 @@ import { useParams } from "react-router";
 export function ProjectTodoTable() {
     const projectId = useParams<{ projectId: CoID<TodoProject> }>().projectId;
 
-    // `useSyncedQuery()` reactively subscribes to updates to a CoValue's
+    // `useAutoSub()` reactively subscribes to updates to a CoValue's
     // content - whether we create edits locally, load persisted data, or receive
     // sync updates from other devices or participants!
     // It also recursively resolves and subsribes to all referenced CoValues.
-    const project = useSyncedQuery(projectId);
+    const project = useAutoSub(projectId);
 
     // `createTask` is similar to `createProject` we saw earlier, creating a new CoMap
     // for a new task (in the same group as the project), and then
@@ -44,17 +44,17 @@ export function ProjectTodoTable() {
     const createTask = useCallback(
         (text: string) => {
             if (!project?.tasks || !text) return;
-            const task = project.group.createMap<Task>({
+            const task = project.meta.group.createMap<Task>({
                 done: false,
                 text,
             });
 
             // project.tasks is immutable, but `append` will create an edit
-            // that will cause useSyncedQuery to rerender this component
+            // that will cause useAutoSub to rerender this component
             // - here and on other devices!
-            project.tasks.append(task);
+            project.tasks.append(task.id);
         },
-        [project?.tasks, project?.group]
+        [project?.tasks, project?.meta.group]
     );
 
     return (
@@ -97,7 +97,7 @@ export function ProjectTodoTable() {
     );
 }
 
-export function TaskRow({ task }: { task: Queried<Task> | undefined }) {
+export function TaskRow({ task }: { task: Resolved<Task> | undefined }) {
     return (
         <TableRow>
             <TableCell>
@@ -124,12 +124,12 @@ export function TaskRow({ task }: { task: Queried<Task> | undefined }) {
                     {
                         // Here we see for the first time how we can access edit history
                         // for a CoValue, and use it to display who created the task.
-                        task?.edits.text?.by?.profile?.name ? (
+                        task?.meta.edits.text?.by?.profile?.name ? (
                             <span
                                 className="rounded-full py-0.5 px-2 text-xs"
-                                style={uniqueColoring(task.edits.text.by.id)}
+                                style={uniqueColoring(task.meta.edits.text.by.id)}
                             >
-                                {task.edits.text.by.profile.name}
+                                {task.meta.edits.text.by.profile.name}
                             </span>
                         ) : (
                             <Skeleton className="mt-1 w-[50px] h-[1em] rounded-full" />

examples/todo/src/components/InviteButton.tsx

@@ -1,25 +1,25 @@
 import { useState } from "react";
 
-import { createInviteLink } from "jazz-react";
 import QRCode from "qrcode";
 
 import { useToast, Button } from "../basicComponents";
-import { CoValue, Queried } from "cojson";
+import { CoValue } from "cojson";
+import { Resolved, createInviteLink } from "jazz-react";
 
-export function InviteButton<T extends CoValue>({ value }: { value: T | Queried<T> | undefined }) {
+export function InviteButton<T extends CoValue>({ value }: { value?: Resolved<T> }) {
     const [existingInviteLink, setExistingInviteLink] = useState<string>();
     const { toast } = useToast();
 
     return (
-        value?.group?.myRole() === "admin" && (
+        value?.meta.group?.myRole() === "admin" && (
             <Button
                 size="sm"
                 className="py-0"
-                disabled={!value.group || !value.id}
+                disabled={!value.meta.group || !value.id}
                 variant="outline"
                 onClick={async () => {
                     let inviteLink = existingInviteLink;
-                    if (value.group && value.id && !inviteLink) {
+                    if (value.meta.group && value.id && !inviteLink) {
                         inviteLink = createInviteLink(value, "writer");
                         setExistingInviteLink(inviteLink);
                     }

examples/twit/.eslintrc.cjs

@@ -0,0 +1,18 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}

examples/twit/.gitignore

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

examples/twit/.prettierrc

@@ -0,0 +1,11 @@
+{
+  "printWidth": 120,
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": true,
+  "singleQuote": true,
+  "trailingComma": "none",
+  "bracketSpacing": true,
+  "jsxBracketSameLine": false,
+  "arrowParens": "avoid"
+}

examples/twit/Dockerfile

@@ -0,0 +1,4 @@
+FROM caddy:2.7.3-alpine
+LABEL org.opencontainers.image.source="https://github.com/gardencmp/jazz"
+
+COPY ./dist /usr/share/caddy/

examples/twit/README.md

@@ -0,0 +1,64 @@
+# Jazz Todo List Example
+
+Live version: https://example-todo.jazz.tools
+
+## Installing & running the example locally
+
+Start by checking out just the example app to a folder:
+
+```bash
+npx degit gardencmp/jazz/examples/todo jazz-example-todo
+cd jazz-example-todo
+```
+
+(This ensures that you have the example app without git history or our multi-package monorepo)
+
+Install dependencies:
+
+```bash
+npm install
+```
+
+Start the dev server:
+
+```bash
+npm run dev
+```
+
+## Structure
+
+- [`src/basicComponents`](./src/basicComponents): simple components to build the UI, unrelated to Jazz (uses [shadcn/ui](https://ui.shadcn.com))
+- [`src/components`](./src/components/): helper components that do contain Jazz-specific logic, but aren't very relevant to understand the basics of Jazz and CoJSON
+- [`src/1_types.ts`](./src/1_types.ts),
+[`src/2_main.tsx`](./src/2_main.tsx),
+[`src/3_NewProjectForm.tsx`](./src/3_NewProjectForm.tsx),
+[`src/4_ProjectTodoTable.tsx`](./src/4_ProjectTodoTable.tsx): the main files for this example, see the walkthrough below
+
+## Walkthrough
+
+### Main parts
+
+1. Defining the data model with CoJSON: [`src/1_types.ts`](./src/1_types.ts)
+
+2. The top-level provider `<WithJazz/>` and routing: [`src/2_main.tsx`](./src/2_main.tsx)
+
+3. Creating a new todo project: [`src/3_NewProjectForm.tsx`](./src/3_NewProjectForm.tsx)
+
+4. Reactively rendering a todo project as a table, adding and editing tasks: [`src/4_ProjectTodoTable.tsx`](./src/4_ProjectTodoTable.tsx)
+
+### Helpers
+
+- (not yet explained) Creating invite links/QR codes with `<InviteButton/>`: [`src/components/InviteButton.tsx`](./src/components/InviteButton.tsx)
+
+This is the whole Todo List app!
+
+## Questions / problems / feedback
+
+If you have feedback, let us know on [Discord](https://discord.gg/utDMjHYg42) or open an issue or PR to fix something that seems wrong.
+
+
+## Configuration: sync server
+
+By default, the example app uses [Jazz Global Mesh](https://jazz.tools/mesh) (`wss://sync.jazz.tools`) - so cross-device use, invites and collaboration should just work.
+
+You can also run a local sync server by running `npx cojson-simple-sync` and adding the query param `?sync=ws://localhost:4200` to the URL of the example app (for example: `http://localhost:5173/?sync=ws://localhost:4200`), or by setting the `sync` parameter of the `<WithJazz>` provider component in [./src/2_main.tsx](./src/2_main.tsx).

examples/twit/components.json

@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/index.css",
+    "baseColor": "stone",
+    "cssVariables": true
+  },
+  "aliases": {
+    "components": "@/basicComponents",
+    "utils": "@/basicComponents/lib/utils"
+  }
+}

examples/twit/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/png" href="/jazz-logo.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Twit</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/2_main.tsx"></script>
+  </body>
+</html>

examples/twit/job-template.nomad

@@ -0,0 +1,56 @@
+job "twit$BRANCH_SUFFIX" {
+  region     = "global"
+  datacenters = ["*"]
+
+  group "static" {
+    count = 8
+
+    network {
+      port "http" {
+        to = 80
+      }
+    }
+
+    constraint {
+      attribute = "${node.class}"
+      operator  = "="
+      value     = "mesh"
+    }
+
+    spread {
+      attribute = "${node.datacenter}"
+      weight    = 100
+    }
+
+    constraint {
+      distinct_hosts = true
+    }
+
+    task "server" {
+      driver = "docker"
+
+      config {
+        image = "$DOCKER_TAG"
+        ports = ["http"]
+
+        auth = {
+          username = "$DOCKER_USER"
+          password = "$DOCKER_PASSWORD"
+        }
+      }
+
+      service {
+        tags = ["public"]
+        name = "twit$BRANCH_SUFFIX"
+        port = "http"
+        provider = "consul"
+      }
+
+      resources {
+        cpu    = 50 # MHz
+        memory = 50 # MB
+      }
+    }
+  }
+}
+# deploy bump 4

examples/twit/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "jazz-example-twit",
+  "private": true,
+  "version": "0.0.60",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@radix-ui/react-checkbox": "^1.0.4",
+    "@radix-ui/react-popover": "^1.0.7",
+    "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-toast": "^1.1.4",
+    "@types/qrcode": "^1.5.1",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.0.0",
+    "javascript-time-ago": "^2.5.9",
+    "jazz-browser-media-images": "^0.4.13",
+    "jazz-react": "^0.4.13",
+    "jazz-react-auth-local": "^0.4.13",
+    "lucide-react": "^0.274.0",
+    "qrcode": "^1.5.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router": "^6.16.0",
+    "react-router-dom": "^6.16.0",
+    "react-time-ago": "^7.2.1",
+    "tailwind-merge": "^1.14.0",
+    "tailwindcss-animate": "^1.0.7",
+    "uniqolor": "^1.1.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.15",
+    "@types/react-dom": "^18.2.7",
+    "@typescript-eslint/eslint-plugin": "^6.0.0",
+    "@typescript-eslint/parser": "^6.0.0",
+    "@vitejs/plugin-react-swc": "^3.3.2",
+    "autoprefixer": "^10.4.14",
+    "eslint": "^8.45.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.3",
+    "postcss": "^8.4.27",
+    "tailwindcss": "^3.3.3",
+    "typescript": "^5.0.2",
+    "vite": "^4.4.5"
+  }
+}

examples/twit/postcss.config.js

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

examples/twit/src/1_dataModel.ts

@@ -0,0 +1,64 @@
+import { CoMap, CoList, Media, CoStream, Group, AccountMigration, EVERYONE, Profile } from 'cojson';
+
+export type Twit = CoMap<{
+  text?: string;
+  images?: ListOfImages['id'];
+  likes: LikeStream['id'];
+  replies: ReplyStream['id'];
+  isReplyTo?: Twit['id'];
+}>;
+
+export type ListOfImages = CoList<Media.ImageDefinition['id']>;
+export type LikeStream = CoStream<'❤️' | null>;
+export type ReplyStream = CoStream<Twit['id']>;
+
+export type ListOfTwits = CoList<Twit['id']>;
+export type ListOfProfiles = CoList<TwitProfile['id']>;
+export type StreamOfFollowers = CoStream<TwitProfile['id'] | null>;
+
+export type TwitProfile = Profile<
+  {
+    name: string;
+    bio: string;
+    avatar?: Media.ImageDefinition['id'];
+    twits: ListOfTwits['id'];
+    following: ListOfProfiles['id'];
+    followers: StreamOfFollowers['id'];
+    twitStyle?: { fontFamily: string; color: string };
+  }
+>;
+
+export type TwitAccountRoot = CoMap<{
+  peopleWhoCanSeeMyTwits: Group['id'];
+  peopleWhoCanSeeMyFollows: Group['id'];
+  peopleWhoCanFollowMe: Group['id'];
+  peopleWhoCanInteractWithMe: Group['id'];
+}>;
+
+export const migration: AccountMigration<TwitProfile, TwitAccountRoot> = (account, profile) => {
+  if (!account.get('root')) {
+    const peopleWhoCanSeeMyTwits = account.createGroup();
+    const peopleWhoCanSeeMyFollows = account.createGroup();
+    const peopleWhoCanFollowMe = account.createGroup();
+    const peopleWhoCanInteractWithMe = account.createGroup();
+
+    peopleWhoCanFollowMe?.addMember(EVERYONE, 'writer');
+    peopleWhoCanSeeMyTwits?.addMember(EVERYONE, 'reader');
+    peopleWhoCanSeeMyFollows?.addMember(EVERYONE, 'reader');
+    peopleWhoCanInteractWithMe?.addMember(EVERYONE, 'writer');
+
+    const root = account.createMap<TwitAccountRoot>({
+      peopleWhoCanSeeMyTwits: peopleWhoCanSeeMyTwits.id,
+      peopleWhoCanSeeMyFollows: peopleWhoCanSeeMyFollows.id,
+      peopleWhoCanFollowMe: peopleWhoCanFollowMe.id,
+      peopleWhoCanInteractWithMe: peopleWhoCanInteractWithMe.id
+    });
+
+    account.set('root', root.id);
+
+    profile.set('twits', peopleWhoCanSeeMyTwits.createList<ListOfTwits>().id, 'trusting');
+    profile.set('following', peopleWhoCanSeeMyFollows.createList<ListOfProfiles>().id, 'trusting');
+    profile.set('followers', peopleWhoCanFollowMe.createStream<StreamOfFollowers>().id, 'trusting');
+    console.log('MIGRATION SUCCESSFUL!');
+  }
+};

examples/twit/src/2_main.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { RouterProvider, createHashRouter } from 'react-router-dom';
+import './index.css';
+
+import { AccountMigration } from 'cojson';
+import { WithJazz, useJazz } from 'jazz-react';
+import { LocalAuth } from 'jazz-react-auth-local';
+
+import { Button, ThemeProvider, TitleAndLogo } from './basicComponents/index.tsx';
+import { PrettyAuthUI } from './components/Auth.tsx';
+
+import { migration } from './1_dataModel.ts';
+import { ChronoFeed } from './3_ChronoFeed.tsx';
+import { ProfilePage } from './5_ProfilePage.tsx';
+
+const appName = 'Jazz Twit Example';
+
+const auth = LocalAuth({
+  appName,
+  Component: PrettyAuthUI
+});
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <ThemeProvider>
+      <TitleAndLogo name={appName} />
+      <div className="flex flex-col h-full items-stretch justify-start gap-10 pt-10 pb-10 px-5 w-full max-w-xl mx-auto">
+        <WithJazz auth={auth} migration={migration as AccountMigration}>
+          <App />
+        </WithJazz>
+      </div>
+    </ThemeProvider>
+  </React.StrictMode>
+);
+
+function App() {
+  const { me, logOut } = useJazz();
+
+  const router = createHashRouter([
+    {
+      path: '/',
+      element: <ChronoFeed />
+    },
+    {
+      path: '/:profileId',
+      element: <ProfilePage />
+    },
+    {
+      path: '/me',
+      loader: () => router.navigate('/' + me.profile?.id)
+    }
+  ]);
+
+  return (
+    <>
+      <div className="flex gap-2">
+        <Button onClick={() => router.navigate('/')} variant="link" className="-ml-3">
+          Home
+        </Button>
+        <Button onClick={() => router.navigate('/me')} variant="link" className="ml-auto">
+          My Profile
+        </Button>
+        <Button onClick={() => router.navigate('/').then(logOut)} variant="outline">
+          Log Out
+        </Button>
+      </div>
+      <RouterProvider router={router} />
+    </>
+  );
+}

examples/twit/src/3_ChronoFeed.tsx

@@ -0,0 +1,35 @@
+import { useMemo } from 'react';
+import { useJazz } from 'jazz-react';
+import { TwitAccountRoot, TwitProfile } from './1_dataModel.ts';
+import { CreateTwitForm } from './6_CreateTwitForm.tsx';
+import { TwitComponent } from './4_TwitComponent.tsx';
+import { MainH1 } from './basicComponents/index.tsx';
+
+export function ChronoFeed() {
+  const { me } = useJazz<TwitProfile, TwitAccountRoot>();
+
+  const myTwits = me.profile?.twits;
+
+  const twitsFromFollows = useMemo(
+    () => me.profile?.following?.flatMap(follow => follow?.twits || []) || [],
+    [me.profile?.following]
+  );
+
+  const allTwitsSorted = useMemo(
+    () =>
+      [...(myTwits || []), ...twitsFromFollows]
+        .flatMap(tw => (tw ? (tw.isReplyTo ? [] : tw) : []))
+        .sort((a, b) => (b.meta.edits.text?.at?.getTime() || 0) - (a.meta.edits.text?.at?.getTime() || 0)),
+    [myTwits, twitsFromFollows]
+  );
+
+  return (
+    <div className="flex flex-col items-stretch">
+      <CreateTwitForm className="mb-10" />
+      <MainH1>From people you follow</MainH1>
+      {allTwitsSorted?.map(twit => (
+        <TwitComponent twit={twit} key={twit.id} />
+      ))}
+    </div>
+  );
+}

examples/twit/src/4_TwitComponent.tsx

@@ -0,0 +1,101 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import {
+  ButtonWithCount,
+  ProfilePicImg,
+  ReactionsContainer,
+  RepliesContainer,
+  SubtleRelativeTimeAgo,
+  TwitContainer,
+  TwitWithRepliesContainer,
+  TwitImg,
+  TwitImgGallery,
+  TwitHeader,
+  TwitBody,
+  TwitText,
+} from './basicComponents/index.tsx';
+import { Twit, TwitProfile } from './1_dataModel.ts';
+import { BrowserImage } from 'jazz-browser-media-images';
+import { HeartIcon, MessagesSquareIcon } from 'lucide-react';
+import { CreateTwitForm } from './6_CreateTwitForm.tsx';
+import { Resolved } from 'jazz-react';
+
+export function TwitComponent({
+  twit,
+  alreadyInReplies: alreadyInReplies
+}: {
+  twit?: Resolved<Twit>;
+  alreadyInReplies?: boolean;
+}) {
+  const [showReplyForm, setShowReplyForm] = React.useState(false);
+
+  const posterProfile = twit?.meta.edits.text?.by?.profile as Resolved<TwitProfile> | undefined;
+  const isTopLevel = !twit?.isReplyTo || alreadyInReplies;
+
+  return (
+    <TwitWithRepliesContainer isTopLevel={isTopLevel}>
+      <TwitContainer>
+        <ProfilePicImg
+          src={posterProfile?.avatar?.as(BrowserImage)?.highestResSrcOrPlaceholder}
+          linkTo={'/' + posterProfile?.id}
+          initial={posterProfile?.name[0]}
+          size={twit?.isReplyTo && "sm"}
+        />
+
+        <TwitBody>
+          <TwitHeader>
+            <Link to={'/' + posterProfile?.id} className="font-bold hover:underline">
+              {posterProfile?.name}
+            </Link>
+            <SubtleRelativeTimeAgo dateTime={twit?.meta.edits.text?.at} />
+          </TwitHeader>
+
+          <TwitText style={posterProfile?.twitStyle}>
+            {/* This is where the tweet text goes */}
+            {twit?.text}
+          </TwitText>
+
+          {twit?.images && (
+            <TwitImgGallery>
+              {twit.images.map(image => (
+                <TwitImg src={image?.as(BrowserImage)?.highestResSrcOrPlaceholder} key={image?.id} />
+              ))}
+            </TwitImgGallery>
+          )}
+
+          <ReactionsContainer>
+            <ButtonWithCount
+              active={twit?.likes?.me?.last === '❤️'}
+              onClick={() => twit?.likes?.push(twit?.likes?.me?.last ? null : '❤️')}
+              count={twit?.likes?.perAccount.filter(([, liked]) => liked.last === '❤️').length || 0}
+              icon={<HeartIcon size="18" />}
+              activeIcon={<HeartIcon color="red" size="18" fill="red" />}
+            />
+            <ButtonWithCount
+              onClick={() => setShowReplyForm(s => !s)}
+              count={twit?.replies?.perAccount.flatMap(([, byAccount]) => byAccount.all).length || 0}
+              icon={<MessagesSquareIcon size="18" />}
+            />
+          </ReactionsContainer>
+        </TwitBody>
+      </TwitContainer>
+
+      <RepliesContainer>
+        {showReplyForm && (
+          <CreateTwitForm
+            inReplyTo={twit}
+            onSubmit={() => setShowReplyForm(false)}
+            className={'mt-5 ' + (isTopLevel ? 'ml-14' : 'ml-12')}
+          />
+        )}
+
+        {twit?.replies?.perAccount
+          .flatMap(([, byAccount]) => byAccount.all)
+          .sort((a, b) => b.at.getTime() - a.at.getTime())
+          .map(replyEntry => (
+            <TwitComponent twit={replyEntry.value} key={replyEntry.value?.id} alreadyInReplies={!!twit?.isReplyTo} />
+          ))}
+      </RepliesContainer>
+    </TwitWithRepliesContainer>
+  );
+}

examples/twit/src/5_ProfilePage.tsx

@@ -0,0 +1,127 @@
+import { useEffect, useMemo, useState } from 'react';
+import { useParams } from 'react-router-dom';
+import { useJazz, useAutoSub } from 'jazz-react';
+import QRCode from 'qrcode';
+import {
+  BioInput,
+  ChooseProfilePicInput,
+  FollowerStatsContainer,
+  Popover,
+  ProfileName,
+  ProfilePicImg,
+  ProfileTitleContainer,
+  SmallInlineButton
+} from './basicComponents/index.tsx';
+import { TwitAccountRoot, TwitProfile } from './1_dataModel.ts';
+import { CoID } from 'cojson';
+import { BrowserImage, createImage } from 'jazz-browser-media-images';
+import { FollowButton, FollowerList, FollowingList } from './7_FollowStuff.tsx';
+import { CreateTwitForm } from './6_CreateTwitForm.tsx';
+import { TwitComponent } from './4_TwitComponent.tsx';
+import { PopoverContent, PopoverTrigger } from '@radix-ui/react-popover';
+
+export function ProfilePage() {
+  const { profileId } = useParams<{ profileId: CoID<TwitProfile> }>();
+  const { me } = useJazz<TwitProfile, TwitAccountRoot>();
+
+  const profile = useAutoSub(profileId);
+  const isMe = profile?.id == me.profile?.id;
+
+  const profileTwitsAndRepliedToTwits = useMemo(() => {
+    return profile?.twits?.map((twit, _, allTwits) =>
+      twit?.isReplyTo
+        ? allTwits.some(
+            tw =>
+              tw?.id === twit?.isReplyTo?.id ||
+              tw?.id === twit?.isReplyTo?.isReplyTo?.id ||
+              tw?.id === twit?.isReplyTo?.isReplyTo?.isReplyTo?.id
+          )
+          ? null
+          : twit?.isReplyTo
+        : twit
+    );
+  }, [profile?.twits]);
+
+  const [qr, setQr] = useState<string>('');
+  useEffect(() => {
+    QRCode.toDataURL(
+      window.location.protocol + '//' + window.location.host + window.location.pathname + '#/' + profile?.id,
+      {
+        errorCorrectionLevel: 'L'
+      }
+    ).then(setQr);
+  }, [profile?.id]);
+
+  return (
+    <div>
+      <div className="py-2 mb-5 flex gap-4">
+        <div className="flex flex-col items-stretch">
+          <ProfilePicImg
+            src={profile?.avatar?.as(BrowserImage)?.highestResSrcOrPlaceholder}
+            initial={profile?.name[0]}
+            size="xxl"
+          />
+          {isMe && (
+            <ChooseProfilePicInput
+              onChange={(file: File) =>
+                me.root?.peopleWhoCanSeeMyTwits &&
+                createImage(file, me.root.peopleWhoCanSeeMyTwits, 256).then(image => {
+                  me.profile?.set({ avatar: image.id }, 'trusting');
+                })
+              }
+            />
+          )}
+        </div>
+        <div className="grow">
+          <ProfileTitleContainer>
+            <ProfileName>{profile?.name}</ProfileName>
+            {!isMe && <FollowButton profile={profile} />}
+          </ProfileTitleContainer>
+
+          <div>
+            {isMe ? (
+              <BioInput
+                value={profile?.bio}
+                onChange={newBio => {
+                  profile?.set({ bio: newBio }, 'trusting');
+                  // prettier-ignore
+                  if (newBio.startsWith('{')) { profile?.set('twitStyle', JSON.parse(newBio), 'trusting'); } else { profile?.set('twitStyle', undefined, 'trusting'); }
+                }}
+              />
+            ) : (
+              profile?.bio || '(No bio)'
+            )}
+          </div>
+
+          <FollowerStatsContainer>
+            <Popover>
+              <PopoverTrigger>
+                <SmallInlineButton>
+                  {profile?.followers?.perAccount?.filter(([, status]) => status.last).length} Followers
+                </SmallInlineButton>
+              </PopoverTrigger>
+              <PopoverContent>
+                <FollowerList profile={profile} />
+              </PopoverContent>
+            </Popover>
+            <span className="hidden md:block">&mdash;</span> <br className="md:hidden" />
+            <Popover>
+              <PopoverTrigger>
+                <SmallInlineButton>{new Set(profile?.following || []).size} Following</SmallInlineButton>
+              </PopoverTrigger>
+              <PopoverContent>
+                <FollowingList profile={profile} />
+              </PopoverContent>
+            </Popover>
+          </FollowerStatsContainer>
+        </div>
+
+        {isMe && <img src={qr} className="rounded w-28 h-28 -mr-3 dark:invert max-sm:w-16 max-sm:h-16" />}
+      </div>
+
+      {isMe && <CreateTwitForm className="mb-4" />}
+
+      {profileTwitsAndRepliedToTwits?.map(twit => twit && <TwitComponent twit={twit} key={twit?.id} />)}
+    </div>
+  );
+}

examples/twit/src/6_CreateTwitForm.tsx

@@ -0,0 +1,73 @@
+import React, { useCallback, useEffect } from 'react';
+import { Resolved, useJazz } from 'jazz-react';
+import { AddTwitPicsInput, TwitImg, TwitTextInput } from './basicComponents/index.tsx';
+import { LikeStream, ListOfImages, ReplyStream, Twit, TwitAccountRoot, TwitProfile } from './1_dataModel.ts';
+import { createImage } from 'jazz-browser-media-images';
+
+export function CreateTwitForm(
+  props: {
+    inReplyTo?: Resolved<Twit>;
+    onSubmit?: () => void;
+    className?: string;
+  } = {}
+) {
+  const { me } = useJazz<TwitProfile, TwitAccountRoot>();
+
+  const [pics, setPics] = React.useState<File[]>([]);
+
+  const onSubmit = useCallback(
+    (twitText: string) => {
+      const audience = me.root?.peopleWhoCanSeeMyTwits;
+      const interactors = me.root?.peopleWhoCanInteractWithMe;
+      if (!audience || !interactors) return;
+
+      const twit = audience.createMap<Twit>({
+        text: twitText,
+        likes: interactors.createStream<LikeStream>().id,
+        replies: interactors.createStream<ReplyStream>().id
+      });
+
+      me.profile?.twits?.prepend(twit?.id as Twit['id']);
+
+      if (props.inReplyTo) {
+        props.inReplyTo.replies?.push(twit.id);
+        twit.set({ isReplyTo: props.inReplyTo.id });
+      }
+
+      Promise.all(pics.map(pic => createImage(pic, twit.group, 1024))).then(createdPics => {
+        twit.set({ images: audience.createList<ListOfImages>(createdPics.map(pic => pic.id)).id });
+      });
+
+      setPics([]);
+      props.onSubmit?.();
+    },
+    [me.profile?.twits, me.root?.peopleWhoCanSeeMyTwits, me.root?.peopleWhoCanInteractWithMe, props, pics]
+  );
+
+  const [picPreviews, setPicPreviews] = React.useState<string[]>([]);
+  useEffect(() => {
+    const previews = pics.map(pic => URL.createObjectURL(pic));
+    setPicPreviews(previews);
+    return () => previews.forEach(preview => URL.revokeObjectURL(preview));
+  }, [pics]);
+
+  return (
+    <div className={props.className}>
+      <TwitTextInput onSubmit={onSubmit} submitButtonLabel={props.inReplyTo ? 'Reply!' : 'Twit!'} />
+
+      {picPreviews.length ? (
+        <div className="flex gap-2 mt-2">
+          {picPreviews.map(preview => (
+            <TwitImg src={preview} />
+          ))}
+        </div>
+      ) : (
+        <AddTwitPicsInput
+          onChange={(newPics: File[]) => {
+            setPics(newPics);
+          }}
+        />
+      )}
+    </div>
+  );
+}

examples/twit/src/7_FollowStuff.tsx

@@ -0,0 +1,80 @@
+import { useCallback } from 'react';
+import { Resolved, useJazz } from 'jazz-react';
+import { Button, ProfilePicImg } from './basicComponents/index.tsx';
+import { TwitAccountRoot, TwitProfile } from './1_dataModel.ts';
+import { Link } from 'react-router-dom';
+import { BrowserImage } from 'jazz-browser-media-images';
+
+export function FollowButton({ profile }: { profile?: Resolved<TwitProfile> }) {
+  const { me } = useJazz<TwitProfile, TwitAccountRoot>();
+
+  const alreadyFollowing = profile?.followers?.perAccount?.some(([acc, status]) => acc === me.id && !!status.last);
+  const theyFollowMe = profile?.following?.some(f => f?.id === me.profile?.id);
+
+  const followOrUnfollow = useCallback(() => {
+    if (!profile?.followers || !me.profile?.following) return;
+    if (alreadyFollowing) {
+      me.profile.following.delete(me.profile.following.findIndex(f => f?.id === profile.id));
+      profile.followers.push(null);
+    } else {
+      me.profile.following.append(profile.id);
+      profile.followers.push(me.profile.id);
+    }
+  }, [alreadyFollowing, me.profile, profile]);
+
+  return profile?.id === me.profile?.id ? (
+    <div className="ml-auto text-neutral-500">That's you!</div>
+  ) : (
+    <Button onClick={followOrUnfollow} className="ml-auto" variant={alreadyFollowing ? 'ghost' : 'default'}>
+      {alreadyFollowing ? 'Unfollow' : theyFollowMe ? 'Follow Back' : 'Follow'}
+    </Button>
+  );
+}
+
+export function FollowerList({ profile }: { profile?: Resolved<TwitProfile> }) {
+  return (
+    <div className="flex flex-col gap-4 p-4 bg-background rounded-lg border shadow-lg w-96 max-w-full m-2">
+      {profile?.followers?.perAccount.map(([, followEntry]) => {
+        const followerProfile = followEntry.last;
+        // not following anymore?
+        if (!followerProfile) return null;
+
+        return (
+          <div key={followerProfile.id} className="flex items-center">
+            <ProfilePicImg
+              src={followerProfile?.avatar?.as(BrowserImage)?.highestResSrcOrPlaceholder}
+              linkTo={'/' + followerProfile?.id}
+              initial={followerProfile?.name[0]}
+            />
+            <Link to={'/' + followerProfile?.id} className="font-bold hover:underline">
+              {followerProfile?.name}
+            </Link>
+            <FollowButton profile={followerProfile} />
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+export function FollowingList({ profile }: { profile?: Resolved<TwitProfile> }) {
+  return (
+    <div className="flex flex-col gap-4 p-4 bg-background rounded-lg border shadow-lg w-96 max-w-full m-2">
+      {[...new Set(profile?.following || [])].map(followingProfile => {
+        return (
+          <div key={followingProfile?.id} className="flex items-center">
+            <ProfilePicImg
+              src={followingProfile?.avatar?.as(BrowserImage)?.highestResSrcOrPlaceholder}
+              linkTo={'/' + followingProfile?.id}
+              initial={followingProfile?.name[0]}
+            />
+            <Link to={'/' + followingProfile?.id} className="font-bold hover:underline">
+              {followingProfile?.name}
+            </Link>
+            <FollowButton profile={followingProfile} />
+          </div>
+        );
+      })}
+    </div>
+  );
+}

examples/twit/src/basicComponents/SubmittableInput.tsx

@@ -0,0 +1,39 @@
+import { Input } from "@/basicComponents/ui/input";
+import { Button } from "@/basicComponents/ui/button";
+
+export function SubmittableInput({
+    onSubmit,
+    label,
+    placeholder,
+    disabled,
+}: {
+    onSubmit: (text: string) => void;
+    label: string;
+    placeholder: string;
+    disabled?: boolean;
+}) {
+    return (
+        <form
+            className="flex flex-row items-center gap-3"
+            onSubmit={(e) => {
+                e.preventDefault();
+                const textEl = e.currentTarget.elements.namedItem(
+                    "text"
+                ) as HTMLInputElement;
+                onSubmit(textEl.value);
+                textEl.value = "";
+            }}
+        >
+            <Input
+                className="-ml-3 -my-2 flex-grow flex-3 text-base"
+                name="text"
+                placeholder={placeholder}
+                autoComplete="off"
+                disabled={disabled}
+            />
+            <Button asChild type="submit" className="flex-shrink flex-1 cursor-pointer">
+                <Input type="submit" value={label} disabled={disabled} />
+            </Button>
+        </form>
+    );
+}

examples/twit/src/basicComponents/TitleAndLogo.tsx

@@ -0,0 +1,10 @@
+import { Toaster } from ".";
+
+export function TitleAndLogo({name}: {name: string}) {
+    return <>
+        <div className="flex items-center gap-2 justify-center mt-5">
+                <img src="jazz-logo.png" className="h-5" /> {name}
+            </div>
+            <Toaster />
+    </>
+}

examples/twit/src/basicComponents/index.tsx

@@ -0,0 +1,228 @@
+import ReactTimeAgo from 'react-time-ago';
+import { Button, ButtonProps } from './ui/button';
+export { Button } from './ui/button';
+export { Checkbox } from './ui/checkbox';
+import { Input } from './ui/input';
+import { Link } from 'react-router-dom';
+export { Input } from './ui/input';
+export { Skeleton } from './ui/skeleton';
+export { Toaster } from './ui/toaster';
+export { useToast } from './ui/use-toast';
+export { SubmittableInput } from './SubmittableInput';
+export { TitleAndLogo } from './TitleAndLogo';
+export { ThemeProvider } from './themeProvider';
+export { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from './ui/table';
+export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from './ui/card';
+export { Popover, PopoverContent, PopoverTrigger } from './ui/popover';
+
+import TimeAgo from 'javascript-time-ago';
+import en from 'javascript-time-ago/locale/en.json';
+TimeAgo.addDefaultLocale(en);
+
+export function BioInput(props: { value?: string; onChange: (value: string) => void }) {
+  return (
+    <Input
+      type="text"
+      value={props.value}
+      autoComplete="off"
+      onChange={e => {
+        props.onChange(e.target.value);
+      }}
+      placeholder="Add a bio..."
+      className="w-full p-2 border rounded max-md:text-base"
+    />
+  );
+}
+
+export function ProfileTitleContainer(props: { children: React.ReactNode }) {
+  return <div className="flex items-baseline">{props.children}</div>;
+}
+
+export function ProfileName(props: { children: React.ReactNode }) {
+  return <h1 className="text-2xl">{props.children}</h1>;
+}
+
+export function FollowerStatsContainer(props: { children: React.ReactNode }) {
+  return <div className="flex gap-2 mt-2 text-neutral-500">{props.children}</div>;
+}
+
+export function ChooseProfilePicInput(props: { onChange: (file: File) => void }) {
+  return (
+    <Button asChild className="mt-2" size="sm" variant="secondary">
+      <label className="cursor-pointer text-xs">
+        Choose Pic
+        <Input
+          type="file"
+          accept="image/*"
+          onChange={e => {
+            e.target.files?.[0] && props.onChange(e.target.files[0]);
+            e.target.value = '';
+          }}
+          className="hidden"
+        />
+      </label>
+    </Button>
+  );
+}
+
+export function ProfilePicImg(props: { src?: string; size?: 'sm' | 'xxl'; linkTo?: string; initial?: string }) {
+  return (
+    <Link to={props.linkTo || ''}>
+      {props.src ? (
+        <img
+          src={props.src}
+          className={
+            'bg-neutral-200 rounded-full mr-2 object-cover shrink-0' +
+            (props.size === 'sm' ? ' w-8 h-8' : props.size === 'xxl' ? ' w-20 h-20' : ' w-10 h-10')
+          }
+        />
+      ) : (
+        <div
+          className={
+            'bg-neutral-200 rounded-full mr-2 object-cover shrink-0 flex items-center justify-center text-neutral-700 ' +
+            (props.size === 'sm'
+              ? ' w-8 h-8 text-[1.5rem]'
+              : props.size === 'xxl'
+              ? ' w-20 h-20 text-[3.75rem]'
+              : ' w-10 h-10 text-[1.875rem]')
+          }
+        >
+          <div className="-mt-[8%]">{props.initial}</div>
+        </div>
+      )}
+    </Link>
+  );
+}
+
+export function SubtleRelativeTimeAgo(props: { dateTime?: Date }) {
+  return (
+    <div className="ml-auto text-neutral-300 text-xs whitespace-nowrap">
+      <ReactTimeAgo date={props.dateTime || 0} />
+    </div>
+  );
+}
+
+export function TwitImg(props: { src?: string }) {
+  return <img src={props.src} className="h-40 rounded object-cover" />;
+}
+
+export function ReactionsContainer(props: { children: React.ReactNode }) {
+  return <div className="flex gap-4 mt-2">{props.children}</div>;
+}
+
+export function RepliesContainer(props: { children: React.ReactNode }) {
+  return <div className="flex flex-col items-stretch gap-2 mt-2">{props.children}</div>;
+}
+
+export function ButtonWithCount(props: {
+  count: number;
+  onClick: () => void;
+  active?: boolean;
+  icon: React.ReactNode;
+  activeIcon?: React.ReactNode;
+}) {
+  return (
+    <div className="flex items-center">
+      <Button
+        className="w-10 h-7 p-1 mr-1"
+        variant={props.active ? 'secondary' : 'outline'}
+        onClick={props.onClick}
+        size="icon"
+      >
+        {props.active ? props.activeIcon : props.icon}
+      </Button>{' '}
+      <span className="tabular-nums">{props.count}</span>
+    </div>
+  );
+}
+
+export function TwitTextInput(props: { onSubmit: (text: string) => void; submitButtonLabel: string }) {
+  return (
+    <form
+      onSubmit={event => {
+        event.preventDefault();
+
+        const form = event.target as HTMLFormElement;
+        const text = form.twitText.value;
+        text && props.onSubmit(text);
+        form.twitText.value = '';
+      }}
+      className="flex gap-2 items-end"
+    >
+      <Input
+        type="text"
+        name="twitText"
+        placeholder="What's happenin'"
+        autoComplete="off"
+        className="p-2 border rounded grow max-md:text-base"
+      />
+      <Button asChild>
+        <input type="submit" value={props.submitButtonLabel} />
+      </Button>
+    </form>
+  );
+}
+
+export function AddTwitPicsInput(props: { onChange: (files: File[]) => void }) {
+  return (
+    <Button asChild className="mt-2" size="sm" variant="secondary">
+      <label className="cursor-pointer text-xs">
+        Add Pics
+        <Input
+          type="file"
+          onChange={e => {
+            props.onChange(Array.from(e.target.files || []));
+          }}
+          className="hidden"
+          accept="image/*"
+          multiple
+        />
+      </label>
+    </Button>
+  );
+}
+
+export function TwitWithRepliesContainer(props: { children: React.ReactNode; isTopLevel?: boolean }) {
+  return (
+    <div className={'py-2 flex flex-col items-stretch' + (props.isTopLevel ? ' border-t' : ' ml-14')}>
+      {props.children}
+    </div>
+  );
+}
+
+export function TwitContainer(props: { children: React.ReactNode }) {
+  return <div className="flex gap-2">{props.children}</div>;
+}
+
+export function TwitBody(props: { children: React.ReactNode }) {
+  return <div className="grow flex flex-col items-stretch">{props.children}</div>;
+}
+
+export function TwitHeader(props: { children: React.ReactNode }) {
+  return <div className="flex items-baseline">{props.children}</div>;
+}
+
+export function TwitImgGallery(props: { children: React.ReactNode }) {
+  return <div className="flex gap-2 mt-2 max-w-full overflow-auto">{props.children}</div>;
+}
+
+export function TwitText(props: { children: React.ReactNode; style?: React.CSSProperties }) {
+  return <div style={props.style}>{props.children}</div>;
+}
+
+export function QuoteContainer(props: { children: React.ReactNode }) {
+  return <div className="border rounded">{props.children}</div>;
+}
+
+export function MainH1(props: { children: React.ReactNode }) {
+  return <h1 className="text-2xl mb-4">{props.children}</h1>;
+}
+
+export function SmallInlineButton(props: { children: React.ReactNode } & ButtonProps) {
+  const {children, ...rest} = props
+  return (
+    <Button variant={'ghost'} className="h-6 px-1 -mx-1" {...rest}>
+      {children}
+    </Button>
+  );
+}

examples/twit/src/basicComponents/lib/utils.ts

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

examples/twit/src/basicComponents/themeProvider.tsx

@@ -0,0 +1,72 @@
+import { createContext, useContext, useEffect, useState } from "react";
+
+type ThemeProviderProps = {
+    children: React.ReactNode;
+    defaultTheme?: string;
+    storageKey?: string;
+};
+
+type ThemeProviderState = {
+    theme: string;
+    setTheme: (theme: string) => void;
+};
+
+const initialState = {
+    theme: "system",
+    setTheme: () => null,
+};
+
+const ThemeProviderContext = createContext<ThemeProviderState>(initialState);
+
+export function ThemeProvider({
+    children,
+    defaultTheme = "system",
+    storageKey = "vite-ui-theme",
+    ...props
+}: ThemeProviderProps) {
+    const [theme, setTheme] = useState(
+        () => localStorage.getItem(storageKey) || defaultTheme
+    );
+
+    useEffect(() => {
+        const root = window.document.documentElement;
+
+        root.classList.remove("light", "dark");
+
+        if (theme === "system") {
+            const systemTheme = window.matchMedia(
+                "(prefers-color-scheme: dark)"
+            ).matches
+                ? "dark"
+                : "light";
+
+            root.classList.add(systemTheme);
+            return;
+        }
+
+        root.classList.add(theme);
+    }, [theme]);
+
+    const value = {
+        theme,
+        setTheme: (theme: string) => {
+            localStorage.setItem(storageKey, theme);
+            setTheme(theme);
+        },
+    };
+
+    return (
+        <ThemeProviderContext.Provider {...props} value={value}>
+            {children}
+        </ThemeProviderContext.Provider>
+    );
+}
+
+export const useTheme = () => {
+    const context = useContext(ThemeProviderContext);
+
+    if (context === undefined)
+        throw new Error("useTheme must be used within a ThemeProvider");
+
+    return context;
+};

examples/twit/src/basicComponents/ui/button.tsx

@@ -0,0 +1,56 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/basicComponents/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button"
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Button.displayName = "Button"
+
+export { Button, buttonVariants }

examples/twit/src/basicComponents/ui/card.tsx

@@ -0,0 +1,79 @@
+import * as React from "react"
+
+import { cn } from "@/basicComponents/lib/utils"
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-lg border bg-card text-card-foreground shadow-sm",
+      className
+    )}
+    {...props}
+  />
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h3
+    ref={ref}
+    className={cn(
+      "text-2xl font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }

examples/twit/src/basicComponents/ui/checkbox.tsx

@@ -0,0 +1,28 @@
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { Check } from "lucide-react"
+
+import { cn } from "@/basicComponents/lib/utils"
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      className
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator
+      className={cn("flex items-center justify-center text-current")}
+    >
+      <Check className="h-4 w-4" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+))
+Checkbox.displayName = CheckboxPrimitive.Root.displayName
+
+export { Checkbox }

examples/twit/src/basicComponents/ui/input.tsx

@@ -0,0 +1,25 @@
+import * as React from "react"
+
+import { cn } from "@/basicComponents/lib/utils"
+
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Input.displayName = "Input"
+
+export { Input }

examples/twit/src/basicComponents/ui/popover.tsx

@@ -0,0 +1,29 @@
+import * as React from "react"
+import * as PopoverPrimitive from "@radix-ui/react-popover"
+
+import { cn } from "@/basicComponents/lib/utils"
+
+const Popover = PopoverPrimitive.Root
+
+const PopoverTrigger = PopoverPrimitive.Trigger
+
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props}
+    />
+  </PopoverPrimitive.Portal>
+))
+PopoverContent.displayName = PopoverPrimitive.Content.displayName
+
+export { Popover, PopoverTrigger, PopoverContent }

examples/twit/src/basicComponents/ui/skeleton.tsx

@@ -0,0 +1,15 @@
+import { cn } from "@/basicComponents/lib/utils"
+
+function Skeleton({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn("animate-pulse rounded-md bg-muted", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }

examples/twit/src/basicComponents/ui/table.tsx

@@ -0,0 +1,114 @@
+import * as React from "react"
+
+import { cn } from "@/basicComponents/lib/utils"
+
+const Table = React.forwardRef<
+  HTMLTableElement,
+  React.HTMLAttributes<HTMLTableElement>
+>(({ className, ...props }, ref) => (
+  <div className="w-full overflow-auto">
+    <table
+      ref={ref}
+      className={cn("w-full caption-bottom text-sm", className)}
+      {...props}
+    />
+  </div>
+))
+Table.displayName = "Table"
+
+const TableHeader = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
+))
+TableHeader.displayName = "TableHeader"
+
+const TableBody = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tbody
+    ref={ref}
+    className={cn("[&_tr:last-child]:border-0", className)}
+    {...props}
+  />
+))
+TableBody.displayName = "TableBody"
+
+const TableFooter = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tfoot
+    ref={ref}
+    className={cn("bg-primary font-medium text-primary-foreground", className)}
+    {...props}
+  />
+))
+TableFooter.displayName = "TableFooter"
+
+const TableRow = React.forwardRef<
+  HTMLTableRowElement,
+  React.HTMLAttributes<HTMLTableRowElement>
+>(({ className, ...props }, ref) => (
+  <tr
+    ref={ref}
+    className={cn(
+      "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+      className
+    )}
+    {...props}
+  />
+))
+TableRow.displayName = "TableRow"
+
+const TableHead = React.forwardRef<
+  HTMLTableCellElement,
+  React.ThHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <th
+    ref={ref}
+    className={cn(
+      "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
+      className
+    )}
+    {...props}
+  />
+))
+TableHead.displayName = "TableHead"
+
+const TableCell = React.forwardRef<
+  HTMLTableCellElement,
+  React.TdHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <td
+    ref={ref}
+    className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
+    {...props}
+  />
+))
+TableCell.displayName = "TableCell"
+
+const TableCaption = React.forwardRef<
+  HTMLTableCaptionElement,
+  React.HTMLAttributes<HTMLTableCaptionElement>
+>(({ className, ...props }, ref) => (
+  <caption
+    ref={ref}
+    className={cn("mt-4 text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+TableCaption.displayName = "TableCaption"
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}

examples/twit/src/basicComponents/ui/toast.tsx

@@ -0,0 +1,127 @@
+import * as React from "react"
+import * as ToastPrimitives from "@radix-ui/react-toast"
+import { cva, type VariantProps } from "class-variance-authority"
+import { X } from "lucide-react"
+
+import { cn } from "@/basicComponents/lib/utils"
+
+const ToastProvider = ToastPrimitives.Provider
+
+const ToastViewport = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Viewport>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Viewport
+    ref={ref}
+    className={cn(
+      "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
+      className
+    )}
+    {...props}
+  />
+))
+ToastViewport.displayName = ToastPrimitives.Viewport.displayName
+
+const toastVariants = cva(
+  "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
+  {
+    variants: {
+      variant: {
+        default: "border bg-background text-foreground",
+        destructive:
+          "destructive group border-destructive bg-destructive text-destructive-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+const Toast = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
+    VariantProps<typeof toastVariants>
+>(({ className, variant, ...props }, ref) => {
+  return (
+    <ToastPrimitives.Root
+      ref={ref}
+      className={cn(toastVariants({ variant }), className)}
+      {...props}
+    />
+  )
+})
+Toast.displayName = ToastPrimitives.Root.displayName
+
+const ToastAction = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Action>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Action
+    ref={ref}
+    className={cn(
+      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
+      className
+    )}
+    {...props}
+  />
+))
+ToastAction.displayName = ToastPrimitives.Action.displayName
+
+const ToastClose = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Close>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Close
+    ref={ref}
+    className={cn(
+      "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
+      className
+    )}
+    toast-close=""
+    {...props}
+  >
+    <X className="h-4 w-4" />
+  </ToastPrimitives.Close>
+))
+ToastClose.displayName = ToastPrimitives.Close.displayName
+
+const ToastTitle = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Title>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Title
+    ref={ref}
+    className={cn("text-sm font-semibold", className)}
+    {...props}
+  />
+))
+ToastTitle.displayName = ToastPrimitives.Title.displayName
+
+const ToastDescription = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Description>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Description
+    ref={ref}
+    className={cn("text-sm opacity-90", className)}
+    {...props}
+  />
+))
+ToastDescription.displayName = ToastPrimitives.Description.displayName
+
+type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>
+
+type ToastActionElement = React.ReactElement<typeof ToastAction>
+
+export {
+  type ToastProps,
+  type ToastActionElement,
+  ToastProvider,
+  ToastViewport,
+  Toast,
+  ToastTitle,
+  ToastDescription,
+  ToastClose,
+  ToastAction,
+}

examples/twit/src/basicComponents/ui/toaster.tsx

@@ -0,0 +1,33 @@
+import {
+  Toast,
+  ToastClose,
+  ToastDescription,
+  ToastProvider,
+  ToastTitle,
+  ToastViewport,
+} from "@/basicComponents/ui/toast"
+import { useToast } from "@/basicComponents/ui/use-toast"
+
+export function Toaster() {
+  const { toasts } = useToast()
+
+  return (
+    <ToastProvider>
+      {toasts.map(function ({ id, title, description, action, ...props }) {
+        return (
+          <Toast key={id} {...props}>
+            <div className="grid gap-1">
+              {title && <ToastTitle>{title}</ToastTitle>}
+              {description && (
+                <ToastDescription>{description}</ToastDescription>
+              )}
+            </div>
+            {action}
+            <ToastClose />
+          </Toast>
+        )
+      })}
+      <ToastViewport />
+    </ToastProvider>
+  )
+}

examples/twit/src/basicComponents/ui/use-toast.ts

@@ -0,0 +1,192 @@
+// Inspired by react-hot-toast library
+import * as React from "react"
+
+import type {
+  ToastActionElement,
+  ToastProps,
+} from "@/basicComponents/ui/toast"
+
+const TOAST_LIMIT = 1
+const TOAST_REMOVE_DELAY = 1000000
+
+type ToasterToast = ToastProps & {
+  id: string
+  title?: React.ReactNode
+  description?: React.ReactNode
+  action?: ToastActionElement
+}
+
+const actionTypes = {
+  ADD_TOAST: "ADD_TOAST",
+  UPDATE_TOAST: "UPDATE_TOAST",
+  DISMISS_TOAST: "DISMISS_TOAST",
+  REMOVE_TOAST: "REMOVE_TOAST",
+} as const
+
+let count = 0
+
+function genId() {
+  count = (count + 1) % Number.MAX_VALUE
+  return count.toString()
+}
+
+type ActionType = typeof actionTypes
+
+type Action =
+  | {
+      type: ActionType["ADD_TOAST"]
+      toast: ToasterToast
+    }
+  | {
+      type: ActionType["UPDATE_TOAST"]
+      toast: Partial<ToasterToast>
+    }
+  | {
+      type: ActionType["DISMISS_TOAST"]
+      toastId?: ToasterToast["id"]
+    }
+  | {
+      type: ActionType["REMOVE_TOAST"]
+      toastId?: ToasterToast["id"]
+    }
+
+interface State {
+  toasts: ToasterToast[]
+}
+
+const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()
+
+const addToRemoveQueue = (toastId: string) => {
+  if (toastTimeouts.has(toastId)) {
+    return
+  }
+
+  const timeout = setTimeout(() => {
+    toastTimeouts.delete(toastId)
+    dispatch({
+      type: "REMOVE_TOAST",
+      toastId: toastId,
+    })
+  }, TOAST_REMOVE_DELAY)
+
+  toastTimeouts.set(toastId, timeout)
+}
+
+export const reducer = (state: State, action: Action): State => {
+  switch (action.type) {
+    case "ADD_TOAST":
+      return {
+        ...state,
+        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
+      }
+
+    case "UPDATE_TOAST":
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === action.toast.id ? { ...t, ...action.toast } : t
+        ),
+      }
+
+    case "DISMISS_TOAST": {
+      const { toastId } = action
+
+      // ! Side effects ! - This could be extracted into a dismissToast() action,
+      // but I'll keep it here for simplicity
+      if (toastId) {
+        addToRemoveQueue(toastId)
+      } else {
+        state.toasts.forEach((toast) => {
+          addToRemoveQueue(toast.id)
+        })
+      }
+
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === toastId || toastId === undefined
+            ? {
+                ...t,
+                open: false,
+              }
+            : t
+        ),
+      }
+    }
+    case "REMOVE_TOAST":
+      if (action.toastId === undefined) {
+        return {
+          ...state,
+          toasts: [],
+        }
+      }
+      return {
+        ...state,
+        toasts: state.toasts.filter((t) => t.id !== action.toastId),
+      }
+  }
+}
+
+const listeners: Array<(state: State) => void> = []
+
+let memoryState: State = { toasts: [] }
+
+function dispatch(action: Action) {
+  memoryState = reducer(memoryState, action)
+  listeners.forEach((listener) => {
+    listener(memoryState)
+  })
+}
+
+type Toast = Omit<ToasterToast, "id">
+
+function toast({ ...props }: Toast) {
+  const id = genId()
+
+  const update = (props: ToasterToast) =>
+    dispatch({
+      type: "UPDATE_TOAST",
+      toast: { ...props, id },
+    })
+  const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id })
+
+  dispatch({
+    type: "ADD_TOAST",
+    toast: {
+      ...props,
+      id,
+      open: true,
+      onOpenChange: (open) => {
+        if (!open) dismiss()
+      },
+    },
+  })
+
+  return {
+    id: id,
+    dismiss,
+    update,
+  }
+}
+
+function useToast() {
+  const [state, setState] = React.useState<State>(memoryState)
+
+  React.useEffect(() => {
+    listeners.push(setState)
+    return () => {
+      const index = listeners.indexOf(setState)
+      if (index > -1) {
+        listeners.splice(index, 1)
+      }
+    }
+  }, [state])
+
+  return {
+    ...state,
+    toast,
+    dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
+  }
+}
+
+export { useToast, toast }

examples/twit/src/components/Auth.tsx

@@ -0,0 +1,48 @@
+import { useState } from "react";
+
+import { LocalAuthComponent } from "jazz-react-auth-local";
+
+import { Input, Button } from "../basicComponents";
+
+export const PrettyAuthUI: LocalAuthComponent = ({
+    loading,
+    logIn,
+    signUp,
+}) => {
+    const [username, setUsername] = useState<string>("");
+
+    return (
+        <div className="w-full h-full flex items-center justify-center p-5">
+            {loading ? (
+                <div>Loading...</div>
+            ) : (
+                <div className="w-72 flex flex-col gap-4">
+                    <form
+                        className="w-72 flex flex-col gap-2"
+                        onSubmit={(e) => {
+                            e.preventDefault();
+                            signUp(username);
+                        }}
+                    >
+                        <Input
+                            placeholder="Display name"
+                            value={username}
+                            onChange={(e) => setUsername(e.target.value)}
+                            autoComplete="webauthn"
+                            className="text-base"
+                        />
+                        <Button asChild>
+                            <Input
+                                type="submit"
+                                value="Sign Up as new account"
+                            />
+                        </Button>
+                    </form>
+                    <Button onClick={logIn}>
+                        Log In with existing account
+                    </Button>
+                </div>
+            )}
+        </div>
+    );
+};

examples/twit/src/index.css

@@ -0,0 +1,76 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+ 
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 20 14.3% 4.1%;
+
+    --card: 0 0% 100%;
+    --card-foreground: 20 14.3% 4.1%;
+ 
+    --popover: 0 0% 100%;
+    --popover-foreground: 20 14.3% 4.1%;
+ 
+    --primary: 24 9.8% 10%;
+    --primary-foreground: 60 9.1% 97.8%;
+ 
+    --secondary: 60 4.8% 95.9%;
+    --secondary-foreground: 24 9.8% 10%;
+ 
+    --muted: 60 4.8% 95.9%;
+    --muted-foreground: 25 5.3% 44.7%;
+ 
+    --accent: 60 4.8% 95.9%;
+    --accent-foreground: 24 9.8% 10%;
+ 
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 60 9.1% 97.8%;
+
+    --border: 20 5.9% 90%;
+    --input: 20 5.9% 90%;
+    --ring: 20 14.3% 4.1%;
+ 
+    --radius: 0.5rem;
+  }
+ 
+  .dark {
+    --background: 20 14.3% 4.1%;
+    --foreground: 60 9.1% 97.8%;
+ 
+    --card: 20 14.3% 4.1%;
+    --card-foreground: 60 9.1% 97.8%;
+ 
+    --popover: 20 14.3% 4.1%;
+    --popover-foreground: 60 9.1% 97.8%;
+ 
+    --primary: 60 9.1% 97.8%;
+    --primary-foreground: 24 9.8% 10%;
+ 
+    --secondary: 12 6.5% 15.1%;
+    --secondary-foreground: 60 9.1% 97.8%;
+ 
+    --muted: 12 6.5% 15.1%;
+    --muted-foreground: 24 5.4% 63.9%;
+ 
+    --accent: 12 6.5% 15.1%;
+    --accent-foreground: 60 9.1% 97.8%;
+ 
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 60 9.1% 97.8%;
+ 
+    --border: 12 6.5% 15.1%;
+    --input: 12 6.5% 15.1%;
+    --ring: 24 5.7% 82.9%;
+  }
+}
+ 
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

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

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

examples/twit/tailwind.config.js

@@ -0,0 +1,76 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  darkMode: ["class"],
+  content: [
+    './pages/**/*.{ts,tsx}',
+    './components/**/*.{ts,tsx}',
+    './app/**/*.{ts,tsx}',
+    './src/**/*.{ts,tsx}',
+	],
+  theme: {
+    container: {
+      center: true,
+      padding: "2rem",
+      screens: {
+        "2xl": "1400px",
+      },
+    },
+    extend: {
+      colors: {
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+      keyframes: {
+        "accordion-down": {
+          from: { height: 0 },
+          to: { height: "var(--radix-accordion-content-height)" },
+        },
+        "accordion-up": {
+          from: { height: "var(--radix-accordion-content-height)" },
+          to: { height: 0 },
+        },
+      },
+      animation: {
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out",
+      },
+    },
+  },
+  plugins: [require("tailwindcss-animate")],
+}

examples/twit/tsconfig.json

@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2023", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

examples/twit/tsconfig.node.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}

examples/twit/vite.config.ts

@@ -0,0 +1,16 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react-swc'
+import path from "path";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "./src"),
+    },
+  },
+  build: {
+    minify: false
+  }
+})

generateDocs.ts

@@ -10,9 +10,9 @@ async function main() {
     const packageDocs = Object.entries({
         "jazz-react": "index.tsx",
         cojson: "index.ts",
-        "jazz-react-media-images": "index.tsx",
         "jazz-browser": "index.ts",
         "jazz-browser-media-images": "index.ts",
+        "jazz-autosub": "index.ts",
     }).map(async ([packageName, entryPoint]) => {
         const app = await Application.bootstrapWithPlugins({
             entryPoints: [`packages/${packageName}/src/${entryPoint}`],

homepage/homepage-jazz/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

homepage/homepage-jazz/.gitignore

@@ -0,0 +1,35 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

homepage/homepage-jazz/README.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

homepage/homepage-jazz/app/globals.css

@@ -0,0 +1,27 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --foreground-rgb: 0, 0, 0;
+  --background-start-rgb: 214, 219, 220;
+  --background-end-rgb: 255, 255, 255;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --foreground-rgb: 255, 255, 255;
+    --background-start-rgb: 0, 0, 0;
+    --background-end-rgb: 0, 0, 0;
+  }
+}
+
+body {
+  color: rgb(var(--foreground-rgb));
+  background: linear-gradient(
+      to bottom,
+      transparent,
+      rgb(var(--background-end-rgb))
+    )
+    rgb(var(--background-start-rgb));
+}

homepage/homepage-jazz/app/layout.tsx

@@ -0,0 +1,22 @@
+import './globals.css'
+import type { Metadata } from 'next'
+import { Inter } from 'next/font/google'
+
+const inter = Inter({ subsets: ['latin'] })
+
+export const metadata: Metadata = {
+  title: 'Create Next App',
+  description: 'Generated by create next app',
+}
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en">
+      <body className={inter.className}>{children}</body>
+    </html>
+  )
+}

homepage/homepage-jazz/app/page.tsx

@@ -0,0 +1,113 @@
+import Image from 'next/image'
+
+export default function Home() {
+  return (
+    <main className="flex min-h-screen flex-col items-center justify-between p-24">
+      <div className="z-10 max-w-5xl w-full items-center justify-between font-mono text-sm lg:flex">
+        <p className="fixed left-0 top-0 flex w-full justify-center border-b border-gray-300 bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:static lg:w-auto  lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4 lg:dark:bg-zinc-800/30">
+          Get started by editing&nbsp;
+          <code className="font-mono font-bold">app/page.tsx</code>
+        </p>
+        <div className="fixed bottom-0 left-0 flex h-48 w-full items-end justify-center bg-gradient-to-t from-white via-white dark:from-black dark:via-black lg:static lg:h-auto lg:w-auto lg:bg-none">
+          <a
+            className="pointer-events-none flex place-items-center gap-2 p-8 lg:pointer-events-auto lg:p-0"
+            href="https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            By{' '}
+            <Image
+              src="/vercel.svg"
+              alt="Vercel Logo"
+              className="dark:invert"
+              width={100}
+              height={24}
+              priority
+            />
+          </a>
+        </div>
+      </div>
+
+      <div className="relative flex place-items-center before:absolute before:h-[300px] before:w-[480px] before:-translate-x-1/2 before:rounded-full before:bg-gradient-radial before:from-white before:to-transparent before:blur-2xl before:content-[''] after:absolute after:-z-20 after:h-[180px] after:w-[240px] after:translate-x-1/3 after:bg-gradient-conic after:from-sky-200 after:via-blue-200 after:blur-2xl after:content-[''] before:dark:bg-gradient-to-br before:dark:from-transparent before:dark:to-blue-700 before:dark:opacity-10 after:dark:from-sky-900 after:dark:via-[#0141ff] after:dark:opacity-40 before:lg:h-[360px] z-[-1]">
+        <Image
+          className="relative dark:drop-shadow-[0_0_0.3rem_#ffffff70] dark:invert"
+          src="/next.svg"
+          alt="Next.js Logo"
+          width={180}
+          height={37}
+          priority
+        />
+      </div>
+
+      <div className="mb-32 grid text-center lg:max-w-5xl lg:w-full lg:mb-0 lg:grid-cols-4 lg:text-left">
+        <a
+          href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
+          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <h2 className={`mb-3 text-2xl font-semibold`}>
+            Docs{' '}
+            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
+              -&gt;
+            </span>
+          </h2>
+          <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
+            Find in-depth information about Next.js features and API.
+          </p>
+        </a>
+
+        <a
+          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
+          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <h2 className={`mb-3 text-2xl font-semibold`}>
+            Learn{' '}
+            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
+              -&gt;
+            </span>
+          </h2>
+          <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
+            Learn about Next.js in an interactive course with&nbsp;quizzes!
+          </p>
+        </a>
+
+        <a
+          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
+          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <h2 className={`mb-3 text-2xl font-semibold`}>
+            Templates{' '}
+            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
+              -&gt;
+            </span>
+          </h2>
+          <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
+            Explore the Next.js 13 playground.
+          </p>
+        </a>
+
+        <a
+          href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
+          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <h2 className={`mb-3 text-2xl font-semibold`}>
+            Deploy{' '}
+            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
+              -&gt;
+            </span>
+          </h2>
+          <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
+            Instantly deploy your Next.js site to a shareable URL with Vercel.
+          </p>
+        </a>
+      </div>
+    </main>
+  )
+}

homepage/homepage-jazz/next.config.js

@@ -0,0 +1,4 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {}
+
+module.exports = nextConfig

homepage/homepage-jazz/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "homepage-jazz",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "react": "latest",
+    "react-dom": "latest",
+    "next": "latest"
+  },
+  "devDependencies": {
+    "typescript": "latest",
+    "@types/react": "latest",
+    "@types/node": "latest",
+    "@types/react-dom": "latest",
+    "autoprefixer": "latest",
+    "postcss": "latest",
+    "tailwindcss": "latest",
+    "eslint": "latest",
+    "eslint-config-next": "latest"
+  }
+}

homepage/homepage-jazz/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

homepage/homepage-jazz/public/next.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>