Add list and bracket indication in depth diagram

2 files changed, 49 insertions, 27 deletions

diff --git a/doc/depth.md b/doc/depth.md
index cc079ad6..df05c7c6 100644
--- a/doc/depth.md
+++ b/doc/depth.md
@@ -3,13 +3,21 @@
 # Depth
 
 <!--GEN
-d ← 48‿40
+d ← 48‿38
 a ← ⟨⟨@,⟨@,@,@⟩⟩,@,⟨@,@⟩⟩
 
 g ← "g"At"font-family=BQN,monospace|font-size=16px|text-anchor=middle|fill=currentColor|stroke-width=0|stroke=currentColor|stroke-linecap=round"
 rc ← At "class=code|stroke-width=1.5|rx=12"
 lc ← "line"At"class=lilac|stroke-width=2"
 tc ← "text"At"dy=-0.2em|class=Number"
+bc ← "path"At"class=bluegreen|stroke-width=2|style=fill:none|opacity=0.4"
+dc ← "text"At"font-size=18px|text-anchor=start|opacity=0.9"
+
+Path ← bc Elt "d"≍○<⊢
+Brak ← {
+  P ← ∾"M l l "∾¨ ·FmtNum∘⥊ ∾
+  Path (d×⟨0.6×𝕩-0.75,0.4⟩) (-⌾⊑⊸P ∾ P⟜⌽) -⌾⊑⊸≍5‿13
+}
 
 TN←tc Enc FmtNum
 TL←lc Elt"x2"‿"y2"≍˘·FmtNum 0‿18-˜d×≍⟜1
@@ -19,14 +27,16 @@ Tree←{
   d←1+0⌈´ds
   ww←1⌈+´ws
   p←2÷˜(-ww)+`»⊸+ws
-  ⟨d,ww,⟨TN d⟩∾(TL¨p)∾∾p≍⟜1⊸Gtr¨e⟩
+  ⟨d,ww,⟨TN d,Brak ww⟩∾(TL¨p)∾∾p≍⟜1⊸Gtr¨e⟩
 }
-dp‿wd‿tr ← {@⊸≢◶⟨0‿1‿⟨TN 0⟩, Tree𝕊¨⟩𝕩} a
+n0 ← 0‿1‿⟨TN 0, Path"M h"(∾∾¨)⟜FmtNum (-∾4∾+˜)5.6⟩
+dp‿wd‿tr ← {@⊸≢◶⟨n0, Tree𝕊¨⟩𝕩} a
 
-dim ← ⟨1+wd,1.3+dp⟩ ⋄ sh ← ⟨-2÷˜⊑dim,¯0.8⟩
+dim ← ⟨1.2+wd,1.3+dp⟩ ⋄ sh ← ⟨-2÷˜⊑dim,¯0.8⟩
 
-((∾˜d)×((-∾+˜)1.8‿0.4)+sh∾dim) SVG g Enc ⟨
+((∾˜d)×((-∾+˜)1.7‿0.4)+sh∾dim) SVG g Enc ⟨
   "rect" Elt rc∾(Pos d×sh) ∾ "width"‿"height"≍˘FmtNum d×dim
+  (dc Attr Pos d×sh+0.4‿0.1) Enc "List depth"
   tr
 ⟩
 -->
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>