@luxalgo/vela 0.5.0 → 0.5.1

package/dist/workspace.js

@@ -1,10 +1,10 @@
-import { WidgetHistory, prefixedSymbol, Watermark, Statusline, ChartContextMenu, statuslineInkOf, indicatorLedger, Glider, localStorageAdapter, decodeState, SymbolPicker, IndicatorPicker, TimeframeQuick, Topbar, PanelDock, ObjectTree, DataWindow, Toast, Bottombar, toolShortcutHints, resolveIndicators, sanitizeState, encodeState, ZOOM_IN, ZOOM_OUT, PAN_FAST, ShortcutsHelp } from './chunk-OVQKKXLZ.js';
-export { decodeState, encodeState, sanitizeState } from './chunk-OVQKKXLZ.js';
-import { parseSymbol, Vela, normalizeTimezone, TypedEventBus, MultiProviderFeed, resolveTheme, createCustomMark, createAttributionMark, DrawingToolbar, defaultToolbar, applyAttributionMarkTheme, sharedBarStore, timeframeToMs } from './chunk-KCCZNKH7.js';
-import { resolveEngines, legendActionsProviderFor, rendererDefaults, widgetAttachments } from './chunk-7UFX5ZIG.js';
-import { applyPlotOverlayTokens, ensureUIHost, KeymapManager, Menu, isEditableTarget } from './chunk-RHIDOUFL.js';
-import './chunk-KM6LHB3Y.js';
-import { registerIcon, svg16, injectStyles } from './chunk-GYD2THPV.js';
+import { WidgetHistory, prefixedSymbol, Watermark, Statusline, ChartContextMenu, statuslineInkOf, indicatorLedger, Glider, localStorageAdapter, decodeState, SymbolPicker, IndicatorPicker, TimeframeQuick, Topbar, PanelDock, ObjectTree, DataWindow, Toast, Bottombar, toolShortcutHints, resolveIndicators, sanitizeState, encodeState, ZOOM_IN, ZOOM_OUT, PAN_FAST, ShortcutsHelp } from './chunk-5SE4PL3H.js';
+export { decodeState, encodeState, sanitizeState } from './chunk-5SE4PL3H.js';
+import { parseSymbol, Vela, normalizeTimezone, TypedEventBus, MultiProviderFeed, resolveTheme, createCustomMark, createAttributionMark, DrawingToolbar, defaultToolbar, applyAttributionMarkTheme, sharedBarStore, timeframeToMs } from './chunk-FNOMKHEZ.js';
+import { resolveEngines, legendActionsProviderFor, rendererDefaults, widgetAttachments } from './chunk-S6F6SQ2L.js';
+import { applyPlotOverlayTokens, ensureUIHost, KeymapManager, Menu, isEditableTarget } from './chunk-AIW3EJUE.js';
+import './chunk-ULIX6AE2.js';
+import { registerIcon, svg16, injectStyles } from './chunk-EP6NDJYK.js';
 
 // src/workspace/sync.ts
 function syncTargets(originId, setting, cellIds) {
@@ -598,6 +598,49 @@ function registerBuiltinLayouts() {
   registerLayout({ id: "4", label: "4 grid", cols: [1, 1], rows: [1, 1], cells: slots(4) });
   registerLayout({ id: "8", label: "8 grid", cols: [1, 1, 1, 1], rows: [1, 1], cells: slots(8) });
 }
+var GRID_PICKER_MAX = 4;
+var GRID_BUILTIN_IDS = {
+  "1x1": "1",
+  "1x2": "2h",
+  "2x1": "2v",
+  "2x2": "4",
+  "2x4": "8"
+};
+var clampTrack = (n) => Math.max(1, Math.min(GRID_PICKER_MAX, Math.round(n)));
+function layoutForGrid(rows, cols) {
+  const r = clampTrack(rows);
+  const c = clampTrack(cols);
+  const builtin = GRID_BUILTIN_IDS[`${r}x${c}`];
+  const registered = builtin ? registry.get(builtin) : void 0;
+  if (registered) return registered;
+  return {
+    id: `g${r}x${c}`,
+    // Width-first label — matches the picker's caption ("3 × 2" = 3 wide, 2 tall).
+    label: `${c} \xD7 ${r} grid`,
+    cols: Array.from({ length: c }, () => 1),
+    rows: Array.from({ length: r }, () => 1),
+    cells: slots(r * c)
+  };
+}
+var GRID_ID_RE = /^g([1-4])x([1-4])$/;
+function ensureLayout(id) {
+  const registered = registry.get(id);
+  if (registered) return registered;
+  const g = GRID_ID_RE.exec(id);
+  if (g) return layoutForGrid(Number(g[1]), Number(g[2]));
+  return void 0;
+}
+function layoutShape(def) {
+  if (!def.areas && def.rows.length <= GRID_PICKER_MAX && def.cols.length <= GRID_PICKER_MAX && def.cells.length === def.rows.length * def.cols.length) {
+    return { rows: def.rows.length, cols: def.cols.length };
+  }
+  return null;
+}
+function occupancyGrid(def) {
+  if (def.areas) return def.areas.map((row) => row.trim().split(/\s+/));
+  const cols = def.cols.length;
+  return def.rows.map((_, r) => def.cols.map((_2, c) => def.cells[r * cols + c]?.id ?? `\xB7${r}x${c}`));
+}
 function gridStyles(def, trackSizes) {
   const cols = trackSizes?.cols?.length === def.cols.length ? trackSizes.cols : def.cols;
   const rows = trackSizes?.rows?.length === def.rows.length ? trackSizes.rows : def.rows;
@@ -617,6 +660,15 @@ function activeAfterLayout(current, cellIds) {
   if (current != null && cellIds.includes(current)) return current;
   return cellIds[0] ?? null;
 }
+function orderAfterLayout(order, slots2, active) {
+  const next = [...order];
+  if (active == null || slots2 <= 0) return next;
+  const idx = next.indexOf(active);
+  if (idx < 0 || idx < slots2) return next;
+  next.splice(idx, 1);
+  next.splice(slots2 - 1, 0, active);
+  return next;
+}
 
 // src/workspace/splitters.ts
 var MIN_TRACK_FRAC = 0.1;
@@ -649,6 +701,27 @@ function trackOffsets(weights, sizePx, gapPx) {
   }
   return out;
 }
+function seamSegments(grid, axis, index) {
+  const count = axis === "cols" ? grid.length : grid[0]?.length ?? 0;
+  const isSeam = (k) => axis === "cols" ? grid[k]?.[index] !== grid[k]?.[index + 1] : grid[index]?.[k] !== grid[index + 1]?.[k];
+  const out = [];
+  for (let k = 0; k < count; k += 1) {
+    if (!isSeam(k)) continue;
+    const last = out[out.length - 1];
+    if (last && last[1] === k - 1) last[1] = k;
+    else out.push([k, k]);
+  }
+  return out;
+}
+function segmentSpanPx(weights, sizePx, gapPx, from, to) {
+  const total = weights.reduce((s, w) => s + w, 0);
+  if (total <= 0) return { start: 0, end: 0 };
+  const content = sizePx - gapPx * (weights.length - 1);
+  const startOf = (k) => weights.slice(0, k).reduce((s, w) => s + w / total * content, 0) + gapPx * k;
+  const start = from === 0 ? 0 : startOf(from) - gapPx / 2;
+  const end = to === weights.length - 1 ? sizePx : startOf(to + 1) - gapPx / 2;
+  return { start, end };
+}
 var HIT_PX = 8;
 var SplitterLayer = class {
   constructor(container, deps) {
@@ -657,23 +730,36 @@ var SplitterLayer = class {
     this.strips = [];
     this.drag = null;
   }
-  /** Rebuild + reposition the strips for the current tracks/size. */
+  /** Rebuild + reposition the strips for the current tracks/size/occupancy. */
   layout() {
     const { cols, rows } = this.deps.tracks();
+    const grid = this.deps.grid();
     const rect = this.container.getBoundingClientRect();
     const gap = this.deps.gapPx();
-    const wanted = Math.max(0, cols.length - 1) + Math.max(0, rows.length - 1);
-    while (this.strips.length > wanted) this.strips.pop().remove();
-    while (this.strips.length < wanted) this.strips.push(this.makeStrip());
-    let k = 0;
+    const placements = [];
     for (const [i, x] of trackOffsets(cols, rect.width, gap).entries()) {
-      this.place(this.strips[k], "cols", i, `left:${Math.round(x - HIT_PX / 2)}px;top:0;width:${HIT_PX}px;height:100%;cursor:col-resize;`);
-      k += 1;
+      for (const [from, to] of seamSegments(grid, "cols", i)) {
+        const { start, end } = segmentSpanPx(rows, rect.height, gap, from, to);
+        placements.push({
+          axis: "cols",
+          index: i,
+          css: `left:${Math.round(x - HIT_PX / 2)}px;top:${Math.round(start)}px;width:${HIT_PX}px;height:${Math.round(end - start)}px;cursor:col-resize;`
+        });
+      }
     }
     for (const [i, y] of trackOffsets(rows, rect.height, gap).entries()) {
-      this.place(this.strips[k], "rows", i, `left:0;top:${Math.round(y - HIT_PX / 2)}px;width:100%;height:${HIT_PX}px;cursor:row-resize;`);
-      k += 1;
+      for (const [from, to] of seamSegments(grid, "rows", i)) {
+        const { start, end } = segmentSpanPx(cols, rect.width, gap, from, to);
+        placements.push({
+          axis: "rows",
+          index: i,
+          css: `left:${Math.round(start)}px;top:${Math.round(y - HIT_PX / 2)}px;width:${Math.round(end - start)}px;height:${HIT_PX}px;cursor:row-resize;`
+        });
+      }
     }
+    while (this.strips.length > placements.length) this.strips.pop().remove();
+    while (this.strips.length < placements.length) this.strips.push(this.makeStrip());
+    for (const [k, p] of placements.entries()) this.place(this.strips[k], p.axis, p.index, p.css);
   }
   destroy() {
     for (const s of this.strips.splice(0)) s.remove();
@@ -747,8 +833,10 @@ var CSS = `
 .vela-ws-grid { position: relative; flex: 1 1 auto; min-width: 0; display: grid; gap: ${GAP_PX}px; background: var(--vela-border-soft); }
 .vela-cell { background: var(--vela-bg); position: relative; }
 /* Active-cell highlight: an overlay ring ABOVE the chart's own canvas stack (a plain
-   outline on the cell is painted under them) \u2014 inert to the pointer. */
-.vela-cell[data-active='1']::after {
+   outline on the cell is painted under them) \u2014 inert to the pointer. Scoped to
+   multi-cell grids ([data-multi]): a single-cell layout always has an active cell,
+   and ringing the only chart would just be noise. */
+.vela-ws-grid[data-multi='1'] .vela-cell[data-active='1']::after {
     content: '';
     position: absolute;
     inset: 0;
@@ -756,7 +844,12 @@ var CSS = `
     pointer-events: none;
     z-index: 10;
 }
-.vela-ws-splitter:hover { background: var(--vela-accent); opacity: 0.35; }
+/* Splitter hover mirrors the in-chart pane separator hover (CrosshairRenderer):
+   a soft band over the whole grab target + a solid 2px line on the seam center. */
+.vela-ws-splitter:hover { background: var(--vela-separator-hover-band); }
+.vela-ws-splitter:hover::after { content: ''; position: absolute; background: var(--vela-separator-hover-line); }
+.vela-ws-splitter[data-axis='cols']:hover::after { left: calc(50% - 1px); top: 0; width: 2px; height: 100%; }
+.vela-ws-splitter[data-axis='rows']:hover::after { top: calc(50% - 1px); left: 0; height: 2px; width: 100%; }
 `;
 registerIcon("layout", svg16('<rect x="1.5" y="1.5" width="13" height="13" rx="1.5"/><path d="M8 1.5v13M1.5 8h13"/>'));
 function declaredOrder(cells) {
@@ -807,6 +900,15 @@ var VelaWorkspace = class {
     /** Re-entrance guard around one propagation tick: followers' synchronous echoes
      *  (their setVisibleRange re-emits viewport:changed) must not re-propagate. */
     this.syncBusy = false;
+    /** Same guard for the drawings link: the propagated mutations' own `drawing:*`
+     *  events fire synchronously inside the propagation loop and must not fan out again. */
+    this.drawingSyncBusy = false;
+    /** LINKED drawings (the drawings sync): one map per synced set (cellId → that
+     *  cell's drawing id), reachable from every member under its `cellId\0drawingId`
+     *  key — any member finds its peers to push edits/removals onto. Survives a
+     *  toggle-off (propagation freezes while the setting is off; re-enabling resumes
+     *  edit/delete for these pairs). Cleared on reload / `applyState`. */
+    this.drawingLinks = /* @__PURE__ */ new Map();
     this.manifest = [];
     /** The shared manifest can no longer change instance sets — resolved, or no
      *  `indicators` option so nothing ever will. Gates the cells' ledger fallback. */
@@ -848,10 +950,10 @@ var VelaWorkspace = class {
     this.timezone = boot?.timezone ?? opts.timezone ?? "Etc/UTC";
     if (boot?.favorites) this.favs = [...boot.favorites];
     const sync = boot?.sync ?? opts.sync;
-    for (const kind of ["viewport", "symbol", "timeframe", "crosshair"]) {
+    for (const kind of ["viewport", "symbol", "timeframe", "crosshair", "drawings"]) {
       this.applySyncSetting(kind, sync?.[kind]);
     }
-    this.def = this.resolveLayout(boot?.layout && layoutDefinition(boot.layout) ? boot.layout : opts.layout ?? "4");
+    this.def = this.resolveLayout(boot?.layout && ensureLayout(boot.layout) ? boot.layout : opts.layout ?? "4");
     if (boot?.trackSizes) for (const [id, ts] of Object.entries(boot.trackSizes)) this.trackSizes.set(id, ts);
     if (boot?.charts) for (const { id, ...cs } of boot.charts) this.pool.set(id, cs);
     this.order = boot?.charts ? boot.charts.map((c) => c.id) : declaredOrder(opts.cells);
@@ -902,14 +1004,23 @@ var VelaWorkspace = class {
       onPriceStyle: (style) => this.active.setPriceStyle(style),
       layout: {
         current: this.def.id,
-        options: () => layouts().map((l) => ({ id: l.id, label: l.label })),
-        onSelect: (id) => this.setLayout(id),
-        // Workspace-wide view toggles live under the grid presets. The check
-        // reflects the simple all-cells form; flipping OVERRIDES a host-set
-        // group record with plain on/off (groups stay an API-only shape).
-        toggles: () => [{ id: "crosshair-sync", label: "Sync crosshair", checked: this.syncOpts.crosshair === true }],
-        onToggle: (id) => {
-          if (id === "crosshair-sync") this.sync.set("crosshair", this.syncOpts.crosshair ? false : true);
+        // The picker composes dynamic layouts on its grid canvas; registered
+        // presets the canvas cannot express (bespoke plugin areas) list as rows.
+        shape: () => layoutShape(this.def),
+        presets: () => layouts().filter((l) => layoutShape(l) === null).map((l) => ({ id: l.id, label: l.label })),
+        onSelectGrid: (rows, cols) => this.setLayout(layoutForGrid(rows, cols)),
+        onSelectPreset: (id) => this.setLayout(id),
+        // The SYNC switches reflect the simple all-cells form; flipping one
+        // OVERRIDES a host-set group record with plain on/off (groups stay an
+        // API-only shape).
+        syncs: () => [
+          { id: "symbol", label: "Symbol", checked: this.syncOpts.symbol === true },
+          { id: "timeframe", label: "Interval", checked: this.syncOpts.timeframe === true },
+          { id: "crosshair", label: "Crosshair", checked: this.syncOpts.crosshair === true }
+        ],
+        onToggleSync: (id) => {
+          const kind = id;
+          this.sync.set(kind, this.syncOpts[kind] ? false : true);
         }
       },
       getContext: () => this.context()
@@ -972,10 +1083,19 @@ var VelaWorkspace = class {
         this.active.chart.drawings.setStayMode(on);
         this.refocusActive();
       },
-      { dock: "static" }
+      {
+        dock: "static",
+        // Drawings sync is a WORKSPACE link (same model as the layout
+        // dropdown's switches) — the bar only hosts its toggle.
+        onDrawingsSync: (on) => {
+          this.sync.set("drawings", on);
+          this.refocusActive();
+        }
+      }
     ) : null;
     this.drawToolbar?.setDefinition(defaultToolbar());
     this.drawToolbar?.setVisible(true);
+    this.drawToolbar?.setDrawingsSyncMode(!!this.syncOpts.drawings);
     this.bottombar = opts.bottombar !== false ? new Bottombar(this.root, {
       timezone: this.timezone,
       onRange: (preset) => {
@@ -988,6 +1108,7 @@ var VelaWorkspace = class {
     hostEl.appendChild(this.root);
     this.splitters = new SplitterLayer(this.gridEl, {
       tracks: () => this.currentTracks(),
+      grid: () => occupancyGrid(this.def),
       apply: (axis, weights) => this.applyTracks(axis, weights),
       reset: (axis) => this.applyTracks(axis, evenTracks(this.currentTracks()[axis].length)),
       gapPx: () => GAP_PX
@@ -1135,7 +1256,7 @@ var VelaWorkspace = class {
     }
     if (st.favorites) this.favs = [...st.favorites];
     this.dock.applyState(st.panels);
-    for (const kind of ["viewport", "symbol", "timeframe", "crosshair"]) this.applySyncSetting(kind, st.sync?.[kind]);
+    for (const kind of ["viewport", "symbol", "timeframe", "crosshair", "drawings"]) this.applySyncSetting(kind, st.sync?.[kind]);
     this.trackSizes.clear();
     if (st.trackSizes) for (const [id, ts] of Object.entries(st.trackSizes)) this.trackSizes.set(id, ts);
     for (const [id, cell] of [...this.cellsById]) {
@@ -1144,9 +1265,10 @@ var VelaWorkspace = class {
       this.events.emit("cell:destroyed", { id });
     }
     this.pool.clear();
+    this.drawingLinks.clear();
     for (const { id, ...cs } of st.charts) this.pool.set(id, cs);
     this.order = st.charts.map((c) => c.id);
-    const def = layoutDefinition(st.layout);
+    const def = ensureLayout(st.layout);
     if (def) this.def = def;
     this.cellBackend = this.backendFor(this.def);
     this.applyGrid();
@@ -1197,6 +1319,7 @@ var VelaWorkspace = class {
     const next = this.resolveLayout(layout);
     const nextBackend = this.backendFor(next);
     const rebuildAll = nextBackend !== this.cellBackend;
+    this.order = orderAfterLayout(this.order, next.cells.length, this.activeId);
     const keep = new Set(this.order.slice(0, next.cells.length));
     for (const [id, cell] of [...this.cellsById]) {
       if (!keep.has(id) || rebuildAll) {
@@ -1320,7 +1443,7 @@ var VelaWorkspace = class {
   // ── internals ───────────────────────────────────────────────
   resolveLayout(layout) {
     if (typeof layout !== "string") return layout;
-    const def = layoutDefinition(layout);
+    const def = ensureLayout(layout);
     if (!def) throw new Error(`[vela] unknown workspace layout "${layout}" \u2014 register it with registerLayout().`);
     return def;
   }
@@ -1348,6 +1471,8 @@ var VelaWorkspace = class {
    *  `order[i]` — the identity/position decoupling in one line. */
   applyGrid() {
     const { container, perCell } = gridStyles(this.def, this.trackSizes.get(this.def.id));
+    if (this.def.cells.length > 1) this.gridEl.dataset.multi = "1";
+    else delete this.gridEl.dataset.multi;
     this.gridEl.style.gridTemplateColumns = container.gridTemplateColumns ?? "";
     this.gridEl.style.gridTemplateRows = container.gridTemplateRows ?? "";
     this.gridEl.style.gridTemplateAreas = container.gridTemplateAreas ?? "";
@@ -1395,6 +1520,7 @@ var VelaWorkspace = class {
       });
       cell.host.style.gridArea = perCell[slot.id]?.gridArea ?? "";
       this.cellsById.set(id, cell);
+      if (id === this.activeId) cell.host.dataset.active = "1";
       this.wireCell(cell);
       if (this.favs.length > 0) cell.chart.drawings.setFavorites(this.favs);
       cell.setManifest(this.manifest, pooled?.indicators == null);
@@ -1426,9 +1552,19 @@ var VelaWorkspace = class {
       this.markStateDirty();
     });
     chart.renderer.onCrosshairMove((e) => this.propagateCrosshair(cell.id, e.time));
-    chart.on("drawing:created", () => this.markStateDirty());
-    chart.on("drawing:edited", () => this.markStateDirty());
-    chart.on("drawing:removed", () => this.markStateDirty());
+    chart.on("drawing:created", ({ id }) => {
+      this.propagateDrawing(cell.id, id);
+      this.markStateDirty();
+    });
+    chart.on("drawing:draft", ({ doc }) => this.propagateDraft(cell.id, doc));
+    chart.on("drawing:edited", ({ id }) => {
+      this.propagateDrawingEdit(cell.id, id);
+      this.markStateDirty();
+    });
+    chart.on("drawing:removed", ({ id }) => {
+      this.propagateDrawingRemoval(cell.id, id);
+      this.markStateDirty();
+    });
     chart.on("drawing:tool", ({ type }) => {
       if (cell.id !== this.activeId) return;
       this.globalTool = type;
@@ -1456,6 +1592,12 @@ var VelaWorkspace = class {
   applySyncSetting(kind, setting, align = false) {
     if (setting == null || setting === false) delete this.syncOpts[kind];
     else this.syncOpts[kind] = setting;
+    if (kind === "drawings") {
+      for (const cell of this.cellsById.values()) cell.chart.drawings.setExternalGhost(null);
+      this.drawToolbar?.setDrawingsSyncMode(!!setting);
+      this.markStateDirty();
+      return;
+    }
     if (kind === "crosshair") {
       for (const cell of this.cellsById.values()) cell.chart.renderer.setExternalCrosshair(null);
       if (setting && ![...this.cellsById.values()].some((c) => c.chart.renderer.supportsExternalCrosshair)) {
@@ -1465,6 +1607,7 @@ var VelaWorkspace = class {
       this.markStateDirty();
       return;
     }
+    if (this.topbar && this.def) this.topbar.setLayout(this.def.id);
     this.markStateDirty();
     if (align && setting && this.activeId) {
       if (kind === "viewport") {
@@ -1516,6 +1659,101 @@ var VelaWorkspace = class {
       this.syncBusy = false;
     }
   }
+  /**
+   * Copy a freshly created drawing onto the origin's same-group followers (fresh ids
+   * through `drawings.add` — anchors are time+price, so the copy lands at the same
+   * spot whatever the follower shows) and register the whole set as LINKED: edits
+   * and removals of any member follow while the link is on ({@link drawingLinks}).
+   * The busy guard stops the copies' own `drawing:created` events from fanning out.
+   */
+  propagateDrawing(originId, drawingId) {
+    if (this.drawingSyncBusy || this.destroyed) return;
+    const setting = this.syncOpts.drawings;
+    if (!setting) return;
+    const doc = this.cellsById.get(originId)?.chart.drawings.all().find((d) => d.id === drawingId);
+    if (!doc) return;
+    this.drawingSyncBusy = true;
+    try {
+      const group = /* @__PURE__ */ new Map([[originId, drawingId]]);
+      for (const id of syncTargets(originId, setting, [...this.cellsById.keys()])) {
+        const copy = this.cellsById.get(id)?.chart.drawings.add(doc.type, {
+          paneId: doc.paneId,
+          anchors: doc.anchors,
+          style: doc.style,
+          text: doc.text,
+          props: doc.props
+        });
+        if (copy) group.set(id, copy.id);
+      }
+      if (group.size > 1) {
+        for (const [cellId, dId] of group) this.drawingLinks.set(`${cellId}\0${dId}`, group);
+      }
+    } finally {
+      this.drawingSyncBusy = false;
+    }
+  }
+  /** Mirror an in-progress placement (its current ghost, `null` = placement ended)
+   *  onto the origin's same-group followers — the live half of the drawings link;
+   *  the created copy replaces the ghosts when the placement completes. One-way by
+   *  contract (an external ghost never re-emits drafts), so no busy guard needed. */
+  propagateDraft(originId, doc) {
+    if (this.destroyed) return;
+    const setting = this.syncOpts.drawings;
+    if (!setting) return;
+    for (const id of syncTargets(originId, setting, [...this.cellsById.keys()])) {
+      this.cellsById.get(id)?.chart.drawings.setExternalGhost(doc);
+    }
+  }
+  /** Push a linked drawing's edited CONTENT (anchors, style, text, per-type props)
+   *  onto its same-group peers — any member propagates, not just the original. */
+  propagateDrawingEdit(originId, drawingId) {
+    if (this.drawingSyncBusy || this.destroyed) return;
+    const setting = this.syncOpts.drawings;
+    if (!setting) return;
+    const group = this.drawingLinks.get(`${originId}\0${drawingId}`);
+    if (!group) return;
+    const doc = this.cellsById.get(originId)?.chart.drawings.all().find((d) => d.id === drawingId);
+    if (!doc) return;
+    this.drawingSyncBusy = true;
+    try {
+      for (const id of syncTargets(originId, setting, [...this.cellsById.keys()])) {
+        const peerId = group.get(id);
+        if (peerId == null) continue;
+        this.cellsById.get(id)?.chart.drawings.update(peerId, {
+          anchors: doc.anchors,
+          style: doc.style,
+          text: doc.text,
+          props: doc.props
+        });
+      }
+    } finally {
+      this.drawingSyncBusy = false;
+    }
+  }
+  /** Remove a linked drawing's peers with it. The removed member always leaves its
+   *  link group (whatever the setting); peers are only deleted while the link is on.
+   *  A propagated peer removal re-enters here under the busy guard and just cleans
+   *  its own link key. */
+  propagateDrawingRemoval(originId, drawingId) {
+    if (this.destroyed) return;
+    const key = `${originId}\0${drawingId}`;
+    const group = this.drawingLinks.get(key);
+    if (!group) return;
+    this.drawingLinks.delete(key);
+    group.delete(originId);
+    if (this.drawingSyncBusy) return;
+    const setting = this.syncOpts.drawings;
+    if (!setting) return;
+    this.drawingSyncBusy = true;
+    try {
+      for (const id of syncTargets(originId, setting, [...this.cellsById.keys()])) {
+        const peerId = group.get(id);
+        if (peerId != null) this.cellsById.get(id)?.chart.drawings.remove(peerId);
+      }
+    } finally {
+      this.drawingSyncBusy = false;
+    }
+  }
   /**
    * Push an origin cell's symbol/timeframe onto its same-group followers (fired from
    * `market:changed`). Convergence comes from IDEMPOTENCE, not the guard: a follower's
@@ -1691,4 +1929,4 @@ var VelaWorkspace = class {
   }
 };
 
-export { ChartCell, VelaWorkspace, activeAfterLayout, evenTracks, gridStyles, layoutDefinition, layouts, memoryStorageAdapter, rangesWithin, registerBuiltinLayouts, registerLayout, resizeTracks, syncTargets, trackOffsets, unregisterLayout };
+export { ChartCell, GRID_PICKER_MAX, VelaWorkspace, activeAfterLayout, ensureLayout, evenTracks, gridStyles, layoutDefinition, layoutForGrid, layoutShape, layouts, memoryStorageAdapter, rangesWithin, registerBuiltinLayouts, registerLayout, resizeTracks, syncTargets, trackOffsets, unregisterLayout };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luxalgo/vela",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "description": "Open-source charting library with a native high-performance renderer, drawing tools, pluggable chart types and pluggable scripting engines.",
   "license": "Apache-2.0",
   "homepage": "https://luxalgo.com/vela",