# `DemoDirector.Components`
[🔗](https://github.com/ralmidani/demo_director/blob/v0.1.1/lib/demo_director/components.ex#L1)

HEEx components for the DemoDirector overlay.

Mount once on a layout (typically the dev-time root layout):

    import DemoDirector.Components

    ~H"""
    <.demo_director_overlay />
    """

When the host app's router has called `demo_director/1` (the
macro from `DemoDirector.Router`), this component renders:

  * a `<link rel="stylesheet">` pointing at the macro-mounted CSS
  * a `<script>` pointing at the matching JS
  * the subtitle and highlight DOM nodes the agent's emitted JS
    will manipulate

When the macro has NOT been called (e.g., a prod build that gates
the macro behind `:dev_routes`), the component renders nothing.
This is the belt-and-suspenders strip — even if a layout
accidentally calls the component in prod, it stays inert.

# `demo_director_overlay`

Renders the DemoDirector overlay (subtitle bar + highlight
ring) and includes the package's CSS + JS.

Renders empty when the host app has not invoked the
`demo_director/1` router macro (no mount path registered).

## Attributes

* `id_prefix` (`:string`) - Prefix for the DOM ids of the subtitle and highlight nodes. Defaults to `"demo-director"`.

---

*Consult [api-reference.md](api-reference.md) for complete listing*