@loafmarkets/ui 0.1.3 → 0.1.4

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,7 +3354,7 @@ 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),
@@ -4586,6 +4586,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 +4678,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 +4716,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 +4779,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 +4825,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 +4859,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(