Change environment variable handling

src/lib/components/PhotoCrop.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
+	import { env } from '$env/dynamic/public';
 
 	let { imageUrl, personName, initialCropData, onCropUpdated, onClose } = $props<{
 		imageUrl: string;
@@ -35,7 +36,7 @@
 	let canvasHeight = 400;
 
 	// Get crop ratio from environment
-	const cropRatio = parseFloat(import.meta.env.VITE_CROP_RATIO || '1.0');
+	const cropRatio = parseFloat(env.PUBLIC_CROP_RATIO || '1.0');
 
 	onMount(() => {
 		ctx = canvas.getContext('2d')!;

src/lib/components/wizard/StepGallery.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { onMount } from 'svelte';
+  import { env } from '$env/dynamic/public';
   import { columnMapping, filteredSheetData, currentStep, pictures, cropRects } from '$lib/stores';
   import { downloadDriveImage, isGoogleDriveUrl, createImageObjectUrl } from '$lib/google';
   import PhotoCard from '../PhotoCard.svelte';
@@ -219,12 +220,12 @@
         const faceWidth = (x2 - x1) * scaleX;
         const faceHeight = (y2 - y1) * scaleY;
         const faceCenterX = (x1 + (x2 - x1)/2) * scaleX;
-        const faceCenterY = (y1 + (y2 - y1)/2) * scaleY;
+        const faceCenterY = (y1 + (y2 - y1) / 2) * scaleY;
         // Load crop config from env
-        const cropRatio = parseFloat(import.meta.env.VITE_CROP_RATIO || '1.0');
-        const offsetX = parseFloat(import.meta.env.VITE_FACE_OFFSET_X || '0.0');
-        const offsetY = parseFloat(import.meta.env.VITE_FACE_OFFSET_Y || '0.0');
-        const cropScale = parseFloat(import.meta.env.VITE_CROP_SCALE || '2.5');
+        const cropRatio = parseFloat(env.PUBLIC_CROP_RATIO || '1.0');
+        const offsetX = parseFloat(env.PUBLIC_FACE_OFFSET_X || '0.0');
+        const offsetY = parseFloat(env.PUBLIC_FACE_OFFSET_Y || '0.0');
+        const cropScale = parseFloat(env.PUBLIC_CROP_SCALE || '2.5');
         // Compute crop size and center
         let cropWidth = faceWidth * cropScale;
         let cropHeight = cropWidth / cropRatio;

src/lib/google.ts

@@ -1,6 +1,5 @@
 import { writable } from 'svelte/store';
-
-const GOOGLE_CLIENT_ID = import.meta.env.VITE_GOOGLE_CLIENT_ID;
+import { env } from '$env/dynamic/public';
 
 export const isGoogleApiReady = writable(false);
 export const isSignedIn = writable(false);
@@ -45,8 +44,13 @@ export function initGoogleClient(callback: () => void) {
   const scriptGsi = document.createElement('script');
   scriptGsi.src = 'https://accounts.google.com/gsi/client';
   scriptGsi.onload = () => {
+    const clientId = env.PUBLIC_GOOGLE_CLIENT_ID;
+    if (!clientId) {
+      console.error('PUBLIC_GOOGLE_CLIENT_ID is not set in the environment.');
+      return;
+    }
     tokenClient = google.accounts.oauth2.initTokenClient({
-      client_id: GOOGLE_CLIENT_ID,
+      client_id: clientId,
       scope: 'https://www.googleapis.com/auth/drive.readonly https://www.googleapis.com/auth/spreadsheets.readonly',
       callback: (tokenResponse) => {
         if (tokenResponse?.access_token) {
@@ -140,7 +144,7 @@ export function extractDriveFileId(url: string): string | null {
   ];
   
   for (const pattern of patterns) {
-    const match = url.match(pattern);
+    const match = pattern.exec(url);
     if (match) {
       return match[1];
     }