@luxalgo/vela 0.6.17 → 0.6.18

package/dist/widget.cjs

@@ -5093,15 +5093,15 @@ function candleOverrideFor(style, bags) {
   if (!hasOwnCandlePaint(style)) return null;
   const bag = bags[style] ?? {};
   const color = (v) => isColor(v) ? v : null;
-  const bool = (v) => isBool(v) ? v : null;
+  const bool2 = (v) => isBool(v) ? v : null;
   return {
     upColor: color(bag.candleUpColor),
     downColor: color(bag.candleDownColor),
-    bodyVisible: bool(bag.candleBodyVisible),
-    borderVisible: bool(bag.candleBorderVisible),
+    bodyVisible: bool2(bag.candleBodyVisible),
+    borderVisible: bool2(bag.candleBorderVisible),
     borderUpColor: color(bag.candleBorderUpColor),
     borderDownColor: color(bag.candleBorderDownColor),
-    wickVisible: bool(bag.candleWickVisible),
+    wickVisible: bool2(bag.candleWickVisible),
     wickUpColor: color(bag.candleWickUpColor),
     wickDownColor: color(bag.candleWickDownColor)
   };
@@ -12088,6 +12088,9 @@ function paneLabel(pane, fallbackTitle) {
 function indicatorLabel(i, fallbackTitle) {
   return i.title || fallbackTitle(i.id) || i.id;
 }
+function indicatorRowLabel(i, fallbackTitle) {
+  return i.shorttitle || indicatorLabel(i, fallbackTitle);
+}
 function paneRows(pane) {
   return pane.items.flatMap((it) => it.kind === "row" ? [it.row] : []);
 }
@@ -12219,7 +12222,7 @@ function paneItems(snap, pane, units) {
   const indicatorRow = (i) => ({
     kind: "indicator",
     id: i.id,
-    label: indicatorLabel(i, snap.handleTitle),
+    label: indicatorRowLabel(i, snap.handleTitle),
     visible: snap.indicatorVisible(i.id),
     ownScale: i.ownScale
   });
@@ -12632,9 +12635,13 @@ var CSS6 = `
 .vela-ot-empty { padding: 20px 10px; text-align: center; color: var(--vela-fg-muted); font-size: 12px; }
 
 /* \u2500\u2500 drawing groups \u2500\u2500 */
-/* One top-level entry in a pane's drawing list: a lone drawing, or a whole group block. The
-   transparent border reserves the outline used when a drawing is dropped into the group. */
-.vela-ot-unit { border: 1px solid transparent; border-radius: 6px; }
+/* One top-level entry in a pane's drawing list: a lone drawing, or a whole group block. No
+   border of its own \u2014 units stack flush, so consecutive highlighted rows read as one block; the
+   drop-into-group outline is drawn inside the box instead (see the drag-and-drop rules). */
+.vela-ot-unit { border-radius: 6px; }
+/* Adjacent picked rows merge into one contiguous highlight: the shared edge loses its rounding. */
+.vela-ot-unit:has(> .vela-ot-row[data-picked]) + .vela-ot-unit > .vela-ot-row[data-picked] { border-top-left-radius: 0; border-top-right-radius: 0; }
+.vela-ot-unit:has(+ .vela-ot-unit > .vela-ot-row[data-picked]) > .vela-ot-row[data-picked] { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
 .vela-ot-row[data-row-kind='group'] > .vela-icon { width: 12px; font-size: 11px; }
 /* A member sits indented under its group's header. */
 .vela-ot-subrow { padding-left: 26px; }
@@ -12691,8 +12698,10 @@ var CSS6 = `
 .vela-ot-gap[data-drop] { height: 4px; background: var(--vela-fg-bright); }
 .vela-ot-gap[data-drop]::before { display: none; }
 /* A whole container accepts the drop: merging into a pane, or a pane with no drawings yet.
-   The pane block's transparent border reserves the room for this outline. */
+   The pane block's transparent border reserves the room for this outline; a group unit has no
+   border to color, so it draws the same line as an inset outline (no layout footprint). */
 .vela-ot [data-drop='target'] { border-color: var(--vela-fg-bright); background: var(--vela-hover); }
+.vela-ot-unit[data-drop='target'] { outline: 1px solid var(--vela-fg-bright); outline-offset: -1px; }
 /* Where a reorder would insert. */
 .vela-ot [data-drop='before'] { box-shadow: inset 0 2px 0 var(--vela-fg-bright); }
 .vela-ot [data-drop='after'] { box-shadow: inset 0 -2px 0 var(--vela-fg-bright); }
@@ -12755,7 +12764,8 @@ var ObjectTree = class extends SidePanel {
     super(host, "Object tree", "vela-ot");
     this.iconFor = iconFor;
     this.chart = null;
-    this.selectedDrawing = null;
+    /** What the CHART has selected — every member of a multi-selection, mirrored as rows. */
+    this.selectedDrawings = /* @__PURE__ */ new Set();
     this.symbolName = "";
     /** The raw (possibly venue-prefixed) symbol — what icon resolution routes on. */
     this.symbolRaw = "";
@@ -12806,12 +12816,9 @@ var ObjectTree = class extends SidePanel {
       this.unsubs.push(chart.on(ev, () => this.refresh()));
     }
     this.unsubs.push(
-      chart.on("drawing:selected", ({ id }) => {
-        this.selectedDrawing = id;
-        if (!this.syncingSelection) {
-          this.picked.clear();
-          if (id) this.picked.add(id);
-        }
+      chart.on("drawing:selected", ({ ids }) => {
+        this.selectedDrawings = new Set(ids);
+        if (!this.syncingSelection) this.picked = new Set(ids);
         this.refresh();
       })
     );
@@ -13159,7 +13166,7 @@ var ObjectTree = class extends SidePanel {
     el.dataset.drag = "1";
     el.title = "Drag to restack, or onto another pane to move it there";
     if (inGroup) el.classList.add("vela-ot-subrow");
-    if (d.id === this.selectedDrawing) el.dataset.selected = "1";
+    if (this.selectedDrawings.has(d.id)) el.dataset.selected = "1";
     if (this.picked.has(d.id)) el.dataset.picked = "1";
     el.addEventListener("click", (e) => this.onDrawClick(e, d.id));
     return el;
@@ -14336,6 +14343,20 @@ var SymbolPicker = class {
     this.seed = initialQuery;
     this.dialog.show();
   }
+  get isOpen() {
+    return this.dialog.open;
+  }
+  /** Text typed at the picker that never reached its field: closed, it opens seeded
+   *  with the text; open (the field takes focus a tick after the dialog does, and a
+   *  fast typist's next key lands in that tick), it extends the query. */
+  type(text) {
+    if (!this.isOpen) {
+      this.open(text);
+      return;
+    }
+    this.input.value = (this.input.value + text).toUpperCase();
+    this.refresh();
+  }
   close() {
     this.dialog.hide();
   }
@@ -14749,6 +14770,20 @@ var TimeframeQuick = class {
       this.input.setSelectionRange(this.input.value.length, this.input.value.length);
     }, 0);
   }
+  get isOpen() {
+    return this.dialog.open;
+  }
+  /** Text typed at the entry that never reached its field: closed, it opens seeded
+   *  with the text; open (the field takes focus a tick after the dialog does, and a
+   *  fast typist's next key lands in that tick), it extends the entry. */
+  type(text) {
+    if (!this.isOpen) {
+      this.open(text);
+      return;
+    }
+    this.input.value += text;
+    this.renderHint();
+  }
   close() {
     this.dialog.hide();
   }
@@ -16819,15 +16854,18 @@ var DrawingController = class {
       next = [...ids];
     }
     this.selectedIds = next.filter((id) => this.store.has(id));
+    this.announceSelection();
+  }
+  /** Push the selection to the renderer and announce it (primary + the full list). */
+  announceSelection() {
     this.port?.setSelection(this.selectedIds);
-    this.events.emit("drawing:selected", { id: this.selectedIds[0] ?? null });
+    this.events.emit("drawing:selected", { id: this.selectedIds[0] ?? null, ids: [...this.selectedIds] });
   }
   /** Restore a history snapshot, reconciling selection against what survived. */
   restoreSnapshot(doc) {
     this.store.load(doc);
     this.selectedIds = this.selectedIds.filter((id) => this.store.has(id));
-    this.port?.setSelection(this.selectedIds);
-    this.events.emit("drawing:selected", { id: this.selectedIds[0] ?? null });
+    this.announceSelection();
   }
   /** Delete drawings as one undo step; prune them from the selection. */
   deleteMany(ids) {
@@ -16960,6 +16998,9 @@ var DrawingController = class {
       case "duplicate":
         this.duplicate(i.ids);
         break;
+      case "clone":
+        if (this.enabled && i.docs.length) this.insertClones(i.docs);
+        break;
       case "copy":
         this.copy(i.ids);
         break;
@@ -19912,7 +19953,12 @@ var EngineOrchestrator = class _EngineOrchestrator {
       if (!model) continue;
       const paneId = model.paneId ?? "price";
       if (!byPane.has(paneId)) byPane.set(paneId, []);
-      byPane.get(paneId).push({ id: r.id, title: model.title || r.title, ownScale: model.ownScale === true });
+      byPane.get(paneId).push({
+        id: r.id,
+        title: model.title || r.title,
+        ...model.shorttitle ? { shorttitle: model.shorttitle } : {},
+        ownScale: model.ownScale === true
+      });
     }
     const panes = [];
     for (const paneId of this.paneOrder) {
@@ -24545,7 +24591,7 @@ var InputController = class {
       if (e.repeat || e.key !== "Shift" && e.key !== "Control" && e.key !== "Meta") return;
       if (Number.isNaN(this.cursorX)) return;
       if (this.dragging && this.region !== "drawing") return;
-      this.deps.drawingsPointerMove?.(this.cursorX, this.cursorY, this.snapMode(e), e.shiftKey);
+      this.deps.drawingsPointerMove?.(this.cursorX, this.cursorY, this.snapMode(e), e.shiftKey, e.ctrlKey || e.metaKey);
     };
     this.onDown = (e) => {
       if (e.button === 1) {
@@ -24577,7 +24623,7 @@ var InputController = class {
       this.startY = y;
       if (this.deps.drawingsClaim?.(x, y)) {
         this.region = "drawing";
-        this.deps.drawingsPointerDown?.(x, y, this.snapMode(e), e.shiftKey);
+        this.deps.drawingsPointerDown?.(x, y, this.snapMode(e), e.shiftKey, e.ctrlKey || e.metaKey);
         this.capture(e.pointerId);
         return;
       }
@@ -24586,6 +24632,11 @@ var InputController = class {
         this.capture(e.pointerId);
         return;
       }
+      if ((e.ctrlKey || e.metaKey) && this.regionAt(x, y) === "data" && this.deps.drawingsMarqueeStart?.(x, y)) {
+        this.region = "drawing";
+        this.capture(e.pointerId);
+        return;
+      }
       const vp = this.deps.getCoords().getViewport();
       this.deps.apply(vp);
       this.startRightOffset = vp.rightOffset;
@@ -24634,7 +24685,7 @@ var InputController = class {
           this.deps.apply({ barSpacing, rightOffset: this.startRightOffset });
         } else if (this.region === "drawing") {
           if (Math.abs(x - this.startX) > slop || Math.abs(y - this.startY) > slop) this.moved = true;
-          this.deps.drawingsPointerMove?.(x, y, this.snapMode(e), e.shiftKey);
+          this.deps.drawingsPointerMove?.(x, y, this.snapMode(e), e.shiftKey, e.ctrlKey || e.metaKey);
         } else {
           const coords = this.deps.getCoords();
           const vp = coords.getViewport();
@@ -24657,7 +24708,7 @@ var InputController = class {
         const drawCursor = this.deps.drawingsCursor?.(x, y);
         const r = this.regionAt(x, y);
         this.el.style.cursor = drawCursor ?? (r === "price" ? "ns-resize" : r === "time" ? "ew-resize" : r === "separator" ? "row-resize" : "");
-        this.deps.drawingsPointerMove?.(x, y, this.snapMode(e), e.shiftKey);
+        this.deps.drawingsPointerMove?.(x, y, this.snapMode(e), e.shiftKey, e.ctrlKey || e.metaKey);
       }
       if (e.pointerType !== "touch") this.deps.onPointerMove(x, y);
     };
@@ -24998,12 +25049,12 @@ function defaultTradeMarkersState() {
 function mergeTradeMarkersState(base, patch) {
   const p = patch && typeof patch === "object" ? patch : {};
   const c = p.colors && typeof p.colors === "object" ? p.colors : {};
-  const bool = (v, fb) => typeof v === "boolean" ? v : fb;
+  const bool2 = (v, fb) => typeof v === "boolean" ? v : fb;
   const color = (v, fb) => typeof v === "string" && v.trim().length > 0 ? v : fb;
   return {
-    visible: bool(p.visible, base.visible),
-    labels: bool(p.labels, base.labels),
-    qty: bool(p.qty, base.qty),
+    visible: bool2(p.visible, base.visible),
+    labels: bool2(p.labels, base.labels),
+    qty: bool2(p.qty, base.qty),
     colors: {
       long: color(c.long, base.colors.long),
       short: color(c.short, base.colors.short),
@@ -28863,6 +28914,18 @@ var DrawingPainter = class {
     }
     this.paintHandles(ctx, pts);
   }
+  /** The selection box a Ctrl/Cmd-drag on the empty plot sweeps: a faint fill in the handle
+   *  accent under a thin dashed outline. */
+  paintMarquee(ctx, rect) {
+    ctx.save();
+    ctx.fillStyle = withAlpha(HANDLE_BORDER, 0.08);
+    ctx.fillRect(rect.x, rect.y, rect.w, rect.h);
+    ctx.strokeStyle = HANDLE_BORDER;
+    ctx.lineWidth = 1;
+    ctx.setLineDash([4, 3]);
+    ctx.strokeRect(rect.x + 0.5, rect.y + 0.5, rect.w, rect.h);
+    ctx.restore();
+  }
   /** A hollow ring marking the candle point the magnet (Ctrl) will snap the next anchor to. */
   paintSnapRing(ctx, x, y, theme) {
     ctx.setLineDash([]);
@@ -30331,6 +30394,15 @@ function topDrawingAt(drawings, x, y, proj, tol = HIT_TOLERANCE) {
   }
   return null;
 }
+function deletableSelection(selected, drawings) {
+  const ids = [...selected];
+  if (ids.length < 2) return ids;
+  return ids.filter((id) => !drawings.find((d) => d.id === id)?.locked);
+}
+function deleteTargets(hit, selected, drawings, withSelection) {
+  if (withSelection && selected.size >= 2 && selected.has(hit.id)) return deletableSelection(selected, drawings);
+  return hit.locked ? [] : [hit.id];
+}
 
 // src/renderers/native/drawings/DrawingInteraction.ts
 var DRAG_SLOP3 = 3;
@@ -30434,10 +30506,32 @@ var DrawingInteraction = class {
   activeDragId() {
     return this.state.kind === "pressed" && this.state.moved ? this.state.id : null;
   }
+  /** The drawing under a press that has not been released yet (drag or click undecided), or null. */
+  pressedId() {
+    return this.state.kind === "pressed" ? this.state.id : null;
+  }
+  /** The copies a Ctrl-drag is moving (transient — not yet in the store), or null. */
+  dragClones() {
+    return this.state.kind === "pressed" && this.state.moved && this.state.clones ? this.state.clones.map((c) => c.d) : null;
+  }
+  /** The marquee box being swept, normalized (or null when none is in progress). */
+  marqueeRect() {
+    if (this.state.kind !== "marquee") return null;
+    const { x0, y0, x1, y1 } = this.state;
+    return { x: Math.min(x0, x1), y: Math.min(y0, y1), w: Math.abs(x1 - x0), h: Math.abs(y1 - y0) };
+  }
+  /** Ctrl/Cmd-press on the empty plot: start sweeping a selection box. False when a tool is
+   *  armed or a gesture is in flight (that path owns the press). */
+  beginMarquee(x, y) {
+    if (this.state.kind !== "idle" || this.deps.activeTool() != null) return false;
+    this.state = { kind: "marquee", x0: x, y0: y, x1: x, y1: y };
+    return true;
+  }
   /** A press: place the next anchor, or grab a drawing/handle (resolved as click or drag on release).
    *  `shift` over a drawing toggles it in/out of the selection (multi-select) instead of dragging;
-   *  while placing a line tool it locks the segment angle to 45° steps. */
-  down(x, y, mode = "off", shift2 = false) {
+   *  while placing a line tool it locks the segment angle to 45° steps. `mod` (Ctrl/Cmd) over a
+   *  drawing also toggles on a click, but a body drag then moves a COPY. */
+  down(x, y, mode = "off", shift2 = false, mod = false) {
     const proj = this.deps.projector();
     if (this.state.kind === "placing") {
       if (this.state.draft.placementMode() !== "click") return;
@@ -30465,7 +30559,50 @@ var DrawingInteraction = class {
         return;
       }
       const handle = hit.hitHandle(x, y, proj, HIT_TOLERANCE);
-      this.state = { kind: "pressed", id: hit.id, handle, grab: proj.pxToPoint(x, y, hit.paneId), orig: cloneAnchors(hit), px: x, py: y, moved: false };
+      const riders = [];
+      if (handle < 0 && this.deps.selectedIds().has(hit.id)) {
+        for (const id of this.deps.selectedIds()) {
+          const d = id === hit.id ? null : this.byId(id);
+          if (d && !d.locked && d.visible) riders.push({ id, orig: cloneAnchors(d) });
+        }
+      }
+      this.state = { kind: "pressed", id: hit.id, handle, orig: cloneAnchors(hit), px: x, py: y, moved: false, riders, mod, clones: null };
+    }
+  }
+  /** The data-space delta a body drag from the press to (x, y) means on `paneId` — resolved per
+   *  pane so drawings riding along on another pane move by the same PIXELS, not the same price. */
+  bodyDelta(paneId, x, y) {
+    if (this.state.kind !== "pressed") return { dt: 0, dp: 0 };
+    const proj = this.deps.projector();
+    const from = proj.pxToPoint(this.state.px, this.state.py, paneId);
+    const to = proj.pxToPoint(x, y, paneId);
+    return { dt: to.time - from.time, dp: to.price - from.price };
+  }
+  /** The pressed drawing and its riders, each with its anchors at the press. */
+  dragSources(d) {
+    if (this.state.kind !== "pressed") return [];
+    const out = [{ d, orig: this.state.orig }];
+    for (const r of this.state.riders) {
+      const rd = this.byId(r.id);
+      if (rd) out.push({ d: rd, orig: r.orig });
+    }
+    return out;
+  }
+  /** Move the pressed drawing's body (and its riders) — or, on a Ctrl-drag, their copies — to the
+   *  cursor. The copies are built on the first move (so a Ctrl-click never creates anything), from
+   *  sources that have not moved yet, so their own anchors are the origin to translate from. */
+  dragBody(d, x, y) {
+    if (this.state.kind !== "pressed") return;
+    this.snapAt = null;
+    if (this.state.mod && !this.state.clones) {
+      this.state.clones = this.dragSources(d).flatMap((s) => {
+        const c = deserializeDrawing(s.d.serialize());
+        return c ? [{ d: c, orig: cloneAnchors(c) }] : [];
+      });
+    }
+    for (const t of this.state.clones ?? this.dragSources(d)) {
+      const { dt, dp } = this.bodyDelta(t.d.paneId, x, y);
+      t.d.anchors = t.d.translateBody(dt, dp, t.orig);
     }
   }
   /** Pointer move: advance the placing ghost, or live-preview a drag once past the slop.
@@ -30489,12 +30626,20 @@ var DrawingInteraction = class {
       this.deps.changed();
       return;
     }
+    if (this.state.kind === "marquee") {
+      this.state.x1 = x;
+      this.state.y1 = y;
+      this.deps.changed();
+      return;
+    }
     if (this.state.kind !== "pressed") return;
     const d = this.byId(this.state.id);
     if (!d || d.locked) return;
     if (!this.state.moved && Math.abs(x - this.state.px) <= DRAG_SLOP3 && Math.abs(y - this.state.py) <= DRAG_SLOP3) return;
     this.state.moved = true;
-    if (this.state.handle >= 0) {
+    if (this.state.handle < 0) {
+      this.dragBody(d, x, y);
+    } else {
       const a = d.anchors[this.state.handle];
       if (a) {
         const pivot = shift2 && ANGLE_SNAP_TYPES.has(d.type) && d.anchors.length === 2 ? d.anchors[1 - this.state.handle] : void 0;
@@ -30502,12 +30647,6 @@ var DrawingInteraction = class {
         applyFree(a, point, d.anchorSchema().slots[this.state.handle]?.free ?? "both");
       }
       d.constrainHandleDrag(this.state.handle);
-    } else {
-      const pt = this.deps.projector().pxToPoint(x, y, d.paneId);
-      this.snapAt = null;
-      const dt = pt.time - this.state.grab.time;
-      const dp = pt.price - this.state.grab.price;
-      d.anchors = d.translateBody(dt, dp, this.state.orig);
     }
     this.deps.changed();
   }
@@ -30527,16 +30666,46 @@ var DrawingInteraction = class {
       }
       return;
     }
+    if (this.state.kind === "marquee") {
+      const rect = this.marqueeRect();
+      this.state = { kind: "idle" };
+      if (rect.w > DRAG_SLOP3 || rect.h > DRAG_SLOP3) this.selectWithin(rect);
+      this.deps.changed();
+      return;
+    }
     if (this.state.kind !== "pressed") return;
-    const { id, moved } = this.state;
+    const { id, moved, riders, mod, clones } = this.state;
     this.state = { kind: "idle" };
     const d = this.byId(id);
-    if (moved) {
-      if (d) this.deps.emit({ kind: "edit", doc: d.serialize() });
-      this.deps.changed();
-    } else {
-      this.deps.openSettings(id, x, y);
+    if (!moved) {
+      if (mod) this.deps.emit({ kind: "select", ids: [id], additive: true });
+      else this.deps.openSettings(id, x, y);
+      return;
     }
+    if (clones) {
+      this.deps.emit({ kind: "clone", docs: clones.map((c) => c.d.serialize()) });
+    } else if (d) {
+      const docs = [d.serialize()];
+      for (const r of riders) {
+        const rd = this.byId(r.id);
+        if (rd) docs.push(rd.serialize());
+      }
+      if (docs.length > 1) this.deps.emit({ kind: "edit-many", docs });
+      else this.deps.emit({ kind: "edit", doc: docs[0] });
+    }
+    this.deps.changed();
+  }
+  /** Add every visible drawing whose on-screen bounds touch `rect` to the selection (a union,
+   *  so successive sweeps accumulate). No change when the box touches nothing new. */
+  selectWithin(rect) {
+    const proj = this.deps.projector();
+    const ids = [...this.deps.selectedIds()];
+    for (const d of this.deps.drawings()) {
+      if (!d.visible || ids.includes(d.id)) continue;
+      const b = d.bounds(proj);
+      if (b && rectsIntersect(rect, b)) ids.push(d.id);
+    }
+    if (ids.length > this.deps.selectedIds().size) this.deps.emit({ kind: "select", ids });
   }
   /** Cancel an in-progress placement or drag (Escape). Returns whether anything was cancelled. */
   cancel() {
@@ -30549,8 +30718,15 @@ var DrawingInteraction = class {
       return true;
     }
     if (this.state.kind === "pressed") {
-      const d = this.byId(this.state.id);
-      if (d && this.state.moved) d.anchors = this.state.orig.map((o) => ({ time: o.time, price: o.price }));
+      if (this.state.moved && !this.state.clones) {
+        const d = this.byId(this.state.id);
+        if (d) for (const s of this.dragSources(d)) s.d.anchors = s.orig.map((o) => ({ time: o.time, price: o.price }));
+      }
+      this.state = { kind: "idle" };
+      this.deps.changed();
+      return true;
+    }
+    if (this.state.kind === "marquee") {
       this.state = { kind: "idle" };
       this.deps.changed();
       return true;
@@ -30665,6 +30841,9 @@ var DrawingInteraction = class {
 function cloneAnchors(d) {
   return d.anchors.map((a) => ({ time: a.time, price: a.price }));
 }
+function rectsIntersect(a, b) {
+  return a.x <= b.x + b.w && b.x <= a.x + a.w && a.y <= b.y + b.h && b.y <= a.y + a.h;
+}
 function applyFree(anchor, pt, free) {
   if (free === "both" || free === "x") anchor.time = pt.time;
   if (free === "both" || free === "y") anchor.price = pt.price;
@@ -31050,10 +31229,27 @@ function btn(label, primary, onClick) {
 }
 
 // src/renderers/native/drawings/DrawingSettingsPopup.ts
+var MIXED = /* @__PURE__ */ Symbol("mixed");
+function sharedPaths(drawings) {
+  const [first, ...rest] = drawings;
+  const paths = new Set(first?.schema().fields.map((f) => f.path) ?? []);
+  for (const d of rest) {
+    const own = new Set(d.schema().fields.map((f) => f.path));
+    for (const p of paths) if (!own.has(p)) paths.delete(p);
+  }
+  return paths;
+}
+function commonValue(drawings, read) {
+  const first = read(drawings[0]);
+  return drawings.every((d) => read(d) === first) ? first : MIXED;
+}
+function distinctValues(drawings, read) {
+  return [...new Set(drawings.map(read))];
+}
 var BTN = 30;
 var ICON = 21;
 var STYLE_ID23 = "vela-drawing-popup-styles";
-var STYLE_REV = "3";
+var STYLE_REV = "4";
 function ensureStyles5() {
   if (typeof document === "undefined") return;
   const existing = document.getElementById(STYLE_ID23);
@@ -31065,6 +31261,8 @@ function ensureStyles5() {
 .vela-dpop-btn{background:transparent;color:var(--vela-fg-muted);transition:background var(--vela-dur-fast) ease,color var(--vela-dur-fast) ease;}
 .vela-dpop-btn:hover{background:var(--vela-hover-strong);color:var(--vela-fg-bright);}
 .vela-dpop-btn[data-active='1']{background:var(--vela-active);color:var(--vela-fg-bright);}
+/* Mixed (a multi-selection disagrees): the active fill at half strength behind a dashed ring. */
+.vela-dpop-btn[data-active='mixed']{background:var(--vela-hover-strong);color:var(--vela-fg-bright);outline:1px dashed var(--vela-fg-muted);outline-offset:-2px;}
 .vela-dpop-item{background:transparent;transition:background var(--vela-dur-fast) ease;}
 .vela-dpop-item:hover{background:var(--vela-hover-strong);}
 .vela-dpop-item[data-active='1']{background:var(--vela-active);}
@@ -31096,7 +31294,7 @@ var DrawingSettingsPopup = class {
       if (this.isOwnChrome(node)) return;
       const cb = this.onClose;
       this.close();
-      cb?.();
+      cb?.(e);
     };
     this.theme = theme;
     this.settingsDialog = new DrawingSettingsDialog(host, theme);
@@ -31121,16 +31319,27 @@ var DrawingSettingsPopup = class {
   contains(node) {
     return node != null && (this.isOwnChrome(node) || this.settingsDialog.contains(node));
   }
-  /** Open the quick toolbar for `drawing`, floating clear of its `anchor` box.
-   *  `onClose` fires on an outside-click dismissal (not a programmatic close). */
-  open(drawing, anchor, actions, onClose) {
+  /** Open the quick toolbar for `drawings` (one, or a whole multi-selection), floating clear of
+   *  their `anchor` box. With several drawings the bar shows only the controls they ALL support,
+   *  a control whose values differ reads as mixed, and every edit applies to all of them —
+   *  per-drawing panels (levels, position sizing, the text field) stay single-drawing only.
+   *  `onClose` fires on a dismissal (an outside press, or Escape in the text field — not a
+   *  programmatic close), with the dismissing press when there is one, so the caller can tell a
+   *  modifier press (multi-select) from a plain one. */
+  open(drawings, anchor, actions, onClose) {
     this.close();
+    const drawing = drawings[0];
+    if (!drawing) return;
     ensureStyles5();
     this.onClose = onClose ?? null;
     const t = this.theme;
+    const multi = drawings.length > 1;
     const schema = drawing.schema();
-    const paths = new Set(schema.fields.map((f) => f.path));
-    const textOnBar = schema.textIsContent === true || !paths.has("text.value");
+    const paths = sharedPaths(drawings);
+    const common = (read) => commonValue(drawings, read);
+    const every = (pred) => drawings.every(pred);
+    const swatch = (tip, glyph, read, path) => this.colorButton(tip, glyph, common(read), (v) => actions.patch({ [path]: v }), void 0, distinctValues(drawings, read));
+    const textOnBar = multi || schema.textIsContent === true || !paths.has("text.value");
     const el = document.createElement("div");
     el.className = "vela-dpop";
     el.style.cssText = `position:absolute;z-index:22;background:${t.background};border:1px solid var(--vela-border);border-radius:var(--vela-radius-lg);box-shadow:var(--vela-shadow);color:${t.textColor};font:var(--vela-font-size-md) ${t.fontFamily};display:flex;flex-direction:column;pointer-events:auto;overflow:hidden;`;
@@ -31144,75 +31353,84 @@ var DrawingSettingsPopup = class {
     bar.style.cssText = "display:flex;align-items:center;gap:2px;padding:4px;";
     bar.appendChild(this.dragHandle());
     if (paths.has("glyph")) {
-      const cur = drawing.glyph ?? GLYPH_OPTIONS[0];
+      const cur = common((d) => d.glyph ?? GLYPH_OPTIONS[0]);
       bar.appendChild(this.dropdown("Icon", GLYPH_OPTIONS, cur, (g) => glyphIcon(g), (v) => actions.patch({ glyph: v })));
     }
     if (paths.has("size")) {
-      const sz = drawing.size ?? "normal";
+      const sz = common((d) => d.size ?? "normal");
       bar.appendChild(this.dropdown("Icon size", STAMP_SIZE_OPTIONS, sz, (s) => stampSizeIcon(s), (v) => actions.patch({ size: v }), { label: sizeLabel }));
     }
-    if (paths.has("magnifier.timeframe") && drawing instanceof Magnifier) {
+    if (paths.has("magnifier.timeframe") && every((d) => d instanceof Magnifier)) {
+      const mag = (d) => d;
       const options = this.lowerTimeframeOptions();
       if (options.length > 0) {
         bar.appendChild(
-          this.dropdown("Lower timeframe", options.map((o) => o.value), drawing.magnifier.timeframe, () => "", (v) => actions.patch({ "magnifier.timeframe": v }), {
+          this.dropdown("Lower timeframe", options.map((o) => o.value), common((d) => mag(d).magnifier.timeframe), () => "", (v) => actions.patch({ "magnifier.timeframe": v }), {
             label: (v) => magnifierTimeframeLabel(String(v)),
             labelInTrigger: true
           })
         );
       }
-      bar.appendChild(this.colorButton("Up candles", BUCKET_ICON, drawing.magnifier.upColor || t.upColor, (v) => actions.patch({ "magnifier.upColor": v })));
-      bar.appendChild(this.colorButton("Down candles", BUCKET_ICON, drawing.magnifier.downColor || t.downColor, (v) => actions.patch({ "magnifier.downColor": v })));
+      bar.appendChild(swatch("Up candles", BUCKET_ICON, (d) => mag(d).magnifier.upColor || t.upColor, "magnifier.upColor"));
+      bar.appendChild(swatch("Down candles", BUCKET_ICON, (d) => mag(d).magnifier.downColor || t.downColor, "magnifier.downColor"));
     }
-    if (paths.has("style.lineColor")) bar.appendChild(this.colorButton("Line color", BRUSH_ICON, drawing.style.lineColor || (drawing instanceof Magnifier ? contrastColor(this.theme.background) : DEFAULT_DRAWING_COLOR), (v) => actions.patch({ "style.lineColor": v })));
+    if (paths.has("style.lineColor")) bar.appendChild(swatch("Line color", BRUSH_ICON, (d) => d.style.lineColor || (d instanceof Magnifier ? contrastColor(this.theme.background) : DEFAULT_DRAWING_COLOR), "style.lineColor"));
     if (paths.has("style.lineWidth")) {
-      const wf = schema.fields.find((f) => f.path === "style.lineWidth");
-      if (wf?.kind === "number" && (wf.min ?? 1) > 1) {
-        bar.appendChild(this.widthInput("Line width", drawing.style.lineWidth, wf.min ?? 1, wf.max ?? 60, wf.step ?? 1, (v) => actions.patch({ "style.lineWidth": v })));
+      const widthField2 = (d) => d.schema().fields.find((f) => f.path === "style.lineWidth");
+      const wf = widthField2(drawing);
+      const width = common((d) => d.style.lineWidth);
+      const markers = every((d) => {
+        const f = widthField2(d);
+        return f?.kind === "number" && (f.min ?? 1) > 1;
+      });
+      if (markers && wf?.kind === "number") {
+        bar.appendChild(this.widthInput("Line width", width, wf.min ?? 1, wf.max ?? 60, wf.step ?? 1, (v) => actions.patch({ "style.lineWidth": v })));
       } else {
-        bar.appendChild(this.dropdown("Line width", [1, 2, 3, 4], drawing.style.lineWidth, (w) => lineIcon(w, "solid"), (v) => actions.patch({ "style.lineWidth": v }), { label: (v) => `${v}px`, labelInTrigger: true }));
+        bar.appendChild(this.dropdown("Line width", [1, 2, 3, 4], width, (w) => lineIcon(w, "solid"), (v) => actions.patch({ "style.lineWidth": v }), { label: (v) => `${v}px`, labelInTrigger: true }));
       }
     }
-    if (paths.has("style.lineStyle")) bar.appendChild(this.dropdown("Line style", LINE_STYLE_OPTIONS.map((o) => o.value), drawing.style.lineStyle, (s) => lineIcon(2, s), (v) => actions.patch({ "style.lineStyle": v }), { label: styleLabel2 }));
-    if (paths.has("style.fillColor")) bar.appendChild(this.colorButton("Fill", BUCKET_ICON, effectiveFillColor(drawing, this.theme) ?? drawing.style.fillColor ?? DEFAULT_DRAWING_COLOR, (v) => actions.patch({ "style.fillColor": v })));
+    if (paths.has("style.lineStyle")) bar.appendChild(this.dropdown("Line style", LINE_STYLE_OPTIONS.map((o) => o.value), common((d) => d.style.lineStyle), (s) => lineIcon(2, s), (v) => actions.patch({ "style.lineStyle": v }), { label: styleLabel2 }));
+    if (paths.has("style.fillColor")) bar.appendChild(swatch("Fill", BUCKET_ICON, (d) => effectiveFillColor(d, this.theme) ?? d.style.fillColor ?? DEFAULT_DRAWING_COLOR, "style.fillColor"));
     const isFrvp = paths.has("frvp.rows") && drawing instanceof FixedRangeVolumeProfile;
-    const isPosition = paths.has("riskPercent") && drawing instanceof PositionTool;
+    const isPosition = paths.has("riskPercent") && every((d) => d instanceof PositionTool);
     if (isPosition) {
-      const pos = drawing;
-      bar.appendChild(this.colorButton("Profit zone", BUCKET_ICON, pos.profitColor, (v) => actions.patch({ profitColor: v })));
-      bar.appendChild(this.colorButton("Loss zone", BUCKET_ICON, pos.lossColor, (v) => actions.patch({ lossColor: v })));
+      const pos = (d) => d;
+      bar.appendChild(swatch("Profit zone", BUCKET_ICON, (d) => pos(d).profitColor, "profitColor"));
+      bar.appendChild(swatch("Loss zone", BUCKET_ICON, (d) => pos(d).lossColor, "lossColor"));
     }
-    const reg = drawing.reg;
-    if (paths.has("reg.midColor") && reg) {
+    const regOf = (d) => d.reg;
+    if (paths.has("reg.midColor") && every((d) => regOf(d) != null)) {
+      const reg = (d) => regOf(d);
       const styles = LINE_STYLE_OPTIONS.map((o) => o.value);
-      bar.appendChild(this.colorButton("Midline color", BRUSH_ICON, reg.midColor, (v) => actions.patch({ "reg.midColor": v })));
-      bar.appendChild(this.dropdown("Midline style", styles, reg.midStyle, (s) => lineIcon(2, s), (v) => actions.patch({ "reg.midStyle": v }), { label: styleLabel2 }));
-      bar.appendChild(this.colorButton("Upper line color", BRUSH_ICON, reg.upperColor, (v) => actions.patch({ "reg.upperColor": v })));
-      bar.appendChild(this.dropdown("Upper line style", styles, reg.upperStyle, (s) => lineIcon(2, s), (v) => actions.patch({ "reg.upperStyle": v }), { label: styleLabel2 }));
-      bar.appendChild(this.colorButton("Lower line color", BRUSH_ICON, reg.lowerColor, (v) => actions.patch({ "reg.lowerColor": v })));
-      bar.appendChild(this.dropdown("Lower line style", styles, reg.lowerStyle, (s) => lineIcon(2, s), (v) => actions.patch({ "reg.lowerStyle": v }), { label: styleLabel2 }));
-      bar.appendChild(this.colorButton("Upper fill", BUCKET_ICON, reg.upperFill, (v) => actions.patch({ "reg.upperFill": v })));
-      bar.appendChild(this.colorButton("Lower fill", BUCKET_ICON, reg.lowerFill, (v) => actions.patch({ "reg.lowerFill": v })));
-      bar.appendChild(this.toggle("Show R\xB2", R2_ICON, reg.showR2, (v) => actions.patch({ "reg.showR2": v })));
-    }
-    const vwap2 = drawing.vwap;
-    if (paths.has("vwap.midColor") && vwap2) {
+      bar.appendChild(swatch("Midline color", BRUSH_ICON, (d) => reg(d).midColor, "reg.midColor"));
+      bar.appendChild(this.dropdown("Midline style", styles, common((d) => reg(d).midStyle), (s) => lineIcon(2, s), (v) => actions.patch({ "reg.midStyle": v }), { label: styleLabel2 }));
+      bar.appendChild(swatch("Upper line color", BRUSH_ICON, (d) => reg(d).upperColor, "reg.upperColor"));
+      bar.appendChild(this.dropdown("Upper line style", styles, common((d) => reg(d).upperStyle), (s) => lineIcon(2, s), (v) => actions.patch({ "reg.upperStyle": v }), { label: styleLabel2 }));
+      bar.appendChild(swatch("Lower line color", BRUSH_ICON, (d) => reg(d).lowerColor, "reg.lowerColor"));
+      bar.appendChild(this.dropdown("Lower line style", styles, common((d) => reg(d).lowerStyle), (s) => lineIcon(2, s), (v) => actions.patch({ "reg.lowerStyle": v }), { label: styleLabel2 }));
+      bar.appendChild(swatch("Upper fill", BUCKET_ICON, (d) => reg(d).upperFill, "reg.upperFill"));
+      bar.appendChild(swatch("Lower fill", BUCKET_ICON, (d) => reg(d).lowerFill, "reg.lowerFill"));
+      bar.appendChild(this.toggle("Show R\xB2", R2_ICON, common((d) => reg(d).showR2), (v) => actions.patch({ "reg.showR2": v })));
+    }
+    const vwapOf = (d) => d.vwap;
+    if (paths.has("vwap.midColor") && every((d) => vwapOf(d) != null)) {
+      const vwap2 = (d) => vwapOf(d);
       const styles = LINE_STYLE_OPTIONS.map((o) => o.value);
       const MULTS = [0.5, 1, 1.5, 2, 2.5, 3, 4, 5];
-      bar.appendChild(this.colorButton("VWAP color", BRUSH_ICON, vwap2.midColor, (v) => actions.patch({ "vwap.midColor": v })));
-      bar.appendChild(this.dropdown("VWAP style", styles, vwap2.midStyle, (s) => lineIcon(2, s), (v) => actions.patch({ "vwap.midStyle": v }), { label: styleLabel2 }));
+      bar.appendChild(swatch("VWAP color", BRUSH_ICON, (d) => vwap2(d).midColor, "vwap.midColor"));
+      bar.appendChild(this.dropdown("VWAP style", styles, common((d) => vwap2(d).midStyle), (s) => lineIcon(2, s), (v) => actions.patch({ "vwap.midStyle": v }), { label: styleLabel2 }));
       bar.appendChild(
-        this.dropdown("Band multiplier", MULTS, vwap2.multiplier, () => BANDS_ICON, (v) => actions.patch({ "vwap.multiplier": v }), {
+        this.dropdown("Band multiplier", MULTS, common((d) => vwap2(d).multiplier), () => BANDS_ICON, (v) => actions.patch({ "vwap.multiplier": v }), {
           label: (v) => `${v}\u03C3`,
           labelInTrigger: true
         })
       );
-      bar.appendChild(this.colorButton("Upper band color", BRUSH_ICON, vwap2.upperColor, (v) => actions.patch({ "vwap.upperColor": v })));
-      bar.appendChild(this.colorButton("Lower band color", BRUSH_ICON, vwap2.lowerColor, (v) => actions.patch({ "vwap.lowerColor": v })));
-      bar.appendChild(this.colorButton("Band fill", BUCKET_ICON, vwap2.bandFill, (v) => actions.patch({ "vwap.bandFill": v })));
+      bar.appendChild(swatch("Upper band color", BRUSH_ICON, (d) => vwap2(d).upperColor, "vwap.upperColor"));
+      bar.appendChild(swatch("Lower band color", BRUSH_ICON, (d) => vwap2(d).lowerColor, "vwap.lowerColor"));
+      bar.appendChild(swatch("Band fill", BUCKET_ICON, (d) => vwap2(d).bandFill, "vwap.bandFill"));
     }
     if (paths.has("maxCurvature")) {
-      const cur = drawing.maxCurvature ?? 24;
+      const cur = common((d) => d.maxCurvature ?? 24);
       bar.appendChild(
         this.dropdown("Max curvature", DEDEKIND_CURVATURE_OPTIONS, cur, () => DEDEKIND_ICON2, (v) => actions.patch({ maxCurvature: v }), {
           label: (v) => `n=${v}`,
@@ -31221,7 +31439,7 @@ var DrawingSettingsPopup = class {
       );
     }
     if (paths.has("mach")) {
-      const cur = drawing.mach ?? 2;
+      const cur = common((d) => d.mach ?? 2);
       bar.appendChild(
         this.dropdown("Mach number", MACH_NUMBER_OPTIONS, cur, () => SUPERSONIC_ICON2, (v) => actions.patch({ mach: v }), {
           label: (v) => `M=${v}`,
@@ -31230,7 +31448,7 @@ var DrawingSettingsPopup = class {
       );
     }
     if (paths.has("waveCount")) {
-      const cur = drawing.waveCount ?? 6;
+      const cur = common((d) => d.waveCount ?? 6);
       bar.appendChild(
         this.dropdown("Waves", MACH_WAVE_COUNT_OPTIONS, cur, () => SONIC_ICON2, (v) => actions.patch({ waveCount: v }), {
           label: (v) => `${v}`,
@@ -31238,26 +31456,27 @@ var DrawingSettingsPopup = class {
         })
       );
     }
-    const toggles = drawing;
-    if (paths.has("showPrice")) bar.appendChild(this.toggle("Show price", PRICE_DELTA_ICON, toggles.showPrice !== false, (v) => actions.patch({ showPrice: v })));
-    if (paths.has("showDate")) bar.appendChild(this.toggle("Show date", DATE_DELTA_ICON, toggles.showDate !== false, (v) => actions.patch({ showDate: v })));
-    if (paths.has("text.color") && textOnBar) bar.appendChild(this.colorButton("Text color", TYPE_ICON, drawing.text?.color || t.textColor, (v) => actions.patch({ "text.color": v })));
-    if (paths.has("text.size") && textOnBar) bar.appendChild(this.dropdown("Text size", TEXT_SIZE_OPTIONS.map((o) => o.value), drawing.text?.size ?? "normal", (s) => labelSizeIcon(s), (v) => actions.patch({ "text.size": v }), { label: sizeLabel }));
-    if (paths.has("text.bold") && !paths.has("text.value")) bar.appendChild(this.toggle("Bold", BOLD_ICON, !!drawing.text?.bold, (v) => actions.patch({ "text.bold": v })));
-    if (paths.has("text.italic") && !paths.has("text.value")) bar.appendChild(this.toggle("Italic", ITALIC_ICON, !!drawing.text?.italic, (v) => actions.patch({ "text.italic": v })));
-    if (paths.has("text.value")) bar.appendChild(this.iconBtn("Text", TYPE_ICON, () => this.toggleTextPanel(drawing, actions, !textOnBar)));
+    const flags = (d) => d;
+    if (paths.has("showPrice")) bar.appendChild(this.toggle("Show price", PRICE_DELTA_ICON, common((d) => flags(d).showPrice !== false), (v) => actions.patch({ showPrice: v })));
+    if (paths.has("showDate")) bar.appendChild(this.toggle("Show date", DATE_DELTA_ICON, common((d) => flags(d).showDate !== false), (v) => actions.patch({ showDate: v })));
+    if (paths.has("text.color") && textOnBar) bar.appendChild(swatch("Text color", TYPE_ICON, (d) => d.text?.color || t.textColor, "text.color"));
+    if (paths.has("text.size") && textOnBar) bar.appendChild(this.dropdown("Text size", TEXT_SIZE_OPTIONS.map((o) => o.value), common((d) => d.text?.size ?? "normal"), (s) => labelSizeIcon(s), (v) => actions.patch({ "text.size": v }), { label: sizeLabel }));
+    const textField = !multi && paths.has("text.value");
+    if (paths.has("text.bold") && !textField) bar.appendChild(this.toggle("Bold", BOLD_ICON, common((d) => !!d.text?.bold), (v) => actions.patch({ "text.bold": v })));
+    if (paths.has("text.italic") && !textField) bar.appendChild(this.toggle("Italic", ITALIC_ICON, common((d) => !!d.text?.italic), (v) => actions.patch({ "text.italic": v })));
+    if (textField) bar.appendChild(this.iconBtn("Text", TYPE_ICON, () => this.toggleTextPanel(drawing, actions, !textOnBar)));
     const editableLevels = drawing.editableLevels();
-    if (editableLevels && !(drawing instanceof MachFigure)) {
-      const fib = drawing;
+    if (editableLevels && every((d) => d.editableLevels() != null && !(d instanceof MachFigure))) {
+      const fib = (d) => d;
       const sizes = TEXT_SIZE_OPTIONS.map((o) => o.value);
-      bar.appendChild(this.dropdown("Numbers size", sizes, fib.numbersSize ?? "small", (s) => numbersSizeIcon(s), (v) => actions.patch({ numbersSize: v }), { label: sizeLabel }));
-      bar.appendChild(this.dropdown("Label size", sizes, fib.labelsSize ?? "normal", (s) => labelSizeIcon(s), (v) => actions.patch({ labelsSize: v }), { label: sizeLabel }));
+      bar.appendChild(this.dropdown("Numbers size", sizes, common((d) => fib(d).numbersSize ?? "small"), (s) => numbersSizeIcon(s), (v) => actions.patch({ numbersSize: v }), { label: sizeLabel }));
+      bar.appendChild(this.dropdown("Label size", sizes, common((d) => fib(d).labelsSize ?? "normal"), (s) => labelSizeIcon(s), (v) => actions.patch({ labelsSize: v }), { label: sizeLabel }));
     }
     bar.appendChild(this.divider());
-    if (isFrvp) bar.appendChild(this.iconBtn("Settings", GEAR_ICON, () => this.settingsDialog.open(drawing, actions, "frvp")));
-    if (isPosition) bar.appendChild(this.iconBtn("Position size", GEAR_ICON, () => this.settingsDialog.open(drawing, actions, "position")));
-    if (editableLevels) bar.appendChild(this.iconBtn("Levels", GEAR_ICON, () => this.settingsDialog.open(drawing, actions, "levels")));
-    bar.appendChild(this.toggle("Lock", LOCK_ICON, drawing.locked, (v) => actions.setLocked(v)));
+    if (!multi && isFrvp) bar.appendChild(this.iconBtn("Settings", GEAR_ICON, () => this.settingsDialog.open(drawing, actions, "frvp")));
+    if (!multi && isPosition) bar.appendChild(this.iconBtn("Position size", GEAR_ICON, () => this.settingsDialog.open(drawing, actions, "position")));
+    if (!multi && editableLevels) bar.appendChild(this.iconBtn("Levels", GEAR_ICON, () => this.settingsDialog.open(drawing, actions, "levels")));
+    bar.appendChild(this.toggle("Lock", LOCK_ICON, common((d) => d.locked), (v) => actions.setLocked(v), UNLOCK_ICON));
     const del = this.iconBtn("Delete", TRASH_ICON, () => actions.remove());
     del.style.color = "var(--vela-danger)";
     bar.appendChild(del);
@@ -31443,7 +31662,7 @@ var DrawingSettingsPopup = class {
     });
     return b;
   }
-  /** The trailing kebab overflow — z-order actions + reset settings. */
+  /** The trailing kebab overflow — duplicate, z-order actions, reset settings. */
   kebabButton(actions) {
     const b = this.base("More");
     b.innerHTML = sized(KEBAB_ICON);
@@ -31455,6 +31674,7 @@ var DrawingSettingsPopup = class {
         return;
       }
       this.openActionMenu(b, [
+        { icon: CLONE_ICON, label: "Duplicate", onClick: () => actions.duplicate() },
         { icon: FRONT_ICON, label: "Bring to front", onClick: () => actions.reorder("front") },
         { icon: BACK_ICON, label: "Send to back", onClick: () => actions.reorder("back") },
         { icon: RESET_ICON, label: "Reset settings", onClick: () => actions.resetSettings() }
@@ -31611,26 +31831,30 @@ var DrawingSettingsPopup = class {
     this.tipEl?.remove();
     this.tipEl = null;
   }
-  toggle(tip, icon2, active, onChange) {
+  /** An on/off button. A mixed state (the selected drawings disagree) reads as half-lit and
+   *  the first click turns it ON for all of them. `off` swaps in a distinct glyph while the
+   *  toggle is off (a lock reads as an open padlock until it is engaged); mixed shows `icon`. */
+  toggle(tip, icon2, active, onChange, off) {
     const b = this.base(tip);
-    b.innerHTML = sized(icon2);
     const set = (on2) => {
-      b.dataset.active = on2 ? "1" : "0";
+      b.dataset.active = on2 === MIXED ? "mixed" : on2 ? "1" : "0";
+      b.innerHTML = sized(off && on2 === false ? off : icon2);
     };
     set(active);
     let on = active;
     b.addEventListener("click", () => {
-      on = !on;
+      on = on === MIXED ? true : !on;
       set(on);
       onChange(on);
     });
     return b;
   }
   /** An inline numeric width field for tools whose stroke range outgrows the 1–4px
-   *  ladder — the value is clamped to the schema's declared min/max on commit. */
+   *  ladder — the value is clamped to the schema's declared min/max on commit. A mixed
+   *  value shows an empty field with a dash until a number is typed for all. */
   widthInput(tip, value, min, max, step, onChange) {
     const ni = new NumberInput({
-      value,
+      value: value === MIXED ? min : value,
       min,
       max,
       step,
@@ -31642,13 +31866,18 @@ var DrawingSettingsPopup = class {
       title: tip,
       onChange
     });
+    if (value === MIXED) {
+      ni.input.value = "";
+      ni.input.placeholder = "\u2014";
+    }
     ni.el.dataset.tip = tip;
     trapChartKeys(ni.el);
     return ni.el;
   }
   /** A pick-one dropdown: the trigger shows the current value's glyph (plus an optional inline
    *  text label — e.g. `2px` — for controls that would otherwise look alike), and clicking it
-   *  opens a floating list of every option so a value is one click away (no cycling through). */
+   *  opens a floating list of every option so a value is one click away (no cycling through).
+   *  A mixed value shows a dash in the trigger and highlights no row. */
   dropdown(tip, values, current, render, onChange, opts = {}) {
     const b = this.base(tip);
     b.style.width = "auto";
@@ -31658,14 +31887,20 @@ var DrawingSettingsPopup = class {
     let cur = current;
     const paint = (v) => {
       b.replaceChildren();
-      const glyph = render(v);
+      if (v === MIXED) {
+        const dash = document.createElement("span");
+        dash.textContent = "\u2014";
+        dash.style.cssText = "min-width:18px;text-align:center;opacity:0.85;";
+        b.appendChild(dash);
+      }
+      const glyph = v === MIXED ? "" : render(v);
       if (glyph) {
         const ic = document.createElement("span");
         ic.style.cssText = "display:flex;";
         ic.innerHTML = sized(glyph);
         b.appendChild(ic);
       }
-      if (opts.label && opts.labelInTrigger) {
+      if (opts.label && opts.labelInTrigger && v !== MIXED) {
         const tx = document.createElement("span");
         tx.textContent = opts.label(v);
         tx.style.cssText = "font-size:11px;opacity:0.85;font-variant-numeric:tabular-nums;";
@@ -31735,8 +31970,10 @@ var DrawingSettingsPopup = class {
   }
   /** A color control: an `icon` over a thin **colored underline** showing the current
    *  value (the common idiom), with an invisible native picker overlaid to edit it.
-   *  `iconSize` shrinks it for the floating text controls. */
-  colorButton(tip, icon2, color, onChange, iconSize = 17) {
+   *  `iconSize` shrinks it for the floating text controls. A mixed color paints the
+   *  underline striped with the colors `used` across the selection, and the picker then
+   *  leads with those colors so unifying onto one of them is a single click. */
+  colorButton(tip, icon2, color, onChange, iconSize = 17, used = []) {
     const b = document.createElement("button");
     b.type = "button";
     b.dataset.tip = tip;
@@ -31746,13 +31983,14 @@ var DrawingSettingsPopup = class {
     ic.style.cssText = "display:flex;";
     ic.innerHTML = sized(icon2, iconSize);
     const bar = document.createElement("span");
-    bar.style.cssText = `display:block;height:3px;width:${Math.round(iconSize * 0.85)}px;border-radius:2px;background:${color};`;
+    bar.style.cssText = `display:block;height:3px;width:${Math.round(iconSize * 0.85)}px;border-radius:2px;background:${color === MIXED ? stripes(used) : color};`;
     b.append(ic, bar);
     let cur = color;
     b.addEventListener("pointerdown", (e) => e.stopPropagation());
     b.addEventListener("click", (e) => {
       e.stopPropagation();
-      this.toggleColorPopover(b, cur, (v) => {
+      const seed = cur === MIXED ? used[0] ?? DEFAULT_DRAWING_COLOR : cur;
+      this.toggleColorPopover(b, seed, cur === MIXED ? used : [], (v) => {
         cur = v;
         bar.style.background = v;
         onChange(v);
@@ -31761,20 +31999,42 @@ var DrawingSettingsPopup = class {
     return b;
   }
   /** Open the color popover for `anchor`, or close it if it's already this anchor's (toggle). */
-  toggleColorPopover(anchor, color, onChange) {
+  toggleColorPopover(anchor, color, used, onChange) {
     if (this.colorOwner === anchor) {
       this.closeColorPopover();
       return;
     }
-    this.openColorPopover(anchor, color, onChange);
+    this.openColorPopover(anchor, color, used, onChange);
   }
-  /** A floating RGB picker + opacity slider anchored to a color swatch — emits `#RRGGBB(AA)`. */
-  openColorPopover(anchor, color, onChange) {
+  /** A floating RGB picker + opacity slider anchored to a color swatch — emits `#RRGGBB(AA)`.
+   *  `used` (a mixed swatch's colors) leads the picker as one-click unify shortcuts. */
+  openColorPopover(anchor, color, used, onChange) {
     const t = this.theme;
     this.colorPop = this.hostFloat(anchor, {
       zIndex: 25,
       padding: "10px",
-      fill: (el) => {
+      fill: (el, pop) => {
+        if (used.length > 1) {
+          const row = document.createElement("div");
+          row.style.cssText = "display:flex;align-items:center;gap:6px;padding-bottom:9px;border-bottom:1px solid var(--vela-border);";
+          const lbl = document.createElement("span");
+          lbl.textContent = "In use";
+          lbl.style.cssText = "font:var(--vela-font-size-sm) inherit;opacity:0.7;margin-right:2px;";
+          row.appendChild(lbl);
+          for (const c of used) {
+            const sw = document.createElement("button");
+            sw.type = "button";
+            sw.dataset.tip = c;
+            sw.style.cssText = `width:18px;height:18px;border-radius:4px;border:1px solid var(--vela-border-strong);cursor:pointer;background:${c};padding:0;`;
+            sw.addEventListener("click", (e) => {
+              e.stopPropagation();
+              pop.hide();
+              onChange(c);
+            });
+            row.appendChild(sw);
+          }
+          el.appendChild(row);
+        }
         el.appendChild(buildColorPicker(color, t, onChange));
       }
     });
@@ -31795,6 +32055,7 @@ var TYPE_ICON = icon("type");
 var PRICE_DELTA_ICON = icon("price-delta");
 var DATE_DELTA_ICON = icon("date-delta");
 var LOCK_ICON = icon("lock");
+var UNLOCK_ICON = icon("unlock");
 var FRONT_ICON = icon("bring-front");
 var BACK_ICON = icon("send-back");
 var TRASH_ICON = icon("trash");
@@ -31802,6 +32063,7 @@ var BOLD_ICON = icon("bold");
 var ITALIC_ICON = icon("italic");
 var GRIP_ICON = icon("grip");
 var KEBAB_ICON = icon("kebab");
+var CLONE_ICON = icon("clone");
 var RESET_ICON = icon("reset");
 var GEAR_ICON = icon("gear");
 var CHEVRON_ICON = icon("chevron-down");
@@ -31810,6 +32072,12 @@ var BANDS_ICON = icon("bands");
 var DEDEKIND_ICON2 = icon("dedekind");
 var SONIC_ICON2 = icon("sonic");
 var SUPERSONIC_ICON2 = icon("supersonic");
+function stripes(colors) {
+  const bands = colors.length > 1 ? colors : ["var(--vela-fg-faint)", "var(--vela-fg-muted)"];
+  const step = 100 / bands.length;
+  const stops = bands.map((c, i) => `${c} ${i * step}% ${(i + 1) * step}%`).join(",");
+  return `linear-gradient(90deg,${stops})`;
+}
 function lineIcon(width, style) {
   const dash = style === "dashed" ? "5,3" : style === "dotted" ? "1.5,3" : "";
   return svg24(`<line x1="3.5" y1="12" x2="20.5" y2="12" stroke-width="${Number(width) || 2}" stroke-dasharray="${dash}"/>`);
@@ -32093,6 +32361,20 @@ var UserDrawingController = class {
     // reported exactly when it actually changes).
     this.textEditor = null;
     this.painter = new DrawingPainter();
+    /** The open popup is the multi-selection bar (vs one drawing's own) — decides what a
+     *  shrinking selection does with it. */
+    this.popupMulti = false;
+    /** Dismiss-on-outside-press also clears the selection — except when the press is ABOUT the
+     *  selection: it carries a multi-select modifier (Shift / Ctrl / Cmd — it will add to the
+     *  selection or sweep a marquee onto it), or it landed on a drawing that is already selected
+     *  (the canvas handler ran first and is holding it for a drag or a click), so the drawings
+     *  whose bar just closed must stay selected. */
+    this.onPopupDismissed = (e) => {
+      if (e && (e.shiftKey || e.ctrlKey || e.metaKey)) return;
+      const pressed = this.interaction.pressedId();
+      if (pressed && this.selectedIds.has(pressed)) return;
+      this.clearSelection();
+    };
     this.ctx = canvas.getContext("2d");
     this.popup = new DrawingSettingsPopup(overlayHost, deps.theme(), () => deps.chartBarMs());
     this.toolbar = new DrawingToolbar(
@@ -32269,6 +32551,12 @@ var UserDrawingController = class {
   }
   setSelection(ids) {
     this.selectedIds = new Set(ids);
+    if (ids.length >= 2) this.openSettingsForSelection(ids);
+    else if (this.popupMulti) {
+      this.popupMulti = false;
+      this.popup.close();
+      if (ids.length === 1) this.openSettingsById(ids[0], 0, 0);
+    }
     this.render();
   }
   /** Programmatic twin of clicking the drawing: highlight it + float its settings popup. */
@@ -32314,12 +32602,16 @@ var UserDrawingController = class {
     });
   }
   /** Delete the (unlocked) drawing under the cursor. True when one was removed.
-   *  Shared by the eraser (click + drag) and the middle-click shortcut. */
-  deleteAt(x, y) {
+   *  Shared by the eraser (click + drag) and the middle-click shortcut; the latter passes
+   *  `withSelection` so a hit on a member of a multi-selection removes the selection's
+   *  unlocked members — whichever member was hit, locked or not. */
+  deleteAt(x, y, withSelection = false) {
     const hit = topDrawingAt(this.drawings, x, y, this.deps.projector(), HIT_TOLERANCE);
-    if (!hit || hit.locked) return false;
+    if (!hit) return false;
+    const ids = deleteTargets(hit, this.selectedIds, this.drawings, withSelection);
+    if (ids.length === 0) return false;
     this.popup.close();
-    this.emit({ kind: "delete", ids: [hit.id] });
+    this.emit({ kind: "delete", ids });
     return true;
   }
   /** Shift+press on the empty plot: arm the measure ruler AND start it at (x, y) in one
@@ -32345,7 +32637,14 @@ var UserDrawingController = class {
       this.render();
     }
   }
-  pointerDown(x, y, snap = "off", shift2 = false) {
+  /** Ctrl/Cmd+press on the empty plot: sweep a selection box (adds the drawings it touches to
+   *  the selection). Returns false when a mode/tool is active (the normal press path owns it). */
+  beginMarqueeAt(x, y) {
+    if (this.measureMode || this.eraserMode || !this.interaction.beginMarquee(x, y)) return false;
+    this.render();
+    return true;
+  }
+  pointerDown(x, y, snap = "off", shift2 = false, mod = false) {
     if (this.eraserMode) {
       this.erasing = true;
       this.deleteAt(x, y);
@@ -32365,9 +32664,9 @@ var UserDrawingController = class {
         return;
       }
     }
-    this.interaction.down(x, y, snap, shift2);
+    this.interaction.down(x, y, snap, shift2, mod);
   }
-  pointerMove(x, y, snap = "off", shift2 = false) {
+  pointerMove(x, y, snap = "off", shift2 = false, mod = false) {
     if (this.eraserMode) {
       if (this.erasing) this.deleteAt(x, y);
       return;
@@ -32379,12 +32678,14 @@ var UserDrawingController = class {
       return;
     }
     this.interaction.move(x, y, snap, shift2);
-    this.updateHover(x, y);
+    this.updateHover(x, y, mod);
   }
-  /** Track which drawing is hovered so its handles appear on hover (and only then). */
-  updateHover(x, y) {
+  /** Track which drawing is hovered so its handles appear on hover (and only then). While
+   *  Ctrl/Cmd is held the cursor is picking a selection — handles then mark only what IS
+   *  selected, so a hovered candidate doesn't already read as selected. */
+  updateHover(x, y, mod = false) {
     let id = null;
-    if (this.activeTool == null && !this.interaction.isPlacing() && !this.interaction.isDragging()) {
+    if (!mod && this.activeTool == null && !this.interaction.isPlacing() && !this.interaction.isDragging()) {
       id = topDrawingAt(this.drawings, x, y, this.deps.projector(), HIT_TOLERANCE)?.id ?? null;
     }
     if (id !== this.hoveredId) {
@@ -32404,7 +32705,12 @@ var UserDrawingController = class {
       this.render();
       return;
     }
+    const dragged = this.interaction.isDragging() ? this.interaction.pressedId() : null;
     this.interaction.up(x, y);
+    if (dragged && this.selectedIds.has(dragged) && !this.popup.isOpen()) {
+      if (this.selectedIds.size >= 2) this.openSettingsForSelection(this.selectionIds());
+      else this.openSettingsById(dragged, x, y);
+    }
   }
   /** Toggle the transient ruler. Arming it clears any drawing tool + selection. */
   toggleMeasure() {
@@ -32669,7 +32975,7 @@ var UserDrawingController = class {
         this.emit({ kind: "duplicate", ids: this.selectionIds() });
         break;
       case "delete": {
-        const ids = this.selectedIds.size ? this.selectionIds() : this.hoveredId ? [this.hoveredId] : [];
+        const ids = this.selectedIds.size ? this.deletableSelection() : this.hoveredId ? [this.hoveredId] : [];
         if (ids.length) {
           this.popup.close();
           this.emit({ kind: "delete", ids });
@@ -32685,6 +32991,9 @@ var UserDrawingController = class {
   selectionIds() {
     return [...this.selectedIds];
   }
+  deletableSelection() {
+    return deletableSelection(this.selectedIds, this.drawings);
+  }
   /** Move every selected (unlocked) drawing by a pixel delta — one edit/edit-many → one undo step. */
   nudgeSelection(dx, dy) {
     const proj = this.deps.projector();
@@ -32793,6 +33102,8 @@ var UserDrawingController = class {
     this.painter.seriesLook = this.deps.seriesLook();
     this.painter.paintAll(ctx, this.drawings.filter((d) => !this.isInterleaved(d)), proj, this.deps.theme(), targets);
     this.painter.paintHighlights(ctx, this.drawings.filter((d) => this.isInterleaved(d)), proj, handleIdsFor(targets));
+    const clones = this.interaction.dragClones();
+    if (clones) this.painter.paintAll(ctx, clones, proj, this.deps.theme(), { selected: new Set(clones.map((c) => c.id)) });
     this.layoutTextEditor();
     const ghost = this.interaction.ghost();
     if (ghost) this.painter.paintGhost(ctx, ghost, proj, this.deps.theme());
@@ -32808,6 +33119,8 @@ var UserDrawingController = class {
     const my = m ? proj.yOf(m.point.price, m.paneId) : null;
     if (m && my != null) this.painter.paintSnapRing(ctx, proj.xOf(m.point.time), my, this.deps.theme());
     if (this.measure.isActive()) this.measure.paint(ctx, proj, this.deps.theme());
+    const marquee = this.interaction.marqueeRect();
+    if (marquee) this.painter.paintMarquee(ctx, marquee);
   }
   destroy() {
     this.closeTextEditor();
@@ -32825,15 +33138,80 @@ var UserDrawingController = class {
     if (this.selectedIds.size) this.emit({ kind: "select", ids: [] });
     this.render();
   }
+  /** Report the live drawings' current state as one edit (one undo step, however many). */
+  emitEdits(drawings) {
+    const docs = drawings.map((d) => d.serialize());
+    if (docs.length === 1) this.emit({ kind: "edit", doc: docs[0] });
+    else if (docs.length > 1) this.emit({ kind: "edit-many", docs });
+  }
+  /** The one bar for a multi-selection: it shows the controls all of its drawings share and
+   *  every action applies to all of them. Floats clear of their combined bounds. */
+  openSettingsForSelection(ids) {
+    const live = () => ids.map((id) => this.drawings.find((d) => d.id === id)).filter((d) => d != null);
+    const drawings = live();
+    if (drawings.length < 2) return;
+    const proj = this.deps.projector();
+    let anchor = null;
+    for (const d of drawings) {
+      const b = d.bounds(proj);
+      if (!b) continue;
+      if (!anchor) anchor = { ...b };
+      else {
+        const right = Math.max(anchor.x + anchor.w, b.x + b.w);
+        const bottom = Math.max(anchor.y + anchor.h, b.y + b.h);
+        anchor.x = Math.min(anchor.x, b.x);
+        anchor.y = Math.min(anchor.y, b.y);
+        anchor.w = right - anchor.x;
+        anchor.h = bottom - anchor.y;
+      }
+    }
+    this.popupMulti = true;
+    this.emit({ kind: "settings", id: drawings[0].id });
+    this.popup.open(drawings, anchor, {
+      resolve: () => live()[0] ?? null,
+      patch: (p) => {
+        const ds = live();
+        for (const d of ds) d.applySettings(p);
+        this.render();
+        this.emitEdits(ds);
+      },
+      setLocked: (v) => {
+        const ds = live();
+        for (const d of ds) d.locked = v;
+        this.emitEdits(ds);
+      },
+      reorder: (to) => {
+        for (const d of live()) this.emit({ kind: "reorder", id: d.id, to });
+      },
+      duplicate: () => {
+        this.popup.close();
+        this.emit({ kind: "duplicate", ids: live().map((d) => d.id) });
+      },
+      resetSettings: () => {
+        const ds = live();
+        for (const d of ds) resetDrawingSettings(d);
+        this.render();
+        this.emitEdits(ds);
+        this.openSettingsForSelection(ids);
+      },
+      remove: () => {
+        const ids2 = live().filter((d) => !d.locked).map((d) => d.id);
+        if (ids2.length === 0) return;
+        this.popup.close();
+        this.emit({ kind: "delete", ids: ids2 });
+      }
+    }, this.onPopupDismissed);
+  }
   /** A click on a drawing opens its settings toolbar (text labels edit text here too). */
   openSettingsById(id, _x, _y) {
     const drawing = this.drawings.find((d) => d.id === id);
     if (!drawing) return;
     const live = () => this.drawings.find((d) => d.id === id);
+    this.popupMulti = false;
     this.emit({ kind: "select", ids: [id] });
     this.emit({ kind: "settings", id });
     const anchor = drawing.bounds(this.deps.projector());
-    this.popup.open(drawing, anchor, {
+    this.popup.open([drawing], anchor, {
       // Sync rebuilds instances, so a panel that reads values back after a patch (e.g. the
       // position tool's price fields, where one edit can flip another level) resolves fresh.
       resolve: () => live() ?? null,
@@ -32851,6 +33229,11 @@ var UserDrawingController = class {
         this.emit({ kind: "edit", doc: d.serialize() });
       },
       reorder: (to) => this.emit({ kind: "reorder", id, to }),
+      duplicate: () => {
+        this.finishTextEditor(true);
+        this.popup.close();
+        this.emit({ kind: "duplicate", ids: [id] });
+      },
       resetSettings: () => {
         const d = live();
         if (!d) return;
@@ -32873,7 +33256,13 @@ var UserDrawingController = class {
         this.popup.close();
         this.emit({ kind: "delete", ids: [id] });
       }
-    }, () => this.clearSelection());
+    }, this.onPopupDismissed);
+  }
+  /** A plain click on the empty plot: drop the selection. The popup's dismiss-on-outside-press
+   *  does the same, but a selection can exist with no bar open (a lone Ctrl-click pick, a
+   *  selection whose bar was dismissed by a modifier press) — this covers those. */
+  deselect() {
+    this.clearSelection();
   }
   /** Report placement progress upstream (`draft` intent) so the drawings sync can
    *  mirror the ghost live on linked charts. Called from every render; only actual
@@ -32899,6 +33288,13 @@ var UserDrawingController = class {
       }, 0);
       return;
     }
+    if (i.kind === "clone") {
+      const before = new Set(this.drawings.map((d) => d.id));
+      this.intentCb?.(i);
+      const fresh = this.drawings.filter((d) => !before.has(d.id));
+      if (fresh.length === 1) this.openSettingsById(fresh[0].id, 0, 0);
+      return;
+    }
     this.intentCb?.(i);
   }
 };
@@ -35074,7 +35470,10 @@ var NativeRenderer = class {
       zoomTo: (target, anchorLogical, anchorX) => this.zoomTo(target, anchorLogical, anchorX),
       fling: (v) => this.fling(v),
       onPointerMove: (x, y) => this.handlePointerMove(x, y),
-      onClick: (x) => this.handleClick(x),
+      onClick: (x) => {
+        this.userDrawings?.deselect();
+        this.handleClick(x);
+      },
       onAxisLongPress: (axis, x, y) => {
         for (const cb of this.axisLongPressCbs) cb({ axis, x, y });
       },
@@ -35092,11 +35491,13 @@ var NativeRenderer = class {
       // User drawings claim a gesture before pan when armed / over a drawing.
       drawingsClaim: (x, y) => this.userDrawings?.claim(x, y) ?? false,
       drawingsMeasureStart: (x, y, snap) => this.userDrawings?.beginMeasureAt(x, y, snap) ?? false,
-      drawingsDeleteAt: (x, y) => this.userDrawings?.deleteAt(x, y) ?? false,
+      drawingsMarqueeStart: (x, y) => this.userDrawings?.beginMarqueeAt(x, y) ?? false,
+      drawingsDeleteAt: (x, y) => this.userDrawings?.deleteAt(x, y, true) ?? false,
+      // middle-click: a selected hit takes the whole selection
       drawingsCancelPlacement: () => this.userDrawings?.cancelPlacement() ?? false,
       drawingsSnapMode: () => this.snapMode,
-      drawingsPointerDown: (x, y, snap, shift2) => this.userDrawings?.pointerDown(x, y, snap, shift2),
-      drawingsPointerMove: (x, y, snap, shift2) => this.userDrawings?.pointerMove(x, y, snap, shift2),
+      drawingsPointerDown: (x, y, snap, shift2, mod) => this.userDrawings?.pointerDown(x, y, snap, shift2, mod),
+      drawingsPointerMove: (x, y, snap, shift2, mod) => this.userDrawings?.pointerMove(x, y, snap, shift2, mod),
       drawingsPointerUp: (x, y, snap) => this.userDrawings?.pointerUp(x, y, snap),
       drawingsCursor: (x, y) => this.userDrawings?.cursorAt(x, y) ?? null,
       drawingsDblClick: (x, y) => this.userDrawings?.dblClick(x, y) ?? false,
@@ -37430,6 +37831,10 @@ function str3(inputs, key, fallback) {
   const v = inputs[key];
   return typeof v === "string" && v !== "" ? v : fallback;
 }
+function bool(inputs, key, fallback) {
+  const v = inputs[key];
+  return typeof v === "boolean" ? v : fallback;
+}
 function toPoints(bars, values, colors) {
   const pts = new Array(bars.length);
   for (let i = 0; i < bars.length; i++) {
@@ -38961,10 +39366,6 @@ var aroon = {
       plots: [
         { key: "up", title: "Aroon up", values: up, color: BULLISH, width: 2 },
         { key: "down", title: "Aroon down", values: down, color: BEARISH, width: 2 }
-      ],
-      levels: [
-        { key: "upper", price: 100, color: NEUTRAL, lineStyle: "dotted" },
-        { key: "lower", price: 0, color: NEUTRAL, lineStyle: "dotted" }
       ]
     };
   }
@@ -39462,8 +39863,10 @@ var volumeSpecs = [
 var DAY_MS2 = 864e5;
 function periodKey(anchor, time) {
   if (anchor === "Week") return Math.floor((Math.floor(time / DAY_MS2) + 3) / 7);
-  if (anchor === "Month") {
+  if (anchor === "Month" || anchor === "Quarter" || anchor === "Year") {
     const d = new Date(time);
+    if (anchor === "Year") return d.getUTCFullYear();
+    if (anchor === "Quarter") return d.getUTCFullYear() * 4 + Math.floor(d.getUTCMonth() / 3);
     return d.getUTCFullYear() * 12 + d.getUTCMonth();
   }
   return Math.floor(time / DAY_MS2);
@@ -39515,40 +39918,86 @@ var parabolicSar = {
     return { plots: [{ key: "sar", title: "PSAR", values, kind: "circles", color: SERIES_LINE, colors }] };
   }
 };
+var VWAP_BANDS_GROUP = "Bands";
+var VWAP_STYLE = "Style";
+var VWAP_BANDS = [
+  { on: "band1", mult: "band1Mult", color: "band1Color", fill: "band1Fill", fillColor: "band1FillColor", defMult: 1, defOn: true, defColor: BULLISH },
+  { on: "band2", mult: "band2Mult", color: "band2Color", fill: "band2Fill", fillColor: "band2FillColor", defMult: 2, defOn: false, defColor: WARNING },
+  { on: "band3", mult: "band3Mult", color: "band3Color", fill: "band3Fill", fillColor: "band3FillColor", defMult: 3, defOn: false, defColor: CATEGORICAL[4] }
+];
 var vwap = {
   type: "vwap",
   title: "Volume Weighted Average Price",
   shortTitle: "VWAP",
   overlay: true,
   inputs: [
-    { key: "anchor", title: "Anchor", type: "string", defval: "Day", options: ["Day", "Week", "Month"], tooltip: "Where the accumulation resets (UTC periods)" },
-    { key: "source", title: "Source", type: "string", defval: "HLC3", options: ["HLC3", "OHLC4", "Close"] },
-    colorInput(INFO)
+    { key: "anchor", title: "Period", type: "string", defval: "Day", options: ["Day", "Week", "Month", "Quarter", "Year"], tooltip: "Where the accumulation resets (UTC periods)" },
+    sourceInput("HLC3"),
+    // Each band is one row: its toggle leads, the multiplier follows unlabeled.
+    ...VWAP_BANDS.flatMap((b, i) => [
+      { key: b.on, title: `Band ${i + 1} multiplier`, type: "bool", defval: b.defOn, inline: b.on, group: VWAP_BANDS_GROUP },
+      { key: b.mult, title: "", type: "float", defval: b.defMult, min: 0.1, max: 10, step: 0.1, inline: b.on, group: VWAP_BANDS_GROUP }
+    ]),
+    { ...colorInput(INFO, "VWAP color"), group: VWAP_STYLE },
+    // One row per band: its ink, then the fill toggle with the fill's own (translucent) color.
+    ...VWAP_BANDS.flatMap((b, i) => [
+      { ...colorInput(b.defColor, `Band ${i + 1} color`, b.color), inline: b.color, group: VWAP_STYLE },
+      { key: b.fill, title: "Fill", type: "bool", defval: true, inline: b.color, group: VWAP_STYLE },
+      { ...colorInput(withAlpha2(b.defColor), "", b.fillColor), inline: b.color, group: VWAP_STYLE }
+    ])
   ],
   compute: (bars, inputs) => {
     const anchor = str3(inputs, "anchor", "Day");
-    const source = str3(inputs, "source", "HLC3");
-    const values = new Array(bars.length).fill(Number.NaN);
+    const src = sourceValues(bars, str3(inputs, "source", "HLC3"));
+    const n = bars.length;
+    const values = new Array(n).fill(Number.NaN);
+    const bands = VWAP_BANDS.filter((b) => bool(inputs, b.on, b.defOn)).map((b) => ({
+      mult: Math.max(0, num3(inputs, b.mult, b.defMult)),
+      color: str3(inputs, b.color, b.defColor),
+      fill: bool(inputs, b.fill, true),
+      fillColor: str3(inputs, b.fillColor, withAlpha2(b.defColor)),
+      up: new Array(n).fill(Number.NaN),
+      down: new Array(n).fill(Number.NaN)
+    }));
     let period = Number.NaN;
     let cumPV = 0;
+    let cumPV2 = 0;
     let cumV = 0;
-    for (let i = 0; i < bars.length; i++) {
+    for (let i = 0; i < n; i++) {
       const b = bars[i];
       const key = periodKey(anchor, b.time);
       if (key !== period) {
         period = key;
         cumPV = 0;
+        cumPV2 = 0;
         cumV = 0;
       }
       const v = b.volume;
       if (v != null && Number.isFinite(v) && v > 0) {
-        const tp = source === "Close" ? b.close : source === "OHLC4" ? (b.open + b.high + b.low + b.close) / 4 : (b.high + b.low + b.close) / 3;
+        const tp = src[i];
         cumPV += tp * v;
+        cumPV2 += tp * tp * v;
         cumV += v;
       }
-      if (cumV > 0) values[i] = cumPV / cumV;
-    }
-    return { plots: [{ key: "vwap", title: "VWAP", values, color: str3(inputs, "color", INFO), width: 2 }] };
+      if (cumV <= 0) continue;
+      const mean = cumPV / cumV;
+      const sd = Math.sqrt(Math.max(0, cumPV2 / cumV - mean * mean));
+      values[i] = mean;
+      for (const band of bands) {
+        band.up[i] = mean + band.mult * sd;
+        band.down[i] = mean - band.mult * sd;
+      }
+    }
+    const plots = [{ key: "vwap", title: "VWAP", values, color: str3(inputs, "color", INFO), width: 2 }];
+    const fills = [];
+    bands.forEach((band, i) => {
+      plots.push(
+        { key: `up${i}`, title: `Upper ${band.mult}\u03C3`, values: band.up, color: band.color },
+        { key: `down${i}`, title: `Lower ${band.mult}\u03C3`, values: band.down, color: band.color }
+      );
+      if (band.fill) fills.push({ key: `band${i}`, from: `up${i}`, to: `down${i}`, color: band.fillColor });
+    });
+    return { plots, bands: fills };
   }
 };
 var pivotPoints = {
@@ -40062,6 +40511,24 @@ function resolveElement(container) {
 function segmentVisibility(parts, chartHidden = false) {
   return { avatar: parts.logo, symbol: parts.name, meta: parts.name, market: parts.market, ohlc: parts.ohlc && !chartHidden, change: parts.change && !chartHidden, eye: chartHidden };
 }
+var STATUSLINE_LADDER = [
+  { stacked: false, level: "full" },
+  { stacked: true, level: "full" },
+  { stacked: true, level: "compact" },
+  { stacked: true, level: "minimal" }
+];
+function readoutCells(level, readout) {
+  if (readout === "value") return [{ key: "close", label: "" }];
+  if (level === "full") {
+    return [
+      { key: "open", label: "O" },
+      { key: "high", label: "H" },
+      { key: "low", label: "L" },
+      { key: "close", label: "C" }
+    ];
+  }
+  return [{ key: "close", label: level === "compact" ? "C" : "" }];
+}
 function statuslineMenuItems(parts, chartVisible) {
   return [
     { id: "part:logo", label: "Symbol logo", checked: parts.logo },
@@ -40090,6 +40557,11 @@ function fmtChange(open2, close) {
   const sign = diff >= 0 ? "+" : "";
   return `${sign}${fmtPrice(diff, decimalsFor(close))} (${sign}${pct.toFixed(2)}%)`;
 }
+function fmtChangePct(open2, close) {
+  if (open2 == null || close == null || !Number.isFinite(open2) || !Number.isFinite(close) || open2 === 0) return "";
+  const pct = (close - open2) / open2 * 100;
+  return `${pct >= 0 ? "+" : ""}${pct.toFixed(2)}%`;
+}
 
 // src/widget/statusline.ts
 var STYLE_ID24 = "vela-widget-statusline";
@@ -40106,6 +40578,11 @@ var CSS21 = `
     display: flex;
     align-items: baseline;
     gap: var(--vela-space-2);
+    /* The chip never grows past the plot: fit() measures overflow against this width to
+     * walk the layout ladder (stack, then shed values), so overflow:hidden only guards
+     * the transient between a resize and the next measure. */
+    max-width: calc(100% - var(--vela-toolbar-gutter, 0px) - var(--vela-scale-gutter, 0px) - 24px);
+    overflow: hidden;
     color: var(--vela-fg);
     font-size: var(--vela-font-size-md);
     /* Same chip treatment as the indicator legend rows (InputsUI): a translucent wash of
@@ -40127,6 +40604,31 @@ var CSS21 = `
 /* Chart hidden (the price series' eye \u2014 renderer 'candleVisible'): the line dims to
  * the same 0.5 wash a hidden indicator's legend row wears. */
 .vela-statusline.vela-sl-chart-hidden { opacity: 0.5; }
+/* Two rows inside the chip \u2014 the identity (logo / symbol / meta / market badge) and the
+ * value readout (O/H/L/C + change, or the show-chart eye). In the widest layout they sit
+ * side by side on one line; the STACKED layouts (fit() decides, see the ladder in
+ * statusline-model) turn the chip into a column so the values drop under the symbol. */
+.vela-statusline .vela-sl-row {
+    display: flex;
+    align-items: baseline;
+    gap: var(--vela-space-2);
+    white-space: nowrap;
+}
+.vela-statusline.vela-sl-stacked {
+    flex-direction: column;
+    align-items: flex-start;
+    /* The same air between the two rows as between the values row and the legend row
+     * that follows the chip (see the stacked legend shift below). */
+    row-gap: var(--vela-space-1);
+}
+/* Stacked, the identity row may shrink (the meta carries the ellipsis) \u2014 the values row
+ * never does, so its overflow is what fit() measures to keep descending the ladder. */
+.vela-statusline.vela-sl-stacked .vela-sl-identity { max-width: 100%; }
+.vela-statusline.vela-sl-stacked .vela-sl-meta {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
 .vela-statusline .vela-sl-avatar {
     width: 18px;
     height: 18px;
@@ -40178,59 +40680,13 @@ var CSS21 = `
  * stylesheet is document-global, so a bare attribute selector here would shift every
  * chart on the page, including statusline-less ones. */
 .vela-has-statusline [${LEGEND_AT_TOP_ATTR}] { transform: translateY(26px); }
-/* Mobile: two-line chip \u2014 logo / symbol / meta / market status on one aligned row, the
- * bar change on the next. Full O/H/L/C stays hidden (too dense on a phone-width plot).
- * GRID, not a wrapping flexbox: an absolutely positioned wrapping flex container sizes
- * to the one-line sum of ALL segments (max-content), so its background used to stretch
- * far past the market badge; a grid hugs the widest actual row. The meta column may
- * shrink (it carries the ellipsis), the others wrap their content. */
-[data-layout='mobile'] .vela-statusline {
-    display: grid;
-    grid-template-columns: auto auto minmax(0, auto) auto;
-    justify-content: start;
-    align-items: center;
-    row-gap: 1px;
-    max-width: calc(100% - var(--vela-toolbar-gutter, 0px) - var(--vela-scale-gutter, 0px) - 24px);
-    font-size: var(--vela-font-size-sm);
-}
-[data-layout='mobile'] .vela-statusline .vela-sl-symbol {
-    font-size: var(--vela-font-size-md);
-    line-height: 1;
-}
-[data-layout='mobile'] .vela-statusline .vela-sl-meta {
-    min-width: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    line-height: 1;
-}
-[data-layout='mobile'] .vela-statusline .vela-sl-avatar,
-[data-layout='mobile'] .vela-statusline .vela-sl-market { align-self: center; }
-[data-layout='mobile'] .vela-statusline .vela-sl-ohlc { display: none !important; }
-[data-layout='mobile'] .vela-statusline .vela-sl-change {
-    /* Second row, under the text column \u2014 the avatar keeps the first column. */
-    grid-column: 2 / -1;
-    font-size: var(--vela-font-size-sm);
-    line-height: 1.2;
-}
-[data-layout='mobile'] .vela-has-statusline [${LEGEND_AT_TOP_ATTR}] { transform: translateY(40px); }
-/* FIT mode (multi-chart cells \u2014 see setFitMode): the line never wraps; segments that
- * don't fit are HIDDEN by fit() (change first, then meta, then the market badge), so
- * overflow:hidden only guards the transient between a resize and the next measure.
- * Placed after the mobile block on purpose: same specificity, later wins. */
-.vela-statusline.vela-sl-fit {
-    display: flex; /* undo the mobile grid \u2014 fit mode is one flex row again */
-    flex-wrap: nowrap;
-    align-items: center;
-    max-width: calc(100% - var(--vela-toolbar-gutter, 0px) - var(--vela-scale-gutter, 0px) - 24px);
-    overflow: hidden;
-}
-.vela-statusline.vela-sl-fit .vela-sl-change {
-    flex-basis: auto;
-    padding-left: 0;
-}
-/* One row again \u2014 the mobile two-line shift doesn't apply in fit mode. */
-[data-layout='mobile'] .vela-sl-fit-host.vela-has-statusline [${LEGEND_AT_TOP_ATTR}] { transform: translateY(26px); }
+/* A stacked chip is two lines tall \u2014 the legend shifts one more line. fit() flags the
+ * host whenever the ladder lands on a stacked layout. */
+.vela-has-statusline.vela-sl-stacked-host [${LEGEND_AT_TOP_ATTR}] { transform: translateY(40px); }
+/* Mobile: the same ladder at the phone's type scale \u2014 the width alone decides how much
+ * of the readout fits, exactly as on a narrow desktop chart. */
+[data-layout='mobile'] .vela-statusline { font-size: var(--vela-font-size-sm); }
+[data-layout='mobile'] .vela-statusline .vela-sl-symbol { font-size: var(--vela-font-size-md); }
 `;
 function baseOfTicker(ticker) {
   return ticker.replace(/[-_/]?(USDT|USDC|USD1|USDS|BUSD|USD|EUR|PERP)$/i, "") || ticker;
@@ -40301,6 +40757,8 @@ var Statusline = class {
     /** Fit mode (multi-chart cells): one row, overflowing segments hidden — see {@link setFitMode}. */
     this.fitMode = false;
     this.fitRO = null;
+    /** The ladder rung currently applied — see {@link fit}. */
+    this.layout = { stacked: false, level: "full" };
     this.onContextMenu = (e) => {
       if (!this.menu || !this.menuHooks) return;
       e.preventDefault();
@@ -40347,8 +40805,18 @@ var Statusline = class {
       this.menuHooks?.setChartVisible(true);
       this.setChartHidden(false);
     });
-    this.el.append(this.avatarEl, this.symbolEl, this.metaEl, this.marketEl, this.ohlcEl, this.changeEl, this.eyeEl);
+    this.identityRow = doc.createElement("span");
+    this.identityRow.className = "vela-sl-row vela-sl-identity";
+    this.identityRow.append(this.avatarEl, this.symbolEl, this.metaEl, this.marketEl);
+    this.valuesRow = doc.createElement("span");
+    this.valuesRow.className = "vela-sl-row vela-sl-values";
+    this.valuesRow.append(this.ohlcEl, this.changeEl, this.eyeEl);
+    this.el.append(this.identityRow, this.valuesRow);
     host.appendChild(this.el);
+    if (typeof ResizeObserver !== "undefined") {
+      this.fitRO = new ResizeObserver(() => this.fit());
+      this.fitRO.observe(host);
+    }
     this.marketTip = new Tooltip(this.marketEl, { content: MARKET_LABELS.open, placement: "bottom" });
     this.eyeTip = new Tooltip(this.eyeEl, { content: "Show chart", placement: "bottom" });
     this.setMarketStatus("open");
@@ -40364,27 +40832,15 @@ var Statusline = class {
     this.fit();
   }
   /**
-   * Multi-chart cells: keep the line on ONE row whatever the cell width — never wrap.
-   * Segments that don't fit are hidden outright rather than clipped mid-glyph, least
-   * important first: OHLC, then the bar change, the venue/timeframe meta, and the
-   * market badge; the logo + ticker always stay. Re-fits live on host resizes.
+   * Multi-chart cells: the same width ladder as a single chart, plus a last resort for
+   * cells too narrow for even its bottom rung — whatever still overflows is hidden
+   * outright rather than clipped mid-glyph, least important first: the values, the
+   * venue/timeframe meta, then the market badge; the logo + ticker always stay.
    */
   setFitMode(on) {
     if (on === this.fitMode) return;
     this.fitMode = on;
-    this.el.classList.toggle("vela-sl-fit", on);
-    this.host.classList.toggle("vela-sl-fit-host", on);
-    if (on) {
-      if (typeof ResizeObserver !== "undefined" && !this.fitRO) {
-        this.fitRO = new ResizeObserver(() => this.fit());
-        this.fitRO.observe(this.host);
-      }
-      this.fit();
-    } else {
-      this.fitRO?.disconnect();
-      this.fitRO = null;
-      this.syncParts();
-    }
+    this.fit();
   }
   /** Project the parts config onto the segments (the baseline fit() prunes from). */
   syncParts() {
@@ -40396,22 +40852,42 @@ var Statusline = class {
     this.ohlcEl.style.display = seg.ohlc ? "" : "none";
     this.changeEl.style.display = seg.change ? "" : "none";
     this.eyeEl.style.display = seg.eye ? "inline-flex" : "none";
+    this.valuesRow.style.display = seg.ohlc || seg.change || seg.eye ? "" : "none";
+  }
+  /** Apply one ladder rung: the stacked/inline shape and the readout's level. */
+  applyLayout(layout) {
+    this.layout = layout;
+    this.el.classList.toggle("vela-sl-stacked", layout.stacked);
+    this.host.classList.toggle("vela-sl-stacked-host", layout.stacked);
+    this.renderValues();
   }
-  /** Hide overflowing segments until the row fits its max-width (fit mode only). */
+  /**
+   * Walk the width ladder (see {@link STATUSLINE_LADDER}) until the chip fits its
+   * max-width: the full one-line readout, then the values stacked under the symbol
+   * line, then O/H/L shed, then the absolute change. In fit mode, when the last rung
+   * still overflows, whole segments hide, least important first. Without layout
+   * (detached host, node tests) nothing overflows, so the widest rung stays.
+   */
   fit() {
-    if (!this.fitMode) return;
     this.syncParts();
     const seg = segmentVisibility(this.parts, this.chartHidden);
+    const overflows = () => this.el.scrollWidth > this.el.clientWidth;
+    const hasValues = seg.ohlc || seg.change;
+    for (const rung of STATUSLINE_LADDER) {
+      this.applyLayout(rung);
+      if (!hasValues || !overflows()) break;
+    }
+    if (!this.fitMode) return;
     const order = [
-      [this.ohlcEl, seg.ohlc],
-      [this.changeEl, seg.change],
+      [this.valuesRow, hasValues],
       [this.metaEl, seg.meta],
       [this.marketEl, seg.market]
     ];
     for (const [el, shown] of order) {
-      if (this.el.scrollWidth <= this.el.clientWidth) break;
+      if (!overflows()) break;
       if (shown) el.style.display = "none";
     }
+    if (this.valuesRow.style.display === "none") this.applyLayout({ ...this.layout, stacked: false });
   }
   /** Shape + color the value readout after the active price style: its own up/down
    *  colors (candle bodies, bar ticks, the line color, …), the direction rule that
@@ -40524,7 +41000,7 @@ var Statusline = class {
     this.marketTip.destroy();
     this.eyeTip.destroy();
     this.marketBubble.destroy();
-    this.host.classList.remove("vela-has-statusline", "vela-sl-fit-host");
+    this.host.classList.remove("vela-has-statusline", "vela-sl-stacked-host");
     this.el.remove();
   }
   detach() {
@@ -40533,6 +41009,10 @@ var Statusline = class {
   }
   render() {
     if (this.menuHooks) this.setChartHidden(!this.menuHooks.chartVisible());
+    this.fit();
+  }
+  /** Write the value readout for the current bar at the current ladder level. */
+  renderValues() {
     const bar = this.hoverBar ?? this.lastBar;
     if (!bar) {
       this.ohlcEl.replaceChildren();
@@ -40552,12 +41032,11 @@ var Statusline = class {
       s.appendChild(b);
       return s;
     };
-    if (this.readout === "value") this.ohlcEl.replaceChildren(cell("", bar.close));
-    else this.ohlcEl.replaceChildren(cell("O", bar.open), cell("H", bar.high), cell("L", bar.low), cell("C", bar.close));
-    this.changeEl.textContent = fmtChange(bar.open, bar.close);
+    const { level } = this.layout;
+    this.ohlcEl.replaceChildren(...readoutCells(level, this.readout).map((c) => cell(c.label, bar[c.key])));
+    this.changeEl.textContent = level === "minimal" ? fmtChangePct(bar.open, bar.close) : fmtChange(bar.open, bar.close);
     this.changeEl.dataset.dir = up ? "up" : "down";
     this.changeEl.style.color = ink;
-    this.fit();
   }
 };
 
@@ -42691,6 +43170,17 @@ function nextAutoCellId(taken) {
     if (!taken.has(`c${i}`)) return `c${i}`;
   }
 }
+function resolveTyping(key, open2) {
+  if (open2.dialogs > 0) {
+    if (key.length !== 1) return null;
+    if (open2.symbolSearch) return { target: "symbol", text: key.toUpperCase() };
+    if (open2.timeframeEntry) return { target: "timeframe", text: key };
+    return null;
+  }
+  if (/^[a-zA-Z]$/.test(key)) return { target: "symbol", text: key.toUpperCase() };
+  if (/^[0-9]$/.test(key)) return { target: "timeframe", text: key };
+  return null;
+}
 var VelaWorkspace = class {
   constructor(container, opts = {}) {
     this.events = new TypedEventBus();
@@ -44324,17 +44814,14 @@ var VelaWorkspace = class {
   }
   /** Bare-typing router: letters → symbol search (seeded), digits → timeframe entry. */
   routeTyping(ev) {
-    if (this.destroyed || this.openDialogs > 0) return;
+    if (this.destroyed) return;
     if (ev.ctrlKey || ev.metaKey || ev.altKey) return;
     if (isEditableTarget(ev)) return;
-    const key = ev.key;
-    if (/^[a-zA-Z]$/.test(key)) {
-      ev.preventDefault();
-      this.symbolPicker.open(key.toUpperCase());
-    } else if (/^[0-9]$/.test(key)) {
-      ev.preventDefault();
-      this.tfQuick.open(key);
-    }
+    const hit = resolveTyping(ev.key, { dialogs: this.openDialogs, symbolSearch: this.symbolPicker.isOpen, timeframeEntry: this.tfQuick.isOpen });
+    if (!hit) return;
+    ev.preventDefault();
+    if (hit.target === "symbol") this.symbolPicker.type(hit.text);
+    else this.tfQuick.type(hit.text);
   }
   trackDialog(open2) {
     this.openDialogs = Math.max(0, this.openDialogs + (open2 ? 1 : -1));