stickies: make pit/pack distance the same (#3606)

Tweak default gap value to be consistent with sticky note gaps.
Fixes https://github.com/tldraw/tldraw/issues/3591

### Change Type

<!-- ❗ Please select a 'Scope' label ❗️ -->

- [x] `sdk` — Changes the tldraw SDK
- [ ] `dotcom` — Changes the tldraw.com web app
- [ ] `docs` — Changes to the documentation, examples, or templates.
- [ ] `vs code` — Changes to the vscode plugin
- [ ] `internal` — Does not affect user-facing stuff

<!-- ❗ Please select a 'Type' label ❗️ -->

- [x] `bugfix` — Bug fix
- [ ] `feature` — New feature
- [ ] `improvement` — Improving existing features
- [ ] `chore` — Updating dependencies, other boring stuff
- [ ] `galaxy brain` — Architectural changes
- [ ] `tests` — Changes to any test code
- [ ] `tools` — Changes to infrastructure, CI, internal scripts,
debugging tools, etc.
- [ ] `dunno` — I don't know


### Release Notes

- Shapes: tweak default gap value to be consistent with sticky note
gaps.

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

@@ -36,9 +36,9 @@ import {
 import { getFontDefForExport } from '../shared/defaultStyleDefs'
 
 import { startEditingShapeWithLabel } from '../../tools/SelectTool/selectHelpers'
+import { ADJACENT_SHAPE_MARGIN } from '../../ui/constants'
 import { useForceSolid } from '../shared/useForceSolid'
 import {
-	ADJACENT_NOTE_MARGIN,
 	CLONE_HANDLE_MARGIN,
 	NOTE_CENTER_OFFSET,
 	NOTE_SIZE,
@@ -402,7 +402,7 @@ function useNoteKeydownHandler(id: TLShapeId) {
 
 				const offsetLength =
 					NOTE_SIZE +
-					ADJACENT_NOTE_MARGIN +
+					ADJACENT_SHAPE_MARGIN +
 					// If we're growing down, we need to account for the current shape's growY
 					(isCmdEnter && !e.shiftKey ? shape.props.growY : 0)
 

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

@@ -13,3 +13,5 @@ export enum PORTRAIT_BREAKPOINT {
 	TABLET = 6,
 	DESKTOP = 7,
 }
+
+export const ADJACENT_SHAPE_MARGIN = 20

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

@@ -25,6 +25,7 @@ import { getEmbedInfo } from '../../utils/embeds/embeds'
 import { fitFrameToContent, removeFrame } from '../../utils/frames/frames'
 import { EditLinkDialog } from '../components/EditLinkDialog'
 import { EmbedDialog } from '../components/EmbedDialog'
+import { ADJACENT_SHAPE_MARGIN } from '../constants'
 import { useMenuClipboardEvents } from '../hooks/useClipboardEvents'
 import { useCopyAs } from '../hooks/useCopyAs'
 import { useExportAs } from '../hooks/useExportAs'
@@ -818,7 +819,7 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
 					trackEvent('pack-shapes', { source })
 					editor.mark('pack')
 					const selectedShapeIds = editor.getSelectedShapeIds()
-					editor.packShapes(selectedShapeIds, 16)
+					editor.packShapes(selectedShapeIds, ADJACENT_SHAPE_MARGIN)
 					kickoutOccludedShapes(editor, selectedShapeIds)
 				},
 			},