shapes folder, move tools into shape defs (#1574)

This diff adds a new property to `defineShape`: `tool`.

The tool prop allows shapes to bring a tool along with them as part of
their definition. E.g. the draw shape isn't much use without the draw
tool, so adding the draw shape to your app gives you the draw tool tool.

As part of this, i renamed the `shapeutils` folder to just `shapes`, and
moved a bunch of shape-specific tools from the tools folder into the
shapes folder. This more closely reflects how things will be once we
move our default shapes out of core for tldraw-zero.

### Change Type

- [x] `patch` — Bug fix

### Test Plan

Tested locally

### Release Notes

n/a

apps/examples/src/3-custom-config/CardShape.tsx

@@ -1,4 +1,10 @@
-import { BaseBoxShapeUtil, HTMLContainer, TLBaseShape, defineShape } from '@tldraw/tldraw'
+import {
+	BaseBoxShapeTool,
+	BaseBoxShapeUtil,
+	HTMLContainer,
+	TLBaseShape,
+	defineShape,
+} from '@tldraw/tldraw'
 
 export type CardShape = TLBaseShape<
 	'card',
@@ -51,6 +57,15 @@ export class CardShapeUtil extends BaseBoxShapeUtil<CardShape> {
 	}
 }
 
+// Extending the base box shape tool gives us a lot of functionality for free.
+export class CardShapeTool extends BaseBoxShapeTool {
+	static override id = 'card'
+	static override initial = 'idle'
+
+	override shapeType = 'card'
+}
+
 export const CardShape = defineShape('card', {
 	util: CardShapeUtil,
+	tool: CardShapeTool,
 })

apps/examples/src/3-custom-config/CardShapeTool.ts

@@ -1,9 +0,0 @@
-import { BaseBoxShapeTool } from '@tldraw/tldraw'
-
-// Extending the base box shape tool gives us a lot of functionality for free.
-export class CardShapeTool extends BaseBoxShapeTool {
-	static override id = 'card'
-	static override initial = 'idle'
-
-	override shapeType = 'card'
-}

apps/examples/src/3-custom-config/CustomConfigExample.tsx

@@ -2,17 +2,14 @@ import { TLUiMenuGroup, Tldraw, menuItem, toolbarItem } from '@tldraw/tldraw'
 import '@tldraw/tldraw/editor.css'
 import '@tldraw/tldraw/ui.css'
 import { CardShape } from './CardShape'
-import { CardShapeTool } from './CardShapeTool'
 
 const shapes = [CardShape]
-const tools = [CardShapeTool]
 
 export default function CustomConfigExample() {
 	return (
 		<div className="tldraw__editor">
 			<Tldraw
 				autoFocus
-				tools={tools}
 				shapes={shapes}
 				overrides={{
 					// In order for our custom tool to show up in the UI...

packages/editor/api-report.md

@@ -110,6 +110,9 @@ export const ANIMATION_SHORT_MS = 80;
 // @public (undocumented)
 export const ARROW_LABEL_FONT_SIZES: Record<TLSizeType, number>;
 
+// @public (undocumented)
+export const ArrowShape: TLShapeInfo<TLArrowShape>;
+
 // @public (undocumented)
 export class ArrowShapeUtil extends ShapeUtil<TLArrowShape> {
     // (undocumented)
@@ -203,6 +206,9 @@ export abstract class BaseBoxShapeUtil<Shape extends TLBaseBoxShape> extends Sha
 // @public (undocumented)
 export function blobAsString(blob: Blob): Promise<string>;
 
+// @public (undocumented)
+export const BookmarkShape: TLShapeInfo<TLBookmarkShape>;
+
 // @public (undocumented)
 export class BookmarkShapeUtil extends BaseBoxShapeUtil<TLBookmarkShape> {
     // (undocumented)
@@ -321,6 +327,9 @@ export function downloadDataURLAsFile(dataUrl: string, filename: string): void;
 // @internal (undocumented)
 export const DRAG_DISTANCE = 4;
 
+// @public (undocumented)
+export const DrawShape: TLShapeInfo<TLDrawShape>;
+
 // @public (undocumented)
 export class DrawShapeUtil extends ShapeUtil<TLDrawShape> {
     // (undocumented)
@@ -778,6 +787,9 @@ export class Editor extends EventEmitter<TLEventMap> {
     zoomToSelection(opts?: TLAnimationOptions): this;
 }
 
+// @public (undocumented)
+export const EmbedShape: TLShapeInfo<TLEmbedShape>;
+
 // @public (undocumented)
 export class EmbedShapeUtil extends BaseBoxShapeUtil<TLEmbedShape> {
     // (undocumented)
@@ -847,6 +859,9 @@ export const FONT_FAMILIES: Record<TLFontType, string>;
 // @public (undocumented)
 export const FONT_SIZES: Record<TLSizeType, number>;
 
+// @public (undocumented)
+export const FrameShape: TLShapeInfo<TLFrameShape>;
+
 // @public (undocumented)
 export class FrameShapeUtil extends BaseBoxShapeUtil<TLFrameShape> {
     // (undocumented)
@@ -879,6 +894,9 @@ export class FrameShapeUtil extends BaseBoxShapeUtil<TLFrameShape> {
     static type: "frame";
 }
 
+// @public (undocumented)
+export const GeoShape: TLShapeInfo<TLGeoShape>;
+
 // @public (undocumented)
 export class GeoShapeUtil extends BaseBoxShapeUtil<TLGeoShape> {
     // (undocumented)
@@ -1090,6 +1108,9 @@ export const GRID_STEPS: {
     step: number;
 }[];
 
+// @public (undocumented)
+export const GroupShape: TLShapeInfo<TLGroupShape>;
+
 // @public (undocumented)
 export class GroupShapeUtil extends ShapeUtil<TLGroupShape> {
     // (undocumented)
@@ -1132,6 +1153,9 @@ export function hardResetEditor(): void;
 // @internal (undocumented)
 export const HASH_PATERN_ZOOM_NAMES: Record<string, string>;
 
+// @public (undocumented)
+export const HighlightShape: TLShapeInfo<TLHighlightShape>;
+
 // @public (undocumented)
 export class HighlightShapeUtil extends ShapeUtil<TLHighlightShape> {
     // (undocumented)
@@ -1181,6 +1205,9 @@ export type HTMLContainerProps = React_3.HTMLAttributes<HTMLDivElement>;
 // @public (undocumented)
 export const ICON_SIZES: Record<TLSizeType, number>;
 
+// @public (undocumented)
+export const ImageShape: TLShapeInfo<TLImageShape>;
+
 // @public (undocumented)
 export class ImageShapeUtil extends BaseBoxShapeUtil<TLImageShape> {
     // (undocumented)
@@ -1233,6 +1260,9 @@ export const isValidHttpURL: (url: string) => boolean;
 // @public (undocumented)
 export const LABEL_FONT_SIZES: Record<TLSizeType, number>;
 
+// @public (undocumented)
+export const LineShape: TLShapeInfo<TLLineShape>;
+
 // @public (undocumented)
 export class LineShapeUtil extends ShapeUtil<TLLineShape> {
     // (undocumented)
@@ -1665,6 +1695,9 @@ export function normalizeWheel(event: React.WheelEvent<HTMLElement> | WheelEvent
     z: number;
 };
 
+// @public (undocumented)
+export const NoteShape: TLShapeInfo<TLNoteShape>;
+
 // @public (undocumented)
 export class NoteShapeUtil extends ShapeUtil<TLNoteShape> {
     // (undocumented)
@@ -2018,6 +2051,9 @@ export const TEXT_PROPS: {
     maxWidth: string;
 };
 
+// @public (undocumented)
+export const TextShape: TLShapeInfo<TLTextShape>;
+
 // @public (undocumented)
 export class TextShapeUtil extends ShapeUtil<TLTextShape> {
     // (undocumented)
@@ -2610,6 +2646,7 @@ export type TLShapeInfo<T extends TLUnknownShape = TLUnknownShape> = {
     util: TLShapeUtilConstructor<T>;
     props?: ShapeProps<T>;
     migrations?: Migrations;
+    tool?: TLStateNodeConstructor;
 };
 
 // @public (undocumented)
@@ -2750,6 +2787,9 @@ export function useReactor(name: string, reactFn: () => void, deps?: any[] | und
 // @public (undocumented)
 export function useTLStore(opts: TLStoreOptions): TLStore;
 
+// @public (undocumented)
+export const VideoShape: TLShapeInfo<TLVideoShape>;
+
 // @public (undocumented)
 export class VideoShapeUtil extends BaseBoxShapeUtil<TLVideoShape> {
     // (undocumented)

packages/editor/src/index.ts

@@ -90,21 +90,7 @@ export {
 	ExternalContentManager as PlopManager,
 	type TLExternalContent,
 } from './lib/editor/managers/ExternalContentManager'
-export { ArrowShapeUtil } from './lib/editor/shapeutils/ArrowShapeUtil/ArrowShapeUtil'
+export { BaseBoxShapeUtil, type TLBaseBoxShape } from './lib/editor/shapes/BaseBoxShapeUtil'
-export { BaseBoxShapeUtil, type TLBaseBoxShape } from './lib/editor/shapeutils/BaseBoxShapeUtil'
-export { BookmarkShapeUtil } from './lib/editor/shapeutils/BookmarkShapeUtil/BookmarkShapeUtil'
-export { DrawShapeUtil } from './lib/editor/shapeutils/DrawShapeUtil/DrawShapeUtil'
-export { EmbedShapeUtil } from './lib/editor/shapeutils/EmbedShapeUtil/EmbedShapeUtil'
-export { FrameShapeUtil } from './lib/editor/shapeutils/FrameShapeUtil/FrameShapeUtil'
-export { GeoShapeUtil } from './lib/editor/shapeutils/GeoShapeUtil/GeoShapeUtil'
-export { GroupShapeUtil } from './lib/editor/shapeutils/GroupShapeUtil/GroupShapeUtil'
-export { HighlightShapeUtil } from './lib/editor/shapeutils/HighlightShapeUtil/HighlightShapeUtil'
-export { ImageShapeUtil } from './lib/editor/shapeutils/ImageShapeUtil/ImageShapeUtil'
-export {
-	LineShapeUtil,
-	getSplineForLineShape,
-} from './lib/editor/shapeutils/LineShapeUtil/LineShapeUtil'
-export { NoteShapeUtil } from './lib/editor/shapeutils/NoteShapeUtil/NoteShapeUtil'
 export {
 	ShapeUtil,
 	type TLOnBeforeCreateHandler,
@@ -130,9 +116,33 @@ export {
 	type TLResizeMode,
 	type TLShapeUtilConstructor,
 	type TLShapeUtilFlag,
-} from './lib/editor/shapeutils/ShapeUtil'
+} from './lib/editor/shapes/ShapeUtil'
-export { INDENT, TextShapeUtil } from './lib/editor/shapeutils/TextShapeUtil/TextShapeUtil'
+export { ArrowShape } from './lib/editor/shapes/arrow/ArrowShape'
-export { VideoShapeUtil } from './lib/editor/shapeutils/VideoShapeUtil/VideoShapeUtil'
+export { ArrowShapeUtil } from './lib/editor/shapes/arrow/ArrowShapeUtil'
+export { BookmarkShape } from './lib/editor/shapes/bookmark/BookmarkShape'
+export { BookmarkShapeUtil } from './lib/editor/shapes/bookmark/BookmarkShapeUtil'
+export { DrawShape } from './lib/editor/shapes/draw/DrawShape'
+export { DrawShapeUtil } from './lib/editor/shapes/draw/DrawShapeUtil'
+export { EmbedShape } from './lib/editor/shapes/embed/EmbedShape'
+export { EmbedShapeUtil } from './lib/editor/shapes/embed/EmbedShapeUtil'
+export { FrameShape } from './lib/editor/shapes/frame/FrameShape'
+export { FrameShapeUtil } from './lib/editor/shapes/frame/FrameShapeUtil'
+export { GeoShape } from './lib/editor/shapes/geo/GeoShape'
+export { GeoShapeUtil } from './lib/editor/shapes/geo/GeoShapeUtil'
+export { GroupShape } from './lib/editor/shapes/group/GroupShape'
+export { GroupShapeUtil } from './lib/editor/shapes/group/GroupShapeUtil'
+export { HighlightShape } from './lib/editor/shapes/highlight/HighlightShape'
+export { HighlightShapeUtil } from './lib/editor/shapes/highlight/HighlightShapeUtil'
+export { ImageShape } from './lib/editor/shapes/image/ImageShape'
+export { ImageShapeUtil } from './lib/editor/shapes/image/ImageShapeUtil'
+export { LineShape } from './lib/editor/shapes/line/LineShape'
+export { LineShapeUtil, getSplineForLineShape } from './lib/editor/shapes/line/LineShapeUtil'
+export { NoteShape } from './lib/editor/shapes/note/NoteShape'
+export { NoteShapeUtil } from './lib/editor/shapes/note/NoteShapeUtil'
+export { TextShape } from './lib/editor/shapes/text/TextShape'
+export { INDENT, TextShapeUtil } from './lib/editor/shapes/text/TextShapeUtil'
+export { VideoShape } from './lib/editor/shapes/video/VideoShape'
+export { VideoShapeUtil } from './lib/editor/shapes/video/VideoShapeUtil'
 export { BaseBoxShapeTool } from './lib/editor/tools/BaseBoxShapeTool/BaseBoxShapeTool'
 export { StateNode, type TLStateNodeConstructor } from './lib/editor/tools/StateNode'
 export { type TLContent } from './lib/editor/types/clipboard-types'

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

@@ -7,7 +7,7 @@ import {
 	useStateTracking,
 } from 'signia-react'
 import { useEditor } from '../..'
-import { ShapeUtil } from '../editor/shapeutils/ShapeUtil'
+import { ShapeUtil } from '../editor/shapes/ShapeUtil'
 import { useEditorComponents } from '../hooks/useEditorComponents'
 import { useQuickReactor } from '../hooks/useQuickReactor'
 import { useShapeEvents } from '../hooks/useShapeEvents'

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

@@ -8,7 +8,7 @@ import {
 } from 'signia-react'
 import { useEditor } from '../..'
 import type { Editor } from '../editor/Editor'
-import { ShapeUtil } from '../editor/shapeutils/ShapeUtil'
+import { ShapeUtil } from '../editor/shapes/ShapeUtil'
 import { useEditorComponents } from '../hooks/useEditorComponents'
 import { OptionalErrorBoundary } from './ErrorBoundary'
 

packages/editor/src/lib/config/defaultShapes.ts

@@ -1,122 +1,42 @@
-import {
+import { ArrowShape } from '../editor/shapes/arrow/ArrowShape'
-	arrowShapeMigrations,
+import { BookmarkShape } from '../editor/shapes/bookmark/BookmarkShape'
-	arrowShapeProps,
+import { DrawShape } from '../editor/shapes/draw/DrawShape'
-	bookmarkShapeMigrations,
+import { EmbedShape } from '../editor/shapes/embed/EmbedShape'
-	bookmarkShapeProps,
+import { FrameShape } from '../editor/shapes/frame/FrameShape'
-	drawShapeMigrations,
+import { GeoShape } from '../editor/shapes/geo/GeoShape'
-	drawShapeProps,
+import { GroupShape } from '../editor/shapes/group/GroupShape'
-	embedShapeMigrations,
+import { HighlightShape } from '../editor/shapes/highlight/HighlightShape'
-	embedShapeProps,
+import { ImageShape } from '../editor/shapes/image/ImageShape'
-	frameShapeMigrations,
+import { LineShape } from '../editor/shapes/line/LineShape'
-	frameShapeProps,
+import { NoteShape } from '../editor/shapes/note/NoteShape'
-	geoShapeMigrations,
+import { TextShape } from '../editor/shapes/text/TextShape'
-	geoShapeProps,
+import { VideoShape } from '../editor/shapes/video/VideoShape'
-	groupShapeMigrations,
+import { AnyTLShapeInfo, TLShapeInfo } from './defineShape'
-	groupShapeProps,
-	highlightShapeMigrations,
-	highlightShapeProps,
-	imageShapeMigrations,
-	imageShapeProps,
-	lineShapeMigrations,
-	lineShapeProps,
-	noteShapeMigrations,
-	noteShapeProps,
-	textShapeMigrations,
-	textShapeProps,
-	videoShapeMigrations,
-	videoShapeProps,
-} from '@tldraw/tlschema'
-import { ArrowShapeUtil } from '../editor/shapeutils/ArrowShapeUtil/ArrowShapeUtil'
-import { BookmarkShapeUtil } from '../editor/shapeutils/BookmarkShapeUtil/BookmarkShapeUtil'
-import { DrawShapeUtil } from '../editor/shapeutils/DrawShapeUtil/DrawShapeUtil'
-import { EmbedShapeUtil } from '../editor/shapeutils/EmbedShapeUtil/EmbedShapeUtil'
-import { FrameShapeUtil } from '../editor/shapeutils/FrameShapeUtil/FrameShapeUtil'
-import { GeoShapeUtil } from '../editor/shapeutils/GeoShapeUtil/GeoShapeUtil'
-import { GroupShapeUtil } from '../editor/shapeutils/GroupShapeUtil/GroupShapeUtil'
-import { HighlightShapeUtil } from '../editor/shapeutils/HighlightShapeUtil/HighlightShapeUtil'
-import { ImageShapeUtil } from '../editor/shapeutils/ImageShapeUtil/ImageShapeUtil'
-import { LineShapeUtil } from '../editor/shapeutils/LineShapeUtil/LineShapeUtil'
-import { NoteShapeUtil } from '../editor/shapeutils/NoteShapeUtil/NoteShapeUtil'
-import { TextShapeUtil } from '../editor/shapeutils/TextShapeUtil/TextShapeUtil'
-import { VideoShapeUtil } from '../editor/shapeutils/VideoShapeUtil/VideoShapeUtil'
-import { AnyTLShapeInfo, TLShapeInfo, defineShape } from './defineShape'
 
 /** @public */
 export const coreShapes = [
 	// created by grouping interactions, probably the corest core shape that we have
-	defineShape('group', {
+	GroupShape,
-		util: GroupShapeUtil,
-		props: groupShapeProps,
-		migrations: groupShapeMigrations,
-	}),
 	// created by embed menu / url drop
-	defineShape('embed', {
+	EmbedShape,
-		util: EmbedShapeUtil,
-		props: embedShapeProps,
-		migrations: embedShapeMigrations,
-	}),
 	// created by copy and paste / url drop
-	defineShape('bookmark', {
+	BookmarkShape,
-		util: BookmarkShapeUtil,
-		props: bookmarkShapeProps,
-		migrations: bookmarkShapeMigrations,
-	}),
 	// created by copy and paste / file drop
-	defineShape('image', {
+	ImageShape,
-		util: ImageShapeUtil,
-		props: imageShapeProps,
-		migrations: imageShapeMigrations,
-	}),
 	// created by copy and paste
-	defineShape('text', {
+	TextShape,
-		util: TextShapeUtil,
-		props: textShapeProps,
-		migrations: textShapeMigrations,
-	}),
 ] as const
 
 /** @public */
 export const defaultShapes = [
-	defineShape('draw', {
+	DrawShape,
-		util: DrawShapeUtil,
+	GeoShape,
-		props: drawShapeProps,
+	LineShape,
-		migrations: drawShapeMigrations,
+	NoteShape,
-	}),
+	FrameShape,
-	defineShape('geo', {
+	ArrowShape,
-		util: GeoShapeUtil,
+	HighlightShape,
-		props: geoShapeProps,
+	VideoShape,
-		migrations: geoShapeMigrations,
-	}),
-	defineShape('line', {
-		util: LineShapeUtil,
-		props: lineShapeProps,
-		migrations: lineShapeMigrations,
-	}),
-	defineShape('note', {
-		util: NoteShapeUtil,
-		props: noteShapeProps,
-		migrations: noteShapeMigrations,
-	}),
-	defineShape('frame', {
-		util: FrameShapeUtil,
-		props: frameShapeProps,
-		migrations: frameShapeMigrations,
-	}),
-	defineShape('arrow', {
-		util: ArrowShapeUtil,
-		props: arrowShapeProps,
-		migrations: arrowShapeMigrations,
-	}),
-	defineShape('highlight', {
-		util: HighlightShapeUtil,
-		props: highlightShapeProps,
-		migrations: highlightShapeMigrations,
-	}),
-	defineShape('video', {
-		util: VideoShapeUtil,
-		props: videoShapeProps,
-		migrations: videoShapeMigrations,
-	}),
 ] as const
 
 const coreShapeTypes = new Set<string>(coreShapes.map((s) => s.type))

packages/editor/src/lib/config/defaultTools.ts

@@ -1,27 +1,7 @@
-import { ArrowShapeTool } from '../editor/tools/ArrowShapeTool/ArrowShapeTool'
-import { DrawShapeTool } from '../editor/tools/DrawShapeTool/DrawShapeTool'
 import { EraserTool } from '../editor/tools/EraserTool/EraserTool'
-import { FrameShapeTool } from '../editor/tools/FrameShapeTool/FrameShapeTool'
-import { GeoShapeTool } from '../editor/tools/GeoShapeTool/GeoShapeTool'
 import { HandTool } from '../editor/tools/HandTool/HandTool'
-import { HighlightShapeTool } from '../editor/tools/HighlightShapeTool/HighlightShapeTool'
 import { LaserTool } from '../editor/tools/LaserTool/LaserTool'
-import { LineShapeTool } from '../editor/tools/LineShapeTool/LineShapeTool'
-import { NoteShapeTool } from '../editor/tools/NoteShapeTool/NoteShapeTool'
 import { TLStateNodeConstructor } from '../editor/tools/StateNode'
-import { TextShapeTool } from '../editor/tools/TextShapeTool/TextShapeTool'
 
 /** @public */
-export const defaultTools: TLStateNodeConstructor[] = [
+export const defaultTools: TLStateNodeConstructor[] = [HandTool, EraserTool, LaserTool]
-	HandTool,
-	EraserTool,
-	LaserTool,
-	DrawShapeTool,
-	TextShapeTool,
-	LineShapeTool,
-	ArrowShapeTool,
-	GeoShapeTool,
-	NoteShapeTool,
-	FrameShapeTool,
-	HighlightShapeTool,
-]

packages/editor/src/lib/config/defineShape.ts

@@ -1,7 +1,8 @@
 import { Migrations } from '@tldraw/store'
 import { ShapeProps, TLBaseShape, TLUnknownShape } from '@tldraw/tlschema'
 import { assert } from '@tldraw/utils'
-import { TLShapeUtilConstructor } from '../editor/shapeutils/ShapeUtil'
+import { TLShapeUtilConstructor } from '../editor/shapes/ShapeUtil'
+import { TLStateNodeConstructor } from '../editor/tools/StateNode'
 
 /** @public */
 export type TLShapeInfo<T extends TLUnknownShape = TLUnknownShape> = {
@@ -9,6 +10,7 @@ export type TLShapeInfo<T extends TLUnknownShape = TLUnknownShape> = {
 	util: TLShapeUtilConstructor<T>
 	props?: ShapeProps<T>
 	migrations?: Migrations
+	tool?: TLStateNodeConstructor
 }
 
 export type AnyTLShapeInfo = TLShapeInfo<TLBaseShape<any, any>>

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

@@ -71,6 +71,7 @@ import {
 	dedupe,
 	deepCopy,
 	getOwnProperty,
+	hasOwnProperty,
 	partition,
 	sortById,
 	structuredClone,
@@ -123,18 +124,15 @@ import { SnapManager } from './managers/SnapManager'
 import { TextManager } from './managers/TextManager'
 import { TickManager } from './managers/TickManager'
 import { UserPreferencesManager } from './managers/UserPreferencesManager'
-import { ArrowShapeUtil } from './shapeutils/ArrowShapeUtil/ArrowShapeUtil'
+import { ShapeUtil, TLResizeMode } from './shapes/ShapeUtil'
-import { getCurvedArrowInfo } from './shapeutils/ArrowShapeUtil/arrow/curved-arrow'
+import { ArrowShapeUtil } from './shapes/arrow/ArrowShapeUtil'
-import {
+import { getCurvedArrowInfo } from './shapes/arrow/arrow/curved-arrow'
-	getArrowTerminalsInArrowSpace,
+import { getArrowTerminalsInArrowSpace, getIsArrowStraight } from './shapes/arrow/arrow/shared'
-	getIsArrowStraight,
+import { getStraightArrowInfo } from './shapes/arrow/arrow/straight-arrow'
-} from './shapeutils/ArrowShapeUtil/arrow/shared'
+import { FrameShapeUtil } from './shapes/frame/FrameShapeUtil'
-import { getStraightArrowInfo } from './shapeutils/ArrowShapeUtil/arrow/straight-arrow'
+import { GroupShapeUtil } from './shapes/group/GroupShapeUtil'
-import { FrameShapeUtil } from './shapeutils/FrameShapeUtil/FrameShapeUtil'
+import { TLExportColors } from './shapes/shared/TLExportColors'
-import { GroupShapeUtil } from './shapeutils/GroupShapeUtil/GroupShapeUtil'
+import { TextShapeUtil } from './shapes/text/TextShapeUtil'
-import { ShapeUtil, TLResizeMode } from './shapeutils/ShapeUtil'
-import { TextShapeUtil } from './shapeutils/TextShapeUtil/TextShapeUtil'
-import { TLExportColors } from './shapeutils/shared/TLExportColors'
 import { RootState } from './tools/RootState'
 import { StateNode, TLStateNodeConstructor } from './tools/StateNode'
 import { TLContent } from './types/clipboard-types'
@@ -223,13 +221,19 @@ export class Editor extends EventEmitter<TLEventMap> {
 		// Tools.
 		// Accept tools from constructor parameters which may not conflict with the root note's default or
 		// "baked in" tools, select and zoom.
-		const uniqueTools = Object.fromEntries(tools.map((Ctor) => [Ctor.id, Ctor]))
+		for (const { tool: Tool } of allShapes) {
-		for (const [id, Ctor] of Object.entries(uniqueTools)) {
+			if (Tool) {
-			if (this.root.children?.[id]) {
+				if (hasOwnProperty(this.root.children!, Tool.id)) {
-				throw Error(`Can't override tool with id "${id}"`)
+					throw Error(`Can't override tool with id "${Tool.id}"`)
 				}
-
+				this.root.children![Tool.id] = new Tool(this)
-			this.root.children![id] = new Ctor(this)
+			}
+		}
+		for (const Tool of tools) {
+			if (hasOwnProperty(this.root.children!, Tool.id)) {
+				throw Error(`Can't override tool with id "${Tool.id}"`)
+			}
+			this.root.children![Tool.id] = new Tool(this)
 		}
 
 		if (typeof window !== 'undefined' && 'navigator' in window) {

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

@@ -28,8 +28,8 @@ import {
 import { truncateStringWithEllipsis } from '../../utils/dom'
 import { getEmbedInfo } from '../../utils/embeds'
 import { Editor } from '../Editor'
-import { INDENT } from '../shapeutils/TextShapeUtil/TextHelpers'
+import { INDENT } from '../shapes/text/TextHelpers'
-import { TextShapeUtil } from '../shapeutils/TextShapeUtil/TextShapeUtil'
+import { TextShapeUtil } from '../shapes/text/TextShapeUtil'
 
 /** @public */
 export type TLExternalContent =

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

@@ -17,7 +17,7 @@ import { compact, dedupe, deepCopy } from '@tldraw/utils'
 import { atom, computed, EMPTY_ARRAY } from 'signia'
 import { uniqueId } from '../../utils/data'
 import type { Editor } from '../Editor'
-import { getSplineForLineShape, LineShapeUtil } from '../shapeutils/LineShapeUtil/LineShapeUtil'
+import { getSplineForLineShape, LineShapeUtil } from '../shapes/line/LineShapeUtil'
 
 export type PointsSnapLine = {
 	id: string

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

@@ -1,7 +1,7 @@
 import { Box2dModel, TLAlignType } from '@tldraw/tlschema'
 import { uniqueId } from '../../utils/data'
 import { Editor } from '../Editor'
-import { TextHelpers } from '../shapeutils/TextShapeUtil/TextHelpers'
+import { TextHelpers } from '../shapes/text/TextHelpers'
 
 const textAlignmentsForLtr = {
 	start: 'left',

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

@@ -0,0 +1,12 @@
+import { arrowShapeMigrations, arrowShapeProps } from '@tldraw/tlschema'
+import { defineShape } from '../../../config/defineShape'
+import { ArrowShapeTool } from './ArrowShapeTool'
+import { ArrowShapeUtil } from './ArrowShapeUtil'
+
+/** @public */
+export const ArrowShape = defineShape('arrow', {
+	util: ArrowShapeUtil,
+	props: arrowShapeProps,
+	migrations: arrowShapeMigrations,
+	tool: ArrowShapeTool,
+})

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

@@ -1,7 +1,7 @@
 import { TLStyleType } from '@tldraw/tlschema'
-import { StateNode } from '../StateNode'
+import { StateNode } from '../../tools/StateNode'
-import { Idle } from './children/Idle'
+import { Idle } from './toolStates/Idle'
-import { Pointing } from './children/Pointing'
+import { Pointing } from './toolStates/Pointing'
 
 export class ArrowShapeTool extends StateNode {
 	static override id = 'arrow'

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

@@ -3,8 +3,8 @@ import { TLArrowShape, TLShapeId } from '@tldraw/tlschema'
 import * as React from 'react'
 import { ARROW_LABEL_FONT_SIZES, TEXT_PROPS } from '../../../../constants'
 import { stopEventPropagation } from '../../../../utils/dom'
-import { TextHelpers } from '../../TextShapeUtil/TextHelpers'
 import { useEditableText } from '../../shared/useEditableText'
+import { TextHelpers } from '../../text/TextHelpers'
 
 export const ArrowTextLabel = React.memo(function ArrowTextLabel({
 	id,

packages/editor/src/lib/editor/shapes/arrow/toolStates/Idle.ts

@@ -1,5 +1,5 @@
+import { StateNode } from '../../../tools/StateNode'
 import { TLEventHandlers } from '../../../types/event-types'
-import { StateNode } from '../../StateNode'
 
 export class Idle extends StateNode {
 	static override id = 'idle'

packages/editor/src/lib/editor/shapes/arrow/toolStates/Pointing.ts

@@ -1,7 +1,7 @@
 import { createShapeId, TLArrowShape } from '@tldraw/tlschema'
-import { ArrowShapeUtil } from '../../../shapeutils/ArrowShapeUtil/ArrowShapeUtil'
+import { ArrowShapeUtil } from '../../../shapes/arrow/ArrowShapeUtil'
+import { StateNode } from '../../../tools/StateNode'
 import { TLEventHandlers } from '../../../types/event-types'
-import { StateNode } from '../../StateNode'
 import { ArrowShapeTool } from '../ArrowShapeTool'
 
 export class Pointing extends StateNode {

packages/editor/src/lib/editor/shapes/bookmark/BookmarkShape.ts

@@ -0,0 +1,10 @@
+import { bookmarkShapeMigrations, bookmarkShapeProps } from '@tldraw/tlschema'
+import { defineShape } from '../../../config/defineShape'
+import { BookmarkShapeUtil } from './BookmarkShapeUtil'
+
+/** @public */
+export const BookmarkShape = defineShape('bookmark', {
+	util: BookmarkShapeUtil,
+	props: bookmarkShapeProps,
+	migrations: bookmarkShapeMigrations,
+})

packages/editor/src/lib/editor/shapes/draw/DrawShape.ts

@@ -0,0 +1,12 @@
+import { drawShapeMigrations, drawShapeProps } from '@tldraw/tlschema'
+import { defineShape } from '../../../config/defineShape'
+import { DrawShapeTool } from './DrawShapeTool'
+import { DrawShapeUtil } from './DrawShapeUtil'
+
+/** @public */
+export const DrawShape = defineShape('draw', {
+	util: DrawShapeUtil,
+	props: drawShapeProps,
+	migrations: drawShapeMigrations,
+	tool: DrawShapeTool,
+})

packages/editor/src/lib/editor/shapes/draw/DrawShapeTool.ts

@@ -1,8 +1,8 @@
 import { TLStyleType } from '@tldraw/tlschema'
-import { StateNode } from '../StateNode'
 
-import { Drawing } from './children/Drawing'
+import { StateNode } from '../../tools/StateNode'
-import { Idle } from './children/Idle'
+import { Drawing } from './toolStates/Drawing'
+import { Idle } from './toolStates/Idle'
 
 export class DrawShapeTool extends StateNode {
 	static override id = 'draw'

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

@@ -10,11 +10,11 @@ import {
 import { last, structuredClone } from '@tldraw/utils'
 import { DRAG_DISTANCE } from '../../../../constants'
 import { uniqueId } from '../../../../utils/data'
-import { DrawShapeUtil } from '../../../shapeutils/DrawShapeUtil/DrawShapeUtil'
+import { DrawShapeUtil } from '../../../shapes/draw/DrawShapeUtil'
 import { TLEventHandlers, TLPointerEventInfo } from '../../../types/event-types'
 
-import { HighlightShapeUtil } from '../../../shapeutils/HighlightShapeUtil/HighlightShapeUtil'
+import { HighlightShapeUtil } from '../../../shapes/highlight/HighlightShapeUtil'
-import { StateNode } from '../../StateNode'
+import { StateNode } from '../../../tools/StateNode'
 
 type DrawableShape = TLDrawShape | TLHighlightShape
 

packages/editor/src/lib/editor/shapes/draw/toolStates/Idle.ts

@@ -1,5 +1,5 @@
+import { StateNode } from '../../../tools/StateNode'
 import { TLEventHandlers } from '../../../types/event-types'
-import { StateNode } from '../../StateNode'
 
 export class Idle extends StateNode {
 	static override id = 'idle'

packages/editor/src/lib/editor/shapes/embed/EmbedShape.ts

@@ -0,0 +1,10 @@
+import { embedShapeMigrations, embedShapeProps } from '@tldraw/tlschema'
+import { defineShape } from '../../../config/defineShape'
+import { EmbedShapeUtil } from './EmbedShapeUtil'
+
+/** @public */
+export const EmbedShape = defineShape('embed', {
+	util: EmbedShapeUtil,
+	props: embedShapeProps,
+	migrations: embedShapeMigrations,
+})

packages/editor/src/lib/editor/shapes/frame/FrameShape.ts

@@ -0,0 +1,12 @@
+import { frameShapeMigrations, frameShapeProps } from '@tldraw/tlschema'
+import { defineShape } from '../../../config/defineShape'
+import { FrameShapeTool } from './FrameShapeTool'
+import { FrameShapeUtil } from './FrameShapeUtil'
+
+/** @public */
+export const FrameShape = defineShape('frame', {
+	util: FrameShapeUtil,
+	props: frameShapeProps,
+	migrations: frameShapeMigrations,
+	tool: FrameShapeTool,
+})

packages/editor/src/lib/editor/shapes/frame/FrameShapeTool.ts

@@ -1,4 +1,4 @@
-import { BaseBoxShapeTool } from '../BaseBoxShapeTool/BaseBoxShapeTool'
+import { BaseBoxShapeTool } from '../../tools/BaseBoxShapeTool/BaseBoxShapeTool'
 
 export class FrameShapeTool extends BaseBoxShapeTool {
 	static override id = 'frame'

packages/editor/src/lib/editor/shapes/geo/GeoShape.ts

@@ -0,0 +1,12 @@
+import { geoShapeMigrations, geoShapeProps } from '@tldraw/tlschema'
+import { defineShape } from '../../../config/defineShape'
+import { GeoShapeTool } from './GeoShapeTool'
+import { GeoShapeUtil } from './GeoShapeUtil'
+
+/** @public */
+export const GeoShape = defineShape('geo', {
+	util: GeoShapeUtil,
+	props: geoShapeProps,
+	migrations: geoShapeMigrations,
+	tool: GeoShapeTool,
+})

packages/editor/src/lib/editor/shapes/geo/GeoShapeTool.ts

@@ -1,8 +1,7 @@
-import { StateNode } from '../StateNode'
-
 import { TLStyleType } from '@tldraw/tlschema'
-import { Idle } from './children/Idle'
+import { StateNode } from '../../tools/StateNode'
-import { Pointing } from './children/Pointing'
+import { Idle } from './toolStates/Idle'
+import { Pointing } from './toolStates/Pointing'
 
 export class GeoShapeTool extends StateNode {
 	static override id = 'geo'

packages/editor/src/lib/editor/shapes/geo/toolStates/Idle.ts

@@ -1,5 +1,5 @@
+import { StateNode } from '../../../tools/StateNode'
 import { TLEventHandlers } from '../../../types/event-types'
-import { StateNode } from '../../StateNode'
 
 export class Idle extends StateNode {
 	static override id = 'idle'

packages/editor/src/lib/editor/shapes/geo/toolStates/Pointing.ts

@@ -1,7 +1,7 @@
 import { Box2d, getStarBounds } from '@tldraw/primitives'
 import { TLGeoShape, createShapeId } from '@tldraw/tlschema'
+import { StateNode } from '../../../tools/StateNode'
 import { TLEventHandlers } from '../../../types/event-types'
-import { StateNode } from '../../StateNode'
 
 export class Pointing extends StateNode {
 	static override id = 'pointing'

packages/editor/src/lib/editor/shapes/group/GroupShape.tsx

@@ -0,0 +1,10 @@
+import { groupShapeMigrations, groupShapeProps } from '@tldraw/tlschema'
+import { defineShape } from '../../../config/defineShape'
+import { GroupShapeUtil } from './GroupShapeUtil'
+
+/** @public */
+export const GroupShape = defineShape('group', {
+	util: GroupShapeUtil,
+	props: groupShapeProps,
+	migrations: groupShapeMigrations,
+})

packages/editor/src/lib/editor/shapes/highlight/HighlightShape.ts

@@ -0,0 +1,12 @@
+import { highlightShapeMigrations, highlightShapeProps } from '@tldraw/tlschema'
+import { defineShape } from '../../../config/defineShape'
+import { HighlightShapeTool } from './HighlightShapeTool'
+import { HighlightShapeUtil } from './HighlightShapeUtil'
+
+/** @public */
+export const HighlightShape = defineShape('highlight', {
+	util: HighlightShapeUtil,
+	props: highlightShapeProps,
+	migrations: highlightShapeMigrations,
+	tool: HighlightShapeTool,
+})

packages/editor/src/lib/editor/shapes/highlight/HighlightShapeTool.ts

@@ -1,9 +1,9 @@
 import { TLStyleType } from '@tldraw/tlschema'
-import { StateNode } from '../StateNode'
 
 // shared custody
-import { Drawing } from '../DrawShapeTool/children/Drawing'
+import { StateNode } from '../../tools/StateNode'
-import { Idle } from '../DrawShapeTool/children/Idle'
+import { Drawing } from '../draw/toolStates/Drawing'
+import { Idle } from '../draw/toolStates/Idle'
 
 export class HighlightShapeTool extends StateNode {
 	static override id = 'highlight'

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

@@ -5,7 +5,7 @@ import { last, rng } from '@tldraw/utils'
 import { SVGContainer } from '../../../components/SVGContainer'
 import { FONT_SIZES } from '../../../constants'
 import { getSvgPathFromStrokePoints } from '../../../utils/svg'
-import { getHighlightFreehandSettings, getPointsFromSegments } from '../DrawShapeUtil/getPath'
+import { getHighlightFreehandSettings, getPointsFromSegments } from '../draw/getPath'
 import { ShapeUtil, TLOnResizeHandler } from '../ShapeUtil'
 import { TLExportColors } from '../shared/TLExportColors'
 import { useForceSolid } from '../shared/useForceSolid'

packages/editor/src/lib/editor/shapes/image/ImageShape.ts

@@ -0,0 +1,10 @@
+import { imageShapeMigrations, imageShapeProps } from '@tldraw/tlschema'
+import { defineShape } from '../../../config/defineShape'
+import { ImageShapeUtil } from './ImageShapeUtil'
+
+/** @public */
+export const ImageShape = defineShape('image', {
+	util: ImageShapeUtil,
+	props: imageShapeProps,
+	migrations: imageShapeMigrations,
+})

packages/editor/src/lib/editor/shapes/line/LineShape.ts

@@ -0,0 +1,12 @@
+import { lineShapeMigrations, lineShapeProps } from '@tldraw/tlschema'
+import { defineShape } from '../../../config/defineShape'
+import { LineShapeTool } from './LineShapeTool'
+import { LineShapeUtil } from './LineShapeUtil'
+
+/** @public */
+export const LineShape = defineShape('line', {
+	util: LineShapeUtil,
+	props: lineShapeProps,
+	migrations: lineShapeMigrations,
+	tool: LineShapeTool,
+})

packages/editor/src/lib/editor/shapes/line/LineShapeTool.test.ts

@@ -1,6 +1,6 @@
 import { assert } from '@tldraw/utils'
 import { TestEditor } from '../../../test/TestEditor'
-import { LineShapeUtil } from '../../shapeutils/LineShapeUtil/LineShapeUtil'
+import { LineShapeUtil } from '../../shapes/line/LineShapeUtil'
 
 let editor: TestEditor
 

packages/editor/src/lib/editor/shapes/line/LineShapeTool.ts

@@ -1,8 +1,7 @@
 import { TLStyleType } from '@tldraw/tlschema'
-import { StateNode } from '../StateNode'
+import { StateNode } from '../../tools/StateNode'
-
+import { Idle } from './toolStates/Idle'
-import { Idle } from './children/Idle'
+import { Pointing } from './toolStates/Pointing'
-import { Pointing } from './children/Pointing'
 
 export class LineShapeTool extends StateNode {
 	static override id = 'line'

packages/editor/src/lib/editor/shapes/line/toolStates/Idle.ts

@@ -1,6 +1,6 @@
 import { TLShapeId } from '@tldraw/tlschema'
+import { StateNode } from '../../../tools/StateNode'
 import { TLEventHandlers } from '../../../types/event-types'
-import { StateNode } from '../../StateNode'
 
 export class Idle extends StateNode {
 	static override id = 'idle'

packages/editor/src/lib/editor/shapes/line/toolStates/Pointing.ts

@@ -2,8 +2,8 @@ import { getIndexAbove, sortByIndex } from '@tldraw/indices'
 import { Matrix2d, Vec2d } from '@tldraw/primitives'
 import { TLHandle, TLLineShape, TLShapeId, createShapeId } from '@tldraw/tlschema'
 import { last, structuredClone } from '@tldraw/utils'
+import { StateNode } from '../../../tools/StateNode'
 import { TLEventHandlers, TLInterruptEvent } from '../../../types/event-types'
-import { StateNode } from '../../StateNode'
 import { LineShapeTool } from '../LineShapeTool'
 
 export class Pointing extends StateNode {

packages/editor/src/lib/editor/shapes/note/NoteShape.ts

@@ -0,0 +1,12 @@
+import { noteShapeMigrations, noteShapeProps } from '@tldraw/tlschema'
+import { defineShape } from '../../../config/defineShape'
+import { NoteShapeTool } from './NoteShapeTool'
+import { NoteShapeUtil } from './NoteShapeUtil'
+
+/** @public */
+export const NoteShape = defineShape('note', {
+	util: NoteShapeUtil,
+	props: noteShapeProps,
+	migrations: noteShapeMigrations,
+	tool: NoteShapeTool,
+})

packages/editor/src/lib/editor/shapes/note/NoteShapeTool.ts

@@ -1,7 +1,7 @@
 import { TLStyleType } from '@tldraw/tlschema'
-import { StateNode } from '../StateNode'
+import { StateNode } from '../../tools/StateNode'
-import { Idle } from './children/Idle'
+import { Idle } from './toolStates/Idle'
-import { Pointing } from './children/Pointing'
+import { Pointing } from './toolStates/Pointing'
 
 export class NoteShapeTool extends StateNode {
 	static override id = 'note'

packages/editor/src/lib/editor/shapes/note/toolStates/Idle.ts

@@ -1,5 +1,5 @@
+import { StateNode } from '../../../tools/StateNode'
 import { TLEventHandlers } from '../../../types/event-types'
-import { StateNode } from '../../StateNode'
 
 export class Idle extends StateNode {
 	static override id = 'idle'

packages/editor/src/lib/editor/shapes/note/toolStates/Pointing.ts

@@ -1,7 +1,7 @@
 import { TLNoteShape, createShapeId } from '@tldraw/tlschema'
-import { NoteShapeUtil } from '../../../shapeutils/NoteShapeUtil/NoteShapeUtil'
+import { NoteShapeUtil } from '../../../shapes/note/NoteShapeUtil'
+import { StateNode } from '../../../tools/StateNode'
 import { TLEventHandlers, TLInterruptEvent, TLPointerEventInfo } from '../../../types/event-types'
-import { StateNode } from '../../StateNode'
 
 export class Pointing extends StateNode {
 	static override id = 'pointing'

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

@@ -10,7 +10,7 @@ import React from 'react'
 import { LABEL_FONT_SIZES, TEXT_PROPS } from '../../../constants'
 import { stopEventPropagation } from '../../../utils/dom'
 import { isLegacyAlign } from '../../../utils/legacy'
-import { TextHelpers } from '../TextShapeUtil/TextHelpers'
+import { TextHelpers } from '../text/TextHelpers'
 import { useEditableText } from './useEditableText'
 
 export const TextLabel = React.memo(function TextLabel<