fix: typing

src/client/types/actions.type-renderer.jsx

@@ -3,9 +3,8 @@ import contempo from 'contempo';
 import PropTypes from 'prop-types';
 import React from 'react';
 
-import Value from '~/client/value';
-
 import propTypes from './prop-types';
+import Traversal from './traversal.type-renderer';
 
 const decorate = compose(
   contempo(require('./actions.raw.scss')),
@@ -24,7 +23,12 @@ const Actions = ({
             (traversal, i) => (
               // eslint-disable-next-line react/no-array-index-key
               <li key={i}>
-                <Value.Component context={context} onChange={onChange} value={traversal} />
+                <Traversal.Component
+                  context={context}
+                  onChange={onChange}
+                  type="any"
+                  value={traversal}
+                />
               </li>
             ),
           )

src/client/types/condition.type-renderer.jsx

@@ -59,6 +59,9 @@ const Condition = ({
             case '>=':
             case '<':
             case '<=': {
+              const operandType = -1 === ['>', '>=', '<', '<='].indexOf(value.operator)
+                ? 'any'
+                : 'number';
               return value.operands.slice(1).reduce(
                 (r, operand, i) => {
                   const opOnChange = makeOnChange(i);
@@ -77,6 +80,7 @@ const Condition = ({
                         <Value.Component
                           context={context}
                           onChange={opOnChange}
+                          type={operandType}
                           value={operand}
                         />
                       </span>
@@ -88,6 +92,7 @@ const Condition = ({
                     <Value.Component
                       context={context}
                       onChange={makeOnChange(0)}
+                      type={operandType}
                       value={value.operands[0]}
                     />
                   </span>

src/client/types/traversal.type-renderer.jsx

@@ -5,7 +5,7 @@ import React from 'react';
 import Value from '~/client/value';
 
 import propTypes from './prop-types';
-import {stepOptions, typeFromSteps} from './typing';
+import {descriptionFromSteps, stepOptions, typeFromSteps} from './typing';
 
 const decorate = compose(
   contempo(require('./traversal.raw.scss')),
@@ -15,9 +15,10 @@ const Traversal = (props) => {
   const {
     context,
     onChange = () => {},
+    type,
     value: {steps, value},
   } = props;
-  const stepsType = typeFromSteps(context, steps);
+  const stepsType = type || typeFromSteps(context, steps);
   return (
     <div className="traversal">
       {steps.map((step, i) => (
@@ -40,17 +41,19 @@ const Traversal = (props) => {
                     </span>
                   );
                 }
-                case 'invoke':
+                case 'invoke': {
+                  const description = descriptionFromSteps(context, steps.slice(0, i + 1));
                   return (
                     <div className="invoke">
                       <span className="paren open">(</span>
-                      {step.args.map((arg) => (
+                      {step.args.map((arg, j) => (
                         <div className="arg" key={JSON.stringify(arg)}>
                           <label>
                             {arg.label}
                             <Value.Component
                               context={context}
                               onChange={onChange}
+                              type={description.args[j][1].type}
                               value={arg}
                             />
                           </label>
@@ -59,6 +62,7 @@ const Traversal = (props) => {
                       <span className="paren close">)</span>
                     </div>
                   );
+                }
                 default:
                   return null;
               }

src/client/types/typing.js

@@ -58,12 +58,19 @@ const stepTo = ([variable, type], step) => {
   return [variable, type];
 };
 
+const fakeContextDescription = (context) => {
+  return Object.entries(context.all())
+    .reduce((r, [key, tuple]) => ({...r, [key]: {type: tuple[1]}}), {});
+};
+
 export function descriptionFromSteps(context, steps) {
   if (!steps || 0 === steps.length) {
-    return {};
+    return fakeContextDescription(context);
   }
-  const [variable, type] = steps.slice(1).reduce(stepTo, context.get(steps[0].key));
-  return Context.typeDescription(type, variable);
+  const max = Math.max(0, steps.length - 2);
+  const [variable, type] = steps.slice(0, max).reduce(stepTo, context.get(steps[0].key));
+  const description = Context.typeDescription(type, variable);
+  return 0 === max ? description : description[steps[max].key];
 }
 
 export function typeFits(reference, candidate) {
@@ -73,8 +80,7 @@ export function typeFits(reference, candidate) {
 export function stepOptions(context, steps, i, type) {
   let description;
   if (0 === i) {
-    description = Object.entries(context.all())
-      .reduce((r, [key, tuple]) => ({...r, [key]: {type: tuple[1]}}), {});
+    description = descriptionFromSteps(context, []);
   }
   else {
     description = descriptionFromSteps(context, steps.slice(0, i));

src/client/value.jsx

@@ -28,7 +28,7 @@ const Value = ({
   else {
     type = 'undefined' !== typeof fromValue ? fromValue : typeFromLiteral(value);
   }
-  const Component = typeRenderers[type];
+  const Component = typeRenderers[fromValue || type];
   return (
     <span className="value">
       {