vibespot 0.5.2 → 0.6.0

package/package.json

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

package/ui/index.html

@@ -44,6 +44,12 @@
       <div class="topbar__logo-icon">v</div>
       <span class="topbar__brand-name">vibeSpot</span>
     </div>
+    <div style="margin-left:auto">
+      <button class="topbar__icon-btn theme-toggle" title="Toggle light/dark mode" onclick="toggleTheme()">
+        <svg class="theme-toggle__icon--dark" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="5"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/></svg>
+        <svg class="theme-toggle__icon--light" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
+      </button>
+    </div>
   </div>
   <div class="setup" id="setup-screen">
     <div class="setup__main">
@@ -140,6 +146,10 @@
         <span class="topbar__project-pill" id="dashboard-theme-name"></span>
       </div>
       <div class="topbar__right">
+        <button class="topbar__icon-btn theme-toggle" title="Toggle light/dark mode" onclick="toggleTheme()">
+          <svg class="theme-toggle__icon--dark" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="5"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/></svg>
+          <svg class="theme-toggle__icon--light" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
+        </button>
         <button class="topbar__icon-btn" id="dashboard-settings-btn" title="Settings">
           <svg width="18" height="18" 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>
         </button>
@@ -277,6 +287,10 @@
         </div>
       </div>
       <div class="topbar__right">
+        <button class="topbar__icon-btn theme-toggle" title="Toggle light/dark mode" onclick="toggleTheme()">
+          <svg class="theme-toggle__icon--dark" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="5"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/></svg>
+          <svg class="theme-toggle__icon--light" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
+        </button>
         <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>

package/ui/setup.js

@@ -1,3 +1,18 @@
+/* Theme init — runs synchronously before DOM to prevent flash */
+(function initTheme() {
+  const stored = localStorage.getItem("vibespot-theme");
+  const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+  const theme = stored || (prefersDark ? "dark" : "light");
+  document.documentElement.setAttribute("data-theme", theme);
+})();
+
+function toggleTheme() {
+  const current = document.documentElement.getAttribute("data-theme") || "dark";
+  const next = current === "dark" ? "light" : "dark";
+  document.documentElement.setAttribute("data-theme", next);
+  localStorage.setItem("vibespot-theme", next);
+}
+
 /**
  * Setup screen — onboarding flow in the browser.
  * Handles theme creation, fetching, opening, and session resume.

package/ui/styles.css

@@ -46,6 +46,58 @@
   --topbar-h: 56px;
   --statusbar-h: 28px;
   --rail-w: 48px;
+
+  /* Shadows & overlays (theme-aware) */
+  --shadow-sm: 0 4px 16px rgba(0,0,0,0.3);
+  --shadow-lg: 0 16px 48px rgba(0,0,0,0.5);
+  --shadow-xl: 0 20px 60px rgba(0,0,0,0.6);
+  --overlay-bg: rgba(0,0,0,0.6);
+  --scrollbar-thumb: rgba(255,255,255,0.08);
+  --scrollbar-hover: rgba(255,255,255,0.14);
+  --bg-deep: #0a0a0a;
+  --bg-code: rgba(0,0,0,0.3);
+  --bg-code-block: rgba(0,0,0,0.4);
+  --text-on-accent: #fff;
+  --topbar-bg: rgba(12,10,9,0.85);
+  --chrome-dot: rgba(255,255,255,0.08);
+  --title-gradient: linear-gradient(135deg, #ffffff, #a5a3b3);
+}
+
+/* ---------------------------------------------------------------- Light Mode */
+[data-theme="light"] {
+  --bg: #faf9f7;
+  --bg-panel: rgba(0,0,0,0.02);
+  --bg-panel-solid: #f3f2f0;
+  --bg-input: rgba(0,0,0,0.03);
+  --bg-hover: rgba(0,0,0,0.05);
+  --bg-active: rgba(0,0,0,0.07);
+  --border: rgba(0,0,0,0.08);
+  --border-hover: rgba(0,0,0,0.15);
+  --text: #1a1a1a;
+  --text-dim: rgba(0,0,0,0.55);
+  --text-muted: rgba(0,0,0,0.3);
+  --accent: #d4552e;
+  --accent-hover: #c04a25;
+  --accent-dim: rgba(212,85,46,0.12);
+  --accent-glow: rgba(212,85,46,0.2);
+  --accent-tint: rgba(212,85,46,0.05);
+  --accent-gradient: linear-gradient(135deg, #d4552e, #e8714f);
+  --success: #16a34a;
+  --warning: #d97706;
+  --error: #dc2626;
+  --shadow-sm: 0 4px 16px rgba(0,0,0,0.08);
+  --shadow-lg: 0 16px 48px rgba(0,0,0,0.12);
+  --shadow-xl: 0 20px 60px rgba(0,0,0,0.15);
+  --overlay-bg: rgba(0,0,0,0.3);
+  --scrollbar-thumb: rgba(0,0,0,0.12);
+  --scrollbar-hover: rgba(0,0,0,0.2);
+  --bg-deep: #f0efed;
+  --bg-code: rgba(0,0,0,0.05);
+  --bg-code-block: rgba(0,0,0,0.06);
+  --text-on-accent: #fff;
+  --topbar-bg: rgba(250,249,247,0.85);
+  --chrome-dot: rgba(0,0,0,0.1);
+  --title-gradient: linear-gradient(135deg, #1a1a1a, #6b6878);
 }
 
 * { margin: 0; padding: 0; box-sizing: border-box; }
@@ -79,8 +131,8 @@ body { display: flex; }
 /* ---------------------------------------------------------------- Scrollbar */
 ::-webkit-scrollbar { width: 6px; }
 ::-webkit-scrollbar-track { background: transparent; }
-::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: var(--radius-pill); }
-::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.14); }
+::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: var(--radius-pill); }
+::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-hover); }
 
 /* ---------------------------------------------------------------- Selection */
 ::selection { background: var(--accent-glow); }
@@ -123,7 +175,7 @@ body { display: flex; }
   font-weight: 700;
   letter-spacing: -0.03em;
   margin-bottom: 6px;
-  background: linear-gradient(135deg, #ffffff, #a5a3b3);
+  background: var(--title-gradient);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
@@ -535,7 +587,7 @@ body { display: flex; }
   width: 100%;
   height: 320px;
   border: none;
-  background: #0f0f14;
+  background: var(--bg-deep);
 }
 
 /* Brand asset upload */
@@ -620,7 +672,7 @@ body { display: flex; }
   align-items: center;
   justify-content: space-between;
   padding: 0 16px;
-  background: rgba(12,10,9,0.85);
+  background: var(--topbar-bg);
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
   border-bottom: 1px solid var(--border);
@@ -649,7 +701,7 @@ body { display: flex; }
   justify-content: center;
   background: var(--accent-gradient);
   border-radius: 8px;
-  color: #fff;
+  color: var(--text-on-accent);
   font-family: var(--font-display);
   font-weight: 700;
   font-size: 16px;
@@ -724,7 +776,7 @@ body { display: flex; }
 
 .btn--primary {
   background: var(--accent-gradient);
-  color: white;
+  color: var(--text-on-accent);
   font-weight: 600;
 }
 .btn--primary:hover { filter: brightness(1.1); }
@@ -751,7 +803,7 @@ body { display: flex; }
 
 .btn--danger {
   background: var(--error);
-  color: #fff;
+  color: var(--text-on-accent);
   border: 1px solid var(--error);
 }
 .btn--danger:hover {
@@ -762,7 +814,7 @@ body { display: flex; }
 .confirm-overlay {
   position: fixed;
   inset: 0;
-  background: rgba(0,0,0,0.6);
+  background: var(--overlay-bg);
   z-index: 9999;
   display: flex;
   align-items: center;
@@ -776,7 +828,7 @@ body { display: flex; }
   padding: 24px;
   width: 360px;
   max-width: 90vw;
-  box-shadow: 0 16px 48px rgba(0,0,0,0.5);
+  box-shadow: var(--shadow-lg);
 }
 .confirm-dialog__title {
   font-size: 16px;
@@ -853,7 +905,7 @@ body { display: flex; }
 }
 .confirm-dialog__toggle-switch input:checked + .confirm-dialog__toggle-slider::before {
   transform: translateX(16px);
-  background: white;
+  background: var(--text-on-accent);
 }
 .confirm-dialog__toggle-label {
   font-size: 13px;
@@ -963,7 +1015,7 @@ body { display: flex; }
   flex: 1;
   display: flex;
   position: relative;
-  background: #111;
+  background: var(--bg-deep);
 }
 
 .resize-handle {
@@ -1262,7 +1314,7 @@ body { display: flex; }
 /* Drag-and-drop animation */
 .module-item--dragging {
   opacity: 0.85;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
+  box-shadow: var(--shadow-sm);
   z-index: 100;
   position: relative;
   background: var(--bg-panel-solid);
@@ -1405,18 +1457,10 @@ body { display: flex; }
   to { opacity: 1; transform: translateY(0); }
 }
 
-.chat-msg--user {
-  flex-direction: row-reverse;
-}
-
-.chat-msg--user .chat-msg__header {
-  flex-direction: row-reverse;
-}
-
 .chat-msg--user .chat-msg__bubble {
   background: var(--accent-gradient);
-  color: white;
-  border-radius: 16px 4px 16px 16px;
+  color: var(--text-on-accent);
+  border-radius: 4px 16px 16px 16px;
   max-width: 85%;
 }
 
@@ -1444,7 +1488,7 @@ body { display: flex; }
 }
 .chat-msg__avatar--user {
   background: var(--accent-gradient);
-  color: white;
+  color: var(--text-on-accent);
 }
 .chat-msg__avatar--ai {
   background: var(--accent-dim);
@@ -1460,11 +1504,6 @@ body { display: flex; }
 
 .chat-msg--user .chat-msg__content {
   flex: 0 1 auto;
-  text-align: right;
-}
-
-.chat-msg--user .chat-msg__meta {
-  text-align: right;
 }
 
 /* Header (sender + time) */
@@ -1516,13 +1555,13 @@ body { display: flex; }
 .chat-msg__bubble code {
   font-family: var(--font-mono);
   font-size: 12px;
-  background: rgba(0,0,0,0.3);
+  background: var(--bg-code);
   padding: 1px 5px;
   border-radius: 3px;
 }
 
 .chat-msg__bubble pre {
-  background: rgba(0,0,0,0.4);
+  background: var(--bg-code-block);
   padding: 10px;
   border-radius: var(--radius-sm);
   overflow-x: auto;
@@ -1651,7 +1690,7 @@ body { display: flex; }
   background: var(--accent-gradient);
   border: none;
   border-radius: 8px;
-  color: white;
+  color: var(--text-on-accent);
   cursor: pointer;
   transition: filter 0.15s;
   flex-shrink: 0;
@@ -1675,11 +1714,11 @@ body { display: flex; }
   flex: 1;
   display: flex;
   flex-direction: column;
-  background: #0a0a0a;
+  background: var(--bg-deep);
   border: 1px solid var(--border);
   border-radius: 12px;
   overflow: hidden;
-  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
+  box-shadow: var(--shadow-xl);
   transition: max-width 0.3s ease;
 }
 
@@ -1689,7 +1728,7 @@ body { display: flex; }
   align-items: center;
   gap: 12px;
   padding: 0 14px;
-  background: rgba(255,255,255,0.03);
+  background: var(--bg-panel);
   border-bottom: 1px solid var(--border);
   flex-shrink: 0;
 }
@@ -1703,7 +1742,7 @@ body { display: flex; }
   width: 10px;
   height: 10px;
   border-radius: 50%;
-  background: rgba(255,255,255,0.08);
+  background: var(--chrome-dot);
 }
 
 .browser-chrome__url {
@@ -1842,7 +1881,7 @@ body { display: flex; }
 .settings-overlay {
   position: fixed;
   inset: 0;
-  background: rgba(0,0,0,0.7);
+  background: var(--overlay-bg);
   z-index: 500;
   display: flex;
   align-items: center;
@@ -1864,7 +1903,7 @@ body { display: flex; }
   border-radius: var(--radius-lg);
   display: flex;
   flex-direction: column;
-  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
+  box-shadow: var(--shadow-xl);
 }
 
 .settings__header {
@@ -2070,7 +2109,7 @@ body { display: flex; }
 .settings__btn--primary {
   background: var(--accent);
   border-color: var(--accent);
-  color: #fff;
+  color: var(--text-on-accent);
 }
 .settings__btn--primary:hover { filter: brightness(1.1); }
 .settings__btn--small {
@@ -2082,8 +2121,8 @@ body { display: flex; }
   color: #ef4444;
 }
 .settings__btn--danger:hover {
-  background: #ef4444;
-  color: #fff;
+  background: var(--error);
+  color: var(--text-on-accent);
 }
 .settings__btn:disabled { opacity: 0.4; cursor: not-allowed; }
 .settings__card-actions {
@@ -2243,12 +2282,12 @@ body { display: flex; }
 .walkthrough__step-dot.active {
   background: var(--accent);
   border-color: var(--accent);
-  color: #fff;
+  color: var(--text-on-accent);
 }
 .walkthrough__step-dot.done {
   background: var(--success);
   border-color: var(--success);
-  color: #fff;
+  color: var(--text-on-accent);
 }
 
 .walkthrough__step-line {
@@ -2318,7 +2357,7 @@ body { display: flex; }
   text-transform: uppercase;
   letter-spacing: 0.05em;
   background: var(--accent);
-  color: #fff;
+  color: var(--text-on-accent);
   padding: 2px 7px;
   border-radius: var(--radius-pill);
 }
@@ -2376,7 +2415,7 @@ body { display: flex; }
   align-items: center;
   gap: 12px;
   padding: 0 16px;
-  background: rgba(12,10,9,0.85);
+  background: var(--topbar-bg);
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
   border-bottom: 1px solid var(--border);
@@ -2602,7 +2641,7 @@ body { display: flex; }
 .upload-action-btn--primary {
   background: var(--accent);
   border-color: var(--accent);
-  color: #fff;
+  color: var(--text-on-accent);
 }
 
 .upload-spinner {
@@ -2636,7 +2675,7 @@ body { display: flex; }
   padding: 40px 32px 32px;
   width: 420px;
   max-width: 90vw;
-  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
+  box-shadow: var(--shadow-xl);
   text-align: center;
   animation: deployPopIn 0.3s ease;
 }
@@ -2653,7 +2692,7 @@ body { display: flex; }
   font-size: 22px;
   font-weight: 700;
   margin-bottom: 6px;
-  background: linear-gradient(135deg, #fff, #a5a3b3);
+  background: var(--title-gradient);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
@@ -2852,7 +2891,7 @@ body { display: flex; }
 
 .project-rail__item--active {
   background: var(--accent-gradient);
-  color: white;
+  color: var(--text-on-accent);
   border-radius: 30%;
 }
 
@@ -2887,7 +2926,7 @@ body { display: flex; }
 
 .project-rail__item--active .project-rail__item-bubble {
   background: rgba(255,255,255,0.2);
-  color: white;
+  color: var(--text-on-accent);
 }
 
 .project-rail__item-info {
@@ -3060,7 +3099,7 @@ body { display: flex; }
 
 .brand-asset-toggle__switch input:checked + .brand-asset-toggle__slider::before {
   transform: translateX(16px);
-  background: white;
+  background: var(--text-on-accent);
 }
 
 .brand-asset-toggle__label {
@@ -3109,3 +3148,10 @@ body { display: flex; }
 .brand-asset-toggle__tooltip:hover::after {
   opacity: 1;
 }
+
+/* ================================================================
+   THEME TOGGLE (light/dark)
+   ================================================================ */
+.theme-toggle__icon--light { display: none; }
+[data-theme="light"] .theme-toggle__icon--dark { display: none; }
+[data-theme="light"] .theme-toggle__icon--light { display: block; }