@luxalgo/vela 0.7.6 → 0.7.8

package/dist/vela.global.js

@@ -10205,6 +10205,8 @@ var Vela = (function (exports) {
       this.liveBars = [];
       /** Sync-accessible symbol metadata, warmed by load()/symbolInfoFor (the engine reads it synchronously). */
       this.symInfoCache = /* @__PURE__ */ new Map();
+      /** Requests in flight, keyed like the cache — every concurrent asker shares one round trip. */
+      this.symInfoInflight = /* @__PURE__ */ new Map();
       this.cache = new CachingDataFeed(new RegistryFetchFeed(this.registry), store);
     }
     // ── Registry surface (driven by chart.data / DataControl) ──────────────
@@ -10265,9 +10267,36 @@ var Vela = (function (exports) {
     async symbolInfoFor(raw) {
       const resolved = this.registry.resolve(raw, { default: this.primaryProvider });
       if (!resolved) return void 0;
-      const info = await this.registry.get(resolved.provider)?.getSymbolInfo?.(resolved.ticker);
-      if (info) this.symInfoCache.set(symKey(resolved), info);
-      return info;
+      return this.fetchSymbolInfo(resolved);
+    }
+    /**
+     * One round trip per symbol, shared. A market switch probes this metadata from five
+     * places at once (the bar load's prefetch, the renderer's tick size, the market-status
+     * badge, the session shading, the session toggle) — without the in-flight map each
+     * would open its own request for the same answer, and the last one to land decided how
+     * late the chrome settled.
+     *
+     * Cached for {@link SYMBOL_INFO_TTL_MS}: this metadata is stable within a session
+     * (tick size, session vocabulary, listing prefix), but not immutable — a continuous
+     * futures row rolls its current contract — so the entry expires rather than pinning the
+     * session's first answer forever. A failed probe is NOT remembered: the next asker retries.
+     */
+    fetchSymbolInfo(resolved) {
+      const key = symKey(resolved);
+      const hit = this.symInfoCache.get(key);
+      if (hit && Date.now() - hit.at < SYMBOL_INFO_TTL_MS) return Promise.resolve(hit.info);
+      const inflight = this.symInfoInflight.get(key);
+      if (inflight) return inflight;
+      const getSymbolInfo = this.registry.get(resolved.provider)?.getSymbolInfo;
+      if (!getSymbolInfo) return Promise.resolve(void 0);
+      const p = Promise.resolve(getSymbolInfo.call(this.registry.get(resolved.provider), resolved.ticker)).then((info) => {
+        if (info) this.symInfoCache.set(key, { info, at: Date.now() });
+        return info;
+      }).finally(() => {
+        this.symInfoInflight.delete(key);
+      });
+      this.symInfoInflight.set(key, p);
+      return p;
     }
     /**
      * Per-symbol capabilities, resolved through the owning provider's `capabilitiesFor`
@@ -10311,16 +10340,10 @@ var Vela = (function (exports) {
     symbolInfo(cfg) {
       if (cfg.data && cfg.data.length > 0) return void 0;
       const resolved = this.registry.resolve(rawSymbol(cfg), { default: this.primaryProvider });
-      return resolved ? this.symInfoCache.get(symKey(resolved)) : void 0;
+      return resolved ? this.symInfoCache.get(symKey(resolved))?.info : void 0;
     }
     prefetchSymbolInfo(resolved) {
-      const key = symKey(resolved);
-      if (this.symInfoCache.has(key)) return;
-      const provider = this.registry.get(resolved.provider);
-      if (!provider?.getSymbolInfo) return;
-      void provider.getSymbolInfo(resolved.ticker).then((info) => {
-        if (info) this.symInfoCache.set(key, info);
-      }).catch(() => {
+      void this.fetchSymbolInfo(resolved).catch(() => {
       });
     }
     async loadRange(cfg, range) {
@@ -10370,8 +10393,9 @@ var Vela = (function (exports) {
     return { ...cfg, symbol: `${resolved.provider}:${resolved.ticker}` };
   }
   function symKey(resolved) {
-    return `${resolved.provider}|${resolved.ticker}`;
+    return `${resolved.provider}|${resolved.ticker.trim().toUpperCase()}`;
   }
+  var SYMBOL_INFO_TTL_MS = 10 * 6e4;
   async function safeBars(provider, ticker, tf, range) {
     try {
       return await provider.getBars(ticker, tf, range);
@@ -20561,7 +20585,8 @@ ${overlayScrollbarCss(".vela-dialog *")}
     recents.unshift(hex6);
     if (recents.length > 10) recents.length = 10;
   }
-  function buildColorPicker(color, theme, onChange) {
+  function buildColorPicker(color, theme, onChange, options = {}) {
+    const commit = options.commit ?? "live";
     const parsed = splitColor(color);
     let curHex = parsed.hex6;
     let curAlpha = parsed.alpha;
@@ -20644,7 +20669,12 @@ ${overlayScrollbarCss(".vela-dialog *")}
       const r = track.getBoundingClientRect();
       curAlpha = Math.max(0, Math.min(1, (clientX - r.left) / r.width));
       paintOpacity();
-      emit();
+      if (commit === "live") emit();
+    };
+    const endDrag = () => {
+      if (!dragging) return;
+      dragging = false;
+      if (commit === "release") emit();
     };
     track.addEventListener("pointerdown", (e) => {
       e.stopPropagation();
@@ -20655,7 +20685,8 @@ ${overlayScrollbarCss(".vela-dialog *")}
     track.addEventListener("pointermove", (e) => {
       if (dragging) onDrag(e.clientX);
     });
-    track.addEventListener("pointerup", () => dragging = false);
+    track.addEventListener("pointerup", endDrag);
+    track.addEventListener("pointercancel", endDrag);
     function emit() {
       onChange(combineColor(curHex, curAlpha));
     }
@@ -20678,7 +20709,7 @@ ${overlayScrollbarCss(".vela-dialog *")}
     return root;
   }
   function colorField(theme, getVal, onVal, opts) {
-    return new ColorField({ theme, getVal, onVal, shape: opts?.shape, id: opts?.id, popover: opts?.popover }).el;
+    return new ColorField({ theme, getVal, onVal, shape: opts?.shape, id: opts?.id, popover: opts?.popover, commit: opts?.commit }).el;
   }
   var ColorField = class {
     constructor(opts) {
@@ -20687,6 +20718,7 @@ ${overlayScrollbarCss(".vela-dialog *")}
       this.getVal = opts.getVal;
       this.onVal = opts.onVal;
       this.popoverOpts = opts.popover;
+      this.commit = opts.commit;
       const trigger = document.createElement("button");
       trigger.type = "button";
       if (opts.id) trigger.id = opts.id;
@@ -20726,10 +20758,15 @@ ${overlayScrollbarCss(".vela-dialog *")}
         boundary: this.popoverOpts?.boundary,
         zIndex: this.popoverOpts?.zIndex,
         className: "vela-color-field-pop",
-        content: buildColorPicker(this.getVal(), this.theme, (val) => {
-          this.onVal(val);
-          this.paint();
-        })
+        content: buildColorPicker(
+          this.getVal(),
+          this.theme,
+          (val) => {
+            this.onVal(val);
+            this.paint();
+          },
+          { commit: this.commit }
+        )
       });
       pop.show();
     }
@@ -21210,7 +21247,8 @@ ${overlayScrollbarCss(".vela-dialog *")}
       const el2 = colorField(desc.theme, desc.get, desc.onChange, {
         shape: "circle",
         id: desc.id,
-        popover: desc.popover
+        popover: desc.popover,
+        commit: desc.commit
       });
       if (desc.title) el2.title = desc.title;
       return { el: el2 };
@@ -21588,7 +21626,10 @@ ${overlayScrollbarCss(".vela-dialog *")}
           id,
           theme: this.host.theme(),
           get: () => String(bagOf(row, inp)[inp.key] ?? inp.defval),
-          onChange: (v) => emit(v)
+          onChange: (v) => emit(v),
+          // An input change re-executes the script over its whole history: commit the
+          // opacity drag once on release, not once per pointer move.
+          commit: "release"
         }).el;
       }
       if (inp.type === "symbol") return this.buildSymbol(id, String(current), emit);
@@ -21835,10 +21876,6 @@ ${overlayScrollbarCss(".vela-dialog *")}
     }
     /** 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.host.theme(),
@@ -21850,80 +21887,10 @@ ${overlayScrollbarCss(".vela-dialog *")}
           this.calendarPop = null;
           this.calendarAnchor = null;
         },
-        content: (el) => {
-          const title = document.createElement("div");
-          title.className = "vela-ind-cal-title";
-          const prev3 = document.createElement("button");
-          prev3.type = "button";
-          prev3.className = "vela-ind-cal-nav";
-          prev3.setAttribute("aria-label", "Previous month");
-          prev3.innerHTML = iconAt("chevron-left", 14);
-          const next2 = document.createElement("button");
-          next2.type = "button";
-          next2.className = "vela-ind-cal-nav";
-          next2.setAttribute("aria-label", "Next month");
-          next2.innerHTML = iconAt("chevron-right", 14);
-          const head = document.createElement("div");
-          head.className = "vela-ind-cal-head";
-          head.append(prev3, title, next2);
-          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 first2 = new Date(year, month, 1);
-            const startPad = first2.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);
-            }
-          };
-          prev3.addEventListener("click", (e) => {
-            e.stopPropagation();
-            month -= 1;
-            if (month < 0) {
-              month = 11;
-              year -= 1;
-            }
-            paint();
-          });
-          next2.addEventListener("click", (e) => {
-            e.stopPropagation();
-            month += 1;
-            if (month > 11) {
-              month = 0;
-              year += 1;
-            }
-            paint();
-          });
-          paint();
-          el.append(head, week, grid);
-        }
+        content: (el) => fillCalendar(el, current, (iso) => {
+          pop.hide();
+          onPick(iso);
+        })
       });
       this.calendarPop = pop;
       this.calendarAnchor = anchor;
@@ -22032,7 +21999,7 @@ ${overlayScrollbarCss(".vela-dialog *")}
   var CALENDAR_SVG = iconAt("calendar", 14);
   var CLOCK_SVG = iconAt("clock", 14);
   var DIALOG_STYLE_ID2 = "vela-ind-dialog-styles";
-  var DIALOG_STYLE_REV = "29";
+  var DIALOG_STYLE_REV = "30";
   var LEGEND_ICON_PX = 16;
   function ensureDialogStyles() {
     if (typeof document === "undefined") return;
@@ -22048,8 +22015,12 @@ ${overlayScrollbarCss(".vela-dialog *")}
 .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 [hidden]{display:none !important;}
 .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-title{flex:1;display:flex;align-items:center;justify-content:center;gap:2px;min-width:0;}
+.vela-ind-cal-switch{border:none;background:transparent;color:var(--vela-fg-bright);font:inherit;font-weight:600;font-size:14px;padding:2px 6px;border-radius:4px;cursor:pointer;}
+.vela-ind-cal-switch:not(:disabled):hover{background:var(--vela-hover);}
+.vela-ind-cal-switch:disabled{cursor:default;}
 .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;}
@@ -22060,6 +22031,12 @@ ${overlayScrollbarCss(".vela-dialog *")}
 .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-cal-cells{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;width:calc(7 * 28px + 6 * 2px);}
+.vela-ind-cal-cell{height:36px;border:none;background:transparent;color:inherit;border-radius:4px;padding:0 4px;cursor:pointer;font:inherit;font-size:14px;}
+.vela-ind-cal-cell:hover{background:var(--vela-hover);}
+.vela-ind-cal-cell[data-checked]{background:var(--vela-hover-strong);color:var(--vela-fg-bright);}
+.vela-ind-cal-cell[data-today]:not([data-checked]){box-shadow:inset 0 0 0 1px var(--vela-border-strong);}
+.vela-ind-cal-cell[data-outside]{opacity:0.45;}
 ${overlayScrollbarCss(".vela-dialog.vela-ind-dialog *", 9)}
 .vela-ind-tab{font-weight:600;font-size:13px;line-height:20px;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);}
@@ -22094,6 +22071,7 @@ ${overlayScrollbarCss(".vela-dialog.vela-ind-dialog *", 9)}
     return { value: v, label: v };
   });
   var MONTH_LABELS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
+  var MONTH_SHORT = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
   var WEEKDAY_LABELS = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
   function normalizeDateInput(raw) {
     const t = raw.trim();
@@ -22115,6 +22093,151 @@ ${overlayScrollbarCss(".vela-dialog.vela-ind-dialog *", 9)}
   function isoDate(d) {
     return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
   }
+  function fillCalendar(el, current, onPick) {
+    const today = /* @__PURE__ */ new Date();
+    const selected = parseIsoDate(current);
+    let year = selected?.getFullYear() ?? today.getFullYear();
+    let month = selected?.getMonth() ?? today.getMonth();
+    let mode = "date";
+    const prev3 = document.createElement("button");
+    prev3.type = "button";
+    prev3.className = "vela-ind-cal-nav";
+    prev3.innerHTML = iconAt("chevron-left", 14);
+    const next2 = document.createElement("button");
+    next2.type = "button";
+    next2.className = "vela-ind-cal-nav";
+    next2.innerHTML = iconAt("chevron-right", 14);
+    const monthBtn = document.createElement("button");
+    monthBtn.type = "button";
+    monthBtn.className = "vela-ind-cal-switch";
+    monthBtn.setAttribute("aria-label", "Choose month");
+    const yearBtn = document.createElement("button");
+    yearBtn.type = "button";
+    yearBtn.className = "vela-ind-cal-switch";
+    yearBtn.setAttribute("aria-label", "Choose year");
+    const title = document.createElement("div");
+    title.className = "vela-ind-cal-title";
+    title.append(monthBtn, yearBtn);
+    const head = document.createElement("div");
+    head.className = "vela-ind-cal-head";
+    head.append(prev3, title, next2);
+    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");
+    const paint = () => {
+      const decade = Math.floor(year / 10) * 10;
+      monthBtn.hidden = mode !== "date";
+      monthBtn.textContent = MONTH_LABELS[month] ?? "";
+      yearBtn.textContent = mode === "year" ? `${decade}-${decade + 9}` : String(year);
+      yearBtn.disabled = mode === "year";
+      week.hidden = mode !== "date";
+      prev3.setAttribute("aria-label", mode === "date" ? "Previous month" : mode === "month" ? "Previous year" : "Previous decade");
+      next2.setAttribute("aria-label", mode === "date" ? "Next month" : mode === "month" ? "Next year" : "Next decade");
+      grid.className = mode === "date" ? "vela-ind-cal-grid" : "vela-ind-cal-cells";
+      grid.replaceChildren();
+      if (mode === "date") {
+        const startPad = new Date(year, month, 1).getDay();
+        const days = new Date(year, month + 1, 0).getDate();
+        const todayIso = isoDate(today);
+        const selectedIso = selected ? isoDate(selected) : "";
+        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 === selectedIso) b.dataset.checked = "1";
+          if (iso === todayIso) b.dataset.today = "1";
+          b.addEventListener("click", (e) => {
+            e.stopPropagation();
+            onPick(iso);
+          });
+          grid.appendChild(b);
+        }
+        return;
+      }
+      if (mode === "month") {
+        for (let m = 0; m < 12; m++) {
+          const b = document.createElement("button");
+          b.type = "button";
+          b.className = "vela-ind-cal-cell";
+          b.textContent = MONTH_SHORT[m] ?? "";
+          if (selected?.getFullYear() === year && selected.getMonth() === m) b.dataset.checked = "1";
+          if (today.getFullYear() === year && today.getMonth() === m) b.dataset.today = "1";
+          b.addEventListener("click", (e) => {
+            e.stopPropagation();
+            month = m;
+            mode = "date";
+            paint();
+          });
+          grid.appendChild(b);
+        }
+        return;
+      }
+      for (let y = decade - 1; y <= decade + 10; y++) {
+        const b = document.createElement("button");
+        b.type = "button";
+        b.className = "vela-ind-cal-cell";
+        b.textContent = String(y);
+        if (y < decade || y > decade + 9) b.dataset.outside = "1";
+        if (selected?.getFullYear() === y) b.dataset.checked = "1";
+        if (today.getFullYear() === y) b.dataset.today = "1";
+        b.addEventListener("click", (e) => {
+          e.stopPropagation();
+          year = y;
+          mode = "month";
+          paint();
+        });
+        grid.appendChild(b);
+      }
+    };
+    const step = (dir) => {
+      if (mode === "date") {
+        month += dir;
+        if (month < 0) {
+          month = 11;
+          year -= 1;
+        }
+        if (month > 11) {
+          month = 0;
+          year += 1;
+        }
+      } else {
+        year += mode === "month" ? dir : dir * 10;
+      }
+      paint();
+    };
+    prev3.addEventListener("click", (e) => {
+      e.stopPropagation();
+      step(-1);
+    });
+    next2.addEventListener("click", (e) => {
+      e.stopPropagation();
+      step(1);
+    });
+    monthBtn.addEventListener("click", (e) => {
+      e.stopPropagation();
+      mode = "month";
+      paint();
+    });
+    yearBtn.addEventListener("click", (e) => {
+      e.stopPropagation();
+      mode = "year";
+      paint();
+    });
+    paint();
+    el.append(head, week, grid);
+  }
   function normalizeTimeInput(raw) {
     const t = raw.trim();
     const m = /^(\d{1,2}):(\d{2})$/.exec(t) ?? /^(\d{2})(\d{2})$/.exec(t);
@@ -23396,10 +23519,12 @@ ${overlayScrollbarCss(".vela-dialog.vela-ind-dialog *", 9)}
   var PREMARKET_SHADE = withAlpha(WARNING, 0.08);
   var POSTMARKET_SHADE = withAlpha(ACCENT, 0.08);
   var EXTENDED_SHADE = POSTMARKET_SHADE;
+  var DEFAULT_MARGINS = { top: 10, bottom: 10, right: 10 };
   function defaultChartStyle() {
     return {
       chartTypes: {},
       fontSize: 11,
+      margins: { ...DEFAULT_MARGINS },
       gridVert: { visible: true, color: null },
       gridHorz: { visible: true, color: null },
       borderColor: null,
@@ -23523,6 +23648,12 @@ ${overlayScrollbarCss(".vela-dialog.vela-ind-dialog *", 9)}
   function clampSpacing(v) {
     return v < 0.1 ? 0.1 : v > 10 ? 10 : v;
   }
+  function clampMarginPct(v) {
+    return v < 0 ? 0 : v > 40 ? 40 : v;
+  }
+  function clampMarginBars(v) {
+    return Math.round(v < 0 ? 0 : v > 200 ? 200 : v);
+  }
   function factoryResetConfig(factory, priceStyle = factory.series.style) {
     const bag = {};
     for (const t of chartTypes()) {
@@ -23571,6 +23702,7 @@ ${overlayScrollbarCss(".vela-dialog.vela-ind-dialog *", 9)}
     const ps = asObject(p.priceScale);
     const anim = asObject(p.animations);
     const panes = asObject(p.panes);
+    const margins = asObject(p.margins);
     const trades = asObject(p.trades);
     const ts = asObject(p.timeScale);
     const marks = asObject(p.marks);
@@ -23630,6 +23762,11 @@ ${overlayScrollbarCss(".vela-dialog.vela-ind-dialog *", 9)}
       panes: {
         separatorColor: isColor(panes.separatorColor) ? panes.separatorColor : base.panes.separatorColor
       },
+      margins: {
+        top: isNum(margins.top) ? clampMarginPct(margins.top) : base.margins.top,
+        bottom: isNum(margins.bottom) ? clampMarginPct(margins.bottom) : base.margins.bottom,
+        right: isNum(margins.right) ? clampMarginBars(margins.right) : base.margins.right
+      },
       trades: {
         visible: isBool(trades.visible) ? trades.visible : base.trades.visible,
         labels: isBool(trades.labels) ? trades.labels : base.trades.labels,
@@ -29000,6 +29137,10 @@ void main() {
     "canvas.grid",
     "canvas.grid.vertical",
     "canvas.grid.horizontal",
+    "canvas.margins",
+    "canvas.margins.top",
+    "canvas.margins.bottom",
+    "canvas.margins.right",
     "canvas.theme"
   ];
   function settingsIdCatalog(hostSections, markGroups = []) {
@@ -29480,7 +29621,7 @@ ${overlayScrollbarCss(".vela-sd-pane")}
             if (hr.kind === "heading") body.append(this.sectionTitle(hr.label));
             else if (hr.kind === "toggle") body.append(this.boolRow(hr.label, hr.get(), (v) => hr.set(v)));
             else if (hr.kind === "color") body.append(this.colorRow(hr.label, hr.get(), (v) => hr.set(v)));
-            else body.append(this.selectRowLabeled(hr.label, hr.get(), hr.options.map((o) => [o, o]), (v) => hr.set(v)));
+            else body.append(this.selectRowLabeled(hr.label, hr.get(), normalizeSelectOptions(hr.options), (v) => hr.set(v)));
           }
         }
       };
@@ -29530,6 +29671,10 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       body.append(sid(this.toggleRow("Horizontal", config.grid.horzLines.visible, (v) => this.emit({ grid: { horzLines: { visible: v } } }), [
         this.swatch(config.grid.horzLines.color, (v) => this.emit({ grid: { horzLines: { color: v } } }))
       ]), "canvas.grid.horizontal"));
+      body.append(sid(this.sectionTitle("Margins"), "canvas.margins"));
+      body.append(sid(this.numberRow("Top", config.margins.top, 0, 40, 1, (v) => this.emit({ margins: { top: v } }), "%"), "canvas.margins.top"));
+      body.append(sid(this.numberRow("Bottom", config.margins.bottom, 0, 40, 1, (v) => this.emit({ margins: { bottom: v } }), "%"), "canvas.margins.bottom"));
+      body.append(sid(this.numberRow("Right", config.margins.right, 0, 200, 1, (v) => this.emit({ margins: { right: v } }), "bars"), "canvas.margins.right"));
       if (this.themeControl) {
         const tc = this.themeControl;
         body.append(sid(this.sectionTitle("Theme"), "canvas.theme"));
@@ -30101,23 +30246,16 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       this.hintTips.push(dispose);
       return el;
     }
-    numberRow(label, value, min2, max2, step, onChange) {
-      return fieldRow({
-        label,
-        labelSize: "sm",
-        className: "vela-sd-row",
-        control: buildFieldControl({
-          kind: "number",
-          value,
-          min: min2,
-          max: max2,
-          step,
-          fill: false,
-          commit: "live",
-          steppers: true,
-          onChange
-        }).el
-      });
+    /** `unit` (optional) trails the input as muted text — "%", "bars". */
+    numberRow(label, value, min2, max2, step, onChange, unit) {
+      const controls = [buildFieldControl({ kind: "number", value, min: min2, max: max2, step, fill: false, commit: "live", steppers: true, onChange }).el];
+      if (unit) {
+        const u = document.createElement("span");
+        u.textContent = unit;
+        u.style.cssText = "color:var(--vela-fg-muted);";
+        controls.push(u);
+      }
+      return this.rowWith(label, controls);
     }
     /** A dropdown whose option values differ from their display labels. */
     selectRowLabeled(label, value, options, onChange) {
@@ -35636,9 +35774,7 @@ ${overlayScrollbarCss(".vela-sd-pane")}
   }
 
   // src/renderers/native/core/autoscale.ts
-  var MARGIN_TOP = 2 / 7;
-  var MARGIN_BOTTOM = 1 / 7;
-  function computePaneScale(models, bars, includeCandles, i0, i1, drawings, log = false, offsetOf = () => 0) {
+  function computePaneScale(models, bars, includeCandles, i0, i1, drawings, log = false, offsetOf = () => 0, margins = DEFAULT_MARGINS) {
     let min2 = Infinity;
     let max2 = -Infinity;
     const consider = (v) => {
@@ -35673,14 +35809,17 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       const pad = Math.abs(min2) * 0.1 || 1;
       return { min: min2 - pad, max: max2 + pad, log: log && min2 - pad > 0 };
     }
+    const content = Math.max(0.1, 1 - (margins.top + margins.bottom) / 100);
+    const above = margins.top / 100 / content;
+    const below = margins.bottom / 100 / content;
     if (log && min2 > 0) {
       const lmin = Math.log(min2);
       const lmax = Math.log(max2);
       const lspan = lmax - lmin;
-      return { min: Math.exp(lmin - lspan * MARGIN_BOTTOM), max: Math.exp(lmax + lspan * MARGIN_TOP), log: true };
+      return { min: Math.exp(lmin - lspan * below), max: Math.exp(lmax + lspan * above), log: true };
     }
     const span = max2 - min2;
-    return { min: min2 - span * MARGIN_BOTTOM, max: max2 + span * MARGIN_TOP };
+    return { min: min2 - span * below, max: max2 + span * above };
   }
   function considerSeries(s, i0, i1, off, consider) {
     if (!seriesInScale(s)) return;
@@ -37507,6 +37646,7 @@ ${overlayScrollbarCss(".vela-sd-pane")}
           intro: this.intro.style !== false
         },
         panes: { separatorColor: s.separatorColor ?? t.borderColor },
+        margins: { ...s.margins },
         trades: {
           visible: this.scene.tradeMarkers.visible,
           labels: this.scene.tradeMarkers.labels,
@@ -37619,6 +37759,10 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       this.animAutoscale.toggle(next2.animations.autoscale);
       this.intro = { style: next2.animations.intro ? this.introOnStyle : false, duration: this.intro.duration || INTRO_DURATION_DEFAULT_MS };
       s.separatorColor = keepInherit(s.separatorColor, next2.panes.separatorColor, prevTheme.borderColor);
+      if (next2.margins.right !== s.margins.right && this.coords.barCount > 0) {
+        this.applyViewport({ barSpacing: this.coords.getViewport().barSpacing, rightOffset: next2.margins.right });
+      }
+      s.margins = { ...next2.margins };
       this.scene.tradeMarkers = {
         visible: next2.trades.visible,
         labels: next2.trades.labels,
@@ -37862,7 +38006,7 @@ ${overlayScrollbarCss(".vela-sd-pane")}
     /** Glide the view back to the most recent bars, keeping the current zoom (barSpacing). */
     scrollToRealtime() {
       if (this.coords.barCount === 0) return;
-      this.glideRightOffset(ZOOM_OUT_MARGIN_BARS);
+      this.glideRightOffset(this.scene.style.margins.right);
     }
     /** Ease rightOffset to `target` at constant zoom (see animTick's scroll glide);
      *  instant when the scroll glide is off. Shared by scroll-to-latest and panBy. */
@@ -39804,6 +39948,7 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       const pricePane = panes.find((p) => p.kind === "price") ?? null;
       this.chrome.prepare(this.scene, this.coords, this.theme);
       const animating = this.animator.active;
+      const margins = this.scene.style.margins;
       for (const pane of panes) {
         if (pane.manualScale) {
           pane.scaleTarget = pane.manualScale;
@@ -39819,7 +39964,7 @@ ${overlayScrollbarCss(".vela-sd-pane")}
           if (or2) dr = dr ? { min: Math.min(dr.min, or2.min), max: Math.max(dr.max, or2.max) } : or2;
         }
         const includeCandles = pane.kind === "price" && (!this.scene.candlesHidden || this.priceLayersAnchoredToBars(masterModels) || !this.paneHasMeasurableContent(masterModels, dr));
-        pane.scaleTarget = computePaneScale(masterModels, this.bars, includeCandles, i0, i1, dr, paneLogScale(this.scene, pane), (id) => this.scene.offsetOf(id));
+        pane.scaleTarget = computePaneScale(masterModels, this.bars, includeCandles, i0, i1, dr, paneLogScale(this.scene, pane), (id) => this.scene.offsetOf(id), margins);
         pane.percentBaseline = pane.kind === "price" ? this.bars[i0]?.close ?? 0 : this.firstVisibleValue(masterModels, i0);
         pane.axisFormat = void 0;
         pane.axisBands = void 0;
@@ -39830,7 +39975,7 @@ ${overlayScrollbarCss(".vela-sd-pane")}
             pane.axisFormat = "volume";
           }
         } else if (this.layerNativesOwnPane(pane, masterModels)) {
-          pane.scaleTarget = computePaneScale([], this.bars, true, i0, i1, dr, paneLogScale(this.scene, pane), (id) => this.scene.offsetOf(id));
+          pane.scaleTarget = computePaneScale([], this.bars, true, i0, i1, dr, paneLogScale(this.scene, pane), (id) => this.scene.offsetOf(id), margins);
           pane.percentBaseline = this.bars[i0]?.close ?? 0;
           if (masterModels.every((m) => m.paneAxis != null)) {
             pane.axisFormat = "none";
@@ -39859,7 +40004,7 @@ ${overlayScrollbarCss(".vela-sd-pane")}
             continue;
           }
           const mdr = this.chrome.paneDrawingsRange([model], this.scene, false, vr);
-          sl.scaleTarget = computePaneScale([model], this.bars, false, i0, i1, mdr, false, (id) => this.scene.offsetOf(id));
+          sl.scaleTarget = computePaneScale([model], this.bars, false, i0, i1, mdr, false, (id) => this.scene.offsetOf(id), margins);
           if (!animating || !sl.initialized) {
             sl.scale = { ...sl.scaleTarget };
             sl.initialized = true;
@@ -39900,13 +40045,13 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       for (const pane of this.scene.panes.values()) pane.manualScale = null;
       for (const sl of this.scene.indicatorScales.values()) sl.manualScale = null;
       const visibleBars = Math.min(n, 200);
-      const rightOffset = 6;
+      const rightOffset = this.scene.style.margins.right;
       const v = this.clampViewport(w / ((visibleBars + rightOffset) * this.coords.spacingScale), rightOffset);
       this.coords.setViewport(v);
       this.targetBarSpacing = v.barSpacing;
     }
     /** Re-frame after a series replacement (a symbol/timeframe switch): keep the user's
-     *  zoom (bar spacing), re-anchor the newest bars at the default right offset.
+     *  zoom (bar spacing), re-anchor the newest bars at the configured right margin.
      *  `clampViewport`'s fit-all-bars floor deliberately does NOT apply — a progressive
      *  head may still be backfilling toward the previous depth, and raising the spacing
      *  to its temporary bar count would lose the zoom this exists to keep. */
@@ -39915,7 +40060,7 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       this.panVelocity = 0;
       for (const pane of this.scene.panes.values()) pane.manualScale = null;
       for (const sl of this.scene.indicatorScales.values()) sl.manualScale = null;
-      const v = { barSpacing: clampBarSpacing(this.coords.getViewport().barSpacing), rightOffset: defaultViewport().rightOffset };
+      const v = { barSpacing: clampBarSpacing(this.coords.getViewport().barSpacing), rightOffset: this.scene.style.margins.right };
       this.coords.setViewport(v);
       this.targetBarSpacing = v.barSpacing;
     }
@@ -40745,7 +40890,8 @@ ${overlayScrollbarCss(".vela-sd-pane")}
             lineStyle: plot.lineStyle ?? "solid",
             ...plot.base != null ? { base: plot.base } : {}
           },
-          ...plot.overlay ? { overlay: true } : {}
+          ...plot.overlay ? { overlay: true } : {},
+          ...plot.display ? { display: plot.display } : {}
         });
       });
       if (out.markers && out.markers.length > 0) {
@@ -40767,7 +40913,9 @@ ${overlayScrollbarCss(".vela-sd-pane")}
             paneId: "",
             fromSeriesId: from,
             toSeriesId: to,
-            color: band.color
+            color: band.color,
+            ...band.colors ? { colors: [...band.colors] } : {},
+            ...band.gradient ? { gradient: [...band.gradient] } : {}
           }
         ];
       });
@@ -40925,6 +41073,16 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       return Math.sqrt(sq / len);
     });
   }
+  function meanDev(v, len) {
+    return windowed(v, len, (w, from, to) => {
+      let s = 0;
+      for (let k = from; k <= to; k++) s += w[k];
+      const mean = s / len;
+      let dev = 0;
+      for (let k = from; k <= to; k++) dev += Math.abs(w[k] - mean);
+      return dev / len;
+    });
+  }
   function highest(v, len) {
     return windowed(v, len, (w, from, to) => {
       let m = -Infinity;
@@ -41056,7 +41214,7 @@ ${overlayScrollbarCss(".vela-sd-pane")}
     }
     return out;
   }
-  function linreg(v, len) {
+  function linreg(v, len, offset3 = 0) {
     const sx = (len - 1) * len / 2;
     const sxx = (len - 1) * len * (2 * len - 1) / 6;
     const denom = len * sxx - sx * sx;
@@ -41070,9 +41228,101 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       }
       const slope = denom === 0 ? 0 : (len * sxy - sx * sy) / denom;
       const intercept = (sy - slope * sx) / len;
-      return intercept + slope * (len - 1);
+      return intercept + slope * (len - 1 - offset3);
     });
   }
+  function hma(v, len) {
+    const n = Math.max(2, Math.trunc(len));
+    const raw = sub(map(wma(v, Math.max(1, Math.trunc(n / 2))), (x) => 2 * x), wma(v, n));
+    return wma(raw, Math.max(1, Math.round(Math.sqrt(n))));
+  }
+  function alma(v, len, offset3, sigma) {
+    const m = offset3 * (len - 1);
+    const s = len / Math.max(sigma, 1e-9);
+    const weights = new Array(len);
+    let norm = 0;
+    for (let i = 0; i < len; i++) {
+      const d = i - m;
+      const w = Math.exp(-(d * d) / (2 * s * s));
+      weights[i] = w;
+      norm += w;
+    }
+    return windowed(v, len, (win, from, to) => {
+      let acc = 0;
+      for (let k = from; k <= to; k++) acc += win[k] * weights[k - from];
+      return norm === 0 ? Number.NaN : acc / norm;
+    });
+  }
+  function dema(v, len) {
+    const e1 = ema(v, len);
+    return sub(map(e1, (x) => 2 * x), ema(e1, len));
+  }
+  function tema(v, len) {
+    const e1 = ema(v, len);
+    const e2 = ema(e1, len);
+    const e3 = ema(e2, len);
+    return zip(zip(map(e1, (x) => 3 * x), map(e2, (x) => 3 * x), (a, b) => a - b), e3, (a, b) => a + b);
+  }
+  function kama(v, len, fastAlpha = 2 / 3, slowAlpha = 2 / 31) {
+    const direction = map(change(v, len), Math.abs);
+    const volatility = sum(map(change(v), Math.abs), len);
+    const out = new Array(v.length).fill(Number.NaN);
+    let prev3 = Number.NaN;
+    for (let i = 0; i < v.length; i++) {
+      const x = v[i];
+      if (!Number.isFinite(x)) continue;
+      const d = direction[i];
+      const w = volatility[i];
+      if (!Number.isFinite(d) || !Number.isFinite(w)) {
+        prev3 = Number.isFinite(prev3) ? prev3 : x;
+        out[i] = prev3;
+        continue;
+      }
+      const er = w === 0 ? 0 : d / w;
+      const sc = (er * (fastAlpha - slowAlpha) + slowAlpha) ** 2;
+      prev3 = Number.isFinite(prev3) ? prev3 + sc * (x - prev3) : x;
+      out[i] = prev3;
+    }
+    return out;
+  }
+  function mcginley(v, len) {
+    const out = new Array(v.length).fill(Number.NaN);
+    let prev3 = Number.NaN;
+    for (let i = 0; i < v.length; i++) {
+      const x = v[i];
+      if (!Number.isFinite(x)) continue;
+      if (!Number.isFinite(prev3)) {
+        prev3 = x;
+      } else {
+        const ratio = prev3 === 0 ? 0 : x / prev3;
+        const denom = len * ratio ** 4;
+        prev3 += denom === 0 ? 0 : (x - prev3) / denom;
+      }
+      out[i] = prev3;
+    }
+    return out;
+  }
+  function hamming(v, len, a0 = 0.54, a1 = 0.46) {
+    if (len <= 1) return v.map((x) => Number.isFinite(x) ? x : Number.NaN);
+    const weights = new Array(len);
+    let norm = 0;
+    for (let i = 0; i < len; i++) {
+      const w = a0 - a1 * Math.cos(2 * Math.PI * i / (len - 1));
+      weights[i] = w;
+      norm += w;
+    }
+    return windowed(v, len, (win, from, to) => {
+      let acc = 0;
+      for (let k = from; k <= to; k++) acc += win[k] * weights[to - k];
+      return norm === 0 ? Number.NaN : acc / norm;
+    });
+  }
+  function cmo(v, len) {
+    const d = change(v);
+    const up = sum(map(d, (x) => Math.max(x, 0)), len);
+    const dn = sum(map(d, (x) => Math.max(-x, 0)), len);
+    return zip(up, dn, (u, w) => u + w === 0 ? 0 : 100 * (u - w) / (u + w));
+  }
   function swma(v) {
     const out = new Array(v.length).fill(Number.NaN);
     for (let i = 3; i < v.length; i++) {
@@ -41122,38 +41372,253 @@ ${overlayScrollbarCss(".vela-sd-pane")}
   }
 
   // src/core/native-indicators/classics/shared.ts
-  function lengthInput(defval, key = "length", title = "Length", max2 = 5e3) {
-    return { key, title, type: "int", defval, min: 1, max: max2, step: 1 };
+  var SETTINGS = "Settings";
+  var STYLE = "Style";
+  function lengthInput(defval, key = "length", title = "Length", max2 = 5e3, tooltip) {
+    return { key, title, type: "int", defval, min: 1, max: max2, step: 1, group: SETTINGS, ...tooltip != null ? { tooltip } : {} };
+  }
+  function intInput(key, title, defval, min2 = 1, max2 = 5e3, tooltip) {
+    return { key, title, type: "int", defval, min: min2, max: max2, step: 1, group: SETTINGS, ...tooltip != null ? { tooltip } : {} };
   }
-  function sourceInput(defval = "Close") {
-    return { key: "source", title: "Source", type: "string", defval, options: SOURCES2 };
+  function floatInput(key, title, defval, min2 = 0, max2 = 1e3, step = 0.1, tooltip) {
+    return { key, title, type: "float", defval, min: min2, max: max2, step, group: SETTINGS, ...tooltip != null ? { tooltip } : {} };
   }
-  function colorInput(defval = SERIES_LINE, title = "Color", key = "color") {
-    return { key, title, type: "color", defval };
+  function boolInput(key, title, defval, group = SETTINGS, tooltip) {
+    return { key, title, type: "bool", defval, group, ...tooltip != null ? { tooltip } : {} };
+  }
+  function optionInput(key, title, defval, options, tooltip) {
+    return { key, title, type: "string", defval, options, group: SETTINGS, ...tooltip != null ? { tooltip } : {} };
+  }
+  function sourceInput(defval = "Close", key = "source", title = "Source", tooltip) {
+    return { key, title, type: "string", defval, options: SOURCES2, group: SETTINGS, ...tooltip != null ? { tooltip } : {} };
+  }
+  function colorInput(defval = INFO, title = "Color", key = "color", tooltip) {
+    return { key, title, type: "color", defval, group: STYLE, ...tooltip != null ? { tooltip } : {} };
+  }
+  function widthInput(defval = 2, key = "lineWidth", title = "Line Width") {
+    return { key, title, type: "int", defval, min: 1, max: 5, step: 1, group: STYLE, tooltip: "Width of the plotted line, in pixels." };
+  }
+  function transp(hex, transparency) {
+    return withAlpha2(hex, (100 - transparency) / 100);
   }
   function withAlpha2(hex, alpha = 0.08) {
     const m = /^#([0-9a-f]{6})$/i.exec(hex.trim());
     if (!m) return hex;
-    const a = Math.round(alpha * 255).toString(16).padStart(2, "0");
+    const a = Math.round(Math.max(0, Math.min(1, alpha)) * 255).toString(16).padStart(2, "0");
     return `#${m[1]}${a}`;
   }
+  function channelStyleInputs(basisTitle = "Basis") {
+    return [
+      colorInput(BULLISH, "Bullish", "bullColor", "Color of the lower band and of the basis while price holds above it."),
+      colorInput(BEARISH, "Bearish", "bearColor", "Color of the upper band and of the basis while price sits below it."),
+      colorInput(NEUTRAL, basisTitle, "basisColor", "Color of the basis line while price sits exactly on it.")
+    ];
+  }
+  function directionalChannel(bars, basis, upper, lower, ink, key) {
+    const basisColors = basis.map((b, i) => {
+      if (!Number.isFinite(b)) return null;
+      const c = bars[i].close;
+      return c > b ? ink.bull : c < b ? ink.bear : ink.neutral;
+    });
+    const wash = upper.map((u, i) => {
+      const l = lower[i];
+      if (!Number.isFinite(u) || !Number.isFinite(l)) return null;
+      return { topValue: u, bottomValue: l, topColor: transp(ink.bear, 90), bottomColor: transp(ink.bull, 90) };
+    });
+    return {
+      plots: [
+        { key: "basis", title: "Basis", values: [...basis], color: ink.neutral, colors: basisColors },
+        { key: "upper", title: "Upper", values: [...upper], color: transp(ink.bear, 30) },
+        { key: "lower", title: "Lower", values: [...lower], color: transp(ink.bull, 30) }
+      ],
+      bands: [{ key, from: "upper", to: "lower", color: transp(NEUTRAL, 90), gradient: wash }]
+    };
+  }
+  function anchorPlot(key, title, length, level) {
+    return {
+      key,
+      title,
+      values: new Array(length).fill(level),
+      color: transp(NEUTRAL, 100),
+      display: { pane: false, legend: false, dataWindow: false }
+    };
+  }
+  function thresholdZones(length, levels, ink, transparency = 92) {
+    return {
+      plots: [
+        anchorPlot("obAnchor", "Overbought Anchor", length, levels.overbought),
+        anchorPlot("osAnchor", "Oversold Anchor", length, levels.oversold),
+        anchorPlot("topAnchor", "Top Anchor", length, levels.top),
+        anchorPlot("bottomAnchor", "Bottom Anchor", length, levels.bottom)
+      ],
+      bands: [
+        { key: "obZone", from: "obAnchor", to: "topAnchor", color: transp(ink.overbought, transparency) },
+        { key: "osZone", from: "osAnchor", to: "bottomAnchor", color: transp(ink.oversold, transparency) }
+      ]
+    };
+  }
+  function rampColors(values, levels, ink) {
+    return values.map((x) => {
+      if (!Number.isFinite(x)) return null;
+      return x <= levels.mid ? gradient(x, levels.low, levels.mid, ink.low, ink.mid) : gradient(x, levels.mid, levels.high, ink.mid, ink.high);
+    });
+  }
+  function baselineGradient(values, baseline, inkOf, valueTransparency = 50, baseTransparency = 100) {
+    return values.map((x, i) => {
+      if (!Number.isFinite(x)) return null;
+      const ink = inkOf(x, i);
+      const above = x > baseline;
+      return {
+        topValue: Math.max(x, baseline),
+        bottomValue: Math.min(x, baseline),
+        topColor: transp(ink, above ? valueTransparency : baseTransparency),
+        bottomColor: transp(ink, above ? baseTransparency : valueTransparency)
+      };
+    });
+  }
+  function momentumColumnColors(values, ink) {
+    return values.map((x, i) => {
+      if (!Number.isFinite(x)) return null;
+      const prev3 = i > 0 && Number.isFinite(values[i - 1]) ? values[i - 1] : x;
+      const rising = x > prev3;
+      if (x >= 0) return rising ? ink.growAbove : ink.fallAbove;
+      return rising ? ink.growBelow : ink.fallBelow;
+    });
+  }
+  function boundedOscillator(opts) {
+    const mid = (opts.overbought + opts.oversold) / 2;
+    const ramp = rampColors(opts.values, { low: opts.oversold, mid, high: opts.overbought }, opts.ink);
+    const zones = thresholdZones(
+      opts.values.length,
+      { overbought: opts.overbought, oversold: opts.oversold, top: opts.scale.top, bottom: opts.scale.bottom },
+      { overbought: opts.ink.high, oversold: opts.ink.low },
+      opts.zoneTransparency
+    );
+    const plots = [{ key: opts.key, title: opts.title, values: opts.values, color: opts.ink.mid, width: opts.width ?? 1, colors: ramp }, ...zones.plots];
+    const bands = [...zones.bands];
+    if (opts.bandFill != null) bands.push({ key: "band", from: "obAnchor", to: "osAnchor", color: opts.bandFill });
+    if (opts.midpointWash) {
+      plots.push(anchorPlot("midAnchor", "Midpoint Anchor", opts.values.length, mid));
+      bands.push({ key: "wash", from: opts.key, to: "midAnchor", color: transp(NEUTRAL, 100), gradient: baselineGradient(opts.values, mid, (_x, i) => ramp[i] ?? opts.ink.mid) });
+    }
+    const levels = [
+      { key: "overbought", price: opts.overbought, color: opts.levelInk, lineStyle: "dashed", title: opts.levelTitles?.overbought ?? "Overbought" },
+      { key: "oversold", price: opts.oversold, color: opts.levelInk, lineStyle: "dashed", title: opts.levelTitles?.oversold ?? "Oversold" }
+    ];
+    if (opts.midline != null) levels.splice(1, 0, { key: "midline", price: opts.midline, color: opts.levelInk, lineStyle: "dotted", title: "Midline" });
+    return { plots, bands, levels };
+  }
+  function centeredOscillator(opts) {
+    const baseline = opts.baseline ?? 0;
+    const inkOf = (x) => x > baseline ? opts.ink.bull : x < baseline ? opts.ink.bear : opts.ink.neutral;
+    const plots = [
+      { key: opts.key, title: opts.title, values: opts.values, color: opts.ink.neutral, width: opts.width ?? 1, colors: opts.values.map((x) => Number.isFinite(x) ? inkOf(x) : null) },
+      ...opts.extraPlots ?? []
+    ];
+    const bands = [];
+    if (opts.fill !== false) {
+      plots.push(anchorPlot("baseline", "Baseline Anchor", opts.values.length, baseline));
+      bands.push({ key: "wash", from: opts.key, to: "baseline", color: transp(NEUTRAL, 100), gradient: baselineGradient(opts.values, baseline, inkOf, opts.valueTransparency) });
+    }
+    return {
+      plots,
+      bands,
+      levels: [{ key: "zero", price: baseline, color: opts.zeroInk, lineStyle: opts.zeroLineStyle ?? "dashed", title: opts.zeroTitle ?? "Zero Line" }, ...opts.extraLevels ?? []]
+    };
+  }
+  function channels(hex) {
+    const m = /^#([0-9a-f]{6})/i.exec(hex.trim());
+    if (!m) return null;
+    const n = parseInt(m[1], 16);
+    return [n >> 16 & 255, n >> 8 & 255, n & 255];
+  }
+  function gradient(value, low, high, from, to) {
+    const a = channels(from);
+    const b = channels(to);
+    if (!a || !b || !Number.isFinite(value)) return from;
+    const span = high - low;
+    const t = span === 0 ? 0 : Math.max(0, Math.min(1, (value - low) / span));
+    const mix2 = (i) => Math.round(a[i] + (b[i] - a[i]) * t).toString(16).padStart(2, "0");
+    return `#${mix2(0)}${mix2(1)}${mix2(2)}`;
+  }
 
   // src/core/native-indicators/classics/averages.ts
-  var MA_KINDS = ["SMA", "EMA", "WMA", "RMA", "VWMA"];
-  var offsetInput = { key: "offset", title: "Offset", type: "int", defval: 0, min: -500, max: 500, step: 1 };
+  var MA_TYPES = ["SMA", "EMA", "WMA", "RMA (SMMA)", "HMA", "ALMA", "VWMA", "DEMA", "TEMA", "KAMA", "LSMA", "McGinley", "Hamming"];
+  var ENVELOPE_MA_TYPES = ["SMA", "EMA", "WMA", "RMA (SMMA)", "HMA", "VWMA"];
+  function movingAverageOf(kind, src, bars, len, opts = {}) {
+    switch (kind) {
+      case "EMA":
+        return ema(src, len);
+      case "WMA":
+        return wma(src, len);
+      case "RMA":
+      case "RMA (SMMA)":
+        return rma(src, len);
+      case "HMA":
+        return hma(src, len);
+      case "ALMA":
+        return alma(src, len, opts.almaOffset ?? 0.85, opts.almaSigma ?? 6);
+      case "VWMA":
+        return vwma(src, volumes(bars), len);
+      case "DEMA":
+        return dema(src, len);
+      case "TEMA":
+        return tema(src, len);
+      case "KAMA":
+        return kama(src, len);
+      case "LSMA":
+        return linreg(src, len, opts.lsmaOffset ?? 0);
+      case "McGinley":
+        return mcginley(src, len);
+      case "Hamming":
+        return hamming(src, len);
+      default:
+        return sma(src, len);
+    }
+  }
+  function slopeColors(values, bull, bear, flat) {
+    return values.map((x, i) => {
+      if (!Number.isFinite(x)) return null;
+      const prev3 = i > 0 ? values[i - 1] : Number.NaN;
+      if (!Number.isFinite(prev3)) return flat;
+      return x > prev3 ? bull : x < prev3 ? bear : flat;
+    });
+  }
+  function directionInputs() {
+    return [
+      boolInput("trendColor", "Slope Trend Coloring", true, STYLE, "Colors the line by its slope \u2014 bullish while it rises, bearish while it falls. Disable to draw it in the neutral color."),
+      colorInput(BULLISH, "Bullish", "bullColor"),
+      colorInput(BEARISH, "Bearish", "bearColor"),
+      colorInput(NEUTRAL, "Neutral", "neutralColor"),
+      widthInput()
+    ];
+  }
+  function slopeColoredPlot(key, title, values, inputs) {
+    const neutral = str3(inputs, "neutralColor", NEUTRAL);
+    const colored = bool(inputs, "trendColor", true);
+    return {
+      key,
+      title,
+      values,
+      color: neutral,
+      width: num3(inputs, "lineWidth", 2),
+      ...colored ? { colors: slopeColors(values, str3(inputs, "bullColor", BULLISH), str3(inputs, "bearColor", BEARISH), neutral) } : {}
+    };
+  }
+  var offsetInput = { key: "offset", title: "Offset", type: "int", defval: 0, min: -500, max: 500, step: 1, group: SETTINGS, tooltip: "Bars the plotted line is displaced by. Positive values push it to the right." };
   function fixedAverage(type, title, shortTitle, smooth) {
     return {
       type,
       title,
       shortTitle,
       overlay: true,
-      inputs: [lengthInput(20), sourceInput(), offsetInput, colorInput()],
+      inputs: [lengthInput(20, "length", "Length", 5e3, `Number of bars used in the ${shortTitle} calculation.`), sourceInput("Close", "source", "Source", `Price series the ${shortTitle} is calculated on.`), offsetInput, colorInput()],
       compute: (bars, inputs) => {
         const len = num3(inputs, "length", 20);
         let values = smooth(sourceValues(bars, str3(inputs, "source", "Close")), len);
         const offset3 = Math.trunc(num3(inputs, "offset", 0));
         if (offset3 !== 0) values = shift3(values, offset3);
-        return { plots: [{ key: shortTitle.toLowerCase(), title: shortTitle, values, color: str3(inputs, "color", SERIES_LINE), width: 2 }] };
+        return { plots: [{ key: shortTitle.toLowerCase(), title: shortTitle, values, color: str3(inputs, "color", INFO), width: 2 }] };
       }
     };
   }
@@ -41165,36 +41630,37 @@ ${overlayScrollbarCss(".vela-sd-pane")}
     shortTitle: "MA",
     overlay: true,
     inputs: [
-      { key: "maType", title: "Type", type: "string", defval: "SMA", options: MA_KINDS },
-      lengthInput(20),
-      sourceInput(),
+      optionInput("maType", "MA 1 Type", "SMA", MA_TYPES, "Moving average calculation used for MA 1."),
+      lengthInput(20, "length", "MA 1 Length", 5e3, "Number of bars used in the MA 1 calculation."),
+      sourceInput("Close", "source", "MA 1 Source", "Price series MA 1 is calculated on."),
+      boolInput("showMa2", "Show MA 2", false, SETTINGS, "Displays the optional second moving average."),
+      optionInput("ma2Type", "MA 2 Type", "SMA", MA_TYPES, "Moving average calculation used for MA 2."),
+      lengthInput(50, "ma2Length", "MA 2 Length", 5e3, "Number of bars used in the MA 2 calculation."),
+      sourceInput("Close", "ma2Source", "MA 2 Source", "Price series MA 2 is calculated on."),
+      floatInput("almaOffset", "ALMA Offset", 0.85, 0, 1, 0.05, "ALMA type only. Values near 1 make the average more responsive, values near 0 make it smoother."),
+      floatInput("almaSigma", "ALMA Sigma", 6, 0.1, 100, 0.5, "ALMA type only. Larger values widen the Gaussian window for a smoother average."),
+      intInput("lsmaOffset", "LSMA Offset", 0, 0, 500, "LSMA type only. Bar offset applied to the linear regression value."),
       offsetInput,
-      colorInput()
+      colorInput(INFO, "MA 1", "color", "MA 1 line color."),
+      colorInput(WARNING, "MA 2", "ma2Color", "MA 2 line color.")
     ],
     compute: (bars, inputs) => {
-      const len = num3(inputs, "length", 20);
-      const src = sourceValues(bars, str3(inputs, "source", "Close"));
+      const opts = {
+        almaOffset: num3(inputs, "almaOffset", 0.85),
+        almaSigma: num3(inputs, "almaSigma", 6),
+        lsmaOffset: Math.trunc(num3(inputs, "lsmaOffset", 0))
+      };
+      const offset3 = Math.trunc(num3(inputs, "offset", 0));
+      const displace = (v) => offset3 === 0 ? v : shift3(v, offset3);
       const kind = str3(inputs, "maType", "SMA");
-      let values;
-      switch (kind) {
-        case "EMA":
-          values = ema(src, len);
-          break;
-        case "WMA":
-          values = wma(src, len);
-          break;
-        case "RMA":
-          values = rma(src, len);
-          break;
-        case "VWMA":
-          values = vwma(src, volumes(bars), len);
-          break;
-        default:
-          values = sma(src, len);
+      const ma1 = displace(movingAverageOf(kind, sourceValues(bars, str3(inputs, "source", "Close")), bars, num3(inputs, "length", 20), opts));
+      const plots = [{ key: "ma", title: kind, values: ma1, color: str3(inputs, "color", INFO), width: 2 }];
+      if (bool(inputs, "showMa2", false)) {
+        const kind2 = str3(inputs, "ma2Type", "SMA");
+        const ma2 = displace(movingAverageOf(kind2, sourceValues(bars, str3(inputs, "ma2Source", "Close")), bars, num3(inputs, "ma2Length", 50), opts));
+        plots.push({ key: "ma2", title: `${kind2} 2`, values: ma2, color: str3(inputs, "ma2Color", WARNING), width: 2 });
       }
-      const offset3 = Math.trunc(num3(inputs, "offset", 0));
-      if (offset3 !== 0) values = shift3(values, offset3);
-      return { plots: [{ key: "ma", title: kind, values, color: str3(inputs, "color", SERIES_LINE), width: 2 }] };
+      return { plots };
     }
   };
   var smoothedMa = {
@@ -41202,17 +41668,13 @@ ${overlayScrollbarCss(".vela-sd-pane")}
     title: "Smoothed Moving Average",
     shortTitle: "RMA",
     overlay: true,
-    inputs: [lengthInput(14), sourceInput(), colorInput()],
+    inputs: [
+      sourceInput("Close", "source", "Source", "Price series the average smooths. Wilder computed his 1978 indicators on the close, but the recursion accepts any source."),
+      lengthInput(14, "length", "RMA Length", 5e3, "Number of bars N in Wilder's smoothing: the line keeps (N \u2212 1)/N of its previous value and blends in 1/N of the new price. That alpha is smaller than an EMA's, so an N-period RMA responds like a (2N \u2212 1)-period EMA."),
+      ...directionInputs()
+    ],
     compute: (bars, inputs) => ({
-      plots: [
-        {
-          key: "rma",
-          title: "RMA",
-          values: rma(sourceValues(bars, str3(inputs, "source", "Close")), num3(inputs, "length", 14)),
-          color: str3(inputs, "color", SERIES_LINE),
-          width: 2
-        }
-      ]
+      plots: [slopeColoredPlot("rma", "RMA", rma(sourceValues(bars, str3(inputs, "source", "Close")), num3(inputs, "length", 14)), inputs)]
     })
   };
   var zlema = {
@@ -41220,61 +41682,86 @@ ${overlayScrollbarCss(".vela-sd-pane")}
     title: "Zero-Lag Exponential Moving Average",
     shortTitle: "ZLEMA",
     overlay: true,
-    inputs: [lengthInput(14), sourceInput(), colorInput()],
+    inputs: [
+      sourceInput("Close", "source", "Source", "Price series the average de-lags and then smooths."),
+      lengthInput(21, "length", "ZLEMA Length", 5e3, "EMA length N. It sets both the smoothing (alpha = 2 / (N + 1)) and the correction: an EMA of length N lags by about (N \u2212 1)/2 bars, and the de-lagging step is sized to cancel exactly that."),
+      ...directionInputs()
+    ],
     compute: (bars, inputs) => {
-      const len = num3(inputs, "length", 14);
+      const len = num3(inputs, "length", 21);
       const src = sourceValues(bars, str3(inputs, "source", "Close"));
-      const lag = Math.floor((len - 1) / 2);
-      const lagged = shift3(src, lag);
-      const delagged = zip(src, lagged, (a, b) => 2 * a - b);
-      return { plots: [{ key: "zlema", title: "ZLEMA", values: ema(delagged, len), color: str3(inputs, "color", SERIES_LINE), width: 2 }] };
+      const lag = Math.round((len - 1) / 2);
+      const delagged = zip(src, shift3(src, lag), (a, b) => 2 * a - b);
+      return { plots: [slopeColoredPlot("zlema", "ZLEMA", ema(delagged, len), inputs)] };
     }
   };
+  var MOMENTUM_SCALER = "Momentum (|CMO|)";
+  var VOLATILITY_SCALER = "Volatility (StDev Ratio)";
+  var REGIME = "Trend Regime";
   var vidya = {
     type: "vidya",
     title: "Variable Index Dynamic Average",
     shortTitle: "VIDYA",
     overlay: true,
-    inputs: [lengthInput(14), { key: "cmoLength", title: "Momentum length", type: "int", defval: 9, min: 1, max: 500, step: 1 }, sourceInput(), colorInput()],
+    inputs: [
+      sourceInput("Close", "source", "Source", "Price series the average smooths. VIDYA is classically computed on the close."),
+      lengthInput(12, "length", "VIDYA Length", 5e3, "EMA-equivalent length N of the base smoothing constant, alpha = 2 / (N + 1). The adaptive scaler rescales this base speed bar by bar."),
+      optionInput("scaler", "Adaptive Scaler", MOMENTUM_SCALER, [MOMENTUM_SCALER, VOLATILITY_SCALER], "Bar-by-bar measure that rescales the smoothing constant. Momentum divides the absolute Chande Momentum Oscillator by 100; Volatility is Chande's original short-term over reference standard deviation."),
+      intInput("scalerLength", "Scaler Lookback", 9, 1, 5e3, "Lookback of the adaptive scaler \u2014 the CMO period in momentum mode, or the short-term standard deviation window in volatility mode."),
+      intInput("refLength", "Reference StDev Length", 30, 2, 5e3, "Volatility mode only \u2014 window of the reference standard deviation the short-term reading is divided by."),
+      { ...floatInput("flatThreshold", "Flat Threshold", 0.05, 0, 10, 0.01, "One-bar change of VIDYA, as a fraction of ATR, below which the line reads as flat."), group: REGIME },
+      { ...intInput("atrLength", "ATR Normalization Length", 14, 1, 5e3, "ATR window used to normalize VIDYA's one-bar slope, so the flat threshold behaves consistently across symbols and timeframes."), group: REGIME },
+      boolInput("trendColor", "Trend Regime Coloring", true, STYLE, "Colors VIDYA by its regime read \u2014 bullish while sloping up beyond the flat threshold, bearish while sloping down, flat inside congestion."),
+      boolInput("adaptiveGradient", "Adaptive Gradient", true, STYLE, "Blends the trend color toward the flat color according to the adaptive scaler, so the line pales as momentum dies."),
+      colorInput(BULLISH, "Bullish", "bullColor"),
+      colorInput(BEARISH, "Bearish", "bearColor"),
+      colorInput(NEUTRAL, "Flat", "flatColor"),
+      colorInput(NEUTRAL, "Neutral", "neutralColor"),
+      widthInput()
+    ],
     compute: (bars, inputs) => {
-      const len = num3(inputs, "length", 14);
-      const cmoLen = num3(inputs, "cmoLength", 9);
+      const len = num3(inputs, "length", 12);
       const src = sourceValues(bars, str3(inputs, "source", "Close"));
-      const d = change(src);
-      const su = new Array(src.length).fill(Number.NaN);
-      const sd = new Array(src.length).fill(Number.NaN);
-      for (let i = cmoLen; i < src.length; i++) {
-        let u = 0;
-        let w = 0;
-        let ok = true;
-        for (let k = i - cmoLen + 1; k <= i; k++) {
-          const x = d[k];
-          if (!Number.isFinite(x)) {
-            ok = false;
-            break;
-          }
-          if (x > 0) u += x;
-          else w -= x;
-        }
-        if (ok) {
-          su[i] = u;
-          sd[i] = w;
-        }
-      }
-      const alpha = 2 / (len + 1);
+      const scalerLen = num3(inputs, "scalerLength", 9);
+      const momentum = map(cmo(src, scalerLen), (x) => Math.abs(x) / 100);
+      const shortDev = stdev(src, scalerLen);
+      const refDev = stdev(src, num3(inputs, "refLength", 30));
+      const volatility = zip(shortDev, refDev, (s, r) => r > 0 ? s / r : 0);
+      const scale = str3(inputs, "scaler", MOMENTUM_SCALER) === VOLATILITY_SCALER ? volatility : momentum;
+      const alphaBase = 2 / (len + 1);
       const out = new Array(src.length).fill(Number.NaN);
       let prev3 = Number.NaN;
       for (let i = 0; i < src.length; i++) {
         const x = src[i];
-        const u = su[i];
-        const w = sd[i];
-        if (!Number.isFinite(x) || !Number.isFinite(u) || !Number.isFinite(w)) continue;
-        const total = u + w;
-        const k = total === 0 ? 0 : Math.abs((u - w) / total);
-        prev3 = Number.isFinite(prev3) ? alpha * k * x + (1 - alpha * k) * prev3 : x;
+        if (!Number.isFinite(x)) continue;
+        const k = scale[i];
+        if (!Number.isFinite(prev3) || !Number.isFinite(k)) prev3 = x;
+        else {
+          const alpha = Math.min(alphaBase * k, 1);
+          prev3 = alpha * x + (1 - alpha) * prev3;
+        }
         out[i] = prev3;
       }
-      return { plots: [{ key: "vidya", title: "VIDYA", values: out, color: str3(inputs, "color", SERIES_LINE), width: 2 }] };
+      const neutral = str3(inputs, "neutralColor", NEUTRAL);
+      if (!bool(inputs, "trendColor", true)) {
+        return { plots: [{ key: "vidya", title: "VIDYA", values: out, color: neutral, width: num3(inputs, "lineWidth", 2) }] };
+      }
+      const bull = str3(inputs, "bullColor", BULLISH);
+      const bear = str3(inputs, "bearColor", BEARISH);
+      const flat = str3(inputs, "flatColor", NEUTRAL);
+      const threshold = num3(inputs, "flatThreshold", 0.05);
+      const range = atr(bars, num3(inputs, "atrLength", 14));
+      const fade = bool(inputs, "adaptiveGradient", true);
+      const colors = out.map((x, i) => {
+        if (!Number.isFinite(x)) return null;
+        const r = range[i];
+        const slope = i > 0 && Number.isFinite(out[i - 1]) ? x - out[i - 1] : 0;
+        const normalized = Number.isFinite(r) && r !== 0 ? slope / r : 0;
+        const ink = normalized > threshold ? bull : normalized < -threshold ? bear : null;
+        if (ink == null) return flat;
+        return fade ? gradient(Math.min(scale[i] ?? 0, 1), 0, 1, flat, ink) : ink;
+      });
+      return { plots: [{ key: "vidya", title: "VIDYA", values: out, color: flat, width: num3(inputs, "lineWidth", 2), colors }] };
     }
   };
   var maEnvelope = {
@@ -41283,115 +41770,218 @@ ${overlayScrollbarCss(".vela-sd-pane")}
     shortTitle: "MA Env",
     overlay: true,
     inputs: [
-      { key: "maType", title: "Type", type: "string", defval: "SMA", options: ["SMA", "EMA"] },
-      lengthInput(20),
-      sourceInput(),
-      { key: "percent", title: "Percent", type: "float", defval: 2.5, min: 0.01, max: 50, step: 0.1 },
-      colorInput()
+      optionInput("maType", "MA Type", "SMA", ENVELOPE_MA_TYPES, "Moving average type used as the envelope basis."),
+      { ...lengthInput(20, "length", "Length", 5e3, "Number of bars in the basis moving average."), min: 2 },
+      sourceInput("Close", "source", "Source", "Price series the basis moving average is calculated on."),
+      floatInput("percent", "Percent", 2.5, 0, 50, 0.1, "Envelope offset as a percentage of the basis. Upper = basis \xD7 (1 + percent / 100), lower = basis \xD7 (1 \u2212 percent / 100)."),
+      ...channelStyleInputs()
     ],
     compute: (bars, inputs) => {
-      const len = num3(inputs, "length", 20);
       const src = sourceValues(bars, str3(inputs, "source", "Close"));
-      const basis = str3(inputs, "maType", "SMA") === "EMA" ? ema(src, len) : sma(src, len);
+      const basis = movingAverageOf(str3(inputs, "maType", "SMA"), src, bars, num3(inputs, "length", 20));
       const k = num3(inputs, "percent", 2.5) / 100;
-      const ink = str3(inputs, "color", SERIES_LINE);
-      return {
-        plots: [
-          { key: "basis", title: "Basis", values: basis, color: ink, width: 2 },
-          { key: "upper", title: "Upper", values: map(basis, (x) => x * (1 + k)), color: ink },
-          { key: "lower", title: "Lower", values: map(basis, (x) => x * (1 - k)), color: ink }
-        ],
-        bands: [{ key: "envelope", from: "upper", to: "lower", color: withAlpha2(ink) }]
-      };
+      const ink = { bull: str3(inputs, "bullColor", BULLISH), bear: str3(inputs, "bearColor", BEARISH), neutral: str3(inputs, "basisColor", NEUTRAL) };
+      return directionalChannel(bars, basis, map(basis, (x) => x * (1 + k)), map(basis, (x) => x * (1 - k)), ink, "envelope");
     }
   };
+  var LINREG_CURVE = "Curve";
+  var LINREG_SLOPE = "Slope";
   var linearRegression = {
     type: "linear-regression",
     title: "Linear Regression Curve",
     shortTitle: "LinReg",
-    overlay: true,
-    inputs: [lengthInput(14), sourceInput(), colorInput()],
-    compute: (bars, inputs) => ({
-      plots: [
-        {
-          key: "linreg",
-          title: "LinReg",
-          values: linreg(sourceValues(bars, str3(inputs, "source", "Close")), num3(inputs, "length", 14)),
-          color: str3(inputs, "color", SERIES_LINE),
-          width: 2
-        }
-      ]
-    })
+    // Slope lives in its own pane; Curve force-overlays itself onto the price candles.
+    overlay: false,
+    inputs: [
+      optionInput("mode", "Mode", LINREG_CURVE, [LINREG_CURVE, LINREG_SLOPE], "Curve plots the regression value on the price chart; Slope plots the per-bar slope of the fit in the pane."),
+      { ...lengthInput(100, "length", "Length", 5e3, "Number of bars used to fit the linear regression."), min: 2 },
+      sourceInput("Close", "source", "Source", "Price series the regression is fitted to."),
+      colorInput(BULLISH, "Rising", "bullColor", "Color of the regression curve and slope line while the fit slopes upward."),
+      colorInput(BEARISH, "Falling", "bearColor", "Color of the regression curve and slope line while the fit slopes downward."),
+      colorInput(NEUTRAL, "Regression Line", "lineColor", "Color of the regression curve and slope line while the fit is flat.")
+    ],
+    compute: (bars, inputs) => {
+      const len = num3(inputs, "length", 100);
+      const src = sourceValues(bars, str3(inputs, "source", "Close"));
+      const curve = linreg(src, len, 0);
+      const slope = zip(curve, linreg(src, len, 1), (a, b) => a - b);
+      const bull = str3(inputs, "bullColor", BULLISH);
+      const bear = str3(inputs, "bearColor", BEARISH);
+      const flat = str3(inputs, "lineColor", NEUTRAL);
+      const colors = slope.map((s) => Number.isFinite(s) ? s > 0 ? bull : s < 0 ? bear : flat : null);
+      if (str3(inputs, "mode", LINREG_CURVE) === LINREG_SLOPE) {
+        return {
+          plots: [{ key: "slope", title: "Slope", values: slope, color: flat, width: 2, colors }],
+          levels: [{ key: "zero", price: 0, color: transp(NEUTRAL, 50), lineStyle: "dashed" }]
+        };
+      }
+      return { plots: [{ key: "curve", title: "Curve", values: curve, color: flat, width: 2, colors, overlay: true }] };
+    }
   };
   var averageSpecs = [simpleMa, exponentialMa, movingAverage, smoothedMa, zlema, vidya, maEnvelope, linearRegression];
 
   // src/core/native-indicators/classics/bands.ts
+  var JAW_COLOR = "#ab47bc";
+  var TEETH_COLOR = WARNING;
+  var LIPS_COLOR = "#ffd700";
   function bollinger(bars, inputs) {
     const len = num3(inputs, "length", 20);
     const mult = num3(inputs, "mult", 2);
     const src = sourceValues(bars, str3(inputs, "source", "Close"));
     const basis = sma(src, len);
     const dev = map(stdev(src, len), (x) => x * mult);
-    return { basis, upper: zip(basis, dev, (b, d) => b + d), lower: zip(basis, dev, (b, d) => b - d) };
+    return { src, basis, upper: zip(basis, dev, (b, d) => b + d), lower: zip(basis, dev, (b, d) => b - d) };
+  }
+  function bollingerInputs(multMin, multStep) {
+    return [
+      { ...lengthInput(20, "length", "Length", 5e3, "Number of bars used for the Bollinger Bands basis (a simple moving average) and for the standard deviation."), min: 2 },
+      sourceInput("Close", "source", "Source", "Price series the bands are computed from."),
+      floatInput("mult", "Multiplier", 2, multMin, 50, multStep, "Standard deviation multiplier for the upper and lower bands.")
+    ];
   }
-  var BB_INPUTS = [lengthInput(20), sourceInput(), { key: "mult", title: "StdDev", type: "float", defval: 2, min: 0.1, max: 50, step: 0.1 }];
   var bollingerBands = {
     type: "bollinger-bands",
     title: "Bollinger Bands",
     shortTitle: "BB",
     overlay: true,
-    inputs: [...BB_INPUTS, colorInput()],
+    inputs: [
+      lengthInput(20, "length", "Length", 5e3, "Number of bars used to calculate the basis SMA and the standard deviation."),
+      sourceInput("Close", "source", "Source", "Price series the bands are calculated on."),
+      floatInput("mult", "Multiplier", 2, 0, 50, 0.1, "Number of standard deviations added above and below the basis to form the bands."),
+      colorInput(WARNING, "Basis", "basisColor", "Color of the basis (middle band) moving average."),
+      colorInput(INFO, "Bands", "color", "Color of the upper and lower bands."),
+      colorInput(transp(INFO, 92), "Fill", "fillColor", "Fill color of the area between the upper and lower bands.")
+    ],
     compute: (bars, inputs) => {
       const { basis, upper, lower } = bollinger(bars, inputs);
-      const ink = str3(inputs, "color", SERIES_LINE);
+      const ink = str3(inputs, "color", INFO);
       return {
         plots: [
-          { key: "basis", title: "Basis", values: basis, color: WARNING },
+          { key: "basis", title: "Basis", values: basis, color: str3(inputs, "basisColor", WARNING) },
           { key: "upper", title: "Upper", values: upper, color: ink },
           { key: "lower", title: "Lower", values: lower, color: ink }
         ],
-        bands: [{ key: "bb", from: "upper", to: "lower", color: withAlpha2(ink) }]
+        bands: [{ key: "bb", from: "upper", to: "lower", color: str3(inputs, "fillColor", transp(INFO, 92)) }]
       };
     }
   };
+  var PERCENT_B_MID = 0.5;
+  var THRESHOLDS = "Thresholds";
   var percentB = {
     type: "percent-b",
     title: "Bollinger Bands %B",
     shortTitle: "%B",
     overlay: false,
-    inputs: [...BB_INPUTS, colorInput()],
+    inputs: [
+      ...bollingerInputs(1e-3, 0.25),
+      { ...floatInput("overbought", "Overbought", 1, -10, 10, 0.05, "Level treated as overbought. 1 is the upper band itself, so readings above the default mean price sits outside the bands."), group: THRESHOLDS },
+      { ...floatInput("oversold", "Oversold", 0, -10, 10, 0.05, "Level treated as oversold. 0 is the lower band itself, so readings below the default mean price sits outside the bands."), group: THRESHOLDS },
+      colorInput(BULLISH, "Bullish", "bullColor", "Color of %B above the 0.5 midline, where price trades in the upper half of the bands."),
+      colorInput(BEARISH, "Bearish", "bearColor", "Color of %B below the 0.5 midline, where price trades in the lower half of the bands."),
+      boolInput("gradientFill", "Gradient Fill", true, STYLE, "Vertical gradient between %B and the 0.5 midline, fully transparent at the midline and more opaque at the oscillator value."),
+      colorInput(NEUTRAL, "Levels Color", "levelsColor", "Color of the dashed overbought/oversold levels and of the dotted midline.")
+    ],
     compute: (bars, inputs) => {
-      const { upper, lower } = bollinger(bars, inputs);
-      const src = sourceValues(bars, str3(inputs, "source", "Close"));
+      const { src, upper, lower } = bollinger(bars, inputs);
       const values = src.map((x, i) => {
         const u = upper[i];
         const l = lower[i];
         return Number.isFinite(u) && Number.isFinite(l) && u !== l ? (x - l) / (u - l) : Number.NaN;
       });
-      return {
-        plots: [{ key: "pb", title: "%B", values, color: str3(inputs, "color", SERIES_LINE), width: 2 }],
-        levels: [
-          { key: "upper", price: 1, color: NEUTRAL },
-          { key: "middle", price: 0.5, color: NEUTRAL, lineStyle: "dotted" },
-          { key: "lower", price: 0, color: NEUTRAL }
-        ]
-      };
+      const bull = str3(inputs, "bullColor", BULLISH);
+      const bear = str3(inputs, "bearColor", BEARISH);
+      const levels = str3(inputs, "levelsColor", NEUTRAL);
+      const colors = values.map((x) => Number.isFinite(x) ? x > PERCENT_B_MID ? bull : bear : null);
+      const plots = [
+        { key: "pb", title: "%B", values, color: bear, colors },
+        { key: "mid", title: "Midline", values: values.map((x) => Number.isFinite(x) ? PERCENT_B_MID : Number.NaN), color: levels, display: { pane: false, legend: false, dataWindow: false } }
+      ];
+      const bands = bool(inputs, "gradientFill", true) ? [
+        {
+          key: "pbFill",
+          from: "pb",
+          to: "mid",
+          color: transp(NEUTRAL, 100),
+          // Opaque at the oscillator, invisible where it meets the midline.
+          gradient: values.map((x) => {
+            if (!Number.isFinite(x)) return null;
+            const up = x > PERCENT_B_MID;
+            const ink = up ? bull : bear;
+            return {
+              topValue: Math.max(x, PERCENT_B_MID),
+              bottomValue: Math.min(x, PERCENT_B_MID),
+              topColor: up ? transp(ink, 50) : transp(ink, 100),
+              bottomColor: up ? transp(ink, 100) : transp(ink, 50)
+            };
+          })
+        }
+      ] : [];
+      return {
+        plots,
+        bands,
+        levels: [
+          { key: "overbought", price: num3(inputs, "overbought", 1), color: levels, lineStyle: "dashed", title: "Overbought" },
+          { key: "oversold", price: num3(inputs, "oversold", 0), color: levels, lineStyle: "dashed", title: "Oversold" },
+          { key: "midline", price: PERCENT_B_MID, color: transp(levels, 50), lineStyle: "dotted", title: "Midline" }
+        ]
+      };
     }
   };
+  var SQUEEZE_BULGE = "Squeeze & Bulge";
   var bandwidth = {
     type: "bandwidth",
     title: "Bollinger Bands Width",
     shortTitle: "BandWidth",
     overlay: false,
-    inputs: [...BB_INPUTS, colorInput()],
+    inputs: [
+      ...bollingerInputs(1e-3, 0.25),
+      { ...intInput("lookback", "Reference Lookback", 125, 2, 5e3, "Window used to locate the lowest (Squeeze) and highest (Bulge) BandWidth references."), group: SQUEEZE_BULGE },
+      boolInput("showSqueeze", "Show Squeeze Level", true, SQUEEZE_BULGE, "Plots the lowest BandWidth of the reference lookback \u2014 unusually compressed volatility, a condition rather than a directional signal."),
+      boolInput("showBulge", "Show Bulge Level", true, SQUEEZE_BULGE, "Plots the highest BandWidth of the reference lookback \u2014 extreme width that is unlikely to be sustained."),
+      colorInput(NEUTRAL, "BandWidth", "color", "Color of the BandWidth line. At its Squeeze reference the line takes the Squeeze color, at its Bulge reference the Bulge color."),
+      boolInput("gradientFill", "Gradient Fill", true, STYLE, "Fills the area between zero and BandWidth with a vertical gradient, fully transparent at zero."),
+      colorInput(WARNING, "Squeeze Level", "squeezeColor", "Color of the lowest-BandWidth reference line."),
+      colorInput(BEARISH, "Bulge Level", "bulgeColor", "Color of the highest-BandWidth reference line.")
+    ],
     compute: (bars, inputs) => {
       const { basis, upper, lower } = bollinger(bars, inputs);
       const values = basis.map((b, i) => {
         const u = upper[i];
         const l = lower[i];
-        return Number.isFinite(b) && b !== 0 && Number.isFinite(u) && Number.isFinite(l) ? (u - l) / b * 100 : Number.NaN;
+        return Number.isFinite(b) && b !== 0 && Number.isFinite(u) && Number.isFinite(l) ? (u - l) / b : Number.NaN;
       });
-      return { plots: [{ key: "bbw", title: "BBW", values, color: str3(inputs, "color", SERIES_LINE), width: 2 }] };
+      const lookback = num3(inputs, "lookback", 125);
+      const squeezeLevel = lowest(values, lookback);
+      const bulgeLevel = highest(values, lookback);
+      const base = str3(inputs, "color", NEUTRAL);
+      const squeezeInk = str3(inputs, "squeezeColor", WARNING);
+      const bulgeInk = str3(inputs, "bulgeColor", BEARISH);
+      const colors = values.map((x, i) => {
+        if (!Number.isFinite(x)) return null;
+        if (x <= squeezeLevel[i]) return squeezeInk;
+        if (x >= bulgeLevel[i]) return bulgeInk;
+        return base;
+      });
+      const plots = [
+        { key: "bbw", title: "BandWidth", values, color: base, colors },
+        { key: "zero", title: "Zero Line", values: values.map((x) => Number.isFinite(x) ? 0 : Number.NaN), color: transp(NEUTRAL, 90) }
+      ];
+      if (bool(inputs, "showSqueeze", true)) plots.push({ key: "squeeze", title: "Squeeze Level", values: squeezeLevel, color: squeezeInk });
+      if (bool(inputs, "showBulge", true)) plots.push({ key: "bulge", title: "Bulge Level", values: bulgeLevel, color: bulgeInk });
+      const bands = bool(inputs, "gradientFill", true) ? [
+        {
+          key: "bbwFill",
+          from: "bbw",
+          to: "zero",
+          color: transp(NEUTRAL, 100),
+          gradient: values.map((x, i) => {
+            if (!Number.isFinite(x)) return null;
+            const ink = colors[i] ?? base;
+            return { topValue: x, bottomValue: 0, topColor: transp(ink, 50), bottomColor: transp(ink, 100) };
+          })
+        }
+      ] : [];
+      return { plots, bands };
     }
   };
   var keltner = {
@@ -41400,26 +41990,17 @@ ${overlayScrollbarCss(".vela-sd-pane")}
     shortTitle: "KC",
     overlay: true,
     inputs: [
-      lengthInput(20),
-      { key: "mult", title: "Multiplier", type: "float", defval: 2, min: 0.1, max: 50, step: 0.1 },
-      { key: "atrLength", title: "ATR length", type: "int", defval: 10, min: 1, max: 500, step: 1 },
-      sourceInput(),
-      colorInput()
+      lengthInput(20, "length", "EMA Length", 5e3, "Number of bars used to compute the exponential moving average basis line."),
+      intInput("atrLength", "ATR Length", 10, 1, 5e3, "Number of bars used to compute the Average True Range (Wilder smoothing)."),
+      floatInput("mult", "Multiplier", 2, 0, 50, 0.1, "ATR multiple used to offset the upper and lower bands from the basis line."),
+      sourceInput("Close", "source", "Source", "Price series used to compute the basis line."),
+      ...channelStyleInputs("Basis Color")
     ],
     compute: (bars, inputs) => {
-      const len = num3(inputs, "length", 20);
-      const mult = num3(inputs, "mult", 2);
-      const basis = ema(sourceValues(bars, str3(inputs, "source", "Close")), len);
-      const range = map(atr(bars, num3(inputs, "atrLength", 10)), (x) => x * mult);
-      const ink = str3(inputs, "color", SERIES_LINE);
-      return {
-        plots: [
-          { key: "basis", title: "Basis", values: basis, color: WARNING },
-          { key: "upper", title: "Upper", values: zip(basis, range, (b, r) => b + r), color: ink },
-          { key: "lower", title: "Lower", values: zip(basis, range, (b, r) => b - r), color: ink }
-        ],
-        bands: [{ key: "kc", from: "upper", to: "lower", color: withAlpha2(ink) }]
-      };
+      const basis = ema(sourceValues(bars, str3(inputs, "source", "Close")), num3(inputs, "length", 20));
+      const range = map(atr(bars, num3(inputs, "atrLength", 10)), (x) => x * num3(inputs, "mult", 2));
+      const ink = { bull: str3(inputs, "bullColor", BULLISH), bear: str3(inputs, "bearColor", BEARISH), neutral: str3(inputs, "basisColor", NEUTRAL) };
+      return directionalChannel(bars, basis, zip(basis, range, (b, r) => b + r), zip(basis, range, (b, r) => b - r), ink, "kc");
     }
   };
   var donchian = {
@@ -41427,19 +42008,24 @@ ${overlayScrollbarCss(".vela-sd-pane")}
     title: "Donchian Channels",
     shortTitle: "DC",
     overlay: true,
-    inputs: [lengthInput(20), colorInput()],
+    inputs: [
+      lengthInput(20, "length", "Length", 5e3, "Lookback length. The upper and lower channels are the highest high and lowest low over this many bars."),
+      colorInput(BEARISH, "Upper", "upperColor", "Color of the upper channel line."),
+      colorInput(NEUTRAL, "Middle", "middleColor", "Color of the channel midline."),
+      colorInput(BULLISH, "Lower", "lowerColor", "Color of the lower channel line."),
+      colorInput(transp(NEUTRAL, 92), "Fill", "fillColor", "Color of the channel interior fill.")
+    ],
     compute: (bars, inputs) => {
       const len = num3(inputs, "length", 20);
       const upper = highest(highs(bars), len);
       const lower = lowest(lows(bars), len);
-      const ink = str3(inputs, "color", SERIES_LINE);
       return {
         plots: [
-          { key: "basis", title: "Basis", values: zip(upper, lower, (u, l) => (u + l) / 2), color: WARNING },
-          { key: "upper", title: "Upper", values: upper, color: ink },
-          { key: "lower", title: "Lower", values: lower, color: ink }
+          { key: "upper", title: "Upper", values: upper, color: str3(inputs, "upperColor", BEARISH) },
+          { key: "middle", title: "Middle", kind: "circles", values: zip(upper, lower, (u, l) => (u + l) / 2), color: str3(inputs, "middleColor", NEUTRAL) },
+          { key: "lower", title: "Lower", values: lower, color: str3(inputs, "lowerColor", BULLISH) }
         ],
-        bands: [{ key: "dc", from: "upper", to: "lower", color: withAlpha2(ink) }]
+        bands: [{ key: "dc", from: "upper", to: "lower", color: str3(inputs, "fillColor", transp(NEUTRAL, 92)) }]
       };
     }
   };
@@ -41448,16 +42034,37 @@ ${overlayScrollbarCss(".vela-sd-pane")}
     title: "Chandelier Exit",
     shortTitle: "CE",
     overlay: true,
-    inputs: [lengthInput(22), { key: "mult", title: "ATR multiplier", type: "float", defval: 3, min: 0.1, max: 50, step: 0.1 }],
+    inputs: [
+      lengthInput(22, "length", "Length", 5e3, "Lookback used for both the highest high / lowest low extremes and the ATR."),
+      floatInput("mult", "ATR Multiplier", 3, 0, 50, 0.1, "Multiple of ATR subtracted from the highest high (long stop) and added to the lowest low (short stop)."),
+      boolInput("ratchet", "Ratchet Stops", false, void 0, "Prevents the long stop from falling and the short stop from rising, resetting once close crosses through the stop."),
+      colorInput(BULLISH, "Long Stop", "longColor", "Color of the long trailing stop line."),
+      colorInput(BEARISH, "Short Stop", "shortColor", "Color of the short trailing stop line.")
+    ],
     compute: (bars, inputs) => {
       const len = num3(inputs, "length", 22);
       const range = map(atr(bars, len), (x) => x * num3(inputs, "mult", 3));
-      const long = zip(highest(highs(bars), len), range, (h, r) => h - r);
-      const short = zip(lowest(lows(bars), len), range, (l, r) => l + r);
+      const basicLong = zip(highest(highs(bars), len), range, (h, r) => h - r);
+      const basicShort = zip(lowest(lows(bars), len), range, (l, r) => l + r);
+      let long = basicLong;
+      let short = basicShort;
+      if (bool(inputs, "ratchet", false)) {
+        long = new Array(bars.length).fill(Number.NaN);
+        short = new Array(bars.length).fill(Number.NaN);
+        for (let i = 0; i < bars.length; i++) {
+          const bl = basicLong[i];
+          const bs = basicShort[i];
+          const prevClose = i > 0 ? bars[i - 1].close : bars[i].close;
+          const prevLong = i > 0 && Number.isFinite(long[i - 1]) ? long[i - 1] : bl;
+          const prevShort = i > 0 && Number.isFinite(short[i - 1]) ? short[i - 1] : bs;
+          long[i] = Number.isFinite(bl) ? prevClose > prevLong ? Math.max(bl, prevLong) : bl : Number.NaN;
+          short[i] = Number.isFinite(bs) ? prevClose < prevShort ? Math.min(bs, prevShort) : bs : Number.NaN;
+        }
+      }
       return {
         plots: [
-          { key: "long", title: "Long stop", values: long, color: BULLISH },
-          { key: "short", title: "Short stop", values: short, color: BEARISH }
+          { key: "long", title: "Long Stop", values: long, color: str3(inputs, "longColor", BULLISH) },
+          { key: "short", title: "Short Stop", values: short, color: str3(inputs, "shortColor", BEARISH) }
         ]
       };
     }
@@ -41468,21 +42075,22 @@ ${overlayScrollbarCss(".vela-sd-pane")}
     shortTitle: "CKS",
     overlay: true,
     inputs: [
-      { key: "p", title: "ATR length", type: "int", defval: 10, min: 1, max: 500, step: 1 },
-      { key: "x", title: "ATR multiplier", type: "float", defval: 1, min: 0.1, max: 50, step: 0.1 },
-      { key: "q", title: "Stop length", type: "int", defval: 9, min: 1, max: 500, step: 1 }
+      intInput("p", "ATR Length (P)", 10, 1, 5e3, "Lookback used for both the ATR and the highest high / lowest low price extremes."),
+      floatInput("x", "ATR Multiplier (X)", 1, 0, 50, 0.1, "Multiplier applied to the ATR to offset the preliminary stops from the price extremes."),
+      intInput("q", "Stop Length (Q)", 9, 1, 5e3, "Lookback over which the preliminary stops are extended into the final stop levels."),
+      colorInput(BEARISH, "Stop Short", "shortColor", "Color of the protective stop line for short positions."),
+      colorInput(BULLISH, "Stop Long", "longColor", "Color of the protective stop line for long positions.")
     ],
     compute: (bars, inputs) => {
       const p = num3(inputs, "p", 10);
-      const x = num3(inputs, "x", 1);
       const q = num3(inputs, "q", 9);
-      const range = map(atr(bars, p), (v) => v * x);
+      const range = map(atr(bars, p), (v) => v * num3(inputs, "x", 1));
       const firstHigh = zip(highest(highs(bars), p), range, (h, r) => h - r);
       const firstLow = zip(lowest(lows(bars), p), range, (l, r) => l + r);
       return {
         plots: [
-          { key: "stopShort", title: "Stop short", values: highest(firstHigh, q), color: BEARISH },
-          { key: "stopLong", title: "Stop long", values: lowest(firstLow, q), color: BULLISH }
+          { key: "stopShort", title: "Stop Short", values: highest(firstHigh, q), color: str3(inputs, "shortColor", BEARISH) },
+          { key: "stopLong", title: "Stop Long", values: lowest(firstLow, q), color: str3(inputs, "longColor", BULLISH) }
         ]
       };
     }
@@ -41493,36 +42101,42 @@ ${overlayScrollbarCss(".vela-sd-pane")}
     shortTitle: "SuperTrend",
     overlay: true,
     inputs: [
-      { key: "atrLength", title: "ATR length", type: "int", defval: 10, min: 1, max: 500, step: 1 },
-      { key: "mult", title: "Factor", type: "float", defval: 3, min: 0.1, max: 50, step: 0.1 }
+      intInput("atrLength", "ATR Length", 10, 1, 5e3, "Number of bars used to compute the Wilder ATR."),
+      floatInput("mult", "Factor", 3, 0, 50, 0.1, "ATR multiplier setting how far the trailing stop sits from the bar midpoint."),
+      colorInput(BULLISH, "Uptrend Color", "upColor", "Line color while the trend is up."),
+      colorInput(BEARISH, "Downtrend Color", "downColor", "Line color while the trend is down.")
     ],
     compute: (bars, inputs) => {
-      const len = num3(inputs, "atrLength", 10);
       const mult = num3(inputs, "mult", 3);
-      const range = atr(bars, len);
+      const range = atr(bars, num3(inputs, "atrLength", 10));
       const n = bars.length;
-      const st = new Array(n).fill(Number.NaN);
-      const dir = new Array(n).fill(1);
-      let up = Number.NaN;
-      let dn = Number.NaN;
-      let trend = 1;
+      const up = new Array(n).fill(Number.NaN);
+      const down = new Array(n).fill(Number.NaN);
+      let finalUpper = Number.NaN;
+      let finalLower = Number.NaN;
+      let trend = -1;
       for (let i = 0; i < n; i++) {
         const r = range[i];
         if (!Number.isFinite(r)) continue;
         const b = bars[i];
         const mid = (b.high + b.low) / 2;
-        const basicUp = mid - mult * r;
-        const basicDn = mid + mult * r;
+        const basicUpper = mid + mult * r;
+        const basicLower = mid - mult * r;
+        const prevUpper = Number.isFinite(finalUpper) ? finalUpper : basicUpper;
+        const prevLower = Number.isFinite(finalLower) ? finalLower : basicLower;
         const prevClose = i > 0 ? bars[i - 1].close : b.close;
-        up = Number.isFinite(up) && prevClose > up ? Math.max(basicUp, up) : basicUp;
-        dn = Number.isFinite(dn) && prevClose < dn ? Math.min(basicDn, dn) : basicDn;
-        if (trend === 1 && b.close < up) trend = -1;
-        else if (trend === -1 && b.close > dn) trend = 1;
-        dir[i] = trend;
-        st[i] = trend === 1 ? up : dn;
+        finalUpper = prevClose <= prevUpper ? Math.min(basicUpper, prevUpper) : basicUpper;
+        finalLower = prevClose >= prevLower ? Math.max(basicLower, prevLower) : basicLower;
+        trend = b.close > finalUpper ? 1 : b.close < finalLower ? -1 : trend;
+        if (trend === 1) up[i] = finalLower;
+        else down[i] = finalUpper;
       }
-      const colors = dir.map((d, i) => Number.isFinite(st[i]) ? d === 1 ? BULLISH : BEARISH : null);
-      return { plots: [{ key: "st", title: "SuperTrend", values: st, color: BULLISH, width: 2, colors }] };
+      return {
+        plots: [
+          { key: "up", title: "Uptrend", values: up, color: str3(inputs, "upColor", BULLISH) },
+          { key: "down", title: "Downtrend", values: down, color: str3(inputs, "downColor", BEARISH) }
+        ]
+      };
     }
   };
   var alligator = {
@@ -41531,12 +42145,15 @@ ${overlayScrollbarCss(".vela-sd-pane")}
     shortTitle: "Alligator",
     overlay: true,
     inputs: [
-      { key: "jawLength", title: "Jaw length", type: "int", defval: 13, min: 1, max: 500, step: 1 },
-      { key: "teethLength", title: "Teeth length", type: "int", defval: 8, min: 1, max: 500, step: 1 },
-      { key: "lipsLength", title: "Lips length", type: "int", defval: 5, min: 1, max: 500, step: 1 },
-      { key: "jawOffset", title: "Jaw offset", type: "int", defval: 8, min: 0, max: 100, step: 1 },
-      { key: "teethOffset", title: "Teeth offset", type: "int", defval: 5, min: 0, max: 100, step: 1 },
-      { key: "lipsOffset", title: "Lips offset", type: "int", defval: 3, min: 0, max: 100, step: 1 }
+      intInput("jawLength", "Jaw Length", 13, 1, 5e3, "Smoothing length of the Jaw SMMA of median price (hl2), 13 in the classic setup."),
+      intInput("teethLength", "Teeth Length", 8, 1, 5e3, "Smoothing length of the Teeth SMMA of median price (hl2), 8 in the classic setup."),
+      intInput("lipsLength", "Lips Length", 5, 1, 5e3, "Smoothing length of the Lips SMMA of median price (hl2), 5 in the classic setup."),
+      intInput("jawOffset", "Jaw Offset", 8, 0, 100, "Number of bars the Jaw plot is shifted into the future, 8 in the classic setup."),
+      intInput("teethOffset", "Teeth Offset", 5, 0, 100, "Number of bars the Teeth plot is shifted into the future, 5 in the classic setup."),
+      intInput("lipsOffset", "Lips Offset", 3, 0, 100, "Number of bars the Lips plot is shifted into the future, 3 in the classic setup."),
+      colorInput(JAW_COLOR, "Jaw", "jawColor", "Color of the Jaw line."),
+      colorInput(TEETH_COLOR, "Teeth", "teethColor", "Color of the Teeth line."),
+      colorInput(LIPS_COLOR, "Lips", "lipsColor", "Color of the Lips line.")
     ],
     compute: (bars, inputs) => {
       const hl2 = sourceValues(bars, "HL2");
@@ -41545,99 +42162,134 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       const lips = shift3(rma(hl2, num3(inputs, "lipsLength", 5)), num3(inputs, "lipsOffset", 3));
       return {
         plots: [
-          { key: "jaw", title: "Jaw", values: jaw, color: SERIES_LINE },
-          { key: "teeth", title: "Teeth", values: teeth, color: BEARISH },
-          { key: "lips", title: "Lips", values: lips, color: BULLISH }
+          { key: "jaw", title: "Jaw", values: jaw, color: str3(inputs, "jawColor", JAW_COLOR) },
+          { key: "teeth", title: "Teeth", values: teeth, color: str3(inputs, "teethColor", TEETH_COLOR) },
+          { key: "lips", title: "Lips", values: lips, color: str3(inputs, "lipsColor", LIPS_COLOR) }
         ]
       };
     }
   };
+  var GATOR_LINES = "Alligator Lines";
+  var SMMA_TYPE = "SMMA (Wilder)";
   var gator = {
     type: "gator-oscillator",
     title: "Gator Oscillator",
     shortTitle: "Gator Oscillator",
     overlay: false,
-    inputs: [],
-    compute: (bars) => {
-      const hl2 = sourceValues(bars, "HL2");
-      const jaw = shift3(rma(hl2, 13), 8);
-      const teeth = shift3(rma(hl2, 8), 5);
-      const lips = shift3(rma(hl2, 5), 3);
+    inputs: [
+      { ...sourceInput("HL2", "source", "Source", "Price series fed to the three Alligator averages. Bill Williams' original recipe uses the median price (high + low) / 2."), group: GATOR_LINES },
+      { ...optionInput("maType", "Smoothing", SMMA_TYPE, [SMMA_TYPE, "SMA", "EMA"], "Moving average applied to the source for the jaw, teeth and lips. The original uses the smoothed (Wilder-style) moving average."), group: GATOR_LINES },
+      { ...intInput("jawLength", "Jaw Length", 13, 1, 500, "Averaging length of the jaw line."), group: GATOR_LINES },
+      { ...intInput("jawOffset", "Jaw Offset", 8, 0, 100, "Bars the jaw is displaced forward, 8 in the original recipe. The upper histogram measures the absolute spread between the displaced jaw and teeth."), group: GATOR_LINES },
+      { ...intInput("teethLength", "Teeth Length", 8, 1, 500, "Averaging length of the teeth line."), group: GATOR_LINES },
+      { ...intInput("teethOffset", "Teeth Offset", 5, 0, 100, "Bars the teeth are displaced forward, 5 in the original recipe. The teeth line enters both spreads."), group: GATOR_LINES },
+      { ...intInput("lipsLength", "Lips Length", 5, 1, 500, "Averaging length of the lips line."), group: GATOR_LINES },
+      { ...intInput("lipsOffset", "Lips Offset", 3, 0, 100, "Bars the lips are displaced forward, 3 in the original recipe. The lower histogram measures the negative absolute spread between the displaced teeth and lips."), group: GATOR_LINES },
+      colorInput(BULLISH, "Expanding", "growColor", "Column color while a spread grew against its own previous bar \u2014 the averages are spreading apart."),
+      colorInput(BEARISH, "Contracting", "shrinkColor", "Column color while a spread shrank \u2014 the averages are converging. Color encodes expansion, not trade direction."),
+      colorInput(NEUTRAL, "Zero Line", "zeroColor", "Color of the zero line separating the two histograms.")
+    ],
+    compute: (bars, inputs) => {
+      const src = sourceValues(bars, str3(inputs, "source", "HL2"));
+      const kind = str3(inputs, "maType", SMMA_TYPE);
+      const smooth = (len) => kind === "SMA" ? sma(src, len) : kind === "EMA" ? ema(src, len) : rma(src, len);
+      const jaw = shift3(smooth(num3(inputs, "jawLength", 13)), num3(inputs, "jawOffset", 8));
+      const teeth = shift3(smooth(num3(inputs, "teethLength", 8)), num3(inputs, "teethOffset", 5));
+      const lips = shift3(smooth(num3(inputs, "lipsLength", 5)), num3(inputs, "lipsOffset", 3));
       const upper = map(sub(jaw, teeth), Math.abs);
-      const lower = map(sub(teeth, lips), (x) => -Math.abs(x));
-      const colorByExpansion = (v) => v.map((x, i) => {
-        if (!Number.isFinite(x)) return null;
-        const prev3 = i > 0 ? v[i - 1] : Number.NaN;
-        return Number.isFinite(prev3) && Math.abs(x) > Math.abs(prev3) ? BULLISH : BEARISH;
-      });
+      const lower = map(sub(teeth, lips), Math.abs);
+      const grow = str3(inputs, "growColor", BULLISH);
+      const shrink = str3(inputs, "shrinkColor", BEARISH);
+      const expansionColors2 = (v) => {
+        let growing = false;
+        return v.map((x, i) => {
+          if (!Number.isFinite(x)) return null;
+          const prev3 = i > 0 ? v[i - 1] : Number.NaN;
+          if (Number.isFinite(prev3)) growing = x > prev3 ? true : x < prev3 ? false : growing;
+          return growing ? grow : shrink;
+        });
+      };
       return {
         plots: [
-          { key: "upper", title: "Upper", values: upper, kind: "histogram", color: BULLISH, colors: colorByExpansion(upper), base: 0 },
-          { key: "lower", title: "Lower", values: lower, kind: "histogram", color: BEARISH, colors: colorByExpansion(lower), base: 0 }
-        ]
+          { key: "upper", title: "Upper Histogram (Jaw - Teeth)", values: upper, kind: "columns", color: grow, colors: expansionColors2(upper), base: 0 },
+          { key: "lower", title: "Lower Histogram (Teeth - Lips)", values: map(lower, (x) => -x), kind: "columns", color: shrink, colors: expansionColors2(lower), base: 0 }
+        ],
+        levels: [{ key: "zero", price: 0, color: str3(inputs, "zeroColor", NEUTRAL), lineStyle: "solid", title: "Zero Line" }]
       };
     }
   };
   var bandSpecs = [bollingerBands, percentB, bandwidth, keltner, donchian, chandelier, chandeKroll, supertrend, alligator, gator];
 
   // src/core/native-indicators/classics/oscillators.ts
-  function guideLevels(low, high, mid) {
-    const levels = [
-      { key: "upper", price: high, color: NEUTRAL },
-      { key: "lower", price: low, color: NEUTRAL }
+  function thresholdInputs(obDefault, osDefault, min2 = 0, max2 = 100, obTitle = "Overbought Level", osTitle = "Oversold Level") {
+    return [
+      floatInput("overbought", obTitle, obDefault, min2, max2, 1, "Level above which the oscillator is considered overbought."),
+      floatInput("oversold", osTitle, osDefault, min2, max2, 1, "Level below which the oscillator is considered oversold.")
     ];
-    if (mid != null) levels.splice(1, 0, { key: "middle", price: mid, color: NEUTRAL, lineStyle: "dotted" });
-    return levels;
-  }
-  var ZERO_LEVEL = [{ key: "zero", price: 0, color: NEUTRAL }];
-  function histColors(values) {
-    return values.map((x, i) => {
-      if (!Number.isFinite(x)) return null;
-      const prev3 = i > 0 ? values[i - 1] : Number.NaN;
-      const rising = Number.isFinite(prev3) ? x >= prev3 : true;
-      if (x >= 0) return rising ? BULLISH : `${BULLISH}80`;
-      return rising ? `${BEARISH}80` : BEARISH;
-    });
   }
   var rsiSpec = {
     type: "rsi",
     title: "Relative Strength Index",
     shortTitle: "RSI",
     overlay: false,
-    inputs: [lengthInput(14), sourceInput(), colorInput()],
-    compute: (bars, inputs) => ({
-      plots: [
-        {
-          key: "rsi",
-          title: "RSI",
-          values: rsi(sourceValues(bars, str3(inputs, "source", "Close")), num3(inputs, "length", 14)),
-          color: str3(inputs, "color", SERIES_LINE),
-          width: 2
-        }
-      ],
-      levels: guideLevels(30, 70, 50)
+    inputs: [
+      lengthInput(14, "length", "Length", 5e3, "Number of bars used in the Wilder smoothing of average gains and losses."),
+      sourceInput("Close", "source", "Source", "Price series the RSI is calculated on."),
+      ...thresholdInputs(70, 30, 0, 100, "Overbought", "Oversold"),
+      colorInput(NEUTRAL, "RSI", "color", "Color of the RSI line at the midline. Toward either threshold it blends into that threshold\u2019s color."),
+      colorInput(BULLISH, "Oversold", "oversoldColor", "Color of the line and zone shading at and below the oversold level."),
+      colorInput(BEARISH, "Overbought", "overboughtColor", "Color of the line and zone shading at and above the overbought level."),
+      colorInput(NEUTRAL, "Levels", "levelsColor", "Color of the overbought, midline and oversold levels."),
+      colorInput(transp(NEUTRAL, 90), "Band Fill", "fillColor", "Color of the fill between the overbought and oversold levels.")
+    ],
+    compute: (bars, inputs) => boundedOscillator({
+      key: "rsi",
+      title: "RSI",
+      values: rsi(sourceValues(bars, str3(inputs, "source", "Close")), num3(inputs, "length", 14)),
+      scale: { top: 100, bottom: 0 },
+      overbought: num3(inputs, "overbought", 70),
+      oversold: num3(inputs, "oversold", 30),
+      ink: { low: str3(inputs, "oversoldColor", BULLISH), mid: str3(inputs, "color", NEUTRAL), high: str3(inputs, "overboughtColor", BEARISH) },
+      levelInk: str3(inputs, "levelsColor", NEUTRAL),
+      width: 2,
+      midline: 50,
+      bandFill: str3(inputs, "fillColor", transp(NEUTRAL, 90))
     })
   };
+  function stochasticOutput(k, d, inputs) {
+    const overbought = num3(inputs, "overbought", 80);
+    const oversold = num3(inputs, "oversold", 20);
+    return {
+      plots: [
+        { key: "k", title: "%K", values: k, color: str3(inputs, "kColor", INFO) },
+        { key: "d", title: "%D", values: d, color: str3(inputs, "dColor", WARNING) },
+        anchorPlot("obAnchor", "Overbought Anchor", k.length, overbought),
+        anchorPlot("osAnchor", "Oversold Anchor", k.length, oversold)
+      ],
+      bands: [{ key: "band", from: "obAnchor", to: "osAnchor", color: str3(inputs, "fillColor", transp(INFO, 90)) }],
+      levels: [
+        { key: "overbought", price: overbought, color: NEUTRAL, lineStyle: "dashed", title: "Overbought" },
+        { key: "oversold", price: oversold, color: NEUTRAL, lineStyle: "dashed", title: "Oversold" }
+      ]
+    };
+  }
   var stochastic = {
     type: "stochastic",
     title: "Stochastic",
     shortTitle: "Stoch",
     overlay: false,
     inputs: [
-      lengthInput(14, "kLength", "%K length"),
-      lengthInput(1, "kSmoothing", "%K smoothing", 500),
-      lengthInput(3, "dLength", "%D smoothing", 500)
+      lengthInput(14, "kLength", "%K Length", 5e3, "Number of bars used for the highest high / lowest low range of the raw %K."),
+      lengthInput(3, "kSmoothing", "%K Smoothing", 500, "Simple moving average length applied to the raw %K. 1 gives the fast stochastic, 3 the classic slow stochastic."),
+      lengthInput(3, "dLength", "%D Smoothing", 500, "Simple moving average length of the %D signal line, applied to the smoothed %K."),
+      ...thresholdInputs(80, 20),
+      colorInput(INFO, "%K", "kColor", "Color of the %K line."),
+      colorInput(WARNING, "%D", "dColor", "Color of the %D signal line."),
+      colorInput(transp(INFO, 90), "Band Fill", "fillColor", "Fill color of the area between the overbought and oversold levels.")
     ],
     compute: (bars, inputs) => {
-      const k = sma(stoch(closes(bars), highs(bars), lows(bars), num3(inputs, "kLength", 14)), num3(inputs, "kSmoothing", 1));
-      const d = sma(k, num3(inputs, "dLength", 3));
-      return {
-        plots: [
-          { key: "k", title: "%K", values: k, color: SERIES_LINE, width: 2 },
-          { key: "d", title: "%D", values: d, color: WARNING }
-        ],
-        levels: guideLevels(20, 80)
-      };
+      const k = sma(stoch(closes(bars), highs(bars), lows(bars), num3(inputs, "kLength", 14)), num3(inputs, "kSmoothing", 3));
+      return stochasticOutput(k, sma(k, num3(inputs, "dLength", 3)), inputs);
     }
   };
   var stochasticRsi = {
@@ -41646,23 +42298,20 @@ ${overlayScrollbarCss(".vela-sd-pane")}
     shortTitle: "Stoch RSI",
     overlay: false,
     inputs: [
-      lengthInput(14, "rsiLength", "RSI length"),
-      lengthInput(14, "stochLength", "Stochastic length"),
-      lengthInput(3, "kSmoothing", "%K smoothing", 500),
-      lengthInput(3, "dLength", "%D smoothing", 500),
-      sourceInput()
+      sourceInput("Close", "source", "RSI Source", "Price series the RSI is computed on."),
+      lengthInput(14, "rsiLength", "RSI Length", 5e3, "Lookback length of the Wilder RSI."),
+      lengthInput(14, "stochLength", "Stochastic Length", 5e3, "Lookback over which the highest and lowest RSI values are taken."),
+      lengthInput(3, "kSmoothing", "%K Smoothing", 500, "Simple moving average length applied to the stochastic of RSI to form %K."),
+      lengthInput(3, "dLength", "%D Smoothing", 500, "Simple moving average length applied to %K to form the %D signal line."),
+      ...thresholdInputs(80, 20),
+      colorInput(INFO, "%K Color", "kColor", "Color of the %K line."),
+      colorInput(WARNING, "%D Color", "dColor", "Color of the %D signal line."),
+      colorInput(transp(INFO, 90), "Zone Fill", "fillColor", "Fill color of the area between the overbought and oversold levels.")
     ],
     compute: (bars, inputs) => {
       const r = rsi(sourceValues(bars, str3(inputs, "source", "Close")), num3(inputs, "rsiLength", 14));
       const k = sma(stoch(r, r, r, num3(inputs, "stochLength", 14)), num3(inputs, "kSmoothing", 3));
-      const d = sma(k, num3(inputs, "dLength", 3));
-      return {
-        plots: [
-          { key: "k", title: "%K", values: k, color: SERIES_LINE, width: 2 },
-          { key: "d", title: "%D", values: d, color: WARNING }
-        ],
-        levels: guideLevels(20, 80)
-      };
+      return stochasticOutput(k, sma(k, num3(inputs, "dLength", 3)), inputs);
     }
   };
   var macd = {
@@ -41670,23 +42319,35 @@ ${overlayScrollbarCss(".vela-sd-pane")}
     title: "MACD",
     overlay: false,
     inputs: [
-      lengthInput(12, "fastLength", "Fast length"),
-      lengthInput(26, "slowLength", "Slow length"),
-      lengthInput(9, "signalLength", "Signal smoothing", 500),
-      sourceInput()
+      lengthInput(12, "fastLength", "Fast Length", 5e3, "Length of the fast EMA."),
+      lengthInput(26, "slowLength", "Slow Length", 5e3, "Length of the slow EMA."),
+      lengthInput(9, "signalLength", "Signal Smoothing", 500, "Length of the EMA applied to the MACD line to obtain the signal line."),
+      sourceInput("Close", "source", "Source", "Price series used to compute the fast and slow EMAs."),
+      colorInput(INFO, "MACD Line", "color", "Color of the MACD line."),
+      colorInput(WARNING, "Signal Line", "signalColor", "Color of the signal line."),
+      colorInput(BULLISH, "Grow Above", "growAboveColor", "Histogram color when above zero and rising."),
+      colorInput(transp(BULLISH, 50), "Fall Above", "fallAboveColor", "Histogram color when above zero and falling."),
+      colorInput(transp(BEARISH, 50), "Grow Below", "growBelowColor", "Histogram color when below zero and rising."),
+      colorInput(BEARISH, "Fall Below", "fallBelowColor", "Histogram color when below zero and falling.")
     ],
     compute: (bars, inputs) => {
       const src = sourceValues(bars, str3(inputs, "source", "Close"));
       const line = sub(ema(src, num3(inputs, "fastLength", 12)), ema(src, num3(inputs, "slowLength", 26)));
       const signal = ema(line, num3(inputs, "signalLength", 9));
       const hist = sub(line, signal);
+      const colors = momentumColumnColors(hist, {
+        growAbove: str3(inputs, "growAboveColor", BULLISH),
+        fallAbove: str3(inputs, "fallAboveColor", transp(BULLISH, 50)),
+        growBelow: str3(inputs, "growBelowColor", transp(BEARISH, 50)),
+        fallBelow: str3(inputs, "fallBelowColor", BEARISH)
+      });
       return {
         plots: [
-          { key: "hist", title: "Histogram", values: hist, kind: "histogram", color: BULLISH, colors: histColors(hist), base: 0 },
-          { key: "macd", title: "MACD", values: line, color: SERIES_LINE, width: 2 },
-          { key: "signal", title: "Signal", values: signal, color: WARNING }
+          { key: "hist", title: "Histogram", values: hist, kind: "columns", color: BULLISH, colors, base: 0 },
+          { key: "macd", title: "MACD", values: line, color: str3(inputs, "color", INFO) },
+          { key: "signal", title: "Signal", values: signal, color: str3(inputs, "signalColor", WARNING) }
         ],
-        levels: ZERO_LEVEL
+        levels: [{ key: "zero", price: 0, color: NEUTRAL, lineStyle: "dashed", title: "Zero Line" }]
       };
     }
   };
@@ -41696,26 +42357,49 @@ ${overlayScrollbarCss(".vela-sd-pane")}
     shortTitle: "PPO",
     overlay: false,
     inputs: [
-      lengthInput(12, "fastLength", "Fast length"),
-      lengthInput(26, "slowLength", "Slow length"),
-      lengthInput(9, "signalLength", "Signal smoothing", 500),
-      sourceInput()
+      sourceInput("Close", "source", "Source", "Price series fed into the fast and slow averages."),
+      lengthInput(12, "fastLength", "Fast Length", 5e3, "Length of the fast moving average."),
+      lengthInput(26, "slowLength", "Slow Length", 5e3, "Length of the slow moving average. The spread is divided by it and scaled to a percentage of price."),
+      optionInput("maType", "Average Type", "EMA", ["EMA", "SMA"], "Moving average type used for the fast and slow averages."),
+      lengthInput(9, "signalLength", "Signal Smoothing", 500, "Length of the signal line that smooths the PPO line."),
+      optionInput("signalType", "Signal Type", "EMA", ["EMA", "SMA"], "Moving average type used for the signal line."),
+      colorInput(BULLISH, "Bullish", "bullColor", "Color of the PPO line, gradient fill and histogram above the zero line."),
+      colorInput(BEARISH, "Bearish", "bearColor", "Color of the PPO line, gradient fill and histogram below the zero line."),
+      colorInput(WARNING, "Signal Line", "signalColor", "Color of the signal line."),
+      boolInput("showHistogram", "Show Histogram", true, STYLE, "Displays the histogram (PPO minus signal line) as columns. Bright columns mark a spread still widening, faded ones a spread narrowing back."),
+      boolInput("gradientFill", "Gradient Fill", true, STYLE, "Fills the area between the zero line and the PPO line with a vertical gradient.")
     ],
     compute: (bars, inputs) => {
       const src = sourceValues(bars, str3(inputs, "source", "Close"));
-      const fast = ema(src, num3(inputs, "fastLength", 12));
-      const slow = ema(src, num3(inputs, "slowLength", 26));
+      const average = (kind2, v, len) => kind2 === "SMA" ? sma(v, len) : ema(v, len);
+      const kind = str3(inputs, "maType", "EMA");
+      const fast = average(kind, src, num3(inputs, "fastLength", 12));
+      const slow = average(kind, src, num3(inputs, "slowLength", 26));
       const line = zip(fast, slow, (f, s) => s === 0 ? Number.NaN : (f - s) / s * 100);
-      const signal = ema(line, num3(inputs, "signalLength", 9));
+      const signal = average(str3(inputs, "signalType", "EMA"), line, num3(inputs, "signalLength", 9));
       const hist = sub(line, signal);
-      return {
-        plots: [
-          { key: "hist", title: "Histogram", values: hist, kind: "histogram", color: BULLISH, colors: histColors(hist), base: 0 },
-          { key: "ppo", title: "PPO", values: line, color: SERIES_LINE, width: 2 },
-          { key: "signal", title: "Signal", values: signal, color: WARNING }
-        ],
-        levels: ZERO_LEVEL
-      };
+      const bull = str3(inputs, "bullColor", BULLISH);
+      const bear = str3(inputs, "bearColor", BEARISH);
+      const out = centeredOscillator({
+        key: "ppo",
+        title: "PPO Line",
+        values: line,
+        ink: { bull, bear, neutral: bear },
+        zeroInk: transp(NEUTRAL, 90),
+        fill: bool(inputs, "gradientFill", true),
+        extraPlots: [{ key: "signal", title: "Signal Line", values: signal, color: str3(inputs, "signalColor", WARNING) }]
+      });
+      if (bool(inputs, "showHistogram", true)) {
+        const colors = hist.map((x, i) => {
+          if (!Number.isFinite(x)) return null;
+          const prev3 = i > 0 && Number.isFinite(hist[i - 1]) ? hist[i - 1] : x;
+          const ink = x >= 0 ? bull : bear;
+          const expanding = x >= 0 ? x > prev3 : x < prev3;
+          return transp(ink, expanding ? 40 : 70);
+        });
+        out.plots.unshift({ key: "hist", title: "Histogram", values: hist, kind: "columns", color: bull, colors, base: 0 });
+      }
+      return out;
     }
   };
   var awesome = {
@@ -41723,48 +42407,67 @@ ${overlayScrollbarCss(".vela-sd-pane")}
     title: "Awesome Oscillator",
     shortTitle: "AO",
     overlay: false,
-    inputs: [],
-    compute: (bars) => {
+    inputs: [
+      colorInput(BULLISH, "Rising", "risingColor", "Histogram color when the oscillator is higher than on the previous bar."),
+      colorInput(BEARISH, "Falling", "fallingColor", "Histogram color when the oscillator is lower than or equal to the previous bar."),
+      colorInput(NEUTRAL, "Zero Line", "zeroColor", "Color of the zero reference line.")
+    ],
+    compute: (bars, inputs) => {
       const hl2 = sourceValues(bars, "HL2");
       const ao = sub(sma(hl2, 5), sma(hl2, 34));
+      const rising = str3(inputs, "risingColor", BULLISH);
+      const falling = str3(inputs, "fallingColor", BEARISH);
       const colors = ao.map((x, i) => {
         if (!Number.isFinite(x)) return null;
         const prev3 = i > 0 ? ao[i - 1] : Number.NaN;
-        return Number.isFinite(prev3) && x < prev3 ? BEARISH : BULLISH;
+        return Number.isFinite(prev3) && x > prev3 ? rising : falling;
       });
       return {
-        plots: [{ key: "ao", title: "AO", values: ao, kind: "histogram", color: BULLISH, colors, base: 0 }],
-        levels: ZERO_LEVEL
+        plots: [{ key: "ao", title: "AO", values: ao, kind: "columns", color: rising, colors, base: 0 }],
+        levels: [{ key: "zero", price: 0, color: str3(inputs, "zeroColor", NEUTRAL), lineStyle: "dashed", title: "Zero Line" }]
       };
     }
   };
+  var CCI_SCALING = 0.015;
   var cci = {
     type: "commodity-channel-index",
     title: "Commodity Channel Index",
     shortTitle: "CCI",
     overlay: false,
-    inputs: [lengthInput(20), sourceInput("HLC3"), colorInput()],
+    inputs: [
+      lengthInput(20, "length", "Length", 5e3, "Number of bars used for the moving average and the mean absolute deviation of the source."),
+      sourceInput("HLC3", "source", "Source", "Price series measured by the CCI; the typical price hlc3 is the classic choice."),
+      floatInput("upper", "Upper Level", 100, -1e3, 1e3, 10, "Overbought reference level, +100 classically."),
+      floatInput("lower", "Lower Level", -100, -1e3, 1e3, 10, "Oversold reference level, \u2212100 classically."),
+      colorInput(NEUTRAL, "CCI Line", "color", "Color of the CCI line."),
+      colorInput(BULLISH, "Bullish", "bullColor", "Line and fill color while the CCI reads above zero."),
+      colorInput(BEARISH, "Bearish", "bearColor", "Line and fill color while the CCI reads below zero."),
+      colorInput(NEUTRAL, "Levels", "levelsColor", "Color of the upper, lower and zero reference lines.")
+    ],
     compute: (bars, inputs) => {
       const len = num3(inputs, "length", 20);
       const src = sourceValues(bars, str3(inputs, "source", "HLC3"));
       const basis = sma(src, len);
-      const dev = new Array(src.length).fill(Number.NaN);
-      for (let i = len - 1; i < src.length; i++) {
-        const mean = basis[i];
-        if (!Number.isFinite(mean)) continue;
-        let d = 0;
-        for (let k = i - len + 1; k <= i; k++) d += Math.abs(src[k] - mean);
-        dev[i] = d / len;
-      }
+      const dev = meanDev(src, len);
       const values = src.map((x, i) => {
         const b = basis[i];
         const d = dev[i];
-        return Number.isFinite(b) && Number.isFinite(d) && d !== 0 ? (x - b) / (0.015 * d) : Number.NaN;
+        if (!Number.isFinite(b) || !Number.isFinite(d)) return Number.NaN;
+        return d === 0 ? 0 : (x - b) / (CCI_SCALING * d);
+      });
+      const levelInk = str3(inputs, "levelsColor", NEUTRAL);
+      return centeredOscillator({
+        key: "cci",
+        title: "CCI",
+        values,
+        ink: { bull: str3(inputs, "bullColor", BULLISH), bear: str3(inputs, "bearColor", BEARISH), neutral: str3(inputs, "color", NEUTRAL) },
+        zeroInk: levelInk,
+        zeroLineStyle: "dotted",
+        extraLevels: [
+          { key: "upper", price: num3(inputs, "upper", 100), color: levelInk, lineStyle: "dashed", title: "Upper Level" },
+          { key: "lower", price: num3(inputs, "lower", -100), color: levelInk, lineStyle: "dashed", title: "Lower Level" }
+        ]
       });
-      return {
-        plots: [{ key: "cci", title: "CCI", values, color: str3(inputs, "color", SERIES_LINE), width: 2 }],
-        levels: guideLevels(-100, 100, 0)
-      };
     }
   };
   var williamsR = {
@@ -41772,31 +42475,78 @@ ${overlayScrollbarCss(".vela-sd-pane")}
     title: "Williams %R",
     shortTitle: "%R",
     overlay: false,
-    inputs: [lengthInput(14), colorInput()],
+    inputs: [
+      lengthInput(14, "length", "Length", 5e3, "Lookback length of the highest high / lowest low range. 14 is the classic setting."),
+      sourceInput("Close", "source", "Source", "Series located within the lookback range. Close is the classic choice."),
+      ...thresholdInputs(-20, -80, -100, 0),
+      colorInput(NEUTRAL, "%R Line", "color", "Color of the %R line between the thresholds. Toward either level it blends into that level\u2019s color."),
+      colorInput(BEARISH, "Overbought", "overboughtColor", "Color of the line and zone shading at and above the overbought level."),
+      colorInput(BULLISH, "Oversold", "oversoldColor", "Color of the line and zone shading at and below the oversold level.")
+    ],
     compute: (bars, inputs) => {
-      const values = map(stoch(closes(bars), highs(bars), lows(bars), num3(inputs, "length", 14)), (x) => x - 100);
-      return {
-        plots: [{ key: "wr", title: "%R", values, color: str3(inputs, "color", SERIES_LINE), width: 2 }],
-        levels: guideLevels(-80, -20)
-      };
+      const len = num3(inputs, "length", 14);
+      const src = sourceValues(bars, str3(inputs, "source", "Close"));
+      const hh = highest(highs(bars), len);
+      const ll = lowest(lows(bars), len);
+      const values = src.map((x, i) => {
+        const h = hh[i];
+        const l = ll[i];
+        return Number.isFinite(h) && Number.isFinite(l) && h > l ? -100 * (h - x) / (h - l) : Number.NaN;
+      });
+      return boundedOscillator({
+        key: "wr",
+        title: "%R",
+        values,
+        scale: { top: 0, bottom: -100 },
+        overbought: num3(inputs, "overbought", -20),
+        oversold: num3(inputs, "oversold", -80),
+        ink: { low: str3(inputs, "oversoldColor", BULLISH), mid: str3(inputs, "color", NEUTRAL), high: str3(inputs, "overboughtColor", BEARISH) },
+        levelInk: NEUTRAL
+      });
     }
   };
-  var cmo = {
+  var cmoSpec = {
     type: "chande-momentum-oscillator",
     title: "Chande Momentum Oscillator",
     shortTitle: "CMO",
     overlay: false,
-    inputs: [lengthInput(9), sourceInput(), colorInput()],
+    inputs: [
+      lengthInput(9, "length", "Length", 5e3, "Number of bars over which up moves and down moves are summed."),
+      sourceInput("Close", "source", "Source", "Price series used to measure bar-to-bar changes."),
+      floatInput("overbought", "Overbought Level", 50, 0, 100, 1, "Level above which the oscillator is considered overbought."),
+      floatInput("oversold", "Oversold Level", -50, -100, 0, 1, "Level below which the oscillator is considered oversold."),
+      colorInput(NEUTRAL, "CMO Line", "color", "Color of the CMO line."),
+      colorInput(BULLISH, "Bullish", "bullColor", "Line and fill color while momentum is positive, and shading of the oversold zone."),
+      colorInput(BEARISH, "Bearish", "bearColor", "Line and fill color while momentum is negative, and shading of the overbought zone."),
+      colorInput(NEUTRAL, "Levels", "levelsColor", "Color of the overbought, oversold, and zero lines.")
+    ],
     compute: (bars, inputs) => {
       const len = num3(inputs, "length", 9);
       const d = change(sourceValues(bars, str3(inputs, "source", "Close")));
-      const su = sum(map(d, (x) => Math.max(x, 0)), len);
-      const sd = sum(map(d, (x) => Math.max(-x, 0)), len);
-      const values = zip(su, sd, (u, w) => u + w === 0 ? 0 : 100 * (u - w) / (u + w));
-      return {
-        plots: [{ key: "cmo", title: "CMO", values, color: str3(inputs, "color", SERIES_LINE), width: 2 }],
-        levels: guideLevels(-50, 50, 0)
-      };
+      const up = sum(map(d, (x) => Math.max(x, 0)), len);
+      const down = sum(map(d, (x) => Math.max(-x, 0)), len);
+      const values = zip(up, down, (u, w) => u + w === 0 ? 0 : 100 * (u - w) / (u + w));
+      const bull = str3(inputs, "bullColor", BULLISH);
+      const bear = str3(inputs, "bearColor", BEARISH);
+      const levelInk = str3(inputs, "levelsColor", NEUTRAL);
+      const overbought = num3(inputs, "overbought", 50);
+      const oversold = num3(inputs, "oversold", -50);
+      const out = centeredOscillator({
+        key: "cmo",
+        title: "CMO",
+        values,
+        ink: { bull, bear, neutral: str3(inputs, "color", NEUTRAL) },
+        zeroInk: levelInk,
+        zeroLineStyle: "dotted",
+        extraLevels: [
+          { key: "overbought", price: overbought, color: levelInk, lineStyle: "dashed", title: "Overbought" },
+          { key: "oversold", price: oversold, color: levelInk, lineStyle: "dashed", title: "Oversold" }
+        ]
+      });
+      const zones = thresholdZones(values.length, { overbought, oversold, top: 100, bottom: -100 }, { overbought: bear, oversold: bull });
+      out.plots.push(...zones.plots);
+      out.bands = [...out.bands ?? [], ...zones.bands];
+      return out;
     }
   };
   var connorsRsi = {
@@ -41805,10 +42555,14 @@ ${overlayScrollbarCss(".vela-sd-pane")}
     shortTitle: "CRSI",
     overlay: false,
     inputs: [
-      lengthInput(3, "rsiLength", "RSI length"),
-      lengthInput(2, "streakLength", "Streak RSI length"),
-      lengthInput(100, "rankLength", "Percent-rank length"),
-      colorInput()
+      lengthInput(3, "rsiLength", "RSI Length", 5e3, "Length of the Wilder RSI applied to the closing price."),
+      lengthInput(2, "streakLength", "Streak RSI Length", 5e3, "Length of the Wilder RSI applied to the up/down close streak."),
+      lengthInput(100, "rankLength", "Percent Rank Length", 5e3, "Lookback of the percent rank applied to the 1-bar rate of change of the closing price."),
+      ...thresholdInputs(90, 10),
+      colorInput(NEUTRAL, "CRSI Line", "color", "Color of the Connors RSI line."),
+      colorInput(BULLISH, "Oversold", "oversoldColor", "Line, fill and zone color toward and below the oversold level."),
+      colorInput(BEARISH, "Overbought", "overboughtColor", "Line, fill and zone color toward and above the overbought level."),
+      colorInput(NEUTRAL, "Levels", "levelsColor", "Color of the overbought and oversold levels.")
     ],
     compute: (bars, inputs) => {
       const c = closes(bars);
@@ -41826,10 +42580,17 @@ ${overlayScrollbarCss(".vela-sd-pane")}
         const z = r[i];
         return Number.isFinite(x) && Number.isFinite(y) && Number.isFinite(z) ? (x + y + z) / 3 : Number.NaN;
       });
-      return {
-        plots: [{ key: "crsi", title: "CRSI", values, color: str3(inputs, "color", SERIES_LINE), width: 2 }],
-        levels: guideLevels(20, 80, 50)
-      };
+      return boundedOscillator({
+        key: "crsi",
+        title: "Connors RSI",
+        values,
+        scale: { top: 100, bottom: 0 },
+        overbought: num3(inputs, "overbought", 90),
+        oversold: num3(inputs, "oversold", 10),
+        ink: { low: str3(inputs, "oversoldColor", BULLISH), mid: str3(inputs, "color", NEUTRAL), high: str3(inputs, "overboughtColor", BEARISH) },
+        levelInk: str3(inputs, "levelsColor", NEUTRAL),
+        midpointWash: true
+      });
     }
   };
   var fisher = {
@@ -41837,7 +42598,13 @@ ${overlayScrollbarCss(".vela-sd-pane")}
     title: "Fisher Transform",
     shortTitle: "Fisher",
     overlay: false,
-    inputs: [lengthInput(9)],
+    inputs: [
+      lengthInput(9, "length", "Length", 5e3, "Lookback period used to locate the median price hl2 within its highest-lowest range. Ehlers' original length is 10; 9 is the common platform default."),
+      colorInput(NEUTRAL, "Fisher Line", "color", "Color of the Fisher line when it sits exactly on its trigger."),
+      colorInput(NEUTRAL, "Trigger Line", "triggerColor", "Color of the trigger line, the Fisher value delayed one bar."),
+      colorInput(BULLISH, "Bullish", "bullColor", "Color of the Fisher line and fill while it is above the trigger."),
+      colorInput(BEARISH, "Bearish", "bearColor", "Color of the Fisher line and fill while it is below the trigger.")
+    ],
     compute: (bars, inputs) => {
       const len = num3(inputs, "length", 9);
       const hl2 = sourceValues(bars, "HL2");
@@ -41845,23 +42612,39 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       const lo = lowest(hl2, len);
       const n = bars.length;
       const out = new Array(n).fill(Number.NaN);
+      let position = 0;
       let value = 0;
-      let fish = 0;
       for (let i = 0; i < n; i++) {
         const h = hi[i];
         const l = lo[i];
         if (!Number.isFinite(h) || !Number.isFinite(l)) continue;
-        const norm = h === l ? 0 : (hl2[i] - l) / (h - l) - 0.5;
-        value = Math.max(-0.999, Math.min(0.999, 0.66 * norm + 0.67 * value));
-        fish = 0.5 * Math.log((1 + value) / (1 - value)) + 0.5 * fish;
-        out[i] = fish;
-      }
+        const raw = h > l ? (hl2[i] - l) / (h - l) - 0.5 : 0;
+        position = 0.66 * raw + 0.67 * position;
+        position = position > 0.99 ? 0.999 : position < -0.99 ? -0.999 : position;
+        value = 0.5 * Math.log((1 + position) / (1 - position)) + 0.5 * value;
+        out[i] = value;
+      }
+      const trigger = shift3(out, 1);
+      const neutral = str3(inputs, "color", NEUTRAL);
+      const bull = str3(inputs, "bullColor", BULLISH);
+      const bear = str3(inputs, "bearColor", BEARISH);
+      const inkOf = (i) => {
+        const f = out[i];
+        const t = trigger[i];
+        if (!Number.isFinite(t)) return neutral;
+        return f > t ? bull : f < t ? bear : neutral;
+      };
       return {
         plots: [
-          { key: "fisher", title: "Fisher", values: out, color: SERIES_LINE, width: 2 },
-          { key: "trigger", title: "Trigger", values: shift3(out, 1), color: WARNING }
+          { key: "fisher", title: "Fisher", values: out, color: neutral, width: 2, colors: out.map((x, i) => Number.isFinite(x) ? inkOf(i) : null) },
+          { key: "trigger", title: "Trigger", values: trigger, color: str3(inputs, "triggerColor", NEUTRAL) }
         ],
-        levels: ZERO_LEVEL
+        bands: [{ key: "spread", from: "fisher", to: "trigger", color: transp(neutral, 80), colors: out.map((x, i) => Number.isFinite(x) ? transp(inkOf(i), 80) : null) }],
+        levels: [
+          { key: "upper", price: 1.5, color: NEUTRAL, lineStyle: "dashed", title: "Upper Level" },
+          { key: "lower", price: -1.5, color: NEUTRAL, lineStyle: "dashed", title: "Lower Level" },
+          { key: "zero", price: 0, color: NEUTRAL, lineStyle: "dotted", title: "Zero Line" }
+        ]
       };
     }
   };
@@ -41869,93 +42652,180 @@ ${overlayScrollbarCss(".vela-sd-pane")}
     type: "trix",
     title: "TRIX",
     overlay: false,
-    inputs: [lengthInput(18), colorInput()],
+    inputs: [
+      lengthInput(18, "length", "Length", 5e3, "Length of each of the three EMA smoothing passes applied to the close price."),
+      lengthInput(9, "signalLength", "Signal Length", 500, "Length of the EMA applied to TRIX to form the signal line."),
+      colorInput(NEUTRAL, "TRIX Color", "color", "Color of the TRIX line."),
+      colorInput(WARNING, "Signal Color", "signalColor", "Color of the signal line."),
+      colorInput(BULLISH, "Bullish", "bullColor", "Color of the TRIX line and its gradient fill while TRIX holds above zero."),
+      colorInput(BEARISH, "Bearish", "bearColor", "Color of the TRIX line and its gradient fill while TRIX holds below zero.")
+    ],
     compute: (bars, inputs) => {
       const len = num3(inputs, "length", 18);
-      const logClose = map(closes(bars), Math.log);
-      const smooth = ema(ema(ema(logClose, len), len), len);
-      const values = map(change(smooth), (x) => x * 1e4);
-      return {
-        plots: [{ key: "trix", title: "TRIX", values, color: str3(inputs, "color", SERIES_LINE), width: 2 }],
-        levels: ZERO_LEVEL
-      };
+      const smooth = ema(ema(ema(closes(bars), len), len), len);
+      const values = roc(smooth, 1);
+      return centeredOscillator({
+        key: "trix",
+        title: "TRIX",
+        values,
+        ink: { bull: str3(inputs, "bullColor", BULLISH), bear: str3(inputs, "bearColor", BEARISH), neutral: str3(inputs, "color", NEUTRAL) },
+        zeroInk: NEUTRAL,
+        extraPlots: [{ key: "signal", title: "Signal", values: ema(values, num3(inputs, "signalLength", 9)), color: str3(inputs, "signalColor", WARNING) }]
+      });
     }
   };
-  function tsiLine(src, long, short) {
+  function tsiRatio(src, long, short) {
     const mom = change(src);
     const numer = ema(ema(mom, long), short);
     const denom = ema(ema(map(mom, Math.abs), long), short);
-    return zip(numer, denom, (a, b) => b === 0 ? 0 : 100 * a / b);
+    return zip(numer, denom, (a, b) => b === 0 ? 0 : a / b);
   }
   var tsi = {
     type: "true-strength-index",
     title: "True Strength Index",
     shortTitle: "TSI",
     overlay: false,
-    inputs: [lengthInput(25, "longLength", "Long length"), lengthInput(13, "shortLength", "Short length"), lengthInput(13, "signalLength", "Signal length")],
+    inputs: [
+      lengthInput(25, "longLength", "Long Length", 5e3, "Length of the first (long) EMA applied to the 1-bar price change."),
+      lengthInput(13, "shortLength", "Short Length", 5e3, "Length of the second (short) EMA applied to the long-smoothed price change."),
+      lengthInput(13, "signalLength", "Signal Length", 500, "Length of the EMA of TSI used as the signal line."),
+      colorInput(NEUTRAL, "TSI", "color", "Color of the TSI line."),
+      colorInput(WARNING, "Signal", "signalColor", "Color of the signal line."),
+      colorInput(BULLISH, "Bullish", "bullColor", "Color of the TSI line and its gradient fill while TSI holds above zero."),
+      colorInput(BEARISH, "Bearish", "bearColor", "Color of the TSI line and its gradient fill while TSI holds below zero.")
+    ],
     compute: (bars, inputs) => {
-      const line = tsiLine(closes(bars), num3(inputs, "longLength", 25), num3(inputs, "shortLength", 13));
-      return {
-        plots: [
-          { key: "tsi", title: "TSI", values: line, color: SERIES_LINE, width: 2 },
-          { key: "signal", title: "Signal", values: ema(line, num3(inputs, "signalLength", 13)), color: WARNING }
-        ],
-        levels: ZERO_LEVEL
-      };
+      const values = map(tsiRatio(closes(bars), num3(inputs, "longLength", 25), num3(inputs, "shortLength", 13)), (x) => 100 * x);
+      return centeredOscillator({
+        key: "tsi",
+        title: "TSI",
+        values,
+        ink: { bull: str3(inputs, "bullColor", BULLISH), bear: str3(inputs, "bearColor", BEARISH), neutral: str3(inputs, "color", NEUTRAL) },
+        zeroInk: NEUTRAL,
+        extraPlots: [{ key: "signal", title: "Signal", values: ema(values, num3(inputs, "signalLength", 13)), color: str3(inputs, "signalColor", WARNING) }]
+      });
     }
   };
+  var SMI_INDICATOR = "Indicator";
+  var SMI_OSCILLATOR = "Oscillator";
   var smiErgodic = {
     type: "smi-ergodic",
     title: "SMI Ergodic Oscillator",
     shortTitle: "SMIE",
     overlay: false,
-    inputs: [lengthInput(5, "shortLength", "Short length"), lengthInput(20, "longLength", "Long length"), lengthInput(5, "signalLength", "Signal length")],
+    inputs: [
+      lengthInput(20, "longLength", "Long Length", 5e3, "Length of the first EMA smoothing applied to the momentum of the closing price."),
+      lengthInput(5, "shortLength", "Short Length", 5e3, "Length of the second EMA smoothing applied to the momentum of the closing price."),
+      lengthInput(5, "signalLength", "Signal Length", 500, "Length of the EMA of the SMI that forms the signal line."),
+      optionInput("display", "Display", SMI_INDICATOR, [SMI_INDICATOR, SMI_OSCILLATOR], "Indicator plots the SMI and its signal line. Oscillator plots the difference between them as a histogram."),
+      colorInput(NEUTRAL, "SMI", "color", "Color of the SMI line while it sits exactly on its signal line."),
+      colorInput(WARNING, "Signal", "signalColor", "Color of the signal line."),
+      colorInput(BULLISH, "Oscillator Grow", "growColor", "Color of the rising oscillator histogram, and of the SMI line while it leads its signal."),
+      colorInput(BEARISH, "Oscillator Fall", "fallColor", "Color of the falling oscillator histogram, and of the SMI line while it lags its signal.")
+    ],
     compute: (bars, inputs) => {
-      const line = tsiLine(closes(bars), num3(inputs, "longLength", 20), num3(inputs, "shortLength", 5));
-      const signal = ema(line, num3(inputs, "signalLength", 5));
-      const osc = sub(line, signal);
+      const smi = tsiRatio(closes(bars), num3(inputs, "longLength", 20), num3(inputs, "shortLength", 5));
+      const signal = ema(smi, num3(inputs, "signalLength", 5));
+      const grow = str3(inputs, "growColor", BULLISH);
+      const fall = str3(inputs, "fallColor", BEARISH);
+      const zero = [{ key: "zero", price: 0, color: transp(NEUTRAL, 50), lineStyle: "dashed", title: "Zero" }];
+      if (str3(inputs, "display", SMI_INDICATOR) === SMI_OSCILLATOR) {
+        const osc = sub(smi, signal);
+        const colors = osc.map((x, i) => {
+          if (!Number.isFinite(x)) return null;
+          const prev3 = i > 0 && Number.isFinite(osc[i - 1]) ? osc[i - 1] : x;
+          return x > prev3 ? grow : fall;
+        });
+        return { plots: [{ key: "osc", title: "Oscillator", values: osc, kind: "columns", color: grow, colors, base: 0 }], levels: zero };
+      }
+      const neutral = str3(inputs, "color", NEUTRAL);
+      const inkOf = (i) => {
+        const a = smi[i];
+        const b = signal[i];
+        if (!Number.isFinite(b)) return neutral;
+        return a > b ? grow : a < b ? fall : neutral;
+      };
       return {
         plots: [
-          { key: "osc", title: "Oscillator", values: osc, kind: "histogram", color: BULLISH, colors: histColors(osc), base: 0 },
-          { key: "smi", title: "SMI", values: line, color: SERIES_LINE, width: 2 },
-          { key: "signal", title: "Signal", values: signal, color: WARNING }
+          { key: "smi", title: "SMI", values: smi, color: neutral, colors: smi.map((x, i) => Number.isFinite(x) ? inkOf(i) : null) },
+          { key: "signal", title: "Signal", values: signal, color: str3(inputs, "signalColor", WARNING) }
         ],
-        levels: ZERO_LEVEL
+        bands: [{ key: "spread", from: "smi", to: "signal", color: transp(neutral, 75), colors: smi.map((x, i) => Number.isFinite(x) ? transp(inkOf(i), 75) : null) }],
+        levels: zero
       };
     }
   };
+  var STC_MID = 50;
+  var TRIGGERS = "Trigger Levels";
   var stc = {
     type: "schaff-trend-cycle",
     title: "Schaff Trend Cycle",
     shortTitle: "Schaff Trend Cycle",
     overlay: false,
-    inputs: [lengthInput(10, "cycleLength", "Cycle length"), lengthInput(23, "fastLength", "Fast length"), lengthInput(50, "slowLength", "Slow length")],
+    inputs: [
+      sourceInput("Close", "source", "Source", "Price series used to build the MACD that the trend cycle is measured on."),
+      lengthInput(23, "fastLength", "Fast Length", 5e3, "Fast EMA length of the underlying MACD."),
+      lengthInput(50, "slowLength", "Slow Length", 5e3, "Slow EMA length of the underlying MACD."),
+      { ...lengthInput(10, "cycleLength", "Cycle Length", 5e3, "Window of the two stochastic passes. Each pass measures where its input sits inside the range of its own values over this many bars."), min: 2 },
+      floatInput("factor", "Smoothing Factor", 0.5, 0.01, 1, 0.05, "%D style recursive smoothing applied after each stochastic pass. 0.5 is the published default."),
+      { ...floatInput("upper", "Upper Trigger", 75, 0, 100, 1, "Upper trigger line. A cross down through it flags an emerging downtrend."), group: TRIGGERS },
+      { ...floatInput("lower", "Lower Trigger", 25, 0, 100, 1, "Lower trigger line. A cross up through it flags an emerging uptrend."), group: TRIGGERS },
+      colorInput(BULLISH, "Bullish Color", "bullColor", "Color of the trend cycle line and gradient while the cycle holds the upper half of its 0-100 scale."),
+      colorInput(BEARISH, "Bearish Color", "bearColor", "Color of the trend cycle line and gradient while the cycle holds the lower half of its 0-100 scale."),
+      colorInput(NEUTRAL, "Levels Color", "levelsColor", "Color of the dashed trigger lines and the dotted midline."),
+      boolInput("gradientFill", "Gradient Fill", true, STYLE, "Vertical gradient between the midline and the trend cycle, fading out toward the midline.")
+    ],
     compute: (bars, inputs) => {
       const len = num3(inputs, "cycleLength", 10);
-      const src = closes(bars);
+      const factor = num3(inputs, "factor", 0.5);
+      const src = sourceValues(bars, str3(inputs, "source", "Close"));
       const macdLine = sub(ema(src, num3(inputs, "fastLength", 23)), ema(src, num3(inputs, "slowLength", 50)));
-      const stochOf = (v) => {
+      const stochNorm = (v) => {
         const lo = lowest(v, len);
         const hi = highest(v, len);
         const out = new Array(v.length).fill(Number.NaN);
-        let prevRaw = Number.NaN;
-        let smoothed = Number.NaN;
+        let pct = Number.NaN;
         for (let i = 0; i < v.length; i++) {
           const x = v[i];
           const l = lo[i];
           const h = hi[i];
           if (!Number.isFinite(x) || !Number.isFinite(l) || !Number.isFinite(h)) continue;
-          const raw = h > l ? (x - l) / (h - l) * 100 : Number.isFinite(prevRaw) ? prevRaw : 50;
-          prevRaw = raw;
-          smoothed = Number.isFinite(smoothed) ? smoothed + 0.5 * (raw - smoothed) : raw;
+          if (h > l) pct = 100 * (x - l) / (h - l);
+          out[i] = pct;
+        }
+        return out;
+      };
+      const smoothStep = (v) => {
+        const out = new Array(v.length).fill(Number.NaN);
+        let smoothed = Number.NaN;
+        for (let i = 0; i < v.length; i++) {
+          const x = v[i];
+          if (!Number.isFinite(x)) continue;
+          smoothed = Number.isFinite(smoothed) ? smoothed + factor * (x - smoothed) : x;
           out[i] = smoothed;
         }
         return out;
       };
-      const values = stochOf(stochOf(macdLine));
+      const values = smoothStep(stochNorm(smoothStep(stochNorm(macdLine))));
+      const levelInk = str3(inputs, "levelsColor", NEUTRAL);
+      const bull = str3(inputs, "bullColor", BULLISH);
+      const bear = str3(inputs, "bearColor", BEARISH);
+      const plots = [
+        { key: "stc", title: "Schaff Trend Cycle", values, color: bear, width: 2, colors: values.map((x) => Number.isFinite(x) ? x > STC_MID ? bull : bear : null) }
+      ];
+      const bands = [];
+      if (bool(inputs, "gradientFill", true)) {
+        plots.push(anchorPlot("midAnchor", "Midline Anchor", values.length, STC_MID));
+        bands.push({ key: "wash", from: "stc", to: "midAnchor", color: transp(NEUTRAL, 100), gradient: baselineGradient(values, STC_MID, (x) => x > STC_MID ? bull : bear) });
+      }
       return {
-        plots: [{ key: "stc", title: "STC", values, color: SERIES_LINE, width: 2 }],
-        levels: guideLevels(25, 75)
+        plots,
+        bands,
+        levels: [
+          { key: "upper", price: num3(inputs, "upper", 75), color: transp(levelInk, 25), lineStyle: "dashed", title: "Upper Trigger" },
+          { key: "lower", price: num3(inputs, "lower", 25), color: transp(levelInk, 25), lineStyle: "dashed", title: "Lower Trigger" },
+          { key: "midline", price: STC_MID, color: transp(levelInk, 60), lineStyle: "dotted", title: "Midline" }
+        ]
       };
     }
   };
@@ -41964,22 +42834,37 @@ ${overlayScrollbarCss(".vela-sd-pane")}
     title: "Know Sure Thing",
     shortTitle: "KST",
     overlay: false,
-    inputs: [sourceInput(), lengthInput(9, "signalLength", "Signal length")],
+    inputs: [
+      lengthInput(10, "rocLength1", "ROC Length #1", 5e3, "Lookback of the first (shortest) rate of change."),
+      lengthInput(15, "rocLength2", "ROC Length #2", 5e3, "Lookback of the second rate of change."),
+      lengthInput(20, "rocLength3", "ROC Length #3", 5e3, "Lookback of the third rate of change."),
+      lengthInput(30, "rocLength4", "ROC Length #4", 5e3, "Lookback of the fourth (longest) rate of change."),
+      lengthInput(10, "smaLength1", "SMA Length #1", 5e3, "Smoothing length applied to the first rate of change (RCMA #1)."),
+      lengthInput(10, "smaLength2", "SMA Length #2", 5e3, "Smoothing length applied to the second rate of change (RCMA #2)."),
+      lengthInput(10, "smaLength3", "SMA Length #3", 5e3, "Smoothing length applied to the third rate of change (RCMA #3)."),
+      lengthInput(15, "smaLength4", "SMA Length #4", 5e3, "Smoothing length applied to the fourth rate of change (RCMA #4)."),
+      lengthInput(9, "signalLength", "Signal Length", 500, "Simple moving average length of the signal line."),
+      colorInput(BULLISH, "Bullish", "bullColor", "Color of the KST line while above zero."),
+      colorInput(BEARISH, "Bearish", "bearColor", "Color of the KST line while below zero."),
+      colorInput(WARNING, "Signal", "signalColor", "Color of the signal line.")
+    ],
     compute: (bars, inputs) => {
-      const src = sourceValues(bars, str3(inputs, "source", "Close"));
-      const line = [
-        sma(roc(src, 10), 10),
-        sma(roc(src, 15), 10),
-        sma(roc(src, 20), 10),
-        sma(roc(src, 30), 15)
-      ].reduce((acc, r, i) => zip(acc, r, (a, b) => a + b * (i + 1)), new Array(src.length).fill(0));
-      return {
-        plots: [
-          { key: "kst", title: "KST", values: line, color: SERIES_LINE, width: 2 },
-          { key: "signal", title: "Signal", values: sma(line, num3(inputs, "signalLength", 9)), color: WARNING }
-        ],
-        levels: ZERO_LEVEL
-      };
+      const c = closes(bars);
+      const rcma = (rocKey, rocDefault, smaKey, smaDefault) => sma(roc(c, num3(inputs, rocKey, rocDefault)), num3(inputs, smaKey, smaDefault));
+      const values = [rcma("rocLength1", 10, "smaLength1", 10), rcma("rocLength2", 15, "smaLength2", 10), rcma("rocLength3", 20, "smaLength3", 10), rcma("rocLength4", 30, "smaLength4", 15)].reduce(
+        (acc, r, i) => zip(acc, r, (a, b) => a + b * (i + 1)),
+        new Array(c.length).fill(0)
+      );
+      const bull = str3(inputs, "bullColor", BULLISH);
+      return centeredOscillator({
+        key: "kst",
+        title: "KST",
+        values,
+        ink: { bull, bear: str3(inputs, "bearColor", BEARISH), neutral: bull },
+        zeroInk: NEUTRAL,
+        valueTransparency: 60,
+        extraPlots: [{ key: "signal", title: "Signal", values: sma(values, num3(inputs, "signalLength", 9)), color: str3(inputs, "signalColor", WARNING) }]
+      });
     }
   };
   var coppock = {
@@ -41988,19 +42873,25 @@ ${overlayScrollbarCss(".vela-sd-pane")}
     shortTitle: "Coppock",
     overlay: false,
     inputs: [
-      lengthInput(10, "wmaLength", "WMA length"),
-      lengthInput(14, "longRoc", "Long RoC length"),
-      lengthInput(11, "shortRoc", "Short RoC length"),
-      sourceInput(),
-      colorInput()
+      lengthInput(10, "wmaLength", "WMA Length", 5e3, "Length of the weighted moving average applied to the sum of the two rates of change."),
+      lengthInput(14, "longRoc", "Long RoC Length", 5e3, "Lookback of the long rate of change, in bars. The original definition uses 14 monthly closes."),
+      lengthInput(11, "shortRoc", "Short RoC Length", 5e3, "Lookback of the short rate of change, in bars. The original definition uses 11 monthly closes."),
+      sourceInput("Close", "source", "Source", "Price series used for the rate of change calculations."),
+      colorInput(NEUTRAL, "Coppock Curve", "color", "Color of the Coppock Curve line."),
+      colorInput(BULLISH, "Bullish", "bullColor", "Line and fill color while the curve reads above zero."),
+      colorInput(BEARISH, "Bearish", "bearColor", "Line and fill color while the curve reads below zero."),
+      colorInput(NEUTRAL, "Zero Line", "zeroColor", "Color of the zero reference line.")
     ],
     compute: (bars, inputs) => {
       const src = sourceValues(bars, str3(inputs, "source", "Close"));
       const values = wma(zip(roc(src, num3(inputs, "longRoc", 14)), roc(src, num3(inputs, "shortRoc", 11)), (a, b) => a + b), num3(inputs, "wmaLength", 10));
-      return {
-        plots: [{ key: "coppock", title: "Coppock", values, color: str3(inputs, "color", SERIES_LINE), width: 2 }],
-        levels: ZERO_LEVEL
-      };
+      return centeredOscillator({
+        key: "coppock",
+        title: "Coppock Curve",
+        values,
+        ink: { bull: str3(inputs, "bullColor", BULLISH), bear: str3(inputs, "bearColor", BEARISH), neutral: str3(inputs, "color", NEUTRAL) },
+        zeroInk: str3(inputs, "zeroColor", NEUTRAL)
+      });
     }
   };
   var dpo = {
@@ -42008,42 +42899,76 @@ ${overlayScrollbarCss(".vela-sd-pane")}
     title: "Detrended Price Oscillator",
     shortTitle: "DPO",
     overlay: false,
-    inputs: [lengthInput(21), colorInput()],
+    inputs: [
+      lengthInput(21, "length", "Length", 5e3, "Lookback of the simple moving average that price is detrended against. The comparison is displaced by Length / 2 + 1 bars."),
+      sourceInput("Close", "source", "Source", "Price series used in the detrending calculation."),
+      boolInput("centered", "Centered", false, void 0, "Shifts the oscillator back by Length / 2 + 1 bars so it is centered on the prices it detrends. The most recent bars then show no value."),
+      colorInput(NEUTRAL, "DPO", "color", "Color of the line when it sits exactly at zero."),
+      colorInput(BULLISH, "Above Zero", "bullColor", "Color of the line and fill while the oscillator is above zero."),
+      colorInput(BEARISH, "Below Zero", "bearColor", "Color of the line and fill while the oscillator is below zero."),
+      colorInput(NEUTRAL, "Zero Line", "zeroColor", "Color of the zero reference line.")
+    ],
     compute: (bars, inputs) => {
       const len = num3(inputs, "length", 21);
-      const barsback = Math.floor(len / 2) + 1;
-      const values = sub(closes(bars), shift3(sma(closes(bars), len), barsback));
-      return {
-        plots: [{ key: "dpo", title: "DPO", values, color: str3(inputs, "color", SERIES_LINE), width: 2 }],
-        levels: ZERO_LEVEL
-      };
+      const barsBack = Math.trunc(len / 2) + 1;
+      const src = sourceValues(bars, str3(inputs, "source", "Close"));
+      const basis = sma(src, len);
+      const centered = bool(inputs, "centered", false);
+      const values = centered ? shift3(sub(shift3(src, barsBack), basis), -barsBack) : sub(src, shift3(basis, barsBack));
+      return centeredOscillator({
+        key: "dpo",
+        title: "DPO",
+        values,
+        ink: { bull: str3(inputs, "bullColor", BULLISH), bear: str3(inputs, "bearColor", BEARISH), neutral: str3(inputs, "color", NEUTRAL) },
+        zeroInk: str3(inputs, "zeroColor", NEUTRAL)
+      });
     }
   };
+  var ROC_PERCENT = "ROC %";
+  var ROC_MOMENTUM = "Momentum";
   var rocSpec = {
     type: "rate-of-change",
     title: "Rate of Change",
     shortTitle: "ROC",
     overlay: false,
-    inputs: [lengthInput(9), sourceInput(), colorInput()],
-    compute: (bars, inputs) => ({
-      plots: [
-        {
-          key: "roc",
-          title: "RoC",
-          values: roc(sourceValues(bars, str3(inputs, "source", "Close")), num3(inputs, "length", 9)),
-          color: str3(inputs, "color", SERIES_LINE),
-          width: 2
-        }
-      ],
-      levels: ZERO_LEVEL
-    })
+    inputs: [
+      lengthInput(9, "length", "Length", 5e3, "Lookback period; the source is compared with its value this many bars ago."),
+      sourceInput("Close", "source", "Source", "Series used as input for the calculation."),
+      optionInput("mode", "Mode", ROC_PERCENT, [ROC_PERCENT, ROC_MOMENTUM], "ROC % plots the change as a percentage of the source value from the lookback; Momentum plots the raw difference."),
+      colorInput(NEUTRAL, "Line", "color", "Color of the line when the reading sits exactly at zero."),
+      colorInput(BULLISH, "Bullish", "bullColor", "Color of the line and fill while the reading is above zero."),
+      colorInput(BEARISH, "Bearish", "bearColor", "Color of the line and fill while the reading is below zero."),
+      boolInput("gradientFill", "Gradient Fill", true, STYLE, "Fills the area between the line and zero, following the line color.")
+    ],
+    compute: (bars, inputs) => {
+      const len = num3(inputs, "length", 9);
+      const src = sourceValues(bars, str3(inputs, "source", "Close"));
+      const values = str3(inputs, "mode", ROC_PERCENT) === ROC_MOMENTUM ? change(src, len) : roc(src, len);
+      return centeredOscillator({
+        key: "roc",
+        title: "ROC",
+        values,
+        ink: { bull: str3(inputs, "bullColor", BULLISH), bear: str3(inputs, "bearColor", BEARISH), neutral: str3(inputs, "color", NEUTRAL) },
+        zeroInk: NEUTRAL,
+        fill: bool(inputs, "gradientFill", true)
+      });
+    }
   };
   var ultimate = {
     type: "ultimate-oscillator",
     title: "Ultimate Oscillator",
     shortTitle: "UO",
     overlay: false,
-    inputs: [lengthInput(7, "fastLength", "Fast length"), lengthInput(14, "middleLength", "Middle length"), lengthInput(28, "slowLength", "Slow length"), colorInput()],
+    inputs: [
+      lengthInput(7, "fastLength", "Fast Length", 5e3, "Bars in the fastest averaging window. Weighted 4 in the final blend, so it dominates the oscillator."),
+      lengthInput(14, "middleLength", "Middle Length", 5e3, "Bars in the intermediate averaging window. Weighted 2 in the final blend."),
+      lengthInput(28, "slowLength", "Slow Length", 5e3, "Bars in the slowest averaging window. Weighted 1 in the final blend."),
+      ...thresholdInputs(70, 30, 0, 100, "Overbought", "Oversold"),
+      colorInput(NEUTRAL, "Oscillator", "color", "Color of the line midway between the levels. Toward either level it blends into that level\u2019s color."),
+      colorInput(NEUTRAL, "Levels", "levelsColor", "Color of the overbought and oversold levels."),
+      colorInput(BULLISH, "Oversold", "oversoldColor", "Color of the line at the oversold level and of the oversold zone shading."),
+      colorInput(BEARISH, "Overbought", "overboughtColor", "Color of the line at the overbought level and of the overbought zone shading.")
+    ],
     compute: (bars, inputs) => {
       const n = bars.length;
       const bp = new Array(n).fill(Number.NaN);
@@ -42051,10 +42976,9 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       for (let i = 0; i < n; i++) {
         const b = bars[i];
         const pc = i > 0 ? bars[i - 1].close : b.close;
-        const lo = Math.min(b.low, pc);
-        const hi = Math.max(b.high, pc);
-        bp[i] = b.close - lo;
-        tr[i] = hi - lo;
+        const trueLow = Math.min(b.low, pc);
+        bp[i] = b.close - trueLow;
+        tr[i] = Math.max(b.high, pc) - trueLow;
       }
       const avg = (len) => zip(sum(bp, len), sum(tr, len), (a, b) => b === 0 ? Number.NaN : a / b);
       const a7 = avg(num3(inputs, "fastLength", 7));
@@ -42065,10 +42989,17 @@ ${overlayScrollbarCss(".vela-sd-pane")}
         const z = a28[i];
         return Number.isFinite(x) && Number.isFinite(y) && Number.isFinite(z) ? 100 * (4 * x + 2 * y + z) / 7 : Number.NaN;
       });
-      return {
-        plots: [{ key: "uo", title: "UO", values, color: str3(inputs, "color", SERIES_LINE), width: 2 }],
-        levels: guideLevels(30, 70, 50)
-      };
+      return boundedOscillator({
+        key: "uo",
+        title: "UO",
+        values,
+        scale: { top: 100, bottom: 0 },
+        overbought: num3(inputs, "overbought", 70),
+        oversold: num3(inputs, "oversold", 30),
+        ink: { low: str3(inputs, "oversoldColor", BULLISH), mid: str3(inputs, "color", NEUTRAL), high: str3(inputs, "overboughtColor", BEARISH) },
+        levelInk: str3(inputs, "levelsColor", NEUTRAL),
+        zoneTransparency: 91
+      });
     }
   };
   var rvgi = {
@@ -42076,7 +43007,11 @@ ${overlayScrollbarCss(".vela-sd-pane")}
     title: "Relative Vigor Index",
     shortTitle: "RVGI",
     overlay: false,
-    inputs: [lengthInput(10)],
+    inputs: [
+      lengthInput(10, "length", "Length", 5e3, "Number of bars summed for the smoothed numerator (close \u2212 open) and denominator (high \u2212 low)."),
+      colorInput(BULLISH, "RVGI", "color", "Color of the RVGI line."),
+      colorInput(BEARISH, "Signal", "signalColor", "Color of the signal line.")
+    ],
     compute: (bars, inputs) => {
       const len = num3(inputs, "length", 10);
       const co = swma(sub(closes(bars), opens(bars)));
@@ -42084,31 +43019,49 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       const line = zip(sum(co, len), sum(hl, len), (a, b) => b === 0 ? 0 : a / b);
       return {
         plots: [
-          { key: "rvgi", title: "RVGI", values: line, color: SERIES_LINE, width: 2 },
-          { key: "signal", title: "Signal", values: swma(line), color: WARNING }
+          { key: "rvgi", title: "RVGI", values: line, color: str3(inputs, "color", BULLISH) },
+          { key: "signal", title: "Signal", values: swma(line), color: str3(inputs, "signalColor", BEARISH) }
         ],
-        levels: ZERO_LEVEL
+        levels: [{ key: "zero", price: 0, color: transp(NEUTRAL, 50), lineStyle: "dashed", title: "Zero" }]
       };
     }
   };
+  var RVI_EMA = "EMA";
+  var RVI_RMA = "Wilder (RMA)";
   var relVolatility = {
     type: "relative-volatility-index",
     title: "Relative Volatility Index",
     shortTitle: "RVI",
     overlay: false,
-    inputs: [lengthInput(10, "stdevLength", "StdDev length"), lengthInput(14, "smoothLength", "Smoothing length"), sourceInput(), colorInput()],
+    inputs: [
+      lengthInput(10, "stdevLength", "Stdev Length", 5e3, "Number of bars used for the standard deviation of closing prices that serves as each bar's volatility reading."),
+      lengthInput(14, "smoothLength", "Smoothing Length", 5e3, "Number of bars used to smooth the up and down volatility streams."),
+      optionInput("smoothType", "Smoothing Type", RVI_EMA, [RVI_EMA, RVI_RMA], "Moving average applied to the volatility streams. EMA is Dorsey's classic calculation; Wilder (RMA) matches platforms that use Wilder smoothing."),
+      ...thresholdInputs(80, 20),
+      colorInput(NEUTRAL, "RVI Line", "color", "Color of the RVI line at the midline. Toward either threshold it blends into that threshold\u2019s color."),
+      colorInput(BULLISH, "Up Volatility", "overboughtColor", "Color of the line and zone shading at and above the overbought level."),
+      colorInput(BEARISH, "Down Volatility", "oversoldColor", "Color of the line and zone shading at and below the oversold level.")
+    ],
     compute: (bars, inputs) => {
+      const c = closes(bars);
+      const sigma = stdev(c, num3(inputs, "stdevLength", 10));
+      const d = change(c);
+      const up = zip(sigma, d, (s, x) => x > 0 ? s : 0);
+      const down = zip(sigma, d, (s, x) => x < 0 ? s : 0);
       const smoothLen = num3(inputs, "smoothLength", 14);
-      const src = sourceValues(bars, str3(inputs, "source", "Close"));
-      const dev = stdev(src, num3(inputs, "stdevLength", 10));
-      const d = change(src);
-      const up = rma(zip(dev, d, (s, x) => x > 0 ? s : 0), smoothLen);
-      const dn = rma(zip(dev, d, (s, x) => x <= 0 ? s : 0), smoothLen);
-      const values = zip(up, dn, (u, w) => u + w === 0 ? 50 : 100 * u / (u + w));
-      return {
-        plots: [{ key: "rvi", title: "RVI", values, color: str3(inputs, "color", SERIES_LINE), width: 2 }],
-        levels: guideLevels(20, 80, 50)
-      };
+      const smooth = str3(inputs, "smoothType", RVI_EMA) === RVI_RMA ? rma : ema;
+      const values = zip(smooth(up, smoothLen), smooth(down, smoothLen), (u, w) => u + w === 0 ? 0 : 100 * u / (u + w));
+      return boundedOscillator({
+        key: "rvi",
+        title: "RVI",
+        values,
+        scale: { top: 100, bottom: 0 },
+        overbought: num3(inputs, "overbought", 80),
+        oversold: num3(inputs, "oversold", 20),
+        ink: { low: str3(inputs, "oversoldColor", BEARISH), mid: str3(inputs, "color", NEUTRAL), high: str3(inputs, "overboughtColor", BULLISH) },
+        levelInk: NEUTRAL,
+        width: 2
+      });
     }
   };
   var bop = {
@@ -42116,28 +43069,43 @@ ${overlayScrollbarCss(".vela-sd-pane")}
     title: "Balance of Power",
     shortTitle: "BOP",
     overlay: false,
-    inputs: [colorInput()],
+    inputs: [
+      boolInput("smoothing", "Smoothing", false, void 0, "Smooth the raw Balance of Power with a simple moving average instead of plotting the single-bar value."),
+      lengthInput(14, "smoothLength", "Length", 5e3, "Simple moving average length applied when smoothing is enabled."),
+      colorInput(NEUTRAL, "BOP Color", "color", "Color of the line at exactly zero."),
+      colorInput(BULLISH, "Bullish", "bullColor", "Line and fill color while the Balance of Power is above zero \u2014 buyers in control of the bar."),
+      colorInput(BEARISH, "Bearish", "bearColor", "Line and fill color while the Balance of Power is below zero \u2014 sellers in control of the bar.")
+    ],
     compute: (bars, inputs) => {
-      const values = bars.map((b) => b.high === b.low ? 0 : (b.close - b.open) / (b.high - b.low));
-      return {
-        plots: [{ key: "bop", title: "BOP", values, color: str3(inputs, "color", SERIES_LINE), width: 2 }],
-        levels: ZERO_LEVEL
-      };
+      const raw = bars.map((b) => b.high === b.low ? 0 : (b.close - b.open) / (b.high - b.low));
+      const values = bool(inputs, "smoothing", false) ? sma(raw, num3(inputs, "smoothLength", 14)) : raw;
+      return centeredOscillator({
+        key: "bop",
+        title: "BOP",
+        values,
+        ink: { bull: str3(inputs, "bullColor", BULLISH), bear: str3(inputs, "bearColor", BEARISH), neutral: str3(inputs, "color", NEUTRAL) },
+        zeroInk: NEUTRAL,
+        valueTransparency: 60
+      });
     }
   };
   var elderRay = {
     type: "elder-ray",
     title: "Elder Ray",
     overlay: false,
-    inputs: [lengthInput(13)],
+    inputs: [
+      lengthInput(13, "length", "EMA Length", 5e3, "Number of bars in the exponential moving average of closing prices used as the reference level for Bull Power and Bear Power. Alexander Elder's classic setting is 13."),
+      colorInput(BULLISH, "Bull Power", "bullColor", "Color of the Bull Power columns."),
+      colorInput(BEARISH, "Bear Power", "bearColor", "Color of the Bear Power columns.")
+    ],
     compute: (bars, inputs) => {
       const basis = ema(closes(bars), num3(inputs, "length", 13));
       return {
         plots: [
-          { key: "bull", title: "Bull power", values: sub(highs(bars), basis), kind: "histogram", color: BULLISH, base: 0 },
-          { key: "bear", title: "Bear power", values: sub(lows(bars), basis), kind: "histogram", color: BEARISH, base: 0 }
+          { key: "bull", title: "Bull Power", values: sub(highs(bars), basis), kind: "columns", color: str3(inputs, "bullColor", BULLISH), base: 0 },
+          { key: "bear", title: "Bear Power", values: sub(lows(bars), basis), kind: "columns", color: str3(inputs, "bearColor", BEARISH), base: 0 }
         ],
-        levels: ZERO_LEVEL
+        levels: [{ key: "zero", price: 0, color: transp(NEUTRAL, 30), lineStyle: "dashed", title: "Zero Line" }]
       };
     }
   };
@@ -42146,31 +43114,66 @@ ${overlayScrollbarCss(".vela-sd-pane")}
     title: "TTM Squeeze",
     overlay: false,
     inputs: [
-      lengthInput(20),
-      { key: "bbMult", title: "Bollinger multiplier", type: "float", defval: 2, min: 0.1, max: 50, step: 0.1 },
-      { key: "kcMult", title: "Keltner multiplier", type: "float", defval: 1.5, min: 0.1, max: 50, step: 0.1 }
+      { ...lengthInput(20, "length", "Length", 5e3, "Shared lookback for the Bollinger Bands, the Keltner Channels, and the momentum regression. John Carter's original setting is 20."), min: 2 },
+      sourceInput("Close", "source", "Source", "Price series used for the shared moving average basis, the standard deviation, and the momentum displacement."),
+      floatInput("bbMult", "Bollinger Bands Multiplier", 2, 0.1, 50, 0.1, "Standard deviation multiplier for the Bollinger Bands."),
+      floatInput("kcMult", "Keltner Channels Multiplier", 1.5, 0.1, 50, 0.1, "ATR multiplier for the Keltner Channels. A smaller multiplier demands a tighter compression before the squeeze turns on."),
+      colorInput(BULLISH, "Momentum Up", "bullColor", "Histogram color while momentum is positive. Bars building away from zero print solid, bars fading back print dimmed."),
+      colorInput(BEARISH, "Momentum Down", "bearColor", "Histogram color while momentum is negative. Bars building away from zero print solid, bars fading back print dimmed."),
+      colorInput(WARNING, "Squeeze On", "squeezeOnColor", "Zero-line dot color while both Bollinger Bands sit fully inside the Keltner Channels."),
+      colorInput(NEUTRAL, "Squeeze Off", "squeezeOffColor", "Zero-line dot color while the Bollinger Bands trade outside the Keltner Channels."),
+      boolInput("markFires", "Mark Squeeze Fires", true, STYLE, "Draws a cross on the zero line on the first bar where the bands re-emerge outside the channels, colored by the side of the momentum histogram.")
     ],
     compute: (bars, inputs) => {
       const len = num3(inputs, "length", 20);
-      const c = closes(bars);
-      const basis = sma(c, len);
-      const dev = map(stdev(c, len), (x) => x * num3(inputs, "bbMult", 2));
-      const kcRange = map(rma(trueRange(bars), len), (x) => x * num3(inputs, "kcMult", 1.5));
-      const donchianMid = zip(highest(highs(bars), len), lowest(lows(bars), len), (h, l) => (h + l) / 2);
-      const anchor = zip(donchianMid, basis, (d, b) => (d + b) / 2);
-      const mom = linreg(sub(c, anchor), len);
-      const squeezed = c.map((_, i) => {
+      const src = sourceValues(bars, str3(inputs, "source", "Close"));
+      const basis = sma(src, len);
+      const dev = map(stdev(src, len), (x) => x * num3(inputs, "bbMult", 2));
+      const kcRange = map(atr(bars, len), (x) => x * num3(inputs, "kcMult", 1.5));
+      const rangeMid = zip(highest(highs(bars), len), lowest(lows(bars), len), (h, l) => (h + l) / 2);
+      const anchor = zip(rangeMid, basis, (d, b) => (d + b) / 2);
+      const mom = linreg(sub(src, anchor), len, 0);
+      const squeezeOn = basis.map((b, i) => {
         const d = dev[i];
         const r = kcRange[i];
-        return Number.isFinite(d) && Number.isFinite(r) ? d < r : false;
+        if (!Number.isFinite(b) || !Number.isFinite(d) || !Number.isFinite(r)) return null;
+        return d < r;
       });
-      const stateColors = squeezed.map((s, i) => Number.isFinite(mom[i]) ? s ? BEARISH : BULLISH : null);
-      return {
-        plots: [
-          { key: "mom", title: "Momentum", values: mom, kind: "histogram", color: BULLISH, colors: histColors(mom), base: 0 },
-          { key: "squeeze", title: "Squeeze", values: mom.map((x) => Number.isFinite(x) ? 0 : Number.NaN), kind: "cross", color: INFO, colors: stateColors }
-        ]
-      };
+      const bull = str3(inputs, "bullColor", BULLISH);
+      const bear = str3(inputs, "bearColor", BEARISH);
+      const onInk = str3(inputs, "squeezeOnColor", WARNING);
+      const offInk = str3(inputs, "squeezeOffColor", NEUTRAL);
+      const momColors = mom.map((x, i) => {
+        if (!Number.isFinite(x)) return null;
+        const prev3 = i > 0 && Number.isFinite(mom[i - 1]) ? mom[i - 1] : x;
+        const rising = x > prev3;
+        return x >= 0 ? rising ? bull : transp(bull, 60) : rising ? transp(bear, 60) : bear;
+      });
+      const plots = [
+        { key: "mom", title: "Momentum", values: mom, kind: "columns", color: bull, colors: momColors, base: 0 },
+        {
+          key: "state",
+          title: "Squeeze State",
+          values: squeezeOn.map((s) => s == null ? Number.NaN : 0),
+          kind: "circles",
+          color: offInk,
+          width: 2,
+          colors: squeezeOn.map((s) => s == null ? null : s ? onInk : offInk)
+        }
+      ];
+      if (bool(inputs, "markFires", true)) {
+        const fires = squeezeOn.map((s, i) => s === false && squeezeOn[i - 1] === true ? 0 : Number.NaN);
+        plots.push({
+          key: "fire",
+          title: "Squeeze Fire",
+          values: fires,
+          kind: "cross",
+          color: offInk,
+          width: 3,
+          colors: fires.map((x, i) => Number.isFinite(x) ? Number.isFinite(mom[i]) ? mom[i] >= 0 ? bull : bear : offInk : null)
+        });
+      }
+      return { plots };
     }
   };
   var oscillatorSpecs = [
@@ -42182,7 +43185,7 @@ ${overlayScrollbarCss(".vela-sd-pane")}
     awesome,
     cci,
     williamsR,
-    cmo,
+    cmoSpec,
     connorsRsi,
     fisher,
     trix,
@@ -42206,15 +43209,19 @@ ${overlayScrollbarCss(".vela-sd-pane")}
     type: "aroon",
     title: "Aroon",
     overlay: false,
-    inputs: [lengthInput(14)],
+    inputs: [
+      lengthInput(14, "length", "Length", 5e3, "Lookback length used to locate the highest high and lowest low."),
+      colorInput(BULLISH, "Aroon Up", "upColor", "Color of the Aroon Up line."),
+      colorInput(BEARISH, "Aroon Down", "downColor", "Color of the Aroon Down line.")
+    ],
     compute: (bars, inputs) => {
       const len = num3(inputs, "length", 14);
-      const up = map(barsSinceHighest(highs(bars), len + 1), (x) => 100 * (len - x) / len);
-      const down = map(barsSinceLowest(lows(bars), len + 1), (x) => 100 * (len - x) / len);
+      const up = map(barsSinceHighest(highs(bars), len), (x) => 100 * (len - x) / len);
+      const down = map(barsSinceLowest(lows(bars), len), (x) => 100 * (len - x) / len);
       return {
         plots: [
-          { key: "up", title: "Aroon up", values: up, color: BULLISH, width: 2 },
-          { key: "down", title: "Aroon down", values: down, color: BEARISH, width: 2 }
+          { key: "up", title: "Aroon Up", values: up, color: str3(inputs, "upColor", BULLISH) },
+          { key: "down", title: "Aroon Down", values: down, color: str3(inputs, "downColor", BEARISH) }
         ]
       };
     }
@@ -42224,10 +43231,16 @@ ${overlayScrollbarCss(".vela-sd-pane")}
     title: "Average Directional Index",
     shortTitle: "ADX",
     overlay: false,
-    inputs: [lengthInput(14, "diLength", "DI length"), lengthInput(14, "adxLength", "ADX smoothing")],
+    inputs: [
+      lengthInput(14, "diLength", "DI Length", 5e3, "Wilder RMA smoothing length applied to directional movement and true range when computing +DI and \u2212DI."),
+      lengthInput(14, "adxLength", "ADX Smoothing", 5e3, "Wilder RMA smoothing length applied to DX to obtain the ADX line."),
+      floatInput("keyLevel", "Key Level", 25, 0, 100, 1, "Trend strength reference level; ADX above it is commonly read as a trending market."),
+      colorInput(BULLISH, "+DI Color", "plusDiColor", "Color of the plus directional indicator, and of the ADX line above the key level while +DI leads."),
+      colorInput(BEARISH, "-DI Color", "minusDiColor", "Color of the minus directional indicator, and of the ADX line above the key level while \u2212DI leads."),
+      colorInput(NEUTRAL, "ADX Color", "adxColor", "Color of the ADX line while it sits below the key level \u2014 no trend strong enough to trade.")
+    ],
     compute: (bars, inputs) => {
       const diLen = num3(inputs, "diLength", 14);
-      const adxLen = num3(inputs, "adxLength", 14);
       const n = bars.length;
       const plusDm = new Array(n).fill(Number.NaN);
       const minusDm = new Array(n).fill(Number.NaN);
@@ -42241,13 +43254,23 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       const plusDi = zip(rma(plusDm, diLen), atrLine, (d, a) => a === 0 ? 0 : 100 * d / a);
       const minusDi = zip(rma(minusDm, diLen), atrLine, (d, a) => a === 0 ? 0 : 100 * d / a);
       const dx = zip(plusDi, minusDi, (p, m) => p + m === 0 ? 0 : 100 * Math.abs(p - m) / (p + m));
+      const adxLine = rma(dx, num3(inputs, "adxLength", 14));
+      const plusInk = str3(inputs, "plusDiColor", BULLISH);
+      const minusInk = str3(inputs, "minusDiColor", BEARISH);
+      const neutralInk = str3(inputs, "adxColor", NEUTRAL);
+      const keyLevel = num3(inputs, "keyLevel", 25);
+      const adxColors = adxLine.map((x, i) => {
+        if (!Number.isFinite(x)) return null;
+        if (x <= keyLevel) return neutralInk;
+        return (plusDi[i] ?? 0) > (minusDi[i] ?? 0) ? plusInk : minusInk;
+      });
       return {
         plots: [
-          { key: "adx", title: "ADX", values: rma(dx, adxLen), color: SERIES_LINE, width: 2 },
-          { key: "plusDi", title: "+DI", values: plusDi, color: BULLISH },
-          { key: "minusDi", title: "-DI", values: minusDi, color: BEARISH }
+          { key: "plusDi", title: "+DI", values: plusDi, color: transp(plusInk, 30) },
+          { key: "minusDi", title: "-DI", values: minusDi, color: transp(minusInk, 30) },
+          { key: "adx", title: "ADX", values: adxLine, color: neutralInk, width: 2, colors: adxColors }
         ],
-        levels: [{ key: "threshold", price: 25, color: NEUTRAL, lineStyle: "dotted" }]
+        levels: [{ key: "keyLevel", price: keyLevel, color: NEUTRAL, lineStyle: "dashed", title: "Key Level" }]
       };
     }
   };
@@ -42256,7 +43279,12 @@ ${overlayScrollbarCss(".vela-sd-pane")}
     title: "Vortex Indicator",
     shortTitle: "VI",
     overlay: false,
-    inputs: [lengthInput(14)],
+    inputs: [
+      lengthInput(14, "length", "Length", 5e3, "Number of bars used to sum the vortex movements (VM+ and VM\u2212) and the true range."),
+      colorInput(BULLISH, "VI+", "plusColor", "Color of the positive vortex line (VI+)."),
+      colorInput(BEARISH, "VI-", "minusColor", "Color of the negative vortex line (VI\u2212)."),
+      colorInput(NEUTRAL, "Baseline", "baselineColor", "Color of the dotted baseline drawn at 1.")
+    ],
     compute: (bars, inputs) => {
       const len = num3(inputs, "length", 14);
       const n = bars.length;
@@ -42269,25 +43297,48 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       const trSum = sum(trueRange(bars), len);
       return {
         plots: [
-          { key: "viPlus", title: "VI+", values: zip(sum(vmPlus, len), trSum, (v, t) => t === 0 ? Number.NaN : v / t), color: BULLISH, width: 2 },
-          { key: "viMinus", title: "VI-", values: zip(sum(vmMinus, len), trSum, (v, t) => t === 0 ? Number.NaN : v / t), color: BEARISH, width: 2 }
+          { key: "viPlus", title: "VI+", values: zip(sum(vmPlus, len), trSum, (v, t) => t === 0 ? Number.NaN : v / t), color: str3(inputs, "plusColor", BULLISH) },
+          { key: "viMinus", title: "VI-", values: zip(sum(vmMinus, len), trSum, (v, t) => t === 0 ? Number.NaN : v / t), color: str3(inputs, "minusColor", BEARISH) }
         ],
-        levels: [{ key: "one", price: 1, color: NEUTRAL, lineStyle: "dotted" }]
+        levels: [{ key: "baseline", price: 1, color: str3(inputs, "baselineColor", NEUTRAL), lineStyle: "dotted", title: "Baseline" }]
       };
     }
   };
   var trendSpecs = [aroon, adx, vortex];
 
   // src/core/native-indicators/classics/volatility.ts
+  function expansionColors(values, calm, expanding) {
+    return values.map((x, i) => {
+      if (!Number.isFinite(x)) return null;
+      const prev3 = i > 0 && Number.isFinite(values[i - 1]) ? values[i - 1] : x;
+      return x > prev3 ? expanding : calm;
+    });
+  }
+  function washedToZero(key, title, values, colors, fallback, valueTransparency, width = 1) {
+    return {
+      plots: [{ key, title, values, color: fallback, width, colors }, anchorPlot("zeroAnchor", "Zero Anchor", values.length, 0)],
+      bands: [{ key: "wash", from: key, to: "zeroAnchor", color: transp(NEUTRAL, 100), gradient: baselineGradient(values, 0, (_x, i) => colors[i] ?? fallback, valueTransparency) }]
+    };
+  }
   var atrSpec = {
     type: "average-true-range",
     title: "Average True Range",
     shortTitle: "ATR",
     overlay: false,
-    inputs: [lengthInput(14), colorInput()],
-    compute: (bars, inputs) => ({
-      plots: [{ key: "atr", title: "ATR", values: atr(bars, num3(inputs, "length", 14)), color: str3(inputs, "color", SERIES_LINE), width: 2 }]
-    })
+    inputs: [
+      lengthInput(14, "length", "Length", 5e3, "Number of bars used to average the true range."),
+      optionInput("smoothing", "Smoothing", "RMA", ["RMA", "SMA", "EMA", "WMA"], "Moving average applied to the true range. RMA is Wilder's original smoothing used by the classic ATR."),
+      colorInput(NEUTRAL, "ATR Line", "color", "Color of the ATR line while volatility contracts or holds flat."),
+      colorInput(WARNING, "Expanding", "expandColor", "Color of the ATR line while it rises \u2014 volatility expanding bar to bar.")
+    ],
+    compute: (bars, inputs) => {
+      const len = num3(inputs, "length", 14);
+      const tr = trueRange(bars);
+      const kind = str3(inputs, "smoothing", "RMA");
+      const values = kind === "SMA" ? sma(tr, len) : kind === "EMA" ? ema(tr, len) : kind === "WMA" ? wma(tr, len) : rma(tr, len);
+      const calm = str3(inputs, "color", NEUTRAL);
+      return washedToZero("atr", "ATR", values, expansionColors(values, calm, str3(inputs, "expandColor", WARNING)), calm, 75);
+    }
   };
   var historicalVolatility = {
     type: "historical-volatility",
@@ -42295,14 +43346,23 @@ ${overlayScrollbarCss(".vela-sd-pane")}
     shortTitle: "HV",
     overlay: false,
     inputs: [
-      lengthInput(10),
-      { key: "annual", title: "Periods per year", type: "int", defval: 365, min: 1, max: 1e5, step: 1, tooltip: "Annualization factor (365 for daily crypto bars, 252 for stock sessions)" },
-      colorInput()
+      { ...lengthInput(10, "length", "Length", 5e3, "Lookback window in bars for the standard deviation of close-to-close log returns."), min: 2 },
+      boolInput("annualize", "Annualize", true, void 0, "Scale the per-bar volatility to an annual figure by multiplying by the square root of the periods per year."),
+      intInput("periodsPerYear", "Periods Per Year", 252, 1, 1e5, "Number of periods in a year used for annualization: 252 for daily bars, 52 for weekly, 12 for monthly."),
+      colorInput(WARNING, "Volatility Line", "color", "Color of the line at its recent highs; it fades toward grey as volatility contracts.")
     ],
     compute: (bars, inputs) => {
-      const logReturns = map(change(map(closes(bars), Math.log)), (x) => x);
-      const values = map(stdev(logReturns, num3(inputs, "length", 10)), (x) => x * Math.sqrt(num3(inputs, "annual", 365)) * 100);
-      return { plots: [{ key: "hv", title: "HV", values, color: str3(inputs, "color", SERIES_LINE), width: 2 }] };
+      const len = num3(inputs, "length", 10);
+      const logReturns = sub(map(closes(bars), Math.log), shift3(map(closes(bars), Math.log), 1));
+      const meanReturn = map(sum(logReturns, len), (s) => s / len);
+      const squaredSum = sum(map(logReturns, (r) => r * r), len);
+      const factor = bool(inputs, "annualize", true) ? Math.sqrt(num3(inputs, "periodsPerYear", 252)) : 1;
+      const values = zip(squaredSum, meanReturn, (sq, m) => Math.sqrt(Math.max(sq - len * m * m, 0) / (len - 1)) * factor * 100);
+      const low = lowest(values, 100);
+      const high = highest(values, 100);
+      const accent = str3(inputs, "color", WARNING);
+      const colors = values.map((x, i) => Number.isFinite(x) ? gradient(x, low[i] ?? 0, high[i] ?? 0, NEUTRAL, accent) : null);
+      return washedToZero("hv", "Historical Volatility", values, colors, accent, 75, 2);
     }
   };
   var chaikinVolatility = {
@@ -42310,13 +43370,26 @@ ${overlayScrollbarCss(".vela-sd-pane")}
     title: "Chaikin Volatility",
     shortTitle: "CHV",
     overlay: false,
-    inputs: [lengthInput(10, "emaLength", "EMA length"), lengthInput(10, "rocLength", "RoC length"), colorInput()],
+    inputs: [
+      lengthInput(10, "emaLength", "EMA Length", 5e3, "Length of the exponential moving average applied to the bar high-low range."),
+      lengthInput(10, "rocLength", "ROC Length", 5e3, "Number of bars used for the rate of change of the smoothed high-low range."),
+      colorInput(NEUTRAL, "CHV Color", "color", "Color of the Chaikin Volatility line."),
+      colorInput(WARNING, "Expansion", "expansionColor", "Line and fill color while the reading is above zero \u2014 the smoothed range is wider than it was ROC Length bars ago.")
+    ],
     compute: (bars, inputs) => {
       const range = ema(sub(highs(bars), lows(bars)), num3(inputs, "emaLength", 10));
-      return {
-        plots: [{ key: "cv", title: "Chaikin Vol", values: roc(range, num3(inputs, "rocLength", 10)), color: str3(inputs, "color", SERIES_LINE), width: 2 }],
-        levels: [{ key: "zero", price: 0, color: NEUTRAL }]
-      };
+      const prior = shift3(range, num3(inputs, "rocLength", 10));
+      const values = zip(range, prior, (r, p) => p === 0 ? Number.NaN : 100 * (r - p) / p);
+      const calm = str3(inputs, "color", NEUTRAL);
+      const expansion = str3(inputs, "expansionColor", WARNING);
+      return centeredOscillator({
+        key: "chv",
+        title: "Chaikin Volatility",
+        values,
+        // Only expansion is a state worth accenting; contraction stays structural grey.
+        ink: { bull: expansion, bear: calm, neutral: calm },
+        zeroInk: NEUTRAL
+      });
     }
   };
   var massIndex = {
@@ -42324,14 +43397,42 @@ ${overlayScrollbarCss(".vela-sd-pane")}
     title: "Mass Index",
     shortTitle: "MI",
     overlay: false,
-    inputs: [lengthInput(25), colorInput()],
+    inputs: [
+      lengthInput(25, "length", "Sum Length", 5e3, "Number of bars over which the single/double EMA ratio is summed."),
+      lengthInput(9, "emaLength", "EMA Length", 5e3, "Length of the single EMA of the high-low range and of its double smoothing."),
+      floatInput("setupLevel", "Setup Level", 27, 0, 1e3, 0.1, "Reversal bulge set-up level; a rise above it arms the pattern."),
+      floatInput("triggerLevel", "Trigger Level", 26.5, 0, 1e3, 0.1, "Reversal bulge trigger level; a decline below it after a set-up completes the pattern."),
+      colorInput(NEUTRAL, "Mass Index", "color", "Line color while no reversal bulge is armed."),
+      colorInput(WARNING, "Armed", "armedColor", "Line color from the rise above the setup level until the decline below the trigger level."),
+      colorInput(NEUTRAL, "Levels", "levelsColor", "Reversal bulge levels color.")
+    ],
     compute: (bars, inputs) => {
-      const range = sub(highs(bars), lows(bars));
-      const single = ema(range, 9);
-      const ratio = zip(single, ema(single, 9), (a, b) => b === 0 ? Number.NaN : a / b);
+      const emaLen = num3(inputs, "emaLength", 9);
+      const single = ema(sub(highs(bars), lows(bars)), emaLen);
+      const ratio = zip(single, ema(single, emaLen), (a, b) => b === 0 ? 1 : a / b);
+      const values = sum(ratio, num3(inputs, "length", 25));
+      const setup = num3(inputs, "setupLevel", 27);
+      const trigger = num3(inputs, "triggerLevel", 26.5);
+      const calm = str3(inputs, "color", NEUTRAL);
+      const armedInk = str3(inputs, "armedColor", WARNING);
+      const levelInk = str3(inputs, "levelsColor", NEUTRAL);
+      let armed = false;
+      const colors = values.map((x) => {
+        if (!Number.isFinite(x)) return null;
+        armed = x > setup ? true : x < trigger ? false : armed;
+        return armed ? armedInk : calm;
+      });
       return {
-        plots: [{ key: "mi", title: "Mass Index", values: sum(ratio, num3(inputs, "length", 25)), color: str3(inputs, "color", SERIES_LINE), width: 2 }],
-        levels: [{ key: "reversal", price: 27, color: NEUTRAL, lineStyle: "dotted" }]
+        plots: [
+          { key: "mi", title: "Mass Index", values, color: calm, colors },
+          anchorPlot("setupAnchor", "Setup Anchor", values.length, setup),
+          anchorPlot("triggerAnchor", "Trigger Anchor", values.length, trigger)
+        ],
+        bands: [{ key: "bulge", from: "setupAnchor", to: "triggerAnchor", color: transp(armedInk, 90) }],
+        levels: [
+          { key: "setup", price: setup, color: levelInk, lineStyle: "dashed", title: "Setup Level" },
+          { key: "trigger", price: trigger, color: levelInk, lineStyle: "dashed", title: "Trigger Level" }
+        ]
       };
     }
   };
@@ -42340,30 +43441,83 @@ ${overlayScrollbarCss(".vela-sd-pane")}
     title: "Standard Deviation",
     shortTitle: "StdDev",
     overlay: false,
-    inputs: [lengthInput(20), sourceInput(), colorInput()],
-    compute: (bars, inputs) => ({
-      plots: [
-        {
-          key: "stdev",
-          title: "StdDev",
-          values: stdev(sourceValues(bars, str3(inputs, "source", "Close")), num3(inputs, "length", 20)),
-          color: str3(inputs, "color", SERIES_LINE),
-          width: 2
-        }
-      ]
-    })
+    inputs: [
+      lengthInput(20, "length", "Length", 5e3, "Number of bars used to compute the standard deviation."),
+      sourceInput("Close", "source", "Source", "Price series the standard deviation is calculated on."),
+      colorInput(NEUTRAL, "Standard Deviation", "color", "Line color while volatility contracts or holds flat."),
+      colorInput(WARNING, "Expanding", "expandColor", "Line and fill color while volatility expands bar to bar.")
+    ],
+    compute: (bars, inputs) => {
+      const values = stdev(sourceValues(bars, str3(inputs, "source", "Close")), num3(inputs, "length", 20));
+      const calm = str3(inputs, "color", NEUTRAL);
+      return washedToZero("stdev", "Standard Deviation", values, expansionColors(values, calm, str3(inputs, "expandColor", WARNING)), calm, 80);
+    }
   };
   var ulcerIndex = {
     type: "ulcer-index",
     title: "Ulcer Index",
     overlay: false,
-    inputs: [lengthInput(14), colorInput()],
+    inputs: [
+      { ...lengthInput(14, "length", "Length", 500, "Lookback window. At each bar the percentage drawdown from the window's running maximum is squared; the squares are averaged and the root taken."), min: 2 },
+      sourceInput("Close", "source", "Source", "Price series the Ulcer Index is computed on. Close is the standard choice."),
+      floatInput("threshold", "Alert Threshold", 5, 0, 1e3, 0.25, "Reference level drawn as a dashed line. The index scales with the instrument's volatility and the window length, so set it relative to its own history."),
+      colorInput(NEUTRAL, "Ulcer Index", "color", "Color of the index near zero; it blends toward the stress color as the reading approaches the threshold."),
+      colorInput(BEARISH, "Stress", "stressColor", "Color of the index at and beyond the alert threshold."),
+      boolInput("gradientFill", "Gradient Fill", true, STYLE, "Vertical gradient between zero and the Ulcer Index, fully transparent at zero."),
+      boolInput("showDrawdown", "Drawdown %", false, STYLE, "Plot the current percentage drawdown from the window high as columns below zero \u2014 the raw ingredient the index averages."),
+      colorInput(transp(BEARISH, 50), "Drawdown Color", "drawdownColor", "Color of the drawdown columns."),
+      colorInput(NEUTRAL, "Threshold", "thresholdColor", "Color of the alert threshold line.")
+    ],
     compute: (bars, inputs) => {
       const len = num3(inputs, "length", 14);
-      const c = closes(bars);
-      const drawdown = zip(c, highest(c, len), (x, h) => h === 0 ? 0 : 100 * (x - h) / h);
-      const values = map(sma(map(drawdown, (d) => d * d), len), Math.sqrt);
-      return { plots: [{ key: "ui", title: "Ulcer", values, color: str3(inputs, "color", SERIES_LINE), width: 2 }] };
+      const src = sourceValues(bars, str3(inputs, "source", "Close"));
+      const n = src.length;
+      const values = new Array(n).fill(Number.NaN);
+      const drawdown = new Array(n).fill(Number.NaN);
+      for (let i = len - 1; i < n; i++) {
+        let runMax = Number.NaN;
+        let sumSq = 0;
+        let valid = true;
+        let last2 = Number.NaN;
+        for (let k = i - len + 1; k <= i; k++) {
+          const price = src[k];
+          if (!Number.isFinite(price)) {
+            valid = false;
+            break;
+          }
+          runMax = Number.isFinite(runMax) ? Math.max(runMax, price) : price;
+          if (runMax <= 0) {
+            valid = false;
+            break;
+          }
+          last2 = 100 * (price - runMax) / runMax;
+          sumSq += last2 * last2;
+        }
+        if (!valid) continue;
+        values[i] = Math.sqrt(sumSq / len);
+        drawdown[i] = last2;
+      }
+      const calm = str3(inputs, "color", NEUTRAL);
+      const stress = str3(inputs, "stressColor", BEARISH);
+      const threshold = num3(inputs, "threshold", 5);
+      const colors = values.map((x) => Number.isFinite(x) ? threshold > 0 ? gradient(x, 0, threshold, calm, stress) : stress : null);
+      const plots = [{ key: "ui", title: "Ulcer Index", values, color: calm, colors }];
+      const bands = [];
+      if (bool(inputs, "gradientFill", true)) {
+        plots.push(anchorPlot("zeroAnchor", "Zero Base", n, 0));
+        bands.push({ key: "wash", from: "ui", to: "zeroAnchor", color: transp(NEUTRAL, 100), gradient: baselineGradient(values, 0, (_x, i) => colors[i] ?? calm) });
+      }
+      if (bool(inputs, "showDrawdown", false)) {
+        plots.push({ key: "dd", title: "Drawdown %", values: drawdown, kind: "columns", color: str3(inputs, "drawdownColor", transp(BEARISH, 50)), base: 0 });
+      }
+      return {
+        plots,
+        bands,
+        levels: [
+          { key: "zero", price: 0, color: transp(NEUTRAL, 50), lineStyle: "dotted", title: "Zero Level" },
+          { key: "threshold", price: threshold, color: str3(inputs, "thresholdColor", NEUTRAL), lineStyle: "dashed", title: "Alert Threshold" }
+        ]
+      };
     }
   };
   var choppiness = {
@@ -42371,19 +43525,33 @@ ${overlayScrollbarCss(".vela-sd-pane")}
     title: "Choppiness Index",
     shortTitle: "CHOP",
     overlay: false,
-    inputs: [lengthInput(14), colorInput()],
+    inputs: [
+      { ...lengthInput(14, "length", "Length", 5e3, "Number of bars used to sum true ranges and to measure the highest high \u2212 lowest low range."), min: 2 },
+      floatInput("upperBand", "Upper Band", 61.8, 0, 100, 0.1, "Readings above this level indicate a choppy, range-bound market."),
+      floatInput("lowerBand", "Lower Band", 38.2, 0, 100, 0.1, "Readings below this level indicate a strong trend."),
+      colorInput(NEUTRAL, "CHOP Line", "color", "Color of the Choppiness Index line."),
+      colorInput(BULLISH, "Trending", "trendingColor", "Line, fill and zone color toward and below the lower band \u2014 a trending market."),
+      colorInput(BEARISH, "Choppy", "choppyColor", "Line, fill and zone color toward and above the upper band \u2014 a choppy, range-bound market."),
+      colorInput(transp(NEUTRAL, 90), "Band Fill", "fillColor", "Fill color of the zone between the upper and lower bands.")
+    ],
     compute: (bars, inputs) => {
       const len = num3(inputs, "length", 14);
       const trSum = sum(trueRange(bars), len);
       const span = zip(highest(highs(bars), len), lowest(lows(bars), len), (h, l) => h - l);
       const values = zip(trSum, span, (t, s) => s > 0 && t > 0 ? 100 * Math.log10(t / s) / Math.log10(len) : Number.NaN);
-      return {
-        plots: [{ key: "chop", title: "CHOP", values, color: str3(inputs, "color", SERIES_LINE), width: 2 }],
-        levels: [
-          { key: "upper", price: 61.8, color: NEUTRAL },
-          { key: "lower", price: 38.2, color: NEUTRAL }
-        ]
-      };
+      return boundedOscillator({
+        key: "chop",
+        title: "CHOP",
+        values,
+        scale: { top: 100, bottom: 0 },
+        overbought: num3(inputs, "upperBand", 61.8),
+        oversold: num3(inputs, "lowerBand", 38.2),
+        ink: { low: str3(inputs, "trendingColor", BULLISH), mid: str3(inputs, "color", NEUTRAL), high: str3(inputs, "choppyColor", BEARISH) },
+        levelInk: NEUTRAL,
+        bandFill: str3(inputs, "fillColor", transp(NEUTRAL, 90)),
+        midpointWash: true,
+        levelTitles: { overbought: "Upper Band", oversold: "Lower Band" }
+      });
     }
   };
   var volatilitySpecs = [atrSpec, historicalVolatility, chaikinVolatility, massIndex, standardDeviation, ulcerIndex, choppiness];
@@ -42396,17 +43564,85 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       return (2 * b.close - b.high - b.low) / (b.high - b.low) * b.volume;
     });
   }
+  function slopeColors2(values, bull, bear, flat) {
+    return values.map((x, i) => {
+      if (!Number.isFinite(x)) return null;
+      const prev3 = i > 0 ? values[i - 1] : Number.NaN;
+      if (!Number.isFinite(prev3)) return flat;
+      return x > prev3 ? bull : x < prev3 ? bear : flat;
+    });
+  }
+  function volumeIndex(bars, src, base, when) {
+    const out = new Array(bars.length).fill(Number.NaN);
+    let index = base;
+    for (let i = 0; i < bars.length; i++) {
+      const v = bars[i].volume;
+      const pv = i > 0 ? bars[i - 1].volume : null;
+      const prev3 = i > 0 ? src[i - 1] : Number.NaN;
+      const active = v != null && pv != null && Number.isFinite(v) && Number.isFinite(pv) && when(v, pv);
+      if (active && Number.isFinite(prev3) && prev3 !== 0) index *= 1 + (src[i] - prev3) / prev3;
+      out[i] = index;
+    }
+    return out;
+  }
+  function regimeIndex(key, title, values, signal, ink, showSignal, gradientFill, singleColor = false) {
+    const inkOf = (i) => {
+      const s = signal[i];
+      const x = values[i];
+      if (singleColor || !Number.isFinite(s)) return ink.neutral;
+      return x > s ? ink.bull : x < s ? ink.bear : ink.neutral;
+    };
+    const plots = [
+      {
+        key: "signal",
+        title: "Signal EMA",
+        values: signal,
+        color: ink.signal,
+        ...showSignal ? {} : { display: { pane: false } }
+      },
+      { key, title, values, color: ink.neutral, width: 2, colors: values.map((x, i) => Number.isFinite(x) ? inkOf(i) : null) }
+    ];
+    const bands = gradientFill ? [
+      {
+        key: "regime",
+        from: key,
+        to: "signal",
+        color: transp(NEUTRAL, 100),
+        gradient: values.map((x, i) => {
+          const s = signal[i];
+          if (!Number.isFinite(x) || !Number.isFinite(s)) return null;
+          const above = x > s;
+          const c = above ? ink.bull : ink.bear;
+          return { topValue: Math.max(x, s), bottomValue: Math.min(x, s), topColor: transp(c, above ? 50 : 100), bottomColor: transp(c, above ? 100 : 50) };
+        })
+      }
+    ] : [];
+    return { plots, bands };
+  }
   var obv = {
     type: "on-balance-volume",
     title: "On Balance Volume",
     shortTitle: "OBV",
     overlay: false,
-    inputs: [colorInput()],
+    inputs: [
+      boolInput("smoothing", "Smoothing MA", false, SETTINGS, "Display a moving average of OBV to act as a smoothing/signal line."),
+      optionInput("maType", "MA Type", "SMA", ["SMA", "EMA", "WMA", "RMA (SMMA)"], "Moving average type used for the smoothing MA."),
+      lengthInput(20, "maLength", "MA Length", 5e3, "Number of bars used for the smoothing MA."),
+      colorInput(INFO, "OBV", "color", "Color of the OBV line."),
+      colorInput(WARNING, "Smoothing MA", "maColor", "Color of the smoothing MA line.")
+    ],
     compute: (bars, inputs) => {
       const vol = volumes(bars);
       const d = change(closes(bars));
-      const signed3 = zip(vol, d, (v, x) => x > 0 ? v : x < 0 ? -v : 0);
-      return { plots: [{ key: "obv", title: "OBV", values: cumSum(signed3), color: str3(inputs, "color", SERIES_LINE), width: 2 }] };
+      const values = cumSum(zip(vol, d, (v, x) => x > 0 ? v : x < 0 ? -v : 0));
+      const plots = [{ key: "obv", title: "OBV", values, color: str3(inputs, "color", INFO) }];
+      if (bool(inputs, "smoothing", false)) {
+        const len = num3(inputs, "maLength", 20);
+        const kind = str3(inputs, "maType", "SMA");
+        const ma = kind === "EMA" ? ema(values, len) : kind === "WMA" ? wma(values, len) : kind === "RMA (SMMA)" ? rma(values, len) : sma(values, len);
+        plots.push({ key: "ma", title: "Smoothing MA", values: ma, color: str3(inputs, "maColor", WARNING) });
+      }
+      return { plots };
     }
   };
   var accDist = {
@@ -42414,24 +43650,50 @@ ${overlayScrollbarCss(".vela-sd-pane")}
     title: "Accumulation / Distribution",
     shortTitle: "A/D",
     overlay: false,
-    inputs: [colorInput()],
-    compute: (bars, inputs) => ({
-      plots: [{ key: "ad", title: "A/D", values: cumSum(moneyFlowVolume(bars)), color: str3(inputs, "color", SERIES_LINE), width: 2 }]
-    })
+    inputs: [
+      boolInput("slopeColoring", "Slope Coloring", true, STYLE, "Color the line by its slope \u2014 bullish while rising (accumulation), bearish while falling (distribution)."),
+      colorInput(NEUTRAL, "A/D Line", "color", "Color of the line when slope coloring is disabled or the line is flat."),
+      colorInput(BULLISH, "Rising", "bullColor", "Line color while the A/D Line rises."),
+      colorInput(BEARISH, "Falling", "bearColor", "Line color while the A/D Line falls.")
+    ],
+    compute: (bars, inputs) => {
+      const values = cumSum(moneyFlowVolume(bars));
+      const flat = str3(inputs, "color", NEUTRAL);
+      return {
+        plots: [
+          {
+            key: "ad",
+            title: "A/D",
+            values,
+            color: flat,
+            ...bool(inputs, "slopeColoring", true) ? { colors: slopeColors2(values, str3(inputs, "bullColor", BULLISH), str3(inputs, "bearColor", BEARISH), flat) } : {}
+          }
+        ]
+      };
+    }
   };
   var cmf = {
     type: "chaikin-money-flow",
     title: "Chaikin Money Flow",
     shortTitle: "CMF",
     overlay: false,
-    inputs: [lengthInput(20), colorInput()],
+    inputs: [
+      lengthInput(20, "length", "Length", 5e3, "Lookback length over which money flow volume and volume are summed."),
+      colorInput(NEUTRAL, "CMF Line", "color", "Color of the Chaikin Money Flow line."),
+      colorInput(BULLISH, "Bullish", "bullColor", "Line and fill color while the CMF reads above zero (net money flowing in)."),
+      colorInput(BEARISH, "Bearish", "bearColor", "Line and fill color while the CMF reads below zero (net money flowing out)."),
+      colorInput(NEUTRAL, "Zero Line", "zeroColor", "Color of the zero reference line.")
+    ],
     compute: (bars, inputs) => {
       const len = num3(inputs, "length", 20);
       const values = zip(sum(moneyFlowVolume(bars), len), sum(volumes(bars), len), (m, v) => v === 0 ? 0 : m / v);
-      return {
-        plots: [{ key: "cmf", title: "CMF", values, color: str3(inputs, "color", SERIES_LINE), width: 2 }],
-        levels: [{ key: "zero", price: 0, color: NEUTRAL }]
-      };
+      return centeredOscillator({
+        key: "cmf",
+        title: "CMF",
+        values,
+        ink: { bull: str3(inputs, "bullColor", BULLISH), bear: str3(inputs, "bearColor", BEARISH), neutral: str3(inputs, "color", NEUTRAL) },
+        zeroInk: str3(inputs, "zeroColor", NEUTRAL)
+      });
     }
   };
   var chaikinOscillator = {
@@ -42439,14 +43701,23 @@ ${overlayScrollbarCss(".vela-sd-pane")}
     title: "Chaikin Oscillator",
     shortTitle: "Chaikin Osc",
     overlay: false,
-    inputs: [lengthInput(3, "fastLength", "Fast length"), lengthInput(10, "slowLength", "Slow length"), colorInput()],
+    inputs: [
+      lengthInput(3, "fastLength", "Fast Length", 5e3, "Length of the fast EMA applied to the accumulation/distribution line."),
+      lengthInput(10, "slowLength", "Slow Length", 5e3, "Length of the slow EMA applied to the accumulation/distribution line."),
+      colorInput(NEUTRAL, "Oscillator", "color", "Color of the Chaikin Oscillator line."),
+      colorInput(BULLISH, "Bullish", "bullColor", "Line and fill color while the oscillator reads above zero (accumulation)."),
+      colorInput(BEARISH, "Bearish", "bearColor", "Line and fill color while the oscillator reads below zero (distribution).")
+    ],
     compute: (bars, inputs) => {
       const ad = cumSum(moneyFlowVolume(bars));
       const values = sub(ema(ad, num3(inputs, "fastLength", 3)), ema(ad, num3(inputs, "slowLength", 10)));
-      return {
-        plots: [{ key: "co", title: "Chaikin Osc", values, color: str3(inputs, "color", SERIES_LINE), width: 2 }],
-        levels: [{ key: "zero", price: 0, color: NEUTRAL }]
-      };
+      return centeredOscillator({
+        key: "co",
+        title: "Chaikin Oscillator",
+        values,
+        ink: { bull: str3(inputs, "bullColor", BULLISH), bear: str3(inputs, "bearColor", BEARISH), neutral: str3(inputs, "color", NEUTRAL) },
+        zeroInk: NEUTRAL
+      });
     }
   };
   var eom = {
@@ -42454,20 +43725,28 @@ ${overlayScrollbarCss(".vela-sd-pane")}
     title: "Ease of Movement",
     shortTitle: "EOM",
     overlay: false,
-    inputs: [lengthInput(14), { key: "divisor", title: "Divisor", type: "int", defval: 1e4, min: 1, max: 1e9, step: 1 }, colorInput()],
+    inputs: [
+      lengthInput(14, "length", "Length", 5e3, "Number of bars in the simple moving average smoothing the 1-bar Ease of Movement values."),
+      intInput("divisor", "Divisor", 1e4, 1, 1e9, "Volume scaling constant of the box ratio; larger values scale the oscillator up. 10000 is the conventional default."),
+      colorInput(NEUTRAL, "EOM Line", "color", "Color of the line when it sits exactly at zero."),
+      colorInput(BULLISH, "Above Zero", "bullColor", "Color of the line and fill while Ease of Movement is positive."),
+      colorInput(BEARISH, "Below Zero", "bearColor", "Color of the line and fill while Ease of Movement is negative.")
+    ],
     compute: (bars, inputs) => {
       const div = num3(inputs, "divisor", 1e4);
-      const hl2 = sourceValues(bars, "HL2");
-      const move = change(hl2);
+      const move = change(sourceValues(bars, "HL2"));
       const raw = bars.map((b, i) => {
         const m = move[i];
-        if (b.volume == null || !Number.isFinite(b.volume) || b.volume === 0 || !Number.isFinite(m)) return Number.NaN;
-        return div * m * (b.high - b.low) / b.volume;
+        if (b.volume == null || !Number.isFinite(b.volume) || !Number.isFinite(m)) return Number.NaN;
+        return b.volume === 0 ? 0 : div * m * (b.high - b.low) / b.volume;
+      });
+      return centeredOscillator({
+        key: "eom",
+        title: "EOM",
+        values: sma(raw, num3(inputs, "length", 14)),
+        ink: { bull: str3(inputs, "bullColor", BULLISH), bear: str3(inputs, "bearColor", BEARISH), neutral: str3(inputs, "color", NEUTRAL) },
+        zeroInk: NEUTRAL
       });
-      return {
-        plots: [{ key: "eom", title: "EOM", values: sma(raw, num3(inputs, "length", 14)), color: str3(inputs, "color", SERIES_LINE), width: 2 }],
-        levels: [{ key: "zero", price: 0, color: NEUTRAL }]
-      };
     }
   };
   var forceIndex = {
@@ -42475,13 +43754,24 @@ ${overlayScrollbarCss(".vela-sd-pane")}
     title: "Force Index",
     shortTitle: "FI",
     overlay: false,
-    inputs: [lengthInput(13), colorInput()],
+    inputs: [
+      lengthInput(13, "length", "Length", 5e3, "EMA length applied to the raw 1-bar force index, (close \u2212 close[1]) \xD7 volume. Elder used 13 for the intermediate trend and 2 for short-term timing."),
+      colorInput(BULLISH, "Force Index", "color", "Color of the line while above zero (buying pressure)."),
+      colorInput(BEARISH, "Bearish", "bearColor", "Color of the line while below zero (selling pressure).")
+    ],
     compute: (bars, inputs) => {
       const raw = zip(change(closes(bars)), volumes(bars), (d, v) => d * v);
-      return {
-        plots: [{ key: "force", title: "Force", values: ema(raw, num3(inputs, "length", 13)), color: str3(inputs, "color", SERIES_LINE), width: 2 }],
-        levels: [{ key: "zero", price: 0, color: NEUTRAL }]
-      };
+      const bull = str3(inputs, "color", BULLISH);
+      return centeredOscillator({
+        key: "force",
+        title: "Force Index",
+        values: ema(raw, num3(inputs, "length", 13)),
+        // The reference reads an exact zero as buying pressure, so neutral shares the bull ink.
+        ink: { bull, bear: str3(inputs, "bearColor", BEARISH), neutral: bull },
+        zeroInk: NEUTRAL,
+        width: 2,
+        valueTransparency: 60
+      });
     }
   };
   var klinger = {
@@ -42489,19 +43779,44 @@ ${overlayScrollbarCss(".vela-sd-pane")}
     title: "Klinger Oscillator",
     shortTitle: "KVO",
     overlay: false,
-    inputs: [lengthInput(34, "fastLength", "Fast length"), lengthInput(55, "slowLength", "Slow length"), lengthInput(13, "signalLength", "Signal length")],
+    inputs: [
+      lengthInput(34, "fastLength", "Fast Length", 5e3, "Length of the fast EMA applied to the volume force."),
+      lengthInput(55, "slowLength", "Slow Length", 5e3, "Length of the slow EMA applied to the volume force."),
+      lengthInput(13, "signalLength", "Signal Length", 500, "Length of the EMA applied to the oscillator to obtain the signal line."),
+      colorInput(BULLISH, "Bullish", "color", "Color of the Klinger oscillator while above zero."),
+      colorInput(BEARISH, "Bearish", "bearColor", "Color of the Klinger oscillator while below zero."),
+      colorInput(WARNING, "Signal", "signalColor", "Color of the signal line.")
+    ],
     compute: (bars, inputs) => {
-      const hlc3 = sourceValues(bars, "HLC3");
-      const trend = change(hlc3);
-      const signedVolume = zip(volumes(bars), trend, (v, t) => t >= 0 ? v : -v);
-      const line = sub(ema(signedVolume, num3(inputs, "fastLength", 34)), ema(signedVolume, num3(inputs, "slowLength", 55)));
-      return {
-        plots: [
-          { key: "kvo", title: "KVO", values: line, color: SERIES_LINE, width: 2 },
-          { key: "signal", title: "Signal", values: ema(line, num3(inputs, "signalLength", 13)), color: WARNING }
-        ],
-        levels: [{ key: "zero", price: 0, color: NEUTRAL }]
-      };
+      const n = bars.length;
+      const force = new Array(n).fill(Number.NaN);
+      let trend = 1;
+      let prevTrend = 1;
+      let cm = 0;
+      let prevDm = 0;
+      for (let i = 0; i < n; i++) {
+        const b = bars[i];
+        const hlc = b.high + b.low + b.close;
+        const prevHlc = i > 0 ? bars[i - 1].high + bars[i - 1].low + bars[i - 1].close : hlc;
+        trend = hlc > prevHlc ? 1 : -1;
+        const dm = b.high - b.low;
+        cm = i > 0 && trend === prevTrend ? cm + dm : prevDm + dm;
+        const v = b.volume;
+        force[i] = v == null || !Number.isFinite(v) ? Number.NaN : cm === 0 ? 0 : v * Math.abs(2 * (dm / cm) - 1) * trend * 100;
+        prevTrend = trend;
+        prevDm = dm;
+      }
+      const line = sub(ema(force, num3(inputs, "fastLength", 34)), ema(force, num3(inputs, "slowLength", 55)));
+      const bull = str3(inputs, "color", BULLISH);
+      return centeredOscillator({
+        key: "kvo",
+        title: "KVO",
+        values: line,
+        ink: { bull, bear: str3(inputs, "bearColor", BEARISH), neutral: bull },
+        zeroInk: transp(NEUTRAL, 50),
+        valueTransparency: 60,
+        extraPlots: [{ key: "signal", title: "Signal", values: ema(line, num3(inputs, "signalLength", 13)), color: str3(inputs, "signalColor", WARNING) }]
+      });
     }
   };
   var mfi = {
@@ -42509,7 +43824,15 @@ ${overlayScrollbarCss(".vela-sd-pane")}
     title: "Money Flow Index",
     shortTitle: "MFI",
     overlay: false,
-    inputs: [lengthInput(14), colorInput()],
+    inputs: [
+      lengthInput(14, "length", "Length", 5e3, "Number of bars used to sum positive and negative money flow."),
+      floatInput("overbought", "Overbought Level", 80, 0, 100, 1, "Level above which the MFI is considered overbought."),
+      floatInput("oversold", "Oversold Level", 20, 0, 100, 1, "Level below which the MFI is considered oversold."),
+      colorInput(NEUTRAL, "MFI", "color", "Color of the MFI line between the levels. Toward either level it blends into that level\u2019s color."),
+      colorInput(BEARISH, "Overbought", "overboughtColor", "Color of the line and zone shading at and above the overbought level."),
+      colorInput(BULLISH, "Oversold", "oversoldColor", "Color of the line and zone shading at and below the oversold level."),
+      colorInput(transp(NEUTRAL, 94), "OB/OS Zone Fill", "fillColor", "Fill color of the area between the overbought and oversold levels.")
+    ],
     compute: (bars, inputs) => {
       const len = num3(inputs, "length", 14);
       const tp = sourceValues(bars, "HLC3");
@@ -42517,48 +43840,57 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       const d = change(tp);
       const pos = sum(zip(rawFlow, d, (f, x) => x > 0 ? f : 0), len);
       const neg = sum(zip(rawFlow, d, (f, x) => x < 0 ? f : 0), len);
-      const values = zip(pos, neg, (p, n) => n === 0 ? 100 : 100 - 100 / (1 + p / n));
-      return {
-        plots: [{ key: "mfi", title: "MFI", values, color: str3(inputs, "color", SERIES_LINE), width: 2 }],
-        levels: [
-          { key: "upper", price: 80, color: NEUTRAL },
-          { key: "lower", price: 20, color: NEUTRAL }
-        ]
-      };
+      const values = zip(pos, neg, (p, w) => p + w > 0 ? 100 * p / (p + w) : Number.NaN);
+      return boundedOscillator({
+        key: "mfi",
+        title: "MFI",
+        values,
+        scale: { top: 100, bottom: 0 },
+        overbought: num3(inputs, "overbought", 80),
+        oversold: num3(inputs, "oversold", 20),
+        ink: { low: str3(inputs, "oversoldColor", BULLISH), mid: str3(inputs, "color", NEUTRAL), high: str3(inputs, "overboughtColor", BEARISH) },
+        levelInk: NEUTRAL,
+        zoneTransparency: 91,
+        bandFill: str3(inputs, "fillColor", transp(NEUTRAL, 94))
+      });
     }
   };
-  function volumeIndex(bars, when) {
-    const out = new Array(bars.length).fill(Number.NaN);
-    let index = 1e3;
-    let started = false;
-    for (let i = 1; i < bars.length; i++) {
-      const v = bars[i].volume;
-      const pv = bars[i - 1].volume;
-      const pc = bars[i - 1].close;
-      if (v == null || pv == null || !Number.isFinite(v) || !Number.isFinite(pv) || pc === 0) {
-        if (started) out[i] = index;
-        continue;
-      }
-      started = true;
-      if (when(v, pv)) index += (bars[i].close - pc) / pc * index;
-      out[i] = index;
-    }
-    return out;
+  function regimeStyleInputs(signalTitle) {
+    return [
+      colorInput(BULLISH, "Bullish", "bullColor", "Color of the line and gradient fill while it holds above its signal EMA."),
+      colorInput(BEARISH, "Bearish", "bearColor", "Color of the line and gradient fill while it holds below its signal EMA."),
+      colorInput(NEUTRAL, "Neutral", "neutralColor", "Color used while the signal EMA is still forming, or the line sits exactly on it."),
+      colorInput(NEUTRAL, signalTitle, "signalColor", "Color of the signal EMA overlay."),
+      boolInput("gradientFill", "Gradient Fill", true, STYLE, "Fills the gap between the line and its signal EMA with a vertical gradient \u2014 transparent at the average, strongest at the line.")
+    ];
   }
+  var NVI_POSITION = "Position vs Average";
+  var NVI_SINGLE = "Single Color";
   var nvi = {
     type: "negative-volume-index",
     title: "Negative Volume Index",
     shortTitle: "Negative Volume Index",
     overlay: false,
-    inputs: [lengthInput(255, "signalLength", "Signal length"), colorInput()],
+    inputs: [
+      floatInput("base", "Base Level", 1e3, 0.01, 1e6, 1, "Arbitrary seed of the cumulative line, conventionally 1000. The absolute level carries no information \u2014 the line is read by slope and by position against the signal EMA."),
+      boolInput("showSignal", "Signal EMA", true, SETTINGS, "Displays the conventional signal overlay. Hiding it only removes the plotted average; the regime coloring and fill still use it."),
+      lengthInput(255, "signalLength", "Signal Length", 5e3, "Length of the signal EMA. The convention is one trading year \u2014 255 sessions on daily charts."),
+      optionInput("colorMode", "Line Coloring", NVI_POSITION, [NVI_POSITION, NVI_SINGLE], "'Position vs Average' colors the line by the classic regime read; 'Single Color' draws the whole line in the neutral color."),
+      ...regimeStyleInputs("Signal EMA")
+    ],
     compute: (bars, inputs) => {
-      const line = volumeIndex(bars, (v, pv) => v < pv);
-      return {
-        plots: [
-          { key: "nvi", title: "NVI", values: line, color: str3(inputs, "color", SERIES_LINE), width: 2 },
-          { key: "signal", title: "Signal", values: ema(line, num3(inputs, "signalLength", 255)), color: WARNING }
-        ]
-      };
+      const values = volumeIndex(bars, closes(bars), num3(inputs, "base", 1e3), (v, pv) => v < pv);
+      const signal = ema(values, num3(inputs, "signalLength", 255));
+      return regimeIndex(
+        "nvi",
+        "NVI",
+        values,
+        signal,
+        { bull: str3(inputs, "bullColor", BULLISH), bear: str3(inputs, "bearColor", BEARISH), neutral: str3(inputs, "neutralColor", NEUTRAL), signal: str3(inputs, "signalColor", NEUTRAL) },
+        bool(inputs, "showSignal", true),
+        bool(inputs, "gradientFill", true),
+        str3(inputs, "colorMode", NVI_POSITION) === NVI_SINGLE
+      );
     }
   };
   var pvi = {
@@ -42566,15 +43898,26 @@ ${overlayScrollbarCss(".vela-sd-pane")}
     title: "Positive Volume Index",
     shortTitle: "Positive Volume Index",
     overlay: false,
-    inputs: [lengthInput(255, "signalLength", "Signal length"), colorInput()],
+    inputs: [
+      sourceInput("Close", "source", "Source", "Price series whose one-bar percentage change moves PVI on its active sessions."),
+      floatInput("base", "Starting Value", 1e3, 1, 1e6, 1, "Seed of the cumulative line. The absolute level carries no information, so the reads are the slope and the position against the signal EMA."),
+      boolInput("showSignal", "Signal EMA", true, SETTINGS, "Plots the long EMA of PVI that anchors the classic regime read. Hiding it keeps the regime coloring and fill, which are always measured against it."),
+      lengthInput(255, "signalLength", "Signal Length", 5e3, "Length of the signal EMA. The classic reference is a one-year average \u2014 255 trading days on daily charts."),
+      ...regimeStyleInputs("Signal Line")
+    ],
     compute: (bars, inputs) => {
-      const line = volumeIndex(bars, (v, pv) => v > pv);
-      return {
-        plots: [
-          { key: "pvi", title: "PVI", values: line, color: str3(inputs, "color", SERIES_LINE), width: 2 },
-          { key: "signal", title: "Signal", values: ema(line, num3(inputs, "signalLength", 255)), color: WARNING }
-        ]
-      };
+      const src = sourceValues(bars, str3(inputs, "source", "Close"));
+      const values = volumeIndex(bars, src, num3(inputs, "base", 1e3), (v, pv) => v > pv);
+      const signal = ema(values, num3(inputs, "signalLength", 255));
+      return regimeIndex(
+        "pvi",
+        "PVI",
+        values,
+        signal,
+        { bull: str3(inputs, "bullColor", BULLISH), bear: str3(inputs, "bearColor", BEARISH), neutral: str3(inputs, "neutralColor", NEUTRAL), signal: str3(inputs, "signalColor", NEUTRAL) },
+        bool(inputs, "showSignal", true),
+        bool(inputs, "gradientFill", true)
+      );
     }
   };
   var pvt = {
@@ -42582,7 +43925,15 @@ ${overlayScrollbarCss(".vela-sd-pane")}
     title: "Price Volume Trend",
     shortTitle: "PVT",
     overlay: false,
-    inputs: [colorInput()],
+    inputs: [
+      boolInput("showSignal", "Signal Line", false, SETTINGS, "Display a moving average of PVT acting as a signal line."),
+      optionInput("signalType", "Signal Type", "SMA", ["SMA", "EMA"], "Moving average type used for the signal line."),
+      lengthInput(21, "signalLength", "Signal Length", 5e3, "Number of bars used to compute the signal line."),
+      colorInput(NEUTRAL, "PVT Color", "color", "Color of the PVT line while it is flat."),
+      colorInput(BULLISH, "Rising", "bullColor", "Color of the PVT line while it rises bar to bar."),
+      colorInput(BEARISH, "Falling", "bearColor", "Color of the PVT line while it falls bar to bar."),
+      colorInput(WARNING, "Signal Color", "signalColor", "Color of the signal line.")
+    ],
     compute: (bars, inputs) => {
       const c = closes(bars);
       const raw = bars.map((b, i) => {
@@ -42590,7 +43941,17 @@ ${overlayScrollbarCss(".vela-sd-pane")}
         const pc = c[i - 1];
         return pc === 0 ? 0 : (c[i] - pc) / pc * b.volume;
       });
-      return { plots: [{ key: "pvt", title: "PVT", values: cumSum(raw), color: str3(inputs, "color", SERIES_LINE), width: 2 }] };
+      const values = cumSum(raw);
+      const flat = str3(inputs, "color", NEUTRAL);
+      const plots = [
+        { key: "pvt", title: "PVT", values, color: flat, width: 2, colors: slopeColors2(values, str3(inputs, "bullColor", BULLISH), str3(inputs, "bearColor", BEARISH), flat) }
+      ];
+      if (bool(inputs, "showSignal", false)) {
+        const len = num3(inputs, "signalLength", 21);
+        const signal = str3(inputs, "signalType", "SMA") === "EMA" ? ema(values, len) : sma(values, len);
+        plots.push({ key: "signal", title: "Signal", values: signal, color: str3(inputs, "signalColor", WARNING) });
+      }
+      return { plots };
     }
   };
   var volumeOscillator = {
@@ -42598,39 +43959,75 @@ ${overlayScrollbarCss(".vela-sd-pane")}
     title: "Volume Oscillator",
     shortTitle: "Vol Osc",
     overlay: false,
-    inputs: [lengthInput(5, "fastLength", "Fast length"), lengthInput(10, "slowLength", "Slow length"), colorInput()],
+    inputs: [
+      lengthInput(5, "fastLength", "Fast Length", 5e3, "Length of the fast EMA of volume."),
+      lengthInput(10, "slowLength", "Slow Length", 5e3, "Length of the slow EMA of volume."),
+      colorInput(BULLISH, "Above Zero", "color", "Color of the line and fill while it holds above zero \u2014 volume expanding."),
+      colorInput(BEARISH, "Below Zero", "bearColor", "Color of the line and fill while it holds below zero \u2014 volume contracting.")
+    ],
     compute: (bars, inputs) => {
       const vol = volumes(bars);
       const fast = ema(vol, num3(inputs, "fastLength", 5));
       const slow = ema(vol, num3(inputs, "slowLength", 10));
-      const values = zip(fast, slow, (f, s) => s === 0 ? Number.NaN : 100 * (f - s) / s);
-      return {
-        plots: [{ key: "vo", title: "Volume Osc", values, color: str3(inputs, "color", SERIES_LINE), width: 2 }],
-        levels: [{ key: "zero", price: 0, color: NEUTRAL }]
-      };
+      const values = zip(fast, slow, (f, s) => s === 0 ? 0 : 100 * (f - s) / s);
+      const bull = str3(inputs, "color", BULLISH);
+      return centeredOscillator({
+        key: "vo",
+        title: "Volume Oscillator",
+        values,
+        ink: { bull, bear: str3(inputs, "bearColor", BEARISH), neutral: bull },
+        zeroInk: NEUTRAL,
+        valueTransparency: 60
+      });
     }
   };
+  var OSCILLATOR = "Oscillator";
   var pvo = {
     type: "pvo",
     title: "Percentage Volume Oscillator",
     shortTitle: "PVO",
     overlay: false,
-    inputs: [lengthInput(12, "fastLength", "Fast length"), lengthInput(26, "slowLength", "Slow length"), lengthInput(9, "signalLength", "Signal length")],
+    inputs: [
+      { ...lengthInput(12, "fastLength", "Fast Length", 5e3, "Period of the fast EMA of volume. The conventional setting is 12."), group: OSCILLATOR },
+      { ...lengthInput(26, "slowLength", "Slow Length", 5e3, "Period of the slow EMA of volume. The PVO expresses the fast/slow spread as a percentage of this slow average."), group: OSCILLATOR },
+      { ...lengthInput(9, "signalLength", "Signal Length", 500, "Period of the EMA applied to the PVO to form the signal line."), group: OSCILLATOR },
+      colorInput(BULLISH, "Expansion Color", "color", "Color of the oscillator and fill while participation expands."),
+      colorInput(BEARISH, "Contraction Color", "bearColor", "Color of the oscillator and fill while participation contracts."),
+      colorInput(WARNING, "Signal Line", "signalColor", "Color of the signal line."),
+      colorInput(transp(NEUTRAL, 50), "Zero Line", "zeroColor", "Color of the zero reference line."),
+      boolInput("showSignal", "Show Signal Line", true, STYLE, "Plot the signal line, an EMA of the PVO."),
+      boolInput("showHistogram", "Show Histogram", true, STYLE, "Plot the difference between the PVO and its signal line as columns behind the oscillator.")
+    ],
     compute: (bars, inputs) => {
       const vol = volumes(bars);
       const fast = ema(vol, num3(inputs, "fastLength", 12));
       const slow = ema(vol, num3(inputs, "slowLength", 26));
-      const line = zip(fast, slow, (f, s) => s === 0 ? Number.NaN : 100 * (f - s) / s);
-      const signal = ema(line, num3(inputs, "signalLength", 9));
-      const hist = sub(line, signal);
-      return {
-        plots: [
-          { key: "hist", title: "Histogram", values: hist, kind: "histogram", color: BULLISH, colors: hist.map((x) => Number.isFinite(x) ? x >= 0 ? BULLISH : BEARISH : null), base: 0 },
-          { key: "pvo", title: "PVO", values: line, color: SERIES_LINE, width: 2 },
-          { key: "signal", title: "Signal", values: signal, color: WARNING }
-        ],
-        levels: [{ key: "zero", price: 0, color: NEUTRAL }]
-      };
+      const values = zip(fast, slow, (f, s) => s > 0 ? 100 * (f - s) / s : Number.NaN);
+      const signal = ema(values, num3(inputs, "signalLength", 9));
+      const expansion = str3(inputs, "color", BULLISH);
+      const contraction = str3(inputs, "bearColor", BEARISH);
+      const extraPlots = [];
+      if (bool(inputs, "showHistogram", true)) {
+        const hist = sub(values, signal);
+        extraPlots.push({
+          key: "hist",
+          title: "Histogram",
+          values: hist,
+          kind: "columns",
+          color: transp(expansion, 60),
+          colors: hist.map((x) => Number.isFinite(x) ? transp(x > 0 ? expansion : contraction, 60) : null),
+          base: 0
+        });
+      }
+      if (bool(inputs, "showSignal", true)) extraPlots.push({ key: "signal", title: "Signal", values: signal, color: str3(inputs, "signalColor", WARNING) });
+      return centeredOscillator({
+        key: "pvo",
+        title: "PVO",
+        values,
+        ink: { bull: expansion, bear: contraction, neutral: contraction },
+        zeroInk: str3(inputs, "zeroColor", transp(NEUTRAL, 50)),
+        extraPlots
+      });
     }
   };
   var vfi = {
@@ -42639,55 +44036,86 @@ ${overlayScrollbarCss(".vela-sd-pane")}
     shortTitle: "Volume Flow Indicator",
     overlay: false,
     inputs: [
-      lengthInput(130),
-      { key: "coef", title: "Cutoff coefficient", type: "float", defval: 0.2, min: 0.01, max: 10, step: 0.01 },
-      { key: "volCoef", title: "Volume cap", type: "float", defval: 2.5, min: 0.1, max: 50, step: 0.1 },
-      lengthInput(3, "smoothLength", "Smoothing length")
+      { ...lengthInput(130, "length", "Length", 5e3, "Rolling summation window, also used for the average volume that scales the result. The published default of 130 bars targets position-horizon work on daily charts."), min: 2 },
+      floatInput("coef", "Cutoff Coefficient", 0.2, 0, 10, 0.05, "Scales the volatility-based minimum change in typical price. Moves smaller than the cutoff count as noise and contribute no volume."),
+      floatInput("volCoef", "Volume Cap Multiplier", 2.5, 0.1, 50, 0.1, "Caps each bar's volume contribution at this multiple of the average volume, so a single climactic print stays bounded."),
+      { ...lengthInput(30, "volLength", "Volatility Length", 5e3, "Window of the standard deviation of the log change in typical price used to build the adaptive cutoff."), min: 2 },
+      boolInput("smooth", "Smooth VFI", true, SETTINGS, "Applies the published light smoothing \u2014 an EMA of the summed line \u2014 before plotting."),
+      lengthInput(3, "smoothLength", "Smoothing Length", 500, "Length of the smoothing EMA. The published version uses 3 bars."),
+      boolInput("showSignal", "Signal Line", true, SETTINGS, "Plots an EMA of VFI as a signal line."),
+      lengthInput(5, "signalLength", "Signal Length", 500, "Length of the signal-line EMA."),
+      colorInput(BULLISH, "Bullish", "color", "Color of the VFI line and gradient fill above the zero line \u2014 the net accumulation regime."),
+      colorInput(BEARISH, "Bearish", "bearColor", "Color of the VFI line and gradient fill below the zero line \u2014 the net distribution regime."),
+      colorInput(WARNING, "Signal Line", "signalColor", "Color of the signal line."),
+      boolInput("gradientFill", "Gradient Fill", true, STYLE, "Fills the area between the zero line and the VFI line with a vertical gradient.")
     ],
     compute: (bars, inputs) => {
       const len = num3(inputs, "length", 130);
+      const typical = sourceValues(bars, "HLC3");
+      const logChange = sub(map(typical, Math.log), shift3(map(typical, Math.log), 1));
+      const volatility = stdev(logChange, num3(inputs, "volLength", 30));
       const coef = num3(inputs, "coef", 0.2);
       const volCoef = num3(inputs, "volCoef", 2.5);
-      const typical = map(sourceValues(bars, "HLC3"), Math.log);
-      const inter = change(typical);
-      const vInter = stdev(inter, 30);
       const vol = volumes(bars);
-      const vAve = sma(vol, len);
-      const mf = change(sourceValues(bars, "HLC3"));
-      const raw = bars.map((b, i) => {
-        const cutoff = Number.isFinite(vInter[i]) ? coef * vInter[i] * b.close : Number.NaN;
+      const avgVolume = shift3(sma(vol, len), 1);
+      const typicalChange = change(typical);
+      const signed3 = bars.map((b, i) => {
+        const sd = volatility[i];
+        const m = typicalChange[i];
         const v = vol[i];
-        const ave = i > 0 ? vAve[i - 1] : Number.NaN;
-        const m = mf[i];
-        if (!Number.isFinite(cutoff) || !Number.isFinite(v) || !Number.isFinite(ave) || !Number.isFinite(m)) return Number.NaN;
-        const capped = Math.min(v, ave * volCoef);
+        if (!Number.isFinite(sd) || !Number.isFinite(m) || !Number.isFinite(v)) return Number.NaN;
+        const cutoff = coef * sd * b.close;
+        const avg = avgVolume[i];
+        const capped = Number.isFinite(avg) ? Math.min(v, avg * volCoef) : v;
         return m > cutoff ? capped : m < -cutoff ? -capped : 0;
       });
-      const values = bars.map((_, i) => {
-        const ave = i > 0 ? vAve[i - 1] : Number.NaN;
-        return Number.isFinite(ave) && ave !== 0 ? ave : Number.NaN;
+      const raw = zip(sum(signed3, len), avgVolume, (f, a) => a > 0 ? f / a : Number.NaN);
+      const values = bool(inputs, "smooth", true) ? ema(raw, num3(inputs, "smoothLength", 3)) : raw;
+      const bull = str3(inputs, "color", BULLISH);
+      const extraPlots = bool(inputs, "showSignal", true) ? [{ key: "signal", title: "Signal Line", values: ema(values, num3(inputs, "signalLength", 5)), color: str3(inputs, "signalColor", WARNING) }] : [];
+      return centeredOscillator({
+        key: "vfi",
+        title: "VFI",
+        values,
+        ink: { bull, bear: str3(inputs, "bearColor", BEARISH), neutral: str3(inputs, "bearColor", BEARISH) },
+        zeroInk: transp(NEUTRAL, 90),
+        fill: bool(inputs, "gradientFill", true),
+        extraPlots
       });
-      const flowSum = sum(raw, len);
-      const line = zip(flowSum, values, (f, a) => f / a);
-      return {
-        plots: [{ key: "vfi", title: "VFI", values: sma(line, num3(inputs, "smoothLength", 3)), color: SERIES_LINE, width: 2 }],
-        levels: [{ key: "zero", price: 0, color: NEUTRAL }]
-      };
     }
   };
+  var II_OSCILLATOR = "Normalized Oscillator (II%)";
+  var II_CUMULATIVE = "Cumulative Line";
   var intradayIntensity = {
     type: "intraday-intensity",
     title: "Intraday Intensity",
     shortTitle: "Intraday Intensity",
     overlay: false,
-    inputs: [lengthInput(21), colorInput()],
+    inputs: [
+      optionInput("mode", "Display", II_OSCILLATOR, [II_OSCILLATOR, II_CUMULATIVE], "The two published forms. The cumulative line is open-ended and read by slope against price; the normalized oscillator divides a rolling sum of intensity by the rolling sum of volume and oscillates around zero."),
+      lengthInput(21, "length", "Oscillator Length", 5e3, "Window of the rolling sums in the normalized form. The common setting is 21 bars. It has no effect on the cumulative line."),
+      colorInput(BULLISH, "Bullish", "color", "Color of positive readings, the rising cumulative line and the fill above zero \u2014 the accumulation side."),
+      colorInput(BEARISH, "Bearish", "bearColor", "Color of negative readings, the falling cumulative line and the fill below zero \u2014 the distribution side."),
+      boolInput("gradientFill", "Gradient Fill", true, STYLE, "Fills the area between the zero line and the oscillator with a vertical gradient. Applies to the normalized oscillator only.")
+    ],
     compute: (bars, inputs) => {
+      const intensity = moneyFlowVolume(bars);
+      const bull = str3(inputs, "color", BULLISH);
+      const bear = str3(inputs, "bearColor", BEARISH);
+      if (str3(inputs, "mode", II_OSCILLATOR) === II_CUMULATIVE) {
+        const values2 = cumSum(intensity);
+        return { plots: [{ key: "ii", title: "Intraday Intensity", values: values2, color: bull, colors: slopeColors2(values2, bull, bear, bull) }] };
+      }
       const len = num3(inputs, "length", 21);
-      const values = zip(sum(moneyFlowVolume(bars), len), sum(volumes(bars), len), (m, v) => v === 0 ? 0 : 100 * m / v);
-      return {
-        plots: [{ key: "ii", title: "II%", values, color: str3(inputs, "color", SERIES_LINE), width: 2 }],
-        levels: [{ key: "zero", price: 0, color: NEUTRAL }]
-      };
+      const values = zip(sum(intensity, len), sum(volumes(bars), len), (m, v) => v > 0 ? 100 * m / v : Number.NaN);
+      return centeredOscillator({
+        key: "ii",
+        title: "Intraday Intensity",
+        values,
+        ink: { bull, bear, neutral: bear },
+        zeroInk: transp(NEUTRAL, 90),
+        fill: bool(inputs, "gradientFill", true)
+      });
     }
   };
   var volumeSpecs = [
@@ -42720,15 +44148,24 @@ ${overlayScrollbarCss(".vela-sd-pane")}
     }
     return Math.floor(time / DAY_MS2);
   }
+  function barInterval(bars) {
+    if (bars.length < 2) return 0;
+    const gaps = [];
+    for (let i = 1; i < bars.length; i++) gaps.push(bars[i].time - bars[i - 1].time);
+    gaps.sort((a, b) => a - b);
+    return gaps[Math.floor(gaps.length / 2)] ?? 0;
+  }
   var parabolicSar = {
     type: "parabolic-sar",
     title: "Parabolic SAR",
     shortTitle: "SAR",
     overlay: true,
     inputs: [
-      { key: "start", title: "Start", type: "float", defval: 0.02, min: 1e-3, max: 1, step: 1e-3 },
-      { key: "increment", title: "Increment", type: "float", defval: 0.02, min: 1e-3, max: 1, step: 1e-3 },
-      { key: "maximum", title: "Max value", type: "float", defval: 0.2, min: 0.01, max: 1, step: 0.01 }
+      floatInput("start", "Start", 0.02, 0, 1, 0.01, "Initial acceleration factor applied when a new trend begins."),
+      floatInput("increment", "Increment", 0.02, 0, 1, 0.01, "Amount added to the acceleration factor each time the trend makes a new extreme point."),
+      floatInput("maximum", "Maximum", 0.2, 0.01, 1, 0.01, "Upper cap on the acceleration factor."),
+      colorInput(BULLISH, "Bullish", "bullColor", "Color of the SAR crosses while they trail below price \u2014 uptrend, the stop sits under the market."),
+      colorInput(BEARISH, "Bearish", "bearColor", "Color of the SAR crosses while they sit above price \u2014 downtrend, the stop sits over the market.")
     ],
     compute: (bars, inputs) => {
       const start = num3(inputs, "start", 0.02);
@@ -42736,7 +44173,6 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       const max2 = num3(inputs, "maximum", 0.2);
       const n = bars.length;
       const values = new Array(n).fill(Number.NaN);
-      const colors = new Array(n).fill(null);
       if (n >= 2) {
         let long = bars[1].close >= bars[0].close;
         let sar = long ? bars[0].low : bars[0].high;
@@ -42761,18 +44197,21 @@ ${overlayScrollbarCss(".vela-sd-pane")}
             af = Math.min(max2, af + inc);
           }
           values[i] = sar;
-          colors[i] = long ? BULLISH : BEARISH;
         }
       }
-      return { plots: [{ key: "sar", title: "PSAR", values, kind: "circles", color: SERIES_LINE, colors }] };
+      const bull = str3(inputs, "bullColor", BULLISH);
+      const bear = str3(inputs, "bearColor", BEARISH);
+      const colors = values.map((x, i) => Number.isFinite(x) ? x < bars[i].close ? bull : bear : null);
+      return { plots: [{ key: "sar", title: "SAR", values, kind: "cross", color: bull, colors }] };
     }
   };
-  var VWAP_BANDS_GROUP = "Bands";
-  var VWAP_STYLE = "Style";
+  var VWAP_ANCHORS = ["Session", "Week", "Month", "Quarter", "Year"];
+  var BANDS_STDEV = "Standard Deviation";
+  var BANDS_PERCENT = "Percentage";
   var VWAP_BANDS = [
-    { on: "band1", mult: "band1Mult", color: "band1Color", fill: "band1Fill", fillColor: "band1FillColor", defMult: 1, defOn: true, defColor: BULLISH },
-    { on: "band2", mult: "band2Mult", color: "band2Color", fill: "band2Fill", fillColor: "band2FillColor", defMult: 2, defOn: false, defColor: WARNING },
-    { on: "band3", mult: "band3Mult", color: "band3Color", fill: "band3Fill", fillColor: "band3FillColor", defMult: 3, defOn: false, defColor: CATEGORICAL[4] }
+    { show: "band1", mult: "band1Mult", defMult: 1, defOn: true },
+    { show: "band2", mult: "band2Mult", defMult: 2, defOn: false },
+    { show: "band3", mult: "band3Mult", defMult: 3, defOn: false }
   ];
   var vwap = {
     type: "vwap",
@@ -42780,39 +44219,36 @@ ${overlayScrollbarCss(".vela-sd-pane")}
     shortTitle: "VWAP",
     overlay: true,
     inputs: [
-      { key: "anchor", title: "Period", type: "string", defval: "Day", options: ["Day", "Week", "Month", "Quarter", "Year"], tooltip: "Where the accumulation resets (UTC periods)" },
-      sourceInput("HLC3"),
-      // Each band is one row: its toggle leads, the multiplier follows unlabeled.
+      optionInput("anchor", "Anchor Period", "Session", VWAP_ANCHORS, "Period anchoring the average. VWAP and its bands reset on the first bar of each new session, week, month, quarter or year (UTC)."),
+      sourceInput("HLC3", "source", "Source", "Price used in the volume weighted average. Typical price (HLC3) is the classic choice."),
+      optionInput("bandsMode", "Bands Mode", BANDS_STDEV, [BANDS_STDEV, BANDS_PERCENT], "Bands offset method: multiples of the volume weighted standard deviation of price around VWAP, or a percentage of the VWAP value."),
       ...VWAP_BANDS.flatMap((b, i) => [
-        { key: b.on, title: `Band ${i + 1} multiplier`, type: "bool", defval: b.defOn, inline: b.on, group: VWAP_BANDS_GROUP },
-        { key: b.mult, title: "", type: "float", defval: b.defMult, min: 0.1, max: 10, step: 0.1, inline: b.on, group: VWAP_BANDS_GROUP }
+        boolInput(b.show, `Band #${i + 1}`, b.defOn, SETTINGS, `Show the ${["first", "second", "third"][i]} band pair.`),
+        floatInput(b.mult, `Band #${i + 1} Multiplier`, b.defMult, 0, 50, 0.5, "Multiplier for this band pair, in standard deviations or percent depending on the bands mode.")
       ]),
-      { ...colorInput(INFO, "VWAP color"), group: VWAP_STYLE },
-      // One row per band: its ink, then the fill toggle with the fill's own (translucent) color.
-      ...VWAP_BANDS.flatMap((b, i) => [
-        { ...colorInput(b.defColor, `Band ${i + 1} color`, b.color), inline: b.color, group: VWAP_STYLE },
-        { key: b.fill, title: "Fill", type: "bool", defval: true, inline: b.color, group: VWAP_STYLE },
-        { ...colorInput(withAlpha2(b.defColor), "", b.fillColor), inline: b.color, group: VWAP_STYLE }
-      ])
+      boolInput("hideDwm", "Hide VWAP on 1D or Above", true, SETTINGS, "Hide the VWAP and its bands on daily and higher timeframes, where an intraday anchored VWAP is not meaningful."),
+      colorInput(BULLISH, "Bullish", "bullColor", "VWAP line color while price closes above it, and the color of the lower (support) bands."),
+      colorInput(BEARISH, "Bearish", "bearColor", "VWAP line color while price closes below it, and the color of the upper (resistance) bands."),
+      colorInput(NEUTRAL, "Bands", "bandsColor", "Deviation bands fill color."),
+      boolInput("fill", "Bands Fill", true, STYLE, "Fill the area between each visible band pair.")
     ],
     compute: (bars, inputs) => {
-      const anchor = str3(inputs, "anchor", "Day");
+      const anchor = str3(inputs, "anchor", "Session");
       const src = sourceValues(bars, str3(inputs, "source", "HLC3"));
       const n = bars.length;
+      const hidden = bool(inputs, "hideDwm", true) && barInterval(bars) >= DAY_MS2;
       const values = new Array(n).fill(Number.NaN);
-      const bands = VWAP_BANDS.filter((b) => bool(inputs, b.on, b.defOn)).map((b) => ({
+      const bands = VWAP_BANDS.filter((b) => bool(inputs, b.show, b.defOn)).map((b) => ({
         mult: Math.max(0, num3(inputs, b.mult, b.defMult)),
-        color: str3(inputs, b.color, b.defColor),
-        fill: bool(inputs, b.fill, true),
-        fillColor: str3(inputs, b.fillColor, withAlpha2(b.defColor)),
         up: new Array(n).fill(Number.NaN),
         down: new Array(n).fill(Number.NaN)
       }));
+      const percentMode = str3(inputs, "bandsMode", BANDS_STDEV) === BANDS_PERCENT;
       let period = Number.NaN;
       let cumPV = 0;
       let cumPV2 = 0;
       let cumV = 0;
-      for (let i = 0; i < n; i++) {
+      for (let i = 0; i < n && !hidden; i++) {
         const b = bars[i];
         const key = periodKey(anchor, b.time);
         if (key !== period) {
@@ -42830,38 +44266,58 @@ ${overlayScrollbarCss(".vela-sd-pane")}
         }
         if (cumV <= 0) continue;
         const mean = cumPV / cumV;
-        const sd = Math.sqrt(Math.max(0, cumPV2 / cumV - mean * mean));
+        const offset3 = percentMode ? mean / 100 : Math.sqrt(Math.max(0, cumPV2 / cumV - mean * mean));
         values[i] = mean;
         for (const band of bands) {
-          band.up[i] = mean + band.mult * sd;
-          band.down[i] = mean - band.mult * sd;
+          band.up[i] = mean + band.mult * offset3;
+          band.down[i] = mean - band.mult * offset3;
         }
       }
-      const plots = [{ key: "vwap", title: "VWAP", values, color: str3(inputs, "color", INFO), width: 2 }];
+      const bull = str3(inputs, "bullColor", BULLISH);
+      const bear = str3(inputs, "bearColor", BEARISH);
+      const fillColor = transp(str3(inputs, "bandsColor", NEUTRAL), 95);
+      const plots = [
+        { key: "vwap", title: "VWAP", values, color: bull, colors: values.map((x, i) => Number.isFinite(x) ? bars[i].close >= x ? bull : bear : null) }
+      ];
       const fills = [];
       bands.forEach((band, i) => {
         plots.push(
-          { key: `up${i}`, title: `Upper ${band.mult}\u03C3`, values: band.up, color: band.color },
-          { key: `down${i}`, title: `Lower ${band.mult}\u03C3`, values: band.down, color: band.color }
+          { key: `up${i}`, title: `Upper Band #${i + 1}`, values: band.up, color: transp(bear, 40) },
+          { key: `down${i}`, title: `Lower Band #${i + 1}`, values: band.down, color: transp(bull, 40) }
         );
-        if (band.fill) fills.push({ key: `band${i}`, from: `up${i}`, to: `down${i}`, color: band.fillColor });
+        if (bool(inputs, "fill", true)) fills.push({ key: `band${i}`, from: `up${i}`, to: `down${i}`, color: fillColor });
       });
       return { plots, bands: fills };
     }
   };
+  var PIVOT_TRADITIONAL = "Traditional";
+  var PIVOT_FIBONACCI = "Fibonacci";
+  var PIVOT_CAMARILLA = "Camarilla";
+  var PIVOT_WOODIE = "Woodie";
+  var PIVOT_AUTO = "Auto";
   var pivotPoints = {
     type: "pivot-points",
-    title: "Pivot Points",
+    title: "Pivot Points Standard",
     shortTitle: "Pivots",
     overlay: true,
-    inputs: [{ key: "anchor", title: "Period", type: "string", defval: "Day", options: ["Day", "Week", "Month"] }],
+    inputs: [
+      optionInput("kind", "Type", PIVOT_TRADITIONAL, [PIVOT_TRADITIONAL, PIVOT_FIBONACCI, PIVOT_CAMARILLA, PIVOT_WOODIE], "Formula used to calculate the levels. Traditional is the classic floor-trader method; Fibonacci projects 38.2/61.8/100% of the prior range around the pivot; Camarilla scales the prior range around the prior close; Woodie gives extra weight to the period open."),
+      optionInput("anchor", "Pivots Timeframe", PIVOT_AUTO, [PIVOT_AUTO, "Daily", "Weekly", "Monthly", "Yearly"], "Period the pivots are anchored to. 'Auto' follows the chart's bar spacing: daily pivots up to 15-minute bars, weekly on other intraday bars, monthly on daily bars, yearly above."),
+      colorInput(WARNING, "Pivot", "pivotColor", "Color of the central pivot (P) level."),
+      colorInput(BEARISH, "Resistances", "resistanceColor", "Color of the resistance (R) levels."),
+      colorInput(BULLISH, "Supports", "supportColor", "Color of the support (S) levels.")
+    ],
     compute: (bars, inputs) => {
-      const anchor = str3(inputs, "anchor", "Day");
+      const interval = barInterval(bars);
+      const requested = str3(inputs, "anchor", PIVOT_AUTO);
+      const auto = interval <= 15 * 6e4 ? "Session" : interval < DAY_MS2 ? "Week" : interval <= DAY_MS2 ? "Month" : "Year";
+      const anchor = requested === "Daily" ? "Session" : requested === "Weekly" ? "Week" : requested === "Monthly" ? "Month" : requested === "Yearly" ? "Year" : auto;
+      const kind = str3(inputs, "kind", PIVOT_TRADITIONAL);
       const aggs = /* @__PURE__ */ new Map();
       for (const b of bars) {
         const key = periodKey(anchor, b.time);
         const a = aggs.get(key);
-        if (!a) aggs.set(key, { high: b.high, low: b.low, close: b.close });
+        if (!a) aggs.set(key, { open: b.open, high: b.high, low: b.low, close: b.close });
         else {
           a.high = Math.max(a.high, b.high);
           a.low = Math.min(a.low, b.low);
@@ -42870,31 +44326,61 @@ ${overlayScrollbarCss(".vela-sd-pane")}
       }
       const n = bars.length;
       const mk = () => new Array(n).fill(Number.NaN);
-      const levels = { p: mk(), r1: mk(), s1: mk(), r2: mk(), s2: mk(), r3: mk(), s3: mk() };
+      const levels = { p: mk(), r1: mk(), s1: mk(), r2: mk(), s2: mk(), r3: mk(), s3: mk(), r4: mk(), s4: mk() };
+      let lastKey = Number.NaN;
       for (let i = 0; i < n; i++) {
-        const prev3 = aggs.get(periodKey(anchor, bars[i].time) - 1);
-        if (!prev3) continue;
-        const p = (prev3.high + prev3.low + prev3.close) / 3;
+        const key = periodKey(anchor, bars[i].time);
+        const fresh = key !== lastKey;
+        lastKey = key;
+        if (fresh) continue;
+        const prev3 = aggs.get(key - 1);
+        const curr = aggs.get(key);
+        if (!prev3 || !curr) continue;
+        const range = prev3.high - prev3.low;
+        const traditional = (prev3.high + prev3.low + prev3.close) / 3;
+        const p = kind === PIVOT_WOODIE ? (prev3.high + prev3.low + 2 * curr.open) / 4 : traditional;
         levels.p[i] = p;
-        levels.r1[i] = 2 * p - prev3.low;
-        levels.s1[i] = 2 * p - prev3.high;
-        levels.r2[i] = p + (prev3.high - prev3.low);
-        levels.s2[i] = p - (prev3.high - prev3.low);
-        levels.r3[i] = prev3.high + 2 * (p - prev3.low);
-        levels.s3[i] = prev3.low - 2 * (prev3.high - p);
-      }
-      const plot = (key, title, color) => ({ key, title, kind: "step", values: levels[key], color });
-      return {
-        plots: [
-          plot("p", "P", WARNING),
-          plot("r1", "R1", BEARISH),
-          plot("s1", "S1", BULLISH),
-          plot("r2", "R2", BEARISH),
-          plot("s2", "S2", BULLISH),
-          plot("r3", "R3", BEARISH),
-          plot("s3", "S3", BULLISH)
-        ]
-      };
+        if (kind === PIVOT_FIBONACCI) {
+          levels.r1[i] = traditional + 0.382 * range;
+          levels.s1[i] = traditional - 0.382 * range;
+          levels.r2[i] = traditional + 0.618 * range;
+          levels.s2[i] = traditional - 0.618 * range;
+          levels.r3[i] = traditional + range;
+          levels.s3[i] = traditional - range;
+        } else if (kind === PIVOT_CAMARILLA) {
+          const cam = 1.1 * range;
+          levels.r1[i] = prev3.close + cam / 12;
+          levels.s1[i] = prev3.close - cam / 12;
+          levels.r2[i] = prev3.close + cam / 6;
+          levels.s2[i] = prev3.close - cam / 6;
+          levels.r3[i] = prev3.close + cam / 4;
+          levels.s3[i] = prev3.close - cam / 4;
+          levels.r4[i] = prev3.close + cam / 2;
+          levels.s4[i] = prev3.close - cam / 2;
+        } else {
+          levels.r1[i] = 2 * p - prev3.low;
+          levels.s1[i] = 2 * p - prev3.high;
+          levels.r2[i] = p + range;
+          levels.s2[i] = p - range;
+          if (kind !== PIVOT_WOODIE) {
+            levels.r3[i] = prev3.high + 2 * (p - prev3.low);
+            levels.s3[i] = prev3.low - 2 * (prev3.high - p);
+          }
+        }
+      }
+      const resistance = str3(inputs, "resistanceColor", BEARISH);
+      const support = str3(inputs, "supportColor", BULLISH);
+      const plot = (key, title, color) => ({ key, title, values: levels[key], color });
+      const plots = [
+        plot("p", "P", str3(inputs, "pivotColor", WARNING)),
+        plot("r1", "R1", resistance),
+        plot("s1", "S1", support),
+        plot("r2", "R2", resistance),
+        plot("s2", "S2", support)
+      ];
+      if (kind !== PIVOT_WOODIE) plots.push(plot("r3", "R3", resistance), plot("s3", "S3", support));
+      if (kind === PIVOT_CAMARILLA) plots.push(plot("r4", "R4", resistance), plot("s4", "S4", support));
+      return { plots };
     }
   };
   var fiftyTwoWeek = {
@@ -42902,15 +44388,25 @@ ${overlayScrollbarCss(".vela-sd-pane")}
     title: "52 Week High/Low",
     shortTitle: "52W H/L",
     overlay: true,
-    inputs: [{ key: "weeks", title: "Weeks", type: "int", defval: 52, min: 1, max: 520, step: 1 }],
+    inputs: [
+      intInput("weeks", "Weeks", 52, 1, 520, "Length of the rolling window, in weeks."),
+      boolInput("showAllTime", "Show All-Time High/Low", false, SETTINGS, "Additionally display the all-time high and low, tracked over the symbol's full loaded history."),
+      colorInput(BULLISH, "52 Week High", "highColor", "Color of the 52 week high level."),
+      colorInput(BEARISH, "52 Week Low", "lowColor", "Color of the 52 week low level."),
+      colorInput(NEUTRAL, "All-Time High/Low", "allTimeColor", "Color of the all-time high and all-time low levels.")
+    ],
     compute: (bars, inputs) => {
       const span = num3(inputs, "weeks", 52) * 7 * DAY_MS2;
       const n = bars.length;
       const hi = new Array(n).fill(Number.NaN);
       const lo = new Array(n).fill(Number.NaN);
+      const ath = new Array(n).fill(Number.NaN);
+      const atl = new Array(n).fill(Number.NaN);
       const maxIdx = [];
       const minIdx = [];
       let from = 0;
+      let runHigh = -Infinity;
+      let runLow = Infinity;
       for (let i = 0; i < n; i++) {
         const b = bars[i];
         while (maxIdx.length > 0 && bars[maxIdx[maxIdx.length - 1]].high <= b.high) maxIdx.pop();
@@ -42922,13 +44418,20 @@ ${overlayScrollbarCss(".vela-sd-pane")}
         while (minIdx[0] < from) minIdx.shift();
         hi[i] = bars[maxIdx[0]].high;
         lo[i] = bars[minIdx[0]].low;
+        runHigh = Math.max(runHigh, b.high);
+        runLow = Math.min(runLow, b.low);
+        ath[i] = runHigh;
+        atl[i] = runLow;
+      }
+      const plots = [
+        { key: "high", title: "52 Week High", values: hi, kind: "step", color: str3(inputs, "highColor", BULLISH), width: 2 },
+        { key: "low", title: "52 Week Low", values: lo, kind: "step", color: str3(inputs, "lowColor", BEARISH), width: 2 }
+      ];
+      if (bool(inputs, "showAllTime", false)) {
+        const ink = str3(inputs, "allTimeColor", NEUTRAL);
+        plots.push({ key: "ath", title: "All-Time High", values: ath, kind: "step", color: ink }, { key: "atl", title: "All-Time Low", values: atl, kind: "step", color: ink });
       }
-      return {
-        plots: [
-          { key: "high", title: "52W high", values: hi, kind: "step", color: BULLISH },
-          { key: "low", title: "52W low", values: lo, kind: "step", color: BEARISH }
-        ]
-      };
+      return { plots };
     }
   };
   var zigzag = {
@@ -42936,9 +44439,11 @@ ${overlayScrollbarCss(".vela-sd-pane")}
     title: "ZigZag",
     overlay: true,
     inputs: [
-      { key: "deviation", title: "Deviation %", type: "float", defval: 5, min: 0.01, max: 100, step: 0.1 },
-      { key: "depth", title: "Depth", type: "int", defval: 10, min: 1, max: 500, step: 1 },
-      colorInput()
+      floatInput("deviation", "Deviation (%)", 5, 0.01, 100, 0.1, "Minimum reversal from the leg extreme, as a percentage of that extreme, required to confirm a new pivot."),
+      { ...intInput("depth", "Depth", 10, 2, 500, "Minimum number of bars required between two consecutive pivots.") },
+      colorInput(BULLISH, "Up Leg", "bullColor", "Color of rising zigzag segments."),
+      colorInput(BEARISH, "Down Leg", "bearColor", "Color of falling zigzag segments."),
+      { key: "lineWidth", title: "Width", type: "int", defval: 2, min: 1, max: 10, step: 1, group: STYLE, tooltip: "Width of the zigzag segments." }
     ],
     compute: (bars, inputs) => {
       const dev = num3(inputs, "deviation", 5) / 100;
@@ -42951,14 +44456,14 @@ ${overlayScrollbarCss(".vela-sd-pane")}
           const b = bars[i];
           if (up) {
             if (b.high >= ext.price) ext = { i, price: b.high };
-            else if (b.low <= ext.price * (1 - dev) && i - (pivots[pivots.length - 1]?.i ?? -depth) >= depth) {
+            else if (b.low <= ext.price * (1 - dev) && ext.i - (pivots[pivots.length - 1]?.i ?? -depth) >= depth) {
               pivots.push(ext);
               up = false;
               ext = { i, price: b.low };
             }
           } else if (b.low <= ext.price) {
             ext = { i, price: b.low };
-          } else if (b.high >= ext.price * (1 + dev) && i - (pivots[pivots.length - 1]?.i ?? -depth) >= depth) {
+          } else if (b.high >= ext.price * (1 + dev) && ext.i - (pivots[pivots.length - 1]?.i ?? -depth) >= depth) {
             pivots.push(ext);
             up = true;
             ext = { i, price: b.high };
@@ -42966,22 +44471,29 @@ ${overlayScrollbarCss(".vela-sd-pane")}
         }
         pivots.push(ext);
       }
-      return {
-        plots: [],
-        polylines: [
-          {
-            key: "zigzag",
-            points: pivots.map((p) => ({ xloc: "bar_time", x: bars[p.i].time, price: p.price })),
-            curved: false,
-            closed: false,
-            lineColor: str3(inputs, "color", SERIES_LINE),
-            lineWidth: 2,
-            lineStyle: "solid",
-            arrowLeft: false,
-            arrowRight: false
-          }
-        ]
-      };
+      const bull = str3(inputs, "bullColor", BULLISH);
+      const bear = str3(inputs, "bearColor", BEARISH);
+      const width = num3(inputs, "lineWidth", 2);
+      const polylines = [];
+      for (let k = 1; k < pivots.length; k++) {
+        const a = pivots[k - 1];
+        const b = pivots[k];
+        polylines.push({
+          key: `leg${k}`,
+          points: [
+            { xloc: "bar_time", x: bars[a.i].time, price: a.price },
+            { xloc: "bar_time", x: bars[b.i].time, price: b.price }
+          ],
+          curved: false,
+          closed: false,
+          lineColor: b.price >= a.price ? bull : bear,
+          lineWidth: width,
+          lineStyle: "solid",
+          arrowLeft: false,
+          arrowRight: false
+        });
+      }
+      return { plots: [], polylines };
     }
   };
   var williamsFractal = {
@@ -42989,10 +44501,16 @@ ${overlayScrollbarCss(".vela-sd-pane")}
     title: "Williams Fractal",
     shortTitle: "Fractals",
     overlay: true,
-    inputs: [{ key: "periods", title: "Periods", type: "int", defval: 2, min: 1, max: 50, step: 1 }],
+    inputs: [
+      intInput("periods", "Periods", 2, 2, 50, "Bars required on each side of the candidate bar. 2 is Bill Williams' classic 5-bar fractal; a fractal is confirmed only once this many later bars have closed."),
+      colorInput(BEARISH, "Up Fractal", "upColor", "Color of the up fractal marker (swing high), drawn above the fractal bar."),
+      colorInput(BULLISH, "Down Fractal", "downColor", "Color of the down fractal marker (swing low), drawn below the fractal bar.")
+    ],
     compute: (bars, inputs) => {
       const p = num3(inputs, "periods", 2);
       const markers = [];
+      const up = str3(inputs, "upColor", BEARISH);
+      const down = str3(inputs, "downColor", BULLISH);
       const isExtreme = (i, pick, better) => {
         const v = pick(bars[i]);
         for (let k = i - p; k <= i + p; k++) {
@@ -43002,12 +44520,8 @@ ${overlayScrollbarCss(".vela-sd-pane")}
         return true;
       };
       for (let i = p; i < bars.length - p; i++) {
-        if (isExtreme(i, (b) => b.high, (a, b) => a >= b)) {
-          markers.push({ time: bars[i].time, position: "aboveBar", shape: "triangleup", color: BULLISH });
-        }
-        if (isExtreme(i, (b) => b.low, (a, b) => a <= b)) {
-          markers.push({ time: bars[i].time, position: "belowBar", shape: "triangledown", color: BEARISH });
-        }
+        if (isExtreme(i, (b) => b.high, (a, b) => a > b)) markers.push({ time: bars[i].time, position: "aboveBar", shape: "triangleup", color: up });
+        if (isExtreme(i, (b) => b.low, (a, b) => a < b)) markers.push({ time: bars[i].time, position: "belowBar", shape: "triangledown", color: down });
       }
       return { plots: [], markers };
     }