@funnest/charts-ui 0.6.15 → 0.6.17

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);
@@ -1821,6 +1830,8 @@ var DEBOUNCE_MS = 150;
 var RECENT_KEY2 = "recent-symbols";
 var FAVORITE_KEY = "favorite-symbols";
 var MAX_RECENT = 8;
+var FIRST_ROWS = 40;
+var MORE_ROWS = 80;
 var displayCode = (symbol) => symbol.slice(symbol.lastIndexOf(":") + 1);
 var toStored = (info) => JSON.parse(JSON.stringify({ ...info, tickSize: 0, price: void 0, changePercent: void 0, sparkline: void 0 }));
 function Highlight({ text, query }) {
@@ -1885,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" });
@@ -1896,8 +1907,10 @@ function SymbolSearch({ ctx }) {
   const [recent, setRecent] = d2(() => ctx.storage.get(RECENT_KEY2, []));
   const [favorites, setFavorites] = d2(() => ctx.storage.get(FAVORITE_KEY, []));
   const [active, setActive] = d2(0);
+  const [limit, setLimit] = d2(FIRST_ROWS);
   const inputRef = T2(null);
   const listRef = T2(null);
+  const endRef = T2(null);
   A2(() => inputRef.current?.focus(), []);
   A2(() => {
     let alive = true;
@@ -1923,7 +1936,8 @@ function SymbolSearch({ ctx }) {
   }, [query]);
   const matchCategory = ctx.searchCategories.find((c3) => c3.id === category)?.match ?? (() => true);
   const categoryOf = (info) => ctx.searchCategories.find((c3) => c3.id !== "all" && c3.match(info));
-  const isFavorite = (info) => favorites.some((f4) => f4.symbol === info.symbol);
+  const favoriteSet = w2(() => new Set(favorites.map((f4) => f4.symbol)), [favorites]);
+  const isFavorite = (info) => favoriteSet.has(info.symbol);
   const filter = (list) => list.filter((i3) => matchCategory(i3) && (!exchange || i3.exchange === exchange));
   const exchanges = w2(() => {
     const counts = /* @__PURE__ */ new Map();
@@ -1954,11 +1968,36 @@ function SymbolSearch({ ctx }) {
     }
   }
   const rows = [...recentRows, ...resultRows];
+  const shownRows = resultRows.length > limit ? resultRows.slice(0, limit) : resultRows;
   const exchangeLabel = (name) => ctx.searchExchanges.find((e3) => e3.name === name)?.label?.[locale] ?? name;
   A2(() => setActive(0), [query, category, exchange, view, results]);
   A2(() => {
-    listRef.current?.querySelector(`[data-index="${active}"]`)?.scrollIntoView({ block: "nearest" });
+    setLimit(FIRST_ROWS);
+    if (listRef.current) listRef.current.scrollTop = 0;
+  }, [query, category, exchange, view]);
+  const hasMore = resultRows.length > limit;
+  A2(() => {
+    const end = endRef.current;
+    if (!hasMore || !end) return;
+    const io = new IntersectionObserver((entries) => entries.some((e3) => e3.isIntersecting) && setLimit((l3) => l3 + MORE_ROWS), {
+      root: listRef.current,
+      rootMargin: "0px 0px 600px 0px"
+    });
+    io.observe(end);
+    return () => io.disconnect();
+  }, [hasMore, limit]);
+  const scrollToActive = T2(false);
+  A2(() => {
+    if (active - recentRows.length >= limit - 1) {
+      scrollToActive.current = true;
+      setLimit(active - recentRows.length + MORE_ROWS);
+    } else listRef.current?.querySelector(`[data-index="${active}"]`)?.scrollIntoView({ block: "nearest" });
   }, [active]);
+  A2(() => {
+    if (!scrollToActive.current) return;
+    scrollToActive.current = false;
+    listRef.current?.querySelector(`[data-index="${active}"]`)?.scrollIntoView({ block: "nearest" });
+  }, [limit]);
   const close = () => ctx.setSearchOpen(false);
   const save = (key, next, set) => {
     set(next);
@@ -2048,7 +2087,8 @@ function SymbolSearch({ ctx }) {
             }
           )
         ]
-      }
+      },
+      (isRecent ? "recent:" : "") + info.symbol
     );
   };
   const sideItem = (label, selected, onClick, extra, logoUrl) => /* @__PURE__ */ a3("button", { class: "fnc-sr-side-item", "aria-pressed": selected, onClick, children: [
@@ -2104,13 +2144,14 @@ function SymbolSearch({ ctx }) {
         ] }),
         recentRows.map((info, i3) => row2(info, i3, true)),
         (recentRows.length > 0 || view.kind === "favorites") && /* @__PURE__ */ a3("div", { class: "fnc-sr-section", children: view.kind === "favorites" ? t3.favorites : t3.symbols }),
-        loading && !results && view.kind === "all" ? Array.from({ length: 6 }, () => /* @__PURE__ */ a3("div", { class: "fnc-sr-skeleton", "aria-hidden": "true" })) : resultRows.map((info, i3) => {
+        loading && !results && view.kind === "all" ? Array.from({ length: 6 }, () => /* @__PURE__ */ a3("div", { class: "fnc-sr-skeleton", "aria-hidden": "true" })) : shownRows.map((info, i3) => {
           const m3 = more.get(i3);
           return m3 ? /* @__PURE__ */ a3($, { children: [
             row2(info, recentRows.length + i3, false),
             /* @__PURE__ */ a3("button", { class: "fnc-sr-more", onClick: () => (setView({ kind: "all" }), setExchange(m3.exchange)), children: t3.showAllIn.replace("{exchange}", exchangeLabel(m3.exchange)).replace("{n}", m3.count.toLocaleString(locale === "ko" ? "ko-KR" : "en-US")) })
-          ] }) : row2(info, recentRows.length + i3, false);
+          ] }, info.symbol) : row2(info, recentRows.length + i3, false);
         }),
+        hasMore && /* @__PURE__ */ a3("div", { ref: endRef, class: "fnc-sr-end", "aria-hidden": "true" }),
         !loading && rows.length === 0 && /* @__PURE__ */ a3("div", { class: "fnc-empty", children: view.kind === "favorites" && favorites.length === 0 ? t3.noFavorites : t3.noResults })
       ] })
     ] }),
@@ -2234,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: [
@@ -2273,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);
@@ -2370,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(
@@ -2438,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";
@@ -2448,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]);
@@ -2527,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",
     {
@@ -2585,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);
@@ -2697,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;
@@ -2757,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(
@@ -2783,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;
@@ -2829,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) {
@@ -3255,6 +3296,7 @@ var CSS = (
 .fnc-sr-spark-slot { display: inline-flex; flex: none; width: 72px; height: 24px; }
 .fnc-sr-more { display: block; width: calc(100% - 16px); margin: 2px 8px 8px; padding: 8px 12px; border-radius: var(--fnc-radius); background: var(--fnc-surface); color: var(--fnc-text-2); font-size: 13px; font-weight: 600; text-align: left; }
 .fnc-sr-more:hover { color: var(--fnc-text); }
+.fnc-sr-end { height: 1px; }
 .fnc-sr-side-item:hover { background: var(--fnc-surface); }
 .fnc-sr-side-item[aria-pressed='true'] { background: var(--fnc-surface); font-weight: 700; }
 .fnc-chip-token {
@@ -4054,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 = () => {
@@ -4227,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,
@@ -4369,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,
@@ -4395,7 +4442,8 @@ function createTradingChart(container, options) {
     drawingToolbar,
     attribution,
     contextMenuItems,
-    onIndicatorsClick
+    onIndicatorsClick,
+    strings
   });
   shell.main.insertBefore(pane.stage, shell.slots.bottom);
   shell.setPanes(() => [pane]);
@@ -4411,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),
@@ -4430,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}`,
@@ -4471,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,
@@ -4776,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,
@@ -4824,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.15",
+  "version": "0.6.17",
   "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.15"
+    "@funnest/charts": "0.6.17"
   },
   "devDependencies": {
     "preact": "^11.2.0"