Mass you inherit. Risk that travels.

<!-- a workspace package: its full
     upstream chain, precomputed -->
<li id="ws-site" data-hot
  data-chain="ws-elements ws-core
    ws-platform ws-vanilla">

<!-- an external dep: the workspace
     packages that inherit it. The
     downloads figure declares its
     provenance as a measurement. -->
<li id="dep-mermaid"
  data-body="attract"
  data-strength="0.72"
  data-feedback data-hot
  data-uses="ws-site"
  style="--w: 0.20; --cat: #ff6b6b;">
  ...
  <span data-field-visual-for="#dep-mermaid"
        data-field-visual-role="measurement">
    <b>2.1M</b> <!-- weekly downloads -->
  </span>
</li>

// hover a dep → thread to each
// workspace card it touches
const a = centerIn(row, zone);
for (const id of row.dataset.uses.split(" ")) {
  const node = zone.querySelector("#" + id);
  node.classList.add("cited");
  const b = centerIn(node, zone);
  d += `M${a.x} ${a.y} C ...`;
}
// the thread color is the row's --cat:
// advisory-carrying deps thread red.

// hover a workspace node → no SVG,
// just light its data-chain upstream —
// while the engine's --d gathers under
// the cursor (data-hot), so the glow
// and the chain light together.

.dp-name {
  font-variation-settings:
    'wght' calc(380 + var(--w) * 360);
}
.dp-row {
  /* --d: live local density, written by the
     hidden engine each frame; gathers on
     data-hot hover. --field-attention: the
     recipe's eased attention lane. */
  --live: var(--d, 0);
  box-shadow: 0 0 calc(var(--live) * 16px) -6px
    color-mix(in srgb, var(--cat)
      calc(var(--live) * 55%), transparent);
  opacity: calc(0.58 + var(--w) * 0.42);
}
/* an advisory badge runs hotter as the
   field gathers on its row */
.dp-adv {
  box-shadow: 0 0 calc(var(--live) * 10px)
    color-mix(in srgb, #ff6b6b
      calc(var(--live) * 45%), transparent);
}
/* decay: no publish in 90 days */
.dp-row.stale { opacity: 0.5; }