@luxalgo/vela 0.5.3 → 0.5.4

package/dist/{chunk-L5NTMWPP.js → chunk-D6WM5IUE.js}

@@ -1,6 +1,6 @@
-import { deserializeDrawing, chartTypes, rendererLayers, foldBaseModulation, registerChartType, rendererDefaults, getDrawingType, settingsRowVisible, normalizeSettingsRow, TextLabel, Callout, resetDrawingSettings, registerNativeIndicator, chartType, getNativeIndicator, nativeIndicatorDescriptors, drawingTypes, settingsRowValueKeys, formatDuration, RegressionChannel, FixedRangeVolumeProfile, SegmentDrawing, ArrowMark, GlyphStamp, RadialFib, FibSpiral, DedekindTessellation, MachFigure, GannSquare, FibRatios, MeasureBox, PositionTool, AnchoredVwap, PatternDrawing, Comment, PriceNote, Signpost, Note, PriceLabel, GANN_SQUARE_ARCS, lineSegmentIntersection, DEFAULT_DRAWING_COLOR, GLYPH_OPTIONS, STAMP_SIZE_OPTIONS, LINE_STYLE_OPTIONS, DEDEKIND_CURVATURE_OPTIONS, MACH_NUMBER_OPTIONS, MACH_WAVE_COUNT_OPTIONS, TEXT_SIZE_OPTIONS, createDrawing, tickerModifierIds, CalloutBase, DIRECTION_OPTIONS } from './chunk-WJKLBYRM.js';
-import { themeTokens, STATIC_TOKENS } from './chunk-ATPU5CI6.js';
-import { icon, iconAt, withAlpha, NEUTRAL, BEARISH, BULLISH, isDarkColor, toHex6, ACCENT, SERIES_LINE, SLATE, CROSSHAIR, TRADE_EXIT, TRADE_SHORT, TRADE_LONG, SLATE_DEEP, VALID, INVALID, svg24, WARNING, svg24Solid } from './chunk-LJLZR44Y.js';
+import { deserializeDrawing, chartTypes, rendererLayers, foldBaseModulation, registerChartType, rendererDefaults, getDrawingType, settingsRowVisible, normalizeSettingsRow, TextLabel, Callout, resetDrawingSettings, registerNativeIndicator, chartType, getNativeIndicator, nativeIndicatorDescriptors, drawingTypes, settingsRowValueKeys, formatDuration, RegressionChannel, FixedRangeVolumeProfile, SegmentDrawing, ArrowMark, GlyphStamp, RadialFib, FibSpiral, DedekindTessellation, MachFigure, GannSquare, FibRatios, MeasureBox, PositionTool, AnchoredVwap, PatternDrawing, Comment, PriceNote, Signpost, Note, PriceLabel, GANN_SQUARE_ARCS, lineSegmentIntersection, DEFAULT_DRAWING_COLOR, GLYPH_OPTIONS, STAMP_SIZE_OPTIONS, LINE_STYLE_OPTIONS, DEDEKIND_CURVATURE_OPTIONS, MACH_NUMBER_OPTIONS, MACH_WAVE_COUNT_OPTIONS, TEXT_SIZE_OPTIONS, createDrawing, tickerModifierIds, CalloutBase, DIRECTION_OPTIONS } from './chunk-ZNL2X6U2.js';
+import { themeTokens, closeOpenPopovers, Select, NumberInput, colorField, Switch, blendOver, splitColor, isPopoverOpen, TextField, Popover, openPopoverTrigger, buildColorPicker, toggleSelectList, STATIC_TOKENS } from './chunk-OGRQW3M6.js';
+import { icon, iconAt, withAlpha, NEUTRAL, BEARISH, BULLISH, isDarkColor, ACCENT, SERIES_LINE, SLATE, CROSSHAIR, TRADE_EXIT, TRADE_SHORT, TRADE_LONG, injectStyles, SLATE_DEEP, VALID, INVALID, svg24, svg24Solid } from './chunk-EMS6PO2T.js';
 
 // src/core/events/EventBus.ts
 var TypedEventBus = class {
@@ -2844,6 +2844,7 @@ var LEGEND_CTL_PX = 18;
 var LEGEND_ROW_PAD_Y = 2;
 var LEGEND_ROW_PAD_X = 6;
 var LEGEND_TITLE_VALUES_GAP_PX = 6;
+var LEGEND_TITLE_STATUS_GAP_PX = 8;
 var LEGEND_ACTION_GAP_PX = 6;
 var LEGEND_CTL_CSS = `cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border:none;line-height:0;padding:0;width:${LEGEND_CTL_PX}px;height:${LEGEND_CTL_PX}px;border-radius:3px;box-sizing:border-box;flex:none;`;
 var LEGEND_ROW_MIN_H = LEGEND_CTL_PX + LEGEND_ROW_PAD_Y * 2;
@@ -2888,6 +2889,11 @@ var InputsUI = class {
     this.dialogTips = [];
     /** Open "Move to" menu (kept so it can be torn down). */
     this.moveMenu = null;
+    /** Open settings-dialog choice menu (custom dropdown — torn down with the dialog). */
+    this.choicePop = null;
+    /** Open settings-dialog calendar popover (torn down with the dialog). */
+    this.calendarPop = null;
+    this.calendarAnchor = null;
     /** Collapsed panes → the master indicator id to keep visible (others hidden in the strip). */
     this.paneCollapse = /* @__PURE__ */ new Map();
     /** The user folded the indicator legend away behind the chevron — CHART-WIDE: every
@@ -2913,6 +2919,10 @@ var InputsUI = class {
     this.onDialogKey = (e) => {
       if (e.key === "Escape") {
         e.preventDefault();
+        if (isPopoverOpen()) {
+          closeOpenPopovers();
+          return;
+        }
         this.closeDialog();
       }
     };
@@ -3358,6 +3368,7 @@ var InputsUI = class {
       titleWrap.appendChild(beta);
     }
     el.appendChild(titleWrap);
+    el.appendChild(statusEl);
     const valuesEl = document.createElement("span");
     valuesEl.style.cssText = `display:none;align-items:center;gap:5px;margin-left:${LEGEND_TITLE_VALUES_GAP_PX}px;white-space:nowrap;font-variant-numeric:tabular-nums;`;
     el.appendChild(valuesEl);
@@ -3418,7 +3429,6 @@ var InputsUI = class {
     close.addEventListener("click", () => this.onRemove?.(id));
     controlsEl.appendChild(close);
     el.appendChild(controlsEl);
-    el.appendChild(statusEl);
     this.attach(this.legendFor(paneId), el, !!opts.native);
     this.rows.set(id, { id, title, settingsTitle, inputs, values: { ...values }, el, titleEl, statusEl, valuesEl, plotValues: [], plotValuesKey: "", showValues: null, highlighted: false, paneId, hidden: false, eyeEl, controlsEl, extrasEl, native: !!opts.native });
     this.syncFoldToggle();
@@ -3436,7 +3446,7 @@ var InputsUI = class {
   /**
    * Reflect an indicator's live status in its legend row: `'loading'` shows three pulsing
    * dots (a fetch is in flight — the same load affordance as the chart's own bar-load dots,
-   * at legend scale), `'live'` a pulsing dot, `'idle'` nothing. Rendered at the row's right end.
+   * at legend scale), `'live'` a pulsing dot, `'idle'` nothing. Rendered just right of the title.
    */
   setStatus(id, status) {
     const row = this.rows.get(id);
@@ -3448,7 +3458,7 @@ var InputsUI = class {
       return;
     }
     if (status === "loading") {
-      el.style.cssText = "display:inline-flex;align-items:center;gap:3px;box-sizing:border-box;flex:none;";
+      el.style.cssText = `display:inline-flex;align-items:center;gap:3px;box-sizing:border-box;flex:none;margin-left:${LEGEND_TITLE_STATUS_GAP_PX}px;line-height:0;transform:translateY(1px);`;
       for (let i = 0; i < 3; i += 1) {
         const dot = document.createElement("span");
         dot.style.cssText = "width:4px;height:4px;border-radius:50%;background:currentColor;opacity:0.15;flex:none;";
@@ -3458,7 +3468,7 @@ var InputsUI = class {
       return;
     }
     this.ensureStatusKeyframes();
-    el.style.cssText = `display:inline-block;box-sizing:border-box;flex:none;width:8px;height:8px;border-radius:50%;background:${this.theme.upColor};animation:vela-ind-pulse 1.2s ease-in-out infinite;`;
+    el.style.cssText = `display:inline-block;box-sizing:border-box;flex:none;width:8px;height:8px;border-radius:50%;margin-left:${LEGEND_TITLE_STATUS_GAP_PX}px;transform:translateY(1px);background:${this.theme.upColor};animation:vela-ind-pulse 1.2s ease-in-out infinite;`;
   }
   /** Inject the status keyframes once (idempotent). */
   ensureStatusKeyframes() {
@@ -3573,7 +3583,8 @@ var InputsUI = class {
   /**
    * Open the indicator's settings as a centered modal over the chart — a themed,
    * dependency-free port of the app's tabbed script-settings dialog: a header with the
-   * indicator title, an "Inputs" tab, a scrollable body that groups inputs by `group=`
+   * indicator title, a tab strip (the default "Inputs" tab plus any tab the inputs
+   * declare via `tab=`), a scrollable body per tab that groups inputs by `group=`
    * (section headers) and packs `inline=` inputs onto one row, and a sticky footer.
    *
    * Edits commit LIVE (each change re-runs the indicator), matching the current
@@ -3603,55 +3614,57 @@ var InputsUI = class {
     });
     const card = document.createElement("div");
     card.className = "vela-ind-dialog";
-    card.style.cssText = `display:flex;flex-direction:column;width:fit-content;min-width:min(360px,90%);max-width:min(640px,94%);max-height:82%;background:${t.background};border:1px solid ${border};border-radius:var(--vela-radius-lg);box-shadow:var(--vela-shadow-dialog);color:${fg};color-scheme:${scheme};font:13px ${font};overflow:hidden;`;
+    card.style.cssText = `display:flex;flex-direction:column;width:fit-content;min-width:min(380px,90%);max-width:min(640px,94%);max-height:82%;background:${t.background};border:1px solid ${border};border-radius:var(--vela-radius-lg);box-shadow:var(--vela-shadow-dialog);color:${fg};color-scheme:${scheme};font:14px ${font};overflow:hidden;`;
     if (this.mobileLayout) card.style.cssText += "width:100%;min-width:0;max-width:none;height:100%;max-height:none;border:none;border-radius:0;";
     applyChromeTokens(card, t);
     card.addEventListener("keydown", (e) => {
       if (e.key !== "Escape") e.stopPropagation();
     });
     const header = document.createElement("div");
-    header.style.cssText = "display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:16px 20px 12px;flex:0 0 auto;";
+    header.style.cssText = "display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:16px 20px 20px;flex:0 0 auto;";
     const hTitle = document.createElement("span");
     hTitle.textContent = row.settingsTitle;
-    hTitle.style.cssText = "font-weight:600;font-size:16px;line-height:1.3;";
+    hTitle.style.cssText = "font-weight:600;font-size:20px;line-height:28px;";
     const closeBtn = document.createElement("button");
     closeBtn.type = "button";
     closeBtn.setAttribute("aria-label", "Close");
     this.dialogTips.push(attachChromeTooltip(closeBtn, { host: this.container, theme: () => this.theme, text: () => "Close" }));
     closeBtn.innerHTML = iconAt("close", 15);
-    closeBtn.className = "vela-ind-ctl";
-    closeBtn.style.cssText = "cursor:pointer;display:inline-flex;align-items:center;background:transparent;border:none;line-height:0;padding:2px;flex:0 0 auto;";
+    closeBtn.className = "vela-ind-dlg-close";
     closeBtn.addEventListener("click", () => this.closeDialog());
     header.append(hTitle, closeBtn);
     card.appendChild(header);
     if (!this.mobileLayout) makeDialogDraggable(card, header, { closeSelector: "button" });
+    const tabDefs = tabInputs(row.inputs);
     const tabs = document.createElement("div");
-    tabs.style.cssText = `display:flex;gap:16px;padding:0 20px;border-bottom:1px solid ${border};flex:0 0 auto;`;
-    const tab = document.createElement("div");
-    tab.textContent = "Inputs";
-    tab.style.cssText = `padding:8px 2px;margin-bottom:-1px;border-bottom:2px solid ${fg};font-weight:600;font-size:13px;`;
-    tabs.appendChild(tab);
-    card.appendChild(tabs);
-    const body = document.createElement("div");
-    body.style.cssText = "padding:14px 20px 6px;overflow-y:auto;flex:1 1 auto;display:flex;flex-direction:column;gap:24px;";
-    for (const group of groupInputs(row.inputs)) {
-      const section = document.createElement("div");
-      section.style.cssText = "display:flex;flex-direction:column;gap:14px;";
-      if (group.name) {
-        const gh = document.createElement("div");
-        gh.textContent = group.name;
-        gh.style.cssText = "font-size:var(--vela-font-size-sm);font-weight:600;letter-spacing:0.05em;text-transform:uppercase;color:var(--vela-fg-muted);";
-        section.appendChild(gh);
+    tabs.style.cssText = `display:flex;gap:12px;padding:0 20px;border-bottom:1px solid ${border};flex:0 0 auto;`;
+    const tabEls = [];
+    const bodies = [];
+    const activate = (idx) => {
+      for (let i = 0; i < tabEls.length; i += 1) {
+        const active = i === idx;
+        const el = tabEls[i];
+        el.style.borderBottomColor = active ? fg : "transparent";
+        el.style.color = active ? "inherit" : "var(--vela-fg-muted)";
+        el.classList.toggle("vela-ind-tab-active", active);
+        bodies[i].style.display = active ? "grid" : "none";
       }
-      const grid = document.createElement("div");
-      grid.style.cssText = this.mobileLayout ? "display:grid;grid-template-columns:minmax(0,1fr) auto auto max-content;align-items:center;column-gap:12px;row-gap:22px;" : "display:grid;grid-template-columns:minmax(140px,auto) auto auto 1fr;align-items:center;column-gap:12px;row-gap:22px;";
-      for (const inputRow of group.rows) this.buildInputRow(grid, inputRow, row);
-      section.appendChild(grid);
-      body.appendChild(section);
+    };
+    for (const [idx, def] of tabDefs.entries()) {
+      const tab = document.createElement("div");
+      tab.textContent = def.name;
+      tab.className = "vela-ind-tab";
+      tab.style.cssText = `padding:0 0 8px;margin-bottom:-1px;border-bottom:2px solid transparent;font-weight:600;font-size:16px;line-height:24px;${tabDefs.length > 1 ? "cursor:pointer;" : ""}`;
+      tab.addEventListener("click", () => activate(idx));
+      tabs.appendChild(tab);
+      tabEls.push(tab);
+      bodies.push(this.buildTabBody(def.inputs, row));
     }
-    card.appendChild(body);
+    card.appendChild(tabs);
+    for (const body of bodies) card.appendChild(body);
+    activate(0);
     const footer = document.createElement("div");
-    footer.style.cssText = `display:flex;justify-content:flex-end;gap:8px;padding:14px 20px;border-top:1px solid ${border};flex:0 0 auto;`;
+    footer.style.cssText = `display:flex;justify-content:flex-end;gap:12px;padding:16px 20px;border-top:1px solid ${border};flex:0 0 auto;`;
     footer.append(
       this.dialogButton("Cancel", false, () => this.revertAndClose()),
       this.dialogButton("Ok", true, () => this.closeDialog())
@@ -3663,8 +3676,32 @@ var InputsUI = class {
     this.backdrop = backdrop;
     document.addEventListener("keydown", this.onDialogKey);
   }
+  /** One tab's scrollable body — one shared grid so every group's controls share a
+   *  left edge (a 100px number field lines up with a wider session/time pair). */
+  buildTabBody(inputs, row) {
+    const body = document.createElement("div");
+    body.style.cssText = this.mobileLayout ? "padding:16px 20px;overflow-y:auto;overflow-x:hidden;overflow-anchor:none;flex:1 1 auto;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:16px;row-gap:16px;" : "padding:16px 20px;overflow-y:auto;overflow-x:hidden;overflow-anchor:none;flex:1 1 auto;display:grid;grid-template-columns:max-content 1fr;align-items:center;column-gap:16px;row-gap:16px;";
+    for (const group of groupInputs(inputs)) {
+      const section = document.createElement("div");
+      section.style.cssText = "display:contents;";
+      if (group.name) {
+        const gh = document.createElement("div");
+        gh.textContent = group.name;
+        const first = body.childElementCount === 0;
+        gh.style.cssText = `grid-column:1 / -1;font-size:11px;font-weight:600;letter-spacing:0.05em;text-transform:uppercase;color:var(--vela-fg-muted);padding:${first ? "4px" : "20px"} 0 8px;`;
+        section.appendChild(gh);
+      }
+      for (const inputRow of group.rows) this.buildInputRow(section, inputRow, row);
+      body.appendChild(section);
+    }
+    return body;
+  }
   closeDialog() {
     document.removeEventListener("keydown", this.onDialogKey);
+    closeOpenPopovers();
+    this.choicePop = null;
+    this.calendarPop = null;
+    this.calendarAnchor = null;
     for (const dispose of this.dialogTips.splice(0)) dispose();
     this.backdrop?.remove();
     this.backdrop = null;
@@ -3692,79 +3729,77 @@ var InputsUI = class {
   buildInputRow(grid, decls, row) {
     const idOf = (inp) => `vela-inp-${row.id}-${inp.key}`;
     if (decls.length > 1) {
-      const cell = document.createElement("div");
-      cell.style.cssText = "grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;gap:12px;";
+      const cell2 = document.createElement("div");
+      cell2.style.cssText = "grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;gap:12px;";
       for (const d of decls) {
         const fit2 = d.type === "color" || d.type === "bool";
         const toggleFirst = d.type === "bool";
         const id2 = idOf(d);
         const item = document.createElement("div");
-        item.style.cssText = `display:flex;align-items:center;gap:6px;${toggleFirst ? "flex-direction:row-reverse;" : ""}`;
+        item.style.cssText = `display:flex;align-items:center;gap:8px;${toggleFirst ? "flex-direction:row-reverse;" : ""}`;
         const name = nameOf(d);
         if (name) {
           const lbl = document.createElement("label");
           lbl.htmlFor = id2;
           lbl.textContent = name;
-          lbl.style.cssText = `font-size:13px;opacity:0.9;${toggleFirst ? "cursor:pointer;" : ""}`;
+          lbl.style.cssText = `font-size:14px;opacity:0.9;${toggleFirst ? "cursor:pointer;" : ""}`;
           item.appendChild(lbl);
         }
         const cw2 = document.createElement("div");
-        cw2.style.cssText = fit2 ? "" : "width:110px;";
+        cw2.style.cssText = fit2 ? "" : "width:100px;";
         cw2.appendChild(this.buildControl(row, d, id2));
         item.appendChild(cw2);
-        cell.appendChild(item);
+        cell2.appendChild(item);
       }
       const lastTip = [...decls].reverse().find((d) => d.tooltip)?.tooltip;
-      if (lastTip) cell.appendChild(this.infoButton(lastTip));
-      grid.appendChild(cell);
+      if (lastTip) cell2.appendChild(this.infoButton(lastTip));
+      grid.appendChild(cell2);
       return;
     }
     const lead = decls[0];
     const id = idOf(lead);
     if (lead.type === "bool") {
-      const cell = document.createElement("div");
-      cell.style.cssText = "grid-column:1 / 4;display:flex;align-items:center;gap:8px;";
+      const cell2 = document.createElement("div");
+      cell2.style.cssText = "grid-column:1 / -1;display:flex;align-items:center;gap:8px;";
       const lbl = document.createElement("label");
-      lbl.style.cssText = "display:flex;align-items:center;gap:8px;cursor:pointer;font-size:13px;";
+      lbl.style.cssText = "display:flex;align-items:center;gap:8px;cursor:pointer;font-size:14px;";
       lbl.appendChild(this.buildControl(row, lead, id));
       lbl.appendChild(document.createTextNode(nameOf(lead)));
-      cell.appendChild(lbl);
-      if (lead.tooltip) cell.appendChild(this.infoButton(lead.tooltip));
-      grid.appendChild(cell);
-      grid.appendChild(document.createElement("div"));
+      cell2.appendChild(lbl);
+      if (lead.tooltip) cell2.appendChild(this.infoButton(lead.tooltip));
+      grid.appendChild(cell2);
       return;
     }
     if (lead.type === "text_area") {
-      const cell = document.createElement("div");
-      cell.style.cssText = "grid-column:1 / -1;display:flex;flex-direction:column;gap:8px;";
+      const cell2 = document.createElement("div");
+      cell2.style.cssText = "grid-column:1 / -1;display:flex;flex-direction:column;gap:8px;";
       const head = document.createElement("div");
       head.style.cssText = "display:flex;align-items:center;justify-content:center;gap:8px;";
       const lbl = document.createElement("label");
       lbl.htmlFor = id;
       lbl.textContent = nameOf(lead);
-      lbl.style.cssText = "font-size:13px;";
+      lbl.style.cssText = "font-size:14px;";
       head.appendChild(lbl);
       if (lead.tooltip) head.appendChild(this.infoButton(lead.tooltip));
-      cell.appendChild(head);
-      cell.appendChild(this.buildControl(row, lead, id));
-      grid.appendChild(cell);
+      cell2.appendChild(head);
+      cell2.appendChild(this.buildControl(row, lead, id));
+      grid.appendChild(cell2);
       return;
     }
     const label = document.createElement("label");
     label.htmlFor = id;
     label.textContent = nameOf(lead);
-    label.style.cssText = "font-size:13px;opacity:0.9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;";
-    const controlCell = document.createElement("div");
-    controlCell.style.cssText = "grid-column:span 2;display:flex;align-items:center;gap:8px;";
+    label.style.cssText = "font-size:14px;opacity:0.9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;";
     const fit = lead.type === "color" || lead.type === "session" || lead.type === "time";
+    const cell = document.createElement("div");
+    cell.style.cssText = "display:flex;align-items:center;gap:8px;justify-self:start;";
     const cw = document.createElement("div");
-    cw.style.cssText = fit ? "" : "width:140px;";
+    cw.style.cssText = fit ? "" : "width:100px;";
     cw.appendChild(this.buildControl(row, lead, id));
-    controlCell.appendChild(cw);
-    if (lead.tooltip) controlCell.appendChild(this.infoButton(lead.tooltip));
+    cell.appendChild(cw);
+    if (lead.tooltip) cell.appendChild(this.infoButton(lead.tooltip));
     grid.appendChild(label);
-    grid.appendChild(controlCell);
-    grid.appendChild(document.createElement("div"));
+    grid.appendChild(cell);
   }
   /** Build the typed control for one input, committing edits live via `onChange`. */
   buildControl(row, inp, id) {
@@ -3773,107 +3808,30 @@ var InputsUI = class {
       row.values[inp.key] = value;
       this.onChange?.({ indicatorId: row.id, key: inp.key, value });
     };
-    const ctrl = this.ctrlStyle();
     if (inp.type === "bool") return this.buildToggle(id, Boolean(current), emit);
-    if (inp.options && inp.options.length > 0) return this.select(id, inp.options.map(String), String(current), `${ctrl}cursor:pointer;`, emit);
-    if (inp.type === "source") return this.select(id, SOURCES, String(current), `${ctrl}cursor:pointer;`, emit);
+    if (inp.options && inp.options.length > 0) return this.select(id, inp.options.map(String), String(current), emit);
+    if (inp.type === "source") return this.select(id, SOURCES, String(current), emit);
     if (inp.type === "color") {
-      const ci = document.createElement("input");
-      ci.type = "color";
-      ci.id = id;
-      ci.value = toHex6(String(current));
-      ci.style.cssText = `flex:0 0 auto;box-sizing:border-box;width:32px;height:32px;padding:2px;border:1px solid ${this.neutralBorder()};border-radius:0;background:transparent;cursor:pointer;`;
-      ci.addEventListener("input", () => emit(ci.value));
-      return ci;
+      const field = colorField(this.theme, () => String(row.values[inp.key] ?? inp.defval), (v) => emit(v), { shape: "circle", id });
+      return field;
     }
     if (inp.type === "symbol") return this.buildSymbol(id, String(current), emit);
-    if (inp.type === "timeframe") return this.selectPairs(id, TIMEFRAME_OPTIONS, String(current), `${ctrl}cursor:pointer;`, emit);
+    if (inp.type === "timeframe") return this.selectPairs(id, TIMEFRAME_OPTIONS, String(current), emit);
     if (inp.type === "session") return this.buildSession(id, String(current), emit);
     if (inp.type === "time") return this.buildTime(id, Number(current) || 0, emit);
     if (inp.type === "text_area") return this.buildTextArea(id, String(current), emit);
     if (inp.type === "int" || inp.type === "float" || inp.type === "price") {
-      const ni = document.createElement("input");
-      ni.type = "number";
-      ni.id = id;
-      ni.value = String(current);
-      if (inp.min !== void 0) ni.min = String(inp.min);
-      if (inp.max !== void 0) ni.max = String(inp.max);
-      ni.step = String(inp.step ?? (inp.type === "int" ? 1 : 0.1));
-      ni.style.cssText = ctrl;
-      let last = String(current);
-      const commit = () => {
-        let n = Number(ni.value);
-        if (!Number.isFinite(n)) {
-          ni.value = last;
-          return;
-        }
-        if (inp.min !== void 0) n = Math.max(inp.min, n);
-        if (inp.max !== void 0) n = Math.min(inp.max, n);
-        if (inp.type === "int") n = Math.round(n);
-        ni.value = String(n);
-        if (String(n) !== last) {
-          last = String(n);
-          emit(n);
-        }
-      };
-      ni.addEventListener("blur", commit);
-      ni.addEventListener("keydown", (e) => {
-        if (e.key === "Enter") {
-          e.preventDefault();
-          ni.blur();
-        }
-      });
-      return ni;
+      return this.buildNumber(id, Number(current), inp, emit);
     }
     return this.buildTextField(id, String(current), emit);
   }
   /** A plain text field that commits on blur / Enter (shared by string inputs and the pickerless symbol field). */
   buildTextField(id, current, emit) {
-    const ti = document.createElement("input");
-    ti.type = "text";
-    ti.id = id;
-    ti.value = current;
-    ti.style.cssText = this.ctrlStyle();
-    let last = current;
-    ti.addEventListener("blur", () => {
-      if (ti.value !== last) {
-        last = ti.value;
-        emit(ti.value);
-      }
-    });
-    ti.addEventListener("keydown", (e) => {
-      if (e.key === "Enter") {
-        e.preventDefault();
-        ti.blur();
-      }
-    });
-    return ti;
+    return new TextField({ id, value: current, size: "md", onChange: emit }).el;
   }
   /** A square check-toggle (filled + check when on) — replaces the raw checkbox. */
   buildToggle(id, checked, onChange) {
-    const t = this.theme;
-    const border = this.neutralBorder();
-    const fill = this.strongText();
-    const b = document.createElement("button");
-    b.type = "button";
-    b.id = id;
-    b.setAttribute("role", "switch");
-    b.innerHTML = CHECK_SVG;
-    b.style.cssText = `width:20px;height:20px;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;border:1px solid ${border};border-radius:5px;cursor:pointer;padding:0;transition:background .12s ease,border-color .12s ease;`;
-    let on = checked;
-    const paint = (v) => {
-      b.setAttribute("aria-checked", v ? "true" : "false");
-      b.style.background = v ? fill : "transparent";
-      b.style.borderColor = v ? fill : border;
-      b.style.color = v ? t.background : "transparent";
-    };
-    paint(checked);
-    b.addEventListener("click", () => {
-      on = !on;
-      paint(on);
-      onChange(on);
-    });
-    return b;
+    return new Switch({ id, checked, size: "md", tone: "bright", onChange }).el;
   }
   /** A hoverable ⓘ affordance carrying an input's `tooltip` (themed chrome tip; wraps). */
   infoButton(tooltip) {
@@ -3885,45 +3843,22 @@ var InputsUI = class {
     return b;
   }
   /** A dropdown over plain string options (value === label) — a thin case of {@link selectPairs}. */
-  select(id, options, current, style, emit) {
-    return this.selectPairs(id, options.map((o) => ({ value: o, label: o })), current, style, emit);
+  select(id, options, current, emit) {
+    return this.selectPairs(id, options.map((o) => ({ value: o, label: o })), current, emit);
   }
   /** A dropdown whose visible labels differ from the committed values (label ≠ value pairs). */
-  selectPairs(id, pairs, current, style, onChange) {
-    const sel = document.createElement("select");
-    sel.id = id;
-    sel.style.cssText = style;
-    if (current !== "" && !pairs.some((p) => p.value === current)) {
-      const o = document.createElement("option");
-      o.value = current;
-      o.textContent = current;
-      o.selected = true;
-      o.disabled = true;
-      sel.appendChild(o);
-    }
-    for (const p of pairs) {
-      const o = document.createElement("option");
-      o.value = p.value;
-      o.textContent = p.label;
-      if (p.value === current) o.selected = true;
-      sel.appendChild(o);
-    }
-    this.styleSelect(sel);
-    sel.addEventListener("change", () => onChange(sel.value));
-    return this.wrapSelectChevron(sel);
-  }
-  /** Wrap a `<select>` with an inset chevron — native arrows can't be repositioned reliably. */
-  wrapSelectChevron(sel) {
-    const wrap = document.createElement("div");
-    wrap.style.cssText = "position:relative;width:100%;";
-    sel.style.paddingRight = "28px";
-    const chevron = document.createElement("span");
-    chevron.innerHTML = SELECT_CHEVRON_SVG;
-    chevron.style.cssText = `position:absolute;right:10px;top:50%;transform:translateY(-50%);pointer-events:none;display:flex;align-items:center;color:${this.strongText()};opacity:0.85;line-height:0;`;
-    wrap.append(sel, chevron);
-    return wrap;
+  selectPairs(id, pairs, current, onChange) {
+    return new Select({
+      id,
+      options: pairs,
+      value: current,
+      size: "md",
+      theme: this.theme,
+      list: this.listPopover(),
+      onChange
+    }).el;
   }
-  /** `input.session` → two HH:MM dropdowns committing a `HHMM-HHMM` session string. */
+  /** `input.session` → two typeable HH:MM comboboxes committing a `HHMM-HHMM` session string. */
   buildSession(id, current, emit) {
     const [start, end] = sessionToTimes(current);
     const wrap = document.createElement("div");
@@ -3931,15 +3866,16 @@ var InputsUI = class {
     let from = start;
     let to = end;
     const commit = () => emit(timesToSession(from, to));
-    const startSel = this.timeSelect(id, from, 86, (v) => {
-      from = v;
-      commit();
-    });
-    const endSel = this.timeSelect(`${id}-end`, to, 86, (v) => {
-      to = v;
-      commit();
-    });
-    wrap.append(startSel, endSel);
+    wrap.append(
+      this.timeCombobox(id, from, 86, (v) => {
+        from = v;
+        commit();
+      }),
+      this.timeCombobox(`${id}-end`, to, 86, (v) => {
+        to = v;
+        commit();
+      })
+    );
     return wrap;
   }
   /** `input.time` → a date picker + an HH:MM dropdown, committing an epoch-ms timestamp. */
@@ -3954,20 +3890,15 @@ var InputsUI = class {
       const ms = Date.parse(`${date}T${time}:00`);
       if (Number.isFinite(ms)) emit(ms);
     };
-    const dateInput = document.createElement("input");
-    dateInput.type = "date";
-    dateInput.id = id;
-    dateInput.value = date;
-    dateInput.style.cssText = `${this.ctrlStyle()}width:auto;cursor:pointer;`;
-    dateInput.addEventListener("change", () => {
-      date = dateInput.value;
+    const dateField = this.dateField(id, date, (v) => {
+      date = v;
       commit();
     });
-    const timeSel = this.timeSelect(`${id}-time`, time, 86, (v) => {
+    const timeSel = this.timeCombobox(`${id}-time`, time, 86, (v) => {
       time = v;
       commit();
     });
-    wrap.append(dateInput, timeSel);
+    wrap.append(dateField, timeSel);
     return wrap;
   }
   /** `input.text_area` → a multi-line textarea, committed on blur. */
@@ -3986,9 +3917,261 @@ var InputsUI = class {
     });
     return ta;
   }
-  /** A fixed-width HH:MM dropdown (30-minute steps) used by the session + time controls. */
-  timeSelect(id, current, width, onChange) {
-    return this.selectPairs(id, TIME_OPTIONS, current, `${this.ctrlStyle()}width:${width}px;cursor:pointer;`, onChange);
+  /** A fixed-width HH:MM combobox (typeable, plus a 30-minute-step dropdown) used by session + time. */
+  timeCombobox(id, current, width, onChange) {
+    const wrap = document.createElement("div");
+    wrap.className = "vela-ind-combo";
+    wrap.style.cssText = `position:relative;width:${width}px;`;
+    const input = document.createElement("input");
+    input.type = "text";
+    input.id = id;
+    input.value = current;
+    input.autocomplete = "off";
+    input.spellcheck = false;
+    input.style.cssText = `${this.ctrlStyle()}padding-right:26px;`;
+    const chevron = document.createElement("button");
+    chevron.type = "button";
+    chevron.tabIndex = -1;
+    chevron.className = "vela-ind-combo-chevron";
+    chevron.setAttribute("aria-label", "Open time list");
+    chevron.innerHTML = CLOCK_SVG;
+    let value = current;
+    const commitTyped = () => {
+      const next = normalizeTimeInput(input.value);
+      if (!next) {
+        input.value = value;
+        return;
+      }
+      input.value = next;
+      if (next !== value) {
+        value = next;
+        onChange(next);
+      }
+    };
+    input.addEventListener("blur", () => {
+      if (isPopoverOpen()) return;
+      commitTyped();
+    });
+    const pick = (v) => {
+      value = v;
+      input.value = v;
+      onChange(v);
+    };
+    const openList = () => {
+      this.choicePop = toggleSelectList(wrap, TIME_OPTIONS, value, pick, {
+        ...this.listPopover(),
+        onClose: () => {
+          this.choicePop = null;
+        }
+      });
+    };
+    input.addEventListener("keydown", (e) => {
+      if (e.key === "Enter") {
+        e.preventDefault();
+        commitTyped();
+        input.blur();
+      }
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        openList();
+      }
+    });
+    const open = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      openList();
+    };
+    input.addEventListener("click", open);
+    chevron.addEventListener("mousedown", (e) => e.preventDefault());
+    chevron.addEventListener("click", open);
+    wrap.append(input, chevron);
+    return wrap;
+  }
+  /** A typeable YYYY-MM-DD field that also opens a themed month calendar. */
+  dateField(id, current, onChange) {
+    const wrap = document.createElement("div");
+    wrap.className = "vela-ind-combo";
+    wrap.style.cssText = "position:relative;width:128px;";
+    const input = document.createElement("input");
+    input.type = "text";
+    input.id = id;
+    input.value = current;
+    input.autocomplete = "off";
+    input.spellcheck = false;
+    input.style.cssText = `${this.ctrlStyle()}padding-right:26px;`;
+    const chevron = document.createElement("button");
+    chevron.type = "button";
+    chevron.tabIndex = -1;
+    chevron.className = "vela-ind-combo-chevron";
+    chevron.setAttribute("aria-label", "Open calendar");
+    chevron.innerHTML = CALENDAR_SVG;
+    let value = current;
+    const commitTyped = () => {
+      const next = normalizeDateInput(input.value);
+      if (!next) {
+        input.value = value;
+        return;
+      }
+      input.value = next;
+      if (next !== value) {
+        value = next;
+        onChange(next);
+      }
+    };
+    input.addEventListener("blur", () => {
+      if (isPopoverOpen()) return;
+      commitTyped();
+    });
+    const pick = (v) => {
+      value = v;
+      input.value = v;
+      onChange(v);
+    };
+    input.addEventListener("keydown", (e) => {
+      if (e.key === "Enter") {
+        e.preventDefault();
+        commitTyped();
+        input.blur();
+      }
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        this.openCalendar(wrap, value, pick);
+      }
+    });
+    const open = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      if (openPopoverTrigger() === wrap) {
+        closeOpenPopovers();
+        return;
+      }
+      this.openCalendar(wrap, value, pick);
+    };
+    input.addEventListener("click", open);
+    chevron.addEventListener("mousedown", (e) => e.preventDefault());
+    chevron.addEventListener("click", open);
+    wrap.append(input, chevron);
+    return wrap;
+  }
+  /** Numeric field with hover steppers on the right (no fill until a triangle is hovered). */
+  buildNumber(id, current, inp, emit) {
+    return new NumberInput({
+      id,
+      value: current,
+      min: inp.min,
+      max: inp.max,
+      step: inp.step ?? (inp.type === "int" ? 1 : 0.1),
+      integer: inp.type === "int",
+      size: "md",
+      commit: "blur",
+      onChange: emit
+    }).el;
+  }
+  /** Placement shared by the indicator dialog's dropdowns and the time combobox. */
+  listPopover() {
+    return {
+      theme: this.theme,
+      matchWidth: true,
+      boundary: this.dialog ?? "viewport",
+      boundaryInset: 8,
+      gap: 4
+    };
+  }
+  /** Open a themed month calendar under `anchor` — same surface + shadow as the choice list. */
+  openCalendar(anchor, current, onPick) {
+    const parsed = parseIsoDate(current);
+    let year = parsed?.getFullYear() ?? (/* @__PURE__ */ new Date()).getFullYear();
+    let month = parsed?.getMonth() ?? (/* @__PURE__ */ new Date()).getMonth();
+    const selected = parsed ? isoDate(parsed) : current;
+    const pop = new Popover({
+      trigger: anchor,
+      theme: this.theme,
+      className: "vela-ind-cal",
+      boundary: this.dialog ?? "viewport",
+      boundaryInset: 8,
+      gap: 4,
+      onClose: () => {
+        this.calendarPop = null;
+        this.calendarAnchor = null;
+      },
+      content: (el) => {
+        const title = document.createElement("div");
+        title.className = "vela-ind-cal-title";
+        const prev2 = document.createElement("button");
+        prev2.type = "button";
+        prev2.className = "vela-ind-cal-nav";
+        prev2.setAttribute("aria-label", "Previous month");
+        prev2.innerHTML = iconAt("chevron-left", 14);
+        const next = document.createElement("button");
+        next.type = "button";
+        next.className = "vela-ind-cal-nav";
+        next.setAttribute("aria-label", "Next month");
+        next.innerHTML = iconAt("chevron-right", 14);
+        const head = document.createElement("div");
+        head.className = "vela-ind-cal-head";
+        head.append(prev2, title, next);
+        const week = document.createElement("div");
+        week.className = "vela-ind-cal-week";
+        for (const d of WEEKDAY_LABELS) {
+          const cell = document.createElement("span");
+          cell.textContent = d;
+          week.appendChild(cell);
+        }
+        const grid = document.createElement("div");
+        grid.className = "vela-ind-cal-grid";
+        const paint = () => {
+          title.textContent = `${MONTH_LABELS[month]} ${year}`;
+          grid.replaceChildren();
+          const first = new Date(year, month, 1);
+          const startPad = first.getDay();
+          const days = new Date(year, month + 1, 0).getDate();
+          const today = isoDate(/* @__PURE__ */ new Date());
+          for (let i = 0; i < startPad; i++) {
+            const blank = document.createElement("span");
+            blank.className = "vela-ind-cal-blank";
+            grid.appendChild(blank);
+          }
+          for (let day = 1; day <= days; day++) {
+            const iso = `${year}-${String(month + 1).padStart(2, "0")}-${String(day).padStart(2, "0")}`;
+            const b = document.createElement("button");
+            b.type = "button";
+            b.className = "vela-ind-cal-day";
+            b.textContent = String(day);
+            if (iso === selected) b.dataset.checked = "1";
+            if (iso === today) b.dataset.today = "1";
+            b.addEventListener("click", (e) => {
+              e.stopPropagation();
+              pop.hide();
+              onPick(iso);
+            });
+            grid.appendChild(b);
+          }
+        };
+        prev2.addEventListener("click", (e) => {
+          e.stopPropagation();
+          month -= 1;
+          if (month < 0) {
+            month = 11;
+            year -= 1;
+          }
+          paint();
+        });
+        next.addEventListener("click", (e) => {
+          e.stopPropagation();
+          month += 1;
+          if (month > 11) {
+            month = 0;
+            year += 1;
+          }
+          paint();
+        });
+        paint();
+        el.append(head, week, grid);
+      }
+    });
+    this.calendarPop = pop;
+    this.calendarAnchor = anchor;
+    pop.show();
   }
   /**
    * `input.symbol` → a field that opens the host's ticker-selection UI when a picker is wired
@@ -4016,7 +4199,7 @@ var InputsUI = class {
   }
   /** Shared field chrome for text / number / select controls (fills its wrapper's width). */
   ctrlStyle() {
-    return `width:100%;box-sizing:border-box;height:32px;background:transparent;border:1px solid ${this.neutralBorder()};color:${this.strongText()};border-radius:6px;padding:0 8px;font-size:13px;font-family:inherit;outline:none;`;
+    return `width:100%;box-sizing:border-box;height:34px;background:transparent;border:1px solid var(--vela-border-strong);color:${this.strongText()};border-radius:6px;padding:0 8px;font-size:14px;font-family:inherit;outline:none;`;
   }
   /** Whether the active theme is dark (drives the dialog's `color-scheme`). */
   isDarkTheme() {
@@ -4035,21 +4218,6 @@ var InputsUI = class {
   strongText() {
     return "var(--vela-fg-bright)";
   }
-  /**
-   * Paint a `<select>` + its `<option>`s so the native dropdown popup matches the dialog: the
-   * option list's background is the dialog color and its text is the strong foreground. `color-scheme`
-   * alone doesn't theme the popup in every embedded browser (some render it white with white text —
-   * invisible), so the colors are set explicitly here.
-   */
-  styleSelect(sel) {
-    const bg = this.theme.background;
-    const fg = this.strongText();
-    sel.style.backgroundColor = bg;
-    for (const o of Array.from(sel.options)) {
-      o.style.backgroundColor = bg;
-      o.style.color = fg;
-    }
-  }
   dialogButton(label, primary, onClick) {
     const b = document.createElement("button");
     b.type = "button";
@@ -4063,6 +4231,21 @@ function nameOf(inp) {
   const t = inp.title;
   return t.length > 0 ? t.charAt(0).toUpperCase() + t.slice(1) : "";
 }
+var DEFAULT_INPUT_TAB = "Inputs";
+function tabInputs(inputs) {
+  const byTab = /* @__PURE__ */ new Map();
+  for (const inp of inputs) {
+    const name = inp.tab && inp.tab.length > 0 ? inp.tab : DEFAULT_INPUT_TAB;
+    if (!byTab.has(name)) byTab.set(name, []);
+    byTab.get(name).push(inp);
+  }
+  const names = [...byTab.keys()];
+  if (names.includes(DEFAULT_INPUT_TAB)) {
+    names.splice(names.indexOf(DEFAULT_INPUT_TAB), 1);
+    names.unshift(DEFAULT_INPUT_TAB);
+  }
+  return names.map((name) => ({ name, inputs: byTab.get(name) }));
+}
 function groupInputs(inputs) {
   const order = [];
   const byGroup = /* @__PURE__ */ new Map();
@@ -4091,9 +4274,10 @@ function groupInputs(inputs) {
   });
 }
 var CHECK_SVG = iconAt("check", 12);
-var SELECT_CHEVRON_SVG = iconAt("chevron-down", 16);
+var CALENDAR_SVG = iconAt("calendar", 14);
+var CLOCK_SVG = iconAt("clock", 14);
 var DIALOG_STYLE_ID = "vela-ind-dialog-styles";
-var DIALOG_STYLE_REV = "10";
+var DIALOG_STYLE_REV = "25";
 function ensureDialogStyles() {
   if (typeof document === "undefined") return;
   const existing = document.getElementById(DIALOG_STYLE_ID);
@@ -4102,30 +4286,47 @@ function ensureDialogStyles() {
   s.id = DIALOG_STYLE_ID;
   s.dataset.rev = DIALOG_STYLE_REV;
   s.textContent = `
-.vela-ind-dialog input[type=color]{-webkit-appearance:none;appearance:none;}
-.vela-ind-dialog input[type=color]::-webkit-color-swatch-wrapper{padding:0;}
-.vela-ind-dialog input[type=color]::-webkit-color-swatch{border:none;border-radius:4px;}
-.vela-ind-dialog input[type=color]::-moz-color-swatch{border:none;border-radius:4px;}
-.vela-ind-dialog input[type=text],.vela-ind-dialog input[type=number],.vela-ind-dialog select{transition:border-color .12s ease,box-shadow .12s ease;}
-.vela-ind-dialog select{-webkit-appearance:none;appearance:none;}
-.vela-ind-dialog input[type=text]:focus,.vela-ind-dialog input[type=number]:focus,.vela-ind-dialog select:focus{border-color:var(--vela-focus);box-shadow:0 0 0 3px var(--vela-focus-soft);}
-.vela-ind-dialog ::-webkit-scrollbar{width:9px;}
+.vela-ind-dialog input[type=text],.vela-ind-dialog input[type=number],.vela-ind-dialog input[type=date]{transition:border-color .12s ease,box-shadow .12s ease;}
+.vela-ind-dialog input[type=text]:hover,.vela-ind-dialog input[type=number]:hover,.vela-ind-dialog input[type=date]:hover{border-color:var(--vela-fg-muted);}
+.vela-ind-dialog input[type=text]:focus,.vela-ind-dialog input[type=number]:focus,.vela-ind-dialog input[type=date]:focus{border-color:var(--vela-focus);box-shadow:0 0 0 3px var(--vela-focus-soft);}
+.vela-ind-combo-chevron{position:absolute;right:0;top:0;bottom:0;width:26px;border:none;background:transparent;color:inherit;opacity:0.55;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;}
+.vela-ind-combo-chevron:hover{opacity:0.9;}
+.vela-ind-cal{background:var(--vela-bg);color:var(--vela-fg);border:none;border-radius:6px;box-shadow:var(--vela-shadow);font:14px var(--vela-font);padding:10px 12px;user-select:none;}
+.vela-ind-cal-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px;}
+.vela-ind-cal-title{flex:1;text-align:center;font-weight:600;font-size:14px;color:var(--vela-fg-bright);}
+.vela-ind-cal-nav{width:24px;height:24px;border:none;background:transparent;color:var(--vela-fg-muted);border-radius:4px;padding:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;}
+.vela-ind-cal-nav:hover{background:var(--vela-hover);color:var(--vela-fg-bright);}
+.vela-ind-cal-week,.vela-ind-cal-grid{display:grid;grid-template-columns:repeat(7,28px);gap:2px;}
+.vela-ind-cal-week{margin-bottom:4px;color:var(--vela-fg-muted);font-size:11px;text-align:center;}
+.vela-ind-cal-week span{line-height:20px;}
+.vela-ind-cal-blank{width:28px;height:28px;}
+.vela-ind-cal-day{width:28px;height:28px;border:none;background:transparent;color:inherit;border-radius:4px;padding:0;cursor:pointer;font:inherit;font-size:14px;}
+.vela-ind-cal-day:hover{background:var(--vela-hover);}
+.vela-ind-cal-day[data-checked]{background:var(--vela-hover-strong);color:var(--vela-fg-bright);}
+.vela-ind-cal-day[data-today]:not([data-checked]){box-shadow:inset 0 0 0 1px var(--vela-border-strong);}
+.vela-ind-dialog ::-webkit-scrollbar{width:9px;height:9px;}
 .vela-ind-dialog ::-webkit-scrollbar-thumb{background:var(--vela-scroll);border-radius:4px;border:2px solid transparent;background-clip:padding-box;}
 .vela-ind-dialog ::-webkit-scrollbar-track{background:transparent;}
+.vela-ind-dialog ::-webkit-scrollbar-button{display:none;width:0;height:0;}
+.vela-ind-tab{transition:color var(--vela-dur-fast) ease,border-color var(--vela-dur-fast) ease;}
+.vela-ind-tab:not(.vela-ind-tab-active):hover{color:var(--vela-fg-bright);}
 .vela-ind-hint{background:var(--vela-hover);color:var(--vela-fg-muted);transition:background var(--vela-dur-fast) ease,color var(--vela-dur-fast) ease;}
 .vela-ind-hint:hover{background:var(--vela-active);color:var(--vela-fg-bright);}
 .vela-ind-ctl,.vela-ind-close{background-color:transparent;color:inherit;transition:color var(--vela-dur-fast) ease,background-color var(--vela-dur-fast) ease;}
 .vela-ind-ctl svg,.vela-ind-close svg{width:${LEGEND_ICON_PX}px;height:${LEGEND_ICON_PX}px;display:block;flex:none;stroke-width:1;}
 .vela-ind-ctl:hover{background-color:var(--vela-hover-strong);}
 .vela-ind-close:hover{color:var(--vela-danger) !important;background-color:var(--vela-hover-strong);}
+.vela-ind-dlg-close{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:none;color:var(--vela-fg-muted);line-height:0;width:30px;height:30px;flex:0 0 auto;border-radius:var(--vela-radius-sm);transition:background var(--vela-dur-fast) ease,color var(--vela-dur-fast) ease;}
+.vela-ind-dlg-close:hover{background:var(--vela-hover);color:var(--vela-fg-bright);}
+.vela-ind-dlg-close svg{width:15px;height:15px;display:block;flex:none;}
 .vela-ind-fold{transition:border-color var(--vela-dur-fast) ease,opacity var(--vela-dur-fast) ease;}
 .vela-ind-fold:hover{border-color:var(--vela-border-strong);opacity:0.9;}
 .vela-ind-menuitem{background:transparent;transition:background var(--vela-dur-fast) ease;}
 .vela-ind-menuitem:hover{background:var(--vela-hover-strong);}
-.vela-ind-btn{cursor:pointer;padding:7px 14px;border-radius:var(--vela-radius-md);border:1px solid transparent;background:transparent;color:var(--vela-fg-muted);font-weight:600;font-size:13px;font-family:inherit;transition:background var(--vela-dur-fast) ease,color var(--vela-dur-fast) ease,opacity var(--vela-dur-fast) ease;}
-.vela-ind-btn:hover{background:var(--vela-hover);color:var(--vela-fg-bright);}
-.vela-ind-btn-primary{padding:7px 16px;border-color:var(--vela-selected-bg);background:var(--vela-selected-bg);color:var(--vela-selected-fg);}
-.vela-ind-btn-primary:hover{background:var(--vela-selected-bg);color:var(--vela-selected-fg);opacity:0.85;}`;
+.vela-ind-btn{cursor:pointer;height:34px;padding:0 11px;border-radius:6px;border:1px solid var(--vela-border-strong);background:transparent;color:var(--vela-fg);font-weight:400;font-size:14px;font-family:inherit;transition:background var(--vela-dur-fast) ease,color var(--vela-dur-fast) ease,opacity var(--vela-dur-fast) ease,border-color var(--vela-dur-fast) ease;}
+.vela-ind-btn:hover{background:var(--vela-hover);color:var(--vela-fg-bright);border-color:var(--vela-fg-muted);}
+.vela-ind-btn-primary{border-color:var(--vela-selected-bg);background:var(--vela-selected-bg);color:var(--vela-selected-fg);}
+.vela-ind-btn-primary:hover{background:var(--vela-selected-bg);color:var(--vela-selected-fg);opacity:0.85;border-color:var(--vela-selected-bg);}`;
   if (!existing) document.head.appendChild(s);
 }
 var TIMEFRAME_OPTIONS = [
@@ -4150,6 +4351,37 @@ var TIME_OPTIONS = Array.from({ length: 48 }, (_, i) => {
   const v = `${hh}:${mm}`;
   return { value: v, label: v };
 });
+var MONTH_LABELS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
+var WEEKDAY_LABELS = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
+function normalizeDateInput(raw) {
+  const t = raw.trim();
+  const m = /^(\d{4})-(\d{1,2})-(\d{1,2})$/.exec(t);
+  if (!m) return null;
+  const y = Number(m[1]);
+  const mo = Number(m[2]);
+  const d = Number(m[3]);
+  const dt = new Date(y, mo - 1, d);
+  if (dt.getFullYear() !== y || dt.getMonth() !== mo - 1 || dt.getDate() !== d) return null;
+  return isoDate(dt);
+}
+function parseIsoDate(raw) {
+  const iso = normalizeDateInput(raw);
+  if (!iso) return null;
+  const [y, mo, d] = iso.split("-").map(Number);
+  return new Date(y, mo - 1, d);
+}
+function isoDate(d) {
+  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
+}
+function normalizeTimeInput(raw) {
+  const t = raw.trim();
+  const m = /^(\d{1,2}):(\d{2})$/.exec(t) ?? /^(\d{2})(\d{2})$/.exec(t);
+  if (!m) return null;
+  const hh = Number(m[1]);
+  const mm = Number(m[2]);
+  if (hh > 23 || mm > 59) return null;
+  return `${String(hh).padStart(2, "0")}:${String(mm).padStart(2, "0")}`;
+}
 function sessionToTimes(session) {
   const m = /^(\d{2})(\d{2})-(\d{2})(\d{2})$/.exec(session.trim());
   if (!m) return ["09:00", "16:00"];
@@ -8256,6 +8488,12 @@ function extendEndpoints(x1, y1, x2, y2, extend, width, height) {
   const rx = right ? width + 2 : Math.max(x1, x2);
   return [lx, yAt(lx), rx, yAt(rx)];
 }
+function uprightLineAngle(x1, y1, x2, y2) {
+  let a = Math.atan2(y2 - y1, x2 - x1);
+  if (a > Math.PI / 2) a -= Math.PI;
+  if (a < -Math.PI / 2) a += Math.PI;
+  return a;
+}
 function parseColor2(c) {
   const s = c.trim();
   let m = /^#([0-9a-f]{3})$/i.exec(s);
@@ -9429,367 +9667,71 @@ function formatStamp(ms, timeZone) {
   return `${pad(d.getUTCMonth() + 1)}-${pad(d.getUTCDate())} ${pad(d.getUTCHours())}:${pad(d.getUTCMinutes())}`;
 }
 
-// src/renderers/native/drawings/colorPicker.ts
-function splitColor(color) {
-  const s = String(color ?? "").trim();
-  let m = /^#([0-9a-f]{6})([0-9a-f]{2})?$/i.exec(s);
-  if (m) return { hex6: `#${m[1].toLowerCase()}`, alpha: m[2] ? parseInt(m[2], 16) / 255 : 1 };
-  m = /^#([0-9a-f]{3})$/i.exec(s);
-  if (m) {
-    const h = m[1].toLowerCase();
-    return { hex6: `#${h[0]}${h[0]}${h[1]}${h[1]}${h[2]}${h[2]}`, alpha: 1 };
-  }
-  const rgba = /^rgba?\(([^)]+)\)/i.exec(s);
-  if (rgba) {
-    const p = rgba[1].split(",").map((v) => v.trim());
-    const hx = (n) => Math.max(0, Math.min(255, Math.round(n))).toString(16).padStart(2, "0");
-    const a = p[3] != null ? Math.max(0, Math.min(1, parseFloat(p[3]))) : 1;
-    return { hex6: `#${hx(parseInt(p[0] ?? "0", 10))}${hx(parseInt(p[1] ?? "0", 10))}${hx(parseInt(p[2] ?? "0", 10))}`, alpha: a };
-  }
-  return { hex6: DEFAULT_DRAWING_COLOR, alpha: 1 };
-}
-function combineColor(hex6, alpha) {
-  const a = Math.max(0, Math.min(1, alpha));
-  if (a >= 0.999) return hex6;
-  return `${hex6}${Math.round(a * 255).toString(16).padStart(2, "0")}`;
-}
-function blendOver(fg, bg, alpha) {
-  const rgb = (c) => {
-    const n = parseInt(splitColor(c).hex6.slice(1), 16);
-    return [n >> 16 & 255, n >> 8 & 255, n & 255];
-  };
-  const [fr, fgc, fb] = rgb(fg);
-  const [br, bgc, bb] = rgb(bg);
-  const a = Math.max(0, Math.min(1, alpha));
-  const h = (n) => Math.round(n).toString(16).padStart(2, "0");
-  return `#${h(fr * a + br * (1 - a))}${h(fgc * a + bgc * (1 - a))}${h(fb * a + bb * (1 - a))}`;
-}
-function hslHex(h, s, l) {
-  const sn = s / 100;
-  const ln = l / 100;
-  const k = (n) => (n + h / 30) % 12;
-  const a = sn * Math.min(ln, 1 - ln);
-  const f = (n) => ln - a * Math.max(-1, Math.min(k(n) - 3, Math.min(9 - k(n), 1)));
-  const to = (x) => Math.round(x * 255).toString(16).padStart(2, "0");
-  return `#${to(f(0))}${to(f(8))}${to(f(4))}`;
-}
-function buildPalette() {
-  const grays = [100, 90, 80, 68, 56, 45, 35, 25, 14, 0].map((l) => hslHex(0, 0, l));
-  const hues = [4, 28, 50, 96, 140, 174, 200, 224, 270, 322];
-  const levels = [
-    [82, 56],
-    // vivid
-    [58, 84],
-    // light pastel
-    [62, 74],
-    [66, 62],
-    [70, 50],
-    [64, 39],
-    [54, 29]
-    // dark
-  ];
-  return [grays, ...levels.map(([s, l]) => hues.map((h) => hslHex(h, s, l)))];
-}
-var PALETTE = buildPalette();
-function transparencyChecker(size) {
-  return `repeating-conic-gradient(#9aa0a6 0% 25%, #d3d6da 0% 50%) 0 0 / ${size}px ${size}px`;
-}
-var CHECKER = transparencyChecker(10);
-var recents = [ACCENT, BULLISH, BEARISH, WARNING, NEUTRAL];
-function addRecent(hex6) {
-  const i = recents.findIndex((c) => c.toLowerCase() === hex6.toLowerCase());
-  if (i >= 0) recents.splice(i, 1);
-  recents.unshift(hex6);
-  if (recents.length > 10) recents.length = 10;
-}
-function buildColorPicker(color, theme, onChange) {
-  const parsed = splitColor(color);
-  let curHex = parsed.hex6;
-  let curAlpha = parsed.alpha;
-  const root = document.createElement("div");
-  root.style.cssText = "display:flex;flex-direction:column;gap:9px;width:236px;";
-  const grid = document.createElement("div");
-  grid.style.cssText = "display:grid;grid-template-columns:repeat(10,1fr);gap:4px;";
-  const swatches = [];
-  for (const row of PALETTE) {
-    for (const c of row) {
-      const sw = document.createElement("button");
-      sw.type = "button";
-      sw.dataset.c = c;
-      sw.style.cssText = `width:100%;aspect-ratio:1;border-radius:4px;border:none;cursor:pointer;background:${c};padding:0;`;
-      sw.addEventListener("click", (e) => {
-        e.stopPropagation();
-        pickHex(c);
-      });
-      grid.appendChild(sw);
-      swatches.push(sw);
-    }
-  }
-  const paintSelection = () => {
-    for (const sw of swatches) {
-      const on = (sw.dataset.c ?? "").toLowerCase() === curHex.toLowerCase();
-      sw.style.outline = on ? `2px solid ${theme.textColor}` : "none";
-      sw.style.outlineOffset = "2px";
-      sw.style.zIndex = on ? "1" : "";
-      sw.style.position = on ? "relative" : "";
-    }
-  };
-  const recentRow = document.createElement("div");
-  recentRow.style.cssText = "display:flex;align-items:center;gap:5px;flex-wrap:wrap;border-top:1px solid var(--vela-border);padding-top:9px;";
-  const renderRecents = () => {
-    recentRow.replaceChildren();
-    for (const c of recents) {
-      const sw = document.createElement("button");
-      sw.type = "button";
-      sw.style.cssText = `width:17px;height:17px;border-radius:var(--vela-radius-sm);border:1px solid var(--vela-border);cursor:pointer;background:${c};padding:0;`;
-      sw.addEventListener("click", (e) => {
-        e.stopPropagation();
-        pickHex(c);
-      });
-      recentRow.appendChild(sw);
-    }
-    const add = document.createElement("label");
-    add.style.cssText = `width:17px;height:17px;border-radius:var(--vela-radius-sm);border:1px dashed var(--vela-border-strong);cursor:pointer;display:flex;align-items:center;justify-content:center;color:${theme.textColor};font:14px ${theme.fontFamily};position:relative;`;
-    add.textContent = "+";
-    const input = document.createElement("input");
-    input.type = "color";
-    input.value = curHex;
-    input.style.cssText = "position:absolute;inset:0;opacity:0;cursor:pointer;";
-    input.addEventListener("input", () => pickHex(input.value, true));
-    add.appendChild(input);
-    recentRow.appendChild(add);
-  };
-  const opLabel = document.createElement("div");
-  opLabel.textContent = "Opacity";
-  opLabel.style.cssText = `font:11px ${theme.fontFamily};color:var(--vela-fg-muted);`;
-  const opRow = document.createElement("div");
-  opRow.style.cssText = "display:flex;align-items:center;gap:10px;";
-  const track = document.createElement("div");
-  track.style.cssText = "flex:1;position:relative;height:13px;border-radius:7px;cursor:pointer;";
-  const knob = document.createElement("div");
-  knob.style.cssText = "position:absolute;top:50%;width:15px;height:15px;border-radius:50%;background:var(--vela-selected-bg);box-shadow:0 1px 3px rgba(0,0,0,0.55);transform:translate(-50%,-50%);pointer-events:none;";
-  track.appendChild(knob);
-  const pctBox = document.createElement("div");
-  pctBox.style.cssText = `min-width:42px;text-align:center;font:var(--vela-font-size-md) ${theme.fontFamily};color:var(--vela-fg);border:1px solid var(--vela-border);border-radius:5px;padding:3px 4px;`;
-  opRow.append(track, pctBox);
-  const paintOpacity = () => {
-    track.style.background = `linear-gradient(to right, ${curHex}00, ${curHex}ff), ${CHECKER}`;
-    knob.style.left = `${curAlpha * 100}%`;
-    pctBox.textContent = `${Math.round(curAlpha * 100)}%`;
-  };
-  let dragging = false;
-  const onDrag = (clientX) => {
-    const r = track.getBoundingClientRect();
-    curAlpha = Math.max(0, Math.min(1, (clientX - r.left) / r.width));
-    paintOpacity();
-    emit();
-  };
-  track.addEventListener("pointerdown", (e) => {
-    e.stopPropagation();
-    dragging = true;
-    track.setPointerCapture(e.pointerId);
-    onDrag(e.clientX);
-  });
-  track.addEventListener("pointermove", (e) => {
-    if (dragging) onDrag(e.clientX);
-  });
-  track.addEventListener("pointerup", () => dragging = false);
-  function emit() {
-    onChange(combineColor(curHex, curAlpha));
-  }
-  function pickHex(hex, custom = false) {
-    curHex = splitColor(hex).hex6;
-    addRecent(curHex);
-    paintSelection();
-    paintOpacity();
-    if (custom) renderRecents();
-    emit();
-  }
-  renderRecents();
-  paintSelection();
-  paintOpacity();
-  root.append(grid, recentRow, opLabel, opRow);
-  return root;
-}
-
-// src/renderers/native/chrome/ColorField.ts
-var CHECKER2 = transparencyChecker(8);
-var STYLE_ID3 = "vela-color-field";
-function ensureStyles3() {
-  if (typeof document === "undefined" || document.getElementById(STYLE_ID3)) return;
-  const st = document.createElement("style");
-  st.id = STYLE_ID3;
-  st.textContent = `
-.vela-color-field{width:24px;height:24px;padding:2px;border:1px solid var(--vela-border);border-radius:0;background:var(--vela-surface-sunken);cursor:pointer;display:inline-flex;flex:none;}
-.vela-color-field:hover{border-color:var(--vela-fg-muted);}
-.vela-color-field-swatch{display:block;width:100%;height:100%;border-radius:0;box-shadow:inset 0 0 0 1px rgba(0,0,0,0.25);}
-.vela-color-field-pop{position:fixed;z-index:6000;background:var(--vela-surface-overlay);border:1px solid var(--vela-border);border-radius:var(--vela-radius-lg);box-shadow:var(--vela-shadow);padding:10px;}
-`;
-  document.head.appendChild(st);
-}
-var openPopover = null;
-function closeOpen() {
-  if (!openPopover) return;
-  document.removeEventListener("pointerdown", openPopover.onOutside, true);
-  window.removeEventListener("resize", openPopover.reflow, true);
-  openPopover.el.remove();
-  openPopover = null;
-}
-function place(pop, trigger) {
-  const r = trigger.getBoundingClientRect();
-  const w = pop.offsetWidth;
-  const h = pop.offsetHeight;
-  let left = r.right - w;
-  let top = r.bottom + 6;
-  if (left < 6) left = 6;
-  if (left + w > window.innerWidth - 6) left = window.innerWidth - w - 6;
-  if (top + h > window.innerHeight - 6) top = r.top - h - 6;
-  if (top < 6) top = 6;
-  pop.style.left = `${Math.round(left)}px`;
-  pop.style.top = `${Math.round(top)}px`;
-}
-function colorField(theme, getVal, onVal) {
-  ensureStyles3();
-  const trigger = document.createElement("button");
-  trigger.type = "button";
-  trigger.className = "vela-color-field";
-  const swatch = document.createElement("span");
-  swatch.className = "vela-color-field-swatch";
-  trigger.appendChild(swatch);
-  const paint = () => {
-    const v = getVal();
-    swatch.style.background = `linear-gradient(${v}, ${v}), ${CHECKER2}`;
-  };
-  paint();
-  trigger.addEventListener("vela-sync", paint);
-  trigger.addEventListener("click", (e) => {
-    e.stopPropagation();
-    if (openPopover && openPopover.trigger === trigger) {
-      closeOpen();
-      return;
-    }
-    closeOpen();
-    const pop = document.createElement("div");
-    pop.className = "vela-color-field-pop";
-    applyChromeTokens(pop, theme);
-    pop.addEventListener("pointerdown", (ev) => ev.stopPropagation());
-    pop.appendChild(
-      buildColorPicker(getVal(), theme, (val) => {
-        onVal(val);
-        paint();
-      })
-    );
-    document.body.appendChild(pop);
-    place(pop, trigger);
-    const onOutside = (ev) => {
-      const t = ev.target;
-      if (pop.contains(t) || trigger.contains(t)) return;
-      closeOpen();
-    };
-    const reflow = () => place(pop, trigger);
-    setTimeout(() => document.addEventListener("pointerdown", onOutside, true), 0);
-    window.addEventListener("resize", reflow, true);
-    openPopover = { el: pop, trigger, onOutside, reflow };
-  });
-  return trigger;
-}
-function closeColorPopover() {
-  closeOpen();
-}
-
 // src/renderers/native/chrome/WidthField.ts
 var WIDTH_FIELD_OPTIONS = [1, 2, 3, 4, 5];
-var STYLE_ID4 = "vela-width-field";
-function ensureStyles4() {
-  if (typeof document === "undefined" || document.getElementById(STYLE_ID4)) return;
-  const st = document.createElement("style");
-  st.id = STYLE_ID4;
-  st.textContent = `
+var STYLE_ID3 = "vela-width-field";
+var WIDTH_CSS = `
 .vela-width-field{height:28px;padding:0 8px;border:1px solid var(--vela-border-strong);border-radius:var(--vela-radius-sm);background:var(--vela-surface-elev);cursor:pointer;display:inline-flex;align-items:center;gap:8px;flex:none;color:var(--vela-fg);font-family:inherit;outline:none;}
 .vela-width-field:hover{border-color:var(--vela-fg-muted);}
-.vela-width-field-pop{position:fixed;z-index:6000;background:var(--vela-surface-overlay);border:1px solid var(--vela-border);border-radius:var(--vela-radius-lg);box-shadow:var(--vela-shadow);padding:4px;display:flex;flex-direction:column;gap:1px;color:var(--vela-fg);}
+.vela-width-field-caret{display:flex;color:var(--vela-fg-muted);}
+.vela-width-field-pop{background:var(--vela-surface-overlay);border:1px solid var(--vela-border);border-radius:var(--vela-radius-lg);box-shadow:var(--vela-shadow);padding:4px;display:flex;flex-direction:column;gap:1px;color:var(--vela-fg);}
 .vela-width-field-item{display:flex;align-items:center;gap:8px;min-width:96px;padding:5px 8px;border:none;border-radius:5px;background:transparent;color:inherit;cursor:pointer;text-align:left;font:inherit;}
 .vela-width-field-item:hover{background:var(--vela-hover-strong);}
 .vela-width-field-item[data-active='1']{background:var(--vela-active);}
 `;
-  document.head.appendChild(st);
-}
 function lineGlyph(width) {
   return `<svg width="22" height="14" viewBox="0 0 22 14" fill="none"><line x1="2" y1="7" x2="20" y2="7" stroke="currentColor" stroke-width="${width}" stroke-linecap="round"/></svg>`;
 }
-var CHEVRON = `<svg width="8" height="5" viewBox="0 0 8 5" fill="none"><path d="M1 1l3 3 3-3" stroke="#868a96" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>`;
-var openPopover2 = null;
-function closeOpen2() {
-  if (!openPopover2) return;
-  document.removeEventListener("pointerdown", openPopover2.onOutside, true);
-  window.removeEventListener("resize", openPopover2.reflow, true);
-  openPopover2.el.remove();
-  openPopover2 = null;
-}
-function place2(pop, trigger) {
-  const r = trigger.getBoundingClientRect();
-  const w = pop.offsetWidth;
-  const h = pop.offsetHeight;
-  let left = r.right - w;
-  let top = r.bottom + 6;
-  if (left < 6) left = 6;
-  if (left + w > window.innerWidth - 6) left = window.innerWidth - w - 6;
-  if (top + h > window.innerHeight - 6) top = r.top - h - 6;
-  if (top < 6) top = 6;
-  pop.style.left = `${Math.round(left)}px`;
-  pop.style.top = `${Math.round(top)}px`;
-}
+var CHEVRON = `<svg width="8" height="5" viewBox="0 0 8 5" fill="none"><path d="M1 1l3 3 3-3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>`;
 function widthField(theme, getVal, onVal) {
-  ensureStyles4();
+  injectStyles(STYLE_ID3, WIDTH_CSS, document);
   const trigger = document.createElement("button");
   trigger.type = "button";
   trigger.className = "vela-width-field";
   const paint = () => {
-    trigger.innerHTML = `<span style="display:flex;">${lineGlyph(getVal())}</span><span style="display:flex;">${CHEVRON}</span>`;
+    trigger.innerHTML = `<span style="display:flex;">${lineGlyph(getVal())}</span><span class="vela-width-field-caret">${CHEVRON}</span>`;
   };
   paint();
+  trigger.addEventListener("pointerdown", (e) => {
+    e.preventDefault();
+    trigger.focus({ preventScroll: true });
+  });
   trigger.addEventListener("click", (e) => {
     e.stopPropagation();
-    if (openPopover2 && openPopover2.trigger === trigger) {
-      closeOpen2();
+    if (openPopoverTrigger() === trigger) {
+      closeOpenPopovers();
       return;
     }
-    closeOpen2();
-    const pop = document.createElement("div");
-    pop.className = "vela-width-field-pop";
-    applyChromeTokens(pop, theme);
-    pop.style.font = `var(--vela-font-size-md) ${theme.fontFamily}`;
-    pop.addEventListener("pointerdown", (ev) => ev.stopPropagation());
-    for (const w of WIDTH_FIELD_OPTIONS) {
-      const item = document.createElement("button");
-      item.type = "button";
-      item.className = "vela-width-field-item";
-      item.dataset.active = w === getVal() ? "1" : "0";
-      item.innerHTML = `<span style="display:flex;flex:none;">${lineGlyph(w)}</span><span style="flex:1;font-variant-numeric:tabular-nums;">${w}px</span>`;
-      item.addEventListener("click", (ev) => {
-        ev.stopPropagation();
-        closeOpen2();
-        onVal(w);
-        paint();
-      });
-      pop.appendChild(item);
-    }
-    document.body.appendChild(pop);
-    place2(pop, trigger);
-    const onOutside = (ev) => {
-      const t = ev.target;
-      if (pop.contains(t) || trigger.contains(t)) return;
-      closeOpen2();
-    };
-    const reflow = () => place2(pop, trigger);
-    setTimeout(() => document.addEventListener("pointerdown", onOutside, true), 0);
-    window.addEventListener("resize", reflow, true);
-    openPopover2 = { el: pop, trigger, onOutside, reflow };
+    const pop = new Popover({
+      trigger,
+      theme,
+      align: "end",
+      gap: 6,
+      className: "vela-width-field-pop",
+      content: (el) => {
+        el.style.font = `var(--vela-font-size-md) ${theme.fontFamily}`;
+        for (const w of WIDTH_FIELD_OPTIONS) {
+          const item = document.createElement("button");
+          item.type = "button";
+          item.className = "vela-width-field-item";
+          item.dataset.active = w === getVal() ? "1" : "0";
+          item.innerHTML = `<span style="display:flex;flex:none;">${lineGlyph(w)}</span><span style="flex:1;font-variant-numeric:tabular-nums;">${w}px</span>`;
+          item.addEventListener("click", (ev) => {
+            ev.stopPropagation();
+            pop.hide();
+            onVal(w);
+            paint();
+          });
+          el.appendChild(item);
+        }
+      }
+    });
+    pop.show();
   });
   return trigger;
 }
 function closeWidthPopover() {
-  closeOpen2();
+  closeOpenPopovers();
 }
 
 // src/renderers/native/chrome/SettingsDialog.ts
@@ -9804,37 +9746,24 @@ function styleLabel(id) {
   return chartType(id)?.label ?? BUILTIN_STYLE_LABELS[id] ?? id;
 }
 var SD_STYLE_ID = "vela-settings-controls";
+var SD_STYLE_REV = "2";
 var SETTINGS_SURFACE = "var(--vela-surface)";
 var SETTINGS_BORDER = "var(--vela-border)";
 var SETTINGS_TEXT = "var(--vela-fg)";
 function ensureControlStyles() {
-  if (typeof document === "undefined" || document.getElementById(SD_STYLE_ID)) return;
-  const st = document.createElement("style");
+  if (typeof document === "undefined") return;
+  const existing = document.getElementById(SD_STYLE_ID);
+  if (existing?.dataset.rev === SD_STYLE_REV) return;
+  const st = existing ?? document.createElement("style");
   st.id = SD_STYLE_ID;
+  st.dataset.rev = SD_STYLE_REV;
   st.textContent = `
-.vela-sd-check{width:18px;height:18px;flex:none;display:inline-flex;align-items:center;justify-content:center;padding:0;border:1px solid var(--vela-border-strong);border-radius:5px;background:transparent;color:transparent;cursor:pointer;}
-.vela-sd-check:hover{border-color:var(--vela-fg-muted);}
-.vela-sd-check.on{background:var(--vela-selected-bg);border-color:var(--vela-selected-bg);color:var(--vela-selected-fg);}
-.vela-sd-check svg{display:block;}
-.vela-sd-select,.vela-sd-number{height:28px;background:var(--vela-surface-elev);border:1px solid var(--vela-border-strong);border-radius:var(--vela-radius-sm);color:var(--vela-fg);padding:0 8px;font-size:13px;outline:none;font-family:inherit;}
-.vela-sd-select:hover,.vela-sd-number:hover{border-color:var(--vela-fg-muted);}
-/* Custom caret: the native one hugs the right border; ours gets 8px of air. (A data URI
-   can't read currentColor, so it uses the shared muted-gray ink, legible on both themes.) */
-.vela-sd-select{-webkit-appearance:none;appearance:none;padding-right:26px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath d='M1 1l3 3 3-3' fill='none' stroke='%23868a96' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center;}
-.vela-sd-number{width:64px;}
-.vela-sd-color{width:32px;height:26px;padding:0;border:1px solid var(--vela-border);border-radius:var(--vela-radius-sm);background:transparent;cursor:pointer;-webkit-appearance:none;appearance:none;}
-.vela-sd-color::-webkit-color-swatch-wrapper{padding:2px;}
-.vela-sd-color::-webkit-color-swatch{border:none;border-radius:2px;}
 .vela-sd-pane::-webkit-scrollbar{width:8px;}
 .vela-sd-pane::-webkit-scrollbar-thumb{background:var(--vela-scroll);border-radius:var(--vela-radius-sm);border:2px solid transparent;background-clip:padding-box;}
 .vela-sd-pane::-webkit-scrollbar-track{background:transparent;}
-.vela-sd-toggle{position:relative;width:38px;height:22px;border-radius:11px;background:var(--vela-surface-sunken);border:1px solid var(--vela-border);cursor:pointer;flex:none;padding:0;}
-.vela-sd-toggle::after{content:'';position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--vela-fg-muted);transition:transform var(--vela-dur-med) ease,background var(--vela-dur-med) ease;}
-.vela-sd-toggle.on{background:var(--vela-active);border-color:var(--vela-selected-bg);}
-.vela-sd-toggle.on::after{transform:translateX(16px);background:var(--vela-selected-bg);}
 /* Tab rail / footer button / header close: base styles live HERE, not inline on the
    elements \u2014 inline declarations always beat stylesheet :hover rules, which is exactly
-   what killed these hovers before. Active tab state is the .on class (like .vela-sd-check),
+   what killed these hovers before. Active tab state is the .on class,
    hover fills follow the app convention (--vela-hover + --vela-fg-bright, fast transition). */
 .vela-sd-tab{text-align:left;padding:9px 12px;background:transparent;border:none;border-radius:var(--vela-radius-md);color:var(--vela-fg-muted);font-weight:600;font-size:13px;font-family:inherit;cursor:pointer;transition:background var(--vela-dur-fast) ease,color var(--vela-dur-fast) ease;}
 .vela-sd-tab:hover{background:var(--vela-hover);color:var(--vela-fg-bright);}
@@ -9893,13 +9822,13 @@ function ensureControlStyles() {
 .vela-sd-mobile .vela-sd-itabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;}
 .vela-sd-mobile .vela-sd-itabs::-webkit-scrollbar{display:none;}
 .vela-sd-mobile .vela-sd-itab{height:36px;flex:none;}
-.vela-sd-mobile .vela-sd-check{width:22px;height:22px;}
-.vela-sd-mobile .vela-sd-select,.vela-sd-mobile .vela-sd-number{height:34px;}
+.vela-sd-mobile .vela-switch{width:22px;height:22px;}
+.vela-sd-mobile .vela-select[data-size='sm'] .vela-select-trigger,.vela-sd-mobile .vela-num[data-size='sm'] input{height:34px;}
 .vela-sd-mobile .vela-sd-close{width:40px;height:40px;}
 .vela-sd-mobile .vela-sd-btn{height:38px;}
 .vela-sd-mobile .vela-sd-row span,.vela-sd-mobile .vela-sd-bool span{white-space:normal !important;}
 `;
-  document.head.appendChild(st);
+  if (!existing) document.head.appendChild(st);
 }
 var SettingsDialog = class {
   constructor(container, theme) {
@@ -10223,7 +10152,7 @@ var SettingsDialog = class {
     }
     const paneHost = document.createElement("div");
     paneHost.className = "vela-sd-pane";
-    paneHost.style.cssText = mobile ? "flex:1;min-width:0;overflow-y:auto;padding:6px 14px calc(14px + env(safe-area-inset-bottom, 0px));" : "flex:1;overflow-y:auto;padding:6px 18px 14px;";
+    paneHost.style.cssText = mobile ? "flex:1;min-width:0;overflow-y:auto;overflow-anchor:none;padding:6px 14px calc(14px + env(safe-area-inset-bottom, 0px));" : "flex:1;overflow-y:auto;overflow-anchor:none;padding:6px 18px 14px;";
     const panes = [];
     let current = null;
     for (const child of [...body.children]) {
@@ -10289,7 +10218,7 @@ var SettingsDialog = class {
     }
   }
   close() {
-    closeColorPopover();
+    closeOpenPopovers();
     closeWidthPopover();
     this.root?.remove();
     this.root = null;
@@ -10444,50 +10373,41 @@ var SettingsDialog = class {
       return wf;
     }
     if (c.kind === "select") {
-      const sel = document.createElement("select");
-      sel.className = "vela-sd-select";
-      sel.style.cssText = "max-width:200px;flex:0 0 auto;";
-      sel.title = c.label;
       const current2 = typeof bag[c.key] === "string" ? bag[c.key] : c.defval;
-      for (const [val, lbl] of normalizeSelectOptions(c.options)) {
-        const o = document.createElement("option");
-        o.value = val;
-        o.textContent = lbl;
-        if (val === current2) o.selected = true;
-        sel.appendChild(o);
-      }
-      sel.addEventListener("change", () => put(c.key, sel.value));
-      sel.addEventListener("vela-sync", () => {
-        sel.value = typeof bag[c.key] === "string" ? bag[c.key] : c.defval;
-      });
-      return sel;
-    }
-    const ni = document.createElement("input");
-    ni.type = "number";
-    ni.className = "vela-sd-number";
-    if (compact) ni.style.width = "56px";
-    if (c.min !== void 0) ni.min = String(c.min);
-    if (c.max !== void 0) ni.max = String(c.max);
-    ni.step = String(c.step ?? 1);
-    ni.title = c.label;
-    const current = typeof bag[c.key] === "number" ? bag[c.key] : c.defval;
-    if (c.placeholder !== void 0) {
-      ni.placeholder = c.placeholder;
-      if (current !== c.defval) ni.value = String(current);
-      ni.addEventListener("change", () => {
-        const raw = ni.value.trim() === "" ? c.defval : Number(ni.value);
-        const v = Number.isFinite(raw) ? Math.min(c.max ?? Infinity, Math.max(c.min ?? -Infinity, raw)) : c.defval;
-        ni.value = v === c.defval ? "" : String(v);
-        put(c.key, v);
+      const sel = new Select({
+        options: normalizeSelectOptions(c.options).map(([value, label]) => ({ value, label })),
+        value: current2,
+        size: "sm",
+        theme: this.theme,
+        onChange: (v) => put(c.key, v)
       });
-    } else {
-      ni.value = String(current);
-      ni.addEventListener("input", () => {
-        const v = Number(ni.value);
-        if (Number.isFinite(v)) put(c.key, v);
+      sel.el.title = c.label;
+      sel.el.addEventListener("vela-sync", () => {
+        sel.setValue(typeof bag[c.key] === "string" ? bag[c.key] : c.defval);
       });
+      return sel.el;
     }
-    return ni;
+    const current = typeof bag[c.key] === "number" ? bag[c.key] : c.defval;
+    const ni = new NumberInput({
+      value: current,
+      min: c.min,
+      max: c.max,
+      step: c.step ?? 1,
+      size: "sm",
+      commit: "live",
+      clamp: c.placeholder !== void 0,
+      steppers: false,
+      compact,
+      title: c.label,
+      placeholder: c.placeholder,
+      emptyValue: c.placeholder !== void 0 ? c.defval : void 0,
+      onChange: (v) => put(c.key, v)
+    });
+    ni.el.addEventListener("vela-sync", () => {
+      const next = typeof bag[c.key] === "number" ? bag[c.key] : c.defval;
+      ni.setValue(next);
+    });
+    return ni.el;
   }
   /**
    * The INSTANCE STRIP block: a tab per present instance (label, `×` on the active
@@ -10768,28 +10688,27 @@ var SettingsDialog = class {
    *  only one visible at a time; see `typeRow`). */
   toggleRow(label, value, onToggle, controls, get) {
     const wrap = document.createElement("div");
-    const cb = document.createElement("button");
-    cb.type = "button";
-    cb.className = "vela-sd-check" + (value ? " on" : "");
-    cb.innerHTML = iconAt("check", 11);
-    let checked = value;
-    const cbToggle = () => {
-      checked = !checked;
-      cb.classList.toggle("on", checked);
-      return checked;
-    };
+    const sw = new Switch({ checked: value, size: "sm", onChange: (v) => {
+      onToggle(v);
+      if (controls.length > 0) syncDim(v);
+    } });
     const lbl = document.createElement("span");
     lbl.textContent = label;
     lbl.style.cssText = "opacity:0.85;white-space:nowrap;";
+    const syncDim = (on) => {
+      for (const c of controls) {
+        if (c.dataset.sdSelfGated === "1") continue;
+        c.style.opacity = on ? "1" : "0.4";
+        c.style.pointerEvents = on ? "" : "none";
+      }
+    };
     if (controls.length === 0) {
       wrap.className = "vela-sd-bool";
       wrap.style.cssText = "display:flex;align-items:center;gap:8px;min-height:22px;";
-      wrap.append(cb, lbl);
-      cb.addEventListener("click", () => onToggle(cbToggle()));
+      wrap.append(sw.el, lbl);
       if (get) {
         wrap.addEventListener("vela-sync", () => {
-          checked = get();
-          cb.classList.toggle("on", checked);
+          sw.setChecked(get());
         });
       }
       return wrap;
@@ -10797,28 +10716,16 @@ var SettingsDialog = class {
     wrap.className = "vela-sd-row";
     const left = document.createElement("div");
     left.style.cssText = "display:flex;align-items:center;gap:8px;";
-    left.append(cb, lbl);
+    left.append(sw.el, lbl);
     const box = document.createElement("div");
     box.style.cssText = "display:flex;align-items:center;gap:6px;";
     for (const c of controls) box.appendChild(c);
-    const syncDim = (on) => {
-      for (const c of controls) {
-        if (c.dataset.sdSelfGated === "1") continue;
-        c.style.opacity = on ? "1" : "0.4";
-        c.style.pointerEvents = on ? "" : "none";
-      }
-    };
     syncDim(value);
-    cb.addEventListener("click", () => {
-      const v = cbToggle();
-      onToggle(v);
-      syncDim(v);
-    });
     if (get) {
       wrap.addEventListener("vela-sync", () => {
-        checked = get();
-        cb.classList.toggle("on", checked);
-        syncDim(checked);
+        const v = get();
+        sw.setChecked(v);
+        syncDim(v);
       });
     }
     wrap.append(left, box);
@@ -10826,52 +10733,23 @@ var SettingsDialog = class {
   }
   numberRow(label, value, min, max, step, onChange) {
     const { wrap } = this.row(label);
-    const ni = document.createElement("input");
-    ni.type = "number";
-    ni.value = String(value);
-    ni.min = String(min);
-    ni.max = String(max);
-    ni.step = String(step);
-    ni.className = "vela-sd-number";
-    ni.addEventListener("input", () => {
-      const n = Number(ni.value);
-      if (Number.isFinite(n)) onChange(n);
-    });
-    wrap.appendChild(ni);
+    wrap.appendChild(new NumberInput({ value, min, max, step, size: "sm", commit: "live", onChange }).el);
     return wrap;
   }
   /** A dropdown whose option values differ from their display labels. */
   selectRowLabeled(label, value, options, onChange) {
     const { wrap } = this.row(label);
-    const sel = document.createElement("select");
-    sel.className = "vela-sd-select";
-    sel.style.cssText = "max-width:200px;flex:0 0 auto;";
-    for (const [val, lbl] of options) {
-      const o = document.createElement("option");
-      o.value = val;
-      o.textContent = lbl;
-      if (val === value) o.selected = true;
-      sel.appendChild(o);
-    }
-    sel.addEventListener("change", () => onChange(sel.value));
-    wrap.appendChild(sel);
+    wrap.appendChild(new Select({
+      options: options.map(([v, l]) => ({ value: v, label: l })),
+      value,
+      size: "sm",
+      theme: this.theme,
+      onChange
+    }).el);
     return wrap;
   }
   selectRow(label, value, options, onChange) {
-    const { wrap } = this.row(label);
-    const sel = document.createElement("select");
-    sel.className = "vela-sd-select";
-    sel.style.cssText = "max-width:200px;flex:0 0 auto;";
-    for (const opt of options) {
-      const o = document.createElement("option");
-      o.value = opt;
-      o.textContent = opt;
-      if (opt === value) o.selected = true;
-      sel.appendChild(o);
-    }
-    sel.addEventListener("change", () => onChange(sel.value));
-    wrap.appendChild(sel);
-    return wrap;
+    return this.selectRowLabeled(label, value, options.map((o) => [o, o]), onChange);
   }
   /** Footer with the full config as JSON — the export/import (templating) surface. */
   footer(_config) {
@@ -11262,13 +11140,19 @@ var DrawingPainter = class {
     }
     this.paintLabel(ctx, d, proj, theme);
   }
-  /** Draw a drawing's optional text label at a type-appropriate anchor (multi-line aware). */
+  /** Draw a drawing's optional text label at a type-appropriate anchor (multi-line aware).
+   *  Two-point line tools rotate the glyphs to follow the segment, kept upright. */
   paintLabel(ctx, d, proj, theme) {
     const text = d.text;
     if (!text || !text.value || d.id === this.targets.mutedLabel) return;
     const layout = labelLayout(d, proj);
     if (!layout) return;
     const fs = namedFontSize(text.size);
+    ctx.save();
+    if (layout.rotate) {
+      ctx.translate(layout.rotate.cx, layout.rotate.cy);
+      ctx.rotate(layout.rotate.angle);
+    }
     ctx.font = `${text.bold ? "bold " : ""}${text.italic ? "italic " : ""}${fs}px ${theme.fontFamily}`;
     ctx.textBaseline = "top";
     ctx.textAlign = layout.align;
@@ -11276,8 +11160,8 @@ var DrawingPainter = class {
     const lh = labelLineHeight(fs);
     const lines = text.value.split("\n");
     lines.forEach((line, i) => ctx.fillText(line, layout.x, layout.top + i * lh));
-    ctx.textAlign = "left";
     if (d.type === "text") this.paintTextFrame(ctx, d.id, layout.x, layout.top, lines, fs, theme);
+    ctx.restore();
   }
   /** Frame a plain text label while it is the target, so the text reads as a clickable object even
    *  though it has no shape of its own: a firm frame once selected, a fainter one under the cursor.
@@ -12220,7 +12104,14 @@ function labelLayout(d, proj) {
     case "infoline":
     case "trendangle": {
       if (pts.length < 2) return null;
-      return { x: (pts[0][0] + pts[1][0]) / 2, top: (pts[0][1] + pts[1][1]) / 2 - 6 - lh * lines, align: "center" };
+      const [x1, y1] = pts[0];
+      const [x2, y2] = pts[1];
+      return {
+        x: 0,
+        top: -6 - lh * lines,
+        align: "center",
+        rotate: { angle: uprightLineAngle(x1, y1, x2, y2), cx: (x1 + x2) / 2, cy: (y1 + y2) / 2 }
+      };
     }
     case "box": {
       if (pts.length < 2) return null;
@@ -12569,11 +12460,11 @@ function applyFree(anchor, pt, free) {
 // src/renderers/native/drawings/DrawingSettingsPopup.ts
 var BTN = 30;
 var ICON = 21;
-var STYLE_ID5 = "vela-drawing-popup-styles";
-function ensureStyles5() {
-  if (typeof document === "undefined" || document.getElementById(STYLE_ID5)) return;
+var STYLE_ID4 = "vela-drawing-popup-styles";
+function ensureStyles3() {
+  if (typeof document === "undefined" || document.getElementById(STYLE_ID4)) return;
   const s = document.createElement("style");
-  s.id = STYLE_ID5;
+  s.id = STYLE_ID4;
   s.textContent = `
 .vela-dpop input[type=color]{-webkit-appearance:none;appearance:none;border:none;padding:0;background:none;cursor:pointer;border-radius:0;}
 .vela-dpop input[type=color]::-webkit-color-swatch-wrapper{padding:0;}
@@ -12607,17 +12498,14 @@ var DrawingSettingsPopup = class {
     this.textPanel = null;
     this.levelsPanel = null;
     this.colorPop = null;
-    // floating RGB + opacity picker for a color swatch
     this.colorOwner = null;
-    // the swatch the open color popover belongs to (for toggle)
-    this.menuEl = null;
-    // floating option list for a dropdown control
+    this.menuPop = null;
     this.menuOwner = null;
     this.onClose = null;
     this.onOutside = (e) => {
       const target = e.target;
-      if (this.colorPop?.contains(target)) return;
-      if (this.menuEl?.contains(target)) return;
+      if (this.colorPop?.el.contains(target)) return;
+      if (this.menuPop?.el.contains(target)) return;
       if (this.el && !this.el.contains(target)) {
         const cb = this.onClose;
         this.close();
@@ -12636,13 +12524,13 @@ var DrawingSettingsPopup = class {
    *  picker / dropdown menu), which live outside `el`. */
   contains(node) {
     if (!node) return false;
-    return this.el?.contains(node) === true || this.colorPop?.contains(node) === true || this.menuEl?.contains(node) === true;
+    return this.el?.contains(node) === true || this.colorPop?.el.contains(node) === true || this.menuPop?.el.contains(node) === true;
   }
   /** 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) {
     this.close();
-    ensureStyles5();
+    ensureStyles3();
     this.onClose = onClose ?? null;
     const t = this.theme;
     const schema = drawing.schema();
@@ -12653,8 +12541,7 @@ var DrawingSettingsPopup = class {
     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;`;
     applyChromeTokens(el, t);
     el.addEventListener("pointerdown", () => {
-      this.closeColorPopover();
-      this.closeMenu();
+      closeOpenPopovers();
     });
     const bar = document.createElement("div");
     bar.style.cssText = "display:flex;align-items:center;gap:2px;padding:4px;";
@@ -13391,49 +13278,76 @@ var DrawingSettingsPopup = class {
     });
     return b;
   }
+  /** Host-anchored floating shell (stays inside the chart). Content is filled after
+   *  construction so `fill` can close over the live `Popover` without hitting TDZ. */
+  hostFloat(anchor, opts) {
+    const t = this.theme;
+    const pop = new Popover({
+      trigger: anchor,
+      host: this.host,
+      theme: t,
+      position: "absolute",
+      boundary: this.host,
+      boundaryInset: 4,
+      viewportInset: 0,
+      gap: 6,
+      align: opts.align ?? "start",
+      zIndex: opts.zIndex,
+      onClose: () => {
+        if (this.menuPop === pop) {
+          this.menuPop = null;
+          this.menuOwner = null;
+        }
+        if (this.colorPop === pop) {
+          this.colorPop = null;
+          this.colorOwner = null;
+        }
+      }
+    });
+    const el = pop.el;
+    el.style.background = t.background;
+    el.style.border = "1px solid var(--vela-border)";
+    el.style.borderRadius = "var(--vela-radius-lg)";
+    el.style.boxShadow = "var(--vela-shadow)";
+    el.style.padding = opts.padding;
+    el.style.display = "flex";
+    el.style.flexDirection = "column";
+    el.style.gap = "1px";
+    el.style.color = t.textColor;
+    el.style.font = `var(--vela-font-size-md) ${t.fontFamily}`;
+    el.style.pointerEvents = "auto";
+    opts.fill(el, pop);
+    pop.show();
+    return pop;
+  }
   /** A floating list of one-shot actions (icon + label rows) opened by the kebab. */
   openActionMenu(anchor, rows) {
-    this.closeMenu();
-    this.closeColorPopover();
-    const t = this.theme;
-    const menu = document.createElement("div");
-    menu.className = "vela-dpop";
-    menu.style.cssText = `position:absolute;z-index:26;background:${t.background};border:1px solid var(--vela-border);border-radius:var(--vela-radius-lg);box-shadow:var(--vela-shadow);padding:4px;pointer-events:auto;display:flex;flex-direction:column;gap:1px;color:${t.textColor};font:var(--vela-font-size-md) ${t.fontFamily};`;
-    applyChromeTokens(menu, t);
-    menu.addEventListener("pointerdown", (e) => e.stopPropagation());
-    for (const row of rows) {
-      const item = document.createElement("button");
-      item.type = "button";
-      item.className = "vela-dpop-item";
-      item.style.cssText = "display:flex;align-items:center;gap:9px;min-width:150px;padding:6px 9px;border:none;border-radius:5px;color:inherit;cursor:pointer;text-align:left;font:inherit;";
-      const ic = document.createElement("span");
-      ic.style.cssText = "display:flex;flex:none;width:20px;justify-content:center;";
-      ic.innerHTML = sized(row.icon, 18);
-      const tx = document.createElement("span");
-      tx.textContent = row.label;
-      tx.style.cssText = "flex:1;";
-      item.append(ic, tx);
-      item.addEventListener("click", (e) => {
-        e.stopPropagation();
-        this.closeMenu();
-        row.onClick();
-      });
-      menu.appendChild(item);
-    }
-    this.host.appendChild(menu);
-    const ar = anchor.getBoundingClientRect();
-    const hr = this.host.getBoundingClientRect();
-    const w = menu.offsetWidth;
-    const h = menu.offsetHeight;
-    let left = ar.right - hr.left - w;
-    let top = ar.bottom - hr.top + 6;
-    if (left + w > hr.width - 4) left = hr.width - w - 4;
-    if (left < 4) left = 4;
-    if (top + h > hr.height - 4) top = ar.top - hr.top - h - 6;
-    if (top < 4) top = 4;
-    menu.style.left = `${Math.round(left)}px`;
-    menu.style.top = `${Math.round(top)}px`;
-    this.menuEl = menu;
+    this.menuPop = this.hostFloat(anchor, {
+      align: "end",
+      zIndex: 26,
+      padding: "4px",
+      fill: (menu, pop) => {
+        for (const row of rows) {
+          const item = document.createElement("button");
+          item.type = "button";
+          item.className = "vela-dpop-item";
+          item.style.cssText = "display:flex;align-items:center;gap:9px;min-width:150px;padding:6px 9px;border:none;border-radius:5px;color:inherit;cursor:pointer;text-align:left;font:inherit;";
+          const ic = document.createElement("span");
+          ic.style.cssText = "display:flex;flex:none;width:20px;justify-content:center;";
+          ic.innerHTML = sized(row.icon, 18);
+          const tx = document.createElement("span");
+          tx.textContent = row.label;
+          tx.style.cssText = "flex:1;";
+          item.append(ic, tx);
+          item.addEventListener("click", (e) => {
+            e.stopPropagation();
+            pop.hide();
+            row.onClick();
+          });
+          menu.appendChild(item);
+        }
+      }
+    });
     this.menuOwner = anchor;
   }
   /** The floating hover-label. Sits just above or below the toolbar depending on where it floats,
@@ -13563,60 +13477,40 @@ var DrawingSettingsPopup = class {
   /** The floating option list opened by a {@link dropdown} trigger. Each row shows the option's
    *  glyph (and text label when one is supplied); the current value is highlighted. */
   openMenu(anchor, values, current, render, label, onPick) {
-    this.closeMenu();
-    this.closeColorPopover();
-    const t = this.theme;
-    const menu = document.createElement("div");
-    menu.className = "vela-dpop";
-    menu.style.cssText = `position:absolute;z-index:26;background:${t.background};border:1px solid var(--vela-border);border-radius:var(--vela-radius-lg);box-shadow:var(--vela-shadow);padding:4px;pointer-events:auto;display:flex;flex-direction:column;gap:1px;color:${t.textColor};font:var(--vela-font-size-md) ${t.fontFamily};`;
-    applyChromeTokens(menu, t);
-    menu.addEventListener("pointerdown", (e) => e.stopPropagation());
-    for (const v of values) {
-      const active = v === current;
-      const item = document.createElement("button");
-      item.type = "button";
-      item.className = "vela-dpop-item";
-      item.dataset.active = active ? "1" : "0";
-      item.style.cssText = `display:flex;align-items:center;gap:8px;${label ? "min-width:118px;" : ""}padding:5px 8px;border:none;border-radius:5px;color:inherit;cursor:pointer;text-align:left;font:inherit;`;
-      const ic = document.createElement("span");
-      ic.style.cssText = "display:flex;flex:none;width:22px;justify-content:center;";
-      ic.innerHTML = sized(render(v), 18);
-      item.appendChild(ic);
-      if (label) {
-        const tx = document.createElement("span");
-        tx.textContent = label(v);
-        tx.style.cssText = "flex:1;font-variant-numeric:tabular-nums;";
-        item.appendChild(tx);
+    this.menuPop = this.hostFloat(anchor, {
+      zIndex: 26,
+      padding: "4px",
+      fill: (menu, pop) => {
+        for (const v of values) {
+          const active = v === current;
+          const item = document.createElement("button");
+          item.type = "button";
+          item.className = "vela-dpop-item";
+          item.dataset.active = active ? "1" : "0";
+          item.style.cssText = `display:flex;align-items:center;gap:8px;${label ? "min-width:118px;" : ""}padding:5px 8px;border:none;border-radius:5px;color:inherit;cursor:pointer;text-align:left;font:inherit;`;
+          const ic = document.createElement("span");
+          ic.style.cssText = "display:flex;flex:none;width:22px;justify-content:center;";
+          ic.innerHTML = sized(render(v), 18);
+          item.appendChild(ic);
+          if (label) {
+            const tx = document.createElement("span");
+            tx.textContent = label(v);
+            tx.style.cssText = "flex:1;font-variant-numeric:tabular-nums;";
+            item.appendChild(tx);
+          }
+          item.addEventListener("click", (e) => {
+            e.stopPropagation();
+            pop.hide();
+            onPick(v);
+          });
+          menu.appendChild(item);
+        }
       }
-      item.addEventListener("click", (e) => {
-        e.stopPropagation();
-        this.closeMenu();
-        onPick(v);
-      });
-      menu.appendChild(item);
-    }
-    this.host.appendChild(menu);
-    const ar = anchor.getBoundingClientRect();
-    const hr = this.host.getBoundingClientRect();
-    const w = menu.offsetWidth;
-    const h = menu.offsetHeight;
-    let left = ar.left - hr.left;
-    let top = ar.bottom - hr.top + 6;
-    if (left + w > hr.width - 4) left = hr.width - w - 4;
-    if (left < 4) left = 4;
-    if (top + h > hr.height - 4) top = ar.top - hr.top - h - 6;
-    if (top < 4) top = 4;
-    menu.style.left = `${Math.round(left)}px`;
-    menu.style.top = `${Math.round(top)}px`;
-    this.menuEl = menu;
+    });
     this.menuOwner = anchor;
   }
   closeMenu() {
-    if (this.menuEl) {
-      this.menuEl.remove();
-      this.menuEl = null;
-    }
-    this.menuOwner = null;
+    this.menuPop?.hide();
   }
   /** 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.
@@ -13655,36 +13549,18 @@ var DrawingSettingsPopup = class {
   }
   /** A floating RGB picker + opacity slider anchored to a color swatch — emits `#RRGGBB(AA)`. */
   openColorPopover(anchor, color, onChange) {
-    this.closeColorPopover();
-    this.closeMenu();
     const t = this.theme;
-    const pop = document.createElement("div");
-    pop.style.cssText = `position:absolute;z-index:25;background:${t.background};border:1px solid var(--vela-border);border-radius:var(--vela-radius-lg);box-shadow:var(--vela-shadow);padding:10px;pointer-events:auto;`;
-    applyChromeTokens(pop, t);
-    pop.addEventListener("pointerdown", (e) => e.stopPropagation());
-    pop.appendChild(buildColorPicker(color, t, onChange));
-    this.host.appendChild(pop);
-    const ar = anchor.getBoundingClientRect();
-    const hr = this.host.getBoundingClientRect();
-    const w = pop.offsetWidth;
-    const h = pop.offsetHeight;
-    let left = ar.left - hr.left;
-    let top = ar.bottom - hr.top + 6;
-    if (left + w > hr.width - 4) left = hr.width - w - 4;
-    if (left < 4) left = 4;
-    if (top + h > hr.height - 4) top = ar.top - hr.top - h - 6;
-    if (top < 4) top = 4;
-    pop.style.left = `${Math.round(left)}px`;
-    pop.style.top = `${Math.round(top)}px`;
-    this.colorPop = pop;
+    this.colorPop = this.hostFloat(anchor, {
+      zIndex: 25,
+      padding: "10px",
+      fill: (el) => {
+        el.appendChild(buildColorPicker(color, t, onChange));
+      }
+    });
     this.colorOwner = anchor;
   }
   closeColorPopover() {
-    if (this.colorPop) {
-      this.colorPop.remove();
-      this.colorPop = null;
-    }
-    this.colorOwner = null;
+    this.colorPop?.hide();
   }
   divider() {
     const d = document.createElement("div");
@@ -14067,9 +13943,9 @@ var UserDrawingController = class {
   }
   /**
    * Union of the visible drawings' price ranges on `paneId` whose time extent
-   * intersects [fromTime, toTime] — folded into the pane's autoscale so an
-   * off-series drawing still expands the scale (mirrors Pine drawings). Hidden
-   * drawings and full-width references (hline → null extent) are handled too.
+   * intersects [fromTime, toTime]. Hidden drawings and full-width references
+   * (hline → null extent) are handled too. Kept as the seam for a future
+   * per-drawing autoscale opt-in — the renderer does not fold this in today.
    */
   priceRangeForPane(paneId, fromTime, toTime) {
     let lo = Infinity;
@@ -14924,7 +14800,7 @@ var LUXALGO_WORDMARK_SVG = '<svg viewBox="0 0 964 252" aria-hidden="true"><path
 
 // src/renderers/native/chrome/AttributionMark.ts
 var ATTRIBUTION_URL = "https://luxalgo.com/vela";
-var STYLE_ID6 = "vela-attribution-styles";
+var STYLE_ID5 = "vela-attribution-styles";
 var CSS = `
 .vela-attribution {
     text-decoration: none;
@@ -14987,11 +14863,11 @@ var CSS = `
 [data-vela-layout='mobile'] .vela-attribution:hover .vela-attr-wordmark,
 [data-layout='mobile'] .vela-attribution:hover .vela-attr-wordmark { transform: translateX(0); }
 `;
-function ensureStyles6(doc) {
-  let s = doc.getElementById(STYLE_ID6);
+function ensureStyles4(doc) {
+  let s = doc.getElementById(STYLE_ID5);
   if (!s) {
     s = doc.createElement("style");
-    s.id = STYLE_ID6;
+    s.id = STYLE_ID5;
     doc.head.appendChild(s);
   }
   s.textContent = CSS;
@@ -15020,7 +14896,7 @@ function createCustomMark(doc, html, background) {
   return el;
 }
 function createAttributionMark(doc, background) {
-  ensureStyles6(doc);
+  ensureStyles4(doc);
   const a = doc.createElement("a");
   a.className = "vela-attribution";
   a.href = ATTRIBUTION_URL;
@@ -17998,7 +17874,6 @@ var NativeRenderer = class {
     const n = this.coords.barCount;
     if (n === 0) return;
     const vr = this.coords.visibleLogicalRange();
-    const vtr = this.coords.visibleTimeRange();
     const i0 = Math.max(0, Math.floor(vr.from));
     const i1 = Math.min(n - 1, Math.ceil(vr.to));
     if (i1 < i0) return;
@@ -18016,9 +17891,7 @@ var NativeRenderer = class {
       }
       const models = this.scene.indicatorsForPane(pane.id);
       const masterModels = models.filter((m) => m.ownScale !== true);
-      let dr = this.chrome.paneDrawingsRange(masterModels, this.scene, pane === pricePane, vr);
-      const udr = this.userDrawings?.priceRangeForPane(pane.id, vtr.from, vtr.to) ?? null;
-      if (udr) dr = dr ? { min: Math.min(dr.min, udr.min), max: Math.max(dr.max, udr.max) } : udr;
+      const dr = this.chrome.paneDrawingsRange(masterModels, this.scene, pane === pricePane, vr);
       const includeCandles = pane.kind === "price" && !this.scene.candlesHidden;
       pane.scaleTarget = computePaneScale(masterModels, this.bars, includeCandles, i0, i1, dr, paneLogScale(this.scene, pane), (id) => this.scene.offsetOf(id));
       pane.percentBaseline = pane.kind === "price" ? this.bars[i0]?.close ?? 0 : this.firstVisibleValue(masterModels, i0);