Force interface instead of type for better docs (#3815)

Typescript's type aliases (`type X = thing`) can refer to basically
anything, which makes it hard to write an automatic document formatter
for them. Interfaces on the other hand are only object, so they play
much nicer with docs. Currently, object-flavoured type aliases don't
really get expanded at all on our docs site, which means we have a bunch
of docs content that's not shown on the site.

This diff introduces a lint rule that forces `interface X {foo: bar}`s
instead of `type X = {foo: bar}` where possible, as it results in a much
better documentation experience:

Before:
<img width="437" alt="Screenshot 2024-05-22 at 15 24 13"
src="https://github.com/tldraw/tldraw/assets/1489520/32606fd1-6832-4a1e-aa5f-f0534d160c92">

After:
<img width="431" alt="Screenshot 2024-05-22 at 15 33 01"
src="https://github.com/tldraw/tldraw/assets/1489520/4e0d59ee-c38e-4056-b9fd-6a7f15d28f0f">


### Change Type

- [x] `sdk` — Changes the tldraw SDK
- [x] `docs` — Changes to the documentation, examples, or templates.
- [x] `improvement` — Improving existing features

.eslintrc.js

@@ -70,6 +70,7 @@ module.exports = {
 			'error',
 			{ name: 'structuredClone', message: 'Use structuredClone from @tldraw/util instead' },
 		],
+		'@typescript-eslint/consistent-type-definitions': ['error', 'interface'],
 	},
 	parser: '@typescript-eslint/parser',
 	parserOptions: {

apps/docs/components/ArticleDetails.tsx

@@ -1,7 +1,7 @@
 import { Article } from '@/types/content-types'
 import { Icon } from './Icon'
 
-type ArticleDetailsProps = {
+interface ArticleDetailsProps {
 	article: Article
 }
 

apps/docs/components/ArticleNavLinks.tsx

@@ -2,7 +2,7 @@ import { ArticleLinks } from '@/types/content-types'
 import Link from 'next/link'
 import { Icon } from './Icon'
 
-type ArticleNavLinksProps = {
+interface ArticleNavLinksProps {
 	links: ArticleLinks
 }
 

apps/docs/components/Autocomplete.tsx

@@ -13,13 +13,13 @@ import './Autocomplete.css'
 import { Icon } from './Icon'
 import { Spinner } from './Spinner'
 
-export type DropdownOption = {
+export interface DropdownOption {
 	label: string
 	value: string
 	group?: string
 }
 
-type AutocompleteProps = {
+interface AutocompleteProps {
 	customUI?: React.ReactNode
 	groups?: string[]
 	groupsToIcon?: {

apps/docs/scripts/functions/getApiMarkdown.ts

@@ -24,7 +24,10 @@ import {
 } from '@microsoft/api-extractor-model'
 import { MarkdownWriter, formatWithPrettier, getPath, getSlug } from '../utils'
 
-type Result = { markdown: string; keywords: string[] }
+interface Result {
+	markdown: string
+	keywords: string[]
+}
 
 const REPO_URL = 'https://github.com/tldraw/tldraw/blob/main/'
 

apps/docs/types/content-types.ts

@@ -1,4 +1,4 @@
-export type InputCategory = {
+export interface InputCategory {
 	id: string
 	title: string
 	description: string
@@ -6,7 +6,7 @@ export type InputCategory = {
 	hero: string | null
 }
 
-export type InputSection = {
+export interface InputSection {
 	id: string
 	title: string
 	description: string
@@ -15,7 +15,7 @@ export type InputSection = {
 	sidebar_behavior: 'show-links' | 'show-title' | 'hidden' | 'reference'
 }
 
-export type InputGroup = {
+export interface InputGroup {
 	id: string
 }
 
@@ -150,7 +150,7 @@ export type ArticleLink = Pick<
 	'id' | 'title' | 'description' | 'categoryId' | 'sectionId' | 'path'
 >
 
-export type ArticleLinks = {
+export interface ArticleLinks {
 	prev: ArticleLink | null
 	next: ArticleLink | null
 }
@@ -184,7 +184,7 @@ export type SidebarContentLink =
 	| SidebarContentCategoryLink
 	| SidebarContentArticleLink
 
-export type SidebarContentList = {
+export interface SidebarContentList {
 	sectionId: string | null
 	categoryId: string | null
 	articleId: string | null
@@ -197,4 +197,7 @@ export type SidebarContentList = {
 /** A table keyed by slug of articles. */
 export type Articles = Record<string, Article>
 
-export type GeneratedContent = { sections: Section[]; articles: Articles }
+export interface GeneratedContent {
+	sections: Section[]
+	articles: Articles
+}

apps/docs/types/search-types.ts

@@ -1,4 +1,4 @@
-export type SearchResult = {
+export interface SearchResult {
 	type: 'article' | 'category' | 'section' | 'heading'
 	id: string
 	subtitle: string

apps/dotcom-worker/src/lib/AlarmScheduler.ts

@@ -1,6 +1,6 @@
 import { exhaustiveSwitchError, hasOwnProperty } from '@tldraw/utils'
 
-type AlarmOpts = {
+interface AlarmOpts {
 	overwrite: 'always' | 'if-sooner'
 }
 

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

@@ -35,7 +35,7 @@ const MAX_CONNECTIONS = 50
 
 // increment this any time you make a change to this type
 const CURRENT_DOCUMENT_INFO_VERSION = 0
-type DocumentInfo = {
+interface DocumentInfo {
 	version: number
 	slug: string
 }

apps/dotcom-worker/src/lib/routes/createRoomSnapshot.ts

@@ -6,7 +6,7 @@ import { getR2KeyForSnapshot } from '../r2'
 import { Environment } from '../types'
 import { validateSnapshot } from '../utils/validateSnapshot'
 
-export type R2Snapshot = {
+export interface R2Snapshot {
 	parent_slug: CreateSnapshotRequestBody['parent_slug']
 	drawing: RoomSnapshot
 }

apps/dotcom-worker/src/lib/types.ts

@@ -1,7 +1,7 @@
 // https://developers.cloudflare.com/analytics/analytics-engine/
 
 // This type isn't available in @cloudflare/workers-types yet
-export type Analytics = {
+export interface Analytics {
 	writeDataPoint(data: {
 		blobs?: string[]
 		doubles?: number[]

apps/dotcom-worker/src/lib/utils/validateSnapshot.ts

@@ -3,7 +3,7 @@ import { TLRecord } from '@tldraw/tlschema'
 import { schema } from '@tldraw/tlsync'
 import { Result, objectMapEntries } from '@tldraw/utils'
 
-type SnapshotRequestBody = {
+interface SnapshotRequestBody {
 	schema: SerializedSchema
 	snapshot: SerializedStore<TLRecord>
 }

apps/dotcom/src/components/DocumentName/DocumentName.tsx

@@ -32,7 +32,7 @@ import { FORK_PROJECT_ACTION } from '../../utils/sharing'
 import { SAVE_FILE_COPY_ACTION } from '../../utils/useFileSystem'
 import { getShareUrl } from '../ShareMenu'
 
-type NameState = {
+interface NameState {
 	readonly name: string | null
 	readonly isEditing: boolean
 }

apps/dotcom/src/components/ShareMenu.tsx

@@ -28,7 +28,7 @@ const SHARE_CURRENT_STATE = {
 } as const
 type ShareCurrentState = (typeof SHARE_CURRENT_STATE)[keyof typeof SHARE_CURRENT_STATE]
 
-type ShareState = {
+interface ShareState {
 	state: ShareCurrentState
 	qrCodeDataUrl: string
 	url: string

apps/dotcom/src/components/SnapshotsEditor.tsx

@@ -63,7 +63,7 @@ const components: TLComponents = {
 	},
 }
 
-type SnapshotEditorProps = {
+interface SnapshotEditorProps {
 	schema: SerializedSchema
 	records: TLRecord[]
 }

apps/dotcom/src/utils/remote-sync/remote-sync.ts

@@ -10,7 +10,7 @@ export class RemoteSyncError extends Error {
 }
 
 /** @public */
-export type UseSyncClientConfig = {
+export interface UseSyncClientConfig {
 	uri: string
 	roomId?: string
 	userPreferences?: Signal<TLUserPreferences>

apps/examples/e2e/tests/fixtures/fixtures.ts

@@ -8,7 +8,7 @@ import { PageMenu } from './menus/PageMenu'
 import { StylePanel } from './menus/StylePanel'
 import { Toolbar } from './menus/Toolbar'
 
-type Fixtures = {
+interface Fixtures {
 	toolbar: Toolbar
 	stylePanel: StylePanel
 	actionsMenu: ActionsMenu

apps/examples/src/examples.tsx

@@ -1,6 +1,6 @@
 import { ComponentType } from 'react'
 
-export type Example = {
+export interface Example {
 	title: string
 	description: string
 	details: string

apps/examples/src/examples/pdf-editor/PdfPicker.tsx

@@ -2,14 +2,14 @@ import { useState } from 'react'
 import { AssetRecordType, Box, TLAssetId, TLShapeId, createShapeId } from 'tldraw'
 import tldrawPdf from './assets/tldraw.pdf'
 
-export type PdfPage = {
+export interface PdfPage {
 	src: string
 	bounds: Box
 	assetId: TLAssetId
 	shapeId: TLShapeId
 }
 
-export type Pdf = {
+export interface Pdf {
 	name: string
 	pages: PdfPage[]
 	source: string | ArrayBuffer

apps/examples/src/examples/slideshow/SlidesManager.tsx

@@ -4,7 +4,7 @@ import { atom, computed, structuredClone, uniqueId } from 'tldraw'
 export const SLIDE_SIZE = { x: 0, y: 0, w: 1600, h: 900 }
 export const SLIDE_MARGIN = 100
 
-type Slide = {
+interface Slide {
 	id: string
 	index: number
 	name: string

apps/health-worker/src/discord.ts

@@ -8,7 +8,7 @@ const RED = 14692657
 const ORANGE = 16213767
 
 // docs: https://birdie0.github.io/discord-webhooks-guide/index.html
-export type DiscordPayload = {
+export interface DiscordPayload {
 	username: string
 	content: string
 	embeds: APIEmbed[]

apps/huppy/pages/deliveries.tsx

@@ -3,7 +3,7 @@ import { GetServerSideProps } from 'next'
 import { useEffect, useState } from 'react'
 import { getAppOctokit } from '../src/octokit'
 
-type Props = {
+interface Props {
 	deliveries: {
 		id: number
 		guid: string
@@ -39,7 +39,7 @@ export const getServerSideProps: GetServerSideProps<Props> = async (context) =>
 	return { props: { deliveries: deliveries.data, cursor } }
 }
 
-type SelectedDelivery = {
+interface SelectedDelivery {
 	id: number
 	data?: unknown
 }

apps/huppy/src/ctx.tsx

@@ -1,6 +1,6 @@
 import { App, Octokit } from 'octokit'
 
-export type Ctx = {
+export interface Ctx {
 	app: App
 	octokit: Octokit
 	installationToken: string

apps/huppy/src/flows/collectClaSignatures.tsx

@@ -14,13 +14,13 @@ const CLA_SIGNATURES_BRANCH = 'cla-signees'
 
 const pullRequestActionsToCheck = ['opened', 'synchronize', 'reopened', 'edited']
 
-type Signing = {
+interface Signing {
 	githubId: number
 	signedAt: string
 	signedVersion: 1
 	signingComment: string
 }
-type SigneeInfo = {
+interface SigneeInfo {
 	unsigned: Set<string>
 	signees: Map<string, { signing: Signing; fileSha: string }>
 	total: number

apps/vscode/editor/src/app.tsx

@@ -96,7 +96,7 @@ export const TldrawWrapper = () => {
 	)
 }
 
-export type TLDrawInnerProps = {
+export interface TLDrawInnerProps {
 	assetSrc: string
 	fileContents: string
 	uri: string

apps/vscode/editor/src/utils/rpc.ts

@@ -2,7 +2,7 @@ import { uniqueId } from 'tldraw'
 import type { VscodeMessagePairs } from '../../../messages'
 import { vscode } from './vscode'
 
-type SimpleRpcOpts = {
+interface SimpleRpcOpts {
 	timeout: number
 }
 class SimpleRpcError extends Error {

packages/dotcom-shared/src/types.ts

@@ -1,16 +1,16 @@
 import { SerializedSchema, SerializedStore, TLRecord } from 'tldraw'
 
-export type Snapshot = {
+export interface Snapshot {
 	schema: SerializedSchema
 	snapshot: SerializedStore<TLRecord>
 }
 
-export type CreateRoomRequestBody = {
+export interface CreateRoomRequestBody {
 	origin: string
 	snapshot: Snapshot
 }
 
-export type CreateSnapshotRequestBody = {
+export interface CreateSnapshotRequestBody {
 	schema: SerializedSchema
 	snapshot: SerializedStore<TLRecord>
 	parent_slug?: string | undefined
@@ -26,4 +26,7 @@ export type CreateSnapshotResponseBody =
 			message: string
 	  }
 
-export type GetReadonlySlugResponseBody = { slug: string; isLegacy: boolean }
+export interface GetReadonlySlugResponseBody {
+	slug: string
+	isLegacy: boolean
+}

packages/editor/api-report.md

@@ -1131,15 +1131,19 @@ export function extractSessionStateFromLegacySnapshot(store: Record<string, Unkn
 export const featureFlags: Record<string, DebugFlag<boolean>>;
 
 // @public (undocumented)
-export type GapsSnapIndicator = {
+export interface GapsSnapIndicator {
+    // (undocumented)
     direction: 'horizontal' | 'vertical';
+    // (undocumented)
     gaps: Array<{
         endEdge: [VecLike, VecLike];
         startEdge: [VecLike, VecLike];
     }>;
+    // (undocumented)
     id: string;
+    // (undocumented)
     type: 'gaps';
-};
+}
 
 // @public (undocumented)
 export abstract class Geometry2d {
@@ -1593,11 +1597,14 @@ export class Point2d extends Geometry2d {
 export function pointInPolygon(A: VecLike, points: VecLike[]): boolean;
 
 // @public (undocumented)
-export type PointsSnapIndicator = {
+export interface PointsSnapIndicator {
+    // (undocumented)
     id: string;
+    // (undocumented)
     points: VecLike[];
+    // (undocumented)
     type: 'points';
-};
+}
 
 // @public (undocumented)
 export class Polygon2d extends Polyline2d {
@@ -2057,12 +2064,29 @@ export interface TLBindingUtilConstructor<T extends TLUnknownBinding, U extends
 }
 
 // @public (undocumented)
-export type TLBrushProps = {
+export interface TLBrushProps {
+    // (undocumented)
     brush: BoxModel;
+    // (undocumented)
     className?: string;
+    // (undocumented)
     color?: string;
+    // (undocumented)
     opacity?: number;
-};
+}
+
+// @public (undocumented)
+export interface TLCameraConstraints {
+    baseZoom: 'default' | 'fit-max-100' | 'fit-max' | 'fit-min-100' | 'fit-min' | 'fit-x-100' | 'fit-x' | 'fit-y-100' | 'fit-y';
+    behavior: 'contain' | 'fixed' | 'free' | 'inside' | 'outside' | {
+        x: 'contain' | 'fixed' | 'free' | 'inside' | 'outside';
+        y: 'contain' | 'fixed' | 'free' | 'inside' | 'outside';
+    };
+    bounds: BoxModel;
+    initialZoom: 'default' | 'fit-max-100' | 'fit-max' | 'fit-min-100' | 'fit-min' | 'fit-x-100' | 'fit-x' | 'fit-y-100' | 'fit-y';
+    origin: VecLike;
+    padding: VecLike;
+}
 
 // @public (undocumented)
 export type TLCameraMoveOptions = Partial<{
@@ -2076,33 +2100,25 @@ export type TLCameraMoveOptions = Partial<{
 }>;
 
 // @public (undocumented)
-export type TLCameraOptions = {
-    wheelBehavior: 'none' | 'pan' | 'zoom';
-    constraints?: {
-        behavior: 'contain' | 'fixed' | 'free' | 'inside' | 'outside' | {
-            x: 'contain' | 'fixed' | 'free' | 'inside' | 'outside';
-            y: 'contain' | 'fixed' | 'free' | 'inside' | 'outside';
-        };
-        bounds: BoxModel;
-        baseZoom: 'default' | 'fit-max-100' | 'fit-max' | 'fit-min-100' | 'fit-min' | 'fit-x-100' | 'fit-x' | 'fit-y-100' | 'fit-y';
-        initialZoom: 'default' | 'fit-max-100' | 'fit-max' | 'fit-min-100' | 'fit-min' | 'fit-x-100' | 'fit-x' | 'fit-y-100' | 'fit-y';
-        origin: VecLike;
-        padding: VecLike;
-    };
+export interface TLCameraOptions {
+    constraints?: TLCameraConstraints;
+    isLocked: boolean;
     panSpeed: number;
+    wheelBehavior: 'none' | 'pan' | 'zoom';
     zoomSpeed: number;
     zoomSteps: number[];
-    isLocked: boolean;
-};
+}
 
 // @public (undocumented)
 export type TLCancelEvent = (info: TLCancelEventInfo) => void;
 
 // @public (undocumented)
-export type TLCancelEventInfo = {
+export interface TLCancelEventInfo {
+    // (undocumented)
     name: 'cancel';
+    // (undocumented)
     type: 'misc';
-};
+}
 
 // @public (undocumented)
 export type TLClickEvent = (info: TLClickEventInfo) => void;
@@ -2121,23 +2137,31 @@ export type TLClickEventInfo = TLBaseEventInfo & {
 export type TLCLickEventName = 'double_click' | 'quadruple_click' | 'triple_click';
 
 // @public (undocumented)
-export type TLCollaboratorHintProps = {
+export interface TLCollaboratorHintProps {
+    // (undocumented)
     className?: string;
+    // (undocumented)
     color: string;
+    // (undocumented)
     opacity?: number;
+    // (undocumented)
     point: VecModel;
+    // (undocumented)
     viewport: Box;
+    // (undocumented)
     zoom: number;
-};
+}
 
 // @public (undocumented)
 export type TLCompleteEvent = (info: TLCompleteEventInfo) => void;
 
 // @public (undocumented)
-export type TLCompleteEventInfo = {
+export interface TLCompleteEventInfo {
+    // (undocumented)
     name: 'complete';
+    // (undocumented)
     type: 'misc';
-};
+}
 
 // @public (undocumented)
 export interface TLContent {
@@ -2154,14 +2178,20 @@ export interface TLContent {
 }
 
 // @public (undocumented)
-export type TLCursorProps = {
+export interface TLCursorProps {
+    // (undocumented)
     chatMessage: string;
+    // (undocumented)
     className?: string;
+    // (undocumented)
     color?: string;
+    // (undocumented)
     name: null | string;
+    // (undocumented)
     point: null | VecModel;
+    // (undocumented)
     zoom: number;
-};
+}
 
 // @public (undocumented)
 export const TldrawEditor: React_2.NamedExoticComponent<TldrawEditorProps>;
@@ -2361,35 +2391,47 @@ export type TLExternalContentSource = {
 };
 
 // @public (undocumented)
-export type TLGridProps = {
+export interface TLGridProps {
+    // (undocumented)
     size: number;
+    // (undocumented)
     x: number;
+    // (undocumented)
     y: number;
+    // (undocumented)
     z: number;
-};
+}
 
 // @public (undocumented)
-export type TLHandleProps = {
+export interface TLHandleProps {
+    // (undocumented)
     className?: string;
+    // (undocumented)
     handle: TLHandle;
+    // (undocumented)
     isCoarse: boolean;
+    // (undocumented)
     shapeId: TLShapeId;
+    // (undocumented)
     zoom: number;
-};
+}
 
 // @public (undocumented)
-export type TLHandlesProps = {
+export interface TLHandlesProps {
+    // (undocumented)
     children: ReactNode;
-};
+}
 
 // @public (undocumented)
 export type TLInterruptEvent = (info: TLInterruptEventInfo) => void;
 
 // @public (undocumented)
-export type TLInterruptEventInfo = {
+export interface TLInterruptEventInfo {
+    // (undocumented)
     name: 'interrupt';
+    // (undocumented)
     type: 'misc';
-};
+}
 
 // @public (undocumented)
 export type TLKeyboardEvent = (info: TLKeyboardEventInfo) => void;
@@ -2520,15 +2562,22 @@ export type TLPointerEventTarget = {
 export type TLResizeHandle = SelectionCorner | SelectionEdge;
 
 // @public
-export type TLResizeInfo<T extends TLShape> = {
+export interface TLResizeInfo<T extends TLShape> {
+    // (undocumented)
     handle: TLResizeHandle;
+    // (undocumented)
     initialBounds: Box;
+    // (undocumented)
     initialShape: T;
+    // (undocumented)
     mode: TLResizeMode;
+    // (undocumented)
     newPoint: Vec;
+    // (undocumented)
     scaleX: number;
+    // (undocumented)
     scaleY: number;
-};
+}
 
 // @public
 export type TLResizeMode = 'resize_bounds' | 'scale_shape';
@@ -2547,36 +2596,49 @@ export type TLResizeShapeOptions = Partial<{
 }>;
 
 // @public
-export type TLRotationSnapshot = {
+export interface TLRotationSnapshot {
+    // (undocumented)
     initialCursorAngle: number;
+    // (undocumented)
     initialSelectionRotation: number;
+    // (undocumented)
     selectionPageCenter: Vec;
+    // (undocumented)
     shapeSnapshots: {
         initialPagePoint: Vec;
         shape: TLShape;
     }[];
-};
+}
 
 // @public (undocumented)
-export type TLScribbleProps = {
+export interface TLScribbleProps {
+    // (undocumented)
     className?: string;
+    // (undocumented)
     color?: string;
+    // (undocumented)
     opacity?: number;
+    // (undocumented)
     scribble: TLScribble;
+    // (undocumented)
     zoom: number;
-};
+}
 
 // @public (undocumented)
-export type TLSelectionBackgroundProps = {
+export interface TLSelectionBackgroundProps {
+    // (undocumented)
     bounds: Box;
+    // (undocumented)
     rotation: number;
-};
+}
 
 // @public (undocumented)
-export type TLSelectionForegroundProps = {
+export interface TLSelectionForegroundProps {
+    // (undocumented)
     bounds: Box;
+    // (undocumented)
     rotation: number;
-};
+}
 
 // @public (undocumented)
 export type TLSelectionHandle = RotateCorner | SelectionCorner | SelectionEdge;
@@ -2611,13 +2673,18 @@ export interface TLSessionStateSnapshot {
 }
 
 // @public (undocumented)
-export type TLShapeIndicatorProps = {
+export interface TLShapeIndicatorProps {
+    // (undocumented)
     className?: string;
+    // (undocumented)
     color?: string | undefined;
+    // (undocumented)
     hidden?: boolean;
+    // (undocumented)
     opacity?: number;
+    // (undocumented)
     shapeId: TLShapeId;
-};
+}
 
 // @public (undocumented)
 export interface TLShapeUtilCanvasSvgDef {
@@ -2643,11 +2710,14 @@ export interface TLShapeUtilConstructor<T extends TLUnknownShape, U extends Shap
 export type TLShapeUtilFlag<T> = (shape: T) => boolean;
 
 // @public (undocumented)
-export type TLSnapIndicatorProps = {
+export interface TLSnapIndicatorProps {
+    // (undocumented)
     className?: string;
+    // (undocumented)
     line: SnapIndicator;
+    // (undocumented)
     zoom: number;
-};
+}
 
 // @public (undocumented)
 export interface TLStateNodeConstructor {
@@ -2702,14 +2772,20 @@ export type TLStoreWithStatus = {
 };
 
 // @public (undocumented)
-export type TLSvgOptions = {
+export interface TLSvgOptions {
+    // (undocumented)
     background: boolean;
+    // (undocumented)
     bounds: Box;
+    // (undocumented)
     darkMode?: boolean;
+    // (undocumented)
     padding: number;
+    // (undocumented)
     preserveAspectRatio: React.SVGAttributes<SVGSVGElement>['preserveAspectRatio'];
+    // (undocumented)
     scale: number;
-};
+}
 
 // @public (undocumented)
 export type TLTickEvent = (info: TLTickEventInfo) => void;

packages/editor/src/index.ts

@@ -223,6 +223,7 @@ export {
 } from './lib/editor/types/external-content'
 export {
 	type RequiredKeys,
+	type TLCameraConstraints,
 	type TLCameraMoveOptions,
 	type TLCameraOptions,
 	type TLSvgOptions,

packages/editor/src/lib/components/ErrorBoundary.tsx

@@ -8,7 +8,9 @@ export interface TLErrorBoundaryProps {
 	fallback: TLErrorFallbackComponent
 }
 
-type TLErrorBoundaryState = { error: Error | null }
+interface TLErrorBoundaryState {
+	error: Error | null
+}
 
 const initialState: TLErrorBoundaryState = { error: null }
 

packages/editor/src/lib/components/default-components/DefaultBrush.tsx

@@ -4,7 +4,7 @@ import { useTransform } from '../../hooks/useTransform'
 import { toDomPrecision } from '../../primitives/utils'
 
 /** @public */
-export type TLBrushProps = {
+export interface TLBrushProps {
 	brush: BoxModel
 	color?: string
 	opacity?: number

packages/editor/src/lib/components/default-components/DefaultCanvas.tsx

@@ -26,7 +26,9 @@ import { LiveCollaborators } from '../LiveCollaborators'
 import { Shape } from '../Shape'
 
 /** @public */
-export type TLCanvasComponentProps = { className?: string }
+export interface TLCanvasComponentProps {
+	className?: string
+}
 
 /** @public */
 export function DefaultCanvas({ className }: TLCanvasComponentProps) {

packages/editor/src/lib/components/default-components/DefaultCollaboratorHint.tsx

@@ -7,7 +7,7 @@ import { Vec } from '../../primitives/Vec'
 import { clamp } from '../../primitives/utils'
 
 /** @public */
-export type TLCollaboratorHintProps = {
+export interface TLCollaboratorHintProps {
 	className?: string
 	point: VecModel
 	viewport: Box

packages/editor/src/lib/components/default-components/DefaultCursor.tsx

@@ -4,7 +4,7 @@ import { memo, useRef } from 'react'
 import { useTransform } from '../../hooks/useTransform'
 
 /** @public */
-export type TLCursorProps = {
+export interface TLCursorProps {
 	className?: string
 	point: VecModel | null
 	zoom: number

packages/editor/src/lib/components/default-components/DefaultGrid.tsx

@@ -2,7 +2,7 @@ import { modulate } from '@tldraw/utils'
 import { GRID_STEPS } from '../../constants'
 
 /** @public */
-export type TLGridProps = {
+export interface TLGridProps {
 	x: number
 	y: number
 	z: number

packages/editor/src/lib/components/default-components/DefaultHandle.tsx

@@ -3,7 +3,7 @@ import classNames from 'classnames'
 import { COARSE_HANDLE_RADIUS, HANDLE_RADIUS, SIDES } from '../../constants'
 
 /** @public */
-export type TLHandleProps = {
+export interface TLHandleProps {
 	shapeId: TLShapeId
 	handle: TLHandle
 	zoom: number

packages/editor/src/lib/components/default-components/DefaultHandles.tsx

@@ -1,7 +1,7 @@
 import { ReactNode } from 'react'
 
 /** @public */
-export type TLHandlesProps = {
+export interface TLHandlesProps {
 	children: ReactNode
 }
 

packages/editor/src/lib/components/default-components/DefaultScribble.tsx

@@ -3,7 +3,7 @@ import classNames from 'classnames'
 import { getSvgPathFromPoints } from '../../utils/getSvgPathFromPoints'
 
 /** @public */
-export type TLScribbleProps = {
+export interface TLScribbleProps {
 	scribble: TLScribble
 	zoom: number
 	color?: string

packages/editor/src/lib/components/default-components/DefaultSelectionBackground.tsx

@@ -4,7 +4,7 @@ import { Box } from '../../primitives/Box'
 import { toDomPrecision } from '../../primitives/utils'
 
 /** @public */
-export type TLSelectionBackgroundProps = {
+export interface TLSelectionBackgroundProps {
 	bounds: Box
 	rotation: number
 }

packages/editor/src/lib/components/default-components/DefaultSelectionForeground.tsx

@@ -7,7 +7,7 @@ import { Box } from '../../primitives/Box'
 import { toDomPrecision } from '../../primitives/utils'
 
 /** @public */
-export type TLSelectionForegroundProps = {
+export interface TLSelectionForegroundProps {
 	bounds: Box
 	rotation: number
 }

packages/editor/src/lib/components/default-components/DefaultShapeIndicator.tsx

@@ -33,7 +33,7 @@ const InnerIndicator = ({ editor, id }: { editor: Editor; id: TLShapeId }) => {
 }
 
 /** @public */
-export type TLShapeIndicatorProps = {
+export interface TLShapeIndicatorProps {
 	shapeId: TLShapeId
 	color?: string | undefined
 	opacity?: number

packages/editor/src/lib/components/default-components/DefaultSnapIndictor.tsx

@@ -154,7 +154,7 @@ function GapsSnapIndicator({ gaps, direction, zoom }: { zoom: number } & GapsSna
 }
 
 /** @public */
-export type TLSnapIndicatorProps = {
+export interface TLSnapIndicatorProps {
 	className?: string
 	line: SnapIndicator
 	zoom: number

packages/editor/src/lib/editor/Editor.ts

@@ -6771,7 +6771,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 		let remaining = duration
 		let t: number
 
-		type ShapeAnimation = {
+		interface ShapeAnimation {
 			partial: TLShapePartial
 			values: { prop: string; from: number; to: number }[]
 		}

packages/editor/src/lib/editor/managers/ScribbleManager.ts

@@ -3,7 +3,7 @@ import { Vec } from '../../primitives/Vec'
 import { uniqueId } from '../../utils/uniqueId'
 import { Editor } from '../Editor'
 
-type ScribbleItem = {
+interface ScribbleItem {
 	id: string
 	scribble: TLScribble
 	timeoutMs: number

packages/editor/src/lib/editor/managers/SnapManager/BoundsSnaps.ts

@@ -44,9 +44,12 @@ export interface BoundsSnapPoint {
 	handle?: SelectionCorner
 }
 
-type SnapPair = { thisPoint: BoundsSnapPoint; otherPoint: BoundsSnapPoint }
+interface SnapPair {
+	thisPoint: BoundsSnapPoint
+	otherPoint: BoundsSnapPoint
+}
 
-type NearestPointsSnap = {
+interface NearestPointsSnap {
 	// selection snaps to a nearby snap point
 	type: 'points'
 	points: SnapPair
@@ -70,12 +73,12 @@ type NearestSnap =
 			nudge: number
 	  }
 
-type GapNode = {
+interface GapNode {
 	id: TLShapeId
 	pageBounds: Box
 }
 
-type Gap = {
+interface Gap {
 	// e.g.
 	//      start
 	//      edge     │         breadth

packages/editor/src/lib/editor/managers/SnapManager/SnapManager.ts

@@ -6,14 +6,14 @@ import { BoundsSnaps } from './BoundsSnaps'
 import { HandleSnaps } from './HandleSnaps'
 
 /** @public */
-export type PointsSnapIndicator = {
+export interface PointsSnapIndicator {
 	id: string
 	type: 'points'
 	points: VecLike[]
 }
 
 /** @public */
-export type GapsSnapIndicator = {
+export interface GapsSnapIndicator {
 	id: string
 	type: 'gaps'
 	direction: 'horizontal' | 'vertical'

packages/editor/src/lib/editor/managers/TextManager.ts

@@ -21,7 +21,7 @@ const textAlignmentsForLtr = {
 }
 
 type TLOverflowMode = 'wrap' | 'truncate-ellipsis' | 'truncate-clip'
-type TLMeasureTextSpanOpts = {
+interface TLMeasureTextSpanOpts {
 	overflow: TLOverflowMode
 	width: number
 	height: number

packages/editor/src/lib/editor/shapes/ShapeUtil.ts

@@ -562,7 +562,7 @@ export type TLResizeMode = 'scale_shape' | 'resize_bounds'
  * @param initialShape - The shape at the start of the resize.
  * @public
  */
-export type TLResizeInfo<T extends TLShape> = {
+export interface TLResizeInfo<T extends TLShape> {
 	newPoint: Vec
 	handle: TLResizeHandle
 	mode: TLResizeMode

packages/editor/src/lib/editor/types/event-types.ts

@@ -96,13 +96,26 @@ export type TLWheelEventInfo = TLBaseEventInfo & {
 }
 
 /** @public */
-export type TLCancelEventInfo = { type: 'misc'; name: 'cancel' }
+export interface TLCancelEventInfo {
+	type: 'misc'
+	name: 'cancel'
+}
 /** @public */
-export type TLCompleteEventInfo = { type: 'misc'; name: 'complete' }
+export interface TLCompleteEventInfo {
+	type: 'misc'
+	name: 'complete'
+}
 /** @public */
-export type TLInterruptEventInfo = { type: 'misc'; name: 'interrupt' }
+export interface TLInterruptEventInfo {
+	type: 'misc'
+	name: 'interrupt'
+}
 /** @public */
-export type TLTickEventInfo = { type: 'misc'; name: 'tick'; elapsed: number }
+export interface TLTickEventInfo {
+	type: 'misc'
+	name: 'tick'
+	elapsed: number
+}
 
 /** @public */
 export type TLEventInfo =

packages/editor/src/lib/editor/types/misc-types.ts

@@ -8,7 +8,7 @@ export type RequiredKeys<T, K extends keyof T> = Partial<Omit<T, K>> & Pick<T, K
 export type OptionalKeys<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>
 
 /** @public */
-export type TLSvgOptions = {
+export interface TLSvgOptions {
 	bounds: Box
 	scale: number
 	background: boolean
@@ -35,7 +35,7 @@ export type TLCameraMoveOptions = Partial<{
 }>
 
 /** @public */
-export type TLCameraOptions = {
+export interface TLCameraOptions {
 	/** Whether the camera is locked. */
 	isLocked: boolean
 	/** The speed of a scroll wheel / trackpad pan. Default is 1. */
@@ -52,7 +52,11 @@ export type TLCameraOptions = {
 	 */
 	wheelBehavior: 'zoom' | 'pan' | 'none'
 	/** The camera constraints. */
-	constraints?: {
+	constraints?: TLCameraConstraints
+}
+
+/** @public */
+export interface TLCameraConstraints {
 	/** The bounds (in page space) of the constrained space */
 	bounds: BoxModel
 	/** The padding inside of the viewport (in screen space) */
@@ -121,5 +125,4 @@ export type TLCameraOptions = {
 				x: 'free' | 'fixed' | 'inside' | 'outside' | 'contain'
 				y: 'free' | 'fixed' | 'inside' | 'outside' | 'contain'
 		  }
-	}
 }

packages/editor/src/lib/hooks/useEditorComponents.tsx

@@ -73,7 +73,7 @@ export interface BaseEditorComponents {
 }
 
 // These will always have defaults
-type ErrorComponents = {
+interface ErrorComponents {
 	ErrorFallback: TLErrorFallbackComponent
 	ShapeErrorFallback: TLShapeErrorFallbackComponent
 	ShapeIndicatorErrorFallback: TLShapeIndicatorErrorFallbackComponent
@@ -88,7 +88,7 @@ export type TLEditorComponents = Partial<
 
 const EditorComponentsContext = createContext<null | (TLEditorComponents & ErrorComponents)>(null)
 
-type ComponentsContextProviderProps = {
+interface ComponentsContextProviderProps {
 	overrides?: TLEditorComponents
 	children: ReactNode
 }

packages/editor/src/lib/utils/rotation.ts

@@ -48,7 +48,7 @@ export function getRotationSnapshot({ editor }: { editor: Editor }): TLRotationS
  *
  * @public
  **/
-export type TLRotationSnapshot = {
+export interface TLRotationSnapshot {
 	selectionPageCenter: Vec
 	initialCursorAngle: number
 	initialSelectionRotation: number

packages/editor/src/lib/utils/sync/TLLocalSyncClient.ts

@@ -26,7 +26,7 @@ const UPDATE_INSTANCE_STATE = Symbol('UPDATE_INSTANCE_STATE')
  * once it has the db integrated
  */
 
-type SyncMessage = {
+interface SyncMessage {
 	type: 'diff'
 	storeId: string
 	changes: RecordsDiff<UnknownRecord>
@@ -36,7 +36,7 @@ type SyncMessage = {
 // Sent by new clients when they connect
 // If another client is on the channel with a newer schema version
 // It will
-type AnnounceMessage = {
+interface AnnounceMessage {
 	type: 'announce'
 	schema: SerializedSchema
 }

packages/editor/src/lib/utils/sync/indexedDb.ts

@@ -38,13 +38,13 @@ async function withDb<T>(storeId: string, cb: (db: IDBPDatabase<StoreName>) => P
 	}
 }
 
-type LoadResult = {
+interface LoadResult {
 	records: TLRecord[]
 	schema?: SerializedSchema
 	sessionStateSnapshot?: TLSessionStateSnapshot | null
 }
 
-type SessionStateSnapshotRow = {
+interface SessionStateSnapshotRow {
 	id: string
 	snapshot: TLSessionStateSnapshot
 	updatedAt: number

packages/state/src/lib/core/Computed.ts

@@ -53,7 +53,10 @@ export const WithDiff = singleton(
 			) {}
 		}
 )
-export type WithDiff<Value, Diff> = { value: Value; diff: Diff }
+export interface WithDiff<Value, Diff> {
+	value: Value
+	diff: Diff
+}
 
 /**
  * When writing incrementally-computed signals it is convenient (and usually more performant) to incrementally compute the diff too.

packages/state/src/lib/core/__tests__/fuzz.tlstate.test.ts

@@ -72,7 +72,7 @@ const unpack = (value: unknown): Letter => {
 	return value as Letter
 }
 
-type FuzzSystemState = {
+interface FuzzSystemState {
 	atoms: Record<string, Atom<Letter>>
 	atomsInAtoms: Record<string, Atom<Atom<Letter>>>
 	derivations: Record<string, { derivation: Computed<Letter>; sneakyGet: () => Letter }>

packages/state/src/lib/core/types.ts

@@ -49,7 +49,7 @@ export interface Signal<Value, Diff = unknown> {
 }
 
 /** @internal */
-export type Child = {
+export interface Child {
 	lastTraversedEpoch: number
 	readonly parentSet: ArraySet<Signal<any, any>>
 	readonly parents: Signal<any, any>[]

packages/store/api-report.md

@@ -23,15 +23,18 @@ export interface BaseRecord<TypeName extends string, Id extends RecordId<Unknown
 }
 
 // @public
-export type CollectionDiff<T> = {
+export interface CollectionDiff<T> {
+    // (undocumented)
     added?: Set<T>;
+    // (undocumented)
     removed?: Set<T>;
-};
+}
 
 // @public
-export type ComputedCache<Data, R extends UnknownRecord> = {
+export interface ComputedCache<Data, R extends UnknownRecord> {
+    // (undocumented)
     get(id: IdOf<R>): Data | undefined;
-};
+}
 
 // @public
 export function createComputedCache<Context extends StoreContext<any>, Result, Record extends ContextRecordType<Context> = ContextRecordType<Context>>(name: string, derive: (context: Context, record: Record) => Result | undefined, isEqual?: (a: Record, b: Record) => boolean): {
@@ -86,10 +89,12 @@ export function defineMigrations(opts: {
 export function devFreeze<T>(object: T): T;
 
 // @public
-export type HistoryEntry<R extends UnknownRecord = UnknownRecord> = {
+export interface HistoryEntry<R extends UnknownRecord = UnknownRecord> {
+    // (undocumented)
     changes: RecordsDiff<R>;
+    // (undocumented)
     source: ChangeSource;
-};
+}
 
 // @public (undocumented)
 export type IdOf<R extends UnknownRecord> = R['id'];
@@ -113,10 +118,12 @@ export class IncrementalSetConstructor<T> {
 export function isRecordsDiffEmpty<T extends UnknownRecord>(diff: RecordsDiff<T>): boolean;
 
 // @public (undocumented)
-export type LegacyMigration<Before = any, After = any> = {
+export interface LegacyMigration<Before = any, After = any> {
+    // (undocumented)
     down: (newState: After) => Before;
+    // (undocumented)
     up: (oldState: Before) => After;
-};
+}
 
 // @public (undocumented)
 export interface LegacyMigrations extends LegacyBaseMigrationsInfo {
@@ -190,11 +197,14 @@ export type RecordId<R extends UnknownRecord> = string & {
 };
 
 // @public
-export type RecordsDiff<R extends UnknownRecord> = {
+export interface RecordsDiff<R extends UnknownRecord> {
+    // (undocumented)
     added: Record<IdOf<R>, R>;
+    // (undocumented)
     removed: Record<IdOf<R>, R>;
+    // (undocumented)
     updated: Record<IdOf<R>, [from: R, to: R]>;
-};
+}
 
 // @public
 export class RecordType<R extends UnknownRecord, RequiredProperties extends keyof Omit<R, 'id' | 'typeName'>> {
@@ -271,9 +281,10 @@ export function squashRecordDiffs<T extends UnknownRecord>(diffs: RecordsDiff<T>
 export function squashRecordDiffsMutable<T extends UnknownRecord>(target: RecordsDiff<T>, diffs: RecordsDiff<T>[]): void;
 
 // @public (undocumented)
-export type StandaloneDependsOn = {
+export interface StandaloneDependsOn {
+    // (undocumented)
     readonly dependsOn: readonly MigrationId[];
-};
+}
 
 // @public
 export class Store<R extends UnknownRecord = UnknownRecord, Props = unknown> {
@@ -358,13 +369,18 @@ export type StoreBeforeCreateHandler<R extends UnknownRecord> = (record: R, sour
 export type StoreBeforeDeleteHandler<R extends UnknownRecord> = (record: R, source: 'remote' | 'user') => false | void;
 
 // @public (undocumented)
-export type StoreError = {
+export interface StoreError {
+    // (undocumented)
     error: Error;
+    // (undocumented)
     isExistingValidationIssue: boolean;
+    // (undocumented)
     phase: 'createRecord' | 'initialize' | 'tests' | 'updateRecord';
+    // (undocumented)
     recordAfter: unknown;
+    // (undocumented)
     recordBefore?: unknown;
-};
+}
 
 // @public
 export type StoreListener<R extends UnknownRecord> = (entry: HistoryEntry<R>) => void;
@@ -407,8 +423,12 @@ export class StoreSchema<R extends UnknownRecord, P = unknown> {
 }
 
 // @public (undocumented)
-export type StoreSchemaOptions<R extends UnknownRecord, P> = {
+export interface StoreSchemaOptions<R extends UnknownRecord, P> {
+    // @internal (undocumented)
     createIntegrityChecker?: (store: Store<R, P>) => void;
+    // (undocumented)
+    migrations?: MigrationSequence[];
+    // (undocumented)
     onValidationFailure?: (data: {
         error: unknown;
         phase: 'createRecord' | 'initialize' | 'tests' | 'updateRecord';
@@ -416,8 +436,7 @@ export type StoreSchemaOptions<R extends UnknownRecord, P> = {
         recordBefore: null | R;
         store: Store<R>;
     }) => R;
-    migrations?: MigrationSequence[];
-};
+}
 
 // @public
 export class StoreSideEffects<R extends UnknownRecord> {
@@ -473,16 +492,20 @@ export class StoreSideEffects<R extends UnknownRecord> {
 }
 
 // @public (undocumented)
-export type StoreSnapshot<R extends UnknownRecord> = {
+export interface StoreSnapshot<R extends UnknownRecord> {
+    // (undocumented)
     schema: SerializedSchema;
+    // (undocumented)
     store: SerializedStore<R>;
-};
+}
 
 // @public (undocumented)
-export type StoreValidator<R extends UnknownRecord> = {
+export interface StoreValidator<R extends UnknownRecord> {
+    // (undocumented)
     validate: (record: unknown) => R;
+    // (undocumented)
     validateUsingKnownGoodVersion?: (knownGoodVersion: R, record: unknown) => R;
-};
+}
 
 // @public (undocumented)
 export type StoreValidators<R extends UnknownRecord> = {

packages/store/src/lib/RecordsDiff.ts

@@ -6,7 +6,7 @@ import { IdOf, UnknownRecord } from './BaseRecord'
  *
  * @public
  */
-export type RecordsDiff<R extends UnknownRecord> = {
+export interface RecordsDiff<R extends UnknownRecord> {
 	added: Record<IdOf<R>, R>
 	updated: Record<IdOf<R>, [from: R, to: R]>
 	removed: Record<IdOf<R>, R>

packages/store/src/lib/Store.ts

@@ -26,11 +26,14 @@ type RecFromId<K extends RecordId<UnknownRecord>> = K extends RecordId<infer R>
  *
  * @public
  */
-export type CollectionDiff<T> = { added?: Set<T>; removed?: Set<T> }
+export interface CollectionDiff<T> {
+	added?: Set<T>
+	removed?: Set<T>
+}
 
 export type ChangeSource = 'user' | 'remote'
 
-export type StoreListenerFilters = {
+export interface StoreListenerFilters {
 	source: ChangeSource | 'all'
 	scope: RecordScope | 'all'
 }
@@ -40,7 +43,7 @@ export type StoreListenerFilters = {
  *
  * @public
  */
-export type HistoryEntry<R extends UnknownRecord = UnknownRecord> = {
+export interface HistoryEntry<R extends UnknownRecord = UnknownRecord> {
 	changes: RecordsDiff<R>
 	source: ChangeSource
 }
@@ -57,7 +60,7 @@ export type StoreListener<R extends UnknownRecord> = (entry: HistoryEntry<R>) =>
  *
  * @public
  */
-export type ComputedCache<Data, R extends UnknownRecord> = {
+export interface ComputedCache<Data, R extends UnknownRecord> {
 	get(id: IdOf<R>): Data | undefined
 }
 
@@ -69,13 +72,13 @@ export type ComputedCache<Data, R extends UnknownRecord> = {
 export type SerializedStore<R extends UnknownRecord> = Record<IdOf<R>, R>
 
 /** @public */
-export type StoreSnapshot<R extends UnknownRecord> = {
+export interface StoreSnapshot<R extends UnknownRecord> {
 	store: SerializedStore<R>
 	schema: SerializedSchema
 }
 
 /** @public */
-export type StoreValidator<R extends UnknownRecord> = {
+export interface StoreValidator<R extends UnknownRecord> {
 	validate: (record: unknown) => R
 	validateUsingKnownGoodVersion?: (knownGoodVersion: R, record: unknown) => R
 }
@@ -86,7 +89,7 @@ export type StoreValidators<R extends UnknownRecord> = {
 }
 
 /** @public */
-export type StoreError = {
+export interface StoreError {
 	error: Error
 	phase: 'initialize' | 'createRecord' | 'updateRecord' | 'tests'
 	recordBefore?: unknown

packages/store/src/lib/StoreSchema.ts

@@ -74,7 +74,7 @@ export function upgradeSchema(schema: SerializedSchema): Result<SerializedSchema
 }
 
 /** @public */
-export type StoreSchemaOptions<R extends UnknownRecord, P> = {
+export interface StoreSchemaOptions<R extends UnknownRecord, P> {
 	migrations?: MigrationSequence[]
 	/** @public */
 	onValidationFailure?: (data: {

packages/store/src/lib/migrate.ts

@@ -128,7 +128,7 @@ export function createRecordMigrationSequence(opts: {
 }
 
 /** @public */
-export type LegacyMigration<Before = any, After = any> = {
+export interface LegacyMigration<Before = any, After = any> {
 	up: (oldState: Before) => After
 	down: (newState: After) => Before
 }
@@ -137,7 +137,7 @@ export type LegacyMigration<Before = any, After = any> = {
 export type MigrationId = `${string}/${number}`
 
 /** @public */
-export type StandaloneDependsOn = {
+export interface StandaloneDependsOn {
 	readonly dependsOn: readonly MigrationId[]
 }
 

packages/tldraw/src/lib/defaultExternalContentHandlers.ts

@@ -27,7 +27,7 @@ import { getEmbedInfo } from './utils/embeds/embeds'
 import { cleanupText, isRightToLeftLanguage, truncateStringWithEllipsis } from './utils/text/text'
 
 /** @public */
-export type TLExternalContentProps = {
+export interface TLExternalContentProps {
 	// The maximum dimension (width or height) of an image. Images larger than this will be rescaled to fit. Defaults to infinity.
 	maxImageDimension: number
 	// The maximum size (in bytes) of an asset. Assets larger than this will be rejected. Defaults to 10mb (10 * 1024 * 1024).

packages/tldraw/src/lib/shapes/arrow/arrow-types.ts

@@ -2,7 +2,7 @@ import { TLArrowShapeArrowheadStyle, VecLike } from '@tldraw/editor'
 import { TLArrowBindings } from './shared'
 
 /** @public */
-export type TLArrowPoint = {
+export interface TLArrowPoint {
 	handle: VecLike
 	point: VecLike
 	arrowhead: TLArrowShapeArrowheadStyle

packages/tldraw/src/lib/shapes/arrow/arrowheads.ts

@@ -1,7 +1,7 @@
 import { HALF_PI, PI, Vec, VecLike, intersectCircleCircle } from '@tldraw/editor'
 import { TLArrowInfo } from './arrow-types'
 
-type TLArrowPointsInfo = {
+interface TLArrowPointsInfo {
 	point: VecLike
 	int: VecLike
 }

packages/tldraw/src/lib/shapes/arrow/shared.ts

@@ -17,7 +17,7 @@ export function getIsArrowStraight(shape: TLArrowShape) {
 	return Math.abs(shape.props.bend) < 8 // snap to +-8px
 }
 
-export type BoundShapeInfo<T extends TLShape = TLShape> = {
+export interface BoundShapeInfo<T extends TLShape = TLShape> {
 	shape: T
 	didIntersect: boolean
 	isExact: boolean

packages/tldraw/src/lib/shapes/geo/cloudOutline.ts

@@ -215,7 +215,7 @@ export function getCloudArcs(
 	return arcs
 }
 
-type Arc = {
+interface Arc {
 	leftPoint: Vec
 	rightPoint: Vec
 	arcPoint: Vec

packages/tldraw/src/lib/shapes/shared/TextLabel.tsx

@@ -12,7 +12,7 @@ import { TextHelpers } from './TextHelpers'
 import { isLegacyAlign } from './legacyProps'
 import { useEditableText } from './useEditableText'
 
-type TextLabelProps = {
+interface TextLabelProps {
 	id: TLShapeId
 	type: string
 	font: TLDefaultFontStyle

packages/tldraw/src/lib/shapes/shared/defaultStyleDefs.tsx

@@ -147,7 +147,11 @@ const canvasBlob = (size: [number, number], fn: (ctx: CanvasRenderingContext2D)
 	fn(ctx)
 	return canvas.toDataURL()
 }
-type PatternDef = { zoom: number; url: string; theme: 'light' | 'dark' }
+interface PatternDef {
+	zoom: number
+	url: string
+	theme: 'light' | 'dark'
+}
 
 let defaultPixels: { white: string; black: string } | null = null
 function getDefaultPixels() {

packages/tldraw/src/lib/shapes/shared/getBrowserCanvasMaxSize.tsx

@@ -1,6 +1,6 @@
 import canvasSize from 'canvas-size'
 
-export type CanvasMaxSize = {
+export interface CanvasMaxSize {
 	maxWidth: number
 	maxHeight: number
 	maxArea: number

packages/tldraw/src/lib/shapes/text/TextArea.tsx

@@ -1,7 +1,7 @@
 import { preventDefault, stopEventPropagation } from '@tldraw/editor'
 import { forwardRef } from 'react'
 
-type TextAreaProps = {
+interface TextAreaProps {
 	isEditing: boolean
 	text: string
 	handleFocus: () => void

packages/tldraw/src/lib/ui/TldrawUi.tsx

@@ -77,7 +77,7 @@ export const TldrawUi = React.memo(function TldrawUi({
 	)
 })
 
-type TldrawUiContentProps = {
+interface TldrawUiContentProps {
 	hideUi?: boolean
 	shareZone?: ReactNode
 	topZone?: ReactNode

packages/tldraw/src/lib/ui/components/ActionsMenu/DefaultActionsMenu.tsx

@@ -15,7 +15,7 @@ import { TldrawUiMenuContextProvider } from '../primitives/menus/TldrawUiMenuCon
 import { DefaultActionsMenuContent } from './DefaultActionsMenuContent'
 
 /** @public */
-export type TLUiActionsMenuProps = {
+export interface TLUiActionsMenuProps {
 	children?: ReactNode
 }
 

packages/tldraw/src/lib/ui/components/DebugMenu/DefaultDebugMenu.tsx

@@ -10,7 +10,7 @@ import { TldrawUiMenuContextProvider } from '../primitives/menus/TldrawUiMenuCon
 import { DefaultDebugMenuContent } from './DefaultDebugMenuContent'
 
 /** @public */
-export type TLUiDebugMenuProps = {
+export interface TLUiDebugMenuProps {
 	children?: ReactNode
 }
 

packages/tldraw/src/lib/ui/components/HelpMenu/DefaultHelpMenu.tsx

@@ -13,7 +13,7 @@ import { TldrawUiMenuContextProvider } from '../primitives/menus/TldrawUiMenuCon
 import { DefaultHelpMenuContent } from './DefaultHelpMenuContent'
 
 /** @public */
-export type TLUiHelpMenuProps = {
+export interface TLUiHelpMenuProps {
 	children?: ReactNode
 }
 

packages/tldraw/src/lib/ui/components/HelperButtons/DefaultHelperButtons.tsx

@@ -3,7 +3,7 @@ import { TldrawUiMenuContextProvider } from '../primitives/menus/TldrawUiMenuCon
 import { DefaultHelperButtonsContent } from './DefaultHelperButtonsContent'
 
 /** @public */
-export type TLUiHelperButtonsProps = {
+export interface TLUiHelperButtonsProps {
 	children?: ReactNode
 }
 

packages/tldraw/src/lib/ui/components/MainMenu/DefaultMainMenu.tsx

@@ -9,7 +9,7 @@ import { TldrawUiMenuContextProvider } from '../primitives/menus/TldrawUiMenuCon
 import { DefaultMainMenuContent } from './DefaultMainMenuContent'
 
 /** @public */
-export type TLUiMainMenuProps = {
+export interface TLUiMainMenuProps {
 	children?: ReactNode
 }
 

packages/tldraw/src/lib/ui/components/QuickActions/DefaultQuickActions.tsx

@@ -3,7 +3,7 @@ import { TldrawUiMenuContextProvider } from '../primitives/menus/TldrawUiMenuCon
 import { DefaultQuickActionsContent } from './DefaultQuickActionsContent'
 
 /** @public */
-export type TLUiQuickActionsProps = {
+export interface TLUiQuickActionsProps {
 	children?: ReactNode
 }
 

packages/tldraw/src/lib/ui/components/StylePanel/DefaultStylePanelContent.tsx

@@ -35,7 +35,7 @@ import { DoubleDropdownPicker } from './DoubleDropdownPicker'
 import { DropdownPicker } from './DropdownPicker'
 
 /** @public */
-export type TLUiStylePanelContentProps = {
+export interface TLUiStylePanelContentProps {
 	styles: ReturnType<typeof useRelevantStyles>
 }
 

packages/tldraw/src/lib/ui/components/ZoomMenu/DefaultZoomMenu.tsx

@@ -10,7 +10,7 @@ import { TldrawUiMenuContextProvider } from '../primitives/menus/TldrawUiMenuCon
 import { DefaultZoomMenuContent } from './DefaultZoomMenuContent'
 
 /** @public */
-export type TLUiZoomMenuProps = {
+export interface TLUiZoomMenuProps {
 	children?: ReactNode
 }
 

packages/tldraw/src/lib/ui/components/primitives/Button/TldrawUiButtonCheck.tsx

@@ -1,7 +1,9 @@
 import { TldrawUiIcon } from '../TldrawUiIcon'
 
 /** @public */
-export type TLUiButtonCheckProps = { checked: boolean }
+export interface TLUiButtonCheckProps {
+	checked: boolean
+}
 
 /** @public */
 export function TldrawUiButtonCheck({ checked }: TLUiButtonCheckProps) {

packages/tldraw/src/lib/ui/components/primitives/Button/TldrawUiButtonIcon.tsx

@@ -1,7 +1,7 @@
 import { TldrawUiIcon } from '../TldrawUiIcon'
 
 /** @public */
-export type TLUiButtonIconProps = {
+export interface TLUiButtonIconProps {
 	icon: string
 	small?: boolean
 	invertIcon?: boolean

packages/tldraw/src/lib/ui/components/primitives/Button/TldrawUiButtonLabel.tsx

@@ -1,7 +1,9 @@
 import { ReactNode } from 'react'
 
 /** @public */
-export type TLUiButtonLabelProps = { children?: ReactNode }
+export interface TLUiButtonLabelProps {
+	children?: ReactNode
+}
 
 /** @public */
 export function TldrawUiButtonLabel({ children }: TLUiButtonLabelProps) {

packages/tldraw/src/lib/ui/components/primitives/TldrawUiDialog.tsx

@@ -5,7 +5,7 @@ import { TldrawUiButton } from './Button/TldrawUiButton'
 import { TldrawUiButtonIcon } from './Button/TldrawUiButtonIcon'
 
 /** @public */
-export type TLUiDialogHeaderProps = {
+export interface TLUiDialogHeaderProps {
 	className?: string
 	children: ReactNode
 }
@@ -16,7 +16,7 @@ export function TldrawUiDialogHeader({ className, children }: TLUiDialogHeaderPr
 }
 
 /** @public */
-export type TLUiDialogTitleProps = {
+export interface TLUiDialogTitleProps {
 	className?: string
 	children: ReactNode
 }
@@ -48,7 +48,7 @@ export function TldrawUiDialogCloseButton() {
 }
 
 /** @public */
-export type TLUiDialogBodyProps = {
+export interface TLUiDialogBodyProps {
 	className?: string
 	children: ReactNode
 	style?: React.CSSProperties
@@ -64,7 +64,7 @@ export function TldrawUiDialogBody({ className, children, style }: TLUiDialogBod
 }
 
 /** @public */
-export type TLUiDialogFooterProps = {
+export interface TLUiDialogFooterProps {
 	className?: string
 	children: ReactNode
 }

packages/tldraw/src/lib/ui/components/primitives/TldrawUiDropdownMenu.tsx

@@ -8,7 +8,7 @@ import { TldrawUiButtonLabel } from './Button/TldrawUiButtonLabel'
 import { TldrawUiIcon } from './TldrawUiIcon'
 
 /** @public */
-export type TLUiDropdownMenuRootProps = {
+export interface TLUiDropdownMenuRootProps {
 	id: string
 	children: ReactNode
 	modal?: boolean
@@ -57,7 +57,7 @@ export function TldrawUiDropdownMenuTrigger({ children, ...rest }: TLUiDropdownM
 }
 
 /** @public */
-export type TLUiDropdownMenuContentProps = {
+export interface TLUiDropdownMenuContentProps {
 	id?: string
 	children: ReactNode
 	alignOffset?: number
@@ -93,7 +93,10 @@ export function TldrawUiDropdownMenuContent({
 }
 
 /** @public */
-export type TLUiDropdownMenuSubProps = { id: string; children: ReactNode }
+export interface TLUiDropdownMenuSubProps {
+	id: string
+	children: ReactNode
+}
 
 /** @public */
 export function TldrawUiDropdownMenuSub({ id, children }: TLUiDropdownMenuSubProps) {
@@ -107,7 +110,7 @@ export function TldrawUiDropdownMenuSub({ id, children }: TLUiDropdownMenuSubPro
 }
 
 /** @public */
-export type TLUiDropdownMenuSubTriggerProps = {
+export interface TLUiDropdownMenuSubTriggerProps {
 	label: string
 	id?: string
 	title?: string
@@ -138,7 +141,7 @@ export function TldrawUiDropdownMenuSubTrigger({
 }
 
 /** @public */
-export type TLUiDropdownMenuSubContentProps = {
+export interface TLUiDropdownMenuSubContentProps {
 	id?: string
 	alignOffset?: number
 	sideOffset?: number
@@ -172,7 +175,7 @@ export function TldrawUiDropdownMenuSubContent({
 }
 
 /** @public */
-export type TLUiDropdownMenuGroupProps = {
+export interface TLUiDropdownMenuGroupProps {
 	children: ReactNode
 }
 

packages/tldraw/src/lib/ui/components/primitives/TldrawUiPopover.tsx

@@ -4,7 +4,7 @@ import React from 'react'
 import { useMenuIsOpen } from '../../hooks/useMenuIsOpen'
 
 /** @public */
-export type TLUiPopoverProps = {
+export interface TLUiPopoverProps {
 	id: string
 	open?: boolean
 	children: React.ReactNode
@@ -40,7 +40,7 @@ export function TldrawUiPopoverTrigger({ children }: TLUiPopoverTriggerProps) {
 }
 
 /** @public */
-export type TLUiPopoverContentProps = {
+export interface TLUiPopoverContentProps {
 	children: React.ReactNode
 	side: 'top' | 'bottom' | 'left' | 'right'
 	align?: 'start' | 'center' | 'end'

packages/tldraw/src/lib/ui/components/primitives/menus/TldrawUiMenuCheckboxItem.tsx

@@ -11,10 +11,10 @@ import { TldrawUiKbd } from '../TldrawUiKbd'
 import { useTldrawUiMenuContext } from './TldrawUiMenuContext'
 
 /** @public */
-export type TLUiMenuCheckboxItemProps<
+export interface TLUiMenuCheckboxItemProps<
 	TranslationKey extends string = string,
 	IconType extends string = string,
-> = {
+> {
 	icon?: IconType
 	id: string
 	kbd?: string

packages/tldraw/src/lib/ui/components/primitives/menus/TldrawUiMenuContext.tsx

@@ -28,7 +28,7 @@ export function useTldrawUiMenuContext() {
 }
 
 /** @public */
-export type TLUiMenuContextProviderProps = {
+export interface TLUiMenuContextProviderProps {
 	type: TldrawUiMenuContextType
 	sourceId: TLUiEventSource
 	children: React.ReactNode

packages/tldraw/src/lib/ui/components/primitives/menus/TldrawUiMenuGroup.tsx

@@ -7,7 +7,7 @@ import { TldrawUiDropdownMenuGroup } from '../TldrawUiDropdownMenu'
 import { useTldrawUiMenuContext } from './TldrawUiMenuContext'
 
 /** @public */
-export type TLUiMenuGroupProps<TranslationKey extends string = string> = {
+export interface TLUiMenuGroupProps<TranslationKey extends string = string> {
 	id: string
 	/**
 	 * The label to display on the item. If it's a string, it will be translated. If it's an object, the keys will be used as the language keys and the values will be translated.

packages/tldraw/src/lib/ui/components/primitives/menus/TldrawUiMenuItem.tsx

@@ -16,10 +16,10 @@ import { TldrawUiKbd } from '../TldrawUiKbd'
 import { useTldrawUiMenuContext } from './TldrawUiMenuContext'
 
 /** @public */
-export type TLUiMenuItemProps<
+export interface TLUiMenuItemProps<
 	TranslationKey extends string = string,
 	IconType extends string = string,
-> = {
+> {
 	id: string
 	/**
 	 * The icon to display on the item.

packages/tldraw/src/lib/ui/components/primitives/menus/TldrawUiMenuSubmenu.tsx

@@ -20,7 +20,7 @@ import {
 import { useTldrawUiMenuContext } from './TldrawUiMenuContext'
 
 /** @public */
-export type TLUiMenuSubmenuProps<Translation extends string = string> = {
+export interface TLUiMenuSubmenuProps<Translation extends string = string> {
 	id: string
 	label?: Translation | { [key: string]: Translation }
 	disabled?: boolean
@@ -103,7 +103,10 @@ export function TldrawUiMenuSubmenu<Translation extends string = string>({
 }
 
 /** @private */
-export type TLUiContextMenuSubProps = { id: string; children: ReactNode }
+export interface TLUiContextMenuSubProps {
+	id: string
+	children: ReactNode
+}
 
 /** @private */
 export function ContextMenuSubWithMenu({ id, children }: TLUiContextMenuSubProps) {

packages/tldraw/src/lib/ui/context/actions.tsx

@@ -59,7 +59,7 @@ export type TLUiActionsContextType = Record<string, TLUiActionItem>
 export const ActionsContext = React.createContext<TLUiActionsContextType | null>(null)
 
 /** @public */
-export type ActionsProviderProps = {
+export interface ActionsProviderProps {
 	overrides?: (
 		editor: Editor,
 		actions: TLUiActionsContextType,

packages/tldraw/src/lib/ui/context/components.tsx

@@ -61,7 +61,7 @@ export type TLUiComponents = Partial<{
 const TldrawUiComponentsContext = createContext<TLUiComponents | null>(null)
 
 /** @public */
-export type TLUiComponentsProviderProps = {
+export interface TLUiComponentsProviderProps {
 	overrides?: TLUiComponents
 	children: ReactNode
 }

packages/tldraw/src/lib/ui/context/dialogs.tsx

@@ -15,7 +15,7 @@ export interface TLUiDialog {
 }
 
 /** @public */
-export type TLUiDialogsContextType = {
+export interface TLUiDialogsContextType {
 	addDialog: (dialog: Omit<TLUiDialog, 'id'> & { id?: string }) => string
 	removeDialog: (id: string) => string
 	updateDialog: (id: string, newDialogData: Partial<TLUiDialog>) => string
@@ -27,7 +27,7 @@ export type TLUiDialogsContextType = {
 export const DialogsContext = createContext<TLUiDialogsContextType | null>(null)
 
 /** @internal */
-export type DialogsProviderProps = {
+export interface DialogsProviderProps {
 	overrides?: (editor: Editor) => TLUiDialogsContextType
 	children: ReactNode
 }

packages/tldraw/src/lib/ui/context/events.tsx

@@ -118,7 +118,7 @@ export type TLUiEventContextType = TLUiEventHandler<keyof TLUiEventMap>
 export const EventsContext = React.createContext<TLUiEventContextType | null>(null)
 
 /** @public */
-export type EventsProviderProps = {
+export interface EventsProviderProps {
 	onEvent?: TLUiEventHandler
 	children: React.ReactNode
 }

packages/tldraw/src/lib/ui/context/toasts.tsx

@@ -26,7 +26,7 @@ export interface TLUiToastAction {
 }
 
 /** @public */
-export type TLUiToastsContextType = {
+export interface TLUiToastsContextType {
 	addToast: (toast: Omit<TLUiToast, 'id'> & { id?: string }) => string
 	removeToast: (id: TLUiToast['id']) => string
 	clearToasts: () => void
@@ -37,7 +37,7 @@ export type TLUiToastsContextType = {
 export const ToastsContext = createContext<TLUiToastsContextType | null>(null)
 
 /** @internal */
-export type ToastsProviderProps = {
+export interface ToastsProviderProps {
 	overrides?: (editor: Editor) => TLUiToastsContextType
 	children: ReactNode
 }

packages/tldraw/src/lib/ui/hooks/useTools.tsx

@@ -31,7 +31,7 @@ export type TLUiToolsContextType = Record<string, TLUiToolItem>
 export const ToolsContext = React.createContext<null | TLUiToolsContextType>(null)
 
 /** @public */
-export type TLUiToolsProviderProps = {
+export interface TLUiToolsProviderProps {
 	overrides?: (
 		editor: Editor,
 		tools: TLUiToolsContextType,

packages/tldraw/src/lib/ui/hooks/useTranslation/translations.ts

@@ -13,7 +13,7 @@ import { DEFAULT_TRANSLATION } from './defaultTranslation'
 export const RTL_LANGUAGES = new Set(['ar', 'fa', 'he', 'ur', 'ku'])
 
 /** @public */
-export type TLUiTranslation = {
+export interface TLUiTranslation {
 	readonly locale: string
 	readonly label: string
 	readonly messages: Record<TLUiTranslationKey, string>

packages/tldraw/src/lib/utils/assets/assets.ts

@@ -1,7 +1,7 @@
 import { MediaHelpers, assertExists } from '@tldraw/editor'
 import { clampToBrowserMaxCanvasSize } from '../../shapes/shared/getBrowserCanvasMaxSize'
 
-type BoxWidthHeight = {
+interface BoxWidthHeight {
 	w: number
 	h: number
 }