@funnest/charts-ui 0.5.0 → 0.5.1

package/dist/index.js

@@ -1450,6 +1450,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" })) });
 }
@@ -1518,7 +1519,7 @@ 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",
         {
@@ -1784,7 +1785,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, title: 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 +1820,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
@@ -1861,24 +1862,26 @@ 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",
+          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-sep" }),
     ctx.drawingToolbar && /* @__PURE__ */ a2(
       "button",
       {
@@ -2693,6 +2696,13 @@ var CSS = (
   flex: 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 +2953,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 +2963,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 +3014,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 +3027,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 +3035,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) {

package/package.json

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