@dbcdk/react-components 0.0.10 → 0.0.13

package/dist/components/datetime-picker/DateTimePicker.js

@@ -5,7 +5,7 @@ import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'r
 import { Button } from '../../components/button/Button';
 import { Input } from '../../components/forms/input/Input';
 import { Popover } from '../../components/popover/Popover';
-import { isoFromLocalDate, isoFromLocalParts, localDateFromIso, maskRange, maskSingle, parseLooseDateOrDateTime, parseLooseRange, utcMillisFromIso, toMaskedFromDate, } from './dateTimeHelpers';
+import { compareDateOnly, dateOnlyFromLocalParts, isoFromLocalDate, isoFromLocalParts, localDateFromDateOnly, localDateFromIso, maskRange, maskSingle, parseLooseDateOrDateTime, parseLooseRange, toMaskedFromDate, } from './dateTimeHelpers';
 import styles from './DateTimePicker.module.css';
 /* ---------- Date grid helpers (UTC date-only cells) ---------- */
 const dUTC = (y, m, day) => new Date(Date.UTC(y, m, day));
@@ -15,7 +15,7 @@ const endOfMonthUTC = (utcDate) => dUTC(utcDate.getUTCFullYear(), utcDate.getUTC
 const sameDayUTC = (a, b) => a.getUTCFullYear() === b.getUTCFullYear() &&
     a.getUTCMonth() === b.getUTCMonth() &&
     a.getUTCDate() === b.getUTCDate();
-// IMPORTANT: treat local calendar date as the source of truth for the grid.
+// Treat local calendar date as the source of truth for the grid.
 // Build an equivalent "UTC date-only" for comparisons.
 const toUTCDateOnlyFromLocal = (local) => dUTC(local.getFullYear(), local.getMonth(), local.getDate());
 const startOfWeekUTC = (utcDate, weekStartsOn) => {
@@ -56,20 +56,30 @@ export const DateTimePicker = forwardRef(function DateTimePicker({ mode = 'singl
     void formatDate;
     void formatRange;
     const popRef = useRef(null);
+    // Narrowed onChange call signatures (avoids union-of-functions intersection issues)
+    const onChangeRange = onChange;
+    const onChangeIso = onChange;
+    const onChangeDateOnly = onChange;
     const todayLocal = useMemo(() => new Date(), []);
     // ---- local anchor from controlled value ----
     const initialAnchor = useMemo(() => {
-        var _a, _b;
         if (mode === 'single') {
-            if (typeof value === 'string')
-                return (_a = localDateFromIso(value)) !== null && _a !== void 0 ? _a : todayLocal;
+            if (typeof value === 'string') {
+                const d = enableTime
+                    ? localDateFromIso(value)
+                    : localDateFromDateOnly(value);
+                return d !== null && d !== void 0 ? d : todayLocal;
+            }
             return todayLocal;
         }
-        if (mode === 'range' && value && typeof value === 'object' && 'start' in value && value.start) {
-            return (_b = localDateFromIso(value.start)) !== null && _b !== void 0 ? _b : todayLocal;
+        // range: anchor from start if present
+        const v = value;
+        if (v === null || v === void 0 ? void 0 : v.start) {
+            const d = localDateFromDateOnly(v.start);
+            return d !== null && d !== void 0 ? d : todayLocal;
         }
         return todayLocal;
-    }, [mode, value, todayLocal]);
+    }, [mode, value, enableTime, todayLocal]);
     const [monthAnchor, setMonthAnchor] = useState(initialAnchor);
     useEffect(() => setMonthAnchor(initialAnchor), [initialAnchor]);
     // time defaults (local)
@@ -97,25 +107,27 @@ export const DateTimePicker = forwardRef(function DateTimePicker({ mode = 'singl
             return null;
         if (typeof value !== 'string')
             return null;
-        const d = localDateFromIso(value);
+        const d = enableTime ? localDateFromIso(value) : localDateFromDateOnly(value);
         if (!d)
             return null;
         return toUTCDateOnlyFromLocal(d);
-    }, [mode, value]);
+    }, [mode, value, enableTime]);
     const selectedUTC_start = useMemo(() => {
-        if (mode !== 'range' || !value || typeof value !== 'object' || !('start' in value))
+        if (mode !== 'range')
             return null;
-        if (!value.start)
+        const v = value;
+        if (!(v === null || v === void 0 ? void 0 : v.start))
             return null;
-        const d = localDateFromIso(value.start);
+        const d = localDateFromDateOnly(v.start);
         return d ? toUTCDateOnlyFromLocal(d) : null;
     }, [mode, value]);
     const selectedUTC_end = useMemo(() => {
-        if (mode !== 'range' || !value || typeof value !== 'object' || !('end' in value))
+        if (mode !== 'range')
             return null;
-        if (!value.end)
+        const v = value;
+        if (!(v === null || v === void 0 ? void 0 : v.end))
             return null;
-        const d = localDateFromIso(value.end);
+        const d = localDateFromDateOnly(v.end);
         return d ? toUTCDateOnlyFromLocal(d) : null;
     }, [mode, value]);
     const isDisabledUTC = useCallback((utcDay) => {
@@ -126,7 +138,7 @@ export const DateTimePicker = forwardRef(function DateTimePicker({ mode = 'singl
             return true;
         return false;
     }, [min, max]);
-    const selectDay = (utcDay) => {
+    const selectDay = useCallback((utcDay) => {
         var _a, _b;
         if (isDisabledUTC(utcDay))
             return;
@@ -135,29 +147,51 @@ export const DateTimePicker = forwardRef(function DateTimePicker({ mode = 'singl
         const m0 = utcDay.getUTCMonth();
         const d = utcDay.getUTCDate();
         if (mode === 'single') {
-            const iso = enableTime
-                ? isoFromLocalParts(y, m0, d, timeHH, timeMM)
-                : isoFromLocalParts(y, m0, d, 0, 0);
-            onChange(iso);
+            if (enableTime) {
+                const iso = isoFromLocalParts(y, m0, d, timeHH, timeMM);
+                if (!iso)
+                    return; // DST-invalid time; you may want to surface validation UI
+                onChangeIso(iso);
+            }
+            else {
+                const dateOnly = dateOnlyFromLocalParts(y, m0, d);
+                onChangeDateOnly(dateOnly);
+            }
             (_a = popRef.current) === null || _a === void 0 ? void 0 : _a.close();
             return;
         }
-        // range (date-only in UI, but emitted as ISO instants at local midnight)
-        const curr = value && typeof value === 'object' && 'start' in value
-            ? value
-            : { start: null, end: null };
-        const picked = isoFromLocalParts(y, m0, d, 0, 0);
+        // range: date-only
+        const curr = value;
+        const picked = dateOnlyFromLocalParts(y, m0, d);
         if (!curr.start || (curr.start && curr.end)) {
-            onChange({ start: picked, end: null });
+            onChangeRange({ start: picked, end: null });
             return;
         }
-        const a = utcMillisFromIso(curr.start);
-        const b = utcMillisFromIso(picked);
-        const start = a <= b ? curr.start : picked;
-        const end = a <= b ? picked : curr.start;
-        onChange({ start, end });
+        const start = compareDateOnly(curr.start, picked) <= 0 ? curr.start : picked;
+        const end = compareDateOnly(curr.start, picked) <= 0 ? picked : curr.start;
+        onChangeRange({ start, end });
         (_b = popRef.current) === null || _b === void 0 ? void 0 : _b.close();
-    };
+    }, [
+        enableTime,
+        isDisabledUTC,
+        mode,
+        onChangeDateOnly,
+        onChangeIso,
+        onChangeRange,
+        timeHH,
+        timeMM,
+        value,
+    ]);
+    function addMonthsLocal(dt, n) {
+        const y = dt.getFullYear();
+        const m = dt.getMonth();
+        return new Date(y, m + n, 1);
+    }
+    function addDaysLocal(dt, n) {
+        const d = new Date(dt);
+        d.setDate(d.getDate() + n);
+        return d;
+    }
     const gridRef = useRef(null);
     useEffect(() => {
         const el = gridRef.current;
@@ -179,33 +213,35 @@ export const DateTimePicker = forwardRef(function DateTimePicker({ mode = 'singl
             ].includes(e.key)) {
                 e.preventDefault();
             }
-            const anchor = toUTCDateOnlyFromLocal(monthAnchor);
-            const move = (days) => setMonthAnchor(prev => addDaysLocal(prev, days));
             switch (e.key) {
                 case 'ArrowLeft':
-                    move(-1);
+                    setMonthAnchor(prev => addDaysLocal(prev, -1));
                     break;
                 case 'ArrowRight':
-                    move(1);
+                    setMonthAnchor(prev => addDaysLocal(prev, 1));
                     break;
                 case 'ArrowUp':
-                    move(-7);
+                    setMonthAnchor(prev => addDaysLocal(prev, -7));
                     break;
                 case 'ArrowDown':
-                    move(7);
+                    setMonthAnchor(prev => addDaysLocal(prev, 7));
                     break;
                 case 'PageUp':
-                    setMonthAnchor(addMonthsLocal(monthAnchor, -1));
+                    setMonthAnchor(prev => addMonthsLocal(prev, -1));
                     break;
                 case 'PageDown':
-                    setMonthAnchor(addMonthsLocal(monthAnchor, 1));
+                    setMonthAnchor(prev => addMonthsLocal(prev, 1));
                     break;
-                case 'Home':
-                    setMonthAnchor(new Date(anchor.getUTCFullYear(), anchor.getUTCMonth(), 1));
+                case 'Home': {
+                    const a = toUTCDateOnlyFromLocal(monthAnchor);
+                    setMonthAnchor(new Date(a.getUTCFullYear(), a.getUTCMonth(), 1));
                     break;
-                case 'End':
-                    setMonthAnchor(new Date(anchor.getUTCFullYear(), anchor.getUTCMonth() + 1, 0));
+                }
+                case 'End': {
+                    const a = toUTCDateOnlyFromLocal(monthAnchor);
+                    setMonthAnchor(new Date(a.getUTCFullYear(), a.getUTCMonth() + 1, 0));
                     break;
+                }
             }
         };
         el.addEventListener('keydown', onKey);
@@ -218,12 +254,12 @@ export const DateTimePicker = forwardRef(function DateTimePicker({ mode = 'singl
         if (mode === 'single') {
             if (typeof value !== 'string')
                 return '';
-            const d = localDateFromIso(value);
+            const d = enableTime ? localDateFromIso(value) : localDateFromDateOnly(value);
             return d ? toMaskedFromDate(d, enableTime) : '';
         }
         const v = value;
-        const s = typeof (v === null || v === void 0 ? void 0 : v.start) === 'string' ? localDateFromIso(v.start) : null;
-        const e = typeof (v === null || v === void 0 ? void 0 : v.end) === 'string' ? localDateFromIso(v.end) : null;
+        const s = typeof (v === null || v === void 0 ? void 0 : v.start) === 'string' ? localDateFromDateOnly(v.start) : null;
+        const e = typeof (v === null || v === void 0 ? void 0 : v.end) === 'string' ? localDateFromDateOnly(v.end) : null;
         const ss = s ? toMaskedFromDate(s, false) : '';
         const ee = e ? toMaskedFromDate(e, false) : '';
         if (ss && ee)
@@ -242,10 +278,15 @@ export const DateTimePicker = forwardRef(function DateTimePicker({ mode = 'singl
     }, [formatted, dirty]);
     const commitTypedValue = useCallback(() => {
         if (!text.trim()) {
-            if (mode === 'single')
-                onChange(null);
-            else
-                onChange({ start: null, end: null });
+            if (mode === 'single') {
+                if (enableTime)
+                    onChangeIso(null);
+                else
+                    onChangeDateOnly(null);
+            }
+            else {
+                onChangeRange({ start: null, end: null });
+            }
             setDirty(false);
             return;
         }
@@ -253,41 +294,41 @@ export const DateTimePicker = forwardRef(function DateTimePicker({ mode = 'singl
             const dLocal = parseLooseDateOrDateTime(text);
             if (!dLocal)
                 return;
-            // If enableTime=false, parseLooseDateOrDateTime returns 00:00 local -> still OK.
-            onChange(isoFromLocalDate(dLocal));
+            if (enableTime) {
+                onChangeIso(isoFromLocalDate(dLocal));
+            }
+            else {
+                onChangeDateOnly(dateOnlyFromLocalParts(dLocal.getFullYear(), dLocal.getMonth(), dLocal.getDate()));
+            }
             setMonthAnchor(dLocal);
             setDirty(false);
             return;
         }
+        // range: date-only
         const r = parseLooseRange(text);
         if (r) {
-            const startIso = isoFromLocalParts(r.start.getFullYear(), r.start.getMonth(), r.start.getDate(), 0, 0);
-            const endIso = isoFromLocalParts(r.end.getFullYear(), r.end.getMonth(), r.end.getDate(), 0, 0);
-            onChange({ start: startIso, end: endIso });
+            const start = dateOnlyFromLocalParts(r.start.getFullYear(), r.start.getMonth(), r.start.getDate());
+            const end = dateOnlyFromLocalParts(r.end.getFullYear(), r.end.getMonth(), r.end.getDate());
+            onChangeRange({ start, end });
             setMonthAnchor(r.start);
             setDirty(false);
         }
-    }, [text, mode, onChange]);
+    }, [text, mode, enableTime, onChangeDateOnly, onChangeIso, onChangeRange]);
     const clear = useCallback(() => {
-        if (mode === 'single')
-            onChange(null);
-        else
-            onChange({ start: null, end: null });
+        if (mode === 'single') {
+            if (enableTime)
+                onChangeIso(null);
+            else
+                onChangeDateOnly(null);
+        }
+        else {
+            onChangeRange({ start: null, end: null });
+        }
         setDirty(false);
         setText('');
-    }, [mode, onChange]);
-    function addMonthsLocal(dt, n) {
-        const y = dt.getFullYear();
-        const m = dt.getMonth();
-        return new Date(y, m + n, 1);
-    }
-    function addDaysLocal(dt, n) {
-        const d = new Date(dt);
-        d.setDate(d.getDate() + n);
-        return d;
-    }
+    }, [mode, enableTime, onChangeDateOnly, onChangeIso, onChangeRange]);
     const fallbackPlaceholder = mode === 'single' ? 'Vælg dato' : 'Vælg interval';
-    return (_jsx(Popover, { ref: popRef, trigger: toggle => {
+    return (_jsx(Popover, { matchTriggerWidth: false, ref: popRef, trigger: toggle => {
             var _a, _b;
             return (_jsx("div", { onClick: toggle, className: styles.triggerWrap, children: _jsx(Input, { ...inputProps, autoComplete: "off", autoCorrect: "off", autoCapitalize: "off", spellCheck: "false", placeholder: (_a = inputProps === null || inputProps === void 0 ? void 0 : inputProps.placeholder) !== null && _a !== void 0 ? _a : fallbackPlaceholder, value: dirty ? text : formatted, onInput: e => {
                         setDirty(true);
@@ -307,14 +348,14 @@ export const DateTimePicker = forwardRef(function DateTimePicker({ mode = 'singl
         }, viewportPadding: 8, children: _jsxs("div", { className: cx(styles.panel, !!(presets === null || presets === void 0 ? void 0 : presets.length) && styles.panelWithPresets), children: [(presets === null || presets === void 0 ? void 0 : presets.length) ? (_jsxs("div", { className: styles.presetsCol, children: [_jsx("div", { className: styles.presetsLabel, children: "Forvalg" }), _jsxs("div", { className: styles.presetsList, children: [presets.map(p => (_jsx(Button, { variant: "outlined", size: "sm", onClick: () => {
                                         var _a;
                                         const r = p.getRange();
-                                        const startIso = isoFromLocalParts(r.start.getFullYear(), r.start.getMonth(), r.start.getDate(), 0, 0);
-                                        const endIso = isoFromLocalParts(r.end.getFullYear(), r.end.getMonth(), r.end.getDate(), 0, 0);
-                                        onChange({ start: startIso, end: endIso });
+                                        const start = dateOnlyFromLocalParts(r.start.getFullYear(), r.start.getMonth(), r.start.getDate());
+                                        const end = dateOnlyFromLocalParts(r.end.getFullYear(), r.end.getMonth(), r.end.getDate());
+                                        onChangeRange({ start, end });
                                         setDirty(false);
                                         setText(`${toMaskedFromDate(r.start, false)} – ${toMaskedFromDate(r.end, false)}`);
                                         setMonthAnchor(r.start);
                                         (_a = popRef.current) === null || _a === void 0 ? void 0 : _a.close();
-                                    }, children: p.label }, p.label))), mode === 'range' && (_jsx(Button, { variant: "danger", size: "sm", onClick: clear, icon: _jsx(X, { size: 14 }), children: "Ryd" }))] })] })) : null, _jsxs("div", { className: styles.calendarArea, children: [_jsxs("div", { className: styles.header, children: [_jsx(Button, { variant: "outlined", size: "sm", "aria-label": "Forrige m\u00E5ned", icon: _jsx(ChevronLeft, { size: 16 }), onClick: () => setMonthAnchor(addMonthsLocal(monthAnchor, -1)) }), _jsx("div", { "aria-live": "polite", className: styles.headerTitle, children: monthFmt.format(monthAnchor) }), _jsx(Button, { variant: "outlined", size: "sm", "aria-label": "N\u00E6ste m\u00E5ned", icon: _jsx(ChevronRight, { size: 16 }), onClick: () => setMonthAnchor(addMonthsLocal(monthAnchor, 1)) })] }), _jsx("div", { className: styles.weekRow, "aria-hidden": true, children: Array.from({ length: 7 }, (_, i) => (i + weekStartsOn) % 7).map(dow => (_jsx("div", { className: styles.weekCell, children: weekdayFmt.format(dUTC(2024, 8, dow + 1)).slice(0, 2) }, dow))) }), _jsx("div", { ref: gridRef, role: "grid", "aria-label": "Kalender", tabIndex: 0, className: styles.grid, onMouseLeave: () => setHoverUTC(null), children: cellsUTC.map((utcDay, idx) => {
+                                    }, children: p.label }, p.label))), mode === 'range' && (_jsx(Button, { variant: "danger", size: "sm", onClick: clear, icon: _jsx(X, { size: 14 }), children: "Ryd" }))] })] })) : null, _jsxs("div", { className: styles.calendarArea, children: [_jsxs("div", { className: styles.header, children: [_jsx(Button, { variant: "outlined", size: "sm", "aria-label": "Forrige m\u00E5ned", icon: _jsx(ChevronLeft, { size: 16 }), onClick: () => setMonthAnchor(prev => addMonthsLocal(prev, -1)) }), _jsx("div", { "aria-live": "polite", className: styles.headerTitle, children: monthFmt.format(monthAnchor) }), _jsx(Button, { variant: "outlined", size: "sm", "aria-label": "N\u00E6ste m\u00E5ned", icon: _jsx(ChevronRight, { size: 16 }), onClick: () => setMonthAnchor(prev => addMonthsLocal(prev, 1)) })] }), _jsx("div", { className: styles.weekRow, "aria-hidden": true, children: Array.from({ length: 7 }, (_, i) => (i + weekStartsOn) % 7).map(dow => (_jsx("div", { className: styles.weekCell, children: weekdayFmt.format(dUTC(2024, 8, dow + 1)).slice(0, 2) }, dow))) }), _jsx("div", { ref: gridRef, role: "grid", "aria-label": "Kalender", tabIndex: 0, className: styles.grid, onMouseLeave: () => setHoverUTC(null), children: cellsUTC.map((utcDay, idx) => {
                                 const inThisMonth = utcDay >= monthStartUTC && utcDay <= monthEndUTC;
                                 const isToday = sameDayUTC(utcDay, toUTCDateOnlyFromLocal(todayLocal));
                                 const disabledDay = isDisabledUTC(utcDay);

package/dist/components/datetime-picker/DateTimePicker.module.css

@@ -5,6 +5,7 @@
 .panel {
   display: grid;
   grid-template-columns: 1fr;
+  width: fit-content;
   gap: 8px;
   padding: 8px;
   background: var(--color-bg-surface);
@@ -32,6 +33,7 @@
 
 .calendarArea {
   display: grid;
+  width: max-content;
   gap: 8px;
 }
 

package/dist/components/datetime-picker/dateTimeHelpers.d.ts

@@ -5,18 +5,30 @@ export declare function maskSingle(text: string, enableTime: boolean): string;
 export declare function maskRange(text: string, _enableTime: boolean): string;
 export declare const pad2: (n: number) => string;
 export type UtcIsoString = string;
+export type DateOnlyString = string;
 export declare function isUtcIsoString(v: unknown): v is UtcIsoString;
+export declare function isDateOnlyString(v: unknown): v is DateOnlyString;
 export declare function utcMillisFromIso(iso: UtcIsoString): number;
+/** Convert a local DateTime to a UTC ISO string (Z). */
+export declare function isoFromLocalDate(dLocal: Date): UtcIsoString;
 /**
  * Build a *local* Date from y/m/d/hh/mm and return UTC ISO string (Z).
  * This keeps the UI meaning "local wall time", while emitting a stable UTC instant.
+ *
+ * DST NOTE:
+ * If the requested local wall time does not exist (spring-forward), JS will auto-correct.
+ * We detect that and return null so caller can handle it (e.g., show validation error).
  */
 export declare function isoFromLocalParts(y: number, m0: number, // 0-based
-d: number, hh?: number, mm?: number): UtcIsoString;
-/** Convert a local Date to a UTC ISO string (Z). */
-export declare function isoFromLocalDate(dLocal: Date): UtcIsoString;
+d: number, hh?: number, mm?: number): UtcIsoString | null;
 /** For anchoring the calendar safely from a UTC ISO string. */
 export declare function localDateFromIso(iso: UtcIsoString): Date | null;
+/** Date-only: build 'YYYY-MM-DD' from local parts */
+export declare function dateOnlyFromLocalParts(y: number, m0: number, d: number): DateOnlyString;
+/** Parse 'YYYY-MM-DD' into a local Date at midnight */
+export declare function localDateFromDateOnly(s: DateOnlyString): Date | null;
+/** Compare date-only strings by UTC date-only time (stable ordering) */
+export declare function compareDateOnly(a: DateOnlyString, b: DateOnlyString): number;
 export declare function toMaskedFromDate(d: Date, enableTime: boolean): string;
 export declare function parseLooseDateOrDateTime(input: string): Date | null;
 export declare function parseLooseRange(input: string): {

package/dist/components/datetime-picker/dateTimeHelpers.js

@@ -1,3 +1,49 @@
+/* ---------- Range separator helpers ---------- */
+/**
+ * IMPORTANT:
+ * "-" is only treated as a range separator when surrounded by whitespace: " - "
+ * so we don't split inside "DD-MM-YYYY".
+ *
+ * Supported separators:
+ *   - En dash: "–" (with optional surrounding spaces)
+ *   - Hyphen as range sep: " - " (spaces required)
+ *   - Words: "to", "til" (with optional surrounding spaces)
+ *
+ * COMPAT:
+ *   - Also supports digit-only ranges like "01022026-02022026" (no spaces),
+ *     because that cannot be confused with "DD-MM-YYYY".
+ */
+const RANGE_SEP_RE = /\s*(?:–|\bto\b|\btil\b|\s-\s)\s*/i;
+function normalizeSpaces(s) {
+    return s.trim().replace(/\s+/g, ' ');
+}
+/**
+ * Special-case for digit-only ranges: 8 digits + '-' + 8 digits (optional spaces).
+ * This keeps legacy UX working without reintroducing the DD-MM-YYYY split bug.
+ */
+function splitDigitOnlyRangeParts(input) {
+    const m = /^\s*(\d{8})\s*-\s*(\d{8})\s*$/.exec(input);
+    if (!m)
+        return null;
+    return [m[1], m[2]];
+}
+function splitRangeParts(input) {
+    var _a;
+    // 1) digit-only fast path: 01022026-02022026
+    const digitOnly = splitDigitOnlyRangeParts(input);
+    if (digitOnly)
+        return digitOnly;
+    // 2) normal path: use safe separators (–, to, til, " - ")
+    const txt = normalizeSpaces(input);
+    const parts = txt.split(RANGE_SEP_RE);
+    if (parts.length < 2)
+        return null;
+    const left = ((_a = parts[0]) !== null && _a !== void 0 ? _a : '').trim();
+    const right = parts.slice(1).join(' ').trim();
+    if (!left || !right)
+        return null;
+    return [left, right];
+}
 /* ---------- Mask helpers (no deps) ---------- */
 // Pull only 0-9
 export const digits = (s) => (s.match(/\d/g) || []).join('');
@@ -23,7 +69,7 @@ export function maskTimeHM(text) {
 }
 // Single: "DD-MM-YYYY" or "DD-MM-YYYY HH:mm"
 export function maskSingle(text, enableTime) {
-    let t = text.trim().replace(/\s+/g, ' ');
+    const t = normalizeSpaces(text);
     if (!enableTime)
         return maskDateEU(t);
     // split date + time by first space or 'T'
@@ -34,15 +80,15 @@ export function maskSingle(text, enableTime) {
     const timePart = maskTimeHM(m[2]);
     return timePart ? `${datePart} ${timePart}` : datePart;
 }
-// Range: mask both sides around common separators (–, -, to, til)
+// Range: mask both sides around common separators (–, " - ", to, til, or digit-only "01022026-02022026")
 export function maskRange(text, _enableTime) {
     // NOTE: range is date-only in the UI
-    const sepRe = /\s*(?:–|-|to|til)\s*/i;
-    const parts = text.split(sepRe);
-    if (parts.length === 1)
-        return maskSingle(parts[0], false);
-    const a = maskSingle(parts[0], false);
-    const b = maskSingle(parts.slice(1).join(' '), false);
+    const parts = splitRangeParts(text);
+    if (!parts)
+        return maskSingle(text, false);
+    const [left, right] = parts;
+    const a = maskSingle(left, false);
+    const b = maskSingle(right, false);
     return `${a} – ${b}`.trim();
 }
 // Pad helper
@@ -50,20 +96,52 @@ export const pad2 = (n) => String(n).padStart(2, '0');
 export function isUtcIsoString(v) {
     return typeof v === 'string' && /Z$/.test(v) && !Number.isNaN(Date.parse(v));
 }
+export function isDateOnlyString(v) {
+    if (typeof v !== 'string')
+        return false;
+    const m = /^(\d{4})-(\d{2})-(\d{2})$/.exec(v);
+    if (!m)
+        return false;
+    const y = +m[1];
+    const mo = +m[2];
+    const d = +m[3];
+    if (mo < 1 || mo > 12)
+        return false;
+    if (d < 1 || d > 31)
+        return false;
+    // Validate exact date (guard against 2026-02-31 etc.)
+    const local = new Date(y, mo - 1, d, 0, 0, 0, 0);
+    return local.getFullYear() === y && local.getMonth() === mo - 1 && local.getDate() === d;
+}
 export function utcMillisFromIso(iso) {
     return Date.parse(iso);
 }
+/** Convert a local DateTime to a UTC ISO string (Z). */
+export function isoFromLocalDate(dLocal) {
+    return dLocal.toISOString();
+}
 /**
  * Build a *local* Date from y/m/d/hh/mm and return UTC ISO string (Z).
  * This keeps the UI meaning "local wall time", while emitting a stable UTC instant.
+ *
+ * DST NOTE:
+ * If the requested local wall time does not exist (spring-forward), JS will auto-correct.
+ * We detect that and return null so caller can handle it (e.g., show validation error).
  */
 export function isoFromLocalParts(y, m0, // 0-based
 d, hh = 0, mm = 0) {
-    return new Date(y, m0, d, hh, mm, 0, 0).toISOString();
-}
-/** Convert a local Date to a UTC ISO string (Z). */
-export function isoFromLocalDate(dLocal) {
-    return dLocal.toISOString();
+    const local = new Date(y, m0, d, hh, mm, 0, 0);
+    if (Number.isNaN(local.getTime()))
+        return null;
+    // Guard: JS autocorrects invalid dates/times; re-validate exact parts
+    if (local.getFullYear() !== y ||
+        local.getMonth() !== m0 ||
+        local.getDate() !== d ||
+        local.getHours() !== hh ||
+        local.getMinutes() !== mm) {
+        return null;
+    }
+    return local.toISOString();
 }
 /** For anchoring the calendar safely from a UTC ISO string. */
 export function localDateFromIso(iso) {
@@ -72,6 +150,37 @@ export function localDateFromIso(iso) {
         return null;
     return new Date(ms); // local rendering
 }
+/** Date-only: build 'YYYY-MM-DD' from local parts */
+export function dateOnlyFromLocalParts(y, m0, d) {
+    return `${String(y).padStart(4, '0')}-${pad2(m0 + 1)}-${pad2(d)}`;
+}
+/** Parse 'YYYY-MM-DD' into a local Date at midnight */
+export function localDateFromDateOnly(s) {
+    if (!isDateOnlyString(s))
+        return null;
+    const m = /^(\d{4})-(\d{2})-(\d{2})$/.exec(s);
+    if (!m)
+        return null;
+    const y = +m[1];
+    const mo0 = +m[2] - 1;
+    const d = +m[3];
+    const local = new Date(y, mo0, d, 0, 0, 0, 0);
+    if (Number.isNaN(local.getTime()))
+        return null;
+    if (local.getFullYear() !== y || local.getMonth() !== mo0 || local.getDate() !== d)
+        return null;
+    return local;
+}
+/** Compare date-only strings by UTC date-only time (stable ordering) */
+export function compareDateOnly(a, b) {
+    const da = localDateFromDateOnly(a);
+    const db = localDateFromDateOnly(b);
+    if (!da || !db)
+        return 0;
+    const ta = Date.UTC(da.getFullYear(), da.getMonth(), da.getDate());
+    const tb = Date.UTC(db.getFullYear(), db.getMonth(), db.getDate());
+    return ta - tb;
+}
 /* ---------- Formatting (UI shows local) ---------- */
 // From Date → "DD-MM-YYYY" or "DD-MM-YYYY HH:mm" (local time)
 export function toMaskedFromDate(d, enableTime) {
@@ -86,7 +195,7 @@ export function toMaskedFromDate(d, enableTime) {
 /* ---------- Parsing helpers (no deps) ---------- */
 // Accepts: YYYY-MM-DD, DD-MM-YYYY, DD/MM/YYYY, DD.MM.YYYY (+ optional HH:mm)
 export function parseLooseDateOrDateTime(input) {
-    const txt = input.trim().replace(/\s+/g, ' ');
+    const txt = normalizeSpaces(input);
     const dateTimeMatch = /^(?<date>[\d./-]{8,10})(?:[ T](?<hh>\d{1,2}):(?<mm>\d{2}))?$/i.exec(txt);
     if (!(dateTimeMatch === null || dateTimeMatch === void 0 ? void 0 : dateTimeMatch.groups))
         return null;
@@ -95,7 +204,7 @@ export function parseLooseDateOrDateTime(input) {
     const mm = dateTimeMatch.groups.mm ? parseInt(dateTimeMatch.groups.mm, 10) : 0;
     if (hh < 0 || hh > 23 || mm < 0 || mm > 59)
         return null;
-    // Try YYYY-MM-DD first
+    // Try YYYY-MM-DD first (still accepts 1-2 digits for month/day in ISO form)
     let y, m, d;
     const mIso = /^(\d{4})-(\d{1,2})-(\d{1,2})$/.exec(raw);
     if (mIso) {
@@ -104,8 +213,8 @@ export function parseLooseDateOrDateTime(input) {
         d = +mIso[3];
     }
     else {
-        // Try DD-MM-YYYY or DD/MM/YYYY or DD.MM.YYYY
-        const mEu = /^(\d{1,2})[./-](\d{1,2})[./-](\d{4})$/.exec(raw);
+        // EU formats must be strict DD-MM-YYYY / DD/MM/YYYY / DD.MM.YYYY
+        const mEu = /^(\d{2})[./-](\d{2})[./-](\d{4})$/.exec(raw);
         if (!mEu)
             return null;
         d = +mEu[1];
@@ -115,17 +224,22 @@ export function parseLooseDateOrDateTime(input) {
     const local = new Date(y, m, d, hh, mm, 0, 0);
     if (Number.isNaN(local.getTime()))
         return null;
-    // Guard: JS autocorrects invalid dates; re-validate exact Y/M/D
-    if (local.getFullYear() !== y || local.getMonth() !== m || local.getDate() !== d)
+    // Guard: JS autocorrects invalid dates; re-validate exact Y/M/D/H/M
+    if (local.getFullYear() !== y ||
+        local.getMonth() !== m ||
+        local.getDate() !== d ||
+        local.getHours() !== hh ||
+        local.getMinutes() !== mm) {
         return null;
+    }
     return local;
 }
-// Parse a range string with separators: "–", "-", "to", "til"
+// Parse a range string with separators: "–", " - ", "to", "til", or digit-only "01022026-02022026"
 export function parseLooseRange(input) {
-    const sep = /\s*(?:–|-|to|til)\s*/i;
-    const [a, b] = input.split(sep);
-    if (!a || !b)
+    const parts = splitRangeParts(input);
+    if (!parts)
         return null;
+    const [a, b] = parts;
     const s = parseLooseDateOrDateTime(a);
     const e = parseLooseDateOrDateTime(b);
     if (!s || !e)