27:Tb293,
// Two weeks of a studio's site, made up but shaped like real traffic: visits land on
// the studio or a project (from search, a forum, or nowhere), most leave after a page
// or two, some wander project to project, one reads eighty pages. Seeded, so every
// render draws the same visits.
const PLACES = ["studio", "lore", "chill", "xtldr", "trash", "awake", "hollow"]
/** Where a visit lands, and how often. */
const LANDS: [string, number][] = [
  ["studio", 0.45],
  ["lore", 0.25],
  ["chill", 0.12],
  ["xtldr", 0.08],
  ["trash", 0.06],
  ["awake", 0.04],
]
/** From a place, where the next page is (what is left of 1 is leaving). */
const NEXT: Record<string, [string, number][]> = {
  studio: [
    ["lore", 0.32],
    ["chill", 0.1],
    ["trash", 0.08],
    ["xtldr", 0.05],
  ],
  lore: [
    ["chill", 0.12],
    ["studio", 0.1],
    ["xtldr", 0.06],
    ["lore:download", 0.08],
  ],
  chill: [
    ["xtldr", 0.14],
    ["lore", 0.1],
    ["studio", 0.06],
  ],
  xtldr: [
    ["trash", 0.12],
    ["lore", 0.08],
    ["studio", 0.05],
  ],
  trash: [
    ["awake", 0.15],
    ["lore", 0.08],
    ["chill", 0.06],
  ],
  awake: [
    ["lore", 0.12],
    ["chill", 0.08],
    ["hollow", 0.05],
  ],
  hollow: [["studio", 0.1]],
  "lore:download": [["lore", 0.2]],
}
const REFERRERS: [string, number][] = [
  ["google.com", 0.3],
  ["reddit.com", 0.12],
  ["news.ycombinator.com", 0.08],
  ["x.com", 0.05],
]

function seeded(seed: number) {
  let s = seed
  return () => {
    s = (s + 0x6d2b79f5) | 0
    let t = Math.imul(s ^ (s >>> 15), 1 | s)
    t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t
    return ((t ^ (t >>> 14)) >>> 0) / 4294967296
  }
}

/** One of `choices` by its weight, or null for the share none of them takes. */
function pick(r: number, choices: readonly [string, number][]): string | null {
  let at = 0
  for (const [name, weight] of choices) {
    at += weight
    if (r < at) return name
  }
  return null
}

function sampleVisits(count: number): Visit[] {
  const random = seeded(12)
  const out: Visit[] = []
  for (let i = 0; i < count; i++) {
    const places = [pick(random(), LANDS) ?? "studio"]
    for (;;) {
      const next = pick(
        random(),
        NEXT[places[places.length - 1] as string] ?? [],
      )
      if (!next || places.length > 30) break
      places.push(next)
    }
    const referrer = pick(random(), REFERRERS)
    out.push(referrer ? { places, referrer } : { places })
  }
  // One reader who went everywhere, eighty pages.
  out.push({
    places: Array.from(
      { length: 80 },
      (_, i) => PLACES[(i * 3 + (i >> 2)) % PLACES.length] as string,
    ),
  })
  return out
}

const VISITS = sampleVisits(412)

// Each place's colour, as the site knows it (a project's accent); an event step
// (lore:download) takes its place's.
const COLORS: Record<string, string> = {
  studio: "#8fbf8f",
  lore: "#e0a458",
  chill: "#5fb4e8",
  xtldr: "#a98bf5",
  trash: "#f07a8f",
  awake: "#f2d06b",
  hollow: "#4fc9b0",
}
const colorOf = (place: string) => COLORS[place]

// The referrers' favicons, served by the site itself (fetched once, kept beside the
// visits), never asked of a third party while someone reads.
const FAVICONS: Record<string, string> = {
  "google.com": "/user-flows/google.com.png",
  "reddit.com": "/user-flows/reddit.com.png",
  "news.ycombinator.com": "/user-flows/news.ycombinator.com.svg",
  "x.com": "/user-flows/x.com.png",
}
const faviconOf = (place: string) => FAVICONS[place]

<Funnel
  steps={funnel(VISITS, ["studio", "lore", "lore:download"])}
  colorOf={colorOf}
/>
26:["$","div",null,{"className":"ag-code-scroll ag-edge-fade-xy","dangerouslySetInnerHTML":{"__html":"$27"}}]