@milaboratories/miplots4 1.1.0 → 1.2.1

package/dist/selection/components/Chart/Dividers.d.ts

@@ -0,0 +1,8 @@
+import { StageInfo } from '../../createSelectionData';
+import { StageGeometry } from './types';
+export declare const Dividers: import('react').NamedExoticComponent<{
+    stages: StageInfo[];
+    geometry: StageGeometry;
+    suppressed: boolean;
+}>;
+//# sourceMappingURL=Dividers.d.ts.map

package/dist/selection/components/Chart/Dividers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dividers.d.ts","sourceRoot":"","sources":["../../../../src/selection/components/Chart/Dividers.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAE3D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAK7C,eAAO,MAAM,QAAQ;YAKX,SAAS,EAAE;cACT,aAAa;gBACX,OAAO;EA4BnB,CAAC"}

package/dist/selection/components/Chart/Dividers.js

@@ -0,0 +1,27 @@
+import { DIVIDER_STROKE as e } from "../../constants.js";
+import { toPercent as t } from "../../utils.js";
+import { memo as n } from "react";
+import { jsx as r } from "react/jsx-runtime";
+const i = n(function({ stages: n, geometry: i, suppressed: a }) {
+	if (a) return null;
+	let { xScale: o, yScale: s } = i, c = o.bandwidth(), l = [];
+	for (let [i, a] of n.entries()) {
+		if (a.total === 0) continue;
+		let n = a.surviving / a.total;
+		if (1 - n <= 0 || n <= 0) continue;
+		let u = o(String(i)) ?? 0, d = s(t(n));
+		l.push(/* @__PURE__ */ r("line", {
+			x1: u,
+			y1: d,
+			x2: u + c,
+			y2: d,
+			stroke: e,
+			strokeWidth: 1,
+			strokeDasharray: "4,3"
+		}, `div-${i}`));
+	}
+	return /* @__PURE__ */ r("g", { children: l });
+});
+export { i as Dividers };
+
+//# sourceMappingURL=Dividers.js.map

package/dist/selection/components/Chart/Dividers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dividers.js","names":[],"sources":["../../../../src/selection/components/Chart/Dividers.tsx"],"sourcesContent":["import { memo } from 'react';\nimport type { ReactElement } from 'react';\n\nimport { DIVIDER_STROKE } from '../../constants';\nimport type { StageInfo } from '../../createSelectionData';\nimport { toPercent } from '../../utils';\nimport type { StageGeometry } from './types';\n\n// Dashed line between preserved and discarded fractions, per stage. Suppressed\n// when a group is click-pinned (the vivid/desat overlay already shows the\n// boundary).\nexport const Dividers = memo(function Dividers({\n  stages,\n  geometry,\n  suppressed,\n}: {\n  stages: StageInfo[];\n  geometry: StageGeometry;\n  suppressed: boolean;\n}) {\n  if (suppressed) return null;\n  const { xScale, yScale } = geometry;\n  const barWidth = xScale.bandwidth();\n  const elements: ReactElement[] = [];\n\n  for (const [stageIndex, stage] of stages.entries()) {\n    if (stage.total === 0) continue;\n    const preservedFrac = stage.surviving / stage.total;\n    const discardedFrac = 1 - preservedFrac;\n    if (discardedFrac <= 0 || preservedFrac <= 0) continue;\n    const barLeft = xScale(String(stageIndex)) ?? 0;\n    const dividerY = yScale(toPercent(preservedFrac));\n    elements.push(\n      <line\n        key={`div-${stageIndex}`}\n        x1={barLeft}\n        y1={dividerY}\n        x2={barLeft + barWidth}\n        y2={dividerY}\n        stroke={DIVIDER_STROKE}\n        strokeWidth={1}\n        strokeDasharray=\"4,3\"\n      />,\n    );\n  }\n  return <g>{elements}</g>;\n});\n"],"mappings":";;;;AAWA,MAAa,IAAW,EAAK,SAAkB,EAC7C,WACA,aACA,iBAKC;AACD,KAAI,EAAY,QAAO;CACvB,IAAM,EAAE,WAAQ,cAAW,GACrB,IAAW,EAAO,WAAW,EAC7B,IAA2B,EAAE;AAEnC,MAAK,IAAM,CAAC,GAAY,MAAU,EAAO,SAAS,EAAE;AAClD,MAAI,EAAM,UAAU,EAAG;EACvB,IAAM,IAAgB,EAAM,YAAY,EAAM;AAE9C,MADsB,IAAI,KACL,KAAK,KAAiB,EAAG;EAC9C,IAAM,IAAU,EAAO,OAAO,EAAW,CAAC,IAAI,GACxC,IAAW,EAAO,EAAU,EAAc,CAAC;AACjD,IAAS,KACP,kBAAC,QAAD;GAEE,IAAI;GACJ,IAAI;GACJ,IAAI,IAAU;GACd,IAAI;GACJ,QAAQ;GACR,aAAa;GACb,iBAAgB;GAChB,EARK,OAAO,IAQZ,CACH;;AAEH,QAAO,kBAAC,KAAD,EAAA,UAAI,GAAa,CAAA;EACxB"}

package/dist/selection/components/Chart/Gridlines.d.ts

@@ -0,0 +1,10 @@
+import { ScaleBand, ScaleLinear } from 'd3-scale';
+export declare const Gridlines: import('react').NamedExoticComponent<{
+    xScale: ScaleBand<string>;
+    yScale: ScaleLinear<number, number>;
+    width: number;
+    height: number;
+    xShow: boolean;
+    yShow: boolean;
+}>;
+//# sourceMappingURL=Gridlines.d.ts.map

package/dist/selection/components/Chart/Gridlines.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Gridlines.d.ts","sourceRoot":"","sources":["../../../../src/selection/components/Chart/Gridlines.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAMvD,eAAO,MAAM,SAAS;YAQZ,SAAS,CAAC,MAAM,CAAC;YACjB,WAAW,CAAC,MAAM,EAAE,MAAM,CAAC;WAC5B,MAAM;YACL,MAAM;WACP,OAAO;WACP,OAAO;EA0Bd,CAAC"}

package/dist/selection/components/Chart/Gridlines.js

@@ -0,0 +1,32 @@
+import "../../../constants.js";
+import { memo as e } from "react";
+import { Fragment as t, jsx as n, jsxs as r } from "react/jsx-runtime";
+const i = e(function({ xScale: e, yScale: i, width: a, height: o, xShow: s, yShow: c }) {
+	return /* @__PURE__ */ r(t, { children: [c && /* @__PURE__ */ n("g", {
+		stroke: "#E1E3EB",
+		children: i.ticks().map((e) => {
+			let t = i(e);
+			return /* @__PURE__ */ n("line", {
+				x1: 0,
+				x2: a,
+				y1: t,
+				y2: t
+			}, `yg-${t}`);
+		})
+	}), s && /* @__PURE__ */ n("g", {
+		stroke: "#E1E3EB",
+		strokeWidth: 1,
+		children: e.domain().slice(0, -1).map((t, r) => {
+			let i = e.domain()[r + 1], a = ((e(t) ?? 0) + (e(i) ?? 0) + e.bandwidth()) / 2;
+			return /* @__PURE__ */ n("line", {
+				x1: a,
+				x2: a,
+				y1: 0,
+				y2: o
+			}, `xg-${t}`);
+		})
+	})] });
+});
+export { i as Gridlines };
+
+//# sourceMappingURL=Gridlines.js.map

package/dist/selection/components/Chart/Gridlines.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Gridlines.js","names":[],"sources":["../../../../src/selection/components/Chart/Gridlines.tsx"],"sourcesContent":["import type { ScaleBand, ScaleLinear } from 'd3-scale';\nimport { memo } from 'react';\n\nimport { GRID_GRAY } from '../../../constants';\n\n// X gridlines run between stages (not under bars); Y gridlines at every tick.\nexport const Gridlines = memo(function Gridlines({\n  xScale,\n  yScale,\n  width,\n  height,\n  xShow,\n  yShow,\n}: {\n  xScale: ScaleBand<string>;\n  yScale: ScaleLinear<number, number>;\n  width: number;\n  height: number;\n  xShow: boolean;\n  yShow: boolean;\n}) {\n  return (\n    <>\n      {yShow && (\n        <g stroke={GRID_GRAY}>\n          {yScale.ticks().map((tick) => {\n            const y = yScale(tick);\n            return <line key={`yg-${y}`} x1={0} x2={width} y1={y} y2={y} />;\n          })}\n        </g>\n      )}\n      {xShow && (\n        <g stroke={GRID_GRAY} strokeWidth={1}>\n          {xScale\n            .domain()\n            .slice(0, -1)\n            .map((tick, i) => {\n              const next = xScale.domain()[i + 1];\n              const x = ((xScale(tick) ?? 0) + (xScale(next) ?? 0) + xScale.bandwidth()) / 2;\n              return <line key={`xg-${tick}`} x1={x} x2={x} y1={0} y2={height} />;\n            })}\n        </g>\n      )}\n    </>\n  );\n});\n"],"mappings":";;;AAMA,MAAa,IAAY,EAAK,SAAmB,EAC/C,WACA,WACA,UACA,WACA,UACA,YAQC;AACD,QACE,kBAAA,GAAA,EAAA,UAAA,CACG,KACC,kBAAC,KAAD;EAAG,QAAA;YACA,EAAO,OAAO,CAAC,KAAK,MAAS;GAC5B,IAAM,IAAI,EAAO,EAAK;AACtB,UAAO,kBAAC,QAAD;IAAsB,IAAI;IAAG,IAAI;IAAO,IAAI;IAAG,IAAI;IAAK,EAA7C,MAAM,IAAuC;IAC/D;EACA,CAAA,EAEL,KACC,kBAAC,KAAD;EAAG,QAAA;EAAmB,aAAa;YAChC,EACE,QAAQ,CACR,MAAM,GAAG,GAAG,CACZ,KAAK,GAAM,MAAM;GAChB,IAAM,IAAO,EAAO,QAAQ,CAAC,IAAI,IAC3B,MAAM,EAAO,EAAK,IAAI,MAAM,EAAO,EAAK,IAAI,KAAK,EAAO,WAAW,IAAI;AAC7E,UAAO,kBAAC,QAAD;IAAyB,IAAI;IAAG,IAAI;IAAG,IAAI;IAAG,IAAI;IAAU,EAAjD,MAAM,IAA2C;IACnE;EACF,CAAA,CAEL,EAAA,CAAA;EAEL"}

package/dist/selection/components/Chart/Ribbons/GroupFlowRibbon.d.ts

@@ -0,0 +1,9 @@
+import { RibbonContext, StagePair } from '../types';
+export declare const GroupFlowRibbon: import('react').NamedExoticComponent<{
+    context: RibbonContext;
+    yScale: (v: number) => number;
+    stages: StagePair;
+    groupName: string;
+    color: string;
+}>;
+//# sourceMappingURL=GroupFlowRibbon.d.ts.map

package/dist/selection/components/Chart/Ribbons/GroupFlowRibbon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GroupFlowRibbon.d.ts","sourceRoot":"","sources":["../../../../../src/selection/components/Chart/Ribbons/GroupFlowRibbon.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAMzD,eAAO,MAAM,eAAe;aAOjB,aAAa;YACd,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM;YACrB,SAAS;eACN,MAAM;WACV,MAAM;EAkDb,CAAC"}

package/dist/selection/components/Chart/Ribbons/GroupFlowRibbon.js

@@ -0,0 +1,36 @@
+import { DESATURATE_ALPHA as e, RIBBON_OPACITY as t } from "../../../constants.js";
+import { toPercent as n } from "../../../utils.js";
+import { ribbonPath as r } from "./ribbonPath.js";
+import { memo as i } from "react";
+import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
+const c = i(function({ context: i, yScale: c, stages: l, groupName: u, color: d }) {
+	let { x0: f, x1: p, height: m, layerOpacity: h } = i, { current: g, next: _ } = l, v = g.groups.find((e) => e.name === u), y = _.groups.find((e) => e.name === u), b = (y?.surviving ?? 0) + (y?.discarded ?? 0), x = v?.surviving ?? 0;
+	if (x <= 0 || b <= 0) return null;
+	let S = (y?.surviving ?? 0) / b, C = c(n(x / g.total)), w = c(n(b / _.total)), T = w + (m - w) * (1 - S), E = C + (m - C) * (1 - S);
+	return /* @__PURE__ */ s(a, { children: [/* @__PURE__ */ o("path", {
+		d: r({
+			leftX: f,
+			leftYTop: C,
+			leftYBottom: E,
+			rightX: p,
+			rightYTop: w,
+			rightYBottom: T
+		}),
+		fill: d,
+		opacity: t * e * h
+	}), /* @__PURE__ */ o("path", {
+		d: r({
+			leftX: f,
+			leftYTop: E,
+			leftYBottom: m,
+			rightX: p,
+			rightYTop: T,
+			rightYBottom: m
+		}),
+		fill: d,
+		opacity: t * h
+	})] });
+});
+export { c as GroupFlowRibbon };
+
+//# sourceMappingURL=GroupFlowRibbon.js.map

package/dist/selection/components/Chart/Ribbons/GroupFlowRibbon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GroupFlowRibbon.js","names":[],"sources":["../../../../../src/selection/components/Chart/Ribbons/GroupFlowRibbon.tsx"],"sourcesContent":["import { memo } from 'react';\n\nimport { DESATURATE_ALPHA, RIBBON_OPACITY } from '../../../constants';\nimport { toPercent } from '../../../utils';\nimport type { RibbonContext, StagePair } from '../types';\nimport { ribbonPath } from './ribbonPath';\n\n// Single-group flow (used both for click-selected groups and hover-highlighted\n// groups). Two sub-bands in the group color: top sub-band is destined to be\n// discarded next stage (DESATURATE_ALPHA), bottom sub-band carries forward.\nexport const GroupFlowRibbon = memo(function GroupFlowRibbon({\n  context,\n  yScale,\n  stages,\n  groupName,\n  color,\n}: {\n  context: RibbonContext;\n  yScale: (v: number) => number;\n  stages: StagePair;\n  groupName: string;\n  color: string;\n}) {\n  const { x0, x1, height, layerOpacity } = context;\n  const { current: stage, next: nextStage } = stages;\n\n  const groupData = stage.groups.find((g) => g.name === groupName);\n  const nextGroupData = nextStage.groups.find((g) => g.name === groupName);\n  const nextGroupTotal = (nextGroupData?.surviving ?? 0) + (nextGroupData?.discarded ?? 0);\n  const surviving = groupData?.surviving ?? 0;\n  if (surviving <= 0 || nextGroupTotal <= 0) return null;\n\n  const nextSurvivingFrac = (nextGroupData?.surviving ?? 0) / nextGroupTotal;\n\n  const survivingFrac = surviving / stage.total;\n  const yTopSurviving = yScale(toPercent(survivingFrac));\n\n  const nextGroupFrac = nextGroupTotal / nextStage.total;\n  const yTopNextOverlay = yScale(toPercent(nextGroupFrac));\n  const yNextDivider = yTopNextOverlay + (height - yTopNextOverlay) * (1 - nextSurvivingFrac);\n\n  const splitY = yTopSurviving + (height - yTopSurviving) * (1 - nextSurvivingFrac);\n\n  return (\n    <>\n      <path\n        d={ribbonPath({\n          leftX: x0,\n          leftYTop: yTopSurviving,\n          leftYBottom: splitY,\n          rightX: x1,\n          rightYTop: yTopNextOverlay,\n          rightYBottom: yNextDivider,\n        })}\n        fill={color}\n        opacity={RIBBON_OPACITY * DESATURATE_ALPHA * layerOpacity}\n      />\n      <path\n        d={ribbonPath({\n          leftX: x0,\n          leftYTop: splitY,\n          leftYBottom: height,\n          rightX: x1,\n          rightYTop: yNextDivider,\n          rightYBottom: height,\n        })}\n        fill={color}\n        opacity={RIBBON_OPACITY * layerOpacity}\n      />\n    </>\n  );\n});\n"],"mappings":";;;;;AAUA,MAAa,IAAkB,EAAK,SAAyB,EAC3D,YACA,WACA,WACA,cACA,YAOC;CACD,IAAM,EAAE,OAAI,OAAI,WAAQ,oBAAiB,GACnC,EAAE,SAAS,GAAO,MAAM,MAAc,GAEtC,IAAY,EAAM,OAAO,MAAM,MAAM,EAAE,SAAS,EAAU,EAC1D,IAAgB,EAAU,OAAO,MAAM,MAAM,EAAE,SAAS,EAAU,EAClE,KAAkB,GAAe,aAAa,MAAM,GAAe,aAAa,IAChF,IAAY,GAAW,aAAa;AAC1C,KAAI,KAAa,KAAK,KAAkB,EAAG,QAAO;CAElD,IAAM,KAAqB,GAAe,aAAa,KAAK,GAGtD,IAAgB,EAAO,EADP,IAAY,EAAM,MACa,CAAC,EAGhD,IAAkB,EAAO,EADT,IAAiB,EAAU,MACM,CAAC,EAClD,IAAe,KAAmB,IAAS,MAAoB,IAAI,IAEnE,IAAS,KAAiB,IAAS,MAAkB,IAAI;AAE/D,QACE,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,QAAD;EACE,GAAG,EAAW;GACZ,OAAO;GACP,UAAU;GACV,aAAa;GACb,QAAQ;GACR,WAAW;GACX,cAAc;GACf,CAAC;EACF,MAAM;EACN,SAAS,IAAiB,IAAmB;EAC7C,CAAA,EACF,kBAAC,QAAD;EACE,GAAG,EAAW;GACZ,OAAO;GACP,UAAU;GACV,aAAa;GACb,QAAQ;GACR,WAAW;GACX,cAAc;GACf,CAAC;EACF,MAAM;EACN,SAAS,IAAiB;EAC1B,CAAA,CACD,EAAA,CAAA;EAEL"}

package/dist/selection/components/Chart/Ribbons/MultiGroupRibbon.d.ts

@@ -0,0 +1,6 @@
+import { RibbonContext } from '../types';
+export declare const MultiGroupRibbon: import('react').NamedExoticComponent<{
+    context: RibbonContext;
+    dividerY: number;
+}>;
+//# sourceMappingURL=MultiGroupRibbon.d.ts.map

package/dist/selection/components/Chart/Ribbons/MultiGroupRibbon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiGroupRibbon.d.ts","sourceRoot":"","sources":["../../../../../src/selection/components/Chart/Ribbons/MultiGroupRibbon.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAK9C,eAAO,MAAM,gBAAgB;aAIlB,aAAa;cACZ,MAAM;EAiBhB,CAAC"}

package/dist/selection/components/Chart/Ribbons/MultiGroupRibbon.js

@@ -0,0 +1,22 @@
+import { AGGREGATE_RIBBON_COLOR as e, RIBBON_OPACITY as t } from "../../../constants.js";
+import { ribbonPath as n } from "./ribbonPath.js";
+import { memo as r } from "react";
+import { jsx as i } from "react/jsx-runtime";
+const a = r(function({ context: r, dividerY: a }) {
+	let { x0: o, x1: s, height: c, layerOpacity: l } = r;
+	return /* @__PURE__ */ i("path", {
+		d: n({
+			leftX: o,
+			leftYTop: a,
+			leftYBottom: c,
+			rightX: s,
+			rightYTop: 0,
+			rightYBottom: c
+		}),
+		fill: e,
+		opacity: t * l
+	});
+});
+export { a as MultiGroupRibbon };
+
+//# sourceMappingURL=MultiGroupRibbon.js.map

package/dist/selection/components/Chart/Ribbons/MultiGroupRibbon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiGroupRibbon.js","names":[],"sources":["../../../../../src/selection/components/Chart/Ribbons/MultiGroupRibbon.tsx"],"sourcesContent":["import { memo } from 'react';\n\nimport { AGGREGATE_RIBBON_COLOR, RIBBON_OPACITY } from '../../../constants';\nimport type { RibbonContext } from '../types';\nimport { ribbonPath } from './ribbonPath';\n\n// Aggregating multiple group flows into one ribbon would imply a single color\n// where there isn't one — AGGREGATE_RIBBON_COLOR makes the ambiguity explicit.\nexport const MultiGroupRibbon = memo(function MultiGroupRibbon({\n  context,\n  dividerY,\n}: {\n  context: RibbonContext;\n  dividerY: number;\n}) {\n  const { x0, x1, height, layerOpacity } = context;\n  return (\n    <path\n      d={ribbonPath({\n        leftX: x0,\n        leftYTop: dividerY,\n        leftYBottom: height,\n        rightX: x1,\n        rightYTop: 0,\n        rightYBottom: height,\n      })}\n      fill={AGGREGATE_RIBBON_COLOR}\n      opacity={RIBBON_OPACITY * layerOpacity}\n    />\n  );\n});\n"],"mappings":";;;;AAQA,MAAa,IAAmB,EAAK,SAA0B,EAC7D,YACA,eAIC;CACD,IAAM,EAAE,OAAI,OAAI,WAAQ,oBAAiB;AACzC,QACE,kBAAC,QAAD;EACE,GAAG,EAAW;GACZ,OAAO;GACP,UAAU;GACV,aAAa;GACb,QAAQ;GACR,WAAW;GACX,cAAc;GACf,CAAC;EACF,MAAM;EACN,SAAS,IAAiB;EAC1B,CAAA;EAEJ"}

package/dist/selection/components/Chart/Ribbons/SimpleRibbon.d.ts

@@ -0,0 +1,10 @@
+import { RibbonContext } from '../types';
+export declare const SimpleRibbon: import('react').NamedExoticComponent<{
+    context: RibbonContext;
+    dividerY: number;
+    nextDividerY: number;
+    nextSurvFrac: number;
+    color: string;
+    drawSurvivingBand: boolean;
+}>;
+//# sourceMappingURL=SimpleRibbon.d.ts.map

package/dist/selection/components/Chart/Ribbons/SimpleRibbon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SimpleRibbon.d.ts","sourceRoot":"","sources":["../../../../../src/selection/components/Chart/Ribbons/SimpleRibbon.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAK9C,eAAO,MAAM,YAAY;aAQd,aAAa;cACZ,MAAM;kBACF,MAAM;kBACN,MAAM;WACb,MAAM;uBACM,OAAO;EAoC1B,CAAC"}

package/dist/selection/components/Chart/Ribbons/SimpleRibbon.js

@@ -0,0 +1,33 @@
+import { DESATURATE_ALPHA as e, RIBBON_OPACITY as t } from "../../../constants.js";
+import { ribbonPath as n } from "./ribbonPath.js";
+import { memo as r } from "react";
+import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
+const s = r(function({ context: r, dividerY: s, nextDividerY: c, nextSurvFrac: l, color: u, drawSurvivingBand: d }) {
+	let { x0: f, x1: p, height: m, layerOpacity: h } = r, g = s + (m - s) * (1 - l);
+	return /* @__PURE__ */ o(i, { children: [/* @__PURE__ */ a("path", {
+		d: n({
+			leftX: f,
+			leftYTop: s,
+			leftYBottom: g,
+			rightX: p,
+			rightYTop: 0,
+			rightYBottom: c
+		}),
+		fill: u,
+		opacity: t * e * h
+	}), d && /* @__PURE__ */ a("path", {
+		d: n({
+			leftX: f,
+			leftYTop: g,
+			leftYBottom: m,
+			rightX: p,
+			rightYTop: c,
+			rightYBottom: m
+		}),
+		fill: u,
+		opacity: .25 * h
+	})] });
+});
+export { s as SimpleRibbon };
+
+//# sourceMappingURL=SimpleRibbon.js.map

package/dist/selection/components/Chart/Ribbons/SimpleRibbon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SimpleRibbon.js","names":[],"sources":["../../../../../src/selection/components/Chart/Ribbons/SimpleRibbon.tsx"],"sourcesContent":["import { memo } from 'react';\n\nimport { DESATURATE_ALPHA, RIBBON_OPACITY } from '../../../constants';\nimport type { RibbonContext } from '../types';\nimport { ribbonPath } from './ribbonPath';\n\n// Two sub-bands of the overall preserved population: top (discarded next),\n// bottom (carries forward). Used for ungrouped charts and single-group facets.\nexport const SimpleRibbon = memo(function SimpleRibbon({\n  context,\n  dividerY,\n  nextDividerY,\n  nextSurvFrac,\n  color,\n  drawSurvivingBand,\n}: {\n  context: RibbonContext;\n  dividerY: number;\n  nextDividerY: number;\n  nextSurvFrac: number;\n  color: string;\n  drawSurvivingBand: boolean;\n}) {\n  const { x0, x1, height, layerOpacity } = context;\n  const preservedHeight = height - dividerY;\n  const splitY = dividerY + preservedHeight * (1 - nextSurvFrac);\n\n  return (\n    <>\n      <path\n        d={ribbonPath({\n          leftX: x0,\n          leftYTop: dividerY,\n          leftYBottom: splitY,\n          rightX: x1,\n          rightYTop: 0,\n          rightYBottom: nextDividerY,\n        })}\n        fill={color}\n        opacity={RIBBON_OPACITY * DESATURATE_ALPHA * layerOpacity}\n      />\n      {drawSurvivingBand && (\n        <path\n          d={ribbonPath({\n            leftX: x0,\n            leftYTop: splitY,\n            leftYBottom: height,\n            rightX: x1,\n            rightYTop: nextDividerY,\n            rightYBottom: height,\n          })}\n          fill={color}\n          opacity={RIBBON_OPACITY * layerOpacity}\n        />\n      )}\n    </>\n  );\n});\n"],"mappings":";;;;AAQA,MAAa,IAAe,EAAK,SAAsB,EACrD,YACA,aACA,iBACA,iBACA,UACA,wBAQC;CACD,IAAM,EAAE,OAAI,OAAI,WAAQ,oBAAiB,GAEnC,IAAS,KADS,IAAS,MACY,IAAI;AAEjD,QACE,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,QAAD;EACE,GAAG,EAAW;GACZ,OAAO;GACP,UAAU;GACV,aAAa;GACb,QAAQ;GACR,WAAW;GACX,cAAc;GACf,CAAC;EACF,MAAM;EACN,SAAS,IAAiB,IAAmB;EAC7C,CAAA,EACD,KACC,kBAAC,QAAD;EACE,GAAG,EAAW;GACZ,OAAO;GACP,UAAU;GACV,aAAa;GACb,QAAQ;GACR,WAAW;GACX,cAAc;GACf,CAAC;EACF,MAAM;EACN,SAAA,MAA0B;EAC1B,CAAA,CAEH,EAAA,CAAA;EAEL"}

package/dist/selection/components/Chart/Ribbons/StackedGroupFlowRibbon.d.ts

@@ -0,0 +1,10 @@
+import { RibbonContext, StagePair } from '../types';
+export declare const StackedGroupFlowRibbon: import('react').NamedExoticComponent<{
+    context: RibbonContext;
+    yScale: (v: number) => number;
+    stages: StagePair;
+    stackOrder: string[];
+    groupName: string;
+    color: string;
+}>;
+//# sourceMappingURL=StackedGroupFlowRibbon.d.ts.map

package/dist/selection/components/Chart/Ribbons/StackedGroupFlowRibbon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StackedGroupFlowRibbon.d.ts","sourceRoot":"","sources":["../../../../../src/selection/components/Chart/Ribbons/StackedGroupFlowRibbon.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAQzD,eAAO,MAAM,sBAAsB;aAQxB,aAAa;YACd,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM;YACrB,SAAS;gBACL,MAAM,EAAE;eACT,MAAM;WACV,MAAM;EAgGb,CAAC"}

package/dist/selection/components/Chart/Ribbons/StackedGroupFlowRibbon.js

@@ -0,0 +1,65 @@
+import "../../../constants.js";
+import { toPercent as e } from "../../../utils.js";
+import { ribbonPath as t } from "./ribbonPath.js";
+import { memo as n } from "react";
+import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
+const o = n(function({ context: n, yScale: o, stages: s, stackOrder: c, groupName: l, color: u }) {
+	let { x0: d, x1: f, height: p, layerOpacity: m } = n, { current: h, next: g } = s, _ = new Map(h.groups.map((e) => [e.name, e])), v = h.total > 0 ? o(e(h.surviving / h.total)) : p, y = 0;
+	for (let e of c) {
+		let t = _.get(e);
+		if (!t) continue;
+		let n = t.surviving / h.total * p;
+		if (e === l) {
+			y = n;
+			break;
+		}
+		v += n;
+	}
+	if (y <= 0) return null;
+	let b = v, x = v + y, S = new Map(g.groups.map((e) => [e.name, e])), C = g.total > 0 ? o(e(g.surviving / g.total)) : p, w = 0, T = null, E = null;
+	for (let e of c) {
+		let t = S.get(e);
+		if (!t) continue;
+		let n = t.surviving / g.total * p, r = t.discarded / g.total * p;
+		if (e === l) {
+			T = n > 0 ? {
+				top: C,
+				bottom: C + n
+			} : null, E = r > 0 ? {
+				top: w,
+				bottom: w + r
+			} : null;
+			break;
+		}
+		C += n, w += r;
+	}
+	let D = S.get(l), O = D?.surviving ?? 0, k = D?.discarded ?? 0, A = O + k;
+	if (A <= 0) return null;
+	let j = b + k / A * y;
+	return /* @__PURE__ */ a(r, { children: [E && k > 0 && /* @__PURE__ */ i("path", {
+		d: t({
+			leftX: d,
+			leftYTop: b,
+			leftYBottom: j,
+			rightX: f,
+			rightYTop: E.top,
+			rightYBottom: E.bottom
+		}),
+		fill: u,
+		opacity: .25 * .4 * m
+	}), T && O > 0 && /* @__PURE__ */ i("path", {
+		d: t({
+			leftX: d,
+			leftYTop: j,
+			leftYBottom: x,
+			rightX: f,
+			rightYTop: T.top,
+			rightYBottom: T.bottom
+		}),
+		fill: u,
+		opacity: .25 * m
+	})] });
+});
+export { o as StackedGroupFlowRibbon };
+
+//# sourceMappingURL=StackedGroupFlowRibbon.js.map

package/dist/selection/components/Chart/Ribbons/StackedGroupFlowRibbon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StackedGroupFlowRibbon.js","names":[],"sources":["../../../../../src/selection/components/Chart/Ribbons/StackedGroupFlowRibbon.tsx"],"sourcesContent":["import { memo } from 'react';\n\nimport { DESATURATE_ALPHA, RIBBON_OPACITY } from '../../../constants';\nimport { toPercent } from '../../../utils';\nimport type { RibbonContext, StagePair } from '../types';\nimport { ribbonPath } from './ribbonPath';\n\n// Hover-highlight ribbon for a single group in stacked layout. Connects the\n// group's preserved chunk in stage i (at its stacked Y position) to its\n// preserved+discarded chunks in stage i+1 (each at their own stacked Y\n// positions). Two sub-bands: top portion → discarded next (dimmer), bottom\n// portion → preserved next (vivid). Replaces the unified ribbon on hover.\nexport const StackedGroupFlowRibbon = memo(function StackedGroupFlowRibbon({\n  context,\n  yScale,\n  stages,\n  stackOrder,\n  groupName,\n  color,\n}: {\n  context: RibbonContext;\n  yScale: (v: number) => number;\n  stages: StagePair;\n  stackOrder: string[];\n  groupName: string;\n  color: string;\n}) {\n  const { x0, x1, height, layerOpacity } = context;\n  const { current: stage, next: nextStage } = stages;\n\n  // Stage i: walk stackOrder until we find the hovered group; track the\n  // running yP cursor (top of preserved area accumulating downward).\n  const stageGroupMap = new Map(stage.groups.map((g) => [g.name, g]));\n  const dividerY = stage.total > 0 ? yScale(toPercent(stage.surviving / stage.total)) : height;\n  let yPreserved = dividerY;\n  let groupSurvivingHeight = 0;\n  for (const name of stackOrder) {\n    const g = stageGroupMap.get(name);\n    if (!g) continue;\n    const h = (g.surviving / stage.total) * height;\n    if (name === groupName) {\n      groupSurvivingHeight = h;\n      break;\n    }\n    yPreserved += h;\n  }\n  if (groupSurvivingHeight <= 0) return null;\n  const yTop = yPreserved;\n  const yBottom = yPreserved + groupSurvivingHeight;\n\n  // Stage i+1: walk stackOrder for both preserved (yNextPreserved) and\n  // discarded (yNextDiscarded) accumulators in parallel; capture the hovered\n  // group's chunks.\n  const nextStageGroupMap = new Map(nextStage.groups.map((g) => [g.name, g]));\n  const nextDividerY =\n    nextStage.total > 0 ? yScale(toPercent(nextStage.surviving / nextStage.total)) : height;\n  let yNextPreserved = nextDividerY;\n  let yNextDiscarded = 0;\n  let nextPreservedRect: { top: number; bottom: number } | null = null;\n  let nextDiscardedRect: { top: number; bottom: number } | null = null;\n  for (const name of stackOrder) {\n    const g = nextStageGroupMap.get(name);\n    if (!g) continue;\n    const preservedHeight = (g.surviving / nextStage.total) * height;\n    const discardedHeight = (g.discarded / nextStage.total) * height;\n    if (name === groupName) {\n      nextPreservedRect =\n        preservedHeight > 0\n          ? { top: yNextPreserved, bottom: yNextPreserved + preservedHeight }\n          : null;\n      nextDiscardedRect =\n        discardedHeight > 0\n          ? { top: yNextDiscarded, bottom: yNextDiscarded + discardedHeight }\n          : null;\n      break;\n    }\n    yNextPreserved += preservedHeight;\n    yNextDiscarded += discardedHeight;\n  }\n\n  const nextGroupData = nextStageGroupMap.get(groupName);\n  const nextSurviving = nextGroupData?.surviving ?? 0;\n  const nextDiscarded = nextGroupData?.discarded ?? 0;\n  const nextGroupTotal = nextSurviving + nextDiscarded;\n  if (nextGroupTotal <= 0) return null;\n\n  // Split source proportionally: top portion → discarded next, bottom → preserved next.\n  const splitY = yTop + groupSurvivingHeight * (nextDiscarded / nextGroupTotal);\n\n  return (\n    <>\n      {nextDiscardedRect && nextDiscarded > 0 && (\n        <path\n          d={ribbonPath({\n            leftX: x0,\n            leftYTop: yTop,\n            leftYBottom: splitY,\n            rightX: x1,\n            rightYTop: nextDiscardedRect.top,\n            rightYBottom: nextDiscardedRect.bottom,\n          })}\n          fill={color}\n          opacity={RIBBON_OPACITY * DESATURATE_ALPHA * layerOpacity}\n        />\n      )}\n      {nextPreservedRect && nextSurviving > 0 && (\n        <path\n          d={ribbonPath({\n            leftX: x0,\n            leftYTop: splitY,\n            leftYBottom: yBottom,\n            rightX: x1,\n            rightYTop: nextPreservedRect.top,\n            rightYBottom: nextPreservedRect.bottom,\n          })}\n          fill={color}\n          opacity={RIBBON_OPACITY * layerOpacity}\n        />\n      )}\n    </>\n  );\n});\n"],"mappings":";;;;;AAYA,MAAa,IAAyB,EAAK,SAAgC,EACzE,YACA,WACA,WACA,eACA,cACA,YAQC;CACD,IAAM,EAAE,OAAI,OAAI,WAAQ,oBAAiB,GACnC,EAAE,SAAS,GAAO,MAAM,MAAc,GAItC,IAAgB,IAAI,IAAI,EAAM,OAAO,KAAK,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC,CAAC,EAE/D,IADa,EAAM,QAAQ,IAAI,EAAO,EAAU,EAAM,YAAY,EAAM,MAAM,CAAC,GAAG,GAElF,IAAuB;AAC3B,MAAK,IAAM,KAAQ,GAAY;EAC7B,IAAM,IAAI,EAAc,IAAI,EAAK;AACjC,MAAI,CAAC,EAAG;EACR,IAAM,IAAK,EAAE,YAAY,EAAM,QAAS;AACxC,MAAI,MAAS,GAAW;AACtB,OAAuB;AACvB;;AAEF,OAAc;;AAEhB,KAAI,KAAwB,EAAG,QAAO;CACtC,IAAM,IAAO,GACP,IAAU,IAAa,GAKvB,IAAoB,IAAI,IAAI,EAAU,OAAO,KAAK,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC,CAAC,EAGvE,IADF,EAAU,QAAQ,IAAI,EAAO,EAAU,EAAU,YAAY,EAAU,MAAM,CAAC,GAAG,GAE/E,IAAiB,GACjB,IAA4D,MAC5D,IAA4D;AAChE,MAAK,IAAM,KAAQ,GAAY;EAC7B,IAAM,IAAI,EAAkB,IAAI,EAAK;AACrC,MAAI,CAAC,EAAG;EACR,IAAM,IAAmB,EAAE,YAAY,EAAU,QAAS,GACpD,IAAmB,EAAE,YAAY,EAAU,QAAS;AAC1D,MAAI,MAAS,GAAW;AAKtB,GAJA,IACE,IAAkB,IACd;IAAE,KAAK;IAAgB,QAAQ,IAAiB;IAAiB,GACjE,MACN,IACE,IAAkB,IACd;IAAE,KAAK;IAAgB,QAAQ,IAAiB;IAAiB,GACjE;AACN;;AAGF,EADA,KAAkB,GAClB,KAAkB;;CAGpB,IAAM,IAAgB,EAAkB,IAAI,EAAU,EAChD,IAAgB,GAAe,aAAa,GAC5C,IAAgB,GAAe,aAAa,GAC5C,IAAiB,IAAgB;AACvC,KAAI,KAAkB,EAAG,QAAO;CAGhC,IAAM,IAAS,IAA+B,IAAgB,IAAxC;AAEtB,QACE,kBAAA,GAAA,EAAA,UAAA,CACG,KAAqB,IAAgB,KACpC,kBAAC,QAAD;EACE,GAAG,EAAW;GACZ,OAAO;GACP,UAAU;GACV,aAAa;GACb,QAAQ;GACR,WAAW,EAAkB;GAC7B,cAAc,EAAkB;GACjC,CAAC;EACF,MAAM;EACN,SAAA,MAAA,KAA6C;EAC7C,CAAA,EAEH,KAAqB,IAAgB,KACpC,kBAAC,QAAD;EACE,GAAG,EAAW;GACZ,OAAO;GACP,UAAU;GACV,aAAa;GACb,QAAQ;GACR,WAAW,EAAkB;GAC7B,cAAc,EAAkB;GACjC,CAAC;EACF,MAAM;EACN,SAAA,MAA0B;EAC1B,CAAA,CAEH,EAAA,CAAA;EAEL"}

package/dist/selection/components/Chart/Ribbons/ribbonPath.d.ts

@@ -0,0 +1,10 @@
+export type RibbonPathPoints = {
+    leftX: number;
+    leftYTop: number;
+    leftYBottom: number;
+    rightX: number;
+    rightYTop: number;
+    rightYBottom: number;
+};
+export declare function ribbonPath({ leftX, leftYTop, leftYBottom, rightX, rightYTop, rightYBottom, }: RibbonPathPoints): string;
+//# sourceMappingURL=ribbonPath.d.ts.map

package/dist/selection/components/Chart/Ribbons/ribbonPath.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ribbonPath.d.ts","sourceRoot":"","sources":["../../../../../src/selection/components/Chart/Ribbons/ribbonPath.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,QAAQ,EACR,WAAW,EACX,MAAM,EACN,SAAS,EACT,YAAY,GACb,EAAE,gBAAgB,GAAG,MAAM,CAS3B"}

package/dist/selection/components/Chart/Ribbons/ribbonPath.js

@@ -0,0 +1,13 @@
+function e({ leftX: e, leftYTop: t, leftYBottom: n, rightX: r, rightYTop: i, rightYBottom: a }) {
+	let o = (e + r) / 2;
+	return [
+		`M ${e} ${t}`,
+		`C ${o} ${t}, ${o} ${i}, ${r} ${i}`,
+		`L ${r} ${a}`,
+		`C ${o} ${a}, ${o} ${n}, ${e} ${n}`,
+		"Z"
+	].join(" ");
+}
+export { e as ribbonPath };
+
+//# sourceMappingURL=ribbonPath.js.map

package/dist/selection/components/Chart/Ribbons/ribbonPath.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ribbonPath.js","names":[],"sources":["../../../../../src/selection/components/Chart/Ribbons/ribbonPath.ts"],"sourcesContent":["export type RibbonPathPoints = {\n  leftX: number;\n  leftYTop: number;\n  leftYBottom: number;\n  rightX: number;\n  rightYTop: number;\n  rightYBottom: number;\n};\n\nexport function ribbonPath({\n  leftX,\n  leftYTop,\n  leftYBottom,\n  rightX,\n  rightYTop,\n  rightYBottom,\n}: RibbonPathPoints): string {\n  const midX = (leftX + rightX) / 2;\n  return [\n    `M ${leftX} ${leftYTop}`,\n    `C ${midX} ${leftYTop}, ${midX} ${rightYTop}, ${rightX} ${rightYTop}`,\n    `L ${rightX} ${rightYBottom}`,\n    `C ${midX} ${rightYBottom}, ${midX} ${leftYBottom}, ${leftX} ${leftYBottom}`,\n    'Z',\n  ].join(' ');\n}\n"],"mappings":"AASA,SAAgB,EAAW,EACzB,UACA,aACA,gBACA,WACA,cACA,mBAC2B;CAC3B,IAAM,KAAQ,IAAQ,KAAU;AAChC,QAAO;EACL,KAAK,EAAM,GAAG;EACd,KAAK,EAAK,GAAG,EAAS,IAAI,EAAK,GAAG,EAAU,IAAI,EAAO,GAAG;EAC1D,KAAK,EAAO,GAAG;EACf,KAAK,EAAK,GAAG,EAAa,IAAI,EAAK,GAAG,EAAY,IAAI,EAAM,GAAG;EAC/D;EACD,CAAC,KAAK,IAAI"}

package/dist/selection/components/Chart/Ribbons.d.ts

@@ -0,0 +1,9 @@
+import { StageInfo } from '../../createSelectionData';
+import { ChartStyle, GroupContext, StageGeometry } from './types';
+export declare const Ribbons: import('react').NamedExoticComponent<{
+    stages: StageInfo[];
+    geometry: StageGeometry;
+    groupCtx: GroupContext;
+    style: ChartStyle;
+}>;
+//# sourceMappingURL=Ribbons.d.ts.map

package/dist/selection/components/Chart/Ribbons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Ribbons.d.ts","sourceRoot":"","sources":["../../../../src/selection/components/Chart/Ribbons.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAM3D,OAAO,KAAK,EAAE,UAAU,EAAE,YAAY,EAAiB,aAAa,EAAE,MAAM,SAAS,CAAC;AAOtF,eAAO,MAAM,OAAO;YAMV,SAAS,EAAE;cACT,aAAa;cACb,YAAY;WACf,UAAU;EAmFjB,CAAC"}

package/dist/selection/components/Chart/Ribbons.js

@@ -0,0 +1,58 @@
+import { toPercent as e } from "../../utils.js";
+import { GroupFlowRibbon as t } from "./Ribbons/GroupFlowRibbon.js";
+import { MultiGroupRibbon as n } from "./Ribbons/MultiGroupRibbon.js";
+import { SimpleRibbon as r } from "./Ribbons/SimpleRibbon.js";
+import { StackedGroupFlowRibbon as i } from "./Ribbons/StackedGroupFlowRibbon.js";
+import { memo as a } from "react";
+import { jsx as o } from "react/jsx-runtime";
+const s = a(function({ stages: a, geometry: s, groupCtx: c, style: l }) {
+	let { xScale: u, yScale: d, height: f } = s, { grouped: p, groupNames: m, facetActiveGroup: h, facetHoveredGroup: g, stackOrder: _ } = c, { barColor: v, opacity: y, colorMap: b } = l, x = u.bandwidth(), S = p && m.length === 1 ? b.get(m[0]) ?? v : v, C = (t) => t.total > 0 ? d(e(t.surviving / t.total)) : f, w = [];
+	for (let [e, s] of a.entries()) {
+		if (s.total === 0 || e >= a.length - 1) continue;
+		let c = a[e + 1];
+		if (s.surviving <= 0 || c.total <= 0) continue;
+		let l = u(String(e)) ?? 0, T = u(String(e + 1)) ?? 0, E = {
+			x0: l + x,
+			x1: T,
+			height: f,
+			layerOpacity: y
+		}, D = {
+			current: s,
+			next: c
+		};
+		if (h && p) w.push(/* @__PURE__ */ o(t, {
+			context: E,
+			yScale: d,
+			stages: D,
+			groupName: h,
+			color: b.get(h) ?? v
+		}, `ribbon-${e}`));
+		else if (p && m.length > 1) g ? w.push(/* @__PURE__ */ o(i, {
+			context: E,
+			yScale: d,
+			stages: D,
+			stackOrder: _,
+			groupName: g,
+			color: b.get(g) ?? v
+		}, `ribbon-hover-${e}`)) : w.push(/* @__PURE__ */ o(n, {
+			context: E,
+			dividerY: C(s)
+		}, `ribbon-${e}`));
+		else {
+			let t = c.surviving, n = c.total;
+			if (n <= 0) continue;
+			w.push(/* @__PURE__ */ o(r, {
+				context: E,
+				dividerY: C(s),
+				nextDividerY: C(c),
+				nextSurvFrac: t / n,
+				color: S,
+				drawSurvivingBand: t > 0
+			}, `ribbon-${e}`));
+		}
+	}
+	return /* @__PURE__ */ o("g", { children: w });
+});
+export { s as Ribbons };
+
+//# sourceMappingURL=Ribbons.js.map

package/dist/selection/components/Chart/Ribbons.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Ribbons.js","names":[],"sources":["../../../../src/selection/components/Chart/Ribbons.tsx"],"sourcesContent":["import { memo } from 'react';\nimport type { ReactElement } from 'react';\n\nimport type { StageInfo } from '../../createSelectionData';\nimport { toPercent } from '../../utils';\nimport { GroupFlowRibbon } from './Ribbons/GroupFlowRibbon';\nimport { MultiGroupRibbon } from './Ribbons/MultiGroupRibbon';\nimport { SimpleRibbon } from './Ribbons/SimpleRibbon';\nimport { StackedGroupFlowRibbon } from './Ribbons/StackedGroupFlowRibbon';\nimport type { ChartStyle, GroupContext, RibbonContext, StageGeometry } from './types';\n\n// Picks the ribbon between stage i and stage i+1:\n//   - facetActiveGroup set      → GroupFlowRibbon (per-group flow, click-pinned)\n//   - hovered (multi-group)     → StackedGroupFlowRibbon (two-band hover ribbon)\n//   - grouped, no hover         → MultiGroupRibbon (unified background)\n//   - ungrouped / single group  → SimpleRibbon (preserved/discarded split)\nexport const Ribbons = memo(function Ribbons({\n  stages,\n  geometry,\n  groupCtx,\n  style,\n}: {\n  stages: StageInfo[];\n  geometry: StageGeometry;\n  groupCtx: GroupContext;\n  style: ChartStyle;\n}) {\n  const { xScale, yScale, height } = geometry;\n  const { grouped, groupNames, facetActiveGroup, facetHoveredGroup, stackOrder } = groupCtx;\n  const { barColor, opacity: layerOpacity, colorMap } = style;\n  const barWidth = xScale.bandwidth();\n\n  // Single-group facets (typical when facet column == grouping column) get\n  // the group's palette color so the simple ribbon matches the bars.\n  const splitRibbonColor =\n    grouped && groupNames.length === 1 ? (colorMap.get(groupNames[0]) ?? barColor) : barColor;\n\n  const dividerOfStage = (stage: StageInfo) =>\n    stage.total > 0 ? yScale(toPercent(stage.surviving / stage.total)) : height;\n\n  const elements: ReactElement[] = [];\n\n  for (const [stageIndex, stage] of stages.entries()) {\n    if (stage.total === 0) continue;\n    if (stageIndex >= stages.length - 1) continue;\n    const nextStage = stages[stageIndex + 1];\n    if (stage.surviving <= 0 || nextStage.total <= 0) continue;\n\n    const x = xScale(String(stageIndex)) ?? 0;\n    const xNext = xScale(String(stageIndex + 1)) ?? 0;\n    const context: RibbonContext = { x0: x + barWidth, x1: xNext, height, layerOpacity };\n    const stagePair = { current: stage, next: nextStage };\n\n    if (facetActiveGroup && grouped) {\n      elements.push(\n        <GroupFlowRibbon\n          key={`ribbon-${stageIndex}`}\n          context={context}\n          yScale={yScale}\n          stages={stagePair}\n          groupName={facetActiveGroup}\n          color={colorMap.get(facetActiveGroup) ?? barColor}\n        />,\n      );\n    } else if (grouped && groupNames.length > 1) {\n      // On hover, swap the unified background ribbon for the hovered group's\n      // two-band flow — focuses attention on one group instead of layering\n      // the highlight on top of the full ribbon.\n      if (facetHoveredGroup) {\n        elements.push(\n          <StackedGroupFlowRibbon\n            key={`ribbon-hover-${stageIndex}`}\n            context={context}\n            yScale={yScale}\n            stages={stagePair}\n            stackOrder={stackOrder}\n            groupName={facetHoveredGroup}\n            color={colorMap.get(facetHoveredGroup) ?? barColor}\n          />,\n        );\n      } else {\n        elements.push(\n          <MultiGroupRibbon\n            key={`ribbon-${stageIndex}`}\n            context={context}\n            dividerY={dividerOfStage(stage)}\n          />,\n        );\n      }\n    } else {\n      const nextSurv = nextStage.surviving;\n      const nextTotal = nextStage.total; // === stage.surviving\n      if (nextTotal <= 0) continue;\n      elements.push(\n        <SimpleRibbon\n          key={`ribbon-${stageIndex}`}\n          context={context}\n          dividerY={dividerOfStage(stage)}\n          nextDividerY={dividerOfStage(nextStage)}\n          nextSurvFrac={nextSurv / nextTotal}\n          color={splitRibbonColor}\n          drawSurvivingBand={nextSurv > 0}\n        />,\n      );\n    }\n  }\n\n  return <g>{elements}</g>;\n});\n"],"mappings":";;;;;;;AAgBA,MAAa,IAAU,EAAK,SAAiB,EAC3C,WACA,aACA,aACA,YAMC;CACD,IAAM,EAAE,WAAQ,WAAQ,cAAW,GAC7B,EAAE,YAAS,eAAY,qBAAkB,sBAAmB,kBAAe,GAC3E,EAAE,aAAU,SAAS,GAAc,gBAAa,GAChD,IAAW,EAAO,WAAW,EAI7B,IACJ,KAAW,EAAW,WAAW,IAAK,EAAS,IAAI,EAAW,GAAG,IAAI,IAAY,GAE7E,KAAkB,MACtB,EAAM,QAAQ,IAAI,EAAO,EAAU,EAAM,YAAY,EAAM,MAAM,CAAC,GAAG,GAEjE,IAA2B,EAAE;AAEnC,MAAK,IAAM,CAAC,GAAY,MAAU,EAAO,SAAS,EAAE;AAElD,MADI,EAAM,UAAU,KAChB,KAAc,EAAO,SAAS,EAAG;EACrC,IAAM,IAAY,EAAO,IAAa;AACtC,MAAI,EAAM,aAAa,KAAK,EAAU,SAAS,EAAG;EAElD,IAAM,IAAI,EAAO,OAAO,EAAW,CAAC,IAAI,GAClC,IAAQ,EAAO,OAAO,IAAa,EAAE,CAAC,IAAI,GAC1C,IAAyB;GAAE,IAAI,IAAI;GAAU,IAAI;GAAO;GAAQ;GAAc,EAC9E,IAAY;GAAE,SAAS;GAAO,MAAM;GAAW;AAErD,MAAI,KAAoB,EACtB,GAAS,KACP,kBAAC,GAAD;GAEW;GACD;GACR,QAAQ;GACR,WAAW;GACX,OAAO,EAAS,IAAI,EAAiB,IAAI;GACzC,EANK,UAAU,IAMf,CACH;WACQ,KAAW,EAAW,SAAS,EAIxC,CAAI,IACF,EAAS,KACP,kBAAC,GAAD;GAEW;GACD;GACR,QAAQ;GACI;GACZ,WAAW;GACX,OAAO,EAAS,IAAI,EAAkB,IAAI;GAC1C,EAPK,gBAAgB,IAOrB,CACH,GAED,EAAS,KACP,kBAAC,GAAD;GAEW;GACT,UAAU,EAAe,EAAM;GAC/B,EAHK,UAAU,IAGf,CACH;OAEE;GACL,IAAM,IAAW,EAAU,WACrB,IAAY,EAAU;AAC5B,OAAI,KAAa,EAAG;AACpB,KAAS,KACP,kBAAC,GAAD;IAEW;IACT,UAAU,EAAe,EAAM;IAC/B,cAAc,EAAe,EAAU;IACvC,cAAc,IAAW;IACzB,OAAO;IACP,mBAAmB,IAAW;IAC9B,EAPK,UAAU,IAOf,CACH;;;AAIL,QAAO,kBAAC,KAAD,EAAA,UAAI,GAAa,CAAA;EACxB"}

package/dist/selection/components/Chart/StageCounts.d.ts

@@ -0,0 +1,7 @@
+import { ScaleBand } from 'd3-scale';
+export declare const StageCounts: import('react').NamedExoticComponent<{
+    xScale: ScaleBand<string>;
+    counts: Record<string, string> | undefined;
+    fontSize?: number;
+}>;
+//# sourceMappingURL=StageCounts.d.ts.map

package/dist/selection/components/Chart/StageCounts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StageCounts.d.ts","sourceRoot":"","sources":["../../../../src/selection/components/Chart/StageCounts.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAO1C,eAAO,MAAM,WAAW;YAKd,SAAS,CAAC,MAAM,CAAC;YACjB,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,SAAS;eAC/B,MAAM;EAyBjB,CAAC"}

package/dist/selection/components/Chart/StageCounts.js

@@ -0,0 +1,20 @@
+import { FACET_LABEL_FILL as e } from "../../constants.js";
+import { memo as t } from "react";
+import { Fragment as n, jsx as r } from "react/jsx-runtime";
+const i = t(function({ xScale: t, counts: i, fontSize: a = 14 }) {
+	if (!i) return null;
+	let o = t.bandwidth() / 2;
+	return /* @__PURE__ */ r(n, { children: Object.keys(i).map((n) => /* @__PURE__ */ r("text", {
+		x: (t(n) ?? 0) + o,
+		y: -4,
+		textAnchor: "middle",
+		fontSize: `${a}px`,
+		fontWeight: "500",
+		fontFamily: "Manrope",
+		fill: e,
+		children: i[n]
+	}, `count-${n}`)) });
+});
+export { i as StageCounts };
+
+//# sourceMappingURL=StageCounts.js.map

package/dist/selection/components/Chart/StageCounts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StageCounts.js","names":[],"sources":["../../../../src/selection/components/Chart/StageCounts.tsx"],"sourcesContent":["import type { ScaleBand } from 'd3-scale';\nimport { memo } from 'react';\n\nimport { FACET_LABEL_FILL } from '../../constants';\n\n// Per-stage count labels above each bar (e.g. \"12k clones\"). Renders nothing\n// if `counts` is undefined.\nexport const StageCounts = memo(function StageCounts({\n  xScale,\n  counts,\n  fontSize = 14,\n}: {\n  xScale: ScaleBand<string>;\n  counts: Record<string, string> | undefined;\n  fontSize?: number;\n}) {\n  if (!counts) return null;\n  const halfBand = xScale.bandwidth() / 2;\n  return (\n    <>\n      {Object.keys(counts).map((key) => {\n        const x = (xScale(key) ?? 0) + halfBand;\n        return (\n          <text\n            key={`count-${key}`}\n            x={x}\n            y={-4}\n            textAnchor=\"middle\"\n            fontSize={`${fontSize}px`}\n            fontWeight=\"500\"\n            fontFamily=\"Manrope\"\n            fill={FACET_LABEL_FILL}\n          >\n            {counts[key]}\n          </text>\n        );\n      })}\n    </>\n  );\n});\n"],"mappings":";;;AAOA,MAAa,IAAc,EAAK,SAAqB,EACnD,WACA,WACA,cAAW,MAKV;AACD,KAAI,CAAC,EAAQ,QAAO;CACpB,IAAM,IAAW,EAAO,WAAW,GAAG;AACtC,QACE,kBAAA,GAAA,EAAA,UACG,OAAO,KAAK,EAAO,CAAC,KAAK,MAGtB,kBAAC,QAAD;EAEK,IAJI,EAAO,EAAI,IAAI,KAAK;EAK3B,GAAG;EACH,YAAW;EACX,UAAU,GAAG,EAAS;EACtB,YAAW;EACX,YAAW;EACX,MAAM;YAEL,EAAO;EACH,EAVA,SAAS,IAUT,CAET,EACD,CAAA;EAEL"}