From fcfe9c9a6ed90f2e59c2235a2589d753f73537b7 Mon Sep 17 00:00:00 2001
From: Xuan Huang <huxpro@gmail.com>
Date: Tue, 22 Feb 2022 22:01:37 -0800
Subject: [PATCH] Migrate to ecmarkup

This is the first step to revamp this repo: [ecmarkup](https://github.com/tc39/ecmarkup)
is TC39's official tool for specifying syntax and semantics for ECMAScript.
I proposed that we should adopt it because it has several favorabilities
than the current approach (`README.md` + a `gh-pages` website living in
the `websitescript` branch):
1. The resultant `index.html` has a similar looks and feels with the
   official ECMA-262 spec.
2. It uses [Grammarkdown](https://github.com/rbuckton/grammarkdown)
   which is not only convenient to write but more importantly, can
   enforce the grammar to be more formal.
3. It provides links to ECMA-262 out of the box (closed #112).
   Furthurmore, I can use `<ins>` to make "extension" points explicit.

One possible concern it that it'll make this too like a ECMAScript proposal,
but I think we mediated by opting-out from the "stage-N proposal"
heading, and by explicitly calling out our intention in the
"Introduction" section.

In addition,
- Link to JXON is updated since the original link no more existed.
- Parser and Transpiler section is dropped from the "spec" website.
- Facebook, Inc. is updated to Meta Platform, Inc everywhere.

Once this is merged, we can switch to `main` to host Github Pages.
---
 .gitignore   |   43 +
 README.md    |  143 +--
 index.html   | 2749 ++++++++++++++++++++++++++++++++++++++++++++++++++
 package.json |   11 +
 spec.emu     |  258 +++++
 5 files changed, 3069 insertions(+), 135 deletions(-)
 create mode 100644 .gitignore
 create mode 100644 index.html
 create mode 100644 package.json
 create mode 100644 spec.emu

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..434262c
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,43 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules
+jspm_packages
+
+# Optional npm cache directory
+.npm
+
+# Optional REPL history
+.node_repl_history
+
+# Only apps should have lockfiles
+yarn.lock
+package-lock.json
+npm-shrinkwrap.json
+pnpm-lock.yaml
diff --git a/README.md b/README.md
index e195e25..308d870 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,8 @@
 DRAFT: JSX Specification
 ========================
 
-JSX is an XML-like syntax extension to ECMAScript without any defined semantics. It's NOT intended to be implemented by engines or browsers. __It's NOT a proposal to incorporate JSX into the ECMAScript spec itself.__ It's intended to be used by various preprocessors (transpilers) to transform these tokens into standard ECMAScript.
+
+JSX is an XML-like syntax extension to ECMAScript without any defined semantics. It's NOT intended to be implemented by engines or browsers. __It's NOT a proposal to incorporate JSX into the ECMAScript spec itself.__ It's intended to be used by various preprocessors (transpilers) to transform these tokens into standard ECMAScript. 
 
 ```jsx
 // Using JSX to express UI components.
@@ -18,6 +19,11 @@ var dropdown =
 render(dropdown);
 ```
 
+[See grammar and spec text](https://facebook.github.io/jsx).
+
+
+
+
 Rationale
 ---------
 
@@ -31,139 +37,6 @@ It is our intention to claim minimal syntactic real estate while keeping the syn
 
 This specification does not attempt to comply with any XML or HTML specification. JSX is designed as an ECMAScript feature and the similarity to XML is only for familiarity.
 
-Syntax
-------
-
-_JSX extends the PrimaryExpression in the [ECMAScript 6th Edition (ECMA-262)](https://www.ecma-international.org/ecma-262/8.0/index.html) grammar:_
-
-PrimaryExpression :
-
-- JSXElement
-- JSXFragment
-
-__Elements__
-
-JSXElement :

-
-- JSXSelfClosingElement

-- JSXOpeningElement JSXChildren<sub>opt</sub> JSXClosingElement  
-  (names of JSXOpeningElement and JSXClosingElement should match)
-
-JSXSelfClosingElement :
-
-- `<` JSXElementName JSXAttributes<sub>opt</sub> `/` `>`
-
-JSXOpeningElement :
-
-- `<` JSXElementName JSXAttributes<sub>opt</sub> `>`
-
-JSXClosingElement :
-
-- `<` `/` JSXElementName `>`
-
-JSXFragment :
-
-- `<` `>` JSXChildren<sub>opt</sub> `<` `/` `>`
-
-JSXElementName :
-
-- JSXIdentifier
-- JSXNamespacedName
-- JSXMemberExpression
-
-JSXIdentifier :
-
-- IdentifierStart
-- JSXIdentifier IdentifierPart
-- JSXIdentifier __NO WHITESPACE OR COMMENT__ `-`
-
-JSXNamespacedName :
-
-- JSXIdentifier `:` JSXIdentifier
-
-JSXMemberExpression :
-
-- JSXIdentifier `.` JSXIdentifier
-- JSXMemberExpression `.` JSXIdentifier
-
-__Attributes__
-
-JSXAttributes :

-
-- JSXSpreadAttribute JSXAttributes<sub>opt</sub>
-- JSXAttribute JSXAttributes<sub>opt</sub>
-
-JSXSpreadAttribute :
-
-- `{` `...` AssignmentExpression `}`
-
-JSXAttribute :

-
-- JSXAttributeName JSXAttributeInitializer<sub>opt</sub>
-
-JSXAttributeName :
-
-- JSXIdentifier
-- JSXNamespacedName
-
-JSXAttributeInitializer :

-
-- `=` JSXAttributeValue
-
-JSXAttributeValue :

-
-- `"` JSXDoubleStringCharacters<sub>opt</sub> `"`
-- `'` JSXSingleStringCharacters<sub>opt</sub> `'`
-- `{` AssignmentExpression `}`
-- JSXElement
-- JSXFragment
-
-JSXDoubleStringCharacters :

-
-- JSXDoubleStringCharacter JSXDoubleStringCharacters<sub>opt</sub>
-
-JSXDoubleStringCharacter :

-
-- SourceCharacter __but not `"`__
-
-JSXSingleStringCharacters :

-
-- JSXSingleStringCharacter JSXSingleStringCharacters<sub>opt</sub>
-
-JSXSingleStringCharacter :

-
-- SourceCharacter __but not `'`__
-
-__Children__
-
-JSXChildren :

-
-- JSXChild JSXChildren<sub>opt</sub>
-
-JSXChild :
-
-- JSXText
-- JSXElement
-- JSXFragment
-- `{` JSXChildExpression<sub>opt</sub> `}`
-
-JSXText :
-
-- JSXTextCharacter JSXText<sub>opt</sub>
-
-JSXTextCharacter :
-
-- SourceCharacter __but not one of `{`, `<`, `>` or `}`__
-
-JSXChildExpression :
-
-- AssignmentExpression
-- `...` AssignmentExpression
-
-__Whitespace and Comments__
-
-_JSX uses the same punctuators and braces as ECMAScript. WhiteSpace, LineTerminators and Comments are generally allowed between any punctuators._
-
 Parser Implementations
 ----------------------
 
@@ -255,7 +128,7 @@ The JSX syntax is similar to the [E4X Specification (ECMA-357)](http://www.ecma-
 License
 -------
 
-Copyright (c) 2014 - present, Facebook, Inc.
+Copyright (c) 2014 - present, Meta Platform, Inc.
 All rights reserved.
 
 This work is licensed under a [Creative Commons Attribution 4.0
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..be0e5ad
--- /dev/null
+++ b/index.html
@@ -0,0 +1,2749 @@
+<!doctype html>
+<head><meta charset="utf-8">
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.0.1/styles/base16/solarized-light.min.css"><link rel="stylesheet" href="./spec.css">
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/styles/github.min.css">
+<script src="./spec.js"></script>
+<title>JSX</title><script>'use strict';
+let sdoBox = {
+  init() {
+    this.$alternativeId = null;
+    this.$outer = document.createElement('div');
+    this.$outer.classList.add('toolbox-container');
+    this.$container = document.createElement('div');
+    this.$container.classList.add('toolbox');
+    this.$displayLink = document.createElement('a');
+    this.$displayLink.setAttribute('href', '#');
+    this.$displayLink.textContent = 'Syntax-Directed Operations';
+    this.$displayLink.addEventListener('click', e => {
+      e.preventDefault();
+      e.stopPropagation();
+      referencePane.showSDOs(sdoMap[this.$alternativeId] || {}, this.$alternativeId);
+    });
+    this.$container.appendChild(this.$displayLink);
+    this.$outer.appendChild(this.$container);
+    document.body.appendChild(this.$outer);
+  },
+
+  activate(el) {
+    clearTimeout(this.deactiveTimeout);
+    Toolbox.deactivate();
+    this.$alternativeId = el.id;
+    let numSdos = Object.keys(sdoMap[this.$alternativeId] || {}).length;
+    this.$displayLink.textContent = 'Syntax-Directed Operations (' + numSdos + ')';
+    this.$outer.classList.add('active');
+    let top = el.offsetTop - this.$outer.offsetHeight;
+    let left = el.offsetLeft + 50 - 10; // 50px = padding-left(=75px) + text-indent(=-25px)
+    this.$outer.setAttribute('style', 'left: ' + left + 'px; top: ' + top + 'px');
+    if (top < document.body.scrollTop) {
+      this.$container.scrollIntoView();
+    }
+  },
+
+  deactivate() {
+    clearTimeout(this.deactiveTimeout);
+    this.$outer.classList.remove('active');
+  },
+};
+
+document.addEventListener('DOMContentLoaded', () => {
+  if (typeof sdoMap == 'undefined') {
+    console.error('could not find sdo map');
+    return;
+  }
+  sdoBox.init();
+
+  let insideTooltip = false;
+  sdoBox.$outer.addEventListener('pointerenter', () => {
+    insideTooltip = true;
+  });
+  sdoBox.$outer.addEventListener('pointerleave', () => {
+    insideTooltip = false;
+    sdoBox.deactivate();
+  });
+
+  sdoBox.deactiveTimeout = null;
+  [].forEach.call(document.querySelectorAll('emu-grammar[type=definition] emu-rhs'), node => {
+    node.addEventListener('pointerenter', function () {
+      sdoBox.activate(this);
+    });
+
+    node.addEventListener('pointerleave', () => {
+      sdoBox.deactiveTimeout = setTimeout(() => {
+        if (!insideTooltip) {
+          sdoBox.deactivate();
+        }
+      }, 500);
+    });
+  });
+
+  document.addEventListener(
+    'keydown',
+    debounce(e => {
+      if (e.code === 'Escape') {
+        sdoBox.deactivate();
+      }
+    })
+  );
+});
+
+'use strict';
+function Search(menu) {
+  this.menu = menu;
+  this.$search = document.getElementById('menu-search');
+  this.$searchBox = document.getElementById('menu-search-box');
+  this.$searchResults = document.getElementById('menu-search-results');
+
+  this.loadBiblio();
+
+  document.addEventListener('keydown', this.documentKeydown.bind(this));
+
+  this.$searchBox.addEventListener(
+    'keydown',
+    debounce(this.searchBoxKeydown.bind(this), { stopPropagation: true })
+  );
+  this.$searchBox.addEventListener(
+    'keyup',
+    debounce(this.searchBoxKeyup.bind(this), { stopPropagation: true })
+  );
+
+  // Perform an initial search if the box is not empty.
+  if (this.$searchBox.value) {
+    this.search(this.$searchBox.value);
+  }
+}
+
+Search.prototype.loadBiblio = function () {
+  if (typeof biblio === 'undefined') {
+    console.error('could not find biblio');
+    this.biblio = { refToClause: {}, entries: [] };
+  } else {
+    this.biblio = biblio;
+    this.biblio.clauses = this.biblio.entries.filter(e => e.type === 'clause');
+    this.biblio.byId = this.biblio.entries.reduce((map, entry) => {
+      map[entry.id] = entry;
+      return map;
+    }, {});
+    let refParentClause = Object.create(null);
+    this.biblio.refParentClause = refParentClause;
+    let refsByClause = this.biblio.refsByClause;
+    Object.keys(refsByClause).forEach(clause => {
+      refsByClause[clause].forEach(ref => {
+        refParentClause[ref] = clause;
+      });
+    });
+  }
+};
+
+Search.prototype.documentKeydown = function (e) {
+  if (e.key === '/') {
+    e.preventDefault();
+    e.stopPropagation();
+    this.triggerSearch();
+  }
+};
+
+Search.prototype.searchBoxKeydown = function (e) {
+  e.stopPropagation();
+  e.preventDefault();
+  if (e.keyCode === 191 && e.target.value.length === 0) {
+    e.preventDefault();
+  } else if (e.keyCode === 13) {
+    e.preventDefault();
+    this.selectResult();
+  }
+};
+
+Search.prototype.searchBoxKeyup = function (e) {
+  if (e.keyCode === 13 || e.keyCode === 9) {
+    return;
+  }
+
+  this.search(e.target.value);
+};
+
+Search.prototype.triggerSearch = function () {
+  if (this.menu.isVisible()) {
+    this._closeAfterSearch = false;
+  } else {
+    this._closeAfterSearch = true;
+    this.menu.show();
+  }
+
+  this.$searchBox.focus();
+  this.$searchBox.select();
+};
+// bit 12 - Set if the result starts with searchString
+// bits 8-11: 8 - number of chunks multiplied by 2 if cases match, otherwise 1.
+// bits 1-7: 127 - length of the entry
+// General scheme: prefer case sensitive matches with fewer chunks, and otherwise
+// prefer shorter matches.
+function relevance(result) {
+  let relevance = 0;
+
+  relevance = Math.max(0, 8 - result.match.chunks) << 7;
+
+  if (result.match.caseMatch) {
+    relevance *= 2;
+  }
+
+  if (result.match.prefix) {
+    relevance += 2048;
+  }
+
+  relevance += Math.max(0, 255 - result.key.length);
+
+  return relevance;
+}
+
+Search.prototype.search = function (searchString) {
+  if (searchString === '') {
+    this.displayResults([]);
+    this.hideSearch();
+    return;
+  } else {
+    this.showSearch();
+  }
+
+  if (searchString.length === 1) {
+    this.displayResults([]);
+    return;
+  }
+
+  let results;
+
+  if (/^[\d.]*$/.test(searchString)) {
+    results = this.biblio.clauses
+      .filter(clause => clause.number.substring(0, searchString.length) === searchString)
+      .map(clause => ({ entry: clause }));
+  } else {
+    results = [];
+
+    for (let i = 0; i < this.biblio.entries.length; i++) {
+      let entry = this.biblio.entries[i];
+      let key = getKey(entry);
+      if (!key) {
+        // biblio entries without a key aren't searchable
+        continue;
+      }
+
+      let match = fuzzysearch(searchString, key);
+      if (match) {
+        results.push({ key, entry, match });
+      }
+    }
+
+    results.forEach(result => {
+      result.relevance = relevance(result, searchString);
+    });
+
+    results = results.sort((a, b) => b.relevance - a.relevance);
+  }
+
+  if (results.length > 50) {
+    results = results.slice(0, 50);
+  }
+
+  this.displayResults(results);
+};
+Search.prototype.hideSearch = function () {
+  this.$search.classList.remove('active');
+};
+
+Search.prototype.showSearch = function () {
+  this.$search.classList.add('active');
+};
+
+Search.prototype.selectResult = function () {
+  let $first = this.$searchResults.querySelector('li:first-child a');
+
+  if ($first) {
+    document.location = $first.getAttribute('href');
+  }
+
+  this.$searchBox.value = '';
+  this.$searchBox.blur();
+  this.displayResults([]);
+  this.hideSearch();
+
+  if (this._closeAfterSearch) {
+    this.menu.hide();
+  }
+};
+
+Search.prototype.displayResults = function (results) {
+  if (results.length > 0) {
+    this.$searchResults.classList.remove('no-results');
+
+    let html = '<ul>';
+
+    results.forEach(result => {
+      let key = result.key;
+      let entry = result.entry;
+      let id = entry.id;
+      let cssClass = '';
+      let text = '';
+
+      if (entry.type === 'clause') {
+        let number = entry.number ? entry.number + ' ' : '';
+        text = number + key;
+        cssClass = 'clause';
+        id = entry.id;
+      } else if (entry.type === 'production') {
+        text = key;
+        cssClass = 'prod';
+        id = entry.id;
+      } else if (entry.type === 'op') {
+        text = key;
+        cssClass = 'op';
+        id = entry.id || entry.refId;
+      } else if (entry.type === 'term') {
+        text = key;
+        cssClass = 'term';
+        id = entry.id || entry.refId;
+      }
+
+      if (text) {
+        // prettier-ignore
+        html += `<li class=menu-search-result-${cssClass}><a href="${makeLinkToId(id)}">${text}</a></li>`;
+      }
+    });
+
+    html += '</ul>';
+
+    this.$searchResults.innerHTML = html;
+  } else {
+    this.$searchResults.innerHTML = '';
+    this.$searchResults.classList.add('no-results');
+  }
+};
+
+function getKey(item) {
+  if (item.key) {
+    return item.key;
+  }
+  switch (item.type) {
+    case 'clause':
+      return item.title || item.titleHTML;
+    case 'production':
+      return item.name;
+    case 'op':
+      return item.aoid;
+    case 'term':
+      return item.term;
+    case 'table':
+    case 'figure':
+    case 'example':
+    case 'note':
+      return item.caption;
+    case 'step':
+      return item.id;
+    default:
+      throw new Error("Can't get key for " + item.type);
+  }
+}
+
+function Menu() {
+  this.$toggle = document.getElementById('menu-toggle');
+  this.$menu = document.getElementById('menu');
+  this.$toc = document.querySelector('menu-toc > ol');
+  this.$pins = document.querySelector('#menu-pins');
+  this.$pinList = document.getElementById('menu-pins-list');
+  this.$toc = document.querySelector('#menu-toc > ol');
+  this.$specContainer = document.getElementById('spec-container');
+  this.search = new Search(this);
+
+  this._pinnedIds = {};
+  this.loadPinEntries();
+
+  // toggle menu
+  this.$toggle.addEventListener('click', this.toggle.bind(this));
+
+  // keydown events for pinned clauses
+  document.addEventListener('keydown', this.documentKeydown.bind(this));
+
+  // toc expansion
+  let tocItems = this.$menu.querySelectorAll('#menu-toc li');
+  for (let i = 0; i < tocItems.length; i++) {
+    let $item = tocItems[i];
+    $item.addEventListener('click', event => {
+      $item.classList.toggle('active');
+      event.stopPropagation();
+    });
+  }
+
+  // close toc on toc item selection
+  let tocLinks = this.$menu.querySelectorAll('#menu-toc li > a');
+  for (let i = 0; i < tocLinks.length; i++) {
+    let $link = tocLinks[i];
+    $link.addEventListener('click', event => {
+      this.toggle();
+      event.stopPropagation();
+    });
+  }
+
+  // update active clause on scroll
+  window.addEventListener('scroll', debounce(this.updateActiveClause.bind(this)));
+  this.updateActiveClause();
+
+  // prevent menu scrolling from scrolling the body
+  this.$toc.addEventListener('wheel', e => {
+    let target = e.currentTarget;
+    let offTop = e.deltaY < 0 && target.scrollTop === 0;
+    if (offTop) {
+      e.preventDefault();
+    }
+    let offBottom = e.deltaY > 0 && target.offsetHeight + target.scrollTop >= target.scrollHeight;
+
+    if (offBottom) {
+      e.preventDefault();
+    }
+  });
+}
+
+Menu.prototype.documentKeydown = function (e) {
+  e.stopPropagation();
+  if (e.keyCode === 80) {
+    this.togglePinEntry();
+  } else if (e.keyCode > 48 && e.keyCode < 58) {
+    this.selectPin(e.keyCode - 49);
+  }
+};
+
+Menu.prototype.updateActiveClause = function () {
+  this.setActiveClause(findActiveClause(this.$specContainer));
+};
+
+Menu.prototype.setActiveClause = function (clause) {
+  this.$activeClause = clause;
+  this.revealInToc(this.$activeClause);
+};
+
+Menu.prototype.revealInToc = function (path) {
+  let current = this.$toc.querySelectorAll('li.revealed');
+  for (let i = 0; i < current.length; i++) {
+    current[i].classList.remove('revealed');
+    current[i].classList.remove('revealed-leaf');
+  }
+
+  current = this.$toc;
+  let index = 0;
+  outer: while (index < path.length) {
+    let children = current.children;
+    for (let i = 0; i < children.length; i++) {
+      if ('#' + path[index].id === children[i].children[1].hash) {
+        children[i].classList.add('revealed');
+        if (index === path.length - 1) {
+          children[i].classList.add('revealed-leaf');
+          let rect = children[i].getBoundingClientRect();
+          // this.$toc.getBoundingClientRect().top;
+          let tocRect = this.$toc.getBoundingClientRect();
+          if (rect.top + 10 > tocRect.bottom) {
+            this.$toc.scrollTop =
+              this.$toc.scrollTop + (rect.top - tocRect.bottom) + (rect.bottom - rect.top);
+          } else if (rect.top < tocRect.top) {
+            this.$toc.scrollTop = this.$toc.scrollTop - (tocRect.top - rect.top);
+          }
+        }
+        current = children[i].querySelector('ol');
+        index++;
+        continue outer;
+      }
+    }
+    console.log('could not find location in table of contents', path);
+    break;
+  }
+};
+
+function findActiveClause(root, path) {
+  let clauses = getChildClauses(root);
+  path = path || [];
+
+  for (let $clause of clauses) {
+    let rect = $clause.getBoundingClientRect();
+    let $header = $clause.querySelector('h1');
+    let marginTop = Math.max(
+      parseInt(getComputedStyle($clause)['margin-top']),
+      parseInt(getComputedStyle($header)['margin-top'])
+    );
+
+    if (rect.top - marginTop <= 1 && rect.bottom > 0) {
+      return findActiveClause($clause, path.concat($clause)) || path;
+    }
+  }
+
+  return path;
+}
+
+function* getChildClauses(root) {
+  for (let el of root.children) {
+    switch (el.nodeName) {
+      // descend into <emu-import>
+      case 'EMU-IMPORT':
+        yield* getChildClauses(el);
+        break;
+
+      // accept <emu-clause>, <emu-intro>, and <emu-annex>
+      case 'EMU-CLAUSE':
+      case 'EMU-INTRO':
+      case 'EMU-ANNEX':
+        yield el;
+    }
+  }
+}
+
+Menu.prototype.toggle = function () {
+  this.$menu.classList.toggle('active');
+};
+
+Menu.prototype.show = function () {
+  this.$menu.classList.add('active');
+};
+
+Menu.prototype.hide = function () {
+  this.$menu.classList.remove('active');
+};
+
+Menu.prototype.isVisible = function () {
+  return this.$menu.classList.contains('active');
+};
+
+Menu.prototype.showPins = function () {
+  this.$pins.classList.add('active');
+};
+
+Menu.prototype.hidePins = function () {
+  this.$pins.classList.remove('active');
+};
+
+Menu.prototype.addPinEntry = function (id) {
+  let entry = this.search.biblio.byId[id];
+  if (!entry) {
+    // id was deleted after pin (or something) so remove it
+    delete this._pinnedIds[id];
+    this.persistPinEntries();
+    return;
+  }
+
+  if (entry.type === 'clause') {
+    let prefix;
+    if (entry.number) {
+      prefix = entry.number + ' ';
+    } else {
+      prefix = '';
+    }
+    // prettier-ignore
+    this.$pinList.innerHTML += `<li><a href="${makeLinkToId(entry.id)}">${prefix}${entry.titleHTML}</a></li>`;
+  } else {
+    this.$pinList.innerHTML += `<li><a href="${makeLinkToId(entry.id)}">${getKey(entry)}</a></li>`;
+  }
+
+  if (Object.keys(this._pinnedIds).length === 0) {
+    this.showPins();
+  }
+  this._pinnedIds[id] = true;
+  this.persistPinEntries();
+};
+
+Menu.prototype.removePinEntry = function (id) {
+  let item = this.$pinList.querySelector(`a[href="${makeLinkToId(id)}"]`).parentNode;
+  this.$pinList.removeChild(item);
+  delete this._pinnedIds[id];
+  if (Object.keys(this._pinnedIds).length === 0) {
+    this.hidePins();
+  }
+
+  this.persistPinEntries();
+};
+
+Menu.prototype.persistPinEntries = function () {
+  try {
+    if (!window.localStorage) return;
+  } catch (e) {
+    return;
+  }
+
+  localStorage.pinEntries = JSON.stringify(Object.keys(this._pinnedIds));
+};
+
+Menu.prototype.loadPinEntries = function () {
+  try {
+    if (!window.localStorage) return;
+  } catch (e) {
+    return;
+  }
+
+  let pinsString = window.localStorage.pinEntries;
+  if (!pinsString) return;
+  let pins = JSON.parse(pinsString);
+  for (let i = 0; i < pins.length; i++) {
+    this.addPinEntry(pins[i]);
+  }
+};
+
+Menu.prototype.togglePinEntry = function (id) {
+  if (!id) {
+    id = this.$activeClause[this.$activeClause.length - 1].id;
+  }
+
+  if (this._pinnedIds[id]) {
+    this.removePinEntry(id);
+  } else {
+    this.addPinEntry(id);
+  }
+};
+
+Menu.prototype.selectPin = function (num) {
+  document.location = this.$pinList.children[num].children[0].href;
+};
+
+let menu;
+
+document.addEventListener('DOMContentLoaded', init);
+
+function debounce(fn, opts) {
+  opts = opts || {};
+  let timeout;
+  return function (e) {
+    if (opts.stopPropagation) {
+      e.stopPropagation();
+    }
+    let args = arguments;
+    if (timeout) {
+      clearTimeout(timeout);
+    }
+    timeout = setTimeout(() => {
+      timeout = null;
+      fn.apply(this, args);
+    }, 150);
+  };
+}
+
+let CLAUSE_NODES = ['EMU-CLAUSE', 'EMU-INTRO', 'EMU-ANNEX'];
+function findContainer($elem) {
+  let parentClause = $elem.parentNode;
+  while (parentClause && CLAUSE_NODES.indexOf(parentClause.nodeName) === -1) {
+    parentClause = parentClause.parentNode;
+  }
+  return parentClause;
+}
+
+function findLocalReferences(parentClause, name) {
+  let vars = parentClause.querySelectorAll('var');
+  let references = [];
+
+  for (let i = 0; i < vars.length; i++) {
+    let $var = vars[i];
+
+    if ($var.innerHTML === name) {
+      references.push($var);
+    }
+  }
+
+  return references;
+}
+
+let REFERENCED_CLASSES = Array.from({ length: 7 }, (x, i) => `referenced${i}`);
+function chooseHighlightIndex(parentClause) {
+  let counts = REFERENCED_CLASSES.map($class => parentClause.getElementsByClassName($class).length);
+  // Find the earliest index with the lowest count.
+  let minCount = Infinity;
+  let index = null;
+  for (let i = 0; i < counts.length; i++) {
+    if (counts[i] < minCount) {
+      minCount = counts[i];
+      index = i;
+    }
+  }
+  return index;
+}
+
+function toggleFindLocalReferences($elem) {
+  let parentClause = findContainer($elem);
+  let references = findLocalReferences(parentClause, $elem.innerHTML);
+  if ($elem.classList.contains('referenced')) {
+    references.forEach($reference => {
+      $reference.classList.remove('referenced', ...REFERENCED_CLASSES);
+    });
+  } else {
+    let index = chooseHighlightIndex(parentClause);
+    references.forEach($reference => {
+      $reference.classList.add('referenced', `referenced${index}`);
+    });
+  }
+}
+
+function installFindLocalReferences() {
+  document.addEventListener('click', e => {
+    if (e.target.nodeName === 'VAR') {
+      toggleFindLocalReferences(e.target);
+    }
+  });
+}
+
+document.addEventListener('DOMContentLoaded', installFindLocalReferences);
+
+// The following license applies to the fuzzysearch function
+// The MIT License (MIT)
+// Copyright © 2015 Nicolas Bevacqua
+// Copyright © 2016 Brian Terlson
+// Permission is hereby granted, free of charge, to any person obtaining a copy of
+// this software and associated documentation files (the "Software"), to deal in
+// the Software without restriction, including without limitation the rights to
+// use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+// the Software, and to permit persons to whom the Software is furnished to do so,
+// subject to the following conditions:
+
+// The above copyright notice and this permission notice shall be included in all
+// copies or substantial portions of the Software.
+
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+// FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+// COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+// IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+// CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+function fuzzysearch(searchString, haystack, caseInsensitive) {
+  let tlen = haystack.length;
+  let qlen = searchString.length;
+  let chunks = 1;
+  let finding = false;
+
+  if (qlen > tlen) {
+    return false;
+  }
+
+  if (qlen === tlen) {
+    if (searchString === haystack) {
+      return { caseMatch: true, chunks: 1, prefix: true };
+    } else if (searchString.toLowerCase() === haystack.toLowerCase()) {
+      return { caseMatch: false, chunks: 1, prefix: true };
+    } else {
+      return false;
+    }
+  }
+
+  let j = 0;
+  outer: for (let i = 0; i < qlen; i++) {
+    let nch = searchString[i];
+    while (j < tlen) {
+      let targetChar = haystack[j++];
+      if (targetChar === nch) {
+        finding = true;
+        continue outer;
+      }
+      if (finding) {
+        chunks++;
+        finding = false;
+      }
+    }
+
+    if (caseInsensitive) {
+      return false;
+    }
+
+    return fuzzysearch(searchString.toLowerCase(), haystack.toLowerCase(), true);
+  }
+
+  return { caseMatch: !caseInsensitive, chunks, prefix: j <= qlen };
+}
+
+let referencePane = {
+  init() {
+    this.$container = document.createElement('div');
+    this.$container.setAttribute('id', 'references-pane-container');
+
+    let $spacer = document.createElement('div');
+    $spacer.setAttribute('id', 'references-pane-spacer');
+
+    this.$pane = document.createElement('div');
+    this.$pane.setAttribute('id', 'references-pane');
+
+    this.$container.appendChild($spacer);
+    this.$container.appendChild(this.$pane);
+
+    this.$header = document.createElement('div');
+    this.$header.classList.add('menu-pane-header');
+    this.$headerText = document.createElement('span');
+    this.$header.appendChild(this.$headerText);
+    this.$headerRefId = document.createElement('a');
+    this.$header.appendChild(this.$headerRefId);
+    this.$closeButton = document.createElement('span');
+    this.$closeButton.setAttribute('id', 'references-pane-close');
+    this.$closeButton.addEventListener('click', () => {
+      this.deactivate();
+    });
+    this.$header.appendChild(this.$closeButton);
+
+    this.$pane.appendChild(this.$header);
+    let tableContainer = document.createElement('div');
+    tableContainer.setAttribute('id', 'references-pane-table-container');
+
+    this.$table = document.createElement('table');
+    this.$table.setAttribute('id', 'references-pane-table');
+
+    this.$tableBody = this.$table.createTBody();
+
+    tableContainer.appendChild(this.$table);
+    this.$pane.appendChild(tableContainer);
+
+    menu.$specContainer.appendChild(this.$container);
+  },
+
+  activate() {
+    this.$container.classList.add('active');
+  },
+
+  deactivate() {
+    this.$container.classList.remove('active');
+    this.state = null;
+  },
+
+  showReferencesFor(entry) {
+    this.activate();
+    this.state = { type: 'ref', id: entry.id };
+    this.$headerText.textContent = 'References to ';
+    let newBody = document.createElement('tbody');
+    let previousId;
+    let previousCell;
+    let dupCount = 0;
+    this.$headerRefId.textContent = '#' + entry.id;
+    this.$headerRefId.setAttribute('href', makeLinkToId(entry.id));
+    this.$headerRefId.style.display = 'inline';
+    (entry.referencingIds || [])
+      .map(id => {
+        let cid = menu.search.biblio.refParentClause[id];
+        let clause = menu.search.biblio.byId[cid];
+        if (clause == null) {
+          throw new Error('could not find clause for id ' + cid);
+        }
+        return { id, clause };
+      })
+      .sort((a, b) => sortByClauseNumber(a.clause, b.clause))
+      .forEach(record => {
+        if (previousId === record.clause.id) {
+          previousCell.innerHTML += ` (<a href="${makeLinkToId(record.id)}">${dupCount + 2}</a>)`;
+          dupCount++;
+        } else {
+          let row = newBody.insertRow();
+          let cell = row.insertCell();
+          cell.innerHTML = record.clause.number;
+          cell = row.insertCell();
+          cell.innerHTML = `<a href="${makeLinkToId(record.id)}">${record.clause.titleHTML}</a>`;
+          previousCell = cell;
+          previousId = record.clause.id;
+          dupCount = 0;
+        }
+      }, this);
+    this.$table.removeChild(this.$tableBody);
+    this.$tableBody = newBody;
+    this.$table.appendChild(this.$tableBody);
+  },
+
+  showSDOs(sdos, alternativeId) {
+    let rhs = document.getElementById(alternativeId);
+    let parentName = rhs.parentNode.getAttribute('name');
+    let colons = rhs.parentNode.querySelector('emu-geq');
+    rhs = rhs.cloneNode(true);
+    rhs.querySelectorAll('emu-params,emu-constraints').forEach(e => {
+      e.remove();
+    });
+    rhs.querySelectorAll('[id]').forEach(e => {
+      e.removeAttribute('id');
+    });
+    rhs.querySelectorAll('a').forEach(e => {
+      e.parentNode.replaceChild(document.createTextNode(e.textContent), e);
+    });
+
+    // prettier-ignore
+    this.$headerText.innerHTML = `Syntax-Directed Operations for<br><a href="${makeLinkToId(alternativeId)}" class="menu-pane-header-production"><emu-nt>${parentName}</emu-nt> ${colons.outerHTML} </a>`;
+    this.$headerText.querySelector('a').append(rhs);
+    this.showSDOsBody(sdos, alternativeId);
+  },
+
+  showSDOsBody(sdos, alternativeId) {
+    this.activate();
+    this.state = { type: 'sdo', id: alternativeId, html: this.$headerText.innerHTML };
+    this.$headerRefId.style.display = 'none';
+    let newBody = document.createElement('tbody');
+    Object.keys(sdos).forEach(sdoName => {
+      let pair = sdos[sdoName];
+      let clause = pair.clause;
+      let ids = pair.ids;
+      let first = ids[0];
+      let row = newBody.insertRow();
+      let cell = row.insertCell();
+      cell.innerHTML = clause;
+      cell = row.insertCell();
+      let html = '<a href="' + makeLinkToId(first) + '">' + sdoName + '</a>';
+      for (let i = 1; i < ids.length; ++i) {
+        html += ' (<a href="' + makeLinkToId(ids[i]) + '">' + (i + 1) + '</a>)';
+      }
+      cell.innerHTML = html;
+    });
+    this.$table.removeChild(this.$tableBody);
+    this.$tableBody = newBody;
+    this.$table.appendChild(this.$tableBody);
+  },
+};
+
+let Toolbox = {
+  init() {
+    this.$outer = document.createElement('div');
+    this.$outer.classList.add('toolbox-container');
+    this.$container = document.createElement('div');
+    this.$container.classList.add('toolbox');
+    this.$outer.appendChild(this.$container);
+    this.$permalink = document.createElement('a');
+    this.$permalink.textContent = 'Permalink';
+    this.$pinLink = document.createElement('a');
+    this.$pinLink.textContent = 'Pin';
+    this.$pinLink.setAttribute('href', '#');
+    this.$pinLink.addEventListener('click', e => {
+      e.preventDefault();
+      e.stopPropagation();
+      menu.togglePinEntry(this.entry.id);
+    });
+
+    this.$refsLink = document.createElement('a');
+    this.$refsLink.setAttribute('href', '#');
+    this.$refsLink.addEventListener('click', e => {
+      e.preventDefault();
+      e.stopPropagation();
+      referencePane.showReferencesFor(this.entry);
+    });
+    this.$container.appendChild(this.$permalink);
+    this.$container.appendChild(this.$pinLink);
+    this.$container.appendChild(this.$refsLink);
+    document.body.appendChild(this.$outer);
+  },
+
+  activate(el, entry, target) {
+    if (el === this._activeEl) return;
+    sdoBox.deactivate();
+    this.active = true;
+    this.entry = entry;
+    this.$outer.classList.add('active');
+    this.top = el.offsetTop - this.$outer.offsetHeight;
+    this.left = el.offsetLeft - 10;
+    this.$outer.setAttribute('style', 'left: ' + this.left + 'px; top: ' + this.top + 'px');
+    this.updatePermalink();
+    this.updateReferences();
+    this._activeEl = el;
+    if (this.top < document.body.scrollTop && el === target) {
+      // don't scroll unless it's a small thing (< 200px)
+      this.$outer.scrollIntoView();
+    }
+  },
+
+  updatePermalink() {
+    this.$permalink.setAttribute('href', makeLinkToId(this.entry.id));
+  },
+
+  updateReferences() {
+    this.$refsLink.textContent = `References (${(this.entry.referencingIds || []).length})`;
+  },
+
+  activateIfMouseOver(e) {
+    let ref = this.findReferenceUnder(e.target);
+    if (ref && (!this.active || e.pageY > this._activeEl.offsetTop)) {
+      let entry = menu.search.biblio.byId[ref.id];
+      this.activate(ref.element, entry, e.target);
+    } else if (
+      this.active &&
+      (e.pageY < this.top || e.pageY > this._activeEl.offsetTop + this._activeEl.offsetHeight)
+    ) {
+      this.deactivate();
+    }
+  },
+
+  findReferenceUnder(el) {
+    while (el) {
+      let parent = el.parentNode;
+      if (el.nodeName === 'EMU-RHS' || el.nodeName === 'EMU-PRODUCTION') {
+        return null;
+      }
+      if (
+        el.nodeName === 'H1' &&
+        parent.nodeName.match(/EMU-CLAUSE|EMU-ANNEX|EMU-INTRO/) &&
+        parent.id
+      ) {
+        return { element: el, id: parent.id };
+      } else if (el.nodeName === 'EMU-NT') {
+        if (
+          parent.nodeName === 'EMU-PRODUCTION' &&
+          parent.id &&
+          parent.id[0] !== '_' &&
+          parent.firstElementChild === el
+        ) {
+          // return the LHS non-terminal element
+          return { element: el, id: parent.id };
+        }
+        return null;
+      } else if (
+        el.nodeName.match(/EMU-(?!CLAUSE|XREF|ANNEX|INTRO)|DFN/) &&
+        el.id &&
+        el.id[0] !== '_'
+      ) {
+        if (
+          el.nodeName === 'EMU-FIGURE' ||
+          el.nodeName === 'EMU-TABLE' ||
+          el.nodeName === 'EMU-EXAMPLE'
+        ) {
+          // return the figcaption element
+          return { element: el.children[0].children[0], id: el.id };
+        } else {
+          return { element: el, id: el.id };
+        }
+      }
+      el = parent;
+    }
+  },
+
+  deactivate() {
+    this.$outer.classList.remove('active');
+    this._activeEl = null;
+    this.active = false;
+  },
+};
+
+function sortByClauseNumber(clause1, clause2) {
+  let c1c = clause1.number.split('.');
+  let c2c = clause2.number.split('.');
+
+  for (let i = 0; i < c1c.length; i++) {
+    if (i >= c2c.length) {
+      return 1;
+    }
+
+    let c1 = c1c[i];
+    let c2 = c2c[i];
+    let c1cn = Number(c1);
+    let c2cn = Number(c2);
+
+    if (Number.isNaN(c1cn) && Number.isNaN(c2cn)) {
+      if (c1 > c2) {
+        return 1;
+      } else if (c1 < c2) {
+        return -1;
+      }
+    } else if (!Number.isNaN(c1cn) && Number.isNaN(c2cn)) {
+      return -1;
+    } else if (Number.isNaN(c1cn) && !Number.isNaN(c2cn)) {
+      return 1;
+    } else if (c1cn > c2cn) {
+      return 1;
+    } else if (c1cn < c2cn) {
+      return -1;
+    }
+  }
+
+  if (c1c.length === c2c.length) {
+    return 0;
+  }
+  return -1;
+}
+
+function makeLinkToId(id) {
+  let hash = '#' + id;
+  if (typeof idToSection === 'undefined' || !idToSection[id]) {
+    return hash;
+  }
+  let targetSec = idToSection[id];
+  return (targetSec === 'index' ? './' : targetSec + '.html') + hash;
+}
+
+function doShortcut(e) {
+  if (!(e.target instanceof HTMLElement)) {
+    return;
+  }
+  let target = e.target;
+  let name = target.nodeName.toLowerCase();
+  if (name === 'textarea' || name === 'input' || name === 'select' || target.isContentEditable) {
+    return;
+  }
+  if (e.altKey || e.ctrlKey || e.metaKey) {
+    return;
+  }
+  if (e.key === 'm' && usesMultipage) {
+    let pathParts = location.pathname.split('/');
+    let hash = location.hash;
+    if (pathParts[pathParts.length - 2] === 'multipage') {
+      if (hash === '') {
+        let sectionName = pathParts[pathParts.length - 1];
+        if (sectionName.endsWith('.html')) {
+          sectionName = sectionName.slice(0, -5);
+        }
+        if (idToSection['sec-' + sectionName] !== undefined) {
+          hash = '#sec-' + sectionName;
+        }
+      }
+      location = pathParts.slice(0, -2).join('/') + '/' + hash;
+    } else {
+      location = 'multipage/' + hash;
+    }
+  } else if (e.key === 'u') {
+    document.documentElement.classList.toggle('show-ao-annotations');
+  } else if (e.key === '?') {
+    document.getElementById('shortcuts-help').classList.toggle('active');
+  }
+}
+
+function init() {
+  menu = new Menu();
+  let $container = document.getElementById('spec-container');
+  $container.addEventListener(
+    'mouseover',
+    debounce(e => {
+      Toolbox.activateIfMouseOver(e);
+    })
+  );
+  document.addEventListener(
+    'keydown',
+    debounce(e => {
+      if (e.code === 'Escape') {
+        if (Toolbox.active) {
+          Toolbox.deactivate();
+        }
+        document.getElementById('shortcuts-help').classList.remove('active');
+      }
+    })
+  );
+}
+
+document.addEventListener('keypress', doShortcut);
+
+document.addEventListener('DOMContentLoaded', () => {
+  Toolbox.init();
+  referencePane.init();
+});
+
+'use strict';
+let decimalBullet = Array.from({ length: 100 }, (a, i) => '' + (i + 1));
+let alphaBullet = Array.from({ length: 26 }, (a, i) => String.fromCharCode('a'.charCodeAt(0) + i));
+
+// prettier-ignore
+let romanBullet = ['i', 'ii', 'iii', 'iv', 'v', 'vi', 'vii', 'viii', 'ix', 'x', 'xi', 'xii', 'xiii', 'xiv', 'xv', 'xvi', 'xvii', 'xviii', 'xix', 'xx', 'xxi', 'xxii', 'xxiii', 'xxiv', 'xxv'];
+// prettier-ignore
+let bullets = [decimalBullet, alphaBullet, romanBullet, decimalBullet, alphaBullet, romanBullet];
+
+function addStepNumberText(ol, parentIndex) {
+  for (let i = 0; i < ol.children.length; ++i) {
+    let child = ol.children[i];
+    let index = parentIndex.concat([i]);
+    let applicable = bullets[Math.min(index.length - 1, 5)];
+    let span = document.createElement('span');
+    span.textContent = (applicable[i] || '?') + '. ';
+    span.style.fontSize = '0';
+    span.setAttribute('aria-hidden', 'true');
+    child.prepend(span);
+    let sublist = child.querySelector('ol');
+    if (sublist != null) {
+      addStepNumberText(sublist, index);
+    }
+  }
+}
+document.addEventListener('DOMContentLoaded', () => {
+  document.querySelectorAll('emu-alg > ol').forEach(ol => {
+    addStepNumberText(ol, []);
+  });
+});
+
+let sdoMap = JSON.parse(`{}`);
+let biblio = JSON.parse(`{"refsByClause":{},"entries":[{"type":"clause","id":"sec-rationale","titleHTML":"Rationale","number":""},{"type":"clause","id":"sec-intro","titleHTML":"Introduction","number":""},{"type":"clause","id":"sec-jsx-PrimaryExpression","titleHTML":"Modified Productions","number":"1.1"},{"type":"clause","id":"sec-jsx-elements","titleHTML":"JSX Elements","number":"1.2"},{"type":"clause","id":"sec-jsx-attributes","titleHTML":"JSX Attributes","number":"1.3"},{"type":"clause","id":"sec-jsx-children","titleHTML":"JSX Children","number":"1.4"},{"type":"clause","id":"sec-jsx-grammar","titleHTML":"JSX Definition","number":"1"},{"type":"clause","id":"sec-why-not-template-literals","titleHTML":"Why not Template Literals?","number":"A"},{"type":"clause","id":"sec-why-not-JXON","titleHTML":"Why not JXON?","number":"B"},{"type":"clause","id":"sec-prior-art","titleHTML":"Prior Art","number":"C"},{"type":"clause","id":"sec-license","titleHTML":"License","number":"D"}]}`);
+;let usesMultipage = false</script><style>body {
+  display: flex;
+  font-size: 18px;
+  line-height: 1.5;
+  font-family: Cambria, Palatino Linotype, Palatino, Liberation Serif, serif;
+  padding: 0;
+  margin: 0;
+  color: #111;
+}
+
+#spec-container {
+  padding: 0 20px;
+  flex-grow: 1;
+  flex-basis: 66%;
+  box-sizing: border-box;
+  overflow: hidden;
+  padding-bottom: 1em;
+}
+
+body.oldtoc {
+  margin: 0 auto;
+}
+
+a {
+  text-decoration: none;
+  color: #206ca7;
+}
+
+a:visited {
+  color: #206ca7;
+}
+
+a:hover {
+  text-decoration: underline;
+  color: #239dee;
+}
+
+a.e-user-code,
+span.e-user-code {
+  white-space: nowrap;
+}
+
+a.e-user-code::before,
+span.e-user-code::before {
+  display: none;
+  color: brown;
+  background-color: white;
+  border: 2pt solid brown;
+  padding: 0.3ex;
+  margin: 0 0.25em 0 0;
+  line-height: 1;
+  vertical-align: text-top;
+  text-transform: uppercase;
+  font-family: 'Comic Code', sans-serif;
+  font-weight: 900;
+  font-size: x-small;
+}
+
+a.e-user-code:hover::before,
+span.e-user-code:hover::before {
+  background-color: brown;
+  color: white;
+}
+
+html.show-ao-annotations a.e-user-code::before,
+html.show-ao-annotations span.e-user-code::before {
+  display: inline-block;
+}
+
+a.e-user-code::before,
+span.e-user-code::before {
+  content: 'UC';
+}
+
+code {
+  font-weight: bold;
+  font-family: Consolas, Monaco, monospace;
+  white-space: pre;
+}
+
+pre code {
+  font-weight: inherit;
+}
+
+pre code.hljs {
+  background-color: #fff;
+  margin: 0;
+  padding: 0;
+}
+
+ol.toc {
+  list-style: none;
+  padding-left: 0;
+}
+
+ol.toc ol.toc {
+  padding-left: 2ex;
+  list-style: none;
+}
+
+var {
+  color: #2aa198;
+  transition: background-color 0.25s ease;
+  cursor: pointer;
+}
+
+var.referenced0 {
+  color: inherit;
+  background-color: #ffff33;
+  box-shadow: 0 0 0 2px #ffff33;
+}
+var.referenced1 {
+  color: inherit;
+  background-color: #ff87a2;
+  box-shadow: 0 0 0 2px #ff87a2;
+}
+var.referenced2 {
+  color: inherit;
+  background-color: #96e885;
+  box-shadow: 0 0 0 2px #96e885;
+}
+var.referenced3 {
+  color: inherit;
+  background-color: #3eeed2;
+  box-shadow: 0 0 0 2px #3eeed2;
+}
+var.referenced4 {
+  color: inherit;
+  background-color: #eacfb6;
+  box-shadow: 0 0 0 2px #eacfb6;
+}
+var.referenced5 {
+  color: inherit;
+  background-color: #82ddff;
+  box-shadow: 0 0 0 2px #82ddff;
+}
+var.referenced6 {
+  color: inherit;
+  background-color: #ffbcf2;
+  box-shadow: 0 0 0 2px #ffbcf2;
+}
+
+emu-const {
+  font-family: sans-serif;
+}
+
+emu-val {
+  font-weight: bold;
+}
+
+/* depth 1 */
+emu-alg ol,
+/* depth 4 */
+emu-alg ol ol ol ol,
+emu-alg ol.nested-thrice,
+emu-alg ol.nested-twice ol,
+emu-alg ol.nested-once ol ol {
+  list-style-type: decimal;
+}
+
+/* depth 2 */
+emu-alg ol ol,
+emu-alg ol.nested-once,
+/* depth 5 */
+emu-alg ol ol ol ol ol,
+emu-alg ol.nested-four-times,
+emu-alg ol.nested-thrice ol,
+emu-alg ol.nested-twice ol ol,
+emu-alg ol.nested-once ol ol ol {
+  list-style-type: lower-alpha;
+}
+
+/* depth 3 */
+emu-alg ol ol ol,
+emu-alg ol.nested-twice,
+emu-alg ol.nested-once ol,
+/* depth 6 */
+emu-alg ol ol ol ol ol ol,
+emu-alg ol.nested-lots,
+emu-alg ol.nested-four-times ol,
+emu-alg ol.nested-thrice ol ol,
+emu-alg ol.nested-twice ol ol ol,
+emu-alg ol.nested-once ol ol ol ol,
+/* depth 7+ */
+emu-alg ol.nested-lots ol {
+  list-style-type: lower-roman;
+}
+
+emu-eqn {
+  display: block;
+  margin-left: 4em;
+}
+
+emu-eqn.inline {
+  display: inline;
+  margin: 0;
+}
+
+emu-eqn div:first-child {
+  margin-left: -2em;
+}
+
+emu-note {
+  margin: 1em 0;
+  display: flex;
+  flex-direction: row;
+  color: inherit;
+  border-left: 5px solid #52e052;
+  background: #e9fbe9;
+  padding: 10px 10px 10px 0;
+}
+
+emu-note > span.note {
+  flex-basis: 100px;
+  min-width: 100px;
+  flex-grow: 0;
+  flex-shrink: 1;
+  text-transform: uppercase;
+  padding-left: 5px;
+}
+
+emu-note[type='editor'] {
+  border-left-color: #faa;
+}
+
+emu-note > div.note-contents {
+  flex-grow: 1;
+  flex-shrink: 1;
+  overflow: auto;
+}
+
+emu-note > div.note-contents > p:first-of-type {
+  margin-top: 0;
+}
+
+emu-note > div.note-contents > p:last-of-type {
+  margin-bottom: 0;
+}
+
+emu-table td code {
+  white-space: normal;
+}
+
+emu-figure {
+  display: block;
+}
+
+emu-example {
+  display: block;
+  margin: 1em 3em;
+}
+
+emu-example figure figcaption {
+  margin-top: 0.5em;
+  text-align: left;
+}
+
+emu-figure figure,
+emu-example figure,
+emu-table figure {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+emu-production {
+  display: block;
+}
+
+emu-grammar[type='example'] emu-production,
+emu-grammar[type='definition'] emu-production {
+  margin-top: 1em;
+  margin-bottom: 1em;
+  margin-left: 5ex;
+}
+
+emu-grammar.inline,
+emu-production.inline,
+emu-grammar.inline emu-production emu-rhs,
+emu-production.inline emu-rhs,
+emu-grammar[collapsed] emu-production emu-rhs {
+  display: inline;
+  padding-left: 1ex;
+  margin-left: 0;
+}
+
+emu-production[collapsed] emu-rhs {
+  display: inline;
+  padding-left: 0.5ex;
+  margin-left: 0;
+}
+
+emu-grammar[collapsed] emu-production,
+emu-production[collapsed] {
+  margin: 0;
+}
+
+emu-constraints {
+  font-size: 0.75em;
+  margin-right: 0.5ex;
+}
+
+emu-gann {
+  margin-right: 0.5ex;
+}
+
+emu-gann emu-t:last-child,
+emu-gann emu-gprose:last-child,
+emu-gann emu-nt:last-child {
+  margin-right: 0;
+}
+
+emu-geq {
+  margin-left: 0.5ex;
+  font-weight: bold;
+}
+
+emu-oneof {
+  font-weight: bold;
+  margin-left: 0.5ex;
+}
+
+emu-nt {
+  display: inline-block;
+  font-style: italic;
+  white-space: nowrap;
+  text-indent: 0;
+}
+
+emu-nt a,
+emu-nt a:visited {
+  color: #333;
+}
+
+emu-rhs emu-nt {
+  margin-right: 0.5ex;
+}
+
+emu-t {
+  display: inline-block;
+  font-family: monospace;
+  font-weight: bold;
+  white-space: nowrap;
+  text-indent: 0;
+}
+
+emu-production emu-t {
+  margin-right: 0.5ex;
+}
+
+emu-rhs {
+  display: block;
+  padding-left: 75px;
+  text-indent: -25px;
+}
+
+emu-production:not([collapsed]) emu-rhs {
+  border: 0.2ex dashed transparent;
+}
+
+emu-production:not([collapsed]) emu-rhs:hover {
+  border-color: #888;
+  background-color: #f0f0f0;
+}
+
+emu-mods {
+  font-size: 0.85em;
+  vertical-align: sub;
+  font-style: normal;
+  font-weight: normal;
+}
+
+emu-params,
+emu-opt {
+  margin-right: 1ex;
+  font-family: monospace;
+}
+
+emu-params,
+emu-constraints {
+  color: #2aa198;
+}
+
+emu-opt {
+  color: #b58900;
+}
+
+emu-gprose {
+  font-size: 0.9em;
+  font-family: Helvetica, Arial, sans-serif;
+}
+
+emu-production emu-gprose {
+  margin-right: 1ex;
+}
+
+h1.shortname {
+  color: #f60;
+  font-size: 1.5em;
+  margin: 0;
+}
+
+h1.version {
+  color: #f60;
+  font-size: 1.5em;
+}
+
+h1.title {
+  color: #f60;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  position: relative;
+}
+
+h1 .secnum {
+  text-decoration: none;
+  margin-right: 5px;
+}
+
+h1 span.title {
+  order: 2;
+}
+
+h1 {
+  font-size: 2.67em;
+  margin-bottom: 0;
+  line-height: 1em;
+}
+h2 {
+  font-size: 2em;
+}
+h3 {
+  font-size: 1.56em;
+}
+h4 {
+  font-size: 1.25em;
+}
+h5 {
+  font-size: 1.11em;
+}
+h6 {
+  font-size: 1em;
+}
+
+pre code.hljs {
+  background: transparent;
+}
+
+emu-clause[id],
+emu-annex[id],
+emu-intro[id] {
+  scroll-margin-top: 2ex;
+}
+
+emu-intro h1,
+emu-clause h1,
+emu-annex h1 {
+  font-size: 2em;
+}
+emu-intro h2,
+emu-clause h2,
+emu-annex h2 {
+  font-size: 1.56em;
+}
+emu-intro h3,
+emu-clause h3,
+emu-annex h3 {
+  font-size: 1.25em;
+}
+emu-intro h4,
+emu-clause h4,
+emu-annex h4 {
+  font-size: 1.11em;
+}
+emu-intro h5,
+emu-clause h5,
+emu-annex h5 {
+  font-size: 1em;
+}
+emu-intro h6,
+emu-clause h6,
+emu-annex h6 {
+  font-size: 0.9em;
+}
+emu-intro emu-intro h1,
+emu-clause emu-clause h1,
+emu-annex emu-annex h1 {
+  font-size: 1.56em;
+}
+emu-intro emu-intro h2,
+emu-clause emu-clause h2,
+emu-annex emu-annex h2 {
+  font-size: 1.25em;
+}
+emu-intro emu-intro h3,
+emu-clause emu-clause h3,
+emu-annex emu-annex h3 {
+  font-size: 1.11em;
+}
+emu-intro emu-intro h4,
+emu-clause emu-clause h4,
+emu-annex emu-annex h4 {
+  font-size: 1em;
+}
+emu-intro emu-intro h5,
+emu-clause emu-clause h5,
+emu-annex emu-annex h5 {
+  font-size: 0.9em;
+}
+emu-intro emu-intro emu-intro h1,
+emu-clause emu-clause emu-clause h1,
+emu-annex emu-annex emu-annex h1 {
+  font-size: 1.25em;
+}
+emu-intro emu-intro emu-intro h2,
+emu-clause emu-clause emu-clause h2,
+emu-annex emu-annex emu-annex h2 {
+  font-size: 1.11em;
+}
+emu-intro emu-intro emu-intro h3,
+emu-clause emu-clause emu-clause h3,
+emu-annex emu-annex emu-annex h3 {
+  font-size: 1em;
+}
+emu-intro emu-intro emu-intro h4,
+emu-clause emu-clause emu-clause h4,
+emu-annex emu-annex emu-annex h4 {
+  font-size: 0.9em;
+}
+emu-intro emu-intro emu-intro emu-intro h1,
+emu-clause emu-clause emu-clause emu-clause h1,
+emu-annex emu-annex emu-annex emu-annex h1 {
+  font-size: 1.11em;
+}
+emu-intro emu-intro emu-intro emu-intro h2,
+emu-clause emu-clause emu-clause emu-clause h2,
+emu-annex emu-annex emu-annex emu-annex h2 {
+  font-size: 1em;
+}
+emu-intro emu-intro emu-intro emu-intro h3,
+emu-clause emu-clause emu-clause emu-clause h3,
+emu-annex emu-annex emu-annex emu-annex h3 {
+  font-size: 0.9em;
+}
+emu-intro emu-intro emu-intro emu-intro emu-intro h1,
+emu-clause emu-clause emu-clause emu-clause emu-clause h1,
+emu-annex emu-annex emu-annex emu-annex emu-annex h1 {
+  font-size: 1em;
+}
+emu-intro emu-intro emu-intro emu-intro emu-intro h2,
+emu-clause emu-clause emu-clause emu-clause emu-clause h2,
+emu-annex emu-annex emu-annex emu-annex emu-annex h2 {
+  font-size: 0.9em;
+}
+emu-intro emu-intro emu-intro emu-intro emu-intro emu-intro h1,
+emu-clause emu-clause emu-clause emu-clause emu-clause emu-clause h1,
+emu-annex emu-annex emu-annex emu-annex emu-annex emu-annex h1 {
+  font-size: 0.9em;
+}
+
+emu-clause,
+emu-intro,
+emu-annex {
+  display: block;
+}
+
+/* these values are twice the font-size for the <h1> titles for clauses */
+emu-intro,
+emu-clause,
+emu-annex {
+  margin-top: 4em;
+}
+emu-intro emu-intro,
+emu-clause emu-clause,
+emu-annex emu-annex {
+  margin-top: 3.12em;
+}
+emu-intro emu-intro emu-intro,
+emu-clause emu-clause emu-clause,
+emu-annex emu-annex emu-annex {
+  margin-top: 2.5em;
+}
+emu-intro emu-intro emu-intro emu-intro,
+emu-clause emu-clause emu-clause emu-clause,
+emu-annex emu-annex emu-annex emu-annex {
+  margin-top: 2.22em;
+}
+emu-intro emu-intro emu-intro emu-intro emu-intro,
+emu-clause emu-clause emu-clause emu-clause emu-clause,
+emu-annex emu-annex emu-annex emu-annex emu-annex {
+  margin-top: 2em;
+}
+emu-intro emu-intro emu-intro emu-intro emu-intro emu-intro,
+emu-clause emu-clause emu-clause emu-clause emu-clause emu-clause,
+emu-annex emu-annex emu-annex emu-annex emu-annex emu-annex {
+  margin-top: 1.8em;
+}
+
+#spec-container > emu-intro:first-of-type,
+#spec-container > emu-clause:first-of-type,
+#spec-container > emu-annex:first-of-type {
+  margin-top: 0;
+}
+
+/* Figures and tables */
+figure {
+  display: block;
+  margin: 1em 0 3em 0;
+}
+figure object {
+  display: block;
+  margin: 0 auto;
+}
+figure table.real-table {
+  margin: 0 auto;
+}
+figure figcaption {
+  display: block;
+  color: #555555;
+  font-weight: bold;
+  text-align: center;
+}
+
+emu-table table {
+  margin: 0 auto;
+}
+
+emu-table table,
+table.real-table {
+  border-collapse: collapse;
+}
+
+emu-table td,
+emu-table th,
+table.real-table td,
+table.real-table th {
+  border: 1px solid black;
+  padding: 0.4em;
+  vertical-align: baseline;
+}
+emu-table th,
+emu-table thead td,
+table.real-table th {
+  background-color: #eeeeee;
+}
+
+emu-table td {
+  background: #fff;
+}
+
+/* Note: the left content edges of table.lightweight-table >tbody >tr >td
+   and div.display line up. */
+table.lightweight-table {
+  border-collapse: collapse;
+  margin: 0 0 0 1.5em;
+}
+table.lightweight-table td,
+table.lightweight-table th {
+  border: none;
+  padding: 0 0.5em;
+  vertical-align: baseline;
+}
+
+/* diff styles */
+ins {
+  background-color: #e0f8e0;
+  text-decoration: none;
+  border-bottom: 1px solid #396;
+}
+
+del {
+  background-color: #fee;
+}
+
+ins.block,
+del.block,
+emu-production > ins,
+emu-production > del,
+emu-grammar > ins,
+emu-grammar > del {
+  display: block;
+}
+emu-rhs > ins,
+emu-rhs > del {
+  display: inline;
+}
+
+tr.ins > td > ins {
+  border-bottom: none;
+}
+
+tr.ins > td {
+  background-color: #e0f8e0;
+}
+
+tr.del > td {
+  background-color: #fee;
+}
+
+/* Menu Styles */
+#menu-toggle {
+  font-size: 2em;
+
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 1.5em;
+  height: 1.5em;
+  z-index: 3;
+  visibility: hidden;
+  color: #1567a2;
+  background-color: #fff;
+
+  line-height: 1.5em;
+  text-align: center;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+
+  cursor: pointer;
+}
+
+#menu {
+  display: flex;
+  flex-direction: column;
+  width: 33%;
+  height: 100vh;
+  max-width: 500px;
+  box-sizing: border-box;
+  background-color: #ddd;
+  overflow: hidden;
+  transition: opacity 0.1s linear;
+  padding: 0 5px;
+  position: fixed;
+  left: 0;
+  top: 0;
+  border-right: 2px solid #bbb;
+
+  z-index: 2;
+}
+
+#menu-spacer {
+  flex-basis: 33%;
+  max-width: 500px;
+  flex-grow: 0;
+  flex-shrink: 0;
+}
+
+#menu a {
+  color: #1567a2;
+}
+
+#menu.active {
+  display: flex;
+  opacity: 1;
+  z-index: 2;
+}
+
+#menu-pins {
+  flex-grow: 1;
+  display: none;
+}
+
+#menu-pins.active {
+  display: block;
+}
+
+#menu-pins-list {
+  margin: 0;
+  padding: 0;
+  counter-reset: pins-counter;
+}
+
+#menu-pins-list > li:before {
+  content: counter(pins-counter);
+  counter-increment: pins-counter;
+  display: inline-block;
+  width: 25px;
+  text-align: center;
+  border: 1px solid #bbb;
+  padding: 2px;
+  margin: 4px;
+  box-sizing: border-box;
+  line-height: 1em;
+  background-color: #ccc;
+  border-radius: 4px;
+}
+#menu-toc > ol {
+  padding: 0;
+  flex-grow: 1;
+}
+
+#menu-toc > ol li {
+  padding: 0;
+}
+
+#menu-toc > ol,
+#menu-toc > ol ol {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}
+
+#menu-toc > ol ol {
+  padding-left: 0.75em;
+}
+
+#menu-toc li {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+#menu-toc .item-toggle {
+  display: inline-block;
+  transform: rotate(-45deg) translate(-5px, -5px);
+  transition: transform 0.1s ease;
+  text-align: center;
+  width: 20px;
+
+  color: #aab;
+
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+
+  cursor: pointer;
+}
+
+#menu-toc .item-toggle-none {
+  display: inline-block;
+  width: 20px;
+}
+
+#menu-toc li.active > .item-toggle {
+  transform: rotate(45deg) translate(-5px, -5px);
+}
+
+#menu-toc li > ol {
+  display: none;
+}
+
+#menu-toc li.active > ol {
+  display: block;
+}
+
+#menu-toc li.revealed > a {
+  background-color: #bbb;
+  font-weight: bold;
+  /*
+  background-color: #222;
+  color: #c6d8e4;
+  */
+}
+
+#menu-toc li.revealed-leaf > a {
+  color: #206ca7;
+  /*
+  background-color: #222;
+  color: #c6d8e4;
+  */
+}
+
+#menu-toc li.revealed > .item-toggle {
+  transform: rotate(45deg) translate(-5px, -5px);
+}
+
+#menu-toc li.revealed > ol {
+  display: block;
+}
+
+#menu-toc li > a {
+  padding: 2px 5px;
+}
+
+#menu > * {
+  margin-bottom: 5px;
+}
+
+.menu-pane-header {
+  padding: 0 5px;
+  text-transform: uppercase;
+  background-color: #aaa;
+  color: #335;
+  font-weight: bold;
+  letter-spacing: 2px;
+  flex-grow: 0;
+  flex-shrink: 0;
+  font-size: 0.8em;
+}
+
+.menu-pane-header emu-opt,
+.menu-pane-header emu-t,
+.menu-pane-header emu-nt {
+  margin-right: 0px;
+  display: inline;
+  color: inherit;
+}
+
+.menu-pane-header emu-rhs {
+  display: inline;
+  padding-left: 0px;
+  text-indent: 0px;
+}
+
+.menu-pane-header emu-geq {
+  margin-left: 0px;
+}
+
+a.menu-pane-header-production {
+  color: inherit;
+}
+
+.menu-pane-header-production {
+  text-transform: none;
+  letter-spacing: 1.5px;
+  padding-left: 0.5em;
+}
+
+#menu-toc {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  overflow: hidden;
+  flex-grow: 1;
+}
+
+#menu-toc ol.toc {
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+#menu-search {
+  position: relative;
+  flex-grow: 0;
+  flex-shrink: 0;
+  width: 100%;
+
+  display: flex;
+  flex-direction: column;
+
+  max-height: 300px;
+}
+
+#menu-trace-list {
+  display: none;
+}
+
+#menu-search-box {
+  box-sizing: border-box;
+  display: block;
+  width: 100%;
+  margin: 5px 0 0 0;
+  font-size: 1em;
+  padding: 2px;
+  background-color: #bbb;
+  border: 1px solid #999;
+}
+
+#menu-search-results {
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+li.menu-search-result-clause:before {
+  content: 'clause';
+  width: 40px;
+  display: inline-block;
+  text-align: right;
+  padding-right: 1ex;
+  color: #666;
+  font-size: 75%;
+}
+li.menu-search-result-op:before {
+  content: 'op';
+  width: 40px;
+  display: inline-block;
+  text-align: right;
+  padding-right: 1ex;
+  color: #666;
+  font-size: 75%;
+}
+
+li.menu-search-result-prod:before {
+  content: 'prod';
+  width: 40px;
+  display: inline-block;
+  text-align: right;
+  padding-right: 1ex;
+  color: #666;
+  font-size: 75%;
+}
+
+li.menu-search-result-term:before {
+  content: 'term';
+  width: 40px;
+  display: inline-block;
+  text-align: right;
+  padding-right: 1ex;
+  color: #666;
+  font-size: 75%;
+}
+
+#menu-search-results ul {
+  padding: 0 5px;
+  margin: 0;
+}
+
+#menu-search-results li {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+#menu-trace-list {
+  counter-reset: item;
+  margin: 0 0 0 20px;
+  padding: 0;
+}
+#menu-trace-list li {
+  display: block;
+  white-space: nowrap;
+}
+
+#menu-trace-list li .secnum:after {
+  content: ' ';
+}
+#menu-trace-list li:before {
+  content: counter(item) ' ';
+  background-color: #222;
+  counter-increment: item;
+  color: #999;
+  width: 20px;
+  height: 20px;
+  line-height: 20px;
+  display: inline-block;
+  text-align: center;
+  margin: 2px 4px 2px 0;
+}
+
+@media (max-width: 1000px) {
+  body {
+    margin: 0;
+    display: block;
+  }
+
+  #menu {
+    display: none;
+    padding-top: 3em;
+    width: 450px;
+  }
+
+  #menu.active {
+    position: fixed;
+    height: 100%;
+    left: 0;
+    top: 0;
+    right: 300px;
+  }
+
+  #menu-toggle {
+    visibility: visible;
+  }
+
+  #spec-container {
+    padding: 0 5px;
+  }
+
+  #references-pane-spacer {
+    display: none;
+  }
+}
+
+@media only screen and (max-width: 800px) {
+  #menu {
+    width: 100%;
+  }
+
+  h1 .secnum:empty {
+    margin: 0;
+    padding: 0;
+  }
+}
+
+/* Toolbox */
+.toolbox-container {
+  position: absolute;
+  display: none;
+  padding-bottom: 7px;
+}
+
+.toolbox-container.active {
+  display: inline-block;
+}
+
+.toolbox {
+  position: relative;
+  background: #ddd;
+  border: 1px solid #aaa;
+  color: #eee;
+  padding: 5px;
+  border-radius: 3px;
+}
+
+.toolbox a {
+  text-decoration: none;
+  padding: 0 5px;
+}
+
+.toolbox a:hover {
+  text-decoration: underline;
+}
+
+.toolbox:after,
+.toolbox:before {
+  top: 100%;
+  left: 15px;
+  border: solid transparent;
+  content: ' ';
+  height: 0;
+  width: 0;
+  position: absolute;
+  pointer-events: none;
+}
+
+.toolbox:after {
+  border-color: rgba(0, 0, 0, 0);
+  border-top-color: #ddd;
+  border-width: 10px;
+  margin-left: -10px;
+}
+.toolbox:before {
+  border-color: rgba(204, 204, 204, 0);
+  border-top-color: #aaa;
+  border-width: 12px;
+  margin-left: -12px;
+}
+
+#references-pane-container {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 250px;
+  display: none;
+  background-color: #ddd;
+  z-index: 1;
+}
+
+#references-pane-table-container {
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+#references-pane-spacer {
+  flex-basis: 33%;
+  max-width: 500px;
+}
+
+#references-pane {
+  flex-grow: 1;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+#references-pane-container.active {
+  display: flex;
+}
+
+#references-pane-close:after {
+  content: '✖';
+  float: right;
+  cursor: pointer;
+}
+
+#references-pane table tr td:first-child {
+  text-align: right;
+  padding-right: 5px;
+}
+
+@media print {
+  #menu-toggle {
+    display: none;
+  }
+}
+
+[normative-optional],
+[legacy] {
+  border-left: 5px solid #ff6600;
+  padding: 0.5em;
+  display: block;
+  background: #ffeedd;
+}
+
+.clause-attributes-tag {
+  text-transform: uppercase;
+  color: #884400;
+}
+
+.clause-attributes-tag a {
+  color: #884400;
+}
+
+/* Shortcuts help dialog */
+
+#shortcuts-help {
+  position: fixed;
+  left: 5%;
+  margin: 0 auto;
+  right: 5%;
+  z-index: 10;
+  top: 10%;
+  top: calc(5vw + 5vh);
+  padding: 30px 90px;
+  max-width: 500px;
+  outline: solid 10000px rgba(255, 255, 255, 0.6);
+  border-radius: 5px;
+  border-width: 1px 1px 0 1px;
+  background-color: #ddd;
+  display: none;
+}
+
+#shortcuts-help.active {
+  display: block;
+}
+
+#shortcuts-help ul {
+  padding: 0;
+}
+
+#shortcuts-help li {
+  display: flex;
+  justify-content: space-between;
+}
+
+#shortcuts-help code {
+  padding: 3px 10px;
+  border-radius: 3px;
+  border-width: 1px 1px 0 1px;
+  border-color: #bbb;
+  background-color: #eee;
+  box-shadow: inset 0 -1px 0 #ccc;
+}
+</style></head><body><div id="shortcuts-help">
+<ul>
+  <li><span>Toggle shortcuts help</span><code>?</code></li>
+  <li><span>Toggle "can call user code" annotations</span><code>u</code></li>
+
+  <li><span>Jump to search box</span><code>/</code></li>
+</ul></div><div id="menu-toggle"><svg xmlns="http://www.w3.org/2000/svg" style="width:100%; height:100%; stroke:currentColor" viewBox="0 0 120 120">
+      <title>Menu</title>
+      <path stroke-width="10" stroke-linecap="round" d="M30,60 h60  M30,30 m0,5 h60  M30,90 m0,-5 h60"></path>
+    </svg></div><div id="menu-spacer"></div><div id="menu"><div id="menu-search"><input type="text" id="menu-search-box" placeholder="Search..."><div id="menu-search-results" class="inactive"></div></div><div id="menu-pins"><div class="menu-pane-header">Pins</div><ul id="menu-pins-list"></ul></div><div class="menu-pane-header">Table of Contents</div><div id="menu-toc"><ol class="toc"><li><span class="item-toggle">◢</span><a href="#sec-intro" title="Introduction">Introduction</a><ol class="toc"><li><span class="item-toggle-none"></span><a href="#sec-rationale" title="Rationale">Rationale</a></li></ol></li><li><span class="item-toggle">◢</span><a href="#sec-jsx-grammar" title="JSX Definition"><span class="secnum">1</span> JSX Definition</a><ol class="toc"><li><span class="item-toggle-none"></span><a href="#sec-jsx-PrimaryExpression" title="Modified Productions"><span class="secnum">1.1</span> Modified Productions</a></li><li><span class="item-toggle-none"></span><a href="#sec-jsx-elements" title="JSX Elements"><span class="secnum">1.2</span> JSX Elements</a></li><li><span class="item-toggle-none"></span><a href="#sec-jsx-attributes" title="JSX Attributes"><span class="secnum">1.3</span> JSX Attributes</a></li><li><span class="item-toggle-none"></span><a href="#sec-jsx-children" title="JSX Children"><span class="secnum">1.4</span> JSX Children</a></li></ol></li><li><span class="item-toggle-none"></span><a href="#sec-why-not-template-literals" title="Why not Template Literals?"><span class="secnum">A</span> Why not Template Literals?</a></li><li><span class="item-toggle-none"></span><a href="#sec-why-not-JXON" title="Why not JXON?"><span class="secnum">B</span> Why not JXON?</a></li><li><span class="item-toggle-none"></span><a href="#sec-prior-art" title="Prior Art"><span class="secnum">C</span> Prior Art</a></li><li><span class="item-toggle-none"></span><a href="#sec-license" title="License"><span class="secnum">D</span> License</a></li></ol></div></div><div id="spec-container"><h1 class="version">Draft / February 23, 2022</h1><h1 class="title">JSX</h1>
+
+<emu-intro id="sec-intro">
+  <h1>Introduction</h1>
+  <p>JSX is an XML-like syntax extension to ECMAScript without any defined semantics. It's NOT intended to be implemented by engines or browsers. <b>It's NOT a proposal to incorporate JSX into the ECMAScript spec itself.</b> It's intended to be used by various preprocessors (transpilers) to transform these tokens into standard ECMAScript.
+  </p>
+
+  <!-- recommend using a HTML escape/unescape tool -->
+  <pre><code class="language-jsx hljs"><span class="hljs-comment">// Using JSX to express UI components</span>
+<span class="hljs-keyword">var</span> dropdown =
+  <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">Dropdown</span>&gt;</span>
+    A dropdown list
+    <span class="hljs-tag">&lt;<span class="hljs-name">Menu</span>&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">MenuItem</span>&gt;</span>Do Something<span class="hljs-tag">&lt;/<span class="hljs-name">MenuItem</span>&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">MenuItem</span>&gt;</span>Do Something Fun!<span class="hljs-tag">&lt;/<span class="hljs-name">MenuItem</span>&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">MenuItem</span>&gt;</span>Do Something Else<span class="hljs-tag">&lt;/<span class="hljs-name">MenuItem</span>&gt;</span>
+    <span class="hljs-tag">&lt;/<span class="hljs-name">Menu</span>&gt;</span>
+  <span class="hljs-tag">&lt;/<span class="hljs-name">Dropdown</span>&gt;</span></span>;
+
+<span class="hljs-title function_">render</span>(dropdown);</code></pre>
+
+  <emu-intro id="sec-rationale">
+  <h1>Rationale</h1>
+  <p>The purpose of this specification is to define a concise and familiar syntax for defining tree structures with attributes. A generic but well defined syntax enables a community of independent parsers and syntax highlighters to conform to a single specification.</p>
+  <p>Embedding a new syntax in an existing language is a risky venture. Other syntax implementors or the existing language may introduce another incompatible syntax extension. </p>
+  <p> Through a stand-alone specification, we make it easier for implementors of other syntax extensions to consider JSX when designing their own syntax. This will hopefully allow various new syntax extensions to co-exist.  </p>
+  <p> It is our intention to claim minimal syntactic real estate while keeping the syntax concise and familiar. That way we leave the door open for other extensions.</p>
+  <p> This specification does not attempt to comply with any XML or HTML specification. JSX is designed as an ECMAScript feature and the similarity to XML is only for familiarity.</p>
+
+  </emu-intro> 
+</emu-intro>
+
+
+<emu-clause id="sec-jsx-grammar">
+  <h1><span class="secnum">1</span> JSX Definition</h1>
+
+  <emu-clause id="sec-jsx-PrimaryExpression">
+    <h1><span class="secnum">1.1</span> Modified Productions</h1>
+    <p>JSX extends the <emu-nt><a href="https://tc39.es/ecma262/#prod-PrimaryExpression">PrimaryExpression</a></emu-nt> in the <a href="https://tc39.es/ecma262/">ECMAScript (ECMA-262)</a> grammar:</p>
+
+    <h2>Syntax</h2>
+    <emu-grammar><emu-production name="PrimaryExpression">
+    <emu-nt><a href="https://tc39.es/ecma262/#prod-PrimaryExpression">PrimaryExpression</a></emu-nt> <emu-geq>:</emu-geq> <ins><emu-rhs a="ylbqkuqt"><emu-nt>JSXElement</emu-nt></emu-rhs></ins>
+    <ins><emu-rhs a="xcc8tnvu"><emu-nt>JSXFragment</emu-nt></emu-rhs></ins>
+</emu-production>
+</emu-grammar>
+  </emu-clause>
+
+  <emu-clause id="sec-jsx-elements">
+    <h1><span class="secnum">1.2</span> JSX Elements</h1>
+    <h2>Syntax</h2>
+
+    <emu-grammar><emu-production name="JSXElement">
+    <emu-nt>JSXElement</emu-nt> <emu-geq>:</emu-geq> <emu-rhs a="b5zyfdt9"><emu-nt>JSXSelfClosingElement</emu-nt></emu-rhs>
+    <emu-rhs a="urykrh2r">
+        <emu-nt>JSXOpeningElement</emu-nt>
+        <emu-nt optional="">JSXChildren<emu-mods><emu-opt>opt</emu-opt></emu-mods></emu-nt>
+        <emu-nt>JSXClosingElement</emu-nt>
+    </emu-rhs>
+</emu-production>
+</emu-grammar>
+
+  <emu-note><span class="note">Note</span><div class="note-contents">
+  names of <emu-nt>JSXOpeningElement</emu-nt> and <emu-nt>JSXClosingElement</emu-nt> should match.
+  </div></emu-note>
+
+  <emu-grammar><emu-production name="JSXSelfClosingElement">
+    <emu-nt>JSXSelfClosingElement</emu-nt> <emu-geq>:</emu-geq> <emu-rhs a="dq-0kzot">
+        <emu-t>&lt;</emu-t>
+        <emu-nt>JSXElementName</emu-nt>
+        <emu-nt optional="">JSXAttributes<emu-mods><emu-opt>opt</emu-opt></emu-mods></emu-nt>
+        <emu-t>/</emu-t>
+        <emu-t>&gt;</emu-t>
+    </emu-rhs>
+</emu-production>
+<emu-production name="JSXOpeningElement">
+    <emu-nt>JSXOpeningElement</emu-nt> <emu-geq>:</emu-geq> <emu-rhs a="kg9_qgaz">
+        <emu-t>&lt;</emu-t>
+        <emu-nt>JSXElementName</emu-nt>
+        <emu-nt optional="">JSXAttributes<emu-mods><emu-opt>opt</emu-opt></emu-mods></emu-nt>
+        <emu-t>&gt;</emu-t>
+    </emu-rhs>
+</emu-production>
+<emu-production name="JSXClosingElement">
+    <emu-nt>JSXClosingElement</emu-nt> <emu-geq>:</emu-geq> <emu-rhs a="bhoep6g6">
+        <emu-t>&lt;</emu-t>
+        <emu-t>/</emu-t>
+        <emu-nt>JSXElementName</emu-nt>
+        <emu-t>&gt;</emu-t>
+    </emu-rhs>
+</emu-production>
+<emu-production name="JSXFragment">
+    <emu-nt>JSXFragment</emu-nt> <emu-geq>:</emu-geq> <emu-rhs a="glzxgj5o">
+        <emu-t>&lt;</emu-t>
+        <emu-t>&gt;</emu-t>
+        <emu-nt optional="">JSXChildren<emu-mods><emu-opt>opt</emu-opt></emu-mods></emu-nt>
+        <emu-t>&lt;</emu-t>
+        <emu-t>/</emu-t>
+        <emu-t>&gt;</emu-t>
+    </emu-rhs>
+</emu-production>
+<emu-production name="JSXElementName">
+    <emu-nt>JSXElementName</emu-nt> <emu-geq>:</emu-geq> <emu-rhs a="ehd8jr3p"><emu-nt>JSXIdentifier</emu-nt></emu-rhs>
+    <emu-rhs a="xmeipvkx"><emu-nt>JSXNamespacedName</emu-nt></emu-rhs>
+    <emu-rhs a="o4pa_wld"><emu-nt>JSXMemberExpression</emu-nt></emu-rhs>
+</emu-production>
+<emu-production name="JSXIdentifier">
+    <emu-nt>JSXIdentifier</emu-nt> <emu-geq>:</emu-geq> <emu-rhs a="q0afq8g8"><emu-nt><a href="https://tc39.es/ecma262/#prod-IdentifierStart">IdentifierStart</a></emu-nt></emu-rhs>
+    <emu-rhs a="wb5wvggw">
+        <emu-nt>JSXIdentifier</emu-nt>
+        <emu-nt><a href="https://tc39.es/ecma262/#prod-IdentifierPart">IdentifierPart</a></emu-nt>
+    </emu-rhs>
+    <emu-rhs a="mzgqbah0">
+        <emu-nt>JSXIdentifier</emu-nt>
+        <emu-gann>[no <emu-nt><a href="https://tc39.es/ecma262/#prod-WhiteSpace">WhiteSpace</a></emu-nt> or <emu-nt><a href="https://tc39.es/ecma262/#prod-annexB-Comment">Comment</a></emu-nt> here]</emu-gann>
+        <emu-t>-</emu-t>
+    </emu-rhs>
+</emu-production>
+<emu-production name="JSXNamespacedName">
+    <emu-nt>JSXNamespacedName</emu-nt> <emu-geq>:</emu-geq> <emu-rhs a="mhf25omg">
+        <emu-nt>JSXIdentifier</emu-nt>
+        <emu-t>:</emu-t>
+        <emu-nt>JSXIdentifier</emu-nt>
+    </emu-rhs>
+</emu-production>
+<emu-production name="JSXMemberExpression">
+    <emu-nt>JSXMemberExpression</emu-nt> <emu-geq>:</emu-geq> <emu-rhs a="si4-esnv">
+        <emu-nt>JSXIdentifier</emu-nt>
+        <emu-t>.</emu-t>
+        <emu-nt>JSXIdentifier</emu-nt>
+    </emu-rhs>
+    <emu-rhs a="y0hgepyh">
+        <emu-nt>JSXMemberExpression</emu-nt>
+        <emu-t>.</emu-t>
+        <emu-nt>JSXIdentifier</emu-nt>
+    </emu-rhs>
+</emu-production>
+</emu-grammar>
+  </emu-clause>
+
+  <emu-clause id="sec-jsx-attributes">
+    <h1><span class="secnum">1.3</span> JSX Attributes</h1>
+    <h2>Syntax</h2>
+
+    <emu-grammar><emu-production name="JSXAttributes">
+    <emu-nt>JSXAttributes</emu-nt> <emu-geq>:</emu-geq> <emu-rhs a="5mcgceuv">
+        <emu-nt>JSXSpreadAttribute</emu-nt>
+        <emu-nt optional="">JSXAttributes<emu-mods><emu-opt>opt</emu-opt></emu-mods></emu-nt>
+    </emu-rhs>
+    <emu-rhs a="dzdrzxq-">
+        <emu-nt>JSXAttribute</emu-nt>
+        <emu-nt optional="">JSXAttributes<emu-mods><emu-opt>opt</emu-opt></emu-mods></emu-nt>
+    </emu-rhs>
+</emu-production>
+<emu-production name="JSXSpreadAttribute">
+    <emu-nt>JSXSpreadAttribute</emu-nt> <emu-geq>:</emu-geq> <emu-rhs a="nhf9l0su">
+        <emu-t>{</emu-t>
+        <emu-t>...</emu-t>
+        <emu-nt><a href="https://tc39.es/ecma262/#prod-AssignmentExpression">AssignmentExpression</a></emu-nt>
+        <emu-t>}</emu-t>
+    </emu-rhs>
+</emu-production>
+<emu-production name="JSXAttribute">
+    <emu-nt>JSXAttribute</emu-nt> <emu-geq>:</emu-geq> <emu-rhs a="tveyz-zf">
+        <emu-nt>JSXAttributeName</emu-nt>
+        <emu-nt optional="">JSXAttributeInitializer<emu-mods><emu-opt>opt</emu-opt></emu-mods></emu-nt>
+    </emu-rhs>
+</emu-production>
+<emu-production name="JSXAttributeName">
+    <emu-nt>JSXAttributeName</emu-nt> <emu-geq>:</emu-geq> <emu-rhs a="ehd8jr3p"><emu-nt>JSXIdentifier</emu-nt></emu-rhs>
+    <emu-rhs a="xmeipvkx"><emu-nt>JSXNamespacedName</emu-nt></emu-rhs>
+</emu-production>
+<emu-production name="JSXAttributeInitializer">
+    <emu-nt>JSXAttributeInitializer</emu-nt> <emu-geq>:</emu-geq> <emu-rhs a="sfj32tqz">
+        <emu-t>=</emu-t>
+        <emu-nt>JSXAttributeValue</emu-nt>
+    </emu-rhs>
+</emu-production>
+<emu-production name="JSXAttributeValue">
+    <emu-nt>JSXAttributeValue</emu-nt> <emu-geq>:</emu-geq> <emu-rhs a="oyac4vtf">
+        <emu-t>"</emu-t>
+        <emu-nt optional="">JSXDoubleStringCharacters<emu-mods><emu-opt>opt</emu-opt></emu-mods></emu-nt>
+        <emu-t>"</emu-t>
+    </emu-rhs>
+    <emu-rhs a="j6v80tpm">
+        <emu-t>'</emu-t>
+        <emu-nt optional="">JSXSingleStringCharacters<emu-mods><emu-opt>opt</emu-opt></emu-mods></emu-nt>
+        <emu-t>'</emu-t>
+    </emu-rhs>
+    <emu-rhs a="0kze3tr4">
+        <emu-t>{</emu-t>
+        <emu-nt><a href="https://tc39.es/ecma262/#prod-AssignmentExpression">AssignmentExpression</a></emu-nt>
+        <emu-t>}</emu-t>
+    </emu-rhs>
+    <emu-rhs a="ylbqkuqt"><emu-nt>JSXElement</emu-nt></emu-rhs>
+    <emu-rhs a="xcc8tnvu"><emu-nt>JSXFragment</emu-nt></emu-rhs>
+</emu-production>
+<emu-production name="JSXDoubleStringCharacters">
+    <emu-nt>JSXDoubleStringCharacters</emu-nt> <emu-geq>:</emu-geq> <emu-rhs a="yodnvall">
+        <emu-nt>JSXDoubleStringCharacter</emu-nt>
+        <emu-nt optional="">JSXDoubleStringCharacters<emu-mods><emu-opt>opt</emu-opt></emu-mods></emu-nt>
+    </emu-rhs>
+</emu-production>
+<emu-production name="JSXDoubleStringCharacter">
+    <emu-nt>JSXDoubleStringCharacter</emu-nt> <emu-geq>:</emu-geq> <emu-rhs a="ha2dt7pv"><emu-nt><a href="https://tc39.es/ecma262/#prod-grammar-notation-SourceCharacter">SourceCharacter</a></emu-nt> <emu-gmod>but not <emu-t>"</emu-t></emu-gmod></emu-rhs>
+</emu-production>
+<emu-production name="JSXSingleStringCharacters">
+    <emu-nt>JSXSingleStringCharacters</emu-nt> <emu-geq>:</emu-geq> <emu-rhs a="xebljaxt">
+        <emu-nt>JSXSingleStringCharacter</emu-nt>
+        <emu-nt optional="">JSXSingleStringCharacters<emu-mods><emu-opt>opt</emu-opt></emu-mods></emu-nt>
+    </emu-rhs>
+</emu-production>
+<emu-production name="JSXSingleStringCharacter">
+    <emu-nt>JSXSingleStringCharacter</emu-nt> <emu-geq>:</emu-geq> <emu-rhs a="-ejk7lqw"><emu-nt><a href="https://tc39.es/ecma262/#prod-grammar-notation-SourceCharacter">SourceCharacter</a></emu-nt> <emu-gmod>but not <emu-t>'</emu-t></emu-gmod></emu-rhs>
+</emu-production>
+</emu-grammar>
+  </emu-clause>
+
+  <emu-clause id="sec-jsx-children">
+    <h1><span class="secnum">1.4</span> JSX Children</h1>
+    <h2>Syntax</h2>
+
+    <emu-grammar><emu-production name="JSXChildren">
+    <emu-nt>JSXChildren</emu-nt> <emu-geq>:</emu-geq> <emu-rhs a="ey07n052">
+        <emu-nt>JSXChild</emu-nt>
+        <emu-nt optional="">JSXChildren<emu-mods><emu-opt>opt</emu-opt></emu-mods></emu-nt>
+    </emu-rhs>
+</emu-production>
+<emu-production name="JSXChild">
+    <emu-nt>JSXChild</emu-nt> <emu-geq>:</emu-geq> <emu-rhs a="iwpkswln"><emu-nt>JSXText</emu-nt></emu-rhs>
+    <emu-rhs a="ylbqkuqt"><emu-nt>JSXElement</emu-nt></emu-rhs>
+    <emu-rhs a="7t9rmusx">
+        <emu-t>{</emu-t>
+        <emu-nt optional="">JSXChildExpression<emu-mods><emu-opt>opt</emu-opt></emu-mods></emu-nt>
+        <emu-t>}</emu-t>
+    </emu-rhs>
+</emu-production>
+<emu-production name="JSXText">
+    <emu-nt>JSXText</emu-nt> <emu-geq>:</emu-geq> <emu-rhs a="z5eumfmp">
+        <emu-nt>JSXTextCharacter</emu-nt>
+        <emu-nt optional="">JSXText<emu-mods><emu-opt>opt</emu-opt></emu-mods></emu-nt>
+    </emu-rhs>
+</emu-production>
+<emu-production name="JSXTextCharacter">
+    <emu-nt>JSXTextCharacter</emu-nt> <emu-geq>:</emu-geq> <emu-rhs a="9cx_g9a9"><emu-nt><a href="https://tc39.es/ecma262/#prod-grammar-notation-SourceCharacter">SourceCharacter</a></emu-nt> <emu-gmod>but not one of <emu-t>{</emu-t> or <emu-t>&lt;</emu-t> or <emu-t>&gt;</emu-t> or <emu-t>}</emu-t></emu-gmod></emu-rhs>
+</emu-production>
+<emu-production name="JSXChildExpression">
+    <emu-nt>JSXChildExpression</emu-nt> <emu-geq>:</emu-geq> <emu-rhs a="1px9pijq"><emu-nt><a href="https://tc39.es/ecma262/#prod-AssignmentExpression">AssignmentExpression</a></emu-nt></emu-rhs>
+    <emu-rhs a="w7ifpmpd">
+        <emu-t>...</emu-t>
+        <emu-nt><a href="https://tc39.es/ecma262/#prod-AssignmentExpression">AssignmentExpression</a></emu-nt>
+    </emu-rhs>
+</emu-production>
+</emu-grammar>
+  </emu-clause>
+</emu-clause>
+
+<emu-annex id="sec-why-not-template-literals">
+<h1><span class="secnum">A</span> Why not Template Literals?</h1>
+<p><a href="https://www.ecma-international.org/ecma-262/8.0/index.html">ECMAScript 6th Edition (ECMA-262)</a> introduces template literals which are intended to be used for embedding DSL in ECMAScript. Why not just use that instead of inventing a syntax that's not part of ECMAScript?</p>
+<p>Template literals work well for long embedded DSLs. Unfortunately the syntax noise is substantial when you exit in and out of embedded arbitrary ECMAScript expressions with identifiers in scope.</p>
+
+<pre><code class="language-jsx hljs"><span class="hljs-comment">// Template Literals</span>
+<span class="hljs-keyword">var</span> box = jsx<span class="hljs-string">`
+  &lt;<span class="hljs-subst">${Box}</span>&gt;
+    <span class="hljs-subst">${
+      shouldShowAnswer(user) ?
+      jsx<span class="hljs-string">`&lt;<span class="hljs-subst">${Answer}</span> value=<span class="hljs-subst">${<span class="hljs-literal">false</span>}</span>&gt;no&lt;/<span class="hljs-subst">${Answer}</span>&gt;`</span> :
+      jsx<span class="hljs-string">`
+        &lt;<span class="hljs-subst">${Box.Comment}</span>&gt;
+         Text Content
+        &lt;/<span class="hljs-subst">${Box.Comment}</span>&gt;
+      `</span>
+    }</span>
+  &lt;/<span class="hljs-subst">${Box}</span>&gt;
+`</span>;</code></pre>
+
+<p>It would be possible to use template literals as a syntactic entry point and change the semantics inside the template literal to allow embedded scripts that can be evaluated in scope:</p>
+
+<pre><code class="language-jsx hljs"><span class="hljs-comment">// Template Literals with embedded JSX</span>
+<span class="hljs-keyword">var</span> box = jsx<span class="hljs-string">`
+  &lt;Box&gt;
+    {
+      shouldShowAnswer(user) ?
+      &lt;Answer value={false}&gt;no&lt;/Answer&gt; :
+      &lt;Box.Comment&gt;
+         Text Content
+      &lt;/Box.Comment&gt;
+    }
+  &lt;/Box&gt;
+`</span>;</code></pre>
+
+<p>However, this would lead to further divergence. Tooling that is built around the assumptions imposed by template literals wouldn't work. It would undermine the meaning of template literals. It would be necessary to define how JSX behaves within the rest of the ECMAScript grammar within the template literal anyway.</p>
+
+<p>Therefore it's better to introduce JSX as an entirely new type of PrimaryExpression:</p>
+
+<pre><code class="language-jsx hljs"><span class="hljs-comment">// JSX</span>
+<span class="hljs-keyword">var</span> box =
+  <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">Box</span>&gt;</span>
+    {
+      shouldShowAnswer(user) ?
+      <span class="hljs-tag">&lt;<span class="hljs-name">Answer</span> <span class="hljs-attr">value</span>=<span class="hljs-string">{false}</span>&gt;</span>no<span class="hljs-tag">&lt;/<span class="hljs-name">Answer</span>&gt;</span> :
+      <span class="hljs-tag">&lt;<span class="hljs-name">Box.Comment</span>&gt;</span>
+         Text Content
+      <span class="hljs-tag">&lt;/<span class="hljs-name">Box.Comment</span>&gt;</span>
+    }
+  <span class="hljs-tag">&lt;/<span class="hljs-name">Box</span>&gt;</span></span>;</code></pre>
+
+<emu-note><span class="note">Note</span><div class="note-contents">
+  Don't you love the syntax highlighting here? ;) 
+</div></emu-note>
+
+</emu-annex>
+
+
+<emu-annex id="sec-why-not-JXON">
+<h1><span class="secnum">B</span> Why not JXON?</h1>
+<p>Another alternative would be to use object initializers (similar to <a href="https://github.com/tyrasd/jxon">JXON</a>). Unfortunately, the balanced braces do not give great syntactic hints for where an element starts and ends in large trees. Balanced named tags is a critical syntactic feature of the XML-style notation.</p>
+</emu-annex>
+
+<emu-annex id="sec-prior-art">
+<h1><span class="secnum">C</span> Prior Art</h1>
+<p>The JSX syntax is similar to the <a href="http://www.ecma-international.org/publications/files/ECMA-ST-WITHDRAWN/Ecma-357.pdf">E4X Specification (ECMA-357)</a>. E4X is a deprecated specification with deep reaching semantic meaning. JSX partially overlaps with a tiny subset of the E4X syntax. However, JSX has no relation to the E4X specification.</p>
+</emu-annex>
+
+<emu-annex id="sec-license">
+<h1><span class="secnum">D</span> License</h1>
+<p>Copyright (c) 2014 - present, <a href="https://about.facebook.com/meta/">Meta Platforms, Inc.</a> All rights reserved.</p>
+<p>
+This work is licensed under a <a href="http://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 International License</a>.
+</p>
+</emu-annex>
+</div></body>
\ No newline at end of file
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..b15bbb7
--- /dev/null
+++ b/package.json
@@ -0,0 +1,11 @@
+{
+  "private": true,
+  "scripts": {
+    "start": "npm run build-loose -- --watch",
+    "build": "npm run build-loose -- --strict",
+    "build-loose": "ecmarkup --verbose spec.emu index.html"
+  },
+  "devDependencies": {
+    "ecmarkup": "^9.8.1"
+  }
+}
diff --git a/spec.emu b/spec.emu
new file mode 100644
index 0000000..312bd05
--- /dev/null
+++ b/spec.emu
@@ -0,0 +1,258 @@
+<!doctype html>
+<meta charset="utf8">
+<link rel="stylesheet" href="./spec.css">
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/styles/github.min.css">
+<script src="./spec.js"></script>
+<pre class="metadata">
+title: JSX
+version: Draft
+contributors: Meta Platform Inc.
+copyright: false
+</pre>
+
+<emu-intro id="sec-intro">
+  <h1>Introduction</h1>
+  <p>JSX is an XML-like syntax extension to ECMAScript without any defined semantics. It's NOT intended to be implemented by engines or browsers. <b>It's NOT a proposal to incorporate JSX into the ECMAScript spec itself.</b> It's intended to be used by various preprocessors (transpilers) to transform these tokens into standard ECMAScript.
+  </p>
+
+  <!-- recommend using a HTML escape/unescape tool -->
+  <pre><code class="language-jsx">
+// Using JSX to express UI components
+var dropdown =
+  &lt;Dropdown&gt;
+    A dropdown list
+    &lt;Menu&gt;
+      &lt;MenuItem&gt;Do Something&lt;/MenuItem&gt;
+      &lt;MenuItem&gt;Do Something Fun!&lt;/MenuItem&gt;
+      &lt;MenuItem&gt;Do Something Else&lt;/MenuItem&gt;
+    &lt;/Menu&gt;
+  &lt;/Dropdown&gt;;
+
+render(dropdown);
+  </code></pre>
+
+  <emu-intro id="sec-rationale">
+  <h1>Rationale</h1>
+  <p>The purpose of this specification is to define a concise and familiar syntax for defining tree structures with attributes. A generic but well defined syntax enables a community of independent parsers and syntax highlighters to conform to a single specification.</p>
+  <p>Embedding a new syntax in an existing language is a risky venture. Other syntax implementors or the existing language may introduce another incompatible syntax extension. </p>
+  <p> Through a stand-alone specification, we make it easier for implementors of other syntax extensions to consider JSX when designing their own syntax. This will hopefully allow various new syntax extensions to co-exist.  </p>
+  <p> It is our intention to claim minimal syntactic real estate while keeping the syntax concise and familiar. That way we leave the door open for other extensions.</p>
+  <p> This specification does not attempt to comply with any XML or HTML specification. JSX is designed as an ECMAScript feature and the similarity to XML is only for familiarity.</p>
+
+  </emu-intro> 
+</emu-intro>
+
+
+<emu-clause id="sec-jsx-grammar">
+  <h1>JSX Definition</h1>
+
+  <emu-clause id="sec-jsx-PrimaryExpression">
+    <h1>Modified Productions</h1>
+    <p>JSX extends the |PrimaryExpression| in the <a href="https://tc39.es/ecma262/">ECMAScript (ECMA-262)</a> grammar:</p>
+
+    <h2>Syntax</h2>
+    <emu-grammar>
+  PrimaryExpression : 
+    <ins>JSXElement</ins>
+    <ins>JSXFragment</ins>
+    </emu-grammar>
+  </emu-clause>
+
+  <emu-clause id="sec-jsx-elements">
+    <h1>JSX Elements</h1>
+    <h2>Syntax</h2>
+
+    <emu-grammar>
+JSXElement :
+  JSXSelfClosingElement
+  JSXOpeningElement JSXChildren? JSXClosingElement
+  </emu-grammar>
+
+  <emu-note>
+  names of |JSXOpeningElement| and |JSXClosingElement| should match.
+  </emu-note>
+
+  <emu-grammar>
+JSXSelfClosingElement :
+    `<` JSXElementName JSXAttributes? `/` `>`
+
+JSXOpeningElement :
+    `<` JSXElementName JSXAttributes? `>`
+
+JSXClosingElement :
+    `<` `/` JSXElementName `>`
+
+JSXFragment :
+  `<` `>` JSXChildren? `<` `/` `>`
+
+JSXElementName :
+  JSXIdentifier
+  JSXNamespacedName
+  JSXMemberExpression
+
+JSXIdentifier :
+  IdentifierStart
+  JSXIdentifier IdentifierPart
+  JSXIdentifier [no one of WhiteSpace or Comment here] `-`
+
+JSXNamespacedName :
+  JSXIdentifier `:` JSXIdentifier
+
+JSXMemberExpression :
+  JSXIdentifier `.` JSXIdentifier
+  JSXMemberExpression `.` JSXIdentifier
+
+    </emu-grammar>
+  </emu-clause>
+
+  <emu-clause id="sec-jsx-attributes">
+    <h1>JSX Attributes</h1>
+    <h2>Syntax</h2>
+
+    <emu-grammar>
+JSXAttributes :
+  JSXSpreadAttribute JSXAttributes?
+  JSXAttribute JSXAttributes?
+
+JSXSpreadAttribute :
+  `{` `...` AssignmentExpression `}`
+
+JSXAttribute :
+  JSXAttributeName JSXAttributeInitializer?
+
+JSXAttributeName :
+  JSXIdentifier
+  JSXNamespacedName
+
+JSXAttributeInitializer :
+  `=` JSXAttributeValue
+
+JSXAttributeValue :
+  `"` JSXDoubleStringCharacters? `"`
+  `'` JSXSingleStringCharacters? `'`
+  `{` AssignmentExpression `}`
+  JSXElement
+  JSXFragment
+
+JSXDoubleStringCharacters :
+  JSXDoubleStringCharacter JSXDoubleStringCharacters?
+
+JSXDoubleStringCharacter :
+  SourceCharacter but not `"`
+
+JSXSingleStringCharacters :
+  JSXSingleStringCharacter JSXSingleStringCharacters?
+
+JSXSingleStringCharacter :
+  SourceCharacter but not `'`
+    </emu-grammar>
+  </emu-clause>
+
+  <emu-clause id="sec-jsx-children">
+    <h1>JSX Children</h1>
+    <h2>Syntax</h2>
+
+    <emu-grammar>
+JSXChildren :
+  JSXChild JSXChildren?
+
+JSXChild :
+  JSXText
+  JSXElement
+  `{` JSXChildExpression? `}`
+
+JSXText :
+  JSXTextCharacter JSXText?
+
+JSXTextCharacter :
+  SourceCharacter but not one of `{` or `<` or `>` or `}`
+
+JSXChildExpression :
+  AssignmentExpression
+  `...` AssignmentExpression
+
+    </emu-grammar>
+  </emu-clause>
+</emu-clause>
+
+<emu-annex id="sec-why-not-template-literals">
+<h1>Why not Template Literals?</h1>
+<p><a href="https://www.ecma-international.org/ecma-262/8.0/index.html">ECMAScript 6th Edition (ECMA-262)</a> introduces template literals which are intended to be used for embedding DSL in ECMAScript. Why not just use that instead of inventing a syntax that's not part of ECMAScript?</p>
+<p>Template literals work well for long embedded DSLs. Unfortunately the syntax noise is substantial when you exit in and out of embedded arbitrary ECMAScript expressions with identifiers in scope.</p>
+
+<pre><code class="language-jsx">
+// Template Literals
+var box = jsx`
+  &lt;${Box}&gt;
+    ${
+      shouldShowAnswer(user) ?
+      jsx`&lt;${Answer} value=${false}&gt;no&lt;/${Answer}&gt;` :
+      jsx`
+        &lt;${Box.Comment}&gt;
+         Text Content
+        &lt;/${Box.Comment}&gt;
+      `
+    }
+  &lt;/${Box}&gt;
+`;
+</code></pre>
+
+<p>It would be possible to use template literals as a syntactic entry point and change the semantics inside the template literal to allow embedded scripts that can be evaluated in scope:</p>
+
+<pre><code class="language-jsx">
+// Template Literals with embedded JSX
+var box = jsx`
+  &lt;Box&gt;
+    {
+      shouldShowAnswer(user) ?
+      &lt;Answer value={false}&gt;no&lt;/Answer&gt; :
+      &lt;Box.Comment&gt;
+         Text Content
+      &lt;/Box.Comment&gt;
+    }
+  &lt;/Box&gt;
+`;
+</code></pre>
+
+<p>However, this would lead to further divergence. Tooling that is built around the assumptions imposed by template literals wouldn't work. It would undermine the meaning of template literals. It would be necessary to define how JSX behaves within the rest of the ECMAScript grammar within the template literal anyway.</p>
+
+<p>Therefore it's better to introduce JSX as an entirely new type of PrimaryExpression:</p>
+
+<pre><code class="language-jsx">
+// JSX
+var box =
+  &lt;Box&gt;
+    {
+      shouldShowAnswer(user) ?
+      &lt;Answer value={false}&gt;no&lt;/Answer&gt; :
+      &lt;Box.Comment&gt;
+         Text Content
+      &lt;/Box.Comment&gt;
+    }
+  &lt;/Box&gt;;
+</code></pre>
+
+<emu-note>
+  Don't you love the syntax highlighting here? ;) 
+</emu-note>
+
+</emu-annex>
+
+
+<emu-annex id="sec-why-not-JXON">
+<h1>Why not JXON?</h1>
+<p>Another alternative would be to use object initializers (similar to <a href="https://github.com/tyrasd/jxon">JXON</a>). Unfortunately, the balanced braces do not give great syntactic hints for where an element starts and ends in large trees. Balanced named tags is a critical syntactic feature of the XML-style notation.</p>
+</emu-annex>
+
+<emu-annex id="sec-prior-art">
+<h1>Prior Art</h1>
+<p>The JSX syntax is similar to the <a href="http://www.ecma-international.org/publications/files/ECMA-ST-WITHDRAWN/Ecma-357.pdf">E4X Specification (ECMA-357)</a>. E4X is a deprecated specification with deep reaching semantic meaning. JSX partially overlaps with a tiny subset of the E4X syntax. However, JSX has no relation to the E4X specification.</p>
+</emu-annex>
+
+<emu-annex id="sec-license">
+<h1>License</h1>
+<p>Copyright (c) 2014 - present, <a href="https://about.facebook.com/meta/">Meta Platforms, Inc.</a> All rights reserved.</p>
+<p>
+This work is licensed under a <a href="http://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 International License</a>.
+</p>
+</emu-annex>