/************************************************************
 pikchr...
 DOM structure:
  <DIV.pikchr-wrapper>
    <DIV.pikchr-svg>
      <SVG.pikchr>...</SVG>
    </DIV.pikchr-svg>
    <DIV.pikchr-src>
     <PRE>pikchr source code</PRE>
     <SPAN class='hidden'><A>link to open pikchr in /pikchrshow</A></SPAN>
     <!-- ^^^ is unhidden and activated by JS code -->
    </DIV.pikchr-src>
  </DIV.pikchr-wrapper>

************************************************************/
div.pikchr-wrapper {/*outer wrapper elem for a pikchr construct*/}
div.pikchr-svg {/*wrapper for SVG.pikchr element*/}
svg.pikchr {/*pikchr SVG*/
  width: 100%/*necessary for SOME SVGs for Chrome!*/;
}

div.pikchr-src {
  /*Wrapper for source code view of a pikchr (see fossil.pikchr.js)*/
  display: flex;
  flex-direction: column;
}
div.pikchr-src > pre {
  /*Source code for a pikchr*/
  box-sizing: border-box;
  text-align: left;
}
div.pikchr-src > span {
  /*Wrapper for a link to open a pikchr in /pikchrshow*/
  margin-top: 0.8em;
  font-size: 80%;
}
/* The .source-inline class tells the .source class that the
   source view, when enabled, should be "inline" (same position
   as the graphic), else the sources are shifted to the left as
   if they were "plain text". */
div.pikchr-wrapper.center:not(.source),
div.pikchr-wrapper.center.source.source-inline{
  text-align: center;
  /* Reminder for The Future: this impl also works:

      display: grid; place-items: center;

     and does not require setting display:inline-block on the relevant
     child items, but caniuse.com/css-grid suggests that some
     still-seemingly-legitimate browsers don't support grid mode. */
}
div.pikchr-wrapper.center > div.pikchr-svg {
  width: 100%/*necessary for Chrome!*/;
}
div.pikchr-wrapper.center:not(.source) > div.pikchr-src,
div.pikchr-wrapper.center:not(.source) > div.pikchr-svg,
/* ^^^ Centered non-source-view elements */
div.pikchr-wrapper.center.source.source-inline div.pikchr-src,
div.pikchr-wrapper.center.source.source-inline > div.pikchr-svg
/* ^^^ Centered inline-source-view elements */{
  display:inline-block/*allows parent text-align to do the alignment*/;
  /* ^^^^ Browser incompatibility: inline-block causes the centered
     pikchr to shrink to the point of illegiblity in Chrome. The
     closest match on Chrome seems to be using 'unset', which centers
     by virtue of stretching it to the width of the window. Similarly,

div.pikchr-wrapper.float-right.source.source-inline{
  float: right;
  padding: 4em;
}

/* For pikchr-wrapper.source mode, toggle pre.pikchr-src and
   svg.pikchr visibility... */
div.pikchr-wrapper.source > div.pikchr-src {
  /* Source code  ^^^^^^^ is visible, else it is hidden */
}
div.pikchr-wrapper:not(.source) > div.pikchr-src {
  /* Hide sources when image is being shown. */
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
  display: none !important;
}
div.pikchr-wrapper.source > div.pikchr-svg {

    };
    const renderCurrentText = function(){
      const text = getCurrentText();
      if(text) PS.render(text);
    };
    const setCurrentText = function(txt){
      taInput.value = txt;
      renderCurrentText();
    };
    PS.e.btnRender.addEventListener('click',function(ev){
      ev.preventDefault();
      renderCurrentText();
    },false);

    /** To be called immediately before work is sent to the

      const btnToggle = E(fs,'legend > .fieldset-toggle'),
            content = EAll(fs,':scope > div');
      btnToggle.addEventListener('click', function(){
        fs.classList.toggle('collapsed');
        content.forEach((d)=>d.classList.toggle('hidden'));
      }, false);
    });

    if(window.sessionStorage){
      /* If sessionStorage['pikchr-xfer'] exists and the "fromSession"
         URL argument was passed to this page, load the pikchr source
         from the session. This is used by the "open in pikchrshow"
         link in the forum. */
      const src = window.sessionStorage.getItem('pikchr-xfer');
      if( src && (new URL(self.location.href).searchParams).has('fromSession') ){
        taInput.value =  src;
        window.sessionStorage.removeItem('pikchr-xfer');
      }
    }

    PS.e.btnRender.click();

    /** Debounce handler for auto-rendering while typing. */
    const debounceAutoRender = F.debounce(function f(){
      if(!PS._isDirty) return;
      const text = getCurrentText();
      if(f._ === text){
        PS._isDirty = false;
        return;

      "Charlie" above aligned
    line from 4th box.sw+(0.2,0) up until even with 4th box.n \
       "Darlene" above aligned

    # fill in content for the Alice lane
    right
A1: circle rad 0.1in at end of first line + (0.2,-0.2) \
       fill white thickness 1.5px "1"
    arrow right 50%
    circle same "2"
    arrow right until even with first box.e - (0.65,0.0)
    ellipse "future" fit fill white height 0.2 width 0.5 thickness 1.5px
A3: circle same at A1+(0.8,-0.3) "3" fill 0xc0c0c0
    arrow from A1 to last circle chop "fork!" below aligned

     already dealt with.

     This code expects the following structure around the SVGs, and
     will not process any which don't match this:

     <DIV.pikchr-wrapper>
       <DIV.pikchr-svg><SVG.pikchr></SVG></DIV>
       <DIV.pikchr-src>
         <PRE>pikchr source code</PRE>
         <SPAN class='hidden'><A>link to open pikchr in /pikchrshow</A></SPAN>
       </DIV>
     </DIV>
  */
  P.addSrcView = function f(svg){
    if(!f.hasOwnProperty('parentClick')){
      f.parentClick = function(ev){
        if(ev.altKey || ev.metaKey || ev.ctrlKey
           /* Every combination of special key (alt, shift, ctrl,
              meta) is handled differently everywhere. Shift is used
              by the browser, Ctrl doesn't work on an iMac, and Alt is
              intercepted by most Linux window managers to control
              window movement! So...  we just listen for *any* of them
              (except Shift) and the user will need to find one which
              works on on their environment. */
           || this.classList.contains('toggle')){
          this.classList.toggle('source');
          ev.stopPropagation();
          ev.preventDefault();
        }
      };
      /**
         Event handler for the "open in pikchrshow" links: store the
         source code for the link's pikchr in
         window.sessionStorage['pikchr-xfer'] then open
         /pikchrshow?fromSession to trigger loading of that pikchr.
      */
      f.clickPikchrShow = function(ev){
        const pId = this.dataset['pikchrid'];
        if(!pId) return;
        const ePikchr = this.parentNode.parentNode.querySelector('#'+pId);
        if(!ePikchr) return;
        window.sessionStorage.setItem('pikchr-xfer', ePikchr.innerText);
        ev.stopPropagation() /* keep pikchr source view from toggling */;
      };
    };
    if(!svg) svg = 'svg.pikchr';
    if('string' === typeof svg){
      document.querySelectorAll(svg).forEach((e)=>f.call(this, e));
      return this;
    }else if(svg.forEach){
      svg.forEach((e)=>f.call(this, e));
      return this;
    }
    if(svg.dataset.pikchrProcessed){
      return this;
    }
    svg.dataset.pikchrProcessed = 1;
    const parent = svg.parentNode.parentNode /* outermost div.pikchr-wrapper */;
    const srcView = parent ? svg.parentNode.nextElementSibling : undefined;
    if(!srcView || !srcView.classList.contains('pikchr-src')){
      /* Without this element, there's nothing for us to do here. */
      return this;
    }
    parent.addEventListener('click', f.parentClick, false);
    const eSpan = srcView.querySelector('span');
    if(window.sessionStorage && eSpan){
      const openLink = eSpan.querySelector('a');
      if( openLink ){
        D.removeClass(eSpan, 'hidden');
        openLink.addEventListener('click', f.clickPikchrShow, false);
      }
    }
    return this;
  };
})(window.fossil);

                       zClassSource/*safe-for-%s*/, w);
        }
        blob_append(pOut, zOut, -1);
        if(PIKCHR_PROCESS_DIV & pikFlags){
          blob_append(pOut, "</div>\n", 7);
        }
        if(PIKCHR_PROCESS_SRC & pikFlags){
          static int counter = 0;
          ++counter;
          blob_appendf(pOut, "<div class='pikchr-src'>"
                       "<pre id='pikchr-src-%d'>%h</pre>"
                       "<span class='hidden'>"
                       "[<a href='%R/pikchrshow?fromSession' "
                       "class='pikchr-src-pikchrshow' target='_new-%d' "
                       "data-pikchrid='pikchr-src-%d'"
                       ">&rarr; /pikchrshow</a>]</span>"
                       "</div>\n",
                       counter, blob_str(&bIn), counter, counter);
        }
        if(PIKCHR_PROCESS_DIV & pikFlags){
          blob_append(pOut, "</div>\n", 7);
        }
      }else{
        isErr = 2;
        if(PIKCHR_PROCESS_ERR_PRE & pikFlags){