@hustle-together/api-dev-tools 2.0.5 → 2.0.7

package/demo/workflow-demo.html

@@ -506,6 +506,19 @@
       border-color: var(--accent-red);
     }
 
+    .nav-btn.disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+      text-decoration: line-through;
+    }
+
+    .nav-btn.disabled:hover {
+      background: transparent;
+      color: var(--grey);
+      border-color: var(--grey);
+      box-shadow: none;
+    }
+
     /* ============================================
        AUDIO NARRATION PLAYER
        ============================================ */
@@ -570,12 +583,32 @@
 
     /* Audio highlight effect for elements being narrated */
     .audio-highlighted {
-      box-shadow: 0 0 30px var(--accent-red-glow), 0 0 60px var(--accent-red-glow) !important;
+      outline: 2px solid var(--accent-red) !important;
+      outline-offset: 4px;
       border-color: var(--accent-red) !important;
-      transform: scale(1.02);
       transition: all 0.3s ease !important;
     }
 
+    /* For container elements (cards, boxes), use glow effect */
+    .audio-highlighted.solution-card,
+    .audio-highlighted.phase-box,
+    .audio-highlighted.gap-item,
+    .audio-highlighted.phase-node {
+      box-shadow: 0 0 25px var(--accent-red-glow) !important;
+      outline: none !important;
+      transform: scale(1.02);
+    }
+
+    /* For text elements (headings, brand), use subtle underline/border */
+    .audio-highlighted h2,
+    h2.audio-highlighted,
+    .hustle-brand.audio-highlighted {
+      box-shadow: none !important;
+      outline: none !important;
+      border-bottom: 3px solid var(--accent-red) !important;
+      padding-bottom: 8px;
+    }
+
     /* Progress indicator */
     .progress-bar {
       position: fixed;
@@ -1665,9 +1698,9 @@
 
   <!-- Navigation -->
   <nav class="nav">
-    <button class="nav-btn" id="narrateBtn">🔊 NARRATE</button>
-    <button class="nav-btn" id="playBtn">AUTO PLAY</button>
-    <button class="nav-btn" id="resetBtn">RESTART</button>
+    <button class="nav-btn" id="playBtn">▶ AUTO PLAY</button>
+    <button class="nav-btn" id="audioToggleBtn" title="Toggle narration audio">🔊 WITH AUDIO</button>
+    <button class="nav-btn" id="resetBtn">↺ RESTART</button>
   </nav>
 
   <!-- Audio Narration Player (hidden) -->
@@ -1700,7 +1733,7 @@
         <span class="hustle-word hustle-highlight">API-DEV-TOOLS</span>
       </div>
       <div class="package-name" id="packageName">@hustle-together/api-dev-tools</div>
-      <div class="version" id="versionText">v2.0.5</div>
+      <div class="version" id="versionText">v2.0.7</div>
       <p class="tagline">"Hustle together. Share resources. Build stronger."<span class="cursor"></span></p>
 
       <div class="intro-text">
@@ -2533,11 +2566,13 @@
     const phaseArrows = document.querySelectorAll('#introFlow .phase-connector-arrow');
 
     // Create a separate timeline for the lighting sequence that loops
-    const lightingTL = gsap.timeline({
+    // Store globally so we can pause during narration
+    window.introLightingTL = gsap.timeline({
       repeat: -1,
       repeatDelay: 1,
       delay: 3 // Wait for intro animation to complete
     });
+    const lightingTL = window.introLightingTL;
 
     phaseNodes.forEach((node, i) => {
       lightingTL
@@ -2758,32 +2793,295 @@
       .to('.made-with', { opacity: 1, duration: 0.5 });
 
     // ============================================
-    // AUTO-PLAY BUTTON
+    // UNIFIED AUTO-PLAY + AUDIO SYSTEM
     // ============================================
-    document.getElementById('playBtn').addEventListener('click', () => {
-      if (!isPlaying) {
-        isPlaying = true;
-        document.getElementById('playBtn').textContent = 'PLAYING...';
-        document.getElementById('playBtn').style.background = 'var(--white)';
-        document.getElementById('playBtn').style.color = 'var(--black)';
-
-        let currentSection = 0;
-        const autoScroll = setInterval(() => {
-          if (currentSection < sections.length) {
-            document.getElementById(sections[currentSection]).scrollIntoView({
-              behavior: 'smooth'
-            });
-            currentSection++;
-          } else {
-            clearInterval(autoScroll);
-            isPlaying = false;
-            document.getElementById('playBtn').textContent = 'AUTO PLAY';
-            document.getElementById('playBtn').style.background = 'transparent';
-            document.getElementById('playBtn').style.color = 'var(--white)';
+    const playBtn = document.getElementById('playBtn');
+    const audioToggleBtn = document.getElementById('audioToggleBtn');
+    const narrationAudio = document.getElementById('narrationAudio');
+    const audioProgressContainer = document.getElementById('audioProgressContainer');
+    const audioProgressBar = document.getElementById('audioProgressBar');
+    const audioProgressFill = document.getElementById('audioProgressFill');
+    const audioCurrentTime = document.getElementById('audioCurrentTime');
+    const audioTotalTime = document.getElementById('audioTotalTime');
+    const audioSectionMarkers = document.getElementById('audioSectionMarkers');
+
+    let audioEnabled = true; // Audio on by default
+    let timingData = null;
+    let currentHighlight = null;
+    let highlightIndex = 0;
+    let currentSectionIdx = 0;
+    let autoPlayInterval = null;
+
+    // Format seconds to MM:SS
+    function formatTime(seconds) {
+      const mins = Math.floor(seconds / 60);
+      const secs = Math.floor(seconds % 60);
+      return `${mins}:${secs.toString().padStart(2, '0')}`;
+    }
+
+    // Load timing data
+    async function loadTimingData() {
+      if (timingData) return timingData;
+      try {
+        const response = await fetch('audio/narration-timing.json');
+        if (!response.ok) throw new Error('Failed to load timing data');
+        timingData = await response.json();
+
+        // Update total time display
+        if (audioTotalTime) {
+          audioTotalTime.textContent = formatTime(timingData.duration);
+        }
+
+        // Create section markers on progress bar
+        if (audioSectionMarkers && timingData.sections) {
+          audioSectionMarkers.innerHTML = '';
+          timingData.sections.forEach((section, i) => {
+            if (i === 0) return;
+            const marker = document.createElement('div');
+            marker.className = 'audio-section-marker';
+            marker.style.left = `${(section.timestamp / timingData.duration) * 100}%`;
+            marker.title = section.id.toUpperCase();
+            audioSectionMarkers.appendChild(marker);
+          });
+        }
+
+        console.log('Timing data loaded:', timingData.sections.length, 'sections,', timingData.highlights.length, 'highlights');
+        return timingData;
+      } catch (error) {
+        console.error('Failed to load timing data:', error);
+        return null;
+      }
+    }
+
+    // Apply highlight to an element
+    function applyHighlight(selector) {
+      removeHighlight();
+      try {
+        const el = document.querySelector(selector);
+        if (el) {
+          currentHighlight = el;
+          el.classList.add('audio-highlighted');
+          el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+
+          // Only apply box-shadow GSAP animation to container elements, not text
+          const isContainer = el.classList.contains('solution-card') ||
+                              el.classList.contains('phase-box') ||
+                              el.classList.contains('gap-item') ||
+                              el.classList.contains('phase-node') ||
+                              el.classList.contains('install-command');
+
+          if (isContainer) {
+            gsap.fromTo(el,
+              { boxShadow: '0 0 0px var(--accent-red-glow)' },
+              { boxShadow: '0 0 30px var(--accent-red-glow)', duration: 0.4, ease: 'power2.out' }
+            );
           }
-        }, 5000);
+        }
+      } catch (e) {
+        console.warn('Could not highlight:', selector, e);
+      }
+    }
+
+    // Remove current highlight
+    function removeHighlight() {
+      if (currentHighlight) {
+        currentHighlight.classList.remove('audio-highlighted');
+        gsap.to(currentHighlight, { boxShadow: 'none', duration: 0.3 });
+        currentHighlight = null;
+      }
+    }
+
+    // Handle audio time update (syncs highlights with narration)
+    function onAudioTimeUpdate() {
+      if (!timingData || !audioEnabled) return;
+
+      const currentTime = narrationAudio.currentTime;
+
+      // Update progress bar
+      const progress = (currentTime / timingData.duration) * 100;
+      audioProgressFill.style.width = `${progress}%`;
+
+      // Update time display
+      if (audioCurrentTime) {
+        audioCurrentTime.textContent = formatTime(currentTime);
+      }
+
+      // Check for highlight triggers
+      for (let i = highlightIndex; i < timingData.highlights.length; i++) {
+        const highlight = timingData.highlights[i];
+        if (currentTime >= highlight.timestamp) {
+          if (i !== highlightIndex || !currentHighlight) {
+            highlightIndex = i;
+            applyHighlight(highlight.selector);
+          }
+        } else {
+          break;
+        }
+      }
+    }
+
+    // Handle seek on progress bar click
+    function onProgressBarClick(e) {
+      if (!timingData || !narrationAudio.duration) return;
+
+      const rect = audioProgressBar.getBoundingClientRect();
+      const clickX = e.clientX - rect.left;
+      const percentage = clickX / rect.width;
+      const seekTime = percentage * timingData.duration;
+
+      narrationAudio.currentTime = seekTime;
+
+      // Reset highlight tracking
+      highlightIndex = 0;
+      for (let i = 0; i < timingData.highlights.length; i++) {
+        if (timingData.highlights[i].timestamp <= seekTime) {
+          highlightIndex = i;
+        } else {
+          break;
+        }
+      }
+    }
+
+    // Silent auto-play (no audio, timed sections)
+    function startSilentAutoPlay() {
+      let sectionIdx = 0;
+      autoPlayInterval = setInterval(() => {
+        if (sectionIdx < sections.length) {
+          document.getElementById(sections[sectionIdx]).scrollIntoView({ behavior: 'smooth' });
+          sectionIdx++;
+        } else {
+          stopAutoPlay();
+        }
+      }, 5000);
+    }
+
+    // Start auto-play
+    async function startAutoPlay() {
+      if (isPlaying) return;
+
+      isPlaying = true;
+      playBtn.classList.add('active');
+      playBtn.textContent = '⏸ STOP';
+
+      // Pause the intro lighting animation to avoid visual conflict
+      if (window.introLightingTL) {
+        window.introLightingTL.pause();
+        // Reset the phase nodes to clean state
+        document.querySelectorAll('#introFlow .phase-node').forEach(n => n.classList.remove('active'));
+        document.querySelectorAll('#introFlow .phase-connector-arrow').forEach(a => a.classList.remove('active'));
+      }
+
+      // Scroll to top first
+      window.scrollTo({ top: 0, behavior: 'smooth' });
+
+      await loadTimingData();
+
+      if (audioEnabled && timingData) {
+        // Try to play audio
+        audioProgressContainer.style.display = 'block';
+
+        try {
+          await narrationAudio.play();
+          console.log('Audio playing');
+        } catch (err) {
+          console.error('Audio playback failed:', err);
+          // Fall back to silent mode
+          audioEnabled = false;
+          audioToggleBtn.textContent = '🔇 NO AUDIO';
+          audioToggleBtn.classList.add('disabled');
+          audioProgressContainer.style.display = 'none';
+          startSilentAutoPlay();
+        }
+      } else {
+        // Silent auto-play
+        startSilentAutoPlay();
+      }
+    }
+
+    // Stop auto-play
+    function stopAutoPlay() {
+      isPlaying = false;
+      playBtn.classList.remove('active');
+      playBtn.textContent = '▶ AUTO PLAY';
+
+      if (autoPlayInterval) {
+        clearInterval(autoPlayInterval);
+        autoPlayInterval = null;
+      }
+
+      narrationAudio.pause();
+      narrationAudio.currentTime = 0;
+      audioProgressContainer.style.display = 'none';
+      removeHighlight();
+      highlightIndex = 0;
+      currentSectionIdx = 0;
+
+      // Resume the intro lighting animation
+      if (window.introLightingTL) {
+        window.introLightingTL.restart();
+      }
+    }
+
+    // Audio ended
+    function onAudioEnded() {
+      stopAutoPlay();
+      setTimeout(() => {
+        window.scrollTo({ top: 0, behavior: 'smooth' });
+      }, 500);
+    }
+
+    // Toggle audio on/off
+    function toggleAudio() {
+      audioEnabled = !audioEnabled;
+      if (audioEnabled) {
+        audioToggleBtn.textContent = '🔊 WITH AUDIO';
+        audioToggleBtn.classList.remove('disabled');
+      } else {
+        audioToggleBtn.textContent = '🔇 SILENT';
+        audioToggleBtn.classList.add('disabled');
+      }
+
+      // If currently playing, adjust
+      if (isPlaying) {
+        if (audioEnabled) {
+          narrationAudio.play().catch(() => {});
+          audioProgressContainer.style.display = 'block';
+          if (autoPlayInterval) {
+            clearInterval(autoPlayInterval);
+            autoPlayInterval = null;
+          }
+        } else {
+          narrationAudio.pause();
+          audioProgressContainer.style.display = 'none';
+          startSilentAutoPlay();
+        }
+      }
+    }
+
+    // Event listeners
+    playBtn.addEventListener('click', () => {
+      if (isPlaying) {
+        stopAutoPlay();
+      } else {
+        startAutoPlay();
       }
     });
+    audioToggleBtn.addEventListener('click', toggleAudio);
+    narrationAudio.addEventListener('timeupdate', onAudioTimeUpdate);
+    narrationAudio.addEventListener('ended', onAudioEnded);
+    audioProgressBar.addEventListener('click', onProgressBarClick);
+
+    // Check if audio file is accessible
+    narrationAudio.addEventListener('error', (e) => {
+      console.error('Audio error:', e);
+      audioEnabled = false;
+      audioToggleBtn.textContent = '🔇 NO AUDIO';
+      audioToggleBtn.classList.add('disabled');
+      audioToggleBtn.title = 'Audio file not accessible (run from a web server)';
+    });
+
+    // Preload timing data
+    loadTimingData();
 
     // ============================================
     // RESET BUTTON
@@ -2984,234 +3282,6 @@
       });
     });
 
-    // ============================================
-    // AUDIO NARRATION CONTROLLER
-    // ============================================
-    const narrateBtn = document.getElementById('narrateBtn');
-    const narrationAudio = document.getElementById('narrationAudio');
-    const audioProgressContainer = document.getElementById('audioProgressContainer');
-    const audioProgressBar = document.getElementById('audioProgressBar');
-    const audioProgressFill = document.getElementById('audioProgressFill');
-    const audioCurrentTime = document.getElementById('audioCurrentTime');
-    const audioTotalTime = document.getElementById('audioTotalTime');
-    const audioSectionMarkers = document.getElementById('audioSectionMarkers');
-
-    let isNarrating = false;
-    let timingData = null;
-    let currentHighlight = null;
-    let highlightIndex = 0;
-    let sectionIndex = 0;
-
-    // Format seconds to MM:SS
-    function formatTime(seconds) {
-      const mins = Math.floor(seconds / 60);
-      const secs = Math.floor(seconds % 60);
-      return `${mins}:${secs.toString().padStart(2, '0')}`;
-    }
-
-    // Load timing data
-    async function loadTimingData() {
-      if (timingData) return timingData;
-      try {
-        const response = await fetch('audio/narration-timing.json');
-        timingData = await response.json();
-
-        // Update total time display
-        if (audioTotalTime) {
-          audioTotalTime.textContent = formatTime(timingData.duration);
-        }
-
-        // Create section markers on progress bar
-        if (audioSectionMarkers && timingData.sections) {
-          timingData.sections.forEach((section, i) => {
-            if (i === 0) return; // Skip first section (intro at 0)
-            const marker = document.createElement('div');
-            marker.className = 'audio-section-marker';
-            marker.style.left = `${(section.timestamp / timingData.duration) * 100}%`;
-            marker.title = section.id.toUpperCase();
-            audioSectionMarkers.appendChild(marker);
-          });
-        }
-
-        console.log('Timing data loaded:', timingData.sections.length, 'sections,', timingData.highlights.length, 'highlights');
-        return timingData;
-      } catch (error) {
-        console.error('Failed to load timing data:', error);
-        return null;
-      }
-    }
-
-    // Apply highlight to an element
-    function applyHighlight(selector) {
-      // Remove previous highlight
-      removeHighlight();
-
-      try {
-        const el = document.querySelector(selector);
-        if (el) {
-          currentHighlight = el;
-          el.classList.add('audio-highlighted');
-
-          // Scroll element into view
-          el.scrollIntoView({ behavior: 'smooth', block: 'center' });
-
-          // GSAP enhancement
-          gsap.fromTo(el,
-            { boxShadow: '0 0 0px var(--accent-red-glow)' },
-            {
-              boxShadow: '0 0 40px var(--accent-red-glow), 0 0 80px var(--accent-red-glow)',
-              duration: 0.4,
-              ease: 'power2.out'
-            }
-          );
-        }
-      } catch (e) {
-        console.warn('Could not highlight:', selector, e);
-      }
-    }
-
-    // Remove current highlight
-    function removeHighlight() {
-      if (currentHighlight) {
-        currentHighlight.classList.remove('audio-highlighted');
-        gsap.to(currentHighlight, {
-          boxShadow: 'none',
-          duration: 0.3
-        });
-        currentHighlight = null;
-      }
-    }
-
-    // Scroll to section
-    function scrollToSection(sectionId) {
-      const el = document.getElementById(sectionId);
-      if (el) {
-        el.scrollIntoView({ behavior: 'smooth' });
-      }
-    }
-
-    // Handle audio time update
-    function onTimeUpdate() {
-      if (!timingData) return;
-
-      const currentTime = narrationAudio.currentTime;
-
-      // Update progress bar
-      const progress = (currentTime / timingData.duration) * 100;
-      audioProgressFill.style.width = `${progress}%`;
-
-      // Update time display
-      if (audioCurrentTime) {
-        audioCurrentTime.textContent = formatTime(currentTime);
-      }
-
-      // Check for section changes
-      for (let i = timingData.sections.length - 1; i >= 0; i--) {
-        if (currentTime >= timingData.sections[i].timestamp) {
-          if (i !== sectionIndex) {
-            sectionIndex = i;
-            const section = timingData.sections[i];
-            console.log('Section:', section.id);
-            // Optionally scroll to section (only on major section changes)
-            // scrollToSection(section.id);
-          }
-          break;
-        }
-      }
-
-      // Check for highlight triggers
-      for (let i = highlightIndex; i < timingData.highlights.length; i++) {
-        const highlight = timingData.highlights[i];
-        if (currentTime >= highlight.timestamp) {
-          if (i !== highlightIndex || !currentHighlight) {
-            highlightIndex = i;
-            applyHighlight(highlight.selector);
-          }
-        } else {
-          break;
-        }
-      }
-    }
-
-    // Handle seek on progress bar click
-    function onProgressBarClick(e) {
-      if (!timingData || !narrationAudio.duration) return;
-
-      const rect = audioProgressBar.getBoundingClientRect();
-      const clickX = e.clientX - rect.left;
-      const percentage = clickX / rect.width;
-      const seekTime = percentage * timingData.duration;
-
-      narrationAudio.currentTime = seekTime;
-
-      // Reset highlight tracking
-      highlightIndex = 0;
-      for (let i = 0; i < timingData.highlights.length; i++) {
-        if (timingData.highlights[i].timestamp <= seekTime) {
-          highlightIndex = i;
-        } else {
-          break;
-        }
-      }
-    }
-
-    // Start/Stop narration
-    async function toggleNarration() {
-      if (!isNarrating) {
-        // Start narration
-        await loadTimingData();
-
-        narrationAudio.play().then(() => {
-          isNarrating = true;
-          narrateBtn.classList.add('active');
-          narrateBtn.textContent = '⏸ STOP';
-          audioProgressContainer.style.display = 'block';
-
-          // Scroll to top for intro
-          window.scrollTo({ top: 0, behavior: 'smooth' });
-        }).catch(err => {
-          console.error('Failed to play audio:', err);
-          alert('Could not play audio. Make sure narration.mp3 exists in the audio folder.');
-        });
-      } else {
-        // Stop narration
-        narrationAudio.pause();
-        narrationAudio.currentTime = 0;
-        isNarrating = false;
-        narrateBtn.classList.remove('active');
-        narrateBtn.textContent = '🔊 NARRATE';
-        audioProgressContainer.style.display = 'none';
-        removeHighlight();
-        highlightIndex = 0;
-        sectionIndex = 0;
-      }
-    }
-
-    // Audio ended
-    function onAudioEnded() {
-      isNarrating = false;
-      narrateBtn.classList.remove('active');
-      narrateBtn.textContent = '🔊 NARRATE';
-      audioProgressContainer.style.display = 'none';
-      removeHighlight();
-      highlightIndex = 0;
-      sectionIndex = 0;
-
-      // Scroll back to top
-      setTimeout(() => {
-        window.scrollTo({ top: 0, behavior: 'smooth' });
-      }, 500);
-    }
-
-    // Event listeners
-    narrateBtn.addEventListener('click', toggleNarration);
-    narrationAudio.addEventListener('timeupdate', onTimeUpdate);
-    narrationAudio.addEventListener('ended', onAudioEnded);
-    audioProgressBar.addEventListener('click', onProgressBarClick);
-
-    // Preload timing data on page load
-    loadTimingData();
-
   </script>
 
 </body>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hustle-together/api-dev-tools",
-  "version": "2.0.5",
+  "version": "2.0.7",
   "description": "Interview-driven API development workflow for Claude Code - Automates research, testing, and documentation",
   "main": "bin/cli.js",
   "bin": {