@hortonstudio/main 1.2.34 → 1.4.0

package/.claude/settings.local.json

@@ -39,7 +39,28 @@
       "Bash(git checkout:*)",
       "Bash(rg:*)",
       "Bash(/usr/local/lib/node_modules/@anthropic-ai/claude-code/vendor/ripgrep/arm64-darwin/rg -n \"data-hs-heroconfig\" /Users/devan/Documents/custom-code/main/animations/hero.js)",
-      "Bash(/usr/local/lib/node_modules/@anthropic-ai/claude-code/vendor/ripgrep/arm64-darwin/rg -n \"data-hs-config\" /Users/devan/Documents/custom-code/main/animations/hero.js)"
+      "Bash(/usr/local/lib/node_modules/@anthropic-ai/claude-code/vendor/ripgrep/arm64-darwin/rg -n \"data-hs-config\" /Users/devan/Documents/custom-code/main/animations/hero.js)",
+      "Bash(node:*)",
+      "Bash(npm run:*)",
+      "Bash(test:*)",
+      "Bash(~/.claude/hooks/smart-lint.sh:*)",
+      "Bash(bash:*)",
+      "Bash(npm install:*)",
+      "Bash(eslint --version)",
+      "Bash(prettier --version)",
+      "Bash(npm test)",
+      "Bash(cat:*)",
+      "Bash(~/.claude/hooks/violation-status.sh:*)",
+      "Bash(make lint:*)",
+      "Bash(make test:*)",
+      "Bash(make fmt:*)",
+      "Bash(eslint:*)",
+      "Bash(prettier --check \"**/*.js\")",
+      "Bash(prettier:*)",
+      "Bash(npx depcheck:*)",
+      "Bash(npx prettier:*)",
+      "Bash(npx prettier:*)",
+      "Bash(npx prettier:*)"
     ],
     "deny": []
   }

package/TEMP-before-after-attributes.md

@@ -0,0 +1,158 @@
+# Before-After Component Attributes Guide
+
+This is a temporary reference for the `data-hs-ba` attributes used in the before-after utility.
+
+## Required Structure
+
+### Main Container
+```html
+<div data-hs-ba="wrapper">
+  <!-- All before-after content goes here -->
+</div>
+```
+
+### Individual Slide/Item
+Each comparison should be a direct child of the wrapper:
+```html
+<div data-hs-ba="wrapper">
+  <div class="slide-1">
+    <!-- First comparison -->
+  </div>
+  <div class="slide-2">
+    <!-- Second comparison -->
+  </div>
+</div>
+```
+
+## Image Elements
+
+### Image Wrapper Container
+```html
+<div data-hs-ba="image-wrapper">
+  <!-- Before and after images go inside here -->
+</div>
+```
+
+### Before Image
+```html
+<img src="before.jpg" data-hs-ba="image-before" alt="Before image">
+```
+
+### After Image
+```html
+<img src="after.jpg" data-hs-ba="image-after" alt="After image">
+```
+
+## Interactive Controls
+
+### Mode Buttons
+```html
+<!-- Show only before image -->
+<button data-hs-ba="mode-before">Before</button>
+
+<!-- Show split view with slider -->
+<button data-hs-ba="mode-split">Split</button>
+
+<!-- Show only after image -->
+<button data-hs-ba="mode-after">After</button>
+```
+
+### Navigation Arrows
+```html
+<!-- Previous slide -->
+<button data-hs-ba="left">←</button>
+
+<!-- Next slide -->
+<button data-hs-ba="right">→</button>
+```
+
+### Slider Handle (for split mode)
+```html
+<div data-hs-ba="slider"></div>
+```
+
+## Pagination
+
+### Pagination Container with Template
+```html
+<div data-hs-ba="pagination">
+  <!-- Single template dot - system will clone this for each slide -->
+  <div class="ba_1_pagination_dot"></div>
+</div>
+```
+
+**How it works**:
+- Place ONE template dot inside the pagination container
+- The system will automatically clone this template for each slide
+- Each generated dot gets proper accessibility attributes
+- The `is-active` class is automatically managed
+
+**Generated Structure** (example with 3 slides):
+```html
+<div data-hs-ba="pagination">
+  <div class="ba_1_pagination_dot is-active" role="button" tabindex="0" aria-label="Go to slide 1" aria-current="true"></div>
+  <div class="ba_1_pagination_dot" role="button" tabindex="0" aria-label="Go to slide 2" aria-current="false"></div>
+  <div class="ba_1_pagination_dot" role="button" tabindex="0" aria-label="Go to slide 3" aria-current="false"></div>
+</div>
+```
+
+## Complete Example
+
+```html
+<div data-hs-ba="wrapper">
+  <!-- Slide 1 -->
+  <div class="ba-slide">
+    <div data-hs-ba="image-wrapper" class="ba-image_wrap">
+      <img src="before1.jpg" data-hs-ba="image-before" alt="Before">
+      <img src="after1.jpg" data-hs-ba="image-after" alt="After">
+      <div data-hs-ba="slider"></div>
+    </div>
+    
+    <!-- Mode controls -->
+    <div class="controls">
+      <button data-hs-ba="mode-before">Before</button>
+      <button data-hs-ba="mode-split" class="is-active">Split</button>
+      <button data-hs-ba="mode-after">After</button>
+    </div>
+    
+    <!-- Navigation -->
+    <button data-hs-ba="left">Previous</button>
+    <button data-hs-ba="right">Next</button>
+    
+    <!-- Pagination -->
+    <div data-hs-ba="pagination">
+      <div class="ba_1_pagination_dot"></div>  <!-- Template dot -->
+    </div>
+  </div>
+  
+  <!-- Slide 2 -->
+  <div class="ba-slide">
+    <!-- Similar structure... -->
+  </div>
+  
+  <!-- Slide 3 -->
+  <div class="ba-slide">
+    <!-- Similar structure... -->
+  </div>
+</div>
+```
+
+## Default Behavior
+
+- **Default mode**: Split view at 50% position
+- **Active states**: Elements with `is-active` class are highlighted
+- **Keyboard support**: Arrow keys navigate slides or move slider
+- **Touch support**: Dragging works on the slider handle
+- **Accessibility**: Full ARIA support with proper labels
+
+## Notes
+
+- Each slide can have its own controls (mode buttons, navigation, pagination)
+- The wrapper image container should have `data-hs-ba="image-wrapper"` for proper click handling
+- Pagination dots are clicked to jump to specific slides
+- Mode buttons toggle between before, split, and after views
+- The slider only appears in split mode
+
+---
+
+*This is a temporary file for development reference. Delete when no longer needed.*