From 8db3bead13441a5882d8689dfc6a9f09c82375d9 Mon Sep 17 00:00:00 2001
From: Maze Winther <mazewinther@gmail.com>
Date: Wed, 25 Mar 2026 16:47:22 +0100
Subject: feat: masks, properties refactor, shaders, storage migrations, and
 more

---
 .../editor/panels/preview/guide-overlay.tsx        | 32 ++++++++++++++++++++++
 1 file changed, 32 insertions(+)
 create mode 100644 apps/web/src/components/editor/panels/preview/guide-overlay.tsx

(limited to 'apps/web/src/components/editor/panels/preview/guide-overlay.tsx')

diff --git a/apps/web/src/components/editor/panels/preview/guide-overlay.tsx b/apps/web/src/components/editor/panels/preview/guide-overlay.tsx
new file mode 100644
index 00000000..ad7a621f
--- /dev/null
+++ b/apps/web/src/components/editor/panels/preview/guide-overlay.tsx
@@ -0,0 +1,32 @@
+"use client";
+
+import { getGuideById } from "@/lib/guides";
+import { usePreviewStore } from "@/stores/preview-store";
+import { usePreviewViewport } from "./preview-viewport";
+
+export function GuideOverlay() {
+	const activeGuide = usePreviewStore((state) => state.activeGuide);
+	const viewport = usePreviewViewport();
+	const guide = getGuideById(activeGuide);
+
+	if (!guide) {
+		return null;
+	}
+
+	return (
+		<div
+			className="pointer-events-none absolute"
+			style={{
+				left: viewport.sceneLeft,
+				top: viewport.sceneTop,
+				width: viewport.sceneWidth,
+				height: viewport.sceneHeight,
+			}}
+		>
+			{guide.renderOverlay({
+				width: viewport.sceneWidth,
+				height: viewport.sceneHeight,
+			})}
+		</div>
+	);
+}
-- 
cgit v1.3.1