@rankingcoach/vanguard 1.5.1 → 1.7.0

package/dist/reputation/position_high.svg

@@ -0,0 +1,5 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.18164 23.9998C2.18164 36.0497 11.95 45.818 23.9998 45.818C36.0497 45.818 45.818 36.0497 45.818 23.9998C45.818 11.95 36.0497 2.18164 23.9998 2.18164C11.95 2.18164 2.18164 11.95 2.18164 23.9998Z" fill="#21C445"/>
+<path d="M11.4551 33.2727H16.94C17.2787 33.2727 17.6128 33.1939 17.9158 33.0424L23.0248 30.4879C23.639 30.1807 24.362 30.1807 24.9763 30.4879L30.0853 33.0424C30.3883 33.1939 30.7223 33.2727 31.061 33.2727H36.546V33.8182C36.546 35.0232 35.5692 36 34.3642 36H13.6369C12.4319 36 11.4551 35.0232 11.4551 33.8182V33.2727Z" fill="#97E4A7"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.6802 23.1562L11.7642 22.1205C11.914 21.8733 12.0003 21.5834 12.0003 21.2733C12.0003 20.3695 11.2676 19.6369 10.3639 19.6369C9.46016 19.6369 8.72754 20.3695 8.72754 21.2733C8.72754 22.1056 9.34901 22.7928 10.1533 22.8962L11.4548 30.0005H16.9398C17.2785 30.0005 17.6125 29.9217 17.9155 29.7702L23.0245 27.2157C23.6388 26.9086 24.3618 26.9086 24.976 27.2157L30.085 29.7702C30.388 29.9217 30.7221 30.0005 31.0608 30.0005H36.5457L37.8473 22.8962C38.6515 22.7928 39.273 22.1056 39.273 21.2733C39.273 20.3695 38.5404 19.6369 37.6366 19.6369C36.7329 19.6369 36.0003 20.3695 36.0003 21.2733C36.0003 21.5834 36.0865 21.8733 36.2364 22.1205L34.3203 23.1562C33.7105 23.4858 32.9518 23.1704 32.7554 22.5056L31.8524 19.4494C32.3728 19.1755 32.7275 18.6294 32.7275 18.0005C32.7275 17.0968 31.9949 16.3642 31.0912 16.3642C30.1874 16.3642 29.4548 17.0968 29.4548 18.0005C29.4548 18.4076 29.6034 18.7799 29.8494 19.0662L28.3849 20.2945C27.7899 20.7935 26.8788 20.5288 26.644 19.7886L24.9436 14.4287C25.3629 14.1324 25.6366 13.6439 25.6366 13.0914C25.6366 12.1877 24.904 11.4551 24.0003 11.4551C23.0965 11.4551 22.3639 12.1877 22.3639 13.0914C22.3639 13.6439 22.6377 14.1324 23.0569 14.4287L21.3565 19.7886C21.1217 20.5288 20.2106 20.7935 19.6157 20.2945L18.1512 19.0662C18.3971 18.7799 18.5457 18.4076 18.5457 18.0005C18.5457 17.0968 17.8131 16.3642 16.9094 16.3642C16.0056 16.3642 15.273 17.0968 15.273 18.0005C15.273 18.6294 15.6278 19.1755 16.1481 19.4494L15.2452 22.5056C15.0487 23.1704 14.2901 23.4858 13.6802 23.1562Z" fill="white"/>
+</svg>

package/dist/reputation/position_low.svg

@@ -0,0 +1,12 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.18164 23.9998C2.18164 36.0497 11.95 45.818 23.9998 45.818C36.0497 45.818 45.818 36.0497 45.818 23.9998C45.818 11.95 36.0497 2.18164 23.9998 2.18164C11.95 2.18164 2.18164 11.95 2.18164 23.9998Z" fill="#FF4747"/>
+<circle cx="24.0003" cy="24.0003" r="13.6364" stroke="#FEEDEC" stroke-width="3.27273"/>
+<path d="M30.546 37.6363H17.4551C17.4551 34.0213 20.3856 31.0908 24.0005 31.0908C27.6155 31.0908 30.546 34.0213 30.546 37.6363Z" fill="#FEEDEC"/>
+<rect x="22.9092" y="9.27246" width="2.18182" height="5.45455" rx="1.09091" fill="#FEEDEC"/>
+<path d="M20.9313 16.9218L21.0874 33.5556C21.1035 35.2687 22.654 36.5574 24.3411 36.2599C26.0283 35.9624 27.0445 34.2211 26.4737 32.6058L20.9313 16.9218Z" fill="white"/>
+<rect x="34.4424" y="13.7881" width="2.18182" height="5.45455" rx="1.09091" transform="rotate(45 34.4424 13.7881)" fill="#FEEDEC"/>
+<rect x="12.3125" y="15.3301" width="2.18182" height="5.45455" rx="1.09091" transform="rotate(-45 12.3125 15.3301)" fill="#FEEDEC"/>
+<rect x="12.0166" y="15.3301" width="2.18182" height="5.45455" rx="1.09091" transform="rotate(-45 12.0166 15.3301)" fill="#FEEDEC"/>
+<rect x="9.27344" y="26.0645" width="2.18182" height="5.45455" rx="1.09091" transform="rotate(-90 9.27344 26.0645)" fill="#FEEDEC"/>
+<rect x="33.2734" y="26.0645" width="2.18182" height="5.45455" rx="1.09091" transform="rotate(-90 33.2734 26.0645)" fill="#FEEDEC"/>
+</svg>

package/dist/reputation/position_mid.svg

@@ -0,0 +1,11 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.18164 23.9998C2.18164 36.0497 11.95 45.818 23.9998 45.818C36.0497 45.818 45.818 36.0497 45.818 23.9998C45.818 11.95 36.0497 2.18164 23.9998 2.18164C11.95 2.18164 2.18164 11.95 2.18164 23.9998Z" fill="#FFC247"/>
+<circle cx="24.0003" cy="24.0003" r="13.6364" stroke="#FFE4AD" stroke-width="3.27273"/>
+<path d="M30.546 37.6363H17.4551C17.4551 34.0213 20.3856 31.0908 24.0005 31.0908C27.6155 31.0908 30.546 34.0213 30.546 37.6363Z" fill="#FFE4AD"/>
+<rect x="22.3643" y="10.9092" width="3.27273" height="5.45455" rx="1.63636" fill="#FFE4AD"/>
+<path d="M27.0687 16.9218L26.9126 33.5556C26.8965 35.2687 25.346 36.5574 23.6589 36.2599C21.9717 35.9624 20.9555 34.2211 21.5263 32.6058L27.0687 16.9218Z" fill="white"/>
+<rect x="33.3115" y="14.8789" width="3.27273" height="5.45455" rx="1.63636" transform="rotate(45 33.3115 14.8789)" fill="#FFE4AD"/>
+<rect x="12.375" y="17.1924" width="3.27273" height="5.45455" rx="1.63636" transform="rotate(-45 12.375 17.1924)" fill="#FFE4AD"/>
+<rect x="10.3643" y="27.7012" width="3.27273" height="5.45455" rx="1.63636" transform="rotate(-90 10.3643 27.7012)" fill="#FFE4AD"/>
+<rect x="32.1816" y="27.7012" width="3.27273" height="5.45455" rx="1.63636" transform="rotate(-90 32.1816 27.7012)" fill="#FFE4AD"/>
+</svg>

package/dist/types/core/BenchmarkGauge/BenchmarkGauge.d.ts

@@ -0,0 +1,2 @@
+import { BenchmarkGaugeProps } from './types';
+export declare const BenchmarkGauge: (props: BenchmarkGaugeProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/core/BenchmarkGauge/BenchmarkGaugeMarker/BenchmarkGaugeMarker.d.ts

@@ -0,0 +1,16 @@
+import { BenchmarkGaugeMarkerType } from '../types';
+interface BenchmarkGaugeMarkerProps {
+    marker: BenchmarkGaugeMarkerType;
+    min: number;
+    max: number;
+    orientation: 'horizontal' | 'vertical';
+    rankIndex: number;
+    rankCount: number;
+    isDimmed: boolean;
+    isHighlighted: boolean;
+    growHighlightedMarker?: boolean;
+    /** Resolved pin background color. Computed by the parent from marker.color, colorByRank, and the default fallback. */
+    resolvedColor: string;
+}
+export declare const BenchmarkGaugeMarker: (props: BenchmarkGaugeMarkerProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/core/BenchmarkGauge/BenchmarkGaugeMarker/BenchmarkGaugePin/BenchmarkGaugePin.d.ts

@@ -0,0 +1,10 @@
+import { BenchmarkGaugeMarkerType, MarkerRenderContext } from '../..';
+interface BenchmarkGaugePinProps {
+    marker: BenchmarkGaugeMarkerType;
+    ctx: MarkerRenderContext;
+    resolvedColor: string;
+    isHighlighted: boolean;
+    growHighlightedMarker?: boolean;
+}
+export declare const BenchmarkGaugePin: (props: BenchmarkGaugePinProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/core/BenchmarkGauge/hooks/use-benchmark-gauge-render-state.d.ts

@@ -0,0 +1,19 @@
+import { CSSProperties } from 'react';
+import { BenchmarkGaugeProps } from '../types';
+export declare const useBenchmarkGaugeRenderState: (props: BenchmarkGaugeProps) => {
+    isVertical: boolean;
+    rankCount: number;
+    isProgressMode: boolean;
+    hoverHighlights: boolean;
+    dimsItems: boolean;
+    dimsMarkers: boolean;
+    rankMap: Map<string, number>;
+    trackBarStyle: CSSProperties;
+    ghostStyle: CSSProperties;
+    shouldUseTrackGradient: boolean;
+    fillStyle: CSSProperties;
+    effectiveStartLabel: import('react').ReactNode;
+    effectiveEndLabel: import('react').ReactNode;
+    hasLegend: boolean;
+    legendMarkers: import('..').BenchmarkGaugeMarkerType[];
+};

package/dist/types/core/BenchmarkGauge/index.d.ts

@@ -0,0 +1,2 @@
+export { BenchmarkGauge } from './BenchmarkGauge';
+export type { BenchmarkGaugeLegendInteraction, BenchmarkGaugeMarkerType, BenchmarkGaugeProps, MarkerRenderContext, } from './types';

package/dist/types/core/BenchmarkGauge/stories/AuditSimulation.story.d.ts

@@ -0,0 +1,2 @@
+import { Story } from './_BenchmarkGauge.default';
+export declare const AuditSimulation: Story;

package/dist/types/core/BenchmarkGauge/stories/ColorByRankCustomPalette.story.d.ts

@@ -0,0 +1,2 @@
+import { Story } from './_BenchmarkGauge.default';
+export declare const ColorByRankCustomPalette: Story;

package/dist/types/core/BenchmarkGauge/stories/ColorByRankDefault.story.d.ts

@@ -0,0 +1,2 @@
+import { Story } from './_BenchmarkGauge.default';
+export declare const ColorByRankDefault: Story;

package/dist/types/core/BenchmarkGauge/stories/ColorByRankMixedPrecedence.story.d.ts

@@ -0,0 +1,2 @@
+import { Story } from './_BenchmarkGauge.default';
+export declare const ColorByRankMixedPrecedence: Story;

package/dist/types/core/BenchmarkGauge/stories/ColorByRankTwoMarkersEndpoints.story.d.ts

@@ -0,0 +1,2 @@
+import { Story } from './_BenchmarkGauge.default';
+export declare const ColorByRankTwoMarkersEndpoints: Story;

package/dist/types/core/BenchmarkGauge/stories/EdgePins.story.d.ts

@@ -0,0 +1,2 @@
+import { Story } from './_BenchmarkGauge.default';
+export declare const EdgePins: Story;

package/dist/types/core/BenchmarkGauge/stories/FullTrackNoProgress.story.d.ts

@@ -0,0 +1,2 @@
+import { Story } from './_BenchmarkGauge.default';
+export declare const FullTrackNoProgress: Story;

package/dist/types/core/BenchmarkGauge/stories/HorizontalDefault.story.d.ts

@@ -0,0 +1,2 @@
+import { Story } from './_BenchmarkGauge.default';
+export declare const HorizontalDefault: Story;

package/dist/types/core/BenchmarkGauge/stories/InsideEndLabelOnly.story.d.ts

@@ -0,0 +1,2 @@
+import { Story } from './_BenchmarkGauge.default';
+export declare const InsideEndLabelOnly: Story;

package/dist/types/core/BenchmarkGauge/stories/InsideLabels.story.d.ts

@@ -0,0 +1,2 @@
+import { Story } from './_BenchmarkGauge.default';
+export declare const InsideLabels: Story;

package/dist/types/core/BenchmarkGauge/stories/InsideLabelsVertical.story.d.ts

@@ -0,0 +1,2 @@
+import { Story } from './_BenchmarkGauge.default';
+export declare const InsideLabelsVertical: Story;

package/dist/types/core/BenchmarkGauge/stories/InsideLabelsWithOverlap.story.d.ts

@@ -0,0 +1,2 @@
+import { Story } from './_BenchmarkGauge.default';
+export declare const InsideLabelsWithOverlap: Story;

package/dist/types/core/BenchmarkGauge/stories/InsideLabelsWithProgress.story.d.ts

@@ -0,0 +1,2 @@
+import { Story } from './_BenchmarkGauge.default';
+export declare const InsideLabelsWithProgress: Story;

package/dist/types/core/BenchmarkGauge/stories/InsideStartLabelOnly.story.d.ts

@@ -0,0 +1,2 @@
+import { Story } from './_BenchmarkGauge.default';
+export declare const InsideStartLabelOnly: Story;

package/dist/types/core/BenchmarkGauge/stories/InvalidRangeGuard.story.d.ts

@@ -0,0 +1,2 @@
+import { Story } from './_BenchmarkGauge.default';
+export declare const InvalidRangeGuard: Story;

package/dist/types/core/BenchmarkGauge/stories/LegendHorizontal.story.d.ts

@@ -0,0 +1,2 @@
+import { Story } from './_BenchmarkGauge.default';
+export declare const LegendHorizontal: Story;

package/dist/types/core/BenchmarkGauge/stories/LegendNone.story.d.ts

@@ -0,0 +1,2 @@
+import { Story } from './_BenchmarkGauge.default';
+export declare const LegendNone: Story;

package/dist/types/core/BenchmarkGauge/stories/LegendPartial.story.d.ts

@@ -0,0 +1,2 @@
+import { Story } from './_BenchmarkGauge.default';
+export declare const LegendPartial: Story;

package/dist/types/core/BenchmarkGauge/stories/LegendVertical.story.d.ts

@@ -0,0 +1,2 @@
+import { Story } from './_BenchmarkGauge.default';
+export declare const LegendVertical: Story;

package/dist/types/core/BenchmarkGauge/stories/LegendWithCoreGrowEffect.story.d.ts

@@ -0,0 +1,2 @@
+import { Story } from './_BenchmarkGauge.default';
+export declare const LegendWithCoreGrowEffect: Story;

package/dist/types/core/BenchmarkGauge/stories/LegendWithHighlightedIcons.story.d.ts

@@ -0,0 +1,2 @@
+import { Story } from './_BenchmarkGauge.default';
+export declare const LegendWithHighlightedIcons: Story;

package/dist/types/core/BenchmarkGauge/stories/LegendWithWrapperExtras.story.d.ts

@@ -0,0 +1,2 @@
+import { Story } from './_BenchmarkGauge.default';
+export declare const LegendWithWrapperExtras: Story;

package/dist/types/core/BenchmarkGauge/stories/ListingsSimulation.story.d.ts

@@ -0,0 +1,2 @@
+import { Story } from './_BenchmarkGauge.default';
+export declare const ListingsSimulation: Story;

package/dist/types/core/BenchmarkGauge/stories/NoMarkers.story.d.ts

@@ -0,0 +1,2 @@
+import { Story } from './_BenchmarkGauge.default';
+export declare const NoMarkers: Story;

package/dist/types/core/BenchmarkGauge/stories/OverlappingMarkers.story.d.ts

@@ -0,0 +1,2 @@
+import { Story } from './_BenchmarkGauge.default';
+export declare const OverlappingMarkers: Story;

package/dist/types/core/BenchmarkGauge/stories/ProgressAtMax.story.d.ts

@@ -0,0 +1,2 @@
+import { Story } from './_BenchmarkGauge.default';
+export declare const ProgressAtMax: Story;

package/dist/types/core/BenchmarkGauge/stories/ProgressAtMin.story.d.ts

@@ -0,0 +1,2 @@
+import { Story } from './_BenchmarkGauge.default';
+export declare const ProgressAtMin: Story;

package/dist/types/core/BenchmarkGauge/stories/ProgressHorizontal.story.d.ts

@@ -0,0 +1,2 @@
+import { Story } from './_BenchmarkGauge.default';
+export declare const ProgressHorizontal: Story;

package/dist/types/core/BenchmarkGauge/stories/ProgressInvalidId.story.d.ts

@@ -0,0 +1,2 @@
+import { Story } from './_BenchmarkGauge.default';
+export declare const ProgressInvalidId: Story;

package/dist/types/core/BenchmarkGauge/stories/ProgressVertical.story.d.ts

@@ -0,0 +1,2 @@
+import { Story } from './_BenchmarkGauge.default';
+export declare const ProgressVertical: Story;

package/dist/types/core/BenchmarkGauge/stories/ProgressVerticalAtMin.story.d.ts

@@ -0,0 +1,2 @@
+import { Story } from './_BenchmarkGauge.default';
+export declare const ProgressVerticalAtMin: Story;

package/dist/types/core/BenchmarkGauge/stories/ProgressWideTextPin.story.d.ts

@@ -0,0 +1,2 @@
+import { Story } from './_BenchmarkGauge.default';
+export declare const ProgressWideTextPin: Story;

package/dist/types/core/BenchmarkGauge/stories/ProgressWideTextPinVertical.story.d.ts

@@ -0,0 +1,2 @@
+import { Story } from './_BenchmarkGauge.default';
+export declare const ProgressWideTextPinVertical: Story;

package/dist/types/core/BenchmarkGauge/stories/RankScenarioA.story.d.ts

@@ -0,0 +1,2 @@
+import { Story } from './_BenchmarkGauge.default';
+export declare const RankScenarioA: Story;

package/dist/types/core/BenchmarkGauge/stories/RankScenarioB.story.d.ts

@@ -0,0 +1,2 @@
+import { Story } from './_BenchmarkGauge.default';
+export declare const RankScenarioB: Story;

package/dist/types/core/BenchmarkGauge/stories/RankScenarioC.story.d.ts

@@ -0,0 +1,2 @@
+import { Story } from './_BenchmarkGauge.default';
+export declare const RankScenarioC: Story;

package/dist/types/core/BenchmarkGauge/stories/RankWithContent.story.d.ts

@@ -0,0 +1,2 @@
+import { Story } from './_BenchmarkGauge.default';
+export declare const RankWithContent: Story;

package/dist/types/core/BenchmarkGauge/stories/ScoreSimulation.story.d.ts

@@ -0,0 +1,2 @@
+import { Story } from './_BenchmarkGauge.default';
+export declare const ScoreSimulation: Story;

package/dist/types/core/BenchmarkGauge/stories/StaticColorRegression.story.d.ts

@@ -0,0 +1,2 @@
+import { Story } from './_BenchmarkGauge.default';
+export declare const StaticColorRegression: Story;

package/dist/types/core/BenchmarkGauge/stories/VerticalDefault.story.d.ts

@@ -0,0 +1,2 @@
+import { Story } from './_BenchmarkGauge.default';
+export declare const VerticalDefault: Story;

package/dist/types/core/BenchmarkGauge/stories/WithContentAutoFlip.story.d.ts

@@ -0,0 +1,2 @@
+import { Story } from './_BenchmarkGauge.default';
+export declare const WithContentAutoFlip: Story;

package/dist/types/core/BenchmarkGauge/stories/WithContentEnd.story.d.ts

@@ -0,0 +1,2 @@
+import { Story } from './_BenchmarkGauge.default';
+export declare const WithContentEnd: Story;

package/dist/types/core/BenchmarkGauge/stories/WithContentStart.story.d.ts

@@ -0,0 +1,2 @@
+import { Story } from './_BenchmarkGauge.default';
+export declare const WithContentStart: Story;

package/dist/types/core/BenchmarkGauge/stories/_BenchmarkGauge.default.d.ts

@@ -0,0 +1,44 @@
+import { StoryObj } from '@storybook/react';
+import { BenchmarkGauge } from '../BenchmarkGauge';
+import { BenchmarkGaugeMarkerType, MarkerRenderContext } from '../types';
+export type Story = StoryObj<typeof BenchmarkGauge>;
+export declare const testValues: {
+    readonly min: 0;
+    readonly max: 100;
+    readonly low: 20;
+    readonly mid: 50;
+    readonly high: 80;
+    readonly edgeMin: 0;
+    readonly edgeMax: 100;
+    readonly nearEdge: 88;
+};
+export declare const twoMarkers: BenchmarkGaugeMarkerType[];
+export declare const threeMarkers: BenchmarkGaugeMarkerType[];
+export declare const progressMarkers: BenchmarkGaugeMarkerType[];
+export declare const defaultProps: {
+    readonly min: 0;
+    readonly max: 100;
+    readonly markers: BenchmarkGaugeMarkerType[];
+    readonly 'aria-label': "Benchmark gauge";
+};
+/**
+ * Returns all BenchmarkGaugeMarker elements from the canvas for play-function
+ * assertions. Horizontal markers carry an inline `left` style; vertical markers
+ * carry `bottom`. Only BenchmarkGaugeMarker sets these positional inline styles,
+ * making this a stable selector that does not depend on hashed CSS-module class names.
+ */
+export declare function getMarkers(canvasElement: HTMLElement, orientation?: 'horizontal' | 'vertical'): Element[];
+export declare const insideStartLabel: import("react/jsx-runtime").JSX.Element;
+export declare const insideEndLabel: import("react/jsx-runtime").JSX.Element;
+export declare function PlainLegendContent({ label, value }: {
+    label: string;
+    value: number;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function StubCard({ ctx }: {
+    ctx: MarkerRenderContext;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function TextPin({ label }: {
+    label: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function pinColor(rankIndex: number, rankCount: number): string;
+export declare const RankedPin: Story['args']['markers'][number]['renderPin'];

package/dist/types/core/BenchmarkGauge/types.d.ts

@@ -0,0 +1,136 @@
+import { default as React } from 'react';
+export interface MarkerRenderContext {
+    /** The full marker data object. */
+    marker: BenchmarkGaugeMarkerType;
+    /** 0-based rank by value; 0 = lowest, `rankCount − 1` = highest. */
+    rankIndex: number;
+    /** Total number of markers. */
+    rankCount: number;
+    /** True when another marker's legend item is highlighted. */
+    isDimmed: boolean;
+    /** True when this marker's legend item is active (hovered or focused). */
+    isHighlighted: boolean;
+}
+/** Controls which legend interaction behaviors are active. All fields default to `true`. */
+export interface BenchmarkGaugeLegendInteraction {
+    /**
+     * Whether hovering a legend item highlights it and its corresponding marker.
+     * @default true
+     */
+    hoverHighlights?: boolean;
+    /**
+     * Whether non-highlighted legend items are visually dimmed.
+     * @default true
+     */
+    dimsItems?: boolean;
+    /**
+     * Whether non-highlighted track markers are visually dimmed.
+     * @default true
+     */
+    dimsMarkers?: boolean;
+}
+export type BenchmarkGaugeMarkerType = {
+    /** Stable unique key. Used for `progressMarkerId` matching and legend interaction. */
+    id: string;
+    /** Position on the scale. Values outside `[min, max]` are clamped. */
+    value: number;
+    /** Accessible label. Not rendered by the core — surface it in `renderPin`, `renderContent`, or `renderLegend`. */
+    label: string;
+    /** Background color of the default pin. Takes precedence over `colorByRank`. No effect when `renderPin` is provided. */
+    color?: string;
+    /** Background color of the legend item shell. Defaults to white. The highlight overlay renders on top of it. */
+    legendBackgroundColor?: string;
+    /** Custom pin renderer. Falls back to the default circle pin when omitted. */
+    renderPin?: (ctx: MarkerRenderContext) => React.ReactNode;
+    /**
+     * Content rendered inside the default pin that animates in when the legend item is highlighted.
+     * No effect when `renderPin` is provided — use `isHighlighted` from the render context instead.
+     */
+    renderHighlightedContent?: (ctx: MarkerRenderContext) => React.ReactNode;
+    /** Anchored content (e.g. a card) rendered beside the pin. Omit to render no connector or shell. */
+    renderContent?: (ctx: MarkerRenderContext) => React.ReactNode;
+    /**
+     * Inner content of this marker's legend item. The core renders the shell (tab stop, interaction wiring, highlight/dim).
+     * Omit to exclude this marker from the legend. If no marker provides this, no legend renders.
+     */
+    renderLegend?: (ctx: MarkerRenderContext) => React.ReactNode;
+    /**
+     * Which side of the track the content anchors to.
+     * `'auto'` places content below/right and flips to above/left when the marker is near the track end.
+     * @default 'auto'
+     */
+    contentSide?: 'start' | 'end' | 'auto';
+};
+interface BenchmarkGaugeBaseProps {
+    /** Lower bound of the scale. */
+    min: number;
+    /** Upper bound of the scale. Must be greater than `min`. */
+    max: number;
+    /** Markers to render on the scale. DOM and keyboard tab order follow the input array order. */
+    markers: BenchmarkGaugeMarkerType[];
+    /** @default 'horizontal' */
+    orientation?: 'horizontal' | 'vertical';
+    /** Full CSS gradient string. Overrides the default red-to-green track gradient. */
+    gradient?: string;
+    /**
+     * ID of the marker that acts as the progress fill endpoint.
+     * Enables a two-layer track: a ghost layer at full width and a fill layer clipped to this marker's position.
+     */
+    progressMarkerId?: string;
+    /** Controls which legend interaction behaviors are active. */
+    legendInteraction?: BenchmarkGaugeLegendInteraction;
+    /**
+     * Grows the default pin when its legend item is highlighted.
+     * No effect when `renderPin` is provided — manage scaling inside `renderPin` instead.
+     */
+    growHighlightedMarker?: boolean;
+    /** Sets `data-testid` on the root element. */
+    testId?: string;
+    className?: string;
+}
+/**
+ * `compactLabels`, `startLabel`, and `endLabel` are only valid when `showLabels: true`.
+ * Passing any of them without `showLabels: true` is a TypeScript error.
+ */
+type BenchmarkGaugeLabelProps = {
+    /** Labels disabled. `compactLabels`, `startLabel`, and `endLabel` are not accepted. */
+    showLabels?: false;
+    /** @internal Not valid when `showLabels` is absent or `false`. */
+    compactLabels?: never;
+    /** @internal Not valid when `showLabels` is absent or `false`. */
+    startLabel?: never;
+    /** @internal Not valid when `showLabels` is absent or `false`. */
+    endLabel?: never;
+} | {
+    /** Enables track-end labels. Missing sides fall back to `String(min)` / `String(max)`. */
+    showLabels: true;
+    /** Switches auto-generated labels to compact notation (1000 → "1K"). No effect on custom `startLabel` / `endLabel`. */
+    compactLabels?: boolean;
+    /** Custom start label. Falls back to `String(min)` when omitted. */
+    startLabel?: React.ReactNode;
+    /** Custom end label. Falls back to `String(max)` when omitted. */
+    endLabel?: React.ReactNode;
+};
+/**
+ * `rankColors` is only valid when `colorByRank: true`.
+ * Passing it without `colorByRank: true` is a TypeScript error.
+ */
+type BenchmarkGaugeRankColoring = {
+    /** Rank coloring disabled. `rankColors` is not accepted. */
+    colorByRank?: false;
+    /** @internal Not valid when `colorByRank` is absent or `false`. */
+    rankColors?: never;
+} | {
+    /**
+     * Colors default pins by semantic rank (lowest → highest). No effect on markers with `renderPin`.
+     * The default palette is `['var(--e500)', 'var(--a2900)', 'var(--s400)']` (red → amber → green).
+     */
+    colorByRank: true;
+    /**
+     * Custom palette ordered worst → best. Colors are distributed semantically: 2 markers on a 3-color palette
+     * resolve to the endpoints, not indices 0 and 1. Defaults to the built-in 3-stop palette.
+     */
+    rankColors?: string[];
+};
+export type BenchmarkGaugeProps = BenchmarkGaugeBaseProps & BenchmarkGaugeLabelProps & BenchmarkGaugeRankColoring;
+export {};

package/dist/types/core/BenchmarkGauge/utils.d.ts

@@ -0,0 +1,61 @@
+import { default as React } from 'react';
+/** Maps a value to a percentage within [min, max], clamped to 0–100. Returns 0 when max ≤ min. */
+export declare const valueToPercent: (value: number, min: number, max: number) => number;
+/**
+ * Returns the CSS `left`/`bottom` position for a marker pin at the given percentage.
+ * Offsets from track edges by `--benchmark-gauge-marker-inset` (default: 20px) so pins
+ * never sit flush against the rounded track ends.
+ */
+export declare const markerPosition: (percent: number) => string;
+/**
+ * Returns the CSS `clip-path` inset (from the far end) that aligns the progress fill
+ * with the marker pin's position, accounting for the same inset used by `markerPosition`.
+ * At 100% returns `'0px'` so the fill covers the full track.
+ * Callers suppress the fill layer entirely at 0% — this function is not called in that case.
+ */
+export declare const fillClipInset: (percent: number) => string;
+/**
+ * Default semantic rank palette, ordered lowest → highest:
+ * `var(--e500)` (red) → `var(--a2900)` (amber) → `var(--s400)` (green).
+ * Pass `rankColors` to the component to override.
+ */
+export declare const DEFAULT_RANK_COLORS: readonly string[];
+/**
+ * Resolves the final pin background color for a marker.
+ *
+ * Precedence (highest to lowest):
+ *   1. `markerColor` — explicit per-marker color; always wins.
+ *   2. Rank-based palette color — when `colorByRank` is true. Colors are distributed
+ *      semantically: 2 markers on a 3-color palette map to the endpoints, not indices 0 and 1.
+ *   3. `var(--n400)` — component default fallback.
+ *
+ * Edge cases: a single marker (rankCount = 1) safely maps to palette[0];
+ * an empty `rankColors` array falls through to the default.
+ */
+export declare const resolveMarkerColor: ({ markerColor, rankIndex, rankCount, colorByRank, rankColors, }: {
+    markerColor: string | undefined;
+    rankIndex: number;
+    rankCount: number;
+    colorByRank?: boolean;
+    rankColors?: string[];
+}) => string;
+/**
+ * Resolves the start and end labels to render at each track edge.
+ *
+ * - `showLabels: false` (or not set) — both sides return `undefined`.
+ * - `showLabels: true` — each side falls back to `String(min)` / `String(max)`.
+ *   `compactLabels` switches auto-generated values to compact notation (1000 → "1K").
+ * - A custom `startLabel` / `endLabel` renders as-is and overrides the fallback.
+ * - Passing `null` for a side explicitly suppresses it even when `showLabels: true`.
+ */
+export declare const resolveLabels: ({ showLabels, startLabel, endLabel, min, max, compactLabels, }: {
+    showLabels?: boolean;
+    startLabel?: React.ReactNode;
+    endLabel?: React.ReactNode;
+    min: number;
+    max: number;
+    compactLabels?: boolean;
+}) => {
+    startLabel: React.ReactNode | undefined;
+    endLabel: React.ReactNode | undefined;
+};

package/dist/types/index.d.ts

@@ -131,6 +131,8 @@ export type { AiGlowProps } from './core/AiGlow';
 export { AiGlow } from './core/AiGlow';
 export type { ArcGaugeProps } from './core/ArcGauge';
 export { ArcGauge } from './core/ArcGauge';
+export type { BenchmarkGaugeLegendInteraction, BenchmarkGaugeMarkerType, BenchmarkGaugeProps, MarkerRenderContext, } from './core/BenchmarkGauge';
+export { BenchmarkGauge } from './core/BenchmarkGauge';
 export type { ActionBarProps } from './core/ActionBar';
 export type { ActionBarFooterButton, ActionBarFooterProps } from './core/ActionBar';
 export { actionBarService } from './core/ActionBar';

package/dist/vanguard-asset-analysis.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2026-04-03T16:57:29.815Z",
+  "timestamp": "2026-04-16T09:47:33.420Z",
   "mode": "full",
   "buildOptimization": {
     "enabled": false,