@tldraw/editor 3.15.0-next.f1dfcef63951 → 3.15.0

package/editor.css

@@ -167,7 +167,7 @@
 	--color-text: hsl(0, 0%, 0%);
 	--color-text-0: hsl(0, 0%, 11%);
 	--color-text-1: hsl(0, 0%, 18%);
-	--color-text-3: hsl(220, 2%, 65%);
+	--color-text-3: hsl(204, 4%, 45%);
 	--color-text-shadow: hsl(0, 0%, 100%);
 	--color-text-highlight: hsl(52, 100%, 50%);
 	--color-text-highlight-p3: color(display-p3 0.972 0.8205 0.05);
@@ -222,7 +222,7 @@
 	--color-text: hsl(210, 17%, 98%);
 	--color-text-0: hsl(0, 9%, 94%);
 	--color-text-1: hsl(0, 0%, 85%);
-	--color-text-3: hsl(210, 6%, 45%);
+	--color-text-3: hsl(204, 4%, 75%);
 	--color-text-shadow: hsl(210, 13%, 18%);
 	--color-text-highlight: hsl(52, 100%, 41%);
 	--color-text-highlight-p3: color(display-p3 0.8078 0.6225 0.0312);
@@ -968,14 +968,14 @@ input,
 	font-size: 14px;
 	font-weight: 500;
 	opacity: 0;
-	animation: fade-in 0.2s ease-in-out forwards;
+	animation: tl-fade-in 0.2s ease-in-out forwards;
 	animation-delay: 0.2s;
 	position: absolute;
 	inset: 0px;
 	z-index: var(--layer-canvas-blocker);
 }
 
-@keyframes fade-in {
+@keyframes tl-fade-in {
 	0% {
 		opacity: 0;
 	}
@@ -984,6 +984,19 @@ input,
 	}
 }
 
+.tl-spinner {
+	animation: tl-spin 1s linear infinite;
+}
+
+@keyframes tl-spin {
+	0% {
+		transform: rotate(0deg);
+	}
+	100% {
+		transform: rotate(360deg);
+	}
+}
+
 /* ---------------------- Brush --------------------- */
 
 .tl-brush {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tldraw/editor",
-  "description": "A tiny little drawing app (editor).",
-  "version": "3.15.0-next.f1dfcef63951",
+  "description": "tldraw infinite canvas SDK (editor).",
+  "version": "3.15.0",
   "author": {
     "name": "tldraw Inc.",
     "email": "hello@tldraw.com"
@@ -17,6 +17,7 @@
   },
   "keywords": [
     "tldraw",
+    "sdk",
     "drawing",
     "app",
     "development",
@@ -48,12 +49,12 @@
     "@tiptap/core": "^2.9.1",
     "@tiptap/pm": "^2.9.1",
     "@tiptap/react": "^2.9.1",
-    "@tldraw/state": "3.15.0-next.f1dfcef63951",
-    "@tldraw/state-react": "3.15.0-next.f1dfcef63951",
-    "@tldraw/store": "3.15.0-next.f1dfcef63951",
-    "@tldraw/tlschema": "3.15.0-next.f1dfcef63951",
-    "@tldraw/utils": "3.15.0-next.f1dfcef63951",
-    "@tldraw/validate": "3.15.0-next.f1dfcef63951",
+    "@tldraw/state": "3.15.0",
+    "@tldraw/state-react": "3.15.0",
+    "@tldraw/store": "3.15.0",
+    "@tldraw/tlschema": "3.15.0",
+    "@tldraw/utils": "3.15.0",
+    "@tldraw/validate": "3.15.0",
     "@types/core-js": "^2.5.8",
     "@use-gesture/react": "^10.3.1",
     "classnames": "^2.5.1",

package/src/index.ts

@@ -18,27 +18,6 @@ export * from '@tldraw/utils'
 // eslint-disable-next-line local/no-export-star
 export * from '@tldraw/validate'
 
-export {
-	ErrorScreen,
-	LoadingScreen,
-	TldrawEditor,
-	useOnMount,
-	type LoadingScreenProps,
-	type TLOnMountHandler,
-	type TldrawEditorBaseProps,
-	type TldrawEditorProps,
-	type TldrawEditorStoreProps,
-	type TldrawEditorWithStoreProps,
-	type TldrawEditorWithoutStoreProps,
-} from './lib/TldrawEditor'
-export {
-	ErrorBoundary,
-	OptionalErrorBoundary,
-	type TLErrorBoundaryProps,
-} from './lib/components/ErrorBoundary'
-export { HTMLContainer, type HTMLContainerProps } from './lib/components/HTMLContainer'
-export { MenuClickCapture } from './lib/components/MenuClickCapture'
-export { SVGContainer, type SVGContainerProps } from './lib/components/SVGContainer'
 export { DefaultBackground } from './lib/components/default-components/DefaultBackground'
 export { DefaultBrush, type TLBrushProps } from './lib/components/default-components/DefaultBrush'
 export {
@@ -94,6 +73,26 @@ export {
 } from './lib/components/default-components/DefaultSnapIndictor'
 export { DefaultSpinner } from './lib/components/default-components/DefaultSpinner'
 export { DefaultSvgDefs } from './lib/components/default-components/DefaultSvgDefs'
+export {
+	ErrorBoundary,
+	OptionalErrorBoundary,
+	type TLErrorBoundaryProps,
+} from './lib/components/ErrorBoundary'
+export { HTMLContainer, type HTMLContainerProps } from './lib/components/HTMLContainer'
+export { MenuClickCapture } from './lib/components/MenuClickCapture'
+export { SVGContainer, type SVGContainerProps } from './lib/components/SVGContainer'
+export {
+	createTLSchemaFromUtils,
+	createTLStore,
+	inlineBase64AssetStore,
+	type TLStoreBaseOptions,
+	type TLStoreEventInfo,
+	type TLStoreOptions,
+	type TLStoreSchemaOptions,
+} from './lib/config/createTLStore'
+export { createTLUser, useTldrawUser, type TLUser } from './lib/config/createTLUser'
+export { type TLAnyBindingUtilConstructor } from './lib/config/defaultBindings'
+export { coreShapes, type TLAnyShapeUtilConstructor } from './lib/config/defaultShapes'
 export {
 	getSnapshot,
 	loadSnapshot,
@@ -101,42 +100,23 @@ export {
 	type TLLoadSnapshotOptions,
 } from './lib/config/TLEditorSnapshot'
 export {
-	TAB_ID,
 	createSessionStateSnapshotSignal,
 	extractSessionStateFromLegacySnapshot,
 	loadSessionStateSnapshotIntoStore,
+	TAB_ID,
 	type TLLoadSessionStateSnapshotOptions,
 	type TLSessionStateSnapshot,
 } from './lib/config/TLSessionStateSnapshot'
 export {
-	USER_COLORS,
 	defaultUserPreferences,
 	getFreshUserPreferences,
 	getUserPreferences,
 	setUserPreferences,
+	USER_COLORS,
 	userTypeValidator,
 	type TLUserPreferences,
 } from './lib/config/TLUserPreferences'
-export {
-	createTLSchemaFromUtils,
-	createTLStore,
-	inlineBase64AssetStore,
-	type TLStoreBaseOptions,
-	type TLStoreEventInfo,
-	type TLStoreOptions,
-	type TLStoreSchemaOptions,
-} from './lib/config/createTLStore'
-export { createTLUser, useTldrawUser, type TLUser } from './lib/config/createTLUser'
-export { type TLAnyBindingUtilConstructor } from './lib/config/defaultBindings'
-export { coreShapes, type TLAnyShapeUtilConstructor } from './lib/config/defaultShapes'
 export { DEFAULT_ANIMATION_OPTIONS, DEFAULT_CAMERA_OPTIONS, SIDES } from './lib/constants'
-export {
-	Editor,
-	type TLEditorOptions,
-	type TLEditorRunOptions,
-	type TLRenderingShape,
-	type TLResizeShapeOptions,
-} from './lib/editor/Editor'
 export {
 	BindingUtil,
 	type BindingOnChangeOptions,
@@ -147,6 +127,13 @@ export {
 	type BindingOnShapeIsolateOptions,
 	type TLBindingUtilConstructor,
 } from './lib/editor/bindings/BindingUtil'
+export {
+	Editor,
+	type TLEditorOptions,
+	type TLEditorRunOptions,
+	type TLRenderingShape,
+	type TLResizeShapeOptions,
+} from './lib/editor/Editor'
 export { ClickManager, type TLClickState } from './lib/editor/managers/ClickManager/ClickManager'
 export { EdgeScrollManager } from './lib/editor/managers/EdgeScrollManager/EdgeScrollManager'
 export {
@@ -179,6 +166,7 @@ export {
 } from './lib/editor/managers/TextManager/TextManager'
 export { UserPreferencesManager } from './lib/editor/managers/UserPreferencesManager/UserPreferencesManager'
 export { BaseBoxShapeUtil, type TLBaseBoxShape } from './lib/editor/shapes/BaseBoxShapeUtil'
+export { GroupShapeUtil } from './lib/editor/shapes/group/GroupShapeUtil'
 export {
 	ShapeUtil,
 	type TLCropInfo,
@@ -195,7 +183,6 @@ export {
 	type TLShapeUtilCanvasSvgDef,
 	type TLShapeUtilConstructor,
 } from './lib/editor/shapes/ShapeUtil'
-export { GroupShapeUtil } from './lib/editor/shapes/group/GroupShapeUtil'
 export {
 	getPerfectDashProps,
 	type PerfectDashTerminal,
@@ -205,22 +192,16 @@ export { resizeScaled } from './lib/editor/shapes/shared/resizeScaled'
 export { BaseBoxShapeTool } from './lib/editor/tools/BaseBoxShapeTool/BaseBoxShapeTool'
 export { maybeSnapToGrid } from './lib/editor/tools/BaseBoxShapeTool/children/Pointing'
 export { StateNode, type TLStateNodeConstructor } from './lib/editor/tools/StateNode'
-export {
-	useDelaySvgExport,
-	useSvgExportContext,
-	type SvgExportContext,
-	type SvgExportDef,
-} from './lib/editor/types/SvgExportContext'
 export { type TLContent } from './lib/editor/types/clipboard-types'
 export { type TLEventMap, type TLEventMapHandler } from './lib/editor/types/emit-types'
 export {
 	EVENT_NAME_MAP,
 	type TLBaseEventInfo,
-	type TLCLickEventName,
 	type TLCancelEvent,
 	type TLCancelEventInfo,
 	type TLClickEvent,
 	type TLClickEventInfo,
+	type TLCLickEventName,
 	type TLCompleteEvent,
 	type TLCompleteEventInfo,
 	type TLEnterEventHandler,
@@ -289,6 +270,12 @@ export {
 	type TLResizeHandle,
 	type TLSelectionHandle,
 } from './lib/editor/types/selection-types'
+export {
+	useDelaySvgExport,
+	useSvgExportContext,
+	type SvgExportContext,
+	type SvgExportDef,
+} from './lib/editor/types/SvgExportContext'
 export { getSvgAsImage } from './lib/exports/getSvgAsImage'
 export { tlenv } from './lib/globals/environment'
 export { tlmenus } from './lib/globals/menus'
@@ -352,8 +339,6 @@ export {
 	type SelectionEdge,
 	type SelectionHandle,
 } from './lib/primitives/Box'
-export { Mat, type MatLike, type MatModel } from './lib/primitives/Mat'
-export { Vec, type VecLike } from './lib/primitives/Vec'
 export { EASINGS } from './lib/primitives/easings'
 export { Arc2d } from './lib/primitives/geometry/Arc2d'
 export { Circle2d } from './lib/primitives/geometry/Circle2d'
@@ -361,6 +346,7 @@ export { CubicBezier2d } from './lib/primitives/geometry/CubicBezier2d'
 export { CubicSpline2d } from './lib/primitives/geometry/CubicSpline2d'
 export { Edge2d } from './lib/primitives/geometry/Edge2d'
 export { Ellipse2d } from './lib/primitives/geometry/Ellipse2d'
+export { getVerticesCountForArcLength } from './lib/primitives/geometry/geometry-constants'
 export {
 	Geometry2d,
 	Geometry2dFilters,
@@ -388,11 +374,8 @@ export {
 	polygonIntersectsPolyline,
 	polygonsIntersect,
 } from './lib/primitives/intersect'
+export { Mat, type MatLike, type MatModel } from './lib/primitives/Mat'
 export {
-	HALF_PI,
-	PI,
-	PI2,
-	SIN,
 	angleDistance,
 	approximately,
 	areAnglesCompatible,
@@ -409,23 +392,36 @@ export {
 	getPointOnCircle,
 	getPointsOnArc,
 	getPolygonVertices,
+	HALF_PI,
 	isSafeFloat,
 	perimeterOfEllipse,
+	PI,
+	PI2,
 	pointInPolygon,
 	precise,
 	radiansToDegrees,
 	rangeIntersection,
 	shortAngleDist,
+	SIN,
 	snapAngle,
 	toDomPrecision,
 	toFixed,
 	toPrecision,
 } from './lib/primitives/utils'
+export { Vec, type VecLike } from './lib/primitives/Vec'
 export {
-	ReadonlySharedStyleMap,
-	SharedStyleMap,
-	type SharedStyle,
-} from './lib/utils/SharedStylesMap'
+	ErrorScreen,
+	LoadingScreen,
+	TldrawEditor,
+	useOnMount,
+	type LoadingScreenProps,
+	type TldrawEditorBaseProps,
+	type TldrawEditorProps,
+	type TldrawEditorStoreProps,
+	type TldrawEditorWithoutStoreProps,
+	type TldrawEditorWithStoreProps,
+	type TLOnMountHandler,
+} from './lib/TldrawEditor'
 export { dataUrlToFile, getDefaultCdnBaseUrl } from './lib/utils/assets'
 export { clampToBrowserMaxCanvasSize, type CanvasMaxSize } from './lib/utils/browserCanvasMaxSize'
 export {
@@ -461,9 +457,9 @@ export {
 	getFontsFromRichText,
 	type RichTextFontVisitor,
 	type RichTextFontVisitorState,
-	type TLTextOptions,
 	type TiptapEditor,
 	type TiptapNode,
+	type TLTextOptions,
 } from './lib/utils/richText'
 export {
 	applyRotationToSnapshotShapes,
@@ -471,9 +467,14 @@ export {
 	type TLRotationSnapshot,
 } from './lib/utils/rotation'
 export { runtime, setRuntimeOverrides } from './lib/utils/runtime'
+export {
+	ReadonlySharedStyleMap,
+	SharedStyleMap,
+	type SharedStyle,
+} from './lib/utils/SharedStylesMap'
+export { hardReset } from './lib/utils/sync/hardReset'
 export { LocalIndexedDb, Table, type StoreName } from './lib/utils/sync/LocalIndexedDb'
 export { type TLStoreWithStatus } from './lib/utils/sync/StoreWithStatus'
-export { hardReset } from './lib/utils/sync/hardReset'
 export { uniq } from './lib/utils/uniq'
 export { openWindow } from './lib/utils/window-open'
 

package/src/lib/components/SVGContainer.tsx

@@ -7,7 +7,7 @@ export type SVGContainerProps = React.ComponentProps<'svg'>
 /** @public @react */
 export function SVGContainer({ children, className = '', ...rest }: SVGContainerProps) {
 	return (
-		<svg {...rest} className={classNames('tl-svg-container', className)}>
+		<svg {...rest} className={classNames('tl-svg-container', className)} aria-hidden="true">
 			{children}
 		</svg>
 	)

package/src/lib/components/default-components/DefaultBrush.tsx

@@ -21,7 +21,7 @@ export const DefaultBrush = ({ brush, color, opacity, className }: TLBrushProps)
 	const h = toDomPrecision(Math.max(1, brush.h))
 
 	return (
-		<svg className="tl-overlays__item" ref={rSvg}>
+		<svg className="tl-overlays__item" ref={rSvg} aria-hidden="true">
 			{color ? (
 				<g className="tl-brush" opacity={opacity}>
 					<rect width={w} height={h} fill={color} opacity={0.75} />

package/src/lib/components/default-components/DefaultCanvas.tsx

@@ -139,7 +139,7 @@ export function DefaultCanvas({ className }: TLCanvasComponentProps) {
 				data-testid="canvas"
 				{...events}
 			>
-				<svg className="tl-svg-context">
+				<svg className="tl-svg-context" aria-hidden="true">
 					<defs>
 						{shapeSvgDefs}
 						<CursorDef />

package/src/lib/components/default-components/DefaultCollaboratorHint.tsx

@@ -39,7 +39,7 @@ export function DefaultCollaboratorHint({
 	const cursorHintId = useSharedSafeId('cursor_hint')
 
 	return (
-		<svg ref={rSvg} className={classNames('tl-overlays__item', className)}>
+		<svg ref={rSvg} className={classNames('tl-overlays__item', className)} aria-hidden="true">
 			<use
 				href={`#${cursorHintId}`}
 				color={color}

package/src/lib/components/default-components/DefaultCursor.tsx

@@ -33,7 +33,7 @@ export const DefaultCursor = memo(function DefaultCursor({
 
 	return (
 		<div ref={rCursor} className={classNames('tl-overlays__item', className)}>
-			<svg className="tl-cursor">
+			<svg className="tl-cursor" aria-hidden="true">
 				<use href={`#${cursorId}`} color={color} />
 			</svg>
 			{chatMessage ? (

package/src/lib/components/default-components/DefaultGrid.tsx

@@ -16,7 +16,7 @@ export function DefaultGrid({ x, y, z, size }: TLGridProps) {
 	const editor = useEditor()
 	const { gridSteps } = editor.options
 	return (
-		<svg className="tl-grid" version="1.1" xmlns="http://www.w3.org/2000/svg">
+		<svg className="tl-grid" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
 			<defs>
 				{gridSteps.map(({ min, mid, step }, i) => {
 					const s = step * size * z

package/src/lib/components/default-components/DefaultHandles.tsx

@@ -7,5 +7,9 @@ export interface TLHandlesProps {
 
 /** @public @react */
 export const DefaultHandles = ({ children }: TLHandlesProps) => {
-	return <svg className="tl-user-handles tl-overlays__item">{children}</svg>
+	return (
+		<svg className="tl-user-handles tl-overlays__item" aria-hidden="true">
+			{children}
+		</svg>
+	)
 }

package/src/lib/components/default-components/DefaultShapeIndicator.tsx

@@ -86,7 +86,7 @@ export const DefaultShapeIndicator = memo(function DefaultShapeIndicator({
 	}, [hidden])
 
 	return (
-		<svg ref={rIndicator} className={classNames('tl-overlays__item', className)}>
+		<svg ref={rIndicator} className={classNames('tl-overlays__item', className)} aria-hidden="true">
 			<g className="tl-shape-indicator" stroke={color ?? 'var(--color-selected)'} opacity={opacity}>
 				<InnerIndicator editor={editor} id={shapeId} />
 			</g>

package/src/lib/components/default-components/DefaultSnapIndictor.tsx

@@ -163,7 +163,7 @@ export interface TLSnapIndicatorProps {
 /** @public @react */
 export function DefaultSnapIndicator({ className, line, zoom }: TLSnapIndicatorProps) {
 	return (
-		<svg className={classNames('tl-overlays__item', className)}>
+		<svg className={classNames('tl-overlays__item', className)} aria-hidden="true">
 			{line.type === 'points' ? (
 				<PointsSnapIndicator {...line} zoom={zoom} />
 			) : line.type === 'gaps' ? (

package/src/lib/components/default-components/DefaultSpinner.tsx

@@ -1,19 +1,19 @@
+import classNames from 'classnames'
+
 /** @public @react */
-export function DefaultSpinner() {
+export function DefaultSpinner(props: React.SVGProps<SVGSVGElement>) {
 	return (
-		<svg width={16} height={16} viewBox="0 0 16 16" aria-hidden="false">
+		<svg
+			width={16}
+			height={16}
+			viewBox="0 0 16 16"
+			aria-hidden="false"
+			{...props}
+			className={classNames('tl-spinner', props.className)}
+		>
 			<g strokeWidth={2} fill="none" fillRule="evenodd">
 				<circle strokeOpacity={0.25} cx={8} cy={8} r={7} stroke="currentColor" />
-				<path strokeLinecap="round" d="M15 8c0-4.5-4.5-7-7-7" stroke="currentColor">
-					<animateTransform
-						attributeName="transform"
-						type="rotate"
-						from="0 8 8"
-						to="360 8 8"
-						dur="1s"
-						repeatCount="indefinite"
-					/>
-				</path>
+				<path strokeLinecap="round" d="M15 8c0-4.5-4.5-7-7-7" stroke="currentColor" />
 			</g>
 		</svg>
 	)

package/src/lib/config/TLUserPreferences.ts

@@ -17,6 +17,7 @@ export interface TLUserPreferences {
 	// N.B. These are duplicated in TLdrawAppUser.
 	locale?: string | null
 	animationSpeed?: number | null
+	areKeyboardShortcutsEnabled?: boolean | null
 	edgeScrollSpeed?: number | null
 	colorScheme?: 'light' | 'dark' | 'system'
 	isSnapMode?: boolean | null
@@ -44,6 +45,7 @@ export const userTypeValidator: T.Validator<TLUserPreferences> = T.object<TLUser
 	// N.B. These are duplicated in TLdrawAppUser.
 	locale: T.string.nullable().optional(),
 	animationSpeed: T.number.nullable().optional(),
+	areKeyboardShortcutsEnabled: T.boolean.nullable().optional(),
 	edgeScrollSpeed: T.number.nullable().optional(),
 	colorScheme: T.literalEnum('light', 'dark', 'system').optional(),
 	isSnapMode: T.boolean.nullable().optional(),
@@ -61,6 +63,7 @@ const Versions = {
 	AddDynamicSizeMode: 6,
 	AllowSystemColorScheme: 7,
 	AddPasteAtCursor: 8,
+	AddKeyboardShortcuts: 9,
 } as const
 
 const CURRENT_VERSION = Math.max(...Object.values(Versions))
@@ -96,6 +99,9 @@ function migrateSnapshot(data: { version: number; user: any }) {
 	if (data.version < Versions.AddPasteAtCursor) {
 		data.user.isPasteAtCursorMode = false
 	}
+	if (data.version < Versions.AddKeyboardShortcuts) {
+		data.user.areKeyboardShortcutsEnabled = true
+	}
 
 	// finally
 	data.version = CURRENT_VERSION
@@ -139,6 +145,7 @@ export const defaultUserPreferences = Object.freeze({
 	// N.B. These are duplicated in TLdrawAppUser.
 	edgeScrollSpeed: 1,
 	animationSpeed: userPrefersReducedMotion() ? 0 : 1,
+	areKeyboardShortcutsEnabled: true,
 	isSnapMode: false,
 	isWrapMode: false,
 	isDynamicSizeMode: false,