@intranefr/superbackend 1.4.4 → 1.5.1

package/views/pages/blocks/contact.ejs

@@ -0,0 +1,27 @@
+<section class="py-16 bg-gray-50">
+  <div class="container mx-auto px-4 max-w-xl">
+    <% if (block.props?.title) { %>
+    <h2 class="text-3xl font-bold text-gray-900 text-center mb-8"><%= block.props.title %></h2>
+    <% } %>
+    <form action="<%= block.props?.action || '/api/forms/submit' %>" method="POST" class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
+      <% if (block.props?.formId) { %>
+      <input type="hidden" name="formId" value="<%= block.props.formId %>">
+      <% } %>
+      <div class="mb-4">
+        <label class="block text-gray-700 font-medium mb-2">Name</label>
+        <input type="text" name="name" required class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:ring-2 focus:ring-blue-500 focus:border-transparent">
+      </div>
+      <div class="mb-4">
+        <label class="block text-gray-700 font-medium mb-2">Email</label>
+        <input type="email" name="email" required class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:ring-2 focus:ring-blue-500 focus:border-transparent">
+      </div>
+      <div class="mb-6">
+        <label class="block text-gray-700 font-medium mb-2">Message</label>
+        <textarea name="message" rows="4" required class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:ring-2 focus:ring-blue-500 focus:border-transparent"></textarea>
+      </div>
+      <button type="submit" class="w-full bg-blue-600 text-white font-semibold py-3 rounded-lg hover:bg-blue-700 transition">
+        <%= block.props?.buttonText || 'Send Message' %>
+      </button>
+    </form>
+  </div>
+</section>

package/views/pages/blocks/cta.ejs

@@ -0,0 +1,18 @@
+<section class="py-16 bg-gray-100">
+  <div class="container mx-auto px-4 text-center">
+    <% if (block.props?.title) { %>
+    <h2 class="text-3xl font-bold text-gray-900 mb-4"><%= block.props.title %></h2>
+    <% } %>
+    <% if (block.props?.description) { %>
+    <p class="text-gray-600 mb-8 max-w-2xl mx-auto"><%= block.props.description %></p>
+    <% } %>
+    <% if (block.props?.buttonText) { %>
+    <a 
+      href="<%= block.props.buttonUrl || '#' %>" 
+      class="inline-block bg-blue-600 text-white font-semibold px-8 py-3 rounded-lg hover:bg-blue-700 transition"
+    >
+      <%= block.props.buttonText %>
+    </a>
+    <% } %>
+  </div>
+</section>

package/views/pages/blocks/faq.ejs

@@ -0,0 +1,20 @@
+<section class="py-16">
+  <div class="container mx-auto px-4 max-w-3xl">
+    <% if (block.props?.title) { %>
+    <h2 class="text-3xl font-bold text-gray-900 text-center mb-12"><%= block.props.title %></h2>
+    <% } %>
+    <div class="space-y-4">
+      <% const items = block.props?.items || []; %>
+      <% for (let i = 0; i < items.length; i++) { %>
+      <% const item = items[i]; %>
+      <details class="bg-white rounded-lg border border-gray-200 p-4 group">
+        <summary class="font-semibold text-gray-900 cursor-pointer list-none flex justify-between items-center">
+          <%= item.question || 'Question' %>
+          <span class="text-gray-500 group-open:rotate-180 transition-transform">▼</span>
+        </summary>
+        <p class="text-gray-600 mt-4"><%= item.answer || '' %></p>
+      </details>
+      <% } %>
+    </div>
+  </div>
+</section>

package/views/pages/blocks/features.ejs

@@ -0,0 +1,19 @@
+<section class="py-16">
+  <div class="container mx-auto px-4">
+    <% if (block.props?.title) { %>
+    <h2 class="text-3xl font-bold text-gray-900 text-center mb-12"><%= block.props.title %></h2>
+    <% } %>
+    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+      <% const features = block.props?.items || []; %>
+      <% for (const feature of features) { %>
+      <div class="bg-white rounded-lg p-6 shadow-sm border border-gray-200">
+        <% if (feature.icon) { %>
+        <div class="text-blue-600 text-3xl mb-4"><%= feature.icon %></div>
+        <% } %>
+        <h3 class="text-xl font-semibold text-gray-900 mb-2"><%= feature.title || 'Feature' %></h3>
+        <p class="text-gray-600"><%= feature.description || '' %></p>
+      </div>
+      <% } %>
+    </div>
+  </div>
+</section>

package/views/pages/blocks/hero.ejs

@@ -0,0 +1,13 @@
+<section class="bg-gradient-to-r from-blue-600 to-indigo-700 text-white py-20">
+  <div class="container mx-auto px-4 text-center">
+    <h1 class="text-5xl font-bold mb-6"><%= block.props?.title || 'Welcome' %></h1>
+    <% if (block.props?.subtitle) { %>
+    <p class="text-xl opacity-90 mb-8"><%= block.props.subtitle %></p>
+    <% } %>
+    <% if (block.props?.ctaText) { %>
+    <a href="<%= block.props.ctaUrl || '#' %>" class="inline-block bg-white text-blue-600 font-semibold px-8 py-3 rounded-lg hover:bg-gray-100 transition">
+      <%= block.props.ctaText %>
+    </a>
+    <% } %>
+  </div>
+</section>

package/views/pages/blocks/html.ejs

@@ -0,0 +1,5 @@
+<section class="py-8">
+  <div class="container mx-auto px-4">
+    <%- block.props?.html || '' %>
+  </div>
+</section>

package/views/pages/blocks/image.ejs

@@ -0,0 +1,14 @@
+<section class="py-8">
+  <div class="container mx-auto px-4">
+    <figure class="<%= block.props?.align === 'center' ? 'text-center' : '' %>">
+      <img 
+        src="<%= block.props?.src || '/placeholder.jpg' %>" 
+        alt="<%= block.props?.alt || '' %>"
+        class="<%= block.props?.fullWidth ? 'w-full' : 'max-w-2xl mx-auto' %> rounded-lg shadow-md"
+      >
+      <% if (block.props?.caption) { %>
+      <figcaption class="text-gray-500 text-sm mt-3"><%= block.props.caption %></figcaption>
+      <% } %>
+    </figure>
+  </div>
+</section>

package/views/pages/blocks/testimonials.ejs

@@ -0,0 +1,26 @@
+<section class="py-16 bg-gray-50">
+  <div class="container mx-auto px-4">
+    <% if (block.props?.title) { %>
+    <h2 class="text-3xl font-bold text-gray-900 text-center mb-12"><%= block.props.title %></h2>
+    <% } %>
+    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+      <% const testimonials = block.props?.items || []; %>
+      <% for (const testimonial of testimonials) { %>
+      <div class="bg-white rounded-lg p-6 shadow-sm border border-gray-200">
+        <p class="text-gray-700 italic mb-4">"<%= testimonial.quote || '' %>"</p>
+        <div class="flex items-center">
+          <% if (testimonial.avatar) { %>
+          <img src="<%= testimonial.avatar %>" alt="" class="w-10 h-10 rounded-full mr-3">
+          <% } %>
+          <div>
+            <p class="font-semibold text-gray-900"><%= testimonial.name || 'Anonymous' %></p>
+            <% if (testimonial.role) { %>
+            <p class="text-gray-500 text-sm"><%= testimonial.role %></p>
+            <% } %>
+          </div>
+        </div>
+      </div>
+      <% } %>
+    </div>
+  </div>
+</section>

package/views/pages/blocks/text.ejs

@@ -0,0 +1,10 @@
+<section class="py-12">
+  <div class="container mx-auto px-4 max-w-3xl">
+    <% if (block.props?.title) { %>
+    <h2 class="text-3xl font-bold text-gray-900 mb-6"><%= block.props.title %></h2>
+    <% } %>
+    <div class="prose prose-lg max-w-none text-gray-700">
+      <%- block.props?.content || '' %>
+    </div>
+  </div>
+</section>

package/views/pages/layouts/default.ejs

@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title><%= seoMeta.title || page.title || 'Page' %></title>
+  <% if (seoMeta.description) { %>
+  <meta name="description" content="<%= seoMeta.description %>">
+  <% } %>
+  <% if (seoMeta.keywords) { %>
+  <meta name="keywords" content="<%= seoMeta.keywords %>">
+  <% } %>
+  <% if (seoMeta.ogImage) { %>
+  <meta property="og:image" content="<%= seoMeta.ogImage %>">
+  <% } %>
+  <% if (seoMeta.canonicalUrl) { %>
+  <link rel="canonical" href="<%= seoMeta.canonicalUrl %>">
+  <% } %>
+  <meta property="og:title" content="<%= seoMeta.title || page.title || 'Page' %>">
+  <% if (seoMeta.description) { %>
+  <meta property="og:description" content="<%= seoMeta.description %>">
+  <% } %>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <style>
+    <% if (customCss) { %>
+    <%= customCss %>
+    <% } %>
+  </style>
+</head>
+<body class="min-h-screen bg-white">
+  <%- include('../partials/header.ejs', { page, pageContext, req }) %>
+  
+  <main>
+    <%- include('../templates/' + (templatePath ? templatePath.replace('pages/templates/', '') : 'default.ejs'), { 
+      page, 
+      blocks, 
+      seoMeta,
+      pageContext,
+      req 
+    }) %>
+  </main>
+  
+  <%- include('../partials/footer.ejs', { page, pageContext, req }) %>
+  
+  <% if (customJs) { %>
+  <script>
+    <%= customJs %>
+  </script>
+  <% } %>
+</body>
+</html>

package/views/pages/layouts/minimal.ejs

@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title><%= seoMeta.title || page.title || 'Page' %></title>
+  <% if (seoMeta.description) { %>
+  <meta name="description" content="<%= seoMeta.description %>">
+  <% } %>
+  <% if (seoMeta.keywords) { %>
+  <meta name="keywords" content="<%= seoMeta.keywords %>">
+  <% } %>
+  <% if (seoMeta.ogImage) { %>
+  <meta property="og:image" content="<%= seoMeta.ogImage %>">
+  <% } %>
+  <% if (seoMeta.canonicalUrl) { %>
+  <link rel="canonical" href="<%= seoMeta.canonicalUrl %>">
+  <% } %>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <style>
+    <% if (customCss) { %>
+    <%= customCss %>
+    <% } %>
+  </style>
+</head>
+<body class="min-h-screen bg-white">
+  <main class="container mx-auto px-4 py-8">
+    <%- include('../templates/' + (templatePath ? templatePath.replace('pages/templates/', '') : 'default.ejs'), { 
+      page, 
+      blocks, 
+      seoMeta,
+      req 
+    }) %>
+  </main>
+  
+  <% if (customJs) { %>
+  <script>
+    <%= customJs %>
+  </script>
+  <% } %>
+</body>
+</html>

package/views/pages/layouts/sidebar.ejs

@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title><%= seoMeta.title || page.title || 'Page' %></title>
+  <% if (seoMeta.description) { %>
+  <meta name="description" content="<%= seoMeta.description %>">
+  <% } %>
+  <% if (seoMeta.keywords) { %>
+  <meta name="keywords" content="<%= seoMeta.keywords %>">
+  <% } %>
+  <% if (seoMeta.ogImage) { %>
+  <meta property="og:image" content="<%= seoMeta.ogImage %>">
+  <% } %>
+  <% if (seoMeta.canonicalUrl) { %>
+  <link rel="canonical" href="<%= seoMeta.canonicalUrl %>">
+  <% } %>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <style>
+    <% if (customCss) { %>
+    <%= customCss %>
+    <% } %>
+  </style>
+</head>
+<body class="min-h-screen bg-gray-50">
+  <%- include('../partials/header.ejs', { page, req }) %>
+  
+  <div class="container mx-auto px-4 py-8">
+    <div class="flex flex-col lg:flex-row gap-8">
+      <aside class="lg:w-64 flex-shrink-0">
+        <%- include('../partials/sidebar.ejs', { page, req }) %>
+      </aside>
+      
+      <main class="flex-1">
+        <%- include('../templates/' + (templatePath ? templatePath.replace('pages/templates/', '') : 'default.ejs'), { 
+          page, 
+          blocks, 
+          seoMeta,
+          req 
+        }) %>
+      </main>
+    </div>
+  </div>
+  
+  <%- include('../partials/footer.ejs', { page, req }) %>
+  
+  <% if (customJs) { %>
+  <script>
+    <%= customJs %>
+  </script>
+  <% } %>
+</body>
+</html>

package/views/pages/partials/footer.ejs

@@ -0,0 +1,13 @@
+<footer class="bg-gray-900 text-white py-8 mt-auto">
+  <div class="container mx-auto px-4">
+    <div class="flex flex-col md:flex-row justify-between items-center">
+      <p class="text-gray-400 text-sm">
+        &copy; <%= new Date().getFullYear() %> All rights reserved.
+      </p>
+      <div class="flex space-x-6 mt-4 md:mt-0">
+        <a href="/privacy" class="text-gray-400 hover:text-white text-sm">Privacy</a>
+        <a href="/terms" class="text-gray-400 hover:text-white text-sm">Terms</a>
+      </div>
+    </div>
+  </div>
+</footer>

package/views/pages/partials/header.ejs

@@ -0,0 +1,12 @@
+<header class="bg-white shadow-sm border-b border-gray-200">
+  <div class="container mx-auto px-4">
+    <nav class="flex items-center justify-between h-16">
+      <a href="/" class="text-xl font-bold text-gray-900">
+        Site
+      </a>
+      <div class="flex items-center space-x-6">
+        <a href="/" class="text-gray-600 hover:text-gray-900">Home</a>
+      </div>
+    </nav>
+  </div>
+</header>

package/views/pages/partials/sidebar.ejs

@@ -0,0 +1,8 @@
+<nav class="bg-white rounded-lg shadow-sm border border-gray-200 p-4">
+  <h3 class="font-semibold text-gray-900 mb-4">Navigation</h3>
+  <ul class="space-y-2">
+    <li>
+      <a href="/" class="block text-gray-600 hover:text-blue-600 py-1">Home</a>
+    </li>
+  </ul>
+</nav>

package/views/pages/runtime/page.ejs

@@ -0,0 +1,10 @@
+<%- include('../layouts/' + (layoutPath ? layoutPath.replace('pages/layouts/', '') : 'default.ejs'), { 
+  page, 
+  blocks, 
+  seoMeta, 
+  customCss, 
+  customJs, 
+  templatePath,
+  pageContext,
+  req 
+}) %>

package/views/pages/templates/article.ejs

@@ -0,0 +1,20 @@
+<article class="container mx-auto px-4 py-12 max-w-3xl">
+  <header class="mb-8">
+    <h1 class="text-4xl font-bold text-gray-900 mb-4"><%= page.title %></h1>
+    <% if (page.publishedAt) { %>
+    <p class="text-gray-500 text-sm">
+      Published on <%= new Date(page.publishedAt).toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' }) %>
+    </p>
+    <% } %>
+  </header>
+  
+  <div class="prose prose-lg max-w-none">
+    <% if (blocks && blocks.length > 0) { %>
+      <% for (const block of blocks) { %>
+        <%- include('../blocks/' + block.type + '.ejs', { block, page, pageContext, req }) %>
+      <% } %>
+    <% } else { %>
+      <p class="text-gray-600">This article has no content yet.</p>
+    <% } %>
+  </div>
+</article>

package/views/pages/templates/default.ejs

@@ -0,0 +1,12 @@
+<div class="page-content">
+  <% if (blocks && blocks.length > 0) { %>
+    <% for (const block of blocks) { %>
+      <%- include('../blocks/' + block.type + '.ejs', { block, page, pageContext, req }) %>
+    <% } %>
+  <% } else { %>
+    <div class="container mx-auto px-4 py-16">
+      <h1 class="text-4xl font-bold text-gray-900 mb-4"><%= page.title %></h1>
+      <p class="text-gray-600">This page has no content blocks yet.</p>
+    </div>
+  <% } %>
+</div>

package/views/pages/templates/landing.ejs

@@ -0,0 +1,14 @@
+<div class="landing-page">
+  <% if (blocks && blocks.length > 0) { %>
+    <% for (const block of blocks) { %>
+      <%- include('../blocks/' + block.type + '.ejs', { block, page, req }) %>
+    <% } %>
+  <% } else { %>
+    <section class="bg-gradient-to-r from-blue-600 to-indigo-700 text-white py-20">
+      <div class="container mx-auto px-4 text-center">
+        <h1 class="text-5xl font-bold mb-6"><%= page.title %></h1>
+        <p class="text-xl opacity-90 mb-8">Add blocks to customize this landing page</p>
+      </div>
+    </section>
+  <% } %>
+</div>

package/views/pages/templates/listing.ejs

@@ -0,0 +1,15 @@
+<div class="container mx-auto px-4 py-12">
+  <h1 class="text-4xl font-bold text-gray-900 mb-8"><%= page.title %></h1>
+  
+  <% if (blocks && blocks.length > 0) { %>
+    <% for (const block of blocks) { %>
+      <%- include('../blocks/' + block.type + '.ejs', { block, page, pageContext, req }) %>
+    <% } %>
+  <% } else { %>
+    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+      <div class="bg-white rounded-lg shadow-md p-6 border border-gray-200">
+        <p class="text-gray-600">Add listing blocks to display items here.</p>
+      </div>
+    </div>
+  <% } %>
+</div>

package/views/partials/admin-image-upload-modal.ejs

@@ -0,0 +1,221 @@
+<div id="image-upload-modal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50">
+  <div class="bg-white rounded-lg shadow-xl w-full max-w-2xl mx-4">
+    <div class="flex items-center justify-between px-6 py-4 border-b">
+      <h3 class="text-lg font-semibold text-gray-900">Upload image</h3>
+      <button type="button" id="image-upload-close" class="text-gray-400 hover:text-gray-600">
+        <i class="ti ti-x text-xl"></i>
+      </button>
+    </div>
+
+    <div class="p-6 space-y-4">
+      <div class="text-sm text-gray-600">
+        Paste an image (<span class="font-mono">Ctrl+V</span>), drop a file, or pick a file.
+      </div>
+
+      <div
+        id="image-upload-dropzone"
+        class="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center hover:border-blue-400 transition-colors"
+      >
+        <div class="text-gray-500">
+          <i class="ti ti-photo-plus text-4xl mb-2"></i>
+          <div class="font-medium">Drop image here</div>
+          <div class="text-sm">or</div>
+        </div>
+        <div class="mt-3">
+          <input id="image-upload-file" type="file" accept="image/*" class="hidden" />
+          <button type="button" id="image-upload-pick" class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
+            Pick file
+          </button>
+        </div>
+      </div>
+
+      <div id="image-upload-progress" class="hidden">
+        <div class="text-sm text-gray-600 mb-2">Uploading...</div>
+        <div class="w-full bg-gray-200 rounded h-2">
+          <div id="image-upload-progress-bar" class="bg-blue-500 h-2 rounded" style="width: 20%"></div>
+        </div>
+      </div>
+
+      <div id="image-upload-result" class="hidden">
+        <div class="text-sm text-gray-600 mb-2">Uploaded URL</div>
+        <div class="flex gap-2">
+          <input id="image-upload-url" type="text" class="flex-1 border rounded px-3 py-2 text-sm" readonly />
+          <button type="button" id="image-upload-copy" class="bg-gray-100 text-gray-800 px-3 py-2 rounded hover:bg-gray-200">
+            Copy
+          </button>
+          <button type="button" id="image-upload-use" class="bg-green-500 text-white px-3 py-2 rounded hover:bg-green-600">
+            Use
+          </button>
+        </div>
+      </div>
+
+      <div id="image-upload-error" class="hidden text-sm text-red-600"></div>
+    </div>
+  </div>
+</div>
+
+<script>
+  (function() {
+    const modal = document.getElementById('image-upload-modal');
+    const closeBtn = document.getElementById('image-upload-close');
+    const dropzone = document.getElementById('image-upload-dropzone');
+    const fileInput = document.getElementById('image-upload-file');
+    const pickBtn = document.getElementById('image-upload-pick');
+    const progress = document.getElementById('image-upload-progress');
+    const progressBar = document.getElementById('image-upload-progress-bar');
+    const result = document.getElementById('image-upload-result');
+    const urlInput = document.getElementById('image-upload-url');
+    const copyBtn = document.getElementById('image-upload-copy');
+    const useBtn = document.getElementById('image-upload-use');
+    const errorBox = document.getElementById('image-upload-error');
+
+    let currentOnSelect = null;
+    let currentNamespace = 'blog-images';
+    let currentVisibility = 'public';
+    let lastUrl = '';
+
+    function show(el) {
+      el.classList.remove('hidden');
+    }
+
+    function hide(el) {
+      el.classList.add('hidden');
+    }
+
+    function setError(msg) {
+      errorBox.textContent = msg || '';
+      if (msg) show(errorBox);
+      else hide(errorBox);
+    }
+
+    function resetUI() {
+      hide(progress);
+      hide(result);
+      setError('');
+      urlInput.value = '';
+      lastUrl = '';
+      progressBar.style.width = '20%';
+    }
+
+    function openModal({ onSelect, namespace, visibility } = {}) {
+      currentOnSelect = typeof onSelect === 'function' ? onSelect : null;
+      currentNamespace = namespace ? String(namespace) : 'blog-images';
+      currentVisibility = visibility ? String(visibility) : 'public';
+      resetUI();
+      modal.classList.remove('hidden');
+      modal.classList.add('flex');
+    }
+
+    function closeModal() {
+      modal.classList.add('hidden');
+      modal.classList.remove('flex');
+      currentOnSelect = null;
+    }
+
+    async function uploadFile(file) {
+      try {
+        resetUI();
+        show(progress);
+        progressBar.style.width = '35%';
+
+        const form = new FormData();
+        form.append('file', file);
+        form.append('namespace', currentNamespace);
+        form.append('visibility', currentVisibility);
+
+        const res = await fetch('<%= baseUrl %>/api/admin/assets/upload', {
+          method: 'POST',
+          body: form,
+        });
+
+        progressBar.style.width = '80%';
+
+        const data = await res.json().catch(() => ({}));
+        if (!res.ok) {
+          throw new Error(data?.error || 'Upload failed');
+        }
+
+        const url = data?.asset?.publicUrl || '';
+        if (!url) {
+          throw new Error('Upload succeeded but no publicUrl was returned');
+        }
+
+        lastUrl = url;
+        urlInput.value = url;
+        hide(progress);
+        show(result);
+        progressBar.style.width = '100%';
+      } catch (e) {
+        hide(progress);
+        setError(e?.message ? String(e.message) : 'Upload failed');
+      }
+    }
+
+    function fileFromClipboardEvent(e) {
+      const items = e?.clipboardData?.items;
+      if (!items || !items.length) return null;
+      for (const item of items) {
+        if (item && item.kind === 'file') {
+          const f = item.getAsFile();
+          if (f && String(f.type || '').startsWith('image/')) return f;
+        }
+      }
+      return null;
+    }
+
+    pickBtn.addEventListener('click', () => fileInput.click());
+    fileInput.addEventListener('change', () => {
+      const file = fileInput.files && fileInput.files[0];
+      if (file) uploadFile(file);
+      fileInput.value = '';
+    });
+
+    closeBtn.addEventListener('click', closeModal);
+    modal.addEventListener('click', (e) => {
+      if (e.target === modal) closeModal();
+    });
+
+    copyBtn.addEventListener('click', async () => {
+      try {
+        if (!navigator.clipboard?.writeText) throw new Error('Clipboard API not available');
+        await navigator.clipboard.writeText(urlInput.value);
+      } catch (e) {
+        setError(e?.message ? String(e.message) : 'Failed to copy');
+      }
+    });
+
+    useBtn.addEventListener('click', () => {
+      if (currentOnSelect && lastUrl) {
+        currentOnSelect(lastUrl);
+      }
+      closeModal();
+    });
+
+    dropzone.addEventListener('dragover', (e) => {
+      e.preventDefault();
+      dropzone.classList.add('border-blue-400');
+    });
+
+    dropzone.addEventListener('dragleave', () => {
+      dropzone.classList.remove('border-blue-400');
+    });
+
+    dropzone.addEventListener('drop', (e) => {
+      e.preventDefault();
+      dropzone.classList.remove('border-blue-400');
+      const file = e.dataTransfer?.files && e.dataTransfer.files[0];
+      if (file) uploadFile(file);
+    });
+
+    document.addEventListener('paste', (e) => {
+      if (modal.classList.contains('hidden')) return;
+      const file = fileFromClipboardEvent(e);
+      if (file) {
+        e.preventDefault();
+        uploadFile(file);
+      }
+    });
+
+    window.openImageUploadModal = openModal;
+  })();
+</script>