@agg-build/ui 1.0.1 → 1.1.0

package/dist/{chunk-HD6HBTK2.mjs → chunk-KDMNFHPL.mjs}

@@ -1,18 +1,23 @@
 "use client";
 import {
+  Card,
   DEFAULT_VENUE_COLOR,
+  Skeleton,
   __spreadProps,
   __spreadValues,
+  cn,
   fallbackLineColors,
   formatMarketProbabilityPercent,
+  formatUsd,
   getVenueSummary,
   normalizeProbability,
   normalizeVenueMarketCluster,
   resolveOutcomeTitle,
   resolveVenueLineColor,
   selectPrimaryVenueMarket,
+  skeletonViews,
   sortOutcomes
-} from "./chunk-YZNO6IUD.mjs";
+} from "./chunk-R6DETAZ6.mjs";
 
 // src/trading/trading-context/index.tsx
 import { useEventTradingContext } from "@agg-build/hooks";
@@ -112,8 +117,340 @@ var resolveUnifiedOrderBookEntries = ({
   return [...askEntries, spreadEntry, ...bidEntries];
 };
 
-// src/events/item-details/event-list-item-details.utils.ts
+// src/trading/utils.ts
+import { resolveAggUiLabels } from "@agg-build/hooks";
 import dayjs from "dayjs";
+var defaultLabels = resolveAggUiLabels("en-US");
+var defaultSettlementSectionLabel = defaultLabels.trading.settlementSection;
+var defaultTradingDisclaimer = defaultLabels.trading.disclaimer;
+var getTradingDateLabel = (value) => {
+  const parsedValue = dayjs(value);
+  if (!parsedValue.isValid()) {
+    return typeof value === "string" ? value : "";
+  }
+  return parsedValue.format("MMM D, YYYY");
+};
+var getTradingVenueLabel = (venue, label) => {
+  var _a;
+  if (label) return label;
+  if (!venue) return "Unknown";
+  return (_a = defaultLabels.venues[venue]) != null ? _a : venue;
+};
+var getTradingValueLabel = ({
+  amount,
+  minimumFractionDigits = 0,
+  maximumFractionDigits = 2
+}) => {
+  return amount.toLocaleString("en-US", {
+    style: "currency",
+    currency: "USD",
+    minimumFractionDigits,
+    maximumFractionDigits
+  });
+};
+var getTradingPriceLabel = (value) => {
+  return `${Math.round(value * 100)}\xA2`;
+};
+var getTradingAveragePriceLabel = (value) => {
+  return defaultLabels.trading.averagePrice(value);
+};
+var getTradingBalanceLabel = (value) => {
+  return defaultLabels.trading.balance(formatUsd(value));
+};
+var getTradingSharesLabel = (value) => {
+  return defaultLabels.trading.shares(value);
+};
+var getTradingSlippageLabel = (value) => {
+  return defaultLabels.trading.slippage(value);
+};
+
+// src/trading/settlement/index.tsx
+import { useLabels } from "@agg-build/hooks";
+import { useMemo } from "react";
+
+// src/trading/settlement/settlement-text-renderer.tsx
+import { Fragment } from "react";
+
+// src/trading/settlement/settlement-text.utils.ts
+var stripHtmlFragments = (text) => {
+  return text.replace(/<\s*p\s*>/gi, "").replace(/<\s*\/\s*p\s*>/gi, "\n\n").replace(/<\s*br\s*\/?\s*>/gi, "\n").replace(/\r\n/g, "\n");
+};
+var isListLine = (line) => /^\s*[-*]\s+/.test(line);
+var stripBullet = (line) => line.replace(/^\s*[-*]\s+/, "").trim();
+var parseSettlementBlocks = (input) => {
+  const normalized = stripHtmlFragments(input).trim();
+  if (!normalized) return [];
+  const paragraphs = normalized.split(/\n{2,}/);
+  const blocks = [];
+  for (const rawParagraph of paragraphs) {
+    const lines = rawParagraph.split("\n").map((line) => line.replace(/\s+$/, "")).filter((line) => line.trim().length > 0);
+    if (lines.length === 0) continue;
+    if (lines.every(isListLine)) {
+      blocks.push({ kind: "list", items: lines.map(stripBullet) });
+      continue;
+    }
+    blocks.push({ kind: "paragraph", lines: lines.map((line) => line.trim()) });
+  }
+  return blocks;
+};
+var getFirstSettlementParagraph = (input) => {
+  if (!input) return "";
+  const blocks = parseSettlementBlocks(input);
+  const firstParagraph = blocks.find((block) => block.kind === "paragraph");
+  if (!firstParagraph || firstParagraph.kind !== "paragraph") return "";
+  return firstParagraph.lines.join(" ").trim();
+};
+var normalizeSettlementForCompare = (input) => {
+  return stripHtmlFragments(input).replace(/\s+/g, " ").trim().toLowerCase();
+};
+var dedupeSettlementSources = (sources) => {
+  const order = ["eventDescription", "marketDescription", "primaryRules"];
+  const seen = /* @__PURE__ */ new Set();
+  const result = [];
+  for (const key of order) {
+    const value = sources[key];
+    if (typeof value !== "string") continue;
+    const trimmed = value.trim();
+    if (!trimmed) continue;
+    const fingerprint = normalizeSettlementForCompare(trimmed);
+    if (!fingerprint) continue;
+    if (seen.has(fingerprint)) continue;
+    seen.add(fingerprint);
+    result.push({ key, content: trimmed });
+  }
+  return result;
+};
+
+// src/trading/settlement/settlement-text-renderer.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var inlineTokenRegex = new RegExp(
+  [
+    /\[([^\]\n]+)\]\(([^)\s]+)\)/.source,
+    // 1=link text, 2=link href
+    /\*\*([^*\n]+?)\*\*/.source,
+    // 3=bold inner
+    /`([^`\n]+?)`/.source,
+    // 4=code inner
+    /(https?:\/\/[^\s<>"'`]+)/.source
+    // 5=bare url
+  ].join("|"),
+  "g"
+);
+var trailingUrlPunctuationRegex = /[.,;:!?)\]]+$/;
+var isLinkMatch = (match) => match[1] !== void 0 && match[2] !== void 0;
+var linkClassName = "agg-settlement-text-link text-agg-primary underline hover:opacity-80";
+var renderInlineSegment = (text, baseKey) => {
+  const nodes = [];
+  let lastIndex = 0;
+  let segmentIndex = 0;
+  inlineTokenRegex.lastIndex = 0;
+  let match;
+  while ((match = inlineTokenRegex.exec(text)) !== null) {
+    let matchEnd = match.index + match[0].length;
+    let bareUrl = match[5];
+    if (bareUrl !== void 0) {
+      const trailing = trailingUrlPunctuationRegex.exec(bareUrl);
+      if (trailing) {
+        const trimmed = bareUrl.slice(0, bareUrl.length - trailing[0].length);
+        if (trimmed.length > "https://".length) {
+          bareUrl = trimmed;
+          matchEnd -= trailing[0].length;
+          inlineTokenRegex.lastIndex = matchEnd;
+        }
+      }
+    }
+    if (match.index > lastIndex) {
+      nodes.push(
+        /* @__PURE__ */ jsx(Fragment, { children: text.slice(lastIndex, match.index) }, `${baseKey}-text-${segmentIndex++}`)
+      );
+    }
+    if (isLinkMatch(match)) {
+      nodes.push(
+        /* @__PURE__ */ jsx(
+          "a",
+          {
+            href: match[2],
+            target: "_blank",
+            rel: "noopener noreferrer",
+            className: linkClassName,
+            children: match[1]
+          },
+          `${baseKey}-link-${segmentIndex++}`
+        )
+      );
+    } else if (match[3] !== void 0) {
+      nodes.push(
+        /* @__PURE__ */ jsx(
+          "strong",
+          {
+            className: "agg-settlement-text-bold font-agg-bold",
+            children: match[3]
+          },
+          `${baseKey}-bold-${segmentIndex++}`
+        )
+      );
+    } else if (match[4] !== void 0) {
+      nodes.push(
+        /* @__PURE__ */ jsx(
+          "code",
+          {
+            className: "agg-settlement-text-code rounded-agg-sm bg-agg-secondary-hover px-1 py-0.5 font-mono text-[0.875em]",
+            children: match[4]
+          },
+          `${baseKey}-code-${segmentIndex++}`
+        )
+      );
+    } else if (bareUrl !== void 0) {
+      nodes.push(
+        /* @__PURE__ */ jsx(
+          "a",
+          {
+            href: bareUrl,
+            target: "_blank",
+            rel: "noopener noreferrer",
+            className: linkClassName,
+            children: bareUrl
+          },
+          `${baseKey}-url-${segmentIndex++}`
+        )
+      );
+    }
+    lastIndex = matchEnd;
+  }
+  if (lastIndex < text.length) {
+    nodes.push(
+      /* @__PURE__ */ jsx(Fragment, { children: text.slice(lastIndex) }, `${baseKey}-text-${segmentIndex++}`)
+    );
+  }
+  return nodes;
+};
+var renderBlock = (block, blockIndex) => {
+  if (block.kind === "list") {
+    return /* @__PURE__ */ jsx(
+      "ul",
+      {
+        className: "agg-settlement-text-list list-disc pl-5 text-agg-sm leading-agg-5 text-agg-foreground",
+        children: block.items.map((item, itemIndex) => /* @__PURE__ */ jsx(
+          "li",
+          {
+            className: "agg-settlement-text-list-item",
+            children: renderInlineSegment(item, `block-${blockIndex}-item-${itemIndex}`)
+          },
+          `block-${blockIndex}-item-${itemIndex}`
+        ))
+      },
+      `block-${blockIndex}`
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      className: "agg-settlement-text-paragraph text-agg-sm leading-agg-5 text-agg-foreground break-words [overflow-wrap:anywhere]",
+      children: block.lines.map((line, lineIndex) => /* @__PURE__ */ jsxs(Fragment, { children: [
+        lineIndex > 0 ? /* @__PURE__ */ jsx("br", {}) : null,
+        renderInlineSegment(line, `block-${blockIndex}-line-${lineIndex}`)
+      ] }, `block-${blockIndex}-line-${lineIndex}`))
+    },
+    `block-${blockIndex}`
+  );
+};
+var SettlementTextRenderer = ({
+  content,
+  className
+}) => {
+  const blocks = parseSettlementBlocks(content);
+  if (blocks.length === 0) return null;
+  return /* @__PURE__ */ jsx("div", { className: cn("agg-settlement-text flex flex-col gap-2", className), children: blocks.map((block, blockIndex) => renderBlock(block, blockIndex)) });
+};
+SettlementTextRenderer.displayName = "SettlementTextRenderer";
+
+// src/trading/settlement/index.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var SETTLEMENT_SECTION_ID = "agg-settlement-section";
+var getSettlementHeaderClassName = () => {
+  return "flex items-center justify-between gap-4";
+};
+var Settlement = ({
+  className,
+  id = SETTLEMENT_SECTION_ID,
+  sectionLabel = defaultSettlementSectionLabel,
+  question,
+  eventDescription,
+  marketDescription,
+  primaryRules,
+  isLoading = false
+}) => {
+  var _a, _b, _c;
+  const labels = useLabels();
+  const blocks = useMemo(
+    () => dedupeSettlementSources({
+      eventDescription,
+      marketDescription,
+      primaryRules
+    }),
+    [eventDescription, marketDescription, primaryRules]
+  );
+  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;
+  if (isLoading) {
+    return /* @__PURE__ */ jsx2(
+      Skeleton,
+      {
+        ariaLabel: labels.trading.settlementLoading,
+        className,
+        view: skeletonViews.settlement
+      }
+    );
+  }
+  const resolvedSectionLabel = sectionLabel === defaultSettlementSectionLabel ? labels.trading.settlementSection : sectionLabel;
+  return /* @__PURE__ */ jsxs2(
+    Card,
+    {
+      id,
+      className: cn(
+        "group/agg-settlement-card",
+        "flex flex-col w-full gap-5 rounded-agg-xl border border-agg-separator bg-agg-secondary p-5 shadow-none hover:shadow-none",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs2("div", { className: cn("agg-settlement-header", getSettlementHeaderClassName()), children: [
+          /* @__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: [
+          eventBlock || marketBlock ? /* @__PURE__ */ jsxs2(
+            "div",
+            {
+              className: "agg-settlement-section agg-settlement-section-description",
+              "data-source": "description",
+              children: [
+                eventBlock ? /* @__PURE__ */ jsx2("div", { "data-source": "eventDescription", children: /* @__PURE__ */ jsx2(SettlementTextRenderer, { content: eventBlock.content }) }) : null,
+                eventBlock && marketBlock ? /* @__PURE__ */ jsx2("hr", { className: "agg-settlement-divider my-4 border-0 border-t border-agg-separator" }) : null,
+                marketBlock ? /* @__PURE__ */ jsx2("div", { "data-source": "marketDescription", children: /* @__PURE__ */ jsx2(SettlementTextRenderer, { content: marketBlock.content }) }) : null
+              ]
+            }
+          ) : null,
+          primaryRulesBlock ? /* @__PURE__ */ jsxs2(
+            "div",
+            {
+              className: "agg-settlement-section agg-settlement-section-primaryRules",
+              "data-source": "primaryRules",
+              children: [
+                /* @__PURE__ */ jsx2("p", { className: "agg-settlement-section-label text-agg-xs font-agg-bold leading-agg-4 uppercase text-agg-muted-foreground mb-2", children: labels.trading.settlementPrimaryRulesLabel }),
+                /* @__PURE__ */ jsx2(SettlementTextRenderer, { content: primaryRulesBlock.content })
+              ]
+            }
+          ) : null
+        ] })
+      ]
+    }
+  );
+};
+Settlement.displayName = "Settlement";
+
+// src/events/item-details/event-list-item-details.utils.ts
+import dayjs2 from "dayjs";
 var compareOutcomeSelectorLabels = (leftLabel, rightLabel) => {
   const leftSemanticLabel = toSemanticLabel(leftLabel);
   const rightSemanticLabel = toSemanticLabel(rightLabel);
@@ -126,8 +463,8 @@ var compareOutcomeSelectorLabels = (leftLabel, rightLabel) => {
   if (leftBinaryOrder != null && rightBinaryOrder != null) {
     return leftBinaryOrder - rightBinaryOrder;
   }
-  const leftDate = isDateLikeLabel(leftLabel) ? dayjs(leftLabel).valueOf() : null;
-  const rightDate = isDateLikeLabel(rightLabel) ? dayjs(rightLabel).valueOf() : null;
+  const leftDate = isDateLikeLabel(leftLabel) ? dayjs2(leftLabel).valueOf() : null;
+  const rightDate = isDateLikeLabel(rightLabel) ? dayjs2(rightLabel).valueOf() : null;
   if (leftDate != null && rightDate != null && leftDate !== rightDate) {
     return leftDate - rightDate;
   }
@@ -168,47 +505,47 @@ var toSemanticLabel = (value) => {
 };
 var isDateLikeLabel = (value) => {
   if (!value.trim()) return false;
-  return dayjs(value).isValid();
+  return dayjs2(value).isValid();
 };
 var getTimeWindowByRange = (range) => {
-  const endTs = dayjs().unix();
+  const endTs = dayjs2().unix();
   if (range === "1H") {
     return {
-      startTs: dayjs.unix(endTs).subtract(1, "hour").unix(),
+      startTs: dayjs2.unix(endTs).subtract(1, "hour").unix(),
       endTs,
       intervalMinutes: 5
     };
   }
   if (range === "6H") {
     return {
-      startTs: dayjs.unix(endTs).subtract(6, "hour").unix(),
+      startTs: dayjs2.unix(endTs).subtract(6, "hour").unix(),
       endTs,
       intervalMinutes: 15
     };
   }
   if (range === "1D") {
     return {
-      startTs: dayjs.unix(endTs).subtract(1, "day").unix(),
+      startTs: dayjs2.unix(endTs).subtract(1, "day").unix(),
       endTs,
       intervalMinutes: 30
     };
   }
   if (range === "1W") {
     return {
-      startTs: dayjs.unix(endTs).subtract(7, "day").unix(),
+      startTs: dayjs2.unix(endTs).subtract(7, "day").unix(),
       endTs,
       intervalMinutes: 60
     };
   }
   if (range === "1M") {
     return {
-      startTs: dayjs.unix(endTs).subtract(1, "month").unix(),
+      startTs: dayjs2.unix(endTs).subtract(1, "month").unix(),
       endTs,
       intervalMinutes: 240
     };
   }
   return {
-    startTs: dayjs.unix(endTs).subtract(6, "month").unix(),
+    startTs: dayjs2.unix(endTs).subtract(6, "month").unix(),
     endTs,
     intervalMinutes: 720
   };
@@ -405,7 +742,7 @@ var resolveMarketChartLiveState = ({
 
 // src/events/market-details/market-details.utils.ts
 import { safeParse as safeParse2 } from "@agg-build/sdk";
-import dayjs2 from "dayjs";
+import dayjs3 from "dayjs";
 var VALID_TABS = /* @__PURE__ */ new Set(["order-book", "graph", "other"]);
 var isMarketDetailsTab = (v) => typeof v === "string" && VALID_TABS.has(v);
 var normalizeLabel2 = (value) => {
@@ -558,19 +895,19 @@ var resolveOtherTabRows = (market, labels) => {
   if (market.creationDate) {
     rows.push({
       label: labels.marketDetails.meta.created,
-      value: dayjs2(market.creationDate).format("MMM D, YYYY")
+      value: dayjs3(market.creationDate).format("MMM D, YYYY")
     });
   }
   if (market.startDate) {
     rows.push({
       label: labels.marketDetails.meta.opens,
-      value: dayjs2(market.startDate).format("MMM D, YYYY")
+      value: dayjs3(market.startDate).format("MMM D, YYYY")
     });
   }
   if (market.endDate) {
     rows.push({
       label: labels.marketDetails.meta.closes,
-      value: dayjs2(market.endDate).format("MMM D, YYYY")
+      value: dayjs3(market.endDate).format("MMM D, YYYY")
     });
   }
   if (rows.length === 1) {
@@ -619,10 +956,10 @@ var buildMarketDetailsModel = ({
 };
 
 // src/events/shared/event-trading-state.utils.ts
-import dayjs3 from "dayjs";
+import dayjs4 from "dayjs";
 var formatTradingStateDate = (value) => {
-  if (!dayjs3(value).isValid()) return value;
-  return dayjs3(value).format("MMM D, YYYY");
+  if (!dayjs4(value).isValid()) return value;
+  return dayjs4(value).format("MMM D, YYYY");
 };
 var resolveTradingStateTimestampLabel = (labels, state) => {
   if (state.kind === "resolved" && state.resolvesAt) {
@@ -742,6 +1079,19 @@ export {
   resolveHeaderOutcomeItems,
   resolveOtherTabRows,
   buildMarketDetailsModel,
+  defaultSettlementSectionLabel,
+  defaultTradingDisclaimer,
+  getTradingDateLabel,
+  getTradingVenueLabel,
+  getTradingValueLabel,
+  getTradingPriceLabel,
+  getTradingAveragePriceLabel,
+  getTradingBalanceLabel,
+  getTradingSharesLabel,
+  getTradingSlippageLabel,
+  getFirstSettlementParagraph,
+  SETTLEMENT_SECTION_ID,
+  Settlement,
   resolveTradingStatePresentation,
   resolveTradingStateBadgeClassName,
   resolveOrderEligibilityMessage