@funnest/charts-ui 0.6.0 → 0.6.1

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/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,9 @@ export declare const STRINGS: {
         scaleLog: string;
         scalePercent: string;
         undo: string;
+        horizontalAt: string;
+        resetChart: string;
+        chartSettingsMore: string;
         redo: string;
         compare: string;
         compareSymbol: string;
@@ -173,6 +176,9 @@ export declare const STRINGS: {
         scaleLog: string;
         scalePercent: string;
         undo: 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;

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,9 @@ var STRINGS = {
     scaleLog: "\uB85C\uADF8",
     scalePercent: "%",
     undo: "\uB418\uB3CC\uB9AC\uAE30",
+    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 +601,9 @@ var STRINGS = {
     scaleLog: "Log",
     scalePercent: "%",
     undo: "Undo",
+    horizontalAt: "Horizontal line at {price}",
+    resetChart: "Reset chart",
+    chartSettingsMore: "Chart settings\u2026",
     redo: "Redo",
     compare: "Compare",
     compareSymbol: "Add symbol to compare",
@@ -815,14 +821,6 @@ var LinkIcon = () => /* @__PURE__ */ a3(Icon, { children: [
 ] });
 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" })
@@ -2043,7 +2041,6 @@ 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",
@@ -2117,8 +2114,6 @@ 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",
@@ -2151,7 +2146,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 +2319,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 +2528,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,7 +3332,6 @@ 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; }
 }
@@ -3369,6 +3445,13 @@ 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 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 +3524,7 @@ 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-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; }
@@ -3809,6 +3892,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 +3967,7 @@ function createTradingChart(container, options) {
     chartType = "candles",
     attribution = true,
     colorScheme = "system",
+    contextMenuItems,
     theme,
     ...chartOptions
   } = options;
@@ -3905,7 +3990,8 @@ function createTradingChart(container, options) {
     searchCategories,
     symbolLogo,
     drawingToolbar,
-    attribution
+    attribution,
+    contextMenuItems
   });
   shell.main.insertBefore(pane.stage, shell.slots.bottom);
   shell.setPanes(() => [pane]);
@@ -3976,6 +4062,7 @@ function createMultiChart(container, options) {
     chartType = "candles",
     attribution = true,
     colorScheme = "system",
+    contextMenuItems,
     theme,
     ...chartOptions
   } = options;
@@ -4041,6 +4128,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.1",
   "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.1"
   },
   "devDependencies": {
     "preact": "^11.2.0"