@luxalgo/vela 0.8.2 → 0.8.4

package/dist/ui.d.ts

@@ -1,4 +1,4 @@
-import { c as VelaTheme } from './options-NAUHiQEC.js';
+import { c as VelaTheme } from './options-CSXbjMM5.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,91 +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;
-
-/** 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;
-}
-
 /** One menu entry. `id` is the selection value reported to `onSelect`. */
 interface MenuItemDescriptor {
     id: string;
@@ -113,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
@@ -175,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;
@@ -189,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;
@@ -245,6 +253,17 @@ declare class Dialog {
     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;
@@ -312,6 +331,17 @@ declare class Drawer {
     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;
@@ -425,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;

package/dist/ui.js

@@ -1,3 +1,3 @@
-export { Drawer, KeymapManager, Tooltip, drawerController, tooltipController } from './chunk-27UTYE7T.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-NLDTVFOI.js';
-export { FIELD_FOCUS_CSS, FIELD_FOCUS_RING, SURFACE_CLOSE_EVENT, SURFACE_OPEN_EVENT, iconEl, iconMarkup, injectStyles, overlayScrollbarCss, registerIcon, svg16, svg24, withAlpha } from './chunk-HKNO24GD.js';
+export { Drawer, KeymapManager, Tooltip, drawerController, tooltipController } from './chunk-AUOB7A5Y.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-WY5H4S4I.js';
+export { FIELD_FOCUS_CSS, FIELD_FOCUS_RING, SURFACE_CLOSE_EVENT, SURFACE_OPEN_EVENT, iconEl, iconMarkup, injectStyles, overlayScrollbarCss, registerIcon, svg16, svg24, withAlpha } from './chunk-I2U4NZD2.js';