60:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 61:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 62:T219f,"use client"; // @litt/funnel 2026.10.26. What changed: https://littmd.vercel.app/changelog.md /** * Funnel: how many went on at each step. Visited, signed up, activated, paid. Rows, not a trapezoid: the Meter's * thin rail (chart.tsx) once per step, every rail measured against the first step. * * - Header: the Breakdown's row. The label at the start (small, `--litt-fg`), the overall conversion at the end (tabular, * caption, `--litt-fg-subtle`, tabular): "4.1% overall", the last step as a share of the first. A long label truncates; * the reading never does. * - Steps: one row per step, in order, in exactly the Meter's anatomy: the label, the reading (the value, then its * share of the first step: "6,930 38%"), and under them a 4px rail on fg at 12% filled to that share. No * dividers and no boxes. * - Between two steps: one quiet line at the caption size in `--litt-fg-subtle` that says in words how many went on * ("38% continued"). Never red, never an arrow or a dash doing the talking. `formatStep` rewrites it. * - Hue (R7): one data hue for the whole funnel, blue unless `hue` says otherwise. It is one quantity, so one hue. * - Shares: whole percentages, with one decimal under 10% ("4.1%") so the small end of a funnel still reads, and * "<0.1%" for a step that is there but tiny. * - Bad data still draws: a step larger than the one before it fills to its share, held at 100% of the first, and * its line says it is more than the step before. A first step of 0 draws empty rails and no shares. * - Semantics: an ordered list named by the label. Each step is a list item whose rail is `role="meter"` named by * the step's label, from 0 to the first step's value, with the value and its share as its text ("6,930 people, * 38% of 18,240"). The line between steps is plain text at the start of the next item, so it is read in order. * The visible header and every visible reading are hidden from assistive tech, and a visually hidden line says * the overall conversion ("Signups, 4.1% overall: 748 of 18,240"), so nothing is read twice. * - Motion: none. Static, like the Meter: no entrance, no hover, no focus stop. A value that changes just changes. */ import { useId } from "react"; /** The five data hues, in their fixed order (R7). */ export type FunnelHue = "blue" | "amber" | "teal" | "violet" | "rose"; /** A hue's mark tone fills every rail. */ const MARK: Record = { blue: "bg-litt-data-blue", amber: "bg-litt-data-amber", teal: "bg-litt-data-teal", violet: "bg-litt-data-violet", rose: "bg-litt-data-rose", }; /** The Meter's track. */ const TRACK = "bg-[color-mix(in_oklab,var(--litt-fg)_12%,transparent)]"; const groupDigits = (n: number) => n.toLocaleString("en-GB", { maximumFractionDigits: 2 }); const clean = (n: number) => (Number.isFinite(n) ? Math.max(0, n) : 0); /** * A share as the funnel shows it: "38%", "4.1%" under 10% so the small end still reads, "<0.1%" for a step that is * there but tiny, and "0%" for none. */ const percent = (share: number) => { if (!(share > 0)) return "0%"; if (share < 0.001) return "<0.1%"; if (share < 0.1) return `${(Math.round(share * 1000) / 10).toLocaleString("en-GB", { minimumFractionDigits: 1 })}%`; return `${Math.round(share * 100)}%`; }; /** The default line between two steps, in words. */ const continued = (value: number, previous: number) => previous <= 0 ? "Nothing to continue from" : value > previous ? `${percent(value / previous)} of the step before` : `${percent(value / previous)} continued`; export type FunnelStep = { /** What happened at this step, in a few words: "Signed up". It names the step's meter, and truncates when narrow. */ label: string; /** How many reached this step, zero or more. Its rail fills to its share of the first step. */ value: number; }; export type FunnelProps = { /** What the funnel follows, at the start of the header: "Signups". It names the list for assistive tech. */ label: string; /** The steps, in the order people go through them. Every rail is measured against the first. */ steps: FunnelStep[]; /** The one data hue every rail fills with. A funnel is one quantity, so it takes one hue. */ hue?: FunnelHue; /** The reading at the end of the header, in tabular figures. Defaults to the last step as a share of the first: "4.1% overall". */ overallText?: string; /** Turns a value into the text shown and read: `(v) => \`${v} builds\``. The default groups thousands. */ formatValue?: (value: number) => string; /** What the values count, said after each number to screen readers: "people". Pass ["person", "people"] to say the first for exactly 1. Leave it out when `formatValue` already says it. */ unit?: string | [one: string, other: string]; /** Writes the line between two steps from this step's value and the one before. The default says "38% continued", or "126% of the step before" when a step went up. */ formatStep?: (value: number, previous: number) => string; /** Extra classes for the funnel, such as a width. */ className?: string; }; /** How many went on at each step: a thin rail per step against the first, with the step-to-step share in words. Static: it never animates. */ export function Funnel({ label, steps, hue = "blue", overallText, formatValue, unit, formatStep, className = "" }: FunnelProps) { const id = useId(); const fmt = formatValue ?? groupDigits; const unitFor = (v: number) => (Array.isArray(unit) ? (v === 1 ? unit[0] : unit[1]) : unit); const withUnit = (v: number) => fmt(v) + (unit ? ` ${unitFor(v)}` : ""); const between = formatStep ?? continued; const fill = MARK[hue] ?? MARK.blue; const rows = steps.map((s) => ({ label: s.label, value: clean(s.value) })); const first = rows.length ? rows[0].value : 0; const last = rows.length ? rows[rows.length - 1].value : 0; const measured = first > 0; /* The overall conversion only means something with two steps and a first step to measure against. */ const overall = rows.length > 1 && measured ? percent(last / first) + " overall" : ""; const reading = overallText ?? overall; const spoken = overallText != null ? `${label}, ${overallText}` : overall ? `${label}, ${overall}: ${fmt(last)} of ${withUnit(first)}` : ""; return (

{spoken &&

{spoken}

}

{i > 0 &&
{between(step.value, rows[i - 1].value)}
}

); } 5f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L60",null,{"namespace":"@litt","registryDependencies":["https://littmd.vercel.app/r/litt.json"]}]]}],null]}],["$","$L61",null,{"files":[{"path":"registry/litt/ui/funnel.tsx","content":"$62","type":"registry:ui","target":"components/litt/funnel.tsx"}],"className":"h-[70svh] min-h-80"}]]}]