Better abbreviation for 14

scripts/lib/initialExpressionContainers.ts

@@ -1561,7 +1561,7 @@ export const reak = initializeExpressionContainer({
   },
   falseCase: [
     { shorthandFunc: 'add' },
-    ['bentoBox', [{ shorthandFunc: 'pred' }, { shorthandNumber: 3 }]]
+    ['ignoreForNow', [{ shorthandFunc: 'pred' }, { shorthandNumber: 3 }]]
   ]
 })
 
@@ -1576,7 +1576,7 @@ export const edye = initializeExpressionContainer({
   },
   falseCase: [
     { shorthandFunc: 'add' },
-    ['bentoBox', [{ shorthandFunc: 'pred' }, { shorthandNumber: 3 }]]
+    ['ignoreForNow', [{ shorthandFunc: 'pred' }, { shorthandNumber: 3 }]]
   ]
 })
 
@@ -1593,7 +1593,7 @@ export const nrff = initializeExpressionContainer([
     falseCase: [
       { shorthandFunc: 'add' },
       [
-        'bentoBox',
+        'ignoreForNow',
         [
           { shorthandFunc: 'pred' },
           [{ shorthandFunc: 'pred' }, { shorthandNumber: 3 }]
@@ -1617,7 +1617,7 @@ export const twpb = initializeExpressionContainer([
     falseCase: [
       { shorthandFunc: 'add' },
       [
-        'bentoBox',
+        'ignoreForNow',
         [
           { shorthandFunc: 'pred', initialHighlight: true },
           [{ shorthandFunc: 'pred' }, { shorthandNumber: 3 }]
@@ -1642,7 +1642,7 @@ export const tsjd = initializeExpressionContainer([
       falseCase: [
         { shorthandFunc: 'add' },
         [
-          'bentoBox',
+          'ignoreForNow',
           [
             { shorthandFunc: 'pred' },
             [
@@ -1670,7 +1670,7 @@ export const qojl = initializeExpressionContainer([
     falseCase: [
       { shorthandFunc: 'add' },
       [
-        'bentoBox',
+        'ignoreForNow',
         [
           { shorthandFunc: 'pred' },
           [{ shorthandFunc: 'pred' }, { shorthandNumber: 3 }]
@@ -1696,7 +1696,7 @@ export const zxhp = initializeExpressionContainer([
       falseCase: [
         { shorthandFunc: 'add' },
         [
-          'bentoBox',
+          'ignoreForNow',
           [
             { shorthandFunc: 'pred', initialHighlight: true },
             [
@@ -1727,7 +1727,7 @@ export const ihdu = initializeExpressionContainer([
         falseCase: [
           { shorthandFunc: 'add' },
           [
-            'bentoBox',
+            'ignoreForNow',
             [
               { shorthandFunc: 'pred' },
               [
@@ -1763,7 +1763,7 @@ export const npmi = initializeExpressionContainer([
         falseCase: [
           { shorthandFunc: 'add' },
           [
-            'bentoBox',
+            'ignoreForNow',
             [
               { shorthandFunc: 'pred', initialHighlight: true },
               [
@@ -1797,7 +1797,7 @@ export const znga = initializeExpressionContainer([
       falseCase: [
         { shorthandFunc: 'add' },
         [
-          'bentoBox',
+          'ignoreForNow',
           [
             { shorthandFunc: 'pred' },
             [

scripts/lib/runnerConfigs.ts

@@ -2094,7 +2094,7 @@ export const yyfi: ExpressionRunnerShorthandConfig = {
   skipActive: true,
   initialExpressionContainer: initialExpressionContainers.reak,
   showPriorities: true,
-  highlightOverrides: { bentoBox: 'highlighted' }
+  highlightOverrides: { ignoreForNow: 'highlighted' }
 }
 
 export const amjx: ExpressionRunnerShorthandConfig = {
@@ -2137,7 +2137,7 @@ export const ngxc: ExpressionRunnerShorthandConfig = {
   showPriorities: true,
   initialState: 'default',
   nextIterations: 1,
-  highlightOverrides: { bentoBox: 'highlighted' },
+  highlightOverrides: { ignoreForNow: 'highlighted' },
   explanationsVisibility: 'hidden'
 }
 
@@ -2176,7 +2176,7 @@ export const fkat: ExpressionRunnerShorthandConfig = {
   skipActive: true,
   initialExpressionContainer: initialExpressionContainers.nrff,
   showPriorities: true,
-  highlightOverrides: { bentoBox: 'highlighted' },
+  highlightOverrides: { ignoreForNow: 'highlighted' },
   explanationsVisibility: 'hidden'
 }
 
@@ -2215,7 +2215,7 @@ export const cyyp: ExpressionRunnerShorthandConfig = {
   initialExpressionContainer: initialExpressionContainers.tsjd,
   showPriorities: true,
   explanationsVisibility: 'hidden',
-  highlightOverrides: { bentoBox: 'highlighted' }
+  highlightOverrides: { ignoreForNow: 'highlighted' }
 }
 
 export const kosw: ExpressionRunnerShorthandConfig = {
@@ -2261,7 +2261,7 @@ export const toem: ExpressionRunnerShorthandConfig = {
   initialExpressionContainer: initialExpressionContainers.ihdu,
   showPriorities: true,
   explanationsVisibility: 'hidden',
-  highlightOverrides: { bentoBox: 'highlighted' }
+  highlightOverrides: { ignoreForNow: 'highlighted' }
 }
 
 export const kdgv: ExpressionRunnerShorthandConfig = {

src/components/ExpressionRunnerPrecomputed.tsx

@@ -24,6 +24,10 @@ import functionDepthsToContainerSize from 'src/lib/functionDepthsToContainerSize
 import CrossSvg from 'src/components/CrossSvg'
 import { LinkButton } from 'src/components/ContentTags/LinkButton'
 import TwoColContext from 'src/components/TwoColContext'
+import {
+  p,
+  variableExpressionBoxFontSize
+} from 'src/components/VariableExpressionBox'
 
 export interface ExpressionRunnerPrecomputedProps {
   expressionContainers: readonly SteppedExpressionContainer[]
@@ -168,7 +172,9 @@ const ExpressionRunnerPrecomputed = ({
     expressionContainers[currentIndex].numLeafNodes
   )
 
-  const { maxVariableSize } = useContext(TwoColContext)
+  const { maxVariableSize, forceVariableSize, leftVerticalIndent } = useContext(
+    TwoColContext
+  )
 
   if (maxVariableSize) {
     if (maxVariableSize === 'md' && variableSize === 'lg') {
@@ -181,6 +187,10 @@ const ExpressionRunnerPrecomputed = ({
     }
   }
 
+  if (forceVariableSize) {
+    variableSize = forceVariableSize
+  }
+
   return (
     <ExpressionRunnerContext.Provider
       value={{
@@ -249,6 +259,23 @@ const ExpressionRunnerPrecomputed = ({
               max-width: 100%;
             `}
           >
+            {leftVerticalIndent && (
+              <div
+                css={css`
+                  line-height: ${lineHeights(1.3, { ignoreLocale: true })};
+                  padding-top: ${p(variableSize)};
+                  padding-bottom: ${p(variableSize)};
+                  font-size: ${variableExpressionBoxFontSize(variableSize)};
+                `}
+              >
+                <div
+                  css={css`
+                    padding-top: 1.25em;
+                    border-top: 1px solid transparent;
+                  `}
+                ></div>
+              </div>
+            )}
             <div
               css={[
                 css`

src/components/H.tsx

@@ -164,6 +164,7 @@ interface HProps {
     | { name: 'demoTitle' }
     | { name: 'whatTheNumberIsCaption' }
     | { name: 'runAndShowAllSteps' }
+    | { name: 'ignoreForNow' }
 }
 
 const H = ({ args, highlightType, episodeNumberOverrides }: HProps) => {
@@ -1653,6 +1654,25 @@ const H = ({ args, highlightType, episodeNumberOverrides }: HProps) => {
       )
     }
   }
+  if (args.name === 'ignoreForNow') {
+    if (locale === 'en') {
+      return (
+        <>
+          Ignore
+          <br />
+          for Now
+        </>
+      )
+    } else {
+      return (
+        <>
+          一時的に
+          <br />
+          省略
+        </>
+      )
+    }
+  }
   throw new Error()
 }
 

src/components/Runners/index.ts

@@ -234,7 +234,6 @@ export { default as Fsgq } from 'src/components/Runners/Fsgq'
 export { default as Gvxz } from 'src/components/Runners/Gvxz'
 export { default as Xqjd } from 'src/components/Runners/Xqjd'
 export { default as Cldb } from 'src/components/Runners/Cldb'
-export { default as Dqdv } from 'src/components/Runners/Dqdv'
 export { default as Ylav } from 'src/components/Runners/Ylav'
 export { default as Sldg } from 'src/components/Runners/Sldg'
 export { default as Dtle } from 'src/components/Runners/Dtle'
@@ -364,3 +363,4 @@ export { default as Txxw } from 'src/components/Runners/Txxw'
 export { default as Eijx } from 'src/components/Runners/Eijx'
 export { default as Kmgw } from 'src/components/Runners/Kmgw'
 export { default as Xbki } from 'src/components/Runners/Xbki'
+export { default as Dqdv } from 'src/components/Runners/Dqdv'

src/components/TwoColContext.tsx

@@ -2,6 +2,8 @@ import React from 'react'
 
 export interface TwoColContextProps {
   maxVariableSize?: 'sm' | 'md'
+  forceVariableSize?: 'xs' | 'sm' | 'md'
+  leftVerticalIndent?: true
 }
 
 export const twoColContext: TwoColContextProps = {}

src/components/TwoColGrid.tsx

@@ -9,17 +9,22 @@ const TwoColGrid = ({
   right,
   noTopNegativeMargin,
   noBottomNegativeMargin,
-  maxVariableSize
+  maxVariableSize,
+  forceVariableSize,
+  leftVerticalIndent
 }: {
   left: React.ReactNode
   right: React.ReactNode
   noTopNegativeMargin?: boolean
   noBottomNegativeMargin?: boolean
   maxVariableSize: TwoColContextProps['maxVariableSize']
+  forceVariableSize?: TwoColContextProps['forceVariableSize']
+  leftVerticalIndent?: TwoColContextProps['leftVerticalIndent']
 }) => (
   <TwoColContext.Provider
     value={{
-      maxVariableSize
+      maxVariableSize,
+      forceVariableSize
     }}
   >
     <Flex
@@ -44,7 +49,15 @@ const TwoColGrid = ({
           flex: 1;
         `}
       >
-        {left}
+        <TwoColContext.Provider
+          value={{
+            maxVariableSize,
+            forceVariableSize,
+            leftVerticalIndent
+          }}
+        >
+          {left}
+        </TwoColContext.Provider>
       </div>
       <div
         css={css`

src/components/VariableExpressionBox.tsx

@@ -262,6 +262,24 @@ const VariableEmoji = ({ expression }: VariableExpressionBoxProps) => {
         </span>
       </div>
     )
+  } else if (expression.name === 'ignoreForNow') {
+    return (
+      <div>
+        <span
+          css={[
+            css`
+              font-weight: bold;
+              text-align: center;
+              display: block;
+              font-size: 0.55em;
+              padding: 0.2em 0;
+            `
+          ]}
+        >
+          <H args={{ name: 'ignoreForNow' }} />
+        </span>
+      </div>
+    )
   } else {
     return (
       <span