@luxalgo/vela 0.8.1 → 0.8.3

package/dist/ui.d.cts

@@ -1,4 +1,4 @@
-import { c as VelaTheme } from './options-BnEPUuVV.cjs';
+import { c as VelaTheme } from './options-lMUwmRwh.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';
@@ -11,77 +11,6 @@ export { normalizeProps, spreadProps } from '@zag-js/vanilla';
  *  returned unchanged so callers can pass through `transparent`, `currentColor`, etc. */
 declare function withAlpha(color: string, alpha: number): string;
 
-/** A ready-to-insert element rendering the icon (empty span when unknown). */
-declare function iconEl(id: string, doc?: Document): HTMLElement;
-
-/** Overlay scrollbar used by settings panes, dialog bodies, and similar chrome. */
-declare function overlayScrollbarCss(selector: string, width?: number): string;
-/** Focus ring shared by typeable fields (combo inputs, textareas). */
-declare const FIELD_FOCUS_CSS = "outline:none;transition:border-color .12s ease,box-shadow .12s ease;";
-declare const FIELD_FOCUS_RING = "border-color:var(--vela-focus);box-shadow:0 0 0 3px var(--vela-focus-soft);";
-/** Inject a stylesheet once per root (document or shadow root). Idempotent by id. */
-declare function injectStyles(id: string, css: string, root?: Document | ShadowRoot): void;
-
-/** Write the theme-derived custom properties onto a host element (the widget root and
- *  every floating layer — menus/tooltips portal outside the root, so layers re-apply). */
-declare function applyThemeTokens(el: HTMLElement, t: VelaTheme): void;
-/** Re-token a chart-overlay host (statusline, watermark, toast — chrome floating OVER
- *  the plot) from the LIVE plot surface: a config edit can recolor the plot background
- *  independently of the app theme (a white plot typed into settings on the dark theme),
- *  and the overlay ink must stay readable either way. `config` is the renderer's
- *  `getConfig()` snapshot; a missing/shapeless one falls back to the base app theme.
- *  Floating menus and dropdowns do NOT use this — they mount on {@link floatingLayerHost}
- *  so their surface follows the app theme alone. */
-declare function applyPlotOverlayTokens(host: HTMLElement, base: VelaTheme, config: unknown): void;
-/** Mark an element as a kit host: static token sheet + the `.vela-ui` class. */
-declare function ensureUIHost(el: HTMLElement, theme?: VelaTheme): void;
-
-interface MachineHandle<T extends MachineSchema> {
-    service: Service<T>;
-    /** Re-run the view projection now (e.g. after external DOM swaps). */
-    flush(): void;
-    stop(): void;
-}
-/** Start a machine and keep `render(service)` in sync with every transition.
- *  `render` runs once immediately (initial projection) and on each machine notification. */
-declare function runMachine<T extends MachineSchema>(machine: Machine<T>, props: Partial<T['props']> | (() => Partial<T['props']>), render: (service: Service<T>) => void): MachineHandle<T>;
-/** Unique ids for machine instances (Zag keys its DOM lookups on them). */
-declare function nextUid(prefix: string): string;
-
-interface TooltipControllerOptions {
-    placement?: tooltip.Placement;
-    /** ms before opening on hover (default 0 — the reference tooltips are instant). */
-    openDelay?: number;
-    closeDelay?: number;
-    /** Keep open while the pointer is over the content (rich tooltips). */
-    interactive?: boolean;
-    /** Share the trigger's DOM id with other machines composed on the SAME element
-     *  (each Zag machine otherwise stamps its own id — last one wins and breaks the rest). */
-    triggerId?: string;
-}
-type TooltipService = tooltip.Service;
-type TooltipApi = tooltip.Api;
-interface TooltipController {
-    machine: typeof tooltip.machine;
-    props: Partial<tooltip.Props>;
-    connect(service: TooltipService): TooltipApi;
-}
-declare function tooltipController(opts?: TooltipControllerOptions): TooltipController;
-
-interface TooltipOptions extends TooltipControllerOptions {
-    content: string | Node | (() => Node);
-    host?: HTMLElement;
-}
-declare class Tooltip {
-    private readonly positioner;
-    private readonly content;
-    private readonly handle;
-    private readonly trigger;
-    constructor(trigger: HTMLElement, opts: TooltipOptions);
-    setContent(content: string | Node | (() => Node)): void;
-    destroy(): void;
-}
-
 /** One menu entry. `id` is the selection value reported to `onSelect`. */
 interface MenuItemDescriptor {
     id: string;
@@ -99,7 +28,8 @@ interface MenuItemDescriptor {
      *  instead of the selected-row highlight, and keep the menu OPEN on selection —
      *  the shape for boolean settings living inside a dropdown. */
     toggle?: boolean;
-    /** Icon id (see the `vela/ui` icon registry) rendered before the label. */
+    /** Icon id (see the `vela/ui` icon registry) rendered before the label. A level where
+     *  any row has one gives its iconless rows an empty slot, so the labels align. */
     icon?: string;
     /** Favorite-star affordance at the row's right edge: `false` renders an outline
      *  star revealed on row hover, `true` a filled star that stays visible. Clicking
@@ -161,6 +91,13 @@ interface MenuOptions extends MenuControllerOptions {
      *  edge. Submenus inherit the mode. Dropdown menus (a trigger button opening a
      *  picker) keep the default wash. */
     checkmarks?: boolean;
+    /** Sit each row's icon in a squared badge (a 24px rounded tile with a faint fill and a soft
+     *  border) instead of a bare glyph: its glyph brightens on a hovered row, and the tile
+     *  inverts on the selected one. A
+     *  level where some rows carry an icon reserves the badge column on all its rows so
+     *  labels align; a level with no icon keeps its natural left edge. With `checkmarks`,
+     *  the mark column leads and the badge follows. Submenus inherit the mode. */
+    iconBadges?: boolean;
 }
 declare class Menu {
     private readonly root;
@@ -175,6 +112,91 @@ declare class Menu {
     destroy(): void;
 }
 
+/** A ready-to-insert element rendering the icon (empty span when unknown). */
+declare function iconEl(id: string, doc?: Document): HTMLElement;
+
+/** Overlay scrollbar used by settings panes, dialog bodies, and similar chrome. */
+declare function overlayScrollbarCss(selector: string, width?: number): string;
+/** Focus ring shared by typeable fields (combo inputs, textareas). */
+declare const FIELD_FOCUS_CSS = "outline:none;transition:border-color .12s ease,box-shadow .12s ease;";
+declare const FIELD_FOCUS_RING = "border-color:var(--vela-focus);box-shadow:0 0 0 3px var(--vela-focus-soft);";
+/** Inject a stylesheet once per root (document or shadow root). Idempotent by id. */
+declare function injectStyles(id: string, css: string, root?: Document | ShadowRoot): void;
+
+/** Write the theme-derived custom properties onto a host element (the widget root and
+ *  every floating layer — menus/tooltips portal outside the root, so layers re-apply). */
+declare function applyThemeTokens(el: HTMLElement, t: VelaTheme): void;
+/** Re-token a chart-overlay host (statusline, watermark, toast — chrome floating OVER
+ *  the plot) from the LIVE plot surface: a config edit can recolor the plot background
+ *  independently of the app theme (a white plot typed into settings on the dark theme),
+ *  and the overlay ink must stay readable either way. `config` is the renderer's
+ *  `getConfig()` snapshot; a missing/shapeless one falls back to the base app theme.
+ *  Floating menus and dropdowns do NOT use this — they mount on {@link floatingLayerHost}
+ *  so their surface follows the app theme alone. */
+declare function applyPlotOverlayTokens(host: HTMLElement, base: VelaTheme, config: unknown): void;
+/** Mark an element as a kit host: static token sheet + the `.vela-ui` class. */
+declare function ensureUIHost(el: HTMLElement, theme?: VelaTheme): void;
+
+interface MachineHandle<T extends MachineSchema> {
+    service: Service<T>;
+    /** Re-run the view projection now (e.g. after external DOM swaps). */
+    flush(): void;
+    stop(): void;
+}
+/** Start a machine and keep `render(service)` in sync with every transition.
+ *  `render` runs once immediately (initial projection) and on each machine notification. */
+declare function runMachine<T extends MachineSchema>(machine: Machine<T>, props: Partial<T['props']> | (() => Partial<T['props']>), render: (service: Service<T>) => void): MachineHandle<T>;
+/** Unique ids for machine instances (Zag keys its DOM lookups on them). */
+declare function nextUid(prefix: string): string;
+
+/** Dispatched on a surface's element once it is shown. */
+declare const SURFACE_OPEN_EVENT = "vela:surface-open";
+/** Dispatched on a surface's element as it starts to close, before it hides or leaves the DOM. */
+declare const SURFACE_CLOSE_EVENT = "vela:surface-close";
+/** What opened or closed: a menu (submenus included), a popover (select lists, color
+ *  pickers, mark cards, the layout picker), a dialog, a drawer, or a side panel. */
+type SurfaceKind = 'menu' | 'popover' | 'dialog' | 'drawer' | 'panel';
+/** The `detail` of a {@link SURFACE_OPEN_EVENT} / {@link SURFACE_CLOSE_EVENT} event. */
+interface SurfaceEventDetail {
+    kind: SurfaceKind;
+    /** The element that opened it, when there is one (a menu's button, a popover's trigger). */
+    trigger: HTMLElement | null;
+}
+
+interface TooltipControllerOptions {
+    placement?: tooltip.Placement;
+    /** ms before opening on hover (default 0 — the reference tooltips are instant). */
+    openDelay?: number;
+    closeDelay?: number;
+    /** Keep open while the pointer is over the content (rich tooltips). */
+    interactive?: boolean;
+    /** Share the trigger's DOM id with other machines composed on the SAME element
+     *  (each Zag machine otherwise stamps its own id — last one wins and breaks the rest). */
+    triggerId?: string;
+}
+type TooltipService = tooltip.Service;
+type TooltipApi = tooltip.Api;
+interface TooltipController {
+    machine: typeof tooltip.machine;
+    props: Partial<tooltip.Props>;
+    connect(service: TooltipService): TooltipApi;
+}
+declare function tooltipController(opts?: TooltipControllerOptions): TooltipController;
+
+interface TooltipOptions extends TooltipControllerOptions {
+    content: string | Node | (() => Node);
+    host?: HTMLElement;
+}
+declare class Tooltip {
+    private readonly positioner;
+    private readonly content;
+    private readonly handle;
+    private readonly trigger;
+    constructor(trigger: HTMLElement, opts: TooltipOptions);
+    setContent(content: string | Node | (() => Node)): void;
+    destroy(): void;
+}
+
 interface DialogControllerOptions {
     /** Trap focus + backdrop (default true). Non-modal = floating panel. */
     modal?: boolean;
@@ -229,6 +251,23 @@ declare class Dialog {
     private readonly handle;
     private readonly ctrl;
     constructor(opts?: DialogOptions);
+    private opener;
+    private wasOpen;
+    /** The panel and scrim's exit animation after a close; a reopen cancels it. */
+    private exit;
+    private destroyed;
+    private setShown;
+    /** Keep the just-closed dialog up through its exit animation, then hide it — or
+     *  remove it, when it was destroyed meanwhile. `spreadProps` re-applies the close
+     *  props' `hidden` only when its value changes, so lifting it keeps the panel and
+     *  scrim up until the exit ends. The positioner spans the viewport: inert, it lets
+     *  clicks through to the page while the panel animates out. */
+    private holdExit;
+    private detach;
+    /** Closing hands focus back to whatever opened it (Escape, the ✕, hide(), or a
+     *  teardown that outruns the machine's close notification). */
+    private restoreOpener;
+    private announce;
     get open(): boolean;
     show(): void;
     hide(): void;
@@ -290,6 +329,23 @@ declare class Drawer {
      */
     private wireGestures;
     setTitle(title: string): void;
+    private opener;
+    private wasOpen;
+    /** The sheet and scrim's exit animation after a close; a reopen cancels it. */
+    private exit;
+    private destroyed;
+    private setShown;
+    /** Keep the just-closed sheet up through its exit animation, then hide it — or
+     *  remove it, when it was destroyed meanwhile. `spreadProps` re-applies the close
+     *  props' `hidden` only when its value changes, so lifting it keeps the sheet and
+     *  scrim up until the exit ends. The positioner spans the host: inert, it lets
+     *  clicks through to the page while the sheet animates out. */
+    private holdExit;
+    private detach;
+    /** Closing hands focus back to whatever opened it (Escape, the ✕, hide(), or a
+     *  teardown that outruns the machine's close notification). */
+    private restoreOpener;
+    private announce;
     get open(): boolean;
     show(): void;
     hide(): void;
@@ -399,6 +455,8 @@ declare class Popover {
     private readonly fadeMs;
     /** The pending removal of a fading-out shell; a show() that reuses the shell cancels it. */
     private leaveTimer;
+    /** The shell's exit animation before it leaves the DOM; a show() that reuses the shell cancels it. */
+    private exit;
     constructor(opts: PopoverOptions);
     get open(): boolean;
     get position(): PopoverPosition;
@@ -1071,4 +1129,4 @@ declare class DatePicker {
     private cellEl;
 }
 
-export { CALLOUT_CSS, CALLOUT_STYLE_ID, CalloutBubble, type CalloutBubbleOptions, type CalloutBubbleSpec, type CalloutPanel, type CalloutPanelItem, type CalloutPanelRow, type ColorCommit, ColorField, type ColorFieldOpts, type ColorFieldShape, type ColorPickerController, type ColorPickerControllerOptions, type ColorPickerOptions, DatePicker, type DatePickerCell, type DatePickerController, type DatePickerControllerOptions, type DatePickerOptions, type DatePickerPanel, 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, datePickerController, decorateSelectScroll, dialogController, drawerController, ensureUIHost, eventDismissedPopover, fieldGrid, fieldGridColumns, fieldRow, fieldSection, fieldSeparator, fillSelectList, glyphSelectController, hslHex, iconEl, injectStyles, insetRect, intersectRects, isPopoverOpen, isoDate, lineWidthGlyph, menuController, nextUid, normalizeDateInput, numberInputController, openPopoverTrigger, openSelectList, overlayScrollbarCss, placePopover, popoverController, runMachine, selectController, snapToStep, splitColor, switchController, textAreaController, textFieldController, toggleSelectList, tooltipController, transparencyChecker, viewportRect, widthField, widthFieldOptions, withAlpha };
+export { CALLOUT_CSS, CALLOUT_STYLE_ID, CalloutBubble, type CalloutBubbleOptions, type CalloutBubbleSpec, type CalloutPanel, type CalloutPanelItem, type CalloutPanelRow, type ColorCommit, ColorField, type ColorFieldOpts, type ColorFieldShape, type ColorPickerController, type ColorPickerControllerOptions, type ColorPickerOptions, DatePicker, type DatePickerCell, type DatePickerController, type DatePickerControllerOptions, type DatePickerOptions, type DatePickerPanel, 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, SURFACE_CLOSE_EVENT, SURFACE_OPEN_EVENT, Select, type SelectController, type SelectControllerOptions, type SelectListPopoverOpts, type SelectOption, type SelectOptions, type SelectSize, type SurfaceEventDetail, type SurfaceKind, 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, datePickerController, decorateSelectScroll, dialogController, drawerController, ensureUIHost, eventDismissedPopover, fieldGrid, fieldGridColumns, fieldRow, fieldSection, fieldSeparator, fillSelectList, glyphSelectController, hslHex, iconEl, injectStyles, insetRect, intersectRects, isPopoverOpen, isoDate, lineWidthGlyph, menuController, nextUid, normalizeDateInput, 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-BnEPUuVV.js';
+import { c as VelaTheme } from './options-lMUwmRwh.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';
@@ -11,77 +11,6 @@ export { normalizeProps, spreadProps } from '@zag-js/vanilla';
  *  returned unchanged so callers can pass through `transparent`, `currentColor`, etc. */
 declare function withAlpha(color: string, alpha: number): string;
 
-/** A ready-to-insert element rendering the icon (empty span when unknown). */
-declare function iconEl(id: string, doc?: Document): HTMLElement;
-
-/** Overlay scrollbar used by settings panes, dialog bodies, and similar chrome. */
-declare function overlayScrollbarCss(selector: string, width?: number): string;
-/** Focus ring shared by typeable fields (combo inputs, textareas). */
-declare const FIELD_FOCUS_CSS = "outline:none;transition:border-color .12s ease,box-shadow .12s ease;";
-declare const FIELD_FOCUS_RING = "border-color:var(--vela-focus);box-shadow:0 0 0 3px var(--vela-focus-soft);";
-/** Inject a stylesheet once per root (document or shadow root). Idempotent by id. */
-declare function injectStyles(id: string, css: string, root?: Document | ShadowRoot): void;
-
-/** Write the theme-derived custom properties onto a host element (the widget root and
- *  every floating layer — menus/tooltips portal outside the root, so layers re-apply). */
-declare function applyThemeTokens(el: HTMLElement, t: VelaTheme): void;
-/** Re-token a chart-overlay host (statusline, watermark, toast — chrome floating OVER
- *  the plot) from the LIVE plot surface: a config edit can recolor the plot background
- *  independently of the app theme (a white plot typed into settings on the dark theme),
- *  and the overlay ink must stay readable either way. `config` is the renderer's
- *  `getConfig()` snapshot; a missing/shapeless one falls back to the base app theme.
- *  Floating menus and dropdowns do NOT use this — they mount on {@link floatingLayerHost}
- *  so their surface follows the app theme alone. */
-declare function applyPlotOverlayTokens(host: HTMLElement, base: VelaTheme, config: unknown): void;
-/** Mark an element as a kit host: static token sheet + the `.vela-ui` class. */
-declare function ensureUIHost(el: HTMLElement, theme?: VelaTheme): void;
-
-interface MachineHandle<T extends MachineSchema> {
-    service: Service<T>;
-    /** Re-run the view projection now (e.g. after external DOM swaps). */
-    flush(): void;
-    stop(): void;
-}
-/** Start a machine and keep `render(service)` in sync with every transition.
- *  `render` runs once immediately (initial projection) and on each machine notification. */
-declare function runMachine<T extends MachineSchema>(machine: Machine<T>, props: Partial<T['props']> | (() => Partial<T['props']>), render: (service: Service<T>) => void): MachineHandle<T>;
-/** Unique ids for machine instances (Zag keys its DOM lookups on them). */
-declare function nextUid(prefix: string): string;
-
-interface TooltipControllerOptions {
-    placement?: tooltip.Placement;
-    /** ms before opening on hover (default 0 — the reference tooltips are instant). */
-    openDelay?: number;
-    closeDelay?: number;
-    /** Keep open while the pointer is over the content (rich tooltips). */
-    interactive?: boolean;
-    /** Share the trigger's DOM id with other machines composed on the SAME element
-     *  (each Zag machine otherwise stamps its own id — last one wins and breaks the rest). */
-    triggerId?: string;
-}
-type TooltipService = tooltip.Service;
-type TooltipApi = tooltip.Api;
-interface TooltipController {
-    machine: typeof tooltip.machine;
-    props: Partial<tooltip.Props>;
-    connect(service: TooltipService): TooltipApi;
-}
-declare function tooltipController(opts?: TooltipControllerOptions): TooltipController;
-
-interface TooltipOptions extends TooltipControllerOptions {
-    content: string | Node | (() => Node);
-    host?: HTMLElement;
-}
-declare class Tooltip {
-    private readonly positioner;
-    private readonly content;
-    private readonly handle;
-    private readonly trigger;
-    constructor(trigger: HTMLElement, opts: TooltipOptions);
-    setContent(content: string | Node | (() => Node)): void;
-    destroy(): void;
-}
-
 /** One menu entry. `id` is the selection value reported to `onSelect`. */
 interface MenuItemDescriptor {
     id: string;
@@ -99,7 +28,8 @@ interface MenuItemDescriptor {
      *  instead of the selected-row highlight, and keep the menu OPEN on selection —
      *  the shape for boolean settings living inside a dropdown. */
     toggle?: boolean;
-    /** Icon id (see the `vela/ui` icon registry) rendered before the label. */
+    /** Icon id (see the `vela/ui` icon registry) rendered before the label. A level where
+     *  any row has one gives its iconless rows an empty slot, so the labels align. */
     icon?: string;
     /** Favorite-star affordance at the row's right edge: `false` renders an outline
      *  star revealed on row hover, `true` a filled star that stays visible. Clicking
@@ -161,6 +91,13 @@ interface MenuOptions extends MenuControllerOptions {
      *  edge. Submenus inherit the mode. Dropdown menus (a trigger button opening a
      *  picker) keep the default wash. */
     checkmarks?: boolean;
+    /** Sit each row's icon in a squared badge (a 24px rounded tile with a faint fill and a soft
+     *  border) instead of a bare glyph: its glyph brightens on a hovered row, and the tile
+     *  inverts on the selected one. A
+     *  level where some rows carry an icon reserves the badge column on all its rows so
+     *  labels align; a level with no icon keeps its natural left edge. With `checkmarks`,
+     *  the mark column leads and the badge follows. Submenus inherit the mode. */
+    iconBadges?: boolean;
 }
 declare class Menu {
     private readonly root;
@@ -175,6 +112,91 @@ declare class Menu {
     destroy(): void;
 }
 
+/** A ready-to-insert element rendering the icon (empty span when unknown). */
+declare function iconEl(id: string, doc?: Document): HTMLElement;
+
+/** Overlay scrollbar used by settings panes, dialog bodies, and similar chrome. */
+declare function overlayScrollbarCss(selector: string, width?: number): string;
+/** Focus ring shared by typeable fields (combo inputs, textareas). */
+declare const FIELD_FOCUS_CSS = "outline:none;transition:border-color .12s ease,box-shadow .12s ease;";
+declare const FIELD_FOCUS_RING = "border-color:var(--vela-focus);box-shadow:0 0 0 3px var(--vela-focus-soft);";
+/** Inject a stylesheet once per root (document or shadow root). Idempotent by id. */
+declare function injectStyles(id: string, css: string, root?: Document | ShadowRoot): void;
+
+/** Write the theme-derived custom properties onto a host element (the widget root and
+ *  every floating layer — menus/tooltips portal outside the root, so layers re-apply). */
+declare function applyThemeTokens(el: HTMLElement, t: VelaTheme): void;
+/** Re-token a chart-overlay host (statusline, watermark, toast — chrome floating OVER
+ *  the plot) from the LIVE plot surface: a config edit can recolor the plot background
+ *  independently of the app theme (a white plot typed into settings on the dark theme),
+ *  and the overlay ink must stay readable either way. `config` is the renderer's
+ *  `getConfig()` snapshot; a missing/shapeless one falls back to the base app theme.
+ *  Floating menus and dropdowns do NOT use this — they mount on {@link floatingLayerHost}
+ *  so their surface follows the app theme alone. */
+declare function applyPlotOverlayTokens(host: HTMLElement, base: VelaTheme, config: unknown): void;
+/** Mark an element as a kit host: static token sheet + the `.vela-ui` class. */
+declare function ensureUIHost(el: HTMLElement, theme?: VelaTheme): void;
+
+interface MachineHandle<T extends MachineSchema> {
+    service: Service<T>;
+    /** Re-run the view projection now (e.g. after external DOM swaps). */
+    flush(): void;
+    stop(): void;
+}
+/** Start a machine and keep `render(service)` in sync with every transition.
+ *  `render` runs once immediately (initial projection) and on each machine notification. */
+declare function runMachine<T extends MachineSchema>(machine: Machine<T>, props: Partial<T['props']> | (() => Partial<T['props']>), render: (service: Service<T>) => void): MachineHandle<T>;
+/** Unique ids for machine instances (Zag keys its DOM lookups on them). */
+declare function nextUid(prefix: string): string;
+
+/** Dispatched on a surface's element once it is shown. */
+declare const SURFACE_OPEN_EVENT = "vela:surface-open";
+/** Dispatched on a surface's element as it starts to close, before it hides or leaves the DOM. */
+declare const SURFACE_CLOSE_EVENT = "vela:surface-close";
+/** What opened or closed: a menu (submenus included), a popover (select lists, color
+ *  pickers, mark cards, the layout picker), a dialog, a drawer, or a side panel. */
+type SurfaceKind = 'menu' | 'popover' | 'dialog' | 'drawer' | 'panel';
+/** The `detail` of a {@link SURFACE_OPEN_EVENT} / {@link SURFACE_CLOSE_EVENT} event. */
+interface SurfaceEventDetail {
+    kind: SurfaceKind;
+    /** The element that opened it, when there is one (a menu's button, a popover's trigger). */
+    trigger: HTMLElement | null;
+}
+
+interface TooltipControllerOptions {
+    placement?: tooltip.Placement;
+    /** ms before opening on hover (default 0 — the reference tooltips are instant). */
+    openDelay?: number;
+    closeDelay?: number;
+    /** Keep open while the pointer is over the content (rich tooltips). */
+    interactive?: boolean;
+    /** Share the trigger's DOM id with other machines composed on the SAME element
+     *  (each Zag machine otherwise stamps its own id — last one wins and breaks the rest). */
+    triggerId?: string;
+}
+type TooltipService = tooltip.Service;
+type TooltipApi = tooltip.Api;
+interface TooltipController {
+    machine: typeof tooltip.machine;
+    props: Partial<tooltip.Props>;
+    connect(service: TooltipService): TooltipApi;
+}
+declare function tooltipController(opts?: TooltipControllerOptions): TooltipController;
+
+interface TooltipOptions extends TooltipControllerOptions {
+    content: string | Node | (() => Node);
+    host?: HTMLElement;
+}
+declare class Tooltip {
+    private readonly positioner;
+    private readonly content;
+    private readonly handle;
+    private readonly trigger;
+    constructor(trigger: HTMLElement, opts: TooltipOptions);
+    setContent(content: string | Node | (() => Node)): void;
+    destroy(): void;
+}
+
 interface DialogControllerOptions {
     /** Trap focus + backdrop (default true). Non-modal = floating panel. */
     modal?: boolean;
@@ -229,6 +251,23 @@ declare class Dialog {
     private readonly handle;
     private readonly ctrl;
     constructor(opts?: DialogOptions);
+    private opener;
+    private wasOpen;
+    /** The panel and scrim's exit animation after a close; a reopen cancels it. */
+    private exit;
+    private destroyed;
+    private setShown;
+    /** Keep the just-closed dialog up through its exit animation, then hide it — or
+     *  remove it, when it was destroyed meanwhile. `spreadProps` re-applies the close
+     *  props' `hidden` only when its value changes, so lifting it keeps the panel and
+     *  scrim up until the exit ends. The positioner spans the viewport: inert, it lets
+     *  clicks through to the page while the panel animates out. */
+    private holdExit;
+    private detach;
+    /** Closing hands focus back to whatever opened it (Escape, the ✕, hide(), or a
+     *  teardown that outruns the machine's close notification). */
+    private restoreOpener;
+    private announce;
     get open(): boolean;
     show(): void;
     hide(): void;
@@ -290,6 +329,23 @@ declare class Drawer {
      */
     private wireGestures;
     setTitle(title: string): void;
+    private opener;
+    private wasOpen;
+    /** The sheet and scrim's exit animation after a close; a reopen cancels it. */
+    private exit;
+    private destroyed;
+    private setShown;
+    /** Keep the just-closed sheet up through its exit animation, then hide it — or
+     *  remove it, when it was destroyed meanwhile. `spreadProps` re-applies the close
+     *  props' `hidden` only when its value changes, so lifting it keeps the sheet and
+     *  scrim up until the exit ends. The positioner spans the host: inert, it lets
+     *  clicks through to the page while the sheet animates out. */
+    private holdExit;
+    private detach;
+    /** Closing hands focus back to whatever opened it (Escape, the ✕, hide(), or a
+     *  teardown that outruns the machine's close notification). */
+    private restoreOpener;
+    private announce;
     get open(): boolean;
     show(): void;
     hide(): void;
@@ -399,6 +455,8 @@ declare class Popover {
     private readonly fadeMs;
     /** The pending removal of a fading-out shell; a show() that reuses the shell cancels it. */
     private leaveTimer;
+    /** The shell's exit animation before it leaves the DOM; a show() that reuses the shell cancels it. */
+    private exit;
     constructor(opts: PopoverOptions);
     get open(): boolean;
     get position(): PopoverPosition;
@@ -1071,4 +1129,4 @@ declare class DatePicker {
     private cellEl;
 }
 
-export { CALLOUT_CSS, CALLOUT_STYLE_ID, CalloutBubble, type CalloutBubbleOptions, type CalloutBubbleSpec, type CalloutPanel, type CalloutPanelItem, type CalloutPanelRow, type ColorCommit, ColorField, type ColorFieldOpts, type ColorFieldShape, type ColorPickerController, type ColorPickerControllerOptions, type ColorPickerOptions, DatePicker, type DatePickerCell, type DatePickerController, type DatePickerControllerOptions, type DatePickerOptions, type DatePickerPanel, 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, datePickerController, decorateSelectScroll, dialogController, drawerController, ensureUIHost, eventDismissedPopover, fieldGrid, fieldGridColumns, fieldRow, fieldSection, fieldSeparator, fillSelectList, glyphSelectController, hslHex, iconEl, injectStyles, insetRect, intersectRects, isPopoverOpen, isoDate, lineWidthGlyph, menuController, nextUid, normalizeDateInput, numberInputController, openPopoverTrigger, openSelectList, overlayScrollbarCss, placePopover, popoverController, runMachine, selectController, snapToStep, splitColor, switchController, textAreaController, textFieldController, toggleSelectList, tooltipController, transparencyChecker, viewportRect, widthField, widthFieldOptions, withAlpha };
+export { CALLOUT_CSS, CALLOUT_STYLE_ID, CalloutBubble, type CalloutBubbleOptions, type CalloutBubbleSpec, type CalloutPanel, type CalloutPanelItem, type CalloutPanelRow, type ColorCommit, ColorField, type ColorFieldOpts, type ColorFieldShape, type ColorPickerController, type ColorPickerControllerOptions, type ColorPickerOptions, DatePicker, type DatePickerCell, type DatePickerController, type DatePickerControllerOptions, type DatePickerOptions, type DatePickerPanel, 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, SURFACE_CLOSE_EVENT, SURFACE_OPEN_EVENT, Select, type SelectController, type SelectControllerOptions, type SelectListPopoverOpts, type SelectOption, type SelectOptions, type SelectSize, type SurfaceEventDetail, type SurfaceKind, 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, datePickerController, decorateSelectScroll, dialogController, drawerController, ensureUIHost, eventDismissedPopover, fieldGrid, fieldGridColumns, fieldRow, fieldSection, fieldSeparator, fillSelectList, glyphSelectController, hslHex, iconEl, injectStyles, insetRect, intersectRects, isPopoverOpen, isoDate, lineWidthGlyph, menuController, nextUid, normalizeDateInput, 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-LMBYEGUR.js';
-export { CALLOUT_CSS, CALLOUT_STYLE_ID, CalloutBubble, ColorField, DatePicker, 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, datePickerController, decorateSelectScroll, dialogController, ensureUIHost, eventDismissedPopover, fieldGrid, fieldGridColumns, fieldRow, fieldSection, fieldSeparator, fillSelectList, glyphSelectController, hslHex, insetRect, intersectRects, isPopoverOpen, isoDate, lineWidthGlyph, menuController, nextUid, normalizeDateInput, normalizeProps, numberInputController, openPopoverTrigger, openSelectList, placePopover, popoverController, runMachine, selectController, snapToStep, splitColor, spreadProps, switchController, textAreaController, textFieldController, toggleSelectList, transparencyChecker, viewportRect, widthField, widthFieldOptions } from './chunk-NELQJCGK.js';
-export { FIELD_FOCUS_CSS, FIELD_FOCUS_RING, iconEl, iconMarkup, injectStyles, overlayScrollbarCss, registerIcon, svg16, svg24, withAlpha } from './chunk-BZQM2XO7.js';
+export { Drawer, KeymapManager, Tooltip, drawerController, tooltipController } from './chunk-TO3GIK7Z.js';
+export { CALLOUT_CSS, CALLOUT_STYLE_ID, CalloutBubble, ColorField, DatePicker, 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, datePickerController, decorateSelectScroll, dialogController, ensureUIHost, eventDismissedPopover, fieldGrid, fieldGridColumns, fieldRow, fieldSection, fieldSeparator, fillSelectList, glyphSelectController, hslHex, insetRect, intersectRects, isPopoverOpen, isoDate, lineWidthGlyph, menuController, nextUid, normalizeDateInput, normalizeProps, numberInputController, openPopoverTrigger, openSelectList, placePopover, popoverController, runMachine, selectController, snapToStep, splitColor, spreadProps, switchController, textAreaController, textFieldController, toggleSelectList, transparencyChecker, viewportRect, widthField, widthFieldOptions } from './chunk-G7B7ZCBF.js';
+export { FIELD_FOCUS_CSS, FIELD_FOCUS_RING, SURFACE_CLOSE_EVENT, SURFACE_OPEN_EVENT, iconEl, iconMarkup, injectStyles, overlayScrollbarCss, registerIcon, svg16, svg24, withAlpha } from './chunk-VHGACEHO.js';