@luxalgo/vela 0.6.16 → 0.6.18

package/dist/vela.global.js

@@ -1,6 +1,23 @@
 var Vela = (function (exports) {
   'use strict';
 
+  // src/core/options.ts
+  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";
@@ -551,6 +568,7 @@ var Vela = (function (exports) {
   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"/>'));
@@ -6882,15 +6900,18 @@ var Vela = (function (exports) {
         next2 = [...ids];
       }
       this.selectedIds = next2.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) {
@@ -7023,6 +7044,9 @@ var Vela = (function (exports) {
         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;
@@ -8859,7 +8883,12 @@ var Vela = (function (exports) {
         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) {
@@ -10501,6 +10530,23 @@ var Vela = (function (exports) {
       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 };
+  }
 
   // node_modules/@zag-js/vanilla/dist/chunk-QZ7TP4HQ.mjs
   var __defProp = Object.defineProperty;
@@ -21082,14 +21128,11 @@ ${overlayScrollbarCss(".vela-dialog *")}
     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(tooltip) {
-      const b = document.createElement("span");
-      b.textContent = "i";
-      this.dialogTips.push(attachChromeTooltip(b, { host: this.host.container, theme: () => this.host.theme(), text: () => tooltip, 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(tooltip, { 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) {
@@ -21526,8 +21569,6 @@ ${overlayScrollbarCss(".vela-dialog *")}
 ${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);}
@@ -22918,15 +22959,15 @@ ${overlayScrollbarCss(".vela-dialog.vela-ind-dialog *", 9)}
     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)
     };
@@ -23071,7 +23112,8 @@ ${overlayScrollbarCss(".vela-dialog.vela-ind-dialog *", 9)}
         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
@@ -24716,7 +24758,7 @@ void main() {
         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) {
@@ -24748,7 +24790,7 @@ void main() {
         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;
         }
@@ -24757,6 +24799,11 @@ void main() {
           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;
@@ -24805,7 +24852,7 @@ void main() {
             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();
@@ -24828,7 +24875,7 @@ void main() {
           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);
       };
@@ -25169,12 +25216,12 @@ void main() {
   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),
@@ -27935,6 +27982,8 @@ void main() {
     "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",
@@ -28077,8 +28126,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 {
@@ -28099,6 +28147,8 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       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). */
@@ -28287,6 +28337,13 @@ ${overlayScrollbarCss(".vela-sd-pane")}
         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) => {
@@ -28494,6 +28551,8 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       this.ui = null;
       this.root = null;
       this.tabs = [];
+      for (const dispose of this.hintTips) dispose();
+      this.hintTips = [];
       ui?.destroy();
     }
     destroy() {
@@ -28907,23 +28966,31 @@ ${overlayScrollbarCss(".vela-sd-pane")}
         }).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, min2, max2, step, onChange) {
       return fieldRow({
         label,
@@ -29104,6 +29171,18 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       }
       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([]);
@@ -30572,6 +30651,15 @@ ${overlayScrollbarCss(".vela-sd-pane")}
     }
     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_SLOP2 = 3;
@@ -30675,10 +30763,32 @@ ${overlayScrollbarCss(".vela-sd-pane")}
     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", shift4 = 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", shift4 = false, mod = false) {
       const proj = this.deps.projector();
       if (this.state.kind === "placing") {
         if (this.state.draft.placementMode() !== "click") return;
@@ -30706,7 +30816,50 @@ ${overlayScrollbarCss(".vela-sd-pane")}
           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.
@@ -30730,12 +30883,20 @@ ${overlayScrollbarCss(".vela-sd-pane")}
         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_SLOP2 && Math.abs(y - this.state.py) <= DRAG_SLOP2) 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 = shift4 && ANGLE_SNAP_TYPES.has(d.type) && d.anchors.length === 2 ? d.anchors[1 - this.state.handle] : void 0;
@@ -30743,12 +30904,6 @@ ${overlayScrollbarCss(".vela-sd-pane")}
           applyFree(a, point, d.anchorSchema().slots[this.state.handle]?.free ?? "both");
         }
         d.constrainHandleDrag(this.state.handle);
-      } else {
-        const pt2 = this.deps.projector().pxToPoint(x, y, d.paneId);
-        this.snapAt = null;
-        const dt = pt2.time - this.state.grab.time;
-        const dp = pt2.price - this.state.grab.price;
-        d.anchors = d.translateBody(dt, dp, this.state.orig);
       }
       this.deps.changed();
     }
@@ -30768,16 +30923,46 @@ ${overlayScrollbarCss(".vela-sd-pane")}
         }
         return;
       }
+      if (this.state.kind === "marquee") {
+        const rect = this.marqueeRect();
+        this.state = { kind: "idle" };
+        if (rect.w > DRAG_SLOP2 || rect.h > DRAG_SLOP2) 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() {
@@ -30790,8 +30975,15 @@ ${overlayScrollbarCss(".vela-sd-pane")}
         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;
@@ -30906,6 +31098,9 @@ ${overlayScrollbarCss(".vela-sd-pane")}
   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, pt2, free) {
     if (free === "both" || free === "x") anchor.time = pt2.time;
     if (free === "both" || free === "y") anchor.price = pt2.price;
@@ -31291,10 +31486,27 @@ ${overlayScrollbarCss(".vela-sd-pane")}
   }
 
   // src/renderers/native/drawings/DrawingSettingsPopup.ts
+  var MIXED = /* @__PURE__ */ Symbol("mixed");
+  function sharedPaths(drawings) {
+    const [first2, ...rest] = drawings;
+    const paths = new Set(first2?.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 first2 = read(drawings[0]);
+    return drawings.every((d) => read(d) === first2) ? first2 : MIXED;
+  }
+  function distinctValues(drawings, read) {
+    return [...new Set(drawings.map(read))];
+  }
   var BTN = 30;
   var ICON = 21;
   var STYLE_ID3 = "vela-drawing-popup-styles";
-  var STYLE_REV = "3";
+  var STYLE_REV = "4";
   function ensureStyles3() {
     if (typeof document === "undefined") return;
     const existing = document.getElementById(STYLE_ID3);
@@ -31306,6 +31518,8 @@ ${overlayScrollbarCss(".vela-sd-pane")}
 .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);}
@@ -31337,7 +31551,7 @@ ${overlayScrollbarCss(".vela-sd-pane")}
         if (this.isOwnChrome(node)) return;
         const cb = this.onClose;
         this.close();
-        cb?.();
+        cb?.(e);
       };
       this.theme = theme;
       this.settingsDialog = new DrawingSettingsDialog(host, theme);
@@ -31362,16 +31576,27 @@ ${overlayScrollbarCss(".vela-sd-pane")}
     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;
       ensureStyles3();
       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;`;
@@ -31385,75 +31610,84 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       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}`,
@@ -31462,7 +31696,7 @@ ${overlayScrollbarCss(".vela-sd-pane")}
         );
       }
       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}`,
@@ -31471,7 +31705,7 @@ ${overlayScrollbarCss(".vela-sd-pane")}
         );
       }
       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}`,
@@ -31479,26 +31713,27 @@ ${overlayScrollbarCss(".vela-sd-pane")}
           })
         );
       }
-      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);
@@ -31684,7 +31919,7 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       });
       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);
@@ -31696,6 +31931,7 @@ ${overlayScrollbarCss(".vela-sd-pane")}
           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() }
@@ -31852,26 +32088,30 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       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, min2, max2, step, onChange) {
       const ni = new NumberInput({
-        value,
+        value: value === MIXED ? min2 : value,
         min: min2,
         max: max2,
         step,
@@ -31883,13 +32123,18 @@ ${overlayScrollbarCss(".vela-sd-pane")}
         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";
@@ -31899,14 +32144,20 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       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;";
@@ -31976,8 +32227,10 @@ ${overlayScrollbarCss(".vela-sd-pane")}
     }
     /** 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;
@@ -31987,13 +32240,14 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       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);
@@ -32002,20 +32256,42 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       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));
         }
       });
@@ -32036,6 +32312,7 @@ ${overlayScrollbarCss(".vela-sd-pane")}
   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");
@@ -32043,6 +32320,7 @@ ${overlayScrollbarCss(".vela-sd-pane")}
   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");
@@ -32051,6 +32329,12 @@ ${overlayScrollbarCss(".vela-sd-pane")}
   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}"/>`);
@@ -32966,6 +33250,20 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       // 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(
@@ -33142,6 +33440,12 @@ ${overlayScrollbarCss(".vela-sd-pane")}
     }
     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. */
@@ -33187,12 +33491,16 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       });
     }
     /** 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
@@ -33218,7 +33526,14 @@ ${overlayScrollbarCss(".vela-sd-pane")}
         this.render();
       }
     }
-    pointerDown(x, y, snap = "off", shift4 = 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", shift4 = false, mod = false) {
       if (this.eraserMode) {
         this.erasing = true;
         this.deleteAt(x, y);
@@ -33238,9 +33553,9 @@ ${overlayScrollbarCss(".vela-sd-pane")}
           return;
         }
       }
-      this.interaction.down(x, y, snap, shift4);
+      this.interaction.down(x, y, snap, shift4, mod);
     }
-    pointerMove(x, y, snap = "off", shift4 = false) {
+    pointerMove(x, y, snap = "off", shift4 = false, mod = false) {
       if (this.eraserMode) {
         if (this.erasing) this.deleteAt(x, y);
         return;
@@ -33252,12 +33567,14 @@ ${overlayScrollbarCss(".vela-sd-pane")}
         return;
       }
       this.interaction.move(x, y, snap, shift4);
-      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) {
@@ -33277,7 +33594,12 @@ ${overlayScrollbarCss(".vela-sd-pane")}
         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() {
@@ -33542,7 +33864,7 @@ ${overlayScrollbarCss(".vela-sd-pane")}
           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 });
@@ -33558,6 +33880,9 @@ ${overlayScrollbarCss(".vela-sd-pane")}
     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();
@@ -33666,6 +33991,8 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       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());
@@ -33681,6 +34008,8 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       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();
@@ -33698,15 +34027,80 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       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,
@@ -33724,6 +34118,11 @@ ${overlayScrollbarCss(".vela-sd-pane")}
           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;
@@ -33746,7 +34145,13 @@ ${overlayScrollbarCss(".vela-sd-pane")}
           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
@@ -33772,6 +34177,13 @@ ${overlayScrollbarCss(".vela-sd-pane")}
         }, 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);
     }
   };
@@ -34936,7 +35348,6 @@ ${overlayScrollbarCss(".vela-sd-pane")}
   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;
@@ -35007,9 +35418,13 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       /** 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;
@@ -35134,7 +35549,7 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       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) => {
@@ -35168,6 +35583,7 @@ ${overlayScrollbarCss(".vela-sd-pane")}
         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;
@@ -35217,6 +35633,10 @@ ${overlayScrollbarCss(".vela-sd-pane")}
         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;
@@ -35353,6 +35773,8 @@ ${overlayScrollbarCss(".vela-sd-pane")}
           return this.animZoom;
         case "animPan":
           return this.animPan;
+        case "animLiveBar":
+          return this.animLiveBarMs;
         case "intro":
           return this.introStyle;
         case "zoomAnchor":
@@ -35521,7 +35943,8 @@ ${overlayScrollbarCss(".vela-sd-pane")}
           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: {
@@ -35628,6 +36051,7 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       this.scene.showPriceLabel = next2.priceScale.priceLabel;
       this.scene.showCountdown = next2.priceScale.countdown;
       this.syncCountdownTimer();
+      this.animLiveBarMs = next2.priceScale.animateLastPrice ? this.animLiveBarOnMs : 0;
       s.separatorColor = keepInherit(s.separatorColor, next2.panes.separatorColor, prevTheme.borderColor);
       this.scene.tradeMarkers = {
         visible: next2.trades.visible,
@@ -36071,7 +36495,10 @@ ${overlayScrollbarCss(".vela-sd-pane")}
         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 });
         },
@@ -36089,11 +36516,13 @@ ${overlayScrollbarCss(".vela-sd-pane")}
         // 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, shift4) => this.userDrawings?.pointerDown(x, y, snap, shift4),
-        drawingsPointerMove: (x, y, snap, shift4) => this.userDrawings?.pointerMove(x, y, snap, shift4),
+        drawingsPointerDown: (x, y, snap, shift4, mod) => this.userDrawings?.pointerDown(x, y, snap, shift4, mod),
+        drawingsPointerMove: (x, y, snap, shift4, mod) => this.userDrawings?.pointerMove(x, y, snap, shift4, 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,
@@ -36444,8 +36873,11 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       const last2 = this.bars[n - 1];
       if (last2 && bar.time === last2.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 (!last2 || bar.time > last2.time) {
         this.bars.push(bar);
         this.syncLiveEase(bar);
@@ -36457,6 +36889,12 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       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;
@@ -36469,9 +36907,10 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       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;
@@ -38446,6 +38885,10 @@ ${overlayScrollbarCss(".vela-sd-pane")}
     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++) {
@@ -39977,10 +40420,6 @@ ${overlayScrollbarCss(".vela-sd-pane")}
         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" }
         ]
       };
     }
@@ -40478,8 +40917,10 @@ ${overlayScrollbarCss(".vela-sd-pane")}
   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);
@@ -40531,40 +40972,86 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       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 = {
@@ -40755,21 +41242,11 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       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,