@agg-build/ui 1.0.0

package/dist/types/events/item/event-list-item.types.d.mts

@@ -0,0 +1,71 @@
+import type { VenueEventWithMarkets, VenueMarket, VenueMarketOutcome } from "@agg-build/hooks";
+export type { VenueEventWithMarkets, VenueMarket, VenueMarketOutcome };
+export type EventListItemEvent = VenueEventWithMarkets;
+export type EventListItemVenueInfo = {
+    label?: string;
+};
+export type EventListItemVenueInfoMap = Partial<Record<VenueMarket["venue"], EventListItemVenueInfo>>;
+export type EventListItemClassNames = Partial<{
+    root: string;
+    header: string;
+    title: string;
+    outcomes: string;
+    outcomeRow: string;
+    footer: string;
+    badge: string;
+}>;
+export type EventListItemBaseProps = {
+    /** Whether the item should render its loading skeleton state. */
+    isLoading?: boolean;
+    /** Class name overrides for item layout slots. */
+    classNames?: EventListItemClassNames;
+    /** Venue metadata used to enrich venue labels in the card. */
+    venueInfo?: EventListItemVenueInfoMap;
+    /** Optional arbitrage values keyed by outcome ID for badge rendering. */
+    arbitrageByOutcomeId?: Record<string, number | undefined>;
+    /** Live midpoint-derived prices keyed by outcome ID. Falls back to outcome.price when absent. */
+    midpointPrices?: Map<string, number>;
+    /** True while midpoints are being fetched — show skeleton on price badges. */
+    midpointsLoading?: boolean;
+    /** Called when the event card body is clicked. */
+    onEventClick?: (event?: VenueEventWithMarkets) => void;
+    /** Called when an outcome price badge is clicked. Receives the event, the specific market, and the outcome — use this to navigate to the event with a preselected market and outcome. */
+    onMarketClick?: (event: VenueEventWithMarkets, market: VenueMarket, outcome: VenueMarketOutcome) => void;
+    /** Returns an href for each market outcome badge. Used for native browser link behaviors on badge modifier-clicks. */
+    getMarketHref?: (event: VenueEventWithMarkets, market: VenueMarket, outcome: VenueMarketOutcome) => string;
+    /** When provided, the card renders as an `<a>` element, enabling native browser link behaviors (cmd/ctrl-click, middle-click, right-click → open in new tab). */
+    href?: string;
+    /** Accessible label applied to the clickable card element. */
+    ariaLabel?: string;
+};
+export type EventListItemLoadingProps = EventListItemBaseProps & {
+    /** Forces the component into its loading state. */
+    isLoading: true;
+    /** Prevents passing a resolved event while loading. */
+    event?: never;
+    /** Optional event ID used to derive loading-state cache context. */
+    eventId?: string;
+};
+export type EventListItemWithEventProps = EventListItemBaseProps & {
+    /** Fully resolved event rendered by the list item. */
+    event: EventListItemEvent;
+    /** Optional explicit event ID override. */
+    eventId?: string;
+    /** Marks the item as loaded when event data is present. */
+    isLoading?: false;
+};
+export type EventListItemWithEventIdProps = EventListItemBaseProps & {
+    /** Prevents passing a full event object in ID-driven mode. */
+    event?: never;
+    /** Event ID used to fetch or resolve the item data. */
+    eventId: string;
+    /** Marks the item as loaded when ID-driven fetching is used. */
+    isLoading?: false;
+};
+export type EventListItemProps = EventListItemLoadingProps | EventListItemWithEventProps | EventListItemWithEventIdProps;
+export type EventListItemContentProps = EventListItemBaseProps & {
+    /** Resolved event content rendered by the presentational item body. */
+    event: EventListItemEvent;
+    /** Live midpoint-derived prices keyed by outcome ID. Falls back to outcome.price when absent. */
+    midpointPrices?: Map<string, number>;
+};

package/dist/types/events/item/event-list-item.types.d.ts

@@ -0,0 +1,71 @@
+import type { VenueEventWithMarkets, VenueMarket, VenueMarketOutcome } from "@agg-build/hooks";
+export type { VenueEventWithMarkets, VenueMarket, VenueMarketOutcome };
+export type EventListItemEvent = VenueEventWithMarkets;
+export type EventListItemVenueInfo = {
+    label?: string;
+};
+export type EventListItemVenueInfoMap = Partial<Record<VenueMarket["venue"], EventListItemVenueInfo>>;
+export type EventListItemClassNames = Partial<{
+    root: string;
+    header: string;
+    title: string;
+    outcomes: string;
+    outcomeRow: string;
+    footer: string;
+    badge: string;
+}>;
+export type EventListItemBaseProps = {
+    /** Whether the item should render its loading skeleton state. */
+    isLoading?: boolean;
+    /** Class name overrides for item layout slots. */
+    classNames?: EventListItemClassNames;
+    /** Venue metadata used to enrich venue labels in the card. */
+    venueInfo?: EventListItemVenueInfoMap;
+    /** Optional arbitrage values keyed by outcome ID for badge rendering. */
+    arbitrageByOutcomeId?: Record<string, number | undefined>;
+    /** Live midpoint-derived prices keyed by outcome ID. Falls back to outcome.price when absent. */
+    midpointPrices?: Map<string, number>;
+    /** True while midpoints are being fetched — show skeleton on price badges. */
+    midpointsLoading?: boolean;
+    /** Called when the event card body is clicked. */
+    onEventClick?: (event?: VenueEventWithMarkets) => void;
+    /** Called when an outcome price badge is clicked. Receives the event, the specific market, and the outcome — use this to navigate to the event with a preselected market and outcome. */
+    onMarketClick?: (event: VenueEventWithMarkets, market: VenueMarket, outcome: VenueMarketOutcome) => void;
+    /** Returns an href for each market outcome badge. Used for native browser link behaviors on badge modifier-clicks. */
+    getMarketHref?: (event: VenueEventWithMarkets, market: VenueMarket, outcome: VenueMarketOutcome) => string;
+    /** When provided, the card renders as an `<a>` element, enabling native browser link behaviors (cmd/ctrl-click, middle-click, right-click → open in new tab). */
+    href?: string;
+    /** Accessible label applied to the clickable card element. */
+    ariaLabel?: string;
+};
+export type EventListItemLoadingProps = EventListItemBaseProps & {
+    /** Forces the component into its loading state. */
+    isLoading: true;
+    /** Prevents passing a resolved event while loading. */
+    event?: never;
+    /** Optional event ID used to derive loading-state cache context. */
+    eventId?: string;
+};
+export type EventListItemWithEventProps = EventListItemBaseProps & {
+    /** Fully resolved event rendered by the list item. */
+    event: EventListItemEvent;
+    /** Optional explicit event ID override. */
+    eventId?: string;
+    /** Marks the item as loaded when event data is present. */
+    isLoading?: false;
+};
+export type EventListItemWithEventIdProps = EventListItemBaseProps & {
+    /** Prevents passing a full event object in ID-driven mode. */
+    event?: never;
+    /** Event ID used to fetch or resolve the item data. */
+    eventId: string;
+    /** Marks the item as loaded when ID-driven fetching is used. */
+    isLoading?: false;
+};
+export type EventListItemProps = EventListItemLoadingProps | EventListItemWithEventProps | EventListItemWithEventIdProps;
+export type EventListItemContentProps = EventListItemBaseProps & {
+    /** Resolved event content rendered by the presentational item body. */
+    event: EventListItemEvent;
+    /** Live midpoint-derived prices keyed by outcome ID. Falls back to outcome.price when absent. */
+    midpointPrices?: Map<string, number>;
+};

package/dist/types/events/item/event-list-item.utils.d.mts

@@ -0,0 +1,46 @@
+import type { AggUiLabels, VenueMarket, VenueMarketOutcome } from "@agg-build/hooks";
+import type { EventListItemEvent, EventListItemVenueInfoMap, VenueEventWithMarkets } from "./event-list-item.types";
+export declare const resolveEventListItemEvent: (fetchedEvent: VenueEventWithMarkets | undefined) => EventListItemEvent | undefined;
+export declare const normalizeProbability: (value: number | null | undefined) => number | undefined;
+export declare const isYesLabel: (label: string) => boolean;
+export declare const resolveYesOutcome: (market: Pick<VenueMarket, "venueMarketOutcomes">) => VenueMarketOutcome | undefined;
+export declare const resolveYesOutcomeProbability: (market: Pick<VenueMarket, "venueMarketOutcomes">) => number | undefined;
+export declare const formatMarketProbabilityPercent: (value: number | null | undefined, formatPercent?: (value: number) => string) => string;
+export declare const formatPriceGapPercent: (value: number | null | undefined) => string | undefined;
+export declare const sortOutcomes: (outcomes: VenueMarketOutcome[]) => VenueMarketOutcome[];
+export type EventListItemVisibleOutcome = {
+    venue: VenueMarket["venue"];
+    market: VenueMarket;
+    outcome: VenueMarketOutcome;
+    title: string;
+};
+export declare const resolveVisibleOutcomes: (venueMarkets: VenueMarket[]) => EventListItemVisibleOutcome[];
+export declare const dedupeVenueMarketsById: (venueMarkets: VenueMarket[]) => VenueMarket[];
+/** Returns the outcome's display text. Prefers `title` (the descriptive
+ *  human-readable text — e.g. "Trump Wins") when present and non-empty,
+ *  falls back to `label` (the canonical short identifier — e.g. "Yes").
+ *  For semantic checks (isYesLabel, sort keys, lookup keys) keep using
+ *  `outcome.label` directly — never this helper. */
+export declare const resolveOutcomeTitle: (outcome: VenueMarketOutcome) => string;
+export declare const selectPrimaryVenueMarket: (venueMarkets: VenueMarket[]) => VenueMarket | undefined;
+export declare const resolveTileTitle: (event: VenueEventWithMarkets, primaryVenueMarket: VenueMarket | undefined, titleOverride: string | undefined) => string;
+export declare const resolveTileImage: (event: VenueEventWithMarkets, primaryVenueMarket: VenueMarket | undefined, imageOverride: string | null | undefined) => string | undefined;
+export declare const formatCountLabel: (count: number, singular: string, plural: string) => string;
+export declare const getVenueSummary: (venueMarkets: VenueMarket[]) => {
+    marketCount: number;
+    venueCount: number;
+    singleVenue: import("@agg-build/hooks").Venue | undefined;
+};
+export declare const resolveVenueLabel: (venue: VenueMarket["venue"] | undefined, venueInfo: EventListItemVenueInfoMap | undefined, labels: AggUiLabels) => string;
+type DisplayVolumeMarket = {
+    id: string;
+    venue: string;
+    volume?: number | null;
+    matchedVenueMarkets?: readonly DisplayVolumeMarket[] | null;
+    matchEntry?: {
+        targetVenueMarketId?: string | null;
+        targetVenueMarket?: DisplayVolumeMarket | null;
+    } | null | undefined;
+};
+export declare const resolveDisplayVolume: (eventVolume: number | null | undefined, venueMarkets: ReadonlyArray<DisplayVolumeMarket>) => number | undefined;
+export {};

package/dist/types/events/item/event-list-item.utils.d.ts

@@ -0,0 +1,46 @@
+import type { AggUiLabels, VenueMarket, VenueMarketOutcome } from "@agg-build/hooks";
+import type { EventListItemEvent, EventListItemVenueInfoMap, VenueEventWithMarkets } from "./event-list-item.types";
+export declare const resolveEventListItemEvent: (fetchedEvent: VenueEventWithMarkets | undefined) => EventListItemEvent | undefined;
+export declare const normalizeProbability: (value: number | null | undefined) => number | undefined;
+export declare const isYesLabel: (label: string) => boolean;
+export declare const resolveYesOutcome: (market: Pick<VenueMarket, "venueMarketOutcomes">) => VenueMarketOutcome | undefined;
+export declare const resolveYesOutcomeProbability: (market: Pick<VenueMarket, "venueMarketOutcomes">) => number | undefined;
+export declare const formatMarketProbabilityPercent: (value: number | null | undefined, formatPercent?: (value: number) => string) => string;
+export declare const formatPriceGapPercent: (value: number | null | undefined) => string | undefined;
+export declare const sortOutcomes: (outcomes: VenueMarketOutcome[]) => VenueMarketOutcome[];
+export type EventListItemVisibleOutcome = {
+    venue: VenueMarket["venue"];
+    market: VenueMarket;
+    outcome: VenueMarketOutcome;
+    title: string;
+};
+export declare const resolveVisibleOutcomes: (venueMarkets: VenueMarket[]) => EventListItemVisibleOutcome[];
+export declare const dedupeVenueMarketsById: (venueMarkets: VenueMarket[]) => VenueMarket[];
+/** Returns the outcome's display text. Prefers `title` (the descriptive
+ *  human-readable text — e.g. "Trump Wins") when present and non-empty,
+ *  falls back to `label` (the canonical short identifier — e.g. "Yes").
+ *  For semantic checks (isYesLabel, sort keys, lookup keys) keep using
+ *  `outcome.label` directly — never this helper. */
+export declare const resolveOutcomeTitle: (outcome: VenueMarketOutcome) => string;
+export declare const selectPrimaryVenueMarket: (venueMarkets: VenueMarket[]) => VenueMarket | undefined;
+export declare const resolveTileTitle: (event: VenueEventWithMarkets, primaryVenueMarket: VenueMarket | undefined, titleOverride: string | undefined) => string;
+export declare const resolveTileImage: (event: VenueEventWithMarkets, primaryVenueMarket: VenueMarket | undefined, imageOverride: string | null | undefined) => string | undefined;
+export declare const formatCountLabel: (count: number, singular: string, plural: string) => string;
+export declare const getVenueSummary: (venueMarkets: VenueMarket[]) => {
+    marketCount: number;
+    venueCount: number;
+    singleVenue: import("@agg-build/hooks").Venue | undefined;
+};
+export declare const resolveVenueLabel: (venue: VenueMarket["venue"] | undefined, venueInfo: EventListItemVenueInfoMap | undefined, labels: AggUiLabels) => string;
+type DisplayVolumeMarket = {
+    id: string;
+    venue: string;
+    volume?: number | null;
+    matchedVenueMarkets?: readonly DisplayVolumeMarket[] | null;
+    matchEntry?: {
+        targetVenueMarketId?: string | null;
+        targetVenueMarket?: DisplayVolumeMarket | null;
+    } | null | undefined;
+};
+export declare const resolveDisplayVolume: (eventVolume: number | null | undefined, venueMarkets: ReadonlyArray<DisplayVolumeMarket>) => number | undefined;
+export {};

package/dist/types/events/item/index.d.mts

@@ -0,0 +1,6 @@
+import type { EventListItemProps } from "./event-list-item.types";
+export type { EventListItemClassNames, EventListItemEvent, EventListItemProps, EventListItemVenueInfo, EventListItemVenueInfoMap, VenueEventWithMarkets, VenueMarket, VenueMarketOutcome, } from "./event-list-item.types";
+export declare const EventListItem: {
+    (props: EventListItemProps): JSX.Element;
+    displayName: string;
+};

package/dist/types/events/item/index.d.ts

@@ -0,0 +1,6 @@
+import type { EventListItemProps } from "./event-list-item.types";
+export type { EventListItemClassNames, EventListItemEvent, EventListItemProps, EventListItemVenueInfo, EventListItemVenueInfoMap, VenueEventWithMarkets, VenueMarket, VenueMarketOutcome, } from "./event-list-item.types";
+export declare const EventListItem: {
+    (props: EventListItemProps): JSX.Element;
+    displayName: string;
+};

package/dist/types/events/item-details/event-list-item-details-market-selector.d.mts

@@ -0,0 +1,10 @@
+export type MarketPillOption = {
+    value: string;
+    label: string;
+};
+export declare const EventListItemDetailsMarketSelector: ({ className, options, selectedValue, onChange, }: {
+    className?: string;
+    options: MarketPillOption[];
+    selectedValue: string;
+    onChange: (marketId: string) => void;
+}) => JSX.Element;

package/dist/types/events/item-details/event-list-item-details-market-selector.d.ts

@@ -0,0 +1,10 @@
+export type MarketPillOption = {
+    value: string;
+    label: string;
+};
+export declare const EventListItemDetailsMarketSelector: ({ className, options, selectedValue, onChange, }: {
+    className?: string;
+    options: MarketPillOption[];
+    selectedValue: string;
+    onChange: (marketId: string) => void;
+}) => JSX.Element;

package/dist/types/events/item-details/event-list-item-details.constants.d.mts

@@ -0,0 +1,3 @@
+import type { ProbabilityMode } from "./event-list-item-details.types";
+export declare const detailsBaseCardClassName = "w-full gap-6 p-5 md:gap-8";
+export declare const probabilityModeOrder: ProbabilityMode[];

package/dist/types/events/item-details/event-list-item-details.constants.d.ts

@@ -0,0 +1,3 @@
+import type { ProbabilityMode } from "./event-list-item-details.types";
+export declare const detailsBaseCardClassName = "w-full gap-6 p-5 md:gap-8";
+export declare const probabilityModeOrder: ProbabilityMode[];

package/dist/types/events/item-details/event-list-item-details.types.d.mts

@@ -0,0 +1,116 @@
+import type { ChartTimeRange, EventTradingState } from "@agg-build/hooks";
+import type { LineChartPoint, LineChartType } from "../../primitives/chart";
+import type { EventListItemVenueInfoMap, VenueEventWithMarkets } from "../item/event-list-item.types";
+import type { OutcomeByVenue } from "./event-list-item-details.utils";
+export type EventListItemDetailsEvent = VenueEventWithMarkets;
+/** @deprecated Use `ChartTimeRange` from `@agg-build/hooks` instead. */
+export type EventListItemDetailsTimeRange = ChartTimeRange;
+export type EventListItemDetailsStat = {
+    label: string;
+    value: string;
+    delta?: string;
+    deltaTone?: "positive" | "negative" | "neutral";
+};
+export type EventListItemDetailsClassNames = Partial<{
+    root: string;
+    header: string;
+    title: string;
+    headerPills: string;
+    headerStats: string;
+    summary: string;
+    outcomeBadges: string;
+    segmentedControl: string;
+    chart: string;
+    footer: string;
+    timeRange: string;
+}>;
+export type EventListItemDetailsBaseProps = {
+    /** Class name overrides for the details card slots. */
+    classNames?: EventListItemDetailsClassNames;
+    /** Market ID to preselect after event sync is initialized. */
+    defaultMarketId?: string;
+    /** Outcome ID to preselect alongside defaultMarketId. */
+    defaultOutcomeId?: string;
+    /** Venue metadata used to enrich venue labels in the details card. */
+    venueInfo?: EventListItemVenueInfoMap;
+    /** Optional stat pills shown in the details summary area. */
+    detailsStats?: EventListItemDetailsStat[];
+    /** Trading state data used to drive prices and market status. */
+    eventTradingState?: EventTradingState;
+    /** Whether the details card should render its loading state. */
+    isLoading?: boolean;
+    /** Accessible label applied to the interactive details card. */
+    ariaLabel?: string;
+    /** Initially selected chart time range. */
+    defaultTimeRange?: EventListItemDetailsTimeRange;
+    /** Called when the details card is clicked. */
+    onClick?: (event?: EventListItemDetailsEvent) => void;
+};
+export type EventListItemDetailsLoadingProps = EventListItemDetailsBaseProps & {
+    /** Forces the details component into its loading state. */
+    isLoading: true;
+    /** Prevents passing a resolved event while loading. */
+    event?: never;
+    /** Optional event ID used to derive loading-state cache context. */
+    eventId?: string;
+};
+export type EventListItemDetailsWithEventProps = EventListItemDetailsBaseProps & {
+    /** Fully resolved event rendered inside the details card. */
+    event: EventListItemDetailsEvent;
+    /** Optional explicit event ID override. */
+    eventId?: string;
+    /** Marks the details card as loaded when event data is present. */
+    isLoading?: false;
+};
+export type EventListItemDetailsWithEventIdProps = EventListItemDetailsBaseProps & {
+    /** Prevents passing a full event object in ID-driven mode. */
+    event?: never;
+    /** Event ID used to fetch or resolve the details data. */
+    eventId: string;
+    /** Marks the details card as loaded when ID-driven fetching is used. */
+    isLoading?: false;
+};
+export type EventListItemDetailsProps = EventListItemDetailsLoadingProps | EventListItemDetailsWithEventProps | EventListItemDetailsWithEventIdProps;
+export type EventListItemDetailsContentProps = EventListItemDetailsBaseProps & {
+    /** Resolved event content rendered by the details layout. */
+    event: EventListItemDetailsEvent;
+};
+export type ProbabilityMode = "yes" | "no";
+export type ProbabilityModeConfig = {
+    switchLabel: string;
+    sourceOutcomeLabel: string;
+    transformProbability: (value: number) => number;
+};
+export type GraphSectionOutcomeByVenue = OutcomeByVenue;
+export type GraphSectionVenue = GraphSectionOutcomeByVenue["venue"];
+export type NormalizedVenueProbability = {
+    venue: GraphSectionVenue;
+    venueLabel: string;
+    market: GraphSectionOutcomeByVenue["market"];
+    outcome: GraphSectionOutcomeByVenue["outcome"];
+    probability: number | undefined;
+    color: string;
+};
+export type VenueChartSeries = {
+    id: string;
+    venue: GraphSectionVenue;
+    color: string;
+    points: LineChartPoint[];
+    lineWidth?: number;
+    lineStyle?: "solid" | "dotted" | "dashed";
+};
+export type EventListItemDetailsGraphSectionProps = {
+    /** Class name overrides shared with the parent details component. */
+    classNames?: EventListItemDetailsClassNames;
+    /** Chart type currently selected for the graph section. */
+    selectedChartType: LineChartType;
+    /** Venue metadata used to enrich series labels and pills. */
+    venueInfo?: EventListItemVenueInfoMap;
+    /** Venue markets used to build the chart series. */
+    venueMarkets: EventListItemDetailsContentProps["event"]["venueMarkets"];
+    /** Live outcome prices keyed by outcome ID. */
+    livePrices: Map<string, number>;
+    /** Override live WS subscriptions for the chart hook.
+     *  Set to `false` when a parent manages subscriptions centrally. */
+    live?: boolean;
+};

package/dist/types/events/item-details/event-list-item-details.types.d.ts

@@ -0,0 +1,116 @@
+import type { ChartTimeRange, EventTradingState } from "@agg-build/hooks";
+import type { LineChartPoint, LineChartType } from "../../primitives/chart";
+import type { EventListItemVenueInfoMap, VenueEventWithMarkets } from "../item/event-list-item.types";
+import type { OutcomeByVenue } from "./event-list-item-details.utils";
+export type EventListItemDetailsEvent = VenueEventWithMarkets;
+/** @deprecated Use `ChartTimeRange` from `@agg-build/hooks` instead. */
+export type EventListItemDetailsTimeRange = ChartTimeRange;
+export type EventListItemDetailsStat = {
+    label: string;
+    value: string;
+    delta?: string;
+    deltaTone?: "positive" | "negative" | "neutral";
+};
+export type EventListItemDetailsClassNames = Partial<{
+    root: string;
+    header: string;
+    title: string;
+    headerPills: string;
+    headerStats: string;
+    summary: string;
+    outcomeBadges: string;
+    segmentedControl: string;
+    chart: string;
+    footer: string;
+    timeRange: string;
+}>;
+export type EventListItemDetailsBaseProps = {
+    /** Class name overrides for the details card slots. */
+    classNames?: EventListItemDetailsClassNames;
+    /** Market ID to preselect after event sync is initialized. */
+    defaultMarketId?: string;
+    /** Outcome ID to preselect alongside defaultMarketId. */
+    defaultOutcomeId?: string;
+    /** Venue metadata used to enrich venue labels in the details card. */
+    venueInfo?: EventListItemVenueInfoMap;
+    /** Optional stat pills shown in the details summary area. */
+    detailsStats?: EventListItemDetailsStat[];
+    /** Trading state data used to drive prices and market status. */
+    eventTradingState?: EventTradingState;
+    /** Whether the details card should render its loading state. */
+    isLoading?: boolean;
+    /** Accessible label applied to the interactive details card. */
+    ariaLabel?: string;
+    /** Initially selected chart time range. */
+    defaultTimeRange?: EventListItemDetailsTimeRange;
+    /** Called when the details card is clicked. */
+    onClick?: (event?: EventListItemDetailsEvent) => void;
+};
+export type EventListItemDetailsLoadingProps = EventListItemDetailsBaseProps & {
+    /** Forces the details component into its loading state. */
+    isLoading: true;
+    /** Prevents passing a resolved event while loading. */
+    event?: never;
+    /** Optional event ID used to derive loading-state cache context. */
+    eventId?: string;
+};
+export type EventListItemDetailsWithEventProps = EventListItemDetailsBaseProps & {
+    /** Fully resolved event rendered inside the details card. */
+    event: EventListItemDetailsEvent;
+    /** Optional explicit event ID override. */
+    eventId?: string;
+    /** Marks the details card as loaded when event data is present. */
+    isLoading?: false;
+};
+export type EventListItemDetailsWithEventIdProps = EventListItemDetailsBaseProps & {
+    /** Prevents passing a full event object in ID-driven mode. */
+    event?: never;
+    /** Event ID used to fetch or resolve the details data. */
+    eventId: string;
+    /** Marks the details card as loaded when ID-driven fetching is used. */
+    isLoading?: false;
+};
+export type EventListItemDetailsProps = EventListItemDetailsLoadingProps | EventListItemDetailsWithEventProps | EventListItemDetailsWithEventIdProps;
+export type EventListItemDetailsContentProps = EventListItemDetailsBaseProps & {
+    /** Resolved event content rendered by the details layout. */
+    event: EventListItemDetailsEvent;
+};
+export type ProbabilityMode = "yes" | "no";
+export type ProbabilityModeConfig = {
+    switchLabel: string;
+    sourceOutcomeLabel: string;
+    transformProbability: (value: number) => number;
+};
+export type GraphSectionOutcomeByVenue = OutcomeByVenue;
+export type GraphSectionVenue = GraphSectionOutcomeByVenue["venue"];
+export type NormalizedVenueProbability = {
+    venue: GraphSectionVenue;
+    venueLabel: string;
+    market: GraphSectionOutcomeByVenue["market"];
+    outcome: GraphSectionOutcomeByVenue["outcome"];
+    probability: number | undefined;
+    color: string;
+};
+export type VenueChartSeries = {
+    id: string;
+    venue: GraphSectionVenue;
+    color: string;
+    points: LineChartPoint[];
+    lineWidth?: number;
+    lineStyle?: "solid" | "dotted" | "dashed";
+};
+export type EventListItemDetailsGraphSectionProps = {
+    /** Class name overrides shared with the parent details component. */
+    classNames?: EventListItemDetailsClassNames;
+    /** Chart type currently selected for the graph section. */
+    selectedChartType: LineChartType;
+    /** Venue metadata used to enrich series labels and pills. */
+    venueInfo?: EventListItemVenueInfoMap;
+    /** Venue markets used to build the chart series. */
+    venueMarkets: EventListItemDetailsContentProps["event"]["venueMarkets"];
+    /** Live outcome prices keyed by outcome ID. */
+    livePrices: Map<string, number>;
+    /** Override live WS subscriptions for the chart hook.
+     *  Set to `false` when a parent manages subscriptions centrally. */
+    live?: boolean;
+};

package/dist/types/events/item-details/event-list-item-details.utils.d.mts

@@ -0,0 +1,75 @@
+import type { ChartTimeRange, MarketChartCandle, MarketChartData, ScaledCandlePoint, Venue, VenueMarket, VenueMarketOutcome } from "@agg-build/hooks";
+import type { LineChartPoint } from "../../primitives/chart";
+export type OutcomeByVenue = {
+    venue: VenueMarket["venue"];
+    market: VenueMarket;
+    outcome: VenueMarketOutcome;
+};
+export type OutcomeSelectorItem = {
+    key: string;
+    label: string;
+    displayLabel: string;
+};
+export declare const sortOutcomeSelectorOutcomes: (outcomes: VenueMarketOutcome[]) => VenueMarketOutcome[];
+export declare const isDateLikeLabel: (value: string) => boolean;
+export declare const formatDateLabel: (value: string) => string;
+export declare const formatXAxisDateLabel: (timestamp: number) => string;
+/**
+ * Returns the time window for the given range in seconds.
+ *
+ * @param range The time range.
+ * @returns The time window.
+ */
+export declare const getTimeWindowByRange: (range: ChartTimeRange) => {
+    startTs: number;
+    endTs: number;
+    intervalMinutes: number;
+};
+export declare const resolveOutcomeLabels: (venueMarkets: VenueMarket[]) => string[];
+export declare const resolveOutcomeSelectorItems: (venueMarkets: VenueMarket[]) => OutcomeSelectorItem[];
+export declare const resolveDefaultOutcomeLabel: (outcomeLabels: string[]) => string | undefined;
+export declare const matchOutcomeByLabel: (outcome: VenueMarketOutcome, selectedOutcomeLabel: string) => boolean;
+export declare const resolveOutcomesByVenue: (venueMarkets: VenueMarket[], selectedOutcomeLabel: string) => OutcomeByVenue[];
+export declare const resolveOutcomePercentValue: (outcome: VenueMarketOutcome) => number | undefined;
+export declare const buildPriceHistoryGroups: (selectedOutcomes: OutcomeByVenue[], fallbackMarketId?: string) => Array<{
+    venue: Venue;
+    venueMarketOutcomeIds: string[];
+}>;
+export declare const resolveSeriesColor: (venue: VenueMarket["venue"] | string, index: number, isDarkTheme?: boolean) => string;
+/**
+ * Convert scaled candle points (from useLiveCandleOverlay) to LineChartPoint[].
+ * Maps candle close → line chart value. Used as a fallback when orderbook history
+ * is unavailable but candlestick data exists.
+ */
+export declare const scaledCandlesToLineChartPoints: (candles: ScaledCandlePoint[]) => LineChartPoint[];
+export declare const resolveCanonicalMarketId: (venueMarkets: Array<Pick<VenueMarket, "marketId">>, fallbackMarketId?: string | null) => string | undefined;
+export declare const toChartDisplayValue: (value: number | undefined, transformProbability: (value: number) => number) => number | undefined;
+export declare const marketChartCandleToLineChartPoint: (candle: MarketChartCandle, transformProbability: (value: number) => number) => LineChartPoint;
+export declare const marketChartCandleToScaledCandlePoint: (candle: MarketChartCandle, transformProbability: (value: number) => number) => ScaledCandlePoint;
+export declare const resolveMarketChartVenueSeries: ({ chartData, transformProbability, }: {
+    chartData: MarketChartData | null | undefined;
+    transformProbability: (value: number) => number;
+}) => Array<{
+    venue: string;
+    points: LineChartPoint[];
+}>;
+export declare const aggregateMarketChartCandles: (candles: MarketChartCandle[]) => MarketChartCandle[];
+export declare const resolveMarketChartDisplaySeries: ({ chartData, selectedVenue, transformProbability, }: {
+    chartData: MarketChartData | null | undefined;
+    selectedVenue?: string | null;
+    transformProbability: (value: number) => number;
+}) => Array<{
+    venue: string;
+    points: LineChartPoint[];
+}>;
+export declare const clampProbability: (value: number) => number;
+export declare const resolveAverageProbability: (values: Array<number | undefined>) => number | undefined;
+export declare const resolveMarketChartLiveState: ({ chartData, selectedVenue, transformProbability, }: {
+    chartData: MarketChartData | null | undefined;
+    selectedVenue?: string | null;
+    transformProbability: (value: number) => number;
+}) => {
+    liveCandle: ScaledCandlePoint | null;
+    lineValue: number | undefined;
+    live: boolean;
+};