ds
Components
Figure frame

Figure frame

The Fig. 01 frame with legend and inspector.

Fig. 01Order pipeline5 components · 5 links

3 stepsWalk through with the arrows

Every architecture diagram on fin1te.com and in topo's present mode sits in this frame: a header with the figure number, a dot-grid canvas, a legend, and an inspector on the right that opens when you select a component. Hover a component to light up what feeds it and what it feeds. Use the arrows in the bar to walk through it.

Anatomy

<figure class="sd">
  <header class="fh">
    <span class="fn">Fig. 01</span><span class="ft">Order pipeline</span>
    <span class="fc">5 components · 5 links</span>
  </header>
  <div class="canvas">
    <div class="stepbar">…</div>              <!-- optional walkthrough -->
    <div class="scroll"><svg class="tp">…</svg></div>
    <div class="legend"><span><i class="lg data"></i>data</span> … <span class="hint">Select any component</span></div>
  </div>
  <aside class="insp" aria-live="polite">
    <div class="insp-card" data-for="api">
      <p class="label">Compute</p><h3>API</h3><p class="sub">FastAPI · 3 pods</p>
      <p class="role">Accepts orders…</p>
      <dl><div><dt>Latency</dt><dd>p99 40 ms</dd></div></dl>
    </div>
  </aside>
</figure>

Class	On	What it does
`.sd`	figure	The frame. Two columns from 1000px: canvas and inspector.
`.no-insp`	.sd	No inspector column.
`.fh .fn .ft .fc`	header, span	Header, figure number, title, count.
`.canvas / .scroll`	div	Dot grid; the SVG scrolls sideways on small screens (32rem minimum).
`.legend .lg .lg-store .lg-host`	div, i	Legend and its swatches: data, control, fallback, stream, storage, workload.
`.insp / .insp-card`	aside, div	Inspector and one card per component.
`.stepbar`	div	Walkthrough bar: previous, count, next, play, time, caption.

Accessibility

Components are focusable buttons with an aria-label of label and subtitle; Enter selects.
The inspector is aria-live="polite", so a selection is announced.
The flow animation pauses off screen and stops for prefers-reduced-motion.