refactor: rendering

src/client/components/properties/actions.jsx

@@ -1,4 +1,5 @@
 import {compose} from '@avocado/core';
+import classnames from 'classnames';
 import contempo from 'contempo';
 import PropTypes from 'prop-types';
 import React from 'react';
@@ -12,10 +13,36 @@ const reduceStep = (r, step) => {
     case 'invoke':
       return (
         <span className="step">
-          <span className="invocation">{r}</span>
+          <span className="invocation"><input value={r} /></span>
           <span className="paren open">(</span>
           <div className="args">
-            {step.args.map(renderValue).map((element) => <div className="arg">{element}</div>)}
+            {
+              step.args.length > 0 && (
+                step.args.slice(1).map(renderValue).reduce(
+                  (r2, element, i) => (
+                    <>
+                      {r2}
+                      <div
+                        className={classnames(
+                          'arg',
+                          step.args[i + 1].type,
+                        )}
+                      >
+                        {element}
+                      </div>
+                    </>
+                  ),
+                  <div
+                    className={classnames(
+                      'arg',
+                      step.args[0].type,
+                    )}
+                  >
+                    {renderValue(step.args[0])}
+                  </div>,
+                )
+              )
+            }
           </div>
           <span className="paren close">)</span>
         </span>
@@ -41,7 +68,27 @@ const renderValue = (value) => {
       );
     }
     case 'literal':
-      return <input value={value.value} />;
+      if (
+        null === value.value
+        || 'string' === typeof value.value
+        || 'number' === typeof value.value
+      ) {
+        return <span className="wrapper"><input value={value.value} /></span>;
+      }
+      return (
+        <>
+          <div className="object">
+            <span className="bracket open">{'{'}</span>
+            <pre contentEditable>
+              <code>
+                {'  '}
+                {JSON.stringify(value.value, null, 2).slice(1).slice(0, -1).trim('\n')}
+              </code>
+            </pre>
+            <span className="bracket close">{'}'}</span>
+          </div>
+        </>
+      );
     default:
       return null;
   }

src/client/components/properties/actions.raw.scss

@@ -1,3 +1,28 @@
 .args {
   margin-left: 2em;
 }
+
+.arg {
+  margin-top: 0.125em;
+  > :first-child::after {
+    color: #999999;
+    content: ', ';
+  }
+}
+
+.bracket, .paren {
+  color: #999999;
+}
+
+.object {
+  background-color: #333333;
+  border: 1px solid black;
+  padding: 0.25em;
+}
+
+li {
+  margin-bottom: 0.5em;
+  &:last-child {
+    margin-bottom: 0;
+  }
+}

src/client/components/properties/condition.raw.scss

@@ -1,10 +1,7 @@
 .condition {
-  // flex-grow: 1;
   display: flex;
   justify-content: flex-end;
   align-items: center;
-  border: 1px solid rgba(0, 0, 0, 0.2);
-  padding: 0.25em;
 }
 
 .operator {