npm - @luxalgo/vela - Versions diffs - 0.5.2 → 0.5.4 - Mend

@luxalgo/vela 0.5.2 → 0.5.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (47) hide show

package/README.md +3 -2
package/dist/{DataProvider-DTOEXKTI.d.ts → DataProvider-Cqc_BaJ9.d.ts} +1 -1
package/dist/{DataProvider-gnzv-dgc.d.cts → DataProvider-DgS2UyMc.d.cts} +1 -1
package/dist/{chunk-RRFGWZNJ.js → chunk-D6WM5IUE.js} +786 -864
package/dist/{chunk-LJLZR44Y.js → chunk-EMS6PO2T.js} +5 -7
package/dist/{chunk-Y7TK4ZWK.js → chunk-JBQUY2RI.js} +126 -19
package/dist/chunk-OGRQW3M6.js +1328 -0
package/dist/{chunk-P556H6EA.js → chunk-QWIEKZRE.js} +59 -34
package/dist/{chunk-B5TIKQJ5.js → chunk-ZNL2X6U2.js} +16 -2
package/dist/{contributions-Ci_i3IN2.d.cts → contributions-4Nh1jbvb.d.cts} +2 -2
package/dist/{contributions-b6AVrqqG.d.ts → contributions-DuIxJWeH.d.ts} +2 -2
package/dist/{history-Cf1lVsap.d.cts → history-FsmvCIo4.d.ts} +5 -3
package/dist/{history-Ci3M0xLV.d.ts → history-HofqYEh2.d.cts} +5 -3
package/dist/index.cjs +2783 -1611
package/dist/index.d.cts +14 -8
package/dist/index.d.ts +14 -8
package/dist/index.js +4 -4
package/dist/{options-XTBpbx0s.d.ts → options-BlQ00Fju.d.cts} +3 -1
package/dist/{options-XTBpbx0s.d.cts → options-BlQ00Fju.d.ts} +3 -1
package/dist/{plugin-DfH4Y-Om.d.cts → plugin-DJR6z3e0.d.cts} +8 -7
package/dist/{plugin-CnNd7cuF.d.ts → plugin-N_EaXN4-.d.ts} +8 -7
package/dist/plugin.cjs +4 -0
package/dist/plugin.d.cts +4 -4
package/dist/plugin.d.ts +4 -4
package/dist/plugin.js +2 -2
package/dist/providers/binance.d.cts +2 -2
package/dist/providers/binance.d.ts +2 -2
package/dist/providers/coinbase.d.cts +2 -2
package/dist/providers/coinbase.d.ts +2 -2
package/dist/providers/hyperliquid.d.cts +2 -2
package/dist/providers/hyperliquid.d.ts +2 -2
package/dist/ui.cjs +1318 -4
package/dist/ui.d.cts +383 -2
package/dist/ui.d.ts +383 -2
package/dist/ui.js +3 -3
package/dist/vela.global.js +2777 -1605
package/dist/vela.global.min.js +315 -66
package/dist/widget.cjs +2358 -1052
package/dist/widget.d.cts +26 -8
package/dist/widget.d.ts +26 -8
package/dist/widget.js +27 -9
package/dist/workspace.cjs +2264 -946
package/dist/workspace.d.cts +10 -5
package/dist/workspace.d.ts +10 -5
package/dist/workspace.js +25 -7
package/package.json +1 -1
package/dist/chunk-ATPU5CI6.js +0 -81

package/dist/workspace.cjs CHANGED Viewed

@@ -805,12 +805,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;
@@ -840,6 +834,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",
@@ -987,6 +984,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(
@@ -1341,7 +1342,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)
     },
@@ -1423,6 +1427,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. */
@@ -1441,9 +1461,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");
@@ -1451,16 +1475,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);
@@ -1540,6 +1573,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" : "");
@@ -1555,6 +1607,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 ?? []);
@@ -1578,7 +1631,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);
   }
@@ -2081,6 +2135,1197 @@ var Drawer = class {
   }
 };
+// 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/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/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/widget/layout-picker.ts
 var STYLE_ID = "vela-widget-layout-picker-v14";
 var CSS2 = `
@@ -2837,6 +4082,36 @@ function parseTimeframe(text) {
     short: `${count}${UNIT_SHORT[key]}`
   };
 }
+function timeframeMs(value) {
+  const v = String(value ?? "").trim();
+  if (!v) return NaN;
+  const m = /^(\d*)\s*([a-zA-Z]?)$/.exec(v);
+  if (!m) return NaN;
+  const key = unitKey((m[2] ?? "").toUpperCase());
+  if (key === null) return NaN;
+  if ((m[1] ?? "") === "" && key === "MIN") return NaN;
+  const count = (m[1] ?? "") === "" ? 1 : parseInt(m[1], 10);
+  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;
@@ -2889,6 +4164,36 @@ var CSS3 = `
     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
@@ -2993,9 +4298,16 @@ var Topbar = class {
     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);
@@ -3035,19 +4347,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 }));
@@ -3064,11 +4377,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"
@@ -3086,8 +4400,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;
@@ -3165,9 +4519,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();
@@ -3205,7 +4559,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) => ({
@@ -9490,10 +10850,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`. */
@@ -9816,9 +11176,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;
@@ -10850,9 +12210,9 @@ var DataWindow = class extends SidePanel {
     this.unsubs = [];
     injectStyles(STYLE_ID6, CSS7, 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) {
@@ -10966,8 +12326,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() {
@@ -10981,8 +12341,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;
   }
@@ -11015,13 +12375,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) => {
@@ -11218,8 +12578,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();
@@ -11228,7 +12588,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());
@@ -11418,14 +12778,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) => {
@@ -11564,7 +12924,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) => {
@@ -11641,9 +13001,9 @@ var ShortcutsHelp = class {
       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);
       }
     });
   }
@@ -14831,6 +16191,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);
@@ -17210,6 +18574,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;
@@ -17254,6 +18619,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
@@ -17279,6 +18649,10 @@ var InputsUI = class {
     this.onDialogKey = (e) => {
       if (e.key === "Escape") {
         e.preventDefault();
+        if (isPopoverOpen()) {
+          closeOpenPopovers();
+          return;
+        }
         this.closeDialog();
       }
     };
@@ -17724,6 +19098,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);
@@ -17784,7 +19159,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();
@@ -17802,7 +19176,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);
@@ -17814,7 +19188,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;";
@@ -17824,7 +19198,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() {
@@ -17877,15 +19251,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. */
@@ -17939,7 +19313,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
@@ -17969,55 +19344,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())
@@ -18029,8 +19406,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;
@@ -18058,79 +19459,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) {
@@ -18139,107 +19538,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) {
@@ -18251,45 +19573,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");
@@ -18297,15 +19596,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. */
@@ -18320,20 +19620,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. */
@@ -18352,9 +19647,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
@@ -18382,7 +19929,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() {
@@ -18401,21 +19948,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";
@@ -18429,6 +19961,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();
@@ -18457,9 +20004,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_ID2 = "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_ID2);
@@ -18468,30 +20016,47 @@ function ensureDialogStyles() {
   s.id = DIALOG_STYLE_ID2;
   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 = [
@@ -18516,6 +20081,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"];
@@ -21060,7 +22656,7 @@ var TOUCH_TAP_SLOP = 14;
 var DOUBLE_TAP_MS = 350;
 var DOUBLE_TAP_SLOP = 30;
 var TIME_SCALE_K = 4e-3;
-var WHEEL_ZOOM_K = 25e-4;
+var WHEEL_ZOOM_K = 4e-3;
 function wheelZoomAnchor(coords, cursorX, rightEdge) {
   if (rightEdge) return { logical: coords.rightEdgeLogical, x: coords.width };
   return { logical: coords.xToLogical(cursorX), x: cursorX };
@@ -21114,6 +22710,8 @@ var InputController = class {
     // smoothed pointer velocity, px/ms
     this.middleDeleted = false;
     // the last middle press deleted a drawing (suppress autoscroll/paste)
+    this.rightCancelled = false;
+    // the last right press cancelled a placement (suppress the context menu)
     // Last cursor position over the element (NaN once it leaves) — lets a modifier
     // press/release re-shape the drawings preview with the pointer stationary.
     this.cursorX = NaN;
@@ -21138,6 +22736,14 @@ var InputController = class {
     this.onMiddleGuard = (e) => {
       if (e.button === 1 && this.middleDeleted) e.preventDefault();
     };
+    /** A right press that cancelled a placement must not ALSO open the host's chart
+     *  context menu — swallow its companion event before it bubbles to the host. */
+    this.onContextGuard = (e) => {
+      if (!this.rightCancelled) return;
+      this.rightCancelled = false;
+      e.preventDefault();
+      e.stopPropagation();
+    };
     /** A modifier press/release with the pointer stationary: re-issue the last cursor
      *  position so the placing ghost / drag preview reflects the new state immediately
      *  (Shift's 45° angle lock, Ctrl/Cmd's momentary strong magnet). */
@@ -21154,6 +22760,11 @@ var InputController = class {
         if (this.middleDeleted) e.preventDefault();
         return;
       }
+      if (e.button === 2) {
+        this.rightCancelled = this.deps.drawingsCancelPlacement?.() ?? false;
+        if (this.rightCancelled) e.preventDefault();
+        return;
+      }
       if (e.button !== 0) return;
       const { x, y } = this.local(e);
       if (e.pointerType === "touch") {
@@ -21358,6 +22969,7 @@ var InputController = class {
     el.addEventListener("wheel", this.onWheel, { passive: false });
     el.addEventListener("mousedown", this.onMiddleGuard);
     el.addEventListener("auxclick", this.onMiddleGuard);
+    el.addEventListener("contextmenu", this.onContextGuard);
     const win = el.ownerDocument?.defaultView;
     win?.addEventListener("keydown", this.onModifier);
     win?.addEventListener("keyup", this.onModifier);
@@ -21379,6 +22991,7 @@ var InputController = class {
     el.removeEventListener("wheel", this.onWheel);
     el.removeEventListener("mousedown", this.onMiddleGuard);
     el.removeEventListener("auxclick", this.onMiddleGuard);
+    el.removeEventListener("contextmenu", this.onContextGuard);
     this.cancelLongPress();
     this.touches.clear();
     this.el = null;
@@ -22330,6 +23943,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);
@@ -23051,8 +24670,11 @@ var ChromeRenderer = class {
     }
     ctx.font = `${scene.style.fontSize}px ${theme.fontFamily}`;
     ctx.textBaseline = "middle";
-    if (coords.barCount === 0) return;
     const panes = scene.orderedPanes();
+    if (coords.barCount === 0) {
+      this.drawPaneSeparators(ctx, scene, theme, fullW, panes);
+      return;
+    }
     const pricePane = panes.find((p) => p.kind === "price") ?? null;
     for (const pane of panes) {
       if (pane.collapsed) continue;
@@ -23500,367 +25122,71 @@ function formatStamp(ms, timeZone) {
   return `${pad(d.getUTCMonth() + 1)}-${pad(d.getUTCDate())} ${pad(d.getUTCHours())}:${pad(d.getUTCMinutes())}`;
 }
-// src/renderers/native/drawings/colorPicker.ts
-function splitColor(color) {
-  const s = String(color ?? "").trim();
-  let m = /^#([0-9a-f]{6})([0-9a-f]{2})?$/i.exec(s);
-  if (m) return { hex6: `#${m[1].toLowerCase()}`, alpha: m[2] ? parseInt(m[2], 16) / 255 : 1 };
-  m = /^#([0-9a-f]{3})$/i.exec(s);
-  if (m) {
-    const h = m[1].toLowerCase();
-    return { hex6: `#${h[0]}${h[0]}${h[1]}${h[1]}${h[2]}${h[2]}`, alpha: 1 };
-  }
-  const rgba = /^rgba?\(([^)]+)\)/i.exec(s);
-  if (rgba) {
-    const p = rgba[1].split(",").map((v) => v.trim());
-    const hx = (n) => Math.max(0, Math.min(255, Math.round(n))).toString(16).padStart(2, "0");
-    const a = p[3] != null ? Math.max(0, Math.min(1, parseFloat(p[3]))) : 1;
-    return { hex6: `#${hx(parseInt(p[0] ?? "0", 10))}${hx(parseInt(p[1] ?? "0", 10))}${hx(parseInt(p[2] ?? "0", 10))}`, alpha: a };
-  }
-  return { hex6: DEFAULT_DRAWING_COLOR, alpha: 1 };
-}
-function combineColor(hex6, alpha) {
-  const a = Math.max(0, Math.min(1, alpha));
-  if (a >= 0.999) return hex6;
-  return `${hex6}${Math.round(a * 255).toString(16).padStart(2, "0")}`;
-}
-function blendOver(fg, bg, alpha) {
-  const rgb = (c) => {
-    const n = parseInt(splitColor(c).hex6.slice(1), 16);
-    return [n >> 16 & 255, n >> 8 & 255, n & 255];
-  };
-  const [fr, fgc, fb] = rgb(fg);
-  const [br, bgc, bb] = rgb(bg);
-  const a = Math.max(0, Math.min(1, alpha));
-  const h = (n) => Math.round(n).toString(16).padStart(2, "0");
-  return `#${h(fr * a + br * (1 - a))}${h(fgc * a + bgc * (1 - a))}${h(fb * a + bb * (1 - a))}`;
-}
-function hslHex(h, s, l) {
-  const sn = s / 100;
-  const ln = l / 100;
-  const k = (n) => (n + h / 30) % 12;
-  const a = sn * Math.min(ln, 1 - ln);
-  const f = (n) => ln - a * Math.max(-1, Math.min(k(n) - 3, Math.min(9 - k(n), 1)));
-  const to = (x) => Math.round(x * 255).toString(16).padStart(2, "0");
-  return `#${to(f(0))}${to(f(8))}${to(f(4))}`;
-}
-function buildPalette() {
-  const grays = [100, 90, 80, 68, 56, 45, 35, 25, 14, 0].map((l) => hslHex(0, 0, l));
-  const hues = [4, 28, 50, 96, 140, 174, 200, 224, 270, 322];
-  const levels = [
-    [82, 56],
-    // vivid
-    [58, 84],
-    // light pastel
-    [62, 74],
-    [66, 62],
-    [70, 50],
-    [64, 39],
-    [54, 29]
-    // dark
-  ];
-  return [grays, ...levels.map(([s, l]) => hues.map((h) => hslHex(h, s, l)))];
-}
-var PALETTE = buildPalette();
-function transparencyChecker(size) {
-  return `repeating-conic-gradient(#9aa0a6 0% 25%, #d3d6da 0% 50%) 0 0 / ${size}px ${size}px`;
-}
-var CHECKER = transparencyChecker(10);
-var recents = [ACCENT, BULLISH, BEARISH, WARNING, NEUTRAL];
-function addRecent(hex6) {
-  const i = recents.findIndex((c) => c.toLowerCase() === hex6.toLowerCase());
-  if (i >= 0) recents.splice(i, 1);
-  recents.unshift(hex6);
-  if (recents.length > 10) recents.length = 10;
-}
-function buildColorPicker(color, theme, onChange) {
-  const parsed = splitColor(color);
-  let curHex = parsed.hex6;
-  let curAlpha = parsed.alpha;
-  const root = document.createElement("div");
-  root.style.cssText = "display:flex;flex-direction:column;gap:9px;width:236px;";
-  const grid = document.createElement("div");
-  grid.style.cssText = "display:grid;grid-template-columns:repeat(10,1fr);gap:4px;";
-  const swatches = [];
-  for (const row of PALETTE) {
-    for (const c of row) {
-      const sw = document.createElement("button");
-      sw.type = "button";
-      sw.dataset.c = c;
-      sw.style.cssText = `width:100%;aspect-ratio:1;border-radius:4px;border:none;cursor:pointer;background:${c};padding:0;`;
-      sw.addEventListener("click", (e) => {
-        e.stopPropagation();
-        pickHex(c);
-      });
-      grid.appendChild(sw);
-      swatches.push(sw);
-    }
-  }
-  const paintSelection = () => {
-    for (const sw of swatches) {
-      const on = (sw.dataset.c ?? "").toLowerCase() === curHex.toLowerCase();
-      sw.style.outline = on ? `2px solid ${theme.textColor}` : "none";
-      sw.style.outlineOffset = "2px";
-      sw.style.zIndex = on ? "1" : "";
-      sw.style.position = on ? "relative" : "";
-    }
-  };
-  const recentRow = document.createElement("div");
-  recentRow.style.cssText = "display:flex;align-items:center;gap:5px;flex-wrap:wrap;border-top:1px solid var(--vela-border);padding-top:9px;";
-  const renderRecents = () => {
-    recentRow.replaceChildren();
-    for (const c of recents) {
-      const sw = document.createElement("button");
-      sw.type = "button";
-      sw.style.cssText = `width:17px;height:17px;border-radius:var(--vela-radius-sm);border:1px solid var(--vela-border);cursor:pointer;background:${c};padding:0;`;
-      sw.addEventListener("click", (e) => {
-        e.stopPropagation();
-        pickHex(c);
-      });
-      recentRow.appendChild(sw);
-    }
-    const add = document.createElement("label");
-    add.style.cssText = `width:17px;height:17px;border-radius:var(--vela-radius-sm);border:1px dashed var(--vela-border-strong);cursor:pointer;display:flex;align-items:center;justify-content:center;color:${theme.textColor};font:14px ${theme.fontFamily};position:relative;`;
-    add.textContent = "+";
-    const input = document.createElement("input");
-    input.type = "color";
-    input.value = curHex;
-    input.style.cssText = "position:absolute;inset:0;opacity:0;cursor:pointer;";
-    input.addEventListener("input", () => pickHex(input.value, true));
-    add.appendChild(input);
-    recentRow.appendChild(add);
-  };
-  const opLabel = document.createElement("div");
-  opLabel.textContent = "Opacity";
-  opLabel.style.cssText = `font:11px ${theme.fontFamily};color:var(--vela-fg-muted);`;
-  const opRow = document.createElement("div");
-  opRow.style.cssText = "display:flex;align-items:center;gap:10px;";
-  const track = document.createElement("div");
-  track.style.cssText = "flex:1;position:relative;height:13px;border-radius:7px;cursor:pointer;";
-  const knob = document.createElement("div");
-  knob.style.cssText = "position:absolute;top:50%;width:15px;height:15px;border-radius:50%;background:var(--vela-selected-bg);box-shadow:0 1px 3px rgba(0,0,0,0.55);transform:translate(-50%,-50%);pointer-events:none;";
-  track.appendChild(knob);
-  const pctBox = document.createElement("div");
-  pctBox.style.cssText = `min-width:42px;text-align:center;font:var(--vela-font-size-md) ${theme.fontFamily};color:var(--vela-fg);border:1px solid var(--vela-border);border-radius:5px;padding:3px 4px;`;
-  opRow.append(track, pctBox);
-  const paintOpacity = () => {
-    track.style.background = `linear-gradient(to right, ${curHex}00, ${curHex}ff), ${CHECKER}`;
-    knob.style.left = `${curAlpha * 100}%`;
-    pctBox.textContent = `${Math.round(curAlpha * 100)}%`;
-  };
-  let dragging = false;
-  const onDrag = (clientX) => {
-    const r = track.getBoundingClientRect();
-    curAlpha = Math.max(0, Math.min(1, (clientX - r.left) / r.width));
-    paintOpacity();
-    emit();
-  };
-  track.addEventListener("pointerdown", (e) => {
-    e.stopPropagation();
-    dragging = true;
-    track.setPointerCapture(e.pointerId);
-    onDrag(e.clientX);
-  });
-  track.addEventListener("pointermove", (e) => {
-    if (dragging) onDrag(e.clientX);
-  });
-  track.addEventListener("pointerup", () => dragging = false);
-  function emit() {
-    onChange(combineColor(curHex, curAlpha));
-  }
-  function pickHex(hex, custom = false) {
-    curHex = splitColor(hex).hex6;
-    addRecent(curHex);
-    paintSelection();
-    paintOpacity();
-    if (custom) renderRecents();
-    emit();
-  }
-  renderRecents();
-  paintSelection();
-  paintOpacity();
-  root.append(grid, recentRow, opLabel, opRow);
-  return root;
-}
-// src/renderers/native/chrome/ColorField.ts
-var CHECKER2 = transparencyChecker(8);
-var STYLE_ID22 = "vela-color-field";
-function ensureStyles4() {
-  if (typeof document === "undefined" || document.getElementById(STYLE_ID22)) return;
-  const st = document.createElement("style");
-  st.id = STYLE_ID22;
-  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) {
-  ensureStyles4();
-  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_ID23 = "vela-width-field";
-function ensureStyles5() {
-  if (typeof document === "undefined" || document.getElementById(STYLE_ID23)) return;
-  const st = document.createElement("style");
-  st.id = STYLE_ID23;
-  st.textContent = `
+var STYLE_ID22 = "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) {
-  ensureStyles5();
+  injectStyles(STYLE_ID22, 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
@@ -23875,37 +25201,24 @@ function styleLabel(id) {
   return chartType(id)?.label ?? BUILTIN_STYLE_LABELS2[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);}
@@ -23964,13 +25277,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) {
@@ -24286,15 +25599,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]) {
@@ -24360,7 +25673,7 @@ var SettingsDialog = class {
     }
   }
   close() {
-    closeColorPopover();
+    closeOpenPopovers();
     closeWidthPopover();
     this.root?.remove();
     this.root = null;
@@ -24515,50 +25828,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
@@ -24839,28 +26143,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;
@@ -24868,28 +26171,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);
@@ -24897,52 +26188,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) {
@@ -25333,13 +26595,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;
@@ -25347,8 +26615,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.
@@ -26291,7 +27559,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;
@@ -26640,11 +27915,11 @@ function applyFree(anchor, pt, free) {
 // src/renderers/native/drawings/DrawingSettingsPopup.ts
 var BTN = 30;
 var ICON = 21;
-var STYLE_ID24 = "vela-drawing-popup-styles";
-function ensureStyles6() {
-  if (typeof document === "undefined" || document.getElementById(STYLE_ID24)) return;
+var STYLE_ID23 = "vela-drawing-popup-styles";
+function ensureStyles4() {
+  if (typeof document === "undefined" || document.getElementById(STYLE_ID23)) return;
   const s = document.createElement("style");
-  s.id = STYLE_ID24;
+  s.id = STYLE_ID23;
   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;}
@@ -26678,17 +27953,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();
@@ -26707,13 +27979,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();
-    ensureStyles6();
+    ensureStyles4();
     this.onClose = onClose ?? null;
     const t = this.theme;
     const schema = drawing.schema();
@@ -26724,8 +27996,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;";
@@ -27462,49 +28733,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,
@@ -27634,60 +28932,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.
@@ -27726,36 +29004,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");
@@ -28138,9 +29398,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;
@@ -28496,6 +29756,16 @@ var UserDrawingController = class {
     if (this.eraserMode) return "pointer";
     return this.interaction.cursorAt(x, y);
   }
+  /** Right-click while placing: cancel the in-progress drawing and revert to the
+   *  pointer — the gesture is an explicit escape, so it disarms even in
+   *  stay-in-drawing-mode (where Escape would leave the tool armed). Returns whether
+   *  the press was consumed; false lets the host's context menu open normally. */
+  cancelPlacement() {
+    if (!this.interaction.isPlacing()) return false;
+    this.interaction.cancel();
+    if (this.activeTool != null) this.emit({ kind: "arm", type: null });
+    return true;
+  }
   /** Double-click over a drawing → suppress the chart's view reset (single-click already
    *  opens settings). Returns true only when a drawing is under the cursor. */
   dblClick(x, y) {
@@ -28980,6 +30250,20 @@ var VolumeRenderer = class {
 };
 // src/renderers/native/layers.ts
+function foldBaseModulation(acc, next) {
+  if (next == null) return acc;
+  if (acc == null) return { ...next };
+  return {
+    candleBodyScale: minOpt(acc.candleBodyScale, next.candleBodyScale),
+    candleBodyAlpha: minOpt(acc.candleBodyAlpha, next.candleBodyAlpha),
+    gridAlpha: minOpt(acc.gridAlpha, next.gridAlpha)
+  };
+}
+function minOpt(a, b) {
+  if (a == null) return b;
+  if (b == null) return a;
+  return Math.min(a, b);
+}
 var registry4 = /* @__PURE__ */ new Map();
 function rendererLayers() {
   return [...registry4.values()];
@@ -29489,7 +30773,7 @@ var NativeRenderer = class {
     this.scrollTargetRO = null;
     // eased rightOffset target while gliding back to the latest bars
     // Distance (px) from the plot's bottom edge to the button — tracks the bottom-most EXPANDED
-    // pane like the watermark: when the lower sub-panes collapse it rides up into the open pane.
+    // pane: when the lower sub-panes collapse it rides up into the open pane.
     this.scrollBtnBottomPx = SCROLL_BTN_BOTTOM;
     // Distance (px) from the plot's right edge — clears the FULL scale gutter, which widens when a
     // pane carries merged (own-scale) columns; the constant only clears a single-column scale.
@@ -30456,6 +31740,7 @@ var NativeRenderer = class {
       drawingsClaim: (x, y) => this.userDrawings?.claim(x, y) ?? false,
       drawingsMeasureStart: (x, y) => this.userDrawings?.beginMeasureAt(x, y) ?? false,
       drawingsDeleteAt: (x, y) => this.userDrawings?.deleteAt(x, y) ?? false,
+      drawingsCancelPlacement: () => this.userDrawings?.cancelPlacement() ?? false,
       drawingsSnapMode: () => this.snapMode,
       drawingsPointerDown: (x, y, snap, shift) => this.userDrawings?.pointerDown(x, y, snap, shift),
       drawingsPointerMove: (x, y, snap, shift) => this.userDrawings?.pointerMove(x, y, snap, shift),
@@ -30707,6 +31992,8 @@ var NativeRenderer = class {
     this.attributionEl = null;
     this.mountContainer?.style.removeProperty("--vela-toolbar-gutter");
     this.mountContainer?.style.removeProperty("--vela-scale-gutter");
+    this.mountContainer?.style.removeProperty("--vela-price-pane-top");
+    this.mountContainer?.style.removeProperty("--vela-price-pane-bottom");
     this.mountContainer = null;
     this.wrapper?.remove();
   }
@@ -31796,19 +33083,18 @@ var NativeRenderer = class {
         theme: this.theme
       });
       const nowMs = typeof performance !== "undefined" ? performance.now() : Date.now();
+      let folded = null;
       for (const l of this.extLayers) {
         const args = this.extLayerArgs(l.def.id, pane.scale, pane.bounds, nowMs);
         l.instance.render(args);
-        if (l.def.id === this.scene.priceStyle && l.instance.modulateBase) {
-          const mod = l.instance.modulateBase(args);
-          if (mod) {
-            if (mod.candleBodyScale != null) this.backend.candleBodyScale = clamp012(mod.candleBodyScale) || 0.01;
-            if (mod.candleBodyAlpha != null) this.backend.candleBodyAlpha = clamp012(mod.candleBodyAlpha) * this.candleBodyAlpha;
-            if (mod.gridAlpha != null) this.backend.gridAlpha = clamp012(mod.gridAlpha);
-          }
-        }
+        folded = foldBaseModulation(folded, l.instance.modulateBase?.(args) ?? null);
         if (this.animZoom && l.instance.animating?.()) this.animator.start();
       }
+      if (folded) {
+        if (folded.candleBodyScale != null) this.backend.candleBodyScale = clamp012(folded.candleBodyScale) || 0.01;
+        if (folded.candleBodyAlpha != null) this.backend.candleBodyAlpha = clamp012(folded.candleBodyAlpha) * this.candleBodyAlpha;
+        if (folded.gridAlpha != null) this.backend.gridAlpha = clamp012(folded.gridAlpha);
+      }
     }
     const li = this.bars.length - 1;
     const liveActual = li >= 0 ? this.bars[li] : void 0;
@@ -31935,7 +33221,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;
@@ -31953,9 +33238,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);
@@ -32200,6 +33483,7 @@ var NativeRenderer = class {
       this.paneControls?.reposition();
       this.repositionScrollButton();
       this.positionAttribution();
+      this.publishPricePaneBounds();
       return;
     }
     const collapsed = panes.filter((p) => p.collapsed);
@@ -32217,9 +33501,10 @@ var NativeRenderer = class {
     this.paneControls?.reposition();
     this.repositionScrollButton();
     this.positionAttribution();
+    this.publishPricePaneBounds();
   }
-  /** Pin the scroll-to-realtime button above the bottom-most EXPANDED pane's data area (like the
-   *  watermark): with all lower sub-panes collapsed it settles into the lowest open pane. */
+  /** Pin the scroll-to-realtime button above the bottom-most EXPANDED pane's data area:
+   *  with all lower sub-panes collapsed it settles into the lowest open pane. */
   repositionScrollButton() {
     const dataHeight = this.coords.height;
     if (dataHeight <= 0) return;
@@ -32263,6 +33548,21 @@ var NativeRenderer = class {
     this.mountContainer?.style.setProperty("--vela-toolbar-gutter", `${this.toolbarGutter}px`);
     this.mountContainer?.style.setProperty("--vela-scale-gutter", `${this.rightAxisW}px`);
   }
+  /** Publish the price pane's vertical insets as `--vela-price-pane-top` /
+   *  `--vela-price-pane-bottom` on the mount container, so the symbol watermark
+   *  (and any other host overlay) can clip to the price pane instead of spanning
+   *  study panes and the time axis. A maximized study pane collapses the box to
+   *  zero height — the mark does not appear on a study. */
+  publishPricePaneBounds() {
+    if (!this.mountContainer) return;
+    const plotH = this.coords.height + TIME_AXIS_H;
+    const price = this.scene.panes.get(PRICE_PANE_ID2);
+    const top = price ? price.bounds.top : 0;
+    const height = price ? price.bounds.height : this.coords.height;
+    const bottom = Math.max(0, plotH - (top + height));
+    this.mountContainer.style.setProperty("--vela-price-pane-top", `${top}px`);
+    this.mountContainer.style.setProperty("--vela-price-pane-bottom", `${bottom}px`);
+  }
   /** The built-in mark, or the host's own when one is set. */
   buildAttributionEl() {
     return this.attributionHtml !== null ? createCustomMark(document, this.attributionHtml, this.theme.background) : createAttributionMark(document, this.theme.background);
@@ -32946,16 +34246,16 @@ 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)}%)`;
 }
 // src/widget/statusline.ts
-var STYLE_ID25 = "vela-widget-statusline";
+var STYLE_ID24 = "vela-widget-statusline";
 var CSS21 = `
 .vela-statusline {
     position: absolute;
@@ -33147,7 +34447,7 @@ var Statusline = class {
     this.fitMode = false;
     this.fitRO = null;
     const doc = host.ownerDocument;
-    injectStyles(STYLE_ID25, CSS21, doc);
+    injectStyles(STYLE_ID24, CSS21, doc);
     host.classList.add("vela-has-statusline");
     this.el = doc.createElement("div");
     this.el.className = "vela-statusline";
@@ -33322,21 +34622,21 @@ var Statusline = class {
 var MAX_FONT_PX = 36;
 var MIN_FONT_PX = 12;
 var FILL = 0.9;
-var STYLE_ID26 = "vela-widget-watermark";
+var STYLE_ID25 = "vela-widget-watermark";
 var CSS22 = `
 .vela-watermark {
     position: absolute;
-    /* Insets follow the renderer-published gutters (mount container), so the mark
-     * centers and fits within the PLOT \u2014 never bleeding into the drawings toolbar
-     * on the left or the price scale on the right (visible in small multi-chart
-     * cells, where the scale is a large share of the width). */
-    top: 0;
-    bottom: 0;
+    /* Insets follow the renderer-published gutters AND the price-pane vertical
+     * bounds (mount container), so the mark centers on the PRICE PANE \u2014 never
+     * the study panes below, the drawings toolbar, or the price scale. */
+    top: var(--vela-price-pane-top, 0px);
+    bottom: var(--vela-price-pane-bottom, 0px);
     left: var(--vela-toolbar-gutter, 0px);
     right: var(--vela-scale-gutter, 0px);
     display: flex;
     align-items: center;
     justify-content: center;
+    overflow: hidden;
     pointer-events: none;
     z-index: 1;
     color: var(--vela-fg);
@@ -33361,7 +34661,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_ID26, CSS22, host.ownerDocument);
+    injectStyles(STYLE_ID25, CSS22, host.ownerDocument);
     this.el = host.ownerDocument.createElement("div");
     this.el.className = "vela-watermark";
     this.el.dataset.velaScreenshot = "under";
@@ -33391,7 +34691,7 @@ var Watermark = class {
     this.text.textContent = symbol ? `${parseSymbol(symbol).ticker} \xB7 ${timeframeLabel(timeframe)}` : "";
     this.fit();
   }
-  /** Measure the text at the cap and shrink it to the chart's own width. */
+  /** Measure the text at the cap and shrink it to the price pane's width. */
   fit() {
     if (this.el.clientWidth <= 0 || !this.text.textContent) return;
     this.el.style.fontSize = `${MAX_FONT_PX}px`;
@@ -34164,7 +35464,7 @@ function buildContext(host) {
     setTimeframe: (tf) => host.active()?.setTimeframe(tf),
     setPriceStyle: (style) => host.active()?.setPriceStyle(style),
     openSymbolSearch: (query) => host.openSymbolSearch(query),
-    togglePanel: (id, open) => host.togglePanel(id, open),
+    togglePanel: (id, open2) => host.togglePanel(id, open2),
     host: host.root,
     toast: (message, kind) => host.toast(message, kind),
     cells: host.cells().map((c) => ({ id: c.id, chart: c.chart, symbol: c.symbol, timeframe: c.timeframe })),
@@ -34424,7 +35724,7 @@ var GAP_PX = 2;
 var POOL_CAP = 16;
 var TIME_AXIS_H3 = 22;
 var ALERT_CAP = 50;
-var STYLE_ID27 = "vela-workspace";
+var STYLE_ID26 = "vela-workspace";
 var CSS23 = `
 .vela-workspace { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; background: var(--vela-bg); }
 .vela-ws-main { position: relative; display: flex; flex-direction: row; flex: 1 1 auto; min-height: 0; }
@@ -34495,6 +35795,8 @@ var VelaWorkspace = class {
     this.historyUnsub = null;
     /** Favorite drawing tools — a WORKSPACE preference (one star set, every cell). */
     this.favs = [];
+    /** Favorite timeframes — the shared topbar's quick-switch chips, one set for the grid. */
+    this.tfFavs = [];
     /** Live sync configuration (mutable copy of the option). */
     this.syncOpts = {};
     this.stateTimer = null;
@@ -34558,6 +35860,7 @@ var VelaWorkspace = class {
     }
     this.timezone = boot?.timezone ?? opts.timezone ?? "Etc/UTC";
     if (boot?.favorites) this.favs = [...boot.favorites];
+    if (boot?.timeframeFavorites) this.tfFavs = [...boot.timeframeFavorites];
     const sync = boot?.sync ?? opts.sync;
     for (const kind of ["viewport", "symbol", "timeframe", "crosshair", "drawings"]) {
       this.applySyncSetting(kind, sync?.[kind]);
@@ -34568,7 +35871,7 @@ var VelaWorkspace = class {
     this.order = boot?.charts ? boot.charts.map((c) => c.id) : declaredOrder(opts.cells);
     const bootActive = boot?.activeCellId ?? null;
     const doc = hostEl.ownerDocument;
-    injectStyles(STYLE_ID27, CSS23, doc);
+    injectStyles(STYLE_ID26, CSS23, doc);
     this.root = doc.createElement("div");
     this.root.className = "vela-workspace";
     ensureUIHost(this.root, resolveTheme(opts.theme));
@@ -34579,9 +35882,9 @@ var VelaWorkspace = class {
     this.symbolPicker = new SymbolPicker({
       host: this.root,
       onSelect: (ticker) => this.active.setSymbol(ticker),
-      onOpenChange: (open) => {
-        if (open) for (const cell of this.cells()) cell.chart.renderer.closeDialogs();
-        this.trackDialog(open);
+      onOpenChange: (open2) => {
+        if (open2) for (const cell of this.cells()) cell.chart.renderer.closeDialogs();
+        this.trackDialog(open2);
       }
     });
     this.symbolPicker.setSource(() => this.feed.symbols());
@@ -34591,16 +35894,16 @@ var VelaWorkspace = class {
       onChart: () => this.active.onChartRows(),
       onAdd: (i) => this.active.addFromLibrary(i),
       onRemove: (i) => this.active.removeFromChart(i),
-      onOpenChange: (open) => {
-        if (open) for (const cell of this.cells()) cell.chart.renderer.closeDialogs();
-        this.trackDialog(open);
+      onOpenChange: (open2) => {
+        if (open2) for (const cell of this.cells()) cell.chart.renderer.closeDialogs();
+        this.trackDialog(open2);
       }
     }) : null;
     const picker = this.indicatorPicker;
     this.tfQuick = new TimeframeQuick({
       host: this.root,
       onApply: (tf) => this.setActiveTimeframe(tf),
-      onOpenChange: (open) => this.trackDialog(open)
+      onOpenChange: (open2) => this.trackDialog(open2)
     });
     this.topbar = new Topbar(this.root, {
       symbol: "",
@@ -34612,8 +35915,10 @@ var VelaWorkspace = class {
       onAlertsClick: (anchor) => this.openAlertsMenu(anchor),
       timeframe: "60",
       timeframes: opts.timeframes ?? DEFAULT_TIMEFRAMES,
+      timeframeFavorites: this.tfFavs,
       priceStyle: "candles",
       onTimeframe: (tf) => this.setActiveTimeframe(tf),
+      onTimeframeFavorite: (tf, on) => this.setTimeframeFavorite(tf, on),
       onPriceStyle: (style) => this.active.setPriceStyle(style),
       layout: {
         current: this.def.id,
@@ -34827,7 +36132,7 @@ var VelaWorkspace = class {
       cells: () => this.cells(),
       setActiveCell: (id) => this.setActiveCell(id),
       openSymbolSearch: (query) => this.symbolPicker.open(query ?? ""),
-      togglePanel: (id, open) => this.dock.toggle(id, open),
+      togglePanel: (id, open2) => this.dock.toggle(id, open2),
       root: this.root,
       toast: (message, kind) => this.toast.show(message, kind)
     });
@@ -34864,6 +36169,7 @@ var VelaWorkspace = class {
     const state = { version: 1, layout: this.def.id, timezone: this.timezone, sync: { ...this.syncOpts }, charts };
     if (this.activeId) state.activeCellId = this.activeId;
     if (this.favs.length > 0) state.favorites = [...this.favs];
+    if (this.tfFavs.length > 0) state.timeframeFavorites = [...this.tfFavs];
     if (this.trackSizes.size > 0) state.trackSizes = Object.fromEntries([...this.trackSizes].map(([k, v]) => [k, { ...v }]));
     const panels2 = this.dock.getState();
     if (panels2) state.panels = panels2;
@@ -34884,6 +36190,10 @@ var VelaWorkspace = class {
       this.bottombar?.setTimezone(st.timezone);
     }
     if (st.favorites) this.favs = [...st.favorites];
+    if (st.timeframeFavorites) {
+      this.tfFavs = [...st.timeframeFavorites];
+      this.topbar.setTimeframeFavorites(this.tfFavs);
+    }
     this.dock.applyState(st.panels);
     for (const kind of ["viewport", "symbol", "timeframe", "crosshair", "drawings"]) this.applySyncSetting(kind, st.sync?.[kind]);
     this.trackSizes.clear();
@@ -35459,6 +36769,14 @@ var VelaWorkspace = class {
     this.bottombar?.setActiveRange(null);
     this.active.setTimeframe(tf);
   }
+  /** Star/unstar a timeframe — a WORKSPACE preference (one chip row, whatever the
+   *  active cell); the topbar follows and the set persists with the document. */
+  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();
+  }
   /** The mode flipped (container resized across the breakpoint, or a coarse-pointer
    *  change). Close the open surfaces — a desktop card must not linger over the
    *  mobile chrome (and vice versa) — and re-present every cell's own chrome. */
@@ -35503,7 +36821,7 @@ var VelaWorkspace = class {
         this.active.applyRange(preset);
         this.bottombar?.setActiveRange(preset.id);
       },
-      onOpenChange: (open) => this.trackDialog(open)
+      onOpenChange: (open2) => this.trackDialog(open2)
     }));
     this.tfDrawer.open();
   }
@@ -35516,7 +36834,7 @@ var VelaWorkspace = class {
       isFavorite: (type) => this.active.chart.drawings.isFavorite(type),
       onFavorite: (type, on) => this.active.chart.drawings.setFavorite(type, on),
       onSelect: (type) => this.active.chart.drawings.setTool(type),
-      onOpenChange: (open) => this.trackDialog(open)
+      onOpenChange: (open2) => this.trackDialog(open2)
     }));
     this.drawingsDrawer.open();
   }
@@ -35555,7 +36873,7 @@ var VelaWorkspace = class {
           this.sync.set(kind, this.syncOpts[kind] ? false : true);
         }
       },
-      onOpenChange: (open) => this.trackDialog(open)
+      onOpenChange: (open2) => this.trackDialog(open2)
     }));
     this.moreDrawer.open();
   }
@@ -35564,7 +36882,7 @@ var VelaWorkspace = 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();
   }
@@ -35574,7 +36892,7 @@ var VelaWorkspace = class {
       host: this.root,
       chart: () => this.activeId ? this.cellsById.get(this.activeId)?.chart ?? null : null,
       pressY: () => this.priceScalePressY,
-      onOpenChange: (open) => this.trackDialog(open)
+      onOpenChange: (open2) => this.trackDialog(open2)
     }));
     this.priceScaleDrawer.open();
   }
@@ -35658,7 +36976,7 @@ var VelaWorkspace = 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();
       }
     });
@@ -35677,9 +36995,9 @@ var VelaWorkspace = 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");
   }
   /** Pool a dehydrated slot state (bounded — oldest entries drop past the cap). */