@funnest/charts-ui 0.6.16 → 0.6.18

package/dist/context.d.ts

@@ -1,9 +1,12 @@
 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 { Strings } from './i18n';
 import type { Store } from './store';
 export interface UiState {
     locale: Locale;
+    /** The app's replacements for built-in words (TradingChartOptions.strings). */
+    strings?: Partial<Strings> | undefined;
     symbol: SymbolInfo | null;
     resolution: Resolution;
     loading: boolean;

package/dist/i18n.d.ts

@@ -292,6 +292,14 @@ export declare const STRINGS: {
     };
 };
 export type Strings = (typeof STRINGS)['ko'];
+/**
+ * The widget's words: the built-in ones for its locale with the app's `strings` on top (a few
+ * replaced, or every one for a language of your own).
+ */
+export declare function stringsOf(s: {
+    locale: Locale;
+    strings?: Partial<Strings> | undefined;
+}): Strings;
 /**
  * '1' → 1분, '60' → 1시간, '1D' → 일 (short) / 1일 (long), '12M' → 1년.
  * Short labels are for the toolbar chips, long ones for the interval menu.

package/dist/index.d.ts

@@ -10,4 +10,4 @@ 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 { ColorScheme, TradingChart, TradingChartOptions, TradingChartSlots } from './trading-chart';
-export { resolutionLabel } from './i18n';
+export { resolutionLabel, STRINGS, stringsOf, type Strings } from './i18n';

package/dist/index.js

@@ -1,5 +1,7 @@
 // src/trading-chart.tsx
-import "@funnest/charts";
+import {
+  browserLocale as browserLocale2
+} from "@funnest/charts";
 
 // ../../node_modules/.pnpm/preact@11.2.0/node_modules/preact/dist/preact.mjs
 var n;
@@ -716,6 +718,13 @@ var STRINGS = {
     pane: "Pane"
   }
 };
+var merged = /* @__PURE__ */ new WeakMap();
+function stringsOf(s3) {
+  if (!s3.strings) return STRINGS[s3.locale];
+  let byLocale = merged.get(s3.strings);
+  if (!byLocale) merged.set(s3.strings, byLocale = {});
+  return byLocale[s3.locale] ??= { ...STRINGS[s3.locale], ...s3.strings };
+}
 function resolutionLabel(resolution, locale, form = "short") {
   const match = /^(\d*)([SDWM]?)$/i.exec(resolution.trim());
   if (!match) return resolution;
@@ -965,7 +974,7 @@ function ToolGroup({
   onPick
 }) {
   const s3 = useStore(ctx.store);
-  const t3 = STRINGS[s3.locale];
+  const t3 = stringsOf(s3);
   const [chosen, setChosen] = d2(tools[0].type);
   const armed = tools.find((d3) => d3.type === s3.drawingTool);
   const current = armed ?? tools.find((d3) => d3.type === chosen) ?? tools[0];
@@ -1008,7 +1017,7 @@ function ToolGroup({
 }
 function DrawingToolbar({ ctx }) {
   const s3 = useStore(ctx.store);
-  const t3 = STRINGS[s3.locale];
+  const t3 = stringsOf(s3);
   const [openGroup, setOpenGroup] = d2(null);
   const groups = toolGroups(ctx.chart.drawingDefinitions());
   const pick = (tool) => {
@@ -1103,7 +1112,7 @@ function DashGlyph({ dash }) {
 }
 function SelectionBar({ ctx }) {
   const s3 = useStore(ctx.store);
-  const t3 = STRINGS[s3.locale];
+  const t3 = stringsOf(s3);
   const d3 = s3.selection;
   const [offset, setOffset] = d2(() => readJson(POS_KEY, [0, 0]));
   const [recent, setRecent] = d2(() => readJson(RECENT_KEY, []));
@@ -1313,7 +1322,7 @@ var SCALES = [
 ];
 function SettingsDialog({ ctx }) {
   const { locale } = useStore(ctx.store);
-  const t3 = STRINGS[locale];
+  const t3 = stringsOf(ctx.store.get());
   const [settings, setSettings] = d2(ctx.chart.settings);
   A2(() => ctx.chart.on("settingsChange", setSettings), [ctx.chart]);
   const close = () => ctx.store.set({ dialog: null });
@@ -1432,7 +1441,7 @@ function Dialog({ title, onClose, children, wide }) {
 var SEARCH_THRESHOLD = 8;
 function IndicatorPicker({ ctx }) {
   const { locale } = useStore(ctx.store);
-  const t3 = STRINGS[locale];
+  const t3 = stringsOf(ctx.store.get());
   const [query, setQuery] = d2("");
   const close = () => ctx.store.set({ dialog: null });
   const add = (type) => {
@@ -1515,7 +1524,7 @@ function SourceSelect({ value, locale, label, onChange }) {
 }
 function IndicatorSettings({ ctx, id }) {
   const { locale, indicators } = useStore(ctx.store);
-  const t3 = STRINGS[locale];
+  const t3 = stringsOf(ctx.store.get());
   const config = indicators.find((c3) => c3.id === id);
   const def = config ? ctx.chart.indicatorDefinition(config.type) ?? null : null;
   const hasLines = !!def?.params.some((p3) => p3.kind === "lines");
@@ -1695,7 +1704,7 @@ var GROUP_LABEL = {
 };
 function IntervalPicker({ ctx }) {
   const s3 = useStore(ctx.store);
-  const t3 = STRINGS[s3.locale];
+  const t3 = stringsOf(s3);
   const [open, setOpen] = d2(false);
   const ref = T2(null);
   const menuRef = useKeepInView(open);
@@ -1887,7 +1896,7 @@ function Sparkline({ values, up }) {
 function SymbolSearch({ ctx }) {
   const { locale, symbol: current, searchTarget } = useStore(ctx.store);
   const comparing = searchTarget === "compare";
-  const t3 = STRINGS[locale];
+  const t3 = stringsOf(ctx.store.get());
   const [query, setQuery] = d2("");
   const [category, setCategory] = d2(ctx.searchCategories[0]?.id ?? "all");
   const [view, setView] = d2({ kind: "all" });
@@ -2266,7 +2275,7 @@ var SYNC_KEYS = [
 function LayoutSection({ ctx, multi, close }) {
   const s3 = useStore(ctx.store);
   const m3 = useStore(multi.store);
-  const t3 = STRINGS[s3.locale];
+  const t3 = stringsOf(s3);
   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: [
@@ -2305,7 +2314,7 @@ function LayoutSection({ ctx, multi, close }) {
 }
 function ToolsMenu({ ctx }) {
   const s3 = useStore(ctx.store);
-  const t3 = STRINGS[s3.locale];
+  const t3 = stringsOf(s3);
   const [open, setOpen] = d2(false);
   const [scale, setScale] = d2(ctx.chart.settings.priceScale);
   const ref = T2(null);
@@ -2402,7 +2411,7 @@ function ToolsMenu({ ctx }) {
 // src/components/toolbar.tsx
 function Toolbar({ ctx }) {
   const s3 = useStore(ctx.store);
-  const t3 = STRINGS[s3.locale];
+  const t3 = stringsOf(s3);
   const canSearch = typeof ctx.datafeed.searchSymbols === "function";
   return /* @__PURE__ */ a3("div", { class: "fnc-toolbar", role: "toolbar", children: [
     /* @__PURE__ */ a3(
@@ -2470,7 +2479,7 @@ function Toolbar({ ctx }) {
 }
 
 // src/pane.tsx
-import { createChart } from "@funnest/charts";
+import { browserLocale, createChart } from "@funnest/charts";
 
 // src/components/overlay.tsx
 import { formatCompact, formatPrice as formatPrice3 } from "@funnest/charts";
@@ -2480,7 +2489,7 @@ import { formatPrice as formatPrice2 } from "@funnest/charts";
 var MARGIN2 = 8;
 function ContextMenu({ ctx }) {
   const s3 = useStore(ctx.store);
-  const t3 = STRINGS[s3.locale];
+  const t3 = stringsOf(s3);
   const [target, setTarget] = d2(null);
   const ref = T2(null);
   A2(() => ctx.chart.on("contextMenu", setTarget), [ctx.chart]);
@@ -2559,7 +2568,7 @@ var ZOOM_STEP = 1.25;
 var CONTROL_OFFSET = 52;
 var dirClass = (v3) => v3 > 0 ? "fnc-up" : v3 < 0 ? "fnc-down" : "fnc-flat";
 function IndicatorItem({ ctx, item }) {
-  const t3 = STRINGS[ctx.store.get().locale];
+  const t3 = stringsOf(ctx.store.get());
   return /* @__PURE__ */ a3(
     "div",
     {
@@ -2617,7 +2626,7 @@ function IndicatorItem({ ctx, item }) {
 }
 function Legend({ ctx }) {
   const s3 = useStore(ctx.store);
-  const t3 = STRINGS[s3.locale];
+  const t3 = stringsOf(s3);
   const [hover, setHover] = d2(null);
   const [, refresh] = _2((n2) => n2 + 1, 0);
   const [collapsed, setCollapsed] = d2(false);
@@ -2729,7 +2738,7 @@ function Legend({ ctx }) {
 }
 function NavControls({ ctx }) {
   const s3 = useStore(ctx.store);
-  const t3 = STRINGS[s3.locale];
+  const t3 = stringsOf(s3);
   const [showButtons, setShowButtons] = d2(ctx.chart.settings.navigationButtons);
   A2(() => ctx.chart.on("settingsChange", (settings) => setShowButtons(settings.navigationButtons)), [ctx.chart]);
   const { plotWidth, panesHeight } = s3.layout;
@@ -2789,7 +2798,7 @@ function PaneMaximize({ ctx, multi }) {
   const s3 = useStore(ctx.store);
   const m3 = useStore(multi.store);
   if (s3.layout.plotWidth <= 0 || m3.narrow || m3.layout === "1" && m3.maximized === null) return null;
-  const t3 = STRINGS[s3.locale];
+  const t3 = stringsOf(s3);
   const maximized = m3.maximized !== null;
   const label = maximized ? t3.restorePane : t3.maximizePane;
   return /* @__PURE__ */ a3(
@@ -2815,7 +2824,7 @@ var REPLAY_SPEEDS = [
 ];
 function ReplayBar({ ctx }) {
   const s3 = useStore(ctx.store);
-  const t3 = STRINGS[s3.locale];
+  const t3 = stringsOf(s3);
   const r3 = s3.replay;
   const { plotWidth, panesHeight } = s3.layout;
   if (plotWidth <= 0 || !r3.active && !r3.selecting) return null;
@@ -2861,7 +2870,7 @@ function Overlay({ ctx }) {
 }
 
 // src/shell.ts
-import { darkTheme, lightTheme } from "@funnest/charts";
+import { darkTheme, directionColors, lightTheme } from "@funnest/charts";
 
 // src/storage.ts
 function createStorage(prefix) {
@@ -4087,7 +4096,7 @@ function createShell(container, options) {
   let themePatch = { ...options.theme };
   let panes = () => [];
   const isDark = () => scheme === "system" ? !!darkQuery?.matches : scheme === "dark";
-  const resolveTheme = () => ({ ...isDark() ? darkTheme : lightTheme, ...themePatch });
+  const resolveTheme = () => ({ ...isDark() ? darkTheme : lightTheme, ...directionColors(options.direction), ...themePatch });
   let theme = resolveTheme();
   const root = div("fnc-root", container);
   const applyScheme = () => {
@@ -4260,7 +4269,8 @@ function createPane(shell, config) {
   canvasVars(chart.settings);
   chart.on("settingsChange", canvasVars);
   const store = new Store({
-    locale: config.chartOptions.locale ?? "ko",
+    locale: config.chartOptions.locale ?? browserLocale(),
+    strings: config.strings,
     symbol: null,
     resolution: config.resolution,
     loading: false,
@@ -4402,12 +4412,16 @@ function createTradingChart(container, options) {
     contextMenuItems,
     onIndicatorsClick,
     theme,
+    strings,
+    direction,
     ...chartOptions
   } = options;
-  const displayTimezone = defaultDisplayTimezone(chartOptions.locale ?? "ko", chartOptions.displayTimezone);
+  const locale = chartOptions.locale ??= browserLocale2();
+  const displayTimezone = defaultDisplayTimezone(locale, chartOptions.displayTimezone);
   const shell = createShell(container, {
     colorScheme,
     theme,
+    direction: direction ?? (locale === "ko" ? "kr" : "global"),
     storageKey,
     drawingToolbar,
     favoriteIntervals: favoriteIntervals ?? DEFAULT_FAVORITE_INTERVALS,
@@ -4428,7 +4442,8 @@ function createTradingChart(container, options) {
     drawingToolbar,
     attribution,
     contextMenuItems,
-    onIndicatorsClick
+    onIndicatorsClick,
+    strings
   });
   shell.main.insertBefore(pane.stage, shell.slots.bottom);
   shell.setPanes(() => [pane]);
@@ -4444,9 +4459,9 @@ function createTradingChart(container, options) {
       const current = pane.store.get().symbol;
       return current ? pane.load(current.symbol, res) : Promise.resolve();
     },
-    setLocale: (locale) => {
-      pane.chart.setLocale(locale);
-      pane.store.set({ locale });
+    setLocale: (locale2) => {
+      pane.chart.setLocale(locale2);
+      pane.store.set({ locale: locale2 });
     },
     save: () => pane.chart.save(),
     load: (state) => pane.chart.load(state),
@@ -4463,11 +4478,11 @@ function createTradingChart(container, options) {
 }
 
 // src/multi-chart.tsx
-import { parseChartState } from "@funnest/charts";
+import { browserLocale as browserLocale3, parseChartState } from "@funnest/charts";
 var DEFAULT_SYNC = { crosshair: true, time: false, symbol: false, interval: false };
 function PaneTab({ pane, index, active, onSelect }) {
   const s3 = useStore(pane.store);
-  const t3 = STRINGS[s3.locale];
+  const t3 = stringsOf(s3);
   return /* @__PURE__ */ a3("button", { class: "fnc-pane-tab", role: "tab", "aria-selected": active, onClick: onSelect, children: [
     /* @__PURE__ */ a3("span", { class: "fnc-pane-tab-num", children: index + 1 }),
     s3.symbol?.name ?? `${t3.pane} ${index + 1}`,
@@ -4504,13 +4519,17 @@ function createMultiChart(container, options) {
     contextMenuItems,
     onIndicatorsClick,
     theme,
+    strings,
+    direction,
     ...chartOptions
   } = options;
   if (paneSpecs.length === 0) throw new Error("funnest-charts: createMultiChart needs at least one pane");
-  const displayTimezone = defaultDisplayTimezone(chartOptions.locale ?? "ko", chartOptions.displayTimezone);
+  const locale = chartOptions.locale ??= browserLocale3();
+  const displayTimezone = defaultDisplayTimezone(locale, chartOptions.displayTimezone);
   const shell = createShell(container, {
     colorScheme,
     theme,
+    direction: direction ?? (locale === "ko" ? "kr" : "global"),
     storageKey,
     drawingToolbar,
     favoriteIntervals: favoriteIntervals ?? DEFAULT_FAVORITE_INTERVALS,
@@ -4809,10 +4828,10 @@ function createMultiChart(container, options) {
       const current = pane.store.get().symbol;
       return current ? pane.load(current.symbol, res) : Promise.resolve();
     },
-    setLocale: (locale) => {
+    setLocale: (locale2) => {
       for (const p3 of panes) {
-        p3.chart.setLocale(locale);
-        p3.store.set({ locale });
+        p3.chart.setLocale(locale2);
+        p3.store.set({ locale: locale2 });
       }
     },
     setTheme: shell.setTheme,
@@ -4857,8 +4876,10 @@ export {
   LAYOUTS,
   LAYOUT_GROUPS,
   MAX_PANES,
+  STRINGS,
   createMultiChart,
   createTradingChart,
   paneCount,
-  resolutionLabel
+  resolutionLabel,
+  stringsOf
 };

package/dist/pane.d.ts

@@ -2,6 +2,7 @@
 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 Shell } from './shell';
+import type { Strings } from './i18n';
 import { Store } from './store';
 export interface PaneConfig {
     datafeed: Datafeed;
@@ -21,6 +22,7 @@ export interface PaneConfig {
     contextMenuItems?: ContextMenuItems | undefined;
     onIndicatorsClick?: ((chart: Chart) => void) | undefined;
     multi?: MultiControls | undefined;
+    strings?: Partial<Strings> | undefined;
 }
 /**
  * One chart with its legend/navigation overlay and UI state. The toolbar and drawing bar

package/dist/shell.d.ts

@@ -1,4 +1,4 @@
-import { type Resolution, type ThemeTokens } from '@funnest/charts';
+import { type DirectionPreset, type Resolution, type ThemeTokens } from '@funnest/charts';
 import type { UiState } from './context';
 import { type WidgetStorage } from './storage';
 import type { Store } from './store';
@@ -35,6 +35,8 @@ export interface ShellPane {
 export interface ShellOptions {
     colorScheme: ColorScheme;
     theme: Partial<ThemeTokens> | undefined;
+    /** Up/down colors under `theme` (TradingChartOptions.direction, resolved from the locale). */
+    direction: DirectionPreset;
     storageKey: string | null;
     drawingToolbar: boolean;
     favoriteIntervals: readonly Resolution[];

package/dist/trading-chart.d.ts

@@ -1,6 +1,7 @@
 /** @jsxImportSource preact */
-import { type Chart, type ChartOptions, type ChartType, type Datafeed, type Locale, type ChartState, type Resolution, type ThemeTokens } from '@funnest/charts';
+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 { Strings } from './i18n';
 import { type ColorScheme, type TradingChartSlots } from './shell';
 export type { ColorScheme, TradingChartSlots } from './shell';
 /** Interval menu: 분 | 시간 | 일. '12M' is shown as 1년. */
@@ -62,6 +63,21 @@ export interface TradingChartOptions extends Omit<ChartOptions, 'datafeed'> {
      * indicator browser). Called with the pane's chart; add indicators with chart.addIndicator().
      */
     onIndicatorsClick?: (chart: Chart) => void;
+    /**
+     * Language of the toolbar, menus and dates. Default: Korean when the browser is set to Korean,
+     * English otherwise.
+     */
+    locale?: Locale;
+    /**
+     * Replace built-in words: a few (`{ indicators: 'Studies' }`) or all of them for a language of
+     * your own (start from `STRINGS.en`). Applied over whichever locale is active.
+     */
+    strings?: Partial<Strings>;
+    /**
+     * Up/down colors: 'kr' red up · blue down, 'global' green up · red down. Default follows the
+     * locale ('kr' for Korean, 'global' otherwise). `theme.up` / `theme.down` still win.
+     */
+    direction?: DirectionPreset;
 }
 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.16",
+  "version": "0.6.18",
   "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.16"
+    "@funnest/charts": "0.6.18"
   },
   "devDependencies": {
     "preact": "^11.2.0"