vibespot 1.1.1 → 1.2.0

package/ui/index.html

@@ -83,32 +83,110 @@
 
         <!-- Main action buttons -->
         <div class="setup__options" id="setup-options">
-          <div class="setup__actions">
-            <button class="setup__action-btn" data-action="new">
-              <span class="setup__action-icon">&#43;</span>
-              <span>New Theme</span>
-            </button>
-            <button class="setup__action-btn" data-action="continue">
-              <span class="setup__action-icon">&#9654;</span>
-              <span>Continue</span>
-            </button>
-            <button class="setup__action-btn" data-action="download">
-              <span class="setup__action-icon">&#8595;</span>
-              <span>From HubSpot</span>
-            </button>
-            <button class="setup__action-btn" data-action="figma">
-              <span class="setup__action-icon">&#9670;</span>
-              <span>From Figma</span>
-              <span class="setup__action-badge">Beta</span>
+
+          <!-- Returning users: recent projects (auto-shown when projects exist) -->
+          <div class="setup__recent hidden" id="setup-recent">
+            <div class="setup__recent-header">
+              <span class="setup__recent-title">Continue where you left off</span>
+              <button type="button" class="setup__recent-all hidden" id="setup-recent-all">View all</button>
+            </div>
+            <div class="setup__recent-list" id="setup-recent-list"></div>
+          </div>
+
+          <!-- Primary path: describe-it prompt -->
+          <div class="setup__prompt-card" id="setup-prompt-card">
+            <textarea
+              class="setup__prompt-input"
+              id="setup-prompt-input"
+              rows="3"
+              placeholder="Describe the landing page you want to build..."
+            ></textarea>
+            <div class="setup__prompt-row">
+              <span class="setup__prompt-hint" id="setup-prompt-hint">Press <span id="setup-prompt-shortcut">&#8984;&#8629;</span> or click Build to start</span>
+              <button class="btn btn--primary setup__prompt-submit" id="setup-prompt-submit" disabled>
+                <span class="setup__prompt-submit-icon">&#9650;</span>
+                <span>Build</span>
+              </button>
+            </div>
+          </div>
+
+          <!-- Secondary path: pick a template -->
+          <div class="setup__secondary">
+            <button class="setup__secondary-btn" data-action="starter">
+              <span class="setup__secondary-icon">&#9733;</span>
+              <span class="setup__secondary-label">Start from Template</span>
+              <span class="setup__secondary-meta">Browse pre-built starters</span>
             </button>
-            <button class="setup__action-btn" data-action="convert">
-              <span class="setup__action-icon">&#8634;</span>
-              <span>From React</span>
-              <span class="setup__action-badge">Beta</span>
+          </div>
+
+          <!-- Starter template panel — sits directly under the "Start from Template" button -->
+          <div class="setup__panel" id="panel-starter">
+            <div class="starter-grid" id="starter-grid">
+              <div class="starter-card" data-starter-id="saas-landing">
+                <span class="starter-card__name">SaaS Landing Page</span>
+                <span class="starter-card__desc">Modern SaaS landing page with hero, features, pricing, and CTA</span>
+                <span class="starter-card__meta">4 modules</span>
+              </div>
+              <div class="starter-card" data-starter-id="portfolio">
+                <span class="starter-card__name">Portfolio</span>
+                <span class="starter-card__desc">Creative portfolio with project gallery, about section, and contact form</span>
+                <span class="starter-card__meta">4 modules</span>
+              </div>
+              <div class="starter-card" data-starter-id="restaurant">
+                <span class="starter-card__name">Restaurant</span>
+                <span class="starter-card__desc">Restaurant landing page with menu, reservations, and location info</span>
+                <span class="starter-card__meta">4 modules</span>
+              </div>
+              <div class="starter-card" data-starter-id="event">
+                <span class="starter-card__name">Event / Conference</span>
+                <span class="starter-card__desc">Event landing page with speakers, schedule, and registration</span>
+                <span class="starter-card__meta">4 modules</span>
+              </div>
+              <div class="starter-card" data-starter-id="coming-soon">
+                <span class="starter-card__name">Coming Soon</span>
+                <span class="starter-card__desc">Pre-launch page with signup form and feature preview</span>
+                <span class="starter-card__meta">3 modules</span>
+              </div>
+            </div>
+            <div class="starter-create hidden" id="starter-create">
+              <p class="starter-create__label" id="starter-create-label"></p>
+              <div class="setup__row">
+                <input type="text" class="setup__input setup__input--wide" id="starter-theme-name" placeholder="my-landing-page" />
+                <button class="btn btn--primary" id="btn-create-from-starter">Create</button>
+              </div>
+            </div>
+          </div>
+
+          <!-- More ways to start: collapsible advanced options -->
+          <div class="setup__more">
+            <button type="button" class="setup__more-toggle" id="setup-more-toggle" aria-expanded="false" aria-controls="setup-more-panel">
+              <span>More ways to start</span>
+              <span class="setup__more-chevron" aria-hidden="true">&#9662;</span>
             </button>
+            <div class="setup__more-panel hidden" id="setup-more-panel">
+              <div class="setup__actions">
+                <button class="setup__action-btn" data-action="new">
+                  <span class="setup__action-icon">&#43;</span>
+                  <span>Blank Theme</span>
+                </button>
+                <button class="setup__action-btn" data-action="download">
+                  <span class="setup__action-icon">&#8595;</span>
+                  <span>From HubSpot</span>
+                </button>
+                <button class="setup__action-btn" data-action="figma">
+                  <span class="setup__action-icon">&#9670;</span>
+                  <span>From Figma</span>
+                  <span class="setup__action-badge">Beta</span>
+                </button>
+                <button class="setup__action-btn" data-action="convert">
+                  <span class="setup__action-icon">&#8634;</span>
+                  <span>From React</span>
+                  <span class="setup__action-badge">Beta</span>
+                </button>
+              </div>
+            </div>
           </div>
 
-          <!-- Expandable panels (one visible at a time) -->
           <div class="setup__panel hidden" id="panel-new">
             <div class="setup__row">
               <input type="text" class="setup__input setup__input--wide" id="new-theme-name" placeholder="my-landing-page" />
@@ -233,6 +311,16 @@
           </button>
         </div>
 
+        <!-- Import Analysis -->
+        <section class="dashboard__section dashboard__section--inverse hidden" id="dashboard-inverse-section">
+          <div class="dashboard__section-header">
+            <h2 class="dashboard__section-title">Import Analysis</h2>
+            <span class="dashboard__section-hint" id="inverse-status">Analyzing theme...</span>
+            <button class="btn btn--sm btn--outline hidden" id="btn-inverse-apply-tokens" title="Seed shared CSS from inferred tokens">Apply Tokens</button>
+          </div>
+          <div class="inverse-summary" id="inverse-summary"></div>
+        </section>
+
         <!-- Brand Assets -->
         <section class="dashboard__section">
           <div class="dashboard__section-header">
@@ -326,8 +414,8 @@
               <div class="page-type-card__icon">
                 <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg>
               </div>
-              <span class="page-type-card__label">Module Only</span>
-              <span class="page-type-card__desc">Standalone module, no template</span>
+              <span class="page-type-card__label">Section Only</span>
+              <span class="page-type-card__desc">Standalone section, no template</span>
             </button>
           </div>
         </section>
@@ -346,16 +434,16 @@
         <!-- Module Library -->
         <section class="dashboard__section">
           <div class="dashboard__section-header">
-            <h2 class="dashboard__section-title">Module Library</h2>
+            <h2 class="dashboard__section-title">Section Library</h2>
           </div>
           <div class="dashboard__module-library" id="dashboard-module-library">
-            <p class="dashboard__empty-state">Modules will appear here as you build pages.</p>
+            <p class="dashboard__empty-state">Sections will appear here as you build pages.</p>
           </div>
           <div class="dashboard__module-preview hidden" id="dashboard-module-preview">
             <div class="dashboard__module-preview-header">
               <span class="dashboard__module-preview-name" id="dashboard-preview-name"></span>
               <span class="dashboard__module-preview-used" id="dashboard-preview-used"></span>
-              <button class="btn btn--danger btn--sm dashboard__module-preview-delete" id="dashboard-preview-delete">Delete module</button>
+              <button class="btn btn--danger btn--sm dashboard__module-preview-delete" id="dashboard-preview-delete">Delete section</button>
               <button class="dashboard__module-preview-close" id="dashboard-preview-close">&times;</button>
             </div>
             <iframe class="dashboard__module-preview-frame" id="dashboard-preview-frame" sandbox="allow-scripts allow-same-origin"></iframe>
@@ -389,6 +477,10 @@
             <svg width="10" height="18" viewBox="0 0 10 18" fill="none"><rect x="1" y="1" width="8" height="16" rx="1.5" stroke="currentColor" stroke-width="1.5"/><circle cx="5" cy="15" r="0.75" fill="currentColor"/></svg>
           </button>
         </div>
+        <button class="select-mode-toggle" id="select-mode-toggle" title="Select an element in the preview to reference it in chat" aria-pressed="false">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3l7 17 2-7 7-2z"/></svg>
+          <span>Select</span>
+        </button>
       </div>
       <div class="topbar__right">
         <button class="topbar__icon-btn" title="Submit feedback" onclick="vibeFeedback()">
@@ -401,6 +493,9 @@
         <button class="topbar__icon-btn" id="btn-history" title="Version History" style="display:none">
           <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
         </button>
+        <button class="topbar__icon-btn" id="btn-marketplace" title="Marketplace publication check">
+          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 9l1-5h16l1 5"/><path d="M5 9v11a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V9"/><path d="M9 22V12h6v10"/></svg>
+        </button>
         <button class="btn btn--primary" id="btn-upload" title="Deploy theme to HubSpot">
           <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right:4px;vertical-align:-2px"><path d="M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z"/></svg>
           Deploy
@@ -413,7 +508,7 @@
         <div class="module-bar" id="module-bar">
           <button class="module-bar__btn" id="btn-modules">
             <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg>
-            <span>Modules</span>
+            <span>Sections</span>
             <span class="module-bar__count" id="module-count">0</span>
           </button>
         </div>
@@ -421,9 +516,9 @@
         <div class="module-slideout" id="module-slideout">
           <div class="module-slideout__view" id="module-list-view">
             <div class="module-slideout__header">
-              <span class="module-slideout__title">Modules</span>
+              <span class="module-slideout__title">Sections</span>
               <span class="module-slideout__count" id="slideout-module-count">0</span>
-              <button class="module-slideout__add" id="btn-add-module" title="Add module from library">+</button>
+              <button class="module-slideout__add" id="btn-add-module" title="Add section from library">+</button>
               <button class="module-slideout__close" id="module-slideout-close">&times;</button>
             </div>
             <div class="module-library-dropdown hidden" id="module-library-dropdown"></div>
@@ -449,14 +544,36 @@
               <p>Describe what you want or pick a template to get started.</p>
 
               <div class="chat__section-label">Templates</div>
-              <div class="chat__starters" id="starter-templates">
-                <button class="starter-btn" data-prompt="Create a modern SaaS landing page with a hero section featuring a gradient background, a features grid with icons, a testimonials carousel, a pricing table with 3 tiers, and a CTA section.">SaaS Landing Page</button>
-                <button class="starter-btn" data-prompt="Create a portfolio landing page with a hero section, a project gallery grid, an about/bio section, a skills section, and a contact form section.">Portfolio</button>
-                <button class="starter-btn" data-prompt="Create a restaurant landing page with a hero section featuring a food image background, a menu section with categories, a reservations section, a reviews section, and a location/hours section.">Restaurant</button>
-                <button class="starter-btn" data-prompt="Create an event landing page with a countdown hero, a speakers section with photos and bios, a schedule/agenda section, a sponsors section with logos, and a registration CTA section.">Event / Conference</button>
+              <div class="chat__starters chat__starters--rich" id="starter-templates">
+                <button class="starter-btn starter-btn--rich" data-prompt="Create a modern SaaS landing page with a hero section featuring a gradient background, a features grid with icons, a testimonials carousel, a pricing table with 3 tiers, and a CTA section.">
+                  <span class="starter-btn__label">SaaS Landing Page</span>
+                  <span class="starter-btn__desc">Hero, features, testimonials, pricing &amp; CTA</span>
+                </button>
+                <button class="starter-btn starter-btn--rich" data-prompt="Create a portfolio landing page with a hero section, a project gallery grid, an about/bio section, a skills section, and a contact form section.">
+                  <span class="starter-btn__label">Portfolio</span>
+                  <span class="starter-btn__desc">Hero, project gallery, about, skills &amp; contact</span>
+                </button>
+                <button class="starter-btn starter-btn--rich" data-prompt="Create a restaurant landing page with a hero section featuring a food image background, a menu section with categories, a reservations section, a reviews section, and a location/hours section.">
+                  <span class="starter-btn__label">Restaurant</span>
+                  <span class="starter-btn__desc">Hero, menu, reservations, reviews &amp; hours</span>
+                </button>
+                <button class="starter-btn starter-btn--rich" data-prompt="Create an event landing page with a countdown hero, a speakers section with photos and bios, a schedule/agenda section, a sponsors section with logos, and a registration CTA section.">
+                  <span class="starter-btn__label">Event / Conference</span>
+                  <span class="starter-btn__desc">Countdown hero, speakers, schedule &amp; sponsors</span>
+                </button>
               </div>
             </div>
           </div>
+          <div class="history-timeline hidden" id="history-timeline" aria-label="Version history">
+            <button class="history-timeline__nav" id="history-timeline-undo" title="Undo (Ctrl+Z)" aria-label="Undo">
+              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"/></svg>
+            </button>
+            <div class="history-timeline__track" id="history-timeline-track"></div>
+            <button class="history-timeline__nav" id="history-timeline-redo" title="Redo (Ctrl+Shift+Z)" aria-label="Redo">
+              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>
+            </button>
+            <div class="history-timeline__tooltip hidden" id="history-timeline-tooltip" role="tooltip"></div>
+          </div>
           <div class="chat__input-area">
             <div class="chat__mode-bar">
               <button class="plan-toggle" id="plan-mode-toggle" title="Plan mode — deliberate before generating" aria-pressed="false">
@@ -467,6 +584,7 @@
                 <span class="plan-toggle__state">Off</span>
               </button>
             </div>
+            <div class="chat__suggestions hidden" id="chat-suggestions" aria-label="Suggested next steps"></div>
             <div class="chat__file-chips" id="file-chips"></div>
             <div class="chat__input-wrapper">
               <textarea class="chat__input" id="chat-input" placeholder="Describe your landing page..." rows="1"></textarea>
@@ -622,11 +740,12 @@
   <script src="/vendor/marked.umd.js"></script>
   <script src="/vendor/codemirror-bundle.global.js"></script>
   <script src="/dialog.js"></script>
-  <script src="/setup.js"></script>
+  <script src="/setup.js?v=110"></script>
   <script src="/dashboard.js"></script>
   <script src="/settings.js"></script>
   <script src="/upload-panel.js"></script>
-  <script src="/chat.js"></script>
+  <script src="/marketplace.js"></script>
+  <script src="/chat.js?v=108"></script>
   <script src="/plan.js"></script>
   <script src="/preview.js"></script>
   <script src="/field-editor.js"></script>

package/ui/marketplace.js

@@ -0,0 +1,218 @@
+/**
+ * Marketplace publication panel — runs the Marketplace check against the
+ * active theme, lets users browse findings, fix the auto-fixable ones, and
+ * edit the marketplace.json listing sidecar.
+ */
+
+async function openMarketplacePanel() {
+  const overlay = document.createElement("div");
+  overlay.className = "confirm-overlay marketplace-overlay";
+  overlay.innerHTML = `
+    <div class="confirm-dialog marketplace-dialog">
+      <div class="confirm-dialog__title">HubSpot Marketplace check</div>
+      <div class="marketplace-body" id="marketplace-body">
+        <p class="confirm-dialog__detail">Running check…</p>
+      </div>
+      <div class="confirm-dialog__actions">
+        <button class="btn btn--ghost" data-action="close">Close</button>
+        <button class="btn btn--ghost" data-action="edit">Edit listing</button>
+        <button class="btn btn--ghost" data-action="fix" disabled>Apply fixes</button>
+        <button class="btn btn--primary" data-action="recheck">Re-check</button>
+      </div>
+    </div>
+  `;
+  document.body.appendChild(overlay);
+
+  const body = overlay.querySelector("#marketplace-body");
+  const fixBtn = overlay.querySelector('[data-action="fix"]');
+  const editBtn = overlay.querySelector('[data-action="edit"]');
+  const recheckBtn = overlay.querySelector('[data-action="recheck"]');
+  const closeBtn = overlay.querySelector('[data-action="close"]');
+
+  let lastCategories = [];
+
+  async function refresh() {
+    body.innerHTML = `<p class="confirm-dialog__detail">Running check…</p>`;
+    try {
+      const res = await fetch("/api/marketplace/check");
+      const data = await res.json();
+      if (!res.ok) throw new Error(data.error || "Check failed");
+      lastCategories = data.categories || [];
+      renderReport(body, data.report);
+      const autoFixable = (data.report.findings || []).some((f) => f.autoFixable);
+      fixBtn.disabled = !autoFixable;
+    } catch (err) {
+      body.innerHTML = `<p class="confirm-dialog__detail">${esc(err.message)}</p>`;
+    }
+  }
+
+  recheckBtn.addEventListener("click", refresh);
+  closeBtn.addEventListener("click", () => overlay.remove());
+  overlay.addEventListener("click", (e) => { if (e.target === overlay) overlay.remove(); });
+
+  fixBtn.addEventListener("click", async () => {
+    fixBtn.disabled = true;
+    try {
+      const res = await fetch("/api/marketplace/fix", { method: "POST" });
+      const data = await res.json();
+      if (!res.ok) throw new Error(data.error || "Fix failed");
+      renderReport(body, data.report, data.fix);
+      const stillFixable = (data.report.findings || []).some((f) => f.autoFixable);
+      fixBtn.disabled = !stillFixable;
+    } catch (err) {
+      await vibeAlert(err.message, "Fix failed");
+    }
+  });
+
+  editBtn.addEventListener("click", async () => {
+    try {
+      const res = await fetch("/api/marketplace/listing");
+      const data = await res.json();
+      if (!res.ok) throw new Error(data.error || "Could not load listing");
+      lastCategories = data.categories || lastCategories;
+      const next = await openListingEditor(data.metadata, lastCategories);
+      if (!next) return;
+      const save = await fetch("/api/marketplace/listing", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(next),
+      });
+      const result = await save.json();
+      if (!save.ok) throw new Error(result.error || "Save failed");
+      await refresh();
+    } catch (err) {
+      await vibeAlert(err.message, "Listing");
+    }
+  });
+
+  refresh();
+}
+
+function renderReport(container, report, fix) {
+  if (!report) {
+    container.innerHTML = `<p class="confirm-dialog__detail">No report available.</p>`;
+    return;
+  }
+
+  const errors = report.findings.filter((f) => f.severity === "error");
+  const warnings = report.findings.filter((f) => f.severity === "warning");
+  const info = report.findings.filter((f) => f.severity === "info");
+
+  const summaryClass = report.passed ? "marketplace-summary--ok" : "marketplace-summary--fail";
+  const summaryText = report.passed
+    ? `Theme passes Marketplace checks.`
+    : `Theme is not yet ready.`;
+
+  let html = `
+    <div class="marketplace-summary ${summaryClass}">
+      <strong>${esc(summaryText)}</strong>
+      <div class="marketplace-summary__counts">
+        <span class="marketplace-pill marketplace-pill--error">${errors.length} errors</span>
+        <span class="marketplace-pill marketplace-pill--warn">${warnings.length} warnings</span>
+        <span class="marketplace-pill marketplace-pill--info">${info.length} notes</span>
+      </div>
+    </div>
+  `;
+
+  if (fix && (fix.applied?.length || fix.skipped?.length)) {
+    html += `<div class="marketplace-fix-result">`;
+    if (fix.applied?.length) {
+      html += `<strong>Applied:</strong><ul>${fix.applied.map((s) => `<li>${esc(s)}</li>`).join("")}</ul>`;
+    }
+    if (fix.skipped?.length) {
+      html += `<strong>Skipped:</strong><ul>${fix.skipped.map((s) => `<li>${esc(s)}</li>`).join("")}</ul>`;
+    }
+    html += `</div>`;
+  }
+
+  html += renderFindingGroup("Errors", errors);
+  html += renderFindingGroup("Warnings", warnings);
+  html += renderFindingGroup("Notes", info);
+
+  if (report.findings.length === 0) {
+    html += `<p class="confirm-dialog__detail">Nothing to flag — submit when ready.</p>`;
+  }
+
+  container.innerHTML = html;
+}
+
+function renderFindingGroup(title, findings) {
+  if (findings.length === 0) return "";
+  const items = findings.map((f) => `
+    <li class="marketplace-finding marketplace-finding--${f.severity}">
+      ${f.file ? `<code class="marketplace-finding__file">${esc(f.file)}</code>` : ""}
+      <span class="marketplace-finding__msg">${esc(f.message)}</span>
+      ${f.fix ? `<div class="marketplace-finding__fix">${esc(f.fix)}</div>` : ""}
+    </li>
+  `).join("");
+  return `<section class="marketplace-section"><h4>${esc(title)}</h4><ul class="marketplace-findings">${items}</ul></section>`;
+}
+
+function openListingEditor(existing, categories) {
+  const meta = existing || {};
+  return new Promise((resolve) => {
+    const overlay = document.createElement("div");
+    overlay.className = "confirm-overlay";
+    const catOptions = (categories || []).map(
+      (c) => `<option value="${esc(c)}" ${c === meta.category ? "selected" : ""}>${esc(c)}</option>`
+    ).join("");
+    overlay.innerHTML = `
+      <div class="confirm-dialog marketplace-dialog">
+        <div class="confirm-dialog__title">Marketplace listing</div>
+        <form id="marketplace-listing-form" class="marketplace-listing-form">
+          <label>Category
+            <select name="category"><option value="">Select…</option>${catOptions}</select>
+          </label>
+          <label>Description
+            <textarea name="description" rows="3" placeholder="A 1–2 sentence summary for the Marketplace listing.">${esc(meta.description || "")}</textarea>
+          </label>
+          <label>Features (comma-separated, 2–5 items)
+            <input name="features" value="${esc((meta.features || []).join(", "))}" placeholder="Hero, Pricing, Testimonials, Footer" />
+          </label>
+          <label>Support URL
+            <input type="url" name="supportUrl" value="${esc(meta.supportUrl || "")}" placeholder="https://example.com/support" />
+          </label>
+          <label>Documentation URL (optional)
+            <input type="url" name="documentationUrl" value="${esc(meta.documentationUrl || "")}" placeholder="https://example.com/docs" />
+          </label>
+          <label>Pricing tier
+            <select name="pricingTier">
+              <option value="free" ${meta.pricingTier === "free" ? "selected" : ""}>Free</option>
+              <option value="paid" ${meta.pricingTier === "paid" ? "selected" : ""}>Paid</option>
+            </select>
+          </label>
+        </form>
+        <div class="confirm-dialog__actions">
+          <button class="btn btn--ghost" data-action="cancel">Cancel</button>
+          <button class="btn btn--primary" data-action="save">Save</button>
+        </div>
+      </div>
+    `;
+    document.body.appendChild(overlay);
+    const form = overlay.querySelector("form");
+
+    const cleanup = () => overlay.remove();
+    overlay.querySelector('[data-action="cancel"]').addEventListener("click", () => { cleanup(); resolve(null); });
+    overlay.addEventListener("click", (e) => { if (e.target === overlay) { cleanup(); resolve(null); } });
+    overlay.querySelector('[data-action="save"]').addEventListener("click", () => {
+      const fd = new FormData(form);
+      const features = String(fd.get("features") || "")
+        .split(",").map((s) => s.trim()).filter(Boolean);
+      const result = {
+        category: String(fd.get("category") || "") || undefined,
+        description: String(fd.get("description") || "") || undefined,
+        features: features.length ? features : undefined,
+        supportUrl: String(fd.get("supportUrl") || "") || undefined,
+        documentationUrl: String(fd.get("documentationUrl") || "") || undefined,
+        pricingTier: String(fd.get("pricingTier") || "") || undefined,
+      };
+      cleanup();
+      resolve(result);
+    });
+  });
+}
+
+document.addEventListener("DOMContentLoaded", () => {
+  const btn = document.getElementById("btn-marketplace");
+  if (btn) btn.addEventListener("click", openMarketplacePanel);
+});