@luxalgo/vela 0.7.8 → 0.8.1

package/dist/ui.cjs

@@ -309,6 +309,7 @@ registerIcon("chevron-down", S('<path d="M3.5 6 8 10.5 12.5 6"/>'));
 registerIcon("chevron-up", S('<path d="M3.5 10 8 5.5 12.5 10"/>'));
 registerIcon("chevrons-right", S('<path d="m4 3.5 4.5 4.5L4 12.5"/><path d="m8.5 3.5 4.5 4.5-4.5 4.5"/>'));
 registerIcon("chevrons-left", S('<path d="M12 3.5 7.5 8l4.5 4.5"/><path d="M7.5 3.5 3 8l4.5 4.5"/>'));
+registerIcon("replay", S('<path d="M14 4.2v7.6L8.6 8z"/><path d="M7.4 4.2v7.6L2 8z"/>'));
 registerIcon("check", S('<path d="m2.8 8.4 3.4 3.4 7-7.6"/>'));
 registerIcon("close", S('<path d="m3.8 3.8 8.4 8.4M12.2 3.8l-8.4 8.4"/>'));
 registerIcon("pin", S('<path d="M5.6 2.5h4.8M6.4 2.5v3.6L4.4 8.4v.9h7.2v-.9L9.6 6.1V2.5M8 9.3v4.2"/>'));
@@ -2717,14 +2718,49 @@ function buildColorPicker(color, theme, onChange, options = {}) {
   const knob = document.createElement("div");
   knob.style.cssText = "position:absolute;top:50%;width:15px;height:15px;border-radius:50%;background:var(--vela-selected-bg);box-shadow:0 1px 3px rgba(0,0,0,0.55);transform:translate(-50%,-50%);pointer-events:none;";
   track.appendChild(knob);
-  const pctBox = document.createElement("div");
-  pctBox.style.cssText = `min-width:42px;text-align:center;font:var(--vela-font-size-md) ${theme.fontFamily};color:var(--vela-fg);border:1px solid var(--vela-border);border-radius:5px;padding:3px 4px;`;
+  const pctBox = document.createElement("input");
+  pctBox.type = "text";
+  pctBox.inputMode = "numeric";
+  pctBox.title = "Opacity (%)";
+  pctBox.style.cssText = `width:46px;box-sizing:border-box;text-align:center;font:var(--vela-font-size-md) ${theme.fontFamily};color:var(--vela-fg);background:transparent;border:1px solid var(--vela-border);border-radius:5px;padding:3px 4px;outline:none;`;
+  pctBox.addEventListener("focus", () => {
+    pctBox.style.borderColor = "var(--vela-border-strong)";
+    pctBox.select();
+  });
   opRow.append(track, pctBox);
   const paintOpacity = () => {
     track.style.background = `linear-gradient(to right, ${curHex}00, ${curHex}ff), ${CHECKER}`;
     knob.style.left = `${curAlpha * 100}%`;
-    pctBox.textContent = `${Math.round(curAlpha * 100)}%`;
+    pctBox.value = `${Math.round(curAlpha * 100)}%`;
   };
+  const commitTyped = () => {
+    pctBox.style.borderColor = "var(--vela-border)";
+    const n = parseFloat(pctBox.value.replace("%", ""));
+    if (Number.isFinite(n)) {
+      const next = Math.max(0, Math.min(100, n)) / 100;
+      if (Math.round(next * 100) !== Math.round(curAlpha * 100)) {
+        curAlpha = next;
+        paintOpacity();
+        emit();
+        return;
+      }
+    }
+    paintOpacity();
+  };
+  pctBox.addEventListener("change", commitTyped);
+  pctBox.addEventListener("blur", () => {
+    pctBox.style.borderColor = "var(--vela-border)";
+    paintOpacity();
+  });
+  pctBox.addEventListener("keydown", (e) => {
+    if (e.key === "Escape") return;
+    e.stopPropagation();
+    if (e.key === "Enter") {
+      e.preventDefault();
+      commitTyped();
+      pctBox.blur();
+    }
+  });
   let dragging = false;
   const onDrag = (clientX) => {
     const r = track.getBoundingClientRect();
@@ -3654,6 +3690,264 @@ var CalloutBubble = class {
   }
 };
 
+// src/ui/components/date-picker/controller.ts
+var MONTH_LABELS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
+var MONTH_SHORT = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+var WEEKDAY_LABELS = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
+function isoDate(d) {
+  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
+}
+function normalizeDateInput(raw) {
+  const m = /^(\d{4})-(\d{1,2})-(\d{1,2})$/.exec(raw.trim());
+  if (!m) return null;
+  const y = Number(m[1]);
+  const mo = Number(m[2]);
+  const d = Number(m[3]);
+  const dt = new Date(y, mo - 1, d);
+  if (dt.getFullYear() !== y || dt.getMonth() !== mo - 1 || dt.getDate() !== d) return null;
+  return isoDate(dt);
+}
+function parseIsoDate(raw) {
+  const iso = raw ? normalizeDateInput(raw) : null;
+  if (!iso) return null;
+  const [y, mo, d] = iso.split("-").map(Number);
+  return new Date(y, mo - 1, d);
+}
+function datePickerController(opts = {}) {
+  const today = opts.today ?? /* @__PURE__ */ new Date();
+  let selected = parseIsoDate(opts.value);
+  let year = selected?.getFullYear() ?? today.getFullYear();
+  let month = selected?.getMonth() ?? today.getMonth();
+  let panel = "date";
+  const decade = () => Math.floor(year / 10) * 10;
+  return {
+    get panel() {
+      return panel;
+    },
+    get year() {
+      return year;
+    },
+    get month() {
+      return month;
+    },
+    get value() {
+      return selected ? isoDate(selected) : null;
+    },
+    header() {
+      return {
+        month: MONTH_LABELS[month] ?? "",
+        monthVisible: panel === "date",
+        year: panel === "year" ? `${decade()}-${decade() + 9}` : String(year),
+        yearDisabled: panel === "year"
+        // in the decade panel the year reads as its title
+      };
+    },
+    navLabels() {
+      if (panel === "date") return { prev: "Previous month", next: "Next month" };
+      if (panel === "month") return { prev: "Previous year", next: "Next year" };
+      return { prev: "Previous decade", next: "Next decade" };
+    },
+    cells() {
+      const out = [];
+      if (panel === "date") {
+        const startPad = new Date(year, month, 1).getDay();
+        const days = new Date(year, month + 1, 0).getDate();
+        const todayIso = isoDate(today);
+        const selectedIso = selected ? isoDate(selected) : "";
+        for (let i = 0; i < startPad; i++) out.push({ label: "", value: "", checked: false, today: false, blank: true });
+        for (let day = 1; day <= days; day++) {
+          const iso = `${year}-${String(month + 1).padStart(2, "0")}-${String(day).padStart(2, "0")}`;
+          out.push({ label: String(day), value: iso, checked: iso === selectedIso, today: iso === todayIso });
+        }
+        return out;
+      }
+      if (panel === "month") {
+        for (let m = 0; m < 12; m++) {
+          out.push({
+            label: MONTH_SHORT[m] ?? "",
+            value: m,
+            checked: selected?.getFullYear() === year && selected.getMonth() === m,
+            today: today.getFullYear() === year && today.getMonth() === m
+          });
+        }
+        return out;
+      }
+      const d = decade();
+      for (let y = d - 1; y <= d + 10; y++) {
+        out.push({ label: String(y), value: y, checked: selected?.getFullYear() === y, today: today.getFullYear() === y, outside: y < d || y > d + 9 });
+      }
+      return out;
+    },
+    step(dir) {
+      if (panel === "date") {
+        month += dir;
+        if (month < 0) {
+          month = 11;
+          year -= 1;
+        }
+        if (month > 11) {
+          month = 0;
+          year += 1;
+        }
+      } else {
+        year += panel === "month" ? dir : dir * 10;
+      }
+    },
+    showMonths() {
+      panel = "month";
+    },
+    showYears() {
+      panel = "year";
+    },
+    choose(cell) {
+      if (cell.blank) return null;
+      if (panel === "date") {
+        selected = parseIsoDate(String(cell.value));
+        return selected ? isoDate(selected) : null;
+      }
+      if (panel === "month") {
+        month = Number(cell.value);
+        panel = "date";
+        return null;
+      }
+      year = Number(cell.value);
+      panel = "month";
+      return null;
+    },
+    setValue(value) {
+      selected = parseIsoDate(value);
+      if (selected) {
+        year = selected.getFullYear();
+        month = selected.getMonth();
+      }
+      panel = "date";
+    }
+  };
+}
+
+// src/ui/components/date-picker/styles.ts
+var DATE_PICKER_STYLE_ID = "vela-date-picker-styles";
+var DATE_PICKER_CSS = `
+.vela-date-picker{color:var(--vela-fg);font:14px var(--vela-font);user-select:none;}
+.vela-date-picker [hidden]{display:none !important;}
+.vela-date-picker-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px;}
+.vela-date-picker-title{flex:1;display:flex;align-items:center;justify-content:center;gap:2px;min-width:0;}
+.vela-date-picker-switch{border:none;background:transparent;color:var(--vela-fg-bright);font:inherit;font-weight:600;font-size:14px;padding:2px 6px;border-radius:4px;cursor:pointer;}
+.vela-date-picker-switch:not(:disabled):hover{background:var(--vela-hover);}
+.vela-date-picker-switch:disabled{cursor:default;}
+.vela-date-picker-nav{width:24px;height:24px;border:none;background:transparent;color:var(--vela-fg-muted);border-radius:4px;padding:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:14px;}
+.vela-date-picker-nav:hover{background:var(--vela-hover);color:var(--vela-fg-bright);}
+.vela-date-picker-week,.vela-date-picker-grid{display:grid;grid-template-columns:repeat(7,28px);gap:2px;}
+.vela-date-picker-week{margin-bottom:4px;color:var(--vela-fg-muted);font-size:11px;text-align:center;}
+.vela-date-picker-week span{line-height:20px;}
+.vela-date-picker-blank{width:28px;height:28px;}
+.vela-date-picker-day{width:28px;height:28px;border:none;background:transparent;color:inherit;border-radius:4px;padding:0;cursor:pointer;font:inherit;font-size:14px;}
+.vela-date-picker-day:hover{background:var(--vela-hover);}
+.vela-date-picker-day[data-checked]{background:var(--vela-hover-strong);color:var(--vela-fg-bright);}
+.vela-date-picker-day[data-today]:not([data-checked]){box-shadow:inset 0 0 0 1px var(--vela-border-strong);}
+.vela-date-picker-cells{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;width:calc(7 * 28px + 6 * 2px);}
+.vela-date-picker-cell{height:36px;border:none;background:transparent;color:inherit;border-radius:4px;padding:0 4px;cursor:pointer;font:inherit;font-size:14px;}
+.vela-date-picker-cell:hover{background:var(--vela-hover);}
+.vela-date-picker-cell[data-checked]{background:var(--vela-hover-strong);color:var(--vela-fg-bright);}
+.vela-date-picker-cell[data-today]:not([data-checked]){box-shadow:inset 0 0 0 1px var(--vela-border-strong);}
+.vela-date-picker-cell[data-outside]{opacity:0.45;}
+`;
+
+// src/ui/components/date-picker/view.ts
+var DatePicker = class {
+  constructor(opts = {}) {
+    this.opts = opts;
+    const doc = document;
+    injectStyles(DATE_PICKER_STYLE_ID, DATE_PICKER_CSS, doc);
+    this.ctrl = datePickerController(opts);
+    const button = (className) => {
+      const b = doc.createElement("button");
+      b.type = "button";
+      b.className = className;
+      return b;
+    };
+    this.prev = button("vela-date-picker-nav");
+    this.prev.append(iconEl("chevron-left", doc));
+    this.next = button("vela-date-picker-nav");
+    this.next.append(iconEl("chevron-right", doc));
+    this.monthBtn = button("vela-date-picker-switch");
+    this.monthBtn.setAttribute("aria-label", "Choose month");
+    this.yearBtn = button("vela-date-picker-switch");
+    this.yearBtn.setAttribute("aria-label", "Choose year");
+    const title = doc.createElement("div");
+    title.className = "vela-date-picker-title";
+    title.append(this.monthBtn, this.yearBtn);
+    const head = doc.createElement("div");
+    head.className = "vela-date-picker-head";
+    head.append(this.prev, title, this.next);
+    this.week = doc.createElement("div");
+    this.week.className = "vela-date-picker-week";
+    for (const d of WEEKDAY_LABELS) {
+      const cell = doc.createElement("span");
+      cell.textContent = d;
+      this.week.appendChild(cell);
+    }
+    this.grid = doc.createElement("div");
+    const on = (el, run) => el.addEventListener("click", (e) => {
+      e.stopPropagation();
+      run();
+      this.paint();
+    });
+    on(this.prev, () => this.ctrl.step(-1));
+    on(this.next, () => this.ctrl.step(1));
+    on(this.monthBtn, () => this.ctrl.showMonths());
+    on(this.yearBtn, () => this.ctrl.showYears());
+    this.el = doc.createElement("div");
+    this.el.className = "vela-date-picker";
+    this.el.append(head, this.week, this.grid);
+    this.paint();
+  }
+  get value() {
+    return this.ctrl.value;
+  }
+  /** Rewrite the selection without emitting (the calendar opens on its month). */
+  setValue(value) {
+    this.ctrl.setValue(value);
+    this.paint();
+  }
+  paint() {
+    const doc = this.el.ownerDocument;
+    const h = this.ctrl.header();
+    this.monthBtn.hidden = !h.monthVisible;
+    this.monthBtn.textContent = h.month;
+    this.yearBtn.textContent = h.year;
+    this.yearBtn.disabled = h.yearDisabled;
+    const nav = this.ctrl.navLabels();
+    this.prev.setAttribute("aria-label", nav.prev);
+    this.next.setAttribute("aria-label", nav.next);
+    const dates = this.ctrl.panel === "date";
+    this.week.hidden = !dates;
+    this.grid.className = dates ? "vela-date-picker-grid" : "vela-date-picker-cells";
+    this.grid.replaceChildren(...this.ctrl.cells().map((cell) => this.cellEl(doc, cell, dates)));
+  }
+  cellEl(doc, cell, dates) {
+    if (cell.blank) {
+      const blank = doc.createElement("span");
+      blank.className = "vela-date-picker-blank";
+      return blank;
+    }
+    const b = doc.createElement("button");
+    b.type = "button";
+    b.className = dates ? "vela-date-picker-day" : "vela-date-picker-cell";
+    b.textContent = cell.label;
+    if (cell.checked) b.dataset.checked = "1";
+    if (cell.today) b.dataset.today = "1";
+    if (cell.outside) b.dataset.outside = "1";
+    b.addEventListener("click", (e) => {
+      e.stopPropagation();
+      const picked = this.ctrl.choose(cell);
+      if (picked) this.opts.onPick?.(picked);
+      else this.paint();
+    });
+    return b;
+  }
+};
+
 Object.defineProperty(exports, "normalizeProps", {
   enumerable: true,
   get: function () { return vanilla.normalizeProps; }
@@ -3666,6 +3960,7 @@ exports.CALLOUT_CSS = CALLOUT_CSS;
 exports.CALLOUT_STYLE_ID = CALLOUT_STYLE_ID;
 exports.CalloutBubble = CalloutBubble;
 exports.ColorField = ColorField;
+exports.DatePicker = DatePicker;
 exports.Dialog = Dialog;
 exports.Drawer = Drawer;
 exports.FIELD_FOCUS_CSS = FIELD_FOCUS_CSS;
@@ -3697,6 +3992,7 @@ exports.closesPanel = closesPanel;
 exports.colorField = colorField;
 exports.colorPickerController = colorPickerController;
 exports.combineColor = combineColor;
+exports.datePickerController = datePickerController;
 exports.decorateSelectScroll = decorateSelectScroll;
 exports.dialogController = dialogController;
 exports.drawerController = drawerController;
@@ -3716,9 +4012,11 @@ exports.injectStyles = injectStyles;
 exports.insetRect = insetRect;
 exports.intersectRects = intersectRects;
 exports.isPopoverOpen = isPopoverOpen;
+exports.isoDate = isoDate;
 exports.lineWidthGlyph = lineWidthGlyph;
 exports.menuController = menuController;
 exports.nextUid = nextUid;
+exports.normalizeDateInput = normalizeDateInput;
 exports.numberInputController = numberInputController;
 exports.openPopoverTrigger = openPopoverTrigger;
 exports.openSelectList = openSelectList;

package/dist/ui.d.cts

@@ -1,4 +1,4 @@
-import { c as VelaTheme } from './options-D1AJKsn_.cjs';
+import { c as VelaTheme } from './options-BnEPUuVV.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';
@@ -998,4 +998,77 @@ declare class CalloutBubble {
 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, type ColorCommit, ColorField, type ColorFieldOpts, type ColorFieldShape, type ColorPickerController, type ColorPickerControllerOptions, type ColorPickerOptions, 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 };
+type DatePickerPanel = 'date' | 'month' | 'year';
+interface DatePickerControllerOptions {
+    /** The selected date (`YYYY-MM-DD`); the calendar opens on its month. */
+    value?: string;
+    /** "Today" for the today ring and the initial month when nothing is selected. */
+    today?: Date;
+}
+/** One cell of the current panel. `blank` cells pad the first week of a month. */
+interface DatePickerCell {
+    label: string;
+    /** The day (`YYYY-MM-DD`) on the date panel; the month index or the year otherwise. */
+    value: string | number;
+    checked: boolean;
+    today: boolean;
+    /** A padding year outside the decade on the year panel. */
+    outside?: boolean;
+    blank?: boolean;
+}
+interface DatePickerController {
+    readonly panel: DatePickerPanel;
+    readonly year: number;
+    readonly month: number;
+    readonly value: string | null;
+    /** Header text: the month switch (hidden off the date panel) and the year switch. */
+    header(): {
+        month: string;
+        monthVisible: boolean;
+        year: string;
+        yearDisabled: boolean;
+    };
+    /** What the arrows step on the current panel. */
+    navLabels(): {
+        prev: string;
+        next: string;
+    };
+    cells(): DatePickerCell[];
+    /** One month, one year or ten, depending on the panel. */
+    step(dir: 1 | -1): void;
+    showMonths(): void;
+    showYears(): void;
+    /** Activate a cell: a day returns its date (the pick); a month or year only navigates. */
+    choose(cell: DatePickerCell): string | null;
+    /** Rewrite the selection without emitting (and open on its month). */
+    setValue(value: string | null): void;
+}
+/** `YYYY-MM-DD` for a local date. */
+declare function isoDate(d: Date): string;
+/** Accept `YYYY-MM-DD` or `YYYY-M-D` and return a padded ISO date, or null if unusable. */
+declare function normalizeDateInput(raw: string): string | null;
+declare function datePickerController(opts?: DatePickerControllerOptions): DatePickerController;
+
+interface DatePickerOptions extends DatePickerControllerOptions {
+    /** A day was picked (`YYYY-MM-DD`). */
+    onPick?: (value: string) => void;
+}
+declare class DatePicker {
+    private readonly opts;
+    readonly el: HTMLDivElement;
+    private readonly ctrl;
+    private readonly prev;
+    private readonly next;
+    private readonly monthBtn;
+    private readonly yearBtn;
+    private readonly week;
+    private readonly grid;
+    constructor(opts?: DatePickerOptions);
+    get value(): string | null;
+    /** Rewrite the selection without emitting (the calendar opens on its month). */
+    setValue(value: string | null): void;
+    private paint;
+    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 };

package/dist/ui.d.ts

@@ -1,4 +1,4 @@
-import { c as VelaTheme } from './options-D1AJKsn_.js';
+import { c as VelaTheme } from './options-BnEPUuVV.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';
@@ -998,4 +998,77 @@ declare class CalloutBubble {
 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, type ColorCommit, ColorField, type ColorFieldOpts, type ColorFieldShape, type ColorPickerController, type ColorPickerControllerOptions, type ColorPickerOptions, 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 };
+type DatePickerPanel = 'date' | 'month' | 'year';
+interface DatePickerControllerOptions {
+    /** The selected date (`YYYY-MM-DD`); the calendar opens on its month. */
+    value?: string;
+    /** "Today" for the today ring and the initial month when nothing is selected. */
+    today?: Date;
+}
+/** One cell of the current panel. `blank` cells pad the first week of a month. */
+interface DatePickerCell {
+    label: string;
+    /** The day (`YYYY-MM-DD`) on the date panel; the month index or the year otherwise. */
+    value: string | number;
+    checked: boolean;
+    today: boolean;
+    /** A padding year outside the decade on the year panel. */
+    outside?: boolean;
+    blank?: boolean;
+}
+interface DatePickerController {
+    readonly panel: DatePickerPanel;
+    readonly year: number;
+    readonly month: number;
+    readonly value: string | null;
+    /** Header text: the month switch (hidden off the date panel) and the year switch. */
+    header(): {
+        month: string;
+        monthVisible: boolean;
+        year: string;
+        yearDisabled: boolean;
+    };
+    /** What the arrows step on the current panel. */
+    navLabels(): {
+        prev: string;
+        next: string;
+    };
+    cells(): DatePickerCell[];
+    /** One month, one year or ten, depending on the panel. */
+    step(dir: 1 | -1): void;
+    showMonths(): void;
+    showYears(): void;
+    /** Activate a cell: a day returns its date (the pick); a month or year only navigates. */
+    choose(cell: DatePickerCell): string | null;
+    /** Rewrite the selection without emitting (and open on its month). */
+    setValue(value: string | null): void;
+}
+/** `YYYY-MM-DD` for a local date. */
+declare function isoDate(d: Date): string;
+/** Accept `YYYY-MM-DD` or `YYYY-M-D` and return a padded ISO date, or null if unusable. */
+declare function normalizeDateInput(raw: string): string | null;
+declare function datePickerController(opts?: DatePickerControllerOptions): DatePickerController;
+
+interface DatePickerOptions extends DatePickerControllerOptions {
+    /** A day was picked (`YYYY-MM-DD`). */
+    onPick?: (value: string) => void;
+}
+declare class DatePicker {
+    private readonly opts;
+    readonly el: HTMLDivElement;
+    private readonly ctrl;
+    private readonly prev;
+    private readonly next;
+    private readonly monthBtn;
+    private readonly yearBtn;
+    private readonly week;
+    private readonly grid;
+    constructor(opts?: DatePickerOptions);
+    get value(): string | null;
+    /** Rewrite the selection without emitting (the calendar opens on its month). */
+    setValue(value: string | null): void;
+    private paint;
+    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 };

package/dist/ui.js

@@ -1,3 +1,3 @@
-export { Drawer, KeymapManager, Tooltip, drawerController, tooltipController } from './chunk-PVGWNF7V.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-WTWGEB7K.js';
-export { FIELD_FOCUS_CSS, FIELD_FOCUS_RING, iconEl, iconMarkup, injectStyles, overlayScrollbarCss, registerIcon, svg16, svg24, withAlpha } from './chunk-CAFCLMPF.js';
+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';