@luxalgo/vela 0.5.1 → 0.5.2

package/dist/ui.cjs

@@ -264,14 +264,15 @@ registerIcon(
   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-left", S('<path d="M10 3.5 5.5 8l4.5 4.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("eye", S('<path d="M1.5 8s2.5-5.4 6.5-5.4S14.5 8 14.5 8 12 13.4 8 13.4 1.5 8 1.5 8z"/><circle cx="8" cy="8" r="1.8"/>'));
+registerIcon("eye-off", S('<path d="M1.5 8s2.5-5.4 6.5-5.4S14.5 8 14.5 8 12 13.4 8 13.4 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"/>'));
@@ -294,6 +295,7 @@ registerIcon("star", S('<path d="M8 2.2l1.75 3.55 3.9.55-2.8 2.75.65 3.9L8 11.1l
 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("burger", S('<path d="M2.5 4.5h11M2.5 8h11M2.5 11.5h11"/>'));
 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"/>'));
@@ -349,8 +351,8 @@ function iconEl(id, doc = document) {
   if (svg) span.innerHTML = svg;
   return span;
 }
-function runMachine(machine4, props, render) {
-  const m = new vanilla.VanillaMachine(machine4, props);
+function runMachine(machine5, props, render) {
+  const m = new vanilla.VanillaMachine(machine5, props);
   const unsub = m.subscribe(render);
   m.start();
   render(m.service);
@@ -638,10 +640,13 @@ var MENU_CSS = `
 .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); }
+/* 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 {
@@ -859,6 +864,7 @@ function dialogController(opts = {}) {
       modal: opts.modal ?? true,
       closeOnEscape: opts.closeOnEscape ?? true,
       closeOnInteractOutside: opts.closeOnInteractOutside ?? false,
+      initialFocusEl: opts.initialFocusEl,
       onOpenChange: (d) => opts.onOpenChange?.(d.open)
     },
     connect: (service) => dialog__namespace.connect(service, vanilla.normalizeProps)
@@ -935,6 +941,29 @@ var DIALOG_CSS = `
     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 = {}) {
@@ -948,6 +977,7 @@ var Dialog = class {
     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) {
@@ -982,7 +1012,18 @@ var Dialog = class {
     this.panel.append(header, this.body);
     this.positioner.appendChild(this.panel);
     host.append(this.backdrop, this.positioner);
-    this.ctrl = dialogController(opts);
+    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);
@@ -1010,6 +1051,286 @@ var Dialog = class {
     this.positioner.remove();
   }
 };
+function drawerController(opts = {}) {
+  return {
+    machine: dialog__namespace.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__namespace.connect(service, vanilla.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);
+      vanilla.spreadProps(this.backdrop, api.getBackdropProps(), mid);
+      vanilla.spreadProps(this.positioner, api.getPositionerProps(), mid);
+      vanilla.spreadProps(this.panel, api.getContentProps(), mid);
+      vanilla.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();
+  }
+};
 
 Object.defineProperty(exports, "normalizeProps", {
   enumerable: true,
@@ -1020,12 +1341,14 @@ Object.defineProperty(exports, "spreadProps", {
   get: function () { return vanilla.spreadProps; }
 });
 exports.Dialog = Dialog;
+exports.Drawer = Drawer;
 exports.KeymapManager = KeymapManager;
 exports.Menu = Menu;
 exports.Tooltip = Tooltip;
 exports.applyPlotOverlayTokens = applyPlotOverlayTokens;
 exports.applyThemeTokens = applyThemeTokens;
 exports.dialogController = dialogController;
+exports.drawerController = drawerController;
 exports.ensureUIHost = ensureUIHost;
 exports.iconEl = iconEl;
 exports.iconMarkup = iconMarkup;

package/dist/ui.d.cts

@@ -1,4 +1,4 @@
-import { c as VelaTheme } from './options-DbQholFV.cjs';
+import { c as VelaTheme } from './options-XTBpbx0s.cjs';
 import { MachineSchema, Service, Machine } from '@zag-js/core';
 export { a as KeyBindingDescriptor, K as KeymapManager, b as KeymapOptions, R as ResolvedBinding } from './keymap-CGOz5F5f.cjs';
 import * as tooltip from '@zag-js/tooltip';
@@ -148,6 +148,8 @@ interface DialogControllerOptions {
     modal?: boolean;
     closeOnEscape?: boolean;
     closeOnInteractOutside?: boolean;
+    /** Element to focus on open (default: the machine's first-tabbable pick). */
+    initialFocusEl?: () => HTMLElement | null;
     onOpenChange?: (open: boolean) => void;
 }
 type DialogService = dialog.Service;
@@ -185,4 +187,64 @@ declare class Dialog {
     destroy(): void;
 }
 
-export { Dialog, type DialogApi, type DialogControllerOptions, type DialogOptions, type DialogService, type MachineHandle, Menu, type MenuApi, type MenuControllerOptions, type MenuItemDescriptor, type MenuOptions, type MenuService, Tooltip, type TooltipApi, type TooltipControllerOptions, type TooltipOptions, type TooltipService, applyPlotOverlayTokens, applyThemeTokens, dialogController, ensureUIHost, iconEl, injectStyles, menuController, nextUid, runMachine, tooltipController, withAlpha };
+interface DrawerControllerOptions {
+    closeOnEscape?: boolean;
+    /** Tap outside (on the backdrop) dismisses — default true. */
+    closeOnInteractOutside?: boolean;
+    /** Element to focus on open (default: the machine's first-tabbable pick). The view
+     *  points this at the sheet itself so opening never focuses an input — on touch
+     *  devices that would pop the on-screen keyboard over the sheet. */
+    initialFocusEl?: () => HTMLElement | null;
+    onOpenChange?: (open: boolean) => void;
+}
+type DrawerService = dialog.Service;
+type DrawerApi = dialog.Api;
+interface DrawerController {
+    machine: typeof dialog.machine;
+    props: Partial<dialog.Props>;
+    connect(service: DrawerService): DrawerApi;
+}
+declare function drawerController(opts?: DrawerControllerOptions): DrawerController;
+
+interface DrawerOptions extends DrawerControllerOptions {
+    title?: string;
+    content?: Node | ((body: HTMLElement) => void);
+    host?: HTMLElement;
+    /** Horizontal swipe across the sheet (fires on release; `'left'` = the finger moved
+     *  left). Gestures that start inside a horizontally scrollable strip (tabs, chip
+     *  rows) keep their native scroll instead. */
+    onSwipe?: (dir: 'left' | 'right') => void;
+}
+declare class Drawer {
+    /** Caller-owned content area — append your rows/lists here. */
+    readonly body: HTMLElement;
+    private readonly backdrop;
+    private readonly positioner;
+    private readonly panel;
+    private readonly titleEl;
+    private readonly handle;
+    private readonly ctrl;
+    constructor(opts?: DrawerOptions);
+    /** 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. */
+    private scrolledAncestor;
+    /** 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. */
+    private hScrollableAncestor;
+    /**
+     * 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.
+     */
+    private wireGestures;
+    setTitle(title: string): void;
+    get open(): boolean;
+    show(): void;
+    hide(): void;
+    destroy(): void;
+}
+
+export { Dialog, type DialogApi, type DialogControllerOptions, type DialogOptions, type DialogService, Drawer, type DrawerApi, type DrawerControllerOptions, type DrawerOptions, type DrawerService, type MachineHandle, Menu, type MenuApi, type MenuControllerOptions, type MenuItemDescriptor, type MenuOptions, type MenuService, Tooltip, type TooltipApi, type TooltipControllerOptions, type TooltipOptions, type TooltipService, applyPlotOverlayTokens, applyThemeTokens, dialogController, drawerController, ensureUIHost, iconEl, injectStyles, menuController, nextUid, runMachine, tooltipController, withAlpha };

package/dist/ui.d.ts

@@ -1,4 +1,4 @@
-import { c as VelaTheme } from './options-DbQholFV.js';
+import { c as VelaTheme } from './options-XTBpbx0s.js';
 import { MachineSchema, Service, Machine } from '@zag-js/core';
 export { a as KeyBindingDescriptor, K as KeymapManager, b as KeymapOptions, R as ResolvedBinding } from './keymap-CGOz5F5f.js';
 import * as tooltip from '@zag-js/tooltip';
@@ -148,6 +148,8 @@ interface DialogControllerOptions {
     modal?: boolean;
     closeOnEscape?: boolean;
     closeOnInteractOutside?: boolean;
+    /** Element to focus on open (default: the machine's first-tabbable pick). */
+    initialFocusEl?: () => HTMLElement | null;
     onOpenChange?: (open: boolean) => void;
 }
 type DialogService = dialog.Service;
@@ -185,4 +187,64 @@ declare class Dialog {
     destroy(): void;
 }
 
-export { Dialog, type DialogApi, type DialogControllerOptions, type DialogOptions, type DialogService, type MachineHandle, Menu, type MenuApi, type MenuControllerOptions, type MenuItemDescriptor, type MenuOptions, type MenuService, Tooltip, type TooltipApi, type TooltipControllerOptions, type TooltipOptions, type TooltipService, applyPlotOverlayTokens, applyThemeTokens, dialogController, ensureUIHost, iconEl, injectStyles, menuController, nextUid, runMachine, tooltipController, withAlpha };
+interface DrawerControllerOptions {
+    closeOnEscape?: boolean;
+    /** Tap outside (on the backdrop) dismisses — default true. */
+    closeOnInteractOutside?: boolean;
+    /** Element to focus on open (default: the machine's first-tabbable pick). The view
+     *  points this at the sheet itself so opening never focuses an input — on touch
+     *  devices that would pop the on-screen keyboard over the sheet. */
+    initialFocusEl?: () => HTMLElement | null;
+    onOpenChange?: (open: boolean) => void;
+}
+type DrawerService = dialog.Service;
+type DrawerApi = dialog.Api;
+interface DrawerController {
+    machine: typeof dialog.machine;
+    props: Partial<dialog.Props>;
+    connect(service: DrawerService): DrawerApi;
+}
+declare function drawerController(opts?: DrawerControllerOptions): DrawerController;
+
+interface DrawerOptions extends DrawerControllerOptions {
+    title?: string;
+    content?: Node | ((body: HTMLElement) => void);
+    host?: HTMLElement;
+    /** Horizontal swipe across the sheet (fires on release; `'left'` = the finger moved
+     *  left). Gestures that start inside a horizontally scrollable strip (tabs, chip
+     *  rows) keep their native scroll instead. */
+    onSwipe?: (dir: 'left' | 'right') => void;
+}
+declare class Drawer {
+    /** Caller-owned content area — append your rows/lists here. */
+    readonly body: HTMLElement;
+    private readonly backdrop;
+    private readonly positioner;
+    private readonly panel;
+    private readonly titleEl;
+    private readonly handle;
+    private readonly ctrl;
+    constructor(opts?: DrawerOptions);
+    /** 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. */
+    private scrolledAncestor;
+    /** 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. */
+    private hScrollableAncestor;
+    /**
+     * 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.
+     */
+    private wireGestures;
+    setTitle(title: string): void;
+    get open(): boolean;
+    show(): void;
+    hide(): void;
+    destroy(): void;
+}
+
+export { Dialog, type DialogApi, type DialogControllerOptions, type DialogOptions, type DialogService, Drawer, type DrawerApi, type DrawerControllerOptions, type DrawerOptions, type DrawerService, type MachineHandle, Menu, type MenuApi, type MenuControllerOptions, type MenuItemDescriptor, type MenuOptions, type MenuService, Tooltip, type TooltipApi, type TooltipControllerOptions, type TooltipOptions, type TooltipService, applyPlotOverlayTokens, applyThemeTokens, dialogController, drawerController, ensureUIHost, iconEl, injectStyles, menuController, nextUid, runMachine, tooltipController, withAlpha };

package/dist/ui.js

@@ -1,3 +1,3 @@
-export { Dialog, KeymapManager, Menu, Tooltip, applyPlotOverlayTokens, applyThemeTokens, dialogController, ensureUIHost, menuController, nextUid, normalizeProps, runMachine, spreadProps, tooltipController } from './chunk-AIW3EJUE.js';
-import './chunk-ULIX6AE2.js';
-export { iconEl, iconMarkup, injectStyles, registerIcon, svg16, svg24, withAlpha } from './chunk-EP6NDJYK.js';
+export { Dialog, Drawer, KeymapManager, Menu, Tooltip, applyPlotOverlayTokens, applyThemeTokens, dialogController, drawerController, ensureUIHost, menuController, nextUid, normalizeProps, runMachine, spreadProps, tooltipController } from './chunk-P556H6EA.js';
+import './chunk-ATPU5CI6.js';
+export { iconEl, iconMarkup, injectStyles, registerIcon, svg16, svg24, withAlpha } from './chunk-LJLZR44Y.js';