@luxalgo/vela 0.5.3 → 0.6.0

package/README.md

@@ -7,8 +7,9 @@ renderer layers.
 - **`vela`** — the headless chart: data model, engines, drawings, providers, native renderer.
 - **`vela/widget`** — the full chart app: topbar (symbol / timeframe / style / indicators),
   status line, watermark, bottom bar (ranges, clock, timezone), object tree, keyboard-first UX.
-- **`vela/ui`** — the component kit the widget is built on (design tokens + headless
-  [Zag.js](https://zagjs.com) machines + vanilla views) and the `KeymapManager`.
+- **`vela/ui`** — the component kit the widget is built on: design tokens, overlay chrome
+  ([Zag.js](https://zagjs.com) menu/dialog/drawer/tooltip), form primitives (switch, select,
+  number, text, color, popover), and the `KeymapManager`.
 - **`vela/plugin`** — the extension SDK: chart types, renderer layers, native indicators.
 - **`vela/workspace`** — the multi-chart shell: a grid of full charts under one shared
   topbar, with named cells, sync groups and one persisted state document.

package/dist/{DataProvider-gnzv-dgc.d.cts → DataProvider-Ce6PuCzQ.d.cts}

@@ -1,4 +1,4 @@
-import { M as MarketConfig, O as OHLCV, U as Unsubscribe } from './options-XTBpbx0s.cjs';
+import { M as MarketConfig, O as OHLCV, U as Unsubscribe } from './options-BlQ00Fju.cjs';
 
 /**
  * Symbol metadata an engine may need (e.g. Pine `syminfo.*`). Free-form beyond
@@ -64,6 +64,15 @@ interface SymbolDescriptor {
     description?: string;
     /** Instrument class, free-form (e.g. `crypto`, `futures`, `stock`). */
     type?: string;
+    /**
+     * The instrument's LISTING-venue prefix (`NASDAQ`, `NYSE`, `AMEX`) — a property of the
+     * SYMBOL, not of the provider: AAPL is Nasdaq-listed and IBM NYSE-listed even when one
+     * provider supplies both tapes. When declared, it is what pickers/legends display, what
+     * `PREFIX:TICKER` strings resolve against (TradingView parity: `NYSE:AAPL` is NOT
+     * found), and what the canonical committed/persisted form carries. Absent on venues
+     * where the provider IS the identity (crypto, fx) — the provider name prefixes those.
+     */
+    prefix?: string;
     /** Owning provider name — annotated by the registry aggregation (badges in pickers). */
     provider?: string;
 }

package/dist/{DataProvider-DTOEXKTI.d.ts → DataProvider-DNx9ntBD.d.ts}

@@ -1,4 +1,4 @@
-import { M as MarketConfig, O as OHLCV, U as Unsubscribe } from './options-XTBpbx0s.js';
+import { M as MarketConfig, O as OHLCV, U as Unsubscribe } from './options-BlQ00Fju.js';
 
 /**
  * Symbol metadata an engine may need (e.g. Pine `syminfo.*`). Free-form beyond
@@ -64,6 +64,15 @@ interface SymbolDescriptor {
     description?: string;
     /** Instrument class, free-form (e.g. `crypto`, `futures`, `stock`). */
     type?: string;
+    /**
+     * The instrument's LISTING-venue prefix (`NASDAQ`, `NYSE`, `AMEX`) — a property of the
+     * SYMBOL, not of the provider: AAPL is Nasdaq-listed and IBM NYSE-listed even when one
+     * provider supplies both tapes. When declared, it is what pickers/legends display, what
+     * `PREFIX:TICKER` strings resolve against (TradingView parity: `NYSE:AAPL` is NOT
+     * found), and what the canonical committed/persisted form carries. Absent on venues
+     * where the provider IS the identity (crypto, fx) — the provider name prefixes those.
+     */
+    prefix?: string;
     /** Owning provider name — annotated by the registry aggregation (badges in pickers). */
     provider?: string;
 }

package/dist/{chunk-EY63XBFZ.js → chunk-7ROONW6H.js}

@@ -1,7 +1,7 @@
-import { parseSymbol, priceStyleIds, BUILTIN_PRICE_STYLES, tzButtonLabel, TIMEZONES, normalizeTimezone, tzMenuLabel } from './chunk-L5NTMWPP.js';
-import { chartType, widgetActions, SidePanel, sidePanels, DEFAULT_PANEL_ORDER, getDrawingType } from './chunk-WJKLBYRM.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-CA3N3PYT.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) => ({
@@ -1502,10 +1605,11 @@ function parseQuery(raw, venues) {
 function onlyOne(matches) {
   return matches.length === 1 ? matches[0] : null;
 }
+var venueOf = (s) => s.prefix ?? s.provider;
 function filterSymbols(list, query, limit = 100) {
-  const venues = [...new Set(list.map((s) => s.provider?.toLowerCase()).filter((p) => !!p))];
+  const venues = [...new Set(list.flatMap((s) => [venueOf(s)?.toLowerCase(), s.provider?.toLowerCase()]).filter((p) => !!p))];
   const { scope, term } = parseQuery(query, venues);
-  const pool = scope ? list.filter((s) => s.provider?.toLowerCase() === scope) : list;
+  const pool = scope ? list.filter((s) => venueOf(s)?.toLowerCase() === scope || s.provider?.toLowerCase() === scope) : list;
   const q = term.toUpperCase();
   if (!q) {
     if (scope) return [...pool].sort((a, b) => a.ticker.localeCompare(b.ticker)).slice(0, limit);
@@ -1524,7 +1628,7 @@ function filterSymbols(list, query, limit = 100) {
     if (t.startsWith(q)) prefix.push(s);
     else if (t.includes(q)) substr.push(s);
     else if ((s.description ?? "").toUpperCase().includes(q)) desc.push(s);
-    else if (!scope && s.provider?.toLowerCase().includes(qLower)) venue.push(s);
+    else if (!scope && (venueOf(s)?.toLowerCase().includes(qLower) || s.provider?.toLowerCase().includes(qLower))) venue.push(s);
     if (prefix.length >= limit) break;
   }
   return [...prefix, ...substr, ...desc, ...venue].slice(0, limit);
@@ -1676,14 +1780,14 @@ var SymbolPicker = class {
       else if (e.key === "ArrowUp") this.moveHighlight(-1);
       else if (e.key === "Enter") {
         const pick = this.rows[this.highlighted];
-        if (pick) this.select(pick.ticker, pick.provider, opts.onSelect);
+        if (pick) this.select(pick.ticker, pick.prefix ?? pick.provider, opts.onSelect);
         return;
       } else return;
       e.preventDefault();
     });
     this.list.addEventListener("click", (e) => {
       const row = e.target.closest(".vela-sp-row");
-      if (row?.dataset.ticker) this.select(row.dataset.ticker, row.dataset.provider, opts.onSelect);
+      if (row?.dataset.ticker) this.select(row.dataset.ticker, row.dataset.venue, opts.onSelect);
     });
   }
   /** Wire where symbols come from (re-called on every widget rebuild). */
@@ -1700,9 +1804,9 @@ var SymbolPicker = class {
   destroy() {
     this.dialog.destroy();
   }
-  select(ticker, provider, onSelect) {
+  select(ticker, venue, onSelect) {
     this.close();
-    onSelect(provider ? `${provider.toLowerCase()}:${ticker}` : ticker);
+    onSelect(venue ? `${venue}:${ticker}` : ticker);
   }
   moveHighlight(delta) {
     if (!this.rows.length) return;
@@ -1735,7 +1839,8 @@ var SymbolPicker = class {
       const row = doc.createElement("div");
       row.className = "vela-sp-row";
       row.dataset.ticker = s.ticker;
-      if (s.provider) row.dataset.provider = s.provider;
+      const venue = s.prefix ?? s.provider;
+      if (venue) row.dataset.venue = venue;
       const av = tickerIconEl(doc, baseOf(s), s.ticker, "vela-sp-avatar");
       const main = doc.createElement("span");
       main.className = "vela-sp-main";
@@ -1747,11 +1852,11 @@ var SymbolPicker = class {
       d.textContent = s.description ?? (s.type ?? "");
       main.append(t, d);
       row.append(av, main);
-      if (s.provider) {
+      if (venue) {
         const badge = doc.createElement("span");
         badge.className = "vela-sp-badge";
-        badge.dataset.p = s.provider;
-        badge.textContent = s.provider;
+        badge.dataset.p = s.provider ?? venue;
+        badge.textContent = venue;
         row.appendChild(badge);
       }
       this.list.appendChild(row);
@@ -4140,6 +4245,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);