Transparent shapes and drag regions

Visual transparency does not imply click-through

CSS defines appearance; markers define host click regions. Keep both aligned for shaped tools. Transparent windows read markers; opaque windows use rectangular hits.

Use circular hits for circular tools and rounded hits for cards. Do not trace every decorative pixel into difficult-to-click edges.

Mark the full tool shell

<main class="tool" data-nexus-window data-nexus-hit="rounded">
  <header data-nexus-drag>
    <span>My tool</span>
    <button id="close" type="button" data-nexus-no-drag>Close </button>
  </header>
  <section>Place controls here</section>
</main>
<script src="host.js"></script>

CSS draws the tool background/corners; host.js handles closing. Declare transparent=True. This is only a shell fragment; complete files are in Starter tutorial.

Separate dragging from controls

• Put data-nexus-window on the full clickable shell, not only the header.
• Use data-nexus-drag only for drag areas such as headers, not body sliders.
• Simple native controls usually exclude dragging automatically. Add data-nexus-no-drag to custom hosts, especially with Shadow DOM.
• Use data-nexus-selectable for selectable text and check user-select and overlay pointer-events.

Check transparent areas and popups

Transparent exteriors should pass input to Blender while controls work inside. After opening menus, dropdowns, and overlays, check new content remains within active regions. Initial screenshots cannot prove hidden content is clickable.

Keep the host shell and independent close script when replacing pages or libraries. Libraries do not configure host hit testing for you.

Check four locations/actions

1. Header drag moves the window; body controls do not accidentally drag it.
2. Buttons and inputs perform actions and receive focus.
3. Transparent exterior passes input to Blender without a blocking rectangle.
4. Closing and reopening work without leftover windows.

If entirely invisible, check page loading and whether transparency is needed. Empty content on transparency may have no visible outline.