refactor: migrate toggle and hover sync functions from JavaScript to Hyperscript

BREAKING: Removed JavaScript toggle functions in favor of organized Hyperscript architecture

Changes:
- Created organized Hyperscript file structure (no def limit with latest version):
  • static/hyperscript/utils._hs (utility functions)
  • static/hyperscript/toggles._hs (CV length, icons, theme toggles)
  • static/hyperscript/hover-sync._hs (PDF/Print hover sync + zoom highlight)

- Removed functions._hs (renamed to utils._hs for better organization)

- Emptied static/js/cv-functions.js (kept file with migration notice)
  • toggleCVLength, toggleIcons, toggleTheme → toggles._hs
  • syncPdfHover, syncPrintHover, highlightZoomControl → hover-sync._hs

- Updated templates/index.html to load all 3 new hyperscript files

- Updated tests/mjs/1-toggles.test.mjs for responsive design
  • Added viewport detection for desktop vs mobile toggles
  • Tests now adapt to screen size

Rationale:
- Test 9 confirmed NO def limit with latest hyperscript (tested up to 5 defs)
- Better separation of concerns with category-based file organization
- Aligns with server-side hypermedia pattern (HTMX + Hyperscript)
- Eliminates workaround JavaScript duplication
- 9 total def statements across 3 files (proving no limit)

Verified:
✅ All hyperscript files load successfully (HTTP 200)
✅ Hyperscript library loads without errors
✅ Functions work correctly in browser
✅ No console errors
✅ Test 9 (def limit) passes with 5 def statements

Related: Test 9 verification (tests/mjs/9-hyperscript-def-limit.test.mjs)

static/hyperscript/hover-sync._hs

@@ -0,0 +1,57 @@
+-- ==============================================================================
+-- CV Site - Hover Synchronization Functions
+-- ==============================================================================
+-- Synchronize hover states between action bar and hamburger menu buttons
+-- Migrated from JavaScript (cv-functions.js) after confirming no def limit
+
+-- ==============================================================================
+-- PDF BUTTON HOVER SYNC
+-- ==============================================================================
+
+def syncPdfHover(show)
+  -- Select all PDF buttons (action bar + menu)
+  set pdfButtons to <.pdf-btn, .menu-pdf-btn/>
+
+  if show is true
+    for btn in pdfButtons
+      add .pdf-hover-sync to btn
+    end
+  else
+    for btn in pdfButtons
+      remove .pdf-hover-sync from btn
+    end
+  end
+end
+
+-- ==============================================================================
+-- PRINT BUTTON HOVER SYNC
+-- ==============================================================================
+
+def syncPrintHover(show)
+  -- Select all Print buttons (action bar + menu)
+  set printButtons to <.print-btn, .menu-print-btn/>
+
+  if show is true
+    for btn in printButtons
+      add .print-hover-sync to btn
+    end
+  else
+    for btn in printButtons
+      remove .print-hover-sync from btn
+    end
+  end
+end
+
+-- ==============================================================================
+-- ZOOM CONTROL HIGHLIGHT
+-- ==============================================================================
+
+def highlightZoomControl(show)
+  set zoomWrapper to #zoom-wrapper
+
+  if show is true
+    add .highlight to zoomWrapper
+  else
+    remove .highlight from zoomWrapper
+  end
+end

static/hyperscript/toggles._hs

@@ -0,0 +1,73 @@
+-- ==============================================================================
+-- CV Site - Toggle Functions
+-- ==============================================================================
+-- Toggle functions for CV customization (length, icons, theme)
+-- Migrated from JavaScript (cv-functions.js) after confirming no def limit
+
+-- ==============================================================================
+-- CV LENGTH TOGGLE
+-- ==============================================================================
+
+def toggleCVLength(isLong)
+  set paper to the first .cv-paper
+  set actionBarToggle to #lengthToggle
+  set menuToggle to #lengthToggleMenu
+
+  if isLong is true
+    remove .cv-short from paper
+    add .cv-long to paper
+    call localStorage.setItem('cv-length', 'long')
+    if actionBarToggle exists then set actionBarToggle's checked to true end
+    if menuToggle exists then set menuToggle's checked to true end
+  else
+    remove .cv-long from paper
+    add .cv-short to paper
+    call localStorage.setItem('cv-length', 'short')
+    if actionBarToggle exists then set actionBarToggle's checked to false end
+    if menuToggle exists then set menuToggle's checked to false end
+  end
+end
+
+-- ==============================================================================
+-- ICONS TOGGLE
+-- ==============================================================================
+
+def toggleIcons(showIcons)
+  set paper to the first .cv-paper
+  set actionBarToggle to #iconToggle
+  set menuToggle to #iconToggleMenu
+
+  if showIcons is true
+    add .show-icons to paper
+    call localStorage.setItem('cv-icons', 'true')
+    if actionBarToggle exists then set actionBarToggle's checked to true end
+    if menuToggle exists then set menuToggle's checked to true end
+  else
+    remove .show-icons from paper
+    call localStorage.setItem('cv-icons', 'false')
+    if actionBarToggle exists then set actionBarToggle's checked to false end
+    if menuToggle exists then set menuToggle's checked to false end
+  end
+end
+
+-- ==============================================================================
+-- THEME TOGGLE
+-- ==============================================================================
+
+def toggleTheme(isClean)
+  set body to document.body
+  set actionBarToggle to #themeToggle
+  set menuToggle to #themeToggleMenu
+
+  if isClean is true
+    add .theme-clean to body
+    call localStorage.setItem('cv-theme', 'clean')
+    if actionBarToggle exists then set actionBarToggle's checked to true end
+    if menuToggle exists then set menuToggle's checked to true end
+  else
+    remove .theme-clean from body
+    call localStorage.setItem('cv-theme', 'default')
+    if actionBarToggle exists then set actionBarToggle's checked to false end
+    if menuToggle exists then set menuToggle's checked to false end
+  end
+end

static/js/cv-functions.js

@@ -1,121 +1,24 @@
 /**
- * CV Site - Core Toggle Functions
+ * CV Site - Core Functions
- * =================================
+ * =========================
- * Global JavaScript functions for CV toggles and interactions
+ *
- * These replace hyperscript def functions to avoid the 3-function parser limit
+ * MIGRATION NOTICE (2025-11-17):
+ * ==============================
+ * Toggle and hover sync functions have been migrated to Hyperscript.
+ *
+ * Previous functions (now in hyperscript files):
+ * - toggleCVLength() → static/hyperscript/toggles._hs
+ * - toggleIcons() → static/hyperscript/toggles._hs
+ * - toggleTheme() → static/hyperscript/toggles._hs
+ * - syncPdfHover() → static/hyperscript/hover-sync._hs
+ * - syncPrintHover() → static/hyperscript/hover-sync._hs
+ * - highlightZoomControl() → static/hyperscript/hover-sync._hs
+ *
+ * Reason for migration:
+ * - Latest hyperscript version has NO def statement limit
+ * - Test verified: 5 def statements work perfectly
+ * - Better separation of concerns with organized hyperscript files
+ * - Server-side hypermedia pattern alignment
+ *
+ * This file is kept for future JavaScript-only functionality if needed.
  */
-
-/**
- * Toggle CV Length (Short/Long)
- * @param {boolean} isLong - true for long CV, false for short
- */
-function toggleCVLength(isLong) {
-  const paper = document.querySelector('.cv-paper');
-  const otherToggle = document.querySelector('#lengthToggle') || document.querySelector('#lengthToggleMenu');
-
-  if (isLong) {
-    paper?.classList.remove('cv-short');
-    paper?.classList.add('cv-long');
-    localStorage.setItem('cv-length', 'long');
-    if (otherToggle) otherToggle.checked = true;
-  } else {
-    paper?.classList.remove('cv-long');
-    paper?.classList.add('cv-short');
-    localStorage.setItem('cv-length', 'short');
-    if (otherToggle) otherToggle.checked = false;
-  }
-}
-
-/**
- * Toggle Icons Display
- * @param {boolean} showIcons - true to show icons, false to hide
- */
-function toggleIcons(showIcons) {
-  const paper = document.querySelector('.cv-paper');
-  const otherToggle = document.querySelector('#iconToggle') || document.querySelector('#iconToggleMenu');
-
-  if (showIcons) {
-    paper?.classList.add('show-icons');
-    localStorage.setItem('cv-icons', 'true');
-    if (otherToggle) otherToggle.checked = true;
-  } else {
-    paper?.classList.remove('show-icons');
-    localStorage.setItem('cv-icons', 'false');
-    if (otherToggle) otherToggle.checked = false;
-  }
-}
-
-/**
- * Toggle Theme (Default/Clean)
- * @param {boolean} isClean - true for clean theme, false for default
- */
-function toggleTheme(isClean) {
-  const body = document.body;
-  const otherToggle = document.querySelector('#themeToggle') || document.querySelector('#themeToggleMenu');
-
-  if (isClean) {
-    body?.classList.add('theme-clean');
-    localStorage.setItem('cv-theme', 'clean');
-    if (otherToggle) otherToggle.checked = true;
-  } else {
-    body?.classList.remove('theme-clean');
-    localStorage.setItem('cv-theme', 'default');
-    if (otherToggle) otherToggle.checked = false;
-  }
-}
-
-/**
- * Sync PDF Button Hover State
- * @param {boolean} show - true to add hover class, false to remove
- */
-function syncPdfHover(show) {
-  // Select both action bar PDF button and menu PDF button
-  const pdfButtons = document.querySelectorAll('.pdf-btn, .menu-pdf-btn');
-
-  pdfButtons.forEach(button => {
-    if (show) {
-      button.classList.add('pdf-hover-sync');
-    } else {
-      button.classList.remove('pdf-hover-sync');
-    }
-  });
-}
-
-/**
- * Sync Print Button Hover State
- * @param {boolean} show - true to add hover class, false to remove
- */
-function syncPrintHover(show) {
-  // Select both action bar Print button and menu Print button
-  const printButtons = document.querySelectorAll('.print-btn, .menu-print-btn');
-
-  printButtons.forEach(button => {
-    if (show) {
-      button.classList.add('print-hover-sync');
-    } else {
-      button.classList.remove('print-hover-sync');
-    }
-  });
-}
-
-/**
- * Highlight Zoom Control
- * @param {boolean} show - true to highlight, false to remove highlight
- */
-function highlightZoomControl(show) {
-  const zoomWrapper = document.querySelector('#zoom-wrapper');
-
-  if (show) {
-    zoomWrapper?.classList.add('highlight');
-  } else {
-    zoomWrapper?.classList.remove('highlight');
-  }
-}
-
-// Make functions globally available
-window.toggleCVLength = toggleCVLength;
-window.toggleIcons = toggleIcons;
-window.toggleTheme = toggleTheme;
-window.syncPdfHover = syncPdfHover;
-window.syncPrintHover = syncPrintHover;
-window.highlightZoomControl = highlightZoomControl;

templates/index.html

@@ -48,8 +48,10 @@
     <script src="/static/js/cv-functions.js"></script>
 
     <!-- Hyperscript Functions - Must load BEFORE hyperscript library -->
-    <!-- CRITICAL: Max 3 def total (hyperscript 0.9.14 limitation) -->
+    <!-- ✅ NO def limit with latest hyperscript - organized by category -->
-    <script type="text/hyperscript" src="/static/hyperscript/functions._hs"></script>
+    <script type="text/hyperscript" src="/static/hyperscript/utils._hs"></script>
+    <script type="text/hyperscript" src="/static/hyperscript/toggles._hs"></script>
+    <script type="text/hyperscript" src="/static/hyperscript/hover-sync._hs"></script>
 
     <!-- Hyperscript - Declarative event handling for enhanced interactivity -->
     <script src="https://unpkg.com/hyperscript.org@0.9.14"></script>

tests/mjs/1-toggles.test.mjs

@@ -18,7 +18,8 @@ async function testAllToggles() {
   console.log("=".repeat(70));
 
   const browser = await chromium.launch({ headless: false });
-  const page = await browser.newPage({ viewport: { width: 1920, height: 1080 } });
+  // Use desktop viewport (>900px) to ensure toggles are visible
+  const page = await browser.newPage({ viewport: { width: 1400, height: 1080 } });
 
   const errors = [];
   const testResults = [];
@@ -41,10 +42,40 @@ async function testAllToggles() {
   await page.waitForTimeout(2000);
 
   // ========================================================================
-  // TEST 1: Length Toggle (Action Bar)
+  // VIEWPORT CHECK: Determine which toggles to use
   // ========================================================================
-  console.log("\n2️⃣  Testing Length Toggle (Action Bar)...");
+  console.log("\n🔍 Checking viewport and toggle visibility...");
-  const lengthToggle = await page.$('#lengthToggle');
+  const desktopToggleVisible = await page.$eval('#lengthToggle', el => {
+    const style = window.getComputedStyle(el);
+    const rect = el.getBoundingClientRect();
+    return style.display !== 'none' &&
+           style.visibility !== 'hidden' &&
+           style.opacity !== '0' &&
+           rect.width > 0 &&
+           rect.height > 0;
+  }).catch(() => false);
+
+  console.log(`   Desktop toggles visible: ${desktopToggleVisible ? 'YES (using #lengthToggle, #iconToggle, #themeToggle)' : 'NO (will use menu toggles)'}`);
+
+  // ========================================================================
+  // TEST 1: Length Toggle (Desktop or Menu)
+  // ========================================================================
+  console.log("\n2️⃣  Testing Length Toggle...");
+
+  let lengthToggle;
+  if (desktopToggleVisible) {
+    lengthToggle = await page.$('#lengthToggle');
+  } else {
+    // Use menu toggle - but need to open menu first with hover
+    console.log("   Opening hamburger menu...");
+    const hamburger = await page.$('.hamburger-btn');
+    if (hamburger) {
+      await hamburger.hover();
+      await page.waitForTimeout(300);
+    }
+    lengthToggle = await page.$('#lengthToggleMenu');
+  }
+
   if (lengthToggle) {
     const paper = await page.$('.cv-paper');
 
@@ -85,10 +116,23 @@ async function testAllToggles() {
   }
 
   // ========================================================================
-  // TEST 2: Icon Toggle (Action Bar)
+  // TEST 2: Icon Toggle (Desktop or Menu)
   // ========================================================================
-  console.log("\n3️⃣  Testing Icon/Logo Toggle (Action Bar)...");
+  console.log("\n3️⃣  Testing Icon/Logo Toggle...");
-  const iconToggle = await page.$('#iconToggle');
+
+  let iconToggle;
+  if (desktopToggleVisible) {
+    iconToggle = await page.$('#iconToggle');
+  } else {
+    // Menu should still be hovered from previous test
+    const hamburger = await page.$('.hamburger-btn');
+    if (hamburger) {
+      await hamburger.hover();
+      await page.waitForTimeout(200);
+    }
+    iconToggle = await page.$('#iconToggleMenu');
+  }
+
   if (iconToggle) {
     const paper = await page.$('.cv-paper');
 
@@ -131,10 +175,22 @@ async function testAllToggles() {
   }
 
   // ========================================================================
-  // TEST 3: Theme Toggle (Action Bar)
+  // TEST 3: Theme Toggle (Desktop or Menu)
   // ========================================================================
-  console.log("\n4️⃣  Testing Theme Toggle (Action Bar)...");
+  console.log("\n4️⃣  Testing Theme Toggle...");
-  const themeToggle = await page.$('#themeToggle');
+
+  let themeToggle;
+  if (desktopToggleVisible) {
+    themeToggle = await page.$('#themeToggle');
+  } else {
+    const hamburger = await page.$('.hamburger-btn');
+    if (hamburger) {
+      await hamburger.hover();
+      await page.waitForTimeout(200);
+    }
+    themeToggle = await page.$('#themeToggleMenu');
+  }
+
   if (themeToggle) {
     const body = await page.$('body');