Problem
When Agentation runs inside host apps that render content inside extra wrapper <div>s (scaled canvas / artboard shells, position: absolute; inset: 0 layout layers, z-index stacking), the click handler uses document.elementFromPoint (via deepElementFromPoint). That always returns the topmost element in the browser hit-test stack.
In practice the picked node is often:
- A transparent wrapper from the host layout (still receives hits because
pointer-events defaults to auto), or
- A full-bleed decorative layer inside a template (gradient / veil
div painted above text).
The author sees the “page” or a text block, but Agentation identifies a parent shell or overlay instead. There is no public prop today to constrain hit-testing (e.g. root subtree) or to skip known host selectors, so integrators rely on fragile CSS (pointer-events: none on shells, auto only under a single template host).
Why this is not unique to one app
Any embedded preview (design tools, slide canvases, story-like layouts) with stacking contexts and wrappers will hit the same browser behaviour. It is the combination of Agentation’s pick model + typical host/template DOM.
Related issues
- #109 — configurable / attribute-based element identity for clipboard output (same family: “what element counts?”).
- #71 — selection constraints in other embedding contexts (iframe).
Suggested directions (API / behaviour)
hitTestRootSelector (or a root ref passed from the host): from elementsFromPoint / composed path, choose the deepest HTMLElement within that root, instead of the global topmost node.hitTestIgnoreSelector (or list): treat matching elements as transparent for picking (iterate down the stack until a non-ignored target). Must be defined carefully with shadow DOM.- Docs: short “Embedding Agentation” section describing recommended
pointer-events layering for host shells.
Our concrete integration
React + Vite editor: slide preview under canvas transforms and editor ValidationSurface-style wrappers; without host-side CSS fixes, annotations attach to the wrapper instead of the template subtree.
Happy to help validate a design or contribute a PR if this direction matches the project’s goals.
Problem
When Agentation runs inside host apps that render content inside extra wrapper
<div>s (scaled canvas / artboard shells,position: absolute; inset: 0layout layers, z-index stacking), the click handler usesdocument.elementFromPoint(viadeepElementFromPoint). That always returns the topmost element in the browser hit-test stack.In practice the picked node is often:
pointer-eventsdefaults toauto), ordivpainted above text).The author sees the “page” or a text block, but Agentation identifies a parent shell or overlay instead. There is no public prop today to constrain hit-testing (e.g. root subtree) or to skip known host selectors, so integrators rely on fragile CSS (
pointer-events: noneon shells,autoonly under a single template host).Why this is not unique to one app
Any embedded preview (design tools, slide canvases, story-like layouts) with stacking contexts and wrappers will hit the same browser behaviour. It is the combination of Agentation’s pick model + typical host/template DOM.
Related issues
Suggested directions (API / behaviour)
hitTestRootSelector(or arootref passed from the host): fromelementsFromPoint/ composed path, choose the deepestHTMLElementwithin that root, instead of the global topmost node.hitTestIgnoreSelector(or list): treat matching elements as transparent for picking (iterate down the stack until a non-ignored target). Must be defined carefully with shadow DOM.pointer-eventslayering for host shells.Our concrete integration
React + Vite editor: slide preview under canvas transforms and editor
ValidationSurface-style wrappers; without host-side CSS fixes, annotations attach to the wrapper instead of the template subtree.Happy to help validate a design or contribute a PR if this direction matches the project’s goals.