@funnest/charts-ui 0.5.0 → 0.5.2

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

@@ -0,0 +1,6 @@
+/**
+ * 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).
+ * Attach the returned ref to the menu element.
+ */
+export declare function useKeepInView<T extends HTMLElement>(open: boolean): import("preact").RefObject<T | null>;

package/dist/index.js

@@ -825,7 +825,7 @@ function DrawingToolbar({ ctx }) {
     if (tool && ctx.store.get().drawbarOpen) ctx.store.set({ drawbarOpen: false });
   };
   return /* @__PURE__ */ a2($, { children: [
-    s3.drawbarCollapsed && /* @__PURE__ */ a2("button", { class: "fnc-drawbar-tab", "aria-label": t3.expandDrawbar, title: t3.expandDrawbar, onClick: () => ctx.setDrawbarCollapsed(false), children: /* @__PURE__ */ a2(ChevronRightIcon, {}) }),
+    s3.drawbarCollapsed && /* @__PURE__ */ a2("button", { class: "fnc-drawbar-tab", "aria-label": t3.expandDrawbar, "data-tip": t3.expandDrawbar, onClick: () => ctx.setDrawbarCollapsed(false), children: /* @__PURE__ */ a2(ChevronRightIcon, {}) }),
     /* @__PURE__ */ a2(
       "div",
       {
@@ -840,7 +840,7 @@ function DrawingToolbar({ ctx }) {
             "button",
             {
               class: "fnc-btn",
-              title: t3[label],
+              "data-tip": t3[label],
               "aria-label": t3[label],
               "aria-pressed": s3.drawingTool === tool,
               onClick: () => pick(tool),
@@ -852,7 +852,7 @@ function DrawingToolbar({ ctx }) {
             "button",
             {
               class: "fnc-btn",
-              title: t3.magnet,
+              "data-tip": t3.magnet,
               "aria-label": t3.magnet,
               "aria-pressed": s3.magnet,
               onClick: () => ctx.chart.setMagnet(!s3.magnet),
@@ -863,7 +863,7 @@ function DrawingToolbar({ ctx }) {
             "button",
             {
               class: "fnc-btn",
-              title: t3.removeAll,
+              "data-tip": t3.removeAll,
               "aria-label": t3.removeAll,
               disabled: s3.drawingCount === 0,
               onClick: () => ctx.chart.clearDrawings(),
@@ -875,7 +875,7 @@ function DrawingToolbar({ ctx }) {
             "button",
             {
               class: "fnc-btn fnc-drawbar-collapse",
-              title: t3.collapseDrawbar,
+              "data-tip": t3.collapseDrawbar,
               "aria-label": t3.collapseDrawbar,
               onClick: () => ctx.setDrawbarCollapsed(true),
               children: /* @__PURE__ */ a2(ChevronLeftIcon, {})
@@ -898,17 +898,43 @@ function SelectionBar({ ctx }) {
       {
         class: "fnc-swatch",
         style: { background: color },
-        title: t3.color,
+        "data-tip": t3.color,
         "aria-label": `${t3.color} ${color}`,
         "aria-pressed": (d3.color ?? SWATCHES[0]) === color,
         onClick: () => ctx.chart.updateDrawing(d3.id, { color })
       }
     )),
     /* @__PURE__ */ a2("div", { class: "fnc-sep" }),
-    /* @__PURE__ */ a2("button", { class: "fnc-btn", title: t3.remove, "aria-label": t3.remove, onClick: () => ctx.chart.removeDrawing(d3.id), children: /* @__PURE__ */ a2(TrashIcon, {}) })
+    /* @__PURE__ */ a2("button", { class: "fnc-btn", "data-tip": t3.remove, "aria-label": t3.remove, onClick: () => ctx.chart.removeDrawing(d3.id), children: /* @__PURE__ */ a2(TrashIcon, {}) })
   ] });
 }
 
+// src/components/keep-in-view.ts
+var MARGIN = 8;
+function useKeepInView(open) {
+  const ref = T2(null);
+  F2(() => {
+    const el = ref.current;
+    if (!open || !el) return;
+    el.style.translate = "";
+    const fit = () => {
+      el.style.translate = "";
+      const r3 = el.getBoundingClientRect();
+      const root = el.closest(".fnc-root")?.getBoundingClientRect();
+      const minX = Math.max(0, root?.left ?? 0) + MARGIN;
+      const maxX = Math.min(document.documentElement.clientWidth, root?.right ?? Infinity) - MARGIN;
+      let dx = 0;
+      if (r3.right > maxX) dx = maxX - r3.right;
+      if (r3.left + dx < minX) dx = minX - r3.left;
+      if (dx) el.style.translate = `${Math.round(dx)}px 0`;
+    };
+    fit();
+    window.addEventListener("resize", fit);
+    return () => window.removeEventListener("resize", fit);
+  }, [open]);
+  return ref;
+}
+
 // src/components/chart-type-menu.tsx
 var TYPES = [
   { type: "candles", label: "candles", icon: CandlesIcon },
@@ -920,6 +946,7 @@ function ChartTypeMenu({ ctx }) {
   const t3 = STRINGS[s3.locale];
   const [open, setOpen] = d2(false);
   const ref = T2(null);
+  const menuRef = useKeepInView(open);
   const current = TYPES.find((x2) => x2.type === s3.chartType) ?? TYPES[0];
   A2(() => {
     if (!open) return;
@@ -937,12 +964,12 @@ function ChartTypeMenu({ ctx }) {
     ctx.store.set({ chartType: type });
     setOpen(false);
   };
-  return /* @__PURE__ */ a2("div", { class: "fnc-menu-wrap", ref, children: [
+  return /* @__PURE__ */ a2("div", { class: "fnc-menu-wrap fnc-chart-type", ref, children: [
     /* @__PURE__ */ a2(
       "button",
       {
         class: "fnc-btn fnc-btn-wide",
-        title: t3.chartType,
+        "data-tip": t3.chartType,
         "aria-label": t3.chartType,
         "aria-haspopup": "menu",
         "aria-expanded": open,
@@ -953,7 +980,7 @@ function ChartTypeMenu({ ctx }) {
         ]
       }
     ),
-    open && /* @__PURE__ */ a2("div", { class: "fnc-menu", role: "menu", children: TYPES.map(({ type, label, icon: Icon2 }) => /* @__PURE__ */ a2(
+    open && /* @__PURE__ */ a2("div", { class: "fnc-menu", role: "menu", ref: menuRef, children: TYPES.map(({ type, label, icon: Icon2 }) => /* @__PURE__ */ a2(
       "button",
       {
         class: "fnc-menu-item",
@@ -1230,7 +1257,7 @@ function IndicatorSettings({ ctx, id }) {
             onInput: (e3) => updateLine(i3, { period: e3.currentTarget.value.replace(/\D/g, "") })
           }
         ),
-        /* @__PURE__ */ a2("button", { type: "button", class: "fnc-ind-btn", "aria-label": t3.removePeriod, title: t3.removePeriod, onClick: () => setLines(lines.filter((_3, j2) => j2 !== i3)), children: /* @__PURE__ */ a2(SmallCloseIcon, {}) })
+        /* @__PURE__ */ a2("button", { type: "button", class: "fnc-ind-btn", "aria-label": t3.removePeriod, "data-tip": t3.removePeriod, onClick: () => setLines(lines.filter((_3, j2) => j2 !== i3)), children: /* @__PURE__ */ a2(SmallCloseIcon, {}) })
       ] })),
       /* @__PURE__ */ a2("button", { type: "button", class: "fnc-add-row", onClick: addLine, children: [
         "+ ",
@@ -1302,6 +1329,7 @@ function IntervalPicker({ ctx }) {
   const t3 = STRINGS[s3.locale];
   const [open, setOpen] = d2(false);
   const ref = T2(null);
+  const menuRef = useKeepInView(open);
   A2(() => {
     if (!open) return;
     const onDown = (e3) => !ref.current?.contains(e3.target) && setOpen(false);
@@ -1328,7 +1356,7 @@ function IntervalPicker({ ctx }) {
         class: "fnc-chip",
         "aria-pressed": r3 === s3.resolution,
         disabled: !isSupported(r3),
-        title: isSupported(r3) ? resolutionLabel(r3, s3.locale, "long") : t3.unsupportedInterval,
+        "data-tip": isSupported(r3) ? resolutionLabel(r3, s3.locale, "long") : t3.unsupportedInterval,
         onClick: () => select(r3),
         children: resolutionLabel(r3, s3.locale)
       }
@@ -1337,7 +1365,7 @@ function IntervalPicker({ ctx }) {
       "button",
       {
         class: `fnc-btn fnc-btn-wide fnc-interval-trigger${favorites.includes(s3.resolution) ? "" : " fnc-interval-trigger-active"}`,
-        title: t3.moreIntervals,
+        "data-tip": t3.moreIntervals,
         "aria-label": t3.moreIntervals,
         "aria-haspopup": "menu",
         "aria-expanded": open,
@@ -1348,7 +1376,7 @@ function IntervalPicker({ ctx }) {
         ]
       }
     ),
-    open && /* @__PURE__ */ a2("div", { class: "fnc-menu fnc-interval-menu", role: "menu", children: ctx.intervalGroups.map((group) => /* @__PURE__ */ a2("div", { class: "fnc-menu-group", role: "group", "aria-label": t3[GROUP_LABEL[group.id]], children: [
+    open && /* @__PURE__ */ a2("div", { class: "fnc-menu fnc-interval-menu", role: "menu", ref: menuRef, children: ctx.intervalGroups.map((group) => /* @__PURE__ */ a2("div", { class: "fnc-menu-group", role: "group", "aria-label": t3[GROUP_LABEL[group.id]], children: [
       /* @__PURE__ */ a2("div", { class: "fnc-menu-title", children: t3[GROUP_LABEL[group.id]] }),
       group.intervals.map((r3) => {
         const favorite = s3.favoriteIntervals.includes(r3);
@@ -1361,7 +1389,7 @@ function IntervalPicker({ ctx }) {
               role: "menuitemradio",
               "aria-checked": r3 === s3.resolution,
               disabled: !ok,
-              title: ok ? void 0 : t3.unsupportedInterval,
+              "data-tip": ok ? void 0 : t3.unsupportedInterval,
               onClick: () => select(r3),
               children: resolutionLabel(r3, s3.locale, "long")
             }
@@ -1372,7 +1400,7 @@ function IntervalPicker({ ctx }) {
               class: "fnc-star",
               "aria-pressed": favorite,
               "aria-label": `${resolutionLabel(r3, s3.locale, "long")} ${favorite ? t3.removeFavorite : t3.addFavorite}`,
-              title: favorite ? t3.removeFavorite : t3.addFavorite,
+              "data-tip": favorite ? t3.removeFavorite : t3.addFavorite,
               onClick: () => ctx.toggleFavoriteInterval(r3),
               children: /* @__PURE__ */ a2(StarIcon, { filled: favorite })
             }
@@ -1450,6 +1478,7 @@ function layoutRects(node, x2 = 0, y3 = 0, w3 = 20, h3 = 16, gap = 1.6) {
 }
 
 // src/components/layout-menu.tsx
+var LAYOUT_PANES = (id) => paneCount(LAYOUTS[id]);
 function LayoutGlyph({ id }) {
   return /* @__PURE__ */ a2("svg", { width: "20", height: "16", viewBox: "0 0 20 16", "aria-hidden": "true", children: layoutRects(LAYOUTS[id]).map((r3) => /* @__PURE__ */ a2("rect", { x: r3.x + 0.5, y: r3.y + 0.5, width: Math.max(0, r3.w - 1), height: Math.max(0, r3.h - 1), rx: "1.5", fill: "none", stroke: "currentColor", "stroke-width": "1.2" })) });
 }
@@ -1481,6 +1510,8 @@ function LayoutMenu({ ctx, multi }) {
   const t3 = STRINGS[s3.locale];
   const layout = usePopover();
   const sync = usePopover();
+  const layoutMenuRef = useKeepInView(layout.open);
+  const syncMenuRef = useKeepInView(sync.open);
   const anySync = Object.values(m3.sync).some(Boolean);
   return /* @__PURE__ */ a2($, { children: [
     /* @__PURE__ */ a2("div", { class: "fnc-menu-wrap", ref: layout.ref, children: [
@@ -1488,7 +1519,7 @@ function LayoutMenu({ ctx, multi }) {
         "button",
         {
           class: "fnc-btn fnc-btn-wide fnc-btn-layout",
-          title: t3.layout,
+          "data-tip": t3.layout,
           "aria-label": t3.layout,
           "aria-haspopup": "menu",
           "aria-expanded": layout.open,
@@ -1499,7 +1530,7 @@ function LayoutMenu({ ctx, multi }) {
           ]
         }
       ),
-      layout.open && /* @__PURE__ */ a2("div", { class: "fnc-menu fnc-layout-menu", role: "menu", "aria-label": t3.layout, children: LAYOUT_GROUPS.map((group) => /* @__PURE__ */ a2("div", { class: "fnc-layout-row", children: [
+      layout.open && /* @__PURE__ */ a2("div", { class: "fnc-menu fnc-layout-menu", role: "menu", "aria-label": t3.layout, ref: layoutMenuRef, children: LAYOUT_GROUPS.map((group) => /* @__PURE__ */ a2("div", { class: "fnc-layout-row", children: [
         /* @__PURE__ */ a2("span", { class: "fnc-layout-count", children: group[0].split("-")[0] }),
         group.map((id) => /* @__PURE__ */ a2(
           "button",
@@ -1508,7 +1539,7 @@ function LayoutMenu({ ctx, multi }) {
             role: "menuitemradio",
             "aria-checked": id === m3.layout,
             "aria-label": `${t3.layout} ${id}`,
-            title: id,
+            "data-layout": id,
             onClick: () => {
               multi.setLayout(id);
               layout.setOpen(false);
@@ -1518,12 +1549,12 @@ function LayoutMenu({ ctx, multi }) {
         ))
       ] })) })
     ] }),
-    /* @__PURE__ */ a2("div", { class: "fnc-menu-wrap", ref: sync.ref, children: [
+    LAYOUT_PANES(m3.layout) > 1 && /* @__PURE__ */ a2("div", { class: "fnc-menu-wrap", ref: sync.ref, children: [
       /* @__PURE__ */ a2(
         "button",
         {
           class: "fnc-btn fnc-btn-sync",
-          title: t3.sync,
+          "data-tip": t3.sync,
           "aria-label": t3.sync,
           "aria-haspopup": "menu",
           "aria-expanded": sync.open,
@@ -1532,7 +1563,7 @@ function LayoutMenu({ ctx, multi }) {
           children: /* @__PURE__ */ a2(LinkIcon, {})
         }
       ),
-      sync.open && /* @__PURE__ */ a2("div", { class: "fnc-menu fnc-sync-menu", role: "menu", "aria-label": t3.sync, children: [
+      sync.open && /* @__PURE__ */ a2("div", { class: "fnc-menu fnc-sync-menu", role: "menu", "aria-label": t3.sync, ref: syncMenuRef, children: [
         /* @__PURE__ */ a2("div", { class: "fnc-menu-title", children: [
           t3.sync,
           /* @__PURE__ */ a2("small", { children: t3.syncHint })
@@ -1711,7 +1742,7 @@ function SymbolSearch({ ctx }) {
               class: `fnc-sr-star${fav ? " is-on" : ""}`,
               "aria-pressed": fav,
               "aria-label": `${info.name} ${fav ? t3.removeFavorite : t3.addFavorite}`,
-              title: fav ? t3.removeFavorite : t3.addFavorite,
+              "data-tip": fav ? t3.removeFavorite : t3.addFavorite,
               onClick: (e3) => {
                 e3.stopPropagation();
                 toggleFavorite(info);
@@ -1746,7 +1777,7 @@ function SymbolSearch({ ctx }) {
             {
               class: "fnc-ind-btn",
               "aria-label": `${info.name} ${t3.removeRecent}`,
-              title: t3.removeRecent,
+              "data-tip": t3.removeRecent,
               onClick: (e3) => {
                 e3.stopPropagation();
                 save(RECENT_KEY, recent.filter((r3) => r3.symbol !== info.symbol), setRecent);
@@ -1784,7 +1815,7 @@ function SymbolSearch({ ctx }) {
         }
       ),
       query && /* @__PURE__ */ a2("button", { class: "fnc-ind-btn", "aria-label": t3.cancel, onClick: () => (setQuery(""), inputRef.current?.focus()), children: /* @__PURE__ */ a2(SmallCloseIcon, {}) }),
-      /* @__PURE__ */ a2("kbd", { class: "fnc-kbd fnc-hide-mobile", children: "ESC" })
+      /* @__PURE__ */ a2("button", { class: "fnc-kbd fnc-kbd-btn fnc-hide-mobile", "aria-label": t3.close, "data-tip": t3.close, onClick: close, children: "ESC" })
     ] }),
     /* @__PURE__ */ a2("div", { class: "fnc-tabs", role: "tablist", children: ctx.searchCategories.map((c3) => /* @__PURE__ */ a2("button", { class: "fnc-tab", role: "tab", "aria-selected": c3.id === category, onClick: () => setCategory(c3.id), children: c3.label[locale] })) }),
     /* @__PURE__ */ a2("div", { class: "fnc-sr-body", children: [
@@ -1819,7 +1850,7 @@ function SymbolSearch({ ctx }) {
         " ",
         t3.openAction
       ] }),
-      /* @__PURE__ */ a2("span", { children: [
+      /* @__PURE__ */ a2("button", { class: "fnc-sr-foot-btn", onClick: close, children: [
         /* @__PURE__ */ a2("kbd", { class: "fnc-kbd", children: "ESC" }),
         " ",
         t3.close
@@ -1848,7 +1879,7 @@ function Toolbar({ ctx }) {
       {
         class: "fnc-symbol",
         disabled: !canSearch,
-        title: canSearch ? t3.searchSymbol : void 0,
+        "data-tip": canSearch ? t3.searchSymbol : void 0,
         "aria-haspopup": "dialog",
         onClick: () => ctx.setSearchOpen(true),
         children: [
@@ -1861,29 +1892,31 @@ function Toolbar({ ctx }) {
     /* @__PURE__ */ a2("div", { class: "fnc-sep" }),
     /* @__PURE__ */ a2(IntervalPicker, { ctx }),
     /* @__PURE__ */ a2(Slot, { el: ctx.slots.toolbar }),
-    /* @__PURE__ */ a2("div", { class: "fnc-sep" }),
-    /* @__PURE__ */ a2(ChartTypeMenu, { ctx }),
-    /* @__PURE__ */ a2(
-      "button",
-      {
-        class: "fnc-btn fnc-btn-wide fnc-btn-label",
-        title: t3.addIndicator,
-        "aria-label": t3.addIndicator,
-        "aria-haspopup": "dialog",
-        onClick: () => ctx.store.set({ dialog: { kind: "indicators" } }),
-        children: [
-          /* @__PURE__ */ a2(IndicatorIcon, {}),
-          /* @__PURE__ */ a2("span", { children: t3.indicators })
-        ]
-      }
-    ),
-    ctx.multi && /* @__PURE__ */ a2(LayoutMenu, { ctx, multi: ctx.multi }),
     /* @__PURE__ */ a2("div", { class: "fnc-spacer" }),
+    /* @__PURE__ */ a2("div", { class: "fnc-tools", children: [
+      /* @__PURE__ */ a2(ChartTypeMenu, { ctx }),
+      /* @__PURE__ */ a2(
+        "button",
+        {
+          class: "fnc-btn fnc-btn-wide fnc-btn-label fnc-btn-indicators",
+          "data-tip": t3.addIndicator,
+          "aria-label": t3.addIndicator,
+          "aria-haspopup": "dialog",
+          onClick: () => ctx.store.set({ dialog: { kind: "indicators" } }),
+          children: [
+            /* @__PURE__ */ a2(IndicatorIcon, {}),
+            /* @__PURE__ */ a2("span", { children: t3.indicators })
+          ]
+        }
+      ),
+      ctx.multi && /* @__PURE__ */ a2(LayoutMenu, { ctx, multi: ctx.multi })
+    ] }),
+    /* @__PURE__ */ a2("div", { class: "fnc-sep" }),
     ctx.drawingToolbar && /* @__PURE__ */ a2(
       "button",
       {
         class: "fnc-btn fnc-btn-drawbar",
-        title: t3.drawingTools,
+        "data-tip": t3.drawingTools,
         "aria-label": t3.drawingTools,
         "aria-pressed": s3.drawbarOpen || s3.drawingTool !== null,
         onClick: () => ctx.store.set({ drawbarOpen: !s3.drawbarOpen }),
@@ -1894,20 +1927,20 @@ function Toolbar({ ctx }) {
     /* @__PURE__ */ a2(
       "button",
       {
-        class: "fnc-btn",
-        title: t3.chartSettings,
+        class: "fnc-btn fnc-btn-settings",
+        "data-tip": t3.chartSettings,
         "aria-label": t3.chartSettings,
         "aria-haspopup": "dialog",
         onClick: () => ctx.store.set({ dialog: { kind: "chartSettings" } }),
         children: /* @__PURE__ */ a2(SettingsIcon, {})
       }
     ),
-    /* @__PURE__ */ a2("button", { class: "fnc-btn fnc-btn-screenshot", title: t3.screenshot, "aria-label": t3.screenshot, onClick: ctx.screenshot, children: /* @__PURE__ */ a2(CameraIcon, {}) }),
+    /* @__PURE__ */ a2("button", { class: "fnc-btn fnc-btn-screenshot", "data-tip": t3.screenshot, "aria-label": t3.screenshot, onClick: ctx.screenshot, children: /* @__PURE__ */ a2(CameraIcon, {}) }),
     /* @__PURE__ */ a2(
       "button",
       {
-        class: "fnc-btn",
-        title: s3.fullscreen ? t3.exitFullscreen : t3.fullscreen,
+        class: "fnc-btn fnc-btn-fullscreen",
+        "data-tip": s3.fullscreen ? t3.exitFullscreen : t3.fullscreen,
         "aria-label": s3.fullscreen ? t3.exitFullscreen : t3.fullscreen,
         onClick: ctx.toggleFullscreen,
         children: s3.fullscreen ? /* @__PURE__ */ a2(CollapseIcon, {}) : /* @__PURE__ */ a2(ExpandIcon, {})
@@ -1945,7 +1978,7 @@ function IndicatorItem({ ctx, item }) {
           "button",
           {
             class: "fnc-ind-btn fnc-ind-eye",
-            title: item.visible ? t3.hide : t3.show,
+            "data-tip": item.visible ? t3.hide : t3.show,
             "aria-label": `${item.title} ${item.visible ? t3.hide : t3.show}`,
             "aria-pressed": !item.visible,
             onClick: (e3) => {
@@ -1956,13 +1989,13 @@ function IndicatorItem({ ctx, item }) {
           }
         ),
         /* @__PURE__ */ a2("span", { class: "fnc-ind-title", children: item.title }),
-        item.visible && item.values.map((v3) => /* @__PURE__ */ a2("b", { style: { color: v3.color }, title: v3.label, children: v3.value })),
+        item.visible && item.values.map((v3) => /* @__PURE__ */ a2("b", { style: { color: v3.color }, "data-tip": v3.label, children: v3.value })),
         /* @__PURE__ */ a2("span", { class: "fnc-ind-actions", children: [
           /* @__PURE__ */ a2(
             "button",
             {
               class: "fnc-ind-btn",
-              title: t3.indicatorSettings,
+              "data-tip": t3.indicatorSettings,
               "aria-label": `${item.title} ${t3.indicatorSettings}`,
               onClick: () => ctx.store.set({ dialog: { kind: "indicatorSettings", id: item.id } }),
               children: /* @__PURE__ */ a2(GearIcon, {})
@@ -1972,7 +2005,7 @@ function IndicatorItem({ ctx, item }) {
             "button",
             {
               class: "fnc-ind-btn",
-              title: t3.removeIndicator,
+              "data-tip": t3.removeIndicator,
               "aria-label": `${item.title} ${t3.removeIndicator}`,
               onClick: () => ctx.chart.removeIndicator(item.id),
               children: /* @__PURE__ */ a2(SmallCloseIcon, {})
@@ -2071,7 +2104,7 @@ function Legend({ ctx }) {
       ] }),
       values,
       !collapsed && overlayItems.map((item) => /* @__PURE__ */ a2(IndicatorItem, { ctx, item })),
-      overlayItems.length > 0 && (collapsed ? /* @__PURE__ */ a2("button", { class: "fnc-ind-handle", "aria-expanded": "false", "aria-label": t3.expand, title: t3.expand, onClick: () => setCollapsed(false), children: /* @__PURE__ */ a2("span", {}) }) : /* @__PURE__ */ a2("button", { class: "fnc-ind-collapse", "aria-expanded": "true", "aria-label": t3.collapse, title: t3.collapse, onClick: () => setCollapsed(true), children: /* @__PURE__ */ a2(CollapseLeftIcon, {}) }))
+      overlayItems.length > 0 && (collapsed ? /* @__PURE__ */ a2("button", { class: "fnc-ind-handle", "aria-expanded": "false", "aria-label": t3.expand, "data-tip": t3.expand, onClick: () => setCollapsed(false), children: /* @__PURE__ */ a2("span", {}) }) : /* @__PURE__ */ a2("button", { class: "fnc-ind-collapse", "aria-expanded": "true", "aria-label": t3.collapse, "data-tip": t3.collapse, onClick: () => setCollapsed(true), children: /* @__PURE__ */ a2(CollapseLeftIcon, {}) }))
     ] }),
     paneLegends.map(
       ({ pane, item }) => item && /* @__PURE__ */ a2("div", { class: "fnc-legend fnc-pane-legend", style: { top: `${pane.top + 4}px` }, children: /* @__PURE__ */ a2(IndicatorItem, { ctx, item }) })
@@ -2087,7 +2120,7 @@ function NavControls({ ctx }) {
   if (plotWidth <= 0) return null;
   const top = panesHeight - CONTROL_OFFSET;
   const page = () => Math.max(1, Math.round(plotWidth / ctx.chart.timeScale.barSpacing / 3));
-  const button = (label, onClick, icon) => /* @__PURE__ */ a2("button", { class: "fnc-btn", title: label, "aria-label": label, onClick, children: icon });
+  const button = (label, onClick, icon) => /* @__PURE__ */ a2("button", { class: "fnc-btn", "data-tip": label, "aria-label": label, onClick, children: icon });
   return /* @__PURE__ */ a2($, { children: [
     showButtons && /* @__PURE__ */ a2("div", { class: "fnc-nav", style: { left: `${plotWidth / 2}px`, top: `${top}px` }, children: [
       button(t3.zoomOut, () => ctx.chart.zoom(1 / ZOOM_STEP), /* @__PURE__ */ a2(MinusIcon, {})),
@@ -2101,7 +2134,7 @@ function NavControls({ ctx }) {
       {
         class: "fnc-realtime",
         style: { left: `${plotWidth - 44}px`, top: `${top}px` },
-        title: t3.toRealtime,
+        "data-tip": t3.toRealtime,
         "aria-label": t3.toRealtime,
         onClick: () => ctx.chart.scrollToRealtime(),
         children: /* @__PURE__ */ a2(ToRealtimeIcon, {})
@@ -2122,7 +2155,7 @@ function Attribution({ ctx }) {
       href: ATTRIBUTION_URL,
       target: "_blank",
       rel: "noopener",
-      title: label,
+      "data-tip": label,
       "aria-label": label,
       style: { top: `${panesHeight - 36}px` },
       children: [
@@ -2147,7 +2180,7 @@ function PaneMaximize({ ctx, multi }) {
     {
       class: "fnc-btn fnc-pane-max",
       style: { left: `${s3.layout.plotWidth - 36}px` },
-      title: `${label} (Alt+Enter)`,
+      "data-tip": `${label} (Alt+Enter)`,
       "aria-label": label,
       "aria-pressed": maximized,
       onClick: () => {
@@ -2693,6 +2726,45 @@ var CSS = (
   flex: none;
 }
 
+/* Tooltip (data-tip). Hosts can restyle it with --fnc-tip-bg / --fnc-tip-text. */
+.fnc-tip {
+  position: fixed;
+  z-index: 2147483001;
+  max-width: 240px;
+  padding: 6px 10px;
+  border-radius: 8px;
+  background: var(--fnc-tip-bg, #24242b);
+  color: var(--fnc-tip-text, #f2f2f4);
+  font-family: var(--fnc-font);
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 1.4;
+  white-space: nowrap;
+  box-shadow: 0 6px 20px rgb(0 0 0 / 0.28);
+  pointer-events: none;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 120ms cubic-bezier(0.4, 0, 1, 1), transform 120ms cubic-bezier(0.4, 0, 1, 1), visibility 0s 120ms;
+}
+.fnc-tip[data-side='bottom'] { transform: translateY(-4px); }
+.fnc-tip[data-side='top'] { transform: translateY(4px); }
+.fnc-tip[data-side='right'] { transform: translateX(-4px); }
+.fnc-tip.is-on {
+  opacity: 1;
+  visibility: visible;
+  transform: none;
+  transition: opacity 180ms cubic-bezier(0.16, 1, 0.3, 1), transform 180ms cubic-bezier(0.16, 1, 0.3, 1), visibility 0s;
+}
+@media (prefers-reduced-motion: reduce) { .fnc-tip, .fnc-tip.is-on { transform: none; } }
+@media (hover: none) { .fnc-tip { display: none; } }
+
+.fnc-tools { display: flex; align-items: center; gap: 4px; flex: none; }
+/* Right-hand menus open toward the left so they stay on screen. */
+.fnc-tools .fnc-menu { left: auto; right: 0; }
+.fnc-kbd-btn { cursor: pointer; }
+.fnc-kbd-btn:hover, .fnc-sr-foot-btn:hover { color: var(--fnc-text); }
+.fnc-sr-foot-btn { display: inline-flex; align-items: center; gap: 4px; font-size: inherit; color: inherit; cursor: pointer; }
+
 .fnc-up { color: var(--fnc-up); }
 .fnc-down { color: var(--fnc-down); }
 .fnc-flat { color: var(--fnc-text); }
@@ -2943,7 +3015,7 @@ var CSS = (
   content: '';
   position: absolute;
   inset: 0;
-  border: 1px solid var(--fnc-accent);
+  border: 1px solid var(--fnc-text-2);
   pointer-events: none;
   z-index: 3;
 }
@@ -2953,7 +3025,7 @@ var CSS = (
 .fnc-splitter-row::after { inset: 0 -4px; }
 .fnc-splitter-col { height: 1px; cursor: row-resize; }
 .fnc-splitter-col::after { inset: -4px 0; }
-.fnc-splitter:hover { background: var(--fnc-accent); }
+.fnc-splitter:hover { background: var(--fnc-text-2); }
 .fnc-resizing-x, .fnc-resizing-x * { cursor: col-resize !important; user-select: none; }
 .fnc-resizing-y, .fnc-resizing-y * { cursor: row-resize !important; user-select: none; }
 .fnc-parking { display: none; }
@@ -3004,7 +3076,7 @@ var CSS = (
   background: var(--fnc-surface);
   font-size: 11px;
 }
-.fnc-pane-tab[aria-selected='true'] .fnc-pane-tab-num { background: var(--fnc-accent); color: #fff; }
+.fnc-pane-tab[aria-selected='true'] .fnc-pane-tab-num { background: var(--fnc-text-2); color: var(--fnc-bg); }
 .fnc-layout-menu { min-width: 0; gap: 2px; padding: 8px; }
 .fnc-layout-row { display: flex; align-items: center; gap: 2px; }
 .fnc-layout-count { width: 16px; flex: none; font-size: 12px; color: var(--fnc-text-2); text-align: center; }
@@ -3017,7 +3089,7 @@ var CSS = (
   color: var(--fnc-text-2);
 }
 .fnc-layout-opt:hover { background: var(--fnc-surface); color: var(--fnc-text); }
-.fnc-layout-opt[aria-checked='true'] { background: var(--fnc-surface); color: var(--fnc-accent); }
+.fnc-layout-opt[aria-checked='true'] { background: var(--fnc-surface); color: var(--fnc-text); }
 .fnc-sync-menu { min-width: 220px; }
 .fnc-menu-title { display: flex; flex-direction: column; gap: 2px; padding: 6px 10px 8px; font-size: 13px; font-weight: 600; color: var(--fnc-text); }
 .fnc-menu-title small { font-size: 12px; font-weight: 400; color: var(--fnc-text-2); }
@@ -3025,9 +3097,8 @@ var CSS = (
 .fnc-sync-item[aria-checked='true'] { background: none; color: var(--fnc-text); }
 .fnc-sync-item:hover { background: var(--fnc-surface); }
 .fnc-sync-item .fnc-switch { display: inline-block; transform: scale(0.8); transform-origin: right center; }
-.fnc-switch[data-on='true'] { background: var(--fnc-accent); }
+.fnc-switch[data-on='true'] { background: var(--fnc-text-2); }
 .fnc-switch[data-on='true']::after { transform: translateX(16px); }
-.fnc-btn-sync[aria-pressed='true'] { color: var(--fnc-accent); }
 
 /* \u2500\u2500 Mobile \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\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
 @media (max-width: 640px) {
@@ -3107,6 +3178,77 @@ function div(className, parent) {
   parent?.appendChild(el);
   return el;
 }
+function bindTooltips(root) {
+  const tip = div("fnc-tip", root);
+  tip.setAttribute("role", "tooltip");
+  tip.id = `fnc-tip-${Math.random().toString(36).slice(2, 8)}`;
+  let current = null;
+  let timer;
+  let hiddenAt = 0;
+  const place = (el) => {
+    const r3 = el.getBoundingClientRect();
+    const w3 = tip.offsetWidth;
+    const h3 = tip.offsetHeight;
+    const vw = window.innerWidth;
+    const vh = window.innerHeight;
+    let side = el.closest(".fnc-drawbar") ? "right" : el.closest(".fnc-nav") ? "top" : "bottom";
+    if (side === "bottom" && r3.bottom + h3 + 10 > vh) side = "top";
+    let left = side === "right" ? r3.right + 8 : r3.left + r3.width / 2 - w3 / 2;
+    const top = side === "right" ? r3.top + r3.height / 2 - h3 / 2 : side === "top" ? r3.top - h3 - 6 : r3.bottom + 6;
+    left = Math.max(4, Math.min(vw - w3 - 4, left));
+    tip.style.left = `${Math.round(left)}px`;
+    tip.style.top = `${Math.round(top)}px`;
+    tip.dataset.side = side;
+  };
+  const show = (el) => {
+    const text = el.dataset.tip;
+    if (!text || !el.isConnected) return;
+    tip.textContent = text;
+    el.setAttribute("aria-describedby", tip.id);
+    place(el);
+    tip.classList.add("is-on");
+  };
+  const hide = () => {
+    clearTimeout(timer);
+    if (tip.classList.contains("is-on")) hiddenAt = Date.now();
+    tip.classList.remove("is-on");
+    current?.removeAttribute("aria-describedby");
+    current = null;
+  };
+  const target = (e3) => e3.target instanceof Element ? e3.target.closest("[data-tip]") : null;
+  const onOver = (e3) => {
+    if (e3.pointerType === "touch") return;
+    const el = target(e3);
+    if (el === current) return;
+    hide();
+    if (!el || !root.contains(el)) return;
+    current = el;
+    timer = setTimeout(() => show(el), Date.now() - hiddenAt < 300 ? 0 : 350);
+  };
+  const onFocus = (e3) => {
+    const el = target(e3);
+    if (!el || !e3.target.matches?.(":focus-visible")) return;
+    hide();
+    current = el;
+    show(el);
+  };
+  root.addEventListener("pointerover", onOver);
+  root.addEventListener("pointerleave", hide);
+  root.addEventListener("pointerdown", hide, true);
+  root.addEventListener("wheel", hide, { passive: true });
+  root.addEventListener("focusin", onFocus);
+  root.addEventListener("focusout", hide);
+  return () => {
+    hide();
+    root.removeEventListener("pointerover", onOver);
+    root.removeEventListener("pointerleave", hide);
+    root.removeEventListener("pointerdown", hide, true);
+    root.removeEventListener("wheel", hide);
+    root.removeEventListener("focusin", onFocus);
+    root.removeEventListener("focusout", hide);
+    tip.remove();
+  };
+}
 function createShell(container, options) {
   injectStyles(container.ownerDocument);
   const storage = createStorage(options.storageKey);
@@ -3133,6 +3275,7 @@ function createShell(container, options) {
     bottom: div("fnc-slot fnc-slot-bottom"),
     footer: div("fnc-slot fnc-slot-footer")
   };
+  const unbindTips = bindTooltips(root);
   const body = div("fnc-body", root);
   const drawbarHost = options.drawingToolbar ? div("fnc-drawbar-host", body) : null;
   const main = div("fnc-main", body);
@@ -3198,6 +3341,7 @@ function createShell(container, options) {
       options.onFavoriteIntervalsChange?.(favoriteIntervals);
     },
     destroy: () => {
+      unbindTips();
       document.removeEventListener("fullscreenchange", onFullscreenChange);
       darkQuery?.removeEventListener?.("change", onSchemeChange);
       if (isNativeFullscreen()) void document.exitFullscreen();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@funnest/charts-ui",
-  "version": "0.5.0",
+  "version": "0.5.2",
   "description": "Pro trading UI (toolbar, drawing tools, sheets) for Funnest Charts. Framework-agnostic.",
   "keywords": [
     "chart",
@@ -42,7 +42,7 @@
     "NOTICE"
   ],
   "dependencies": {
-    "@funnest/charts": "0.5.0"
+    "@funnest/charts": "0.5.2"
   },
   "devDependencies": {
     "preact": "^11.2.0"