@luxalgo/vela 0.6.0 → 0.6.2

package/dist/chunk-QWIEKZRE.js

@@ -1,1042 +0,0 @@
-import { injectStyles, iconEl } from './chunk-EMS6PO2T.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';
-
-function runMachine(machine5, props, render) {
-  const m = new VanillaMachine(machine5, 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",
-        ...opts.getAnchorRect ? { getAnchorRect: () => opts.getAnchorRect() } : {}
-      },
-      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: the row surface carries the selection \u2014 a stronger background wash
-   than the hover one, plus bright ink. Declared after the hover rule so a selected
-   row stays visibly selected while highlighted. */
-.vela-menu-item[data-checked] {
-    background: var(--vela-hover-strong);
-    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); }
-/* 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. */
-.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();
-    /** 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");
-    this.list.className = "vela-menu";
-    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),
-      getAnchorRect: () => this.pinnedAnchor,
-      onOpenChange: (open) => {
-        if (open && 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?.(open);
-      },
-      triggerId: opts.triggerId
-    });
-    this.mid = String(this.ctrl.props.id);
-    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.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" : "");
-        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,
-          onFavorite: this.onFavorite,
-          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,
-      onFavorite: opts.onFavorite
-    });
-    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,
-      initialFocusEl: opts.initialFocusEl,
-      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;
-}
-/* \u2500\u2500 mobile chrome: dialogs fill the shell \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
-   Inside a shell in the mobile size class ([data-layout='mobile'] on the widget root,
-   which is position:relative) every kit dialog presents fullscreen: desktop cards are
-   unusable at phone widths, and the shell's bounds \u2014 not the viewport \u2014 are the honest
-   "screen" for an embedded chart. */
-[data-layout='mobile'] .vela-dialog-backdrop { position: absolute; }
-[data-layout='mobile'] .vela-dialog-positioner {
-    position: absolute;
-    padding: 0;
-    align-items: stretch;
-}
-[data-layout='mobile'] .vela-dialog {
-    width: 100%;
-    min-width: 0;
-    max-width: none;
-    max-height: none;
-    flex: 1 1 auto;
-    border: none;
-    border-radius: 0;
-    transform: none !important; /* a desktop drag offset must not survive the flip */
-}
-[data-layout='mobile'] .vela-dialog-close { width: 40px; height: 40px; }
-[data-layout='mobile'] .vela-dialog-body { padding-bottom: calc(var(--vela-space-4) + env(safe-area-inset-bottom, 0px)); }
-`;
-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";
-    this.panel.tabIndex = -1;
-    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,
-      // Mobile chrome (fullscreen presentation): opening must never land focus on
-      // an input — that pops the on-screen keyboard over the just-opened dialog.
-      // Focus goes to the panel; a caller that WANTS the keyboard focuses its
-      // input explicitly. Desktop keeps the caller's pick, else the machine's
-      // first-tabbable default.
-      initialFocusEl: () => {
-        if (this.positioner.closest('[data-layout="mobile"]')) return this.panel;
-        return opts.initialFocusEl?.() ?? null;
-      }
-    });
-    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();
-  }
-};
-function drawerController(opts = {}) {
-  return {
-    machine: dialog.machine,
-    props: {
-      id: nextUid("vela-drawer"),
-      modal: true,
-      closeOnEscape: opts.closeOnEscape ?? true,
-      closeOnInteractOutside: opts.closeOnInteractOutside ?? true,
-      initialFocusEl: opts.initialFocusEl,
-      onOpenChange: (d) => opts.onOpenChange?.(d.open)
-    },
-    connect: (service) => dialog.connect(service, normalizeProps)
-  };
-}
-
-// src/ui/components/drawer/styles.ts
-var DRAWER_STYLE_ID = "vela-ui-drawer";
-var DRAWER_CSS = `
-.vela-drawer-backdrop {
-    position: fixed;
-    inset: 0;
-    background: var(--vela-backdrop);
-    z-index: var(--vela-z-dialog);
-}
-.vela-drawer-positioner {
-    position: fixed;
-    inset: 0;
-    display: flex;
-    align-items: flex-end;
-    justify-content: center;
-    z-index: var(--vela-z-dialog);
-}
-/* Inside a shell that declares a size class, the sheet scopes to the SHELL's bounds
-   (the widget root is position:relative) instead of the whole viewport \u2014 an embedded
-   chart must not curtain the host page. */
-[data-layout] .vela-drawer-backdrop, [data-layout] .vela-drawer-positioner { position: absolute; }
-.vela-drawer {
-    background: var(--vela-surface);
-    color: var(--vela-fg);
-    border: 1px solid var(--vela-border-strong);
-    border-bottom: none;
-    border-radius: 14px 14px 0 0;
-    box-shadow: var(--vela-shadow-dialog);
-    font-size: 13px;
-    width: 100%;
-    max-height: 85%;
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-    outline: none;
-}
-.vela-drawer[data-state='open'] { animation: vela-drawer-in var(--vela-dur-med) var(--vela-ease); }
-@keyframes vela-drawer-in {
-    from { transform: translateY(100%); }
-    to { transform: translateY(0); }
-}
-/* The grab zone owns its touches (drag-to-dismiss), so the browser must not scroll it. */
-.vela-drawer-grab {
-    flex: none;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 10px 0 6px;
-    cursor: grab;
-    touch-action: none;
-    user-select: none;
-}
-.vela-drawer-grab::before {
-    content: '';
-    width: 36px;
-    height: 4px;
-    border-radius: 2px;
-    background: var(--vela-border-strong);
-}
-.vela-drawer-title {
-    flex: none;
-    padding: 0 16px 10px;
-    font-size: 15px;
-    font-weight: 600;
-    letter-spacing: 0.2px;
-    color: var(--vela-fg-bright);
-    user-select: none;
-}
-.vela-drawer-title:empty { display: none; }
-.vela-drawer-body {
-    flex: 1 1 auto;
-    min-height: 0;
-    overflow-y: auto;
-    overscroll-behavior: contain;
-    -webkit-overflow-scrolling: touch;
-    /* Vertical pans stay native scrolling; horizontal moves reach the sheet's gesture
-       recognizer as pointer events (tab swipes). Without this the browser claims a
-       sideways touch as a scroll attempt and CANCELS the pointer stream, so swipes
-       never registered on real touch devices. Sideways-scrolling strips inside the
-       body opt back in with their own touch-action: pan-x. */
-    touch-action: pan-y;
-    padding: 0 var(--vela-space-3) calc(var(--vela-space-3) + env(safe-area-inset-bottom, 0px));
-}
-.vela-drawer-body::-webkit-scrollbar { width: 8px; }
-.vela-drawer-body::-webkit-scrollbar-thumb {
-    background: var(--vela-scroll);
-    border-radius: 4px;
-    border: 2px solid transparent;
-    background-clip: padding-box;
-}
-`;
-var DISMISS_FRACTION = 0.33;
-var DISMISS_PX = 96;
-var SLOP_PX = 8;
-var HSWIPE_MIN_PX = 48;
-function classifyGesture(dx, dy, ctx) {
-  if (Math.max(Math.abs(dx), Math.abs(dy)) < SLOP_PX) return "pending";
-  if (Math.abs(dy) > Math.abs(dx)) return dy > 0 && !ctx.scrolled ? "drag" : "scroll";
-  return ctx.canSwipe && !ctx.hScrollable ? "hswipe" : "scroll";
-}
-function dragDismisses(dy, panelHeightPx) {
-  return dy >= Math.min(DISMISS_PX, panelHeightPx * DISMISS_FRACTION);
-}
-function swipeDirection(dx, dy) {
-  if (Math.abs(dx) < HSWIPE_MIN_PX || Math.abs(dx) <= Math.abs(dy)) return null;
-  return dx < 0 ? "left" : "right";
-}
-var Drawer = class {
-  constructor(opts = {}) {
-    const doc = (opts.host ?? document.body).ownerDocument;
-    injectStyles(DRAWER_STYLE_ID, DRAWER_CSS, doc);
-    const host = opts.host ?? doc.body;
-    this.backdrop = doc.createElement("div");
-    this.backdrop.className = "vela-drawer-backdrop vela-ui-layer";
-    this.positioner = doc.createElement("div");
-    this.positioner.className = "vela-drawer-positioner vela-ui-layer";
-    this.panel = doc.createElement("div");
-    this.panel.className = "vela-drawer";
-    this.panel.tabIndex = -1;
-    const grab = doc.createElement("div");
-    grab.className = "vela-drawer-grab";
-    this.titleEl = doc.createElement("div");
-    this.titleEl.className = "vela-drawer-title";
-    this.titleEl.textContent = opts.title ?? "";
-    this.body = doc.createElement("div");
-    this.body.className = "vela-drawer-body";
-    if (opts.content instanceof Node) this.body.appendChild(opts.content);
-    else if (typeof opts.content === "function") opts.content(this.body);
-    this.panel.append(grab, this.titleEl, this.body);
-    this.positioner.appendChild(this.panel);
-    host.append(this.backdrop, this.positioner);
-    this.wireGestures(grab, opts.onSwipe);
-    this.ctrl = drawerController({ ...opts, initialFocusEl: () => this.panel });
-    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(this.titleEl, api.getTitleProps(), mid);
-      this.backdrop.style.display = api.open ? "" : "none";
-      this.positioner.style.display = api.open ? "" : "none";
-    });
-  }
-  /** Any element between `from` and the panel that has already been scrolled down —
-   *  a downward pull there must scroll it back up, never drag the sheet. */
-  scrolledAncestor(from) {
-    let el = from instanceof Element ? from : null;
-    while (el && el !== this.panel) {
-      if (el.scrollTop > 0) return true;
-      el = el.parentElement;
-    }
-    return false;
-  }
-  /** Any element between `from` and the panel that scrolls horizontally on its own
-   *  (the tab strip, chip rows) — a sideways move there is ITS scroll, not a swipe. */
-  hScrollableAncestor(from) {
-    let el = from instanceof Element ? from : null;
-    while (el && el !== this.panel) {
-      if (el.scrollWidth > el.clientWidth + 1) return true;
-      el = el.parentElement;
-    }
-    return false;
-  }
-  /**
-   * One gesture recognizer for the whole sheet. A downward pull dismisses from
-   * anywhere — the grab handle immediately, the content once it is decidedly vertical
-   * and its scroller is at rest (a scrolled list keeps native scrolling). A decidedly
-   * horizontal move becomes an `onSwipe` (tabbed drawers flip pages with it). The
-   * non-passive touchmove hook is what keeps the browser from claiming the pull as a
-   * scroll once the sheet is (or may become) the drag target.
-   */
-  wireGestures(grab, onSwipe) {
-    let startX = 0;
-    let startY = 0;
-    let dx = 0;
-    let dy = 0;
-    let mode = "idle";
-    const beginDrag = (e) => {
-      mode = "drag";
-      startY = e.clientY;
-      this.panel.style.transition = "none";
-      try {
-        this.panel.setPointerCapture(e.pointerId);
-      } catch {
-      }
-    };
-    this.panel.addEventListener("pointerdown", (e) => {
-      if (e.isPrimary === false) return;
-      startX = e.clientX;
-      startY = e.clientY;
-      dx = 0;
-      dy = 0;
-      if (grab.contains(e.target)) beginDrag(e);
-      else mode = "pending";
-    });
-    this.panel.addEventListener("pointermove", (e) => {
-      if (mode === "idle" || mode === "scroll") return;
-      dx = e.clientX - startX;
-      dy = e.clientY - startY;
-      if (mode === "pending") {
-        const intent = classifyGesture(dx, dy, {
-          canSwipe: !!onSwipe,
-          scrolled: this.scrolledAncestor(e.target),
-          hScrollable: this.hScrollableAncestor(e.target)
-        });
-        if (intent === "pending") return;
-        if (intent === "drag") beginDrag(e);
-        else mode = intent;
-      }
-      if (mode === "drag") {
-        dy = Math.max(0, e.clientY - startY);
-        this.panel.style.transform = dy > 0 ? `translateY(${dy}px)` : "";
-      }
-    });
-    this.panel.addEventListener(
-      "touchmove",
-      (e) => {
-        if (mode === "drag" || mode === "hswipe") {
-          e.preventDefault();
-          return;
-        }
-        if (mode !== "pending") return;
-        const t = e.touches[0];
-        if (!t) return;
-        const mdx = t.clientX - startX;
-        const mdy = t.clientY - startY;
-        if (mdy > Math.abs(mdx) && !this.scrolledAncestor(e.target)) e.preventDefault();
-      },
-      { passive: false }
-    );
-    const settle = () => {
-      if (mode === "idle") return;
-      const finished = mode;
-      mode = "idle";
-      if (finished === "drag") {
-        this.panel.style.transition = "";
-        this.panel.style.transform = "";
-        if (dragDismisses(dy, this.panel.getBoundingClientRect().height)) this.hide();
-      } else if (finished === "hswipe") {
-        const dir = swipeDirection(dx, dy);
-        if (dir) onSwipe?.(dir);
-      }
-    };
-    this.panel.addEventListener("pointerup", settle);
-    this.panel.addEventListener("pointercancel", settle);
-  }
-  setTitle(title) {
-    this.titleEl.textContent = title;
-  }
-  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, Drawer, KeymapManager, Menu, Tooltip, dialogController, drawerController, isEditableTarget, menuController, nextUid, runMachine, tooltipController };