@funnest/charts-ui 0.6.0 → 0.6.2

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

@@ -0,0 +1,8 @@
+import type { WidgetContext } from '../context';
+/**
+ * Right-click menu on the chart (mouse only): undo/redo, the host's own items
+ * (`contextMenuItems`), a horizontal line at the clicked price, reset and settings.
+ */
+export declare function ContextMenu({ ctx }: {
+    ctx: WidgetContext;
+}): import("preact").JSX.Element | null;

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/context.d.ts

@@ -1,4 +1,4 @@
-import type { Chart, ChartLayout, ChartType, CompareInfo, Datafeed, Drawing, DrawingType, IndicatorConfig, Locale, ReplayStatus, Resolution, SymbolInfo } from '@funnest/charts';
+import type { Chart, ChartContextMenu, ChartLayout, ChartType, CompareInfo, Datafeed, Drawing, DrawingType, IndicatorConfig, Locale, ReplayStatus, Resolution, SymbolInfo } from '@funnest/charts';
 import type { LayoutId } from './layouts';
 import type { WidgetStorage } from './storage';
 import type { Store } from './store';
@@ -39,6 +39,17 @@ export interface UiState {
     compares: CompareInfo[];
     replay: ReplayStatus;
 }
+/** A row in the chart's right-click menu, or a divider. */
+export type ContextMenuItem = {
+    label: string;
+    shortcut?: string;
+    disabled?: boolean;
+    onSelect(): void;
+} | 'separator';
+/** Extra right-click items for a click on `chart` (e.g. "create an alert at this price"). */
+export type ContextMenuItems = (target: ChartContextMenu & {
+    chart: Chart;
+}) => ContextMenuItem[];
 export interface IntervalGroup {
     id: 'minutes' | 'hours' | 'days';
     intervals: Resolution[];
@@ -65,6 +76,7 @@ export interface WidgetContext {
     drawingToolbar: boolean;
     /** Show the Funnest logo badge on the chart. */
     attribution: boolean;
+    contextMenuItems: ContextMenuItems | undefined;
     slots: {
         toolbar: HTMLElement;
         toolbarEnd: HTMLElement;

package/dist/i18n.d.ts

@@ -47,6 +47,10 @@ export declare const STRINGS: {
         scaleLog: string;
         scalePercent: string;
         undo: string;
+        tools: string;
+        horizontalAt: string;
+        resetChart: string;
+        chartSettingsMore: string;
         redo: string;
         compare: string;
         compareSymbol: string;
@@ -173,6 +177,10 @@ export declare const STRINGS: {
         scaleLog: string;
         scalePercent: string;
         undo: string;
+        tools: string;
+        horizontalAt: string;
+        resetChart: string;
+        chartSettingsMore: string;
         redo: string;
         compare: string;
         compareSymbol: string;

package/dist/icons.d.ts

@@ -40,8 +40,6 @@ export declare const FunnestMark: () => import("preact").JSX.Element;
 export declare const LinkIcon: () => import("preact").JSX.Element;
 export declare const MaximizeIcon: () => import("preact").JSX.Element;
 export declare const RestoreIcon: () => import("preact").JSX.Element;
-export declare const UndoIcon: () => import("preact").JSX.Element;
-export declare const RedoIcon: () => import("preact").JSX.Element;
 /** Two price lines diverging (compare symbols). */
 export declare const CompareIcon: () => import("preact").JSX.Element;
 export declare const ReplayIcon: () => import("preact").JSX.Element;
@@ -54,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.d.ts

@@ -8,6 +8,6 @@ export { createMultiChart } from './multi-chart';
 export type { MultiChart, MultiChartEvents, MultiChartOptions, MultiChartState, PaneSpec } from './multi-chart';
 export { LAYOUT_GROUPS, LAYOUTS, MAX_PANES, paneCount } from './layouts';
 export type { LayoutId, SplitNode, SplitSizes } from './layouts';
-export type { IntervalGroup, LayoutSync, SearchCategory } from './context';
+export type { ContextMenuItem, ContextMenuItems, IntervalGroup, LayoutSync, SearchCategory } from './context';
 export type { ColorScheme, TradingChart, TradingChartOptions, TradingChartSlots } from './trading-chart';
 export { resolutionLabel } from './i18n';

package/dist/index.js

@@ -470,6 +470,10 @@ 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",
     redo: "\uB2E4\uC2DC \uC2E4\uD589",
     compare: "\uBE44\uAD50",
     compareSymbol: "\uBE44\uAD50\uD560 \uC885\uBAA9 \uCD94\uAC00",
@@ -598,6 +602,10 @@ var STRINGS = {
     scaleLog: "Log",
     scalePercent: "%",
     undo: "Undo",
+    tools: "Tools",
+    horizontalAt: "Horizontal line at {price}",
+    resetChart: "Reset chart",
+    chartSettingsMore: "Chart settings\u2026",
     redo: "Redo",
     compare: "Compare",
     compareSymbol: "Add symbol to compare",
@@ -809,20 +817,8 @@ 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 UndoIcon = () => /* @__PURE__ */ a3(Icon, { size: 18, children: [
-  /* @__PURE__ */ a3("path", { d: "M7 5L3.5 8.5 7 12" }),
-  /* @__PURE__ */ a3("path", { d: "M3.5 8.5h8.5a4.5 4.5 0 0 1 0 9H9" })
-] });
-var RedoIcon = () => /* @__PURE__ */ a3(Icon, { size: 18, children: [
-  /* @__PURE__ */ a3("path", { d: "M13 5l3.5 3.5L13 12" }),
-  /* @__PURE__ */ a3("path", { d: "M16.5 8.5H8a4.5 4.5 0 0 0 0 9h3" })
-] });
 var CompareIcon = () => /* @__PURE__ */ a3(Icon, { children: [
   /* @__PURE__ */ a3("path", { d: "M3 14l4-4 3 2 7-7" }),
   /* @__PURE__ */ a3("path", { d: "M3 9l4 2 3-3 7 5", opacity: "0.55" })
@@ -853,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 {
@@ -1039,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,
@@ -1486,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",
@@ -1579,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);
@@ -2038,12 +1803,235 @@ 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);
   const t3 = STRINGS[s3.locale];
   const canSearch = typeof ctx.datafeed.searchSymbols === "function";
-  const mod = /Mac|iPhone|iPad/.test(navigator.platform) ? "\u2318" : "Ctrl";
   return /* @__PURE__ */ a3("div", { class: "fnc-toolbar", role: "toolbar", children: [
     /* @__PURE__ */ a3(
       "button",
@@ -2065,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",
         {
@@ -2080,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(
@@ -2117,21 +2081,7 @@ function Toolbar({ ctx }) {
         children: /* @__PURE__ */ a3(PencilIcon, {})
       }
     ),
-    /* @__PURE__ */ a3("button", { class: "fnc-btn fnc-btn-undo", "data-tip": `${t3.undo} (${mod}+Z)`, "aria-label": t3.undo, disabled: !s3.canUndo, onClick: () => ctx.chart.undo(), children: /* @__PURE__ */ a3(UndoIcon, {}) }),
-    /* @__PURE__ */ a3("button", { class: "fnc-btn fnc-btn-undo", "data-tip": `${t3.redo} (${mod}+Shift+Z)`, "aria-label": t3.redo, disabled: !s3.canRedo, onClick: () => ctx.chart.redo(), children: /* @__PURE__ */ a3(RedoIcon, {}) }),
     /* @__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",
       {
@@ -2151,7 +2101,88 @@ function Toolbar({ ctx }) {
 import { createChart } from "@funnest/charts";
 
 // src/components/overlay.tsx
-import { formatCompact, formatPrice as formatPrice2 } from "@funnest/charts";
+import { formatCompact, formatPrice as formatPrice3 } from "@funnest/charts";
+
+// src/components/context-menu.tsx
+import { formatPrice as formatPrice2 } from "@funnest/charts";
+var MARGIN2 = 8;
+function ContextMenu({ ctx }) {
+  const s3 = useStore(ctx.store);
+  const t3 = STRINGS[s3.locale];
+  const [target, setTarget] = d2(null);
+  const ref = T2(null);
+  A2(() => ctx.chart.on("contextMenu", setTarget), [ctx.chart]);
+  A2(() => {
+    if (!target) return;
+    const close = () => setTarget(null);
+    const onDown = (e3) => !ref.current?.contains(e3.target) && close();
+    const onKey = (e3) => e3.key === "Escape" && close();
+    document.addEventListener("pointerdown", onDown, true);
+    document.addEventListener("keydown", onKey);
+    window.addEventListener("wheel", close, { passive: true });
+    window.addEventListener("resize", close);
+    return () => {
+      document.removeEventListener("pointerdown", onDown, true);
+      document.removeEventListener("keydown", onKey);
+      window.removeEventListener("wheel", close);
+      window.removeEventListener("resize", close);
+    };
+  }, [target]);
+  F2(() => {
+    const el = ref.current;
+    const stage = el?.closest(".fnc-stage");
+    if (!el || !target || !stage) return;
+    const w3 = el.offsetWidth;
+    const h3 = el.offsetHeight;
+    const { width, height } = stage.getBoundingClientRect();
+    const x2 = target.x + w3 + MARGIN2 > width ? Math.max(MARGIN2, target.x - w3) : target.x;
+    const y3 = target.y + h3 + MARGIN2 > height ? Math.max(MARGIN2, target.y - h3) : target.y;
+    el.style.transform = `translate(${Math.round(x2)}px, ${Math.round(y3)}px)`;
+  }, [target]);
+  if (!target) return null;
+  const mac = /Mac|iPhone|iPad/.test(navigator.platform);
+  const mod = mac ? "\u2318" : "Ctrl+";
+  const price = target.price;
+  const precision = s3.symbol?.pricePrecision ?? 2;
+  const extra = ctx.contextMenuItems?.({ ...target, chart: ctx.chart }) ?? [];
+  const items = [
+    { label: t3.undo, shortcut: `${mod}Z`, disabled: !s3.canUndo, onSelect: () => ctx.chart.undo() },
+    { label: t3.redo, shortcut: `${mod}${mac ? "\u21E7" : "Shift+"}Z`, disabled: !s3.canRedo, onSelect: () => ctx.chart.redo() },
+    "separator",
+    ...extra.length ? [...extra, "separator"] : []
+  ];
+  if (price !== null) {
+    const time = target.time ?? ctx.chart.bars[ctx.chart.bars.length - 1]?.time ?? Date.now();
+    items.push({
+      label: t3.horizontalAt.replace("{price}", formatPrice2(price, precision)),
+      onSelect: () => ctx.chart.addDrawing({ type: "horizontal", points: [{ time, price }] })
+    });
+  }
+  items.push(
+    { label: t3.resetChart, onSelect: () => ctx.chart.resetView() },
+    { label: t3.chartSettingsMore, onSelect: () => ctx.store.set({ dialog: { kind: "chartSettings" } }) }
+  );
+  return /* @__PURE__ */ a3("div", { class: "fnc-menu fnc-ctx-menu", role: "menu", ref, onContextMenu: (e3) => e3.preventDefault(), children: items.map(
+    (item) => item === "separator" ? /* @__PURE__ */ a3("div", { class: "fnc-ctx-sep", role: "separator" }) : /* @__PURE__ */ a3(
+      "button",
+      {
+        class: "fnc-menu-item",
+        role: "menuitem",
+        disabled: item.disabled,
+        onClick: () => {
+          setTarget(null);
+          item.onSelect();
+        },
+        children: [
+          /* @__PURE__ */ a3("span", { children: item.label }),
+          item.shortcut && /* @__PURE__ */ a3("kbd", { children: item.shortcut })
+        ]
+      }
+    )
+  ) });
+}
+
+// src/components/overlay.tsx
 var ZOOM_STEP = 1.25;
 var CONTROL_OFFSET = 52;
 var dirClass = (v3) => v3 > 0 ? "fnc-up" : v3 < 0 ? "fnc-down" : "fnc-flat";
@@ -2243,7 +2274,7 @@ function Legend({ ctx }) {
   const bars = ctx.chart.bars;
   const bar = hover?.bar ?? bars[bars.length - 1];
   const prev = hover ? hover.prev : bars[bars.length - 2];
-  const fmt = (p3) => formatPrice2(p3, s3.symbol.pricePrecision);
+  const fmt = (p3) => formatPrice3(p3, s3.symbol.pricePrecision);
   let values = null;
   if (bar) {
     const cls = dirClass(bar.close - bar.open);
@@ -2452,7 +2483,8 @@ function Overlay({ ctx }) {
     /* @__PURE__ */ a3(NavControls, { ctx }),
     /* @__PURE__ */ a3(ReplayBar, { ctx }),
     /* @__PURE__ */ a3(SelectionBar, { ctx }),
-    /* @__PURE__ */ a3(PaneTools, { ctx })
+    /* @__PURE__ */ a3(PaneTools, { ctx }),
+    /* @__PURE__ */ a3(ContextMenu, { ctx })
   ] });
 }
 
@@ -3255,14 +3287,12 @@ var CSS = (
    every toolbar button stays reachable. Ctrl/\u2318+Z still undoes when the buttons are hidden. \u2500\u2500 */
 .fnc-root { container: fnc / inline-size; }
 @container fnc (max-width: 1100px) {
-  .fnc-btn-undo { display: none; }
   .fnc-btn-label span { display: none; }
   .fnc-toolbar .fnc-btn-label { padding: 0 6px; }
 }
 @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 */
@@ -3369,6 +3399,24 @@ var CSS = (
 .fnc-switch[data-on='true'] { background: var(--fnc-text-2); }
 .fnc-switch[data-on='true']::after { transform: translateX(16px); }
 
+/* \u2500\u2500 Right-click menu \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 */
+.fnc-ctx-menu { top: 0; left: 0; z-index: 40; min-width: 220px; pointer-events: auto; }
+.fnc-ctx-menu .fnc-menu-item { justify-content: space-between; gap: 24px; color: var(--fnc-text); }
+.fnc-ctx-menu .fnc-menu-item:disabled { color: var(--fnc-text-2); }
+.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; }
@@ -3441,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, .fnc-btn-undo { 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; }
@@ -3450,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; }
@@ -3809,6 +3854,7 @@ function createPane(shell, config) {
     showLogo: config.symbolLogo,
     drawingToolbar: config.drawingToolbar,
     attribution: config.attribution,
+    contextMenuItems: config.contextMenuItems,
     slots: shell.slots,
     multi: config.multi,
     setDrawbarCollapsed: shell.setDrawbarCollapsed,
@@ -3883,6 +3929,7 @@ function createTradingChart(container, options) {
     chartType = "candles",
     attribution = true,
     colorScheme = "system",
+    contextMenuItems,
     theme,
     ...chartOptions
   } = options;
@@ -3905,7 +3952,8 @@ function createTradingChart(container, options) {
     searchCategories,
     symbolLogo,
     drawingToolbar,
-    attribution
+    attribution,
+    contextMenuItems
   });
   shell.main.insertBefore(pane.stage, shell.slots.bottom);
   shell.setPanes(() => [pane]);
@@ -3976,6 +4024,7 @@ function createMultiChart(container, options) {
     chartType = "candles",
     attribution = true,
     colorScheme = "system",
+    contextMenuItems,
     theme,
     ...chartOptions
   } = options;
@@ -4041,6 +4090,7 @@ function createMultiChart(container, options) {
       drawingToolbar,
       // One badge for the whole widget, not one per pane.
       attribution: attribution && index === 0,
+      contextMenuItems,
       multi: controls
     });
     const cell = div("fnc-pane");

package/dist/pane.d.ts

@@ -1,6 +1,6 @@
 /** @jsxImportSource preact */
 import { type Chart, type ChartOptions, type ChartType, type Datafeed, type Resolution } from '@funnest/charts';
-import type { IntervalGroup, MultiControls, SearchCategory, UiState, WidgetContext } from './context';
+import type { ContextMenuItems, IntervalGroup, MultiControls, SearchCategory, UiState, WidgetContext } from './context';
 import { type Shell } from './shell';
 import { Store } from './store';
 export interface PaneConfig {
@@ -14,6 +14,7 @@ export interface PaneConfig {
     symbolLogo: boolean;
     drawingToolbar: boolean;
     attribution: boolean;
+    contextMenuItems?: ContextMenuItems | undefined;
     multi?: MultiControls | undefined;
 }
 /**

package/dist/trading-chart.d.ts

@@ -1,6 +1,6 @@
 /** @jsxImportSource preact */
 import { type Chart, type ChartOptions, type ChartType, type Datafeed, type Locale, type ChartState, type Resolution, type ThemeTokens } from '@funnest/charts';
-import type { IntervalGroup, SearchCategory } from './context';
+import type { ContextMenuItems, IntervalGroup, SearchCategory } from './context';
 import { type ColorScheme, type TradingChartSlots } from './shell';
 export type { ColorScheme, TradingChartSlots } from './shell';
 /** Interval menu: 분 | 시간 | 일. '12M' is shown as 1년. */
@@ -45,6 +45,11 @@ export interface TradingChartOptions extends Omit<ChartOptions, 'datafeed'> {
      * `theme` overrides are applied on top of whichever base is active.
      */
     colorScheme?: ColorScheme;
+    /**
+     * Extra rows for the chart's right-click menu (between undo/redo and the built-in actions),
+     * e.g. "이 가격에 알림 만들기". Called on every right-click with the price and time under the pointer.
+     */
+    contextMenuItems?: ContextMenuItems;
 }
 export interface TradingChart {
     /** The underlying engine, for anything the widget doesn't wrap. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@funnest/charts-ui",
-  "version": "0.6.0",
+  "version": "0.6.2",
   "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.0"
+    "@funnest/charts": "0.6.2"
   },
   "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;