@loafmarkets/ui 0.0.6 → 0.0.8

package/dist/index.mjs

@@ -4,7 +4,7 @@ import { cva } from 'class-variance-authority';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { CalendarDays, ArrowUpRight, Newspaper, BedDouble, Bath, CarFront, Building2, Sparkles, LineChart } from 'lucide-react';
+import { Newspaper, BedDouble, Bath, CarFront } from 'lucide-react';
 import { createChart } from 'lightweight-charts';
 
 // src/components/button.tsx
@@ -146,8 +146,8 @@ var PortfolioSummary = React5.forwardRef(
     onResetAccount,
     positionsHeading = "Current Positions",
     emptyPositionsText = "No positions yet. Start trading to build your portfolio!",
-    formatCurrency = defaultFormatCurrency,
-    formatPercent = defaultFormatPercent,
+    formatCurrency: formatCurrency2 = defaultFormatCurrency,
+    formatPercent: formatPercent2 = defaultFormatPercent,
     formatSignedCurrency = defaultFormatSignedCurrency,
     className,
     children,
@@ -184,15 +184,15 @@ var PortfolioSummary = React5.forwardRef(
             /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
               /* @__PURE__ */ jsxs("div", { children: [
                 /* @__PURE__ */ jsx("p", { className: "text-xs uppercase tracking-[0.5px] text-white/50", children: "Available Cash" }),
-                /* @__PURE__ */ jsx("p", { className: "mt-1 text-[1.25rem] font-semibold text-white", children: formatCurrency(availableCash) })
+                /* @__PURE__ */ jsx("p", { className: "mt-1 text-[1.25rem] font-semibold text-white", children: formatCurrency2(availableCash) })
               ] }),
               /* @__PURE__ */ jsxs("div", { children: [
                 /* @__PURE__ */ jsx("p", { className: "text-xs uppercase tracking-[0.5px] text-white/50", children: "Portfolio Value" }),
-                /* @__PURE__ */ jsx("p", { className: "mt-1 text-[1.25rem] font-semibold text-white", children: formatCurrency(portfolioValue) })
+                /* @__PURE__ */ jsx("p", { className: "mt-1 text-[1.25rem] font-semibold text-white", children: formatCurrency2(portfolioValue) })
               ] }),
               /* @__PURE__ */ jsxs("div", { children: [
                 /* @__PURE__ */ jsx("p", { className: "text-xs uppercase tracking-[0.5px] text-white/50", children: "Total Return" }),
-                /* @__PURE__ */ jsx("p", { className: cn("mt-1 text-[1.25rem] font-semibold", totalReturnClassName), children: formatPercent(totalReturnPercent) })
+                /* @__PURE__ */ jsx("p", { className: cn("mt-1 text-[1.25rem] font-semibold", totalReturnClassName), children: formatPercent2(totalReturnPercent) })
               ] }),
               /* @__PURE__ */ jsxs("div", { children: [
                 /* @__PURE__ */ jsx("p", { className: "text-xs uppercase tracking-[0.5px] text-white/50", children: "Unrealized P&L" }),
@@ -819,6 +819,9 @@ function DepthRow({
   ] });
 }
 var clamp2 = (value, min, max) => Math.min(max, Math.max(min, value));
+var LEVEL_ROWS_VISIBLE = 6;
+var DEPTH_ROW_HEIGHT_PX = 34;
+var SECTION_HEIGHT = LEVEL_ROWS_VISIBLE * DEPTH_ROW_HEIGHT_PX;
 var Orderbook = React5.forwardRef(
   ({
     asks,
@@ -959,18 +962,25 @@ var Orderbook = React5.forwardRef(
                 ] }, `${trade.type}-${trade.price}-${trade.amount}-${trade.time ?? i}`)) })
               }
             ) : /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx("div", { className: "divide-y divide-white/5", children: asks.map((l, idx) => /* @__PURE__ */ jsx(
-                DepthRow,
+              /* @__PURE__ */ jsx(
+                "div",
                 {
-                  side: "ask",
-                  price: l.price,
-                  amount: l.amount,
-                  depthPct: (l.depth ?? l.amount) / maxAskDepth * 100,
-                  precision,
-                  amountPrecision
-                },
-                `ask-${idx}-${l.price}-${l.amount}`
-              )) }),
+                  className: "divide-y divide-white/5 overflow-y-auto",
+                  style: { height: `${SECTION_HEIGHT}px`, scrollbarGutter: "stable" },
+                  children: asks.map((l, idx) => /* @__PURE__ */ jsx(
+                    DepthRow,
+                    {
+                      side: "ask",
+                      price: l.price,
+                      amount: l.amount,
+                      depthPct: (l.depth ?? l.amount) / maxAskDepth * 100,
+                      precision,
+                      amountPrecision
+                    },
+                    `ask-${idx}-${l.price}-${l.amount}`
+                  ))
+                }
+              ),
               /* @__PURE__ */ jsxs("div", { className: "mt-2 grid grid-cols-2 items-center gap-3 bg-[#0b1a24] px-3 py-2", children: [
                 /* @__PURE__ */ jsxs("div", { className: cn("text-lg font-semibold tabular-nums", midClass), children: [
                   "$",
@@ -983,18 +993,25 @@ var Orderbook = React5.forwardRef(
                 ] }),
                 /* @__PURE__ */ jsx("div", {})
               ] }),
-              /* @__PURE__ */ jsx("div", { className: "divide-y divide-white/5", children: bids.map((l, idx) => /* @__PURE__ */ jsx(
-                DepthRow,
+              /* @__PURE__ */ jsx(
+                "div",
                 {
-                  side: "bid",
-                  price: l.price,
-                  amount: l.amount,
-                  depthPct: (l.depth ?? l.amount) / maxBidDepth * 100,
-                  precision,
-                  amountPrecision
-                },
-                `bid-${idx}-${l.price}-${l.amount}`
-              )) })
+                  className: "divide-y divide-white/5 overflow-y-auto",
+                  style: { height: `${SECTION_HEIGHT}px`, scrollbarGutter: "stable" },
+                  children: bids.map((l, idx) => /* @__PURE__ */ jsx(
+                    DepthRow,
+                    {
+                      side: "bid",
+                      price: l.price,
+                      amount: l.amount,
+                      depthPct: (l.depth ?? l.amount) / maxBidDepth * 100,
+                      precision,
+                      amountPrecision
+                    },
+                    `bid-${idx}-${l.price}-${l.amount}`
+                  ))
+                }
+              )
             ] })
           ] })
         ]
@@ -1096,132 +1113,208 @@ var PropertyTour = React5.forwardRef(
   }
 );
 PropertyTour.displayName = "PropertyTour";
-var TYPE_META = {
+var ITEMS_PER_PAGE = 4;
+var ROW_HEIGHT_PX = 86;
+var ensureAnimationsInjected = () => {
+  if (typeof document === "undefined") return;
+  if (document.getElementById("property-news-updates-animations")) return;
+  const style = document.createElement("style");
+  style.id = "property-news-updates-animations";
+  style.textContent = `
+    @keyframes propertyNewsPulse {
+      0% { opacity: 0.6; transform: scale(0.9); }
+      50% { opacity: 1; transform: scale(1); }
+      100% { opacity: 0.6; transform: scale(0.9); }
+    }
+
+    @keyframes propertyNewsSlideIn {
+      from { transform: translateY(-6px); opacity: 0; }
+      to { transform: translateY(0); opacity: 1; }
+    }
+  `;
+  document.head.appendChild(style);
+};
+var categoryStyles = {
   property: {
     label: "Property Update",
-    accent: "#f8d12f",
-    pillBg: "rgba(248, 209, 47, 0.12)",
-    pillBorder: "rgba(248, 209, 47, 0.45)",
-    pillColor: "#f8d12f",
-    icon: Building2
+    backgroundColor: "rgba(14, 203, 129, 0.15)",
+    borderColor: "rgba(14, 203, 129, 0.45)",
+    color: "#0ecb81"
   },
   market: {
-    label: "Market Insight",
-    accent: "#0ecb81",
-    pillBg: "rgba(14, 203, 129, 0.12)",
-    pillBorder: "rgba(14, 203, 129, 0.45)",
-    pillColor: "#0ecb81",
-    icon: LineChart
-  },
-  portfolio: {
-    label: "Portfolio Signal",
-    accent: "#6c8cff",
-    pillBg: "rgba(108, 140, 255, 0.12)",
-    pillBorder: "rgba(108, 140, 255, 0.45)",
-    pillColor: "#c9d5ff",
-    icon: Sparkles
+    label: "Market News",
+    backgroundColor: "rgba(248, 209, 47, 0.15)",
+    borderColor: "rgba(248, 209, 47, 0.45)",
+    color: "#f8d12f"
   }
 };
-var getTypeMeta = (type) => {
-  if (!type) return TYPE_META.property;
-  const key = type;
-  if (key in TYPE_META) return TYPE_META[key];
-  return {
-    label: type.toString(),
-    accent: "#f5f5f5",
-    pillBg: "rgba(255,255,255,0.08)",
-    pillBorder: "rgba(255,255,255,0.25)",
-    pillColor: "#ffffff",
-    icon: Newspaper
-  };
-};
 var formatDate = (value) => {
-  const date = typeof value === "string" ? new Date(value) : value;
-  if (Number.isNaN(date.getTime())) return typeof value === "string" ? value : "";
-  return date.toLocaleDateString(void 0, {
+  if (typeof value === "string") return value;
+  if (!(value instanceof Date) || Number.isNaN(value.getTime())) return "";
+  return value.toLocaleDateString(void 0, {
     month: "short",
     day: "numeric",
     year: "numeric"
   });
 };
 var PropertyNewsUpdates = React5.forwardRef(
-  ({ className, heading = "Latest property intelligence", subheading, items, emptyState, ...props }, ref) => {
+  ({
+    className,
+    heading = "Property News & Headlines",
+    subheading,
+    items,
+    emptyState,
+    highlightFirst = true,
+    ...props
+  }, ref) => {
+    const [page, setPage] = React5.useState(0);
+    React5.useEffect(() => {
+      ensureAnimationsInjected();
+    }, []);
     const hasItems = Array.isArray(items) && items.length > 0;
+    const totalPages = React5.useMemo(() => hasItems ? Math.max(1, Math.ceil(items.length / ITEMS_PER_PAGE)) : 1, [hasItems, items.length]);
+    React5.useEffect(() => {
+      setPage((prev) => Math.min(prev, totalPages - 1));
+    }, [totalPages]);
+    const paginatedItems = hasItems ? items.slice(page * ITEMS_PER_PAGE, page * ITEMS_PER_PAGE + ITEMS_PER_PAGE) : [];
     return /* @__PURE__ */ jsxs(
       "div",
       {
         ref,
         className: cn(
-          "w-full max-w-[480px] rounded-[20px] border border-white/10 bg-gradient-to-br from-[#06090f] via-[#0f1621] to-[#111b2a] p-6 text-white shadow-[0_30px_80px_rgba(3,7,18,0.65)] backdrop-blur-xl",
+          "w-full max-w-[840px] rounded-2xl border border-white/10 bg-[#0b0e10] p-5 text-white shadow-[0_20px_40px_rgba(0,0,0,0.35)]",
           className
         ),
         ...props,
         children: [
-          /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
-            /* @__PURE__ */ jsx("p", { className: "text-[0.85rem] uppercase tracking-[0.25em] text-white/50", children: heading }),
-            subheading ? /* @__PURE__ */ jsx("p", { className: "text-sm text-white/60", children: subheading }) : null
-          ] }),
-          /* @__PURE__ */ jsx("div", { className: "mt-5 flex flex-col gap-4", children: hasItems ? items.map((item, index) => {
-            const meta = getTypeMeta(item.type);
-            const Icon = meta.icon;
-            const key = item.id ?? `${item.title}-${index}`;
-            const content = /* @__PURE__ */ jsxs(
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("p", { className: "text-lg font-semibold text-white", children: heading }),
+              subheading ? /* @__PURE__ */ jsx("p", { className: "text-sm text-white/60", children: subheading }) : null
+            ] }),
+            /* @__PURE__ */ jsxs(
               "div",
               {
-                className: "relative flex w-full gap-4 rounded-2xl border border-white/5 bg-white/[0.04] p-4 transition hover:border-white/15 hover:bg-white/[0.06]",
+                className: "inline-flex items-center font-semibold uppercase text-emerald-300",
+                style: { gap: "0.35rem", fontSize: "0.8rem", letterSpacing: "0.15em" },
                 children: [
-                  /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center", children: [
-                    /* @__PURE__ */ jsx(
-                      "div",
-                      {
-                        className: "flex h-12 w-12 items-center justify-center rounded-full border text-white",
-                        style: {
-                          background: meta.pillBg,
-                          borderColor: meta.pillBorder,
-                          color: meta.pillColor
-                        },
-                        children: /* @__PURE__ */ jsx(Icon, { className: "h-5 w-5" })
-                      }
-                    ),
-                    index !== items.length - 1 ? /* @__PURE__ */ jsx("div", { className: "mt-2 h-full w-px flex-1 bg-white/10" }) : null
-                  ] }),
-                  /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col", children: [
-                    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2", children: [
-                      /* @__PURE__ */ jsx("span", { className: "text-[0.7rem] font-semibold uppercase tracking-[0.3em]", style: { color: meta.accent }, children: meta.label }),
-                      /* @__PURE__ */ jsxs("span", { className: "flex items-center text-xs text-white/60", children: [
-                        /* @__PURE__ */ jsx(CalendarDays, { className: "mr-1 h-3.5 w-3.5" }),
-                        formatDate(item.date)
-                      ] })
-                    ] }),
-                    /* @__PURE__ */ jsx("p", { className: "mt-2 text-base font-semibold leading-snug", children: item.title }),
-                    item.description ? /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-white/65", children: item.description }) : null,
-                    (item.href || item.onAction) && item.actionLabel ? /* @__PURE__ */ jsxs(
-                      "button",
-                      {
-                        type: "button",
-                        className: "group mt-3 inline-flex items-center gap-1 text-sm font-semibold text-white transition hover:text-white/80",
-                        onClick: () => {
-                          if (item.href) {
-                            window?.open?.(item.href, "_blank", "noopener,noreferrer");
-                          }
-                          item.onAction?.(item);
-                        },
-                        children: [
-                          item.actionLabel,
-                          /* @__PURE__ */ jsx(ArrowUpRight, { className: "h-4 w-4 transition group-hover:translate-x-0.5 group-hover:-translate-y-0.5" })
-                        ]
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      style: {
+                        display: "inline-block",
+                        width: "6px",
+                        height: "6px",
+                        borderRadius: "50%",
+                        backgroundColor: "#34d399",
+                        animation: "propertyNewsPulse 2s infinite"
                       }
-                    ) : null
-                  ] })
+                    }
+                  ),
+                  "LIVE"
                 ]
-              },
-              key
-            );
-            return content;
-          }) : emptyState ?? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center rounded-2xl border border-dashed border-white/20 px-6 py-10 text-center text-sm text-white/60", children: [
-            /* @__PURE__ */ jsx(Newspaper, { className: "mb-3 h-8 w-8 text-white/40" }),
-            "No property news yet. Updates will land here as soon as we receive new intelligence."
-          ] }) })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "mt-4 flex flex-col gap-3",
+              style: { minHeight: `${ITEMS_PER_PAGE * ROW_HEIGHT_PX}px` },
+              children: hasItems ? paginatedItems.map((item, index) => {
+                const absoluteIndex = page * ITEMS_PER_PAGE + index;
+                const key = item.displayId ?? item.id ?? `${item.title}-${absoluteIndex}`;
+                const styles = categoryStyles[item.type] ?? categoryStyles.market;
+                const dateLabel = item.isNew ?? (highlightFirst && absoluteIndex === 0) ? "Just now" : typeof item.date === "string" && item.date.trim().length > 0 ? item.date : formatDate(item.date);
+                const isHighlighted = item.isNew ?? (highlightFirst && absoluteIndex === 0);
+                return /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    style: {
+                      padding: "0.75rem",
+                      borderRadius: "6px",
+                      backgroundColor: isHighlighted ? "rgba(14, 203, 129, 0.1)" : "transparent",
+                      border: "1px solid transparent",
+                      transition: "background-color 0.2s",
+                      animation: item.isNew ? "propertyNewsSlideIn 0.5s ease-out" : void 0
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx("p", { style: { fontSize: "0.9375rem", fontWeight: 500, marginBottom: "0.35rem" }, children: item.title }),
+                      /* @__PURE__ */ jsxs(
+                        "div",
+                        {
+                          style: {
+                            display: "flex",
+                            justifyContent: "space-between",
+                            alignItems: "center",
+                            fontSize: "0.75rem",
+                            color: "#b5b8c5"
+                          },
+                          children: [
+                            /* @__PURE__ */ jsx("span", { style: { color: isHighlighted ? "#0ecb81" : "inherit" }, children: dateLabel }),
+                            /* @__PURE__ */ jsx(
+                              "span",
+                              {
+                                style: {
+                                  padding: "0.25rem 0.6rem",
+                                  borderRadius: "4px",
+                                  border: `1px solid ${styles.borderColor}`,
+                                  backgroundColor: styles.backgroundColor,
+                                  color: styles.color,
+                                  fontSize: "0.68rem",
+                                  fontWeight: 600,
+                                  textTransform: "uppercase"
+                                },
+                                children: item.type === "property" ? styles.label : "Market News"
+                              }
+                            )
+                          ]
+                        }
+                      )
+                    ]
+                  },
+                  key
+                );
+              }) : emptyState ?? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center rounded-2xl border border-dashed border-white/20 px-6 py-10 text-center text-sm text-white/60", children: [
+                /* @__PURE__ */ jsx(Newspaper, { className: "mb-3 h-8 w-8 text-white/40" }),
+                "No property news yet. Updates will land here as soon as we receive new intelligence."
+              ] })
+            }
+          ),
+          hasItems && totalPages > 1 ? /* @__PURE__ */ jsxs("div", { className: "mt-4 flex items-center justify-between text-xs text-white/60", children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => setPage((prev) => Math.max(0, prev - 1)),
+                disabled: page === 0,
+                className: cn(
+                  "rounded-full border border-white/15 px-3 py-1 uppercase tracking-[0.2em]",
+                  page === 0 ? "opacity-40 cursor-not-allowed" : "hover:border-white/40"
+                ),
+                children: "Prev"
+              }
+            ),
+            /* @__PURE__ */ jsxs("span", { className: "font-medium text-white/70", children: [
+              "Page ",
+              page + 1,
+              " / ",
+              totalPages
+            ] }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => setPage((prev) => Math.min(totalPages - 1, prev + 1)),
+                disabled: page >= totalPages - 1,
+                className: cn(
+                  "rounded-full border border-white/15 px-3 py-1 uppercase tracking-[0.2em]",
+                  page >= totalPages - 1 ? "opacity-40 cursor-not-allowed" : "hover:border-white/40"
+                ),
+                children: "Next"
+              }
+            )
+          ] }) : null
         ]
       }
     );
@@ -1366,152 +1459,264 @@ var PropertyCompareBar = React5.forwardRef(
   }
 );
 PropertyCompareBar.displayName = "PropertyCompareBar";
-var clampPct = (pct) => Math.min(100, Math.max(0, pct));
-var EditIcon = ({ className }) => /* @__PURE__ */ jsxs(
-  "svg",
-  {
-    viewBox: "0 0 24 24",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    className,
-    children: [
-      /* @__PURE__ */ jsx(
-        "path",
-        {
-          d: "M12 20H21",
-          stroke: "currentColor",
-          strokeWidth: "2",
-          strokeLinecap: "round",
-          strokeLinejoin: "round"
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "path",
-        {
-          d: "M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5Z",
-          stroke: "currentColor",
-          strokeWidth: "2",
-          strokeLinecap: "round",
-          strokeLinejoin: "round"
-        }
-      )
-    ]
-  }
-);
+var TABS = [
+  { id: "portfolio", label: "Portfolio" },
+  { id: "openOrders", label: "Open Orders" },
+  { id: "tradeHistory", label: "Trade History" },
+  { id: "orderHistory", label: "Order History" }
+];
+var panelStyle = {
+  width: "100%",
+  borderRadius: "16px",
+  backgroundColor: "#111111",
+  border: "1px solid rgba(255,255,255,0.08)",
+  color: "#ffffff",
+  display: "flex",
+  flexDirection: "column"
+};
+var headerStyle = {
+  padding: "1.25rem 1.5rem 0.5rem"
+};
+var titleStyle = {
+  margin: 0,
+  fontSize: "1.1rem",
+  fontWeight: 600
+};
+var tabsRowStyle = {
+  display: "flex",
+  gap: "0.5rem",
+  padding: "0 1.5rem",
+  borderBottom: "1px solid rgba(255,255,255,0.08)"
+};
+var tabButtonBase = {
+  background: "none",
+  border: "none",
+  color: "rgba(255,255,255,0.5)",
+  fontSize: "0.9rem",
+  fontWeight: 400,
+  padding: "0.75rem 1rem",
+  cursor: "pointer",
+  position: "relative",
+  transition: "color 0.2s ease"
+};
+var tabContentWrapper = {
+  padding: "1.25rem 1.5rem 1.5rem",
+  display: "flex",
+  flexDirection: "column",
+  gap: "0.75rem",
+  flex: 1
+};
+var tableHeaderStyle = {
+  display: "grid",
+  gridTemplateColumns: "1.8fr 0.9fr 0.7fr 0.8fr 0.8fr 1fr",
+  gap: "0.5rem",
+  paddingBottom: "0.75rem",
+  borderBottom: "1px solid rgba(255,255,255,0.1)",
+  minWidth: "700px"
+};
+var tableHeaderCell = {
+  fontSize: "0.7rem",
+  fontWeight: 700,
+  color: "#ffffff",
+  textTransform: "uppercase",
+  letterSpacing: "0.3px"
+};
+var emptyStateStyle = {
+  flex: 1,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  textAlign: "center",
+  color: "rgba(255,255,255,0.6)",
+  fontSize: "0.95rem",
+  border: "1px dashed rgba(255,255,255,0.12)",
+  borderRadius: "8px",
+  minHeight: "220px"
+};
+var rowStyle = {
+  display: "grid",
+  gridTemplateColumns: "1.8fr 0.9fr 0.7fr 0.8fr 0.8fr 1fr",
+  gap: "0.5rem",
+  alignItems: "center",
+  minWidth: "700px",
+  padding: "0.75rem 0",
+  borderBottom: "1px solid rgba(255,255,255,0.08)"
+};
+var formatCurrency = (value) => {
+  if (value == null || Number.isNaN(value)) return "\u2014";
+  return `$${value.toLocaleString(void 0, {
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2
+  })}`;
+};
+var formatPercent = (value, fractionDigits = 2) => {
+  if (value == null || Number.isNaN(value)) return "\u2014";
+  return `${value.toFixed(fractionDigits)}%`;
+};
 var YourOrders = React5.forwardRef(
-  ({
-    className,
-    title = "Your Orders",
-    orders,
-    onEditPrice,
-    onEditAmount,
-    onCancel,
-    ...props
-  }, ref) => {
-    return /* @__PURE__ */ jsxs(
-      Card,
-      {
-        ref,
-        className: cn(
-          "w-full min-h-[301.52px] rounded-[12px] border border-white/10 bg-black/30 text-white backdrop-blur-md max-[1024px]:min-h-[250px] max-[480px]:min-h-[200px]",
-          className
-        ),
-        ...props,
-        children: [
-          /* @__PURE__ */ jsx(CardHeader, { className: "px-6 pb-2 pt-6", children: /* @__PURE__ */ jsx(CardTitle, { className: "m-0 text-[1.1rem] font-semibold text-white", children: title }) }),
-          /* @__PURE__ */ jsxs("div", { className: "px-6 pb-6 pt-2", children: [
-            /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[1.2fr_0.8fr_1fr_1fr_1fr_1fr_1.2fr_0.8fr] border-b border-white/10 pb-2 text-[0.85rem] font-medium text-white/60", children: [
-              /* @__PURE__ */ jsx("div", { className: "px-2", children: "Asset" }),
-              /* @__PURE__ */ jsx("div", { className: "px-2", children: "Type" }),
-              /* @__PURE__ */ jsx("div", { className: "px-2", children: "Date" }),
-              /* @__PURE__ */ jsx("div", { className: "px-2", children: "Price" }),
-              /* @__PURE__ */ jsx("div", { className: "px-2", children: "Amount" }),
-              /* @__PURE__ */ jsx("div", { className: "px-2", children: "Total" }),
-              /* @__PURE__ */ jsx("div", { className: "px-2", children: "Filled" }),
-              /* @__PURE__ */ jsx("div", { className: "px-2 text-center", children: "Actions" })
-            ] }),
-            orders.length === 0 ? /* @__PURE__ */ jsx("div", { className: "py-10 text-center text-sm text-white/50", children: "No orders" }) : /* @__PURE__ */ jsx("div", { children: orders.map((order) => {
-              const sideClass = order.side === "buy" ? "text-[#0ecb81]" : "text-[#f6465d]";
-              const filled = clampPct(order.filledPercent ?? 0);
-              const isCancelled = order.status?.toUpperCase() === "CANCELLED";
-              const canEditPrice = Boolean(onEditPrice);
-              const canEditAmount = Boolean(onEditAmount);
-              const canCancel = Boolean(onCancel);
-              return /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  className: "grid grid-cols-[1.5fr_0.8fr_0.8fr_1fr_0.8fr_1fr_1fr_0.8fr] items-center border-b border-white/5 py-2 text-[0.9rem] transition-colors hover:bg-white/[0.03]",
-                  children: [
-                    /* @__PURE__ */ jsx("div", { className: "truncate px-2 font-medium", children: order.asset }),
-                    /* @__PURE__ */ jsx("div", { className: cn("px-2 font-medium uppercase", sideClass), children: order.side }),
-                    /* @__PURE__ */ jsx("div", { className: "px-2 font-medium", children: order.date }),
-                    /* @__PURE__ */ jsxs("div", { className: "px-2 font-medium", children: [
-                      /* @__PURE__ */ jsxs("span", { className: "tabular-nums", children: [
-                        "$",
-                        order.price.toLocaleString()
-                      ] }),
-                      /* @__PURE__ */ jsx(
-                        "button",
-                        {
-                          type: "button",
-                          onClick: canEditPrice ? () => onEditPrice?.(order) : void 0,
-                          className: cn(
-                            "ml-1 inline-flex items-center justify-center text-white/60 transition-colors",
-                            canEditPrice ? "cursor-pointer hover:text-[#C9A227] active:translate-y-px" : "cursor-default"
-                          ),
-                          "aria-label": "Edit price",
-                          children: /* @__PURE__ */ jsx(EditIcon, { className: "h-[14px] w-[14px]" })
-                        }
-                      )
-                    ] }),
-                    /* @__PURE__ */ jsxs("div", { className: "px-2 font-medium", children: [
-                      /* @__PURE__ */ jsx("span", { className: "tabular-nums", children: order.amount.toLocaleString() }),
-                      /* @__PURE__ */ jsx(
-                        "button",
+  ({ className, title = "Portfolio Holdings (Demo)", orders, renderOrderActions, ...props }, ref) => {
+    const [activeTab, setActiveTab] = React5.useState("portfolio");
+    const hasOrders = Array.isArray(orders) && orders.length > 0;
+    const renderPortfolio = () => {
+      if (!hasOrders) {
+        return /* @__PURE__ */ jsx("div", { style: emptyStateStyle, children: "No holdings yet. Start trading to build your portfolio." });
+      }
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs("div", { style: tableHeaderStyle, children: [
+          /* @__PURE__ */ jsx("div", { style: tableHeaderCell, children: "Property" }),
+          /* @__PURE__ */ jsx("div", { style: tableHeaderCell, children: "Value" }),
+          /* @__PURE__ */ jsx("div", { style: tableHeaderCell, children: "Holding" }),
+          /* @__PURE__ */ jsx("div", { style: tableHeaderCell, children: "% of Property" }),
+          /* @__PURE__ */ jsx("div", { style: tableHeaderCell, children: "Avg Price" }),
+          /* @__PURE__ */ jsx("div", { style: tableHeaderCell, children: "P&L" })
+        ] }),
+        /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: "0.65rem" }, children: orders.map((order) => {
+          const propertyName = order.asset;
+          const holding = order.holdingLabel ?? `${order.amount.toLocaleString(void 0, {
+            minimumFractionDigits: 0,
+            maximumFractionDigits: 2
+          })} ${propertyName}`;
+          const value = order.value ?? order.total;
+          const portfolioShare = order.portfolioSharePercent != null ? `${order.portfolioSharePercent.toFixed(1)}% of portfolio` : void 0;
+          const propertyPercent = order.propertyPercent;
+          const avgPrice = order.avgEntryPrice ?? order.price;
+          const pnlValue = order.pnlValue;
+          const pnlPercent = order.pnlPercent;
+          const pnlPositive = pnlValue != null ? pnlValue >= 0 : (pnlPercent ?? 0) >= 0;
+          const currentPrice = order.currentPrice ?? order.price;
+          const priceChangePercent = order.priceChangePercent ?? order.pnlPercent;
+          const priceChangePositive = order.priceChangePositive ?? (priceChangePercent != null ? priceChangePercent >= 0 : void 0);
+          return /* @__PURE__ */ jsxs("div", { style: { ...rowStyle, gridTemplateColumns: renderOrderActions ? "1.8fr 0.8fr 0.7fr 0.8fr 0.8fr 0.9fr 0.8fr" : "1.8fr 0.9fr 0.7fr 0.8fr 0.8fr 1fr" }, children: [
+            /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "1rem", alignItems: "center" }, children: [
+              /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "0.15rem" }, children: [
+                /* @__PURE__ */ jsx("div", { style: { fontSize: "0.9rem", fontWeight: 500 }, children: propertyName }),
+                portfolioShare ? /* @__PURE__ */ jsx("div", { style: { fontSize: "0.72rem", color: "rgba(255,255,255,0.5)" }, children: portfolioShare }) : null
+              ] }),
+              currentPrice != null ? /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    style: {
+                      fontSize: "0.9rem",
+                      color: "var(--color-text, #ffffff)",
+                      display: "flex",
+                      alignItems: "center",
+                      gap: "0.25rem"
+                    },
+                    children: [
+                      priceChangePositive != null ? /* @__PURE__ */ jsx(
+                        "span",
                         {
-                          type: "button",
-                          onClick: canEditAmount ? () => onEditAmount?.(order) : void 0,
-                          className: cn(
-                            "ml-1 inline-flex items-center justify-center text-white/60 transition-colors",
-                            canEditAmount ? "cursor-pointer hover:text-[#C9A227] active:translate-y-px" : "cursor-default"
-                          ),
-                          "aria-label": "Edit amount",
-                          children: /* @__PURE__ */ jsx(EditIcon, { className: "h-[14px] w-[14px]" })
+                          style: {
+                            color: priceChangePositive ? "#0ecb81" : "#f6465d",
+                            fontSize: "0.7em"
+                          },
+                          children: priceChangePositive ? "\u25B2" : "\u25BC"
                         }
-                      )
-                    ] }),
-                    /* @__PURE__ */ jsxs("div", { className: "px-2 font-medium tabular-nums", children: [
-                      "$",
-                      order.total.toLocaleString()
-                    ] }),
-                    /* @__PURE__ */ jsxs("div", { className: "px-2", children: [
-                      /* @__PURE__ */ jsxs("div", { className: "text-[0.875rem] font-medium tabular-nums", children: [
-                        filled.toFixed(0),
-                        "%"
-                      ] }),
-                      /* @__PURE__ */ jsx("div", { className: "mt-1 h-1 w-4/5 overflow-hidden rounded-sm bg-white/10", children: /* @__PURE__ */ jsx("div", { className: "h-full rounded-sm bg-[#C9A227]", style: { width: `${filled}%` } }) })
-                    ] }),
-                    /* @__PURE__ */ jsx("div", { className: "px-2 text-center", children: isCancelled ? /* @__PURE__ */ jsx("span", { className: "inline-flex items-center justify-center rounded border border-white/20 px-3 py-1 text-[0.78rem] uppercase tracking-wide text-[#f6465d]", children: "Cancelled" }) : /* @__PURE__ */ jsx(
-                      "button",
-                      {
-                        type: "button",
-                        onClick: canCancel ? () => onCancel?.(order) : void 0,
-                        className: cn(
-                          "rounded border border-white/40 px-3 py-1 text-[0.8rem] text-white/70 transition-colors",
-                          canCancel ? "cursor-pointer hover:bg-white/10 active:text-[#f6465d] active:border-[#f6465d] active:translate-y-px" : "cursor-default"
-                        ),
-                        children: "Cancel"
-                      }
-                    ) })
-                  ]
+                      ) : null,
+                      formatCurrency(currentPrice)
+                    ]
+                  }
+                ),
+                priceChangePercent != null ? /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    style: {
+                      fontSize: "0.7rem",
+                      color: priceChangePositive ? "#0ecb81" : "#f6465d"
+                    },
+                    children: [
+                      "(",
+                      priceChangePositive ? "+" : "",
+                      priceChangePercent.toFixed(2),
+                      "%)"
+                    ]
+                  }
+                ) : null
+              ] }) : null
+            ] }),
+            /* @__PURE__ */ jsx("div", { style: { fontSize: "0.9rem", fontWeight: 500, color: "#D4AF37" }, children: formatCurrency(value) }),
+            /* @__PURE__ */ jsx("div", { style: { fontSize: "0.9rem", color: "rgba(255,255,255,0.92)" }, children: holding }),
+            /* @__PURE__ */ jsx("div", { style: { fontSize: "0.9rem", color: "rgba(255,255,255,0.8)" }, children: formatPercent(propertyPercent, 3) }),
+            /* @__PURE__ */ jsx("div", { style: { fontSize: "0.9rem", color: "rgba(255,255,255,0.9)" }, children: formatCurrency(avgPrice) }),
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                style: {
+                  fontSize: "0.9rem",
+                  fontWeight: 500,
+                  color: pnlPositive ? "#0ecb81" : "#f6465d"
                 },
-                order.id
-              );
-            }) })
-          ] })
-        ]
-      }
-    );
+                children: [
+                  pnlValue != null ? `${pnlPositive ? "+" : "-"}${formatCurrency(Math.abs(pnlValue))}` : formatCurrency(pnlValue),
+                  pnlPercent != null ? /* @__PURE__ */ jsxs("span", { style: { marginLeft: "0.35rem", fontSize: "0.75rem", color: "rgba(255,255,255,0.6)" }, children: [
+                    "(",
+                    pnlPositive ? "+" : "",
+                    pnlPercent.toFixed(1),
+                    "%)"
+                  ] }) : null
+                ]
+              }
+            ),
+            renderOrderActions ? /* @__PURE__ */ jsx("div", { style: { display: "flex", justifyContent: "flex-end" }, children: renderOrderActions(order) }) : null
+          ] }, order.id);
+        }) })
+      ] });
+    };
+    const renderOtherTab = (label) => /* @__PURE__ */ jsx("div", { style: emptyStateStyle, children: `No ${label.toLowerCase()} data available.` });
+    let tabContent = null;
+    switch (activeTab) {
+      case "portfolio":
+        tabContent = renderPortfolio();
+        break;
+      case "openOrders":
+        tabContent = renderOtherTab("Open Orders");
+        break;
+      case "tradeHistory":
+        tabContent = renderOtherTab("Trade History");
+        break;
+      case "orderHistory":
+        tabContent = renderOtherTab("Order History");
+        break;
+      default:
+        tabContent = null;
+    }
+    return /* @__PURE__ */ jsxs("div", { ref, style: panelStyle, className, ...props, children: [
+      /* @__PURE__ */ jsx("div", { style: headerStyle, children: /* @__PURE__ */ jsx("h3", { style: titleStyle, children: title }) }),
+      /* @__PURE__ */ jsx("div", { style: tabsRowStyle, children: TABS.map((tab) => {
+        const isActive = activeTab === tab.id;
+        return /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => setActiveTab(tab.id),
+            style: {
+              ...tabButtonBase,
+              color: isActive ? "#ffffff" : "rgba(255,255,255,0.55)",
+              fontWeight: isActive ? 600 : 400
+            },
+            children: [
+              tab.label,
+              isActive ? /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    position: "absolute",
+                    bottom: "-1px",
+                    left: 0,
+                    right: 0,
+                    height: "2px",
+                    background: "#f0b90b"
+                  }
+                }
+              ) : null
+            ]
+          },
+          tab.id
+        );
+      }) }),
+      /* @__PURE__ */ jsx("div", { style: tabContentWrapper, children: tabContent })
+    ] });
   }
 );
 YourOrders.displayName = "YourOrders";
@@ -1721,7 +1926,10 @@ var PropertyHeroHeader = React5.forwardRef(
     ...props
   }, ref) => {
     const isPositive = changePercent == null ? void 0 : changePercent >= 0;
-    const tradeHoverColor = "var(--color-accent-hover, #f8d12f)";
+    const accentColor = "#e6c87e";
+    const tradeHoverColor = "#f5dd9a";
+    const [isTradeInteracting, setIsTradeInteracting] = React5.useState(false);
+    const [isOfferInteracting, setIsOfferInteracting] = React5.useState(false);
     return /* @__PURE__ */ jsxs(
       "div",
       {
@@ -1807,20 +2015,30 @@ var PropertyHeroHeader = React5.forwardRef(
                 propertyTypeLabel == null ? null : /* @__PURE__ */ jsx("div", { children: propertyTypeLabel })
               ] })
             ] }),
-            /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 max-[768px]:w-full max-[768px]:flex-row max-[768px]:justify-between max-[768px]:gap-2 max-[480px]:gap-2", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-3 max-[768px]:w-full max-[768px]:justify-between max-[768px]:gap-2 max-[480px]:gap-2", children: [
               /* @__PURE__ */ jsx(
                 "button",
                 {
                   type: "button",
                   onClick: onTrade,
-                  className: "rounded border border-transparent px-6 py-3 font-semibold transition-all hover:-translate-y-0.5 hover:shadow-[0_4px_8px_rgba(0,0,0,0.2)] active:translate-y-0 active:shadow-[0_2px_4px_rgba(0,0,0,0.1)] max-[768px]:flex-1 max-[768px]:px-5 max-[768px]:py-2.5 max-[768px]:text-[0.95rem] max-[480px]:px-4 max-[480px]:py-2 max-[480px]:text-[0.9rem]",
-                  style: { backgroundColor: "var(--color-accent, #e6c87e)", color: "black" },
-                  onMouseEnter: (e) => {
-                    e.currentTarget.style.backgroundColor = tradeHoverColor;
-                  },
-                  onMouseLeave: (e) => {
-                    e.currentTarget.style.backgroundColor = "var(--color-accent, #e6c87e)";
+                  className: "flex items-center justify-center rounded border font-semibold transition-all duration-200 hover:-translate-y-0.5 hover:shadow-[0_4px_8px_rgba(0,0,0,0.2)] active:translate-y-0 active:shadow-[0_2px_4px_rgba(0,0,0,0.1)] text-[0.95rem] max-[480px]:text-[0.9rem]",
+                  style: {
+                    backgroundColor: isTradeInteracting ? tradeHoverColor : accentColor,
+                    color: "black",
+                    width: "88.06px",
+                    height: "43px",
+                    minWidth: "88.06px",
+                    borderColor: isTradeInteracting ? accentColor : "transparent",
+                    boxShadow: isTradeInteracting ? `0 0 0 2px rgba(0,0,0,0.4), 0 0 0 4px ${accentColor}` : "none"
                   },
+                  onMouseEnter: () => setIsTradeInteracting(true),
+                  onMouseLeave: () => setIsTradeInteracting(false),
+                  onMouseDown: () => setIsTradeInteracting(true),
+                  onMouseUp: () => setIsTradeInteracting(false),
+                  onFocus: () => setIsTradeInteracting(true),
+                  onBlur: () => setIsTradeInteracting(false),
+                  onTouchStart: () => setIsTradeInteracting(true),
+                  onTouchEnd: () => setIsTradeInteracting(false),
                   children: "Trade"
                 }
               ),
@@ -1829,18 +2047,24 @@ var PropertyHeroHeader = React5.forwardRef(
                 {
                   type: "button",
                   onClick: onMakeOffer,
-                  className: "rounded border px-6 py-3 font-semibold transition-all hover:-translate-y-0.5 hover:shadow-[0_4px_8px_rgba(0,0,0,0.2)] active:translate-y-0 active:shadow-[0_2px_4px_rgba(0,0,0,0.1)] max-[768px]:flex-1 max-[768px]:px-5 max-[768px]:py-2.5 max-[768px]:text-[0.95rem] max-[480px]:px-4 max-[480px]:py-2 max-[480px]:text-[0.9rem]",
+                  className: "flex items-center justify-center rounded border font-semibold transition-all duration-200 hover:-translate-y-0.5 hover:shadow-[0_4px_8px_rgba(0,0,0,0.2)] active:translate-y-0 active:shadow-[0_2px_4px_rgba(0,0,0,0.1)] text-[0.95rem] max-[480px]:text-[0.9rem]",
                   style: {
-                    backgroundColor: "transparent",
-                    borderColor: "var(--color-accent, #e6c87e)",
-                    color: "var(--color-accent, #e6c87e)"
-                  },
-                  onMouseEnter: (e) => {
-                    e.currentTarget.style.backgroundColor = "rgba(240, 185, 11, 0.1)";
-                  },
-                  onMouseLeave: (e) => {
-                    e.currentTarget.style.backgroundColor = "transparent";
+                    backgroundColor: isOfferInteracting ? accentColor : "transparent",
+                    borderColor: accentColor,
+                    color: isOfferInteracting ? "black" : accentColor,
+                    width: "127.14px",
+                    height: "43px",
+                    minWidth: "127.14px",
+                    boxShadow: isOfferInteracting ? `0 0 0 2px rgba(0,0,0,0.4), 0 0 0 4px ${accentColor}` : "none"
                   },
+                  onMouseEnter: () => setIsOfferInteracting(true),
+                  onMouseLeave: () => setIsOfferInteracting(false),
+                  onMouseDown: () => setIsOfferInteracting(true),
+                  onMouseUp: () => setIsOfferInteracting(false),
+                  onFocus: () => setIsOfferInteracting(true),
+                  onBlur: () => setIsOfferInteracting(false),
+                  onTouchStart: () => setIsOfferInteracting(true),
+                  onTouchEnd: () => setIsOfferInteracting(false),
                   children: "Make Offer"
                 }
               )