@luxalgo/vela 0.6.14 → 0.6.16

package/dist/{chunk-F4M24ANM.js → chunk-I77F2SVE.js}

@@ -1,4 +1,4 @@
-import { svg24, NEUTRAL, BEARISH, WARNING, BULLISH, INFO, ACCENT_BRIGHT, VALID, INVALID, MARKER, ACCENT, injectStyles, iconEl } from './chunk-KG4YT3TI.js';
+import { svg24, NEUTRAL, BEARISH, WARNING, BULLISH, INFO, ACCENT_BRIGHT, VALID, INVALID, MARKER, ACCENT, injectStyles, iconEl } from './chunk-6DPAYEGO.js';
 
 // src/core/native-indicators/NativeIndicator.ts
 var REGISTRY = /* @__PURE__ */ new Map();
@@ -5890,6 +5890,12 @@ function rendererLayers() {
   return [...registry2.values()];
 }
 
+// src/core/model/identity.ts
+function stableSeriesId(parts) {
+  const normTitle = parts.title.trim().toLowerCase().replace(/\s+/g, "-");
+  return `${parts.instanceId}:${parts.kind}:${normTitle}#${parts.ordinal}`;
+}
+
 // src/widget/topbar-composition.ts
 var TOPBAR_BUILTIN_IDS = ["symbol", "timeframes", "style", "layout", "indicators", "actions", "undo-redo", "alerts", "panels", "screenshot"];
 var TOPBAR_DEFAULT_LEFT = ["symbol", "timeframes", "style", "layout", "indicators", "actions", "undo-redo"];
@@ -6124,6 +6130,22 @@ var CSS = `
 }
 .vela-panel-close .vela-icon { width: 16px; height: 16px; }
 .vela-panel-close:hover { background: var(--vela-hover); color: var(--vela-fg-bright); }
+/* The pin: same footprint as the close button it sits beside; filled + bright once pinned. */
+.vela-panel-pin {
+    all: unset;
+    cursor: pointer;
+    width: 26px;
+    height: 26px;
+    flex: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 4px;
+    color: var(--vela-fg-muted);
+}
+.vela-panel-pin .vela-icon { width: 15px; height: 15px; }
+.vela-panel-pin:hover { background: var(--vela-hover); color: var(--vela-fg-bright); }
+.vela-panel-pin[data-on='1'] { color: var(--vela-fg-bright); }
 .vela-panel-body { flex: 1; overflow: auto; padding: 8px; }
 .vela-panel-body::-webkit-scrollbar { width: 8px; }
 .vela-panel-body::-webkit-scrollbar-thumb { background: var(--vela-scroll); border-radius: 4px; border: 2px solid transparent; background-clip: padding-box; }
@@ -6148,8 +6170,23 @@ var CSS = `
     width: 1px;
     background: transparent;
 }
+/* The same hover ink as the workspace grid splitters and the canvas pane separators, so
+   every draggable seam in the shell reads as one family. */
 .vela-panel-resizer:hover::after,
-.vela-panel-resizer[data-dragging]::after { background: var(--vela-accent); }
+.vela-panel-resizer[data-dragging]::after { background: var(--vela-separator-hover-line); }
+/* An OVERLAY panel floats over the chart's right edge instead of taking a column: the
+   chart keeps its width and layout (the dock host is position:relative \u2014 the anchoring the
+   mobile rule below relies on too). Same z-order as that mobile overlay, above the chart's
+   own DOM overlays; the shadow separates it from the plot it covers. */
+.vela-panel[data-overlay] {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    max-width: 100%;
+    z-index: 25;
+    box-shadow: var(--vela-shadow);
+}
 /* Mobile: a 280px column would crush a phone-width chart \u2014 the panel overlays the
    chart area instead (its flex parent is position:relative), full-bleed, closed by
    the same header \u2715. Width dragging is a pointer affordance; off on mobile. */
@@ -6180,6 +6217,10 @@ var SidePanel = class {
     /** Notified when the USER settles a new width (drag release, or double-click reset) — never on
      *  a programmatic {@link setWidth}, so restoring a persisted width raises no change. */
     this.onWidthChange = null;
+    /** Notified when the USER pins or unpins a floating panel (`overlay` is the NEW placement) —
+     *  never on a programmatic {@link setOverlay}, for the same reason as widths. */
+    this.onPlacementChange = null;
+    this.pin = null;
     const doc = host.ownerDocument;
     injectStyles(STYLE_ID, CSS, doc);
     this.minWidth = opts.resizable ? opts.minWidth ?? DEFAULT_PANEL_MIN_WIDTH : 1;
@@ -6189,6 +6230,9 @@ var SidePanel = class {
     this.el = doc.createElement("div");
     this.el.className = `vela-panel ${modifier}`;
     this.el.hidden = true;
+    this.floatable = opts.overlay === true;
+    this.overlayOn = this.floatable;
+    if (this.overlayOn) this.el.dataset.overlay = "1";
     this.el.style.setProperty("--vela-panel-w", `${this.widthPx}px`);
     const header = doc.createElement("div");
     header.className = "vela-panel-header";
@@ -6202,7 +6246,16 @@ var SidePanel = class {
     close.appendChild(iconEl("close", doc));
     close.title = "Close";
     close.addEventListener("click", () => this.toggle(false));
-    header.append(this.heading, this.slot, close);
+    if (this.floatable) {
+      this.pin = doc.createElement("button");
+      this.pin.className = "vela-panel-pin";
+      this.pin.addEventListener("click", () => {
+        this.setOverlay(!this.overlayOn);
+        this.onPlacementChange?.(this.overlayOn);
+      });
+      this.refreshPin();
+    }
+    header.append(this.heading, this.slot, ...this.pin ? [this.pin] : [], close);
     this.body = doc.createElement("div");
     this.body.className = "vela-panel-body";
     this.el.append(header, this.body);
@@ -6244,6 +6297,29 @@ var SidePanel = class {
     this.widthPx = next;
     this.el.style.setProperty("--vela-panel-w", `${next}px`);
   }
+  /** Whether the panel floats over the chart right now (false for every docked panel). */
+  get overlay() {
+    return this.overlayOn;
+  }
+  /** Float or dock the panel. Only a panel declared `overlay` can float — on any other this is
+   *  a no-op. Silent — {@link onPlacementChange} reports the user's pin clicks only. */
+  setOverlay(overlay) {
+    if (!this.floatable || overlay === this.overlayOn) return;
+    this.overlayOn = overlay;
+    if (overlay) this.el.dataset.overlay = "1";
+    else delete this.el.dataset.overlay;
+    this.refreshPin();
+  }
+  refreshPin() {
+    if (!this.pin) return;
+    const pinned = !this.overlayOn;
+    const doc = this.pin.ownerDocument;
+    this.pin.replaceChildren(iconEl(pinned ? "pin-filled" : "pin", doc));
+    this.pin.dataset.on = pinned ? "1" : "0";
+    this.pin.title = pinned ? "Unpin \u2014 float over the chart" : "Pin beside the chart";
+    this.pin.setAttribute("aria-label", this.pin.title);
+    this.pin.setAttribute("aria-pressed", pinned ? "true" : "false");
+  }
   destroy() {
     this.el.remove();
   }
@@ -6289,4 +6365,4 @@ var SidePanel = class {
   }
 };
 
-export { AnchoredVwap, ArrowMark, Callout, CalloutBase, Comment, DEDEKIND_CURVATURE_OPTIONS, DEFAULT_DRAWING_COLOR, DEFAULT_PANEL_MAX_WIDTH, DEFAULT_PANEL_MIN_WIDTH, DEFAULT_PANEL_ORDER, DEFAULT_PANEL_WIDTH, DIRECTION_OPTIONS, DedekindTessellation, Drawing, FibRatios, FibSpiral, FixedRangeVolumeProfile, GANN_SQUARE_ARCS, GLYPH_OPTIONS, GannSquare, GlyphStamp, LINE_STYLE_OPTIONS, MACH_NUMBER_OPTIONS, MACH_WAVE_COUNT_OPTIONS, MAGNIFIER_TIMEFRAME_OPTIONS, MachFigure, Magnifier, MeasureBox, Note, OVERRIDABLE_TOPBAR_IDS, PatternDrawing, PositionTool, PriceLabel, PriceNote, RadialFib, RegressionChannel, STAMP_SIZE_OPTIONS, SegmentDrawing, SidePanel, Signpost, TEXT_SIZE_OPTIONS, TOPBAR_BUILTIN_IDS, TOPBAR_DEFAULT_LEFT, TOPBAR_DEFAULT_RIGHT, TextLabel, chartType, chartTypes, clampPanelWidth, createDrawing, deserializeDrawing, drawingTypes, foldBaseModulation, formatDuration, getDrawingType, getNativeIndicator, inputDeltas, inputVisible, legendActions, legendActionsProviderFor, legendCallouts, legendCalloutsProviderFor, lineSegmentIntersection, magnifierTimeframeLabel, nativeIndicatorDescriptors, nativeIndicatorTypes, normalizeSettingsRow, pinnedTopbarActionIds, registerChartType, registerDefaultEngine, registerDrawingType, registerLegendAction, registerLegendCallout, registerNativeIndicator, registerRendererDefaults, registerRendererLayer, registerSidePanel, registerStatePersistence, registerSymbolRanking, registerWidgetAction, registerWidgetAttachment, rendererDefaults, rendererLayers, resetDrawingSettings, resolveEngines, resolveTopbarComposition, settingsRowValueKeys, settingsRowVisible, sidePanels, statePersistenceHandlers, symbolRanking, tickerModifierIds, topbarActionOverride, topbarHas, unregisterChartType, unregisterDefaultEngine, unregisterLegendAction, unregisterLegendCallout, unregisterNativeIndicator, unregisterRendererDefaults, unregisterRendererLayer, unregisterSidePanel, unregisterStatePersistence, unregisterWidgetAction, unregisterWidgetAttachment, widgetActions, widgetAttachments };
+export { AnchoredVwap, ArrowMark, Callout, CalloutBase, Comment, DEDEKIND_CURVATURE_OPTIONS, DEFAULT_DRAWING_COLOR, DEFAULT_PANEL_MAX_WIDTH, DEFAULT_PANEL_MIN_WIDTH, DEFAULT_PANEL_ORDER, DEFAULT_PANEL_WIDTH, DIRECTION_OPTIONS, DedekindTessellation, Drawing, FibRatios, FibSpiral, FixedRangeVolumeProfile, GANN_SQUARE_ARCS, GLYPH_OPTIONS, GannSquare, GlyphStamp, LINE_STYLE_OPTIONS, MACH_NUMBER_OPTIONS, MACH_WAVE_COUNT_OPTIONS, MAGNIFIER_TIMEFRAME_OPTIONS, MachFigure, Magnifier, MeasureBox, Note, OVERRIDABLE_TOPBAR_IDS, PatternDrawing, PositionTool, PriceLabel, PriceNote, RadialFib, RegressionChannel, STAMP_SIZE_OPTIONS, SegmentDrawing, SidePanel, Signpost, TEXT_SIZE_OPTIONS, TOPBAR_BUILTIN_IDS, TOPBAR_DEFAULT_LEFT, TOPBAR_DEFAULT_RIGHT, TextLabel, chartType, chartTypes, clampPanelWidth, createDrawing, deserializeDrawing, drawingTypes, foldBaseModulation, formatDuration, getDrawingType, getNativeIndicator, inputDeltas, inputVisible, legendActions, legendActionsProviderFor, legendCallouts, legendCalloutsProviderFor, lineSegmentIntersection, magnifierTimeframeLabel, nativeIndicatorDescriptors, nativeIndicatorTypes, normalizeSettingsRow, pinnedTopbarActionIds, registerChartType, registerDefaultEngine, registerDrawingType, registerLegendAction, registerLegendCallout, registerNativeIndicator, registerRendererDefaults, registerRendererLayer, registerSidePanel, registerStatePersistence, registerSymbolRanking, registerWidgetAction, registerWidgetAttachment, rendererDefaults, rendererLayers, resetDrawingSettings, resolveEngines, resolveTopbarComposition, settingsRowValueKeys, settingsRowVisible, sidePanels, stableSeriesId, statePersistenceHandlers, symbolRanking, tickerModifierIds, topbarActionOverride, topbarHas, unregisterChartType, unregisterDefaultEngine, unregisterLegendAction, unregisterLegendCallout, unregisterNativeIndicator, unregisterRendererDefaults, unregisterRendererLayer, unregisterSidePanel, unregisterStatePersistence, unregisterWidgetAction, unregisterWidgetAttachment, widgetActions, widgetAttachments };

package/dist/{chunk-MHY7MVXH.js → chunk-MGU3USTP.js}

@@ -1,4 +1,4 @@
-import { overlayScrollbarCss, injectStyles, isDarkColor, mix, HIGHLIGHT, ACCENT_BRIGHT, ACCENT, withAlpha, iconAt, iconEl, BULLISH, BEARISH, WARNING, NEUTRAL } from './chunk-KG4YT3TI.js';
+import { overlayScrollbarCss, injectStyles, isDarkColor, mix, HIGHLIGHT, ACCENT_BRIGHT, ACCENT, withAlpha, iconAt, iconEl, BULLISH, BEARISH, WARNING, NEUTRAL } from './chunk-6DPAYEGO.js';
 import { VanillaMachine, normalizeProps, spreadProps } from '@zag-js/vanilla';
 export { normalizeProps, spreadProps } from '@zag-js/vanilla';
 import * as menu from '@zag-js/menu';
@@ -472,6 +472,12 @@ ${STATIC_DECLS}
 .vela-ui *, .vela-ui-layer * { box-sizing: border-box; }
 /* Text ENTRY is the one exception: selection is part of editing. */
 .vela-ui :is(input, textarea), .vela-ui-layer :is(input, textarea) { user-select: text; -webkit-user-select: text; }
+/* iOS Safari zooms the page when a focused field is under 16px, and often
+   keeps that zoom after the field blurs or a dialog closes. The shell's
+   mobile size class is the honest gate \u2014 not a media query \u2014 so an embedded
+   chart on a wide desktop still gets the rule when it is in the phone layout.
+   Scoped to the kit root so a host page's own [data-layout] is never touched. */
+.vela-ui[data-layout='mobile'] :is(input, textarea, select) { font-size: 16px; }
 .vela-icon { display: inline-flex; align-items: center; flex: none; }
 .vela-icon svg { display: block; }
 `;
@@ -2179,8 +2185,21 @@ function buildColorPicker(color, theme, onChange) {
   };
   const recentRow = document.createElement("div");
   recentRow.style.cssText = "display:flex;align-items:center;gap:5px;flex-wrap:wrap;border-top:1px solid var(--vela-border);padding-top:9px;";
+  const recentSwatches = document.createElement("div");
+  recentSwatches.style.cssText = "display:contents;";
+  const add = document.createElement("label");
+  add.style.cssText = `width:17px;height:17px;border-radius:var(--vela-radius-sm);border:1px dashed var(--vela-border-strong);cursor:pointer;display:flex;align-items:center;justify-content:center;color:${theme.textColor};font:14px ${theme.fontFamily};position:relative;`;
+  add.textContent = "+";
+  const customInput = document.createElement("input");
+  customInput.type = "color";
+  customInput.value = curHex;
+  customInput.style.cssText = "position:absolute;inset:0;opacity:0;cursor:pointer;";
+  customInput.addEventListener("input", () => previewHex(customInput.value));
+  customInput.addEventListener("change", () => pickHex(customInput.value, true));
+  add.appendChild(customInput);
+  recentRow.append(recentSwatches, add);
   const renderRecents = () => {
-    recentRow.replaceChildren();
+    recentSwatches.replaceChildren();
     for (const c of recents) {
       const sw = document.createElement("button");
       sw.type = "button";
@@ -2189,18 +2208,8 @@ function buildColorPicker(color, theme, onChange) {
         e.stopPropagation();
         pickHex(c);
       });
-      recentRow.appendChild(sw);
+      recentSwatches.appendChild(sw);
     }
-    const add = document.createElement("label");
-    add.style.cssText = `width:17px;height:17px;border-radius:var(--vela-radius-sm);border:1px dashed var(--vela-border-strong);cursor:pointer;display:flex;align-items:center;justify-content:center;color:${theme.textColor};font:14px ${theme.fontFamily};position:relative;`;
-    add.textContent = "+";
-    const input = document.createElement("input");
-    input.type = "color";
-    input.value = curHex;
-    input.style.cssText = "position:absolute;inset:0;opacity:0;cursor:pointer;";
-    input.addEventListener("input", () => pickHex(input.value, true));
-    add.appendChild(input);
-    recentRow.appendChild(add);
   };
   const opLabel = document.createElement("div");
   opLabel.textContent = "Opacity";
@@ -2240,14 +2249,18 @@ function buildColorPicker(color, theme, onChange) {
   function emit() {
     onChange(combineColor(curHex, curAlpha));
   }
-  function pickHex(hex, custom = false) {
+  function previewHex(hex) {
     curHex = splitColor(hex).hex6;
-    addRecent(curHex);
     paintSelection();
     paintOpacity();
-    if (custom) renderRecents();
     emit();
   }
+  function pickHex(hex, custom = false) {
+    previewHex(hex);
+    addRecent(curHex);
+    customInput.value = curHex;
+    if (custom) renderRecents();
+  }
   renderRecents();
   paintSelection();
   paintOpacity();

package/dist/{chunk-G77Y7LK2.js → chunk-Q3TFJNJW.js}

@@ -1,5 +1,5 @@
-import { normalizeProps, nextUid, runMachine, spreadProps } from './chunk-MHY7MVXH.js';
-import { injectStyles } from './chunk-KG4YT3TI.js';
+import { normalizeProps, nextUid, runMachine, spreadProps } from './chunk-MGU3USTP.js';
+import { injectStyles } from './chunk-6DPAYEGO.js';
 import * as tooltip from '@zag-js/tooltip';
 import * as dialog from '@zag-js/dialog';