@luxalgo/vela 0.5.2 → 0.5.4

package/dist/ui.d.ts

@@ -1,4 +1,4 @@
-import { c as VelaTheme } from './options-XTBpbx0s.js';
+import { c as VelaTheme } from './options-BlQ00Fju.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';
@@ -94,6 +94,11 @@ interface MenuItemDescriptor {
     toggle?: boolean;
     /** Icon id (see the `vela/ui` icon registry) rendered before the label. */
     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
+     *  it reports through the menu's `onFavorite` WITHOUT selecting (or closing) the
+     *  row — undefined rows carry no star at all. */
+    favorite?: boolean;
     /** Nested entries — the row becomes a submenu trigger opening its own list to the side.
      *  A branch is not selectable itself: `onSelect` only ever reports leaf ids. */
     submenu?: readonly MenuItemDescriptor[];
@@ -105,6 +110,16 @@ interface MenuControllerOptions {
         placement?: infer PL;
     } ? PL : never : never;
     onOpenChange?: (open: boolean) => void;
+    /** Pin the floating list to this rect (viewport coords). Used to keep an open
+     *  menu still when its trigger moves — starring a timeframe adds a chip and
+     *  would otherwise drag the list with the caret. `null` falls through to the
+     *  live trigger. */
+    getAnchorRect?: () => {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    } | null;
     /** Share the trigger's DOM id with other machines composed on the same element. */
     triggerId?: string;
     /** Pin the machine's own id instead of taking a fresh one. A parent registers its
@@ -129,6 +144,9 @@ interface MenuOptions extends MenuControllerOptions {
      *  compact lists like the timeframe dropdown pass something snug). Submenus keep the
      *  default. */
     minWidth?: string;
+    /** Star-toggle reports from items carrying `favorite` (the menu stays open — starring
+     *  is a side action on a row, never a selection). */
+    onFavorite?: (id: string, on: boolean) => void;
 }
 declare class Menu {
     private readonly root;
@@ -247,4 +265,367 @@ declare class Drawer {
     destroy(): void;
 }
 
-export { Dialog, type DialogApi, type DialogControllerOptions, type DialogOptions, type DialogService, Drawer, type DrawerApi, type DrawerControllerOptions, type DrawerOptions, type DrawerService, type MachineHandle, Menu, type MenuApi, type MenuControllerOptions, type MenuItemDescriptor, type MenuOptions, type MenuService, Tooltip, type TooltipApi, type TooltipControllerOptions, type TooltipOptions, type TooltipService, applyPlotOverlayTokens, applyThemeTokens, dialogController, drawerController, ensureUIHost, iconEl, injectStyles, menuController, nextUid, runMachine, tooltipController, withAlpha };
+type PopoverAlign = 'start' | 'end';
+type PopoverPosition = 'fixed' | 'absolute';
+/** Axis-aligned rectangle in viewport coordinates. */
+interface Rect {
+    left: number;
+    top: number;
+    right: number;
+    bottom: number;
+    width: number;
+    height: number;
+}
+interface PlaceArgs {
+    trigger: Rect;
+    pop: {
+        width: number;
+        height: number;
+    };
+    gap: number;
+    align: PopoverAlign;
+    /** Already-inset clamp rectangle in viewport coordinates. */
+    clamp: Rect;
+    /** Subtracted from left/top when the popover is `position:absolute` inside a host. */
+    originX: number;
+    originY: number;
+}
+interface PlaceResult {
+    left: number;
+    top: number;
+}
+/** Inset a rectangle uniformly (positive inset shrinks). */
+declare function insetRect(r: Rect, inset: number): Rect;
+/** Viewport rect with a uniform inset (the 6px air ColorField/WidthField used). */
+declare function viewportRect(width: number, height: number, inset: number): Rect;
+/** Intersection of two rects. Empty (non-positive size) if they don't overlap. */
+declare function intersectRects(a: Rect, b: Rect): Rect;
+/**
+ * Place a popover under `trigger`, flipping above when it would leave `clamp`.
+ * Prefers the side with more room when neither fully fits. `align: 'end'` right-aligns
+ * to the trigger (swatches and width fields sit at the row's right edge).
+ */
+declare function placePopover(a: PlaceArgs): PlaceResult;
+interface PopoverControllerOptions {
+    gap?: number;
+    align?: PopoverAlign;
+    matchWidth?: boolean;
+    position?: PopoverPosition;
+    boundaryInset?: number;
+    viewportInset?: number;
+    onClose?: () => void;
+}
+interface PopoverController {
+    gap: number;
+    align: PopoverAlign;
+    matchWidth: boolean;
+    position: PopoverPosition;
+    boundaryInset: number;
+    viewportInset: number;
+    onClose?: () => void;
+}
+declare function popoverController(opts?: PopoverControllerOptions): PopoverController;
+
+type PopoverBoundary = 'viewport' | HTMLElement | (() => DOMRect | null);
+interface PopoverOptions extends PopoverControllerOptions {
+    trigger: HTMLElement;
+    content?: Node | ((body: HTMLElement) => void);
+    /** Portal target. Defaults to `document.body`. Drawing chrome passes the chart host. */
+    host?: HTMLElement;
+    theme?: VelaTheme;
+    className?: string;
+    zIndex?: string | number;
+    /** Clamp rectangle. `'viewport'` (default) or an element (dialog / chart host). */
+    boundary?: PopoverBoundary;
+}
+/** Close whichever kit popover is showing (dialog teardown, a second trigger). */
+declare function closeOpenPopovers(): void;
+declare function isPopoverOpen(): boolean;
+declare function openPopoverTrigger(): HTMLElement | null;
+declare class Popover {
+    readonly el: HTMLElement;
+    readonly trigger: HTMLElement;
+    private readonly host;
+    private readonly ctrl;
+    private readonly boundary;
+    private readonly theme?;
+    private onOutside;
+    private onKey;
+    private onReflow;
+    private shown;
+    constructor(opts: PopoverOptions);
+    get open(): boolean;
+    get position(): PopoverPosition;
+    get align(): PopoverAlign;
+    show(): void;
+    hide(): void;
+    /** Show if closed, hide if this instance is the open popover. */
+    toggle(): void;
+    destroy(): void;
+    reposition(): void;
+    private clampRect;
+    private readBoundary;
+    private place;
+}
+
+type SwitchSize = 'sm' | 'md';
+/** `bright` = indicator-dialog fill (`--vela-fg-bright`); `selected` = chart-settings fill. */
+type SwitchTone = 'bright' | 'selected';
+interface SwitchControllerOptions {
+    checked?: boolean;
+    disabled?: boolean;
+    size?: SwitchSize;
+    tone?: SwitchTone;
+    onChange?: (checked: boolean) => void;
+}
+interface SwitchController {
+    checked: boolean;
+    disabled: boolean;
+    size: SwitchSize;
+    tone: SwitchTone;
+    setChecked(v: boolean): void;
+    toggle(): boolean;
+}
+declare function switchController(opts?: SwitchControllerOptions): SwitchController;
+
+interface SwitchOptions extends SwitchControllerOptions {
+    id?: string;
+}
+declare class Switch {
+    readonly el: HTMLButtonElement;
+    private readonly ctrl;
+    constructor(opts?: SwitchOptions);
+    get checked(): boolean;
+    setChecked(v: boolean): void;
+    private paint;
+}
+
+type SelectSize = 'sm' | 'md';
+interface SelectOption {
+    value: string;
+    label: string;
+}
+interface SelectControllerOptions {
+    options: readonly SelectOption[];
+    value?: string;
+    size?: SelectSize;
+    /** Stretch the trigger to its parent (indicator dialog). Chart settings hug content. */
+    fill?: boolean;
+    disabled?: boolean;
+    onChange?: (value: string, label: string) => void;
+}
+interface SelectController {
+    options: readonly SelectOption[];
+    value: string;
+    size: SelectSize;
+    fill: boolean;
+    disabled: boolean;
+    setValue(v: string): void;
+    labelOf(value: string): string;
+    pick(value: string): {
+        value: string;
+        label: string;
+    };
+}
+declare function selectController(opts: SelectControllerOptions): SelectController;
+
+interface SelectListPopoverOpts {
+    theme?: VelaTheme;
+    matchWidth?: boolean;
+    boundary?: PopoverBoundary;
+    boundaryInset?: number;
+    gap?: number;
+    align?: PopoverOptions['align'];
+    host?: HTMLElement;
+    position?: PopoverOptions['position'];
+    zIndex?: string | number;
+    size?: SelectSize;
+    onClose?: () => void;
+}
+interface SelectOptions extends SelectControllerOptions {
+    id?: string;
+    theme?: VelaTheme;
+    /** Placement for the open list (dialog-rect clamp, etc.). */
+    list?: SelectListPopoverOpts;
+}
+/** Fill `menu` with option buttons. Call {@link decorateSelectScroll} after the menu is on screen. */
+declare function fillSelectList(menu: HTMLElement, options: readonly SelectOption[], current: string, onPick: (value: string, label: string) => void): void;
+/** Overlay scrollbar + scroll-into-view — needs a laid-out list (after the popover is shown). */
+declare function decorateSelectScroll(menu: HTMLElement): void;
+/** Open (or re-click close) a themed option list under `trigger`. */
+declare function toggleSelectList(trigger: HTMLElement, options: readonly SelectOption[], current: string, onPick: (value: string, label: string) => void, opts?: SelectListPopoverOpts): Popover | null;
+declare function openSelectList(trigger: HTMLElement, options: readonly SelectOption[], current: string, onPick: (value: string, label: string) => void, opts?: SelectListPopoverOpts): Popover;
+declare class Select {
+    readonly el: HTMLElement;
+    private readonly trigger;
+    private readonly labelEl;
+    private readonly ctrl;
+    private readonly listOpts;
+    private list;
+    constructor(opts: SelectOptions);
+    get value(): string;
+    setValue(v: string): void;
+    toggle(): void;
+    destroy(): void;
+}
+
+type NumberSize = 'sm' | 'md';
+type NumberCommit = 'blur' | 'live';
+interface NumberInputControllerOptions {
+    value: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    integer?: boolean;
+    size?: NumberSize;
+    /** `blur` (indicator dialog: clamp + steppers) vs `live` (chart settings: no clamp). */
+    commit?: NumberCommit;
+    steppers?: boolean;
+    clamp?: boolean;
+    disabled?: boolean;
+    onChange?: (value: number) => void;
+}
+declare function clampNumber(n: number, opts: {
+    min?: number;
+    max?: number;
+    integer?: boolean;
+}): number;
+/** Trim binary-float noise after stepper arithmetic (`1.7 + 0.1` → `1.8`, not
+ *  `1.7999999999999998`): round to the decimals the base value and step imply. */
+declare function snapToStep(n: number, base: number, step: number): number;
+interface NumberInputController {
+    value: number;
+    min?: number;
+    max?: number;
+    step: number;
+    integer: boolean;
+    size: NumberSize;
+    commit: NumberCommit;
+    steppers: boolean;
+    clamp: boolean;
+    disabled: boolean;
+    apply(raw: number): number | null;
+    /** Write the displayed value without emitting (vela-sync / external refresh). */
+    sync(raw: number): number;
+    nudge(dir: 1 | -1): number | null;
+}
+declare function numberInputController(opts: NumberInputControllerOptions): NumberInputController;
+
+interface NumberInputOptions extends NumberInputControllerOptions {
+    id?: string;
+    title?: string;
+    /** Chart-settings placeholder mode: empty field means `emptyValue` (the default). */
+    placeholder?: string;
+    emptyValue?: number;
+    compact?: boolean;
+}
+declare class NumberInput {
+    readonly el: HTMLElement;
+    readonly input: HTMLInputElement;
+    private readonly ctrl;
+    private last;
+    private readonly placeholderMode;
+    private readonly emptyValue;
+    constructor(opts: NumberInputOptions);
+    get value(): number;
+    setValue(v: number): void;
+    private buildSteppers;
+}
+
+type TextFieldSize = 'sm' | 'md';
+interface TextFieldControllerOptions {
+    value?: string;
+    size?: TextFieldSize;
+    fill?: boolean;
+    disabled?: boolean;
+    onChange?: (value: string) => void;
+}
+interface TextFieldController {
+    value: string;
+    size: TextFieldSize;
+    fill: boolean;
+    disabled: boolean;
+    commit(next: string): string | null;
+    /** Write without emitting (external refresh). */
+    sync(next: string): void;
+}
+declare function textFieldController(opts?: TextFieldControllerOptions): TextFieldController;
+
+interface TextFieldOptions extends TextFieldControllerOptions {
+    id?: string;
+}
+declare class TextField {
+    readonly el: HTMLElement;
+    readonly input: HTMLInputElement;
+    private readonly ctrl;
+    constructor(opts?: TextFieldOptions);
+    get value(): string;
+    setValue(v: string): void;
+}
+
+/** Split a color into its `#RRGGBB` part + alpha 0..1 (handles `#RGB`, `#RRGGBB(AA)`, `rgba()`). */
+declare function splitColor(color: string): {
+    hex6: string;
+    alpha: number;
+};
+/** Combine a `#RRGGBB` + alpha into `#RRGGBB` (opaque) or `#RRGGBBAA`. */
+declare function combineColor(hex6: string, alpha: number): string;
+/** Composite `fg` over `bg` at `alpha`, returning an opaque `#rrggbb`. */
+declare function blendOver(fg: string, bg: string, alpha: number): string;
+/** HSL (h 0-360, s/l 0-100) → `#rrggbb`. */
+declare function hslHex(h: number, s: number, l: number): string;
+/** A swatch palette: a grayscale row, then hue columns × shade rows. */
+declare function buildPalette(): string[][];
+/** The alpha checkerboard laid under translucent colors. Its grays are fixed on purpose:
+ *  it stands for "nothing here", so it must not shift with the theme. */
+declare function transparencyChecker(size: number): string;
+type ColorFieldShape = 'square' | 'circle';
+interface ColorPickerControllerOptions {
+    color?: string;
+    onChange?: (value: string) => void;
+}
+interface ColorPickerController {
+    hex6: string;
+    alpha: number;
+    combined(): string;
+    setHex(hex: string): void;
+    setAlpha(a: number): void;
+}
+declare function colorPickerController(opts?: ColorPickerControllerOptions): ColorPickerController;
+
+/**
+ * A self-contained color picker: a swatch grid (grays + hue × shade), a
+ * recents row with a custom "+" picker, and an opacity slider over a transparency checker.
+ * Emits `#RRGGBB` / `#RRGGBBAA` through `onChange`.
+ */
+declare function buildColorPicker(color: string, theme: VelaTheme, onChange: (v: string) => void): HTMLElement;
+interface ColorFieldOpts {
+    shape?: ColorFieldShape;
+    theme: VelaTheme;
+    getVal: () => string;
+    onVal: (v: string) => void;
+    id?: string;
+    popover?: Pick<PopoverOptions, 'host' | 'position' | 'boundary' | 'zIndex' | 'gap' | 'align'>;
+}
+/** Closed-state swatch shape. `square` is the chart-settings field; `circle` is the
+ *  indicator-dialog preview — a square chip inset from a matching square field border. */
+declare function colorField(theme: VelaTheme, getVal: () => string, onVal: (v: string) => void, opts?: {
+    shape?: ColorFieldShape;
+    id?: string;
+    popover?: ColorFieldOpts['popover'];
+}): HTMLElement;
+declare class ColorField {
+    readonly el: HTMLButtonElement;
+    private readonly swatch;
+    private readonly getVal;
+    private readonly onVal;
+    private readonly theme;
+    private readonly popoverOpts;
+    constructor(opts: ColorFieldOpts);
+    private paint;
+    private toggle;
+}
+/** Close any open color (or other kit) popover — dialog teardown. */
+declare function closeColorPopover(): 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, 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, TextField, type TextFieldController, type TextFieldControllerOptions, type TextFieldOptions, type TextFieldSize, Tooltip, type TooltipApi, type TooltipControllerOptions, type TooltipOptions, type TooltipService, applyPlotOverlayTokens, applyThemeTokens, blendOver, buildColorPicker, buildPalette, clampNumber, closeColorPopover, closeOpenPopovers, colorField, colorPickerController, combineColor, decorateSelectScroll, dialogController, drawerController, ensureUIHost, fillSelectList, hslHex, iconEl, injectStyles, insetRect, intersectRects, isPopoverOpen, menuController, nextUid, numberInputController, openPopoverTrigger, openSelectList, placePopover, popoverController, runMachine, selectController, snapToStep, splitColor, switchController, textFieldController, toggleSelectList, tooltipController, transparencyChecker, viewportRect, withAlpha };

package/dist/ui.js

@@ -1,3 +1,3 @@
-export { Dialog, Drawer, KeymapManager, Menu, Tooltip, applyPlotOverlayTokens, applyThemeTokens, dialogController, drawerController, ensureUIHost, menuController, nextUid, normalizeProps, runMachine, spreadProps, tooltipController } from './chunk-P556H6EA.js';
-import './chunk-ATPU5CI6.js';
-export { iconEl, iconMarkup, injectStyles, registerIcon, svg16, svg24, withAlpha } from './chunk-LJLZR44Y.js';
+export { Dialog, Drawer, KeymapManager, Menu, Tooltip, dialogController, drawerController, menuController, nextUid, normalizeProps, runMachine, spreadProps, tooltipController } from './chunk-QWIEKZRE.js';
+export { ColorField, NumberInput, Popover, Select, Switch, TextField, applyPlotOverlayTokens, applyThemeTokens, blendOver, buildColorPicker, buildPalette, clampNumber, closeColorPopover, closeOpenPopovers, colorField, colorPickerController, combineColor, decorateSelectScroll, ensureUIHost, fillSelectList, hslHex, insetRect, intersectRects, isPopoverOpen, numberInputController, openPopoverTrigger, openSelectList, placePopover, popoverController, selectController, snapToStep, splitColor, switchController, textFieldController, toggleSelectList, transparencyChecker, viewportRect } from './chunk-OGRQW3M6.js';
+export { iconEl, iconMarkup, injectStyles, registerIcon, svg16, svg24, withAlpha } from './chunk-EMS6PO2T.js';