[fix] overlay rendering issues (#1389)

This PR fixes several issues with the way that SVG overlays were
rendered.
- fixes editing embed shape on firefox (weird SVG pointer events bug)
- fixes layering of overlays
- collaborator cursors are offset

### Change Type

- [x] `patch` — change to unshipped changes

### Test Plan

1. Try editing an embed shape on Firefox
2. Confirm that cursor hints are no longer spinning
3. Confirm that cursors are displayed correctly over other shapes

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

@@ -1,4 +1,3 @@
-import { Matrix2d } from '@tldraw/primitives'
 import { TLShape, TLShapeId } from '@tldraw/tlschema'
 import classNames from 'classnames'
 import * as React from 'react'
@@ -51,15 +50,14 @@ export const InnerIndicator = ({ app, id }: { app: App; id: TLShapeId }) => {
 	)
 }
 
-export const ShapeIndicator = React.memo(function ShapeIndicator({
-	id,
-	isHinting,
-	color,
-}: {
+export type TLShapeIndicatorComponent = (props: {
 	id: TLShapeId
-	isHinting?: boolean
-	color?: string
-}) {
+	color?: string | undefined
+	opacity?: number
+	className?: string
+}) => JSX.Element | null
+
+const _ShapeIndicator: TLShapeIndicatorComponent = ({ id, className, color, opacity }) => {
 	const app = useApp()
 
 	const transform = useValue(
@@ -67,28 +65,23 @@ export const ShapeIndicator = React.memo(function ShapeIndicator({
 		() => {
 			const pageTransform = app.getPageTransformById(id)
 			if (!pageTransform) return ''
-			return Matrix2d.toCssString(pageTransform)
+			return pageTransform.toCssString()
 		},
 		[app, id]
 	)
 
 	return (
-		<svg className="tl-svg-origin-container">
+		<svg className={classNames('tl-overlays__item', className)}>
 			<g
-				className={classNames('tl-shape-indicator', {
-					'tl-shape-indicator__hinting': isHinting,
-				})}
+				className="tl-shape-indicator"
 				transform={transform}
 				stroke={color ?? 'var(--color-selected)'}
+				opacity={opacity}
 			>
 				<InnerIndicator app={app} id={id} />
 			</g>
 		</svg>
 	)
-})
+}
 
-export type TLShapeIndicatorComponent = (props: {
-	id: TLShapeId
-	isHinting?: boolean | undefined
-	color?: string | undefined
-}) => JSX.Element | null
+export const ShapeIndicator = React.memo(_ShapeIndicator)