clientIO
diff --git a/‎demo/sequence/index.html
Lines changed: 23 additions & 0 deletions b/‎demo/sequence/index.html
Lines changed: 23 additions & 0 deletions
diff --git a/‎demo/sequence/src/joint.shapes.sd.js
Lines changed: 30 additions & 0 deletions b/‎demo/sequence/src/joint.shapes.sd.js
Lines changed: 30 additions & 0 deletions
@@ -6,6 +6,29 @@
         <title>Sequence Diagram</title>
 
         <link rel="stylesheet" type="text/css" href="../../build/joint.css" />
+        <style>
+            .available-cell.joint-type-sd-message [joint-selector="wrapper"] {
+                stroke-width: 26;
+            }
+            .available-cell.joint-type-sd-lifeline [joint-selector="wrapper"] {
+                stroke-width: 100;
+            }
+            .available-cell [joint-selector="line"] {
+                stroke: #08BC8A;
+                stroke-width: 5;
+                stroke-dasharray: none;
+            }
+
+            .available-cell.highlighted-connecting [joint-selector="wrapper"] {
+                stroke: #08BC8A;
+                stroke-opacity: 0.2;
+                stroke-linecap: butt;
+            }
+
+            .joint-tool[data-tool-name="hover-connect"] circle {
+                fill: #4666E5;
+            }
+        </style>
     </head>
     <body>
 
 
@@ -10,9 +10,24 @@
                 stroke: '#DDDDDD',
                 strokeWidth: 1,
                 fill: '#F9FBFA'
+            },
+            label: {
+                refY: null,
+                refX: null,
+                y: 'calc(h+2)',
+                x: 'calc(w/2)',
+                textAnchor: 'middle',
+                textVerticalAnchor: 'top',
+                fontSize: 12,
+                fontFamily: 'sans-serif',
+                textWrap: {
+                    width: -10
+                }
             }
         }
     }, {
+        placeholder: 'What\'s the group\'s name?',
+
         fitRoles: function() {
             this.fitEmbeds({ padding: 10 });
         }
@@ -37,6 +52,8 @@
             }
         }
     }, {
+        placeholder: 'What\'s the role?',
+
         setName: function(name) {
             this.attr(['label', 'text'], name);
         }
@@ -71,6 +88,9 @@
                 stroke: '#222222',
                 strokeWidth: 2
             },
+            wrapper: {
+                connection: true
+            },
             icon: {
                 atConnectionRatioIgnoreGradient: 0.5
             }
@@ -83,6 +103,14 @@
                 'fill': 'none',
                 'pointer-events': 'none'
             }
+        }, {
+            tagName: 'path',
+            selector: 'wrapper',
+            attributes: {
+                'fill': 'none',
+                'stroke': 'transparent',
+                'stroke-width': 20
+            }
         }, {
             tagName: 'g',
             selector: 'icon',
@@ -127,6 +155,8 @@
             },
         }
     }, {
+        placeholder: 'What\'s the message?',
+
         defaultLabel: {
             markup: [{
                 tagName: 'rect',