@loafmarkets/ui 0.1.4 → 0.1.5

package/dist/index.js

@@ -3358,7 +3358,7 @@ function DesktopOrderbookLayout({
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("text-lg font-semibold tabular-nums", midClass), children: [
             "$",
             formatNumber(midPrice, precision),
-            midChangePercent == null ? null : /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "ml-2 text-sm font-semibold", children: [
+            midChangePercent == null ? null : /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cn("ml-2 text-sm font-semibold tabular-nums", midClass), children: [
               midChangePercent >= 0 ? "+" : "",
               midChangePercent.toFixed(2),
               "%"
@@ -3413,18 +3413,18 @@ function MobileOrderbookLayout({
   const visibleBids = o__namespace.useMemo(() => bids.slice(0, COMPACT_ROWS_VISIBLE), [bids]);
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 pt-2", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           "span",
           {
             onClick: () => handleTab("orderbook"),
             style: {
               cursor: "pointer",
-              fontSize: "0.8rem",
+              fontSize: "0.72rem",
               fontWeight: tab === "orderbook" ? 600 : 400,
               color: tab === "orderbook" ? "#fff" : "rgba(255,255,255,0.6)",
               borderBottom: tab === "orderbook" ? "2px solid #C9A227" : "none",
-              paddingBottom: "0.25rem"
+              paddingBottom: "0.2rem"
             },
             children: "Orderbook"
           }
@@ -3435,11 +3435,11 @@ function MobileOrderbookLayout({
             onClick: () => handleTab("trades"),
             style: {
               cursor: "pointer",
-              fontSize: "0.8rem",
+              fontSize: "0.72rem",
               fontWeight: tab === "trades" ? 600 : 400,
               color: tab === "trades" ? "#fff" : "rgba(255,255,255,0.6)",
               borderBottom: tab === "trades" ? "2px solid #C9A227" : "none",
-              paddingBottom: "0.25rem"
+              paddingBottom: "0.2rem"
             },
             children: "Trades"
           }
@@ -3499,20 +3499,26 @@ function MobileOrderbookLayout({
             gridTemplateColumns: "1.2fr 0.8fr",
             padding: "0.3rem 0",
             fontSize: "0.8rem",
-            backgroundColor: "rgba(0, 123, 255, 0.05)",
             borderTop: "1px solid rgba(255,255,255,0.1)",
             borderBottom: "1px solid rgba(255,255,255,0.1)"
           },
           children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { fontWeight: "bold", display: "flex", alignItems: "center", gap: "8px" }, className: midClass, children: [
-              "$",
-              formatNumber(midPrice, precision),
-              midChangePercent != null && /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { fontSize: "0.8rem" }, className: midClass, children: [
-                midChangePercent >= 0 ? "+" : "",
-                midChangePercent.toFixed(2),
-                "%"
-              ] })
-            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                style: { fontWeight: "bold", display: "flex", alignItems: "center", gap: "8px" },
+                className: midClass,
+                children: [
+                  "$",
+                  formatNumber(midPrice, precision),
+                  midChangePercent != null && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cn("text-[0.75rem] font-semibold tabular-nums", midClass), children: [
+                    midChangePercent >= 0 ? "+" : "",
+                    midChangePercent.toFixed(2),
+                    "%"
+                  ] })
+                ]
+              }
+            ),
             /* @__PURE__ */ jsxRuntime.jsx("div", {})
           ]
         }
@@ -4405,6 +4411,10 @@ var YourOrders = o__namespace.forwardRef(
     const resolvedTabs = tabs ?? DEFAULT_TABS.map((t) => ({ ...t, orders: orders ?? [], emptyState: `No ${t.label.toLowerCase()} data available.` }));
     const activeTab = resolvedTabs.find((t) => t.id === effectiveActiveTabId) ?? resolvedTabs[0];
     const activeOrders = activeTab?.orders ?? orders ?? [];
+    const tabSupportsActions = activeTab?.enableCancel ?? true;
+    const showActionsColumn = Boolean(renderOrderActions && tabSupportsActions);
+    const baseGridTemplate = "1.8fr 0.9fr 0.7fr 0.8fr 0.8fr 1fr";
+    const gridTemplateColumns = showActionsColumn ? "1.8fr 0.8fr 0.7fr 0.8fr 0.8fr 0.9fr 0.8fr" : baseGridTemplate;
     const displayTitle = title ?? activeTab?.title ?? activeTab?.label ?? "Portfolio Holdings";
     console.log("[YourOrders] tabs:", tabs?.map((t) => ({ id: t.id, ordersCount: t.orders?.length })));
     console.log("[YourOrders] activeTabId prop:", activeTabId);
@@ -4417,13 +4427,14 @@ var YourOrders = o__namespace.forwardRef(
         return /* @__PURE__ */ jsxRuntime.jsx("div", { style: emptyStateStyle, children: emptyMessage });
       }
       return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: tableHeaderStyle, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { ...tableHeaderStyle, gridTemplateColumns }, children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { style: tableHeaderCell, children: "Property" }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { style: tableHeaderCell, children: "Value" }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { style: tableHeaderCell, children: "Holding" }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { style: tableHeaderCell, children: "% of Property" }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { style: tableHeaderCell, children: "Avg Price" }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { style: tableHeaderCell, children: "P&L" })
+          /* @__PURE__ */ jsxRuntime.jsx("div", { style: tableHeaderCell, children: "P&L" }),
+          showActionsColumn ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { ...tableHeaderCell, textAlign: "right" }, children: "Actions" }) : null
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", flexDirection: "column", gap: "0.65rem" }, children: activeOrders.map((order) => {
           const propertyName = order.asset;
@@ -4441,7 +4452,7 @@ var YourOrders = o__namespace.forwardRef(
           const currentPrice = order.currentPrice ?? order.price;
           const priceChangePercent = order.priceChangePercent ?? order.pnlPercent;
           const priceChangePositive = order.priceChangePositive ?? (priceChangePercent != null ? priceChangePercent >= 0 : void 0);
-          return /* @__PURE__ */ jsxRuntime.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: [
+          return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { ...rowStyle, gridTemplateColumns }, children: [
             /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: "1rem", alignItems: "center" }, children: [
               /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "0.15rem" }, children: [
                 /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: "0.9rem", fontWeight: 500 }, children: propertyName }),
@@ -4513,7 +4524,7 @@ var YourOrders = o__namespace.forwardRef(
                 ]
               }
             ),
-            renderOrderActions ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", justifyContent: "flex-end" }, children: renderOrderActions(order) }) : null
+            showActionsColumn ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", justifyContent: "flex-end" }, children: renderOrderActions?.(order) }) : null
           ] }, order.id);
         }) })
       ] });