cameleer-server/.superpowers/brainstorm/10188-1774613058/component-hierarchy.html

<h2>ProcessDiagram Component Hierarchy</h2>
<p class="subtitle">How the SVG rendering is structured — from data fetch to pixels</p>

<div class="section">
  <div class="mockup">
    <div class="mockup-header">Component Tree</div>
    <div class="mockup-body" style="padding: 20px; font-family: 'JetBrains Mono', monospace; font-size: 13px; line-height: 1.8; color: #1A1612;">
      <div><strong style="color: #1A7F8E;">ProcessDiagram</strong> &mdash; root, fetches layout, manages state</div>
      <div style="padding-left: 24px; border-left: 2px solid #E4DFD8;">
        <div>&lt;svg&gt; container with viewBox (zoom/pan transforms)</div>
        <div style="padding-left: 24px; border-left: 2px solid #E4DFD8;">
          <div><strong style="color: #7C3AED;">DiagramSection</strong> label="Main Route"</div>
          <div style="padding-left: 24px; border-left: 2px solid #E4DFD8;">
            <div><strong style="color: #9C9184;">&lt;g&gt;</strong> edges layer (rendered first, behind nodes)</div>
            <div style="padding-left: 24px;">
              <div><strong style="color: #C6820E;">DiagramEdge</strong> &times; N &mdash; SVG &lt;path&gt; with arrowhead</div>
            </div>
            <div><strong style="color: #9C9184;">&lt;g&gt;</strong> nodes layer</div>
            <div style="padding-left: 24px;">
              <div><strong style="color: #C6820E;">DiagramNode</strong> &times; N &mdash; top-bar card</div>
              <div style="padding-left: 24px; border-left: 2px solid #E4DFD8;">
                <div><strong style="color: #3D7C47;">ConfigBadge</strong> &times; 0..N &mdash; tap/trace indicators</div>
                <div><strong style="color: #3D7C47;">NodeToolbar</strong> &mdash; floating on hover</div>
              </div>
              <div><strong style="color: #C6820E;">CompoundNode</strong> &times; 0..N &mdash; choice/split container</div>
              <div style="padding-left: 24px; border-left: 2px solid #E4DFD8;">
                <div><strong style="color: #C6820E;">DiagramNode</strong> &times; N &mdash; children inside compound</div>
              </div>
            </div>
          </div>
          <div style="margin-top: 8px;"><strong style="color: #C0392B;">DiagramSection</strong> label="onException" variant="error"</div>
          <div style="padding-left: 24px; border-left: 2px solid #C0392B;">
            <div><em style="color: #9C9184;">same edge + node structure as above</em></div>
          </div>
        </div>
        <div style="margin-top: 8px;"><strong style="color: #1A7F8E;">ZoomControls</strong> &mdash; HTML overlay (not SVG)</div>
      </div>
    </div>
  </div>
</div>

<div class="section" style="margin-top: 24px;">
  <div class="mockup">
    <div class="mockup-header">SVG Structure (simplified)</div>
    <div class="mockup-body" style="padding: 20px; font-family: 'JetBrains Mono', monospace; font-size: 12px; line-height: 1.7; color: #5C5347; background: #F5F2ED;">
<pre style="margin: 0;">&lt;div class="process-diagram"&gt;            <span style="color:#9C9184">/* wrapper div */</span>
  &lt;svg viewBox="0 0 {w} {h}"&gt;            <span style="color:#9C9184">/* zoom = viewBox transform */</span>
    &lt;g class="diagram-content"&gt;           <span style="color:#9C9184">/* pan offset */</span>

      <span style="color:#7C3AED">&lt;!-- Main Route section --&gt;</span>
      &lt;g class="section section--main"&gt;
        &lt;g class="edges"&gt;
          &lt;path d="M 100 40 C ..." /&gt;     <span style="color:#9C9184">/* cubic bezier edge */</span>
          &lt;marker&gt;...&lt;/marker&gt;             <span style="color:#9C9184">/* arrowhead def */</span>
        &lt;/g&gt;
        &lt;g class="nodes"&gt;
          &lt;g transform="translate(x, y)"&gt; <span style="color:#9C9184">/* positioned by ELK */</span>
            &lt;rect .../&gt;                    <span style="color:#9C9184">/* card background */</span>
            &lt;rect .../&gt;                    <span style="color:#9C9184">/* color top bar */</span>
            &lt;text&gt;LOG&lt;/text&gt;              <span style="color:#9C9184">/* label */</span>
            &lt;g class="badges"&gt;...&lt;/g&gt;     <span style="color:#9C9184">/* config indicators */</span>
          &lt;/g&gt;
        &lt;/g&gt;
      &lt;/g&gt;

      <span style="color:#C0392B">&lt;!-- Error Handler section --&gt;</span>
      &lt;g class="section section--error"
         transform="translate(0, {mainH + gap})"&gt;
        &lt;text&gt;onException&lt;/text&gt;          <span style="color:#9C9184">/* section label */</span>
        &lt;line .../&gt;                        <span style="color:#9C9184">/* divider line */</span>
        &lt;g class="edges"&gt;...&lt;/g&gt;
        &lt;g class="nodes"&gt;...&lt;/g&gt;
      &lt;/g&gt;

    &lt;/g&gt;
  &lt;/svg&gt;
  &lt;div class="zoom-controls"&gt;...&lt;/div&gt;    <span style="color:#9C9184">/* HTML overlay */</span>
&lt;/div&gt;</pre>
    </div>
  </div>
</div>

<div class="section" style="margin-top: 24px;">
  <div class="mockup">
    <div class="mockup-header">Data Flow</div>
    <div class="mockup-body" style="padding: 20px; font-family: 'JetBrains Mono', monospace; font-size: 12px; line-height: 1.8; color: #5C5347;">
<pre style="margin: 0;">
<span style="color:#1A7F8E">GET /diagrams/{hash}/render?direction=LR</span>
        │
        ▼
  DiagramLayout { nodes[], edges[], width, height }
        │
        ▼
  <span style="color:#7C3AED">separateFlows(nodes)</span>  →  mainNodes[] + errorSections[]
        │                       │
        ▼                       ▼
  <span style="color:#C6820E">renderMainSection()</span>    <span style="color:#C0392B">renderErrorSection()</span>
        │                       │
        ▼                       ▼
  SVG groups with              SVG groups offset below
  ELK x/y coordinates         main section by mainHeight + gap
</pre>
    </div>
  </div>
</div>