code · pull · Jun 20, 2026 · Jun 20, 2026 · Jun 20, 2026 · Jun 20, 2026
diff --git a/apps/dotcom/client/src/components/ErrorPage/ErrorPage.tsx b/apps/dotcom/client/src/components/ErrorPage/ErrorPage.tsx
@@ -1,6 +1,7 @@
 import { Component, ReactNode } from 'react'
 import { Link } from 'react-router-dom'
 import translationsEnJson from '../../../public/tla/locales-compiled/en.json'
+import { TlaButton } from '../../tla/components/TlaButton/TlaButton'
 import { F, IntlProvider } from '../../tla/utils/i18n'
 import { isInIframe } from '../../utils/iFrame'
 
@@ -81,7 +82,11 @@ export class RefreshErrorBoundary extends Component<
 			return (
 				<ErrorPage
 					messages={this.props.messages}
-					cta={<button onClick={() => window.location.reload()}>{this.props.messages.cta}</button>}
+					cta={
+						<TlaButton variant="primary" onClick={() => window.location.reload()}>
+							{this.props.messages.cta}
+						</TlaButton>
+					}
 				/>
 			)
 		}

diff --git a/apps/dotcom/client/src/components/IFrameProtector.tsx b/apps/dotcom/client/src/components/IFrameProtector.tsx
@@ -1,5 +1,6 @@
 import { ReactNode, useEffect } from 'react'
 import { useUrl } from '../hooks/useUrl'
+import { TlaIcon } from '../tla/components/TlaIcon/TlaIcon'
 import { trackEvent } from '../utils/analytics'
 import { getParentOrigin, isInIframe } from '../utils/iFrame'
 
@@ -64,20 +65,7 @@ export function IFrameProtector({
 				<div className="iframe-warning__container">
 					<a className="iframe-warning__link" href={url} rel="noopener noreferrer" target="_blank">
 						{'Visit this page on tldraw.com'}
-						<svg
-							width="15"
-							height="15"
-							viewBox="0 0 15 15"
-							fill="none"
-							xmlns="http://www.w3.org/2000/svg"
-						>
-							<path
-								d="M3 2C2.44772 2 2 2.44772 2 3V12C2 12.5523 2.44772 13 3 13H12C12.5523 13 13 12.5523 13 12V8.5C13 8.22386 12.7761 8 12.5 8C12.2239 8 12 8.22386 12 8.5V12H3V3L6.5 3C6.77614 3 7 2.77614 7 2.5C7 2.22386 6.77614 2 6.5 2H3ZM12.8536 2.14645C12.9015 2.19439 12.9377 2.24964 12.9621 2.30861C12.9861 2.36669 12.9996 2.4303 13 2.497L13 2.5V2.50049V5.5C13 5.77614 12.7761 6 12.5 6C12.2239 6 12 5.77614 12 5.5V3.70711L6.85355 8.85355C6.65829 9.04882 6.34171 9.04882 6.14645 8.85355C5.95118 8.65829 5.95118 8.34171 6.14645 8.14645L11.2929 3H9.5C9.22386 3 9 2.77614 9 2.5C9 2.22386 9.22386 2 9.5 2H12.4999H12.5C12.5678 2 12.6324 2.01349 12.6914 2.03794C12.7504 2.06234 12.8056 2.09851 12.8536 2.14645Z"
-								fill="currentColor"
-								stroke="black"
-								strokeWidth=".5"
-							></path>
-						</svg>
+						<TlaIcon icon="external" inline />
 					</a>
 				</div>
 			</div>

diff --git a/apps/dotcom/client/src/components/StoreErrorScreen.tsx b/apps/dotcom/client/src/components/StoreErrorScreen.tsx
@@ -1,4 +1,5 @@
 import { TLRemoteSyncError, TLSyncErrorCloseEventReason } from '@tldraw/sync-core'
+import { TlaButton } from '../tla/components/TlaButton/TlaButton'
 import { ErrorPage } from './ErrorPage/ErrorPage'
 import LoginRedirectPage from './LoginRedirectPage/LoginRedirectPage'
 
@@ -24,7 +25,11 @@ export function StoreErrorScreen({ error }: { error: Error }) {
 							header: 'Refresh the page',
 							para1: 'You need to update to the latest version of tldraw to continue.',
 						}}
-						cta={<button onClick={() => window.location.reload()}>Refresh</button>}
+						cta={
+							<TlaButton variant="primary" onClick={() => window.location.reload()}>
+								Refresh
+							</TlaButton>
+						}
 					/>
 				)
 			}

diff --git a/apps/dotcom/client/src/pages/admin.module.css b/apps/dotcom/client/src/pages/admin.module.css
@@ -40,19 +40,19 @@
 	padding: 24px 32px;
 	display: flex;
 	flex-direction: column;
-	gap: 32px;
+	gap: var(--tl-space-8);
 	overflow: auto;
 }
 
 .adminSection {
 	display: flex;
 	flex-direction: column;
-	gap: 16px;
+	gap: var(--tl-space-5);
 }
 
 .searchContainer {
 	display: flex;
-	gap: 12px;
+	gap: var(--tl-space-4);
 	align-items: center;
 }
 
@@ -100,7 +100,7 @@
 
 .userActions {
 	display: flex;
-	gap: 12px;
+	gap: var(--tl-space-4);
 	align-items: center;
 }
 
@@ -116,7 +116,7 @@
 	background-color: var(--tl-color-low);
 	border: 1px solid var(--tl-color-divider);
 	border-radius: var(--tl-radius-1);
-	padding: 16px;
+	padding: var(--tl-space-5);
 	font-family: 'IBMPlexMono', monospace;
 	font-size: 11px;
 	line-height: 1.4;
@@ -129,38 +129,38 @@
 .fileOperations {
 	display: flex;
 	flex-direction: column;
-	gap: 16px;
+	gap: var(--tl-space-5);
 }
 
 .fileOperation {
 	display: flex;
 	flex-direction: column;
-	gap: 12px;
-	padding: 16px;
+	gap: var(--tl-space-4);
+	padding: var(--tl-space-5);
 	background-color: var(--tl-color-panel);
 	border: 1px solid var(--tl-color-divider);
 	border-radius: var(--tl-radius-1);
 }
 
 .downloadContainer {
 	display: flex;
-	gap: 12px;
+	gap: var(--tl-space-4);
 	align-items: center;
 }
 
 .dangerZone {
 	display: flex;
 	flex-direction: column;
-	gap: 12px;
-	padding: 16px;
+	gap: var(--tl-space-4);
+	padding: var(--tl-space-5);
 	background-color: var(--tl-color-panel);
 	border: 1px solid var(--tl-color-danger);
 	border-radius: var(--tl-radius-1);
 }
 
 .deleteContainer {
 	display: flex;
-	gap: 12px;
+	gap: var(--tl-space-4);
 	align-items: center;
 }
 
@@ -171,7 +171,7 @@
 /* Progress Log */
 .progressLog {
 	margin-top: 16px;
-	padding: 16px;
+	padding: var(--tl-space-5);
 	background-color: var(--tl-color-low);
 	border: 1px solid var(--tl-color-divider);
 	border-radius: var(--tl-radius-1);
@@ -196,7 +196,7 @@
 	background-color: var(--tl-color-selected-contrast);
 	border: 1px solid var(--tl-color-divider);
 	border-radius: var(--tl-radius-1);
-	padding: 8px;
+	padding: var(--tl-space-3);
 }
 
 .logEntry {
@@ -215,7 +215,7 @@
 	position: relative;
 	display: flex;
 	flex-direction: column;
-	gap: 12px;
+	gap: var(--tl-space-4);
 }
 
 .copyButton {
@@ -227,7 +227,7 @@
 
 /* User Summary */
 .userSummary {
-	padding: 16px;
+	padding: var(--tl-space-5);
 	background-color: var(--tl-color-panel);
 	border: 1px solid var(--tl-color-divider);
 	border-radius: var(--tl-radius-1);
@@ -236,13 +236,13 @@
 .summaryGrid {
 	display: grid;
 	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-	gap: 12px;
+	gap: var(--tl-space-4);
 }
 
 .summaryItem {
 	display: flex;
 	flex-direction: column;
-	gap: 4px;
+	gap: var(--tl-space-2);
 }
 
 .fieldLabel {
@@ -264,8 +264,8 @@
 .migrationSection {
 	display: flex;
 	flex-direction: column;
-	gap: 12px;
-	padding: 16px;
+	gap: var(--tl-space-4);
+	padding: var(--tl-space-5);
 	background-color: var(--tl-color-panel);
 	border: 1px solid var(--tl-color-primary);
 	border-radius: var(--tl-radius-1);
@@ -275,15 +275,15 @@
 /* Stats Display */
 .statsContainer {
 	display: flex;
-	gap: 16px;
-	padding: 12px;
+	gap: var(--tl-space-5);
+	padding: var(--tl-space-4);
 	flex-wrap: wrap;
 }
 
 .statItem {
 	display: flex;
 	flex-direction: column;
-	gap: 4px;
+	gap: var(--tl-space-2);
 }
 
 .statLabel {
@@ -302,7 +302,7 @@
 /* Count Container */
 .countContainer {
 	display: flex;
-	gap: 12px;
+	gap: var(--tl-space-4);
 	align-items: center;
 }
 
@@ -314,7 +314,7 @@
 /* Config Container */
 .configContainer {
 	display: flex;
-	gap: 16px;
+	gap: var(--tl-space-5);
 	flex-wrap: wrap;
 }
 
@@ -330,20 +330,20 @@
 .featureFlagsContainer {
 	display: flex;
 	flex-direction: column;
-	gap: 16px;
+	gap: var(--tl-space-5);
 	margin-top: 16px;
 }
 
 .featureFlagItem {
 	display: flex;
 	align-items: center;
-	gap: 12px;
+	gap: var(--tl-space-4);
 }
 
 .featureFlagLabel {
 	display: flex;
 	align-items: center;
-	gap: 8px;
+	gap: var(--tl-space-3);
 	cursor: pointer;
 	min-width: 200px;
 }

diff --git a/apps/dotcom/client/src/tla/app/TldrawApp.ts b/apps/dotcom/client/src/tla/app/TldrawApp.ts
@@ -1,4 +1,4 @@
-import { Zero } from '@rocicorp/zero'
+import { QueryResultType, Zero } from '@rocicorp/zero'
 import { captureException } from '@sentry/react'
 import {
 	AcceptInviteResponseBody,
@@ -10,12 +10,9 @@ import {
 	ROOM_PREFIX,
 	TlaFile,
 	WELCOME_CREATE_SOURCE,
-	TlaFileState,
 	TlaFileStatePartial,
 	TlaFlags,
-	TlaGroup,
 	TlaGroupFile,
-	TlaGroupUser,
 	TlaMutators,
 	TlaSchema,
 	TlaUser,
@@ -122,13 +119,13 @@ export class TldrawApp {
 	readonly z: Zero<TlaSchema, TlaMutators, ZeroContext>
 
 	private readonly user$: Signal<TlaUser | undefined>
-	private readonly fileStates$: Signal<(TlaFileState & { file: TlaFile })[]>
+	// These signal types are derived from the query definitions in dotcom-shared rather than
+	// hand-written, so the shape (and the nullability of `.one()` joins like `file`) stays in
+	// sync with the queries automatically. A previous hand-written annotation claimed `file` was
+	// always present, which hid a production crash when a `.one()` join resolved to undefined.
+	private readonly fileStates$: Signal<QueryResultType<typeof queries.fileStates>>
 	private readonly workspaceMemberships$: Signal<
-		(TlaGroupUser & {
-			group: TlaGroup
-			groupFiles: Array<TlaGroupFile & { file: TlaFile | undefined }>
-			groupMembers: Array<TlaGroupUser>
-		})[]
+		QueryResultType<typeof queries.workspaceMemberships>
 	>
 
 	private readonly useProperZero: boolean
@@ -1229,10 +1226,10 @@ export class TldrawApp {
 	copyWorkspaceInvite(workspaceId: string, showToast = true): boolean {
 		// The home workspace can't be invited to.
 		if (workspaceId === this.getHomeWorkspaceId()) return false
-		const membership = this.getWorkspaceMembership(workspaceId)
-		if (!membership?.group.inviteSecret) return false
+		const group = this.getWorkspaceMembership(workspaceId)?.group
+		if (!group?.inviteSecret) return false
 
-		const inviteText = `${location.origin}/invite/${membership.group.inviteSecret}`
+		const inviteText = `${location.origin}/invite/${group.inviteSecret}`
 		navigator.clipboard.writeText(inviteText)
 
 		if (showToast) {

diff --git a/apps/dotcom/client/src/tla/components/MaybeForceUserRefresh/MaybeForceUserRefresh.tsx b/apps/dotcom/client/src/tla/components/MaybeForceUserRefresh/MaybeForceUserRefresh.tsx
@@ -22,6 +22,9 @@ export function MaybeForceUserRefresh({ children }: { children: ReactNode }) {
 			>
 				{children}
 			</div>
+			{/* A custom overlay rather than TldrawUiDialog: it renders at the app-provider root
+			    to dim the whole app when the client is outdated — a context where the Radix-based
+			    dialog primitives and their UI-context hooks are not available. */}
 			{showModal ? (
 				<div className={styles.modal}>
 					<div className={styles.modalContent}>

diff --git a/apps/dotcom/client/src/tla/components/TlaAnonDotDevLink/TlaAnonDotDevLink.module.css b/apps/dotcom/client/src/tla/components/TlaAnonDotDevLink/TlaAnonDotDevLink.module.css
@@ -4,7 +4,7 @@
 	right: max(var(--tl-space-2), env(safe-area-inset-right));
 	z-index: calc(var(--tl-layer-watermark) + 1);
 	height: 36px;
-	padding: 2px;
+	padding: var(--tl-space-1);
 }
 
 .anonDotDevLink > div {
@@ -38,7 +38,7 @@
 	position: relative;
 	display: flex;
 	align-items: center;
-	gap: 4px;
+	gap: var(--tl-space-2);
 	height: 100%;
 	padding: 0 8px;
 	color: inherit;

diff --git a/apps/dotcom/client/src/tla/components/TlaEditor/TlaDebug.tsx b/apps/dotcom/client/src/tla/components/TlaEditor/TlaDebug.tsx
@@ -1,6 +1,7 @@
 /* eslint-disable tldraw/jsx-no-literals */
 import { memo } from 'react'
 import { ExampleDialog, TldrawUiMenuItem, useDialogs } from 'tldraw'
+import { ExternalLink } from '../ExternalLink/ExternalLink'
 
 export function A11yAudit() {
 	const { addDialog } = useDialogs()
@@ -74,11 +75,7 @@ export const A11yResultTable = memo(({ results }: { results: any }) => {
 								))}
 							</td>
 							<td>
-								{issue.helpUrl ? (
-									<a href={issue.helpUrl} target="_blank" rel="noopener noreferrer">
-										More info
-									</a>
-								) : null}
+								{issue.helpUrl ? <ExternalLink to={issue.helpUrl}>More info</ExternalLink> : null}
 							</td>
 						</tr>
 					))}

diff --git a/apps/dotcom/client/src/tla/components/TlaFileError/TlaFileError.module.css b/apps/dotcom/client/src/tla/components/TlaFileError/TlaFileError.module.css
@@ -6,7 +6,7 @@
 	justify-content: center;
 	height: 100%;
 	text-align: center;
-	gap: 20px;
+	gap: var(--tl-space-6);
 }
 
 .content {