dipping-charts 0.1.0

package/dist/react/FullFeaturedChart.js

@@ -0,0 +1,640 @@
+import { jsxs as c, jsx as t, Fragment as Ce } from "react/jsx-runtime";
+import { useState as i, useEffect as v, useCallback as F, useRef as E } from "react";
+import { useChart as Be } from "./hooks/useChart.js";
+import { useIndicators as je } from "./hooks/useIndicators.js";
+import { useLineTools as Ge } from "./hooks/useLineTools.js";
+import { useShiftSnap as Je } from "./hooks/useShiftSnap.js";
+import { IndicatorSettings as Ke } from "./components/IndicatorSettings.js";
+import { filterValidCandles as qe, isValidCandle as le } from "../utils/validateCandle.js";
+import { getLocaleStrings as Qe } from "./locale.js";
+/* empty css                      */
+const L = ["#26a69a", "#ef5350", "#2196f3", "#ff6f00", "#ab47bc", "#66bb6a", "#ffa726", "#42a5f5"], Ze = [
+  { value: "1m", key: "tf_1m" },
+  { value: "5m", key: "tf_5m" },
+  { value: "15m", key: "tf_15m" },
+  { value: "30m", key: "tf_30m" },
+  { value: "1h", key: "tf_1h" },
+  { value: "1d", key: "tf_1d" },
+  { value: "1w", key: "tf_1w" },
+  { value: "1M", key: "tf_1M" }
+], et = {
+  enabled: ["1m", "5m", "15m", "30m", "1h", "1d", "1w", "1M"],
+  disabled: [],
+  currentSession: "regular"
+};
+function tt(u, r) {
+  const h = `tool_${r}`, N = u[h];
+  return typeof N == "string" ? N : r;
+}
+function ot(u, r, h, N) {
+  try {
+    localStorage.setItem(u, JSON.stringify({
+      configs: r,
+      checked: Array.from(h),
+      macdColors: N
+    }));
+  } catch {
+  }
+}
+function st(u) {
+  try {
+    const r = localStorage.getItem(u);
+    if (!r) return null;
+    const h = JSON.parse(r);
+    return {
+      configs: h.configs,
+      checked: new Set(h.checked),
+      macdColors: h.macdColors
+    };
+  } catch {
+    return null;
+  }
+}
+function ge(u, r, h = 280, N = 50) {
+  return {
+    x: Math.max(8, Math.min(u, window.innerWidth - h - 8)),
+    y: Math.max(8, Math.min(r, window.innerHeight - N - 8))
+  };
+}
+function vt({
+  locale: u = "en",
+  data: r,
+  width: h,
+  height: N = 600,
+  className: B = "",
+  enableTimeframes: ye = !0,
+  enableIndicators: Te = !0,
+  enableDrawingTools: j = !0,
+  defaultTimeframe: xe = "5m",
+  timeframeAvailability: G = et,
+  onTimeframeChange: V,
+  realtimeCandle: T,
+  loading: ae = !1,
+  error: J = null,
+  symbol: nt,
+  statusBadge: Fe,
+  priceLines: W,
+  initialLineTools: Me,
+  onLineToolsChange: _e,
+  onDrawingToolClick: ie,
+  showVolume: re = !0,
+  indicatorStorageKey: R,
+  initialIndicatorState: p,
+  onIndicatorStateChange: K
+}) {
+  const l = Qe(u), [P, De] = i(xe), [C, de] = i([]), [S, q] = i(!1), [U, k] = i(!1), [Q, g] = i(!1), [Y, $] = i(""), [me, Z] = i("add"), [O, A] = i(!1), [H, ee] = i({ x: 0, y: 0 }), [te, he] = i(!1), [oe, Ee] = i({ x: 0, y: 0 }), [X, z] = i(!1), b = R ? st(R) : null, Le = { ...{ sma: [], ema: [], rsi: [], macd: [], bbands: [], stochastic: [], atr: [], vwap: [], williamsR: [] }, ...(p == null ? void 0 : p.configs) || (b == null ? void 0 : b.configs) || {} }, Re = p != null && p.checked ? new Set(p.checked) : (b == null ? void 0 : b.checked) || /* @__PURE__ */ new Set(), Pe = (p == null ? void 0 : p.macdColors) || (b == null ? void 0 : b.macdColors) || { line: "#2962FF", signal: "#FF6D00" }, [M, f] = i(Le), [d, $e] = i(Re), [m, a] = i(null), [_, Oe] = i(Pe), { chartRef: Ae, chart: D, candleSeries: y, volumeSeries: se, setData: ue } = Be({ width: h, height: N }), { applyIndicators: pe } = je(D, C);
+  v(() => {
+    if (se)
+      try {
+        se.applyOptions({
+          visible: re
+        });
+      } catch {
+      }
+  }, [se, re]);
+  const Ie = F((e) => {
+    if (ne.current) {
+      const o = ne.current.getBoundingClientRect(), s = ge(o.left + o.width / 2, o.top + o.height / 2);
+      ee(s), A(!0);
+    }
+  }, []), n = Ge(D, {
+    onToolFinished: Ie,
+    onToolsChange: _e,
+    initialTools: Me
+  });
+  Je(D, y, C);
+  const fe = E([]), ne = E(null), Ve = F((e) => {
+    G.disabled.includes(e) || (De(e), V == null || V(e));
+  }, [G.disabled, V]);
+  v(() => {
+    if (r && r.length > 0) {
+      const e = qe(r, "FullFeaturedChart");
+      de(e);
+    }
+  }, [r]), v(() => {
+    if (T && C.length > 0) {
+      if (!le(T)) {
+        console.warn("[FullFeaturedChart] Skipping realtime candle with invalid values:", T);
+        return;
+      }
+      de((e) => {
+        const o = e[e.length - 1];
+        return (o && o.time === T.time ? [...e.slice(0, -1), T] : [...e, T]).filter(le);
+      });
+    }
+  }, [T]);
+  const ve = E(!0), ke = E(P);
+  v(() => {
+    if (C.length > 0) {
+      const e = ve.current || ke.current !== P;
+      try {
+        const o = C.filter(le);
+        o.length > 0 ? ue(o, e) : console.warn("[FullFeaturedChart] No valid data to display after final validation");
+      } catch (o) {
+        console.error("[FullFeaturedChart] Error setting chart data:", o);
+      }
+      ve.current = !1, ke.current = P;
+    }
+  }, [C, ue, P]), v(() => {
+    pe(M, _);
+  }, [M, C, pe, _]);
+  const be = E(!1);
+  v(() => {
+    if (!be.current) {
+      be.current = !0;
+      return;
+    }
+    R && ot(R, M, d, _), K && K({
+      configs: M,
+      checked: Array.from(d),
+      macdColors: _
+    });
+  }, [M, d, _, R, K]);
+  const I = E([]);
+  v(() => {
+    if (y)
+      return I.current.forEach((e) => {
+        try {
+          y.removePriceLine(e);
+        } catch {
+        }
+      }), I.current = [], W && W.length > 0 && W.forEach((e) => {
+        const o = {
+          solid: 0,
+          // LineStyle.Solid
+          dashed: 1,
+          // LineStyle.Dashed
+          dotted: 3
+          // LineStyle.Dotted
+        }, s = y.createPriceLine({
+          price: e.price,
+          color: e.color || "#FF9800",
+          lineWidth: e.lineWidth || 2,
+          lineStyle: o[e.lineStyle || "dashed"] || 1,
+          lineVisible: !0,
+          axisLabelVisible: e.axisLabelVisible !== !1,
+          title: e.label || ""
+        });
+        I.current.push(s);
+      }), () => {
+        const e = [...I.current];
+        I.current = [], e.forEach((o) => {
+          try {
+            y && typeof y.options == "function" && y.removePriceLine(o);
+          } catch {
+          }
+        });
+      };
+  }, [y, W]);
+  const w = F((e) => {
+    const o = new Set(d);
+    if (o.has(e))
+      o.delete(e), f((s) => ({ ...s, [e]: [] }));
+    else if (o.add(e), e === "sma" || e === "ema") {
+      const s = [5, 20, 60, 120], x = [2, 2, 1, 1], ze = s.map((ce, Ne) => ({
+        color: L[Ne % L.length],
+        thickness: x[Ne] || 1,
+        source: "close",
+        value: ce
+      }));
+      f((ce) => ({ ...ce, [e]: ze }));
+    } else f(e === "bbands" ? (s) => ({
+      ...s,
+      bbands: [{
+        color: L[0],
+        thickness: 2,
+        source: "close",
+        value: 20,
+        upperColor: "#F23645",
+        middleColor: "#2962FF",
+        lowerColor: "#089981",
+        stdDev: 2
+      }]
+    }) : e === "macd" ? (s) => ({
+      ...s,
+      macd: [{
+        fastPeriod: 12,
+        slowPeriod: 26,
+        signalPeriod: 9,
+        thickness: 2
+      }]
+    }) : e === "stochastic" ? (s) => ({
+      ...s,
+      stochastic: [{
+        kPeriod: 14,
+        dPeriod: 3,
+        smooth: 3,
+        kColor: "#2962FF",
+        dColor: "#FF6D00",
+        thickness: 2
+      }]
+    }) : e === "vwap" ? (s) => ({
+      ...s,
+      vwap: [{
+        color: "#E040FB",
+        thickness: 2
+      }]
+    }) : e === "atr" ? (s) => ({
+      ...s,
+      atr: [{
+        color: L[0],
+        thickness: 2,
+        source: "close",
+        value: 14
+      }]
+    }) : e === "williamsR" ? (s) => ({
+      ...s,
+      williamsR: [{
+        color: L[0],
+        thickness: 2,
+        source: "close",
+        value: 14
+      }]
+    }) : (s) => ({
+      ...s,
+      [e]: [{
+        color: L[0],
+        thickness: 2,
+        source: "close",
+        value: 14
+      }]
+    }));
+    $e(o);
+  }, [d]), We = F((e) => {
+    if (e.preventDefault(), n.selectedToolId) {
+      const o = ge(e.clientX, e.clientY);
+      ee(o), A(!0);
+    }
+  }, [n.selectedToolId]);
+  v(() => {
+    const e = (o) => {
+      const s = o.target.tagName;
+      if (!(s === "INPUT" || s === "TEXTAREA" || s === "SELECT")) {
+        if (o.key === "Escape") {
+          if (Q) {
+            g(!1);
+            return;
+          }
+          O && n.selectedToolId ? (n.removeSelectedTool(), A(!1)) : n.activeToolType && n.activateTool(n.activeToolType);
+        }
+        if ((o.ctrlKey || o.metaKey) && o.key === "z" && !o.shiftKey) {
+          const x = fe.current.pop();
+          x && D && D.addLineTool(x.toolType, x.points, x.options);
+        }
+      }
+    };
+    return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
+  }, [O, n, Q, D]);
+  const Se = () => {
+    $("Label"), Z("add"), g(!0);
+  }, we = () => {
+    Y && (me === "edit" ? n.updateText(Y) : n.addTextTool(Y)), g(!1), $("");
+  }, Ue = F(() => {
+    var e, o;
+    ((e = n.selectedTool) == null ? void 0 : e.toolType) === "Text" && ($(((o = n.selectedTool.options.text) == null ? void 0 : o.value) || ""), Z("edit"), g(!0));
+  }, [n.selectedTool]), Ye = (e) => {
+    e.target.closest(".context-menu-btn") || e.target.closest(".color-picker-dropdown") || (he(!0), Ee({
+      x: e.clientX - H.x,
+      y: e.clientY - H.y
+    }), e.preventDefault());
+  };
+  v(() => {
+    if (!te) return;
+    const e = (s) => {
+      ee({
+        x: s.clientX - oe.x,
+        y: s.clientY - oe.y
+      });
+    }, o = () => {
+      he(!1);
+    };
+    return window.addEventListener("mousemove", e), window.addEventListener("mouseup", o), () => {
+      window.removeEventListener("mousemove", e), window.removeEventListener("mouseup", o);
+    };
+  }, [te, oe]);
+  const He = F((e) => {
+    var o;
+    n.selectedTool && n.selectedTool.toolType === "Text" && ($(((o = n.selectedTool.options.text) == null ? void 0 : o.value) || ""), Z("edit"), g(!0));
+  }, [n]), Xe = F(() => {
+    n.selectedTool && fe.current.push({
+      toolType: n.selectedTool.toolType,
+      points: n.selectedTool.points,
+      options: n.selectedTool.options
+    }), n.removeSelectedTool(), A(!1);
+  }, [n]);
+  return v(() => {
+    const e = (o) => {
+      const s = o.target;
+      s.closest(".color-palette-popup") || (S && !s.closest(".dropdown") && q(!1), U && !s.closest(".dropdown") && k(!1), O && !s.closest(".context-menu") && (A(!1), z(!1)), X && !s.closest(".color-picker-dropdown") && z(!1));
+    };
+    return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
+  }, [S, U, O, X]), /* @__PURE__ */ c(
+    "div",
+    {
+      className: `container ${B}`,
+      ref: ne,
+      style: { display: "flex", flexDirection: "column", height: "100%" },
+      children: [
+        /* @__PURE__ */ c("div", { className: "header", children: [
+          /* @__PURE__ */ c("div", { className: "header-left", children: [
+            ye && /* @__PURE__ */ t("div", { className: "timeframe-group", children: Ze.map(({ value: e, key: o }) => {
+              const s = G.disabled.includes(e);
+              return /* @__PURE__ */ t(
+                "button",
+                {
+                  className: `btn-timeframe ${P === e ? "active" : ""} ${s ? "disabled" : ""}`,
+                  onClick: () => Ve(e),
+                  disabled: s,
+                  title: s ? l.tf_unavailable : void 0,
+                  children: l[o]
+                },
+                e
+              );
+            }) }),
+            Fe
+          ] }),
+          /* @__PURE__ */ c("div", { className: "header-right", children: [
+            j && n.activeToolType && /* @__PURE__ */ c("div", { className: "active-tool-badge", children: [
+              tt(l, n.activeToolType),
+              " ",
+              l.tool_drawing
+            ] }),
+            Te && /* @__PURE__ */ c("div", { className: "dropdown", children: [
+              /* @__PURE__ */ t("button", { className: "btn-text", onClick: () => {
+                q(!S), k(!1);
+              }, children: l.btn_indicators }),
+              S && /* @__PURE__ */ t("div", { className: "dropdown-menu show", id: "indicatorMenu", children: /* @__PURE__ */ c("div", { className: "indicator-menu-layout", children: [
+                /* @__PURE__ */ c("div", { className: "indicator-list-side", children: [
+                  /* @__PURE__ */ t("div", { className: "indicator-category", children: l.cat_overlay }),
+                  /* @__PURE__ */ c(
+                    "div",
+                    {
+                      className: `indicator-item ${d.has("sma") ? "checked" : ""} ${m === "sma" ? "selected" : ""}`,
+                      onClick: () => a("sma"),
+                      children: [
+                        /* @__PURE__ */ t("span", { children: l.ind_sma }),
+                        /* @__PURE__ */ t("div", { className: "indicator-checkbox", onClick: (e) => {
+                          e.stopPropagation(), w("sma"), a("sma");
+                        } })
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ c(
+                    "div",
+                    {
+                      className: `indicator-item ${d.has("ema") ? "checked" : ""} ${m === "ema" ? "selected" : ""}`,
+                      onClick: () => a("ema"),
+                      children: [
+                        /* @__PURE__ */ t("span", { children: l.ind_ema }),
+                        /* @__PURE__ */ t("div", { className: "indicator-checkbox", onClick: (e) => {
+                          e.stopPropagation(), w("ema"), a("ema");
+                        } })
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ c(
+                    "div",
+                    {
+                      className: `indicator-item ${d.has("bbands") ? "checked" : ""} ${m === "bbands" ? "selected" : ""}`,
+                      onClick: () => a("bbands"),
+                      children: [
+                        /* @__PURE__ */ t("span", { children: l.ind_bbands }),
+                        /* @__PURE__ */ t("div", { className: "indicator-checkbox", onClick: (e) => {
+                          e.stopPropagation(), w("bbands"), a("bbands");
+                        } })
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ c(
+                    "div",
+                    {
+                      className: `indicator-item ${d.has("vwap") ? "checked" : ""} ${m === "vwap" ? "selected" : ""}`,
+                      onClick: () => a("vwap"),
+                      children: [
+                        /* @__PURE__ */ t("span", { children: l.ind_vwap }),
+                        /* @__PURE__ */ t("div", { className: "indicator-checkbox", onClick: (e) => {
+                          e.stopPropagation(), w("vwap"), a("vwap");
+                        } })
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ t("div", { className: "indicator-category", children: l.cat_oscillator }),
+                  /* @__PURE__ */ c(
+                    "div",
+                    {
+                      className: `indicator-item ${d.has("rsi") ? "checked" : ""} ${m === "rsi" ? "selected" : ""}`,
+                      onClick: () => a("rsi"),
+                      children: [
+                        /* @__PURE__ */ t("span", { children: l.ind_rsi }),
+                        /* @__PURE__ */ t("div", { className: "indicator-checkbox", onClick: (e) => {
+                          e.stopPropagation(), w("rsi"), a("rsi");
+                        } })
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ c(
+                    "div",
+                    {
+                      className: `indicator-item ${d.has("macd") ? "checked" : ""} ${m === "macd" ? "selected" : ""}`,
+                      onClick: () => a("macd"),
+                      children: [
+                        /* @__PURE__ */ t("span", { children: l.ind_macd }),
+                        /* @__PURE__ */ t("div", { className: "indicator-checkbox", onClick: (e) => {
+                          e.stopPropagation(), w("macd"), a("macd");
+                        } })
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ c(
+                    "div",
+                    {
+                      className: `indicator-item ${d.has("stochastic") ? "checked" : ""} ${m === "stochastic" ? "selected" : ""}`,
+                      onClick: () => a("stochastic"),
+                      children: [
+                        /* @__PURE__ */ t("span", { children: l.ind_stochastic }),
+                        /* @__PURE__ */ t("div", { className: "indicator-checkbox", onClick: (e) => {
+                          e.stopPropagation(), w("stochastic"), a("stochastic");
+                        } })
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ c(
+                    "div",
+                    {
+                      className: `indicator-item ${d.has("atr") ? "checked" : ""} ${m === "atr" ? "selected" : ""}`,
+                      onClick: () => a("atr"),
+                      children: [
+                        /* @__PURE__ */ t("span", { children: l.ind_atr }),
+                        /* @__PURE__ */ t("div", { className: "indicator-checkbox", onClick: (e) => {
+                          e.stopPropagation(), w("atr"), a("atr");
+                        } })
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ c(
+                    "div",
+                    {
+                      className: `indicator-item ${d.has("williamsR") ? "checked" : ""} ${m === "williamsR" ? "selected" : ""}`,
+                      onClick: () => a("williamsR"),
+                      children: [
+                        /* @__PURE__ */ t("span", { children: l.ind_williamsR }),
+                        /* @__PURE__ */ t("div", { className: "indicator-checkbox", onClick: (e) => {
+                          e.stopPropagation(), w("williamsR"), a("williamsR");
+                        } })
+                      ]
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ t("div", { className: "indicator-settings-side", children: m ? /* @__PURE__ */ t(
+                  Ke,
+                  {
+                    indicator: m,
+                    configs: M,
+                    isChecked: d.has(m),
+                    onConfigChange: (e, o) => {
+                      f((s) => ({ ...s, [e]: o }));
+                    },
+                    macdColors: _,
+                    onMacdColorsChange: Oe,
+                    locale: u
+                  }
+                ) : /* @__PURE__ */ t("div", { className: "indicator-empty-state", children: l.selectIndicator }) })
+              ] }) })
+            ] }),
+            j && /* @__PURE__ */ c("div", { className: "dropdown", children: [
+              /* @__PURE__ */ t("button", { className: "btn-text", onClick: () => {
+                ie && !ie() || (k(!U), q(!1));
+              }, children: l.btn_draw }),
+              U && /* @__PURE__ */ c("div", { className: "dropdown-menu show", children: [
+                /* @__PURE__ */ c("button", { className: "dropdown-item", onClick: () => {
+                  n.activateTool("TrendLine"), k(!1);
+                }, children: [
+                  /* @__PURE__ */ t("span", { className: "item-icon tossface", children: "📏" }),
+                  /* @__PURE__ */ t("span", { children: l.tool_TrendLine })
+                ] }),
+                /* @__PURE__ */ c("button", { className: "dropdown-item", onClick: () => {
+                  n.activateTool("HorizontalLine"), k(!1);
+                }, children: [
+                  /* @__PURE__ */ t("span", { className: "item-icon tossface", children: "➖" }),
+                  /* @__PURE__ */ t("span", { children: l.tool_HorizontalLine })
+                ] }),
+                /* @__PURE__ */ c("button", { className: "dropdown-item", onClick: () => {
+                  n.activateTool("VerticalLine"), k(!1);
+                }, children: [
+                  /* @__PURE__ */ t("span", { className: "item-icon", children: "|" }),
+                  /* @__PURE__ */ t("span", { children: l.tool_VerticalLine })
+                ] }),
+                /* @__PURE__ */ c("button", { className: "dropdown-item", onClick: () => {
+                  n.activateTool("Rectangle"), k(!1);
+                }, children: [
+                  /* @__PURE__ */ t("span", { className: "item-icon tossface", children: "▭" }),
+                  /* @__PURE__ */ t("span", { children: l.tool_Rectangle })
+                ] }),
+                /* @__PURE__ */ c("button", { className: "dropdown-item", onClick: () => {
+                  n.activateTool("FibRetracement"), k(!1);
+                }, children: [
+                  /* @__PURE__ */ t("span", { className: "item-icon", children: "Φ" }),
+                  /* @__PURE__ */ t("span", { children: l.tool_FibRetracement })
+                ] }),
+                /* @__PURE__ */ c("button", { className: "dropdown-item", onClick: () => {
+                  Se(), k(!1);
+                }, children: [
+                  /* @__PURE__ */ t("span", { className: "item-icon", children: "T" }),
+                  /* @__PURE__ */ t("span", { children: l.tool_Text })
+                ] })
+              ] })
+            ] }),
+            j && /* @__PURE__ */ c(Ce, { children: [
+              /* @__PURE__ */ t("div", { className: "separator" }),
+              /* @__PURE__ */ t("button", { className: "btn-delete", onClick: n.removeAllTools, children: l.btn_clearAll })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ c("div", { className: "chart-wrapper", style: { position: "relative", flex: 1, minHeight: 0 }, children: [
+          /* @__PURE__ */ t(
+            "div",
+            {
+              ref: Ae,
+              style: { width: "100%", height: "100%" },
+              onContextMenu: We,
+              onDoubleClick: He
+            }
+          ),
+          ae && /* @__PURE__ */ c("div", { className: "chart-overlay loading-overlay", children: [
+            /* @__PURE__ */ t("div", { className: "loading-spinner" }),
+            /* @__PURE__ */ t("span", { children: l.loading })
+          ] }),
+          J && /* @__PURE__ */ c("div", { className: "chart-overlay error-overlay", children: [
+            /* @__PURE__ */ t("span", { className: "error-icon", children: "⚠️" }),
+            /* @__PURE__ */ t("span", { children: J })
+          ] }),
+          !ae && !J && C.length === 0 && /* @__PURE__ */ t("div", { className: "chart-overlay empty-overlay", children: /* @__PURE__ */ t("span", { children: l.noData }) })
+        ] }),
+        Q && /* @__PURE__ */ t("div", { className: "modal-overlay show", onClick: () => g(!1), children: /* @__PURE__ */ c("div", { className: "modal-content", onClick: (e) => e.stopPropagation(), children: [
+          /* @__PURE__ */ t("div", { className: "modal-title", children: me === "edit" ? l.textEdit : l.textAdd }),
+          /* @__PURE__ */ t(
+            "input",
+            {
+              type: "text",
+              className: "modal-input",
+              value: Y,
+              onChange: (e) => $(e.target.value),
+              onKeyDown: (e) => {
+                e.key === "Enter" && we(), e.key === "Escape" && g(!1);
+              },
+              placeholder: l.textPlaceholder,
+              autoFocus: !0
+            }
+          ),
+          /* @__PURE__ */ c("div", { className: "modal-buttons", children: [
+            /* @__PURE__ */ t("button", { className: "modal-btn modal-btn-cancel", onClick: () => g(!1), children: l.cancel }),
+            /* @__PURE__ */ t("button", { className: "modal-btn modal-btn-confirm", onClick: we, children: l.confirm })
+          ] })
+        ] }) }),
+        O && n.selectedTool && /* @__PURE__ */ c(
+          "div",
+          {
+            className: "context-menu show",
+            style: {
+              left: H.x,
+              top: H.y,
+              cursor: te ? "grabbing" : "grab"
+            },
+            onClick: (e) => e.stopPropagation(),
+            onMouseDown: Ye,
+            children: [
+              /* @__PURE__ */ t("button", { className: "context-menu-btn", onClick: () => n.updateLineWidth(Math.max(1, n.currentWidth - 1)), children: "−" }),
+              /* @__PURE__ */ t("div", { className: "width-display", children: n.currentWidth }),
+              /* @__PURE__ */ t("button", { className: "context-menu-btn", onClick: () => n.updateLineWidth(Math.min(10, n.currentWidth + 1)), children: "+" }),
+              /* @__PURE__ */ t("div", { className: "context-menu-separator" }),
+              /* @__PURE__ */ c("div", { className: "color-picker-dropdown", children: [
+                /* @__PURE__ */ t("button", { className: "color-current-btn", onClick: () => z(!X), children: /* @__PURE__ */ t("div", { className: "color-current-display", style: { background: n.currentColor } }) }),
+                X && /* @__PURE__ */ t("div", { className: "color-palette show", children: ["#000000", "#ef4444", "#2962FF", "#22c55e", "#eab308", "#a855f7", "#f97316"].map((e) => /* @__PURE__ */ t(
+                  "button",
+                  {
+                    className: "color-option",
+                    style: { background: e },
+                    onClick: () => {
+                      n.updateColor(e), z(!1);
+                    }
+                  },
+                  e
+                )) })
+              ] }),
+              n.selectedTool.toolType === "Text" && /* @__PURE__ */ c(Ce, { children: [
+                /* @__PURE__ */ t("div", { className: "context-menu-separator" }),
+                /* @__PURE__ */ t("button", { className: "context-menu-btn", onClick: Ue, children: "T" })
+              ] }),
+              /* @__PURE__ */ t("div", { className: "context-menu-separator" }),
+              /* @__PURE__ */ t("button", { className: "context-menu-btn danger", onClick: Xe, children: "🗑️" })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  vt as FullFeaturedChart
+};
+//# sourceMappingURL=FullFeaturedChart.js.map