@tldraw/editor 5.3.0-canary.50fed61679d4 → 5.3.0-canary.58df715967e7

package/dist-cjs/index.d.ts

@@ -219,7 +219,7 @@ export declare abstract class BaseBoxShapeUtil<Shape extends TLBaseBoxShape> ext
 }
 
 /**
- * A base class for frame-like shapes — containers that clip their children,
+ * A base class for frame-like shapes — containers that clip their children except arrows,
  * require full-brush selection, block erasure from inside, and support
  * drag-and-drop reparenting.
  *
@@ -231,6 +231,7 @@ export declare abstract class BaseBoxShapeUtil<Shape extends TLBaseBoxShape> ext
  * - `canReceiveNewChildrenOfType()` returns `true` unless the container is locked
  * - `canRemoveChildrenOfType()` returns `true` unless the container is locked
  * - `getClipPath()` returns the shape geometry's vertices
+ * - `shouldClipChild()` clips all children except arrows
  * - `onDragShapesIn()` reparents shapes into the frame (with index restoration)
  * - `onDragShapesOut()` reparents shapes back to the page
  *
@@ -266,6 +267,7 @@ export declare abstract class BaseFrameLikeShapeUtil<Shape extends TLBaseBoxShap
     canReceiveNewChildrenOfType(shape: Shape, _type: TLShape['type']): boolean;
     canRemoveChildrenOfType(shape: Shape, _type: TLShape['type']): boolean;
     getClipPath(shape: Shape): undefined | Vec[];
+    shouldClipChild(child: TLShape): boolean;
     onDragShapesIn(shape: Shape, draggingShapes: TLShape[], { initialParentIds, initialIndices }: TLDragShapesInInfo): void;
     onDragShapesOut(shape: Shape, draggingShapes: TLShape[], info: TLDragShapesOutInfo): void;
 }

package/dist-cjs/index.js

@@ -379,7 +379,7 @@ var import_uniq = require("./lib/utils/uniq");
 var import_defaultThemes2 = require("./lib/editor/managers/ThemeManager/defaultThemes");
 (0, import_utils.registerTldrawLibraryVersion)(
   "@tldraw/editor",
-  "5.3.0-canary.50fed61679d4",
+  "5.3.0-canary.58df715967e7",
   "cjs"
 );
 //# sourceMappingURL=index.js.map

package/dist-cjs/lib/editor/shapes/BaseFrameLikeShapeUtil.js

@@ -39,6 +39,9 @@ class BaseFrameLikeShapeUtil extends import_BaseBoxShapeUtil.BaseBoxShapeUtil {
   getClipPath(shape) {
     return this.editor.getShapeGeometry(shape.id).vertices;
   }
+  shouldClipChild(child) {
+    return child.type !== "arrow";
+  }
   onDragShapesIn(shape, draggingShapes, { initialParentIds, initialIndices }) {
     const { editor } = this;
     if (draggingShapes.every((s) => s.parentId === shape.id)) return;

package/dist-cjs/lib/editor/shapes/BaseFrameLikeShapeUtil.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/lib/editor/shapes/BaseFrameLikeShapeUtil.tsx"],
-  "sourcesContent": ["import { TLShape, TLShapeId } from '@tldraw/tlschema'\nimport { IndexKey, compact } from '@tldraw/utils'\nimport { Vec } from '../../primitives/Vec'\nimport { BaseBoxShapeUtil, TLBaseBoxShape } from './BaseBoxShapeUtil'\nimport { TLDragShapesInInfo, TLDragShapesOutInfo } from './ShapeUtil'\n\n/**\n * A base class for frame-like shapes \u2014 containers that clip their children,\n * require full-brush selection, block erasure from inside, and support\n * drag-and-drop reparenting.\n *\n * Extending this class is the easiest way to create a custom frame-like shape.\n * It provides sensible defaults for all frame-like behaviors:\n *\n * - `isFrameLike()` returns `true`\n * - `providesBackgroundForChildren()` returns `true`\n * - `canReceiveNewChildrenOfType()` returns `true` unless the container is locked\n * - `canRemoveChildrenOfType()` returns `true` unless the container is locked\n * - `getClipPath()` returns the shape geometry's vertices\n * - `onDragShapesIn()` reparents shapes into the frame (with index restoration)\n * - `onDragShapesOut()` reparents shapes back to the page\n *\n * All methods can be overridden for custom behavior.\n *\n * @example\n * ```ts\n * class MyContainerUtil extends BaseFrameLikeShapeUtil<MyContainerShape> {\n *   static override type = 'my-container' as const\n *   static override props = myContainerShapeProps\n *\n *   override getDefaultProps() {\n *     return { w: 300, h: 200 }\n *   }\n *\n *   override component(shape: MyContainerShape) {\n *     return <SVGContainer>...</SVGContainer>\n *   }\n *\n *   override getIndicatorPath(shape: MyContainerShape) {\n *     const path = new Path2D()\n *     path.rect(0, 0, shape.props.w, shape.props.h)\n *     return path\n *   }\n * }\n * ```\n *\n * @public\n */\nexport abstract class BaseFrameLikeShapeUtil<\n\tShape extends TLBaseBoxShape,\n> extends BaseBoxShapeUtil<Shape> {\n\toverride isFrameLike(_shape: Shape): boolean {\n\t\treturn true\n\t}\n\n\toverride providesBackgroundForChildren(): boolean {\n\t\treturn true\n\t}\n\n\toverride canReceiveNewChildrenOfType(shape: Shape, _type: TLShape['type']): boolean {\n\t\treturn !shape.isLocked\n\t}\n\n\toverride canRemoveChildrenOfType(shape: Shape, _type: TLShape['type']): boolean {\n\t\treturn !shape.isLocked\n\t}\n\n\toverride getClipPath(shape: Shape): Vec[] | undefined {\n\t\treturn this.editor.getShapeGeometry(shape.id).vertices\n\t}\n\n\toverride onDragShapesIn(\n\t\tshape: Shape,\n\t\tdraggingShapes: TLShape[],\n\t\t{ initialParentIds, initialIndices }: TLDragShapesInInfo\n\t): void {\n\t\tconst { editor } = this\n\n\t\tif (draggingShapes.every((s) => s.parentId === shape.id)) return\n\n\t\t// Check to see whether any of the shapes can have their old index restored\n\t\tlet canRestoreOriginalIndices = false\n\t\tconst previousChildren = draggingShapes.filter(\n\t\t\t(s) => shape.id === (initialParentIds.get(s.id) as TLShapeId)\n\t\t)\n\n\t\tif (previousChildren.length > 0) {\n\t\t\tconst currentChildren = compact(\n\t\t\t\teditor.getSortedChildIdsForParent(shape).map((id) => editor.getShape(id))\n\t\t\t)\n\t\t\tif (previousChildren.every((s) => !currentChildren.find((c) => c.index === s.index))) {\n\t\t\t\tcanRestoreOriginalIndices = true\n\t\t\t}\n\t\t}\n\n\t\t// If any of the children are the ancestor of the frame, quit here\n\t\tif (draggingShapes.some((s) => editor.hasAncestor(shape, s.id))) return\n\n\t\teditor.reparentShapes(draggingShapes, shape.id)\n\n\t\tif (canRestoreOriginalIndices) {\n\t\t\tfor (const s of previousChildren) {\n\t\t\t\teditor.updateShape({\n\t\t\t\t\tid: s.id,\n\t\t\t\t\ttype: s.type,\n\t\t\t\t\tindex: initialIndices.get(s.id) as IndexKey,\n\t\t\t\t})\n\t\t\t}\n\t\t}\n\t}\n\n\toverride onDragShapesOut(\n\t\tshape: Shape,\n\t\tdraggingShapes: TLShape[],\n\t\tinfo: TLDragShapesOutInfo\n\t): void {\n\t\tconst { editor } = this\n\t\t// When a user drags shapes out and we're not dragging into a new shape,\n\t\t// reparent the dragging shapes onto the current page instead\n\t\tif (!info.nextDraggingOverShapeId) {\n\t\t\t// Locked shapes are already filtered out upstream by DragAndDropManager.\n\t\t\teditor.reparentShapes(\n\t\t\t\tdraggingShapes.filter((s) => s.parentId === shape.id),\n\t\t\t\teditor.getCurrentPageId()\n\t\t\t)\n\t\t}\n\t}\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,mBAAkC;AAElC,8BAAiD;AA6C1C,MAAe,+BAEZ,yCAAwB;AAAA,EACxB,YAAY,QAAwB;AAC5C,WAAO;AAAA,EACR;AAAA,EAES,gCAAyC;AACjD,WAAO;AAAA,EACR;AAAA,EAES,4BAA4B,OAAc,OAAiC;AACnF,WAAO,CAAC,MAAM;AAAA,EACf;AAAA,EAES,wBAAwB,OAAc,OAAiC;AAC/E,WAAO,CAAC,MAAM;AAAA,EACf;AAAA,EAES,YAAY,OAAiC;AACrD,WAAO,KAAK,OAAO,iBAAiB,MAAM,EAAE,EAAE;AAAA,EAC/C;AAAA,EAES,eACR,OACA,gBACA,EAAE,kBAAkB,eAAe,GAC5B;AACP,UAAM,EAAE,OAAO,IAAI;AAEnB,QAAI,eAAe,MAAM,CAAC,MAAM,EAAE,aAAa,MAAM,EAAE,EAAG;AAG1D,QAAI,4BAA4B;AAChC,UAAM,mBAAmB,eAAe;AAAA,MACvC,CAAC,MAAM,MAAM,OAAQ,iBAAiB,IAAI,EAAE,EAAE;AAAA,IAC/C;AAEA,QAAI,iBAAiB,SAAS,GAAG;AAChC,YAAM,sBAAkB;AAAA,QACvB,OAAO,2BAA2B,KAAK,EAAE,IAAI,CAAC,OAAO,OAAO,SAAS,EAAE,CAAC;AAAA,MACzE;AACA,UAAI,iBAAiB,MAAM,CAAC,MAAM,CAAC,gBAAgB,KAAK,CAAC,MAAM,EAAE,UAAU,EAAE,KAAK,CAAC,GAAG;AACrF,oCAA4B;AAAA,MAC7B;AAAA,IACD;AAGA,QAAI,eAAe,KAAK,CAAC,MAAM,OAAO,YAAY,OAAO,EAAE,EAAE,CAAC,EAAG;AAEjE,WAAO,eAAe,gBAAgB,MAAM,EAAE;AAE9C,QAAI,2BAA2B;AAC9B,iBAAW,KAAK,kBAAkB;AACjC,eAAO,YAAY;AAAA,UAClB,IAAI,EAAE;AAAA,UACN,MAAM,EAAE;AAAA,UACR,OAAO,eAAe,IAAI,EAAE,EAAE;AAAA,QAC/B,CAAC;AAAA,MACF;AAAA,IACD;AAAA,EACD;AAAA,EAES,gBACR,OACA,gBACA,MACO;AACP,UAAM,EAAE,OAAO,IAAI;AAGnB,QAAI,CAAC,KAAK,yBAAyB;AAElC,aAAO;AAAA,QACN,eAAe,OAAO,CAAC,MAAM,EAAE,aAAa,MAAM,EAAE;AAAA,QACpD,OAAO,iBAAiB;AAAA,MACzB;AAAA,IACD;AAAA,EACD;AACD;",
+  "sourcesContent": ["import { TLShape, TLShapeId } from '@tldraw/tlschema'\nimport { IndexKey, compact } from '@tldraw/utils'\nimport { Vec } from '../../primitives/Vec'\nimport { BaseBoxShapeUtil, TLBaseBoxShape } from './BaseBoxShapeUtil'\nimport { TLDragShapesInInfo, TLDragShapesOutInfo } from './ShapeUtil'\n\n/**\n * A base class for frame-like shapes \u2014 containers that clip their children except arrows,\n * require full-brush selection, block erasure from inside, and support\n * drag-and-drop reparenting.\n *\n * Extending this class is the easiest way to create a custom frame-like shape.\n * It provides sensible defaults for all frame-like behaviors:\n *\n * - `isFrameLike()` returns `true`\n * - `providesBackgroundForChildren()` returns `true`\n * - `canReceiveNewChildrenOfType()` returns `true` unless the container is locked\n * - `canRemoveChildrenOfType()` returns `true` unless the container is locked\n * - `getClipPath()` returns the shape geometry's vertices\n * - `shouldClipChild()` clips all children except arrows\n * - `onDragShapesIn()` reparents shapes into the frame (with index restoration)\n * - `onDragShapesOut()` reparents shapes back to the page\n *\n * All methods can be overridden for custom behavior.\n *\n * @example\n * ```ts\n * class MyContainerUtil extends BaseFrameLikeShapeUtil<MyContainerShape> {\n *   static override type = 'my-container' as const\n *   static override props = myContainerShapeProps\n *\n *   override getDefaultProps() {\n *     return { w: 300, h: 200 }\n *   }\n *\n *   override component(shape: MyContainerShape) {\n *     return <SVGContainer>...</SVGContainer>\n *   }\n *\n *   override getIndicatorPath(shape: MyContainerShape) {\n *     const path = new Path2D()\n *     path.rect(0, 0, shape.props.w, shape.props.h)\n *     return path\n *   }\n * }\n * ```\n *\n * @public\n */\nexport abstract class BaseFrameLikeShapeUtil<\n\tShape extends TLBaseBoxShape,\n> extends BaseBoxShapeUtil<Shape> {\n\toverride isFrameLike(_shape: Shape): boolean {\n\t\treturn true\n\t}\n\n\toverride providesBackgroundForChildren(): boolean {\n\t\treturn true\n\t}\n\n\toverride canReceiveNewChildrenOfType(shape: Shape, _type: TLShape['type']): boolean {\n\t\treturn !shape.isLocked\n\t}\n\n\toverride canRemoveChildrenOfType(shape: Shape, _type: TLShape['type']): boolean {\n\t\treturn !shape.isLocked\n\t}\n\n\toverride getClipPath(shape: Shape): Vec[] | undefined {\n\t\treturn this.editor.getShapeGeometry(shape.id).vertices\n\t}\n\n\toverride shouldClipChild(child: TLShape): boolean {\n\t\treturn child.type !== 'arrow'\n\t}\n\n\toverride onDragShapesIn(\n\t\tshape: Shape,\n\t\tdraggingShapes: TLShape[],\n\t\t{ initialParentIds, initialIndices }: TLDragShapesInInfo\n\t): void {\n\t\tconst { editor } = this\n\n\t\tif (draggingShapes.every((s) => s.parentId === shape.id)) return\n\n\t\t// Check to see whether any of the shapes can have their old index restored\n\t\tlet canRestoreOriginalIndices = false\n\t\tconst previousChildren = draggingShapes.filter(\n\t\t\t(s) => shape.id === (initialParentIds.get(s.id) as TLShapeId)\n\t\t)\n\n\t\tif (previousChildren.length > 0) {\n\t\t\tconst currentChildren = compact(\n\t\t\t\teditor.getSortedChildIdsForParent(shape).map((id) => editor.getShape(id))\n\t\t\t)\n\t\t\tif (previousChildren.every((s) => !currentChildren.find((c) => c.index === s.index))) {\n\t\t\t\tcanRestoreOriginalIndices = true\n\t\t\t}\n\t\t}\n\n\t\t// If any of the children are the ancestor of the frame, quit here\n\t\tif (draggingShapes.some((s) => editor.hasAncestor(shape, s.id))) return\n\n\t\teditor.reparentShapes(draggingShapes, shape.id)\n\n\t\tif (canRestoreOriginalIndices) {\n\t\t\tfor (const s of previousChildren) {\n\t\t\t\teditor.updateShape({\n\t\t\t\t\tid: s.id,\n\t\t\t\t\ttype: s.type,\n\t\t\t\t\tindex: initialIndices.get(s.id) as IndexKey,\n\t\t\t\t})\n\t\t\t}\n\t\t}\n\t}\n\n\toverride onDragShapesOut(\n\t\tshape: Shape,\n\t\tdraggingShapes: TLShape[],\n\t\tinfo: TLDragShapesOutInfo\n\t): void {\n\t\tconst { editor } = this\n\t\t// When a user drags shapes out and we're not dragging into a new shape,\n\t\t// reparent the dragging shapes onto the current page instead\n\t\tif (!info.nextDraggingOverShapeId) {\n\t\t\t// Locked shapes are already filtered out upstream by DragAndDropManager.\n\t\t\teditor.reparentShapes(\n\t\t\t\tdraggingShapes.filter((s) => s.parentId === shape.id),\n\t\t\t\teditor.getCurrentPageId()\n\t\t\t)\n\t\t}\n\t}\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,mBAAkC;AAElC,8BAAiD;AA8C1C,MAAe,+BAEZ,yCAAwB;AAAA,EACxB,YAAY,QAAwB;AAC5C,WAAO;AAAA,EACR;AAAA,EAES,gCAAyC;AACjD,WAAO;AAAA,EACR;AAAA,EAES,4BAA4B,OAAc,OAAiC;AACnF,WAAO,CAAC,MAAM;AAAA,EACf;AAAA,EAES,wBAAwB,OAAc,OAAiC;AAC/E,WAAO,CAAC,MAAM;AAAA,EACf;AAAA,EAES,YAAY,OAAiC;AACrD,WAAO,KAAK,OAAO,iBAAiB,MAAM,EAAE,EAAE;AAAA,EAC/C;AAAA,EAES,gBAAgB,OAAyB;AACjD,WAAO,MAAM,SAAS;AAAA,EACvB;AAAA,EAES,eACR,OACA,gBACA,EAAE,kBAAkB,eAAe,GAC5B;AACP,UAAM,EAAE,OAAO,IAAI;AAEnB,QAAI,eAAe,MAAM,CAAC,MAAM,EAAE,aAAa,MAAM,EAAE,EAAG;AAG1D,QAAI,4BAA4B;AAChC,UAAM,mBAAmB,eAAe;AAAA,MACvC,CAAC,MAAM,MAAM,OAAQ,iBAAiB,IAAI,EAAE,EAAE;AAAA,IAC/C;AAEA,QAAI,iBAAiB,SAAS,GAAG;AAChC,YAAM,sBAAkB;AAAA,QACvB,OAAO,2BAA2B,KAAK,EAAE,IAAI,CAAC,OAAO,OAAO,SAAS,EAAE,CAAC;AAAA,MACzE;AACA,UAAI,iBAAiB,MAAM,CAAC,MAAM,CAAC,gBAAgB,KAAK,CAAC,MAAM,EAAE,UAAU,EAAE,KAAK,CAAC,GAAG;AACrF,oCAA4B;AAAA,MAC7B;AAAA,IACD;AAGA,QAAI,eAAe,KAAK,CAAC,MAAM,OAAO,YAAY,OAAO,EAAE,EAAE,CAAC,EAAG;AAEjE,WAAO,eAAe,gBAAgB,MAAM,EAAE;AAE9C,QAAI,2BAA2B;AAC9B,iBAAW,KAAK,kBAAkB;AACjC,eAAO,YAAY;AAAA,UAClB,IAAI,EAAE;AAAA,UACN,MAAM,EAAE;AAAA,UACR,OAAO,eAAe,IAAI,EAAE,EAAE;AAAA,QAC/B,CAAC;AAAA,MACF;AAAA,IACD;AAAA,EACD;AAAA,EAES,gBACR,OACA,gBACA,MACO;AACP,UAAM,EAAE,OAAO,IAAI;AAGnB,QAAI,CAAC,KAAK,yBAAyB;AAElC,aAAO;AAAA,QACN,eAAe,OAAO,CAAC,MAAM,EAAE,aAAa,MAAM,EAAE;AAAA,QACpD,OAAO,iBAAiB;AAAA,MACzB;AAAA,IACD;AAAA,EACD;AACD;",
   "names": []
 }

package/dist-cjs/version.js

@@ -22,10 +22,10 @@ __export(version_exports, {
   version: () => version
 });
 module.exports = __toCommonJS(version_exports);
-const version = "5.3.0-canary.50fed61679d4";
+const version = "5.3.0-canary.58df715967e7";
 const publishDates = {
   major: "2026-05-06T16:28:18.473Z",
-  minor: "2026-07-02T09:23:18.538Z",
-  patch: "2026-07-02T09:23:18.538Z"
+  minor: "2026-07-02T13:11:09.282Z",
+  patch: "2026-07-02T13:11:09.282Z"
 };
 //# sourceMappingURL=version.js.map

package/dist-cjs/version.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/version.ts"],
-  "sourcesContent": ["// This file is automatically generated by internal/scripts/refresh-assets.ts.\n// Do not edit manually. Or do, I'm a comment, not a cop.\n\nexport const version = '5.3.0-canary.50fed61679d4'\nexport const publishDates = {\n\tmajor: '2026-05-06T16:28:18.473Z',\n\tminor: '2026-07-02T09:23:18.538Z',\n\tpatch: '2026-07-02T09:23:18.538Z',\n}\n"],
+  "sourcesContent": ["// This file is automatically generated by internal/scripts/refresh-assets.ts.\n// Do not edit manually. Or do, I'm a comment, not a cop.\n\nexport const version = '5.3.0-canary.58df715967e7'\nexport const publishDates = {\n\tmajor: '2026-05-06T16:28:18.473Z',\n\tminor: '2026-07-02T13:11:09.282Z',\n\tpatch: '2026-07-02T13:11:09.282Z',\n}\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGO,MAAM,UAAU;AAChB,MAAM,eAAe;AAAA,EAC3B,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AACR;",
   "names": []
 }

package/dist-esm/index.d.mts

@@ -219,7 +219,7 @@ export declare abstract class BaseBoxShapeUtil<Shape extends TLBaseBoxShape> ext
 }
 
 /**
- * A base class for frame-like shapes — containers that clip their children,
+ * A base class for frame-like shapes — containers that clip their children except arrows,
  * require full-brush selection, block erasure from inside, and support
  * drag-and-drop reparenting.
  *
@@ -231,6 +231,7 @@ export declare abstract class BaseBoxShapeUtil<Shape extends TLBaseBoxShape> ext
  * - `canReceiveNewChildrenOfType()` returns `true` unless the container is locked
  * - `canRemoveChildrenOfType()` returns `true` unless the container is locked
  * - `getClipPath()` returns the shape geometry's vertices
+ * - `shouldClipChild()` clips all children except arrows
  * - `onDragShapesIn()` reparents shapes into the frame (with index restoration)
  * - `onDragShapesOut()` reparents shapes back to the page
  *
@@ -266,6 +267,7 @@ export declare abstract class BaseFrameLikeShapeUtil<Shape extends TLBaseBoxShap
     canReceiveNewChildrenOfType(shape: Shape, _type: TLShape['type']): boolean;
     canRemoveChildrenOfType(shape: Shape, _type: TLShape['type']): boolean;
     getClipPath(shape: Shape): undefined | Vec[];
+    shouldClipChild(child: TLShape): boolean;
     onDragShapesIn(shape: Shape, draggingShapes: TLShape[], { initialParentIds, initialIndices }: TLDragShapesInInfo): void;
     onDragShapesOut(shape: Shape, draggingShapes: TLShape[], info: TLDragShapesOutInfo): void;
 }

package/dist-esm/index.mjs

@@ -296,7 +296,7 @@ import { LocalIndexedDb, Table } from "./lib/utils/sync/LocalIndexedDb.mjs";
 import { uniq } from "./lib/utils/uniq.mjs";
 registerTldrawLibraryVersion(
   "@tldraw/editor",
-  "5.3.0-canary.50fed61679d4",
+  "5.3.0-canary.58df715967e7",
   "esm"
 );
 import { getColorValue } from "./lib/editor/managers/ThemeManager/defaultThemes.mjs";

package/dist-esm/lib/editor/shapes/BaseFrameLikeShapeUtil.mjs

@@ -16,6 +16,9 @@ class BaseFrameLikeShapeUtil extends BaseBoxShapeUtil {
   getClipPath(shape) {
     return this.editor.getShapeGeometry(shape.id).vertices;
   }
+  shouldClipChild(child) {
+    return child.type !== "arrow";
+  }
   onDragShapesIn(shape, draggingShapes, { initialParentIds, initialIndices }) {
     const { editor } = this;
     if (draggingShapes.every((s) => s.parentId === shape.id)) return;

package/dist-esm/lib/editor/shapes/BaseFrameLikeShapeUtil.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/lib/editor/shapes/BaseFrameLikeShapeUtil.tsx"],
-  "sourcesContent": ["import { TLShape, TLShapeId } from '@tldraw/tlschema'\nimport { IndexKey, compact } from '@tldraw/utils'\nimport { Vec } from '../../primitives/Vec'\nimport { BaseBoxShapeUtil, TLBaseBoxShape } from './BaseBoxShapeUtil'\nimport { TLDragShapesInInfo, TLDragShapesOutInfo } from './ShapeUtil'\n\n/**\n * A base class for frame-like shapes \u2014 containers that clip their children,\n * require full-brush selection, block erasure from inside, and support\n * drag-and-drop reparenting.\n *\n * Extending this class is the easiest way to create a custom frame-like shape.\n * It provides sensible defaults for all frame-like behaviors:\n *\n * - `isFrameLike()` returns `true`\n * - `providesBackgroundForChildren()` returns `true`\n * - `canReceiveNewChildrenOfType()` returns `true` unless the container is locked\n * - `canRemoveChildrenOfType()` returns `true` unless the container is locked\n * - `getClipPath()` returns the shape geometry's vertices\n * - `onDragShapesIn()` reparents shapes into the frame (with index restoration)\n * - `onDragShapesOut()` reparents shapes back to the page\n *\n * All methods can be overridden for custom behavior.\n *\n * @example\n * ```ts\n * class MyContainerUtil extends BaseFrameLikeShapeUtil<MyContainerShape> {\n *   static override type = 'my-container' as const\n *   static override props = myContainerShapeProps\n *\n *   override getDefaultProps() {\n *     return { w: 300, h: 200 }\n *   }\n *\n *   override component(shape: MyContainerShape) {\n *     return <SVGContainer>...</SVGContainer>\n *   }\n *\n *   override getIndicatorPath(shape: MyContainerShape) {\n *     const path = new Path2D()\n *     path.rect(0, 0, shape.props.w, shape.props.h)\n *     return path\n *   }\n * }\n * ```\n *\n * @public\n */\nexport abstract class BaseFrameLikeShapeUtil<\n\tShape extends TLBaseBoxShape,\n> extends BaseBoxShapeUtil<Shape> {\n\toverride isFrameLike(_shape: Shape): boolean {\n\t\treturn true\n\t}\n\n\toverride providesBackgroundForChildren(): boolean {\n\t\treturn true\n\t}\n\n\toverride canReceiveNewChildrenOfType(shape: Shape, _type: TLShape['type']): boolean {\n\t\treturn !shape.isLocked\n\t}\n\n\toverride canRemoveChildrenOfType(shape: Shape, _type: TLShape['type']): boolean {\n\t\treturn !shape.isLocked\n\t}\n\n\toverride getClipPath(shape: Shape): Vec[] | undefined {\n\t\treturn this.editor.getShapeGeometry(shape.id).vertices\n\t}\n\n\toverride onDragShapesIn(\n\t\tshape: Shape,\n\t\tdraggingShapes: TLShape[],\n\t\t{ initialParentIds, initialIndices }: TLDragShapesInInfo\n\t): void {\n\t\tconst { editor } = this\n\n\t\tif (draggingShapes.every((s) => s.parentId === shape.id)) return\n\n\t\t// Check to see whether any of the shapes can have their old index restored\n\t\tlet canRestoreOriginalIndices = false\n\t\tconst previousChildren = draggingShapes.filter(\n\t\t\t(s) => shape.id === (initialParentIds.get(s.id) as TLShapeId)\n\t\t)\n\n\t\tif (previousChildren.length > 0) {\n\t\t\tconst currentChildren = compact(\n\t\t\t\teditor.getSortedChildIdsForParent(shape).map((id) => editor.getShape(id))\n\t\t\t)\n\t\t\tif (previousChildren.every((s) => !currentChildren.find((c) => c.index === s.index))) {\n\t\t\t\tcanRestoreOriginalIndices = true\n\t\t\t}\n\t\t}\n\n\t\t// If any of the children are the ancestor of the frame, quit here\n\t\tif (draggingShapes.some((s) => editor.hasAncestor(shape, s.id))) return\n\n\t\teditor.reparentShapes(draggingShapes, shape.id)\n\n\t\tif (canRestoreOriginalIndices) {\n\t\t\tfor (const s of previousChildren) {\n\t\t\t\teditor.updateShape({\n\t\t\t\t\tid: s.id,\n\t\t\t\t\ttype: s.type,\n\t\t\t\t\tindex: initialIndices.get(s.id) as IndexKey,\n\t\t\t\t})\n\t\t\t}\n\t\t}\n\t}\n\n\toverride onDragShapesOut(\n\t\tshape: Shape,\n\t\tdraggingShapes: TLShape[],\n\t\tinfo: TLDragShapesOutInfo\n\t): void {\n\t\tconst { editor } = this\n\t\t// When a user drags shapes out and we're not dragging into a new shape,\n\t\t// reparent the dragging shapes onto the current page instead\n\t\tif (!info.nextDraggingOverShapeId) {\n\t\t\t// Locked shapes are already filtered out upstream by DragAndDropManager.\n\t\t\teditor.reparentShapes(\n\t\t\t\tdraggingShapes.filter((s) => s.parentId === shape.id),\n\t\t\t\teditor.getCurrentPageId()\n\t\t\t)\n\t\t}\n\t}\n}\n"],
-  "mappings": "AACA,SAAmB,eAAe;AAElC,SAAS,wBAAwC;AA6C1C,MAAe,+BAEZ,iBAAwB;AAAA,EACxB,YAAY,QAAwB;AAC5C,WAAO;AAAA,EACR;AAAA,EAES,gCAAyC;AACjD,WAAO;AAAA,EACR;AAAA,EAES,4BAA4B,OAAc,OAAiC;AACnF,WAAO,CAAC,MAAM;AAAA,EACf;AAAA,EAES,wBAAwB,OAAc,OAAiC;AAC/E,WAAO,CAAC,MAAM;AAAA,EACf;AAAA,EAES,YAAY,OAAiC;AACrD,WAAO,KAAK,OAAO,iBAAiB,MAAM,EAAE,EAAE;AAAA,EAC/C;AAAA,EAES,eACR,OACA,gBACA,EAAE,kBAAkB,eAAe,GAC5B;AACP,UAAM,EAAE,OAAO,IAAI;AAEnB,QAAI,eAAe,MAAM,CAAC,MAAM,EAAE,aAAa,MAAM,EAAE,EAAG;AAG1D,QAAI,4BAA4B;AAChC,UAAM,mBAAmB,eAAe;AAAA,MACvC,CAAC,MAAM,MAAM,OAAQ,iBAAiB,IAAI,EAAE,EAAE;AAAA,IAC/C;AAEA,QAAI,iBAAiB,SAAS,GAAG;AAChC,YAAM,kBAAkB;AAAA,QACvB,OAAO,2BAA2B,KAAK,EAAE,IAAI,CAAC,OAAO,OAAO,SAAS,EAAE,CAAC;AAAA,MACzE;AACA,UAAI,iBAAiB,MAAM,CAAC,MAAM,CAAC,gBAAgB,KAAK,CAAC,MAAM,EAAE,UAAU,EAAE,KAAK,CAAC,GAAG;AACrF,oCAA4B;AAAA,MAC7B;AAAA,IACD;AAGA,QAAI,eAAe,KAAK,CAAC,MAAM,OAAO,YAAY,OAAO,EAAE,EAAE,CAAC,EAAG;AAEjE,WAAO,eAAe,gBAAgB,MAAM,EAAE;AAE9C,QAAI,2BAA2B;AAC9B,iBAAW,KAAK,kBAAkB;AACjC,eAAO,YAAY;AAAA,UAClB,IAAI,EAAE;AAAA,UACN,MAAM,EAAE;AAAA,UACR,OAAO,eAAe,IAAI,EAAE,EAAE;AAAA,QAC/B,CAAC;AAAA,MACF;AAAA,IACD;AAAA,EACD;AAAA,EAES,gBACR,OACA,gBACA,MACO;AACP,UAAM,EAAE,OAAO,IAAI;AAGnB,QAAI,CAAC,KAAK,yBAAyB;AAElC,aAAO;AAAA,QACN,eAAe,OAAO,CAAC,MAAM,EAAE,aAAa,MAAM,EAAE;AAAA,QACpD,OAAO,iBAAiB;AAAA,MACzB;AAAA,IACD;AAAA,EACD;AACD;",
+  "sourcesContent": ["import { TLShape, TLShapeId } from '@tldraw/tlschema'\nimport { IndexKey, compact } from '@tldraw/utils'\nimport { Vec } from '../../primitives/Vec'\nimport { BaseBoxShapeUtil, TLBaseBoxShape } from './BaseBoxShapeUtil'\nimport { TLDragShapesInInfo, TLDragShapesOutInfo } from './ShapeUtil'\n\n/**\n * A base class for frame-like shapes \u2014 containers that clip their children except arrows,\n * require full-brush selection, block erasure from inside, and support\n * drag-and-drop reparenting.\n *\n * Extending this class is the easiest way to create a custom frame-like shape.\n * It provides sensible defaults for all frame-like behaviors:\n *\n * - `isFrameLike()` returns `true`\n * - `providesBackgroundForChildren()` returns `true`\n * - `canReceiveNewChildrenOfType()` returns `true` unless the container is locked\n * - `canRemoveChildrenOfType()` returns `true` unless the container is locked\n * - `getClipPath()` returns the shape geometry's vertices\n * - `shouldClipChild()` clips all children except arrows\n * - `onDragShapesIn()` reparents shapes into the frame (with index restoration)\n * - `onDragShapesOut()` reparents shapes back to the page\n *\n * All methods can be overridden for custom behavior.\n *\n * @example\n * ```ts\n * class MyContainerUtil extends BaseFrameLikeShapeUtil<MyContainerShape> {\n *   static override type = 'my-container' as const\n *   static override props = myContainerShapeProps\n *\n *   override getDefaultProps() {\n *     return { w: 300, h: 200 }\n *   }\n *\n *   override component(shape: MyContainerShape) {\n *     return <SVGContainer>...</SVGContainer>\n *   }\n *\n *   override getIndicatorPath(shape: MyContainerShape) {\n *     const path = new Path2D()\n *     path.rect(0, 0, shape.props.w, shape.props.h)\n *     return path\n *   }\n * }\n * ```\n *\n * @public\n */\nexport abstract class BaseFrameLikeShapeUtil<\n\tShape extends TLBaseBoxShape,\n> extends BaseBoxShapeUtil<Shape> {\n\toverride isFrameLike(_shape: Shape): boolean {\n\t\treturn true\n\t}\n\n\toverride providesBackgroundForChildren(): boolean {\n\t\treturn true\n\t}\n\n\toverride canReceiveNewChildrenOfType(shape: Shape, _type: TLShape['type']): boolean {\n\t\treturn !shape.isLocked\n\t}\n\n\toverride canRemoveChildrenOfType(shape: Shape, _type: TLShape['type']): boolean {\n\t\treturn !shape.isLocked\n\t}\n\n\toverride getClipPath(shape: Shape): Vec[] | undefined {\n\t\treturn this.editor.getShapeGeometry(shape.id).vertices\n\t}\n\n\toverride shouldClipChild(child: TLShape): boolean {\n\t\treturn child.type !== 'arrow'\n\t}\n\n\toverride onDragShapesIn(\n\t\tshape: Shape,\n\t\tdraggingShapes: TLShape[],\n\t\t{ initialParentIds, initialIndices }: TLDragShapesInInfo\n\t): void {\n\t\tconst { editor } = this\n\n\t\tif (draggingShapes.every((s) => s.parentId === shape.id)) return\n\n\t\t// Check to see whether any of the shapes can have their old index restored\n\t\tlet canRestoreOriginalIndices = false\n\t\tconst previousChildren = draggingShapes.filter(\n\t\t\t(s) => shape.id === (initialParentIds.get(s.id) as TLShapeId)\n\t\t)\n\n\t\tif (previousChildren.length > 0) {\n\t\t\tconst currentChildren = compact(\n\t\t\t\teditor.getSortedChildIdsForParent(shape).map((id) => editor.getShape(id))\n\t\t\t)\n\t\t\tif (previousChildren.every((s) => !currentChildren.find((c) => c.index === s.index))) {\n\t\t\t\tcanRestoreOriginalIndices = true\n\t\t\t}\n\t\t}\n\n\t\t// If any of the children are the ancestor of the frame, quit here\n\t\tif (draggingShapes.some((s) => editor.hasAncestor(shape, s.id))) return\n\n\t\teditor.reparentShapes(draggingShapes, shape.id)\n\n\t\tif (canRestoreOriginalIndices) {\n\t\t\tfor (const s of previousChildren) {\n\t\t\t\teditor.updateShape({\n\t\t\t\t\tid: s.id,\n\t\t\t\t\ttype: s.type,\n\t\t\t\t\tindex: initialIndices.get(s.id) as IndexKey,\n\t\t\t\t})\n\t\t\t}\n\t\t}\n\t}\n\n\toverride onDragShapesOut(\n\t\tshape: Shape,\n\t\tdraggingShapes: TLShape[],\n\t\tinfo: TLDragShapesOutInfo\n\t): void {\n\t\tconst { editor } = this\n\t\t// When a user drags shapes out and we're not dragging into a new shape,\n\t\t// reparent the dragging shapes onto the current page instead\n\t\tif (!info.nextDraggingOverShapeId) {\n\t\t\t// Locked shapes are already filtered out upstream by DragAndDropManager.\n\t\t\teditor.reparentShapes(\n\t\t\t\tdraggingShapes.filter((s) => s.parentId === shape.id),\n\t\t\t\teditor.getCurrentPageId()\n\t\t\t)\n\t\t}\n\t}\n}\n"],
+  "mappings": "AACA,SAAmB,eAAe;AAElC,SAAS,wBAAwC;AA8C1C,MAAe,+BAEZ,iBAAwB;AAAA,EACxB,YAAY,QAAwB;AAC5C,WAAO;AAAA,EACR;AAAA,EAES,gCAAyC;AACjD,WAAO;AAAA,EACR;AAAA,EAES,4BAA4B,OAAc,OAAiC;AACnF,WAAO,CAAC,MAAM;AAAA,EACf;AAAA,EAES,wBAAwB,OAAc,OAAiC;AAC/E,WAAO,CAAC,MAAM;AAAA,EACf;AAAA,EAES,YAAY,OAAiC;AACrD,WAAO,KAAK,OAAO,iBAAiB,MAAM,EAAE,EAAE;AAAA,EAC/C;AAAA,EAES,gBAAgB,OAAyB;AACjD,WAAO,MAAM,SAAS;AAAA,EACvB;AAAA,EAES,eACR,OACA,gBACA,EAAE,kBAAkB,eAAe,GAC5B;AACP,UAAM,EAAE,OAAO,IAAI;AAEnB,QAAI,eAAe,MAAM,CAAC,MAAM,EAAE,aAAa,MAAM,EAAE,EAAG;AAG1D,QAAI,4BAA4B;AAChC,UAAM,mBAAmB,eAAe;AAAA,MACvC,CAAC,MAAM,MAAM,OAAQ,iBAAiB,IAAI,EAAE,EAAE;AAAA,IAC/C;AAEA,QAAI,iBAAiB,SAAS,GAAG;AAChC,YAAM,kBAAkB;AAAA,QACvB,OAAO,2BAA2B,KAAK,EAAE,IAAI,CAAC,OAAO,OAAO,SAAS,EAAE,CAAC;AAAA,MACzE;AACA,UAAI,iBAAiB,MAAM,CAAC,MAAM,CAAC,gBAAgB,KAAK,CAAC,MAAM,EAAE,UAAU,EAAE,KAAK,CAAC,GAAG;AACrF,oCAA4B;AAAA,MAC7B;AAAA,IACD;AAGA,QAAI,eAAe,KAAK,CAAC,MAAM,OAAO,YAAY,OAAO,EAAE,EAAE,CAAC,EAAG;AAEjE,WAAO,eAAe,gBAAgB,MAAM,EAAE;AAE9C,QAAI,2BAA2B;AAC9B,iBAAW,KAAK,kBAAkB;AACjC,eAAO,YAAY;AAAA,UAClB,IAAI,EAAE;AAAA,UACN,MAAM,EAAE;AAAA,UACR,OAAO,eAAe,IAAI,EAAE,EAAE;AAAA,QAC/B,CAAC;AAAA,MACF;AAAA,IACD;AAAA,EACD;AAAA,EAES,gBACR,OACA,gBACA,MACO;AACP,UAAM,EAAE,OAAO,IAAI;AAGnB,QAAI,CAAC,KAAK,yBAAyB;AAElC,aAAO;AAAA,QACN,eAAe,OAAO,CAAC,MAAM,EAAE,aAAa,MAAM,EAAE;AAAA,QACpD,OAAO,iBAAiB;AAAA,MACzB;AAAA,IACD;AAAA,EACD;AACD;",
   "names": []
 }

package/dist-esm/version.mjs

@@ -1,8 +1,8 @@
-const version = "5.3.0-canary.50fed61679d4";
+const version = "5.3.0-canary.58df715967e7";
 const publishDates = {
   major: "2026-05-06T16:28:18.473Z",
-  minor: "2026-07-02T09:23:18.538Z",
-  patch: "2026-07-02T09:23:18.538Z"
+  minor: "2026-07-02T13:11:09.282Z",
+  patch: "2026-07-02T13:11:09.282Z"
 };
 export {
   publishDates,

package/dist-esm/version.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/version.ts"],
-  "sourcesContent": ["// This file is automatically generated by internal/scripts/refresh-assets.ts.\n// Do not edit manually. Or do, I'm a comment, not a cop.\n\nexport const version = '5.3.0-canary.50fed61679d4'\nexport const publishDates = {\n\tmajor: '2026-05-06T16:28:18.473Z',\n\tminor: '2026-07-02T09:23:18.538Z',\n\tpatch: '2026-07-02T09:23:18.538Z',\n}\n"],
+  "sourcesContent": ["// This file is automatically generated by internal/scripts/refresh-assets.ts.\n// Do not edit manually. Or do, I'm a comment, not a cop.\n\nexport const version = '5.3.0-canary.58df715967e7'\nexport const publishDates = {\n\tmajor: '2026-05-06T16:28:18.473Z',\n\tminor: '2026-07-02T13:11:09.282Z',\n\tpatch: '2026-07-02T13:11:09.282Z',\n}\n"],
   "mappings": "AAGO,MAAM,UAAU;AAChB,MAAM,eAAe;AAAA,EAC3B,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AACR;",
   "names": []
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tldraw/editor",
   "description": "tldraw infinite canvas SDK (editor).",
-  "version": "5.3.0-canary.50fed61679d4",
+  "version": "5.3.0-canary.58df715967e7",
   "author": {
     "name": "tldraw Inc.",
     "email": "hello@tldraw.com"
@@ -49,12 +49,12 @@
     "@tiptap/core": "^3.12.1",
     "@tiptap/pm": "^3.12.1",
     "@tiptap/react": "^3.12.1",
-    "@tldraw/state": "5.3.0-canary.50fed61679d4",
-    "@tldraw/state-react": "5.3.0-canary.50fed61679d4",
-    "@tldraw/store": "5.3.0-canary.50fed61679d4",
-    "@tldraw/tlschema": "5.3.0-canary.50fed61679d4",
-    "@tldraw/utils": "5.3.0-canary.50fed61679d4",
-    "@tldraw/validate": "5.3.0-canary.50fed61679d4",
+    "@tldraw/state": "5.3.0-canary.58df715967e7",
+    "@tldraw/state-react": "5.3.0-canary.58df715967e7",
+    "@tldraw/store": "5.3.0-canary.58df715967e7",
+    "@tldraw/tlschema": "5.3.0-canary.58df715967e7",
+    "@tldraw/utils": "5.3.0-canary.58df715967e7",
+    "@tldraw/validate": "5.3.0-canary.58df715967e7",
     "classnames": "^2.5.1",
     "eventemitter3": "^4.0.7",
     "idb": "^7.1.1",

package/src/lib/editor/shapes/BaseFrameLikeShapeUtil.tsx

@@ -5,7 +5,7 @@ import { BaseBoxShapeUtil, TLBaseBoxShape } from './BaseBoxShapeUtil'
 import { TLDragShapesInInfo, TLDragShapesOutInfo } from './ShapeUtil'
 
 /**
- * A base class for frame-like shapes — containers that clip their children,
+ * A base class for frame-like shapes — containers that clip their children except arrows,
  * require full-brush selection, block erasure from inside, and support
  * drag-and-drop reparenting.
  *
@@ -17,6 +17,7 @@ import { TLDragShapesInInfo, TLDragShapesOutInfo } from './ShapeUtil'
  * - `canReceiveNewChildrenOfType()` returns `true` unless the container is locked
  * - `canRemoveChildrenOfType()` returns `true` unless the container is locked
  * - `getClipPath()` returns the shape geometry's vertices
+ * - `shouldClipChild()` clips all children except arrows
  * - `onDragShapesIn()` reparents shapes into the frame (with index restoration)
  * - `onDragShapesOut()` reparents shapes back to the page
  *
@@ -69,6 +70,10 @@ export abstract class BaseFrameLikeShapeUtil<
 		return this.editor.getShapeGeometry(shape.id).vertices
 	}
 
+	override shouldClipChild(child: TLShape): boolean {
+		return child.type !== 'arrow'
+	}
+
 	override onDragShapesIn(
 		shape: Shape,
 		draggingShapes: TLShape[],

package/src/version.ts

@@ -1,9 +1,9 @@
 // This file is automatically generated by internal/scripts/refresh-assets.ts.
 // Do not edit manually. Or do, I'm a comment, not a cop.
 
-export const version = '5.3.0-canary.50fed61679d4'
+export const version = '5.3.0-canary.58df715967e7'
 export const publishDates = {
 	major: '2026-05-06T16:28:18.473Z',
-	minor: '2026-07-02T09:23:18.538Z',
-	patch: '2026-07-02T09:23:18.538Z',
+	minor: '2026-07-02T13:11:09.282Z',
+	patch: '2026-07-02T13:11:09.282Z',
 }