1 files changed, 47 insertions, 0 deletions
diff --git a/apps/web/src/preview/components/snap-guides.tsx b/apps/web/src/preview/components/snap-guides.tsx
new file mode 100644
index 00000000..5c2e1b9f
--- /dev/null
+++ b/apps/web/src/preview/components/snap-guides.tsx
@@ -0,0 +1,47 @@
+"use client";
+
+import { usePreviewViewport } from "@/preview/components/preview-viewport";
+import type { SnapLine } from "@/preview/preview-snap";
+
+export function SnapGuides({ lines }: { lines: SnapLine[] }) {
+	const viewport = usePreviewViewport();
+
+	if (lines.length === 0) {
+		return null;
+	}
+
+	const toOverlayX = (logicalX: number) =>
+		viewport.positionToOverlay({
+			positionX: logicalX,
+			positionY: 0,
+		}).x;
+
+	const toOverlayY = (logicalY: number) =>
+		viewport.positionToOverlay({
+			positionX: 0,
+			positionY: logicalY,
+		}).y;
+
+	return (
+		<div className="pointer-events-none absolute inset-0" aria-hidden>
+			{lines.map((line) => {
+				if (line.type === "vertical") {
+					return (
+						<div
+							key={`vertical-${line.position}`}
+							className="absolute top-0 bottom-0 w-px bg-white/70"
+							style={{ left: toOverlayX(line.position) }}
+						/>
+					);
+				}
+				return (
+					<div
+						key={`horizontal-${line.position}`}
+						className="absolute left-0 right-0 h-px bg-white/70"
+						style={{ top: toOverlayY(line.position) }}
+					/>
+				);
+			})}
+		</div>
+	);
+}