# @communities-webruntime/design

## Summary

This is a Webruntime-specific adapter between [@communities-webruntime/client](https://git.soma.salesforce.com/communities/webruntime/tree/master/packages/%40webruntime/framework) and [commeditor](https://git.soma.salesforce.com/communities/builder).

## Usage

Build the package and include the generated `webruntimedesign.js` alongside your `webruntime.js`:

```
<script src="/webruntime.js"/>
<script src="/webruntimedesign.js"/>
```

It will periodically scan the DOM and collect any interactable elements.

## Notable modules

### webruntimedesign/regionWrapper

-   Used by [`view-template-generator`](https://git.soma.salesforce.com/communities/webruntime/blob/master/packages/@communities-webruntime/services/src/views/view-template-generator.js), exposes region-related metadata to the DOM

### webruntimedesign/componentWrapper

-   Used by [`view-template-generator`](https://git.soma.salesforce.com/communities/webruntime/blob/master/packages/@communities-webruntime/services/src/views/view-template-generator.js), exposes component-related metadata to the DOM

### webruntimedesign/designmode

-   Configuration for `@lbf/interactions`

### webruntimedesign/StyleManager

-   Handles CSS variable update requests on the canvas

## Notable dependencies

-   [@lbf/interactions](https://git.soma.salesforce.com/BuilderFramework/builder-framework/tree/master/packages/%40lbf/interactions) is used primarily for shadowDOM compatible canvas interactability
-   [@lbf/utils](https://git.soma.salesforce.com/BuilderFramework/builder-framework/tree/master/packages/%40lbf/utils) is used primarily for the included `Window postmessage connection manager`