acttrader-charts 1.3.0-beta.30 → 1.3.0-beta.31

package/README.md

@@ -1423,6 +1423,16 @@ chart.on('snapshot', ({ dataUrl, action }) => {
 });
 ```
 
+### On mobile
+
+The `'mobile'` header shows the same Layout button when `enableMultipleLayouts: true`, and
+opens the same preset popover. For apps that draw their own header, the native-UI catalog
+(`catalog` event / `getCatalog`) carries a `layouts` section — every preset above with its
+`id`, `label`, `count`, `cols`, `rows`, `areas` and `icon`, plus the five sync toggles with
+their defaults — and the `layouts` toolbar entry. The app sends `setLayoutPreset(presetId)`,
+receives `layoutChange`, and mounts that many chart views itself; see the Android and iOS
+READMEs.
+
 ### Seeding & restoring the popover's sync toggles
 
 The layout popover's five sync toggles (`symbol` / `interval` / `crosshair` / `time` / `dateRange`) default to `DEFAULT_LAYOUT_SYNC`. To open the popover in a different state — e.g. restoring a user's saved preference — pass a **partial** `layoutSync` at construction (omitted keys keep their `DEFAULT_LAYOUT_SYNC` value):

package/dist/index.cjs

@@ -8486,9 +8486,11 @@ var IC_SETTINGS2 = (sz = 16) => lucide4(
   1.75
 );
 var MobileHeader = class {
-  constructor(onTimeframeChange, toolsController, onAskAiClick, onSettingsClick, onSeriesChange, currentTf, currentSeries, theme, fontFamily, enabledGates = [], showCrosshairBtn = false, initialCrosshairEnabled = true, onCrosshairToggle = null, onReplayClick = null) {
+  constructor(onTimeframeChange, toolsController, onAskAiClick, onSettingsClick, onSeriesChange, currentTf, currentSeries, theme, fontFamily, enabledGates = [], showCrosshairBtn = false, initialCrosshairEnabled = true, onCrosshairToggle = null, onReplayClick = null, onLayoutClick = null) {
     this.replayBtn = null;
     this.replayActive = false;
+    this.layoutBtn = null;
+    this.layoutActive = false;
     this.toolsBtn = null;
     this.tfBtns = /* @__PURE__ */ new Map();
     this.toolsActive = false;
@@ -8504,6 +8506,7 @@ var MobileHeader = class {
     this.onAskAiClick = onAskAiClick;
     this.onSettingsClick = onSettingsClick;
     this.onReplayClick = onReplayClick;
+    this.onLayoutClick = onLayoutClick;
     this.onSeriesChange = onSeriesChange;
     this.currentTf = currentTf;
     this.currentSeries = currentSeries;
@@ -8718,6 +8721,34 @@ var MobileHeader = class {
       this.replayBtn = btn;
       this.el.appendChild(btn);
     }
+    if (this.onLayoutClick) {
+      const btn = document.createElement("button");
+      btn.setAttribute("data-testid", "m-layout-btn");
+      btn.title = "Layout";
+      btn.setAttribute("aria-label", "Layout");
+      btn.innerHTML = ICON_LAYOUT;
+      Object.assign(btn.style, {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: "6px",
+        borderRadius: "4px",
+        border: "none",
+        whiteSpace: "nowrap",
+        flexShrink: "0",
+        cursor: "pointer",
+        outline: "none",
+        background: "transparent",
+        color: this.theme.axisText,
+        transition: "color 0.15s, background 0.15s"
+      });
+      btn.addEventListener("click", (e) => {
+        e.stopPropagation();
+        this.onLayoutClick?.();
+      });
+      this.layoutBtn = btn;
+      this.el.appendChild(btn);
+    }
     if (this.onSettingsClick) {
       const btn = document.createElement("button");
       btn.setAttribute("data-testid", "m-chart-settings-btn");
@@ -8941,6 +8972,7 @@ var MobileHeader = class {
   setTheme(theme) {
     this.theme = theme;
     if (this.replayBtn) this.replayBtn.style.color = this.replayActive ? theme.ui.accent : theme.axisText;
+    if (this.layoutBtn) this.layoutBtn.style.color = this.layoutActive ? theme.ui.accent : theme.axisText;
     this.build();
     this.setDrawingsBtnActive(this.toolsActive);
     this.sheet?.setTheme(theme);
@@ -8993,12 +9025,18 @@ var MobileHeader = class {
   }
   setTfcActive(_enabled) {
   }
-  setLayoutPresetIcon(_svgHtml, _active) {
+  /** Shows the picked preset's glyph on the Layout button, tinted while a grid is active. */
+  setLayoutPresetIcon(svgHtml, active) {
+    if (!this.layoutBtn) return;
+    this.layoutBtn.innerHTML = svgHtml;
+    this.setLayoutActive(active === true);
   }
-  setLayoutActive(_active) {
+  setLayoutActive(active) {
+    this.layoutActive = active;
+    if (this.layoutBtn) this.layoutBtn.style.color = active ? this.theme.ui.accent : this.theme.axisText;
   }
   getLayoutBtnEl() {
-    return null;
+    return this.layoutBtn;
   }
   getSnapshotBtnEl() {
     return null;
@@ -9369,10 +9407,11 @@ var LayoutPopover = class {
     const wasVisible = this.isVisible;
     const rect = anchor.getBoundingClientRect();
     const top = rect.bottom + 6;
-    const right = Math.max(8, window.innerWidth - rect.right);
     this.el.style.top = `${top}px`;
-    this.el.style.right = `${right}px`;
     this.el.style.display = "block";
+    const wanted = Math.max(8, window.innerWidth - rect.right);
+    const maxRight = Math.max(8, window.innerWidth - this.el.offsetWidth - 8);
+    this.el.style.right = `${Math.min(wanted, maxRight)}px`;
     if (!wasVisible) this.onVisibilityChange?.();
   }
   hide() {
@@ -38670,7 +38709,8 @@ var _ChartEngine = class _ChartEngine {
             (enabled) => {
               this.setCrosshairEnabled(enabled);
             },
-            this.replayEnabled ? () => this.toggleReplay() : null
+            this.replayEnabled ? () => this.toggleReplay() : null,
+            showLayoutBtn ? onLayoutBtnClick : null
           );
           this.wrapper.appendChild(this.mobileHeader.el);
         } else if (useCompactHeader) {
@@ -42939,7 +42979,7 @@ var _ChartEngine = class _ChartEngine {
   // ── Multi-layout & snapshot popover wiring ────────────────────────────────
   openLayoutPopover() {
     if (!this.layoutPopover) return;
-    const anchor = this.advancedToolbar?.getLayoutBtnEl() ?? this.topBar?.getLayoutBtnEl();
+    const anchor = this.advancedToolbar?.getLayoutBtnEl() ?? this.topBar?.getLayoutBtnEl() ?? this.mobileHeader?.getLayoutBtnEl();
     if (!anchor) return;
     if (this.layoutPopover.isVisible) {
       this.layoutPopover.hide();