@luxalgo/vela 0.6.17 → 0.6.18

package/dist/index.cjs

@@ -6924,15 +6924,18 @@ var DrawingController = class {
       next = [...ids];
     }
     this.selectedIds = next.filter((id) => this.store.has(id));
+    this.announceSelection();
+  }
+  /** Push the selection to the renderer and announce it (primary + the full list). */
+  announceSelection() {
     this.port?.setSelection(this.selectedIds);
-    this.events.emit("drawing:selected", { id: this.selectedIds[0] ?? null });
+    this.events.emit("drawing:selected", { id: this.selectedIds[0] ?? null, ids: [...this.selectedIds] });
   }
   /** Restore a history snapshot, reconciling selection against what survived. */
   restoreSnapshot(doc) {
     this.store.load(doc);
     this.selectedIds = this.selectedIds.filter((id) => this.store.has(id));
-    this.port?.setSelection(this.selectedIds);
-    this.events.emit("drawing:selected", { id: this.selectedIds[0] ?? null });
+    this.announceSelection();
   }
   /** Delete drawings as one undo step; prune them from the selection. */
   deleteMany(ids) {
@@ -7065,6 +7068,9 @@ var DrawingController = class {
       case "duplicate":
         this.duplicate(i.ids);
         break;
+      case "clone":
+        if (this.enabled && i.docs.length) this.insertClones(i.docs);
+        break;
       case "copy":
         this.copy(i.ids);
         break;
@@ -8901,7 +8907,12 @@ var EngineOrchestrator = class _EngineOrchestrator {
       if (!model) continue;
       const paneId = model.paneId ?? "price";
       if (!byPane.has(paneId)) byPane.set(paneId, []);
-      byPane.get(paneId).push({ id: r.id, title: model.title || r.title, ownScale: model.ownScale === true });
+      byPane.get(paneId).push({
+        id: r.id,
+        title: model.title || r.title,
+        ...model.shorttitle ? { shorttitle: model.shorttitle } : {},
+        ownScale: model.ownScale === true
+      });
     }
     const panes = [];
     for (const paneId of this.paneOrder) {
@@ -15532,15 +15543,15 @@ function candleOverrideFor(style, bags) {
   if (!hasOwnCandlePaint(style)) return null;
   const bag = bags[style] ?? {};
   const color = (v) => isColor(v) ? v : null;
-  const bool = (v) => isBool(v) ? v : null;
+  const bool2 = (v) => isBool(v) ? v : null;
   return {
     upColor: color(bag.candleUpColor),
     downColor: color(bag.candleDownColor),
-    bodyVisible: bool(bag.candleBodyVisible),
-    borderVisible: bool(bag.candleBorderVisible),
+    bodyVisible: bool2(bag.candleBodyVisible),
+    borderVisible: bool2(bag.candleBorderVisible),
     borderUpColor: color(bag.candleBorderUpColor),
     borderDownColor: color(bag.candleBorderDownColor),
-    wickVisible: bool(bag.candleWickVisible),
+    wickVisible: bool2(bag.candleWickVisible),
     wickUpColor: color(bag.candleWickUpColor),
     wickDownColor: color(bag.candleWickDownColor)
   };
@@ -17331,7 +17342,7 @@ var InputController = class {
       if (e.repeat || e.key !== "Shift" && e.key !== "Control" && e.key !== "Meta") return;
       if (Number.isNaN(this.cursorX)) return;
       if (this.dragging && this.region !== "drawing") return;
-      this.deps.drawingsPointerMove?.(this.cursorX, this.cursorY, this.snapMode(e), e.shiftKey);
+      this.deps.drawingsPointerMove?.(this.cursorX, this.cursorY, this.snapMode(e), e.shiftKey, e.ctrlKey || e.metaKey);
     };
     this.onDown = (e) => {
       if (e.button === 1) {
@@ -17363,7 +17374,7 @@ var InputController = class {
       this.startY = y;
       if (this.deps.drawingsClaim?.(x, y)) {
         this.region = "drawing";
-        this.deps.drawingsPointerDown?.(x, y, this.snapMode(e), e.shiftKey);
+        this.deps.drawingsPointerDown?.(x, y, this.snapMode(e), e.shiftKey, e.ctrlKey || e.metaKey);
         this.capture(e.pointerId);
         return;
       }
@@ -17372,6 +17383,11 @@ var InputController = class {
         this.capture(e.pointerId);
         return;
       }
+      if ((e.ctrlKey || e.metaKey) && this.regionAt(x, y) === "data" && this.deps.drawingsMarqueeStart?.(x, y)) {
+        this.region = "drawing";
+        this.capture(e.pointerId);
+        return;
+      }
       const vp = this.deps.getCoords().getViewport();
       this.deps.apply(vp);
       this.startRightOffset = vp.rightOffset;
@@ -17420,7 +17436,7 @@ var InputController = class {
           this.deps.apply({ barSpacing, rightOffset: this.startRightOffset });
         } else if (this.region === "drawing") {
           if (Math.abs(x - this.startX) > slop || Math.abs(y - this.startY) > slop) this.moved = true;
-          this.deps.drawingsPointerMove?.(x, y, this.snapMode(e), e.shiftKey);
+          this.deps.drawingsPointerMove?.(x, y, this.snapMode(e), e.shiftKey, e.ctrlKey || e.metaKey);
         } else {
           const coords = this.deps.getCoords();
           const vp = coords.getViewport();
@@ -17443,7 +17459,7 @@ var InputController = class {
         const drawCursor = this.deps.drawingsCursor?.(x, y);
         const r = this.regionAt(x, y);
         this.el.style.cursor = drawCursor ?? (r === "price" ? "ns-resize" : r === "time" ? "ew-resize" : r === "separator" ? "row-resize" : "");
-        this.deps.drawingsPointerMove?.(x, y, this.snapMode(e), e.shiftKey);
+        this.deps.drawingsPointerMove?.(x, y, this.snapMode(e), e.shiftKey, e.ctrlKey || e.metaKey);
       }
       if (e.pointerType !== "touch") this.deps.onPointerMove(x, y);
     };
@@ -17784,12 +17800,12 @@ function defaultTradeMarkersState() {
 function mergeTradeMarkersState(base, patch) {
   const p = patch && typeof patch === "object" ? patch : {};
   const c = p.colors && typeof p.colors === "object" ? p.colors : {};
-  const bool = (v, fb) => typeof v === "boolean" ? v : fb;
+  const bool2 = (v, fb) => typeof v === "boolean" ? v : fb;
   const color = (v, fb) => typeof v === "string" && v.trim().length > 0 ? v : fb;
   return {
-    visible: bool(p.visible, base.visible),
-    labels: bool(p.labels, base.labels),
-    qty: bool(p.qty, base.qty),
+    visible: bool2(p.visible, base.visible),
+    labels: bool2(p.labels, base.labels),
+    qty: bool2(p.qty, base.qty),
     colors: {
       long: color(c.long, base.colors.long),
       short: color(c.short, base.colors.short),
@@ -21739,6 +21755,18 @@ var DrawingPainter = class {
     }
     this.paintHandles(ctx, pts);
   }
+  /** The selection box a Ctrl/Cmd-drag on the empty plot sweeps: a faint fill in the handle
+   *  accent under a thin dashed outline. */
+  paintMarquee(ctx, rect) {
+    ctx.save();
+    ctx.fillStyle = withAlpha(HANDLE_BORDER, 0.08);
+    ctx.fillRect(rect.x, rect.y, rect.w, rect.h);
+    ctx.strokeStyle = HANDLE_BORDER;
+    ctx.lineWidth = 1;
+    ctx.setLineDash([4, 3]);
+    ctx.strokeRect(rect.x + 0.5, rect.y + 0.5, rect.w, rect.h);
+    ctx.restore();
+  }
   /** A hollow ring marking the candle point the magnet (Ctrl) will snap the next anchor to. */
   paintSnapRing(ctx, x, y, theme) {
     ctx.setLineDash([]);
@@ -23207,6 +23235,15 @@ function topDrawingAt(drawings, x, y, proj, tol = HIT_TOLERANCE) {
   }
   return null;
 }
+function deletableSelection(selected, drawings) {
+  const ids = [...selected];
+  if (ids.length < 2) return ids;
+  return ids.filter((id) => !drawings.find((d) => d.id === id)?.locked);
+}
+function deleteTargets(hit, selected, drawings, withSelection) {
+  if (withSelection && selected.size >= 2 && selected.has(hit.id)) return deletableSelection(selected, drawings);
+  return hit.locked ? [] : [hit.id];
+}
 
 // src/renderers/native/drawings/DrawingInteraction.ts
 var DRAG_SLOP2 = 3;
@@ -23310,10 +23347,32 @@ var DrawingInteraction = class {
   activeDragId() {
     return this.state.kind === "pressed" && this.state.moved ? this.state.id : null;
   }
+  /** The drawing under a press that has not been released yet (drag or click undecided), or null. */
+  pressedId() {
+    return this.state.kind === "pressed" ? this.state.id : null;
+  }
+  /** The copies a Ctrl-drag is moving (transient — not yet in the store), or null. */
+  dragClones() {
+    return this.state.kind === "pressed" && this.state.moved && this.state.clones ? this.state.clones.map((c) => c.d) : null;
+  }
+  /** The marquee box being swept, normalized (or null when none is in progress). */
+  marqueeRect() {
+    if (this.state.kind !== "marquee") return null;
+    const { x0, y0, x1, y1 } = this.state;
+    return { x: Math.min(x0, x1), y: Math.min(y0, y1), w: Math.abs(x1 - x0), h: Math.abs(y1 - y0) };
+  }
+  /** Ctrl/Cmd-press on the empty plot: start sweeping a selection box. False when a tool is
+   *  armed or a gesture is in flight (that path owns the press). */
+  beginMarquee(x, y) {
+    if (this.state.kind !== "idle" || this.deps.activeTool() != null) return false;
+    this.state = { kind: "marquee", x0: x, y0: y, x1: x, y1: y };
+    return true;
+  }
   /** A press: place the next anchor, or grab a drawing/handle (resolved as click or drag on release).
    *  `shift` over a drawing toggles it in/out of the selection (multi-select) instead of dragging;
-   *  while placing a line tool it locks the segment angle to 45° steps. */
-  down(x, y, mode = "off", shift2 = false) {
+   *  while placing a line tool it locks the segment angle to 45° steps. `mod` (Ctrl/Cmd) over a
+   *  drawing also toggles on a click, but a body drag then moves a COPY. */
+  down(x, y, mode = "off", shift2 = false, mod = false) {
     const proj = this.deps.projector();
     if (this.state.kind === "placing") {
       if (this.state.draft.placementMode() !== "click") return;
@@ -23341,7 +23400,50 @@ var DrawingInteraction = class {
         return;
       }
       const handle = hit.hitHandle(x, y, proj, HIT_TOLERANCE);
-      this.state = { kind: "pressed", id: hit.id, handle, grab: proj.pxToPoint(x, y, hit.paneId), orig: cloneAnchors(hit), px: x, py: y, moved: false };
+      const riders = [];
+      if (handle < 0 && this.deps.selectedIds().has(hit.id)) {
+        for (const id of this.deps.selectedIds()) {
+          const d = id === hit.id ? null : this.byId(id);
+          if (d && !d.locked && d.visible) riders.push({ id, orig: cloneAnchors(d) });
+        }
+      }
+      this.state = { kind: "pressed", id: hit.id, handle, orig: cloneAnchors(hit), px: x, py: y, moved: false, riders, mod, clones: null };
+    }
+  }
+  /** The data-space delta a body drag from the press to (x, y) means on `paneId` — resolved per
+   *  pane so drawings riding along on another pane move by the same PIXELS, not the same price. */
+  bodyDelta(paneId, x, y) {
+    if (this.state.kind !== "pressed") return { dt: 0, dp: 0 };
+    const proj = this.deps.projector();
+    const from = proj.pxToPoint(this.state.px, this.state.py, paneId);
+    const to = proj.pxToPoint(x, y, paneId);
+    return { dt: to.time - from.time, dp: to.price - from.price };
+  }
+  /** The pressed drawing and its riders, each with its anchors at the press. */
+  dragSources(d) {
+    if (this.state.kind !== "pressed") return [];
+    const out = [{ d, orig: this.state.orig }];
+    for (const r of this.state.riders) {
+      const rd = this.byId(r.id);
+      if (rd) out.push({ d: rd, orig: r.orig });
+    }
+    return out;
+  }
+  /** Move the pressed drawing's body (and its riders) — or, on a Ctrl-drag, their copies — to the
+   *  cursor. The copies are built on the first move (so a Ctrl-click never creates anything), from
+   *  sources that have not moved yet, so their own anchors are the origin to translate from. */
+  dragBody(d, x, y) {
+    if (this.state.kind !== "pressed") return;
+    this.snapAt = null;
+    if (this.state.mod && !this.state.clones) {
+      this.state.clones = this.dragSources(d).flatMap((s) => {
+        const c = deserializeDrawing(s.d.serialize());
+        return c ? [{ d: c, orig: cloneAnchors(c) }] : [];
+      });
+    }
+    for (const t of this.state.clones ?? this.dragSources(d)) {
+      const { dt, dp } = this.bodyDelta(t.d.paneId, x, y);
+      t.d.anchors = t.d.translateBody(dt, dp, t.orig);
     }
   }
   /** Pointer move: advance the placing ghost, or live-preview a drag once past the slop.
@@ -23365,12 +23467,20 @@ var DrawingInteraction = class {
       this.deps.changed();
       return;
     }
+    if (this.state.kind === "marquee") {
+      this.state.x1 = x;
+      this.state.y1 = y;
+      this.deps.changed();
+      return;
+    }
     if (this.state.kind !== "pressed") return;
     const d = this.byId(this.state.id);
     if (!d || d.locked) return;
     if (!this.state.moved && Math.abs(x - this.state.px) <= DRAG_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 = shift2 && ANGLE_SNAP_TYPES.has(d.type) && d.anchors.length === 2 ? d.anchors[1 - this.state.handle] : void 0;
@@ -23378,12 +23488,6 @@ var DrawingInteraction = class {
         applyFree(a, point, d.anchorSchema().slots[this.state.handle]?.free ?? "both");
       }
       d.constrainHandleDrag(this.state.handle);
-    } else {
-      const pt = this.deps.projector().pxToPoint(x, y, d.paneId);
-      this.snapAt = null;
-      const dt = pt.time - this.state.grab.time;
-      const dp = pt.price - this.state.grab.price;
-      d.anchors = d.translateBody(dt, dp, this.state.orig);
     }
     this.deps.changed();
   }
@@ -23403,16 +23507,46 @@ var DrawingInteraction = class {
       }
       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() {
@@ -23425,8 +23559,15 @@ var DrawingInteraction = class {
       return true;
     }
     if (this.state.kind === "pressed") {
-      const d = this.byId(this.state.id);
-      if (d && this.state.moved) d.anchors = this.state.orig.map((o) => ({ time: o.time, price: o.price }));
+      if (this.state.moved && !this.state.clones) {
+        const d = this.byId(this.state.id);
+        if (d) for (const s of this.dragSources(d)) s.d.anchors = s.orig.map((o) => ({ time: o.time, price: o.price }));
+      }
+      this.state = { kind: "idle" };
+      this.deps.changed();
+      return true;
+    }
+    if (this.state.kind === "marquee") {
       this.state = { kind: "idle" };
       this.deps.changed();
       return true;
@@ -23541,6 +23682,9 @@ var DrawingInteraction = class {
 function cloneAnchors(d) {
   return d.anchors.map((a) => ({ time: a.time, price: a.price }));
 }
+function rectsIntersect(a, b) {
+  return a.x <= b.x + b.w && b.x <= a.x + a.w && a.y <= b.y + b.h && b.y <= a.y + a.h;
+}
 function applyFree(anchor, pt, free) {
   if (free === "both" || free === "x") anchor.time = pt.time;
   if (free === "both" || free === "y") anchor.price = pt.price;
@@ -23926,10 +24070,27 @@ function btn(label, primary, onClick) {
 }
 
 // src/renderers/native/drawings/DrawingSettingsPopup.ts
+var MIXED = /* @__PURE__ */ Symbol("mixed");
+function sharedPaths(drawings) {
+  const [first, ...rest] = drawings;
+  const paths = new Set(first?.schema().fields.map((f) => f.path) ?? []);
+  for (const d of rest) {
+    const own = new Set(d.schema().fields.map((f) => f.path));
+    for (const p of paths) if (!own.has(p)) paths.delete(p);
+  }
+  return paths;
+}
+function commonValue(drawings, read) {
+  const first = read(drawings[0]);
+  return drawings.every((d) => read(d) === first) ? first : MIXED;
+}
+function distinctValues(drawings, read) {
+  return [...new Set(drawings.map(read))];
+}
 var BTN = 30;
 var ICON = 21;
 var STYLE_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);
@@ -23941,6 +24102,8 @@ function ensureStyles3() {
 .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);}
@@ -23972,7 +24135,7 @@ var DrawingSettingsPopup = class {
       if (this.isOwnChrome(node)) return;
       const cb = this.onClose;
       this.close();
-      cb?.();
+      cb?.(e);
     };
     this.theme = theme;
     this.settingsDialog = new DrawingSettingsDialog(host, theme);
@@ -23997,16 +24160,27 @@ var DrawingSettingsPopup = class {
   contains(node) {
     return node != null && (this.isOwnChrome(node) || this.settingsDialog.contains(node));
   }
-  /** Open the quick toolbar for `drawing`, floating clear of its `anchor` box.
-   *  `onClose` fires on an outside-click dismissal (not a programmatic close). */
-  open(drawing, anchor, actions, onClose) {
+  /** Open the quick toolbar for `drawings` (one, or a whole multi-selection), floating clear of
+   *  their `anchor` box. With several drawings the bar shows only the controls they ALL support,
+   *  a control whose values differ reads as mixed, and every edit applies to all of them —
+   *  per-drawing panels (levels, position sizing, the text field) stay single-drawing only.
+   *  `onClose` fires on a dismissal (an outside press, or Escape in the text field — not a
+   *  programmatic close), with the dismissing press when there is one, so the caller can tell a
+   *  modifier press (multi-select) from a plain one. */
+  open(drawings, anchor, actions, onClose) {
     this.close();
+    const drawing = drawings[0];
+    if (!drawing) return;
     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;`;
@@ -24020,75 +24194,84 @@ var DrawingSettingsPopup = class {
     bar.style.cssText = "display:flex;align-items:center;gap:2px;padding:4px;";
     bar.appendChild(this.dragHandle());
     if (paths.has("glyph")) {
-      const cur = drawing.glyph ?? GLYPH_OPTIONS[0];
+      const cur = common((d) => d.glyph ?? GLYPH_OPTIONS[0]);
       bar.appendChild(this.dropdown("Icon", GLYPH_OPTIONS, cur, (g) => glyphIcon(g), (v) => actions.patch({ glyph: v })));
     }
     if (paths.has("size")) {
-      const sz = drawing.size ?? "normal";
+      const sz = common((d) => d.size ?? "normal");
       bar.appendChild(this.dropdown("Icon size", STAMP_SIZE_OPTIONS, sz, (s) => stampSizeIcon(s), (v) => actions.patch({ size: v }), { label: sizeLabel }));
     }
-    if (paths.has("magnifier.timeframe") && drawing instanceof Magnifier) {
+    if (paths.has("magnifier.timeframe") && every((d) => d instanceof Magnifier)) {
+      const mag = (d) => d;
       const options = this.lowerTimeframeOptions();
       if (options.length > 0) {
         bar.appendChild(
-          this.dropdown("Lower timeframe", options.map((o) => o.value), drawing.magnifier.timeframe, () => "", (v) => actions.patch({ "magnifier.timeframe": v }), {
+          this.dropdown("Lower timeframe", options.map((o) => o.value), common((d) => mag(d).magnifier.timeframe), () => "", (v) => actions.patch({ "magnifier.timeframe": v }), {
             label: (v) => magnifierTimeframeLabel(String(v)),
             labelInTrigger: true
           })
         );
       }
-      bar.appendChild(this.colorButton("Up candles", BUCKET_ICON, drawing.magnifier.upColor || t.upColor, (v) => actions.patch({ "magnifier.upColor": v })));
-      bar.appendChild(this.colorButton("Down candles", BUCKET_ICON, drawing.magnifier.downColor || t.downColor, (v) => actions.patch({ "magnifier.downColor": v })));
+      bar.appendChild(swatch("Up candles", BUCKET_ICON, (d) => mag(d).magnifier.upColor || t.upColor, "magnifier.upColor"));
+      bar.appendChild(swatch("Down candles", BUCKET_ICON, (d) => mag(d).magnifier.downColor || t.downColor, "magnifier.downColor"));
     }
-    if (paths.has("style.lineColor")) bar.appendChild(this.colorButton("Line color", BRUSH_ICON, drawing.style.lineColor || (drawing instanceof Magnifier ? contrastColor(this.theme.background) : DEFAULT_DRAWING_COLOR), (v) => actions.patch({ "style.lineColor": v })));
+    if (paths.has("style.lineColor")) bar.appendChild(swatch("Line color", BRUSH_ICON, (d) => d.style.lineColor || (d instanceof Magnifier ? contrastColor(this.theme.background) : DEFAULT_DRAWING_COLOR), "style.lineColor"));
     if (paths.has("style.lineWidth")) {
-      const wf = schema.fields.find((f) => f.path === "style.lineWidth");
-      if (wf?.kind === "number" && (wf.min ?? 1) > 1) {
-        bar.appendChild(this.widthInput("Line width", drawing.style.lineWidth, wf.min ?? 1, wf.max ?? 60, wf.step ?? 1, (v) => actions.patch({ "style.lineWidth": v })));
+      const widthField2 = (d) => d.schema().fields.find((f) => f.path === "style.lineWidth");
+      const wf = widthField2(drawing);
+      const width = common((d) => d.style.lineWidth);
+      const markers = every((d) => {
+        const f = widthField2(d);
+        return f?.kind === "number" && (f.min ?? 1) > 1;
+      });
+      if (markers && wf?.kind === "number") {
+        bar.appendChild(this.widthInput("Line width", width, wf.min ?? 1, wf.max ?? 60, wf.step ?? 1, (v) => actions.patch({ "style.lineWidth": v })));
       } else {
-        bar.appendChild(this.dropdown("Line width", [1, 2, 3, 4], drawing.style.lineWidth, (w) => lineIcon(w, "solid"), (v) => actions.patch({ "style.lineWidth": v }), { label: (v) => `${v}px`, labelInTrigger: true }));
+        bar.appendChild(this.dropdown("Line width", [1, 2, 3, 4], width, (w) => lineIcon(w, "solid"), (v) => actions.patch({ "style.lineWidth": v }), { label: (v) => `${v}px`, labelInTrigger: true }));
       }
     }
-    if (paths.has("style.lineStyle")) bar.appendChild(this.dropdown("Line style", LINE_STYLE_OPTIONS.map((o) => o.value), drawing.style.lineStyle, (s) => lineIcon(2, s), (v) => actions.patch({ "style.lineStyle": v }), { label: styleLabel2 }));
-    if (paths.has("style.fillColor")) bar.appendChild(this.colorButton("Fill", BUCKET_ICON, effectiveFillColor(drawing, this.theme) ?? drawing.style.fillColor ?? DEFAULT_DRAWING_COLOR, (v) => actions.patch({ "style.fillColor": v })));
+    if (paths.has("style.lineStyle")) bar.appendChild(this.dropdown("Line style", LINE_STYLE_OPTIONS.map((o) => o.value), common((d) => d.style.lineStyle), (s) => lineIcon(2, s), (v) => actions.patch({ "style.lineStyle": v }), { label: styleLabel2 }));
+    if (paths.has("style.fillColor")) bar.appendChild(swatch("Fill", BUCKET_ICON, (d) => effectiveFillColor(d, this.theme) ?? d.style.fillColor ?? DEFAULT_DRAWING_COLOR, "style.fillColor"));
     const isFrvp = paths.has("frvp.rows") && drawing instanceof FixedRangeVolumeProfile;
-    const isPosition = paths.has("riskPercent") && drawing instanceof PositionTool;
+    const isPosition = paths.has("riskPercent") && every((d) => d instanceof PositionTool);
     if (isPosition) {
-      const pos = drawing;
-      bar.appendChild(this.colorButton("Profit zone", BUCKET_ICON, pos.profitColor, (v) => actions.patch({ profitColor: v })));
-      bar.appendChild(this.colorButton("Loss zone", BUCKET_ICON, pos.lossColor, (v) => actions.patch({ lossColor: v })));
+      const pos = (d) => d;
+      bar.appendChild(swatch("Profit zone", BUCKET_ICON, (d) => pos(d).profitColor, "profitColor"));
+      bar.appendChild(swatch("Loss zone", BUCKET_ICON, (d) => pos(d).lossColor, "lossColor"));
     }
-    const reg = drawing.reg;
-    if (paths.has("reg.midColor") && reg) {
+    const regOf = (d) => d.reg;
+    if (paths.has("reg.midColor") && every((d) => regOf(d) != null)) {
+      const reg = (d) => regOf(d);
       const styles = LINE_STYLE_OPTIONS.map((o) => o.value);
-      bar.appendChild(this.colorButton("Midline color", BRUSH_ICON, reg.midColor, (v) => actions.patch({ "reg.midColor": v })));
-      bar.appendChild(this.dropdown("Midline style", styles, reg.midStyle, (s) => lineIcon(2, s), (v) => actions.patch({ "reg.midStyle": v }), { label: styleLabel2 }));
-      bar.appendChild(this.colorButton("Upper line color", BRUSH_ICON, reg.upperColor, (v) => actions.patch({ "reg.upperColor": v })));
-      bar.appendChild(this.dropdown("Upper line style", styles, reg.upperStyle, (s) => lineIcon(2, s), (v) => actions.patch({ "reg.upperStyle": v }), { label: styleLabel2 }));
-      bar.appendChild(this.colorButton("Lower line color", BRUSH_ICON, reg.lowerColor, (v) => actions.patch({ "reg.lowerColor": v })));
-      bar.appendChild(this.dropdown("Lower line style", styles, reg.lowerStyle, (s) => lineIcon(2, s), (v) => actions.patch({ "reg.lowerStyle": v }), { label: styleLabel2 }));
-      bar.appendChild(this.colorButton("Upper fill", BUCKET_ICON, reg.upperFill, (v) => actions.patch({ "reg.upperFill": v })));
-      bar.appendChild(this.colorButton("Lower fill", BUCKET_ICON, reg.lowerFill, (v) => actions.patch({ "reg.lowerFill": v })));
-      bar.appendChild(this.toggle("Show R\xB2", R2_ICON, reg.showR2, (v) => actions.patch({ "reg.showR2": v })));
-    }
-    const vwap2 = drawing.vwap;
-    if (paths.has("vwap.midColor") && vwap2) {
+      bar.appendChild(swatch("Midline color", BRUSH_ICON, (d) => reg(d).midColor, "reg.midColor"));
+      bar.appendChild(this.dropdown("Midline style", styles, common((d) => reg(d).midStyle), (s) => lineIcon(2, s), (v) => actions.patch({ "reg.midStyle": v }), { label: styleLabel2 }));
+      bar.appendChild(swatch("Upper line color", BRUSH_ICON, (d) => reg(d).upperColor, "reg.upperColor"));
+      bar.appendChild(this.dropdown("Upper line style", styles, common((d) => reg(d).upperStyle), (s) => lineIcon(2, s), (v) => actions.patch({ "reg.upperStyle": v }), { label: styleLabel2 }));
+      bar.appendChild(swatch("Lower line color", BRUSH_ICON, (d) => reg(d).lowerColor, "reg.lowerColor"));
+      bar.appendChild(this.dropdown("Lower line style", styles, common((d) => reg(d).lowerStyle), (s) => lineIcon(2, s), (v) => actions.patch({ "reg.lowerStyle": v }), { label: styleLabel2 }));
+      bar.appendChild(swatch("Upper fill", BUCKET_ICON, (d) => reg(d).upperFill, "reg.upperFill"));
+      bar.appendChild(swatch("Lower fill", BUCKET_ICON, (d) => reg(d).lowerFill, "reg.lowerFill"));
+      bar.appendChild(this.toggle("Show R\xB2", R2_ICON, common((d) => reg(d).showR2), (v) => actions.patch({ "reg.showR2": v })));
+    }
+    const vwapOf = (d) => d.vwap;
+    if (paths.has("vwap.midColor") && every((d) => vwapOf(d) != null)) {
+      const vwap2 = (d) => vwapOf(d);
       const styles = LINE_STYLE_OPTIONS.map((o) => o.value);
       const MULTS = [0.5, 1, 1.5, 2, 2.5, 3, 4, 5];
-      bar.appendChild(this.colorButton("VWAP color", BRUSH_ICON, vwap2.midColor, (v) => actions.patch({ "vwap.midColor": v })));
-      bar.appendChild(this.dropdown("VWAP style", styles, vwap2.midStyle, (s) => lineIcon(2, s), (v) => actions.patch({ "vwap.midStyle": v }), { label: styleLabel2 }));
+      bar.appendChild(swatch("VWAP color", BRUSH_ICON, (d) => vwap2(d).midColor, "vwap.midColor"));
+      bar.appendChild(this.dropdown("VWAP style", styles, common((d) => vwap2(d).midStyle), (s) => lineIcon(2, s), (v) => actions.patch({ "vwap.midStyle": v }), { label: styleLabel2 }));
       bar.appendChild(
-        this.dropdown("Band multiplier", MULTS, vwap2.multiplier, () => BANDS_ICON, (v) => actions.patch({ "vwap.multiplier": v }), {
+        this.dropdown("Band multiplier", MULTS, common((d) => vwap2(d).multiplier), () => BANDS_ICON, (v) => actions.patch({ "vwap.multiplier": v }), {
           label: (v) => `${v}\u03C3`,
           labelInTrigger: true
         })
       );
-      bar.appendChild(this.colorButton("Upper band color", BRUSH_ICON, vwap2.upperColor, (v) => actions.patch({ "vwap.upperColor": v })));
-      bar.appendChild(this.colorButton("Lower band color", BRUSH_ICON, vwap2.lowerColor, (v) => actions.patch({ "vwap.lowerColor": v })));
-      bar.appendChild(this.colorButton("Band fill", BUCKET_ICON, vwap2.bandFill, (v) => actions.patch({ "vwap.bandFill": v })));
+      bar.appendChild(swatch("Upper band color", BRUSH_ICON, (d) => vwap2(d).upperColor, "vwap.upperColor"));
+      bar.appendChild(swatch("Lower band color", BRUSH_ICON, (d) => vwap2(d).lowerColor, "vwap.lowerColor"));
+      bar.appendChild(swatch("Band fill", BUCKET_ICON, (d) => vwap2(d).bandFill, "vwap.bandFill"));
     }
     if (paths.has("maxCurvature")) {
-      const cur = drawing.maxCurvature ?? 24;
+      const cur = common((d) => d.maxCurvature ?? 24);
       bar.appendChild(
         this.dropdown("Max curvature", DEDEKIND_CURVATURE_OPTIONS, cur, () => DEDEKIND_ICON2, (v) => actions.patch({ maxCurvature: v }), {
           label: (v) => `n=${v}`,
@@ -24097,7 +24280,7 @@ var DrawingSettingsPopup = class {
       );
     }
     if (paths.has("mach")) {
-      const cur = drawing.mach ?? 2;
+      const cur = common((d) => d.mach ?? 2);
       bar.appendChild(
         this.dropdown("Mach number", MACH_NUMBER_OPTIONS, cur, () => SUPERSONIC_ICON2, (v) => actions.patch({ mach: v }), {
           label: (v) => `M=${v}`,
@@ -24106,7 +24289,7 @@ var DrawingSettingsPopup = class {
       );
     }
     if (paths.has("waveCount")) {
-      const cur = drawing.waveCount ?? 6;
+      const cur = common((d) => d.waveCount ?? 6);
       bar.appendChild(
         this.dropdown("Waves", MACH_WAVE_COUNT_OPTIONS, cur, () => SONIC_ICON2, (v) => actions.patch({ waveCount: v }), {
           label: (v) => `${v}`,
@@ -24114,26 +24297,27 @@ var DrawingSettingsPopup = class {
         })
       );
     }
-    const toggles = drawing;
-    if (paths.has("showPrice")) bar.appendChild(this.toggle("Show price", PRICE_DELTA_ICON, toggles.showPrice !== false, (v) => actions.patch({ showPrice: v })));
-    if (paths.has("showDate")) bar.appendChild(this.toggle("Show date", DATE_DELTA_ICON, toggles.showDate !== false, (v) => actions.patch({ showDate: v })));
-    if (paths.has("text.color") && textOnBar) bar.appendChild(this.colorButton("Text color", TYPE_ICON, drawing.text?.color || t.textColor, (v) => actions.patch({ "text.color": v })));
-    if (paths.has("text.size") && textOnBar) bar.appendChild(this.dropdown("Text size", TEXT_SIZE_OPTIONS.map((o) => o.value), drawing.text?.size ?? "normal", (s) => labelSizeIcon(s), (v) => actions.patch({ "text.size": v }), { label: sizeLabel }));
-    if (paths.has("text.bold") && !paths.has("text.value")) bar.appendChild(this.toggle("Bold", BOLD_ICON, !!drawing.text?.bold, (v) => actions.patch({ "text.bold": v })));
-    if (paths.has("text.italic") && !paths.has("text.value")) bar.appendChild(this.toggle("Italic", ITALIC_ICON, !!drawing.text?.italic, (v) => actions.patch({ "text.italic": v })));
-    if (paths.has("text.value")) bar.appendChild(this.iconBtn("Text", TYPE_ICON, () => this.toggleTextPanel(drawing, actions, !textOnBar)));
+    const flags = (d) => d;
+    if (paths.has("showPrice")) bar.appendChild(this.toggle("Show price", PRICE_DELTA_ICON, common((d) => flags(d).showPrice !== false), (v) => actions.patch({ showPrice: v })));
+    if (paths.has("showDate")) bar.appendChild(this.toggle("Show date", DATE_DELTA_ICON, common((d) => flags(d).showDate !== false), (v) => actions.patch({ showDate: v })));
+    if (paths.has("text.color") && textOnBar) bar.appendChild(swatch("Text color", TYPE_ICON, (d) => d.text?.color || t.textColor, "text.color"));
+    if (paths.has("text.size") && textOnBar) bar.appendChild(this.dropdown("Text size", TEXT_SIZE_OPTIONS.map((o) => o.value), common((d) => d.text?.size ?? "normal"), (s) => labelSizeIcon(s), (v) => actions.patch({ "text.size": v }), { label: sizeLabel }));
+    const textField = !multi && paths.has("text.value");
+    if (paths.has("text.bold") && !textField) bar.appendChild(this.toggle("Bold", BOLD_ICON, common((d) => !!d.text?.bold), (v) => actions.patch({ "text.bold": v })));
+    if (paths.has("text.italic") && !textField) bar.appendChild(this.toggle("Italic", ITALIC_ICON, common((d) => !!d.text?.italic), (v) => actions.patch({ "text.italic": v })));
+    if (textField) bar.appendChild(this.iconBtn("Text", TYPE_ICON, () => this.toggleTextPanel(drawing, actions, !textOnBar)));
     const editableLevels = drawing.editableLevels();
-    if (editableLevels && !(drawing instanceof MachFigure)) {
-      const fib = drawing;
+    if (editableLevels && every((d) => d.editableLevels() != null && !(d instanceof MachFigure))) {
+      const fib = (d) => d;
       const sizes = TEXT_SIZE_OPTIONS.map((o) => o.value);
-      bar.appendChild(this.dropdown("Numbers size", sizes, fib.numbersSize ?? "small", (s) => numbersSizeIcon(s), (v) => actions.patch({ numbersSize: v }), { label: sizeLabel }));
-      bar.appendChild(this.dropdown("Label size", sizes, fib.labelsSize ?? "normal", (s) => labelSizeIcon(s), (v) => actions.patch({ labelsSize: v }), { label: sizeLabel }));
+      bar.appendChild(this.dropdown("Numbers size", sizes, common((d) => fib(d).numbersSize ?? "small"), (s) => numbersSizeIcon(s), (v) => actions.patch({ numbersSize: v }), { label: sizeLabel }));
+      bar.appendChild(this.dropdown("Label size", sizes, common((d) => fib(d).labelsSize ?? "normal"), (s) => labelSizeIcon(s), (v) => actions.patch({ labelsSize: v }), { label: sizeLabel }));
     }
     bar.appendChild(this.divider());
-    if (isFrvp) bar.appendChild(this.iconBtn("Settings", GEAR_ICON, () => this.settingsDialog.open(drawing, actions, "frvp")));
-    if (isPosition) bar.appendChild(this.iconBtn("Position size", GEAR_ICON, () => this.settingsDialog.open(drawing, actions, "position")));
-    if (editableLevels) bar.appendChild(this.iconBtn("Levels", GEAR_ICON, () => this.settingsDialog.open(drawing, actions, "levels")));
-    bar.appendChild(this.toggle("Lock", LOCK_ICON, drawing.locked, (v) => actions.setLocked(v)));
+    if (!multi && isFrvp) bar.appendChild(this.iconBtn("Settings", GEAR_ICON, () => this.settingsDialog.open(drawing, actions, "frvp")));
+    if (!multi && isPosition) bar.appendChild(this.iconBtn("Position size", GEAR_ICON, () => this.settingsDialog.open(drawing, actions, "position")));
+    if (!multi && editableLevels) bar.appendChild(this.iconBtn("Levels", GEAR_ICON, () => this.settingsDialog.open(drawing, actions, "levels")));
+    bar.appendChild(this.toggle("Lock", LOCK_ICON, common((d) => d.locked), (v) => actions.setLocked(v), UNLOCK_ICON));
     const del = this.iconBtn("Delete", TRASH_ICON, () => actions.remove());
     del.style.color = "var(--vela-danger)";
     bar.appendChild(del);
@@ -24319,7 +24503,7 @@ var DrawingSettingsPopup = class {
     });
     return b;
   }
-  /** The trailing kebab overflow — z-order actions + reset settings. */
+  /** The trailing kebab overflow — duplicate, z-order actions, reset settings. */
   kebabButton(actions) {
     const b = this.base("More");
     b.innerHTML = sized(KEBAB_ICON);
@@ -24331,6 +24515,7 @@ var DrawingSettingsPopup = class {
         return;
       }
       this.openActionMenu(b, [
+        { icon: CLONE_ICON, label: "Duplicate", onClick: () => actions.duplicate() },
         { icon: FRONT_ICON, label: "Bring to front", onClick: () => actions.reorder("front") },
         { icon: BACK_ICON, label: "Send to back", onClick: () => actions.reorder("back") },
         { icon: RESET_ICON, label: "Reset settings", onClick: () => actions.resetSettings() }
@@ -24487,26 +24672,30 @@ var DrawingSettingsPopup = class {
     this.tipEl?.remove();
     this.tipEl = null;
   }
-  toggle(tip, icon2, active, onChange) {
+  /** An on/off button. A mixed state (the selected drawings disagree) reads as half-lit and
+   *  the first click turns it ON for all of them. `off` swaps in a distinct glyph while the
+   *  toggle is off (a lock reads as an open padlock until it is engaged); mixed shows `icon`. */
+  toggle(tip, icon2, active, onChange, off) {
     const b = this.base(tip);
-    b.innerHTML = sized(icon2);
     const set = (on2) => {
-      b.dataset.active = on2 ? "1" : "0";
+      b.dataset.active = on2 === MIXED ? "mixed" : on2 ? "1" : "0";
+      b.innerHTML = sized(off && on2 === false ? off : icon2);
     };
     set(active);
     let on = active;
     b.addEventListener("click", () => {
-      on = !on;
+      on = on === MIXED ? true : !on;
       set(on);
       onChange(on);
     });
     return b;
   }
   /** An inline numeric width field for tools whose stroke range outgrows the 1–4px
-   *  ladder — the value is clamped to the schema's declared min/max on commit. */
+   *  ladder — the value is clamped to the schema's declared min/max on commit. A mixed
+   *  value shows an empty field with a dash until a number is typed for all. */
   widthInput(tip, value, min, max, step, onChange) {
     const ni = new NumberInput({
-      value,
+      value: value === MIXED ? min : value,
       min,
       max,
       step,
@@ -24518,13 +24707,18 @@ var DrawingSettingsPopup = class {
       title: tip,
       onChange
     });
+    if (value === MIXED) {
+      ni.input.value = "";
+      ni.input.placeholder = "\u2014";
+    }
     ni.el.dataset.tip = tip;
     trapChartKeys(ni.el);
     return ni.el;
   }
   /** A pick-one dropdown: the trigger shows the current value's glyph (plus an optional inline
    *  text label — e.g. `2px` — for controls that would otherwise look alike), and clicking it
-   *  opens a floating list of every option so a value is one click away (no cycling through). */
+   *  opens a floating list of every option so a value is one click away (no cycling through).
+   *  A mixed value shows a dash in the trigger and highlights no row. */
   dropdown(tip, values, current, render, onChange, opts = {}) {
     const b = this.base(tip);
     b.style.width = "auto";
@@ -24534,14 +24728,20 @@ var DrawingSettingsPopup = class {
     let cur = current;
     const paint = (v) => {
       b.replaceChildren();
-      const glyph = render(v);
+      if (v === MIXED) {
+        const dash = document.createElement("span");
+        dash.textContent = "\u2014";
+        dash.style.cssText = "min-width:18px;text-align:center;opacity:0.85;";
+        b.appendChild(dash);
+      }
+      const glyph = v === MIXED ? "" : render(v);
       if (glyph) {
         const ic = document.createElement("span");
         ic.style.cssText = "display:flex;";
         ic.innerHTML = sized(glyph);
         b.appendChild(ic);
       }
-      if (opts.label && opts.labelInTrigger) {
+      if (opts.label && opts.labelInTrigger && v !== MIXED) {
         const tx = document.createElement("span");
         tx.textContent = opts.label(v);
         tx.style.cssText = "font-size:11px;opacity:0.85;font-variant-numeric:tabular-nums;";
@@ -24611,8 +24811,10 @@ var DrawingSettingsPopup = class {
   }
   /** A color control: an `icon` over a thin **colored underline** showing the current
    *  value (the common idiom), with an invisible native picker overlaid to edit it.
-   *  `iconSize` shrinks it for the floating text controls. */
-  colorButton(tip, icon2, color, onChange, iconSize = 17) {
+   *  `iconSize` shrinks it for the floating text controls. A mixed color paints the
+   *  underline striped with the colors `used` across the selection, and the picker then
+   *  leads with those colors so unifying onto one of them is a single click. */
+  colorButton(tip, icon2, color, onChange, iconSize = 17, used = []) {
     const b = document.createElement("button");
     b.type = "button";
     b.dataset.tip = tip;
@@ -24622,13 +24824,14 @@ var DrawingSettingsPopup = class {
     ic.style.cssText = "display:flex;";
     ic.innerHTML = sized(icon2, iconSize);
     const bar = document.createElement("span");
-    bar.style.cssText = `display:block;height:3px;width:${Math.round(iconSize * 0.85)}px;border-radius:2px;background:${color};`;
+    bar.style.cssText = `display:block;height:3px;width:${Math.round(iconSize * 0.85)}px;border-radius:2px;background:${color === MIXED ? stripes(used) : color};`;
     b.append(ic, bar);
     let cur = color;
     b.addEventListener("pointerdown", (e) => e.stopPropagation());
     b.addEventListener("click", (e) => {
       e.stopPropagation();
-      this.toggleColorPopover(b, cur, (v) => {
+      const seed = cur === MIXED ? used[0] ?? DEFAULT_DRAWING_COLOR : cur;
+      this.toggleColorPopover(b, seed, cur === MIXED ? used : [], (v) => {
         cur = v;
         bar.style.background = v;
         onChange(v);
@@ -24637,20 +24840,42 @@ var DrawingSettingsPopup = class {
     return b;
   }
   /** Open the color popover for `anchor`, or close it if it's already this anchor's (toggle). */
-  toggleColorPopover(anchor, color, onChange) {
+  toggleColorPopover(anchor, color, used, onChange) {
     if (this.colorOwner === anchor) {
       this.closeColorPopover();
       return;
     }
-    this.openColorPopover(anchor, color, onChange);
+    this.openColorPopover(anchor, color, used, onChange);
   }
-  /** A floating RGB picker + opacity slider anchored to a color swatch — emits `#RRGGBB(AA)`. */
-  openColorPopover(anchor, color, onChange) {
+  /** A floating RGB picker + opacity slider anchored to a color swatch — emits `#RRGGBB(AA)`.
+   *  `used` (a mixed swatch's colors) leads the picker as one-click unify shortcuts. */
+  openColorPopover(anchor, color, used, onChange) {
     const t = this.theme;
     this.colorPop = this.hostFloat(anchor, {
       zIndex: 25,
       padding: "10px",
-      fill: (el) => {
+      fill: (el, pop) => {
+        if (used.length > 1) {
+          const row = document.createElement("div");
+          row.style.cssText = "display:flex;align-items:center;gap:6px;padding-bottom:9px;border-bottom:1px solid var(--vela-border);";
+          const lbl = document.createElement("span");
+          lbl.textContent = "In use";
+          lbl.style.cssText = "font:var(--vela-font-size-sm) inherit;opacity:0.7;margin-right:2px;";
+          row.appendChild(lbl);
+          for (const c of used) {
+            const sw = document.createElement("button");
+            sw.type = "button";
+            sw.dataset.tip = c;
+            sw.style.cssText = `width:18px;height:18px;border-radius:4px;border:1px solid var(--vela-border-strong);cursor:pointer;background:${c};padding:0;`;
+            sw.addEventListener("click", (e) => {
+              e.stopPropagation();
+              pop.hide();
+              onChange(c);
+            });
+            row.appendChild(sw);
+          }
+          el.appendChild(row);
+        }
         el.appendChild(buildColorPicker(color, t, onChange));
       }
     });
@@ -24671,6 +24896,7 @@ var TYPE_ICON = icon("type");
 var PRICE_DELTA_ICON = icon("price-delta");
 var DATE_DELTA_ICON = icon("date-delta");
 var LOCK_ICON = icon("lock");
+var UNLOCK_ICON = icon("unlock");
 var FRONT_ICON = icon("bring-front");
 var BACK_ICON = icon("send-back");
 var TRASH_ICON = icon("trash");
@@ -24678,6 +24904,7 @@ var BOLD_ICON = icon("bold");
 var ITALIC_ICON = icon("italic");
 var GRIP_ICON = icon("grip");
 var KEBAB_ICON = icon("kebab");
+var CLONE_ICON = icon("clone");
 var RESET_ICON = icon("reset");
 var GEAR_ICON = icon("gear");
 var CHEVRON_ICON = icon("chevron-down");
@@ -24686,6 +24913,12 @@ var BANDS_ICON = icon("bands");
 var DEDEKIND_ICON2 = icon("dedekind");
 var SONIC_ICON2 = icon("sonic");
 var SUPERSONIC_ICON2 = icon("supersonic");
+function stripes(colors) {
+  const bands = colors.length > 1 ? colors : ["var(--vela-fg-faint)", "var(--vela-fg-muted)"];
+  const step = 100 / bands.length;
+  const stops = bands.map((c, i) => `${c} ${i * step}% ${(i + 1) * step}%`).join(",");
+  return `linear-gradient(90deg,${stops})`;
+}
 function lineIcon(width, style) {
   const dash = style === "dashed" ? "5,3" : style === "dotted" ? "1.5,3" : "";
   return svg24(`<line x1="3.5" y1="12" x2="20.5" y2="12" stroke-width="${Number(width) || 2}" stroke-dasharray="${dash}"/>`);
@@ -25601,6 +25834,20 @@ var UserDrawingController = class {
     // reported exactly when it actually changes).
     this.textEditor = null;
     this.painter = new DrawingPainter();
+    /** The open popup is the multi-selection bar (vs one drawing's own) — decides what a
+     *  shrinking selection does with it. */
+    this.popupMulti = false;
+    /** Dismiss-on-outside-press also clears the selection — except when the press is ABOUT the
+     *  selection: it carries a multi-select modifier (Shift / Ctrl / Cmd — it will add to the
+     *  selection or sweep a marquee onto it), or it landed on a drawing that is already selected
+     *  (the canvas handler ran first and is holding it for a drag or a click), so the drawings
+     *  whose bar just closed must stay selected. */
+    this.onPopupDismissed = (e) => {
+      if (e && (e.shiftKey || e.ctrlKey || e.metaKey)) return;
+      const pressed = this.interaction.pressedId();
+      if (pressed && this.selectedIds.has(pressed)) return;
+      this.clearSelection();
+    };
     this.ctx = canvas.getContext("2d");
     this.popup = new DrawingSettingsPopup(overlayHost, deps.theme(), () => deps.chartBarMs());
     this.toolbar = new DrawingToolbar(
@@ -25777,6 +26024,12 @@ var UserDrawingController = class {
   }
   setSelection(ids) {
     this.selectedIds = new Set(ids);
+    if (ids.length >= 2) this.openSettingsForSelection(ids);
+    else if (this.popupMulti) {
+      this.popupMulti = false;
+      this.popup.close();
+      if (ids.length === 1) this.openSettingsById(ids[0], 0, 0);
+    }
     this.render();
   }
   /** Programmatic twin of clicking the drawing: highlight it + float its settings popup. */
@@ -25822,12 +26075,16 @@ var UserDrawingController = class {
     });
   }
   /** Delete the (unlocked) drawing under the cursor. True when one was removed.
-   *  Shared by the eraser (click + drag) and the middle-click shortcut. */
-  deleteAt(x, y) {
+   *  Shared by the eraser (click + drag) and the middle-click shortcut; the latter passes
+   *  `withSelection` so a hit on a member of a multi-selection removes the selection's
+   *  unlocked members — whichever member was hit, locked or not. */
+  deleteAt(x, y, withSelection = false) {
     const hit = topDrawingAt(this.drawings, x, y, this.deps.projector(), HIT_TOLERANCE);
-    if (!hit || hit.locked) return false;
+    if (!hit) return false;
+    const ids = deleteTargets(hit, this.selectedIds, this.drawings, withSelection);
+    if (ids.length === 0) return false;
     this.popup.close();
-    this.emit({ kind: "delete", ids: [hit.id] });
+    this.emit({ kind: "delete", ids });
     return true;
   }
   /** Shift+press on the empty plot: arm the measure ruler AND start it at (x, y) in one
@@ -25853,7 +26110,14 @@ var UserDrawingController = class {
       this.render();
     }
   }
-  pointerDown(x, y, snap = "off", shift2 = false) {
+  /** Ctrl/Cmd+press on the empty plot: sweep a selection box (adds the drawings it touches to
+   *  the selection). Returns false when a mode/tool is active (the normal press path owns it). */
+  beginMarqueeAt(x, y) {
+    if (this.measureMode || this.eraserMode || !this.interaction.beginMarquee(x, y)) return false;
+    this.render();
+    return true;
+  }
+  pointerDown(x, y, snap = "off", shift2 = false, mod = false) {
     if (this.eraserMode) {
       this.erasing = true;
       this.deleteAt(x, y);
@@ -25873,9 +26137,9 @@ var UserDrawingController = class {
         return;
       }
     }
-    this.interaction.down(x, y, snap, shift2);
+    this.interaction.down(x, y, snap, shift2, mod);
   }
-  pointerMove(x, y, snap = "off", shift2 = false) {
+  pointerMove(x, y, snap = "off", shift2 = false, mod = false) {
     if (this.eraserMode) {
       if (this.erasing) this.deleteAt(x, y);
       return;
@@ -25887,12 +26151,14 @@ var UserDrawingController = class {
       return;
     }
     this.interaction.move(x, y, snap, shift2);
-    this.updateHover(x, y);
+    this.updateHover(x, y, mod);
   }
-  /** Track which drawing is hovered so its handles appear on hover (and only then). */
-  updateHover(x, y) {
+  /** Track which drawing is hovered so its handles appear on hover (and only then). While
+   *  Ctrl/Cmd is held the cursor is picking a selection — handles then mark only what IS
+   *  selected, so a hovered candidate doesn't already read as selected. */
+  updateHover(x, y, mod = false) {
     let id = null;
-    if (this.activeTool == null && !this.interaction.isPlacing() && !this.interaction.isDragging()) {
+    if (!mod && this.activeTool == null && !this.interaction.isPlacing() && !this.interaction.isDragging()) {
       id = topDrawingAt(this.drawings, x, y, this.deps.projector(), HIT_TOLERANCE)?.id ?? null;
     }
     if (id !== this.hoveredId) {
@@ -25912,7 +26178,12 @@ var UserDrawingController = class {
       this.render();
       return;
     }
+    const dragged = this.interaction.isDragging() ? this.interaction.pressedId() : null;
     this.interaction.up(x, y);
+    if (dragged && this.selectedIds.has(dragged) && !this.popup.isOpen()) {
+      if (this.selectedIds.size >= 2) this.openSettingsForSelection(this.selectionIds());
+      else this.openSettingsById(dragged, x, y);
+    }
   }
   /** Toggle the transient ruler. Arming it clears any drawing tool + selection. */
   toggleMeasure() {
@@ -26177,7 +26448,7 @@ var UserDrawingController = class {
         this.emit({ kind: "duplicate", ids: this.selectionIds() });
         break;
       case "delete": {
-        const ids = this.selectedIds.size ? this.selectionIds() : this.hoveredId ? [this.hoveredId] : [];
+        const ids = this.selectedIds.size ? this.deletableSelection() : this.hoveredId ? [this.hoveredId] : [];
         if (ids.length) {
           this.popup.close();
           this.emit({ kind: "delete", ids });
@@ -26193,6 +26464,9 @@ var UserDrawingController = class {
   selectionIds() {
     return [...this.selectedIds];
   }
+  deletableSelection() {
+    return deletableSelection(this.selectedIds, this.drawings);
+  }
   /** Move every selected (unlocked) drawing by a pixel delta — one edit/edit-many → one undo step. */
   nudgeSelection(dx, dy) {
     const proj = this.deps.projector();
@@ -26301,6 +26575,8 @@ var UserDrawingController = class {
     this.painter.seriesLook = this.deps.seriesLook();
     this.painter.paintAll(ctx, this.drawings.filter((d) => !this.isInterleaved(d)), proj, this.deps.theme(), targets);
     this.painter.paintHighlights(ctx, this.drawings.filter((d) => this.isInterleaved(d)), proj, handleIdsFor(targets));
+    const clones = this.interaction.dragClones();
+    if (clones) this.painter.paintAll(ctx, clones, proj, this.deps.theme(), { selected: new Set(clones.map((c) => c.id)) });
     this.layoutTextEditor();
     const ghost = this.interaction.ghost();
     if (ghost) this.painter.paintGhost(ctx, ghost, proj, this.deps.theme());
@@ -26316,6 +26592,8 @@ var UserDrawingController = class {
     const my = m ? proj.yOf(m.point.price, m.paneId) : null;
     if (m && my != null) this.painter.paintSnapRing(ctx, proj.xOf(m.point.time), my, this.deps.theme());
     if (this.measure.isActive()) this.measure.paint(ctx, proj, this.deps.theme());
+    const marquee = this.interaction.marqueeRect();
+    if (marquee) this.painter.paintMarquee(ctx, marquee);
   }
   destroy() {
     this.closeTextEditor();
@@ -26333,15 +26611,80 @@ var UserDrawingController = class {
     if (this.selectedIds.size) this.emit({ kind: "select", ids: [] });
     this.render();
   }
+  /** Report the live drawings' current state as one edit (one undo step, however many). */
+  emitEdits(drawings) {
+    const docs = drawings.map((d) => d.serialize());
+    if (docs.length === 1) this.emit({ kind: "edit", doc: docs[0] });
+    else if (docs.length > 1) this.emit({ kind: "edit-many", docs });
+  }
+  /** The one bar for a multi-selection: it shows the controls all of its drawings share and
+   *  every action applies to all of them. Floats clear of their combined bounds. */
+  openSettingsForSelection(ids) {
+    const live = () => ids.map((id) => this.drawings.find((d) => d.id === id)).filter((d) => d != null);
+    const drawings = live();
+    if (drawings.length < 2) return;
+    const proj = this.deps.projector();
+    let anchor = null;
+    for (const d of drawings) {
+      const b = d.bounds(proj);
+      if (!b) continue;
+      if (!anchor) anchor = { ...b };
+      else {
+        const right = Math.max(anchor.x + anchor.w, b.x + b.w);
+        const bottom = Math.max(anchor.y + anchor.h, b.y + b.h);
+        anchor.x = Math.min(anchor.x, b.x);
+        anchor.y = Math.min(anchor.y, b.y);
+        anchor.w = right - anchor.x;
+        anchor.h = bottom - anchor.y;
+      }
+    }
+    this.popupMulti = true;
+    this.emit({ kind: "settings", id: drawings[0].id });
+    this.popup.open(drawings, anchor, {
+      resolve: () => live()[0] ?? null,
+      patch: (p) => {
+        const ds = live();
+        for (const d of ds) d.applySettings(p);
+        this.render();
+        this.emitEdits(ds);
+      },
+      setLocked: (v) => {
+        const ds = live();
+        for (const d of ds) d.locked = v;
+        this.emitEdits(ds);
+      },
+      reorder: (to) => {
+        for (const d of live()) this.emit({ kind: "reorder", id: d.id, to });
+      },
+      duplicate: () => {
+        this.popup.close();
+        this.emit({ kind: "duplicate", ids: live().map((d) => d.id) });
+      },
+      resetSettings: () => {
+        const ds = live();
+        for (const d of ds) resetDrawingSettings(d);
+        this.render();
+        this.emitEdits(ds);
+        this.openSettingsForSelection(ids);
+      },
+      remove: () => {
+        const ids2 = live().filter((d) => !d.locked).map((d) => d.id);
+        if (ids2.length === 0) return;
+        this.popup.close();
+        this.emit({ kind: "delete", ids: ids2 });
+      }
+    }, this.onPopupDismissed);
+  }
   /** A click on a drawing opens its settings toolbar (text labels edit text here too). */
   openSettingsById(id, _x, _y) {
     const drawing = this.drawings.find((d) => d.id === id);
     if (!drawing) return;
     const live = () => this.drawings.find((d) => d.id === id);
+    this.popupMulti = false;
     this.emit({ kind: "select", ids: [id] });
     this.emit({ kind: "settings", id });
     const anchor = drawing.bounds(this.deps.projector());
-    this.popup.open(drawing, anchor, {
+    this.popup.open([drawing], anchor, {
       // Sync rebuilds instances, so a panel that reads values back after a patch (e.g. the
       // position tool's price fields, where one edit can flip another level) resolves fresh.
       resolve: () => live() ?? null,
@@ -26359,6 +26702,11 @@ var UserDrawingController = class {
         this.emit({ kind: "edit", doc: d.serialize() });
       },
       reorder: (to) => this.emit({ kind: "reorder", id, to }),
+      duplicate: () => {
+        this.finishTextEditor(true);
+        this.popup.close();
+        this.emit({ kind: "duplicate", ids: [id] });
+      },
       resetSettings: () => {
         const d = live();
         if (!d) return;
@@ -26381,7 +26729,13 @@ var UserDrawingController = class {
         this.popup.close();
         this.emit({ kind: "delete", ids: [id] });
       }
-    }, () => this.clearSelection());
+    }, this.onPopupDismissed);
+  }
+  /** A plain click on the empty plot: drop the selection. The popup's dismiss-on-outside-press
+   *  does the same, but a selection can exist with no bar open (a lone Ctrl-click pick, a
+   *  selection whose bar was dismissed by a modifier press) — this covers those. */
+  deselect() {
+    this.clearSelection();
   }
   /** Report placement progress upstream (`draft` intent) so the drawings sync can
    *  mirror the ghost live on linked charts. Called from every render; only actual
@@ -26407,6 +26761,13 @@ var UserDrawingController = class {
       }, 0);
       return;
     }
+    if (i.kind === "clone") {
+      const before = new Set(this.drawings.map((d) => d.id));
+      this.intentCb?.(i);
+      const fresh = this.drawings.filter((d) => !before.has(d.id));
+      if (fresh.length === 1) this.openSettingsById(fresh[0].id, 0, 0);
+      return;
+    }
     this.intentCb?.(i);
   }
 };
@@ -28718,7 +29079,10 @@ var NativeRenderer = class {
       zoomTo: (target, anchorLogical, anchorX) => this.zoomTo(target, anchorLogical, anchorX),
       fling: (v) => this.fling(v),
       onPointerMove: (x, y) => this.handlePointerMove(x, y),
-      onClick: (x) => this.handleClick(x),
+      onClick: (x) => {
+        this.userDrawings?.deselect();
+        this.handleClick(x);
+      },
       onAxisLongPress: (axis, x, y) => {
         for (const cb of this.axisLongPressCbs) cb({ axis, x, y });
       },
@@ -28736,11 +29100,13 @@ var NativeRenderer = class {
       // User drawings claim a gesture before pan when armed / over a drawing.
       drawingsClaim: (x, y) => this.userDrawings?.claim(x, y) ?? false,
       drawingsMeasureStart: (x, y, snap) => this.userDrawings?.beginMeasureAt(x, y, snap) ?? false,
-      drawingsDeleteAt: (x, y) => this.userDrawings?.deleteAt(x, y) ?? false,
+      drawingsMarqueeStart: (x, y) => this.userDrawings?.beginMarqueeAt(x, y) ?? false,
+      drawingsDeleteAt: (x, y) => this.userDrawings?.deleteAt(x, y, true) ?? false,
+      // middle-click: a selected hit takes the whole selection
       drawingsCancelPlacement: () => this.userDrawings?.cancelPlacement() ?? false,
       drawingsSnapMode: () => this.snapMode,
-      drawingsPointerDown: (x, y, snap, shift2) => this.userDrawings?.pointerDown(x, y, snap, shift2),
-      drawingsPointerMove: (x, y, snap, shift2) => this.userDrawings?.pointerMove(x, y, snap, shift2),
+      drawingsPointerDown: (x, y, snap, shift2, mod) => this.userDrawings?.pointerDown(x, y, snap, shift2, mod),
+      drawingsPointerMove: (x, y, snap, shift2, mod) => this.userDrawings?.pointerMove(x, y, snap, shift2, mod),
       drawingsPointerUp: (x, y, snap) => this.userDrawings?.pointerUp(x, y, snap),
       drawingsCursor: (x, y) => this.userDrawings?.cursorAt(x, y) ?? null,
       drawingsDblClick: (x, y) => this.userDrawings?.dblClick(x, y) ?? false,
@@ -31103,6 +31469,10 @@ function str3(inputs, key, fallback) {
   const v = inputs[key];
   return typeof v === "string" && v !== "" ? v : fallback;
 }
+function bool(inputs, key, fallback) {
+  const v = inputs[key];
+  return typeof v === "boolean" ? v : fallback;
+}
 function toPoints(bars, values, colors) {
   const pts = new Array(bars.length);
   for (let i = 0; i < bars.length; i++) {
@@ -32634,10 +33004,6 @@ var aroon = {
       plots: [
         { key: "up", title: "Aroon up", values: up, color: BULLISH, width: 2 },
         { key: "down", title: "Aroon down", values: down, color: BEARISH, width: 2 }
-      ],
-      levels: [
-        { key: "upper", price: 100, color: NEUTRAL, lineStyle: "dotted" },
-        { key: "lower", price: 0, color: NEUTRAL, lineStyle: "dotted" }
       ]
     };
   }
@@ -33135,8 +33501,10 @@ var volumeSpecs = [
 var DAY_MS2 = 864e5;
 function periodKey(anchor, time) {
   if (anchor === "Week") return Math.floor((Math.floor(time / DAY_MS2) + 3) / 7);
-  if (anchor === "Month") {
+  if (anchor === "Month" || anchor === "Quarter" || anchor === "Year") {
     const d = new Date(time);
+    if (anchor === "Year") return d.getUTCFullYear();
+    if (anchor === "Quarter") return d.getUTCFullYear() * 4 + Math.floor(d.getUTCMonth() / 3);
     return d.getUTCFullYear() * 12 + d.getUTCMonth();
   }
   return Math.floor(time / DAY_MS2);
@@ -33188,40 +33556,86 @@ var parabolicSar = {
     return { plots: [{ key: "sar", title: "PSAR", values, kind: "circles", color: SERIES_LINE, colors }] };
   }
 };
+var VWAP_BANDS_GROUP = "Bands";
+var VWAP_STYLE = "Style";
+var VWAP_BANDS = [
+  { on: "band1", mult: "band1Mult", color: "band1Color", fill: "band1Fill", fillColor: "band1FillColor", defMult: 1, defOn: true, defColor: BULLISH },
+  { on: "band2", mult: "band2Mult", color: "band2Color", fill: "band2Fill", fillColor: "band2FillColor", defMult: 2, defOn: false, defColor: WARNING },
+  { on: "band3", mult: "band3Mult", color: "band3Color", fill: "band3Fill", fillColor: "band3FillColor", defMult: 3, defOn: false, defColor: CATEGORICAL[4] }
+];
 var vwap = {
   type: "vwap",
   title: "Volume Weighted Average Price",
   shortTitle: "VWAP",
   overlay: true,
   inputs: [
-    { key: "anchor", title: "Anchor", type: "string", defval: "Day", options: ["Day", "Week", "Month"], tooltip: "Where the accumulation resets (UTC periods)" },
-    { key: "source", title: "Source", type: "string", defval: "HLC3", options: ["HLC3", "OHLC4", "Close"] },
-    colorInput(INFO)
+    { key: "anchor", title: "Period", type: "string", defval: "Day", options: ["Day", "Week", "Month", "Quarter", "Year"], tooltip: "Where the accumulation resets (UTC periods)" },
+    sourceInput("HLC3"),
+    // Each band is one row: its toggle leads, the multiplier follows unlabeled.
+    ...VWAP_BANDS.flatMap((b, i) => [
+      { key: b.on, title: `Band ${i + 1} multiplier`, type: "bool", defval: b.defOn, inline: b.on, group: VWAP_BANDS_GROUP },
+      { key: b.mult, title: "", type: "float", defval: b.defMult, min: 0.1, max: 10, step: 0.1, inline: b.on, group: VWAP_BANDS_GROUP }
+    ]),
+    { ...colorInput(INFO, "VWAP color"), group: VWAP_STYLE },
+    // One row per band: its ink, then the fill toggle with the fill's own (translucent) color.
+    ...VWAP_BANDS.flatMap((b, i) => [
+      { ...colorInput(b.defColor, `Band ${i + 1} color`, b.color), inline: b.color, group: VWAP_STYLE },
+      { key: b.fill, title: "Fill", type: "bool", defval: true, inline: b.color, group: VWAP_STYLE },
+      { ...colorInput(withAlpha2(b.defColor), "", b.fillColor), inline: b.color, group: VWAP_STYLE }
+    ])
   ],
   compute: (bars, inputs) => {
     const anchor = str3(inputs, "anchor", "Day");
-    const source = str3(inputs, "source", "HLC3");
-    const values = new Array(bars.length).fill(Number.NaN);
+    const src = sourceValues(bars, str3(inputs, "source", "HLC3"));
+    const n = bars.length;
+    const values = new Array(n).fill(Number.NaN);
+    const bands = VWAP_BANDS.filter((b) => bool(inputs, b.on, b.defOn)).map((b) => ({
+      mult: Math.max(0, num3(inputs, b.mult, b.defMult)),
+      color: str3(inputs, b.color, b.defColor),
+      fill: bool(inputs, b.fill, true),
+      fillColor: str3(inputs, b.fillColor, withAlpha2(b.defColor)),
+      up: new Array(n).fill(Number.NaN),
+      down: new Array(n).fill(Number.NaN)
+    }));
     let period = Number.NaN;
     let cumPV = 0;
+    let cumPV2 = 0;
     let cumV = 0;
-    for (let i = 0; i < bars.length; i++) {
+    for (let i = 0; i < n; i++) {
       const b = bars[i];
       const key = periodKey(anchor, b.time);
       if (key !== period) {
         period = key;
         cumPV = 0;
+        cumPV2 = 0;
         cumV = 0;
       }
       const v = b.volume;
       if (v != null && Number.isFinite(v) && v > 0) {
-        const tp = source === "Close" ? b.close : source === "OHLC4" ? (b.open + b.high + b.low + b.close) / 4 : (b.high + b.low + b.close) / 3;
+        const tp = src[i];
         cumPV += tp * v;
+        cumPV2 += tp * tp * v;
         cumV += v;
       }
-      if (cumV > 0) values[i] = cumPV / cumV;
-    }
-    return { plots: [{ key: "vwap", title: "VWAP", values, color: str3(inputs, "color", INFO), width: 2 }] };
+      if (cumV <= 0) continue;
+      const mean = cumPV / cumV;
+      const sd = Math.sqrt(Math.max(0, cumPV2 / cumV - mean * mean));
+      values[i] = mean;
+      for (const band of bands) {
+        band.up[i] = mean + band.mult * sd;
+        band.down[i] = mean - band.mult * sd;
+      }
+    }
+    const plots = [{ key: "vwap", title: "VWAP", values, color: str3(inputs, "color", INFO), width: 2 }];
+    const fills = [];
+    bands.forEach((band, i) => {
+      plots.push(
+        { key: `up${i}`, title: `Upper ${band.mult}\u03C3`, values: band.up, color: band.color },
+        { key: `down${i}`, title: `Lower ${band.mult}\u03C3`, values: band.down, color: band.color }
+      );
+      if (band.fill) fills.push({ key: `band${i}`, from: `up${i}`, to: `down${i}`, color: band.fillColor });
+    });
+    return { plots, bands: fills };
   }
 };
 var pivotPoints = {