@loafmarkets/ui 0.1.100 → 0.1.101

package/dist/index.js

@@ -11968,49 +11968,41 @@ function PortfolioActivityPanel({
     ] }),
     activeTab === "positions" && showPositionsTab && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       positions.length === 0 && /* @__PURE__ */ jsxRuntime.jsx(EmptyState, { children: "No positions yet. Subscribe to an offering or buy on the secondary market." }),
-      positions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: pageSlice(positions).map((pos) => {
-        const currentValue = pos.quantity * pos.marketPrice;
-        const costBasis = pos.quantity * pos.averageEntryPrice;
-        const pnl = pos.propertyPnl ?? currentValue - costBasis;
-        const pnlPercent = pos.propertyPnlPercent ?? pos.percentChange ?? 0;
-        const totalPortfolioValue = positions.reduce((sum, p) => sum + p.quantity * p.marketPrice, 0);
-        const portfolioPercent = totalPortfolioValue > 0 ? currentValue / totalPortfolioValue * 100 : 0;
-        const isPositive = pnl >= 0;
-        return /* @__PURE__ */ jsxRuntime.jsxs(HoldingsItem, { onClick: () => onPositionClick?.(pos.tokenName, pos.isIpoAllocation), children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(HoldingsLeft, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(HoldingsProperty, { children: pos.tokenName }),
-            /* @__PURE__ */ jsxRuntime.jsxs(HoldingsPortfolio, { children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-                portfolioPercent.toFixed(1),
-                "%"
+      positions.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(PositionsHeader, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(PositionsHeaderCell, { children: "Asset" }),
+          /* @__PURE__ */ jsxRuntime.jsx(PositionsHeaderCell, { $align: "right", children: "Size" }),
+          /* @__PURE__ */ jsxRuntime.jsx(PositionsHeaderCell, { $align: "right", children: "Value" }),
+          /* @__PURE__ */ jsxRuntime.jsx(PositionsHeaderCell, { $align: "right", children: "Entry Price" }),
+          /* @__PURE__ */ jsxRuntime.jsx(PositionsHeaderCell, { $align: "right", children: "Mark Price" }),
+          /* @__PURE__ */ jsxRuntime.jsx(PositionsHeaderCell, { $align: "right", children: "PNL (%)" })
+        ] }),
+        pageSlice(positions).map((pos) => {
+          const currentValue = pos.quantity * pos.marketPrice;
+          const costBasis = pos.quantity * pos.averageEntryPrice;
+          const pnl = pos.propertyPnl ?? currentValue - costBasis;
+          const pnlPercent = pos.propertyPnlPercent ?? pos.percentChange ?? 0;
+          const isPositive = pnl >= 0;
+          return /* @__PURE__ */ jsxRuntime.jsxs(PositionsRow, { onClick: () => onPositionClick?.(pos.tokenName, pos.isIpoAllocation), children: [
+            /* @__PURE__ */ jsxRuntime.jsx(PositionsCell, { children: /* @__PURE__ */ jsxRuntime.jsx(HoldingsProperty, { children: pos.tokenName }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(PositionsCell, { $align: "right", children: /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "#fff", fontSize: "0.8rem" }, children: formatNumber2(pos.quantity) }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(PositionsCell, { $align: "right", children: /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "#fff", fontSize: "0.8rem" }, children: formatCurrency5(currentValue) }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(PositionsCell, { $align: "right", children: /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "rgba(255,255,255,0.7)", fontSize: "0.8rem" }, children: formatCurrency5(pos.averageEntryPrice) }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(PositionsCell, { $align: "right", children: /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "#fff", fontSize: "0.8rem" }, children: formatCurrency5(pos.marketPrice) }) }),
+            /* @__PURE__ */ jsxRuntime.jsxs(PositionsCell, { $align: "right", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(PnLAmount, { $positive: isPositive, children: [
+                isPositive ? "+" : "-",
+                formatCurrency5(Math.abs(pnl))
               ] }),
-              " of portfolio"
-            ] })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs(HoldingsQuantity, { children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-              formatNumber2(pos.quantity),
-              " ",
-              pos.tokenName
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs(HoldingsAvgEntry, { children: [
-              "Avg ",
-              formatCurrency5(pos.averageEntryPrice)
-            ] })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs(HoldingsPnL, { children: [
-            /* @__PURE__ */ jsxRuntime.jsxs(PnLAmount, { $positive: isPositive, children: [
-              isPositive ? "+" : "-",
-              formatCurrency5(Math.abs(pnl))
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs(PnLPercentage, { $positive: isPositive, children: [
-              isPositive ? "+" : "",
-              pnlPercent.toFixed(1),
-              "%"
+              /* @__PURE__ */ jsxRuntime.jsxs(PnLPercentage, { $positive: isPositive, children: [
+                isPositive ? "+" : "",
+                pnlPercent.toFixed(1),
+                "%"
+              ] })
             ] })
-          ] })
-        ] }, pos.tokenName);
-      }) })
+          ] }, pos.tokenName);
+        })
+      ] })
     ] }),
     activeTab === "subscriptions" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       offeringOrders.length === 0 && /* @__PURE__ */ jsxRuntime.jsx(EmptyState, { children: "IPO allocations will appear here once you subscribe." }),
@@ -12392,53 +12384,42 @@ var PaginationLabel = styled25__default.default.span`
   font-size: 0.8rem;
   color: rgba(255, 255, 255, 0.4);
 `;
-var HoldingsItem = styled25__default.default.div`
+var PositionsHeader = styled25__default.default.div`
+  display: grid;
+  grid-template-columns: 1.2fr 0.8fr 1fr 1fr 1fr 1.2fr;
+  gap: 0 0.5rem;
+  padding: 0.4rem 0.5rem;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+`;
+var PositionsHeaderCell = styled25__default.default.div`
+  font-size: 0.68rem;
+  font-weight: 500;
+  color: rgba(255, 255, 255, 0.4);
+  text-align: ${(p) => p.$align || "left"};
+  white-space: nowrap;
+`;
+var PositionsRow = styled25__default.default.div`
   display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
+  grid-template-columns: 1.2fr 0.8fr 1fr 1fr 1fr 1.2fr;
   align-items: center;
-  padding: 0.5rem 0;
-  min-height: 50px;
+  gap: 0 0.5rem;
+  padding: 0.5rem 0.5rem;
   cursor: pointer;
-  &:hover { background: rgba(255, 255, 255, 0.015); }
+  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
+  &:last-child { border-bottom: none; }
+  &:hover { background: rgba(255, 255, 255, 0.02); }
 `;
-var HoldingsLeft = styled25__default.default.div`
+var PositionsCell = styled25__default.default.div`
   display: flex;
   flex-direction: column;
-  gap: 0.15rem;
+  align-items: ${(p) => p.$align === "right" ? "flex-end" : "flex-start"};
+  gap: 0.1rem;
 `;
 var HoldingsProperty = styled25__default.default.div`
-  font-size: 0.85rem;
+  font-size: 0.8rem;
   font-weight: 600;
   color: #fff;
 `;
-var HoldingsPortfolio = styled25__default.default.div`
-  font-size: 0.7rem;
-  color: rgba(255, 255, 255, 0.5);
-  span {
-    color: var(--color-accent, #E6C87E);
-    font-weight: 500;
-  }
-`;
-var HoldingsQuantity = styled25__default.default.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 0.15rem;
-  font-size: 0.85rem;
-  font-weight: 500;
-  color: #fff;
-`;
-var HoldingsAvgEntry = styled25__default.default.div`
-  font-size: 0.7rem;
-  color: var(--color-accent, #E6C87E);
-  font-weight: 500;
-`;
-var HoldingsPnL = styled25__default.default.div`
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-  gap: 0.15rem;
-`;
 var PnLAmount = styled25__default.default.div`
   font-size: 0.85rem;
   font-weight: 600;