@syntrologie/adapt-content 2.7.0 → 2.8.0-canary.2

package/node_modules/@syntrologie/shared-editor-ui/dist/components/AnchorPicker.d.ts

@@ -24,7 +24,11 @@ export interface AnchorPickerProps {
     isActive: boolean;
     onPick: (picked: PickedElement) => void;
     onCancel: () => void;
+    /** When true, clicks pass through to the page (no preventDefault/stopPropagation).
+     *  The consumer is responsible for capturing the pick via EventBus or other means.
+     *  Hover highlighting still works for visual feedback. */
+    passthroughClicks?: boolean;
     excludeSelector?: string;
 }
-export declare function AnchorPicker({ isActive, onPick, onCancel, excludeSelector, }: AnchorPickerProps): import("react").ReactPortal | null;
+export declare function AnchorPicker({ isActive, onPick, onCancel, passthroughClicks, excludeSelector, }: AnchorPickerProps): import("react").ReactPortal | null;
 //# sourceMappingURL=AnchorPicker.d.ts.map

package/node_modules/@syntrologie/shared-editor-ui/dist/components/AnchorPicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AnchorPicker.d.ts","sourceRoot":"","sources":["../../src/components/AnchorPicker.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAWH,MAAM,WAAW,aAAa;IAC5B,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,CAAC,MAAM,EAAE,aAAa,KAAK,IAAI,CAAC;IACxC,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAKD,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,eAAuJ,GACxJ,EAAE,iBAAiB,sCAgMnB"}
+{"version":3,"file":"AnchorPicker.d.ts","sourceRoot":"","sources":["../../src/components/AnchorPicker.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAWH,MAAM,WAAW,aAAa;IAC5B,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,CAAC,MAAM,EAAE,aAAa,KAAK,IAAI,CAAC;IACxC,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB;;8DAE0D;IAC1D,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAKD,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,iBAAyB,EACzB,eAAuJ,GACxJ,EAAE,iBAAiB,sCAwMnB"}

package/node_modules/@syntrologie/shared-editor-ui/dist/components/AnchorPicker.js

@@ -21,7 +21,7 @@ import { createPortal } from 'react-dom';
 import { generateSelector, getElementDescription, validateSelector, } from '../utils/selectorGenerator';
 const HIGHLIGHT_COLOR = '#3b82f6';
 const HIGHLIGHT_BG = 'rgba(59, 130, 246, 0.1)';
-export function AnchorPicker({ isActive, onPick, onCancel, excludeSelector = '[data-syntro-editor-panel], [data-shadow-canvas-id], .syntro-tooltip, .syntro-modal, .syntro-highlight, [data-syntro-anchor-picker]', }) {
+export function AnchorPicker({ isActive, onPick, onCancel, passthroughClicks = false, excludeSelector = '[data-syntro-editor-panel], [data-shadow-canvas-id], .syntro-tooltip, .syntro-modal, .syntro-highlight, [data-syntro-anchor-picker]', }) {
     const [hoveredElement, setHoveredElement] = useState(null);
     const [hoveredSelector, setHoveredSelector] = useState('');
     const overlayRef = useRef(null);
@@ -54,6 +54,8 @@ export function AnchorPicker({ isActive, onPick, onCancel, excludeSelector = '[d
         setHoveredSelector(selector);
     }, [excludeSelector]);
     const handleClick = useCallback((e) => {
+        if (passthroughClicks)
+            return; // Let click propagate to PostHog
         e.preventDefault();
         e.stopPropagation();
         if (hoveredElement && hoveredSelector) {
@@ -73,7 +75,7 @@ export function AnchorPicker({ isActive, onPick, onCancel, excludeSelector = '[d
                 });
             }
         }
-    }, [hoveredElement, hoveredSelector, onPick]);
+    }, [passthroughClicks, hoveredElement, hoveredSelector, onPick]);
     const handleKeyDown = useCallback((e) => {
         if (e.key === 'Escape') {
             e.preventDefault();
@@ -84,14 +86,19 @@ export function AnchorPicker({ isActive, onPick, onCancel, excludeSelector = '[d
         if (!isActive)
             return;
         document.addEventListener('mousemove', handleMouseMove, true);
-        document.addEventListener('click', handleClick, true);
+        // In passthrough mode, don't register click handler — let clicks reach PostHog
+        if (!passthroughClicks) {
+            document.addEventListener('click', handleClick, true);
+        }
         document.addEventListener('keydown', handleKeyDown, true);
         return () => {
             document.removeEventListener('mousemove', handleMouseMove, true);
-            document.removeEventListener('click', handleClick, true);
+            if (!passthroughClicks) {
+                document.removeEventListener('click', handleClick, true);
+            }
             document.removeEventListener('keydown', handleKeyDown, true);
         };
-    }, [isActive, handleMouseMove, handleClick, handleKeyDown]);
+    }, [isActive, passthroughClicks, handleMouseMove, handleClick, handleKeyDown]);
     if (!isActive)
         return null;
     const rect = hoveredElement?.getBoundingClientRect();
@@ -100,6 +107,7 @@ export function AnchorPicker({ isActive, onPick, onCancel, excludeSelector = '[d
             inset: 0,
             cursor: 'crosshair',
             zIndex: 2147483644,
+            pointerEvents: passthroughClicks ? 'none' : undefined,
         }, children: [_jsx("div", { style: {
                     position: 'absolute',
                     inset: 0,

package/node_modules/@syntrologie/shared-editor-ui/dist/index.d.ts

@@ -28,6 +28,7 @@ export { formatConditionLabel } from './formatConditionLabel';
 export { useElementRect } from './hooks/useElementRect';
 export type { TriggerWhenItem } from './hooks/useTriggerWhenStatus';
 export { useTriggerWhenStatus } from './hooks/useTriggerWhenStatus';
+export { type ActionStep, buildActionStepFromElement, findRecommendedIndex, type PostHogElement, } from './utils/elementChainRecommender';
 export type { SelectorOptions } from './utils/selectorGenerator';
 export { generateSelector, getElementDescription, validateSelector, } from './utils/selectorGenerator';
 //# sourceMappingURL=index.d.ts.map

package/node_modules/@syntrologie/shared-editor-ui/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,MAAM,CAAC;AAC1B,YAAY,EAAE,iBAAiB,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAClF,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACzD,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACnE,YAAY,EAAE,eAAe,EAAE,iBAAiB,EAAE,MAAM,kCAAkC,CAAC;AAC3F,OAAO,EAAE,mBAAmB,EAAE,MAAM,kCAAkC,CAAC;AACvE,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAC7D,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACjE,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAC7D,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACzD,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACzD,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACzD,YAAY,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AAC3E,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACjE,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACzD,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAC7D,YAAY,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AAC3E,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACjE,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,YAAY,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AACvE,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAC7D,YAAY,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AACpF,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACxD,YAAY,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AACpE,OAAO,EAAE,oBAAoB,EAAE,MAAM,8BAA8B,CAAC;AACpE,YAAY,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AACjE,OAAO,EACL,gBAAgB,EAChB,qBAAqB,EACrB,gBAAgB,GACjB,MAAM,2BAA2B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,MAAM,CAAC;AAC1B,YAAY,EAAE,iBAAiB,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAClF,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACzD,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACnE,YAAY,EAAE,eAAe,EAAE,iBAAiB,EAAE,MAAM,kCAAkC,CAAC;AAC3F,OAAO,EAAE,mBAAmB,EAAE,MAAM,kCAAkC,CAAC;AACvE,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAC7D,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACjE,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAC7D,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACzD,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACzD,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACzD,YAAY,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AAC3E,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACjE,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACzD,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAC7D,YAAY,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AAC3E,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACjE,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,YAAY,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AACvE,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAC7D,YAAY,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AACpF,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACxD,YAAY,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AACpE,OAAO,EAAE,oBAAoB,EAAE,MAAM,8BAA8B,CAAC;AACpE,OAAO,EACL,KAAK,UAAU,EACf,0BAA0B,EAC1B,oBAAoB,EACpB,KAAK,cAAc,GACpB,MAAM,iCAAiC,CAAC;AACzC,YAAY,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AACjE,OAAO,EACL,gBAAgB,EAChB,qBAAqB,EACrB,gBAAgB,GACjB,MAAM,2BAA2B,CAAC"}

package/node_modules/@syntrologie/shared-editor-ui/dist/index.js

@@ -21,4 +21,5 @@ export { TriggerJourney } from './components/TriggerJourney';
 export { formatConditionLabel } from './formatConditionLabel';
 export { useElementRect } from './hooks/useElementRect';
 export { useTriggerWhenStatus } from './hooks/useTriggerWhenStatus';
+export { buildActionStepFromElement, findRecommendedIndex, } from './utils/elementChainRecommender';
 export { generateSelector, getElementDescription, validateSelector, } from './utils/selectorGenerator';

package/node_modules/@syntrologie/shared-editor-ui/dist/utils/elementChainRecommender.d.ts

@@ -0,0 +1,37 @@
+/**
+ * Element Chain Recommender
+ *
+ * Given PostHog's $elements array, recommends which element the user
+ * most likely intended to track for a KPI, and builds a PostHog action
+ * step from that element.
+ *
+ * The interactive_tags and interactive_roles are loaded from the shared
+ * field mapping fixture so the recommendation heuristic stays in sync
+ * with the warehouse and runtime predicate matching.
+ */
+export interface PostHogElement {
+    tag_name: string;
+    $el_text?: string;
+    [key: string]: unknown;
+}
+export interface ActionStep {
+    event: string;
+    tag_name?: string;
+    text?: string;
+    url?: string;
+}
+/**
+ * Find the index of the recommended element in the $elements chain.
+ * Returns the first interactive element, or 0 if none found.
+ */
+export declare function findRecommendedIndex(elements: PostHogElement[]): number;
+export interface BuildActionStepOptions {
+    /** If true, infer $pageview for <a> elements with internal href */
+    inferPageview?: boolean;
+}
+/**
+ * Build a PostHog action step from a selected element in the chain.
+ * Does NOT include `selector` — it's not supported in Athena.
+ */
+export declare function buildActionStepFromElement(element: PostHogElement, pageUrl: string, options?: BuildActionStepOptions): ActionStep;
+//# sourceMappingURL=elementChainRecommender.d.ts.map

package/node_modules/@syntrologie/shared-editor-ui/dist/utils/elementChainRecommender.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"elementChainRecommender.d.ts","sourceRoot":"","sources":["../../src/utils/elementChainRecommender.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAMH,MAAM,WAAW,cAAc;IAC7B,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAED,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAKD;;;GAGG;AACH,wBAAgB,oBAAoB,CAAC,QAAQ,EAAE,cAAc,EAAE,GAAG,MAAM,CAYvE;AAED,MAAM,WAAW,sBAAsB;IACrC,mEAAmE;IACnE,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED;;;GAGG;AACH,wBAAgB,0BAA0B,CACxC,OAAO,EAAE,cAAc,EACvB,OAAO,EAAE,MAAM,EACf,OAAO,GAAE,sBAA2B,GACnC,UAAU,CAmBZ"}

package/node_modules/@syntrologie/shared-editor-ui/dist/utils/elementChainRecommender.js

@@ -0,0 +1,52 @@
+/**
+ * Element Chain Recommender
+ *
+ * Given PostHog's $elements array, recommends which element the user
+ * most likely intended to track for a KPI, and builds a PostHog action
+ * step from that element.
+ *
+ * The interactive_tags and interactive_roles are loaded from the shared
+ * field mapping fixture so the recommendation heuristic stays in sync
+ * with the warehouse and runtime predicate matching.
+ */
+// Loaded from the shared fixture at build time.
+// The fixture is the single source of truth — do NOT hardcode these lists.
+import fieldMapping from '../../../../tests/fixtures/action-step-field-mapping.json';
+const INTERACTIVE_TAGS = new Set(fieldMapping.interactive_tags);
+const INTERACTIVE_ROLES = new Set(fieldMapping.interactive_roles);
+/**
+ * Find the index of the recommended element in the $elements chain.
+ * Returns the first interactive element, or 0 if none found.
+ */
+export function findRecommendedIndex(elements) {
+    if (elements.length === 0)
+        return 0;
+    for (let i = 0; i < elements.length; i++) {
+        const el = elements[i];
+        if (INTERACTIVE_TAGS.has(el.tag_name))
+            return i;
+        const role = (el.attr__role ?? el.role);
+        if (role && INTERACTIVE_ROLES.has(role))
+            return i;
+    }
+    return 0;
+}
+/**
+ * Build a PostHog action step from a selected element in the chain.
+ * Does NOT include `selector` — it's not supported in Athena.
+ */
+export function buildActionStepFromElement(element, pageUrl, options = {}) {
+    const { inferPageview = false } = options;
+    const href = element.attr__href;
+    const isInternalLink = element.tag_name === 'a' && href && !href.startsWith('http') && !href.startsWith('//');
+    const step = {
+        event: inferPageview && isInternalLink ? '$pageview' : '$autocapture',
+        tag_name: element.tag_name,
+        url: pageUrl,
+    };
+    const text = (element.$el_text || '').trim();
+    if (text) {
+        step.text = text.slice(0, 100); // Truncate long text
+    }
+    return step;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@syntrologie/adapt-content",
-  "version": "2.7.0",
+  "version": "2.8.0-canary.2",
   "description": "Adaptive Content app - DOM manipulation actions for text, attributes, and styles",
   "license": "Proprietary",
   "private": false,