@funnest/charts-ui 0.6.1 → 0.6.3

package/dist/components/layout-menu.d.ts

@@ -1,11 +1,6 @@
-import type { MultiControls, WidgetContext } from '../context';
+/** @jsxImportSource preact */
 import { type LayoutId } from '../layouts';
 /** Mini drawing of a split layout. */
 export declare function LayoutGlyph({ id }: {
     id: LayoutId;
 }): import("preact").JSX.Element;
-/** Toolbar buttons of the multi-chart widget: split layout picker and pane sync toggles. */
-export declare function LayoutMenu({ ctx, multi }: {
-    ctx: WidgetContext;
-    multi: MultiControls;
-}): import("preact").JSX.Element;

package/dist/components/tools-menu.d.ts

@@ -0,0 +1,10 @@
+import type { JSX } from 'preact';
+import type { WidgetContext } from '../context';
+/**
+ * One "도구" button for the chart's less frequent tools, so the toolbar keeps symbol, interval,
+ * market info and 지표 in view: chart type, split layout (+ sync), compare, replay, price axis,
+ * screenshot and chart settings.
+ */
+export declare function ToolsMenu({ ctx }: {
+    ctx: WidgetContext;
+}): JSX.Element;

package/dist/i18n.d.ts

@@ -47,6 +47,7 @@ export declare const STRINGS: {
         scaleLog: string;
         scalePercent: string;
         undo: string;
+        tools: string;
         horizontalAt: string;
         resetChart: string;
         chartSettingsMore: string;
@@ -176,6 +177,7 @@ export declare const STRINGS: {
         scaleLog: string;
         scalePercent: string;
         undo: string;
+        tools: string;
         horizontalAt: string;
         resetChart: string;
         chartSettingsMore: string;

package/dist/icons.d.ts

@@ -52,3 +52,5 @@ export declare const SvgIcon: ({ markup }: {
 }) => import("preact").JSX.Element;
 /** Tiny corner triangle on drawing-bar buttons that hold more tools. */
 export declare const CornerIcon: () => import("preact").JSX.Element;
+/** Sliders: the 도구 menu. */
+export declare const ToolsIcon: () => import("preact").JSX.Element;

package/dist/index.js

@@ -470,6 +470,7 @@ var STRINGS = {
     scaleLog: "\uB85C\uADF8",
     scalePercent: "%",
     undo: "\uB418\uB3CC\uB9AC\uAE30",
+    tools: "\uB3C4\uAD6C",
     horizontalAt: "{price}\uC5D0 \uC218\uD3C9\uC120 \uAE0B\uAE30",
     resetChart: "\uCC28\uD2B8 \uCD08\uAE30\uD654",
     chartSettingsMore: "\uCC28\uD2B8 \uC124\uC815\u2026",
@@ -601,6 +602,7 @@ var STRINGS = {
     scaleLog: "Log",
     scalePercent: "%",
     undo: "Undo",
+    tools: "Tools",
     horizontalAt: "Horizontal line at {price}",
     resetChart: "Reset chart",
     chartSettingsMore: "Chart settings\u2026",
@@ -815,10 +817,6 @@ var FunnestMark = () => /* @__PURE__ */ a3("svg", { width: "20", height: "20", v
   /* @__PURE__ */ a3("path", { d: "M7 13.5C9.5 21.5 17 23.5 23.4 11.2", stroke: "#fff", "stroke-width": "3.2", "stroke-linecap": "round" }),
   /* @__PURE__ */ a3("circle", { cx: "24.6", cy: "8.6", r: "2.9", fill: "#FFD43B" })
 ] });
-var LinkIcon = () => /* @__PURE__ */ a3(Icon, { children: [
-  /* @__PURE__ */ a3("path", { d: "M8.5 11.5a3 3 0 0 0 4.2 0l2.6-2.6a3 3 0 0 0-4.2-4.2l-1 1" }),
-  /* @__PURE__ */ a3("path", { d: "M11.5 8.5a3 3 0 0 0-4.2 0l-2.6 2.6a3 3 0 0 0 4.2 4.2l1-1" })
-] });
 var MaximizeIcon = () => /* @__PURE__ */ a3(Icon, { size: 16, children: /* @__PURE__ */ a3("path", { d: "M11 4h5v5M9 16H4v-5M16 4l-5 5M4 16l5-5" }) });
 var RestoreIcon = () => /* @__PURE__ */ a3(Icon, { size: 16, children: /* @__PURE__ */ a3("path", { d: "M15 9h-4V5M5 11h4v4M11 9l5-5M9 11l-5 5" }) });
 var CompareIcon = () => /* @__PURE__ */ a3(Icon, { children: [
@@ -851,6 +849,11 @@ var SvgIcon = ({ markup }) => markup.trim().startsWith("<svg") ? /* @__PURE__ */
   }
 );
 var CornerIcon = () => /* @__PURE__ */ a3("svg", { width: "6", height: "6", viewBox: "0 0 6 6", "aria-hidden": "true", children: /* @__PURE__ */ a3("path", { d: "M6 0v6H0z", fill: "currentColor" }) });
+var ToolsIcon = () => /* @__PURE__ */ a3(Icon, { size: 18, children: [
+  /* @__PURE__ */ a3("path", { d: "M3.5 6h7M14.5 6h2M3.5 14h2M9.5 14h7" }),
+  /* @__PURE__ */ a3("circle", { cx: "12.5", cy: "6", r: "2" }),
+  /* @__PURE__ */ a3("circle", { cx: "7.5", cy: "14", r: "2" })
+] });
 
 // src/store.ts
 var Store = class {
@@ -1037,93 +1040,6 @@ function SelectionBar({ ctx }) {
   ] });
 }
 
-// src/components/keep-in-view.ts
-var MARGIN = 8;
-function useKeepInView(open) {
-  const ref = T2(null);
-  F2(() => {
-    const el = ref.current;
-    if (!open || !el) return;
-    el.style.translate = "";
-    const fit = () => {
-      el.style.translate = "";
-      const r3 = el.getBoundingClientRect();
-      const root = el.closest(".fnc-root")?.getBoundingClientRect();
-      const minX = Math.max(0, root?.left ?? 0) + MARGIN;
-      const maxX = Math.min(document.documentElement.clientWidth, root?.right ?? Infinity) - MARGIN;
-      let dx = 0;
-      if (r3.right > maxX) dx = maxX - r3.right;
-      if (r3.left + dx < minX) dx = minX - r3.left;
-      if (dx) el.style.translate = `${Math.round(dx)}px 0`;
-    };
-    fit();
-    window.addEventListener("resize", fit);
-    return () => window.removeEventListener("resize", fit);
-  }, [open]);
-  return ref;
-}
-
-// src/components/chart-type-menu.tsx
-var TYPES = [
-  { type: "candles", label: "candles", icon: CandlesIcon },
-  { type: "line", label: "line", icon: LineChartIcon },
-  { type: "area", label: "area", icon: AreaChartIcon }
-];
-function ChartTypeMenu({ ctx }) {
-  const s3 = useStore(ctx.store);
-  const t3 = STRINGS[s3.locale];
-  const [open, setOpen] = d2(false);
-  const ref = T2(null);
-  const menuRef = useKeepInView(open);
-  const current = TYPES.find((x2) => x2.type === s3.chartType) ?? TYPES[0];
-  A2(() => {
-    if (!open) return;
-    const onDown = (e3) => !ref.current?.contains(e3.target) && setOpen(false);
-    const onKey = (e3) => e3.key === "Escape" && setOpen(false);
-    document.addEventListener("pointerdown", onDown);
-    document.addEventListener("keydown", onKey);
-    return () => {
-      document.removeEventListener("pointerdown", onDown);
-      document.removeEventListener("keydown", onKey);
-    };
-  }, [open]);
-  const choose = (type) => {
-    ctx.chart.setChartType(type);
-    ctx.store.set({ chartType: type });
-    setOpen(false);
-  };
-  return /* @__PURE__ */ a3("div", { class: "fnc-menu-wrap fnc-chart-type", ref, children: [
-    /* @__PURE__ */ a3(
-      "button",
-      {
-        class: "fnc-btn fnc-btn-wide",
-        "data-tip": t3.chartType,
-        "aria-label": t3.chartType,
-        "aria-haspopup": "menu",
-        "aria-expanded": open,
-        onClick: () => setOpen(!open),
-        children: [
-          /* @__PURE__ */ a3(current.icon, {}),
-          /* @__PURE__ */ a3(ChevronDownIcon, {})
-        ]
-      }
-    ),
-    open && /* @__PURE__ */ a3("div", { class: "fnc-menu", role: "menu", ref: menuRef, children: TYPES.map(({ type, label, icon: Icon2 }) => /* @__PURE__ */ a3(
-      "button",
-      {
-        class: "fnc-menu-item",
-        role: "menuitemradio",
-        "aria-checked": type === s3.chartType,
-        onClick: () => choose(type),
-        children: [
-          /* @__PURE__ */ a3(Icon2, {}),
-          /* @__PURE__ */ a3("span", { children: t3[label] })
-        ]
-      }
-    )) })
-  ] });
-}
-
 // src/components/indicator-dialogs.tsx
 import {
   maLines,
@@ -1484,6 +1400,32 @@ function Dialogs({ ctx }) {
   return null;
 }
 
+// src/components/keep-in-view.ts
+var MARGIN = 8;
+function useKeepInView(open) {
+  const ref = T2(null);
+  F2(() => {
+    const el = ref.current;
+    if (!open || !el) return;
+    el.style.translate = "";
+    const fit = () => {
+      el.style.translate = "";
+      const r3 = el.getBoundingClientRect();
+      const root = el.closest(".fnc-root")?.getBoundingClientRect();
+      const minX = Math.max(0, root?.left ?? 0) + MARGIN;
+      const maxX = Math.min(document.documentElement.clientWidth, root?.right ?? Infinity) - MARGIN;
+      let dx = 0;
+      if (r3.right > maxX) dx = maxX - r3.right;
+      if (r3.left + dx < minX) dx = minX - r3.left;
+      if (dx) el.style.translate = `${Math.round(dx)}px 0`;
+    };
+    fit();
+    window.addEventListener("resize", fit);
+    return () => window.removeEventListener("resize", fit);
+  }, [open]);
+  return ref;
+}
+
 // src/components/interval-picker.tsx
 var GROUP_LABEL = {
   minutes: "intervalMinutes",
@@ -1577,181 +1519,6 @@ function IntervalPicker({ ctx }) {
   ] });
 }
 
-// src/layouts.ts
-var row = (...children) => ({ dir: "row", children });
-var col = (...children) => ({ dir: "col", children });
-var LAYOUTS = {
-  "1": 0,
-  "2-cols": row(0, 1),
-  "2-rows": col(0, 1),
-  "3-cols": row(0, 1, 2),
-  "3-rows": col(0, 1, 2),
-  "3-left": row(0, col(1, 2)),
-  "3-top": col(0, row(1, 2)),
-  "4-grid": col(row(0, 1), row(2, 3)),
-  "4-cols": row(0, 1, 2, 3),
-  "4-left": row(0, col(1, 2, 3)),
-  "6-grid": col(row(0, 1, 2), row(3, 4, 5)),
-  "8-grid": col(row(0, 1, 2, 3), row(4, 5, 6, 7))
-};
-var LAYOUT_GROUPS = [
-  ["1"],
-  ["2-cols", "2-rows"],
-  ["3-cols", "3-rows", "3-left", "3-top"],
-  ["4-grid", "4-cols", "4-left"],
-  ["6-grid", "8-grid"]
-];
-var MAX_PANES = 8;
-function isLayoutId(value) {
-  return typeof value === "string" && value in LAYOUTS;
-}
-function paneCount(node) {
-  if (typeof node === "number") return 1;
-  let n2 = 0;
-  for (const child of node.children) n2 += paneCount(child);
-  return n2;
-}
-function sizesFor(sizes, key, count) {
-  const s3 = sizes[key];
-  return s3 && s3.length === count && s3.every((v3) => Number.isFinite(v3) && v3 > 0) ? s3 : Array(count).fill(1);
-}
-function resizePair(weights, i3, deltaFraction, min = 0.12) {
-  const total = weights.reduce((a5, b2) => a5 + b2, 0);
-  const a4 = weights[i3];
-  const b = weights[i3 + 1];
-  const pair = a4 + b;
-  const delta = deltaFraction * total;
-  const nextA = Math.min(pair * (1 - min), Math.max(pair * min, a4 + delta));
-  const next = [...weights];
-  next[i3] = nextA;
-  next[i3 + 1] = pair - nextA;
-  return next;
-}
-function layoutRects(node, x2 = 0, y3 = 0, w3 = 20, h3 = 16, gap = 1.6) {
-  if (typeof node === "number") return [{ x: x2, y: y3, w: w3, h: h3 }];
-  const n2 = node.children.length;
-  const out = [];
-  node.children.forEach((child, i3) => {
-    if (node.dir === "row") {
-      const cw = (w3 - gap * (n2 - 1)) / n2;
-      out.push(...layoutRects(child, x2 + i3 * (cw + gap), y3, cw, h3, gap));
-    } else {
-      const ch = (h3 - gap * (n2 - 1)) / n2;
-      out.push(...layoutRects(child, x2, y3 + i3 * (ch + gap), w3, ch, gap));
-    }
-  });
-  return out;
-}
-
-// src/components/layout-menu.tsx
-var LAYOUT_PANES = (id) => paneCount(LAYOUTS[id]);
-function LayoutGlyph({ id }) {
-  return /* @__PURE__ */ a3("svg", { width: "20", height: "16", viewBox: "0 0 20 16", "aria-hidden": "true", children: layoutRects(LAYOUTS[id]).map((r3) => /* @__PURE__ */ a3("rect", { x: r3.x + 0.5, y: r3.y + 0.5, width: Math.max(0, r3.w - 1), height: Math.max(0, r3.h - 1), rx: "1.5", fill: "none", stroke: "currentColor", "stroke-width": "1.2" })) });
-}
-function usePopover() {
-  const [open, setOpen] = d2(false);
-  const ref = T2(null);
-  A2(() => {
-    if (!open) return;
-    const onDown = (e3) => !ref.current?.contains(e3.target) && setOpen(false);
-    const onKey = (e3) => e3.key === "Escape" && setOpen(false);
-    document.addEventListener("pointerdown", onDown);
-    document.addEventListener("keydown", onKey);
-    return () => {
-      document.removeEventListener("pointerdown", onDown);
-      document.removeEventListener("keydown", onKey);
-    };
-  }, [open]);
-  return { open, setOpen, ref };
-}
-var SYNC_KEYS = [
-  { key: "crosshair", label: "syncCrosshair" },
-  { key: "time", label: "syncTime" },
-  { key: "symbol", label: "syncSymbol" },
-  { key: "interval", label: "syncInterval" }
-];
-function LayoutMenu({ ctx, multi }) {
-  const s3 = useStore(ctx.store);
-  const m3 = useStore(multi.store);
-  const t3 = STRINGS[s3.locale];
-  const layout = usePopover();
-  const sync = usePopover();
-  const layoutMenuRef = useKeepInView(layout.open);
-  const syncMenuRef = useKeepInView(sync.open);
-  const anySync = Object.values(m3.sync).some(Boolean);
-  return /* @__PURE__ */ a3($, { children: [
-    /* @__PURE__ */ a3("div", { class: "fnc-menu-wrap", ref: layout.ref, children: [
-      /* @__PURE__ */ a3(
-        "button",
-        {
-          class: "fnc-btn fnc-btn-wide fnc-btn-layout",
-          "data-tip": t3.layout,
-          "aria-label": t3.layout,
-          "aria-haspopup": "menu",
-          "aria-expanded": layout.open,
-          onClick: () => layout.setOpen(!layout.open),
-          children: [
-            /* @__PURE__ */ a3(LayoutGlyph, { id: m3.layout }),
-            /* @__PURE__ */ a3(ChevronDownIcon, {})
-          ]
-        }
-      ),
-      layout.open && /* @__PURE__ */ a3("div", { class: "fnc-menu fnc-layout-menu", role: "menu", "aria-label": t3.layout, ref: layoutMenuRef, children: LAYOUT_GROUPS.map((group) => /* @__PURE__ */ a3("div", { class: "fnc-layout-row", children: [
-        /* @__PURE__ */ a3("span", { class: "fnc-layout-count", children: group[0].split("-")[0] }),
-        group.map((id) => /* @__PURE__ */ a3(
-          "button",
-          {
-            class: "fnc-layout-opt",
-            role: "menuitemradio",
-            "aria-checked": id === m3.layout,
-            "aria-label": `${t3.layout} ${id}`,
-            "data-layout": id,
-            onClick: () => {
-              multi.setLayout(id);
-              layout.setOpen(false);
-            },
-            children: /* @__PURE__ */ a3(LayoutGlyph, { id })
-          }
-        ))
-      ] })) })
-    ] }),
-    LAYOUT_PANES(m3.layout) > 1 && /* @__PURE__ */ a3("div", { class: "fnc-menu-wrap", ref: sync.ref, children: [
-      /* @__PURE__ */ a3(
-        "button",
-        {
-          class: "fnc-btn fnc-btn-sync",
-          "data-tip": t3.sync,
-          "aria-label": t3.sync,
-          "aria-haspopup": "menu",
-          "aria-expanded": sync.open,
-          "aria-pressed": anySync,
-          onClick: () => sync.setOpen(!sync.open),
-          children: /* @__PURE__ */ a3(LinkIcon, {})
-        }
-      ),
-      sync.open && /* @__PURE__ */ a3("div", { class: "fnc-menu fnc-sync-menu", role: "menu", "aria-label": t3.sync, ref: syncMenuRef, children: [
-        /* @__PURE__ */ a3("div", { class: "fnc-menu-title", children: [
-          t3.sync,
-          /* @__PURE__ */ a3("small", { children: t3.syncHint })
-        ] }),
-        SYNC_KEYS.map(({ key, label }) => /* @__PURE__ */ a3(
-          "button",
-          {
-            class: "fnc-menu-item fnc-sync-item",
-            role: "menuitemcheckbox",
-            "aria-checked": m3.sync[key],
-            onClick: () => multi.setSync({ [key]: !m3.sync[key] }),
-            children: [
-              /* @__PURE__ */ a3("span", { children: t3[label] }),
-              /* @__PURE__ */ a3("span", { class: "fnc-switch", "data-on": m3.sync[key] ? "true" : "false", "aria-hidden": "true" })
-            ]
-          }
-        ))
-      ] })
-    ] })
-  ] });
-}
-
 // src/components/slot.tsx
 function Slot({ el, fixed = false }) {
   const ref = T2(null);
@@ -2036,6 +1803,230 @@ function SymbolSearch({ ctx }) {
   ] }) });
 }
 
+// src/layouts.ts
+var row = (...children) => ({ dir: "row", children });
+var col = (...children) => ({ dir: "col", children });
+var LAYOUTS = {
+  "1": 0,
+  "2-cols": row(0, 1),
+  "2-rows": col(0, 1),
+  "3-cols": row(0, 1, 2),
+  "3-rows": col(0, 1, 2),
+  "3-left": row(0, col(1, 2)),
+  "3-top": col(0, row(1, 2)),
+  "4-grid": col(row(0, 1), row(2, 3)),
+  "4-cols": row(0, 1, 2, 3),
+  "4-left": row(0, col(1, 2, 3)),
+  "6-grid": col(row(0, 1, 2), row(3, 4, 5)),
+  "8-grid": col(row(0, 1, 2, 3), row(4, 5, 6, 7))
+};
+var LAYOUT_GROUPS = [
+  ["1"],
+  ["2-cols", "2-rows"],
+  ["3-cols", "3-rows", "3-left", "3-top"],
+  ["4-grid", "4-cols", "4-left"],
+  ["6-grid", "8-grid"]
+];
+var MAX_PANES = 8;
+function isLayoutId(value) {
+  return typeof value === "string" && value in LAYOUTS;
+}
+function paneCount(node) {
+  if (typeof node === "number") return 1;
+  let n2 = 0;
+  for (const child of node.children) n2 += paneCount(child);
+  return n2;
+}
+function sizesFor(sizes, key, count) {
+  const s3 = sizes[key];
+  return s3 && s3.length === count && s3.every((v3) => Number.isFinite(v3) && v3 > 0) ? s3 : Array(count).fill(1);
+}
+function resizePair(weights, i3, deltaFraction, min = 0.12) {
+  const total = weights.reduce((a5, b2) => a5 + b2, 0);
+  const a4 = weights[i3];
+  const b = weights[i3 + 1];
+  const pair = a4 + b;
+  const delta = deltaFraction * total;
+  const nextA = Math.min(pair * (1 - min), Math.max(pair * min, a4 + delta));
+  const next = [...weights];
+  next[i3] = nextA;
+  next[i3 + 1] = pair - nextA;
+  return next;
+}
+function layoutRects(node, x2 = 0, y3 = 0, w3 = 20, h3 = 16, gap = 1.6) {
+  if (typeof node === "number") return [{ x: x2, y: y3, w: w3, h: h3 }];
+  const n2 = node.children.length;
+  const out = [];
+  node.children.forEach((child, i3) => {
+    if (node.dir === "row") {
+      const cw = (w3 - gap * (n2 - 1)) / n2;
+      out.push(...layoutRects(child, x2 + i3 * (cw + gap), y3, cw, h3, gap));
+    } else {
+      const ch = (h3 - gap * (n2 - 1)) / n2;
+      out.push(...layoutRects(child, x2, y3 + i3 * (ch + gap), w3, ch, gap));
+    }
+  });
+  return out;
+}
+
+// src/components/layout-menu.tsx
+function LayoutGlyph({ id }) {
+  return /* @__PURE__ */ a3("svg", { width: "20", height: "16", viewBox: "0 0 20 16", "aria-hidden": "true", children: layoutRects(LAYOUTS[id]).map((r3) => /* @__PURE__ */ a3("rect", { x: r3.x + 0.5, y: r3.y + 0.5, width: Math.max(0, r3.w - 1), height: Math.max(0, r3.h - 1), rx: "1.5", fill: "none", stroke: "currentColor", "stroke-width": "1.2" })) });
+}
+
+// src/components/tools-menu.tsx
+var TYPES = [
+  { type: "candles", label: "candles", icon: CandlesIcon },
+  { type: "line", label: "line", icon: LineChartIcon },
+  { type: "area", label: "area", icon: AreaChartIcon }
+];
+var SCALES2 = [
+  { mode: "normal", label: "scaleNormal" },
+  { mode: "log", label: "scaleLog" },
+  { mode: "percent", label: "scalePercent" }
+];
+var SYNC_KEYS = [
+  { key: "crosshair", label: "syncCrosshair" },
+  { key: "time", label: "syncTime" },
+  { key: "symbol", label: "syncSymbol" },
+  { key: "interval", label: "syncInterval" }
+];
+function LayoutSection({ ctx, multi, close }) {
+  const s3 = useStore(ctx.store);
+  const m3 = useStore(multi.store);
+  const t3 = STRINGS[s3.locale];
+  return /* @__PURE__ */ a3($, { children: [
+    /* @__PURE__ */ a3("div", { class: "fnc-tools-section", children: t3.layout }),
+    /* @__PURE__ */ a3("div", { class: "fnc-tools-layouts", children: LAYOUT_GROUPS.map((group) => /* @__PURE__ */ a3("div", { class: "fnc-layout-row", children: [
+      /* @__PURE__ */ a3("span", { class: "fnc-layout-count", children: group[0].split("-")[0] }),
+      group.map((id) => /* @__PURE__ */ a3(
+        "button",
+        {
+          class: "fnc-layout-opt",
+          role: "menuitemradio",
+          "aria-checked": id === m3.layout,
+          "aria-label": `${t3.layout} ${id}`,
+          "data-layout": id,
+          onClick: () => {
+            multi.setLayout(id);
+            close();
+          },
+          children: /* @__PURE__ */ a3(LayoutGlyph, { id })
+        }
+      ))
+    ] })) }),
+    paneCount(LAYOUTS[m3.layout]) > 1 && /* @__PURE__ */ a3("div", { class: "fnc-tools-section", children: t3.sync }),
+    paneCount(LAYOUTS[m3.layout]) > 1 && SYNC_KEYS.map(({ key, label }) => /* @__PURE__ */ a3(
+      "button",
+      {
+        class: "fnc-menu-item fnc-sync-item",
+        role: "menuitemcheckbox",
+        "aria-checked": m3.sync[key],
+        onClick: () => multi.setSync({ [key]: !m3.sync[key] }),
+        children: [
+          /* @__PURE__ */ a3("span", { children: t3[label] }),
+          /* @__PURE__ */ a3("span", { class: "fnc-switch", "data-on": m3.sync[key] ? "true" : "false", "aria-hidden": "true" })
+        ]
+      }
+    ))
+  ] });
+}
+function ToolsMenu({ ctx }) {
+  const s3 = useStore(ctx.store);
+  const t3 = STRINGS[s3.locale];
+  const [open, setOpen] = d2(false);
+  const [scale, setScale] = d2(ctx.chart.settings.priceScale);
+  const ref = T2(null);
+  const menuRef = useKeepInView(open);
+  const canSearch = typeof ctx.datafeed.searchSymbols === "function";
+  const close = () => setOpen(false);
+  A2(() => ctx.chart.on("settingsChange", (settings) => setScale(settings.priceScale)), [ctx.chart]);
+  A2(() => {
+    if (!open) return;
+    const onDown = (e3) => !ref.current?.contains(e3.target) && setOpen(false);
+    const onKey = (e3) => e3.key === "Escape" && setOpen(false);
+    document.addEventListener("pointerdown", onDown);
+    document.addEventListener("keydown", onKey);
+    return () => {
+      document.removeEventListener("pointerdown", onDown);
+      document.removeEventListener("keydown", onKey);
+    };
+  }, [open]);
+  const item = (cls, label, icon, onClick, opts = {}) => /* @__PURE__ */ a3(
+    "button",
+    {
+      class: `fnc-menu-item fnc-tools-item ${cls}`,
+      role: "menuitem",
+      disabled: opts.disabled,
+      "aria-pressed": opts.pressed,
+      onClick: () => {
+        close();
+        onClick();
+      },
+      children: [
+        icon,
+        /* @__PURE__ */ a3("span", { children: label })
+      ]
+    }
+  );
+  return /* @__PURE__ */ a3("div", { class: "fnc-menu-wrap fnc-tools-wrap", ref, children: [
+    /* @__PURE__ */ a3(
+      "button",
+      {
+        class: "fnc-btn fnc-btn-wide fnc-btn-label fnc-btn-tools",
+        "data-tip": t3.tools,
+        "aria-label": t3.tools,
+        "aria-haspopup": "menu",
+        "aria-expanded": open,
+        "aria-pressed": s3.replay.active || s3.replay.selecting || s3.compares.length > 0,
+        onClick: () => setOpen(!open),
+        children: [
+          /* @__PURE__ */ a3(ToolsIcon, {}),
+          /* @__PURE__ */ a3("span", { children: t3.tools }),
+          /* @__PURE__ */ a3(ChevronDownIcon, {})
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ a3("div", { class: "fnc-menu fnc-tools-menu", role: "menu", "aria-label": t3.tools, ref: menuRef, children: [
+      /* @__PURE__ */ a3("div", { class: "fnc-tools-section", children: t3.chartType }),
+      /* @__PURE__ */ a3("div", { class: "fnc-seg fnc-tools-seg", role: "radiogroup", "aria-label": t3.chartType, children: TYPES.map(({ type, label, icon: Icon2 }) => /* @__PURE__ */ a3(
+        "button",
+        {
+          type: "button",
+          role: "radio",
+          "aria-checked": s3.chartType === type,
+          "data-type": type,
+          onClick: () => {
+            ctx.chart.setChartType(type);
+            ctx.store.set({ chartType: type });
+          },
+          children: [
+            /* @__PURE__ */ a3(Icon2, {}),
+            /* @__PURE__ */ a3("span", { children: t3[label] })
+          ]
+        }
+      )) }),
+      ctx.multi && /* @__PURE__ */ a3(LayoutSection, { ctx, multi: ctx.multi, close }),
+      /* @__PURE__ */ a3("div", { class: "fnc-tools-sep" }),
+      canSearch && item("fnc-btn-compare", t3.compareSymbol, /* @__PURE__ */ a3(CompareIcon, {}), () => ctx.setSearchOpen(true, "compare"), {
+        disabled: s3.compares.length >= 5
+      }),
+      item(
+        "fnc-btn-replay",
+        s3.replay.active ? t3.replayExit : t3.replay,
+        /* @__PURE__ */ a3(ReplayIcon, {}),
+        () => s3.replay.active ? ctx.chart.stopReplay() : ctx.chart.setReplaySelecting(true),
+        { pressed: s3.replay.active || s3.replay.selecting }
+      ),
+      item("fnc-btn-screenshot", t3.screenshot, /* @__PURE__ */ a3(CameraIcon, {}), ctx.screenshot),
+      /* @__PURE__ */ a3("div", { class: "fnc-tools-section", children: t3.settingsScale }),
+      /* @__PURE__ */ a3("div", { class: "fnc-seg fnc-tools-seg", role: "radiogroup", "aria-label": t3.settingsScale, children: SCALES2.map(({ mode, label }) => /* @__PURE__ */ a3("button", { type: "button", role: "radio", "aria-checked": scale === mode, onClick: () => ctx.chart.setSettings({ priceScale: mode }), children: /* @__PURE__ */ a3("span", { children: t3[label] }) })) }),
+      /* @__PURE__ */ a3("div", { class: "fnc-tools-sep" }),
+      item("fnc-btn-settings", t3.chartSettingsMore, /* @__PURE__ */ a3(SettingsIcon, {}), () => ctx.store.set({ dialog: { kind: "chartSettings" } }))
+    ] })
+  ] });
+}
+
 // src/components/toolbar.tsx
 function Toolbar({ ctx }) {
   const s3 = useStore(ctx.store);
@@ -2062,7 +2053,6 @@ function Toolbar({ ctx }) {
     /* @__PURE__ */ a3(Slot, { el: ctx.slots.toolbar }),
     /* @__PURE__ */ a3("div", { class: "fnc-spacer" }),
     /* @__PURE__ */ a3("div", { class: "fnc-tools", children: [
-      /* @__PURE__ */ a3(ChartTypeMenu, { ctx }),
       /* @__PURE__ */ a3(
         "button",
         {
@@ -2077,30 +2067,7 @@ function Toolbar({ ctx }) {
           ]
         }
       ),
-      canSearch && /* @__PURE__ */ a3(
-        "button",
-        {
-          class: "fnc-btn fnc-btn-compare",
-          "data-tip": t3.compareSymbol,
-          "aria-label": t3.compareSymbol,
-          "aria-haspopup": "dialog",
-          disabled: s3.compares.length >= 5,
-          onClick: () => ctx.setSearchOpen(true, "compare"),
-          children: /* @__PURE__ */ a3(CompareIcon, {})
-        }
-      ),
-      /* @__PURE__ */ a3(
-        "button",
-        {
-          class: "fnc-btn fnc-btn-replay",
-          "data-tip": s3.replay.selecting ? t3.replayPick : t3.replay,
-          "aria-label": t3.replay,
-          "aria-pressed": s3.replay.selecting || s3.replay.active,
-          onClick: () => s3.replay.active ? ctx.chart.stopReplay() : ctx.chart.setReplaySelecting(!s3.replay.selecting),
-          children: /* @__PURE__ */ a3(ReplayIcon, {})
-        }
-      ),
-      ctx.multi && /* @__PURE__ */ a3(LayoutMenu, { ctx, multi: ctx.multi })
+      /* @__PURE__ */ a3(ToolsMenu, { ctx })
     ] }),
     /* @__PURE__ */ a3("div", { class: "fnc-sep" }),
     ctx.drawingToolbar && /* @__PURE__ */ a3(
@@ -2115,18 +2082,6 @@ function Toolbar({ ctx }) {
       }
     ),
     /* @__PURE__ */ a3(Slot, { el: ctx.slots.toolbarEnd, fixed: true }),
-    /* @__PURE__ */ a3(
-      "button",
-      {
-        class: "fnc-btn fnc-btn-settings",
-        "data-tip": t3.chartSettings,
-        "aria-label": t3.chartSettings,
-        "aria-haspopup": "dialog",
-        onClick: () => ctx.store.set({ dialog: { kind: "chartSettings" } }),
-        children: /* @__PURE__ */ a3(SettingsIcon, {})
-      }
-    ),
-    /* @__PURE__ */ a3("button", { class: "fnc-btn fnc-btn-screenshot", "data-tip": t3.screenshot, "aria-label": t3.screenshot, onClick: ctx.screenshot, children: /* @__PURE__ */ a3(CameraIcon, {}) }),
     /* @__PURE__ */ a3(
       "button",
       {
@@ -3338,7 +3293,6 @@ var CSS = (
 @container fnc (max-width: 940px) {
   .fnc-intervals { display: none; }
   .fnc-interval-current { display: inline; }
-  .fnc-btn-screenshot { display: none; }
 }
 
 /* \u2500\u2500 Narrow phones (\u2264 400px): drop the menu chevrons and separators so every button fits \u2500\u2500 */
@@ -3452,6 +3406,17 @@ var CSS = (
 .fnc-ctx-menu kbd { font: inherit; font-size: 12px; color: var(--fnc-text-2); }
 .fnc-ctx-sep { height: 1px; margin: 4px 6px; background: var(--fnc-border); }
 
+/* \u2500\u2500 \uB3C4\uAD6C menu: chart type, split, compare, replay, axis, screenshot, settings \u2500\u2500 */
+.fnc-tools-menu { width: 300px; padding: 8px; gap: 2px; max-height: 72vh; overflow-y: auto; }
+.fnc-tools-section { padding: 8px 6px 6px; font-size: 12px; font-weight: 700; color: var(--fnc-text-2); }
+.fnc-tools-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; margin: 0 2px 4px; }
+.fnc-tools-seg button { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 0; padding: 0 6px; }
+.fnc-tools-seg svg { width: 16px; height: 16px; flex: none; }
+.fnc-tools-layouts { display: flex; flex-direction: column; gap: 2px; padding: 0 2px 4px; }
+.fnc-tools-sep { height: 1px; margin: 6px 4px; background: var(--fnc-border); }
+.fnc-tools-item svg { flex: none; color: var(--fnc-text-2); }
+.fnc-tools-item[aria-pressed='true'] { background: var(--fnc-surface); color: var(--fnc-text); }
+
 /* \u2500\u2500 Drawing tool groups \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
 .fnc-tool-group { position: relative; display: flex; }
 .fnc-tool-group[data-open='true'] { z-index: 30; }
@@ -3524,7 +3489,6 @@ var CSS = (
 
 /* \u2500\u2500 Mobile \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
 @media (max-width: 640px) {
-  .fnc-btn-compare, .fnc-btn-replay { display: none; }
   .fnc-toolbar { padding: 0 4px; gap: 2px; }
   .fnc-toolbar .fnc-btn { width: 32px; height: 32px; }
   .fnc-toolbar .fnc-btn-wide, .fnc-toolbar .fnc-btn-label { width: auto; padding: 0 6px; }
@@ -3533,9 +3497,7 @@ var CSS = (
   /* Logo only on phones; the name is in the chart legend right below. */
   .fnc-toolbar .fnc-symbol:has(.fnc-avatar) :is(.fnc-symbol-name, .fnc-icon) { display: none; }
   .fnc-chip { padding: 0 8px; }
-  .fnc-btn-screenshot { display: none; }
   .fnc-btn-label span { display: none; }
-  .fnc-btn-sync { display: none; }
   .fnc-intervals { display: none; }
   .fnc-interval-current { display: inline; }
   .fnc-interval-menu { left: auto; right: -40px; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@funnest/charts-ui",
-  "version": "0.6.1",
+  "version": "0.6.3",
   "description": "Pro trading UI (toolbar, drawing tools, sheets) for Funnest Charts. Framework-agnostic.",
   "keywords": [
     "chart",
@@ -42,7 +42,7 @@
     "NOTICE"
   ],
   "dependencies": {
-    "@funnest/charts": "0.6.1"
+    "@funnest/charts": "0.6.3"
   },
   "devDependencies": {
     "preact": "^11.2.0"

package/dist/components/chart-type-menu.d.ts

@@ -1,5 +0,0 @@
-import type { JSX } from 'preact';
-import type { WidgetContext } from '../context';
-export declare function ChartTypeMenu({ ctx }: {
-    ctx: WidgetContext;
-}): JSX.Element;