Initial commit — Bradly branding editor platform

2026-06-02 03:27:03 -05:00
commit b135a70cc7
180 changed files with 43160 additions and 0 deletions
@@ -0,0 +1,56 @@
+import React from 'react';
+
+interface CanvasGridOverlayProps {
+  visible: boolean;
+  cols?: number;
+  rows?: number;
+}
+
+/**
+ * CanvasGridOverlay — Renders a semi-transparent grid overlay on the canvas.
+ * Uses CSS repeating-linear-gradient for performance (no DOM nodes per line).
+ */
+export const CanvasGridOverlay: React.FC<CanvasGridOverlayProps> = ({
+  visible,
+  cols = 6,
+  rows = 6,
+}) => {
+  if (!visible) return null;
+
+  const colWidth = 100 / cols;
+  const rowHeight = 100 / rows;
+
+  return (
+    <div
+      style={{
+        position: 'absolute',
+        inset: 0,
+        zIndex: 40,
+        pointerEvents: 'none',
+        backgroundImage: `
+          repeating-linear-gradient(90deg, rgba(255,255,255,0.05) 0px, rgba(255,255,255,0.05) 1px, transparent 1px, transparent ${colWidth}%),
+          repeating-linear-gradient(0deg, rgba(255,255,255,0.05) 0px, rgba(255,255,255,0.05) 1px, transparent 1px, transparent ${rowHeight}%)
+        `,
+        backgroundSize: `${colWidth}% ${rowHeight}%`,
+      }}
+    >
+      {/* Center crosshair */}
+      <div style={{
+        position: 'absolute',
+        left: '50%',
+        top: 0,
+        bottom: 0,
+        width: '1px',
+        backgroundColor: 'rgba(168,85,247,0.15)',
+      }} />
+      <div style={{
+        position: 'absolute',
+        top: '50%',
+        left: 0,
+        right: 0,
+        height: '1px',
+        backgroundColor: 'rgba(168,85,247,0.15)',
+      }} />
+    </div>
+  );
+};