ok

apps/dotcom/src/hooks/useUrlState.ts

@@ -1,5 +1,6 @@
 import { default as React, useEffect } from 'react'
-import { Editor, MAX_ZOOM, MIN_ZOOM, TLPageId, debounce, react, useEditor } from 'tldraw'
+import { Editor, TLPageId, debounce, react, tldrawConstants, useEditor } from 'tldraw'
+const { MAX_ZOOM, MIN_ZOOM } = tldrawConstants
 
 const PARAMS = {
 	// deprecated

apps/examples/src/examples/image-annotator/ImageAnnotationEditor.tsx

@@ -3,7 +3,6 @@ import {
 	AssetRecordType,
 	Box,
 	Editor,
-	PORTRAIT_BREAKPOINT,
 	SVGContainer,
 	TLImageShape,
 	TLShapeId,
@@ -13,11 +12,13 @@ import {
 	exportToBlob,
 	getIndexBelow,
 	react,
+	tldrawConstants,
 	track,
 	useBreakpoint,
 	useEditor,
 } from 'tldraw'
 import { AnnotatorImage } from './types'
+const { PORTRAIT_BREAKPOINT } = tldrawConstants
 
 // TODO:
 // - prevent changing pages (create page, change page, move shapes to new page)

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

@@ -1,7 +1,6 @@
 import { useCallback, useEffect, useMemo } from 'react'
 import {
 	Box,
-	PORTRAIT_BREAKPOINT,
 	SVGContainer,
 	TLImageShape,
 	TLShapeId,
@@ -12,12 +11,14 @@ import {
 	getIndicesBetween,
 	react,
 	sortByIndex,
+	tldrawConstants,
 	track,
 	useBreakpoint,
 	useEditor,
 } from 'tldraw'
 import { ExportPdfButton } from './ExportPdfButton'
 import { Pdf } from './PdfPicker'
+const { PORTRAIT_BREAKPOINT } = tldrawConstants
 
 // TODO:
 // - prevent changing pages (create page, change page, move shapes to new page)

apps/examples/src/examples/speech-bubble/SpeechBubble/SpeechBubbleUtil.tsx

@@ -4,14 +4,11 @@ import {
 	DefaultHorizontalAlignStyle,
 	DefaultSizeStyle,
 	DefaultVerticalAlignStyle,
-	FONT_FAMILIES,
 	Geometry2d,
-	LABEL_FONT_SIZES,
 	Polygon2d,
 	ShapePropsType,
 	ShapeUtil,
 	T,
-	TEXT_PROPS,
 	TLBaseShape,
 	TLHandle,
 	TLOnBeforeUpdateHandler,
@@ -22,10 +19,12 @@ import {
 	ZERO_INDEX_KEY,
 	resizeBox,
 	structuredClone,
+	tldrawConstants,
 	useDefaultColorTheme,
 	vecModelValidator,
 } from 'tldraw'
 import { getSpeechBubbleVertices, getTailIntersectionPoint } from './helpers'
+const { FONT_FAMILIES, LABEL_FONT_SIZES, TEXT_PROPS } = tldrawConstants
 
 // Copied from tldraw/tldraw
 export const STROKE_SIZES = {

packages/editor/api-report.md

@@ -84,12 +84,6 @@ import { whyAmIRunning } from '@tldraw/state';
 // @public
 export function angleDistance(fromAngle: number, toAngle: number, direction: number): number;
 
-// @internal (undocumented)
-export const ANIMATION_MEDIUM_MS = 320;
-
-// @internal (undocumented)
-export const ANIMATION_SHORT_MS = 80;
-
 // @internal (undocumented)
 export function applyRotationToSnapshotShapes({ delta, editor, snapshot, stage, }: {
     delta: number;
@@ -308,9 +302,6 @@ export class Box {
 // @public (undocumented)
 export type BoxLike = Box | BoxModel;
 
-// @internal (undocumented)
-export const CAMERA_SLIDE_FRICTION = 0.09;
-
 // @public (undocumented)
 export function canonicalizeRotation(a: number): number;
 
@@ -455,12 +446,6 @@ export const debugFlags: {
     readonly throwToBlob: DebugFlag<boolean>;
 };
 
-// @internal (undocumented)
-export const DEFAULT_ANIMATION_OPTIONS: {
-    duration: number;
-    easing: (t: number) => number;
-};
-
 // @public (undocumented)
 export function DefaultBackground(): JSX_2.Element;
 
@@ -524,12 +509,6 @@ export const defaultUserPreferences: Readonly<{
 // @public
 export function degreesToRadians(d: number): number;
 
-// @internal (undocumented)
-export const DOUBLE_CLICK_DURATION = 450;
-
-// @internal (undocumented)
-export const DRAG_DISTANCE = 16;
-
 // @public (undocumented)
 export const EASINGS: {
     readonly easeInCubic: (t: number) => number;
@@ -964,6 +943,83 @@ export class Editor extends EventEmitter<TLEventMap> {
     zoomToSelection(animation?: TLAnimationOptions): this;
 }
 
+// @public (undocumented)
+export const editorConstants: {
+    readonly ANIMATION_MEDIUM_MS: 320;
+    readonly ANIMATION_SHORT_MS: 80;
+    readonly BOUND_ARROW_OFFSET: 10;
+    readonly CAMERA_MOVING_TIMEOUT: 64;
+    readonly CAMERA_SLIDE_FRICTION: 0.09;
+    readonly COARSE_DRAG_DISTANCE: 36;
+    readonly COARSE_HANDLE_RADIUS: 20;
+    readonly COARSE_POINTER_WIDTH: 12;
+    readonly COLLABORATOR_CHECK_INTERVAL: 1200;
+    readonly COLLABORATOR_IDLE_TIMEOUT: 3000;
+    readonly COLLABORATOR_INACTIVE_TIMEOUT: 60000;
+    readonly DEFAULT_ANIMATION_OPTIONS: {
+        readonly duration: 0;
+        readonly easing: (t: number) => number;
+    };
+    readonly DOUBLE_CLICK_DURATION: 450;
+    readonly DRAG_DISTANCE: 16;
+    readonly EDGE_SCROLL_DISTANCE: 8;
+    readonly EDGE_SCROLL_SPEED: 20;
+    readonly FOLLOW_CHASE_PAN_SNAP: 0.1;
+    readonly FOLLOW_CHASE_PAN_UNSNAP: 0.2;
+    readonly FOLLOW_CHASE_PROPORTION: 0.5;
+    readonly FOLLOW_CHASE_ZOOM_SNAP: 0.005;
+    readonly FOLLOW_CHASE_ZOOM_UNSNAP: 0.05;
+    readonly GRID_STEPS: readonly [{
+        readonly mid: 0.15;
+        readonly min: -1;
+        readonly step: 64;
+    }, {
+        readonly mid: 0.375;
+        readonly min: 0.05;
+        readonly step: 16;
+    }, {
+        readonly mid: 1;
+        readonly min: 0.15;
+        readonly step: 4;
+    }, {
+        readonly mid: 2.5;
+        readonly min: 0.7;
+        readonly step: 1;
+    }];
+    readonly HANDLE_RADIUS: 12;
+    readonly HASH_PATTERN_ZOOM_NAMES: Record<string, string>;
+    readonly HIT_TEST_MARGIN: 8;
+    readonly INTERNAL_POINTER_IDS: {
+        readonly CAMERA_MOVE: -10;
+    };
+    readonly LONG_PRESS_DURATION: 500;
+    readonly MAX_CLICK_DISTANCE: 40;
+    readonly MAX_PAGES: 40;
+    readonly MAX_SHAPES_PER_PAGE: 2000;
+    readonly MAX_ZOOM: 8;
+    readonly MIN_ARROW_LENGTH: 10;
+    readonly MIN_ZOOM: 0.1;
+    readonly MULTI_CLICK_DURATION: 200;
+    readonly ROTATE_CORNER_TO_SELECTION_CORNER: {
+        readonly bottom_left_rotate: "bottom_left";
+        readonly bottom_right_rotate: "bottom_right";
+        readonly mobile_rotate: "top_left";
+        readonly top_left_rotate: "top_left";
+        readonly top_right_rotate: "top_right";
+    };
+    readonly SIDES: readonly ["top", "right", "bottom", "left"];
+    readonly STROKE_SIZES: {
+        readonly l: 5;
+        readonly m: 3.5;
+        readonly s: 2;
+        readonly xl: 10;
+    };
+    readonly SVG_PADDING: 32;
+    readonly TEXT_SHADOW_LOD: 0.35;
+    readonly WAY_TOO_BIG_ARROW_BEND_FACTOR: 10;
+    readonly ZOOMS: readonly [0.1, 0.25, 0.5, 1, 2, 4, 8];
+};
+
 // @internal (undocumented)
 export const EditorContext: React_2.Context<Editor>;
 
@@ -1135,13 +1191,6 @@ export function getSvgPathFromPoints(points: VecLike[], closed?: boolean): strin
 // @public (undocumented)
 export function getUserPreferences(): TLUserPreferences;
 
-// @public (undocumented)
-export const GRID_STEPS: {
-    mid: number;
-    min: number;
-    step: number;
-}[];
-
 // @public (undocumented)
 export class Group2d extends Geometry2d {
     constructor(config: Omit<Geometry2dOptions, 'isClosed' | 'isFilled'> & {
@@ -1210,9 +1259,6 @@ export function hardReset({ shouldReload }?: {
 // @public (undocumented)
 export function hardResetEditor(): void;
 
-// @internal (undocumented)
-export const HASH_PATTERN_ZOOM_NAMES: Record<string, string>;
-
 // @public (undocumented)
 export class HistoryManager<R extends UnknownRecord> {
     constructor(opts: {
@@ -1262,9 +1308,6 @@ export class HistoryManager<R extends UnknownRecord> {
     undo: () => this;
 }
 
-// @public (undocumented)
-export const HIT_TEST_MARGIN = 8;
-
 // @public (undocumented)
 export function HTMLContainer({ children, className, ...rest }: HTMLContainerProps): JSX_2.Element;
 
@@ -1442,24 +1485,9 @@ export interface MatModel {
     f: number;
 }
 
-// @internal (undocumented)
-export const MAX_PAGES = 40;
-
-// @internal (undocumented)
-export const MAX_SHAPES_PER_PAGE = 2000;
-
-// @internal (undocumented)
-export const MAX_ZOOM = 8;
-
-// @internal (undocumented)
-export const MIN_ZOOM = 0.1;
-
 // @public
 export function moveCameraWhenCloseToEdge(editor: Editor): void;
 
-// @internal (undocumented)
-export const MULTI_CLICK_DURATION = 200;
-
 // @internal (undocumented)
 export function normalizeWheel(event: React.WheelEvent<HTMLElement> | WheelEvent): {
     x: number;
@@ -1643,15 +1671,6 @@ export type ResizeBoxOptions = Partial<{
     minWidth: number;
 }>;
 
-// @public (undocumented)
-export const ROTATE_CORNER_TO_SELECTION_CORNER: {
-    readonly bottom_left_rotate: "bottom_left";
-    readonly bottom_right_rotate: "bottom_right";
-    readonly mobile_rotate: "top_left";
-    readonly top_left_rotate: "top_left";
-    readonly top_right_rotate: "top_right";
-};
-
 // @public (undocumented)
 export type RotateCorner = 'bottom_left_rotate' | 'bottom_right_rotate' | 'mobile_rotate' | 'top_left_rotate' | 'top_right_rotate';
 
@@ -1809,9 +1828,6 @@ export class SideEffectManager<CTX extends {
     }>): () => void;
 }
 
-// @public (undocumented)
-export const SIDES: readonly ["top", "right", "bottom", "left"];
-
 export { Signal }
 
 // @public (undocumented)
@@ -1944,9 +1960,6 @@ export abstract class StateNode implements Partial<TLEventHandlers> {
 // @public (undocumented)
 export const stopEventPropagation: (e: any) => any;
 
-// @internal (undocumented)
-export const SVG_PADDING = 32;
-
 // @public (undocumented)
 export function SVGContainer({ children, className, ...rest }: SVGContainerProps): JSX_2.Element;
 
@@ -3067,9 +3080,6 @@ export class WeakMapCache<T extends object, K> {
 
 export { whyAmIRunning }
 
-// @internal (undocumented)
-export const ZOOMS: number[];
-
 
 export * from "@tldraw/store";
 export * from "@tldraw/tlschema";

packages/editor/src/index.ts

@@ -105,25 +105,7 @@ export {
 } from './lib/config/createTLStore'
 export { createTLUser } from './lib/config/createTLUser'
 export { coreShapes, type TLAnyShapeUtilConstructor } from './lib/config/defaultShapes'
-export {
-	ANIMATION_MEDIUM_MS,
-	ANIMATION_SHORT_MS,
-	CAMERA_SLIDE_FRICTION,
-	DEFAULT_ANIMATION_OPTIONS,
-	DOUBLE_CLICK_DURATION,
-	DRAG_DISTANCE,
-	GRID_STEPS,
-	HASH_PATTERN_ZOOM_NAMES,
-	HIT_TEST_MARGIN,
-	MAX_PAGES,
-	MAX_SHAPES_PER_PAGE,
-	MAX_ZOOM,
-	MIN_ZOOM,
-	MULTI_CLICK_DURATION,
-	SIDES,
-	SVG_PADDING,
-	ZOOMS,
-} from './lib/constants'
+export { editorConstants } from './lib/editor-constants'
 export {
 	Editor,
 	type TLAnimationOptions,
@@ -256,7 +238,6 @@ export { useTLStore } from './lib/hooks/useTLStore'
 export { useTransform } from './lib/hooks/useTransform'
 export {
 	Box,
-	ROTATE_CORNER_TO_SELECTION_CORNER,
 	rotateSelectionHandle,
 	type BoxLike,
 	type RotateCorner,

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

@@ -1,16 +1,15 @@
 import { track } from '@tldraw/state'
 import { TLInstancePresence } from '@tldraw/tlschema'
 import { useEffect, useRef, useState } from 'react'
-import {
-	COLLABORATOR_CHECK_INTERVAL,
-	COLLABORATOR_IDLE_TIMEOUT,
-	COLLABORATOR_INACTIVE_TIMEOUT,
-} from '../constants'
+import { editorConstants } from '../editor-constants'
 import { useEditor } from '../hooks/useEditor'
 import { useEditorComponents } from '../hooks/useEditorComponents'
 import { usePeerIds } from '../hooks/usePeerIds'
 import { usePresence } from '../hooks/usePresence'
 
+const { COLLABORATOR_CHECK_INTERVAL, COLLABORATOR_IDLE_TIMEOUT, COLLABORATOR_INACTIVE_TIMEOUT } =
+	editorConstants
+
 export const LiveCollaborators = track(function Collaborators() {
 	const peerIds = usePeerIds()
 	return (

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

@@ -3,7 +3,7 @@ import { TLHandle, TLShapeId } from '@tldraw/tlschema'
 import { dedupe, modulate, objectMapValues } from '@tldraw/utils'
 import classNames from 'classnames'
 import { Fragment, JSX, useEffect, useRef, useState } from 'react'
-import { COARSE_HANDLE_RADIUS, HANDLE_RADIUS, TEXT_SHADOW_LOD } from '../../constants'
+import { editorConstants } from '../../editor-constants'
 import { useCanvasEvents } from '../../hooks/useCanvasEvents'
 import { useCoarsePointer } from '../../hooks/useCoarsePointer'
 import { useContainer } from '../../hooks/useContainer'
@@ -25,6 +25,8 @@ import { GeometryDebuggingView } from '../GeometryDebuggingView'
 import { LiveCollaborators } from '../LiveCollaborators'
 import { Shape } from '../Shape'
 
+const { COARSE_HANDLE_RADIUS, HANDLE_RADIUS, TEXT_SHADOW_LOD } = editorConstants
+
 /** @public */
 export type TLCanvasComponentProps = { className?: string }
 

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

@@ -1,5 +1,6 @@
 import { modulate } from '@tldraw/utils'
-import { GRID_STEPS } from '../../constants'
+import { editorConstants } from '../../editor-constants'
+const { GRID_STEPS } = editorConstants
 
 /** @public */
 export type TLGridProps = {

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

@@ -1,6 +1,7 @@
 import { TLHandle, TLShapeId } from '@tldraw/tlschema'
 import classNames from 'classnames'
-import { COARSE_HANDLE_RADIUS, HANDLE_RADIUS, SIDES } from '../../constants'
+import { editorConstants } from '../../editor-constants'
+const { COARSE_HANDLE_RADIUS, HANDLE_RADIUS, SIDES } = editorConstants
 
 /** @public */
 export type TLHandleProps = {

packages/editor/src/lib/constants.ts

@@ -1,115 +0,0 @@
-import { EASINGS } from './primitives/easings'
-
-/** @internal */
-export const MAX_SHAPES_PER_PAGE = 2000
-/** @internal */
-export const MAX_PAGES = 40
-
-/** @internal */
-export const ANIMATION_SHORT_MS = 80
-/** @internal */
-export const ANIMATION_MEDIUM_MS = 320
-
-/** @internal */
-export const ZOOMS = [0.1, 0.25, 0.5, 1, 2, 4, 8]
-/** @internal */
-export const MIN_ZOOM = 0.1
-/** @internal */
-export const MAX_ZOOM = 8
-
-/** @internal */
-export const FOLLOW_CHASE_PROPORTION = 0.5
-/** @internal */
-export const FOLLOW_CHASE_PAN_SNAP = 0.1
-/** @internal */
-export const FOLLOW_CHASE_PAN_UNSNAP = 0.2
-/** @internal */
-export const FOLLOW_CHASE_ZOOM_SNAP = 0.005
-/** @internal */
-export const FOLLOW_CHASE_ZOOM_UNSNAP = 0.05
-
-/** @internal */
-export const DOUBLE_CLICK_DURATION = 450
-/** @internal */
-export const MULTI_CLICK_DURATION = 200
-
-/** @internal */
-export const COARSE_DRAG_DISTANCE = 36 // 6 squared
-
-/** @internal */
-export const DRAG_DISTANCE = 16 // 4 squared
-
-/** @internal */
-export const SVG_PADDING = 32
-
-/** @internal */
-export const HASH_PATTERN_ZOOM_NAMES: Record<string, string> = {}
-
-for (let zoom = 1; zoom <= Math.ceil(MAX_ZOOM); zoom++) {
-	HASH_PATTERN_ZOOM_NAMES[zoom + '_dark'] = `hash_pattern_zoom_${zoom}_dark`
-	HASH_PATTERN_ZOOM_NAMES[zoom + '_light'] = `hash_pattern_zoom_${zoom}_light`
-}
-
-/** @internal */
-export const DEFAULT_ANIMATION_OPTIONS = {
-	duration: 0,
-	easing: EASINGS.easeInOutCubic,
-}
-
-/** @internal */
-export const CAMERA_SLIDE_FRICTION = 0.09
-
-/** @public */
-export const GRID_STEPS = [
-	{ min: -1, mid: 0.15, step: 64 },
-	{ min: 0.05, mid: 0.375, step: 16 },
-	{ min: 0.15, mid: 1, step: 4 },
-	{ min: 0.7, mid: 2.5, step: 1 },
-]
-
-/** @internal */
-export const COLLABORATOR_INACTIVE_TIMEOUT = 60000
-
-/** @internal */
-export const COLLABORATOR_IDLE_TIMEOUT = 3000
-
-/** @internal */
-export const COLLABORATOR_CHECK_INTERVAL = 1200
-
-/**
- * Negative pointer ids are reserved for internal use.
- *
- * @internal */
-export const INTERNAL_POINTER_IDS = {
-	CAMERA_MOVE: -10,
-} as const
-
-/** @internal */
-export const CAMERA_MOVING_TIMEOUT = 64
-
-/** @public */
-export const HIT_TEST_MARGIN = 8
-
-/** @internal */
-export const EDGE_SCROLL_SPEED = 20
-
-/** @internal */
-export const EDGE_SCROLL_DISTANCE = 8
-
-/** @internal */
-export const COARSE_POINTER_WIDTH = 12
-
-/** @internal */
-export const COARSE_HANDLE_RADIUS = 20
-
-/** @internal */
-export const HANDLE_RADIUS = 12
-
-/** @public */
-export const SIDES = ['top', 'right', 'bottom', 'left'] as const
-
-/** @internal */
-export const LONG_PRESS_DURATION = 500
-
-/** @internal */
-export const TEXT_SHADOW_LOD = 0.35

packages/editor/src/lib/editor-constants.ts

@@ -0,0 +1,70 @@
+import { EASINGS } from './primitives/easings'
+
+const MAX_ZOOM = 8
+const HASH_PATTERN_ZOOM_NAMES = {} as Record<string, string>
+for (let zoom = 1; zoom <= Math.ceil(MAX_ZOOM); zoom++) {
+	HASH_PATTERN_ZOOM_NAMES[zoom + '_dark'] = `hash_pattern_zoom_${zoom}_dark`
+	HASH_PATTERN_ZOOM_NAMES[zoom + '_light'] = `hash_pattern_zoom_${zoom}_light`
+}
+
+/** @public */
+export const editorConstants = {
+	MAX_CLICK_DISTANCE: 40,
+	MAX_SHAPES_PER_PAGE: 2000,
+	MAX_PAGES: 40,
+	ANIMATION_SHORT_MS: 80,
+	ANIMATION_MEDIUM_MS: 320,
+	ZOOMS: [0.1, 0.25, 0.5, 1, 2, 4, 8],
+	MIN_ZOOM: 0.1,
+	MAX_ZOOM,
+	HASH_PATTERN_ZOOM_NAMES,
+	FOLLOW_CHASE_PROPORTION: 0.5,
+	FOLLOW_CHASE_PAN_SNAP: 0.1,
+	FOLLOW_CHASE_PAN_UNSNAP: 0.2,
+	FOLLOW_CHASE_ZOOM_SNAP: 0.005,
+	FOLLOW_CHASE_ZOOM_UNSNAP: 0.05,
+	DOUBLE_CLICK_DURATION: 450,
+	MULTI_CLICK_DURATION: 200,
+	COARSE_DRAG_DISTANCE: 36, // 6 squared
+	DRAG_DISTANCE: 16, // 4 squared
+	SVG_PADDING: 32,
+	DEFAULT_ANIMATION_OPTIONS: { duration: 0, easing: EASINGS.easeInOutCubic },
+	CAMERA_SLIDE_FRICTION: 0.09,
+	GRID_STEPS: [
+		{ min: -1, mid: 0.15, step: 64 },
+		{ min: 0.05, mid: 0.375, step: 16 },
+		{ min: 0.15, mid: 1, step: 4 },
+		{ min: 0.7, mid: 2.5, step: 1 },
+	],
+	COLLABORATOR_INACTIVE_TIMEOUT: 60000,
+	COLLABORATOR_IDLE_TIMEOUT: 3000,
+	COLLABORATOR_CHECK_INTERVAL: 1200,
+	// Negative pointer ids are reserved for internal use.
+	INTERNAL_POINTER_IDS: { CAMERA_MOVE: -10 } as const,
+	CAMERA_MOVING_TIMEOUT: 64,
+	HIT_TEST_MARGIN: 8,
+	EDGE_SCROLL_SPEED: 20,
+	EDGE_SCROLL_DISTANCE: 8,
+	COARSE_POINTER_WIDTH: 12,
+	COARSE_HANDLE_RADIUS: 20,
+	HANDLE_RADIUS: 12,
+	SIDES: ['top', 'right', 'bottom', 'left'] as const,
+	LONG_PRESS_DURATION: 500,
+	TEXT_SHADOW_LOD: 0.35,
+	MIN_ARROW_LENGTH: 10,
+	BOUND_ARROW_OFFSET: 10,
+	WAY_TOO_BIG_ARROW_BEND_FACTOR: 10,
+	STROKE_SIZES: {
+		s: 2,
+		m: 3.5,
+		l: 5,
+		xl: 10,
+	},
+	ROTATE_CORNER_TO_SELECTION_CORNER: {
+		top_left_rotate: 'top_left',
+		top_right_rotate: 'top_right',
+		bottom_right_rotate: 'bottom_right',
+		bottom_left_rotate: 'bottom_left',
+		mobile_rotate: 'top_left',
+	} as const,
+} as const

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

@@ -61,28 +61,7 @@ import { flushSync } from 'react-dom'
 import { createRoot } from 'react-dom/client'
 import { TLUser, createTLUser } from '../config/createTLUser'
 import { checkShapesAndAddCore } from '../config/defaultShapes'
-import {
-	ANIMATION_MEDIUM_MS,
-	CAMERA_MOVING_TIMEOUT,
-	CAMERA_SLIDE_FRICTION,
-	COARSE_DRAG_DISTANCE,
-	COLLABORATOR_IDLE_TIMEOUT,
-	DEFAULT_ANIMATION_OPTIONS,
-	DRAG_DISTANCE,
-	FOLLOW_CHASE_PAN_SNAP,
-	FOLLOW_CHASE_PAN_UNSNAP,
-	FOLLOW_CHASE_PROPORTION,
-	FOLLOW_CHASE_ZOOM_SNAP,
-	FOLLOW_CHASE_ZOOM_UNSNAP,
-	HIT_TEST_MARGIN,
-	INTERNAL_POINTER_IDS,
-	LONG_PRESS_DURATION,
-	MAX_PAGES,
-	MAX_SHAPES_PER_PAGE,
-	MAX_ZOOM,
-	MIN_ZOOM,
-	ZOOMS,
-} from '../constants'
+import { editorConstants } from '../editor-constants'
 import { Box } from '../primitives/Box'
 import { Mat, MatLike, MatModel } from '../primitives/Mat'
 import { Vec, VecLike } from '../primitives/Vec'
@@ -132,6 +111,29 @@ import { TLHistoryBatchOptions } from './types/history-types'
 import { OptionalKeys, RequiredKeys, TLSvgOptions } from './types/misc-types'
 import { TLResizeHandle } from './types/selection-types'
 
+const {
+	ANIMATION_MEDIUM_MS,
+	CAMERA_MOVING_TIMEOUT,
+	CAMERA_SLIDE_FRICTION,
+	COARSE_DRAG_DISTANCE,
+	COLLABORATOR_IDLE_TIMEOUT,
+	DEFAULT_ANIMATION_OPTIONS,
+	DRAG_DISTANCE,
+	FOLLOW_CHASE_PAN_SNAP,
+	FOLLOW_CHASE_PAN_UNSNAP,
+	FOLLOW_CHASE_PROPORTION,
+	FOLLOW_CHASE_ZOOM_SNAP,
+	FOLLOW_CHASE_ZOOM_UNSNAP,
+	HIT_TEST_MARGIN,
+	INTERNAL_POINTER_IDS,
+	LONG_PRESS_DURATION,
+	MAX_PAGES,
+	MAX_SHAPES_PER_PAGE,
+	MAX_ZOOM,
+	MIN_ZOOM,
+	ZOOMS,
+} = editorConstants
+
 /** @public */
 export type TLAnimationOptions = Partial<{
 	duration: number
@@ -2226,7 +2228,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 
 		const { x: cx, y: cy, z: cz } = this.getCamera()
 
-		let zoom = MAX_ZOOM
+		let zoom = MAX_ZOOM as number
 
 		for (let i = 1; i < ZOOMS.length; i++) {
 			const z1 = ZOOMS[i - 1]
@@ -2264,7 +2266,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 
 		const { x: cx, y: cy, z: cz } = this.getCamera()
 
-		let zoom = MIN_ZOOM
+		let zoom = MIN_ZOOM as number
 
 		for (let i = ZOOMS.length - 1; i > 0; i--) {
 			const z1 = ZOOMS[i - 1]
@@ -3085,7 +3087,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 		}[] = []
 
 		let nextIndex = MAX_SHAPES_PER_PAGE * 2
-		let nextBackgroundIndex = MAX_SHAPES_PER_PAGE
+		let nextBackgroundIndex = MAX_SHAPES_PER_PAGE as number
 
 		const erasingShapeIds = this.getErasingShapeIds()
 

packages/editor/src/lib/editor/getSvgJsx.tsx

@@ -6,10 +6,11 @@ import {
 	getDefaultColorTheme,
 } from '@tldraw/tlschema'
 import { Fragment, ReactElement } from 'react'
-import { SVG_PADDING } from '../constants'
+import { editorConstants } from '../editor-constants'
 import { Editor } from './Editor'
 import { SvgExportContext, SvgExportContextProvider, SvgExportDef } from './types/SvgExportContext'
 import { TLSvgOptions } from './types/misc-types'
+const { SVG_PADDING } = editorConstants
 
 export async function getSvgJsx(
 	editor: Editor,

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

@@ -1,14 +1,12 @@
-import {
-	COARSE_DRAG_DISTANCE,
-	DOUBLE_CLICK_DURATION,
-	DRAG_DISTANCE,
-	MULTI_CLICK_DURATION,
-} from '../../constants'
+import { editorConstants } from '../../editor-constants'
 import { Vec } from '../../primitives/Vec'
 import { uniqueId } from '../../utils/uniqueId'
 import type { Editor } from '../Editor'
 import { TLClickEventInfo, TLPointerEventInfo } from '../types/event-types'
 
+const { COARSE_DRAG_DISTANCE, DOUBLE_CLICK_DURATION, DRAG_DISTANCE, MULTI_CLICK_DURATION } =
+	editorConstants
+
 type TLClickState =
 	| 'idle'
 	| 'pendingDouble'

packages/editor/src/lib/editor/shapes/shared/arrow/curved-arrow.ts

@@ -1,4 +1,5 @@
 import { TLArrowShape } from '@tldraw/tlschema'
+import { editorConstants } from '../../../../editor-constants'
 import { Mat } from '../../../../primitives/Mat'
 import { Vec, VecLike } from '../../../../primitives/Vec'
 import { intersectCirclePolygon, intersectCirclePolyline } from '../../../../primitives/intersect'
@@ -12,16 +13,15 @@ import {
 import type { Editor } from '../../../Editor'
 import { TLArcInfo, TLArrowInfo } from './arrow-types'
 import {
-	BOUND_ARROW_OFFSET,
-	MIN_ARROW_LENGTH,
-	STROKE_SIZES,
-	WAY_TOO_BIG_ARROW_BEND_FACTOR,
 	getArrowTerminalsInArrowSpace,
 	getBoundShapeInfoForTerminal,
 	getBoundShapeRelationships,
 } from './shared'
 import { getStraightArrowInfo } from './straight-arrow'
 
+const { BOUND_ARROW_OFFSET, MIN_ARROW_LENGTH, STROKE_SIZES, WAY_TOO_BIG_ARROW_BEND_FACTOR } =
+	editorConstants
+
 export function getCurvedArrowInfo(
 	editor: Editor,
 	shape: TLArrowShape,

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

@@ -114,21 +114,6 @@ export function getArrowTerminalsInArrowSpace(editor: Editor, shape: TLArrowShap
 	return { start, end }
 }
 
-/** @internal */
-export const MIN_ARROW_LENGTH = 10
-/** @internal */
-export const BOUND_ARROW_OFFSET = 10
-/** @internal */
-export const WAY_TOO_BIG_ARROW_BEND_FACTOR = 10
-
-/** @public */
-export const STROKE_SIZES: Record<string, number> = {
-	s: 2,
-	m: 3.5,
-	l: 5,
-	xl: 10,
-}
-
 /**
  * Get the relationships for an arrow that has two bound shape terminals.
  * If the arrow has only one bound shape, then it is always "safe" to apply

packages/editor/src/lib/editor/shapes/shared/arrow/straight-arrow.ts

@@ -1,4 +1,5 @@
 import { TLArrowShape } from '@tldraw/tlschema'
+import { editorConstants } from '../../../../editor-constants'
 import { Mat, MatModel } from '../../../../primitives/Mat'
 import { Vec, VecLike } from '../../../../primitives/Vec'
 import {
@@ -8,14 +9,12 @@ import {
 import { Editor } from '../../../Editor'
 import { TLArrowInfo } from './arrow-types'
 import {
-	BOUND_ARROW_OFFSET,
 	BoundShapeInfo,
-	MIN_ARROW_LENGTH,
-	STROKE_SIZES,
 	getArrowTerminalsInArrowSpace,
 	getBoundShapeInfoForTerminal,
 	getBoundShapeRelationships,
 } from './shared'
+const { BOUND_ARROW_OFFSET, MIN_ARROW_LENGTH, STROKE_SIZES } = editorConstants
 
 export function getStraightArrowInfo(editor: Editor, shape: TLArrowShape): TLArrowInfo {
 	const { start, end, arrowheadStart, arrowheadEnd } = shape.props

packages/editor/src/lib/primitives/geometry/Arc2d.ts

@@ -2,7 +2,7 @@ import { Vec } from '../Vec'
 import { intersectLineSegmentCircle } from '../intersect'
 import { getArcMeasure, getPointInArcT, getPointOnCircle } from '../utils'
 import { Geometry2d, Geometry2dOptions } from './Geometry2d'
-import { getVerticesCountForLength } from './geometry-constants'
+import { getVerticesCountForLength } from './getVerticesCountForLength'
 
 /** @public */
 export class Arc2d extends Geometry2d {

packages/editor/src/lib/primitives/geometry/Circle2d.ts

@@ -3,7 +3,7 @@ import { Vec } from '../Vec'
 import { intersectLineSegmentCircle } from '../intersect'
 import { PI2, getPointOnCircle } from '../utils'
 import { Geometry2d, Geometry2dOptions } from './Geometry2d'
-import { getVerticesCountForLength } from './geometry-constants'
+import { getVerticesCountForLength } from './getVerticesCountForLength'
 
 /** @public */
 export class Circle2d extends Geometry2d {

packages/editor/src/lib/primitives/geometry/Ellipse2d.ts

@@ -3,7 +3,7 @@ import { Vec } from '../Vec'
 import { PI, PI2 } from '../utils'
 import { Edge2d } from './Edge2d'
 import { Geometry2d, Geometry2dOptions } from './Geometry2d'
-import { getVerticesCountForLength } from './geometry-constants'
+import { getVerticesCountForLength } from './getVerticesCountForLength'
 
 /** @public */
 export class Ellipse2d extends Geometry2d {

packages/editor/src/lib/primitives/geometry/geometry-constants.ts

@@ -1,6 +0,0 @@
-const SPACING = 20
-const MIN_COUNT = 8
-
-export function getVerticesCountForLength(length: number, spacing = SPACING) {
-	return Math.max(MIN_COUNT, Math.ceil(length / spacing))
-}

packages/editor/src/lib/primitives/geometry/getVerticesCountForLength.ts

@@ -0,0 +1,3 @@
+export function getVerticesCountForLength(length: number, spacing = 20) {
+	return Math.max(8, Math.ceil(length / spacing))
+}

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

@@ -1,4 +1,4 @@
-import { COARSE_POINTER_WIDTH, EDGE_SCROLL_DISTANCE, EDGE_SCROLL_SPEED } from '../constants'
+import { editorConstants } from '../editor-constants'
 import { Editor } from '../editor/Editor'
 
 /**
@@ -14,8 +14,8 @@ function getEdgeProximityFactor(
 	insetStart: boolean,
 	insetEnd: boolean
 ) {
-	const dist = EDGE_SCROLL_DISTANCE
-	const pw = isCoarse ? COARSE_POINTER_WIDTH : 0 // pointer width
+	const dist = editorConstants.EDGE_SCROLL_DISTANCE
+	const pw = isCoarse ? editorConstants.COARSE_POINTER_WIDTH : 0 // pointer width
 	const pMin = position - pw
 	const pMax = position + pw
 	const min = insetStart ? 0 : dist
@@ -62,7 +62,7 @@ export function moveCameraWhenCloseToEdge(editor: Editor) {
 	if (proximityFactorX === 0 && proximityFactorY === 0) return
 
 	// Determines the base speed of the scroll
-	const pxSpeed = editor.user.getEdgeScrollSpeed() * EDGE_SCROLL_SPEED
+	const pxSpeed = editor.user.getEdgeScrollSpeed() * editorConstants.EDGE_SCROLL_SPEED
 	const scrollDeltaX = (pxSpeed * proximityFactorX * screenSizeFactorX) / zoomLevel
 	const scrollDeltaY = (pxSpeed * proximityFactorY * screenSizeFactorY) / zoomLevel
 

packages/tldraw/api-report.md

@@ -414,7 +414,7 @@ export const DefaultQuickActions: NamedExoticComponent<TLUiQuickActionsProps>;
 export function DefaultQuickActionsContent(): JSX_2.Element | undefined;
 
 // @public (undocumented)
-export const defaultShapeTools: (typeof ArrowShapeTool | typeof DrawShapeTool | typeof FrameShapeTool | typeof GeoShapeTool | typeof LineShapeTool | typeof NoteShapeTool | typeof TextShapeTool)[];
+export const defaultShapeTools: (typeof ArrowShapeTool | typeof FrameShapeTool | typeof GeoShapeTool | typeof HighlightShapeTool | typeof LineShapeTool | typeof NoteShapeTool | typeof TextShapeTool)[];
 
 // @public (undocumented)
 export const defaultShapeUtils: TLAnyShapeUtilConstructor[];
@@ -460,7 +460,7 @@ export function downsizeImage(blob: Blob, width: number, height: number, opts?:
 // @public (undocumented)
 export class DrawShapeTool extends StateNode {
     // (undocumented)
-    static children: () => (typeof Drawing | typeof Idle_2)[];
+    static children: () => (typeof Drawing | typeof Idle_3)[];
     // (undocumented)
     static id: string;
     // (undocumented)
@@ -622,9 +622,6 @@ export function fitFrameToContent(editor: Editor, id: TLShapeId, opts?: {
 // @public (undocumented)
 export function FitFrameToContentMenuItem(): JSX_2.Element | null;
 
-// @public (undocumented)
-export const FONT_FAMILIES: Record<TLDefaultFontStyle, string>;
-
 // @public (undocumented)
 export class FrameShapeTool extends BaseBoxShapeTool {
     // (undocumented)
@@ -683,7 +680,7 @@ export function FrameToolbarItem(): JSX_2.Element;
 // @public (undocumented)
 export class GeoShapeTool extends StateNode {
     // (undocumented)
-    static children: () => (typeof Idle_3 | typeof Pointing_2)[];
+    static children: () => (typeof Idle_2 | typeof Pointing_2)[];
     // (undocumented)
     static id: string;
     // (undocumented)
@@ -893,7 +890,7 @@ export function HexagonToolbarItem(): JSX_2.Element;
 // @public (undocumented)
 export class HighlightShapeTool extends StateNode {
     // (undocumented)
-    static children: () => (typeof Drawing | typeof Idle_2)[];
+    static children: () => (typeof Drawing | typeof Idle_3)[];
     // (undocumented)
     static id: string;
     // (undocumented)
@@ -993,9 +990,6 @@ export function KeyboardShortcutsMenuItem(): JSX_2.Element | null;
 // @internal (undocumented)
 export function kickoutOccludedShapes(editor: Editor, shapeIds: TLShapeId[]): void;
 
-// @public (undocumented)
-export const LABEL_FONT_SIZES: Record<TLDefaultSizeStyle, number>;
-
 // @public (undocumented)
 export function LanguageMenu(): JSX_2.Element;
 
@@ -1234,26 +1228,6 @@ export function parseTldrawJsonFile({ json, schema, }: {
 // @public (undocumented)
 export function PasteMenuItem(): JSX_2.Element;
 
-// @public (undocumented)
-export enum PORTRAIT_BREAKPOINT {
-    // (undocumented)
-    DESKTOP = 7,
-    // (undocumented)
-    MOBILE = 4,
-    // (undocumented)
-    MOBILE_SM = 3,
-    // (undocumented)
-    MOBILE_XS = 2,
-    // (undocumented)
-    MOBILE_XXS = 1,
-    // (undocumented)
-    TABLET = 6,
-    // (undocumented)
-    TABLET_SM = 5,
-    // (undocumented)
-    ZERO = 0
-}
-
 // @public (undocumented)
 export function PreferencesGroup(): JSX_2.Element;
 
@@ -1332,15 +1306,6 @@ export function StackMenuItems(): JSX_2.Element;
 // @public (undocumented)
 export function StarToolbarItem(): JSX_2.Element;
 
-// @public (undocumented)
-export const TEXT_PROPS: {
-    fontStyle: string;
-    fontVariant: string;
-    fontWeight: string;
-    lineHeight: number;
-    padding: string;
-};
-
 // @public (undocumented)
 export const TextLabel: React_2.NamedExoticComponent<TextLabelProps>;
 
@@ -1480,6 +1445,339 @@ export function Tldraw(props: TldrawProps): JSX_2.Element;
 // @public (undocumented)
 export const TLDRAW_FILE_EXTENSION: ".tldr";
 
+// @public (undocumented)
+export const tldrawConstants: {
+    ADJACENT_SHAPE_MARGIN: number;
+    ANIMATION_MEDIUM_MS: 320;
+    ANIMATION_SHORT_MS: 80;
+    ARROW_LABEL_FONT_SIZES: Record<"l" | "m" | "s" | "xl", number>;
+    ARROW_LABEL_PADDING: number;
+    BOUND_ARROW_OFFSET: 10;
+    CAMERA_MOVING_TIMEOUT: 64;
+    CAMERA_SLIDE_FRICTION: 0.09;
+    COARSE_DRAG_DISTANCE: 36;
+    COARSE_HANDLE_RADIUS: 20;
+    COARSE_POINTER_WIDTH: 12;
+    COLLABORATOR_CHECK_INTERVAL: 1200;
+    COLLABORATOR_IDLE_TIMEOUT: 3000;
+    COLLABORATOR_INACTIVE_TIMEOUT: 60000;
+    DEFAULT_ANIMATION_OPTIONS: {
+        readonly duration: 0;
+        readonly easing: (t: number) => number;
+    };
+    DOUBLE_CLICK_DURATION: 450;
+    DRAG_DISTANCE: 16;
+    EDGE_SCROLL_DISTANCE: 8;
+    EDGE_SCROLL_SPEED: 20;
+    FOLLOW_CHASE_PAN_SNAP: 0.1;
+    FOLLOW_CHASE_PAN_UNSNAP: 0.2;
+    FOLLOW_CHASE_PROPORTION: 0.5;
+    FOLLOW_CHASE_ZOOM_SNAP: 0.005;
+    FOLLOW_CHASE_ZOOM_UNSNAP: 0.05;
+    FONT_FAMILIES: {
+        draw: string;
+        mono: string;
+        sans: string;
+        serif: string;
+    };
+    FONT_SIZES: Record<"l" | "m" | "s" | "xl", number>;
+    GRID_STEPS: readonly [{
+        readonly mid: 0.15;
+        readonly min: -1;
+        readonly step: 64;
+    }, {
+        readonly mid: 0.375;
+        readonly min: 0.05;
+        readonly step: 16;
+    }, {
+        readonly mid: 1;
+        readonly min: 0.15;
+        readonly step: 4;
+    }, {
+        readonly mid: 2.5;
+        readonly min: 0.7;
+        readonly step: 1;
+    }];
+    HANDLE_RADIUS: 12;
+    HASH_PATTERN_ZOOM_NAMES: Record<string, string>;
+    HIT_TEST_MARGIN: 8;
+    INTERNAL_POINTER_IDS: {
+        readonly CAMERA_MOVE: -10;
+    };
+    LABEL_FONT_SIZES: Record<"l" | "m" | "s" | "xl", number>;
+    LABEL_PADDING: number;
+    LABEL_TO_ARROW_PADDING: number;
+    LONG_PRESS_DURATION: 500;
+    MAX_CLICK_DISTANCE: 40;
+    MAX_PAGES: 40;
+    MAX_SHAPES_PER_PAGE: 2000;
+    MAX_ZOOM: 8;
+    MIN_ARROW_LENGTH: 10;
+    MIN_CROP_SIZE: number;
+    MIN_END_PRESSURE: number;
+    MIN_GEO_SIZE_WITH_LABEL: number;
+    MIN_START_PRESSURE: number;
+    MIN_ZOOM: 0.1;
+    MULTI_CLICK_DURATION: 200;
+    PORTRAIT_BREAKPOINT: {
+        DESKTOP: number;
+        MOBILE_SM: number;
+        MOBILE_XS: number;
+        MOBILE_XXS: number;
+        MOBILE: number;
+        TABLET_SM: number;
+        TABLET: number;
+        ZERO: number;
+    };
+    PORTRAIT_BREAKPOINTS: number[];
+    ROTATE_CORNER_TO_SELECTION_CORNER: {
+        readonly bottom_left_rotate: "bottom_left";
+        readonly bottom_right_rotate: "bottom_right";
+        readonly mobile_rotate: "top_left";
+        readonly top_left_rotate: "top_left";
+        readonly top_right_rotate: "top_right";
+    };
+    SIDES: readonly ["top", "right", "bottom", "left"];
+    STROKE_SIZES: Record<"l" | "m" | "s" | "xl", number>;
+    STYLES: {
+        readonly arrowheadEnd: readonly [{
+            readonly icon: "arrowhead-none";
+            readonly value: "none";
+        }, {
+            readonly icon: "arrowhead-arrow";
+            readonly value: "arrow";
+        }, {
+            readonly icon: "arrowhead-triangle";
+            readonly value: "triangle";
+        }, {
+            readonly icon: "arrowhead-square";
+            readonly value: "square";
+        }, {
+            readonly icon: "arrowhead-dot";
+            readonly value: "dot";
+        }, {
+            readonly icon: "arrowhead-diamond";
+            readonly value: "diamond";
+        }, {
+            readonly icon: "arrowhead-triangle-inverted";
+            readonly value: "inverted";
+        }, {
+            readonly icon: "arrowhead-bar";
+            readonly value: "bar";
+        }];
+        readonly arrowheadStart: readonly [{
+            readonly icon: "arrowhead-none";
+            readonly value: "none";
+        }, {
+            readonly icon: "arrowhead-arrow";
+            readonly value: "arrow";
+        }, {
+            readonly icon: "arrowhead-triangle";
+            readonly value: "triangle";
+        }, {
+            readonly icon: "arrowhead-square";
+            readonly value: "square";
+        }, {
+            readonly icon: "arrowhead-dot";
+            readonly value: "dot";
+        }, {
+            readonly icon: "arrowhead-diamond";
+            readonly value: "diamond";
+        }, {
+            readonly icon: "arrowhead-triangle-inverted";
+            readonly value: "inverted";
+        }, {
+            readonly icon: "arrowhead-bar";
+            readonly value: "bar";
+        }];
+        readonly color: readonly [{
+            readonly icon: "color";
+            readonly value: "black";
+        }, {
+            readonly icon: "color";
+            readonly value: "grey";
+        }, {
+            readonly icon: "color";
+            readonly value: "light-violet";
+        }, {
+            readonly icon: "color";
+            readonly value: "violet";
+        }, {
+            readonly icon: "color";
+            readonly value: "blue";
+        }, {
+            readonly icon: "color";
+            readonly value: "light-blue";
+        }, {
+            readonly icon: "color";
+            readonly value: "yellow";
+        }, {
+            readonly icon: "color";
+            readonly value: "orange";
+        }, {
+            readonly icon: "color";
+            readonly value: "green";
+        }, {
+            readonly icon: "color";
+            readonly value: "light-green";
+        }, {
+            readonly icon: "color";
+            readonly value: "light-red";
+        }, {
+            readonly icon: "color";
+            readonly value: "red";
+        }];
+        readonly dash: readonly [{
+            readonly icon: "dash-draw";
+            readonly value: "draw";
+        }, {
+            readonly icon: "dash-dashed";
+            readonly value: "dashed";
+        }, {
+            readonly icon: "dash-dotted";
+            readonly value: "dotted";
+        }, {
+            readonly icon: "dash-solid";
+            readonly value: "solid";
+        }];
+        readonly fill: readonly [{
+            readonly icon: "fill-none";
+            readonly value: "none";
+        }, {
+            readonly icon: "fill-semi";
+            readonly value: "semi";
+        }, {
+            readonly icon: "fill-solid";
+            readonly value: "solid";
+        }, {
+            readonly icon: "fill-pattern";
+            readonly value: "pattern";
+        }];
+        readonly font: readonly [{
+            readonly icon: "font-draw";
+            readonly value: "draw";
+        }, {
+            readonly icon: "font-sans";
+            readonly value: "sans";
+        }, {
+            readonly icon: "font-serif";
+            readonly value: "serif";
+        }, {
+            readonly icon: "font-mono";
+            readonly value: "mono";
+        }];
+        readonly geo: readonly [{
+            readonly icon: "geo-rectangle";
+            readonly value: "rectangle";
+        }, {
+            readonly icon: "geo-ellipse";
+            readonly value: "ellipse";
+        }, {
+            readonly icon: "geo-cloud";
+            readonly value: "cloud";
+        }, {
+            readonly icon: "geo-triangle";
+            readonly value: "triangle";
+        }, {
+            readonly icon: "geo-diamond";
+            readonly value: "diamond";
+        }, {
+            readonly icon: "geo-pentagon";
+            readonly value: "pentagon";
+        }, {
+            readonly icon: "geo-hexagon";
+            readonly value: "hexagon";
+        }, {
+            readonly icon: "geo-octagon";
+            readonly value: "octagon";
+        }, {
+            readonly icon: "geo-star";
+            readonly value: "star";
+        }, {
+            readonly icon: "geo-rhombus";
+            readonly value: "rhombus";
+        }, {
+            readonly icon: "geo-rhombus-2";
+            readonly value: "rhombus-2";
+        }, {
+            readonly icon: "geo-oval";
+            readonly value: "oval";
+        }, {
+            readonly icon: "geo-trapezoid";
+            readonly value: "trapezoid";
+        }, {
+            readonly icon: "geo-arrow-right";
+            readonly value: "arrow-right";
+        }, {
+            readonly icon: "geo-arrow-left";
+            readonly value: "arrow-left";
+        }, {
+            readonly icon: "geo-arrow-up";
+            readonly value: "arrow-up";
+        }, {
+            readonly icon: "geo-arrow-down";
+            readonly value: "arrow-down";
+        }, {
+            readonly icon: "geo-x-box";
+            readonly value: "x-box";
+        }, {
+            readonly icon: "geo-check-box";
+            readonly value: "check-box";
+        }];
+        readonly horizontalAlign: readonly [{
+            readonly icon: "text-align-left";
+            readonly value: "start";
+        }, {
+            readonly icon: "text-align-center";
+            readonly value: "middle";
+        }, {
+            readonly icon: "text-align-right";
+            readonly value: "end";
+        }];
+        readonly size: readonly [{
+            readonly icon: "size-small";
+            readonly value: "s";
+        }, {
+            readonly icon: "size-medium";
+            readonly value: "m";
+        }, {
+            readonly icon: "size-large";
+            readonly value: "l";
+        }, {
+            readonly icon: "size-extra-large";
+            readonly value: "xl";
+        }];
+        readonly spline: readonly [{
+            readonly icon: "spline-line";
+            readonly value: "line";
+        }, {
+            readonly icon: "spline-cubic";
+            readonly value: "cubic";
+        }];
+        readonly verticalAlign: readonly [{
+            readonly icon: "vertical-align-start";
+            readonly value: "start";
+        }, {
+            readonly icon: "vertical-align-center";
+            readonly value: "middle";
+        }, {
+            readonly icon: "vertical-align-end";
+            readonly value: "end";
+        }];
+    };
+    SVG_PADDING: 32;
+    TEXT_PROPS: {
+        fontStyle: string;
+        fontVariant: string;
+        fontWeight: string;
+        lineHeight: number;
+        padding: string;
+    };
+    TEXT_SHADOW_LOD: 0.35;
+    WAY_TOO_BIG_ARROW_BEND_FACTOR: 10;
+    ZOOMS: readonly [0.1, 0.25, 0.5, 1, 2, 4, 8];
+};
+
 // @public (undocumented)
 export interface TldrawFile {
     // (undocumented)

packages/tldraw/src/index.ts

@@ -46,11 +46,11 @@ export { getOccludedChildren, kickoutOccludedShapes } from './lib/tools/SelectTo
 export { ZoomTool } from './lib/tools/ZoomTool/ZoomTool'
 // UI
 export { useEditableText } from './lib/shapes/shared/useEditableText'
+export { tldrawConstants } from './lib/tldraw-constants'
 export { TldrawUi, type TldrawUiBaseProps, type TldrawUiProps } from './lib/ui/TldrawUi'
 export { setDefaultUiAssetUrls, type TLUiAssetUrlOverrides } from './lib/ui/assetUrls'
 export { OfflineIndicator } from './lib/ui/components/OfflineIndicator/OfflineIndicator'
 export { Spinner } from './lib/ui/components/Spinner'
-export { PORTRAIT_BREAKPOINT } from './lib/ui/constants'
 export {
 	TldrawUiContextProvider,
 	type TldrawUiContextProviderProps,
@@ -433,11 +433,3 @@ export {
 	TldrawUiMenuSubmenu,
 	type TLUiMenuSubmenuProps,
 } from './lib/ui/components/primitives/menus/TldrawUiMenuSubmenu'
-
-/* ----------------- Constants ---------------- */
-
-export {
-	FONT_FAMILIES,
-	LABEL_FONT_SIZES,
-	TEXT_PROPS,
-} from './lib/shapes/shared/default-shape-constants'

packages/tldraw/src/lib/defaultExternalContentHandlers.ts

@@ -19,12 +19,13 @@ import {
 	getHashForBuffer,
 	getHashForString,
 } from '@tldraw/editor'
-import { FONT_FAMILIES, FONT_SIZES, TEXT_PROPS } from './shapes/shared/default-shape-constants'
+import { tldrawConstants } from './tldraw-constants'
 import { TLUiToastsContextType } from './ui/context/toasts'
 import { useTranslation } from './ui/hooks/useTranslation/useTranslation'
 import { containBoxSize, downsizeImage, isGifAnimated } from './utils/assets/assets'
 import { getEmbedInfo } from './utils/embeds/embeds'
 import { cleanupText, isRightToLeftLanguage, truncateStringWithEllipsis } from './utils/text/text'
+const { FONT_FAMILIES, FONT_SIZES, TEXT_PROPS } = tldrawConstants
 
 /** @public */
 export type TLExternalContentProps = {

packages/tldraw/src/lib/shapes/arrow/ArrowShapeUtil.tsx

@@ -34,9 +34,9 @@ import {
 	useIsEditing,
 } from '@tldraw/editor'
 import React from 'react'
+import { tldrawConstants } from '../../tldraw-constants'
 import { ShapeFill, useDefaultColorTheme } from '../shared/ShapeFill'
 import { SvgTextLabel } from '../shared/SvgTextLabel'
-import { ARROW_LABEL_FONT_SIZES, STROKE_SIZES } from '../shared/default-shape-constants'
 import {
 	getFillDefForCanvas,
 	getFillDefForExport,
@@ -52,6 +52,7 @@ import {
 	getStraightArrowHandlePath,
 } from './arrowpaths'
 import { ArrowTextLabel } from './components/ArrowTextLabel'
+const { ARROW_LABEL_FONT_SIZES, STROKE_SIZES } = tldrawConstants
 
 let globalRenderIndex = 0
 

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

@@ -16,14 +16,15 @@ import {
 	intersectCirclePolygon,
 	intersectLineSegmentPolygon,
 } from '@tldraw/editor'
-import {
+import { tldrawConstants } from '../../tldraw-constants'
+const {
 	ARROW_LABEL_FONT_SIZES,
 	ARROW_LABEL_PADDING,
 	FONT_FAMILIES,
 	LABEL_TO_ARROW_PADDING,
 	STROKE_SIZES,
 	TEXT_PROPS,
-} from '../shared/default-shape-constants'
+} = tldrawConstants
 
 const labelSizeCache = new WeakMap<TLArrowShape, Vec>()
 

packages/tldraw/src/lib/shapes/arrow/components/ArrowTextLabel.tsx

@@ -1,8 +1,9 @@
 import { TLArrowShape, TLDefaultColorStyle, TLShapeId, VecLike } from '@tldraw/editor'
 import * as React from 'react'
+import { tldrawConstants } from '../../../tldraw-constants'
 import { useDefaultColorTheme } from '../../shared/ShapeFill'
 import { TextLabel } from '../../shared/TextLabel'
-import { ARROW_LABEL_FONT_SIZES, TEXT_PROPS } from '../../shared/default-shape-constants'
+const { ARROW_LABEL_FONT_SIZES, TEXT_PROPS } = tldrawConstants
 
 export const ArrowTextLabel = React.memo(function ArrowTextLabel({
 	id,

packages/tldraw/src/lib/shapes/draw/DrawShapeUtil.tsx

@@ -18,14 +18,15 @@ import {
 	rng,
 	toFixed,
 } from '@tldraw/editor'
+import { tldrawConstants } from '../../tldraw-constants'
 import { ShapeFill, useDefaultColorTheme } from '../shared/ShapeFill'
-import { STROKE_SIZES } from '../shared/default-shape-constants'
 import { getFillDefForCanvas, getFillDefForExport } from '../shared/defaultStyleDefs'
 import { getStrokePoints } from '../shared/freehand/getStrokePoints'
 import { getSvgPathFromStrokePoints } from '../shared/freehand/svg'
 import { svgInk } from '../shared/freehand/svgInk'
 import { useForceSolid } from '../shared/useForceSolid'
 import { getDrawShapeStrokeDashArray, getFreehandOptions, getPointsFromSegments } from './getPath'
+const { STROKE_SIZES } = tldrawConstants
 
 /** @public */
 export class DrawShapeUtil extends ShapeUtil<TLDrawShape> {

packages/tldraw/src/lib/shapes/draw/toolStates/Drawing.ts

@@ -1,5 +1,4 @@
 import {
-	DRAG_DISTANCE,
 	Mat,
 	StateNode,
 	TLDefaultSizeStyle,
@@ -18,7 +17,8 @@ import {
 	toFixed,
 	uniqueId,
 } from '@tldraw/editor'
-import { STROKE_SIZES } from '../../shared/default-shape-constants'
+import { tldrawConstants } from '../../../tldraw-constants'
+const { STROKE_SIZES, DRAG_DISTANCE } = tldrawConstants
 
 type DrawableShape = TLDrawShape | TLHighlightShape
 

packages/tldraw/src/lib/shapes/geo/GeoShapeUtil.tsx

@@ -27,17 +27,11 @@ import {
 	getPolygonVertices,
 } from '@tldraw/editor'
 
+import { tldrawConstants } from '../../tldraw-constants'
 import { HyperlinkButton } from '../shared/HyperlinkButton'
 import { useDefaultColorTheme } from '../shared/ShapeFill'
 import { SvgTextLabel } from '../shared/SvgTextLabel'
 import { TextLabel } from '../shared/TextLabel'
-import {
-	FONT_FAMILIES,
-	LABEL_FONT_SIZES,
-	LABEL_PADDING,
-	STROKE_SIZES,
-	TEXT_PROPS,
-} from '../shared/default-shape-constants'
 import {
 	getFillDefForCanvas,
 	getFillDefForExport,
@@ -50,7 +44,14 @@ import { GeoShapeBody } from './components/GeoShapeBody'
 import { getOvalIndicatorPath } from './components/SolidStyleOval'
 import { getLines } from './getLines'
 
-const MIN_SIZE_WITH_LABEL = 17 * 3
+const {
+	MIN_GEO_SIZE_WITH_LABEL,
+	FONT_FAMILIES,
+	LABEL_FONT_SIZES,
+	LABEL_PADDING,
+	STROKE_SIZES,
+	TEXT_PROPS,
+} = tldrawConstants
 
 /** @public */
 export class GeoShapeUtil extends BaseBoxShapeUtil<TLGeoShape> {
@@ -526,15 +527,15 @@ export class GeoShapeUtil extends BaseBoxShapeUtil<TLGeoShape> {
 		let overShrinkY = 0
 
 		if (shape.props.text.trim()) {
-			let newW = Math.max(Math.abs(w), MIN_SIZE_WITH_LABEL)
-			let newH = Math.max(Math.abs(h), MIN_SIZE_WITH_LABEL)
+			let newW = Math.max(Math.abs(w), MIN_GEO_SIZE_WITH_LABEL)
+			let newH = Math.max(Math.abs(h), MIN_GEO_SIZE_WITH_LABEL)
 
-			if (newW < MIN_SIZE_WITH_LABEL && newH === MIN_SIZE_WITH_LABEL) {
-				newW = MIN_SIZE_WITH_LABEL
+			if (newW < MIN_GEO_SIZE_WITH_LABEL && newH === MIN_GEO_SIZE_WITH_LABEL) {
+				newW = MIN_GEO_SIZE_WITH_LABEL
 			}
 
-			if (newW === MIN_SIZE_WITH_LABEL && newH < MIN_SIZE_WITH_LABEL) {
-				newH = MIN_SIZE_WITH_LABEL
+			if (newW === MIN_GEO_SIZE_WITH_LABEL && newH < MIN_GEO_SIZE_WITH_LABEL) {
+				newH = MIN_GEO_SIZE_WITH_LABEL
 			}
 
 			const labelSize = getLabelSize(this.editor, {
@@ -665,9 +666,9 @@ export class GeoShapeUtil extends BaseBoxShapeUtil<TLGeoShape> {
 			let h = Math.max(prevHeight, nextHeight)
 
 			// If both the width and height were less than the minimum size, make the shape square
-			if (prev.props.w < MIN_SIZE_WITH_LABEL && prev.props.h < MIN_SIZE_WITH_LABEL) {
-				w = Math.max(w, MIN_SIZE_WITH_LABEL)
-				h = Math.max(h, MIN_SIZE_WITH_LABEL)
+			if (prev.props.w < MIN_GEO_SIZE_WITH_LABEL && prev.props.h < MIN_GEO_SIZE_WITH_LABEL) {
+				w = Math.max(w, MIN_GEO_SIZE_WITH_LABEL)
+				h = Math.max(h, MIN_GEO_SIZE_WITH_LABEL)
 				w = Math.max(w, h)
 				h = Math.max(w, h)
 			}

packages/tldraw/src/lib/shapes/geo/components/GeoShapeBody.tsx

@@ -1,5 +1,5 @@
 import { Group2d, TLGeoShape, useEditor } from '@tldraw/editor'
-import { STROKE_SIZES } from '../../shared/default-shape-constants'
+import { tldrawConstants } from '../../../tldraw-constants'
 import { getLines } from '../getLines'
 import { DashStyleCloud } from './DashStyleCloud'
 import { DashStyleEllipse } from './DashStyleEllipse'
@@ -12,6 +12,8 @@ import { SolidStyleEllipse } from './SolidStyleEllipse'
 import { SolidStyleOval } from './SolidStyleOval'
 import { SolidStylePolygon } from './SolidStylePolygon'
 
+const { STROKE_SIZES } = tldrawConstants
+
 export function GeoShapeBody({ shape }: { shape: TLGeoShape }) {
 	const editor = useEditor()
 	const { id, props } = shape

packages/tldraw/src/lib/shapes/highlight/HighlightShapeUtil.tsx

@@ -13,9 +13,9 @@ import {
 	last,
 	rng,
 } from '@tldraw/editor'
+import { tldrawConstants } from '../../tldraw-constants'
 import { getHighlightFreehandSettings, getPointsFromSegments } from '../draw/getPath'
 import { useDefaultColorTheme } from '../shared/ShapeFill'
-import { FONT_SIZES } from '../shared/default-shape-constants'
 import { getStrokeOutlinePoints } from '../shared/freehand/getStrokeOutlinePoints'
 import { getStrokePoints } from '../shared/freehand/getStrokePoints'
 import { setStrokePointRadii } from '../shared/freehand/setStrokePointRadii'
@@ -23,6 +23,7 @@ import { getSvgPathFromStrokePoints } from '../shared/freehand/svg'
 import { useColorSpace } from '../shared/useColorSpace'
 import { useForceSolid } from '../shared/useForceSolid'
 
+const { FONT_SIZES } = tldrawConstants
 const OVERLAY_OPACITY = 0.35
 const UNDERLAY_OPACITY = 0.82
 

packages/tldraw/src/lib/shapes/line/LineShapeUtil.tsx

@@ -19,8 +19,8 @@ import {
 	sortByIndex,
 } from '@tldraw/editor'
 
+import { tldrawConstants } from '../../tldraw-constants'
 import { ShapeFill, useDefaultColorTheme } from '../shared/ShapeFill'
-import { STROKE_SIZES } from '../shared/default-shape-constants'
 import { getPerfectDashProps } from '../shared/getPerfectDashProps'
 import { getDrawLinePathData } from '../shared/polygon-helpers'
 import { getLineDrawPath, getLineIndicatorPath } from './components/getLinePath'
@@ -30,6 +30,8 @@ import {
 	getSvgPathForLineGeometry,
 } from './components/svg'
 
+const { STROKE_SIZES } = tldrawConstants
+
 const handlesCache = new WeakMapCache<TLLineShape['props'], TLHandle[]>()
 
 /** @public */

packages/tldraw/src/lib/shapes/note/NoteShapeUtil.tsx

@@ -27,16 +27,11 @@ import { HyperlinkButton } from '../shared/HyperlinkButton'
 import { useDefaultColorTheme } from '../shared/ShapeFill'
 import { SvgTextLabel } from '../shared/SvgTextLabel'
 import { TextLabel } from '../shared/TextLabel'
-import {
-	FONT_FAMILIES,
-	LABEL_FONT_SIZES,
-	LABEL_PADDING,
-	TEXT_PROPS,
-} from '../shared/default-shape-constants'
+
 import { getFontDefForExport } from '../shared/defaultStyleDefs'
 
+import { tldrawConstants } from '../../tldraw-constants'
 import { startEditingShapeWithLabel } from '../../tools/SelectTool/selectHelpers'
-import { ADJACENT_SHAPE_MARGIN } from '../../ui/constants'
 import { useForceSolid } from '../shared/useForceSolid'
 import {
 	CLONE_HANDLE_MARGIN,
@@ -45,6 +40,9 @@ import {
 	getNoteShapeForAdjacentPosition,
 } from './noteHelpers'
 
+const { ADJACENT_SHAPE_MARGIN, FONT_FAMILIES, LABEL_FONT_SIZES, LABEL_PADDING, TEXT_PROPS } =
+	tldrawConstants
+
 /** @public */
 export class NoteShapeUtil extends ShapeUtil<TLNoteShape> {
 	static override type = 'note' as const

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

@@ -1,5 +1,4 @@
 import {
-	HASH_PATTERN_ZOOM_NAMES,
 	TLDefaultColorStyle,
 	TLDefaultColorTheme,
 	TLDefaultFillStyle,
@@ -10,6 +9,8 @@ import {
 	useValue,
 } from '@tldraw/editor'
 import React from 'react'
+import { tldrawConstants } from '../../tldraw-constants'
+const { HASH_PATTERN_ZOOM_NAMES } = tldrawConstants
 
 export interface ShapeFillProps {
 	d: string

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

@@ -6,10 +6,11 @@ import {
 	TLDefaultVerticalAlignStyle,
 	useEditor,
 } from '@tldraw/editor'
+import { tldrawConstants } from '../../tldraw-constants'
 import { useDefaultColorTheme } from './ShapeFill'
 import { createTextJsxFromSpans } from './createTextJsxFromSpans'
-import { TEXT_PROPS } from './default-shape-constants'
 import { getLegacyOffsetX } from './legacyProps'
+const { TEXT_PROPS } = tldrawConstants
 
 export function SvgTextLabel({
 	fontSize,

packages/tldraw/src/lib/shapes/shared/default-shape-constants.ts

@@ -1,57 +0,0 @@
-import { TLDefaultFontStyle, TLDefaultSizeStyle } from '@tldraw/editor'
-
-/** @public */
-export const TEXT_PROPS = {
-	lineHeight: 1.35,
-	fontWeight: 'normal',
-	fontVariant: 'normal',
-	fontStyle: 'normal',
-	padding: '0px',
-}
-
-/** @public */
-export const STROKE_SIZES: Record<TLDefaultSizeStyle, number> = {
-	s: 2,
-	m: 3.5,
-	l: 5,
-	xl: 10,
-}
-
-/** @public */
-export const FONT_SIZES: Record<TLDefaultSizeStyle, number> = {
-	s: 18,
-	m: 24,
-	l: 36,
-	xl: 44,
-}
-
-/** @public */
-export const LABEL_FONT_SIZES: Record<TLDefaultSizeStyle, number> = {
-	s: 18,
-	m: 22,
-	l: 26,
-	xl: 32,
-}
-
-/** @public */
-export const ARROW_LABEL_FONT_SIZES: Record<TLDefaultSizeStyle, number> = {
-	s: 18,
-	m: 20,
-	l: 24,
-	xl: 28,
-}
-
-/** @public */
-export const FONT_FAMILIES: Record<TLDefaultFontStyle, string> = {
-	draw: 'var(--tl-font-draw)',
-	sans: 'var(--tl-font-sans)',
-	serif: 'var(--tl-font-serif)',
-	mono: 'var(--tl-font-mono)',
-}
-
-/** @internal */
-export const LABEL_TO_ARROW_PADDING = 20
-/** @internal */
-export const ARROW_LABEL_PADDING = 4.25
-/** @internal */
-export const LABEL_PADDING = 16

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

@@ -3,8 +3,6 @@ import {
 	DefaultFontFamilies,
 	DefaultFontStyle,
 	FileHelpers,
-	HASH_PATTERN_ZOOM_NAMES,
-	MAX_ZOOM,
 	SvgExportDef,
 	TLDefaultFillStyle,
 	TLDefaultFontStyle,
@@ -13,7 +11,9 @@ import {
 	useEditor,
 } from '@tldraw/editor'
 import { useEffect, useMemo, useRef, useState } from 'react'
+import { tldrawConstants } from '../../tldraw-constants'
 import { useDefaultColorTheme } from './ShapeFill'
+const { HASH_PATTERN_ZOOM_NAMES, MAX_ZOOM } = tldrawConstants
 
 /** @public */
 export function getFontDefForExport(fontStyle: TLDefaultFontStyle): SvgExportDef {

packages/tldraw/src/lib/shapes/shared/freehand/getStrokePoints.ts

@@ -1,9 +1,7 @@
 import { Vec, VecLike } from '@tldraw/editor'
+import { tldrawConstants } from '../../../tldraw-constants'
 import type { StrokeOptions, StrokePoint } from './types'
-
-const MIN_START_PRESSURE = 0.025
-const MIN_END_PRESSURE = 0.01
-
+const { MIN_START_PRESSURE = 0.15, MIN_END_PRESSURE = 0.15 } = tldrawConstants
 /**
  * ## getStrokePoints
  *

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

@@ -20,14 +20,16 @@ import {
 	useEditor,
 } from '@tldraw/editor'
 import { useCallback } from 'react'
+import { tldrawConstants } from '../../tldraw-constants'
 import { useDefaultColorTheme } from '../shared/ShapeFill'
 import { SvgTextLabel } from '../shared/SvgTextLabel'
 import { TextHelpers } from '../shared/TextHelpers'
 import { TextLabel } from '../shared/TextLabel'
-import { FONT_FAMILIES, FONT_SIZES, TEXT_PROPS } from '../shared/default-shape-constants'
 import { getFontDefForExport } from '../shared/defaultStyleDefs'
 import { resizeScaled } from '../shared/resizeScaled'
 
+const { FONT_FAMILIES, FONT_SIZES, TEXT_PROPS } = tldrawConstants
+
 const sizeCache = new WeakMapCache<TLTextShape['props'], { height: number; width: number }>()
 
 /** @public */

packages/tldraw/src/lib/styles.tsx

@@ -1,101 +0,0 @@
-export type StyleValuesForUi<T> = readonly {
-	readonly value: T
-	readonly icon: string
-}[]
-
-// todo: default styles prop?
-export const STYLES = {
-	color: [
-		{ value: 'black', icon: 'color' },
-		{ value: 'grey', icon: 'color' },
-		{ value: 'light-violet', icon: 'color' },
-		{ value: 'violet', icon: 'color' },
-		{ value: 'blue', icon: 'color' },
-		{ value: 'light-blue', icon: 'color' },
-		{ value: 'yellow', icon: 'color' },
-		{ value: 'orange', icon: 'color' },
-		{ value: 'green', icon: 'color' },
-		{ value: 'light-green', icon: 'color' },
-		{ value: 'light-red', icon: 'color' },
-		{ value: 'red', icon: 'color' },
-	],
-	fill: [
-		{ value: 'none', icon: 'fill-none' },
-		{ value: 'semi', icon: 'fill-semi' },
-		{ value: 'solid', icon: 'fill-solid' },
-		{ value: 'pattern', icon: 'fill-pattern' },
-	],
-	dash: [
-		{ value: 'draw', icon: 'dash-draw' },
-		{ value: 'dashed', icon: 'dash-dashed' },
-		{ value: 'dotted', icon: 'dash-dotted' },
-		{ value: 'solid', icon: 'dash-solid' },
-	],
-	size: [
-		{ value: 's', icon: 'size-small' },
-		{ value: 'm', icon: 'size-medium' },
-		{ value: 'l', icon: 'size-large' },
-		{ value: 'xl', icon: 'size-extra-large' },
-	],
-	font: [
-		{ value: 'draw', icon: 'font-draw' },
-		{ value: 'sans', icon: 'font-sans' },
-		{ value: 'serif', icon: 'font-serif' },
-		{ value: 'mono', icon: 'font-mono' },
-	],
-	horizontalAlign: [
-		{ value: 'start', icon: 'text-align-left' },
-		{ value: 'middle', icon: 'text-align-center' },
-		{ value: 'end', icon: 'text-align-right' },
-	],
-	verticalAlign: [
-		{ value: 'start', icon: 'vertical-align-start' },
-		{ value: 'middle', icon: 'vertical-align-center' },
-		{ value: 'end', icon: 'vertical-align-end' },
-	],
-	geo: [
-		{ value: 'rectangle', icon: 'geo-rectangle' },
-		{ value: 'ellipse', icon: 'geo-ellipse' },
-		{ value: 'cloud', icon: 'geo-cloud' },
-		{ value: 'triangle', icon: 'geo-triangle' },
-		{ value: 'diamond', icon: 'geo-diamond' },
-		{ value: 'pentagon', icon: 'geo-pentagon' },
-		{ value: 'hexagon', icon: 'geo-hexagon' },
-		{ value: 'octagon', icon: 'geo-octagon' },
-		{ value: 'star', icon: 'geo-star' },
-		{ value: 'rhombus', icon: 'geo-rhombus' },
-		{ value: 'rhombus-2', icon: 'geo-rhombus-2' },
-		{ value: 'oval', icon: 'geo-oval' },
-		{ value: 'trapezoid', icon: 'geo-trapezoid' },
-		{ value: 'arrow-right', icon: 'geo-arrow-right' },
-		{ value: 'arrow-left', icon: 'geo-arrow-left' },
-		{ value: 'arrow-up', icon: 'geo-arrow-up' },
-		{ value: 'arrow-down', icon: 'geo-arrow-down' },
-		{ value: 'x-box', icon: 'geo-x-box' },
-		{ value: 'check-box', icon: 'geo-check-box' },
-	],
-	arrowheadStart: [
-		{ value: 'none', icon: 'arrowhead-none' },
-		{ value: 'arrow', icon: 'arrowhead-arrow' },
-		{ value: 'triangle', icon: 'arrowhead-triangle' },
-		{ value: 'square', icon: 'arrowhead-square' },
-		{ value: 'dot', icon: 'arrowhead-dot' },
-		{ value: 'diamond', icon: 'arrowhead-diamond' },
-		{ value: 'inverted', icon: 'arrowhead-triangle-inverted' },
-		{ value: 'bar', icon: 'arrowhead-bar' },
-	],
-	arrowheadEnd: [
-		{ value: 'none', icon: 'arrowhead-none' },
-		{ value: 'arrow', icon: 'arrowhead-arrow' },
-		{ value: 'triangle', icon: 'arrowhead-triangle' },
-		{ value: 'square', icon: 'arrowhead-square' },
-		{ value: 'dot', icon: 'arrowhead-dot' },
-		{ value: 'diamond', icon: 'arrowhead-diamond' },
-		{ value: 'inverted', icon: 'arrowhead-triangle-inverted' },
-		{ value: 'bar', icon: 'arrowhead-bar' },
-	],
-	spline: [
-		{ value: 'line', icon: 'spline-line' },
-		{ value: 'cubic', icon: 'spline-cubic' },
-	],
-} as const satisfies Record<string, StyleValuesForUi<string>>

packages/tldraw/src/lib/tldraw-constants.ts

@@ -0,0 +1,160 @@
+import { TLDefaultSizeStyle, editorConstants } from '@tldraw/editor'
+import { StyleValuesForUi } from './tldraw-types'
+
+/**@public */
+export const tldrawConstants = {
+	...editorConstants,
+	ADJACENT_SHAPE_MARGIN: 20,
+	// Breakpoints for portrait, keep in sync with PORTRAIT_BREAKPOINT enum below!
+	PORTRAIT_BREAKPOINTS: [0, 390, 428, 468, 580, 640, 840, 1023],
+	// Mapping for PORTRAIT_BREAKPOINTS -- needs to be kept in sync!
+	PORTRAIT_BREAKPOINT: {
+		ZERO: 0,
+		MOBILE_XXS: 1,
+		MOBILE_XS: 2,
+		MOBILE_SM: 3,
+		MOBILE: 4,
+		TABLET_SM: 5,
+		TABLET: 6,
+		DESKTOP: 7,
+	},
+	TEXT_PROPS: {
+		lineHeight: 1.35,
+		fontWeight: 'normal',
+		fontVariant: 'normal',
+		fontStyle: 'normal',
+		padding: '0px',
+	},
+	STROKE_SIZES: {
+		s: 2,
+		m: 3.5,
+		l: 5,
+		xl: 10,
+	} as Record<TLDefaultSizeStyle, number>,
+	FONT_SIZES: {
+		s: 18,
+		m: 24,
+		l: 36,
+		xl: 44,
+	} as Record<TLDefaultSizeStyle, number>,
+	LABEL_FONT_SIZES: {
+		s: 18,
+		m: 22,
+		l: 26,
+		xl: 32,
+	} as Record<TLDefaultSizeStyle, number>,
+	ARROW_LABEL_FONT_SIZES: {
+		s: 18,
+		m: 20,
+		l: 24,
+		xl: 28,
+	} as Record<TLDefaultSizeStyle, number>,
+	FONT_FAMILIES: {
+		draw: 'var(--tl-font-draw)',
+		sans: 'var(--tl-font-sans)',
+		serif: 'var(--tl-font-serif)',
+		mono: 'var(--tl-font-mono)',
+	},
+	LABEL_TO_ARROW_PADDING: 20,
+	ARROW_LABEL_PADDING: 4.25,
+	LABEL_PADDING: 16,
+	MIN_GEO_SIZE_WITH_LABEL: 17 * 3,
+	STYLES: {
+		color: [
+			{ value: 'black', icon: 'color' },
+			{ value: 'grey', icon: 'color' },
+			{ value: 'light-violet', icon: 'color' },
+			{ value: 'violet', icon: 'color' },
+			{ value: 'blue', icon: 'color' },
+			{ value: 'light-blue', icon: 'color' },
+			{ value: 'yellow', icon: 'color' },
+			{ value: 'orange', icon: 'color' },
+			{ value: 'green', icon: 'color' },
+			{ value: 'light-green', icon: 'color' },
+			{ value: 'light-red', icon: 'color' },
+			{ value: 'red', icon: 'color' },
+		],
+		fill: [
+			{ value: 'none', icon: 'fill-none' },
+			{ value: 'semi', icon: 'fill-semi' },
+			{ value: 'solid', icon: 'fill-solid' },
+			{ value: 'pattern', icon: 'fill-pattern' },
+		],
+		dash: [
+			{ value: 'draw', icon: 'dash-draw' },
+			{ value: 'dashed', icon: 'dash-dashed' },
+			{ value: 'dotted', icon: 'dash-dotted' },
+			{ value: 'solid', icon: 'dash-solid' },
+		],
+		size: [
+			{ value: 's', icon: 'size-small' },
+			{ value: 'm', icon: 'size-medium' },
+			{ value: 'l', icon: 'size-large' },
+			{ value: 'xl', icon: 'size-extra-large' },
+		],
+		font: [
+			{ value: 'draw', icon: 'font-draw' },
+			{ value: 'sans', icon: 'font-sans' },
+			{ value: 'serif', icon: 'font-serif' },
+			{ value: 'mono', icon: 'font-mono' },
+		],
+		horizontalAlign: [
+			{ value: 'start', icon: 'text-align-left' },
+			{ value: 'middle', icon: 'text-align-center' },
+			{ value: 'end', icon: 'text-align-right' },
+		],
+		verticalAlign: [
+			{ value: 'start', icon: 'vertical-align-start' },
+			{ value: 'middle', icon: 'vertical-align-center' },
+			{ value: 'end', icon: 'vertical-align-end' },
+		],
+		geo: [
+			{ value: 'rectangle', icon: 'geo-rectangle' },
+			{ value: 'ellipse', icon: 'geo-ellipse' },
+			{ value: 'cloud', icon: 'geo-cloud' },
+			{ value: 'triangle', icon: 'geo-triangle' },
+			{ value: 'diamond', icon: 'geo-diamond' },
+			{ value: 'pentagon', icon: 'geo-pentagon' },
+			{ value: 'hexagon', icon: 'geo-hexagon' },
+			{ value: 'octagon', icon: 'geo-octagon' },
+			{ value: 'star', icon: 'geo-star' },
+			{ value: 'rhombus', icon: 'geo-rhombus' },
+			{ value: 'rhombus-2', icon: 'geo-rhombus-2' },
+			{ value: 'oval', icon: 'geo-oval' },
+			{ value: 'trapezoid', icon: 'geo-trapezoid' },
+			{ value: 'arrow-right', icon: 'geo-arrow-right' },
+			{ value: 'arrow-left', icon: 'geo-arrow-left' },
+			{ value: 'arrow-up', icon: 'geo-arrow-up' },
+			{ value: 'arrow-down', icon: 'geo-arrow-down' },
+			{ value: 'x-box', icon: 'geo-x-box' },
+			{ value: 'check-box', icon: 'geo-check-box' },
+		],
+		arrowheadStart: [
+			{ value: 'none', icon: 'arrowhead-none' },
+			{ value: 'arrow', icon: 'arrowhead-arrow' },
+			{ value: 'triangle', icon: 'arrowhead-triangle' },
+			{ value: 'square', icon: 'arrowhead-square' },
+			{ value: 'dot', icon: 'arrowhead-dot' },
+			{ value: 'diamond', icon: 'arrowhead-diamond' },
+			{ value: 'inverted', icon: 'arrowhead-triangle-inverted' },
+			{ value: 'bar', icon: 'arrowhead-bar' },
+		],
+		arrowheadEnd: [
+			{ value: 'none', icon: 'arrowhead-none' },
+			{ value: 'arrow', icon: 'arrowhead-arrow' },
+			{ value: 'triangle', icon: 'arrowhead-triangle' },
+			{ value: 'square', icon: 'arrowhead-square' },
+			{ value: 'dot', icon: 'arrowhead-dot' },
+			{ value: 'diamond', icon: 'arrowhead-diamond' },
+			{ value: 'inverted', icon: 'arrowhead-triangle-inverted' },
+			{ value: 'bar', icon: 'arrowhead-bar' },
+		],
+		spline: [
+			{ value: 'line', icon: 'spline-line' },
+			{ value: 'cubic', icon: 'spline-cubic' },
+		],
+	} as const satisfies Record<string, StyleValuesForUi<string>>,
+	MIN_START_PRESSURE: 0.025,
+	MIN_END_PRESSURE: 0.01,
+	MIN_CROP_SIZE: 8,
+}

packages/tldraw/src/lib/tldraw-types.tsx

@@ -0,0 +1,4 @@
+export type StyleValuesForUi<T> = readonly {
+	readonly value: T
+	readonly icon: string
+}[]

packages/tldraw/src/lib/tools/EraserTool/childStates/Erasing.ts

@@ -1,5 +1,4 @@
 import {
-	HIT_TEST_MARGIN,
 	StateNode,
 	TLEventHandlers,
 	TLFrameShape,
@@ -8,6 +7,8 @@ import {
 	TLShapeId,
 	pointInPolygon,
 } from '@tldraw/editor'
+import { tldrawConstants } from '../../../tldraw-constants'
+const { HIT_TEST_MARGIN } = tldrawConstants
 
 export class Erasing extends StateNode {
 	static override id = 'erasing'

packages/tldraw/src/lib/tools/EraserTool/childStates/Pointing.ts

@@ -1,5 +1,4 @@
 import {
-	HIT_TEST_MARGIN,
 	StateNode,
 	TLEventHandlers,
 	TLFrameShape,
@@ -7,6 +6,8 @@ import {
 	TLPointerEventInfo,
 	TLShapeId,
 } from '@tldraw/editor'
+import { tldrawConstants } from '../../../tldraw-constants'
+const { HIT_TEST_MARGIN } = tldrawConstants
 
 export class Pointing extends StateNode {
 	static override id = 'pointing'

packages/tldraw/src/lib/tools/HandTool/childStates/Dragging.ts

@@ -1,4 +1,6 @@
-import { CAMERA_SLIDE_FRICTION, StateNode, TLEventHandlers, Vec } from '@tldraw/editor'
+import { StateNode, TLEventHandlers, Vec } from '@tldraw/editor'
+import { tldrawConstants } from '../../../tldraw-constants'
+const { CAMERA_SLIDE_FRICTION } = tldrawConstants
 
 export class Dragging extends StateNode {
 	static override id = 'dragging'

packages/tldraw/src/lib/tools/SelectTool/childStates/Crop/crop-constants.ts

@@ -1,2 +0,0 @@
-/** @internal */
-export const MIN_CROP_SIZE = 8

packages/tldraw/src/lib/tools/SelectTool/childStates/Cropping.ts

@@ -11,9 +11,10 @@ import {
 	Vec,
 	structuredClone,
 } from '@tldraw/editor'
+import { tldrawConstants } from '../../../tldraw-constants'
 import { kickoutOccludedShapes } from '../selectHelpers'
-import { MIN_CROP_SIZE } from './Crop/crop-constants'
 import { CursorTypeMap } from './PointingResizeHandle'
+const { MIN_CROP_SIZE } = tldrawConstants
 
 type Snapshot = ReturnType<Cropping['createSnapshot']>
 

packages/tldraw/src/lib/tools/SelectTool/childStates/Idle.ts

@@ -1,7 +1,6 @@
 import {
 	Editor,
 	Group2d,
-	HIT_TEST_MARGIN,
 	StateNode,
 	TLArrowShape,
 	TLClickEventInfo,
@@ -16,11 +15,13 @@ import {
 	debugFlags,
 	pointInPolygon,
 } from '@tldraw/editor'
+import { tldrawConstants } from '../../../tldraw-constants'
 import { getHitShapeOnCanvasPointerDown } from '../../selection-logic/getHitShapeOnCanvasPointerDown'
 import { getShouldEnterCropMode } from '../../selection-logic/getShouldEnterCropModeOnPointerDown'
 import { selectOnCanvasPointerUp } from '../../selection-logic/selectOnCanvasPointerUp'
 import { updateHoveredId } from '../../selection-logic/updateHoveredId'
 import { kickoutOccludedShapes, startEditingShapeWithLabel } from '../selectHelpers'
+const { HIT_TEST_MARGIN } = tldrawConstants
 
 const SKIPPED_KEYS_FOR_AUTO_EDITING = [
 	'Delete',

packages/tldraw/src/lib/tools/SelectTool/childStates/PointingShape.ts

@@ -1,12 +1,9 @@
-import {
-	HIT_TEST_MARGIN,
-	StateNode,
-	TLEventHandlers,
-	TLPointerEventInfo,
-	TLShape,
-} from '@tldraw/editor'
+import { StateNode, TLEventHandlers, TLPointerEventInfo, TLShape } from '@tldraw/editor'
+import { tldrawConstants } from '../../../tldraw-constants'
 import { getTextLabels } from '../../../utils/shapes/shapes'
 
+const { HIT_TEST_MARGIN } = tldrawConstants
+
 export class PointingShape extends StateNode {
 	static override id = 'pointing_shape'
 

packages/tldraw/src/lib/tools/SelectTool/selectHelpers.ts

@@ -1,5 +1,4 @@
 import {
-	ANIMATION_MEDIUM_MS,
 	Editor,
 	Geometry2d,
 	Mat,
@@ -11,6 +10,8 @@ import {
 	polygonIntersectsPolyline,
 	polygonsIntersect,
 } from '@tldraw/editor'
+import { tldrawConstants } from '../../tldraw-constants'
+const { ANIMATION_MEDIUM_MS } = tldrawConstants
 
 /** @internal */
 export function kickoutOccludedShapes(editor: Editor, shapeIds: TLShapeId[]) {

packages/tldraw/src/lib/tools/selection-logic/getHitShapeOnCanvasPointerDown.ts

@@ -1,4 +1,6 @@
-import { Editor, HIT_TEST_MARGIN, TLShape } from '@tldraw/editor'
+import { Editor, TLShape } from '@tldraw/editor'
+import { tldrawConstants } from '../../tldraw-constants'
+const { HIT_TEST_MARGIN } = tldrawConstants
 
 export function getHitShapeOnCanvasPointerDown(
 	editor: Editor,

packages/tldraw/src/lib/tools/selection-logic/selectOnCanvasPointerUp.ts

@@ -1,4 +1,6 @@
-import { Editor, HIT_TEST_MARGIN, TLShape, isShapeId } from '@tldraw/editor'
+import { Editor, TLShape, isShapeId } from '@tldraw/editor'
+import { tldrawConstants } from '../../tldraw-constants'
+const { HIT_TEST_MARGIN } = tldrawConstants
 
 export function selectOnCanvasPointerUp(editor: Editor) {
 	const selectedShapeIds = editor.getSelectedShapeIds()

packages/tldraw/src/lib/tools/selection-logic/updateHoveredId.ts

@@ -1,4 +1,6 @@
-import { Editor, HIT_TEST_MARGIN, TLShape, throttle } from '@tldraw/editor'
+import { Editor, TLShape, throttle } from '@tldraw/editor'
+import { tldrawConstants } from '../../tldraw-constants'
+const { HIT_TEST_MARGIN } = tldrawConstants
 
 function _updateHoveredId(editor: Editor) {
 	// todo: consider replacing `get hoveredShapeId` with this; it would mean keeping hoveredShapeId in memory rather than in the store and possibly re-computing it more often than necessary

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

@@ -2,13 +2,13 @@ import { ToastProvider } from '@radix-ui/react-toast'
 import { Expand, useEditor, useValue } from '@tldraw/editor'
 import classNames from 'classnames'
 import React, { ReactNode } from 'react'
+import { tldrawConstants } from '../tldraw-constants'
 import { TLUiAssetUrlOverrides } from './assetUrls'
 import { Dialogs } from './components/Dialogs'
 import { FollowingIndicator } from './components/FollowingIndicator'
 import { ToastViewport, Toasts } from './components/Toasts'
 import { TldrawUiButton } from './components/primitives/Button/TldrawUiButton'
 import { TldrawUiButtonIcon } from './components/primitives/Button/TldrawUiButtonIcon'
-import { PORTRAIT_BREAKPOINT } from './constants'
 import {
 	TldrawUiContextProvider,
 	TldrawUiContextProviderProps,
@@ -22,6 +22,8 @@ import { useKeyboardShortcuts } from './hooks/useKeyboardShortcuts'
 import { useReadonly } from './hooks/useReadonly'
 import { useTranslation } from './hooks/useTranslation/useTranslation'
 
+const { PORTRAIT_BREAKPOINT } = tldrawConstants
+
 /**
  * Base props for the {@link tldraw#Tldraw} and {@link TldrawUi} components.
  *

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

@@ -1,6 +1,6 @@
 import { useEditor, useValue } from '@tldraw/editor'
 import { ReactNode, memo } from 'react'
-import { PORTRAIT_BREAKPOINT } from '../../constants'
+import { tldrawConstants } from '../../../tldraw-constants'
 import { useBreakpoint } from '../../context/breakpoints'
 import { useReadonly } from '../../hooks/useReadonly'
 import { useTranslation } from '../../hooks/useTranslation/useTranslation'
@@ -14,6 +14,8 @@ import {
 import { TldrawUiMenuContextProvider } from '../primitives/menus/TldrawUiMenuContext'
 import { DefaultActionsMenuContent } from './DefaultActionsMenuContent'
 
+const { PORTRAIT_BREAKPOINT } = tldrawConstants
+
 /** @public */
 export type TLUiActionsMenuProps = {
 	children?: ReactNode

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

@@ -1,5 +1,5 @@
 import { useEditor, useValue } from '@tldraw/editor'
-import { PORTRAIT_BREAKPOINT } from '../../constants'
+import { tldrawConstants } from '../../../tldraw-constants'
 import { useActions } from '../../context/actions'
 import { useBreakpoint } from '../../context/breakpoints'
 import {
@@ -11,6 +11,8 @@ import {
 } from '../../hooks/menu-hooks'
 import { TldrawUiMenuItem } from '../primitives/menus/TldrawUiMenuItem'
 
+const { PORTRAIT_BREAKPOINT } = tldrawConstants
+
 /** @public */
 export function DefaultActionsMenuContent() {
 	return (

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

@@ -1,5 +1,5 @@
 import { ReactNode, memo } from 'react'
-import { PORTRAIT_BREAKPOINT } from '../../constants'
+import { tldrawConstants } from '../../../tldraw-constants'
 import { useBreakpoint } from '../../context/breakpoints'
 import { useTranslation } from '../../hooks/useTranslation/useTranslation'
 import { TldrawUiButton } from '../primitives/Button/TldrawUiButton'
@@ -12,6 +12,8 @@ import {
 import { TldrawUiMenuContextProvider } from '../primitives/menus/TldrawUiMenuContext'
 import { DefaultHelpMenuContent } from './DefaultHelpMenuContent'
 
+const { PORTRAIT_BREAKPOINT } = tldrawConstants
+
 /** @public */
 export type TLUiHelpMenuProps = {
 	children?: ReactNode

packages/tldraw/src/lib/ui/components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialog.tsx

@@ -1,6 +1,6 @@
 import classNames from 'classnames'
 import { ReactNode, memo } from 'react'
-import { PORTRAIT_BREAKPOINT } from '../../constants'
+import { tldrawConstants } from '../../../tldraw-constants'
 import { useBreakpoint } from '../../context/breakpoints'
 import { TLUiDialogProps } from '../../context/dialogs'
 import { useTranslation } from '../../hooks/useTranslation/useTranslation'
@@ -13,6 +13,8 @@ import {
 import { TldrawUiMenuContextProvider } from '../primitives/menus/TldrawUiMenuContext'
 import { DefaultKeyboardShortcutsDialogContent } from './DefaultKeyboardShortcutsDialogContent'
 
+const { PORTRAIT_BREAKPOINT } = tldrawConstants
+
 /** @public */
 export type TLUiKeyboardShortcutsDialogProps = TLUiDialogProps & {
 	children?: ReactNode

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

@@ -1,8 +1,10 @@
 import { memo } from 'react'
-import { PORTRAIT_BREAKPOINT } from '../constants'
+import { tldrawConstants } from '../../tldraw-constants'
 import { useBreakpoint } from '../context/breakpoints'
 import { useTldrawUiComponents } from '../context/components'
 
+const { PORTRAIT_BREAKPOINT } = tldrawConstants
+
 export const MenuZone = memo(function MenuZone() {
 	const breakpoint = useBreakpoint()
 

packages/tldraw/src/lib/ui/components/Minimap/DefaultMinimap.tsx

@@ -1,5 +1,4 @@
 import {
-	ANIMATION_MEDIUM_MS,
 	Box,
 	TLPointerEventInfo,
 	Vec,
@@ -12,8 +11,11 @@ import {
 	useIsDarkMode,
 } from '@tldraw/editor'
 import * as React from 'react'
+import { tldrawConstants } from '../../../tldraw-constants'
 import { MinimapManager } from './MinimapManager'
 
+const { ANIMATION_MEDIUM_MS } = tldrawConstants
+
 /** @public */
 export function DefaultMinimap() {
 	const editor = useEditor()

packages/tldraw/src/lib/ui/components/NavigationPanel/DefaultNavigationPanel.tsx

@@ -1,5 +1,5 @@
 import { memo, useCallback } from 'react'
-import { PORTRAIT_BREAKPOINT } from '../../constants'
+import { tldrawConstants } from '../../../tldraw-constants'
 import { unwrapLabel, useActions } from '../../context/actions'
 import { useBreakpoint } from '../../context/breakpoints'
 import { useTldrawUiComponents } from '../../context/components'
@@ -8,7 +8,7 @@ import { useTranslation } from '../../hooks/useTranslation/useTranslation'
 import { kbdStr } from '../../kbd-utils'
 import { TldrawUiButton } from '../primitives/Button/TldrawUiButton'
 import { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'
-
+const { PORTRAIT_BREAKPOINT } = tldrawConstants
 /** @public */
 export const DefaultNavigationPanel = memo(function DefaultNavigationPanel() {
 	const actions = useActions()

packages/tldraw/src/lib/ui/components/PageMenu/DefaultPageMenu.tsx

@@ -1,5 +1,4 @@
 import {
-	MAX_PAGES,
 	PageRecordType,
 	TLPageId,
 	releasePointerCapture,
@@ -8,7 +7,7 @@ import {
 	useValue,
 } from '@tldraw/editor'
 import { memo, useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react'
-import { PORTRAIT_BREAKPOINT } from '../../constants'
+import { tldrawConstants } from '../../../tldraw-constants'
 import { useBreakpoint } from '../../context/breakpoints'
 import { useMenuIsOpen } from '../../hooks/useMenuIsOpen'
 import { useReadonly } from '../../hooks/useReadonly'
@@ -26,6 +25,8 @@ import { PageItemInput } from './PageItemInput'
 import { PageItemSubmenu } from './PageItemSubmenu'
 import { onMovePage } from './edit-pages-shared'
 
+const { MAX_PAGES, PORTRAIT_BREAKPOINT } = tldrawConstants
+
 /** @public */
 export const DefaultPageMenu = memo(function DefaultPageMenu() {
 	const editor = useEditor()

packages/tldraw/src/lib/ui/components/PageMenu/PageItemSubmenu.tsx

@@ -1,5 +1,6 @@
-import { MAX_PAGES, PageRecordType, TLPageId, track, useEditor } from '@tldraw/editor'
+import { PageRecordType, TLPageId, track, useEditor } from '@tldraw/editor'
 import { useCallback } from 'react'
+import { tldrawConstants } from '../../../tldraw-constants'
 import { useTranslation } from '../../hooks/useTranslation/useTranslation'
 import { TldrawUiButton } from '../primitives/Button/TldrawUiButton'
 import { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'
@@ -12,6 +13,9 @@ import { TldrawUiMenuContextProvider } from '../primitives/menus/TldrawUiMenuCon
 import { TldrawUiMenuGroup } from '../primitives/menus/TldrawUiMenuGroup'
 import { TldrawUiMenuItem } from '../primitives/menus/TldrawUiMenuItem'
 import { onMovePage } from './edit-pages-shared'
+
+const { MAX_PAGES } = tldrawConstants
+
 /** @public */
 export interface PageItemSubmenuProps {
 	index: number

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

@@ -21,7 +21,7 @@ import {
 	useValue,
 } from '@tldraw/editor'
 import React from 'react'
-import { STYLES } from '../../../styles'
+import { tldrawConstants } from '../../../tldraw-constants'
 import { kickoutOccludedShapes } from '../../../tools/SelectTool/selectHelpers'
 import { useUiEvents } from '../../context/events'
 import { useRelevantStyles } from '../../hooks/useRelevantStyles'
@@ -33,6 +33,8 @@ import { TldrawUiSlider } from '../primitives/TldrawUiSlider'
 import { DoubleDropdownPicker } from './DoubleDropdownPicker'
 import { DropdownPicker } from './DropdownPicker'
 
+const { STYLES } = tldrawConstants
+
 /** @public */
 export type TLUiStylePanelContentProps = {
 	styles: ReturnType<typeof useRelevantStyles>

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

@@ -1,6 +1,6 @@
 import { SharedStyle, StyleProp } from '@tldraw/editor'
 import * as React from 'react'
-import { StyleValuesForUi } from '../../../styles'
+import { StyleValuesForUi } from '../../../tldraw-types'
 import { TLUiTranslationKey } from '../../hooks/useTranslation/TLUiTranslationKey'
 import { useTranslation } from '../../hooks/useTranslation/useTranslation'
 import { TldrawUiButton } from '../primitives/Button/TldrawUiButton'

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

@@ -1,6 +1,6 @@
 import { SharedStyle, StyleProp, useEditor } from '@tldraw/editor'
 import * as React from 'react'
-import { StyleValuesForUi } from '../../../styles'
+import { StyleValuesForUi } from '../../../tldraw-types'
 import { TLUiTranslationKey } from '../../hooks/useTranslation/TLUiTranslationKey'
 import { useTranslation } from '../../hooks/useTranslation/useTranslation'
 import { TLUiIconType } from '../../icon-types'

packages/tldraw/src/lib/ui/components/Toolbar/DefaultToolbar.tsx

@@ -1,6 +1,6 @@
 import { useEditor, useValue } from '@tldraw/editor'
 import { ReactNode, memo } from 'react'
-import { PORTRAIT_BREAKPOINT } from '../../constants'
+import { tldrawConstants } from '../../../tldraw-constants'
 import { useBreakpoint } from '../../context/breakpoints'
 import { useTldrawUiComponents } from '../../context/components'
 import { useReadonly } from '../../hooks/useReadonly'
@@ -9,6 +9,8 @@ import { DefaultToolbarContent } from './DefaultToolbarContent'
 import { OverflowingToolbar } from './OverflowingToolbar'
 import { ToggleToolLockedButton } from './ToggleToolLockedButton'
 
+const { PORTRAIT_BREAKPOINT } = tldrawConstants
+
 /** @public */
 export interface DefaultToolbarProps {
 	children?: ReactNode

packages/tldraw/src/lib/ui/components/Toolbar/OverflowingToolbar.tsx

@@ -2,7 +2,7 @@ import { preventDefault, useEditor, useEvent, useSafeId } from '@tldraw/editor'
 import classNames from 'classnames'
 import hotkeys from 'hotkeys-js'
 import { createContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'
-import { PORTRAIT_BREAKPOINT } from '../../constants'
+import { tldrawConstants } from '../../../tldraw-constants'
 import { useBreakpoint } from '../../context/breakpoints'
 import { areShortcutsDisabled } from '../../hooks/useKeyboardShortcuts'
 import { TLUiToolItem } from '../../hooks/useTools'
@@ -16,6 +16,8 @@ import {
 } from '../primitives/TldrawUiDropdownMenu'
 import { TldrawUiMenuContextProvider } from '../primitives/menus/TldrawUiMenuContext'
 
+const { PORTRAIT_BREAKPOINT } = tldrawConstants
+
 export const IsInOverflowContext = createContext(false)
 
 export function OverflowingToolbar({ children }: { children: React.ReactNode }) {

packages/tldraw/src/lib/ui/components/Toolbar/ToggleToolLockedButton.tsx

@@ -1,11 +1,13 @@
 import { useEditor, useValue } from '@tldraw/editor'
 import classNames from 'classnames'
-import { PORTRAIT_BREAKPOINT } from '../../constants'
+import { tldrawConstants } from '../../../tldraw-constants'
 import { useBreakpoint } from '../../context/breakpoints'
 import { useTranslation } from '../../hooks/useTranslation/useTranslation'
 import { TldrawUiButton } from '../primitives/Button/TldrawUiButton'
 import { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'
 
+const { PORTRAIT_BREAKPOINT } = tldrawConstants
+
 interface ToggleToolLockedButtonProps {
 	activeToolId?: string
 }

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

@@ -1,7 +1,7 @@
 import * as _Dropdown from '@radix-ui/react-dropdown-menu'
-import { ANIMATION_MEDIUM_MS, useContainer, useEditor, useValue } from '@tldraw/editor'
+import { useContainer, useEditor, useValue } from '@tldraw/editor'
 import { ReactNode, forwardRef, memo, useCallback } from 'react'
-import { PORTRAIT_BREAKPOINT } from '../../constants'
+import { tldrawConstants } from '../../../tldraw-constants'
 import { useBreakpoint } from '../../context/breakpoints'
 import { useMenuIsOpen } from '../../hooks/useMenuIsOpen'
 import { useTranslation } from '../../hooks/useTranslation/useTranslation'
@@ -9,6 +9,8 @@ import { TldrawUiButton } from '../primitives/Button/TldrawUiButton'
 import { TldrawUiMenuContextProvider } from '../primitives/menus/TldrawUiMenuContext'
 import { DefaultZoomMenuContent } from './DefaultZoomMenuContent'
 
+const { PORTRAIT_BREAKPOINT, ANIMATION_MEDIUM_MS } = tldrawConstants
+
 /** @public */
 export type TLUiZoomMenuProps = {
 	children?: ReactNode

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

@@ -8,7 +8,7 @@ import {
 } from '@tldraw/editor'
 import classNames from 'classnames'
 import { memo, useMemo, useRef } from 'react'
-import { StyleValuesForUi } from '../../../styles'
+import { StyleValuesForUi } from '../../../tldraw-types'
 import { TLUiTranslationKey } from '../../hooks/useTranslation/TLUiTranslationKey'
 import { useTranslation } from '../../hooks/useTranslation/useTranslation'
 import { TldrawUiButton } from './Button/TldrawUiButton'

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

@@ -1,7 +1,9 @@
-import { PORTRAIT_BREAKPOINT } from '../../constants'
+import { tldrawConstants } from '../../../tldraw-constants'
 import { useBreakpoint } from '../../context/breakpoints'
 import { kbd } from '../../kbd-utils'
 
+const { PORTRAIT_BREAKPOINT } = tldrawConstants
+
 /** @public */
 export interface TLUiKbdProps {
 	children: string

packages/tldraw/src/lib/ui/constants.ts

@@ -1,17 +0,0 @@
-// Breakpoints for portrait, keep in sync with PORTRAIT_BREAKPOINT enum below!
-export const PORTRAIT_BREAKPOINTS = [0, 390, 428, 468, 580, 640, 840, 1023]
-
-// Mapping for above array -- needs to be kept in sync!
-/** @public */
-export enum PORTRAIT_BREAKPOINT {
-	ZERO = 0,
-	MOBILE_XXS = 1,
-	MOBILE_XS = 2,
-	MOBILE_SM = 3,
-	MOBILE = 4,
-	TABLET_SM = 5,
-	TABLET = 6,
-	DESKTOP = 7,
-}
-
-export const ADJACENT_SHAPE_MARGIN = 20

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

@@ -1,5 +1,4 @@
 import {
-	ANIMATION_MEDIUM_MS,
 	Box,
 	DefaultColorStyle,
 	Editor,
@@ -20,12 +19,12 @@ import {
 	useEditor,
 } from '@tldraw/editor'
 import * as React from 'react'
+import { tldrawConstants } from '../../tldraw-constants'
 import { kickoutOccludedShapes } from '../../tools/SelectTool/selectHelpers'
 import { getEmbedInfo } from '../../utils/embeds/embeds'
 import { fitFrameToContent, removeFrame } from '../../utils/frames/frames'
 import { EditLinkDialog } from '../components/EditLinkDialog'
 import { EmbedDialog } from '../components/EmbedDialog'
-import { ADJACENT_SHAPE_MARGIN } from '../constants'
 import { useMenuClipboardEvents } from '../hooks/useClipboardEvents'
 import { useCopyAs } from '../hooks/useCopyAs'
 import { useExportAs } from '../hooks/useExportAs'
@@ -38,6 +37,8 @@ import { useDialogs } from './dialogs'
 import { TLUiEventSource, useUiEvents } from './events'
 import { useToasts } from './toasts'
 
+const { ADJACENT_SHAPE_MARGIN, ANIMATION_MEDIUM_MS } = tldrawConstants
+
 /** @public */
 export interface TLUiActionItem<
 	TransationKey extends string = string,

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

@@ -1,6 +1,8 @@
 import { useEditor, useValue } from '@tldraw/editor'
 import React, { ReactNode, useContext } from 'react'
-import { PORTRAIT_BREAKPOINT, PORTRAIT_BREAKPOINTS } from '../constants'
+import { tldrawConstants } from '../../tldraw-constants'
+
+const { PORTRAIT_BREAKPOINT, PORTRAIT_BREAKPOINTS } = tldrawConstants
 
 const BreakpointContext = React.createContext(0)
 

packages/tldraw/src/lib/ui/overrides.ts

@@ -1,6 +1,6 @@
 import { Editor, objectMapEntries } from '@tldraw/editor'
 import { useMemo } from 'react'
-import { PORTRAIT_BREAKPOINT } from './constants'
+import { tldrawConstants } from '../tldraw-constants'
 import { ActionsProviderProps } from './context/actions'
 import { useBreakpoint } from './context/breakpoints'
 import { useDialogs } from './context/dialogs'
@@ -8,6 +8,8 @@ import { useToasts } from './context/toasts'
 import { TLUiToolsProviderProps } from './hooks/useTools'
 import { TLUiTranslationProviderProps, useTranslation } from './hooks/useTranslation/useTranslation'
 
+const { PORTRAIT_BREAKPOINT } = tldrawConstants
+
 /** @public */
 export function useDefaultHelpers() {
 	const { addToast, removeToast, clearToasts } = useToasts()

packages/tldraw/src/lib/utils/tldr/buildFromV1Document.ts

@@ -1,7 +1,6 @@
 import {
 	AssetRecordType,
 	Editor,
-	MAX_SHAPES_PER_PAGE,
 	PageRecordType,
 	TLArrowShape,
 	TLArrowShapeArrowheadStyle,
@@ -26,6 +25,9 @@ import {
 	clamp,
 	createShapeId,
 } from '@tldraw/editor'
+import { tldrawConstants } from '../../tldraw-constants'
+
+const { MAX_SHAPES_PER_PAGE } = tldrawConstants
 
 const TLDRAW_V1_VERSION = 15.5
 

packages/tldraw/src/test/TestEditor.ts

@@ -6,7 +6,6 @@ import {
 	IdOf,
 	Mat,
 	PageRecordType,
-	ROTATE_CORNER_TO_SELECTION_CORNER,
 	RequiredKeys,
 	RotateCorner,
 	SelectionHandle,
@@ -24,6 +23,7 @@ import {
 	VecLike,
 	createShapeId,
 	createTLStore,
+	editorConstants,
 	rotateSelectionHandle,
 } from '@tldraw/editor'
 import { defaultShapeTools } from '../lib/defaultShapeTools'
@@ -31,6 +31,8 @@ import { defaultShapeUtils } from '../lib/defaultShapeUtils'
 import { defaultTools } from '../lib/defaultTools'
 import { shapesFromJsx } from './test-jsx'
 
+const { ROTATE_CORNER_TO_SELECTION_CORNER } = editorConstants
+
 jest.useFakeTimers()
 
 Object.assign(navigator, {

packages/tldraw/src/test/commands/createPage.test.ts

@@ -1,6 +1,8 @@
-import { MAX_PAGES, PageRecordType } from '@tldraw/editor'
+import { editorConstants, PageRecordType } from '@tldraw/editor'
 import { TestEditor } from '../TestEditor'
 
+const { MAX_PAGES } = editorConstants
+
 let editor: TestEditor
 
 beforeEach(() => {

packages/tldraw/src/test/commands/duplicatePage.test.ts

@@ -1,6 +1,8 @@
-import { MAX_PAGES, createShapeId } from '@tldraw/editor'
+import { createShapeId, editorConstants } from '@tldraw/editor'
 import { TestEditor } from '../TestEditor'
 
+const { MAX_PAGES } = editorConstants
+
 let editor: TestEditor
 
 beforeEach(() => {

packages/tldraw/src/test/commands/getSvgString.test.ts

@@ -1,6 +1,8 @@
-import { DefaultDashStyle, SVG_PADDING, createShapeId } from '@tldraw/editor'
+import { DefaultDashStyle, createShapeId, editorConstants } from '@tldraw/editor'
 import { TestEditor } from '../TestEditor'
 
+const { SVG_PADDING } = editorConstants
+
 let editor: TestEditor
 
 const ids = {

packages/tldraw/src/test/commands/zoomIn.test.ts

@@ -1,6 +1,8 @@
-import { ZOOMS } from '@tldraw/editor'
+import { editorConstants } from '@tldraw/editor'
 import { TestEditor } from '../TestEditor'
 
+const { ZOOMS } = editorConstants
+
 let editor: TestEditor
 
 beforeEach(() => {

packages/tldraw/src/test/commands/zoomOut.test.ts

@@ -1,6 +1,8 @@
-import { ZOOMS } from '@tldraw/editor'
+import { editorConstants } from '@tldraw/editor'
 import { TestEditor } from '../TestEditor'
 
+const { ZOOMS } = editorConstants
+
 let editor: TestEditor
 
 beforeEach(() => {

packages/tldraw/src/test/cropping.test.ts

@@ -1,6 +1,7 @@
 import { createShapeId, TLImageShape } from '@tldraw/editor'
-import { MIN_CROP_SIZE } from '../lib/tools/SelectTool/childStates/Crop/crop-constants'
+import { tldrawConstants } from '../lib/tldraw-constants'
 import { TestEditor } from './TestEditor'
+const { MIN_CROP_SIZE } = tldrawConstants
 
 jest.useFakeTimers()