@luxalgo/vela 0.5.3 → 0.6.0

package/dist/widget.cjs

@@ -476,6 +476,10 @@ registerIcon(
   S('<path d="M8 1.8 14 5 8 8.2 2 5z"/><path d="M2 8l6 3.2L14 8" opacity="0.7"/><path d="M2 11l6 3.2 6-3.2" opacity="0.4"/>')
 );
 registerIcon("clock", S('<circle cx="8" cy="8" r="6.2"/><path d="M8 4.8V8l2.4 1.6"/>'));
+registerIcon(
+  "calendar",
+  S('<rect x="2.2" y="3.2" width="11.6" height="10.6" rx="1.4"/><path d="M5.2 1.8v2.8M10.8 1.8v2.8M2.2 6.8h11.6"/>')
+);
 registerIcon("datawindow", S('<rect x="1.8" y="2.5" width="12.4" height="11" rx="1.5"/><path d="M4.5 5.5h4M4.5 8h7M4.5 10.5h5.5"/>'));
 registerIcon("camera", S('<path d="M5.5 4 6.5 2.5h3L10.5 4h3A1 1 0 0 1 14.5 5v7.5a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1z"/><circle cx="8" cy="8.5" r="2.6"/>'));
 registerIcon(
@@ -6932,7 +6936,7 @@ var ProviderRegistry = class {
   /** Register (or replace) a provider; returns a promise that settles when its index is built. */
   register(rawName, provider) {
     const name = normName(rawName);
-    const entry = { name, provider, index: null, descriptors: [], settled: false, settle: Promise.resolve() };
+    const entry = { name, provider, index: null, prefixIndex: null, byTicker: null, descriptors: [], settled: false, settle: Promise.resolve() };
     this.entries.set(name, entry);
     entry.settle = this.buildIndex(entry);
     queueMicrotask(() => this.notify(false));
@@ -6945,6 +6949,9 @@ var ProviderRegistry = class {
         const symbols = await entry.provider.listSymbols();
         entry.descriptors = symbols;
         entry.index = new Set(symbols.map((s) => normTicker(s.ticker)));
+        entry.byTicker = new Map(symbols.map((s) => [normTicker(s.ticker), s]));
+        entry.prefixIndex = /* @__PURE__ */ new Map();
+        for (const s of symbols) if (s.prefix) entry.prefixIndex.set(`${normName(s.prefix)}:${normTicker(s.ticker)}`, s);
       }
     } catch {
       entry.index = null;
@@ -6980,14 +6987,25 @@ var ProviderRegistry = class {
   }
   /**
    * Resolve a symbol to `{ provider, ticker }`, or null when nothing can serve it
-   * yet. Explicit prefix → that provider (must be registered). Bare → first
-   * indexed provider (registration order, `opts.default` first) that contains the
-   * ticker; `opts.lenient` additionally allows a sole registered provider before
-   * its index exists.
+   * yet. Explicit prefix → that provider (must be registered), else a provider whose
+   * index declares that LISTING prefix for that ticker (`NASDAQ:AAPL` routes to the
+   * provider serving Nasdaq-listed AAPL — TradingView-strict, so `NYSE:AAPL` resolves
+   * to nothing rather than auto-correcting). Bare → first indexed provider
+   * (registration order, `opts.default` first) that contains the ticker;
+   * `opts.lenient` additionally allows a sole registered provider before its index
+   * exists.
    */
   resolve(raw, opts = {}) {
     const { provider, ticker } = this.parse(raw);
-    if (provider) return this.entries.has(provider) ? { provider, ticker } : null;
+    if (provider) {
+      if (this.entries.has(provider)) return { provider, ticker };
+      const key = `${provider}:${normTicker(ticker)}`;
+      for (const name of this.candidateOrder(opts.default)) {
+        const d = this.entries.get(name).prefixIndex?.get(key);
+        if (d) return { provider: name, ticker: d.ticker };
+      }
+      return null;
+    }
     const norm = normTicker(ticker);
     for (const name of this.candidateOrder(opts.default)) {
       if (this.entries.get(name).index?.has(norm)) return { provider: name, ticker };
@@ -7053,6 +7071,22 @@ var ProviderRegistry = class {
     }
     return names;
   }
+  /**
+   * The DISPLAY prefix for a resolved symbol — the descriptor's LISTING prefix when the
+   * data declares one, else the provider name. This is the single seam every label
+   * (legend chip, committed/persisted `PREFIX:TICKER` strings) derives from, which is
+   * what makes a non-canonical spelling impossible to display: the form always comes
+   * from the data, never from what was typed.
+   */
+  displayPrefixOf(resolved) {
+    const d = this.entries.get(resolved.provider)?.byTicker?.get(normTicker(resolved.ticker));
+    return d?.prefix ?? resolved.provider;
+  }
+  /** The canonical `PREFIX:TICKER` string for a resolved symbol (descriptor spellings). */
+  canonicalSymbol(resolved) {
+    const d = this.entries.get(resolved.provider)?.byTicker?.get(normTicker(resolved.ticker));
+    return `${d?.prefix ?? resolved.provider}:${d?.ticker ?? resolved.ticker}`;
+  }
   /** Indexed symbols for one provider (or all, concatenated) — for autocomplete. */
   symbolsOf(rawName) {
     if (rawName != null) return this.entries.get(normName(rawName))?.descriptors ?? [];
@@ -9191,6 +9225,20 @@ var MultiProviderFeed = class {
   resolveSymbol(raw) {
     return this.registry.resolve(raw, { default: this.primaryProvider });
   }
+  /**
+   * The DISPLAY prefix for `raw` — the descriptor's LISTING prefix when the data
+   * declares one (`NASDAQ` for AAPL), else the resolved provider name. Null while
+   * nothing resolves the symbol.
+   */
+  displayPrefix(raw) {
+    const resolved = this.resolveSymbol(raw);
+    return resolved ? this.registry.displayPrefixOf(resolved) : null;
+  }
+  /** The canonical `PREFIX:TICKER` form of `raw`, or null while unresolvable. */
+  canonicalSymbol(raw) {
+    const resolved = this.resolveSymbol(raw);
+    return resolved ? this.registry.canonicalSymbol(resolved) : null;
+  }
   /** The registered provider INSTANCE under `name` (undefined if unknown). */
   providerInstance(name) {
     return this.registry.get(name);
@@ -9396,6 +9444,17 @@ var DataControl = class {
   resolve(symbol) {
     return this.registry?.resolveSymbol(symbol) ?? null;
   }
+  /**
+   * The DISPLAY prefix for `symbol` — the listing venue its descriptor declares
+   * (`NASDAQ` for AAPL) or the resolved provider name. Null while unresolvable.
+   */
+  displayPrefix(symbol) {
+    return this.registry?.displayPrefix(symbol) ?? null;
+  }
+  /** The canonical `PREFIX:TICKER` form of `symbol`, or null while unresolvable. */
+  canonicalSymbol(symbol) {
+    return this.registry?.canonicalSymbol(symbol) ?? null;
+  }
   /**
    * The registered provider INSTANCE under `name` — the seam for EXTENDED provider
    * surfaces: a provider may implement interfaces beyond the `DataProvider` port
@@ -9675,12 +9734,6 @@ function mix(base, top, alpha) {
   const c = (x, y) => Math.round(x + (y - x) * alpha);
   return `rgb(${c(b.r, t.r)},${c(b.g, t.g)},${c(b.b, t.b)})`;
 }
-function toHex6(color, fallback = "#888888") {
-  const c = parseRgb(color);
-  if (!c) return fallback;
-  const h = (n) => Math.max(0, Math.min(255, Math.round(n))).toString(16).padStart(2, "0");
-  return `#${h(c.r)}${h(c.g)}${h(c.b)}`;
-}
 function isDarkColor(color) {
   const c = parseRgb(color);
   if (!c) return true;
@@ -9699,6 +9752,9 @@ var STATIC_TOKENS = {
   "--vela-z-tooltip": "60",
   "--vela-z-menu": "50",
   "--vela-z-dialog": "40",
+  // Form popovers portal to <body> (or a chart host) and must sit above a dialog
+  // whose own stacking context may be nested inside the chart container.
+  "--vela-z-popover": "6000",
   "--vela-ease": "cubic-bezier(0.22, 1, 0.36, 1)",
   "--vela-dur-fast": "90ms",
   "--vela-dur-med": "160ms",
@@ -9881,6 +9937,1246 @@ function makeDialogDraggable(box, header, options) {
   return { reset };
 }
 
+// src/ui/styles.ts
+function injectStyles(id, css, root = document) {
+  if (typeof document === "undefined") return;
+  const host = root instanceof Document ? root.head : root;
+  if (root.getElementById?.(id) ?? host.querySelector(`#${CSS.escape(id)}`)) return;
+  const s = document.createElement("style");
+  s.id = id;
+  s.textContent = css;
+  host.appendChild(s);
+}
+
+// src/ui/icons.ts
+function iconEl(id, doc = document) {
+  const span = doc.createElement("span");
+  span.className = "vela-icon";
+  span.setAttribute("aria-hidden", "true");
+  const svg = iconMarkup(id);
+  if (svg) span.innerHTML = svg;
+  return span;
+}
+
+// src/ui/components/switch/controller.ts
+function switchController(opts = {}) {
+  let checked = opts.checked ?? false;
+  const disabled = opts.disabled ?? false;
+  return {
+    get checked() {
+      return checked;
+    },
+    disabled,
+    size: opts.size ?? "md",
+    tone: opts.tone ?? "bright",
+    setChecked(v) {
+      checked = v;
+    },
+    toggle() {
+      if (disabled) return checked;
+      checked = !checked;
+      opts.onChange?.(checked);
+      return checked;
+    }
+  };
+}
+
+// src/ui/components/switch/styles.ts
+var SWITCH_STYLE_ID = "vela-ui-switch";
+var SWITCH_CSS = `
+.vela-switch {
+    width: 20px;
+    height: 20px;
+    flex: 0 0 auto;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    border: 1px solid var(--vela-border);
+    border-radius: 5px;
+    background: transparent;
+    color: transparent;
+    cursor: pointer;
+    line-height: 0;
+    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
+}
+.vela-switch .vela-icon, .vela-switch svg { display: block; width: 12px; height: 12px; }
+.vela-switch[data-size='sm'] .vela-icon, .vela-switch[data-size='sm'] svg { width: 11px; height: 11px; }
+.vela-switch:hover { border-color: var(--vela-fg-muted); }
+.vela-switch[data-checked] {
+    background: var(--vela-fg-bright);
+    border-color: var(--vela-fg-bright);
+    color: var(--vela-bg);
+}
+.vela-switch[data-size='sm'] { width: 18px; height: 18px; border-color: var(--vela-border-strong); }
+.vela-switch[data-size='sm']:hover { border-color: var(--vela-fg-muted); }
+.vela-switch[data-size='sm'][data-checked] {
+    background: var(--vela-selected-bg);
+    border-color: var(--vela-selected-bg);
+    color: var(--vela-selected-fg);
+}
+.vela-switch[data-tone='selected'][data-checked] {
+    background: var(--vela-selected-bg);
+    border-color: var(--vela-selected-bg);
+    color: var(--vela-selected-fg);
+}
+.vela-switch[disabled] { opacity: 0.4; cursor: default; }
+`;
+
+// src/ui/components/switch/view.ts
+var Switch = class {
+  constructor(opts = {}) {
+    injectStyles(SWITCH_STYLE_ID, SWITCH_CSS, document);
+    this.ctrl = switchController(opts);
+    const b = document.createElement("button");
+    b.type = "button";
+    if (opts.id) b.id = opts.id;
+    b.className = "vela-switch";
+    b.dataset.size = this.ctrl.size;
+    b.dataset.tone = this.ctrl.tone;
+    b.setAttribute("role", "switch");
+    if (this.ctrl.disabled) b.disabled = true;
+    b.appendChild(iconEl("check", b.ownerDocument));
+    this.el = b;
+    this.paint();
+    b.addEventListener("pointerdown", (e) => {
+      e.preventDefault();
+      b.focus({ preventScroll: true });
+    });
+    b.addEventListener("click", () => {
+      this.ctrl.toggle();
+      this.paint();
+    });
+  }
+  get checked() {
+    return this.ctrl.checked;
+  }
+  setChecked(v) {
+    this.ctrl.setChecked(v);
+    this.paint();
+  }
+  paint() {
+    const on = this.ctrl.checked;
+    this.el.setAttribute("aria-checked", on ? "true" : "false");
+    if (on) this.el.dataset.checked = "";
+    else delete this.el.dataset.checked;
+  }
+};
+
+// src/ui/tokens.ts
+var STATIC_ID = "vela-ui-tokens";
+var STATIC_DECLS = Object.entries(STATIC_TOKENS).map(([k, v]) => `    ${k}: ${v};`).join("\n");
+var STATIC_CSS = `
+.vela-ui, .vela-ui-layer {
+${STATIC_DECLS}
+    font-family: var(--vela-font, -apple-system, system-ui, sans-serif);
+    box-sizing: border-box;
+}
+.vela-ui *, .vela-ui-layer * { box-sizing: border-box; }
+.vela-icon { display: inline-flex; align-items: center; flex: none; }
+.vela-icon svg { display: block; }
+`;
+function applyThemeTokens(el, t) {
+  const tokens = themeTokens(t);
+  for (const key in tokens) el.style.setProperty(key, tokens[key]);
+}
+function applyPlotOverlayTokens(host, base, config) {
+  const layout = config?.layout;
+  const t = layout?.background && layout.textColor ? { ...base, background: layout.background, textColor: layout.textColor } : base;
+  applyThemeTokens(host, t);
+}
+function ensureUIHost(el, theme) {
+  injectStyles(STATIC_ID, STATIC_CSS, el.getRootNode());
+  el.classList.add("vela-ui");
+  if (theme) applyThemeTokens(el, theme);
+}
+
+// src/ui/components/popover/controller.ts
+function insetRect(r, inset) {
+  return {
+    left: r.left + inset,
+    top: r.top + inset,
+    right: r.right - inset,
+    bottom: r.bottom - inset,
+    width: r.width - inset * 2,
+    height: r.height - inset * 2
+  };
+}
+function viewportRect(width, height, inset) {
+  return {
+    left: inset,
+    top: inset,
+    right: width - inset,
+    bottom: height - inset,
+    width: width - inset * 2,
+    height: height - inset * 2
+  };
+}
+function intersectRects(a, b) {
+  const left = Math.max(a.left, b.left);
+  const top = Math.max(a.top, b.top);
+  const right = Math.min(a.right, b.right);
+  const bottom = Math.min(a.bottom, b.bottom);
+  return { left, top, right, bottom, width: right - left, height: bottom - top };
+}
+function placePopover(a) {
+  let left = a.align === "end" ? a.trigger.right - a.pop.width : a.trigger.left;
+  const below = a.trigger.bottom + a.gap;
+  const above = a.trigger.top - a.pop.height - a.gap;
+  const fitsBelow = below + a.pop.height <= a.clamp.bottom;
+  const fitsAbove = above >= a.clamp.top;
+  let top = below;
+  if (!fitsBelow && (fitsAbove || a.trigger.top - a.clamp.top > a.clamp.bottom - a.trigger.bottom)) {
+    top = Math.max(a.clamp.top, above);
+  }
+  if (left + a.pop.width > a.clamp.right) left = a.clamp.right - a.pop.width;
+  if (left < a.clamp.left) left = a.clamp.left;
+  if (top + a.pop.height > a.clamp.bottom) top = a.clamp.bottom - a.pop.height;
+  if (top < a.clamp.top) top = a.clamp.top;
+  return {
+    left: Math.round(left - a.originX),
+    top: Math.round(top - a.originY)
+  };
+}
+function popoverController(opts = {}) {
+  return {
+    gap: opts.gap ?? 4,
+    align: opts.align ?? "start",
+    matchWidth: opts.matchWidth ?? false,
+    position: opts.position ?? "fixed",
+    boundaryInset: opts.boundaryInset ?? 0,
+    viewportInset: opts.viewportInset ?? 6,
+    onClose: opts.onClose
+  };
+}
+
+// src/ui/components/popover/styles.ts
+var POPOVER_STYLE_ID = "vela-ui-popover";
+var POPOVER_CSS = `
+.vela-popover {
+    position: fixed;
+    z-index: var(--vela-z-popover);
+    box-sizing: border-box;
+    /* Never serve as a scroll anchor: the shell is portaled and re-placed between
+       gestures, and anchoring against it jumps the scroller underneath. */
+    overflow-anchor: none;
+}
+.vela-popover[data-position='absolute'] { position: absolute; }
+.vela-popover[hidden] { display: none !important; }
+`;
+
+// src/ui/components/popover/view.ts
+var open = null;
+function closeOpenPopovers() {
+  open?.hide();
+}
+function isPopoverOpen() {
+  return open !== null;
+}
+function openPopoverTrigger() {
+  return open?.trigger ?? null;
+}
+function toRect(r) {
+  return { left: r.left, top: r.top, right: r.right, bottom: r.bottom, width: r.width, height: r.height };
+}
+var Popover = class {
+  constructor(opts) {
+    this.onOutside = null;
+    this.onKey = null;
+    this.onReflow = null;
+    this.shown = false;
+    const doc = opts.trigger.ownerDocument;
+    injectStyles(POPOVER_STYLE_ID, POPOVER_CSS, doc);
+    this.trigger = opts.trigger;
+    this.host = opts.host ?? doc.body;
+    this.ctrl = popoverController(opts);
+    this.boundary = opts.boundary ?? "viewport";
+    this.theme = opts.theme;
+    this.el = doc.createElement("div");
+    this.el.className = "vela-popover vela-ui-layer" + (opts.className ? ` ${opts.className}` : "");
+    this.el.dataset.position = this.ctrl.position;
+    if (opts.zIndex !== void 0) this.el.style.zIndex = String(opts.zIndex);
+    this.el.addEventListener("pointerdown", (e) => e.stopPropagation());
+    if (opts.content instanceof Node) this.el.appendChild(opts.content);
+    else if (typeof opts.content === "function") opts.content(this.el);
+  }
+  get open() {
+    return this.shown;
+  }
+  get position() {
+    return this.ctrl.position;
+  }
+  get align() {
+    return this.ctrl.align;
+  }
+  show() {
+    if (this.shown) {
+      this.place();
+      return;
+    }
+    if (open && open !== this) open.hide();
+    ensureUIHost(this.el, this.theme);
+    this.host.appendChild(this.el);
+    this.shown = true;
+    open = this;
+    this.place();
+    const onOutside = (ev) => {
+      const t = ev.target;
+      if (this.el.contains(t) || this.trigger.contains(t)) return;
+      this.hide();
+    };
+    const onKey = (ev) => {
+      if (ev.key !== "Escape") return;
+      ev.preventDefault();
+      ev.stopPropagation();
+      this.hide();
+    };
+    const onReflow = () => this.place();
+    setTimeout(() => document.addEventListener("pointerdown", onOutside, true), 0);
+    document.addEventListener("keydown", onKey, true);
+    window.addEventListener("resize", onReflow, true);
+    document.addEventListener("scroll", onReflow, true);
+    this.onOutside = onOutside;
+    this.onKey = onKey;
+    this.onReflow = onReflow;
+  }
+  hide() {
+    if (!this.shown) return;
+    if (this.onOutside) document.removeEventListener("pointerdown", this.onOutside, true);
+    if (this.onKey) document.removeEventListener("keydown", this.onKey, true);
+    if (this.onReflow) {
+      window.removeEventListener("resize", this.onReflow, true);
+      document.removeEventListener("scroll", this.onReflow, true);
+    }
+    this.onOutside = null;
+    this.onKey = null;
+    this.onReflow = null;
+    this.el.remove();
+    this.shown = false;
+    if (open === this) open = null;
+    this.ctrl.onClose?.();
+  }
+  /** Show if closed, hide if this instance is the open popover. */
+  toggle() {
+    if (this.shown) this.hide();
+    else this.show();
+  }
+  destroy() {
+    this.hide();
+  }
+  reposition() {
+    if (this.shown) this.place();
+  }
+  clampRect() {
+    const view = viewportRect(window.innerWidth, window.innerHeight, this.ctrl.viewportInset);
+    const bound = this.readBoundary();
+    if (!bound) return view;
+    const inset = insetRect(bound, this.ctrl.boundaryInset);
+    return intersectRects(view, inset);
+  }
+  readBoundary() {
+    const b = this.boundary;
+    if (b === "viewport") return null;
+    const raw = typeof b === "function" ? b() : b.getBoundingClientRect();
+    return raw ? toRect(raw) : null;
+  }
+  place() {
+    const ar = this.trigger.getBoundingClientRect();
+    if (this.ctrl.matchWidth) {
+      this.el.style.minWidth = `${Math.round(Math.max(this.el.offsetWidth, ar.width))}px`;
+    }
+    const origin = this.ctrl.position === "absolute" ? this.host.getBoundingClientRect() : { left: 0, top: 0 };
+    const pos = placePopover({
+      trigger: toRect(ar),
+      pop: { width: this.el.offsetWidth, height: this.el.offsetHeight },
+      gap: this.ctrl.gap,
+      align: this.ctrl.align,
+      clamp: this.clampRect(),
+      originX: origin.left,
+      originY: origin.top
+    });
+    this.el.style.left = `${pos.left}px`;
+    this.el.style.top = `${pos.top}px`;
+  }
+};
+
+// src/ui/components/select/controller.ts
+function selectController(opts) {
+  const options = opts.options;
+  let value = opts.value ?? options[0]?.value ?? "";
+  const size = opts.size ?? "md";
+  return {
+    options,
+    get value() {
+      return value;
+    },
+    size,
+    fill: opts.fill ?? size !== "sm",
+    disabled: opts.disabled ?? false,
+    setValue(v) {
+      value = v;
+    },
+    labelOf(v) {
+      return options.find((o) => o.value === v)?.label ?? v;
+    },
+    pick(v) {
+      value = v;
+      const label = options.find((o) => o.value === v)?.label ?? v;
+      opts.onChange?.(v, label);
+      return { value: v, label };
+    }
+  };
+}
+
+// src/ui/components/select/styles.ts
+var SELECT_STYLE_ID = "vela-ui-select";
+var SELECT_CSS = `
+.vela-select { position: relative; display: inline-block; min-width: 0; }
+.vela-select[data-fill] { width: 100%; }
+.vela-select-trigger {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    box-sizing: border-box;
+    height: 34px;
+    padding: 0 26px 0 8px;
+    background: transparent;
+    border: 1px solid var(--vela-border-strong);
+    border-radius: 6px;
+    color: var(--vela-fg-bright);
+    font-size: 14px;
+    font-family: inherit;
+    cursor: pointer;
+    text-align: left;
+    outline: none;
+    transition: border-color 0.12s ease, box-shadow 0.12s ease;
+}
+.vela-select-trigger:hover { border-color: var(--vela-fg-muted); }
+.vela-select-trigger:focus { border-color: var(--vela-focus); box-shadow: 0 0 0 3px var(--vela-focus-soft); }
+/* As a grid item (chart-settings rows dissolve via display:contents into a shared
+   max-content column) the wrap must NOT stretch to the column: it sizes to its own
+   widest option, like the native select it replaces. */
+.vela-select[data-size='sm'] { max-width: 200px; flex: 0 0 auto; justify-self: start; }
+.vela-select[data-size='sm'] .vela-select-trigger {
+    height: 28px;
+    background: var(--vela-surface-elev);
+    border-radius: var(--vela-radius-sm);
+    color: var(--vela-fg);
+    font-size: 13px;
+    box-shadow: none;
+}
+.vela-select[data-size='sm'] .vela-select-trigger:focus { box-shadow: none; border-color: var(--vela-fg-muted); }
+.vela-select-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+/* Invisible option-label stack: gives the shrink-to-fit wrap the WIDEST option's
+   intrinsic width (like a native select), so picking a shorter/longer label never
+   resizes the trigger and shifts the row around it. */
+.vela-select-sizer { visibility: hidden; height: 0; overflow: hidden; font-size: 14px; }
+.vela-select[data-size='sm'] .vela-select-sizer { font-size: 13px; }
+.vela-select-sizer span { display: block; height: 0; white-space: nowrap; padding: 0 26px 0 8px; border-inline: 1px solid transparent; }
+.vela-select-chevron {
+    position: absolute;
+    right: 8px;
+    top: 50%;
+    transform: translateY(-50%);
+    pointer-events: none;
+    display: flex;
+    opacity: 0.55;
+    line-height: 0;
+    color: inherit;
+}
+.vela-select-chevron .vela-icon, .vela-select-chevron svg { width: 12px; height: 12px; display: block; }
+.vela-select-list {
+    background: var(--vela-bg);
+    color: var(--vela-fg);
+    border: none;
+    border-radius: 6px;
+    box-shadow: var(--vela-shadow);
+    font: 14px var(--vela-font);
+    padding: 4px;
+    overflow: hidden;
+}
+.vela-select-list[data-size='sm'] { font-size: 13px; background: var(--vela-surface-overlay); }
+.vela-select-items { max-height: none; overflow: hidden; }
+.vela-select-list.is-scroll { display: flex; align-items: stretch; gap: 2px; }
+.vela-select-list.is-scroll .vela-select-items {
+    flex: 1 1 auto;
+    min-width: 0;
+    max-height: 240px;
+    overflow-y: auto;
+    scrollbar-width: none;
+}
+.vela-select-list.is-scroll .vela-select-items::-webkit-scrollbar { display: none; width: 0; height: 0; }
+.vela-select-rail { position: relative; flex: none; width: 3px; margin: 2px 1px 2px 0; pointer-events: none; }
+.vela-select-thumb { width: 3px; border-radius: 2px; background: var(--vela-scroll); }
+.vela-select-item {
+    display: block;
+    width: 100%;
+    text-align: left;
+    padding: 7px 10px;
+    border: none;
+    border-radius: 4px;
+    background: transparent;
+    color: inherit;
+    cursor: pointer;
+    font: inherit;
+    font-weight: 400;
+}
+.vela-select-item:hover { background: var(--vela-hover); }
+.vela-select-item[data-checked] { background: var(--vela-hover-strong); color: var(--vela-fg-bright); }
+.vela-select-item[data-checked]:hover { background: var(--vela-hover-strong); }
+`;
+
+// src/ui/components/select/view.ts
+function ensureSelectStyles(doc) {
+  injectStyles(SELECT_STYLE_ID, SELECT_CSS, doc);
+}
+function syncThumb(list, thumb) {
+  const view = list.clientHeight;
+  const total = list.scrollHeight;
+  if (total <= view) {
+    thumb.style.height = "0";
+    return;
+  }
+  const thumbH = Math.max(20, view / total * view);
+  const top = list.scrollTop / (total - view) * (view - thumbH);
+  thumb.style.height = `${Math.round(thumbH)}px`;
+  thumb.style.transform = `translateY(${Math.round(top)}px`;
+}
+function fillSelectList(menu2, options, current, onPick) {
+  menu2.replaceChildren();
+  const list = menu2.ownerDocument.createElement("div");
+  list.className = "vela-select-items";
+  for (const p of options) {
+    const item = menu2.ownerDocument.createElement("button");
+    item.type = "button";
+    item.className = "vela-select-item";
+    item.textContent = p.label;
+    if (p.value === current) item.dataset.checked = "1";
+    item.addEventListener("click", (e) => {
+      e.stopPropagation();
+      onPick(p.value, p.label);
+    });
+    list.appendChild(item);
+  }
+  menu2.appendChild(list);
+}
+function decorateSelectScroll(menu2) {
+  const list = menu2.querySelector(".vela-select-items");
+  if (!list) return;
+  if (list.scrollHeight > 240) {
+    menu2.classList.add("is-scroll");
+    const rail = menu2.ownerDocument.createElement("div");
+    rail.className = "vela-select-rail";
+    const thumb = menu2.ownerDocument.createElement("div");
+    thumb.className = "vela-select-thumb";
+    rail.appendChild(thumb);
+    menu2.appendChild(rail);
+    list.addEventListener("scroll", () => syncThumb(list, thumb));
+    syncThumb(list, thumb);
+  }
+  menu2.querySelector(".vela-select-item[data-checked]")?.scrollIntoView({ block: "nearest" });
+  list.dispatchEvent(new Event("scroll"));
+}
+function toggleSelectList(trigger, options, current, onPick, opts = {}) {
+  if (openPopoverTrigger() === trigger) {
+    closeOpenPopovers();
+    return null;
+  }
+  return openSelectList(trigger, options, current, onPick, opts);
+}
+function openSelectList(trigger, options, current, onPick, opts = {}) {
+  ensureSelectStyles(trigger.ownerDocument);
+  closeOpenPopovers();
+  const pop = new Popover({
+    trigger,
+    theme: opts.theme,
+    matchWidth: opts.matchWidth ?? true,
+    boundary: opts.boundary,
+    boundaryInset: opts.boundaryInset,
+    gap: opts.gap ?? 4,
+    align: opts.align ?? "start",
+    host: opts.host,
+    position: opts.position,
+    zIndex: opts.zIndex,
+    className: "vela-select-list",
+    onClose: opts.onClose,
+    content: (el) => {
+      if (opts.size) el.dataset.size = opts.size;
+      fillSelectList(el, options, current, (value, label) => {
+        pop.hide();
+        onPick(value, label);
+      });
+    }
+  });
+  pop.show();
+  decorateSelectScroll(pop.el);
+  pop.reposition();
+  return pop;
+}
+var Select = class {
+  constructor(opts) {
+    this.list = null;
+    const doc = opts.list?.host?.ownerDocument ?? document;
+    ensureSelectStyles(doc);
+    this.ctrl = selectController(opts);
+    this.listOpts = { ...opts.list, theme: opts.theme ?? opts.list?.theme, size: this.ctrl.size };
+    const wrap = doc.createElement("div");
+    wrap.className = "vela-select";
+    wrap.dataset.size = this.ctrl.size;
+    if (this.ctrl.fill) wrap.dataset.fill = "";
+    const btn = doc.createElement("button");
+    btn.type = "button";
+    if (opts.id) btn.id = opts.id;
+    btn.className = "vela-select-trigger";
+    if (this.ctrl.disabled) btn.disabled = true;
+    const label = doc.createElement("span");
+    label.className = "vela-select-label";
+    label.textContent = this.ctrl.labelOf(this.ctrl.value);
+    const chevron = doc.createElement("span");
+    chevron.className = "vela-select-chevron";
+    chevron.appendChild(iconEl("chevron-down", doc));
+    btn.append(label, chevron);
+    wrap.appendChild(btn);
+    const sizer = doc.createElement("div");
+    sizer.className = "vela-select-sizer";
+    sizer.setAttribute("aria-hidden", "true");
+    for (const o of this.ctrl.options) {
+      const s = doc.createElement("span");
+      s.textContent = o.label;
+      sizer.appendChild(s);
+    }
+    wrap.appendChild(sizer);
+    btn.addEventListener("pointerdown", (e) => {
+      e.preventDefault();
+      btn.focus({ preventScroll: true });
+    });
+    btn.addEventListener("click", (e) => {
+      e.stopPropagation();
+      this.toggle();
+    });
+    this.el = wrap;
+    this.trigger = btn;
+    this.labelEl = label;
+  }
+  get value() {
+    return this.ctrl.value;
+  }
+  setValue(v) {
+    this.ctrl.setValue(v);
+    this.labelEl.textContent = this.ctrl.labelOf(v);
+  }
+  toggle() {
+    this.list = toggleSelectList(
+      this.trigger,
+      this.ctrl.options,
+      this.ctrl.value,
+      (value, label) => {
+        this.ctrl.pick(value);
+        this.labelEl.textContent = label;
+        this.list = null;
+      },
+      { ...this.listOpts, onClose: () => {
+        this.list = null;
+        this.listOpts.onClose?.();
+      } }
+    );
+  }
+  destroy() {
+    this.list?.hide();
+    this.list = null;
+  }
+};
+
+// src/ui/components/number-input/controller.ts
+function clampNumber(n, opts) {
+  let v = n;
+  if (opts.min !== void 0) v = Math.max(opts.min, v);
+  if (opts.max !== void 0) v = Math.min(opts.max, v);
+  if (opts.integer) v = Math.round(v);
+  return v;
+}
+function decimalsOf(n) {
+  const s = String(n);
+  const e = s.search(/[eE]/);
+  if (e >= 0) {
+    const frac = s.slice(0, e).split(".")[1]?.length ?? 0;
+    return Math.max(0, Math.min(20, frac - Number(s.slice(e + 1))));
+  }
+  return s.split(".")[1]?.length ?? 0;
+}
+function snapToStep(n, base, step) {
+  const d = Math.min(20, Math.max(decimalsOf(base), decimalsOf(step)));
+  return Number(n.toFixed(d));
+}
+function numberInputController(opts) {
+  let value = opts.value;
+  const integer = opts.integer ?? false;
+  const commit = opts.commit ?? "blur";
+  const clamp = opts.clamp ?? commit === "blur";
+  const step = opts.step ?? (integer ? 1 : 0.1);
+  const onChange = opts.onChange;
+  const normalize = (raw) => clamp ? clampNumber(raw, { min: opts.min, max: opts.max, integer }) : raw;
+  const apply = (raw) => {
+    if (!Number.isFinite(raw)) return null;
+    const n = normalize(raw);
+    if (n !== value) {
+      value = n;
+      onChange?.(n);
+    }
+    return n;
+  };
+  return {
+    get value() {
+      return value;
+    },
+    min: opts.min,
+    max: opts.max,
+    step,
+    integer,
+    size: opts.size ?? "md",
+    commit,
+    steppers: opts.steppers ?? commit === "blur",
+    clamp,
+    disabled: opts.disabled ?? false,
+    apply,
+    sync(raw) {
+      const n = Number.isFinite(raw) ? normalize(raw) : value;
+      value = n;
+      return n;
+    },
+    nudge(dir) {
+      return apply(snapToStep(value + dir * step, value, step));
+    }
+  };
+}
+
+// src/ui/components/number-input/styles.ts
+var NUMBER_STYLE_ID = "vela-ui-number";
+var NUMBER_CSS = `
+.vela-num { position: relative; display: inline-block; min-width: 0; }
+.vela-num[data-fill] { width: 100%; }
+.vela-num input {
+    width: 100%;
+    box-sizing: border-box;
+    height: 34px;
+    background: transparent;
+    border: 1px solid var(--vela-border-strong);
+    border-radius: 6px;
+    color: var(--vela-fg-bright);
+    padding: 0 8px;
+    font-size: 14px;
+    font-family: inherit;
+    outline: none;
+    transition: border-color 0.12s ease, box-shadow 0.12s ease;
+    -moz-appearance: textfield;
+    appearance: textfield;
+}
+.vela-num input::-webkit-inner-spin-button, .vela-num input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
+.vela-num input:hover { border-color: var(--vela-fg-muted); }
+.vela-num input:focus { border-color: var(--vela-focus); box-shadow: 0 0 0 3px var(--vela-focus-soft); }
+.vela-num[data-steppers] input { padding-right: 26px; }
+.vela-num[data-size='sm'] { width: 64px; flex: none; }
+.vela-num[data-size='sm'][data-compact] { width: 56px; }
+.vela-num[data-size='sm'] input {
+    height: 28px;
+    background: var(--vela-surface-elev);
+    border-radius: var(--vela-radius-sm);
+    color: var(--vela-fg);
+    font-size: 13px;
+    box-shadow: none;
+}
+.vela-num[data-size='sm'] input:focus { box-shadow: none; }
+.vela-num-step {
+    position: absolute;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    width: 22px;
+    display: none;
+    flex-direction: column;
+    justify-content: center;
+    box-sizing: border-box;
+    padding: 2px 6px 2px 0;
+    line-height: 0;
+}
+.vela-num[data-steppers]:hover .vela-num-step { display: flex; }
+.vela-num-step button {
+    flex: 1;
+    width: 100%;
+    min-height: 0;
+    border: none;
+    background: transparent;
+    color: var(--vela-fg-muted);
+    border-radius: 3px;
+    padding: 0;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.vela-num-step button:hover { background: var(--vela-hover); color: var(--vela-fg-bright); }
+.vela-num-step .vela-icon, .vela-num-step svg { width: 12px; height: 12px; display: block; }
+`;
+
+// src/ui/components/number-input/view.ts
+var NumberInput = class {
+  constructor(opts) {
+    const doc = document;
+    injectStyles(NUMBER_STYLE_ID, NUMBER_CSS, doc);
+    this.ctrl = numberInputController(opts);
+    this.placeholderMode = opts.placeholder !== void 0;
+    this.emptyValue = opts.emptyValue ?? opts.value;
+    this.last = String(opts.value);
+    const wrap = doc.createElement("div");
+    wrap.className = "vela-num";
+    wrap.dataset.size = this.ctrl.size;
+    if (this.ctrl.size !== "sm") wrap.dataset.fill = "";
+    if (opts.compact) wrap.dataset.compact = "";
+    if (this.ctrl.steppers) wrap.dataset.steppers = "";
+    const ni = doc.createElement("input");
+    ni.type = "number";
+    if (opts.id) ni.id = opts.id;
+    if (opts.title) ni.title = opts.title;
+    if (opts.min !== void 0) ni.min = String(opts.min);
+    if (opts.max !== void 0) ni.max = String(opts.max);
+    ni.step = String(this.ctrl.step);
+    if (this.ctrl.disabled) ni.disabled = true;
+    if (this.placeholderMode) {
+      ni.placeholder = opts.placeholder ?? "";
+      ni.value = opts.value !== this.emptyValue ? String(opts.value) : "";
+    } else {
+      ni.value = String(opts.value);
+    }
+    const commitRaw = (raw) => {
+      const n = this.ctrl.apply(raw);
+      if (n === null) {
+        ni.value = this.placeholderMode && this.ctrl.value === this.emptyValue ? "" : this.last;
+        return;
+      }
+      this.last = String(n);
+      if (this.placeholderMode && n === this.emptyValue) ni.value = "";
+      else ni.value = String(n);
+    };
+    if (this.placeholderMode) {
+      ni.addEventListener("change", () => {
+        const raw = ni.value.trim() === "" ? this.emptyValue : Number(ni.value);
+        commitRaw(Number.isFinite(raw) ? raw : this.emptyValue);
+      });
+    } else if (this.ctrl.commit === "live") {
+      ni.addEventListener("input", () => {
+        const v = Number(ni.value);
+        if (Number.isFinite(v)) this.ctrl.apply(v);
+      });
+    } else {
+      ni.addEventListener("blur", () => commitRaw(Number(ni.value)));
+      ni.addEventListener("keydown", (e) => {
+        if (e.key === "Enter") {
+          e.preventDefault();
+          ni.blur();
+        }
+      });
+    }
+    wrap.appendChild(ni);
+    if (this.ctrl.steppers) {
+      wrap.appendChild(this.buildSteppers(doc, (dir) => {
+        const cur = Number(ni.value);
+        const base = Number.isFinite(cur) ? cur : this.ctrl.value;
+        commitRaw(snapToStep(base + dir * this.ctrl.step, base, this.ctrl.step));
+      }));
+    }
+    this.el = wrap;
+    this.input = ni;
+  }
+  get value() {
+    return this.ctrl.value;
+  }
+  setValue(v) {
+    const n = this.ctrl.sync(v);
+    this.last = String(n);
+    if (this.placeholderMode && n === this.emptyValue) this.input.value = "";
+    else this.input.value = String(n);
+  }
+  buildSteppers(doc, applyDir) {
+    const steps = doc.createElement("div");
+    steps.className = "vela-num-step";
+    const mk = (dir, icon2, label) => {
+      const b = doc.createElement("button");
+      b.type = "button";
+      b.tabIndex = -1;
+      b.setAttribute("aria-label", label);
+      b.appendChild(iconEl(icon2, doc));
+      let timer = 0;
+      const apply = () => applyDir(dir);
+      const stop = () => {
+        if (timer) {
+          window.clearTimeout(timer);
+          timer = 0;
+        }
+      };
+      b.addEventListener("pointerdown", (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        apply();
+        timer = window.setTimeout(function tick() {
+          apply();
+          timer = window.setTimeout(tick, 60);
+        }, 400);
+      });
+      b.addEventListener("pointerup", stop);
+      b.addEventListener("pointerleave", stop);
+      b.addEventListener("pointercancel", stop);
+      return b;
+    };
+    steps.append(mk(1, "chevron-up", "Increase"), mk(-1, "chevron-down", "Decrease"));
+    return steps;
+  }
+};
+
+// src/ui/components/text-field/controller.ts
+function textFieldController(opts = {}) {
+  let value = opts.value ?? "";
+  const size = opts.size ?? "md";
+  return {
+    get value() {
+      return value;
+    },
+    size,
+    fill: opts.fill ?? size !== "sm",
+    disabled: opts.disabled ?? false,
+    commit(next) {
+      if (next === value) return null;
+      value = next;
+      opts.onChange?.(next);
+      return next;
+    },
+    sync(next) {
+      value = next;
+    }
+  };
+}
+
+// src/ui/components/text-field/styles.ts
+var TEXT_STYLE_ID = "vela-ui-text";
+var TEXT_CSS = `
+.vela-text {
+    display: inline-block;
+    min-width: 0;
+}
+.vela-text[data-fill] { width: 100%; }
+.vela-text-field {
+    width: 100%;
+    box-sizing: border-box;
+    height: 34px;
+    background: transparent;
+    border: 1px solid var(--vela-border-strong);
+    border-radius: 6px;
+    color: var(--vela-fg-bright);
+    padding: 0 8px;
+    font-size: 14px;
+    font-family: inherit;
+    outline: none;
+    transition: border-color 0.12s ease, box-shadow 0.12s ease;
+}
+.vela-text-field:hover { border-color: var(--vela-fg-muted); }
+.vela-text-field:focus { border-color: var(--vela-focus); box-shadow: 0 0 0 3px var(--vela-focus-soft); }
+.vela-text[data-size='sm'] .vela-text-field {
+    height: 28px;
+    background: var(--vela-surface-elev);
+    border-radius: var(--vela-radius-sm);
+    color: var(--vela-fg);
+    font-size: 13px;
+}
+`;
+
+// src/ui/components/text-field/view.ts
+var TextField = class {
+  constructor(opts = {}) {
+    const doc = document;
+    injectStyles(TEXT_STYLE_ID, TEXT_CSS, doc);
+    this.ctrl = textFieldController(opts);
+    const wrap = doc.createElement("div");
+    wrap.className = "vela-text";
+    wrap.dataset.size = this.ctrl.size;
+    if (this.ctrl.fill) wrap.dataset.fill = "";
+    const ti = doc.createElement("input");
+    ti.type = "text";
+    if (opts.id) ti.id = opts.id;
+    ti.value = this.ctrl.value;
+    ti.className = "vela-text-field";
+    if (this.ctrl.disabled) ti.disabled = true;
+    ti.addEventListener("blur", () => {
+      this.ctrl.commit(ti.value);
+    });
+    ti.addEventListener("keydown", (e) => {
+      if (e.key === "Enter") {
+        e.preventDefault();
+        ti.blur();
+      }
+    });
+    wrap.appendChild(ti);
+    this.el = wrap;
+    this.input = ti;
+  }
+  get value() {
+    return this.ctrl.value;
+  }
+  setValue(v) {
+    this.ctrl.sync(v);
+    this.input.value = v;
+  }
+};
+
+// src/ui/components/color-picker/controller.ts
+function splitColor(color) {
+  const s = String(color ?? "").trim();
+  let m = /^#([0-9a-f]{6})([0-9a-f]{2})?$/i.exec(s);
+  if (m) return { hex6: `#${m[1].toLowerCase()}`, alpha: m[2] ? parseInt(m[2], 16) / 255 : 1 };
+  m = /^#([0-9a-f]{3})$/i.exec(s);
+  if (m) {
+    const h = m[1].toLowerCase();
+    return { hex6: `#${h[0]}${h[0]}${h[1]}${h[1]}${h[2]}${h[2]}`, alpha: 1 };
+  }
+  const rgba = /^rgba?\(([^)]+)\)/i.exec(s);
+  if (rgba) {
+    const p = rgba[1].split(",").map((v) => v.trim());
+    const hx = (n) => Math.max(0, Math.min(255, Math.round(n))).toString(16).padStart(2, "0");
+    const a = p[3] != null ? Math.max(0, Math.min(1, parseFloat(p[3]))) : 1;
+    return { hex6: `#${hx(parseInt(p[0] ?? "0", 10))}${hx(parseInt(p[1] ?? "0", 10))}${hx(parseInt(p[2] ?? "0", 10))}`, alpha: a };
+  }
+  return { hex6: ACCENT_BRIGHT, alpha: 1 };
+}
+function combineColor(hex6, alpha) {
+  const a = Math.max(0, Math.min(1, alpha));
+  if (a >= 0.999) return hex6;
+  return `${hex6}${Math.round(a * 255).toString(16).padStart(2, "0")}`;
+}
+function blendOver(fg, bg, alpha) {
+  const rgb = (c) => {
+    const n = parseInt(splitColor(c).hex6.slice(1), 16);
+    return [n >> 16 & 255, n >> 8 & 255, n & 255];
+  };
+  const [fr, fgc, fb] = rgb(fg);
+  const [br, bgc, bb] = rgb(bg);
+  const a = Math.max(0, Math.min(1, alpha));
+  const h = (n) => Math.round(n).toString(16).padStart(2, "0");
+  return `#${h(fr * a + br * (1 - a))}${h(fgc * a + bgc * (1 - a))}${h(fb * a + bb * (1 - a))}`;
+}
+function hslHex(h, s, l) {
+  const sn = s / 100;
+  const ln = l / 100;
+  const k = (n) => (n + h / 30) % 12;
+  const a = sn * Math.min(ln, 1 - ln);
+  const f = (n) => ln - a * Math.max(-1, Math.min(k(n) - 3, Math.min(9 - k(n), 1)));
+  const to = (x) => Math.round(x * 255).toString(16).padStart(2, "0");
+  return `#${to(f(0))}${to(f(8))}${to(f(4))}`;
+}
+function buildPalette() {
+  const grays = [100, 90, 80, 68, 56, 45, 35, 25, 14, 0].map((l) => hslHex(0, 0, l));
+  const hues = [4, 28, 50, 96, 140, 174, 200, 224, 270, 322];
+  const levels = [
+    [82, 56],
+    [58, 84],
+    [62, 74],
+    [66, 62],
+    [70, 50],
+    [64, 39],
+    [54, 29]
+  ];
+  return [grays, ...levels.map(([s, l]) => hues.map((h) => hslHex(h, s, l)))];
+}
+function transparencyChecker(size) {
+  return `repeating-conic-gradient(#9aa0a6 0% 25%, #d3d6da 0% 50%) 0 0 / ${size}px ${size}px`;
+}
+
+// src/ui/components/color-picker/styles.ts
+var COLOR_STYLE_ID = "vela-ui-color";
+var COLOR_CSS = `
+.vela-color-field{width:24px;height:24px;padding:2px;border:1px solid var(--vela-border);border-radius:0;background:var(--vela-surface-sunken);cursor:pointer;display:inline-flex;flex:none;}
+.vela-color-field:hover{border-color:var(--vela-fg-muted);}
+.vela-color-field-swatch{display:block;width:100%;height:100%;border-radius:0;box-shadow:inset 0 0 0 1px rgba(0,0,0,0.25);}
+.vela-color-field-circle{width:26px;height:26px;padding:3px;border:1px solid var(--vela-border-strong);border-radius:4px;background:transparent;overflow:hidden;}
+.vela-color-field-circle .vela-color-field-swatch{border-radius:2px;box-shadow:none;}
+.vela-color-field-pop{background:var(--vela-surface-overlay);border:1px solid var(--vela-border);border-radius:var(--vela-radius-lg);box-shadow:var(--vela-shadow);padding:10px;}
+`;
+
+// src/ui/components/color-picker/view.ts
+var PALETTE = buildPalette();
+var CHECKER = transparencyChecker(10);
+var FIELD_CHECKER = transparencyChecker(8);
+var recents = [ACCENT, BULLISH, BEARISH, WARNING, NEUTRAL];
+function addRecent(hex6) {
+  const i = recents.findIndex((c) => c.toLowerCase() === hex6.toLowerCase());
+  if (i >= 0) recents.splice(i, 1);
+  recents.unshift(hex6);
+  if (recents.length > 10) recents.length = 10;
+}
+function buildColorPicker(color, theme, onChange) {
+  const parsed = splitColor(color);
+  let curHex = parsed.hex6;
+  let curAlpha = parsed.alpha;
+  const root = document.createElement("div");
+  root.style.cssText = "display:flex;flex-direction:column;gap:9px;width:236px;";
+  const grid = document.createElement("div");
+  grid.style.cssText = "display:grid;grid-template-columns:repeat(10,1fr);gap:4px;";
+  const swatches = [];
+  for (const row of PALETTE) {
+    for (const c of row) {
+      const sw = document.createElement("button");
+      sw.type = "button";
+      sw.dataset.c = c;
+      sw.style.cssText = `width:100%;aspect-ratio:1;border-radius:4px;border:none;cursor:pointer;background:${c};padding:0;`;
+      sw.addEventListener("click", (e) => {
+        e.stopPropagation();
+        pickHex(c);
+      });
+      grid.appendChild(sw);
+      swatches.push(sw);
+    }
+  }
+  const paintSelection = () => {
+    for (const sw of swatches) {
+      const on = (sw.dataset.c ?? "").toLowerCase() === curHex.toLowerCase();
+      sw.style.outline = on ? `2px solid ${theme.textColor}` : "none";
+      sw.style.outlineOffset = "2px";
+      sw.style.zIndex = on ? "1" : "";
+      sw.style.position = on ? "relative" : "";
+    }
+  };
+  const recentRow = document.createElement("div");
+  recentRow.style.cssText = "display:flex;align-items:center;gap:5px;flex-wrap:wrap;border-top:1px solid var(--vela-border);padding-top:9px;";
+  const renderRecents = () => {
+    recentRow.replaceChildren();
+    for (const c of recents) {
+      const sw = document.createElement("button");
+      sw.type = "button";
+      sw.style.cssText = `width:17px;height:17px;border-radius:var(--vela-radius-sm);border:1px solid var(--vela-border);cursor:pointer;background:${c};padding:0;`;
+      sw.addEventListener("click", (e) => {
+        e.stopPropagation();
+        pickHex(c);
+      });
+      recentRow.appendChild(sw);
+    }
+    const add = document.createElement("label");
+    add.style.cssText = `width:17px;height:17px;border-radius:var(--vela-radius-sm);border:1px dashed var(--vela-border-strong);cursor:pointer;display:flex;align-items:center;justify-content:center;color:${theme.textColor};font:14px ${theme.fontFamily};position:relative;`;
+    add.textContent = "+";
+    const input = document.createElement("input");
+    input.type = "color";
+    input.value = curHex;
+    input.style.cssText = "position:absolute;inset:0;opacity:0;cursor:pointer;";
+    input.addEventListener("input", () => pickHex(input.value, true));
+    add.appendChild(input);
+    recentRow.appendChild(add);
+  };
+  const opLabel = document.createElement("div");
+  opLabel.textContent = "Opacity";
+  opLabel.style.cssText = `font:11px ${theme.fontFamily};color:var(--vela-fg-muted);`;
+  const opRow = document.createElement("div");
+  opRow.style.cssText = "display:flex;align-items:center;gap:10px;";
+  const track = document.createElement("div");
+  track.style.cssText = "flex:1;position:relative;height:13px;border-radius:7px;cursor:pointer;";
+  const knob = document.createElement("div");
+  knob.style.cssText = "position:absolute;top:50%;width:15px;height:15px;border-radius:50%;background:var(--vela-selected-bg);box-shadow:0 1px 3px rgba(0,0,0,0.55);transform:translate(-50%,-50%);pointer-events:none;";
+  track.appendChild(knob);
+  const pctBox = document.createElement("div");
+  pctBox.style.cssText = `min-width:42px;text-align:center;font:var(--vela-font-size-md) ${theme.fontFamily};color:var(--vela-fg);border:1px solid var(--vela-border);border-radius:5px;padding:3px 4px;`;
+  opRow.append(track, pctBox);
+  const paintOpacity = () => {
+    track.style.background = `linear-gradient(to right, ${curHex}00, ${curHex}ff), ${CHECKER}`;
+    knob.style.left = `${curAlpha * 100}%`;
+    pctBox.textContent = `${Math.round(curAlpha * 100)}%`;
+  };
+  let dragging = false;
+  const onDrag = (clientX) => {
+    const r = track.getBoundingClientRect();
+    curAlpha = Math.max(0, Math.min(1, (clientX - r.left) / r.width));
+    paintOpacity();
+    emit();
+  };
+  track.addEventListener("pointerdown", (e) => {
+    e.stopPropagation();
+    dragging = true;
+    track.setPointerCapture(e.pointerId);
+    onDrag(e.clientX);
+  });
+  track.addEventListener("pointermove", (e) => {
+    if (dragging) onDrag(e.clientX);
+  });
+  track.addEventListener("pointerup", () => dragging = false);
+  function emit() {
+    onChange(combineColor(curHex, curAlpha));
+  }
+  function pickHex(hex, custom = false) {
+    curHex = splitColor(hex).hex6;
+    addRecent(curHex);
+    paintSelection();
+    paintOpacity();
+    if (custom) renderRecents();
+    emit();
+  }
+  renderRecents();
+  paintSelection();
+  paintOpacity();
+  root.append(grid, recentRow, opLabel, opRow);
+  return root;
+}
+function colorField(theme, getVal, onVal, opts) {
+  return new ColorField({ theme, getVal, onVal, shape: opts?.shape, id: opts?.id, popover: opts?.popover }).el;
+}
+var ColorField = class {
+  constructor(opts) {
+    injectStyles(COLOR_STYLE_ID, COLOR_CSS, document);
+    this.theme = opts.theme;
+    this.getVal = opts.getVal;
+    this.onVal = opts.onVal;
+    this.popoverOpts = opts.popover;
+    const trigger = document.createElement("button");
+    trigger.type = "button";
+    if (opts.id) trigger.id = opts.id;
+    trigger.className = opts.shape === "circle" ? "vela-color-field vela-color-field-circle" : "vela-color-field";
+    const swatch = document.createElement("span");
+    swatch.className = "vela-color-field-swatch";
+    trigger.appendChild(swatch);
+    this.el = trigger;
+    this.swatch = swatch;
+    this.paint();
+    trigger.addEventListener("vela-sync", () => this.paint());
+    trigger.addEventListener("pointerdown", (e) => {
+      e.preventDefault();
+      trigger.focus({ preventScroll: true });
+    });
+    trigger.addEventListener("click", (e) => {
+      e.stopPropagation();
+      this.toggle();
+    });
+  }
+  paint() {
+    const v = this.getVal();
+    this.swatch.style.background = `linear-gradient(${v}, ${v}), ${FIELD_CHECKER}`;
+  }
+  toggle() {
+    if (openPopoverTrigger() === this.el) {
+      closeOpenPopovers();
+      return;
+    }
+    const pop = new Popover({
+      trigger: this.el,
+      theme: this.theme,
+      align: this.popoverOpts?.align ?? "end",
+      gap: this.popoverOpts?.gap ?? 6,
+      host: this.popoverOpts?.host,
+      position: this.popoverOpts?.position,
+      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();
+      })
+    });
+    pop.show();
+  }
+};
+
 // src/renderers/shared/InputsUI.ts
 var SOURCES = ["close", "open", "high", "low", "hl2", "hlc3", "ohlc4", "volume"];
 var STATUS_KEYFRAMES = "@keyframes vela-ind-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.6)}}";
@@ -9889,6 +11185,7 @@ var LEGEND_CTL_PX = 18;
 var LEGEND_ROW_PAD_Y = 2;
 var LEGEND_ROW_PAD_X = 6;
 var LEGEND_TITLE_VALUES_GAP_PX = 6;
+var LEGEND_TITLE_STATUS_GAP_PX = 8;
 var LEGEND_ACTION_GAP_PX = 6;
 var LEGEND_CTL_CSS = `cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border:none;line-height:0;padding:0;width:${LEGEND_CTL_PX}px;height:${LEGEND_CTL_PX}px;border-radius:3px;box-sizing:border-box;flex:none;`;
 var LEGEND_ROW_MIN_H = LEGEND_CTL_PX + LEGEND_ROW_PAD_Y * 2;
@@ -9933,6 +11230,11 @@ var InputsUI = class {
     this.dialogTips = [];
     /** Open "Move to" menu (kept so it can be torn down). */
     this.moveMenu = null;
+    /** Open settings-dialog choice menu (custom dropdown — torn down with the dialog). */
+    this.choicePop = null;
+    /** Open settings-dialog calendar popover (torn down with the dialog). */
+    this.calendarPop = null;
+    this.calendarAnchor = null;
     /** Collapsed panes → the master indicator id to keep visible (others hidden in the strip). */
     this.paneCollapse = /* @__PURE__ */ new Map();
     /** The user folded the indicator legend away behind the chevron — CHART-WIDE: every
@@ -9958,6 +11260,10 @@ var InputsUI = class {
     this.onDialogKey = (e) => {
       if (e.key === "Escape") {
         e.preventDefault();
+        if (isPopoverOpen()) {
+          closeOpenPopovers();
+          return;
+        }
         this.closeDialog();
       }
     };
@@ -10403,6 +11709,7 @@ var InputsUI = class {
       titleWrap.appendChild(beta);
     }
     el.appendChild(titleWrap);
+    el.appendChild(statusEl);
     const valuesEl = document.createElement("span");
     valuesEl.style.cssText = `display:none;align-items:center;gap:5px;margin-left:${LEGEND_TITLE_VALUES_GAP_PX}px;white-space:nowrap;font-variant-numeric:tabular-nums;`;
     el.appendChild(valuesEl);
@@ -10463,7 +11770,6 @@ var InputsUI = class {
     close.addEventListener("click", () => this.onRemove?.(id));
     controlsEl.appendChild(close);
     el.appendChild(controlsEl);
-    el.appendChild(statusEl);
     this.attach(this.legendFor(paneId), el, !!opts.native);
     this.rows.set(id, { id, title, settingsTitle, inputs, values: { ...values }, el, titleEl, statusEl, valuesEl, plotValues: [], plotValuesKey: "", showValues: null, highlighted: false, paneId, hidden: false, eyeEl, controlsEl, extrasEl, native: !!opts.native });
     this.syncFoldToggle();
@@ -10481,7 +11787,7 @@ var InputsUI = class {
   /**
    * Reflect an indicator's live status in its legend row: `'loading'` shows three pulsing
    * dots (a fetch is in flight — the same load affordance as the chart's own bar-load dots,
-   * at legend scale), `'live'` a pulsing dot, `'idle'` nothing. Rendered at the row's right end.
+   * at legend scale), `'live'` a pulsing dot, `'idle'` nothing. Rendered just right of the title.
    */
   setStatus(id, status) {
     const row = this.rows.get(id);
@@ -10493,7 +11799,7 @@ var InputsUI = class {
       return;
     }
     if (status === "loading") {
-      el.style.cssText = "display:inline-flex;align-items:center;gap:3px;box-sizing:border-box;flex:none;";
+      el.style.cssText = `display:inline-flex;align-items:center;gap:3px;box-sizing:border-box;flex:none;margin-left:${LEGEND_TITLE_STATUS_GAP_PX}px;line-height:0;transform:translateY(1px);`;
       for (let i = 0; i < 3; i += 1) {
         const dot = document.createElement("span");
         dot.style.cssText = "width:4px;height:4px;border-radius:50%;background:currentColor;opacity:0.15;flex:none;";
@@ -10503,7 +11809,7 @@ var InputsUI = class {
       return;
     }
     this.ensureStatusKeyframes();
-    el.style.cssText = `display:inline-block;box-sizing:border-box;flex:none;width:8px;height:8px;border-radius:50%;background:${this.theme.upColor};animation:vela-ind-pulse 1.2s ease-in-out infinite;`;
+    el.style.cssText = `display:inline-block;box-sizing:border-box;flex:none;width:8px;height:8px;border-radius:50%;margin-left:${LEGEND_TITLE_STATUS_GAP_PX}px;transform:translateY(1px);background:${this.theme.upColor};animation:vela-ind-pulse 1.2s ease-in-out infinite;`;
   }
   /** Inject the status keyframes once (idempotent). */
   ensureStatusKeyframes() {
@@ -10556,15 +11862,15 @@ var InputsUI = class {
    * construction and is shown/hidden with the cluster container.
    */
   syncRowActions(row) {
-    const open = row.highlighted;
-    row.controlsEl.style.display = open || row.hidden ? "inline-flex" : "none";
+    const open2 = row.highlighted;
+    row.controlsEl.style.display = open2 || row.hidden ? "inline-flex" : "none";
     for (const child of Array.from(row.controlsEl.children)) {
       if (!(child instanceof HTMLElement) || child === row.eyeEl) continue;
       if (child === row.extrasEl) {
-        child.style.display = open ? "contents" : "none";
+        child.style.display = open2 ? "contents" : "none";
         continue;
       }
-      child.style.display = open ? "inline-flex" : "none";
+      child.style.display = open2 ? "inline-flex" : "none";
     }
   }
   /** Drop the current selection outline, if any. */
@@ -10618,7 +11924,8 @@ var InputsUI = class {
   /**
    * Open the indicator's settings as a centered modal over the chart — a themed,
    * dependency-free port of the app's tabbed script-settings dialog: a header with the
-   * indicator title, an "Inputs" tab, a scrollable body that groups inputs by `group=`
+   * indicator title, a tab strip (the default "Inputs" tab plus any tab the inputs
+   * declare via `tab=`), a scrollable body per tab that groups inputs by `group=`
    * (section headers) and packs `inline=` inputs onto one row, and a sticky footer.
    *
    * Edits commit LIVE (each change re-runs the indicator), matching the current
@@ -10648,55 +11955,57 @@ var InputsUI = class {
     });
     const card = document.createElement("div");
     card.className = "vela-ind-dialog";
-    card.style.cssText = `display:flex;flex-direction:column;width:fit-content;min-width:min(360px,90%);max-width:min(640px,94%);max-height:82%;background:${t.background};border:1px solid ${border};border-radius:var(--vela-radius-lg);box-shadow:var(--vela-shadow-dialog);color:${fg};color-scheme:${scheme};font:13px ${font};overflow:hidden;`;
+    card.style.cssText = `display:flex;flex-direction:column;width:fit-content;min-width:min(380px,90%);max-width:min(640px,94%);max-height:82%;background:${t.background};border:1px solid ${border};border-radius:var(--vela-radius-lg);box-shadow:var(--vela-shadow-dialog);color:${fg};color-scheme:${scheme};font:14px ${font};overflow:hidden;`;
     if (this.mobileLayout) card.style.cssText += "width:100%;min-width:0;max-width:none;height:100%;max-height:none;border:none;border-radius:0;";
     applyChromeTokens(card, t);
     card.addEventListener("keydown", (e) => {
       if (e.key !== "Escape") e.stopPropagation();
     });
     const header = document.createElement("div");
-    header.style.cssText = "display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:16px 20px 12px;flex:0 0 auto;";
+    header.style.cssText = "display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:16px 20px 20px;flex:0 0 auto;";
     const hTitle = document.createElement("span");
     hTitle.textContent = row.settingsTitle;
-    hTitle.style.cssText = "font-weight:600;font-size:16px;line-height:1.3;";
+    hTitle.style.cssText = "font-weight:600;font-size:20px;line-height:28px;";
     const closeBtn = document.createElement("button");
     closeBtn.type = "button";
     closeBtn.setAttribute("aria-label", "Close");
     this.dialogTips.push(attachChromeTooltip(closeBtn, { host: this.container, theme: () => this.theme, text: () => "Close" }));
     closeBtn.innerHTML = iconAt("close", 15);
-    closeBtn.className = "vela-ind-ctl";
-    closeBtn.style.cssText = "cursor:pointer;display:inline-flex;align-items:center;background:transparent;border:none;line-height:0;padding:2px;flex:0 0 auto;";
+    closeBtn.className = "vela-ind-dlg-close";
     closeBtn.addEventListener("click", () => this.closeDialog());
     header.append(hTitle, closeBtn);
     card.appendChild(header);
     if (!this.mobileLayout) makeDialogDraggable(card, header, { closeSelector: "button" });
+    const tabDefs = tabInputs(row.inputs);
     const tabs = document.createElement("div");
-    tabs.style.cssText = `display:flex;gap:16px;padding:0 20px;border-bottom:1px solid ${border};flex:0 0 auto;`;
-    const tab = document.createElement("div");
-    tab.textContent = "Inputs";
-    tab.style.cssText = `padding:8px 2px;margin-bottom:-1px;border-bottom:2px solid ${fg};font-weight:600;font-size:13px;`;
-    tabs.appendChild(tab);
-    card.appendChild(tabs);
-    const body = document.createElement("div");
-    body.style.cssText = "padding:14px 20px 6px;overflow-y:auto;flex:1 1 auto;display:flex;flex-direction:column;gap:24px;";
-    for (const group of groupInputs(row.inputs)) {
-      const section = document.createElement("div");
-      section.style.cssText = "display:flex;flex-direction:column;gap:14px;";
-      if (group.name) {
-        const gh = document.createElement("div");
-        gh.textContent = group.name;
-        gh.style.cssText = "font-size:var(--vela-font-size-sm);font-weight:600;letter-spacing:0.05em;text-transform:uppercase;color:var(--vela-fg-muted);";
-        section.appendChild(gh);
+    tabs.style.cssText = `display:flex;gap:12px;padding:0 20px;border-bottom:1px solid ${border};flex:0 0 auto;`;
+    const tabEls = [];
+    const bodies = [];
+    const activate = (idx) => {
+      for (let i = 0; i < tabEls.length; i += 1) {
+        const active = i === idx;
+        const el = tabEls[i];
+        el.style.borderBottomColor = active ? fg : "transparent";
+        el.style.color = active ? "inherit" : "var(--vela-fg-muted)";
+        el.classList.toggle("vela-ind-tab-active", active);
+        bodies[i].style.display = active ? "grid" : "none";
       }
-      const grid = document.createElement("div");
-      grid.style.cssText = this.mobileLayout ? "display:grid;grid-template-columns:minmax(0,1fr) auto auto max-content;align-items:center;column-gap:12px;row-gap:22px;" : "display:grid;grid-template-columns:minmax(140px,auto) auto auto 1fr;align-items:center;column-gap:12px;row-gap:22px;";
-      for (const inputRow of group.rows) this.buildInputRow(grid, inputRow, row);
-      section.appendChild(grid);
-      body.appendChild(section);
+    };
+    for (const [idx, def] of tabDefs.entries()) {
+      const tab = document.createElement("div");
+      tab.textContent = def.name;
+      tab.className = "vela-ind-tab";
+      tab.style.cssText = `padding:0 0 8px;margin-bottom:-1px;border-bottom:2px solid transparent;font-weight:600;font-size:16px;line-height:24px;${tabDefs.length > 1 ? "cursor:pointer;" : ""}`;
+      tab.addEventListener("click", () => activate(idx));
+      tabs.appendChild(tab);
+      tabEls.push(tab);
+      bodies.push(this.buildTabBody(def.inputs, row));
     }
-    card.appendChild(body);
+    card.appendChild(tabs);
+    for (const body of bodies) card.appendChild(body);
+    activate(0);
     const footer = document.createElement("div");
-    footer.style.cssText = `display:flex;justify-content:flex-end;gap:8px;padding:14px 20px;border-top:1px solid ${border};flex:0 0 auto;`;
+    footer.style.cssText = `display:flex;justify-content:flex-end;gap:12px;padding:16px 20px;border-top:1px solid ${border};flex:0 0 auto;`;
     footer.append(
       this.dialogButton("Cancel", false, () => this.revertAndClose()),
       this.dialogButton("Ok", true, () => this.closeDialog())
@@ -10708,8 +12017,32 @@ var InputsUI = class {
     this.backdrop = backdrop;
     document.addEventListener("keydown", this.onDialogKey);
   }
+  /** One tab's scrollable body — one shared grid so every group's controls share a
+   *  left edge (a 100px number field lines up with a wider session/time pair). */
+  buildTabBody(inputs, row) {
+    const body = document.createElement("div");
+    body.style.cssText = this.mobileLayout ? "padding:16px 20px;overflow-y:auto;overflow-x:hidden;overflow-anchor:none;flex:1 1 auto;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:16px;row-gap:16px;" : "padding:16px 20px;overflow-y:auto;overflow-x:hidden;overflow-anchor:none;flex:1 1 auto;display:grid;grid-template-columns:max-content 1fr;align-items:center;column-gap:16px;row-gap:16px;";
+    for (const group of groupInputs(inputs)) {
+      const section = document.createElement("div");
+      section.style.cssText = "display:contents;";
+      if (group.name) {
+        const gh = document.createElement("div");
+        gh.textContent = group.name;
+        const first = body.childElementCount === 0;
+        gh.style.cssText = `grid-column:1 / -1;font-size:11px;font-weight:600;letter-spacing:0.05em;text-transform:uppercase;color:var(--vela-fg-muted);padding:${first ? "4px" : "20px"} 0 8px;`;
+        section.appendChild(gh);
+      }
+      for (const inputRow of group.rows) this.buildInputRow(section, inputRow, row);
+      body.appendChild(section);
+    }
+    return body;
+  }
   closeDialog() {
     document.removeEventListener("keydown", this.onDialogKey);
+    closeOpenPopovers();
+    this.choicePop = null;
+    this.calendarPop = null;
+    this.calendarAnchor = null;
     for (const dispose of this.dialogTips.splice(0)) dispose();
     this.backdrop?.remove();
     this.backdrop = null;
@@ -10737,79 +12070,77 @@ var InputsUI = class {
   buildInputRow(grid, decls, row) {
     const idOf = (inp) => `vela-inp-${row.id}-${inp.key}`;
     if (decls.length > 1) {
-      const cell = document.createElement("div");
-      cell.style.cssText = "grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;gap:12px;";
+      const cell2 = document.createElement("div");
+      cell2.style.cssText = "grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;gap:12px;";
       for (const d of decls) {
         const fit2 = d.type === "color" || d.type === "bool";
         const toggleFirst = d.type === "bool";
         const id2 = idOf(d);
         const item = document.createElement("div");
-        item.style.cssText = `display:flex;align-items:center;gap:6px;${toggleFirst ? "flex-direction:row-reverse;" : ""}`;
+        item.style.cssText = `display:flex;align-items:center;gap:8px;${toggleFirst ? "flex-direction:row-reverse;" : ""}`;
         const name = nameOf(d);
         if (name) {
           const lbl = document.createElement("label");
           lbl.htmlFor = id2;
           lbl.textContent = name;
-          lbl.style.cssText = `font-size:13px;opacity:0.9;${toggleFirst ? "cursor:pointer;" : ""}`;
+          lbl.style.cssText = `font-size:14px;opacity:0.9;${toggleFirst ? "cursor:pointer;" : ""}`;
           item.appendChild(lbl);
         }
         const cw2 = document.createElement("div");
-        cw2.style.cssText = fit2 ? "" : "width:110px;";
+        cw2.style.cssText = fit2 ? "" : "width:100px;";
         cw2.appendChild(this.buildControl(row, d, id2));
         item.appendChild(cw2);
-        cell.appendChild(item);
+        cell2.appendChild(item);
       }
       const lastTip = [...decls].reverse().find((d) => d.tooltip)?.tooltip;
-      if (lastTip) cell.appendChild(this.infoButton(lastTip));
-      grid.appendChild(cell);
+      if (lastTip) cell2.appendChild(this.infoButton(lastTip));
+      grid.appendChild(cell2);
       return;
     }
     const lead = decls[0];
     const id = idOf(lead);
     if (lead.type === "bool") {
-      const cell = document.createElement("div");
-      cell.style.cssText = "grid-column:1 / 4;display:flex;align-items:center;gap:8px;";
+      const cell2 = document.createElement("div");
+      cell2.style.cssText = "grid-column:1 / -1;display:flex;align-items:center;gap:8px;";
       const lbl = document.createElement("label");
-      lbl.style.cssText = "display:flex;align-items:center;gap:8px;cursor:pointer;font-size:13px;";
+      lbl.style.cssText = "display:flex;align-items:center;gap:8px;cursor:pointer;font-size:14px;";
       lbl.appendChild(this.buildControl(row, lead, id));
       lbl.appendChild(document.createTextNode(nameOf(lead)));
-      cell.appendChild(lbl);
-      if (lead.tooltip) cell.appendChild(this.infoButton(lead.tooltip));
-      grid.appendChild(cell);
-      grid.appendChild(document.createElement("div"));
+      cell2.appendChild(lbl);
+      if (lead.tooltip) cell2.appendChild(this.infoButton(lead.tooltip));
+      grid.appendChild(cell2);
       return;
     }
     if (lead.type === "text_area") {
-      const cell = document.createElement("div");
-      cell.style.cssText = "grid-column:1 / -1;display:flex;flex-direction:column;gap:8px;";
+      const cell2 = document.createElement("div");
+      cell2.style.cssText = "grid-column:1 / -1;display:flex;flex-direction:column;gap:8px;";
       const head = document.createElement("div");
       head.style.cssText = "display:flex;align-items:center;justify-content:center;gap:8px;";
       const lbl = document.createElement("label");
       lbl.htmlFor = id;
       lbl.textContent = nameOf(lead);
-      lbl.style.cssText = "font-size:13px;";
+      lbl.style.cssText = "font-size:14px;";
       head.appendChild(lbl);
       if (lead.tooltip) head.appendChild(this.infoButton(lead.tooltip));
-      cell.appendChild(head);
-      cell.appendChild(this.buildControl(row, lead, id));
-      grid.appendChild(cell);
+      cell2.appendChild(head);
+      cell2.appendChild(this.buildControl(row, lead, id));
+      grid.appendChild(cell2);
       return;
     }
     const label = document.createElement("label");
     label.htmlFor = id;
     label.textContent = nameOf(lead);
-    label.style.cssText = "font-size:13px;opacity:0.9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;";
-    const controlCell = document.createElement("div");
-    controlCell.style.cssText = "grid-column:span 2;display:flex;align-items:center;gap:8px;";
+    label.style.cssText = "font-size:14px;opacity:0.9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;";
     const fit = lead.type === "color" || lead.type === "session" || lead.type === "time";
+    const cell = document.createElement("div");
+    cell.style.cssText = "display:flex;align-items:center;gap:8px;justify-self:start;";
     const cw = document.createElement("div");
-    cw.style.cssText = fit ? "" : "width:140px;";
+    cw.style.cssText = fit ? "" : "width:100px;";
     cw.appendChild(this.buildControl(row, lead, id));
-    controlCell.appendChild(cw);
-    if (lead.tooltip) controlCell.appendChild(this.infoButton(lead.tooltip));
+    cell.appendChild(cw);
+    if (lead.tooltip) cell.appendChild(this.infoButton(lead.tooltip));
     grid.appendChild(label);
-    grid.appendChild(controlCell);
-    grid.appendChild(document.createElement("div"));
+    grid.appendChild(cell);
   }
   /** Build the typed control for one input, committing edits live via `onChange`. */
   buildControl(row, inp, id) {
@@ -10818,107 +12149,30 @@ var InputsUI = class {
       row.values[inp.key] = value;
       this.onChange?.({ indicatorId: row.id, key: inp.key, value });
     };
-    const ctrl = this.ctrlStyle();
     if (inp.type === "bool") return this.buildToggle(id, Boolean(current), emit);
-    if (inp.options && inp.options.length > 0) return this.select(id, inp.options.map(String), String(current), `${ctrl}cursor:pointer;`, emit);
-    if (inp.type === "source") return this.select(id, SOURCES, String(current), `${ctrl}cursor:pointer;`, emit);
+    if (inp.options && inp.options.length > 0) return this.select(id, inp.options.map(String), String(current), emit);
+    if (inp.type === "source") return this.select(id, SOURCES, String(current), emit);
     if (inp.type === "color") {
-      const ci = document.createElement("input");
-      ci.type = "color";
-      ci.id = id;
-      ci.value = toHex6(String(current));
-      ci.style.cssText = `flex:0 0 auto;box-sizing:border-box;width:32px;height:32px;padding:2px;border:1px solid ${this.neutralBorder()};border-radius:0;background:transparent;cursor:pointer;`;
-      ci.addEventListener("input", () => emit(ci.value));
-      return ci;
+      const field = colorField(this.theme, () => String(row.values[inp.key] ?? inp.defval), (v) => emit(v), { shape: "circle", id });
+      return field;
     }
     if (inp.type === "symbol") return this.buildSymbol(id, String(current), emit);
-    if (inp.type === "timeframe") return this.selectPairs(id, TIMEFRAME_OPTIONS, String(current), `${ctrl}cursor:pointer;`, emit);
+    if (inp.type === "timeframe") return this.selectPairs(id, TIMEFRAME_OPTIONS, String(current), emit);
     if (inp.type === "session") return this.buildSession(id, String(current), emit);
     if (inp.type === "time") return this.buildTime(id, Number(current) || 0, emit);
     if (inp.type === "text_area") return this.buildTextArea(id, String(current), emit);
     if (inp.type === "int" || inp.type === "float" || inp.type === "price") {
-      const ni = document.createElement("input");
-      ni.type = "number";
-      ni.id = id;
-      ni.value = String(current);
-      if (inp.min !== void 0) ni.min = String(inp.min);
-      if (inp.max !== void 0) ni.max = String(inp.max);
-      ni.step = String(inp.step ?? (inp.type === "int" ? 1 : 0.1));
-      ni.style.cssText = ctrl;
-      let last = String(current);
-      const commit = () => {
-        let n = Number(ni.value);
-        if (!Number.isFinite(n)) {
-          ni.value = last;
-          return;
-        }
-        if (inp.min !== void 0) n = Math.max(inp.min, n);
-        if (inp.max !== void 0) n = Math.min(inp.max, n);
-        if (inp.type === "int") n = Math.round(n);
-        ni.value = String(n);
-        if (String(n) !== last) {
-          last = String(n);
-          emit(n);
-        }
-      };
-      ni.addEventListener("blur", commit);
-      ni.addEventListener("keydown", (e) => {
-        if (e.key === "Enter") {
-          e.preventDefault();
-          ni.blur();
-        }
-      });
-      return ni;
+      return this.buildNumber(id, Number(current), inp, emit);
     }
     return this.buildTextField(id, String(current), emit);
   }
   /** A plain text field that commits on blur / Enter (shared by string inputs and the pickerless symbol field). */
   buildTextField(id, current, emit) {
-    const ti = document.createElement("input");
-    ti.type = "text";
-    ti.id = id;
-    ti.value = current;
-    ti.style.cssText = this.ctrlStyle();
-    let last = current;
-    ti.addEventListener("blur", () => {
-      if (ti.value !== last) {
-        last = ti.value;
-        emit(ti.value);
-      }
-    });
-    ti.addEventListener("keydown", (e) => {
-      if (e.key === "Enter") {
-        e.preventDefault();
-        ti.blur();
-      }
-    });
-    return ti;
+    return new TextField({ id, value: current, size: "md", onChange: emit }).el;
   }
   /** A square check-toggle (filled + check when on) — replaces the raw checkbox. */
   buildToggle(id, checked, onChange) {
-    const t = this.theme;
-    const border = this.neutralBorder();
-    const fill = this.strongText();
-    const b = document.createElement("button");
-    b.type = "button";
-    b.id = id;
-    b.setAttribute("role", "switch");
-    b.innerHTML = CHECK_SVG;
-    b.style.cssText = `width:20px;height:20px;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;border:1px solid ${border};border-radius:5px;cursor:pointer;padding:0;transition:background .12s ease,border-color .12s ease;`;
-    let on = checked;
-    const paint = (v) => {
-      b.setAttribute("aria-checked", v ? "true" : "false");
-      b.style.background = v ? fill : "transparent";
-      b.style.borderColor = v ? fill : border;
-      b.style.color = v ? t.background : "transparent";
-    };
-    paint(checked);
-    b.addEventListener("click", () => {
-      on = !on;
-      paint(on);
-      onChange(on);
-    });
-    return b;
+    return new Switch({ id, checked, size: "md", tone: "bright", onChange }).el;
   }
   /** A hoverable ⓘ affordance carrying an input's `tooltip` (themed chrome tip; wraps). */
   infoButton(tooltip2) {
@@ -10930,45 +12184,22 @@ var InputsUI = class {
     return b;
   }
   /** A dropdown over plain string options (value === label) — a thin case of {@link selectPairs}. */
-  select(id, options, current, style, emit) {
-    return this.selectPairs(id, options.map((o) => ({ value: o, label: o })), current, style, emit);
+  select(id, options, current, emit) {
+    return this.selectPairs(id, options.map((o) => ({ value: o, label: o })), current, emit);
   }
   /** A dropdown whose visible labels differ from the committed values (label ≠ value pairs). */
-  selectPairs(id, pairs, current, style, onChange) {
-    const sel = document.createElement("select");
-    sel.id = id;
-    sel.style.cssText = style;
-    if (current !== "" && !pairs.some((p) => p.value === current)) {
-      const o = document.createElement("option");
-      o.value = current;
-      o.textContent = current;
-      o.selected = true;
-      o.disabled = true;
-      sel.appendChild(o);
-    }
-    for (const p of pairs) {
-      const o = document.createElement("option");
-      o.value = p.value;
-      o.textContent = p.label;
-      if (p.value === current) o.selected = true;
-      sel.appendChild(o);
-    }
-    this.styleSelect(sel);
-    sel.addEventListener("change", () => onChange(sel.value));
-    return this.wrapSelectChevron(sel);
-  }
-  /** Wrap a `<select>` with an inset chevron — native arrows can't be repositioned reliably. */
-  wrapSelectChevron(sel) {
-    const wrap = document.createElement("div");
-    wrap.style.cssText = "position:relative;width:100%;";
-    sel.style.paddingRight = "28px";
-    const chevron = document.createElement("span");
-    chevron.innerHTML = SELECT_CHEVRON_SVG;
-    chevron.style.cssText = `position:absolute;right:10px;top:50%;transform:translateY(-50%);pointer-events:none;display:flex;align-items:center;color:${this.strongText()};opacity:0.85;line-height:0;`;
-    wrap.append(sel, chevron);
-    return wrap;
+  selectPairs(id, pairs, current, onChange) {
+    return new Select({
+      id,
+      options: pairs,
+      value: current,
+      size: "md",
+      theme: this.theme,
+      list: this.listPopover(),
+      onChange
+    }).el;
   }
-  /** `input.session` → two HH:MM dropdowns committing a `HHMM-HHMM` session string. */
+  /** `input.session` → two typeable HH:MM comboboxes committing a `HHMM-HHMM` session string. */
   buildSession(id, current, emit) {
     const [start, end] = sessionToTimes(current);
     const wrap = document.createElement("div");
@@ -10976,15 +12207,16 @@ var InputsUI = class {
     let from = start;
     let to = end;
     const commit = () => emit(timesToSession(from, to));
-    const startSel = this.timeSelect(id, from, 86, (v) => {
-      from = v;
-      commit();
-    });
-    const endSel = this.timeSelect(`${id}-end`, to, 86, (v) => {
-      to = v;
-      commit();
-    });
-    wrap.append(startSel, endSel);
+    wrap.append(
+      this.timeCombobox(id, from, 86, (v) => {
+        from = v;
+        commit();
+      }),
+      this.timeCombobox(`${id}-end`, to, 86, (v) => {
+        to = v;
+        commit();
+      })
+    );
     return wrap;
   }
   /** `input.time` → a date picker + an HH:MM dropdown, committing an epoch-ms timestamp. */
@@ -10999,20 +12231,15 @@ var InputsUI = class {
       const ms = Date.parse(`${date}T${time}:00`);
       if (Number.isFinite(ms)) emit(ms);
     };
-    const dateInput = document.createElement("input");
-    dateInput.type = "date";
-    dateInput.id = id;
-    dateInput.value = date;
-    dateInput.style.cssText = `${this.ctrlStyle()}width:auto;cursor:pointer;`;
-    dateInput.addEventListener("change", () => {
-      date = dateInput.value;
+    const dateField = this.dateField(id, date, (v) => {
+      date = v;
       commit();
     });
-    const timeSel = this.timeSelect(`${id}-time`, time, 86, (v) => {
+    const timeSel = this.timeCombobox(`${id}-time`, time, 86, (v) => {
       time = v;
       commit();
     });
-    wrap.append(dateInput, timeSel);
+    wrap.append(dateField, timeSel);
     return wrap;
   }
   /** `input.text_area` → a multi-line textarea, committed on blur. */
@@ -11031,9 +12258,261 @@ var InputsUI = class {
     });
     return ta;
   }
-  /** A fixed-width HH:MM dropdown (30-minute steps) used by the session + time controls. */
-  timeSelect(id, current, width, onChange) {
-    return this.selectPairs(id, TIME_OPTIONS, current, `${this.ctrlStyle()}width:${width}px;cursor:pointer;`, onChange);
+  /** A fixed-width HH:MM combobox (typeable, plus a 30-minute-step dropdown) used by session + time. */
+  timeCombobox(id, current, width, onChange) {
+    const wrap = document.createElement("div");
+    wrap.className = "vela-ind-combo";
+    wrap.style.cssText = `position:relative;width:${width}px;`;
+    const input = document.createElement("input");
+    input.type = "text";
+    input.id = id;
+    input.value = current;
+    input.autocomplete = "off";
+    input.spellcheck = false;
+    input.style.cssText = `${this.ctrlStyle()}padding-right:26px;`;
+    const chevron = document.createElement("button");
+    chevron.type = "button";
+    chevron.tabIndex = -1;
+    chevron.className = "vela-ind-combo-chevron";
+    chevron.setAttribute("aria-label", "Open time list");
+    chevron.innerHTML = CLOCK_SVG;
+    let value = current;
+    const commitTyped = () => {
+      const next = normalizeTimeInput(input.value);
+      if (!next) {
+        input.value = value;
+        return;
+      }
+      input.value = next;
+      if (next !== value) {
+        value = next;
+        onChange(next);
+      }
+    };
+    input.addEventListener("blur", () => {
+      if (isPopoverOpen()) return;
+      commitTyped();
+    });
+    const pick = (v) => {
+      value = v;
+      input.value = v;
+      onChange(v);
+    };
+    const openList = () => {
+      this.choicePop = toggleSelectList(wrap, TIME_OPTIONS, value, pick, {
+        ...this.listPopover(),
+        onClose: () => {
+          this.choicePop = null;
+        }
+      });
+    };
+    input.addEventListener("keydown", (e) => {
+      if (e.key === "Enter") {
+        e.preventDefault();
+        commitTyped();
+        input.blur();
+      }
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        openList();
+      }
+    });
+    const open2 = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      openList();
+    };
+    input.addEventListener("click", open2);
+    chevron.addEventListener("mousedown", (e) => e.preventDefault());
+    chevron.addEventListener("click", open2);
+    wrap.append(input, chevron);
+    return wrap;
+  }
+  /** A typeable YYYY-MM-DD field that also opens a themed month calendar. */
+  dateField(id, current, onChange) {
+    const wrap = document.createElement("div");
+    wrap.className = "vela-ind-combo";
+    wrap.style.cssText = "position:relative;width:128px;";
+    const input = document.createElement("input");
+    input.type = "text";
+    input.id = id;
+    input.value = current;
+    input.autocomplete = "off";
+    input.spellcheck = false;
+    input.style.cssText = `${this.ctrlStyle()}padding-right:26px;`;
+    const chevron = document.createElement("button");
+    chevron.type = "button";
+    chevron.tabIndex = -1;
+    chevron.className = "vela-ind-combo-chevron";
+    chevron.setAttribute("aria-label", "Open calendar");
+    chevron.innerHTML = CALENDAR_SVG;
+    let value = current;
+    const commitTyped = () => {
+      const next = normalizeDateInput(input.value);
+      if (!next) {
+        input.value = value;
+        return;
+      }
+      input.value = next;
+      if (next !== value) {
+        value = next;
+        onChange(next);
+      }
+    };
+    input.addEventListener("blur", () => {
+      if (isPopoverOpen()) return;
+      commitTyped();
+    });
+    const pick = (v) => {
+      value = v;
+      input.value = v;
+      onChange(v);
+    };
+    input.addEventListener("keydown", (e) => {
+      if (e.key === "Enter") {
+        e.preventDefault();
+        commitTyped();
+        input.blur();
+      }
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        this.openCalendar(wrap, value, pick);
+      }
+    });
+    const open2 = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      if (openPopoverTrigger() === wrap) {
+        closeOpenPopovers();
+        return;
+      }
+      this.openCalendar(wrap, value, pick);
+    };
+    input.addEventListener("click", open2);
+    chevron.addEventListener("mousedown", (e) => e.preventDefault());
+    chevron.addEventListener("click", open2);
+    wrap.append(input, chevron);
+    return wrap;
+  }
+  /** Numeric field with hover steppers on the right (no fill until a triangle is hovered). */
+  buildNumber(id, current, inp, emit) {
+    return new NumberInput({
+      id,
+      value: current,
+      min: inp.min,
+      max: inp.max,
+      step: inp.step ?? (inp.type === "int" ? 1 : 0.1),
+      integer: inp.type === "int",
+      size: "md",
+      commit: "blur",
+      onChange: emit
+    }).el;
+  }
+  /** Placement shared by the indicator dialog's dropdowns and the time combobox. */
+  listPopover() {
+    return {
+      theme: this.theme,
+      matchWidth: true,
+      boundary: this.dialog ?? "viewport",
+      boundaryInset: 8,
+      gap: 4
+    };
+  }
+  /** Open a themed month calendar under `anchor` — same surface + shadow as the choice list. */
+  openCalendar(anchor, current, onPick) {
+    const parsed = parseIsoDate(current);
+    let year = parsed?.getFullYear() ?? (/* @__PURE__ */ new Date()).getFullYear();
+    let month = parsed?.getMonth() ?? (/* @__PURE__ */ new Date()).getMonth();
+    const selected = parsed ? isoDate(parsed) : current;
+    const pop = new Popover({
+      trigger: anchor,
+      theme: this.theme,
+      className: "vela-ind-cal",
+      boundary: this.dialog ?? "viewport",
+      boundaryInset: 8,
+      gap: 4,
+      onClose: () => {
+        this.calendarPop = null;
+        this.calendarAnchor = null;
+      },
+      content: (el) => {
+        const title = document.createElement("div");
+        title.className = "vela-ind-cal-title";
+        const prev2 = document.createElement("button");
+        prev2.type = "button";
+        prev2.className = "vela-ind-cal-nav";
+        prev2.setAttribute("aria-label", "Previous month");
+        prev2.innerHTML = iconAt("chevron-left", 14);
+        const next = document.createElement("button");
+        next.type = "button";
+        next.className = "vela-ind-cal-nav";
+        next.setAttribute("aria-label", "Next month");
+        next.innerHTML = iconAt("chevron-right", 14);
+        const head = document.createElement("div");
+        head.className = "vela-ind-cal-head";
+        head.append(prev2, title, next);
+        const week = document.createElement("div");
+        week.className = "vela-ind-cal-week";
+        for (const d of WEEKDAY_LABELS) {
+          const cell = document.createElement("span");
+          cell.textContent = d;
+          week.appendChild(cell);
+        }
+        const grid = document.createElement("div");
+        grid.className = "vela-ind-cal-grid";
+        const paint = () => {
+          title.textContent = `${MONTH_LABELS[month]} ${year}`;
+          grid.replaceChildren();
+          const first = new Date(year, month, 1);
+          const startPad = first.getDay();
+          const days = new Date(year, month + 1, 0).getDate();
+          const today = isoDate(/* @__PURE__ */ new Date());
+          for (let i = 0; i < startPad; i++) {
+            const blank = document.createElement("span");
+            blank.className = "vela-ind-cal-blank";
+            grid.appendChild(blank);
+          }
+          for (let day = 1; day <= days; day++) {
+            const iso = `${year}-${String(month + 1).padStart(2, "0")}-${String(day).padStart(2, "0")}`;
+            const b = document.createElement("button");
+            b.type = "button";
+            b.className = "vela-ind-cal-day";
+            b.textContent = String(day);
+            if (iso === selected) b.dataset.checked = "1";
+            if (iso === today) b.dataset.today = "1";
+            b.addEventListener("click", (e) => {
+              e.stopPropagation();
+              pop.hide();
+              onPick(iso);
+            });
+            grid.appendChild(b);
+          }
+        };
+        prev2.addEventListener("click", (e) => {
+          e.stopPropagation();
+          month -= 1;
+          if (month < 0) {
+            month = 11;
+            year -= 1;
+          }
+          paint();
+        });
+        next.addEventListener("click", (e) => {
+          e.stopPropagation();
+          month += 1;
+          if (month > 11) {
+            month = 0;
+            year += 1;
+          }
+          paint();
+        });
+        paint();
+        el.append(head, week, grid);
+      }
+    });
+    this.calendarPop = pop;
+    this.calendarAnchor = anchor;
+    pop.show();
   }
   /**
    * `input.symbol` → a field that opens the host's ticker-selection UI when a picker is wired
@@ -11061,7 +12540,7 @@ var InputsUI = class {
   }
   /** Shared field chrome for text / number / select controls (fills its wrapper's width). */
   ctrlStyle() {
-    return `width:100%;box-sizing:border-box;height:32px;background:transparent;border:1px solid ${this.neutralBorder()};color:${this.strongText()};border-radius:6px;padding:0 8px;font-size:13px;font-family:inherit;outline:none;`;
+    return `width:100%;box-sizing:border-box;height:34px;background:transparent;border:1px solid var(--vela-border-strong);color:${this.strongText()};border-radius:6px;padding:0 8px;font-size:14px;font-family:inherit;outline:none;`;
   }
   /** Whether the active theme is dark (drives the dialog's `color-scheme`). */
   isDarkTheme() {
@@ -11080,21 +12559,6 @@ var InputsUI = class {
   strongText() {
     return "var(--vela-fg-bright)";
   }
-  /**
-   * Paint a `<select>` + its `<option>`s so the native dropdown popup matches the dialog: the
-   * option list's background is the dialog color and its text is the strong foreground. `color-scheme`
-   * alone doesn't theme the popup in every embedded browser (some render it white with white text —
-   * invisible), so the colors are set explicitly here.
-   */
-  styleSelect(sel) {
-    const bg = this.theme.background;
-    const fg = this.strongText();
-    sel.style.backgroundColor = bg;
-    for (const o of Array.from(sel.options)) {
-      o.style.backgroundColor = bg;
-      o.style.color = fg;
-    }
-  }
   dialogButton(label, primary, onClick) {
     const b = document.createElement("button");
     b.type = "button";
@@ -11108,6 +12572,21 @@ function nameOf(inp) {
   const t = inp.title;
   return t.length > 0 ? t.charAt(0).toUpperCase() + t.slice(1) : "";
 }
+var DEFAULT_INPUT_TAB = "Inputs";
+function tabInputs(inputs) {
+  const byTab = /* @__PURE__ */ new Map();
+  for (const inp of inputs) {
+    const name = inp.tab && inp.tab.length > 0 ? inp.tab : DEFAULT_INPUT_TAB;
+    if (!byTab.has(name)) byTab.set(name, []);
+    byTab.get(name).push(inp);
+  }
+  const names = [...byTab.keys()];
+  if (names.includes(DEFAULT_INPUT_TAB)) {
+    names.splice(names.indexOf(DEFAULT_INPUT_TAB), 1);
+    names.unshift(DEFAULT_INPUT_TAB);
+  }
+  return names.map((name) => ({ name, inputs: byTab.get(name) }));
+}
 function groupInputs(inputs) {
   const order = [];
   const byGroup = /* @__PURE__ */ new Map();
@@ -11136,9 +12615,10 @@ function groupInputs(inputs) {
   });
 }
 var CHECK_SVG = iconAt("check", 12);
-var SELECT_CHEVRON_SVG = iconAt("chevron-down", 16);
+var CALENDAR_SVG = iconAt("calendar", 14);
+var CLOCK_SVG = iconAt("clock", 14);
 var DIALOG_STYLE_ID = "vela-ind-dialog-styles";
-var DIALOG_STYLE_REV = "10";
+var DIALOG_STYLE_REV = "25";
 function ensureDialogStyles() {
   if (typeof document === "undefined") return;
   const existing = document.getElementById(DIALOG_STYLE_ID);
@@ -11147,30 +12627,47 @@ function ensureDialogStyles() {
   s.id = DIALOG_STYLE_ID;
   s.dataset.rev = DIALOG_STYLE_REV;
   s.textContent = `
-.vela-ind-dialog input[type=color]{-webkit-appearance:none;appearance:none;}
-.vela-ind-dialog input[type=color]::-webkit-color-swatch-wrapper{padding:0;}
-.vela-ind-dialog input[type=color]::-webkit-color-swatch{border:none;border-radius:4px;}
-.vela-ind-dialog input[type=color]::-moz-color-swatch{border:none;border-radius:4px;}
-.vela-ind-dialog input[type=text],.vela-ind-dialog input[type=number],.vela-ind-dialog select{transition:border-color .12s ease,box-shadow .12s ease;}
-.vela-ind-dialog select{-webkit-appearance:none;appearance:none;}
-.vela-ind-dialog input[type=text]:focus,.vela-ind-dialog input[type=number]:focus,.vela-ind-dialog select:focus{border-color:var(--vela-focus);box-shadow:0 0 0 3px var(--vela-focus-soft);}
-.vela-ind-dialog ::-webkit-scrollbar{width:9px;}
+.vela-ind-dialog input[type=text],.vela-ind-dialog input[type=number],.vela-ind-dialog input[type=date]{transition:border-color .12s ease,box-shadow .12s ease;}
+.vela-ind-dialog input[type=text]:hover,.vela-ind-dialog input[type=number]:hover,.vela-ind-dialog input[type=date]:hover{border-color:var(--vela-fg-muted);}
+.vela-ind-dialog input[type=text]:focus,.vela-ind-dialog input[type=number]:focus,.vela-ind-dialog input[type=date]:focus{border-color:var(--vela-focus);box-shadow:0 0 0 3px var(--vela-focus-soft);}
+.vela-ind-combo-chevron{position:absolute;right:0;top:0;bottom:0;width:26px;border:none;background:transparent;color:inherit;opacity:0.55;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;}
+.vela-ind-combo-chevron:hover{opacity:0.9;}
+.vela-ind-cal{background:var(--vela-bg);color:var(--vela-fg);border:none;border-radius:6px;box-shadow:var(--vela-shadow);font:14px var(--vela-font);padding:10px 12px;user-select:none;}
+.vela-ind-cal-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px;}
+.vela-ind-cal-title{flex:1;text-align:center;font-weight:600;font-size:14px;color:var(--vela-fg-bright);}
+.vela-ind-cal-nav{width:24px;height:24px;border:none;background:transparent;color:var(--vela-fg-muted);border-radius:4px;padding:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;}
+.vela-ind-cal-nav:hover{background:var(--vela-hover);color:var(--vela-fg-bright);}
+.vela-ind-cal-week,.vela-ind-cal-grid{display:grid;grid-template-columns:repeat(7,28px);gap:2px;}
+.vela-ind-cal-week{margin-bottom:4px;color:var(--vela-fg-muted);font-size:11px;text-align:center;}
+.vela-ind-cal-week span{line-height:20px;}
+.vela-ind-cal-blank{width:28px;height:28px;}
+.vela-ind-cal-day{width:28px;height:28px;border:none;background:transparent;color:inherit;border-radius:4px;padding:0;cursor:pointer;font:inherit;font-size:14px;}
+.vela-ind-cal-day:hover{background:var(--vela-hover);}
+.vela-ind-cal-day[data-checked]{background:var(--vela-hover-strong);color:var(--vela-fg-bright);}
+.vela-ind-cal-day[data-today]:not([data-checked]){box-shadow:inset 0 0 0 1px var(--vela-border-strong);}
+.vela-ind-dialog ::-webkit-scrollbar{width:9px;height:9px;}
 .vela-ind-dialog ::-webkit-scrollbar-thumb{background:var(--vela-scroll);border-radius:4px;border:2px solid transparent;background-clip:padding-box;}
 .vela-ind-dialog ::-webkit-scrollbar-track{background:transparent;}
+.vela-ind-dialog ::-webkit-scrollbar-button{display:none;width:0;height:0;}
+.vela-ind-tab{transition:color var(--vela-dur-fast) ease,border-color var(--vela-dur-fast) ease;}
+.vela-ind-tab:not(.vela-ind-tab-active):hover{color:var(--vela-fg-bright);}
 .vela-ind-hint{background:var(--vela-hover);color:var(--vela-fg-muted);transition:background var(--vela-dur-fast) ease,color var(--vela-dur-fast) ease;}
 .vela-ind-hint:hover{background:var(--vela-active);color:var(--vela-fg-bright);}
 .vela-ind-ctl,.vela-ind-close{background-color:transparent;color:inherit;transition:color var(--vela-dur-fast) ease,background-color var(--vela-dur-fast) ease;}
 .vela-ind-ctl svg,.vela-ind-close svg{width:${LEGEND_ICON_PX}px;height:${LEGEND_ICON_PX}px;display:block;flex:none;stroke-width:1;}
 .vela-ind-ctl:hover{background-color:var(--vela-hover-strong);}
 .vela-ind-close:hover{color:var(--vela-danger) !important;background-color:var(--vela-hover-strong);}
+.vela-ind-dlg-close{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:none;color:var(--vela-fg-muted);line-height:0;width:30px;height:30px;flex:0 0 auto;border-radius:var(--vela-radius-sm);transition:background var(--vela-dur-fast) ease,color var(--vela-dur-fast) ease;}
+.vela-ind-dlg-close:hover{background:var(--vela-hover);color:var(--vela-fg-bright);}
+.vela-ind-dlg-close svg{width:15px;height:15px;display:block;flex:none;}
 .vela-ind-fold{transition:border-color var(--vela-dur-fast) ease,opacity var(--vela-dur-fast) ease;}
 .vela-ind-fold:hover{border-color:var(--vela-border-strong);opacity:0.9;}
 .vela-ind-menuitem{background:transparent;transition:background var(--vela-dur-fast) ease;}
 .vela-ind-menuitem:hover{background:var(--vela-hover-strong);}
-.vela-ind-btn{cursor:pointer;padding:7px 14px;border-radius:var(--vela-radius-md);border:1px solid transparent;background:transparent;color:var(--vela-fg-muted);font-weight:600;font-size:13px;font-family:inherit;transition:background var(--vela-dur-fast) ease,color var(--vela-dur-fast) ease,opacity var(--vela-dur-fast) ease;}
-.vela-ind-btn:hover{background:var(--vela-hover);color:var(--vela-fg-bright);}
-.vela-ind-btn-primary{padding:7px 16px;border-color:var(--vela-selected-bg);background:var(--vela-selected-bg);color:var(--vela-selected-fg);}
-.vela-ind-btn-primary:hover{background:var(--vela-selected-bg);color:var(--vela-selected-fg);opacity:0.85;}`;
+.vela-ind-btn{cursor:pointer;height:34px;padding:0 11px;border-radius:6px;border:1px solid var(--vela-border-strong);background:transparent;color:var(--vela-fg);font-weight:400;font-size:14px;font-family:inherit;transition:background var(--vela-dur-fast) ease,color var(--vela-dur-fast) ease,opacity var(--vela-dur-fast) ease,border-color var(--vela-dur-fast) ease;}
+.vela-ind-btn:hover{background:var(--vela-hover);color:var(--vela-fg-bright);border-color:var(--vela-fg-muted);}
+.vela-ind-btn-primary{border-color:var(--vela-selected-bg);background:var(--vela-selected-bg);color:var(--vela-selected-fg);}
+.vela-ind-btn-primary:hover{background:var(--vela-selected-bg);color:var(--vela-selected-fg);opacity:0.85;border-color:var(--vela-selected-bg);}`;
   if (!existing) document.head.appendChild(s);
 }
 var TIMEFRAME_OPTIONS = [
@@ -11195,6 +12692,37 @@ var TIME_OPTIONS = Array.from({ length: 48 }, (_, i) => {
   const v = `${hh}:${mm}`;
   return { value: v, label: v };
 });
+var MONTH_LABELS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
+var WEEKDAY_LABELS = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
+function normalizeDateInput(raw) {
+  const t = raw.trim();
+  const m = /^(\d{4})-(\d{1,2})-(\d{1,2})$/.exec(t);
+  if (!m) return null;
+  const y = Number(m[1]);
+  const mo = Number(m[2]);
+  const d = Number(m[3]);
+  const dt = new Date(y, mo - 1, d);
+  if (dt.getFullYear() !== y || dt.getMonth() !== mo - 1 || dt.getDate() !== d) return null;
+  return isoDate(dt);
+}
+function parseIsoDate(raw) {
+  const iso = normalizeDateInput(raw);
+  if (!iso) return null;
+  const [y, mo, d] = iso.split("-").map(Number);
+  return new Date(y, mo - 1, d);
+}
+function isoDate(d) {
+  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
+}
+function normalizeTimeInput(raw) {
+  const t = raw.trim();
+  const m = /^(\d{1,2}):(\d{2})$/.exec(t) ?? /^(\d{2})(\d{2})$/.exec(t);
+  if (!m) return null;
+  const hh = Number(m[1]);
+  const mm = Number(m[2]);
+  if (hh > 23 || mm > 59) return null;
+  return `${String(hh).padStart(2, "0")}:${String(mm).padStart(2, "0")}`;
+}
 function sessionToTimes(session) {
   const m = /^(\d{2})(\d{2})-(\d{2})(\d{2})$/.exec(session.trim());
   if (!m) return ["09:00", "16:00"];
@@ -15301,6 +16829,12 @@ function extendEndpoints(x1, y1, x2, y2, extend, width, height) {
   const rx = right ? width + 2 : Math.max(x1, x2);
   return [lx, yAt(lx), rx, yAt(rx)];
 }
+function uprightLineAngle(x1, y1, x2, y2) {
+  let a = Math.atan2(y2 - y1, x2 - x1);
+  if (a > Math.PI / 2) a -= Math.PI;
+  if (a < -Math.PI / 2) a += Math.PI;
+  return a;
+}
 function parseColor2(c) {
   const s = c.trim();
   let m = /^#([0-9a-f]{3})$/i.exec(s);
@@ -16555,380 +18089,71 @@ function tzButtonLabel(zone) {
   return tzOffset(zone);
 }
 
-// src/core/drawings/effectiveColor.ts
-var VALID_FILL = VALID;
-var INVALID_FILL = INVALID;
-function effectiveFillColor(d, theme) {
-  if (d instanceof PatternDrawing) {
-    if (!d.fillTriangles().length) return null;
-    const valid = d.valid();
-    return d.style.fillColor ?? (valid == null ? d.style.lineColor : valid ? VALID_FILL : INVALID_FILL);
-  }
-  if (d instanceof CalloutBase) return d.style.fillColor ?? theme.background;
-  return d.style.fillColor ?? null;
-}
-
-// src/renderers/native/drawings/colorPicker.ts
-function splitColor(color) {
-  const s = String(color ?? "").trim();
-  let m = /^#([0-9a-f]{6})([0-9a-f]{2})?$/i.exec(s);
-  if (m) return { hex6: `#${m[1].toLowerCase()}`, alpha: m[2] ? parseInt(m[2], 16) / 255 : 1 };
-  m = /^#([0-9a-f]{3})$/i.exec(s);
-  if (m) {
-    const h = m[1].toLowerCase();
-    return { hex6: `#${h[0]}${h[0]}${h[1]}${h[1]}${h[2]}${h[2]}`, alpha: 1 };
-  }
-  const rgba = /^rgba?\(([^)]+)\)/i.exec(s);
-  if (rgba) {
-    const p = rgba[1].split(",").map((v) => v.trim());
-    const hx = (n) => Math.max(0, Math.min(255, Math.round(n))).toString(16).padStart(2, "0");
-    const a = p[3] != null ? Math.max(0, Math.min(1, parseFloat(p[3]))) : 1;
-    return { hex6: `#${hx(parseInt(p[0] ?? "0", 10))}${hx(parseInt(p[1] ?? "0", 10))}${hx(parseInt(p[2] ?? "0", 10))}`, alpha: a };
-  }
-  return { hex6: DEFAULT_DRAWING_COLOR, alpha: 1 };
-}
-function combineColor(hex6, alpha) {
-  const a = Math.max(0, Math.min(1, alpha));
-  if (a >= 0.999) return hex6;
-  return `${hex6}${Math.round(a * 255).toString(16).padStart(2, "0")}`;
-}
-function blendOver(fg, bg, alpha) {
-  const rgb = (c) => {
-    const n = parseInt(splitColor(c).hex6.slice(1), 16);
-    return [n >> 16 & 255, n >> 8 & 255, n & 255];
-  };
-  const [fr, fgc, fb] = rgb(fg);
-  const [br, bgc, bb] = rgb(bg);
-  const a = Math.max(0, Math.min(1, alpha));
-  const h = (n) => Math.round(n).toString(16).padStart(2, "0");
-  return `#${h(fr * a + br * (1 - a))}${h(fgc * a + bgc * (1 - a))}${h(fb * a + bb * (1 - a))}`;
-}
-function hslHex(h, s, l) {
-  const sn = s / 100;
-  const ln = l / 100;
-  const k = (n) => (n + h / 30) % 12;
-  const a = sn * Math.min(ln, 1 - ln);
-  const f = (n) => ln - a * Math.max(-1, Math.min(k(n) - 3, Math.min(9 - k(n), 1)));
-  const to = (x) => Math.round(x * 255).toString(16).padStart(2, "0");
-  return `#${to(f(0))}${to(f(8))}${to(f(4))}`;
-}
-function buildPalette() {
-  const grays = [100, 90, 80, 68, 56, 45, 35, 25, 14, 0].map((l) => hslHex(0, 0, l));
-  const hues = [4, 28, 50, 96, 140, 174, 200, 224, 270, 322];
-  const levels = [
-    [82, 56],
-    // vivid
-    [58, 84],
-    // light pastel
-    [62, 74],
-    [66, 62],
-    [70, 50],
-    [64, 39],
-    [54, 29]
-    // dark
-  ];
-  return [grays, ...levels.map(([s, l]) => hues.map((h) => hslHex(h, s, l)))];
-}
-var PALETTE = buildPalette();
-function transparencyChecker(size) {
-  return `repeating-conic-gradient(#9aa0a6 0% 25%, #d3d6da 0% 50%) 0 0 / ${size}px ${size}px`;
-}
-var CHECKER = transparencyChecker(10);
-var recents = [ACCENT, BULLISH, BEARISH, WARNING, NEUTRAL];
-function addRecent(hex6) {
-  const i = recents.findIndex((c) => c.toLowerCase() === hex6.toLowerCase());
-  if (i >= 0) recents.splice(i, 1);
-  recents.unshift(hex6);
-  if (recents.length > 10) recents.length = 10;
-}
-function buildColorPicker(color, theme, onChange) {
-  const parsed = splitColor(color);
-  let curHex = parsed.hex6;
-  let curAlpha = parsed.alpha;
-  const root = document.createElement("div");
-  root.style.cssText = "display:flex;flex-direction:column;gap:9px;width:236px;";
-  const grid = document.createElement("div");
-  grid.style.cssText = "display:grid;grid-template-columns:repeat(10,1fr);gap:4px;";
-  const swatches = [];
-  for (const row of PALETTE) {
-    for (const c of row) {
-      const sw = document.createElement("button");
-      sw.type = "button";
-      sw.dataset.c = c;
-      sw.style.cssText = `width:100%;aspect-ratio:1;border-radius:4px;border:none;cursor:pointer;background:${c};padding:0;`;
-      sw.addEventListener("click", (e) => {
-        e.stopPropagation();
-        pickHex(c);
-      });
-      grid.appendChild(sw);
-      swatches.push(sw);
-    }
-  }
-  const paintSelection = () => {
-    for (const sw of swatches) {
-      const on = (sw.dataset.c ?? "").toLowerCase() === curHex.toLowerCase();
-      sw.style.outline = on ? `2px solid ${theme.textColor}` : "none";
-      sw.style.outlineOffset = "2px";
-      sw.style.zIndex = on ? "1" : "";
-      sw.style.position = on ? "relative" : "";
-    }
-  };
-  const recentRow = document.createElement("div");
-  recentRow.style.cssText = "display:flex;align-items:center;gap:5px;flex-wrap:wrap;border-top:1px solid var(--vela-border);padding-top:9px;";
-  const renderRecents = () => {
-    recentRow.replaceChildren();
-    for (const c of recents) {
-      const sw = document.createElement("button");
-      sw.type = "button";
-      sw.style.cssText = `width:17px;height:17px;border-radius:var(--vela-radius-sm);border:1px solid var(--vela-border);cursor:pointer;background:${c};padding:0;`;
-      sw.addEventListener("click", (e) => {
-        e.stopPropagation();
-        pickHex(c);
-      });
-      recentRow.appendChild(sw);
-    }
-    const add = document.createElement("label");
-    add.style.cssText = `width:17px;height:17px;border-radius:var(--vela-radius-sm);border:1px dashed var(--vela-border-strong);cursor:pointer;display:flex;align-items:center;justify-content:center;color:${theme.textColor};font:14px ${theme.fontFamily};position:relative;`;
-    add.textContent = "+";
-    const input = document.createElement("input");
-    input.type = "color";
-    input.value = curHex;
-    input.style.cssText = "position:absolute;inset:0;opacity:0;cursor:pointer;";
-    input.addEventListener("input", () => pickHex(input.value, true));
-    add.appendChild(input);
-    recentRow.appendChild(add);
-  };
-  const opLabel = document.createElement("div");
-  opLabel.textContent = "Opacity";
-  opLabel.style.cssText = `font:11px ${theme.fontFamily};color:var(--vela-fg-muted);`;
-  const opRow = document.createElement("div");
-  opRow.style.cssText = "display:flex;align-items:center;gap:10px;";
-  const track = document.createElement("div");
-  track.style.cssText = "flex:1;position:relative;height:13px;border-radius:7px;cursor:pointer;";
-  const knob = document.createElement("div");
-  knob.style.cssText = "position:absolute;top:50%;width:15px;height:15px;border-radius:50%;background:var(--vela-selected-bg);box-shadow:0 1px 3px rgba(0,0,0,0.55);transform:translate(-50%,-50%);pointer-events:none;";
-  track.appendChild(knob);
-  const pctBox = document.createElement("div");
-  pctBox.style.cssText = `min-width:42px;text-align:center;font:var(--vela-font-size-md) ${theme.fontFamily};color:var(--vela-fg);border:1px solid var(--vela-border);border-radius:5px;padding:3px 4px;`;
-  opRow.append(track, pctBox);
-  const paintOpacity = () => {
-    track.style.background = `linear-gradient(to right, ${curHex}00, ${curHex}ff), ${CHECKER}`;
-    knob.style.left = `${curAlpha * 100}%`;
-    pctBox.textContent = `${Math.round(curAlpha * 100)}%`;
-  };
-  let dragging = false;
-  const onDrag = (clientX) => {
-    const r = track.getBoundingClientRect();
-    curAlpha = Math.max(0, Math.min(1, (clientX - r.left) / r.width));
-    paintOpacity();
-    emit();
-  };
-  track.addEventListener("pointerdown", (e) => {
-    e.stopPropagation();
-    dragging = true;
-    track.setPointerCapture(e.pointerId);
-    onDrag(e.clientX);
-  });
-  track.addEventListener("pointermove", (e) => {
-    if (dragging) onDrag(e.clientX);
-  });
-  track.addEventListener("pointerup", () => dragging = false);
-  function emit() {
-    onChange(combineColor(curHex, curAlpha));
-  }
-  function pickHex(hex, custom = false) {
-    curHex = splitColor(hex).hex6;
-    addRecent(curHex);
-    paintSelection();
-    paintOpacity();
-    if (custom) renderRecents();
-    emit();
-  }
-  renderRecents();
-  paintSelection();
-  paintOpacity();
-  root.append(grid, recentRow, opLabel, opRow);
-  return root;
-}
-
-// src/renderers/native/chrome/ColorField.ts
-var CHECKER2 = transparencyChecker(8);
-var STYLE_ID2 = "vela-color-field";
-function ensureStyles2() {
-  if (typeof document === "undefined" || document.getElementById(STYLE_ID2)) return;
-  const st = document.createElement("style");
-  st.id = STYLE_ID2;
-  st.textContent = `
-.vela-color-field{width:24px;height:24px;padding:2px;border:1px solid var(--vela-border);border-radius:0;background:var(--vela-surface-sunken);cursor:pointer;display:inline-flex;flex:none;}
-.vela-color-field:hover{border-color:var(--vela-fg-muted);}
-.vela-color-field-swatch{display:block;width:100%;height:100%;border-radius:0;box-shadow:inset 0 0 0 1px rgba(0,0,0,0.25);}
-.vela-color-field-pop{position:fixed;z-index:6000;background:var(--vela-surface-overlay);border:1px solid var(--vela-border);border-radius:var(--vela-radius-lg);box-shadow:var(--vela-shadow);padding:10px;}
-`;
-  document.head.appendChild(st);
-}
-var openPopover = null;
-function closeOpen() {
-  if (!openPopover) return;
-  document.removeEventListener("pointerdown", openPopover.onOutside, true);
-  window.removeEventListener("resize", openPopover.reflow, true);
-  openPopover.el.remove();
-  openPopover = null;
-}
-function place(pop, trigger) {
-  const r = trigger.getBoundingClientRect();
-  const w = pop.offsetWidth;
-  const h = pop.offsetHeight;
-  let left = r.right - w;
-  let top = r.bottom + 6;
-  if (left < 6) left = 6;
-  if (left + w > window.innerWidth - 6) left = window.innerWidth - w - 6;
-  if (top + h > window.innerHeight - 6) top = r.top - h - 6;
-  if (top < 6) top = 6;
-  pop.style.left = `${Math.round(left)}px`;
-  pop.style.top = `${Math.round(top)}px`;
-}
-function colorField(theme, getVal, onVal) {
-  ensureStyles2();
-  const trigger = document.createElement("button");
-  trigger.type = "button";
-  trigger.className = "vela-color-field";
-  const swatch = document.createElement("span");
-  swatch.className = "vela-color-field-swatch";
-  trigger.appendChild(swatch);
-  const paint = () => {
-    const v = getVal();
-    swatch.style.background = `linear-gradient(${v}, ${v}), ${CHECKER2}`;
-  };
-  paint();
-  trigger.addEventListener("vela-sync", paint);
-  trigger.addEventListener("click", (e) => {
-    e.stopPropagation();
-    if (openPopover && openPopover.trigger === trigger) {
-      closeOpen();
-      return;
-    }
-    closeOpen();
-    const pop = document.createElement("div");
-    pop.className = "vela-color-field-pop";
-    applyChromeTokens(pop, theme);
-    pop.addEventListener("pointerdown", (ev) => ev.stopPropagation());
-    pop.appendChild(
-      buildColorPicker(getVal(), theme, (val) => {
-        onVal(val);
-        paint();
-      })
-    );
-    document.body.appendChild(pop);
-    place(pop, trigger);
-    const onOutside = (ev) => {
-      const t = ev.target;
-      if (pop.contains(t) || trigger.contains(t)) return;
-      closeOpen();
-    };
-    const reflow = () => place(pop, trigger);
-    setTimeout(() => document.addEventListener("pointerdown", onOutside, true), 0);
-    window.addEventListener("resize", reflow, true);
-    openPopover = { el: pop, trigger, onOutside, reflow };
-  });
-  return trigger;
-}
-function closeColorPopover() {
-  closeOpen();
-}
-
 // src/renderers/native/chrome/WidthField.ts
 var WIDTH_FIELD_OPTIONS = [1, 2, 3, 4, 5];
-var STYLE_ID3 = "vela-width-field";
-function ensureStyles3() {
-  if (typeof document === "undefined" || document.getElementById(STYLE_ID3)) return;
-  const st = document.createElement("style");
-  st.id = STYLE_ID3;
-  st.textContent = `
+var STYLE_ID2 = "vela-width-field";
+var WIDTH_CSS = `
 .vela-width-field{height:28px;padding:0 8px;border:1px solid var(--vela-border-strong);border-radius:var(--vela-radius-sm);background:var(--vela-surface-elev);cursor:pointer;display:inline-flex;align-items:center;gap:8px;flex:none;color:var(--vela-fg);font-family:inherit;outline:none;}
 .vela-width-field:hover{border-color:var(--vela-fg-muted);}
-.vela-width-field-pop{position:fixed;z-index:6000;background:var(--vela-surface-overlay);border:1px solid var(--vela-border);border-radius:var(--vela-radius-lg);box-shadow:var(--vela-shadow);padding:4px;display:flex;flex-direction:column;gap:1px;color:var(--vela-fg);}
+.vela-width-field-caret{display:flex;color:var(--vela-fg-muted);}
+.vela-width-field-pop{background:var(--vela-surface-overlay);border:1px solid var(--vela-border);border-radius:var(--vela-radius-lg);box-shadow:var(--vela-shadow);padding:4px;display:flex;flex-direction:column;gap:1px;color:var(--vela-fg);}
 .vela-width-field-item{display:flex;align-items:center;gap:8px;min-width:96px;padding:5px 8px;border:none;border-radius:5px;background:transparent;color:inherit;cursor:pointer;text-align:left;font:inherit;}
 .vela-width-field-item:hover{background:var(--vela-hover-strong);}
 .vela-width-field-item[data-active='1']{background:var(--vela-active);}
 `;
-  document.head.appendChild(st);
-}
 function lineGlyph(width) {
   return `<svg width="22" height="14" viewBox="0 0 22 14" fill="none"><line x1="2" y1="7" x2="20" y2="7" stroke="currentColor" stroke-width="${width}" stroke-linecap="round"/></svg>`;
 }
-var CHEVRON = `<svg width="8" height="5" viewBox="0 0 8 5" fill="none"><path d="M1 1l3 3 3-3" stroke="#868a96" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>`;
-var openPopover2 = null;
-function closeOpen2() {
-  if (!openPopover2) return;
-  document.removeEventListener("pointerdown", openPopover2.onOutside, true);
-  window.removeEventListener("resize", openPopover2.reflow, true);
-  openPopover2.el.remove();
-  openPopover2 = null;
-}
-function place2(pop, trigger) {
-  const r = trigger.getBoundingClientRect();
-  const w = pop.offsetWidth;
-  const h = pop.offsetHeight;
-  let left = r.right - w;
-  let top = r.bottom + 6;
-  if (left < 6) left = 6;
-  if (left + w > window.innerWidth - 6) left = window.innerWidth - w - 6;
-  if (top + h > window.innerHeight - 6) top = r.top - h - 6;
-  if (top < 6) top = 6;
-  pop.style.left = `${Math.round(left)}px`;
-  pop.style.top = `${Math.round(top)}px`;
-}
+var CHEVRON = `<svg width="8" height="5" viewBox="0 0 8 5" fill="none"><path d="M1 1l3 3 3-3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>`;
 function widthField(theme, getVal, onVal) {
-  ensureStyles3();
+  injectStyles(STYLE_ID2, WIDTH_CSS, document);
   const trigger = document.createElement("button");
   trigger.type = "button";
   trigger.className = "vela-width-field";
   const paint = () => {
-    trigger.innerHTML = `<span style="display:flex;">${lineGlyph(getVal())}</span><span style="display:flex;">${CHEVRON}</span>`;
+    trigger.innerHTML = `<span style="display:flex;">${lineGlyph(getVal())}</span><span class="vela-width-field-caret">${CHEVRON}</span>`;
   };
   paint();
+  trigger.addEventListener("pointerdown", (e) => {
+    e.preventDefault();
+    trigger.focus({ preventScroll: true });
+  });
   trigger.addEventListener("click", (e) => {
     e.stopPropagation();
-    if (openPopover2 && openPopover2.trigger === trigger) {
-      closeOpen2();
+    if (openPopoverTrigger() === trigger) {
+      closeOpenPopovers();
       return;
     }
-    closeOpen2();
-    const pop = document.createElement("div");
-    pop.className = "vela-width-field-pop";
-    applyChromeTokens(pop, theme);
-    pop.style.font = `var(--vela-font-size-md) ${theme.fontFamily}`;
-    pop.addEventListener("pointerdown", (ev) => ev.stopPropagation());
-    for (const w of WIDTH_FIELD_OPTIONS) {
-      const item = document.createElement("button");
-      item.type = "button";
-      item.className = "vela-width-field-item";
-      item.dataset.active = w === getVal() ? "1" : "0";
-      item.innerHTML = `<span style="display:flex;flex:none;">${lineGlyph(w)}</span><span style="flex:1;font-variant-numeric:tabular-nums;">${w}px</span>`;
-      item.addEventListener("click", (ev) => {
-        ev.stopPropagation();
-        closeOpen2();
-        onVal(w);
-        paint();
-      });
-      pop.appendChild(item);
-    }
-    document.body.appendChild(pop);
-    place2(pop, trigger);
-    const onOutside = (ev) => {
-      const t = ev.target;
-      if (pop.contains(t) || trigger.contains(t)) return;
-      closeOpen2();
-    };
-    const reflow = () => place2(pop, trigger);
-    setTimeout(() => document.addEventListener("pointerdown", onOutside, true), 0);
-    window.addEventListener("resize", reflow, true);
-    openPopover2 = { el: pop, trigger, onOutside, reflow };
+    const pop = new Popover({
+      trigger,
+      theme,
+      align: "end",
+      gap: 6,
+      className: "vela-width-field-pop",
+      content: (el) => {
+        el.style.font = `var(--vela-font-size-md) ${theme.fontFamily}`;
+        for (const w of WIDTH_FIELD_OPTIONS) {
+          const item = document.createElement("button");
+          item.type = "button";
+          item.className = "vela-width-field-item";
+          item.dataset.active = w === getVal() ? "1" : "0";
+          item.innerHTML = `<span style="display:flex;flex:none;">${lineGlyph(w)}</span><span style="flex:1;font-variant-numeric:tabular-nums;">${w}px</span>`;
+          item.addEventListener("click", (ev) => {
+            ev.stopPropagation();
+            pop.hide();
+            onVal(w);
+            paint();
+          });
+          el.appendChild(item);
+        }
+      }
+    });
+    pop.show();
   });
   return trigger;
 }
 function closeWidthPopover() {
-  closeOpen2();
+  closeOpenPopovers();
 }
 
 // src/renderers/native/chrome/SettingsDialog.ts
@@ -16943,37 +18168,24 @@ function styleLabel(id) {
   return chartType(id)?.label ?? BUILTIN_STYLE_LABELS[id] ?? id;
 }
 var SD_STYLE_ID = "vela-settings-controls";
+var SD_STYLE_REV = "2";
 var SETTINGS_SURFACE = "var(--vela-surface)";
 var SETTINGS_BORDER = "var(--vela-border)";
 var SETTINGS_TEXT = "var(--vela-fg)";
 function ensureControlStyles() {
-  if (typeof document === "undefined" || document.getElementById(SD_STYLE_ID)) return;
-  const st = document.createElement("style");
+  if (typeof document === "undefined") return;
+  const existing = document.getElementById(SD_STYLE_ID);
+  if (existing?.dataset.rev === SD_STYLE_REV) return;
+  const st = existing ?? document.createElement("style");
   st.id = SD_STYLE_ID;
+  st.dataset.rev = SD_STYLE_REV;
   st.textContent = `
-.vela-sd-check{width:18px;height:18px;flex:none;display:inline-flex;align-items:center;justify-content:center;padding:0;border:1px solid var(--vela-border-strong);border-radius:5px;background:transparent;color:transparent;cursor:pointer;}
-.vela-sd-check:hover{border-color:var(--vela-fg-muted);}
-.vela-sd-check.on{background:var(--vela-selected-bg);border-color:var(--vela-selected-bg);color:var(--vela-selected-fg);}
-.vela-sd-check svg{display:block;}
-.vela-sd-select,.vela-sd-number{height:28px;background:var(--vela-surface-elev);border:1px solid var(--vela-border-strong);border-radius:var(--vela-radius-sm);color:var(--vela-fg);padding:0 8px;font-size:13px;outline:none;font-family:inherit;}
-.vela-sd-select:hover,.vela-sd-number:hover{border-color:var(--vela-fg-muted);}
-/* Custom caret: the native one hugs the right border; ours gets 8px of air. (A data URI
-   can't read currentColor, so it uses the shared muted-gray ink, legible on both themes.) */
-.vela-sd-select{-webkit-appearance:none;appearance:none;padding-right:26px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath d='M1 1l3 3 3-3' fill='none' stroke='%23868a96' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center;}
-.vela-sd-number{width:64px;}
-.vela-sd-color{width:32px;height:26px;padding:0;border:1px solid var(--vela-border);border-radius:var(--vela-radius-sm);background:transparent;cursor:pointer;-webkit-appearance:none;appearance:none;}
-.vela-sd-color::-webkit-color-swatch-wrapper{padding:2px;}
-.vela-sd-color::-webkit-color-swatch{border:none;border-radius:2px;}
 .vela-sd-pane::-webkit-scrollbar{width:8px;}
 .vela-sd-pane::-webkit-scrollbar-thumb{background:var(--vela-scroll);border-radius:var(--vela-radius-sm);border:2px solid transparent;background-clip:padding-box;}
 .vela-sd-pane::-webkit-scrollbar-track{background:transparent;}
-.vela-sd-toggle{position:relative;width:38px;height:22px;border-radius:11px;background:var(--vela-surface-sunken);border:1px solid var(--vela-border);cursor:pointer;flex:none;padding:0;}
-.vela-sd-toggle::after{content:'';position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--vela-fg-muted);transition:transform var(--vela-dur-med) ease,background var(--vela-dur-med) ease;}
-.vela-sd-toggle.on{background:var(--vela-active);border-color:var(--vela-selected-bg);}
-.vela-sd-toggle.on::after{transform:translateX(16px);background:var(--vela-selected-bg);}
 /* Tab rail / footer button / header close: base styles live HERE, not inline on the
    elements \u2014 inline declarations always beat stylesheet :hover rules, which is exactly
-   what killed these hovers before. Active tab state is the .on class (like .vela-sd-check),
+   what killed these hovers before. Active tab state is the .on class,
    hover fills follow the app convention (--vela-hover + --vela-fg-bright, fast transition). */
 .vela-sd-tab{text-align:left;padding:9px 12px;background:transparent;border:none;border-radius:var(--vela-radius-md);color:var(--vela-fg-muted);font-weight:600;font-size:13px;font-family:inherit;cursor:pointer;transition:background var(--vela-dur-fast) ease,color var(--vela-dur-fast) ease;}
 .vela-sd-tab:hover{background:var(--vela-hover);color:var(--vela-fg-bright);}
@@ -17032,13 +18244,13 @@ function ensureControlStyles() {
 .vela-sd-mobile .vela-sd-itabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;}
 .vela-sd-mobile .vela-sd-itabs::-webkit-scrollbar{display:none;}
 .vela-sd-mobile .vela-sd-itab{height:36px;flex:none;}
-.vela-sd-mobile .vela-sd-check{width:22px;height:22px;}
-.vela-sd-mobile .vela-sd-select,.vela-sd-mobile .vela-sd-number{height:34px;}
+.vela-sd-mobile .vela-switch{width:22px;height:22px;}
+.vela-sd-mobile .vela-select[data-size='sm'] .vela-select-trigger,.vela-sd-mobile .vela-num[data-size='sm'] input{height:34px;}
 .vela-sd-mobile .vela-sd-close{width:40px;height:40px;}
 .vela-sd-mobile .vela-sd-btn{height:38px;}
 .vela-sd-mobile .vela-sd-row span,.vela-sd-mobile .vela-sd-bool span{white-space:normal !important;}
 `;
-  document.head.appendChild(st);
+  if (!existing) document.head.appendChild(st);
 }
 var SettingsDialog = class {
   constructor(container, theme) {
@@ -17354,15 +18566,15 @@ var SettingsDialog = class {
       railScrim = document.createElement("div");
       railScrim.className = "vela-sd-railscrim";
       railScrim.addEventListener("click", () => toggleRail?.());
-      toggleRail = (open) => {
-        const on = open ?? !rail.classList.contains("open");
+      toggleRail = (open2) => {
+        const on = open2 ?? !rail.classList.contains("open");
         rail.classList.toggle("open", on);
         railScrim?.classList.toggle("open", on);
       };
     }
     const paneHost = document.createElement("div");
     paneHost.className = "vela-sd-pane";
-    paneHost.style.cssText = mobile ? "flex:1;min-width:0;overflow-y:auto;padding:6px 14px calc(14px + env(safe-area-inset-bottom, 0px));" : "flex:1;overflow-y:auto;padding:6px 18px 14px;";
+    paneHost.style.cssText = mobile ? "flex:1;min-width:0;overflow-y:auto;overflow-anchor:none;padding:6px 14px calc(14px + env(safe-area-inset-bottom, 0px));" : "flex:1;overflow-y:auto;overflow-anchor:none;padding:6px 18px 14px;";
     const panes = [];
     let current = null;
     for (const child of [...body.children]) {
@@ -17428,7 +18640,7 @@ var SettingsDialog = class {
     }
   }
   close() {
-    closeColorPopover();
+    closeOpenPopovers();
     closeWidthPopover();
     this.root?.remove();
     this.root = null;
@@ -17583,50 +18795,41 @@ var SettingsDialog = class {
       return wf;
     }
     if (c.kind === "select") {
-      const sel = document.createElement("select");
-      sel.className = "vela-sd-select";
-      sel.style.cssText = "max-width:200px;flex:0 0 auto;";
-      sel.title = c.label;
       const current2 = typeof bag[c.key] === "string" ? bag[c.key] : c.defval;
-      for (const [val, lbl] of normalizeSelectOptions(c.options)) {
-        const o = document.createElement("option");
-        o.value = val;
-        o.textContent = lbl;
-        if (val === current2) o.selected = true;
-        sel.appendChild(o);
-      }
-      sel.addEventListener("change", () => put(c.key, sel.value));
-      sel.addEventListener("vela-sync", () => {
-        sel.value = typeof bag[c.key] === "string" ? bag[c.key] : c.defval;
+      const sel = new Select({
+        options: normalizeSelectOptions(c.options).map(([value, label]) => ({ value, label })),
+        value: current2,
+        size: "sm",
+        theme: this.theme,
+        onChange: (v) => put(c.key, v)
       });
-      return sel;
-    }
-    const ni = document.createElement("input");
-    ni.type = "number";
-    ni.className = "vela-sd-number";
-    if (compact) ni.style.width = "56px";
-    if (c.min !== void 0) ni.min = String(c.min);
-    if (c.max !== void 0) ni.max = String(c.max);
-    ni.step = String(c.step ?? 1);
-    ni.title = c.label;
-    const current = typeof bag[c.key] === "number" ? bag[c.key] : c.defval;
-    if (c.placeholder !== void 0) {
-      ni.placeholder = c.placeholder;
-      if (current !== c.defval) ni.value = String(current);
-      ni.addEventListener("change", () => {
-        const raw = ni.value.trim() === "" ? c.defval : Number(ni.value);
-        const v = Number.isFinite(raw) ? Math.min(c.max ?? Infinity, Math.max(c.min ?? -Infinity, raw)) : c.defval;
-        ni.value = v === c.defval ? "" : String(v);
-        put(c.key, v);
-      });
-    } else {
-      ni.value = String(current);
-      ni.addEventListener("input", () => {
-        const v = Number(ni.value);
-        if (Number.isFinite(v)) put(c.key, v);
+      sel.el.title = c.label;
+      sel.el.addEventListener("vela-sync", () => {
+        sel.setValue(typeof bag[c.key] === "string" ? bag[c.key] : c.defval);
       });
+      return sel.el;
     }
-    return ni;
+    const current = typeof bag[c.key] === "number" ? bag[c.key] : c.defval;
+    const ni = new NumberInput({
+      value: current,
+      min: c.min,
+      max: c.max,
+      step: c.step ?? 1,
+      size: "sm",
+      commit: "live",
+      clamp: c.placeholder !== void 0,
+      steppers: false,
+      compact,
+      title: c.label,
+      placeholder: c.placeholder,
+      emptyValue: c.placeholder !== void 0 ? c.defval : void 0,
+      onChange: (v) => put(c.key, v)
+    });
+    ni.el.addEventListener("vela-sync", () => {
+      const next = typeof bag[c.key] === "number" ? bag[c.key] : c.defval;
+      ni.setValue(next);
+    });
+    return ni.el;
   }
   /**
    * The INSTANCE STRIP block: a tab per present instance (label, `×` on the active
@@ -17907,28 +19110,27 @@ var SettingsDialog = class {
    *  only one visible at a time; see `typeRow`). */
   toggleRow(label, value, onToggle, controls, get) {
     const wrap = document.createElement("div");
-    const cb = document.createElement("button");
-    cb.type = "button";
-    cb.className = "vela-sd-check" + (value ? " on" : "");
-    cb.innerHTML = iconAt("check", 11);
-    let checked = value;
-    const cbToggle = () => {
-      checked = !checked;
-      cb.classList.toggle("on", checked);
-      return checked;
-    };
+    const sw = new Switch({ checked: value, size: "sm", onChange: (v) => {
+      onToggle(v);
+      if (controls.length > 0) syncDim(v);
+    } });
     const lbl = document.createElement("span");
     lbl.textContent = label;
     lbl.style.cssText = "opacity:0.85;white-space:nowrap;";
+    const syncDim = (on) => {
+      for (const c of controls) {
+        if (c.dataset.sdSelfGated === "1") continue;
+        c.style.opacity = on ? "1" : "0.4";
+        c.style.pointerEvents = on ? "" : "none";
+      }
+    };
     if (controls.length === 0) {
       wrap.className = "vela-sd-bool";
       wrap.style.cssText = "display:flex;align-items:center;gap:8px;min-height:22px;";
-      wrap.append(cb, lbl);
-      cb.addEventListener("click", () => onToggle(cbToggle()));
+      wrap.append(sw.el, lbl);
       if (get) {
         wrap.addEventListener("vela-sync", () => {
-          checked = get();
-          cb.classList.toggle("on", checked);
+          sw.setChecked(get());
         });
       }
       return wrap;
@@ -17936,28 +19138,16 @@ var SettingsDialog = class {
     wrap.className = "vela-sd-row";
     const left = document.createElement("div");
     left.style.cssText = "display:flex;align-items:center;gap:8px;";
-    left.append(cb, lbl);
+    left.append(sw.el, lbl);
     const box = document.createElement("div");
     box.style.cssText = "display:flex;align-items:center;gap:6px;";
     for (const c of controls) box.appendChild(c);
-    const syncDim = (on) => {
-      for (const c of controls) {
-        if (c.dataset.sdSelfGated === "1") continue;
-        c.style.opacity = on ? "1" : "0.4";
-        c.style.pointerEvents = on ? "" : "none";
-      }
-    };
     syncDim(value);
-    cb.addEventListener("click", () => {
-      const v = cbToggle();
-      onToggle(v);
-      syncDim(v);
-    });
     if (get) {
       wrap.addEventListener("vela-sync", () => {
-        checked = get();
-        cb.classList.toggle("on", checked);
-        syncDim(checked);
+        const v = get();
+        sw.setChecked(v);
+        syncDim(v);
       });
     }
     wrap.append(left, box);
@@ -17965,52 +19155,23 @@ var SettingsDialog = class {
   }
   numberRow(label, value, min, max, step, onChange) {
     const { wrap } = this.row(label);
-    const ni = document.createElement("input");
-    ni.type = "number";
-    ni.value = String(value);
-    ni.min = String(min);
-    ni.max = String(max);
-    ni.step = String(step);
-    ni.className = "vela-sd-number";
-    ni.addEventListener("input", () => {
-      const n = Number(ni.value);
-      if (Number.isFinite(n)) onChange(n);
-    });
-    wrap.appendChild(ni);
+    wrap.appendChild(new NumberInput({ value, min, max, step, size: "sm", commit: "live", onChange }).el);
     return wrap;
   }
   /** A dropdown whose option values differ from their display labels. */
   selectRowLabeled(label, value, options, onChange) {
     const { wrap } = this.row(label);
-    const sel = document.createElement("select");
-    sel.className = "vela-sd-select";
-    sel.style.cssText = "max-width:200px;flex:0 0 auto;";
-    for (const [val, lbl] of options) {
-      const o = document.createElement("option");
-      o.value = val;
-      o.textContent = lbl;
-      if (val === value) o.selected = true;
-      sel.appendChild(o);
-    }
-    sel.addEventListener("change", () => onChange(sel.value));
-    wrap.appendChild(sel);
+    wrap.appendChild(new Select({
+      options: options.map(([v, l]) => ({ value: v, label: l })),
+      value,
+      size: "sm",
+      theme: this.theme,
+      onChange
+    }).el);
     return wrap;
   }
   selectRow(label, value, options, onChange) {
-    const { wrap } = this.row(label);
-    const sel = document.createElement("select");
-    sel.className = "vela-sd-select";
-    sel.style.cssText = "max-width:200px;flex:0 0 auto;";
-    for (const opt of options) {
-      const o = document.createElement("option");
-      o.value = opt;
-      o.textContent = opt;
-      if (opt === value) o.selected = true;
-      sel.appendChild(o);
-    }
-    sel.addEventListener("change", () => onChange(sel.value));
-    wrap.appendChild(sel);
-    return wrap;
+    return this.selectRowLabeled(label, value, options.map((o) => [o, o]), onChange);
   }
   /** Footer with the full config as JSON — the export/import (templating) surface. */
   footer(_config) {
@@ -18035,6 +19196,19 @@ function timezoneOptions(current) {
   return [[normalized, tzMenuLabel(normalized, normalized)], ...options];
 }
 
+// src/core/drawings/effectiveColor.ts
+var VALID_FILL = VALID;
+var INVALID_FILL = INVALID;
+function effectiveFillColor(d, theme) {
+  if (d instanceof PatternDrawing) {
+    if (!d.fillTriangles().length) return null;
+    const valid = d.valid();
+    return d.style.fillColor ?? (valid == null ? d.style.lineColor : valid ? VALID_FILL : INVALID_FILL);
+  }
+  if (d instanceof CalloutBase) return d.style.fillColor ?? theme.background;
+  return d.style.fillColor ?? null;
+}
+
 // src/renderers/native/drawings/DrawingPainter.ts
 var HANDLE_RADIUS = 4.5;
 var HANDLE_BORDER = DEFAULT_DRAWING_COLOR;
@@ -18401,13 +19575,19 @@ var DrawingPainter = class {
     }
     this.paintLabel(ctx, d, proj, theme);
   }
-  /** Draw a drawing's optional text label at a type-appropriate anchor (multi-line aware). */
+  /** Draw a drawing's optional text label at a type-appropriate anchor (multi-line aware).
+   *  Two-point line tools rotate the glyphs to follow the segment, kept upright. */
   paintLabel(ctx, d, proj, theme) {
     const text = d.text;
     if (!text || !text.value || d.id === this.targets.mutedLabel) return;
     const layout = labelLayout(d, proj);
     if (!layout) return;
     const fs = namedFontSize(text.size);
+    ctx.save();
+    if (layout.rotate) {
+      ctx.translate(layout.rotate.cx, layout.rotate.cy);
+      ctx.rotate(layout.rotate.angle);
+    }
     ctx.font = `${text.bold ? "bold " : ""}${text.italic ? "italic " : ""}${fs}px ${theme.fontFamily}`;
     ctx.textBaseline = "top";
     ctx.textAlign = layout.align;
@@ -18415,8 +19595,8 @@ var DrawingPainter = class {
     const lh = labelLineHeight(fs);
     const lines = text.value.split("\n");
     lines.forEach((line, i) => ctx.fillText(line, layout.x, layout.top + i * lh));
-    ctx.textAlign = "left";
     if (d.type === "text") this.paintTextFrame(ctx, d.id, layout.x, layout.top, lines, fs, theme);
+    ctx.restore();
   }
   /** Frame a plain text label while it is the target, so the text reads as a clickable object even
    *  though it has no shape of its own: a firm frame once selected, a fainter one under the cursor.
@@ -19359,7 +20539,14 @@ function labelLayout(d, proj) {
     case "infoline":
     case "trendangle": {
       if (pts.length < 2) return null;
-      return { x: (pts[0][0] + pts[1][0]) / 2, top: (pts[0][1] + pts[1][1]) / 2 - 6 - lh * lines, align: "center" };
+      const [x1, y1] = pts[0];
+      const [x2, y2] = pts[1];
+      return {
+        x: 0,
+        top: -6 - lh * lines,
+        align: "center",
+        rotate: { angle: uprightLineAngle(x1, y1, x2, y2), cx: (x1 + x2) / 2, cy: (y1 + y2) / 2 }
+      };
     }
     case "box": {
       if (pts.length < 2) return null;
@@ -19708,11 +20895,11 @@ function applyFree(anchor, pt, free) {
 // src/renderers/native/drawings/DrawingSettingsPopup.ts
 var BTN = 30;
 var ICON = 21;
-var STYLE_ID4 = "vela-drawing-popup-styles";
-function ensureStyles4() {
-  if (typeof document === "undefined" || document.getElementById(STYLE_ID4)) return;
+var STYLE_ID3 = "vela-drawing-popup-styles";
+function ensureStyles2() {
+  if (typeof document === "undefined" || document.getElementById(STYLE_ID3)) return;
   const s = document.createElement("style");
-  s.id = STYLE_ID4;
+  s.id = STYLE_ID3;
   s.textContent = `
 .vela-dpop input[type=color]{-webkit-appearance:none;appearance:none;border:none;padding:0;background:none;cursor:pointer;border-radius:0;}
 .vela-dpop input[type=color]::-webkit-color-swatch-wrapper{padding:0;}
@@ -19746,17 +20933,14 @@ var DrawingSettingsPopup = class {
     this.textPanel = null;
     this.levelsPanel = null;
     this.colorPop = null;
-    // floating RGB + opacity picker for a color swatch
     this.colorOwner = null;
-    // the swatch the open color popover belongs to (for toggle)
-    this.menuEl = null;
-    // floating option list for a dropdown control
+    this.menuPop = null;
     this.menuOwner = null;
     this.onClose = null;
     this.onOutside = (e) => {
       const target = e.target;
-      if (this.colorPop?.contains(target)) return;
-      if (this.menuEl?.contains(target)) return;
+      if (this.colorPop?.el.contains(target)) return;
+      if (this.menuPop?.el.contains(target)) return;
       if (this.el && !this.el.contains(target)) {
         const cb = this.onClose;
         this.close();
@@ -19775,13 +20959,13 @@ var DrawingSettingsPopup = class {
    *  picker / dropdown menu), which live outside `el`. */
   contains(node) {
     if (!node) return false;
-    return this.el?.contains(node) === true || this.colorPop?.contains(node) === true || this.menuEl?.contains(node) === true;
+    return this.el?.contains(node) === true || this.colorPop?.el.contains(node) === true || this.menuPop?.el.contains(node) === true;
   }
   /** Open the quick toolbar for `drawing`, floating clear of its `anchor` box.
    *  `onClose` fires on an outside-click dismissal (not a programmatic close). */
   open(drawing, anchor, actions, onClose) {
     this.close();
-    ensureStyles4();
+    ensureStyles2();
     this.onClose = onClose ?? null;
     const t = this.theme;
     const schema = drawing.schema();
@@ -19792,8 +20976,7 @@ var DrawingSettingsPopup = class {
     el.style.cssText = `position:absolute;z-index:22;background:${t.background};border:1px solid var(--vela-border);border-radius:var(--vela-radius-lg);box-shadow:var(--vela-shadow);color:${t.textColor};font:var(--vela-font-size-md) ${t.fontFamily};display:flex;flex-direction:column;pointer-events:auto;overflow:hidden;`;
     applyChromeTokens(el, t);
     el.addEventListener("pointerdown", () => {
-      this.closeColorPopover();
-      this.closeMenu();
+      closeOpenPopovers();
     });
     const bar = document.createElement("div");
     bar.style.cssText = "display:flex;align-items:center;gap:2px;padding:4px;";
@@ -20530,49 +21713,76 @@ var DrawingSettingsPopup = class {
     });
     return b;
   }
+  /** Host-anchored floating shell (stays inside the chart). Content is filled after
+   *  construction so `fill` can close over the live `Popover` without hitting TDZ. */
+  hostFloat(anchor, opts) {
+    const t = this.theme;
+    const pop = new Popover({
+      trigger: anchor,
+      host: this.host,
+      theme: t,
+      position: "absolute",
+      boundary: this.host,
+      boundaryInset: 4,
+      viewportInset: 0,
+      gap: 6,
+      align: opts.align ?? "start",
+      zIndex: opts.zIndex,
+      onClose: () => {
+        if (this.menuPop === pop) {
+          this.menuPop = null;
+          this.menuOwner = null;
+        }
+        if (this.colorPop === pop) {
+          this.colorPop = null;
+          this.colorOwner = null;
+        }
+      }
+    });
+    const el = pop.el;
+    el.style.background = t.background;
+    el.style.border = "1px solid var(--vela-border)";
+    el.style.borderRadius = "var(--vela-radius-lg)";
+    el.style.boxShadow = "var(--vela-shadow)";
+    el.style.padding = opts.padding;
+    el.style.display = "flex";
+    el.style.flexDirection = "column";
+    el.style.gap = "1px";
+    el.style.color = t.textColor;
+    el.style.font = `var(--vela-font-size-md) ${t.fontFamily}`;
+    el.style.pointerEvents = "auto";
+    opts.fill(el, pop);
+    pop.show();
+    return pop;
+  }
   /** A floating list of one-shot actions (icon + label rows) opened by the kebab. */
   openActionMenu(anchor, rows) {
-    this.closeMenu();
-    this.closeColorPopover();
-    const t = this.theme;
-    const menu2 = document.createElement("div");
-    menu2.className = "vela-dpop";
-    menu2.style.cssText = `position:absolute;z-index:26;background:${t.background};border:1px solid var(--vela-border);border-radius:var(--vela-radius-lg);box-shadow:var(--vela-shadow);padding:4px;pointer-events:auto;display:flex;flex-direction:column;gap:1px;color:${t.textColor};font:var(--vela-font-size-md) ${t.fontFamily};`;
-    applyChromeTokens(menu2, t);
-    menu2.addEventListener("pointerdown", (e) => e.stopPropagation());
-    for (const row of rows) {
-      const item = document.createElement("button");
-      item.type = "button";
-      item.className = "vela-dpop-item";
-      item.style.cssText = "display:flex;align-items:center;gap:9px;min-width:150px;padding:6px 9px;border:none;border-radius:5px;color:inherit;cursor:pointer;text-align:left;font:inherit;";
-      const ic = document.createElement("span");
-      ic.style.cssText = "display:flex;flex:none;width:20px;justify-content:center;";
-      ic.innerHTML = sized(row.icon, 18);
-      const tx = document.createElement("span");
-      tx.textContent = row.label;
-      tx.style.cssText = "flex:1;";
-      item.append(ic, tx);
-      item.addEventListener("click", (e) => {
-        e.stopPropagation();
-        this.closeMenu();
-        row.onClick();
-      });
-      menu2.appendChild(item);
-    }
-    this.host.appendChild(menu2);
-    const ar = anchor.getBoundingClientRect();
-    const hr = this.host.getBoundingClientRect();
-    const w = menu2.offsetWidth;
-    const h = menu2.offsetHeight;
-    let left = ar.right - hr.left - w;
-    let top = ar.bottom - hr.top + 6;
-    if (left + w > hr.width - 4) left = hr.width - w - 4;
-    if (left < 4) left = 4;
-    if (top + h > hr.height - 4) top = ar.top - hr.top - h - 6;
-    if (top < 4) top = 4;
-    menu2.style.left = `${Math.round(left)}px`;
-    menu2.style.top = `${Math.round(top)}px`;
-    this.menuEl = menu2;
+    this.menuPop = this.hostFloat(anchor, {
+      align: "end",
+      zIndex: 26,
+      padding: "4px",
+      fill: (menu2, pop) => {
+        for (const row of rows) {
+          const item = document.createElement("button");
+          item.type = "button";
+          item.className = "vela-dpop-item";
+          item.style.cssText = "display:flex;align-items:center;gap:9px;min-width:150px;padding:6px 9px;border:none;border-radius:5px;color:inherit;cursor:pointer;text-align:left;font:inherit;";
+          const ic = document.createElement("span");
+          ic.style.cssText = "display:flex;flex:none;width:20px;justify-content:center;";
+          ic.innerHTML = sized(row.icon, 18);
+          const tx = document.createElement("span");
+          tx.textContent = row.label;
+          tx.style.cssText = "flex:1;";
+          item.append(ic, tx);
+          item.addEventListener("click", (e) => {
+            e.stopPropagation();
+            pop.hide();
+            row.onClick();
+          });
+          menu2.appendChild(item);
+        }
+      }
+    });
     this.menuOwner = anchor;
   }
   /** The floating hover-label. Sits just above or below the toolbar depending on where it floats,
@@ -20702,60 +21912,40 @@ var DrawingSettingsPopup = class {
   /** The floating option list opened by a {@link dropdown} trigger. Each row shows the option's
    *  glyph (and text label when one is supplied); the current value is highlighted. */
   openMenu(anchor, values, current, render, label, onPick) {
-    this.closeMenu();
-    this.closeColorPopover();
-    const t = this.theme;
-    const menu2 = document.createElement("div");
-    menu2.className = "vela-dpop";
-    menu2.style.cssText = `position:absolute;z-index:26;background:${t.background};border:1px solid var(--vela-border);border-radius:var(--vela-radius-lg);box-shadow:var(--vela-shadow);padding:4px;pointer-events:auto;display:flex;flex-direction:column;gap:1px;color:${t.textColor};font:var(--vela-font-size-md) ${t.fontFamily};`;
-    applyChromeTokens(menu2, t);
-    menu2.addEventListener("pointerdown", (e) => e.stopPropagation());
-    for (const v of values) {
-      const active = v === current;
-      const item = document.createElement("button");
-      item.type = "button";
-      item.className = "vela-dpop-item";
-      item.dataset.active = active ? "1" : "0";
-      item.style.cssText = `display:flex;align-items:center;gap:8px;${label ? "min-width:118px;" : ""}padding:5px 8px;border:none;border-radius:5px;color:inherit;cursor:pointer;text-align:left;font:inherit;`;
-      const ic = document.createElement("span");
-      ic.style.cssText = "display:flex;flex:none;width:22px;justify-content:center;";
-      ic.innerHTML = sized(render(v), 18);
-      item.appendChild(ic);
-      if (label) {
-        const tx = document.createElement("span");
-        tx.textContent = label(v);
-        tx.style.cssText = "flex:1;font-variant-numeric:tabular-nums;";
-        item.appendChild(tx);
+    this.menuPop = this.hostFloat(anchor, {
+      zIndex: 26,
+      padding: "4px",
+      fill: (menu2, pop) => {
+        for (const v of values) {
+          const active = v === current;
+          const item = document.createElement("button");
+          item.type = "button";
+          item.className = "vela-dpop-item";
+          item.dataset.active = active ? "1" : "0";
+          item.style.cssText = `display:flex;align-items:center;gap:8px;${label ? "min-width:118px;" : ""}padding:5px 8px;border:none;border-radius:5px;color:inherit;cursor:pointer;text-align:left;font:inherit;`;
+          const ic = document.createElement("span");
+          ic.style.cssText = "display:flex;flex:none;width:22px;justify-content:center;";
+          ic.innerHTML = sized(render(v), 18);
+          item.appendChild(ic);
+          if (label) {
+            const tx = document.createElement("span");
+            tx.textContent = label(v);
+            tx.style.cssText = "flex:1;font-variant-numeric:tabular-nums;";
+            item.appendChild(tx);
+          }
+          item.addEventListener("click", (e) => {
+            e.stopPropagation();
+            pop.hide();
+            onPick(v);
+          });
+          menu2.appendChild(item);
+        }
       }
-      item.addEventListener("click", (e) => {
-        e.stopPropagation();
-        this.closeMenu();
-        onPick(v);
-      });
-      menu2.appendChild(item);
-    }
-    this.host.appendChild(menu2);
-    const ar = anchor.getBoundingClientRect();
-    const hr = this.host.getBoundingClientRect();
-    const w = menu2.offsetWidth;
-    const h = menu2.offsetHeight;
-    let left = ar.left - hr.left;
-    let top = ar.bottom - hr.top + 6;
-    if (left + w > hr.width - 4) left = hr.width - w - 4;
-    if (left < 4) left = 4;
-    if (top + h > hr.height - 4) top = ar.top - hr.top - h - 6;
-    if (top < 4) top = 4;
-    menu2.style.left = `${Math.round(left)}px`;
-    menu2.style.top = `${Math.round(top)}px`;
-    this.menuEl = menu2;
+    });
     this.menuOwner = anchor;
   }
   closeMenu() {
-    if (this.menuEl) {
-      this.menuEl.remove();
-      this.menuEl = null;
-    }
-    this.menuOwner = null;
+    this.menuPop?.hide();
   }
   /** A color control: an `icon` over a thin **colored underline** showing the current
    *  value (the common idiom), with an invisible native picker overlaid to edit it.
@@ -20794,36 +21984,18 @@ var DrawingSettingsPopup = class {
   }
   /** A floating RGB picker + opacity slider anchored to a color swatch — emits `#RRGGBB(AA)`. */
   openColorPopover(anchor, color, onChange) {
-    this.closeColorPopover();
-    this.closeMenu();
     const t = this.theme;
-    const pop = document.createElement("div");
-    pop.style.cssText = `position:absolute;z-index:25;background:${t.background};border:1px solid var(--vela-border);border-radius:var(--vela-radius-lg);box-shadow:var(--vela-shadow);padding:10px;pointer-events:auto;`;
-    applyChromeTokens(pop, t);
-    pop.addEventListener("pointerdown", (e) => e.stopPropagation());
-    pop.appendChild(buildColorPicker(color, t, onChange));
-    this.host.appendChild(pop);
-    const ar = anchor.getBoundingClientRect();
-    const hr = this.host.getBoundingClientRect();
-    const w = pop.offsetWidth;
-    const h = pop.offsetHeight;
-    let left = ar.left - hr.left;
-    let top = ar.bottom - hr.top + 6;
-    if (left + w > hr.width - 4) left = hr.width - w - 4;
-    if (left < 4) left = 4;
-    if (top + h > hr.height - 4) top = ar.top - hr.top - h - 6;
-    if (top < 4) top = 4;
-    pop.style.left = `${Math.round(left)}px`;
-    pop.style.top = `${Math.round(top)}px`;
-    this.colorPop = pop;
+    this.colorPop = this.hostFloat(anchor, {
+      zIndex: 25,
+      padding: "10px",
+      fill: (el) => {
+        el.appendChild(buildColorPicker(color, t, onChange));
+      }
+    });
     this.colorOwner = anchor;
   }
   closeColorPopover() {
-    if (this.colorPop) {
-      this.colorPop.remove();
-      this.colorPop = null;
-    }
-    this.colorOwner = null;
+    this.colorPop?.hide();
   }
   divider() {
     const d = document.createElement("div");
@@ -20962,7 +22134,7 @@ var DrawingToolbar = class {
     this.onCollapse = options.onCollapse ?? (() => {
     });
     this.onDrawingsSync = options.onDrawingsSync ?? null;
-    ensureStyles5();
+    ensureStyles3();
     this.root = document.createElement("div");
     this.root.className = "vela-dtb";
     this.styleRoot();
@@ -21445,13 +22617,13 @@ var DrawingToolbar = class {
   }
 };
 var MAGNET_ID = "__magnet__";
-var STYLE_ID5 = "vela-drawing-toolbar-styles";
-function ensureStyles5() {
+var STYLE_ID4 = "vela-drawing-toolbar-styles";
+function ensureStyles3() {
   if (typeof document === "undefined") return;
-  let s = document.getElementById(STYLE_ID5);
+  let s = document.getElementById(STYLE_ID4);
   if (!s) {
     s = document.createElement("style");
-    s.id = STYLE_ID5;
+    s.id = STYLE_ID4;
     document.head.appendChild(s);
   }
   s.textContent = `
@@ -21830,9 +23002,9 @@ var UserDrawingController = class {
   }
   /**
    * Union of the visible drawings' price ranges on `paneId` whose time extent
-   * intersects [fromTime, toTime] — folded into the pane's autoscale so an
-   * off-series drawing still expands the scale (mirrors Pine drawings). Hidden
-   * drawings and full-width references (hline → null extent) are handled too.
+   * intersects [fromTime, toTime]. Hidden drawings and full-width references
+   * (hline → null extent) are handled too. Kept as the seam for a future
+   * per-drawing autoscale opt-in — the renderer does not fold this in today.
    */
   priceRangeForPane(paneId, fromTime, toTime) {
     let lo = Infinity;
@@ -22707,7 +23879,7 @@ var LUXALGO_WORDMARK_SVG = '<svg viewBox="0 0 964 252" aria-hidden="true"><path
 
 // src/renderers/native/chrome/AttributionMark.ts
 var ATTRIBUTION_URL = "https://luxalgo.com/vela";
-var STYLE_ID6 = "vela-attribution-styles";
+var STYLE_ID5 = "vela-attribution-styles";
 var CSS2 = `
 .vela-attribution {
     text-decoration: none;
@@ -22770,11 +23942,11 @@ var CSS2 = `
 [data-vela-layout='mobile'] .vela-attribution:hover .vela-attr-wordmark,
 [data-layout='mobile'] .vela-attribution:hover .vela-attr-wordmark { transform: translateX(0); }
 `;
-function ensureStyles6(doc) {
-  let s = doc.getElementById(STYLE_ID6);
+function ensureStyles4(doc) {
+  let s = doc.getElementById(STYLE_ID5);
   if (!s) {
     s = doc.createElement("style");
-    s.id = STYLE_ID6;
+    s.id = STYLE_ID5;
     doc.head.appendChild(s);
   }
   s.textContent = CSS2;
@@ -22803,7 +23975,7 @@ function createCustomMark(doc, html, background) {
   return el;
 }
 function createAttributionMark(doc, background) {
-  ensureStyles6(doc);
+  ensureStyles4(doc);
   const a = doc.createElement("a");
   a.className = "vela-attribution";
   a.href = ATTRIBUTION_URL;
@@ -25781,7 +26953,6 @@ var NativeRenderer = class {
     const n = this.coords.barCount;
     if (n === 0) return;
     const vr = this.coords.visibleLogicalRange();
-    const vtr = this.coords.visibleTimeRange();
     const i0 = Math.max(0, Math.floor(vr.from));
     const i1 = Math.min(n - 1, Math.ceil(vr.to));
     if (i1 < i0) return;
@@ -25799,9 +26970,7 @@ var NativeRenderer = class {
       }
       const models = this.scene.indicatorsForPane(pane.id);
       const masterModels = models.filter((m) => m.ownScale !== true);
-      let dr = this.chrome.paneDrawingsRange(masterModels, this.scene, pane === pricePane, vr);
-      const udr = this.userDrawings?.priceRangeForPane(pane.id, vtr.from, vtr.to) ?? null;
-      if (udr) dr = dr ? { min: Math.min(dr.min, udr.min), max: Math.max(dr.max, udr.max) } : udr;
+      const dr = this.chrome.paneDrawingsRange(masterModels, this.scene, pane === pricePane, vr);
       const includeCandles = pane.kind === "price" && !this.scene.candlesHidden;
       pane.scaleTarget = computePaneScale(masterModels, this.bars, includeCandles, i0, i1, dr, paneLogScale(this.scene, pane), (id) => this.scene.offsetOf(id));
       pane.percentBaseline = pane.kind === "price" ? this.bars[i0]?.close ?? 0 : this.firstVisibleValue(masterModels, i0);
@@ -26798,55 +27967,6 @@ function resolveElement(container) {
   if (!element) throw new Error(`[vela] container not found for selector "${container}"`);
   return element;
 }
-
-// src/ui/styles.ts
-function injectStyles(id, css, root = document) {
-  if (typeof document === "undefined") return;
-  const host = root instanceof Document ? root.head : root;
-  if (root.getElementById?.(id) ?? host.querySelector(`#${CSS.escape(id)}`)) return;
-  const s = document.createElement("style");
-  s.id = id;
-  s.textContent = css;
-  host.appendChild(s);
-}
-
-// src/ui/tokens.ts
-var STATIC_ID = "vela-ui-tokens";
-var STATIC_DECLS = Object.entries(STATIC_TOKENS).map(([k, v]) => `    ${k}: ${v};`).join("\n");
-var STATIC_CSS = `
-.vela-ui, .vela-ui-layer {
-${STATIC_DECLS}
-    font-family: var(--vela-font, -apple-system, system-ui, sans-serif);
-    box-sizing: border-box;
-}
-.vela-ui *, .vela-ui-layer * { box-sizing: border-box; }
-.vela-icon { display: inline-flex; align-items: center; flex: none; }
-.vela-icon svg { display: block; }
-`;
-function applyThemeTokens(el, t) {
-  const tokens = themeTokens(t);
-  for (const key in tokens) el.style.setProperty(key, tokens[key]);
-}
-function applyPlotOverlayTokens(host, base, config) {
-  const layout = config?.layout;
-  const t = layout?.background && layout.textColor ? { ...base, background: layout.background, textColor: layout.textColor } : base;
-  applyThemeTokens(host, t);
-}
-function ensureUIHost(el, theme) {
-  injectStyles(STATIC_ID, STATIC_CSS, el.getRootNode());
-  el.classList.add("vela-ui");
-  if (theme) applyThemeTokens(el, theme);
-}
-
-// src/ui/icons.ts
-function iconEl(id, doc = document) {
-  const span = doc.createElement("span");
-  span.className = "vela-icon";
-  span.setAttribute("aria-hidden", "true");
-  const svg = iconMarkup(id);
-  if (svg) span.innerHTML = svg;
-  return span;
-}
 function runMachine(machine5, props, render) {
   const m = new vanilla.VanillaMachine(machine5, props);
   const unsub = m.subscribe(render);
@@ -27088,7 +28208,10 @@ function menuController(opts) {
     props: {
       id: opts.id ?? nextUid("vela-menu"),
       ids: opts.triggerId ? { trigger: opts.triggerId } : void 0,
-      positioning: { placement: opts.placement ?? "bottom-start" },
+      positioning: {
+        placement: opts.placement ?? "bottom-start",
+        ...opts.getAnchorRect ? { getAnchorRect: () => opts.getAnchorRect() } : {}
+      },
       onSelect: (d) => opts.onSelect?.(d.value),
       onOpenChange: (d) => opts.onOpenChange?.(d.open)
     },
@@ -27170,6 +28293,22 @@ var MENU_CSS = `
 }
 .vela-menu-switch.on { background: var(--vela-accent-bright, var(--vela-accent)); border-color: var(--vela-accent-bright, var(--vela-accent)); }
 .vela-menu-switch.on::after { transform: translateX(16px); background: var(--vela-bg); }
+/* Favorite star (rows carrying \`favorite\`): reserved space always \u2014 it fades in on row
+   hover instead of shifting the layout \u2014 and a starred row keeps its filled star visible.
+   Same control language as the drawing toolbar's flyout stars. */
+.vela-menu-item .vela-menu-star {
+    order: 98;
+    /* Pad the 16px icon slot into a bigger hit target without moving the row's layout. */
+    margin: -3px -5px -3px 0;
+    padding: 3px 5px;
+    box-sizing: content-box;
+    border-radius: var(--vela-radius-sm);
+    opacity: 0;
+    transition: opacity 0.1s ease, background 0.1s ease;
+}
+.vela-menu-item[data-highlighted] .vela-menu-star { opacity: 0.55; }
+.vela-menu-item .vela-menu-star:hover { opacity: 1; background: var(--vela-hover-strong); }
+.vela-menu-item .vela-menu-star.vela-fav { opacity: 0.95; color: var(--vela-highlight); }
 .vela-menu-sep { height: 1px; margin: 4px 6px; background: var(--vela-border); }
 /* Submenu trigger row: a right-aligned chevron, and it stays highlighted while its own
    list is open so the path you came down remains readable. */
@@ -27188,9 +28327,13 @@ var Surface = class _Surface {
     this.items = [];
     /** Branch item id → the surface it opens. */
     this.subs = /* @__PURE__ */ new Map();
+    /** Trigger rect captured when this level opened — the list stays put if the
+     *  trigger then moves (favorite chips shifting the caret). */
+    this.pinnedAnchor = null;
     this.doc = doc;
     this.host = opts.host;
     this.onSelect = opts.onSelect;
+    this.onFavorite = opts.onFavorite;
     this.positioner = doc.createElement("div");
     this.positioner.className = "vela-ui-layer";
     this.list = doc.createElement("ul");
@@ -27198,16 +28341,25 @@ var Surface = class _Surface {
     if (opts.minWidth) this.list.style.minWidth = opts.minWidth;
     this.positioner.appendChild(this.list);
     this.host.appendChild(this.positioner);
+    const trigger = opts.trigger;
     this.ctrl = menuController({
       items: [],
       id: opts.id,
       placement: opts.placement,
       onSelect: (id) => this.onSelect(id),
-      onOpenChange: opts.onOpenChange,
+      getAnchorRect: () => this.pinnedAnchor,
+      onOpenChange: (open2) => {
+        if (open2 && trigger) {
+          const r = trigger.getBoundingClientRect();
+          this.pinnedAnchor = { x: r.x, y: r.y, width: r.width, height: r.height };
+        } else {
+          this.pinnedAnchor = null;
+        }
+        opts.onOpenChange?.(open2);
+      },
       triggerId: opts.triggerId
     });
     this.mid = String(this.ctrl.props.id);
-    const trigger = opts.trigger;
     if (opts.triggerId && trigger) trigger.id = opts.triggerId;
     this.handle = runMachine(this.ctrl.machine, this.ctrl.props, (service) => {
       const api = this.ctrl.connect(service);
@@ -27287,6 +28439,25 @@ var Surface = class _Surface {
         hint.textContent = item.hint;
         li.appendChild(hint);
       }
+      if (item.favorite !== void 0 && this.onFavorite) {
+        const on = item.favorite;
+        const star = iconEl(on ? "star-filled" : "star", doc);
+        star.classList.add("vela-menu-star");
+        if (on) star.classList.add("vela-fav");
+        star.removeAttribute("aria-hidden");
+        star.setAttribute("role", "button");
+        star.setAttribute("aria-label", on ? "Remove from favorites" : "Add to favorites");
+        star.setAttribute("aria-pressed", on ? "true" : "false");
+        for (const ev of ["pointerdown", "pointerup", "mousedown", "mouseup"]) {
+          star.addEventListener(ev, (e) => e.stopPropagation());
+        }
+        star.addEventListener("click", (e) => {
+          e.stopPropagation();
+          e.preventDefault();
+          this.onFavorite?.(item.id, !on);
+        });
+        li.appendChild(star);
+      }
       if (item.toggle) {
         const sw = doc.createElement("span");
         sw.className = "vela-menu-switch" + (item.checked ? " on" : "");
@@ -27302,6 +28473,7 @@ var Surface = class _Surface {
           host: this.host,
           placement: "right-start",
           onSelect: this.onSelect,
+          onFavorite: this.onFavorite,
           id: `${this.mid}--${item.id}`
         });
         sub.setItems(item.submenu ?? []);
@@ -27325,7 +28497,8 @@ var Menu = class {
       trigger: opts.trigger,
       triggerId: opts.triggerId,
       id: opts.id,
-      minWidth: opts.minWidth
+      minWidth: opts.minWidth,
+      onFavorite: opts.onFavorite
     });
     this.root.setItems(opts.items);
   }
@@ -27829,7 +29002,7 @@ var Drawer = class {
 };
 
 // src/widget/layout-picker.ts
-var STYLE_ID7 = "vela-widget-layout-picker-v14";
+var STYLE_ID6 = "vela-widget-layout-picker-v14";
 var CSS3 = `
 .vela-lp-layer { position: absolute; z-index: var(--vela-z-menu); }
 .vela-lp {
@@ -27934,7 +29107,7 @@ var CSS3 = `
 `;
 var GRID = 4;
 function layoutGridCanvas(doc) {
-  injectStyles(STYLE_ID7, CSS3, doc);
+  injectStyles(STYLE_ID6, CSS3, doc);
   const el = doc.createElement("div");
   el.className = "vela-lp-grid";
   const squares = [];
@@ -27974,7 +29147,7 @@ var LayoutPicker = class {
     };
     this.opts = opts;
     this.doc = opts.host.ownerDocument;
-    injectStyles(STYLE_ID7, CSS3, this.doc);
+    injectStyles(STYLE_ID6, CSS3, this.doc);
     const doc = this.doc;
     this.layer = doc.createElement("div");
     this.layer.className = "vela-ui-layer vela-lp-layer";
@@ -28287,6 +29460,24 @@ function timeframeMs(value) {
   if (!Number.isFinite(count) || count < 1) return NaN;
   return count * UNIT_MS[key];
 }
+function favoriteTimeframeChips(favorites) {
+  const seen = /* @__PURE__ */ new Set();
+  const out = [];
+  for (const tf of favorites) {
+    if (seen.has(tf)) continue;
+    seen.add(tf);
+    out.push(tf);
+  }
+  return out.sort((a, b) => {
+    const ma = timeframeMs(a);
+    const mb = timeframeMs(b);
+    const aOk = Number.isFinite(ma);
+    const bOk = Number.isFinite(mb);
+    if (aOk && bOk && ma !== mb) return ma - mb;
+    if (aOk !== bOk) return aOk ? -1 : 1;
+    return 0;
+  });
+}
 function timeframeLabel(value) {
   const parsed = parseTimeframe(value);
   if (!parsed.valid) return value;
@@ -28301,7 +29492,7 @@ function timeframeLabel(value) {
 }
 
 // src/widget/topbar.ts
-var STYLE_ID8 = "vela-topbar";
+var STYLE_ID7 = "vela-topbar";
 var CSS4 = `
 .vela-widget-topbar {
     display: flex;
@@ -28339,6 +29530,36 @@ var CSS4 = `
     color: var(--vela-fg-bright);
 }
 .vela-widget-symbol:hover, .vela-widget-tf:hover, .vela-widget-style:hover, .vela-widget-indicators:hover, .vela-widget-action-left:hover { background: var(--vela-hover); color: var(--vela-fg-bright); }
+/* Timeframe cluster: duration-sorted favorite chips, highlight in place, caret
+   opening the full dropdown. With no favorites the caret is the merged trigger
+   (label + chevron). An unstarred current value sits as an extra chip by the caret. */
+.vela-widget-tf-group { display: inline-flex; align-items: center; gap: 2px; }
+.vela-widget-tf-chips { display: inline-flex; align-items: center; gap: 2px; }
+.vela-widget-tf-chips:empty { display: none; }
+.vela-widget-tf[data-current='1'] { background: var(--vela-hover-strong); color: var(--vela-fg-bright); }
+.vela-widget-tf-caret {
+    all: unset;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 18px;
+    height: 30px;
+    border-radius: 4px;
+    cursor: pointer;
+    color: var(--vela-fg-muted);
+}
+.vela-widget-tf-caret:hover { background: var(--vela-hover); color: var(--vela-fg-bright); }
+.vela-widget-tf-caret[data-solo='1'] {
+    width: auto;
+    padding: 0 6px 0 9px;
+    gap: 4px;
+    color: var(--vela-fg-bright);
+    background: var(--vela-hover-strong);
+    font-size: 13px;
+    font-weight: 550;
+    white-space: nowrap;
+}
+.vela-widget-topbar .vela-widget-tf-caret .vela-icon { font-size: 14px; width: 14px; height: 14px; }
 .vela-widget-topbar .vela-icon { color: inherit; font-size: 16px; width: 16px; height: 16px; }
 /* Width is set in syncHairlines() to exactly one device pixel \u2014 a CSS 1px at
    fractional DPR (1.25, 1.5\u2026) straddles two physical pixels and siblings end
@@ -28436,16 +29657,23 @@ var Topbar = class {
     this.timeframe = opts.timeframe;
     this.priceStyle = opts.priceStyle;
     const doc = host.ownerDocument;
-    injectStyles(STYLE_ID8, CSS4, doc);
+    injectStyles(STYLE_ID7, CSS4, doc);
     this.el = doc.createElement("div");
     this.el.className = "vela-widget-topbar";
     this.symbolEl = doc.createElement("button");
     this.symbolEl.className = "vela-widget-symbol";
     this.symbolEl.textContent = parseSymbol(opts.symbol).ticker;
     if (opts.onSymbolClick) this.symbolEl.addEventListener("click", opts.onSymbolClick);
-    this.tfButton = doc.createElement("button");
-    this.tfButton.className = "vela-widget-tf";
-    this.tfButton.textContent = timeframeLabel(this.timeframe);
+    this.tfFavs = [...opts.timeframeFavorites ?? []];
+    this.tfChipsHost = doc.createElement("span");
+    this.tfChipsHost.className = "vela-widget-tf-chips";
+    this.tfCaret = doc.createElement("button");
+    this.tfCaret.className = "vela-widget-tf-caret";
+    this.tfCaret.appendChild(iconEl("chevron-down", doc));
+    this.tfCaret.setAttribute("aria-label", "Timeframes");
+    const tfGroup = doc.createElement("span");
+    tfGroup.className = "vela-widget-tf-group";
+    tfGroup.append(this.tfChipsHost, this.tfCaret);
     this.styleButton = doc.createElement("button");
     this.styleButton.className = "vela-widget-style";
     this.renderStyleButton(doc);
@@ -28485,19 +29713,20 @@ var Topbar = class {
       d.className = "vela-sep";
       return d;
     };
-    const leading = [this.symbolEl, sep(), this.tfButton, sep(), this.styleButton, sep()];
+    const leading = [this.symbolEl, sep(), tfGroup, sep(), this.styleButton, sep()];
     if (this.layoutButton) leading.push(this.layoutButton, sep());
     if (indicatorsBtn) leading.push(indicatorsBtn, sep());
     this.leftActionsSep = sep();
     this.leftActionsSep.hidden = true;
     this.el.append(...leading, this.leftActionsHost, this.leftActionsSep, this.undoBtn, this.redoBtn, this.actionsHost, this.alertsBtn, this.panelsHost, screenshotBtn);
     host.appendChild(this.el);
+    this.renderTfChips();
     this.onHairlineSync();
     this.hairlineRo = new ResizeObserver(this.onHairlineSync);
     this.hairlineRo.observe(this.el);
     doc.defaultView?.addEventListener("resize", this.onHairlineSync);
     this.renderActions();
-    this.tooltips.push(new Tooltip(this.tfButton, { content: "Timeframe", triggerId: "vela-topbar-tf", host }));
+    this.tooltips.push(new Tooltip(this.tfCaret, { content: "Timeframe", triggerId: "vela-topbar-tf", host }));
     this.tooltips.push(new Tooltip(this.styleButton, { content: "Chart style", triggerId: "vela-topbar-style", host }));
     if (this.layoutButton && opts.layout) {
       this.tooltips.push(new Tooltip(this.layoutButton, { content: "Layout", triggerId: "vela-topbar-layout", host }));
@@ -28514,11 +29743,12 @@ var Topbar = class {
       });
     }
     this.tfMenu = new Menu({
-      trigger: this.tfButton,
+      trigger: this.tfCaret,
       triggerId: "vela-topbar-tf",
       host,
       items: this.tfItems(),
       onSelect: (id) => opts.onTimeframe(id),
+      onFavorite: (id, on) => opts.onTimeframeFavorite?.(id, on),
       // Timeframe labels are two-or-three characters ("1m", "4h", "1D") — the
       // stylesheet's default min-width would leave the list mostly empty.
       minWidth: "84px"
@@ -28536,8 +29766,48 @@ var Topbar = class {
   }
   setTimeframe(tf) {
     this.timeframe = tf;
-    this.tfButton.textContent = timeframeLabel(tf);
     this.tfMenu.setItems(this.tfItems());
+    this.renderTfChips();
+  }
+  /** Reflect the favorite-timeframe set — the quick-switch chips and the dropdown stars. */
+  setTimeframeFavorites(favs) {
+    this.tfFavs = [...favs];
+    this.renderTfChips();
+    this.tfMenu.setItems(this.tfItems());
+  }
+  /** Rebuild the quick-switch chips (current value changed, or the favorite set did). */
+  renderTfChips() {
+    const doc = this.el.ownerDocument;
+    this.tfChipsHost.replaceChildren();
+    const stars = this.opts.onTimeframeFavorite !== void 0;
+    const chips = stars ? favoriteTimeframeChips(this.tfFavs) : [];
+    const currentIsFav = chips.includes(this.timeframe);
+    const shown = currentIsFav || chips.length === 0 ? chips : [...chips, this.timeframe];
+    for (const tf of shown) {
+      const b = doc.createElement("button");
+      b.className = "vela-widget-tf";
+      const label = timeframeLabel(tf);
+      b.textContent = label;
+      if (tf === this.timeframe) {
+        b.dataset.current = "1";
+        b.setAttribute("aria-current", "true");
+      } else {
+        b.setAttribute("aria-label", `Switch timeframe to ${label}`);
+        b.addEventListener("click", () => this.opts.onTimeframe(tf));
+      }
+      this.tfChipsHost.appendChild(b);
+    }
+    this.tfCaret.replaceChildren();
+    if (chips.length === 0) {
+      this.tfCaret.dataset.solo = "1";
+      this.tfCaret.append(doc.createTextNode(timeframeLabel(this.timeframe)), iconEl("chevron-down", doc));
+      this.tfCaret.setAttribute("aria-label", `Timeframe \u2014 ${timeframeLabel(this.timeframe)}`);
+    } else {
+      delete this.tfCaret.dataset.solo;
+      this.tfCaret.appendChild(iconEl("chevron-down", doc));
+      this.tfCaret.setAttribute("aria-label", "Timeframes");
+    }
+    this.onHairlineSync();
   }
   setPriceStyle(style) {
     this.priceStyle = style;
@@ -28615,9 +29885,9 @@ var Topbar = class {
   }
   /** Reflect a docked side panel's open state on its button — the panels toggle each other,
    *  so the dock pushes the state rather than the button assuming it. */
-  setPanelActive(id, open) {
+  setPanelActive(id, open2) {
     const btn = this.panelBtns.get(id);
-    if (btn) btn.dataset.active = open ? "1" : "";
+    if (btn) btn.dataset.active = open2 ? "1" : "";
   }
   destroy() {
     this.hairlineRo?.disconnect();
@@ -28655,7 +29925,13 @@ var Topbar = class {
     }
   }
   tfItems() {
-    return this.opts.timeframes.map((tf) => ({ id: tf, label: timeframeLabel(tf), checked: tf === this.timeframe }));
+    const stars = this.opts.onTimeframeFavorite !== void 0;
+    return this.opts.timeframes.map((tf) => ({
+      id: tf,
+      label: timeframeLabel(tf),
+      checked: tf === this.timeframe,
+      ...stars ? { favorite: this.tfFavs.includes(tf) } : {}
+    }));
   }
   styleItems() {
     return priceStyleIds().map((id, i) => ({
@@ -28678,10 +29954,10 @@ function fmtPrice(n, dp) {
   const d = dp ?? decimalsFor(n);
   return n.toLocaleString("en-US", { minimumFractionDigits: d, maximumFractionDigits: d });
 }
-function fmtChange(open, close) {
-  if (open == null || close == null || !Number.isFinite(open) || !Number.isFinite(close) || open === 0) return "";
-  const diff = close - open;
-  const pct = diff / open * 100;
+function fmtChange(open2, close) {
+  if (open2 == null || close == null || !Number.isFinite(open2) || !Number.isFinite(close) || open2 === 0) return "";
+  const diff = close - open2;
+  const pct = diff / open2 * 100;
   const sign = diff >= 0 ? "+" : "";
   return `${sign}${fmtPrice(diff, decimalsFor(close))} (${sign}${pct.toFixed(2)}%)`;
 }
@@ -28730,7 +30006,7 @@ function tickerIconEl(doc, base, name, className) {
 }
 
 // src/widget/statusline.ts
-var STYLE_ID9 = "vela-widget-statusline";
+var STYLE_ID8 = "vela-widget-statusline";
 var CSS5 = `
 .vela-statusline {
     position: absolute;
@@ -28922,7 +30198,7 @@ var Statusline = class {
     this.fitMode = false;
     this.fitRO = null;
     const doc = host.ownerDocument;
-    injectStyles(STYLE_ID9, CSS5, doc);
+    injectStyles(STYLE_ID8, CSS5, doc);
     host.classList.add("vela-has-statusline");
     this.el = doc.createElement("div");
     this.el.className = "vela-statusline";
@@ -29097,7 +30373,7 @@ var Statusline = class {
 var MAX_FONT_PX = 36;
 var MIN_FONT_PX = 12;
 var FILL = 0.9;
-var STYLE_ID10 = "vela-widget-watermark";
+var STYLE_ID9 = "vela-widget-watermark";
 var CSS6 = `
 .vela-watermark {
     position: absolute;
@@ -29136,7 +30412,7 @@ var Watermark = class {
      *  canvas, so the mark stays out of its way. Starts true: the FIRST `load:start`
      *  fires during chart construction, before any subscriber can see it. */
     this.loading = true;
-    injectStyles(STYLE_ID10, CSS6, host.ownerDocument);
+    injectStyles(STYLE_ID9, CSS6, host.ownerDocument);
     this.el = host.ownerDocument.createElement("div");
     this.el.className = "vela-watermark";
     this.el.dataset.velaScreenshot = "under";
@@ -29200,7 +30476,7 @@ var RANGE_PRESETS = [
   { id: "ALL", tf: "W", preset: "ALL", bars: 5e3 }
   // everything the provider serves
 ];
-var STYLE_ID11 = "vela-widget-bottombar";
+var STYLE_ID10 = "vela-widget-bottombar";
 var CSS7 = `
 .vela-widget-bottombar {
     display: flex;
@@ -29276,7 +30552,7 @@ var Bottombar = class {
     this.timer = null;
     this.timezone = opts.timezone;
     const doc = host.ownerDocument;
-    injectStyles(STYLE_ID11, CSS7, doc);
+    injectStyles(STYLE_ID10, CSS7, doc);
     this.el = doc.createElement("div");
     this.el.className = "vela-widget-bottombar";
     for (const preset of RANGE_PRESETS) {
@@ -29387,10 +30663,11 @@ function parseQuery(raw, venues) {
 function onlyOne(matches) {
   return matches.length === 1 ? matches[0] : null;
 }
+var venueOf = (s) => s.prefix ?? s.provider;
 function filterSymbols(list, query, limit = 100) {
-  const venues = [...new Set(list.map((s) => s.provider?.toLowerCase()).filter((p) => !!p))];
+  const venues = [...new Set(list.flatMap((s) => [venueOf(s)?.toLowerCase(), s.provider?.toLowerCase()]).filter((p) => !!p))];
   const { scope, term } = parseQuery(query, venues);
-  const pool = scope ? list.filter((s) => s.provider?.toLowerCase() === scope) : list;
+  const pool = scope ? list.filter((s) => venueOf(s)?.toLowerCase() === scope || s.provider?.toLowerCase() === scope) : list;
   const q = term.toUpperCase();
   if (!q) {
     if (scope) return [...pool].sort((a, b) => a.ticker.localeCompare(b.ticker)).slice(0, limit);
@@ -29409,12 +30686,12 @@ function filterSymbols(list, query, limit = 100) {
     if (t.startsWith(q)) prefix.push(s);
     else if (t.includes(q)) substr.push(s);
     else if ((s.description ?? "").toUpperCase().includes(q)) desc.push(s);
-    else if (!scope && s.provider?.toLowerCase().includes(qLower)) venue.push(s);
+    else if (!scope && (venueOf(s)?.toLowerCase().includes(qLower) || s.provider?.toLowerCase().includes(qLower))) venue.push(s);
     if (prefix.length >= limit) break;
   }
   return [...prefix, ...substr, ...desc, ...venue].slice(0, limit);
 }
-var STYLE_ID12 = "vela-widget-symbolpicker";
+var STYLE_ID11 = "vela-widget-symbolpicker";
 var CSS8 = `
 .vela-sp-searchrow {
     display: flex;
@@ -29512,7 +30789,7 @@ var SymbolPicker = class {
     this.seed = "";
     this.activeTab = "All";
     const doc = (opts.host ?? document.body).ownerDocument;
-    injectStyles(STYLE_ID12, CSS8, doc);
+    injectStyles(STYLE_ID11, CSS8, doc);
     this.input = doc.createElement("input");
     this.input.className = "vela-sp-input";
     this.input.placeholder = "Search symbol\u2026";
@@ -29542,8 +30819,8 @@ var SymbolPicker = class {
       host: opts.host,
       closeOnInteractOutside: true,
       content: (body) => body.append(searchRow, this.tabs, this.list),
-      onOpenChange: (open) => {
-        if (open) {
+      onOpenChange: (open2) => {
+        if (open2) {
           this.input.value = this.seed;
           this.seed = "";
           this.refresh();
@@ -29552,7 +30829,7 @@ var SymbolPicker = class {
             this.input.setSelectionRange(this.input.value.length, this.input.value.length);
           }, 0);
         }
-        opts.onOpenChange?.(open);
+        opts.onOpenChange?.(open2);
       }
     });
     this.input.addEventListener("input", () => this.refresh());
@@ -29561,14 +30838,14 @@ var SymbolPicker = class {
       else if (e.key === "ArrowUp") this.moveHighlight(-1);
       else if (e.key === "Enter") {
         const pick = this.rows[this.highlighted];
-        if (pick) this.select(pick.ticker, pick.provider, opts.onSelect);
+        if (pick) this.select(pick.ticker, pick.prefix ?? pick.provider, opts.onSelect);
         return;
       } else return;
       e.preventDefault();
     });
     this.list.addEventListener("click", (e) => {
       const row = e.target.closest(".vela-sp-row");
-      if (row?.dataset.ticker) this.select(row.dataset.ticker, row.dataset.provider, opts.onSelect);
+      if (row?.dataset.ticker) this.select(row.dataset.ticker, row.dataset.venue, opts.onSelect);
     });
   }
   /** Wire where symbols come from (re-called on every widget rebuild). */
@@ -29585,9 +30862,9 @@ var SymbolPicker = class {
   destroy() {
     this.dialog.destroy();
   }
-  select(ticker, provider, onSelect) {
+  select(ticker, venue, onSelect) {
     this.close();
-    onSelect(provider ? `${provider.toLowerCase()}:${ticker}` : ticker);
+    onSelect(venue ? `${venue}:${ticker}` : ticker);
   }
   moveHighlight(delta) {
     if (!this.rows.length) return;
@@ -29620,7 +30897,8 @@ var SymbolPicker = class {
       const row = doc.createElement("div");
       row.className = "vela-sp-row";
       row.dataset.ticker = s.ticker;
-      if (s.provider) row.dataset.provider = s.provider;
+      const venue = s.prefix ?? s.provider;
+      if (venue) row.dataset.venue = venue;
       const av = tickerIconEl(doc, baseOf(s), s.ticker, "vela-sp-avatar");
       const main = doc.createElement("span");
       main.className = "vela-sp-main";
@@ -29632,11 +30910,11 @@ var SymbolPicker = class {
       d.textContent = s.description ?? (s.type ?? "");
       main.append(t, d);
       row.append(av, main);
-      if (s.provider) {
+      if (venue) {
         const badge = doc.createElement("span");
         badge.className = "vela-sp-badge";
-        badge.dataset.p = s.provider;
-        badge.textContent = s.provider;
+        badge.dataset.p = s.provider ?? venue;
+        badge.textContent = venue;
         row.appendChild(badge);
       }
       this.list.appendChild(row);
@@ -29834,7 +31112,7 @@ function treeIsEmpty(panes) {
 }
 
 // src/widget/side-panel.ts
-var STYLE_ID13 = "vela-widget-sidepanel";
+var STYLE_ID12 = "vela-widget-sidepanel";
 var DEFAULT_PANEL_WIDTH = 280;
 var DEFAULT_PANEL_MIN_WIDTH = 200;
 var DEFAULT_PANEL_MAX_WIDTH = 640;
@@ -29938,7 +31216,7 @@ var SidePanel = class {
      *  a programmatic {@link setWidth}, so restoring a persisted width raises no change. */
     this.onWidthChange = null;
     const doc = host.ownerDocument;
-    injectStyles(STYLE_ID13, CSS9, doc);
+    injectStyles(STYLE_ID12, CSS9, doc);
     this.minWidth = opts.resizable ? opts.minWidth ?? DEFAULT_PANEL_MIN_WIDTH : 1;
     this.maxWidth = opts.resizable ? opts.maxWidth ?? DEFAULT_PANEL_MAX_WIDTH : Number.POSITIVE_INFINITY;
     this.declaredWidth = clampPanelWidth(opts.width ?? DEFAULT_PANEL_WIDTH, this.minWidth, this.maxWidth);
@@ -29970,10 +31248,10 @@ var SidePanel = class {
     return !this.el.hidden;
   }
   /** Open/close the panel — a bare call flips it. */
-  toggle(open = this.el.hidden) {
-    if (open === !this.el.hidden) return;
-    this.el.hidden = !open;
-    this.onOpenChange?.(open);
+  toggle(open2 = this.el.hidden) {
+    if (open2 === !this.el.hidden) return;
+    this.el.hidden = !open2;
+    this.onOpenChange?.(open2);
   }
   /** The scrolling body, for a panel filled from OUTSIDE the class — a contributed panel's
    *  `mount` receives exactly this element. Subclasses use the protected `body`. */
@@ -30047,7 +31325,7 @@ var SidePanel = class {
 };
 
 // src/widget/object-tree.ts
-var STYLE_ID14 = "vela-widget-objtree";
+var STYLE_ID13 = "vela-widget-objtree";
 var CSS10 = `
 /* One pane's block. The transparent border reserves the drop-target outline. */
 .vela-ot-pane {
@@ -30286,7 +31564,7 @@ var ObjectTree = class extends SidePanel {
     this.menu = null;
     this.menuActions = /* @__PURE__ */ new Map();
     this.drag = null;
-    injectStyles(STYLE_ID14, CSS10, host.ownerDocument);
+    injectStyles(STYLE_ID13, CSS10, host.ownerDocument);
     this.body.addEventListener("contextmenu", (e) => this.onContextMenu(e));
     this.body.addEventListener("pointerdown", (e) => this.onPointerDown(e));
   }
@@ -30296,9 +31574,9 @@ var ObjectTree = class extends SidePanel {
   set groups(next) {
     if (this.chart) this.groupsPerChart.set(this.chart, next);
   }
-  toggle(open = this.el.hidden) {
-    super.toggle(open);
-    if (open) this.refresh();
+  toggle(open2 = this.el.hidden) {
+    super.toggle(open2);
+    if (open2) this.refresh();
   }
   setSymbol(symbol) {
     this.symbolName = parseSymbol(symbol).ticker;
@@ -31268,7 +32546,7 @@ var ObjectTree = class extends SidePanel {
 };
 
 // src/widget/data-window.ts
-var STYLE_ID15 = "vela-widget-datawindow";
+var STYLE_ID14 = "vela-widget-datawindow";
 var CSS11 = `
 .vela-dw-group {
     padding: 10px 8px 4px;
@@ -31328,11 +32606,11 @@ var DataWindow = class extends SidePanel {
     super(host, "Data window", "vela-dw");
     this.chart = null;
     this.unsubs = [];
-    injectStyles(STYLE_ID15, CSS11, host.ownerDocument);
+    injectStyles(STYLE_ID14, CSS11, host.ownerDocument);
   }
-  toggle(open = this.el.hidden) {
-    super.toggle(open);
-    if (open) this.refresh();
+  toggle(open2 = this.el.hidden) {
+    super.toggle(open2);
+    if (open2) this.refresh();
   }
   /** (Re)bind to a chart instance — called after every widget rebuild. */
   onChart(chart) {
@@ -31446,8 +32724,8 @@ var PanelDock = class {
     }
   }
   /** Open/close one panel by id — a bare call flips it. Unknown ids are ignored. */
-  toggle(id, open) {
-    this.entries.find((e) => e.id === id)?.panel.toggle(open);
+  toggle(id, open2) {
+    this.entries.find((e) => e.id === id)?.panel.toggle(open2);
   }
   /** The open panel's id, or null when the column is closed. */
   get openId() {
@@ -31461,8 +32739,8 @@ var PanelDock = class {
   /** The dock's persistable state, or null when there is nothing worth saving. */
   getState() {
     const out = {};
-    const open = this.openId;
-    if (open) out.open = open;
+    const open2 = this.openId;
+    if (open2) out.open = open2;
     if (this.widths.size > 0) out.widths = Object.fromEntries(this.widths);
     return out.open || out.widths ? out : null;
   }
@@ -31495,13 +32773,13 @@ var PanelDock = class {
     this.entries.sort((a, b) => a.order - b.order);
     const stored = this.widths.get(entry.id);
     if (stored !== void 0) entry.panel.setWidth(stored);
-    entry.panel.onOpenChange = (open) => {
-      if (open) {
+    entry.panel.onOpenChange = (open2) => {
+      if (open2) {
         for (const other of this.entries) if (other !== entry) other.panel.toggle(false);
         this.pendingOpen = null;
       }
-      this.deps.chrome.setPanelActive(entry.id, open);
-      if (open) entry.handle?.onOpen?.();
+      this.deps.chrome.setPanelActive(entry.id, open2);
+      if (open2) entry.handle?.onOpen?.();
       this.deps.changed?.();
     };
     entry.panel.onWidthChange = (px) => {
@@ -31530,7 +32808,7 @@ var PanelDock = class {
 };
 
 // src/widget/shortcuts-help.ts
-var STYLE_ID16 = "vela-widget-shortcuts";
+var STYLE_ID15 = "vela-widget-shortcuts";
 var CSS12 = `
 .vela-sh-cat {
     color: var(--vela-fg-muted);
@@ -31556,16 +32834,16 @@ var ShortcutsHelp = class {
   constructor(keymap, host, onOpenChange) {
     this.keymap = keymap;
     const doc = (host ?? document.body).ownerDocument;
-    injectStyles(STYLE_ID16, CSS12, doc);
+    injectStyles(STYLE_ID15, CSS12, doc);
     this.list = doc.createElement("div");
     this.dialog = new Dialog({
       title: "Keyboard shortcuts",
       host,
       closeOnInteractOutside: true,
       content: (body) => body.appendChild(this.list),
-      onOpenChange: (open) => {
-        if (open) this.refresh();
-        onOpenChange?.(open);
+      onOpenChange: (open2) => {
+        if (open2) this.refresh();
+        onOpenChange?.(open2);
       }
     });
   }
@@ -31844,7 +33122,7 @@ var ChartContextMenu = class {
 };
 
 // src/widget/indicator-picker.ts
-var STYLE_ID17 = "vela-widget-indpicker";
+var STYLE_ID16 = "vela-widget-indpicker";
 var CSS13 = `
 .vela-ip-searchrow {
     display: flex;
@@ -31922,7 +33200,7 @@ var IndicatorPicker = class {
     this.isOpen = false;
     this.opts = opts;
     const doc = (opts.host ?? document.body).ownerDocument;
-    injectStyles(STYLE_ID17, CSS13, doc);
+    injectStyles(STYLE_ID16, CSS13, doc);
     this.search = doc.createElement("input");
     this.search.className = "vela-ip-search";
     this.search.placeholder = "Search\u2026";
@@ -31940,14 +33218,14 @@ var IndicatorPicker = class {
       closeOnInteractOutside: true,
       // The picker adds/removes indicators live — keep the chart undimmed behind it.
       content: (body) => body.append(searchRow, this.list),
-      onOpenChange: (open) => {
-        this.isOpen = open;
-        if (open) {
+      onOpenChange: (open2) => {
+        this.isOpen = open2;
+        if (open2) {
           this.search.value = "";
           this.refresh();
           if (!this.search.closest('[data-layout="mobile"]')) setTimeout(() => this.search.focus(), 0);
         }
-        opts.onOpenChange?.(open);
+        opts.onOpenChange?.(open2);
       }
     });
     this.list.addEventListener("click", (e) => {
@@ -32050,7 +33328,7 @@ var IndicatorPicker = class {
 };
 
 // src/widget/timeframe-quick.ts
-var STYLE_ID18 = "vela-widget-tfquick";
+var STYLE_ID17 = "vela-widget-tfquick";
 var CSS14 = `
 .vela-tq-input {
     display: block;
@@ -32074,7 +33352,7 @@ var CSS14 = `
 var TimeframeQuick = class {
   constructor(opts) {
     const doc = (opts.host ?? document.body).ownerDocument;
-    injectStyles(STYLE_ID18, CSS14, doc);
+    injectStyles(STYLE_ID17, CSS14, doc);
     this.input = doc.createElement("input");
     this.input.className = "vela-tq-input";
     this.input.setAttribute("spellcheck", "false");
@@ -32086,7 +33364,7 @@ var TimeframeQuick = class {
       draggable: true,
       closeOnInteractOutside: true,
       content: (body) => body.append(this.input, this.hint),
-      onOpenChange: (open) => opts.onOpenChange?.(open)
+      onOpenChange: (open2) => opts.onOpenChange?.(open2)
     });
     this.input.addEventListener("input", () => this.renderHint());
     this.input.addEventListener("keydown", (e) => {
@@ -32256,7 +33534,7 @@ var LayoutModeController = class {
 };
 
 // src/widget/mobile-bar.ts
-var STYLE_ID19 = "vela-widget-mobilebar";
+var STYLE_ID18 = "vela-widget-mobilebar";
 var CSS15 = `
 .vela-mobilebar {
     display: none;
@@ -32307,7 +33585,7 @@ var MobileBar = class {
   constructor(host, opts) {
     this.opts = opts;
     const doc = host.ownerDocument;
-    injectStyles(STYLE_ID19, CSS15, doc);
+    injectStyles(STYLE_ID18, CSS15, doc);
     this.el = doc.createElement("div");
     this.el.className = "vela-mobilebar";
     const item = (cls, label, onClick, icon2) => {
@@ -32366,7 +33644,7 @@ var MobileBar = class {
 };
 
 // src/widget/timeframe-drawer.ts
-var STYLE_ID20 = "vela-widget-tf-drawer";
+var STYLE_ID19 = "vela-widget-tf-drawer";
 var CSS16 = `
 .vela-tfd-heading {
     padding: 4px 2px 8px;
@@ -32423,7 +33701,7 @@ var TimeframeDrawer = class {
     this.rangeChips = /* @__PURE__ */ new Map();
     this.tfChips = /* @__PURE__ */ new Map();
     const doc = opts.host.ownerDocument;
-    injectStyles(STYLE_ID20, CSS16, doc);
+    injectStyles(STYLE_ID19, CSS16, doc);
     this.drawer = new Drawer({ host: opts.host, onOpenChange: opts.onOpenChange });
     const rangeHeading = doc.createElement("div");
     rangeHeading.className = "vela-tfd-heading";
@@ -32481,7 +33759,7 @@ var TimeframeDrawer = class {
 };
 
 // src/widget/drawings-drawer.ts
-var STYLE_ID21 = "vela-widget-drawings-drawer";
+var STYLE_ID20 = "vela-widget-drawings-drawer";
 var CSS17 = `
 /* Search + tabs stay pinned while the tool list scrolls underneath. */
 .vela-dd-sticky {
@@ -32584,7 +33862,7 @@ var DrawingsDrawer = class {
     this.definition = { groups: [] };
     this.activeGroup = "";
     const doc = opts.host.ownerDocument;
-    injectStyles(STYLE_ID21, CSS17, doc);
+    injectStyles(STYLE_ID20, CSS17, doc);
     this.drawer = new Drawer({
       host: opts.host,
       title: "Drawings",
@@ -32726,7 +34004,7 @@ var DrawingsDrawer = class {
 };
 
 // src/widget/more-drawer.ts
-var STYLE_ID22 = "vela-widget-more-drawer";
+var STYLE_ID21 = "vela-widget-more-drawer";
 var CSS18 = `
 .vela-md-actions {
     display: flex;
@@ -32802,7 +34080,7 @@ var MoreDrawer = class {
   constructor(opts) {
     this.opts = opts;
     this.view = "main";
-    injectStyles(STYLE_ID22, CSS18, opts.host.ownerDocument);
+    injectStyles(STYLE_ID21, CSS18, opts.host.ownerDocument);
     this.drawer = new Drawer({ host: opts.host, onOpenChange: opts.onOpenChange });
   }
   open() {
@@ -32994,7 +34272,7 @@ var MoreDrawer = class {
 };
 
 // src/widget/timezone-drawer.ts
-var STYLE_ID23 = "vela-widget-timezone-drawer";
+var STYLE_ID22 = "vela-widget-timezone-drawer";
 var CSS19 = `
 .vela-tzd-list { padding: 2px 0 4px; }
 .vela-tzd-row {
@@ -33014,7 +34292,7 @@ var CSS19 = `
 var TimezoneDrawer = class {
   constructor(opts) {
     this.opts = opts;
-    injectStyles(STYLE_ID23, CSS19, opts.host.ownerDocument);
+    injectStyles(STYLE_ID22, CSS19, opts.host.ownerDocument);
     this.drawer = new Drawer({ host: opts.host, title: "Time zone", onOpenChange: opts.onOpenChange });
   }
   open() {
@@ -33052,7 +34330,7 @@ var TimezoneDrawer = class {
 };
 
 // src/widget/price-scale-drawer.ts
-var STYLE_ID24 = "vela-widget-price-scale-drawer";
+var STYLE_ID23 = "vela-widget-price-scale-drawer";
 var CSS20 = `
 .vela-psd-list { padding: 2px 0 4px; }
 .vela-psd-row {
@@ -33082,7 +34360,7 @@ var PriceScaleDrawer = class {
   constructor(opts) {
     this.opts = opts;
     this.pane = null;
-    injectStyles(STYLE_ID24, CSS20, opts.host.ownerDocument);
+    injectStyles(STYLE_ID23, CSS20, opts.host.ownerDocument);
     this.drawer = new Drawer({ host: opts.host, title: "Price scale", onOpenChange: opts.onOpenChange });
   }
   open() {
@@ -33218,7 +34496,7 @@ var PriceScaleDrawer = class {
 };
 
 // src/widget/drawing-pill.ts
-var STYLE_ID25 = "vela-widget-drawing-pill";
+var STYLE_ID24 = "vela-widget-drawing-pill";
 var CSS21 = `
 .vela-drawpill { display: none; }
 [data-layout='mobile'] .vela-drawpill {
@@ -33279,7 +34557,7 @@ var DrawingPill = class {
     this.chart = null;
     this.chartSubs = [];
     const doc = host.ownerDocument;
-    injectStyles(STYLE_ID25, CSS21, doc);
+    injectStyles(STYLE_ID24, CSS21, doc);
     this.el = doc.createElement("div");
     this.el.className = "vela-drawpill";
     this.el.hidden = true;
@@ -33388,6 +34666,10 @@ function sanitizeState(doc) {
     const favs = d.favorites.filter((f) => typeof f === "string");
     if (favs.length > 0) out.favorites = favs;
   }
+  if (Array.isArray(d.timeframeFavorites)) {
+    const favs = d.timeframeFavorites.filter((f) => typeof f === "string");
+    if (favs.length > 0) out.timeframeFavorites = favs;
+  }
   const sync = sanitizeSync(d.sync);
   if (sync) out.sync = sync;
   const tracks = sanitizeTrackSizes(d.trackSizes);
@@ -33661,7 +34943,7 @@ var WidgetHistory = class {
 };
 
 // src/widget/toast.ts
-var STYLE_ID26 = "vela-widget-toast";
+var STYLE_ID25 = "vela-widget-toast";
 var CSS22 = `
 .vela-toast {
     position: absolute;
@@ -33692,7 +34974,7 @@ var CSS22 = `
 var Toast = class {
   constructor(host) {
     this.timer = null;
-    injectStyles(STYLE_ID26, CSS22, host.ownerDocument);
+    injectStyles(STYLE_ID25, CSS22, host.ownerDocument);
     this.el = host.ownerDocument.createElement("div");
     this.el.className = "vela-toast";
     host.appendChild(this.el);
@@ -33828,6 +35110,8 @@ var VelaWidget = class {
     this.stateListeners = /* @__PURE__ */ new Set();
     /** Favorite drawing-tool types — mirrored from chart events, reapplied on rebuilds. */
     this.favs = [];
+    /** Favorite timeframes — the topbar's quick-switch chips, persisted with the shell. */
+    this.tfFavs = [];
     /** Mounted attachment disposers (by id), torn down at destroy. */
     this.attachmentDisposers = /* @__PURE__ */ new Map();
     this.onUnload = () => this.persistNow();
@@ -33870,6 +35154,7 @@ var VelaWidget = class {
     this.indicatorTitlesOn = bootCell?.indicatorTitles ?? true;
     this.indicatorValuesOn = bootCell?.indicatorValues ?? true;
     this.favs = boot?.favorites ? [...boot.favorites] : [];
+    this.tfFavs = boot?.timeframeFavorites ? [...boot.timeframeFavorites] : [];
     this.savedConfig = bootCell?.rendererConfig ?? null;
     this.savedDrawings = bootCell?.drawings ?? null;
     this.pendingIndicators = bootCell?.indicators ?? null;
@@ -33883,9 +35168,9 @@ var VelaWidget = class {
     this.symbolPicker = new SymbolPicker({
       host: this.root,
       onSelect: (symbol) => this.setSymbol(symbol),
-      onOpenChange: (open) => {
-        if (open) this.inner?.renderer.closeDialogs();
-        this.trackDialog(open);
+      onOpenChange: (open2) => {
+        if (open2) this.inner?.renderer.closeDialogs();
+        this.trackDialog(open2);
       }
     });
     this.indicatorPicker = opts.indicatorPicker !== false ? new IndicatorPicker({
@@ -33908,15 +35193,15 @@ var VelaWidget = class {
         if (i < present.length) this.removeNative(present[i].type);
         else this.removeInstance(i - present.length);
       },
-      onOpenChange: (open) => {
-        if (open) this.inner?.renderer.closeDialogs();
-        this.trackDialog(open);
+      onOpenChange: (open2) => {
+        if (open2) this.inner?.renderer.closeDialogs();
+        this.trackDialog(open2);
       }
     }) : null;
     this.tfQuick = new TimeframeQuick({
       host: this.root,
       onApply: (tf) => this.setTimeframe(tf),
-      onOpenChange: (open) => this.trackDialog(open)
+      onOpenChange: (open2) => this.trackDialog(open2)
     });
     const picker = this.indicatorPicker;
     this.topbar = new Topbar(this.root, {
@@ -33929,8 +35214,10 @@ var VelaWidget = class {
       onAlertsClick: (anchor) => this.openAlertsMenu(anchor),
       timeframe: this.timeframe,
       timeframes: opts.timeframes ?? DEFAULT_TIMEFRAMES,
+      timeframeFavorites: this.tfFavs,
       priceStyle: this.priceStyle,
       onTimeframe: (tf) => this.setTimeframe(tf),
+      onTimeframeFavorite: (tf, on) => this.setTimeframeFavorite(tf, on),
       onPriceStyle: (style) => this.setPriceStyle(style),
       getContext: () => this.context()
     });
@@ -34041,7 +35328,7 @@ var VelaWidget = class {
       label: "Show this shortcuts panel",
       category: "Help",
       run: () => {
-        this.shortcutsHelp ?? (this.shortcutsHelp = new ShortcutsHelp(this.keymap, this.root, (open) => this.trackDialog(open)));
+        this.shortcutsHelp ?? (this.shortcutsHelp = new ShortcutsHelp(this.keymap, this.root, (open2) => this.trackDialog(open2)));
         this.shortcutsHelp.open();
       }
     });
@@ -34075,7 +35362,7 @@ var VelaWidget = class {
       activeRange: () => this.activeRangeId,
       onTimeframe: (tf) => this.setTimeframe(tf),
       onRange: (preset) => this.applyRange(preset),
-      onOpenChange: (open) => this.trackDialog(open)
+      onOpenChange: (open2) => this.trackDialog(open2)
     }));
     this.tfDrawer.open();
   }
@@ -34087,7 +35374,7 @@ var VelaWidget = class {
       isFavorite: (type) => this.inner?.drawings.isFavorite(type) ?? false,
       onFavorite: (type, on) => this.inner?.drawings.setFavorite(type, on),
       onSelect: (type) => this.inner?.drawings.setTool(type),
-      onOpenChange: (open) => this.trackDialog(open)
+      onOpenChange: (open2) => this.trackDialog(open2)
     }));
     this.drawingsDrawer.open();
   }
@@ -34108,7 +35395,7 @@ var VelaWidget = class {
       // Left-aligned actions have their own bottom-bar stop — only the rest
       // lands in the drawer, or every left action would appear twice.
       actions: () => widgetActions("topbar", this.context()).filter((a) => a.align !== "left").map((a) => ({ label: a.label, icon: a.icon, run: () => a.run(this.context()) })),
-      onOpenChange: (open) => this.trackDialog(open)
+      onOpenChange: (open2) => this.trackDialog(open2)
     }));
     this.moreDrawer.open();
   }
@@ -34117,7 +35404,7 @@ var VelaWidget = class {
       host: this.root,
       timezone: () => this.timezone,
       onTimezone: (zone) => this.setTimezone(zone),
-      onOpenChange: (open) => this.trackDialog(open)
+      onOpenChange: (open2) => this.trackDialog(open2)
     }));
     this.timezoneDrawer.open();
   }
@@ -34127,7 +35414,7 @@ var VelaWidget = class {
       host: this.root,
       chart: () => this.inner,
       pressY: () => this.priceScalePressY,
-      onOpenChange: (open) => this.trackDialog(open)
+      onOpenChange: (open2) => this.trackDialog(open2)
     }));
     this.priceScaleDrawer.open();
   }
@@ -34156,7 +35443,7 @@ var VelaWidget = class {
       setTimeframe: (tf) => this.setTimeframe(tf),
       setPriceStyle: (style) => this.setPriceStyle(style),
       openSymbolSearch: (query) => this.symbolPicker.open(query ?? ""),
-      togglePanel: (id, open) => this.dock.toggle(id, open),
+      togglePanel: (id, open2) => this.dock.toggle(id, open2),
       host: this.root,
       toast: (message, kind) => this.toast?.show(message, kind)
     };
@@ -34198,13 +35485,15 @@ var VelaWidget = class {
     this.statusline?.setMeta(tf, this.providerLabel());
   }
   /**
-   * The provider name to show: the one that RESOLVED the symbol, not the one configured.
-   * They differ whenever the `provider` option is just a default (or names something that
-   * isn't registered) — the status line must not claim a venue that served nothing.
+   * The venue label to show: the LISTING prefix the resolved symbol's data declares
+   * (`NASDAQ` for AAPL), else the provider that RESOLVED the symbol — never the one
+   * configured or typed. They differ whenever the `provider` option is just a default,
+   * the prefix was a listing venue, or the spelling isn't registered — the status line
+   * must not claim a venue that served nothing.
    */
   providerLabel() {
-    const resolved = this.inner?.data.resolve(this.symbol)?.provider;
-    return resolved ?? parseSymbol(this.symbol).provider ?? "";
+    const display = this.inner?.data.displayPrefix(this.symbol);
+    return display ?? parseSymbol(this.symbol).provider ?? "";
   }
   setTimeframe(tf) {
     if (tf === this.timeframe || this.destroyed) return;
@@ -34215,6 +35504,14 @@ var VelaWidget = class {
     this.markStateDirty();
     void this.inner?.setMarket({ timeframe: tf, bars: this.bars });
   }
+  /** Star/unstar a timeframe — the topbar chips and dropdown stars follow, and the
+   *  set persists with the rest of the shell state. */
+  setTimeframeFavorite(tf, on) {
+    if (on === this.tfFavs.includes(tf)) return;
+    this.tfFavs = on ? [tf, ...this.tfFavs] : this.tfFavs.filter((f) => f !== tf);
+    this.topbar.setTimeframeFavorites(this.tfFavs);
+    this.markStateDirty();
+  }
   /**
    * Switch the chart symbol in place. An `EXCHANGE:` prefix pins the venue (the
    * symbol picker composes one from the row the user pointed at) — a bare ticker
@@ -34272,6 +35569,7 @@ var VelaWidget = class {
     });
     const state = { version: 1, layout: "1", activeCellId: "c1", timezone: this.timezone, charts: [{ id: "c1", ...cell }] };
     if (this.favs.length > 0) state.favorites = [...this.favs];
+    if (this.tfFavs.length > 0) state.timeframeFavorites = [...this.tfFavs];
     const panels2 = this.dock.getState();
     if (panels2) state.panels = panels2;
     return state;
@@ -34295,6 +35593,10 @@ var VelaWidget = class {
       this.favs = [...st.favorites];
       this.inner?.drawings.setFavorites(this.favs);
     }
+    if (st.timeframeFavorites) {
+      this.tfFavs = [...st.timeframeFavorites];
+      this.topbar.setTimeframeFavorites(this.tfFavs);
+    }
     this.dock.applyState(st.panels);
     if (cell) {
       const style = fromUrl.priceStyle ?? cell.priceStyle;
@@ -34551,6 +35853,9 @@ var VelaWidget = class {
     for (const [language, make] of Object.entries(resolveEngines(engines))) chart.registerEngine(language, make());
     this.inner = chart;
     this.symbolPicker.setSource(() => chart.data.symbols());
+    void chart.data.ready().then(() => {
+      if (this.inner === chart) this.statusline?.setMeta(this.timeframe, this.providerLabel());
+    });
     if (this.layoutCtl !== void 0) chart.renderer.setLayoutMode(this.layoutCtl.current);
     this.objectTree.setSymbol(this.symbol);
     chart.renderer.setLegendActions(legendActionsProviderFor(chart, () => this.context()));
@@ -34869,9 +36174,9 @@ var VelaWidget = class {
       this.tfQuick.open(key);
     }
   }
-  trackDialog(open) {
-    this.openDialogs = Math.max(0, this.openDialogs + (open ? 1 : -1));
-    if (open) this.keymap.pushScope("dialog");
+  trackDialog(open2) {
+    this.openDialogs = Math.max(0, this.openDialogs + (open2 ? 1 : -1));
+    if (open2) this.keymap.pushScope("dialog");
     else this.keymap.popScope("dialog");
   }
   downloadScreenshot() {