From 8bbd37439ece578f2364b2708ffb271040f9e512 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Santanch=C3=A8?= <santanche@gmail.com>
Date: Mon, 7 Sep 2020 08:43:16 -0300
Subject: [PATCH 1/2] refactor (dcc): dcc-trigger becomes dcc-button

dcc-trigger becomes dcc-button and two attributes are renamed:
* action becomes topic
* value becomes message
---
 src/adonisjs/old_html/author/author.html      | 34 +++++------
 src/adonisjs/old_html/player/index.html       |  2 +-
 ...on-dcc-trigger.svg => icon-dcc-button.svg} |  0
 src/adonisjs/public/author/js/author.js       | 12 ++--
 src/adonisjs/public/author/js/navigator.js    |  6 +-
 .../{dcc-trigger.js => dcc-button.js}         | 54 +++++++++---------
 .../dccs/components/dcc-input-choice.js       |  4 +-
 src/adonisjs/public/dccs/edit/properties.js   |  4 +-
 .../playground/gallery/cell/ecology-editor.js | 36 ++++++------
 .../dccs/playground/gallery/cell/energy.js    |  6 +-
 .../gallery/cell/expression-rocket.js         |  4 +-
 .../gallery/cell/flow-water-editor.js         | 24 ++++----
 .../playground/gallery/cell/flow-water.js     |  6 +-
 .../playground/gallery/cell/microworld3.js    | 28 +++++-----
 .../cell/movement-fall-rocks-editor.js        | 10 ++--
 .../gallery/cell/movement-fall-rocks.js       |  4 +-
 .../gallery/cell/movement-influence-colors.js |  6 +-
 ...ent-replication-vanish-tinyearth-editor.js | 18 +++---
 .../movement-replication-vanish-tinyearth.js  |  6 +-
 .../cell/movement-sand-clock-editor.js        | 24 ++++----
 .../gallery/cell/movement-sand-clock.js       |  6 +-
 .../cell/replication-vanish-microworld.js     |  6 +-
 ...on-dcc-trigger.svg => icon-dcc-button.svg} |  0
 .../public/dccs/playground/index.html         |  6 +-
 .../public/dccs/playground/presenter.html     |  6 +-
 src/adonisjs/public/dccs/playground/vm.html   |  6 +-
 src/adonisjs/public/modules/capsule.html      |  2 +-
 .../public/scripts/playground/editor.html     | 26 ++++-----
 .../scripts/playground/gallery/cell/boids.js  | 56 +++++++++----------
 ...xpression-rocket-wide-timer-scale-ruler.js | 44 +++++++--------
 .../expression-rocket-wide-timer-scale.js     | 36 ++++++------
 .../cell/expression-rocket-wide-timer.js      | 36 ++++++------
 .../gallery/cell/expression-rocket-wide.js    | 36 ++++++------
 .../gallery/cell/expression-rocket.js         | 36 ++++++------
 .../gallery/cell/microworld-scripts.js        | 16 +++---
 .../gallery/cell/microworld-sliders.js        | 16 +++---
 .../cell/movement-fly-balloon-cloud-plane.js  | 20 +++----
 .../gallery/cell/movement-fly-balloon.js      | 12 ++--
 .../movement-replication-vanish-tinyearth.js  |  6 +-
 .../gallery/cell/movement-sand-clock.js       | 12 ++--
 .../gallery/cell/movement-two-planes.js       | 32 +++++------
 .../gallery/cell/zombie-wall-challenge1.js    | 16 +++---
 .../gallery/cell/zombie-wall-challenge2.js    | 16 +++---
 .../gallery/cell/zombie-wall-challenge3.js    | 16 +++---
 .../gallery/cell/zombie-wall-challenge4.js    | 16 +++---
 .../gallery/cell/zombie-wall-challenge5.js    | 16 +++---
 .../gallery/cell/zombie-wall-challenge6.js    | 16 +++---
 .../gallery/cell/zombie-wall-train1.js        | 16 +++---
 .../public/scripts/playground/index.html      |  6 +-
 .../scripts/playground/js/author-cell.js      |  8 +--
 .../public/scripts/playground/script-dcc.html |  6 +-
 .../public/themes/classic/css/theme.css       |  8 +--
 .../public/themes/classic/notice.html         |  2 +-
 .../css/{dcc-trigger.css => dcc-button.css}   |  6 +-
 .../themes/jacinto/css/templates-classic.css  |  6 +-
 .../public/themes/jacinto/css/theme.css       |  4 +-
 .../public/themes/jacinto/detailed.html       |  2 +-
 .../public/themes/jacinto/detailed_role.html  |  2 +-
 src/adonisjs/public/themes/jacinto/exam.html  |  2 +-
 .../public/themes/jacinto/exam_wide.html      |  2 +-
 .../public/themes/jacinto/information.html    |  2 +-
 .../themes/jacinto/information_exam.html      |  2 +-
 src/adonisjs/public/themes/jacinto/input.html |  2 +-
 .../public/themes/jacinto/notice.html         |  6 +-
 .../themes/jacinto/notice_exam_zoom.html      |  6 +-
 .../public/themes/jacinto/notice_wide.html    |  6 +-
 .../public/themes/jacinto/old/detailed.html   |  2 +-
 .../themes/jacinto/old/information.html       |  2 +-
 .../public/themes/jacinto/old/input.html      |  2 +-
 .../public/themes/jacinto/old/note.html       |  2 +-
 .../public/themes/jacinto/presentation_3.html |  2 +-
 .../public/themes/jacinto/presentation_4.html |  2 +-
 .../public/themes/jacinto/svgs-old/note.svg   |  4 +-
 .../public/themes/jacinto/svgs/notice.svg     |  4 +-
 .../css/dcc-button.css}                       |  6 +-
 src/adonisjs/public/themes/minimal/note.html  |  2 +-
 .../css/{dcc-trigger.css => dcc-button.css}   |  6 +-
 .../public/themes/simple-svg/css/theme.css    |  4 +-
 .../public/themes/simple-svg/detailed.html    |  2 +-
 .../public/themes/simple-svg/exam.html        |  2 +-
 .../public/themes/simple-svg/input.html       |  2 +-
 .../blue/{dcc-trigger.css => dcc-button.css}  |  2 +-
 .../css/{dcc-trigger.css => dcc-button.css}   | 10 ++--
 .../{dcc-trigger.css => dcc-button.css}       |  2 +-
 .../green/{dcc-trigger.css => dcc-button.css} |  2 +-
 .../{dcc-trigger.css => dcc-button.css}       |  2 +-
 .../red/{dcc-trigger.css => dcc-button.css}   |  2 +-
 .../{dcc-trigger.css => dcc-button.css}       |  2 +-
 .../public/themes/simple/local/note.js        |  2 +-
 src/adonisjs/public/themes/simple/note.html   |  2 +-
 .../css/{dcc-trigger.css => dcc-button.css}   |  6 +-
 .../zombie-antigo/css/templates-classic.css   |  6 +-
 .../themes/zombie-antigo/css/templates.css    |  4 +-
 .../public/themes/zombie-antigo/notice.html   |  2 +-
 .../css/dcc-button.css}                       |  6 +-
 .../public/themes/zombie/local/note.js        |  2 +-
 src/adonisjs/public/themes/zombie/note.html   |  2 +-
 .../public/translator/item-templates.js       |  4 +-
 .../public/translator/playground/editor.html  | 14 ++---
 .../translator/playground/index-old.html      |  6 +-
 .../public/translator/playground/index.html   |  6 +-
 src/adonisjs/public/translator/translator.js  |  2 +-
 .../resources/views/author/author.edge        | 32 +++++------
 .../views/layout/partials/settings-modal.edge |  2 +-
 .../resources/views/player/player.edge        |  2 +-
 105 files changed, 530 insertions(+), 530 deletions(-)
 rename src/adonisjs/public/author/icons/{icon-dcc-trigger.svg => icon-dcc-button.svg} (100%)
 rename src/adonisjs/public/dccs/components/{dcc-trigger.js => dcc-button.js} (76%)
 rename src/adonisjs/public/dccs/playground/icons/{icon-dcc-trigger.svg => icon-dcc-button.svg} (100%)
 rename src/adonisjs/public/themes/jacinto/css/{dcc-trigger.css => dcc-button.css} (71%)
 rename src/adonisjs/public/themes/{zombie/css/dcc-trigger.css => minimal/css/dcc-button.css} (82%)
 rename src/adonisjs/public/themes/simple-svg/css/{dcc-trigger.css => dcc-button.css} (71%)
 rename src/adonisjs/public/themes/simple/css/blue/{dcc-trigger.css => dcc-button.css} (70%)
 rename src/adonisjs/public/themes/simple/css/{dcc-trigger.css => dcc-button.css} (83%)
 rename src/adonisjs/public/themes/simple/css/default/{dcc-trigger.css => dcc-button.css} (69%)
 rename src/adonisjs/public/themes/simple/css/green/{dcc-trigger.css => dcc-button.css} (70%)
 rename src/adonisjs/public/themes/simple/css/purple/{dcc-trigger.css => dcc-button.css} (70%)
 rename src/adonisjs/public/themes/simple/css/red/{dcc-trigger.css => dcc-button.css} (70%)
 rename src/adonisjs/public/themes/simple/css/yellow/{dcc-trigger.css => dcc-button.css} (70%)
 rename src/adonisjs/public/themes/system/css/{dcc-trigger.css => dcc-button.css} (87%)
 rename src/adonisjs/public/themes/{minimal/css/dcc-trigger.css => zombie/css/dcc-button.css} (82%)

diff --git a/src/adonisjs/old_html/author/author.html b/src/adonisjs/old_html/author/author.html
index 5536b7e9e..4fcfa461c 100644
--- a/src/adonisjs/old_html/author/author.html
+++ b/src/adonisjs/old_html/author/author.html
@@ -39,7 +39,7 @@
 <script src="../dccs/components/dcc-image.js"></script>
 <script src="../dccs/components/dcc-expression.js"></script>
 <script src="../dccs/components/dcc-block.js"></script>
-<script src="../dccs/components/dcc-trigger.js"></script>
+<script src="../dccs/components/dcc-button.js"></script>
 <script src="../dccs/components/dcc-character.js"></script>
 <script src="../dccs/components/dcc-lively-dialog.js"></script>
 <script src="../dccs/components/dcc-notice-input.js"></script>
@@ -141,8 +141,8 @@ <h3>Settings</h3>
             <li class="breadcrumb-item"><a href="home.html">Home</a></li>
             <li class="breadcrumb-item">
               <div style="height: 15px">
-                <dcc-trigger action="control/leave/drafts" label="Drafts" xstyle="out">
-                </dcc-trigger>
+                <dcc-button topic="control/leave/drafts" label="Drafts" xstyle="out">
+                </dcc-button>
               </div>
             </li>
             <li class="breadcrumb-item active" aria-current="page">Edit case</li>
@@ -163,14 +163,14 @@ <h1>Edit case</h1>
            style="position:relative">
         <nav class="navbar navbar-light">
           <div class="col-6">
-            <dcc-trigger action="control/case/save" label="SAVE" xstyle="in"></dcc-trigger>
-            <dcc-trigger action="control/case/settings" label="SETTINGS" xstyle="in"></dcc-trigger>
+            <dcc-button topic="control/case/save" label="SAVE" xstyle="in"></dcc-button>
+            <dcc-button topic="control/case/settings" label="SETTINGS" xstyle="in"></dcc-button>
             
             <!-- Settings button activates a modal -->
             <button type="button" class="btn btn-secondary btn-sm" data-toggle="modal" data-target="#settings-modal" id="btn-save-settings">New Settings</button>
             
             <div id="advanced-mode" style="display:none">
-              <dcc-trigger action="control/case/markdown" label="MARKDOWN" xstyle="in"></dcc-trigger>
+              <dcc-button topic="control/case/markdown" label="MARKDOWN" xstyle="in"></dcc-button>
             </div>
             <div class="sty-message-space" id="message-space"></div>
 
@@ -218,8 +218,8 @@ <h1>Edit case</h1>
           <div class="w-75 d-flex" id="knot-main">
             <div id="navigator-expansion" class="sty-navigation-expansion">
                 <div id="navigation-set" class="sty-navigation-set">
-                  <dcc-trigger id="button-expand-nav" action="control/navigator/expand" label="Expand" image="icons/icon-expansion-right.svg"></dcc-trigger>
-                  <dcc-trigger id="button-retract-nav" action="control/navigator/retract" label="Retract" image="icons/icon-expansion-left.svg"></dcc-trigger>
+                  <dcc-button id="button-expand-nav" topic="control/navigator/expand" label="Expand" image="icons/icon-expansion-right.svg"></dcc-button>
+                  <dcc-button id="button-retract-nav" topic="control/navigator/retract" label="Retract" image="icons/icon-expansion-left.svg"></dcc-button>
                 </div>
             </div>
             <div class="w-100">
@@ -228,8 +228,8 @@ <h1>Edit case</h1>
               </div>
             </div>
             <div id="properties-expansion" class="sty-navigation-expansion">
-                <dcc-trigger id="button-expand-prop" action="control/properties/expand" label="Expand" image="icons/icon-expansion-left.svg"></dcc-trigger>
-                <dcc-trigger id="button-retract-prop" action="control/properties/retract" label="Retract" image="icons/icon-expansion-right.svg" style="display:none"></dcc-trigger>
+                <dcc-button id="button-expand-prop" topic="control/properties/expand" label="Expand" image="icons/icon-expansion-left.svg"></dcc-button>
+                <dcc-button id="button-retract-prop" topic="control/properties/retract" label="Retract" image="icons/icon-expansion-right.svg" style="display:none"></dcc-button>
             </div>
           </div>
 
@@ -237,19 +237,19 @@ <h1>Edit case</h1>
             <div id="elements-block" class="sty-elements-block" style="position:relative; display:none">
                <!--
                <div id="elements-panel" class="sty-control-panel std-border">
-                  <div class="control-button"><dcc-trigger action="control/element/text/new" label="Text" image="icons/icon-dcc-text.svg"></dcc-trigger></div>
-                  <div class="control-button"><dcc-trigger action="control/element/image/new" label="Text" image="icons/icon-dcc-image.svg"></dcc-trigger></div>
-                  <div class="control-button"><dcc-trigger action="control/element/option/new" label="Text" image="icons/icon-dcc-trigger.svg"></dcc-trigger></div>
+                  <div class="control-button"><dcc-button topic="control/element/text/new" label="Text" image="icons/icon-dcc-text.svg"></dcc-button></div>
+                  <div class="control-button"><dcc-button topic="control/element/image/new" label="Text" image="icons/icon-dcc-image.svg"></dcc-button></div>
+                  <div class="control-button"><dcc-button topic="control/element/option/new" label="Text" image="icons/icon-dcc-button.svg"></dcc-button></div>
                </div>
              -->
                <div id="properties-block" class="sty-properties-block std-border">
                   <div id="properties-panel" class="styp-properties-panel"></div>
                   <div id="properties-buttons">
-                     <dcc-trigger xstyle="in" action="properties/apply/details" label="APPLY"></dcc-trigger>
+                     <dcc-button xstyle="in" topic="properties/apply/details" label="APPLY"></dcc-button>
                      <!--
-                     <div class="control-button"><dcc-trigger xstyle="in" action="control/element/selected/up" label="Element Up" image="icons/icon-move-up.svg"></dcc-trigger></div>
-                     <div class="control-button"><dcc-trigger xstyle="in" action="control/element/selected/down" label="Element Down" image="icons/icon-move-down.svg"></dcc-trigger></div>
-                     <div class="control-button"><dcc-trigger xstyle="in" action="control/element/selected/delete" label="Delete Element" image="icons/icon-delete.svg"></dcc-trigger></div>
+                     <div class="control-button"><dcc-button xstyle="in" topic="control/element/selected/up" label="Element Up" image="icons/icon-move-up.svg"></dcc-button></div>
+                     <div class="control-button"><dcc-button xstyle="in" topic="control/element/selected/down" label="Element Down" image="icons/icon-move-down.svg"></dcc-button></div>
+                     <div class="control-button"><dcc-button xstyle="in" topic="control/element/selected/delete" label="Delete Element" image="icons/icon-delete.svg"></dcc-button></div>
                    -->
                   </div>
                </div>
diff --git a/src/adonisjs/old_html/player/index.html b/src/adonisjs/old_html/player/index.html
index a506b3329..44a4b5d9f 100644
--- a/src/adonisjs/old_html/player/index.html
+++ b/src/adonisjs/old_html/player/index.html
@@ -19,7 +19,7 @@
    <script src="../dccs/components/dcc-annotation.js"></script>
    <script src="../dccs/components/dcc-expression.js"></script>
    <script src="../dccs/components/dcc-block.js"></script>
-   <script src="../dccs/components/dcc-trigger.js"></script>
+   <script src="../dccs/components/dcc-button.js"></script>
    <script src="../dccs/components/dcc-character.js"></script>
    <script src="../dccs/components/dcc-lively-dialog.js"></script>
    <script src="../dccs/components/dcc-notice-input.js"></script>
diff --git a/src/adonisjs/public/author/icons/icon-dcc-trigger.svg b/src/adonisjs/public/author/icons/icon-dcc-button.svg
similarity index 100%
rename from src/adonisjs/public/author/icons/icon-dcc-trigger.svg
rename to src/adonisjs/public/author/icons/icon-dcc-button.svg
diff --git a/src/adonisjs/public/author/js/author.js b/src/adonisjs/public/author/js/author.js
index af01bea95..75a37bcd8 100644
--- a/src/adonisjs/public/author/js/author.js
+++ b/src/adonisjs/public/author/js/author.js
@@ -498,18 +498,18 @@ class AuthorManager {
             }
             const extra =
                ((this._templateNewKnot == null) ? "" :
-                  "<dcc-trigger action='control/knot/new' label='Add' xstyle='in'>" +
-                        "</dcc-trigger>") +
-               "<dcc-trigger action='control/knot/remove' label='Remove' xstyle='in'>" +
-                     "</dcc-trigger>";
+                  "<dcc-button topic='control/knot/new' label='Add' xstyle='in'>" +
+                        "</dcc-button>") +
+               "<dcc-button topic='control/knot/remove' label='Remove' xstyle='in'>" +
+                     "</dcc-button>";
 
             // Properties.s.editKnotProperties(this._knots[this._knotSelected],
             //                                 this._knotSelected, miniature, extra);
             if (this._templateNewKnot != null) {
                const miniBox = miniature.getBoundingClientRect();
                this._buildFloatingMenu(miniBox.left, miniBox.top,
-                  "<dcc-trigger action='control/knot/new' label='Add' xstyle='in'>" +
-                  "</dcc-trigger>");
+                  "<dcc-button topic='control/knot/new' label='Add' xstyle='in'>" +
+                  "</dcc-button>");
             }
          } else {
          */
diff --git a/src/adonisjs/public/author/js/navigator.js b/src/adonisjs/public/author/js/navigator.js
index 5163dd224..89af38d21 100644
--- a/src/adonisjs/public/author/js/navigator.js
+++ b/src/adonisjs/public/author/js/navigator.js
@@ -304,8 +304,8 @@ async _presentTreeCase() {
 
    if (this._treeStack.length > 0)
       navTree =
-         "<dcc-trigger action='control/group/up' label='Up' " +
-           "image='icons/icon-back.svg' xstyle='sty-tree-button'></dcc-trigger>" +
+         "<dcc-button topic='control/group/up' label='Up' " +
+           "image='icons/icon-back.svg' xstyle='sty-tree-button'></dcc-button>" +
          navTree;
 
    this._navigationPanel.innerHTML = navTree;
@@ -546,7 +546,7 @@ async _createMiniature(knot, krender) {
               Navigator.miniKnot[this._retracted].height + "px'>" +
               knot.title + "</div>";
 
-   miniature.innerHTML = inner + "<dcc-trigger action='control/" +
+   miniature.innerHTML = inner + "<dcc-button topic='control/" +
                             ((knot.render) ? "knot/" : "group/") +
                             knot.knotid + "/selected' " +
                             "xstyle='sty-navigation-knot-cover' label = ''>";
diff --git a/src/adonisjs/public/dccs/components/dcc-trigger.js b/src/adonisjs/public/dccs/components/dcc-button.js
similarity index 76%
rename from src/adonisjs/public/dccs/components/dcc-trigger.js
rename to src/adonisjs/public/dccs/components/dcc-button.js
index 66ea0bd34..adb55974b 100644
--- a/src/adonisjs/public/dccs/components/dcc-trigger.js
+++ b/src/adonisjs/public/dccs/components/dcc-button.js
@@ -1,4 +1,4 @@
-/* Trigger DCC
+/* Button DCC
  *
  * xstyle - controls the behavior of the style
  *   * "in" or not defined -> uses the internal trigger-button style
@@ -6,7 +6,7 @@
  *   * "out"  -> apply an style externally defined with the name "trigger-button-template"
 **************************************************************************/
 
-class DCCTrigger extends DCCBlock {
+class DCCButton extends DCCBlock {
   constructor () {
     super()
     this._computeTrigger = this._computeTrigger.bind(this)
@@ -21,7 +21,7 @@ class DCCTrigger extends DCCBlock {
 
     super.connectedCallback()
 
-    if (this.hasAttribute('action') && this.action.endsWith('/navigate')) {
+    if (this.hasAttribute('topic') && this.topic.endsWith('/navigate')) {
       this.navigationBlocked = this.navigationBlocked.bind(this)
       MessageBus.ext.subscribe('+/+/navigate/blocked', this.navigationBlocked)
     }
@@ -31,7 +31,7 @@ class DCCTrigger extends DCCBlock {
 
   static get observedAttributes () {
     return DCCBlock.observedAttributes.concat(
-      ['type', 'link', 'action', 'value', 'variable'])
+      ['type', 'link', 'topic', 'message', 'variable'])
   }
 
   get type () {
@@ -50,20 +50,20 @@ class DCCTrigger extends DCCBlock {
     this.setAttribute('link', newValue)
   }
 
-  get action () {
-    return this.getAttribute('action')
+  get topic () {
+    return this.getAttribute('topic')
   }
 
-  set action (newValue) {
-    this.setAttribute('action', newValue)
+  set topic (newValue) {
+    this.setAttribute('topic', newValue)
   }
 
-  get value () {
-    return this.getAttribute('value')
+  get message () {
+    return this.getAttribute('message')
   }
 
-  set value (newValue) {
-    this.setAttribute('value', newValue)
+  set message (newValue) {
+    this.setAttribute('message', newValue)
   }
 
   get variable () {
@@ -80,14 +80,14 @@ class DCCTrigger extends DCCBlock {
     // === pre presentation setup
     let html
     if (this.xstyle.startsWith('out')) { html = this.label } else {
-      // html = DCCTrigger.templateStyle;
+      // html = DCCButton.templateStyle;
       if (this.hasAttribute('image')) {
-        html = DCCTrigger.templateElements.image
+        html = DCCButton.templateElements.image
           .replace('[render]', this._renderStyle())
           .replace('[label]', this.label)
           .replace('[image]', this.image)
       } else {
-        html = DCCTrigger.templateElements.regular
+        html = DCCButton.templateElements.regular
           .replace('[render]', this._renderStyle())
           .replace('[label]', this.label)
       }
@@ -124,7 +124,7 @@ class DCCTrigger extends DCCBlock {
   /* Rendering */
 
   elementTag () {
-    return DCCTrigger.elementTag
+    return DCCButton.elementTag
   }
 
   externalLocationType () {
@@ -138,19 +138,19 @@ class DCCTrigger extends DCCBlock {
           ? this.variable.substring(0, this.variable.indexOf(':')) : this.variable
         console.log('=== trigger variable')
         console.log('var/' + v + '/changed')
-        console.log((this.variable.endsWith(':label')) ? this.label : this.value)
+        console.log((this.variable.endsWith(':label')) ? this.label : this.message)
         MessageBus.ext.publish('var/' + v + '/changed',
         {
-          sourceType: DCCTrigger.elementTag,
-          value: (this.variable.endsWith(':label')) ? this.label : this.value
+          sourceType: DCCButton.elementTag,
+          value: (this.variable.endsWith(':label')) ? this.label : this.message
         })
       }
-      if (this.hasAttribute('label') || this.hasAttribute('action')) {
-        if (this.hasAttribute('action') && this.action.endsWith('/navigate')) { this._active = false }
-        const topic = (this.hasAttribute('action'))
-          ? this.action : 'trigger/' + this.label + '/clicked'
+      if (this.hasAttribute('label') || this.hasAttribute('topic')) {
+        if (this.hasAttribute('topic') && this.topic.endsWith('/navigate')) { this._active = false }
+        const topic = (this.hasAttribute('topic'))
+          ? this.topic : 'button/' + this.label + '/clicked'
         const message = {}
-        if (this.hasAttribute('value')) { message.value = this.value }
+        if (this.hasAttribute('message')) { message.value = this.message }
 
         MessageBus.ext.publish(topic, message)
       }
@@ -163,7 +163,7 @@ class DCCTrigger extends DCCBlock {
 }
 
 (function () {
-  DCCTrigger.templateElements = {
+  DCCButton.templateElements = {
     regular:
    '<span id=\'presentation-dcc\' class=\'[render]\'>[label]</span>',
     image:
@@ -172,7 +172,7 @@ class DCCTrigger extends DCCBlock {
    </span>`
   }
 
-  DCCTrigger.elementTag = 'dcc-trigger'
+  DCCButton.elementTag = 'dcc-button'
 
-  customElements.define(DCCTrigger.elementTag, DCCTrigger)
+  customElements.define(DCCButton.elementTag, DCCButton)
 })()
diff --git a/src/adonisjs/public/dccs/components/dcc-input-choice.js b/src/adonisjs/public/dccs/components/dcc-input-choice.js
index b83f5285b..7828df713 100644
--- a/src/adonisjs/public/dccs/components/dcc-input-choice.js
+++ b/src/adonisjs/public/dccs/components/dcc-input-choice.js
@@ -118,7 +118,7 @@ class DCCInputOption extends DCCInput {
               ? '' : this._statement
 
       const html = (this.target)
-        ? "<dcc-trigger id='[id]' xstyle='theme' action='[target]' label='[statement]' divert='round' value='[value]' variable='[variable]:label'></dcc-trigger>"
+        ? "<dcc-button id='[id]' xstyle='theme' topic='[target]' label='[statement]' divert='round' message='[value]' variable='[variable]:label'></dcc-button>"
           .replace('[id]', varid + nop)
           .replace('[target]', this.target)
           .replace('[statement]', child._statement)
@@ -249,7 +249,7 @@ class DCCInputChoice extends DCCInput {
              child.tagName.toLowerCase() == DCCInputOption.elementTag) {
         nop++
         const element = (this.target || child.target)
-          ? "<dcc-trigger id='presentation-dcc-[id]' xstyle='theme' action='[target]' label='[statement]' divert='round' value='[value]' variable='[variable]:label'></dcc-trigger>"
+          ? "<dcc-button id='presentation-dcc-[id]' xstyle='theme' topic='[target]' label='[statement]' divert='round' message='[value]' variable='[variable]:label'></dcc-button>"
             .replace('[id]', varid + '_' + nop)
             .replace('[target]', (child.target) ? child.target : this.target)
             .replace('[statement]', child._statement)
diff --git a/src/adonisjs/public/dccs/edit/properties.js b/src/adonisjs/public/dccs/edit/properties.js
index c22c622e7..4ce26d86a 100644
--- a/src/adonisjs/public/dccs/edit/properties.js
+++ b/src/adonisjs/public/dccs/edit/properties.js
@@ -642,8 +642,8 @@ class Properties {
   /*
 Properties.buttonApply =
 `<div class="control-button">
-   <dcc-trigger xstyle="in" action="properties/apply" label="Apply" image="icons/icon-check.svg">
-   </dcc-trigger>
+   <dcc-button xstyle="in" topic="properties/apply" label="Apply" image="icons/icon-check.svg">
+   </dcc-button>
 </div>`;
 */
 
diff --git a/src/adonisjs/public/dccs/playground/gallery/cell/ecology-editor.js b/src/adonisjs/public/dccs/playground/gallery/cell/ecology-editor.js
index 0320e7cd4..d1aab41d7 100644
--- a/src/adonisjs/public/dccs/playground/gallery/cell/ecology-editor.js
+++ b/src/adonisjs/public/dccs/playground/gallery/cell/ecology-editor.js
@@ -78,12 +78,12 @@ _____h______________
 </rule-dcc-cell-pair>
 
 <div>
-   <dcc-trigger label="Próximo" action="state/next"></dcc-trigger>
-   <dcc-trigger label="Play" action="timer/start"></dcc-trigger>
-   <dcc-trigger label="Stop" action="timer/stop"></dcc-trigger>
-   <dcc-trigger label="Gravar" action="state/save"></dcc-trigger>
-   <dcc-trigger label="Ler" action="state/load"></dcc-trigger>
-   <dcc-trigger label="Baixar" action="state/download"></dcc-trigger>
+   <dcc-button label="Próximo" topic="state/next"></dcc-button>
+   <dcc-button label="Play" topic="timer/start"></dcc-button>
+   <dcc-button label="Stop" topic="timer/stop"></dcc-button>
+   <dcc-button label="Gravar" topic="state/save"></dcc-button>
+   <dcc-button label="Ler" topic="state/load"></dcc-button>
+   <dcc-button label="Baixar" topic="state/download"></dcc-button>
 </div>
 </div>
 
@@ -91,34 +91,34 @@ _____h______________
 Selecione um dos ícones abaixo para editar o ambiente:
 <div style="flex:48px; max-height:48px; display:flex; flex-direction:row; border:2px">
    <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
-      <dcc-trigger label="Água" action="type/water"
+      <dcc-button label="Água" topic="type/water"
                    image="images/cell/waves.svg">
-      </dcc-trigger>
+      </dcc-button>
    </div>
    <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
-      <dcc-trigger label="Rocha" action="type/rock"
+      <dcc-button label="Rocha" topic="type/rock"
                    image="images/cell/rock01.svg">
-      </dcc-trigger>
+      </dcc-button>
    </div>
    <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
-      <dcc-trigger label="Planta" action="type/plant"
+      <dcc-button label="Planta" topic="type/plant"
                    image="images/cell/plant01.svg">
-      </dcc-trigger>
+      </dcc-button>
    </div>
    <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
-      <dcc-trigger label="Herbívoro" action="type/herbivore"
+      <dcc-button label="Herbívoro" topic="type/herbivore"
                    image="images/cell/brontosaurus.svg">
-      </dcc-trigger>
+      </dcc-button>
    </div>
    <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
-      <dcc-trigger label="Carnívoro" action="type/carnivore"
+      <dcc-button label="Carnívoro" topic="type/carnivore"
                    image="images/cell/carnivorous-dinosaur.svg">
-      </dcc-trigger>
+      </dcc-button>
    </div>
    <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
-      <dcc-trigger label="Nada" action="type/empty"
+      <dcc-button label="Nada" topic="type/empty"
                    image="images/cell/cell-green.svg">
-      </dcc-trigger>
+      </dcc-button>
    </div>
 </div>
 
diff --git a/src/adonisjs/public/dccs/playground/gallery/cell/energy.js b/src/adonisjs/public/dccs/playground/gallery/cell/energy.js
index 0612815d7..2a79889bd 100644
--- a/src/adonisjs/public/dccs/playground/gallery/cell/energy.js
+++ b/src/adonisjs/public/dccs/playground/gallery/cell/energy.js
@@ -26,9 +26,9 @@ swwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww
 ***
 </rule-dcc-cell-flow>
 
-<dcc-trigger label="Next" action="state/next"></dcc-trigger>
-<dcc-trigger label="Play" action="timer/start"></dcc-trigger>
-<dcc-trigger label="Stop" action="timer/stop"></dcc-trigger>
+<dcc-button label="Next" topic="state/next"></dcc-button>
+<dcc-button label="Play" topic="timer/start"></dcc-button>
+<dcc-button label="Stop" topic="timer/stop"></dcc-button>
 
 <dcc-timer cycles="10000" interval="100" publish="state/next">
    <subscribe-dcc topic="timer/start" role="start"></subscribe-dcc>
diff --git a/src/adonisjs/public/dccs/playground/gallery/cell/expression-rocket.js b/src/adonisjs/public/dccs/playground/gallery/cell/expression-rocket.js
index 0bfad7a52..f2f54a5a3 100644
--- a/src/adonisjs/public/dccs/playground/gallery/cell/expression-rocket.js
+++ b/src/adonisjs/public/dccs/playground/gallery/cell/expression-rocket.js
@@ -18,8 +18,8 @@ __________
 
 <dcc-cell-image type="t" label="tree" image="images/cell/tree01.svg"></dcc-cell-image>
 
-<dcc-trigger label="Next" action="state/next"></dcc-trigger>
-<dcc-trigger label="Play" action="timer/start"></dcc-trigger>
+<dcc-button label="Next" topic="state/next"></dcc-button>
+<dcc-button label="Play" topic="timer/start"></dcc-button>
 
 <dcc-timer cycles="10" interval="1000" publish="state/next">
    <subscribe-dcc topic="timer/start" role="start"></subscribe-dcc>
diff --git a/src/adonisjs/public/dccs/playground/gallery/cell/flow-water-editor.js b/src/adonisjs/public/dccs/playground/gallery/cell/flow-water-editor.js
index 8891dd62d..9ef034293 100644
--- a/src/adonisjs/public/dccs/playground/gallery/cell/flow-water-editor.js
+++ b/src/adonisjs/public/dccs/playground/gallery/cell/flow-water-editor.js
@@ -45,12 +45,12 @@ _____________########
 </rule-dcc-cell-flow>
 
 <div>
-   <dcc-trigger label="Próximo" action="state/next"></dcc-trigger>
-   <dcc-trigger label="Play" action="timer/start"></dcc-trigger>
-   <dcc-trigger label="Stop" action="timer/stop"></dcc-trigger>
-   <dcc-trigger label="Gravar" action="state/save"></dcc-trigger>
-   <dcc-trigger label="Ler" action="state/load"></dcc-trigger>
-   <dcc-trigger label="Baixar" action="state/download"></dcc-trigger>
+   <dcc-button label="Próximo" topic="state/next"></dcc-button>
+   <dcc-button label="Play" topic="timer/start"></dcc-button>
+   <dcc-button label="Stop" topic="timer/stop"></dcc-button>
+   <dcc-button label="Gravar" topic="state/save"></dcc-button>
+   <dcc-button label="Ler" topic="state/load"></dcc-button>
+   <dcc-button label="Baixar" topic="state/download"></dcc-button>
 </div>
 </div>
 
@@ -58,19 +58,19 @@ _____________########
 Selecione um dos ícones abaixo para editar o ambiente:
 <div style="flex:48px; max-height:48px; display:flex; flex-direction:row; border:2px">
    <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
-      <dcc-trigger label="Água" action="type/water"
+      <dcc-button label="Água" topic="type/water"
                    image="images/cell/waves.svg">
-      </dcc-trigger>
+      </dcc-button>
    </div>
    <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
-      <dcc-trigger label="Parede" action="type/wall"
+      <dcc-button label="Parede" topic="type/wall"
                    image="images/cell/wall.svg">
-      </dcc-trigger>
+      </dcc-button>
    </div>
    <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
-      <dcc-trigger label="Nada" action="type/empty"
+      <dcc-button label="Nada" topic="type/empty"
                    image="images/cell/cell-yellow.svg">
-      </dcc-trigger>
+      </dcc-button>
    </div>
 </div>
 
diff --git a/src/adonisjs/public/dccs/playground/gallery/cell/flow-water.js b/src/adonisjs/public/dccs/playground/gallery/cell/flow-water.js
index a5a1b1399..8f95ef3fc 100644
--- a/src/adonisjs/public/dccs/playground/gallery/cell/flow-water.js
+++ b/src/adonisjs/public/dccs/playground/gallery/cell/flow-water.js
@@ -40,9 +40,9 @@ _____________########
    ***
 </rule-dcc-cell-flow>
 
-<dcc-trigger label="Next" action="state/next"></dcc-trigger>
-<dcc-trigger label="Play" action="timer/start"></dcc-trigger>
-<dcc-trigger label="Stop" action="timer/stop"></dcc-trigger>
+<dcc-button label="Next" topic="state/next"></dcc-button>
+<dcc-button label="Play" topic="timer/start"></dcc-button>
+<dcc-button label="Stop" topic="timer/stop"></dcc-button>
 
 <dcc-timer cycles="500" interval="100" publish="state/next">
    <subscribe-dcc topic="timer/start" role="start"></subscribe-dcc>
diff --git a/src/adonisjs/public/dccs/playground/gallery/cell/microworld3.js b/src/adonisjs/public/dccs/playground/gallery/cell/microworld3.js
index cc5e4dcd4..fbc6da39d 100644
--- a/src/adonisjs/public/dccs/playground/gallery/cell/microworld3.js
+++ b/src/adonisjs/public/dccs/playground/gallery/cell/microworld3.js
@@ -74,12 +74,12 @@ ____________________
 </rule-dcc-cell-pair>
 
 <div>
-   <dcc-trigger label="Próximo" action="state/next"></dcc-trigger>
-   <dcc-trigger label="Play" action="timer/start"></dcc-trigger>
-   <dcc-trigger label="Stop" action="timer/stop"></dcc-trigger>
-   <dcc-trigger label="Gravar" action="state/save"></dcc-trigger>
-   <dcc-trigger label="Ler" action="state/load"></dcc-trigger>
-   <dcc-trigger label="Baixar" action="state/download"></dcc-trigger>
+   <dcc-button label="Próximo" topic="state/next"></dcc-button>
+   <dcc-button label="Play" topic="timer/start"></dcc-button>
+   <dcc-button label="Stop" topic="timer/stop"></dcc-button>
+   <dcc-button label="Gravar" topic="state/save"></dcc-button>
+   <dcc-button label="Ler" topic="state/load"></dcc-button>
+   <dcc-button label="Baixar" topic="state/download"></dcc-button>
 </div>
 </div>
 
@@ -87,24 +87,24 @@ ____________________
 Selecione um dos ícones abaixo para editar o ambiente:
 <div style="flex:48px; max-height:48px; display:flex; flex-direction:row; border:2px">
    <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
-      <dcc-trigger label="alga" action="type/alga"
+      <dcc-button label="alga" topic="type/alga"
                    image="images/cell/alga.svg">
-      </dcc-trigger>
+      </dcc-button>
    </div>
    <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
-      <dcc-trigger label="nematóide" action="type/nematode"
+      <dcc-button label="nematóide" topic="type/nematode"
                    image="images/cell/nematode.svg">
-      </dcc-trigger>
+      </dcc-button>
    </div>
    <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
-      <dcc-trigger label="tardígrado" action="type/tardigrade"
+      <dcc-button label="tardígrado" topic="type/tardigrade"
                    image="images/cell/tardigrade.svg">
-      </dcc-trigger>
+      </dcc-button>
    </div>
    <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
-      <dcc-trigger label="Nada" action="type/empty"
+      <dcc-button label="Nada" topic="type/empty"
                    image="images/cell/cell-blue.svg">
-      </dcc-trigger>
+      </dcc-button>
    </div>
 </div>
 
diff --git a/src/adonisjs/public/dccs/playground/gallery/cell/movement-fall-rocks-editor.js b/src/adonisjs/public/dccs/playground/gallery/cell/movement-fall-rocks-editor.js
index 2a3e21583..7a756d816 100644
--- a/src/adonisjs/public/dccs/playground/gallery/cell/movement-fall-rocks-editor.js
+++ b/src/adonisjs/public/dccs/playground/gallery/cell/movement-fall-rocks-editor.js
@@ -19,12 +19,12 @@ ___
 _*_
 </rule-dcc-cell-pair>
 
-<dcc-trigger label="Next" action="state/next"></dcc-trigger>
-<dcc-trigger label="Play" action="timer/start"></dcc-trigger>
+<dcc-button label="Next" topic="state/next"></dcc-button>
+<dcc-button label="Play" topic="timer/start"></dcc-button>
 
-<dcc-trigger label="Empty" action="type/empty"></dcc-trigger>
-<dcc-trigger label="Rock" action="type/rock"></dcc-trigger>
-<dcc-trigger label="Tree" action="type/tree"></dcc-trigger>
+<dcc-button label="Empty" topic="type/empty"></dcc-button>
+<dcc-button label="Rock" topic="type/rock"></dcc-button>
+<dcc-button label="Tree" topic="type/tree"></dcc-button>
 
 <dcc-timer cycles="10" interval="1000" publish="state/next">
    <subscribe-dcc topic="timer/start" role="start"></subscribe-dcc>
diff --git a/src/adonisjs/public/dccs/playground/gallery/cell/movement-fall-rocks.js b/src/adonisjs/public/dccs/playground/gallery/cell/movement-fall-rocks.js
index dc4aeaffc..2fc8d6e51 100644
--- a/src/adonisjs/public/dccs/playground/gallery/cell/movement-fall-rocks.js
+++ b/src/adonisjs/public/dccs/playground/gallery/cell/movement-fall-rocks.js
@@ -19,8 +19,8 @@ _*_
 
 <dcc-cell-image type="t" label="tree" image="images/cell/tree01.svg"></dcc-cell-image>
 
-<dcc-trigger label="Next" action="state/next"></dcc-trigger>
-<dcc-trigger label="Play" action="timer/start"></dcc-trigger>
+<dcc-button label="Next" topic="state/next"></dcc-button>
+<dcc-button label="Play" topic="timer/start"></dcc-button>
 
 <dcc-timer cycles="10" interval="1000" publish="state/next">
    <subscribe-dcc topic="timer/start" role="start"></subscribe-dcc>
diff --git a/src/adonisjs/public/dccs/playground/gallery/cell/movement-influence-colors.js b/src/adonisjs/public/dccs/playground/gallery/cell/movement-influence-colors.js
index 71bdf89d6..f559c87f5 100644
--- a/src/adonisjs/public/dccs/playground/gallery/cell/movement-influence-colors.js
+++ b/src/adonisjs/public/dccs/playground/gallery/cell/movement-influence-colors.js
@@ -63,9 +63,9 @@ ___r___l___d__d__l_____u____ll__rr__uu__dd__l__r__l__d___d__l_
   ___
 </rule-dcc-cell-pair>
 
-<dcc-trigger label="Next" action="state/next"></dcc-trigger>
-<dcc-trigger label="Play" action="timer/start"></dcc-trigger>
-<dcc-trigger label="Stop" action="timer/stop"></dcc-trigger>
+<dcc-button label="Next" topic="state/next"></dcc-button>
+<dcc-button label="Play" topic="timer/start"></dcc-button>
+<dcc-button label="Stop" topic="timer/stop"></dcc-button>
 
 <dcc-timer cycles="10000" interval="100" publish="state/next">
    <subscribe-dcc topic="timer/start" role="start"></subscribe-dcc>
diff --git a/src/adonisjs/public/dccs/playground/gallery/cell/movement-replication-vanish-tinyearth-editor.js b/src/adonisjs/public/dccs/playground/gallery/cell/movement-replication-vanish-tinyearth-editor.js
index 87e6528a9..11b82a73c 100644
--- a/src/adonisjs/public/dccs/playground/gallery/cell/movement-replication-vanish-tinyearth-editor.js
+++ b/src/adonisjs/public/dccs/playground/gallery/cell/movement-replication-vanish-tinyearth-editor.js
@@ -54,16 +54,16 @@ _h_____r______hc____
    ___
 </rule-dcc-cell-pair>
 
-<dcc-trigger label="Next" action="state/next"></dcc-trigger>
-<dcc-trigger label="Play" action="timer/start"></dcc-trigger>
-<dcc-trigger label="Stop" action="timer/stop"></dcc-trigger>
+<dcc-button label="Next" topic="state/next"></dcc-button>
+<dcc-button label="Play" topic="timer/start"></dcc-button>
+<dcc-button label="Stop" topic="timer/stop"></dcc-button>
 
-<dcc-trigger label="Empty" action="type/empty"></dcc-trigger>
-<dcc-trigger label="Water" action="type/water"></dcc-trigger>
-<dcc-trigger label="Rock" action="type/rock"></dcc-trigger>
-<dcc-trigger label="Tree" action="type/tree"></dcc-trigger>
-<dcc-trigger label="Carnivore" action="type/carnivore"></dcc-trigger>
-<dcc-trigger label="Herbivore" action="type/herbivore"></dcc-trigger>
+<dcc-button label="Empty" topic="type/empty"></dcc-button>
+<dcc-button label="Water" topic="type/water"></dcc-button>
+<dcc-button label="Rock" topic="type/rock"></dcc-button>
+<dcc-button label="Tree" topic="type/tree"></dcc-button>
+<dcc-button label="Carnivore" topic="type/carnivore"></dcc-button>
+<dcc-button label="Herbivore" topic="type/herbivore"></dcc-button>
 
 <dcc-timer cycles="1000" interval="500" publish="state/next">
    <subscribe-dcc topic="timer/start" role="start"></subscribe-dcc>
diff --git a/src/adonisjs/public/dccs/playground/gallery/cell/movement-replication-vanish-tinyearth.js b/src/adonisjs/public/dccs/playground/gallery/cell/movement-replication-vanish-tinyearth.js
index 78c380b82..195c5d030 100644
--- a/src/adonisjs/public/dccs/playground/gallery/cell/movement-replication-vanish-tinyearth.js
+++ b/src/adonisjs/public/dccs/playground/gallery/cell/movement-replication-vanish-tinyearth.js
@@ -54,9 +54,9 @@ _h_____r______hc____
    ___
 </rule-dcc-cell-pair>
 
-<dcc-trigger label="Next" action="state/next"></dcc-trigger>
-<dcc-trigger label="Play" action="timer/start"></dcc-trigger>
-<dcc-trigger label="Stop" action="timer/stop"></dcc-trigger>
+<dcc-button label="Next" topic="state/next"></dcc-button>
+<dcc-button label="Play" topic="timer/start"></dcc-button>
+<dcc-button label="Stop" topic="timer/stop"></dcc-button>
 
 <dcc-timer cycles="1000" interval="500" publish="state/next">
    <subscribe-dcc topic="timer/start" role="start"></subscribe-dcc>
diff --git a/src/adonisjs/public/dccs/playground/gallery/cell/movement-sand-clock-editor.js b/src/adonisjs/public/dccs/playground/gallery/cell/movement-sand-clock-editor.js
index 97516f403..5311e6019 100644
--- a/src/adonisjs/public/dccs/playground/gallery/cell/movement-sand-clock-editor.js
+++ b/src/adonisjs/public/dccs/playground/gallery/cell/movement-sand-clock-editor.js
@@ -77,12 +77,12 @@ ___
 </rule-dcc-cell-pair>
 
 <div>
-   <dcc-trigger label="Próximo" action="state/next"></dcc-trigger>
-   <dcc-trigger label="Play" action="timer/start"></dcc-trigger>
-   <dcc-trigger label="Stop" action="timer/stop"></dcc-trigger>
-   <dcc-trigger label="Gravar" action="state/save"></dcc-trigger>
-   <dcc-trigger label="Ler" action="state/load"></dcc-trigger>
-   <dcc-trigger label="Baixar" action="state/download"></dcc-trigger>
+   <dcc-button label="Próximo" topic="state/next"></dcc-button>
+   <dcc-button label="Play" topic="timer/start"></dcc-button>
+   <dcc-button label="Stop" topic="timer/stop"></dcc-button>
+   <dcc-button label="Gravar" topic="state/save"></dcc-button>
+   <dcc-button label="Ler" topic="state/load"></dcc-button>
+   <dcc-button label="Baixar" topic="state/download"></dcc-button>
 </div>
 </div>
 
@@ -90,19 +90,19 @@ ___
 Selecione um dos ícones abaixo para editar o ambiente:
 <div style="flex:48px; max-height:48px; display:flex; flex-direction:row; border:2px">
    <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
-      <dcc-trigger label="Vidro" action="type/glass"
+      <dcc-button label="Vidro" topic="type/glass"
                    image="images/cell/glass.svg">
-      </dcc-trigger>
+      </dcc-button>
    </div>
    <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
-      <dcc-trigger label="Areia" action="type/sand"
+      <dcc-button label="Areia" topic="type/sand"
                    image="images/cell/sand.svg">
-      </dcc-trigger>
+      </dcc-button>
    </div>
    <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
-      <dcc-trigger label="Nada" action="type/empty"
+      <dcc-button label="Nada" topic="type/empty"
                    image="images/cell/cell-yellow.svg">
-      </dcc-trigger>
+      </dcc-button>
    </div>
 </div>
 
diff --git a/src/adonisjs/public/dccs/playground/gallery/cell/movement-sand-clock.js b/src/adonisjs/public/dccs/playground/gallery/cell/movement-sand-clock.js
index e2852d7b1..a347592fc 100644
--- a/src/adonisjs/public/dccs/playground/gallery/cell/movement-sand-clock.js
+++ b/src/adonisjs/public/dccs/playground/gallery/cell/movement-sand-clock.js
@@ -73,9 +73,9 @@ ___
 ___
 </rule-dcc-cell-pair>
 
-<dcc-trigger label="Next" action="state/next"></dcc-trigger>
-<dcc-trigger label="Play" action="timer/start"></dcc-trigger>
-<dcc-trigger label="Stop" action="timer/stop"></dcc-trigger>
+<dcc-button label="Next" topic="state/next"></dcc-button>
+<dcc-button label="Play" topic="timer/start"></dcc-button>
+<dcc-button label="Stop" topic="timer/stop"></dcc-button>
 
 <dcc-timer cycles="800" interval="50" publish="state/next">
    <subscribe-dcc topic="timer/start" role="start"></subscribe-dcc>
diff --git a/src/adonisjs/public/dccs/playground/gallery/cell/replication-vanish-microworld.js b/src/adonisjs/public/dccs/playground/gallery/cell/replication-vanish-microworld.js
index 0c4f2b1d1..5ef34e840 100644
--- a/src/adonisjs/public/dccs/playground/gallery/cell/replication-vanish-microworld.js
+++ b/src/adonisjs/public/dccs/playground/gallery/cell/replication-vanish-microworld.js
@@ -31,9 +31,9 @@
    ***
 </rule-dcc-cell-pair>
 
-<dcc-trigger label="Next" action="state/next"></dcc-trigger>
-<dcc-trigger label="Play" action="timer/start"></dcc-trigger>
-<dcc-trigger label="Stop" action="timer/stop"></dcc-trigger>
+<dcc-button label="Next" topic="state/next"></dcc-button>
+<dcc-button label="Play" topic="timer/start"></dcc-button>
+<dcc-button label="Stop" topic="timer/stop"></dcc-button>
 
 <dcc-timer cycles="100" interval="500" publish="state/next">
    <subscribe-dcc topic="timer/start" role="start"></subscribe-dcc>
diff --git a/src/adonisjs/public/dccs/playground/icons/icon-dcc-trigger.svg b/src/adonisjs/public/dccs/playground/icons/icon-dcc-button.svg
similarity index 100%
rename from src/adonisjs/public/dccs/playground/icons/icon-dcc-trigger.svg
rename to src/adonisjs/public/dccs/playground/icons/icon-dcc-button.svg
diff --git a/src/adonisjs/public/dccs/playground/index.html b/src/adonisjs/public/dccs/playground/index.html
index 0e250f3fc..9b11d28af 100644
--- a/src/adonisjs/public/dccs/playground/index.html
+++ b/src/adonisjs/public/dccs/playground/index.html
@@ -35,7 +35,7 @@
    <script src="../../dccs/components/dcc-block.js"></script>
    <script src="../../dccs/components/dcc-state.js"></script>
    <script src="../../dccs/components/dcc-group.js"></script>
-   <script src="../../dccs/components/dcc-trigger.js"></script>
+   <script src="../../dccs/components/dcc-button.js"></script>
    <script src="../../dccs/components/dcc-character.js"></script>
    <script src="../../dccs/components/dcc-lively-dialog.js"></script>
    <script src="../../dccs/components/dcc-notice-input.js"></script>
@@ -127,8 +127,8 @@ <h1>DCC Playground</h1>
 
       <div class="container-fluid">
         <nav class="navbar navbar-light">
-          <dcc-trigger action="control/render/example" label="RENDER" xstyle="in">
-          </dcc-trigger>
+          <dcc-button topic="control/render/example" label="RENDER" xstyle="in">
+          </dcc-button>
         </nav>
       </div>
 
diff --git a/src/adonisjs/public/dccs/playground/presenter.html b/src/adonisjs/public/dccs/playground/presenter.html
index 2a0e04bee..82abcc5ce 100644
--- a/src/adonisjs/public/dccs/playground/presenter.html
+++ b/src/adonisjs/public/dccs/playground/presenter.html
@@ -35,7 +35,7 @@
    <script src="../../dccs/components/dcc-block.js"></script>
    <script src="../../dccs/components/dcc-state.js"></script>
    <script src="../../dccs/components/dcc-group.js"></script>
-   <script src="../../dccs/components/dcc-trigger.js"></script>
+   <script src="../../dccs/components/dcc-button.js"></script>
    <script src="../../dccs/components/dcc-character.js"></script>
    <script src="../../dccs/components/dcc-lively-dialog.js"></script>
    <script src="../../dccs/components/dcc-notice-input.js"></script>
@@ -104,8 +104,8 @@
            <div class="d-flex panel-label">
               <span class="col-9" id="source-name">Result</span>
               <div class="col-3">
-                <dcc-trigger action="control/playground" label="PLAYGROUND" xstyle="in">
-                </dcc-trigger>
+                <dcc-button topic="control/playground" label="PLAYGROUND" xstyle="in">
+                </dcc-button>
               </div>
            </div>
            <div id="render-panel" class="h-100 w-100"></div>
diff --git a/src/adonisjs/public/dccs/playground/vm.html b/src/adonisjs/public/dccs/playground/vm.html
index 112396b81..ffec3e4cb 100644
--- a/src/adonisjs/public/dccs/playground/vm.html
+++ b/src/adonisjs/public/dccs/playground/vm.html
@@ -34,7 +34,7 @@
    <script src="../../dccs/components/dcc-expression.js"></script>
    <script src="../../dccs/components/dcc-block.js"></script>
    <script src="../../dccs/components/dcc-state.js"></script>
-   <script src="../../dccs/components/dcc-trigger.js"></script>
+   <script src="../../dccs/components/dcc-button.js"></script>
    <script src="../../dccs/components/dcc-character.js"></script>
    <script src="../../dccs/components/dcc-lively-dialog.js"></script>
    <script src="../../dccs/components/dcc-notice-input.js"></script>
@@ -120,8 +120,8 @@ <h1>DCC Playground</h1>
 
       <div class="container-fluid">
         <nav class="navbar navbar-light">
-          <dcc-trigger action="control/render/example" label="RENDER" xstyle="in">
-          </dcc-trigger>
+          <dcc-button topic="control/render/example" label="RENDER" xstyle="in">
+          </dcc-button>
         </nav>
       </div>
 
diff --git a/src/adonisjs/public/modules/capsule.html b/src/adonisjs/public/modules/capsule.html
index d1c36aeb6..fda9827e8 100644
--- a/src/adonisjs/public/modules/capsule.html
+++ b/src/adonisjs/public/modules/capsule.html
@@ -27,7 +27,7 @@
    <script src="../dccs/components/dcc-visual.js"></script>
    <script src="../dccs/components/dcc-expression.js"></script>
    <script src="../dccs/components/dcc-block.js"></script>
-   <script src="../dccs/components/dcc-trigger.js"></script>
+   <script src="../dccs/components/dcc-button.js"></script>
    <script src="../dccs/components/dcc-character.js"></script>
    <script src="../dccs/components/editable/dcc-character-editable.js"></script>
    <script src="../dccs/components/dcc-lively-dialog.js"></script>
diff --git a/src/adonisjs/public/scripts/playground/editor.html b/src/adonisjs/public/scripts/playground/editor.html
index dcd17bcd6..470eb7119 100644
--- a/src/adonisjs/public/scripts/playground/editor.html
+++ b/src/adonisjs/public/scripts/playground/editor.html
@@ -38,7 +38,7 @@
    <script src="../../dccs/components/dcc-image.js"></script>
    <script src="../../dccs/components/dcc-expression.js"></script>
    <script src="../../dccs/components/dcc-block.js"></script>
-   <script src="../../dccs/components/dcc-trigger.js"></script>
+   <script src="../../dccs/components/dcc-button.js"></script>
    <script src="../../dccs/components/dcc-character.js"></script>
    <script src="../../dccs/components/dcc-lively-dialog.js"></script>
    <script src="../../dccs/components/dcc-notice-input.js"></script>
@@ -76,30 +76,30 @@
               <span class="col-6" id="source-name">Result</span>
               <div class="col-3">
                 <div id="editor-button">
-                   <dcc-trigger action="control/editor/switch" label="EDITOR" xstyle="in">
-                   </dcc-trigger>
+                   <dcc-button topic="control/editor/switch" label="EDITOR" xstyle="in">
+                   </dcc-button>
                 </div>
                 <div id="execute-button">
-                   <dcc-trigger action="control/editor/switch" label="OPERAÇÃO" xstyle="in">
-                   </dcc-trigger>
+                   <dcc-button topic="control/editor/switch" label="OPERAÇÃO" xstyle="in">
+                   </dcc-button>
                 </div>
               </div>
               <div id="operation-panel" class="d-flex col-3">
                 <div id="play-button" class="control-button">
-                  <dcc-trigger label="Play" action="control/space/play"
-                               image="images/icon/play.svg"></dcc-trigger>
+                  <dcc-button label="Play" topic="control/space/play"
+                               image="images/icon/play.svg"></dcc-button>
                 </div>
                 <div id="stop-button" class="control-button">
-                  <dcc-trigger label="Stop" action="control/space/stop"
-                               image="images/icon/stop.svg"></dcc-trigger>
+                  <dcc-button label="Stop" topic="control/space/stop"
+                               image="images/icon/stop.svg"></dcc-button>
                 </div>
                 <div id="restart-button" class="control-button">
-                  <dcc-trigger label="Restart" action="control/space/restart"
-                               image="images/icon/restart.svg"></dcc-trigger>
+                  <dcc-button label="Restart" topic="control/space/restart"
+                               image="images/icon/restart.svg"></dcc-button>
                 </div>
                 <div id="next-button" class="control-button">
-                  <dcc-trigger label="Next" action="state/next"
-                               image="images/icon/step.svg"></dcc-trigger>
+                  <dcc-button label="Next" topic="state/next"
+                               image="images/icon/step.svg"></dcc-button>
                 </div>
               </div>
            </div>
diff --git a/src/adonisjs/public/scripts/playground/gallery/cell/boids.js b/src/adonisjs/public/scripts/playground/gallery/cell/boids.js
index 1ba23dd42..674595028 100644
--- a/src/adonisjs/public/scripts/playground/gallery/cell/boids.js
+++ b/src/adonisjs/public/scripts/playground/gallery/cell/boids.js
@@ -48,14 +48,14 @@ _________________
 
 <div style="flex:48px; max-height:48px; display:flex; flex-direction:row; border:2px">
    <div style="flex:20%; max-width:96px; max-height:48px; margin-right:10px">
-      <dcc-trigger label="Régua" action="ruler/activate"
+      <dcc-button label="Régua" topic="ruler/activate"
                    image="images/cell/ruler.svg">
-      </dcc-trigger>
+      </dcc-button>
    </div>
    <div style="flex:20%; max-width:96px; max-height:48px; margin-right:10px">
-      <dcc-trigger label="Apagar Régua" action="ruler/reset"
+      <dcc-button label="Apagar Régua" topic="ruler/reset"
                    image="images/cell/ruler-reset.svg">
-      </dcc-trigger>
+      </dcc-button>
    </div>
 </div>
 <div style="flex:48px; max-height:48px; display:flex; flex-direction:row">
@@ -79,64 +79,64 @@ _________________
 `Selecione um dos ícones abaixo para editar o ambiente:
 <div style="flex:48px; max-height:48px; display:flex; flex-direction:row; border:2px">
    <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
-      <dcc-trigger label="Árvore" action="type/tree"
+      <dcc-button label="Árvore" topic="type/tree"
                    image="images/cell/tree01.svg">
-      </dcc-trigger>
+      </dcc-button>
    </div>
    <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
-      <dcc-trigger label="Boid" action="type/boid" value="rotate:0"
+      <dcc-button label="Boid" topic="type/boid" message="rotate:0"
                    image="images/cell/boid01.svg">
-      </dcc-trigger>
+      </dcc-button>
    </div>
    <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
-      <dcc-trigger label="Boid 45" action="type/boid" value="rotate:45"
+      <dcc-button label="Boid 45" topic="type/boid" message="rotate:45"
                    image="images/cell/boid01-045.svg">
-      </dcc-trigger>
+      </dcc-button>
    </div>
    <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
-      <dcc-trigger label="Boid 90" action="type/boid" value="rotate:90"
+      <dcc-button label="Boid 90" topic="type/boid" message="rotate:90"
                    image="images/cell/boid01-090.svg">
-      </dcc-trigger>
+      </dcc-button>
    </div>
    <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
-      <dcc-trigger label="Boid 135" action="type/boid" value="rotate:135"
+      <dcc-button label="Boid 135" topic="type/boid" message="rotate:135"
                    image="images/cell/boid01-135.svg">
-      </dcc-trigger>
+      </dcc-button>
    </div>
    <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
-      <dcc-trigger label="Boid 180" action="type/boid" value="rotate:180"
+      <dcc-button label="Boid 180" topic="type/boid" message="rotate:180"
                    image="images/cell/boid01-180.svg">
-      </dcc-trigger>
+      </dcc-button>
    </div>
    <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
-      <dcc-trigger label="Boid 225" action="type/boid" value="rotate:225"
+      <dcc-button label="Boid 225" topic="type/boid" message="rotate:225"
                    image="images/cell/boid01-225.svg">
-      </dcc-trigger>
+      </dcc-button>
    </div>
    <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
-      <dcc-trigger label="Boid 270" action="type/boid" value="rotate:270"
+      <dcc-button label="Boid 270" topic="type/boid" message="rotate:270"
                    image="images/cell/boid01-270.svg">
-      </dcc-trigger>
+      </dcc-button>
    </div>
    <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
-      <dcc-trigger label="Boid 315" action="type/boid" value="rotate:315"
+      <dcc-button label="Boid 315" topic="type/boid" message="rotate:315"
                    image="images/cell/boid01-315.svg">
-      </dcc-trigger>
+      </dcc-button>
    </div>
    <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
-      <dcc-trigger label="Bandeira Vermelha" action="type/flagr"
+      <dcc-button label="Bandeira Vermelha" topic="type/flagr"
                    image="images/cell/flag-red.svg">
-      </dcc-trigger>
+      </dcc-button>
    </div>
    <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
-      <dcc-trigger label="Nuvem" action="type/cloud"
+      <dcc-button label="Nuvem" topic="type/cloud"
                    image="images/cell/cloud01.svg">
-      </dcc-trigger>
+      </dcc-button>
    </div>
    <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
-      <dcc-trigger label="Nada" action="type/empty"
+      <dcc-button label="Nada" topic="type/empty"
                    image="images/cell/cell-blue.svg">
-      </dcc-trigger>
+      </dcc-button>
    </div>
 </div>
 `
diff --git a/src/adonisjs/public/scripts/playground/gallery/cell/expression-rocket-wide-timer-scale-ruler.js b/src/adonisjs/public/scripts/playground/gallery/cell/expression-rocket-wide-timer-scale-ruler.js
index 07718c7b3..edf907d56 100644
--- a/src/adonisjs/public/scripts/playground/gallery/cell/expression-rocket-wide-timer-scale-ruler.js
+++ b/src/adonisjs/public/scripts/playground/gallery/cell/expression-rocket-wide-timer-scale-ruler.js
@@ -50,14 +50,14 @@
 
 <div style="flex:48px; max-height:48px; display:flex; flex-direction:row; border:2px">
    <div style="flex:20%; max-width:96px; max-height:48px; margin-right:10px">
-      <dcc-trigger label="Régua" action="ruler/activate"
+      <dcc-button label="Régua" topic="ruler/activate"
                    image="images/cell/ruler.svg">
-      </dcc-trigger>
+      </dcc-button>
    </div>
    <div style="flex:20%; max-width:96px; max-height:48px; margin-right:10px">
-      <dcc-trigger label="Apagar Régua" action="ruler/reset"
+      <dcc-button label="Apagar Régua" topic="ruler/reset"
                    image="images/cell/ruler-reset.svg">
-      </dcc-trigger>
+      </dcc-button>
    </div>
 </div>
 <div style="flex:48px; max-height:48px; display:flex; flex-direction:row">
@@ -81,49 +81,49 @@
 `Selecione um dos ícones abaixo para editar o ambiente:
 <div style="flex:48px; max-height:48px; display:flex; flex-direction:row; border:2px">
    <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
-      <dcc-trigger label="Árvore" action="type/tree"
+      <dcc-button label="Árvore" topic="type/tree"
                    image="images/cell/tree01.svg">
-      </dcc-trigger>
+      </dcc-button>
    </div>
    <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
-      <dcc-trigger label="Balão" action="type/balloon"
+      <dcc-button label="Balão" topic="type/balloon"
                    image="images/cell/balloon01.svg">
-      </dcc-trigger>
+      </dcc-button>
    </div>
    <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
-      <dcc-trigger label="Avião 1" action="type/plane1"
+      <dcc-button label="Avião 1" topic="type/plane1"
                    image="images/cell/plane01.svg">
-      </dcc-trigger>
+      </dcc-button>
    </div>
    <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
-      <dcc-trigger label="Avião 2" action="type/plane2"
+      <dcc-button label="Avião 2" topic="type/plane2"
                    image="images/cell/plane02.svg">
-      </dcc-trigger>
+      </dcc-button>
    </div>
    <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
-      <dcc-trigger label="Avião 3" action="type/plane3"
+      <dcc-button label="Avião 3" topic="type/plane3"
                    image="images/cell/plane03.svg">
-      </dcc-trigger>
+      </dcc-button>
    </div>
    <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
-      <dcc-trigger label="Foguete" action="type/rocket"
+      <dcc-button label="Foguete" topic="type/rocket"
                    image="images/cell/rocket01.svg">
-      </dcc-trigger>
+      </dcc-button>
    </div>
    <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
-      <dcc-trigger label="Bandeira Vermelha" action="type/flagr"
+      <dcc-button label="Bandeira Vermelha" topic="type/flagr"
                    image="images/cell/flag-red.svg">
-      </dcc-trigger>
+      </dcc-button>
    </div>
    <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
-      <dcc-trigger label="Nuvem" action="type/cloud"
+      <dcc-button label="Nuvem" topic="type/cloud"
                    image="images/cell/cloud01.svg">
-      </dcc-trigger>
+      </dcc-button>
    </div>
    <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
-      <dcc-trigger label="Nada" action="type/empty"
+      <dcc-button label="Nada" topic="type/empty"
                    image="images/cell/cell-blue.svg">
-      </dcc-trigger>
+      </dcc-button>
    </div>
 </div>
 `
diff --git a/src/adonisjs/public/scripts/playground/gallery/cell/expression-rocket-wide-timer-scale.js b/src/adonisjs/public/scripts/playground/gallery/cell/expression-rocket-wide-timer-scale.js
index 3a9d71e82..0bd0a040d 100644
--- a/src/adonisjs/public/scripts/playground/gallery/cell/expression-rocket-wide-timer-scale.js
+++ b/src/adonisjs/public/scripts/playground/gallery/cell/expression-rocket-wide-timer-scale.js
@@ -62,49 +62,49 @@
 `Selecione um dos ícones abaixo para editar o ambiente:
 <div style="flex:48px; max-height:48px; display:flex; flex-direction:row; border:2px">
    <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
-      <dcc-trigger label="Árvore" action="type/tree"
+      <dcc-button label="Árvore" topic="type/tree"
                    image="images/cell/tree01.svg">
-      </dcc-trigger>
+      </dcc-button>
    </div>
    <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
-      <dcc-trigger label="Balão" action="type/balloon"
+      <dcc-button label="Balão" topic="type/balloon"
                    image="images/cell/balloon01.svg">
-      </dcc-trigger>
+      </dcc-button>
    </div>
    <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
-      <dcc-trigger label="Avião 1" action="type/plane1"
+      <dcc-button label="Avião 1" topic="type/plane1"
                    image="images/cell/plane01.svg">
-      </dcc-trigger>
+      </dcc-button>
    </div>
    <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
-      <dcc-trigger label="Avião 2" action="type/plane2"
+      <dcc-button label="Avião 2" topic="type/plane2"
                    image="images/cell/plane02.svg">
-      </dcc-trigger>
+      </dcc-button>
    </div>
    <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
-      <dcc-trigger label="Avião 3" action="type/plane3"
+      <dcc-button label="Avião 3" topic="type/plane3"
                    image="images/cell/plane03.svg">
-      </dcc-trigger>
+      </dcc-button>
    </div>
    <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
-      <dcc-trigger label="Foguete" action="type/rocket"
+      <dcc-button label="Foguete" topic="type/rocket"
                    image="images/cell/rocket01.svg">
-      </dcc-trigger>
+      </dcc-button>
    </div>
    <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
-      <dcc-trigger label="Bandeira Vermelha" action="type/flagr"
+      <dcc-button label="Bandeira Vermelha" topic="type/flagr"
                    image="images/cell/flag-red.svg">
-      </dcc-trigger>
+      </dcc-button>
    </div>
    <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
-      <dcc-trigger label="Nuvem" action="type/cloud"
+      <dcc-button label="Nuvem" topic="type/cloud"
                    image="images/cell/cloud01.svg">
-      </dcc-trigger>
+      </dcc-button>
    </div>
    <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
-      <dcc-trigger label="Nada" action="type/empty"
+      <dcc-button label="Nada" topic="type/empty"
                    image="images/cell/cell-blue.svg">
-      </dcc-trigger>
+      </dcc-button>
    </div>
 </div>
 `
diff --git a/src/adonisjs/public/scripts/playground/gallery/cell/expression-rocket-wide-timer.js b/src/adonisjs/public/scripts/playground/gallery/cell/expression-rocket-wide-timer.js
index 8a4b4b320..cdbfdaa48 100644
--- a/src/adonisjs/public/scripts/playground/gallery/cell/expression-rocket-wide-timer.js
+++ b/src/adonisjs/public/scripts/playground/gallery/cell/expression-rocket-wide-timer.js
@@ -58,49 +58,49 @@
 `Selecione um dos ícones abaixo para editar o ambiente:
 <div style="flex:48px; max-height:48px; display:flex; flex-direction:row; border:2px">
    <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
-      <dcc-trigger label="Árvore" action="type/tree"
+      <dcc-button label="Árvore" topic="type/tree"
                    image="images/cell/tree01.svg">
-      </dcc-trigger>
+      </dcc-button>
    </div>
    <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
-      <dcc-trigger label="Balão" action="type/balloon"
+      <dcc-button label="Balão" topic="type/balloon"
                    image="images/cell/balloon01.svg">
-      </dcc-trigger>
+      </dcc-button>
    </div>
    <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
-      <dcc-trigger label="Avião 1" action="type/plane1"
+      <dcc-button label="Avião 1" topic="type/plane1"
                    image="images/cell/plane01.svg">
-      </dcc-trigger>
+      </dcc-button>
    </div>
    <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
-      <dcc-trigger label="Avião 2" action="type/plane2"
+      <dcc-button label="Avião 2" topic="type/plane2"
                    image="images/cell/plane02.svg">
-      </dcc-trigger>
+      </dcc-button>
    </div>
    <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
-      <dcc-trigger label="Avião 3" action="type/plane3"
+      <dcc-button label="Avião 3" topic="type/plane3"
                    image="images/cell/plane03.svg">
-      </dcc-trigger>
+      </dcc-button>
    </div>
    <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
-      <dcc-trigger label="Foguete" action="type/rocket"
+      <dcc-button label="Foguete" topic="type/rocket"
                    image="images/cell/rocket01.svg">
-      </dcc-trigger>
+      </dcc-button>
    </div>
    <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
-      <dcc-trigger label="Bandeira Vermelha" action="type/flagr"
+      <dcc-button label="Bandeira Vermelha" topic="type/flagr"
                    image="images/cell/flag-red.svg">
-      </dcc-trigger>
+      </dcc-button>
    </div>
    <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
-      <dcc-trigger label="Nuvem" action="type/cloud"
+      <dcc-button label="Nuvem" topic="type/cloud"
                    image="images/cell/cloud01.svg">
-      </dcc-trigger>
+      </dcc-button>
    </div>
    <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
-      <dcc-trigger label="Nada" action="type/empty"
+      <dcc-button label="Nada" topic="type/empty"
                    image="images/cell/cell-blue.svg">
-      </dcc-trigger>
+      </dcc-button>
    </div>
 </div>
 `
diff --git a/src/adonisjs/public/scripts/playground/gallery/cell/expression-rocket-wide.js b/src/adonisjs/public/scripts/playground/gallery/cell/expression-rocket-wide.js
index 14991eadc..da8082ca8 100644
--- a/src/adonisjs/public/scripts/playground/gallery/cell/expression-rocket-wide.js
+++ b/src/adonisjs/public/scripts/playground/gallery/cell/expression-rocket-wide.js
@@ -102,49 +102,49 @@ __________________________________________t_____________________________________
 `Selecione um dos ícones abaixo para editar o ambiente:
 <div style="flex:48px; max-height:48px; display:flex; flex-direction:row; border:2px">
    <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
-      <dcc-trigger label="Árvore" action="type/tree"
+      <dcc-button label="Árvore" topic="type/tree"
                    image="images/cell/tree01.svg">
-      </dcc-trigger>
+      </dcc-button>
    </div>
    <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
-      <dcc-trigger label="Balão" action="type/balloon"
+      <dcc-button label="Balão" topic="type/balloon"
                    image="images/cell/balloon01.svg">
-      </dcc-trigger>
+      </dcc-button>
    </div>
    <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
-      <dcc-trigger label="Avião 1" action="type/plane1"
+      <dcc-button label="Avião 1" topic="type/plane1"
                    image="images/cell/plane01.svg">
-      </dcc-trigger>
+      </dcc-button>
    </div>
    <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
-      <dcc-trigger label="Avião 2" action="type/plane2"
+      <dcc-button label="Avião 2" topic="type/plane2"
                    image="images/cell/plane02.svg">
-      </dcc-trigger>
+      </dcc-button>
    </div>
    <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
-      <dcc-trigger label="Avião 3" action="type/plane3"
+      <dcc-button label="Avião 3" topic="type/plane3"
                    image="images/cell/plane03.svg">
-      </dcc-trigger>
+      </dcc-button>
    </div>
    <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
-      <dcc-trigger label="Foguete" action="type/rocket"
+      <dcc-button label="Foguete" topic="type/rocket"
                    image="images/cell/rocket01.svg">
-      </dcc-trigger>
+      </dcc-button>
    </div>
    <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
-      <dcc-trigger label="Bandeira Vermelha" action="type/flagr"
+      <dcc-button label="Bandeira Vermelha" topic="type/flagr"
                    image="images/cell/flag-red.svg">
-      </dcc-trigger>
+      </dcc-button>
    </div>
    <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
-      <dcc-trigger label="Nuvem" action="type/cloud"
+      <dcc-button label="Nuvem" topic="type/cloud"
                    image="images/cell/cloud01.svg">
-      </dcc-trigger>
+      </dcc-button>
    </div>
    <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
-      <dcc-trigger label="Nada" action="type/empty"
+      <dcc-button label="Nada" topic="type/empty"
                    image="images/cell/cell-blue.svg">
-      </dcc-trigger>
+      </dcc-button>
    </div>
 </div>`
   )
diff --git a/src/adonisjs/public/scripts/playground/gallery/cell/expression-rocket.js b/src/adonisjs/public/scripts/playground/gallery/cell/expression-rocket.js
index cf08ebd3b..3f546006b 100644
--- a/src/adonisjs/public/scripts/playground/gallery/cell/expression-rocket.js
+++ b/src/adonisjs/public/scripts/playground/gallery/cell/expression-rocket.js
@@ -47,49 +47,49 @@ ________t________
 `Selecione um dos ícones abaixo para editar o ambiente:
 <div style="flex:48px; max-height:48px; display:flex; flex-direction:row; border:2px">
    <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
-      <dcc-trigger label="Árvore" action="type/tree"
+      <dcc-button label="Árvore" topic="type/tree"
                    image="images/cell/tree01.svg">
-      </dcc-trigger>
+      </dcc-button>
    </div>
    <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
-      <dcc-trigger label="Balão" action="type/balloon"
+      <dcc-button label="Balão" topic="type/balloon"
                    image="images/cell/balloon01.svg">
-      </dcc-trigger>
+      </dcc-button>
    </div>
    <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
-      <dcc-trigger label="Avião 1" action="type/plane1"
+      <dcc-button label="Avião 1" topic="type/plane1"
                    image="images/cell/plane01.svg">
-      </dcc-trigger>
+      </dcc-button>
    </div>
    <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
-      <dcc-trigger label="Avião 2" action="type/plane2"
+      <dcc-button label="Avião 2" topic="type/plane2"
                    image="images/cell/plane02.svg">
-      </dcc-trigger>
+      </dcc-button>
    </div>
    <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
-      <dcc-trigger label="Avião 3" action="type/plane3"
+      <dcc-button label="Avião 3" topic="type/plane3"
                    image="images/cell/plane03.svg">
-      </dcc-trigger>
+      </dcc-button>
    </div>
    <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
-      <dcc-trigger label="Foguete" action="type/rocket"
+      <dcc-button label="Foguete" topic="type/rocket"
                    image="images/cell/rocket01.svg">
-      </dcc-trigger>
+      </dcc-button>
    </div>
    <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
-      <dcc-trigger label="Bandeira Vermelha" action="type/flagr"
+      <dcc-button label="Bandeira Vermelha" topic="type/flagr"
                    image="images/cell/flag-red.svg">
-      </dcc-trigger>
+      </dcc-button>
    </div>
    <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
-      <dcc-trigger label="Nuvem" action="type/cloud"
+      <dcc-button label="Nuvem" topic="type/cloud"
                    image="images/cell/cloud01.svg">
-      </dcc-trigger>
+      </dcc-button>
    </div>
    <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
-      <dcc-trigger label="Nada" action="type/empty"
+      <dcc-button label="Nada" topic="type/empty"
                    image="images/cell/cell-blue.svg">
-      </dcc-trigger>
+      </dcc-button>
    </div>
 </div>`
   )
diff --git a/src/adonisjs/public/scripts/playground/gallery/cell/microworld-scripts.js b/src/adonisjs/public/scripts/playground/gallery/cell/microworld-scripts.js
index 52d40e4fc..b05d4f7b9 100644
--- a/src/adonisjs/public/scripts/playground/gallery/cell/microworld-scripts.js
+++ b/src/adonisjs/public/scripts/playground/gallery/cell/microworld-scripts.js
@@ -37,24 +37,24 @@
 `Selecione um dos ícones abaixo para editar o ambiente:
 <div style="flex:48px; max-height:48px; display:flex; flex-direction:row; border:2px">
    <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
-      <dcc-trigger label="Alga" action="type/alga"
+      <dcc-button label="Alga" topic="type/alga"
                    image="images/cell/alga.svg">
-      </dcc-trigger>
+      </dcc-button>
    </div>
    <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
-      <dcc-trigger label="Nematóide" action="type/nematode"
+      <dcc-button label="Nematóide" topic="type/nematode"
                    image="images/cell/nematode.svg">
-      </dcc-trigger>
+      </dcc-button>
    </div>
    <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
-      <dcc-trigger label="Tardígrado" action="type/tardigrade"
+      <dcc-button label="Tardígrado" topic="type/tardigrade"
                    image="images/cell/tardigrade.svg">
-      </dcc-trigger>
+      </dcc-button>
    </div>
    <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
-      <dcc-trigger label="Nada" action="type/empty"
+      <dcc-button label="Nada" topic="type/empty"
                    image="images/cell/cell-blue.svg">
-      </dcc-trigger>
+      </dcc-button>
    </div>
 </div>`
   )
diff --git a/src/adonisjs/public/scripts/playground/gallery/cell/microworld-sliders.js b/src/adonisjs/public/scripts/playground/gallery/cell/microworld-sliders.js
index d1e338ff6..c3ea4d27a 100644
--- a/src/adonisjs/public/scripts/playground/gallery/cell/microworld-sliders.js
+++ b/src/adonisjs/public/scripts/playground/gallery/cell/microworld-sliders.js
@@ -83,24 +83,24 @@
 `Selecione um dos ícones abaixo para editar o ambiente:
 <div style="flex:48px; max-height:48px; display:flex; flex-direction:row; border:2px">
    <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
-      <dcc-trigger label="alga" action="type/alga"
+      <dcc-button label="alga" topic="type/alga"
                    image="images/cell/alga.svg">
-      </dcc-trigger>
+      </dcc-button>
    </div>
    <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
-      <dcc-trigger label="nematóide" action="type/nematode"
+      <dcc-button label="nematóide" topic="type/nematode"
                    image="images/cell/nematode.svg">
-      </dcc-trigger>
+      </dcc-button>
    </div>
    <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
-      <dcc-trigger label="tardígrado" action="type/tardigrade"
+      <dcc-button label="tardígrado" topic="type/tardigrade"
                    image="images/cell/tardigrade.svg">
-      </dcc-trigger>
+      </dcc-button>
    </div>
    <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
-      <dcc-trigger label="Nada" action="type/empty"
+      <dcc-button label="Nada" topic="type/empty"
                    image="images/cell/cell-blue.svg">
-      </dcc-trigger>
+      </dcc-button>
    </div>
 </div>
 Selecione abaixo a chance de cada um dos eventos:
diff --git a/src/adonisjs/public/scripts/playground/gallery/cell/movement-fly-balloon-cloud-plane.js b/src/adonisjs/public/scripts/playground/gallery/cell/movement-fly-balloon-cloud-plane.js
index 2deccb13c..76608a21f 100644
--- a/src/adonisjs/public/scripts/playground/gallery/cell/movement-fly-balloon-cloud-plane.js
+++ b/src/adonisjs/public/scripts/playground/gallery/cell/movement-fly-balloon-cloud-plane.js
@@ -38,29 +38,29 @@ t_________
 `Selecione um dos ícones abaixo para editar o ambiente:
 <div style="flex:48px; max-height:48px; display:flex; flex-direction:row; border:2px">
    <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
-      <dcc-trigger label="Árvore" action="type/tree"
+      <dcc-button label="Árvore" topic="type/tree"
                    image="images/cell/tree01.svg">
-      </dcc-trigger>
+      </dcc-button>
    </div>
    <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
-      <dcc-trigger label="Balão" action="type/balloon"
+      <dcc-button label="Balão" topic="type/balloon"
                    image="images/cell/balloon01.svg">
-      </dcc-trigger>
+      </dcc-button>
    </div>
    <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
-      <dcc-trigger label="Avião" action="type/plane"
+      <dcc-button label="Avião" topic="type/plane"
                    image="images/cell/plane01.svg">
-      </dcc-trigger>
+      </dcc-button>
    </div>
    <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
-      <dcc-trigger label="Nuvem" action="type/cloud"
+      <dcc-button label="Nuvem" topic="type/cloud"
                    image="images/cell/cloud01.svg">
-      </dcc-trigger>
+      </dcc-button>
    </div>
    <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
-      <dcc-trigger label="Nada" action="type/empty"
+      <dcc-button label="Nada" topic="type/empty"
                    image="images/cell/cell-blue.svg">
-      </dcc-trigger>
+      </dcc-button>
    </div>
 </div>`
   )
diff --git a/src/adonisjs/public/scripts/playground/gallery/cell/movement-fly-balloon.js b/src/adonisjs/public/scripts/playground/gallery/cell/movement-fly-balloon.js
index f4b5cfe3a..67f8c42f8 100644
--- a/src/adonisjs/public/scripts/playground/gallery/cell/movement-fly-balloon.js
+++ b/src/adonisjs/public/scripts/playground/gallery/cell/movement-fly-balloon.js
@@ -32,19 +32,19 @@ _____t
 `Selecione um dos ícones abaixo para editar o ambiente:
 <div style="flex:48px; max-height:48px; display:flex; flex-direction:row; border:2px">
    <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
-      <dcc-trigger label="Árvore" action="type/tree"
+      <dcc-button label="Árvore" topic="type/tree"
                    image="images/cell/tree01.svg">
-      </dcc-trigger>
+      </dcc-button>
    </div>
    <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
-      <dcc-trigger label="Balão" action="type/balloon"
+      <dcc-button label="Balão" topic="type/balloon"
                    image="images/cell/balloon01.svg">
-      </dcc-trigger>
+      </dcc-button>
    </div>
    <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
-      <dcc-trigger label="Nada" action="type/empty"
+      <dcc-button label="Nada" topic="type/empty"
                    image="images/cell/cell-blue.svg">
-      </dcc-trigger>
+      </dcc-button>
    </div>
 </div>`
   )
diff --git a/src/adonisjs/public/scripts/playground/gallery/cell/movement-replication-vanish-tinyearth.js b/src/adonisjs/public/scripts/playground/gallery/cell/movement-replication-vanish-tinyearth.js
index 81f7e01f7..d175424df 100644
--- a/src/adonisjs/public/scripts/playground/gallery/cell/movement-replication-vanish-tinyearth.js
+++ b/src/adonisjs/public/scripts/playground/gallery/cell/movement-replication-vanish-tinyearth.js
@@ -44,9 +44,9 @@ _h_____r______hc____
    ___
 </rule-dcc-cell-pair>
 
-<dcc-trigger label="Next" action="state/next"></dcc-trigger>
-<dcc-trigger label="Play" action="timer/start"></dcc-trigger>
-<dcc-trigger label="Stop" action="timer/stop"></dcc-trigger>
+<dcc-button label="Next" topic="state/next"></dcc-button>
+<dcc-button label="Play" topic="timer/start"></dcc-button>
+<dcc-button label="Stop" topic="timer/stop"></dcc-button>
 
 <dcc-timer cycles="1000" interval="500" publish="state/next">
    <subscribe-dcc topic="timer/start" role="start"></subscribe-dcc>
diff --git a/src/adonisjs/public/scripts/playground/gallery/cell/movement-sand-clock.js b/src/adonisjs/public/scripts/playground/gallery/cell/movement-sand-clock.js
index ebc7f6249..3353e9321 100644
--- a/src/adonisjs/public/scripts/playground/gallery/cell/movement-sand-clock.js
+++ b/src/adonisjs/public/scripts/playground/gallery/cell/movement-sand-clock.js
@@ -76,19 +76,19 @@ _#_________________________________________#_
 `Selecione um dos ícones abaixo para editar o ambiente:
 <div style="flex:48px; max-height:48px; display:flex; flex-direction:row; border:2px">
    <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
-      <dcc-trigger label="Vidro" action="type/glass"
+      <dcc-button label="Vidro" topic="type/glass"
                    image="images/cell/glass.svg">
-      </dcc-trigger>
+      </dcc-button>
    </div>
    <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
-      <dcc-trigger label="Areia" action="type/sand"
+      <dcc-button label="Areia" topic="type/sand"
                    image="images/cell/sand.svg">
-      </dcc-trigger>
+      </dcc-button>
    </div>
    <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
-      <dcc-trigger label="Nada" action="type/empty"
+      <dcc-button label="Nada" topic="type/empty"
                    image="images/cell/cell-yellow.svg">
-      </dcc-trigger>
+      </dcc-button>
    </div>
 </div>`
   )
diff --git a/src/adonisjs/public/scripts/playground/gallery/cell/movement-two-planes.js b/src/adonisjs/public/scripts/playground/gallery/cell/movement-two-planes.js
index 86d375513..96a6ac72a 100644
--- a/src/adonisjs/public/scripts/playground/gallery/cell/movement-two-planes.js
+++ b/src/adonisjs/public/scripts/playground/gallery/cell/movement-two-planes.js
@@ -44,44 +44,44 @@ t__________
 `Selecione um dos ícones abaixo para editar o ambiente:
 <div style="flex:48px; max-height:48px; display:flex; flex-direction:row; border:2px">
    <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
-      <dcc-trigger label="Árvore" action="type/tree"
+      <dcc-button label="Árvore" topic="type/tree"
                    image="images/cell/tree01.svg">
-      </dcc-trigger>
+      </dcc-button>
    </div>
    <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
-      <dcc-trigger label="Balão" action="type/balloon"
+      <dcc-button label="Balão" topic="type/balloon"
                    image="images/cell/balloon01.svg">
-      </dcc-trigger>
+      </dcc-button>
    </div>
    <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
-      <dcc-trigger label="Avião 1" action="type/plane1"
+      <dcc-button label="Avião 1" topic="type/plane1"
                    image="images/cell/plane01.svg">
-      </dcc-trigger>
+      </dcc-button>
    </div>
    <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
-      <dcc-trigger label="Avião 2" action="type/plane2"
+      <dcc-button label="Avião 2" topic="type/plane2"
                    image="images/cell/plane02.svg">
-      </dcc-trigger>
+      </dcc-button>
    </div>
    <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
-      <dcc-trigger label="Avião 3" action="type/plane3"
+      <dcc-button label="Avião 3" topic="type/plane3"
                    image="images/cell/plane03.svg">
-      </dcc-trigger>
+      </dcc-button>
    </div>
    <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
-      <dcc-trigger label="Bandeira Vermelha" action="type/flagr"
+      <dcc-button label="Bandeira Vermelha" topic="type/flagr"
                    image="images/cell/flag-red.svg">
-      </dcc-trigger>
+      </dcc-button>
    </div>
    <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
-      <dcc-trigger label="Nuvem" action="type/cloud"
+      <dcc-button label="Nuvem" topic="type/cloud"
                    image="images/cell/cloud01.svg">
-      </dcc-trigger>
+      </dcc-button>
    </div>
    <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
-      <dcc-trigger label="Nada" action="type/empty"
+      <dcc-button label="Nada" topic="type/empty"
                    image="images/cell/cell-blue.svg">
-      </dcc-trigger>
+      </dcc-button>
    </div>
 </div>`
   )
diff --git a/src/adonisjs/public/scripts/playground/gallery/cell/zombie-wall-challenge1.js b/src/adonisjs/public/scripts/playground/gallery/cell/zombie-wall-challenge1.js
index 65d41dc3c..bb619a9dc 100644
--- a/src/adonisjs/public/scripts/playground/gallery/cell/zombie-wall-challenge1.js
+++ b/src/adonisjs/public/scripts/playground/gallery/cell/zombie-wall-challenge1.js
@@ -77,24 +77,24 @@ ___
 `Selecione um dos ícones abaixo para editar o ambiente:
 <div style="flex:48px; max-height:48px; display:flex; flex-direction:row; border:2px">
    <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
-      <dcc-trigger label="Zumbi" action="type/zombie1"
+      <dcc-button label="Zumbi" topic="type/zombie1"
                    image="images/cell/zumbi_10.png">
-      </dcc-trigger>
+      </dcc-button>
    </div>
    <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
-      <dcc-trigger label="Zumbi" action="type/zombie2"
+      <dcc-button label="Zumbi" topic="type/zombie2"
                    image="images/cell/zumbi_3.png">
-      </dcc-trigger>
+      </dcc-button>
    </div>
    <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
-      <dcc-trigger label="Parede" action="type/wall"
+      <dcc-button label="Parede" topic="type/wall"
                    image="images/cell/wall.svg">
-      </dcc-trigger>
+      </dcc-button>
    </div>
    <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
-      <dcc-trigger label="Nada" action="type/empty"
+      <dcc-button label="Nada" topic="type/empty"
                    image="images/cell/cell-green.svg">
-      </dcc-trigger>
+      </dcc-button>
    </div>
 </div>
 Configure a transparência do teto:
diff --git a/src/adonisjs/public/scripts/playground/gallery/cell/zombie-wall-challenge2.js b/src/adonisjs/public/scripts/playground/gallery/cell/zombie-wall-challenge2.js
index bfd47717c..74c360dbb 100644
--- a/src/adonisjs/public/scripts/playground/gallery/cell/zombie-wall-challenge2.js
+++ b/src/adonisjs/public/scripts/playground/gallery/cell/zombie-wall-challenge2.js
@@ -77,24 +77,24 @@ ___
 `Selecione um dos ícones abaixo para editar o ambiente:
 <div style="flex:48px; max-height:48px; display:flex; flex-direction:row; border:2px">
    <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
-      <dcc-trigger label="Zumbi" action="type/zombie1"
+      <dcc-button label="Zumbi" topic="type/zombie1"
                    image="images/cell/zumbi_10.png">
-      </dcc-trigger>
+      </dcc-button>
    </div>
    <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
-      <dcc-trigger label="Zumbi" action="type/zombie2"
+      <dcc-button label="Zumbi" topic="type/zombie2"
                    image="images/cell/zumbi_3.png">
-      </dcc-trigger>
+      </dcc-button>
    </div>
    <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
-      <dcc-trigger label="Parede" action="type/wall"
+      <dcc-button label="Parede" topic="type/wall"
                    image="images/cell/wall.svg">
-      </dcc-trigger>
+      </dcc-button>
    </div>
    <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
-      <dcc-trigger label="Nada" action="type/empty"
+      <dcc-button label="Nada" topic="type/empty"
                    image="images/cell/cell-green.svg">
-      </dcc-trigger>
+      </dcc-button>
    </div>
 </div>
 Configure a transparência do teto:
diff --git a/src/adonisjs/public/scripts/playground/gallery/cell/zombie-wall-challenge3.js b/src/adonisjs/public/scripts/playground/gallery/cell/zombie-wall-challenge3.js
index 42648c535..e714a2507 100644
--- a/src/adonisjs/public/scripts/playground/gallery/cell/zombie-wall-challenge3.js
+++ b/src/adonisjs/public/scripts/playground/gallery/cell/zombie-wall-challenge3.js
@@ -77,24 +77,24 @@ ___
 `Selecione um dos ícones abaixo para editar o ambiente:
 <div style="flex:48px; max-height:48px; display:flex; flex-direction:row; border:2px">
    <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
-      <dcc-trigger label="Zumbi" action="type/zombie1"
+      <dcc-button label="Zumbi" topic="type/zombie1"
                    image="images/cell/zumbi_10.png">
-      </dcc-trigger>
+      </dcc-button>
    </div>
    <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
-      <dcc-trigger label="Zumbi" action="type/zombie2"
+      <dcc-button label="Zumbi" topic="type/zombie2"
                    image="images/cell/zumbi_3.png">
-      </dcc-trigger>
+      </dcc-button>
    </div>
    <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
-      <dcc-trigger label="Parede" action="type/wall"
+      <dcc-button label="Parede" topic="type/wall"
                    image="images/cell/wall.svg">
-      </dcc-trigger>
+      </dcc-button>
    </div>
    <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
-      <dcc-trigger label="Nada" action="type/empty"
+      <dcc-button label="Nada" topic="type/empty"
                    image="images/cell/cell-green.svg">
-      </dcc-trigger>
+      </dcc-button>
    </div>
 </div>
 Configure a transparência do teto:
diff --git a/src/adonisjs/public/scripts/playground/gallery/cell/zombie-wall-challenge4.js b/src/adonisjs/public/scripts/playground/gallery/cell/zombie-wall-challenge4.js
index 3a7e972bd..1cb71e6de 100644
--- a/src/adonisjs/public/scripts/playground/gallery/cell/zombie-wall-challenge4.js
+++ b/src/adonisjs/public/scripts/playground/gallery/cell/zombie-wall-challenge4.js
@@ -77,24 +77,24 @@ ___
 `Selecione um dos ícones abaixo para editar o ambiente:
 <div style="flex:48px; max-height:48px; display:flex; flex-direction:row; border:2px">
    <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
-      <dcc-trigger label="Zumbi" action="type/zombie1"
+      <dcc-button label="Zumbi" topic="type/zombie1"
                    image="images/cell/zumbi_10.png">
-      </dcc-trigger>
+      </dcc-button>
    </div>
    <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
-      <dcc-trigger label="Zumbi" action="type/zombie2"
+      <dcc-button label="Zumbi" topic="type/zombie2"
                    image="images/cell/zumbi_3.png">
-      </dcc-trigger>
+      </dcc-button>
    </div>
    <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
-      <dcc-trigger label="Parede" action="type/wall"
+      <dcc-button label="Parede" topic="type/wall"
                    image="images/cell/wall.svg">
-      </dcc-trigger>
+      </dcc-button>
    </div>
    <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
-      <dcc-trigger label="Nada" action="type/empty"
+      <dcc-button label="Nada" topic="type/empty"
                    image="images/cell/cell-green.svg">
-      </dcc-trigger>
+      </dcc-button>
    </div>
 </div>
 Configure a transparência do teto:
diff --git a/src/adonisjs/public/scripts/playground/gallery/cell/zombie-wall-challenge5.js b/src/adonisjs/public/scripts/playground/gallery/cell/zombie-wall-challenge5.js
index 71363aff4..a936a590d 100644
--- a/src/adonisjs/public/scripts/playground/gallery/cell/zombie-wall-challenge5.js
+++ b/src/adonisjs/public/scripts/playground/gallery/cell/zombie-wall-challenge5.js
@@ -77,24 +77,24 @@ ___
 `Selecione um dos ícones abaixo para editar o ambiente:
 <div style="flex:48px; max-height:48px; display:flex; flex-direction:row; border:2px">
    <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
-      <dcc-trigger label="Zumbi" action="type/zombie1"
+      <dcc-button label="Zumbi" topic="type/zombie1"
                    image="images/cell/zumbi_10.png">
-      </dcc-trigger>
+      </dcc-button>
    </div>
    <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
-      <dcc-trigger label="Zumbi" action="type/zombie2"
+      <dcc-button label="Zumbi" topic="type/zombie2"
                    image="images/cell/zumbi_3.png">
-      </dcc-trigger>
+      </dcc-button>
    </div>
    <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
-      <dcc-trigger label="Parede" action="type/wall"
+      <dcc-button label="Parede" topic="type/wall"
                    image="images/cell/wall.svg">
-      </dcc-trigger>
+      </dcc-button>
    </div>
    <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
-      <dcc-trigger label="Nada" action="type/empty"
+      <dcc-button label="Nada" topic="type/empty"
                    image="images/cell/cell-green.svg">
-      </dcc-trigger>
+      </dcc-button>
    </div>
 </div>
 Configure a transparência do teto:
diff --git a/src/adonisjs/public/scripts/playground/gallery/cell/zombie-wall-challenge6.js b/src/adonisjs/public/scripts/playground/gallery/cell/zombie-wall-challenge6.js
index 7bfbec781..73c899b6a 100644
--- a/src/adonisjs/public/scripts/playground/gallery/cell/zombie-wall-challenge6.js
+++ b/src/adonisjs/public/scripts/playground/gallery/cell/zombie-wall-challenge6.js
@@ -77,24 +77,24 @@ ___
 `Selecione um dos ícones abaixo para editar o ambiente:
 <div style="flex:48px; max-height:48px; display:flex; flex-direction:row; border:2px">
    <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
-      <dcc-trigger label="Zumbi" action="type/zombie1"
+      <dcc-button label="Zumbi" topic="type/zombie1"
                    image="images/cell/zumbi_10.png">
-      </dcc-trigger>
+      </dcc-button>
    </div>
    <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
-      <dcc-trigger label="Zumbi" action="type/zombie2"
+      <dcc-button label="Zumbi" topic="type/zombie2"
                    image="images/cell/zumbi_3.png">
-      </dcc-trigger>
+      </dcc-button>
    </div>
    <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
-      <dcc-trigger label="Parede" action="type/wall"
+      <dcc-button label="Parede" topic="type/wall"
                    image="images/cell/wall.svg">
-      </dcc-trigger>
+      </dcc-button>
    </div>
    <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
-      <dcc-trigger label="Nada" action="type/empty"
+      <dcc-button label="Nada" topic="type/empty"
                    image="images/cell/cell-green.svg">
-      </dcc-trigger>
+      </dcc-button>
    </div>
 </div>
 Configure a transparência do teto:
diff --git a/src/adonisjs/public/scripts/playground/gallery/cell/zombie-wall-train1.js b/src/adonisjs/public/scripts/playground/gallery/cell/zombie-wall-train1.js
index 7d6392fb1..ed5ec2422 100644
--- a/src/adonisjs/public/scripts/playground/gallery/cell/zombie-wall-train1.js
+++ b/src/adonisjs/public/scripts/playground/gallery/cell/zombie-wall-train1.js
@@ -77,24 +77,24 @@ ___
 `Selecione um dos ícones abaixo para editar o ambiente:
 <div style="flex:48px; max-height:48px; display:flex; flex-direction:row; border:2px">
    <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
-      <dcc-trigger label="Zumbi" action="type/zombie1"
+      <dcc-button label="Zumbi" topic="type/zombie1"
                    image="images/cell/zumbi_10.png">
-      </dcc-trigger>
+      </dcc-button>
    </div>
    <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
-      <dcc-trigger label="Zumbi" action="type/zombie2"
+      <dcc-button label="Zumbi" topic="type/zombie2"
                    image="images/cell/zumbi_3.png">
-      </dcc-trigger>
+      </dcc-button>
    </div>
    <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
-      <dcc-trigger label="Parede" action="type/wall"
+      <dcc-button label="Parede" topic="type/wall"
                    image="images/cell/wall.svg">
-      </dcc-trigger>
+      </dcc-button>
    </div>
    <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
-      <dcc-trigger label="Nada" action="type/empty"
+      <dcc-button label="Nada" topic="type/empty"
                    image="images/cell/cell-green.svg">
-      </dcc-trigger>
+      </dcc-button>
    </div>
 </div>
 Configure a transparência do teto:
diff --git a/src/adonisjs/public/scripts/playground/index.html b/src/adonisjs/public/scripts/playground/index.html
index b98aa88bf..398a65854 100644
--- a/src/adonisjs/public/scripts/playground/index.html
+++ b/src/adonisjs/public/scripts/playground/index.html
@@ -39,7 +39,7 @@
    <script src="../../dccs/components/dcc-image.js"></script>
    <script src="../../dccs/components/dcc-expression.js"></script>
    <script src="../../dccs/components/dcc-block.js"></script>
-   <script src="../../dccs/components/dcc-trigger.js"></script>
+   <script src="../../dccs/components/dcc-button.js"></script>
    <script src="../../dccs/components/dcc-character.js"></script>
    <script src="../../dccs/components/dcc-lively-dialog.js"></script>
    <script src="../../dccs/components/dcc-notice-input.js"></script>
@@ -127,8 +127,8 @@ <h1>DCC Playground</h1>
 
       <div class="container-fluid">
         <nav class="navbar navbar-light">
-          <dcc-trigger action="control/code/generate" label="GENERATE" xstyle="in">
-          </dcc-trigger>
+          <dcc-button topic="control/code/generate" label="GENERATE" xstyle="in">
+          </dcc-button>
         </nav>
       </div>
 
diff --git a/src/adonisjs/public/scripts/playground/js/author-cell.js b/src/adonisjs/public/scripts/playground/js/author-cell.js
index 45425cd0d..b4e881051 100644
--- a/src/adonisjs/public/scripts/playground/js/author-cell.js
+++ b/src/adonisjs/public/scripts/playground/js/author-cell.js
@@ -233,12 +233,12 @@ class AuthorCellManager {
 </div>
 <div id="script-block" class="d-flex col-6 flex-column align-items-stretch">
    <div class="sty-navigation-expansion">
-       <dcc-trigger id="button-expand-script" action="control/script/expand" label="Expand" image="images/icon/icon-expansion-left.svg"></dcc-trigger>
-       <dcc-trigger id="button-retract-script" action="control/script/retract" label="Retract" image="images/icon/icon-expansion-right.svg"></dcc-trigger>
+       <dcc-button id="button-expand-script" topic="control/script/expand" label="Expand" image="images/icon/icon-expansion-left.svg"></dcc-button>
+       <dcc-button id="button-retract-script" topic="control/script/retract" label="Retract" image="images/icon/icon-expansion-right.svg"></dcc-button>
    </div>
    <div class="sty-navigation-expansion">
-       <dcc-trigger id="button-retract-cells" action="control/cells/retract" label="Expand" image="images/icon/icon-expansion-left.svg"></dcc-trigger>
-       <dcc-trigger id="button-expand-cells" action="control/cells/expand" label="Retract" image="images/icon/icon-expansion-right.svg"></dcc-trigger>
+       <dcc-button id="button-retract-cells" topic="control/cells/retract" label="Expand" image="images/icon/icon-expansion-left.svg"></dcc-button>
+       <dcc-button id="button-expand-cells" topic="control/cells/expand" label="Retract" image="images/icon/icon-expansion-right.svg"></dcc-button>
    </div>
    <div class="h-100 w-100" style="padding-left:.800rem">
       <div class="h-100 w-100" id="script-panel"></div>
diff --git a/src/adonisjs/public/scripts/playground/script-dcc.html b/src/adonisjs/public/scripts/playground/script-dcc.html
index 72e1e66ba..3d76294d5 100644
--- a/src/adonisjs/public/scripts/playground/script-dcc.html
+++ b/src/adonisjs/public/scripts/playground/script-dcc.html
@@ -39,7 +39,7 @@
    <script src="../../dccs/components/dcc-image.js"></script>
    <script src="../../dccs/components/dcc-expression.js"></script>
    <script src="../../dccs/components/dcc-block.js"></script>
-   <script src="../../dccs/components/dcc-trigger.js"></script>
+   <script src="../../dccs/components/dcc-button.js"></script>
    <script src="../../dccs/components/dcc-character.js"></script>
    <script src="../../dccs/components/dcc-lively-dialog.js"></script>
    <script src="../../dccs/components/dcc-notice-input.js"></script>
@@ -133,8 +133,8 @@ <h1>DCC Playground</h1>
 
       <div class="container-fluid">
         <nav class="navbar navbar-light">
-          <dcc-trigger action="control/code/generate" label="GENERATE" xstyle="in">
-          </dcc-trigger>
+          <dcc-button topic="control/code/generate" label="GENERATE" xstyle="in">
+          </dcc-button>
         </nav>
       </div>
 
diff --git a/src/adonisjs/public/themes/classic/css/theme.css b/src/adonisjs/public/themes/classic/css/theme.css
index a302dc04a..193324564 100644
--- a/src/adonisjs/public/themes/classic/css/theme.css
+++ b/src/adonisjs/public/themes/classic/css/theme.css
@@ -43,7 +43,7 @@
    max-height: 200px;   
 }
 
-.template-knot dcc-trigger {
+.template-knot dcc-button {
   display: block;
   flex: 10%;
   max-width: 50%;
@@ -86,7 +86,7 @@
    width: 100%;
 }
 
-.template-presentation img, .template-presentation dcc-trigger {
+.template-presentation img, .template-presentation dcc-button {
   display: block;
   margin-left: auto;
   margin-right: auto;
@@ -123,7 +123,7 @@
    overflow: scrool;
 }
 
-.template-tablet-inside img, .template-tablet-inside dcc-trigger {
+.template-tablet-inside img, .template-tablet-inside dcc-button {
   display: block;
   margin-left: auto;
   margin-right: auto;
@@ -151,7 +151,7 @@
    font-size: 12pt;
 }
 
-.template-selector-inside img, .template-selector-inside dcc-trigger {
+.template-selector-inside img, .template-selector-inside dcc-button {
   display: block;
   margin-left: auto;
   margin-right: auto;
diff --git a/src/adonisjs/public/themes/classic/notice.html b/src/adonisjs/public/themes/classic/notice.html
index 9946b0d13..33d7f7677 100644
--- a/src/adonisjs/public/themes/classic/notice.html
+++ b/src/adonisjs/public/themes/classic/notice.html
@@ -1,2 +1,2 @@
 {knot}
-<dcc-trigger action="previous-knot" label="Previous Knot"  image="images/icon-back.svg" location="player-panel"></dcc-trigger>
\ No newline at end of file
+<dcc-button topic="previous-knot" label="Previous Knot"  image="images/icon-back.svg" location="player-panel"></dcc-button>
\ No newline at end of file
diff --git a/src/adonisjs/public/themes/jacinto/css/dcc-trigger.css b/src/adonisjs/public/themes/jacinto/css/dcc-button.css
similarity index 71%
rename from src/adonisjs/public/themes/jacinto/css/dcc-trigger.css
rename to src/adonisjs/public/themes/jacinto/css/dcc-button.css
index ffe9cc7e7..b8b9698d2 100644
--- a/src/adonisjs/public/themes/jacinto/css/dcc-trigger.css
+++ b/src/adonisjs/public/themes/jacinto/css/dcc-button.css
@@ -2,15 +2,15 @@
 
 /* Trigger DCC */
 
-.dcc-trigger-theme {
+.dcc-button-theme {
    text-decoration: underline;
    color: red;
    display: block;
 }
-.dcc-trigger-theme:hover {
+.dcc-button-theme:hover {
    cursor: pointer;
 }
-.dcc-trigger-image-theme {
+.dcc-button-image-theme {
    max-width: 100%;
    max-height: 100%;
    cursor: pointer;
diff --git a/src/adonisjs/public/themes/jacinto/css/templates-classic.css b/src/adonisjs/public/themes/jacinto/css/templates-classic.css
index d5adccd79..41dbebdfd 100644
--- a/src/adonisjs/public/themes/jacinto/css/templates-classic.css
+++ b/src/adonisjs/public/themes/jacinto/css/templates-classic.css
@@ -37,7 +37,7 @@
    width: 100%;
 }
 
-.template-presentation img, .template-presentation dcc-trigger {
+.template-presentation img, .template-presentation dcc-button {
   display: block;
   margin-left: auto;
   margin-right: auto;
@@ -74,7 +74,7 @@
    overflow: scrool;
 }
 
-.template-tablet-inside img, .template-tablet-inside dcc-trigger {
+.template-tablet-inside img, .template-tablet-inside dcc-button {
   display: block;
   margin-left: auto;
   margin-right: auto;
@@ -102,7 +102,7 @@
    font-size: 12pt;
 }
 
-.template-selector-inside img, .template-selector-inside dcc-trigger {
+.template-selector-inside img, .template-selector-inside dcc-button {
   display: block;
   margin-left: auto;
   margin-right: auto;
diff --git a/src/adonisjs/public/themes/jacinto/css/theme.css b/src/adonisjs/public/themes/jacinto/css/theme.css
index 11ecea846..07557f376 100644
--- a/src/adonisjs/public/themes/jacinto/css/theme.css
+++ b/src/adonisjs/public/themes/jacinto/css/theme.css
@@ -5,7 +5,7 @@
 
 /* Trigger DCC */
 
-.dcc-trigger-theme {
+.dcc-button-theme {
    border: 1px solid lightgray;
    border-radius: 5px;
    margin: 1px;
@@ -15,7 +15,7 @@
    text-decoration: none;
    display: inline-block;
 }
-.dcc-trigger-theme:hover {
+.dcc-button-theme:hover {
    color: #ffff;
    font-weight: bold;
    cursor: pointer;
diff --git a/src/adonisjs/public/themes/jacinto/detailed.html b/src/adonisjs/public/themes/jacinto/detailed.html
index 9469c48de..d8fc4a358 100644
--- a/src/adonisjs/public/themes/jacinto/detailed.html
+++ b/src/adonisjs/public/themes/jacinto/detailed.html
@@ -641,7 +641,7 @@
    cy="186.4236"
    r="25.741863" />
   <foreignObject>
-     <dcc-trigger action="knot/</navigate" label="Previous Knot" xstyle="out-image" location="back-button"></dcc-trigger>
+     <dcc-button topic="knot/</navigate" label="Previous Knot" xstyle="out-image" location="back-button"></dcc-button>
   </foreignObject>
 
 </svg>
diff --git a/src/adonisjs/public/themes/jacinto/detailed_role.html b/src/adonisjs/public/themes/jacinto/detailed_role.html
index ec05d6857..8fd1d0f8d 100644
--- a/src/adonisjs/public/themes/jacinto/detailed_role.html
+++ b/src/adonisjs/public/themes/jacinto/detailed_role.html
@@ -569,6 +569,6 @@
    cy="186.4236"
    r="25.741863" />
   <foreignObject>
-     <dcc-trigger action="knot/</navigate" label="Previous Knot" xstyle="out-image" location="back-button"></dcc-trigger>
+     <dcc-button topic="knot/</navigate" label="Previous Knot" xstyle="out-image" location="back-button"></dcc-button>
   </foreignObject>
 </svg>
diff --git a/src/adonisjs/public/themes/jacinto/exam.html b/src/adonisjs/public/themes/jacinto/exam.html
index 47bdd1636..6bca152c2 100644
--- a/src/adonisjs/public/themes/jacinto/exam.html
+++ b/src/adonisjs/public/themes/jacinto/exam.html
@@ -664,6 +664,6 @@
    cy="186.4236"
    r="25.741863" />
   <foreignObject>
-     <dcc-trigger action="knot/</navigate" label="Previous Knot" xstyle="out-image" location="back-button"></dcc-trigger>
+     <dcc-button topic="knot/</navigate" label="Previous Knot" xstyle="out-image" location="back-button"></dcc-button>
   </foreignObject>
 </svg>
diff --git a/src/adonisjs/public/themes/jacinto/exam_wide.html b/src/adonisjs/public/themes/jacinto/exam_wide.html
index 8e8de9dec..c201f465d 100644
--- a/src/adonisjs/public/themes/jacinto/exam_wide.html
+++ b/src/adonisjs/public/themes/jacinto/exam_wide.html
@@ -90,6 +90,6 @@
    r="25.265163"
    inkscape:label="#path38" />
   <foreignObject>
-     <dcc-trigger action="knot/</navigate" label="Previous Knot" xstyle="out-image" location="close-button"></dcc-trigger>
+     <dcc-button topic="knot/</navigate" label="Previous Knot" xstyle="out-image" location="close-button"></dcc-button>
   </foreignObject>
 </svg>
diff --git a/src/adonisjs/public/themes/jacinto/information.html b/src/adonisjs/public/themes/jacinto/information.html
index cfaa3dafc..d1cf5b17b 100644
--- a/src/adonisjs/public/themes/jacinto/information.html
+++ b/src/adonisjs/public/themes/jacinto/information.html
@@ -676,6 +676,6 @@
    cy="186.4236"
    r="25.741863" />
   <foreignObject>
-     <dcc-trigger action="knot/</navigate" label="Previous Knot" xstyle="out-image" location="back-button"></dcc-trigger>
+     <dcc-button topic="knot/</navigate" label="Previous Knot" xstyle="out-image" location="back-button"></dcc-button>
   </foreignObject>
 </svg>
diff --git a/src/adonisjs/public/themes/jacinto/information_exam.html b/src/adonisjs/public/themes/jacinto/information_exam.html
index 7290ddb84..6f4475e33 100644
--- a/src/adonisjs/public/themes/jacinto/information_exam.html
+++ b/src/adonisjs/public/themes/jacinto/information_exam.html
@@ -683,6 +683,6 @@
    cy="186.4236"
    r="25.741863" />
   <foreignObject>
-     <dcc-trigger action="knot/</navigate" label="Previous Knot" xstyle="out-image" location="back-button"></dcc-trigger>
+     <dcc-button topic="knot/</navigate" label="Previous Knot" xstyle="out-image" location="back-button"></dcc-button>
   </foreignObject>
 </svg>
diff --git a/src/adonisjs/public/themes/jacinto/input.html b/src/adonisjs/public/themes/jacinto/input.html
index 72ab4a0df..dbde2e756 100644
--- a/src/adonisjs/public/themes/jacinto/input.html
+++ b/src/adonisjs/public/themes/jacinto/input.html
@@ -583,6 +583,6 @@
    cy="186.4236"
    r="25.741863" />
   <foreignObject>
-     <dcc-trigger action="knot/</navigate" label="Previous Knot" xstyle="out-image" location="back-button"></dcc-trigger>
+     <dcc-button topic="knot/</navigate" label="Previous Knot" xstyle="out-image" location="back-button"></dcc-button>
   </foreignObject>
 </svg>
diff --git a/src/adonisjs/public/themes/jacinto/notice.html b/src/adonisjs/public/themes/jacinto/notice.html
index c02e3a835..bc0dcf710 100644
--- a/src/adonisjs/public/themes/jacinto/notice.html
+++ b/src/adonisjs/public/themes/jacinto/notice.html
@@ -91,12 +91,12 @@
    r="25.265163"
    inkscape:label="#path38" />
   <foreignObject>
-     <dcc-trigger action="knot/</navigate" label="Previous Knot" xstyle="out-image" location="close-button"></dcc-trigger>
+     <dcc-button topic="knot/</navigate" label="Previous Knot" xstyle="out-image" location="close-button"></dcc-button>
   </foreignObject>
   <foreignObject>
-     <dcc-trigger action="knot/</navigate" label="Previous Knot" xstyle="out-image" location="button-return"></dcc-trigger>
+     <dcc-button topic="knot/</navigate" label="Previous Knot" xstyle="out-image" location="button-return"></dcc-button>
   </foreignObject>
   <foreignObject>
-     <dcc-trigger action="knot/</navigate" label="Previous Knot" xstyle="out-image" location="button-return-label"></dcc-trigger>
+     <dcc-button topic="knot/</navigate" label="Previous Knot" xstyle="out-image" location="button-return-label"></dcc-button>
   </foreignObject>
 </svg>
diff --git a/src/adonisjs/public/themes/jacinto/notice_exam_zoom.html b/src/adonisjs/public/themes/jacinto/notice_exam_zoom.html
index 917c05587..141ad6ddc 100644
--- a/src/adonisjs/public/themes/jacinto/notice_exam_zoom.html
+++ b/src/adonisjs/public/themes/jacinto/notice_exam_zoom.html
@@ -98,12 +98,12 @@
    r="25.265163"
    inkscape:label="#path38" />
   <foreignObject>
-     <dcc-trigger action="knot/</navigate" label="Previous Knot" xstyle="out-image" location="close-button"></dcc-trigger>
+     <dcc-button topic="knot/</navigate" label="Previous Knot" xstyle="out-image" location="close-button"></dcc-button>
   </foreignObject>
   <foreignObject>
-  <dcc-trigger action="knot/</navigate" label="Previous Knot" xstyle="out-image" location="button-return"></dcc-trigger>
+  <dcc-button topic="knot/</navigate" label="Previous Knot" xstyle="out-image" location="button-return"></dcc-button>
   </foreignObject>
   <foreignObject>
-     <dcc-trigger action="knot/</navigate" label="Previous Knot" xstyle="out-image" location="button-return-label"></dcc-trigger>
+     <dcc-button topic="knot/</navigate" label="Previous Knot" xstyle="out-image" location="button-return-label"></dcc-button>
   </foreignObject>
 </svg>
diff --git a/src/adonisjs/public/themes/jacinto/notice_wide.html b/src/adonisjs/public/themes/jacinto/notice_wide.html
index 1ff75fcd2..6f00d9ef2 100644
--- a/src/adonisjs/public/themes/jacinto/notice_wide.html
+++ b/src/adonisjs/public/themes/jacinto/notice_wide.html
@@ -90,12 +90,12 @@
    r="25.265163"
    inkscape:label="#path38" />
   <foreignObject>
-     <dcc-trigger action="knot/</navigate" label="Previous Knot" xstyle="out-image" location="close-button"></dcc-trigger>
+     <dcc-button topic="knot/</navigate" label="Previous Knot" xstyle="out-image" location="close-button"></dcc-button>
   </foreignObject>
   <foreignObject>
-  <dcc-trigger action="knot/</navigate" label="Previous Knot" xstyle="out-image" location="button-return"></dcc-trigger>
+  <dcc-button topic="knot/</navigate" label="Previous Knot" xstyle="out-image" location="button-return"></dcc-button>
   </foreignObject>
   <foreignObject>
-     <dcc-trigger action="knot/</navigate" label="Previous Knot" xstyle="out-image" location="button-return-label"></dcc-trigger>
+     <dcc-button topic="knot/</navigate" label="Previous Knot" xstyle="out-image" location="button-return-label"></dcc-button>
   </foreignObject>
 </svg>
diff --git a/src/adonisjs/public/themes/jacinto/old/detailed.html b/src/adonisjs/public/themes/jacinto/old/detailed.html
index 6ca99d172..1637d1511 100644
--- a/src/adonisjs/public/themes/jacinto/old/detailed.html
+++ b/src/adonisjs/public/themes/jacinto/old/detailed.html
@@ -214,7 +214,7 @@
        id="Path_320" />
   </g>
   <foreignObject>
-     <dcc-trigger action="knot/</navigate" label="Previous Knot" xstyle="out-image" location="back-arrow"></dcc-trigger>
+     <dcc-button topic="knot/</navigate" label="Previous Knot" xstyle="out-image" location="back-arrow"></dcc-button>
   </foreignObject>
   <text
      style="font-size:20px;font-family:Tahoma, Geneva, sans-serif;fill:#ffffff"
diff --git a/src/adonisjs/public/themes/jacinto/old/information.html b/src/adonisjs/public/themes/jacinto/old/information.html
index 6be7ca7b8..be812f72a 100644
--- a/src/adonisjs/public/themes/jacinto/old/information.html
+++ b/src/adonisjs/public/themes/jacinto/old/information.html
@@ -215,7 +215,7 @@
        id="Path_320" />
   </g>
   <foreignObject>
-     <dcc-trigger action="knot/</navigate" label="Previous Knot" xstyle="out-image" location="back-arrow"></dcc-trigger>
+     <dcc-button topic="knot/</navigate" label="Previous Knot" xstyle="out-image" location="back-arrow"></dcc-button>
   </foreignObject>
   <g
      style="fill:none;stroke:#ffffff"
diff --git a/src/adonisjs/public/themes/jacinto/old/input.html b/src/adonisjs/public/themes/jacinto/old/input.html
index 8dcd5b5e4..55fbcdef5 100644
--- a/src/adonisjs/public/themes/jacinto/old/input.html
+++ b/src/adonisjs/public/themes/jacinto/old/input.html
@@ -216,7 +216,7 @@
        id="Path_320" />
   </g>
   <foreignObject>
-     <dcc-trigger action="knot/</navigate" label="Previous Knot" xstyle="out-image" location="back-arrow"></dcc-trigger>
+     <dcc-button topic="knot/</navigate" label="Previous Knot" xstyle="out-image" location="back-arrow"></dcc-button>
   </foreignObject>
   <g
      style="fill:#ffffff;stroke:#707070"
diff --git a/src/adonisjs/public/themes/jacinto/old/note.html b/src/adonisjs/public/themes/jacinto/old/note.html
index cd7ff6e2b..59a6f10a4 100644
--- a/src/adonisjs/public/themes/jacinto/old/note.html
+++ b/src/adonisjs/public/themes/jacinto/old/note.html
@@ -151,7 +151,7 @@
         class="cls-6"/>
   </g>
   <foreignObject>
-     <dcc-trigger action="knot/</navigate" label="Previous Knot" xstyle="out-image" location="close-window"></dcc-trigger>
+     <dcc-button topic="knot/</navigate" label="Previous Knot" xstyle="out-image" location="close-window"></dcc-button>
   </foreignObject>
 </svg>
 </div>
\ No newline at end of file
diff --git a/src/adonisjs/public/themes/jacinto/presentation_3.html b/src/adonisjs/public/themes/jacinto/presentation_3.html
index 61f7cee3e..0a4603119 100644
--- a/src/adonisjs/public/themes/jacinto/presentation_3.html
+++ b/src/adonisjs/public/themes/jacinto/presentation_3.html
@@ -861,6 +861,6 @@
    cy="186.4236"
    r="25.741863" />
   <foreignObject>
-     <dcc-trigger action="knot/</navigate" label="Previous Knot" xstyle="out-image" location="back-button"></dcc-trigger>
+     <dcc-button topic="knot/</navigate" label="Previous Knot" xstyle="out-image" location="back-button"></dcc-button>
   </foreignObject>
 </svg>
diff --git a/src/adonisjs/public/themes/jacinto/presentation_4.html b/src/adonisjs/public/themes/jacinto/presentation_4.html
index ef595940d..0f182aba0 100644
--- a/src/adonisjs/public/themes/jacinto/presentation_4.html
+++ b/src/adonisjs/public/themes/jacinto/presentation_4.html
@@ -958,6 +958,6 @@
    cy="186.4236"
    r="25.741863" />
   <foreignObject>
-     <dcc-trigger action="knot/</navigate" label="Previous Knot" xstyle="out-image" location="back-button"></dcc-trigger>
+     <dcc-button topic="knot/</navigate" label="Previous Knot" xstyle="out-image" location="back-button"></dcc-button>
   </foreignObject>
 </svg>
diff --git a/src/adonisjs/public/themes/jacinto/svgs-old/note.svg b/src/adonisjs/public/themes/jacinto/svgs-old/note.svg
index 1934fcba2..b376ab477 100644
--- a/src/adonisjs/public/themes/jacinto/svgs-old/note.svg
+++ b/src/adonisjs/public/themes/jacinto/svgs-old/note.svg
@@ -174,7 +174,7 @@
    data-name="Close Window"
    id="close-window" />
 <foreignObject>
-  <dcc-trigger
-     action="knot/" />
+  <dcc-button
+     topic="knot/" />
 </foreignObject>
 &quot; label=&quot;Previous Knot&quot; xstyle=&quot;out-image&quot; location=&quot;close-window&quot;&gt;</svg>
diff --git a/src/adonisjs/public/themes/jacinto/svgs/notice.svg b/src/adonisjs/public/themes/jacinto/svgs/notice.svg
index 4df2547b3..1afeb4727 100644
--- a/src/adonisjs/public/themes/jacinto/svgs/notice.svg
+++ b/src/adonisjs/public/themes/jacinto/svgs/notice.svg
@@ -184,8 +184,8 @@
      transform="translate(754.906 -96.854)" />
 </g>
 <foreignObject>
-  <dcc-trigger
-     action="knot/" />
+  <dcc-button
+     topic="knot/" />
 </foreignObject>
 &quot; label=&quot;Previous Knot&quot; xstyle=&quot;out-image&quot; location=&quot;close-window&quot;&gt;<circle
    style="opacity:0.98000004;fill:none"
diff --git a/src/adonisjs/public/themes/zombie/css/dcc-trigger.css b/src/adonisjs/public/themes/minimal/css/dcc-button.css
similarity index 82%
rename from src/adonisjs/public/themes/zombie/css/dcc-trigger.css
rename to src/adonisjs/public/themes/minimal/css/dcc-button.css
index d1580755b..764caab02 100644
--- a/src/adonisjs/public/themes/zombie/css/dcc-trigger.css
+++ b/src/adonisjs/public/themes/minimal/css/dcc-button.css
@@ -2,7 +2,7 @@
 
 /* Trigger DCC */
 
-.dcc-trigger-theme {
+.dcc-button-theme {
    border: 1px solid lightgray;
    border-radius: 5px;
    margin: 5px;
@@ -12,12 +12,12 @@
    text-decoration: none;
    display: inline-block;
 }
-.dcc-trigger-theme:hover {
+.dcc-button-theme:hover {
    color: black;
    font-weight: bold;
    cursor: pointer;
 }
-.dcc-trigger-image-theme {
+.dcc-button-image-theme {
    max-width: 100%;
    max-height: 100%;
    cursor: pointer;
diff --git a/src/adonisjs/public/themes/minimal/note.html b/src/adonisjs/public/themes/minimal/note.html
index c4db0dcc7..521031651 100644
--- a/src/adonisjs/public/themes/minimal/note.html
+++ b/src/adonisjs/public/themes/minimal/note.html
@@ -1,6 +1,6 @@
 <div class="styn-note">
    <div class="styn-control-button">
-      <dcc-trigger action="knot/</navigate" label="Previous Knot" image="../themes/minimal/images/icon-back.svg"></dcc-trigger>
+      <dcc-button topic="knot/</navigate" label="Previous Knot" image="../themes/minimal/images/icon-back.svg"></dcc-button>
    </div>
 
    <div class="styt-pul-main">{knot}</div>
diff --git a/src/adonisjs/public/themes/simple-svg/css/dcc-trigger.css b/src/adonisjs/public/themes/simple-svg/css/dcc-button.css
similarity index 71%
rename from src/adonisjs/public/themes/simple-svg/css/dcc-trigger.css
rename to src/adonisjs/public/themes/simple-svg/css/dcc-button.css
index ffe9cc7e7..b8b9698d2 100644
--- a/src/adonisjs/public/themes/simple-svg/css/dcc-trigger.css
+++ b/src/adonisjs/public/themes/simple-svg/css/dcc-button.css
@@ -2,15 +2,15 @@
 
 /* Trigger DCC */
 
-.dcc-trigger-theme {
+.dcc-button-theme {
    text-decoration: underline;
    color: red;
    display: block;
 }
-.dcc-trigger-theme:hover {
+.dcc-button-theme:hover {
    cursor: pointer;
 }
-.dcc-trigger-image-theme {
+.dcc-button-image-theme {
    max-width: 100%;
    max-height: 100%;
    cursor: pointer;
diff --git a/src/adonisjs/public/themes/simple-svg/css/theme.css b/src/adonisjs/public/themes/simple-svg/css/theme.css
index 11ecea846..07557f376 100644
--- a/src/adonisjs/public/themes/simple-svg/css/theme.css
+++ b/src/adonisjs/public/themes/simple-svg/css/theme.css
@@ -5,7 +5,7 @@
 
 /* Trigger DCC */
 
-.dcc-trigger-theme {
+.dcc-button-theme {
    border: 1px solid lightgray;
    border-radius: 5px;
    margin: 1px;
@@ -15,7 +15,7 @@
    text-decoration: none;
    display: inline-block;
 }
-.dcc-trigger-theme:hover {
+.dcc-button-theme:hover {
    color: #ffff;
    font-weight: bold;
    cursor: pointer;
diff --git a/src/adonisjs/public/themes/simple-svg/detailed.html b/src/adonisjs/public/themes/simple-svg/detailed.html
index 9921f7799..f3b7b84b2 100644
--- a/src/adonisjs/public/themes/simple-svg/detailed.html
+++ b/src/adonisjs/public/themes/simple-svg/detailed.html
@@ -539,6 +539,6 @@
    r="25.741863"
    visibility="hidden" />
   <foreignObject>
-     <dcc-trigger action="knot/</navigate" label="Previous Knot" xstyle="out-image" location="back-button"></dcc-trigger>
+     <dcc-button topic="knot/</navigate" label="Previous Knot" xstyle="out-image" location="back-button"></dcc-button>
   </foreignObject>
 </svg>
diff --git a/src/adonisjs/public/themes/simple-svg/exam.html b/src/adonisjs/public/themes/simple-svg/exam.html
index 1eb6948f8..a1670b89d 100644
--- a/src/adonisjs/public/themes/simple-svg/exam.html
+++ b/src/adonisjs/public/themes/simple-svg/exam.html
@@ -666,6 +666,6 @@
    r="25.741863"
    visibility="hidden" />
   <foreignObject>
-     <dcc-trigger action="knot/</navigate" label="Previous Knot" xstyle="out-image" location="back-button"></dcc-trigger>
+     <dcc-button topic="knot/</navigate" label="Previous Knot" xstyle="out-image" location="back-button"></dcc-button>
   </foreignObject>
 </svg>
diff --git a/src/adonisjs/public/themes/simple-svg/input.html b/src/adonisjs/public/themes/simple-svg/input.html
index b66f86002..147d28a0b 100644
--- a/src/adonisjs/public/themes/simple-svg/input.html
+++ b/src/adonisjs/public/themes/simple-svg/input.html
@@ -586,6 +586,6 @@
    r="25.741863"
    visibility="hidden" />
   <foreignObject>
-     <dcc-trigger action="knot/</navigate" label="Previous Knot" xstyle="out-image" location="back-button"></dcc-trigger>
+     <dcc-button topic="knot/</navigate" label="Previous Knot" xstyle="out-image" location="back-button"></dcc-button>
   </foreignObject>
 </svg>
diff --git a/src/adonisjs/public/themes/simple/css/blue/dcc-trigger.css b/src/adonisjs/public/themes/simple/css/blue/dcc-button.css
similarity index 70%
rename from src/adonisjs/public/themes/simple/css/blue/dcc-trigger.css
rename to src/adonisjs/public/themes/simple/css/blue/dcc-button.css
index ea1c8f63f..7256e5725 100644
--- a/src/adonisjs/public/themes/simple/css/blue/dcc-trigger.css
+++ b/src/adonisjs/public/themes/simple/css/blue/dcc-button.css
@@ -1,5 +1,5 @@
 @charset "UTF-8";
 
-.dcc-trigger-theme {
+.dcc-button-theme {
    background-color: #234a98;
 }
diff --git a/src/adonisjs/public/themes/simple/css/dcc-trigger.css b/src/adonisjs/public/themes/simple/css/dcc-button.css
similarity index 83%
rename from src/adonisjs/public/themes/simple/css/dcc-trigger.css
rename to src/adonisjs/public/themes/simple/css/dcc-button.css
index 134bccbe3..60598ac16 100644
--- a/src/adonisjs/public/themes/simple/css/dcc-trigger.css
+++ b/src/adonisjs/public/themes/simple/css/dcc-button.css
@@ -2,7 +2,7 @@
 
 /* Trigger DCC */
 
-.dcc-trigger-theme {
+.dcc-button-theme {
    font-size: 3vmin;
    /* vertical center */
    display: flex;
@@ -21,24 +21,24 @@
 }
 
 @media (orientation: landscape) {
-   .dcc-trigger-theme {
+   .dcc-button-theme {
       height: 80px;
       width: 800px;
    }
 }
 
 @media (orientation: portrait) {
-   .dcc-trigger-theme {
+   .dcc-button-theme {
       height: 140px;
       width: 300px;
    }
 }
 
-.dcc-trigger-theme:hover {
+.dcc-button-theme:hover {
    cursor: pointer;
 }
 
-.dcc-trigger-image-theme {
+.dcc-button-image-theme {
    max-width: 100%;
    max-height: 100%;
    cursor: pointer;
diff --git a/src/adonisjs/public/themes/simple/css/default/dcc-trigger.css b/src/adonisjs/public/themes/simple/css/default/dcc-button.css
similarity index 69%
rename from src/adonisjs/public/themes/simple/css/default/dcc-trigger.css
rename to src/adonisjs/public/themes/simple/css/default/dcc-button.css
index 7599db95d..3592b46b5 100644
--- a/src/adonisjs/public/themes/simple/css/default/dcc-trigger.css
+++ b/src/adonisjs/public/themes/simple/css/default/dcc-button.css
@@ -1,5 +1,5 @@
 @charset "UTF-8";
 
-.dcc-trigger-theme {
+.dcc-button-theme {
    background-color: gray;
 }
diff --git a/src/adonisjs/public/themes/simple/css/green/dcc-trigger.css b/src/adonisjs/public/themes/simple/css/green/dcc-button.css
similarity index 70%
rename from src/adonisjs/public/themes/simple/css/green/dcc-trigger.css
rename to src/adonisjs/public/themes/simple/css/green/dcc-button.css
index 7f31bc288..a203fe504 100644
--- a/src/adonisjs/public/themes/simple/css/green/dcc-trigger.css
+++ b/src/adonisjs/public/themes/simple/css/green/dcc-button.css
@@ -1,5 +1,5 @@
 @charset "UTF-8";
 
-.dcc-trigger-theme {
+.dcc-button-theme {
    background-color: #00903a;
 }
diff --git a/src/adonisjs/public/themes/simple/css/purple/dcc-trigger.css b/src/adonisjs/public/themes/simple/css/purple/dcc-button.css
similarity index 70%
rename from src/adonisjs/public/themes/simple/css/purple/dcc-trigger.css
rename to src/adonisjs/public/themes/simple/css/purple/dcc-button.css
index 8f99b8338..484f22f8b 100644
--- a/src/adonisjs/public/themes/simple/css/purple/dcc-trigger.css
+++ b/src/adonisjs/public/themes/simple/css/purple/dcc-button.css
@@ -1,5 +1,5 @@
 @charset "UTF-8";
 
-.dcc-trigger-theme {
+.dcc-button-theme {
    background-color: #650061;
 }
diff --git a/src/adonisjs/public/themes/simple/css/red/dcc-trigger.css b/src/adonisjs/public/themes/simple/css/red/dcc-button.css
similarity index 70%
rename from src/adonisjs/public/themes/simple/css/red/dcc-trigger.css
rename to src/adonisjs/public/themes/simple/css/red/dcc-button.css
index c777002e6..4fa2f18ba 100644
--- a/src/adonisjs/public/themes/simple/css/red/dcc-trigger.css
+++ b/src/adonisjs/public/themes/simple/css/red/dcc-button.css
@@ -1,5 +1,5 @@
 @charset "UTF-8";
 
-.dcc-trigger-theme {
+.dcc-button-theme {
    background-color: #ba2027;
 }
diff --git a/src/adonisjs/public/themes/simple/css/yellow/dcc-trigger.css b/src/adonisjs/public/themes/simple/css/yellow/dcc-button.css
similarity index 70%
rename from src/adonisjs/public/themes/simple/css/yellow/dcc-trigger.css
rename to src/adonisjs/public/themes/simple/css/yellow/dcc-button.css
index 60d77c3ba..b93450654 100644
--- a/src/adonisjs/public/themes/simple/css/yellow/dcc-trigger.css
+++ b/src/adonisjs/public/themes/simple/css/yellow/dcc-button.css
@@ -1,5 +1,5 @@
 @charset "UTF-8";
 
-.dcc-trigger-theme {
+.dcc-button-theme {
    background-color: #839b27;
 }
diff --git a/src/adonisjs/public/themes/simple/local/note.js b/src/adonisjs/public/themes/simple/local/note.js
index 40085deb8..aa6d575a2 100644
--- a/src/adonisjs/public/themes/simple/local/note.js
+++ b/src/adonisjs/public/themes/simple/local/note.js
@@ -2,7 +2,7 @@
   const localTheme = `
 <div class="styn-note">
    <div class="styn-control-button">
-      <dcc-trigger action="knot/</navigate" label="Previous Knot" image="../themes/minimal/images/icon-back.svg"></dcc-trigger>
+      <dcc-button topic="knot/</navigate" label="Previous Knot" image="../themes/minimal/images/icon-back.svg"></dcc-button>
    </div>
 
    <div class="styt-pul-main">{knot}</div>
diff --git a/src/adonisjs/public/themes/simple/note.html b/src/adonisjs/public/themes/simple/note.html
index e91988e6d..92504cf07 100644
--- a/src/adonisjs/public/themes/simple/note.html
+++ b/src/adonisjs/public/themes/simple/note.html
@@ -8,5 +8,5 @@
    </div>
 </div>
 <div class="styt-button-frame">
-   <dcc-trigger xstyle="theme" action="knot/</navigate" label="Return"></dcc-trigger>
+   <dcc-button xstyle="theme" topic="knot/</navigate" label="Return"></dcc-button>
 </div>
\ No newline at end of file
diff --git a/src/adonisjs/public/themes/system/css/dcc-trigger.css b/src/adonisjs/public/themes/system/css/dcc-button.css
similarity index 87%
rename from src/adonisjs/public/themes/system/css/dcc-trigger.css
rename to src/adonisjs/public/themes/system/css/dcc-button.css
index 454211ed0..bf2ad0087 100644
--- a/src/adonisjs/public/themes/system/css/dcc-trigger.css
+++ b/src/adonisjs/public/themes/system/css/dcc-button.css
@@ -2,7 +2,7 @@
 
 /* Trigger DCC */
 
-.dcc-trigger-theme {
+.dcc-button-theme {
    color: #ffffff;
    background-color: #a6a6a6;
    font-weight: bold;
@@ -23,14 +23,14 @@
    margin: .5rem;
 }
 
-.dcc-trigger-theme:hover {
+.dcc-button-theme:hover {
    color: #fff;
    background-color: #5a6268;
    border-color: #545b62;
    cursor: pointer;
 }
 
-.dcc-trigger-image-theme {
+.dcc-button-image-theme {
    max-width: 100%;
    max-height: 100%;
    cursor: pointer;
diff --git a/src/adonisjs/public/themes/zombie-antigo/css/templates-classic.css b/src/adonisjs/public/themes/zombie-antigo/css/templates-classic.css
index d5adccd79..41dbebdfd 100644
--- a/src/adonisjs/public/themes/zombie-antigo/css/templates-classic.css
+++ b/src/adonisjs/public/themes/zombie-antigo/css/templates-classic.css
@@ -37,7 +37,7 @@
    width: 100%;
 }
 
-.template-presentation img, .template-presentation dcc-trigger {
+.template-presentation img, .template-presentation dcc-button {
   display: block;
   margin-left: auto;
   margin-right: auto;
@@ -74,7 +74,7 @@
    overflow: scrool;
 }
 
-.template-tablet-inside img, .template-tablet-inside dcc-trigger {
+.template-tablet-inside img, .template-tablet-inside dcc-button {
   display: block;
   margin-left: auto;
   margin-right: auto;
@@ -102,7 +102,7 @@
    font-size: 12pt;
 }
 
-.template-selector-inside img, .template-selector-inside dcc-trigger {
+.template-selector-inside img, .template-selector-inside dcc-button {
   display: block;
   margin-left: auto;
   margin-right: auto;
diff --git a/src/adonisjs/public/themes/zombie-antigo/css/templates.css b/src/adonisjs/public/themes/zombie-antigo/css/templates.css
index 12cd6aedc..3c3302469 100644
--- a/src/adonisjs/public/themes/zombie-antigo/css/templates.css
+++ b/src/adonisjs/public/themes/zombie-antigo/css/templates.css
@@ -5,7 +5,7 @@
 
 /* Trigger DCC */
 
-.dcc-trigger-theme {
+.dcc-button-theme {
    border: 1px solid lightgray;
    border-radius: 5px;
    margin: 5px;
@@ -15,7 +15,7 @@
    text-decoration: none;
    display: inline-block;
 }
-.dcc-trigger-theme:hover {
+.dcc-button-theme:hover {
    color: #ffff;
    font-weight: bold;
    cursor: pointer;
diff --git a/src/adonisjs/public/themes/zombie-antigo/notice.html b/src/adonisjs/public/themes/zombie-antigo/notice.html
index e6f81f572..4da920a18 100644
--- a/src/adonisjs/public/themes/zombie-antigo/notice.html
+++ b/src/adonisjs/public/themes/zombie-antigo/notice.html
@@ -4,7 +4,7 @@
 
     <div class="case_text">
     {knot}
-    <dcc-trigger action="previous-knot" label="Previous Knot"></dcc-trigger>
+    <dcc-button topic="previous-knot" label="Previous Knot"></dcc-button>
     </div>
     
   </div>
diff --git a/src/adonisjs/public/themes/minimal/css/dcc-trigger.css b/src/adonisjs/public/themes/zombie/css/dcc-button.css
similarity index 82%
rename from src/adonisjs/public/themes/minimal/css/dcc-trigger.css
rename to src/adonisjs/public/themes/zombie/css/dcc-button.css
index d1580755b..764caab02 100644
--- a/src/adonisjs/public/themes/minimal/css/dcc-trigger.css
+++ b/src/adonisjs/public/themes/zombie/css/dcc-button.css
@@ -2,7 +2,7 @@
 
 /* Trigger DCC */
 
-.dcc-trigger-theme {
+.dcc-button-theme {
    border: 1px solid lightgray;
    border-radius: 5px;
    margin: 5px;
@@ -12,12 +12,12 @@
    text-decoration: none;
    display: inline-block;
 }
-.dcc-trigger-theme:hover {
+.dcc-button-theme:hover {
    color: black;
    font-weight: bold;
    cursor: pointer;
 }
-.dcc-trigger-image-theme {
+.dcc-button-image-theme {
    max-width: 100%;
    max-height: 100%;
    cursor: pointer;
diff --git a/src/adonisjs/public/themes/zombie/local/note.js b/src/adonisjs/public/themes/zombie/local/note.js
index 40085deb8..aa6d575a2 100644
--- a/src/adonisjs/public/themes/zombie/local/note.js
+++ b/src/adonisjs/public/themes/zombie/local/note.js
@@ -2,7 +2,7 @@
   const localTheme = `
 <div class="styn-note">
    <div class="styn-control-button">
-      <dcc-trigger action="knot/</navigate" label="Previous Knot" image="../themes/minimal/images/icon-back.svg"></dcc-trigger>
+      <dcc-button topic="knot/</navigate" label="Previous Knot" image="../themes/minimal/images/icon-back.svg"></dcc-button>
    </div>
 
    <div class="styt-pul-main">{knot}</div>
diff --git a/src/adonisjs/public/themes/zombie/note.html b/src/adonisjs/public/themes/zombie/note.html
index c4db0dcc7..521031651 100644
--- a/src/adonisjs/public/themes/zombie/note.html
+++ b/src/adonisjs/public/themes/zombie/note.html
@@ -1,6 +1,6 @@
 <div class="styn-note">
    <div class="styn-control-button">
-      <dcc-trigger action="knot/</navigate" label="Previous Knot" image="../themes/minimal/images/icon-back.svg"></dcc-trigger>
+      <dcc-button topic="knot/</navigate" label="Previous Knot" image="../themes/minimal/images/icon-back.svg"></dcc-button>
    </div>
 
    <div class="styt-pul-main">{knot}</div>
diff --git a/src/adonisjs/public/translator/item-templates.js b/src/adonisjs/public/translator/item-templates.js
index daa2d11c1..68484976d 100644
--- a/src/adonisjs/public/translator/item-templates.js
+++ b/src/adonisjs/public/translator/item-templates.js
@@ -29,9 +29,9 @@
     image:
 '<img src=\'[path]\'[alt]>',
     option:
-'<dcc-trigger id=\'dcc[seq]\'[author] type=\'[subtype]\' action=\'[target]\' label=\'[display]\'[divert][message][image]></dcc-trigger>',
+'<dcc-button id=\'dcc[seq]\'[author] type=\'[subtype]\' topic=\'[target]\' label=\'[display]\'[divert][message][image]></dcc-button>',
     divert:
-'<dcc-trigger id=\'dcc[seq]\'[author] type=\'+\' action=\'[target]\' label=\'[display]\' divert=\'[divert]\'></dcc-trigger>',
+'<dcc-button id=\'dcc[seq]\'[author] type=\'+\' topic=\'[target]\' label=\'[display]\' divert=\'[divert]\'></dcc-button>',
     'divert-script':
 '-&gt; [target][parameter]<br>',
     entity:
diff --git a/src/adonisjs/public/translator/playground/editor.html b/src/adonisjs/public/translator/playground/editor.html
index f78d4a702..ff215f3d3 100644
--- a/src/adonisjs/public/translator/playground/editor.html
+++ b/src/adonisjs/public/translator/playground/editor.html
@@ -22,7 +22,7 @@
   <script src="../../dccs/components/dcc-base.js"></script>
   <script src="../../dccs/components/dcc-visual.js"></script>
   <script src="../../dccs/components/dcc-block.js"></script>
-  <script src="../../dccs/components/dcc-trigger.js"></script>
+  <script src="../../dccs/components/dcc-button.js"></script>
 
   <script src="../translator.js"></script>
   <script src="../item-templates.js"></script>
@@ -188,12 +188,12 @@ <h1>Quill Editor Playground</h1>
 
       <div class="container-fluid">
         <nav class="navbar navbar-light d-flex">
-          <dcc-trigger action="control/delta/example" label="DELTA" xstyle="in">
-          </dcc-trigger>
-          <dcc-trigger action="control/raw/example" label="RAW" xstyle="in">
-          </dcc-trigger>
-          <dcc-trigger action="control/clipboard/example" label="CLIPBOARD" xstyle="in">
-          </dcc-trigger>
+          <dcc-button topic="control/delta/example" label="DELTA" xstyle="in">
+          </dcc-button>
+          <dcc-button topic="control/raw/example" label="RAW" xstyle="in">
+          </dcc-button>
+          <dcc-button topic="control/clipboard/example" label="CLIPBOARD" xstyle="in">
+          </dcc-button>
         </nav>
       </div>
 
diff --git a/src/adonisjs/public/translator/playground/index-old.html b/src/adonisjs/public/translator/playground/index-old.html
index ff2b463a8..fdea381d0 100644
--- a/src/adonisjs/public/translator/playground/index-old.html
+++ b/src/adonisjs/public/translator/playground/index-old.html
@@ -25,7 +25,7 @@
   <script src="../../dccs/components/dcc-base.js"></script>
   <script src="../../dccs/components/dcc-visual.js"></script>
   <script src="../../dccs/components/dcc-block.js"></script>
-  <script src="../../dccs/components/dcc-trigger.js"></script>
+  <script src="../../dccs/components/dcc-button.js"></script>
 
   <script src="../translator.js"></script>
   <script src="../item-templates.js"></script>
@@ -83,8 +83,8 @@ <h1>Translator Playground</h1>
 
       <div class="container-fluid">
         <nav class="navbar navbar-light d-flex">
-          <dcc-trigger action="control/translate/example" label="TRANSLATE" xstyle="in">
-          </dcc-trigger>
+          <dcc-button topic="control/translate/example" label="TRANSLATE" xstyle="in">
+          </dcc-button>
         </nav>
       </div>
 
diff --git a/src/adonisjs/public/translator/playground/index.html b/src/adonisjs/public/translator/playground/index.html
index 24368c0b3..83e786e0e 100644
--- a/src/adonisjs/public/translator/playground/index.html
+++ b/src/adonisjs/public/translator/playground/index.html
@@ -32,7 +32,7 @@
    <script src="../../dccs/components/dcc-image.js"></script>
    <script src="../../dccs/components/dcc-expression.js"></script>
    <script src="../../dccs/components/dcc-block.js"></script>
-   <script src="../../dccs/components/dcc-trigger.js"></script>
+   <script src="../../dccs/components/dcc-button.js"></script>
    <script src="../../dccs/components/dcc-character.js"></script>
    <script src="../../dccs/components/dcc-lively-dialog.js"></script>
    <script src="../../dccs/components/dcc-notice-input.js"></script>
@@ -61,8 +61,8 @@
       <div class="container-fluid">
         <nav class="navbar navbar-light d-flex">
           <div class="d-flex col">
-             <dcc-trigger action="control/translate/example" label="TRANSLATE" xstyle="in">
-             </dcc-trigger>
+             <dcc-button topic="control/translate/example" label="TRANSLATE" xstyle="in">
+             </dcc-button>
           </div>
           <div class="d-flex col-10">
              <dcc-input-choice variable="output" exclusive xstyle="in">
diff --git a/src/adonisjs/public/translator/translator.js b/src/adonisjs/public/translator/translator.js
index afa2e2480..d645cab13 100644
--- a/src/adonisjs/public/translator/translator.js
+++ b/src/adonisjs/public/translator/translator.js
@@ -1559,7 +1559,7 @@ class Translator {
       .replace('[divert]',
         (obj.divert == null) ? '' : " divert='" + obj.divert + "'")
       .replace('[message]',
-        (obj.value == null) ? '' : " value='" + obj.value + "'")
+        (obj.message == null) ? '' : " message='" + obj.message + "'")
       .replace('[image]', optionalImage)
   }
 
diff --git a/src/adonisjs/resources/views/author/author.edge b/src/adonisjs/resources/views/author/author.edge
index 58851ca5d..34f7458f4 100644
--- a/src/adonisjs/resources/views/author/author.edge
+++ b/src/adonisjs/resources/views/author/author.edge
@@ -39,7 +39,7 @@
 <script src="{{ assetsUrl('dccs/components/dcc-image.js') }}"></script>
 <script src="{{ assetsUrl('dccs/components/dcc-expression.js') }}"></script>
 <script src="{{ assetsUrl('dccs/components/dcc-block.js') }}"></script>
-<script src="{{ assetsUrl('dccs/components/dcc-trigger.js') }}"></script>
+<script src="{{ assetsUrl('dccs/components/dcc-button.js') }}"></script>
 <script src="{{ assetsUrl('dccs/components/dcc-character.js') }}"></script>
 <script src="{{ assetsUrl('dccs/components/dcc-lively-dialog.js') }}"></script>
 <script src="{{ assetsUrl('dccs/components/dcc-notice-input.js') }}"></script>
@@ -94,8 +94,8 @@
             <li class="breadcrumb-item"><a href={{route('author_home')}}>Home</a></li>
             <li class="breadcrumb-item">
               <div style="height: 15px">
-                <dcc-trigger action="control/leave/drafts" label="Drafts" xstyle="out">
-                </dcc-trigger>
+                <dcc-button topic="control/leave/drafts" label="Drafts" xstyle="out">
+                </dcc-button>
               </div>
             </li>
             <li class="breadcrumb-item active" aria-current="page">Edit case</li>
@@ -117,7 +117,7 @@
         <nav class="navbar navbar-light">
           <div class="col-6">
             <button type="button" class="btn btn-secondary" id="btn-save-draft">Save</button>
-            <dcc-trigger action="control/case/save" location="btn-save-draft" label="SAVE" xstyle="out"></dcc-trigger>
+            <dcc-button topic="control/case/save" location="btn-save-draft" label="SAVE" xstyle="out"></dcc-button>
 
             <!-- Settings button activates a modal -->
             <button type="button" class="btn btn-secondary m-1" data-toggle="modal" data-target="#settings-modal">
@@ -126,7 +126,7 @@
             <span class="sty-message-space" id="message-space"></span>
 
             <div id="advanced-mode" style="display:none">
-              <dcc-trigger action="control/case/markdown" label="MARKDOWN" xstyle="in"></dcc-trigger>
+              <dcc-button topic="control/case/markdown" label="MARKDOWN" xstyle="in"></dcc-button>
             </div>
 
 
@@ -159,8 +159,8 @@
           <div class="w-75 d-flex" id="knot-main">
             <div id="navigator-expansion" class="sty-navigation-expansion">
                 <div id="navigation-set" class="sty-navigation-set">
-                  <dcc-trigger id="button-expand-nav" action="control/navigator/expand" label="Expand" image="/author/icons/icon-expansion-right.svg"></dcc-trigger>
-                  <dcc-trigger id="button-retract-nav" action="control/navigator/retract" label="Retract" image="/author/icons/icon-expansion-left.svg"></dcc-trigger>
+                  <dcc-button id="button-expand-nav" topic="control/navigator/expand" label="Expand" image="/author/icons/icon-expansion-right.svg"></dcc-button>
+                  <dcc-button id="button-retract-nav" topic="control/navigator/retract" label="Retract" image="/author/icons/icon-expansion-left.svg"></dcc-button>
                 </div>
             </div>
             <div class="w-100">
@@ -169,8 +169,8 @@
               </div>
             </div>
             <div id="properties-expansion" class="sty-navigation-expansion">
-                <dcc-trigger id="button-expand-prop" action="control/properties/expand" label="Expand" image="/author/icons/icon-expansion-left.svg"></dcc-trigger>
-                <dcc-trigger id="button-retract-prop" action="control/properties/retract" label="Retract" image="/author/icons/icon-expansion-right.svg" style="display:none"></dcc-trigger>
+                <dcc-button id="button-expand-prop" topic="control/properties/expand" label="Expand" image="/author/icons/icon-expansion-left.svg"></dcc-button>
+                <dcc-button id="button-retract-prop" topic="control/properties/retract" label="Retract" image="/author/icons/icon-expansion-right.svg" style="display:none"></dcc-button>
             </div>
           </div>
 
@@ -178,19 +178,19 @@
             <div id="elements-block" class="sty-elements-block" style="position:relative; display:none">
                <!--
                <div id="elements-panel" class="sty-control-panel std-border">
-                  <div class="control-button"><dcc-trigger action="control/element/text/new" label="Text" image="icons/icon-dcc-text.svg"></dcc-trigger></div>
-                  <div class="control-button"><dcc-trigger action="control/element/image/new" label="Text" image="icons/icon-dcc-image.svg"></dcc-trigger></div>
-                  <div class="control-button"><dcc-trigger action="control/element/option/new" label="Text" image="icons/icon-dcc-trigger.svg"></dcc-trigger></div>
+                  <div class="control-button"><dcc-button topic="control/element/text/new" label="Text" image="icons/icon-dcc-text.svg"></dcc-button></div>
+                  <div class="control-button"><dcc-button topic="control/element/image/new" label="Text" image="icons/icon-dcc-image.svg"></dcc-button></div>
+                  <div class="control-button"><dcc-button topic="control/element/option/new" label="Text" image="icons/icon-dcc-button.svg"></dcc-button></div>
                </div>
              -->
                <div id="properties-block" class="sty-properties-block std-border">
                   <div id="properties-panel" class="styp-properties-panel"></div>
                   <div id="properties-buttons">
-                     <dcc-trigger xstyle="in" action="properties/apply/details" label="APPLY"></dcc-trigger>
+                     <dcc-button xstyle="in" topic="properties/apply/details" label="APPLY"></dcc-button>
                      <!--
-                     <div class="control-button"><dcc-trigger xstyle="in" action="control/element/selected/up" label="Element Up" image="icons/icon-move-up.svg"></dcc-trigger></div>
-                     <div class="control-button"><dcc-trigger xstyle="in" action="control/element/selected/down" label="Element Down" image="icons/icon-move-down.svg"></dcc-trigger></div>
-                     <div class="control-button"><dcc-trigger xstyle="in" action="control/element/selected/delete" label="Delete Element" image="icons/icon-delete.svg"></dcc-trigger></div>
+                     <div class="control-button"><dcc-button xstyle="in" topic="control/element/selected/up" label="Element Up" image="icons/icon-move-up.svg"></dcc-button></div>
+                     <div class="control-button"><dcc-button xstyle="in" topic="control/element/selected/down" label="Element Down" image="icons/icon-move-down.svg"></dcc-button></div>
+                     <div class="control-button"><dcc-button xstyle="in" topic="control/element/selected/delete" label="Delete Element" image="icons/icon-delete.svg"></dcc-button></div>
                    -->
                   </div>
                </div>
diff --git a/src/adonisjs/resources/views/layout/partials/settings-modal.edge b/src/adonisjs/resources/views/layout/partials/settings-modal.edge
index b3d3fac52..0f8f159ca 100644
--- a/src/adonisjs/resources/views/layout/partials/settings-modal.edge
+++ b/src/adonisjs/resources/views/layout/partials/settings-modal.edge
@@ -51,7 +51,7 @@
 
           <input type="hidden" id="source" name="source">
           <button type="button" class="btn btn-secondary" id="btn-save-settings" data-toggle="modal" data-target="#settings-modal" >Save</button>
-          <dcc-trigger action="control/case/save" label="SAVE" location="btn-save-settings" xstyle="out"></dcc-trigger>
+          <dcc-button topic="control/case/save" label="SAVE" location="btn-save-settings" xstyle="out"></dcc-button>
 
           <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Cancel</button>
         </form>
diff --git a/src/adonisjs/resources/views/player/player.edge b/src/adonisjs/resources/views/player/player.edge
index c91151345..ba04479d4 100644
--- a/src/adonisjs/resources/views/player/player.edge
+++ b/src/adonisjs/resources/views/player/player.edge
@@ -19,7 +19,7 @@
    <script src="{{ assetsUrl('dccs/components/dcc-annotation.js') }}"></script>
    <script src="{{ assetsUrl('dccs/components/dcc-expression.js') }}"></script>
    <script src="{{ assetsUrl('dccs/components/dcc-block.js') }}"></script>
-   <script src="{{ assetsUrl('dccs/components/dcc-trigger.js') }}"></script>
+   <script src="{{ assetsUrl('dccs/components/dcc-button.js') }}"></script>
    <script src="{{ assetsUrl('dccs/components/dcc-character.js') }}"></script>
    <script src="{{ assetsUrl('dccs/components/dcc-lively-dialog.js') }}"></script>
    <script src="{{ assetsUrl('dccs/components/dcc-notice-input.js') }}"></script>

From 0424c2b23c9c1bd0e622dd89dc1dee7ded865c53 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Santanch=C3=A8?= <santanche@gmail.com>
Date: Mon, 7 Sep 2020 12:56:30 -0300
Subject: [PATCH 2/2] feat (theme): note themes configuration

via json
---
 .../public/dccs/components/dcc-button.js       | 13 +++----------
 src/adonisjs/public/player/js/player.js        | 10 ++++++++--
 src/adonisjs/public/player/js/state.js         | 18 +++++++++++++++++-
 .../templates/simple/case/quiz_sequence.md     |  2 +-
 .../public/templates/simple/case/quiz_short.md | 10 +++++-----
 .../public/themes/simple/note_references.html  | 12 ++++++++++++
 src/adonisjs/public/themes/simple/theme.json   |  4 +++-
 src/adonisjs/public/translator/translator.js   |  4 ++++
 8 files changed, 53 insertions(+), 20 deletions(-)
 create mode 100644 src/adonisjs/public/themes/simple/note_references.html

diff --git a/src/adonisjs/public/dccs/components/dcc-button.js b/src/adonisjs/public/dccs/components/dcc-button.js
index adb55974b..27913aeee 100644
--- a/src/adonisjs/public/dccs/components/dcc-button.js
+++ b/src/adonisjs/public/dccs/components/dcc-button.js
@@ -133,25 +133,18 @@ class DCCButton extends DCCBlock {
 
   _computeTrigger () {
     if (this._active) {
+      let message = { sourceType: DCCButton.elementTag }
       if (this.hasAttribute('variable')) {
         const v = (this.variable.includes(':'))
           ? this.variable.substring(0, this.variable.indexOf(':')) : this.variable
-        console.log('=== trigger variable')
-        console.log('var/' + v + '/changed')
-        console.log((this.variable.endsWith(':label')) ? this.label : this.message)
-        MessageBus.ext.publish('var/' + v + '/changed',
-        {
-          sourceType: DCCButton.elementTag,
-          value: (this.variable.endsWith(':label')) ? this.label : this.message
-        })
+        message.value = (this.variable.endsWith(':label')) ? this.label : this.message
+        MessageBus.ext.publish('var/' + v + '/changed', message)
       }
       if (this.hasAttribute('label') || this.hasAttribute('topic')) {
         if (this.hasAttribute('topic') && this.topic.endsWith('/navigate')) { this._active = false }
         const topic = (this.hasAttribute('topic'))
           ? this.topic : 'button/' + this.label + '/clicked'
-        const message = {}
         if (this.hasAttribute('message')) { message.value = this.message }
-
         MessageBus.ext.publish(topic, message)
       }
     }
diff --git a/src/adonisjs/public/player/js/player.js b/src/adonisjs/public/player/js/player.js
index f02b1f5b6..e6206ac5f 100644
--- a/src/adonisjs/public/player/js/player.js
+++ b/src/adonisjs/public/player/js/player.js
@@ -337,8 +337,14 @@ class PlayerManager {
              this._knots[knotName].categories.includes('script')) { MetaPlayer.player.play(this._knots[knotName], this._state) } else {
         const knot = await Translator.instance.generateHTML(
           this._knots[knotName])
-        if (this._knots[knotName].categories &&
-                this._knots[knotName].categories.includes('note')) { this.presentNote(knot) } else { this.presentKnot(knot) }
+        console.log('=== theme settings')
+        console.log(Translator.instance.themeSettings.note)
+        let note = false
+        if (this._knots[knotName].categories && Translator.instance.themeSettings &&
+            Translator.instance.themeSettings.note)
+          note = this._knots[knotName].categories.find(
+            cat => Translator.instance.themeSettings.note.includes(cat))
+        if (note) { this.presentNote(knot) } else { this.presentKnot(knot) }
       }
     }
     MessageBus.ext.publish('knot/' + knotName + '/start')
diff --git a/src/adonisjs/public/player/js/state.js b/src/adonisjs/public/player/js/state.js
index 8954c16b7..6772e7ecb 100644
--- a/src/adonisjs/public/player/js/state.js
+++ b/src/adonisjs/public/player/js/state.js
@@ -124,20 +124,31 @@ class PlayState {
   variableGet (topic, message) {
     let id = MessageBus.extractLevel(topic, 2)
 
+    /*
     console.log('=== variable request')
     console.log(id)
 
     console.log('=== variables')
     console.log(this._state.variables)
+    */
+
+
+    if (id.startsWith('Previous.')) {
+      const previousKnot = this.historyPreviousId()
+      if (previousKnot != null) { id = previousKnot + '.' + id.substring(9) }
+    }
 
     // tries to give a scope to the variable
     if (id != null && this._state.variables[id] == null) {
       const currentKnot = this.historyCurrent()
       if (currentKnot != null &&
-             this._state.variables[currentKnot + '.' + id] != null) { id = currentKnot + '.' + id }
+          this._state.variables[currentKnot + '.' + id] != null) { id = currentKnot + '.' + id }
     }
 
     if (id != null) {
+      console.log('=== variable get')
+      console.log(id)
+      console.log(this._state.variables[id])
       MessageBus.ext.publish(MessageBus.buildResponseTopic(topic, message),
         this._state.variables[id])
     }
@@ -173,6 +184,11 @@ class PlayState {
     return (this._state.history.length > 1)
   }
 
+  historyPreviousId() {
+    return (this.historyHasPrevious())
+      ? this._state.history[this._state.history.length - 2] : null;
+  }
+
   historyCurrent () {
     let current = null
     if (this._state.history.length > 0) { current = this._state.history[this._state.history.length - 1] }
diff --git a/src/adonisjs/public/templates/simple/case/quiz_sequence.md b/src/adonisjs/public/templates/simple/case/quiz_sequence.md
index c56c76360..26ef80e40 100644
--- a/src/adonisjs/public/templates/simple/case/quiz_sequence.md
+++ b/src/adonisjs/public/templates/simple/case/quiz_sequence.md
@@ -36,7 +36,7 @@ Write here the **feedback**.
 
 # Note (note)
 
-**You answered:** ^Presentation.input1^.
+**You answered:** ^Previous.input1^.
 <br>
 ^parameter^
 
diff --git a/src/adonisjs/public/templates/simple/case/quiz_short.md b/src/adonisjs/public/templates/simple/case/quiz_short.md
index 47c02f94c..726b793cc 100644
--- a/src/adonisjs/public/templates/simple/case/quiz_short.md
+++ b/src/adonisjs/public/templates/simple/case/quiz_short.md
@@ -3,28 +3,28 @@
 Write here the **stem** of your quiz.
 
 > Write here the **lead-in** of your quiz.
-+ Answer-key <-> "Feedback for Answer-key"
++ Answer-key <-> Presentation References "Feedback for Answer-key"
 + Distractor 1 <-> "Feedback for Distractor 1"
 + Distractor 2 <-> "Feedback for Distractor 2"
 + Distractor 3 <-> "Feedback for Distractor 3"
 
 * Next Case -> Case.Next
 
-# Presentation Note (note)
+# Note (note)
 
-**You answered:** ^Presentation.input1^.
+**You answered:** ^Previous.input1^.
 <br>
 ^parameter^
 
 # Presentation References (note)
 
-**You answered:** ^Presentation.input1^.
+**You answered:** ^Previous.input1^.
 <br>
 ^parameter^
 
 References <-> References
 
-# References (note)
+# References (note_references)
 
 * [Enter References](References)
 
diff --git a/src/adonisjs/public/themes/simple/note_references.html b/src/adonisjs/public/themes/simple/note_references.html
new file mode 100644
index 000000000..92504cf07
--- /dev/null
+++ b/src/adonisjs/public/themes/simple/note_references.html
@@ -0,0 +1,12 @@
+<div class="styt-main-frame">
+   <div class="styt-main">
+      <div id="knot-wrapper" class="styt-main-text">
+         <dcc-styler xstyle="theme" distribution="generic">
+            {knot}
+         </dcc-styler>
+      </div>
+   </div>
+</div>
+<div class="styt-button-frame">
+   <dcc-button xstyle="theme" topic="knot/</navigate" label="Return"></dcc-button>
+</div>
\ No newline at end of file
diff --git a/src/adonisjs/public/themes/simple/theme.json b/src/adonisjs/public/themes/simple/theme.json
index 9e26dfeeb..08a3b584d 100644
--- a/src/adonisjs/public/themes/simple/theme.json
+++ b/src/adonisjs/public/themes/simple/theme.json
@@ -1 +1,3 @@
-{}
\ No newline at end of file
+{
+  "note": ["note", "note_references"]
+}
\ No newline at end of file
diff --git a/src/adonisjs/public/translator/translator.js b/src/adonisjs/public/translator/translator.js
index d645cab13..7e1aeeb6f 100644
--- a/src/adonisjs/public/translator/translator.js
+++ b/src/adonisjs/public/translator/translator.js
@@ -26,6 +26,10 @@ class Translator {
     return (this.authoringRender) ? ' author' : ''
   }
 
+  get themeSettings () {
+    return this._themeSettings;
+  }
+
   _authorAttrSub (superseq) {
     return (this.authoringRender && superseq == -1) ? ' author' : ''
   }