@loafmarkets/ui 0.1.2 → 0.1.4

package/dist/index.mjs

@@ -3278,7 +3278,7 @@ function DesktopOrderbookLayout({
         )
       ] }) : /* @__PURE__ */ jsx("div", { className: "flex items-center gap-3", children: rightHeader })
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: "px-4 pb-3 pt-2", children: [
+    /* @__PURE__ */ jsxs("div", { className: "px-4 pt-2", children: [
       /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-3 px-3 py-2 text-xs text-white/60", children: [
         /* @__PURE__ */ jsx("div", { children: priceLabel }),
         /* @__PURE__ */ jsx("div", { className: "text-right", children: amountLabel })
@@ -3332,7 +3332,7 @@ function DesktopOrderbookLayout({
             ))
           }
         ),
-        /* @__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: "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: [
             "$",
             formatNumber(midPrice, precision),
@@ -4545,7 +4545,119 @@ var YourOrders = o.forwardRef(
   }
 );
 YourOrders.displayName = "YourOrders";
-var defaultRanges = ["1D", "1W", "1M", "3M", "1Y"];
+var timeToDate = (time) => {
+  if (typeof time === "number") {
+    return new Date(time * 1e3);
+  }
+  if (typeof time === "object" && time !== null && "year" in time && "month" in time && "day" in time) {
+    const { year, month, day } = time;
+    return new Date(Date.UTC(year, month - 1, day));
+  }
+  return null;
+};
+var createTickFormatter = (formatOptions) => {
+  return (time, _tickMarkType, locale) => {
+    const date = timeToDate(time);
+    if (!date) return "";
+    return date.toLocaleString(locale || void 0, 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,
+        secondsVisible: false,
+        borderColor: "rgba(255,255,255,0.06)",
+        tickMarkFormatter: createTickFormatter({ hour: "2-digit", minute: "2-digit" })
+      };
+    case "1h":
+      return {
+        timeVisible: true,
+        secondsVisible: false,
+        borderColor: "rgba(255,255,255,0.06)",
+        tickMarkFormatter: createTickFormatter({ hour: "2-digit", minute: "2-digit" })
+      };
+    case "4h":
+      return {
+        timeVisible: true,
+        secondsVisible: false,
+        borderColor: "rgba(255,255,255,0.06)",
+        tickMarkFormatter: createTickFormatter({ weekday: "short", hour: "2-digit" })
+      };
+    case "24h":
+      return {
+        timeVisible: true,
+        secondsVisible: false,
+        borderColor: "rgba(255,255,255,0.06)",
+        tickMarkFormatter: createTickFormatter({ month: "short", day: "numeric" })
+      };
+    case "1W":
+      return {
+        timeVisible: true,
+        secondsVisible: false,
+        borderColor: "rgba(255,255,255,0.06)",
+        tickMarkFormatter: createTickFormatter({ month: "short", day: "numeric" })
+      };
+    case "1M":
+      return {
+        timeVisible: true,
+        secondsVisible: false,
+        borderColor: "rgba(255,255,255,0.06)",
+        tickMarkFormatter: createTickFormatter({ month: "short", year: "2-digit" })
+      };
+    default:
+      return {
+        timeVisible: true,
+        secondsVisible: false,
+        borderColor: "rgba(255,255,255,0.06)"
+      };
+  }
+};
+var getPriceScaleOptions = (data) => {
+  if (!data.length) return {
+    borderColor: "rgba(230, 200, 126, 0.25)",
+    textColor: "rgba(230, 200, 126, 0.7)"
+  };
+  const prices = data.flatMap((d2) => [d2.open, d2.high, d2.low, d2.close]);
+  const minPrice = Math.min(...prices);
+  const maxPrice = Math.max(...prices);
+  const priceRange = maxPrice - minPrice;
+  let scaleMargins = { top: 0.1, bottom: 0.1 };
+  if (priceRange < 1) {
+    scaleMargins = { top: 0.2, bottom: 0.2 };
+  } else if (priceRange > 1e3) {
+    scaleMargins = { top: 0.05, bottom: 0.05 };
+  }
+  return {
+    borderColor: "rgba(230, 200, 126, 0.25)",
+    textColor: "rgba(230, 200, 126, 0.7)",
+    scaleMargins
+  };
+};
+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,
@@ -4582,6 +4694,21 @@ var PriceChart = o.forwardRef(
     const seriesRef = o.useRef(null);
     const priceLineRef = o.useRef(null);
     const [hoveredRange, setHoveredRange] = o.useState(null);
+    const [dropdownOpen, setDropdownOpen] = o.useState(false);
+    const dropdownRef = o.useRef(null);
+    const isAutoScrollRef = o.useRef(true);
+    const visibleRanges = ranges.slice(0, VISIBLE_RANGE_COUNT);
+    const dropdownRanges = ranges.slice(VISIBLE_RANGE_COUNT);
+    const selectedInDropdown = dropdownRanges.includes(selectedRange);
+    o.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.useMemo(() => {
       if (price != null) return price;
       const last = data.at(-1);
@@ -4614,15 +4741,8 @@ var PriceChart = o.forwardRef(
           vertLines: { color: "rgba(255,255,255,0.06)" },
           horzLines: { color: "rgba(255,255,255,0.06)" }
         },
-        rightPriceScale: {
-          borderColor: "rgba(230, 200, 126, 0.25)",
-          textColor: "rgba(230, 200, 126, 0.7)"
-        },
-        timeScale: {
-          borderColor: "rgba(255,255,255,0.06)",
-          timeVisible: true,
-          secondsVisible: false
-        },
+        rightPriceScale: getPriceScaleOptions(data),
+        timeScale: getTimeScaleOptions(selectedRange || defaultRanges[0]),
         crosshair: {
           vertLine: { color: "rgba(255,255,255,0.12)" },
           horzLine: { color: "rgba(255,255,255,0.12)" }
@@ -4637,17 +4757,37 @@ var PriceChart = o.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();
       };
     }, []);
+    o.useEffect(() => {
+      const chart = chartRef.current;
+      if (!chart) return;
+      const effectiveRange = selectedRange ?? ranges?.[0] ?? "1D";
+      chart.applyOptions({
+        timeScale: getTimeScaleOptions(effectiveRange)
+      });
+    }, [selectedRange, ranges]);
     o.useEffect(() => {
       const chart = chartRef.current;
       const series = seriesRef.current;
       if (!chart || !series) return;
       series.setData(data);
+      chart.applyOptions({
+        rightPriceScale: getPriceScaleOptions(data)
+      });
       if (priceLineRef.current) {
         series.removePriceLine(priceLineRef.current);
         priceLineRef.current = null;
@@ -4663,7 +4803,9 @@ var PriceChart = o.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]";
@@ -4695,30 +4837,97 @@ var PriceChart = o.forwardRef(
           /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex w-full flex-col gap-3 md:w-auto", children: [
               /* @__PURE__ */ jsx(CardTitle, { className: "m-0 text-[1.1rem] font-semibold text-white", children: title }),
-              /* @__PURE__ */ 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__ */ jsx(
+              /* @__PURE__ */ 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__ */ 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__ */ 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__ */ jsxs("div", { className: "relative", ref: dropdownRef, children: [
+                  /* @__PURE__ */ 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__ */ jsx(
+                          "svg",
+                          {
+                            className: cn("h-3 w-3 transition-transform", dropdownOpen && "rotate-180"),
+                            fill: "none",
+                            stroke: "currentColor",
+                            viewBox: "0 0 24 24",
+                            children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" })
+                          }
+                        )
+                      ]
+                    }
+                  ),
+                  dropdownOpen && /* @__PURE__ */ 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__ */ 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__ */ jsxs("div", { style: { display: "flex", alignItems: "center" }, children: [
               resolvedPrice == null ? null : /* @__PURE__ */ jsx(