@funnest/charts-ui 0.6.7 → 0.6.9

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

@@ -1,4 +1,4 @@
-import type { JSX } from 'preact';
+import { type JSX } from 'preact';
 import type { WidgetContext } from '../context';
 /** Left vertical tool bar (TradingView layout). On narrow screens it slides in over the chart. */
 export declare function DrawingToolbar({ ctx }: {

package/dist/icons.d.ts

@@ -13,6 +13,7 @@ export declare const ChevronDownIcon: () => import("preact").JSX.Element;
 export declare const CursorIcon: () => import("preact").JSX.Element;
 export declare const TrendLineIcon: () => import("preact").JSX.Element;
 export declare const HorizontalLineIcon: () => import("preact").JSX.Element;
+/** Retracement levels at their real (uneven) spacing, with the swing they're drawn on. */
 export declare const FibonacciIcon: () => import("preact").JSX.Element;
 export declare const TrashIcon: () => import("preact").JSX.Element;
 export declare const PencilIcon: () => import("preact").JSX.Element;

package/dist/index.js

@@ -771,7 +771,10 @@ var HorizontalLineIcon = () => /* @__PURE__ */ a3(Icon, { children: [
   /* @__PURE__ */ a3("path", { d: "M3 10h14" }),
   /* @__PURE__ */ a3("circle", { cx: "10", cy: "10", r: "1.6", fill: "currentColor" })
 ] });
-var FibonacciIcon = () => /* @__PURE__ */ a3(Icon, { children: /* @__PURE__ */ a3("path", { d: "M3 4.5h14M3 8.2h14M3 11.8h14M3 15.5h14" }) });
+var FibonacciIcon = () => /* @__PURE__ */ a3(Icon, { children: [
+  /* @__PURE__ */ a3("path", { d: "M3 3.5h14M3 7.4h14M3 9.9h14M3 12.3h14M3 16.5h14" }),
+  /* @__PURE__ */ a3("path", { d: "M4.5 16.5 15.5 3.5", "stroke-dasharray": "1.6 1.8", opacity: "0.7" })
+] });
 var TrashIcon = () => /* @__PURE__ */ a3(Icon, { children: /* @__PURE__ */ a3("path", { d: "M4.5 6h11M8 6V4.5h4V6M6 6l.7 9.5h6.6L14 6" }) });
 var PencilIcon = () => /* @__PURE__ */ a3(Icon, { children: /* @__PURE__ */ a3("path", { d: "M12.8 4.2l3 3L7.5 15.5 4 16l.5-3.5z" }) });
 var CandlesIcon = () => /* @__PURE__ */ a3(Icon, { children: [
@@ -941,10 +944,17 @@ 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, {}) }),
-    open && /* @__PURE__ */ a3("div", { class: "fnc-menu fnc-tool-menu", role: "menu", children: tools.map((def) => /* @__PURE__ */ a3("button", { class: "fnc-menu-item", role: "menuitemradio", "aria-checked": def.type === current.type, onClick: () => pick(def), children: [
-      /* @__PURE__ */ a3(ToolIcon, { def, locale: s3.locale }),
-      /* @__PURE__ */ a3("span", { children: def.name[s3.locale] })
-    ] })) })
+    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];
+      return /* @__PURE__ */ a3($, { children: [
+        heading && /* @__PURE__ */ a3("div", { class: `fnc-tool-section${i3 > 0 ? " is-after" : ""}`, role: "presentation", children: section }),
+        /* @__PURE__ */ a3("button", { class: "fnc-menu-item", role: "menuitemradio", "aria-checked": def.type === current.type, onClick: () => pick(def), children: [
+          /* @__PURE__ */ a3(ToolIcon, { def, locale: s3.locale }),
+          /* @__PURE__ */ a3("span", { children: def.name[s3.locale] })
+        ] })
+      ] }, def.type);
+    }) })
   ] });
 }
 function DrawingToolbar({ ctx }) {
@@ -1210,7 +1220,7 @@ function IndicatorPicker({ ctx }) {
     ctx.chart.addIndicator(type);
     close();
   };
-  const all = ctx.chart.indicatorDefinitions();
+  const all = ctx.chart.indicatorDefinitions().filter((d3) => !d3.hidden);
   const q2 = query.trim().toLowerCase();
   const matches = (d3) => !q2 || [d3.type, d3.name.ko, d3.name.en, d3.description[locale]].some((s3) => s3.toLowerCase().includes(q2));
   const groups = [
@@ -3466,7 +3476,9 @@ var CSS = (
   opacity: 0.7;
 }
 .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: 180px; }
+.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); }
 .fnc-tool-menu .fnc-menu-item { white-space: nowrap; }
 .fnc-tool-letter { font-size: 13px; font-weight: 700; }
 .fnc-svg-icon { display: inline-flex; }

package/package.json

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