@luxalgo/vela 0.5.0 → 0.5.2

package/dist/{DataProvider-Dzd-Erlk.d.ts → DataProvider-DTOEXKTI.d.ts}

@@ -1,4 +1,4 @@
-import { M as MarketConfig, O as OHLCV, U as Unsubscribe } from './options-Q-576hIi.js';
+import { M as MarketConfig, O as OHLCV, U as Unsubscribe } from './options-XTBpbx0s.js';
 
 /**
  * Symbol metadata an engine may need (e.g. Pine `syminfo.*`). Free-form beyond

package/dist/{DataProvider-DKNDHpNv.d.cts → DataProvider-gnzv-dgc.d.cts}

@@ -1,4 +1,4 @@
-import { M as MarketConfig, O as OHLCV, U as Unsubscribe } from './options-Q-576hIi.cjs';
+import { M as MarketConfig, O as OHLCV, U as Unsubscribe } from './options-XTBpbx0s.cjs';
 
 /**
  * Symbol metadata an engine may need (e.g. Pine `syminfo.*`). Free-form beyond

package/dist/{chunk-KM6LHB3Y.js → chunk-ATPU5CI6.js}

@@ -1,4 +1,4 @@
-import { isDarkColor, mix, HIGHLIGHT, ACCENT_BRIGHT, ACCENT, withAlpha } from './chunk-GYD2THPV.js';
+import { isDarkColor, mix, HIGHLIGHT, ACCENT_BRIGHT, ACCENT, withAlpha } from './chunk-LJLZR44Y.js';
 
 // src/core/tokens.ts
 var STATIC_TOKENS = {
@@ -53,6 +53,11 @@ function themeTokens(t) {
     "--vela-hover-strong": wash(0.16),
     "--vela-focus": withAlpha(t.textColor, 0.5),
     "--vela-focus-soft": withAlpha(t.textColor, 0.12),
+    // Separator hover — the SAME wash the chart's pane separators paint on hover
+    // (soft full-thickness band + solid 2px center line), so DOM-drawn dividers
+    // (the workspace grid) and canvas-drawn ones read as one family.
+    "--vela-separator-hover-band": withAlpha(t.textColor, 0.1),
+    "--vela-separator-hover-line": withAlpha(t.textColor, 0.55),
     "--vela-scroll": withAlpha(t.textColor, 0.3),
     "--vela-accent": ACCENT,
     "--vela-accent-bright": ACCENT_BRIGHT,

package/dist/{chunk-7UFX5ZIG.js → chunk-B5TIKQJ5.js}

@@ -1,4 +1,4 @@
-import { svg24, NEUTRAL, BEARISH, WARNING, BULLISH, INFO, ACCENT_BRIGHT, VALID, INVALID, MARKER, ACCENT, injectStyles, iconEl } from './chunk-GYD2THPV.js';
+import { svg24, NEUTRAL, BEARISH, WARNING, BULLISH, INFO, ACCENT_BRIGHT, VALID, INVALID, MARKER, ACCENT, injectStyles, iconEl } from './chunk-LJLZR44Y.js';
 
 // src/core/native-indicators/NativeIndicator.ts
 var REGISTRY = /* @__PURE__ */ new Map();
@@ -1490,10 +1490,10 @@ function polylineHit(px, py, pts, tol) {
 }
 
 // src/core/drawings/types/FixedRangeVolumeProfile.ts
-var OUTSIDE_UP = `${BULLISH}BF`;
-var OUTSIDE_DOWN = `${BEARISH}BF`;
-var VA_UP = `${BULLISH}66`;
-var VA_DOWN = `${BEARISH}66`;
+var OUTSIDE_UP = `${BULLISH}66`;
+var OUTSIDE_DOWN = `${BEARISH}66`;
+var VA_UP = `${BULLISH}BF`;
+var VA_DOWN = `${BEARISH}BF`;
 function defaultFrvpStyle() {
   return {
     rows: 24,
@@ -1511,7 +1511,8 @@ function defaultFrvpStyle() {
     valColor: NEUTRAL,
     valStyle: "solid",
     showPoc: true,
-    pocColor: ACCENT,
+    pocColor: void 0,
+    // theme contrast ink until the user picks a color
     pocStyle: "solid",
     showDevelopingPoc: false,
     developingPocColor: ACCENT,
@@ -5647,6 +5648,52 @@ registerDrawingType({
 });
 
 // src/chart-types/registry.ts
+function normalizeSettingsRow(r) {
+  switch (r.kind) {
+    case "row":
+      return { label: r.label, toggle: r.toggle, controls: r.controls, when: r.when };
+    case "toggle": {
+      const controls = [];
+      if (r.number) controls.push({ kind: "number", ...r.number });
+      for (const c of r.colors ?? []) controls.push({ kind: "color", ...c });
+      if (r.width) controls.push({ kind: "width", ...r.width });
+      return { label: r.label, toggle: { key: r.key, defval: r.defval }, controls, when: r.when };
+    }
+    case "number":
+      return { label: r.label, controls: [{ kind: "number", key: r.key, label: r.label, defval: r.defval, min: r.min, max: r.max, step: r.step }], when: r.when };
+    case "color":
+      return { label: r.label, controls: [{ kind: "color", key: r.key, label: r.label, defval: r.defval }], when: r.when };
+    case "select":
+      return { label: r.label, controls: [{ kind: "select", key: r.key, label: r.label, options: r.options, defval: r.defval }], when: r.when };
+    case "range":
+      return {
+        label: r.label,
+        controls: [
+          { kind: "number", key: r.minKey, label: `${r.label} \u2014 min`, defval: r.defval, min: r.min, max: r.max, step: r.step, placeholder: r.placeholder },
+          { kind: "hint", text: "\u2013" },
+          { kind: "number", key: r.maxKey, label: `${r.label} \u2014 max`, defval: r.defval, min: r.min, max: r.max, step: r.step, placeholder: r.placeholder }
+        ],
+        when: r.when
+      };
+  }
+}
+function settingsRowValueKeys(r) {
+  if (r.kind === "heading" || r.kind === "header") return [];
+  const n = normalizeSettingsRow(r);
+  const keys = [];
+  if (n.toggle) keys.push({ key: n.toggle.key, type: "boolean", defval: n.toggle.defval });
+  for (const c of n.controls) {
+    if (c.kind === "hint") continue;
+    if (c.kind === "color" || c.kind === "select") keys.push({ key: c.key, type: "string", defval: c.defval });
+    else keys.push({ key: c.key, type: "number", defval: c.defval });
+  }
+  return keys;
+}
+function settingsRowVisible(when, bag) {
+  if (!when) return true;
+  const conds = Array.isArray(when) ? when : [when];
+  return conds.every((c) => c.anyOf ? c.anyOf.some((x) => x === bag[c.key]) : bag[c.key] === c.equals);
+}
 var registry = /* @__PURE__ */ new Map();
 function registerChartType(def) {
   registry.set(def.id, def);
@@ -5845,6 +5892,17 @@ var CSS = `
 }
 .vela-panel-resizer:hover::after,
 .vela-panel-resizer[data-dragging]::after { background: var(--vela-accent); }
+/* Mobile: a 280px column would crush a phone-width chart \u2014 the panel overlays the
+   chart area instead (its flex parent is position:relative), full-bleed, closed by
+   the same header \u2715. Width dragging is a pointer affordance; off on mobile. */
+[data-layout='mobile'] .vela-panel {
+    position: absolute;
+    inset: 0;
+    width: auto;
+    z-index: 25;
+    border-left: none;
+}
+[data-layout='mobile'] .vela-panel-resizer { display: none; }
 `;
 function clampPanelWidth(px, min = DEFAULT_PANEL_MIN_WIDTH, max = DEFAULT_PANEL_MAX_WIDTH) {
   const lo = Number.isFinite(min) && min > 0 ? min : DEFAULT_PANEL_MIN_WIDTH;
@@ -5973,4 +6031,4 @@ var SidePanel = class {
   }
 };
 
-export { AnchoredVwap, ArrowMark, Callout, CalloutBase, Comment, DEDEKIND_CURVATURE_OPTIONS, DEFAULT_DRAWING_COLOR, DEFAULT_PANEL_MAX_WIDTH, DEFAULT_PANEL_MIN_WIDTH, DEFAULT_PANEL_ORDER, DEFAULT_PANEL_WIDTH, DIRECTION_OPTIONS, DedekindTessellation, Drawing, FibRatios, FibSpiral, FixedRangeVolumeProfile, GANN_SQUARE_ARCS, GLYPH_OPTIONS, GannSquare, GlyphStamp, LINE_STYLE_OPTIONS, MACH_NUMBER_OPTIONS, MACH_WAVE_COUNT_OPTIONS, MachFigure, MeasureBox, Note, PatternDrawing, PositionTool, PriceLabel, PriceNote, RadialFib, RegressionChannel, STAMP_SIZE_OPTIONS, SegmentDrawing, SidePanel, Signpost, TEXT_SIZE_OPTIONS, TextLabel, chartType, chartTypes, clampPanelWidth, createDrawing, deserializeDrawing, drawingTypes, formatDuration, getDrawingType, getNativeIndicator, legendActions, legendActionsProviderFor, lineSegmentIntersection, nativeIndicatorDescriptors, nativeIndicatorTypes, registerChartType, registerDefaultEngine, registerDrawingType, registerLegendAction, registerNativeIndicator, registerRendererDefaults, registerRendererLayer, registerSidePanel, registerWidgetAction, registerWidgetAttachment, rendererDefaults, rendererLayers, resetDrawingSettings, resolveEngines, sidePanels, tickerModifierIds, unregisterChartType, unregisterDefaultEngine, unregisterLegendAction, unregisterNativeIndicator, unregisterRendererDefaults, unregisterRendererLayer, unregisterSidePanel, unregisterWidgetAction, unregisterWidgetAttachment, widgetActions, widgetAttachments };
+export { AnchoredVwap, ArrowMark, Callout, CalloutBase, Comment, DEDEKIND_CURVATURE_OPTIONS, DEFAULT_DRAWING_COLOR, DEFAULT_PANEL_MAX_WIDTH, DEFAULT_PANEL_MIN_WIDTH, DEFAULT_PANEL_ORDER, DEFAULT_PANEL_WIDTH, DIRECTION_OPTIONS, DedekindTessellation, Drawing, FibRatios, FibSpiral, FixedRangeVolumeProfile, GANN_SQUARE_ARCS, GLYPH_OPTIONS, GannSquare, GlyphStamp, LINE_STYLE_OPTIONS, MACH_NUMBER_OPTIONS, MACH_WAVE_COUNT_OPTIONS, MachFigure, MeasureBox, Note, PatternDrawing, PositionTool, PriceLabel, PriceNote, RadialFib, RegressionChannel, STAMP_SIZE_OPTIONS, SegmentDrawing, SidePanel, Signpost, TEXT_SIZE_OPTIONS, TextLabel, chartType, chartTypes, clampPanelWidth, createDrawing, deserializeDrawing, drawingTypes, formatDuration, getDrawingType, getNativeIndicator, legendActions, legendActionsProviderFor, lineSegmentIntersection, nativeIndicatorDescriptors, nativeIndicatorTypes, normalizeSettingsRow, registerChartType, registerDefaultEngine, registerDrawingType, registerLegendAction, registerNativeIndicator, registerRendererDefaults, registerRendererLayer, registerSidePanel, registerWidgetAction, registerWidgetAttachment, rendererDefaults, rendererLayers, resetDrawingSettings, resolveEngines, settingsRowValueKeys, settingsRowVisible, sidePanels, tickerModifierIds, unregisterChartType, unregisterDefaultEngine, unregisterLegendAction, unregisterNativeIndicator, unregisterRendererDefaults, unregisterRendererLayer, unregisterSidePanel, unregisterWidgetAction, unregisterWidgetAttachment, widgetActions, widgetAttachments };

package/dist/{chunk-GYD2THPV.js → chunk-LJLZR44Y.js}

@@ -106,14 +106,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"/>'));
@@ -136,6 +137,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"/>'));
@@ -156,6 +158,11 @@ registerIcon(
   "pen-lock",
   svg24('<path d="M13.8 4.2a2.1 2.1 0 0 1 3 3L8.5 15.5l-3.5 1 1-3.5Z"/><rect x="13" y="14.5" width="8" height="6" rx="1.2"/><path d="M15 14.5v-1.6a2 2 0 0 1 4 0v1.6"/>')
 );
+registerIcon(
+  "pen-sync",
+  // Pen + two stacked panes — drawing onto every linked chart at once.
+  svg24('<path d="M13.8 4.2a2.1 2.1 0 0 1 3 3L8.5 15.5l-3.5 1 1-3.5Z"/><rect x="12.5" y="13.5" width="6" height="4.8" rx="1"/><path d="M15.5 18.3v1a1 1 0 0 0 1 1h4a1 1 0 0 0 1-1v-2.8a1 1 0 0 0-1-1h-1"/>')
+);
 registerIcon("brush", svg24('<path d="M9.5 12 17 4.5a2.12 2.12 0 0 1 3 3L12.5 15"/><path d="M7 14a3 3 0 0 0-3 3c0 1.3-1.2 1.5-1.5 2 .8.9 2 1.5 3.5 1.5a3.5 3.5 0 0 0 3.5-3.5 3 3 0 0 0-2.5-3Z"/>'));
 registerIcon(
   "bucket",

package/dist/{chunk-RHIDOUFL.js → chunk-P556H6EA.js}

@@ -1,5 +1,5 @@
-import { STATIC_TOKENS, themeTokens } from './chunk-KM6LHB3Y.js';
-import { injectStyles, iconEl } from './chunk-GYD2THPV.js';
+import { STATIC_TOKENS, themeTokens } from './chunk-ATPU5CI6.js';
+import { injectStyles, iconEl } from './chunk-LJLZR44Y.js';
 import { VanillaMachine, normalizeProps, spreadProps } from '@zag-js/vanilla';
 export { normalizeProps, spreadProps } from '@zag-js/vanilla';
 import * as tooltip from '@zag-js/tooltip';
@@ -33,8 +33,8 @@ function ensureUIHost(el, theme) {
   el.classList.add("vela-ui");
   if (theme) applyThemeTokens(el, theme);
 }
-function runMachine(machine4, props, render) {
-  const m = new VanillaMachine(machine4, props);
+function runMachine(machine5, props, render) {
+  const m = new VanillaMachine(machine5, props);
   const unsub = m.subscribe(render);
   m.start();
   render(m.service);
@@ -322,10 +322,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 {
@@ -543,6 +546,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.connect(service, normalizeProps)
@@ -619,6 +623,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 = {}) {
@@ -632,6 +659,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) {
@@ -666,7 +694,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);
@@ -694,5 +733,285 @@ var Dialog = class {
     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, KeymapManager, Menu, Tooltip, applyPlotOverlayTokens, applyThemeTokens, dialogController, ensureUIHost, isEditableTarget, menuController, nextUid, runMachine, tooltipController };
+export { Dialog, Drawer, KeymapManager, Menu, Tooltip, applyPlotOverlayTokens, applyThemeTokens, dialogController, drawerController, ensureUIHost, isEditableTarget, menuController, nextUid, runMachine, tooltipController };