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

package/demo/audio/narration-timing.sample.json

@@ -0,0 +1,48 @@
+{
+  "generated": "2025-12-08T00:00:00.000Z",
+  "duration": 300,
+  "wordCount": 850,
+  "sections": [
+    { "id": "intro", "timestamp": 0 },
+    { "id": "problems", "timestamp": 35 },
+    { "id": "solution", "timestamp": 95 },
+    { "id": "workflow", "timestamp": 140 },
+    { "id": "installation", "timestamp": 220 },
+    { "id": "credits", "timestamp": 260 },
+    { "id": "outro", "timestamp": 285 }
+  ],
+  "highlights": [
+    { "selector": "#hustleBrand", "section": "intro", "timestamp": 2 },
+    { "selector": "[data-phase='research']", "section": "intro", "timestamp": 8 },
+    { "selector": "[data-phase='interview']", "section": "intro", "timestamp": 14 },
+    { "selector": "[data-phase='test']", "section": "intro", "timestamp": 20 },
+    { "selector": "[data-phase='code']", "section": "intro", "timestamp": 26 },
+    { "selector": "[data-phase='docs']", "section": "intro", "timestamp": 32 },
+    { "selector": "#problems h2", "section": "problems", "timestamp": 36 },
+    { "selector": ".gap-item:nth-child(1)", "section": "problems", "timestamp": 42 },
+    { "selector": ".gap-item:nth-child(2)", "section": "problems", "timestamp": 54 },
+    { "selector": ".gap-item:nth-child(3)", "section": "problems", "timestamp": 66 },
+    { "selector": ".gap-item:nth-child(4)", "section": "problems", "timestamp": 78 },
+    { "selector": ".gap-item:nth-child(5)", "section": "problems", "timestamp": 88 },
+    { "selector": "#solution h2", "section": "solution", "timestamp": 96 },
+    { "selector": ".hook-box:nth-child(1)", "section": "solution", "timestamp": 104 },
+    { "selector": ".hook-box:nth-child(2)", "section": "solution", "timestamp": 118 },
+    { "selector": ".hook-box:nth-child(3)", "section": "solution", "timestamp": 130 },
+    { "selector": "#workflow h2", "section": "workflow", "timestamp": 141 },
+    { "selector": ".workflow-phase:nth-child(1)", "section": "workflow", "timestamp": 148 },
+    { "selector": ".workflow-phase:nth-child(2)", "section": "workflow", "timestamp": 155 },
+    { "selector": ".workflow-phase:nth-child(3)", "section": "workflow", "timestamp": 162 },
+    { "selector": ".workflow-phase:nth-child(4)", "section": "workflow", "timestamp": 172 },
+    { "selector": ".workflow-phase:nth-child(5)", "section": "workflow", "timestamp": 180 },
+    { "selector": ".workflow-phase:nth-child(6)", "section": "workflow", "timestamp": 188 },
+    { "selector": ".workflow-phase:nth-child(7)", "section": "workflow", "timestamp": 196 },
+    { "selector": ".workflow-phase:nth-child(8)", "section": "workflow", "timestamp": 204 },
+    { "selector": ".workflow-phase:nth-child(9)", "section": "workflow", "timestamp": 211 },
+    { "selector": ".workflow-phase:nth-child(10)", "section": "workflow", "timestamp": 218 },
+    { "selector": "#installation h2", "section": "installation", "timestamp": 221 },
+    { "selector": ".install-command", "section": "installation", "timestamp": 228 },
+    { "selector": "#credits h2", "section": "credits", "timestamp": 261 },
+    { "selector": "#intro", "section": "outro", "timestamp": 286 }
+  ],
+  "words": []
+}

package/demo/hustle-together/index.html

@@ -881,11 +881,11 @@
           <span class="word" data-text="HUSTLE"></span>
           <span class="word highlight" data-text="TOGETHER"></span>
         </h1>
-        <p class="hero-tagline">Tools for builders who like to try things</p>
+        <p class="hero-tagline">Build together. Share resources. Grow stronger.</p>
         <p class="hero-desc">
-          We're a small team obsessed with building tools that actually work.
-          We experiment, we iterate, and we share what we learn.
-          No corporate BS - just useful stuff for developers and creators.
+          We hustle hard to create tools worth sharing. When we build together
+          and share what we learn, everyone gets stronger. No gatekeeping - just
+          useful stuff for developers who believe in community over competition.
         </p>
         <div class="hero-cta">
           <a href="#tools" class="btn btn-primary">VIEW TOOLS</a>

package/demo/workflow-demo.html

@@ -500,6 +500,82 @@
       box-shadow: 0 0 15px var(--accent-red-glow);
     }
 
+    .nav-btn.active {
+      background: var(--accent-red);
+      color: #fff;
+      border-color: var(--accent-red);
+    }
+
+    /* ============================================
+       AUDIO NARRATION PLAYER
+       ============================================ */
+    .audio-progress-container {
+      position: fixed;
+      bottom: 60px;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 80%;
+      max-width: 600px;
+      background: rgba(0, 0, 0, 0.9);
+      border: 1px dashed var(--grey);
+      padding: 15px 20px;
+      z-index: 1001;
+      border-radius: 0;
+    }
+
+    .audio-time-display {
+      display: flex;
+      justify-content: space-between;
+      font-size: 0.75rem;
+      color: var(--grey);
+      margin-bottom: 10px;
+      font-family: 'Courier New', monospace;
+    }
+
+    .audio-progress-bar {
+      position: relative;
+      height: 6px;
+      background: var(--dark-grey);
+      cursor: pointer;
+    }
+
+    .audio-progress-fill {
+      height: 100%;
+      background: var(--accent-red);
+      width: 0%;
+      transition: width 0.1s linear;
+    }
+
+    .audio-section-markers {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      pointer-events: none;
+    }
+
+    .audio-section-marker {
+      position: absolute;
+      top: -3px;
+      width: 2px;
+      height: 12px;
+      background: var(--white);
+      opacity: 0.5;
+    }
+
+    .audio-section-marker:hover {
+      opacity: 1;
+    }
+
+    /* 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;
+      border-color: var(--accent-red) !important;
+      transform: scale(1.02);
+      transition: all 0.3s ease !important;
+    }
+
     /* Progress indicator */
     .progress-bar {
       position: fixed;
@@ -1589,10 +1665,28 @@
 
   <!-- 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>
   </nav>
 
+  <!-- Audio Narration Player (hidden) -->
+  <audio id="narrationAudio" preload="auto">
+    <source src="audio/narration.mp3" type="audio/mpeg">
+  </audio>
+
+  <!-- Audio Progress Bar -->
+  <div class="audio-progress-container" id="audioProgressContainer" style="display: none;">
+    <div class="audio-time-display">
+      <span id="audioCurrentTime">0:00</span>
+      <span id="audioTotalTime">0:00</span>
+    </div>
+    <div class="audio-progress-bar" id="audioProgressBar">
+      <div class="audio-progress-fill" id="audioProgressFill"></div>
+      <div class="audio-section-markers" id="audioSectionMarkers"></div>
+    </div>
+  </div>
+
   <!-- Section Indicators -->
   <div class="section-indicator" id="sectionIndicator"></div>
 
@@ -1606,7 +1700,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.3</div>
+      <div class="version" id="versionText">v2.0.5</div>
       <p class="tagline">"Hustle together. Share resources. Build stronger."<span class="cursor"></span></p>
 
       <div class="intro-text">
@@ -2889,6 +2983,235 @@
         }
       });
     });
+
+    // ============================================
+    // 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.3",
+  "version": "2.0.5",
   "description": "Interview-driven API development workflow for Claude Code - Automates research, testing, and documentation",
   "main": "bin/cli.js",
   "bin": {