@luxalgo/vela 0.5.0

package/dist/chunk-Q3XQHLIH.js

@@ -0,0 +1,7 @@
+// src/core/model/identity.ts
+function stableSeriesId(parts) {
+  const normTitle = parts.title.trim().toLowerCase().replace(/\s+/g, "-");
+  return `${parts.instanceId}:${parts.kind}:${normTitle}#${parts.ordinal}`;
+}
+
+export { stableSeriesId };

package/dist/chunk-RHIDOUFL.js

@@ -0,0 +1,698 @@
+import { STATIC_TOKENS, themeTokens } from './chunk-KM6LHB3Y.js';
+import { injectStyles, iconEl } from './chunk-GYD2THPV.js';
+import { VanillaMachine, normalizeProps, spreadProps } from '@zag-js/vanilla';
+export { normalizeProps, spreadProps } from '@zag-js/vanilla';
+import * as tooltip from '@zag-js/tooltip';
+import * as menu from '@zag-js/menu';
+import * as dialog from '@zag-js/dialog';
+
+// 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);
+}
+function runMachine(machine4, props, render) {
+  const m = new 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.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.connect(service, 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);
+      spreadProps(trigger, api.getTriggerProps(), mid);
+      spreadProps(this.positioner, api.getPositionerProps(), mid);
+      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.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.connect(service, 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) spreadProps(trigger, api.getTriggerProps(), this.mid);
+      spreadProps(this.positioner, api.getPositionerProps(), this.mid);
+      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) {
+        spreadProps(li, api.getTriggerItemProps(sub.api), this.mid);
+        continue;
+      }
+      const item = this.byId(id);
+      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.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.connect(service, 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);
+      spreadProps(this.backdrop, api.getBackdropProps(), mid);
+      spreadProps(this.positioner, api.getPositionerProps(), mid);
+      spreadProps(this.panel, api.getContentProps(), mid);
+      spreadProps(title, api.getTitleProps(), mid);
+      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();
+  }
+};
+
+export { Dialog, KeymapManager, Menu, Tooltip, applyPlotOverlayTokens, applyThemeTokens, dialogController, ensureUIHost, isEditableTarget, menuController, nextUid, runMachine, tooltipController };