@363045841yyt/klinechart 0.7.5 → 0.7.6

package/dist/index.js

@@ -1,21 +1,13 @@
-import { Fragment as e, Teleport as t, Transition as n, computed as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createTextVNode as c, createVNode as l, defineComponent as u, effectScope as d, h as f, inject as p, markRaw as m, nextTick as h, normalizeClass as g, normalizeStyle as _, onBeforeUnmount as v, onMounted as y, onScopeDispose as b, onUnmounted as x, openBlock as S, ref as C, renderList as w, resolveDynamicComponent as T, shallowRef as E, toDisplayString as D, unref as O, vModelCheckbox as k, vModelSelect as A, watch as j, withCtx as M, withDirectives as N, withModifiers as P } from "vue";
+import { Fragment as e, Teleport as t, Transition as n, computed as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createTextVNode as c, createVNode as l, defineComponent as u, effectScope as d, h as f, inject as p, markRaw as m, nextTick as h, normalizeClass as g, normalizeStyle as _, onBeforeUnmount as v, onMounted as ee, onScopeDispose as y, onUnmounted as b, openBlock as x, provide as S, ref as C, renderList as w, resolveDynamicComponent as T, shallowRef as E, toDisplayString as D, unref as O, vModelCheckbox as k, vModelSelect as A, watch as j, withCtx as M, withDirectives as N, withModifiers as P } from "vue";
 import { VERSION as F, createChartController as I, createIndicatorSelectorController as L } from "@363045841yyt/klinechart-core";
-import { allIndicators as R, findIndicator as z, isSubIndicatorId as B } from "@363045841yyt/klinechart-core/engine/renderers/Indicator/indicatorData";
-import { createIndicatorSelectorController as ee } from "@363045841yyt/klinechart-core/controllers";
-import { SemanticChartController as V, __setDataFetcher as te } from "@363045841yyt/klinechart-core/semantic";
-import { Chart as H } from "@363045841yyt/klinechart-core/engine/chart";
-import { createChartStore as ne } from "@363045841yyt/klinechart-core/engine/chart-store";
-import { kGapFromKWidth as U, zoomLevelToKWidth as re } from "@363045841yyt/klinechart-core/engine/utils/zoom";
-import { getPhysicalKLineConfig as W } from "@363045841yyt/klinechart-core/engine/utils/klineConfig";
-import { SUB_PANE_INDICATORS as ie, SUB_PANE_INDICATOR_CONFIGS as ae } from "@363045841yyt/klinechart-core/engine/renderers/Indicator/subPaneConfig";
-import { createPaneTitleRendererPlugin as oe } from "@363045841yyt/klinechart-core/engine/renderers/paneTitle";
-import { DEFAULT_SETTINGS as G, SETTINGS_STORAGE_KEY as se } from "@363045841yyt/klinechart-core/config";
-import { DrawingInteractionController as ce } from "@363045841yyt/klinechart-core/engine/drawing";
+import { DrawingInteractionController as te, SUB_PANE_INDICATORS as R, SUB_PANE_INDICATOR_CONFIGS as ne, allIndicators as re, createChartController as z, createIndicatorSelectorController as B, findIndicator as ie, getPhysicalKLineConfig as ae, isSubIndicatorId as V, kGapFromKWidth as H, zoomLevelToKWidth as oe } from "@363045841yyt/klinechart-core/controllers";
+import { SemanticChartController as se, __setDataFetcher as ce } from "@363045841yyt/klinechart-core/semantic";
+import { DEFAULT_SETTINGS as U, SETTINGS_STORAGE_KEY as le } from "@363045841yyt/klinechart-core/config";
 //#region src/components/DrawingStyleToolbar.vue?vue&type=script&setup=true&lang.ts
-var le = {
+var ue = {
 	class: "toolbar-item color-item",
 	title: "颜色"
-}, ue = ["value"], de = ["value"], K = ["value"], fe = /* @__PURE__ */ u({
+}, de = ["value"], W = ["value"], G = ["value"], K = /* @__PURE__ */ u({
 	__name: "DrawingStyleToolbar",
 	props: { drawing: {} },
 	emits: ["updateStyle", "delete"],
@@ -24,7 +16,7 @@ var le = {
 		function r(e) {
 			e.key === "Delete" && (e.preventDefault(), n("delete"));
 		}
-		y(() => document.addEventListener("keydown", r)), x(() => document.removeEventListener("keydown", r));
+		ee(() => document.addEventListener("keydown", r)), b(() => document.removeEventListener("keydown", r));
 		function i(e) {
 			n("updateStyle", { stroke: e });
 		}
@@ -34,13 +26,13 @@ var le = {
 		function c(e) {
 			n("updateStyle", { strokeStyle: e });
 		}
-		return (t, n) => (S(), o("div", {
+		return (t, n) => (x(), o("div", {
 			class: "drawing-style-toolbar",
 			onPointerdown: n[4] ||= P(() => {}, ["stop"]),
 			onPointermove: n[5] ||= P(() => {}, ["stop"]),
 			onPointerup: n[6] ||= P(() => {}, ["stop"])
 		}, [
-			s("div", le, [s("span", {
+			s("div", ue, [s("span", {
 				class: "color-swatch",
 				style: _({ background: e.drawing.style.stroke ?? "#2962ff" })
 			}, null, 4), s("input", {
@@ -48,7 +40,7 @@ var le = {
 				class: "color-input",
 				value: e.drawing.style.stroke ?? "#2962ff",
 				onInput: n[0] ||= (e) => i(e.target.value)
-			}, null, 40, ue)]),
+			}, null, 40, de)]),
 			s("select", {
 				class: "toolbar-select",
 				value: e.drawing.style.strokeWidth ?? 1,
@@ -59,7 +51,7 @@ var le = {
 				s("option", { value: 2 }, "2px", -1),
 				s("option", { value: 3 }, "3px", -1),
 				s("option", { value: 4 }, "4px", -1)
-			]], 40, de),
+			]], 40, W),
 			s("select", {
 				class: "toolbar-select",
 				value: e.drawing.style.strokeStyle ?? "solid",
@@ -69,7 +61,7 @@ var le = {
 				s("option", { value: "solid" }, "实线", -1),
 				s("option", { value: "dashed" }, "虚线", -1),
 				s("option", { value: "dotted" }, "点线", -1)
-			]], 40, K),
+			]], 40, G),
 			s("button", {
 				type: "button",
 				class: "toolbar-btn delete-btn",
@@ -95,22 +87,32 @@ var le = {
 	let n = e.__vccOpts || e;
 	for (let [e, r] of t) n[e] = r;
 	return n;
-}, pe = /* @__PURE__ */ q(fe, [["__scopeId", "data-v-4c26f819"]]), me = { class: "params-header" }, J = { class: "header-left" }, Y = { class: "params-title" }, he = { class: "header-right" }, ge = {
+}, fe = /* @__PURE__ */ q(K, [["__scopeId", "data-v-a2cb0547"]]), pe = Symbol("fullscreen-teleport-target");
+function me(e) {
+	S(pe, e);
+}
+function J() {
+	let e = p(pe, null);
+	return r(() => e?.value ?? "body");
+}
+//#endregion
+//#region src/components/IndicatorParams.vue?vue&type=script&setup=true&lang.ts
+var Y = { class: "params-header" }, he = { class: "header-left" }, ge = { class: "params-title" }, _e = { class: "header-right" }, ve = {
 	key: 0,
 	class: "indicator-description"
-}, _e = { class: "params-body" }, ve = { class: "param-header" }, ye = { class: "param-label" }, be = { class: "param-label-text" }, xe = {
+}, ye = { class: "params-body" }, be = { class: "param-header" }, xe = { class: "param-label" }, Se = { class: "param-label-text" }, Ce = {
 	key: 0,
 	class: "param-range"
-}, Se = { class: "input-wrapper" }, Ce = ["disabled", "onClick"], we = [
+}, we = { class: "input-wrapper" }, Te = ["disabled", "onClick"], Ee = [
 	"value",
 	"min",
 	"max",
 	"step",
 	"onInput"
-], Te = ["disabled", "onClick"], Ee = {
+], De = ["disabled", "onClick"], Oe = {
 	key: 0,
 	class: "param-description"
-}, De = { class: "params-footer" }, Oe = { class: "footer-right" }, ke = /* @__PURE__ */ q(/* @__PURE__ */ u({
+}, ke = { class: "params-footer" }, Ae = { class: "footer-right" }, je = /* @__PURE__ */ q(/* @__PURE__ */ u({
 	__name: "IndicatorParams",
 	props: {
 		visible: { type: Boolean },
@@ -121,53 +123,53 @@ var le = {
 		values: {}
 	},
 	emits: ["close", "confirm"],
-	setup(u, { emit: d }) {
-		let f = u, p = d, m = C({ ...f.values }), h = C(!0), _ = r(() => "body");
-		j(() => f.values, (e) => {
-			m.value = { ...e };
+	setup(r, { emit: u }) {
+		let d = r, f = u, p = C({ ...d.values }), m = C(!0), h = J();
+		j(() => d.values, (e) => {
+			p.value = { ...e };
 		}, {
 			deep: !0,
 			immediate: !0
-		}), j(() => f.visible, (e) => {
-			e && (m.value = { ...f.values });
+		}), j(() => d.visible, (e) => {
+			e && (p.value = { ...d.values });
 		});
-		function v(e, t) {
+		function _(e, t) {
 			let n = t.target, r = parseFloat(n.value);
-			isNaN(r) || (m.value[e] = r);
+			isNaN(r) || (p.value[e] = r);
 		}
-		function y(e, t) {
-			let n = e.step || 1, r = (m.value[e.key] || 0) + t * n;
-			e.min !== void 0 && (r = Math.max(e.min, r)), e.max !== void 0 && (r = Math.min(e.max, r)), m.value[e.key] = parseFloat(r.toFixed(10));
+		function v(e, t) {
+			let n = e.step || 1, r = (p.value[e.key] || 0) + t * n;
+			e.min !== void 0 && (r = Math.max(e.min, r)), e.max !== void 0 && (r = Math.min(e.max, r)), p.value[e.key] = parseFloat(r.toFixed(10));
 		}
-		function b() {
+		function ee() {
 			let e = {};
-			f.params.forEach((t) => {
-				e[t.key] = t.default ?? f.values[t.key] ?? 0;
-			}), m.value = e;
+			d.params.forEach((t) => {
+				e[t.key] = t.default ?? d.values[t.key] ?? 0;
+			}), p.value = e;
 		}
-		function x() {
-			p("confirm", { ...m.value });
+		function y() {
+			f("confirm", { ...p.value });
 		}
-		return (r, d) => (S(), i(t, { to: _.value }, [l(n, { name: "overlay" }, {
-			default: M(() => [u.visible ? (S(), o("div", {
+		return (u, d) => (x(), i(t, { to: O(h) }, [l(n, { name: "overlay" }, {
+			default: M(() => [r.visible ? (x(), o("div", {
 				key: 0,
 				class: "params-overlay",
-				onClick: d[4] ||= (e) => r.$emit("close")
+				onClick: d[4] ||= (e) => u.$emit("close")
 			}, [l(n, { name: "modal" }, {
 				default: M(() => [s("div", {
 					class: "indicator-params",
 					onClick: d[3] ||= P(() => {}, ["stop"])
 				}, [
-					s("div", me, [s("div", J, [s("span", Y, D(u.indicatorName), 1), d[5] ||= s("span", { class: "params-subtitle" }, "参数设置", -1)]), s("div", he, [s("button", {
-						class: g(["toggle-desc-btn", { active: h.value }]),
-						onClick: d[0] ||= (e) => h.value = !h.value,
+					s("div", Y, [s("div", he, [s("span", ge, D(r.indicatorName), 1), d[5] ||= s("span", { class: "params-subtitle" }, "参数设置", -1)]), s("div", _e, [s("button", {
+						class: g(["toggle-desc-btn", { active: m.value }]),
+						onClick: d[0] ||= (e) => m.value = !m.value,
 						title: "显示/隐藏说明"
 					}, [...d[6] ||= [s("svg", { viewBox: "0 0 1024 1024" }, [s("path", {
 						d: "M512 97.52381c228.912762 0 414.47619 185.563429 414.47619 414.47619s-185.563429 414.47619-414.47619 414.47619S97.52381 740.912762 97.52381 512 283.087238 97.52381 512 97.52381z m0 73.142857C323.486476 170.666667 170.666667 323.486476 170.666667 512s152.81981 341.333333 341.333333 341.333333 341.333333-152.81981 341.333333-341.333333S700.513524 170.666667 512 170.666667z m36.571429 268.190476v292.571428h-73.142858V438.857143h73.142858z m0-121.904762v73.142857h-73.142858v-73.142857h73.142858z",
 						fill: "currentColor"
 					})], -1)]], 2), s("button", {
 						class: "params-close",
-						onClick: d[1] ||= (e) => r.$emit("close")
+						onClick: d[1] ||= (e) => u.$emit("close")
 					}, [...d[7] ||= [s("svg", {
 						viewBox: "0 0 24 24",
 						fill: "none",
@@ -175,51 +177,51 @@ var le = {
 						"stroke-width": "2"
 					}, [s("path", { d: "M18 6L6 18M6 6l12 12" })], -1)]])])]),
 					l(n, { name: "slide" }, {
-						default: M(() => [h.value && u.indicatorDescription ? (S(), o("div", ge, [s("p", null, D(u.indicatorDescription), 1)])) : a("", !0)]),
+						default: M(() => [m.value && r.indicatorDescription ? (x(), o("div", ve, [s("p", null, D(r.indicatorDescription), 1)])) : a("", !0)]),
 						_: 1
 					}),
-					s("div", _e, [(S(!0), o(e, null, w(u.params, (e) => (S(), o("div", {
+					s("div", ye, [(x(!0), o(e, null, w(r.params, (e) => (x(), o("div", {
 						key: e.key,
-						class: g(["param-item", { "has-desc": h.value && e.description }])
-					}, [s("div", ve, [s("label", ye, [s("span", be, D(e.label), 1), e.min !== void 0 || e.max !== void 0 ? (S(), o("span", xe, D(e.min ?? "-∞") + " ~ " + D(e.max ?? "+∞"), 1)) : a("", !0)]), s("div", Se, [
+						class: g(["param-item", { "has-desc": m.value && e.description }])
+					}, [s("div", be, [s("label", xe, [s("span", Se, D(e.label), 1), e.min !== void 0 || e.max !== void 0 ? (x(), o("span", Ce, D(e.min ?? "-∞") + " ~ " + D(e.max ?? "+∞"), 1)) : a("", !0)]), s("div", we, [
 						s("button", {
 							class: "stepper-btn",
-							disabled: e.min !== void 0 && (m.value[e.key] ?? 0) <= e.min,
-							onClick: (t) => y(e, -1)
-						}, " − ", 8, Ce),
-						e.type === "number" ? (S(), o("input", {
+							disabled: e.min !== void 0 && (p.value[e.key] ?? 0) <= e.min,
+							onClick: (t) => v(e, -1)
+						}, " − ", 8, Te),
+						e.type === "number" ? (x(), o("input", {
 							key: 0,
 							type: "number",
 							class: "param-input",
-							value: m.value[e.key],
+							value: p.value[e.key],
 							min: e.min,
 							max: e.max,
 							step: e.step || 1,
-							onInput: (t) => v(e.key, t)
-						}, null, 40, we)) : a("", !0),
+							onInput: (t) => _(e.key, t)
+						}, null, 40, Ee)) : a("", !0),
 						s("button", {
 							class: "stepper-btn",
-							disabled: e.max !== void 0 && (m.value[e.key] ?? 0) >= e.max,
-							onClick: (t) => y(e, 1)
-						}, " + ", 8, Te)
+							disabled: e.max !== void 0 && (p.value[e.key] ?? 0) >= e.max,
+							onClick: (t) => v(e, 1)
+						}, " + ", 8, De)
 					])]), l(n, { name: "slide" }, {
-						default: M(() => [h.value && e.description ? (S(), o("div", Ee, D(e.description), 1)) : a("", !0)]),
+						default: M(() => [m.value && e.description ? (x(), o("div", Oe, D(e.description), 1)) : a("", !0)]),
 						_: 2
 					}, 1024)], 2))), 128))]),
-					s("div", De, [s("button", {
+					s("div", ke, [s("button", {
 						class: "params-btn reset",
-						onClick: b
+						onClick: ee
 					}, [...d[8] ||= [s("svg", {
 						viewBox: "0 0 24 24",
 						fill: "none",
 						stroke: "currentColor",
 						"stroke-width": "2"
-					}, [s("path", { d: "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" }), s("path", { d: "M3 3v5h5" })], -1), c(" 重置 ", -1)]]), s("div", Oe, [s("button", {
+					}, [s("path", { d: "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" }), s("path", { d: "M3 3v5h5" })], -1), c(" 重置 ", -1)]]), s("div", Ae, [s("button", {
 						class: "params-btn cancel",
-						onClick: d[2] ||= (e) => r.$emit("close")
+						onClick: d[2] ||= (e) => u.$emit("close")
 					}, "取消"), s("button", {
 						class: "params-btn confirm",
-						onClick: x
+						onClick: y
 					}, [...d[9] ||= [s("svg", {
 						viewBox: "0 0 24 24",
 						fill: "none",
@@ -232,14 +234,7 @@ var le = {
 			_: 1
 		})], 8, ["to"]));
 	}
-}), [["__scopeId", "data-v-b82e9094"]]), Ae = Symbol("fullscreen-teleport-target");
-function je() {
-	let e = p(Ae, null);
-	return r(() => e?.value ?? "body");
-}
-//#endregion
-//#region src/components/IndicatorSelector.vue?vue&type=script&setup=true&lang.ts
-var Me = { class: "indicator-selector" }, Ne = { class: "indicator-scroll-container" }, Pe = { class: "indicator-list" }, Fe = {
+}), [["__scopeId", "data-v-ea905f9b"]]), Me = { class: "indicator-selector" }, Ne = { class: "indicator-scroll-container" }, Pe = { class: "indicator-list" }, Fe = {
 	key: 0,
 	class: "indicator-divider",
 	"aria-hidden": "true"
@@ -269,10 +264,10 @@ var Me = { class: "indicator-selector" }, Ne = { class: "indicator-scroll-contai
 	width: "16",
 	height: "16",
 	fill: "currentColor"
-}, Ze = { class: "modal-body" }, Qe = { class: "search-box" }, $e = ["value"], X = {
+}, Ze = { class: "modal-body" }, Qe = { class: "search-box" }, X = ["value"], Z = {
 	key: 0,
 	class: "indicator-section"
-}, Z = { class: "section-header" }, et = { class: "section-count" }, tt = ["onClick"], nt = { class: "card-label" }, rt = { class: "card-tooltip" }, it = { class: "card-header" }, at = { class: "card-label" }, ot = { class: "card-header-actions" }, st = ["onClick"], ct = { class: "card-name" }, lt = {
+}, $e = { class: "section-header" }, et = { class: "section-count" }, tt = ["onClick"], nt = { class: "card-label" }, rt = { class: "card-tooltip" }, it = { class: "card-header" }, at = { class: "card-label" }, ot = { class: "card-header-actions" }, st = ["onClick"], ct = { class: "card-name" }, lt = {
 	key: 1,
 	class: "section-divider"
 }, ut = {
@@ -312,23 +307,23 @@ var Me = { class: "indicator-selector" }, Ne = { class: "indicator-scroll-contai
 				}))
 			}));
 		}
-		let h = ee({ catalog: m(R) }), _ = $(h.menuOpen), v = $(h.searchQuery), b = $(h.filteredMain), T = $(h.filteredSub), E = r(() => b.value.length > 0 || T.value.length > 0), k = h.catalog.peek().length, A = C(null), j = C(!1), N = C(null), F = C(null), I = C(null), L = C(null), V = C(!1), te = je(), H = r(() => f.activeIndicators?.length ? f.activeIndicators.map((e) => z(e)).filter((e) => e !== void 0).sort((e, t) => e.pane === t.pane ? 0 : e.pane === "main" ? -1 : 1) : []), ne = r(() => H.value.some((e) => e.pane === "main") ? H.value.find((e) => e.pane === "sub")?.id ?? null : null), U = r(() => N.value ? z(N.value) : null), re = r(() => f.activeIndicators?.length ?? 0);
-		function W(e) {
+		let h = B({ catalog: m(re) }), _ = $(h.menuOpen), v = $(h.searchQuery), y = $(h.filteredMain), S = $(h.filteredSub), T = r(() => y.value.length > 0 || S.value.length > 0), E = h.catalog.peek().length, k = C(null), A = C(!1), j = C(null), N = C(null), F = C(null), I = C(null), L = C(!1), te = J(), R = r(() => f.activeIndicators?.length ? f.activeIndicators.map((e) => ie(e)).filter((e) => e !== void 0).sort((e, t) => e.pane === t.pane ? 0 : e.pane === "main" ? -1 : 1) : []), ne = r(() => R.value.some((e) => e.pane === "main") ? R.value.find((e) => e.pane === "sub")?.id ?? null : null), z = r(() => j.value ? ie(j.value) : null), ae = r(() => f.activeIndicators?.length ?? 0);
+		function H(e) {
 			return f.activeIndicators?.includes(e) ?? !1;
 		}
-		function ie(e) {
-			if (W(e)) return;
-			let t = z(e);
-			t && (t.pane === "main" && R.filter((t) => t.id !== e && W(t.id) && t.pane === "main").forEach((e) => p("toggle", e.id, !1)), p("toggle", e, !0));
+		function oe(e) {
+			if (H(e)) return;
+			let t = ie(e);
+			t && (t.pane === "main" && re.filter((t) => t.id !== e && H(t.id) && t.pane === "main").forEach((e) => p("toggle", e.id, !1)), p("toggle", e, !0));
 		}
-		function ae(e) {
+		function se(e) {
 			p("toggle", e, !1);
 		}
-		function oe(e) {
-			N.value = e, j.value = !0;
+		function ce(e) {
+			j.value = e, A.value = !0;
 		}
-		function G(e) {
-			let t = z(e);
+		function U(e) {
+			let t = ie(e);
 			if (!t?.params) return {};
 			let n = {};
 			for (let e of t.params) n[e.key] = e.default ?? e.min ?? 1;
@@ -336,80 +331,80 @@ var Me = { class: "indicator-selector" }, Ne = { class: "indicator-scroll-contai
 			for (let [e, t] of Object.entries(r)) typeof t == "number" && (i[e] = t);
 			return i;
 		}
-		function se(e) {
-			let t = G(e.id);
+		function le(e) {
+			let t = U(e.id);
 			return e.params ? e.params.map((e) => t[e.key] ?? "").join(",") : "";
 		}
-		function ce(e) {
-			N.value && p("updateParams", N.value, e), j.value = !1;
+		function ue(e) {
+			j.value && p("updateParams", j.value, e), A.value = !1;
 		}
-		function le(e, t) {
-			if (!B(t)) {
+		function de(e, t) {
+			if (!V(t)) {
 				e.preventDefault();
 				return;
 			}
-			L.value = t, I.value = null, e.dataTransfer?.setData("text/plain", t), e.dataTransfer && (e.dataTransfer.effectAllowed = "move");
+			I.value = t, F.value = null, e.dataTransfer?.setData("text/plain", t), e.dataTransfer && (e.dataTransfer.effectAllowed = "move");
 		}
-		function ue(e, t) {
-			!L.value || !B(t) || L.value === t || (I.value = t, e.dataTransfer && (e.dataTransfer.dropEffect = "move"));
+		function W(e, t) {
+			!I.value || !V(t) || I.value === t || (F.value = t, e.dataTransfer && (e.dataTransfer.dropEffect = "move"));
 		}
-		function de(e, t) {
-			let n = L.value || e.dataTransfer?.getData("text/plain") || "";
+		function G(e, t) {
+			let n = I.value || e.dataTransfer?.getData("text/plain") || "";
 			if (!n || n === t) {
 				K();
 				return;
 			}
-			if (!B(n) || !B(t)) {
+			if (!V(n) || !V(t)) {
 				K();
 				return;
 			}
-			let r = H.value.findIndex((e) => e.id === n), i = H.value.findIndex((e) => e.id === t);
+			let r = R.value.findIndex((e) => e.id === n), i = R.value.findIndex((e) => e.id === t);
 			if (r < 0 || i < 0) {
 				K();
 				return;
 			}
-			let a = [...H.value.map((e) => e.id)], [o] = a.splice(r, 1);
+			let a = [...R.value.map((e) => e.id)], [o] = a.splice(r, 1);
 			if (!o) {
 				K();
 				return;
 			}
-			a.splice(i, 0, o), p("reorderSubIndicators", a.filter((e) => B(e))), K();
+			a.splice(i, 0, o), p("reorderSubIndicators", a.filter((e) => V(e))), K();
 		}
 		function K() {
-			I.value = null, L.value = null;
+			F.value = null, I.value = null;
 		}
-		function fe(e) {
+		function q(e) {
 			e.key === "Escape" && h.menuOpen.peek() && h.closeMenu();
 		}
-		return y(() => {
-			document.addEventListener("keydown", fe);
-		}), x(() => {
-			document.removeEventListener("keydown", fe);
-		}), (r, u) => (S(), o("div", Me, [
-			s("div", Ne, [s("div", Pe, [(S(!0), o(e, null, w(H.value, (t) => (S(), o(e, { key: t.id }, [t.id === ne.value ? (S(), o("div", Fe)) : a("", !0), s("div", {
+		return ee(() => {
+			document.addEventListener("keydown", q);
+		}), b(() => {
+			document.removeEventListener("keydown", q);
+		}), (r, u) => (x(), o("div", Me, [
+			s("div", Ne, [s("div", Pe, [(x(!0), o(e, null, w(R.value, (t) => (x(), o(e, { key: t.id }, [t.id === ne.value ? (x(), o("div", Fe)) : a("", !0), s("div", {
 				class: g(["indicator-item", {
-					draggable: O(B)(t.id),
-					"drag-over": I.value === t.id,
-					"is-dragging": L.value === t.id
+					draggable: O(V)(t.id),
+					"drag-over": F.value === t.id,
+					"is-dragging": I.value === t.id
 				}]),
-				draggable: O(B)(t.id),
-				onDragstart: (e) => le(e, t.id),
-				onDragover: P((e) => ue(e, t.id), ["prevent"]),
-				onDrop: P((e) => de(e, t.id), ["prevent"]),
+				draggable: O(V)(t.id),
+				onDragstart: (e) => de(e, t.id),
+				onDragover: P((e) => W(e, t.id), ["prevent"]),
+				onDrop: P((e) => G(e, t.id), ["prevent"]),
 				onDragend: K
 			}, [s("div", {
 				class: "indicator-btn-wrapper",
-				onMouseenter: (e) => F.value = t.id,
-				onMouseleave: u[0] ||= (e) => F.value = null
+				onMouseenter: (e) => N.value = t.id,
+				onMouseleave: u[0] ||= (e) => N.value = null
 			}, [s("button", { class: g(["indicator-btn", {
 				active: !0,
-				hovering: F.value === t.id
-			}]) }, [s("span", Re, [c(D(t.label) + " ", 1), t.params?.length ? (S(), o("span", ze, " (" + D(se(t)) + ") ", 1)) : a("", !0)]), l(n, { name: "fade" }, {
-				default: M(() => [F.value === t.id ? (S(), o("div", Be, [
-					t.params?.length ? (S(), o("button", {
+				hovering: N.value === t.id
+			}]) }, [s("span", Re, [c(D(t.label) + " ", 1), t.params?.length ? (x(), o("span", ze, " (" + D(le(t)) + ") ", 1)) : a("", !0)]), l(n, { name: "fade" }, {
+				default: M(() => [N.value === t.id ? (x(), o("div", Be, [
+					t.params?.length ? (x(), o("button", {
 						key: 0,
 						class: "action-btn settings-btn",
-						onClick: P((e) => oe(t.id), ["stop"]),
+						onClick: P((e) => ce(t.id), ["stop"]),
 						title: "编辑参数"
 					}, [...u[9] ||= [s("svg", {
 						viewBox: "0 0 24 24",
@@ -417,10 +412,10 @@ var Me = { class: "indicator-selector" }, Ne = { class: "indicator-scroll-contai
 						height: "14",
 						fill: "currentColor"
 					}, [s("path", { d: "M19.14 12.94c.04-.31.06-.63.06-.94 0-.31-.02-.63-.06-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.04.31-.06.63-.06.94s.02.63.06.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z" })], -1)]], 8, Ve)) : a("", !0),
-					t.params?.length ? (S(), o("span", He)) : a("", !0),
+					t.params?.length ? (x(), o("span", He)) : a("", !0),
 					s("button", {
 						class: "action-btn remove-btn",
-						onClick: P((e) => ae(t.id), ["stop"]),
+						onClick: P((e) => se(t.id), ["stop"]),
 						title: "移除指标"
 					}, [...u[10] ||= [s("svg", {
 						viewBox: "0 0 24 24",
@@ -432,7 +427,7 @@ var Me = { class: "indicator-selector" }, Ne = { class: "indicator-scroll-contai
 				_: 2
 			}, 1024)], 2)], 40, Le)], 42, Ie)], 64))), 128)), s("div", We, [s("button", {
 				ref_key: "addBtnRef",
-				ref: A,
+				ref: k,
 				class: "add-btn",
 				onClick: u[1] ||= P((e) => O(h).toggleMenu(), ["stop"]),
 				title: "添加指标"
@@ -442,22 +437,22 @@ var Me = { class: "indicator-selector" }, Ne = { class: "indicator-scroll-contai
 				height: "16",
 				fill: "currentColor"
 			}, [s("path", { d: "M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" })], -1)]], 512)])])]),
-			(S(), i(t, { to: O(te) }, [l(n, { name: "overlay" }, {
-				default: M(() => [O(_) ? (S(), o("div", {
+			(x(), i(t, { to: O(te) }, [l(n, { name: "overlay" }, {
+				default: M(() => [O(_) ? (x(), o("div", {
 					key: 0,
 					class: "selector-overlay",
 					onClick: u[7] ||= (e) => O(h).closeMenu()
 				}, [l(n, { name: "modal" }, {
-					default: M(() => [O(_) ? (S(), o("div", {
+					default: M(() => [O(_) ? (x(), o("div", {
 						key: 0,
 						class: "selector-modal",
 						onClick: u[6] ||= P(() => {}, ["stop"])
 					}, [
-						s("div", Ge, [s("div", Ke, [u[12] ||= s("span", { class: "title-text" }, "添加指标", -1), s("span", qe, D(O(k)) + " 个可用指标", 1)]), s("div", Je, [s("button", {
-							class: g(["view-toggle-btn", { active: V.value }]),
-							onClick: u[2] ||= (e) => V.value = !V.value,
+						s("div", Ge, [s("div", Ke, [u[12] ||= s("span", { class: "title-text" }, "添加指标", -1), s("span", qe, D(O(E)) + " 个可用指标", 1)]), s("div", Je, [s("button", {
+							class: g(["view-toggle-btn", { active: L.value }]),
+							onClick: u[2] ||= (e) => L.value = !L.value,
 							title: "简洁模式"
-						}, [V.value ? (S(), o("svg", Xe, [...u[14] ||= [s("path", { d: "M3 3h18v18H3V3zm16 16V5H5v14h14zM7 7h4v4H7V7zm0 6h4v4H7v-4zm6-6h4v4h-4V7zm0 6h4v4h-4v-4z" }, null, -1)]])) : (S(), o("svg", Ye, [...u[13] ||= [s("path", { d: "M4 6h16v2H4zm0 5h16v2H4zm0 5h16v2H4z" }, null, -1)]]))], 2), s("button", {
+						}, [L.value ? (x(), o("svg", Xe, [...u[14] ||= [s("path", { d: "M3 3h18v18H3V3zm16 16V5H5v14h14zM7 7h4v4H7V7zm0 6h4v4H7v-4zm6-6h4v4h-4V7zm0 6h4v4h-4v-4z" }, null, -1)]])) : (x(), o("svg", Ye, [...u[13] ||= [s("path", { d: "M4 6h16v2H4zm0 5h16v2H4zm0 5h16v2H4z" }, null, -1)]]))], 2), s("button", {
 							class: "modal-close",
 							onClick: u[3] ||= (e) => O(h).closeMenu(),
 							title: "关闭"
@@ -480,18 +475,18 @@ var Me = { class: "indicator-selector" }, Ne = { class: "indicator-scroll-contai
 								type: "text",
 								class: "search-input",
 								placeholder: "搜索指标名称..."
-							}, null, 40, $e)]),
-							O(b).length > 0 ? (S(), o("div", X, [s("div", Z, [u[17] ||= s("span", { class: "section-title" }, "主图指标", -1), s("span", et, D(O(b).length), 1)]), s("div", { class: g(["indicator-grid", { compact: V.value }]) }, [(S(!0), o(e, null, w(O(b), (t) => (S(), o("button", {
+							}, null, 40, X)]),
+							O(y).length > 0 ? (x(), o("div", Z, [s("div", $e, [u[17] ||= s("span", { class: "section-title" }, "主图指标", -1), s("span", et, D(O(y).length), 1)]), s("div", { class: g(["indicator-grid", { compact: L.value }]) }, [(x(!0), o(e, null, w(O(y), (t) => (x(), o("button", {
 								key: t.id,
 								class: g(["indicator-card", {
-									active: W(t.id),
-									compact: V.value
+									active: H(t.id),
+									compact: L.value
 								}]),
-								onClick: (e) => W(t.id) ? ae(t.id) : ie(t.id)
-							}, [V.value ? (S(), o(e, { key: 0 }, [s("span", nt, D(t.label), 1), s("span", rt, D(t.name), 1)], 64)) : (S(), o(e, { key: 1 }, [s("div", it, [s("span", at, D(t.label), 1), s("div", ot, [t.params?.length ? (S(), o("button", {
+								onClick: (e) => H(t.id) ? se(t.id) : oe(t.id)
+							}, [L.value ? (x(), o(e, { key: 0 }, [s("span", nt, D(t.label), 1), s("span", rt, D(t.name), 1)], 64)) : (x(), o(e, { key: 1 }, [s("div", it, [s("span", at, D(t.label), 1), s("div", ot, [t.params?.length ? (x(), o("button", {
 								key: 0,
 								class: "card-settings-btn",
-								onClick: P((e) => oe(t.id), ["stop"]),
+								onClick: P((e) => ce(t.id), ["stop"]),
 								title: "编辑参数"
 							}, [...u[18] ||= [s("svg", {
 								viewBox: "0 0 24 24",
@@ -499,8 +494,8 @@ var Me = { class: "indicator-selector" }, Ne = { class: "indicator-scroll-contai
 								height: "14",
 								fill: "currentColor"
 							}, [s("path", { d: "M19.14 12.94c.04-.31.06-.63.06-.94 0-.31-.02-.63-.06-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.04.31-.06.63-.06.94s.02.63.06.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z" })], -1)]], 8, st)) : a("", !0)])]), s("div", ct, D(t.name), 1)], 64))], 10, tt))), 128))], 2)])) : a("", !0),
-							O(b).length > 0 && O(T).length > 0 ? (S(), o("div", lt)) : a("", !0),
-							!E.value && O(v).trim() ? (S(), o("div", ut, [...u[19] ||= [
+							O(y).length > 0 && O(S).length > 0 ? (x(), o("div", lt)) : a("", !0),
+							!T.value && O(v).trim() ? (x(), o("div", ut, [...u[19] ||= [
 								s("svg", {
 									viewBox: "0 0 24 24",
 									width: "48",
@@ -510,17 +505,17 @@ var Me = { class: "indicator-selector" }, Ne = { class: "indicator-scroll-contai
 								s("p", null, "未找到匹配的指标", -1),
 								s("span", { class: "no-results-hint" }, "请尝试其他关键词", -1)
 							]])) : a("", !0),
-							O(T).length > 0 ? (S(), o("div", dt, [s("div", ft, [u[20] ||= s("span", { class: "section-title" }, "副图指标", -1), s("span", pt, D(O(T).length), 1)]), s("div", { class: g(["indicator-grid", { compact: V.value }]) }, [(S(!0), o(e, null, w(O(T), (t) => (S(), o("button", {
+							O(S).length > 0 ? (x(), o("div", dt, [s("div", ft, [u[20] ||= s("span", { class: "section-title" }, "副图指标", -1), s("span", pt, D(O(S).length), 1)]), s("div", { class: g(["indicator-grid", { compact: L.value }]) }, [(x(!0), o(e, null, w(O(S), (t) => (x(), o("button", {
 								key: t.id,
 								class: g(["indicator-card", {
-									active: W(t.id),
-									compact: V.value
+									active: H(t.id),
+									compact: L.value
 								}]),
-								onClick: (e) => W(t.id) ? ae(t.id) : ie(t.id)
-							}, [V.value ? (S(), o(e, { key: 0 }, [s("span", ht, D(t.label), 1), s("span", gt, D(t.name), 1)], 64)) : (S(), o(e, { key: 1 }, [s("div", _t, [s("span", vt, D(t.label), 1), s("div", yt, [t.params?.length ? (S(), o("button", {
+								onClick: (e) => H(t.id) ? se(t.id) : oe(t.id)
+							}, [L.value ? (x(), o(e, { key: 0 }, [s("span", ht, D(t.label), 1), s("span", gt, D(t.name), 1)], 64)) : (x(), o(e, { key: 1 }, [s("div", _t, [s("span", vt, D(t.label), 1), s("div", yt, [t.params?.length ? (x(), o("button", {
 								key: 0,
 								class: "card-settings-btn",
-								onClick: P((e) => oe(t.id), ["stop"]),
+								onClick: P((e) => ce(t.id), ["stop"]),
 								title: "编辑参数"
 							}, [...u[21] ||= [s("svg", {
 								viewBox: "0 0 24 24",
@@ -529,7 +524,7 @@ var Me = { class: "indicator-selector" }, Ne = { class: "indicator-scroll-contai
 								fill: "currentColor"
 							}, [s("path", { d: "M19.14 12.94c.04-.31.06-.63.06-.94 0-.31-.02-.63-.06-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.04.31-.06.63-.06.94s.02.63.06.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z" })], -1)]], 8, bt)) : a("", !0)])]), s("div", xt, D(t.name), 1)], 64))], 10, mt))), 128))], 2)])) : a("", !0)
 						]),
-						s("div", St, [s("div", Ct, [s("span", wt, "已激活 " + D(re.value) + " 个指标", 1)]), s("button", {
+						s("div", St, [s("div", Ct, [s("span", wt, "已激活 " + D(ae.value) + " 个指标", 1)]), s("button", {
 							class: "btn btn-confirm",
 							onClick: u[5] ||= (e) => O(h).closeMenu()
 						}, "确认")])
@@ -538,16 +533,16 @@ var Me = { class: "indicator-selector" }, Ne = { class: "indicator-scroll-contai
 				})])) : a("", !0)]),
 				_: 1
 			})], 8, ["to"])),
-			U.value ? (S(), i(ke, {
+			z.value ? (x(), i(je, {
 				key: 0,
-				visible: j.value,
-				"indicator-id": U.value.id,
-				"indicator-name": U.value.name,
-				"indicator-description": U.value.description,
-				params: U.value.params || [],
-				values: G(U.value.id),
-				onClose: u[8] ||= (e) => j.value = !1,
-				onConfirm: ce
+				visible: A.value,
+				"indicator-id": z.value.id,
+				"indicator-name": z.value.name,
+				"indicator-description": z.value.description,
+				params: z.value.params || [],
+				values: U(z.value.id),
+				onClose: u[8] ||= (e) => A.value = !1,
+				onConfirm: ue
 			}, null, 8, [
 				"visible",
 				"indicator-id",
@@ -558,7 +553,7 @@ var Me = { class: "indicator-selector" }, Ne = { class: "indicator-scroll-contai
 			])) : a("", !0)
 		]));
 	}
-}), [["__scopeId", "data-v-6eb58214"]]), Et = { class: "kline-tooltip__title" }, Dt = { key: 0 }, Ot = { class: "kline-tooltip__grid" }, kt = { class: "row" }, At = { class: "row" }, jt = { class: "row" }, Mt = { class: "row" }, Nt = {
+}), [["__scopeId", "data-v-7a4dfe73"]]), Et = { class: "kline-tooltip__title" }, Dt = { key: 0 }, Ot = { class: "kline-tooltip__grid" }, kt = { class: "row" }, At = { class: "row" }, jt = { class: "row" }, Mt = { class: "row" }, Nt = {
 	key: 0,
 	class: "row"
 }, Pt = {
@@ -623,7 +618,7 @@ var Me = { class: "indicator-selector" }, Ne = { class: "indicator-scroll-contai
 			let n = e.changePercent ?? (e.close - e.open) / e.open * 100;
 			return n > 0 ? zt : n < 0 ? Bt : Vt;
 		});
-		return (t, r) => e.k ? (S(), o("div", {
+		return (t, r) => e.k ? (x(), o("div", {
 			key: 0,
 			ref: c,
 			class: g(["kline-tooltip", [{ "use-anchor": n.value }, i.value]]),
@@ -631,20 +626,20 @@ var Me = { class: "indicator-selector" }, Ne = { class: "indicator-scroll-contai
 				left: `${e.pos.x}px`,
 				top: `${e.pos.y}px`
 			})
-		}, [s("div", Et, [e.k.stockCode ? (S(), o("span", Dt, D(e.k.stockCode), 1)) : a("", !0), s("span", null, D(l(e.k.timestamp)), 1)]), s("div", Ot, [
+		}, [s("div", Et, [e.k.stockCode ? (x(), o("span", Dt, D(e.k.stockCode), 1)) : a("", !0), s("span", null, D(l(e.k.timestamp)), 1)]), s("div", Ot, [
 			s("div", kt, [r[0] ||= s("span", null, "开", -1), s("span", { style: _({ color: p.value }) }, D(e.k.open.toFixed(2)), 5)]),
 			s("div", At, [r[1] ||= s("span", null, "高", -1), s("span", null, D(e.k.high.toFixed(2)), 1)]),
 			s("div", jt, [r[2] ||= s("span", null, "低", -1), s("span", null, D(e.k.low.toFixed(2)), 1)]),
 			s("div", Mt, [r[3] ||= s("span", null, "收", -1), s("span", { style: _({ color: m.value }) }, D(e.k.close.toFixed(2)), 5)]),
-			typeof e.k.volume == "number" ? (S(), o("div", Nt, [r[4] ||= s("span", null, "成交量", -1), s("span", null, D(u(e.k.volume)), 1)])) : a("", !0),
-			typeof e.k.turnover == "number" ? (S(), o("div", Pt, [r[5] ||= s("span", null, "成交额", -1), s("span", null, D(u(e.k.turnover)), 1)])) : a("", !0),
-			typeof e.k.amplitude == "number" ? (S(), o("div", Ft, [r[6] ||= s("span", null, "振幅", -1), s("span", null, D(e.k.amplitude) + "%", 1)])) : a("", !0),
-			typeof e.k.changePercent == "number" ? (S(), o("div", It, [r[7] ||= s("span", null, "涨跌幅", -1), s("span", { style: _({ color: h.value }) }, D(d(e.k.changePercent, "%")), 5)])) : a("", !0),
-			typeof e.k.changeAmount == "number" ? (S(), o("div", Lt, [r[8] ||= s("span", null, "涨跌额", -1), s("span", { style: _({ color: h.value }) }, D(d(e.k.changeAmount, "")), 5)])) : a("", !0),
-			typeof e.k.turnoverRate == "number" ? (S(), o("div", Rt, [r[9] ||= s("span", null, "换手率", -1), s("span", null, D(e.k.turnoverRate.toFixed(2)) + "%", 1)])) : a("", !0)
+			typeof e.k.volume == "number" ? (x(), o("div", Nt, [r[4] ||= s("span", null, "成交量", -1), s("span", null, D(u(e.k.volume)), 1)])) : a("", !0),
+			typeof e.k.turnover == "number" ? (x(), o("div", Pt, [r[5] ||= s("span", null, "成交额", -1), s("span", null, D(u(e.k.turnover)), 1)])) : a("", !0),
+			typeof e.k.amplitude == "number" ? (x(), o("div", Ft, [r[6] ||= s("span", null, "振幅", -1), s("span", null, D(e.k.amplitude) + "%", 1)])) : a("", !0),
+			typeof e.k.changePercent == "number" ? (x(), o("div", It, [r[7] ||= s("span", null, "涨跌幅", -1), s("span", { style: _({ color: h.value }) }, D(d(e.k.changePercent, "%")), 5)])) : a("", !0),
+			typeof e.k.changeAmount == "number" ? (x(), o("div", Lt, [r[8] ||= s("span", null, "涨跌额", -1), s("span", { style: _({ color: h.value }) }, D(d(e.k.changeAmount, "")), 5)])) : a("", !0),
+			typeof e.k.turnoverRate == "number" ? (x(), o("div", Rt, [r[9] ||= s("span", null, "换手率", -1), s("span", null, D(e.k.turnoverRate.toFixed(2)) + "%", 1)])) : a("", !0)
 		])], 6)) : a("", !0);
 	}
-}), [["__scopeId", "data-v-93207d24"]]), Ut = { class: "marker-tooltip__title" }, Wt = {
+}), [["__scopeId", "data-v-61c103af"]]), Ut = { class: "marker-tooltip__title" }, Wt = {
 	key: 0,
 	class: "marker-tooltip__content"
 }, Gt = /* @__PURE__ */ q(/* @__PURE__ */ u({
@@ -688,7 +683,7 @@ var Me = { class: "indicator-selector" }, Ne = { class: "indicator-scroll-contai
 		function h(e) {
 			return typeof e == "number" ? e.toFixed(2) : String(e);
 		}
-		return (n, r) => t.marker ? (S(), o("div", {
+		return (n, r) => t.marker ? (x(), o("div", {
 			key: 0,
 			ref: u,
 			class: g(["marker-tooltip", [{ "use-anchor": c.value }, l.value]]),
@@ -696,18 +691,18 @@ var Me = { class: "indicator-selector" }, Ne = { class: "indicator-scroll-contai
 				left: `${t.pos.x + 12}px`,
 				top: `${t.pos.y + 12}px`
 			})
-		}, [s("div", Ut, D(f.value), 1), m.value ? (S(), o("div", Wt, [(S(!0), o(e, null, w(p.value, (e, t) => (S(), o("div", {
+		}, [s("div", Ut, D(f.value), 1), m.value ? (x(), o("div", Wt, [(x(!0), o(e, null, w(p.value, (e, t) => (x(), o("div", {
 			key: t,
 			class: "row"
 		}, [s("span", null, D(t), 1), s("span", null, D(h(e)), 1)]))), 128))])) : a("", !0)], 6)) : a("", !0);
 	}
-}), [["__scopeId", "data-v-f56bc484"]]), Kt = {
+}), [["__scopeId", "data-v-dc844eda"]]), Kt = {
 	viewBox: "0 0 24 24",
 	width: "1.2em",
 	height: "1.2em"
 };
 function qt(e, t) {
-	return S(), o("svg", Kt, [...t[0] ||= [s("path", {
+	return x(), o("svg", Kt, [...t[0] ||= [s("path", {
 		fill: "none",
 		stroke: "currentColor",
 		"stroke-linecap": "round",
@@ -725,7 +720,7 @@ var Jt = m({
 	height: "1.2em"
 };
 function Xt(e, t) {
-	return S(), o("svg", Yt, [...t[0] ||= [s("path", {
+	return x(), o("svg", Yt, [...t[0] ||= [s("path", {
 		fill: "none",
 		stroke: "currentColor",
 		"stroke-linecap": "round",
@@ -743,7 +738,7 @@ var Zt = m({
 	height: "1.2em"
 };
 function $t(e, t) {
-	return S(), o("svg", Qt, [...t[0] ||= [s("path", {
+	return x(), o("svg", Qt, [...t[0] ||= [s("path", {
 		fill: "none",
 		stroke: "currentColor",
 		"stroke-linecap": "round",
@@ -761,7 +756,7 @@ var en = m({
 	height: "1.2em"
 };
 function nn(e, t) {
-	return S(), o("svg", tn, [...t[0] ||= [s("path", {
+	return x(), o("svg", tn, [...t[0] ||= [s("path", {
 		fill: "none",
 		stroke: "currentColor",
 		"stroke-linecap": "round",
@@ -779,7 +774,7 @@ var rn = m({
 	height: "1.2em"
 };
 function on(e, t) {
-	return S(), o("svg", an, [...t[0] ||= [s("path", {
+	return x(), o("svg", an, [...t[0] ||= [s("path", {
 		fill: "none",
 		stroke: "currentColor",
 		"stroke-linecap": "round",
@@ -797,7 +792,7 @@ var sn = m({
 	height: "1.2em"
 };
 function ln(e, t) {
-	return S(), o("svg", cn, [...t[0] ||= [s("path", {
+	return x(), o("svg", cn, [...t[0] ||= [s("path", {
 		fill: "none",
 		stroke: "currentColor",
 		"stroke-linecap": "round",
@@ -815,7 +810,7 @@ var un = m({
 	height: "1.2em"
 };
 function fn(e, t) {
-	return S(), o("svg", dn, [...t[0] ||= [s("path", {
+	return x(), o("svg", dn, [...t[0] ||= [s("path", {
 		fill: "none",
 		stroke: "currentColor",
 		"stroke-linecap": "round",
@@ -833,7 +828,7 @@ var pn = m({
 	height: "1.2em"
 };
 function hn(e, t) {
-	return S(), o("svg", mn, [...t[0] ||= [s("g", {
+	return x(), o("svg", mn, [...t[0] ||= [s("g", {
 		fill: "none",
 		stroke: "currentColor",
 		"stroke-linecap": "round",
@@ -850,7 +845,7 @@ var gn = m({
 	height: "1.2em"
 };
 function vn(e, t) {
-	return S(), o("svg", _n, [...t[0] ||= [s("path", {
+	return x(), o("svg", _n, [...t[0] ||= [s("path", {
 		fill: "none",
 		stroke: "currentColor",
 		"stroke-linecap": "round",
@@ -868,7 +863,7 @@ var yn = m({
 	height: "1.2em"
 };
 function xn(e, t) {
-	return S(), o("svg", bn, [...t[0] ||= [s("path", {
+	return x(), o("svg", bn, [...t[0] ||= [s("path", {
 		fill: "none",
 		stroke: "currentColor",
 		"stroke-linecap": "round",
@@ -886,7 +881,7 @@ var Sn = m({
 	height: "1.2em"
 };
 function wn(e, t) {
-	return S(), o("svg", Cn, [...t[0] ||= [s("path", {
+	return x(), o("svg", Cn, [...t[0] ||= [s("path", {
 		fill: "none",
 		stroke: "currentColor",
 		"stroke-linecap": "round",
@@ -904,7 +899,7 @@ var Tn = m({
 	height: "1.2em"
 };
 function Dn(e, t) {
-	return S(), o("svg", En, [...t[0] ||= [s("path", {
+	return x(), o("svg", En, [...t[0] ||= [s("path", {
 		fill: "none",
 		stroke: "currentColor",
 		"stroke-linecap": "round",
@@ -922,7 +917,7 @@ var On = m({
 	height: "1.2em"
 };
 function An(e, t) {
-	return S(), o("svg", kn, [...t[0] ||= [s("g", {
+	return x(), o("svg", kn, [...t[0] ||= [s("g", {
 		fill: "none",
 		stroke: "currentColor",
 		"stroke-linecap": "round",
@@ -939,7 +934,7 @@ var jn = m({
 	height: "1.2em"
 };
 function Nn(e, t) {
-	return S(), o("svg", Mn, [...t[0] ||= [s("path", {
+	return x(), o("svg", Mn, [...t[0] ||= [s("path", {
 		fill: "none",
 		stroke: "currentColor",
 		"stroke-linecap": "round",
@@ -957,7 +952,7 @@ var Pn = m({
 	height: "1.2em"
 };
 function In(e, t) {
-	return S(), o("svg", Fn, [...t[0] ||= [s("path", {
+	return x(), o("svg", Fn, [...t[0] ||= [s("path", {
 		fill: "none",
 		stroke: "currentColor",
 		"stroke-linecap": "round",
@@ -975,7 +970,7 @@ var Ln = m({
 	height: "1.2em"
 };
 function zn(e, t) {
-	return S(), o("svg", Rn, [...t[0] ||= [s("path", {
+	return x(), o("svg", Rn, [...t[0] ||= [s("path", {
 		fill: "none",
 		stroke: "currentColor",
 		"stroke-linecap": "round",
@@ -993,7 +988,7 @@ var Bn = m({
 	height: "1.2em"
 };
 function Hn(e, t) {
-	return S(), o("svg", Vn, [...t[0] ||= [s("path", {
+	return x(), o("svg", Vn, [...t[0] ||= [s("path", {
 		fill: "none",
 		stroke: "currentColor",
 		"stroke-linecap": "round",
@@ -1216,110 +1211,110 @@ var rr = {
 					}
 				]
 			}
-		], m = f, h = C("cursor"), _ = C(null), v = C(!1), b = je(), E = r(() => G.filter((e) => e.group === "main")), j = r(() => G.filter((e) => e.group === "experimental"));
-		function F() {
+		], m = f, h = C("cursor"), _ = C(null), v = C(!1), y = J(), S = r(() => U.filter((e) => e.group === "main")), E = r(() => U.filter((e) => e.group === "experimental"));
+		function j() {
 			try {
-				let e = localStorage.getItem(se);
+				let e = localStorage.getItem(le);
 				if (e) {
 					let t = JSON.parse(e), n = {};
-					return G.forEach((e) => {
+					return U.forEach((e) => {
 						n[e.key] = t[e.key] ?? e.default;
 					}), n;
 				}
 			} catch {}
 			let e = {};
-			return G.forEach((t) => {
+			return U.forEach((t) => {
 				e[t.key] = t.default;
 			}), e;
 		}
-		function I(e) {
+		function F(e) {
 			try {
-				localStorage.setItem(se, JSON.stringify(e));
+				localStorage.setItem(le, JSON.stringify(e));
 			} catch {}
 		}
-		let L = C(F()), R = C({ ...L.value });
-		function z(e) {
+		let I = C(j()), L = C({ ...I.value });
+		function te(e) {
 			return h.value === e.id ? !0 : e.children ? e.children.some((e) => e.id === h.value) : !1;
 		}
-		function B(e) {
+		function R(e) {
 			if (e.children?.length) {
 				if (!e.children.some((e) => e.id === h.value)) {
 					let t = e.children[0];
 					h.value = t.id, m("selectTool", t.id);
 				}
-				V(e.id);
+				re(e.id);
 				return;
 			}
 			h.value = e.id, m("selectTool", e.id), _.value = null;
 		}
-		function ee(e) {
+		function ne(e) {
 			h.value = e.id, m("selectTool", e.id), _.value = null;
 		}
-		function V(e) {
+		function re(e) {
 			_.value = _.value === e ? null : e;
 		}
-		function te() {
-			R.value = { ...L.value }, v.value = !0;
+		function z() {
+			L.value = { ...I.value }, v.value = !0;
 		}
-		function H() {
+		function B() {
 			v.value = !1;
 		}
-		function ne() {
+		function ie() {
 			let e = {};
-			G.forEach((t) => {
+			U.forEach((t) => {
 				e[t.key] = t.default;
-			}), R.value = e;
+			}), L.value = e;
 		}
-		function U() {
-			L.value = { ...R.value }, I(L.value), Qn(!!L.value.enableCanvasProfiler), m("settingsChange", { ...L.value }), H();
+		function ae() {
+			I.value = { ...L.value }, F(I.value), Qn(!!I.value.enableCanvasProfiler), m("settingsChange", { ...I.value }), B();
 		}
-		function re() {
-			return { ...L.value };
+		function V() {
+			return { ...I.value };
 		}
-		d({ getSettings: re });
-		function W(e) {
+		d({ getSettings: V });
+		function H(e) {
 			e.target.closest(".tool-item") || (_.value = null);
 		}
-		return y(() => {
-			document.addEventListener("click", W, !0), m("settingsChange", { ...L.value }), Qn(!!L.value.enableCanvasProfiler);
-		}), x(() => {
-			document.removeEventListener("click", W, !0);
-		}), (r, d) => (S(), o(e, null, [s("nav", rr, [
-			s("div", ir, [(S(), o(e, null, w(p, (t) => s("div", {
+		return ee(() => {
+			document.addEventListener("click", H, !0), m("settingsChange", { ...I.value }), Qn(!!I.value.enableCanvasProfiler);
+		}), b(() => {
+			document.removeEventListener("click", H, !0);
+		}), (r, d) => (x(), o(e, null, [s("nav", rr, [
+			s("div", ir, [(x(), o(e, null, w(p, (t) => s("div", {
 				key: t.id,
 				class: "tool-item"
 			}, [s("button", {
 				type: "button",
-				class: g(["left-toolbar__button", { active: z(t) }]),
+				class: g(["left-toolbar__button", { active: te(t) }]),
 				title: t.title,
 				"aria-label": t.title,
-				onClick: (e) => B(t),
+				onClick: (e) => R(t),
 				onPointerdown: d[0] ||= P(() => {}, ["stop"]),
 				onPointermove: d[1] ||= P(() => {}, ["stop"]),
 				onPointerup: d[2] ||= P(() => {}, ["stop"])
-			}, [(S(), i(T(t.icon), {
+			}, [(x(), i(T(t.icon), {
 				class: "tool-icon",
 				"aria-hidden": "true"
-			})), t.children && t.children.length ? (S(), o("span", {
+			})), t.children && t.children.length ? (x(), o("span", {
 				key: 0,
 				class: g(["corner-indicator", { open: _.value === t.id }]),
-				onClick: P((e) => V(t.id), ["stop"]),
+				onClick: P((e) => re(t.id), ["stop"]),
 				"aria-label": "展开子菜单"
 			}, null, 10, or)) : a("", !0)], 42, ar), l(n, { name: "dropdown" }, {
-				default: M(() => [_.value === t.id && t.children && t.children.length ? (S(), o("div", {
+				default: M(() => [_.value === t.id && t.children && t.children.length ? (x(), o("div", {
 					key: 0,
 					class: "tool-dropdown",
 					onPointerdown: d[3] ||= P(() => {}, ["stop"]),
 					onPointermove: d[4] ||= P(() => {}, ["stop"]),
 					onPointerup: d[5] ||= P(() => {}, ["stop"])
-				}, [(S(!0), o(e, null, w(t.children, (e) => (S(), o("button", {
+				}, [(x(!0), o(e, null, w(t.children, (e) => (x(), o("button", {
 					key: e.id,
 					type: "button",
 					class: g(["left-toolbar__button", { active: h.value === e.id }]),
 					title: e.title,
 					"aria-label": e.title,
-					onClick: (t) => ee(e)
-				}, [(S(), i(T(e.icon), {
+					onClick: (t) => ne(e)
+				}, [(x(), i(T(e.icon), {
 					class: "tool-icon",
 					"aria-hidden": "true"
 				}))], 10, sr))), 128))], 32)) : a("", !0)]),
@@ -1361,11 +1356,11 @@ var rr = {
 				onPointerdown: d[15] ||= P(() => {}, ["stop"]),
 				onPointermove: d[16] ||= P(() => {}, ["stop"]),
 				onPointerup: d[17] ||= P(() => {}, ["stop"])
-			}, [u.isFullscreen ? (S(), i(O(On), {
+			}, [u.isFullscreen ? (x(), i(O(On), {
 				key: 0,
 				class: "tool-icon",
 				"aria-hidden": "true"
-			})) : (S(), i(O(Tn), {
+			})) : (x(), i(O(Tn), {
 				key: 1,
 				class: "tool-icon",
 				"aria-hidden": "true"
@@ -1376,7 +1371,7 @@ var rr = {
 				class: "left-toolbar__button",
 				title: "设置",
 				"aria-label": "设置",
-				onClick: te,
+				onClick: z,
 				onPointerdown: d[18] ||= P(() => {}, ["stop"]),
 				onPointermove: d[19] ||= P(() => {}, ["stop"]),
 				onPointerup: d[20] ||= P(() => {}, ["stop"])
@@ -1384,11 +1379,11 @@ var rr = {
 				class: "tool-icon",
 				"aria-hidden": "true"
 			})], 32)])
-		]), (S(), i(t, { to: O(b) }, [l(n, { name: "overlay" }, {
-			default: M(() => [v.value ? (S(), o("div", {
+		]), (x(), i(t, { to: O(y) }, [l(n, { name: "overlay" }, {
+			default: M(() => [v.value ? (x(), o("div", {
 				key: 0,
 				class: "settings-overlay",
-				onClick: H
+				onClick: B
 			}, [l(n, { name: "modal" }, {
 				default: M(() => [s("div", {
 					class: "settings-modal",
@@ -1396,47 +1391,47 @@ var rr = {
 				}, [
 					s("div", { class: "settings-header" }, [d[26] ||= s("div", { class: "header-left" }, [s("span", { class: "settings-title" }, "图表设置"), s("span", { class: "settings-subtitle" }, "个性化配置")], -1), s("div", { class: "header-right" }, [s("button", {
 						class: "settings-close",
-						onClick: H
+						onClick: B
 					}, [...d[25] ||= [s("svg", {
 						viewBox: "0 0 24 24",
 						fill: "none",
 						stroke: "currentColor",
 						"stroke-width": "2"
 					}, [s("path", { d: "M18 6L6 18M6 6l12 12" })], -1)]])])]),
-					s("div", fr, [E.value.length > 0 ? (S(), o(e, { key: 0 }, [d[27] ||= s("div", { class: "settings-section-divider" }, [s("span", { class: "settings-section-label" }, "主图设置")], -1), (S(!0), o(e, null, w(E.value, (t) => (S(), o("div", {
+					s("div", fr, [S.value.length > 0 ? (x(), o(e, { key: 0 }, [d[27] ||= s("div", { class: "settings-section-divider" }, [s("span", { class: "settings-section-label" }, "主图设置")], -1), (x(!0), o(e, null, w(S.value, (t) => (x(), o("div", {
 						key: t.key,
 						class: "settings-item"
-					}, [s("label", pr, [s("span", null, D(t.label), 1), t.type === "boolean" ? N((S(), o("input", {
+					}, [s("label", pr, [s("span", null, D(t.label), 1), t.type === "boolean" ? N((x(), o("input", {
 						key: 0,
 						type: "checkbox",
 						class: "settings-checkbox",
-						"onUpdate:modelValue": (e) => R.value[t.key] = e
-					}, null, 8, mr)), [[k, R.value[t.key]]]) : t.type === "select" && t.options ? N((S(), o("select", {
+						"onUpdate:modelValue": (e) => L.value[t.key] = e
+					}, null, 8, mr)), [[k, L.value[t.key]]]) : t.type === "select" && t.options ? N((x(), o("select", {
 						key: 1,
 						class: "settings-select",
-						"onUpdate:modelValue": (e) => R.value[t.key] = e
-					}, [(S(!0), o(e, null, w(t.options, (e) => (S(), o("option", {
+						"onUpdate:modelValue": (e) => L.value[t.key] = e
+					}, [(x(!0), o(e, null, w(t.options, (e) => (x(), o("option", {
 						key: e.value,
 						value: e.value
-					}, D(e.label), 9, gr))), 128))], 8, hr)), [[A, R.value[t.key]]]) : a("", !0)])]))), 128))], 64)) : a("", !0), j.value.length > 0 ? (S(), o(e, { key: 1 }, [d[28] ||= s("div", { class: "settings-section-divider" }, [s("span", { class: "settings-section-label" }, "实验性 / 调试设置")], -1), (S(!0), o(e, null, w(j.value, (t) => (S(), o("div", {
+					}, D(e.label), 9, gr))), 128))], 8, hr)), [[A, L.value[t.key]]]) : a("", !0)])]))), 128))], 64)) : a("", !0), E.value.length > 0 ? (x(), o(e, { key: 1 }, [d[28] ||= s("div", { class: "settings-section-divider" }, [s("span", { class: "settings-section-label" }, "实验性 / 调试设置")], -1), (x(!0), o(e, null, w(E.value, (t) => (x(), o("div", {
 						key: t.key,
 						class: "settings-item experimental"
-					}, [s("label", _r, [s("span", null, D(t.label), 1), t.type === "boolean" ? N((S(), o("input", {
+					}, [s("label", _r, [s("span", null, D(t.label), 1), t.type === "boolean" ? N((x(), o("input", {
 						key: 0,
 						type: "checkbox",
 						class: "settings-checkbox",
-						"onUpdate:modelValue": (e) => R.value[t.key] = e
-					}, null, 8, vr)), [[k, R.value[t.key]]]) : t.type === "select" && t.options ? N((S(), o("select", {
+						"onUpdate:modelValue": (e) => L.value[t.key] = e
+					}, null, 8, vr)), [[k, L.value[t.key]]]) : t.type === "select" && t.options ? N((x(), o("select", {
 						key: 1,
 						class: "settings-select",
-						"onUpdate:modelValue": (e) => R.value[t.key] = e
-					}, [(S(!0), o(e, null, w(t.options, (e) => (S(), o("option", {
+						"onUpdate:modelValue": (e) => L.value[t.key] = e
+					}, [(x(!0), o(e, null, w(t.options, (e) => (x(), o("option", {
 						key: e.value,
 						value: e.value
-					}, D(e.label), 9, br))), 128))], 8, yr)), [[A, R.value[t.key]]]) : a("", !0)])]))), 128))], 64)) : a("", !0)]),
+					}, D(e.label), 9, br))), 128))], 8, yr)), [[A, L.value[t.key]]]) : a("", !0)])]))), 128))], 64)) : a("", !0)]),
 					s("div", { class: "settings-footer" }, [s("button", {
 						class: "settings-btn reset",
-						onClick: ne
+						onClick: ie
 					}, [...d[29] ||= [s("svg", {
 						viewBox: "0 0 24 24",
 						fill: "none",
@@ -1444,10 +1439,10 @@ var rr = {
 						"stroke-width": "2"
 					}, [s("path", { d: "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" }), s("path", { d: "M3 3v5h5" })], -1), c(" 重置 ", -1)]]), s("div", { class: "footer-right" }, [s("button", {
 						class: "settings-btn cancel",
-						onClick: H
+						onClick: B
 					}, "取消"), s("button", {
 						class: "settings-btn confirm",
-						onClick: U
+						onClick: ae
 					}, [...d[30] ||= [s("svg", {
 						viewBox: "0 0 24 24",
 						fill: "none",
@@ -1463,7 +1458,13 @@ var rr = {
 }), [["__scopeId", "data-v-3e3ffb4f"]]), Sr = ["data-theme"], Cr = {
 	class: "pane-separator-layer",
 	"aria-hidden": "true"
-}, wr = 4, Tr = /* @__PURE__ */ q(/* @__PURE__ */ u({
+}, wr = {
+	class: "canvas-layer",
+	ref: "canvasLayerRef"
+}, Tr = {
+	class: "x-axis-canvas",
+	ref: "xAxisCanvasRef"
+}, Er = 4, Dr = /* @__PURE__ */ q(/* @__PURE__ */ u({
 	__name: "KLineChart",
 	props: {
 		semanticConfig: {},
@@ -1483,36 +1484,24 @@ var rr = {
 	},
 	emits: ["zoomLevelChange", "toggleFullscreen"],
 	setup(n, { expose: c, emit: u }) {
-		let d = n, f = C(null), p = C(null), m = C(null), v = C(null), b = C(null), T = C(null), D = C(null), k = E(null), A = E(null), M = ne({
-			initialZoomLevel: d.initialZoomLevel ?? 1,
-			minKWidth: d.minKWidth,
-			maxKWidth: d.maxKWidth,
-			zoomLevels: d.zoomLevels,
-			rightAxisWidth: d.rightAxisWidth,
-			priceLabelWidth: d.priceLabelWidth
-		}), N = C("light");
-		M.actions.setZoomState(M.state.zoomLevel, re(M.state.zoomLevel, {
-			minKWidth: d.minKWidth,
-			maxKWidth: d.maxKWidth,
-			zoomLevelCount: d.zoomLevels,
-			dpr: M.state.viewportDpr
-		}), U(re(M.state.zoomLevel, {
+		let d = n, f = C(null), p = C(null), m = C(null), v = C(null), y = C(null);
+		me(m);
+		let S = E(null), T = E(null), D = C(0), O = C(0), k = C(1), A = C(d.initialZoomLevel ?? 1), M = C(0), N = C(1), P = C(0), F = C({}), I = C(null), L = C([]), re = A.value;
+		M.value = oe(re, {
 			minKWidth: d.minKWidth,
 			maxKWidth: d.maxKWidth,
 			zoomLevelCount: d.zoomLevels,
-			dpr: M.state.viewportDpr
-		}), M.state.viewportDpr)), r(() => M.state.dataLength), r(() => M.state.viewportDpr);
-		let P = r(() => M.state.zoomLevel), F = r(() => M.state.kWidth), I = r(() => M.state.kGap), L = r(() => M.state.paneRatios), R = r(() => M.state.selectedDrawingId), z = r(() => M.state.dataVersion);
-		function B() {
-			k.value?.scheduleDraw();
-		}
-		function ee(e) {
-			if (k.value?.updateSettings(e), e.performanceTest10kKlines) {
-				let e = G();
-				console.time("updateData-10k"), k.value?.updateData(e), console.timeEnd("updateData-10k"), M.actions.setDataLength(e.length), M.actions.bumpDataVersion();
-			} else A.value && k.value?.getData()?.length === 1e4 && A.value.applyConfig(d.semanticConfig);
+			dpr: k.value
+		}), N.value = H(M.value, k.value);
+		let B = C("light");
+		function ie() {}
+		function V(e) {
+			if (S.value?.updateSettingsFacade(e), e.performanceTest10kKlines) {
+				let e = U();
+				console.time("updateData-10k"), S.value?.updateData(e), console.timeEnd("updateData-10k"), D.value = e.length, O.value++;
+			} else T.value && S.value?.getData()?.length === 1e4 && T.value.applyConfig(d.semanticConfig);
 		}
-		function G() {
+		function U() {
 			let e = [], t = (/* @__PURE__ */ new Date("2020-01-01")).getTime(), n = 3e3;
 			for (let r = 0; r < 1e4; r++) {
 				let i = t + r * 864e5, a = (Math.random() - .5) * 2 * .02 + 1e-4, o = n, s = o * (1 + a), c = Math.max(o, s) * (1 + Math.random() * .01), l = Math.min(o, s) * (1 - Math.random() * .01), u = Math.floor(1e6 + Math.random() * 5e6);
@@ -1527,34 +1516,34 @@ var rr = {
 			}
 			return e;
 		}
-		function se(e, t, n) {
+		function le(e, t, n) {
 			let r = e.getBoundingClientRect();
 			return {
 				width: Math.max(t, Math.round(r.width)),
 				height: Math.max(n, Math.round(r.height))
 			};
 		}
-		function le(e) {
+		function ue(e) {
 			e && h(() => {
 				if (!e.isConnected) return;
-				let t = se(e, 180, 80);
-				k.value?.interaction.setTooltipSize(t);
+				let t = le(e, 180, 80);
+				S.value?.setTooltipSize(t);
 			});
 		}
-		function ue(e) {
+		function de(e) {
 			e && h(() => {
-				e.isConnected && (_e.value = se(e, 120, 60));
+				e.isConnected && (_e.value = le(e, 120, 60));
 			});
 		}
-		let de = C({
+		let W = C({
 			x: 0,
 			y: 0
-		}), K = C(!1), fe = null;
+		}), G = C(!1), K = null;
 		function q() {
-			fe = null;
+			K = null;
 		}
-		function me(e) {
-			return fe ||= e.getBoundingClientRect(), fe;
+		function pe(e) {
+			return K ||= e.getBoundingClientRect(), K;
 		}
 		let J = E({
 			crosshairPos: null,
@@ -1575,13 +1564,13 @@ var rr = {
 			hoveredPaneBoundaryId: null,
 			isHoveringRightAxis: !1
 		}), Y = E(null), he = r(() => {
-			let e = R.value;
-			return e ? M.state.drawings.find((t) => t.id === e) ?? null : null;
+			let e = I.value;
+			return e ? L.value.find((t) => t.id === e) ?? null : null;
 		}), ge = C([]), _e = C({
 			width: 220,
 			height: 120
 		}), ve = r(() => {
-			let e = v.value, t = b.value;
+			let e = f.value, t = p.value;
 			return !e || !t ? {
 				x: 0,
 				y: 0
@@ -1589,81 +1578,83 @@ var rr = {
 				x: e.offsetLeft,
 				y: e.offsetTop
 			};
-		}), ye = r(() => J.value.hoveredMarkerData), be = r(() => J.value.hoveredCustomMarker), xe = r(() => J.value.isDragging), Se = r(() => J.value.isResizingPaneBoundary), Ce = r(() => J.value.isHoveringPaneBoundary), we = r(() => J.value.hoveredPaneBoundaryId), Te = r(() => J.value.isHoveringRightAxis), Ee = r(() => J.value.hoveredIndex), De = r(() => J.value.crosshairIndex), Oe = r(() => xe.value ? "grabbing" : Se.value || Ce.value ? "ns-resize" : Ee.value === null ? "crosshair" : "pointer"), ke = r(() => {
+		}), ye = r(() => J.value.hoveredMarkerData), be = r(() => J.value.hoveredCustomMarker), xe = r(() => J.value.isDragging), Se = r(() => J.value.isResizingPaneBoundary), Ce = r(() => J.value.isHoveringPaneBoundary), we = r(() => J.value.hoveredPaneBoundaryId), Te = r(() => J.value.isHoveringRightAxis), Ee = r(() => J.value.hoveredIndex);
+		r(() => J.value.crosshairIndex);
+		let De = r(() => xe.value ? "grabbing" : Se.value || Ce.value ? "ns-resize" : Ee.value === null ? "crosshair" : "pointer"), Oe = r(() => {
 			let e = J.value.hoveredIndex;
 			if (typeof e != "number") return null;
-			z.value;
-			let t = k.value?.getData();
+			O.value;
+			let t = S.value?.getData();
 			return t && e >= 0 && e < t.length ? t[e] : null;
-		}), Ae = r(() => J.value.hoveredIndex), je = r(() => J.value.tooltipPos), Me = r(() => ({
-			x: je.value.x + ve.value.x,
-			y: je.value.y + ve.value.y
+		}), ke = r(() => J.value.hoveredIndex), Ae = r(() => J.value.tooltipPos), je = r(() => ({
+			x: Ae.value.x + ve.value.x,
+			y: Ae.value.y + ve.value.y
+		})), Me = r(() => ({
+			left: `${je.value.x}px`,
+			top: `${je.value.y}px`
 		})), Ne = r(() => ({
-			left: `${Me.value.x}px`,
-			top: `${Me.value.y}px`
+			x: W.value.x + ve.value.x,
+			y: W.value.y + ve.value.y
 		})), Pe = r(() => ({
-			x: de.value.x + ve.value.x,
-			y: de.value.y + ve.value.y
-		})), Fe = r(() => ({
-			left: `${Pe.value.x}px`,
-			top: `${Pe.value.y}px`
-		})), Ie = r(() => J.value.tooltipAnchorPlacement), Le = r(() => {
-			let e = k.value?.getViewport(), t = v.value, n = e?.plotWidth ?? (t ? t.clientWidth : 0);
-			return de.value.x + 12 + _e.value.width + 12 > n ? "left-bottom" : "right-bottom";
-		}), Re = r(() => (z.value, k.value?.getData() ?? []));
-		function ze(e) {
+			left: `${Ne.value.x}px`,
+			top: `${Ne.value.y}px`
+		})), Fe = r(() => J.value.tooltipAnchorPlacement), Ie = r(() => {
+			let e = S.value?.viewport.peek(), t = f.value, n = e?.plotWidth ?? (t ? t.clientWidth : 0);
+			return W.value.x + 12 + _e.value.width + 12 > n ? "left-bottom" : "right-bottom";
+		}), Le = r(() => (O.value, S.value?.getData() ?? []));
+		function Re(e) {
 			Y.value?.setTool(e);
 		}
-		function Be(e) {
+		function ze(e) {
 			let t = he.value;
-			!t || !Y.value || (Y.value.updateDrawingStyle(t.id, e), M.actions.bumpDrawingVersion());
+			!t || !Y.value || Y.value.updateDrawingStyle(t.id, e);
 		}
-		function Ve() {
+		function Be() {
 			let e = he.value;
-			!e || !Y.value || (Y.value.removeDrawing(e.id), M.actions.setSelectedDrawingId(null), M.actions.bumpDrawingVersion(), M.actions.setDrawings(Y.value.getDrawings()));
+			!e || !Y.value || (Y.value.removeDrawing(e.id), I.value = null, L.value = Y.value.getDrawings());
 		}
-		function He(e) {
-			k.value?.handlePointerEvent(e, { onPointerDown: (e, t) => Y.value?.onPointerDown(e, t) ? (M.actions.setDrawings(Y.value.getDrawings()), M.actions.bumpDrawingVersion(), !0) : !1 });
+		function Ve(e) {
+			S.value?.handlePointerEvent(e, { onPointerDown: (e, t) => Y.value?.onPointerDown(e, t) ? (L.value = Y.value.getDrawings(), !0) : !1 });
 		}
-		function Ue(e) {
-			let t = v.value;
+		function He(e) {
+			let t = f.value;
 			if (t) {
-				let n = me(t);
-				de.value = {
+				let n = pe(t);
+				W.value = {
 					x: e.clientX - n.left,
 					y: e.clientY - n.top
 				};
 			}
-			k.value?.handlePointerEvent(e, { onPointerMove: (e, t) => Y.value?.onPointerMove(e, t) ? (M.actions.setDrawings(Y.value.getDrawings()), !0) : !1 });
+			S.value?.handlePointerEvent(e, { onPointerMove: (e, t) => Y.value?.onPointerMove(e, t) ? (L.value = Y.value.getDrawings(), !0) : !1 });
+		}
+		function Ue(e) {
+			S.value?.handlePointerEvent(e, { onPointerUp: (e, t) => Y.value?.onPointerUp(e, t) ? (L.value = Y.value.getDrawings(), !0) : !1 });
 		}
 		function We(e) {
-			k.value?.handlePointerEvent(e, { onPointerUp: (e, t) => Y.value?.onPointerUp(e, t) ? (M.actions.setDrawings(Y.value.getDrawings()), !0) : !1 });
+			S.value?.handlePointerEvent(e);
 		}
 		function Ge(e) {
-			k.value?.handlePointerEvent(e);
+			S.value?.handlePointerEvent(e);
 		}
 		function Ke(e) {
-			k.value?.handlePointerEvent(e);
+			S.value?.handlePointerEvent(e);
 		}
 		function qe(e) {
-			k.value?.handlePointerEvent(e);
+			S.value?.handlePointerEvent(e);
 		}
 		function Je(e) {
-			k.value?.handlePointerEvent(e);
+			S.value?.handlePointerEvent(e);
 		}
-		function Ye(e) {
-			k.value?.handlePointerEvent(e);
+		function Ye() {
+			S.value?.handleScrollEvent();
 		}
-		function Xe() {
-			k.value?.handleScrollEvent();
-		}
-		let Ze = C([]), Qe = r(() => {
+		let Xe = C([]), Ze = r(() => {
 			let e = [], t = /* @__PURE__ */ new Set();
 			for (let n of Z.value) t.has(n.indicatorId) || (t.add(n.indicatorId), e.push(n.indicatorId));
 			return e;
-		}), $e = r(() => [...Ze.value, ...Qe.value]), X = C({}), Z = C([]);
-		function et() {
-			let e = L.value.main ?? 3;
+		}), Qe = r(() => [...Xe.value, ...Ze.value]), X = C({}), Z = C([]);
+		function $e() {
+			let e = F.value.main ?? 3;
 			return Z.value.length === 0 ? [{
 				id: "main",
 				ratio: e,
@@ -1676,78 +1667,49 @@ var rr = {
 				role: "price"
 			}, ...Z.value.map((e) => ({
 				id: e.id,
-				ratio: L.value[e.id] ?? 1,
+				ratio: F.value[e.id] ?? 1,
 				visible: !0,
 				role: "indicator"
 			}))];
 		}
-		function tt(e) {
-			return { ...ae[e].defaultParams };
-		}
-		let nt = /* @__PURE__ */ new Map(), rt = /* @__PURE__ */ new Map();
-		function it(e, t) {
-			let n = oe({
-				paneId: e,
-				title: t,
-				getTitleInfo: () => pt(e)
-			});
-			k.value?.useRenderer(n), rt.set(e, n.name);
+		function et(e) {
+			return { ...ne[e].defaultParams };
 		}
-		function at(e) {
-			let t = rt.get(e);
-			t && (k.value?.removeRenderer(t), rt.delete(e));
+		let tt = /* @__PURE__ */ new Map();
+		function nt(e = "VOLUME", t) {
+			if (Z.value.length >= Er) return !1;
+			let n = t ?? et(e);
+			return !!S.value?.addIndicator(e, "sub", n);
 		}
-		function ot(e = "VOLUME", t) {
-			if (Z.value.length >= wr) return !1;
-			let n = t ?? tt(e), r = k.value?.addIndicator(e, "sub", n);
-			return r ? (it(r, e), !0) : !1;
+		function rt(e) {
+			S.value?.removeIndicator(e);
 		}
-		function st(e) {
-			at(e), k.value?.removeIndicator(e);
+		function it() {
+			for (let e of Z.value) S.value?.removeIndicator(e.id);
+			tt.clear();
 		}
-		function ct() {
-			for (let e of Z.value) k.value?.removeIndicator(e.id), at(e.id);
-			nt.clear(), rt.clear();
-		}
-		function lt() {
-			let e = d.semanticConfig, t = k.value;
+		function at() {
+			let e = d.semanticConfig, t = S.value;
 			if (!t) return;
 			let n = e.indicators?.main;
-			if (n) for (let e of n) e.enabled && t.enableMainIndicator(e.type, e.params);
+			if (n) for (let e of n) e.enabled && t.addIndicator(e.type, "main", e.params);
 		}
-		function ut() {
-			let e = k.value?.getSubPaneEntries() ?? [];
-			rt.clear();
+		function ot() {
+			let e = S.value?.subPanes.peek() ?? [];
 			for (let t of e) {
 				let { paneId: e, indicatorId: n, params: r } = t, i = e.match(/^(.+)_(\d+)$/);
 				if (i) {
 					let [, e, t] = i, n = parseInt(t, 10);
-					n >= (nt.get(e) ?? 0) && nt.set(e, n + 1);
+					n >= (tt.get(e) ?? 0) && tt.set(e, n + 1);
 				}
-				it(e, n);
 			}
 		}
-		function dt(e, t) {
-			let n = tt(t);
-			at(e), k.value?.replaceSubPaneIndicator(e, t, n), it(e, t);
-		}
-		let ft = /* @__PURE__ */ new Map();
-		function pt(e) {
-			let t = Z.value.find((t) => t.id === e);
-			if (!t) return null;
-			let n = k.value?.getData();
-			if (!n || n.length === 0) return null;
-			let r = De.value, i = n.length, a = ft.get(e);
-			if (a && a.idx === r && a.dataLen === i) return a.result;
-			let o = ae[t.indicatorId], s = t.params, c = k.value?.plugin, l = c ? o.getTitleInfo(n, r, s, c, e) : null;
-			return ft.set(e, {
-				idx: r,
-				dataLen: i,
-				result: l
-			}), l;
+		function st(e, t) {
+			let n = et(t);
+			S.value?.replaceSubPaneIndicator(e, t, n);
 		}
-		function mt(e, t) {
-			let n = k.value;
+		function ct(e, t) {
+			let n = S.value;
 			if (n) {
 				if ([
 					"MA",
@@ -1769,42 +1731,33 @@ var rr = {
 					"STRUCTURE",
 					"ZONES"
 				].includes(e)) {
-					let r = Ze.value.find((t) => t === e);
-					if (t && !r) n.addIndicator(e, "main", X.value[e]);
-					else if (!t && r) {
-						let t = e.toUpperCase();
-						n.removeIndicator(t);
-					}
+					let r = Xe.value.find((t) => t === e);
+					t && !r ? n.addIndicator(e, "main", X.value[e]) : !t && r && n.removeIndicator(e.toUpperCase());
 					return;
 				}
-				if (ie.includes(e)) if (t) {
-					if (Z.value.find((t) => t.indicatorId === e) || Z.value.length >= wr) return;
-					let t = n.addIndicator(e, "sub", X.value[e]);
-					if (t) it(t, e);
-					else if (Z.value.length > 0) {
+				if (R.includes(e)) if (t) {
+					if (Z.value.find((t) => t.indicatorId === e) || Z.value.length >= Er) return;
+					if (!n.addIndicator(e, "sub", X.value[e]) && Z.value.length > 0) {
 						let t = Z.value[Z.value.length - 1];
-						dt(t.id, e);
+						st(t.id, e);
 					}
 				} else Z.value.filter((t) => t.indicatorId === e).forEach((e) => {
-					n.removeIndicator(e.id), at(e.id);
+					n.removeIndicator(e.id);
 				});
 			}
 		}
-		function ht(e, t) {
+		function lt(e, t) {
 			if (e === "MA" || e === "BOLL" || e === "EXPMA" || e === "ENE") {
-				k.value?.updateMainIndicatorParams(e, t);
-				return;
-			}
-			if (ie.includes(e)) {
-				Z.value.filter((t) => t.indicatorId === e).forEach((e) => {
-					k.value?.updateSubPaneParams(e.id, t);
-				});
+				S.value?.updateIndicatorParams(e, t);
 				return;
 			}
+			R.includes(e) && Z.value.filter((t) => t.indicatorId === e).forEach((e) => {
+				S.value?.updateIndicatorParams(e.id, t);
+			});
 		}
-		function gt(e) {
+		function ut(e) {
 			if (!e.length || Z.value.length <= 1) return;
-			let t = e.filter((e) => ie.includes(e));
+			let t = e.filter((e) => R.includes(e));
 			if (!t.length) return;
 			let n = new Map(Z.value.map((e) => [e.indicatorId, e])), r = [];
 			for (let e of t) {
@@ -1816,101 +1769,86 @@ var rr = {
 			let i = Z.value.map((e) => e.id), a = r.map((e) => e.id);
 			if (i.join("|") === a.join("|")) return;
 			Z.value = r;
-			let o = k.value;
-			o && o.updatePaneLayout(et());
+			let o = S.value;
+			o && o.updatePaneLayout($e());
 		}
-		let _t = r(() => d.rightAxisWidth + d.priceLabelWidth), vt = M.computed.totalWidth;
-		function yt() {
-			let e = v.value, t = k.value;
+		let dt = r(() => d.rightAxisWidth + d.priceLabelWidth), ft = r(() => S.value?.getContentWidth() ?? 0);
+		function pt() {
+			let e = f.value, t = S.value;
 			if (!e || !t) return;
 			let n = t.getData()?.length ?? 0;
 			if (n === 0) return;
-			let r = t.getCurrentDpr(), { unitPx: i, startXPx: a } = W(F.value, I.value, r), o = (a + n * i) / r, s = Math.max(0, e.scrollWidth - e.clientWidth), c = Math.min(s, Math.max(0, o - e.clientWidth));
-			e.scrollLeft = Math.round(c * r) / r, B();
+			let r = t.viewport.peek().dpr, { unitPx: i, startXPx: a } = ae(M.value, N.value, r), o = (a + n * i) / r, s = Math.max(0, e.scrollWidth - e.clientWidth), c = Math.min(s, Math.max(0, o - e.clientWidth));
+			e.scrollLeft = Math.round(c * r) / r;
 		}
-		function bt(e, t) {
-			let n = k.value;
-			n && n.zoomToLevel(e, t);
+		function mt(e, t) {
+			S.value?.zoomToLevel(e, t);
 		}
 		c({
-			scheduleRender: B,
-			scrollToRight: yt,
-			addSubPane: ot,
-			removeSubPane: st,
-			switchSubIndicator: dt,
-			clearAllSubPanes: ct,
-			get plugin() {
-				return k.value?.plugin;
-			},
-			zoomToLevel: bt,
-			zoomIn: (e) => bt(P.value + 1, e),
-			zoomOut: (e) => bt(P.value - 1, e),
-			getZoomLevel: () => P.value,
-			getZoomLevelCount: () => k.value?.getZoomLevelCount() ?? 10
+			scheduleRender: ie,
+			scrollToRight: pt,
+			addSubPane: nt,
+			removeSubPane: rt,
+			switchSubIndicator: st,
+			clearAllSubPanes: it,
+			zoomToLevel: mt,
+			zoomIn: (e) => mt(A.value + 1, e),
+			zoomOut: (e) => mt(A.value - 1, e),
+			getZoomLevel: () => A.value,
+			getZoomLevelCount: () => S.value?.getZoomLevelCount() ?? 10
 		});
-		function xt(e) {
-			let t = (e) => {
-				e.preventDefault();
-				let t = k.value;
-				t && t.handleWheelEvent(e);
+		function ht() {
+			return (e) => {
+				e.preventDefault(), S.value?.handleWheelEvent(e);
 			};
-			return e.addEventListener("wheel", t, { passive: !1 }), t;
 		}
-		function St(e, t, n, r) {
-			return new H({
+		function gt(e, t, n, r) {
+			return z({
 				container: e,
+				data: [],
 				canvasLayer: t,
 				rightAxisLayer: n,
-				xAxisCanvas: r
-			}, {
+				xAxisCanvas: r,
+				initialZoomLevel: d.initialZoomLevel,
+				zoomLevels: d.zoomLevels,
 				yPaddingPx: d.yPaddingPx,
 				rightAxisWidth: d.rightAxisWidth,
 				bottomAxisHeight: d.bottomAxisHeight,
 				priceLabelWidth: d.priceLabelWidth,
 				minKWidth: d.minKWidth,
-				maxKWidth: d.maxKWidth,
-				panes: [{
-					id: "main",
-					ratio: 1
-				}],
-				paneGap: 0,
-				zoomLevels: d.zoomLevels,
-				initialZoomLevel: d.initialZoomLevel
+				maxKWidth: d.maxKWidth
 			});
 		}
-		function Ct(e) {
-			e.setOnPaneLayoutChange(() => {
+		function _t(e) {
+			let t = e.paneLayout.subscribe(() => {
 				q();
-				let t = e.getPaneRenderers(), n = v.value && parseInt(getComputedStyle(v.value).borderTopWidth) || 0;
-				ge.value = t.slice(0, -1).map((e) => {
-					let t = e.getPane();
+				let t = f.value && parseInt(getComputedStyle(f.value).borderTopWidth) || 0;
+				ge.value = e.paneLayout.peek().slice(0, -1).map((n) => {
+					let r = e.getPaneInfo(n.id), i = (r?.top ?? 0) + (r?.height ?? 0);
 					return {
-						id: t.id,
-						top: t.top + t.height + n
+						id: n.id,
+						top: i + t
 					};
 				});
-			});
-			let t = e.paneRatios.subscribe(() => {
-				let t = e.paneRatios.peek();
-				M.actions.setPaneRatios({ ...t });
-			}), n = e.viewport.subscribe(() => {
+			}), n = e.paneRatios.subscribe(() => {
+				F.value = { ...e.paneRatios.peek() };
+			}), r = e.viewport.subscribe(() => {
 				let t = e.viewport.peek();
-				M.state.viewportDpr !== t.dpr && M.actions.setViewportDpr(t.dpr), M.state.viewWidth !== t.plotWidth && M.actions.setViewWidth(t.plotWidth), (M.state.zoomLevel !== t.zoomLevel || M.state.kWidth !== t.kWidth || M.state.kGap !== t.kGap) && M.actions.setZoomState(t.zoomLevel, t.kWidth, t.kGap);
+				k.value !== t.dpr && (k.value = t.dpr), P.value !== t.plotWidth && (P.value = t.plotWidth), (A.value !== t.zoomLevel || M.value !== t.kWidth || N.value !== t.kGap) && (A.value = t.zoomLevel, M.value = t.kWidth, N.value = t.kGap);
 				let n = t.desiredScrollLeft;
-				n !== void 0 && n !== v.value?.scrollLeft && (q(), h(() => {
-					let t = v.value;
-					if (!t) return;
-					let r = Math.max(0, t.scrollWidth - t.clientWidth), i = Math.min(Math.max(0, n), r), a = e.getCurrentDpr();
-					t.scrollLeft = Math.round(i * a) / a;
+				n !== void 0 && n !== f.value?.scrollLeft && (q(), h(() => {
+					let e = f.value;
+					if (!e) return;
+					let r = Math.max(0, e.scrollWidth - e.clientWidth), i = Math.min(Math.max(0, n), r), a = t.dpr;
+					e.scrollLeft = Math.round(i * a) / a;
 				}));
-			}), r = e.data.subscribe(() => {
-				let t = e.data.peek();
-				M.actions.setDataLength(t.length), M.actions.bumpDataVersion();
-			}), i = e.theme.subscribe(() => {
-				N.value = e.theme.peek();
-			}), a = e.indicators.subscribe(() => {
+			}), i = e.data.subscribe(() => {
+				D.value = e.data.peek().length, O.value++;
+			}), a = e.theme.subscribe(() => {
+				B.value = e.theme.peek();
+			}), o = e.indicators.subscribe(() => {
 				let t = e.indicators.peek(), n = t.filter((e) => e.role === "main").map((e) => e.definitionId);
-				Ze.value = n;
+				Xe.value = n;
 				let r = { ...X.value };
 				for (let e of t) e.role === "main" && e.params && Object.keys(e.params).length > 0 && (r[e.definitionId] = { ...e.params });
 				e.updateRendererConfig("mainIndicatorLegend", { indicators: {
@@ -1931,7 +1869,7 @@ var rr = {
 						params: r.ENE || {}
 					}
 				} }), X.value = r;
-			}), o = e.subPanes.subscribe(() => {
+			}), s = e.subPanes.subscribe(() => {
 				let t = e.subPanes.peek(), n = new Set(t.map((e) => e.paneId)), r = Z.value.filter((e) => n.has(e.id)), i = new Set(r.map((e) => e.id));
 				for (let e of t) i.has(e.paneId) || r.push({
 					id: e.paneId,
@@ -1943,71 +1881,65 @@ var rr = {
 				for (let e of t) e.params && Object.keys(e.params).length > 0 && (a[e.indicatorId] = { ...e.params });
 				X.value = a;
 			});
-			x(() => {
-				n(), r(), t(), i(), a(), o();
+			b(() => {
+				r(), i(), n(), t(), a(), o(), s();
 			});
 		}
-		function wt(e) {
-			let t = D.value?.getSettings() ?? { showVolumePriceMarkers: !0 };
-			if (e.updateSettings(t), t.performanceTest10kKlines) {
-				let t = G();
+		function vt(e) {
+			let t = y.value?.getSettings() ?? { showVolumePriceMarkers: !0 };
+			if (e.updateSettingsFacade(t), t.performanceTest10kKlines) {
+				let t = U();
 				console.time("updateData-10k"), e.updateData(t), console.timeEnd("updateData-10k");
 			}
 		}
-		function Et(e) {
-			Y.value = new ce(e), Y.value.setCallbacks({
+		function yt(e) {
+			Y.value = new te(e), Y.value.setCallbacks({
 				onDrawingCreated: (e) => {
-					M.actions.setDrawings([...M.state.drawings, e]), M.actions.setSelectedDrawingId(e.id);
+					L.value = [...L.value, e], I.value = e.id;
 				},
 				onToolChange: () => {},
 				onDrawingSelected: (e) => {
-					M.actions.setSelectedDrawingId(e?.id ?? null);
+					I.value = e?.id ?? null;
 				}
 			});
 		}
-		function Dt(e) {
-			e.interaction.setTooltipAnchorPositioning(K.value), e.interaction.setOnInteractionChange((e) => {
-				J.value = e;
-			}), e.interaction.setOnPinchZoom((t, n) => {
-				if (!e) return;
-				let r = v.value;
-				if (!r) return;
-				let i = n - r.getBoundingClientRect().left;
-				e.handlePinchZoom(t, i);
-			}), J.value = e.interaction.getInteractionSnapshot(), M.actions.setViewportDpr(e.getCurrentDpr()), e.resize();
-		}
-		function Ot(e) {
-			te(d.dataFetcher), A.value = new V(e), A.value.on("config:error", (e) => {
+		function bt(e) {
+			e.setTooltipAnchorPositioning(G.value), e.interactionState.subscribe(() => {
+				J.value = e.interactionState.peek();
+			}), J.value = e.interactionState.peek(), k.value = e.viewport.peek().dpr;
+		}
+		function xt(e) {
+			ce(d.dataFetcher), T.value = new se(e), T.value.on("config:error", (e) => {
 				console.error("Semantic config error:", e);
-			}), A.value.on("config:ready", () => {
-				lt(), ut(), h(() => yt());
-			}), A.value.applyConfig(d.semanticConfig).then((e) => {
+			}), T.value.on("config:ready", () => {
+				at(), ot(), h(() => pt());
+			}), T.value.applyConfig(d.semanticConfig).then((e) => {
 				e && !e.success && console.error("Semantic config apply failed:", e.errors);
 			});
 		}
-		return y(() => {
-			K.value = !1;
-			let e = v.value, t = p.value, n = m.value, r = f.value;
-			if (!e || !t || !n || !r) return;
-			let i = xt(e), a = St(e, t, n, r);
-			k.value = a, Ct(a), a.applyRenderState(M.state.kWidth, M.state.kGap, M.state.zoomLevel), wt(a), Et(a), Dt(a), Ot(a), a.__onWheel = i;
-		}), x(() => {
-			let e = k.value;
-			if (e) {
-				let t = e.__onWheel, n = v.value;
-				t && n && n.removeEventListener("wheel", t), e.destroy();
-			}
-			k.value = null, Y.value = null;
+		return ee(() => {
+			G.value = !1;
+			let e = f.value, t = p.value;
+			if (!e || !t) return;
+			let n = ht();
+			e.addEventListener("wheel", n, { passive: !1 });
+			let r = e.querySelector(".canvas-layer"), i = e.querySelector(".x-axis-canvas"), a = gt(e, r, t.querySelector(".right-axis-host"), i);
+			S.value = a, _t(a), vt(a), yt(a), bt(a), xt(a);
+		}), b(() => {
+			let e = S.value;
+			e && (S.value = null, e.dispose()), Y.value = null;
 		}), j(() => d.yPaddingPx, (e) => {
-			k.value?.updateOptions({ yPaddingPx: e });
+			S.value?.updateOptionsFacade({ yPaddingPx: e });
 		}), j(() => d.semanticConfig, async (e, t) => {
 			if (e && e !== t) {
-				let t = await A.value?.applyConfig(e);
+				let t = await T.value?.applyConfig(e);
 				t && !t.success && console.error("Semantic config apply failed:", t.errors);
 			}
-		}, { deep: !0 }), (r, c) => (S(), o("div", {
+		}, { deep: !0 }), (r, c) => (x(), o("div", {
+			ref_key: "chartWrapperRef",
+			ref: m,
 			class: "chart-wrapper",
-			"data-theme": N.value
+			"data-theme": B.value
 		}, [s("div", { class: g(["chart-stage", {
 			"is-dragging": xe.value,
 			"is-resizing-pane": Se.value,
@@ -2016,78 +1948,70 @@ var rr = {
 			"is-hovering-kline": Ee.value !== null
 		}]) }, [l(xr, {
 			ref_key: "toolbarRef",
-			ref: D,
+			ref: y,
 			"is-fullscreen": n.isFullscreen,
-			onSelectTool: ze,
+			onSelectTool: Re,
 			onToggleFullscreen: c[0] ||= (e) => r.$emit("toggleFullscreen"),
-			onZoomIn: c[1] ||= (e) => bt(P.value + 1),
-			onZoomOut: c[2] ||= (e) => bt(P.value - 1),
-			onSettingsChange: ee
+			onZoomIn: c[1] ||= (e) => mt(A.value + 1),
+			onZoomOut: c[2] ||= (e) => mt(A.value - 1),
+			onSettingsChange: V
 		}, null, 8, ["is-fullscreen"]), s("div", {
 			class: "chart-main",
 			ref_key: "chartMainRef",
-			ref: b
+			ref: p
 		}, [
-			s("div", Cr, [(S(!0), o(e, null, w(ge.value, (e) => (S(), o("div", {
+			s("div", Cr, [(x(!0), o(e, null, w(ge.value, (e) => (x(), o("div", {
 				key: e.id,
 				class: g(["pane-separator-line", { "is-active": we.value === e.id }]),
 				style: _({ top: `${e.top}px` })
 			}, null, 6))), 128))]),
 			s("div", {
 				ref_key: "tooltipLayerRef",
-				ref: T,
+				ref: v,
 				class: "tooltip-layer"
 			}, null, 512),
 			s("div", {
 				class: "chart-container",
-				style: _({ cursor: Oe.value }),
+				style: _({ cursor: De.value }),
 				ref_key: "containerRef",
-				ref: v,
-				onScrollPassive: Xe,
-				onPointerdown: He,
-				onPointermove: Ue,
-				onPointerup: We,
-				onPointerleave: Ge
+				ref: f,
+				onScrollPassive: Ye,
+				onPointerdown: Ve,
+				onPointermove: He,
+				onPointerup: Ue,
+				onPointerleave: We
 			}, [s("div", {
 				class: "scroll-content",
-				style: _({ width: O(vt) + "px" })
-			}, [s("div", {
-				class: "canvas-layer",
-				ref_key: "canvasLayerRef",
-				ref: p
-			}, [s("canvas", {
-				class: "x-axis-canvas",
-				ref_key: "xAxisCanvasRef",
-				ref: f
-			}, null, 512), he.value ? (S(), i(pe, {
+				style: _({ width: ft.value + "px" })
+			}, [s("div", wr, [s("canvas", Tr, null, 512), he.value ? (x(), i(fe, {
 				key: 0,
 				drawing: he.value,
-				onUpdateStyle: Be,
-				onDelete: Ve
+				onUpdateStyle: ze,
+				onDelete: Be
 			}, null, 8, ["drawing"])) : a("", !0)], 512)], 4)], 36),
-			T.value ? (S(), i(t, {
+			v.value ? (x(), i(t, {
 				key: 0,
-				to: T.value
+				to: v.value
 			}, [
-				ke.value ? (S(), o("div", {
+				Oe.value ? (x(), o("div", {
 					key: 0,
-					class: g(["tooltip-anchor kline-tooltip-anchor", { "use-anchor": K.value }]),
-					style: _(Ne.value)
+					class: g(["tooltip-anchor kline-tooltip-anchor", { "use-anchor": G.value }]),
+					style: _(Me.value)
 				}, null, 6)) : a("", !0),
-				ye.value || be.value ? (S(), o("div", {
+				ye.value || be.value ? (x(), o("div", {
 					key: 1,
-					class: g(["tooltip-anchor marker-tooltip-anchor", { "use-anchor": K.value }]),
-					style: _(Fe.value)
+					class: g(["tooltip-anchor marker-tooltip-anchor", { "use-anchor": G.value }]),
+					style: _(Pe.value)
 				}, null, 6)) : a("", !0),
-				ke.value ? (S(), i(Ht, {
+				Oe.value ? (x(), i(Ht, {
 					key: 2,
-					k: ke.value,
-					index: Ae.value,
-					data: Re.value,
-					pos: Me.value,
-					"set-el": le,
-					"use-anchor": K.value,
-					"anchor-placement": Ie.value
+					k: Oe.value,
+					index: ke.value,
+					data: Le.value,
+					pos: je.value,
+					"set-el": ue,
+					"use-anchor": G.value,
+					"anchor-placement": Fe.value
 				}, null, 8, [
 					"k",
 					"index",
@@ -2096,13 +2020,13 @@ var rr = {
 					"use-anchor",
 					"anchor-placement"
 				])) : a("", !0),
-				ye.value || be.value ? (S(), i(Gt, {
+				ye.value || be.value ? (x(), i(Gt, {
 					key: 3,
 					marker: ye.value || be.value,
-					pos: Pe.value,
-					"use-anchor": K.value,
-					"anchor-placement": Le.value,
-					"set-el": ue
+					pos: Ne.value,
+					"use-anchor": G.value,
+					"anchor-placement": Ie.value,
+					"set-el": de
 				}, null, 8, [
 					"marker",
 					"pos",
@@ -2112,25 +2036,24 @@ var rr = {
 			], 8, ["to"])) : a("", !0),
 			s("div", {
 				class: "right-axis-host",
-				ref_key: "rightAxisLayerRef",
-				ref: m,
-				style: _({ width: _t.value + "px" }),
-				onPointerdown: Ke,
-				onPointermove: qe,
-				onPointerup: Je,
-				onPointerleave: Ye
+				ref: "rightAxisLayerRef",
+				style: _({ width: dt.value + "px" }),
+				onPointerdown: Ge,
+				onPointermove: Ke,
+				onPointerup: qe,
+				onPointerleave: Je
 			}, null, 36)
 		], 512)], 2), l(Tt, {
-			"active-indicators": $e.value,
+			"active-indicators": Qe.value,
 			"indicator-params": X.value,
-			onToggle: mt,
-			onUpdateParams: ht,
-			onReorderSubIndicators: gt
+			onToggle: ct,
+			onUpdateParams: lt,
+			onReorderSubIndicators: ut
 		}, null, 8, ["active-indicators", "indicator-params"])], 8, Sr));
 	}
-}), [["__scopeId", "data-v-b0cae9be"]]), Er = {
+}), [["__scopeId", "data-v-4ea7c1af"]]), Or = {
 	name: "@363045841yyt/klinechart",
-	version: "0.7.5",
+	version: "0.7.6",
 	description: "Vue 3 bindings for @363045841yyt/klinechart-core. Idiomatic composables, SFC components.",
 	license: "MIT",
 	repository: {
@@ -2156,13 +2079,15 @@ var rr = {
 				default: "./dist/index.cjs"
 			}
 		},
+		"./web-component": { import: { default: "./dist/kline-chart.js" } },
 		"./style.css": "./dist/klinechart.css"
 	},
 	files: ["dist", "src"],
 	publishConfig: { access: "public" },
 	scripts: {
 		dev: "vite --config preview/vite.config.ts",
-		build: "vite build && node -e \"require('fs').copyFileSync('dist/index.d.ts','dist/index.d.cts')\"",
+		build: "vite build",
+		"build:wc": "cross-env BUILD_TARGET=web-component vite build",
 		postbuild: "node -e \"require('fs').copyFileSync('dist/index.d.ts','dist/index.d.cts')\"",
 		test: "vitest run",
 		"test:watch": "vitest",
@@ -2187,6 +2112,7 @@ var rr = {
 		"@size-limit/preset-small-lib": "^12.1.0",
 		"@vitejs/plugin-vue": "^6.0.0",
 		"@vue/test-utils": "^2.4.10",
+		"cross-env": "^7.0.3",
 		jsdom: "^29.1.1",
 		publint: "^0.3.0",
 		"size-limit": "^12.1.0",
@@ -2194,28 +2120,29 @@ var rr = {
 		"unplugin-icons": "^23.0.1",
 		vite: "^8.0.14",
 		"vite-plugin-babel": "^1.3.2",
+		"vite-plugin-css-injected-by-js": "^5.0.1",
 		"vite-plugin-dts": "^5.0.1",
 		vitest: "^4.1.5",
 		vue: "^3.5.0"
 	}
-}.version, Dr = null;
-function Or(e) {
-	Dr = e;
+}.version, kr = null;
+function Ar(e) {
+	kr = e;
 }
-function kr(e) {
+function jr(e) {
 	if (e.container == null) throw Error("[@363045841yyt/klinechart] createChart: `container` is required and must be a non-null HTMLElement");
-	if (Dr === null) throw Error("[@363045841yyt/klinechart] createChart: no ChartController factory registered. Call __setControllerFactory(...) before mounting (the core package wires this in production).");
-	return Dr(e);
+	if (kr === null) throw Error("[@363045841yyt/klinechart] createChart: no ChartController factory registered. Call __setControllerFactory(...) before mounting (the core package wires this in production).");
+	return kr(e);
 }
 function $(e) {
 	let t = E(e.peek());
-	return b(e.subscribe(() => {
+	return y(e.subscribe(() => {
 		t.value = e.peek();
 	})), t;
 }
-function Ar(e, t) {
+function Mr(e, t) {
 	let n = E(null), r = (e) => {
-		e == null || n.value != null || (n.value = kr({
+		e == null || n.value != null || (n.value = jr({
 			...t,
 			container: e
 		}));
@@ -2231,11 +2158,11 @@ function Ar(e, t) {
 		let e = n.value;
 		e != null && (e.dispose(), n.value = null);
 	};
-	return b(a), v(a), { chart: n };
+	return y(a), v(a), { chart: n };
 }
-function jr(e) {
+function Nr(e) {
 	let t = E(e.indicators.peek());
-	return b(e.indicators.subscribe(() => {
+	return y(e.indicators.subscribe(() => {
 		t.value = e.indicators.peek();
 	})), {
 		indicators: t,
@@ -2244,27 +2171,27 @@ function jr(e) {
 		updateParams: e.updateIndicatorParams.bind(e)
 	};
 }
-function Mr(e) {
+function Pr(e) {
 	let t = E(e.interactionState.peek());
-	return b(e.interactionState.subscribe(() => {
+	return y(e.interactionState.subscribe(() => {
 		t.value = e.interactionState.peek();
 	})), t;
 }
-function Nr(e) {
+function Fr(e) {
 	let t = E(e.paneRatios.peek());
-	return b(e.paneRatios.subscribe(() => {
+	return y(e.paneRatios.subscribe(() => {
 		t.value = e.paneRatios.peek();
 	})), t;
 }
-function Pr(e) {
+function Ir(e) {
 	let t = E(e.viewport.peek());
-	return b(e.viewport.subscribe(() => {
+	return y(e.viewport.subscribe(() => {
 		t.value = e.viewport.peek();
 	})), t;
 }
-function Fr(e) {
+function Lr(e) {
 	let t = L({ catalog: e.catalog });
-	b(() => t.dispose());
+	y(() => t.dispose());
 	let n = $(t.filteredMain), r = $(t.filteredSub), i = $(t.menuOpen), a = $(t.searchQuery);
 	function o(t) {
 		let n = e.catalog.find((e) => e.id === t);
@@ -2291,7 +2218,7 @@ function Fr(e) {
 		isActive: c
 	};
 }
-var Ir = u({
+var Rr = u({
 	name: "KLineChart",
 	props: {
 		data: {
@@ -2321,10 +2248,10 @@ var Ir = u({
 	},
 	setup(e, { emit: t, expose: n }) {
 		let r = E(null), i = d(), a = E(null);
-		y(() => {
+		ee(() => {
 			let n = r.value;
 			n != null && (i.run(() => {
-				if (a.value = kr({
+				if (a.value = jr({
 					container: n,
 					data: e.data,
 					initialZoomLevel: e.initialZoomLevel,
@@ -2336,14 +2263,14 @@ var Ir = u({
 						let n = e.viewport.peek();
 						t("zoomLevelChange", n.zoomLevel, n.kWidth);
 					};
-					n(), b(e.viewport.subscribe(n));
+					n(), y(e.viewport.subscribe(n));
 				}
 			}), j(() => e.data, (e) => {
 				a.value?.setData(e);
 			}), j(() => e.theme, (e) => {
 				a.value?.setTheme(e);
 			}));
-		}), x(() => {
+		}), b(() => {
 			a.value?.dispose(), a.value = null, i.stop();
 		}), n({
 			getController: () => a.value,
@@ -2370,9 +2297,9 @@ var Ir = u({
 			}
 		});
 	}
-}), Lr = { install(e) {
-	e.component("KLineChart", Ir);
+}), zr = { install(e) {
+	e.component("KLineChart", Rr);
 } };
-Or(I);
+Ar(I);
 //#endregion
-export { F as CORE_VERSION, pe as DrawingStyleToolbar, ke as IndicatorParams, Tt as IndicatorSelector, Ir as KLineChart, Tr as KLineChartVue, Ht as KLineTooltip, Lr as KMapPlugin, xr as LeftToolbar, Gt as MarkerTooltip, Er as VERSION, Or as __setControllerFactory, $ as coreSignalToVueRef, kr as createChart, Ar as useChart, Fr as useIndicatorSelector, jr as useIndicators, Mr as useInteractionState, Nr as usePaneRatios, Pr as useViewport };
+export { F as CORE_VERSION, fe as DrawingStyleToolbar, je as IndicatorParams, Tt as IndicatorSelector, Rr as KLineChart, Dr as KLineChartVue, Ht as KLineTooltip, zr as KMapPlugin, xr as LeftToolbar, Gt as MarkerTooltip, Or as VERSION, Ar as __setControllerFactory, $ as coreSignalToVueRef, jr as createChart, Mr as useChart, Lr as useIndicatorSelector, Nr as useIndicators, Pr as useInteractionState, Fr as usePaneRatios, Ir as useViewport };