@appinternalleads/ui 0.2.0

package/src/components/onboarding/contact-import/presets.json

@@ -0,0 +1,181 @@
+{
+  "component": "contact-import",
+  "baseCopy": {
+    "loadErrorTitle": "Couldn’t load this step",
+    "loadErrorBody": "Nothing was lost. Retry to load it again.",
+    "retryLabel": "Retry",
+    "emptyCta": "Refresh"
+  },
+  "base": {
+    "type": "data",
+    "icon": "contacts",
+    "title": "Import your contacts",
+    "subtitle": "Bring your customers into the CRM.",
+    "noun": "contacts",
+    "resultCount": 142,
+    "skippedCount": 0,
+    "skipReason": "missing email",
+    "maxSizeMB": 10,
+    "sources": [
+      {
+        "value": "google",
+        "label": "Google Contacts",
+        "description": "Sign in with your Google account"
+      },
+      {
+        "value": "outlook",
+        "label": "Outlook",
+        "description": "Microsoft 365 or Outlook.com"
+      },
+      {
+        "value": "csv",
+        "label": "CSV file",
+        "description": "Upload an export from any tool"
+      }
+    ],
+    "secondaryLabel": "Skip",
+    "continueLabel": "Continue",
+    "importingLabel": "Importing…",
+    "failTitle": "Couldn’t import from {source}",
+    "failBody": "The connection timed out before any contacts were read. Nothing was imported.",
+    "oauthNote": "You’ll sign in to {source} in a new window. Nothing is imported until you confirm.",
+    "emptyTitle": "No import sources",
+    "emptyBody": "Ask an admin to turn on at least one source.",
+    "emptyCta": "Refresh"
+  },
+  "cases": {
+    "case1": {},
+    "case2": {
+      "icon": "users",
+      "title": "Add your team",
+      "subtitle": "Invite everyone in one go.",
+      "noun": "members",
+      "resultCount": 38,
+      "sources": [
+        {
+          "value": "slack",
+          "label": "Slack workspace",
+          "description": "Members of your connected workspace"
+        },
+        {
+          "value": "gdir",
+          "label": "Google directory",
+          "description": "Everyone in your Google Workspace domain"
+        },
+        {
+          "value": "csv",
+          "label": "CSV file",
+          "description": "Name and email columns"
+        }
+      ],
+      "failTitle": "Couldn’t read {source}",
+      "failBody": "We couldn’t reach the directory. Nobody was invited."
+    },
+    "case3": {
+      "icon": "megaphone",
+      "title": "Import subscribers",
+      "subtitle": "Move your list from another tool.",
+      "noun": "subscribers",
+      "resultCount": 2410,
+      "skippedCount": 12,
+      "skipReason": "duplicate",
+      "sources": [
+        {
+          "value": "mailchimp",
+          "label": "Mailchimp",
+          "description": "Audiences and tags"
+        },
+        {
+          "value": "hubspot",
+          "label": "HubSpot",
+          "description": "Marketing contacts only"
+        },
+        {
+          "value": "csv",
+          "label": "CSV file",
+          "description": "Email plus any custom fields"
+        }
+      ]
+    },
+    "case4": {
+      "icon": "utensils",
+      "title": "Import customers",
+      "subtitle": "Keep booking history in one place.",
+      "noun": "customers",
+      "resultCount": 318,
+      "skippedCount": 4,
+      "skipReason": "missing phone",
+      "sources": [
+        {
+          "value": "booking",
+          "label": "Booking system export",
+          "description": "From your current booking tool"
+        },
+        {
+          "value": "vcard",
+          "label": "vCard",
+          "description": "Phone contacts exported as .vcf"
+        },
+        {
+          "value": "csv",
+          "label": "CSV file",
+          "description": "Name, phone and email"
+        }
+      ]
+    },
+    "case5": {
+      "icon": "briefcase",
+      "title": "Import candidates",
+      "subtitle": "Bring open applications across.",
+      "noun": "candidates",
+      "resultCount": 86,
+      "ship": "failed",
+      "sources": [
+        {
+          "value": "greenhouse",
+          "label": "Greenhouse",
+          "description": "Active applications only"
+        },
+        {
+          "value": "lever",
+          "label": "Lever",
+          "description": "Open opportunities"
+        },
+        {
+          "value": "csv",
+          "label": "CSV file",
+          "description": "One row per candidate"
+        }
+      ],
+      "failTitle": "Couldn’t import from {source}",
+      "failBody": "Greenhouse rejected the API key. Reconnect it, then retry."
+    }
+  },
+  "meta": {
+    "case1": {
+      "eyebrow": "Case study 1 · Sales",
+      "title": "CRM contacts",
+      "scenario": "A sales rep brings existing contacts into a new CRM from their address book or a spreadsheet."
+    },
+    "case2": {
+      "eyebrow": "Case study 2 · Workspace admin",
+      "title": "Team members",
+      "scenario": "An admin adds the whole team from an existing directory instead of inviting people one by one."
+    },
+    "case3": {
+      "eyebrow": "Case study 3 · Marketing",
+      "title": "Subscriber list",
+      "scenario": "A marketer moves their list from another email tool. Duplicates are skipped and listed."
+    },
+    "case4": {
+      "eyebrow": "Case study 4 · Local business",
+      "title": "Salon customers",
+      "scenario": "A salon owner imports customers from their old booking system. Rows without a phone number are skipped."
+    },
+    "case5": {
+      "eyebrow": "Case study 5 · Hiring",
+      "title": "Candidates",
+      "scenario": "A recruiter moves open applications from an old applicant tracker. The board ships in the failed state."
+    }
+  }
+}

package/src/components/onboarding/contact-import/runtime.ts

@@ -0,0 +1,95 @@
+import { useCallback, useEffect, useMemo, useReducer, useRef } from 'react';
+import { useOperationRunner } from '../../../runtime/operations';
+import type { PickedFile } from '../../../core';
+import type { OnboardingResult } from '../shared/contract';
+import { ONBOARDING_TIMING, createMockProgressOperation } from '../shared/mock';
+import type { ContactImportSettings } from './contract';
+import {
+  contactSeed, contactView, demoSkipped, initialContact, reduceContact,
+  type ContactAction, type ContactSeed, type ContactState, type SkippedRow,
+} from './engine';
+
+export type ImportRequest = { source: string; file?: PickedFile };
+/** What an import found. `skipped` lists some rows; `skippedTotal` counts all of them. */
+export type ImportOutcome =
+  | { ok: true; found: number; skipped?: SkippedRow[]; skippedTotal?: number }
+  | { ok: false; message?: string };
+export type ContactImportOperations = {
+  import: (req: ImportRequest, ctx: { signal: AbortSignal; onProgress: (fraction: number) => void }) => Promise<ImportOutcome>;
+};
+
+/**
+ * **The Contact Import runtime** — the reducer and its one boundary operation, a progress stream.
+ * The default import is the prototype's (+9% every 160ms) and finds `resultCount`, skipping
+ * `skippedCount`; with `result: 'error'` it runs to the end and fails.
+ */
+export function useContactImport({
+  config, operations, result = 'success', initial, onImport, onContinue,
+}: {
+  config: ContactImportSettings;
+  operations?: ContactImportOperations;
+  result?: OnboardingResult;
+  initial?: ContactSeed;
+  onImport?: (outcome: { found: number; skippedTotal: number }) => void;
+  onContinue?: () => void;
+}) {
+  const seed = () => initialContact(config, initial ?? (config.ship ? contactSeed(config, config.ship) : {}));
+  const [state, send] = useReducer((s: ContactState, a: ContactAction) => reduceContact(config, s, a), undefined, seed);
+  const stateRef = useRef(state);
+  stateRef.current = state;
+  const runner = useOperationRunner();
+  const importOp = useMemo<ContactImportOperations['import']>(() => {
+    if (operations?.import) return operations.import;
+    const progress = createMockProgressOperation<ImportRequest>({ tickMs: ONBOARDING_TIMING.tick, step: 0.09, fail: () => result === 'error' });
+    return async (req, ctx) => {
+      const r = await progress(req, ctx);
+      return r.ok
+        ? { ok: true, found: config.resultCount, skipped: demoSkipped(config, config.skippedCount), skippedTotal: config.skippedCount }
+        : r;
+    };
+  }, [operations, result, config]);
+
+  const key = JSON.stringify([config, initial ?? null]);
+  const seeded = useRef(key);
+  useEffect(() => {
+    if (seeded.current === key) return;
+    seeded.current = key;
+    runner.cancel('import');
+    send({ type: 'reset', state: seed() });
+  });
+
+  const run = useCallback(() => {
+    const s = stateRef.current;
+    const req: ImportRequest = { source: s.source ?? '', ...(s.file.status === 'filled' ? { file: s.file.file } : {}) };
+    const from = s.progress;
+    runner.run('import', ctx => importOp(req, { signal: ctx.signal, onProgress: p => { if (ctx.isCurrent()) send({ type: 'progress', progress: Math.max(from, p) }); } }), {
+      onOk: r => {
+        if (r.ok) {
+          const skippedTotal = r.skippedTotal ?? r.skipped?.length ?? 0;
+          send({ type: 'done', found: r.found, skipped: r.skipped ?? [], skippedTotal });
+          onImport?.({ found: r.found, skippedTotal });
+        } else send({ type: 'failed' });
+      },
+      onError: () => send({ type: 'failed' }),
+    });
+  }, [runner, importOp, onImport]);
+
+  /* A session restored mid-import carries on from where it was. */
+  useEffect(() => { if (stateRef.current.run === 'importing') run(); }, [key]);
+
+  return {
+    state,
+    view: contactView(config, state),
+    pick: (source: string) => send({ type: 'pick', source }),
+    file: (file: PickedFile) => send({ type: 'file', file }),
+    removeFile: () => send({ type: 'removeFile' }),
+    toggleSkipped: () => send({ type: 'toggleSkipped' }),
+    primary: () => {
+      const s = stateRef.current;
+      if (s.run === 'done') { onContinue?.(); return; }
+      if (!contactView(config, s).canImport) return;
+      send({ type: 'import' });
+      run();
+    },
+  };
+}

package/src/components/onboarding/conversion-funnel/ConversionFunnelView.tsx

@@ -0,0 +1,148 @@
+import { useEffect, useMemo, useState } from 'react';
+import { View } from 'react-native';
+import { Box, Icon, Select, Text } from '../../../core';
+import { blockRadii, useDs, type DensityName } from '../../../tokens';
+import { resolveConfig, type OnboardingPreset, type OnboardingResult, type PatternStatus } from '../shared/contract';
+import type { OnboardingOperation } from '../shared/mock';
+import { InvalidConfig } from '../shared/InvalidConfig';
+import { OnboardingCard } from '../shared/OnboardingCard';
+import { usePatternStatus, useSceneReport } from '../shared/runtime';
+import { guarded } from '../shared/guard';
+import { M15, cascadeEnd, compactCount, progress, stageFill, stageStart } from '../shared/m15';
+import { CapsuleBar, DataTip, useInView, useRevealClock, useTweenedValues } from '../shared/viz';
+import { FUNNEL_PRESETS, validateConversionFunnel, type ConversionFunnelSettings } from './contract';
+import { funnelRows, funnelSeed, initialFunnel, type FunnelSeed } from './engine';
+
+export type ConversionFunnelProps = {
+  preset?: OnboardingPreset;
+  config?: Partial<ConversionFunnelSettings>;
+  density?: DensityName;
+  status?: PatternStatus;
+  result?: OnboardingResult;
+  reload?: OnboardingOperation<void>;
+  initial?: FunnelSeed;
+  onOpen?: (id: string) => void;
+  onPeriodChange?: (period: string) => void;
+  replay?: number;
+  forceReduced?: boolean;
+  onScene?: (scene: string) => void;
+  testID?: string;
+};
+
+/**
+ * **Conversion Funnel** — header: an optional period select and "Overall rate" (last ÷ first; at 35%
+ * until the cascade ends, then counting up over 400ms). Stages in an `<ol>`: the name (visible at
+ * once), the count (compact from 10,000) and its share of the first stage; a 28px bar at .24 opacity
+ * scaled from its centre, never under 2px unless the stage is zero; between stages a ↓ connector
+ * ("88% drop-off", or "+X% gain"), the biggest drop cross-fading to apricot once the last stage lands.
+ */
+function ConversionFunnelView(props: ConversionFunnelProps) {
+  const config = resolveConfig(FUNNEL_PRESETS, props.preset, props.config);
+  const issues = validateConversionFunnel(config);
+  if (issues.length) return <InvalidConfig title={config.title} issues={issues} testID={props.testID} />;
+  return <Valid {...props} config={config} />;
+}
+
+function Valid({
+  config, density, status, reload, initial, onOpen, onPeriodChange, replay, forceReduced, onScene, testID,
+}: Omit<ConversionFunnelProps, 'config'> & { config: ConversionFunnelSettings }) {
+  const { colors } = useDs();
+  const key = JSON.stringify([config, initial ?? null]);
+  const seed = useMemo(() => initialFunnel(config, initial ?? (config.ship ? funnelSeed(config, config.ship) : {})), [key]);
+  const [period, setPeriod] = useState(seed.period);
+  useEffect(() => setPeriod(seed.period), [seed]);
+  const state = { ...seed, period };
+  const { rows, overall } = funnelRows(config, state);
+  const pattern = usePatternStatus(status ?? (seed.loadReady ? 'loading' : rows.length >= 2 ? 'ready' : 'empty'), reload);
+  useEffect(() => {
+    if (!seed.loadReady || status) return;
+    const t = setTimeout(() => pattern.set('ready'), 1200);
+    return () => clearTimeout(t);
+  }, [seed, status, replay]);
+  useSceneReport(pattern.status === 'ready' ? (seed.loadReady ? 'loadReady' : period !== config.period ? 'switchPeriod' : 'default') : pattern.status, onScene);
+
+  const [ref, inView] = useInView();
+  const n = rows.length;
+  const end = cascadeEnd(n);
+  const clock = useRevealClock(inView && pattern.status === 'ready', end + M15.cascadeMs + M15.toneMs, `${replay ?? 0}|${pattern.status}`, forceReduced);
+  const t = clock.t;
+  const [width, setWidth] = useState(520);
+  const floor = 2 / Math.max(200, width);
+  const scaleTarget = (share: number, count: number) => (count > 0 ? Math.max(floor, share) : 0);
+  const shown = useTweenedValues([...rows.map(r => scaleTarget(r.share, r.count)), ...rows.map(r => r.count), overall], M15.cascadeMs, clock.done, clock.reduced);
+  const fillOf = (i: number) => (clock.reduced ? 1 : stageFill(i, t));
+  const scaleOf = (i: number) => (clock.done ? shown[i]! : scaleTarget(rows[i]!.share, rows[i]!.count) * fillOf(i));
+  const countOf = (i: number) => (clock.done ? shown[n + i]! : rows[i]!.count * fillOf(i));
+  const worstOn = clock.done || clock.reduced ? 1 : progress(t, end, M15.toneMs);
+  const overallP = clock.reduced ? 1 : progress(t, end, M15.cascadeMs);
+  const overallShown = clock.done ? shown[2 * n]! : overall * overallP;
+  const periods = config.periods ?? [];
+  const barH = density === 'compact' ? 20 : density === 'comfortable' ? 32 : 28;
+
+  const meta = (
+    <Box row align="center" gap="s3">
+      {periods.length > 1 && period ? (
+        <Box style={{ minWidth: 120 }}>
+          <Select aria-label="Period" value={period} options={periods.map(p => ({ value: p, label: p }))} onChange={p => { setPeriod(p); onPeriodChange?.(p); }} />
+        </Box>
+      ) : null}
+      <Box>
+        <Text style={{ fontSize: 12, color: colors.textSecondary }}>Overall rate</Text>
+        <Text numeric style={{ fontSize: 18, fontWeight: '600', color: colors.textPrimary, opacity: clock.done || clock.reduced || t >= end ? 1 : 0.35 }}>{`${overallShown.toFixed(1)}%`}</Text>
+      </Box>
+    </Box>
+  );
+
+  return (
+    <OnboardingCard testID={testID} header={config} copy={config} density={density} status={pattern.status} onRetry={pattern.retry} onEmptyAction={pattern.retry} meta={meta}>
+      <View ref={ref} role={'list' as never} aria-label="Stages" style={{ opacity: clock.reduced ? clock.fade : 1 }} onLayout={e => setWidth(e.nativeEvent.layout.width)}>
+        {rows.map((r, i) => {
+          const growing = clock.reduced || clock.done || t >= stageStart(i);
+          return (
+            <View key={r.id}>
+              {r.connector ? (
+                <View style={{ height: 26, alignItems: 'center', justifyContent: 'center', opacity: growing ? 1 : 0 }}>
+                  <Box row align="center" gap="s1">
+                    <Icon name="arrow-d" size={12} color={r.connector.worst ? colors.status.needsUser : colors.textSecondary} />
+                    <View style={{ position: 'relative' }}>
+                      <Text numeric style={{ fontSize: 12, color: colors.textSecondary, opacity: r.connector.worst ? 1 - worstOn : 1 }}>{r.connector.text}</Text>
+                      {r.connector.worst ? (
+                        <Text numeric style={{ position: 'absolute', left: 0, top: 0, fontSize: 12, fontWeight: '600', color: colors.status.needsUser, opacity: worstOn, width: 220 }}>{`${r.connector.text} · biggest drop`}</Text>
+                      ) : null}
+                    </View>
+                  </Box>
+                </View>
+              ) : null}
+              <View role={'listitem' as never}>
+                <DataTip label={r.tooltip} onPress={onOpen ? () => onOpen(r.id) : undefined} style={{ padding: 6, marginHorizontal: -6 }}>
+                  <Box gap="s1">
+                    <Box row align="center" gap="s2" style={{ flexWrap: 'wrap' }}>
+                      <Text style={{ flex: 1, minWidth: 120, fontSize: 13, fontWeight: '600', color: colors.textPrimary }}>{r.name}</Text>
+                      <Text numeric style={{ fontSize: 13, fontWeight: '600', color: colors.textPrimary }}>{compactCount(countOf(i))}</Text>
+                      <Text numeric style={{ fontSize: 12, color: colors.textSecondary, minWidth: 44, textAlign: 'right' }}>{`${(((countOf(i) / (rows[0]!.count || 1)) || 0) * 100).toFixed(1)}%`}</Text>
+                    </Box>
+                    <View style={{ height: barH }}>
+                      {r.count > 0 ? (
+                        <CapsuleBar
+                          scale={scaleOf(i)}
+                          height={barH}
+                          radius={blockRadii.inset}
+                          color={colors.textSecondary}
+                          opacity={0.24}
+                          a11y={{ label: r.name, now: Math.round(r.share * 1000) / 10, max: 100, text: r.valueText }}
+                        />
+                      ) : <View role={'meter' as never} aria-label={r.name} aria-valuenow={0} aria-valuetext={r.valueText} style={{ height: barH }} />}
+                    </View>
+                  </Box>
+                </DataTip>
+              </View>
+            </View>
+          );
+        })}
+      </View>
+    </OnboardingCard>
+  );
+}
+
+/** ConversionFunnel, guarded (`shared/guard`). */
+export const ConversionFunnel = guarded(ConversionFunnelView, FUNNEL_PRESETS, 'ConversionFunnel');

package/src/components/onboarding/conversion-funnel/contract.ts

@@ -0,0 +1,49 @@
+import type { HeaderConfig, LoadCopy, OnboardingIssue, PresetsFile } from '../shared/contract';
+import presetsJson from './presets.json';
+
+/**
+ * **Conversion Funnel (batch 5 §4.3)** — a linear funnel of stages, the biggest drop highlighted.
+ * Read-only; M15's cascade variant (400ms per stage, 200ms apart, from the centre). A non-zero
+ * stage never draws narrower than 2px; a zero stage draws no bar at all (handoff decision).
+ */
+
+/** `period`: the period this stage belongs to, when there are several — a sheet holds one row per stage per period. */
+export type FunnelStage = { id?: string; name: string; count: number; period?: string };
+
+export const FUNNEL_SCENES = ['default', 'switchPeriod', 'loadReady', 'loading', 'empty', 'error'] as const;
+export type FunnelScene = (typeof FUNNEL_SCENES)[number];
+export const FUNNEL_IN_FLIGHT: readonly string[] = [];
+
+export type ConversionFunnelSettings = HeaderConfig & LoadCopy & {
+  stages: FunnelStage[];
+  /** Optional: a period select, and per-period stages in `data`. */
+  period: string | null;
+  periods: string[] | null;
+  /** Deprecated: per-period stages by name. Prefer `period` on each stage — a sheet can fill that. */
+  data?: Record<string, FunnelStage[]>;
+  ship: FunnelScene | null;
+};
+
+export const FUNNEL_PRESETS = presetsJson as unknown as PresetsFile<ConversionFunnelSettings>;
+
+function stageIssues(list: unknown, path: string): OnboardingIssue[] {
+  if (!Array.isArray(list)) return [{ path, message: `${path} must be a list.` }];
+  const out: OnboardingIssue[] = [];
+  list.forEach((s: Partial<FunnelStage> | null, i) => {
+    if (!s || typeof s !== 'object') { out.push({ path: `${path}[${i}]`, message: 'Each stage is { name, count }.' }); return; }
+    if (typeof s.name !== 'string' || !s.name.trim()) out.push({ path: `${path}[${i}].name`, message: 'Every stage needs a name.' });
+    if (typeof s.count !== 'number' || !Number.isFinite(s.count) || s.count < 0) out.push({ path: `${path}[${i}].count`, message: 'count is a number, 0 or more.' });
+  });
+  return out;
+}
+
+export function validateConversionFunnel(c: ConversionFunnelSettings): OnboardingIssue[] {
+  if (!c || typeof c !== 'object') return [{ path: 'config', message: 'must be an object.' }];
+  const issues = stageIssues(c.stages, 'stages');
+  if (c.data && typeof c.data === 'object') for (const [p, list] of Object.entries(c.data)) issues.push(...stageIssues(list, `data.${p}`));
+  if (c.periods !== null && c.periods !== undefined) {
+    if (!Array.isArray(c.periods) || c.periods.some(p => typeof p !== 'string')) issues.push({ path: 'periods', message: 'periods is a list of period names.' });
+    else if (c.periods.length > 1 && (typeof c.period !== 'string' || !c.periods.includes(c.period))) issues.push({ path: 'period', message: `“${String(c.period)}” is not one of the periods.` });
+  }
+  return issues;
+}

package/src/components/onboarding/conversion-funnel/engine.ts

@@ -0,0 +1,65 @@
+import { compactCount, grouped } from '../shared/m15';
+import type { ConversionFunnelSettings, FunnelScene, FunnelStage } from './contract';
+
+/** **The Conversion Funnel engine** — pure: the stages now, their shares, drops and the worst step. */
+
+export type FunnelState = { period: string | null; loadReady: boolean };
+export type FunnelSeed = Partial<FunnelState>;
+
+export const initialFunnel = (c: ConversionFunnelSettings, seed: FunnelSeed = {}): FunnelState => ({ period: seed.period ?? c.period ?? null, loadReady: seed.loadReady ?? false });
+
+export function funnelSeed(c: ConversionFunnelSettings, scene: FunnelScene): FunnelSeed {
+  if (scene === 'switchPeriod' && c.periods && c.periods.length > 1) {
+    const i = c.periods.indexOf(c.period ?? '');
+    return { period: c.periods[(i + 1) % c.periods.length]! };
+  }
+  if (scene === 'loadReady') return { loadReady: true };
+  return {};
+}
+
+export const stagesOf = (c: ConversionFunnelSettings, s: FunnelState): FunnelStage[] =>
+  ((s.period && c.data && c.data[s.period]) || c.stages.filter(x => !x.period || !s.period || x.period === s.period)).map((x, i) => ({ ...x, id: x.id ?? `s${i}` }));
+
+export type FunnelRow = {
+  id: string; name: string; count: number;
+  /** count ÷ the first stage (0–1). */
+  share: number;
+  countText: string; shareText: string;
+  /** Before this stage (none for the first): "88% drop-off", or "+12% gain" when it grew. */
+  connector: { text: string; gain: boolean; worst: boolean } | null;
+  valueText: string;
+  tooltip: string;
+};
+
+export function funnelRows(c: ConversionFunnelSettings, s: FunnelState): { rows: FunnelRow[]; worst: number; overall: number } {
+  const list = stagesOf(c, s);
+  const first = list[0]?.count ?? 0;
+  /* The biggest drop — the first one wins a tie; a gain is never a drop. */
+  let worst = -1, wv = -1;
+  list.forEach((x, i) => {
+    if (i === 0) return;
+    const prev = list[i - 1]!.count;
+    const d = prev ? 1 - x.count / prev : 0;
+    if (x.count <= prev && d > wv) { wv = d; worst = i; }
+  });
+  const firstName = (list[0]?.name ?? '').toLowerCase();
+  const rows = list.map((x, i) => {
+    const share = first ? x.count / first : 0;
+    const prev = i ? list[i - 1]! : null;
+    let connector: FunnelRow['connector'] = null;
+    if (prev) {
+      const gain = x.count > prev.count;
+      const p = prev.count ? Math.round(Math.abs(1 - x.count / prev.count) * 100) : 0;
+      connector = { text: gain ? `+${p}% gain` : `${p}% drop-off`, gain, worst: i === worst };
+    }
+    const ofPrev = prev && prev.count ? `${Math.round((x.count / prev.count) * 100)}% of ${prev.name.toLowerCase()}` : null;
+    const shareText = `${(share * 100).toFixed(1)}%`;
+    return {
+      id: x.id ?? `s${i}`, name: x.name, count: x.count, share, countText: compactCount(x.count), shareText, connector,
+      valueText: `${x.name}, ${grouped(x.count)}, ${shareText} of ${firstName}`,
+      tooltip: [x.name, grouped(x.count), `${shareText} of ${firstName}`, ofPrev].filter(Boolean).join(' · '),
+    };
+  });
+  const overall = list.length > 1 && first ? (list[list.length - 1]!.count / first) * 100 : 0;
+  return { rows, worst, overall };
+}

package/src/components/onboarding/conversion-funnel/index.ts

@@ -0,0 +1,3 @@
+export { FUNNEL_IN_FLIGHT, FUNNEL_PRESETS, FUNNEL_SCENES, validateConversionFunnel, type ConversionFunnelSettings, type FunnelScene, type FunnelStage } from './contract';
+export { funnelRows, funnelSeed, initialFunnel, stagesOf, type FunnelRow, type FunnelSeed, type FunnelState } from './engine';
+export { ConversionFunnel, type ConversionFunnelProps } from './ConversionFunnelView';