tldraw 5.5.0-next.f9308d324e1c → 5.5.0

package/DOCS.md

@@ -1,6 +1,6 @@
 # tldraw Documentation
 
-Version: `5.5.0-next.f9308d324e1c`
+Version: `5.5.0`
 
 This file is generated during package publishing from the tldraw docs content for this exact package version.
 
@@ -383,6 +383,7 @@ We ship an experimental `tldraw-migrate` agent skill that helps a coding agent u
 
 #### v5.x
 
+- [v5.4](https://tldraw.dev/releases/v5.4.0) - A center align operation, a tleditors registry of mounted editors, faster signals and store layers, and a broad reliability pass across the SDK
 - [v5.3](https://tldraw.dev/releases/v5.3.0) - Commenting with anchored threads on the canvas, new collaboration packages, geo shape flipping, crop snapping, and faster viewport culling
 - [v5.2](https://tldraw.dev/releases/v5.2.0) - Faster freehand ink, a frame selection action, SDK-wide performance improvements, and breaking changes to the collaborator user-id types and Node support
 - [v5.1](https://tldraw.dev/releases/v5.1.0) - Page menu redesign, copy-styles shortcut, selectable locked shapes, public translation APIs, and performance improvements
@@ -1198,7 +1199,7 @@ See [Collaboration](https://tldraw.dev/sdk-features/collaboration) for productio
 
 When you load a snapshot from an older schema version, the store migrates it automatically. For custom shapes, you can define migrations to handle changes to their props over time.
 
-See [Persistence](https://tldraw.dev/sdk-features/persistence#migrations) for details on shape props migrations and general migrations.
+See [Persistence](https://tldraw.dev/sdk-features/persistence#Migrations) for details on shape props migrations and general migrations.
 
 #### Examples
 
@@ -1418,7 +1419,7 @@ function MyApp() {
 }
 ```
 
-Comment records are opt-in, so register `commentSchemaRecords` on your server's schema too, and list the comment record types in the room's `objectTypes` (see [Comments and the object-store lane](https://tldraw.dev/docs/sync#comments-and-the-object-store-lane)). Commenting is a licensed feature. See the [commenting overview](https://tldraw.dev/docs/commenting) for an introduction, or the [commenting reference](https://tldraw.dev/sdk-features/commenting) for anchors, options, and server setup.
+Comment records are opt-in, so register `commentSchemaRecords` on your server's schema too, and list the comment record types in the room's `objectTypes` (see [Comments and the object-store lane](https://tldraw.dev/docs/sync#Comments-and-the-object-store-lane)). Commenting is a licensed feature. See the [commenting overview](https://tldraw.dev/docs/commenting) for an introduction, or the [commenting reference](https://tldraw.dev/sdk-features/commenting) for anchors, options, and server setup.
 
 #### Using other backends
 
@@ -1771,7 +1772,7 @@ import { CommentTool } from '@tldraw/commenting'
 const tools = [CommentTool.configure({ enableRegions: true })]
 ```
 
-The option worth knowing about first is `history`. Comment writes default to `'ignore'`, which keeps them off the undo stack, and that default matters in a shared document: an undoable resolve would revert a thread a collaborator has since reopened. Deletes are never undoable, whatever `history` says. See [Comments and undo](https://tldraw.dev/sdk-features/commenting#comments-and-undo).
+The option worth knowing about first is `history`. Comment writes default to `'ignore'`, which keeps them off the undo stack, and that default matters in a shared document: an undoable resolve would revert a thread a collaborator has since reopened. Deletes are never undoable, whatever `history` says. See [Comments and undo](https://tldraw.dev/sdk-features/commenting#Comments-and-undo).
 
 #### Permissions
 
@@ -1783,7 +1784,7 @@ They're UI-level controls and nothing more. Comment records carry a client-suppl
 
 Comments sync like the rest of your document, with one registration on each side. Pass `records: commentSchemaRecords` to your sync hook, and the same map to `createTLSchema` on the server.
 
-On the server you can go a step further and serve comments through the room's object-store lane. Lane records are gated by their own per-session permission rather than by `isReadonly`, which is how a viewer who can't edit the document can still comment. See [Syncing comments](https://tldraw.dev/sdk-features/commenting#syncing-comments).
+On the server you can go a step further and serve comments through the room's object-store lane. Lane records are gated by their own per-session permission rather than by `isReadonly`, which is how a viewer who can't edit the document can still comment. See [Syncing comments](https://tldraw.dev/sdk-features/commenting#Syncing-comments).
 
 #### Related
 
@@ -2093,7 +2094,7 @@ function MyApp() {
 Use `createTLSchema` to create a store schema, and pass that into `TLSocketRoom`. You can
 use shape/binding utils here, but the schema only reads three properties:
 [`props`](https://tldraw.dev/reference/editor/ShapeUtil#props), `meta`, and
-[`migrations`](https://tldraw.dev/sdk-features/persistence#migrations). You need to provide the default shape
+[`migrations`](https://tldraw.dev/sdk-features/persistence#Migrations). You need to provide the default shape
 schemas if you're using them.
 
 ```tsx
@@ -2489,12 +2490,12 @@ By default the diagram is centered on the viewport, or on the pointer when the u
 
 #### Supported diagram types
 
-| Diagram type     | Mermaid keyword                   | What you get                                                            |
-| ---------------- | --------------------------------- | ----------------------------------------------------------------------- |
-| Flowchart        | `flowchart`, `graph`              | Geo shapes, arrows, subgraph containers                                 |
-| Sequence diagram | `sequenceDiagram`                 | Actor shapes, lifelines, signal arrows, fragment containers             |
-| State diagram    | `stateDiagram`, `stateDiagram-v2` | State shapes, transitions, compound state containers, fork/join, choice |
-| Mindmap          | `mindmap`                         | Colored geo shapes, parent-child edges, tree hierarchy                  |
+| Diagram type     | Mermaid keyword                   | What you get                                                                   |
+| ---------------- | --------------------------------- | ------------------------------------------------------------------------------ |
+| Flowchart        | `flowchart`, `graph`              | Geo shapes, arrows, subgraph containers                                        |
+| Sequence diagram | `sequenceDiagram`                 | Actor shapes, lifelines, signal arrows, fragment containers, participant boxes |
+| State diagram    | `stateDiagram`, `stateDiagram-v2` | State shapes, transitions, compound state containers, fork/join, choice        |
+| Mindmap          | `mindmap`                         | Colored geo shapes, parent-child edges, tree hierarchy                         |
 
 Subgraphs, fragments, and compound states become geo rectangles with their child shapes parented to them.
 
@@ -2917,7 +2918,7 @@ For example, see `src/components/WhiteboardModal.tsx:92` for UI component overri
 
 #### Further reading
 
-- **[Custom shape utilities](https://tldraw.dev/docs/shapes#custom-shapes)**: Learn how to create custom shapes with their own interactions.
+- **[Custom shape utilities](https://tldraw.dev/docs/shapes#Custom-shapes)**: Learn how to create custom shapes with their own interactions.
 
 - **[Editor API](https://tldraw.dev/docs/editor)**: Learn about the tldraw Editor.
 
@@ -3453,14 +3454,14 @@ The system prompt is rebuilt for each step in the agentic loop depending on whic
 You can set an agent's model by calling `setModelName` on the `modelName` manager.
 
 ```tsx
-agent.modelName.setModelName('gemini-3-flash-preview')
+agent.modelName.setModelName('gemini-3.8-flash')
 ```
 
 To override an agent's model, specify a different model name with a request.
 
 ```tsx
 agent.prompt({
-	modelName: 'gemini-3-flash-preview',
+	modelName: 'gemini-3.8-flash',
 	message: 'Draw a diagram of a volcano.',
 })
 ```
@@ -3469,7 +3470,7 @@ You can conditionally override the model name by overriding the `getModelName()`
 
 ```tsx
 override getModelName(part: MyCustomPromptPart) {
-	return part.fastMode ? 'gemini-3-flash-preview' : 'claude-sonnet-4-5'
+	return part.fastMode ? 'gemini-3.8-flash' : 'claude-sonnet-5'
 }
 ```
 
@@ -3478,10 +3479,14 @@ override getModelName(part: MyCustomPromptPart) {
 To add support for a different model, add the model's definition to `AGENT_MODEL_DEFINITIONS` in the `shared/models.ts` file.
 
 ```tsx
-'claude-sonnet-4-5': {
-	name: 'claude-sonnet-4-5',
-	id: 'claude-sonnet-4-5',
+'claude-sonnet-5': {
+	name: 'claude-sonnet-5',
+	id: 'claude-sonnet-5',
 	provider: 'anthropic',
+	supportsPrefill: false,
+	supportsTemperature: false,
+	thinking: 'adaptive',
+	effort: 'low',
 }
 ```
 
@@ -3489,7 +3494,7 @@ If you need to add any extra setup or configuration for your provider, you can a
 
 ##### Support custom shapes
 
-If your app includes [custom shapes](https://tldraw.dev/docs/shapes#custom-shapes), the agent will be able to see, move, delete, resize, rotate and arrange them with no extra setup. However, you might want to also let the agent create and edit them, and read their custom properties.
+If your app includes [custom shapes](https://tldraw.dev/docs/shapes#Custom-shapes), the agent will be able to see, move, delete, resize, rotate and arrange them with no extra setup. However, you might want to also let the agent create and edit them, and read their custom properties.
 
 To support custom shapes, you have two main options:
 
@@ -3666,7 +3671,7 @@ export function convertFocusedShapeToTldrawShape(
 
 - **[Multiplayer starter kit](https://tldraw.dev/starter-kits/multiplayer)**: Use the tldraw multiplayer sync starter kit to build multi-user agent environments.
 
-- **[Shape utilities](https://tldraw.dev/docs/shapes#custom-shapes)**: Learn how to create custom shapes and extend tldraw's shape system with advanced geometry, rendering, and interaction patterns.
+- **[Shape utilities](https://tldraw.dev/docs/shapes#Custom-shapes)**: Learn how to create custom shapes and extend tldraw's shape system with advanced geometry, rendering, and interaction patterns.
 
 - **[Editor state management](https://tldraw.dev/docs/editor)**: Learn how to work with tldraw's reactive state system, editor lifecycle, and event handling for complex canvas applications.
 
@@ -3870,7 +3875,7 @@ See `client/connection/ConnectionBindingUtil.tsx` as an example. This file demon
 #### Further reading
 
 - [Workflow starter kit](https://tldraw.dev/starter-kits/workflow): Learn how to build visual programming interfaces with node-based workflows on infinite canvas.
-- [Shape utilities](https://tldraw.dev/docs/shapes#custom-shapes): Learn how to create custom shapes and extend tldraw's shape system with advanced geometry, rendering, and interaction patterns.
+- [Shape utilities](https://tldraw.dev/docs/shapes#Custom-shapes): Learn how to create custom shapes and extend tldraw's shape system with advanced geometry, rendering, and interaction patterns.
 - [Binding system](https://tldraw.dev/sdk-features/bindings): Learn more about tldraw's binding system for creating relationships between shapes, automatic updates, and connection management.
 - [Editor state management](https://tldraw.dev/docs/editor): Learn how to work with tldraw's reactive state system, editor lifecycle, and event handling for complex canvas applications.
 
@@ -4198,7 +4203,7 @@ See [`src/fluid/FluidManager.ts`](https://github.com/tldraw/tldraw/tree/main/tem
 
 #### Further reading
 
-For multi-user shader environments, see the [Multiplayer starter kit](https://tldraw.dev/starter-kits/multiplayer). To create custom shapes with advanced geometry and rendering, see [Shape utilities](https://tldraw.dev/docs/shapes#custom-shapes). For working with tldraw's reactive state system and event handling, see [Editor state management](https://tldraw.dev/docs/editor).
+For multi-user shader environments, see the [Multiplayer starter kit](https://tldraw.dev/starter-kits/multiplayer). To create custom shapes with advanced geometry and rendering, see [Shape utilities](https://tldraw.dev/docs/shapes#Custom-shapes). For working with tldraw's reactive state system and event handling, see [Editor state management](https://tldraw.dev/docs/editor).
 
 ---
 
@@ -4651,6 +4656,10 @@ kbd: 'cmd+shift+s,ctrl+shift+s' // Cmd+Shift+S or Ctrl+Shift+S
 
 Modifiers are `cmd` (alias `meta`), `ctrl`, `shift`, and `alt` (alias `option`). Special keys include `del`, `backspace`, `enter`, `escape`, `space`, and the arrow keys (`left`, `right`, `up`, `down`).
 
+To bind the `+` key itself, double the trailing plus: `cmd++`. That matches an unshifted `+` key (German, Nordic and similar layouts, or the numpad). On layouts where `+` is shift plus another key, such as US, write `cmd+shift++`, which is the same binding as `cmd+shift+=`.
+
+Shortcuts match the character the browser reports for the key press, not the physical keycap, with two exceptions: shifted number-row keys match by position, so write them as `shift+<digit>` on every layout, and when the reported character is non-ASCII (Cyrillic, Greek, macOS Option dead keys) matching falls back to the physical key's US QWERTY character, so `cmd+z` still works on a Russian layout. With shift held, the shifted and unshifted US spellings are the same binding, so `shift+:` and `shift+;` both fire when the browser reports `:` with shift held. Bind what the keyboard emits, not what the keycap says: on French AZERTY the `:` key emits `/` with shift held, so bind `shift+/`; on Japanese JIS the `^` key emits `~`, so bind `shift+~`. The characters `!`, `?` and `$` are reserved as legacy modifier markers and cannot be used as keys.
+
 Shortcuts only fire while the editor is focused and the key event does not target a text input. They are also disabled when a menu is open, a shape is being edited, the editor has a crashing error, or the user has disabled keyboard shortcuts in preferences. In readonly mode, only actions with `readonlyOk` are bound. Actions marked with `isRequiredA11yAction: true` bypass the disabled check for accessibility purposes.
 
 #### Actions in menus
@@ -5336,6 +5345,28 @@ Attribution is opt-in per shape type. Each shape util decides what to track and
 
 The built-in note shape tracks who last edited its text. Whenever a note's rich text changes and is non-empty, `NoteShapeUtil` sets the `textLastEditedBy` prop to the current user's ID via `editor.getAttributionUserId()`. Clearing the text resets it to `null`, and duplicating or pasting a note with text re-stamps the copy to the current user. The note renders the last editor's first name as a small label in the corner.
 
+The label is rendered by the note shape util's `AttributionComponent` option, which you can override or hide with `NoteShapeUtil.configure`, passed through the `shapeUtils` prop. This applies on the canvas and in image exports:
+
+```tsx
+import { NoteShapeUtil, Tldraw } from 'tldraw'
+
+// Hide the attribution badge
+;<Tldraw shapeUtils={[NoteShapeUtil.configure({ AttributionComponent: null })]} />
+
+// Or render your own
+;<Tldraw
+	shapeUtils={[
+		NoteShapeUtil.configure({
+			AttributionComponent: ({ firstName, color }) => (
+				<div className="tl-note__attribution" style={{ color }}>
+					✍️ {firstName}
+				</div>
+			),
+		}),
+	]}
+/>
+```
+
 #### Reading attribution
 
 The `Editor` provides three methods for working with attribution. `Editor#getAttributionUserId` returns the current user's raw ID string (without the `user:` prefix). `Editor#getAttributionDisplayName` and `Editor#getAttributionUser` check the `TLUserStore` first, then fall back to `user:` records in the store:
@@ -5432,7 +5463,7 @@ Custom metadata is validated and persisted alongside the standard user fields. A
 | `createCachedUserResolve`          | Create a cached resolve function for `TLUserStore`                      |
 | `createUserRecordType`             | Build a user record type with custom meta validators                    |
 
-For setting up user identity in multiplayer, see the [Collaboration](https://tldraw.dev/sdk-features/collaboration#user-identity) page.
+For setting up user identity in multiplayer, see the [Collaboration](https://tldraw.dev/sdk-features/collaboration#User-identity) page.
 
 #### Related examples
 
@@ -5694,7 +5725,7 @@ editor.setCameraOptions({
 
 Set `isLocked` to freeze the camera for fixed-viewport apps. Camera methods then do nothing unless you pass `force: true`.
 
-`wheelBehavior` decides what the mouse wheel or trackpad scroll does: `'pan'`, `'zoom'`, or `'none'`. If the user has set an input mode in their preferences, that preference wins: `'trackpad'` pans and `'mouse'` zooms.
+`wheelBehavior` decides what the mouse wheel or trackpad scroll does: `'pan'`, `'zoom'`, or `'none'`. If the user has set an input mode in their preferences, that preference wins between the two: `'trackpad'` pans and `'mouse'` zooms. `'none'` disables the wheel regardless of the preference.
 
 `panSpeed` and `zoomSpeed` are multipliers on input sensitivity. Values below 1 slow movement down, values above 1 speed it up.
 
@@ -6066,6 +6097,18 @@ This makes the content portable across editor instances without relying on URLs
 
 Cut combines copy and delete. The editor first copies the selected shapes to the clipboard, then deletes the originals, so a failed copy leaves your shapes intact.
 
+##### Pasting a link onto a shape
+
+A url on the clipboard normally becomes a bookmark or an embed. When a single shape that can hold a link is selected — a geo, note, image, video, or bookmark shape — the url becomes that shape's link instead, and nothing is created. Embed shapes are excluded, since their `url` is the embedded content's source.
+
+The clipboard signals this by setting `shapeId` on the `url` external content, so a custom `url` handler can take over or ignore it:
+
+```ts
+editor.registerExternalContentHandler('url', async ({ url, point, shapeId }) => {
+	// ignore shapeId to always create a bookmark
+})
+```
+
 ##### Plain text paste
 
 `Cmd+Shift+V` (or `Ctrl+Shift+V` on Windows and Linux) pastes the clipboard as plain text. HTML and rich formatting are stripped. This is the standard "paste without formatting" shortcut. It's handy when styled text from a browser or word processor would otherwise bring its fonts and colors onto the canvas with it. If the clipboard has no plain text (a copied PNG, say), the shortcut falls through to the normal paste.
@@ -7575,7 +7618,7 @@ class MyShapeUtil extends ShapeUtil<MyShape> {
 }
 ```
 
-Shapes whose util overrides `canCull` are subscribed to individually inside the culling derivation, so a `canCull` that reads many props re-runs the derivation more often. Shapes using the default fast path don't pay this cost. Disable culling only for shapes that need it: visual effects that extend past the bounds, shapes that measure their DOM, or animations that should keep running off-screen. See [Performance](https://tldraw.dev/sdk-features/performance#disable-culling-only-when-necessary) for guidance.
+Shapes whose util overrides `canCull` are subscribed to individually inside the culling derivation, so a `canCull` that reads many props re-runs the derivation more often. Shapes using the default fast path don't pay this cost. Disable culling only for shapes that need it: visual effects that extend past the bounds, shapes that measure their DOM, or animations that should keep running off-screen. See [Performance](https://tldraw.dev/sdk-features/performance#Disable-culling-only-when-necessary) for guidance.
 
 #### Related examples
 
@@ -7748,7 +7791,7 @@ export default function App() {
 }
 ```
 
-Remote users' chat messages render as part of the collaborator cursor, in the DOM cursor layer. To customize how they appear, replace the `CollaboratorCursor` component. See [Cursors](https://tldraw.dev/sdk-features/cursors#rendering-collaborator-cursors) for details.
+Remote users' chat messages render as part of the collaborator cursor, in the DOM cursor layer. To customize how they appear, replace the `CollaboratorCursor` component. See [Cursors](https://tldraw.dev/sdk-features/cursors#Rendering-collaborator-cursors) for details.
 
 #### Availability
 
@@ -8541,7 +8584,7 @@ const ConfiguredFrameUtil = FrameShapeUtil.configure({
 })
 ```
 
-To build your own container shape that behaves like a frame, extend `BaseFrameLikeShapeUtil` rather than re-implementing every behavior on `FrameShapeUtil`. The base class provides defaults for clipping children, full-brush selection, blocking erasure from inside, and drag-and-drop reparenting — see [Shapes](https://tldraw.dev/sdk-features/shapes#frames) for details and the [portal shapes example](https://tldraw.dev/examples/shapes/tools/portal-shapes) for a working implementation.
+To build your own container shape that behaves like a frame, extend `BaseFrameLikeShapeUtil` rather than re-implementing every behavior on `FrameShapeUtil`. The base class provides defaults for clipping children, full-brush selection, blocking erasure from inside, and drag-and-drop reparenting — see [Shapes](https://tldraw.dev/sdk-features/shapes#Frames) for details and the [portal shapes example](https://tldraw.dev/examples/shapes/tools/portal-shapes) for a working implementation.
 
 ##### Group
 
@@ -9154,8 +9197,8 @@ The geometry uses the processed stroke points (after applying streamline and smo
 
 #### Related shapes
 
-- [Highlight](https://tldraw.dev/sdk-features/default-shapes#highlight) uses the same point capture system but renders semi-transparently for marking up content
-- [Line](https://tldraw.dev/sdk-features/default-shapes#line) creates editable multi-point lines with draggable handles
+- [Highlight](https://tldraw.dev/sdk-features/default-shapes#Highlight) uses the same point capture system but renders semi-transparently for marking up content
+- [Line](https://tldraw.dev/sdk-features/default-shapes#Line) creates editable multi-point lines with draggable handles
 
 #### Related articles
 
@@ -9623,7 +9666,7 @@ editor.updateInstanceState({ isReadonly: true })
 editor.updateInstanceState({ isToolLocked: true })
 ```
 
-See [Tools](https://tldraw.dev/sdk-features/tools#tool-lock) for more on tool lock.
+See [Tools](https://tldraw.dev/sdk-features/tools#Tool-lock) for more on tool lock.
 
 Each page also has instance state (`TLInstancePageState`) tracking selection, hovered shape, and editing shape for that page:
 
@@ -9764,7 +9807,7 @@ The shape stores the original URL and renders the embed version.
 
 #### Fallback to bookmarks
 
-When you paste a URL that no embed definition recognizes, the default URL handler creates a [bookmark shape](https://tldraw.dev/sdk-features/default-shapes#bookmark) instead of an embed. An existing embed shape whose URL doesn't match any definition still renders the URL in an iframe, using the stricter sandbox for unknown sources.
+When you paste a URL that no embed definition recognizes, the default URL handler creates a [bookmark shape](https://tldraw.dev/sdk-features/default-shapes#Bookmark) instead of an embed. An existing embed shape whose URL doesn't match any definition still renders the URL in an iframe, using the stricter sandbox for unknown sources.
 
 Use `getEmbedInfo` to check whether a URL is embeddable before creating a shape:
 
@@ -9879,7 +9922,7 @@ export default function App() {
 
 #### Embed-on-paste behavior
 
-By default, pasting a URL from a supported service creates an embed shape. Set `embedOnPaste: false` in the embed definition to create a bookmark instead.
+By default, pasting a URL from a supported service creates an embed shape. Set `embedOnPaste: false` in the embed definition to create a bookmark instead. Pasting while a single shape that can hold a link is selected sets that shape's link rather than creating either.
 
 The tldraw embed definition sets `embedOnPaste: false`, so pasting a tldraw.com URL creates a bookmark. Separately, embed shapes refuse to render a nested tldraw canvas when the page itself is running inside an iframe, which prevents infinite nesting.
 
@@ -9898,7 +9941,7 @@ Embed shapes render as blank rectangles in SVG exports. The iframe content can't
 #### Related articles
 
 - [Default shapes](https://tldraw.dev/sdk-features/default-shapes) — Overview of all built-in shape types
-- [Bookmark shape](https://tldraw.dev/sdk-features/default-shapes#bookmark) — URL link cards (fallback for non-embeddable URLs)
+- [Bookmark shape](https://tldraw.dev/sdk-features/default-shapes#Bookmark) — URL link cards (fallback for non-embeddable URLs)
 - [External content handling](https://tldraw.dev/sdk-features/external-content) — Handling pasted and dropped content
 - [Custom embeds example](https://tldraw.dev/examples/configuration/custom-embed) — Add a custom embed definition for a new service
 
@@ -10855,7 +10898,7 @@ Empty names render as `Frame` so unnamed frames still get a label. The shape's `
 
 Frames clip their children to the frame's rectangle during rendering. A shape that extends past the frame edge is rendered up to the boundary and then cut off. Clipping doesn't change the child's geometry or its own bounds, but hit testing respects the mask: you can't click the clipped-off part of a shape, and `Editor#getShapeMaskedPageBounds` returns only the visible portion. Arrows are exempt from clipping so connectors can leave a frame.
 
-The `BaseFrameLikeShapeUtil` base class implements clipping via `getClipPath` and the arrow exemption via `shouldClipChild`. If you need clipping for a custom container shape, see the [Frames](https://tldraw.dev/sdk-features/shapes#frames) section in the Shapes guide.
+The `BaseFrameLikeShapeUtil` base class implements clipping via `getClipPath` and the arrow exemption via `shouldClipChild`. If you need clipping for a custom container shape, see the [Frames](https://tldraw.dev/sdk-features/shapes#Frames) section in the Shapes guide.
 
 #### Shape properties
 
@@ -10947,8 +10990,8 @@ Reach for a frame when you want a labeled, bounded region: a slide, a screen, an
 
 #### Related articles
 
-- [Shapes](https://tldraw.dev/sdk-features/shapes#frames) — How to build your own container shape with `BaseFrameLikeShapeUtil`
-- [Default shapes](https://tldraw.dev/sdk-features/default-shapes#frame) — Overview of all built-in shapes
+- [Shapes](https://tldraw.dev/sdk-features/shapes#Frames) — How to build your own container shape with `BaseFrameLikeShapeUtil`
+- [Default shapes](https://tldraw.dev/sdk-features/default-shapes#Frame) — Overview of all built-in shapes
 - [Shape clipping](https://tldraw.dev/sdk-features/shape-clipping) — How custom shapes can clip their children
 - [Image export](https://tldraw.dev/sdk-features/image-export) — Exporting frames and selections as images
 - [Parenting](https://tldraw.dev/sdk-features/parenting) — How shapes are nested inside containers
@@ -13213,7 +13256,7 @@ When tool lock is enabled, the current tool stays active after creating a shape
 editor.updateInstanceState({ isToolLocked: true })
 ```
 
-Custom tools should check this property to decide whether to return to select after completing their action. See [Tools](https://tldraw.dev/sdk-features/tools#tool-lock) for implementation details.
+Custom tools should check this property to decide whether to return to select after completing their action. See [Tools](https://tldraw.dev/sdk-features/tools#Tool-lock) for implementation details.
 
 ##### Cursor customization
 
@@ -13272,7 +13315,7 @@ When you switch pages, the instance's `currentPageId` changes, but each page ret
 - [Cursors](https://tldraw.dev/sdk-features/cursors) — Cursor types and rotation handling
 - [Readonly mode](https://tldraw.dev/sdk-features/readonly) — Disable editing with `isReadonly`
 - [Focus](https://tldraw.dev/sdk-features/focus) — Editor focus state with `isFocused`
-- [Tools](https://tldraw.dev/sdk-features/tools#tool-lock) — Tool lock behavior with `isToolLocked`
+- [Tools](https://tldraw.dev/sdk-features/tools#Tool-lock) — Tool lock behavior with `isToolLocked`
 - [User preferences](https://tldraw.dev/sdk-features/user-preferences) — Global preferences that persist across editor instances
 
 #### Related examples
@@ -13713,7 +13756,7 @@ Even with `ignoreShapeLock: true`, some behaviors remain unchanged: locked shape
 
 Some shapes have interactive content that should remain usable even when locked. Embed shapes (YouTube videos, Figma files, interactive maps) are a good example: you might want the embed locked in place but still playable or navigable.
 
-[ShapeUtils](https://tldraw.dev/sdk-features/shapes#shapeutil) can override `ShapeUtil#canEditWhileLocked` (default `false`) to allow editing interactions on locked shapes. The built-in embed shape returns `true` unless its embed definition says otherwise:
+[ShapeUtils](https://tldraw.dev/sdk-features/shapes#ShapeUtil) can override `ShapeUtil#canEditWhileLocked` (default `false`) to allow editing interactions on locked shapes. The built-in embed shape returns `true` unless its embed definition says otherwise:
 
 ```typescript
 class MyInteractiveShapeUtil extends ShapeUtil<MyShape> {
@@ -13820,9 +13863,10 @@ The note's text color is determined by its `labelColor` property. When set to `'
 
 Notes support the following configuration options:
 
-| Option       | Type                  | Default  | Description                                                       |
-| ------------ | --------------------- | -------- | ----------------------------------------------------------------- |
-| `resizeMode` | `'none'` \| `'scale'` | `'none'` | How the note resizes. Set to `'scale'` for manual resize handles. |
+| Option                 | Type                                                   | Default                       | Description                                                                                       |
+| ---------------------- | ------------------------------------------------------ | ----------------------------- | ------------------------------------------------------------------------------------------------- |
+| `resizeMode`           | `'none'` \| `'scale'`                                  | `'none'`                      | How the note resizes. Set to `'scale'` for manual resize handles.                                 |
+| `AttributionComponent` | `ComponentType<TLNoteShapeAttributionProps>` \| `null` | `DefaultNoteShapeAttribution` | Component for the attribution badge. Set to `null` to hide it, or provide your own to replace it. |
 
 By default, notes can't be manually resized—they only grow based on text content. To allow user resizing with locked aspect ratio:
 
@@ -13845,9 +13889,13 @@ export default function App() {
 
 See the [note resizing example](https://tldraw.dev/examples/configuration/resize-note) for a working demo. Other display values, such as `noteWidth`, `noteHeight`, and colors, can be customized through the display value hooks on `NoteShapeUtil` options; see [Themes](https://tldraw.dev/sdk-features/themes).
 
+##### Attribution badge
+
+Notes show the name of the user who last edited their text as a small badge in the corner. This badge is rendered by the `AttributionComponent` option above, which you can override or hide with `NoteShapeUtil.configure`—it applies on the canvas and in image exports. See [attribution](https://tldraw.dev/sdk-features/attribution) for details.
+
 #### Dynamic resize mode
 
-When `editor.user.getIsDynamicResizeMode()` is true, new notes are created at a scale inversely proportional to the current zoom level, so they stay visually consistent regardless of zoom. `Editor#getResizeScaleFactor` returns that scale. See [Text shape](https://tldraw.dev/sdk-features/text-shape#dynamic-resize-mode) for details.
+When `editor.user.getIsDynamicResizeMode()` is true, new notes are created at a scale inversely proportional to the current zoom level, so they stay visually consistent regardless of zoom. `Editor#getResizeScaleFactor` returns that scale. See [Text shape](https://tldraw.dev/sdk-features/text-shape#Dynamic-resize-mode) for details.
 
 #### Related articles
 
@@ -13926,7 +13974,7 @@ Control when pointer movement becomes a drag operation:
 | `uiDragDistanceSquared`       | 16      | Distance² for UI element drag (4px)      |
 | `uiCoarseDragDistanceSquared` | 625     | Distance² for touch UI drag (25px)       |
 
-Values are squared to avoid computing square roots during drag detection. The larger touch thresholds prevent accidental drags on mobile devices.
+Values are squared to avoid computing square roots during drag detection. The larger touch thresholds prevent accidental drags on mobile devices. The UI thresholds govern dragging a tool out of the toolbar. A drag starts once the pointer has left the toolbar, so they matter only for presses that begin near its edge.
 
 ##### Handle and hit testing
 
@@ -14180,7 +14228,7 @@ function App() {
 }
 ```
 
-See [Embed shape](https://tldraw.dev/sdk-features/embed-shape#custom-embed-definitions) for the full embed definition API.
+See [Embed shape](https://tldraw.dev/sdk-features/embed-shape#Custom-embed-definitions) for the full embed definition API.
 
 ##### Editor setup
 
@@ -15725,7 +15773,7 @@ TipTap handles the rich text editing experience. The editor appears when users d
 
 ##### Default extensions
 
-`tipTapDefaultExtensions` is TipTap's StarterKit plus tldraw's customizations: the `Highlight` mark, a Shift+Enter tweak, and automatic text direction for right-to-left languages. StarterKit is configured to disable blockquotes, code blocks, and horizontal rules; headings, lists, links, and the standard marks stay on. Links don't open on click during editing, which prevents accidental navigation.
+`tipTapDefaultExtensions` is TipTap's StarterKit plus tldraw's customizations: the `Highlight` mark, TipTap's `Typography` rules, `WrapSelectionExtension`, a Shift+Enter tweak, and automatic text direction for right-to-left languages. StarterKit is configured to disable blockquotes, code blocks, and horizontal rules; headings, lists, links, and the standard marks stay on. Links don't open on click during editing, which prevents accidental navigation.
 
 To tweak StarterKit without losing tldraw's extensions, build the list with `getTipTapDefaultExtensions`, which accepts StarterKit options:
 
@@ -15736,13 +15784,26 @@ import { getTipTapDefaultExtensions } from 'tldraw'
 const extensions = getTipTapDefaultExtensions({ heading: false })
 ```
 
+##### Typography
+
+Typography rewrites punctuation as it's typed: quotes curl, `--` becomes an em dash, `...` an ellipsis, `->` an arrow. Backspace immediately after a rewrite restores what was typed. `WrapSelectionExtension` handles the other half: with text selected, typing either half of a bracket or quote pair wraps the selection rather than replacing it, so selecting `hello` and pressing `¡` — or the `!` that closes it, which is on every keyboard — gives `¡hello!`. See `defaultWrappingPairs` for the pairs, which the extension's `pairs` option replaces.
+
+Code is the exception to both. Typing inside inline code, or between a backtick and the closing one that turns the text into code, leaves punctuation as typed, so `` `say "hi"` `` keeps its straight quotes. Wrapping code in quotes uses straight ones too, and a backtick over a selection toggles the code mark on it instead of wrapping it in literal backticks. Text in a monospace font, such as a shape with the mono font, keeps straight quotes as well, both when typed and when wrapping; the other rewrites still apply there.
+
+To opt out of either, filter it from the list — both are separate entries in the array, unlike the StarterKit sub-extensions:
+
+```typescript
+import { getTipTapDefaultExtensions } from 'tldraw'
+
+const extensions = getTipTapDefaultExtensions().filter((e) => e.name !== 'typography')
+```
+
 ##### Custom extensions
 
 You can add custom TipTap extensions through the `text` field of the `options` prop on the Tldraw component (`TLTextOptions`):
 
 ```tsx
-import { Mark, mergeAttributes } from '@tiptap/core'
-import { Tldraw, tipTapDefaultExtensions } from 'tldraw'
+import { Mark, Tldraw, mergeAttributes, tipTapDefaultExtensions } from 'tldraw'
 import 'tldraw/tldraw.css'
 
 const CustomMark = Mark.create({
@@ -15782,6 +15843,26 @@ export default function App() {
 
 The `extensions` array replaces the default list entirely, so spread `tipTapDefaultExtensions` (or the result of `getTipTapDefaultExtensions`) to keep tldraw's defaults. Passing `[StarterKit, CustomMark]` alone drops highlighting and text direction, and StarterKit's default link config opens links on click while editing.
 
+##### Importing TipTap
+
+Import TipTap's building blocks from `tldraw` rather than installing `@tiptap/*` alongside it. tldraw re-exports `Node`, `Mark`, `Extension`, `mergeAttributes`, `getSchema`, the `Extensions` and `JSONContent` types, and the `TaskList` and `TaskItem` extensions from the copy it bundles. Installing your own copy can resolve to a second `@tiptap/core` and ProseMirror, and ProseMirror throws when a schema is built from nodes belonging to two different instances.
+
+Task lists aren't part of the default extension set. Add them yourself, along with styles for the checkboxes, which tldraw doesn't provide:
+
+```tsx
+import { TaskItem, TaskList, tipTapDefaultExtensions } from 'tldraw'
+
+const options = {
+	text: {
+		tipTapConfig: {
+			extensions: [...tipTapDefaultExtensions, TaskList, TaskItem.configure({ nested: true })],
+		},
+	},
+}
+```
+
+Extensions tldraw doesn't re-export still need their own package. Install them at the same TipTap version tldraw depends on so your package manager dedupes `@tiptap/core` down to a single copy.
+
 ##### Rich text toolbar
 
 The rich text toolbar appears when editing any rich-text shape (it's hidden on touch devices). It gives you quick access to formatting commands like bold, italic, and lists, and shows which formats are active at the current cursor position.
@@ -15890,7 +15971,7 @@ The chain API lets you compose multiple operations. Each command returns a chain
 For operations outside the editing context, you can manipulate the rich text JSON directly. `TLRichText.content` is typed as `unknown[]`, so cast to TipTap's `JSONContent` when walking the tree:
 
 ```typescript
-import { JSONContent } from '@tiptap/core'
+import { JSONContent } from 'tldraw'
 
 function makeAllTextBold(richText: TLRichText): TLRichText {
 	const content = (richText.content as JSONContent[]).map((paragraph) => {
@@ -18085,7 +18166,7 @@ Snapshots include schema version information. When you load a snapshot from an o
 const migrated = editor.store.migrateSnapshot(oldSnapshot)
 ```
 
-The migration system handles schema changes between tldraw versions. You can also define migrations for custom shape props and custom record types. See [persistence](https://tldraw.dev/sdk-features/persistence#migrations) for details.
+The migration system handles schema changes between tldraw versions. You can also define migrations for custom shape props and custom record types. See [persistence](https://tldraw.dev/sdk-features/persistence#Migrations) for details.
 
 #### Queries
 
@@ -20445,7 +20526,7 @@ export default function App() {
 
 Preferences cover visual settings (color scheme, animation speed), interaction settings (snap mode, edge scroll speed), and identity (user name, color, locale). By default the editor stores them in localStorage and syncs them across tabs with a BroadcastChannel.
 
-To supply preferences from your own auth or state instead, pass a `user` created with `useTldrawCurrentUser` (or `createTLCurrentUser`) to the `Tldraw` component. Preferences you provide this way are yours to persist and sync. See [Collaboration](https://tldraw.dev/sdk-features/collaboration#integrating-with-usetldrawcurrentuser) for a full example.
+To supply preferences from your own auth or state instead, pass a `user` created with `useTldrawCurrentUser` (or `createTLCurrentUser`) to the `Tldraw` component. Preferences you provide this way are yours to persist and sync. See [Collaboration](https://tldraw.dev/sdk-features/collaboration#Integrating-with-useTldrawCurrentUser) for a full example.
 
 #### Reading preferences
 
@@ -20526,7 +20607,7 @@ const isDark = editor.user.getIsDarkMode()
 // true if colorScheme is 'dark', or 'system' with OS in dark mode
 ```
 
-The editor-level `colorScheme` prop sets the default color scheme. When a user preference is set, it takes priority over the prop. See [Themes](https://tldraw.dev/sdk-features/themes#color-mode) for more.
+The editor-level `colorScheme` prop sets the default color scheme. When a user preference is set, it takes priority over the prop. See [Themes](https://tldraw.dev/sdk-features/themes#Color-mode) for more.
 
 #### Persistence and synchronization
 
@@ -20910,31 +20991,32 @@ This covers the runtime dependencies that the `@tldraw/*` packages declare direc
 
 #### Dependencies
 
-| Dependency                                                          | Version | License | Used by                                      |
-| ------------------------------------------------------------------- | ------- | ------- | -------------------------------------------- |
-| [@tiptap/core](https://github.com/ueberdosis/tiptap)                | 3.13.0  | MIT     | `commenting`, `editor`, `mentions`, `tldraw` |
-| [@tiptap/extension-code](https://github.com/ueberdosis/tiptap)      | 3.13.0  | MIT     | `tldraw`                                     |
-| [@tiptap/extension-highlight](https://github.com/ueberdosis/tiptap) | 3.13.0  | MIT     | `tldraw`                                     |
-| [@tiptap/extension-list](https://github.com/ueberdosis/tiptap)      | 3.13.0  | MIT     | `tldraw`                                     |
-| [@tiptap/extension-mention](https://github.com/ueberdosis/tiptap)   | 3.13.0  | MIT     | `mentions`                                   |
-| [@tiptap/pm](https://github.com/ueberdosis/tiptap)                  | 3.13.0  | MIT     | `commenting`, `editor`, `mentions`, `tldraw` |
-| [@tiptap/react](https://github.com/ueberdosis/tiptap)               | 3.13.0  | MIT     | `commenting`, `editor`, `mentions`, `tldraw` |
-| [@tiptap/starter-kit](https://github.com/ueberdosis/tiptap)         | 3.13.0  | MIT     | `tldraw`                                     |
-| [@tiptap/suggestion](https://github.com/ueberdosis/tiptap)          | 3.13.0  | MIT     | `mentions`                                   |
-| [classnames](https://github.com/JedWatson/classnames)               | 2.5.1   | MIT     | `editor`, `tldraw`                           |
-| [eventemitter3](https://github.com/primus/eventemitter3)            | 4.0.7   | MIT     | `editor`                                     |
-| [idb](https://github.com/jakearchibald/idb)                         | 7.1.1   | ISC     | `editor`, `tldraw`                           |
-| [is-plain-object](https://github.com/jonschlinkert/is-plain-object) | 5.0.0   | MIT     | `editor`                                     |
-| [lodash.isequal](https://github.com/lodash/lodash)                  | 4.5.0   | MIT     | `utils`                                      |
-| [lodash.isequalwith](https://github.com/lodash/lodash)              | 4.4.0   | MIT     | `utils`                                      |
-| [lodash.throttle](https://github.com/lodash/lodash)                 | 4.1.1   | MIT     | `utils`                                      |
-| [lodash.uniq](https://github.com/lodash/lodash)                     | 4.5.0   | MIT     | `utils`                                      |
-| [lz-string](https://github.com/pieroxy/lz-string)                   | 1.5.0   | MIT     | `tldraw`                                     |
-| [mermaid](https://github.com/mermaid-js/mermaid)                    | 11.16.1 | MIT     | `mermaid`                                    |
-| [nanoevents](https://github.com/ai/nanoevents)                      | 7.0.1   | MIT     | `sync`, `sync-core`                          |
-| [radix-ui](https://github.com/radix-ui/primitives)                  | 1.4.2   | MIT     | `tldraw`                                     |
-| [rbush](https://github.com/mourner/rbush)                           | 3.0.1   | MIT     | `editor`                                     |
-| [ws](https://github.com/websockets/ws)                              | 8.21.0  | MIT     | `sync`, `sync-core`                          |
+| Dependency                                                           | Version | License | Used by                                      |
+| -------------------------------------------------------------------- | ------- | ------- | -------------------------------------------- |
+| [@tiptap/core](https://github.com/ueberdosis/tiptap)                 | 3.13.0  | MIT     | `commenting`, `editor`, `mentions`, `tldraw` |
+| [@tiptap/extension-code](https://github.com/ueberdosis/tiptap)       | 3.13.0  | MIT     | `tldraw`                                     |
+| [@tiptap/extension-highlight](https://github.com/ueberdosis/tiptap)  | 3.13.0  | MIT     | `tldraw`                                     |
+| [@tiptap/extension-list](https://github.com/ueberdosis/tiptap)       | 3.13.0  | MIT     | `tldraw`                                     |
+| [@tiptap/extension-mention](https://github.com/ueberdosis/tiptap)    | 3.13.0  | MIT     | `mentions`                                   |
+| [@tiptap/extension-typography](https://github.com/ueberdosis/tiptap) | 3.13.0  | MIT     | `tldraw`                                     |
+| [@tiptap/pm](https://github.com/ueberdosis/tiptap)                   | 3.13.0  | MIT     | `commenting`, `editor`, `mentions`, `tldraw` |
+| [@tiptap/react](https://github.com/ueberdosis/tiptap)                | 3.13.0  | MIT     | `commenting`, `editor`, `mentions`, `tldraw` |
+| [@tiptap/starter-kit](https://github.com/ueberdosis/tiptap)          | 3.13.0  | MIT     | `tldraw`                                     |
+| [@tiptap/suggestion](https://github.com/ueberdosis/tiptap)           | 3.13.0  | MIT     | `mentions`                                   |
+| [classnames](https://github.com/JedWatson/classnames)                | 2.5.1   | MIT     | `editor`, `tldraw`                           |
+| [eventemitter3](https://github.com/primus/eventemitter3)             | 4.0.7   | MIT     | `editor`                                     |
+| [idb](https://github.com/jakearchibald/idb)                          | 7.1.1   | ISC     | `editor`, `tldraw`                           |
+| [is-plain-object](https://github.com/jonschlinkert/is-plain-object)  | 5.0.0   | MIT     | `editor`                                     |
+| [lodash.isequal](https://github.com/lodash/lodash)                   | 4.5.0   | MIT     | `utils`                                      |
+| [lodash.isequalwith](https://github.com/lodash/lodash)               | 4.4.0   | MIT     | `utils`                                      |
+| [lodash.throttle](https://github.com/lodash/lodash)                  | 4.1.1   | MIT     | `utils`                                      |
+| [lodash.uniq](https://github.com/lodash/lodash)                      | 4.5.0   | MIT     | `utils`                                      |
+| [lz-string](https://github.com/pieroxy/lz-string)                    | 1.5.0   | MIT     | `tldraw`                                     |
+| [mermaid](https://github.com/mermaid-js/mermaid)                     | 11.16.1 | MIT     | `mermaid`                                    |
+| [nanoevents](https://github.com/ai/nanoevents)                       | 7.0.1   | MIT     | `sync`, `sync-core`                          |
+| [radix-ui](https://github.com/radix-ui/primitives)                   | 1.4.2   | MIT     | `tldraw`                                     |
+| [rbush](https://github.com/mourner/rbush)                            | 3.0.1   | MIT     | `editor`                                     |
+| [ws](https://github.com/websockets/ws)                               | 8.21.0  | MIT     | `sync`, `sync-core`                          |
 
 #### Inline code