From a47c871fe98c9f4f99cac328ec53d25e84684985 Mon Sep 17 00:00:00 2001
From: Shu Uesugi <shu@chibicode.com>
Date: Tue, 17 Sep 2019 21:24:35 -0500
Subject: [PATCH 01/15] Create demo page

---
 pages/demo.tsx                        |  6 ++++
 src/components/DemoCardList.tsx       | 38 +++++++++++++++++++++++++
 src/components/EpisodeCardList.tsx    |  8 ++++--
 src/components/EpisodeHero.tsx        | 41 ++++++++++++++++++++-------
 src/components/EpisodePage.tsx        | 24 +++++++++++++---
 src/components/EpisodePageWrapper.tsx |  8 ++++--
 src/components/H.tsx                  |  8 ++++++
 src/components/NotFoundCardList.tsx   |  2 +-
 src/components/Toc.tsx                | 32 ++++++++++++++++++++-
 9 files changed, 147 insertions(+), 20 deletions(-)
 create mode 100644 pages/demo.tsx
 create mode 100644 src/components/DemoCardList.tsx

diff --git a/pages/demo.tsx b/pages/demo.tsx
new file mode 100644
index 000000000..77b804371
--- /dev/null
+++ b/pages/demo.tsx
@@ -0,0 +1,6 @@
+import React from 'react'
+import EpisodePageWrapper from 'src/components/EpisodePageWrapper'
+
+const Index = () => <EpisodePageWrapper episodeNumber={0} demo />
+
+export default Index
diff --git a/src/components/DemoCardList.tsx b/src/components/DemoCardList.tsx
new file mode 100644
index 000000000..ca3e6d581
--- /dev/null
+++ b/src/components/DemoCardList.tsx
@@ -0,0 +1,38 @@
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core'
+import { P } from 'src/components/ContentTags'
+import EpisodeCardList from 'src/components/EpisodeCardList'
+import Toc from 'src/components/Toc'
+import H from 'src/components/H'
+
+const DemoCardList = () => (
+  <EpisodeCardList
+    demo
+    cards={[
+      {
+        type: 'meta',
+        t8d: true,
+        title: (
+          <>
+            <H args={{ name: 'pageNotFound' }} />
+          </>
+        ),
+        content: (
+          <>
+            <P
+              t8d
+              css={css`
+                text-align: center;
+              `}
+            >
+              <H args={{ name: 'lookAtToc' }} />
+            </P>
+            <Toc />
+          </>
+        )
+      }
+    ]}
+  />
+)
+
+export default DemoCardList
diff --git a/src/components/EpisodeCardList.tsx b/src/components/EpisodeCardList.tsx
index c953f00ca..934152d67 100644
--- a/src/components/EpisodeCardList.tsx
+++ b/src/components/EpisodeCardList.tsx
@@ -33,10 +33,12 @@ export type EpisodeCardListType = readonly EpisodeCardType[]
 const EpisodeCardList = ({
   cards,
   notFound,
+  demo,
   underConstruction
 }: {
   cards: EpisodeCardListType
   notFound: boolean
+  demo: boolean
   underConstruction?: boolean
 }) => {
   const { episodeNumber } = useContext(EpisodeContext)
@@ -46,7 +48,7 @@ const EpisodeCardList = ({
   return (
     <>
       <EpisodePageInitialRenderWarning />
-      <EpisodeHero />
+      <EpisodeHero demo={demo} notFound={notFound} />
       <>
         {underConstruction && (
           <CardWrapper
@@ -118,6 +120,7 @@ const EpisodeCardList = ({
         )}
         {shareVisible &&
           !notFound &&
+          !demo &&
           cards.length - 1 === lastVisibleCardIndex && (
             <div
               css={css`
@@ -172,7 +175,8 @@ const EpisodeCardList = ({
 }
 
 EpisodeCardList.defaultProps = {
-  notFound: false
+  notFound: false,
+  demo: false
 }
 
 export default EpisodeCardList
diff --git a/src/components/EpisodeHero.tsx b/src/components/EpisodeHero.tsx
index cf69633d2..e27c134c8 100644
--- a/src/components/EpisodeHero.tsx
+++ b/src/components/EpisodeHero.tsx
@@ -24,7 +24,13 @@ const commonTitleClasses = css`
   text-align: center;
 `
 
-const EpisodeHero = () => {
+const EpisodeHero = ({
+  demo,
+  notFound
+}: {
+  demo: boolean
+  notFound: boolean
+}) => {
   const { episodeTitle, episodeNumber } = useContext(EpisodeContext)
   return (
     <header
@@ -33,7 +39,7 @@ const EpisodeHero = () => {
       `}
     >
       <>
-        {episodeTitle ? (
+        {episodeTitle || demo || notFound ? (
           <>
             <h3
               css={[
@@ -72,7 +78,13 @@ const EpisodeHero = () => {
                 `
               ]}
             >
-              {episodeTitle}
+              {notFound ? (
+                <H args={{ name: 'pageNotFound' }} />
+              ) : demo ? (
+                <H args={{ name: 'demoTitle' }} />
+              ) : (
+                episodeTitle
+              )}
             </h1>
           </>
         ) : (
@@ -99,17 +111,26 @@ const EpisodeHero = () => {
       </>
       <EmojiSeparator
         size="lg"
-        nodes={episodeEmojis[episodeNumber as keyof typeof episodeEmojis].map(
-          emoji =>
-            emoji === '🔲' ? (
-              <CustomEmoji type="mathBox" />
-            ) : (
-              <Emoji>{emoji}</Emoji>
-            )
+        nodes={(demo
+          ? ['🍱', '▶️', '🔲']
+          : notFound
+          ? ['❓', '😭', '❓']
+          : episodeEmojis[episodeNumber as keyof typeof episodeEmojis]
+        ).map(emoji =>
+          emoji === '🔲' ? (
+            <CustomEmoji type="mathBox" />
+          ) : (
+            <Emoji>{emoji}</Emoji>
+          )
         )}
       />
     </header>
   )
 }
 
+EpisodeHero.defaultProps = {
+  demo: false,
+  notFound: false
+}
+
 export default EpisodeHero
diff --git a/src/components/EpisodePage.tsx b/src/components/EpisodePage.tsx
index 0db43c6ce..5759cf9a6 100644
--- a/src/components/EpisodePage.tsx
+++ b/src/components/EpisodePage.tsx
@@ -12,6 +12,7 @@ import Page from 'src/components/Page'
 import TocModal from 'src/components/TocModal'
 import episodeEmojis from 'src/lib/episodeEmojis'
 import NotFoundCardList from 'src/components/NotFoundCardList'
+import DemoCardList from 'src/components/DemoCardList'
 import { ogUrl } from 'src/lib/meta'
 import locale from 'src/lib/locale'
 
@@ -21,6 +22,7 @@ export interface EpisodePageProps {
   episodeTitleString?: React.ReactNode
   episodeNumber: number
   notFound: boolean
+  demo: boolean
   contentName: ContentProps['name']
 }
 
@@ -30,6 +32,7 @@ const EpisodePage = ({
   episodeTitleString,
   episodeNumber,
   notFound,
+  demo,
   contentName
 }: EpisodePageProps) => {
   const title = `${
@@ -52,7 +55,7 @@ const EpisodePage = ({
         <link rel="canonical" href={ogUrl(episodeNumber)} />
       </Head>
       {modalVisible && <TocModal hideModal={hideModal} />}
-      {!notFound ? (
+      {!notFound && !demo ? (
         <EpisodePageHeader
           showModal={showModal}
           episodeNumber={episodeNumber}
@@ -73,15 +76,27 @@ const EpisodePage = ({
             showModal
           }}
         >
-          {notFound ? <NotFoundCardList /> : <Content name={contentName} />}
+          {notFound ? (
+            <NotFoundCardList />
+          ) : demo ? (
+            <DemoCardList />
+          ) : (
+            <Content name={contentName} />
+          )}
         </EpisodeContext.Provider>
       </Container>
-      {!notFound && (
+      {!notFound && !demo ? (
         <EpisodePageHeader
           showModal={showModal}
           episodeNumber={episodeNumber}
           isBottom
         />
+      ) : (
+        <div
+          css={css`
+            padding: ${spaces(3)} 0;
+          `}
+        ></div>
       )}
       <EpisodePageFooter />
     </Page>
@@ -89,7 +104,8 @@ const EpisodePage = ({
 }
 
 EpisodePage.defaultProps = {
-  notFound: false
+  notFound: false,
+  demo: false
 }
 
 export default EpisodePage
diff --git a/src/components/EpisodePageWrapper.tsx b/src/components/EpisodePageWrapper.tsx
index b274ea610..1cb6df4d2 100644
--- a/src/components/EpisodePageWrapper.tsx
+++ b/src/components/EpisodePageWrapper.tsx
@@ -7,11 +7,13 @@ import H from 'src/components/H'
 interface EpisodePageWrapperProps {
   episodeNumber: number
   notFound: boolean
+  demo: boolean
 }
 
 const EpisodePageWrapper = ({
   episodeNumber,
-  notFound
+  notFound,
+  demo
 }: EpisodePageWrapperProps) => (
   <GlobalContextSetter episodeNumber={episodeNumber}>
     <EpisodePage
@@ -29,12 +31,14 @@ const EpisodePageWrapper = ({
       }
       episodeNumber={episodeNumber}
       contentName={`${episodeNumber}` as EpisodePageProps['contentName']}
+      demo={demo}
     />
   </GlobalContextSetter>
 )
 
 EpisodePageWrapper.defaultProps = {
-  notFound: false
+  notFound: false,
+  demo: false
 }
 
 export default EpisodePageWrapper
diff --git a/src/components/H.tsx b/src/components/H.tsx
index cc952f3fa..f2f1a0ffe 100644
--- a/src/components/H.tsx
+++ b/src/components/H.tsx
@@ -153,6 +153,7 @@ interface HProps {
     | { name: 'testimonialsTitle' }
     | { name: 'testimonialsContent' }
     | { name: 'goToOtherPage' }
+    | { name: 'demoTitle' }
 }
 
 const H = ({ args, highlightType, episodeNumberOverrides }: HProps) => {
@@ -1355,6 +1356,13 @@ const H = ({ args, highlightType, episodeNumberOverrides }: HProps) => {
       )
     }
   }
+  if (args.name === 'demoTitle') {
+    if (locale === 'en') {
+      return <>Demo Page</>
+    } else {
+      return <>デモページ</>
+    }
+  }
   throw new Error()
 }
 
diff --git a/src/components/NotFoundCardList.tsx b/src/components/NotFoundCardList.tsx
index 74af10f75..6fb92ff2f 100644
--- a/src/components/NotFoundCardList.tsx
+++ b/src/components/NotFoundCardList.tsx
@@ -27,7 +27,7 @@ const NotFoundCardList = () => (
             >
               <H args={{ name: 'lookAtToc' }} />
             </P>
-            <Toc />
+            <Toc includeFirstPage />
           </>
         )
       }
diff --git a/src/components/Toc.tsx b/src/components/Toc.tsx
index b747d1bf6..ee052f1aa 100644
--- a/src/components/Toc.tsx
+++ b/src/components/Toc.tsx
@@ -3,10 +3,11 @@ import { jsx, css } from '@emotion/core'
 import { numEpisodesExceptFirstAndLast } from 'src/lib/episodeCategories'
 import { spaces, colors } from 'src/lib/theme'
 import { InternalLink } from 'src/components/ContentTags/Links'
+import { lessonTitle } from 'src/lib/titles'
 import H from 'src/components/H'
 import { episodeTitles } from 'src/lib/titles'
 
-const Toc = () => (
+const Toc = ({ includeFirstPage }: { includeFirstPage: boolean }) => (
   <ul
     css={css`
       margin-bottom: ${spaces(1)};
@@ -14,6 +15,31 @@ const Toc = () => (
       padding: 0;
     `}
   >
+    {includeFirstPage && (
+      <li
+        css={css`
+          font-weight: bold;
+          margin-bottom: ${spaces(0.25)};
+        `}
+      >
+        <InternalLink
+          href={`/`}
+          css={css`
+            text-decoration: none;
+            &:hover {
+              text-decoration: none;
+              background: ${colors('white')};
+            }
+          `}
+        >
+          <H
+            args={{ name: 'titlePrefixColored', addColon: true }}
+            episodeNumberOverrides={0}
+          />
+          {lessonTitle}
+        </InternalLink>
+      </li>
+    )}
     {[...Array(numEpisodesExceptFirstAndLast).keys()].map(i => {
       const episodeNumber = i + 1
       return (
@@ -72,4 +98,8 @@ const Toc = () => (
   </ul>
 )
 
+Toc.defaultProps = {
+  includeFirstPage: false
+}
+
 export default Toc

From 6ea1816aaacb563595d7089b73a0884cc93f7859 Mon Sep 17 00:00:00 2001
From: Shu Uesugi <shu@chibicode.com>
Date: Tue, 17 Sep 2019 22:12:43 -0500
Subject: [PATCH 02/15] Polish demo page

---
 pages/demo.tsx                  |  4 ++--
 src/components/DemoCardList.tsx | 40 +++++----------------------------
 src/components/EpisodePage.tsx  |  7 +++---
 src/components/H.tsx            | 11 ++++++++-
 src/contents/demo.en.tsx        | 26 +++++++++++++++++++++
 src/contents/demo.jp.tsx        | 23 +++++++++++++++++++
 src/lib/meta.ts                 |  2 ++
 7 files changed, 72 insertions(+), 41 deletions(-)
 create mode 100644 src/contents/demo.en.tsx
 create mode 100644 src/contents/demo.jp.tsx

diff --git a/pages/demo.tsx b/pages/demo.tsx
index 77b804371..f8c9687ab 100644
--- a/pages/demo.tsx
+++ b/pages/demo.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import EpisodePageWrapper from 'src/components/EpisodePageWrapper'
 
-const Index = () => <EpisodePageWrapper episodeNumber={0} demo />
+const Demo = () => <EpisodePageWrapper episodeNumber={0} demo />
 
-export default Index
+export default Demo
diff --git a/src/components/DemoCardList.tsx b/src/components/DemoCardList.tsx
index ca3e6d581..64f12a534 100644
--- a/src/components/DemoCardList.tsx
+++ b/src/components/DemoCardList.tsx
@@ -1,38 +1,8 @@
-/** @jsx jsx */
-import { css, jsx } from '@emotion/core'
-import { P } from 'src/components/ContentTags'
-import EpisodeCardList from 'src/components/EpisodeCardList'
-import Toc from 'src/components/Toc'
-import H from 'src/components/H'
+import React from 'react'
+import DemoJp from 'src/contents/demo.jp'
+import DemoEn from 'src/contents/demo.en'
+import locale from 'src/lib/locale'
 
-const DemoCardList = () => (
-  <EpisodeCardList
-    demo
-    cards={[
-      {
-        type: 'meta',
-        t8d: true,
-        title: (
-          <>
-            <H args={{ name: 'pageNotFound' }} />
-          </>
-        ),
-        content: (
-          <>
-            <P
-              t8d
-              css={css`
-                text-align: center;
-              `}
-            >
-              <H args={{ name: 'lookAtToc' }} />
-            </P>
-            <Toc />
-          </>
-        )
-      }
-    ]}
-  />
-)
+const DemoCardList = () => (locale === 'en' ? <DemoEn /> : <DemoJp />)
 
 export default DemoCardList
diff --git a/src/components/EpisodePage.tsx b/src/components/EpisodePage.tsx
index 5759cf9a6..95c3f3081 100644
--- a/src/components/EpisodePage.tsx
+++ b/src/components/EpisodePage.tsx
@@ -13,7 +13,7 @@ import TocModal from 'src/components/TocModal'
 import episodeEmojis from 'src/lib/episodeEmojis'
 import NotFoundCardList from 'src/components/NotFoundCardList'
 import DemoCardList from 'src/components/DemoCardList'
-import { ogUrl } from 'src/lib/meta'
+import { ogUrl, demoUrl } from 'src/lib/meta'
 import locale from 'src/lib/locale'
 
 export interface EpisodePageProps {
@@ -45,14 +45,15 @@ const EpisodePage = ({
   const [modalVisible, setModalVisible] = useState(false)
   const hideModal = () => setModalVisible(false)
   const showModal = () => setModalVisible(true)
+  const url = demo ? demoUrl : ogUrl(episodeNumber)
   return (
     <Page>
       <Head>
         <title key="title">{title}</title>
         <meta property="og:title" content={title} />
         <meta property="og:site_name" content={lessonTitle} />
-        <meta property="og:url" content={ogUrl(episodeNumber)} />
-        <link rel="canonical" href={ogUrl(episodeNumber)} />
+        <meta property="og:url" content={url} />
+        <link rel="canonical" href={url} />
       </Head>
       {modalVisible && <TocModal hideModal={hideModal} />}
       {!notFound && !demo ? (
diff --git a/src/components/H.tsx b/src/components/H.tsx
index f2f1a0ffe..38c7ba91b 100644
--- a/src/components/H.tsx
+++ b/src/components/H.tsx
@@ -154,6 +154,8 @@ interface HProps {
     | { name: 'testimonialsContent' }
     | { name: 'goToOtherPage' }
     | { name: 'demoTitle' }
+    | { name: 'demoFirstCardTitle' }
+    | { name: 'demoFirstCardContent' }
 }
 
 const H = ({ args, highlightType, episodeNumberOverrides }: HProps) => {
@@ -807,7 +809,7 @@ const H = ({ args, highlightType, episodeNumberOverrides }: HProps) => {
   }
   if (args.name === 'lookAtToc') {
     if (locale === 'en') {
-      return <>Take a look at the table of contents:</>
+      return <>Here’s table of contents:</>
     } else {
       return <>目次はこちらです:</>
     }
@@ -1363,6 +1365,13 @@ const H = ({ args, highlightType, episodeNumberOverrides }: HProps) => {
       return <>デモページ</>
     }
   }
+  if (args.name === 'demoFirstCardTitle') {
+    if (locale === 'en') {
+      return <>This is a demo page</>
+    } else {
+      return <>これはデモページです</>
+    }
+  }
   throw new Error()
 }
 
diff --git a/src/contents/demo.en.tsx b/src/contents/demo.en.tsx
new file mode 100644
index 000000000..95e3684e0
--- /dev/null
+++ b/src/contents/demo.en.tsx
@@ -0,0 +1,26 @@
+import React from 'react'
+import { P, Strong } from 'src/components/ContentTags'
+import EpisodeCardList from 'src/components/EpisodeCardList'
+
+const DemoCardList = () => (
+  <EpisodeCardList
+    demo
+    cards={[
+      {
+        t8d: true,
+        title: <>This is a demo page</>,
+        content: (
+          <>
+            <P t8d>
+              I use this page when demonstrating materials from this course to
+              someone <Strong>in person</Strong>. So there won’t be any
+              explanations written on this page.
+            </P>
+          </>
+        )
+      }
+    ]}
+  />
+)
+
+export default DemoCardList
diff --git a/src/contents/demo.jp.tsx b/src/contents/demo.jp.tsx
new file mode 100644
index 000000000..f5a695758
--- /dev/null
+++ b/src/contents/demo.jp.tsx
@@ -0,0 +1,23 @@
+import React from 'react'
+import { P } from 'src/components/ContentTags'
+import EpisodeCardList from 'src/components/EpisodeCardList'
+
+const DemoCardList = () => (
+  <EpisodeCardList
+    demo
+    cards={[
+      {
+        title: <>これはデモページです</>,
+        content: (
+          <>
+            <P>
+              このページはデモ用に作ったページです。わたしが人前で解説しながらこのページを使うので、説明は一切書いていません。
+            </P>
+          </>
+        )
+      }
+    ]}
+  />
+)
+
+export default DemoCardList
diff --git a/src/lib/meta.ts b/src/lib/meta.ts
index de81bab0b..2cc2a453c 100644
--- a/src/lib/meta.ts
+++ b/src/lib/meta.ts
@@ -9,3 +9,5 @@ export const ogImageUrl = `${baseUrl}/static/images/og-image-${locale}-v5.png`
 
 export const ogUrl = (episodeNumber: number) =>
   `${baseUrl}${episodeNumber > 0 ? `/${episodeNumber}/` : ''}`
+
+export const demoUrl = `${baseUrl}/demo/`

From 04fff22fc4f7d4ebeee05a908235d0349a87bd96 Mon Sep 17 00:00:00 2001
From: Shu Uesugi <shu@chibicode.com>
Date: Tue, 17 Sep 2019 22:47:10 -0500
Subject: [PATCH 03/15] Continue with demo

---
 scripts/lib/runnerConfigs.ts |  3 +-
 src/contents/demo.en.tsx     |  1 +
 src/contents/demo.jp.tsx     | 74 +++++++++++++++++++++++++++++++++++-
 src/lib/runners/pgxb.json    |  2 +-
 4 files changed, 75 insertions(+), 5 deletions(-)

diff --git a/scripts/lib/runnerConfigs.ts b/scripts/lib/runnerConfigs.ts
index e2ace60be..85f7b395b 100644
--- a/scripts/lib/runnerConfigs.ts
+++ b/scripts/lib/runnerConfigs.ts
@@ -967,8 +967,7 @@ export const pgxb: ExpressionRunnerShorthandConfig = {
   initialExpressionContainers: [
     initialExpressionContainers.bmar,
     initialExpressionContainers.ilbg
-  ],
-  variableSize: 'md'
+  ]
 }
 
 export const ednv: ExpressionRunnerShorthandConfig = {
diff --git a/src/contents/demo.en.tsx b/src/contents/demo.en.tsx
index 95e3684e0..d196c3e6b 100644
--- a/src/contents/demo.en.tsx
+++ b/src/contents/demo.en.tsx
@@ -8,6 +8,7 @@ const DemoCardList = () => (
     cards={[
       {
         t8d: true,
+        type: 'summary',
         title: <>This is a demo page</>,
         content: (
           <>
diff --git a/src/contents/demo.jp.tsx b/src/contents/demo.jp.tsx
index f5a695758..9d92b35fb 100644
--- a/src/contents/demo.jp.tsx
+++ b/src/contents/demo.jp.tsx
@@ -1,20 +1,90 @@
 import React from 'react'
-import { P } from 'src/components/ContentTags'
+import { P, Hr } from 'src/components/ContentTags'
 import EpisodeCardList from 'src/components/EpisodeCardList'
+import ExpressionRunnerSeparator from 'src/components/ExpressionRunnerSeparator'
+import H from 'src/components/H'
+import * as R from 'src/components/Runners'
 
 const DemoCardList = () => (
   <EpisodeCardList
     demo
     cards={[
       {
+        type: 'summary',
         title: <>これはデモページです</>,
         content: (
           <>
             <P>
-              このページはデモ用に作ったページです。わたしが人前で解説しながらこのページを使うので、説明は一切書いていません。
+              このページはデモ用に作ったページです。わたしがデモを行いながらこのページを使うので、説明は一切書いていません。
             </P>
           </>
         )
+      },
+      {
+        title: (
+          <>
+            計算箱の「
+            <H args={{ name: 'plusOneFeature' }} />」
+          </>
+        ),
+        content: (
+          <>
+            <R.Mcug />
+            <R.Aovj />
+          </>
+        )
+      },
+      {
+        title: (
+          <>
+            計算箱の「
+            <H args={{ name: 'minusOneFeature' }} />」
+          </>
+        ),
+        content: (
+          <>
+            <R.Xmqp />
+          </>
+        )
+      },
+      {
+        title: (
+          <>
+            「
+            <H args={{ name: 'plusOneFeature' }} />
+            」と「
+            <H args={{ name: 'minusOneFeature' }} />
+            」を複数使う
+          </>
+        ),
+        content: (
+          <>
+            <R.Eagi></R.Eagi>
+            <R.Yjur></R.Yjur>
+          </>
+        )
+      },
+      {
+        title: (
+          <>
+            計算箱の「
+            <H args={{ name: 'repeatFeature' }} />」
+          </>
+        ),
+        content: (
+          <>
+            <R.Ednv />
+            <R.Pgxb />
+            <Hr />
+            <R.Xpks />
+            <ExpressionRunnerSeparator />
+            <R.Dgpx></R.Dgpx>
+            <Hr />
+            <R.Sucz></R.Sucz>
+            <ExpressionRunnerSeparator />
+            <R.Xlgb></R.Xlgb>
+          </>
+        )
       }
     ]}
   />
diff --git a/src/lib/runners/pgxb.json b/src/lib/runners/pgxb.json
index 4311e7324..2619082b2 100644
--- a/src/lib/runners/pgxb.json
+++ b/src/lib/runners/pgxb.json
@@ -62,7 +62,7 @@
   "hideControls": false,
   "explanationsVisibility": "hiddenInitialPausedOnly",
   "hidePriorities": true,
-  "variableSize": "md",
+  "variableSize": "lg",
   "containerSize": "xxs",
   "hidePlayButton": false,
   "hideBottomRightBadges": false,

From e150fc81dd661c0edfbb6300292f2a8c2f3db8bc Mon Sep 17 00:00:00 2001
From: Shu Uesugi <shu@chibicode.com>
Date: Wed, 18 Sep 2019 09:38:41 -0700
Subject: [PATCH 04/15] Continue with demo page

---
 src/contents/demo.jp.tsx | 75 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 75 insertions(+)

diff --git a/src/contents/demo.jp.tsx b/src/contents/demo.jp.tsx
index 9d92b35fb..d9d1d73ec 100644
--- a/src/contents/demo.jp.tsx
+++ b/src/contents/demo.jp.tsx
@@ -2,8 +2,13 @@ import React from 'react'
 import { P, Hr } from 'src/components/ContentTags'
 import EpisodeCardList from 'src/components/EpisodeCardList'
 import ExpressionRunnerSeparator from 'src/components/ExpressionRunnerSeparator'
+import EmojiSeparator from 'src/components/EmojiSeparator'
+import Emoji from 'src/components/Emoji'
+import CustomEmoji from 'src/components/CustomEmoji'
 import H from 'src/components/H'
 import * as R from 'src/components/Runners'
+import { BasicRules, Unmatched } from 'src/contents/4.jp'
+import { ThreeRowRules, Beginner5Rules } from 'src/contents/5.jp'
 
 const DemoCardList = () => (
   <EpisodeCardList
@@ -20,6 +25,21 @@ const DemoCardList = () => (
           </>
         )
       },
+      {
+        title: <>パート1: 計算箱の説明</>,
+        content: (
+          <>
+            <EmojiSeparator
+              nodes={[
+                <CustomEmoji type="mathBox" />,
+                <CustomEmoji type="mathBox" />,
+                <CustomEmoji type="mathBox" />
+              ]}
+              description={<>計算箱</>}
+            />
+          </>
+        )
+      },
       {
         title: (
           <>
@@ -85,6 +105,61 @@ const DemoCardList = () => (
             <R.Xlgb></R.Xlgb>
           </>
         )
+      },
+      {
+        title: <>パート2: 弁当箱の説明</>,
+        content: (
+          <>
+            <EmojiSeparator
+              nodes={[<Emoji>🍱</Emoji>, <Emoji>🍱</Emoji>, <Emoji>🍱</Emoji>]}
+              description={<>弁当箱</>}
+            />
+          </>
+        )
+      },
+      {
+        title: <>2段の弁当箱</>,
+        content: (
+          <>
+            <R.Wunw />
+            <R.Hluq />
+            <R.Jbam />
+            <R.Zuus />
+          </>
+        )
+      },
+      {
+        title: <>弁当箱の法則</>,
+        type: 'summary',
+        content: (
+          <>
+            <BasicRules includeFuncUnbound />
+            <Hr />
+            <Unmatched />
+          </>
+        )
+      },
+      {
+        title: <>3段の弁当箱</>,
+        content: (
+          <>
+            <R.Beiz />
+            <R.Hdxc />
+            <R.Thkn />
+            <R.Cuwg />
+          </>
+        )
+      },
+      {
+        type: 'summary',
+        title: <>3段の弁当箱の法則</>,
+        content: (
+          <>
+            <ThreeRowRules />
+            <Hr />
+            <Beginner5Rules />
+          </>
+        )
       }
     ]}
   />

From dee8f954748c94a593d264be6cad5ea202f2b72b Mon Sep 17 00:00:00 2001
From: Shu Uesugi <shu@chibicode.com>
Date: Wed, 18 Sep 2019 10:15:36 -0700
Subject: [PATCH 05/15] Continue with 6

---
 src/components/H.tsx     | 14 +++++++++
 src/contents/6.jp.tsx    |  4 +--
 src/contents/demo.jp.tsx | 68 +++++++++++++++++++++++++++++++++++++++-
 3 files changed, 82 insertions(+), 4 deletions(-)

diff --git a/src/components/H.tsx b/src/components/H.tsx
index 38c7ba91b..8bd1f314a 100644
--- a/src/components/H.tsx
+++ b/src/components/H.tsx
@@ -156,6 +156,7 @@ interface HProps {
     | { name: 'demoTitle' }
     | { name: 'demoFirstCardTitle' }
     | { name: 'demoFirstCardContent' }
+    | { name: 'whatTheNumberIsCaption' }
 }
 
 const H = ({ args, highlightType, episodeNumberOverrides }: HProps) => {
@@ -1372,6 +1373,19 @@ const H = ({ args, highlightType, episodeNumberOverrides }: HProps) => {
       return <>これはデモページです</>
     }
   }
+  if (args.name === 'whatTheNumberIsCaption') {
+    if (locale === 'en') {
+      return <></>
+    } else {
+      return (
+        <>
+          右下にある <Emoji>🅰️</Emoji> がついた料理の数が、
+          <br />
+          変換後の計算箱の数字
+        </>
+      )
+    }
+  }
   throw new Error()
 }
 
diff --git a/src/contents/6.jp.tsx b/src/contents/6.jp.tsx
index 2e12f67f6..1bd023c68 100644
--- a/src/contents/6.jp.tsx
+++ b/src/contents/6.jp.tsx
@@ -717,9 +717,7 @@ export default () => (
               ]}
             />
             <R.Hehx>
-              右下にある <Emoji>🅰️</Emoji> がついた料理の数が、
-              <br />
-              変換後の計算箱の数字
+              <H args={{ name: 'whatTheNumberIsCaption' }} />
             </R.Hehx>
             <BubbleQuotes
               quotes={[
diff --git a/src/contents/demo.jp.tsx b/src/contents/demo.jp.tsx
index d9d1d73ec..f353fc2e9 100644
--- a/src/contents/demo.jp.tsx
+++ b/src/contents/demo.jp.tsx
@@ -15,7 +15,7 @@ const DemoCardList = () => (
     demo
     cards={[
       {
-        type: 'summary',
+        type: 'meta',
         title: <>これはデモページです</>,
         content: (
           <>
@@ -26,6 +26,7 @@ const DemoCardList = () => (
         )
       },
       {
+        type: 'sideNote',
         title: <>パート1: 計算箱の説明</>,
         content: (
           <>
@@ -160,6 +161,71 @@ const DemoCardList = () => (
             <Beginner5Rules />
           </>
         )
+      },
+      {
+        type: 'sideNote',
+        title: <>パート3: 弁当箱を計算箱に変換</>,
+        content: (
+          <>
+            <EmojiSeparator
+              nodes={[
+                <CustomEmoji type="mathBox" />,
+                <CustomEmoji type="mathBox" />,
+                <CustomEmoji type="mathBox" />
+              ]}
+              description={<>計算箱</>}
+            />
+          </>
+        )
+      },
+      {
+        title: <>弁当箱を計算箱に変換</>,
+        content: (
+          <>
+            <R.Jjjh />
+            <R.Mifg />
+            <R.Epoi />
+            <R.Vlob />
+          </>
+        )
+      },
+      {
+        title: <>計算箱に変換できる法則</>,
+        type: 'summary',
+        content: (
+          <>
+            <R.Eozk>
+              <H args={{ name: 'convertiblePatternCaption' }} />
+            </R.Eozk>
+            <R.Hehx>
+              <H args={{ name: 'whatTheNumberIsCaption' }} />
+            </R.Hehx>
+            <Hr />
+            <R.Wopl>
+              <H
+                args={{ name: 'canBeConvertedCaption', letter: 'e', number: 2 }}
+              />
+            </R.Wopl>
+            <ExpressionRunnerSeparator />
+            <R.Pmdm />
+            <Hr />
+            <R.Duuk>
+              <H
+                args={{ name: 'canBeConvertedCaption', letter: 'i', number: 4 }}
+              />
+            </R.Duuk>
+            <ExpressionRunnerSeparator />
+            <R.Kizi />
+            <Hr />
+            <R.Dwzy>
+              <H
+                args={{ name: 'canBeConvertedCaption', letter: 'a', number: 0 }}
+              />
+            </R.Dwzy>
+            <ExpressionRunnerSeparator />
+            <R.Jwah />
+          </>
+        )
       }
     ]}
   />

From 128bbf2c38bd7ea0ca291175bdd8115b9e3427f6 Mon Sep 17 00:00:00 2001
From: Shu Uesugi <shu@chibicode.com>
Date: Wed, 18 Sep 2019 11:46:20 -0700
Subject: [PATCH 06/15] Run and convert

---
 src/contents/demo.jp.tsx | 30 ++++++++++++++++++++++++++++++
 1 file changed, 30 insertions(+)

diff --git a/src/contents/demo.jp.tsx b/src/contents/demo.jp.tsx
index f353fc2e9..1829bd503 100644
--- a/src/contents/demo.jp.tsx
+++ b/src/contents/demo.jp.tsx
@@ -226,6 +226,36 @@ const DemoCardList = () => (
             <R.Jwah />
           </>
         )
+      },
+      {
+        title: <>実行してから変換</>,
+        content: (
+          <>
+            <R.Dcji />
+            <Hr />
+            <R.Zlrx />
+            <Hr />
+            <R.Dwzy>
+              <H
+                args={{ name: 'canBeConvertedCaption', letter: 'a', number: 0 }}
+              />
+            </R.Dwzy>
+            <ExpressionRunnerSeparator />
+            <R.Jwah />
+            <Hr />
+            <R.Zahd />
+            <Hr />
+            <R.Csqj />
+            <Hr />
+            <R.Hhdu>
+              <H
+                args={{ name: 'canBeConvertedCaption', letter: 'e', number: 1 }}
+              />
+            </R.Hhdu>
+            <ExpressionRunnerSeparator />
+            <R.Rnug />
+          </>
+        )
       }
     ]}
   />

From 5c6af9e956a326f265d4c649f30ce0ec9b332837 Mon Sep 17 00:00:00 2001
From: Shu Uesugi <shu@chibicode.com>
Date: Wed, 18 Sep 2019 16:42:25 -0700
Subject: [PATCH 07/15] :pencil:

---
 src/contents/demo.jp.tsx | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/src/contents/demo.jp.tsx b/src/contents/demo.jp.tsx
index 1829bd503..48ab01904 100644
--- a/src/contents/demo.jp.tsx
+++ b/src/contents/demo.jp.tsx
@@ -256,6 +256,24 @@ const DemoCardList = () => (
             <R.Rnug />
           </>
         )
+      },
+      {
+        title: <>パート4: 1を足す</>,
+        content: (
+          <>
+            <R.Spga>
+              <H
+                args={{
+                  name: 'canBeConvertedCaption',
+                  letter: 'f',
+                  number: 2
+                }}
+              />
+            </R.Spga>
+            <Hr />
+            <R.Nlbn />
+          </>
+        )
       }
     ]}
   />

From f14ce0b1170777a18cf5ef3a94b75ebfcf7ab08b Mon Sep 17 00:00:00 2001
From: Shu Uesugi <shu@chibicode.com>
Date: Wed, 18 Sep 2019 17:11:25 -0700
Subject: [PATCH 08/15] Continue with demo

---
 scripts/lib/runnerConfigs.ts    |    8 +
 src/components/Runners/Rjzw.tsx |   12 +
 src/components/Runners/index.ts |    1 +
 src/contents/demo.jp.tsx        |   61 +-
 src/lib/runners/rjzw.json       | 2903 +++++++++++++++++++++++++++++++
 5 files changed, 2983 insertions(+), 2 deletions(-)
 create mode 100644 src/components/Runners/Rjzw.tsx
 create mode 100644 src/lib/runners/rjzw.json

diff --git a/scripts/lib/runnerConfigs.ts b/scripts/lib/runnerConfigs.ts
index 85f7b395b..570e3e3ad 100644
--- a/scripts/lib/runnerConfigs.ts
+++ b/scripts/lib/runnerConfigs.ts
@@ -1329,6 +1329,14 @@ export const plde: ExpressionRunnerShorthandConfig = {
   variableSize: 'md'
 }
 
+export const rjzw: ExpressionRunnerShorthandConfig = {
+  runner: 'playButtonOnly',
+  initialExpressionContainer: initialExpressionContainers.uqth,
+  showPriorities: true,
+  variableSize: 'md',
+  skipToTheEnd: false
+}
+
 export const jsvg: ExpressionRunnerShorthandConfig = {
   runner: 'playButtonOnly',
   initialExpressionContainer: initialExpressionContainers.uqth,
diff --git a/src/components/Runners/Rjzw.tsx b/src/components/Runners/Rjzw.tsx
new file mode 100644
index 000000000..f39138f63
--- /dev/null
+++ b/src/components/Runners/Rjzw.tsx
@@ -0,0 +1,12 @@
+import React from 'react'
+import ExpressionRunnerPrecomputed from 'src/components/ExpressionRunnerPrecomputed'
+import config from 'src/lib/runners/rjzw.json'
+
+const Rjzw = ({ children }: { children?: React.ReactNode }) => (
+  // @ts-ignore
+  <ExpressionRunnerPrecomputed {...config}>
+    {children}
+  </ExpressionRunnerPrecomputed>
+)
+
+export default Rjzw
diff --git a/src/components/Runners/index.ts b/src/components/Runners/index.ts
index 4591b6d5a..bcb1e164c 100644
--- a/src/components/Runners/index.ts
+++ b/src/components/Runners/index.ts
@@ -195,6 +195,7 @@ export { default as Fhrd } from 'src/components/Runners/Fhrd'
 export { default as Bgxi } from 'src/components/Runners/Bgxi'
 export { default as Qrfw } from 'src/components/Runners/Qrfw'
 export { default as Plde } from 'src/components/Runners/Plde'
+export { default as Rjzw } from 'src/components/Runners/Rjzw'
 export { default as Jsvg } from 'src/components/Runners/Jsvg'
 export { default as Uexo } from 'src/components/Runners/Uexo'
 export { default as Hdhy } from 'src/components/Runners/Hdhy'
diff --git a/src/contents/demo.jp.tsx b/src/contents/demo.jp.tsx
index 48ab01904..1ae1c52da 100644
--- a/src/contents/demo.jp.tsx
+++ b/src/contents/demo.jp.tsx
@@ -5,6 +5,7 @@ import ExpressionRunnerSeparator from 'src/components/ExpressionRunnerSeparator'
 import EmojiSeparator from 'src/components/EmojiSeparator'
 import Emoji from 'src/components/Emoji'
 import CustomEmoji from 'src/components/CustomEmoji'
+import EmojiNumber from 'src/components/EmojiNumber'
 import H from 'src/components/H'
 import * as R from 'src/components/Runners'
 import { BasicRules, Unmatched } from 'src/contents/4.jp'
@@ -108,6 +109,7 @@ const DemoCardList = () => (
         )
       },
       {
+        type: 'sideNote',
         title: <>パート2: 弁当箱の説明</>,
         content: (
           <>
@@ -169,8 +171,8 @@ const DemoCardList = () => (
           <>
             <EmojiSeparator
               nodes={[
-                <CustomEmoji type="mathBox" />,
-                <CustomEmoji type="mathBox" />,
+                <Emoji>🍱</Emoji>,
+                <CustomEmoji type="singleArrow" />,
                 <CustomEmoji type="mathBox" />
               ]}
               description={<>計算箱</>}
@@ -259,6 +261,55 @@ const DemoCardList = () => (
       },
       {
         title: <>パート4: 1を足す</>,
+        type: 'sideNote',
+        content: (
+          <>
+            <EmojiSeparator
+              nodes={[
+                <CustomEmoji type="blankNumber" />,
+                <Emoji>➕</Emoji>,
+                <EmojiNumber number={1} />
+              ]}
+            />
+          </>
+        )
+      },
+      {
+        title: (
+          <>
+            <EmojiNumber number={1} /> <Emoji>➕</Emoji>{' '}
+            <EmojiNumber number={1} /> を計算
+          </>
+        ),
+        content: (
+          <>
+            <R.Rbup>
+              <H
+                args={{
+                  name: 'canBeConvertedCaption',
+                  letter: 'd',
+                  number: 1
+                }}
+              />
+            </R.Rbup>
+            <Hr />
+            <R.Rjzw></R.Rjzw>
+            <Hr />
+            <R.Rico>
+              <H
+                args={{ name: 'canBeConvertedCaption', number: 2, letter: 'b' }}
+              />
+            </R.Rico>
+          </>
+        )
+      },
+      {
+        title: (
+          <>
+            <EmojiNumber number={2} /> <Emoji>➕</Emoji>{' '}
+            <EmojiNumber number={1} /> を計算
+          </>
+        ),
         content: (
           <>
             <R.Spga>
@@ -272,6 +323,12 @@ const DemoCardList = () => (
             </R.Spga>
             <Hr />
             <R.Nlbn />
+            <Hr />
+            <R.Nngz>
+              <H
+                args={{ name: 'canBeConvertedCaption', number: 3, letter: 'b' }}
+              />
+            </R.Nngz>
           </>
         )
       }
diff --git a/src/lib/runners/rjzw.json b/src/lib/runners/rjzw.json
new file mode 100644
index 000000000..85d09f585
--- /dev/null
+++ b/src/lib/runners/rjzw.json
@@ -0,0 +1,2903 @@
+{
+  "expressionContainers": [
+    {
+      "containerState": "ready",
+      "previouslyChangedExpressionState": "default",
+      "expression": {
+        "arg": {
+          "arg": {
+            "name": "d",
+            "highlightType": "default",
+            "topLeftBadgeType": "none",
+            "bottomRightBadgeType": "none",
+            "type": "variable",
+            "argPriorityAgg": [
+              1
+            ],
+            "funcPriorityAgg": [],
+            "emphasizePriority": false,
+            "bound": false
+          },
+          "body": {
+            "arg": {
+              "name": "e",
+              "highlightType": "default",
+              "topLeftBadgeType": "none",
+              "bottomRightBadgeType": "none",
+              "type": "variable",
+              "argPriorityAgg": [],
+              "funcPriorityAgg": [],
+              "emphasizePriority": false,
+              "bound": false
+            },
+            "body": {
+              "arg": {
+                "name": "e",
+                "highlightType": "default",
+                "topLeftBadgeType": "none",
+                "bottomRightBadgeType": "none",
+                "type": "variable",
+                "argPriorityAgg": [
+                  1
+                ],
+                "funcPriorityAgg": [],
+                "emphasizePriority": false,
+                "bound": true
+              },
+              "func": {
+                "name": "d",
+                "highlightType": "default",
+                "topLeftBadgeType": "none",
+                "bottomRightBadgeType": "none",
+                "type": "variable",
+                "argPriorityAgg": [],
+                "funcPriorityAgg": [
+                  1
+                ],
+                "emphasizePriority": false,
+                "bound": true
+              },
+              "state": "default",
+              "type": "call",
+              "priority": 1
+            },
+            "type": "function"
+          },
+          "type": "function"
+        },
+        "func": {
+          "arg": {
+            "name": "a",
+            "highlightType": "default",
+            "topLeftBadgeType": "none",
+            "bottomRightBadgeType": "none",
+            "type": "variable",
+            "argPriorityAgg": [],
+            "funcPriorityAgg": [
+              1
+            ],
+            "emphasizePriority": false,
+            "bound": false
+          },
+          "body": {
+            "arg": {
+              "name": "b",
+              "highlightType": "default",
+              "topLeftBadgeType": "none",
+              "bottomRightBadgeType": "none",
+              "type": "variable",
+              "argPriorityAgg": [],
+              "funcPriorityAgg": [],
+              "emphasizePriority": false,
+              "bound": false
+            },
+            "body": {
+              "arg": {
+                "name": "c",
+                "highlightType": "default",
+                "topLeftBadgeType": "none",
+                "bottomRightBadgeType": "none",
+                "type": "variable",
+                "argPriorityAgg": [],
+                "funcPriorityAgg": [],
+                "emphasizePriority": false,
+                "bound": false
+              },
+              "body": {
+                "arg": {
+                  "arg": {
+                    "name": "c",
+                    "highlightType": "default",
+                    "topLeftBadgeType": "none",
+                    "bottomRightBadgeType": "none",
+                    "type": "variable",
+                    "argPriorityAgg": [
+                      1,
+                      3
+                    ],
+                    "funcPriorityAgg": [],
+                    "emphasizePriority": false,
+                    "bound": true
+                  },
+                  "func": {
+                    "arg": {
+                      "name": "b",
+                      "highlightType": "default",
+                      "topLeftBadgeType": "none",
+                      "bottomRightBadgeType": "none",
+                      "type": "variable",
+                      "argPriorityAgg": [
+                        2
+                      ],
+                      "funcPriorityAgg": [],
+                      "emphasizePriority": false,
+                      "bound": true
+                    },
+                    "func": {
+                      "name": "a",
+                      "highlightType": "default",
+                      "topLeftBadgeType": "none",
+                      "bottomRightBadgeType": "none",
+                      "type": "variable",
+                      "argPriorityAgg": [],
+                      "funcPriorityAgg": [
+                        2,
+                        3
+                      ],
+                      "emphasizePriority": false,
+                      "bound": true
+                    },
+                    "state": "default",
+                    "type": "call",
+                    "priority": 2
+                  },
+                  "state": "default",
+                  "type": "call",
+                  "priority": 3
+                },
+                "func": {
+                  "name": "b",
+                  "highlightType": "default",
+                  "topLeftBadgeType": "none",
+                  "bottomRightBadgeType": "none",
+                  "type": "variable",
+                  "argPriorityAgg": [],
+                  "funcPriorityAgg": [
+                    1
+                  ],
+                  "emphasizePriority": false,
+                  "bound": true
+                },
+                "state": "default",
+                "type": "call",
+                "priority": 1
+              },
+              "type": "function"
+            },
+            "type": "function"
+          },
+          "type": "function"
+        },
+        "state": "default",
+        "type": "call",
+        "priority": 1
+      }
+    },
+    {
+      "expression": {
+        "arg": {
+          "arg": {
+            "name": "d",
+            "highlightType": "active",
+            "topLeftBadgeType": "none",
+            "bottomRightBadgeType": "none",
+            "type": "variable",
+            "argPriorityAgg": [
+              1
+            ],
+            "funcPriorityAgg": [],
+            "emphasizePriority": true,
+            "bound": false
+          },
+          "body": {
+            "arg": {
+              "name": "e",
+              "highlightType": "active",
+              "topLeftBadgeType": "none",
+              "bottomRightBadgeType": "none",
+              "type": "variable",
+              "argPriorityAgg": [],
+              "funcPriorityAgg": [],
+              "emphasizePriority": false,
+              "bound": false
+            },
+            "body": {
+              "arg": {
+                "name": "e",
+                "highlightType": "active",
+                "topLeftBadgeType": "none",
+                "bottomRightBadgeType": "none",
+                "type": "variable",
+                "argPriorityAgg": [
+                  1
+                ],
+                "funcPriorityAgg": [],
+                "emphasizePriority": false,
+                "bound": true
+              },
+              "func": {
+                "name": "d",
+                "highlightType": "active",
+                "topLeftBadgeType": "none",
+                "bottomRightBadgeType": "none",
+                "type": "variable",
+                "argPriorityAgg": [],
+                "funcPriorityAgg": [
+                  1
+                ],
+                "emphasizePriority": false,
+                "bound": true
+              },
+              "state": "default",
+              "type": "call",
+              "priority": 1
+            },
+            "type": "function"
+          },
+          "type": "function"
+        },
+        "func": {
+          "arg": {
+            "name": "a",
+            "highlightType": "active",
+            "topLeftBadgeType": "none",
+            "bottomRightBadgeType": "none",
+            "type": "variable",
+            "argPriorityAgg": [],
+            "funcPriorityAgg": [
+              1
+            ],
+            "emphasizePriority": true,
+            "bound": false
+          },
+          "body": {
+            "arg": {
+              "name": "b",
+              "highlightType": "active",
+              "topLeftBadgeType": "none",
+              "bottomRightBadgeType": "none",
+              "type": "variable",
+              "argPriorityAgg": [],
+              "funcPriorityAgg": [],
+              "emphasizePriority": false,
+              "bound": false
+            },
+            "body": {
+              "arg": {
+                "name": "c",
+                "highlightType": "active",
+                "topLeftBadgeType": "none",
+                "bottomRightBadgeType": "none",
+                "type": "variable",
+                "argPriorityAgg": [],
+                "funcPriorityAgg": [],
+                "emphasizePriority": false,
+                "bound": false
+              },
+              "body": {
+                "arg": {
+                  "arg": {
+                    "name": "c",
+                    "highlightType": "active",
+                    "topLeftBadgeType": "none",
+                    "bottomRightBadgeType": "none",
+                    "type": "variable",
+                    "argPriorityAgg": [
+                      1,
+                      3
+                    ],
+                    "funcPriorityAgg": [],
+                    "emphasizePriority": false,
+                    "bound": true
+                  },
+                  "func": {
+                    "arg": {
+                      "name": "b",
+                      "highlightType": "active",
+                      "topLeftBadgeType": "none",
+                      "bottomRightBadgeType": "none",
+                      "type": "variable",
+                      "argPriorityAgg": [
+                        2
+                      ],
+                      "funcPriorityAgg": [],
+                      "emphasizePriority": false,
+                      "bound": true
+                    },
+                    "func": {
+                      "name": "a",
+                      "highlightType": "active",
+                      "topLeftBadgeType": "none",
+                      "bottomRightBadgeType": "none",
+                      "type": "variable",
+                      "argPriorityAgg": [],
+                      "funcPriorityAgg": [
+                        2,
+                        3
+                      ],
+                      "emphasizePriority": false,
+                      "bound": true
+                    },
+                    "state": "default",
+                    "type": "call",
+                    "priority": 2
+                  },
+                  "state": "default",
+                  "type": "call",
+                  "priority": 3
+                },
+                "func": {
+                  "name": "b",
+                  "highlightType": "active",
+                  "topLeftBadgeType": "none",
+                  "bottomRightBadgeType": "none",
+                  "type": "variable",
+                  "argPriorityAgg": [],
+                  "funcPriorityAgg": [
+                    1
+                  ],
+                  "emphasizePriority": false,
+                  "bound": true
+                },
+                "state": "default",
+                "type": "call",
+                "priority": 1
+              },
+              "type": "function"
+            },
+            "type": "function"
+          },
+          "type": "function"
+        },
+        "state": "active",
+        "type": "call",
+        "priority": 1
+      },
+      "previouslyChangedExpressionState": "active",
+      "activePriority": 1,
+      "containerState": "stepped"
+    },
+    {
+      "expression": {
+        "arg": {
+          "arg": {
+            "name": "d",
+            "highlightType": "active",
+            "topLeftBadgeType": "none",
+            "bottomRightBadgeType": "callArg",
+            "type": "variable",
+            "argPriorityAgg": [
+              1
+            ],
+            "funcPriorityAgg": [],
+            "emphasizePriority": true,
+            "bound": false
+          },
+          "body": {
+            "arg": {
+              "name": "e",
+              "highlightType": "active",
+              "topLeftBadgeType": "none",
+              "bottomRightBadgeType": "callArg",
+              "type": "variable",
+              "argPriorityAgg": [],
+              "funcPriorityAgg": [],
+              "emphasizePriority": false,
+              "bound": false
+            },
+            "body": {
+              "arg": {
+                "name": "e",
+                "highlightType": "active",
+                "topLeftBadgeType": "none",
+                "bottomRightBadgeType": "callArg",
+                "type": "variable",
+                "argPriorityAgg": [
+                  1
+                ],
+                "funcPriorityAgg": [],
+                "emphasizePriority": false,
+                "bound": true
+              },
+              "func": {
+                "name": "d",
+                "highlightType": "active",
+                "topLeftBadgeType": "none",
+                "bottomRightBadgeType": "callArg",
+                "type": "variable",
+                "argPriorityAgg": [],
+                "funcPriorityAgg": [
+                  1
+                ],
+                "emphasizePriority": false,
+                "bound": true
+              },
+              "state": "default",
+              "type": "call",
+              "priority": 1
+            },
+            "type": "function"
+          },
+          "type": "function"
+        },
+        "func": {
+          "arg": {
+            "name": "a",
+            "highlightType": "active",
+            "topLeftBadgeType": "none",
+            "bottomRightBadgeType": "funcArg",
+            "type": "variable",
+            "argPriorityAgg": [],
+            "funcPriorityAgg": [
+              1
+            ],
+            "emphasizePriority": true,
+            "bound": false
+          },
+          "body": {
+            "arg": {
+              "name": "b",
+              "highlightType": "active",
+              "topLeftBadgeType": "none",
+              "bottomRightBadgeType": "funcUnbound",
+              "type": "variable",
+              "argPriorityAgg": [],
+              "funcPriorityAgg": [],
+              "emphasizePriority": false,
+              "bound": false
+            },
+            "body": {
+              "arg": {
+                "name": "c",
+                "highlightType": "active",
+                "topLeftBadgeType": "none",
+                "bottomRightBadgeType": "funcUnbound",
+                "type": "variable",
+                "argPriorityAgg": [],
+                "funcPriorityAgg": [],
+                "emphasizePriority": false,
+                "bound": false
+              },
+              "body": {
+                "arg": {
+                  "arg": {
+                    "name": "c",
+                    "highlightType": "active",
+                    "topLeftBadgeType": "none",
+                    "bottomRightBadgeType": "funcBound",
+                    "type": "variable",
+                    "argPriorityAgg": [
+                      1,
+                      3
+                    ],
+                    "funcPriorityAgg": [],
+                    "emphasizePriority": false,
+                    "bound": true
+                  },
+                  "func": {
+                    "arg": {
+                      "name": "b",
+                      "highlightType": "active",
+                      "topLeftBadgeType": "none",
+                      "bottomRightBadgeType": "funcBound",
+                      "type": "variable",
+                      "argPriorityAgg": [
+                        2
+                      ],
+                      "funcPriorityAgg": [],
+                      "emphasizePriority": false,
+                      "bound": true
+                    },
+                    "func": {
+                      "name": "a",
+                      "highlightType": "active",
+                      "topLeftBadgeType": "none",
+                      "bottomRightBadgeType": "funcBound",
+                      "type": "variable",
+                      "argPriorityAgg": [],
+                      "funcPriorityAgg": [
+                        2,
+                        3
+                      ],
+                      "emphasizePriority": false,
+                      "bound": true
+                    },
+                    "state": "default",
+                    "type": "call",
+                    "priority": 2
+                  },
+                  "state": "default",
+                  "type": "call",
+                  "priority": 3
+                },
+                "func": {
+                  "name": "b",
+                  "highlightType": "active",
+                  "topLeftBadgeType": "none",
+                  "bottomRightBadgeType": "funcBound",
+                  "type": "variable",
+                  "argPriorityAgg": [],
+                  "funcPriorityAgg": [
+                    1
+                  ],
+                  "emphasizePriority": false,
+                  "bound": true
+                },
+                "state": "default",
+                "type": "call",
+                "priority": 1
+              },
+              "type": "function"
+            },
+            "type": "function"
+          },
+          "type": "function"
+        },
+        "state": "showFuncUnbound",
+        "type": "call",
+        "priority": 1
+      },
+      "previouslyChangedExpressionState": "showFuncUnbound",
+      "activePriority": 1,
+      "containerState": "stepped"
+    },
+    {
+      "expression": {
+        "arg": {
+          "arg": {
+            "name": "d",
+            "highlightType": "active",
+            "topLeftBadgeType": "none",
+            "bottomRightBadgeType": "callArg",
+            "type": "variable",
+            "argPriorityAgg": [
+              1
+            ],
+            "funcPriorityAgg": [],
+            "emphasizePriority": true,
+            "bound": false
+          },
+          "body": {
+            "arg": {
+              "name": "e",
+              "highlightType": "active",
+              "topLeftBadgeType": "none",
+              "bottomRightBadgeType": "callArg",
+              "type": "variable",
+              "argPriorityAgg": [],
+              "funcPriorityAgg": [],
+              "emphasizePriority": false,
+              "bound": false
+            },
+            "body": {
+              "arg": {
+                "name": "e",
+                "highlightType": "active",
+                "topLeftBadgeType": "none",
+                "bottomRightBadgeType": "callArg",
+                "type": "variable",
+                "argPriorityAgg": [
+                  1
+                ],
+                "funcPriorityAgg": [],
+                "emphasizePriority": false,
+                "bound": true
+              },
+              "func": {
+                "name": "d",
+                "highlightType": "active",
+                "topLeftBadgeType": "none",
+                "bottomRightBadgeType": "callArg",
+                "type": "variable",
+                "argPriorityAgg": [],
+                "funcPriorityAgg": [
+                  1
+                ],
+                "emphasizePriority": false,
+                "bound": true
+              },
+              "state": "default",
+              "type": "call",
+              "priority": 1
+            },
+            "type": "function"
+          },
+          "type": "function"
+        },
+        "func": {
+          "arg": {
+            "name": "a",
+            "highlightType": "highlighted",
+            "topLeftBadgeType": "match",
+            "bottomRightBadgeType": "funcArg",
+            "type": "variable",
+            "argPriorityAgg": [],
+            "funcPriorityAgg": [
+              1
+            ],
+            "emphasizePriority": true,
+            "bound": false
+          },
+          "body": {
+            "arg": {
+              "name": "b",
+              "highlightType": "active",
+              "topLeftBadgeType": "none",
+              "bottomRightBadgeType": "funcUnbound",
+              "type": "variable",
+              "argPriorityAgg": [],
+              "funcPriorityAgg": [],
+              "emphasizePriority": false,
+              "bound": false
+            },
+            "body": {
+              "arg": {
+                "name": "c",
+                "highlightType": "active",
+                "topLeftBadgeType": "none",
+                "bottomRightBadgeType": "funcUnbound",
+                "type": "variable",
+                "argPriorityAgg": [],
+                "funcPriorityAgg": [],
+                "emphasizePriority": false,
+                "bound": false
+              },
+              "body": {
+                "arg": {
+                  "arg": {
+                    "name": "c",
+                    "highlightType": "highlighted",
+                    "topLeftBadgeType": "unmatch",
+                    "bottomRightBadgeType": "funcBound",
+                    "type": "variable",
+                    "argPriorityAgg": [
+                      1,
+                      3
+                    ],
+                    "funcPriorityAgg": [],
+                    "emphasizePriority": false,
+                    "bound": true
+                  },
+                  "func": {
+                    "arg": {
+                      "name": "b",
+                      "highlightType": "highlighted",
+                      "topLeftBadgeType": "unmatch",
+                      "bottomRightBadgeType": "funcBound",
+                      "type": "variable",
+                      "argPriorityAgg": [
+                        2
+                      ],
+                      "funcPriorityAgg": [],
+                      "emphasizePriority": false,
+                      "bound": true
+                    },
+                    "func": {
+                      "name": "a",
+                      "highlightType": "highlighted",
+                      "topLeftBadgeType": "match",
+                      "bottomRightBadgeType": "funcBound",
+                      "type": "variable",
+                      "argPriorityAgg": [],
+                      "funcPriorityAgg": [
+                        2,
+                        3
+                      ],
+                      "emphasizePriority": false,
+                      "bound": true
+                    },
+                    "state": "default",
+                    "type": "call",
+                    "priority": 2
+                  },
+                  "state": "default",
+                  "type": "call",
+                  "priority": 3
+                },
+                "func": {
+                  "name": "b",
+                  "highlightType": "highlighted",
+                  "topLeftBadgeType": "unmatch",
+                  "bottomRightBadgeType": "funcBound",
+                  "type": "variable",
+                  "argPriorityAgg": [],
+                  "funcPriorityAgg": [
+                    1
+                  ],
+                  "emphasizePriority": false,
+                  "bound": true
+                },
+                "state": "default",
+                "type": "call",
+                "priority": 1
+              },
+              "type": "function"
+            },
+            "type": "function"
+          },
+          "type": "function"
+        },
+        "state": "betaReducePreviewBefore",
+        "type": "call",
+        "priority": 1
+      },
+      "previouslyChangedExpressionState": "betaReducePreviewBefore",
+      "matchExists": true,
+      "activePriority": 1,
+      "containerState": "stepped"
+    },
+    {
+      "expression": {
+        "arg": {
+          "arg": {
+            "name": "d",
+            "highlightType": "betaReduceCallArgHighlighted",
+            "topLeftBadgeType": "none",
+            "bottomRightBadgeType": "callArg",
+            "type": "variable",
+            "argPriorityAgg": [
+              1
+            ],
+            "funcPriorityAgg": [],
+            "emphasizePriority": true,
+            "bound": false
+          },
+          "body": {
+            "arg": {
+              "name": "e",
+              "highlightType": "betaReduceCallArgHighlighted",
+              "topLeftBadgeType": "none",
+              "bottomRightBadgeType": "callArg",
+              "type": "variable",
+              "argPriorityAgg": [],
+              "funcPriorityAgg": [],
+              "emphasizePriority": false,
+              "bound": false
+            },
+            "body": {
+              "arg": {
+                "name": "e",
+                "highlightType": "betaReduceCallArgHighlighted",
+                "topLeftBadgeType": "none",
+                "bottomRightBadgeType": "callArg",
+                "type": "variable",
+                "argPriorityAgg": [
+                  1
+                ],
+                "funcPriorityAgg": [],
+                "emphasizePriority": false,
+                "bound": true
+              },
+              "func": {
+                "name": "d",
+                "highlightType": "betaReduceCallArgHighlighted",
+                "topLeftBadgeType": "none",
+                "bottomRightBadgeType": "callArg",
+                "type": "variable",
+                "argPriorityAgg": [],
+                "funcPriorityAgg": [
+                  1
+                ],
+                "emphasizePriority": false,
+                "bound": true
+              },
+              "state": "default",
+              "type": "call",
+              "priority": 1
+            },
+            "type": "function"
+          },
+          "type": "function"
+        },
+        "func": {
+          "arg": {
+            "name": "a",
+            "highlightType": "active",
+            "topLeftBadgeType": "none",
+            "bottomRightBadgeType": "funcArg",
+            "type": "variable",
+            "argPriorityAgg": [],
+            "funcPriorityAgg": [
+              1
+            ],
+            "emphasizePriority": true,
+            "bound": false
+          },
+          "body": {
+            "arg": {
+              "name": "b",
+              "highlightType": "active",
+              "topLeftBadgeType": "none",
+              "bottomRightBadgeType": "funcUnbound",
+              "type": "variable",
+              "argPriorityAgg": [],
+              "funcPriorityAgg": [],
+              "emphasizePriority": false,
+              "bound": false
+            },
+            "body": {
+              "arg": {
+                "name": "c",
+                "highlightType": "active",
+                "topLeftBadgeType": "none",
+                "bottomRightBadgeType": "funcUnbound",
+                "type": "variable",
+                "argPriorityAgg": [],
+                "funcPriorityAgg": [],
+                "emphasizePriority": false,
+                "bound": false
+              },
+              "body": {
+                "arg": {
+                  "arg": {
+                    "name": "c",
+                    "highlightType": "active",
+                    "topLeftBadgeType": "none",
+                    "bottomRightBadgeType": "funcBound",
+                    "type": "variable",
+                    "argPriorityAgg": [
+                      1,
+                      3
+                    ],
+                    "funcPriorityAgg": [],
+                    "emphasizePriority": false,
+                    "bound": true
+                  },
+                  "func": {
+                    "arg": {
+                      "name": "b",
+                      "highlightType": "active",
+                      "topLeftBadgeType": "none",
+                      "bottomRightBadgeType": "funcBound",
+                      "type": "variable",
+                      "argPriorityAgg": [
+                        2
+                      ],
+                      "funcPriorityAgg": [],
+                      "emphasizePriority": false,
+                      "bound": true
+                    },
+                    "func": {
+                      "arg": {
+                        "name": "d",
+                        "highlightType": "highlighted",
+                        "topLeftBadgeType": "betaReduced",
+                        "bottomRightBadgeType": "funcBound",
+                        "type": "variable",
+                        "argPriorityAgg": [],
+                        "funcPriorityAgg": [
+                          2,
+                          3
+                        ],
+                        "emphasizePriority": false,
+                        "bound": false
+                      },
+                      "body": {
+                        "arg": {
+                          "name": "e",
+                          "highlightType": "highlighted",
+                          "topLeftBadgeType": "betaReduced",
+                          "bottomRightBadgeType": "funcBound",
+                          "type": "variable",
+                          "argPriorityAgg": [],
+                          "funcPriorityAgg": [],
+                          "emphasizePriority": false,
+                          "bound": false
+                        },
+                        "body": {
+                          "arg": {
+                            "name": "e",
+                            "highlightType": "highlighted",
+                            "topLeftBadgeType": "betaReduced",
+                            "bottomRightBadgeType": "funcBound",
+                            "type": "variable",
+                            "argPriorityAgg": [
+                              1
+                            ],
+                            "funcPriorityAgg": [],
+                            "emphasizePriority": false,
+                            "bound": true
+                          },
+                          "func": {
+                            "name": "d",
+                            "highlightType": "highlighted",
+                            "topLeftBadgeType": "betaReduced",
+                            "bottomRightBadgeType": "funcBound",
+                            "type": "variable",
+                            "argPriorityAgg": [],
+                            "funcPriorityAgg": [
+                              1
+                            ],
+                            "emphasizePriority": false,
+                            "bound": true
+                          },
+                          "state": "default",
+                          "type": "call",
+                          "priority": 1
+                        },
+                        "type": "function"
+                      },
+                      "type": "function"
+                    },
+                    "state": "default",
+                    "type": "call",
+                    "priority": 2
+                  },
+                  "state": "default",
+                  "type": "call",
+                  "priority": 3
+                },
+                "func": {
+                  "name": "b",
+                  "highlightType": "active",
+                  "topLeftBadgeType": "none",
+                  "bottomRightBadgeType": "funcBound",
+                  "type": "variable",
+                  "argPriorityAgg": [],
+                  "funcPriorityAgg": [
+                    1
+                  ],
+                  "emphasizePriority": false,
+                  "bound": true
+                },
+                "state": "default",
+                "type": "call",
+                "priority": 1
+              },
+              "type": "function"
+            },
+            "type": "function"
+          },
+          "type": "function"
+        },
+        "state": "betaReducePreviewAfter",
+        "type": "call",
+        "priority": 1
+      },
+      "previouslyChangedExpressionState": "betaReducePreviewAfter",
+      "activePriority": 1,
+      "containerState": "stepped"
+    },
+    {
+      "expression": {
+        "arg": {
+          "arg": {
+            "name": "d",
+            "highlightType": "removed",
+            "topLeftBadgeType": "none",
+            "bottomRightBadgeType": "callArg",
+            "type": "variable",
+            "argPriorityAgg": [
+              1
+            ],
+            "funcPriorityAgg": [],
+            "emphasizePriority": true,
+            "bound": false
+          },
+          "body": {
+            "arg": {
+              "name": "e",
+              "highlightType": "removed",
+              "topLeftBadgeType": "none",
+              "bottomRightBadgeType": "callArg",
+              "type": "variable",
+              "argPriorityAgg": [],
+              "funcPriorityAgg": [],
+              "emphasizePriority": false,
+              "bound": false
+            },
+            "body": {
+              "arg": {
+                "name": "e",
+                "highlightType": "removed",
+                "topLeftBadgeType": "none",
+                "bottomRightBadgeType": "callArg",
+                "type": "variable",
+                "argPriorityAgg": [
+                  1
+                ],
+                "funcPriorityAgg": [],
+                "emphasizePriority": false,
+                "bound": true
+              },
+              "func": {
+                "name": "d",
+                "highlightType": "removed",
+                "topLeftBadgeType": "none",
+                "bottomRightBadgeType": "callArg",
+                "type": "variable",
+                "argPriorityAgg": [],
+                "funcPriorityAgg": [
+                  1
+                ],
+                "emphasizePriority": false,
+                "bound": true
+              },
+              "state": "default",
+              "type": "call",
+              "priority": 1
+            },
+            "type": "function"
+          },
+          "type": "function"
+        },
+        "func": {
+          "arg": {
+            "name": "a",
+            "highlightType": "removed",
+            "topLeftBadgeType": "none",
+            "bottomRightBadgeType": "funcArg",
+            "type": "variable",
+            "argPriorityAgg": [],
+            "funcPriorityAgg": [
+              1
+            ],
+            "emphasizePriority": true,
+            "bound": false
+          },
+          "body": {
+            "arg": {
+              "name": "b",
+              "highlightType": "active",
+              "topLeftBadgeType": "none",
+              "bottomRightBadgeType": "none",
+              "type": "variable",
+              "argPriorityAgg": [],
+              "funcPriorityAgg": [],
+              "emphasizePriority": false,
+              "bound": false
+            },
+            "body": {
+              "arg": {
+                "name": "c",
+                "highlightType": "active",
+                "topLeftBadgeType": "none",
+                "bottomRightBadgeType": "none",
+                "type": "variable",
+                "argPriorityAgg": [],
+                "funcPriorityAgg": [],
+                "emphasizePriority": false,
+                "bound": false
+              },
+              "body": {
+                "arg": {
+                  "arg": {
+                    "name": "c",
+                    "highlightType": "active",
+                    "topLeftBadgeType": "none",
+                    "bottomRightBadgeType": "none",
+                    "type": "variable",
+                    "argPriorityAgg": [
+                      1,
+                      3
+                    ],
+                    "funcPriorityAgg": [],
+                    "emphasizePriority": false,
+                    "bound": true
+                  },
+                  "func": {
+                    "arg": {
+                      "name": "b",
+                      "highlightType": "active",
+                      "topLeftBadgeType": "none",
+                      "bottomRightBadgeType": "none",
+                      "type": "variable",
+                      "argPriorityAgg": [
+                        2
+                      ],
+                      "funcPriorityAgg": [],
+                      "emphasizePriority": false,
+                      "bound": true
+                    },
+                    "func": {
+                      "arg": {
+                        "name": "d",
+                        "highlightType": "active",
+                        "topLeftBadgeType": "none",
+                        "bottomRightBadgeType": "none",
+                        "type": "variable",
+                        "argPriorityAgg": [],
+                        "funcPriorityAgg": [
+                          2,
+                          3
+                        ],
+                        "emphasizePriority": false,
+                        "bound": false
+                      },
+                      "body": {
+                        "arg": {
+                          "name": "e",
+                          "highlightType": "active",
+                          "topLeftBadgeType": "none",
+                          "bottomRightBadgeType": "none",
+                          "type": "variable",
+                          "argPriorityAgg": [],
+                          "funcPriorityAgg": [],
+                          "emphasizePriority": false,
+                          "bound": false
+                        },
+                        "body": {
+                          "arg": {
+                            "name": "e",
+                            "highlightType": "active",
+                            "topLeftBadgeType": "none",
+                            "bottomRightBadgeType": "none",
+                            "type": "variable",
+                            "argPriorityAgg": [
+                              1
+                            ],
+                            "funcPriorityAgg": [],
+                            "emphasizePriority": false,
+                            "bound": true
+                          },
+                          "func": {
+                            "name": "d",
+                            "highlightType": "active",
+                            "topLeftBadgeType": "none",
+                            "bottomRightBadgeType": "none",
+                            "type": "variable",
+                            "argPriorityAgg": [],
+                            "funcPriorityAgg": [
+                              1
+                            ],
+                            "emphasizePriority": false,
+                            "bound": true
+                          },
+                          "state": "default",
+                          "type": "call",
+                          "priority": 1
+                        },
+                        "type": "function"
+                      },
+                      "type": "function"
+                    },
+                    "state": "default",
+                    "type": "call",
+                    "priority": 2
+                  },
+                  "state": "default",
+                  "type": "call",
+                  "priority": 3
+                },
+                "func": {
+                  "name": "b",
+                  "highlightType": "active",
+                  "topLeftBadgeType": "none",
+                  "bottomRightBadgeType": "none",
+                  "type": "variable",
+                  "argPriorityAgg": [],
+                  "funcPriorityAgg": [
+                    1
+                  ],
+                  "emphasizePriority": false,
+                  "bound": true
+                },
+                "state": "default",
+                "type": "call",
+                "priority": 1
+              },
+              "type": "function"
+            },
+            "type": "function"
+          },
+          "type": "function"
+        },
+        "state": "betaReducePreviewCrossed",
+        "type": "call",
+        "priority": 1
+      },
+      "previouslyChangedExpressionState": "betaReducePreviewCrossed",
+      "activePriority": 1,
+      "containerState": "stepped"
+    },
+    {
+      "containerState": "ready",
+      "previouslyChangedExpressionState": "default",
+      "expression": {
+        "arg": {
+          "name": "b",
+          "highlightType": "default",
+          "topLeftBadgeType": "none",
+          "bottomRightBadgeType": "none",
+          "type": "variable",
+          "argPriorityAgg": [],
+          "funcPriorityAgg": [],
+          "emphasizePriority": false,
+          "bound": false
+        },
+        "body": {
+          "arg": {
+            "name": "c",
+            "highlightType": "default",
+            "topLeftBadgeType": "none",
+            "bottomRightBadgeType": "none",
+            "type": "variable",
+            "argPriorityAgg": [],
+            "funcPriorityAgg": [],
+            "emphasizePriority": false,
+            "bound": false
+          },
+          "body": {
+            "arg": {
+              "arg": {
+                "name": "c",
+                "highlightType": "default",
+                "topLeftBadgeType": "none",
+                "bottomRightBadgeType": "none",
+                "type": "variable",
+                "argPriorityAgg": [
+                  1,
+                  3
+                ],
+                "funcPriorityAgg": [],
+                "emphasizePriority": false,
+                "bound": true
+              },
+              "func": {
+                "arg": {
+                  "name": "b",
+                  "highlightType": "default",
+                  "topLeftBadgeType": "none",
+                  "bottomRightBadgeType": "none",
+                  "type": "variable",
+                  "argPriorityAgg": [
+                    2
+                  ],
+                  "funcPriorityAgg": [],
+                  "emphasizePriority": false,
+                  "bound": true
+                },
+                "func": {
+                  "arg": {
+                    "name": "d",
+                    "highlightType": "default",
+                    "topLeftBadgeType": "none",
+                    "bottomRightBadgeType": "none",
+                    "type": "variable",
+                    "argPriorityAgg": [],
+                    "funcPriorityAgg": [
+                      2,
+                      3
+                    ],
+                    "emphasizePriority": false,
+                    "bound": false
+                  },
+                  "body": {
+                    "arg": {
+                      "name": "e",
+                      "highlightType": "default",
+                      "topLeftBadgeType": "none",
+                      "bottomRightBadgeType": "none",
+                      "type": "variable",
+                      "argPriorityAgg": [],
+                      "funcPriorityAgg": [],
+                      "emphasizePriority": false,
+                      "bound": false
+                    },
+                    "body": {
+                      "arg": {
+                        "name": "e",
+                        "highlightType": "default",
+                        "topLeftBadgeType": "none",
+                        "bottomRightBadgeType": "none",
+                        "type": "variable",
+                        "argPriorityAgg": [
+                          1
+                        ],
+                        "funcPriorityAgg": [],
+                        "emphasizePriority": false,
+                        "bound": true
+                      },
+                      "func": {
+                        "name": "d",
+                        "highlightType": "default",
+                        "topLeftBadgeType": "none",
+                        "bottomRightBadgeType": "none",
+                        "type": "variable",
+                        "argPriorityAgg": [],
+                        "funcPriorityAgg": [
+                          1
+                        ],
+                        "emphasizePriority": false,
+                        "bound": true
+                      },
+                      "state": "default",
+                      "type": "call",
+                      "priority": 1
+                    },
+                    "type": "function"
+                  },
+                  "type": "function"
+                },
+                "state": "default",
+                "type": "call",
+                "priority": 2
+              },
+              "state": "default",
+              "type": "call",
+              "priority": 3
+            },
+            "func": {
+              "name": "b",
+              "highlightType": "default",
+              "topLeftBadgeType": "none",
+              "bottomRightBadgeType": "none",
+              "type": "variable",
+              "argPriorityAgg": [],
+              "funcPriorityAgg": [
+                1
+              ],
+              "emphasizePriority": false,
+              "bound": true
+            },
+            "state": "default",
+            "type": "call",
+            "priority": 1
+          },
+          "type": "function"
+        },
+        "type": "function"
+      }
+    },
+    {
+      "containerState": "stepped",
+      "previouslyChangedExpressionState": "active",
+      "expression": {
+        "arg": {
+          "name": "b",
+          "highlightType": "default",
+          "topLeftBadgeType": "none",
+          "bottomRightBadgeType": "none",
+          "type": "variable",
+          "argPriorityAgg": [],
+          "funcPriorityAgg": [],
+          "emphasizePriority": false,
+          "bound": false
+        },
+        "body": {
+          "arg": {
+            "name": "c",
+            "highlightType": "default",
+            "topLeftBadgeType": "none",
+            "bottomRightBadgeType": "none",
+            "type": "variable",
+            "argPriorityAgg": [],
+            "funcPriorityAgg": [],
+            "emphasizePriority": false,
+            "bound": false
+          },
+          "body": {
+            "arg": {
+              "arg": {
+                "name": "c",
+                "highlightType": "default",
+                "topLeftBadgeType": "none",
+                "bottomRightBadgeType": "none",
+                "type": "variable",
+                "argPriorityAgg": [
+                  1,
+                  3
+                ],
+                "funcPriorityAgg": [],
+                "emphasizePriority": false,
+                "bound": true
+              },
+              "func": {
+                "arg": {
+                  "name": "b",
+                  "highlightType": "active",
+                  "topLeftBadgeType": "none",
+                  "bottomRightBadgeType": "none",
+                  "type": "variable",
+                  "argPriorityAgg": [
+                    2
+                  ],
+                  "funcPriorityAgg": [],
+                  "emphasizePriority": true,
+                  "bound": true
+                },
+                "func": {
+                  "arg": {
+                    "name": "d",
+                    "highlightType": "active",
+                    "topLeftBadgeType": "none",
+                    "bottomRightBadgeType": "none",
+                    "type": "variable",
+                    "argPriorityAgg": [],
+                    "funcPriorityAgg": [
+                      2,
+                      3
+                    ],
+                    "emphasizePriority": true,
+                    "bound": false
+                  },
+                  "body": {
+                    "arg": {
+                      "name": "e",
+                      "highlightType": "active",
+                      "topLeftBadgeType": "none",
+                      "bottomRightBadgeType": "none",
+                      "type": "variable",
+                      "argPriorityAgg": [],
+                      "funcPriorityAgg": [],
+                      "emphasizePriority": false,
+                      "bound": false
+                    },
+                    "body": {
+                      "arg": {
+                        "name": "e",
+                        "highlightType": "active",
+                        "topLeftBadgeType": "none",
+                        "bottomRightBadgeType": "none",
+                        "type": "variable",
+                        "argPriorityAgg": [
+                          1
+                        ],
+                        "funcPriorityAgg": [],
+                        "emphasizePriority": false,
+                        "bound": true
+                      },
+                      "func": {
+                        "name": "d",
+                        "highlightType": "active",
+                        "topLeftBadgeType": "none",
+                        "bottomRightBadgeType": "none",
+                        "type": "variable",
+                        "argPriorityAgg": [],
+                        "funcPriorityAgg": [
+                          1
+                        ],
+                        "emphasizePriority": false,
+                        "bound": true
+                      },
+                      "state": "default",
+                      "type": "call",
+                      "priority": 1
+                    },
+                    "type": "function"
+                  },
+                  "type": "function"
+                },
+                "state": "active",
+                "type": "call",
+                "priority": 2
+              },
+              "state": "default",
+              "type": "call",
+              "priority": 3
+            },
+            "func": {
+              "name": "b",
+              "highlightType": "default",
+              "topLeftBadgeType": "none",
+              "bottomRightBadgeType": "none",
+              "type": "variable",
+              "argPriorityAgg": [],
+              "funcPriorityAgg": [
+                1
+              ],
+              "emphasizePriority": false,
+              "bound": true
+            },
+            "state": "default",
+            "type": "call",
+            "priority": 1
+          },
+          "type": "function"
+        },
+        "type": "function"
+      },
+      "activePriority": 2
+    },
+    {
+      "containerState": "stepped",
+      "previouslyChangedExpressionState": "showFuncUnbound",
+      "expression": {
+        "arg": {
+          "name": "b",
+          "highlightType": "default",
+          "topLeftBadgeType": "none",
+          "bottomRightBadgeType": "none",
+          "type": "variable",
+          "argPriorityAgg": [],
+          "funcPriorityAgg": [],
+          "emphasizePriority": false,
+          "bound": false
+        },
+        "body": {
+          "arg": {
+            "name": "c",
+            "highlightType": "default",
+            "topLeftBadgeType": "none",
+            "bottomRightBadgeType": "none",
+            "type": "variable",
+            "argPriorityAgg": [],
+            "funcPriorityAgg": [],
+            "emphasizePriority": false,
+            "bound": false
+          },
+          "body": {
+            "arg": {
+              "arg": {
+                "name": "c",
+                "highlightType": "default",
+                "topLeftBadgeType": "none",
+                "bottomRightBadgeType": "none",
+                "type": "variable",
+                "argPriorityAgg": [
+                  1,
+                  3
+                ],
+                "funcPriorityAgg": [],
+                "emphasizePriority": false,
+                "bound": true
+              },
+              "func": {
+                "arg": {
+                  "name": "b",
+                  "highlightType": "active",
+                  "topLeftBadgeType": "none",
+                  "bottomRightBadgeType": "callArg",
+                  "type": "variable",
+                  "argPriorityAgg": [
+                    2
+                  ],
+                  "funcPriorityAgg": [],
+                  "emphasizePriority": true,
+                  "bound": true
+                },
+                "func": {
+                  "arg": {
+                    "name": "d",
+                    "highlightType": "active",
+                    "topLeftBadgeType": "none",
+                    "bottomRightBadgeType": "funcArg",
+                    "type": "variable",
+                    "argPriorityAgg": [],
+                    "funcPriorityAgg": [
+                      2,
+                      3
+                    ],
+                    "emphasizePriority": true,
+                    "bound": false
+                  },
+                  "body": {
+                    "arg": {
+                      "name": "e",
+                      "highlightType": "active",
+                      "topLeftBadgeType": "none",
+                      "bottomRightBadgeType": "funcUnbound",
+                      "type": "variable",
+                      "argPriorityAgg": [],
+                      "funcPriorityAgg": [],
+                      "emphasizePriority": false,
+                      "bound": false
+                    },
+                    "body": {
+                      "arg": {
+                        "name": "e",
+                        "highlightType": "active",
+                        "topLeftBadgeType": "none",
+                        "bottomRightBadgeType": "funcBound",
+                        "type": "variable",
+                        "argPriorityAgg": [
+                          1
+                        ],
+                        "funcPriorityAgg": [],
+                        "emphasizePriority": false,
+                        "bound": true
+                      },
+                      "func": {
+                        "name": "d",
+                        "highlightType": "active",
+                        "topLeftBadgeType": "none",
+                        "bottomRightBadgeType": "funcBound",
+                        "type": "variable",
+                        "argPriorityAgg": [],
+                        "funcPriorityAgg": [
+                          1
+                        ],
+                        "emphasizePriority": false,
+                        "bound": true
+                      },
+                      "state": "default",
+                      "type": "call",
+                      "priority": 1
+                    },
+                    "type": "function"
+                  },
+                  "type": "function"
+                },
+                "state": "showFuncUnbound",
+                "type": "call",
+                "priority": 2
+              },
+              "state": "default",
+              "type": "call",
+              "priority": 3
+            },
+            "func": {
+              "name": "b",
+              "highlightType": "default",
+              "topLeftBadgeType": "none",
+              "bottomRightBadgeType": "none",
+              "type": "variable",
+              "argPriorityAgg": [],
+              "funcPriorityAgg": [
+                1
+              ],
+              "emphasizePriority": false,
+              "bound": true
+            },
+            "state": "default",
+            "type": "call",
+            "priority": 1
+          },
+          "type": "function"
+        },
+        "type": "function"
+      },
+      "activePriority": 2
+    },
+    {
+      "containerState": "stepped",
+      "previouslyChangedExpressionState": "betaReducePreviewBefore",
+      "expression": {
+        "arg": {
+          "name": "b",
+          "highlightType": "default",
+          "topLeftBadgeType": "none",
+          "bottomRightBadgeType": "none",
+          "type": "variable",
+          "argPriorityAgg": [],
+          "funcPriorityAgg": [],
+          "emphasizePriority": false,
+          "bound": false
+        },
+        "body": {
+          "arg": {
+            "name": "c",
+            "highlightType": "default",
+            "topLeftBadgeType": "none",
+            "bottomRightBadgeType": "none",
+            "type": "variable",
+            "argPriorityAgg": [],
+            "funcPriorityAgg": [],
+            "emphasizePriority": false,
+            "bound": false
+          },
+          "body": {
+            "arg": {
+              "arg": {
+                "name": "c",
+                "highlightType": "default",
+                "topLeftBadgeType": "none",
+                "bottomRightBadgeType": "none",
+                "type": "variable",
+                "argPriorityAgg": [
+                  1,
+                  3
+                ],
+                "funcPriorityAgg": [],
+                "emphasizePriority": false,
+                "bound": true
+              },
+              "func": {
+                "arg": {
+                  "name": "b",
+                  "highlightType": "active",
+                  "topLeftBadgeType": "none",
+                  "bottomRightBadgeType": "callArg",
+                  "type": "variable",
+                  "argPriorityAgg": [
+                    2
+                  ],
+                  "funcPriorityAgg": [],
+                  "emphasizePriority": true,
+                  "bound": true
+                },
+                "func": {
+                  "arg": {
+                    "name": "d",
+                    "highlightType": "highlighted",
+                    "topLeftBadgeType": "match",
+                    "bottomRightBadgeType": "funcArg",
+                    "type": "variable",
+                    "argPriorityAgg": [],
+                    "funcPriorityAgg": [
+                      2,
+                      3
+                    ],
+                    "emphasizePriority": true,
+                    "bound": false
+                  },
+                  "body": {
+                    "arg": {
+                      "name": "e",
+                      "highlightType": "active",
+                      "topLeftBadgeType": "none",
+                      "bottomRightBadgeType": "funcUnbound",
+                      "type": "variable",
+                      "argPriorityAgg": [],
+                      "funcPriorityAgg": [],
+                      "emphasizePriority": false,
+                      "bound": false
+                    },
+                    "body": {
+                      "arg": {
+                        "name": "e",
+                        "highlightType": "highlighted",
+                        "topLeftBadgeType": "unmatch",
+                        "bottomRightBadgeType": "funcBound",
+                        "type": "variable",
+                        "argPriorityAgg": [
+                          1
+                        ],
+                        "funcPriorityAgg": [],
+                        "emphasizePriority": false,
+                        "bound": true
+                      },
+                      "func": {
+                        "name": "d",
+                        "highlightType": "highlighted",
+                        "topLeftBadgeType": "match",
+                        "bottomRightBadgeType": "funcBound",
+                        "type": "variable",
+                        "argPriorityAgg": [],
+                        "funcPriorityAgg": [
+                          1
+                        ],
+                        "emphasizePriority": false,
+                        "bound": true
+                      },
+                      "state": "default",
+                      "type": "call",
+                      "priority": 1
+                    },
+                    "type": "function"
+                  },
+                  "type": "function"
+                },
+                "state": "betaReducePreviewBefore",
+                "type": "call",
+                "priority": 2
+              },
+              "state": "default",
+              "type": "call",
+              "priority": 3
+            },
+            "func": {
+              "name": "b",
+              "highlightType": "default",
+              "topLeftBadgeType": "none",
+              "bottomRightBadgeType": "none",
+              "type": "variable",
+              "argPriorityAgg": [],
+              "funcPriorityAgg": [
+                1
+              ],
+              "emphasizePriority": false,
+              "bound": true
+            },
+            "state": "default",
+            "type": "call",
+            "priority": 1
+          },
+          "type": "function"
+        },
+        "type": "function"
+      },
+      "matchExists": true,
+      "activePriority": 2
+    },
+    {
+      "containerState": "stepped",
+      "previouslyChangedExpressionState": "betaReducePreviewAfter",
+      "expression": {
+        "arg": {
+          "name": "b",
+          "highlightType": "default",
+          "topLeftBadgeType": "none",
+          "bottomRightBadgeType": "none",
+          "type": "variable",
+          "argPriorityAgg": [],
+          "funcPriorityAgg": [],
+          "emphasizePriority": false,
+          "bound": false
+        },
+        "body": {
+          "arg": {
+            "name": "c",
+            "highlightType": "default",
+            "topLeftBadgeType": "none",
+            "bottomRightBadgeType": "none",
+            "type": "variable",
+            "argPriorityAgg": [],
+            "funcPriorityAgg": [],
+            "emphasizePriority": false,
+            "bound": false
+          },
+          "body": {
+            "arg": {
+              "arg": {
+                "name": "c",
+                "highlightType": "default",
+                "topLeftBadgeType": "none",
+                "bottomRightBadgeType": "none",
+                "type": "variable",
+                "argPriorityAgg": [
+                  1,
+                  3
+                ],
+                "funcPriorityAgg": [],
+                "emphasizePriority": false,
+                "bound": true
+              },
+              "func": {
+                "arg": {
+                  "name": "b",
+                  "highlightType": "betaReduceCallArgHighlighted",
+                  "topLeftBadgeType": "none",
+                  "bottomRightBadgeType": "callArg",
+                  "type": "variable",
+                  "argPriorityAgg": [
+                    2
+                  ],
+                  "funcPriorityAgg": [],
+                  "emphasizePriority": true,
+                  "bound": true
+                },
+                "func": {
+                  "arg": {
+                    "name": "d",
+                    "highlightType": "active",
+                    "topLeftBadgeType": "none",
+                    "bottomRightBadgeType": "funcArg",
+                    "type": "variable",
+                    "argPriorityAgg": [],
+                    "funcPriorityAgg": [
+                      2,
+                      3
+                    ],
+                    "emphasizePriority": true,
+                    "bound": false
+                  },
+                  "body": {
+                    "arg": {
+                      "name": "e",
+                      "highlightType": "active",
+                      "topLeftBadgeType": "none",
+                      "bottomRightBadgeType": "funcUnbound",
+                      "type": "variable",
+                      "argPriorityAgg": [],
+                      "funcPriorityAgg": [],
+                      "emphasizePriority": false,
+                      "bound": false
+                    },
+                    "body": {
+                      "arg": {
+                        "name": "e",
+                        "highlightType": "active",
+                        "topLeftBadgeType": "none",
+                        "bottomRightBadgeType": "funcBound",
+                        "type": "variable",
+                        "argPriorityAgg": [
+                          1
+                        ],
+                        "funcPriorityAgg": [],
+                        "emphasizePriority": false,
+                        "bound": true
+                      },
+                      "func": {
+                        "name": "b",
+                        "highlightType": "highlighted",
+                        "topLeftBadgeType": "betaReduced",
+                        "bottomRightBadgeType": "funcBound",
+                        "type": "variable",
+                        "argPriorityAgg": [],
+                        "funcPriorityAgg": [
+                          1
+                        ],
+                        "emphasizePriority": false,
+                        "bound": true
+                      },
+                      "state": "default",
+                      "type": "call",
+                      "priority": 1
+                    },
+                    "type": "function"
+                  },
+                  "type": "function"
+                },
+                "state": "betaReducePreviewAfter",
+                "type": "call",
+                "priority": 2
+              },
+              "state": "default",
+              "type": "call",
+              "priority": 3
+            },
+            "func": {
+              "name": "b",
+              "highlightType": "default",
+              "topLeftBadgeType": "none",
+              "bottomRightBadgeType": "none",
+              "type": "variable",
+              "argPriorityAgg": [],
+              "funcPriorityAgg": [
+                1
+              ],
+              "emphasizePriority": false,
+              "bound": true
+            },
+            "state": "default",
+            "type": "call",
+            "priority": 1
+          },
+          "type": "function"
+        },
+        "type": "function"
+      },
+      "activePriority": 2
+    },
+    {
+      "containerState": "stepped",
+      "previouslyChangedExpressionState": "betaReducePreviewCrossed",
+      "expression": {
+        "arg": {
+          "name": "b",
+          "highlightType": "default",
+          "topLeftBadgeType": "none",
+          "bottomRightBadgeType": "none",
+          "type": "variable",
+          "argPriorityAgg": [],
+          "funcPriorityAgg": [],
+          "emphasizePriority": false,
+          "bound": false
+        },
+        "body": {
+          "arg": {
+            "name": "c",
+            "highlightType": "default",
+            "topLeftBadgeType": "none",
+            "bottomRightBadgeType": "none",
+            "type": "variable",
+            "argPriorityAgg": [],
+            "funcPriorityAgg": [],
+            "emphasizePriority": false,
+            "bound": false
+          },
+          "body": {
+            "arg": {
+              "arg": {
+                "name": "c",
+                "highlightType": "default",
+                "topLeftBadgeType": "none",
+                "bottomRightBadgeType": "none",
+                "type": "variable",
+                "argPriorityAgg": [
+                  1,
+                  3
+                ],
+                "funcPriorityAgg": [],
+                "emphasizePriority": false,
+                "bound": true
+              },
+              "func": {
+                "arg": {
+                  "name": "b",
+                  "highlightType": "removed",
+                  "topLeftBadgeType": "none",
+                  "bottomRightBadgeType": "callArg",
+                  "type": "variable",
+                  "argPriorityAgg": [
+                    2
+                  ],
+                  "funcPriorityAgg": [],
+                  "emphasizePriority": true,
+                  "bound": true
+                },
+                "func": {
+                  "arg": {
+                    "name": "d",
+                    "highlightType": "removed",
+                    "topLeftBadgeType": "none",
+                    "bottomRightBadgeType": "funcArg",
+                    "type": "variable",
+                    "argPriorityAgg": [],
+                    "funcPriorityAgg": [
+                      2,
+                      3
+                    ],
+                    "emphasizePriority": true,
+                    "bound": false
+                  },
+                  "body": {
+                    "arg": {
+                      "name": "e",
+                      "highlightType": "active",
+                      "topLeftBadgeType": "none",
+                      "bottomRightBadgeType": "none",
+                      "type": "variable",
+                      "argPriorityAgg": [],
+                      "funcPriorityAgg": [],
+                      "emphasizePriority": false,
+                      "bound": false
+                    },
+                    "body": {
+                      "arg": {
+                        "name": "e",
+                        "highlightType": "active",
+                        "topLeftBadgeType": "none",
+                        "bottomRightBadgeType": "none",
+                        "type": "variable",
+                        "argPriorityAgg": [
+                          1
+                        ],
+                        "funcPriorityAgg": [],
+                        "emphasizePriority": false,
+                        "bound": true
+                      },
+                      "func": {
+                        "name": "b",
+                        "highlightType": "active",
+                        "topLeftBadgeType": "none",
+                        "bottomRightBadgeType": "none",
+                        "type": "variable",
+                        "argPriorityAgg": [],
+                        "funcPriorityAgg": [
+                          1
+                        ],
+                        "emphasizePriority": false,
+                        "bound": true
+                      },
+                      "state": "default",
+                      "type": "call",
+                      "priority": 1
+                    },
+                    "type": "function"
+                  },
+                  "type": "function"
+                },
+                "state": "betaReducePreviewCrossed",
+                "type": "call",
+                "priority": 2
+              },
+              "state": "default",
+              "type": "call",
+              "priority": 3
+            },
+            "func": {
+              "name": "b",
+              "highlightType": "default",
+              "topLeftBadgeType": "none",
+              "bottomRightBadgeType": "none",
+              "type": "variable",
+              "argPriorityAgg": [],
+              "funcPriorityAgg": [
+                1
+              ],
+              "emphasizePriority": false,
+              "bound": true
+            },
+            "state": "default",
+            "type": "call",
+            "priority": 1
+          },
+          "type": "function"
+        },
+        "type": "function"
+      },
+      "activePriority": 2
+    },
+    {
+      "containerState": "ready",
+      "previouslyChangedExpressionState": "default",
+      "expression": {
+        "arg": {
+          "name": "b",
+          "highlightType": "default",
+          "topLeftBadgeType": "none",
+          "bottomRightBadgeType": "none",
+          "type": "variable",
+          "argPriorityAgg": [],
+          "funcPriorityAgg": [],
+          "emphasizePriority": false,
+          "bound": false
+        },
+        "body": {
+          "arg": {
+            "name": "c",
+            "highlightType": "default",
+            "topLeftBadgeType": "none",
+            "bottomRightBadgeType": "none",
+            "type": "variable",
+            "argPriorityAgg": [],
+            "funcPriorityAgg": [],
+            "emphasizePriority": false,
+            "bound": false
+          },
+          "body": {
+            "arg": {
+              "arg": {
+                "name": "c",
+                "highlightType": "default",
+                "topLeftBadgeType": "none",
+                "bottomRightBadgeType": "none",
+                "type": "variable",
+                "argPriorityAgg": [
+                  1,
+                  2
+                ],
+                "funcPriorityAgg": [],
+                "emphasizePriority": false,
+                "bound": true
+              },
+              "func": {
+                "arg": {
+                  "name": "e",
+                  "highlightType": "default",
+                  "topLeftBadgeType": "none",
+                  "bottomRightBadgeType": "none",
+                  "type": "variable",
+                  "argPriorityAgg": [],
+                  "funcPriorityAgg": [
+                    2
+                  ],
+                  "emphasizePriority": false,
+                  "bound": false
+                },
+                "body": {
+                  "arg": {
+                    "name": "e",
+                    "highlightType": "default",
+                    "topLeftBadgeType": "none",
+                    "bottomRightBadgeType": "none",
+                    "type": "variable",
+                    "argPriorityAgg": [
+                      1
+                    ],
+                    "funcPriorityAgg": [],
+                    "emphasizePriority": false,
+                    "bound": true
+                  },
+                  "func": {
+                    "name": "b",
+                    "highlightType": "default",
+                    "topLeftBadgeType": "none",
+                    "bottomRightBadgeType": "none",
+                    "type": "variable",
+                    "argPriorityAgg": [],
+                    "funcPriorityAgg": [
+                      1
+                    ],
+                    "emphasizePriority": false,
+                    "bound": true
+                  },
+                  "state": "default",
+                  "type": "call",
+                  "priority": 1
+                },
+                "type": "function"
+              },
+              "state": "default",
+              "type": "call",
+              "priority": 2
+            },
+            "func": {
+              "name": "b",
+              "highlightType": "default",
+              "topLeftBadgeType": "none",
+              "bottomRightBadgeType": "none",
+              "type": "variable",
+              "argPriorityAgg": [],
+              "funcPriorityAgg": [
+                1
+              ],
+              "emphasizePriority": false,
+              "bound": true
+            },
+            "state": "default",
+            "type": "call",
+            "priority": 1
+          },
+          "type": "function"
+        },
+        "type": "function"
+      }
+    },
+    {
+      "containerState": "stepped",
+      "previouslyChangedExpressionState": "active",
+      "expression": {
+        "arg": {
+          "name": "b",
+          "highlightType": "default",
+          "topLeftBadgeType": "none",
+          "bottomRightBadgeType": "none",
+          "type": "variable",
+          "argPriorityAgg": [],
+          "funcPriorityAgg": [],
+          "emphasizePriority": false,
+          "bound": false
+        },
+        "body": {
+          "arg": {
+            "name": "c",
+            "highlightType": "default",
+            "topLeftBadgeType": "none",
+            "bottomRightBadgeType": "none",
+            "type": "variable",
+            "argPriorityAgg": [],
+            "funcPriorityAgg": [],
+            "emphasizePriority": false,
+            "bound": false
+          },
+          "body": {
+            "arg": {
+              "arg": {
+                "name": "c",
+                "highlightType": "active",
+                "topLeftBadgeType": "none",
+                "bottomRightBadgeType": "none",
+                "type": "variable",
+                "argPriorityAgg": [
+                  1,
+                  2
+                ],
+                "funcPriorityAgg": [],
+                "emphasizePriority": true,
+                "bound": true
+              },
+              "func": {
+                "arg": {
+                  "name": "e",
+                  "highlightType": "active",
+                  "topLeftBadgeType": "none",
+                  "bottomRightBadgeType": "none",
+                  "type": "variable",
+                  "argPriorityAgg": [],
+                  "funcPriorityAgg": [
+                    2
+                  ],
+                  "emphasizePriority": true,
+                  "bound": false
+                },
+                "body": {
+                  "arg": {
+                    "name": "e",
+                    "highlightType": "active",
+                    "topLeftBadgeType": "none",
+                    "bottomRightBadgeType": "none",
+                    "type": "variable",
+                    "argPriorityAgg": [
+                      1
+                    ],
+                    "funcPriorityAgg": [],
+                    "emphasizePriority": false,
+                    "bound": true
+                  },
+                  "func": {
+                    "name": "b",
+                    "highlightType": "active",
+                    "topLeftBadgeType": "none",
+                    "bottomRightBadgeType": "none",
+                    "type": "variable",
+                    "argPriorityAgg": [],
+                    "funcPriorityAgg": [
+                      1
+                    ],
+                    "emphasizePriority": false,
+                    "bound": true
+                  },
+                  "state": "default",
+                  "type": "call",
+                  "priority": 1
+                },
+                "type": "function"
+              },
+              "state": "active",
+              "type": "call",
+              "priority": 2
+            },
+            "func": {
+              "name": "b",
+              "highlightType": "default",
+              "topLeftBadgeType": "none",
+              "bottomRightBadgeType": "none",
+              "type": "variable",
+              "argPriorityAgg": [],
+              "funcPriorityAgg": [
+                1
+              ],
+              "emphasizePriority": false,
+              "bound": true
+            },
+            "state": "default",
+            "type": "call",
+            "priority": 1
+          },
+          "type": "function"
+        },
+        "type": "function"
+      },
+      "activePriority": 2
+    },
+    {
+      "containerState": "stepped",
+      "previouslyChangedExpressionState": "showFuncBound",
+      "expression": {
+        "arg": {
+          "name": "b",
+          "highlightType": "default",
+          "topLeftBadgeType": "none",
+          "bottomRightBadgeType": "none",
+          "type": "variable",
+          "argPriorityAgg": [],
+          "funcPriorityAgg": [],
+          "emphasizePriority": false,
+          "bound": false
+        },
+        "body": {
+          "arg": {
+            "name": "c",
+            "highlightType": "default",
+            "topLeftBadgeType": "none",
+            "bottomRightBadgeType": "none",
+            "type": "variable",
+            "argPriorityAgg": [],
+            "funcPriorityAgg": [],
+            "emphasizePriority": false,
+            "bound": false
+          },
+          "body": {
+            "arg": {
+              "arg": {
+                "name": "c",
+                "highlightType": "active",
+                "topLeftBadgeType": "none",
+                "bottomRightBadgeType": "callArg",
+                "type": "variable",
+                "argPriorityAgg": [
+                  1,
+                  2
+                ],
+                "funcPriorityAgg": [],
+                "emphasizePriority": true,
+                "bound": true
+              },
+              "func": {
+                "arg": {
+                  "name": "e",
+                  "highlightType": "active",
+                  "topLeftBadgeType": "none",
+                  "bottomRightBadgeType": "funcArg",
+                  "type": "variable",
+                  "argPriorityAgg": [],
+                  "funcPriorityAgg": [
+                    2
+                  ],
+                  "emphasizePriority": true,
+                  "bound": false
+                },
+                "body": {
+                  "arg": {
+                    "name": "e",
+                    "highlightType": "active",
+                    "topLeftBadgeType": "none",
+                    "bottomRightBadgeType": "funcBound",
+                    "type": "variable",
+                    "argPriorityAgg": [
+                      1
+                    ],
+                    "funcPriorityAgg": [],
+                    "emphasizePriority": false,
+                    "bound": true
+                  },
+                  "func": {
+                    "name": "b",
+                    "highlightType": "active",
+                    "topLeftBadgeType": "none",
+                    "bottomRightBadgeType": "funcBound",
+                    "type": "variable",
+                    "argPriorityAgg": [],
+                    "funcPriorityAgg": [
+                      1
+                    ],
+                    "emphasizePriority": false,
+                    "bound": true
+                  },
+                  "state": "default",
+                  "type": "call",
+                  "priority": 1
+                },
+                "type": "function"
+              },
+              "state": "showFuncBound",
+              "type": "call",
+              "priority": 2
+            },
+            "func": {
+              "name": "b",
+              "highlightType": "default",
+              "topLeftBadgeType": "none",
+              "bottomRightBadgeType": "none",
+              "type": "variable",
+              "argPriorityAgg": [],
+              "funcPriorityAgg": [
+                1
+              ],
+              "emphasizePriority": false,
+              "bound": true
+            },
+            "state": "default",
+            "type": "call",
+            "priority": 1
+          },
+          "type": "function"
+        },
+        "type": "function"
+      },
+      "activePriority": 2
+    },
+    {
+      "containerState": "stepped",
+      "previouslyChangedExpressionState": "betaReducePreviewBefore",
+      "expression": {
+        "arg": {
+          "name": "b",
+          "highlightType": "default",
+          "topLeftBadgeType": "none",
+          "bottomRightBadgeType": "none",
+          "type": "variable",
+          "argPriorityAgg": [],
+          "funcPriorityAgg": [],
+          "emphasizePriority": false,
+          "bound": false
+        },
+        "body": {
+          "arg": {
+            "name": "c",
+            "highlightType": "default",
+            "topLeftBadgeType": "none",
+            "bottomRightBadgeType": "none",
+            "type": "variable",
+            "argPriorityAgg": [],
+            "funcPriorityAgg": [],
+            "emphasizePriority": false,
+            "bound": false
+          },
+          "body": {
+            "arg": {
+              "arg": {
+                "name": "c",
+                "highlightType": "active",
+                "topLeftBadgeType": "none",
+                "bottomRightBadgeType": "callArg",
+                "type": "variable",
+                "argPriorityAgg": [
+                  1,
+                  2
+                ],
+                "funcPriorityAgg": [],
+                "emphasizePriority": true,
+                "bound": true
+              },
+              "func": {
+                "arg": {
+                  "name": "e",
+                  "highlightType": "highlighted",
+                  "topLeftBadgeType": "match",
+                  "bottomRightBadgeType": "funcArg",
+                  "type": "variable",
+                  "argPriorityAgg": [],
+                  "funcPriorityAgg": [
+                    2
+                  ],
+                  "emphasizePriority": true,
+                  "bound": false
+                },
+                "body": {
+                  "arg": {
+                    "name": "e",
+                    "highlightType": "highlighted",
+                    "topLeftBadgeType": "match",
+                    "bottomRightBadgeType": "funcBound",
+                    "type": "variable",
+                    "argPriorityAgg": [
+                      1
+                    ],
+                    "funcPriorityAgg": [],
+                    "emphasizePriority": false,
+                    "bound": true
+                  },
+                  "func": {
+                    "name": "b",
+                    "highlightType": "highlighted",
+                    "topLeftBadgeType": "unmatch",
+                    "bottomRightBadgeType": "funcBound",
+                    "type": "variable",
+                    "argPriorityAgg": [],
+                    "funcPriorityAgg": [
+                      1
+                    ],
+                    "emphasizePriority": false,
+                    "bound": true
+                  },
+                  "state": "default",
+                  "type": "call",
+                  "priority": 1
+                },
+                "type": "function"
+              },
+              "state": "betaReducePreviewBefore",
+              "type": "call",
+              "priority": 2
+            },
+            "func": {
+              "name": "b",
+              "highlightType": "default",
+              "topLeftBadgeType": "none",
+              "bottomRightBadgeType": "none",
+              "type": "variable",
+              "argPriorityAgg": [],
+              "funcPriorityAgg": [
+                1
+              ],
+              "emphasizePriority": false,
+              "bound": true
+            },
+            "state": "default",
+            "type": "call",
+            "priority": 1
+          },
+          "type": "function"
+        },
+        "type": "function"
+      },
+      "matchExists": true,
+      "activePriority": 2
+    },
+    {
+      "containerState": "stepped",
+      "previouslyChangedExpressionState": "betaReducePreviewAfter",
+      "expression": {
+        "arg": {
+          "name": "b",
+          "highlightType": "default",
+          "topLeftBadgeType": "none",
+          "bottomRightBadgeType": "none",
+          "type": "variable",
+          "argPriorityAgg": [],
+          "funcPriorityAgg": [],
+          "emphasizePriority": false,
+          "bound": false
+        },
+        "body": {
+          "arg": {
+            "name": "c",
+            "highlightType": "default",
+            "topLeftBadgeType": "none",
+            "bottomRightBadgeType": "none",
+            "type": "variable",
+            "argPriorityAgg": [],
+            "funcPriorityAgg": [],
+            "emphasizePriority": false,
+            "bound": false
+          },
+          "body": {
+            "arg": {
+              "arg": {
+                "name": "c",
+                "highlightType": "betaReduceCallArgHighlighted",
+                "topLeftBadgeType": "none",
+                "bottomRightBadgeType": "callArg",
+                "type": "variable",
+                "argPriorityAgg": [
+                  1,
+                  2
+                ],
+                "funcPriorityAgg": [],
+                "emphasizePriority": true,
+                "bound": true
+              },
+              "func": {
+                "arg": {
+                  "name": "e",
+                  "highlightType": "active",
+                  "topLeftBadgeType": "none",
+                  "bottomRightBadgeType": "funcArg",
+                  "type": "variable",
+                  "argPriorityAgg": [],
+                  "funcPriorityAgg": [
+                    2
+                  ],
+                  "emphasizePriority": true,
+                  "bound": false
+                },
+                "body": {
+                  "arg": {
+                    "name": "c",
+                    "highlightType": "highlighted",
+                    "topLeftBadgeType": "betaReduced",
+                    "bottomRightBadgeType": "funcBound",
+                    "type": "variable",
+                    "argPriorityAgg": [
+                      1
+                    ],
+                    "funcPriorityAgg": [],
+                    "emphasizePriority": false,
+                    "bound": true
+                  },
+                  "func": {
+                    "name": "b",
+                    "highlightType": "active",
+                    "topLeftBadgeType": "none",
+                    "bottomRightBadgeType": "funcBound",
+                    "type": "variable",
+                    "argPriorityAgg": [],
+                    "funcPriorityAgg": [
+                      1
+                    ],
+                    "emphasizePriority": false,
+                    "bound": true
+                  },
+                  "state": "default",
+                  "type": "call",
+                  "priority": 1
+                },
+                "type": "function"
+              },
+              "state": "betaReducePreviewAfter",
+              "type": "call",
+              "priority": 2
+            },
+            "func": {
+              "name": "b",
+              "highlightType": "default",
+              "topLeftBadgeType": "none",
+              "bottomRightBadgeType": "none",
+              "type": "variable",
+              "argPriorityAgg": [],
+              "funcPriorityAgg": [
+                1
+              ],
+              "emphasizePriority": false,
+              "bound": true
+            },
+            "state": "default",
+            "type": "call",
+            "priority": 1
+          },
+          "type": "function"
+        },
+        "type": "function"
+      },
+      "activePriority": 2
+    },
+    {
+      "containerState": "stepped",
+      "previouslyChangedExpressionState": "betaReducePreviewCrossed",
+      "expression": {
+        "arg": {
+          "name": "b",
+          "highlightType": "default",
+          "topLeftBadgeType": "none",
+          "bottomRightBadgeType": "none",
+          "type": "variable",
+          "argPriorityAgg": [],
+          "funcPriorityAgg": [],
+          "emphasizePriority": false,
+          "bound": false
+        },
+        "body": {
+          "arg": {
+            "name": "c",
+            "highlightType": "default",
+            "topLeftBadgeType": "none",
+            "bottomRightBadgeType": "none",
+            "type": "variable",
+            "argPriorityAgg": [],
+            "funcPriorityAgg": [],
+            "emphasizePriority": false,
+            "bound": false
+          },
+          "body": {
+            "arg": {
+              "arg": {
+                "name": "c",
+                "highlightType": "removed",
+                "topLeftBadgeType": "none",
+                "bottomRightBadgeType": "callArg",
+                "type": "variable",
+                "argPriorityAgg": [
+                  1,
+                  2
+                ],
+                "funcPriorityAgg": [],
+                "emphasizePriority": true,
+                "bound": true
+              },
+              "func": {
+                "arg": {
+                  "name": "e",
+                  "highlightType": "removed",
+                  "topLeftBadgeType": "none",
+                  "bottomRightBadgeType": "funcArg",
+                  "type": "variable",
+                  "argPriorityAgg": [],
+                  "funcPriorityAgg": [
+                    2
+                  ],
+                  "emphasizePriority": true,
+                  "bound": false
+                },
+                "body": {
+                  "arg": {
+                    "name": "c",
+                    "highlightType": "active",
+                    "topLeftBadgeType": "none",
+                    "bottomRightBadgeType": "none",
+                    "type": "variable",
+                    "argPriorityAgg": [
+                      1
+                    ],
+                    "funcPriorityAgg": [],
+                    "emphasizePriority": false,
+                    "bound": true
+                  },
+                  "func": {
+                    "name": "b",
+                    "highlightType": "active",
+                    "topLeftBadgeType": "none",
+                    "bottomRightBadgeType": "none",
+                    "type": "variable",
+                    "argPriorityAgg": [],
+                    "funcPriorityAgg": [
+                      1
+                    ],
+                    "emphasizePriority": false,
+                    "bound": true
+                  },
+                  "state": "default",
+                  "type": "call",
+                  "priority": 1
+                },
+                "type": "function"
+              },
+              "state": "betaReducePreviewCrossed",
+              "type": "call",
+              "priority": 2
+            },
+            "func": {
+              "name": "b",
+              "highlightType": "default",
+              "topLeftBadgeType": "none",
+              "bottomRightBadgeType": "none",
+              "type": "variable",
+              "argPriorityAgg": [],
+              "funcPriorityAgg": [
+                1
+              ],
+              "emphasizePriority": false,
+              "bound": true
+            },
+            "state": "default",
+            "type": "call",
+            "priority": 1
+          },
+          "type": "function"
+        },
+        "type": "function"
+      },
+      "activePriority": 2
+    },
+    {
+      "containerState": "done",
+      "previouslyChangedExpressionState": "default",
+      "expression": {
+        "arg": {
+          "name": "b",
+          "highlightType": "default",
+          "topLeftBadgeType": "none",
+          "bottomRightBadgeType": "none",
+          "type": "variable",
+          "argPriorityAgg": [],
+          "funcPriorityAgg": [],
+          "emphasizePriority": false,
+          "bound": false
+        },
+        "body": {
+          "arg": {
+            "name": "c",
+            "highlightType": "default",
+            "topLeftBadgeType": "none",
+            "bottomRightBadgeType": "none",
+            "type": "variable",
+            "argPriorityAgg": [],
+            "funcPriorityAgg": [],
+            "emphasizePriority": false,
+            "bound": false
+          },
+          "body": {
+            "arg": {
+              "arg": {
+                "name": "c",
+                "highlightType": "default",
+                "topLeftBadgeType": "none",
+                "bottomRightBadgeType": "none",
+                "type": "variable",
+                "argPriorityAgg": [
+                  1,
+                  2
+                ],
+                "funcPriorityAgg": [],
+                "emphasizePriority": false,
+                "bound": true
+              },
+              "func": {
+                "name": "b",
+                "highlightType": "default",
+                "topLeftBadgeType": "none",
+                "bottomRightBadgeType": "none",
+                "type": "variable",
+                "argPriorityAgg": [],
+                "funcPriorityAgg": [
+                  2
+                ],
+                "emphasizePriority": false,
+                "bound": true
+              },
+              "state": "default",
+              "type": "call",
+              "priority": 2
+            },
+            "func": {
+              "name": "b",
+              "highlightType": "default",
+              "topLeftBadgeType": "none",
+              "bottomRightBadgeType": "none",
+              "type": "variable",
+              "argPriorityAgg": [],
+              "funcPriorityAgg": [
+                1
+              ],
+              "emphasizePriority": false,
+              "bound": true
+            },
+            "state": "default",
+            "type": "call",
+            "priority": 1
+          },
+          "type": "function"
+        },
+        "type": "function"
+      }
+    }
+  ],
+  "speed": 1,
+  "hideControls": false,
+  "explanationsVisibility": "hiddenInitialPausedOnly",
+  "hidePriorities": false,
+  "variableSize": "md",
+  "containerSize": "xxs",
+  "hidePlayButton": false,
+  "hideBottomRightBadges": false,
+  "skipToTheEnd": false,
+  "hideFuncUnboundBadgeOnExplanation": true,
+  "highlightOverridesCallArgAndFuncUnboundOnly": false,
+  "bottomRightBadgeOverrides": {},
+  "highlightOverrides": {},
+  "highlightOverrideActiveAfterStart": false,
+  "highlightFunctions": false
+}

From 783745e3eadb56c449b0bb5137979477b903bc9c Mon Sep 17 00:00:00 2001
From: Shu Uesugi <shu@chibicode.com>
Date: Wed, 18 Sep 2019 18:55:14 -0700
Subject: [PATCH 09/15] Finish JP demo

---
 scripts/lib/initialExpressionContainers.ts |  9 ++
 scripts/lib/runnerConfigs.ts               |  5 ++
 src/components/Runners/Gnwm.tsx            | 12 +++
 src/components/Runners/index.ts            |  1 +
 src/contents/demo.jp.tsx                   | 98 ++++------------------
 src/lib/runners/gnwm.json                  | 56 +++++++++++++
 6 files changed, 98 insertions(+), 83 deletions(-)
 create mode 100644 src/components/Runners/Gnwm.tsx
 create mode 100644 src/lib/runners/gnwm.json

diff --git a/scripts/lib/initialExpressionContainers.ts b/scripts/lib/initialExpressionContainers.ts
index ad1e35484..67e83cb56 100644
--- a/scripts/lib/initialExpressionContainers.ts
+++ b/scripts/lib/initialExpressionContainers.ts
@@ -358,6 +358,15 @@ export const vibe = initializeExpressionContainer([
   }
 ])
 
+export const lbkw = initializeExpressionContainer([
+  {
+    shorthandFunc: 'add'
+  },
+  {
+    shorthandNumber: 2
+  }
+])
+
 export const kfwf = initializeExpressionContainer([
   {
     shorthandFunc: 'add'
diff --git a/scripts/lib/runnerConfigs.ts b/scripts/lib/runnerConfigs.ts
index 570e3e3ad..722cb30c8 100644
--- a/scripts/lib/runnerConfigs.ts
+++ b/scripts/lib/runnerConfigs.ts
@@ -875,6 +875,11 @@ export const lizi: ExpressionRunnerShorthandConfig = {
   initialExpressionContainer: initialExpressionContainers.vibe
 }
 
+export const gnwm: ExpressionRunnerShorthandConfig = {
+  runner: 'simple',
+  initialExpressionContainer: initialExpressionContainers.lbkw
+}
+
 export const mcug: ExpressionRunnerShorthandConfig = {
   runner: 'playButtonOnly',
   initialExpressionContainer: initialExpressionContainers.vibe
diff --git a/src/components/Runners/Gnwm.tsx b/src/components/Runners/Gnwm.tsx
new file mode 100644
index 000000000..8609e54bd
--- /dev/null
+++ b/src/components/Runners/Gnwm.tsx
@@ -0,0 +1,12 @@
+import React from 'react'
+import ExpressionRunnerPrecomputed from 'src/components/ExpressionRunnerPrecomputed'
+import config from 'src/lib/runners/gnwm.json'
+
+const Gnwm = ({ children }: { children?: React.ReactNode }) => (
+  // @ts-ignore
+  <ExpressionRunnerPrecomputed {...config}>
+    {children}
+  </ExpressionRunnerPrecomputed>
+)
+
+export default Gnwm
diff --git a/src/components/Runners/index.ts b/src/components/Runners/index.ts
index bcb1e164c..3494669b0 100644
--- a/src/components/Runners/index.ts
+++ b/src/components/Runners/index.ts
@@ -124,6 +124,7 @@ export { default as Zwpj } from 'src/components/Runners/Zwpj'
 export { default as Zzxj } from 'src/components/Runners/Zzxj'
 export { default as Zzyu } from 'src/components/Runners/Zzyu'
 export { default as Lizi } from 'src/components/Runners/Lizi'
+export { default as Gnwm } from 'src/components/Runners/Gnwm'
 export { default as Mcug } from 'src/components/Runners/Mcug'
 export { default as Aovj } from 'src/components/Runners/Aovj'
 export { default as Rviy } from 'src/components/Runners/Rviy'
diff --git a/src/contents/demo.jp.tsx b/src/contents/demo.jp.tsx
index 1ae1c52da..f5196f844 100644
--- a/src/contents/demo.jp.tsx
+++ b/src/contents/demo.jp.tsx
@@ -56,58 +56,6 @@ const DemoCardList = () => (
           </>
         )
       },
-      {
-        title: (
-          <>
-            計算箱の「
-            <H args={{ name: 'minusOneFeature' }} />」
-          </>
-        ),
-        content: (
-          <>
-            <R.Xmqp />
-          </>
-        )
-      },
-      {
-        title: (
-          <>
-            「
-            <H args={{ name: 'plusOneFeature' }} />
-            」と「
-            <H args={{ name: 'minusOneFeature' }} />
-            」を複数使う
-          </>
-        ),
-        content: (
-          <>
-            <R.Eagi></R.Eagi>
-            <R.Yjur></R.Yjur>
-          </>
-        )
-      },
-      {
-        title: (
-          <>
-            計算箱の「
-            <H args={{ name: 'repeatFeature' }} />」
-          </>
-        ),
-        content: (
-          <>
-            <R.Ednv />
-            <R.Pgxb />
-            <Hr />
-            <R.Xpks />
-            <ExpressionRunnerSeparator />
-            <R.Dgpx></R.Dgpx>
-            <Hr />
-            <R.Sucz></R.Sucz>
-            <ExpressionRunnerSeparator />
-            <R.Xlgb></R.Xlgb>
-          </>
-        )
-      },
       {
         type: 'sideNote',
         title: <>パート2: 弁当箱の説明</>,
@@ -192,7 +140,7 @@ const DemoCardList = () => (
         )
       },
       {
-        title: <>計算箱に変換できる法則</>,
+        title: <>計算箱に変換する法則</>,
         type: 'summary',
         content: (
           <>
@@ -229,36 +177,6 @@ const DemoCardList = () => (
           </>
         )
       },
-      {
-        title: <>実行してから変換</>,
-        content: (
-          <>
-            <R.Dcji />
-            <Hr />
-            <R.Zlrx />
-            <Hr />
-            <R.Dwzy>
-              <H
-                args={{ name: 'canBeConvertedCaption', letter: 'a', number: 0 }}
-              />
-            </R.Dwzy>
-            <ExpressionRunnerSeparator />
-            <R.Jwah />
-            <Hr />
-            <R.Zahd />
-            <Hr />
-            <R.Csqj />
-            <Hr />
-            <R.Hhdu>
-              <H
-                args={{ name: 'canBeConvertedCaption', letter: 'e', number: 1 }}
-              />
-            </R.Hhdu>
-            <ExpressionRunnerSeparator />
-            <R.Rnug />
-          </>
-        )
-      },
       {
         title: <>パート4: 1を足す</>,
         type: 'sideNote',
@@ -331,6 +249,20 @@ const DemoCardList = () => (
             </R.Nngz>
           </>
         )
+      },
+      {
+        title: <>計算箱は弁当箱で再現できる</>,
+        content: (
+          <>
+            <R.Lizi></R.Lizi>
+            <ExpressionRunnerSeparator />
+            <R.Plde></R.Plde>
+            <Hr />
+            <R.Gnwm></R.Gnwm>
+            <ExpressionRunnerSeparator />
+            <R.Awwn></R.Awwn>
+          </>
+        )
       }
     ]}
   />
diff --git a/src/lib/runners/gnwm.json b/src/lib/runners/gnwm.json
new file mode 100644
index 000000000..f7f589faa
--- /dev/null
+++ b/src/lib/runners/gnwm.json
@@ -0,0 +1,56 @@
+{
+  "expressionContainers": [
+    {
+      "containerState": "ready",
+      "previouslyChangedExpressionState": "default",
+      "expression": {
+        "arg": {
+          "name": "shorthandNumber",
+          "highlightType": "default",
+          "topLeftBadgeType": "none",
+          "bottomRightBadgeType": "none",
+          "type": "variable",
+          "argPriorityAgg": [
+            1
+          ],
+          "funcPriorityAgg": [],
+          "emphasizePriority": false,
+          "bound": true,
+          "shorthandNumber": 2
+        },
+        "func": {
+          "name": "shorthandFunc",
+          "highlightType": "default",
+          "topLeftBadgeType": "none",
+          "bottomRightBadgeType": "none",
+          "type": "variable",
+          "argPriorityAgg": [],
+          "funcPriorityAgg": [
+            1
+          ],
+          "emphasizePriority": false,
+          "bound": true,
+          "shorthandFunc": "add"
+        },
+        "state": "default",
+        "type": "call",
+        "priority": 1
+      }
+    }
+  ],
+  "speed": 1,
+  "hideControls": true,
+  "explanationsVisibility": "hidden",
+  "hidePriorities": true,
+  "variableSize": "lg",
+  "containerSize": "xxs",
+  "hidePlayButton": false,
+  "hideBottomRightBadges": false,
+  "skipToTheEnd": false,
+  "hideFuncUnboundBadgeOnExplanation": false,
+  "highlightOverridesCallArgAndFuncUnboundOnly": false,
+  "bottomRightBadgeOverrides": {},
+  "highlightOverrides": {},
+  "highlightOverrideActiveAfterStart": false,
+  "highlightFunctions": false
+}

From 39177602bf484125201ce5f9cc7396739b98a4c1 Mon Sep 17 00:00:00 2001
From: Shu Uesugi <shu@chibicode.com>
Date: Wed, 18 Sep 2019 20:17:08 -0700
Subject: [PATCH 10/15] Continue with demo

---
 src/components/ExpressionRunnerControls.tsx   |  10 +-
 .../ExpressionRunnerPrecomputed.tsx           |   4 +-
 src/components/H.tsx                          |  29 +-
 src/contents/1.en.tsx                         |   6 +-
 src/contents/demo.en.tsx                      | 263 +++++++++++++++++-
 src/contents/demo.jp.tsx                      |   1 -
 src/lib/titles.ts                             |   2 +-
 7 files changed, 301 insertions(+), 14 deletions(-)

diff --git a/src/components/ExpressionRunnerControls.tsx b/src/components/ExpressionRunnerControls.tsx
index a300c2693..a13fa6dca 100644
--- a/src/components/ExpressionRunnerControls.tsx
+++ b/src/components/ExpressionRunnerControls.tsx
@@ -1,10 +1,11 @@
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core'
 import H from 'src/components/H'
-import { colors, spaces } from 'src/lib/theme'
+import { colors, spaces, fontSizes } from 'src/lib/theme'
 import Emoji from 'src/components/Emoji'
 import { ExpressionRunnerProps } from 'src/types/ExpressionRunnerTypes'
 import ExpressionRunnerButton from 'src/components/ExpressionRunnerButton'
+import locale from 'src/lib/locale'
 
 interface ExpressionRunnerControlsProps {
   canStepForward: boolean
@@ -62,7 +63,7 @@ const ExpressionRunnerControls = ({
   skipToTheEnd,
   convert
 }: ExpressionRunnerControlsProps) => {
-  const centerButtonWidth = convert ? 60 : 44
+  const centerButtonWidth = convert ? 66 : 44
   const sideButtonsWidth = (100 - centerButtonWidth) / 2 - 2
   return (
     <div
@@ -122,6 +123,11 @@ const ExpressionRunnerControls = ({
             !canStepForward &&
               css`
                 background: ${colors('pink50')};
+              `,
+            convert &&
+              locale === 'en' &&
+              css`
+                font-size: ${fontSizes(0.75)};
               `
           ]}
         >
diff --git a/src/components/ExpressionRunnerPrecomputed.tsx b/src/components/ExpressionRunnerPrecomputed.tsx
index c22ac6011..a9c97f75a 100644
--- a/src/components/ExpressionRunnerPrecomputed.tsx
+++ b/src/components/ExpressionRunnerPrecomputed.tsx
@@ -186,7 +186,7 @@ const ExpressionRunnerPrecomputed = ({
           horizontalPadding={0}
         >
           {explanationsVisible && (
-            <ExpressionRunnerCaptionWrapper>
+            <ExpressionRunnerCaptionWrapper t8d>
               <ExpressionRunnerExplanation
                 isPlaying={isPlaying}
                 expressionContainer={expressionContainers[currentIndex]}
@@ -198,7 +198,7 @@ const ExpressionRunnerPrecomputed = ({
             </ExpressionRunnerCaptionWrapper>
           )}
           {children && !explanationsVisible && !isPlaying && (
-            <ExpressionRunnerCaptionWrapper>
+            <ExpressionRunnerCaptionWrapper t8d>
               {children}
             </ExpressionRunnerCaptionWrapper>
           )}
diff --git a/src/components/H.tsx b/src/components/H.tsx
index 8bd1f314a..3f97936ac 100644
--- a/src/components/H.tsx
+++ b/src/components/H.tsx
@@ -1096,7 +1096,13 @@ const H = ({ args, highlightType, episodeNumberOverrides }: HProps) => {
   }
   if (args.name === 'convertToMathbox') {
     if (locale === 'en') {
-      return <>?</>
+      return (
+        <>
+          <InlineHeader>
+            <CustomEmoji type="mathBox" /> Convert to Mathbox <Emoji>🐶</Emoji>
+          </InlineHeader>
+        </>
+      )
     } else {
       return (
         <InlineHeader>
@@ -1131,7 +1137,11 @@ const H = ({ args, highlightType, episodeNumberOverrides }: HProps) => {
   }
   if (args.name === 'undoConvertToMathbox') {
     if (locale === 'en') {
-      return <>?</>
+      return (
+        <InlineHeader>
+          <Emoji>🍱</Emoji> Back to Lunchbox <Emoji>↩</Emoji>
+        </InlineHeader>
+      )
     } else {
       return (
         <InlineHeader>
@@ -1142,7 +1152,14 @@ const H = ({ args, highlightType, episodeNumberOverrides }: HProps) => {
   }
   if (args.name === 'doneConvertToMathbox') {
     if (locale === 'en') {
-      return <>?</>
+      return (
+        <>
+          <Strong highlightType={highlightType}>
+            <CustomEmoji type="mathBox" /> Converted to Mathbox!{' '}
+            <Emoji>🐶</Emoji>
+          </Strong>
+        </>
+      )
     } else {
       return (
         <>
@@ -1317,7 +1334,11 @@ const H = ({ args, highlightType, episodeNumberOverrides }: HProps) => {
   }
   if (args.name === 'plusOneFeature') {
     if (locale === 'en') {
-      return <></>
+      return (
+        <>
+          <Strong>“Add 1”</Strong> feature <CustomEmoji type="plusOne" />
+        </>
+      )
     } else {
       return (
         <>
diff --git a/src/contents/1.en.tsx b/src/contents/1.en.tsx
index b222b4f68..f74a1c5b2 100644
--- a/src/contents/1.en.tsx
+++ b/src/contents/1.en.tsx
@@ -28,8 +28,8 @@ export default () => (
           <>
             <P t8d>
               In this course, we’ll learn about Y Combinator through a short
-              story. Let’s first talk about <Strong>“math boxes”</Strong>, one
-              of the key items of this story.
+              story. Let’s first talk about <Strong>“mathboxes”</Strong>, one of
+              the key items of this story.
             </P>
             <EmojiSeparator
               t8d
@@ -38,7 +38,7 @@ export default () => (
                 <CustomEmoji type="mathBox" />,
                 <CustomEmoji type="mathBox" />
               ]}
-              description={<>This is the icon for math boxes.</>}
+              description={<>This is the icon for mathboxes.</>}
             />
           </>
         )
diff --git a/src/contents/demo.en.tsx b/src/contents/demo.en.tsx
index d196c3e6b..75e58760d 100644
--- a/src/contents/demo.en.tsx
+++ b/src/contents/demo.en.tsx
@@ -1,6 +1,15 @@
 import React from 'react'
-import { P, Strong } from 'src/components/ContentTags'
+import { P, Hr, Strong } from 'src/components/ContentTags'
 import EpisodeCardList from 'src/components/EpisodeCardList'
+import ExpressionRunnerSeparator from 'src/components/ExpressionRunnerSeparator'
+import EmojiSeparator from 'src/components/EmojiSeparator'
+import Emoji from 'src/components/Emoji'
+import CustomEmoji from 'src/components/CustomEmoji'
+import EmojiNumber from 'src/components/EmojiNumber'
+import H from 'src/components/H'
+import * as R from 'src/components/Runners'
+import { BasicRules, Unmatched } from 'src/contents/4.jp'
+import { ThreeRowRules, Beginner5Rules } from 'src/contents/5.jp'
 
 const DemoCardList = () => (
   <EpisodeCardList
@@ -19,6 +28,258 @@ const DemoCardList = () => (
             </P>
           </>
         )
+      },
+      {
+        type: 'sideNote',
+        t8d: true,
+        title: <>Part 1: Mathbox Basics</>,
+        content: (
+          <>
+            <EmojiSeparator
+              t8d
+              nodes={[
+                <CustomEmoji type="mathBox" />,
+                <CustomEmoji type="mathBox" />,
+                <CustomEmoji type="mathBox" />
+              ]}
+              description={<>Mathboxes</>}
+            />
+          </>
+        )
+      },
+      {
+        t8d: true,
+        title: (
+          <>
+            <H args={{ name: 'plusOneFeature' }} />
+          </>
+        ),
+        content: (
+          <>
+            <R.Mcug />
+            <R.Aovj />
+          </>
+        )
+      },
+      {
+        t8d: true,
+        type: 'sideNote',
+        title: <>Part 2: Lunchbox Basics</>,
+        content: (
+          <>
+            <EmojiSeparator
+              t8d
+              nodes={[<Emoji>🍱</Emoji>, <Emoji>🍱</Emoji>, <Emoji>🍱</Emoji>]}
+              description={<>Lunchboxes</>}
+            />
+          </>
+        )
+      },
+      {
+        t8d: true,
+        title: <>Lunchboxes with 2 Rows</>,
+        content: (
+          <>
+            <R.Wunw />
+            <R.Hluq />
+            <R.Jbam />
+            <R.Zuus />
+          </>
+        )
+      },
+      {
+        t8d: true,
+        title: <>弁当箱の法則</>,
+        type: 'summary',
+        content: (
+          <>
+            <BasicRules includeFuncUnbound />
+            <Hr />
+            <Unmatched />
+          </>
+        )
+      },
+      {
+        t8d: true,
+        title: <>Lunchbox with 3 Rows</>,
+        content: (
+          <>
+            <R.Beiz />
+            <R.Hdxc />
+            <R.Thkn />
+            <R.Cuwg />
+          </>
+        )
+      },
+      {
+        t8d: true,
+        type: 'summary',
+        title: <>3段の弁当箱の法則</>,
+        content: (
+          <>
+            <ThreeRowRules />
+            <Hr />
+            <Beginner5Rules />
+          </>
+        )
+      },
+      {
+        t8d: true,
+        type: 'sideNote',
+        title: <>Part 3: Converting Lunchboxes to Mathboxes</>,
+        content: (
+          <>
+            <EmojiSeparator
+              nodes={[
+                <Emoji>🍱</Emoji>,
+                <CustomEmoji type="singleArrow" />,
+                <CustomEmoji type="mathBox" />
+              ]}
+            />
+          </>
+        )
+      },
+      {
+        t8d: true,
+        title: <>Converting Lunchboxes to Mathboxes</>,
+        content: (
+          <>
+            <R.Jjjh />
+            <R.Mifg />
+            <R.Epoi />
+            <R.Vlob />
+          </>
+        )
+      },
+      {
+        t8d: true,
+        title: <>Rules for Converting to Mathboxes</>,
+        type: 'summary',
+        content: (
+          <>
+            <R.Eozk>
+              <H args={{ name: 'convertiblePatternCaption' }} />
+            </R.Eozk>
+            <R.Hehx>
+              <H args={{ name: 'whatTheNumberIsCaption' }} />
+            </R.Hehx>
+            <Hr />
+            <R.Wopl>
+              <H
+                args={{ name: 'canBeConvertedCaption', letter: 'e', number: 2 }}
+              />
+            </R.Wopl>
+            <ExpressionRunnerSeparator />
+            <R.Pmdm />
+            <Hr />
+            <R.Duuk>
+              <H
+                args={{ name: 'canBeConvertedCaption', letter: 'i', number: 4 }}
+              />
+            </R.Duuk>
+            <ExpressionRunnerSeparator />
+            <R.Kizi />
+            <Hr />
+            <R.Dwzy>
+              <H
+                args={{ name: 'canBeConvertedCaption', letter: 'a', number: 0 }}
+              />
+            </R.Dwzy>
+            <ExpressionRunnerSeparator />
+            <R.Jwah />
+          </>
+        )
+      },
+      {
+        t8d: true,
+        title: <>Part 4: Adding 1</>,
+        type: 'sideNote',
+        content: (
+          <>
+            <EmojiSeparator
+              nodes={[
+                <CustomEmoji type="blankNumber" />,
+                <Emoji>➕</Emoji>,
+                <EmojiNumber number={1} />
+              ]}
+            />
+          </>
+        )
+      },
+      {
+        t8d: true,
+        title: (
+          <>
+            Calculating <EmojiNumber number={1} /> <Emoji>➕</Emoji>{' '}
+            <EmojiNumber number={1} />
+          </>
+        ),
+        content: (
+          <>
+            <R.Rbup>
+              <H
+                args={{
+                  name: 'canBeConvertedCaption',
+                  letter: 'd',
+                  number: 1
+                }}
+              />
+            </R.Rbup>
+            <Hr />
+            <R.Rjzw></R.Rjzw>
+            <Hr />
+            <R.Rico>
+              <H
+                args={{ name: 'canBeConvertedCaption', number: 2, letter: 'b' }}
+              />
+            </R.Rico>
+          </>
+        )
+      },
+      {
+        t8d: true,
+        title: (
+          <>
+            Calculating <EmojiNumber number={2} /> <Emoji>➕</Emoji>{' '}
+            <EmojiNumber number={1} />
+          </>
+        ),
+        content: (
+          <>
+            <R.Spga>
+              <H
+                args={{
+                  name: 'canBeConvertedCaption',
+                  letter: 'f',
+                  number: 2
+                }}
+              />
+            </R.Spga>
+            <Hr />
+            <R.Nlbn />
+            <Hr />
+            <R.Nngz>
+              <H
+                args={{ name: 'canBeConvertedCaption', number: 3, letter: 'b' }}
+              />
+            </R.Nngz>
+          </>
+        )
+      },
+      {
+        t8d: true,
+        title: <>Mathboxes can be replicated by Lunchboxes</>,
+        content: (
+          <>
+            <R.Lizi></R.Lizi>
+            <ExpressionRunnerSeparator />
+            <R.Plde></R.Plde>
+            <Hr />
+            <R.Gnwm></R.Gnwm>
+            <ExpressionRunnerSeparator />
+            <R.Awwn></R.Awwn>
+          </>
+        )
       }
     ]}
   />
diff --git a/src/contents/demo.jp.tsx b/src/contents/demo.jp.tsx
index f5196f844..c71385d3a 100644
--- a/src/contents/demo.jp.tsx
+++ b/src/contents/demo.jp.tsx
@@ -123,7 +123,6 @@ const DemoCardList = () => (
                 <CustomEmoji type="singleArrow" />,
                 <CustomEmoji type="mathBox" />
               ]}
-              description={<>計算箱</>}
             />
           </>
         )
diff --git a/src/lib/titles.ts b/src/lib/titles.ts
index 1acda21bc..4f3068625 100644
--- a/src/lib/titles.ts
+++ b/src/lib/titles.ts
@@ -16,7 +16,7 @@ export const description = {
 
 export const episodeTitles = {
   en: {
-    1: 'Math Boxes',
+    1: 'Mathboxes',
     2: '?',
     3: '?',
     4: '?',

From 36b4ca807dd8c056b8ec3a6d2e918c15bdf763ac Mon Sep 17 00:00:00 2001
From: Shu Uesugi <shu@chibicode.com>
Date: Wed, 18 Sep 2019 20:25:32 -0700
Subject: [PATCH 11/15] :pencil:

---
 src/components/H.tsx | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/components/H.tsx b/src/components/H.tsx
index 3f97936ac..cdd851e40 100644
--- a/src/components/H.tsx
+++ b/src/components/H.tsx
@@ -1249,7 +1249,15 @@ const H = ({ args, highlightType, episodeNumberOverrides }: HProps) => {
   }
   if (args.name === 'canBeConvertedCaption') {
     if (locale === 'en') {
-      return <>?</>
+      return (
+        <>
+          There are <EmojiNumber number={args.number} />{' '}
+          <EmojiForLetter letter={args.letter} />
+          ’s labeled as <Emoji>🅰️</Emoji>
+          <br />
+          → Can be converted to <EmojiNumber number={args.number} />
+        </>
+      )
     } else {
       return (
         <>

From e2ce500a63023a357082c49a81cae844006f0c22 Mon Sep 17 00:00:00 2001
From: Shu Uesugi <shu@chibicode.com>
Date: Wed, 18 Sep 2019 21:16:28 -0700
Subject: [PATCH 12/15] Add more translations

---
 .../ExpressionRunnerExplanation.tsx           | 12 ++-
 src/components/H.tsx                          | 38 ++++++--
 src/components/VariableExpressionBox.tsx      | 87 +++++++++++++------
 3 files changed, 103 insertions(+), 34 deletions(-)

diff --git a/src/components/ExpressionRunnerExplanation.tsx b/src/components/ExpressionRunnerExplanation.tsx
index f43d58105..c36b126d3 100644
--- a/src/components/ExpressionRunnerExplanation.tsx
+++ b/src/components/ExpressionRunnerExplanation.tsx
@@ -65,14 +65,22 @@ const Explanation = ({
   switch (state) {
     case 'default': {
       if (locale === 'en') {
-        return <>…</>
+        return <>Next!</>
       } else {
         return <>次に進みます！</>
       }
     }
     case 'active': {
       if (locale === 'en') {
-        return <>…</>
+        return (
+          <>
+            Look at the pair of{' '}
+            <InlinePrioritiesLabel revert>
+              {activePriority}
+            </InlinePrioritiesLabel>
+            ’s
+          </>
+        )
       } else {
         return (
           <>
diff --git a/src/components/H.tsx b/src/components/H.tsx
index cdd851e40..4c3ace65e 100644
--- a/src/components/H.tsx
+++ b/src/components/H.tsx
@@ -1009,7 +1009,7 @@ const H = ({ args, highlightType, episodeNumberOverrides }: HProps) => {
   }
   if (args.name === 'AmultTop') {
     if (locale === 'en') {
-      return <>?</>
+      return <>Some</>
     } else {
       return (
         <>
@@ -1020,14 +1020,18 @@ const H = ({ args, highlightType, episodeNumberOverrides }: HProps) => {
   }
   if (args.name === 'AmultBottom') {
     if (locale === 'en') {
-      return <>?</>
+      return (
+        <>
+          <Emoji>🅰️</Emoji>’s
+        </>
+      )
     } else {
       return <>いくつか</>
     }
   }
   if (args.name === 'BsingleTop') {
     if (locale === 'en') {
-      return <>?</>
+      return <>One</>
     } else {
       return (
         <>
@@ -1038,7 +1042,11 @@ const H = ({ args, highlightType, episodeNumberOverrides }: HProps) => {
   }
   if (args.name === 'BsingleBottom') {
     if (locale === 'en') {
-      return <>?</>
+      return (
+        <>
+          <Emoji>🅱️</Emoji>
+        </>
+      )
     } else {
       return <>ひとつ</>
     }
@@ -1233,7 +1241,19 @@ const H = ({ args, highlightType, episodeNumberOverrides }: HProps) => {
   }
   if (args.name === 'convertiblePatternCaption') {
     if (locale === 'en') {
-      return <>?</>
+      return (
+        <>
+          Let the leftmost dish be <Emoji>🅰️</Emoji> and
+          <br />
+          the center dish be <Emoji>🅱️</Emoji>.
+          <br />
+          There needs to be one <Emoji>🅱️</Emoji>
+          <br />
+          on the top right and some <Emoji>🅰️</Emoji>’s
+          <br />
+          on the bottom right
+        </>
+      )
     } else {
       return (
         <>
@@ -1404,7 +1424,13 @@ const H = ({ args, highlightType, episodeNumberOverrides }: HProps) => {
   }
   if (args.name === 'whatTheNumberIsCaption') {
     if (locale === 'en') {
-      return <></>
+      return (
+        <>
+          The number of <Emoji>🅰️</Emoji>’s on the
+          <br />
+          bottom right is the number after conversion
+        </>
+      )
     } else {
       return (
         <>
diff --git a/src/components/VariableExpressionBox.tsx b/src/components/VariableExpressionBox.tsx
index b81c8a3d7..f98665acc 100644
--- a/src/components/VariableExpressionBox.tsx
+++ b/src/components/VariableExpressionBox.tsx
@@ -15,6 +15,7 @@ import { VariableExpression } from 'src/types/ExpressionTypes'
 import H from 'src/components/H'
 import { ExpressionRunnerContextProps } from 'src/types/ExpressionRunnerTypes'
 import CustomEmoji, { customEmojiToComponent } from 'src/components/CustomEmoji'
+import locale from 'src/lib/locale'
 
 interface VariableExpressionBoxProps {
   expression: VariableExpression
@@ -162,23 +163,40 @@ const VariableEmoji = ({ expression }: VariableExpressionBoxProps) => {
     return (
       <div>
         <span
-          css={css`
-            font-size: 0.6em;
-            font-weight: bold;
-            text-align: center;
-            display: block;
-          `}
+          css={[
+            css`
+              font-weight: bold;
+              text-align: center;
+              display: block;
+            `,
+            locale === 'en'
+              ? css`
+                  font-size: 0.45em;
+                  background: ${colors('deepPurple50')};
+                `
+              : css`
+                  font-size: 0.6em;
+                `
+          ]}
         >
           <H args={{ name: 'AmultTop' }} />
         </span>
         <span
-          css={css`
-            font-size: 0.45em;
-            font-weight: bold;
-            text-align: center;
-            background: ${colors('deepPurple50')};
-            display: block;
-          `}
+          css={[
+            css`
+              font-weight: bold;
+              text-align: center;
+              display: block;
+            `,
+            locale === 'en'
+              ? css`
+                  font-size: 0.6em;
+                `
+              : css`
+                  font-size: 0.45em;
+                  background: ${colors('deepPurple50')};
+                `
+          ]}
         >
           <H args={{ name: 'AmultBottom' }} />
         </span>
@@ -188,23 +206,40 @@ const VariableEmoji = ({ expression }: VariableExpressionBoxProps) => {
     return (
       <div>
         <span
-          css={css`
-            font-size: 0.6em;
-            font-weight: bold;
-            text-align: center;
-            display: block;
-          `}
+          css={[
+            css`
+              font-weight: bold;
+              text-align: center;
+              display: block;
+            `,
+            locale === 'en'
+              ? css`
+                  font-size: 0.45em;
+                  background: ${colors('deepPurple50')};
+                `
+              : css`
+                  font-size: 0.6em;
+                `
+          ]}
         >
           <H args={{ name: 'BsingleTop' }} />
         </span>
         <span
-          css={css`
-            font-size: 0.45em;
-            font-weight: bold;
-            background: ${colors('pink50')};
-            text-align: center;
-            display: block;
-          `}
+          css={[
+            css`
+              font-weight: bold;
+              text-align: center;
+              display: block;
+            `,
+            locale === 'en'
+              ? css`
+                  font-size: 0.6em;
+                `
+              : css`
+                  font-size: 0.45em;
+                  background: ${colors('deepPurple50')};
+                `
+          ]}
         >
           <H args={{ name: 'BsingleBottom' }} />
         </span>

From 63dfc22d3f1d6fac44e12ffb9b278b750d2971ae Mon Sep 17 00:00:00 2001
From: Shu Uesugi <shu@chibicode.com>
Date: Wed, 18 Sep 2019 22:06:05 -0700
Subject: [PATCH 13/15] Update basic rules

---
 src/components/H.tsx     |  2 +-
 src/contents/4.en.tsx    | 53 ++++++++++++++++++++--------------------
 src/contents/demo.en.tsx |  6 ++---
 3 files changed, 31 insertions(+), 30 deletions(-)

diff --git a/src/components/H.tsx b/src/components/H.tsx
index 4c3ace65e..4449f28c8 100644
--- a/src/components/H.tsx
+++ b/src/components/H.tsx
@@ -369,7 +369,7 @@ const H = ({ args, highlightType, episodeNumberOverrides }: HProps) => {
     if (locale === 'en') {
       return (
         <Strong highlightType={highlightType}>
-          {`“bento box${args.plural ? 'es' : ''}”`} <Emoji>🍱</Emoji>
+          {`“lunchbox${args.plural ? 'es' : ''}”`} <Emoji>🍱</Emoji>
         </Strong>
       )
     } else {
diff --git a/src/contents/4.en.tsx b/src/contents/4.en.tsx
index a8bf75dea..01cddeef1 100644
--- a/src/contents/4.en.tsx
+++ b/src/contents/4.en.tsx
@@ -18,8 +18,8 @@ export const BasicRules = ({
   includeFuncUnbound?: boolean
 }) => (
   <>
-    <P>
-      1. <InlineHeader>印をつける:</InlineHeader>{' '}
+    <P t8d>
+      1. <InlineHeader>Add labels:</InlineHeader>{' '}
       <BottomRightBadge inline bottomRightBadgeType="callArg" />{' '}
       <BottomRightBadge inline bottomRightBadgeType="funcArg" />{' '}
       {includeFuncUnbound && (
@@ -30,7 +30,7 @@ export const BasicRules = ({
       <BottomRightBadge inline bottomRightBadgeType="funcBound" />
     </P>
     <R.Zzxj>
-      <InlineHeader>印をつける:</InlineHeader>{' '}
+      <InlineHeader>Add labels:</InlineHeader>{' '}
       <BottomRightBadge inline bottomRightBadgeType="callArg" />{' '}
       <BottomRightBadge inline bottomRightBadgeType="funcArg" />{' '}
       {includeFuncUnbound && (
@@ -40,37 +40,37 @@ export const BasicRules = ({
       )}
       <BottomRightBadge inline bottomRightBadgeType="funcBound" />
     </R.Zzxj>
-    <P>
-      2. <InlineHeader>一致チェック:</InlineHeader>{' '}
+    <P t8d>
+      2. <InlineHeader>Find matches:</InlineHeader>{' '}
       <BottomRightBadge inline bottomRightBadgeType="funcArg" />{' '}
       <BottomRightBadge inline bottomRightBadgeType="funcBound" />{' '}
       <Emoji>✅</Emoji>
     </P>
     <R.Keck>
-      <InlineHeader>一致チェック:</InlineHeader>{' '}
+      <InlineHeader>Find matches:</InlineHeader>{' '}
       <BottomRightBadge inline bottomRightBadgeType="funcArg" />{' '}
       <BottomRightBadge inline bottomRightBadgeType="funcBound" />{' '}
       <Emoji>✅</Emoji>
     </R.Keck>
-    <P>
-      3. <InlineHeader>コピーする:</InlineHeader>{' '}
+    <P t8d>
+      3. <InlineHeader>Copy:</InlineHeader>{' '}
       <BottomRightBadge inline bottomRightBadgeType="callArg" />{' '}
       <Emoji>↘️</Emoji>{' '}
       <BottomRightBadge inline bottomRightBadgeType="funcBound" />
     </P>
     <R.Qoms>
-      <InlineHeader>コピーする:</InlineHeader>{' '}
+      <InlineHeader>Copy:</InlineHeader>{' '}
       <BottomRightBadge inline bottomRightBadgeType="callArg" />{' '}
       <Emoji>↘️</Emoji>{' '}
       <BottomRightBadge inline bottomRightBadgeType="funcBound" />
     </R.Qoms>
-    <P>
-      4. <InlineHeader>消す:</InlineHeader> <Emoji>💥</Emoji>{' '}
+    <P t8d>
+      4. <InlineHeader>Remove:</InlineHeader> <Emoji>💥</Emoji>{' '}
       <BottomRightBadge inline bottomRightBadgeType="callArg" />{' '}
       <BottomRightBadge inline bottomRightBadgeType="funcArg" />
     </P>
     <R.Mhgm>
-      <InlineHeader>消す:</InlineHeader> <Emoji>💥</Emoji>{' '}
+      <InlineHeader>Remove:</InlineHeader> <Emoji>💥</Emoji>{' '}
       <BottomRightBadge inline bottomRightBadgeType="callArg" />{' '}
       <BottomRightBadge inline bottomRightBadgeType="funcArg" />
     </R.Mhgm>
@@ -81,27 +81,28 @@ export const BasicRules = ({
 
 export const Unmatched = () => (
   <>
-    <P>
-      <BottomRightBadge inline bottomRightBadgeType="funcArg" /> と{' '}
-      <BottomRightBadge inline bottomRightBadgeType="funcBound" />{' '}
-      が一致しなかった場合、
+    <P t8d>
+      If none of <BottomRightBadge inline bottomRightBadgeType="funcArg" />
+      ’s and <BottomRightBadge inline bottomRightBadgeType="funcBound" />
+      ’s match,{' '}
       <Strong>
-        コピーはせずに、ただ{' '}
-        <BottomRightBadge inline bottomRightBadgeType="callArg" /> と{' '}
-        <BottomRightBadge inline bottomRightBadgeType="funcArg" /> を消す
+        don’t do the copy step and simply remove{' '}
+        <BottomRightBadge inline bottomRightBadgeType="callArg" />
+        ’s and <BottomRightBadge inline bottomRightBadgeType="funcArg" />
+        ’s
       </Strong>
-      。
+      .
     </P>
     <R.Jwzh>
-      <BottomRightBadge inline bottomRightBadgeType="funcArg" /> と{' '}
-      <BottomRightBadge inline bottomRightBadgeType="funcBound" />{' '}
-      が一致しなかった場合…
+      If none of <BottomRightBadge inline bottomRightBadgeType="funcArg" />
+      ’s and <BottomRightBadge inline bottomRightBadgeType="funcBound" />
+      ’s match…
     </R.Jwzh>
     <ExpressionRunnerSeparator />
     <R.Knhw>
-      コピーはせずに、ただ{' '}
-      <BottomRightBadge inline bottomRightBadgeType="callArg" /> と
-      <BottomRightBadge inline bottomRightBadgeType="funcArg" /> を消す
+      Simply remove <BottomRightBadge inline bottomRightBadgeType="callArg" />
+      ’s and <BottomRightBadge inline bottomRightBadgeType="funcArg" />
+      ’s
     </R.Knhw>
   </>
 )
diff --git a/src/contents/demo.en.tsx b/src/contents/demo.en.tsx
index 75e58760d..48664d53a 100644
--- a/src/contents/demo.en.tsx
+++ b/src/contents/demo.en.tsx
@@ -8,8 +8,8 @@ import CustomEmoji from 'src/components/CustomEmoji'
 import EmojiNumber from 'src/components/EmojiNumber'
 import H from 'src/components/H'
 import * as R from 'src/components/Runners'
-import { BasicRules, Unmatched } from 'src/contents/4.jp'
-import { ThreeRowRules, Beginner5Rules } from 'src/contents/5.jp'
+import { BasicRules, Unmatched } from 'src/contents/4.en'
+import { ThreeRowRules, Beginner5Rules } from 'src/contents/5.en'
 
 const DemoCardList = () => (
   <EpisodeCardList
@@ -89,7 +89,7 @@ const DemoCardList = () => (
       },
       {
         t8d: true,
-        title: <>弁当箱の法則</>,
+        title: <>Lunchbox Rules</>,
         type: 'summary',
         content: (
           <>

From f2b40e62e42648f9f32c19b891333859a68e31d7 Mon Sep 17 00:00:00 2001
From: Shu Uesugi <shu@chibicode.com>
Date: Wed, 18 Sep 2019 22:27:00 -0700
Subject: [PATCH 14/15] Done with demo page

---
 src/components/H.tsx     | 28 ++++++++++++++---
 src/contents/5.en.tsx    | 68 +++++++++++++++++++++-------------------
 src/contents/demo.en.tsx |  2 +-
 src/contents/demo.jp.tsx |  2 +-
 4 files changed, 61 insertions(+), 39 deletions(-)

diff --git a/src/components/H.tsx b/src/components/H.tsx
index 4449f28c8..08165d192 100644
--- a/src/components/H.tsx
+++ b/src/components/H.tsx
@@ -1210,7 +1210,20 @@ const H = ({ args, highlightType, episodeNumberOverrides }: HProps) => {
   }
   if (args.name === 'startWithTwoCaption') {
     if (locale === 'en') {
-      return <>?</>
+      return (
+        <>
+          If you can’t start with{' '}
+          <InlinePrioritiesLabel>1</InlinePrioritiesLabel>’s because
+          <br />
+          there’s only one item on the bottom row,
+          <br />
+          <Strong>
+            start with the pair of{' '}
+            <InlinePrioritiesLabel>2</InlinePrioritiesLabel>
+            ’s.
+          </Strong>
+        </>
+      )
     } else {
       return (
         <>
@@ -1226,7 +1239,14 @@ const H = ({ args, highlightType, episodeNumberOverrides }: HProps) => {
   }
   if (args.name === 'startWithLeftMostOneCaption') {
     if (locale === 'en') {
-      return <>?</>
+      return (
+        <>
+          If there are multiple pairs of{' '}
+          <InlinePrioritiesLabel>1</InlinePrioritiesLabel>’s,
+          <br />
+          <Strong>start with the leftmost pair</Strong>.
+        </>
+      )
     } else {
       return (
         <>
@@ -1243,9 +1263,9 @@ const H = ({ args, highlightType, episodeNumberOverrides }: HProps) => {
     if (locale === 'en') {
       return (
         <>
-          Let the leftmost dish be <Emoji>🅰️</Emoji> and
+          Let the leftmost item be <Emoji>🅰️</Emoji> and
           <br />
-          the center dish be <Emoji>🅱️</Emoji>.
+          the center item be <Emoji>🅱️</Emoji>.
           <br />
           There needs to be one <Emoji>🅱️</Emoji>
           <br />
diff --git a/src/contents/5.en.tsx b/src/contents/5.en.tsx
index f02d11084..33703a767 100644
--- a/src/contents/5.en.tsx
+++ b/src/contents/5.en.tsx
@@ -27,70 +27,72 @@ import NextLessonButton from 'src/components/NextLessonButton'
 
 export const ThreeRowRules = () => (
   <>
-    <P>
-      <InlineHeader>3段以上の弁当箱は、以下のように解きます。</InlineHeader>
+    <P t8d>
+      <InlineHeader>
+        Here’s how to solve a lunchbox puzzle with at least 3 rows.
+      </InlineHeader>
     </P>
-    <Ol>
+    <Ol t8d>
       <OlLi>
         <Em>
-          まず先に <InlinePrioritiesLabel>1</InlinePrioritiesLabel>{' '}
-          のペアからはじめる。
+          First, start with the pair of{' '}
+          <InlinePrioritiesLabel>1</InlinePrioritiesLabel>’s.
         </Em>
       </OlLi>
       <OlLi>
         <Em>
-          下段の真ん中にある料理には{' '}
-          <BottomRightBadge inline bottomRightBadgeType="funcUnbound" />{' '}
-          をつける。
-          <BottomRightBadge inline bottomRightBadgeType="funcUnbound" />{' '}
-          は、いったん無視して構わない。
+          Label the center item on the bottom row as{' '}
+          <BottomRightBadge inline bottomRightBadgeType="funcUnbound" />, and
+          you can ignore this for the rest of the iteration.
         </Em>
       </OlLi>
       <OlLi>
         <Em>
-          <InlinePrioritiesLabel>1</InlinePrioritiesLabel> のペアが終わると、
-          <InlinePrioritiesLabel>2</InlinePrioritiesLabel> が{' '}
-          <InlinePrioritiesLabel>1</InlinePrioritiesLabel>{' '}
-          になるので、また繰り返す。
+          After finishing the pair of{' '}
+          <InlinePrioritiesLabel>1</InlinePrioritiesLabel>’s,
+          <InlinePrioritiesLabel>2</InlinePrioritiesLabel> will become{' '}
+          <InlinePrioritiesLabel>1</InlinePrioritiesLabel>. Then, repeat.
         </Em>
       </OlLi>
     </Ol>
-    <R.Vdhd>3段の弁当箱</R.Vdhd>
+    <R.Vdhd>Lunchbox with 3 rows</R.Vdhd>
   </>
 )
 
 export const Beginner5Rules = () => (
   <>
-    <P>
-      <InlineHeader>細かい法則1:</InlineHeader>{' '}
-      <InlinePrioritiesLabel>1</InlinePrioritiesLabel>{' '}
-      のペアが左右ふたつ以上ある場合は、
-      <Strong>一番左のペアからはじめます。</Strong>
+    <P t8d>
+      <InlineHeader>Additional Rule 1:</InlineHeader> If there are multiple
+      pairs of <InlinePrioritiesLabel>1</InlinePrioritiesLabel>’s,{' '}
+      <Strong>start with the leftmost pair</Strong>.
     </P>
     <R.Hykj>
       <H args={{ name: 'startWithLeftMostOneCaption' }} />
     </R.Hykj>
-    <P>
-      <InlineHeader>補足:</InlineHeader>{' '}
+    <P t8d>
+      <InlineHeader>Note:</InlineHeader>{' '}
       <Em>
-        <InlinePrioritiesLabel>1</InlinePrioritiesLabel>{' '}
-        のペアが弁当箱の左端にない場合は、内側の{' '}
-        <InlinePrioritiesLabel>1</InlinePrioritiesLabel> のペアからはじめる。
+        If there’s no <InlinePrioritiesLabel>1</InlinePrioritiesLabel>’s on the
+        leftmost edge of a lunchbox, then start with the inner pair of{' '}
+        <InlinePrioritiesLabel>1</InlinePrioritiesLabel>’s.
       </Em>
     </P>
     <R.Myjz>
-      <InlinePrioritiesLabel>1</InlinePrioritiesLabel>{' '}
-      のペアが弁当箱の左端にない場合は、
+      If there’s no <InlinePrioritiesLabel>1</InlinePrioritiesLabel> on the
       <br />
-      内側の <InlinePrioritiesLabel>1</InlinePrioritiesLabel> のペアからはじめる
+      leftmost edge of a lunchbox, then start with
+      <br />
+      the inner pair of
+      <InlinePrioritiesLabel>1</InlinePrioritiesLabel>’s
     </R.Myjz>
     <Hr />
-    <P>
-      <InlineHeader>細かい法則2:</InlineHeader> 下段にひとつの料理しかなく、
-      <InlinePrioritiesLabel>1</InlinePrioritiesLabel>{' '}
-      のペアからはじめられない場合、
+    <P t8d>
+      <InlineHeader>Additional Rule 2:</InlineHeader> If you can’t start with{' '}
+      <InlinePrioritiesLabel>1</InlinePrioritiesLabel>’s because there’s only
+      one item on the bottom row,{' '}
       <Strong>
-        <InlinePrioritiesLabel>2</InlinePrioritiesLabel> のペアからはじめます。
+        start with the pair of <InlinePrioritiesLabel>2</InlinePrioritiesLabel>
+        ’s.
       </Strong>
     </P>
     <R.Zemy>
diff --git a/src/contents/demo.en.tsx b/src/contents/demo.en.tsx
index 48664d53a..e8c704fb5 100644
--- a/src/contents/demo.en.tsx
+++ b/src/contents/demo.en.tsx
@@ -114,7 +114,7 @@ const DemoCardList = () => (
       {
         t8d: true,
         type: 'summary',
-        title: <>3段の弁当箱の法則</>,
+        title: <>Rules for Lunchboxes with 3+ Rows</>,
         content: (
           <>
             <ThreeRowRules />
diff --git a/src/contents/demo.jp.tsx b/src/contents/demo.jp.tsx
index c71385d3a..aa6c68cc8 100644
--- a/src/contents/demo.jp.tsx
+++ b/src/contents/demo.jp.tsx
@@ -103,7 +103,7 @@ const DemoCardList = () => (
       },
       {
         type: 'summary',
-        title: <>3段の弁当箱の法則</>,
+        title: <>3段以上の弁当箱の法則</>,
         content: (
           <>
             <ThreeRowRules />

From fb9e19587b870f9bfa2e7193fdb1d2580009048c Mon Sep 17 00:00:00 2001
From: Shu Uesugi <shu@chibicode.com>
Date: Wed, 18 Sep 2019 22:36:41 -0700
Subject: [PATCH 15/15] Remove unused strings

---
 src/components/H.tsx                     | 9 ---------
 src/components/VariableExpressionBox.tsx | 4 ++--
 2 files changed, 2 insertions(+), 11 deletions(-)

diff --git a/src/components/H.tsx b/src/components/H.tsx
index 08165d192..3b0ae8f87 100644
--- a/src/components/H.tsx
+++ b/src/components/H.tsx
@@ -154,8 +154,6 @@ interface HProps {
     | { name: 'testimonialsContent' }
     | { name: 'goToOtherPage' }
     | { name: 'demoTitle' }
-    | { name: 'demoFirstCardTitle' }
-    | { name: 'demoFirstCardContent' }
     | { name: 'whatTheNumberIsCaption' }
 }
 
@@ -1435,13 +1433,6 @@ const H = ({ args, highlightType, episodeNumberOverrides }: HProps) => {
       return <>デモページ</>
     }
   }
-  if (args.name === 'demoFirstCardTitle') {
-    if (locale === 'en') {
-      return <>This is a demo page</>
-    } else {
-      return <>これはデモページです</>
-    }
-  }
   if (args.name === 'whatTheNumberIsCaption') {
     if (locale === 'en') {
       return (
diff --git a/src/components/VariableExpressionBox.tsx b/src/components/VariableExpressionBox.tsx
index f98665acc..607d426e1 100644
--- a/src/components/VariableExpressionBox.tsx
+++ b/src/components/VariableExpressionBox.tsx
@@ -215,7 +215,7 @@ const VariableEmoji = ({ expression }: VariableExpressionBoxProps) => {
             locale === 'en'
               ? css`
                   font-size: 0.45em;
-                  background: ${colors('deepPurple50')};
+                  background: ${colors('pink50')};
                 `
               : css`
                   font-size: 0.6em;
@@ -237,7 +237,7 @@ const VariableEmoji = ({ expression }: VariableExpressionBoxProps) => {
                 `
               : css`
                   font-size: 0.45em;
-                  background: ${colors('deepPurple50')};
+                  background: ${colors('pink50')};
                 `
           ]}
         >