diff --git a/package-lock.json b/package-lock.json
index 17d9a441..de1a2924 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -28,7 +28,7 @@
         "cross-fetch": "^4.1.0",
         "css-loader": "^3.6.0",
         "csurf": "^1.11.0",
-        "d3": "^3.5.17",
+        "d3": "^4.13.00",
         "d3-tip": "github:sorawee/d3-tip",
         "dotenv": "^2.0.0",
         "es6-shim": "0.35.0",
@@ -55,7 +55,7 @@
         "node-uuid": "^1.4.8",
         "popper.js": "^1.16.1",
         "pyret-codemirror-mode": "github:brownplt/pyret-codemirror-mode#master",
-        "pyret-lang": "git://github.com/brownplt/pyret-lang.git#horizon",
+        "pyret-lang": "github:brownplt/pyret-lang#cnd-staging",
         "q": "~1.4.1",
         "react": "^15.7.0",
         "react-dom": "^15.7.0",
@@ -10956,10 +10956,42 @@
       }
     },
     "node_modules/d3": {
-      "version": "3.5.17",
-      "resolved": "https://registry.npmjs.org/d3/-/d3-3.5.17.tgz",
-      "integrity": "sha512-yFk/2idb8OHPKkbAL8QaOaqENNoMhIaSHZerk3oQsECwkObkCpJyjYwCe+OHiq6UEdhe1m8ZGARRRO3ljFjlKg==",
-      "license": "BSD-3-Clause"
+      "version": "4.13.0",
+      "resolved": "https://registry.npmjs.org/d3/-/d3-4.13.0.tgz",
+      "integrity": "sha512-l8c4+0SldjVKLaE2WG++EQlqD7mh/dmQjvi2L2lKPadAVC+TbJC4ci7Uk9bRi+To0+ansgsS0iWfPjD7DBy+FQ==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "d3-array": "1.2.1",
+        "d3-axis": "1.0.8",
+        "d3-brush": "1.0.4",
+        "d3-chord": "1.0.4",
+        "d3-collection": "1.0.4",
+        "d3-color": "1.0.3",
+        "d3-dispatch": "1.0.3",
+        "d3-drag": "1.2.1",
+        "d3-dsv": "1.0.8",
+        "d3-ease": "1.0.3",
+        "d3-force": "1.1.0",
+        "d3-format": "1.2.2",
+        "d3-geo": "1.9.1",
+        "d3-hierarchy": "1.1.5",
+        "d3-interpolate": "1.1.6",
+        "d3-path": "1.0.5",
+        "d3-polygon": "1.0.3",
+        "d3-quadtree": "1.0.3",
+        "d3-queue": "3.0.7",
+        "d3-random": "1.1.0",
+        "d3-request": "1.0.6",
+        "d3-scale": "1.0.7",
+        "d3-selection": "1.3.0",
+        "d3-shape": "1.2.0",
+        "d3-time": "1.0.8",
+        "d3-time-format": "2.1.1",
+        "d3-timer": "1.0.7",
+        "d3-transition": "1.1.1",
+        "d3-voronoi": "1.1.2",
+        "d3-zoom": "1.7.1"
+      }
     },
     "node_modules/d3-array": {
       "version": "3.2.4",
@@ -10973,6 +11005,74 @@
         "node": ">=12"
       }
     },
+    "node_modules/d3-axis": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/d3-axis/-/d3-axis-1.0.8.tgz",
+      "integrity": "sha512-K0djTb26iQ6AsuD2d6Ka08wBHf4V30awIxV4XFuB/iLzYtTqqJlE/nIN0DBJJCX7lbOqbt2/oeX3r+sU5k2veg==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/d3-brush": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/d3-brush/-/d3-brush-1.0.4.tgz",
+      "integrity": "sha512-nUFueDzOlvwFvuOBynGSyJM7Wt1H9fKgJeoWFSg3ScS4c7FJBch92FKUJKum4xtgPYHdgH2C3bRg3GzSVltCJQ==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "d3-dispatch": "1",
+        "d3-drag": "1",
+        "d3-interpolate": "1",
+        "d3-selection": "1",
+        "d3-transition": "1"
+      }
+    },
+    "node_modules/d3-brush/node_modules/d3-color": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-1.4.1.tgz",
+      "integrity": "sha512-p2sTHSLCJI2QKunbGb7ocOh7DgTAn8IrLx21QRc/BSnodXM4sv6aLQlnfpvehFMLZEfBc6g9pH9SWQccFYfJ9Q==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/d3-brush/node_modules/d3-dispatch": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-1.0.6.tgz",
+      "integrity": "sha512-fVjoElzjhCEy+Hbn8KygnmMS7Or0a9sI2UzGwoB7cCtvI1XpVN9GpoYlnb3xt2YV66oXYb1fLJ8GMvP4hdU1RA==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/d3-brush/node_modules/d3-interpolate": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-1.4.0.tgz",
+      "integrity": "sha512-V9znK0zc3jOPV4VD2zZn0sDhZU3WAE2bmlxdIwwQPPzPjvyLkd8B3JUVdS1IDUFDkWZ72c9qnv1GK2ZagTZ8EA==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "d3-color": "1"
+      }
+    },
+    "node_modules/d3-chord": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/d3-chord/-/d3-chord-1.0.4.tgz",
+      "integrity": "sha512-o0ExexkK1N0KikUakKrQwttP5Flu8AYD6iBUh3AdPJqnTh6xlvcX5wFRuuo29sLOAr9+T4yZPUH1S3CCQJ1SlQ==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "d3-array": "1",
+        "d3-path": "1"
+      }
+    },
+    "node_modules/d3-chord/node_modules/d3-array": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-1.2.4.tgz",
+      "integrity": "sha512-KHW6M86R+FUPYGb3R5XiYjXPq7VzwxZ22buHhAEVG5ztoEcZZMLov530mmccaqA1GghZArjQV46fuc8kUqhhHw==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/d3-chord/node_modules/d3-path": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-1.0.9.tgz",
+      "integrity": "sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/d3-collection": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/d3-collection/-/d3-collection-1.0.4.tgz",
+      "integrity": "sha512-+TPxaBFzbzfpLF3Hjz8JPeuStNmJnyWAufu8VUfpDCDn5RieIgY+OQDjhKMDorf2naLgAjjZXLUQN7XFp/kgog==",
+      "license": "BSD-3-Clause"
+    },
     "node_modules/d3-color": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
@@ -11003,6 +11103,22 @@
         "node": ">=12"
       }
     },
+    "node_modules/d3-drag": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/d3-drag/-/d3-drag-1.2.1.tgz",
+      "integrity": "sha512-Cg8/K2rTtzxzrb0fmnYOUeZHvwa4PHzwXOLZZPwtEs2SKLLKLXeYwZKBB+DlOxUvFmarOnmt//cU4+3US2lyyQ==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "d3-dispatch": "1",
+        "d3-selection": "1"
+      }
+    },
+    "node_modules/d3-drag/node_modules/d3-dispatch": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-1.0.6.tgz",
+      "integrity": "sha512-fVjoElzjhCEy+Hbn8KygnmMS7Or0a9sI2UzGwoB7cCtvI1XpVN9GpoYlnb3xt2YV66oXYb1fLJ8GMvP4hdU1RA==",
+      "license": "BSD-3-Clause"
+    },
     "node_modules/d3-dsv": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/d3-dsv/-/d3-dsv-3.0.1.tgz",
@@ -11049,6 +11165,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/d3-ease": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-1.0.3.tgz",
+      "integrity": "sha512-io3QwOJwVPAxRF2UXpKpCdz2wm/7VLFCQQ1yy+GzX6YCtt3vi2BGnimI8agSF5jyUrHsADyF303d2S+ps7zU8w==",
+      "license": "BSD-3-Clause"
+    },
     "node_modules/d3-force": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/d3-force/-/d3-force-3.0.0.tgz",
@@ -11144,6 +11266,12 @@
         "node": ">=12"
       }
     },
+    "node_modules/d3-polygon": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/d3-polygon/-/d3-polygon-1.0.3.tgz",
+      "integrity": "sha512-2zP7GOvf4XOWTeQouK7fCO534yQxyhYYTw6GTqcXifIalHgA6qV/es+4GRQii9m6XxEPFcht4loobD/o2iEo1A==",
+      "license": "BSD-3-Clause"
+    },
     "node_modules/d3-quadtree": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/d3-quadtree/-/d3-quadtree-3.0.1.tgz",
@@ -11153,6 +11281,58 @@
         "node": ">=12"
       }
     },
+    "node_modules/d3-queue": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/d3-queue/-/d3-queue-3.0.7.tgz",
+      "integrity": "sha512-2rs+6pNFKkrJhqe1rg5znw7dKJ7KZr62j9aLZfhondkrnz6U7VRmJj1UGcbD8MRc46c7H8m4SWhab8EalBQrkw==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/d3-random": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/d3-random/-/d3-random-1.1.0.tgz",
+      "integrity": "sha512-XuMbjx3Jq4EWfJP4g6nR7zns/bZfaVbWHWfR8auDkEiWCzVbWifmasfszV1ZRN3xXK3nY4RUFL2nTIhceGZSFQ==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/d3-request": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/d3-request/-/d3-request-1.0.6.tgz",
+      "integrity": "sha512-FJj8ySY6GYuAJHZMaCQ83xEYE4KbkPkmxZ3Hu6zA1xxG2GD+z6P+Lyp+zjdsHf0xEbp2xcluDI50rCS855EQ6w==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "d3-collection": "1",
+        "d3-dispatch": "1",
+        "d3-dsv": "1",
+        "xmlhttprequest": "1"
+      }
+    },
+    "node_modules/d3-request/node_modules/d3-dispatch": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-1.0.6.tgz",
+      "integrity": "sha512-fVjoElzjhCEy+Hbn8KygnmMS7Or0a9sI2UzGwoB7cCtvI1XpVN9GpoYlnb3xt2YV66oXYb1fLJ8GMvP4hdU1RA==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/d3-request/node_modules/d3-dsv": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/d3-dsv/-/d3-dsv-1.2.0.tgz",
+      "integrity": "sha512-9yVlqvZcSOMhCYzniHE7EVUws7Fa1zgw+/EAV2BxJoG3ME19V6BQFBwI855XQDsxyOuG7NibqRMTtiF/Qup46g==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "commander": "2",
+        "iconv-lite": "0.4",
+        "rw": "1"
+      },
+      "bin": {
+        "csv2json": "bin/dsv2json",
+        "csv2tsv": "bin/dsv2dsv",
+        "dsv2dsv": "bin/dsv2dsv",
+        "dsv2json": "bin/dsv2json",
+        "json2csv": "bin/json2dsv",
+        "json2dsv": "bin/json2dsv",
+        "json2tsv": "bin/json2dsv",
+        "tsv2csv": "bin/dsv2dsv",
+        "tsv2json": "bin/dsv2json"
+      }
+    },
     "node_modules/d3-scale": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
@@ -11182,6 +11362,12 @@
         "node": ">=12"
       }
     },
+    "node_modules/d3-selection": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-1.3.0.tgz",
+      "integrity": "sha512-qgpUOg9tl5CirdqESUAu0t9MU/t3O9klYfGfyKsXEmhyxyzLpzpeh08gaxBUTQw1uXIOkr/30Ut2YRjSSxlmHA==",
+      "license": "BSD-3-Clause"
+    },
     "node_modules/d3-shape": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.2.0.tgz",
@@ -11232,6 +11418,226 @@
       "resolved": "git+ssh://git@github.com/sorawee/d3-tip.git#b2dcaa106ccd189e60388c6030c6b2f713959448",
       "license": "MIT"
     },
+    "node_modules/d3-transition": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-1.1.1.tgz",
+      "integrity": "sha512-xeg8oggyQ+y5eb4J13iDgKIjUcEfIOZs2BqV/eEmXm2twx80wTzJ4tB4vaZ5BKfz7XsI/DFmQL5me6O27/5ykQ==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "d3-color": "1",
+        "d3-dispatch": "1",
+        "d3-ease": "1",
+        "d3-interpolate": "1",
+        "d3-selection": "^1.1.0",
+        "d3-timer": "1"
+      }
+    },
+    "node_modules/d3-transition/node_modules/d3-color": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-1.4.1.tgz",
+      "integrity": "sha512-p2sTHSLCJI2QKunbGb7ocOh7DgTAn8IrLx21QRc/BSnodXM4sv6aLQlnfpvehFMLZEfBc6g9pH9SWQccFYfJ9Q==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/d3-transition/node_modules/d3-dispatch": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-1.0.6.tgz",
+      "integrity": "sha512-fVjoElzjhCEy+Hbn8KygnmMS7Or0a9sI2UzGwoB7cCtvI1XpVN9GpoYlnb3xt2YV66oXYb1fLJ8GMvP4hdU1RA==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/d3-transition/node_modules/d3-interpolate": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-1.4.0.tgz",
+      "integrity": "sha512-V9znK0zc3jOPV4VD2zZn0sDhZU3WAE2bmlxdIwwQPPzPjvyLkd8B3JUVdS1IDUFDkWZ72c9qnv1GK2ZagTZ8EA==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "d3-color": "1"
+      }
+    },
+    "node_modules/d3-transition/node_modules/d3-timer": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-1.0.10.tgz",
+      "integrity": "sha512-B1JDm0XDaQC+uvo4DT79H0XmBskgS3l6Ve+1SBCfxgmtIb1AVrPIoqd+nPSv+loMX8szQ0sVUhGngL7D5QPiXw==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/d3-voronoi": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/d3-voronoi/-/d3-voronoi-1.1.2.tgz",
+      "integrity": "sha512-RhGS1u2vavcO7ay7ZNAPo4xeDh/VYeGof3x5ZLJBQgYhLegxr3s5IykvWmJ94FTU6mcbtp4sloqZ54mP6R4Utw==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/d3-zoom": {
+      "version": "1.7.1",
+      "resolved": "https://registry.npmjs.org/d3-zoom/-/d3-zoom-1.7.1.tgz",
+      "integrity": "sha512-sZHQ55DGq5BZBFGnRshUT8tm2sfhPHFnOlmPbbwTkAoPeVdRTkB4Xsf9GCY0TSHrTD8PeJPZGmP/TpGicwJDJQ==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "d3-dispatch": "1",
+        "d3-drag": "1",
+        "d3-interpolate": "1",
+        "d3-selection": "1",
+        "d3-transition": "1"
+      }
+    },
+    "node_modules/d3-zoom/node_modules/d3-color": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-1.4.1.tgz",
+      "integrity": "sha512-p2sTHSLCJI2QKunbGb7ocOh7DgTAn8IrLx21QRc/BSnodXM4sv6aLQlnfpvehFMLZEfBc6g9pH9SWQccFYfJ9Q==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/d3-zoom/node_modules/d3-dispatch": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-1.0.6.tgz",
+      "integrity": "sha512-fVjoElzjhCEy+Hbn8KygnmMS7Or0a9sI2UzGwoB7cCtvI1XpVN9GpoYlnb3xt2YV66oXYb1fLJ8GMvP4hdU1RA==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/d3-zoom/node_modules/d3-interpolate": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-1.4.0.tgz",
+      "integrity": "sha512-V9znK0zc3jOPV4VD2zZn0sDhZU3WAE2bmlxdIwwQPPzPjvyLkd8B3JUVdS1IDUFDkWZ72c9qnv1GK2ZagTZ8EA==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "d3-color": "1"
+      }
+    },
+    "node_modules/d3/node_modules/d3-array": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-1.2.1.tgz",
+      "integrity": "sha512-CyINJQ0SOUHojDdFDH4JEM0552vCR1utGyLHegJHyYH0JyCpSeTPxi4OBqHMA2jJZq4NH782LtaJWBImqI/HBw==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/d3/node_modules/d3-color": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-1.0.3.tgz",
+      "integrity": "sha512-t+rSOrshj6m2AUOe8kHvTwfUQ5TFoInEkBfmsHHAHPof58dmbRXNpicB7XAyPbMQbcC7i09p2BxeCEdgBd8xmw==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/d3/node_modules/d3-dispatch": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-1.0.3.tgz",
+      "integrity": "sha512-Qh2DR3neW3lq/ug4oymXHYoIsA91nYt47ERb+fPKjRg6zLij06aP7KqHHl2NyziK9ASxrR3GLkHCtZvXe/jMVg==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/d3/node_modules/d3-dsv": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/d3-dsv/-/d3-dsv-1.0.8.tgz",
+      "integrity": "sha512-IVCJpQ+YGe3qu6odkPQI0KPqfxkhbP/oM1XhhE/DFiYmcXKfCRub4KXyiuehV1d4drjWVXHUWx4gHqhdZb6n/A==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "commander": "2",
+        "iconv-lite": "0.4",
+        "rw": "1"
+      },
+      "bin": {
+        "csv2json": "bin/dsv2json",
+        "csv2tsv": "bin/dsv2dsv",
+        "dsv2dsv": "bin/dsv2dsv",
+        "dsv2json": "bin/dsv2json",
+        "json2csv": "bin/json2dsv",
+        "json2dsv": "bin/json2dsv",
+        "json2tsv": "bin/json2dsv",
+        "tsv2csv": "bin/dsv2dsv",
+        "tsv2json": "bin/dsv2json"
+      }
+    },
+    "node_modules/d3/node_modules/d3-force": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/d3-force/-/d3-force-1.1.0.tgz",
+      "integrity": "sha512-2HVQz3/VCQs0QeRNZTYb7GxoUCeb6bOzMp/cGcLa87awY9ZsPvXOGeZm0iaGBjXic6I1ysKwMn+g+5jSAdzwcg==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "d3-collection": "1",
+        "d3-dispatch": "1",
+        "d3-quadtree": "1",
+        "d3-timer": "1"
+      }
+    },
+    "node_modules/d3/node_modules/d3-format": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-1.2.2.tgz",
+      "integrity": "sha512-zH9CfF/3C8zUI47nsiKfD0+AGDEuM8LwBIP7pBVpyR4l/sKkZqITmMtxRp04rwBrlshIZ17XeFAaovN3++wzkw==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/d3/node_modules/d3-geo": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/d3-geo/-/d3-geo-1.9.1.tgz",
+      "integrity": "sha512-l9wL/cEQkyZQYXw3xbmLsH3eQ5ij+icNfo4r0GrLa5rOCZR/e/3am45IQ0FvQ5uMsv+77zBRunLc9ufTWSQYFA==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "d3-array": "1"
+      }
+    },
+    "node_modules/d3/node_modules/d3-hierarchy": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/d3-hierarchy/-/d3-hierarchy-1.1.5.tgz",
+      "integrity": "sha512-PcsLIhThc60mWnxlojIOH7Sc0tQ2DgLWfEwEAyzCtej5f3H9wSsRmrg5pEhKZLrwiJnI2zyw/pznJxL9a/Eugw==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/d3/node_modules/d3-interpolate": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-1.1.6.tgz",
+      "integrity": "sha512-mOnv5a+pZzkNIHtw/V6I+w9Lqm9L5bG3OTXPM5A+QO0yyVMQ4W1uZhR+VOJmazaOZXri2ppbiZ5BUNWT0pFM9A==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "d3-color": "1"
+      }
+    },
+    "node_modules/d3/node_modules/d3-path": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-1.0.5.tgz",
+      "integrity": "sha512-eD76prgnTKYkLzHlY2UMyOEZXTpC+WOanCr1BLxo38w4fPPPq/LgCFqRQvqFU3AJngfZmmKR7rgKPZ4EGJ9Atw==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/d3/node_modules/d3-quadtree": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/d3-quadtree/-/d3-quadtree-1.0.3.tgz",
+      "integrity": "sha512-U2Jc3jF3JOBGXIOnvWY9C4ekRwRX9hEVpMMmeduJyaxAwPmoe7t84iZFTLn1RwYOyrXxJF55H/Hrg186TFQQdw==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/d3/node_modules/d3-scale": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-1.0.7.tgz",
+      "integrity": "sha512-KvU92czp2/qse5tUfGms6Kjig0AhHOwkzXG0+PqIJB3ke0WUv088AHMZI0OssO9NCkXt4RP8yju9rpH8aGB7Lw==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "d3-array": "^1.2.0",
+        "d3-collection": "1",
+        "d3-color": "1",
+        "d3-format": "1",
+        "d3-interpolate": "1",
+        "d3-time": "1",
+        "d3-time-format": "2"
+      }
+    },
+    "node_modules/d3/node_modules/d3-shape": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-1.2.0.tgz",
+      "integrity": "sha512-LP48zJ9ykPKjCdd0vSu5k2l4s8v1vI6vvdDeJtmgtTa+L6Ery0lzvOaV7pMunFuLv11hwSRZQnSnlhFl801aiw==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "d3-path": "1"
+      }
+    },
+    "node_modules/d3/node_modules/d3-time": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-1.0.8.tgz",
+      "integrity": "sha512-YRZkNhphZh3KcnBfitvF3c6E0JOFGikHZ4YqD+Lzv83ZHn1/u6yGenRU1m+KAk9J1GnZMnKcrtfvSktlA1DXNQ==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/d3/node_modules/d3-time-format": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-2.1.1.tgz",
+      "integrity": "sha512-8kAkymq2WMfzW7e+s/IUNAtN/y3gZXGRrdGfo6R8NKPAA85UBTxZg5E61bR6nLwjPjj4d3zywSQe1CkYLPFyrw==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "d3-time": "1"
+      }
+    },
+    "node_modules/d3/node_modules/d3-timer": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-1.0.7.tgz",
+      "integrity": "sha512-vMZXR88XujmG/L5oB96NNKH5lCWwiLM/S2HyyAQLcjWJCloK5shxta4CwOFYLZoY3AWX73v8Lgv4cCAdWtRmOA==",
+      "license": "BSD-3-Clause"
+    },
     "node_modules/dash-ast": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/dash-ast/-/dash-ast-1.0.0.tgz",
@@ -17723,19 +18129,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/pyret-lang/node_modules/asn1.js": {
-      "version": "4.10.1",
-      "license": "MIT",
-      "dependencies": {
-        "bn.js": "^4.0.0",
-        "inherits": "^2.0.1",
-        "minimalistic-assert": "^1.0.0"
-      }
-    },
-    "node_modules/pyret-lang/node_modules/asn1.js/node_modules/bn.js": {
-      "version": "4.12.1",
-      "license": "MIT"
-    },
     "node_modules/pyret-lang/node_modules/assert": {
       "version": "1.5.1",
       "inBundle": true,
@@ -18003,14 +18396,6 @@
         "ieee754": "^1.1.4"
       }
     },
-    "node_modules/pyret-lang/node_modules/buffer": {
-      "version": "5.2.1",
-      "license": "MIT",
-      "dependencies": {
-        "base64-js": "^1.0.2",
-        "ieee754": "^1.1.4"
-      }
-    },
     "node_modules/pyret-lang/node_modules/buffer-from": {
       "version": "1.1.2",
       "inBundle": true,
@@ -18136,18 +18521,6 @@
       "inBundle": true,
       "license": "MIT"
     },
-    "node_modules/pyret-lang/node_modules/create-ecdh": {
-      "version": "4.0.4",
-      "license": "MIT",
-      "dependencies": {
-        "bn.js": "^4.1.0",
-        "elliptic": "^6.5.3"
-      }
-    },
-    "node_modules/pyret-lang/node_modules/create-ecdh/node_modules/bn.js": {
-      "version": "4.12.1",
-      "license": "MIT"
-    },
     "node_modules/pyret-lang/node_modules/create-hash": {
       "version": "1.2.0",
       "inBundle": true,
@@ -18345,19 +18718,6 @@
         "node": ">=0.8.0"
       }
     },
-    "node_modules/pyret-lang/node_modules/diffie-hellman": {
-      "version": "5.0.3",
-      "license": "MIT",
-      "dependencies": {
-        "bn.js": "^4.1.0",
-        "miller-rabin": "^4.0.0",
-        "randombytes": "^2.0.0"
-      }
-    },
-    "node_modules/pyret-lang/node_modules/diffie-hellman/node_modules/bn.js": {
-      "version": "4.12.1",
-      "license": "MIT"
-    },
     "node_modules/pyret-lang/node_modules/domain-browser": {
       "version": "1.2.0",
       "inBundle": true,
@@ -18388,23 +18748,6 @@
         "readable-stream": "^2.0.2"
       }
     },
-    "node_modules/pyret-lang/node_modules/elliptic": {
-      "version": "6.6.1",
-      "license": "MIT",
-      "dependencies": {
-        "bn.js": "^4.11.9",
-        "brorand": "^1.1.0",
-        "hash.js": "^1.0.0",
-        "hmac-drbg": "^1.0.1",
-        "inherits": "^2.0.4",
-        "minimalistic-assert": "^1.0.1",
-        "minimalistic-crypto-utils": "^1.0.1"
-      }
-    },
-    "node_modules/pyret-lang/node_modules/elliptic/node_modules/bn.js": {
-      "version": "4.12.1",
-      "license": "MIT"
-    },
     "node_modules/pyret-lang/node_modules/es-define-property": {
       "version": "1.0.1",
       "inBundle": true,
@@ -18862,21 +19205,6 @@
         "safe-buffer": "^5.1.2"
       }
     },
-    "node_modules/pyret-lang/node_modules/miller-rabin": {
-      "version": "4.0.1",
-      "license": "MIT",
-      "dependencies": {
-        "bn.js": "^4.0.0",
-        "brorand": "^1.0.1"
-      },
-      "bin": {
-        "miller-rabin": "bin/miller-rabin"
-      }
-    },
-    "node_modules/pyret-lang/node_modules/miller-rabin/node_modules/bn.js": {
-      "version": "4.12.1",
-      "license": "MIT"
-    },
     "node_modules/pyret-lang/node_modules/minimalistic-assert": {
       "version": "1.0.1",
       "inBundle": true,
@@ -19096,22 +19424,6 @@
       "inBundle": true,
       "license": "MIT"
     },
-    "node_modules/pyret-lang/node_modules/public-encrypt": {
-      "version": "4.0.3",
-      "license": "MIT",
-      "dependencies": {
-        "bn.js": "^4.1.0",
-        "browserify-rsa": "^4.0.0",
-        "create-hash": "^1.1.0",
-        "parse-asn1": "^5.0.0",
-        "randombytes": "^2.0.1",
-        "safe-buffer": "^5.1.2"
-      }
-    },
-    "node_modules/pyret-lang/node_modules/public-encrypt/node_modules/bn.js": {
-      "version": "4.12.1",
-      "license": "MIT"
-    },
     "node_modules/pyret-lang/node_modules/punycode": {
       "version": "1.4.1",
       "inBundle": true,
@@ -23685,6 +23997,15 @@
         "node": ">=8.0"
       }
     },
+    "node_modules/xmlhttprequest": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/xmlhttprequest/-/xmlhttprequest-1.8.0.tgz",
+      "integrity": "sha512-58Im/U0mlVBLM38NdZjHyhuMtCqa61469k2YP/AaPbvCoV9aQGUpbJBj1QRm2ytRiVQBD/fsw7L2bJGDVQswBA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/xtend": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
diff --git a/package.json b/package.json
index 8361871a..e53508ec 100644
--- a/package.json
+++ b/package.json
@@ -22,7 +22,7 @@
     "cross-fetch": "^4.1.0",
     "css-loader": "^3.6.0",
     "csurf": "^1.11.0",
-    "d3": "^3.5.17",
+    "d3": "^4.13.00",
     "d3-tip": "github:sorawee/d3-tip",
     "dotenv": "^2.0.0",
     "es6-shim": "0.35.0",
@@ -49,7 +49,7 @@
     "node-uuid": "^1.4.8",
     "popper.js": "^1.16.1",
     "pyret-codemirror-mode": "github:brownplt/pyret-codemirror-mode#master",
-    "pyret-lang": "git://github.com/brownplt/pyret-lang.git#horizon",
+    "pyret-lang": "github:brownplt/pyret-lang#cnd-staging",
     "q": "~1.4.1",
     "react": "^15.7.0",
     "react-dom": "^15.7.0",
diff --git a/src/web/editor.html b/src/web/editor.html
index 952d5f96..7544da9b 100644
--- a/src/web/editor.html
+++ b/src/web/editor.html
@@ -30,6 +30,15 @@
   <script src="{{ &BASE_URL }}/js/vega-tooltip.min.js"></script>
   <script>var APP_LOG_URL = "{{{ LOG_URL }}}";</script>
   <script src="{{ &BASE_URL }}/js/localSettings.js"></script>
+
+  <!-- CnD files. These could be conditionally imported or bundled locally if needed. -->
+  <script src="https://cdn.jsdelivr.net/npm/cnd-core@1.2.0/dist/browser/cnd-core-complete.global.js"></script>  
+  <script src="https://cdn.jsdelivr.net/npm/cnd-core@1.2.0/dist/components/react-component-integration.global.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/cnd-core@1.2.0/dist/components/react-component-integration.css" /> 
+
+
+
+
 </head>
 <body class="default">
   <script>
diff --git a/src/web/js/cpo-main.js b/src/web/js/cpo-main.js
index 3159e50b..283a9beb 100644
--- a/src/web/js/cpo-main.js
+++ b/src/web/js/cpo-main.js
@@ -408,7 +408,8 @@
           stop: function() {
             runtime.breakAll();
           },
-          runtime: runtime
+          runtime: runtime,
+
         };
         return withRepl(jsRepl);
       }, "make-repl");
@@ -442,6 +443,9 @@
       };
       window.replWidget = CPO.replWidget = replWidget;
 
+      // Exposing this for dom-render.js to use for input.
+      window.__internalRepl = repl;
+    
       /*
       $("#runDropdown").click(function() {
         $("#run-dropdown-content").toggle();
diff --git a/src/web/js/output-ui.js b/src/web/js/output-ui.js
index acba54a8..5f09d198 100644
--- a/src/web/js/output-ui.js
+++ b/src/web/js/output-ui.js
@@ -1641,7 +1641,12 @@
         $(this).toggleClass("collection");
         $(this).toggleClass("inlineCollection");
       }
-      function helper(container, val, values, wantCommaAtEnd) {
+      const thisContext = "cpo";
+      function isInRendererContext(val) {
+        var renderers = runtime.getField(val, "renderers");
+        return runtime.hasField(renderers, thisContext);
+      }
+      function helper(container, val, values, wantCommaAtEnd, renderedValues) {
         var ariaText;
         if (runtime.ffi.isVSValue(val)) {
           //console.log('helper i', val);
@@ -1687,7 +1692,7 @@
             ul.each(makeInline);
             e.stopPropagation();
           });
-        } else if (runtime.ffi.isVSConstr(val)) {
+        } else if (runtime.ffi.isVSConstr(val) || (runtime.ffi.isVSConstrRender(val) && !isInRendererContext(val))) {
           //console.log('helper iv');
           container.append($("<span>").text(runtime.unwrap(runtime.getField(val, "name")) + "("));
           var items = runtime.ffi.toArray(runtime.getField(val, "args"));
@@ -1695,6 +1700,26 @@
             helper(container, items[i], values, (i + 1 < items.length));
           }
           container.append($("<span>").text(")"));
+        } else if (runtime.ffi.isVSConstrRender(val)) {
+
+
+          // We know we are on the CPO stack here (within a runThink that's running toReprJS).
+          // This means we can safely call CPO here.
+
+
+          // A good improvement here would be to build some kind of fallthrough mechanism when 
+          // isInRendererContext being false to just use vsconstr
+
+          var items = runtime.ffi.toArray(runtime.getField(val, "args"));
+          var currentContainer;
+          const elements = [];
+          for (var i = 0; i < items.length; i++) {
+            currentContainer = $("<span>").addClass("replOutput");
+            elements.push(currentContainer[0]);
+            helper(currentContainer, items[i], values, false);
+          }
+          const result = runtime.getField(runtime.getField(val, "renderers"), "cpo").app(elements);
+          container.append(result);
         } else if (runtime.ffi.isVSSeq(val)) {
           //console.log('helper v');
           var items = runtime.ffi.toArray(runtime.getField(val, "items"));
diff --git a/src/web/js/trove/cpo-builtins.js b/src/web/js/trove/cpo-builtins.js
index 52bf99cf..a0d46423 100644
--- a/src/web/js/trove/cpo-builtins.js
+++ b/src/web/js/trove/cpo-builtins.js
@@ -23,7 +23,8 @@
     { "import-type": "builtin", "name": "essentials2021" },
     { "import-type": "builtin", "name": "essentials2024" },
     { "import-type": "builtin", "name": "starter2024" },
-    { "import-type": "builtin", "name": "dcic2024" }
+    { "import-type": "builtin", "name": "dcic2024" },
+    { "import-type": "builtin", "name": "dom-render" }
   ],
   provides: {},
   nativeRequires: [],
diff --git a/src/web/js/trove/dom-render.js b/src/web/js/trove/dom-render.js
new file mode 100644
index 00000000..08c784e5
--- /dev/null
+++ b/src/web/js/trove/dom-render.js
@@ -0,0 +1,352 @@
+({
+    requires: [],
+    nativeRequires: [],
+    provides: {
+        values: {
+            genlayout: ["arrow", [["RawArray", "Any"], "String"], "Any"],
+        }
+    },
+    theModule: function (runtime, namespace, uri) {
+
+
+        ///// Layout Generation /////
+        function genlayout(v, cndSpec) {
+
+            const container = document.createElement("div");
+            container.style.border = "1px solid #ccc";
+            container.style.padding = "5px";
+            container.style.margin = "10px 0";
+            container.style.position = "relative"; // For positioning elements inside the container
+
+            // Create error message mount point
+            const errorDiv = document.createElement("div");
+            errorDiv.id = "error-message-container-" + Math.random().toString(36).slice(2);
+            container.appendChild(errorDiv);
+
+            try {
+                // CnDCore logic
+                const dataInstance = new window.CndCore.PyretDataInstance(v, false, window.__internalRepl); // Pass the external repl.
+                const evaluationContext = { sourceData: dataInstance };
+                const evaluator = new CndCore.Evaluators.SGraphQueryEvaluator();
+                evaluator.initialize(evaluationContext);
+                const r = dataInstance.reify();
+                const layoutSpec = CndCore.parseLayoutSpec(cndSpec);
+                const ENABLE_ALIGNMENT_EDGES = true;
+                const instanceNumber = 0;
+                const layoutInstance = new CndCore.LayoutInstance(
+                    layoutSpec,
+                    evaluator,
+                    instanceNumber,
+                    ENABLE_ALIGNMENT_EDGES
+                );
+                const projections = {};
+                const layoutResult = layoutInstance.generateLayout(dataInstance, projections);
+                const currentInstanceLayout = layoutResult.layout;
+
+                // String view
+                const stringView = document.createElement("pre");
+                stringView.textContent = String(r);
+                stringView.style.margin = "0 0 10px 0"; // Add spacing between the string view and the graph
+                container.appendChild(stringView);
+
+                // Graph container (to hold the graph and the toggle button)
+                const graphContainer = document.createElement("div");
+                graphContainer.style.position = "relative"; // For positioning the toggle button
+                graphContainer.style.marginTop = "10px";
+
+                // Graph element (initially visible)
+                const graphElement = document.createElement("webcola-cnd-graph");
+                graphElement.setAttribute("width", "400");
+                graphElement.setAttribute("height", "400");
+                graphElement.style.display = "block"; // Start visible
+                graphElement.style.margin = "0 auto"; // Center the graph within the container
+
+                // Add the graph element to the graph container
+                graphContainer.appendChild(graphElement);
+
+                // Collapse/Expand button (small + / - in the top-right corner of the graph container)
+                const toggleButton = document.createElement("button");
+                toggleButton.textContent = "-"; // Default state is expanded
+                toggleButton.style.position = "absolute";
+                toggleButton.style.top = "5px";
+                toggleButton.style.right = "5px";
+                toggleButton.style.padding = "2px 5px";
+                toggleButton.style.fontSize = "12px";
+                toggleButton.style.cursor = "pointer";
+                toggleButton.style.border = "1px solid #007BFF"; // Blue outline for visibility
+                toggleButton.style.borderRadius = "3px";
+                toggleButton.style.backgroundColor = "#f0f8ff"; // Light blue background
+                toggleButton.style.color = "#007BFF"; // Blue text for better contrast
+
+                // Add the toggle button to the graph container
+                graphContainer.appendChild(toggleButton);
+
+                // Add the graph container to the main container
+                container.appendChild(graphContainer);
+
+                // Render the graph layout
+                graphElement.renderLayout(currentInstanceLayout).then(() => {
+                    console.log("Graph layout rendered");
+
+                    // Mount additional React components after rendering
+                    if (window.mountErrorMessageModal) {
+                        console.log("Mounting Error Message Modal");
+                        window.mountErrorMessageModal(errorDiv.id);
+                    }
+                }).catch((err) => {
+                    console.error("Error rendering graph layout:", err);
+                });
+
+                // Toggle visibility of the graph element
+                toggleButton.addEventListener("click", () => {
+                    const isCollapsed = graphElement.style.display === "none";
+                    graphElement.style.display = isCollapsed ? "block" : "none";
+                    toggleButton.textContent = isCollapsed ? "-" : "+"; // Update button text
+                });
+
+            } catch (error) {
+                console.error("Error in genlayout:", error);
+
+                // Display the error in the errorDiv
+                errorDiv.style.color = "red";
+                errorDiv.style.padding = "10px";
+                errorDiv.style.border = "1px solid red";
+                errorDiv.style.marginBottom = "10px";
+                errorDiv.textContent = `Error: ${error.message || error}`;
+            }
+
+            return container;
+        }
+
+
+        /***** Input FROM a layout. This is still experimental and so hidden behind a key-binding. ********/
+
+
+        /*** Styling helpers */
+
+        function applyOverlayStyles(overlay) {
+            overlay.style.position = "fixed";
+            overlay.style.top = "0";
+            overlay.style.left = "0";
+            overlay.style.width = "100vw"; // Full width of the viewport
+            overlay.style.height = "100vh"; // Full height of the viewport
+            overlay.style.backgroundColor = "rgba(0, 0, 0, 0.5)"; // Semi-transparent background
+            overlay.style.zIndex = "10000"; // Ensure it appears above other elements
+            overlay.style.display = "flex";
+            overlay.style.justifyContent = "center";
+            overlay.style.alignItems = "center";
+        }
+
+        function applyContainerStyles(container) {
+            container.style.background = "white";
+            container.style.border = "1px solid #ccc";
+            container.style.padding = "20px";
+            container.style.boxShadow = "0 2px 8px rgba(0,0,0,0.15)";
+            container.style.width = "80vw";
+            container.style.borderRadius = "8px";
+            container.style.maxHeight = "90vh"; // Limit the height to 90% of the viewport
+            container.style.overflowY = "auto"; // Enable vertical scrolling if content overflows
+        }
+
+        function applyButtonContainerStyles(buttonContainer) {
+            buttonContainer.style.display = "flex";
+            buttonContainer.style.justifyContent = "flex-end";
+        }
+        /********** */
+
+
+        const INPUT_KEYBINDING = "Ctrl-Alt-I";
+
+        // This is the main function for input mode.
+        function geninput(dataInstance, cndSpec) {
+            return new Promise((resolve, reject) => {
+                // Create the overlay container
+                const overlay = document.createElement("div");
+                applyOverlayStyles(overlay);
+
+                // Create the input container
+                const container = document.createElement("div");
+                applyContainerStyles(container);
+
+                // TODO: This seems superfluous from a text standpoint.
+                const title = document.createElement("h3");
+                title.textContent = "Input";
+                title.style.marginTop = "0";
+                container.appendChild(title);
+
+                // Create the input area
+                const combinedInputDiv = document.createElement("div");
+                combinedInputDiv.id = "combined-input-container-" + Math.random().toString(36).slice(2);
+                combinedInputDiv.style.overflow = "auto";
+                combinedInputDiv.style.marginBottom = "10px";
+                container.appendChild(combinedInputDiv);
+
+                // Add buttons
+                const buttonContainer = document.createElement("div");
+                applyButtonContainerStyles(buttonContainer);
+
+
+                // These should be better styled, and maybe at the top?
+                const doneButton = document.createElement("button");
+                doneButton.innerText = "Done";
+                doneButton.style.marginRight = "10px";
+
+                const cancelButton = document.createElement("button");
+                cancelButton.innerText = "Cancel";
+
+                buttonContainer.appendChild(doneButton);
+                buttonContainer.appendChild(cancelButton);
+                container.appendChild(buttonContainer);
+
+                // Append the container to the overlay
+                overlay.appendChild(container);
+                document.body.appendChild(overlay);
+
+                // Cancel button functionality
+                cancelButton.onclick = () => {
+                    document.body.removeChild(overlay);
+                    reject("cancelled");
+                };
+
+                // Done button functionality
+                doneButton.onclick = () => {
+                    try {
+                        if (!dataInstance || typeof dataInstance.reify !== "function") {
+                            throw new Error("dataInstance.reify() is not available");
+                        }
+                        const result = dataInstance.reify();
+                        document.body.removeChild(overlay);
+                        resolve(result);
+                    } catch (err) {
+                        reject(err);
+                    }
+                };
+
+                // Initialize the input logic
+                try {
+                    const pyretREPLInternal = window.__internalRepl;
+
+                    const success = CndCore.mountCombinedInput({
+                        containerId: combinedInputDiv.id,
+                        cndSpec: cndSpec,
+                        dataInstance: dataInstance,
+                        pyretEvaluator: pyretREPLInternal,
+                        height: '100%', // Ensure the combined input spans the full height of the container
+                        showLayoutInterface: false,
+                        autoApplyLayout: true,
+                        onInstanceChange: () => { },
+                        onSpecChange: () => { console.log("Spec changed"); },
+                        onLayoutApplied: () => { console.log("Layout applied successfully"); },
+                    });
+
+                    if (!success) {
+                        throw new Error("Failed to mount combined input");
+                    }
+                } catch (err) {
+                    container.textContent = `Error: ${err.message || err}`;
+                    reject(err);
+                }
+            });
+        }
+
+        /**
+         * Attaches a keybinding to the active CodeMirror instance and executes a thunk when triggered.
+         *
+         * @param {string} keyBinding - The keybinding to attach (e.g., "Cmd-Shift-R").
+         * @param {function} thunk - A function that returns a string or a promise of a string.
+         *                           The result of the thunk will replace the text at the cursor.
+         *
+         * @example
+         * // Define a thunk that returns a string
+         * function exampleThunk() {
+         *     return "Hello, CodeMirror!";
+         * }
+         *
+         * // Attach the keybinding to CodeMirror
+         * attachToCM("Cmd-Shift-R", exampleThunk);
+         */
+        function attachToCM(keyBinding, thunk) {
+            // Step 1: Find the active CodeMirror instance
+            const cmEl = document.activeElement.closest(".CodeMirror") || document.querySelector(".CodeMirror");
+            const cm = cmEl?.CodeMirror;
+
+            if (!cm) {
+                console.warn("❌ No CodeMirror editor found.");
+                return;
+            }
+
+            // Step 2: Add the keybinding using addKeyMap
+            const keyMap = {
+                [keyBinding]: async function (cmInstance) {
+                    try {
+                        // Call the thunk to get the result (string or promise of a string)
+                        const result = await thunk();
+
+                        // Replace the text at the cursor with the result (only if the promise resolves)
+                        if (result !== undefined && result !== null) {
+                            cmInstance.replaceSelection(result);
+                        }
+                    } catch (err) {
+                        if (err === "cancelled") {
+                            console.log("Operation cancelled by the user. No changes made.");
+                        } else {
+                            console.error("Error in thunk execution:", err);
+                        }
+                    }
+                }
+            };
+            cm.addKeyMap(keyMap);
+        }
+
+
+        attachToCM(INPUT_KEYBINDING, async () => {
+            try {
+                const cmEl = document.activeElement.closest(".CodeMirror") || document.querySelector(".CodeMirror");
+                const cm = cmEl?.CodeMirror;
+                if (!cm) throw new Error("No active CodeMirror instance");
+
+                const cursorCoords = cm.cursorCoords(true, "page");
+
+                let cndSpec = "";
+                let dataInstance = undefined;
+                const selectedText = cm.getSelection();
+                if (selectedText != null && selectedText !== undefined && selectedText !== "") {
+                    // If there IS selected text, we should use that to build the data instance, by passing
+                    // it to the evaluator.
+                    function removeOuterQuotes(str) {
+                        // Check if the string starts and ends with quotes
+                        if (str.startsWith('"') && str.endsWith('"')) {
+                            // Remove the outermost quotes
+                            return str.slice(1, -1);
+                        }
+                        return str; // Return the string unchanged if no outer quotes
+                    }
+
+                    let cndSpecExpr = `(${selectedText})._cndspec()`;
+                    let intermediatePyretDataInst = await window.CndCore.PyretDataInstance.fromExpression(cndSpecExpr, false, window.__internalRepl);
+                    // Get the CnD spec from the selected text. This is super hacky, may be better to actually begin with the 
+                    // EVALUATION of the selected text.
+                    cndSpec = removeOuterQuotes(intermediatePyretDataInst.reify());
+
+
+                    dataInstance = await window.CndCore.PyretDataInstance.fromExpression(selectedText, false, window.__internalRepl);
+                } else {
+                    // Else, we create a new data instance with no value.
+                    dataInstance = new window.CndCore.PyretDataInstance(null, false, window.__internalRepl);
+                }
+
+                const result = await geninput(dataInstance, cndSpec, cursorCoords);
+                return result;
+                //return JSON.stringify(result, null, 2);
+            } catch (err) {
+                console.error("Error invoking geninput:", err);
+                return "#Error: " + (err.message || err);
+            }
+        });
+
+
+        return runtime.makeModuleReturn({
+            genlayout: runtime.makeFunction(genlayout)
+        }, {});
+    }
+})
\ No newline at end of file