@luxalgo/vela 0.6.16 → 0.6.18

package/dist/widget.cjs

@@ -1234,6 +1234,7 @@ registerIcon("star-filled", S('<path d="M8 2.2l1.75 3.55 3.9.55-2.8 2.75.65 3.9L
 registerIcon("grip", S('<circle cx="6" cy="3.5" r="1"/><circle cx="10" cy="3.5" r="1"/><circle cx="6" cy="8" r="1"/><circle cx="10" cy="8" r="1"/><circle cx="6" cy="12.5" r="1"/><circle cx="10" cy="12.5" r="1"/>', 'fill="currentColor" stroke="none"'));
 registerIcon("kebab", S('<circle cx="8" cy="3.2" r="1.2"/><circle cx="8" cy="8" r="1.2"/><circle cx="8" cy="12.8" r="1.2"/>', 'fill="currentColor" stroke="none"'));
 registerIcon("burger", S('<path d="M2.5 4.5h11M2.5 8h11M2.5 11.5h11"/>'));
+registerIcon("info", S('<path d="M8 7.4v4.4"/><circle cx="8" cy="4.6" r="0.9" fill="currentColor" stroke="none"/>'));
 registerIcon("reset", S('<path d="M2 8a6 6 0 1 0 6-6 6.5 6.5 0 0 0-4.5 1.83L2 5.33"/><path d="M2 2v3.33h3.33"/>'));
 registerIcon("pane-collapse", S('<path d="M2.6 9.4h4v4M13.4 6.6h-4v-4"/><path d="m9.4 6.6 4.2-4.2M2.4 13.6l4.2-4.2"/>'));
 registerIcon("pane-expand", S('<path d="M9.8 2.4h3.8v3.8M6.2 13.6H2.4V9.8"/><path d="m13.6 2.4-4.4 4.4M2.4 13.6l4.4-4.4"/>'));
@@ -5092,15 +5093,15 @@ function candleOverrideFor(style, bags) {
   if (!hasOwnCandlePaint(style)) return null;
   const bag = bags[style] ?? {};
   const color = (v) => isColor(v) ? v : null;
-  const bool = (v) => isBool(v) ? v : null;
+  const bool2 = (v) => isBool(v) ? v : null;
   return {
     upColor: color(bag.candleUpColor),
     downColor: color(bag.candleDownColor),
-    bodyVisible: bool(bag.candleBodyVisible),
-    borderVisible: bool(bag.candleBorderVisible),
+    bodyVisible: bool2(bag.candleBodyVisible),
+    borderVisible: bool2(bag.candleBorderVisible),
     borderUpColor: color(bag.candleBorderUpColor),
     borderDownColor: color(bag.candleBorderDownColor),
-    wickVisible: bool(bag.candleWickVisible),
+    wickVisible: bool2(bag.candleWickVisible),
     wickUpColor: color(bag.candleWickUpColor),
     wickDownColor: color(bag.candleWickDownColor)
   };
@@ -5245,7 +5246,8 @@ function mergeConfig(base, patch) {
       labelsVisible: isBool(ps.labelsVisible) ? ps.labelsVisible : base.priceScale.labelsVisible,
       currentPriceLine: isBool(ps.currentPriceLine) ? ps.currentPriceLine : base.priceScale.currentPriceLine,
       priceLabel: isBool(ps.priceLabel) ? ps.priceLabel : base.priceScale.priceLabel,
-      countdown: isBool(ps.countdown) ? ps.countdown : base.priceScale.countdown
+      countdown: isBool(ps.countdown) ? ps.countdown : base.priceScale.countdown,
+      animateLastPrice: isBool(ps.animateLastPrice) ? ps.animateLastPrice : base.priceScale.animateLastPrice
     },
     panes: {
       separatorColor: isColor(panes.separatorColor) ? panes.separatorColor : base.panes.separatorColor
@@ -12086,6 +12088,9 @@ function paneLabel(pane, fallbackTitle) {
 function indicatorLabel(i, fallbackTitle) {
   return i.title || fallbackTitle(i.id) || i.id;
 }
+function indicatorRowLabel(i, fallbackTitle) {
+  return i.shorttitle || indicatorLabel(i, fallbackTitle);
+}
 function paneRows(pane) {
   return pane.items.flatMap((it) => it.kind === "row" ? [it.row] : []);
 }
@@ -12217,7 +12222,7 @@ function paneItems(snap, pane, units) {
   const indicatorRow = (i) => ({
     kind: "indicator",
     id: i.id,
-    label: indicatorLabel(i, snap.handleTitle),
+    label: indicatorRowLabel(i, snap.handleTitle),
     visible: snap.indicatorVisible(i.id),
     ownScale: i.ownScale
   });
@@ -12630,9 +12635,13 @@ var CSS6 = `
 .vela-ot-empty { padding: 20px 10px; text-align: center; color: var(--vela-fg-muted); font-size: 12px; }
 
 /* \u2500\u2500 drawing groups \u2500\u2500 */
-/* One top-level entry in a pane's drawing list: a lone drawing, or a whole group block. The
-   transparent border reserves the outline used when a drawing is dropped into the group. */
-.vela-ot-unit { border: 1px solid transparent; border-radius: 6px; }
+/* One top-level entry in a pane's drawing list: a lone drawing, or a whole group block. No
+   border of its own \u2014 units stack flush, so consecutive highlighted rows read as one block; the
+   drop-into-group outline is drawn inside the box instead (see the drag-and-drop rules). */
+.vela-ot-unit { border-radius: 6px; }
+/* Adjacent picked rows merge into one contiguous highlight: the shared edge loses its rounding. */
+.vela-ot-unit:has(> .vela-ot-row[data-picked]) + .vela-ot-unit > .vela-ot-row[data-picked] { border-top-left-radius: 0; border-top-right-radius: 0; }
+.vela-ot-unit:has(+ .vela-ot-unit > .vela-ot-row[data-picked]) > .vela-ot-row[data-picked] { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
 .vela-ot-row[data-row-kind='group'] > .vela-icon { width: 12px; font-size: 11px; }
 /* A member sits indented under its group's header. */
 .vela-ot-subrow { padding-left: 26px; }
@@ -12689,8 +12698,10 @@ var CSS6 = `
 .vela-ot-gap[data-drop] { height: 4px; background: var(--vela-fg-bright); }
 .vela-ot-gap[data-drop]::before { display: none; }
 /* A whole container accepts the drop: merging into a pane, or a pane with no drawings yet.
-   The pane block's transparent border reserves the room for this outline. */
+   The pane block's transparent border reserves the room for this outline; a group unit has no
+   border to color, so it draws the same line as an inset outline (no layout footprint). */
 .vela-ot [data-drop='target'] { border-color: var(--vela-fg-bright); background: var(--vela-hover); }
+.vela-ot-unit[data-drop='target'] { outline: 1px solid var(--vela-fg-bright); outline-offset: -1px; }
 /* Where a reorder would insert. */
 .vela-ot [data-drop='before'] { box-shadow: inset 0 2px 0 var(--vela-fg-bright); }
 .vela-ot [data-drop='after'] { box-shadow: inset 0 -2px 0 var(--vela-fg-bright); }
@@ -12753,7 +12764,8 @@ var ObjectTree = class extends SidePanel {
     super(host, "Object tree", "vela-ot");
     this.iconFor = iconFor;
     this.chart = null;
-    this.selectedDrawing = null;
+    /** What the CHART has selected — every member of a multi-selection, mirrored as rows. */
+    this.selectedDrawings = /* @__PURE__ */ new Set();
     this.symbolName = "";
     /** The raw (possibly venue-prefixed) symbol — what icon resolution routes on. */
     this.symbolRaw = "";
@@ -12804,12 +12816,9 @@ var ObjectTree = class extends SidePanel {
       this.unsubs.push(chart.on(ev, () => this.refresh()));
     }
     this.unsubs.push(
-      chart.on("drawing:selected", ({ id }) => {
-        this.selectedDrawing = id;
-        if (!this.syncingSelection) {
-          this.picked.clear();
-          if (id) this.picked.add(id);
-        }
+      chart.on("drawing:selected", ({ ids }) => {
+        this.selectedDrawings = new Set(ids);
+        if (!this.syncingSelection) this.picked = new Set(ids);
         this.refresh();
       })
     );
@@ -13157,7 +13166,7 @@ var ObjectTree = class extends SidePanel {
     el.dataset.drag = "1";
     el.title = "Drag to restack, or onto another pane to move it there";
     if (inGroup) el.classList.add("vela-ot-subrow");
-    if (d.id === this.selectedDrawing) el.dataset.selected = "1";
+    if (this.selectedDrawings.has(d.id)) el.dataset.selected = "1";
     if (this.picked.has(d.id)) el.dataset.picked = "1";
     el.addEventListener("click", (e) => this.onDrawClick(e, d.id));
     return el;
@@ -14334,6 +14343,20 @@ var SymbolPicker = class {
     this.seed = initialQuery;
     this.dialog.show();
   }
+  get isOpen() {
+    return this.dialog.open;
+  }
+  /** Text typed at the picker that never reached its field: closed, it opens seeded
+   *  with the text; open (the field takes focus a tick after the dialog does, and a
+   *  fast typist's next key lands in that tick), it extends the query. */
+  type(text) {
+    if (!this.isOpen) {
+      this.open(text);
+      return;
+    }
+    this.input.value = (this.input.value + text).toUpperCase();
+    this.refresh();
+  }
   close() {
     this.dialog.hide();
   }
@@ -14747,6 +14770,20 @@ var TimeframeQuick = class {
       this.input.setSelectionRange(this.input.value.length, this.input.value.length);
     }, 0);
   }
+  get isOpen() {
+    return this.dialog.open;
+  }
+  /** Text typed at the entry that never reached its field: closed, it opens seeded
+   *  with the text; open (the field takes focus a tick after the dialog does, and a
+   *  fast typist's next key lands in that tick), it extends the entry. */
+  type(text) {
+    if (!this.isOpen) {
+      this.open(text);
+      return;
+    }
+    this.input.value += text;
+    this.renderHint();
+  }
   close() {
     this.dialog.hide();
   }
@@ -16817,15 +16854,18 @@ var DrawingController = class {
       next = [...ids];
     }
     this.selectedIds = next.filter((id) => this.store.has(id));
+    this.announceSelection();
+  }
+  /** Push the selection to the renderer and announce it (primary + the full list). */
+  announceSelection() {
     this.port?.setSelection(this.selectedIds);
-    this.events.emit("drawing:selected", { id: this.selectedIds[0] ?? null });
+    this.events.emit("drawing:selected", { id: this.selectedIds[0] ?? null, ids: [...this.selectedIds] });
   }
   /** Restore a history snapshot, reconciling selection against what survived. */
   restoreSnapshot(doc) {
     this.store.load(doc);
     this.selectedIds = this.selectedIds.filter((id) => this.store.has(id));
-    this.port?.setSelection(this.selectedIds);
-    this.events.emit("drawing:selected", { id: this.selectedIds[0] ?? null });
+    this.announceSelection();
   }
   /** Delete drawings as one undo step; prune them from the selection. */
   deleteMany(ids) {
@@ -16958,6 +16998,9 @@ var DrawingController = class {
       case "duplicate":
         this.duplicate(i.ids);
         break;
+      case "clone":
+        if (this.enabled && i.docs.length) this.insertClones(i.docs);
+        break;
       case "copy":
         this.copy(i.ids);
         break;
@@ -17208,6 +17251,23 @@ function attachChromeTooltip(anchor, opts) {
     clear();
   };
 }
+function chromeHint(text, opts) {
+  const px = opts.size ?? 16;
+  const el = document.createElement("span");
+  el.className = "vela-hint";
+  el.setAttribute("role", "img");
+  el.setAttribute("aria-label", text);
+  el.innerHTML = iconAt("info", px);
+  el.style.cssText = `flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:${px}px;height:${px}px;border-radius:50%;cursor:help;user-select:none;background:var(--vela-hover);color:var(--vela-fg-muted);transition:background var(--vela-dur-fast) ease,color var(--vela-dur-fast) ease;`;
+  const hover = (on) => {
+    el.style.background = on ? "var(--vela-active)" : "var(--vela-hover)";
+    el.style.color = on ? "var(--vela-fg-bright)" : "var(--vela-fg-muted)";
+  };
+  el.addEventListener("pointerenter", () => hover(true));
+  el.addEventListener("pointerleave", () => hover(false));
+  const dispose = attachChromeTooltip(el, { host: opts.host, theme: opts.theme, text: () => text, wrap: true, delayMs: 250 });
+  return { el, dispose };
+}
 
 // src/renderers/native/drawings/DrawingToolbar.ts
 var TOOLBAR_WIDTH = 44;
@@ -18199,6 +18259,24 @@ function localStorageAdapter(storageKey) {
   };
 }
 
+// src/core/options.ts
+var normalizeSession = (v) => v === "regular" || v === "extended" ? v : void 0;
+var LIVE_BAR_EASE_DEFAULT_MS = 90;
+var LIVE_BAR_EASE_MAX_MS = 1e3;
+function resolveLiveBarEaseMs(value) {
+  if (value === true) return LIVE_BAR_EASE_DEFAULT_MS;
+  if (typeof value !== "number" || !Number.isFinite(value) || value <= 0) return 0;
+  return Math.min(value, LIVE_BAR_EASE_MAX_MS);
+}
+function resolveAnimations(animations) {
+  if (typeof animations === "boolean") return { animZoom: animations, animPan: animations, animLiveBar: 0 };
+  return {
+    animZoom: animations?.zoom ?? true,
+    animPan: animations?.pan ?? true,
+    animLiveBar: resolveLiveBarEaseMs(animations?.liveBar)
+  };
+}
+
 // src/core/model/series.ts
 function isLineLikeSeries(spec) {
   return spec.kind !== "candle" && spec.kind !== "bar" && spec.kind !== "markers";
@@ -19875,7 +19953,12 @@ var EngineOrchestrator = class _EngineOrchestrator {
       if (!model) continue;
       const paneId = model.paneId ?? "price";
       if (!byPane.has(paneId)) byPane.set(paneId, []);
-      byPane.get(paneId).push({ id: r.id, title: model.title || r.title, ownScale: model.ownScale === true });
+      byPane.get(paneId).push({
+        id: r.id,
+        title: model.title || r.title,
+        ...model.shorttitle ? { shorttitle: model.shorttitle } : {},
+        ownScale: model.ownScale === true
+      });
     }
     const panes = [];
     for (const paneId of this.paneOrder) {
@@ -21164,14 +21247,11 @@ var IndicatorInputsDialog = class {
   buildTextField(id, current, emit) {
     return buildFieldControl({ kind: "text", id, value: current, onChange: emit }).el;
   }
-  /** A hoverable ⓘ affordance carrying an input's `tooltip` (themed chrome tip; wraps). */
+  /** The shared ⓘ hint carrying an input's `tooltip` (see {@link chromeHint}). */
   infoButton(tooltip2) {
-    const b = document.createElement("span");
-    b.textContent = "i";
-    this.dialogTips.push(attachChromeTooltip(b, { host: this.host.container, theme: () => this.host.theme(), text: () => tooltip2, wrap: true, delayMs: 250 }));
-    b.className = "vela-ind-hint";
-    b.style.cssText = "flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;font-weight:600;font-size:11px;font-family:inherit;line-height:1;cursor:help;user-select:none;";
-    return b;
+    const { el, dispose } = chromeHint(tooltip2, { host: this.host.container, theme: () => this.host.theme(), size: 18 });
+    this.dialogTips.push(dispose);
+    return el;
   }
   /** A dropdown over plain string options (value === label) — a thin case of {@link selectPairs}. */
   select(id, options, current, emit) {
@@ -21608,8 +21688,6 @@ function ensureDialogStyles() {
 ${overlayScrollbarCss(".vela-dialog.vela-ind-dialog *", 9)}
 .vela-ind-tab{font-weight:600;font-size:13px;line-height:20px;transition:color var(--vela-dur-fast) ease,border-color var(--vela-dur-fast) ease;}
 .vela-ind-tab:not(.vela-ind-tab-active):hover{color:var(--vela-fg-bright);}
-.vela-ind-hint{background:var(--vela-hover);color:var(--vela-fg-muted);transition:background var(--vela-dur-fast) ease,color var(--vela-dur-fast) ease;}
-.vela-ind-hint:hover{background:var(--vela-active);color:var(--vela-fg-bright);}
 .vela-ind-ctl,.vela-ind-close{background-color:transparent;color:inherit;transition:color var(--vela-dur-fast) ease,background-color var(--vela-dur-fast) ease;}
 .vela-ind-ctl svg,.vela-ind-close svg{width:${LEGEND_ICON_PX}px;height:${LEGEND_ICON_PX}px;display:block;flex:none;stroke-width:1;}
 .vela-ind-ctl:hover{background-color:var(--vela-hover-strong);}
@@ -24513,7 +24591,7 @@ var InputController = class {
       if (e.repeat || e.key !== "Shift" && e.key !== "Control" && e.key !== "Meta") return;
       if (Number.isNaN(this.cursorX)) return;
       if (this.dragging && this.region !== "drawing") return;
-      this.deps.drawingsPointerMove?.(this.cursorX, this.cursorY, this.snapMode(e), e.shiftKey);
+      this.deps.drawingsPointerMove?.(this.cursorX, this.cursorY, this.snapMode(e), e.shiftKey, e.ctrlKey || e.metaKey);
     };
     this.onDown = (e) => {
       if (e.button === 1) {
@@ -24545,7 +24623,7 @@ var InputController = class {
       this.startY = y;
       if (this.deps.drawingsClaim?.(x, y)) {
         this.region = "drawing";
-        this.deps.drawingsPointerDown?.(x, y, this.snapMode(e), e.shiftKey);
+        this.deps.drawingsPointerDown?.(x, y, this.snapMode(e), e.shiftKey, e.ctrlKey || e.metaKey);
         this.capture(e.pointerId);
         return;
       }
@@ -24554,6 +24632,11 @@ var InputController = class {
         this.capture(e.pointerId);
         return;
       }
+      if ((e.ctrlKey || e.metaKey) && this.regionAt(x, y) === "data" && this.deps.drawingsMarqueeStart?.(x, y)) {
+        this.region = "drawing";
+        this.capture(e.pointerId);
+        return;
+      }
       const vp = this.deps.getCoords().getViewport();
       this.deps.apply(vp);
       this.startRightOffset = vp.rightOffset;
@@ -24602,7 +24685,7 @@ var InputController = class {
           this.deps.apply({ barSpacing, rightOffset: this.startRightOffset });
         } else if (this.region === "drawing") {
           if (Math.abs(x - this.startX) > slop || Math.abs(y - this.startY) > slop) this.moved = true;
-          this.deps.drawingsPointerMove?.(x, y, this.snapMode(e), e.shiftKey);
+          this.deps.drawingsPointerMove?.(x, y, this.snapMode(e), e.shiftKey, e.ctrlKey || e.metaKey);
         } else {
           const coords = this.deps.getCoords();
           const vp = coords.getViewport();
@@ -24625,7 +24708,7 @@ var InputController = class {
         const drawCursor = this.deps.drawingsCursor?.(x, y);
         const r = this.regionAt(x, y);
         this.el.style.cursor = drawCursor ?? (r === "price" ? "ns-resize" : r === "time" ? "ew-resize" : r === "separator" ? "row-resize" : "");
-        this.deps.drawingsPointerMove?.(x, y, this.snapMode(e), e.shiftKey);
+        this.deps.drawingsPointerMove?.(x, y, this.snapMode(e), e.shiftKey, e.ctrlKey || e.metaKey);
       }
       if (e.pointerType !== "touch") this.deps.onPointerMove(x, y);
     };
@@ -24966,12 +25049,12 @@ function defaultTradeMarkersState() {
 function mergeTradeMarkersState(base, patch) {
   const p = patch && typeof patch === "object" ? patch : {};
   const c = p.colors && typeof p.colors === "object" ? p.colors : {};
-  const bool = (v, fb) => typeof v === "boolean" ? v : fb;
+  const bool2 = (v, fb) => typeof v === "boolean" ? v : fb;
   const color = (v, fb) => typeof v === "string" && v.trim().length > 0 ? v : fb;
   return {
-    visible: bool(p.visible, base.visible),
-    labels: bool(p.labels, base.labels),
-    qty: bool(p.qty, base.qty),
+    visible: bool2(p.visible, base.visible),
+    labels: bool2(p.labels, base.labels),
+    qty: bool2(p.qty, base.qty),
     colors: {
       long: color(c.long, base.colors.long),
       short: color(c.short, base.colors.short),
@@ -27655,6 +27738,8 @@ var BUILTIN_SETTINGS_IDS = [
   "symbol.style.baseline.fill-bottom",
   "symbol.style.baseline.base-level",
   "symbol.style.baseline.width",
+  "symbol.animation",
+  "symbol.animation.price-changes",
   "symbol.timezone",
   "scales",
   "scales.price-scale",
@@ -27797,8 +27882,7 @@ ${overlayScrollbarCss(".vela-sd-pane")}
 .vela-sd-mobile .vela-select-trigger,.vela-sd-mobile .vela-num input,.vela-sd-mobile .vela-width-field{height:34px;}
 .vela-sd-mobile .vela-sd-close{width:40px;height:40px;}
 .vela-sd-mobile .vela-sd-btn{height:38px;}
-.vela-sd-mobile .vela-sd-row span,.vela-sd-mobile .vela-sd-bool span,.vela-sd-mobile .vela-field-label{white-space:normal !important;}
-`;
+.vela-sd-mobile .vela-sd-row span,.vela-sd-mobile .vela-sd-bool span,.vela-sd-mobile .vela-field-label{white-space:normal !important;}`;
   if (!existing) document.head.appendChild(st);
 }
 var SettingsDialog = class {
@@ -27819,6 +27903,8 @@ var SettingsDialog = class {
     this.themeControl = null;
     /** The built tabs, by title — how `showSection` reaches a pane while the dialog is open. */
     this.tabs = [];
+    this.hintTips = [];
+    // ⓘ tooltip disposers of the open build (see hint)
     /** Active instance-strip tab per chart type — remembered across dialog rebuilds. */
     this.typeActiveInstance = /* @__PURE__ */ new Map();
     /** Active TOC group per structured pane (`<typeId>/<pane>` → group label). */
@@ -28007,6 +28093,13 @@ var SettingsDialog = class {
       body.append(g);
     }
     showActive(config.series.style);
+    body.append(sid(this.sectionTitle("Animation"), "symbol.animation"));
+    body.append(sid(this.boolRow(
+      "Animate price changes",
+      config.priceScale.animateLastPrice,
+      (v) => this.emit({ priceScale: { animateLastPrice: v } }),
+      this.hint("Glide the live bar to each new price instead of snapping.")
+    ), "symbol.animation.price-changes"));
     body.append(sid(this.sectionTitle("Time zone"), "symbol.timezone"));
     body.append(sid(this.selectRowLabeled("Time zone", normalizeTimezone(config.timeScale.timezone), timezoneOptions(config.timeScale.timezone), (v) => this.emit({ timeScale: { timezone: v } })), "symbol.timezone"));
     const renderHostSections = (placement) => {
@@ -28214,6 +28307,8 @@ var SettingsDialog = class {
     this.ui = null;
     this.root = null;
     this.tabs = [];
+    for (const dispose of this.hintTips) dispose();
+    this.hintTips = [];
     ui?.destroy();
   }
   destroy() {
@@ -28627,23 +28722,31 @@ var SettingsDialog = class {
       }).el
     });
   }
-  /** A toggle row: the checkbox sits to the LEFT of its label (never in the control area). */
-  boolRow(label, value, onChange) {
-    return this.toggleRow(label, value, onChange, []);
+  /** A toggle row: the checkbox sits to the LEFT of its label (never in the control area).
+   *  `info` (see {@link hint}) rides after the label. */
+  boolRow(label, value, onChange, info) {
+    return this.toggleRow(label, value, onChange, [], void 0, info);
   }
   /** An enable row: checkbox + label in the label column, dependent controls in the
    *  shared control column; the control group dims and ignores input while the toggle
    *  is off. With `get`, the row re-reads its state on a 'vela-sync' event. */
-  toggleRow(label, value, onToggle, controls, get) {
+  toggleRow(label, value, onToggle, controls, get, info) {
     return fieldRow({
       label,
       labelSize: "sm",
       bool: controls.length === 0,
       toggle: { checked: value, onChange: onToggle, get },
       control: controls,
+      info,
       className: controls.length === 0 ? "vela-sd-bool" : "vela-sd-row"
     });
   }
+  /** The shared ⓘ hint after a row label (see {@link chromeHint}). Disposed with the dialog. */
+  hint(text) {
+    const { el, dispose } = chromeHint(text, { host: this.container, theme: () => this.theme });
+    this.hintTips.push(dispose);
+    return el;
+  }
   numberRow(label, value, min, max, step, onChange) {
     return fieldRow({
       label,
@@ -28811,6 +28914,18 @@ var DrawingPainter = class {
     }
     this.paintHandles(ctx, pts);
   }
+  /** The selection box a Ctrl/Cmd-drag on the empty plot sweeps: a faint fill in the handle
+   *  accent under a thin dashed outline. */
+  paintMarquee(ctx, rect) {
+    ctx.save();
+    ctx.fillStyle = withAlpha(HANDLE_BORDER, 0.08);
+    ctx.fillRect(rect.x, rect.y, rect.w, rect.h);
+    ctx.strokeStyle = HANDLE_BORDER;
+    ctx.lineWidth = 1;
+    ctx.setLineDash([4, 3]);
+    ctx.strokeRect(rect.x + 0.5, rect.y + 0.5, rect.w, rect.h);
+    ctx.restore();
+  }
   /** A hollow ring marking the candle point the magnet (Ctrl) will snap the next anchor to. */
   paintSnapRing(ctx, x, y, theme) {
     ctx.setLineDash([]);
@@ -30279,6 +30394,15 @@ function topDrawingAt(drawings, x, y, proj, tol = HIT_TOLERANCE) {
   }
   return null;
 }
+function deletableSelection(selected, drawings) {
+  const ids = [...selected];
+  if (ids.length < 2) return ids;
+  return ids.filter((id) => !drawings.find((d) => d.id === id)?.locked);
+}
+function deleteTargets(hit, selected, drawings, withSelection) {
+  if (withSelection && selected.size >= 2 && selected.has(hit.id)) return deletableSelection(selected, drawings);
+  return hit.locked ? [] : [hit.id];
+}
 
 // src/renderers/native/drawings/DrawingInteraction.ts
 var DRAG_SLOP3 = 3;
@@ -30382,10 +30506,32 @@ var DrawingInteraction = class {
   activeDragId() {
     return this.state.kind === "pressed" && this.state.moved ? this.state.id : null;
   }
+  /** The drawing under a press that has not been released yet (drag or click undecided), or null. */
+  pressedId() {
+    return this.state.kind === "pressed" ? this.state.id : null;
+  }
+  /** The copies a Ctrl-drag is moving (transient — not yet in the store), or null. */
+  dragClones() {
+    return this.state.kind === "pressed" && this.state.moved && this.state.clones ? this.state.clones.map((c) => c.d) : null;
+  }
+  /** The marquee box being swept, normalized (or null when none is in progress). */
+  marqueeRect() {
+    if (this.state.kind !== "marquee") return null;
+    const { x0, y0, x1, y1 } = this.state;
+    return { x: Math.min(x0, x1), y: Math.min(y0, y1), w: Math.abs(x1 - x0), h: Math.abs(y1 - y0) };
+  }
+  /** Ctrl/Cmd-press on the empty plot: start sweeping a selection box. False when a tool is
+   *  armed or a gesture is in flight (that path owns the press). */
+  beginMarquee(x, y) {
+    if (this.state.kind !== "idle" || this.deps.activeTool() != null) return false;
+    this.state = { kind: "marquee", x0: x, y0: y, x1: x, y1: y };
+    return true;
+  }
   /** A press: place the next anchor, or grab a drawing/handle (resolved as click or drag on release).
    *  `shift` over a drawing toggles it in/out of the selection (multi-select) instead of dragging;
-   *  while placing a line tool it locks the segment angle to 45° steps. */
-  down(x, y, mode = "off", shift2 = false) {
+   *  while placing a line tool it locks the segment angle to 45° steps. `mod` (Ctrl/Cmd) over a
+   *  drawing also toggles on a click, but a body drag then moves a COPY. */
+  down(x, y, mode = "off", shift2 = false, mod = false) {
     const proj = this.deps.projector();
     if (this.state.kind === "placing") {
       if (this.state.draft.placementMode() !== "click") return;
@@ -30413,7 +30559,50 @@ var DrawingInteraction = class {
         return;
       }
       const handle = hit.hitHandle(x, y, proj, HIT_TOLERANCE);
-      this.state = { kind: "pressed", id: hit.id, handle, grab: proj.pxToPoint(x, y, hit.paneId), orig: cloneAnchors(hit), px: x, py: y, moved: false };
+      const riders = [];
+      if (handle < 0 && this.deps.selectedIds().has(hit.id)) {
+        for (const id of this.deps.selectedIds()) {
+          const d = id === hit.id ? null : this.byId(id);
+          if (d && !d.locked && d.visible) riders.push({ id, orig: cloneAnchors(d) });
+        }
+      }
+      this.state = { kind: "pressed", id: hit.id, handle, orig: cloneAnchors(hit), px: x, py: y, moved: false, riders, mod, clones: null };
+    }
+  }
+  /** The data-space delta a body drag from the press to (x, y) means on `paneId` — resolved per
+   *  pane so drawings riding along on another pane move by the same PIXELS, not the same price. */
+  bodyDelta(paneId, x, y) {
+    if (this.state.kind !== "pressed") return { dt: 0, dp: 0 };
+    const proj = this.deps.projector();
+    const from = proj.pxToPoint(this.state.px, this.state.py, paneId);
+    const to = proj.pxToPoint(x, y, paneId);
+    return { dt: to.time - from.time, dp: to.price - from.price };
+  }
+  /** The pressed drawing and its riders, each with its anchors at the press. */
+  dragSources(d) {
+    if (this.state.kind !== "pressed") return [];
+    const out = [{ d, orig: this.state.orig }];
+    for (const r of this.state.riders) {
+      const rd = this.byId(r.id);
+      if (rd) out.push({ d: rd, orig: r.orig });
+    }
+    return out;
+  }
+  /** Move the pressed drawing's body (and its riders) — or, on a Ctrl-drag, their copies — to the
+   *  cursor. The copies are built on the first move (so a Ctrl-click never creates anything), from
+   *  sources that have not moved yet, so their own anchors are the origin to translate from. */
+  dragBody(d, x, y) {
+    if (this.state.kind !== "pressed") return;
+    this.snapAt = null;
+    if (this.state.mod && !this.state.clones) {
+      this.state.clones = this.dragSources(d).flatMap((s) => {
+        const c = deserializeDrawing(s.d.serialize());
+        return c ? [{ d: c, orig: cloneAnchors(c) }] : [];
+      });
+    }
+    for (const t of this.state.clones ?? this.dragSources(d)) {
+      const { dt, dp } = this.bodyDelta(t.d.paneId, x, y);
+      t.d.anchors = t.d.translateBody(dt, dp, t.orig);
     }
   }
   /** Pointer move: advance the placing ghost, or live-preview a drag once past the slop.
@@ -30437,12 +30626,20 @@ var DrawingInteraction = class {
       this.deps.changed();
       return;
     }
+    if (this.state.kind === "marquee") {
+      this.state.x1 = x;
+      this.state.y1 = y;
+      this.deps.changed();
+      return;
+    }
     if (this.state.kind !== "pressed") return;
     const d = this.byId(this.state.id);
     if (!d || d.locked) return;
     if (!this.state.moved && Math.abs(x - this.state.px) <= DRAG_SLOP3 && Math.abs(y - this.state.py) <= DRAG_SLOP3) return;
     this.state.moved = true;
-    if (this.state.handle >= 0) {
+    if (this.state.handle < 0) {
+      this.dragBody(d, x, y);
+    } else {
       const a = d.anchors[this.state.handle];
       if (a) {
         const pivot = shift2 && ANGLE_SNAP_TYPES.has(d.type) && d.anchors.length === 2 ? d.anchors[1 - this.state.handle] : void 0;
@@ -30450,12 +30647,6 @@ var DrawingInteraction = class {
         applyFree(a, point, d.anchorSchema().slots[this.state.handle]?.free ?? "both");
       }
       d.constrainHandleDrag(this.state.handle);
-    } else {
-      const pt = this.deps.projector().pxToPoint(x, y, d.paneId);
-      this.snapAt = null;
-      const dt = pt.time - this.state.grab.time;
-      const dp = pt.price - this.state.grab.price;
-      d.anchors = d.translateBody(dt, dp, this.state.orig);
     }
     this.deps.changed();
   }
@@ -30475,16 +30666,46 @@ var DrawingInteraction = class {
       }
       return;
     }
+    if (this.state.kind === "marquee") {
+      const rect = this.marqueeRect();
+      this.state = { kind: "idle" };
+      if (rect.w > DRAG_SLOP3 || rect.h > DRAG_SLOP3) this.selectWithin(rect);
+      this.deps.changed();
+      return;
+    }
     if (this.state.kind !== "pressed") return;
-    const { id, moved } = this.state;
+    const { id, moved, riders, mod, clones } = this.state;
     this.state = { kind: "idle" };
     const d = this.byId(id);
-    if (moved) {
-      if (d) this.deps.emit({ kind: "edit", doc: d.serialize() });
-      this.deps.changed();
-    } else {
-      this.deps.openSettings(id, x, y);
+    if (!moved) {
+      if (mod) this.deps.emit({ kind: "select", ids: [id], additive: true });
+      else this.deps.openSettings(id, x, y);
+      return;
     }
+    if (clones) {
+      this.deps.emit({ kind: "clone", docs: clones.map((c) => c.d.serialize()) });
+    } else if (d) {
+      const docs = [d.serialize()];
+      for (const r of riders) {
+        const rd = this.byId(r.id);
+        if (rd) docs.push(rd.serialize());
+      }
+      if (docs.length > 1) this.deps.emit({ kind: "edit-many", docs });
+      else this.deps.emit({ kind: "edit", doc: docs[0] });
+    }
+    this.deps.changed();
+  }
+  /** Add every visible drawing whose on-screen bounds touch `rect` to the selection (a union,
+   *  so successive sweeps accumulate). No change when the box touches nothing new. */
+  selectWithin(rect) {
+    const proj = this.deps.projector();
+    const ids = [...this.deps.selectedIds()];
+    for (const d of this.deps.drawings()) {
+      if (!d.visible || ids.includes(d.id)) continue;
+      const b = d.bounds(proj);
+      if (b && rectsIntersect(rect, b)) ids.push(d.id);
+    }
+    if (ids.length > this.deps.selectedIds().size) this.deps.emit({ kind: "select", ids });
   }
   /** Cancel an in-progress placement or drag (Escape). Returns whether anything was cancelled. */
   cancel() {
@@ -30497,8 +30718,15 @@ var DrawingInteraction = class {
       return true;
     }
     if (this.state.kind === "pressed") {
-      const d = this.byId(this.state.id);
-      if (d && this.state.moved) d.anchors = this.state.orig.map((o) => ({ time: o.time, price: o.price }));
+      if (this.state.moved && !this.state.clones) {
+        const d = this.byId(this.state.id);
+        if (d) for (const s of this.dragSources(d)) s.d.anchors = s.orig.map((o) => ({ time: o.time, price: o.price }));
+      }
+      this.state = { kind: "idle" };
+      this.deps.changed();
+      return true;
+    }
+    if (this.state.kind === "marquee") {
       this.state = { kind: "idle" };
       this.deps.changed();
       return true;
@@ -30613,6 +30841,9 @@ var DrawingInteraction = class {
 function cloneAnchors(d) {
   return d.anchors.map((a) => ({ time: a.time, price: a.price }));
 }
+function rectsIntersect(a, b) {
+  return a.x <= b.x + b.w && b.x <= a.x + a.w && a.y <= b.y + b.h && b.y <= a.y + a.h;
+}
 function applyFree(anchor, pt, free) {
   if (free === "both" || free === "x") anchor.time = pt.time;
   if (free === "both" || free === "y") anchor.price = pt.price;
@@ -30998,10 +31229,27 @@ function btn(label, primary, onClick) {
 }
 
 // src/renderers/native/drawings/DrawingSettingsPopup.ts
+var MIXED = /* @__PURE__ */ Symbol("mixed");
+function sharedPaths(drawings) {
+  const [first, ...rest] = drawings;
+  const paths = new Set(first?.schema().fields.map((f) => f.path) ?? []);
+  for (const d of rest) {
+    const own = new Set(d.schema().fields.map((f) => f.path));
+    for (const p of paths) if (!own.has(p)) paths.delete(p);
+  }
+  return paths;
+}
+function commonValue(drawings, read) {
+  const first = read(drawings[0]);
+  return drawings.every((d) => read(d) === first) ? first : MIXED;
+}
+function distinctValues(drawings, read) {
+  return [...new Set(drawings.map(read))];
+}
 var BTN = 30;
 var ICON = 21;
 var STYLE_ID23 = "vela-drawing-popup-styles";
-var STYLE_REV = "3";
+var STYLE_REV = "4";
 function ensureStyles5() {
   if (typeof document === "undefined") return;
   const existing = document.getElementById(STYLE_ID23);
@@ -31013,6 +31261,8 @@ function ensureStyles5() {
 .vela-dpop-btn{background:transparent;color:var(--vela-fg-muted);transition:background var(--vela-dur-fast) ease,color var(--vela-dur-fast) ease;}
 .vela-dpop-btn:hover{background:var(--vela-hover-strong);color:var(--vela-fg-bright);}
 .vela-dpop-btn[data-active='1']{background:var(--vela-active);color:var(--vela-fg-bright);}
+/* Mixed (a multi-selection disagrees): the active fill at half strength behind a dashed ring. */
+.vela-dpop-btn[data-active='mixed']{background:var(--vela-hover-strong);color:var(--vela-fg-bright);outline:1px dashed var(--vela-fg-muted);outline-offset:-2px;}
 .vela-dpop-item{background:transparent;transition:background var(--vela-dur-fast) ease;}
 .vela-dpop-item:hover{background:var(--vela-hover-strong);}
 .vela-dpop-item[data-active='1']{background:var(--vela-active);}
@@ -31044,7 +31294,7 @@ var DrawingSettingsPopup = class {
       if (this.isOwnChrome(node)) return;
       const cb = this.onClose;
       this.close();
-      cb?.();
+      cb?.(e);
     };
     this.theme = theme;
     this.settingsDialog = new DrawingSettingsDialog(host, theme);
@@ -31069,16 +31319,27 @@ var DrawingSettingsPopup = class {
   contains(node) {
     return node != null && (this.isOwnChrome(node) || this.settingsDialog.contains(node));
   }
-  /** Open the quick toolbar for `drawing`, floating clear of its `anchor` box.
-   *  `onClose` fires on an outside-click dismissal (not a programmatic close). */
-  open(drawing, anchor, actions, onClose) {
+  /** Open the quick toolbar for `drawings` (one, or a whole multi-selection), floating clear of
+   *  their `anchor` box. With several drawings the bar shows only the controls they ALL support,
+   *  a control whose values differ reads as mixed, and every edit applies to all of them —
+   *  per-drawing panels (levels, position sizing, the text field) stay single-drawing only.
+   *  `onClose` fires on a dismissal (an outside press, or Escape in the text field — not a
+   *  programmatic close), with the dismissing press when there is one, so the caller can tell a
+   *  modifier press (multi-select) from a plain one. */
+  open(drawings, anchor, actions, onClose) {
     this.close();
+    const drawing = drawings[0];
+    if (!drawing) return;
     ensureStyles5();
     this.onClose = onClose ?? null;
     const t = this.theme;
+    const multi = drawings.length > 1;
     const schema = drawing.schema();
-    const paths = new Set(schema.fields.map((f) => f.path));
-    const textOnBar = schema.textIsContent === true || !paths.has("text.value");
+    const paths = sharedPaths(drawings);
+    const common = (read) => commonValue(drawings, read);
+    const every = (pred) => drawings.every(pred);
+    const swatch = (tip, glyph, read, path) => this.colorButton(tip, glyph, common(read), (v) => actions.patch({ [path]: v }), void 0, distinctValues(drawings, read));
+    const textOnBar = multi || schema.textIsContent === true || !paths.has("text.value");
     const el = document.createElement("div");
     el.className = "vela-dpop";
     el.style.cssText = `position:absolute;z-index:22;background:${t.background};border:1px solid var(--vela-border);border-radius:var(--vela-radius-lg);box-shadow:var(--vela-shadow);color:${t.textColor};font:var(--vela-font-size-md) ${t.fontFamily};display:flex;flex-direction:column;pointer-events:auto;overflow:hidden;`;
@@ -31092,75 +31353,84 @@ var DrawingSettingsPopup = class {
     bar.style.cssText = "display:flex;align-items:center;gap:2px;padding:4px;";
     bar.appendChild(this.dragHandle());
     if (paths.has("glyph")) {
-      const cur = drawing.glyph ?? GLYPH_OPTIONS[0];
+      const cur = common((d) => d.glyph ?? GLYPH_OPTIONS[0]);
       bar.appendChild(this.dropdown("Icon", GLYPH_OPTIONS, cur, (g) => glyphIcon(g), (v) => actions.patch({ glyph: v })));
     }
     if (paths.has("size")) {
-      const sz = drawing.size ?? "normal";
+      const sz = common((d) => d.size ?? "normal");
       bar.appendChild(this.dropdown("Icon size", STAMP_SIZE_OPTIONS, sz, (s) => stampSizeIcon(s), (v) => actions.patch({ size: v }), { label: sizeLabel }));
     }
-    if (paths.has("magnifier.timeframe") && drawing instanceof Magnifier) {
+    if (paths.has("magnifier.timeframe") && every((d) => d instanceof Magnifier)) {
+      const mag = (d) => d;
       const options = this.lowerTimeframeOptions();
       if (options.length > 0) {
         bar.appendChild(
-          this.dropdown("Lower timeframe", options.map((o) => o.value), drawing.magnifier.timeframe, () => "", (v) => actions.patch({ "magnifier.timeframe": v }), {
+          this.dropdown("Lower timeframe", options.map((o) => o.value), common((d) => mag(d).magnifier.timeframe), () => "", (v) => actions.patch({ "magnifier.timeframe": v }), {
             label: (v) => magnifierTimeframeLabel(String(v)),
             labelInTrigger: true
           })
         );
       }
-      bar.appendChild(this.colorButton("Up candles", BUCKET_ICON, drawing.magnifier.upColor || t.upColor, (v) => actions.patch({ "magnifier.upColor": v })));
-      bar.appendChild(this.colorButton("Down candles", BUCKET_ICON, drawing.magnifier.downColor || t.downColor, (v) => actions.patch({ "magnifier.downColor": v })));
+      bar.appendChild(swatch("Up candles", BUCKET_ICON, (d) => mag(d).magnifier.upColor || t.upColor, "magnifier.upColor"));
+      bar.appendChild(swatch("Down candles", BUCKET_ICON, (d) => mag(d).magnifier.downColor || t.downColor, "magnifier.downColor"));
     }
-    if (paths.has("style.lineColor")) bar.appendChild(this.colorButton("Line color", BRUSH_ICON, drawing.style.lineColor || (drawing instanceof Magnifier ? contrastColor(this.theme.background) : DEFAULT_DRAWING_COLOR), (v) => actions.patch({ "style.lineColor": v })));
+    if (paths.has("style.lineColor")) bar.appendChild(swatch("Line color", BRUSH_ICON, (d) => d.style.lineColor || (d instanceof Magnifier ? contrastColor(this.theme.background) : DEFAULT_DRAWING_COLOR), "style.lineColor"));
     if (paths.has("style.lineWidth")) {
-      const wf = schema.fields.find((f) => f.path === "style.lineWidth");
-      if (wf?.kind === "number" && (wf.min ?? 1) > 1) {
-        bar.appendChild(this.widthInput("Line width", drawing.style.lineWidth, wf.min ?? 1, wf.max ?? 60, wf.step ?? 1, (v) => actions.patch({ "style.lineWidth": v })));
+      const widthField2 = (d) => d.schema().fields.find((f) => f.path === "style.lineWidth");
+      const wf = widthField2(drawing);
+      const width = common((d) => d.style.lineWidth);
+      const markers = every((d) => {
+        const f = widthField2(d);
+        return f?.kind === "number" && (f.min ?? 1) > 1;
+      });
+      if (markers && wf?.kind === "number") {
+        bar.appendChild(this.widthInput("Line width", width, wf.min ?? 1, wf.max ?? 60, wf.step ?? 1, (v) => actions.patch({ "style.lineWidth": v })));
       } else {
-        bar.appendChild(this.dropdown("Line width", [1, 2, 3, 4], drawing.style.lineWidth, (w) => lineIcon(w, "solid"), (v) => actions.patch({ "style.lineWidth": v }), { label: (v) => `${v}px`, labelInTrigger: true }));
+        bar.appendChild(this.dropdown("Line width", [1, 2, 3, 4], width, (w) => lineIcon(w, "solid"), (v) => actions.patch({ "style.lineWidth": v }), { label: (v) => `${v}px`, labelInTrigger: true }));
       }
     }
-    if (paths.has("style.lineStyle")) bar.appendChild(this.dropdown("Line style", LINE_STYLE_OPTIONS.map((o) => o.value), drawing.style.lineStyle, (s) => lineIcon(2, s), (v) => actions.patch({ "style.lineStyle": v }), { label: styleLabel2 }));
-    if (paths.has("style.fillColor")) bar.appendChild(this.colorButton("Fill", BUCKET_ICON, effectiveFillColor(drawing, this.theme) ?? drawing.style.fillColor ?? DEFAULT_DRAWING_COLOR, (v) => actions.patch({ "style.fillColor": v })));
+    if (paths.has("style.lineStyle")) bar.appendChild(this.dropdown("Line style", LINE_STYLE_OPTIONS.map((o) => o.value), common((d) => d.style.lineStyle), (s) => lineIcon(2, s), (v) => actions.patch({ "style.lineStyle": v }), { label: styleLabel2 }));
+    if (paths.has("style.fillColor")) bar.appendChild(swatch("Fill", BUCKET_ICON, (d) => effectiveFillColor(d, this.theme) ?? d.style.fillColor ?? DEFAULT_DRAWING_COLOR, "style.fillColor"));
     const isFrvp = paths.has("frvp.rows") && drawing instanceof FixedRangeVolumeProfile;
-    const isPosition = paths.has("riskPercent") && drawing instanceof PositionTool;
+    const isPosition = paths.has("riskPercent") && every((d) => d instanceof PositionTool);
     if (isPosition) {
-      const pos = drawing;
-      bar.appendChild(this.colorButton("Profit zone", BUCKET_ICON, pos.profitColor, (v) => actions.patch({ profitColor: v })));
-      bar.appendChild(this.colorButton("Loss zone", BUCKET_ICON, pos.lossColor, (v) => actions.patch({ lossColor: v })));
+      const pos = (d) => d;
+      bar.appendChild(swatch("Profit zone", BUCKET_ICON, (d) => pos(d).profitColor, "profitColor"));
+      bar.appendChild(swatch("Loss zone", BUCKET_ICON, (d) => pos(d).lossColor, "lossColor"));
     }
-    const reg = drawing.reg;
-    if (paths.has("reg.midColor") && reg) {
+    const regOf = (d) => d.reg;
+    if (paths.has("reg.midColor") && every((d) => regOf(d) != null)) {
+      const reg = (d) => regOf(d);
       const styles = LINE_STYLE_OPTIONS.map((o) => o.value);
-      bar.appendChild(this.colorButton("Midline color", BRUSH_ICON, reg.midColor, (v) => actions.patch({ "reg.midColor": v })));
-      bar.appendChild(this.dropdown("Midline style", styles, reg.midStyle, (s) => lineIcon(2, s), (v) => actions.patch({ "reg.midStyle": v }), { label: styleLabel2 }));
-      bar.appendChild(this.colorButton("Upper line color", BRUSH_ICON, reg.upperColor, (v) => actions.patch({ "reg.upperColor": v })));
-      bar.appendChild(this.dropdown("Upper line style", styles, reg.upperStyle, (s) => lineIcon(2, s), (v) => actions.patch({ "reg.upperStyle": v }), { label: styleLabel2 }));
-      bar.appendChild(this.colorButton("Lower line color", BRUSH_ICON, reg.lowerColor, (v) => actions.patch({ "reg.lowerColor": v })));
-      bar.appendChild(this.dropdown("Lower line style", styles, reg.lowerStyle, (s) => lineIcon(2, s), (v) => actions.patch({ "reg.lowerStyle": v }), { label: styleLabel2 }));
-      bar.appendChild(this.colorButton("Upper fill", BUCKET_ICON, reg.upperFill, (v) => actions.patch({ "reg.upperFill": v })));
-      bar.appendChild(this.colorButton("Lower fill", BUCKET_ICON, reg.lowerFill, (v) => actions.patch({ "reg.lowerFill": v })));
-      bar.appendChild(this.toggle("Show R\xB2", R2_ICON, reg.showR2, (v) => actions.patch({ "reg.showR2": v })));
-    }
-    const vwap2 = drawing.vwap;
-    if (paths.has("vwap.midColor") && vwap2) {
+      bar.appendChild(swatch("Midline color", BRUSH_ICON, (d) => reg(d).midColor, "reg.midColor"));
+      bar.appendChild(this.dropdown("Midline style", styles, common((d) => reg(d).midStyle), (s) => lineIcon(2, s), (v) => actions.patch({ "reg.midStyle": v }), { label: styleLabel2 }));
+      bar.appendChild(swatch("Upper line color", BRUSH_ICON, (d) => reg(d).upperColor, "reg.upperColor"));
+      bar.appendChild(this.dropdown("Upper line style", styles, common((d) => reg(d).upperStyle), (s) => lineIcon(2, s), (v) => actions.patch({ "reg.upperStyle": v }), { label: styleLabel2 }));
+      bar.appendChild(swatch("Lower line color", BRUSH_ICON, (d) => reg(d).lowerColor, "reg.lowerColor"));
+      bar.appendChild(this.dropdown("Lower line style", styles, common((d) => reg(d).lowerStyle), (s) => lineIcon(2, s), (v) => actions.patch({ "reg.lowerStyle": v }), { label: styleLabel2 }));
+      bar.appendChild(swatch("Upper fill", BUCKET_ICON, (d) => reg(d).upperFill, "reg.upperFill"));
+      bar.appendChild(swatch("Lower fill", BUCKET_ICON, (d) => reg(d).lowerFill, "reg.lowerFill"));
+      bar.appendChild(this.toggle("Show R\xB2", R2_ICON, common((d) => reg(d).showR2), (v) => actions.patch({ "reg.showR2": v })));
+    }
+    const vwapOf = (d) => d.vwap;
+    if (paths.has("vwap.midColor") && every((d) => vwapOf(d) != null)) {
+      const vwap2 = (d) => vwapOf(d);
       const styles = LINE_STYLE_OPTIONS.map((o) => o.value);
       const MULTS = [0.5, 1, 1.5, 2, 2.5, 3, 4, 5];
-      bar.appendChild(this.colorButton("VWAP color", BRUSH_ICON, vwap2.midColor, (v) => actions.patch({ "vwap.midColor": v })));
-      bar.appendChild(this.dropdown("VWAP style", styles, vwap2.midStyle, (s) => lineIcon(2, s), (v) => actions.patch({ "vwap.midStyle": v }), { label: styleLabel2 }));
+      bar.appendChild(swatch("VWAP color", BRUSH_ICON, (d) => vwap2(d).midColor, "vwap.midColor"));
+      bar.appendChild(this.dropdown("VWAP style", styles, common((d) => vwap2(d).midStyle), (s) => lineIcon(2, s), (v) => actions.patch({ "vwap.midStyle": v }), { label: styleLabel2 }));
       bar.appendChild(
-        this.dropdown("Band multiplier", MULTS, vwap2.multiplier, () => BANDS_ICON, (v) => actions.patch({ "vwap.multiplier": v }), {
+        this.dropdown("Band multiplier", MULTS, common((d) => vwap2(d).multiplier), () => BANDS_ICON, (v) => actions.patch({ "vwap.multiplier": v }), {
           label: (v) => `${v}\u03C3`,
           labelInTrigger: true
         })
       );
-      bar.appendChild(this.colorButton("Upper band color", BRUSH_ICON, vwap2.upperColor, (v) => actions.patch({ "vwap.upperColor": v })));
-      bar.appendChild(this.colorButton("Lower band color", BRUSH_ICON, vwap2.lowerColor, (v) => actions.patch({ "vwap.lowerColor": v })));
-      bar.appendChild(this.colorButton("Band fill", BUCKET_ICON, vwap2.bandFill, (v) => actions.patch({ "vwap.bandFill": v })));
+      bar.appendChild(swatch("Upper band color", BRUSH_ICON, (d) => vwap2(d).upperColor, "vwap.upperColor"));
+      bar.appendChild(swatch("Lower band color", BRUSH_ICON, (d) => vwap2(d).lowerColor, "vwap.lowerColor"));
+      bar.appendChild(swatch("Band fill", BUCKET_ICON, (d) => vwap2(d).bandFill, "vwap.bandFill"));
     }
     if (paths.has("maxCurvature")) {
-      const cur = drawing.maxCurvature ?? 24;
+      const cur = common((d) => d.maxCurvature ?? 24);
       bar.appendChild(
         this.dropdown("Max curvature", DEDEKIND_CURVATURE_OPTIONS, cur, () => DEDEKIND_ICON2, (v) => actions.patch({ maxCurvature: v }), {
           label: (v) => `n=${v}`,
@@ -31169,7 +31439,7 @@ var DrawingSettingsPopup = class {
       );
     }
     if (paths.has("mach")) {
-      const cur = drawing.mach ?? 2;
+      const cur = common((d) => d.mach ?? 2);
       bar.appendChild(
         this.dropdown("Mach number", MACH_NUMBER_OPTIONS, cur, () => SUPERSONIC_ICON2, (v) => actions.patch({ mach: v }), {
           label: (v) => `M=${v}`,
@@ -31178,7 +31448,7 @@ var DrawingSettingsPopup = class {
       );
     }
     if (paths.has("waveCount")) {
-      const cur = drawing.waveCount ?? 6;
+      const cur = common((d) => d.waveCount ?? 6);
       bar.appendChild(
         this.dropdown("Waves", MACH_WAVE_COUNT_OPTIONS, cur, () => SONIC_ICON2, (v) => actions.patch({ waveCount: v }), {
           label: (v) => `${v}`,
@@ -31186,26 +31456,27 @@ var DrawingSettingsPopup = class {
         })
       );
     }
-    const toggles = drawing;
-    if (paths.has("showPrice")) bar.appendChild(this.toggle("Show price", PRICE_DELTA_ICON, toggles.showPrice !== false, (v) => actions.patch({ showPrice: v })));
-    if (paths.has("showDate")) bar.appendChild(this.toggle("Show date", DATE_DELTA_ICON, toggles.showDate !== false, (v) => actions.patch({ showDate: v })));
-    if (paths.has("text.color") && textOnBar) bar.appendChild(this.colorButton("Text color", TYPE_ICON, drawing.text?.color || t.textColor, (v) => actions.patch({ "text.color": v })));
-    if (paths.has("text.size") && textOnBar) bar.appendChild(this.dropdown("Text size", TEXT_SIZE_OPTIONS.map((o) => o.value), drawing.text?.size ?? "normal", (s) => labelSizeIcon(s), (v) => actions.patch({ "text.size": v }), { label: sizeLabel }));
-    if (paths.has("text.bold") && !paths.has("text.value")) bar.appendChild(this.toggle("Bold", BOLD_ICON, !!drawing.text?.bold, (v) => actions.patch({ "text.bold": v })));
-    if (paths.has("text.italic") && !paths.has("text.value")) bar.appendChild(this.toggle("Italic", ITALIC_ICON, !!drawing.text?.italic, (v) => actions.patch({ "text.italic": v })));
-    if (paths.has("text.value")) bar.appendChild(this.iconBtn("Text", TYPE_ICON, () => this.toggleTextPanel(drawing, actions, !textOnBar)));
+    const flags = (d) => d;
+    if (paths.has("showPrice")) bar.appendChild(this.toggle("Show price", PRICE_DELTA_ICON, common((d) => flags(d).showPrice !== false), (v) => actions.patch({ showPrice: v })));
+    if (paths.has("showDate")) bar.appendChild(this.toggle("Show date", DATE_DELTA_ICON, common((d) => flags(d).showDate !== false), (v) => actions.patch({ showDate: v })));
+    if (paths.has("text.color") && textOnBar) bar.appendChild(swatch("Text color", TYPE_ICON, (d) => d.text?.color || t.textColor, "text.color"));
+    if (paths.has("text.size") && textOnBar) bar.appendChild(this.dropdown("Text size", TEXT_SIZE_OPTIONS.map((o) => o.value), common((d) => d.text?.size ?? "normal"), (s) => labelSizeIcon(s), (v) => actions.patch({ "text.size": v }), { label: sizeLabel }));
+    const textField = !multi && paths.has("text.value");
+    if (paths.has("text.bold") && !textField) bar.appendChild(this.toggle("Bold", BOLD_ICON, common((d) => !!d.text?.bold), (v) => actions.patch({ "text.bold": v })));
+    if (paths.has("text.italic") && !textField) bar.appendChild(this.toggle("Italic", ITALIC_ICON, common((d) => !!d.text?.italic), (v) => actions.patch({ "text.italic": v })));
+    if (textField) bar.appendChild(this.iconBtn("Text", TYPE_ICON, () => this.toggleTextPanel(drawing, actions, !textOnBar)));
     const editableLevels = drawing.editableLevels();
-    if (editableLevels && !(drawing instanceof MachFigure)) {
-      const fib = drawing;
+    if (editableLevels && every((d) => d.editableLevels() != null && !(d instanceof MachFigure))) {
+      const fib = (d) => d;
       const sizes = TEXT_SIZE_OPTIONS.map((o) => o.value);
-      bar.appendChild(this.dropdown("Numbers size", sizes, fib.numbersSize ?? "small", (s) => numbersSizeIcon(s), (v) => actions.patch({ numbersSize: v }), { label: sizeLabel }));
-      bar.appendChild(this.dropdown("Label size", sizes, fib.labelsSize ?? "normal", (s) => labelSizeIcon(s), (v) => actions.patch({ labelsSize: v }), { label: sizeLabel }));
+      bar.appendChild(this.dropdown("Numbers size", sizes, common((d) => fib(d).numbersSize ?? "small"), (s) => numbersSizeIcon(s), (v) => actions.patch({ numbersSize: v }), { label: sizeLabel }));
+      bar.appendChild(this.dropdown("Label size", sizes, common((d) => fib(d).labelsSize ?? "normal"), (s) => labelSizeIcon(s), (v) => actions.patch({ labelsSize: v }), { label: sizeLabel }));
     }
     bar.appendChild(this.divider());
-    if (isFrvp) bar.appendChild(this.iconBtn("Settings", GEAR_ICON, () => this.settingsDialog.open(drawing, actions, "frvp")));
-    if (isPosition) bar.appendChild(this.iconBtn("Position size", GEAR_ICON, () => this.settingsDialog.open(drawing, actions, "position")));
-    if (editableLevels) bar.appendChild(this.iconBtn("Levels", GEAR_ICON, () => this.settingsDialog.open(drawing, actions, "levels")));
-    bar.appendChild(this.toggle("Lock", LOCK_ICON, drawing.locked, (v) => actions.setLocked(v)));
+    if (!multi && isFrvp) bar.appendChild(this.iconBtn("Settings", GEAR_ICON, () => this.settingsDialog.open(drawing, actions, "frvp")));
+    if (!multi && isPosition) bar.appendChild(this.iconBtn("Position size", GEAR_ICON, () => this.settingsDialog.open(drawing, actions, "position")));
+    if (!multi && editableLevels) bar.appendChild(this.iconBtn("Levels", GEAR_ICON, () => this.settingsDialog.open(drawing, actions, "levels")));
+    bar.appendChild(this.toggle("Lock", LOCK_ICON, common((d) => d.locked), (v) => actions.setLocked(v), UNLOCK_ICON));
     const del = this.iconBtn("Delete", TRASH_ICON, () => actions.remove());
     del.style.color = "var(--vela-danger)";
     bar.appendChild(del);
@@ -31391,7 +31662,7 @@ var DrawingSettingsPopup = class {
     });
     return b;
   }
-  /** The trailing kebab overflow — z-order actions + reset settings. */
+  /** The trailing kebab overflow — duplicate, z-order actions, reset settings. */
   kebabButton(actions) {
     const b = this.base("More");
     b.innerHTML = sized(KEBAB_ICON);
@@ -31403,6 +31674,7 @@ var DrawingSettingsPopup = class {
         return;
       }
       this.openActionMenu(b, [
+        { icon: CLONE_ICON, label: "Duplicate", onClick: () => actions.duplicate() },
         { icon: FRONT_ICON, label: "Bring to front", onClick: () => actions.reorder("front") },
         { icon: BACK_ICON, label: "Send to back", onClick: () => actions.reorder("back") },
         { icon: RESET_ICON, label: "Reset settings", onClick: () => actions.resetSettings() }
@@ -31559,26 +31831,30 @@ var DrawingSettingsPopup = class {
     this.tipEl?.remove();
     this.tipEl = null;
   }
-  toggle(tip, icon2, active, onChange) {
+  /** An on/off button. A mixed state (the selected drawings disagree) reads as half-lit and
+   *  the first click turns it ON for all of them. `off` swaps in a distinct glyph while the
+   *  toggle is off (a lock reads as an open padlock until it is engaged); mixed shows `icon`. */
+  toggle(tip, icon2, active, onChange, off) {
     const b = this.base(tip);
-    b.innerHTML = sized(icon2);
     const set = (on2) => {
-      b.dataset.active = on2 ? "1" : "0";
+      b.dataset.active = on2 === MIXED ? "mixed" : on2 ? "1" : "0";
+      b.innerHTML = sized(off && on2 === false ? off : icon2);
     };
     set(active);
     let on = active;
     b.addEventListener("click", () => {
-      on = !on;
+      on = on === MIXED ? true : !on;
       set(on);
       onChange(on);
     });
     return b;
   }
   /** An inline numeric width field for tools whose stroke range outgrows the 1–4px
-   *  ladder — the value is clamped to the schema's declared min/max on commit. */
+   *  ladder — the value is clamped to the schema's declared min/max on commit. A mixed
+   *  value shows an empty field with a dash until a number is typed for all. */
   widthInput(tip, value, min, max, step, onChange) {
     const ni = new NumberInput({
-      value,
+      value: value === MIXED ? min : value,
       min,
       max,
       step,
@@ -31590,13 +31866,18 @@ var DrawingSettingsPopup = class {
       title: tip,
       onChange
     });
+    if (value === MIXED) {
+      ni.input.value = "";
+      ni.input.placeholder = "\u2014";
+    }
     ni.el.dataset.tip = tip;
     trapChartKeys(ni.el);
     return ni.el;
   }
   /** A pick-one dropdown: the trigger shows the current value's glyph (plus an optional inline
    *  text label — e.g. `2px` — for controls that would otherwise look alike), and clicking it
-   *  opens a floating list of every option so a value is one click away (no cycling through). */
+   *  opens a floating list of every option so a value is one click away (no cycling through).
+   *  A mixed value shows a dash in the trigger and highlights no row. */
   dropdown(tip, values, current, render, onChange, opts = {}) {
     const b = this.base(tip);
     b.style.width = "auto";
@@ -31606,14 +31887,20 @@ var DrawingSettingsPopup = class {
     let cur = current;
     const paint = (v) => {
       b.replaceChildren();
-      const glyph = render(v);
+      if (v === MIXED) {
+        const dash = document.createElement("span");
+        dash.textContent = "\u2014";
+        dash.style.cssText = "min-width:18px;text-align:center;opacity:0.85;";
+        b.appendChild(dash);
+      }
+      const glyph = v === MIXED ? "" : render(v);
       if (glyph) {
         const ic = document.createElement("span");
         ic.style.cssText = "display:flex;";
         ic.innerHTML = sized(glyph);
         b.appendChild(ic);
       }
-      if (opts.label && opts.labelInTrigger) {
+      if (opts.label && opts.labelInTrigger && v !== MIXED) {
         const tx = document.createElement("span");
         tx.textContent = opts.label(v);
         tx.style.cssText = "font-size:11px;opacity:0.85;font-variant-numeric:tabular-nums;";
@@ -31683,8 +31970,10 @@ var DrawingSettingsPopup = class {
   }
   /** A color control: an `icon` over a thin **colored underline** showing the current
    *  value (the common idiom), with an invisible native picker overlaid to edit it.
-   *  `iconSize` shrinks it for the floating text controls. */
-  colorButton(tip, icon2, color, onChange, iconSize = 17) {
+   *  `iconSize` shrinks it for the floating text controls. A mixed color paints the
+   *  underline striped with the colors `used` across the selection, and the picker then
+   *  leads with those colors so unifying onto one of them is a single click. */
+  colorButton(tip, icon2, color, onChange, iconSize = 17, used = []) {
     const b = document.createElement("button");
     b.type = "button";
     b.dataset.tip = tip;
@@ -31694,13 +31983,14 @@ var DrawingSettingsPopup = class {
     ic.style.cssText = "display:flex;";
     ic.innerHTML = sized(icon2, iconSize);
     const bar = document.createElement("span");
-    bar.style.cssText = `display:block;height:3px;width:${Math.round(iconSize * 0.85)}px;border-radius:2px;background:${color};`;
+    bar.style.cssText = `display:block;height:3px;width:${Math.round(iconSize * 0.85)}px;border-radius:2px;background:${color === MIXED ? stripes(used) : color};`;
     b.append(ic, bar);
     let cur = color;
     b.addEventListener("pointerdown", (e) => e.stopPropagation());
     b.addEventListener("click", (e) => {
       e.stopPropagation();
-      this.toggleColorPopover(b, cur, (v) => {
+      const seed = cur === MIXED ? used[0] ?? DEFAULT_DRAWING_COLOR : cur;
+      this.toggleColorPopover(b, seed, cur === MIXED ? used : [], (v) => {
         cur = v;
         bar.style.background = v;
         onChange(v);
@@ -31709,20 +31999,42 @@ var DrawingSettingsPopup = class {
     return b;
   }
   /** Open the color popover for `anchor`, or close it if it's already this anchor's (toggle). */
-  toggleColorPopover(anchor, color, onChange) {
+  toggleColorPopover(anchor, color, used, onChange) {
     if (this.colorOwner === anchor) {
       this.closeColorPopover();
       return;
     }
-    this.openColorPopover(anchor, color, onChange);
+    this.openColorPopover(anchor, color, used, onChange);
   }
-  /** A floating RGB picker + opacity slider anchored to a color swatch — emits `#RRGGBB(AA)`. */
-  openColorPopover(anchor, color, onChange) {
+  /** A floating RGB picker + opacity slider anchored to a color swatch — emits `#RRGGBB(AA)`.
+   *  `used` (a mixed swatch's colors) leads the picker as one-click unify shortcuts. */
+  openColorPopover(anchor, color, used, onChange) {
     const t = this.theme;
     this.colorPop = this.hostFloat(anchor, {
       zIndex: 25,
       padding: "10px",
-      fill: (el) => {
+      fill: (el, pop) => {
+        if (used.length > 1) {
+          const row = document.createElement("div");
+          row.style.cssText = "display:flex;align-items:center;gap:6px;padding-bottom:9px;border-bottom:1px solid var(--vela-border);";
+          const lbl = document.createElement("span");
+          lbl.textContent = "In use";
+          lbl.style.cssText = "font:var(--vela-font-size-sm) inherit;opacity:0.7;margin-right:2px;";
+          row.appendChild(lbl);
+          for (const c of used) {
+            const sw = document.createElement("button");
+            sw.type = "button";
+            sw.dataset.tip = c;
+            sw.style.cssText = `width:18px;height:18px;border-radius:4px;border:1px solid var(--vela-border-strong);cursor:pointer;background:${c};padding:0;`;
+            sw.addEventListener("click", (e) => {
+              e.stopPropagation();
+              pop.hide();
+              onChange(c);
+            });
+            row.appendChild(sw);
+          }
+          el.appendChild(row);
+        }
         el.appendChild(buildColorPicker(color, t, onChange));
       }
     });
@@ -31743,6 +32055,7 @@ var TYPE_ICON = icon("type");
 var PRICE_DELTA_ICON = icon("price-delta");
 var DATE_DELTA_ICON = icon("date-delta");
 var LOCK_ICON = icon("lock");
+var UNLOCK_ICON = icon("unlock");
 var FRONT_ICON = icon("bring-front");
 var BACK_ICON = icon("send-back");
 var TRASH_ICON = icon("trash");
@@ -31750,6 +32063,7 @@ var BOLD_ICON = icon("bold");
 var ITALIC_ICON = icon("italic");
 var GRIP_ICON = icon("grip");
 var KEBAB_ICON = icon("kebab");
+var CLONE_ICON = icon("clone");
 var RESET_ICON = icon("reset");
 var GEAR_ICON = icon("gear");
 var CHEVRON_ICON = icon("chevron-down");
@@ -31758,6 +32072,12 @@ var BANDS_ICON = icon("bands");
 var DEDEKIND_ICON2 = icon("dedekind");
 var SONIC_ICON2 = icon("sonic");
 var SUPERSONIC_ICON2 = icon("supersonic");
+function stripes(colors) {
+  const bands = colors.length > 1 ? colors : ["var(--vela-fg-faint)", "var(--vela-fg-muted)"];
+  const step = 100 / bands.length;
+  const stops = bands.map((c, i) => `${c} ${i * step}% ${(i + 1) * step}%`).join(",");
+  return `linear-gradient(90deg,${stops})`;
+}
 function lineIcon(width, style) {
   const dash = style === "dashed" ? "5,3" : style === "dotted" ? "1.5,3" : "";
   return svg24(`<line x1="3.5" y1="12" x2="20.5" y2="12" stroke-width="${Number(width) || 2}" stroke-dasharray="${dash}"/>`);
@@ -32041,6 +32361,20 @@ var UserDrawingController = class {
     // reported exactly when it actually changes).
     this.textEditor = null;
     this.painter = new DrawingPainter();
+    /** The open popup is the multi-selection bar (vs one drawing's own) — decides what a
+     *  shrinking selection does with it. */
+    this.popupMulti = false;
+    /** Dismiss-on-outside-press also clears the selection — except when the press is ABOUT the
+     *  selection: it carries a multi-select modifier (Shift / Ctrl / Cmd — it will add to the
+     *  selection or sweep a marquee onto it), or it landed on a drawing that is already selected
+     *  (the canvas handler ran first and is holding it for a drag or a click), so the drawings
+     *  whose bar just closed must stay selected. */
+    this.onPopupDismissed = (e) => {
+      if (e && (e.shiftKey || e.ctrlKey || e.metaKey)) return;
+      const pressed = this.interaction.pressedId();
+      if (pressed && this.selectedIds.has(pressed)) return;
+      this.clearSelection();
+    };
     this.ctx = canvas.getContext("2d");
     this.popup = new DrawingSettingsPopup(overlayHost, deps.theme(), () => deps.chartBarMs());
     this.toolbar = new DrawingToolbar(
@@ -32217,6 +32551,12 @@ var UserDrawingController = class {
   }
   setSelection(ids) {
     this.selectedIds = new Set(ids);
+    if (ids.length >= 2) this.openSettingsForSelection(ids);
+    else if (this.popupMulti) {
+      this.popupMulti = false;
+      this.popup.close();
+      if (ids.length === 1) this.openSettingsById(ids[0], 0, 0);
+    }
     this.render();
   }
   /** Programmatic twin of clicking the drawing: highlight it + float its settings popup. */
@@ -32262,12 +32602,16 @@ var UserDrawingController = class {
     });
   }
   /** Delete the (unlocked) drawing under the cursor. True when one was removed.
-   *  Shared by the eraser (click + drag) and the middle-click shortcut. */
-  deleteAt(x, y) {
+   *  Shared by the eraser (click + drag) and the middle-click shortcut; the latter passes
+   *  `withSelection` so a hit on a member of a multi-selection removes the selection's
+   *  unlocked members — whichever member was hit, locked or not. */
+  deleteAt(x, y, withSelection = false) {
     const hit = topDrawingAt(this.drawings, x, y, this.deps.projector(), HIT_TOLERANCE);
-    if (!hit || hit.locked) return false;
+    if (!hit) return false;
+    const ids = deleteTargets(hit, this.selectedIds, this.drawings, withSelection);
+    if (ids.length === 0) return false;
     this.popup.close();
-    this.emit({ kind: "delete", ids: [hit.id] });
+    this.emit({ kind: "delete", ids });
     return true;
   }
   /** Shift+press on the empty plot: arm the measure ruler AND start it at (x, y) in one
@@ -32293,7 +32637,14 @@ var UserDrawingController = class {
       this.render();
     }
   }
-  pointerDown(x, y, snap = "off", shift2 = false) {
+  /** Ctrl/Cmd+press on the empty plot: sweep a selection box (adds the drawings it touches to
+   *  the selection). Returns false when a mode/tool is active (the normal press path owns it). */
+  beginMarqueeAt(x, y) {
+    if (this.measureMode || this.eraserMode || !this.interaction.beginMarquee(x, y)) return false;
+    this.render();
+    return true;
+  }
+  pointerDown(x, y, snap = "off", shift2 = false, mod = false) {
     if (this.eraserMode) {
       this.erasing = true;
       this.deleteAt(x, y);
@@ -32313,9 +32664,9 @@ var UserDrawingController = class {
         return;
       }
     }
-    this.interaction.down(x, y, snap, shift2);
+    this.interaction.down(x, y, snap, shift2, mod);
   }
-  pointerMove(x, y, snap = "off", shift2 = false) {
+  pointerMove(x, y, snap = "off", shift2 = false, mod = false) {
     if (this.eraserMode) {
       if (this.erasing) this.deleteAt(x, y);
       return;
@@ -32327,12 +32678,14 @@ var UserDrawingController = class {
       return;
     }
     this.interaction.move(x, y, snap, shift2);
-    this.updateHover(x, y);
+    this.updateHover(x, y, mod);
   }
-  /** Track which drawing is hovered so its handles appear on hover (and only then). */
-  updateHover(x, y) {
+  /** Track which drawing is hovered so its handles appear on hover (and only then). While
+   *  Ctrl/Cmd is held the cursor is picking a selection — handles then mark only what IS
+   *  selected, so a hovered candidate doesn't already read as selected. */
+  updateHover(x, y, mod = false) {
     let id = null;
-    if (this.activeTool == null && !this.interaction.isPlacing() && !this.interaction.isDragging()) {
+    if (!mod && this.activeTool == null && !this.interaction.isPlacing() && !this.interaction.isDragging()) {
       id = topDrawingAt(this.drawings, x, y, this.deps.projector(), HIT_TOLERANCE)?.id ?? null;
     }
     if (id !== this.hoveredId) {
@@ -32352,7 +32705,12 @@ var UserDrawingController = class {
       this.render();
       return;
     }
+    const dragged = this.interaction.isDragging() ? this.interaction.pressedId() : null;
     this.interaction.up(x, y);
+    if (dragged && this.selectedIds.has(dragged) && !this.popup.isOpen()) {
+      if (this.selectedIds.size >= 2) this.openSettingsForSelection(this.selectionIds());
+      else this.openSettingsById(dragged, x, y);
+    }
   }
   /** Toggle the transient ruler. Arming it clears any drawing tool + selection. */
   toggleMeasure() {
@@ -32617,7 +32975,7 @@ var UserDrawingController = class {
         this.emit({ kind: "duplicate", ids: this.selectionIds() });
         break;
       case "delete": {
-        const ids = this.selectedIds.size ? this.selectionIds() : this.hoveredId ? [this.hoveredId] : [];
+        const ids = this.selectedIds.size ? this.deletableSelection() : this.hoveredId ? [this.hoveredId] : [];
         if (ids.length) {
           this.popup.close();
           this.emit({ kind: "delete", ids });
@@ -32633,6 +32991,9 @@ var UserDrawingController = class {
   selectionIds() {
     return [...this.selectedIds];
   }
+  deletableSelection() {
+    return deletableSelection(this.selectedIds, this.drawings);
+  }
   /** Move every selected (unlocked) drawing by a pixel delta — one edit/edit-many → one undo step. */
   nudgeSelection(dx, dy) {
     const proj = this.deps.projector();
@@ -32741,6 +33102,8 @@ var UserDrawingController = class {
     this.painter.seriesLook = this.deps.seriesLook();
     this.painter.paintAll(ctx, this.drawings.filter((d) => !this.isInterleaved(d)), proj, this.deps.theme(), targets);
     this.painter.paintHighlights(ctx, this.drawings.filter((d) => this.isInterleaved(d)), proj, handleIdsFor(targets));
+    const clones = this.interaction.dragClones();
+    if (clones) this.painter.paintAll(ctx, clones, proj, this.deps.theme(), { selected: new Set(clones.map((c) => c.id)) });
     this.layoutTextEditor();
     const ghost = this.interaction.ghost();
     if (ghost) this.painter.paintGhost(ctx, ghost, proj, this.deps.theme());
@@ -32756,6 +33119,8 @@ var UserDrawingController = class {
     const my = m ? proj.yOf(m.point.price, m.paneId) : null;
     if (m && my != null) this.painter.paintSnapRing(ctx, proj.xOf(m.point.time), my, this.deps.theme());
     if (this.measure.isActive()) this.measure.paint(ctx, proj, this.deps.theme());
+    const marquee = this.interaction.marqueeRect();
+    if (marquee) this.painter.paintMarquee(ctx, marquee);
   }
   destroy() {
     this.closeTextEditor();
@@ -32773,15 +33138,80 @@ var UserDrawingController = class {
     if (this.selectedIds.size) this.emit({ kind: "select", ids: [] });
     this.render();
   }
+  /** Report the live drawings' current state as one edit (one undo step, however many). */
+  emitEdits(drawings) {
+    const docs = drawings.map((d) => d.serialize());
+    if (docs.length === 1) this.emit({ kind: "edit", doc: docs[0] });
+    else if (docs.length > 1) this.emit({ kind: "edit-many", docs });
+  }
+  /** The one bar for a multi-selection: it shows the controls all of its drawings share and
+   *  every action applies to all of them. Floats clear of their combined bounds. */
+  openSettingsForSelection(ids) {
+    const live = () => ids.map((id) => this.drawings.find((d) => d.id === id)).filter((d) => d != null);
+    const drawings = live();
+    if (drawings.length < 2) return;
+    const proj = this.deps.projector();
+    let anchor = null;
+    for (const d of drawings) {
+      const b = d.bounds(proj);
+      if (!b) continue;
+      if (!anchor) anchor = { ...b };
+      else {
+        const right = Math.max(anchor.x + anchor.w, b.x + b.w);
+        const bottom = Math.max(anchor.y + anchor.h, b.y + b.h);
+        anchor.x = Math.min(anchor.x, b.x);
+        anchor.y = Math.min(anchor.y, b.y);
+        anchor.w = right - anchor.x;
+        anchor.h = bottom - anchor.y;
+      }
+    }
+    this.popupMulti = true;
+    this.emit({ kind: "settings", id: drawings[0].id });
+    this.popup.open(drawings, anchor, {
+      resolve: () => live()[0] ?? null,
+      patch: (p) => {
+        const ds = live();
+        for (const d of ds) d.applySettings(p);
+        this.render();
+        this.emitEdits(ds);
+      },
+      setLocked: (v) => {
+        const ds = live();
+        for (const d of ds) d.locked = v;
+        this.emitEdits(ds);
+      },
+      reorder: (to) => {
+        for (const d of live()) this.emit({ kind: "reorder", id: d.id, to });
+      },
+      duplicate: () => {
+        this.popup.close();
+        this.emit({ kind: "duplicate", ids: live().map((d) => d.id) });
+      },
+      resetSettings: () => {
+        const ds = live();
+        for (const d of ds) resetDrawingSettings(d);
+        this.render();
+        this.emitEdits(ds);
+        this.openSettingsForSelection(ids);
+      },
+      remove: () => {
+        const ids2 = live().filter((d) => !d.locked).map((d) => d.id);
+        if (ids2.length === 0) return;
+        this.popup.close();
+        this.emit({ kind: "delete", ids: ids2 });
+      }
+    }, this.onPopupDismissed);
+  }
   /** A click on a drawing opens its settings toolbar (text labels edit text here too). */
   openSettingsById(id, _x, _y) {
     const drawing = this.drawings.find((d) => d.id === id);
     if (!drawing) return;
     const live = () => this.drawings.find((d) => d.id === id);
+    this.popupMulti = false;
     this.emit({ kind: "select", ids: [id] });
     this.emit({ kind: "settings", id });
     const anchor = drawing.bounds(this.deps.projector());
-    this.popup.open(drawing, anchor, {
+    this.popup.open([drawing], anchor, {
       // Sync rebuilds instances, so a panel that reads values back after a patch (e.g. the
       // position tool's price fields, where one edit can flip another level) resolves fresh.
       resolve: () => live() ?? null,
@@ -32799,6 +33229,11 @@ var UserDrawingController = class {
         this.emit({ kind: "edit", doc: d.serialize() });
       },
       reorder: (to) => this.emit({ kind: "reorder", id, to }),
+      duplicate: () => {
+        this.finishTextEditor(true);
+        this.popup.close();
+        this.emit({ kind: "duplicate", ids: [id] });
+      },
       resetSettings: () => {
         const d = live();
         if (!d) return;
@@ -32821,7 +33256,13 @@ var UserDrawingController = class {
         this.popup.close();
         this.emit({ kind: "delete", ids: [id] });
       }
-    }, () => this.clearSelection());
+    }, this.onPopupDismissed);
+  }
+  /** A plain click on the empty plot: drop the selection. The popup's dismiss-on-outside-press
+   *  does the same, but a selection can exist with no bar open (a lone Ctrl-click pick, a
+   *  selection whose bar was dismissed by a modifier press) — this covers those. */
+  deselect() {
+    this.clearSelection();
   }
   /** Report placement progress upstream (`draft` intent) so the drawings sync can
    *  mirror the ghost live on linked charts. Called from every render; only actual
@@ -32847,6 +33288,13 @@ var UserDrawingController = class {
       }, 0);
       return;
     }
+    if (i.kind === "clone") {
+      const before = new Set(this.drawings.map((d) => d.id));
+      this.intentCb?.(i);
+      const fresh = this.drawings.filter((d) => !before.has(d.id));
+      if (fresh.length === 1) this.openSettingsById(fresh[0].id, 0, 0);
+      return;
+    }
     this.intentCb?.(i);
   }
 };
@@ -33875,7 +34323,6 @@ var ZOOM_OUT_MARGIN_BARS = 6;
 var ZOOM_TAU_MS = 70;
 var SCALE_TAU_MS = 80;
 var FLING_TAU_MS = 110;
-var LIVE_BAR_TAU_MS = 90;
 var SCROLL_TO_TAU_MS = 130;
 var FLING_STOP_PX = 0.02;
 var PRICE_SCALE_K = 4e-3;
@@ -33946,9 +34393,13 @@ var NativeRenderer = class {
     /** Drawings layer self-serves Ctrl+Z/Y (see the `historyChords` feature). */
     this.historyChordsEnabled = true;
     this.liveRegion = null;
-    // ── animation state (eased zoom + inertial pan) ──
+    // ── animation state (eased zoom + inertial pan + live-bar glide) ──
     this.animZoom = true;
     this.animPan = true;
+    this.animLiveBarMs = 0;
+    // forming-bar OHLC glide time-constant; 0 = each tick snaps
+    this.animLiveBarOnMs = LIVE_BAR_EASE_DEFAULT_MS;
+    // the duration the settings-dialog on/off toggle restores (last non-zero value configured)
     // Brand default candles.
     this.candleUp = BULLISH;
     this.candleDown = BEARISH;
@@ -34073,7 +34524,7 @@ var NativeRenderer = class {
     this.moveIndicatorCbs = /* @__PURE__ */ new Set();
     this.priceStyleCbs = /* @__PURE__ */ new Set();
     this.name = "native";
-    this.features = ["logScale", "currentPriceLine", "priceLabel", "countdown", "upColor", "downColor", "glow", "animZoom", "animPan", "intro", "zoomAnchor", "axisDrag", "paneResize", "candleZOrder", "candleVisible", "seriesOrder", "highlights", "sessionZones", "gridlines", "axisLabels", "scaleMode", "invertScale", "paneScales", "autoScale", "timezone", "keyboard", "historyChords", "priceStyle", "priceBaseline", "baselinePrice", "settings", "attribution", "dialogHost", "tradeMarkers", "indicatorTitles", "indicatorValues"];
+    this.features = ["logScale", "currentPriceLine", "priceLabel", "countdown", "upColor", "downColor", "glow", "animZoom", "animPan", "animLiveBar", "intro", "zoomAnchor", "axisDrag", "paneResize", "candleZOrder", "candleVisible", "seriesOrder", "highlights", "sessionZones", "gridlines", "axisLabels", "scaleMode", "invertScale", "paneScales", "autoScale", "timezone", "keyboard", "historyChords", "priceStyle", "priceBaseline", "baselinePrice", "settings", "attribution", "dialogHost", "tradeMarkers", "indicatorTitles", "indicatorValues"];
     /** Track cursor proximity to the scroll button on the plot (bubbles from the button too,
      *  so moving onto the button doesn't count as leaving). */
     this.onScrollProximityMove = (e) => {
@@ -34107,6 +34558,7 @@ var NativeRenderer = class {
       this.backendMode = opts.nativeBackend;
       this.animZoom = opts.animZoom;
       this.animPan = opts.animPan;
+      this.setLiveBarEase(resolveLiveBarEaseMs(opts.animLiveBar));
       this.glowAmount = opts.glow;
       this.candleUp = opts.upColor;
       this.candleDown = opts.downColor;
@@ -34156,6 +34608,10 @@ var NativeRenderer = class {
       case "animPan":
         this.animPan = Boolean(value);
         return;
+      case "animLiveBar":
+        this.setLiveBarEase(resolveLiveBarEaseMs(value));
+        return;
+      // affects the next tick only; a glide in flight finishes at the new rate (or snaps at 0)
       case "intro": {
         const s = value === false || value === "none" || value === "off" || value == null ? "" : String(value);
         this.introStyle = s;
@@ -34292,6 +34748,8 @@ var NativeRenderer = class {
         return this.animZoom;
       case "animPan":
         return this.animPan;
+      case "animLiveBar":
+        return this.animLiveBarMs;
       case "intro":
         return this.introStyle;
       case "zoomAnchor":
@@ -34460,7 +34918,8 @@ var NativeRenderer = class {
         labelsVisible: this.scene.showAxisLabels,
         currentPriceLine: this.scene.showPriceLine,
         priceLabel: this.scene.showPriceLabel,
-        countdown: this.scene.showCountdown
+        countdown: this.scene.showCountdown,
+        animateLastPrice: this.animLiveBarMs > 0
       },
       panes: { separatorColor: s.separatorColor ?? t.borderColor },
       trades: {
@@ -34567,6 +35026,7 @@ var NativeRenderer = class {
     this.scene.showPriceLabel = next.priceScale.priceLabel;
     this.scene.showCountdown = next.priceScale.countdown;
     this.syncCountdownTimer();
+    this.animLiveBarMs = next.priceScale.animateLastPrice ? this.animLiveBarOnMs : 0;
     s.separatorColor = keepInherit(s.separatorColor, next.panes.separatorColor, prevTheme.borderColor);
     this.scene.tradeMarkers = {
       visible: next.trades.visible,
@@ -35010,7 +35470,10 @@ var NativeRenderer = class {
       zoomTo: (target, anchorLogical, anchorX) => this.zoomTo(target, anchorLogical, anchorX),
       fling: (v) => this.fling(v),
       onPointerMove: (x, y) => this.handlePointerMove(x, y),
-      onClick: (x) => this.handleClick(x),
+      onClick: (x) => {
+        this.userDrawings?.deselect();
+        this.handleClick(x);
+      },
       onAxisLongPress: (axis, x, y) => {
         for (const cb of this.axisLongPressCbs) cb({ axis, x, y });
       },
@@ -35028,11 +35491,13 @@ var NativeRenderer = class {
       // User drawings claim a gesture before pan when armed / over a drawing.
       drawingsClaim: (x, y) => this.userDrawings?.claim(x, y) ?? false,
       drawingsMeasureStart: (x, y, snap) => this.userDrawings?.beginMeasureAt(x, y, snap) ?? false,
-      drawingsDeleteAt: (x, y) => this.userDrawings?.deleteAt(x, y) ?? false,
+      drawingsMarqueeStart: (x, y) => this.userDrawings?.beginMarqueeAt(x, y) ?? false,
+      drawingsDeleteAt: (x, y) => this.userDrawings?.deleteAt(x, y, true) ?? false,
+      // middle-click: a selected hit takes the whole selection
       drawingsCancelPlacement: () => this.userDrawings?.cancelPlacement() ?? false,
       drawingsSnapMode: () => this.snapMode,
-      drawingsPointerDown: (x, y, snap, shift2) => this.userDrawings?.pointerDown(x, y, snap, shift2),
-      drawingsPointerMove: (x, y, snap, shift2) => this.userDrawings?.pointerMove(x, y, snap, shift2),
+      drawingsPointerDown: (x, y, snap, shift2, mod) => this.userDrawings?.pointerDown(x, y, snap, shift2, mod),
+      drawingsPointerMove: (x, y, snap, shift2, mod) => this.userDrawings?.pointerMove(x, y, snap, shift2, mod),
       drawingsPointerUp: (x, y, snap) => this.userDrawings?.pointerUp(x, y, snap),
       drawingsCursor: (x, y) => this.userDrawings?.cursorAt(x, y) ?? null,
       drawingsDblClick: (x, y) => this.userDrawings?.dblClick(x, y) ?? false,
@@ -35383,8 +35848,11 @@ var NativeRenderer = class {
     const last = this.bars[n - 1];
     if (last && bar.time === last.time) {
       this.bars[n - 1] = bar;
-      if (this.liveEaseTime !== bar.time) this.syncLiveEase(bar);
-      this.animator.start();
+      if (this.animLiveBarMs <= 0 || this.liveEaseTime !== bar.time) {
+        this.syncLiveEase(bar);
+      } else {
+        this.animator.start();
+      }
     } else if (!last || bar.time > last.time) {
       this.bars.push(bar);
       this.syncLiveEase(bar);
@@ -35396,6 +35864,12 @@ var NativeRenderer = class {
     this.scene.bars = this.bars;
     this.scheduler.invalidate(4 /* Full */);
   }
+  /** Set the live-bar glide duration (0 = off). A non-zero value is also remembered as
+   *  what the config's on/off toggle (`priceScale.animateLastPrice`) switches back on to. */
+  setLiveBarEase(ms) {
+    this.animLiveBarMs = ms;
+    if (ms > 0) this.animLiveBarOnMs = ms;
+  }
   /** Snap the eased forming-bar state to `bar` — no glide (a fresh bar or the first tick of one). */
   syncLiveEase(bar) {
     this.liveEaseTime = bar.time;
@@ -35408,9 +35882,10 @@ var NativeRenderer = class {
     const target = this.bars[this.bars.length - 1];
     if (!target || this.liveEaseTime !== target.time) return false;
     const eps = Math.max(1e-9, Math.abs(target.close) * 1e-6);
-    const nh = easeToward(this.liveEaseHigh, target.high, dtMs, LIVE_BAR_TAU_MS);
-    const nl = easeToward(this.liveEaseLow, target.low, dtMs, LIVE_BAR_TAU_MS);
-    const nc = easeToward(this.liveEaseClose, target.close, dtMs, LIVE_BAR_TAU_MS);
+    const tau = this.animLiveBarMs;
+    const nh = easeToward(this.liveEaseHigh, target.high, dtMs, tau);
+    const nl = easeToward(this.liveEaseLow, target.low, dtMs, tau);
+    const nc = easeToward(this.liveEaseClose, target.close, dtMs, tau);
     const active = Math.abs(nh - target.high) > eps || Math.abs(nl - target.low) > eps || Math.abs(nc - target.close) > eps;
     this.liveEaseHigh = active ? nh : target.high;
     this.liveEaseLow = active ? nl : target.low;
@@ -37356,6 +37831,10 @@ function str3(inputs, key, fallback) {
   const v = inputs[key];
   return typeof v === "string" && v !== "" ? v : fallback;
 }
+function bool(inputs, key, fallback) {
+  const v = inputs[key];
+  return typeof v === "boolean" ? v : fallback;
+}
 function toPoints(bars, values, colors) {
   const pts = new Array(bars.length);
   for (let i = 0; i < bars.length; i++) {
@@ -38887,10 +39366,6 @@ var aroon = {
       plots: [
         { key: "up", title: "Aroon up", values: up, color: BULLISH, width: 2 },
         { key: "down", title: "Aroon down", values: down, color: BEARISH, width: 2 }
-      ],
-      levels: [
-        { key: "upper", price: 100, color: NEUTRAL, lineStyle: "dotted" },
-        { key: "lower", price: 0, color: NEUTRAL, lineStyle: "dotted" }
       ]
     };
   }
@@ -39388,8 +39863,10 @@ var volumeSpecs = [
 var DAY_MS2 = 864e5;
 function periodKey(anchor, time) {
   if (anchor === "Week") return Math.floor((Math.floor(time / DAY_MS2) + 3) / 7);
-  if (anchor === "Month") {
+  if (anchor === "Month" || anchor === "Quarter" || anchor === "Year") {
     const d = new Date(time);
+    if (anchor === "Year") return d.getUTCFullYear();
+    if (anchor === "Quarter") return d.getUTCFullYear() * 4 + Math.floor(d.getUTCMonth() / 3);
     return d.getUTCFullYear() * 12 + d.getUTCMonth();
   }
   return Math.floor(time / DAY_MS2);
@@ -39441,40 +39918,86 @@ var parabolicSar = {
     return { plots: [{ key: "sar", title: "PSAR", values, kind: "circles", color: SERIES_LINE, colors }] };
   }
 };
+var VWAP_BANDS_GROUP = "Bands";
+var VWAP_STYLE = "Style";
+var VWAP_BANDS = [
+  { on: "band1", mult: "band1Mult", color: "band1Color", fill: "band1Fill", fillColor: "band1FillColor", defMult: 1, defOn: true, defColor: BULLISH },
+  { on: "band2", mult: "band2Mult", color: "band2Color", fill: "band2Fill", fillColor: "band2FillColor", defMult: 2, defOn: false, defColor: WARNING },
+  { on: "band3", mult: "band3Mult", color: "band3Color", fill: "band3Fill", fillColor: "band3FillColor", defMult: 3, defOn: false, defColor: CATEGORICAL[4] }
+];
 var vwap = {
   type: "vwap",
   title: "Volume Weighted Average Price",
   shortTitle: "VWAP",
   overlay: true,
   inputs: [
-    { key: "anchor", title: "Anchor", type: "string", defval: "Day", options: ["Day", "Week", "Month"], tooltip: "Where the accumulation resets (UTC periods)" },
-    { key: "source", title: "Source", type: "string", defval: "HLC3", options: ["HLC3", "OHLC4", "Close"] },
-    colorInput(INFO)
+    { key: "anchor", title: "Period", type: "string", defval: "Day", options: ["Day", "Week", "Month", "Quarter", "Year"], tooltip: "Where the accumulation resets (UTC periods)" },
+    sourceInput("HLC3"),
+    // Each band is one row: its toggle leads, the multiplier follows unlabeled.
+    ...VWAP_BANDS.flatMap((b, i) => [
+      { key: b.on, title: `Band ${i + 1} multiplier`, type: "bool", defval: b.defOn, inline: b.on, group: VWAP_BANDS_GROUP },
+      { key: b.mult, title: "", type: "float", defval: b.defMult, min: 0.1, max: 10, step: 0.1, inline: b.on, group: VWAP_BANDS_GROUP }
+    ]),
+    { ...colorInput(INFO, "VWAP color"), group: VWAP_STYLE },
+    // One row per band: its ink, then the fill toggle with the fill's own (translucent) color.
+    ...VWAP_BANDS.flatMap((b, i) => [
+      { ...colorInput(b.defColor, `Band ${i + 1} color`, b.color), inline: b.color, group: VWAP_STYLE },
+      { key: b.fill, title: "Fill", type: "bool", defval: true, inline: b.color, group: VWAP_STYLE },
+      { ...colorInput(withAlpha2(b.defColor), "", b.fillColor), inline: b.color, group: VWAP_STYLE }
+    ])
   ],
   compute: (bars, inputs) => {
     const anchor = str3(inputs, "anchor", "Day");
-    const source = str3(inputs, "source", "HLC3");
-    const values = new Array(bars.length).fill(Number.NaN);
+    const src = sourceValues(bars, str3(inputs, "source", "HLC3"));
+    const n = bars.length;
+    const values = new Array(n).fill(Number.NaN);
+    const bands = VWAP_BANDS.filter((b) => bool(inputs, b.on, b.defOn)).map((b) => ({
+      mult: Math.max(0, num3(inputs, b.mult, b.defMult)),
+      color: str3(inputs, b.color, b.defColor),
+      fill: bool(inputs, b.fill, true),
+      fillColor: str3(inputs, b.fillColor, withAlpha2(b.defColor)),
+      up: new Array(n).fill(Number.NaN),
+      down: new Array(n).fill(Number.NaN)
+    }));
     let period = Number.NaN;
     let cumPV = 0;
+    let cumPV2 = 0;
     let cumV = 0;
-    for (let i = 0; i < bars.length; i++) {
+    for (let i = 0; i < n; i++) {
       const b = bars[i];
       const key = periodKey(anchor, b.time);
       if (key !== period) {
         period = key;
         cumPV = 0;
+        cumPV2 = 0;
         cumV = 0;
       }
       const v = b.volume;
       if (v != null && Number.isFinite(v) && v > 0) {
-        const tp = source === "Close" ? b.close : source === "OHLC4" ? (b.open + b.high + b.low + b.close) / 4 : (b.high + b.low + b.close) / 3;
+        const tp = src[i];
         cumPV += tp * v;
+        cumPV2 += tp * tp * v;
         cumV += v;
       }
-      if (cumV > 0) values[i] = cumPV / cumV;
-    }
-    return { plots: [{ key: "vwap", title: "VWAP", values, color: str3(inputs, "color", INFO), width: 2 }] };
+      if (cumV <= 0) continue;
+      const mean = cumPV / cumV;
+      const sd = Math.sqrt(Math.max(0, cumPV2 / cumV - mean * mean));
+      values[i] = mean;
+      for (const band of bands) {
+        band.up[i] = mean + band.mult * sd;
+        band.down[i] = mean - band.mult * sd;
+      }
+    }
+    const plots = [{ key: "vwap", title: "VWAP", values, color: str3(inputs, "color", INFO), width: 2 }];
+    const fills = [];
+    bands.forEach((band, i) => {
+      plots.push(
+        { key: `up${i}`, title: `Upper ${band.mult}\u03C3`, values: band.up, color: band.color },
+        { key: `down${i}`, title: `Lower ${band.mult}\u03C3`, values: band.down, color: band.color }
+      );
+      if (band.fill) fills.push({ key: `band${i}`, from: `up${i}`, to: `down${i}`, color: band.fillColor });
+    });
+    return { plots, bands: fills };
   }
 };
 var pivotPoints = {
@@ -39665,21 +40188,11 @@ var Vela = class {
     registerClassicIndicators();
     const element = resolveElement(container);
     const theme = resolveTheme(options.theme);
-    let animZoom = true;
-    let animPan = true;
-    if (typeof options.animations === "boolean") {
-      animZoom = options.animations;
-      animPan = options.animations;
-    } else if (options.animations) {
-      animZoom = options.animations.zoom ?? true;
-      animPan = options.animations.pan ?? true;
-    }
     const display = {
       currentPriceLine: options.currentPriceLine ?? true,
       logScale: options.logScale ?? false,
       nativeBackend: options.nativeBackend ?? "auto",
-      animZoom,
-      animPan,
+      ...resolveAnimations(options.animations),
       glow: options.glow ?? 0,
       upColor: options.upColor ?? BULLISH,
       downColor: options.downColor ?? BEARISH,
@@ -39994,13 +40507,28 @@ function resolveElement(container) {
   return element;
 }
 
-// src/core/options.ts
-var normalizeSession = (v) => v === "regular" || v === "extended" ? v : void 0;
-
 // src/widget/statusline-model.ts
 function segmentVisibility(parts, chartHidden = false) {
   return { avatar: parts.logo, symbol: parts.name, meta: parts.name, market: parts.market, ohlc: parts.ohlc && !chartHidden, change: parts.change && !chartHidden, eye: chartHidden };
 }
+var STATUSLINE_LADDER = [
+  { stacked: false, level: "full" },
+  { stacked: true, level: "full" },
+  { stacked: true, level: "compact" },
+  { stacked: true, level: "minimal" }
+];
+function readoutCells(level, readout) {
+  if (readout === "value") return [{ key: "close", label: "" }];
+  if (level === "full") {
+    return [
+      { key: "open", label: "O" },
+      { key: "high", label: "H" },
+      { key: "low", label: "L" },
+      { key: "close", label: "C" }
+    ];
+  }
+  return [{ key: "close", label: level === "compact" ? "C" : "" }];
+}
 function statuslineMenuItems(parts, chartVisible) {
   return [
     { id: "part:logo", label: "Symbol logo", checked: parts.logo },
@@ -40029,6 +40557,11 @@ function fmtChange(open2, close) {
   const sign = diff >= 0 ? "+" : "";
   return `${sign}${fmtPrice(diff, decimalsFor(close))} (${sign}${pct.toFixed(2)}%)`;
 }
+function fmtChangePct(open2, close) {
+  if (open2 == null || close == null || !Number.isFinite(open2) || !Number.isFinite(close) || open2 === 0) return "";
+  const pct = (close - open2) / open2 * 100;
+  return `${pct >= 0 ? "+" : ""}${pct.toFixed(2)}%`;
+}
 
 // src/widget/statusline.ts
 var STYLE_ID24 = "vela-widget-statusline";
@@ -40045,6 +40578,11 @@ var CSS21 = `
     display: flex;
     align-items: baseline;
     gap: var(--vela-space-2);
+    /* The chip never grows past the plot: fit() measures overflow against this width to
+     * walk the layout ladder (stack, then shed values), so overflow:hidden only guards
+     * the transient between a resize and the next measure. */
+    max-width: calc(100% - var(--vela-toolbar-gutter, 0px) - var(--vela-scale-gutter, 0px) - 24px);
+    overflow: hidden;
     color: var(--vela-fg);
     font-size: var(--vela-font-size-md);
     /* Same chip treatment as the indicator legend rows (InputsUI): a translucent wash of
@@ -40066,6 +40604,31 @@ var CSS21 = `
 /* Chart hidden (the price series' eye \u2014 renderer 'candleVisible'): the line dims to
  * the same 0.5 wash a hidden indicator's legend row wears. */
 .vela-statusline.vela-sl-chart-hidden { opacity: 0.5; }
+/* Two rows inside the chip \u2014 the identity (logo / symbol / meta / market badge) and the
+ * value readout (O/H/L/C + change, or the show-chart eye). In the widest layout they sit
+ * side by side on one line; the STACKED layouts (fit() decides, see the ladder in
+ * statusline-model) turn the chip into a column so the values drop under the symbol. */
+.vela-statusline .vela-sl-row {
+    display: flex;
+    align-items: baseline;
+    gap: var(--vela-space-2);
+    white-space: nowrap;
+}
+.vela-statusline.vela-sl-stacked {
+    flex-direction: column;
+    align-items: flex-start;
+    /* The same air between the two rows as between the values row and the legend row
+     * that follows the chip (see the stacked legend shift below). */
+    row-gap: var(--vela-space-1);
+}
+/* Stacked, the identity row may shrink (the meta carries the ellipsis) \u2014 the values row
+ * never does, so its overflow is what fit() measures to keep descending the ladder. */
+.vela-statusline.vela-sl-stacked .vela-sl-identity { max-width: 100%; }
+.vela-statusline.vela-sl-stacked .vela-sl-meta {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
 .vela-statusline .vela-sl-avatar {
     width: 18px;
     height: 18px;
@@ -40117,59 +40680,13 @@ var CSS21 = `
  * stylesheet is document-global, so a bare attribute selector here would shift every
  * chart on the page, including statusline-less ones. */
 .vela-has-statusline [${LEGEND_AT_TOP_ATTR}] { transform: translateY(26px); }
-/* Mobile: two-line chip \u2014 logo / symbol / meta / market status on one aligned row, the
- * bar change on the next. Full O/H/L/C stays hidden (too dense on a phone-width plot).
- * GRID, not a wrapping flexbox: an absolutely positioned wrapping flex container sizes
- * to the one-line sum of ALL segments (max-content), so its background used to stretch
- * far past the market badge; a grid hugs the widest actual row. The meta column may
- * shrink (it carries the ellipsis), the others wrap their content. */
-[data-layout='mobile'] .vela-statusline {
-    display: grid;
-    grid-template-columns: auto auto minmax(0, auto) auto;
-    justify-content: start;
-    align-items: center;
-    row-gap: 1px;
-    max-width: calc(100% - var(--vela-toolbar-gutter, 0px) - var(--vela-scale-gutter, 0px) - 24px);
-    font-size: var(--vela-font-size-sm);
-}
-[data-layout='mobile'] .vela-statusline .vela-sl-symbol {
-    font-size: var(--vela-font-size-md);
-    line-height: 1;
-}
-[data-layout='mobile'] .vela-statusline .vela-sl-meta {
-    min-width: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    line-height: 1;
-}
-[data-layout='mobile'] .vela-statusline .vela-sl-avatar,
-[data-layout='mobile'] .vela-statusline .vela-sl-market { align-self: center; }
-[data-layout='mobile'] .vela-statusline .vela-sl-ohlc { display: none !important; }
-[data-layout='mobile'] .vela-statusline .vela-sl-change {
-    /* Second row, under the text column \u2014 the avatar keeps the first column. */
-    grid-column: 2 / -1;
-    font-size: var(--vela-font-size-sm);
-    line-height: 1.2;
-}
-[data-layout='mobile'] .vela-has-statusline [${LEGEND_AT_TOP_ATTR}] { transform: translateY(40px); }
-/* FIT mode (multi-chart cells \u2014 see setFitMode): the line never wraps; segments that
- * don't fit are HIDDEN by fit() (change first, then meta, then the market badge), so
- * overflow:hidden only guards the transient between a resize and the next measure.
- * Placed after the mobile block on purpose: same specificity, later wins. */
-.vela-statusline.vela-sl-fit {
-    display: flex; /* undo the mobile grid \u2014 fit mode is one flex row again */
-    flex-wrap: nowrap;
-    align-items: center;
-    max-width: calc(100% - var(--vela-toolbar-gutter, 0px) - var(--vela-scale-gutter, 0px) - 24px);
-    overflow: hidden;
-}
-.vela-statusline.vela-sl-fit .vela-sl-change {
-    flex-basis: auto;
-    padding-left: 0;
-}
-/* One row again \u2014 the mobile two-line shift doesn't apply in fit mode. */
-[data-layout='mobile'] .vela-sl-fit-host.vela-has-statusline [${LEGEND_AT_TOP_ATTR}] { transform: translateY(26px); }
+/* A stacked chip is two lines tall \u2014 the legend shifts one more line. fit() flags the
+ * host whenever the ladder lands on a stacked layout. */
+.vela-has-statusline.vela-sl-stacked-host [${LEGEND_AT_TOP_ATTR}] { transform: translateY(40px); }
+/* Mobile: the same ladder at the phone's type scale \u2014 the width alone decides how much
+ * of the readout fits, exactly as on a narrow desktop chart. */
+[data-layout='mobile'] .vela-statusline { font-size: var(--vela-font-size-sm); }
+[data-layout='mobile'] .vela-statusline .vela-sl-symbol { font-size: var(--vela-font-size-md); }
 `;
 function baseOfTicker(ticker) {
   return ticker.replace(/[-_/]?(USDT|USDC|USD1|USDS|BUSD|USD|EUR|PERP)$/i, "") || ticker;
@@ -40240,6 +40757,8 @@ var Statusline = class {
     /** Fit mode (multi-chart cells): one row, overflowing segments hidden — see {@link setFitMode}. */
     this.fitMode = false;
     this.fitRO = null;
+    /** The ladder rung currently applied — see {@link fit}. */
+    this.layout = { stacked: false, level: "full" };
     this.onContextMenu = (e) => {
       if (!this.menu || !this.menuHooks) return;
       e.preventDefault();
@@ -40286,8 +40805,18 @@ var Statusline = class {
       this.menuHooks?.setChartVisible(true);
       this.setChartHidden(false);
     });
-    this.el.append(this.avatarEl, this.symbolEl, this.metaEl, this.marketEl, this.ohlcEl, this.changeEl, this.eyeEl);
+    this.identityRow = doc.createElement("span");
+    this.identityRow.className = "vela-sl-row vela-sl-identity";
+    this.identityRow.append(this.avatarEl, this.symbolEl, this.metaEl, this.marketEl);
+    this.valuesRow = doc.createElement("span");
+    this.valuesRow.className = "vela-sl-row vela-sl-values";
+    this.valuesRow.append(this.ohlcEl, this.changeEl, this.eyeEl);
+    this.el.append(this.identityRow, this.valuesRow);
     host.appendChild(this.el);
+    if (typeof ResizeObserver !== "undefined") {
+      this.fitRO = new ResizeObserver(() => this.fit());
+      this.fitRO.observe(host);
+    }
     this.marketTip = new Tooltip(this.marketEl, { content: MARKET_LABELS.open, placement: "bottom" });
     this.eyeTip = new Tooltip(this.eyeEl, { content: "Show chart", placement: "bottom" });
     this.setMarketStatus("open");
@@ -40303,27 +40832,15 @@ var Statusline = class {
     this.fit();
   }
   /**
-   * Multi-chart cells: keep the line on ONE row whatever the cell width — never wrap.
-   * Segments that don't fit are hidden outright rather than clipped mid-glyph, least
-   * important first: OHLC, then the bar change, the venue/timeframe meta, and the
-   * market badge; the logo + ticker always stay. Re-fits live on host resizes.
+   * Multi-chart cells: the same width ladder as a single chart, plus a last resort for
+   * cells too narrow for even its bottom rung — whatever still overflows is hidden
+   * outright rather than clipped mid-glyph, least important first: the values, the
+   * venue/timeframe meta, then the market badge; the logo + ticker always stay.
    */
   setFitMode(on) {
     if (on === this.fitMode) return;
     this.fitMode = on;
-    this.el.classList.toggle("vela-sl-fit", on);
-    this.host.classList.toggle("vela-sl-fit-host", on);
-    if (on) {
-      if (typeof ResizeObserver !== "undefined" && !this.fitRO) {
-        this.fitRO = new ResizeObserver(() => this.fit());
-        this.fitRO.observe(this.host);
-      }
-      this.fit();
-    } else {
-      this.fitRO?.disconnect();
-      this.fitRO = null;
-      this.syncParts();
-    }
+    this.fit();
   }
   /** Project the parts config onto the segments (the baseline fit() prunes from). */
   syncParts() {
@@ -40335,22 +40852,42 @@ var Statusline = class {
     this.ohlcEl.style.display = seg.ohlc ? "" : "none";
     this.changeEl.style.display = seg.change ? "" : "none";
     this.eyeEl.style.display = seg.eye ? "inline-flex" : "none";
+    this.valuesRow.style.display = seg.ohlc || seg.change || seg.eye ? "" : "none";
+  }
+  /** Apply one ladder rung: the stacked/inline shape and the readout's level. */
+  applyLayout(layout) {
+    this.layout = layout;
+    this.el.classList.toggle("vela-sl-stacked", layout.stacked);
+    this.host.classList.toggle("vela-sl-stacked-host", layout.stacked);
+    this.renderValues();
   }
-  /** Hide overflowing segments until the row fits its max-width (fit mode only). */
+  /**
+   * Walk the width ladder (see {@link STATUSLINE_LADDER}) until the chip fits its
+   * max-width: the full one-line readout, then the values stacked under the symbol
+   * line, then O/H/L shed, then the absolute change. In fit mode, when the last rung
+   * still overflows, whole segments hide, least important first. Without layout
+   * (detached host, node tests) nothing overflows, so the widest rung stays.
+   */
   fit() {
-    if (!this.fitMode) return;
     this.syncParts();
     const seg = segmentVisibility(this.parts, this.chartHidden);
+    const overflows = () => this.el.scrollWidth > this.el.clientWidth;
+    const hasValues = seg.ohlc || seg.change;
+    for (const rung of STATUSLINE_LADDER) {
+      this.applyLayout(rung);
+      if (!hasValues || !overflows()) break;
+    }
+    if (!this.fitMode) return;
     const order = [
-      [this.ohlcEl, seg.ohlc],
-      [this.changeEl, seg.change],
+      [this.valuesRow, hasValues],
       [this.metaEl, seg.meta],
       [this.marketEl, seg.market]
     ];
     for (const [el, shown] of order) {
-      if (this.el.scrollWidth <= this.el.clientWidth) break;
+      if (!overflows()) break;
       if (shown) el.style.display = "none";
     }
+    if (this.valuesRow.style.display === "none") this.applyLayout({ ...this.layout, stacked: false });
   }
   /** Shape + color the value readout after the active price style: its own up/down
    *  colors (candle bodies, bar ticks, the line color, …), the direction rule that
@@ -40463,7 +41000,7 @@ var Statusline = class {
     this.marketTip.destroy();
     this.eyeTip.destroy();
     this.marketBubble.destroy();
-    this.host.classList.remove("vela-has-statusline", "vela-sl-fit-host");
+    this.host.classList.remove("vela-has-statusline", "vela-sl-stacked-host");
     this.el.remove();
   }
   detach() {
@@ -40472,6 +41009,10 @@ var Statusline = class {
   }
   render() {
     if (this.menuHooks) this.setChartHidden(!this.menuHooks.chartVisible());
+    this.fit();
+  }
+  /** Write the value readout for the current bar at the current ladder level. */
+  renderValues() {
     const bar = this.hoverBar ?? this.lastBar;
     if (!bar) {
       this.ohlcEl.replaceChildren();
@@ -40491,12 +41032,11 @@ var Statusline = class {
       s.appendChild(b);
       return s;
     };
-    if (this.readout === "value") this.ohlcEl.replaceChildren(cell("", bar.close));
-    else this.ohlcEl.replaceChildren(cell("O", bar.open), cell("H", bar.high), cell("L", bar.low), cell("C", bar.close));
-    this.changeEl.textContent = fmtChange(bar.open, bar.close);
+    const { level } = this.layout;
+    this.ohlcEl.replaceChildren(...readoutCells(level, this.readout).map((c) => cell(c.label, bar[c.key])));
+    this.changeEl.textContent = level === "minimal" ? fmtChangePct(bar.open, bar.close) : fmtChange(bar.open, bar.close);
     this.changeEl.dataset.dir = up ? "up" : "down";
     this.changeEl.style.color = ink;
-    this.fit();
   }
 };
 
@@ -42630,6 +43170,17 @@ function nextAutoCellId(taken) {
     if (!taken.has(`c${i}`)) return `c${i}`;
   }
 }
+function resolveTyping(key, open2) {
+  if (open2.dialogs > 0) {
+    if (key.length !== 1) return null;
+    if (open2.symbolSearch) return { target: "symbol", text: key.toUpperCase() };
+    if (open2.timeframeEntry) return { target: "timeframe", text: key };
+    return null;
+  }
+  if (/^[a-zA-Z]$/.test(key)) return { target: "symbol", text: key.toUpperCase() };
+  if (/^[0-9]$/.test(key)) return { target: "timeframe", text: key };
+  return null;
+}
 var VelaWorkspace = class {
   constructor(container, opts = {}) {
     this.events = new TypedEventBus();
@@ -44263,17 +44814,14 @@ var VelaWorkspace = class {
   }
   /** Bare-typing router: letters → symbol search (seeded), digits → timeframe entry. */
   routeTyping(ev) {
-    if (this.destroyed || this.openDialogs > 0) return;
+    if (this.destroyed) return;
     if (ev.ctrlKey || ev.metaKey || ev.altKey) return;
     if (isEditableTarget(ev)) return;
-    const key = ev.key;
-    if (/^[a-zA-Z]$/.test(key)) {
-      ev.preventDefault();
-      this.symbolPicker.open(key.toUpperCase());
-    } else if (/^[0-9]$/.test(key)) {
-      ev.preventDefault();
-      this.tfQuick.open(key);
-    }
+    const hit = resolveTyping(ev.key, { dialogs: this.openDialogs, symbolSearch: this.symbolPicker.isOpen, timeframeEntry: this.tfQuick.isOpen });
+    if (!hit) return;
+    ev.preventDefault();
+    if (hit.target === "symbol") this.symbolPicker.type(hit.text);
+    else this.tfQuick.type(hit.text);
   }
   trackDialog(open2) {
     this.openDialogs = Math.max(0, this.openDialogs + (open2 ? 1 : -1));