@luxalgo/vela 0.6.8 → 0.6.10

package/dist/ui.cjs

@@ -219,6 +219,12 @@ function registerIcon(id, svg) {
 function iconMarkup(id) {
   return registry.get(id) ?? null;
 }
+function icon(id) {
+  return registry.get(id) ?? "";
+}
+function iconAt(id, px) {
+  return icon(id).replace("<svg ", `<svg width="${px}" height="${px}" `);
+}
 function svg16(body, extra = "") {
   return `<svg viewBox="0 0 16 16" width="1em" height="1em" ${extra ? extra + " " : ""}fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round">${body}</svg>`;
 }
@@ -273,11 +279,11 @@ registerIcon(
 );
 registerIcon(
   "market-pre",
-  svg24('<path d="M12 2v8"/><path d="m4.93 10.93 1.41 1.41"/><path d="M2 18h2"/><path d="M20 18h2"/><path d="m19.07 10.93-1.41 1.41"/><path d="M22 22H2"/><path d="m16 6-4 4-4-4"/><path d="M16 18a4 4 0 0 0-8 0"/>')
+  svg24('<path d="M12 2v8"/><path d="m4.93 10.93 1.41 1.41"/><path d="M2 18h2"/><path d="M20 18h2"/><path d="m19.07 10.93-1.41 1.41"/><path d="M22 22H2"/><path d="m8 6 4-4 4 4"/><path d="M16 18a4 4 0 0 0-8 0"/>')
 );
 registerIcon(
   "market-post",
-  svg24('<path d="M12 10V2"/><path d="m4.93 10.93 1.41 1.41"/><path d="M2 18h2"/><path d="M20 18h2"/><path d="m19.07 10.93-1.41 1.41"/><path d="M22 22H2"/><path d="m16 18-4-4-4 4"/><path d="M16 6a4 4 0 0 0-8 0"/>')
+  svg24('<path d="M12 10V2"/><path d="m4.93 10.93 1.41 1.41"/><path d="M2 18h2"/><path d="M20 18h2"/><path d="m19.07 10.93-1.41 1.41"/><path d="M22 22H2"/><path d="m16 14-4 4-4-4"/><path d="M16 6a4 4 0 0 0-8 0"/>')
 );
 registerIcon("market-closed", svg24('<path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/>'));
 registerIcon(
@@ -310,6 +316,8 @@ registerIcon("folder-plus", S('<path d="M1.6 4.4a1 1 0 0 1 1-1h2.7l1.3 1.7h6.8a1
 registerIcon("folder-minus", S('<path d="M1.6 4.4a1 1 0 0 1 1-1h2.7l1.3 1.7h6.8a1 1 0 0 1 1 1v6.5a1 1 0 0 1-1 1h-10.8a1 1 0 0 1-1-1z"/><path d="M6.2 9.4h3.6"/>'));
 registerIcon("collapse", S('<path d="M3 8h10"/>'));
 registerIcon("expand", S('<rect x="2.2" y="2.2" width="11.6" height="11.6" rx="1.4"/><path d="M8 5.4v5.2M5.4 8h5.2"/>'));
+registerIcon("plus", S('<path d="M8 2.8v10.4M2.8 8h10.4"/>'));
+registerIcon("minus", S('<path d="M2.8 8h10.4"/>'));
 registerIcon("maximize", S('<path d="M2.5 6V3a.5.5 0 0 1 .5-.5h3M10 2.5h3a.5.5 0 0 1 .5.5v3M13.5 10v3a.5.5 0 0 1-.5.5h-3M6 13.5H3a.5.5 0 0 1-.5-.5v-3"/>'));
 registerIcon("restore", S('<path d="M6.2 2.5v3.7H2.5M9.8 13.5V9.8h3.7M13.5 6.2H9.8V2.5M2.5 9.8h3.7v3.7"/>'));
 registerIcon("star", S('<path d="M8 2.2l1.75 3.55 3.9.55-2.8 2.75.65 3.9L8 11.1l-3.5 1.85.65-3.9-2.8-2.75 3.9-.55z"/>'));
@@ -317,7 +325,7 @@ registerIcon("star-filled", S('<path d="M8 2.2l1.75 3.55 3.9.55-2.8 2.75.65 3.9L
 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("reset", S('<path d="M2 8a6 6 0 1 0 6-6 6.5 6.5 0 0 0-4.5 1.83L2 5.33"/><path d="M2 2v3.33h3.33"/>'));
 registerIcon("pane-collapse", S('<path d="M2.6 9.4h4v4M13.4 6.6h-4v-4"/><path d="m9.4 6.6 4.2-4.2M2.4 13.6l4.2-4.2"/>'));
 registerIcon("pane-expand", S('<path d="M9.8 2.4h3.8v3.8M6.2 13.6H2.4V9.8"/><path d="m13.6 2.4-4.4 4.4M2.4 13.6l4.4-4.4"/>'));
 registerIcon("cursor", svg24('<path d="M5 3l6 16 2-6 6-2z"/>', 'fill="currentColor" stroke="none"'));
@@ -2358,12 +2366,12 @@ var NumberInput = class {
   buildSteppers(doc, applyDir) {
     const steps = doc.createElement("div");
     steps.className = "vela-num-step";
-    const mk = (dir, icon, label) => {
+    const mk = (dir, icon2, label) => {
       const b = doc.createElement("button");
       b.type = "button";
       b.tabIndex = -1;
       b.setAttribute("aria-label", label);
-      b.appendChild(iconEl(icon, doc));
+      b.appendChild(iconEl(icon2, doc));
       let timer = 0;
       const apply = () => applyDir(dir);
       const stop = () => {
@@ -3396,6 +3404,196 @@ function buildFieldControl(desc) {
   return { el };
 }
 
+// src/ui/components/callout-bubble/controller.ts
+function closesPanel(item) {
+  return item.close !== false;
+}
+function calloutPanelRows(items) {
+  const rows = [];
+  for (const item of items) {
+    if (item.type === "text") {
+      rows.push({ type: "text", text: item.text });
+      continue;
+    }
+    const last = rows[rows.length - 1];
+    if (last && last.type === "buttons") last.buttons.push(item);
+    else rows.push({ type: "buttons", buttons: [item] });
+  }
+  return rows;
+}
+
+// src/ui/components/callout-bubble/styles.ts
+var CALLOUT_STYLE_ID = "vela-ui-callout-bubble";
+var CALLOUT_CSS = `
+.vela-callout {
+    display: inline-grid;
+    place-items: center;
+    border-radius: 50%;
+    flex: none;
+    line-height: 0;
+    box-sizing: border-box;
+    cursor: default;
+    user-select: none;
+    -webkit-user-select: none;
+}
+.vela-callout[role='button'] { cursor: pointer; }
+.vela-callout svg { display: block; }
+/* The deployed panel \u2014 carries the kit's elevated-card look itself (the popover
+   shell is bare positioning chrome). */
+.vela-callout-panel {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    padding: 10px 12px;
+    max-width: 280px;
+    box-sizing: border-box;
+    background: var(--vela-surface-elev);
+    border: 1px solid var(--vela-border-strong);
+    border-radius: 6px;
+    box-shadow: var(--vela-shadow);
+    color: var(--vela-fg);
+    font: var(--vela-font-size-md) var(--vela-font);
+}
+.vela-callout-title { font-weight: 600; color: var(--vela-fg-bright); }
+.vela-callout-text { color: var(--vela-fg-muted); line-height: 1.45; white-space: pre-line; }
+.vela-callout-actions { display: flex; flex-wrap: wrap; gap: 8px; }
+.vela-callout-btn {
+    cursor: pointer;
+    height: 26px;
+    padding: 0 10px;
+    border-radius: 5px;
+    border: 1px solid var(--vela-border);
+    background: transparent;
+    color: var(--vela-fg);
+    font-size: var(--vela-font-size-md);
+    font-family: inherit;
+    transition: background var(--vela-dur-fast) ease, color var(--vela-dur-fast) ease, opacity var(--vela-dur-fast) ease, border-color var(--vela-dur-fast) ease;
+}
+.vela-callout-btn:hover { background: var(--vela-hover); color: var(--vela-fg-bright); border-color: var(--vela-fg-muted); }
+.vela-callout-btn-primary { border-color: var(--vela-selected-bg); background: var(--vela-selected-bg); color: var(--vela-selected-fg); }
+.vela-callout-btn-primary:hover { background: var(--vela-selected-bg); color: var(--vela-selected-fg); opacity: 0.85; border-color: var(--vela-selected-bg); }
+`;
+
+// src/ui/components/callout-bubble/view.ts
+var CalloutBubble = class {
+  constructor(opts) {
+    this.pop = null;
+    this.spec = { icon: opts.icon, background: opts.background, label: opts.label };
+    if (opts.color !== void 0) this.spec.color = opts.color;
+    if (opts.panel !== void 0) this.spec.panel = opts.panel;
+    this.size = opts.size ?? 16;
+    this.host = opts.host;
+    this.theme = opts.theme;
+    this.boundary = opts.boundary;
+    const doc = (opts.host ?? document.body).ownerDocument;
+    injectStyles(CALLOUT_STYLE_ID, CALLOUT_CSS, doc);
+    this.el = doc.createElement("span");
+    this.el.className = "vela-callout";
+    this.el.style.width = `${this.size}px`;
+    this.el.style.height = `${this.size}px`;
+    this.el.addEventListener("click", (e) => {
+      if (!this.spec.panel) return;
+      e.stopPropagation();
+      this.toggle();
+    });
+    this.el.addEventListener("dblclick", (e) => {
+      if (this.spec.panel) e.stopPropagation();
+    });
+    this.el.addEventListener("keydown", (e) => {
+      if (!this.spec.panel || e.key !== "Enter" && e.key !== " ") return;
+      e.preventDefault();
+      this.toggle();
+    });
+    this.dress();
+  }
+  /** Re-dress the bubble (a status change: new icon, tint, label, panel). */
+  set(spec) {
+    this.spec = { ...this.spec, ...spec };
+    if ("panel" in spec) this.pop?.hide();
+    this.dress();
+  }
+  /** Whether the deployed panel is currently open. */
+  get open() {
+    return this.pop?.open ?? false;
+  }
+  /** Close the deployed panel, if any. The bubble itself stays. */
+  hidePanel() {
+    this.pop?.hide();
+  }
+  destroy() {
+    this.pop?.destroy();
+    this.pop = null;
+    this.el.remove();
+  }
+  dress() {
+    const clickable = this.spec.panel !== void 0;
+    this.el.style.background = this.spec.background;
+    this.el.style.color = this.spec.color ?? "";
+    this.el.innerHTML = iconAt(this.spec.icon, this.size - 4);
+    this.el.setAttribute("aria-label", this.spec.label);
+    if (clickable) {
+      this.el.setAttribute("role", "button");
+      this.el.tabIndex = 0;
+    } else {
+      this.el.removeAttribute("role");
+      this.el.removeAttribute("tabindex");
+    }
+  }
+  toggle() {
+    if (this.pop?.open) {
+      this.pop.hide();
+      return;
+    }
+    const panel = this.spec.panel;
+    if (!panel) return;
+    this.pop?.destroy();
+    this.pop = new Popover({
+      trigger: this.el,
+      gap: 6,
+      content: (body) => this.buildPanel(body, panel),
+      ...this.host ? { host: this.host } : {},
+      ...this.theme ? { theme: this.theme() } : {},
+      ...this.boundary ? { boundary: this.boundary } : {}
+    });
+    this.pop.show();
+  }
+  buildPanel(body, panel) {
+    const doc = body.ownerDocument;
+    const root = doc.createElement("div");
+    root.className = "vela-callout-panel";
+    if (panel.title) {
+      const title = doc.createElement("div");
+      title.className = "vela-callout-title";
+      title.textContent = panel.title;
+      root.appendChild(title);
+    }
+    for (const row of calloutPanelRows(panel.items)) {
+      if (row.type === "text") {
+        const text = doc.createElement("div");
+        text.className = "vela-callout-text";
+        text.textContent = row.text;
+        root.appendChild(text);
+        continue;
+      }
+      const actions = doc.createElement("div");
+      actions.className = "vela-callout-actions";
+      for (const item of row.buttons) {
+        const btn = doc.createElement("button");
+        btn.type = "button";
+        btn.className = "vela-callout-btn" + (item.primary ? " vela-callout-btn-primary" : "");
+        btn.textContent = item.label;
+        btn.addEventListener("click", () => {
+          item.run();
+          if (closesPanel(item)) this.pop?.hide();
+        });
+        actions.appendChild(btn);
+      }
+      root.appendChild(actions);
+    }
+    body.appendChild(root);
+  }
+};
+
 Object.defineProperty(exports, "normalizeProps", {
   enumerable: true,
   get: function () { return vanilla.normalizeProps; }
@@ -3404,6 +3602,9 @@ Object.defineProperty(exports, "spreadProps", {
   enumerable: true,
   get: function () { return vanilla.spreadProps; }
 });
+exports.CALLOUT_CSS = CALLOUT_CSS;
+exports.CALLOUT_STYLE_ID = CALLOUT_STYLE_ID;
+exports.CalloutBubble = CalloutBubble;
 exports.ColorField = ColorField;
 exports.Dialog = Dialog;
 exports.Drawer = Drawer;
@@ -3427,10 +3628,12 @@ exports.blendOver = blendOver;
 exports.buildColorPicker = buildColorPicker;
 exports.buildFieldControl = buildFieldControl;
 exports.buildPalette = buildPalette;
+exports.calloutPanelRows = calloutPanelRows;
 exports.clampNumber = clampNumber;
 exports.closeColorPopover = closeColorPopover;
 exports.closeOpenPopovers = closeOpenPopovers;
 exports.closeWidthPopover = closeWidthPopover;
+exports.closesPanel = closesPanel;
 exports.colorField = colorField;
 exports.colorPickerController = colorPickerController;
 exports.combineColor = combineColor;

package/dist/ui.d.cts

@@ -1,4 +1,4 @@
-import { c as VelaTheme } from './options-BaVTMXaO.cjs';
+import { c as VelaTheme } from './options-DSqHsQyN.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';
@@ -883,4 +883,93 @@ declare class GlyphSelect<T extends string | number = string | number> {
 declare function widthField(theme: VelaTheme, getVal: () => number, onVal: (v: number) => void): HTMLElement;
 declare function closeWidthPopover(): void;
 
-export { ColorField, type ColorFieldOpts, type ColorFieldShape, type ColorPickerController, type ColorPickerControllerOptions, Dialog, type DialogApi, type DialogControllerOptions, type DialogOptions, type DialogService, Drawer, type DrawerApi, type DrawerControllerOptions, type DrawerOptions, type DrawerService, FIELD_FOCUS_CSS, FIELD_FOCUS_RING, FIELD_GAP_PX, type FieldControlDesc, type FieldControlHandle, type FieldGridOptions, type FieldGridVariant, type FieldInlineItem, type FieldLabelSize, type FieldRowOptions, type FieldSectionOptions, type FieldToggleOpts, type GlyphOption, GlyphSelect, type GlyphSelectController, type GlyphSelectControllerOptions, type GlyphSelectOptions, type MachineHandle, Menu, type MenuApi, type MenuControllerOptions, type MenuItemDescriptor, type MenuOptions, type MenuService, type NumberCommit, NumberInput, type NumberInputController, type NumberInputControllerOptions, type NumberInputOptions, type NumberSize, type PlaceArgs, type PlaceResult, Popover, type PopoverAlign, type PopoverBoundary, type PopoverController, type PopoverControllerOptions, type PopoverOptions, type PopoverPosition, type Rect, Select, type SelectController, type SelectControllerOptions, type SelectListPopoverOpts, type SelectOption, type SelectOptions, type SelectSize, Switch, type SwitchController, type SwitchControllerOptions, type SwitchOptions, type SwitchSize, type SwitchTone, TextArea, type TextAreaController, type TextAreaControllerOptions, type TextAreaOptions, type TextAreaSize, TextField, type TextFieldController, type TextFieldControllerOptions, type TextFieldOptions, type TextFieldSize, Tooltip, type TooltipApi, type TooltipControllerOptions, type TooltipOptions, type TooltipService, WIDTH_FIELD_OPTIONS, applyPlotOverlayTokens, applyThemeTokens, blendOver, buildColorPicker, buildFieldControl, buildPalette, clampNumber, closeColorPopover, closeOpenPopovers, closeWidthPopover, colorField, colorPickerController, combineColor, decorateSelectScroll, dialogController, drawerController, ensureUIHost, eventDismissedPopover, fieldGrid, fieldGridColumns, fieldRow, fieldSection, fieldSeparator, fillSelectList, glyphSelectController, hslHex, iconEl, injectStyles, insetRect, intersectRects, isPopoverOpen, lineWidthGlyph, menuController, nextUid, numberInputController, openPopoverTrigger, openSelectList, overlayScrollbarCss, placePopover, popoverController, runMachine, selectController, snapToStep, splitColor, switchController, textAreaController, textFieldController, toggleSelectList, tooltipController, transparencyChecker, viewportRect, widthField, widthFieldOptions, withAlpha };
+/** One block of a deployed callout panel — plain text, or a button running a caller action. */
+type CalloutPanelItem = {
+    type: 'text';
+    text: string;
+} | {
+    type: 'button';
+    label: string;
+    /** Emphasized (selection-colored) button — the panel's main action. */
+    primary?: boolean;
+    /** Close the panel after `run` (default true — an action answers the panel). */
+    close?: boolean;
+    run(): void;
+};
+/** The deployed panel: an optional heading over ordered text/button blocks. */
+interface CalloutPanel {
+    title?: string;
+    items: CalloutPanelItem[];
+}
+/** What dresses the bubble itself (the panel is what the click deploys). */
+interface CalloutBubbleSpec {
+    /** Icon id in the icon registry (`registerIcon`), centered in the bubble. */
+    icon: string;
+    /** Bubble fill — any CSS color, token expressions included. */
+    background: string;
+    /** Icon ink (default: `currentColor` inherited from the slot). */
+    color?: string;
+    /** Accessible name. Callers typically show the same text in their own tooltip. */
+    label: string;
+    /** Deployed panel — presence makes the bubble clickable. */
+    panel?: CalloutPanel;
+}
+/** Whether activating a panel button also closes the panel (defaults to yes). */
+declare function closesPanel(item: Extract<CalloutPanelItem, {
+    type: 'button';
+}>): boolean;
+/** A panel row as the view lays it out: one text block, or a run of adjacent buttons. */
+type CalloutPanelRow = {
+    type: 'text';
+    text: string;
+} | {
+    type: 'buttons';
+    buttons: Array<Extract<CalloutPanelItem, {
+        type: 'button';
+    }>>;
+};
+/**
+ * Group a panel's ordered items into layout rows: consecutive buttons share one row
+ * (the common "text above, actions below" shape falls out naturally), text blocks
+ * stand alone. Pure — unit-tested apart from the DOM.
+ */
+declare function calloutPanelRows(items: CalloutPanelItem[]): CalloutPanelRow[];
+
+interface CalloutBubbleOptions extends CalloutBubbleSpec {
+    /** Bubble diameter in px (default 16; the icon renders 4px smaller). */
+    size?: number;
+    /** Where the deployed panel portals (default: the document body). Pass the chart
+     *  or widget root so the panel lives inside the host's DOM. */
+    host?: HTMLElement;
+    /** Live theme, for a panel deployed OUTSIDE a `.vela-ui` token host (renderer
+     *  chrome on a bare chart passes its theme getter; widget chrome may omit it). */
+    theme?: () => VelaTheme;
+    /** Panel clamp — `'viewport'` (default) flips the panel above the bubble when the
+     *  bottom screen edge is too close for it to deploy below. */
+    boundary?: PopoverBoundary;
+}
+declare class CalloutBubble {
+    readonly el: HTMLElement;
+    private spec;
+    private readonly size;
+    private readonly host;
+    private readonly theme;
+    private readonly boundary;
+    private pop;
+    constructor(opts: CalloutBubbleOptions);
+    /** Re-dress the bubble (a status change: new icon, tint, label, panel). */
+    set(spec: Partial<CalloutBubbleSpec>): void;
+    /** Whether the deployed panel is currently open. */
+    get open(): boolean;
+    /** Close the deployed panel, if any. The bubble itself stays. */
+    hidePanel(): void;
+    destroy(): void;
+    private dress;
+    private toggle;
+    private buildPanel;
+}
+
+declare const CALLOUT_STYLE_ID = "vela-ui-callout-bubble";
+declare const CALLOUT_CSS = "\n.vela-callout {\n    display: inline-grid;\n    place-items: center;\n    border-radius: 50%;\n    flex: none;\n    line-height: 0;\n    box-sizing: border-box;\n    cursor: default;\n    user-select: none;\n    -webkit-user-select: none;\n}\n.vela-callout[role='button'] { cursor: pointer; }\n.vela-callout svg { display: block; }\n/* The deployed panel \u2014 carries the kit's elevated-card look itself (the popover\n   shell is bare positioning chrome). */\n.vela-callout-panel {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n    padding: 10px 12px;\n    max-width: 280px;\n    box-sizing: border-box;\n    background: var(--vela-surface-elev);\n    border: 1px solid var(--vela-border-strong);\n    border-radius: 6px;\n    box-shadow: var(--vela-shadow);\n    color: var(--vela-fg);\n    font: var(--vela-font-size-md) var(--vela-font);\n}\n.vela-callout-title { font-weight: 600; color: var(--vela-fg-bright); }\n.vela-callout-text { color: var(--vela-fg-muted); line-height: 1.45; white-space: pre-line; }\n.vela-callout-actions { display: flex; flex-wrap: wrap; gap: 8px; }\n.vela-callout-btn {\n    cursor: pointer;\n    height: 26px;\n    padding: 0 10px;\n    border-radius: 5px;\n    border: 1px solid var(--vela-border);\n    background: transparent;\n    color: var(--vela-fg);\n    font-size: var(--vela-font-size-md);\n    font-family: inherit;\n    transition: background var(--vela-dur-fast) ease, color var(--vela-dur-fast) ease, opacity var(--vela-dur-fast) ease, border-color var(--vela-dur-fast) ease;\n}\n.vela-callout-btn:hover { background: var(--vela-hover); color: var(--vela-fg-bright); border-color: var(--vela-fg-muted); }\n.vela-callout-btn-primary { border-color: var(--vela-selected-bg); background: var(--vela-selected-bg); color: var(--vela-selected-fg); }\n.vela-callout-btn-primary:hover { background: var(--vela-selected-bg); color: var(--vela-selected-fg); opacity: 0.85; border-color: var(--vela-selected-bg); }\n";
+
+export { CALLOUT_CSS, CALLOUT_STYLE_ID, CalloutBubble, type CalloutBubbleOptions, type CalloutBubbleSpec, type CalloutPanel, type CalloutPanelItem, type CalloutPanelRow, ColorField, type ColorFieldOpts, type ColorFieldShape, type ColorPickerController, type ColorPickerControllerOptions, Dialog, type DialogApi, type DialogControllerOptions, type DialogOptions, type DialogService, Drawer, type DrawerApi, type DrawerControllerOptions, type DrawerOptions, type DrawerService, FIELD_FOCUS_CSS, FIELD_FOCUS_RING, FIELD_GAP_PX, type FieldControlDesc, type FieldControlHandle, type FieldGridOptions, type FieldGridVariant, type FieldInlineItem, type FieldLabelSize, type FieldRowOptions, type FieldSectionOptions, type FieldToggleOpts, type GlyphOption, GlyphSelect, type GlyphSelectController, type GlyphSelectControllerOptions, type GlyphSelectOptions, type MachineHandle, Menu, type MenuApi, type MenuControllerOptions, type MenuItemDescriptor, type MenuOptions, type MenuService, type NumberCommit, NumberInput, type NumberInputController, type NumberInputControllerOptions, type NumberInputOptions, type NumberSize, type PlaceArgs, type PlaceResult, Popover, type PopoverAlign, type PopoverBoundary, type PopoverController, type PopoverControllerOptions, type PopoverOptions, type PopoverPosition, type Rect, Select, type SelectController, type SelectControllerOptions, type SelectListPopoverOpts, type SelectOption, type SelectOptions, type SelectSize, Switch, type SwitchController, type SwitchControllerOptions, type SwitchOptions, type SwitchSize, type SwitchTone, TextArea, type TextAreaController, type TextAreaControllerOptions, type TextAreaOptions, type TextAreaSize, TextField, type TextFieldController, type TextFieldControllerOptions, type TextFieldOptions, type TextFieldSize, Tooltip, type TooltipApi, type TooltipControllerOptions, type TooltipOptions, type TooltipService, WIDTH_FIELD_OPTIONS, applyPlotOverlayTokens, applyThemeTokens, blendOver, buildColorPicker, buildFieldControl, buildPalette, calloutPanelRows, clampNumber, closeColorPopover, closeOpenPopovers, closeWidthPopover, closesPanel, colorField, colorPickerController, combineColor, decorateSelectScroll, dialogController, drawerController, ensureUIHost, eventDismissedPopover, fieldGrid, fieldGridColumns, fieldRow, fieldSection, fieldSeparator, fillSelectList, glyphSelectController, hslHex, iconEl, injectStyles, insetRect, intersectRects, isPopoverOpen, lineWidthGlyph, menuController, nextUid, numberInputController, openPopoverTrigger, openSelectList, overlayScrollbarCss, placePopover, popoverController, runMachine, selectController, snapToStep, splitColor, switchController, textAreaController, textFieldController, toggleSelectList, tooltipController, transparencyChecker, viewportRect, widthField, widthFieldOptions, withAlpha };

package/dist/ui.d.ts

@@ -1,4 +1,4 @@
-import { c as VelaTheme } from './options-BaVTMXaO.js';
+import { c as VelaTheme } from './options-DSqHsQyN.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';
@@ -883,4 +883,93 @@ declare class GlyphSelect<T extends string | number = string | number> {
 declare function widthField(theme: VelaTheme, getVal: () => number, onVal: (v: number) => void): HTMLElement;
 declare function closeWidthPopover(): void;
 
-export { ColorField, type ColorFieldOpts, type ColorFieldShape, type ColorPickerController, type ColorPickerControllerOptions, Dialog, type DialogApi, type DialogControllerOptions, type DialogOptions, type DialogService, Drawer, type DrawerApi, type DrawerControllerOptions, type DrawerOptions, type DrawerService, FIELD_FOCUS_CSS, FIELD_FOCUS_RING, FIELD_GAP_PX, type FieldControlDesc, type FieldControlHandle, type FieldGridOptions, type FieldGridVariant, type FieldInlineItem, type FieldLabelSize, type FieldRowOptions, type FieldSectionOptions, type FieldToggleOpts, type GlyphOption, GlyphSelect, type GlyphSelectController, type GlyphSelectControllerOptions, type GlyphSelectOptions, type MachineHandle, Menu, type MenuApi, type MenuControllerOptions, type MenuItemDescriptor, type MenuOptions, type MenuService, type NumberCommit, NumberInput, type NumberInputController, type NumberInputControllerOptions, type NumberInputOptions, type NumberSize, type PlaceArgs, type PlaceResult, Popover, type PopoverAlign, type PopoverBoundary, type PopoverController, type PopoverControllerOptions, type PopoverOptions, type PopoverPosition, type Rect, Select, type SelectController, type SelectControllerOptions, type SelectListPopoverOpts, type SelectOption, type SelectOptions, type SelectSize, Switch, type SwitchController, type SwitchControllerOptions, type SwitchOptions, type SwitchSize, type SwitchTone, TextArea, type TextAreaController, type TextAreaControllerOptions, type TextAreaOptions, type TextAreaSize, TextField, type TextFieldController, type TextFieldControllerOptions, type TextFieldOptions, type TextFieldSize, Tooltip, type TooltipApi, type TooltipControllerOptions, type TooltipOptions, type TooltipService, WIDTH_FIELD_OPTIONS, applyPlotOverlayTokens, applyThemeTokens, blendOver, buildColorPicker, buildFieldControl, buildPalette, clampNumber, closeColorPopover, closeOpenPopovers, closeWidthPopover, colorField, colorPickerController, combineColor, decorateSelectScroll, dialogController, drawerController, ensureUIHost, eventDismissedPopover, fieldGrid, fieldGridColumns, fieldRow, fieldSection, fieldSeparator, fillSelectList, glyphSelectController, hslHex, iconEl, injectStyles, insetRect, intersectRects, isPopoverOpen, lineWidthGlyph, menuController, nextUid, numberInputController, openPopoverTrigger, openSelectList, overlayScrollbarCss, placePopover, popoverController, runMachine, selectController, snapToStep, splitColor, switchController, textAreaController, textFieldController, toggleSelectList, tooltipController, transparencyChecker, viewportRect, widthField, widthFieldOptions, withAlpha };
+/** One block of a deployed callout panel — plain text, or a button running a caller action. */
+type CalloutPanelItem = {
+    type: 'text';
+    text: string;
+} | {
+    type: 'button';
+    label: string;
+    /** Emphasized (selection-colored) button — the panel's main action. */
+    primary?: boolean;
+    /** Close the panel after `run` (default true — an action answers the panel). */
+    close?: boolean;
+    run(): void;
+};
+/** The deployed panel: an optional heading over ordered text/button blocks. */
+interface CalloutPanel {
+    title?: string;
+    items: CalloutPanelItem[];
+}
+/** What dresses the bubble itself (the panel is what the click deploys). */
+interface CalloutBubbleSpec {
+    /** Icon id in the icon registry (`registerIcon`), centered in the bubble. */
+    icon: string;
+    /** Bubble fill — any CSS color, token expressions included. */
+    background: string;
+    /** Icon ink (default: `currentColor` inherited from the slot). */
+    color?: string;
+    /** Accessible name. Callers typically show the same text in their own tooltip. */
+    label: string;
+    /** Deployed panel — presence makes the bubble clickable. */
+    panel?: CalloutPanel;
+}
+/** Whether activating a panel button also closes the panel (defaults to yes). */
+declare function closesPanel(item: Extract<CalloutPanelItem, {
+    type: 'button';
+}>): boolean;
+/** A panel row as the view lays it out: one text block, or a run of adjacent buttons. */
+type CalloutPanelRow = {
+    type: 'text';
+    text: string;
+} | {
+    type: 'buttons';
+    buttons: Array<Extract<CalloutPanelItem, {
+        type: 'button';
+    }>>;
+};
+/**
+ * Group a panel's ordered items into layout rows: consecutive buttons share one row
+ * (the common "text above, actions below" shape falls out naturally), text blocks
+ * stand alone. Pure — unit-tested apart from the DOM.
+ */
+declare function calloutPanelRows(items: CalloutPanelItem[]): CalloutPanelRow[];
+
+interface CalloutBubbleOptions extends CalloutBubbleSpec {
+    /** Bubble diameter in px (default 16; the icon renders 4px smaller). */
+    size?: number;
+    /** Where the deployed panel portals (default: the document body). Pass the chart
+     *  or widget root so the panel lives inside the host's DOM. */
+    host?: HTMLElement;
+    /** Live theme, for a panel deployed OUTSIDE a `.vela-ui` token host (renderer
+     *  chrome on a bare chart passes its theme getter; widget chrome may omit it). */
+    theme?: () => VelaTheme;
+    /** Panel clamp — `'viewport'` (default) flips the panel above the bubble when the
+     *  bottom screen edge is too close for it to deploy below. */
+    boundary?: PopoverBoundary;
+}
+declare class CalloutBubble {
+    readonly el: HTMLElement;
+    private spec;
+    private readonly size;
+    private readonly host;
+    private readonly theme;
+    private readonly boundary;
+    private pop;
+    constructor(opts: CalloutBubbleOptions);
+    /** Re-dress the bubble (a status change: new icon, tint, label, panel). */
+    set(spec: Partial<CalloutBubbleSpec>): void;
+    /** Whether the deployed panel is currently open. */
+    get open(): boolean;
+    /** Close the deployed panel, if any. The bubble itself stays. */
+    hidePanel(): void;
+    destroy(): void;
+    private dress;
+    private toggle;
+    private buildPanel;
+}
+
+declare const CALLOUT_STYLE_ID = "vela-ui-callout-bubble";
+declare const CALLOUT_CSS = "\n.vela-callout {\n    display: inline-grid;\n    place-items: center;\n    border-radius: 50%;\n    flex: none;\n    line-height: 0;\n    box-sizing: border-box;\n    cursor: default;\n    user-select: none;\n    -webkit-user-select: none;\n}\n.vela-callout[role='button'] { cursor: pointer; }\n.vela-callout svg { display: block; }\n/* The deployed panel \u2014 carries the kit's elevated-card look itself (the popover\n   shell is bare positioning chrome). */\n.vela-callout-panel {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n    padding: 10px 12px;\n    max-width: 280px;\n    box-sizing: border-box;\n    background: var(--vela-surface-elev);\n    border: 1px solid var(--vela-border-strong);\n    border-radius: 6px;\n    box-shadow: var(--vela-shadow);\n    color: var(--vela-fg);\n    font: var(--vela-font-size-md) var(--vela-font);\n}\n.vela-callout-title { font-weight: 600; color: var(--vela-fg-bright); }\n.vela-callout-text { color: var(--vela-fg-muted); line-height: 1.45; white-space: pre-line; }\n.vela-callout-actions { display: flex; flex-wrap: wrap; gap: 8px; }\n.vela-callout-btn {\n    cursor: pointer;\n    height: 26px;\n    padding: 0 10px;\n    border-radius: 5px;\n    border: 1px solid var(--vela-border);\n    background: transparent;\n    color: var(--vela-fg);\n    font-size: var(--vela-font-size-md);\n    font-family: inherit;\n    transition: background var(--vela-dur-fast) ease, color var(--vela-dur-fast) ease, opacity var(--vela-dur-fast) ease, border-color var(--vela-dur-fast) ease;\n}\n.vela-callout-btn:hover { background: var(--vela-hover); color: var(--vela-fg-bright); border-color: var(--vela-fg-muted); }\n.vela-callout-btn-primary { border-color: var(--vela-selected-bg); background: var(--vela-selected-bg); color: var(--vela-selected-fg); }\n.vela-callout-btn-primary:hover { background: var(--vela-selected-bg); color: var(--vela-selected-fg); opacity: 0.85; border-color: var(--vela-selected-bg); }\n";
+
+export { CALLOUT_CSS, CALLOUT_STYLE_ID, CalloutBubble, type CalloutBubbleOptions, type CalloutBubbleSpec, type CalloutPanel, type CalloutPanelItem, type CalloutPanelRow, ColorField, type ColorFieldOpts, type ColorFieldShape, type ColorPickerController, type ColorPickerControllerOptions, Dialog, type DialogApi, type DialogControllerOptions, type DialogOptions, type DialogService, Drawer, type DrawerApi, type DrawerControllerOptions, type DrawerOptions, type DrawerService, FIELD_FOCUS_CSS, FIELD_FOCUS_RING, FIELD_GAP_PX, type FieldControlDesc, type FieldControlHandle, type FieldGridOptions, type FieldGridVariant, type FieldInlineItem, type FieldLabelSize, type FieldRowOptions, type FieldSectionOptions, type FieldToggleOpts, type GlyphOption, GlyphSelect, type GlyphSelectController, type GlyphSelectControllerOptions, type GlyphSelectOptions, type MachineHandle, Menu, type MenuApi, type MenuControllerOptions, type MenuItemDescriptor, type MenuOptions, type MenuService, type NumberCommit, NumberInput, type NumberInputController, type NumberInputControllerOptions, type NumberInputOptions, type NumberSize, type PlaceArgs, type PlaceResult, Popover, type PopoverAlign, type PopoverBoundary, type PopoverController, type PopoverControllerOptions, type PopoverOptions, type PopoverPosition, type Rect, Select, type SelectController, type SelectControllerOptions, type SelectListPopoverOpts, type SelectOption, type SelectOptions, type SelectSize, Switch, type SwitchController, type SwitchControllerOptions, type SwitchOptions, type SwitchSize, type SwitchTone, TextArea, type TextAreaController, type TextAreaControllerOptions, type TextAreaOptions, type TextAreaSize, TextField, type TextFieldController, type TextFieldControllerOptions, type TextFieldOptions, type TextFieldSize, Tooltip, type TooltipApi, type TooltipControllerOptions, type TooltipOptions, type TooltipService, WIDTH_FIELD_OPTIONS, applyPlotOverlayTokens, applyThemeTokens, blendOver, buildColorPicker, buildFieldControl, buildPalette, calloutPanelRows, clampNumber, closeColorPopover, closeOpenPopovers, closeWidthPopover, closesPanel, colorField, colorPickerController, combineColor, decorateSelectScroll, dialogController, drawerController, ensureUIHost, eventDismissedPopover, fieldGrid, fieldGridColumns, fieldRow, fieldSection, fieldSeparator, fillSelectList, glyphSelectController, hslHex, iconEl, injectStyles, insetRect, intersectRects, isPopoverOpen, lineWidthGlyph, menuController, nextUid, numberInputController, openPopoverTrigger, openSelectList, overlayScrollbarCss, placePopover, popoverController, runMachine, selectController, snapToStep, splitColor, switchController, textAreaController, textFieldController, toggleSelectList, tooltipController, transparencyChecker, viewportRect, widthField, widthFieldOptions, withAlpha };

package/dist/ui.js

@@ -1,3 +1,3 @@
-export { Drawer, KeymapManager, Tooltip, drawerController, tooltipController } from './chunk-2R7BANEM.js';
-export { ColorField, Dialog, FIELD_GAP_PX, GlyphSelect, Menu, NumberInput, Popover, Select, Switch, TextArea, TextField, WIDTH_FIELD_OPTIONS, applyPlotOverlayTokens, applyThemeTokens, blendOver, buildColorPicker, buildFieldControl, buildPalette, clampNumber, closeColorPopover, closeOpenPopovers, closeWidthPopover, colorField, colorPickerController, combineColor, decorateSelectScroll, dialogController, ensureUIHost, eventDismissedPopover, fieldGrid, fieldGridColumns, fieldRow, fieldSection, fieldSeparator, fillSelectList, glyphSelectController, hslHex, insetRect, intersectRects, isPopoverOpen, lineWidthGlyph, menuController, nextUid, normalizeProps, numberInputController, openPopoverTrigger, openSelectList, placePopover, popoverController, runMachine, selectController, snapToStep, splitColor, spreadProps, switchController, textAreaController, textFieldController, toggleSelectList, transparencyChecker, viewportRect, widthField, widthFieldOptions } from './chunk-OICPLNU7.js';
-export { FIELD_FOCUS_CSS, FIELD_FOCUS_RING, iconEl, iconMarkup, injectStyles, overlayScrollbarCss, registerIcon, svg16, svg24, withAlpha } from './chunk-PN5KWFZ4.js';
+export { Drawer, KeymapManager, Tooltip, drawerController, tooltipController } from './chunk-G77Y7LK2.js';
+export { CALLOUT_CSS, CALLOUT_STYLE_ID, CalloutBubble, ColorField, Dialog, FIELD_GAP_PX, GlyphSelect, Menu, NumberInput, Popover, Select, Switch, TextArea, TextField, WIDTH_FIELD_OPTIONS, applyPlotOverlayTokens, applyThemeTokens, blendOver, buildColorPicker, buildFieldControl, buildPalette, calloutPanelRows, clampNumber, closeColorPopover, closeOpenPopovers, closeWidthPopover, closesPanel, colorField, colorPickerController, combineColor, decorateSelectScroll, dialogController, ensureUIHost, eventDismissedPopover, fieldGrid, fieldGridColumns, fieldRow, fieldSection, fieldSeparator, fillSelectList, glyphSelectController, hslHex, insetRect, intersectRects, isPopoverOpen, lineWidthGlyph, menuController, nextUid, normalizeProps, numberInputController, openPopoverTrigger, openSelectList, placePopover, popoverController, runMachine, selectController, snapToStep, splitColor, spreadProps, switchController, textAreaController, textFieldController, toggleSelectList, transparencyChecker, viewportRect, widthField, widthFieldOptions } from './chunk-MHY7MVXH.js';
+export { FIELD_FOCUS_CSS, FIELD_FOCUS_RING, iconEl, iconMarkup, injectStyles, overlayScrollbarCss, registerIcon, svg16, svg24, withAlpha } from './chunk-KG4YT3TI.js';