@design.estate/dees-catalog 9.6.2 → 9.7.0

package/ts_web/elements/00group-harness/dees-harness-chat/dees-harness-chat.ts

@@ -203,6 +203,9 @@ export class DeesHarnessChat extends DeesElement {
   @property({ attribute: false })
   accessor attachments: IHarnessAttachment[] = [];
 
+  @property({ attribute: false })
+  accessor attachmentsEnabled: boolean = true;
+
   @property({ attribute: false })
   accessor suggestions: IHarnessComposerSuggestion[] = [];
 
@@ -763,6 +766,7 @@ export class DeesHarnessChat extends DeesElement {
           .contextDescription=${this.heading ? `Replying to ${this.heading}` : ''}
           .value=${this.composerValue}
           .attachments=${this.attachments}
+          .attachmentsEnabled=${this.attachmentsEnabled}
           .suggestions=${this.suggestions}
           .maxAttachmentCount=${this.maxAttachmentCount}
           .maxAttachmentBytes=${this.maxAttachmentBytes}

package/ts_web/elements/00group-harness/dees-harness-composer/dees-harness-composer.demo.ts

@@ -44,6 +44,9 @@ export const demoFunc = () => demoPage('Composer', 'Write, attach files, choose
     <dees-harness-composer busy queuedCount="2"></dees-harness-composer>
     <div class="dees-demo-label">Waiting for a connection</div>
     <dees-harness-composer disabled placeholder="Connect to a project to chat."></dees-harness-composer>
+    <div class="dees-demo-label">Text-only conversation</div>
+    <dees-harness-composer .attachmentsEnabled=${false} .showModelControls=${false}
+      value="Summarize the outstanding invoices."></dees-harness-composer>
     <div class="dees-demo-label">Files ready to send</div>
     <dees-harness-composer
       .showModelControls=${false}

package/ts_web/elements/00group-harness/dees-harness-composer/dees-harness-composer.ts

@@ -112,6 +112,10 @@ export class DeesHarnessComposer extends DeesElement {
   @property({ attribute: false })
   accessor attachments: IHarnessAttachment[] = [];
 
+  /** Host capability: false disables every attachment entry point and sends text only. */
+  @property({ attribute: false })
+  accessor attachmentsEnabled: boolean = true;
+
   @property({ attribute: false })
   accessor suggestions: IHarnessComposerSuggestion[] = [];
 
@@ -473,6 +477,10 @@ export class DeesHarnessComposer extends DeesElement {
 
   public updated(changedProperties: Map<PropertyKey, unknown>): void {
     super.updated(changedProperties);
+    if (['attachmentsEnabled', 'disabled'].some(key => changedProperties.has(key) && changedProperties.get(key) !== undefined)) {
+      this.attachmentGeneration++;
+      if (!this.attachmentsEnabled || this.disabled) this.handleDragLeave();
+    }
     this.syncTextareaSuggestionAria();
   }
 
@@ -486,13 +494,13 @@ export class DeesHarnessComposer extends DeesElement {
           @dragleave=${this.handleDragLeave}
           @drop=${this.handleDrop}
         >
-        <input
+        ${this.attachmentsEnabled ? html`<input
           class="fileInput"
           type="file"
           multiple
           @change=${this.handleFileInputChange}
-        />
-        ${this.attachments.length
+        />` : ''}
+        ${this.attachmentsEnabled && this.attachments.length
           ? html`
               <div class="attachmentRow">
                 ${this.attachments.map((attachment) => this.renderChip(attachment))}
@@ -505,7 +513,7 @@ export class DeesHarnessComposer extends DeesElement {
             .value=${this.value}
             aria-label="Message"
             aria-description=${this.contextDescription}
-            placeholder=${this.placeholder}
+            placeholder=${!this.attachmentsEnabled && this.placeholder === 'Message the agent — drop or paste files to attach…' ? 'Message the agent…' : this.placeholder}
             ?disabled=${this.disabled}
             rows="1"
             @input=${this.handleTextInput}
@@ -518,14 +526,16 @@ export class DeesHarnessComposer extends DeesElement {
           ></textarea>
         </div>
         <div class="controlsRow">
-          <dees-button
+          ${this.attachmentsEnabled ? html`<dees-button
+            class="attachButton"
             size="sm"
             type="ghost"
+            title="Attach files"
             ?disabled=${this.disabled}
             @clicked=${() => this.shadowRoot?.querySelector<HTMLInputElement>('.fileInput')?.click()}
           >
             <dees-icon icon="lucide:Paperclip" iconSize="14"></dees-icon>
-          </dees-button>
+          </dees-button>` : ''}
           ${this.modeOptions.length
             ? html`
                 <dees-input-multitoggle class="modeSwitch" label="Agent mode" .labelPosition=${'none'}
@@ -869,6 +879,7 @@ export class DeesHarnessComposer extends DeesElement {
   };
 
   private handlePaste = (event: ClipboardEvent): void => {
+    if (!this.attachmentsEnabled || this.disabled) return;
     const files = Array.from(event.clipboardData?.files ?? []);
     if (!files.length) return;
     event.preventDefault();
@@ -878,6 +889,10 @@ export class DeesHarnessComposer extends DeesElement {
   private handleDragOver = (event: DragEvent): void => {
     if (!event.dataTransfer?.types.includes('Files')) return;
     event.preventDefault();
+    if (!this.attachmentsEnabled || this.disabled) {
+      event.dataTransfer.dropEffect = 'none';
+      return;
+    }
     this.shadowRoot?.querySelector('.composer')?.classList.add('dragOver');
   };
 
@@ -890,23 +905,32 @@ export class DeesHarnessComposer extends DeesElement {
     const files = Array.from(event.dataTransfer?.files ?? []);
     if (!files.length) return;
     event.preventDefault();
+    if (!this.attachmentsEnabled || this.disabled) {
+      if (event.dataTransfer) event.dataTransfer.dropEffect = 'none';
+      return;
+    }
     void this.addFiles(files);
   };
 
   private attachmentAdditionTail = Promise.resolve();
+  private attachmentGeneration = 0;
 
   public addFiles(fileList: FileList | File[] | null): Promise<void> {
     const files = Array.from(fileList ?? []);
-    if (!files.length) return Promise.resolve();
-    const addition = this.attachmentAdditionTail.then(() => this.addFilesSequential(files));
+    if (!files.length || !this.attachmentsEnabled || this.disabled) return Promise.resolve();
+    const generation = this.attachmentGeneration;
+    const addition = this.attachmentAdditionTail.then(() => this.addFilesSequential(files, generation));
     this.attachmentAdditionTail = addition.catch(() => undefined);
     return addition;
   }
 
-  private async addFilesSequential(files: File[]): Promise<void> {
+  private async addFilesSequential(files: File[], generation: number): Promise<void> {
+    const allowed = () => this.attachmentsEnabled && !this.disabled && generation === this.attachmentGeneration;
+    if (!allowed()) return;
     const added: IHarnessAttachment[] = [];
     let totalBytes = this.attachments.reduce((sum, attachment) => sum + attachment.size, 0);
     for (const file of files) {
+      if (!allowed()) return;
       if (this.attachments.length + added.length >= this.maxAttachmentCount) {
         this.emit('harness-attachment-error', {
           message: `A maximum of ${this.maxAttachmentCount} attachments is allowed.`,
@@ -928,6 +952,7 @@ export class DeesHarnessComposer extends DeesElement {
       }
       try {
         const dataBase64 = await harnessFileToBase64(file);
+        if (!allowed()) return;
         const kind = harnessAttachmentKindFor(mediaType);
         added.push({
           id: globalThis.crypto?.randomUUID?.() ?? `${Date.now()}-${Math.random().toString(16).slice(2)}`,
@@ -939,12 +964,13 @@ export class DeesHarnessComposer extends DeesElement {
         });
         totalBytes += file.size;
       } catch (error) {
+        if (!allowed()) return;
         this.emit('harness-attachment-error', {
           message: error instanceof Error ? error.message : String(error),
         });
       }
     }
-    if (added.length) {
+    if (added.length && allowed()) {
       this.emitAttachments([...this.attachments, ...added]);
     }
   }
@@ -957,7 +983,7 @@ export class DeesHarnessComposer extends DeesElement {
       && (!this.busy || !this.inputSteeringEnabled || !this.value.trim())) return;
     const detail: IHarnessComposerSendDetail = {
       text: this.value,
-      attachments: this.attachments,
+      attachments: this.attachmentsEnabled ? this.attachments : [],
       account: this.account || undefined,
       model: this.model || undefined,
       reasoningEffort: this.reasoningEffort || undefined,

package/ts_web/elements/00group-input/dees-input-datepicker/component.ts

@@ -9,6 +9,7 @@ import { demoFunc } from './demo.js';
 import { datepickerStyles } from './styles.js';
 import { renderDatepicker } from './template.js';
 import { DeesInputDatepickerPopup } from './datepicker-popup.js';
+import { createCalendarDate, dateValidationMessage, parseDateFields, parseDateValue } from './date-validation.js';
 import '../../00group-utility/dees-icon/dees-icon.js';
 import '../../00group-layout/dees-label/dees-label.js';
 
@@ -78,6 +79,17 @@ export class DeesInputDatepicker extends DeesInputBase<DeesInputDatepicker> {
   @state()
   accessor selectedMinute: number = 0;
 
+  /** Uncommitted text stays visible even when it cannot be represented by value. */
+  @state()
+  accessor draftText: string | null = null;
+
+  @state()
+  accessor validationText = '';
+
+  public get validationState(): 'invalid' | 'valid' { return this.validationText ? 'invalid' : 'valid'; }
+
+  private lastCommittedValue: string | undefined;
+
   private popupInstance: DeesInputDatepickerPopup | null = null;
 
   public static styles = datepickerStyles;
@@ -86,42 +98,59 @@ export class DeesInputDatepicker extends DeesInputBase<DeesInputDatepicker> {
     return renderDatepicker(this);
   }
 
-  async firstUpdated() {
-    if (!this.value) {
-      this.value = '';
+  public willUpdate(changed: Map<PropertyKey, unknown>): void {
+    super.willUpdate(changed);
+    if (changed.has('value') && this.value !== this.lastCommittedValue) {
+      this.syncValue(this.value);
     }
+  }
 
-    if (this.value) {
-      try {
-        const date = new Date(this.value);
-        if (!isNaN(date.getTime())) {
-          this.selectedDate = date;
-          this.viewDate = new Date(date);
-          this.selectedHour = date.getHours();
-          this.selectedMinute = date.getMinutes();
-        }
-      } catch {
-        // Invalid date
+  public updated(changed: Map<string, unknown>): void {
+    super.updated(changed);
+    if (changed.has('disabled') && this.disabled) this.closePopup();
+    if (['value', 'minDate', 'maxDate', 'disabledDates', 'required', 'disabled'].some(key => changed.has(key))) {
+      this.updateValidation(this.currentValidationMessage());
+    }
+    if (this.popupInstance) {
+      this.popupInstance.minDate = this.minDate;
+      this.popupInstance.maxDate = this.maxDate;
+      this.popupInstance.disabledDates = this.disabledDates;
+      if (changed.has('selectedDate')) {
+        this.popupInstance.selectedDate = this.selectedDate;
+        this.popupInstance.viewDate = new Date(this.viewDate);
+        this.popupInstance.selectedHour = this.selectedHour;
+        this.popupInstance.selectedMinute = this.selectedMinute;
       }
-    } else {
-      const now = new Date();
-      this.viewDate = new Date(now);
-      this.selectedHour = now.getHours();
-      this.selectedMinute = 0;
+    }
+    const input = this.shadowRoot?.querySelector('input');
+    input?.setCustomValidity(this.disabled ? '' : this.validationText);
+    if (input && (changed.has('draftText') || changed.has('value'))) {
+      const display = this.draftText ?? this.formatDate(this.value);
+      if (input.value !== display) input.value = display;
     }
   }
 
+  private syncValue(value: string | null): void {
+    this.value = value ?? '';
+    this.lastCommittedValue = this.value;
+    this.draftText = null;
+    this.selectedDate = parseDateValue(this.value);
+    this.viewDate = new Date(this.selectedDate ?? new Date());
+    this.selectedHour = this.selectedDate?.getHours() ?? 0;
+    this.selectedMinute = this.selectedDate?.getMinutes() ?? 0;
+  }
+
   public formatDate(isoString: string): string {
     if (!isoString) return '';
 
     try {
-      const date = new Date(isoString);
-      if (isNaN(date.getTime())) return '';
+      const date = parseDateValue(isoString);
+      if (!date) return isoString;
 
       let formatted = this.dateFormat;
       const day = date.getDate().toString().padStart(2, '0');
       const month = (date.getMonth() + 1).toString().padStart(2, '0');
-      const year = date.getFullYear().toString();
+      const year = date.getFullYear().toString().padStart(4, '0');
 
       formatted = formatted.replace('YYYY', year);
       formatted = formatted.replace('YY', year.slice(-2));
@@ -171,7 +200,7 @@ export class DeesInputDatepicker extends DeesInputBase<DeesInputDatepicker> {
     const opensToTop = spaceBelow < 400 && spaceAbove > spaceBelow;
 
     if (!this.popupInstance) {
-      this.popupInstance = new DeesInputDatepickerPopup();
+      this.popupInstance = document.createElement('dees-input-datepicker-popup');
     }
 
     // Configure popup
@@ -204,31 +233,50 @@ export class DeesInputDatepicker extends DeesInputBase<DeesInputDatepicker> {
 
   private closePopup(): void {
     this.isOpened = false;
-    if (this.popupInstance) {
-      this.popupInstance.removeEventListener('date-selected', this.handleDateSelected);
-      this.popupInstance.removeEventListener('date-cleared', this.handleDateCleared);
-      this.popupInstance.removeEventListener('close-request', this.handleCloseRequest);
-      this.popupInstance.removeEventListener('reposition-request', this.handleRepositionRequest);
-      this.popupInstance.hide();
+    const popup = this.popupInstance;
+    this.popupInstance = null;
+    if (popup) {
+      popup.removeEventListener('date-selected', this.handleDateSelected);
+      popup.removeEventListener('date-cleared', this.handleDateCleared);
+      popup.removeEventListener('close-request', this.handleCloseRequest);
+      popup.removeEventListener('reposition-request', this.handleRepositionRequest);
+      void popup.hide();
     }
   }
 
   private handleDateSelected = (event: Event): void => {
-    const date = (event as CustomEvent).detail as Date;
-    this.selectedDate = date;
-    this.selectedHour = date.getHours();
-    this.selectedMinute = date.getMinutes();
-    this.viewDate = new Date(date);
-    this.value = this.formatValueWithTimezone(date);
-    this.changeSubject.next(this);
+    if (this.disabled) return;
+    this.commitDate((event as CustomEvent<Date>).detail, true);
   };
 
   private handleDateCleared = (): void => {
-    this.value = '';
-    this.selectedDate = null;
-    this.changeSubject.next(this);
+    if (!this.disabled) this.commitClear();
   };
 
+  private commitDate(date: Date, normalizeDraft: boolean): boolean {
+    const message = dateValidationMessage(date, this);
+    if (message) { this.updateValidation(message); return false; }
+    const value = this.formatValueWithTimezone(date);
+    const changed = value !== this.value;
+    this.lastCommittedValue = value;
+    this.value = value;
+    this.selectedDate = new Date(date);
+    this.selectedHour = date.getHours();
+    this.selectedMinute = date.getMinutes();
+    this.viewDate = new Date(date);
+    if (normalizeDraft) this.draftText = null;
+    this.updateValidation('');
+    if (changed) this.changeSubject.next(this);
+    return true;
+  }
+
+  private commitClear(): void {
+    const changed = Boolean(this.value);
+    this.syncValue('');
+    this.updateValidation(this.currentValidationMessage());
+    if (changed) this.changeSubject.next(this);
+  }
+
   private handleCloseRequest = (): void => {
     this.closePopup();
   };
@@ -251,11 +299,17 @@ export class DeesInputDatepicker extends DeesInputBase<DeesInputDatepicker> {
   };
 
   public handleKeydown(e: KeyboardEvent): void {
-    if (e.key === 'Enter' || e.key === ' ') {
+    if (this.disabled || e.isComposing) return;
+    if (e.key === 'Enter') {
       e.preventDefault();
-      this.toggleCalendar();
+      if (this.draftText !== null) this.commitManualInput(true);
+      else void this.toggleCalendar();
+    } else if (e.key === 'ArrowDown' && e.altKey) {
+      e.preventDefault();
+      if (!this.isOpened) void this.toggleCalendar();
     } else if (e.key === 'Escape' && this.isOpened) {
       e.preventDefault();
+      e.stopPropagation();
       this.closePopup();
     }
   }
@@ -270,107 +324,73 @@ export class DeesInputDatepicker extends DeesInputBase<DeesInputDatepicker> {
 
   public clearValue(e: Event): void {
     e.stopPropagation();
-    this.value = '';
-    this.selectedDate = null;
-    this.changeSubject.next(this);
+    if (!this.disabled) this.commitClear();
   }
 
   public handleManualInput(e: InputEvent): void {
-    const input = e.target as HTMLInputElement;
-    const inputValue = input.value.trim();
-
-    if (!inputValue) {
-      this.value = '';
-      this.selectedDate = null;
-      return;
-    }
-
-    const parsedDate = this.parseManualDate(inputValue);
-    if (parsedDate && !isNaN(parsedDate.getTime())) {
-      this.value = parsedDate.toISOString();
-      this.selectedDate = parsedDate;
-      this.viewDate = new Date(parsedDate);
-      this.selectedHour = parsedDate.getHours();
-      this.selectedMinute = parsedDate.getMinutes();
-      this.changeSubject.next(this);
-    }
+    if (this.disabled) return;
+    this.draftText = (e.target as HTMLInputElement).value;
+    if (!e.isComposing) this.updateValidation(this.currentValidationMessage());
   }
 
-  public handleInputBlur(e: FocusEvent): void {
-    const input = e.target as HTMLInputElement;
-    const inputValue = input.value.trim();
-
-    if (!inputValue) {
-      this.value = '';
-      this.selectedDate = null;
-      this.changeSubject.next(this);
-      return;
-    }
+  public handleInputBlur(_event: FocusEvent): void {
+    if (!this.disabled && this.draftText !== null) this.commitManualInput(true);
+  }
 
-    const parsedDate = this.parseManualDate(inputValue);
-    if (parsedDate && !isNaN(parsedDate.getTime())) {
-      this.value = parsedDate.toISOString();
-      this.selectedDate = parsedDate;
-      this.viewDate = new Date(parsedDate);
-      this.selectedHour = parsedDate.getHours();
-      this.selectedMinute = parsedDate.getMinutes();
-      this.changeSubject.next(this);
-      input.value = this.formatDate(this.value);
-    } else {
-      input.value = this.formatDate(this.value);
-    }
+  private commitManualInput(normalizeDraft: boolean): void {
+    const text = this.draftText?.trim() ?? '';
+    if (!text) { this.commitClear(); return; }
+    const date = this.parseManualDate(text);
+    const message = dateValidationMessage(date, this);
+    if (message) { this.updateValidation(message); return; }
+    this.commitDate(date!, normalizeDraft);
   }
 
   private parseManualDate(input: string): Date | null {
-    if (!input) return null;
-
-    const parts = input.split(' ');
-    let datePart = parts[0];
-    let timePart = parts[1] || '';
-    let parsedDate: Date | null = null;
-
-    const isoMatch = datePart.match(/^(\d{4})-(\d{1,2})-(\d{1,2})$/);
-    if (isoMatch) {
-      const [_, year, month, day] = isoMatch;
-      parsedDate = new Date(parseInt(year), parseInt(month) - 1, parseInt(day));
-    }
-
-    if (!parsedDate) {
-      const euMatch = datePart.match(/^(\d{1,2})\.(\d{1,2})\.(\d{4})$/);
-      if (euMatch) {
-        const [_, day, month, year] = euMatch;
-        parsedDate = new Date(parseInt(year), parseInt(month) - 1, parseInt(day));
-      }
+    const match = /^(\S+)(?:\s+(\d{1,2}):(\d{2})(?:\s+(AM|PM))?)?$/i.exec(input.trim());
+    if (!match) return null;
+    const fields = parseDateFields(match[1]);
+    if (!fields) return null;
+    let hour = Number(match[2] ?? 0);
+    const minute = Number(match[3] ?? 0);
+    if (match[4]) {
+      if (hour < 1 || hour > 12) return null;
+      hour = hour % 12 + (match[4].toUpperCase() === 'PM' ? 12 : 0);
     }
+    return createCalendarDate(...fields, match[2] === undefined ? undefined : hour, minute);
+  }
 
-    if (!parsedDate) {
-      const usMatch = datePart.match(/^(\d{1,2})\/(\d{1,2})\/(\d{4})$/);
-      if (usMatch) {
-        const [_, month, day, year] = usMatch;
-        parsedDate = new Date(parseInt(year), parseInt(month) - 1, parseInt(day));
-      }
+  private currentValidationMessage(): string {
+    if (this.disabled) return '';
+    const text = this.draftText?.trim();
+    if (this.draftText !== null) {
+      if (!text) return this.required ? 'Choose a date.' : '';
+      return dateValidationMessage(this.parseManualDate(text), this);
     }
+    if (!this.value) return this.required ? 'Choose a date.' : '';
+    return dateValidationMessage(parseDateValue(this.value), this);
+  }
 
-    if (!parsedDate || isNaN(parsedDate.getTime())) return null;
+  private updateValidation(message: string): void {
+    const changed = message !== this.validationText;
+    this.validationText = message;
+    this.shadowRoot?.querySelector('input')?.setCustomValidity(message);
+    if (changed) this.dispatchEvent(new CustomEvent('validation-change', {
+      detail: { valid: !message, message }, bubbles: true, composed: true,
+    }));
+  }
 
-    if (timePart) {
-      const timeMatch = timePart.match(/^(\d{1,2}):(\d{2})$/);
-      if (timeMatch) {
-        const [_, hours, minutes] = timeMatch;
-        parsedDate.setHours(parseInt(hours));
-        parsedDate.setMinutes(parseInt(minutes));
-      }
-    } else if (!this.enableTime) {
-      const now = new Date();
-      parsedDate.setHours(now.getHours());
-      parsedDate.setMinutes(now.getMinutes());
-      parsedDate.setSeconds(0);
-      parsedDate.setMilliseconds(0);
-    }
+  public checkValidity(): boolean { return !this.currentValidationMessage(); }
 
-    return parsedDate;
+  public reportValidity(): boolean {
+    const message = this.currentValidationMessage();
+    this.updateValidation(message);
+    if (message) this.focus();
+    return !message;
   }
 
+  public reset(): void { this.setValue(''); }
+
   private formatValueWithTimezone(date: Date): string {
     if (!this.enableTimezone) return date.toISOString();
 
@@ -403,32 +423,13 @@ export class DeesInputDatepicker extends DeesInputBase<DeesInputDatepicker> {
     return this.value;
   }
 
-  public setValue(value: string): void {
-    this.value = value;
-    if (value) {
-      try {
-        const date = new Date(value);
-        if (!isNaN(date.getTime())) {
-          this.selectedDate = date;
-          this.viewDate = new Date(date);
-          this.selectedHour = date.getHours();
-          this.selectedMinute = date.getMinutes();
-        }
-      } catch {
-        // Invalid date
-      }
-    }
+  public setValue(value: string | null): void {
+    this.syncValue(value);
+    this.updateValidation(this.currentValidationMessage());
   }
 
   async disconnectedCallback() {
+    this.closePopup();
     await super.disconnectedCallback();
-    if (this.popupInstance) {
-      this.popupInstance.removeEventListener('date-selected', this.handleDateSelected);
-      this.popupInstance.removeEventListener('date-cleared', this.handleDateCleared);
-      this.popupInstance.removeEventListener('close-request', this.handleCloseRequest);
-      this.popupInstance.removeEventListener('reposition-request', this.handleRepositionRequest);
-      this.popupInstance.hide();
-      this.popupInstance = null;
-    }
   }
 }

package/ts_web/elements/00group-input/dees-input-datepicker/date-validation.ts

@@ -0,0 +1,64 @@
+export interface IDateConstraints {
+  minDate: string;
+  maxDate: string;
+  disabledDates: string[];
+}
+
+/** Construct a local calendar date without accepting Date's overflow normalization. */
+export const createCalendarDate = (year: number, month: number, day: number, hour?: number, minute = 0): Date | null => {
+  const requestedHour = hour ?? 0;
+  if (![year, month, day, requestedHour, minute].every(Number.isInteger)
+    || year < 1 || year > 9999 || month < 1 || month > 12 || day < 1 || day > 31
+    || requestedHour < 0 || requestedHour > 23 || minute < 0 || minute > 59) return null;
+  const date = new Date(0);
+  // setFullYear avoids the constructor's special mapping of years 0–99 to 1900–1999.
+  date.setFullYear(year, month - 1, day);
+  date.setHours(requestedHour, minute, 0, 0);
+  // Some zones enter daylight saving at midnight. A date-only entry still names
+  // that valid calendar day; an explicitly typed nonexistent time is rejected.
+  return date.getFullYear() === year && date.getMonth() === month - 1 && date.getDate() === day
+    && (hour === undefined || date.getHours() === hour && date.getMinutes() === minute) ? date : null;
+};
+
+export const parseDateFields = (text: string): [number, number, number] | null => {
+  let match = /^(\d{4})-(\d{1,2})-(\d{1,2})$/.exec(text);
+  if (match) return [Number(match[1]), Number(match[2]), Number(match[3])];
+  match = /^(\d{1,2})\.(\d{1,2})\.(\d{4})$/.exec(text);
+  if (match) return [Number(match[3]), Number(match[2]), Number(match[1])];
+  match = /^(\d{1,2})\/(\d{1,2})\/(\d{4})$/.exec(text);
+  return match ? [Number(match[3]), Number(match[1]), Number(match[2])] : null;
+};
+
+/** Date-only constraints are local calendar days, never UTC-midnight instants. */
+export const parseDateValue = (value: string): Date | null => {
+  if (!value) return null;
+  const fields = parseDateFields(value);
+  if (fields) return createCalendarDate(...fields);
+  const iso = /^(\d{4})-(\d{2})-(\d{2})T/.exec(value);
+  if (!iso || !createCalendarDate(Number(iso[1]), Number(iso[2]), Number(iso[3]))) return null;
+  const date = new Date(value);
+  return Number.isNaN(date.getTime()) ? null : date;
+};
+
+export const calendarDayKey = (date: Date): number =>
+  date.getFullYear() * 10000 + (date.getMonth() + 1) * 100 + date.getDate();
+
+/** Shared by manual entry, calendar buttons and the final commit boundary. */
+export const dateValidationMessage = (date: Date | null, constraints: IDateConstraints): string => {
+  if (!date || Number.isNaN(date.getTime()) || date.getFullYear() < 1 || date.getFullYear() > 9999) return 'Enter a valid date (YYYY-MM-DD, DD.MM.YYYY or MM/DD/YYYY).';
+  const key = calendarDayKey(date);
+  for (const bound of ['minDate', 'maxDate'] as const) {
+    if (!constraints[bound]) continue;
+    const limit = parseDateValue(constraints[bound]);
+    if (!limit) return `${bound === 'minDate' ? 'Minimum' : 'Maximum'} date is invalid.`;
+    if (bound === 'minDate' ? key < calendarDayKey(limit) : key > calendarDayKey(limit)) {
+      return `Choose a date on or ${bound === 'minDate' ? 'after' : 'before'} ${constraints[bound]}.`;
+    }
+  }
+  for (const value of constraints.disabledDates ?? []) {
+    const disabled = parseDateValue(value);
+    if (!disabled) return 'A disabled date is invalid.';
+    if (key === calendarDayKey(disabled)) return 'This date is unavailable.';
+  }
+  return '';
+};