@luxalgo/vela 0.6.17 → 0.6.19

package/dist/vela.global.js

@@ -6900,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) {
@@ -7041,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;
@@ -8877,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) {
@@ -22948,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)
     };
@@ -24747,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) {
@@ -24779,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;
         }
@@ -24788,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;
@@ -24836,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();
@@ -24859,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);
       };
@@ -25200,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),
@@ -29155,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([]);
@@ -30623,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;
@@ -30726,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;
@@ -30757,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.
@@ -30781,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;
@@ -30794,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();
     }
@@ -30819,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() {
@@ -30841,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;
@@ -30957,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;
@@ -31342,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);
@@ -31357,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);}
@@ -31388,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);
@@ -31413,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;`;
@@ -31436,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}`,
@@ -31513,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}`,
@@ -31522,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}`,
@@ -31530,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);
@@ -31735,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);
@@ -31747,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() }
@@ -31903,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,
@@ -31934,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";
@@ -31950,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;";
@@ -32027,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;
@@ -32038,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);
@@ -32053,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));
         }
       });
@@ -32087,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");
@@ -32094,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");
@@ -32102,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}"/>`);
@@ -33017,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(
@@ -33193,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. */
@@ -33238,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
@@ -33269,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);
@@ -33289,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;
@@ -33303,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) {
@@ -33328,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() {
@@ -33593,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 });
@@ -33609,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();
@@ -33717,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());
@@ -33732,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();
@@ -33749,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,
@@ -33775,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;
@@ -33797,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
@@ -33823,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);
     }
   };
@@ -36134,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 });
         },
@@ -36152,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,
@@ -38519,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++) {
@@ -40050,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" }
         ]
       };
     }
@@ -40551,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);
@@ -40604,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 = {