fix(fairies): move FairyHUD to InFrontOfTheCanvas layer (tldraw#7221)

Moves the FairyHUD and FairyHUDTeaser components to render in the
`InFrontOfTheCanvas` layer instead of `Overlays`. This positions the
fairy HUD above the canvas content but below other UI elements like
toolbars.

### Change type

- [x] `improvement`

### Test plan

1. Open a file in the editor
2. Verify the fairy HUD teaser appears above canvas shapes but below UI
elements

- [ ] Unit tests
- [ ] End to end tests

### Release notes

- Moved fairy HUD to render in front of canvas layer for better z-index
positioning.

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> Render FairyHUD in the in-front-of-canvas layer and tweak
z-index/animation so the HUD and cookie banner stack correctly.
> 
> - **Editor (`TlaEditor.tsx`)**
> - Move `FairyHUD` rendering from `Overlays` to `InFrontOfTheCanvas`
with fallback to `FairyHUDTeaser`.
> - Keep `Overlays` for `FairyVision`, `RemoteFairies`, and `Fairies`
only when `canShowFairies`.
> - Add default `components.InFrontOfTheCanvas` to always show
`FairyHUDTeaser` (outside instance-specific config).
> - **Styling**
> - Set `--tl-layer-canvas-in-front: 499` on `.tla .tl-container` to
control stacking.
> - Update cookie consent panel: adjust translate to `62%`, shorten
animation to `3s`, change timing to `ease-out`, and align `@keyframes`
start.
> - Raise `.cookieConsentWrapper` to `z-index:
var(--tl-layer-canvas-in-front)`.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
d733d35. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: steveruizok

apps/dotcom/client/src/tla/components/TlaEditor/TlaEditor.tsx

@@ -88,6 +88,12 @@ export const components: TLComponents = {
 	SharePanel: TlaEditorSharePanel,
 	Dialogs: null,
 	Toasts: null,
+
+	InFrontOfTheCanvas: () => (
+		<Suspense fallback={<div />}>
+			<FairyHUDTeaser />
+		</Suspense>
+	),
 }
 
 interface TlaEditorProps {
@@ -305,13 +311,15 @@ function TlaEditorInner({ fileSlug, deepLinks }: TlaEditorProps) {
 							{/* <InCanvasTaskList agents={agents} /> */}
 							<RemoteFairies />
 							<Fairies agents={agents} />
-							<FairyHUD agents={agents} />
-						</Suspense>
-					) : (
-						<Suspense fallback={<div />}>
-							<FairyHUDTeaser />
 						</Suspense>
-					)}
+					) : null}
+				</>
+			),
+			InFrontOfTheCanvas: () => (
+				<>
+					<Suspense fallback={<div />}>
+						{canShowFairies ? <FairyHUD agents={agents} /> : <FairyHUDTeaser />}
+					</Suspense>
 				</>
 			),
 			DebugMenu: () => <CustomDebugMenu />,

apps/dotcom/client/src/tla/components/dialogs/dialogs.module.css

@@ -45,14 +45,13 @@
 	box-shadow: var(--tla-shadow-3);
 	margin-bottom: 4px;
 	margin-right: 4px;
-	transform: translate(0px, 100%);
-	animation: slideUp 5s ease-in forwards;
-	animation-delay: 2s;
+	transform: translate(0px, 62%);
+	animation: slideUp 3s ease-out forwards;
 }
 
 @keyframes slideUp {
 	0% {
-		transform: translate(0px, 100%);
+		transform: translate(0px, 62%);
 	}
 	100% {
 		transform: translate(0px, 0%);
@@ -149,7 +148,7 @@
 	position: fixed;
 	bottom: 0;
 	right: 0;
-	z-index: var(--tl-layer-menus);
+	z-index: var(--tl-layer-canvas-in-front);
 	width: fit-content;
 }
 

apps/dotcom/client/src/tla/styles/tla.css

@@ -338,3 +338,8 @@
 .tla .tl-watermark_SEE-LICENSE {
 	display: none;
 }
+
+/* Crazy sneaky */
+.tla .tl-container {
+	--tl-layer-canvas-in-front: 499;
+}