refactor: restructure files to their domains, new preview overlay system, and dep graph

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>

+	);

+}