docs(stammbaum): reconcile spec geometry to 160x56 and document seeded-rank invariant (#361)
Updates the impl-ref constants table to match buildLayout.ts (NODE_W=160, NODE_H=56) and adds an explicit Layout rules section asserting the seeded- rank invariant honoured since #689. Mockup <rect> dimensions stay at 144x50 with an explanatory annotation; re-pixel-pushing the illustrative SVG has disproportionate blast radius for a spec doc. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
@@ -336,6 +336,7 @@ body{font-family:'Montserrat',system-ui,sans-serif;background:#ECEAE4;color:#1A1
|
||||
<div class="sh">
|
||||
<h2>2 · Desktop (1280 px) — light & dark, resting state</h2>
|
||||
<p>Full tree canvas with Gen I–III nodes and the 268 px side panel showing Maria Raddatz (selected). Rendered at ~65 % scale. Light and dark stacked.</p>
|
||||
<p><em>Mockup <code><rect></code> dimensions (144 × 50) below are illustrative; authoritative node geometry is in the impl-ref constants table in §6 (<code>NODE_W = 160</code>, <code>NODE_H = 56</code>).</em></p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
@@ -950,14 +951,14 @@ body{font-family:'Montserrat',system-ui,sans-serif;background:#ECEAE4;color:#1A1
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Tree node</td>
|
||||
<td><code>w-[144px] h-[50px] rounded-sm</code></td>
|
||||
<td>144 × 50</td>
|
||||
<td>SVG <code>rect rx="2"</code>; same size all generations</td>
|
||||
<td><code>w-[160px] h-[56px] rounded-sm</code></td>
|
||||
<td>160 × 56</td>
|
||||
<td>SVG <code>rect rx="2"</code>; same size all generations. Constants <code>NODE_W = 160</code>, <code>NODE_H = 56</code> in <code>buildLayout.ts</code> are the source of truth.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Selected accent bar</td>
|
||||
<td><code>w-1 h-full bg-accent</code></td>
|
||||
<td>4 × 50</td>
|
||||
<td>4 × 56</td>
|
||||
<td>Mint on light; navy on dark; left edge of selected node</td>
|
||||
</tr>
|
||||
<tr>
|
||||
@@ -1047,6 +1048,14 @@ body{font-family:'Montserrat',system-ui,sans-serif;background:#ECEAE4;color:#1A1
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="sh" style="margin-top:24px">
|
||||
<h2>6.1 · Layout rules</h2>
|
||||
<p>Invariants honoured by <code>buildLayout.ts</code> and asserted in <code>buildLayout.test.ts</code>:</p>
|
||||
<ul style="font-size:11px;color:#444;line-height:1.7;padding-left:20px">
|
||||
<li><strong>Seeded-rank invariant.</strong> When <code>node.generation</code> is non-null, the node renders at row index equal to <code>node.generation</code> (modulo the negative-generation shift that normalises <code>min(rank) → 0</code>). This is independent of edge structure: spouse-pulldown and parent-fallback never move a seeded rank.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div><!-- /doc -->
|
||||
|
||||
Reference in New Issue
Block a user