@pygmalionjs/pygmalion 0.6.0 → 0.6.1

package/node/inspect-plugin.mjs

@@ -45,8 +45,20 @@ const INTERNAL_SOURCE_ATTRIBUTES = new Set([
   'data-pygmalion-slot-count',
   'data-pygmalion-own-source',
   'data-pygmalion-own-props',
+  'data-pygmalion-pseudo-events',
 ]);
 
+const HOVER_EVENT_ATTRIBUTES = new Set([
+  'onMouseEnter',
+  'onMouseOver',
+  'onMouseMove',
+  'onPointerEnter',
+  'onPointerOver',
+  'onPointerMove',
+]);
+
+const FOCUS_EVENT_ATTRIBUTES = new Set(['onFocus']);
+
 function primitiveJsxAttributeValue(attribute, sourceFile) {
   if (!attribute.initializer) return true;
   if (ts.isStringLiteral(attribute.initializer)) return attribute.initializer.text;
@@ -144,6 +156,31 @@ function instrumentJsxInto(code, componentFile, magic) {
             : 0;
         injected.push(` data-pygmalion-slot-count="${slotCount}"`);
       }
+      if (
+        /^[a-z]/.test(elementName) &&
+        !authoredAttributes.has('data-pygmalion-pseudo-events')
+      ) {
+        const pseudoEvents = [];
+        if (
+          [...authoredAttributes].some((name) =>
+            HOVER_EVENT_ATTRIBUTES.has(name),
+          )
+        ) {
+          pseudoEvents.push('hover');
+        }
+        if (
+          [...authoredAttributes].some((name) =>
+            FOCUS_EVENT_ATTRIBUTES.has(name),
+          )
+        ) {
+          pseudoEvents.push('focus');
+        }
+        if (pseudoEvents.length > 0) {
+          injected.push(
+            ` data-pygmalion-pseudo-events="${pseudoEvents.join(',')}"`,
+          );
+        }
+      }
       if (injected.length > 0) {
         // Insert as first properties. Afterwards, if there are spread/explicit properties, they follow React's general property priority.
         magic.appendLeft(node.tagName.getEnd(), injected.join(''));

package/node/storyboard-capture-runtime.mjs

@@ -1,4 +1,5 @@
 import { createHash } from 'node:crypto';
+import { annotateStoryboardAutomaticPseudoStates } from './automatic-pseudo-runtime.mjs';
 
 const DEFAULT_VIEWPORT = Object.freeze({ width: 1280, height: 800 });
 const QA_FAILURE_STAGES = new Set(['interaction', 'assertion']);
@@ -1252,6 +1253,13 @@ async function collectStableEvidence(
   } catch (error) {
     errors.push(new StoryboardCaptureStageError('stabilize', error));
   }
+  if (includePreviewSnapshot) {
+    try {
+      await page.evaluate(annotateStoryboardAutomaticPseudoStates);
+    } catch (error) {
+      errors.push(new StoryboardCaptureStageError('serialize', error));
+    }
+  }
   if (includeDomTree) {
     try {
       evidence.domTree = await page.evaluate(collectStoryboardDomTree);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pygmalionjs/pygmalion",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "description": "Code-backed DOM design sandbox and visual QA editor",
   "license": "UNLICENSED",
   "publishConfig": {
@@ -34,6 +34,7 @@
     "dist-lib",
     "docs/screen-state-contract.md",
     "node/component-branches.mjs",
+    "node/automatic-pseudo-runtime.mjs",
     "node/design-session.mjs",
     "node/dev-mirror.mjs",
     "node/dev-view.vite.mjs",