@loafmarkets/ui 0.1.264 → 0.1.266

package/dist/index.mjs

@@ -12,7 +12,7 @@ import * as LightweightCharts from 'lightweight-charts';
 import { MdKingBed, MdBathtub, MdDirectionsCar, MdPool, MdYard, MdFitnessCenter } from 'react-icons/md';
 import { BiChevronUp, BiChevronDown, BiX, BiCoin, BiWallet, BiCreditCard, BiCalendar, BiInfoCircle, BiPencil, BiImages, BiVideo, BiMap } from 'react-icons/bi';
 import { FaChartLine, FaBitcoin } from 'react-icons/fa';
-import { FiChevronDown, FiEdit2 } from 'react-icons/fi';
+import { FiEdit2 } from 'react-icons/fi';
 
 // src/components/button.tsx
 function cn(...inputs) {
@@ -13640,6 +13640,7 @@ function PortfolioActivityPanel({
   };
   const [expandedPositions, setExpandedPositions] = useState(/* @__PURE__ */ new Set());
   const [allExpanded, setAllExpanded] = useState(false);
+  const [sortDropdownOpen, setSortDropdownOpen] = useState(false);
   const togglePosition = (tokenName) => {
     setExpandedPositions((prev) => {
       const next = new Set(prev);
@@ -13667,12 +13668,6 @@ function PortfolioActivityPanel({
     }
   };
   const sortKeys = ["asset", "units", "value", "avgPrice", "currentPrice", "pnl"];
-  const cycleSortKey = () => {
-    const idx = sortKeys.indexOf(posSortKey);
-    const nextKey = sortKeys[(idx + 1) % sortKeys.length];
-    setPosSortKey(nextKey);
-    setPosSortAsc(true);
-  };
   const sortedPositions = useMemo(() => {
     const arr = [...positions];
     const dir = posSortAsc ? 1 : -1;
@@ -13789,16 +13784,22 @@ function PortfolioActivityPanel({
     activeTab === "positions" && showPositionsTab && /* @__PURE__ */ jsxs(Fragment, { children: [
       positions.length === 0 && /* @__PURE__ */ jsx(EmptyState, { children: "No positions yet. Subscribe to an offering or buy on the secondary market." }),
       positions.length > 0 && compactPositions && /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsxs(CompactToolbar, { children: [
-          /* @__PURE__ */ jsxs(CompactSortBtn, { onClick: cycleSortKey, children: [
-            "Sort by: ",
-            sortKeyLabel(posSortKey),
-            " ",
-            posSortAsc ? "\u2191" : "\u2193"
+        /* @__PURE__ */ jsxs(CToolbar, { children: [
+          /* @__PURE__ */ jsxs(CSortWrap, { children: [
+            /* @__PURE__ */ jsxs(CSortBtn, { onClick: () => setSortDropdownOpen((v) => !v), children: [
+              "Sort by: ",
+              sortKeyLabel(posSortKey),
+              " \u25BE"
+            ] }),
+            sortDropdownOpen && /* @__PURE__ */ jsx(CSortDropdown, { children: sortKeys.map((k) => /* @__PURE__ */ jsx(CSortOption, { $active: posSortKey === k, onClick: () => {
+              setPosSortKey(k);
+              setPosSortAsc(true);
+              setSortDropdownOpen(false);
+            }, children: sortKeyLabel(k) }, k)) })
           ] }),
-          /* @__PURE__ */ jsxs(CompactToolbarRight, { children: [
-            /* @__PURE__ */ jsx(CompactActionBtn, { onClick: toggleExpandAll, children: allExpanded ? "Collapse All" : "Expand All" }),
-            onClosePosition && /* @__PURE__ */ jsx(CompactSellAllBtn, { onClick: () => setCloseAllOpen(true), children: "Sell All" })
+          /* @__PURE__ */ jsxs(CToolbarActions, { children: [
+            /* @__PURE__ */ jsx(CToolbarLink, { onClick: toggleExpandAll, children: allExpanded ? "Collapse All" : "Expand All" }),
+            onClosePosition && /* @__PURE__ */ jsx(CToolbarLink, { onClick: () => setCloseAllOpen(true), children: "Sell All" })
           ] })
         ] }),
         pageSlice(sortedPositions).map((pos) => {
@@ -13807,45 +13808,59 @@ function PortfolioActivityPanel({
           const pnl = pos.propertyPnl ?? currentValue - costBasis;
           const pnlPercent = pos.propertyPnlPercent ?? pos.percentChange ?? 0;
           const isPositive = pnl >= 0;
-          const isExpanded = expandedPositions.has(pos.tokenName);
-          return /* @__PURE__ */ jsxs(CompactCard, { children: [
-            /* @__PURE__ */ jsxs(CompactCardHeader, { onClick: () => togglePosition(pos.tokenName), children: [
-              /* @__PURE__ */ jsx(CompactAsset, { onClick: (e) => {
+          const posExpanded = expandedPositions.has(pos.tokenName) || allExpanded;
+          const ticker = pos.tokenName.toUpperCase().slice(0, 7);
+          return /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsxs(CRow, { $expanded: posExpanded, onClick: () => togglePosition(pos.tokenName), children: [
+              /* @__PURE__ */ jsxs(CAssetCell, { onClick: (e) => {
                 e.stopPropagation();
                 onPositionClick?.(pos.tokenName, pos.isIpoAllocation);
-              }, children: pos.tokenName }),
-              /* @__PURE__ */ jsxs(CompactUnits, { children: [
-                formatNumber2(pos.quantity),
-                " units"
+              }, children: [
+                /* @__PURE__ */ jsx(CCellLabel, { children: "Asset" }),
+                /* @__PURE__ */ jsxs(CAssetName, { children: [
+                  pos.imageUrl && /* @__PURE__ */ jsx(CAssetLogo, { src: pos.imageUrl, alt: "" }),
+                  pos.tokenName
+                ] })
               ] }),
-              /* @__PURE__ */ jsxs(CompactPnl, { $positive: isPositive, children: [
-                isPositive ? "+" : "-",
-                formatCurrency4(Math.abs(pnl)),
-                " (",
-                isPositive ? "+" : "",
-                pnlPercent.toFixed(1),
-                "%)"
+              /* @__PURE__ */ jsxs(CUnitsCell, { children: [
+                /* @__PURE__ */ jsx(CCellLabel, { children: "Units" }),
+                formatNumber2(pos.quantity, pos.quantity >= 100 ? 0 : 2),
+                " ",
+                ticker
+              ] }),
+              /* @__PURE__ */ jsxs(CPnlCell, { children: [
+                /* @__PURE__ */ jsx(CCellLabel, { children: "PNL (%)" }),
+                /* @__PURE__ */ jsxs(CPnlValue, { $positive: isPositive, children: [
+                  isPositive ? "+" : "-",
+                  formatCurrency4(Math.abs(pnl))
+                ] }),
+                /* @__PURE__ */ jsxs(CPnlPct, { $positive: isPositive, children: [
+                  "(",
+                  isPositive ? "+" : "",
+                  pnlPercent.toFixed(1),
+                  "%)"
+                ] })
               ] }),
-              /* @__PURE__ */ jsx(CompactChevron, { $expanded: isExpanded, children: /* @__PURE__ */ jsx(FiChevronDown, { size: 14 }) })
+              /* @__PURE__ */ jsx(CChevronWrap, { $open: posExpanded, children: /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "rgba(255,255,255,0.5)", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("polyline", { points: "6 9 12 15 18 9" }) }) })
             ] }),
-            isExpanded && /* @__PURE__ */ jsxs(CompactCardBody, { children: [
-              /* @__PURE__ */ jsxs(CompactDetailRow, { children: [
-                /* @__PURE__ */ jsxs(CompactDetail, { children: [
-                  /* @__PURE__ */ jsx(CompactDetailLabel, { children: "Position Value" }),
-                  /* @__PURE__ */ jsx(CompactDetailValue, { children: formatCurrency4(currentValue, { minimumFractionDigits: 0, maximumFractionDigits: 0 }) })
+            posExpanded && /* @__PURE__ */ jsxs(CExpandedWrap, { children: [
+              /* @__PURE__ */ jsxs(CDetailGrid, { children: [
+                /* @__PURE__ */ jsxs(CDetailItem, { children: [
+                  /* @__PURE__ */ jsx(CDLabel, { children: "Position Value" }),
+                  /* @__PURE__ */ jsx(CDValue, { children: formatCurrency4(currentValue, { minimumFractionDigits: 0, maximumFractionDigits: 0 }) })
                 ] }),
-                /* @__PURE__ */ jsxs(CompactDetail, { children: [
-                  /* @__PURE__ */ jsx(CompactDetailLabel, { children: "Avg Price" }),
-                  /* @__PURE__ */ jsx(CompactDetailValue, { children: formatCurrency4(pos.averageEntryPrice) })
+                /* @__PURE__ */ jsxs(CDetailItem, { children: [
+                  /* @__PURE__ */ jsx(CDLabel, { children: "Avg Price" }),
+                  /* @__PURE__ */ jsx(CDValue, { children: formatCurrency4(pos.averageEntryPrice) })
                 ] }),
-                /* @__PURE__ */ jsxs(CompactDetail, { children: [
-                  /* @__PURE__ */ jsx(CompactDetailLabel, { children: "Current Price" }),
-                  /* @__PURE__ */ jsx(CompactDetailValue, { children: formatCurrency4(pos.marketPrice) })
+                /* @__PURE__ */ jsxs(CDetailItem, { children: [
+                  /* @__PURE__ */ jsx(CDLabel, { children: "Current Price" }),
+                  /* @__PURE__ */ jsx(CDValue, { children: formatCurrency4(pos.marketPrice) })
                 ] })
               ] }),
-              onClosePosition && /* @__PURE__ */ jsxs(CompactCloseActions, { children: [
-                /* @__PURE__ */ jsx(CloseBtn2, { onClick: () => onClosePosition(pos.tokenName, "market", pos.quantity, pos.marketPrice), children: "Market Sell" }),
-                /* @__PURE__ */ jsx(CloseBtn2, { onClick: () => onClosePosition(pos.tokenName, "limit", pos.quantity, pos.marketPrice), children: "Limit Sell" })
+              onClosePosition && /* @__PURE__ */ jsxs(CActionRow, { children: [
+                /* @__PURE__ */ jsx(CCloseBtn, { onClick: () => onClosePosition(pos.tokenName, "market", pos.quantity, pos.marketPrice), children: "Market Sell" }),
+                /* @__PURE__ */ jsx(CCloseBtn, { onClick: () => onClosePosition(pos.tokenName, "limit", pos.quantity, pos.marketPrice), children: "Limit Sell" })
               ] })
             ] })
           ] }, pos.tokenName);
@@ -14175,7 +14190,13 @@ function PortfolioActivityPanel({
     ] }) })
   ] });
 }
-var Container3 = styled9.div``;
+var Container3 = styled9.div`
+  scrollbar-width: thin;
+  scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
+  &::-webkit-scrollbar { width: 4px; }
+  &::-webkit-scrollbar-track { background: transparent; }
+  &::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); border-radius: 2px; }
+`;
 var PanelTitle = styled9.h3`
   font-size: 1rem;
   font-weight: 600;
@@ -14746,147 +14767,181 @@ var CloseAllConfirmBtn = styled9.button`
     background: rgba(246, 70, 93, 0.25);
   }
 `;
-var CompactToolbar = styled9.div`
+var CToolbar = styled9.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 0.35rem 0.5rem;
-  margin-bottom: 0.25rem;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+  padding: 0.3rem 0.6rem;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
 `;
-var CompactSortBtn = styled9.button`
-  background: transparent;
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  border-radius: 4px;
-  padding: 0.2rem 0.6rem;
-  font-size: 0.68rem;
-  font-weight: 500;
-  color: rgba(255, 255, 255, 0.6);
-  cursor: pointer;
-  transition: all 0.15s ease;
-
-  &:hover {
-    color: rgba(255, 255, 255, 0.85);
-    border-color: rgba(255, 255, 255, 0.2);
-  }
+var CSortWrap = styled9.div`
+  position: relative;
 `;
-var CompactToolbarRight = styled9.div`
+var CSortBtn = styled9.button`
+  font-size: 0.6rem;
+  color: rgba(255, 255, 255, 0.45);
+  background: none;
+  border: none;
+  cursor: pointer;
   display: flex;
   align-items: center;
-  gap: 0.4rem;
+  gap: 0.2rem;
+  &:hover { color: rgba(255, 255, 255, 0.7); }
 `;
-var CompactActionBtn = styled9.button`
-  background: transparent;
+var CSortDropdown = styled9.div`
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: 10;
+  margin-top: 2px;
+  background: #1a1c24;
   border: 1px solid rgba(255, 255, 255, 0.1);
-  border-radius: 4px;
-  padding: 0.2rem 0.6rem;
-  font-size: 0.68rem;
-  font-weight: 500;
-  color: rgba(255, 255, 255, 0.6);
-  cursor: pointer;
-  transition: all 0.15s ease;
-
-  &:hover {
-    color: rgba(255, 255, 255, 0.85);
-    border-color: rgba(255, 255, 255, 0.2);
-  }
+  border-radius: 6px;
+  overflow: hidden;
+  min-width: 120px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
 `;
-var CompactSellAllBtn = styled9.button`
-  background: rgba(246, 70, 93, 0.08);
-  border: 1px solid rgba(246, 70, 93, 0.25);
-  border-radius: 4px;
-  padding: 0.2rem 0.6rem;
-  font-size: 0.68rem;
-  font-weight: 600;
-  color: #f6465d;
+var CSortOption = styled9.button`
+  display: block;
+  width: 100%;
+  padding: 0.4rem 0.6rem;
+  font-size: 0.6rem;
+  font-weight: ${(p) => p.$active ? 600 : 400};
+  color: ${(p) => p.$active ? "#E6C87E" : "rgba(255, 255, 255, 0.6)"};
+  background: ${(p) => p.$active ? "rgba(230, 200, 126, 0.06)" : "none"};
+  border: none;
+  text-align: left;
   cursor: pointer;
-  transition: all 0.15s ease;
-
-  &:hover {
-    background: rgba(246, 70, 93, 0.15);
-    border-color: rgba(246, 70, 93, 0.4);
-  }
+  &:hover { background: rgba(255, 255, 255, 0.05); }
 `;
-var CompactCard = styled9.div`
-  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
-
-  &:last-child {
-    border-bottom: none;
-  }
+var CToolbarActions = styled9.div`
+  display: flex;
+  gap: 0.5rem;
+`;
+var CToolbarLink = styled9.button`
+  font-size: 0.58rem;
+  font-weight: 500;
+  color: rgba(255, 255, 255, 0.45);
+  background: none;
+  border: none;
+  cursor: pointer;
+  text-decoration: underline;
+  text-decoration-color: rgba(255, 255, 255, 0.15);
+  &:hover { color: rgba(255, 255, 255, 0.7); }
 `;
-var CompactCardHeader = styled9.div`
+var CRow = styled9.button`
   display: grid;
-  grid-template-columns: 1fr 1fr 1.4fr auto;
+  grid-template-columns: 1fr 1fr 1fr 24px;
   align-items: center;
-  gap: 0.5rem;
-  padding: 0.6rem 0.5rem;
+  width: calc(100% - 1rem);
+  margin: 0.25rem 0.5rem;
+  margin-bottom: ${(p) => p.$expanded ? "0" : "0.25rem"};
+  padding: 0.55rem 0.65rem;
+  background: rgba(255, 255, 255, 0.035);
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  border-bottom: ${(p) => p.$expanded ? "none" : "1px solid rgba(255, 255, 255, 0.06)"};
+  border-radius: ${(p) => p.$expanded ? "8px 8px 0 0" : "8px"};
   cursor: pointer;
-  transition: background 0.15s ease;
-  border-radius: 4px;
-
-  &:hover {
-    background: rgba(255, 255, 255, 0.03);
-  }
+  text-align: left;
+  transition: background 0.15s;
+  outline: none;
+  &:active { background: rgba(255, 255, 255, 0.06); }
+  &:focus { outline: none; }
+  &:focus-visible { outline: none; }
 `;
-var CompactAsset = styled9.span`
-  font-size: 0.8rem;
+var CCellLabel = styled9.div`
+  font-size: 0.6rem;
+  font-weight: 500;
+  color: rgba(255, 255, 255, 0.3);
+  margin-bottom: 1px;
+`;
+var CAssetCell = styled9.div``;
+var CAssetName = styled9.div`
+  font-size: 0.85rem;
   font-weight: 600;
   color: #fff;
-  cursor: pointer;
-
-  &:hover {
-    text-decoration: underline;
-    color: var(--color-accent, #E6C87E);
-  }
+  display: flex;
+  align-items: center;
+  gap: 0.3rem;
 `;
-var CompactUnits = styled9.span`
-  font-size: 0.75rem;
-  color: rgba(255, 255, 255, 0.6);
+var CAssetLogo = styled9.img`
+  width: 22px;
+  height: 22px;
+  border-radius: 4px;
+  object-fit: cover;
+  flex-shrink: 0;
 `;
-var CompactPnl = styled9.span`
-  font-size: 0.75rem;
+var CUnitsCell = styled9.div`
+  font-size: 0.78rem;
+  color: rgba(255, 255, 255, 0.8);
+  font-variant-numeric: tabular-nums;
+`;
+var CPnlCell = styled9.div``;
+var CPnlValue = styled9.div`
+  font-size: 0.78rem;
   font-weight: 600;
   color: ${(p) => p.$positive ? "#0ecb81" : "#f6465d"};
-  text-align: right;
+  font-variant-numeric: tabular-nums;
 `;
-var CompactChevron = styled9.span`
+var CPnlPct = styled9.div`
+  font-size: 0.62rem;
+  color: ${(p) => p.$positive ? "rgba(14, 203, 129, 0.65)" : "rgba(246, 70, 93, 0.65)"};
+  margin-top: 1px;
+`;
+var CChevronWrap = styled9.span`
   display: flex;
   align-items: center;
   justify-content: center;
-  color: rgba(255, 255, 255, 0.35);
-  transition: transform 0.2s ease;
-  transform: rotate(${(p) => p.$expanded ? "180deg" : "0deg"});
-`;
-var CompactCardBody = styled9.div`
-  padding: 0 0.5rem 0.6rem;
+  transition: transform 0.2s;
+  transform: rotate(${(p) => p.$open ? "180deg" : "0deg"});
 `;
-var CompactDetailRow = styled9.div`
-  display: flex;
-  gap: 1.5rem;
-  padding: 0.5rem 0.75rem;
-  background: rgba(255, 255, 255, 0.02);
-  border-radius: 6px;
-  margin-bottom: 0.5rem;
+var CExpandedWrap = styled9.div`
+  margin: 0 0.5rem 0.25rem;
+  padding: 0.4rem 0.65rem 0.5rem;
+  background: rgba(255, 255, 255, 0.035);
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  border-top: none;
+  border-radius: 0 0 8px 8px;
 `;
-var CompactDetail = styled9.div`
-  display: flex;
-  flex-direction: column;
-  gap: 0.15rem;
+var CDetailGrid = styled9.div`
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr 24px;
+  gap: 0.45rem 0;
 `;
-var CompactDetailLabel = styled9.span`
-  font-size: 0.62rem;
-  color: rgba(255, 255, 255, 0.35);
-  font-weight: 500;
+var CDetailItem = styled9.div``;
+var CDLabel = styled9.div`
+  font-size: 0.6rem;
+  color: rgba(255, 255, 255, 0.3);
+  margin-bottom: 1px;
 `;
-var CompactDetailValue = styled9.span`
+var CDValue = styled9.div`
   font-size: 0.78rem;
-  color: #fff;
   font-weight: 500;
+  color: rgba(255, 255, 255, 0.85);
+  font-variant-numeric: tabular-nums;
 `;
-var CompactCloseActions = styled9.div`
-  display: flex;
+var CActionRow = styled9.div`
+  display: grid;
+  grid-template-columns: 1fr 1fr;
   gap: 0.5rem;
-  padding: 0 0.75rem;
+  margin-top: 0.5rem;
+`;
+var CCloseBtn = styled9.button`
+  background: transparent;
+  border: 1px solid rgba(230, 200, 126, 0.25);
+  border-radius: 6px;
+  padding: 0.45rem 0.6rem;
+  font-size: 0.72rem;
+  font-weight: 600;
+  color: #E6C87E;
+  cursor: pointer;
+  white-space: nowrap;
+  text-align: center;
+  transition: all 0.15s ease;
+  &:hover {
+    background: rgba(230, 200, 126, 0.1);
+    border-color: rgba(230, 200, 126, 0.5);
+  }
 `;
 function PropertyBuy({
   propertyName = "Loaf Property",