fix: Frame Studio grid offset rendering for line-based grids

- Compute exact line positions for rule-of-thirds, golden ratio,
  center cross, and square grid when offset is applied
- Prevents uneven spacing when dragging grid overlay
- Export dialog uses same position-aware rendering

Author: kevinkiklee

src/app/[locale]/frame-studio/_components/ExportDialog.tsx

@@ -7,6 +7,7 @@ import { transferExif } from '@/lib/utils/exif'
 import {
   drawRuleOfThirds, drawGoldenRatio, drawGoldenSpiral, drawGoldenDiagonal,
   drawDiagonalLines, drawCenterCross, drawSquareGrid, drawTriangles,
+  GOLDEN_RATIO,
 } from '@/lib/math/grid'
 import type { FrameConfig, CropState, GridType, GridOptions } from './types'
 import { thicknessToPx } from './types'
@@ -38,8 +39,30 @@ const GRID_DRAW_MAP: Record<GridType, DrawFn> = {
   'triangles': (ctx, w, h) => drawTriangles(ctx, w, h),
 }
 
-function drawGridTiled(
-  ctx: CanvasRenderingContext2D, drawFn: DrawFn,
+function getLinePositions(
+  gridType: GridType, w: number, h: number, opts: GridOptions,
+): { v: number[]; h: number[] } | null {
+  switch (gridType) {
+    case 'rule-of-thirds':
+      return { v: [0, w / 3, 2 * w / 3], h: [0, h / 3, 2 * h / 3] }
+    case 'golden-ratio': {
+      const pw = w / GOLDEN_RATIO, ph = h / GOLDEN_RATIO
+      return { v: [0, w - pw, pw], h: [0, h - ph, ph] }
+    }
+    case 'center-cross':
+      return { v: [0, w / 2], h: [0, h / 2] }
+    case 'square-grid':
+      return {
+        v: Array.from({ length: opts.gridDensity }, (_, i) => (i * w) / opts.gridDensity),
+        h: Array.from({ length: opts.gridDensity }, (_, i) => (i * h) / opts.gridDensity),
+      }
+    default:
+      return null
+  }
+}
+
+function drawExportGrid(
+  ctx: CanvasRenderingContext2D, gridType: GridType, drawFn: DrawFn,
   originX: number, originY: number, gw: number, gh: number,
   ox: number, oy: number, opts: GridOptions,
 ) {
@@ -51,15 +74,30 @@ function drawGridTiled(
     ctx.restore()
     return
   }
-  const px = ((ox % gw) + gw) % gw
-  const py = ((oy % gh) + gh) % gh
-  for (let dx = -1; dx <= 0; dx++) {
-    for (let dy = -1; dy <= 0; dy++) {
-      ctx.save()
-      ctx.translate(originX + px + dx * gw, originY + py + dy * gh)
-      ctx.beginPath()
-      drawFn(ctx, gw, gh, opts)
-      ctx.restore()
+
+  const positions = getLinePositions(gridType, gw, gh, opts)
+  if (positions) {
+    ctx.beginPath()
+    for (const base of positions.v) {
+      const x = ((base + ox) % gw + gw) % gw
+      if (x > 0.5) { ctx.moveTo(originX + x, originY); ctx.lineTo(originX + x, originY + gh) }
+    }
+    for (const base of positions.h) {
+      const y = ((base + oy) % gh + gh) % gh
+      if (y > 0.5) { ctx.moveTo(originX, originY + y); ctx.lineTo(originX + gw, originY + y) }
+    }
+    ctx.stroke()
+  } else {
+    const px = ((ox % gw) + gw) % gw
+    const py = ((oy % gh) + gh) % gh
+    for (let dx = -1; dx <= 0; dx++) {
+      for (let dy = -1; dy <= 0; dy++) {
+        ctx.save()
+        ctx.translate(originX + px + dx * gw, originY + py + dy * gh)
+        ctx.beginPath()
+        drawFn(ctx, gw, gh, opts)
+        ctx.restore()
+      }
     }
   }
 }
@@ -137,7 +175,7 @@ export function ExportDialog({
         ctx.lineWidth = thicknessToPx(gridOptions.thickness)
         for (const gridType of activeGrids) {
           const drawFn = GRID_DRAW_MAP[gridType]
-          if (drawFn) drawGridTiled(ctx, drawFn, imgX, imgY, sw, sh, ox, oy, gridOptions)
+          if (drawFn) drawExportGrid(ctx, gridType, drawFn, imgX, imgY, sw, sh, ox, oy, gridOptions)
         }
         ctx.restore()
       }

src/app/[locale]/frame-studio/_components/GridCanvas.tsx

@@ -4,6 +4,7 @@ import { useRef, useEffect, useCallback } from 'react'
 import {
   drawRuleOfThirds, drawGoldenRatio, drawGoldenSpiral, drawGoldenDiagonal,
   drawDiagonalLines, drawCenterCross, drawSquareGrid, drawTriangles,
+  GOLDEN_RATIO,
 } from '@/lib/math/grid'
 import type { GridType, GridOptions } from './types'
 import { thicknessToPx } from './types'
@@ -29,6 +30,48 @@ const GRID_DRAW_MAP: Record<GridType, DrawFn> = {
   'triangles': (ctx, w, h) => drawTriangles(ctx, w, h),
 }
 
+/** For H/V line grids, returns all line positions (including a boundary at 0) */
+function getLinePositions(
+  gridType: GridType, w: number, h: number, opts: GridOptions,
+): { v: number[]; h: number[] } | null {
+  switch (gridType) {
+    case 'rule-of-thirds':
+      return { v: [0, w / 3, 2 * w / 3], h: [0, h / 3, 2 * h / 3] }
+    case 'golden-ratio': {
+      const pw = w / GOLDEN_RATIO, ph = h / GOLDEN_RATIO
+      return { v: [0, w - pw, pw], h: [0, h - ph, ph] }
+    }
+    case 'center-cross':
+      return { v: [0, w / 2], h: [0, h / 2] }
+    case 'square-grid':
+      return {
+        v: Array.from({ length: opts.gridDensity }, (_, i) => (i * w) / opts.gridDensity),
+        h: Array.from({ length: opts.gridDensity }, (_, i) => (i * h) / opts.gridDensity),
+      }
+    default:
+      return null
+  }
+}
+
+/** Draw H/V lines at computed positions, correctly wrapping with offset */
+function drawOffsetLineGrid(
+  ctx: CanvasRenderingContext2D,
+  w: number, h: number,
+  positions: { v: number[]; h: number[] },
+  ox: number, oy: number,
+) {
+  ctx.beginPath()
+  for (const base of positions.v) {
+    const x = ((base + ox) % w + w) % w
+    if (x > 0.5) { ctx.moveTo(x, 0); ctx.lineTo(x, h) }
+  }
+  for (const base of positions.h) {
+    const y = ((base + oy) % h + h) % h
+    if (y > 0.5) { ctx.moveTo(0, y); ctx.lineTo(w, y) }
+  }
+  ctx.stroke()
+}
+
 export function GridCanvas({ width, height, activeGrids, options, offset }: GridCanvasProps) {
   const canvasRef = useRef<HTMLCanvasElement>(null)
 
@@ -61,8 +104,15 @@ export function GridCanvas({ width, height, activeGrids, options, offset }: Grid
       if (ox === 0 && oy === 0) {
         ctx.beginPath()
         drawFn(ctx, width, height, options)
+        continue
+      }
+
+      // For H/V line grids, compute exact positions to ensure even spacing
+      const positions = getLinePositions(gridType, width, height, options)
+      if (positions) {
+        drawOffsetLineGrid(ctx, width, height, positions, ox, oy)
       } else {
-        // Tile 2×2 with modular wrapping so the pattern always fills the canvas
+        // Tile 2×2 for non-line patterns (diagonals, spiral, triangles)
         const px = ((ox % width) + width) % width
         const py = ((oy % height) + height) % height
         for (let dx = -1; dx <= 0; dx++) {