@agg-build/ui 2.4.1 → 2.4.3

package/dist/{chunk-G5Y45GIA.mjs → chunk-STL4ZHLP.mjs}

@@ -2,7 +2,9 @@
 import {
   Card,
   DEFAULT_VENUE_COLOR,
+  Icon,
   Skeleton,
+  VenueLogo,
   __spreadProps,
   __spreadValues,
   cn,
@@ -18,7 +20,7 @@ import {
   selectPrimaryVenueMarket,
   skeletonViews,
   sortOutcomes
-} from "./chunk-2ET5CXOU.mjs";
+} from "./chunk-WZ55ERDO.mjs";
 
 // src/trading/trading-context/index.tsx
 import { useEventTradingContext } from "@agg-build/hooks";
@@ -166,8 +168,10 @@ var getTradingSlippageLabel = (value) => {
 };
 
 // src/trading/settlement/index.tsx
-import { useLabels } from "@agg-build/hooks";
-import { useMemo } from "react";
+import {
+  useLabels
+} from "@agg-build/hooks";
+import { useEffect, useMemo, useState } from "react";
 
 // src/trading/settlement/settlement-text-renderer.tsx
 import { Fragment } from "react";
@@ -367,8 +371,139 @@ var SettlementTextRenderer = ({
 SettlementTextRenderer.displayName = "SettlementTextRenderer";
 
 // src/trading/settlement/index.tsx
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var SETTLEMENT_SECTION_ID = "agg-settlement-section";
+var getSettlementDifferenceId = (sectionId, canonicalKey) => {
+  return `${sectionId}-difference-${canonicalKey}`;
+};
+var dateOnlyRegex = /^(\d{4})-(\d{2})-(\d{2})$/;
+var isoTimestampWithTimezoneRegex = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}(?::\d{2}(?:\.\d{1,9})?)?(?:Z|[+-]\d{2}:?\d{2})$/i;
+var normalizeDifferenceText = (value) => {
+  return value.trim().toLowerCase().replace(/[^a-z0-9]+/g, "_").replace(/^_+|_+$/g, "");
+};
+var resolveCanonicalDifferenceKey = (difference) => {
+  const normalizedType = normalizeDifferenceText(difference.type);
+  const combined = normalizeDifferenceText(`${difference.type} ${difference.title}`);
+  if (combined.includes("start_date") || combined.includes("open_date")) return "start_date";
+  if (combined.includes("end_date") || combined.includes("close_date") || combined.includes("closing_date") || combined.includes("expiration_date") || combined.includes("expiry_date")) {
+    return "end_date";
+  }
+  if (combined.includes("resolution_timing") || combined.includes("resolution_date") || combined.includes("resolution_deadline") || combined.includes("settlement_date") || combined.includes("settlement_deadline") || combined.includes("settlement_timing")) {
+    return "resolution_timing";
+  }
+  return normalizedType || "other";
+};
+var parseSettlementDateMs = (value) => {
+  const trimmed = value.trim();
+  const dateOnlyMatch = dateOnlyRegex.exec(trimmed);
+  if (dateOnlyMatch) {
+    const [, year, month, day] = dateOnlyMatch;
+    return Date.UTC(Number(year), Number(month) - 1, Number(day));
+  }
+  if (!isoTimestampWithTimezoneRegex.test(trimmed)) return null;
+  const ms = Date.parse(trimmed);
+  return Number.isNaN(ms) ? null : ms;
+};
+var isDateLikeDifference = (canonicalKey) => {
+  return canonicalKey === "resolution_timing" || canonicalKey === "start_date" || canonicalKey === "end_date";
+};
+var hasEqualNormalizedDateValues = (difference, canonicalKey) => {
+  if (!isDateLikeDifference(canonicalKey)) return false;
+  const values = Object.values(difference.perVenue);
+  if (values.length < 2) return false;
+  const timestamps = values.map(parseSettlementDateMs);
+  if (timestamps.some((timestamp) => timestamp === null)) return false;
+  return new Set(timestamps).size === 1;
+};
+var resolveDifferenceSeverity = (difference, canonicalKey) => {
+  var _a;
+  const combined = normalizeDifferenceText(
+    `${difference.type} ${difference.title} ${(_a = difference.summary) != null ? _a : ""}`
+  );
+  if (isDateLikeDifference(canonicalKey)) return "critical";
+  if (canonicalKey === "scope" || canonicalKey === "threshold" || canonicalKey === "edge_cases") {
+    return "critical";
+  }
+  if (combined.includes("conflict") || combined.includes("void") || combined.includes("cancel") || combined.includes("postpone") || combined.includes("recount") || combined.includes("overtime") || combined.includes("extra_time")) {
+    return "critical";
+  }
+  return "informational";
+};
+var mergePerVenueValues = (current, next) => {
+  return Object.entries(next).reduce(
+    (merged, [venue, value]) => {
+      if (merged[venue] === void 0) merged[venue] = value;
+      return merged;
+    },
+    __spreadValues({}, current)
+  );
+};
+var prepareSettlementDifferences = (differences) => {
+  const byCanonicalKey = /* @__PURE__ */ new Map();
+  for (const [originalIndex, difference] of (differences != null ? differences : []).entries()) {
+    const canonicalKey = resolveCanonicalDifferenceKey(difference);
+    if (hasEqualNormalizedDateValues(difference, canonicalKey)) continue;
+    const existing = byCanonicalKey.get(canonicalKey);
+    if (existing) {
+      byCanonicalKey.set(canonicalKey, __spreadProps(__spreadValues({}, existing), {
+        perVenue: mergePerVenueValues(existing.perVenue, difference.perVenue)
+      }));
+      continue;
+    }
+    byCanonicalKey.set(canonicalKey, __spreadProps(__spreadValues({}, difference), {
+      canonicalKey,
+      severity: resolveDifferenceSeverity(difference, canonicalKey),
+      originalIndex
+    }));
+  }
+  return Array.from(byCanonicalKey.values()).sort((left, right) => {
+    const severityDelta = Number(right.severity === "critical") - Number(left.severity === "critical");
+    if (severityDelta !== 0) return severityDelta;
+    return left.originalIndex - right.originalIndex;
+  });
+};
+var formatVenueFallbackLabel = (venue) => {
+  return venue.split(/[-_\s]+/).filter(Boolean).map((part) => `${part.slice(0, 1).toUpperCase()}${part.slice(1)}`).join(" ");
+};
+var resolveSettlementVenueLabel = (venue, labels) => {
+  var _a;
+  return (_a = labels.venues[venue]) != null ? _a : formatVenueFallbackLabel(venue);
+};
+var resolveDifferenceVenueKeys = (difference, settlementVenues) => {
+  const explicitVenues = Object.keys(difference.perVenue);
+  if (!isDateLikeDifference(difference.canonicalKey)) return explicitVenues;
+  const allVenues = [...settlementVenues != null ? settlementVenues : [], ...explicitVenues];
+  return Array.from(new Set(allVenues.filter((venue) => venue.trim().length > 0)));
+};
+var resolveDifferenceIconClassName = (canonicalKey) => {
+  if (canonicalKey.includes("source") || canonicalKey.includes("url")) return "fi-rr-world";
+  if (canonicalKey === "resolution_timing" || canonicalKey.includes("timing")) {
+    return "fi-rr-clock";
+  }
+  if (canonicalKey === "start_date" || canonicalKey.includes("start"))
+    return "fi-rr-calendar-clock";
+  if (canonicalKey === "end_date" || canonicalKey.includes("end")) return "fi-rr-calendar-clock";
+  if (canonicalKey.includes("cancel") || canonicalKey.includes("void") || canonicalKey.includes("postpone")) {
+    return "fi-rr-ban";
+  }
+  if (canonicalKey === "edge_cases" || canonicalKey.includes("edge")) {
+    return "fi-rr-triangle-warning";
+  }
+  if (canonicalKey === "scope") return "fi-rr-layers";
+  if (canonicalKey === "threshold") return "fi-rr-tachometer-alt-fastest";
+  if (canonicalKey.includes("wording")) return "fi-rr-document";
+  return "fi-rr-info";
+};
+var buildSettlementVenueRules = ({
+  eventBlock,
+  marketBlock,
+  primaryRulesBlock,
+  settlementVenueRules
+}) => {
+  if (settlementVenueRules) return settlementVenueRules;
+  const content = [marketBlock == null ? void 0 : marketBlock.content, primaryRulesBlock == null ? void 0 : primaryRulesBlock.content, eventBlock == null ? void 0 : eventBlock.content].filter((value) => typeof value === "string" && value.trim().length > 0).join("\n\n");
+  return content ? [{ venue: "polymarket", content }] : [];
+};
 var getSettlementHeaderClassName = () => {
   return "flex items-center justify-between gap-4";
 };
@@ -380,9 +515,12 @@ var Settlement = ({
   eventDescription,
   marketDescription,
   primaryRules,
+  settlementDiff,
+  settlementVenues,
+  settlementVenueRules,
   isLoading = false
 }) => {
-  var _a, _b, _c;
+  var _a, _b, _c, _d, _e;
   const labels = useLabels();
   const blocks = useMemo(
     () => dedupeSettlementSources({
@@ -392,9 +530,34 @@ var Settlement = ({
     }),
     [eventDescription, marketDescription, primaryRules]
   );
+  const settlementDifferences = useMemo(
+    () => prepareSettlementDifferences(settlementDiff == null ? void 0 : settlementDiff.differences),
+    [settlementDiff == null ? void 0 : settlementDiff.differences]
+  );
   const eventBlock = (_a = blocks.find((block) => block.key === "eventDescription")) != null ? _a : null;
   const marketBlock = (_b = blocks.find((block) => block.key === "marketDescription")) != null ? _b : null;
   const primaryRulesBlock = (_c = blocks.find((block) => block.key === "primaryRules")) != null ? _c : null;
+  const venueRuleBlocks = useMemo(
+    () => buildSettlementVenueRules({
+      eventBlock,
+      marketBlock,
+      primaryRulesBlock,
+      settlementVenueRules
+    }),
+    [eventBlock, marketBlock, primaryRulesBlock, settlementVenueRules]
+  );
+  const defaultOpenDifferenceKey = (_e = (_d = settlementDifferences[0]) == null ? void 0 : _d.canonicalKey) != null ? _e : null;
+  const [openDifferenceKeys, setOpenDifferenceKeys] = useState(
+    () => defaultOpenDifferenceKey ? [defaultOpenDifferenceKey] : []
+  );
+  useEffect(() => {
+    setOpenDifferenceKeys(defaultOpenDifferenceKey ? [defaultOpenDifferenceKey] : []);
+  }, [defaultOpenDifferenceKey]);
+  const handleToggleDifference = (canonicalKey) => {
+    setOpenDifferenceKeys(
+      (currentKeys) => currentKeys.includes(canonicalKey) ? currentKeys.filter((currentKey) => currentKey !== canonicalKey) : [...currentKeys, canonicalKey]
+    );
+  };
   if (isLoading) {
     return /* @__PURE__ */ jsx2(
       Skeleton,
@@ -406,6 +569,124 @@ var Settlement = ({
     );
   }
   const resolvedSectionLabel = sectionLabel === defaultSettlementSectionLabel ? labels.trading.settlementSection : sectionLabel;
+  if (settlementDifferences.length > 0) {
+    return /* @__PURE__ */ jsxs2(
+      Card,
+      {
+        id,
+        className: cn(
+          "group/agg-settlement-card",
+          "flex w-full flex-col items-start gap-4 rounded-agg-xl border border-agg-separator bg-agg-secondary p-5 shadow-none hover:shadow-none sm:gap-5",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsxs2("div", { className: "agg-settlement-header flex w-full flex-col items-start gap-1 text-agg-muted-foreground sm:flex-row sm:items-center sm:justify-between sm:gap-4", children: [
+            /* @__PURE__ */ jsx2("p", { className: "shrink-0 text-agg-xs font-agg-bold leading-agg-4 uppercase", children: resolvedSectionLabel }),
+            question ? /* @__PURE__ */ jsx2("p", { className: "agg-settlement-question min-w-0 text-agg-sm font-agg-normal leading-agg-5 sm:max-w-[314px] sm:truncate", children: question }) : null
+          ] }),
+          /* @__PURE__ */ jsxs2("div", { className: "agg-settlement-differences flex w-full flex-col items-start gap-5", children: [
+            /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx2("p", { className: "text-agg-sm font-agg-bold leading-agg-5 text-agg-foreground", children: "Key differences" }),
+              /* @__PURE__ */ jsx2("span", { className: "flex size-4 shrink-0 items-center justify-center rounded-agg-full bg-agg-primary text-[10px] font-agg-bold leading-[14px] text-agg-on-primary", children: settlementDifferences.length })
+            ] }),
+            /* @__PURE__ */ jsx2("div", { className: "flex w-full flex-col items-start gap-5", children: settlementDifferences.map((difference) => {
+              const venueKeys = resolveDifferenceVenueKeys(difference, settlementVenues);
+              const isExpanded = openDifferenceKeys.includes(difference.canonicalKey) && venueKeys.length > 0;
+              return /* @__PURE__ */ jsxs2(
+                "div",
+                {
+                  id: getSettlementDifferenceId(id, difference.canonicalKey),
+                  className: "agg-settlement-difference flex w-full flex-col items-start gap-2 rounded-agg-lg",
+                  children: [
+                    /* @__PURE__ */ jsxs2(
+                      "button",
+                      {
+                        type: "button",
+                        className: "flex w-full cursor-pointer items-start gap-2 text-left",
+                        "aria-expanded": isExpanded,
+                        onClick: () => handleToggleDifference(difference.canonicalKey),
+                        children: [
+                          /* @__PURE__ */ jsx2(
+                            "i",
+                            {
+                              className: cn(
+                                "fi",
+                                resolveDifferenceIconClassName(difference.canonicalKey),
+                                "inline-flex size-4! shrink-0 items-center justify-center text-[16px] leading-none text-agg-muted-foreground"
+                              ),
+                              "aria-hidden": "true"
+                            }
+                          ),
+                          /* @__PURE__ */ jsx2("p", { className: "min-w-0 text-agg-sm font-agg-normal leading-agg-5 text-agg-foreground break-words [overflow-wrap:anywhere]", children: difference.title }),
+                          /* @__PURE__ */ jsx2(
+                            Icon,
+                            {
+                              name: isExpanded ? "chevron-up" : "chevron-down",
+                              className: "size-4! mt-0.5 shrink-0 text-agg-foreground",
+                              "aria-hidden": "true"
+                            }
+                          )
+                        ]
+                      }
+                    ),
+                    isExpanded ? /* @__PURE__ */ jsx2("dl", { className: "flex w-full flex-col items-start gap-1 px-6", children: venueKeys.map((venue) => {
+                      var _a2;
+                      const venueValue = (_a2 = difference.perVenue[venue]) != null ? _a2 : labels.trading.settlementValueUnavailable;
+                      const venueLabel = resolveSettlementVenueLabel(venue, labels);
+                      return /* @__PURE__ */ jsxs2("div", { className: "flex w-full items-start gap-2", children: [
+                        /* @__PURE__ */ jsx2(
+                          VenueLogo,
+                          {
+                            venue,
+                            size: "small",
+                            className: "mt-0.5 size-4",
+                            ariaLabel: venueLabel
+                          }
+                        ),
+                        /* @__PURE__ */ jsx2("dt", { className: "w-[88px] shrink-0 text-agg-sm font-agg-normal leading-agg-5 text-agg-foreground", children: venueLabel }),
+                        /* @__PURE__ */ jsx2("dd", { className: "min-w-0 flex-1 text-agg-sm font-agg-normal leading-agg-5 text-agg-muted-foreground break-words [overflow-wrap:anywhere]", children: venueValue })
+                      ] }, venue);
+                    }) }) : null
+                  ]
+                },
+                difference.canonicalKey
+              );
+            }) }),
+            venueRuleBlocks.length > 0 ? /* @__PURE__ */ jsxs2(Fragment2, { children: [
+              /* @__PURE__ */ jsx2("div", { className: "h-px w-full bg-agg-separator" }),
+              /* @__PURE__ */ jsx2("p", { className: "text-agg-sm font-agg-bold leading-agg-5 text-agg-foreground", children: "Full rules by venue" }),
+              /* @__PURE__ */ jsx2("div", { className: "flex w-full flex-col items-start gap-4", children: venueRuleBlocks.map((rule) => {
+                const venueLabel = resolveSettlementVenueLabel(rule.venue, labels);
+                return /* @__PURE__ */ jsxs2("details", { className: "group/agg-settlement-rule w-full", children: [
+                  /* @__PURE__ */ jsxs2("summary", { className: "flex cursor-pointer list-none items-center gap-2 text-agg-sm font-agg-normal leading-agg-5 text-agg-foreground marker:hidden", children: [
+                    /* @__PURE__ */ jsx2(
+                      VenueLogo,
+                      {
+                        venue: rule.venue,
+                        size: "small",
+                        className: "size-4",
+                        ariaLabel: venueLabel
+                      }
+                    ),
+                    /* @__PURE__ */ jsx2("span", { children: venueLabel }),
+                    /* @__PURE__ */ jsx2(
+                      Icon,
+                      {
+                        name: "chevron-down",
+                        className: "size-4! shrink-0 text-agg-foreground transition-transform group-open/agg-settlement-rule:rotate-180",
+                        "aria-hidden": "true"
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsx2("div", { className: "mt-3 pl-6", children: /* @__PURE__ */ jsx2(SettlementTextRenderer, { content: rule.content }) })
+                ] }, rule.venue);
+              }) })
+            ] }) : null
+          ] })
+        ]
+      }
+    );
+  }
   return /* @__PURE__ */ jsxs2(
     Card,
     {
@@ -420,7 +701,7 @@ var Settlement = ({
           /* @__PURE__ */ jsx2("p", { className: "text-agg-xs font-agg-bold leading-agg-4 uppercase text-agg-muted-foreground", children: resolvedSectionLabel }),
           question ? /* @__PURE__ */ jsx2("p", { className: "agg-settlement-question text-agg-sm font-agg-bold leading-agg-5 text-agg-foreground", children: question }) : null
         ] }),
-        blocks.length === 0 ? /* @__PURE__ */ jsx2("p", { className: "agg-settlement-empty text-agg-sm leading-agg-5 text-agg-muted-foreground", children: labels.trading.settlementEmpty }) : /* @__PURE__ */ jsxs2("div", { className: "agg-settlement-sections flex flex-col gap-4", children: [
+        blocks.length === 0 && settlementDifferences.length === 0 ? /* @__PURE__ */ jsx2("p", { className: "agg-settlement-empty text-agg-sm leading-agg-5 text-agg-muted-foreground", children: labels.trading.settlementEmpty }) : /* @__PURE__ */ jsxs2("div", { className: "agg-settlement-sections flex flex-col gap-4", children: [
           eventBlock || marketBlock ? /* @__PURE__ */ jsxs2(
             "div",
             {
@@ -1320,6 +1601,9 @@ export {
   getTradingSlippageLabel,
   getFirstSettlementParagraph,
   SETTLEMENT_SECTION_ID,
+  getSettlementDifferenceId,
+  prepareSettlementDifferences,
+  resolveDifferenceIconClassName,
   Settlement,
   resolveTradingStatePresentation,
   resolveTradingStateBadgeClassName,

package/dist/{chunk-2ET5CXOU.mjs → chunk-WZ55ERDO.mjs}

@@ -5886,17 +5886,10 @@ var SettlementSkeletonView = ({
       children: [
         /* @__PURE__ */ jsxs102("div", { className: "flex w-full items-center justify-between gap-4", children: [
           /* @__PURE__ */ jsx105(SkeletonBlock, { className: "h-4 w-[81px] rounded-agg-sm" }),
-          /* @__PURE__ */ jsx105(SkeletonBlock, { className: "h-5 w-full max-w-[240px] rounded-agg-sm" })
+          /* @__PURE__ */ jsx105(SkeletonBlock, { className: "h-5 w-[240px] max-w-[60%] rounded-agg-sm" })
         ] }),
-        /* @__PURE__ */ jsxs102("div", { className: "flex w-full flex-col gap-3", children: [
-          /* @__PURE__ */ jsx105(SkeletonBlock, { className: "h-5 w-[200px] rounded-agg-sm" }),
-          /* @__PURE__ */ jsxs102("div", { className: "flex flex-col gap-2", children: [
-            /* @__PURE__ */ jsx105(SkeletonBlock, { className: "h-4 w-full max-w-[320px] rounded-agg-sm" }),
-            /* @__PURE__ */ jsx105(SkeletonBlock, { className: "h-4 w-full max-w-[280px] rounded-agg-sm" })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsx105("div", { className: "h-px w-full bg-agg-separator" }),
-        /* @__PURE__ */ jsxs102("div", { className: "flex w-full flex-col gap-3", children: [
+        /* @__PURE__ */ jsx105(SkeletonBlock, { className: "h-5 w-[200px] rounded-agg-sm" }),
+        /* @__PURE__ */ jsxs102("div", { className: "flex w-full flex-col gap-4", children: [
           /* @__PURE__ */ jsxs102("div", { className: "flex items-center gap-2", children: [
             /* @__PURE__ */ jsx105(SkeletonBlock, { className: "size-4 rounded-agg-sm" }),
             /* @__PURE__ */ jsx105(SkeletonBlock, { className: "h-5 w-[100px] rounded-agg-sm" })