Initial implementation of interactor (#242)

* Initial implementation of interactor

* Fixed format

* Fixed some issues in SKILL.md

* More fixes to SKILL.md

* More fixes to docs and rules

* Review interactor skill references

* Cleanup

* Fixed review comments

* Plan for adding interact-validate to interactor skill

* Implement integration of validation using interact-validate in interactor

Author: ydaniv

.cursor/plans/interactor_skill_validation_f7103af3.plan.md

@@ -153,7 +153,7 @@ Interact.setup({
   }),
 });
 
-// Enable accessibility for click and hover triggers
+// Enable accessibility for all click and hover triggers
 Interact.setup({
   allowA11yTriggers: true,
 });

packages/interact/docs/api/interact-class.md

@@ -103,9 +103,9 @@ interact-element.--hover-active .my-element {
 }
 ```
 
-### State Toggle Methods
+### State Toggle Actions
 
-The element provides methods to manage states:
+The element provides actions to manage states:
 
 1. `add`: adds a state named by `effectId`
 2. `remove`: removes a state named by `effectId`
@@ -164,16 +164,16 @@ export default {
 ```javascript
 // Create element programmatically
 function createInteractiveElement(id, content) {
-  const wixElement = document.createElement('interact-element');
-  wixElement.dataset.wixPath = id;
+  const interactElement = document.createElement('interact-element');
+  interactElement.dataset.interactKey = id;
 
   const childElement = document.createElement('div');
   childElement.id = id;
   childElement.innerHTML = content;
 
-  wixElement.appendChild(childElement);
+  interactElement.appendChild(childElement);
 
-  return wixElement;
+  return interactElement;
 }
 
 // Usage
@@ -218,12 +218,12 @@ You can change the key dynamically:
 const element = document.querySelector('interact-element');
 
 // Remove old interactions
-if (element.dataset.wixPath) {
-  remove(element.dataset.wixPath);
+if (element.dataset.interactKey) {
+  remove(element.dataset.interactKey);
 }
 
 // Update key
-element.dataset.wixPath = 'new-target';
+element.dataset.interactKey = 'new-target';
 
 // Reconnect with new key
 element.connect('new-target');
@@ -303,7 +303,7 @@ console.log('interact-element registered:', customElements.get('interact-element
 ```javascript
 const element = document.querySelector('interact-element');
 console.log('Connected:', element.connected);
-console.log('Key:', element.dataset.wixPath);
+console.log('Key:', element.dataset.interactKey);
 console.log('Has child:', element.firstElementChild !== null);
 ```
 

packages/interact/docs/guides/custom-elements.md

@@ -400,7 +400,7 @@ const config: InteractConfig = {
       key: 'accordion',
       trigger: 'click',
       selector: '.accordion-header',
-      effects: [{ effectId: 'expanded', method: 'toggle' }],
+      effects: [{ effectId: 'expanded', stateAction: 'toggle' }],
     },
   ],
 };
@@ -460,20 +460,24 @@ import { Interact, Interaction, InteractConfig } from '@wix/interact/react';
 const config: InteractConfig = {
   interactions: [
     {
-      key: 'product-list',
+      key: 'product-list', // single triggering parent
       trigger: 'viewEnter',
-      listContainer: '.products',
-      effects: [
+      sequences: [
         {
-          keyframeEffect: {
-            name: 'slide-up',
-            keyframes: [
-              { opacity: 0, transform: 'translateY(30px)' },
-              { opacity: 1, transform: 'translateY(0)' },
-            ],
-          },
-          duration: 400,
-          stagger: 100, // Stagger animation for list items
+          offset: 100, // Stagger animation for list items
+          effects: [
+            {
+              listContainer: '.products', //multiple target elements
+              keyframeEffect: {
+                name: 'slide-up',
+                keyframes: [
+                  { opacity: 0, transform: 'translateY(30px)' },
+                  { opacity: 1, transform: 'translateY(0)' },
+                ],
+              },
+              duration: 400,
+            },
+          ],
         },
       ],
     },

packages/interact/docs/integration/react.md

@@ -654,7 +654,7 @@ The target element is what the effect animates. Resolved in priority order:
 | `Interact.registerEffects(presets)` | Register named effect presets. MUST be called before `create`.                                                |
 | `Interact.destroy()`                | Tear down all instances. Call on unmount or route change to prevent memory leaks.                             |
 | `Interact.forceReducedMotion`       | `boolean` (default: `false`) — force reduced-motion behavior regardless of OS setting.                        |
-| `Interact.allowA11yTriggers`        | `boolean` (default: `false`) — enable accessibility trigger variants (`interest`, `activate`).                |
+| `Interact.allowA11yTriggers`        | `boolean` (default: `true`) — enable accessibility trigger variants (`interest`, `activate`).                 |
 | `Interact.setup(options)`           | Configure global options for scroll, pointer, and viewEnter systems. Call before `create`. See options below. |
 
 **`Interact.setup(options)`** — optional configuration object:

packages/interact/rules/full-lean.md

@@ -7,7 +7,7 @@ import {
   CSSRuleToString,
   buildListsRule,
 } from '../src/core/cssUtils';
-import type { CSSCoordinatedLists, ListCustomProps, CSSRuleData } from '../types';
+import type { CSSCoordinatedLists, ListCustomProps, CSSRuleData } from '../src/types/css';
 
 describe('keyframePropertyToCSS', () => {
   it('should convert cssFloat to float', () => {