@hortonstudio/main 1.8.0 → 1.8.2

package/autoInit/accessibility.js

@@ -593,10 +593,18 @@ export function init() {
       }
 
 
-      const template = tocList.children[0];
+      const template = tocList.children[0].cloneNode(true);
+      // Remove is-active class from template if it exists
+      const templateLink = template.querySelector("a");
+      if (templateLink) {
+        templateLink.classList.remove('is-active');
+      }
+
+      // Clear all original TOC items
       tocList.innerHTML = "";
+
       const h2Headings = contentArea.querySelectorAll("h2");
-      
+
 
       // Create sections and wrap content
       h2Headings.forEach((heading) => {
@@ -604,7 +612,7 @@ export function init() {
           .toLowerCase()
           .replace(/[^a-z0-9]+/g, "-")
           .replace(/(^-|-$)/g, "");
-        
+
         const section = document.createElement("div");
         section.id = sectionId;
         heading.parentNode.insertBefore(section, heading);
@@ -661,78 +669,64 @@ export function init() {
         tocList.appendChild(tocItem);
       });
 
-      // Set up IntersectionObserver for active state
+      // Set up IntersectionObserver for active state (Webflow-style)
       const sections = Array.from(h2Headings).map(heading => heading.parentElement);
       const tocLinks = tocList.querySelectorAll('a');
-      let currentActiveId = null;
+      let currentActive = null;
 
-      const observerOptions = {
-        rootMargin: '-10% 0px -50% 0px',
-        threshold: [0, 0.25, 0.5, 0.75, 1]
-      };
+      const updateActiveLink = () => {
+        const windowHeight = window.innerHeight;
+        const trigger = windowHeight * 0.75; // 25% from bottom
 
-      const observer = new IntersectionObserver((entries) => {
-        // Collect all currently intersecting sections
-        const intersectingSections = [];
-
-        entries.forEach(entry => {
-          const sectionId = entry.target.id;
-          const existingIndex = intersectingSections.findIndex(s => s.id === sectionId);
-
-          if (entry.isIntersecting) {
-            if (existingIndex === -1) {
-              intersectingSections.push({
-                id: sectionId,
-                ratio: entry.intersectionRatio,
-                element: entry.target
-              });
-            } else {
-              intersectingSections[existingIndex].ratio = entry.intersectionRatio;
-            }
-          }
-        });
+        let newActive = null;
 
-        // Find all currently intersecting sections (not just from this batch)
-        const allIntersecting = sections
-          .filter(section => {
-            const rect = section.getBoundingClientRect();
-            const windowHeight = window.innerHeight;
-            // Check if section is in the active zone
-            return rect.top < windowHeight * 0.6 && rect.bottom > windowHeight * 0.1;
-          })
-          .map(section => ({
-            id: section.id,
-            top: section.getBoundingClientRect().top,
-            element: section
-          }));
-
-        if (allIntersecting.length === 0) return;
-
-        // Pick the topmost section in the active zone
-        const topmost = allIntersecting.reduce((prev, curr) =>
-          curr.top < prev.top ? curr : prev
-        );
+        // Find the last section whose top is above the trigger point
+        for (let i = sections.length - 1; i >= 0; i--) {
+          const rect = sections[i].getBoundingClientRect();
+          if (rect.top <= trigger) {
+            newActive = sections[i].id;
+            break;
+          }
+        }
 
-        // Only update if the active section changed
-        if (currentActiveId !== topmost.id) {
-          currentActiveId = topmost.id;
+        // Only update if active section changed
+        if (newActive !== currentActive) {
+          currentActive = newActive;
 
-          // Remove is-active from all links
+          // Remove all is-active
           tocLinks.forEach(link => link.classList.remove('is-active'));
 
-          // Add is-active to the corresponding link
-          const activeLink = Array.from(tocLinks).find(link =>
-            link.getAttribute('href') === `#${topmost.id}`
-          );
-          if (activeLink) {
-            activeLink.classList.add('is-active');
+          // Add to current
+          if (currentActive) {
+            const activeLink = Array.from(tocLinks).find(link =>
+              link.getAttribute('href') === `#${currentActive}`
+            );
+            if (activeLink) {
+              activeLink.classList.add('is-active');
+            }
           }
         }
+      };
+
+      const observerOptions = {
+        rootMargin: '0px 0px -75% 0px',
+        threshold: 0
+      };
+
+      const observer = new IntersectionObserver(() => {
+        updateActiveLink();
       }, observerOptions);
 
       // Observe all sections
       sections.forEach(section => observer.observe(section));
 
+      // Also update on scroll for smoother tracking
+      let scrollTimeout;
+      window.addEventListener('scroll', () => {
+        if (scrollTimeout) clearTimeout(scrollTimeout);
+        scrollTimeout = setTimeout(updateActiveLink, 50);
+      });
+
     });
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hortonstudio/main",
-  "version": "1.8.0",
+  "version": "1.8.2",
   "description": "Animation and utility library for client websites",
   "main": "index.js",
   "type": "module",