@hortonstudio/main 1.2.35 → 1.4.0

package/utils/scroll-progress.js

@@ -1,29 +1,34 @@
 export async function init() {
-    const progressBar = document.querySelector('[data-hs-progress="bar"]');
-    const progressContent = document.querySelector('[data-hs-progress="wrapper"]');
-    
-    // Check if elements exist before using them
-    if (!progressBar || !progressContent) {
-        return {
-            result: 'util-scroll-progress initialized'
-        };
-    }
+  const progressBar = document.querySelector('[data-hs-progress="bar"]');
+  const progressContent = document.querySelector(
+    '[data-hs-progress="wrapper"]',
+  );
 
+  // Check if elements exist before using them
+  if (!progressBar || !progressContent) {
+    return {
+      result: "util-scroll-progress initialized",
+    };
+  }
+
+  // Check if gsap exists before using it
+  if (typeof gsap !== "undefined") {
     gsap.set(progressBar, { width: "0%" });
 
     // Create the scroll progress animation
     gsap.to(progressBar, {
-        width: "100%",
-        ease: "none",
-        scrollTrigger: {
-            trigger: progressContent,
-            start: "top bottom",
-            end: "bottom bottom",
-            scrub: true
-        }
+      width: "100%",
+      ease: "none",
+      scrollTrigger: {
+        trigger: progressContent,
+        start: "top bottom",
+        end: "bottom bottom",
+        scrub: true,
+      },
     });
+  }
 
-    return {
-        result: 'util-scroll-progress initialized'
-    };
-}
+  return {
+    result: "util-scroll-progress initialized",
+  };
+}

package/utils/toc.js

@@ -1,77 +1,84 @@
 export async function init() {
-    const contentArea = document.querySelector('[data-hs-toc="content"]');
-    const tocList = document.querySelector('[data-hs-toc="list"]');
+  const contentArea = document.querySelector('[data-hs-toc="content"]');
+  const tocList = document.querySelector('[data-hs-toc="list"]');
 
-    // Check main elements
-    if (!contentArea) { return; }
-    if (!tocList) { return; }
-    if (tocList.children.length === 0) { return; }
+  // Check main elements
+  if (!contentArea) {
+    return;
+  }
+  if (!tocList) {
+    return;
+  }
+  if (tocList.children.length === 0) {
+    return;
+  }
 
-    const template = tocList.children[0];
-    tocList.innerHTML = '';
-    const h2Headings = contentArea.querySelectorAll('h2');
+  const template = tocList.children[0];
+  tocList.innerHTML = "";
+  const h2Headings = contentArea.querySelectorAll("h2");
 
-    // Create sections and wrap content
-    h2Headings.forEach((heading, index) => {
-        const sectionId = heading.textContent.toLowerCase()
-            .replace(/[^a-z0-9]+/g, '-')
-            .replace(/(^-|-$)/g, '');
-        const section = document.createElement('div');
-        section.id = sectionId;
-        heading.parentNode.insertBefore(section, heading);
-        section.appendChild(heading);
-        let nextElement = section.nextElementSibling;
-        while (nextElement && nextElement.tagName !== 'H2') {
-            const elementToMove = nextElement;
-            nextElement = nextElement.nextElementSibling;
-            section.appendChild(elementToMove);
-        }
-    });
+  // Create sections and wrap content
+  h2Headings.forEach((heading, index) => {
+    const sectionId = heading.textContent
+      .toLowerCase()
+      .replace(/[^a-z0-9]+/g, "-")
+      .replace(/(^-|-$)/g, "");
+    const section = document.createElement("div");
+    section.id = sectionId;
+    heading.parentNode.insertBefore(section, heading);
+    section.appendChild(heading);
+    let nextElement = section.nextElementSibling;
+    while (nextElement && nextElement.tagName !== "H2") {
+      const elementToMove = nextElement;
+      nextElement = nextElement.nextElementSibling;
+      section.appendChild(elementToMove);
+    }
+  });
 
-    // Create TOC entries
-    h2Headings.forEach((heading, index) => {
-        const tocItem = template.cloneNode(true);
-        const link = tocItem.querySelector('a');
-        const sectionId = heading.parentElement.id;
-        link.href = '#' + sectionId;
+  // Create TOC entries
+  h2Headings.forEach((heading, index) => {
+    const tocItem = template.cloneNode(true);
+    const link = tocItem.querySelector("a");
+    const sectionId = heading.parentElement.id;
+    link.href = "#" + sectionId;
 
-        // Bold numbered text
-        const number = document.createElement('strong');
-        number.textContent = (index + 1) + '. ';
+    // Bold numbered text
+    const number = document.createElement("strong");
+    number.textContent = index + 1 + ". ";
 
-        // Clear the link and add the number + text
-        link.innerHTML = '';
-        link.appendChild(number);
-        link.appendChild(document.createTextNode(heading.textContent));
+    // Clear the link and add the number + text
+    link.innerHTML = "";
+    link.appendChild(number);
+    link.appendChild(document.createTextNode(heading.textContent));
 
-        // Add click handler for smooth scrolling
-        link.addEventListener('click', (e) => {
-            e.preventDefault();
-            
-            const targetSection = document.getElementById(sectionId);
-            if (targetSection) {
-                targetSection.scrollIntoView({ behavior: 'smooth' });
-                // Focus on the section for accessibility (will only show outline for keyboard users due to CSS)
-                setTimeout(() => {
-                    targetSection.focus();
-                }, 100);
-            }
-        });
-        
-        // Ensure sections are focusable for keyboard users but use CSS to control focus visibility
-        const targetSection = document.getElementById(sectionId);
-        if (targetSection) {
-            targetSection.setAttribute('tabindex', '-1');
-            // Use focus-visible to only show outline for keyboard focus
-            targetSection.style.outline = 'none';
-            targetSection.style.setProperty('outline', 'none', 'important');
-        }
+    // Add click handler for smooth scrolling
+    link.addEventListener("click", (e) => {
+      e.preventDefault();
 
-        // Add item to the TOC list
-        tocList.appendChild(tocItem);
+      const targetSection = document.getElementById(sectionId);
+      if (targetSection) {
+        targetSection.scrollIntoView({ behavior: "smooth" });
+        // Focus on the section for accessibility (will only show outline for keyboard users due to CSS)
+        setTimeout(() => {
+          targetSection.focus();
+        }, 100);
+      }
     });
 
-    return {
-        result: 'util-toc initialized'
-    };
-}
+    // Ensure sections are focusable for keyboard users but use CSS to control focus visibility
+    const targetSection = document.getElementById(sectionId);
+    if (targetSection) {
+      targetSection.setAttribute("tabindex", "-1");
+      // Use focus-visible to only show outline for keyboard focus
+      targetSection.style.outline = "none";
+      targetSection.style.setProperty("outline", "none", "important");
+    }
+
+    // Add item to the TOC list
+    tocList.appendChild(tocItem);
+  });
+
+  return {
+    result: "util-toc initialized",
+  };
+}

package/CLAUDE.md

@@ -1,45 +0,0 @@
-# CLAUDE.md
-
-This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
-
-## Project Overview
-
-This is `@hortonstudio/main` - an animation and utility library for client websites, primarily designed for Webflow integration. The library uses a modular ES6 system with dynamic loading based on HTML data attributes.
-
-## Architecture
-
-**Main API**: `window.hsmain` (configurable via `API_NAME` constant in index.js)
-
-**Module Categories**:
-- Animation modules: `data-hs-anim-*` attributes trigger loading
-- Utility modules: `data-hs-util-*` attributes trigger loading  
-- Auto-init modules: Always loaded automatically
-
-**Dependencies**: Requires GSAP with ScrollTrigger and SplitText plugins
-
-**Integration**: Designed for Webflow with `Webflow.ready()` callback system
-
-## Module Loading System
-
-Modules are loaded via script tag attributes:
-```html
-<script src="index.js" data-hs-main data-hs-anim-hero data-hs-util-toc></script>
-```
-
-Each module exports an `init()` function returning `{ result: 'module-name initialized' }`.
-
-## Key Animation Patterns
-
-**Hero animations** (`hero.js`): Orchestrated timeline with navigation reveals, split text headings, and staggered element appearances. Uses data attributes like `data-hs-hero="heading"` and `data-hs-split="word|line|char"`.
-
-**Text animations** (`text.js`): Scroll-triggered animations using CSS classes `.a-word-split`, `.a-line-split`, `.a-char-split`, `.a-appear` on parent elements, targeting first child for animation.
-
-**Configuration**: All modules expose config objects via `window.hsmain.moduleAnimations.config` with `updateConfig()` methods for runtime modification.
-
-## Important Implementation Details
-
-- All animations wait for `document.fonts.ready` before initialization
-- Split text instances are automatically cleaned up after animations complete
-- CSS utility classes like `.u-overflow-clip` are dynamically added/removed for animation masking
-- The library handles Webflow DOM changes by calling `Webflow.ready()` after module loading
-- Navigation accessibility is temporarily disabled during hero animations then restored

package/debug-version.html

@@ -1,37 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <title>CDN Version Debug Test</title>
-</head>
-<body>
-    <h1>CDN Version Debug Test</h1>
-    <div id="results"></div>
-
-    <!-- Test with major version @1 -->
-    <script type="module" src="https://cdn.jsdelivr.net/npm/@hortonstudio/main@1/index.js" data-hs-main data-hs-anim-hero></script>
-
-    <script>
-        setTimeout(() => {
-            const results = document.getElementById('results');
-            
-            // Check what scripts are found
-            const scripts = [...document.querySelectorAll('script[type="module"]')];
-            results.innerHTML += `<h2>Found Scripts:</h2>`;
-            scripts.forEach((script, i) => {
-                results.innerHTML += `<p>Script ${i}: ${script.src}</p>`;
-            });
-
-            // Check if hsmain loaded and what scripts it found
-            if (window.hsmain) {
-                results.innerHTML += `<h2>HSMAIN Scripts Found:</h2>`;
-                results.innerHTML += `<p>Found ${window.hsmain.scripts.length} matching scripts</p>`;
-                window.hsmain.scripts.forEach((script, i) => {
-                    results.innerHTML += `<p>HSMAIN Script ${i}: ${script.src}</p>`;
-                });
-            } else {
-                results.innerHTML += `<p>HSMAIN not loaded</p>`;
-            }
-        }, 2000);
-    </script>
-</body>
-</html>