markdown editor failing at sync

markdown editor first attempt
lockCamera still almost working
2024-12-08 04:52:14 -05:00 · 2024-12-08 03:13:19 -05:00 · 2024-12-08 03:01:28 -05:00 · 2024-12-08 02:43:19 -05:00 · 2024-12-07 23:22:10 -05:00 · 2024-12-07 23:03:42 -05:00
52 changed files with 13142 additions and 3 deletions
--- a/.env.example
+++ b/.env.example
@ -0,0 +1,19 @@
+# Google API Credentials
+VITE_GOOGLE_CLIENT_ID='your_google_client_id'
+VITE_GOOGLE_API_KEY='your_google_api_key'
+
+# Cloudflare Worker
+CLOUDFLARE_API_TOKEN='your_cloudflare_token'
+CLOUDFLARE_ACCOUNT_ID='your_account_id'
+CLOUDFLARE_ZONE_ID='your_zone_id'
+
+# Worker URL
+TLDRAW_WORKER_URL='your_worker_url'
+
+# R2 Bucket Configuration
+R2_BUCKET_NAME='your_bucket_name'
+R2_PREVIEW_BUCKET_NAME='your_preview_bucket_name'
+
+# Daily.co Configuration
+DAILY_API_KEY='your_daily_api_key'
+DAILY_DOMAIN='your_daily_domain' 
--- a/.gitattributes
+++ b/.gitattributes
@ -0,0 +1,5 @@
+*.pdf filter=lfs diff=lfs merge=lfs -text
+*.mp4 filter=lfs diff=lfs merge=lfs -text
+*.mov filter=lfs diff=lfs merge=lfs -text
+*.png filter=lfs diff=lfs merge=lfs -text
+*.gif filter=lfs diff=lfs merge=lfs -text
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,181 @@
+dist/
+.DS_Store
+bun.lockb
+
+
+logs
+_.log
+npm-debug.log_
+lerna-debug.log*
+.pnpm-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+
+report.[0-9]_.[0-9]_.[0-9]_.[0-9]_.json
+
+# Runtime data
+
+pids
+_.pid
+_.seed
+\*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+
+lib-cov
+
+# Coverage directory used by tools like istanbul
+
+coverage
+\*.lcov
+
+# nyc test coverage
+
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+
+bower_components
+
+# node-waf configuration
+
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+
+build/Release
+
+# Dependency directories
+
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+
+web_modules/
+
+# TypeScript cache
+
+\*.tsbuildinfo
+
+# Optional npm cache directory
+
+.npm
+
+# Optional eslint cache
+
+.eslintcache
+
+# Optional stylelint cache
+
+.stylelintcache
+
+# Microbundle cache
+
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+
+.node_repl_history
+
+# Output of 'npm pack'
+
+\*.tgz
+
+
+
+# dotenv environment variable files
+
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# parcel-bundler cache (https://parceljs.org/)
+
+.cache
+.parcel-cache
+
+# Next.js build output
+
+.next
+out
+
+# Nuxt.js build / generate output
+
+.nuxt
+dist
+
+# Gatsby files
+
+.cache/
+
+# Comment in the public line in if your project uses Gatsby and not Next.js
+
+# https://nextjs.org/blog/next-9-1#public-directory-support
+
+# public
+
+# vuepress build output
+
+.vuepress/dist
+
+# vuepress v2.x temp and cache directory
+
+.temp
+.cache
+
+# Docusaurus cache and generated files
+
+.docusaurus
+
+# Serverless directories
+
+.serverless/
+
+# FuseBox cache
+
+.fusebox/
+
+# DynamoDB Local files
+
+.dynamodb/
+
+# TernJS port file
+
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+
+.vscode-test
+
+.wrangler/
+
+# Vercel
+.vercel/
+.dev.vars
+
+# Environment variables
+.env*
+.env.development
+!.env.example
+.vercel
+
+# Environment files
+.env
+.env.local
+.env.*.local
+.dev.vars
+
+# Keep example file
+!.env.example
+
+package-lock.json
--- a/.npmrc
+++ b/.npmrc
@ -0,0 +1,3 @@
+legacy-peer-deps=true
+strict-peer-dependencies=false
+auto-install-peers=true 
--- a/.prettierrc.json
+++ b/.prettierrc.json
@ -0,0 +1,4 @@
+{
+    "semi": false,
+    "trailingComma": "all"
+  }
--- a/.wrangler/tmp/bundle-VlWfGj/checked-fetch.js
+++ b/.wrangler/tmp/bundle-VlWfGj/checked-fetch.js
@ -0,0 +1,30 @@
+const urls = new Set();
+
+function checkURL(request, init) {
+	const url =
+		request instanceof URL
+			? request
+			: new URL(
+					(typeof request === "string"
+						? new Request(request, init)
+						: request
+					).url
+				);
+	if (url.port && url.port !== "443" && url.protocol === "https:") {
+		if (!urls.has(url.toString())) {
+			urls.add(url.toString());
+			console.warn(
+				`WARNING: known issue with \`fetch()\` requests to custom HTTPS ports in published Workers:\n` +
+					` - ${url.toString()} - the custom port will be ignored when the Worker is published using the \`wrangler deploy\` command.\n`
+			);
+		}
+	}
+}
+
+globalThis.fetch = new Proxy(globalThis.fetch, {
+	apply(target, thisArg, argArray) {
+		const [request, init] = argArray;
+		checkURL(request, init);
+		return Reflect.apply(target, thisArg, argArray);
+	},
+});
--- a/.wrangler/tmp/bundle-VlWfGj/middleware-insertion-facade.js
+++ b/.wrangler/tmp/bundle-VlWfGj/middleware-insertion-facade.js
@ -0,0 +1,11 @@
+				import worker, * as OTHER_EXPORTS from "C:\\Users\\jeffe\\Documents\\GitHub\\canvas-website\\worker\\worker.ts";
+				import * as __MIDDLEWARE_0__ from "C:\\Users\\jeffe\\Documents\\GitHub\\canvas-website\\node_modules\\wrangler\\templates\\middleware\\middleware-ensure-req-body-drained.ts";
+import * as __MIDDLEWARE_1__ from "C:\\Users\\jeffe\\Documents\\GitHub\\canvas-website\\node_modules\\wrangler\\templates\\middleware\\middleware-miniflare3-json-error.ts";
+
+				export * from "C:\\Users\\jeffe\\Documents\\GitHub\\canvas-website\\worker\\worker.ts";
+
+				export const __INTERNAL_WRANGLER_MIDDLEWARE__ = [
+					
+					__MIDDLEWARE_0__.default,__MIDDLEWARE_1__.default
+				]
+				export default worker;
--- a/.wrangler/tmp/bundle-VlWfGj/middleware-loader.entry.ts
+++ b/.wrangler/tmp/bundle-VlWfGj/middleware-loader.entry.ts
@ -0,0 +1,134 @@
+// This loads all middlewares exposed on the middleware object and then starts
+// the invocation chain. The big idea is that we can add these to the middleware
+// export dynamically through wrangler, or we can potentially let users directly
+// add them as a sort of "plugin" system.
+
+import ENTRY, { __INTERNAL_WRANGLER_MIDDLEWARE__ } from "C:\\Users\\jeffe\\Documents\\GitHub\\canvas-website\\.wrangler\\tmp\\bundle-VlWfGj\\middleware-insertion-facade.js";
+import { __facade_invoke__, __facade_register__, Dispatcher } from "C:\\Users\\jeffe\\Documents\\GitHub\\canvas-website\\node_modules\\wrangler\\templates\\middleware\\common.ts";
+import type { WorkerEntrypointConstructor } from "C:\\Users\\jeffe\\Documents\\GitHub\\canvas-website\\.wrangler\\tmp\\bundle-VlWfGj\\middleware-insertion-facade.js";
+
+// Preserve all the exports from the worker
+export * from "C:\\Users\\jeffe\\Documents\\GitHub\\canvas-website\\.wrangler\\tmp\\bundle-VlWfGj\\middleware-insertion-facade.js";
+
+class __Facade_ScheduledController__ implements ScheduledController {
+	readonly #noRetry: ScheduledController["noRetry"];
+
+	constructor(
+		readonly scheduledTime: number,
+		readonly cron: string,
+		noRetry: ScheduledController["noRetry"]
+	) {
+		this.#noRetry = noRetry;
+	}
+
+	noRetry() {
+		if (!(this instanceof __Facade_ScheduledController__)) {
+			throw new TypeError("Illegal invocation");
+		}
+		// Need to call native method immediately in case uncaught error thrown
+		this.#noRetry();
+	}
+}
+
+function wrapExportedHandler(worker: ExportedHandler): ExportedHandler {
+	// If we don't have any middleware defined, just return the handler as is
+	if (
+		__INTERNAL_WRANGLER_MIDDLEWARE__ === undefined ||
+		__INTERNAL_WRANGLER_MIDDLEWARE__.length === 0
+	) {
+		return worker;
+	}
+	// Otherwise, register all middleware once
+	for (const middleware of __INTERNAL_WRANGLER_MIDDLEWARE__) {
+		__facade_register__(middleware);
+	}
+
+	const fetchDispatcher: ExportedHandlerFetchHandler = function (
+		request,
+		env,
+		ctx
+	) {
+		if (worker.fetch === undefined) {
+			throw new Error("Handler does not export a fetch() function.");
+		}
+		return worker.fetch(request, env, ctx);
+	};
+
+	return {
+		...worker,
+		fetch(request, env, ctx) {
+			const dispatcher: Dispatcher = function (type, init) {
+				if (type === "scheduled" && worker.scheduled !== undefined) {
+					const controller = new __Facade_ScheduledController__(
+						Date.now(),
+						init.cron ?? "",
+						() => {}
+					);
+					return worker.scheduled(controller, env, ctx);
+				}
+			};
+			return __facade_invoke__(request, env, ctx, dispatcher, fetchDispatcher);
+		},
+	};
+}
+
+function wrapWorkerEntrypoint(
+	klass: WorkerEntrypointConstructor
+): WorkerEntrypointConstructor {
+	// If we don't have any middleware defined, just return the handler as is
+	if (
+		__INTERNAL_WRANGLER_MIDDLEWARE__ === undefined ||
+		__INTERNAL_WRANGLER_MIDDLEWARE__.length === 0
+	) {
+		return klass;
+	}
+	// Otherwise, register all middleware once
+	for (const middleware of __INTERNAL_WRANGLER_MIDDLEWARE__) {
+		__facade_register__(middleware);
+	}
+
+	// `extend`ing `klass` here so other RPC methods remain callable
+	return class extends klass {
+		#fetchDispatcher: ExportedHandlerFetchHandler<Record<string, unknown>> = (
+			request,
+			env,
+			ctx
+		) => {
+			this.env = env;
+			this.ctx = ctx;
+			if (super.fetch === undefined) {
+				throw new Error("Entrypoint class does not define a fetch() function.");
+			}
+			return super.fetch(request);
+		};
+
+		#dispatcher: Dispatcher = (type, init) => {
+			if (type === "scheduled" && super.scheduled !== undefined) {
+				const controller = new __Facade_ScheduledController__(
+					Date.now(),
+					init.cron ?? "",
+					() => {}
+				);
+				return super.scheduled(controller);
+			}
+		};
+
+		fetch(request: Request<unknown, IncomingRequestCfProperties>) {
+			return __facade_invoke__(
+				request,
+				this.env,
+				this.ctx,
+				this.#dispatcher,
+				this.#fetchDispatcher
+			);
+		}
+	};
+}
+
+let WRAPPED_ENTRY: ExportedHandler | WorkerEntrypointConstructor | undefined;
+if (typeof ENTRY === "object") {
+	WRAPPED_ENTRY = wrapExportedHandler(ENTRY);
+} else if (typeof ENTRY === "function") {
+	WRAPPED_ENTRY = wrapWorkerEntrypoint(ENTRY);
+}
+export default WRAPPED_ENTRY;
--- a/.wrangler/tmp/dev-xuTKLz/worker.js
+++ b/.wrangler/tmp/dev-xuTKLz/worker.js
--- a/.wrangler/tmp/dev-xuTKLz/worker.js.map
+++ b/.wrangler/tmp/dev-xuTKLz/worker.js.map
--- a/README.md
+++ b/README.md
@ -0,0 +1,3 @@
+A website.
+
+Do `npm i` and `npm run dev`
--- a/index.html
+++ b/index.html
@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+	<title>Jeff Emmett</title>
+	<meta charset="UTF-8" />
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+	<link rel="preconnect" href="https://fonts.googleapis.com" />
+	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+	<link
+		href="https://fonts.googleapis.com/css2?family=Recursive:slnt,wght,CASL,CRSV,MONO@-15..0,300..1000,0..1,0..1,0..1&display=swap"
+		rel="stylesheet">
+
+	<!-- Social Meta Tags -->
+	<meta name="description"
+		content="My research investigates the intersection of computing, human-system interfaces, and emancipatory politics. I am interested in the potential of computing as a medium for thought, as a tool for collective action, and as a means of emancipation.">
+
+	<meta property="og:url" content="https://jeffemmett.com">
+	<meta property="og:type" content="website">
+	<meta property="og:title" content="Jeff Emmett">
+	<meta property="og:description"
+		content="My research doesn't investigate the intersection of computing, human-system interfaces, and emancipatory politics. I am interested in the potential of computing as a medium for thought, as a tool for collective action, and as a means of emancipation.">
+	<meta property="og:image" content="/website-embed.png">
+
+	<meta name="twitter:card" content="summary_large_image">
+	<meta property="twitter:domain" content="jeffemmett.com">
+	<meta property="twitter:url" content="https://jeffemmett.com">
+	<meta name="twitter:title" content="Jeff Emmett">
+	<meta name="twitter:description"
+		content="My research doesn't investigate the intersection of computing, human-system interfaces, and emancipatory politics. I am interested in the potential of computing as a medium for thought, as a tool for collective action, and as a means of emancipation.">
+	<meta name="twitter:image" content="/website-embed.png">
+
+	<!-- Analytics -->
+	<script data-goatcounter="https://jeff.goatcounter.com/count" async src="//gc.zgo.at/count.js"></script>
+	<meta name="mobile-web-app-capable" content="yes">
+</head>
+
+<body>
+	<div id="root"></div>
+	<script type="module" src="/src/App.tsx"></script>
+</body>
+
+</html>
--- a/package.json
+++ b/package.json
@ -0,0 +1,54 @@
+{
+	"name": "jeffemmett",
+	"version": "1.0.0",
+	"description": "Jeff Emmett's personal website",
+	"type": "module",
+	"scripts": {
+		"dev": "concurrently --kill-others --names client,worker --prefix-colors blue,red \"npm run dev:client\" \"npm run dev:worker\"",
+		"dev:client": "vite --host --port 5173",
+		"dev:worker": "wrangler dev --local --port 5172 --ip 0.0.0.0",
+		"build": "tsc && vite build",
+		"preview": "vite preview",
+		"deploy": "tsc && vite build && vercel deploy --prod && wrangler deploy"
+	},
+	"keywords": [],
+	"author": "Jeff Emmett",
+	"license": "ISC",
+	"dependencies": {
+		"@hackmd/markdown-it": "^12.0.23",
+		"@hackmd/markdown-it-task-lists": "^2.1.4",
+		"@tldraw/assets": "^3.6.0",
+		"@tldraw/sync": "^3.6.0",
+		"@tldraw/sync-core": "^3.6.0",
+		"@tldraw/tldraw": "^3.6.0",
+		"@tldraw/tlschema": "^3.6.0",
+		"@vercel/analytics": "^1.2.2",
+		"cloudflare-workers-unfurl": "^0.0.7",
+		"gray-matter": "^4.0.3",
+		"itty-router": "^5.0.17",
+		"lodash.throttle": "^4.1.1",
+		"markdown-it": "^14.1.0",
+		"markdown-it-task-lists": "^2.1.1",
+		"react": "^18.2.0",
+		"react-dom": "^18.2.0",
+		"react-markdown": "^9.0.1",
+		"react-router-dom": "^7.0.2",
+		"tldraw": "^3.6.0",
+		"vercel": "^39.1.1"
+	},
+	"devDependencies": {
+		"@cloudflare/types": "^6.0.0",
+		"@cloudflare/workers-types": "^4.20240821.1",
+		"@types/lodash.throttle": "^4",
+		"@types/markdown-it": "^14.1.2",
+		"@types/react": "^19.0.1",
+		"@types/react-dom": "^19.0.1",
+		"@types/styled-components": "^5.1.34",
+		"@vitejs/plugin-react": "^4.0.3",
+		"@vitejs/plugin-react-swc": "^3.6.0",
+		"concurrently": "^9.1.0",
+		"typescript": "^5.6.3",
+		"vite": "^6.0.3",
+		"wrangler": "^3.88.0"
+	}
+}
--- a/page.html
+++ b/page.html
--- a/src/App.tsx
+++ b/src/App.tsx
@ -0,0 +1,65 @@
+import { inject } from "@vercel/analytics"
+import "tldraw/tldraw.css"
+import "@/css/style.css"
+import { Default } from "@/routes/Default"
+import { BrowserRouter, Route, Routes } from "react-router-dom"
+import { Contact } from "@/routes/Contact"
+import { Board } from "./routes/Board"
+import { Inbox } from "./routes/Inbox"
+import { Editor, Tldraw, TLShapeId } from "tldraw"
+import { components } from "./ui/components"
+import { overrides } from "./ui/overrides"
+import { ChatBoxShape } from "./shapes/ChatBoxShapeUtil"
+import { VideoChatShape } from "./shapes/VideoChatShapeUtil"
+import { ChatBoxTool } from "./tools/ChatBoxTool"
+import { VideoChatTool } from "./tools/VideoChatTool"
+import { EmbedTool } from "./tools/EmbedTool"
+import { EmbedShape } from "./shapes/EmbedShapeUtil"
+import { MarkdownShape } from "./shapes/MarkdownShapeUtil"
+import { MarkdownTool } from "./tools/MarkdownTool"
+import { createRoot } from "react-dom/client"
+import { handleInitialPageLoad } from "@/utils/handleInitialPageLoad"
+
+inject()
+
+const customShapeUtils = [
+  ChatBoxShape,
+  VideoChatShape,
+  EmbedShape,
+  MarkdownShape,
+]
+const customTools = [ChatBoxTool, VideoChatTool, EmbedTool, MarkdownTool]
+
+export default function InteractiveShapeExample() {
+  return (
+    <div className="tldraw__editor">
+      <Tldraw
+        shapeUtils={customShapeUtils}
+        tools={customTools}
+        overrides={overrides}
+        components={components}
+        onMount={(editor) => {
+          handleInitialPageLoad(editor)
+          editor.createShape({ type: "my-interactive-shape", x: 100, y: 100 })
+        }}
+      />
+    </div>
+  )
+}
+
+createRoot(document.getElementById("root")!).render(<App />)
+
+function App() {
+  return (
+    // <React.StrictMode>
+    <BrowserRouter>
+      <Routes>
+        <Route path="/" element={<Default />} />
+        <Route path="/contact" element={<Contact />} />
+        <Route path="/board/:slug" element={<Board />} />
+        <Route path="/inbox" element={<Inbox />} />
+      </Routes>
+    </BrowserRouter>
+    // </React.StrictMode>
+  )
+}
--- a/src/css/reset.css
+++ b/src/css/reset.css
@ -0,0 +1,89 @@
+/* Box sizing rules */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+/* Prevent font size inflation */
+html {
+  -moz-text-size-adjust: none;
+  -webkit-text-size-adjust: none;
+  text-size-adjust: none;
+}
+
+/* Remove default margin in favour of better control in authored CSS */
+body,
+h1,
+h2,
+h3,
+h4,
+p,
+figure,
+blockquote,
+dl,
+dd {
+  margin-block-end: 0;
+}
+
+/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
+ul[role="list"],
+ol[role="list"] {
+  list-style: none;
+}
+
+/* Set core body defaults */
+body {
+  min-height: 100vh;
+  line-height: 1.5;
+}
+
+/* Set shorter line heights on headings and interactive elements */
+h1,
+h2,
+h3,
+h4,
+button,
+input,
+label {
+  line-height: 1.1;
+}
+
+/* Balance text wrapping on headings */
+h1,
+h2,
+h3,
+h4 {
+  text-wrap: balance;
+}
+
+/* A elements that don't have a class get default styles */
+a:not([class]) {
+  text-decoration-skip-ink: auto;
+  color: currentColor;
+}
+
+/* Make images easier to work with */
+img,
+picture {
+  max-width: 100%;
+  display: block;
+}
+
+/* Inherit fonts for inputs and buttons */
+input,
+button,
+textarea,
+select {
+  font: inherit;
+}
+
+/* Make sure textareas without a rows attribute are not tiny */
+textarea:not([rows]) {
+  min-height: 10em;
+}
+
+/* Anything that has been anchored to should have extra scroll margin */
+:target {
+  scroll-margin-block: 5ex;
+}
--- a/src/css/style.css
+++ b/src/css/style.css
@ -0,0 +1,335 @@
+@import url("reset.css");
+
+html,
+body {
+  padding: 0;
+  margin: 0;
+  min-height: 100vh;
+  min-height: -webkit-fill-available;
+  height: 100%;
+}
+
+video {
+  width: 100%;
+  height: auto;
+}
+
+main {
+  max-width: 60em;
+  margin: 0 auto;
+  padding-left: 4em;
+  padding-right: 4em;
+  padding-top: 3em;
+  padding-bottom: 3em;
+  font-family: "Recursive";
+  font-variation-settings: "MONO" 1;
+  font-variation-settings: "CASL" 1;
+  color: #24292e;
+}
+
+h1 {
+  font-size: 2rem;
+}
+
+h2 {
+  font-size: 1.5rem;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin-top: 0;
+  margin-bottom: 0.5em;
+}
+
+header {
+  margin-bottom: 2em;
+  font-size: 1.5rem;
+  font-variation-settings: "MONO" 1;
+  font-variation-settings: "CASL" 1;
+}
+
+i {
+  font-variation-settings: "slnt" -15;
+}
+
+pre>code {
+  width: 100%;
+  padding: 1em;
+  display: block;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+
+code {
+  background-color: #e4e9ee;
+  width: 100%;
+  color: #38424c;
+  padding: 0.2em 0.4em;
+  border-radius: 4px;
+}
+
+b,
+strong {
+  font-variation-settings: "wght" 600;
+}
+
+blockquote {
+  margin: -1em;
+  padding: 1em;
+  background-color: #f1f1f1;
+  margin-top: 1em;
+  margin-bottom: 1em;
+  border-radius: 4px;
+
+  & p {
+    font-variation-settings: "CASL" 1;
+    margin: 0;
+  }
+}
+
+p {
+  font-family: Recursive;
+  margin-top: 0;
+  margin-bottom: 1.5em;
+  font-size: 1.1em;
+  font-variation-settings: "wght" 350;
+}
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+  text-align: left;
+  margin-bottom: 1em;
+  font-variation-settings: "mono" 1;
+  font-variation-settings: "casl" 0;
+
+  th,
+  td {
+    padding: 0.5em;
+    border: 1px solid #ddd;
+  }
+
+  th {
+    background-color: #f4f4f4;
+    font-weight: bold;
+  }
+
+  tr:nth-child(even) {
+    background-color: #f9f9f9;
+  }
+}
+
+a {
+  font-variation-settings: "CASL" 0;
+
+  &:hover {
+    animation: casl-forward 0.2s ease forwards;
+  }
+
+  &:not(:hover) {
+    /* text-decoration: none; */
+    animation: casl-reverse 0.2s ease backwards;
+  }
+}
+
+@keyframes casl-forward {
+  from {
+    font-variation-settings:
+      "CASL" 0,
+      "wght" 400;
+  }
+
+  to {
+    font-variation-settings:
+      "CASL" 1,
+      "wght" 600;
+  }
+}
+
+@keyframes casl-reverse {
+  from {
+    font-variation-settings:
+      "CASL" 1,
+      "wght" 600;
+  }
+
+  to {
+    font-variation-settings:
+      "CASL" 0,
+      "wght" 400;
+  }
+}
+
+p a {
+  text-decoration: underline;
+}
+
+.dinkus {
+  display: block;
+  text-align: center;
+  font-size: 1.1rem;
+  margin-top: 2em;
+  margin-bottom: 0em;
+}
+
+ol,
+ul {
+  padding-left: 0;
+  margin-top: 0;
+  font-size: 1rem;
+
+  & li::marker {
+    color: rgba(0, 0, 0, 0.322);
+  }
+}
+
+img {
+  display: block;
+  margin: 0 auto;
+}
+
+@media (max-width: 600px) {
+  main {
+    padding: 2em;
+  }
+
+  header {
+    margin-bottom: 1em;
+  }
+
+  ol {
+    list-style-position: inside;
+  }
+}
+
+/* Some conditional spacing */
+table:not(:has(+ p)) {
+  margin-bottom: 2em;
+}
+
+p:has(+ ul) {
+  margin-bottom: 0.5em;
+}
+
+p:has(+ ol) {
+  margin-bottom: 0.5em;
+}
+
+.loading {
+  font-family: "Recursive";
+  font-variation-settings: "CASL" 1;
+  font-size: 1rem;
+  text-align: center;
+  position: absolute;
+  top: 40%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background-color: #f1f1f1;
+  border: 1px solid #c0c9d1;
+  padding: 0.5em;
+  border-radius: 4px;
+}
+
+/* CANVAS SHENANIGANS */
+#toggle-physics,
+#toggle-canvas {
+  position: fixed;
+  z-index: 999;
+  right: 10px;
+  width: 2.5rem;
+  height: 2.5rem;
+  background: none;
+  border: none;
+  cursor: pointer;
+  opacity: 0.25;
+
+  &:hover {
+    opacity: 1;
+  }
+
+  & img {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+#toggle-canvas {
+  top: 10px;
+}
+
+#toggle-physics {
+  top: 60px;
+  display: none;
+}
+
+.tl-html-layer {
+  font-family: "Recursive";
+  font-variation-settings: "MONO" 1;
+  font-variation-settings: "CASL" 1;
+
+  & h1,
+  p,
+  span,
+  header,
+  ul,
+  ol {
+    margin: 0;
+  }
+
+  & header {
+    font-size: 1.5rem;
+  }
+
+  & p {
+    font-size: 1.1rem;
+  }
+}
+
+.transparent {
+  opacity: 0 !important;
+  transition: opacity 0.25s ease-in-out;
+}
+
+.canvas-mode {
+  overflow: hidden;
+
+  & #toggle-physics {
+    display: block;
+  }
+}
+
+.tldraw__editor {
+  overscroll-behavior: none;
+  position: fixed;
+  inset: 0px;
+  overflow: hidden;
+  touch-action: none;
+  -webkit-touch-callout: none;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.tl-background {
+  background-color: transparent;
+}
+
+.tlui-debug-panel {
+  display: none;
+}
+
+.overflowing {
+  box-shadow: 0 0px 16px rgba(0, 0, 0, 0.15);
+  overflow: hidden;
+  background-color: white;
+}
+
+
+.mdx-editor {
+  height: 100%;
+  padding: 8px;
+  outline: none;
+  font-family: inherit;
+}
--- a/src/hooks/useCameraControls.ts
+++ b/src/hooks/useCameraControls.ts
@ -0,0 +1,127 @@
+import { useEffect } from "react"
+import { Editor, TLEventMap, TLFrameShape, TLParentId } from "tldraw"
+import { useSearchParams } from "react-router-dom"
+
+// Define camera state interface
+interface CameraState {
+  x: number
+  y: number
+  z: number
+}
+
+const MAX_HISTORY = 10
+let cameraHistory: CameraState[] = []
+
+// TODO: use this
+
+// Improved camera change tracking with debouncing
+const trackCameraChange = (editor: Editor) => {
+  const currentCamera = editor.getCamera()
+  const lastPosition = cameraHistory[cameraHistory.length - 1]
+
+  // Store any viewport change that's not from a revert operation
+  if (
+    !lastPosition ||
+    currentCamera.x !== lastPosition.x ||
+    currentCamera.y !== lastPosition.y ||
+    currentCamera.z !== lastPosition.z
+  ) {
+    cameraHistory.push({ ...currentCamera })
+    if (cameraHistory.length > MAX_HISTORY) {
+      cameraHistory.shift()
+    }
+  }
+}
+
+export function useCameraControls(editor: Editor | null) {
+  const [searchParams] = useSearchParams()
+
+  // Handle URL-based camera positioning
+  useEffect(() => {
+    if (!editor) return
+
+    const frameId = searchParams.get("frameId")
+    const x = searchParams.get("x")
+    const y = searchParams.get("y")
+    const zoom = searchParams.get("zoom")
+
+    if (x && y && zoom) {
+      editor.setCamera({
+        x: parseFloat(x),
+        y: parseFloat(y),
+        z: parseFloat(zoom),
+      })
+      return
+    }
+
+    if (frameId) {
+      const frame = editor.getShape(frameId as TLParentId) as TLFrameShape
+      if (!frame) {
+        console.warn("Frame not found:", frameId)
+        return
+      }
+
+      // Use editor's built-in zoomToBounds with animation
+      editor.zoomToBounds(editor.getShapePageBounds(frame)!, {
+        inset: 32,
+        animation: { duration: 500 },
+      })
+    }
+  }, [editor, searchParams])
+
+  // Track camera changes
+  useEffect(() => {
+    if (!editor) return
+
+    const handler = () => {
+      trackCameraChange(editor)
+    }
+
+    // Track both viewport changes and user interaction end
+    editor.on("viewportChange" as keyof TLEventMap, handler)
+    editor.on("userChangeEnd" as keyof TLEventMap, handler)
+
+    return () => {
+      editor.off("viewportChange" as keyof TLEventMap, handler)
+      editor.off("userChangeEnd" as keyof TLEventMap, handler)
+    }
+  }, [editor])
+
+  // Enhanced camera control functions
+  return {
+    zoomToFrame: (frameId: string) => {
+      if (!editor) return
+      const frame = editor.getShape(frameId as TLParentId) as TLFrameShape
+      if (!frame) return
+
+      editor.zoomToBounds(editor.getShapePageBounds(frame)!, {
+        inset: 32,
+        animation: { duration: 500 },
+      })
+    },
+
+    copyFrameLink: (frameId: string) => {
+      const url = new URL(window.location.href)
+      url.searchParams.set("frameId", frameId)
+      navigator.clipboard.writeText(url.toString())
+    },
+
+    copyLocationLink: () => {
+      if (!editor) return
+      const camera = editor.getCamera()
+      const url = new URL(window.location.href)
+      url.searchParams.set("x", camera.x.toString())
+      url.searchParams.set("y", camera.y.toString())
+      url.searchParams.set("zoom", camera.z.toString())
+      navigator.clipboard.writeText(url.toString())
+    },
+
+    revertCamera: () => {
+      if (!editor || cameraHistory.length === 0) return
+      const previousCamera = cameraHistory.pop()
+      if (previousCamera) {
+        editor.setCamera(previousCamera, { animation: { duration: 200 } })
+      }
+    },
+  }
+}
--- a/src/routes/Board.tsx
+++ b/src/routes/Board.tsx
@ -0,0 +1,62 @@
+import { useSync } from "@tldraw/sync"
+import { useMemo } from "react"
+import { Tldraw, Editor } from "tldraw"
+import { useParams } from "react-router-dom"
+import { ChatBoxTool } from "@/tools/ChatBoxTool"
+import { ChatBoxShape } from "@/shapes/ChatBoxShapeUtil"
+import { VideoChatTool } from "@/tools/VideoChatTool"
+import { VideoChatShape } from "@/shapes/VideoChatShapeUtil"
+import { multiplayerAssetStore } from "../utils/multiplayerAssetStore"
+import { EmbedShape } from "@/shapes/EmbedShapeUtil"
+import { EmbedTool } from "@/tools/EmbedTool"
+import { MarkdownShape } from "@/shapes/MarkdownShapeUtil"
+import { MarkdownTool } from "@/tools/MarkdownTool"
+import { defaultShapeUtils, defaultBindingUtils } from "tldraw"
+import { useState } from "react"
+import { components } from "@/ui/components"
+import { overrides } from "@/ui/overrides"
+import { unfurlBookmarkUrl } from "../utils/unfurlBookmarkUrl"
+import { handleInitialPageLoad } from "@/utils/handleInitialPageLoad"
+
+// Default to production URL if env var isn't available
+export const WORKER_URL = "https://jeffemmett-canvas.jeffemmett.workers.dev"
+
+const shapeUtils = [ChatBoxShape, VideoChatShape, EmbedShape, MarkdownShape]
+const tools = [ChatBoxTool, VideoChatTool, EmbedTool, MarkdownTool] // Array of tools
+
+export function Board() {
+  const { slug } = useParams<{ slug: string }>()
+  const roomId = slug || "default-room"
+
+  const storeConfig = useMemo(
+    () => ({
+      uri: `${WORKER_URL}/connect/${roomId}`,
+      assets: multiplayerAssetStore,
+      shapeUtils: [...shapeUtils, ...defaultShapeUtils],
+      bindingUtils: [...defaultBindingUtils],
+    }),
+    [roomId],
+  )
+
+  const store = useSync(storeConfig)
+  const [editor, setEditor] = useState<Editor | null>(null)
+
+  return (
+    <div style={{ position: "fixed", inset: 0 }}>
+      <Tldraw
+        store={store.store}
+        shapeUtils={shapeUtils}
+        tools={tools}
+        components={components}
+        overrides={overrides}
+        //maxZoom={20}
+        onMount={(editor) => {
+          setEditor(editor)
+          editor.registerExternalAssetHandler("url", unfurlBookmarkUrl)
+          editor.setCurrentTool("hand")
+          handleInitialPageLoad(editor)
+        }}
+      />
+    </div>
+  )
+}
--- a/src/routes/Contact.tsx
+++ b/src/routes/Contact.tsx
@ -0,0 +1,29 @@
+export function Contact() {
+  return (
+    <main>
+      <header>
+        <a href="/">Jeff Emmett</a>
+      </header>
+      <h1>Contact</h1>
+      <p>
+        Twitter: <a href="https://twitter.com/jeffemmett">@jeffemmett</a>
+      </p>
+      <p>
+        BlueSky:{" "}
+        <a href="https://bsky.app/profile/jeffemmett.bsky.social">
+          @jeffemnmett.bsky.social
+        </a>
+      </p>
+      <p>
+        Mastodon:{" "}
+        <a href="https://social.coop/@jeffemmett">@jeffemmett@social.coop</a>
+      </p>
+      <p>
+        Email: <a href="mailto:jeffemmett@gmail.com">jeffemmett@gmail.com</a>
+      </p>
+      <p>
+        GitHub: <a href="https://github.com/Jeff-Emmett">Jeff-Emmett</a>
+      </p>
+    </main>
+  )
+}
--- a/src/routes/Default.tsx
+++ b/src/routes/Default.tsx
@ -0,0 +1,106 @@
+export function Default() {
+  return (
+    <main>
+      <header>Jeff Emmett</header>
+      <h2>Hello! 👋🍄</h2>
+      <p>
+        My research investigates the intersection of mycelium and emancipatory
+        technologies. I am interested in the potential of new convivial tooling
+        as a medium for group consensus building and collective action, in order
+        to empower communities of practice to address their own challenges.
+      </p>
+
+      <p>
+        My current focus is basic research into the nature of digital
+        organisation, developing prototype toolkits to improve shared
+        infrastructure, and applying this research to the design of new systems
+        and protocols which support the self-organisation of knowledge and
+        emergent response to local needs.
+      </p>
+
+      <h2>My work</h2>
+      <p>
+        Alongside my independent work, I am a researcher and engineering
+        communicator at <a href="https://block.science/">Block Science</a>, an
+        advisor to the Active Inference Lab, Commons Stack, and the Trusted
+        Seed. I am also an occasional collaborator with{" "}
+        <a href="https://economicspace.agency/">ECSA</a>.
+      </p>
+
+      <h2>Get in touch</h2>
+      <p>
+        I am on Twitter <a href="https://twitter.com/jeffemmett">@jeffemmett</a>
+        , Mastodon{" "}
+        <a href="https://social.coop/@jeffemmett">@jeffemmett@social.coop</a>{" "}
+        and GitHub <a href="https://github.com/Jeff-Emmett">@Jeff-Emmett</a>.
+      </p>
+
+      <span className="dinkus">***</span>
+
+      <h2>Talks</h2>
+      <ol reversed>
+        <li>
+          <a href="https://www.teamhuman.fm/episodes/238-jeff-emmett">
+            MycoPunk Futures on Team Human with Douglas Rushkoff
+          </a>{" "}
+          (<a href="artifact/tft-rocks-integration-domain.pdf">slides</a>)
+        </li>
+        <li>
+          <a href="https://www.youtube.com/watch?v=AFJFDajuCSg">
+            Exploring MycoFi on the Greenpill Network with Kevin Owocki
+          </a>{" "}
+          (<a href="artifact/tft-rocks-integration-domain.pdf">slides</a>)
+        </li>
+        <li>
+          <a href="https://youtu.be/9ad2EJhMbZ8">
+            Re-imagining Human Value on the Telos Podcast with Rieki &
+            Brandonfrom SEEDS
+          </a>{" "}
+          (<a href="artifact/tft-rocks-integration-domain.pdf">slides</a>)
+        </li>
+        <li>
+          <a href="https://www.youtube.com/watch?v=i8qcg7FfpLM&t=1348s">
+            Move Slow & Fix Things: Design Patterns from Nature
+          </a>{" "}
+          (<a href="artifact/tft-rocks-integration-domain.pdf">slides</a>)
+        </li>
+        <li>
+          <a href="https://podcasters.spotify.com/pod/show/theownershipeconomy/episodes/Episode-009---Localized-Democracy-and-Public-Goods-with-Token-Engineering--with-Jeff-Emmett-of-The-Commons-Stack--BlockScience-Labs-e1ggkqo">
+            Localized Democracy and Public Goods with Token Engineering on the
+            Ownership Economy
+          </a>{" "}
+          (<a href="artifact/tft-rocks-integration-domain.pdf">slides</a>)
+        </li>
+        <li>
+          <a href="https://youtu.be/kxcat-XBWas">
+            A Discussion on Warm Data with Nora Bateson on Systems Innovation
+          </a>
+        </li>
+      </ol>
+      <h2>Writing</h2>
+      <ol reversed>
+        <li>
+          <a href="https://www.mycofi.art">
+            Exploring MycoFi: Mycelial Design Patterns for Web3 & Beyond
+          </a>
+        </li>
+        <li>
+          <a href="https://www.frontiersin.org/journals/blockchain/articles/10.3389/fbloc.2021.578721/full">
+            Challenges & Approaches to Scaling the Global Commons
+          </a>
+        </li>
+        <li>
+          <a href="https://allthingsdecent.substack.com/p/mycoeconomics-and-permaculture-currencies">
+            From Monoculture to Permaculture Currencies: A Glimpse of the
+            Myco-Economic Future
+          </a>
+        </li>
+        <li>
+          <a href="https://medium.com/good-audience/rewriting-the-story-of-human-collaboration-c33a8a4cd5b8">
+            Rewriting the Story of Human Collaboration
+          </a>
+        </li>
+      </ol>
+    </main>
+  )
+}
--- a/src/routes/Inbox.tsx
+++ b/src/routes/Inbox.tsx
@ -0,0 +1,88 @@
+import {
+  createShapeId,
+  Editor,
+  Tldraw,
+  TLGeoShape,
+  TLShapePartial,
+} from "tldraw"
+import { useEffect, useRef } from "react"
+
+export function Inbox() {
+  const editorRef = useRef<Editor | null>(null)
+
+  const updateEmails = async (editor: Editor) => {
+    try {
+      const response = await fetch("https://jeffemmett-canvas.web.val.run", {
+        method: "GET",
+      })
+      const messages = (await response.json()) as {
+        id: string
+        from: string
+        subject: string
+        text: string
+      }[]
+
+      for (let i = 0; i < messages.length; i++) {
+        const message = messages[i]
+        const messageId = message.id
+        const parsedEmailName =
+          message.from.match(/^([^<]+)/)?.[1]?.trim() ||
+          message.from.match(/[^<@]+(?=@)/)?.[0] ||
+          message.from
+        const messageText = `from: ${parsedEmailName}\nsubject: ${message.subject}\n\n${message.text}`
+        const shapeWidth = 500
+        const shapeHeight = 300
+        const spacing = 50
+        const shape: TLShapePartial<TLGeoShape> = {
+          id: createShapeId(),
+          type: "geo",
+          x: shapeWidth * (i % 5) + spacing * (i % 5),
+          y: shapeHeight * Math.floor(i / 5) + spacing * Math.floor(i / 5),
+          props: {
+            w: shapeWidth,
+            h: shapeHeight,
+            text: messageText,
+            align: "start",
+            verticalAlign: "start",
+          },
+          meta: {
+            id: messageId,
+          },
+        }
+        let found = false
+        for (const s of editor.getCurrentPageShapes()) {
+          if (s.meta.id === messageId) {
+            found = true
+            break
+          }
+        }
+        if (!found) {
+          editor.createShape(shape)
+        }
+      }
+    } catch (error) {
+      console.error("Error fetching data:", error)
+    }
+  }
+
+  useEffect(() => {
+    const intervalId = setInterval(() => {
+      if (editorRef.current) {
+        updateEmails(editorRef.current)
+      }
+    }, 5 * 1000)
+
+    return () => clearInterval(intervalId)
+  }, [])
+
+  return (
+    <div className="tldraw__editor">
+      <Tldraw
+        onMount={(editor: Editor) => {
+          editorRef.current = editor
+          updateEmails(editor)
+        }}
+      />
+    </div>
+  )
+}
--- a/src/shapes/.OAuth-Instructions.md
+++ b/src/shapes/.OAuth-Instructions.md
@ -0,0 +1,153 @@
+
+Yes, it is possible to allow users of your website to render their own Google Docs securely, but it requires additional steps to ensure privacy, user authentication, and proper permissions. Here's how you can set it up:
+
+---
+
+### Steps to Enable Users to Render Their Own Google Docs
+
+#### 1. Enable Google Sign-In for Your Website
+   - Users need to authenticate with their Google account to grant your app access to their documents.
+   - Use the [Google Sign-In library](https://developers.google.com/identity/sign-in/web) to implement OAuth authentication.
+
+   Steps:
+   - Include the Google Sign-In button on your site:
+          <script src="https://apis.google.com/js/platform.js" async defer></script>
+     <meta name="google-signin-client_id" content="YOUR_CLIENT_ID.apps.googleusercontent.com">
+     <div class="g-signin2" data-onsuccess="onSignIn"></div>
+     
+
+   - Handle the user's authentication token on sign-in:
+          function onSignIn(googleUser) {
+         var profile = googleUser.getBasicProfile();
+         var idToken = googleUser.getAuthResponse().id_token;
+
+         // Send the token to your backend to authenticate and fetch user-specific documents
+         fetch('/api/authenticate', {
+             method: 'POST',
+             headers: { 'Content-Type': 'application/json' },
+             body: JSON.stringify({ token: idToken }),
+         }).then(response => response.json())
+           .then(data => console.log(data));
+     }
+     
+
+---
+
+#### 2. Request Google Docs API Permissions
+   - Once the user is authenticated, request permissions for the Google Docs API.
+   - Scopes needed:
+     
+     https://www.googleapis.com/auth/documents.readonly
+     
+
+   - Example request for API access:
+          function requestDocsAccess() {
+         gapi.auth2.getAuthInstance().signIn({
+             scope: 'https://www.googleapis.com/auth/documents.readonly',
+         }).then(() => {
+             console.log('API access granted');
+         });
+     }
+     
+
+---
+
+#### 3. Fetch User's Document Content
+   - After receiving user authorization, fetch their document content using the Google Docs API.
+   - Example using JavaScript:
+          gapi.client.load('docs', 'v1', function () {
+         var request = gapi.client.docs.documents.get({
+             documentId: 'USER_DOCUMENT_ID',
+         });
+
+         request.execute(function (response) {
+             console.log(response);
+             // Render document content on your website
+             document.getElementById('doc-container').innerHTML = response.body.content.map(
+                 item => item.paragraph.elements.map(
+                     el => el.textRun.content
+                 ).join('')
+             ).join('<br>');
+         });
+     });
+     
+
+   - Ensure that USER_DOCUMENT_ID is input by the user (e.g., through a form field).
+
+---
+
+#### 4. Secure Your Backend
+   - Create an API endpoint to handle requests for fetching document content.
+   - Validate the user's Google token on your server using Google's token verification endpoint.
+   - Use their authenticated token to call the Google Docs API and fetch the requested document.
+
+   Example in Python (using Flask):
+      from google.oauth2 import id_token
+   from google.auth.transport import requests
+   from googleapiclient.discovery import build
+
+   @app.route('/api/fetch-doc', methods=['POST'])
+   def fetch_doc():
+       token = request.json.get('token')
+       document_id = request.json.get('document_id')
+
+       # Verify token
+       idinfo = id_token.verify_oauth2_token(token, requests.Request(), CLIENT_ID)
+       if idinfo['iss'] not in ['accounts.google.com', 'https://accounts.google.com']:
+           return 'Invalid token', 401
+
+       # Fetch the document
+       creds = id_token.Credentials(token=token)
+       service = build('docs', 'v1', credentials=creds)
+       doc = service.documents().get(documentId=document_id).execute()
+
+       return jsonify(doc)
+       
+   
+
+---
+
+rohan mehta, [2024-11-21 4:42 PM]
+#### 5. Provide a Frontend UI
+   - Allow users to input their Google Doc ID through a form.
+   - Example:
+          <input type="text" id="doc-id" placeholder="Enter your Google Doc ID">
+     <button onclick="fetchDoc()">Render Doc</button>
+     <div id="doc-container"></div>
+     
+
+   - JavaScript to send the document ID to your backend:
+          function fetchDoc() {
+         const docId = document.getElementById('doc-id').value;
+
+         fetch('/api/fetch-doc', {
+             method: 'POST',
+             headers: { 'Content-Type': 'application/json' },
+             body: JSON.stringify({ token: userToken, document_id: docId }),
+         })
+         .then(response => response.json())
+         .then(data => {
+             document.getElementById('doc-container').innerHTML = JSON.stringify(data);
+         });
+     }
+     
+
+---
+
+### Security and Privacy Considerations
+1. Authentication:
+   - Verify each user's Google token before processing their request.
+   - Only fetch documents they own or have shared with them.
+
+2. Rate Limiting:
+   - Implement rate limiting on your backend API to prevent abuse.
+
+3. Permission Scope:
+   - Use the minimal scope (documents.readonly) to ensure you can only read documents, not modify them.
+
+4. Data Handling:
+   - Never store user document content unless explicitly required and with user consent.
+
+---
+
+With this approach, each user will be able to render their own Google Docs securely while maintaining privacy. Let me know if you’d like a more detailed implementation in any specific programming language!
--- a/src/shapes/ChatBoxShapeUtil.tsx
+++ b/src/shapes/ChatBoxShapeUtil.tsx
@ -0,0 +1,191 @@
+import { useEffect, useRef, useState } from "react"
+import { BaseBoxShapeUtil, TLBaseShape } from "tldraw"
+
+export type IChatBoxShape = TLBaseShape<
+  "ChatBox",
+  {
+    w: number
+    h: number
+    roomId: string
+    userName: string
+  }
+>
+
+export class ChatBoxShape extends BaseBoxShapeUtil<IChatBoxShape> {
+  static override type = "ChatBox"
+
+  getDefaultProps(): IChatBoxShape["props"] {
+    return {
+      roomId: "default-room",
+      w: 100,
+      h: 100,
+      userName: "",
+    }
+  }
+
+  indicator(shape: IChatBoxShape) {
+    return <rect x={0} y={0} width={shape.props.w} height={shape.props.h} />
+  }
+
+  component(shape: IChatBoxShape) {
+    return (
+      <ChatBox
+        roomId={shape.props.roomId}
+        w={shape.props.w}
+        h={shape.props.h}
+        userName=""
+      />
+    )
+  }
+}
+
+interface Message {
+  id: string
+  username: string
+  content: string
+  timestamp: Date
+}
+
+// Update the ChatBox component to accept userName
+export const ChatBox: React.FC<IChatBoxShape["props"]> = ({
+  roomId,
+  w,
+  h,
+  userName,
+}) => {
+  const [messages, setMessages] = useState<Message[]>([])
+  const [inputMessage, setInputMessage] = useState("")
+  const [username, setUsername] = useState(userName)
+  const messagesEndRef = useRef(null)
+
+  useEffect(() => {
+    const storedUsername = localStorage.getItem("chatUsername")
+    if (storedUsername) {
+      setUsername(storedUsername)
+    } else {
+      const newUsername = `User${Math.floor(Math.random() * 1000)}`
+      setUsername(newUsername)
+      localStorage.setItem("chatUsername", newUsername)
+    }
+    fetchMessages(roomId)
+    const interval = setInterval(() => fetchMessages(roomId), 2000)
+
+    return () => clearInterval(interval)
+  }, [roomId])
+
+  useEffect(() => {
+    if (messagesEndRef.current) {
+      ;(messagesEndRef.current as HTMLElement).scrollIntoView({
+        behavior: "smooth",
+      })
+    }
+  }, [messages])
+
+  const fetchMessages = async (roomId: string) => {
+    try {
+      const response = await fetch(
+        `https://jeffemmett-realtimechatappwithpolling.web.val.run?action=getMessages&roomId=${roomId}`,
+      )
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`)
+      }
+      const newMessages = (await response.json()) as Message[]
+      setMessages(
+        newMessages.map((msg) => ({
+          ...msg,
+          timestamp: new Date(msg.timestamp),
+        })),
+      )
+    } catch (error) {
+      console.error("Error fetching messages:", error)
+    }
+  }
+
+  const sendMessage = async (e: React.FormEvent) => {
+    e.preventDefault()
+    if (!inputMessage.trim()) return
+    await sendMessageToChat(roomId, username, inputMessage)
+    setInputMessage("")
+    fetchMessages(roomId)
+  }
+
+  return (
+    <div
+      className="chat-container"
+      style={{
+        pointerEvents: "all",
+        width: `${w}px`,
+        height: `${h}px`,
+        overflow: "auto",
+        touchAction: "auto",
+      }}
+    >
+      <div className="messages-container">
+        {messages.map((msg) => (
+          <div
+            key={msg.id}
+            className={`message ${
+              msg.username === username ? "own-message" : ""
+            }`}
+          >
+            <div className="message-header">
+              <strong>{msg.username}</strong>
+              <span className="timestamp">
+                {new Date(msg.timestamp).toLocaleTimeString()}
+              </span>
+            </div>
+            <div className="message-content">{msg.content}</div>
+          </div>
+        ))}
+        <div ref={messagesEndRef} />
+      </div>
+      <form onSubmit={sendMessage} className="input-form">
+        <input
+          type="text"
+          value={inputMessage}
+          onChange={(e) => setInputMessage(e.target.value)}
+          placeholder="Type a message..."
+          className="message-input"
+          style={{ touchAction: "manipulation" }}
+        />
+        <button
+          type="submit"
+          style={{ pointerEvents: "all", touchAction: "manipulation" }}
+          onPointerDown={(e) => e.stopPropagation()}
+          onTouchStart={(e) => e.stopPropagation()}
+          className="send-button"
+        >
+          Send
+        </button>
+      </form>
+    </div>
+  )
+}
+
+async function sendMessageToChat(
+  roomId: string,
+  username: string,
+  content: string,
+): Promise<void> {
+  const apiUrl = "https://jeffemmett-realtimechatappwithpolling.web.val.run" // Replace with your actual Val Town URL
+
+  try {
+    const response = await fetch(`${apiUrl}?action=sendMessage`, {
+      method: "POST",
+      mode: "no-cors",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        roomId,
+        username,
+        content,
+      }),
+    })
+
+    const result = await response.text()
+    console.log("Message sent successfully:", result)
+  } catch (error) {
+    console.error("Error sending message:", error)
+  }
+}
--- a/src/shapes/EmbedShapeUtil.tsx
+++ b/src/shapes/EmbedShapeUtil.tsx
@ -0,0 +1,165 @@
+import { BaseBoxShapeUtil, TLBaseShape } from "tldraw"
+import { useCallback, useState } from "react"
+
+export type IEmbedShape = TLBaseShape<
+  "Embed",
+  {
+    w: number
+    h: number
+    url: string | null
+  }
+>
+
+export class EmbedShape extends BaseBoxShapeUtil<IEmbedShape> {
+  static override type = "Embed"
+
+  getDefaultProps(): IEmbedShape["props"] {
+    return {
+      url: null,
+      w: 640,
+      h: 480,
+    }
+  }
+
+  indicator(shape: IEmbedShape) {
+    return (
+      <g>
+        <rect x={0} y={0} width={shape.props.w} height={shape.props.h} />
+      </g>
+    )
+  }
+
+  component(shape: IEmbedShape) {
+    const [inputUrl, setInputUrl] = useState(shape.props.url || "")
+    const [error, setError] = useState("")
+
+    const handleSubmit = useCallback(
+      (e: React.FormEvent) => {
+        e.preventDefault()
+        let completedUrl =
+          inputUrl.startsWith("http://") || inputUrl.startsWith("https://")
+            ? inputUrl
+            : `https://${inputUrl}`
+
+        // Handle YouTube links
+        if (
+          completedUrl.includes("youtube.com") ||
+          completedUrl.includes("youtu.be")
+        ) {
+          const videoId = extractYouTubeVideoId(completedUrl)
+          if (videoId) {
+            completedUrl = `https://www.youtube.com/embed/${videoId}`
+          } else {
+            setError("Invalid YouTube URL")
+            return
+          }
+        }
+
+        // Handle Google Docs links
+        if (completedUrl.includes("docs.google.com")) {
+          const docId = completedUrl.match(/\/d\/([a-zA-Z0-9-_]+)/)?.[1]
+          if (docId) {
+            completedUrl = `https://docs.google.com/document/d/${docId}/preview`
+          } else {
+            setError("Invalid Google Docs URL")
+            return
+          }
+        }
+
+        this.editor.updateShape<IEmbedShape>({
+          id: shape.id,
+          type: "Embed",
+          props: { ...shape.props, url: completedUrl },
+        })
+
+        // Check if the URL is valid
+        const isValidUrl = completedUrl.match(/(^\w+:|^)\/\//)
+        if (!isValidUrl) {
+          setError("Invalid website URL")
+        } else {
+          setError("")
+        }
+      },
+      [inputUrl],
+    )
+
+    const extractYouTubeVideoId = (url: string): string | null => {
+      const regExp =
+        /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/
+      const match = url.match(regExp)
+      return match && match[2].length === 11 ? match[2] : null
+    }
+
+    const wrapperStyle = {
+      width: `${shape.props.w}px`,
+      height: `${shape.props.h}px`,
+      padding: "15px",
+      boxShadow: "0 2px 4px rgba(0, 0, 0, 0.1)",
+      backgroundColor: "#F0F0F0",
+      borderRadius: "4px",
+    }
+
+    const contentStyle = {
+      pointerEvents: "all" as const,
+      width: "100%",
+      height: "100%",
+      border: "1px solid #D3D3D3",
+      backgroundColor: "#FFFFFF",
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      overflow: "hidden",
+    }
+
+    if (!shape.props.url) {
+      return (
+        <div style={wrapperStyle}>
+          <div
+            style={contentStyle}
+            onClick={() => document.querySelector("input")?.focus()}
+          >
+            <form
+              onSubmit={handleSubmit}
+              style={{ width: "100%", height: "100%", padding: "10px" }}
+            >
+              <input
+                type="text"
+                value={inputUrl}
+                onChange={(e) => setInputUrl(e.target.value)}
+                placeholder="Enter URL"
+                style={{
+                  width: "100%",
+                  height: "100%",
+                  border: "none",
+                  padding: "10px",
+                }}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter") {
+                    handleSubmit(e)
+                  }
+                }}
+              />
+              {error && (
+                <div style={{ color: "red", marginTop: "10px" }}>{error}</div>
+              )}
+            </form>
+          </div>
+        </div>
+      )
+    }
+
+    return (
+      <div style={wrapperStyle}>
+        <div style={contentStyle}>
+          <iframe
+            src={shape.props.url}
+            width="100%"
+            height="100%"
+            style={{ border: "none" }}
+            allowFullScreen
+          />
+        </div>
+      </div>
+    )
+  }
+}
--- a/src/shapes/MarkdownShapeUtil.tsx
+++ b/src/shapes/MarkdownShapeUtil.tsx
@ -0,0 +1,164 @@
+import { BaseBoxShapeUtil, TLBaseBoxShape, TLBaseShape } from "tldraw"
+import ReactMarkdown from "react-markdown"
+import { useCallback, useState, useEffect } from "react"
+
+export type IMarkdownShape = TLBaseShape<
+  "markdown",
+  {
+    content: string
+    w: number
+    h: number
+    isEditing: boolean
+    fill: string
+    color: string
+  }
+>
+
+export class MarkdownShape extends BaseBoxShapeUtil<
+  IMarkdownShape & TLBaseBoxShape
+> {
+  static override type = "Markdown"
+  static override props = {
+    content: {
+      type: "string",
+      value: "# New Note",
+      validate: (value: unknown) => typeof value === "string",
+    },
+    w: {
+      type: "number",
+      value: 400,
+      validate: (value: unknown) => typeof value === "number",
+    },
+    h: {
+      type: "number",
+      value: 300,
+      validate: (value: unknown) => typeof value === "number",
+    },
+    isEditing: {
+      type: "boolean",
+      value: false,
+      validate: (value: unknown) => typeof value === "boolean",
+    },
+    fill: {
+      type: "string",
+      value: "white",
+      validate: (value: unknown) => typeof value === "string",
+    },
+    color: {
+      type: "string",
+      value: "black",
+      validate: (value: unknown) => typeof value === "string",
+    },
+  }
+
+  override getDefaultProps(): IMarkdownShape["props"] &
+    TLBaseBoxShape["props"] {
+    return {
+      w: 400,
+      h: 300,
+      content: "# New Note",
+      isEditing: false,
+      fill: "white",
+      color: "black",
+    }
+  }
+
+  getStyleProps(shape: IMarkdownShape) {
+    return {
+      fill: shape.props.fill,
+      color: shape.props.color,
+    }
+  }
+
+  override indicator(shape: IMarkdownShape & TLBaseBoxShape) {
+    return {
+      x: shape.x,
+      y: shape.y,
+      width: shape.props.w,
+      height: shape.props.h,
+      rotation: shape.rotation,
+    }
+  }
+
+  component(shape: IMarkdownShape & TLBaseBoxShape) {
+    const [isEditing, setIsEditing] = useState(shape.props.isEditing)
+
+    const handleChange = useCallback(
+      (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+        this.editor?.updateShape({
+          id: shape.id,
+          type: "markdown",
+          props: {
+            ...shape.props,
+            content: e.target.value,
+          },
+        })
+      },
+      [shape.id],
+    )
+
+    const toggleEdit = useCallback(() => {
+      setIsEditing(!isEditing)
+      this.editor?.updateShape({
+        id: shape.id,
+        type: "markdown",
+        props: {
+          ...shape.props,
+          isEditing: !isEditing,
+        },
+      })
+    }, [isEditing, shape.id, shape.props])
+
+    useEffect(() => {
+      return () => {
+        if (isEditing) {
+          this.editor?.updateShape({
+            id: shape.id,
+            type: "markdown",
+            props: {
+              ...shape.props,
+              isEditing: false,
+            },
+          })
+        }
+      }
+    }, [shape.id, isEditing])
+
+    return (
+      <div
+        style={{
+          width: "100%",
+          height: "100%",
+          position: "relative",
+          background: "white",
+          borderRadius: "4px",
+          padding: "8px",
+          overflow: "auto",
+          cursor: "pointer",
+        }}
+        onDoubleClick={toggleEdit}
+      >
+        {isEditing ? (
+          <textarea
+            value={shape.props.content}
+            onChange={handleChange}
+            style={{
+              width: "100%",
+              height: "100%",
+              border: "none",
+              outline: "none",
+              resize: "none",
+              fontFamily: "inherit",
+              fontSize: "inherit",
+              backgroundColor: "transparent",
+            }}
+            autoFocus
+            onBlur={toggleEdit}
+          />
+        ) : (
+          <ReactMarkdown>{shape.props.content}</ReactMarkdown>
+        )}
+      </div>
+    )
+  }
+}
--- a/src/shapes/VideoChatShapeUtil.tsx
+++ b/src/shapes/VideoChatShapeUtil.tsx
@ -0,0 +1,124 @@
+import { BaseBoxShapeUtil, TLBaseShape } from "tldraw"
+import { useEffect, useState } from "react"
+import { WORKER_URL } from "../routes/Board"
+
+export type IVideoChatShape = TLBaseShape<
+  "VideoChat",
+  {
+    w: number
+    h: number
+    roomUrl: string | null
+    userName: string
+  }
+>
+
+export class VideoChatShape extends BaseBoxShapeUtil<IVideoChatShape> {
+  static override type = "VideoChat"
+
+  indicator(_shape: IVideoChatShape) {
+    return null
+  }
+
+  getDefaultProps(): IVideoChatShape["props"] {
+    return {
+      roomUrl: null,
+      w: 640,
+      h: 480,
+      userName: "",
+    }
+  }
+
+  async ensureRoomExists(shape: IVideoChatShape) {
+    if (shape.props.roomUrl !== null) {
+      return
+    }
+
+    const response = await fetch(`${WORKER_URL}/daily/rooms`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        properties: {
+          enable_recording: true,
+          max_participants: 8,
+        },
+      }),
+    })
+
+    const data = await response.json()
+
+    this.editor.updateShape<IVideoChatShape>({
+      id: shape.id,
+      type: "VideoChat",
+      props: {
+        ...shape.props,
+        roomUrl: (data as any).url,
+      },
+    })
+  }
+
+  component(shape: IVideoChatShape) {
+    const [isInRoom, setIsInRoom] = useState(false)
+    const [error, setError] = useState("")
+    const [isLoading, setIsLoading] = useState(false)
+
+    useEffect(() => {
+      if (isInRoom && shape.props.roomUrl) {
+        const script = document.createElement("script")
+        script.src = "https://www.daily.co/static/call-machine.js"
+        document.body.appendChild(script)
+
+        script.onload = () => {
+          // @ts-ignore
+          window.DailyIframe.createFrame({
+            iframeStyle: {
+              width: "100%",
+              height: "100%",
+              border: "0",
+              borderRadius: "4px",
+            },
+            showLeaveButton: true,
+            showFullscreenButton: true,
+          }).join({ url: shape.props.roomUrl })
+        }
+      }
+    }, [isInRoom, shape.props.roomUrl])
+
+    return (
+      <div
+        style={{
+          pointerEvents: "all",
+          width: `${shape.props.w}px`,
+          height: `${shape.props.h}px`,
+          position: "absolute",
+          top: "10px",
+          left: "10px",
+          zIndex: 9999,
+          padding: "15px",
+          backgroundColor: "#F0F0F0",
+          boxShadow: "0 2px 4px rgba(0, 0, 0, 0.1)",
+          borderRadius: "4px",
+        }}
+      >
+        {!isInRoom ? (
+          <button
+            onClick={() => setIsInRoom(true)}
+            className="bg-blue-500 text-white px-4 py-2 rounded"
+          >
+            Join Room
+          </button>
+        ) : (
+          <div
+            id="daily-call-iframe-container"
+            style={{
+              width: "100%",
+              height: "100%",
+            }}
+          />
+        )}
+        {error && <p className="text-red-500 mt-2">{error}</p>}
+      </div>
+    )
+  }
+}
--- a/src/snapshot.json
+++ b/src/snapshot.json
@ -0,0 +1,210 @@
+{
+	"store": {
+		"document:document": {
+			"gridSize": 10,
+			"name": "",
+			"meta": {},
+			"id": "document:document",
+			"typeName": "document"
+		},
+		"page:page": {
+			"meta": {},
+			"id": "page:page",
+			"name": "Page 1",
+			"index": "a1",
+			"typeName": "page"
+		},
+		"shape:f4LKGB_8M2qsyWGpHR5Dq": {
+			"x": 30.9375,
+			"y": 69.48828125,
+			"rotation": 0,
+			"isLocked": false,
+			"opacity": 1,
+			"meta": {},
+			"id": "shape:f4LKGB_8M2qsyWGpHR5Dq",
+			"type": "container",
+			"parentId": "page:page",
+			"index": "a1",
+			"props": {
+				"width": 644,
+				"height": 148
+			},
+			"typeName": "shape"
+		},
+		"shape:2oThF4kJ4v31xqKN5lvq2": {
+			"x": 550.9375,
+			"y": 93.48828125,
+			"rotation": 0,
+			"isLocked": false,
+			"opacity": 1,
+			"meta": {},
+			"id": "shape:2oThF4kJ4v31xqKN5lvq2",
+			"type": "element",
+			"props": {
+				"color": "#5BCEFA"
+			},
+			"parentId": "page:page",
+			"index": "a2",
+			"typeName": "shape"
+		},
+		"shape:K2vk_VTaNh-ANaRNOAvgY": {
+			"x": 426.9375,
+			"y": 93.48828125,
+			"rotation": 0,
+			"isLocked": false,
+			"opacity": 1,
+			"meta": {},
+			"id": "shape:K2vk_VTaNh-ANaRNOAvgY",
+			"type": "element",
+			"props": {
+				"color": "#F5A9B8"
+			},
+			"parentId": "page:page",
+			"index": "a3",
+			"typeName": "shape"
+		},
+		"shape:6uouhIK7PvyIRNQHACf-d": {
+			"x": 302.9375,
+			"y": 93.48828125,
+			"rotation": 0,
+			"isLocked": false,
+			"opacity": 1,
+			"meta": {},
+			"id": "shape:6uouhIK7PvyIRNQHACf-d",
+			"type": "element",
+			"props": {
+				"color": "#FFFFFF"
+			},
+			"parentId": "page:page",
+			"index": "a4",
+			"typeName": "shape"
+		},
+		"shape:GTQq2qxkWPHEK7KMIRtsh": {
+			"x": 54.9375,
+			"y": 93.48828125,
+			"rotation": 0,
+			"isLocked": false,
+			"opacity": 1,
+			"meta": {},
+			"id": "shape:GTQq2qxkWPHEK7KMIRtsh",
+			"type": "element",
+			"props": {
+				"color": "#5BCEFA"
+			},
+			"parentId": "page:page",
+			"index": "a5",
+			"typeName": "shape"
+		},
+		"shape:05jMujN6A0sIp6zzHMpbV": {
+			"x": 178.9375,
+			"y": 93.48828125,
+			"rotation": 0,
+			"isLocked": false,
+			"opacity": 1,
+			"meta": {},
+			"id": "shape:05jMujN6A0sIp6zzHMpbV",
+			"type": "element",
+			"props": {
+				"color": "#F5A9B8"
+			},
+			"parentId": "page:page",
+			"index": "a6",
+			"typeName": "shape"
+		},
+		"binding:iOBENBUHvzD8N7mBdIM5l": {
+			"meta": {},
+			"id": "binding:iOBENBUHvzD8N7mBdIM5l",
+			"type": "layout",
+			"fromId": "shape:f4LKGB_8M2qsyWGpHR5Dq",
+			"toId": "shape:05jMujN6A0sIp6zzHMpbV",
+			"props": {
+				"index": "a2",
+				"placeholder": false
+			},
+			"typeName": "binding"
+		},
+		"binding:YTIeOALEmHJk6dczRpQmE": {
+			"meta": {},
+			"id": "binding:YTIeOALEmHJk6dczRpQmE",
+			"type": "layout",
+			"fromId": "shape:f4LKGB_8M2qsyWGpHR5Dq",
+			"toId": "shape:GTQq2qxkWPHEK7KMIRtsh",
+			"props": {
+				"index": "a1",
+				"placeholder": false
+			},
+			"typeName": "binding"
+		},
+		"binding:n4LY_pVuLfjV1qpOTZX-U": {
+			"meta": {},
+			"id": "binding:n4LY_pVuLfjV1qpOTZX-U",
+			"type": "layout",
+			"fromId": "shape:f4LKGB_8M2qsyWGpHR5Dq",
+			"toId": "shape:6uouhIK7PvyIRNQHACf-d",
+			"props": {
+				"index": "a3",
+				"placeholder": false
+			},
+			"typeName": "binding"
+		},
+		"binding:8XayRsWB_nxAH2833SYg1": {
+			"meta": {},
+			"id": "binding:8XayRsWB_nxAH2833SYg1",
+			"type": "layout",
+			"fromId": "shape:f4LKGB_8M2qsyWGpHR5Dq",
+			"toId": "shape:2oThF4kJ4v31xqKN5lvq2",
+			"props": {
+				"index": "a5",
+				"placeholder": false
+			},
+			"typeName": "binding"
+		},
+		"binding:MTYuIRiEVTn2DyVChthry": {
+			"meta": {},
+			"id": "binding:MTYuIRiEVTn2DyVChthry",
+			"type": "layout",
+			"fromId": "shape:f4LKGB_8M2qsyWGpHR5Dq",
+			"toId": "shape:K2vk_VTaNh-ANaRNOAvgY",
+			"props": {
+				"index": "a4",
+				"placeholder": false
+			},
+			"typeName": "binding"
+		}
+	},
+	"schema": {
+		"schemaVersion": 2,
+		"sequences": {
+			"com.tldraw.store": 4,
+			"com.tldraw.asset": 1,
+			"com.tldraw.camera": 1,
+			"com.tldraw.document": 2,
+			"com.tldraw.instance": 25,
+			"com.tldraw.instance_page_state": 5,
+			"com.tldraw.page": 1,
+			"com.tldraw.instance_presence": 5,
+			"com.tldraw.pointer": 1,
+			"com.tldraw.shape": 4,
+			"com.tldraw.asset.bookmark": 2,
+			"com.tldraw.asset.image": 4,
+			"com.tldraw.asset.video": 4,
+			"com.tldraw.shape.group": 0,
+			"com.tldraw.shape.text": 2,
+			"com.tldraw.shape.bookmark": 2,
+			"com.tldraw.shape.draw": 2,
+			"com.tldraw.shape.geo": 9,
+			"com.tldraw.shape.note": 7,
+			"com.tldraw.shape.line": 5,
+			"com.tldraw.shape.frame": 0,
+			"com.tldraw.shape.arrow": 5,
+			"com.tldraw.shape.highlight": 1,
+			"com.tldraw.shape.embed": 4,
+			"com.tldraw.shape.image": 3,
+			"com.tldraw.shape.video": 2,
+			"com.tldraw.shape.container": 0,
+			"com.tldraw.shape.element": 0,
+			"com.tldraw.binding.arrow": 0,
+			"com.tldraw.binding.layout": 0
+		}
+	}
+}
--- a/src/tools/ChatBoxTool.ts
+++ b/src/tools/ChatBoxTool.ts
@ -0,0 +1,7 @@
+import { BaseBoxShapeTool } from "tldraw"
+
+export class ChatBoxTool extends BaseBoxShapeTool {
+  static override id = "ChatBox"
+  shapeType = "ChatBox"
+  override initial = "idle"
+}
--- a/src/tools/EmbedTool.ts
+++ b/src/tools/EmbedTool.ts
@ -0,0 +1,7 @@
+import { BaseBoxShapeTool } from "tldraw"
+
+export class EmbedTool extends BaseBoxShapeTool {
+  static override id = "Embed"
+  shapeType = "Embed"
+  override initial = "idle"
+}
--- a/src/tools/MarkdownTool.ts
+++ b/src/tools/MarkdownTool.ts
@ -0,0 +1,7 @@
+import { BaseBoxShapeTool } from "tldraw"
+
+export class MarkdownTool extends BaseBoxShapeTool {
+  static override id = "markdown"
+  shapeType = "markdown"
+  override initial = "idle"
+}
--- a/src/tools/VideoChatTool.ts
+++ b/src/tools/VideoChatTool.ts
@ -0,0 +1,7 @@
+import { BaseBoxShapeTool } from "tldraw"
+
+export class VideoChatTool extends BaseBoxShapeTool {
+  static override id = "VideoChat"
+  shapeType = "VideoChat"
+  override initial = "idle"
+}
--- a/src/ui/CustomContextMenu.tsx
+++ b/src/ui/CustomContextMenu.tsx
@ -0,0 +1,126 @@
+import { TldrawUiMenuItem, TLShape } from "tldraw"
+import { TldrawUiMenuGroup } from "tldraw"
+import { DefaultContextMenuContent } from "tldraw"
+import { DefaultContextMenu } from "tldraw"
+import { TLUiContextMenuProps, useEditor } from "tldraw"
+import {
+  cameraHistory,
+  copyLinkToCurrentView,
+  lockCameraToFrame,
+  revertCamera,
+  zoomToSelection,
+} from "./cameraUtils"
+
+export function CustomContextMenu(props: TLUiContextMenuProps) {
+  const editor = useEditor()
+  const selectedShapes = editor.getSelectedShapes()
+  const selectedIds = editor.getSelectedShapeIds()
+
+  // Add debug logs
+  console.log(
+    "Selected Shapes:",
+    selectedShapes.map((shape) => ({
+      id: shape.id,
+      type: shape.type,
+    })),
+  )
+  console.log(
+    "Selected Frame:",
+    selectedShapes.length === 1 && selectedShapes[0].type === "frame",
+  )
+
+  const hasSelection = selectedIds.length > 0
+  const hasCameraHistory = cameraHistory.length > 0
+
+  // Check if exactly one frame is selected
+  const hasFrameSelected =
+    selectedShapes.length === 1 && selectedShapes[0].type === "frame"
+
+  return (
+    <DefaultContextMenu {...props}>
+      {/* Camera Controls Group */}
+      <TldrawUiMenuGroup id="camera-controls">
+        <TldrawUiMenuItem
+          id="zoom-to-selection"
+          label="Zoom to Selection"
+          icon="zoom-in"
+          kbd="alt +z"
+          disabled={!hasSelection}
+          onSelect={() => zoomToSelection(editor)}
+        />
+        <TldrawUiMenuItem
+          id="copy-link-to-current-view"
+          label="Copy Link to Current View"
+          icon="link"
+          kbd="alt+s"
+          onSelect={() => copyLinkToCurrentView(editor)}
+        />
+        <TldrawUiMenuItem
+          id="revert-camera"
+          label="Revert Camera"
+          icon="undo"
+          kbd="alt+b"
+          disabled={!hasCameraHistory}
+          onSelect={() => revertCamera(editor)}
+        />
+      </TldrawUiMenuGroup>
+
+      {/* Creation Tools Group */}
+      <TldrawUiMenuGroup id="creation-tools">
+        <TldrawUiMenuItem
+          id="video-chat"
+          label="Create Video Chat"
+          icon="video"
+          kbd="alt+v"
+          disabled={hasSelection}
+          onSelect={() => {
+            editor.setCurrentTool("VideoChat")
+          }}
+        />
+        <TldrawUiMenuItem
+          id="chat-box"
+          label="Create Chat Box"
+          icon="chat"
+          kbd="alt+c"
+          disabled={hasSelection}
+          onSelect={() => {
+            editor.setCurrentTool("ChatBox")
+          }}
+        />
+        <TldrawUiMenuItem
+          id="embed"
+          label="Create Embed"
+          icon="embed"
+          kbd="alt+e"
+          disabled={hasSelection}
+          onSelect={() => {
+            editor.setCurrentTool("Embed")
+          }}
+        />
+        <TldrawUiMenuItem
+          id="markdown"
+          label="Create Markdown Box"
+          icon="markdown"
+          kbd="alt+m"
+          disabled={hasSelection}
+          onSelect={() => {
+            editor.setCurrentTool("markdown")
+          }}
+        />
+      </TldrawUiMenuGroup>
+
+      {/* Frame Controls */}
+      <TldrawUiMenuGroup id="frame-controls">
+        <TldrawUiMenuItem
+          id="lock-to-frame"
+          label="Lock to Frame"
+          icon="lock"
+          kbd="shift+l"
+          disabled={!hasFrameSelected}
+          onSelect={() => lockCameraToFrame(editor)}
+        />
+      </TldrawUiMenuGroup>
+      <DefaultContextMenuContent />
+    </DefaultContextMenu>
+  )
+}
--- a/src/ui/CustomMainMenu.tsx
+++ b/src/ui/CustomMainMenu.tsx
@ -0,0 +1,59 @@
+import {
+    DefaultMainMenu,
+    TldrawUiMenuItem,
+    Editor,
+    TLContent,
+    DefaultMainMenuContent,
+    useEditor,
+    useExportAs,
+} from "tldraw";
+
+export function CustomMainMenu() {
+    const editor = useEditor()
+    const exportAs = useExportAs()
+
+    const importJSON = (editor: Editor) => {
+        const input = document.createElement("input");
+        input.type = "file";
+        input.accept = ".json";
+        input.onchange = (event) => {
+            const file = (event.target as HTMLInputElement).files?.[0];
+            const reader = new FileReader();
+            reader.onload = (event) => {
+                if (typeof event.target?.result !== 'string') {
+                    return
+                }
+                const jsonData = JSON.parse(event.target.result) as TLContent
+                editor.putContentOntoCurrentPage(jsonData, { select: true })
+            };
+            if (file) {
+                reader.readAsText(file);
+            }
+        };
+        input.click();
+    };
+    const exportJSON = (editor: Editor) => {
+        const exportName = `props-${Math.round(+new Date() / 1000).toString().slice(5)}`
+        exportAs(Array.from(editor.getCurrentPageShapeIds()), 'json', exportName)
+    };
+
+    return (
+        <DefaultMainMenu>
+            <DefaultMainMenuContent />
+            <TldrawUiMenuItem
+                id="export"
+                label="Export JSON"
+                icon="external-link"
+                readonlyOk
+                onSelect={() => exportJSON(editor)}
+            />
+            <TldrawUiMenuItem
+                id="import"
+                label="Import JSON"
+                icon="external-link"
+                readonlyOk
+                onSelect={() => importJSON(editor)}
+            />
+        </DefaultMainMenu>
+    )
+}
--- a/src/ui/CustomToolbar.tsx
+++ b/src/ui/CustomToolbar.tsx
@ -0,0 +1,47 @@
+import { TldrawUiMenuItem } from "tldraw"
+import { DefaultToolbar, DefaultToolbarContent } from "tldraw"
+import { useTools } from "tldraw"
+import { useEditor } from "tldraw"
+
+export function CustomToolbar() {
+  const editor = useEditor()
+  const tools = useTools()
+
+  return (
+    <DefaultToolbar>
+      <DefaultToolbarContent />
+      {tools["VideoChat"] && (
+        <TldrawUiMenuItem
+          {...tools["VideoChat"]}
+          icon="video"
+          label="Video Chat"
+          isSelected={tools["VideoChat"].id === editor.getCurrentToolId()}
+        />
+      )}
+      {tools["ChatBox"] && (
+        <TldrawUiMenuItem
+          {...tools["ChatBox"]}
+          icon="chat"
+          label="Chat"
+          isSelected={tools["ChatBox"].id === editor.getCurrentToolId()}
+        />
+      )}
+      {tools["Embed"] && (
+        <TldrawUiMenuItem
+          {...tools["Embed"]}
+          icon="embed"
+          label="Embed"
+          isSelected={tools["Embed"].id === editor.getCurrentToolId()}
+        />
+      )}
+      {tools["Markdown"] && (
+        <TldrawUiMenuItem
+          {...tools["Markdown"]}
+          icon="markdown"
+          label="Markdown"
+          isSelected={tools["Markdown"].id === editor.getCurrentToolId()}
+        />
+      )}
+    </DefaultToolbar>
+  )
+}
--- a/src/ui/cameraUtils.ts
+++ b/src/ui/cameraUtils.ts
@ -0,0 +1,222 @@
+import { Editor } from "tldraw"
+
+export const cameraHistory: { x: number; y: number; z: number }[] = []
+const MAX_HISTORY = 10 // Keep last 10 camera positions
+
+// Helper function to store camera position
+const storeCameraPosition = (editor: Editor) => {
+  const currentCamera = editor.getCamera()
+  // Only store if there's a meaningful change from the last position
+  const lastPosition = cameraHistory[cameraHistory.length - 1]
+  if (
+    !lastPosition ||
+    Math.abs(lastPosition.x - currentCamera.x) > 1 ||
+    Math.abs(lastPosition.y - currentCamera.y) > 1 ||
+    Math.abs(lastPosition.z - currentCamera.z) > 0.1
+  ) {
+    cameraHistory.push({ ...currentCamera })
+    if (cameraHistory.length > MAX_HISTORY) {
+      cameraHistory.shift()
+    }
+    console.log("Stored camera position:", currentCamera)
+  }
+}
+
+export const zoomToSelection = (editor: Editor) => {
+  // Store camera position before zooming
+  storeCameraPosition(editor)
+
+  // Get all selected shape IDs
+  const selectedIds = editor.getSelectedShapeIds()
+  if (selectedIds.length === 0) return
+
+  // Get the common bounds that encompass all selected shapes
+  const commonBounds = editor.getSelectionPageBounds()
+  if (!commonBounds) return
+
+  // Calculate viewport dimensions
+  const viewportPageBounds = editor.getViewportPageBounds()
+
+  // Calculate the ratio of selection size to viewport size
+  const widthRatio = commonBounds.width / viewportPageBounds.width
+  const heightRatio = commonBounds.height / viewportPageBounds.height
+
+  // Calculate target zoom based on selection size
+  let targetZoom
+  if (widthRatio < 0.1 || heightRatio < 0.1) {
+    // For very small selections, zoom in up to 20x
+    targetZoom = Math.min(
+      (viewportPageBounds.width * 0.8) / commonBounds.width,
+      (viewportPageBounds.height * 0.8) / commonBounds.height,
+      40, // Max zoom of 20x for small selections
+    )
+  } else if (widthRatio > 1 || heightRatio > 1) {
+    // For selections larger than viewport, zoom out more
+    targetZoom = Math.min(
+      (viewportPageBounds.width * 0.7) / commonBounds.width,
+      (viewportPageBounds.height * 0.7) / commonBounds.height,
+      0.125, // Min zoom of 1/8x for large selections (reciprocal of 8)
+    )
+  } else {
+    // For medium-sized selections, allow up to 10x zoom
+    targetZoom = Math.min(
+      (viewportPageBounds.width * 0.8) / commonBounds.width,
+      (viewportPageBounds.height * 0.8) / commonBounds.height,
+      20, // Medium zoom level
+    )
+  }
+
+  // Zoom to the common bounds
+  editor.zoomToBounds(commonBounds, {
+    targetZoom,
+    inset: widthRatio > 1 || heightRatio > 1 ? 20 : 50, // Less padding for large selections
+    animation: {
+      duration: 400,
+      easing: (t) => t * (2 - t),
+    },
+  })
+
+  // Update URL with new camera position and first selected shape ID
+  const newCamera = editor.getCamera()
+  const url = new URL(window.location.href)
+  url.searchParams.set("shapeId", selectedIds[0].toString())
+  url.searchParams.set("x", newCamera.x.toString())
+  url.searchParams.set("y", newCamera.y.toString())
+  url.searchParams.set("zoom", newCamera.z.toString())
+  window.history.replaceState(null, "", url.toString())
+}
+
+export const revertCamera = (editor: Editor) => {
+  if (cameraHistory.length > 0) {
+    const previousCamera = cameraHistory.pop()
+    if (previousCamera) {
+      // Get current viewport bounds
+      const viewportPageBounds = editor.getViewportPageBounds()
+
+      // Create bounds that center on the previous camera position
+      const targetBounds = {
+        x: previousCamera.x - viewportPageBounds.width / 2 / previousCamera.z,
+        y: previousCamera.y - viewportPageBounds.height / 2 / previousCamera.z,
+        w: viewportPageBounds.width / previousCamera.z,
+        h: viewportPageBounds.height / previousCamera.z,
+      }
+
+      // Use the same zoom animation as zoomToShape
+      editor.zoomToBounds(targetBounds, {
+        targetZoom: previousCamera.z,
+        animation: {
+          duration: 400,
+          easing: (t) => t * (2 - t),
+        },
+      })
+
+      console.log("Reverted to camera position:", previousCamera)
+    }
+  } else {
+    console.log("No camera history available")
+  }
+}
+
+export const copyLinkToCurrentView = async (editor: Editor) => {
+  console.log("Starting copyLinkToCurrentView")
+
+  if (!editor.store.serialize()) {
+    console.warn("Store not ready")
+    return
+  }
+
+  try {
+    const baseUrl = `${window.location.origin}${window.location.pathname}`
+    console.log("Base URL:", baseUrl)
+
+    const url = new URL(baseUrl)
+    const camera = editor.getCamera()
+    console.log("Current camera position:", {
+      x: camera.x,
+      y: camera.y,
+      zoom: camera.z,
+    })
+
+    // Set camera parameters first
+    url.searchParams.set("x", camera.x.toString())
+    url.searchParams.set("y", camera.y.toString())
+    url.searchParams.set("zoom", camera.z.toString())
+
+    // Add shape ID last if needed
+    const selectedIds = editor.getSelectedShapeIds()
+    if (selectedIds.length > 0) {
+      url.searchParams.set("shapeId", selectedIds[0].toString())
+    }
+
+    const finalUrl = url.toString()
+    console.log("Final URL to copy:", finalUrl)
+
+    if (navigator.clipboard && window.isSecureContext) {
+      console.log("Using modern clipboard API...")
+      await navigator.clipboard.writeText(finalUrl)
+      console.log("URL copied successfully using clipboard API")
+    } else {
+      console.log("Falling back to legacy clipboard method...")
+      const textArea = document.createElement("textarea")
+      textArea.value = finalUrl
+      document.body.appendChild(textArea)
+      try {
+        await navigator.clipboard.writeText(textArea.value)
+      } catch (err) {
+        console.error("Clipboard API failed:", err)
+      }
+      document.body.removeChild(textArea)
+    }
+  } catch (error) {
+    console.error("Failed to copy to clipboard:", error)
+    alert("Failed to copy link. Please check clipboard permissions.")
+  }
+}
+
+/** TODO: doesnt UNlock */
+export const lockCameraToFrame = async (editor: Editor) => {
+  const selectedShapes = editor.getSelectedShapes()
+  if (selectedShapes.length === 0) return
+  const selectedShape = selectedShapes[0]
+  const isFrame = selectedShape.type === "frame"
+  const bounds = editor.getShapePageBounds(selectedShape)
+  if (!isFrame || !bounds) return
+
+  try {
+    const baseUrl = `${window.location.origin}${window.location.pathname}`
+    const url = new URL(baseUrl)
+
+    // Calculate zoom level to fit the frame
+    const viewportPageBounds = editor.getViewportPageBounds()
+    const targetZoom = Math.min(
+      viewportPageBounds.width / bounds.width,
+      viewportPageBounds.height / bounds.height,
+      1, // Cap at 1x zoom
+    )
+
+    // Set camera parameters first
+    url.searchParams.set("x", bounds.x.toString())
+    url.searchParams.set("y", bounds.y.toString())
+    url.searchParams.set("zoom", targetZoom.toString())
+
+    // Add frame-specific parameters last
+    url.searchParams.set("isLocked", "true")
+    url.searchParams.set("frameId", selectedShape.id)
+
+    const finalUrl = url.toString()
+
+    if (navigator.clipboard && window.isSecureContext) {
+      await navigator.clipboard.writeText(finalUrl)
+    } else {
+      const textArea = document.createElement("textarea")
+      textArea.value = finalUrl
+      document.body.appendChild(textArea)
+      textArea.select()
+      document.execCommand("copy")
+      document.body.removeChild(textArea)
+    }
+  } catch (error) {
+    console.error("Failed to copy frame link:", error)
+    alert("Failed to copy frame link. Please check clipboard permissions.")
+  }
+}
--- a/src/ui/components.tsx
+++ b/src/ui/components.tsx
@ -0,0 +1,10 @@
+import { CustomMainMenu } from "./CustomMainMenu"
+import { CustomToolbar } from "./CustomToolbar"
+import { CustomContextMenu } from "./CustomContextMenu"
+import { TLComponents } from "tldraw"
+
+export const components: TLComponents = {
+  Toolbar: CustomToolbar,
+  MainMenu: CustomMainMenu,
+  ContextMenu: CustomContextMenu,
+}
--- a/src/ui/overrides.tsx
+++ b/src/ui/overrides.tsx
@ -0,0 +1,90 @@
+import { TLUiOverrides } from "tldraw"
+import {
+  cameraHistory,
+  copyLinkToCurrentView,
+  lockCameraToFrame,
+  revertCamera,
+  zoomToSelection,
+} from "./cameraUtils"
+
+export const overrides: TLUiOverrides = {
+  tools(editor, tools) {
+    return {
+      ...tools,
+      VideoChat: {
+        id: "VideoChat",
+        icon: "video",
+        label: "Video Chat",
+        kbd: "alt+v",
+        readonlyOk: true,
+        onSelect: () => editor.setCurrentTool("VideoChat"),
+      },
+      ChatBox: {
+        id: "ChatBox",
+        icon: "chat",
+        label: "Chat",
+        kbd: "alt+c",
+        readonlyOk: true,
+        onSelect: () => editor.setCurrentTool("ChatBox"),
+      },
+      Embed: {
+        id: "Embed",
+        icon: "embed",
+        label: "Embed",
+        kbd: "alt+e",
+        readonlyOk: true,
+        onSelect: () => editor.setCurrentTool("Embed"),
+      },
+      Markdown: {
+        id: "Markdown",
+        icon: "markdown",
+        label: "Markdown",
+        kbd: "alt+m",
+        readonlyOk: true,
+        onSelect: () => editor.setCurrentTool("Markdown"),
+      },
+    }
+  },
+  actions(editor, actions) {
+    return {
+      ...actions,
+      zoomToSelection: {
+        id: "zoom-to-selection",
+        label: "Zoom to Selection",
+        kbd: "alt+z",
+        onSelect: () => {
+          if (editor.getSelectedShapeIds().length > 0) {
+            zoomToSelection(editor)
+          }
+        },
+        readonlyOk: true,
+      },
+      copyLinkToCurrentView: {
+        id: "copy-link-to-current-view",
+        label: "Copy Link to Current View",
+        kbd: "alt+s",
+        onSelect: () => {
+          copyLinkToCurrentView(editor)
+        },
+        readonlyOk: true,
+      },
+      revertCamera: {
+        id: "revert-camera",
+        label: "Revert Camera",
+        kbd: "alt+b",
+        onSelect: () => {
+          if (cameraHistory.length > 0) {
+            revertCamera(editor)
+          }
+        },
+        readonlyOk: true,
+      },
+      lockToFrame: {
+        id: "lock-to-frame",
+        label: "Lock to Frame",
+        kbd: "shift+l",
+        onSelect: () => lockCameraToFrame(editor),
+      },
+    }
+  },
+}
--- a/src/utils/handleInitialPageLoad.ts
+++ b/src/utils/handleInitialPageLoad.ts
@ -0,0 +1,67 @@
+import { Editor, TLShapeId } from "tldraw"
+
+export const handleInitialPageLoad = (editor: Editor) => {
+  const url = new URL(window.location.href)
+
+  // Get camera parameters first
+  const x = url.searchParams.get("x")
+  const y = url.searchParams.get("y")
+  const zoom = url.searchParams.get("zoom")
+
+  // Get shape/frame parameters last
+  const frameId = url.searchParams.get("frameId")
+  const shapeId = url.searchParams.get("shapeId")
+  const isLocked = url.searchParams.get("isLocked") === "true"
+
+  // Wait for next tick to ensure editor is ready
+  requestAnimationFrame(() => {
+    // Set camera position if coordinates exist
+    if (x && y && zoom) {
+      editor.setCamera({
+        x: parseFloat(x),
+        y: parseFloat(y),
+        z: parseFloat(zoom),
+      })
+    }
+
+    // Handle frame-specific logic
+    if (frameId) {
+      const frame = editor.getShape(frameId as TLShapeId)
+      if (frame) {
+        editor.select(frameId as TLShapeId)
+
+        // If x/y/zoom are not provided in URL, zoom to frame bounds
+        if (!x || !y || !zoom) {
+          editor.zoomToBounds(editor.getShapePageBounds(frame)!, {
+            animation: { duration: 0 },
+            targetZoom: 1,
+          })
+        }
+
+        // Apply camera lock after camera is positioned
+        if (isLocked) {
+          // Use requestAnimationFrame to ensure camera is set before locking
+          requestAnimationFrame(() => {
+            editor.setCameraOptions({
+              isLocked: true,
+              // Optional: you may want to also set these options for locked frames
+              //shouldSnapToGrid: false,
+              //shouldUseEdgeScrolling: false,
+            })
+          })
+        }
+      } else {
+        console.warn("Frame not found:", frameId)
+      }
+    }
+    // Handle shape-specific logic
+    else if (shapeId) {
+      const shape = editor.getShape(shapeId as TLShapeId)
+      if (shape) {
+        editor.select(shapeId as TLShapeId)
+      } else {
+        console.warn("Shape not found:", shapeId)
+      }
+    }
+  })
+}
--- a/src/utils/multiplayerAssetStore.tsx
+++ b/src/utils/multiplayerAssetStore.tsx
@ -0,0 +1,25 @@
+import { TLAssetStore, uniqueId } from 'tldraw'
+import { WORKER_URL } from '../routes/Board'
+
+export const multiplayerAssetStore: TLAssetStore = {
+	async upload(_asset, file) {
+		const id = uniqueId()
+		const objectName = `${id}-${file.name}`.replace(/[^a-zA-Z0-9.]/g, '-')
+		const url = `${WORKER_URL}/uploads/${objectName}`
+
+		const response = await fetch(url, {
+			method: 'POST',
+			body: file,
+		})
+
+		if (!response.ok) {
+			throw new Error(`Failed to upload asset: ${response.statusText}`)
+		}
+
+		return url
+	},
+
+	resolve(asset) {
+		return asset.props.src
+	},
+}
--- a/src/utils/unfurlBookmarkUrl.tsx
+++ b/src/utils/unfurlBookmarkUrl.tsx
@ -0,0 +1,43 @@
+import { TLBookmarkAsset, AssetRecordType, getHashForString } from "tldraw"
+import { WORKER_URL } from "../routes/Board"
+
+export async function unfurlBookmarkUrl({
+  url,
+}: {
+  url: string
+}): Promise<TLBookmarkAsset> {
+  const asset: TLBookmarkAsset = {
+    id: AssetRecordType.createId(getHashForString(url)),
+    typeName: "asset",
+    type: "bookmark",
+    meta: {},
+    props: {
+      src: url,
+      description: "",
+      image: "",
+      favicon: "",
+      title: "",
+    },
+  }
+
+  try {
+    const response = await fetch(
+      `${WORKER_URL}/unfurl?url=${encodeURIComponent(url)}`,
+    )
+    const data = (await response.json()) as {
+      description: string
+      image: string
+      favicon: string
+      title: string
+    }
+
+    asset.props.description = data?.description ?? ""
+    asset.props.image = data?.image ?? ""
+    asset.props.favicon = data?.favicon ?? ""
+    asset.props.title = data?.title ?? ""
+  } catch (e) {
+    console.error(e)
+  }
+
+  return asset
+}
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@ -0,0 +1,9 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+    readonly VITE_TLDRAW_WORKER_URL: string
+}
+
+interface ImportMeta {
+    readonly env: ImportMetaEnv
+}
--- a/tsconfig.json
+++ b/tsconfig.json
@ -0,0 +1,31 @@
+{
+  "compilerOptions": {
+    "baseUrl": "./src",
+    "paths": {
+      "@/*": ["*"],
+      "src/*": ["./src/*"],
+    },
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "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": false,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src", "worker", "src/client"],
+  
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
--- a/tsconfig.node.json
+++ b/tsconfig.node.json
@ -0,0 +1,10 @@
+{
+	"compilerOptions": {
+		"composite": true,
+		"skipLibCheck": true,
+		"module": "ESNext",
+		"moduleResolution": "bundler",
+		"allowSyntheticDefaultImports": true
+	},
+	"include": ["vite.config.ts"]
+}
--- a/tsconfig.worker.json
+++ b/tsconfig.worker.json
@ -0,0 +1,17 @@
+{
+	"compilerOptions": {
+		"composite": true,
+		"skipLibCheck": true,
+		"lib": ["ES2022"],
+		"module": "ES2022",
+		"moduleResolution": "bundler",
+		"allowSyntheticDefaultImports": true,
+		"types": ["@cloudflare/workers-types"],
+		"strict": true,
+		"noUnusedLocals": true,
+		"noUnusedParameters": true,
+		"noFallthroughCasesInSwitch": true,
+		"target": "ES2022"
+	},
+	"include": ["worker/*.ts"]
+}
--- a/vercel.json
+++ b/vercel.json
@ -1,5 +1,31 @@
 {
-    "buildCommand": "",
-    "framework" : "other",
-    "outputDirectory": "."
+  "buildCommand": "npm run build",
+  "installCommand": "npm install",
+  "framework": "vite",
+  "outputDirectory": "dist",
+  "rewrites": [
+    {
+      "source": "/board/(.*)",
+      "destination": "/"
+    },
+    {
+      "source": "/board",
+      "destination": "/"
+    },
+    {
+      "source": "/inbox",
+      "destination": "/"
+    }
+  ],
+  "headers": [
+    {
+      "source": "/assets/(.*)",
+      "headers": [
+        {
+          "key": "Cache-Control",
+          "value": "public, max-age=31536000, immutable"
+        }
+      ]
+    }
+  ]
 }
--- a/vite.config.ts
+++ b/vite.config.ts
@ -0,0 +1,26 @@
+import { defineConfig } from "vite"
+import react from "@vitejs/plugin-react"
+
+export default defineConfig({
+  envPrefix: ["VITE_"],
+  plugins: [react()],
+  server: {
+    host: "0.0.0.0",
+    port: 5173,
+  },
+  build: {
+    sourcemap: true,
+  },
+  base: "/",
+  publicDir: "src/public",
+  resolve: {
+    alias: {
+      "@": "/src",
+    },
+  },
+  define: {
+    "import.meta.env.VITE_WORKER_URL": JSON.stringify(
+      process.env.VITE_WORKER_URL,
+    ),
+  },
+})
--- a/worker/TldrawDurableObject.ts
+++ b/worker/TldrawDurableObject.ts
@ -0,0 +1,260 @@
+/// <reference types="@cloudflare/workers-types" />
+
+import { RoomSnapshot, TLSocketRoom } from "@tldraw/sync-core"
+import {
+  TLRecord,
+  TLShape,
+  createTLSchema,
+  defaultBindingSchemas,
+  defaultShapeSchemas,
+} from "@tldraw/tlschema"
+import { AutoRouter, IRequest, error } from "itty-router"
+import throttle from "lodash.throttle"
+import { Environment } from "./types"
+import { ChatBoxShape } from "@/shapes/ChatBoxShapeUtil"
+import { VideoChatShape } from "@/shapes/VideoChatShapeUtil"
+import { EmbedShape } from "@/shapes/EmbedShapeUtil"
+import { MarkdownShape } from "@/shapes/MarkdownShapeUtil"
+
+// add custom shapes and bindings here if needed:
+export const customSchema = createTLSchema({
+  shapes: {
+    ...defaultShapeSchemas,
+    ChatBox: {
+      props: ChatBoxShape.props,
+      migrations: ChatBoxShape.migrations,
+    },
+    VideoChat: {
+      props: VideoChatShape.props,
+      migrations: VideoChatShape.migrations,
+    },
+    Embed: {
+      props: EmbedShape.props,
+      migrations: EmbedShape.migrations,
+    },
+    Markdown: {
+      props: MarkdownShape.props,
+      migrations: MarkdownShape.migrations,
+    },
+  },
+  bindings: defaultBindingSchemas,
+})
+
+// each whiteboard room is hosted in a DurableObject:
+// https://developers.cloudflare.com/durable-objects/
+
+// there's only ever one durable object instance per room. it keeps all the room state in memory and
+// handles websocket connections. periodically, it persists the room state to the R2 bucket.
+export class TldrawDurableObject {
+  private r2: R2Bucket
+  // the room ID will be missing whilst the room is being initialized
+  private roomId: string | null = null
+  // when we load the room from the R2 bucket, we keep it here. it's a promise so we only ever
+  // load it once.
+  private roomPromise: Promise<TLSocketRoom<TLRecord, void>> | null = null
+
+  constructor(private readonly ctx: DurableObjectState, env: Environment) {
+    this.r2 = env.TLDRAW_BUCKET
+
+    ctx.blockConcurrencyWhile(async () => {
+      this.roomId = ((await this.ctx.storage.get("roomId")) ?? null) as
+        | string
+        | null
+    })
+  }
+
+  private readonly router = AutoRouter({
+    catch: (e) => {
+      console.log(e)
+      return error(e)
+    },
+  })
+    // when we get a connection request, we stash the room id if needed and handle the connection
+    .get("/connect/:roomId", async (request) => {
+      if (!this.roomId) {
+        await this.ctx.blockConcurrencyWhile(async () => {
+          await this.ctx.storage.put("roomId", request.params.roomId)
+          this.roomId = request.params.roomId
+        })
+      }
+      return this.handleConnect(request)
+    })
+    .get("/room/:roomId", async (request) => {
+      const room = await this.getRoom()
+      const snapshot = room.getCurrentSnapshot()
+      return new Response(JSON.stringify(snapshot.documents), {
+        headers: {
+          "Content-Type": "application/json",
+          "Access-Control-Allow-Origin": request.headers.get("Origin") || "*",
+          "Access-Control-Allow-Methods": "GET, POST, OPTIONS",
+          "Access-Control-Allow-Headers": "Content-Type",
+          "Access-Control-Max-Age": "86400",
+        },
+      })
+    })
+    .post("/room/:roomId", async (request) => {
+      const records = (await request.json()) as TLRecord[]
+
+      return new Response(JSON.stringify(Array.from(records)), {
+        headers: {
+          "Content-Type": "application/json",
+          "Access-Control-Allow-Origin": request.headers.get("Origin") || "*",
+          "Access-Control-Allow-Methods": "GET, POST, OPTIONS",
+          "Access-Control-Allow-Headers": "Content-Type",
+          "Access-Control-Max-Age": "86400",
+        },
+      })
+    })
+
+  // `fetch` is the entry point for all requests to the Durable Object
+  fetch(request: Request): Response | Promise<Response> {
+    try {
+      return this.router.fetch(request)
+    } catch (err) {
+      console.error("Error in DO fetch:", err)
+      return new Response(
+        JSON.stringify({
+          error: "Internal Server Error",
+          message: (err as Error).message,
+        }),
+        {
+          status: 500,
+          headers: {
+            "Content-Type": "application/json",
+            "Access-Control-Allow-Origin": "*",
+            "Access-Control-Allow-Methods": "GET, POST, OPTIONS, UPGRADE",
+            "Access-Control-Allow-Headers":
+              "Content-Type, Authorization, Upgrade, Connection",
+            "Access-Control-Max-Age": "86400",
+            "Access-Control-Allow-Credentials": "true",
+          },
+        },
+      )
+    }
+  }
+
+  // what happens when someone tries to connect to this room?
+  async handleConnect(request: IRequest): Promise<Response> {
+    if (!this.roomId) {
+      return new Response("Room not initialized", { status: 400 })
+    }
+
+    const sessionId = request.query.sessionId as string
+    if (!sessionId) {
+      return new Response("Missing sessionId", { status: 400 })
+    }
+
+    const { 0: clientWebSocket, 1: serverWebSocket } = new WebSocketPair()
+
+    try {
+      serverWebSocket.accept()
+      const room = await this.getRoom()
+
+      // Handle socket connection with proper error boundaries
+      room.handleSocketConnect({
+        sessionId,
+        socket: {
+          send: serverWebSocket.send.bind(serverWebSocket),
+          close: serverWebSocket.close.bind(serverWebSocket),
+          addEventListener:
+            serverWebSocket.addEventListener.bind(serverWebSocket),
+          removeEventListener:
+            serverWebSocket.removeEventListener.bind(serverWebSocket),
+          readyState: serverWebSocket.readyState,
+        },
+      })
+
+      return new Response(null, {
+        status: 101,
+        webSocket: clientWebSocket,
+        headers: {
+          "Access-Control-Allow-Origin": request.headers.get("Origin") || "*",
+          "Access-Control-Allow-Methods": "GET, POST, OPTIONS, UPGRADE",
+          "Access-Control-Allow-Headers": "*",
+          "Access-Control-Allow-Credentials": "true",
+          Upgrade: "websocket",
+          Connection: "Upgrade",
+        },
+      })
+    } catch (error) {
+      console.error("WebSocket connection error:", error)
+      serverWebSocket.close(1011, "Failed to initialize connection")
+      return new Response("Failed to establish WebSocket connection", {
+        status: 500,
+      })
+    }
+  }
+
+  getRoom() {
+    const roomId = this.roomId
+    if (!roomId) throw new Error("Missing roomId")
+
+    if (!this.roomPromise) {
+      this.roomPromise = (async () => {
+        // fetch the room from R2
+        const roomFromBucket = await this.r2.get(`rooms/${roomId}`)
+        // if it doesn't exist, we'll just create a new empty room
+        const initialSnapshot = roomFromBucket
+          ? ((await roomFromBucket.json()) as RoomSnapshot)
+          : undefined
+        if (initialSnapshot) {
+          initialSnapshot.documents = initialSnapshot.documents.filter(
+            (record) => {
+              const shape = record.state as TLShape
+              return shape.type !== "chatBox"
+            },
+          )
+        }
+        // create a new TLSocketRoom. This handles all the sync protocol & websocket connections.
+        // it's up to us to persist the room state to R2 when needed though.
+        return new TLSocketRoom<TLRecord, void>({
+          schema: customSchema,
+          initialSnapshot,
+          onDataChange: () => {
+            // and persist whenever the data in the room changes
+            this.schedulePersistToR2()
+          },
+        })
+      })()
+    }
+
+    return this.roomPromise
+  }
+
+  // we throttle persistance so it only happens every 10 seconds
+  schedulePersistToR2 = throttle(async () => {
+    if (!this.roomPromise || !this.roomId) return
+    const room = await this.getRoom()
+
+    // convert the room to JSON and upload it to R2
+    const snapshot = JSON.stringify(room.getCurrentSnapshot())
+    await this.r2.put(`rooms/${this.roomId}`, snapshot)
+  }, 10_000)
+
+  // Add CORS headers for WebSocket upgrade
+  handleWebSocket(request: Request) {
+    const upgradeHeader = request.headers.get("Upgrade")
+    if (!upgradeHeader || upgradeHeader !== "websocket") {
+      return new Response("Expected Upgrade: websocket", { status: 426 })
+    }
+
+    const webSocketPair = new WebSocketPair()
+    const [client, server] = Object.values(webSocketPair)
+
+    server.accept()
+
+    // Add error handling
+    server.addEventListener("error", (err) => {
+      console.error("WebSocket error:", err)
+    })
+
+    return new Response(null, {
+      status: 101,
+      webSocket: client,
+      headers: {
+        "Access-Control-Allow-Origin": "*",
+        "Access-Control-Allow-Headers": "*",
+      },
+    })
+  }
+}
--- a/worker/assetUploads.ts
+++ b/worker/assetUploads.ts
@ -0,0 +1,109 @@
+/// <reference types="@cloudflare/workers-types" />
+
+import { IRequest, error } from 'itty-router'
+import { Environment } from './types'
+
+// assets are stored in the bucket under the /uploads path
+function getAssetObjectName(uploadId: string) {
+	return `uploads/${uploadId.replace(/[^a-zA-Z0-9\_\-]+/g, '_')}`
+}
+
+// when a user uploads an asset, we store it in the bucket. we only allow image and video assets.
+export async function handleAssetUpload(request: IRequest, env: Environment) {
+	try {
+		const objectName = getAssetObjectName(request.params.uploadId)
+
+		const contentType = request.headers.get('content-type') ?? ''
+		if (!contentType.startsWith('image/') && !contentType.startsWith('video/')) {
+			return error(400, 'Invalid content type')
+		}
+
+		if (await env.TLDRAW_BUCKET.head(objectName)) {
+			return error(409, 'Upload already exists')
+		}
+
+		await env.TLDRAW_BUCKET.put(objectName, request.body, {
+			httpMetadata: request.headers,
+		})
+
+		return { ok: true }
+	} catch (error) {
+		console.error('Asset upload failed:', error);
+		return new Response(`Upload failed: ${(error as Error).message}`, { status: 500 });
+	}
+}
+
+// when a user downloads an asset, we retrieve it from the bucket. we also cache the response for performance.
+export async function handleAssetDownload(
+	request: IRequest,
+	env: Environment,
+	ctx: ExecutionContext
+) {
+	const objectName = getAssetObjectName(request.params.uploadId)
+
+	// if we have a cached response for this request (automatically handling ranges etc.), return it
+	const cacheKey = new Request(request.url, { headers: request.headers })
+	// @ts-ignore
+	const cachedResponse = await caches.default.match(cacheKey)
+	if (cachedResponse) {
+		return cachedResponse
+	}
+
+	// if not, we try to fetch the asset from the bucket
+	const object = await env.TLDRAW_BUCKET.get(objectName, {
+		range: request.headers,
+		onlyIf: request.headers,
+	})
+
+	if (!object) {
+		return error(404)
+	}
+
+	// write the relevant metadata to the response headers
+	const headers = new Headers()
+	object.writeHttpMetadata(headers)
+
+	// assets are immutable, so we can cache them basically forever:
+	headers.set('cache-control', 'public, max-age=31536000, immutable')
+	headers.set('etag', object.httpEtag)
+
+	// we set CORS headers so all clients can access assets. we do this here so our `cors` helper in
+	// worker.ts doesn't try to set extra cors headers on responses that have been read from the
+	// cache, which isn't allowed by cloudflare.
+	headers.set('access-control-allow-origin', '*')
+
+	// cloudflare doesn't set the content-range header automatically in writeHttpMetadata, so we
+	// need to do it ourselves.
+	let contentRange
+	if (object.range) {
+		if ('suffix' in object.range) {
+			const start = object.size - object.range.suffix
+			const end = object.size - 1
+			contentRange = `bytes ${start}-${end}/${object.size}`
+		} else {
+			const start = object.range.offset ?? 0
+			const end = object.range.length ? start + object.range.length - 1 : object.size - 1
+			if (start !== 0 || end !== object.size - 1) {
+				contentRange = `bytes ${start}-${end}/${object.size}`
+			}
+		}
+	}
+
+	if (contentRange) {
+		headers.set('content-range', contentRange)
+	}
+
+	// make sure we get the correct body/status for the response
+	const body = 'body' in object && object.body ? object.body : null
+	const status = body ? (contentRange ? 206 : 200) : 304
+
+	// we only cache complete (200) responses
+	if (status === 200) {
+		const [cacheBody, responseBody] = body!.tee()
+		// @ts-ignore
+		ctx.waitUntil(caches.default.put(cacheKey, new Response(cacheBody, { headers, status })))
+		return new Response(responseBody, { headers, status })
+	}
+
+	return new Response(body, { headers, status })
+}
--- a/worker/types.ts
+++ b/worker/types.ts
@ -0,0 +1,10 @@
+// the contents of the environment should mostly be determined by wrangler.toml. These entries match
+// the bindings defined there.
+/// <reference types="@cloudflare/workers-types" />
+
+export interface Environment {
+	TLDRAW_BUCKET: R2Bucket
+	TLDRAW_DURABLE_OBJECT: DurableObjectNamespace
+	DAILY_API_KEY: string;
+	DAILY_DOMAIN: string;
+}
--- a/worker/worker.ts
+++ b/worker/worker.ts
@ -0,0 +1,135 @@
+import { handleUnfurlRequest } from 'cloudflare-workers-unfurl'
+import { AutoRouter, cors, error, IRequest } from 'itty-router'
+import { handleAssetDownload, handleAssetUpload } from './assetUploads'
+import { Environment } from './types'
+
+// make sure our sync durable object is made available to cloudflare
+export { TldrawDurableObject } from './TldrawDurableObject'
+
+// Define security headers
+const securityHeaders = {
+	'Content-Security-Policy': "default-src 'self'; connect-src 'self' wss: https:; img-src 'self' data: blob: https:; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline';",
+	'X-Content-Type-Options': 'nosniff',
+	'X-Frame-Options': 'DENY',
+	'X-XSS-Protection': '1; mode=block',
+	'Strict-Transport-Security': 'max-age=31536000; includeSubDomains',
+	'Referrer-Policy': 'strict-origin-when-cross-origin',
+	'Permissions-Policy': 'camera=(), microphone=(), geolocation=()'
+}
+
+// we use itty-router (https://itty.dev/) to handle routing. in this example we turn on CORS because
+// we're hosting the worker separately to the client. you should restrict this to your own domain.
+const { preflight, corsify } = cors({
+	origin: (origin) => {
+		const allowedOrigins = [
+			'https://jeffemmett.com',
+			'https://www.jeffemmett.com',
+			'https://jeffemmett-canvas.jeffemmett.workers.dev',
+			'https://jeffemmett.com/board/*',
+		];
+
+		// Always allow if no origin (like from a local file)
+		if (!origin) return '*';
+
+		// Check exact matches
+		if (allowedOrigins.includes(origin)) {
+			return origin;
+		}
+
+		// For development - check if it's a localhost or local IP
+		if (origin.match(/^http:\/\/(localhost|127\.0\.0\.192\.168\.|169\.254\.|10\.)/)) {
+			return origin;
+		}
+
+		return undefined;
+	},
+	allowMethods: ['GET', 'POST', 'OPTIONS', 'UPGRADE'],
+	allowHeaders: [
+		'Content-Type',
+		'Authorization',
+		'Upgrade',
+		'Connection',
+		'Sec-WebSocket-Key',
+		'Sec-WebSocket-Version',
+		'Sec-WebSocket-Extensions',
+		'Sec-WebSocket-Protocol'
+	],
+	maxAge: 86400,
+	credentials: true
+})
+const router = AutoRouter<IRequest, [env: Environment, ctx: ExecutionContext]>({
+	before: [preflight],
+	finally: [(response) => {
+		// Add security headers to all responses except WebSocket upgrades
+		if (response.status !== 101) {
+			Object.entries(securityHeaders).forEach(([key, value]) => {
+				response.headers.set(key, value)
+			})
+		}
+		return corsify(response)
+	}],
+	catch: (e) => {
+		console.error(e)
+		return error(e)
+	},
+})
+	// requests to /connect are routed to the Durable Object, and handle realtime websocket syncing
+	.get('/connect/:roomId', (request, env) => {
+		const id = env.TLDRAW_DURABLE_OBJECT.idFromName(request.params.roomId)
+		const room = env.TLDRAW_DURABLE_OBJECT.get(id)
+		return room.fetch(request.url, {
+			headers: request.headers,
+			body: request.body,
+			method: request.method
+		})
+	})
+
+	// assets can be uploaded to the bucket under /uploads:
+	.post('/uploads/:uploadId', handleAssetUpload)
+
+	// they can be retrieved from the bucket too:
+	.get('/uploads/:uploadId', handleAssetDownload)
+
+	// bookmarks need to extract metadata from pasted URLs:
+	.get('/unfurl', handleUnfurlRequest)
+
+	.get('/room/:roomId', (request, env) => {
+		const id = env.TLDRAW_DURABLE_OBJECT.idFromName(request.params.roomId)
+		const room = env.TLDRAW_DURABLE_OBJECT.get(id)
+		return room.fetch(request.url, {
+			headers: request.headers,
+			body: request.body,
+			method: request.method
+		})
+	})
+
+	.post('/room/:roomId', async (request, env) => {
+		const id = env.TLDRAW_DURABLE_OBJECT.idFromName(request.params.roomId)
+		const room = env.TLDRAW_DURABLE_OBJECT.get(id)
+		return room.fetch(request.url, {
+			method: 'POST',
+			body: request.body
+		})
+	})
+
+	.post('/daily/rooms', async (request, env) => {
+		const response = await fetch('https://api.daily.co/v1/rooms', {
+			method: 'POST',
+			headers: {
+				'Authorization': `Bearer ${env.DAILY_API_KEY}`,
+				'Content-Type': 'application/json'
+			},
+			body: await request.text()
+		});
+
+		const data = await response.json() as Record<string, unknown>;
+		return new Response(JSON.stringify({
+			...data,
+			url: `https://${env.DAILY_DOMAIN}/${data.name}`
+		}), {
+			headers: { 'Content-Type': 'application/json' }
+		});
+	})
+
+// export our router for cloudflare
+export default router
--- a/wrangler.toml
+++ b/wrangler.toml
@ -0,0 +1,32 @@
+main = "worker/worker.ts"
+compatibility_date = "2024-07-01"
+name = "jeffemmett-canvas"
+account_id = "0e7b3338d5278ed1b148e6456b940913"
+
+[vars]
+# Environment variables are managed in Cloudflare Dashboard
+# Workers & Pages → jeffemmett-canvas → Settings → Variables
+
+[dev]
+port = 5172
+ip = "0.0.0.0"
+local_protocol = "http"
+upstream_protocol = "https"
+
+[durable_objects]
+bindings = [
+    { name = "TLDRAW_DURABLE_OBJECT", class_name = "TldrawDurableObject" },
+]
+
+[[migrations]]
+tag = "v1"
+new_classes = ["TldrawDurableObject"]
+
+[[r2_buckets]]
+binding = 'TLDRAW_BUCKET'
+bucket_name = 'jeffemmett-canvas'
+preview_bucket_name = 'jeffemmett-canvas-preview'
+
+[observability]
+enabled = true
+head_sampling_rate = 1
Author	SHA1	Message	Date
Jeff Emmett	2fc965da28	markdown editor failing at sync	2024-12-08 04:52:14 -05:00
Jeff Emmett	6f4dcb1bcb	markdown editor first attempt	2024-12-08 03:13:19 -05:00
Jeff Emmett	1190848222	lockCamera still almost working	2024-12-08 03:01:28 -05:00
Jeff Emmett	11c88ec0de	lockCameraToFrame almost working	2024-12-08 02:43:19 -05:00
Jeff Emmett	95307ed453	cleanup	2024-12-07 23:22:10 -05:00
Jeff Emmett	bfe6b238e9	cleanup	2024-12-07 23:03:42 -05:00
Jeff Emmett	fe4b40a3fe	Merge pull request #3 from Jeff-Emmett/markdown-textbox cleanup	2024-12-08 11:01:55 +07:00
Jeff Emmett	4fda800e8b	cleanup	2024-12-07 23:00:30 -05:00
Jeff Emmett	7c28758204	cleanup	2024-12-07 22:50:55 -05:00
Jeff Emmett	75c769a774	fix dev script	2024-12-07 22:49:39 -05:00
Jeff Emmett	5d8781462d	npm	2024-12-07 22:48:02 -05:00
Jeff Emmett	b2d6b1599b	bun	2024-12-07 22:23:19 -05:00
Jeff Emmett	c81238c45a	remove deps	2024-12-07 22:15:05 -05:00
Jeff Emmett	f012632cde	prettify and cleanup	2024-12-07 22:01:02 -05:00
Jeff Emmett	78e396d11e	cleanup	2024-12-07 21:42:31 -05:00
Jeff Emmett	cba62a453b	remove homepage board	2024-12-07 21:28:45 -05:00
Jeff Emmett	923f61ac9e	cleanup tools/menu/actions	2024-12-07 21:16:44 -05:00
Jeff Emmett	94bec533c4	Merge pull request #2 from Jeff-Emmett/main-fixed Main fixed	2024-12-08 04:23:27 +07:00
Jeff Emmett	e286a120f1	maybe this works	2024-12-07 16:02:10 -05:00
Jeff Emmett	2e0a05ab32	fix vite config	2024-12-07 15:50:37 -05:00
Jeff Emmett	110fc19b94	one more attempt	2024-12-07 15:35:53 -05:00
Jeff Emmett	111be03907	swap persistentboard with Tldraw native sync	2024-12-07 15:23:56 -05:00
Jeff Emmett	39e6cccc3f	fix CORS	2024-12-07 15:10:25 -05:00
Jeff Emmett	08175d3a7c	fix CORS	2024-12-07 15:03:53 -05:00
Jeff Emmett	3006e85375	fix prod env	2024-12-07 14:57:05 -05:00
Jeff Emmett	632e7979a2	fix CORS	2024-12-07 14:39:57 -05:00
Jeff Emmett	71fc07133a	fix CORS for prod env	2024-12-07 14:33:31 -05:00
Jeff Emmett	97b00c1569	fix prod env	2024-12-07 13:43:56 -05:00
Jeff Emmett	c4198e1faf	add vite env types	2024-12-07 13:31:37 -05:00
Jeff Emmett	6f6c924f66	fix VITE_ worker URL	2024-12-07 13:27:37 -05:00
Jeff Emmett	0eb4407219	fix worker deployment	2024-12-07 13:15:38 -05:00
Jeff Emmett	3a2a38c0b6	fix CORS policy	2024-12-07 12:58:46 -05:00
Jeff Emmett	02124ce920	fix CORS policy	2024-12-07 12:58:25 -05:00
Jeff Emmett	b700846a9c	fixing production env	2024-12-07 12:52:20 -05:00
Jeff Emmett	f7310919f8	fix camerarevert and default to select tool	2024-11-27 13:46:41 +07:00
Jeff Emmett	949062941f	fix default to hand tool	2024-11-27 13:38:54 +07:00
Jeff Emmett	7f497ae8d8	fix camera history	2024-11-27 13:30:45 +07:00
Jeff Emmett	1d817c8e0f	add all function shortcuts to contextmenu	2024-11-27 13:24:11 +07:00
Jeff Emmett	7dd045bb33	fix menus	2024-11-27 13:16:52 +07:00
Jeff Emmett	11d13a03d3	fix menus	2024-11-27 13:01:45 +07:00
Jeff Emmett	3bcfa83168	fix board camera controls	2024-11-27 12:47:52 +07:00
Jeff Emmett	b0a3cd7328	remove copy file creating problems	2024-11-27 12:25:04 +07:00
Jeff Emmett	c71b67e24c	fix vercel	2024-11-27 12:13:29 +07:00
Jeff Emmett	d582be49b2	Merge branch 'add-camera-controls-for-link-to-frame-and-screen-position'	2024-11-27 11:56:36 +07:00
Jeff Emmett	46ee4e7906	fix gitignore	2024-11-27 11:54:05 +07:00
Jeff Emmett	c34418e964	fix durable object reference	2024-11-27 11:34:02 +07:00
Jeff Emmett	1c8909ce69	fix worker url	2024-11-27 11:31:16 +07:00
Jeff Emmett	5f2c90219d	fix board	2024-11-27 11:27:59 +07:00
Jeff Emmett	fef2ca0eb3	fixing final	2024-11-27 11:26:25 +07:00
Jeff Emmett	eab574e130	fix underscore	2024-11-27 11:23:46 +07:00
Jeff Emmett	b2656c911b	fix durableobject	2024-11-27 11:21:33 +07:00
Jeff Emmett	6ba124b038	fix env vars in vite	2024-11-27 11:17:29 +07:00
Jeff Emmett	1cd7208ddf	fix vite and asset upload	2024-11-27 11:14:52 +07:00
Jeff Emmett	d555910c77	fixed wrangler.toml	2024-11-27 11:07:15 +07:00
Jeff Emmett	d1a8407a9b	swapped in daily.co video and removed whereby sdk, finished zoom and copylink except for context menu display	2024-11-27 10:39:33 +07:00
Jeff Emmett	db3205f97a	almost everything working, except maybe offline storage state (and browser reload)	2024-11-25 22:09:41 +07:00
Jeff Emmett	100b88268b	CRDTs working, still finalizing local board state browser storage for offline board access	2024-11-25 16:18:05 +07:00
Jeff Emmett	202971f343	checkpoint before google auth	2024-11-21 17:00:46 +07:00
Jeff Emmett	b26b9e6384	final copy fix	2024-10-22 19:19:47 -04:00
Jeff Emmett	4d69340a6b	update copy	2024-10-22 19:13:14 -04:00
Jeff Emmett	14e0126995	site copy update	2024-10-21 12:12:22 -04:00
Jeff Emmett	04782854d2	fix board	2024-10-19 23:30:04 -04:00
Jeff Emmett	4eff918bd3	fixed a bunch of stuff	2024-10-19 23:21:42 -04:00
Jeff Emmett	4e2103aab2	fix mobile embed	2024-10-19 16:20:54 -04:00
Jeff Emmett	895d02a19c	embeds work!	2024-10-19 00:42:23 -04:00
Jeff Emmett	375f69b365	CustomMainMenu	2024-10-18 23:54:28 -04:00
Jeff Emmett	09a729c787	remove old chatboxes	2024-10-18 23:37:27 -04:00
Jeff Emmett	bb8a76026e	fix	2024-10-18 23:14:18 -04:00
Jeff Emmett	4319a6b1ee	fix chatbox	2024-10-18 23:09:25 -04:00
Jeff Emmett	2ca6705599	update	2024-10-18 22:55:35 -04:00
Jeff Emmett	07556dd53a	remove old chatbox	2024-10-18 22:47:23 -04:00
Jeff Emmett	c93b3066bd	serializedRoom	2024-10-18 22:31:20 -04:00
Jeff Emmett	d282f6b650	deploy logs	2024-10-18 22:23:28 -04:00
Jeff Emmett	c34cae40b6	fixing worker	2024-10-18 22:14:48 -04:00
Jeff Emmett	46b54394ad	remove old chat rooms	2024-10-18 21:58:29 -04:00
Jeff Emmett	b05aa413e3	resize	2024-10-18 21:30:16 -04:00
Jeff Emmett	2435f3f495	resize	2024-10-18 21:26:53 -04:00
Jeff Emmett	49bca38b5f	it works!	2024-10-18 21:04:53 -04:00
Jeff Emmett	0d7ee5889c	fixing video	2024-10-18 20:59:46 -04:00
Jeff Emmett	a0bba93055	update	2024-10-18 18:59:06 -04:00
Jeff Emmett	a2d7ab4af0	remove prefix	2024-10-18 18:08:05 -04:00
Jeff Emmett	99f7f131ed	fix	2024-10-18 17:54:45 -04:00
Jeff Emmett	c369762001	revert	2024-10-18 17:41:50 -04:00
Jeff Emmett	d81ae56de0	Merge pull request #1 from Jeff-Emmett/Video-Chat-Attempt Video chat attempt	2024-10-18 17:38:25 -04:00
Jeff Emmett	f384673cf9	replace all ChatBox with chatBox	2024-10-18 17:35:05 -04:00
Jeff Emmett	670c9ff0b0	maybe	2024-10-18 17:24:43 -04:00
Jeff Emmett	2ac4ec8de3	yay	2024-10-18 14:58:54 -04:00
Jeff Emmett	7e16f6e6b0	hi	2024-10-18 14:43:31 -04:00
Jeff Emmett	63cd76e919	add editor back in	2024-10-17 17:08:55 -04:00
Jeff Emmett	91df5214c6	remove editor in board.tsx	2024-10-17 17:00:48 -04:00
Jeff Emmett	900833c06c	Fix live site	2024-10-17 16:21:00 -04:00
Jeff Emmett	700875434f	good hygiene commit	2024-10-17 14:54:23 -04:00
Jeff Emmett	9d5d0d6655	big mess of a commit	2024-10-16 11:20:26 -04:00
Jeff Emmett	8ce8dec8f7	video chat attempt	2024-09-04 17:52:58 +02:00
Jeff Emmett	836d37df76	update msgboard UX	2024-08-31 16:17:05 +02:00
Jeff Emmett	2c35a0c53c	fix stuff	2024-08-31 15:00:06 +02:00
Jeff Emmett	a8c8d62e63	fix image/asset handling	2024-08-31 13:06:13 +02:00
Jeff Emmett	807637eae0	update gitignore	2024-08-31 12:50:29 +02:00
Jeff Emmett	572608f878	multiboard	2024-08-30 12:31:52 +02:00
Jeff Emmett	6747c5df02	move	2024-08-30 10:17:36 +02:00
Jeff Emmett	2c4b2f6c91	more stuff	2024-08-30 09:44:11 +02:00
Jeff Emmett	80cda32cba	change	2024-08-29 22:07:38 +02:00
Jeff Emmett	032e4e1199	conf	2024-08-29 21:40:29 +02:00
Jeff Emmett	04676b3788	fix again	2024-08-29 21:35:13 +02:00
Jeff Emmett	d6f3830884	fix plz	2024-08-29 21:33:48 +02:00
Jeff Emmett	50c7c52c3d	update build step	2024-08-29 21:22:40 +02:00
Jeff Emmett	a6eb2abed0	fixed?	2024-08-29 21:20:33 +02:00
Jeff Emmett	1c38cb1bdb	multiplayer	2024-08-29 21:15:13 +02:00
Jeff Emmett	932c9935d5	multiplayer	2024-08-29 20:20:12 +02:00
Jeff Emmett	249031619d	commit cal	2024-08-15 13:48:39 -04:00
Jeff Emmett	408df0d11e	commit conviction voting	2024-08-11 20:37:10 -04:00
Jeff Emmett	fc602ff943	Update Contact.tsx	2024-08-11 20:28:52 -04:00
Jeff Emmett	d34e586215	poll for impox updates	2024-08-11 01:13:11 -04:00
Jeff Emmett	ee2484f1d0	commit goat	2024-08-11 00:55:34 -04:00
Jeff Emmett	0ac03dec60	commit Books	2024-08-11 00:06:23 -04:00
Jeff Emmett	5f3cf2800c	name update	2024-08-10 10:41:35 -04:00
Jeff Emmett	206d2a57ec	cooptation	2024-08-10 10:27:38 -04:00
Jeff Emmett	87118b86d5	board commit	2024-08-10 01:53:56 -04:00
Jeff Emmett	58cb4da348	board commit	2024-08-10 01:47:58 -04:00
Jeff Emmett	d087b61ce5	board commit	2024-08-10 01:43:09 -04:00
Jeff Emmett	9d73295702	oriomimicry	2024-08-09 23:14:58 -04:00
Jeff Emmett	3e6db31c69	Update	2024-08-09 18:34:12 -04:00
Jeff Emmett	b8038a6a97	Merge branch 'main' of https://github.com/Jeff-Emmett/canvas-website	2024-08-09 18:27:38 -04:00
Jeff Emmett	ee49689416	Update and rename page.html to index.html	2024-08-09 18:18:06 -04:00