vibespot 0.9.3 → 0.9.4

package/package.json

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

package/ui/dashboard.js

@@ -330,7 +330,7 @@ async function viewStyleguide() {
     const res = await fetch("/api/brand-assets");
     const data = await res.json();
     if (data.styleguide) {
-      await vibeViewContent(data.styleguide, "Styleguide");
+      await vibeViewContent(data.styleguide, "Styleguide", "styleguide.md");
     } else {
       await vibeAlert("No styleguide found.", "Info");
     }
@@ -344,7 +344,7 @@ async function viewBrandvoice() {
     const res = await fetch("/api/brand-assets");
     const data = await res.json();
     if (data.brandvoice) {
-      await vibeViewContent(data.brandvoice, "Brand Voice");
+      await vibeViewContent(data.brandvoice, "Brand Voice", "brandvoice.md");
     } else {
       await vibeAlert("No brand voice found.", "Info");
     }
@@ -563,7 +563,7 @@ document.getElementById("btn-extract-design")?.addEventListener("click", async (
       await refreshDashboard();
       const view = await vibeConfirm("Design system extracted and saved as styleguide.", "Would you like to view it?", { confirmLabel: "View Styleguide", confirmClass: "btn--primary" });
       if (view && data.styleguide) {
-        await vibeViewContent(data.styleguide, "Styleguide");
+        await vibeViewContent(data.styleguide, "Styleguide", "styleguide.md");
       }
     } else {
       await vibeAlert(data.error || "Extraction failed", "Error");
@@ -607,7 +607,7 @@ document.getElementById("btn-import-reference")?.addEventListener("click", async
       await refreshDashboard();
       const view = await vibeConfirm("Design imported and saved as styleguide.", "Would you like to view it?", { confirmLabel: "View Styleguide", confirmClass: "btn--primary" });
       if (view && data.styleguide) {
-        await vibeViewContent(data.styleguide, "Styleguide");
+        await vibeViewContent(data.styleguide, "Styleguide", "styleguide.md");
       }
     } else {
       await vibeAlert(data.error || "Import failed", "Error");

package/ui/dialog.js

@@ -217,7 +217,7 @@ function vibeFeedback() {
  * @param {string} [title] — dialog title
  * @returns {Promise<void>}
  */
-function vibeViewContent(content, title) {
+function vibeViewContent(content, title, downloadFilename) {
   return new Promise((resolve) => {
     const overlay = document.createElement("div");
     overlay.className = "confirm-overlay";
@@ -232,17 +232,36 @@ function vibeViewContent(content, title) {
     const body = document.createElement("div");
     body.className = "confirm-dialog__content-view md-body";
     body.innerHTML = typeof marked !== "undefined" ? marked.parse(content) : esc(content);
+    // Inject color swatches next to hex codes
+    body.innerHTML = body.innerHTML.replace(
+      /(#[0-9A-Fa-f]{3,8})(?![0-9A-Fa-f])/g,
+      '<span class="color-swatch-wrap">$1<span class="color-swatch" style="background:$1"></span></span>'
+    );
     dialog.appendChild(body);
 
     const actions = document.createElement("div");
     actions.className = "confirm-dialog__actions";
-    actions.innerHTML = '<button class="btn btn--primary" data-action="ok">Close</button>';
+    if (downloadFilename) {
+      actions.innerHTML = '<button class="btn btn--secondary" data-action="download">Download</button>';
+    }
+    actions.innerHTML += '<button class="btn btn--primary" data-action="ok">Close</button>';
     dialog.appendChild(actions);
 
     overlay.appendChild(dialog);
     document.body.appendChild(overlay);
 
     const close = () => { overlay.remove(); resolve(); };
+    if (downloadFilename) {
+      overlay.querySelector('[data-action="download"]').addEventListener("click", () => {
+        const blob = new Blob([content], { type: "text/markdown" });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement("a");
+        a.href = url;
+        a.download = downloadFilename;
+        a.click();
+        URL.revokeObjectURL(url);
+      });
+    }
     overlay.querySelector('[data-action="ok"]').addEventListener("click", close);
     overlay.addEventListener("click", (e) => { if (e.target === overlay) close(); });
     document.addEventListener("keydown", function onKey(e) {

package/ui/styles.css

@@ -1151,6 +1151,16 @@ body { display: flex; }
   border-radius: 0;
   font-size: inherit;
 }
+.color-swatch-wrap { white-space: nowrap; }
+.color-swatch {
+  display: inline-block;
+  width: 12px;
+  height: 12px;
+  border-radius: 3px;
+  margin-left: 4px;
+  vertical-align: middle;
+  border: 1px solid var(--border);
+}
 .confirm-dialog__title {
   font-size: 16px;
   font-weight: 600;