{% interactions %}

Attributes

Parameter	Type	Required	Description
id	string	✓	Unique identifier for this flow player (kebab-case, no prefix)
start	string	✓	Bare surface id of the first screen shown

Valid Children

Tag	Multiplicity
{% clickable %}	[+]

Valid Parent Contexts

This tag is valid inside: {% feature %}, {% story %}, {% surface %}

Rules

Rule	Force	Realm	Reference	Description
interactions-surfaces-declared	must	global	—	Surfaces referenced in must be either declared in the same file or exist as separate documents in the project. referential-integrity
interactions-after-surfaces	must	global	—	must appear after all blocks if any are present in the same file. ordering
interactions-refs-valid	must	global	—	Every surface id and every must match a local or global surface. referential-integrity

Links surfaces into a clickable prototype. In a surface document it must appear after all surface blocks.

Clickable Transitions

Within an interactions block, use the clickable tag to define navigation between elements and surfaces.

\{% clickable /%\}

Defines a single navigation link from an element on one surface to another surface.

Attribute	Type	Required	Description
from	string	yes	The source element in \{surfaceId\}.\{elementId\} format — e.g. bm-library.open-btn
target	string	yes	The bare surface id of the destination screen
transition	enum	no	Animation type: none (default), fade, slide, slide-back

Making DSL Elements Clickable

To make a DSL element a link target, give it an id attribute in the Pug block of the surface tag.

button(id="open-btn" variant="primary") Open

The from attribute then references it as \{surfaceId\}.\{elementId\}:

from="bm-library.open-btn"

Interactions block linking surfaces via clickable tags

taginteractionsclickablesurface interactions-tag-flow

{% interactions id="bookmark-management-flow" start="bm-library" %}
  {% clickable from="bm-library.open-btn" target="bm-detail" transition="slide" /%}
  {% clickable from="bm-detail.back-btn" target="bm-library" transition="slide-back" /%}
  {% clickable from="bm-detail.delete-btn" target="bm-confirm-delete" transition="fade" /%}
  {% clickable from="bm-confirm-delete.cancel-btn" target="bm-detail" transition="slide-back" /%}
  {% clickable from="bm-confirm-delete.confirm-btn" target="bm-library" transition="fade" /%}
{% /interactions %}