@luxalgo/vela 0.5.2 → 0.5.4

package/dist/{chunk-LJLZR44Y.js → chunk-EMS6PO2T.js}

@@ -80,6 +80,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(
@@ -223,12 +227,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;
@@ -256,4 +254,4 @@ function iconEl(id, doc = document) {
   return span;
 }
 
-export { ACCENT, ACCENT_BRIGHT, BEARISH, BULLISH, CATEGORICAL, CROSSHAIR, HIGHLIGHT, INFO, INVALID, MARKER, NEUTRAL, SERIES_LINE, SESSION_OFF, SESSION_POST, SESSION_PRE, SLATE, SLATE_DEEP, TRADE_EXIT, TRADE_LONG, TRADE_SHORT, VALID, WARNING, categoricalColor, icon, iconAt, iconEl, iconMarkup, injectStyles, isDarkColor, mix, registerIcon, svg16, svg24, svg24Solid, toHex6, withAlpha };
+export { ACCENT, ACCENT_BRIGHT, BEARISH, BULLISH, CATEGORICAL, CROSSHAIR, HIGHLIGHT, INFO, INVALID, MARKER, NEUTRAL, SERIES_LINE, SESSION_OFF, SESSION_POST, SESSION_PRE, SLATE, SLATE_DEEP, TRADE_EXIT, TRADE_LONG, TRADE_SHORT, VALID, WARNING, categoricalColor, icon, iconAt, iconEl, iconMarkup, injectStyles, isDarkColor, mix, registerIcon, svg16, svg24, svg24Solid, withAlpha };

package/dist/{chunk-Y7TK4ZWK.js → chunk-JBQUY2RI.js}

@@ -1,7 +1,7 @@
-import { parseSymbol, priceStyleIds, BUILTIN_PRICE_STYLES, tzButtonLabel, TIMEZONES, normalizeTimezone, tzMenuLabel } from './chunk-RRFGWZNJ.js';
-import { chartType, widgetActions, SidePanel, sidePanels, DEFAULT_PANEL_ORDER, getDrawingType } from './chunk-B5TIKQJ5.js';
-import { Tooltip, Menu, Dialog, Drawer } from './chunk-P556H6EA.js';
-import { iconMarkup, registerIcon, injectStyles, iconEl, SESSION_PRE, SESSION_POST, SESSION_OFF, icon, categoricalColor } from './chunk-LJLZR44Y.js';
+import { parseSymbol, priceStyleIds, BUILTIN_PRICE_STYLES, tzButtonLabel, TIMEZONES, normalizeTimezone, tzMenuLabel } from './chunk-D6WM5IUE.js';
+import { chartType, widgetActions, SidePanel, sidePanels, DEFAULT_PANEL_ORDER, getDrawingType } from './chunk-ZNL2X6U2.js';
+import { Tooltip, Menu, Dialog, Drawer } from './chunk-QWIEKZRE.js';
+import { iconMarkup, registerIcon, injectStyles, iconEl, SESSION_PRE, SESSION_POST, SESSION_OFF, icon, categoricalColor } from './chunk-EMS6PO2T.js';
 
 // src/widget/timeframe.ts
 var UNIT_MS = {
@@ -74,6 +74,24 @@ function timeframeMs(value) {
   if (!Number.isFinite(count) || count < 1) return NaN;
   return count * UNIT_MS[key];
 }
+function favoriteTimeframeChips(favorites) {
+  const seen = /* @__PURE__ */ new Set();
+  const out = [];
+  for (const tf of favorites) {
+    if (seen.has(tf)) continue;
+    seen.add(tf);
+    out.push(tf);
+  }
+  return out.sort((a, b) => {
+    const ma = timeframeMs(a);
+    const mb = timeframeMs(b);
+    const aOk = Number.isFinite(ma);
+    const bOk = Number.isFinite(mb);
+    if (aOk && bOk && ma !== mb) return ma - mb;
+    if (aOk !== bOk) return aOk ? -1 : 1;
+    return 0;
+  });
+}
 function timeframeLabel(value) {
   const parsed = parseTimeframe(value);
   if (!parsed.valid) return value;
@@ -454,6 +472,36 @@ var CSS2 = `
     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
@@ -558,9 +606,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);
@@ -600,19 +655,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 }));
@@ -629,11 +685,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"
@@ -651,8 +708,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;
@@ -770,7 +867,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) => ({
@@ -1216,17 +1319,17 @@ var STYLE_ID4 = "vela-widget-watermark";
 var CSS4 = `
 .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);
@@ -1281,7 +1384,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`;
@@ -4140,6 +4243,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);