@milaboratories/miplots4 1.1.0 → 1.2.1

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

@@ -0,0 +1,132 @@
+import { ScaleBand, ScaleLinear } from 'd3-scale';
+import { TooltipsData } from '../../../common/Tooltip';
+import { FrameType } from '../../../types';
+import { StageInfo } from '../../createSelectionData';
+/** Tooltip payload emitted on bar hover; consumed by Tooltip via Chart -> ChartsGroup. */
+export type StageTooltipData = {
+    stageIndex: number;
+    section: 'preserved' | 'discarded';
+    groupName?: string;
+    count: number;
+    total: number;
+    percent: number;
+    x: number;
+    y: number;
+};
+export type TooltipEnterParams = {
+    stageIndex: number;
+    section: 'preserved' | 'discarded';
+    stage: StageInfo;
+    anchorX: number;
+    anchorY: number;
+    groupName?: string;
+};
+/** Tooltip enter/leave callbacks shared across stage layers. */
+export type TooltipCallbacks = {
+    onEnter: (params: TooltipEnterParams) => void;
+    onLeave: () => void;
+};
+/** Geometry of one bar column. */
+export type BarGeometry = {
+    left: number;
+    width: number;
+    centerX: number;
+    height: number;
+    yScale: (v: number) => number;
+};
+/** Shared inputs every bar variant needs. */
+export type BarsCommon = {
+    stageIndex: number;
+    stage: StageInfo;
+    geometry: BarGeometry;
+    layerOpacity: number;
+    tooltip: TooltipCallbacks;
+};
+/** Horizontal extent + vertical bounds + opacity shared by every ribbon variant. */
+export type RibbonContext = {
+    x0: number;
+    x1: number;
+    height: number;
+    layerOpacity: number;
+};
+/** Adjacent stage data for ribbons that flow between two stages. */
+export type StagePair = {
+    current: StageInfo;
+    next: StageInfo;
+};
+/** Per-cell geometry — origin, size, scales, edge-suppression flags. */
+export type CellLayout = {
+    width: number;
+    height: number;
+    dimensionsLeft: number;
+    dimensionsTop: number;
+    paddingLeft: number;
+    paddingTop: number;
+    paddingBottom: number;
+    xScale: ScaleBand<string>;
+    yScale: ScaleLinear<number, number>;
+    /** When false, suppress the X-axis labels for this cell (non-bottom-edge faceted cells). */
+    showXAxis: boolean;
+    /** When false, suppress the Y-axis ticks for this cell (non-left-edge faceted cells). */
+    showYAxis: boolean;
+};
+/** Visual style applied uniformly to every cell. */
+export type ChartStyle = {
+    frameType?: FrameType;
+    barColor: string;
+    opacity: number;
+    colorMap: Map<string, string>;
+};
+/** Hover/click/tooltip wiring forwarded from ChartsGroup to each Chart cell. */
+export type ChartInteraction = {
+    hoveredGroup: string | null;
+    selectedGroup: string | null;
+    onGroupClick: (name: string) => void;
+    onGroupHover: (name: string | null) => void;
+    tooltipsData: TooltipsData<StageTooltipData>;
+    /** Facet key under which this Chart's tooltip enters/leaves register. */
+    facetKey?: string;
+};
+/** X-axis config + per-cell data (used by Chart). */
+export type ChartXAxis = {
+    labels: Record<string, string[]>;
+    counts?: Record<string, string>;
+    countsFontSize?: number;
+    labelsPosition?: 'center' | '45deg' | '90deg';
+    showGrid?: boolean;
+    showTicks?: boolean;
+    hiddenLabels?: boolean;
+    title?: string;
+};
+/** Y-axis config (used by Chart). */
+export type ChartYAxis = {
+    showGrid?: boolean;
+    showTicks?: boolean;
+    hiddenLabels?: boolean;
+    title?: string;
+};
+/** Per-stage rendering context — all bars/ribbons/dividers live in this coordinate space. */
+export type StageGeometry = {
+    xScale: ScaleBand<string>;
+    yScale: ScaleLinear<number, number>;
+    height: number;
+};
+/** Group-rendering inputs for the bar/ribbon dispatch. */
+export type GroupContext = {
+    grouped: boolean;
+    groupNames: string[];
+    /** Click-pinned active group, or null. Drives single-group rendering. */
+    facetActiveGroup: string | null;
+    /** Hovered group, or null. Drives the two-band hover ribbon. */
+    facetHoveredGroup: string | null;
+    /** Stage-stacking order (user-preferred, filtered to groups present in this facet). */
+    stackOrder: string[];
+};
+/** Per-stage event handlers shared across bars/ribbons/dividers. */
+export type StageHandlers = {
+    onGroupClick: (name: string) => void;
+    onGroupHover: (name: string | null) => void;
+    onTooltipEnter: (params: TooltipEnterParams) => void;
+    onTooltipLeave: () => void;
+};
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/selection/components/Chart/types.ts"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,22 @@
+import { AggregatedSelectionData } from '../createSelectionData';
+import { CellLayout, ChartInteraction, ChartStyle, ChartXAxis, ChartYAxis } from './Chart/types';
+export type { StageTooltipData } from './Chart/types';
+type Props = {
+    data: AggregatedSelectionData;
+    grouped: boolean;
+    /**
+     * User-preferred group iteration order (union across all facets) — drives
+     * stacked-bar rendering. When omitted, falls back to the per-facet
+     * `data.groupNames` order. Per-facet `data.groupNames` is alphabetical, so
+     * without this prop the user's chosen order in the Layers form has no
+     * effect on the chart.
+     */
+    orderedGroupNames?: string[];
+    layout: CellLayout;
+    xAxis: ChartXAxis;
+    yAxis: ChartYAxis;
+    style: ChartStyle;
+    interaction: ChartInteraction;
+};
+export declare const Chart: import('react').NamedExoticComponent<Props>;
+//# sourceMappingURL=Chart.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Chart.d.ts","sourceRoot":"","sources":["../../../src/selection/components/Chart.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,wBAAwB,CAAC;AAQtE,OAAO,KAAK,EACV,UAAU,EACV,gBAAgB,EAChB,UAAU,EACV,UAAU,EACV,UAAU,EAIX,MAAM,eAAe,CAAC;AAEvB,YAAY,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAEtD,KAAK,KAAK,GAAG;IACX,IAAI,EAAE,uBAAuB,CAAC;IAC9B,OAAO,EAAE,OAAO,CAAC;IACjB;;;;;;OAMG;IACH,iBAAiB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC7B,MAAM,EAAE,UAAU,CAAC;IACnB,KAAK,EAAE,UAAU,CAAC;IAClB,KAAK,EAAE,UAAU,CAAC;IAClB,KAAK,EAAE,UAAU,CAAC;IAClB,WAAW,EAAE,gBAAgB,CAAC;CAC/B,CAAC;AAEF,eAAO,MAAM,KAAK,6CAoGhB,CAAC"}

package/dist/selection/components/Chart.js

@@ -0,0 +1,97 @@
+import { useFunction as e } from "../../utils/hooks/useFunction.js";
+import { Bars as t } from "./Chart/Bars.js";
+import { ChartAxes as n } from "./Chart/ChartAxes.js";
+import { ChartFrame as r } from "./Chart/ChartFrame.js";
+import { Dividers as i } from "./Chart/Dividers.js";
+import { Gridlines as a } from "./Chart/Gridlines.js";
+import { Ribbons as o } from "./Chart/Ribbons.js";
+import { StageCounts as s } from "./Chart/StageCounts.js";
+import { memo as c } from "react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+const d = c(function({ data: c, grouped: d, orderedGroupNames: f, layout: p, xAxis: m, yAxis: h, style: g, interaction: _ }) {
+	let { stages: v, groupNames: y } = c;
+	if (v.length === 0) return null;
+	let { width: b, height: x, dimensionsLeft: S, dimensionsTop: C, paddingLeft: w, paddingTop: T, xScale: E, yScale: D } = p, { hoveredGroup: O, selectedGroup: k, onGroupClick: A, onGroupHover: j, tooltipsData: M, facetKey: N } = _, P = k && y.includes(k) ? k : null, F = O && y.includes(O) ? O : null, I = f ? f.filter((e) => y.includes(e)) : y, L = e(({ stageIndex: e, section: t, stage: n, anchorX: r, anchorY: i, groupName: a }) => {
+		let o = n.total, s = t === "preserved" ? n.surviving : n.discarded;
+		if (a) {
+			let e = n.groups.find((e) => e.name === a);
+			s = t === "preserved" ? e?.surviving ?? 0 : e?.discarded ?? 0;
+		}
+		M.onMouseEnter({
+			stageIndex: e,
+			section: t,
+			groupName: a,
+			count: s,
+			total: o,
+			percent: o > 0 ? s / o * 100 : 0,
+			x: r,
+			y: i
+		}, N);
+	}), R = e(() => M.onMouseLeave()), z = {
+		xScale: E,
+		yScale: D,
+		height: x
+	}, B = {
+		grouped: d,
+		groupNames: y,
+		facetActiveGroup: P,
+		facetHoveredGroup: F,
+		stackOrder: I
+	}, V = {
+		onGroupClick: A,
+		onGroupHover: j,
+		onTooltipEnter: L,
+		onTooltipLeave: R
+	}, H = m.showGrid ?? !1, U = h.showGrid ?? !0, W = g.frameType ?? "left-bottom";
+	return /* @__PURE__ */ u("g", {
+		transform: `translate(${S + w},${C + T})`,
+		children: [
+			/* @__PURE__ */ l(a, {
+				xScale: E,
+				yScale: D,
+				width: b,
+				height: x,
+				xShow: H,
+				yShow: U
+			}),
+			/* @__PURE__ */ l(o, {
+				stages: v,
+				geometry: z,
+				groupCtx: B,
+				style: g
+			}),
+			/* @__PURE__ */ l(t, {
+				stages: v,
+				geometry: z,
+				groupCtx: B,
+				style: g,
+				handlers: V
+			}),
+			/* @__PURE__ */ l(i, {
+				stages: v,
+				geometry: z,
+				suppressed: P !== null
+			}),
+			/* @__PURE__ */ l(r, {
+				width: b,
+				height: x,
+				frameType: W,
+				xShowGrid: H,
+				yShowGrid: U
+			}),
+			/* @__PURE__ */ l(s, {
+				xScale: E,
+				counts: m.counts,
+				fontSize: m.countsFontSize
+			}),
+			/* @__PURE__ */ l(n, {
+				layout: p,
+				xAxis: m,
+				yAxis: h
+			})
+		]
+	});
+});
+export { d as Chart };
+
+//# sourceMappingURL=Chart.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Chart.js","names":[],"sources":["../../../src/selection/components/Chart.tsx"],"sourcesContent":["import { memo } from 'react';\n\nimport { useFunction } from '../../utils/hooks/useFunction';\nimport type { AggregatedSelectionData } from '../createSelectionData';\nimport { Bars } from './Chart/Bars';\nimport { ChartAxes } from './Chart/ChartAxes';\nimport { ChartFrame } from './Chart/ChartFrame';\nimport { Dividers } from './Chart/Dividers';\nimport { Gridlines } from './Chart/Gridlines';\nimport { Ribbons } from './Chart/Ribbons';\nimport { StageCounts } from './Chart/StageCounts';\nimport type {\n  CellLayout,\n  ChartInteraction,\n  ChartStyle,\n  ChartXAxis,\n  ChartYAxis,\n  GroupContext,\n  StageHandlers,\n  TooltipEnterParams,\n} from './Chart/types';\n\nexport type { StageTooltipData } from './Chart/types';\n\ntype Props = {\n  data: AggregatedSelectionData;\n  grouped: boolean;\n  /**\n   * User-preferred group iteration order (union across all facets) — drives\n   * stacked-bar rendering. When omitted, falls back to the per-facet\n   * `data.groupNames` order. Per-facet `data.groupNames` is alphabetical, so\n   * without this prop the user's chosen order in the Layers form has no\n   * effect on the chart.\n   */\n  orderedGroupNames?: string[];\n  layout: CellLayout;\n  xAxis: ChartXAxis;\n  yAxis: ChartYAxis;\n  style: ChartStyle;\n  interaction: ChartInteraction;\n};\n\nexport const Chart = memo(function Chart({\n  data,\n  grouped,\n  orderedGroupNames,\n  layout,\n  xAxis,\n  yAxis,\n  style,\n  interaction,\n}: Props) {\n  const { stages, groupNames } = data;\n  if (stages.length === 0) return null;\n\n  const { width, height, dimensionsLeft, dimensionsTop, paddingLeft, paddingTop, xScale, yScale } =\n    layout;\n  const { hoveredGroup, selectedGroup, onGroupClick, onGroupHover, tooltipsData, facetKey } =\n    interaction;\n\n  // Click-pinned active group (only): drives single-group bar rendering.\n  // Hover never hides bars — only dims them and re-routes the ribbon flow.\n  const facetActiveGroup =\n    selectedGroup && groupNames.includes(selectedGroup) ? selectedGroup : null;\n  const facetHoveredGroup = hoveredGroup && groupNames.includes(hoveredGroup) ? hoveredGroup : null;\n  const stackOrder = orderedGroupNames\n    ? orderedGroupNames.filter((g) => groupNames.includes(g))\n    : groupNames;\n\n  const onTooltipEnter = useFunction(\n    ({ stageIndex, section, stage, anchorX, anchorY, groupName }: TooltipEnterParams) => {\n      const total = stage.total;\n      let count = section === 'preserved' ? stage.surviving : stage.discarded;\n      if (groupName) {\n        const g = stage.groups.find((gg) => gg.name === groupName);\n        count = section === 'preserved' ? (g?.surviving ?? 0) : (g?.discarded ?? 0);\n      }\n      tooltipsData.onMouseEnter(\n        {\n          stageIndex,\n          section,\n          groupName,\n          count,\n          total,\n          percent: total > 0 ? (count / total) * 100 : 0,\n          x: anchorX,\n          y: anchorY,\n        },\n        facetKey,\n      );\n    },\n  );\n  const onTooltipLeave = useFunction(() => tooltipsData.onMouseLeave());\n\n  const geometry = { xScale, yScale, height };\n  const groupCtx: GroupContext = {\n    grouped,\n    groupNames,\n    facetActiveGroup,\n    facetHoveredGroup,\n    stackOrder,\n  };\n  const handlers: StageHandlers = {\n    onGroupClick,\n    onGroupHover,\n    onTooltipEnter,\n    onTooltipLeave,\n  };\n  const xShowGrid = xAxis.showGrid ?? false;\n  const yShowGrid = yAxis.showGrid ?? true;\n  const frameType = style.frameType ?? 'left-bottom';\n\n  return (\n    <g transform={`translate(${dimensionsLeft + paddingLeft},${dimensionsTop + paddingTop})`}>\n      <Gridlines\n        xScale={xScale}\n        yScale={yScale}\n        width={width}\n        height={height}\n        xShow={xShowGrid}\n        yShow={yShowGrid}\n      />\n      <Ribbons stages={stages} geometry={geometry} groupCtx={groupCtx} style={style} />\n      <Bars\n        stages={stages}\n        geometry={geometry}\n        groupCtx={groupCtx}\n        style={style}\n        handlers={handlers}\n      />\n      <Dividers stages={stages} geometry={geometry} suppressed={facetActiveGroup !== null} />\n      <ChartFrame\n        width={width}\n        height={height}\n        frameType={frameType}\n        xShowGrid={xShowGrid}\n        yShowGrid={yShowGrid}\n      />\n      <StageCounts xScale={xScale} counts={xAxis.counts} fontSize={xAxis.countsFontSize} />\n      <ChartAxes layout={layout} xAxis={xAxis} yAxis={yAxis} />\n    </g>\n  );\n});\n"],"mappings":";;;;;;;;;;AA0CA,MAAa,IAAQ,EAAK,SAAe,EACvC,SACA,YACA,sBACA,WACA,UACA,UACA,UACA,kBACQ;CACR,IAAM,EAAE,WAAQ,kBAAe;AAC/B,KAAI,EAAO,WAAW,EAAG,QAAO;CAEhC,IAAM,EAAE,UAAO,WAAQ,mBAAgB,kBAAe,gBAAa,eAAY,WAAQ,cACrF,GACI,EAAE,iBAAc,kBAAe,iBAAc,iBAAc,iBAAc,gBAC7E,GAII,IACJ,KAAiB,EAAW,SAAS,EAAc,GAAG,IAAgB,MAClE,IAAoB,KAAgB,EAAW,SAAS,EAAa,GAAG,IAAe,MACvF,IAAa,IACf,EAAkB,QAAQ,MAAM,EAAW,SAAS,EAAE,CAAC,GACvD,GAEE,IAAiB,GACpB,EAAE,eAAY,YAAS,UAAO,YAAS,YAAS,mBAAoC;EACnF,IAAM,IAAQ,EAAM,OAChB,IAAQ,MAAY,cAAc,EAAM,YAAY,EAAM;AAC9D,MAAI,GAAW;GACb,IAAM,IAAI,EAAM,OAAO,MAAM,MAAO,EAAG,SAAS,EAAU;AAC1D,OAAQ,MAAY,cAAe,GAAG,aAAa,IAAM,GAAG,aAAa;;AAE3E,IAAa,aACX;GACE;GACA;GACA;GACA;GACA;GACA,SAAS,IAAQ,IAAK,IAAQ,IAAS,MAAM;GAC7C,GAAG;GACH,GAAG;GACJ,EACD,EACD;GAEJ,EACK,IAAiB,QAAkB,EAAa,cAAc,CAAC,EAE/D,IAAW;EAAE;EAAQ;EAAQ;EAAQ,EACrC,IAAyB;EAC7B;EACA;EACA;EACA;EACA;EACD,EACK,IAA0B;EAC9B;EACA;EACA;EACA;EACD,EACK,IAAY,EAAM,YAAY,IAC9B,IAAY,EAAM,YAAY,IAC9B,IAAY,EAAM,aAAa;AAErC,QACE,kBAAC,KAAD;EAAG,WAAW,aAAa,IAAiB,EAAY,GAAG,IAAgB,EAAW;YAAtF;GACE,kBAAC,GAAD;IACU;IACA;IACD;IACC;IACR,OAAO;IACP,OAAO;IACP,CAAA;GACF,kBAAC,GAAD;IAAiB;IAAkB;IAAoB;IAAiB;IAAS,CAAA;GACjF,kBAAC,GAAD;IACU;IACE;IACA;IACH;IACG;IACV,CAAA;GACF,kBAAC,GAAD;IAAkB;IAAkB;IAAU,YAAY,MAAqB;IAAQ,CAAA;GACvF,kBAAC,GAAD;IACS;IACC;IACG;IACA;IACA;IACX,CAAA;GACF,kBAAC,GAAD;IAAqB;IAAQ,QAAQ,EAAM;IAAQ,UAAU,EAAM;IAAkB,CAAA;GACrF,kBAAC,GAAD;IAAmB;IAAe;IAAc;IAAS,CAAA;GACvD;;EAEN"}

package/dist/selection/components/ChartsGroup.d.ts

@@ -0,0 +1,18 @@
+import { LegendData } from '../../common/types';
+import { ChartYAxis } from './Chart/types';
+import { ChartsGroupStyle, ChartsGroupTitle, ChartsGroupXAxis, FacetData, GridLayout } from './types';
+type Props = {
+    facetData: FacetData;
+    gridLayout: GridLayout;
+    xAxis: ChartsGroupXAxis;
+    yAxis: ChartYAxis;
+    style: ChartsGroupStyle;
+    title: ChartsGroupTitle;
+    legend: LegendData;
+    showFacetLabels: boolean;
+    grouped: boolean;
+    orderedGroupNames: string[];
+};
+export declare function ChartsGroup({ facetData, gridLayout, xAxis, yAxis, style, title, legend, showFacetLabels, grouped, orderedGroupNames, }: Props): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ChartsGroup.d.ts.map

package/dist/selection/components/ChartsGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartsGroup.d.ts","sourceRoot":"","sources":["../../../src/selection/components/ChartsGroup.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAKrD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAGhD,OAAO,KAAK,EACV,gBAAgB,EAChB,gBAAgB,EAChB,gBAAgB,EAChB,SAAS,EACT,UAAU,EACX,MAAM,SAAS,CAAC;AAajB,KAAK,KAAK,GAAG;IACX,SAAS,EAAE,SAAS,CAAC;IACrB,UAAU,EAAE,UAAU,CAAC;IACvB,KAAK,EAAE,gBAAgB,CAAC;IACxB,KAAK,EAAE,UAAU,CAAC;IAClB,KAAK,EAAE,gBAAgB,CAAC;IACxB,KAAK,EAAE,gBAAgB,CAAC;IACxB,MAAM,EAAE,UAAU,CAAC;IACnB,eAAe,EAAE,OAAO,CAAC;IACzB,OAAO,EAAE,OAAO,CAAC;IACjB,iBAAiB,EAAE,MAAM,EAAE,CAAC;CAC7B,CAAC;AAEF,wBAAgB,WAAW,CAAC,EAC1B,SAAS,EACT,UAAU,EACV,KAAK,EACL,KAAK,EACL,KAAK,EACL,KAAK,EACL,MAAM,EACN,eAAe,EACf,OAAO,EACP,iBAAiB,GAClB,EAAE,KAAK,2CAsOP"}

package/dist/selection/components/ChartsGroup.js

@@ -0,0 +1,181 @@
+import e from "../../common/fonts.js";
+import { Tooltip as t, useTooltip as n } from "../../common/Tooltip.js";
+import { ErrorBoundary as r } from "../../common/ErrorBoundary.js";
+import { ChartsTitle as i } from "../../common/ChartsTitle.js";
+import { Legend as a } from "../../common/Legend.js";
+import { getChartEdgeSides as o } from "../../utils/getChartEdgeSides.js";
+import { BAR_WIDTH_RATIO as s } from "../constants.js";
+import { formatCount as c } from "../utils.js";
+import { FacetCell as ee } from "./FacetCell.js";
+import { scaleBand as te, scaleLinear as l } from "d3-scale";
+import { useCallback as u, useEffect as ne, useMemo as d, useRef as re, useState as f } from "react";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
+var h = (e, t) => ({
+	col: e % t,
+	row: Math.floor(e / t)
+});
+function g(e, t) {
+	return e ? e === "null" ? t ?? "N/A" : e : "All";
+}
+function _({ facetData: _, gridLayout: ie, xAxis: v, yAxis: y, style: b, title: x, legend: S, showFacetLabels: ae, grouped: oe, orderedGroupNames: C }) {
+	let { faceted: w, facetLabels: T, facetTitles: E } = _, { nRows: D, nCols: O, totalWidth: k, totalHeight: A, margins: j, cellPlotWidth: M, cellPlotHeight: N, cellLabelHeight: P, topPad: F, rightPad: I, colLeftPads: L, rowBottomPads: R, colXOffsets: z, rowYOffsets: B, sharedX: V, sharedY: H } = ie, { nullValueLabel: U } = b, W = n(), [G, K] = f(null), [q, se] = f(null), [ce, le] = f(), J = re(null);
+	ne(() => {
+		J.current && le(J.current);
+	}, []);
+	let Y = u((e) => {
+		se((t) => t === e ? null : e), K(null), W.onClose();
+	}, [W]), X = k - j.left - j.right, ue = d(() => l().domain([0, 100]).range([N, 0]), [N]), Z = d(() => {
+		let e = w.byFacet[w.facetKeys[0]];
+		return e ? e.stages.map((e, t) => String(t)) : [];
+	}, [w]), de = d(() => {
+		let e = te().domain(Z).range([0, M]), t = Z.length;
+		if (t > 0) {
+			let n = Math.min(80, Math.max(12, M / t * s)), r = M / t, i = r > 0 ? Math.max(0, Math.min(.95, 1 - n / r)) : 0;
+			e.paddingInner(i), e.paddingOuter(i / 2);
+		}
+		return e;
+	}, [M, Z]), fe = j.left + X - I + 20, Q = j.top + F + P, pe = d(() => {
+		let e = W.selectedData;
+		if (!e) return [];
+		let t = e.section === "preserved" ? "Preserved" : "Discarded", n = g(e.groupName, U), r = (T[W.currentFacet] ?? []).join(" / ");
+		return [`${r ? `${r} · ${n}` : n} — ${t}`, `${c(e.count)} / ${c(e.total)} (${e.percent.toFixed(1)}%)`];
+	}, [
+		W.selectedData,
+		W.currentFacet,
+		T
+	]), $ = W.selectedData, me = d(() => {
+		if (!$) return {
+			left: 0,
+			right: 0,
+			top: 0,
+			bottom: 0
+		};
+		let { col: e, row: t } = h(w.facetKeys.indexOf(W.currentFacet), O), n = j.left + z[e], r = j.top + B[t], i = n + L[e], a = r + F + P;
+		return {
+			left: i,
+			right: k - i,
+			top: a,
+			bottom: A - a
+		};
+	}, [
+		$,
+		W.currentFacet,
+		w.facetKeys,
+		O,
+		j,
+		z,
+		B,
+		L,
+		F,
+		P,
+		k,
+		A
+	]), he = $?.x ?? 0, ge = $?.y ?? 0, _e = w.facetKeys.length;
+	return /* @__PURE__ */ p(r, {
+		dataId: "selection-chart",
+		children: /* @__PURE__ */ m("svg", {
+			xmlns: "http://www.w3.org/2000/svg",
+			viewBox: `0 0 ${k} ${A}`,
+			width: k,
+			height: A,
+			children: [
+				/* @__PURE__ */ p("defs", { children: e }),
+				/* @__PURE__ */ m("g", {
+					transform: `translate(${j.left},${j.top})`,
+					fontFamily: "Manrope",
+					children: [/* @__PURE__ */ p(i, {
+						title: x.text,
+						show: x.show,
+						position: x.position,
+						leftPadding: 0,
+						rightPadding: 0,
+						chartsWidth: X
+					}), w.facetKeys.map((e, t) => {
+						let { col: n, row: r } = h(t, O), i = w.byFacet[e];
+						if (!i) return null;
+						let a = o(t, _e, O, D), s = a.includes("left"), c = a.includes("bottom");
+						return /* @__PURE__ */ p("g", {
+							transform: `translate(${z[n]},${B[r]})`,
+							children: /* @__PURE__ */ p(ee, {
+								titleStrip: {
+									lines: E[e] ?? [],
+									show: ae,
+									x: L[n],
+									height: P
+								},
+								data: i,
+								grouped: oe,
+								orderedGroupNames: C,
+								layout: {
+									width: M,
+									height: N,
+									dimensionsLeft: 0,
+									dimensionsTop: P,
+									paddingLeft: L[n],
+									paddingTop: F,
+									paddingBottom: R[r],
+									xScale: de,
+									yScale: ue,
+									showXAxis: !V || c,
+									showYAxis: !H || s
+								},
+								xAxis: {
+									labels: v.labelsByFacet[e],
+									counts: v.countsByFacet[e],
+									countsFontSize: v.countsFontSize,
+									labelsPosition: v.labelsPosition,
+									showGrid: v.showGrid,
+									showTicks: v.showTicks,
+									hiddenLabels: v.hiddenLabels,
+									title: c ? v.title : ""
+								},
+								yAxis: {
+									showGrid: y.showGrid,
+									showTicks: y.showTicks,
+									hiddenLabels: y.hiddenLabels,
+									title: s ? y.title : ""
+								},
+								style: b,
+								interaction: {
+									hoveredGroup: G,
+									selectedGroup: q,
+									onGroupClick: Y,
+									onGroupHover: K,
+									tooltipsData: W,
+									facetKey: e
+								}
+							})
+						}, e);
+					})]
+				}),
+				/* @__PURE__ */ p("g", {
+					transform: `translate(${fe},${Q})`,
+					fontFamily: "Manrope",
+					children: /* @__PURE__ */ p(a, {
+						legendData: S,
+						onItemHover: K,
+						onItemClick: Y
+					})
+				}),
+				W.active && /* @__PURE__ */ p(t, {
+					content: pe,
+					x: he,
+					y: ge,
+					active: W.active,
+					fixed: W.fixed,
+					container: ce,
+					sideDistances: me,
+					onClose: W.onClose,
+					horizontal: !1
+				}),
+				/* @__PURE__ */ p("g", {
+					ref: J,
+					style: { outline: "none" }
+				})
+			]
+		})
+	});
+}
+export { _ as ChartsGroup };
+
+//# sourceMappingURL=ChartsGroup.js.map

package/dist/selection/components/ChartsGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartsGroup.js","names":[],"sources":["../../../src/selection/components/ChartsGroup.tsx"],"sourcesContent":["import { scaleBand, scaleLinear } from 'd3-scale';\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { ChartsTitle } from '../../common/ChartsTitle';\nimport { ErrorBoundary } from '../../common/ErrorBoundary';\nimport fonts from '../../common/fonts';\nimport { Legend } from '../../common/Legend';\nimport { Tooltip, useTooltip } from '../../common/Tooltip';\nimport type { LegendData } from '../../common/types';\nimport { getChartEdgeSides } from '../../utils/getChartEdgeSides';\nimport { BAR_WIDTH_RATIO, LEGEND_OFFSET, MAX_BAR_WIDTH, MIN_BAR_WIDTH } from '../constants';\nimport type { AggregatedSelectionData } from '../createSelectionData';\nimport { formatCount } from '../utils';\nimport type { ChartYAxis } from './Chart/types';\nimport { type StageTooltipData } from './Chart/types';\nimport { FacetCell } from './FacetCell';\nimport type {\n  ChartsGroupStyle,\n  ChartsGroupTitle,\n  ChartsGroupXAxis,\n  FacetData,\n  GridLayout,\n} from './types';\n\nconst facetPosition = (idx: number, nCols: number) => ({\n  col: idx % nCols,\n  row: Math.floor(idx / nCols),\n});\n\nfunction displayGroup(name: string | undefined, nullValueLabel: string | undefined): string {\n  if (!name) return 'All';\n  if (name === 'null') return nullValueLabel ?? 'N/A';\n  return name;\n}\n\ntype Props = {\n  facetData: FacetData;\n  gridLayout: GridLayout;\n  xAxis: ChartsGroupXAxis;\n  yAxis: ChartYAxis;\n  style: ChartsGroupStyle;\n  title: ChartsGroupTitle;\n  legend: LegendData;\n  showFacetLabels: boolean;\n  grouped: boolean;\n  orderedGroupNames: string[];\n};\n\nexport function ChartsGroup({\n  facetData,\n  gridLayout,\n  xAxis,\n  yAxis,\n  style,\n  title,\n  legend,\n  showFacetLabels,\n  grouped,\n  orderedGroupNames,\n}: Props) {\n  const { faceted, facetLabels, facetTitles } = facetData;\n  const {\n    nRows,\n    nCols,\n    totalWidth,\n    totalHeight,\n    margins,\n    cellPlotWidth,\n    cellPlotHeight,\n    cellLabelHeight,\n    topPad,\n    rightPad,\n    colLeftPads,\n    rowBottomPads,\n    colXOffsets,\n    rowYOffsets,\n    sharedX,\n    sharedY,\n  } = gridLayout;\n  const { nullValueLabel } = style;\n  const tooltipsData = useTooltip<StageTooltipData>();\n  const [hoveredGroup, setHoveredGroup] = useState<string | null>(null);\n  const [selectedGroup, setSelectedGroup] = useState<string | null>(null);\n  const [tooltipsContainer, setTooltipsContainer] = useState<SVGGElement>();\n  const tooltipsRef = useRef<SVGGElement>(null);\n\n  useEffect(() => {\n    if (tooltipsRef.current) setTooltipsContainer(tooltipsRef.current);\n  }, []);\n\n  // Clicking a bar swaps StackedBars ↔ GroupSelectedBars; the originally\n  // hovered <rect> unmounts mid-hover so its onMouseLeave never fires. Clear\n  // hover + tooltip state explicitly so the tooltip doesn't stay stuck.\n  const handleGroupClick = useCallback(\n    (name: string) => {\n      setSelectedGroup((prev) => (prev === name ? null : name));\n      setHoveredGroup(null);\n      tooltipsData.onClose();\n    },\n    [tooltipsData],\n  );\n\n  const chartsWidth = totalWidth - margins.left - margins.right;\n\n  // Shared y scale (percent 0..100 → pixels within the cell plot body).\n  const yScale = useMemo(\n    () => scaleLinear().domain([0, 100]).range([cellPlotHeight, 0]),\n    [cellPlotHeight],\n  );\n\n  // x scale uses stage count from the first non-empty facet. Stage lists\n  // should be identical across facets because valueLabelsMap drives them —\n  // but we still guard against empty.\n  const stageKeys = useMemo(() => {\n    const firstFacet: AggregatedSelectionData | undefined = faceted.byFacet[faceted.facetKeys[0]];\n    return firstFacet ? firstFacet.stages.map((_, i) => String(i)) : [];\n  }, [faceted]);\n  const xScale = useMemo(() => {\n    const s = scaleBand<string>().domain(stageKeys).range([0, cellPlotWidth]);\n    const nStages = stageKeys.length;\n    if (nStages > 0) {\n      const desiredBar = Math.min(\n        MAX_BAR_WIDTH,\n        Math.max(MIN_BAR_WIDTH, (cellPlotWidth / nStages) * BAR_WIDTH_RATIO),\n      );\n      const step = cellPlotWidth / nStages;\n      const paddingInner = step > 0 ? Math.max(0, Math.min(0.95, 1 - desiredBar / step)) : 0;\n      s.paddingInner(paddingInner);\n      s.paddingOuter(paddingInner / 2);\n    }\n    return s;\n  }, [cellPlotWidth, stageKeys]);\n\n  const legendLeft = margins.left + chartsWidth - rightPad + LEGEND_OFFSET;\n  const legendTop = margins.top + topPad + cellLabelHeight;\n\n  const tooltipContent = useMemo(() => {\n    const d = tooltipsData.selectedData;\n    if (!d) return [];\n    const sectionLabel = d.section === 'preserved' ? 'Preserved' : 'Discarded';\n    const groupLabel = displayGroup(d.groupName, nullValueLabel);\n    const facetLabel = (facetLabels[tooltipsData.currentFacet] ?? []).join(' / ');\n    const header = facetLabel ? `${facetLabel} · ${groupLabel}` : groupLabel;\n    return [\n      `${header} — ${sectionLabel}`,\n      `${formatCount(d.count)} / ${formatCount(d.total)} (${d.percent.toFixed(1)}%)`,\n    ];\n  }, [tooltipsData.selectedData, tooltipsData.currentFacet, facetLabels]);\n\n  // Tooltip side distances — computed relative to the active cell.\n  const active = tooltipsData.selectedData;\n  const sideDistances = useMemo(() => {\n    if (!active) return { left: 0, right: 0, top: 0, bottom: 0 };\n    const idx = faceted.facetKeys.indexOf(tooltipsData.currentFacet);\n    const { col, row } = facetPosition(idx, nCols);\n    const cellX = margins.left + colXOffsets[col];\n    const cellY = margins.top + rowYOffsets[row];\n    const plotOriginX = cellX + colLeftPads[col];\n    const plotOriginY = cellY + topPad + cellLabelHeight;\n    return {\n      left: plotOriginX,\n      right: totalWidth - plotOriginX,\n      top: plotOriginY,\n      bottom: totalHeight - plotOriginY,\n    };\n  }, [\n    active,\n    tooltipsData.currentFacet,\n    faceted.facetKeys,\n    nCols,\n    margins,\n    colXOffsets,\n    rowYOffsets,\n    colLeftPads,\n    topPad,\n    cellLabelHeight,\n    totalWidth,\n    totalHeight,\n  ]);\n\n  const tooltipAnchorX = active?.x ?? 0;\n  const tooltipAnchorY = active?.y ?? 0;\n\n  const n = faceted.facetKeys.length;\n\n  return (\n    <ErrorBoundary dataId=\"selection-chart\">\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox={`0 0 ${totalWidth} ${totalHeight}`}\n        width={totalWidth}\n        height={totalHeight}\n      >\n        <defs>{fonts}</defs>\n        <g transform={`translate(${margins.left},${margins.top})`} fontFamily=\"Manrope\">\n          <ChartsTitle\n            title={title.text}\n            show={title.show}\n            position={title.position}\n            leftPadding={0}\n            rightPadding={0}\n            chartsWidth={chartsWidth}\n          />\n          {faceted.facetKeys.map((fk, idx) => {\n            const { col, row } = facetPosition(idx, nCols);\n            const cellData = faceted.byFacet[fk];\n            if (!cellData) return null;\n            const edges = getChartEdgeSides(idx, n, nCols, nRows);\n            const isLeftEdge = edges.includes('left');\n            const isBottomEdge = edges.includes('bottom');\n            return (\n              <g key={fk} transform={`translate(${colXOffsets[col]},${rowYOffsets[row]})`}>\n                <FacetCell\n                  titleStrip={{\n                    lines: facetTitles[fk] ?? [],\n                    show: showFacetLabels,\n                    x: colLeftPads[col],\n                    height: cellLabelHeight,\n                  }}\n                  data={cellData}\n                  grouped={grouped}\n                  orderedGroupNames={orderedGroupNames}\n                  layout={{\n                    width: cellPlotWidth,\n                    height: cellPlotHeight,\n                    dimensionsLeft: 0,\n                    dimensionsTop: cellLabelHeight,\n                    paddingLeft: colLeftPads[col],\n                    paddingTop: topPad,\n                    paddingBottom: rowBottomPads[row],\n                    xScale,\n                    yScale,\n                    showXAxis: !sharedX || isBottomEdge,\n                    showYAxis: !sharedY || isLeftEdge,\n                  }}\n                  xAxis={{\n                    labels: xAxis.labelsByFacet[fk],\n                    counts: xAxis.countsByFacet[fk],\n                    countsFontSize: xAxis.countsFontSize,\n                    labelsPosition: xAxis.labelsPosition,\n                    showGrid: xAxis.showGrid,\n                    showTicks: xAxis.showTicks,\n                    hiddenLabels: xAxis.hiddenLabels,\n                    title: isBottomEdge ? xAxis.title : '',\n                  }}\n                  yAxis={{\n                    showGrid: yAxis.showGrid,\n                    showTicks: yAxis.showTicks,\n                    hiddenLabels: yAxis.hiddenLabels,\n                    title: isLeftEdge ? yAxis.title : '',\n                  }}\n                  style={style}\n                  interaction={{\n                    hoveredGroup,\n                    selectedGroup,\n                    onGroupClick: handleGroupClick,\n                    onGroupHover: setHoveredGroup,\n                    tooltipsData,\n                    facetKey: fk,\n                  }}\n                />\n              </g>\n            );\n          })}\n        </g>\n        <g transform={`translate(${legendLeft},${legendTop})`} fontFamily=\"Manrope\">\n          <Legend\n            legendData={legend}\n            onItemHover={setHoveredGroup}\n            onItemClick={handleGroupClick}\n          />\n        </g>\n        {tooltipsData.active && (\n          <Tooltip\n            content={tooltipContent}\n            x={tooltipAnchorX}\n            y={tooltipAnchorY}\n            active={tooltipsData.active}\n            fixed={tooltipsData.fixed}\n            container={tooltipsContainer}\n            sideDistances={sideDistances}\n            onClose={tooltipsData.onClose}\n            horizontal={false}\n          />\n        )}\n        <g ref={tooltipsRef} style={{ outline: 'none' }} />\n      </svg>\n    </ErrorBoundary>\n  );\n}\n"],"mappings":"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"}

package/dist/selection/components/FacetCell.d.ts

@@ -0,0 +1,22 @@
+import { AggregatedSelectionData } from '../createSelectionData';
+import { CellLayout, ChartInteraction, ChartStyle, ChartXAxis, ChartYAxis } from './Chart/types';
+type Props = {
+    /** Wrapped facet title rendered above the chart cell. */
+    titleStrip: {
+        lines: string[];
+        show: boolean;
+        x: number;
+        height: number;
+    };
+    data: AggregatedSelectionData;
+    grouped: boolean;
+    orderedGroupNames?: string[];
+    layout: CellLayout;
+    xAxis: ChartXAxis;
+    yAxis: ChartYAxis;
+    style: ChartStyle;
+    interaction: ChartInteraction;
+};
+export declare const FacetCell: import('react').NamedExoticComponent<Props>;
+export {};
+//# sourceMappingURL=FacetCell.d.ts.map

package/dist/selection/components/FacetCell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FacetCell.d.ts","sourceRoot":"","sources":["../../../src/selection/components/FacetCell.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,wBAAwB,CAAC;AAEtE,OAAO,KAAK,EACV,UAAU,EACV,gBAAgB,EAChB,UAAU,EACV,UAAU,EACV,UAAU,EACX,MAAM,eAAe,CAAC;AAEvB,KAAK,KAAK,GAAG;IACX,yDAAyD;IACzD,UAAU,EAAE;QAAE,KAAK,EAAE,MAAM,EAAE,CAAC;QAAC,IAAI,EAAE,OAAO,CAAC;QAAC,CAAC,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IAE1E,IAAI,EAAE,uBAAuB,CAAC;IAC9B,OAAO,EAAE,OAAO,CAAC;IACjB,iBAAiB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC7B,MAAM,EAAE,UAAU,CAAC;IACnB,KAAK,EAAE,UAAU,CAAC;IAClB,KAAK,EAAE,UAAU,CAAC;IAClB,KAAK,EAAE,UAAU,CAAC;IAClB,WAAW,EAAE,gBAAgB,CAAC;CAC/B,CAAC;AAGF,eAAO,MAAM,SAAS,6CAwBpB,CAAC"}

package/dist/selection/components/FacetCell.js

@@ -0,0 +1,18 @@
+import "../constants.js";
+import { Chart as e } from "./Chart.js";
+import { memo as t } from "react";
+import { Fragment as n, jsx as r, jsxs as i } from "react/jsx-runtime";
+const a = t(function({ titleStrip: t, ...a }) {
+	let o = t.height - 24 - (t.lines.length - 1) * 24;
+	return /* @__PURE__ */ i(n, { children: [t.show && t.lines.map((e, n) => /* @__PURE__ */ r("text", {
+		x: t.x,
+		y: o + n * 24,
+		fontSize: "20px",
+		fontWeight: "500",
+		fill: "#1c1c1c",
+		children: e
+	}, n)), /* @__PURE__ */ r(e, { ...a })] });
+});
+export { a as FacetCell };
+
+//# sourceMappingURL=FacetCell.js.map

package/dist/selection/components/FacetCell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FacetCell.js","names":[],"sources":["../../../src/selection/components/FacetCell.tsx"],"sourcesContent":["import { memo } from 'react';\n\nimport { FACET_LABEL_FILL, FACET_TITLE_LINE_HEIGHT, FACET_TITLE_OFFSET } from '../constants';\nimport type { AggregatedSelectionData } from '../createSelectionData';\nimport { Chart } from './Chart';\nimport type {\n  CellLayout,\n  ChartInteraction,\n  ChartStyle,\n  ChartXAxis,\n  ChartYAxis,\n} from './Chart/types';\n\ntype Props = {\n  /** Wrapped facet title rendered above the chart cell. */\n  titleStrip: { lines: string[]; show: boolean; x: number; height: number };\n  // Pass-through to Chart — ChartsGroup builds these per-cell.\n  data: AggregatedSelectionData;\n  grouped: boolean;\n  orderedGroupNames?: string[];\n  layout: CellLayout;\n  xAxis: ChartXAxis;\n  yAxis: ChartYAxis;\n  style: ChartStyle;\n  interaction: ChartInteraction;\n};\n\n// One faceted cell: facet title strip rendered above a single <Chart>.\nexport const FacetCell = memo(function FacetCell({ titleStrip, ...chartProps }: Props) {\n  const firstBaselineY =\n    titleStrip.height -\n    FACET_TITLE_OFFSET -\n    (titleStrip.lines.length - 1) * FACET_TITLE_LINE_HEIGHT;\n\n  return (\n    <>\n      {titleStrip.show &&\n        titleStrip.lines.map((line, lineIdx) => (\n          <text\n            key={lineIdx}\n            x={titleStrip.x}\n            y={firstBaselineY + lineIdx * FACET_TITLE_LINE_HEIGHT}\n            fontSize=\"20px\"\n            fontWeight=\"500\"\n            fill={FACET_LABEL_FILL}\n          >\n            {line}\n          </text>\n        ))}\n      <Chart {...chartProps} />\n    </>\n  );\n});\n"],"mappings":";;;;AA4BA,MAAa,IAAY,EAAK,SAAmB,EAAE,eAAY,GAAG,KAAqB;CACrF,IAAM,IACJ,EAAW,SAAA,MAEV,EAAW,MAAM,SAAS,KAAA;AAE7B,QACE,kBAAA,GAAA,EAAA,UAAA,CACG,EAAW,QACV,EAAW,MAAM,KAAK,GAAM,MAC1B,kBAAC,QAAD;EAEE,GAAG,EAAW;EACd,GAAG,IAAiB,IAAA;EACpB,UAAS;EACT,YAAW;EACX,MAAA;YAEC;EACI,EARA,EAQA,CACP,EACJ,kBAAC,GAAD,EAAO,GAAI,GAAc,CAAA,CACxB,EAAA,CAAA;EAEL"}

package/dist/selection/components/types.d.ts

@@ -0,0 +1,58 @@
+import { TitlePosition } from '../../types';
+import { FacetedSelectionData } from '../createSelectionData';
+import { ChartStyle } from './Chart/types';
+export type Margins = {
+    top: number;
+    bottom: number;
+    left: number;
+    right: number;
+};
+/** Whole-grid geometry — drives ChartsGroup's layout and per-cell positioning. */
+export type GridLayout = {
+    nRows: number;
+    nCols: number;
+    totalWidth: number;
+    totalHeight: number;
+    margins: Margins;
+    cellPlotWidth: number;
+    cellPlotHeight: number;
+    cellLabelHeight: number;
+    topPad: number;
+    rightPad: number;
+    colLeftPads: number[];
+    rowBottomPads: number[];
+    colXOffsets: number[];
+    rowYOffsets: number[];
+    /** Edge-only X-axis labels when true (always true for faceted Selection). */
+    sharedX: boolean;
+    /** Edge-only Y-axis ticks when true (always true for faceted Selection). */
+    sharedY: boolean;
+};
+/** X-axis config + per-facet data (used by ChartsGroup; sliced into ChartXAxis per cell). */
+export type ChartsGroupXAxis = {
+    labelsByFacet: Record<string, Record<string, string[]>>;
+    countsByFacet: Record<string, Record<string, string>>;
+    countsFontSize?: number;
+    labelsPosition?: 'center' | '45deg' | '90deg';
+    showGrid?: boolean;
+    showTicks?: boolean;
+    hiddenLabels?: boolean;
+    title?: string;
+};
+/** Visual style for the whole grid; superset of Chart's style (adds nullValueLabel for tooltip). */
+export type ChartsGroupStyle = ChartStyle & {
+    nullValueLabel?: string;
+};
+/** Main title + show/position config. */
+export type ChartsGroupTitle = {
+    text: string[];
+    show: boolean;
+    position: TitlePosition;
+};
+/** Faceted data + per-facet titles/labels. */
+export type FacetData = {
+    faceted: FacetedSelectionData;
+    facetLabels: Record<string, string[]>;
+    facetTitles: Record<string, string[]>;
+};
+//# sourceMappingURL=types.d.ts.map

package/dist/selection/components/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/selection/components/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AACnE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAEhD,MAAM,MAAM,OAAO,GAAG;IACpB,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,kFAAkF;AAClF,MAAM,MAAM,UAAU,GAAG;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,OAAO,CAAC;IACjB,aAAa,EAAE,MAAM,CAAC;IACtB,cAAc,EAAE,MAAM,CAAC;IACvB,eAAe,EAAE,MAAM,CAAC;IACxB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,MAAM,EAAE,CAAC;IACtB,aAAa,EAAE,MAAM,EAAE,CAAC;IACxB,WAAW,EAAE,MAAM,EAAE,CAAC;IACtB,WAAW,EAAE,MAAM,EAAE,CAAC;IACtB,6EAA6E;IAC7E,OAAO,EAAE,OAAO,CAAC;IACjB,4EAA4E;IAC5E,OAAO,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF,6FAA6F;AAC7F,MAAM,MAAM,gBAAgB,GAAG;IAC7B,aAAa,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC;IACxD,aAAa,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;IACtD,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,OAAO,CAAC;IAC9C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,oGAAoG;AACpG,MAAM,MAAM,gBAAgB,GAAG,UAAU,GAAG;IAC1C,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAEF,yCAAyC;AACzC,MAAM,MAAM,gBAAgB,GAAG;IAC7B,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,IAAI,EAAE,OAAO,CAAC;IACd,QAAQ,EAAE,aAAa,CAAC;CACzB,CAAC;AAEF,8CAA8C;AAC9C,MAAM,MAAM,SAAS,GAAG;IACtB,OAAO,EAAE,oBAAoB,CAAC;IAC9B,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC,CAAC;IACtC,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC,CAAC;CACvC,CAAC"}