@trackunit/react-map 0.2.191 → 0.2.192

package/index.cjs.js

@@ -4462,8 +4462,10 @@ ClusterStickInner.displayName = "ClusterStick";
  *
  * Rules:
  * - `n < 1 000` → raw integer string
- * - `1 000 ≤ n < 1 000 000` → `Xk` (truncated to whole thousands)
- * - `n ≥ 1 000 000` → `X.Xm` (truncated to one decimal of millions)
+ * - `1 000 ≤ n < 10 000` → `X.Xk` (truncated to one decimal of thousands)
+ * - `10 000 ≤ n < 1 000 000` → `Xk` (truncated to whole thousands)
+ * - `1 000 000 ≤ n < 10 000 000` → `X.Xm` (truncated to one decimal of millions)
+ * - `n ≥ 10 000 000` → `Xm` (truncated to whole millions)
  *
  * Truncation (not rounding) is used so the displayed value never overstates the count.
  */
@@ -4471,16 +4473,93 @@ const formatClusterCount = (n) => {
     if (n < 1000) {
         return String(n);
     }
+    if (n < 10000) {
+        return `${(Math.floor(n / 100) / 10).toFixed(1)}k`;
+    }
     if (n < 1000000) {
         return `${Math.floor(n / 1000)}k`;
     }
-    return `${(Math.floor(n / 100000) / 10).toFixed(1)}m`;
+    if (n < 10000000) {
+        return `${(Math.floor(n / 100000) / 10).toFixed(1)}m`;
+    }
+    return `${Math.floor(n / 1000000)}m`;
+};
+
+/**
+ * `memo` comparator for `ClusterMarker`. Shallow-compares every prop except `segments`,
+ * which is compared by content since callers typically derive a fresh array per render.
+ */
+const areClusterMarkerPropsEqual = (prev, next) => {
+    const prevKeys = Object.keys(prev);
+    const nextKeys = Object.keys(next);
+    if (prevKeys.length !== nextKeys.length) {
+        return false;
+    }
+    for (const key of nextKeys) {
+        if (key === "segments") {
+            continue;
+        }
+        if (!Object.is(Reflect.get(prev, key), Reflect.get(next, key))) {
+            return false;
+        }
+    }
+    return esToolkit.isEqual(prev.segments, next.segments);
+};
+
+/**
+ * Open donut diameter (px), including the 1px border.
+ * Named like marker sizes: sm, md, lg, xl. Compact formatting keeps lg labels to at
+ * most 3 digits (`999`, `9.9k`, `99k`) and xl labels to at most 4 (`999k`, `9.9m`).
+ */
+const CLUSTER_BUBBLE_DIAMETER_PX = {
+    sm: 24,
+    md: 32,
+    lg: 40,
+    xl: 48,
+};
+const CLUSTER_PIE_BAND_STEPS = {
+    sm: 1,
+    md: 2,
+    lg: 3,
+    xl: 4,
+};
+/**
+ * Resolves the cluster bubble diameter and form from the count, single-marker size, and state.
+ * The resting pie is one marker step above `markerSize` for counts of 2–9, then one further step
+ * per larger count band, clamped at xl.
+ */
+const resolveClusterBubbleSize = ({ count, markerSize, state, }) => {
+    const safeCount = Number.isFinite(count) ? count : 0;
+    const band = safeCount <= 9 ? "sm" : safeCount <= 99 ? "md" : safeCount < 100000 ? "lg" : "xl";
+    const donutDiameterPx = CLUSTER_BUBBLE_DIAMETER_PX[band];
+    if (markerSize === undefined) {
+        return { diameterPx: donutDiameterPx, isDonut: true };
+    }
+    /** Outer pie diameter (px), including the 1px border. Matches a marker circle tier. */
+    let pieSize = markerSize;
+    for (let step = 0; step < CLUSTER_PIE_BAND_STEPS[band]; step++) {
+        pieSize = upgradeMarkerDomSize(pieSize);
+    }
+    const pieDiameterPx = MARKER_SIZE_MAP[pieSize].circle;
+    if (state === "default") {
+        return { diameterPx: pieDiameterPx, isDonut: false };
+    }
+    /**
+     * Open diameter. The count picks sm/md/lg/xl, but a larger closed pie does not shrink.
+     * A 2–9 cluster on an lg or xl marker is a 28px pie and a 24px donut, so it stays 28px.
+     */
+    return { diameterPx: Math.max(pieDiameterPx, donutDiameterPx), isDonut: true };
 };
 
 /** Radius (px) from cluster anchor at which sticks are placed during fan-out. */
 const STICK_FAN_RADIUS_PX = 56;
-/** Doughnut ring thickness as a percentage of the chart radius (matches the legacy cluster ring). */
-const PIE_LINE_WIDTH_PERCENT = 25;
+/** Closed pie fills the disc. Open donut leaves a hole for the count (legacy ring thickness). */
+const PIE_LINE_WIDTH_PERCENT = 100;
+const DONUT_LINE_WIDTH_PERCENT = 25;
+/** The ring is `DONUT_LINE_WIDTH_PERCENT` of the radius, so the hole is inset by half that on each side. */
+const HOLE_INSET = `${DONUT_LINE_WIDTH_PERCENT / 2}%`;
+/** easeOutCubic. */
+const HOLE_EASING = "cubic-bezier(0.33, 1, 0.68, 1)";
 const PIE_START_ANGLE = -90;
 /** Stable empty sticks array — used as the default for the `sticks` prop so the useEffect
  * dependency does not change on every render when no sticks are passed. */
@@ -4507,13 +4586,23 @@ const resolveBubbleBackground = (state, config) => {
     return config.expandedBackground;
 };
 const ClusterMarkerInner = react.forwardRef(function ClusterMarkerComponent(props, ref) {
-    const { count, segments, sticks = EMPTY_STICKS, onStickClick, onClick, onKeyDown, onMouseEnter, onMouseLeave, onFocus, onBlur, state = "default", theme, colorConfig, className, style, "data-testid": dataTestId, "aria-label": ariaLabel, } = props;
+    const { count, segments, sticks = EMPTY_STICKS, onStickClick, onClick, onKeyDown, onMouseEnter, onMouseLeave, onFocus, onBlur, state = "default", markerSize, theme, colorConfig, className, style, "data-testid": dataTestId, "aria-label": ariaLabel, } = props;
     const formatted = formatClusterCount(count);
+    const pieData = react.useMemo(() => segments
+        .map((segment, index) => ({
+        color: segment.color,
+        value: segment.weight,
+        title: `segment-${index}`,
+    }))
+        .filter(entry => entry.value > 0), [segments]);
+    const { diameterPx: bubbleDiameterPx, isDonut } = resolveClusterBubbleSize({ count, markerSize, state });
+    const showCount = isDonut || pieData.length === 0;
     const effectiveColorConfig = { ...defaultMarkerColorConfig(theme), ...colorConfig };
     const colors = resolveMarkerColors("transparent", state, theme, colorConfig);
     const bubbleBackground = resolveBubbleBackground(state, effectiveColorConfig);
     const morphDurationMs = MARKER_TUNING.animation.morphDurationMs;
     const easing = MARKER_TUNING.animation.morphEasing;
+    const holeDurationMs = Math.round(morphDurationMs / 2);
     // Single source of truth for all sticks — both active (open=true) and departing (open=false).
     // Active sticks carry updated fan angles; departing sticks keep their last known positioning
     // so the spring can animate them from their current position back to the cluster center.
@@ -4564,25 +4653,22 @@ const ClusterMarkerInner = react.forwardRef(function ClusterMarkerComponent(prop
             event.currentTarget.click();
         }
     }, [onKeyDown]);
-    const pieData = react.useMemo(() => segments.map((segment, index) => ({
-        color: segment.color,
-        value: segment.weight,
-        title: `segment-${index}`,
-    })), [segments]);
     const bubbleTestId = dataTestId !== undefined ? `${dataTestId}-bubble` : undefined;
+    const holeTestId = dataTestId !== undefined ? `${dataTestId}-hole` : undefined;
     return (jsxRuntime.jsxs("div", { className: className, "data-testid": dataTestId, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, ref: ref, style: {
             position: "relative",
             display: "inline-block",
             isolation: "isolate",
             ...colors.cssVars,
             ...style,
-        }, children: [managedSticks.map(({ input: stick, open, positioning }) => (jsxRuntime.jsx("div", { style: { position: "absolute", zIndex: 0, left: "50%", top: "50%", width: 0, height: 0 }, children: jsxRuntime.jsx(ClusterStick, { ...stick, onStickClick: open ? onStickClick : undefined, open: open, positioning: positioning }) }, stick.id))), jsxRuntime.jsxs("div", { "aria-label": accessibleName, "aria-pressed": state === "selected", className: "focus-visible:ring-info-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2", "data-map-marker-hit-surface": "", "data-testid": bubbleTestId, onBlur: onBlur, onClick: onClick, onFocus: onFocus, onKeyDown: handleKeyDown, role: "button", style: {
+        }, children: [managedSticks.map(({ input: stick, open, positioning }) => (jsxRuntime.jsx("div", { style: { position: "absolute", zIndex: 0, left: "50%", top: "50%", width: 0, height: 0 }, children: jsxRuntime.jsx(ClusterStick, { ...stick, onStickClick: open ? onStickClick : undefined, open: open, positioning: positioning }) }, stick.id))), jsxRuntime.jsxs("div", { "aria-label": accessibleName, "aria-pressed": state === "selected", className: "focus-visible:ring-info-500 motion-reduce:transition-none! focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2", "data-map-marker-hit-surface": "", "data-testid": bubbleTestId, onBlur: onBlur, onClick: onClick, onFocus: onFocus, onKeyDown: handleKeyDown, role: "button", style: {
                     position: "relative",
                     display: "inline-flex",
                     alignItems: "center",
                     justifyContent: "center",
-                    aspectRatio: "1 / 1",
-                    width: "fit-content",
+                    boxSizing: "border-box",
+                    width: bubbleDiameterPx,
+                    height: bubbleDiameterPx,
                     borderRadius: 9999,
                     overflow: "hidden",
                     backgroundColor: bubbleBackground,
@@ -4592,13 +4678,34 @@ const ClusterMarkerInner = react.forwardRef(function ClusterMarkerComponent(prop
                     borderStyle: "solid",
                     cursor: "pointer",
                     userSelect: "none",
-                    transitionProperty: "background-color, border-color, color",
+                    transitionProperty: "width, height, background-color, border-color, color",
                     transitionDuration: `${morphDurationMs}ms`,
                     transitionTimingFunction: easing,
                     zIndex: 1,
-                }, tabIndex: 0, children: [pieData.length > 0 ? (jsxRuntime.jsx(reactMinimalPieChart.PieChart, { data: pieData, lineWidth: PIE_LINE_WIDTH_PERCENT, startAngle: PIE_START_ANGLE, style: { position: "absolute", inset: 0, width: "100%", height: "100%" } })) : null, jsxRuntime.jsx("span", { className: "relative whitespace-nowrap px-2 py-1 text-xs font-semibold leading-none [text-box-trim:trim-both]", "data-testid": "ClusterMarker-count", children: formatted })] })] }));
+                }, tabIndex: 0, children: [pieData.length > 0 ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(reactMinimalPieChart.PieChart, { data: pieData, lineWidth: PIE_LINE_WIDTH_PERCENT, startAngle: PIE_START_ANGLE, style: { position: "absolute", inset: 0, width: "100%", height: "100%" } }), jsxRuntime.jsx("div", { "aria-hidden": true, className: "motion-reduce:transition-none!", "data-testid": holeTestId, style: {
+                                    position: "absolute",
+                                    inset: HOLE_INSET,
+                                    borderRadius: 9999,
+                                    backgroundColor: bubbleBackground,
+                                    pointerEvents: "none",
+                                    transform: isDonut ? "scale(1)" : "scale(0)",
+                                    transitionProperty: "transform, background-color",
+                                    transitionDuration: `${holeDurationMs}ms, ${morphDurationMs}ms`,
+                                    transitionTimingFunction: `${HOLE_EASING}, ${easing}`,
+                                } })] })) : null, jsxRuntime.jsx("span", { className: "motion-reduce:transition-none! relative whitespace-nowrap text-xs font-semibold leading-none [text-box-trim:trim-both]", "data-testid": "ClusterMarker-count", style: {
+                            opacity: showCount ? 1 : 0,
+                            transitionProperty: "opacity",
+                            transitionDuration: `${morphDurationMs}ms`,
+                            transitionTimingFunction: easing,
+                        }, children: formatted })] })] }));
 });
-const ClusterMarker = ClusterMarkerInner;
+/**
+ * Memoized with {@link areClusterMarkerPropsEqual}: `segments` is compared by content, all other props by reference.
+ * Re-renders of the layer then skip clusters whose props are unchanged, even when callers derive `segments` per render.
+ * On the fleet map (about 127 clusters, panning), this cut cluster renders from 1,000–3,300/s to 0–2/s
+ * and cluster React time from 40–114 ms/s to under 3 ms/s (on local build).
+ */
+const ClusterMarker = react.memo(ClusterMarkerInner, areClusterMarkerPropsEqual);
 ClusterMarkerInner.displayName = "ClusterMarker";
 
 const getHasIcon$1 = (icon, iconPx) => {
@@ -12485,7 +12592,7 @@ const ShapeAnnotationLabel = ({ geometry, color, label, theme, isHovered = false
  * Build-your-own hook: stable reference to the cluster count formatter.
  *
  * Returns `formatClusterCount` for consumers building custom cluster markers
- * that need consistent `"1.2k / 3.4m"` formatting without reimplementing
+ * that need consistent `"1.0k"` / `"10k"` / `"9.9m"` / `"99m"` formatting without reimplementing
  * the truncation rules.
  *
  * @example

package/index.esm.js

@@ -4461,8 +4461,10 @@ ClusterStickInner.displayName = "ClusterStick";
  *
  * Rules:
  * - `n < 1 000` → raw integer string
- * - `1 000 ≤ n < 1 000 000` → `Xk` (truncated to whole thousands)
- * - `n ≥ 1 000 000` → `X.Xm` (truncated to one decimal of millions)
+ * - `1 000 ≤ n < 10 000` → `X.Xk` (truncated to one decimal of thousands)
+ * - `10 000 ≤ n < 1 000 000` → `Xk` (truncated to whole thousands)
+ * - `1 000 000 ≤ n < 10 000 000` → `X.Xm` (truncated to one decimal of millions)
+ * - `n ≥ 10 000 000` → `Xm` (truncated to whole millions)
  *
  * Truncation (not rounding) is used so the displayed value never overstates the count.
  */
@@ -4470,16 +4472,93 @@ const formatClusterCount = (n) => {
     if (n < 1000) {
         return String(n);
     }
+    if (n < 10000) {
+        return `${(Math.floor(n / 100) / 10).toFixed(1)}k`;
+    }
     if (n < 1000000) {
         return `${Math.floor(n / 1000)}k`;
     }
-    return `${(Math.floor(n / 100000) / 10).toFixed(1)}m`;
+    if (n < 10000000) {
+        return `${(Math.floor(n / 100000) / 10).toFixed(1)}m`;
+    }
+    return `${Math.floor(n / 1000000)}m`;
+};
+
+/**
+ * `memo` comparator for `ClusterMarker`. Shallow-compares every prop except `segments`,
+ * which is compared by content since callers typically derive a fresh array per render.
+ */
+const areClusterMarkerPropsEqual = (prev, next) => {
+    const prevKeys = Object.keys(prev);
+    const nextKeys = Object.keys(next);
+    if (prevKeys.length !== nextKeys.length) {
+        return false;
+    }
+    for (const key of nextKeys) {
+        if (key === "segments") {
+            continue;
+        }
+        if (!Object.is(Reflect.get(prev, key), Reflect.get(next, key))) {
+            return false;
+        }
+    }
+    return isEqual(prev.segments, next.segments);
+};
+
+/**
+ * Open donut diameter (px), including the 1px border.
+ * Named like marker sizes: sm, md, lg, xl. Compact formatting keeps lg labels to at
+ * most 3 digits (`999`, `9.9k`, `99k`) and xl labels to at most 4 (`999k`, `9.9m`).
+ */
+const CLUSTER_BUBBLE_DIAMETER_PX = {
+    sm: 24,
+    md: 32,
+    lg: 40,
+    xl: 48,
+};
+const CLUSTER_PIE_BAND_STEPS = {
+    sm: 1,
+    md: 2,
+    lg: 3,
+    xl: 4,
+};
+/**
+ * Resolves the cluster bubble diameter and form from the count, single-marker size, and state.
+ * The resting pie is one marker step above `markerSize` for counts of 2–9, then one further step
+ * per larger count band, clamped at xl.
+ */
+const resolveClusterBubbleSize = ({ count, markerSize, state, }) => {
+    const safeCount = Number.isFinite(count) ? count : 0;
+    const band = safeCount <= 9 ? "sm" : safeCount <= 99 ? "md" : safeCount < 100000 ? "lg" : "xl";
+    const donutDiameterPx = CLUSTER_BUBBLE_DIAMETER_PX[band];
+    if (markerSize === undefined) {
+        return { diameterPx: donutDiameterPx, isDonut: true };
+    }
+    /** Outer pie diameter (px), including the 1px border. Matches a marker circle tier. */
+    let pieSize = markerSize;
+    for (let step = 0; step < CLUSTER_PIE_BAND_STEPS[band]; step++) {
+        pieSize = upgradeMarkerDomSize(pieSize);
+    }
+    const pieDiameterPx = MARKER_SIZE_MAP[pieSize].circle;
+    if (state === "default") {
+        return { diameterPx: pieDiameterPx, isDonut: false };
+    }
+    /**
+     * Open diameter. The count picks sm/md/lg/xl, but a larger closed pie does not shrink.
+     * A 2–9 cluster on an lg or xl marker is a 28px pie and a 24px donut, so it stays 28px.
+     */
+    return { diameterPx: Math.max(pieDiameterPx, donutDiameterPx), isDonut: true };
 };
 
 /** Radius (px) from cluster anchor at which sticks are placed during fan-out. */
 const STICK_FAN_RADIUS_PX = 56;
-/** Doughnut ring thickness as a percentage of the chart radius (matches the legacy cluster ring). */
-const PIE_LINE_WIDTH_PERCENT = 25;
+/** Closed pie fills the disc. Open donut leaves a hole for the count (legacy ring thickness). */
+const PIE_LINE_WIDTH_PERCENT = 100;
+const DONUT_LINE_WIDTH_PERCENT = 25;
+/** The ring is `DONUT_LINE_WIDTH_PERCENT` of the radius, so the hole is inset by half that on each side. */
+const HOLE_INSET = `${DONUT_LINE_WIDTH_PERCENT / 2}%`;
+/** easeOutCubic. */
+const HOLE_EASING = "cubic-bezier(0.33, 1, 0.68, 1)";
 const PIE_START_ANGLE = -90;
 /** Stable empty sticks array — used as the default for the `sticks` prop so the useEffect
  * dependency does not change on every render when no sticks are passed. */
@@ -4506,13 +4585,23 @@ const resolveBubbleBackground = (state, config) => {
     return config.expandedBackground;
 };
 const ClusterMarkerInner = forwardRef(function ClusterMarkerComponent(props, ref) {
-    const { count, segments, sticks = EMPTY_STICKS, onStickClick, onClick, onKeyDown, onMouseEnter, onMouseLeave, onFocus, onBlur, state = "default", theme, colorConfig, className, style, "data-testid": dataTestId, "aria-label": ariaLabel, } = props;
+    const { count, segments, sticks = EMPTY_STICKS, onStickClick, onClick, onKeyDown, onMouseEnter, onMouseLeave, onFocus, onBlur, state = "default", markerSize, theme, colorConfig, className, style, "data-testid": dataTestId, "aria-label": ariaLabel, } = props;
     const formatted = formatClusterCount(count);
+    const pieData = useMemo(() => segments
+        .map((segment, index) => ({
+        color: segment.color,
+        value: segment.weight,
+        title: `segment-${index}`,
+    }))
+        .filter(entry => entry.value > 0), [segments]);
+    const { diameterPx: bubbleDiameterPx, isDonut } = resolveClusterBubbleSize({ count, markerSize, state });
+    const showCount = isDonut || pieData.length === 0;
     const effectiveColorConfig = { ...defaultMarkerColorConfig(theme), ...colorConfig };
     const colors = resolveMarkerColors("transparent", state, theme, colorConfig);
     const bubbleBackground = resolveBubbleBackground(state, effectiveColorConfig);
     const morphDurationMs = MARKER_TUNING.animation.morphDurationMs;
     const easing = MARKER_TUNING.animation.morphEasing;
+    const holeDurationMs = Math.round(morphDurationMs / 2);
     // Single source of truth for all sticks — both active (open=true) and departing (open=false).
     // Active sticks carry updated fan angles; departing sticks keep their last known positioning
     // so the spring can animate them from their current position back to the cluster center.
@@ -4563,25 +4652,22 @@ const ClusterMarkerInner = forwardRef(function ClusterMarkerComponent(props, ref
             event.currentTarget.click();
         }
     }, [onKeyDown]);
-    const pieData = useMemo(() => segments.map((segment, index) => ({
-        color: segment.color,
-        value: segment.weight,
-        title: `segment-${index}`,
-    })), [segments]);
     const bubbleTestId = dataTestId !== undefined ? `${dataTestId}-bubble` : undefined;
+    const holeTestId = dataTestId !== undefined ? `${dataTestId}-hole` : undefined;
     return (jsxs("div", { className: className, "data-testid": dataTestId, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, ref: ref, style: {
             position: "relative",
             display: "inline-block",
             isolation: "isolate",
             ...colors.cssVars,
             ...style,
-        }, children: [managedSticks.map(({ input: stick, open, positioning }) => (jsx("div", { style: { position: "absolute", zIndex: 0, left: "50%", top: "50%", width: 0, height: 0 }, children: jsx(ClusterStick, { ...stick, onStickClick: open ? onStickClick : undefined, open: open, positioning: positioning }) }, stick.id))), jsxs("div", { "aria-label": accessibleName, "aria-pressed": state === "selected", className: "focus-visible:ring-info-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2", "data-map-marker-hit-surface": "", "data-testid": bubbleTestId, onBlur: onBlur, onClick: onClick, onFocus: onFocus, onKeyDown: handleKeyDown, role: "button", style: {
+        }, children: [managedSticks.map(({ input: stick, open, positioning }) => (jsx("div", { style: { position: "absolute", zIndex: 0, left: "50%", top: "50%", width: 0, height: 0 }, children: jsx(ClusterStick, { ...stick, onStickClick: open ? onStickClick : undefined, open: open, positioning: positioning }) }, stick.id))), jsxs("div", { "aria-label": accessibleName, "aria-pressed": state === "selected", className: "focus-visible:ring-info-500 motion-reduce:transition-none! focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2", "data-map-marker-hit-surface": "", "data-testid": bubbleTestId, onBlur: onBlur, onClick: onClick, onFocus: onFocus, onKeyDown: handleKeyDown, role: "button", style: {
                     position: "relative",
                     display: "inline-flex",
                     alignItems: "center",
                     justifyContent: "center",
-                    aspectRatio: "1 / 1",
-                    width: "fit-content",
+                    boxSizing: "border-box",
+                    width: bubbleDiameterPx,
+                    height: bubbleDiameterPx,
                     borderRadius: 9999,
                     overflow: "hidden",
                     backgroundColor: bubbleBackground,
@@ -4591,13 +4677,34 @@ const ClusterMarkerInner = forwardRef(function ClusterMarkerComponent(props, ref
                     borderStyle: "solid",
                     cursor: "pointer",
                     userSelect: "none",
-                    transitionProperty: "background-color, border-color, color",
+                    transitionProperty: "width, height, background-color, border-color, color",
                     transitionDuration: `${morphDurationMs}ms`,
                     transitionTimingFunction: easing,
                     zIndex: 1,
-                }, tabIndex: 0, children: [pieData.length > 0 ? (jsx(PieChart, { data: pieData, lineWidth: PIE_LINE_WIDTH_PERCENT, startAngle: PIE_START_ANGLE, style: { position: "absolute", inset: 0, width: "100%", height: "100%" } })) : null, jsx("span", { className: "relative whitespace-nowrap px-2 py-1 text-xs font-semibold leading-none [text-box-trim:trim-both]", "data-testid": "ClusterMarker-count", children: formatted })] })] }));
+                }, tabIndex: 0, children: [pieData.length > 0 ? (jsxs(Fragment, { children: [jsx(PieChart, { data: pieData, lineWidth: PIE_LINE_WIDTH_PERCENT, startAngle: PIE_START_ANGLE, style: { position: "absolute", inset: 0, width: "100%", height: "100%" } }), jsx("div", { "aria-hidden": true, className: "motion-reduce:transition-none!", "data-testid": holeTestId, style: {
+                                    position: "absolute",
+                                    inset: HOLE_INSET,
+                                    borderRadius: 9999,
+                                    backgroundColor: bubbleBackground,
+                                    pointerEvents: "none",
+                                    transform: isDonut ? "scale(1)" : "scale(0)",
+                                    transitionProperty: "transform, background-color",
+                                    transitionDuration: `${holeDurationMs}ms, ${morphDurationMs}ms`,
+                                    transitionTimingFunction: `${HOLE_EASING}, ${easing}`,
+                                } })] })) : null, jsx("span", { className: "motion-reduce:transition-none! relative whitespace-nowrap text-xs font-semibold leading-none [text-box-trim:trim-both]", "data-testid": "ClusterMarker-count", style: {
+                            opacity: showCount ? 1 : 0,
+                            transitionProperty: "opacity",
+                            transitionDuration: `${morphDurationMs}ms`,
+                            transitionTimingFunction: easing,
+                        }, children: formatted })] })] }));
 });
-const ClusterMarker = ClusterMarkerInner;
+/**
+ * Memoized with {@link areClusterMarkerPropsEqual}: `segments` is compared by content, all other props by reference.
+ * Re-renders of the layer then skip clusters whose props are unchanged, even when callers derive `segments` per render.
+ * On the fleet map (about 127 clusters, panning), this cut cluster renders from 1,000–3,300/s to 0–2/s
+ * and cluster React time from 40–114 ms/s to under 3 ms/s (on local build).
+ */
+const ClusterMarker = memo(ClusterMarkerInner, areClusterMarkerPropsEqual);
 ClusterMarkerInner.displayName = "ClusterMarker";
 
 const getHasIcon$1 = (icon, iconPx) => {
@@ -12484,7 +12591,7 @@ const ShapeAnnotationLabel = ({ geometry, color, label, theme, isHovered = false
  * Build-your-own hook: stable reference to the cluster count formatter.
  *
  * Returns `formatClusterCount` for consumers building custom cluster markers
- * that need consistent `"1.2k / 3.4m"` formatting without reimplementing
+ * that need consistent `"1.0k"` / `"10k"` / `"9.9m"` / `"99m"` formatting without reimplementing
  * the truncation rules.
  *
  * @example

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-map",
-  "version": "0.2.191",
+  "version": "0.2.192",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {

package/src/clusters/ClusterMarker.d.ts

@@ -1,7 +1,7 @@
 import { type CommonProps, type Refable, type Styleable } from "@trackunit/react-components";
 import { type HTMLAttributes } from "react";
 import type { MapTheme } from "../core/types";
-import type { MarkerState } from "../markers/model/markerDomTypes";
+import type { MarkerDomSize, MarkerState } from "../markers/model/markerDomTypes";
 import { type MarkerColorConfig } from "../markers/shared/markerColors";
 import { type ClusterStickProps } from "./ClusterStick";
 /** Pre-computed doughnut segment input. `weight` maps directly to `value` in `BaseDataEntry`. */
@@ -21,21 +21,40 @@ type ClusterMarkerDivHandlers = Pick<HTMLAttributes<HTMLDivElement>, "onClick" |
 type ClusterMarkerBaseProps = CommonProps & Styleable & Refable<HTMLDivElement> & ClusterMarkerDivHandlers & {
     /** Total member count. Rendered via {@link formatClusterCount}. */
     count: number;
-    /** Doughnut ring segments. Empty array suppresses the ring. */
+    /**
+     * Pie (resting) and donut ring (open) segments.
+     * Non-positive weights are ignored; without any positive weights the cluster shows only the count.
+     */
     segments: ReadonlyArray<ClusterSegment>;
     /**
-     * Optional cluster member sticks fanned out around the bubble at evenly spread angles.
-     * Intended for clusters with 6 or fewer members; above that, stick labels become crowded.
+     * Highlighted member sticks fanned out around the bubble at evenly spread angles.
+     * Any cluster can highlight assets this way. At most 6 sticks; more than that and the labels crowd.
      */
     sticks?: ReadonlyArray<ClusterMarkerStickInput>;
     /** Fired by each fanned-out stick with its `id`. */
     onStickClick?: (id: string) => void;
     state?: MarkerState;
+    /**
+     * Size of a single marker at the current zoom. When set, the resting form is a
+     * pie one step above this size for counts of 2–9, then one further step per
+     * larger band, clamped at xl. The open donut sizes from `count` (sm, md, lg, xl)
+     * and stays at the pie diameter when that pie is already larger.
+     * When omitted, the cluster stays the expanded count donut, which is what the
+     * fleet map renders today. Without segments with a positive weight, the cluster
+     * keeps this sizing but shows only the count, since there is no pie or ring to show.
+     */
+    markerSize?: MarkerDomSize;
     theme: MapTheme;
     colorConfig?: MarkerColorConfig;
 };
 export type ClusterMarkerProps = ClusterMarkerBaseProps & {
     "aria-label"?: string;
 };
-export declare const ClusterMarker: import("react").ForwardRefExoticComponent<Omit<ClusterMarkerProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+/**
+ * Memoized with {@link areClusterMarkerPropsEqual}: `segments` is compared by content, all other props by reference.
+ * Re-renders of the layer then skip clusters whose props are unchanged, even when callers derive `segments` per render.
+ * On the fleet map (about 127 clusters, panning), this cut cluster renders from 1,000–3,300/s to 0–2/s
+ * and cluster React time from 40–114 ms/s to under 3 ms/s (on local build).
+ */
+export declare const ClusterMarker: import("react").NamedExoticComponent<Omit<ClusterMarkerProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 export {};

package/src/clusters/formatClusterCount.d.ts

@@ -3,8 +3,10 @@
  *
  * Rules:
  * - `n < 1 000` → raw integer string
- * - `1 000 ≤ n < 1 000 000` → `Xk` (truncated to whole thousands)
- * - `n ≥ 1 000 000` → `X.Xm` (truncated to one decimal of millions)
+ * - `1 000 ≤ n < 10 000` → `X.Xk` (truncated to one decimal of thousands)
+ * - `10 000 ≤ n < 1 000 000` → `Xk` (truncated to whole thousands)
+ * - `1 000 000 ≤ n < 10 000 000` → `X.Xm` (truncated to one decimal of millions)
+ * - `n ≥ 10 000 000` → `Xm` (truncated to whole millions)
  *
  * Truncation (not rounding) is used so the displayed value never overstates the count.
  */

package/src/clusters/stories/ClusterMarkerDefaultDemo.d.ts

@@ -1,12 +1,13 @@
-import type { ReactElement } from "react";
+import { type ReactElement } from "react";
 import type { MapTheme } from "../../core/types";
-import type { MarkerState } from "../../markers/model/markerDomTypes";
+import type { MarkerDomSize, MarkerState } from "../../markers/model/markerDomTypes";
 type ClusterMarkerDefaultDemoProps = {
     readonly count: number;
     readonly state: MarkerState;
+    readonly markerSize: MarkerDomSize;
     readonly theme: MapTheme;
     readonly showSegments: boolean;
     readonly showSticks: boolean;
 };
-export declare const ClusterMarkerDefaultDemo: ({ count, state, theme, showSegments, showSticks, }: ClusterMarkerDefaultDemoProps) => ReactElement;
+export declare const ClusterMarkerDefaultDemo: ({ count, state, markerSize, theme, showSegments, showSticks, }: ClusterMarkerDefaultDemoProps) => ReactElement;
 export {};

package/src/clusters/stories/ClusterMarkerPieDonutDemo.d.ts

@@ -0,0 +1,7 @@
+import { type ReactElement } from "react";
+import type { MapTheme } from "../../core/types";
+type ClusterMarkerPieDonutDemoProps = {
+    readonly theme: MapTheme;
+};
+export declare const ClusterMarkerPieDonutDemo: ({ theme }: ClusterMarkerPieDonutDemoProps) => ReactElement;
+export {};

package/src/clusters/stories/ClusterMarkerPlaygroundDemo.d.ts

@@ -1,10 +1,12 @@
 import { type ReactElement } from "react";
 import type { MapTheme } from "../../core/types";
+import type { MarkerDomSize } from "../../markers/model/markerDomTypes";
 type ClusterMarkerPlaygroundDemoProps = {
     readonly theme: MapTheme;
+    readonly markerSize: MarkerDomSize;
     readonly stickCount: number;
     readonly showSegments: boolean;
     readonly showIndicators: boolean;
 };
-export declare const ClusterMarkerPlaygroundDemo: ({ theme, stickCount, showSegments, showIndicators, }: ClusterMarkerPlaygroundDemoProps) => ReactElement;
+export declare const ClusterMarkerPlaygroundDemo: ({ theme, markerSize, stickCount, showSegments, showIndicators, }: ClusterMarkerPlaygroundDemoProps) => ReactElement;
 export {};

package/src/clusters/stories/ClusterMarkerWithSticksDemo.d.ts

@@ -1,10 +1,18 @@
 import type { ReactElement } from "react";
 import type { MapTheme } from "../../core/types";
-type ClusterMarkerWithSticksDemoProps = {
-    readonly theme: MapTheme;
-    readonly showSegments: boolean;
+type InteractiveSticksDemoProps = {
     readonly showIndicators: boolean;
+    readonly showSegments: boolean;
     readonly stickCount: number;
+    readonly theme: MapTheme;
+};
+type HighlightedSticksDemoProps = {
+    readonly theme: MapTheme;
 };
-export declare const ClusterMarkerWithSticksDemo: ({ theme, showSegments, showIndicators, stickCount, }: ClusterMarkerWithSticksDemoProps) => ReactElement;
+type ClusterMarkerWithSticksDemoProps = ({
+    readonly example?: "interactive";
+} & InteractiveSticksDemoProps) | ({
+    readonly example: "highlighted";
+} & HighlightedSticksDemoProps);
+export declare const ClusterMarkerWithSticksDemo: (props: ClusterMarkerWithSticksDemoProps) => ReactElement;
 export {};

package/src/clusters/useClusterCountFormat.d.ts

@@ -6,7 +6,7 @@ export type ClusterCountFormatHelpers = Readonly<{
  * Build-your-own hook: stable reference to the cluster count formatter.
  *
  * Returns `formatClusterCount` for consumers building custom cluster markers
- * that need consistent `"1.2k / 3.4m"` formatting without reimplementing
+ * that need consistent `"1.0k"` / `"10k"` / `"9.9m"` / `"99m"` formatting without reimplementing
  * the truncation rules.
  *
  * @example

package/src/clusters/utils/areClusterMarkerPropsEqual.d.ts

@@ -0,0 +1,6 @@
+import type { ClusterMarkerProps } from "../ClusterMarker";
+/**
+ * `memo` comparator for `ClusterMarker`. Shallow-compares every prop except `segments`,
+ * which is compared by content since callers typically derive a fresh array per render.
+ */
+export declare const areClusterMarkerPropsEqual: (prev: ClusterMarkerProps, next: ClusterMarkerProps) => boolean;

package/src/clusters/utils/resolveClusterBubbleSize.d.ts

@@ -0,0 +1,19 @@
+import type { MarkerDomSize, MarkerState } from "../../markers/model/markerDomTypes";
+export type ResolveClusterBubbleSizeOptions = Readonly<{
+    count: number;
+    /** Single-marker size at the current zoom. When omitted, the bubble is always the open donut. */
+    markerSize: MarkerDomSize | undefined;
+    state: MarkerState;
+}>;
+export type ClusterBubbleSize = Readonly<{
+    /** Outer diameter (px), including the 1px border. */
+    diameterPx: number;
+    /** True when the bubble is the open donut with the count; false when it rests as a pie. */
+    isDonut: boolean;
+}>;
+/**
+ * Resolves the cluster bubble diameter and form from the count, single-marker size, and state.
+ * The resting pie is one marker step above `markerSize` for counts of 2–9, then one further step
+ * per larger count band, clamped at xl.
+ */
+export declare const resolveClusterBubbleSize: ({ count, markerSize, state, }: ResolveClusterBubbleSizeOptions) => ClusterBubbleSize;

package/src/markers/stories/helpers/cvaStoryCaption.d.ts

@@ -0,0 +1,22 @@
+export declare const cvaStoryCaption: import("cva").CVAComponent<Omit<{
+    base: string[];
+    variants: {
+        theme: {
+            light: string[];
+            dark: string[];
+        };
+    };
+}, "defaultVariants"> & {
+    variants: {
+        theme: {
+            light: string[];
+            dark: string[];
+        };
+    };
+    defaultVariants: Omit<{}, never>;
+}, {
+    theme: {
+        light: string[];
+        dark: string[];
+    };
+}>;

package/src/markers/stories/helpers/cvaStoryTitle.d.ts

@@ -0,0 +1,22 @@
+export declare const cvaStoryTitle: import("cva").CVAComponent<Omit<{
+    base: string[];
+    variants: {
+        theme: {
+            light: string[];
+            dark: string[];
+        };
+    };
+}, "defaultVariants"> & {
+    variants: {
+        theme: {
+            light: string[];
+            dark: string[];
+        };
+    };
+    defaultVariants: Omit<{}, never>;
+}, {
+    theme: {
+        light: string[];
+        dark: string[];
+    };
+}>;