Stickies: release candidate (#3249)

This PR is the target for the stickies PRs that are moving forward. It
should collect changes.

- [x] New icon
- [x] Improved shadows
- [x] Shadow LOD
- [x] New colors / theme options
- [x] Shrink text size to avoid word breaks on the x axis
- [x] Hide indicator whilst typing (reverted)
- [x] Adjacent note positions
  - [x] buttons / clone handles
  - [x] position helpers for creating / translating (pits)
- [x] keyboard shortcuts: (Tab, Shift+tab (RTL aware), Cmd-Enter,
Shift+Cmd+enter)
  - [x] multiple shape translating 
- [x] Text editing
  - [x] Edit on type (feature flagged)
  - [x] click goes in correct place
- [x] Notes as parents (reverted)
- [x] Update colors
- [x] Update SVG appearance

### Change Type

- [x] `sdk` — Changes the tldraw SDK
- [x] `feature` — New feature

### Test Plan

Todo: fold in test plans for child PRs

### Unit tests:

- [ ] Shrink text size to avoid word breaks on the x axis
- [x] Adjacent notes
  - [x] buttons (clone handles)
  - [x] position helpers (pits)
- [x] keyboard shortcuts: (Tab, Shift+tab (RTL aware), Cmd-Enter,
Shift+Cmd+enter)
- [ ] Text editing
  - [ ] Edit on type
  - [ ] click goes in correct place

### Release Notes

- Improves sticky notes (see list)

---------

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: Mime Čuvalo <mimecuvalo@gmail.com>
Co-authored-by: alex <alex@dytry.ch>
Co-authored-by: Mitja Bezenšek <mitja.bezensek@gmail.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: Lu[ke] Wilson <l2wilson94@gmail.com>
Co-authored-by: huppy-bot[bot] <128400622+huppy-bot[bot]@users.noreply.github.com>

packages/editor/src/lib/components/default-components/DefaultHandle.tsx

@@ -1,6 +1,6 @@
 import { TLHandle, TLShapeId } from '@tldraw/tlschema'
 import classNames from 'classnames'
-import { COARSE_HANDLE_RADIUS, HANDLE_RADIUS } from '../../constants'
+import { COARSE_HANDLE_RADIUS, HANDLE_RADIUS, SIDES } from '../../constants'
 
 /** @public */
 export type TLHandleProps = {
@@ -13,22 +13,31 @@ export type TLHandleProps = {
 
 /** @public */
 export function DefaultHandle({ handle, isCoarse, className, zoom }: TLHandleProps) {
-	const bgRadius = (isCoarse ? COARSE_HANDLE_RADIUS : HANDLE_RADIUS) / zoom
-	const fgRadius = (handle.type === 'create' && isCoarse ? 3 : 4) / zoom
+	const br = (isCoarse ? COARSE_HANDLE_RADIUS : HANDLE_RADIUS) / zoom
 
+	if (handle.type === 'clone') {
+		// bouba
+		const fr = 3 / Math.max(zoom, 0.35)
+		const path = `M0,${-fr} A${fr},${fr} 0 0,1 0,${fr}`
+		// kiki
+		// const fr = 4 / Math.max(zoom, 0.35)
+		// const path = `M0,${-fr} L${fr},0 L0,${fr} Z`
+
+		const index = SIDES.indexOf(handle.id as (typeof SIDES)[number])
+		return (
+			<g className={classNames(`tl-handle tl-handle__${handle.type}`, className)}>
+				<circle className="tl-handle__bg" r={br} />
+				{/* Half circle */}
+				<path className="tl-handle__fg" d={path} transform={`rotate(${-90 + 90 * index})`} />
+			</g>
+		)
+	}
+
+	const fr = (handle.type === 'create' && isCoarse ? 3 : 4) / Math.max(zoom, 0.35)
 	return (
-		<g
-			className={classNames(
-				'tl-handle',
-				{
-					'tl-handle__virtual': handle.type === 'virtual',
-					'tl-handle__create': handle.type === 'create',
-				},
-				className
-			)}
-		>
-			<circle className="tl-handle__bg" r={bgRadius} />
-			<circle className="tl-handle__fg" r={fgRadius} />
+		<g className={classNames(`tl-handle tl-handle__${handle.type}`, className)}>
+			<circle className="tl-handle__bg" r={br} />
+			<circle className="tl-handle__fg" r={fr} />
 		</g>
 	)
 }