@loafmarkets/ui 0.1.3 → 0.1.5

package/dist/index.d.mts

@@ -280,7 +280,7 @@ declare const YourOrders: React.ForwardRefExoticComponent<React.HTMLAttributes<H
     renderOrderActions?: (order: YourOrder) => React.ReactNode;
 } & React.RefAttributes<HTMLDivElement>>;
 
-type PriceChartRange = "15m" | "1h" | "4h" | "24h" | "1W" | "1M";
+type PriceChartRange = "30s" | "1m" | "5m" | "15m" | "1h" | "4h" | "24h" | "1W" | "1M";
 type PriceChartCandle = {
     time: LightweightCharts.Time;
     open: number;

package/dist/index.d.ts

@@ -280,7 +280,7 @@ declare const YourOrders: React.ForwardRefExoticComponent<React.HTMLAttributes<H
     renderOrderActions?: (order: YourOrder) => React.ReactNode;
 } & React.RefAttributes<HTMLDivElement>>;
 
-type PriceChartRange = "15m" | "1h" | "4h" | "24h" | "1W" | "1M";
+type PriceChartRange = "30s" | "1m" | "5m" | "15m" | "1h" | "4h" | "24h" | "1W" | "1M";
 type PriceChartCandle = {
     time: LightweightCharts.Time;
     open: number;

package/dist/index.js

@@ -3300,7 +3300,7 @@ function DesktopOrderbookLayout({
         )
       ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-3", children: rightHeader })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-4 pb-3 pt-2", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-4 pt-2", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-3 px-3 py-2 text-xs text-white/60", children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { children: priceLabel }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-right", children: amountLabel })
@@ -3354,11 +3354,11 @@ function DesktopOrderbookLayout({
             ))
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-2 grid grid-cols-2 items-center gap-3 bg-[#0b1a24] px-3 py-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 items-center gap-3 bg-[#0b1a24] px-3 py-2", children: [
           /* @__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);
         }) })
       ] });
@@ -4586,6 +4597,27 @@ var createTickFormatter = (formatOptions) => {
 };
 var getTimeScaleOptions = (range) => {
   switch (range) {
+    case "30s":
+      return {
+        timeVisible: true,
+        secondsVisible: true,
+        borderColor: "rgba(255,255,255,0.06)",
+        tickMarkFormatter: createTickFormatter({ hour: "2-digit", minute: "2-digit", second: "2-digit" })
+      };
+    case "1m":
+      return {
+        timeVisible: true,
+        secondsVisible: true,
+        borderColor: "rgba(255,255,255,0.06)",
+        tickMarkFormatter: createTickFormatter({ hour: "2-digit", minute: "2-digit", second: "2-digit" })
+      };
+    case "5m":
+      return {
+        timeVisible: true,
+        secondsVisible: false,
+        borderColor: "rgba(255,255,255,0.06)",
+        tickMarkFormatter: createTickFormatter({ hour: "2-digit", minute: "2-digit" })
+      };
     case "15m":
       return {
         timeVisible: true,
@@ -4657,7 +4689,8 @@ var getPriceScaleOptions = (data) => {
     scaleMargins
   };
 };
-var defaultRanges = ["15m", "1h", "4h", "24h", "1W", "1M"];
+var defaultRanges = ["30s", "1m", "5m", "15m", "1h", "4h", "24h", "1W", "1M"];
+var VISIBLE_RANGE_COUNT = 4;
 var formatPrice = (value, currencySymbol) => {
   return `${currencySymbol}${value.toLocaleString(void 0, {
     minimumFractionDigits: 2,
@@ -4694,6 +4727,21 @@ var PriceChart = o__namespace.forwardRef(
     const seriesRef = o__namespace.useRef(null);
     const priceLineRef = o__namespace.useRef(null);
     const [hoveredRange, setHoveredRange] = o__namespace.useState(null);
+    const [dropdownOpen, setDropdownOpen] = o__namespace.useState(false);
+    const dropdownRef = o__namespace.useRef(null);
+    const isAutoScrollRef = o__namespace.useRef(true);
+    const visibleRanges = ranges.slice(0, VISIBLE_RANGE_COUNT);
+    const dropdownRanges = ranges.slice(VISIBLE_RANGE_COUNT);
+    const selectedInDropdown = dropdownRanges.includes(selectedRange);
+    o__namespace.useEffect(() => {
+      const handleClickOutside = (e) => {
+        if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
+          setDropdownOpen(false);
+        }
+      };
+      document.addEventListener("mousedown", handleClickOutside);
+      return () => document.removeEventListener("mousedown", handleClickOutside);
+    }, []);
     const resolvedPrice = o__namespace.useMemo(() => {
       if (price != null) return price;
       const last = data.at(-1);
@@ -4742,9 +4790,18 @@ var PriceChart = o__namespace.forwardRef(
       });
       chartRef.current = chart;
       seriesRef.current = series;
+      const handleVisibleRangeChange = () => {
+        const timeScale2 = chart.timeScale();
+        const position2 = timeScale2.scrollPosition();
+        const atRightEdge = position2 <= 0.01;
+        isAutoScrollRef.current = atRightEdge;
+      };
+      const timeScale = chart.timeScale();
+      timeScale.subscribeVisibleLogicalRangeChange(handleVisibleRangeChange);
       return () => {
         chartRef.current = null;
         seriesRef.current = null;
+        timeScale.unsubscribeVisibleLogicalRangeChange(handleVisibleRangeChange);
         chart.remove();
       };
     }, []);
@@ -4779,7 +4836,9 @@ var PriceChart = o__namespace.forwardRef(
           title: resolvedPrice.toFixed(2)
         });
       }
-      chart.timeScale().fitContent();
+      if (isAutoScrollRef.current) {
+        chart.timeScale().scrollToPosition(0, true);
+      }
     }, [data, resolvedPrice]);
     const sign = inferredChangePercent == null ? null : inferredChangePercent >= 0 ? "+" : "";
     const changeClass = inferredChangePercent == null ? "" : inferredChangePercent >= 0 ? "text-[#0ecb81]" : "text-[#f6465d]";
@@ -4811,30 +4870,97 @@ var PriceChart = o__namespace.forwardRef(
           /* @__PURE__ */ jsxRuntime.jsxs(CardHeader, { className: "flex flex-col gap-4 px-4 pb-2 pt-5 md:flex-row md:items-start md:justify-between md:px-6 md:pt-6", children: [
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full flex-col gap-3 md:w-auto", children: [
               /* @__PURE__ */ jsxRuntime.jsx(CardTitle, { className: "m-0 text-[1.1rem] font-semibold text-white", children: title }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-2", children: ranges.map((r2) => {
-                const active = r2 === selectedRange;
-                const hovered = hoveredRange === r2;
-                const style = {
-                  ...btnBaseStyle,
-                  ...hovered ? btnHoverStyle : null,
-                  ...active ? btnActiveStyle : null
-                };
-                return /* @__PURE__ */ jsxRuntime.jsx(
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+                visibleRanges.map((r2) => {
+                  const active = r2 === selectedRange;
+                  const hovered = hoveredRange === r2;
+                  const style = {
+                    ...btnBaseStyle,
+                    ...hovered ? btnHoverStyle : null,
+                    ...active ? btnActiveStyle : null
+                  };
+                  return /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => onRangeChange?.(r2),
+                      onMouseEnter: () => setHoveredRange(r2),
+                      onMouseLeave: () => setHoveredRange((prev2) => prev2 === r2 ? null : prev2),
+                      style,
+                      className: cn(
+                        "rounded border px-3 py-1 text-[0.85rem] font-medium transition-all duration-200"
+                      ),
+                      children: r2
+                    },
+                    r2
+                  );
+                }),
+                selectedInDropdown && selectedRange ? /* @__PURE__ */ jsxRuntime.jsx(
                   "button",
                   {
                     type: "button",
-                    onClick: () => onRangeChange?.(r2),
-                    onMouseEnter: () => setHoveredRange(r2),
-                    onMouseLeave: () => setHoveredRange((prev2) => prev2 === r2 ? null : prev2),
-                    style,
+                    style: {
+                      ...btnBaseStyle,
+                      ...btnActiveStyle
+                    },
                     className: cn(
                       "rounded border px-3 py-1 text-[0.85rem] font-medium transition-all duration-200"
                     ),
-                    children: r2
-                  },
-                  r2
-                );
-              }) })
+                    disabled: true,
+                    children: selectedRange
+                  }
+                ) : null,
+                dropdownRanges.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", ref: dropdownRef, children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => setDropdownOpen((prev2) => !prev2),
+                      onMouseEnter: () => setHoveredRange("__dropdown__"),
+                      onMouseLeave: () => setHoveredRange((prev2) => prev2 === "__dropdown__" ? null : prev2),
+                      style: {
+                        ...btnBaseStyle,
+                        ...hoveredRange === "__dropdown__" ? btnHoverStyle : null
+                      },
+                      className: cn(
+                        "flex items-center gap-1 rounded border px-3 py-1 text-[0.85rem] font-medium transition-all duration-200"
+                      ),
+                      children: [
+                        "More",
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          "svg",
+                          {
+                            className: cn("h-3 w-3 transition-transform", dropdownOpen && "rotate-180"),
+                            fill: "none",
+                            stroke: "currentColor",
+                            viewBox: "0 0 24 24",
+                            children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" })
+                          }
+                        )
+                      ]
+                    }
+                  ),
+                  dropdownOpen && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-0 top-full z-50 mt-1 min-w-[80px] rounded border border-white/10 bg-black/90 py-1 backdrop-blur-md", children: dropdownRanges.map((r2) => {
+                    const active = r2 === selectedRange;
+                    return /* @__PURE__ */ jsxRuntime.jsx(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: () => {
+                          onRangeChange?.(r2);
+                          setDropdownOpen(false);
+                        },
+                        className: cn(
+                          "block w-full px-3 py-1.5 text-left text-[0.85rem] font-medium transition-colors hover:bg-white/10",
+                          active ? "bg-[#e6c87e]/20 text-[#e6c87e]" : "text-white/70"
+                        ),
+                        children: r2
+                      },
+                      r2
+                    );
+                  }) })
+                ] })
+              ] })
             ] }),
             resolvedPrice == null && inferredChangePercent == null ? null : /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center" }, children: [
               resolvedPrice == null ? null : /* @__PURE__ */ jsxRuntime.jsx(