Educational visualization of a fee split — a horizontal stacked bar with proportional segments, plus a label and Wei amount under each. Pairs with Web3.Ui.FeeBreakdown (which is the equivalent table view); use this one when you want a hero-tier "where does my fee go?" graphic on a marketing page or trade modal.

The bar segments are sized by basis points; total bps does not need to sum to 10000 (the bar is normalized to its own total).

Each Slice accepts an optional kind string — emitted as a CSS class suffix (web3-feeflow__seg--<kind>) so the consumer can color the segments by recipient type without inline styles.

Web3.Ui.FeeFlowDiagram.view
    { gross = tradeFee
    , symbol = "PLS"
    , decimals = 18
    , width = 480
    , height = 24
    , slices =
        [ { label = "veToken holders", bps = 3000, kind = Just "ve" }
        , { label = "stakers",        bps = 3000, kind = Just "stakers" }
        , { label = "floor pool",     bps = 2000, kind = Just "floor" }
        , { label = "buy & burn",     bps = 1000, kind = Just "burn" }
        , { label = "treasury",       bps = 1000, kind = Just "treasury" }
        ]
    }

CSS classes: web3-feeflow, web3-feeflow__bar, web3-feeflow__seg, web3-feeflow__seg--<kind>, web3-feeflow__legend, web3-feeflow__legend-item, web3-feeflow__legend-swatch, web3-feeflow__legend-label, web3-feeflow__legend-amount.