@luxalgo/vela 0.5.0

package/dist/ui.cjs

@@ -0,0 +1,1030 @@
+'use strict';
+
+var vanilla = require('@zag-js/vanilla');
+var tooltip = require('@zag-js/tooltip');
+var menu = require('@zag-js/menu');
+var dialog = require('@zag-js/dialog');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var tooltip__namespace = /*#__PURE__*/_interopNamespace(tooltip);
+var menu__namespace = /*#__PURE__*/_interopNamespace(menu);
+var dialog__namespace = /*#__PURE__*/_interopNamespace(dialog);
+
+// src/core/color.ts
+function parseRgb(color) {
+  const s = color.trim();
+  let m = /^#([0-9a-f]{3})$/i.exec(s);
+  if (m) {
+    const h = m[1];
+    return {
+      r: parseInt(h[0] + h[0], 16),
+      g: parseInt(h[1] + h[1], 16),
+      b: parseInt(h[2] + h[2], 16)
+    };
+  }
+  m = /^#([0-9a-f]{6})[0-9a-f]{0,2}$/i.exec(s);
+  if (m) {
+    const h = m[1];
+    return {
+      r: parseInt(h.slice(0, 2), 16),
+      g: parseInt(h.slice(2, 4), 16),
+      b: parseInt(h.slice(4, 6), 16)
+    };
+  }
+  const rgb = /^rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)/i.exec(s);
+  if (rgb) {
+    return { r: parseFloat(rgb[1]), g: parseFloat(rgb[2]), b: parseFloat(rgb[3]) };
+  }
+  return null;
+}
+function withAlpha(color, alpha) {
+  const c = parseRgb(color);
+  if (!c) return color;
+  return `rgba(${c.r},${c.g},${c.b},${alpha})`;
+}
+function mix(base, top, alpha) {
+  const b = parseRgb(base);
+  const t = parseRgb(top);
+  if (!b || !t) return base;
+  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 isDarkColor(color) {
+  const c = parseRgb(color);
+  if (!c) return true;
+  return 0.2126 * c.r + 0.7152 * c.g + 0.0722 * c.b < 128;
+}
+
+// src/ui/styles.ts
+function injectStyles(id, css, root = document) {
+  if (typeof document === "undefined") return;
+  const host = root instanceof Document ? root.head : root;
+  if (root.getElementById?.(id) ?? host.querySelector(`#${CSS.escape(id)}`)) return;
+  const s = document.createElement("style");
+  s.id = id;
+  s.textContent = css;
+  host.appendChild(s);
+}
+
+// src/core/palette.ts
+var ACCENT = "#2962ff";
+var ACCENT_BRIGHT = "#38c0fd";
+var HIGHLIGHT = "#e0b400";
+
+// src/core/tokens.ts
+var STATIC_TOKENS = {
+  "--vela-space-1": "4px",
+  "--vela-space-2": "8px",
+  "--vela-space-3": "12px",
+  "--vela-space-4": "16px",
+  "--vela-radius-sm": "4px",
+  "--vela-radius-md": "6px",
+  "--vela-radius-lg": "10px",
+  "--vela-z-tooltip": "60",
+  "--vela-z-menu": "50",
+  "--vela-z-dialog": "40",
+  "--vela-ease": "cubic-bezier(0.22, 1, 0.36, 1)",
+  "--vela-dur-fast": "90ms",
+  "--vela-dur-med": "160ms",
+  "--vela-font-size-sm": "11px",
+  "--vela-font-size-md": "12px",
+  "--vela-font-size-lg": "14px"
+};
+function themeTokens(t) {
+  const dark = isDarkColor(t.background);
+  const wash = (a) => dark ? `rgba(255,255,255,${a})` : withAlpha(t.textColor, a + 0.02);
+  const elevated = mix(t.background, dark ? "#ffffff" : t.textColor, dark ? 0.03 : 0.05);
+  return {
+    "--vela-font": t.fontFamily,
+    "--vela-bg": t.background,
+    // Chrome text is slightly brighter than the chart's own axis text, which is
+    // deliberately recessive; the chart keeps using `t.textColor` directly.
+    "--vela-fg": dark ? "#d1d4dc" : t.textColor,
+    "--vela-fg-muted": dark ? "#868a96" : withAlpha(t.textColor, 0.62),
+    "--vela-fg-faint": withAlpha(t.textColor, 0.35),
+    "--vela-fg-bright": dark ? "#f0f3fa" : "#000000",
+    "--vela-surface": t.background,
+    // Panels and menus float ABOVE the chart, so their surface is the wash flattened onto
+    // the chart background — opaque, or candles read through the panel.
+    "--vela-surface-elev": elevated,
+    "--vela-surface-overlay": elevated,
+    // Recessed fields (inputs, selects) read as cut INTO their panel, so they fall back
+    // to the chart surface and are separated from the panel by their border alone.
+    "--vela-surface-sunken": t.background,
+    "--vela-border": t.borderColor,
+    "--vela-border-strong": dark ? "#34353b" : withAlpha(t.textColor, 0.28),
+    "--vela-border-soft": t.borderColor,
+    // Barely-there rules INSIDE a panel (row separators), where a full border would
+    // chop the list into boxes.
+    "--vela-border-faint": withAlpha(t.textColor, 0.08),
+    "--vela-hover": wash(0.06),
+    "--vela-active": wash(0.1),
+    // A deliberately stronger hover for rows inside an already-tinted surface (menu
+    // items in an active flyout), where the normal wash would not separate from it.
+    "--vela-hover-strong": wash(0.16),
+    "--vela-focus": withAlpha(t.textColor, 0.5),
+    "--vela-focus-soft": withAlpha(t.textColor, 0.12),
+    "--vela-scroll": withAlpha(t.textColor, 0.3),
+    "--vela-accent": ACCENT,
+    "--vela-accent-bright": ACCENT_BRIGHT,
+    "--vela-highlight": HIGHLIGHT,
+    // The inverse chip: a filled selected state (active tab, ticked checkbox). Its ink
+    // must contrast the fill, so the pair flips together with the theme.
+    "--vela-selected-bg": dark ? "#f0f3fa" : t.textColor,
+    "--vela-selected-fg": dark ? t.background : "#ffffff",
+    // Fixed ink for saturated fills (accent buttons, categorical avatars) — those fills
+    // are theme-independent, so their ink is too.
+    "--vela-fg-on-fill": "#ffffff",
+    "--vela-up": t.upColor,
+    "--vela-down": t.downColor,
+    "--vela-danger": t.downColor,
+    "--vela-shadow": "0 8px 30px rgba(0,0,0,0.5)",
+    "--vela-shadow-dialog": "0 20px 60px rgba(0,0,0,0.5)",
+    "--vela-backdrop": "rgba(0,0,0,0.45)"
+  };
+}
+
+// src/ui/tokens.ts
+var STATIC_ID = "vela-ui-tokens";
+var STATIC_DECLS = Object.entries(STATIC_TOKENS).map(([k, v]) => `    ${k}: ${v};`).join("\n");
+var STATIC_CSS = `
+.vela-ui, .vela-ui-layer {
+${STATIC_DECLS}
+    font-family: var(--vela-font, -apple-system, system-ui, sans-serif);
+    box-sizing: border-box;
+}
+.vela-ui *, .vela-ui-layer * { box-sizing: border-box; }
+.vela-icon { display: inline-flex; align-items: center; flex: none; }
+.vela-icon svg { display: block; }
+`;
+function applyThemeTokens(el, t) {
+  const tokens = themeTokens(t);
+  for (const key in tokens) el.style.setProperty(key, tokens[key]);
+}
+function applyPlotOverlayTokens(host, base, config) {
+  const layout = config?.layout;
+  const t = layout?.background && layout.textColor ? { ...base, background: layout.background, textColor: layout.textColor } : base;
+  applyThemeTokens(host, t);
+}
+function ensureUIHost(el, theme) {
+  injectStyles(STATIC_ID, STATIC_CSS, el.getRootNode());
+  el.classList.add("vela-ui");
+  if (theme) applyThemeTokens(el, theme);
+}
+
+// src/core/icons.ts
+var registry = /* @__PURE__ */ new Map();
+function registerIcon(id, svg) {
+  registry.set(id, svg);
+}
+function iconMarkup(id) {
+  return registry.get(id) ?? null;
+}
+function svg16(body, extra = "") {
+  return `<svg viewBox="0 0 16 16" width="1em" height="1em" ${extra ? extra + " " : ""}fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round">${body}</svg>`;
+}
+function svg24(body, extra = "") {
+  return `<svg viewBox="0 0 24 24" width="1em" height="1em" ${extra ? extra + " " : ""}fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">${body}</svg>`;
+}
+var S = svg16;
+registerIcon(
+  "style-candles",
+  S('<path d="M4.5 2v2M4.5 12v2M11.5 2v1.5M11.5 11v3"/><rect x="2.8" y="4" width="3.4" height="8" rx="0.6" fill="currentColor" fill-opacity="0.25"/><rect x="9.8" y="3.5" width="3.4" height="7.5" rx="0.6" fill="currentColor"/>')
+);
+registerIcon(
+  "style-bars",
+  S('<path d="M4.5 2.5v11M2.5 5h2M4.5 11h2"/><path d="M11.5 2.5v11M9.5 4.5h2M11.5 10.5h2"/>')
+);
+registerIcon("style-line", S('<path d="M1.5 11.5 5.5 7l3 2.5 5-6"/>'));
+registerIcon(
+  "style-area",
+  S('<path d="M1.5 11.5 5.5 7l3 2.5 5-6"/><path d="M1.5 11.5 5.5 7l3 2.5 5-6V13.5h-12z" fill="currentColor" fill-opacity="0.25" stroke="none"/>')
+);
+registerIcon(
+  "style-baseline",
+  S('<path d="M1.5 8h13" stroke-dasharray="2 2"/><path d="M2.5 8 5.25 4.5 8 8h-5.5z" fill="currentColor" fill-opacity="0.25" stroke="none"/><path d="M2.5 8 5.25 4.5 8 8"/><path d="M8 8l2.75 3.5L13.5 8h-5.5z" fill="currentColor" fill-opacity="0.25" stroke="none"/><path d="M8 8l2.75 3.5L13.5 8"/>')
+);
+registerIcon(
+  "style-heikinashi",
+  S('<path d="M4.5 12v2M11.5 2v2"/><rect x="2.8" y="5" width="3.4" height="7" rx="0.6" fill="currentColor" fill-opacity="0.25"/><rect x="9.8" y="4" width="3.4" height="7" rx="0.6" fill="currentColor"/>')
+);
+registerIcon("indicators", S('<path d="M1.5 12.5 5 7l2.5 3.5L11 4l3.5 5"/><circle cx="11" cy="4" r="1.4" fill="currentColor" stroke="none"/>'));
+registerIcon("undo", S('<path d="M6.2 9.5 2.7 6l3.5-3.5"/><path d="M2.7 6h6.8a3.65 3.65 0 0 1 0 7.3H7.5"/>'));
+registerIcon("redo", S('<path d="M9.8 9.5 13.3 6 9.8 2.5"/><path d="M13.3 6H6.5a3.65 3.65 0 0 0 0 7.3h2"/>'));
+registerIcon(
+  "objects",
+  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("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(
+  "gear",
+  S('<path d="M6.55 1.4h2.9l.32 1.72c.48.14.92.38 1.3.7l1.66-.55 1.45 2.5-1.35 1.1c.08.34.12.7.12 1.07s-.04.73-.12 1.07l1.35 1.1-1.45 2.5-1.66-.55a4.3 4.3 0 0 1-1.3.7L9.45 14.6h-2.9l-.32-1.72a4.3 4.3 0 0 1-1.3-.7l-1.66.55-1.45-2.5 1.35-1.1A4.4 4.4 0 0 1 3.05 7.94c0-.37.04-.73.12-1.07l-1.35-1.1 1.45-2.5 1.66.55c.38-.32.82-.56 1.3-.7L6.55 1.4z"/><circle cx="8" cy="8" r="2.2"/>')
+);
+registerIcon("search", S('<circle cx="7" cy="7" r="4.5"/><path d="m10.5 10.5 3.5 3.5"/>'));
+registerIcon("bell", S('<path d="M8 2a4 4 0 0 0-4 4v2.5L2.5 11v1h11v-1L12 8.5V6a4 4 0 0 0-4-4z"/><path d="M6.5 13.5a1.5 1.5 0 0 0 3 0"/>'));
+registerIcon(
+  "market-open",
+  svg24('<circle cx="12" cy="12" r="4"/><path d="M12 2v2"/><path d="M12 20v2"/><path d="m4.93 4.93 1.41 1.41"/><path d="m17.66 17.66 1.41 1.41"/><path d="M2 12h2"/><path d="M20 12h2"/><path d="m6.34 17.66-1.41 1.41"/><path d="m19.07 4.93-1.41 1.41"/>')
+);
+registerIcon(
+  "market-pre",
+  svg24('<path d="M12 2v8"/><path d="m4.93 10.93 1.41 1.41"/><path d="M2 18h2"/><path d="M20 18h2"/><path d="m19.07 10.93-1.41 1.41"/><path d="M22 22H2"/><path d="m16 6-4 4-4-4"/><path d="M16 18a4 4 0 0 0-8 0"/>')
+);
+registerIcon(
+  "market-post",
+  svg24('<path d="M12 10V2"/><path d="m4.93 10.93 1.41 1.41"/><path d="M2 18h2"/><path d="M20 18h2"/><path d="m19.07 10.93-1.41 1.41"/><path d="M22 22H2"/><path d="m16 18-4-4-4 4"/><path d="M16 6a4 4 0 0 0-8 0"/>')
+);
+registerIcon("market-closed", svg24('<path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/>'));
+registerIcon(
+  "market-holiday",
+  svg24('<path d="m10 20-1.25-2.5L6 16"/><path d="M10 4 8.75 6.5 6 8"/><path d="m14 20 1.25-2.5L18 16"/><path d="m14 4 1.25 2.5L18 8"/><path d="m17 10-5 5-5-5"/><path d="M4 12h16"/>')
+);
+registerIcon("chevron-right", S('<path d="m6 3.5 4.5 4.5L6 12.5"/>'));
+registerIcon("chevron-down", S('<path d="M3.5 6 8 10.5 12.5 6"/>'));
+registerIcon("chevron-up", S('<path d="M3.5 10 8 5.5 12.5 10"/>'));
+registerIcon("chevrons-right", S('<path d="m4 3.5 4.5 4.5L4 12.5"/><path d="m8.5 3.5 4.5 4.5-4.5 4.5"/>'));
+registerIcon("chevrons-left", S('<path d="M12 3.5 7.5 8l4.5 4.5"/><path d="M7.5 3.5 3 8l4.5 4.5"/>'));
+registerIcon("check", S('<path d="m2.8 8.4 3.4 3.4 7-7.6"/>'));
+registerIcon("close", S('<path d="m3.8 3.8 8.4 8.4M12.2 3.8l-8.4 8.4"/>'));
+registerIcon("eye", S('<path d="M1.5 8s2.5-4.2 6.5-4.2S14.5 8 14.5 8 12 12.2 8 12.2 1.5 8 1.5 8z"/><circle cx="8" cy="8" r="1.8"/>'));
+registerIcon("eye-off", S('<path d="M1.5 8s2.5-4.2 6.5-4.2S14.5 8 14.5 8 12 12.2 8 12.2 1.5 8 1.5 8z" opacity="0.45"/><path d="m3 13 10-10"/>'));
+registerIcon("lock", S('<rect x="3.2" y="7" width="9.6" height="6.6" rx="1.2"/><path d="M5.6 7V5.2a2.4 2.4 0 0 1 4.8 0V7"/>'));
+registerIcon("unlock", S('<rect x="3.2" y="7" width="9.6" height="6.6" rx="1.2"/><path d="M5.6 7V5.2a2.4 2.4 0 0 1 4.7-.7"/>'));
+registerIcon("trash", S('<path d="M2.5 4.3h11M6.2 4.3V3.1a1 1 0 0 1 1-1h1.6a1 1 0 0 1 1 1v1.2M4.2 4.3l.5 9.1a1.15 1.15 0 0 0 1.15 1.1h4.3a1.15 1.15 0 0 0 1.15-1.1l.5-9.1M6.5 7v4.5M9.5 7v4.5"/>'));
+registerIcon("group", S('<path d="M1.8 4.5V2.4a.6.6 0 0 1 .6-.6h2.1M11.5 1.8h2.1a.6.6 0 0 1 .6.6v2.1M14.2 11.5v2.1a.6.6 0 0 1-.6.6h-2.1M4.5 14.2H2.4a.6.6 0 0 1-.6-.6v-2.1"/><rect x="4" y="4" width="4.2" height="4.2" rx="0.7"/><rect x="7.8" y="7.8" width="4.2" height="4.2" rx="0.7"/>'));
+registerIcon("ungroup", S('<rect x="1.6" y="1.6" width="6.2" height="6.2" rx="0.9"/><rect x="8.2" y="8.2" width="6.2" height="6.2" rx="0.9" stroke-dasharray="2 1.5"/>'));
+registerIcon("clone", S('<rect x="5.5" y="5.5" width="9" height="9" rx="1.2"/><path d="M11 5.5v-3a1 1 0 0 0-1-1H2.5a1 1 0 0 0-1 1V10a1 1 0 0 0 1 1h3"/>'));
+registerIcon("arrow-up", S('<path d="M8 13.2V3M4.2 6.8 8 3l3.8 3.8"/>'));
+registerIcon("arrow-down", S('<path d="M8 2.8V13M4.2 9.2 8 13l3.8-3.8"/>'));
+registerIcon("move-vertical", S('<path d="M8 2.5v11M5 5.5 8 2.5l3 3M5 10.5l3 3 3-3"/>'));
+registerIcon("move", S('<path d="M8 1.8v12.4M1.8 8h12.4M5.6 4.2 8 1.8l2.4 2.4M5.6 11.8 8 14.2l2.4-2.4M4.2 5.6 1.8 8l2.4 2.4M11.8 5.6 14.2 8l-2.4 2.4"/>'));
+registerIcon("pen", S('<path d="m10.8 2.2 3 3-8 8-3.6.6.6-3.6z"/><path d="m9.2 3.8 3 3"/>'));
+registerIcon("wave", S('<path d="M1.5 10.4c1.6 0 1.9-4.8 3.4-4.8s1.8 4.8 3.4 4.8 1.8-4.8 3.4-4.8 1.6 4.8 2.8 4.8"/>'));
+registerIcon("folder-plus", S('<path d="M1.6 4.4a1 1 0 0 1 1-1h2.7l1.3 1.7h6.8a1 1 0 0 1 1 1v6.5a1 1 0 0 1-1 1h-10.8a1 1 0 0 1-1-1z"/><path d="M8 7.6v3.6M6.2 9.4h3.6"/>'));
+registerIcon("folder-minus", S('<path d="M1.6 4.4a1 1 0 0 1 1-1h2.7l1.3 1.7h6.8a1 1 0 0 1 1 1v6.5a1 1 0 0 1-1 1h-10.8a1 1 0 0 1-1-1z"/><path d="M6.2 9.4h3.6"/>'));
+registerIcon("collapse", S('<path d="M3 8h10"/>'));
+registerIcon("expand", S('<rect x="2.2" y="2.2" width="11.6" height="11.6" rx="1.4"/><path d="M8 5.4v5.2M5.4 8h5.2"/>'));
+registerIcon("maximize", S('<path d="M2.5 6V3a.5.5 0 0 1 .5-.5h3M10 2.5h3a.5.5 0 0 1 .5.5v3M13.5 10v3a.5.5 0 0 1-.5.5h-3M6 13.5H3a.5.5 0 0 1-.5-.5v-3"/>'));
+registerIcon("restore", S('<path d="M6.2 2.5v3.7H2.5M9.8 13.5V9.8h3.7M13.5 6.2H9.8V2.5M2.5 9.8h3.7v3.7"/>'));
+registerIcon("star", S('<path d="M8 2.2l1.75 3.55 3.9.55-2.8 2.75.65 3.9L8 11.1l-3.5 1.85.65-3.9-2.8-2.75 3.9-.55z"/>'));
+registerIcon("star-filled", S('<path d="M8 2.2l1.75 3.55 3.9.55-2.8 2.75.65 3.9L8 11.1l-3.5 1.85.65-3.9-2.8-2.75 3.9-.55z"/>', 'fill="currentColor"'));
+registerIcon("grip", S('<circle cx="6" cy="3.5" r="1"/><circle cx="10" cy="3.5" r="1"/><circle cx="6" cy="8" r="1"/><circle cx="10" cy="8" r="1"/><circle cx="6" cy="12.5" r="1"/><circle cx="10" cy="12.5" r="1"/>', 'fill="currentColor" stroke="none"'));
+registerIcon("kebab", S('<circle cx="8" cy="3.2" r="1.2"/><circle cx="8" cy="8" r="1.2"/><circle cx="8" cy="12.8" r="1.2"/>', 'fill="currentColor" stroke="none"'));
+registerIcon("reset", S('<rect x="6" y="6" width="4" height="4" rx="0.8"/><path d="M2.2 8a5.8 5.8 0 1 0 1.9-4.3L2.2 5.3"/><path d="M2.2 2.2v3.1h3.1"/>'));
+registerIcon("pane-collapse", S('<path d="M2.6 9.4h4v4M13.4 6.6h-4v-4"/><path d="m9.4 6.6 4.2-4.2M2.4 13.6l4.2-4.2"/>'));
+registerIcon("pane-expand", S('<path d="M9.8 2.4h3.8v3.8M6.2 13.6H2.4V9.8"/><path d="m13.6 2.4-4.4 4.4M2.4 13.6l4.4-4.4"/>'));
+registerIcon("cursor", svg24('<path d="M5 3l6 16 2-6 6-2z"/>', 'fill="currentColor" stroke="none"'));
+registerIcon(
+  "ruler",
+  svg24('<path d="M21.3 15.3 8.7 2.7a1 1 0 0 0-1.4 0L2.7 7.3a1 1 0 0 0 0 1.4l12.6 12.6a1 1 0 0 0 1.4 0l4.6-4.6a1 1 0 0 0 0-1.4Z"/><path d="m7.5 10.5 2 2"/><path d="m10.5 7.5 2 2"/><path d="m13.5 4.5 2 2"/><path d="m4.5 13.5 2 2"/>')
+);
+registerIcon(
+  "magnet",
+  svg24('<path d="m6 15-4-4 6.75-6.77a7.79 7.79 0 0 1 11 11L13 22l-4-4 6.39-6.36a2.14 2.14 0 0 0-3-3L6 15"/><path d="m5 8 4 4"/><path d="m12 15 4 4"/>')
+);
+registerIcon(
+  "eraser",
+  svg24('<path d="m7 21-4.3-4.3a1 1 0 0 1 0-1.4L13 5a2 2 0 0 1 2.8 0l4.2 4.2a2 2 0 0 1 0 2.8L12 20"/><path d="M22 21H7"/><path d="m5 11 9 9"/>')
+);
+registerIcon(
+  "pen-lock",
+  svg24('<path d="M13.8 4.2a2.1 2.1 0 0 1 3 3L8.5 15.5l-3.5 1 1-3.5Z"/><rect x="13" y="14.5" width="8" height="6" rx="1.2"/><path d="M15 14.5v-1.6a2 2 0 0 1 4 0v1.6"/>')
+);
+registerIcon("brush", svg24('<path d="M9.5 12 17 4.5a2.12 2.12 0 0 1 3 3L12.5 15"/><path d="M7 14a3 3 0 0 0-3 3c0 1.3-1.2 1.5-1.5 2 .8.9 2 1.5 3.5 1.5a3.5 3.5 0 0 0 3.5-3.5 3 3 0 0 0-2.5-3Z"/>'));
+registerIcon(
+  "bucket",
+  svg24('<path d="m18.5 11.5-7-7L4 12a1.8 1.8 0 0 0 0 2.5l5 5a1.8 1.8 0 0 0 2.5 0Z"/><path d="m5 5 4 4"/><path d="M3.5 13.5h13"/><path d="M21 17.5c0 1.1-.9 2-2 2s-2-.9-2-2c0-1 1.2-1.7 2-3 .8 1.3 2 2 2 3Z"/>')
+);
+registerIcon("type", svg24('<path d="M5 6V4.5h14V6"/><path d="M12 4.5v15"/><path d="M9.5 19.5h5"/>'));
+registerIcon("bold", svg24('<path d="M7 5h6a3.5 3.5 0 0 1 0 7H7Z"/><path d="M7 12h7a3.5 3.5 0 0 1 0 7H7Z"/>', 'stroke-width="2.4"'));
+registerIcon("italic", svg24('<path d="M15 5h-5M14 19H9M14.5 5 10 19"/>', 'stroke-width="2.2"'));
+registerIcon("price-delta", svg24('<path d="M12 4v16"/><path d="M8 8l4-4 4 4"/><path d="M8 16l4 4 4-4"/>'));
+registerIcon("date-delta", svg24('<path d="M4 12h16"/><path d="M8 8l-4 4 4 4"/><path d="M16 8l4 4-4 4"/>'));
+registerIcon("bring-front", svg24('<rect x="8.5" y="8.5" width="7" height="7" rx="1.5"/><path d="M4.5 10.5V6a1.5 1.5 0 0 1 1.5-1.5h4.5"/><path d="M19.5 13.5V18a1.5 1.5 0 0 1-1.5 1.5h-4.5"/>'));
+registerIcon(
+  "send-back",
+  svg24('<rect x="8.5" y="8.5" width="7" height="7" rx="1.5" fill="currentColor" stroke="none" opacity="0.35"/><path d="M4.5 10.5V6a1.5 1.5 0 0 1 1.5-1.5h4.5"/><path d="M19.5 13.5V18a1.5 1.5 0 0 1-1.5 1.5h-4.5"/><rect x="8.5" y="8.5" width="7" height="7" rx="1.5"/>')
+);
+registerIcon("r-squared", '<svg viewBox="0 0 24 24" width="1em" height="1em" fill="currentColor" stroke="none"><text x="2.5" y="17.5" font-size="14" font-family="serif">R\xB2</text></svg>');
+registerIcon("bands", svg24('<path d="M3 6h18"/><path d="M3 18h18"/><path d="M3 12h18" stroke-dasharray="3 3"/>'));
+registerIcon("dedekind", svg24('<path d="M2 20h20"/><path d="M4 20a8 8 0 0 1 16 0"/><path d="M8 20a4 4 0 0 1 8 0"/><path d="M12 4v16"/>'));
+registerIcon("sonic", svg24('<circle cx="15" cy="12" r="4"/><circle cx="12" cy="12" r="2.5"/><path d="M8 5v14"/>'));
+registerIcon("supersonic", svg24('<circle cx="16" cy="12" r="3.5"/><path d="M6 12 15 6M6 12 15 18"/>'));
+
+// src/ui/icons.ts
+function iconEl(id, doc = document) {
+  const span = doc.createElement("span");
+  span.className = "vela-icon";
+  span.setAttribute("aria-hidden", "true");
+  const svg = iconMarkup(id);
+  if (svg) span.innerHTML = svg;
+  return span;
+}
+function runMachine(machine4, props, render) {
+  const m = new vanilla.VanillaMachine(machine4, props);
+  const unsub = m.subscribe(render);
+  m.start();
+  render(m.service);
+  return {
+    service: m.service,
+    flush: () => render(m.service),
+    stop: () => {
+      unsub();
+      m.stop();
+    }
+  };
+}
+var uid = 0;
+function nextUid(prefix) {
+  return `${prefix}-${++uid}`;
+}
+
+// src/ui/keymap.ts
+var KEY_ALIASES = {
+  esc: "escape",
+  space: " ",
+  plus: "+",
+  minus: "-",
+  del: "delete",
+  return: "enter",
+  left: "arrowleft",
+  right: "arrowright",
+  up: "arrowup",
+  down: "arrowdown"
+};
+var MAC_GLYPHS = { meta: "\u2318", ctrl: "\u2303", alt: "\u2325", shift: "\u21E7" };
+function parseChord(spec, mac) {
+  const parts = spec.toLowerCase().split("+").map((p) => p.trim()).filter((p, i, a) => p !== "" || a[i - 1] === "");
+  const chord = { ctrl: false, meta: false, alt: false, shift: false, key: "" };
+  for (const raw of parts) {
+    const p = raw === "" ? "+" : raw;
+    if (p === "mod") mac ? chord.meta = true : chord.ctrl = true;
+    else if (p === "ctrl" || p === "control") chord.ctrl = true;
+    else if (p === "meta" || p === "cmd" || p === "command") chord.meta = true;
+    else if (p === "alt" || p === "option") chord.alt = true;
+    else if (p === "shift") chord.shift = true;
+    else chord.key = KEY_ALIASES[p] ?? p;
+  }
+  return chord;
+}
+function eventMatches(ev, c) {
+  return ev.ctrlKey === c.ctrl && ev.metaKey === c.meta && ev.altKey === c.alt && // Shift is part of producing many printable keys ('?', '+') — only enforce it
+  // when the chord names a non-printable/letter key where shift is a real modifier.
+  (c.key.length > 1 || /^[a-z0-9 ]$/.test(c.key) ? ev.shiftKey === c.shift : true) && ev.key.toLowerCase() === c.key;
+}
+function isEditableTarget(ev) {
+  const t = ev.target;
+  if (!t || typeof t !== "object") return false;
+  const tag = (t.tagName ?? "").toLowerCase();
+  if (tag === "input" || tag === "textarea" || tag === "select") return true;
+  if (t.isContentEditable === true) return true;
+  return (typeof t.getAttribute === "function" ? t.getAttribute("role") : null) === "textbox";
+}
+function displayChord(spec, mac) {
+  const c = parseChord(spec, mac);
+  const keyLabel = c.key === " " ? "Space" : c.key.length === 1 ? c.key.toUpperCase() : c.key.charAt(0).toUpperCase() + c.key.slice(1);
+  if (mac) {
+    return (c.ctrl ? MAC_GLYPHS.ctrl : "") + (c.alt ? MAC_GLYPHS.alt : "") + (c.shift ? MAC_GLYPHS.shift : "") + (c.meta ? MAC_GLYPHS.meta : "") + keyLabel;
+  }
+  const mods = [c.ctrl && "Ctrl", c.alt && "Alt", c.shift && "Shift", c.meta && "Win"].filter(Boolean);
+  return [...mods, keyLabel].join("+");
+}
+var KeymapManager = class {
+  constructor(opts = {}) {
+    this.descriptors = /* @__PURE__ */ new Map();
+    this.rebinds = /* @__PURE__ */ new Map();
+    this.scopeStack = [];
+    this.target = null;
+    this.onKeydown = (ev) => {
+      this.handleKeydown(ev);
+    };
+    this.mac = opts.platform !== void 0 ? opts.platform === "mac" : typeof navigator !== "undefined" && /mac|iphone|ipad/i.test(navigator.platform ?? "");
+    this.baseScope = opts.baseScope ?? "chart";
+  }
+  /** Register (or replace, by id) a binding. Returns a disposer. */
+  register(desc) {
+    this.descriptors.set(desc.id, desc);
+    return () => {
+      if (this.descriptors.get(desc.id) === desc) this.descriptors.delete(desc.id);
+    };
+  }
+  unregister(id) {
+    this.descriptors.delete(id);
+    this.rebinds.delete(id);
+  }
+  /** User-level rebinding: overrides the descriptor's default chords (null resets). */
+  rebind(id, keys) {
+    if (keys === null) this.rebinds.delete(id);
+    else this.rebinds.set(id, Array.isArray(keys) ? [...keys] : [keys]);
+  }
+  /** Snapshot for a shortcuts help panel / rebinding UI. */
+  bindings() {
+    return [...this.descriptors.values()].map((d) => {
+      const keys = this.activeKeys(d);
+      return {
+        id: d.id,
+        label: d.label,
+        category: d.category ?? "General",
+        scope: d.scope ?? this.baseScope,
+        keys,
+        display: keys.map((k) => displayChord(k, this.mac))
+      };
+    });
+  }
+  pushScope(scope) {
+    this.scopeStack.push(scope);
+    return () => this.popScope(scope);
+  }
+  /** Pops the TOPMOST occurrence of `scope` (tolerates out-of-order teardown). */
+  popScope(scope) {
+    const i = this.scopeStack.lastIndexOf(scope);
+    if (i >= 0) this.scopeStack.splice(i, 1);
+  }
+  get activeScope() {
+    return this.scopeStack[this.scopeStack.length - 1] ?? this.baseScope;
+  }
+  attach(target) {
+    this.detach();
+    this.target = target;
+    target.addEventListener("keydown", this.onKeydown);
+  }
+  detach() {
+    this.target?.removeEventListener("keydown", this.onKeydown);
+    this.target = null;
+  }
+  /** The matcher — public so hosts/tests can feed events from their own listeners. */
+  handleKeydown(ev) {
+    const editable = isEditableTarget(ev);
+    for (const d of this.descriptors.values()) {
+      const scope = d.scope ?? this.baseScope;
+      if (scope !== "global" && scope !== this.activeScope) continue;
+      if (editable && !d.allowInInput) continue;
+      if (d.when && !d.when()) continue;
+      for (const spec of this.activeKeys(d)) {
+        if (eventMatches(ev, parseChord(spec, this.mac))) {
+          if (d.preventDefault !== false) {
+            ev.preventDefault?.();
+            ev.stopPropagation?.();
+          }
+          d.run(ev);
+          return true;
+        }
+      }
+    }
+    return false;
+  }
+  destroy() {
+    this.detach();
+    this.descriptors.clear();
+    this.rebinds.clear();
+    this.scopeStack.length = 0;
+  }
+  activeKeys(d) {
+    return this.rebinds.get(d.id) ?? (Array.isArray(d.keys) ? d.keys : [d.keys]);
+  }
+};
+function tooltipController(opts = {}) {
+  return {
+    machine: tooltip__namespace.machine,
+    props: {
+      id: nextUid("vela-tooltip"),
+      openDelay: opts.openDelay ?? 0,
+      closeDelay: opts.closeDelay ?? 0,
+      interactive: opts.interactive ?? false,
+      ids: opts.triggerId ? { trigger: opts.triggerId } : void 0,
+      positioning: { placement: opts.placement ?? "top" }
+    },
+    connect: (service) => tooltip__namespace.connect(service, vanilla.normalizeProps)
+  };
+}
+
+// src/ui/components/tooltip/styles.ts
+var TOOLTIP_STYLE_ID = "vela-ui-tooltip";
+var TOOLTIP_CSS = `
+.vela-tooltip {
+    background: var(--vela-bg);
+    color: var(--vela-fg);
+    border: 1px solid var(--vela-border-soft);
+    border-radius: var(--vela-radius-md);
+    box-shadow: var(--vela-shadow);
+    font-size: var(--vela-font-size-md);
+    line-height: 1.4;
+    padding: var(--vela-space-1) var(--vela-space-2);
+    max-width: 280px;
+    pointer-events: none;
+    z-index: var(--vela-z-tooltip);
+}
+.vela-tooltip[data-interactive] { pointer-events: auto; }
+.vela-tooltip[data-state='open'] { animation: vela-tooltip-in 0.12s ease; }
+@keyframes vela-tooltip-in {
+    from { opacity: 0; transform: scale(0.97); }
+    to { opacity: 1; transform: scale(1); }
+}
+`;
+function resolveHost(trigger, host) {
+  return host ?? trigger.closest(".vela-ui") ?? trigger.ownerDocument.body;
+}
+var Tooltip = class {
+  constructor(trigger, opts) {
+    this.trigger = trigger;
+    const doc = trigger.ownerDocument;
+    injectStyles(TOOLTIP_STYLE_ID, TOOLTIP_CSS, doc);
+    this.positioner = doc.createElement("div");
+    this.positioner.className = "vela-ui-layer";
+    this.content = doc.createElement("div");
+    this.content.className = "vela-tooltip";
+    this.positioner.appendChild(this.content);
+    resolveHost(trigger, opts.host).appendChild(this.positioner);
+    this.setContent(opts.content);
+    const ctrl = tooltipController(opts);
+    const mid = String(ctrl.props.id);
+    if (opts.triggerId) trigger.id = opts.triggerId;
+    this.handle = runMachine(ctrl.machine, ctrl.props, (service) => {
+      const api = ctrl.connect(service);
+      vanilla.spreadProps(trigger, api.getTriggerProps(), mid);
+      vanilla.spreadProps(this.positioner, api.getPositionerProps(), mid);
+      vanilla.spreadProps(this.content, api.getContentProps(), mid);
+    });
+  }
+  setContent(content) {
+    this.content.replaceChildren(typeof content === "function" ? content() : content);
+  }
+  destroy() {
+    this.handle.stop();
+    this.positioner.remove();
+    this.trigger.removeAttribute("data-scope");
+  }
+};
+function menuController(opts) {
+  return {
+    machine: menu__namespace.machine,
+    props: {
+      id: opts.id ?? nextUid("vela-menu"),
+      ids: opts.triggerId ? { trigger: opts.triggerId } : void 0,
+      positioning: { placement: opts.placement ?? "bottom-start" },
+      onSelect: (d) => opts.onSelect?.(d.value),
+      onOpenChange: (d) => opts.onOpenChange?.(d.open)
+    },
+    connect: (service) => menu__namespace.connect(service, vanilla.normalizeProps)
+  };
+}
+
+// src/ui/components/menu/styles.ts
+var MENU_STYLE_ID = "vela-ui-menu";
+var MENU_CSS = `
+.vela-menu {
+    /* The list is a <ul>: without this, block rows (the separator) paint a ::marker dot. */
+    list-style: none;
+    margin: 0;
+    background: var(--vela-surface-elev);
+    color: var(--vela-fg);
+    border: 1px solid var(--vela-border-strong);
+    border-radius: 6px;
+    box-shadow: var(--vela-shadow);
+    padding: 6px;
+    min-width: 180px;
+    max-height: 60vh;
+    overflow-y: auto;
+    font-size: 13px;
+    z-index: var(--vela-z-menu);
+    outline: none;
+}
+.vela-menu[data-state='open'] { animation: vela-menu-in var(--vela-dur-fast) var(--vela-ease); }
+@keyframes vela-menu-in {
+    from { opacity: 0; transform: translateY(-3px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+.vela-menu-item {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 7px 10px;
+    border-radius: 4px;
+    cursor: pointer;
+    user-select: none;
+    white-space: nowrap;
+}
+.vela-menu-item[data-highlighted] { background: var(--vela-hover); }
+.vela-menu-item[data-disabled] { opacity: 0.4; cursor: default; }
+.vela-menu-item .vela-icon { width: 16px; height: 16px; font-size: 16px; justify-content: center; color: var(--vela-fg-muted); }
+.vela-menu-item .vela-menu-label { flex: 1 1 auto; }
+.vela-menu-item .vela-menu-hint { color: var(--vela-fg-faint); font-size: var(--vela-font-size-sm); }
+/* Active entry: a brighter row surface + bright ink \u2014 no accent recolor, no glyph.
+   Declared after [data-highlighted] so the selected surface wins while hovered. */
+.vela-menu-item[data-checked] { background: var(--vela-hover-strong); color: var(--vela-fg-bright); }
+.vela-menu-item[data-checked] .vela-icon { color: var(--vela-fg-bright); }
+/* Switch rows (boolean settings in a dropdown): a right-aligned toggle pill \u2014 the
+   same control language as the settings dialog's toggles. */
+.vela-menu-switch {
+    order: 99;
+    margin-left: auto;
+    position: relative;
+    flex: none;
+    width: 34px;
+    height: 18px;
+    border-radius: 9px;
+    background: var(--vela-surface-overlay);
+    border: 1px solid var(--vela-border-soft);
+    transition: background 0.16s ease, border-color 0.16s ease;
+}
+.vela-menu-switch::after {
+    content: '';
+    position: absolute;
+    top: 2px;
+    left: 2px;
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    background: var(--vela-fg-muted);
+    transition: transform 0.16s ease, background 0.16s ease;
+}
+.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); }
+.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. */
+.vela-menu-item .vela-menu-arrow {
+    order: 99;
+    margin-left: auto;
+    width: 12px;
+    flex: none;
+    font-size: 11px;
+    color: var(--vela-fg-faint);
+}
+.vela-menu-item[data-state='open'] { background: var(--vela-hover); }
+`;
+var Surface = class _Surface {
+  constructor(doc, opts) {
+    this.items = [];
+    /** Branch item id → the surface it opens. */
+    this.subs = /* @__PURE__ */ new Map();
+    this.doc = doc;
+    this.host = opts.host;
+    this.onSelect = opts.onSelect;
+    this.positioner = doc.createElement("div");
+    this.positioner.className = "vela-ui-layer";
+    this.list = doc.createElement("ul");
+    this.list.className = "vela-menu";
+    if (opts.minWidth) this.list.style.minWidth = opts.minWidth;
+    this.positioner.appendChild(this.list);
+    this.host.appendChild(this.positioner);
+    this.ctrl = menuController({
+      items: [],
+      id: opts.id,
+      placement: opts.placement,
+      onSelect: (id) => this.onSelect(id),
+      onOpenChange: opts.onOpenChange,
+      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);
+      if (trigger) vanilla.spreadProps(trigger, api.getTriggerProps(), this.mid);
+      vanilla.spreadProps(this.positioner, api.getPositionerProps(), this.mid);
+      vanilla.spreadProps(this.list, api.getContentProps(), this.mid);
+      this.project(api);
+    });
+  }
+  get api() {
+    return this.ctrl.connect(this.handle.service);
+  }
+  setItems(items) {
+    this.items = items;
+    for (const sub of this.subs.values()) sub.destroy();
+    this.subs.clear();
+    this.build();
+    const api = this.api;
+    for (const sub of this.subs.values()) {
+      api.setChild(sub.handle.service);
+      sub.api.setParent(this.handle.service);
+    }
+    this.handle.flush();
+    if (this.subs.size > 0) queueMicrotask(() => this.handle.flush());
+  }
+  destroy() {
+    for (const sub of this.subs.values()) sub.destroy();
+    this.subs.clear();
+    this.handle.stop();
+    this.positioner.remove();
+  }
+  byId(id) {
+    return this.items.find((i) => i.id === id);
+  }
+  /** Push the machine's item props onto the rendered rows. A branch takes the submenu
+   *  trigger props, which carry the child's ids and hover handlers; a leaf takes plain ones. */
+  project(api) {
+    for (const li of this.list.children) {
+      const id = li.dataset.veiId;
+      if (!id) continue;
+      const sub = this.subs.get(id);
+      if (sub) {
+        vanilla.spreadProps(li, api.getTriggerItemProps(sub.api), this.mid);
+        continue;
+      }
+      const item = this.byId(id);
+      vanilla.spreadProps(li, api.getItemProps({ value: id, disabled: item?.disabled, closeOnSelect: item?.toggle ? false : void 0 }), this.mid);
+    }
+  }
+  build() {
+    const doc = this.doc;
+    this.list.replaceChildren();
+    for (const item of this.items) {
+      if (item.separatorBefore) {
+        const sep = doc.createElement("li");
+        sep.className = "vela-menu-sep";
+        sep.setAttribute("role", "separator");
+        this.list.appendChild(sep);
+      }
+      const branch = item.submenu !== void 0 && item.submenu.length > 0;
+      const li = doc.createElement("li");
+      li.className = "vela-menu-item";
+      li.dataset.veiId = item.id;
+      if (item.toggle) {
+        li.dataset.toggle = "1";
+      } else if (!branch && item.checked) {
+        li.dataset.checked = "1";
+      }
+      if (item.icon) li.appendChild(iconEl(item.icon, doc));
+      const label = doc.createElement("span");
+      label.className = "vela-menu-label";
+      label.textContent = item.label;
+      li.appendChild(label);
+      if (item.hint) {
+        const hint = doc.createElement("span");
+        hint.className = "vela-menu-hint";
+        hint.textContent = item.hint;
+        li.appendChild(hint);
+      }
+      if (item.toggle) {
+        const sw = doc.createElement("span");
+        sw.className = "vela-menu-switch" + (item.checked ? " on" : "");
+        sw.setAttribute("aria-hidden", "true");
+        li.appendChild(sw);
+      }
+      if (branch) {
+        li.dataset.branch = "1";
+        const arrow = iconEl("chevron-right", doc);
+        arrow.classList.add("vela-menu-arrow");
+        li.appendChild(arrow);
+        const sub = new _Surface(doc, {
+          host: this.host,
+          placement: "right-start",
+          onSelect: this.onSelect,
+          id: `${this.mid}--${item.id}`
+        });
+        sub.setItems(item.submenu ?? []);
+        this.subs.set(item.id, sub);
+      }
+      this.list.appendChild(li);
+    }
+  }
+};
+var Menu = class {
+  constructor(opts) {
+    const anchor = opts.trigger ?? opts.host ?? document.body;
+    const doc = anchor.ownerDocument;
+    injectStyles(MENU_STYLE_ID, MENU_CSS, doc);
+    const host = opts.host ?? anchor.closest?.(".vela-ui") ?? doc.body;
+    this.root = new Surface(doc, {
+      host,
+      placement: opts.placement,
+      onSelect: (id) => opts.onSelect?.(id),
+      onOpenChange: opts.onOpenChange,
+      trigger: opts.trigger,
+      triggerId: opts.triggerId,
+      id: opts.id,
+      minWidth: opts.minWidth
+    });
+    this.root.setItems(opts.items);
+  }
+  get api() {
+    return this.root.api;
+  }
+  open() {
+    this.api.setOpen(true);
+  }
+  /** Open anchored to a viewport point (context menus). */
+  openAt(clientX, clientY) {
+    const api = this.api;
+    api.setOpen(true);
+    api.reposition({ getAnchorRect: () => ({ x: clientX, y: clientY, width: 0, height: 0 }) });
+  }
+  close() {
+    this.api.setOpen(false);
+  }
+  /** Swap the item descriptors (e.g. checked states) and re-project. */
+  setItems(items) {
+    this.root.setItems(items);
+  }
+  destroy() {
+    this.root.destroy();
+  }
+};
+function dialogController(opts = {}) {
+  return {
+    machine: dialog__namespace.machine,
+    props: {
+      id: nextUid("vela-dialog"),
+      modal: opts.modal ?? true,
+      closeOnEscape: opts.closeOnEscape ?? true,
+      closeOnInteractOutside: opts.closeOnInteractOutside ?? false,
+      onOpenChange: (d) => opts.onOpenChange?.(d.open)
+    },
+    connect: (service) => dialog__namespace.connect(service, vanilla.normalizeProps)
+  };
+}
+
+// src/ui/components/dialog/styles.ts
+var DIALOG_STYLE_ID = "vela-ui-dialog";
+var DIALOG_CSS = `
+.vela-dialog-backdrop {
+    position: fixed;
+    inset: 0;
+    background: var(--vela-backdrop);
+    z-index: var(--vela-z-dialog);
+}
+/* Non-dimming variant: still catches outside clicks, but the page stays readable. */
+.vela-dialog-backdrop--clear { background: transparent; }
+.vela-dialog-positioner {
+    position: fixed;
+    inset: 0;
+    display: flex;
+    align-items: flex-start;
+    justify-content: center;
+    padding-top: 10vh;
+    z-index: var(--vela-z-dialog);
+}
+.vela-dialog {
+    background: var(--vela-surface);
+    color: var(--vela-fg);
+    border: 1px solid var(--vela-border-strong);
+    border-radius: 10px;
+    box-shadow: var(--vela-shadow-dialog);
+    font-size: 13px;
+    min-width: 300px;
+    max-width: min(92vw, 560px);
+    max-height: 70vh;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    outline: none;
+}
+.vela-dialog[data-state='open'] { animation: vela-dialog-in var(--vela-dur-med) var(--vela-ease); }
+@keyframes vela-dialog-in {
+    from { opacity: 0; transform: translateY(6px) scale(0.98); }
+    to { opacity: 1; transform: translateY(0) scale(1); }
+}
+.vela-dialog-header {
+    display: flex;
+    align-items: center;
+    padding: 9px 9px 9px 16px;
+    border-bottom: 1px solid var(--vela-border);
+    user-select: none;
+}
+.vela-dialog-title { flex: 1; font-size: 17px; font-weight: 600; letter-spacing: 0.2px; color: var(--vela-fg-bright); }
+.vela-dialog-close {
+    all: unset;
+    cursor: pointer;
+    width: 30px;
+    height: 30px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 4px;
+    color: var(--vela-fg-muted);
+    line-height: 1;
+    font-size: 15px;
+}
+.vela-dialog-close:hover { background: var(--vela-hover); color: var(--vela-fg-bright); }
+.vela-dialog-body { padding: var(--vela-space-4); overflow: auto; }
+.vela-dialog-body::-webkit-scrollbar { width: 8px; }
+.vela-dialog-body::-webkit-scrollbar-thumb {
+    background: var(--vela-scroll);
+    border-radius: 4px;
+    border: 2px solid transparent;
+    background-clip: padding-box;
+}
+`;
+var Dialog = class {
+  constructor(opts = {}) {
+    const doc = (opts.host ?? document.body).ownerDocument;
+    injectStyles(DIALOG_STYLE_ID, DIALOG_CSS, doc);
+    const host = opts.host ?? doc.body;
+    this.backdrop = doc.createElement("div");
+    this.backdrop.className = "vela-dialog-backdrop vela-ui-layer";
+    if (opts.dimBackdrop !== true) this.backdrop.classList.add("vela-dialog-backdrop--clear");
+    this.positioner = doc.createElement("div");
+    this.positioner.className = "vela-dialog-positioner vela-ui-layer";
+    this.panel = doc.createElement("div");
+    this.panel.className = "vela-dialog";
+    const header = doc.createElement("div");
+    header.className = "vela-dialog-header";
+    if (opts.draggable) {
+      header.style.cursor = "move";
+      let sx = 0, sy = 0, ox = 0, oy = 0, dragging = false;
+      header.addEventListener("pointerdown", (e) => {
+        if (e.target.closest(".vela-dialog-close")) return;
+        dragging = true;
+        sx = e.clientX - ox;
+        sy = e.clientY - oy;
+        header.setPointerCapture(e.pointerId);
+      });
+      header.addEventListener("pointermove", (e) => {
+        if (!dragging) return;
+        ox = e.clientX - sx;
+        oy = e.clientY - sy;
+        this.panel.style.transform = `translate(${ox}px, ${oy}px)`;
+      });
+      header.addEventListener("pointerup", () => dragging = false);
+    }
+    const title = doc.createElement("div");
+    title.className = "vela-dialog-title";
+    title.textContent = opts.title ?? "";
+    const close = doc.createElement("button");
+    close.className = "vela-dialog-close";
+    close.appendChild(iconEl("close", doc));
+    header.append(title, close);
+    this.body = doc.createElement("div");
+    this.body.className = "vela-dialog-body";
+    if (opts.content instanceof Node) this.body.appendChild(opts.content);
+    else if (typeof opts.content === "function") opts.content(this.body);
+    this.panel.append(header, this.body);
+    this.positioner.appendChild(this.panel);
+    host.append(this.backdrop, this.positioner);
+    this.ctrl = dialogController(opts);
+    const mid = String(this.ctrl.props.id);
+    this.handle = runMachine(this.ctrl.machine, this.ctrl.props, (service) => {
+      const api = this.ctrl.connect(service);
+      vanilla.spreadProps(this.backdrop, api.getBackdropProps(), mid);
+      vanilla.spreadProps(this.positioner, api.getPositionerProps(), mid);
+      vanilla.spreadProps(this.panel, api.getContentProps(), mid);
+      vanilla.spreadProps(title, api.getTitleProps(), mid);
+      vanilla.spreadProps(close, api.getCloseTriggerProps(), mid);
+      this.backdrop.style.display = api.open ? "" : "none";
+      this.positioner.style.display = api.open ? "" : "none";
+    });
+  }
+  get open() {
+    return this.ctrl.connect(this.handle.service).open;
+  }
+  show() {
+    this.ctrl.connect(this.handle.service).setOpen(true);
+  }
+  hide() {
+    this.ctrl.connect(this.handle.service).setOpen(false);
+  }
+  destroy() {
+    this.handle.stop();
+    this.backdrop.remove();
+    this.positioner.remove();
+  }
+};
+
+Object.defineProperty(exports, "normalizeProps", {
+  enumerable: true,
+  get: function () { return vanilla.normalizeProps; }
+});
+Object.defineProperty(exports, "spreadProps", {
+  enumerable: true,
+  get: function () { return vanilla.spreadProps; }
+});
+exports.Dialog = Dialog;
+exports.KeymapManager = KeymapManager;
+exports.Menu = Menu;
+exports.Tooltip = Tooltip;
+exports.applyPlotOverlayTokens = applyPlotOverlayTokens;
+exports.applyThemeTokens = applyThemeTokens;
+exports.dialogController = dialogController;
+exports.ensureUIHost = ensureUIHost;
+exports.iconEl = iconEl;
+exports.iconMarkup = iconMarkup;
+exports.injectStyles = injectStyles;
+exports.menuController = menuController;
+exports.nextUid = nextUid;
+exports.registerIcon = registerIcon;
+exports.runMachine = runMachine;
+exports.svg16 = svg16;
+exports.svg24 = svg24;
+exports.tooltipController = tooltipController;
+exports.withAlpha = withAlpha;