@funnest/charts-ui 0.6.24 → 0.6.25

package/dist/components/keep-in-view.d.ts

@@ -1,6 +1,7 @@
 /**
- * Nudges an open dropdown horizontally so it stays inside the widget and the viewport (its CSS
- * anchor may push it off-screen on phones; hosts often clip the widget with overflow: hidden).
+ * Keeps an open dropdown inside the widget and the viewport: nudged sideways (its CSS anchor may
+ * push it off-screen on phones), and no taller than the room below its top — scrolling inside
+ * instead (a short chart on a phone; hosts often clip the widget or put their own bars under it).
  * Attach the returned ref to the menu element.
  */
 export declare function useKeepInView<T extends HTMLElement>(open: boolean): import("preact").RefObject<T | null>;

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

@@ -3,7 +3,7 @@ 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.
+ * screenshot, the app's own rows (toolsMenuItems) and chart settings.
  */
 export declare function ToolsMenu({ ctx }: {
     ctx: WidgetContext;

package/dist/context.d.ts

@@ -55,6 +55,23 @@ export type ContextMenuItem = {
 export type ContextMenuItems = (target: ChartContextMenu & {
     chart: Chart;
 }) => ContextMenuItem[];
+/**
+ * A row an app adds to the 도구 (tools) menu, above 차트 설정 — e.g. its own display settings.
+ * `icon` is SVG markup (16×16, stroke="currentColor"), from the app itself.
+ */
+export interface ToolsMenuItem {
+    label: string;
+    icon?: string;
+    disabled?: boolean;
+    onSelect(chart: Chart): void;
+}
+/** The app's rows for the 도구 menu, asked each time it opens (for the pane's chart). */
+export type ToolsMenuItems = (chart: Chart) => ToolsMenuItem[];
+/**
+ * The legend's OHLC row: 'always', or 'crosshair' — only while the crosshair is on the chart (a
+ * phone's touch), shown over the chart then, so the candles don't move when it appears.
+ */
+export type LegendValues = 'always' | 'crosshair';
 export interface IntervalGroup {
     id: 'minutes' | 'hours' | 'days';
     intervals: Resolution[];
@@ -96,6 +113,8 @@ export interface WidgetContext {
     /** Show the Funnest logo badge on the chart. */
     attribution: boolean;
     contextMenuItems: ContextMenuItems | undefined;
+    toolsMenuItems: ToolsMenuItems | undefined;
+    legendValues: LegendValues;
     /** The app's own indicator browser for the 지표 button (instead of the built-in picker). */
     onIndicatorsClick: ((chart: Chart) => void) | undefined;
     slots: {

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 { ContextMenuItem, ContextMenuItems, IntervalGroup, LayoutSync, SearchCategory, SearchExchange } from './context';
+export type { ContextMenuItem, ContextMenuItems, IntervalGroup, LayoutSync, LegendValues, SearchCategory, SearchExchange, ToolsMenuItem, ToolsMenuItems } from './context';
 export type { ColorScheme, TradingChart, TradingChartOptions, TradingChartSlots } from './trading-chart';
 export { resolutionLabel, STRINGS, stringsOf, type Strings } from './i18n';

package/dist/index.js

@@ -1002,6 +1002,21 @@ function DrawingToolbar({ ctx }) {
   const s3 = useStore(ctx.store);
   const t3 = stringsOf(s3);
   const [openGroup, setOpenGroup] = d2(null);
+  const barRef = T2(null);
+  F2(() => {
+    const el = barRef.current;
+    if (!el) return;
+    const fit = () => {
+      el.removeAttribute("data-fit");
+      if (el.scrollHeight <= el.clientHeight) return;
+      el.dataset.fit = "compact";
+      if (el.scrollHeight > el.clientHeight) el.dataset.fit = "scroll";
+    };
+    fit();
+    const ro = new ResizeObserver(fit);
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, []);
   const groups = toolGroups(ctx.chart.drawingDefinitions());
   const pick = (tool) => {
     ctx.chart.setDrawingTool(tool);
@@ -1012,6 +1027,7 @@ function DrawingToolbar({ ctx }) {
     /* @__PURE__ */ a3(
       "div",
       {
+        ref: barRef,
         class: "fnc-drawbar",
         role: "toolbar",
         "aria-label": t3.drawingTools,
@@ -1672,8 +1688,14 @@ function useKeepInView(open) {
     el.style.translate = "";
     const fit = () => {
       el.style.translate = "";
+      el.style.maxHeight = "";
       const r3 = el.getBoundingClientRect();
       const root = el.closest(".fnc-root")?.getBoundingClientRect();
+      const maxY = Math.min(document.documentElement.clientHeight, root?.bottom ?? Infinity) - MARGIN;
+      if (r3.bottom > maxY) {
+        el.style.maxHeight = `${Math.max(120, Math.floor(maxY - r3.top))}px`;
+        el.style.overflowY = "auto";
+      }
       const minX = Math.max(0, root?.left ?? 0) + MARGIN;
       const maxX = Math.min(document.documentElement.clientWidth, root?.right ?? Infinity) - MARGIN;
       let dx = 0;
@@ -2395,6 +2417,16 @@ function ToolsMenu({ ctx }) {
       /* @__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" }),
+      (ctx.toolsMenuItems?.(ctx.chart) ?? []).map(
+        (extra) => item(
+          "fnc-tools-app",
+          extra.label,
+          // The app's own SVG markup (it's the app's string, not user input).
+          /* @__PURE__ */ a3("span", { class: "fnc-tools-icon", "aria-hidden": "true", dangerouslySetInnerHTML: { __html: extra.icon ?? "" } }),
+          () => extra.onSelect(ctx.chart),
+          { disabled: extra.disabled ?? false }
+        )
+      ),
       item("fnc-btn-settings", t3.chartSettingsMore, /* @__PURE__ */ a3(SettingsIcon, {}), () => ctx.store.set({ dialog: { kind: "chartSettings" } }))
     ] })
   ] });
@@ -2679,7 +2711,10 @@ function Legend({ ctx }) {
   A2(() => {
     const el = ref.current;
     if (!el) return;
-    const update = () => ctx.chart.setTopInset(el.offsetTop + el.offsetHeight + 4);
+    const update = () => {
+      const floating = ctx.legendValues === "crosshair" ? el.querySelector(".fnc-legend-values") : null;
+      ctx.chart.setTopInset(el.offsetTop + el.offsetHeight - (floating ? floating.offsetHeight + 2 : 0) + 4);
+    };
     const ro = new ResizeObserver(update);
     ro.observe(el);
     return () => ro.disconnect();
@@ -2690,12 +2725,12 @@ function Legend({ ctx }) {
   const prev = hover ? hover.prev : bars[bars.length - 2];
   const fmt = (p3) => formatPrice3(p3, s3.symbol.pricePrecision);
   let values = null;
-  if (bar) {
+  if (bar && (ctx.legendValues === "always" || hover)) {
     const cls = dirClass(bar.close - bar.open);
     const change = prev ? bar.close - prev.close : 0;
     const pct = prev && prev.close ? change / prev.close * 100 : 0;
     const sign = change > 0 ? "+" : "";
-    values = /* @__PURE__ */ a3("div", { class: "fnc-legend-values", children: [
+    values = /* @__PURE__ */ a3("div", { class: ctx.legendValues === "crosshair" ? "fnc-legend-values fnc-legend-values-float" : "fnc-legend-values", children: [
       /* @__PURE__ */ a3("span", { children: [
         t3.open,
         " ",
@@ -3102,7 +3137,13 @@ var CSS = (
   border-right: 1px solid var(--fnc-border);
   background: var(--fnc-bg);
 }
-.fnc-hsep { width: 20px; height: 1px; background: var(--fnc-border); margin: 4px 0; }
+.fnc-hsep { width: 20px; height: 1px; background: var(--fnc-border); margin: 4px 0; flex: none; }
+/* Too short for every tool (DrawingToolbar sets data-fit): closer buttons, then scrolling. */
+.fnc-drawbar[data-fit] { gap: 2px; padding: 4px 0; }
+.fnc-drawbar[data-fit] .fnc-btn { width: 32px; height: 32px; }
+.fnc-drawbar[data-fit] .fnc-hsep { margin: 2px 0; }
+.fnc-drawbar[data-fit='scroll'] { overflow-y: auto; scrollbar-width: none; }
+.fnc-drawbar[data-fit='scroll']::-webkit-scrollbar { display: none; }
 
 /* Selected drawing: floating color/delete bar */
 .fnc-selbar {
@@ -3160,6 +3201,14 @@ var CSS = (
 .fnc-legend-title b { color: var(--fnc-text); font-weight: 700; }
 .fnc-legend-values { display: flex; flex-wrap: wrap; gap: 0 10px; }
 .fnc-legend-values b { font-weight: 600; }
+/* legendValues: 'crosshair' \u2014 over the chart while it shows, so it gets a backing. */
+.fnc-legend-values-float {
+  width: fit-content;
+  margin-left: -4px;
+  padding: 0 4px;
+  border-radius: 6px;
+  background: color-mix(in srgb, var(--fnc-bg) 88%, transparent);
+}
 /* Indicator legend rows */
 .fnc-ind {
   display: flex;
@@ -3854,6 +3903,8 @@ var CSS = (
 .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-icon { display: inline-flex; width: 20px; height: 20px; flex: none; }
+.fnc-tools-icon svg { width: 100%; height: 100%; }
 .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); }
 
@@ -4370,6 +4421,8 @@ function createPane(shell, config) {
     drawingToolbar: config.drawingToolbar,
     attribution: config.attribution,
     contextMenuItems: config.contextMenuItems,
+    toolsMenuItems: config.toolsMenuItems,
+    legendValues: config.legendValues ?? "always",
     onIndicatorsClick: config.onIndicatorsClick,
     slots: shell.slots,
     multi: config.multi,
@@ -4448,6 +4501,8 @@ function createTradingChart(container, options) {
     attribution = true,
     colorScheme = "system",
     contextMenuItems,
+    toolsMenuItems,
+    legendValues,
     onIndicatorsClick,
     theme,
     strings,
@@ -4480,6 +4535,8 @@ function createTradingChart(container, options) {
     drawingToolbar,
     attribution,
     contextMenuItems,
+    toolsMenuItems,
+    legendValues,
     onIndicatorsClick,
     strings
   });
@@ -4555,6 +4612,8 @@ function createMultiChart(container, options) {
     attribution = true,
     colorScheme = "system",
     contextMenuItems,
+    toolsMenuItems,
+    legendValues,
     onIndicatorsClick,
     theme,
     strings,
@@ -4629,6 +4688,8 @@ function createMultiChart(container, options) {
       // One badge for the whole widget, not one per pane.
       attribution: attribution && index === 0,
       contextMenuItems,
+      toolsMenuItems,
+      legendValues,
       onIndicatorsClick,
       multi: controls
     });

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 { ContextMenuItems, IntervalGroup, MultiControls, SearchCategory, SearchExchange, UiState, WidgetContext } from './context';
+import type { ContextMenuItems, IntervalGroup, LegendValues, MultiControls, SearchCategory, SearchExchange, ToolsMenuItems, UiState, WidgetContext } from './context';
 import { type Shell } from './shell';
 import type { Strings } from './i18n';
 import { Store } from './store';
@@ -20,6 +20,8 @@ export interface PaneConfig {
     /** Ctrl/⌘+K opens this widget's symbol search (its footer shows the hint only then). */
     searchHotkey: boolean;
     contextMenuItems?: ContextMenuItems | undefined;
+    toolsMenuItems?: ToolsMenuItems | undefined;
+    legendValues?: LegendValues | undefined;
     onIndicatorsClick?: ((chart: Chart) => void) | undefined;
     multi?: MultiControls | undefined;
     strings?: Partial<Strings> | undefined;

package/dist/trading-chart.d.ts

@@ -1,6 +1,6 @@
 /** @jsxImportSource preact */
 import { type Chart, type ChartOptions, type ChartType, type Datafeed, type DirectionPreset, type Locale, type ChartState, type Resolution, type ThemeTokens } from '@funnest/charts';
-import type { ContextMenuItems, IntervalGroup, SearchCategory, SearchExchange } from './context';
+import type { ContextMenuItems, IntervalGroup, LegendValues, SearchCategory, SearchExchange, ToolsMenuItems } from './context';
 import type { Strings } from './i18n';
 import { type ColorScheme, type TradingChartSlots } from './shell';
 export type { ColorScheme, TradingChartSlots } from './shell';
@@ -58,6 +58,16 @@ export interface TradingChartOptions extends Omit<ChartOptions, 'datafeed'> {
      * e.g. "이 가격에 알림 만들기". Called on every right-click with the price and time under the pointer.
      */
     contextMenuItems?: ContextMenuItems;
+    /**
+     * Extra rows for the 도구 (tools) menu, above 차트 설정 — e.g. the app's own display settings.
+     * Called each time the menu opens, with the pane's chart.
+     */
+    toolsMenuItems?: ToolsMenuItems;
+    /**
+     * The legend's OHLC row: 'always' (default), or 'crosshair' — only while the crosshair is on the
+     * chart, over the chart then (good for phones, where the legend takes up much of the screen).
+     */
+    legendValues?: LegendValues;
     /**
      * The toolbar's 지표 button opens this instead of the built-in indicator picker (an app's own
      * indicator browser). Called with the pane's chart; add indicators with chart.addIndicator().

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@funnest/charts-ui",
-  "version": "0.6.24",
+  "version": "0.6.25",
   "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.24"
+    "@funnest/charts": "0.6.25"
   },
   "devDependencies": {
     "preact": "^11.2.0"