fix: Frame Studio defaults — enable rule-of-thirds grid, reduce grid opacity

Author: kevinkiklee

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

@@ -26,7 +26,7 @@ export function FrameStudio() {
   const [originalImage, setOriginalImage] = useState<HTMLImageElement | null>(null)
   const [originalMimeType, setOriginalMimeType] = useState('image/png')
   const [cropState, setCropState] = useState<CropState | null>(null)
-  const [activeGrids, setActiveGrids] = useState<GridType[]>([])
+  const [activeGrids, setActiveGrids] = useState<GridType[]>(['rule-of-thirds'])
   const [gridOffset, setGridOffset] = useState({ x: 0, y: 0 })
   const [gridOptions, setGridOptions] = useState<GridOptions>(DEFAULT_GRID_OPTIONS)
   const [frameConfig, setFrameConfig] = useState<FrameConfig>(DEFAULT_FRAME_CONFIG)

src/lib/data/frameStudio.ts

@@ -31,7 +31,7 @@ export const ASPECT_RATIOS: AspectRatioPreset[] = [
 
 export const DEFAULT_GRID_OPTIONS: GridOptions = {
   color: '#ffffff',
-  opacity: 0.8,
+  opacity: 0.7,
   thickness: 'medium',
   spiralRotation: 0,
   gridDensity: 4,