Add list and bracket indication in depth diagram

1 files changed, 34 insertions, 22 deletions

diff --git a/docs/doc/depth.html b/docs/doc/depth.html
index 02af36ad..2332c674 100644
--- a/docs/doc/depth.html
+++ b/docs/doc/depth.html
@@ -5,48 +5,60 @@
 </head>
 <div class="nav"><a href="https://github.com/mlochbaum/BQN">BQN</a> / <a href="../index.html">main</a> / <a href="index.html">doc</a></div>
 <h1 id="depth">Depth</h1>
-<svg viewBox='-278.4 -48 556.8 204'>
+<svg viewBox='-278.4 -45.6 556.8 193.8'>
   <g font-family='BQN,monospace' font-size='16px' text-anchor='middle' fill='currentColor' stroke-width='0' stroke='currentColor' stroke-linecap='round'>
-    <rect class='code' stroke-width='1.5' rx='12' x='-192' y='-32' width='384' height='172'/>
+    <rect class='code' stroke-width='1.5' rx='12' x='-196.8' y='-30.4' width='393.6' height='163.4'/>
+    <text font-size='18px' text-anchor='start' opacity='0.9' x='-177.6' y='-26.6'>List depth</text>
     <text dy='-0.2em' class='Number'>3</text>
-    <line class='lilac' stroke-width='2' x2='-72' y2='22'/>
-    <line class='lilac' stroke-width='2' x2='48' y2='22'/>
-    <line class='lilac' stroke-width='2' x2='120' y2='22'/>
-    <g transform='translate(-72 40)'>
+    <path class='bluegreen' stroke-width='2' style='fill:none' opacity='0.4' d='M-180 15.2l-5 13l5 13M180 15.2l5 13l-5 13'/>
+    <line class='lilac' stroke-width='2' x2='-72' y2='20'/>
+    <line class='lilac' stroke-width='2' x2='48' y2='20'/>
+    <line class='lilac' stroke-width='2' x2='120' y2='20'/>
+    <g transform='translate(-72 38)'>
       <text dy='-0.2em' class='Number'>2</text>
-      <line class='lilac' stroke-width='2' x2='-72' y2='22'/>
-      <line class='lilac' stroke-width='2' x2='24' y2='22'/>
-      <g transform='translate(-72 40)'>
+      <path class='bluegreen' stroke-width='2' style='fill:none' opacity='0.4' d='M-93.6 15.2l-5 13l5 13M93.6 15.2l5 13l-5 13'/>
+      <line class='lilac' stroke-width='2' x2='-72' y2='20'/>
+      <line class='lilac' stroke-width='2' x2='24' y2='20'/>
+      <g transform='translate(-72 38)'>
         <text dy='-0.2em' class='Number'>0</text>
+        <path class='bluegreen' stroke-width='2' style='fill:none' opacity='0.4' d='M-5.6 4h11.2'/>
       </g>
-      <g transform='translate(24 40)'>
+      <g transform='translate(24 38)'>
         <text dy='-0.2em' class='Number'>1</text>
-        <line class='lilac' stroke-width='2' x2='-48' y2='22'/>
-        <line class='lilac' stroke-width='2' x2='0' y2='22'/>
-        <line class='lilac' stroke-width='2' x2='48' y2='22'/>
-        <g transform='translate(-48 40)'>
+        <path class='bluegreen' stroke-width='2' style='fill:none' opacity='0.4' d='M-64.8 15.2l-5 13l5 13M64.8 15.2l5 13l-5 13'/>
+        <line class='lilac' stroke-width='2' x2='-48' y2='20'/>
+        <line class='lilac' stroke-width='2' x2='0' y2='20'/>
+        <line class='lilac' stroke-width='2' x2='48' y2='20'/>
+        <g transform='translate(-48 38)'>
           <text dy='-0.2em' class='Number'>0</text>
+          <path class='bluegreen' stroke-width='2' style='fill:none' opacity='0.4' d='M-5.6 4h11.2'/>
         </g>
-        <g transform='translate(0 40)'>
+        <g transform='translate(0 38)'>
           <text dy='-0.2em' class='Number'>0</text>
+          <path class='bluegreen' stroke-width='2' style='fill:none' opacity='0.4' d='M-5.6 4h11.2'/>
         </g>
-        <g transform='translate(48 40)'>
+        <g transform='translate(48 38)'>
           <text dy='-0.2em' class='Number'>0</text>
+          <path class='bluegreen' stroke-width='2' style='fill:none' opacity='0.4' d='M-5.6 4h11.2'/>
         </g>
       </g>
     </g>
-    <g transform='translate(48 40)'>
+    <g transform='translate(48 38)'>
       <text dy='-0.2em' class='Number'>0</text>
+      <path class='bluegreen' stroke-width='2' style='fill:none' opacity='0.4' d='M-5.6 4h11.2'/>
     </g>
-    <g transform='translate(120 40)'>
+    <g transform='translate(120 38)'>
       <text dy='-0.2em' class='Number'>1</text>
-      <line class='lilac' stroke-width='2' x2='-24' y2='22'/>
-      <line class='lilac' stroke-width='2' x2='24' y2='22'/>
-      <g transform='translate(-24 40)'>
+      <path class='bluegreen' stroke-width='2' style='fill:none' opacity='0.4' d='M-36 15.2l-5 13l5 13M36 15.2l5 13l-5 13'/>
+      <line class='lilac' stroke-width='2' x2='-24' y2='20'/>
+      <line class='lilac' stroke-width='2' x2='24' y2='20'/>
+      <g transform='translate(-24 38)'>
         <text dy='-0.2em' class='Number'>0</text>
+        <path class='bluegreen' stroke-width='2' style='fill:none' opacity='0.4' d='M-5.6 4h11.2'/>
       </g>
-      <g transform='translate(24 40)'>
+      <g transform='translate(24 38)'>
         <text dy='-0.2em' class='Number'>0</text>
+        <path class='bluegreen' stroke-width='2' style='fill:none' opacity='0.4' d='M-5.6 4h11.2'/>
       </g>
     </g>
   </g>