@funnest/charts-ui 0.3.0 → 0.4.0

package/dist/components/slot.d.ts

@@ -2,6 +2,7 @@
  * Mounts a persistent, host-owned element inside Preact-rendered UI. The element outlives
  * re-renders, so whatever the host app rendered into it (React, Vue, plain DOM) stays intact.
  */
-export declare function Slot({ el }: {
+export declare function Slot({ el, fixed }: {
     el: HTMLElement;
+    fixed?: boolean;
 }): import("preact").JSX.Element;

package/dist/index.js

@@ -1604,13 +1604,13 @@ function IntervalPicker({ ctx }) {
 }
 
 // src/components/slot.tsx
-function Slot({ el }) {
+function Slot({ el, fixed = false }) {
   const ref = T2(null);
   F2(() => {
     ref.current?.appendChild(el);
     return () => el.remove();
   }, [el]);
-  return /* @__PURE__ */ a2("div", { class: "fnc-slot-host", ref });
+  return /* @__PURE__ */ a2("div", { class: fixed ? "fnc-slot-host fnc-slot-host-fixed" : "fnc-slot-host", ref });
 }
 
 // src/components/symbol-search.tsx
@@ -1912,7 +1912,7 @@ function Toolbar({ ctx }) {
         children: /* @__PURE__ */ a2(PencilIcon, {})
       }
     ),
-    /* @__PURE__ */ a2(Slot, { el: ctx.slots.toolbarEnd }),
+    /* @__PURE__ */ a2(Slot, { el: ctx.slots.toolbarEnd, fixed: true }),
     /* @__PURE__ */ a2(
       "button",
       {
@@ -2025,7 +2025,10 @@ var CSS = (
   border-radius: var(--fnc-radius);
   font-weight: 700;
   font-size: 15px;
-  flex: none;
+  /* The symbol gives way first when the toolbar is tight: its name truncates, never overlaps. */
+  flex: 0 1 auto;
+  min-width: 36px;
+  overflow: hidden;
 }
 .fnc-symbol .fnc-icon { color: var(--fnc-text-2); display: flex; }
 .fnc-symbol-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@@ -2278,6 +2281,8 @@ var CSS = (
 /* \u2500\u2500 Slots: host-app UI inside the widget (collapse when empty) \u2500\u2500 */
 .fnc-slot:empty { display: none; }
 .fnc-slot-host { display: flex; align-self: stretch; min-width: 0; flex: 0 1 auto; }
+/* Buttons next to the gear keep their size (they'd otherwise slide under it on phones). */
+.fnc-slot-host-fixed { flex: none; }
 .fnc-slot-toolbar { position: relative; display: flex; align-items: center; min-width: 0; padding-left: 9px; margin-left: 4px; }
 .fnc-slot-toolbar::before {
   content: '';
@@ -2686,10 +2691,23 @@ var CSS = (
 .fnc-action-primary { background: var(--fnc-accent); color: #fff; }
 .fnc-action-danger { flex: 0 0 auto; padding: 0 16px; color: var(--fnc-danger, #F04452); background: none; }
 
+/* \u2500\u2500 Narrow phones (\u2264 400px): drop the menu chevrons and separators so every button fits \u2500\u2500 */
+@media (max-width: 400px) {
+  .fnc-toolbar .fnc-btn-wide > svg:last-child { display: none; }
+  .fnc-toolbar .fnc-btn-wide { padding: 0 3px; }
+  .fnc-toolbar > .fnc-sep { display: none; }
+  .fnc-toolbar > .fnc-spacer { min-width: 0; }
+}
+
 /* \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) {
-  .fnc-toolbar { padding: 0 4px; }
+  .fnc-toolbar { padding: 0 4px; gap: 2px; }
+  .fnc-toolbar .fnc-btn { width: 32px; height: 32px; }
+  .fnc-toolbar .fnc-btn-wide, .fnc-toolbar .fnc-btn-label { width: auto; padding: 0 6px; }
+  .fnc-toolbar .fnc-sep { margin: 0 2px; }
   .fnc-symbol { max-width: 140px; padding: 0 8px 0 6px; }
+  /* Logo only on phones; the name is in the chart legend right below. */
+  .fnc-toolbar .fnc-symbol:has(.fnc-avatar) :is(.fnc-symbol-name, .fnc-icon) { display: none; }
   .fnc-chip { padding: 0 8px; }
   .fnc-btn-screenshot { display: none; }
   .fnc-btn-label span { display: none; }
@@ -2715,7 +2733,7 @@ var CSS = (
   .fnc-dialog.fnc-search-dialog { width: 100%; height: 100%; }
   .fnc-sr-footer, .fnc-sr-side, .fnc-hide-mobile, .fnc-sr-spark { display: none; }
   /* The interval button must stay whole; the symbol name truncates instead. */
-  .fnc-symbol { flex: 0 1 auto; min-width: 0; }
+  .fnc-symbol { flex: 0 1 auto; min-width: 36px; }
   /* MA rows wrap to two lines: [label \u2713 color width \xD7] / [source period] */
   .fnc-rows .fnc-row { flex-wrap: wrap; row-gap: 8px; padding-bottom: 10px; border-bottom: 1px solid var(--fnc-border); }
   /* Basis = row \u2212 indent(52) \u2212 gap(8) \u2212 period(72): too wide for line 1, so it always wraps. */

package/package.json

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