[pull] main from tldraw:main

.gitignore

@@ -89,6 +89,7 @@ apps/examples/www/index.js
 
 apps/examples/build.esbuild.json
 
+test-results
 apps/examples/e2e/test-results
 apps/examples/playwright-report
 apps/dotcom/client/test-results

apps/dotcom/client/public/tla/locales-compiled/en.json

@@ -407,6 +407,12 @@
       "value": "Revoke this link and create a new one."
     }
   ],
+  "5d04a002ea": [
+    {
+      "type": 0,
+      "value": "Unable to connect"
+    }
+  ],
   "5d26ae7550": [
     {
       "type": 0,
@@ -449,6 +455,12 @@
       "value": "you"
     }
   ],
+  "63a6a88c06": [
+    {
+      "type": 0,
+      "value": "Refresh"
+    }
+  ],
   "6609dd239e": [
     {
       "type": 0,
@@ -799,6 +811,12 @@
       "value": "Delete file"
     }
   ],
+  "9ccb565b86": [
+    {
+      "type": 0,
+      "value": "We're having trouble connecting to our authentication service. This is usually temporary. Please try refreshing the page."
+    }
+  ],
   "9ceb927baa": [
     {
       "type": 0,

apps/dotcom/client/public/tla/locales/en.json

@@ -182,6 +182,9 @@
   "5c6fe42bc2": {
     "translation": "Revoke this link and create a new one."
   },
+  "5d04a002ea": {
+    "translation": "Unable to connect"
+  },
   "5d26ae7550": {
     "translation": "We failed to upload some of the content you created before you signed in."
   },
@@ -203,6 +206,9 @@
   "639bae9ac6": {
     "translation": "you"
   },
+  "63a6a88c06": {
+    "translation": "Refresh"
+  },
   "6609dd239e": {
     "translation": "Something went wrong"
   },
@@ -353,6 +359,9 @@
   "9bef626805": {
     "translation": "Delete file"
   },
+  "9ccb565b86": {
+    "translation": "We're having trouble connecting to our authentication service. This is usually temporary. Please try refreshing the page."
+  },
   "9ceb927baa": {
     "translation": "Publish this file"
   },

apps/dotcom/client/src/components/ErrorPage/ErrorPage.tsx

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react'
+import { Component, ReactNode } from 'react'
 import { Link } from 'react-router-dom'
 import translationsEnJson from '../../../public/tla/locales-compiled/en.json'
 import { F, IntlProvider } from '../../tla/utils/i18n'
@@ -44,7 +44,7 @@ export function ErrorPage({
 	cta = <GoBackLink />,
 }: {
 	icon?: ReactNode
-	messages: { header: string; para1: string; para2?: string }
+	messages: { header: string; para1: string; para2?: string; cta?: string }
 	cta?: ReactNode
 }) {
 	return (
@@ -64,3 +64,27 @@ export function ErrorPage({
 		</IntlProvider>
 	)
 }
+
+/** An error boundary that shows an ErrorPage with a refresh button. */
+export class RefreshErrorBoundary extends Component<
+	{ children: ReactNode; messages: { header: string; para1: string; cta: string } },
+	{ hasError: boolean }
+> {
+	state = { hasError: false }
+
+	static getDerivedStateFromError() {
+		return { hasError: true }
+	}
+
+	render() {
+		if (this.state.hasError) {
+			return (
+				<ErrorPage
+					messages={this.props.messages}
+					cta={<button onClick={() => window.location.reload()}>{this.props.messages.cta}</button>}
+				/>
+			)
+		}
+		return this.props.children
+	}
+}

apps/dotcom/client/src/main.tsx

@@ -4,11 +4,19 @@ import { HelmetProvider } from 'react-helmet-async'
 import { RouterProvider, createBrowserRouter } from 'react-router-dom'
 import '../sentry.client.config'
 import '../styles/globals.css'
+import { RefreshErrorBoundary } from './components/ErrorPage/ErrorPage'
 import { Head } from './components/Head/Head'
 import { routes } from './routeDefs'
 import { router } from './routes'
 import { showConsoleBranding } from './utils/consoleBranding'
 
+const TOP_LEVEL_ERROR_MESSAGES = {
+	header: 'Unable to connect',
+	para1:
+		'Something went wrong while loading the page. This is usually temporary. Please try refreshing.',
+	cta: 'Refresh',
+}
+
 const browserRouter = createBrowserRouter(router)
 
 // @ts-ignore this is fine
@@ -19,18 +27,20 @@ if (!PUBLISHABLE_KEY) {
 }
 
 createRoot(document.getElementById('root')!).render(
-	<ClerkProvider
-		publishableKey={PUBLISHABLE_KEY}
-		afterSignOutUrl={routes.tlaRoot()}
-		signInUrl="/"
-		signInFallbackRedirectUrl={routes.tlaRoot()}
-		signUpFallbackRedirectUrl={routes.tlaRoot()}
-	>
-		<HelmetProvider>
-			<Head />
-			<RouterProvider router={browserRouter} />
-		</HelmetProvider>
-	</ClerkProvider>
+	<RefreshErrorBoundary messages={TOP_LEVEL_ERROR_MESSAGES}>
+		<ClerkProvider
+			publishableKey={PUBLISHABLE_KEY}
+			afterSignOutUrl={routes.tlaRoot()}
+			signInUrl="/"
+			signInFallbackRedirectUrl={routes.tlaRoot()}
+			signUpFallbackRedirectUrl={routes.tlaRoot()}
+		>
+			<HelmetProvider>
+				<Head />
+				<RouterProvider router={browserRouter} />
+			</HelmetProvider>
+		</ClerkProvider>
+	</RefreshErrorBoundary>
 )
 
 showConsoleBranding()

apps/dotcom/client/src/tla/components/TlaFileShareMenu/Tabs/TlaExportTab.tsx

@@ -230,7 +230,7 @@ function ExportImageButton() {
 		}
 
 		const opts = {
-			padding: exportPadding ? editor.options.defaultSvgPadding : 0,
+			padding: exportPadding ? editor.options.defaultSvgPadding : ('auto' as const),
 			background: exportBackground,
 			darkMode: exportTheme === 'auto' ? undefined : exportTheme === 'dark',
 			format: exportFormat as TLExportType,
@@ -346,7 +346,7 @@ async function getEditorImage(
 	const result = await editor.toImage(shapes, {
 		scale,
 		format: 'png',
-		padding: exportPadding ? editor.options.defaultSvgPadding : 0,
+		padding: exportPadding ? editor.options.defaultSvgPadding : ('auto' as const),
 		background: exportBackground,
 		darkMode: exportTheme === 'auto' ? undefined : exportTheme === 'dark',
 	})

apps/dotcom/client/src/tla/providers/TlaRootProviders.tsx

@@ -23,7 +23,7 @@ import {
 	useValue,
 } from 'tldraw'
 import translationsEnJson from '../../../public/tla/locales-compiled/en.json'
-import { ErrorPage } from '../../components/ErrorPage/ErrorPage'
+import { ErrorPage, RefreshErrorBoundary } from '../../components/ErrorPage/ErrorPage'
 import { SignedInAnalytics, SignedOutAnalytics, trackEvent } from '../../utils/analytics'
 import { globalEditor } from '../../utils/globalEditor'
 import { TlaCookieConsent } from '../components/dialogs/TlaCookieConsent'
@@ -66,6 +66,16 @@ export const appMessages = defineMessages({
 	oldBrowser: {
 		defaultMessage: 'Old browser detected. Please update your browser to use this app.',
 	},
+	clerkUnavailable: {
+		defaultMessage: 'Unable to connect',
+	},
+	clerkUnavailablePara: {
+		defaultMessage:
+			"We're having trouble connecting to our authentication service. This is usually temporary. Please try refreshing the page.",
+	},
+	refresh: {
+		defaultMessage: 'Refresh',
+	},
 })
 
 // @ts-ignore this is fine
@@ -75,6 +85,14 @@ if (!PUBLISHABLE_KEY) {
 	throw new Error('Missing Publishable Key')
 }
 
+const CLERK_LOAD_TIMEOUT_MS = 10_000
+
+const CLERK_ERROR_MESSAGES = {
+	header: appMessages.clerkUnavailable.defaultMessage,
+	para1: appMessages.clerkUnavailablePara.defaultMessage,
+	cta: appMessages.refresh.defaultMessage,
+}
+
 export function Component() {
 	const [container, setContainer] = useState<HTMLElement | null>(null)
 	// TODO: this needs to default to the global setting of whatever the last chosen locale was, not 'en'
@@ -112,20 +130,22 @@ export function Component() {
 				'tla-focus-mode': isFocusMode,
 			})}
 		>
-			<IntlWrapper locale={locale}>
-				<MaybeForceUserRefresh>
-					<SignedInProvider onThemeChange={handleThemeChange} onLocaleChange={handleLocaleChange}>
-						{container && (
-							<ContainerProvider container={container}>
-								<InsideOfContainerContext>
-									<Outlet />
-									<LegalTermsAcceptance />
-								</InsideOfContainerContext>
-							</ContainerProvider>
-						)}
-					</SignedInProvider>
-				</MaybeForceUserRefresh>
-			</IntlWrapper>
+			<RefreshErrorBoundary messages={CLERK_ERROR_MESSAGES}>
+				<IntlWrapper locale={locale}>
+					<MaybeForceUserRefresh>
+						<SignedInProvider onThemeChange={handleThemeChange} onLocaleChange={handleLocaleChange}>
+							{container && (
+								<ContainerProvider container={container}>
+									<InsideOfContainerContext>
+										<Outlet />
+										<LegalTermsAcceptance />
+									</InsideOfContainerContext>
+								</ContainerProvider>
+							)}
+						</SignedInProvider>
+					</MaybeForceUserRefresh>
+				</IntlWrapper>
+			</RefreshErrorBoundary>
 			<WatermarkOverride />
 		</div>
 	)
@@ -234,7 +254,32 @@ function SignedInProvider({
 		}
 	}, [auth.userId, auth.isSignedIn, auth.isLoaded])
 
-	if (!auth.isLoaded) return null
+	const [clerkTimedOut, setClerkTimedOut] = useState(false)
+
+	useEffect(() => {
+		if (auth.isLoaded) return
+		const timeout = setTimeout(() => setClerkTimedOut(true), CLERK_LOAD_TIMEOUT_MS)
+		return () => clearTimeout(timeout)
+	}, [auth.isLoaded])
+
+	if (!auth.isLoaded) {
+		if (clerkTimedOut) {
+			return (
+				<ErrorPage
+					messages={{
+						header: intl.formatMessage(appMessages.clerkUnavailable),
+						para1: intl.formatMessage(appMessages.clerkUnavailablePara),
+					}}
+					cta={
+						<button onClick={() => window.location.reload()}>
+							{intl.formatMessage(appMessages.refresh)}
+						</button>
+					}
+				/>
+			)
+		}
+		return null
+	}
 
 	// Old browsers check.
 	if (!('findLastIndex' in Array.prototype)) {

apps/dotcom/client/src/tla/utils/local-session-state.ts

@@ -54,7 +54,7 @@ const defaultSessionState: TldrawAppSessionState = {
 		exportFormat: 'png',
 		exportTheme: 'auto',
 		exportBackground: true,
-		exportPadding: true,
+		exportPadding: false,
 	},
 	sidebarWidth: 260,
 }

apps/dotcom/client/styles/globals.css

@@ -190,6 +190,8 @@ a {
 	align-items: center;
 	justify-content: center;
 	text-align: center;
+	max-width: 500px;
+	text-wrap: balance;
 }
 
 /* text-header mb-sm */
@@ -206,12 +208,16 @@ a {
 }
 
 /* text-primary-bold text-grey */
-.error-page__container a {
+.error-page__container a,
+.error-page__container button {
 	font-size: 14px;
 	font-weight: 500;
 	color: var(--text-color-2);
 	padding: 12px 4px;
 	text-decoration: underline;
+	background: none;
+	border: none;
+	cursor: pointer;
 }
 
 /* ------------------ Board history ----------------- */

apps/dotcom/sync-worker/src/TLDrawDurableObject.ts

@@ -665,12 +665,9 @@ export class TLFileDurableObject extends DurableObject {
 			return new Response('Forbidden', { status: 403 })
 		}
 
-		const key = getR2KeyForRoom({ slug: this.documentInfo.slug, isApp: true })
-		const roomR2 = await this.r2.rooms.get(key)
-		if (!roomR2) {
-			return new Response('Not found', { status: 404 })
-		}
-		const snapshot = (await roomR2.json()) as RoomSnapshot
+		const storage = await this.getStorage()
+		assert(storage instanceof SQLiteSyncStorage, 'storage must be a SQLiteSyncStorage')
+		const snapshot = storage.getSnapshot()
 		const records = pruneUnusedAssetsForTldr(snapshot.documents.map((d) => d.state) as TLRecord[])
 
 		const assetRows = await this.db

apps/mcp-app/LICENSE.md

@@ -0,0 +1,9 @@
+MIT License
+
+Copyright (c) 2024 tldraw Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.