@funnest/charts-ui 0.6.9 → 0.6.11

package/dist/components/drawing-toolbar.d.ts

@@ -4,7 +4,11 @@ import type { WidgetContext } from '../context';
 export declare function DrawingToolbar({ ctx }: {
     ctx: WidgetContext;
 }): JSX.Element;
-/** Floating bar for the selected drawing: color + delete (also the only way to delete on touch). */
+/**
+ * Floating bar for the selected drawing: move it by its grip (remembered; double-click resets),
+ * color (swatches, a custom one, recent customs), line width and style, text for text tools,
+ * lock, duplicate, delete (also the only way to delete on touch).
+ */
 export declare function SelectionBar({ ctx }: {
     ctx: WidgetContext;
 }): JSX.Element | null;

package/dist/context.d.ts

@@ -79,6 +79,8 @@ export interface WidgetContext {
     /** Show the Funnest logo badge on the chart. */
     attribution: boolean;
     contextMenuItems: ContextMenuItems | undefined;
+    /** The app's own indicator browser for the 지표 button (instead of the built-in picker). */
+    onIndicatorsClick: ((chart: Chart) => void) | undefined;
     slots: {
         toolbar: HTMLElement;
         toolbarEnd: HTMLElement;

package/dist/i18n.d.ts

@@ -75,6 +75,18 @@ export declare const STRINGS: {
         magnet: string;
         remove: string;
         color: string;
+        customColor: string;
+        lineWidth: string;
+        lineStyle: string;
+        lineSolid: string;
+        lineDashed: string;
+        lineDotted: string;
+        drawingText: string;
+        textPlaceholder: string;
+        lock: string;
+        unlock: string;
+        duplicate: string;
+        moveBar: string;
         indicators: string;
         addIndicator: string;
         indicatorSettings: string;
@@ -91,7 +103,6 @@ export declare const STRINGS: {
         removePeriod: string;
         period: string;
         source: string;
-        lineWidth: string;
         inputs: string;
         style: string;
         intervalMinutes: string;
@@ -206,6 +217,18 @@ export declare const STRINGS: {
         magnet: string;
         remove: string;
         color: string;
+        customColor: string;
+        lineWidth: string;
+        lineStyle: string;
+        lineSolid: string;
+        lineDashed: string;
+        lineDotted: string;
+        drawingText: string;
+        textPlaceholder: string;
+        lock: string;
+        unlock: string;
+        duplicate: string;
+        moveBar: string;
         indicators: string;
         addIndicator: string;
         indicatorSettings: string;
@@ -222,7 +245,6 @@ export declare const STRINGS: {
         removePeriod: string;
         period: string;
         source: string;
-        lineWidth: string;
         inputs: string;
         style: string;
         intervalMinutes: string;

package/dist/icons.d.ts

@@ -55,3 +55,9 @@ export declare const SvgIcon: ({ markup }: {
 export declare const CornerIcon: () => import("preact").JSX.Element;
 /** Sliders: the 도구 menu. */
 export declare const ToolsIcon: () => import("preact").JSX.Element;
+export declare const GripIcon: () => import("preact").JSX.Element;
+export declare const LockIcon: ({ open }: {
+    open?: boolean;
+}) => import("preact").JSX.Element;
+export declare const CopyIcon: () => import("preact").JSX.Element;
+export declare const TextIcon: () => import("preact").JSX.Element;

package/dist/index.js

@@ -498,6 +498,18 @@ var STRINGS = {
     magnet: "\uC790\uC11D \uBAA8\uB4DC (\uC2DC\xB7\uACE0\xB7\uC800\xB7\uC885\uAC00\uC5D0 \uBD99\uC774\uAE30)",
     remove: "\uC0AD\uC81C",
     color: "\uC0C9\uC0C1",
+    customColor: "\uB2E4\uB978 \uC0C9",
+    lineWidth: "\uC120 \uAD75\uAE30",
+    lineStyle: "\uC120 \uBAA8\uC591",
+    lineSolid: "\uC2E4\uC120",
+    lineDashed: "\uD30C\uC120",
+    lineDotted: "\uC810\uC120",
+    drawingText: "\uD14D\uC2A4\uD2B8",
+    textPlaceholder: "\uD14D\uC2A4\uD2B8 \uC785\uB825",
+    lock: "\uC7A0\uADF8\uAE30",
+    unlock: "\uC7A0\uAE08 \uD480\uAE30",
+    duplicate: "\uBCF5\uC81C",
+    moveBar: "\uB04C\uC5B4\uC11C \uC62E\uAE30\uAE30 (\uB450 \uBC88 \uB204\uB974\uBA74 \uC81C\uC790\uB9AC)",
     indicators: "\uC9C0\uD45C",
     addIndicator: "\uC9C0\uD45C \uCD94\uAC00",
     indicatorSettings: "\uC9C0\uD45C \uC124\uC815",
@@ -514,7 +526,6 @@ var STRINGS = {
     removePeriod: "\uAE30\uAC04 \uC0AD\uC81C",
     period: "\uAE30\uAC04",
     source: "\uAC00\uACA9 \uAE30\uC900",
-    lineWidth: "\uB450\uAED8",
     inputs: "\uC785\uB825\uAC12",
     style: "\uC2A4\uD0C0\uC77C",
     // intervals
@@ -631,6 +642,18 @@ var STRINGS = {
     magnet: "Magnet (snap to OHLC)",
     remove: "Remove",
     color: "Color",
+    customColor: "Other color",
+    lineWidth: "Line width",
+    lineStyle: "Line style",
+    lineSolid: "Solid",
+    lineDashed: "Dashed",
+    lineDotted: "Dotted",
+    drawingText: "Text",
+    textPlaceholder: "Type text",
+    lock: "Lock",
+    unlock: "Unlock",
+    duplicate: "Duplicate",
+    moveBar: "Drag to move (double-click to reset)",
     indicators: "Indicators",
     addIndicator: "Add indicator",
     indicatorSettings: "Indicator settings",
@@ -647,7 +670,6 @@ var STRINGS = {
     removePeriod: "Remove period",
     period: "Period",
     source: "Source",
-    lineWidth: "Width",
     inputs: "Inputs",
     style: "Style",
     intervalMinutes: "Minutes",
@@ -859,6 +881,15 @@ var ToolsIcon = () => /* @__PURE__ */ a3(Icon, { size: 18, children: [
   /* @__PURE__ */ a3("circle", { cx: "12.5", cy: "6", r: "2" }),
   /* @__PURE__ */ a3("circle", { cx: "7.5", cy: "14", r: "2" })
 ] });
+var GripIcon = () => /* @__PURE__ */ a3(Icon, { children: /* @__PURE__ */ a3("path", { d: "M7.5 5h.01M7.5 10h.01M7.5 15h.01M12.5 5h.01M12.5 10h.01M12.5 15h.01", "stroke-width": "2.4" }) });
+var LockIcon = ({ open = false }) => /* @__PURE__ */ a3(Icon, { children: [
+  /* @__PURE__ */ a3("rect", { x: "4.5", y: "9", width: "11", height: "8", rx: "1.8" }),
+  /* @__PURE__ */ a3("path", { d: open ? "M7 9V6.5a3 3 0 0 1 5.8-1" : "M7 9V6.5a3 3 0 0 1 6 0V9" })
+] });
+var CopyIcon = () => /* @__PURE__ */ a3(Icon, { children: [
+  /* @__PURE__ */ a3("rect", { x: "7", y: "7", width: "9.5", height: "9.5", rx: "1.8" }),
+  /* @__PURE__ */ a3("path", { d: "M13 7V5a1.5 1.5 0 0 0-1.5-1.5h-6A1.5 1.5 0 0 0 4 5v6a1.5 1.5 0 0 0 1.5 1.5H7" })
+] });
 
 // src/store.ts
 var Store = class {
@@ -943,7 +974,10 @@ function ToolGroup({
   };
   return /* @__PURE__ */ a3("div", { class: "fnc-tool-group", ref, "data-open": open, children: [
     /* @__PURE__ */ a3("button", { class: "fnc-btn", "data-tip": name, "aria-label": name, "aria-pressed": !!armed, onClick: () => pick(current), children: /* @__PURE__ */ a3(ToolIcon, { def: current, locale: s3.locale }) }),
-    tools.length > 1 && /* @__PURE__ */ a3("button", { class: "fnc-tool-more", "aria-label": `${t3.moreTools}: ${name}`, "aria-haspopup": "menu", "aria-expanded": open, onClick: () => onOpen(!open), children: /* @__PURE__ */ a3(CornerIcon, {}) }),
+    tools.length > 1 && /* @__PURE__ */ a3("button", { class: "fnc-tool-more", "aria-label": `${t3.moreTools}: ${name}`, "aria-haspopup": "menu", "aria-expanded": open, onClick: () => onOpen(!open), children: [
+      /* @__PURE__ */ a3("span", { class: "fnc-tool-corner", children: /* @__PURE__ */ a3(CornerIcon, {}) }),
+      /* @__PURE__ */ a3("span", { class: "fnc-tool-chevron", children: /* @__PURE__ */ a3(ChevronRightIcon, {}) })
+    ] }),
     open && /* @__PURE__ */ a3("div", { class: "fnc-menu fnc-tool-menu", role: "menu", children: tools.map((def, i3) => {
       const section = def.section?.[s3.locale];
       const heading = section && section !== tools[i3 - 1]?.section?.[s3.locale];
@@ -1030,24 +1064,153 @@ function DrawingToolbar({ ctx }) {
   ] });
 }
 var SWATCHES = ["#3182F6", "#F04452", "#12B886", "#FF9F0A", "#7048E8"];
+var WIDTHS = [1, 2, 3, 4];
+var DASH_ORDER = ["solid", "dashed", "dotted"];
+var RECENT_KEY = "fnc-drawing-colors";
+var POS_KEY = "fnc-selbar-pos";
+var readJson = (key, fallback) => {
+  try {
+    const raw = localStorage.getItem(key);
+    return raw ? JSON.parse(raw) : fallback;
+  } catch {
+    return fallback;
+  }
+};
+var writeJson = (key, value) => {
+  try {
+    localStorage.setItem(key, JSON.stringify(value));
+  } catch {
+  }
+};
+function DashGlyph({ dash }) {
+  const pattern = dash === "dashed" ? "4 3" : dash === "dotted" ? "1 3" : void 0;
+  return /* @__PURE__ */ a3("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "aria-hidden": "true", children: /* @__PURE__ */ a3("path", { d: "M3 10h14", "stroke-dasharray": pattern }) });
+}
 function SelectionBar({ ctx }) {
   const s3 = useStore(ctx.store);
   const t3 = STRINGS[s3.locale];
   const d3 = s3.selection;
+  const [offset, setOffset] = d2(() => readJson(POS_KEY, [0, 0]));
+  const [recent, setRecent] = d2(() => readJson(RECENT_KEY, []));
+  const [menu, setMenu] = d2(null);
+  const colorInput = T2(null);
   if (!d3 || s3.layout.plotWidth <= 0) return null;
-  return /* @__PURE__ */ a3("div", { class: "fnc-selbar", role: "toolbar", style: { left: `${s3.layout.plotWidth / 2}px` }, children: [
-    SWATCHES.map((color) => /* @__PURE__ */ a3(
+  const def = ctx.chart.drawingDefinitions().find((x2) => x2.type === d3.type);
+  const style = d3.style ?? {};
+  const setStyle = (patch) => ctx.chart.updateDrawing(d3.id, { style: { ...style, ...patch } });
+  const current = d3.color ?? SWATCHES[0];
+  const pickColor = (color) => ctx.chart.updateDrawing(d3.id, { color });
+  const addRecent = (color) => {
+    const next = [color, ...recent.filter((c3) => c3 !== color)].slice(0, 3);
+    setRecent(next);
+    writeJson(RECENT_KEY, next);
+  };
+  const locked = !!style.locked;
+  const dash = style.dash ?? "solid";
+  const startMove = (e3) => {
+    e3.preventDefault();
+    const start = [e3.clientX, e3.clientY];
+    const from = offset;
+    const move = (ev) => setOffset([from[0] + ev.clientX - start[0], from[1] + ev.clientY - start[1]]);
+    const up = (ev) => {
+      document.removeEventListener("pointermove", move);
+      document.removeEventListener("pointerup", up);
+      const next = [from[0] + ev.clientX - start[0], from[1] + ev.clientY - start[1]];
+      setOffset(next);
+      writeJson(POS_KEY, next);
+    };
+    document.addEventListener("pointermove", move);
+    document.addEventListener("pointerup", up);
+  };
+  return /* @__PURE__ */ a3("div", { class: "fnc-selbar", role: "toolbar", style: { left: `${s3.layout.plotWidth / 2 + offset[0]}px`, top: `${8 + offset[1]}px` }, children: [
+    /* @__PURE__ */ a3(
+      "button",
+      {
+        class: "fnc-btn fnc-selbar-grip",
+        "data-tip": t3.moveBar,
+        "aria-label": t3.moveBar,
+        onPointerDown: startMove,
+        onDblClick: () => {
+          setOffset([0, 0]);
+          writeJson(POS_KEY, [0, 0]);
+        },
+        children: /* @__PURE__ */ a3(GripIcon, {})
+      }
+    ),
+    [...SWATCHES, ...recent.filter((c3) => !SWATCHES.includes(c3))].map((color) => /* @__PURE__ */ a3("button", { class: "fnc-swatch", style: { background: color }, "data-tip": t3.color, "aria-label": `${t3.color} ${color}`, "aria-pressed": current === color, onClick: () => pickColor(color) })),
+    /* @__PURE__ */ a3("label", { class: "fnc-swatch fnc-swatch-add", "data-tip": t3.customColor, "aria-label": t3.customColor, children: [
+      "+",
+      /* @__PURE__ */ a3(
+        "input",
+        {
+          ref: colorInput,
+          type: "color",
+          value: /^#[0-9a-f]{6}$/i.test(current) ? current : "#3182f6",
+          onInput: (e3) => pickColor(e3.target.value),
+          onChange: (e3) => addRecent(e3.target.value)
+        }
+      )
+    ] }),
+    /* @__PURE__ */ a3("div", { class: "fnc-sep" }),
+    /* @__PURE__ */ a3("div", { class: "fnc-selbar-menu", children: [
+      /* @__PURE__ */ a3("button", { class: "fnc-btn fnc-selbar-width", "data-tip": t3.lineWidth, "aria-label": t3.lineWidth, "aria-expanded": menu === "width", onClick: () => setMenu(menu === "width" ? null : "width"), children: /* @__PURE__ */ a3("svg", { width: "20", height: "20", viewBox: "0 0 20 20", "aria-hidden": "true", children: /* @__PURE__ */ a3("path", { d: "M3 10h14", stroke: "currentColor", "stroke-width": style.width ?? 2, "stroke-linecap": "round" }) }) }),
+      menu === "width" && /* @__PURE__ */ a3("div", { class: "fnc-menu fnc-selbar-pop", role: "menu", children: WIDTHS.map((w3) => /* @__PURE__ */ a3(
+        "button",
+        {
+          class: "fnc-menu-item",
+          role: "menuitemradio",
+          "aria-checked": (style.width ?? 2) === w3,
+          onClick: () => {
+            setStyle({ width: w3 });
+            setMenu(null);
+          },
+          children: [
+            /* @__PURE__ */ a3("svg", { width: "40", height: "12", viewBox: "0 0 40 12", "aria-hidden": "true", children: /* @__PURE__ */ a3("path", { d: "M2 6h36", stroke: "currentColor", "stroke-width": w3, "stroke-linecap": "round" }) }),
+            /* @__PURE__ */ a3("span", { children: [
+              w3,
+              "px"
+            ] })
+          ]
+        }
+      )) })
+    ] }),
+    /* @__PURE__ */ a3(
       "button",
       {
-        class: "fnc-swatch",
-        style: { background: color },
-        "data-tip": t3.color,
-        "aria-label": `${t3.color} ${color}`,
-        "aria-pressed": (d3.color ?? SWATCHES[0]) === color,
-        onClick: () => ctx.chart.updateDrawing(d3.id, { color })
+        class: "fnc-btn",
+        "data-tip": `${t3.lineStyle}: ${dash === "solid" ? t3.lineSolid : dash === "dashed" ? t3.lineDashed : t3.lineDotted}`,
+        "aria-label": t3.lineStyle,
+        onClick: () => setStyle({ dash: DASH_ORDER[(DASH_ORDER.indexOf(dash) + 1) % DASH_ORDER.length] }),
+        children: /* @__PURE__ */ a3(DashGlyph, { dash })
+      }
+    ),
+    def?.text && /* @__PURE__ */ a3(
+      "input",
+      {
+        class: "fnc-selbar-text",
+        value: style.text ?? "",
+        placeholder: t3.textPlaceholder,
+        "aria-label": t3.drawingText,
+        maxLength: 200,
+        onInput: (e3) => setStyle({ text: e3.target.value }),
+        onKeyDown: (e3) => e3.stopPropagation()
       }
-    )),
+    ),
     /* @__PURE__ */ a3("div", { class: "fnc-sep" }),
+    /* @__PURE__ */ a3("button", { class: "fnc-btn", "data-tip": locked ? t3.unlock : t3.lock, "aria-label": locked ? t3.unlock : t3.lock, "aria-pressed": locked, onClick: () => setStyle({ locked: !locked }), children: /* @__PURE__ */ a3(LockIcon, { open: !locked }) }),
+    /* @__PURE__ */ a3(
+      "button",
+      {
+        class: "fnc-btn",
+        "data-tip": t3.duplicate,
+        "aria-label": t3.duplicate,
+        onClick: () => {
+          const id = ctx.chart.addDrawing({ type: d3.type, points: d3.points.map((p3) => ({ ...p3 })), ...d3.color ? { color: d3.color } : {}, style: { ...style, locked: false } });
+          ctx.chart.selectDrawing(id);
+        },
+        children: /* @__PURE__ */ a3(CopyIcon, {})
+      }
+    ),
     /* @__PURE__ */ a3("button", { class: "fnc-btn", "data-tip": t3.remove, "aria-label": t3.remove, onClick: () => ctx.chart.removeDrawing(d3.id), children: /* @__PURE__ */ a3(TrashIcon, {}) })
   ] });
 }
@@ -1255,7 +1418,7 @@ function IndicatorPicker({ ctx }) {
     ] })
   ] });
 }
-var WIDTHS = [1, 2, 3, 4];
+var WIDTHS2 = [1, 2, 3, 4];
 function defaultSeries(def, params) {
   return def.compute([], params).series.filter((s3) => s3.kind === "line");
 }
@@ -1285,7 +1448,7 @@ function StyleControls({
         onInput: (e3) => onChange({ color: e3.currentTarget.value })
       }
     ),
-    /* @__PURE__ */ a3("select", { class: "fnc-select fnc-select-width", value: row2.width, "aria-label": t3.lineWidth, onChange: (e3) => onChange({ width: Number(e3.currentTarget.value) }), children: WIDTHS.map((w3) => /* @__PURE__ */ a3("option", { value: w3, children: [
+    /* @__PURE__ */ a3("select", { class: "fnc-select fnc-select-width", value: row2.width, "aria-label": t3.lineWidth, onChange: (e3) => onChange({ width: Number(e3.currentTarget.value) }), children: WIDTHS2.map((w3) => /* @__PURE__ */ a3("option", { value: w3, children: [
       w3,
       "px"
     ] })) })
@@ -1599,7 +1762,7 @@ function SymbolAvatar({ info, size = 24 }) {
 // src/components/symbol-search.tsx
 import { formatPrice } from "@funnest/charts";
 var DEBOUNCE_MS = 150;
-var RECENT_KEY = "recent-symbols";
+var RECENT_KEY2 = "recent-symbols";
 var FAVORITE_KEY = "favorite-symbols";
 var MAX_RECENT = 8;
 var displayCode = (symbol) => symbol.slice(symbol.lastIndexOf(":") + 1);
@@ -1638,7 +1801,7 @@ function SymbolSearch({ ctx }) {
   const [exchange, setExchange] = d2(null);
   const [results, setResults] = d2(null);
   const [loading, setLoading] = d2(true);
-  const [recent, setRecent] = d2(() => ctx.storage.get(RECENT_KEY, []));
+  const [recent, setRecent] = d2(() => ctx.storage.get(RECENT_KEY2, []));
   const [favorites, setFavorites] = d2(() => ctx.storage.get(FAVORITE_KEY, []));
   const [active, setActive] = d2(0);
   const inputRef = T2(null);
@@ -1682,7 +1845,7 @@ function SymbolSearch({ ctx }) {
   const toggleFavorite = (info) => save(FAVORITE_KEY, isFavorite(info) ? favorites.filter((f4) => f4.symbol !== info.symbol) : [...favorites, toStored(info)], setFavorites);
   const choose = (info) => {
     if (!info) return;
-    save(RECENT_KEY, [toStored(info), ...recent.filter((r3) => r3.symbol !== info.symbol)].slice(0, MAX_RECENT), setRecent);
+    save(RECENT_KEY2, [toStored(info), ...recent.filter((r3) => r3.symbol !== info.symbol)].slice(0, MAX_RECENT), setRecent);
     close();
     if (comparing) ctx.chart.addCompare(info.symbol).catch((error) => console.error("funnest-charts: compare failed", error));
     else ctx.selectSymbol(info.symbol);
@@ -1757,7 +1920,7 @@ function SymbolSearch({ ctx }) {
               "data-tip": t3.removeRecent,
               onClick: (e3) => {
                 e3.stopPropagation();
-                save(RECENT_KEY, recent.filter((r3) => r3.symbol !== info.symbol), setRecent);
+                save(RECENT_KEY2, recent.filter((r3) => r3.symbol !== info.symbol), setRecent);
               },
               children: /* @__PURE__ */ a3(SmallCloseIcon, {})
             }
@@ -1808,7 +1971,7 @@ function SymbolSearch({ ctx }) {
       /* @__PURE__ */ a3("div", { class: "fnc-sr-list fnc-scroll", id: "fnc-search-results", role: "listbox", ref: listRef, children: [
         recentRows.length > 0 && /* @__PURE__ */ a3("div", { class: "fnc-sr-section", children: [
           /* @__PURE__ */ a3("span", { children: t3.recentSearches }),
-          /* @__PURE__ */ a3("button", { class: "fnc-link", onClick: () => save(RECENT_KEY, [], setRecent), children: t3.clearRecent })
+          /* @__PURE__ */ a3("button", { class: "fnc-link", onClick: () => save(RECENT_KEY2, [], setRecent), children: t3.clearRecent })
         ] }),
         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 }),
@@ -2102,7 +2265,7 @@ function Toolbar({ ctx }) {
           "data-tip": t3.addIndicator,
           "aria-label": t3.addIndicator,
           "aria-haspopup": "dialog",
-          onClick: () => ctx.store.set({ dialog: { kind: "indicators" } }),
+          onClick: () => ctx.onIndicatorsClick ? ctx.onIndicatorsClick(ctx.chart) : ctx.store.set({ dialog: { kind: "indicators" } }),
           children: [
             /* @__PURE__ */ a3(IndicatorIcon, {}),
             /* @__PURE__ */ a3("span", { children: t3.indicators })
@@ -2715,6 +2878,9 @@ var CSS = (
 /* \u2500\u2500 Drawing tool bar (left) \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-drawbar-host { flex: none; display: flex; }
 .fnc-drawbar {
+  /* Above the plot, so a tool list tab (it sticks out over the chart) can be clicked. */
+  position: relative;
+  z-index: 5;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -2748,6 +2914,16 @@ var CSS = (
 }
 .fnc-swatch[aria-pressed='true'] { box-shadow: 0 0 0 2px var(--fnc-bg), 0 0 0 4px var(--fnc-text-2); }
 .fnc-selbar .fnc-btn { width: 32px; height: 32px; }
+.fnc-selbar { padding-left: 4px; }
+.fnc-selbar-grip { cursor: grab; touch-action: none; }
+.fnc-selbar-grip:active { cursor: grabbing; }
+.fnc-swatch-add { position: relative; display: grid; place-items: center; overflow: hidden; border: 1px dashed var(--fnc-text-2); color: var(--fnc-text-2); font-size: 13px; line-height: 1; cursor: pointer; }
+.fnc-swatch-add input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
+.fnc-selbar-menu { position: relative; }
+.fnc-selbar-pop { top: calc(100% + 6px); left: 50%; transform: translateX(-50%); min-width: 110px; }
+.fnc-selbar-pop .fnc-menu-item { gap: 10px; }
+.fnc-selbar-text { width: 150px; height: 28px; padding: 0 8px; border: 1px solid var(--fnc-border); border-radius: var(--fnc-radius); background: var(--fnc-surface); color: var(--fnc-text); font: inherit; font-size: 13px; outline: none; }
+.fnc-selbar-text:focus { border-color: var(--fnc-text-2); }
 .fnc-overlay { pointer-events: none; }
 .fnc-overlay button { pointer-events: auto; }
 
@@ -3462,20 +3638,48 @@ var CSS = (
 /* \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; }
+/* The list opener: a corner mark at rest; on hover a tab slides out to the right of the
+   button (a bigger target, like the reference terminals). Touch screens always show the tab. */
 .fnc-tool-more {
   position: absolute;
+  top: 0;
   right: -2px;
-  bottom: -2px;
+  bottom: 0;
   display: flex;
   align-items: flex-end;
   justify-content: flex-end;
-  width: 14px;
-  height: 14px;
-  padding: 3px;
+  width: 12px;
+  padding: 0 0 2px;
+  border-radius: 0 var(--fnc-radius) var(--fnc-radius) 0;
   color: var(--fnc-text-2);
-  opacity: 0.7;
+  transition: right 0.12s ease, width 0.12s ease, background 0.12s ease;
+}
+.fnc-tool-corner { display: flex; opacity: 0.7; }
+.fnc-tool-chevron { display: none; }
+.fnc-tool-chevron svg { width: 12px; height: 12px; }
+.fnc-tool-group:hover .fnc-tool-more,
+.fnc-tool-more[aria-expanded='true'],
+.fnc-tool-more:focus-visible {
+  right: -13px;
+  width: 14px;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  background: var(--fnc-surface);
+  color: var(--fnc-text);
+  box-shadow: 0 0 0 1px var(--fnc-border);
+}
+.fnc-tool-group:hover .fnc-tool-corner,
+.fnc-tool-more[aria-expanded='true'] .fnc-tool-corner,
+.fnc-tool-more:focus-visible .fnc-tool-corner { display: none; }
+.fnc-tool-group:hover .fnc-tool-chevron,
+.fnc-tool-more[aria-expanded='true'] .fnc-tool-chevron,
+.fnc-tool-more:focus-visible .fnc-tool-chevron { display: flex; }
+@media (hover: none) {
+  .fnc-tool-more { right: -12px; width: 14px; align-items: center; justify-content: center; padding: 0; }
+  .fnc-tool-corner { display: none; }
+  .fnc-tool-chevron { display: flex; }
 }
-.fnc-tool-more:hover, .fnc-tool-more[aria-expanded='true'] { opacity: 1; color: var(--fnc-text); }
 .fnc-tool-menu { top: 0; left: calc(100% + 8px); min-width: 200px; max-height: min(640px, calc(100vh - 120px)); overflow-y: auto; }
 .fnc-tool-section { padding: 8px 10px 4px; color: var(--fnc-text-2); font-size: 11px; font-weight: 600; }
 .fnc-tool-section.is-after { margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--fnc-border); }
@@ -3937,6 +4141,7 @@ function createPane(shell, config) {
     drawingToolbar: config.drawingToolbar,
     attribution: config.attribution,
     contextMenuItems: config.contextMenuItems,
+    onIndicatorsClick: config.onIndicatorsClick,
     slots: shell.slots,
     multi: config.multi,
     setDrawbarCollapsed: shell.setDrawbarCollapsed,
@@ -4012,6 +4217,7 @@ function createTradingChart(container, options) {
     attribution = true,
     colorScheme = "system",
     contextMenuItems,
+    onIndicatorsClick,
     theme,
     ...chartOptions
   } = options;
@@ -4036,7 +4242,8 @@ function createTradingChart(container, options) {
     searchHotkey,
     drawingToolbar,
     attribution,
-    contextMenuItems
+    contextMenuItems,
+    onIndicatorsClick
   });
   shell.main.insertBefore(pane.stage, shell.slots.bottom);
   shell.setPanes(() => [pane]);
@@ -4108,6 +4315,7 @@ function createMultiChart(container, options) {
     attribution = true,
     colorScheme = "system",
     contextMenuItems,
+    onIndicatorsClick,
     theme,
     ...chartOptions
   } = options;
@@ -4175,6 +4383,7 @@ function createMultiChart(container, options) {
       // One badge for the whole widget, not one per pane.
       attribution: attribution && index === 0,
       contextMenuItems,
+      onIndicatorsClick,
       multi: controls
     });
     const cell = div("fnc-pane");

package/dist/pane.d.ts

@@ -17,6 +17,7 @@ export interface PaneConfig {
     /** Ctrl/⌘+K opens this widget's symbol search (its footer shows the hint only then). */
     searchHotkey: boolean;
     contextMenuItems?: ContextMenuItems | undefined;
+    onIndicatorsClick?: ((chart: Chart) => void) | undefined;
     multi?: MultiControls | undefined;
 }
 /**

package/dist/trading-chart.d.ts

@@ -50,6 +50,11 @@ export interface TradingChartOptions extends Omit<ChartOptions, 'datafeed'> {
      * e.g. "이 가격에 알림 만들기". Called on every right-click with the price and time under the pointer.
      */
     contextMenuItems?: ContextMenuItems;
+    /**
+     * 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().
+     */
+    onIndicatorsClick?: (chart: Chart) => void;
 }
 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.9",
+  "version": "0.6.11",
   "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.9"
+    "@funnest/charts": "0.6.11"
   },
   "devDependencies": {
     "preact": "^11.2.0"