Publish

- jazz-example-chat@0.0.43
 - jazz-example-pets@0.0.19
 - jazz-example-todo@0.0.43
 - jazz-example-twit@0.0.6
 - hashroute@0.1.1
 - jazz-browser@0.4.6
 - jazz-browser-auth-local@0.4.6
 - jazz-browser-media-images@0.4.7
 - jazz-react@0.4.6
 - jazz-react-auth-local@0.4.6

.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/chat/.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/chat/.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/chat/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/chat/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/chat/index.html

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

examples/chat/job-template.nomad

@@ -0,0 +1,56 @@
+job "chat$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 = "chat$BRANCH_SUFFIX"
+        port = "http"
+        provider = "consul"
+      }
+
+      resources {
+        cpu    = 50 # MHz
+        memory = 50 # MB
+      }
+    }
+  }
+}
+# deploy bump 4

examples/chat/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "jazz-example-chat",
+  "private": true,
+  "version": "0.0.43",
+  "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-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.6",
+    "jazz-react-auth-local": "^0.4.6",
+    "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-use": "^17.4.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/chat/postcss.config.js

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

examples/chat/src/app.tsx

@@ -0,0 +1,35 @@
+import { WithJazz, useJazz, DemoAuth } from 'jazz-react';
+import ReactDOM from 'react-dom/client';
+import { HashRoute } from 'hashroute';
+import { ChatWindow } from './chatWindow.tsx';
+import { Chat } from './dataModel.ts';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <WithJazz auth={DemoAuth({ appName: 'Jazz Chat Example' })} apiKey="api_z9d034j3t34ht034ir">
+    <App />
+  </WithJazz>,
+);
+
+function App() {
+  return <div className='flex flex-col items-center justify-between w-screen h-screen p-2 dark:bg-black dark:text-white'>
+    <button onClick={useJazz().logOut} className='rounded mb-5 px-2 py-1 bg-stone-200 dark:bg-stone-800 dark:text-white self-end'>
+      Log Out
+    </button>
+    {HashRoute({
+      '/': <Home />,
+      '/chat/:id': (id) => <ChatWindow chatId={id as Chat['id']} />,
+    })}
+  </div>
+}
+
+function Home() {
+  const { me } = useJazz();
+  return <button className='rounded py-2 px-4 bg-stone-200 dark:bg-stone-800 dark:text-white my-auto'
+    onClick={() => {
+      const group = me.createGroup().addMember('everyone', 'writer');
+      const chat = group.createList<Chat>();
+      location.hash = '/chat/' + chat.id;
+    }}>
+    Create New Chat
+  </button>
+}

examples/chat/src/chatWindow.tsx

@@ -0,0 +1,43 @@
+import { useAutoSub } from 'jazz-react';
+import { Chat, Message } from './dataModel.ts';
+
+export function ChatWindow(props: { chatId: Chat['id'] }) {
+  const chat = useAutoSub(props.chatId);
+
+  return chat ? <div className='w-full max-w-xl h-full flex flex-col items-stretch'>
+    {
+      chat.map((msg, i) => (
+        <ChatBubble key={msg?.id}
+          text={msg?.text}
+          by={chat.meta.edits[i].by?.profile?.name}
+          byMe={chat.meta.edits[i].by?.isMe}
+          at={chat.meta.edits[i].at} />
+      ))
+    }
+    <ChatInput onSubmit={(text) => {
+      const msg = chat.meta.group.createMap<Message>({ text });
+      chat.append(msg.id);
+    }}/>
+  </div> : <div>Loading...</div>;
+}
+
+function ChatBubble(props: { text?: string, by?: string, at?: Date, byMe?: boolean }) {
+  return <div className={`${props.byMe ? 'items-end' : 'items-start'} flex flex-col`}>
+    <div className='rounded-xl bg-stone-100 dark:bg-stone-700 dark:text-white py-2 px-4 mt-2 min-w-[5rem]'>
+      { props.text }
+    </div>
+    <div className='text-xs text-neutral-500 ml-2'>
+      { props.by } { props.at?.getHours() }:{ props.at?.getMinutes() }
+    </div>
+  </div>;
+}
+
+function ChatInput(props: { onSubmit: (text: string) => void }) {
+  return <input className='rounded p-2 border mt-auto dark:bg-black dark:text-white dark:border-stone-700'
+    placeholder='Type a message and press Enter'
+    onKeyDown={({ key, currentTarget: input }) => {
+      if (key !== 'Enter' || !input.value) return;
+      props.onSubmit(input.value);
+      input.value = '';
+    }}/>
+}

examples/chat/src/dataModel.ts

@@ -0,0 +1,4 @@
+import { CoMap, CoList } from 'cojson';
+
+export type Chat = CoList<Message['id']>;
+export type Message = CoMap<{ text: string }>;

examples/chat/src/index.css

@@ -0,0 +1,78 @@
+@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;
+    margin: 0;
+    padding: 0;
+  }
+}

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

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

examples/chat/tailwind.config.js

@@ -0,0 +1,75 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  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/chat/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/chat/tsconfig.node.json

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

examples/chat/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.11",
+  "version": "0.0.19",
   "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.0",
-    "jazz-react-auth-local": "^0.3.0",
-    "jazz-react-media-images": "^0.3.0",
+    "jazz-browser-media-images": "^0.4.7",
+    "jazz-react": "^0.4.6",
+    "jazz-react-auth-local": "^0.4.6",
     "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.36",
+  "version": "0.0.43",
   "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.0",
-    "jazz-react-auth-local": "^0.3.0",
+    "jazz-react": "^0.4.6",
+    "jazz-react-auth-local": "^0.4.6",
     "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 `useSyncedData()` 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;
 
-    // `useSyncedData()` 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.6",
+  "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.7",
+    "jazz-react": "^0.4.6",
+    "jazz-react-auth-local": "^0.4.6",
+    "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
+  }
+})

genDocsMd.ts

@@ -0,0 +1,694 @@
+import { readFile, writeFile } from "fs/promises";
+import { Application, JSONOutput, ReflectionKind } from "typedoc";
+import { manuallyIgnore, indentEnd, indent } from "./generateDocs";
+
+export async function genDocsMd() {
+    const packageDocs = Object.entries({
+        "jazz-react": "index.tsx",
+        cojson: "index.ts",
+        "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}`],
+            tsconfig: `packages/${packageName}/tsconfig.json`,
+            sort: ["required-first"],
+            groupOrder: ["Functions", "Classes", "TypeAliases", "Namespaces"],
+            categorizeByGroup: false,
+        });
+
+        const project = await app.convert();
+
+        if (!project) {
+            throw new Error("Failed to convert project" + packageName);
+        }
+        // Alternatively generate JSON output
+        await app.generateJson(project, `docsTmp/${packageName}.json`);
+
+        const docs = JSON.parse(
+            await readFile(`docsTmp/${packageName}.json`, "utf8")
+        ) as JSONOutput.ProjectReflection;
+
+        return (
+            `# ${packageName}\n\n` +
+            docs
+                .groups!.map((group) => {
+                    return group.children
+                        ?.flatMap((childId) => {
+                            const child = docs.children!.find(
+                                (child) => child.id === childId
+                            )!;
+
+                            if (manuallyIgnore.has(child.name) ||
+                                child.comment?.blockTags?.some(
+                                    (tag) => tag.tag === "@deprecated" ||
+                                        tag.tag === "@internal" ||
+                                        tag.tag === "@ignore"
+                                ) ||
+                                child.signatures?.every((signature) => signature.comment?.blockTags?.some(
+                                    (tag) => tag.tag === "@deprecated" ||
+                                        tag.tag === "@internal" ||
+                                        tag.tag === "@ignore"
+                                )
+                                )) {
+                                return [];
+                            }
+
+                            return (
+                                `## \`${renderChildName(
+                                    child
+                                )}\`\n\n<sup>(${group.title
+                                    .toLowerCase()
+                                    .replace("bles", "ble")
+                                    .replace("ces", "ce")
+                                    .replace(/es$/, "")
+                                    .replace(
+                                        "ns",
+                                        "n"
+                                    )} in \`${packageName}\`)</sup>\n\n` +
+                                renderChildType(child) +
+                                (child.kind === ReflectionKind.Class ||
+                                    child.kind === ReflectionKind.Interface ||
+                                    child.kind === ReflectionKind.Namespace
+                                    ? renderSummary(child.comment) +
+                                    renderExamples(child.comment) +
+                                    (child.categories || child.groups)
+                                        ?.map((category) => renderChildCategory(
+                                            child,
+                                            category
+                                        )
+                                        )
+                                        .join("<br/>\n\n")
+                                    : child.kind === ReflectionKind.Function
+                                        ? renderSummary(
+                                            child.signatures?.[0].comment
+                                        ) +
+                                        renderParamComments(
+                                            child.signatures?.[0].parameters || []
+                                        ) +
+                                        renderExamples(
+                                            child.signatures?.[0].comment
+                                        ) +
+                                        "\n\n"
+                                        : "TODO: doc generator not implemented yet " +
+                                        child.kind)
+                            );
+                        })
+                        .join("\n\n----\n\n");
+                })
+                .join("\n\n----\n\n")
+        );
+
+        function renderSummary(comment?: JSONOutput.Comment): string {
+            if (comment) {
+                return (
+                    comment.summary
+                        .map((token) => token.kind === "text" || token.kind === "code"
+                            ? token.text
+                            : ""
+                        )
+                        .join("") +
+                    "\n\n" +
+                    "\n\n"
+                );
+            } else {
+                return "TODO: document\n\n";
+            }
+        }
+
+        function renderExamples(comment?: JSONOutput.Comment): string {
+            return (comment?.blockTags || [])
+                .map((blockTag) => blockTag.tag === "@example"
+                    ? "##### Example:\n\n" +
+                    blockTag.content
+                        .map((token) => token.kind === "text" || token.kind === "code"
+                            ? token.text
+                            : ""
+                        )
+                        .join("") +
+                    "\n\n"
+                    : ""
+                )
+                .join("");
+        }
+
+        function renderParamComments(params: JSONOutput.ParameterReflection[]) {
+            const paramDocs = params.flatMap((param) => {
+                if (param.type?.type === "reflection") {
+                    return param.type.declaration.children?.flatMap((child) => {
+                        if (child.name === "children" &&
+                            child.type?.type === "reference" &&
+                            child.type?.name === "ReactNode") {
+                            return [];
+                        }
+                        return (
+                            `| \`${param.name}.${child.name}${child.flags.isOptional || child.defaultValue
+                                ? "?"
+                                : ""}\` | ` +
+                            (child.comment
+                                ? child.comment.summary
+                                    .map((token) => token.kind === "text" ||
+                                        token.kind === "code"
+                                        ? token.text
+                                        : ""
+                                    )
+                                    .join("")
+                                : "TODO: document") +
+                            " |"
+                        );
+                    });
+                } else {
+                    const comment = param.comment;
+                    return [
+                        `| \`${param.name}${param.flags.isOptional || param.defaultValue
+                            ? "?"
+                            : ""}\` | ` +
+                        (comment
+                            ? comment.summary
+                                .map((token) => token.kind === "text" ||
+                                    token.kind === "code"
+                                    ? token.text
+                                    : ""
+                                )
+                                .join("")
+                            : "TODO: document ") +
+                        " |",
+                    ];
+                }
+            });
+
+            if (paramDocs.length) {
+                return `### Parameters:\n\n| name | description |\n| ----: | ---- |\n${paramDocs.join(
+                    "\n"
+                )}\n\n`;
+            }
+        }
+
+        function renderChildName(child: JSONOutput.DeclarationReflection) {
+            if (child.signatures) {
+                if (child.signatures[0].type?.type === "reference" &&
+                    child.signatures[0].type.qualifiedName ===
+                    "React.JSX.Element") {
+                    return `<${child.name}/>`;
+                } else {
+                    return (
+                        child.name +
+                        `(${(child.signatures[0].parameters || [])
+                            .map(renderParamSimple)
+                            .join(", ")})`
+                    );
+                }
+            } else {
+                return child.name;
+            }
+        }
+
+        function renderChildType(
+            child: JSONOutput.DeclarationReflection
+        ): string {
+            const isClass = child.kind === ReflectionKind.Class;
+            const isTypeAlias = child.kind === ReflectionKind.TypeAlias;
+            const isInterface = child.kind === ReflectionKind.Interface;
+            const isNamespace = child.kind === ReflectionKind.Namespace;
+            const isFunction = !!child.signatures;
+
+            const kind = isClass
+                ? "class"
+                : isTypeAlias
+                    ? "type"
+                    : isFunction
+                        ? "function"
+                        : isInterface
+                            ? "interface"
+                            : isNamespace
+                                ? "namespace"
+                                : "";
+
+            return (
+                "```typescript\n" +
+                `export ${kind} ${child.name}` +
+                (child.typeParameters || child.signatures?.[0].typeParameter
+                    ? "<" +
+                    (
+                        child.typeParameters ||
+                        child.signatures?.[0].typeParameter ||
+                        []
+                    )
+                        .map(renderTypeParam)
+                        .join(", ") +
+                    ">"
+                    : "") +
+                (child.extendedTypes
+                    ? " extends " +
+                    child.extendedTypes.map(renderType).join(", ")
+                    : "") +
+                (child.implementedTypes
+                    ? " implements " +
+                    child.implementedTypes.map(renderType).join(", ")
+                    : "") +
+                (isClass || isInterface || isNamespace
+                    ? " {...}"
+                    : isTypeAlias
+                        ? ` = ${renderType(child.type)}`
+                        : child.signatures
+                            ? `(${(child.signatures[0].parameters || [])
+                                .map(renderParam)
+                                .join(", ")}): ${renderType(
+                                    child.signatures[0].type
+                                )}`
+                            : "") +
+                "\n```\n"
+            );
+        }
+
+        function renderChildCategory(
+            child: JSONOutput.DeclarationReflection,
+            category: JSONOutput.ReflectionGroup
+        ): string {
+            return (
+                `### \`${child.name}\`: ${category.title.replace(
+                    /[^d]+\./,
+                    ""
+                )}\n\n` +
+                category.children
+                    ?.map((memberId) => {
+                        const member = child.children!.find(
+                            (member) => member.id === memberId
+                        )!;
+
+                        if (member.kind === 2048 || member.kind === 512) {
+                            if (member.signatures?.every(
+                                (sig) => sig.comment?.modifierTags?.includes(
+                                    "@internal"
+                                ) ||
+                                    sig.comment?.modifierTags?.includes(
+                                        "@deprecated"
+                                    )
+                            )) {
+                                return "";
+                            } else {
+                                return documentConstructorOrMethod(
+                                    member,
+                                    child
+                                );
+                            }
+                        } else if (member.kind === 1024 ||
+                            member.kind === 262144) {
+                            if (member.comment?.modifierTags?.includes(
+                                "@internal"
+                            ) ||
+                                member.comment?.modifierTags?.includes(
+                                    "@deprecated"
+                                )) {
+                                return "";
+                            } else {
+                                return documentProperty(member, child);
+                            }
+                        } else if (member.kind === 2097152) {
+                            if (member.comment?.modifierTags?.includes(
+                                "@internal"
+                            ) ||
+                                member.comment?.modifierTags?.includes(
+                                    "@deprecated"
+                                )) {
+                                return "";
+                            } else {
+                                return documentProperty(
+                                    { ...member, flags: { isStatic: true } },
+                                    child
+                                );
+                            }
+                        } else {
+                            return "Unknown member kind " + member.kind;
+                        }
+                    })
+                    .join("\n\n")
+            );
+        }
+
+        function renderType(t?: JSONOutput.SomeType): string {
+            if (!t) return "";
+            if (t.type === "reference") {
+                return (
+                    t.name +
+                    (t.typeArguments
+                        ? "<" + t.typeArguments.map(renderType).join(", ") + ">"
+                        : "")
+                );
+            } else if (t.type === "intrinsic") {
+                return t.name;
+            } else if (t.type === "literal") {
+                return JSON.stringify(t.value);
+            } else if (t.type === "union") {
+                const seen = new Set<string>();
+                return t.types
+                    .flatMap((t) => {
+                        const rendered = t.type === "intersection" || t.type === "union"
+                            ? `(${renderType(t)})`
+                            : renderType(t);
+
+                        if (seen.has(rendered)) {
+                            return [];
+                        } else {
+                            seen.add(rendered);
+                            return [rendered];
+                        }
+                    })
+                    .join(" | ");
+            } else if (t.type === "intersection") {
+                const seen = new Set<string>();
+                return t.types
+                    .flatMap((t) => {
+                        const rendered = t.type === "intersection" || t.type === "union"
+                            ? `(${renderType(t)})`
+                            : renderType(t);
+
+                        if (seen.has(rendered)) {
+                            return [];
+                        } else {
+                            seen.add(rendered);
+                            return [rendered];
+                        }
+                    })
+                    .join(" & ");
+            } else if (t.type === "indexedAccess") {
+                return (
+                    renderType(t.objectType) +
+                    "[" +
+                    renderType(t.indexType) +
+                    "]"
+                );
+            } else if (t.type === "reflection") {
+                if (t.declaration.indexSignature) {
+                    return (
+                        `{${t.declaration.children
+                            ? t.declaration.children
+                                .map(
+                                    (child) => `  ${child.name}${child.flags.isOptional
+                                            ? "?"
+                                            : ""}: ${indentEnd(
+                                                renderType(child.type)
+                                            )},`
+                                )
+                                .join("\n")
+                            : ""}\n  [` +
+                        t.declaration.indexSignature?.parameters?.[0].name +
+                        ": " +
+                        renderType(
+                            t.declaration.indexSignature?.parameters?.[0].type
+                        ) +
+                        "]: " +
+                        indentEnd(
+                            renderType(t.declaration.indexSignature?.type)
+                        ) +
+                        " }"
+                    );
+                } else if (t.declaration.children) {
+                    return `{\n${t.declaration.children
+                        .map((child) => child.signatures
+                            ? child.signatures
+                                .map(
+                                    (signature) => `  ${child.name}(${signature.parameters
+                                            ? "\n  " +
+                                            indent(
+                                                signature.parameters
+                                                    .map((p) => indentEnd(
+                                                        renderParam(
+                                                            p
+                                                        )
+                                                    )
+                                                    )
+                                                    .join(",\n  ")
+                                            ) +
+                                            "\n  )"
+                                            : "()"}: ${indentEnd(
+                                                renderType(signature.type)
+                                            )}`
+                                )
+                                .join("\n") + ",\n"
+                            : `  ${child.name}${child.flags.isOptional ? "?" : ""}: ${indentEnd(renderType(child.type))},\n`
+                        )
+                        .join("")}}`;
+                } else if (t.declaration.signatures) {
+                    return t.declaration.signatures
+                        .map(
+                            (signature) => `(${(signature.parameters || [])
+                                .map(renderParam)
+                                .join(", ")}) => ${renderType(
+                                    signature.type
+                                )}`
+                        )
+                        .join("\n");
+                } else {
+                    return "COMPLEX_TYPE_REFLECTION";
+                }
+            } else if (t.type === "array") {
+                return renderType(t.elementType) + "[]";
+            } else if (t.type === "tuple") {
+                return `[${t.elements?.map(renderType).join(", ")}]`;
+            } else if (t.type === "templateLiteral") {
+                const matchingNamedType = docs.children?.find(
+                    (child) => child.variant === "declaration" &&
+                        child.type?.type === "templateLiteral" &&
+                        child.type.head === t.head &&
+                        child.type.tail.every(
+                            (piece, i) => piece[1] === t.tail[i][1]
+                        )
+                );
+
+                if (matchingNamedType) {
+                    return matchingNamedType.name;
+                } else {
+                    if (t.head === "sealerSecret_z" &&
+                        t.tail[0][1] === "/signerSecret_z") {
+                        return "AgentSecret";
+                    } else if (t.head === "sealer_z" &&
+                        t.tail[0][1] === "/signer_z") {
+                        if (t.tail[1] && t.tail[1][1] === "_session_z") {
+                            return "SessionID";
+                        } else {
+                            return "AgentID";
+                        }
+                    } else {
+                        return (
+                            "`" +
+                            t.head +
+                            t.tail
+                                .map(
+                                    (bit) => "${" + renderType(bit[0]) + "}" + bit[1]
+                                )
+                                .join("") +
+                            "`"
+                        );
+                    }
+                }
+            } else if (t.type === "conditional") {
+                const trueRendered = renderType(t.trueType);
+                const falseRendered = renderType(t.falseType);
+
+                if (trueRendered.includes("\n") ||
+                    falseRendered.includes("\n")) {
+                    return (
+                        renderType(t.checkType) +
+                        " extends " +
+                        renderType(t.extendsType) +
+                        "\n  ? " +
+                        indentEnd(renderType(t.trueType)) +
+                        "\n  : " +
+                        indentEnd(renderType(t.falseType))
+                    );
+                } else {
+                    return (
+                        renderType(t.checkType) +
+                        " extends " +
+                        renderType(t.extendsType) +
+                        " ? " +
+                        renderType(t.trueType) +
+                        " : " +
+                        renderType(t.falseType)
+                    );
+                }
+            } else if (t.type === "inferred") {
+                return "infer " + t.name;
+            } else if (t.type === "typeOperator") {
+                return t.operator + " " + renderType(t.target);
+            } else if (t.type === "mapped") {
+                return `{\n  [${t.parameter} in ${renderType(
+                    t.parameterType
+                )}]: ${indentEnd(renderType(t.templateType))}\n}`;
+            } else {
+                return "COMPLEX_TYPE_" + t.type;
+            }
+        }
+
+        // function renderTemplateLiteral(tempLit: JSONOutput.TemplateLiteralType) {
+        //     return tempLit.head + tempLit.tail.map((piece) => piece[0] + piece[1]).join("");
+        // }
+        // function resolveTemplateLiteralPieceType(t: SomeType): string {
+        //     if (t.type === "string") {
+        //         return "${string}"
+        //     }
+        //     if (t.type === "reference") {
+        //         const referencedType = docs.children?.find(
+        //             (child) => child.name === t.name
+        //         );
+        //     }
+        // }
+        function renderTypeParam(
+            t?: JSONOutput.TypeParameterReflection
+        ): string {
+            if (!t) return "";
+            return t.name + (t.type ? " extends " + renderType(t.type) : "");
+        }
+
+        function renderParam(param: JSONOutput.ParameterReflection) {
+            return param.name === "__namedParameters"
+                ? renderType(param.type)
+                : `${param.name}: ${renderType(param.type)}`;
+        }
+
+        function renderParamSimple(param: JSONOutput.ParameterReflection) {
+            return param.name === "__namedParameters" &&
+                param.type?.type === "reflection"
+                ? `{${param.type?.declaration.children
+                    ?.map(
+                        (child) => child.name + (child.flags.isOptional ? "?" : "")
+                    )
+                    .join(", ")}}${param.flags.isOptional || param.defaultValue ? "?" : ""}`
+                : param.name +
+                (param.flags.isOptional || param.defaultValue ? "?" : "");
+        }
+
+        function documentConstructorOrMethod(
+            member: JSONOutput.DeclarationReflection,
+            child: JSONOutput.DeclarationReflection
+        ) {
+            const isInClass = child.kind === 128;
+            const isInTypeDef = child.kind === 2097152;
+            const isInInterface = child.kind === 256;
+            const isInNamespace = child.kind === 4;
+            const isInFunction = !!child.signatures;
+
+            const inKind = isInClass
+                ? "class"
+                : isInTypeDef
+                    ? "type"
+                    : isInFunction
+                        ? "function"
+                        : isInInterface
+                            ? "interface"
+                            : isInNamespace
+                                ? "namespace"
+                                : "";
+
+            const stem = member.name === "constructor"
+                ? "new " + child.name + "</code></b>"
+                : (member.flags.isStatic ? child.name : "") +
+                "." +
+                member.name +
+                "";
+
+            return member.signatures
+                ?.map((signature) => {
+                    return (
+                        `<details>\n<summary><b><code>${stem}(${(
+                            signature?.parameters?.map(renderParamSimple) || []
+                        ).join(", ")})</code></b> ${member.inheritedFrom
+                            ? "<sub><sup>from <code>" +
+                            member.inheritedFrom.name.split(".")[0] +
+                            "</code></sup></sub> "
+                            : ""} ${signature?.comment
+                            ? ""
+                            : "<sub><sup>(undocumented)</sup></sub>"}</summary>\n\n` +
+                        ("```typescript\n" +
+                            `${inKind} ${child.name}${child.typeParameters
+                                ? `<${child.typeParameters
+                                    .map((t) => t.name)
+                                    .join(", ")}>`
+                                : ""} {\n\n${indent(
+                                    `${member.name}${signature.typeParameter
+                                        ? `<${signature.typeParameter
+                                            .map(renderTypeParam)
+                                            .join(", ")}>`
+                                        : ""}(${(
+                                        signature.parameters?.map(
+                                            (param) => `\n  ${param.name}${param.flags.isOptional ||
+                                                    param.defaultValue
+                                                    ? "?"
+                                                    : ""}: ${indentEnd(
+                                                        renderType(param.type)
+                                                    )}${param.defaultValue
+                                                    ? ` = ${param.defaultValue}`
+                                                    : ""}`
+                                        ) || []
+                                    ).join(",") +
+                                    (signature.parameters?.length ? "\n" : "")}): ${renderType(signature.type)} {...}`
+                                )}\n\n}\n` +
+                            "```\n" +
+                            renderSummary(signature.comment)) +
+                        renderParamComments(signature.parameters || []) +
+                        renderExamples(signature.comment) +
+                        "</details>\n\n"
+                    );
+                })
+                .join("\n\n");
+        }
+
+        function documentProperty(
+            member: JSONOutput.DeclarationReflection,
+            child: JSONOutput.DeclarationReflection
+        ) {
+            const isInClass = child.kind === 128;
+            const isInTypeDef = child.kind === 2097152;
+            const isInInterface = child.kind === 256;
+            const isInNamespace = child.kind === 4;
+            const isInFunction = !!child.signatures;
+
+            const inKind = isInClass
+                ? "class"
+                : isInTypeDef
+                    ? "type"
+                    : isInFunction
+                        ? "function"
+                        : isInInterface
+                            ? "interface"
+                            : isInNamespace
+                                ? "namespace"
+                                : "";
+
+            const stem = member.flags.isStatic ? child.name : "";
+            return (
+                `<details>\n<summary><b><code>${stem}.${member.name}</code></b> ${member.inheritedFrom
+                    ? "<sub><sup>from <code>" +
+                    member.inheritedFrom.name.split(".")[0] +
+                    "</code></sup></sub> "
+                    : ""} ${member.comment ? "" : "<sub><sup>(undocumented)</sup></sub>"}</summary>\n\n` +
+                "```typescript\n" +
+                `${inKind} ${child.name}${child.typeParameters
+                    ? `<${child.typeParameters
+                        .map((t) => t.name)
+                        .join(", ")}>`
+                    : ""} {\n\n${indent(
+                        `${member.getSignature ? "get " : ""}${member.name}${member.getSignature ? "()" : ""}: ${renderType(member.type || member.getSignature?.type)}${member.getSignature ? " {...}" : ""}`
+                    )}` +
+                "\n\n}\n```\n" +
+                renderSummary(member.comment) +
+                renderExamples(member.comment) +
+                "</details>\n\n"
+            );
+        }
+    });
+
+    const docsContent = await readFile("./DOCS.md", "utf8");
+
+    await writeFile(
+        "./DOCS.md",
+        docsContent.slice(
+            0,
+            docsContent.indexOf("<!-- AUTOGENERATED DOCS AFTER THIS POINT -->")
+        ) +
+        "<!-- AUTOGENERATED DOCS AFTER THIS POINT -->\n" +
+        (await Promise.all(packageDocs)).join("\n\n\n")
+    );
+}

generateDocs.ts

@@ -1,783 +1,58 @@
 import { readFile, writeFile } from "fs/promises";
-import { Application, JSONOutput, ReflectionKind } from "typedoc";
+import { genDocsMd } from "./genDocsMd";
 
-const manuallyIgnore = new Set(["CojsonInternalTypes"]);
+export const manuallyIgnore = new Set(["CojsonInternalTypes"]);
 
 async function main() {
-    // Application.bootstrap also exists, which will not load plugins
-    // Also accepts an array of option readers if you want to disable
-    // TypeDoc's tsconfig.json/package.json/typedoc.json option readers
-    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",
-    }).map(async ([packageName, entryPoint]) => {
-        const app = await Application.bootstrapWithPlugins({
-            entryPoints: [`packages/${packageName}/src/${entryPoint}`],
-            tsconfig: `packages/${packageName}/tsconfig.json`,
-            sort: ["required-first"],
-            groupOrder: ["Functions", "Classes", "TypeAliases", "Namespaces"],
-            categorizeByGroup: false
-        });
+    const exampleFilesInDocs = {
+        "examples/chat/src/dataModel.ts": "homepage/homepage-jazz/pages/index.mdx",
+        "examples/chat/src/app.tsx": "homepage/homepage-jazz/pages/index.mdx",
+        "examples/chat/src/chatWindow.tsx": "homepage/homepage-jazz/pages/index.mdx",
+    };
 
-        const project = await app.convert();
-
-        if (!project) {
-            throw new Error("Failed to convert project" + packageName);
-        }
-        // Alternatively generate JSON output
-        await app.generateJson(project, `docsTmp/${packageName}.json`);
-
-        const docs = JSON.parse(
-            await readFile(`docsTmp/${packageName}.json`, "utf8")
-        ) as JSONOutput.ProjectReflection;
-
-        return (
-            `# ${packageName}\n\n` +
-            docs
-                .groups!.map((group) => {
-                    return group.children
-                        ?.flatMap((childId) => {
-                            const child = docs.children!.find(
-                                (child) => child.id === childId
-                            )!;
-
-                            if (
-                                manuallyIgnore.has(child.name) ||
-                                child.comment?.blockTags?.some(
-                                    (tag) =>
-                                        tag.tag === "@deprecated" ||
-                                        tag.tag === "@internal" ||
-                                        tag.tag === "@ignore"
-                                ) ||
-                                child.signatures?.every((signature) =>
-                                    signature.comment?.blockTags?.some(
-                                        (tag) =>
-                                            tag.tag === "@deprecated" ||
-                                            tag.tag === "@internal" ||
-                                            tag.tag === "@ignore"
-                                    )
-                                )
-                            ) {
-                                return [];
-                            }
-
-                            return (
-                                `## \`${renderChildName(
-                                    child
-                                )}\`\n\n<sup>(${group.title
-                                    .toLowerCase()
-                                    .replace("bles", "ble")
-                                    .replace("ces", "ce")
-                                    .replace(/es$/, "")
-                                    .replace(
-                                        "ns",
-                                        "n"
-                                    )} in \`${packageName}\`)</sup>\n\n` +
-                                renderChildType(child) +
-                                (child.kind === ReflectionKind.Class ||
-                                child.kind === ReflectionKind.Interface ||
-                                child.kind === ReflectionKind.Namespace
-                                    ? renderSummary(child.comment) +
-                                      renderExamples(child.comment) +
-                                      (child.categories || child.groups)
-                                          ?.map((category) =>
-                                              renderChildCategory(child, category)
-                                          )
-                                          .join("<br/>\n\n")
-                                    : child.kind === ReflectionKind.Function
-                                    ? renderSummary(
-                                          child.signatures?.[0].comment
-                                      ) +
-                                      renderParamComments(
-                                          child.signatures?.[0].parameters || []
-                                      ) +
-                                      renderExamples(
-                                          child.signatures?.[0].comment
-                                      ) +
-                                      "\n\n"
-                                    : "TODO: doc generator not implemented yet " +
-                                      child.kind)
-                            );
-                        })
-                        .join("\n\n----\n\n");
-                })
-                .join("\n\n----\n\n")
+    for (const [src, dest] of Object.entries(exampleFilesInDocs)) {
+        const srcStr = await readFile(src, "utf8");
+        const destStr = await readFile(dest, "utf8");
+        const srcFilename = src.split("/").pop()!;
+        const regexp = new RegExp(
+            '```(\\w+?) filename="' + srcFilename + '"(.+?)\n(.+?)```',
+            "s"
         );
-
-        function renderSummary(comment?: JSONOutput.Comment): string {
-            if (comment) {
+        console.log(regexp);
+        await writeFile(
+            dest,
+            destStr.replace(regexp, (match, filetype, attrs, _oldCode) => {
+                console.log(
+                    { filetype },
+                    { attrs },
+                    { oldCode: _oldCode.slice(0, 30) }
+                );
                 return (
-                    comment.summary
-                        .map((token) =>
-                            token.kind === "text" || token.kind === "code"
-                                ? token.text
-                                : ""
-                        )
-                        .join("") +
-                    "\n\n" +
-                    "\n\n"
+                    "```" +
+                    filetype +
+                    ' filename="' +
+                    srcFilename +
+                    '"' +
+                    attrs +
+                    "\n" +
+                    srcStr +
+                    "```"
                 );
-            } else {
-                return "TODO: document\n\n";
-            }
-        }
+            })
+        );
+    }
 
-        function renderExamples(comment?: JSONOutput.Comment): string {
-            return (comment?.blockTags || [])
-                .map((blockTag) =>
-                    blockTag.tag === "@example"
-                        ? "##### Example:\n\n" +
-                          blockTag.content
-                              .map((token) =>
-                                  token.kind === "text" || token.kind === "code"
-                                      ? token.text
-                                      : ""
-                              )
-                              .join("") +
-                          "\n\n"
-                        : ""
-                )
-                .join("");
-        }
-
-        function renderParamComments(params: JSONOutput.ParameterReflection[]) {
-            const paramDocs = params.flatMap((param) => {
-                if (param.type?.type === "reflection") {
-                    return param.type.declaration.children?.flatMap((child) => {
-                        if (
-                            child.name === "children" &&
-                            child.type?.type === "reference" &&
-                            child.type?.name === "ReactNode"
-                        ) {
-                            return [];
-                        }
-                        return (
-                            `| \`${param.name}.${child.name}${
-                                child.flags.isOptional || child.defaultValue
-                                    ? "?"
-                                    : ""
-                            }\` | ` +
-                            (child.comment
-                                ? child.comment.summary
-                                      .map((token) =>
-                                          token.kind === "text" ||
-                                          token.kind === "code"
-                                              ? token.text
-                                              : ""
-                                      )
-                                      .join("")
-                                : "TODO: document") +
-                            " |"
-                        );
-                    });
-                } else {
-                    const comment = param.comment;
-                    return [
-                        `| \`${param.name}${
-                            param.flags.isOptional || param.defaultValue
-                                ? "?"
-                                : ""
-                        }\` | ` +
-                            (comment
-                                ? comment.summary
-                                      .map((token) =>
-                                          token.kind === "text" ||
-                                          token.kind === "code"
-                                              ? token.text
-                                              : ""
-                                      )
-                                      .join("")
-                                : "TODO: document ") +
-                            " |",
-                    ];
-                }
-            });
-
-            if (paramDocs.length) {
-                return `### Parameters:\n\n| name | description |\n| ----: | ---- |\n${paramDocs.join(
-                    "\n"
-                )}\n\n`;
-            }
-        }
-
-        function renderChildName(child: JSONOutput.DeclarationReflection) {
-            if (child.signatures) {
-                if (
-                    child.signatures[0].type?.type === "reference" &&
-                    child.signatures[0].type.qualifiedName ===
-                        "React.JSX.Element"
-                ) {
-                    return `<${child.name}/>`;
-                } else {
-                    return (
-                        child.name +
-                        `(${(child.signatures[0].parameters || [])
-                            .map(renderParamSimple)
-                            .join(", ")})`
-                    );
-                }
-            } else {
-                return child.name;
-            }
-        }
-
-        function renderChildType(
-            child: JSONOutput.DeclarationReflection
-        ): string {
-            const isClass = child.kind === ReflectionKind.Class;
-            const isTypeAlias = child.kind === ReflectionKind.TypeAlias;
-            const isInterface = child.kind === ReflectionKind.Interface;
-            const isNamespace = child.kind === ReflectionKind.Namespace;
-            const isFunction = !!child.signatures;
-
-            const kind = isClass
-                ? "class"
-                : isTypeAlias
-                ? "type"
-                : isFunction
-                ? "function"
-                : isInterface
-                ? "interface"
-                : isNamespace
-                ? "namespace"
-                : "";
-
-            return (
-                "```typescript\n" +
-                `export ${kind} ${child.name}` +
-                ((child.typeParameters || child.signatures?.[0].typeParameter)
-                    ? "<" +
-                      (child.typeParameters || child.signatures?.[0].typeParameter || []).map(renderTypeParam).join(", ") +
-                      ">"
-                    : "") +
-                (child.extendedTypes
-                    ? " extends " +
-                      child.extendedTypes.map(renderType).join(", ")
-                    : "") +
-                (child.implementedTypes
-                    ? " implements " +
-                      child.implementedTypes.map(renderType).join(", ")
-                    : "") +
-                (isClass || isInterface || isNamespace
-                    ? " {...}"
-                    : isTypeAlias
-                    ? ` = ${renderType(child.type)}`
-                    : child.signatures
-                    ? `(${(child.signatures[0].parameters || [])
-                          .map(renderParam)
-                          .join(", ")}): ${renderType(
-                          child.signatures[0].type
-                      )}`
-                    : "") +
-                "\n```\n"
-            );
-        }
-
-        function renderChildCategory(
-            child: JSONOutput.DeclarationReflection,
-            category: JSONOutput.ReflectionGroup
-        ): string {
-            return (
-                `### \`${child.name}\`: ${category.title.replace(/[^d]+\./, "")}\n\n` +
-                category.children
-                    ?.map((memberId) => {
-                        const member = child.children!.find(
-                            (member) => member.id === memberId
-                        )!;
-
-                        if (member.kind === 2048 || member.kind === 512) {
-                            if (
-                                member.signatures?.every(
-                                    (sig) =>
-                                        sig.comment?.modifierTags?.includes(
-                                            "@internal"
-                                        ) ||
-                                        sig.comment?.modifierTags?.includes(
-                                            "@deprecated"
-                                        )
-                                )
-                            ) {
-                                return "";
-                            } else {
-                                return documentConstructorOrMethod(
-                                    member,
-                                    child
-                                );
-                            }
-                        } else if (
-                            member.kind === 1024 ||
-                            member.kind === 262144
-                        ) {
-                            if (
-                                member.comment?.modifierTags?.includes(
-                                    "@internal"
-                                ) ||
-                                member.comment?.modifierTags?.includes(
-                                    "@deprecated"
-                                )
-                            ) {
-                                return "";
-                            } else {
-                                return documentProperty(member, child);
-                            }
-                        } else if (member.kind === 2097152) {
-                            if (
-                                member.comment?.modifierTags?.includes(
-                                    "@internal"
-                                ) ||
-                                member.comment?.modifierTags?.includes(
-                                    "@deprecated"
-                                )
-                            ) {
-                                return "";
-                            } else {
-                                return documentProperty(
-                                    { ...member, flags: { isStatic: true } },
-                                    child
-                                );
-                            }
-                        } else {
-                            return "Unknown member kind " + member.kind;
-                        }
-                    })
-                    .join("\n\n")
-            );
-        }
-
-        function renderType(t?: JSONOutput.SomeType): string {
-            if (!t) return "";
-            if (t.type === "reference") {
-                return (
-                    t.name +
-                    (t.typeArguments
-                        ? "<" + t.typeArguments.map(renderType).join(", ") + ">"
-                        : "")
-                );
-            } else if (t.type === "intrinsic") {
-                return t.name;
-            } else if (t.type === "literal") {
-                return JSON.stringify(t.value);
-            } else if (t.type === "union") {
-                const seen = new Set<string>();
-                return t.types
-                    .flatMap((t) => {
-                        const rendered =
-                            t.type === "intersection" || t.type === "union"
-                                ? `(${renderType(t)})`
-                                : renderType(t);
-
-                        if (seen.has(rendered)) {
-                            return [];
-                        } else {
-                            seen.add(rendered);
-                            return [rendered];
-                        }
-                    })
-                    .join(" | ");
-            } else if (t.type === "intersection") {
-                const seen = new Set<string>();
-                return t.types
-                    .flatMap((t) => {
-                        const rendered =
-                            t.type === "intersection" || t.type === "union"
-                                ? `(${renderType(t)})`
-                                : renderType(t);
-
-                        if (seen.has(rendered)) {
-                            return [];
-                        } else {
-                            seen.add(rendered);
-                            return [rendered];
-                        }
-                    })
-                    .join(" & ");
-            } else if (t.type === "indexedAccess") {
-                return (
-                    renderType(t.objectType) +
-                    "[" +
-                    renderType(t.indexType) +
-                    "]"
-                );
-            } else if (t.type === "reflection") {
-                if (t.declaration.indexSignature) {
-                    return (
-                        `{${
-                            t.declaration.children
-                                ? t.declaration.children
-                                      .map(
-                                          (child) =>
-                                              `  ${child.name}${
-                                                  child.flags.isOptional
-                                                      ? "?"
-                                                      : ""
-                                              }: ${indentEnd(
-                                                  renderType(child.type)
-                                              )},`
-                                      )
-                                      .join("\n")
-                                : ""
-                        }\n  [` +
-                        t.declaration.indexSignature?.parameters?.[0].name +
-                        ": " +
-                        renderType(
-                            t.declaration.indexSignature?.parameters?.[0].type
-                        ) +
-                        "]: " +
-                        indentEnd(
-                            renderType(t.declaration.indexSignature?.type)
-                        ) +
-                        " }"
-                    );
-                } else if (t.declaration.children) {
-                    return `{\n${t.declaration.children
-                        .map((child) =>
-                            child.signatures
-                                ? child.signatures
-                                      .map(
-                                          (signature) =>
-                                              `  ${child.name}(${
-                                                  signature.parameters
-                                                      ? "\n  " +
-                                                        indent(
-                                                            signature.parameters
-                                                                .map((p) =>
-                                                                    indentEnd(
-                                                                        renderParam(
-                                                                            p
-                                                                        )
-                                                                    )
-                                                                )
-                                                                .join(",\n  ")
-                                                        ) +
-                                                        "\n  )"
-                                                      : "()"
-                                              }: ${indentEnd(
-                                                  renderType(signature.type)
-                                              )}`
-                                      )
-                                      .join("\n") + ",\n"
-                                : `  ${child.name}${
-                                      child.flags.isOptional ? "?" : ""
-                                  }: ${indentEnd(renderType(child.type))},\n`
-                        )
-                        .join("")}}`;
-                } else if (t.declaration.signatures) {
-                    return t.declaration.signatures
-                        .map(
-                            (signature) =>
-                                `(${(signature.parameters || [])
-                                    .map(renderParam)
-                                    .join(", ")}) => ${renderType(
-                                    signature.type
-                                )}`
-                        )
-                        .join("\n");
-                } else {
-                    return "COMPLEX_TYPE_REFLECTION";
-                }
-            } else if (t.type === "array") {
-                return renderType(t.elementType) + "[]";
-            } else if (t.type === "tuple") {
-                return `[${t.elements?.map(renderType).join(", ")}]`;
-            } else if (t.type === "templateLiteral") {
-                const matchingNamedType = docs.children?.find(
-                    (child) =>
-                        child.variant === "declaration" &&
-                        child.type?.type === "templateLiteral" &&
-                        child.type.head === t.head &&
-                        child.type.tail.every(
-                            (piece, i) => piece[1] === t.tail[i][1]
-                        )
-                );
-
-                if (matchingNamedType) {
-                    return matchingNamedType.name;
-                } else {
-                    if (
-                        t.head === "sealerSecret_z" &&
-                        t.tail[0][1] === "/signerSecret_z"
-                    ) {
-                        return "AgentSecret";
-                    } else if (
-                        t.head === "sealer_z" &&
-                        t.tail[0][1] === "/signer_z"
-                    ) {
-                        if (t.tail[1] && t.tail[1][1] === "_session_z") {
-                            return "SessionID";
-                        } else {
-                            return "AgentID";
-                        }
-                    } else {
-                        return (
-                            "`" +
-                            t.head +
-                            t.tail
-                                .map(
-                                    (bit) =>
-                                        "${" + renderType(bit[0]) + "}" + bit[1]
-                                )
-                                .join("") +
-                            "`"
-                        );
-                    }
-                }
-            } else if (t.type === "conditional") {
-                const trueRendered = renderType(t.trueType);
-                const falseRendered = renderType(t.falseType);
-
-                if (
-                    trueRendered.includes("\n") ||
-                    falseRendered.includes("\n")
-                ) {
-                    return (
-                        renderType(t.checkType) +
-                        " extends " +
-                        renderType(t.extendsType) +
-                        "\n  ? " +
-                        indentEnd(renderType(t.trueType)) +
-                        "\n  : " +
-                        indentEnd(renderType(t.falseType))
-                    );
-                } else {
-                    return (
-                        renderType(t.checkType) +
-                        " extends " +
-                        renderType(t.extendsType) +
-                        " ? " +
-                        renderType(t.trueType) +
-                        " : " +
-                        renderType(t.falseType)
-                    );
-                }
-            } else if (t.type === "inferred") {
-                return "infer " + t.name;
-            } else if (t.type === "typeOperator") {
-                return t.operator + " " + renderType(t.target);
-            } else if (t.type === "mapped") {
-                return `{\n  [${t.parameter} in ${renderType(
-                    t.parameterType
-                )}]: ${indentEnd(renderType(t.templateType))}\n}`;
-            } else {
-                return "COMPLEX_TYPE_" + t.type;
-            }
-        }
-
-        // function renderTemplateLiteral(tempLit: JSONOutput.TemplateLiteralType) {
-        //     return tempLit.head + tempLit.tail.map((piece) => piece[0] + piece[1]).join("");
-        // }
-
-        // function resolveTemplateLiteralPieceType(t: SomeType): string {
-        //     if (t.type === "string") {
-        //         return "${string}"
-        //     }
-        //     if (t.type === "reference") {
-        //         const referencedType = docs.children?.find(
-        //             (child) => child.name === t.name
-        //         );
-
-        //     }
-        // }
-
-        function renderTypeParam(
-            t?: JSONOutput.TypeParameterReflection
-        ): string {
-            if (!t) return "";
-            return t.name + (t.type ? " extends " + renderType(t.type) : "");
-        }
-
-        function renderParam(param: JSONOutput.ParameterReflection) {
-            return param.name === "__namedParameters"
-                ? renderType(param.type)
-                : `${param.name}: ${renderType(param.type)}`;
-        }
-
-        function renderParamSimple(param: JSONOutput.ParameterReflection) {
-            return param.name === "__namedParameters" &&
-                param.type?.type === "reflection"
-                ? `{${param.type?.declaration.children
-                      ?.map(
-                          (child) =>
-                              child.name + (child.flags.isOptional ? "?" : "")
-                      )
-                      .join(", ")}}${
-                      param.flags.isOptional || param.defaultValue ? "?" : ""
-                  }`
-                : param.name +
-                      (param.flags.isOptional || param.defaultValue ? "?" : "");
-        }
-
-        function documentConstructorOrMethod(
-            member: JSONOutput.DeclarationReflection,
-            child: JSONOutput.DeclarationReflection
-        ) {
-            const isInClass = child.kind === 128;
-            const isInTypeDef = child.kind === 2097152;
-            const isInInterface = child.kind === 256;
-            const isInNamespace = child.kind === 4;
-            const isInFunction = !!child.signatures;
-
-            const inKind = isInClass
-                ? "class"
-                : isInTypeDef
-                ? "type"
-                : isInFunction
-                ? "function"
-                : isInInterface
-                ? "interface"
-                : isInNamespace
-                ? "namespace"
-                : "";
-
-            const stem =
-                member.name === "constructor"
-                    ? "new " + child.name + "</code></b>"
-                    : (member.flags.isStatic ? child.name : "") +
-                      "." +
-                      member.name +
-                      "";
-
-            return member.signatures
-                ?.map((signature) => {
-                    return (
-                        `<details>\n<summary><b><code>${stem}(${(
-                            signature?.parameters?.map(renderParamSimple) || []
-                        ).join(", ")})</code></b> ${
-                            member.inheritedFrom
-                                ? "<sub><sup>from <code>" +
-                                  member.inheritedFrom.name.split(".")[0] +
-                                  "</code></sup></sub> "
-                                : ""
-                        } ${
-                            signature?.comment
-                                ? ""
-                                : "<sub><sup>(undocumented)</sup></sub>"
-                        }</summary>\n\n` +
-                        ("```typescript\n" +
-                            `${inKind} ${child.name}${
-                                child.typeParameters
-                                    ? `<${child.typeParameters
-                                          .map((t) => t.name)
-                                          .join(", ")}>`
-                                    : ""
-                            } {\n\n${indent(
-                                `${member.name}${
-                                    signature.typeParameter
-                                        ? `<${signature.typeParameter
-                                              .map(renderTypeParam)
-                                              .join(", ")}>`
-                                        : ""
-                                }(${
-                                    (
-                                        signature.parameters?.map(
-                                            (param) =>
-                                                `\n  ${param.name}${
-                                                    param.flags.isOptional ||
-                                                    param.defaultValue
-                                                        ? "?"
-                                                        : ""
-                                                }: ${indentEnd(
-                                                    renderType(param.type)
-                                                )}${
-                                                    param.defaultValue
-                                                        ? ` = ${param.defaultValue}`
-                                                        : ""
-                                                }`
-                                        ) || []
-                                    ).join(",") +
-                                    (signature.parameters?.length ? "\n" : "")
-                                }): ${renderType(signature.type)} {...}`
-                            )}\n\n}\n` +
-                            "```\n" +
-                            renderSummary(signature.comment)) +
-                        renderParamComments(signature.parameters || []) +
-                        renderExamples(signature.comment) +
-                        "</details>\n\n"
-                    );
-                })
-                .join("\n\n");
-        }
-
-        function documentProperty(
-            member: JSONOutput.DeclarationReflection,
-            child: JSONOutput.DeclarationReflection
-        ) {
-            const isInClass = child.kind === 128;
-            const isInTypeDef = child.kind === 2097152;
-            const isInInterface = child.kind === 256;
-            const isInNamespace = child.kind === 4;
-            const isInFunction = !!child.signatures;
-
-            const inKind = isInClass
-                ? "class"
-                : isInTypeDef
-                ? "type"
-                : isInFunction
-                ? "function"
-                : isInInterface
-                ? "interface"
-                : isInNamespace
-                ? "namespace"
-                : "";
-
-            const stem = member.flags.isStatic ? child.name : "";
-            return (
-                `<details>\n<summary><b><code>${stem}.${
-                    member.name
-                }</code></b> ${
-                    member.inheritedFrom
-                        ? "<sub><sup>from <code>" +
-                          member.inheritedFrom.name.split(".")[0] +
-                          "</code></sup></sub> "
-                        : ""
-                } ${
-                    member.comment ? "" : "<sub><sup>(undocumented)</sup></sub>"
-                }</summary>\n\n` +
-                "```typescript\n" +
-                `${inKind} ${child.name}${
-                    child.typeParameters
-                        ? `<${child.typeParameters
-                              .map((t) => t.name)
-                              .join(", ")}>`
-                        : ""
-                } {\n\n${indent(
-                    `${member.getSignature ? "get " : ""}${member.name}${
-                        member.getSignature ? "()" : ""
-                    }: ${renderType(member.type || member.getSignature?.type)}${
-                        member.getSignature ? " {...}" : ""
-                    }`
-                )}` +
-                "\n\n}\n```\n" +
-                renderSummary(member.comment) +
-                renderExamples(member.comment) +
-                "</details>\n\n"
-            );
-        }
-    });
-
-    const docsContent = await readFile("./DOCS.md", "utf8");
-
-    await writeFile(
-        "./DOCS.md",
-        docsContent.slice(
-            0,
-            docsContent.indexOf("<!-- AUTOGENERATED DOCS AFTER THIS POINT -->")
-        ) +
-            "<!-- AUTOGENERATED DOCS AFTER THIS POINT -->\n" +
-            (await Promise.all(packageDocs)).join("\n\n\n")
-    );
+    await genDocsMd();
 }
 
-function indent(text: string): string {
+export function indent(text: string): string {
     return text
         .split("\n")
         .map((line) => "  " + line)
         .join("\n");
 }
 
-function indentEnd(text: string): string {
+export function indentEnd(text: string): string {
     return text
         .split("\n")
         .map((line, i) => (i === 0 ? line : "  " + line))

homepage/homepage-jazz-old/.eslintrc.json

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

homepage/homepage-jazz-old/.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-old/.prettierrc

@@ -0,0 +1,3 @@
+{
+  "tabWidth": 2
+}

homepage/homepage-jazz-old/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-old/components/ResponsiveIframe.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+import { useLayoutEffect, useState, useRef, IframeHTMLAttributes } from "react";
+
+export function ResponsiveIframe(
+  props: IframeHTMLAttributes<HTMLIFrameElement>
+) {
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
+  const [url, setUrl] = useState<string | undefined>(props.src);
+
+  useLayoutEffect(() => {
+    const listener = (e: MessageEvent) => {
+      console.log(e);
+      if (e.data.type === "navigate" && props.src?.startsWith(e.origin)) {
+        setUrl(e.data.url);
+      }
+    };
+    window.addEventListener("message", listener);
+    return () => {
+      window.removeEventListener("message", listener);
+    };
+  }, [props.src]);
+
+  useLayoutEffect(() => {
+    if (!containerRef.current) return;
+    const observer = new ResizeObserver(() => {
+      if (!containerRef.current) return;
+      setDimensions({
+        width: containerRef.current.offsetWidth,
+        height: containerRef.current.offsetHeight,
+      });
+    });
+    observer.observe(containerRef.current);
+    return () => {
+      observer.disconnect();
+    };
+  }, [containerRef]);
+
+  return (
+    <div className={"w-full h-full flex flex-col " + props.className} >
+      <input className="text-xs p-2" value={url} readOnly/>
+      <div className="flex-grow" ref={containerRef}>
+        <iframe {...props} className="" {...dimensions} allowFullScreen/>
+      </div>
+    </div>
+  );
+}

homepage/homepage-jazz-old/components/index.tsx

@@ -0,0 +1,51 @@
+export function Slogan(props: { children: React.ReactNode, small?: boolean }) {
+  return (
+    <div className={"leading-snug mb-5 max-w-3xl text-neutral-700 dark:text-neutral-200 " + (props.small ? "text-lg mt-2" : "text-2xl mt-5")}>
+      {props.children}
+    </div>
+  );
+}
+
+export function Grid(props: { children: React.ReactNode }) {
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2 mt-10 items-stretch">
+      {props.children}
+    </div>
+  );
+}
+
+export function GridItem(props: {
+  children: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <div
+      className={
+        (props.className || "") +
+        " [&>.nextra-code-block]:h-full [&>.nextra-code-block>pre]:h-full [&>.nextra-code-block>pre]:mb-0"
+      }
+    >
+      {props.children}
+    </div>
+  );
+}
+
+export function GridCard(props: {
+  children: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <div
+      className={
+        "border border-stone-200 dark:border-stone-500 rounded-xl p-4 [&>h4]:mt-0 [&>h3]:mt-0 " +
+        props.className
+      }
+    >
+      {props.children}
+    </div>
+  );
+}
+
+export function GoogleLogo() {
+  return <svg className="w-3 h-3 inline align-baseline" viewBox="0 0 950 950" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M915.2 448l-4.2-17.8H524V594h231.2c-24 114-135.4 174-226.4 174-66.2 0-136-27.8-182.2-72.6-47.4-46-77.6-113.8-77.6-183.6 0-69 31-138 76.2-183.4 45-45.2 113.2-70.8 181-70.8 77.6 0 133.2 41.2 154 60l116.4-115.8c-34.2-30-128-105.6-274.2-105.6-112.8 0-221 43.2-300 122C144.4 295.8 104 408 104 512s38.2 210.8 113.8 289c80.8 83.4 195.2 127 313 127 107.2 0 208.8-42 281.2-118.2 71.2-75 108-178.8 108-287.6 0-45.8-4.6-73-4.8-74.2z" fill="currentColor" /></svg>
+}

homepage/homepage-jazz-old/next.config.js

@@ -0,0 +1,9 @@
+const withNextra = require('nextra')({
+    theme: 'nextra-theme-docs',
+    themeConfig: './theme.config.jsx',
+    mdxOptions: {
+
+    }
+})
+
+module.exports = withNextra()

homepage/homepage-jazz-old/package.json

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

homepage/homepage-jazz-old/pages/_app.js

@@ -0,0 +1,15 @@
+import './globals.css'
+
+import { Manrope } from 'next/font/google'
+import { Inter } from 'next/font/google'
+import localFont from 'next/font/local'
+
+// If loading a variable font, you don't need to specify the font weight
+const manrope = Manrope({ subsets: ['latin'], variable: '--font-manrope', })
+const inter = Inter({ subsets: ['latin'], variable: '--font-inter',  })
+const pragmata = localFont({src: "../fonts/PragmataProR_0829.woff2", subsets: ['latin'], variable: '--font-pragmata'})
+
+// This default export is required in a new `pages/_app.js` file.
+export default function MyApp({ Component, pageProps }) {
+  return <div className={manrope.variable + " " + pragmata.variable + " " + inter.className + " font-[450]"}><Component {...pageProps} /></div>
+}

homepage/homepage-jazz-old/pages/_meta.json

@@ -0,0 +1,41 @@
+{
+    "index": {
+        "title": "Introduction",
+        "theme": {
+            "typesetting": "article",
+            "layout": "full"
+        },
+        "type": "page"
+    },
+    "examples": {
+        "title": "Example Gallery",
+        "theme": {
+            "typesetting": "article",
+            "layout": "full"
+        },
+        "type": "page"
+    },
+    "mesh": {
+        "title": "Global Mesh & Pricing",
+        "theme": {
+            "typesetting": "article",
+            "layout": "full"
+        },
+        "type": "page"
+    },
+    "guides": {
+        "title": "Guides",
+        "type": "page",
+        "theme": {
+            "breadcrumb": true,
+            "footer": true,
+            "sidebar": true,
+            "toc": true,
+            "pagination": true
+        }
+    },
+    "docs": {
+        "title": "API Docs",
+        "type": "page"
+    }
+}

homepage/homepage-jazz-old/pages/docs.mdx

@@ -0,0 +1 @@
+# API docs

homepage/homepage-jazz-old/pages/docs/test.mdx

@@ -0,0 +1 @@
+# Something

homepage/homepage-jazz-old/pages/docs/test2.mdx

@@ -0,0 +1 @@
+# Something else

homepage/homepage-jazz-old/pages/globals.css

@@ -0,0 +1,162 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body article.nextra-content h1 {
+    font-family: var(--font-manrope);
+}
+
+body article.nx-w-full h1 {
+    font-family: var(--font-manrope);
+    text-align: left;
+    @apply tracking-tight;
+    @apply text-6xl;
+    @apply font-medium;
+}
+
+body article.nx-w-full h1:first-of-type {
+    @apply mt-20;
+}
+
+body article.nx-w-full h2 {
+    font-family: var(--font-manrope);
+    text-align: left;
+    @apply tracking-tight;
+    @apply text-3xl;
+    @apply font-[600];
+}
+
+body article.nx-w-full p {
+    @apply max-w-3xl;
+}
+
+body pre code.nx-text-\[\.9em\] {
+    font-size: 0.8rem;
+    line-height: 1.35;
+}
+
+[style="color:var(--shiki-token-keyword)"]+[style="color:var(--shiki-token-string-expression)"]:after {
+    content: "⋯";
+    text-indent: 0;
+    display: block;
+    line-height: initial;
+    letter-spacing: normal;
+    outline: 1px solid var(--shiki-token-string-expression);
+    border-radius: 0.25rem;
+    margin-left: 0.1rem;
+    margin-right: 0.1rem;
+}
+
+[style="color:var(--shiki-token-keyword)"]+[style="color:var(--shiki-token-string-expression)"] {
+    position: relative;
+    opacity: 1;
+    display: inline-block;
+    text-indent: -9999px;
+    line-height: 0;
+    opacity: 0.5;
+    transition: opacity 0.2s;
+}
+
+[style="color:var(--shiki-token-keyword)"]+[style="color:var(--shiki-token-string-expression)"]:hover {
+    text-indent: 0;
+    line-height: initial;
+    opacity: 1;
+}
+
+[style="color:var(--shiki-token-keyword)"]+[style="color:var(--shiki-token-string-expression)"]:hover:after {
+    display: none;
+}
+
+body .nextra-card svg {
+    color: black;
+    opacity: 0.2;
+    transition: opacity 0.2s ease;
+}
+
+body .nextra-card:hover svg {
+    color: black;
+    opacity: 0.8;
+}
+
+.dark body .nextra-card svg {
+    color: white;
+    opacity: 0.4;
+}
+
+.dark body .nextra-card:hover svg {
+    color: white;
+    opacity: 0.8;
+}
+
+/* @media screen and (min-width: 80rem) {
+    body article.nx-w-full {
+        @apply -mx-32;
+    }
+} */
+
+:root {
+    --nextra-primary-hue: 30deg;
+    --nextra-primary-saturation: 15%;
+}
+
+/* .nextra-nav-container nav {
+    justify-content: flex-start;
+    max-width: 70rem;
+} */
+
+.nextra-nav-container nav :first-child {
+    margin-right: 0;
+}
+
+.nextra-nav-container nav a:not(:first-child) {
+    padding-left: 1rem;
+    padding-right: 1rem;
+}
+
+.nextra-search+* {
+    margin-left: auto;
+}
+
+body code, body kbd, body samp, body pre {
+    font-family: var(--font-pragmata);
+}
+
+body code[data-line-numbers]>.line {
+    padding-left: 0.25rem;
+}
+
+body code[data-line-numbers]>.line:before {
+    --tw-text-opacity: 0.3;
+    min-width: 1.5rem;
+    font-size: 0.7rem;
+    padding-right: 0.5rem;
+    position: relative;
+    top: 0.07rem;
+}
+
+body {
+    --shiki-color-text: #606060;
+    --shiki-color-background: transparent;
+    --shiki-token-constant: #00a5a5;
+    --shiki-token-string: #1aa245;
+    --shiki-token-comment: #aaa;
+    --shiki-token-keyword: #7b8bff;
+    --shiki-token-parameter: #ff9800;
+    --shiki-token-function: #445dd7;
+    --shiki-token-string-expression: #1aa245;
+    --shiki-token-punctuation: #969696;
+    --shiki-token-link: #1aa245;
+  }
+
+.dark body {
+    --shiki-color-text: #d1d1d1;
+    --shiki-token-constant: #2DC9C9;
+    --shiki-token-string: #ffab70;
+    --shiki-token-comment: #6b737c;
+    --shiki-token-keyword: #7b8bff;
+    --shiki-token-parameter: #ff9800;
+    --shiki-token-function: #9BABFF;
+    --shiki-token-string-expression: #42BB69;
+    --shiki-token-punctuation: #bbb;
+    --shiki-token-link: #ffab70;
+  }

homepage/homepage-jazz-old/pages/guides.mdx

@@ -0,0 +1 @@
+# Guides

homepage/homepage-jazz-old/pages/guides/_meta.json

@@ -0,0 +1,3 @@
+{
+    "gettingStarted": "Getting Started"
+}

homepage/homepage-jazz-old/pages/guides/gettingStarted.mdx

@@ -0,0 +1 @@
+# Getting started

homepage/homepage-jazz-old/pages/index.mdx

@@ -0,0 +1,237 @@
+import { Tabs, Cards, Card } from "nextra/components";
+import { Slogan, Grid, GridItem, GridCard, GoogleLogo } from "../components";
+import { ResponsiveIframe } from "../components/ResponsiveIframe";
+import {
+  ArrowUpDownIcon,
+  UploadCloudIcon,
+  PlaneIcon,
+  MonitorSmartphoneIcon,
+  TextCursorIcon,
+  MousePointer2Icon,
+  GaugeIcon,
+  HandIcon
+} from "lucide-react";
+
+# Instant sync.
+
+<Slogan>Go beyond request/response &mdash; ship modern apps with sync.</Slogan>
+
+Jazz is an open-source toolkit for building apps with **sync** and **secure collaborative data.**
+
+<h2 className="mt-24">Hard things are easy now.</h2>
+
+Jazz takes what *backends* + *databases* + *CDNs* + *real-time infrastructure* do, generalizes the problem and solves it in a completely new way. (How? Keep reading.)
+
+Because of that, with Jazz, you only build what makes your app *your app:*<br/>1. **Define your data model.** -> 2. **Add role-based permissions.** -> 3. **Build your UI.**
+
+And you get **built-in capabilities** that took the &ldquo;big ones&rdquo; <small>(G‑Docs,&nbsp;Figma,&nbsp;Notion,&nbsp;Linear,&nbsp;&hellip;)</small> *years* to build:
+
+<Cards>
+<Card href="#" title="Cross-device sync" icon={<MonitorSmartphoneIcon />} />
+  <Card
+    href="#"
+    title="Real-time multiplayer"
+    icon={
+      <div className="w-6 h-6 flex flex-col">
+        <TextCursorIcon
+          size="10"
+          absoluteStrokeWidth
+          className="-scale-x-100 self-start -ml-1"
+        />
+        <MousePointer2Icon size="15" absoluteStrokeWidth className="-mt-1 -mx-1.5 self-end"/>
+        <HandIcon size="15" absoluteStrokeWidth className="-mt-2 -mx-1.5 self-start"/>
+      </div>
+    }
+  />
+  <Card href="#" title="Automatic granular data-fetching" icon={<ArrowUpDownIcon />} />
+  <Card href="#" title="Cloud persistence & Local storage" icon={<UploadCloudIcon />} />
+  <Card
+    href="#"
+    title="Offline support & sync-when-possible"
+    icon={<PlaneIcon />}
+  />
+
+  <Card href="#" title="Fluid UI perf & 90% less loading" icon={<GaugeIcon />}/>
+</Cards>
+
+## First impressions&hellip;
+
+<Slogan small>A chat app in 86 lines of code.</Slogan>
+
+<Grid>
+<GridItem>
+```tsx filename="dataModel.ts" showLineNumbers
+import { CoMap, CoList } from 'cojson';
+
+export type Chat = CoList<Message['id']>;
+export type Message = CoMap<{ text: string }>;
+```
+</GridItem>
+<GridItem className="col-start-1">
+```tsx filename="app.tsx" showLineNumbers
+import { WithJazz, useJazz, DemoAuth } from 'jazz-react';
+import ReactDOM from 'react-dom/client';
+import { HashRoute } from 'hashroute';
+import { ChatWindow } from './chatWindow.tsx';
+import { Chat } from './dataModel.ts';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <WithJazz auth={DemoAuth({ appName: 'Chat' })}>
+    <App />
+  </WithJazz>,
+);
+
+function App() {
+  return <div className='flex flex-col items-center justify-between w-screen h-screen p-2 dark:bg-black dark:text-white'>
+    <button onClick={useJazz().logOut} className='rounded mb-5 px-2 py-1 bg-stone-200 dark:bg-stone-800 dark:text-white self-end'>
+      Log Out
+    </button>
+    {HashRoute({
+      '/': <Home />,
+      '/:id': (id) => <ChatWindow chatId={id as Chat['id']} />,
+    }, { reportToParentFrame: true })}
+  </div>
+}
+
+function Home() {
+  const { me } = useJazz();
+  // Groups determine access rights to values they own.
+  const createChat = () => {
+    const group = me.createGroup().addMember('everyone', 'writer');
+    const chat = group.createList<Chat>();
+    location.hash = '/' + chat.id;
+  };
+
+  return <button onClick={createChat} className='rounded py-2 px-4 bg-stone-200 dark:bg-stone-800 dark:text-white my-auto'>
+    Create New Chat
+  </button>
+}
+````
+</GridItem>
+<GridItem className="col-start-2 row-start-1 row-span-2">
+```tsx filename="chatWindow.tsx" showLineNumbers
+import { useAutoSub } from 'jazz-react';
+import { Chat, Message } from './dataModel.ts';
+
+export function ChatWindow({ chatId }: { chatId: Chat['id'] }) {
+  const chat = useAutoSub(chatId);
+
+  return chat ? <div className='w-full max-w-xl h-full flex flex-col items-stretch'>
+    {
+      chat.map((msg, i) => (
+        <ChatBubble key={msg?.id}
+          text={msg?.text}
+          by={chat.meta.edits[i].by?.profile?.name}
+          byMe={chat.meta.edits[i].by?.isMe}
+          time={chat.meta.edits[i].at} />
+      ))
+    }
+    <ChatInput onSubmit={(text) => {
+      const msg = chat.meta.group.createMap<Message>({ text });
+      chat.append(msg.id);
+    }}/>
+  </div> : <div>Loading...</div>;
+}
+
+function ChatBubble({ text, by, time: t, byMe }:
+  { text?: string, by?: string, time?: Date, byMe?: boolean }
+) {
+  return <div className={`items-${byMe ? 'end' : 'start'} flex flex-col`}>
+    <div className='rounded-xl bg-stone-100 dark:bg-stone-700 dark:text-white py-2 px-4 mt-2 min-w-[5rem]'>
+      { text }
+    </div>
+    <div className='text-xs text-neutral-500 ml-2'>
+      { by } { t?.getHours() }:{ t?.getMinutes() }
+    </div>
+  </div>;
+}
+
+function ChatInput({ onSubmit }: { onSubmit: (text: string) => void }) {
+  return <input className='rounded p-2 border mt-auto dark:bg-black dark:text-white dark:border-stone-700'
+    placeholder='Type a message and press Enter'
+    onKeyDown={({ key, currentTarget: input }) => {
+      if (key !== 'Enter' || !input.value) return;
+      onSubmit(input.value);
+      input.value = '';
+    }}/>
+}
+````
+
+</GridItem>
+<ResponsiveIframe src="http://localhost:9999/" className="col-start-3 row-start-1 row-span-2 rounded-xl overflow-hidden border dark:border-stone-700 min-h-[50vh]"/>
+</Grid>
+
+## How does it work?
+
+<Slogan small>Introducing: Secure collaborative data.</Slogan>
+
+Jazz is built around **CoJSON,** a new abstraction that implements **multi-device co-editing,** **user identities & permissions** and **sync & persistence** in a standardized way with a high-level API.
+
+This makes collaboration and secure access control feel like **inherent properties of your data** &mdash;&nbsp;so&nbsp;we're calling it &ldquo;secure collaborative data.&rdquo;
+
+### Collaborative Values
+
+<Slogan small>Your new building blocks.</Slogan>
+
+- Data that multiple users can co-edit in real time or async with smart conflict resolution
+
+<Grid>
+<GridCard>
+#### `CoMap`s - Key-value maps
+
+</GridCard>
+<GridCard>
+#### `CoList`s - Ordered lists
+
+</GridCard>
+<GridCard>
+#### `CoString`s - Plain-text
+
+</GridCard>
+<GridCard>
+#### `CoText`s - Rich-text
+
+- Generic collaborative markup format that prevents most editing conflicts
+
+</GridCard>
+<GridCard>
+
+#### `CoStream`s - Per-user value streams
+
+- Enforce per-user separation for user presence, social reactions, polls, replies etc.
+
+</GridCard>
+<GridCard>
+
+#### `BinaryCoStream`s - file/media streams
+
+- Create, reference and load even huge binary blobs or create live-streams without needing external services
+
+</GridCard>
+</Grid>
+
+### Accounts & Groups
+
+<Slogan small>First-class user identities & secure permissions.</Slogan>
+
+- Simple API to define groups of users, their roles
+- Verifiably enforced by encryption and signatures
+
+## Jazz: batteries included.
+
+<Grid>
+<GridCard>
+### Auto-sub
+
+<Slogan small>Let your UI drive data-syncing</Slogan>
+
+</GridCard>
+<GridCard>
+### Auth providers
+</GridCard>
+<GridCard>
+### Two-way sync to your existing database
+</GridCard>
+</Grid>
+
+## Global Mesh

homepage/homepage-jazz-old/pages/mesh.mdx

@@ -0,0 +1,7 @@
+import { Slogan } from './index.mdx'
+
+# Jazz Global Mesh
+
+<Slogan>Serverless sync and storage for Jazz apps.</Slogan>
+
+Real-time syncing infrastructure that scales up to millions of users. Pricing that scales down to zero.

homepage/homepage-jazz-old/postcss.config.js

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

homepage/homepage-jazz-old/tailwind.config.ts

@@ -0,0 +1,15 @@
+module.exports = {
+  darkMode: 'class',
+  content: [
+    './pages/**/*.{js,jsx,ts,tsx,md,mdx}',
+    './components/**/*.{js,jsx,ts,tsx,md,mdx}',
+    './theme.config.jsx'
+  ],
+  theme: {
+    extend: {
+      display: ['var(--font-manrope)'],
+      mono: ['var(--font-pragmata)'],
+    }
+  },
+  plugins: []
+}

homepage/homepage-jazz-old/theme.config.jsx

@@ -0,0 +1,62 @@
+import Link from "next/link";
+
+export default {
+    logo: (
+        <svg
+            width={386 / 4}
+            height={146 / 4}
+            viewBox="0 0 386 146"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <path
+                d="M176.725 33.865H188.275V22.7H176.725V33.865ZM164.9 129.4H172.875C182.72 129.4 188.275 123.9 188.275 114.22V43.6H176.725V109.545C176.725 115.65 173.975 118.51 167.925 118.51H164.9V129.4ZM245.298 53.28C241.613 45.47 233.363 41.95 222.748 41.95C208.998 41.95 200.748 48.44 197.888 58.615L208.613 61.915C210.648 55.315 216.368 52.565 222.638 52.565C231.933 52.565 235.673 56.415 236.058 64.61C226.433 65.93 216.643 67.195 209.768 69.23C200.583 72.145 195.743 77.865 195.743 86.83C195.743 96.51 202.673 104.65 215.818 104.65C225.443 104.65 232.318 101.35 237.213 94.365V103H247.388V66.425C247.388 61.475 247.168 57.185 245.298 53.28ZM217.853 95.245C210.483 95.245 207.128 91.34 207.128 86.72C207.128 82.045 210.593 79.515 215.323 77.92C220.328 76.435 226.983 75.5 235.948 74.18C235.893 76.93 235.673 80.725 234.738 83.475C233.418 89.25 227.643 95.245 217.853 95.245ZM251.22 103H301.545V92.715H269.535L303.195 45.47V43.6H254.3V53.885H284.935L251.22 101.185V103ZM304.815 103H355.14V92.715H323.13L356.79 45.47V43.6H307.895V53.885H338.53L304.815 101.185V103Z"
+                fill="currentColor"
+            />
+            <path
+                fill-rule="evenodd"
+                clip-rule="evenodd"
+                d="M136.179 44.8277C136.179 44.8277 136.179 44.8277 136.179 44.8276V21.168C117.931 28.5527 97.9854 32.6192 77.0897 32.6192C65.1466 32.6192 53.5138 31.2908 42.331 28.7737V51.4076C42.331 51.4076 42.331 51.4076 42.331 51.4076V81.1508C41.2955 80.4385 40.1568 79.8458 38.9405 79.3915C36.1732 78.358 33.128 78.0876 30.1902 78.6145C27.2524 79.1414 24.5539 80.4419 22.4358 82.3516C20.3178 84.2613 18.8754 86.6944 18.291 89.3433C17.7066 91.9921 18.0066 94.7377 19.1528 97.2329C20.2991 99.728 22.2403 101.861 24.7308 103.361C27.2214 104.862 30.1495 105.662 33.1448 105.662H33.1455C33.6061 105.662 33.8365 105.662 34.0314 105.659C44.5583 105.449 53.042 96.9656 53.2513 86.4386C53.2534 86.3306 53.2544 86.2116 53.2548 86.0486H53.2552V85.7149L53.2552 85.5521V82.0762L53.2552 53.1993C61.0533 54.2324 69.0092 54.7656 77.0897 54.7656C77.6696 54.7656 78.2489 54.7629 78.8276 54.7574V110.696C77.792 109.983 76.6533 109.391 75.437 108.936C72.6697 107.903 69.6246 107.632 66.6867 108.159C63.7489 108.686 61.0504 109.987 58.9323 111.896C56.8143 113.806 55.3719 116.239 54.7875 118.888C54.2032 121.537 54.5031 124.283 55.6494 126.778C56.7956 129.273 58.7368 131.405 61.2273 132.906C63.7179 134.406 66.646 135.207 69.6414 135.207C70.1024 135.207 70.3329 135.207 70.5279 135.203C81.0548 134.994 89.5385 126.51 89.7478 115.983C89.7517 115.788 89.7517 115.558 89.7517 115.097V111.621L89.7517 54.3266C101.962 53.4768 113.837 51.4075 125.255 48.2397V80.9017C124.219 80.1894 123.081 79.5966 121.864 79.1424C119.097 78.1089 116.052 77.8384 113.114 78.3653C110.176 78.8922 107.478 80.1927 105.36 82.1025C103.242 84.0122 101.799 86.4453 101.215 89.0941C100.631 91.743 100.931 94.4886 102.077 96.9837C103.223 99.4789 105.164 101.612 107.655 103.112C110.145 104.612 113.073 105.413 116.069 105.413C116.53 105.413 116.76 105.413 116.955 105.409C127.482 105.2 135.966 96.7164 136.175 86.1895C136.179 85.9945 136.179 85.764 136.179 85.3029V81.8271L136.179 44.8277Z"
+                fill="#3313F7"
+            />
+        </svg>
+    ),
+    project: {
+        link: "https://github.com/gardencmp/jazz",
+    },
+    docsRepositoryBase:
+        "https://github.com/gardencmp/jazz/tree/main/homepage/homepage-jazz",
+    chat: { link: "https://discord.gg/utDMjHYg42" },
+    navbar: {
+        extraContent: (
+            <Link
+                className="nx-p-2 nx-text-current"
+                href={"https://twitter.com/jazz_tools"}
+                target="_blank"
+            >
+                <svg width="24" height="24" viewBox="0 0 248 204">
+                    <path
+                        fill="currentColor"
+                        d="M221.95 51.29c.15 2.17.15 4.34.15 6.53 0 66.73-50.8 143.69-143.69 143.69v-.04c-27.44.04-54.31-7.82-77.41-22.64 3.99.48 8 .72 12.02.73 22.74.02 44.83-7.61 62.72-21.66-21.61-.41-40.56-14.5-47.18-35.07a50.338 50.338 0 0 0 22.8-.87C27.8 117.2 10.85 96.5 10.85 72.46v-.64a50.18 50.18 0 0 0 22.92 6.32C11.58 63.31 4.74 33.79 18.14 10.71a143.333 143.333 0 0 0 104.08 52.76 50.532 50.532 0 0 1 14.61-48.25c20.34-19.12 52.33-18.14 71.45 2.19 11.31-2.23 22.15-6.38 32.07-12.26a50.69 50.69 0 0 1-22.2 27.93c10.01-1.18 19.79-3.86 29-7.95a102.594 102.594 0 0 1-25.2 26.16z"
+                    />
+                </svg>
+            </Link>
+        ),
+    },
+    useNextSeoProps() {
+        return {
+            titleTemplate: "jazz – %s",
+        };
+    },
+    footer: {
+        text: (
+            <span>
+                MIT {new Date().getFullYear()} ©{" "}
+                <a href="https://gcmp.io" target="_blank">
+                    Garden Computing, Inc
+                </a>
+                .
+            </span>
+        ),
+    }
+};

homepage/homepage-jazz-old/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}