Csp fixes

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vectorize-io/vectorize-connect",
-  "version": "0.3.6",
+  "version": "0.3.7",
   "description": "A simple package for Google Drive authorization and file selection",
   "main": "dist/index.js",
   "module": "dist/index.mjs",

src/baseOAuth/ui/picker.ts

@@ -41,8 +41,8 @@ export abstract class BasePicker {
       header: `
         <div class="flex justify-between items-center">
           <h1 class="text-2xl font-bold">Selected Files and Folders</h1>
-          <button 
-            onclick="handleSelectMore()"
+          <button
+            id="selectMoreButton"
             class="bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600 transition-colors"
           >
             Select Files/Folders
@@ -73,7 +73,7 @@ export abstract class BasePicker {
       submitButtonContainer: `
         <div id="submitButton" class="flex justify-end mt-6" style="display: none;">
           <button
-            onclick="finishSelection()"
+            id="finishButton"
             class="bg-green-500 text-white px-6 py-3 rounded-lg hover:bg-green-600 transition-colors"
           >
             Finish Selection
@@ -117,7 +117,7 @@ export abstract class BasePicker {
               return;
             }
 
-            fileList.innerHTML = selectedFiles.map(file => 
+            fileList.innerHTML = selectedFiles.map(file =>
               \`<div class="group p-4 border rounded-lg flex justify-between items-center hover:bg-gray-50">
                 <div>
                   <p class="font-medium text-gray-800">
@@ -128,8 +128,8 @@ export abstract class BasePicker {
                   </p>
                 </div>
                 <button
-                  onclick="removeFile('\${file.id}')"
-                  class="p-2 text-gray-500 hover:text-red-500 hover:bg-red-50 rounded-full transition-colors"
+                  data-file-id="\${file.id}"
+                  class="remove-file-btn p-2 text-gray-500 hover:text-red-500 hover:bg-red-50 rounded-full transition-colors"
                   aria-label="Remove file"
                 >
                   <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
@@ -138,6 +138,14 @@ export abstract class BasePicker {
                 </button>
               </div>\`
             ).join('');
+
+            // Attach event listeners to remove buttons
+            document.querySelectorAll('.remove-file-btn').forEach(btn => {
+              btn.addEventListener('click', (e) => {
+                const fileId = e.currentTarget.getAttribute('data-file-id');
+                removeFile(fileId);
+              });
+            });
 
             submitButton.style.display = 'flex';
           }
@@ -178,6 +186,9 @@ export abstract class BasePicker {
             }
           }
 
+          // Attach event listeners
+          document.getElementById('finishButton')?.addEventListener('click', finishSelection);
+
           // Initialize file list with pre-selected files if any
           if (selectedFiles.length > 0) {
             updateFileList();
@@ -211,8 +222,59 @@ export abstract class BasePicker {
         <title>${title}</title>
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1">
-        <script src="https://cdn.tailwindcss.com"></script>
-        ${styles}
+        <style>
+          * { box-sizing: border-box; margin: 0; padding: 0; }
+          body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; }
+          .p-2 { padding: 0.5rem; }
+          .p-4 { padding: 1rem; }
+          .p-6 { padding: 1.5rem; }
+          .px-4 { padding-left: 1rem; padding-right: 1rem; }
+          .px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
+          .py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
+          .py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
+          .my-4 { margin-top: 1rem; margin-bottom: 1rem; }
+          .mt-6 { margin-top: 1.5rem; }
+          .ml-3 { margin-left: 0.75rem; }
+          .space-y-4 > * + * { margin-top: 1rem; }
+          .space-y-6 > * + * { margin-top: 1.5rem; }
+          .flex { display: flex; }
+          .items-center { align-items: center; }
+          .justify-between { justify-content: space-between; }
+          .justify-end { justify-content: flex-end; }
+          .flex-shrink-0 { flex-shrink: 0; }
+          .border { border: 1px solid #e5e7eb; }
+          .border-l-4 { border-left: 4px solid; }
+          .border-yellow-400 { border-color: #fbbf24; }
+          .rounded-lg { border-radius: 0.5rem; }
+          .rounded-full { border-radius: 9999px; }
+          .bg-blue-500 { background-color: #3b82f6; }
+          .bg-green-500 { background-color: #10b981; }
+          .bg-yellow-50 { background-color: #fffbeb; }
+          .bg-gray-50 { background-color: #f9fafb; }
+          .bg-red-50 { background-color: #fef2f2; }
+          .text-white { color: #ffffff; }
+          .text-2xl { font-size: 1.5rem; line-height: 2rem; }
+          .text-sm { font-size: 0.875rem; line-height: 1.25rem; }
+          .text-gray-500 { color: #6b7280; }
+          .text-gray-800 { color: #1f2937; }
+          .text-yellow-700 { color: #a16207; }
+          .text-yellow-400 { color: #fbbf24; }
+          .text-red-500 { color: #ef4444; }
+          .font-bold { font-weight: 700; }
+          .font-medium { font-weight: 500; }
+          .hover\\:bg-blue-600:hover { background-color: #2563eb; }
+          .hover\\:bg-green-600:hover { background-color: #059669; }
+          .hover\\:bg-gray-50:hover { background-color: #f9fafb; }
+          .hover\\:bg-red-50:hover { background-color: #fef2f2; }
+          .hover\\:text-red-500:hover { color: #ef4444; }
+          .transition-colors { transition-property: color, background-color, border-color; transition-duration: 150ms; }
+          .group:hover .group-hover\\:bg-gray-50 { background-color: #f9fafb; }
+          button { cursor: pointer; border: none; outline: none; }
+          button:focus { outline: 2px solid #3b82f6; outline-offset: 2px; }
+          .h-5 { height: 1.25rem; }
+          .w-5 { width: 1.25rem; }
+          ${styles}
+        </style>
         ${head}
       </head>
       <body>

src/dropBoxOAuth/ui/picker.ts

@@ -194,6 +194,9 @@ export class DropboxPicker extends BasePicker {
         loadDropboxChooser();
       }
 
+      // Attach event listener for Select More button
+      document.getElementById('selectMoreButton')?.addEventListener('click', handleSelectMore);
+
       // Initialize page when it loads
       window.addEventListener('DOMContentLoaded', function() {
         // Preload the Dropbox SDK but don't open the chooser

src/googleDriveOAuth/ui/picker.ts

@@ -131,6 +131,9 @@ export class GoogleDrivePicker extends BasePicker {
         loadPicker();
       }
 
+      // Attach event listener for Select More button
+      document.getElementById('selectMoreButton')?.addEventListener('click', handleSelectMore);
+
       // Initialize picker
       // loadPicker();
     `;

src/notionOAuth/ui/picker.ts

@@ -594,19 +594,27 @@ export class NotionPicker {
               <div class="item-details">
                 <div class="item-name" title="\${escapeHtml(db.name)}">\${escapeHtml(db.name)}</div>
               </div>
-              <a href="\${escapeHtml(db.url)}" target="_blank" class="notion-link" title="Open in Notion" onclick="event.stopPropagation();">
+              <a href="\${escapeHtml(db.url)}" target="_blank" class="notion-link" title="Open in Notion">
                 <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                   <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
                   <polyline points="15 3 21 3 21 9"></polyline>
                   <line x1="10" y1="14" x2="21" y2="3"></line>
                 </svg>
               </a>
             \`;
-            
-            // Set up click handler
+
+            // Set up click handler for card
             card.addEventListener('click', function() {
               toggleItemSelection(this);
             });
+
+            // Prevent link click from triggering card selection
+            const link = card.querySelector('.notion-link');
+            if (link) {
+              link.addEventListener('click', function(e) {
+                e.stopPropagation();
+              });
+            }
 
             grid.appendChild(card);
           });
@@ -633,19 +641,27 @@ export class NotionPicker {
               <div class="item-details">
                 <div class="item-name" title="\${escapeHtml(page.title)}">\${escapeHtml(page.title)}</div>
               </div>
-              <a href="\${escapeHtml(page.url)}" target="_blank" class="notion-link" title="Open in Notion" onclick="event.stopPropagation();">
+              <a href="\${escapeHtml(page.url)}" target="_blank" class="notion-link" title="Open in Notion">
                 <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                   <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
                   <polyline points="15 3 21 3 21 9"></polyline>
                   <line x1="10" y1="14" x2="21" y2="3"></line>
                 </svg>
               </a>
             \`;
-            
-            // Set up click handler
+
+            // Set up click handler for card
             card.addEventListener('click', function() {
               toggleItemSelection(this);
             });
+
+            // Prevent link click from triggering card selection
+            const pageLink = card.querySelector('.notion-link');
+            if (pageLink) {
+              pageLink.addEventListener('click', function(e) {
+                e.stopPropagation();
+              });
+            }
 
             grid.appendChild(card);
           });