@funnest/charts-ui 0.6.14 → 0.6.16

package/dist/context.d.ts

@@ -80,6 +80,8 @@ export interface WidgetContext {
     intervalGroups: readonly IntervalGroup[];
     searchCategories: readonly SearchCategory[];
     searchExchanges: readonly SearchExchange[];
+    /** Rows per exchange before a "모두 보기" (0: all). */
+    searchPreviewPerExchange: number;
     /** IANA zone used for the status-bar clock (KST for Korean users by default). */
     displayTimezone: string;
     showLogo: boolean;

package/dist/i18n.d.ts

@@ -124,6 +124,7 @@ export declare const STRINGS: {
         allSymbols: string;
         favorites: string;
         exchanges: string;
+        showAllIn: string;
         noFavorites: string;
         navigate: string;
         openAction: string;
@@ -268,6 +269,7 @@ export declare const STRINGS: {
         allSymbols: string;
         favorites: string;
         exchanges: string;
+        showAllIn: string;
         noFavorites: string;
         navigate: string;
         openAction: string;

package/dist/index.js

@@ -549,6 +549,7 @@ var STRINGS = {
     allSymbols: "\uC804\uCCB4",
     favorites: "\uC990\uACA8\uCC3E\uAE30",
     exchanges: "\uAC70\uB798\uC18C",
+    showAllIn: "{exchange} {n}\uAC1C \uBAA8\uB450 \uBCF4\uAE30 \u203A",
     noFavorites: "\uC990\uACA8\uCC3E\uAE30\uD55C \uC885\uBAA9\uC774 \uC5C6\uC5B4\uC694. \u2606\uB97C \uB20C\uB7EC \uCD94\uAC00\uD574 \uBCF4\uC138\uC694",
     navigate: "\uC774\uB3D9",
     openAction: "\uC5F4\uAE30",
@@ -693,6 +694,7 @@ var STRINGS = {
     allSymbols: "All",
     favorites: "Favorites",
     exchanges: "Exchanges",
+    showAllIn: "All {n} on {exchange} \u203A",
     noFavorites: "No favorites yet \u2014 tap \u2606 to add one",
     navigate: "navigate",
     openAction: "open",
@@ -1819,6 +1821,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 }) {
@@ -1894,8 +1898,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;
@@ -1921,7 +1927,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();
@@ -1934,12 +1941,54 @@ function SymbolSearch({ ctx }) {
   const favoriteRows = filter(favorites).filter((f4) => !q2 || f4.name.toLowerCase().includes(q2) || f4.symbol.toLowerCase().includes(q2));
   const showRecent = view.kind === "all" && !q2 && recent.length > 0;
   const recentRows = showRecent ? filter(recent) : [];
-  const resultRows = view.kind === "favorites" ? favoriteRows : filter(results ?? []);
+  const allResults = view.kind === "favorites" ? favoriteRows : filter(results ?? []);
+  const preview = ctx.searchPreviewPerExchange;
+  const more = /* @__PURE__ */ new Map();
+  let resultRows = allResults;
+  if (preview > 0 && view.kind === "all" && !exchange) {
+    const seen = /* @__PURE__ */ new Map();
+    const total = /* @__PURE__ */ new Map();
+    for (const r3 of allResults) total.set(r3.exchange, (total.get(r3.exchange) ?? 0) + 1);
+    resultRows = [];
+    for (const r3 of allResults) {
+      const n2 = (seen.get(r3.exchange) ?? 0) + 1;
+      seen.set(r3.exchange, n2);
+      if (n2 > preview) continue;
+      resultRows.push(r3);
+      if (n2 === preview && (total.get(r3.exchange) ?? 0) > preview) more.set(resultRows.length - 1, { exchange: r3.exchange, count: total.get(r3.exchange) });
+    }
+  }
   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);
@@ -2029,7 +2078,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: [
@@ -2085,7 +2135,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) => row2(info, recentRows.length + i3, false)),
+        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")) })
+          ] }, 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 })
       ] })
     ] }),
@@ -3228,6 +3285,9 @@ var CSS = (
 .fnc-sr-side-item em { font-style: normal; font-size: 12px; color: var(--fnc-text-2); }
 .fnc-sr-side-logo { flex: none; width: 18px; height: 18px; border-radius: 5px; object-fit: cover; background: var(--fnc-surface); }
 .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 {
@@ -4255,6 +4315,7 @@ function createPane(shell, config) {
     intervalGroups: config.intervalGroups,
     searchCategories: config.searchCategories,
     searchExchanges: config.searchExchanges ?? [],
+    searchPreviewPerExchange: config.searchPreviewPerExchange ?? 0,
     displayTimezone: config.displayTimezone,
     showLogo: config.symbolLogo,
     searchHotkey: config.searchHotkey,
@@ -4330,6 +4391,7 @@ function createTradingChart(container, options) {
     onFavoriteIntervalsChange,
     searchCategories = DEFAULT_SEARCH_CATEGORIES,
     searchExchanges = [],
+    searchPreviewPerExchange = 0,
     storageKey = "funnest-charts",
     searchHotkey = true,
     symbolLogo = true,
@@ -4360,6 +4422,7 @@ function createTradingChart(container, options) {
     intervalGroups,
     searchCategories,
     searchExchanges,
+    searchPreviewPerExchange,
     symbolLogo,
     searchHotkey,
     drawingToolbar,
@@ -4430,6 +4493,7 @@ function createMultiChart(container, options) {
     onFavoriteIntervalsChange,
     searchCategories = DEFAULT_SEARCH_CATEGORIES,
     searchExchanges = [],
+    searchPreviewPerExchange = 0,
     storageKey = "funnest-charts",
     searchHotkey = true,
     symbolLogo = true,
@@ -4501,6 +4565,7 @@ function createMultiChart(container, options) {
       intervalGroups,
       searchCategories,
       searchExchanges,
+      searchPreviewPerExchange,
       symbolLogo,
       searchHotkey,
       drawingToolbar,

package/dist/pane.d.ts

@@ -12,6 +12,7 @@ export interface PaneConfig {
     intervalGroups: readonly IntervalGroup[];
     searchCategories: readonly SearchCategory[];
     searchExchanges?: readonly SearchExchange[];
+    searchPreviewPerExchange?: number;
     symbolLogo: boolean;
     drawingToolbar: boolean;
     attribution: boolean;

package/dist/trading-chart.d.ts

@@ -24,6 +24,11 @@ export interface TradingChartOptions extends Omit<ChartOptions, 'datafeed'> {
     searchCategories?: readonly SearchCategory[];
     /** Exchanges listed in the symbol search sidebar from the start, with logos (counts fill in as results come). */
     searchExchanges?: readonly SearchExchange[];
+    /**
+     * Symbol search: rows per exchange shown at first, each followed by "N개 모두 보기" when there
+     * are more (picking the exchange lists them all). Default 0: everything at once.
+     */
+    searchPreviewPerExchange?: number;
     /**
      * localStorage key prefix for UI preferences (favorite intervals, recent searches).
      * Default 'funnest-charts'. Pass null to keep them in memory only.

package/package.json

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