Add tldraw whiteboard assets

.env.example

@@ -1 +1,2 @@
 PUBLIC_JAZZ_SYNC_SERVER=wss://alkalye-sync.localhost
+PUBLIC_TLDRAW_LICENSE_KEY=

astro.config.ts

@@ -15,6 +15,18 @@ export default defineConfig({
 		routing: { prefixDefaultLocale: false },
 	},
 	vite: {
+		build: {
+			rollupOptions: {
+				output: {
+					onlyExplicitManualChunks: true,
+					manualChunks(id) {
+						let match = id.match(/node_modules\/@tldraw\/([^/]+)/)
+						if (match?.[1]) return `tldraw-${match[1]}`
+						if (id.includes("/node_modules/tldraw/")) return "tldraw"
+					},
+				},
+			},
+		},
 		plugins: [
 			tanstackRouter({
 				target: "react",
@@ -75,7 +87,7 @@ export default defineConfig({
 				globPatterns: ["**/*.{js,css,html,ico,png,svg,woff2,woff,ttf}"],
 				navigateFallback: "app",
 				navigateFallbackAllowlist: [/^\/app(?:\/.*)?(?:\?.*)?$/],
-				maximumFileSizeToCacheInBytes: 5 * 1024 * 1024,
+				maximumFileSizeToCacheInBytes: 5.5 * 1024 * 1024,
 			},
 		}),
 	],
@@ -85,6 +97,11 @@ export default defineConfig({
 				context: "client",
 				access: "public",
 			}),
+			PUBLIC_TLDRAW_LICENSE_KEY: envField.string({
+				context: "client",
+				access: "public",
+				optional: true,
+			}),
 		},
 	},
 })

e2e/space-helpers.ts

@@ -173,7 +173,6 @@ async function createSpaceInvite(page: Page, args: CreateSpaceInviteArgs) {
 	await expect(input).toBeVisible({ timeout: 10_000 })
 	let link = await input.inputValue()
 	let inviteGroupId = parseInviteGroupId(link)
-	await page.waitForTimeout(3_000)
 
 	return {
 		ok: true,
@@ -266,8 +265,9 @@ async function acceptSpaceInvite(page: Page, args: AcceptSpaceInviteArgs) {
 
 	if (spaceId) {
 		await expect
-			.poll(() => invitePage.url())
-			.toContain(`/app/spaces/${spaceId}`)
+			.poll(() => invitePage.url(), { timeout: 30_000 })
+			.toMatch(new RegExp(`/app/spaces/${spaceId}/doc/`))
+		await expect(invitePage.getByText("Space not found")).toBeHidden()
 	}
 
 	let url = invitePage.url()

package.json

@@ -81,6 +81,7 @@
 		"sonner": "^2.0.7",
 		"tailwind-merge": "^3.4.0",
 		"tailwindcss": "^4.1.18",
+		"tldraw": "^5.2.2",
 		"tw-animate-css": "^1.4.0",
 		"vite-plugin-pwa": "^1.2.0",
 		"zod": "^4.3.6",

public/tldraw/translations/en.json

@@ -0,0 +1 @@
+{}

src/app/components/ui/dialog.tsx

@@ -54,17 +54,21 @@ function DialogContent({
 	className,
 	children,
 	showCloseButton = true,
+	animated = true,
 	...props
 }: DialogPrimitive.Popup.Props & {
 	showCloseButton?: boolean
+	animated?: boolean
 }) {
 	return (
 		<DialogPortal>
 			<DialogOverlay />
 			<DialogPrimitive.Popup
 				data-slot="dialog-content"
 				className={cn(
-					"bg-background data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 ring-foreground/10 fixed left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 gap-4 rounded-none p-4 text-xs/relaxed ring-1 duration-100 outline-none sm:max-w-sm",
+					"bg-background ring-foreground/10 fixed left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 gap-4 rounded-none p-4 text-xs/relaxed ring-1 outline-none sm:max-w-sm",
+					animated &&
+						"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 duration-100",
 					"top-[max(1rem,env(safe-area-inset-top))] sm:top-1/2 sm:-translate-y-1/2",
 					className,
 				)}

src/app/features/assets/index.ts

@@ -1,4 +1,40 @@
-export { Asset, ImageAsset, VideoAsset } from "./lib/schema"
+export {
+	Asset,
+	ImageAsset,
+	VideoAsset,
+	TldrawAsset,
+	TldrawRevision,
+} from "./lib/schema"
+export {
+	createTldrawAsset,
+	updateTldrawAsset,
+	tldrawNameFromFile,
+} from "./lib/tldraw"
+export type { TldrawSave } from "./lib/tldraw"
+export { TldrawEditorDialog } from "./widgets/tldraw-editor-dialog"
+export { useTldrawEditor } from "./widgets/use-tldraw-editor"
+export { SidebarAssets } from "./widgets/sidebar-assets"
+export type { SidebarAsset } from "./widgets/sidebar-assets"
+export {
+	toEditorAsset,
+	toSidebarAsset,
+	type EditorAsset,
+} from "./lib/asset-view-models"
+export { assetPreviewResolve, assetContentResolve } from "./lib/asset-resolve"
+export {
+	TLDRAW_BACKUP_EXTENSION,
+	TLDRAW_BACKUP_MIME_TYPE,
+	AssetSerializationError,
+	classifyAssetFile,
+	isAssetFileName,
+	assetMimeTypeFromFileName,
+	assetExtensionFromMimeType,
+	serializeAsset,
+	createAssetFromFile,
+	updateAssetFromFile,
+	type AssetFileKind,
+} from "./lib/asset-transfer"
+export { copyAsset } from "./lib/asset-copy"
 export {
 	makeUploadImage,
 	makeUploadVideo,
@@ -15,4 +51,3 @@ export {
 	VideoCompressionError,
 } from "./lib/video-conversion"
 export { imageExtensions } from "./lib/editor-extension"
-export { SidebarAssets, type SidebarAsset } from "./widgets/sidebar-assets"

src/app/features/assets/lib/asset-copy.ts

@@ -0,0 +1,62 @@
+import { co, type Group } from "jazz-tools"
+import { createImage } from "jazz-tools/media"
+import { Asset, ImageAsset, TldrawRevision, VideoAsset } from "./schema"
+import { copyTldrawRevision, createTldrawAssetFromRevision } from "./tldraw"
+
+export { copyAsset }
+
+interface CopyAssetOptions {
+	name?: string
+	tldrawRevision?: co.loaded<typeof TldrawRevision>
+}
+
+async function copyAsset(
+	asset: co.loaded<typeof Asset>,
+	owner: Group,
+	options: CopyAssetOptions = {},
+) {
+	let name = options.name ?? asset.name
+	let createdAt = new Date()
+	switch (asset.type) {
+		case "image": {
+			let loaded = await asset.$jazz.ensureLoaded({
+				resolve: { image: { original: true } },
+			})
+			let blob = loaded.image.original.toBlob()
+			if (!blob) throw new Error("Image asset is incomplete")
+			let image = await createImage(blob, { owner, maxSize: 2048 })
+			return ImageAsset.create({ type: "image", name, image, createdAt }, owner)
+		}
+		case "video": {
+			let loaded = await asset.$jazz.ensureLoaded({ resolve: { video: true } })
+			let blob = loaded.video.toBlob()
+			if (!blob) throw new Error("Video asset is incomplete")
+			let video = await co.fileStream().createFromBlob(blob, { owner })
+			return VideoAsset.create(
+				{
+					type: "video",
+					name,
+					video,
+					mimeType: asset.mimeType,
+					muteAudio: asset.muteAudio,
+					createdAt,
+				},
+				owner,
+			)
+		}
+		case "tldraw": {
+			let revision =
+				options.tldrawRevision ??
+				(await asset.$jazz.ensureLoaded({ resolve: { revision: true } }))
+					.revision
+			let copied = await copyTldrawRevision(revision, owner)
+			return createTldrawAssetFromRevision(name, copied, owner, createdAt)
+		}
+		default:
+			return unsupportedAsset(asset)
+	}
+}
+
+function unsupportedAsset(asset: never): never {
+	throw new Error(`Unsupported asset: ${asset}`)
+}

src/app/features/assets/lib/asset-handlers.ts

@@ -209,14 +209,22 @@ function makeDownloadAsset(doc: LoadedDocument) {
 			}
 		} else if (asset.type === "video" && asset.video?.$isLoaded) {
 			blob = asset.video.toBlob()
+		} else if (asset.type === "tldraw" && asset.revision?.$isLoaded) {
+			let revision = await asset.revision.$jazz.ensureLoaded({
+				resolve: { snapshot: true },
+			})
+			blob = revision.snapshot.toBlob()
 		}
 
 		if (!blob) return
 
 		let url = URL.createObjectURL(blob)
 		let a = document.createElement("a")
 		a.href = url
-		a.download = `${name}.${blob.type.split("/")[1] || "png"}`
+		a.download =
+			asset.type === "tldraw"
+				? `${name}.tldr`
+				: `${name}.${blob.type.split("/")[1] || "png"}`
 		document.body.appendChild(a)
 		a.click()
 		document.body.removeChild(a)

src/app/features/assets/lib/asset-resolve.ts

@@ -0,0 +1,23 @@
+import type { ResolveQuery } from "jazz-tools"
+import { Asset } from "./schema"
+
+export { assetPreviewResolve, assetContentResolve }
+
+let assetPreviewResolve = {
+	image: true,
+	video: true,
+	revision: {
+		lightPreview: true,
+		darkPreview: true,
+	},
+} as const satisfies ResolveQuery<typeof Asset>
+
+let assetContentResolve = {
+	image: true,
+	video: true,
+	revision: {
+		snapshot: true,
+		lightPreview: true,
+		darkPreview: true,
+	},
+} as const satisfies ResolveQuery<typeof Asset>

src/app/features/assets/lib/asset-transfer.test.ts

@@ -0,0 +1,34 @@
+import { describe, expect, test } from "vitest"
+import {
+	TLDRAW_BACKUP_MIME_TYPE,
+	assetExtensionFromMimeType,
+	assetMimeTypeFromFileName,
+	classifyAssetFile,
+	isAssetFileName,
+} from "./asset-transfer"
+
+describe("asset file transfer", () => {
+	test.each([
+		["photo.png", "", "image"],
+		["recording", "video/webm", "video"],
+		["board.alkalye-tldraw", "", "tldraw"],
+		["board", TLDRAW_BACKUP_MIME_TYPE, "tldraw"],
+	] as const)("classifies %s", (name, type, expected) => {
+		expect(classifyAssetFile({ name, type })).toBe(expected)
+	})
+
+	test("rejects unsupported files", () => {
+		expect(classifyAssetFile({ name: "notes.pdf", type: "" })).toBeNull()
+		expect(isAssetFileName("notes.pdf")).toBe(false)
+	})
+
+	test("owns asset mime and extension mappings", () => {
+		expect(assetMimeTypeFromFileName("clip.mov")).toBe("video/quicktime")
+		expect(assetMimeTypeFromFileName("board.alkalye-tldraw")).toBe(
+			TLDRAW_BACKUP_MIME_TYPE,
+		)
+		expect(assetExtensionFromMimeType(TLDRAW_BACKUP_MIME_TYPE)).toBe(
+			".alkalye-tldraw",
+		)
+	})
+})