npm - @luxalgo/vela - Versions diffs - 0.5.3 → 0.6.0 - Mend

@luxalgo/vela 0.5.3 → 0.6.0

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-gnzv-dgc.d.cts → DataProvider-Ce6PuCzQ.d.cts} +10 -1
package/dist/{DataProvider-DTOEXKTI.d.ts → DataProvider-DNx9ntBD.d.ts} +10 -1
package/dist/{chunk-EY63XBFZ.js → chunk-7ROONW6H.js} +132 -23
package/dist/{chunk-L5NTMWPP.js → chunk-CA3N3PYT.js} +785 -857
package/dist/{chunk-LJLZR44Y.js → chunk-EMS6PO2T.js} +5 -7
package/dist/chunk-OGRQW3M6.js +1328 -0
package/dist/{chunk-P556H6EA.js → chunk-QWIEKZRE.js} +59 -34
package/dist/{chunk-WJKLBYRM.js → chunk-ZNL2X6U2.js} +1 -1
package/dist/{contributions-Ci_i3IN2.d.cts → contributions-DToMhiw3.d.ts} +9 -2
package/dist/{contributions-b6AVrqqG.d.ts → contributions-Dlc7ZWZz.d.cts} +9 -2
package/dist/{history-Ci3M0xLV.d.ts → history-BZADxpKx.d.cts} +5 -3
package/dist/{history-Cf1lVsap.d.cts → history-BuHXJZJ2.d.ts} +5 -3
package/dist/index.cjs +2761 -1597
package/dist/index.d.cts +14 -6
package/dist/index.d.ts +14 -6
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-DlidwMj6.d.cts → plugin-BNPLOQO1.d.cts} +3 -3
package/dist/{plugin-DP6A4t4o.d.ts → plugin-BqjEa5r3.d.ts} +3 -3
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 +3729 -2565
package/dist/vela.global.min.js +315 -66
package/dist/widget.cjs +2359 -1054
package/dist/widget.d.cts +30 -16
package/dist/widget.d.ts +30 -16
package/dist/widget.js +37 -14
package/dist/workspace.cjs +2259 -944
package/dist/workspace.d.cts +10 -5
package/dist/workspace.d.ts +10 -5
package/dist/workspace.js +29 -8
package/package.json +1 -1
package/dist/chunk-ATPU5CI6.js +0 -81

package/dist/ui.cjs CHANGED Viewed

@@ -86,7 +86,11 @@ function injectStyles(id, css, root = document) {
 // src/core/palette.ts
 var ACCENT = "#2962ff";
 var ACCENT_BRIGHT = "#38c0fd";
+var BULLISH = "#089981";
+var BEARISH = "#f23645";
+var NEUTRAL = "#787b86";
 var HIGHLIGHT = "#e0b400";
+var WARNING = "#ff9800";
 // src/core/tokens.ts
 var STATIC_TOKENS = {
@@ -100,6 +104,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",
@@ -238,6 +245,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(
@@ -592,7 +603,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)
     },
@@ -674,6 +688,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. */
@@ -692,9 +722,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");
@@ -702,16 +736,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);
@@ -791,6 +834,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" : "");
@@ -806,6 +868,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 ?? []);
@@ -829,7 +892,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);
   }
@@ -1332,6 +1396,1222 @@ 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, icon, label) => {
+      const b = doc.createElement("button");
+      b.type = "button";
+      b.tabIndex = -1;
+      b.setAttribute("aria-label", label);
+      b.appendChild(iconEl(icon, 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`;
+}
+function colorPickerController(opts = {}) {
+  const parsed = splitColor(opts.color ?? ACCENT_BRIGHT);
+  let hex6 = parsed.hex6;
+  let alpha = parsed.alpha;
+  return {
+    get hex6() {
+      return hex6;
+    },
+    get alpha() {
+      return alpha;
+    },
+    combined() {
+      return combineColor(hex6, alpha);
+    },
+    setHex(hex) {
+      hex6 = splitColor(hex).hex6;
+    },
+    setAlpha(a) {
+      alpha = Math.max(0, Math.min(1, a));
+    }
+  };
+}
+// 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();
+  }
+};
+function closeColorPopover() {
+  closeOpenPopovers();
+}
 Object.defineProperty(exports, "normalizeProps", {
   enumerable: true,
   get: function () { return vanilla.normalizeProps; }
@@ -1340,24 +2620,58 @@ Object.defineProperty(exports, "spreadProps", {
   enumerable: true,
   get: function () { return vanilla.spreadProps; }
 });
+exports.ColorField = ColorField;
 exports.Dialog = Dialog;
 exports.Drawer = Drawer;
 exports.KeymapManager = KeymapManager;
 exports.Menu = Menu;
+exports.NumberInput = NumberInput;
+exports.Popover = Popover;
+exports.Select = Select;
+exports.Switch = Switch;
+exports.TextField = TextField;
 exports.Tooltip = Tooltip;
 exports.applyPlotOverlayTokens = applyPlotOverlayTokens;
 exports.applyThemeTokens = applyThemeTokens;
+exports.blendOver = blendOver;
+exports.buildColorPicker = buildColorPicker;
+exports.buildPalette = buildPalette;
+exports.clampNumber = clampNumber;
+exports.closeColorPopover = closeColorPopover;
+exports.closeOpenPopovers = closeOpenPopovers;
+exports.colorField = colorField;
+exports.colorPickerController = colorPickerController;
+exports.combineColor = combineColor;
+exports.decorateSelectScroll = decorateSelectScroll;
 exports.dialogController = dialogController;
 exports.drawerController = drawerController;
 exports.ensureUIHost = ensureUIHost;
+exports.fillSelectList = fillSelectList;
+exports.hslHex = hslHex;
 exports.iconEl = iconEl;
 exports.iconMarkup = iconMarkup;
 exports.injectStyles = injectStyles;
+exports.insetRect = insetRect;
+exports.intersectRects = intersectRects;
+exports.isPopoverOpen = isPopoverOpen;
 exports.menuController = menuController;
 exports.nextUid = nextUid;
+exports.numberInputController = numberInputController;
+exports.openPopoverTrigger = openPopoverTrigger;
+exports.openSelectList = openSelectList;
+exports.placePopover = placePopover;
+exports.popoverController = popoverController;
 exports.registerIcon = registerIcon;
 exports.runMachine = runMachine;
+exports.selectController = selectController;
+exports.snapToStep = snapToStep;
+exports.splitColor = splitColor;
 exports.svg16 = svg16;
 exports.svg24 = svg24;
+exports.switchController = switchController;
+exports.textFieldController = textFieldController;
+exports.toggleSelectList = toggleSelectList;
 exports.tooltipController = tooltipController;
+exports.transparencyChecker = transparencyChecker;
+exports.viewportRect = viewportRect;
 exports.withAlpha = withAlpha;