npm - vibespot - Versions diffs - 1.2.0 → 1.3.1 - Mend

vibespot 1.2.0 → 1.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (49) hide show

package/README.md +54 -5
package/assets/blog-rules.md +251 -0
package/assets/email-rules.md +390 -0
package/assets/humanify-guide.md +300 -101
package/assets/plan-templates/blog-content-hub.md +18 -9
package/assets/plan-templates/email-announcement.md +41 -0
package/assets/plan-templates/email-event-invite.md +43 -0
package/assets/plan-templates/email-newsletter.md +41 -0
package/assets/plan-templates/email-re-engagement.md +42 -0
package/assets/plan-templates/email-welcome.md +41 -0
package/dist/index.js +1460 -387
package/dist/index.js.map +1 -1
package/package.json +5 -5
package/starters/06-blog-content-hub.json +75 -0
package/starters/06-email-welcome.json +60 -0
package/starters/07-email-announcement.json +60 -0
package/starters/08-email-newsletter.json +52 -0
package/ui/chat.js +777 -63
package/ui/code-editor.js +49 -7
package/ui/dashboard.js +379 -93
package/ui/docs/docs.css +29 -0
package/ui/docs/index.html +416 -119
package/ui/docs/screenshots/asset-type-cards.png +0 -0
package/ui/docs/screenshots/brand-kit-preview.png +0 -0
package/ui/docs/screenshots/content-type-dropdown.png +0 -0
package/ui/docs/screenshots/deploy-progress.png +0 -0
package/ui/docs/screenshots/editor-full-layout.png +0 -0
package/ui/docs/screenshots/email-client-preview.png +0 -0
package/ui/docs/screenshots/inline-wysiwyg-editing.png +0 -0
package/ui/docs/screenshots/module-overview-slideout.png +0 -0
package/ui/docs/screenshots/multi-page-tree.png +0 -0
package/ui/docs/screenshots/onboarding-walkthrough.png +0 -0
package/ui/docs/screenshots/pipeline-progress.png +0 -0
package/ui/docs/screenshots/project-overview-table.png +0 -0
package/ui/docs/screenshots/split-pane-view.png +0 -0
package/ui/docs/screenshots/visual-controls-toolbar.png +0 -0
package/ui/docs/screenshots/workspace-tabs.png +0 -0
package/ui/email-preview.js +109 -0
package/ui/field-editor.js +72 -1
package/ui/icons.js +120 -0
package/ui/index.html +877 -629
package/ui/inline-edit.js +710 -0
package/ui/plan.js +0 -0
package/ui/preview.js +101 -198
package/ui/section-controls.js +628 -0
package/ui/settings.js +58 -16
package/ui/setup.js +750 -140
package/ui/styles.css +3430 -952
package/ui/upload-panel.js +47 -20

package/ui/preview.js CHANGED Viewed

@@ -3,12 +3,43 @@
  */
 const previewFrame = document.getElementById("preview-frame");
+const previewEmptyState = document.getElementById("preview-empty-state");
 // Highlights to apply once the iframe finishes loading after the next refresh.
 let pendingChangedModules = null;
 let pendingNewModules = null;
+/**
+ * Show or hide the preview empty state. Called when generation starts or when
+ * the iframe finishes loading and we can detect whether any modules rendered.
+ */
+function setPreviewEmptyState(show) {
+  if (!previewEmptyState) return;
+  previewEmptyState.setAttribute("aria-hidden", show ? "false" : "true");
+}
+/**
+ * Inspect iframe contents post-load and toggle the empty state accordingly.
+ * Empty state stays visible if the rendered preview has no module content.
+ */
+function syncEmptyStateFromFrame() {
+  if (!previewEmptyState) return;
+  try {
+    const doc = previewFrame.contentDocument || previewFrame.contentWindow.document;
+    if (!doc || !doc.body) {
+      setPreviewEmptyState(true);
+      return;
+    }
+    const hasModules = doc.querySelector("[data-module]") !== null;
+    setPreviewEmptyState(!hasModules);
+  } catch {
+    // cross-origin — assume content is present
+    setPreviewEmptyState(false);
+  }
+}
 previewFrame.addEventListener("load", () => {
+  syncEmptyStateFromFrame();
   if (!pendingChangedModules && !pendingNewModules) return;
   const changed = pendingChangedModules;
   const fresh = pendingNewModules;
@@ -151,6 +182,7 @@ function scrollPreviewToModule(moduleName) {
  * Called when AI generation starts to entertain the user while waiting.
  */
 function showGeneratingPreview() {
+  setPreviewEmptyState(false);
   const html = `<!DOCTYPE html>
 <html lang="en">
 <head>
@@ -381,215 +413,86 @@ function clearAllModulesWorking() {
 // Preview refresh is triggered by setup.js after a session is created.
 // Do NOT auto-refresh here.
+// Select/edit mode has been unified into interact mode (inline-edit.js)
 // ---------------------------------------------------------------------------
-// Select mode — click an element in the preview to reference it in chat
+// HubL validity badge — aggregates per-module checks reported by chat.js into
+// a single status pill in the preview toolbar.
 // ---------------------------------------------------------------------------
-const selectModeBtn = document.getElementById("select-mode-toggle");
-const previewContainer = document.getElementById("preview-container");
-let selectModeActive = false;
-let hoveredEl = null;
-let hoverLabelEl = null;
-let onMouseOver = null;
-let onMouseOut = null;
-let onClick = null;
-let onKeyDown = null;
-function ensureSelectModeStyles(doc) {
-  if (doc.getElementById("vibespot-select-css")) return;
-  const style = doc.createElement("style");
-  style.id = "vibespot-select-css";
-  style.textContent = `
-    html.vibespot-select-mode, html.vibespot-select-mode * { cursor: crosshair !important; }
-    html.vibespot-select-mode a, html.vibespot-select-mode button { pointer-events: none; }
-    .vibespot-select-hover {
-      outline: 2px solid #e8613a !important;
-      outline-offset: 2px !important;
-      background-color: rgba(232, 97, 58, 0.08) !important;
-    }
-    .vibespot-select-label {
-      position: fixed;
-      z-index: 2147483647;
-      pointer-events: none;
-      font: 500 11px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-      color: #fff;
-      background: #e8613a;
-      padding: 3px 8px;
-      border-radius: 4px;
-      box-shadow: 0 2px 6px rgba(0,0,0,0.25);
-      white-space: nowrap;
-      max-width: 70vw;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-  `;
-  doc.head.appendChild(style);
-}
-function describeElement(el) {
-  if (!el) return "";
-  const moduleEl = el.closest("[data-module]");
-  const moduleName = moduleEl ? moduleEl.getAttribute("data-module") : null;
-  const tag = (el.tagName || "").toLowerCase();
-  let kind = tag;
-  if (tag.match(/^h[1-6]$/)) kind = "headline";
-  else if (tag === "p") kind = "paragraph";
-  else if (tag === "a") kind = "link";
-  else if (tag === "button") kind = "button";
-  else if (tag === "img") kind = "image";
-  else if (tag === "ul" || tag === "ol") kind = "list";
-  else if (tag === "li") kind = "list item";
-  if (moduleName && moduleEl === el) return moduleName;
-  if (moduleName) return `${moduleName} > ${kind}`;
-  return kind;
-}
-function buildChatPrefill(el) {
-  if (!el) return "";
-  const moduleEl = el.closest("[data-module]");
-  const moduleName = moduleEl ? moduleEl.getAttribute("data-module") : null;
-  const tag = (el.tagName || "").toLowerCase();
-  const text = (el.textContent || "").trim().replace(/\s+/g, " ").slice(0, 80);
-  let elementPart;
-  if (tag.match(/^h[1-6]$/)) elementPart = "the headline";
-  else if (tag === "p") elementPart = "the paragraph";
-  else if (tag === "a") elementPart = "the link";
-  else if (tag === "button") elementPart = "the button";
-  else if (tag === "img") elementPart = "the image";
-  else elementPart = `the ${tag}`;
-  if (moduleEl === el && moduleName) {
-    return `In the ${moduleName} section, `;
-  }
-  if (moduleName) {
-    const quote = text ? ` ("${text}${text.length === 80 ? "…" : ""}")` : "";
-    return `In the ${moduleName} section, ${elementPart}${quote} `;
+const hublBadgeEl = document.getElementById("hubl-badge");
+const hublBadgeLabelEl = hublBadgeEl ? hublBadgeEl.querySelector(".hubl-badge__label") : null;
+const hublBadgeCountEl = document.getElementById("hubl-badge-count");
+const hublModuleIssues = new Map();
+let hublBadgeReveal = null;
+function applyHublBadgeState() {
+  if (!hublBadgeEl) return;
+  let totalIssues = 0;
+  for (const issues of hublModuleIssues.values()) totalIssues += issues.length;
+  const failedModules = Array.from(hublModuleIssues.values()).filter((arr) => arr.length > 0).length;
+  const state = totalIssues === 0 ? "valid" : "issues";
+  hublBadgeEl.dataset.state = state;
+  hublBadgeEl.classList.toggle("hubl-badge--valid", state === "valid");
+  hublBadgeEl.classList.toggle("hubl-badge--issues", state === "issues");
+  if (hublBadgeLabelEl) {
+    hublBadgeLabelEl.textContent = state === "valid" ? "Valid HubL" : "HubL issues";
   }
-  return `${elementPart} `;
-}
-function clearHover(doc) {
-  if (hoveredEl) {
-    hoveredEl.classList.remove("vibespot-select-hover");
-    hoveredEl = null;
-  }
-  if (hoverLabelEl && hoverLabelEl.parentNode) {
-    hoverLabelEl.parentNode.removeChild(hoverLabelEl);
-  }
-  hoverLabelEl = null;
-}
-function attachSelectHandlers() {
-  let doc;
-  try {
-    doc = previewFrame.contentDocument || previewFrame.contentWindow?.document;
-  } catch { return; }
-  if (!doc || !doc.body) return;
-  ensureSelectModeStyles(doc);
-  doc.documentElement.classList.add("vibespot-select-mode");
-  onMouseOver = (e) => {
-    const el = e.target;
-    if (!el || el === doc.body || el === doc.documentElement) return;
-    if (el.classList && el.classList.contains("vibespot-select-label")) return;
-    if (hoveredEl === el) return;
-    if (hoveredEl) hoveredEl.classList.remove("vibespot-select-hover");
-    hoveredEl = el;
-    el.classList.add("vibespot-select-hover");
-    if (!hoverLabelEl) {
-      hoverLabelEl = doc.createElement("div");
-      hoverLabelEl.className = "vibespot-select-label";
-      doc.body.appendChild(hoverLabelEl);
-    }
-    hoverLabelEl.textContent = describeElement(el);
-    const rect = el.getBoundingClientRect();
-    hoverLabelEl.style.top = Math.max(4, rect.top - 22) + "px";
-    hoverLabelEl.style.left = Math.max(4, rect.left) + "px";
-  };
-  onMouseOut = (e) => {
-    if (!e.relatedTarget) clearHover(doc);
-  };
-  onClick = (e) => {
-    e.preventDefault();
-    e.stopPropagation();
-    const prefill = buildChatPrefill(e.target);
-    deactivateSelectMode();
-    if (typeof window.prefillChatInput === "function") {
-      window.prefillChatInput(prefill);
+  if (hublBadgeCountEl) {
+    if (state === "valid") {
+      hublBadgeCountEl.classList.add("hidden");
+      hublBadgeCountEl.textContent = "";
+    } else {
+      hublBadgeCountEl.classList.remove("hidden");
+      hublBadgeCountEl.textContent = String(totalIssues);
     }
-  };
-  onKeyDown = (e) => {
-    if (e.key === "Escape") deactivateSelectMode();
-  };
-  doc.addEventListener("mouseover", onMouseOver, true);
-  doc.addEventListener("mouseout", onMouseOut, true);
-  doc.addEventListener("click", onClick, true);
-  doc.addEventListener("keydown", onKeyDown, true);
-}
-function detachSelectHandlers() {
-  let doc;
-  try {
-    doc = previewFrame.contentDocument || previewFrame.contentWindow?.document;
-  } catch { return; }
-  if (!doc) return;
-  doc.documentElement.classList.remove("vibespot-select-mode");
-  clearHover(doc);
-  if (onMouseOver) doc.removeEventListener("mouseover", onMouseOver, true);
-  if (onMouseOut) doc.removeEventListener("mouseout", onMouseOut, true);
-  if (onClick) doc.removeEventListener("click", onClick, true);
-  if (onKeyDown) doc.removeEventListener("keydown", onKeyDown, true);
-  onMouseOver = onMouseOut = onClick = onKeyDown = null;
-}
-function activateSelectMode() {
-  if (selectModeActive) return;
-  selectModeActive = true;
-  if (selectModeBtn) selectModeBtn.setAttribute("aria-pressed", "true");
-  if (previewContainer) previewContainer.classList.add("preview--select-mode");
-  attachSelectHandlers();
-}
-function deactivateSelectMode() {
-  if (!selectModeActive) return;
-  selectModeActive = false;
-  if (selectModeBtn) selectModeBtn.setAttribute("aria-pressed", "false");
-  if (previewContainer) previewContainer.classList.remove("preview--select-mode");
-  detachSelectHandlers();
-}
+  }
-function setSelectModeDisabled(disabled) {
-  if (!selectModeBtn) return;
-  if (disabled) {
-    deactivateSelectMode();
-    selectModeBtn.disabled = true;
+  if (state === "valid") {
+    const checked = hublModuleIssues.size;
+    hublBadgeEl.title = checked === 0
+      ? "HubL syntax check — no modules generated yet."
+      : `HubL syntax check — all ${checked} module${checked === 1 ? "" : "s"} parse cleanly.`;
   } else {
-    selectModeBtn.disabled = false;
+    hublBadgeEl.title = `${totalIssues} HubL issue${totalIssues === 1 ? "" : "s"} across ${failedModules} module${failedModules === 1 ? "" : "s"}. Click to review.`;
   }
 }
-if (selectModeBtn) {
-  selectModeBtn.addEventListener("click", () => {
-    if (selectModeBtn.disabled) return;
-    if (selectModeActive) deactivateSelectMode();
-    else activateSelectMode();
-  });
+function flashHublBadge() {
+  if (!hublBadgeEl) return;
+  hublBadgeEl.classList.remove("hubl-badge--flash");
+  // Force reflow so the animation restarts.
+  void hublBadgeEl.offsetWidth;
+  hublBadgeEl.classList.add("hubl-badge--flash");
 }
-if (previewFrame) {
-  previewFrame.addEventListener("load", () => {
-    if (selectModeActive) attachSelectHandlers();
+window.resetHublCheck = function () {
+  hublModuleIssues.clear();
+  applyHublBadgeState();
+};
+window.reportHublCheck = function (moduleName, issues) {
+  if (!moduleName) return;
+  hublModuleIssues.set(moduleName, Array.isArray(issues) ? issues : []);
+  applyHublBadgeState();
+  flashHublBadge();
+};
+if (hublBadgeEl) {
+  applyHublBadgeState();
+  hublBadgeEl.addEventListener("click", () => {
+    if (hublBadgeEl.dataset.state !== "issues") return;
+    const lines = [];
+    for (const [name, issues] of hublModuleIssues) {
+      if (!issues.length) continue;
+      lines.push(`• ${name}: ${issues.map((i) => i.message || i.kind).join(", ")}`);
+    }
+    if (typeof appendSystemMessage === "function") {
+      appendSystemMessage(`HubL issues in current run:\n${lines.join("\n")}`);
+    } else {
+      console.warn("HubL issues:\n" + lines.join("\n"));
+    }
   });
 }
-window.setSelectModeDisabled = setSelectModeDisabled;
-window.deactivateSelectMode = deactivateSelectMode;