vibespot 0.4.4 → 0.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vibespot",
-  "version": "0.4.4",
+  "version": "0.5.0",
   "description": "AI-powered HubSpot CMS landing page builder — vibe coding & React converter",
   "type": "module",
   "bin": {

package/ui/chat.js

@@ -184,14 +184,14 @@ function appendUserMessage(text, timestamp) {
   const div = document.createElement("div");
   div.className = "chat-msg chat-msg--user";
   div.innerHTML = `
+    <div class="chat-msg__avatar chat-msg__avatar--user">Y</div>
     <div class="chat-msg__content">
       <div class="chat-msg__header">
         <span class="chat-msg__sender">You</span>
         <span class="chat-msg__time">${time}</span>
       </div>
       <div class="chat-msg__bubble">${escapeHtml(text)}</div>
-    </div>
-    <div class="chat-msg__avatar chat-msg__avatar--user">Y</div>`;
+    </div>`;
   messagesEl.appendChild(div);
   scrollToBottom();
 }
@@ -525,9 +525,11 @@ function timeAgoShort(timestamp) {
 
 function updateModuleList(moduleNames) {
   const itemsEl = document.getElementById("module-items");
-  const countEl = document.getElementById("module-count");
+  const barCountEl = document.getElementById("module-count");
+  const slideoutCountEl = document.getElementById("slideout-module-count");
 
-  countEl.textContent = moduleNames.length;
+  if (barCountEl) barCountEl.textContent = moduleNames.length;
+  if (slideoutCountEl) slideoutCountEl.textContent = moduleNames.length;
   itemsEl.innerHTML = "";
 
   for (const name of moduleNames) {
@@ -541,20 +543,12 @@ function updateModuleList(moduleNames) {
       <span class="module-item__delete" title="Delete module">&times;</span>
     `;
 
-    // Click to scroll to module in preview
-    item.querySelector(".module-item__name").addEventListener("click", () => {
-      scrollPreviewToModule(name);
-      highlightModuleItem(name);
-    });
-
-    // Click gear to open field editor
     item.querySelector(".module-item__edit").addEventListener("click", (e) => {
       e.stopPropagation();
       openFieldEditor(name);
       highlightModuleItem(name);
     });
 
-    // Click × to delete module
     item.querySelector(".module-item__delete").addEventListener("click", (e) => {
       e.stopPropagation();
       confirmDeleteModule(name);
@@ -563,7 +557,6 @@ function updateModuleList(moduleNames) {
     itemsEl.appendChild(item);
   }
 
-  // Set up drag-and-drop reordering
   setupDragReorder(itemsEl);
 }
 
@@ -573,6 +566,32 @@ function highlightModuleItem(name) {
   });
 }
 
+// ---------------------------------------------------------------------------
+// Module slideout
+// ---------------------------------------------------------------------------
+
+function openModuleSlideout() {
+  const slideout = document.getElementById("module-slideout");
+  document.getElementById("module-list-view").classList.remove("hidden");
+  document.getElementById("module-editor-view").classList.add("hidden");
+  slideout.classList.add("open");
+}
+
+function closeModuleSlideout() {
+  document.getElementById("module-slideout").classList.remove("open");
+}
+
+function showEditorView(moduleName) {
+  document.getElementById("module-list-view").classList.add("hidden");
+  document.getElementById("module-editor-view").classList.remove("hidden");
+  document.getElementById("module-slideout").classList.add("open");
+}
+
+function showModuleListView() {
+  document.getElementById("module-editor-view").classList.add("hidden");
+  document.getElementById("module-list-view").classList.remove("hidden");
+}
+
 // ---------------------------------------------------------------------------
 // Module library — add modules from other templates
 // ---------------------------------------------------------------------------
@@ -646,9 +665,24 @@ async function addModuleFromLibrary(moduleName) {
   }
 }
 
-// Add module button listener
+// Module bar button → toggle slideout
+document.getElementById("btn-modules")?.addEventListener("click", () => {
+  const slideout = document.getElementById("module-slideout");
+  if (slideout.classList.contains("open")) {
+    closeModuleSlideout();
+  } else {
+    openModuleSlideout();
+  }
+});
+
+// Add module button (inside slideout)
 document.getElementById("btn-add-module").addEventListener("click", toggleModuleLibraryDropdown);
 
+// Slideout close buttons
+document.getElementById("module-slideout-close")?.addEventListener("click", closeModuleSlideout);
+document.getElementById("field-editor-back")?.addEventListener("click", showModuleListView);
+document.getElementById("field-editor-close")?.addEventListener("click", closeModuleSlideout);
+
 // Close dropdown when clicking outside
 document.addEventListener("click", (e) => {
   const dropdown = document.getElementById("module-library-dropdown");
@@ -658,62 +692,172 @@ document.addEventListener("click", (e) => {
   }
 });
 
-async function confirmDeleteModule(moduleName) {
-  const ok = await vibeConfirm(`Delete "${escapeHtml(moduleName)}"?`, "This cannot be undone.", { confirmLabel: "Delete" });
-  if (!ok) return;
-
-  try {
-    await fetch("/api/modules", {
-      method: "DELETE",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ moduleName }),
+function confirmDeleteModule(moduleName) {
+  return new Promise((resolve) => {
+    let deleteEntirely = false;
+
+    const overlay = document.createElement("div");
+    overlay.className = "confirm-overlay";
+    overlay.innerHTML = `
+      <div class="confirm-dialog">
+        <div class="confirm-dialog__title">Remove "${escapeHtml(moduleName)}"?</div>
+        <p class="confirm-dialog__detail">Module will be removed from this page but kept in your library.</p>
+        <label class="confirm-dialog__toggle">
+          <span class="confirm-dialog__toggle-switch">
+            <input type="checkbox" data-role="toggle" />
+            <span class="confirm-dialog__toggle-slider"></span>
+          </span>
+          <span class="confirm-dialog__toggle-label">Delete entirely</span>
+        </label>
+        <div class="confirm-dialog__toggle-warn">Cannot be undone!</div>
+        <div class="confirm-dialog__actions">
+          <button class="btn btn--secondary" data-action="cancel">Cancel</button>
+          <button class="btn btn--primary" data-action="confirm">Remove</button>
+        </div>
+      </div>
+    `;
+    document.body.appendChild(overlay);
+
+    const toggle = overlay.querySelector('[data-role="toggle"]');
+    const confirmBtn = overlay.querySelector('[data-action="confirm"]');
+    const warnEl = overlay.querySelector(".confirm-dialog__toggle-warn");
+    warnEl.style.display = "none";
+
+    toggle.addEventListener("change", () => {
+      deleteEntirely = toggle.checked;
+      if (deleteEntirely) {
+        confirmBtn.textContent = "Delete";
+        confirmBtn.className = "btn btn--danger";
+        warnEl.style.display = "";
+      } else {
+        confirmBtn.textContent = "Remove";
+        confirmBtn.className = "btn btn--primary";
+        warnEl.style.display = "none";
+      }
     });
-    // Remove from list and refresh preview
-    const item = document.querySelector(`.module-item[data-module="${CSS.escape(moduleName)}"]`);
-    if (item) item.remove();
-    const countEl = document.getElementById("module-count");
-    countEl.textContent = document.querySelectorAll(".module-item").length;
-    refreshPreview();
-  } catch {
-    // silently fail
-  }
+
+    const close = (confirmed) => {
+      overlay.remove();
+      if (!confirmed) { resolve(); return; }
+
+      fetch("/api/modules", {
+        method: "DELETE",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ moduleName, deleteEntirely }),
+      }).then(() => {
+        const item = document.querySelector(`.module-item[data-module="${CSS.escape(moduleName)}"]`);
+        if (item) item.remove();
+        const countEl = document.getElementById("module-count");
+        const slideoutCountEl = document.getElementById("slideout-module-count");
+        const count = document.querySelectorAll(".module-item").length;
+        if (countEl) countEl.textContent = count;
+        if (slideoutCountEl) slideoutCountEl.textContent = count;
+        refreshPreview();
+        resolve();
+      }).catch(() => resolve());
+    };
+
+    overlay.querySelector('[data-action="cancel"]').addEventListener("click", () => close(false));
+    confirmBtn.addEventListener("click", () => close(true));
+    overlay.addEventListener("click", (e) => { if (e.target === overlay) close(false); });
+  });
 }
 
 // ---------------------------------------------------------------------------
-// Drag-and-drop reordering
+// Drag-and-drop reordering (smooth sortable animation)
 // ---------------------------------------------------------------------------
 
 function setupDragReorder(container) {
-  let dragItem = null;
-  let dragY = 0;
-
-  container.querySelectorAll(".module-item__drag").forEach((handle) => {
-    handle.addEventListener("mousedown", (e) => {
-      dragItem = handle.closest(".module-item");
-      dragY = e.clientY;
-      dragItem.style.opacity = "0.5";
-
-      const onMove = (e) => {
-        const dy = e.clientY - dragY;
-        if (Math.abs(dy) > 30) {
-          const items = [...container.querySelectorAll(".module-item")];
-          const idx = items.indexOf(dragItem);
-          if (dy > 0 && idx < items.length - 1) {
-            container.insertBefore(items[idx + 1], dragItem);
-          } else if (dy < 0 && idx > 0) {
-            container.insertBefore(dragItem, items[idx - 1]);
+  container.querySelectorAll(".module-item").forEach((item) => {
+    item.addEventListener("mousedown", (e) => {
+      // Skip if clicking on edit/delete controls
+      if (e.target.closest(".module-item__edit") || e.target.closest(".module-item__delete")) return;
+
+      e.preventDefault();
+      const dragItem = item;
+      const moduleName = dragItem.dataset.module;
+      const startY = e.clientY;
+      const DRAG_THRESHOLD = 5;
+      let isDragging = false;
+      let items, startIdx, itemRects, itemHeight, currentIdx;
+
+      const startDrag = () => {
+        isDragging = true;
+        items = [...container.querySelectorAll(".module-item")];
+        startIdx = items.indexOf(dragItem);
+        itemRects = items.map((it) => it.getBoundingClientRect());
+        itemHeight = itemRects[startIdx]?.height || 36;
+        currentIdx = startIdx;
+
+        dragItem.classList.add("module-item--dragging");
+        items.forEach((it) => {
+          if (it !== dragItem) it.classList.add("module-item--placeholder");
+        });
+      };
+
+      const onMove = (ev) => {
+        const dy = ev.clientY - startY;
+
+        if (!isDragging) {
+          if (Math.abs(dy) >= DRAG_THRESHOLD) {
+            startDrag();
+          } else {
+            return;
           }
-          dragY = e.clientY;
+        }
+
+        dragItem.style.transform = `translateY(${dy}px)`;
+
+        const cursorY = ev.clientY;
+        let newIdx = startIdx;
+        for (let i = 0; i < itemRects.length; i++) {
+          const mid = itemRects[i].top + itemRects[i].height / 2;
+          if (cursorY > mid) newIdx = i;
+        }
+        newIdx = Math.max(0, Math.min(items.length - 1, newIdx));
+
+        if (newIdx !== currentIdx) {
+          currentIdx = newIdx;
+          items.forEach((it, i) => {
+            if (it === dragItem) return;
+            if (currentIdx > startIdx && i > startIdx && i <= currentIdx) {
+              it.style.transform = `translateY(${-itemHeight}px)`;
+            } else if (currentIdx < startIdx && i >= currentIdx && i < startIdx) {
+              it.style.transform = `translateY(${itemHeight}px)`;
+            } else {
+              it.style.transform = "";
+            }
+          });
         }
       };
 
       const onUp = () => {
-        if (dragItem) dragItem.style.opacity = "1";
-        dragItem = null;
         document.removeEventListener("mousemove", onMove);
         document.removeEventListener("mouseup", onUp);
 
-        // Send new order to server
+        if (!isDragging) {
+          // Was a click — navigate to module
+          scrollPreviewToModule(moduleName);
+          highlightModuleItem(moduleName);
+          return;
+        }
+
+        dragItem.classList.remove("module-item--dragging");
+        dragItem.style.transform = "";
+        items.forEach((it) => {
+          it.classList.remove("module-item--placeholder");
+          it.style.transform = "";
+        });
+
+        if (currentIdx !== startIdx) {
+          if (currentIdx < startIdx) {
+            container.insertBefore(dragItem, items[currentIdx]);
+          } else {
+            const ref = items[currentIdx].nextSibling;
+            container.insertBefore(dragItem, ref);
+          }
+        }
+
         const newOrder = [...container.querySelectorAll(".module-item")].map(
           (el) => el.dataset.module
         );

package/ui/dashboard.js

@@ -32,6 +32,7 @@ async function showDashboard(themeName) {
   // Hide other screens
   setupScreen.classList.add("hidden");
   document.getElementById("setup-topbar").classList.add("hidden");
+  document.getElementById("project-rail")?.classList.remove("project-rail--expanded");
   appScreen.classList.add("hidden");
   dashboardScreen.classList.remove("hidden");
 
@@ -209,6 +210,12 @@ function renderBrandAssets(assets) {
     bvIcon.textContent = "+";
     bvIcon.classList.remove("brand-asset-upload__icon--done");
   }
+
+  // Humanify toggle
+  const humanifyCheckbox = document.getElementById("humanify-checkbox");
+  if (humanifyCheckbox) {
+    humanifyCheckbox.checked = assets.humanify !== false;
+  }
 }
 
 // ---------------------------------------------------------------------------
@@ -381,3 +388,15 @@ document.getElementById("brand-upload-styleguide").querySelector("input").addEve
 document.getElementById("brand-upload-brandvoice").querySelector("input").addEventListener("change", (e) => {
   if (e.target.files[0]) handleBrandFileSelected("brandvoice", e.target.files[0]);
 });
+
+// Humanify toggle
+const humanifyCheckbox = document.getElementById("humanify-checkbox");
+if (humanifyCheckbox) {
+  humanifyCheckbox.addEventListener("change", async (e) => {
+    await fetch("/api/brand-assets", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ type: "humanify", content: e.target.checked ? "on" : "off" }),
+    });
+  });
+}

package/ui/field-editor.js

@@ -2,21 +2,23 @@
  * Field editor sidebar — edit module field values with live preview.
  */
 
-const editorEl = document.getElementById("field-editor");
 const editorTitle = document.getElementById("field-editor-title");
 const editorContent = document.getElementById("field-editor-content");
-const editorClose = document.getElementById("field-editor-close");
 
 let currentEditModule = null;
 
 // ---------------------------------------------------------------------------
-// Open / close
+// Open / close (integrated with module slideout)
 // ---------------------------------------------------------------------------
 
 async function openFieldEditor(moduleName) {
   currentEditModule = moduleName;
   editorTitle.textContent = moduleName;
-  editorEl.classList.add("open");
+
+  // Switch slideout to editor view
+  if (typeof showEditorView === "function") {
+    showEditorView(moduleName);
+  }
 
   // Fetch module data
   try {
@@ -36,12 +38,12 @@ async function openFieldEditor(moduleName) {
 }
 
 function closeFieldEditor() {
-  editorEl.classList.remove("open");
   currentEditModule = null;
+  if (typeof showModuleListView === "function") {
+    showModuleListView();
+  }
 }
 
-editorClose.addEventListener("click", closeFieldEditor);
-
 // ---------------------------------------------------------------------------
 // Render field form
 // ---------------------------------------------------------------------------

package/ui/index.html

@@ -11,6 +11,29 @@
 </head>
 <body>
 
+  <!-- ============================================================ -->
+  <!-- PROJECT RAIL — persistent thin sidebar (Discord-style)       -->
+  <!-- ============================================================ -->
+  <aside class="project-rail project-rail--expanded" id="project-rail">
+    <div class="project-rail__header">
+      <span class="project-rail__title">Projects</span>
+      <span class="project-rail__count" id="rail-project-count">0</span>
+    </div>
+    <div class="project-rail__items" id="project-rail-items"></div>
+    <button class="project-rail__add" id="project-rail-add" title="New project">+</button>
+    <div class="project-rail__footer">
+      <button class="project-rail__settings-btn" id="btn-setup-settings">
+        <svg width="14" height="14" viewBox="0 0 18 18" fill="none"><path d="M7.5 1.5h3l.4 2.1a5.5 5.5 0 0 1 1.3.7l2-.8 1.5 2.6-1.6 1.3a5.5 5.5 0 0 1 0 1.5l1.6 1.3-1.5 2.6-2-.8a5.5 5.5 0 0 1-1.3.7l-.4 2.1h-3l-.4-2.1a5.5 5.5 0 0 1-1.3-.7l-2 .8-1.5-2.6 1.6-1.3a5.5 5.5 0 0 1 0-1.5L2.3 6.1l1.5-2.6 2 .8a5.5 5.5 0 0 1 1.3-.7L7.5 1.5Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/><circle cx="9" cy="9" r="2" stroke="currentColor" stroke-width="1.5"/></svg>
+        <span class="project-rail__settings-label">Settings</span>
+      </button>
+    </div>
+  </aside>
+
+  <!-- Tooltip element (positioned via JS) -->
+  <div class="project-rail__tooltip" id="project-rail-tooltip"></div>
+
+  <div class="app-body" id="app-body">
+
   <!-- ============================================================ -->
   <!-- SETUP SCREEN — shown until a session is created              -->
   <!-- ============================================================ -->
@@ -21,24 +44,6 @@
     </div>
   </div>
   <div class="setup" id="setup-screen">
-    <!-- Left sidebar: project list -->
-    <aside class="setup-sidebar" id="setup-sidebar">
-      <div class="setup-sidebar__header">
-        <span class="setup-sidebar__title">Projects</span>
-        <span class="setup-sidebar__count" id="sidebar-project-count">0</span>
-      </div>
-      <div class="setup-sidebar__list" id="sidebar-project-list">
-        <!-- Populated by setup.js -->
-      </div>
-      <div class="setup-sidebar__footer">
-        <button class="setup-sidebar__settings-btn" id="btn-setup-settings">
-          <svg width="14" height="14" viewBox="0 0 18 18" fill="none"><path d="M7.5 1.5h3l.4 2.1a5.5 5.5 0 0 1 1.3.7l2-.8 1.5 2.6-1.6 1.3a5.5 5.5 0 0 1 0 1.5l1.6 1.3-1.5 2.6-2-.8a5.5 5.5 0 0 1-1.3.7l-.4 2.1h-3l-.4-2.1a5.5 5.5 0 0 1-1.3-.7l-2 .8-1.5-2.6 1.6-1.3a5.5 5.5 0 0 1 0-1.5L2.3 6.1l1.5-2.6 2 .8a5.5 5.5 0 0 1 1.3-.7L7.5 1.5Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/><circle cx="9" cy="9" r="2" stroke="currentColor" stroke-width="1.5"/></svg>
-          Settings
-        </button>
-      </div>
-    </aside>
-
-    <!-- Right side: main content -->
     <div class="setup__main">
       <div class="setup__container">
         <div class="setup__symbol">&#10022;</div>
@@ -153,6 +158,14 @@
             <span class="dashboard__section-hint">Optional — injected into AI prompts</span>
           </div>
           <div class="dashboard__brand-assets" id="dashboard-brand-assets">
+            <div class="brand-asset-toggle" id="brand-toggle-humanify">
+              <label class="brand-asset-toggle__switch">
+                <input type="checkbox" id="humanify-checkbox" checked>
+                <span class="brand-asset-toggle__slider"></span>
+              </label>
+              <span class="brand-asset-toggle__label">Humanify</span>
+              <span class="brand-asset-toggle__tooltip" data-tooltip="Strips AI-sounding copy: removes em dashes, banned words like 'delve' and 'leverage', cliché openers, and forced enthusiasm. Makes your landing page read like a human wrote it.">?</span>
+            </div>
             <label class="brand-asset-upload" id="brand-upload-styleguide">
               <input type="file" accept=".md,.txt" hidden>
               <span class="brand-asset-upload__icon" id="brand-icon-styleguide">+</span>
@@ -277,14 +290,33 @@
 
     <div class="layout">
       <aside class="panel panel--left" id="panel-left">
-        <div class="module-list" id="module-list">
-          <div class="module-list__header">
+        <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 class="module-list__count" id="module-count">0</span>
-            <button class="module-list__add-btn" id="btn-add-module" title="Add module from library">+</button>
+            <span class="module-bar__count" id="module-count">0</span>
+          </button>
+        </div>
+
+        <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__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__close" id="module-slideout-close">&times;</button>
+            </div>
+            <div class="module-library-dropdown hidden" id="module-library-dropdown"></div>
+            <div class="module-slideout__items" id="module-items"></div>
+          </div>
+          <div class="module-slideout__view hidden" id="module-editor-view">
+            <div class="module-slideout__header">
+              <button class="module-slideout__back" id="field-editor-back">&larr;</button>
+              <span class="module-slideout__title" id="field-editor-title">Fields</span>
+              <button class="module-slideout__close" id="field-editor-close">&times;</button>
+            </div>
+            <div class="field-editor__content" id="field-editor-content"></div>
           </div>
-          <div class="module-list__items" id="module-items"></div>
-          <div class="module-library-dropdown hidden" id="module-library-dropdown"></div>
         </div>
 
         <div class="chat">
@@ -337,13 +369,6 @@
             <iframe id="preview-frame" class="browser-chrome__frame" sandbox="allow-scripts allow-same-origin"></iframe>
           </div>
         </div>
-        <aside class="field-editor" id="field-editor">
-          <div class="field-editor__header">
-            <h3 id="field-editor-title">Fields</h3>
-            <button class="field-editor__close" id="field-editor-close">&times;</button>
-          </div>
-          <div class="field-editor__content" id="field-editor-content"></div>
-        </aside>
         <aside class="history-panel hidden" id="history-panel">
           <div class="history-panel__header">
             <h3>Version History</h3>
@@ -392,6 +417,8 @@
     </div>
   </div>
 
+  </div><!-- /app-body -->
+
   <script src="/dialog.js"></script>
   <script src="/setup.js"></script>
   <script src="/dashboard.js"></script>