@lekoala/date-picker 0.5.3 → 0.6.0

package/src/date-picker.js

@@ -12,17 +12,14 @@ import { DateFieldController, isEditable } from "./date-field.js";
 import { DateRangeController, normalizeRange } from "./date-range.js";
 import { createDateAdapter, formatLongDate, resolveLocale } from "./intl.js";
 import { getDefaultMessages, setDefaultMessages, subscribeDefaultMessages } from "./messages.js";
+import { createSession, guard } from "./session.js";
 import { compareTimes, isTime } from "./time.js";
 import { upgradeProperties } from "./upgrade-properties.js";
 
 let uid = 0;
 
-/** Pointer travel, in CSS pixels, that turns a press into an endpoint drag. */
-const DRAG_THRESHOLD = 4;
-
-/** A grid activation intent: the generation at interaction time plus the bound
- * a drag drop targets, empty for a normal pick.
- * @typedef {{id: number, endpoint: "" | "start" | "end"}} PickIntent */
+/** A grid activation intent: the generation at interaction time.
+ * @typedef {{id: number}} PickIntent */
 
 export class DatePickerElement extends HTMLElement {
   static observedAttributes = ["value", "locale", "min", "max", "open-on-focus", "month-format"];
@@ -73,10 +70,6 @@ export class DatePickerElement extends HTMLElement {
     this._activationId = 0;
     /** Candidate date currently projected onto the calendar band, if any. */
     this._previewDate = "";
-    /** Live endpoint drag, or null. @type {{pointerId:number, endpoint:"start"|"end", x:number, y:number, date:string, active:boolean} | null} */
-    this._drag = null;
-    /** A real drag already committed; swallow the click that follows it. */
-    this._suppressGridClick = false;
     /** Overlaid calendar triggers, one per field (single) or per bound (range). @type {{button: HTMLButtonElement, endpoint: "" | "start" | "end"}[]} */
     this._buttons = [];
     /** Control that opened the popover, so single mode can restore focus to it.
@@ -89,7 +82,8 @@ export class DatePickerElement extends HTMLElement {
     this._formatHint = null;
     /** Inputs whose placeholder was generated by this element. */
     this._generatedPlaceholders = new WeakSet();
-    this._controller = null;
+    /** Connection lifetime token. Captured by every async operation. @type {AbortController | null} */
+    this._session = null;
     this._stopTracking = null;
     this._open = false;
     this._suppressFocusOpen = false;
@@ -115,16 +109,9 @@ export class DatePickerElement extends HTMLElement {
     return this.hasAttribute("range") && Boolean(this._range);
   }
 
-  /** A commit result may only be applied while this picker still owns the
-   * controller that produced it. Disconnect tears controllers down and
-   * reconnect builds new ones, so a previous instance can never write again.
-   * @param {DateFieldController} field */
-  _ownsField(field) {
-    return this._connected && (field === this._field || Boolean(this._fields?.includes(field)));
-  }
-
   connectedCallback() {
     if (this._connected) return;
+    this._session = createSession();
     upgradeProperties(this, [
       "locale",
       "min",
@@ -139,17 +126,34 @@ export class DatePickerElement extends HTMLElement {
       "renderDay",
       "isDateDisabled",
     ]);
+    this._normalizeAttributes();
     if (this.hasAttribute("range")) this._connectRange();
     else this._connectSingle();
+    // A refused structure (missing input) must not leave a live session behind:
+    // _connected stays the readiness gate, the session is only the token.
+    if (!this._connected) {
+      this._session.abort();
+      this._session = null;
+      return;
+    }
     // The range setter requires the controller created by _connectRange().
-    if (this._connected) {
-      upgradeProperties(this, ["value", "range"]);
-      this._stopDefaultMessages = subscribeDefaultMessages(() => {
-        if (this._messages === null) this._refreshMessages();
-      });
-      // Applying the initial value clears custom validity; check it against
-      // min/max/isDateDisabled/source like any later constraint change.
-      void this.validate();
+    upgradeProperties(this, ["value", "range"]);
+    this._stopDefaultMessages = subscribeDefaultMessages(() => {
+      if (this._messages === null) this._refreshMessages();
+    });
+    // Applying the initial value clears custom validity; check it against
+    // min/max/isDateDisabled/source like any later constraint change.
+    void this.validate();
+  }
+
+  /** Establish the canonical connect-time state: invalid constraints are
+   * dropped here, not rewritten while the element is detached. */
+  _normalizeAttributes() {
+    const value = this.getAttribute("value");
+    if (value && !isDate(value)) this.removeAttribute("value");
+    for (const name of ["min", "max"]) {
+      const raw = this.getAttribute(name);
+      if (raw && !isDate(raw)) this.removeAttribute(name);
     }
   }
 
@@ -276,8 +280,8 @@ export class DatePickerElement extends HTMLElement {
     this._connected = false;
     this._suppressFocusOpen = false;
     this.hide(false);
-    this._controller?.abort();
-    this._controller = null;
+    this._session?.abort();
+    this._session = null;
     this._clearTimeOrderValidity();
     this._timeFields = [null, null];
     if (this._rangeMode()) {
@@ -317,6 +321,9 @@ export class DatePickerElement extends HTMLElement {
   /** @param {string} name @param {string|null} oldValue @param {string|null} newValue */
   attributeChangedCallback(name, oldValue, newValue) {
     if (this._reflecting || oldValue === newValue) return;
+    // Attributes are prepared offline and normalized at connect: no reflection,
+    // constrained sync or validation runs on a detached element.
+    if (!this._connected) return;
     if (name === "value" && newValue && !isDate(newValue)) {
       this._reflectValue(this._value);
       return;
@@ -329,7 +336,6 @@ export class DatePickerElement extends HTMLElement {
       }
       return;
     }
-    if (!this._connected) return;
     if (name === "value") {
       if (this._rangeMode()) return;
       if (!newValue || isDate(newValue)) {
@@ -559,7 +565,6 @@ export class DatePickerElement extends HTMLElement {
       const field = this._fields[index];
       button.disabled = Boolean(field?.input.disabled || field?.input.readOnly);
     }
-    this._syncDragAffordance();
     const active = this._range?.activeEndpoint === "end" ? 1 : 0;
     const activeInput = this._fields[active]?.input;
     if (this._open && activeInput && !isEditable(activeInput)) this.hide(false);
@@ -679,9 +684,11 @@ export class DatePickerElement extends HTMLElement {
         if (!(event.target instanceof HTMLFormElement) || !input || event.target !== input.form) return;
         // Reset is cancelable and runs before native values have been restored.
         this.hide(false);
-        queueMicrotask(() => {
-          if (!signal.aborted && !event.defaultPrevented) restore();
-        });
+        queueMicrotask(
+          guard(signal, () => {
+            if (!event.defaultPrevented) restore();
+          }),
+        );
       },
       { capture: true, signal },
     );
@@ -693,9 +700,9 @@ export class DatePickerElement extends HTMLElement {
     const button = this._buttons[0]?.button;
     const calendar = this._calendar;
     if (!input || !button || !calendar) return;
-    const controller = new AbortController();
-    this._controller = controller;
-    const { signal } = controller;
+    const session = this._session;
+    if (!session) return;
+    const { signal } = session;
 
     input.addEventListener(
       "input",
@@ -769,7 +776,7 @@ export class DatePickerElement extends HTMLElement {
         // The app listener on <date-picker> runs after this during bubbling;
         // defer the commit so preventDefault() is actually respected.
         queueMicrotask(() => {
-          if (signal.aborted || custom.defaultPrevented || !this._connected) return;
+          if (signal.aborted || custom.defaultPrevented) return;
           // A grid pick that resolves after the popup closed, after a newer pick
           // or after a programmatic value must not overwrite it. A programmatic
           // calendar.activateDate() carries no intent and still commits.
@@ -792,9 +799,9 @@ export class DatePickerElement extends HTMLElement {
   _bindRange() {
     const calendar = this._calendar;
     if (!this._fields || !this._buttons.length || !calendar) return;
-    const controller = new AbortController();
-    this._controller = controller;
-    const { signal } = controller;
+    const session = this._session;
+    if (!session) return;
+    const { signal } = session;
 
     for (const [index, field] of this._fields.entries()) {
       const endpoint = index === 1 ? "end" : "start";
@@ -834,14 +841,6 @@ export class DatePickerElement extends HTMLElement {
     calendar.addEventListener(
       "click",
       (event) => {
-        if (this._suppressGridClick) {
-          // The gesture already committed through the drop path; this click is
-          // only the tail of the drag and must not activate a second time.
-          this._suppressGridClick = false;
-          event.preventDefault();
-          event.stopImmediatePropagation();
-          return;
-        }
         this._captureGridIntent(event);
       },
       { capture: true, signal },
@@ -857,17 +856,14 @@ export class DatePickerElement extends HTMLElement {
         const date = custom.detail?.date;
         if (!isDate(date)) return;
         queueMicrotask(() => {
-          if (signal.aborted || custom.defaultPrevented || !this._connected || !this._range) return;
+          if (signal.aborted || custom.defaultPrevented || !this._range) return;
           const intent = /** @type {PickIntent | undefined} */ (activationIntents.get(custom));
           // A response is dropped when the active endpoint changed, the popup
           // closed or a newer activation superseded this one.
           if (intent === undefined || intent.id !== this._activationId) return;
           const editable = (/** @type {"start" | "end"} */ bound) => this._boundEditable(bound);
-          // Click, keyboard and drop share this one machine; only the entry
-          // point differs, a drag naming the handle it grabbed.
-          const result = intent.endpoint
-            ? this._range.moveEndpoint(date, intent.endpoint, editable)
-            : this._range.activate(date, editable);
+          // Click and keyboard share this one machine.
+          const result = this._range.activate(date, editable);
           if (result.status === "refused") {
             this._calendar?.dispatchEvent(
               new CustomEvent("dateinvalid", {
@@ -878,9 +874,6 @@ export class DatePickerElement extends HTMLElement {
             return;
           }
           this._applyRangeTransition(result);
-          // A drop adjusts an existing range rather than validating it, so the
-          // popup stays open for the next adjustment.
-          if (intent.endpoint) return;
           if (result.close || result.status === "complete") {
             this.hide(false);
             this._focusField(result.endpoint);
@@ -894,11 +887,6 @@ export class DatePickerElement extends HTMLElement {
     calendar.addEventListener("datefocus", (event) => this._onGridDateFocus(event), { signal });
     calendar.addEventListener("pointerover", (event) => this._onGridPointerOver(event), { signal });
     calendar.addEventListener("pointerleave", () => this._onGridPointerLeave(), { signal });
-    calendar.addEventListener("pointerdown", (event) => this._onGridPointerDown(event), { signal });
-    calendar.addEventListener("pointermove", (event) => this._onGridPointerMove(event), { signal });
-    calendar.addEventListener("pointerup", (event) => this._onGridPointerUp(event), { signal });
-    calendar.addEventListener("pointercancel", (event) => this._onGridPointerCancel(event), { signal });
-    calendar.addEventListener("lostpointercapture", (event) => this._onGridPointerCancel(event), { signal });
     // Re-check availability after a source load. validate() commits with
     // moveDisplay:false, so the visible month stays where the user navigated.
     calendar.addEventListener("dateloadend", () => void this.validate(), { signal });
@@ -1018,23 +1006,21 @@ export class DatePickerElement extends HTMLElement {
       const key = /** @type {KeyboardEvent} */ (event).key;
       if (key !== "Enter" && key !== " ") return;
     }
-    // The click tail of a drag never activates: it must not supersede the drop.
-    if (event.type === "click" && this._suppressGridClick) return;
     if (!(event.target instanceof Element)) return;
     const cell = event.target.closest(".dp-day[data-date]");
     const date = cell?.getAttribute("data-date") || "";
     if (!isDate(date)) return;
-    this._attachIntent(date, "");
+    this._attachIntent(date);
   }
 
   /**
    * Hand a new intent to the calendar's next activation of `date`. Taking a
    * new generation supersedes every earlier pending activation.
-   * @param {string} date @param {"" | "start" | "end"} endpoint
+   * @param {string} date
    */
-  _attachIntent(date, endpoint) {
+  _attachIntent(date) {
     if (!this._calendar) return;
-    this._calendar._hostIntent = { date, intent: { id: ++this._activationId, endpoint } };
+    this._calendar._hostIntent = { date, intent: { id: ++this._activationId } };
   }
 
   /**
@@ -1089,16 +1075,16 @@ export class DatePickerElement extends HTMLElement {
    * `rangechange`, no field write, no validation and no source request — the
    * projection reads the month state already loaded, and the real availability
    * check still runs on commit.
-   * @param {string} date @param {"" | "start" | "end"} [endpoint]
+   * @param {string} date
    */
-  _setPreview(date, endpoint = "") {
+  _setPreview(date) {
     const calendar = this._calendar;
     if (!calendar || !this._range || !this._open) return;
     // A cell already known to be unavailable must not promise a band that the
     // commit would refuse.
     const candidate = isDate(date) && !calendar.getDateState(date).disabled ? date : "";
     const preview = candidate
-      ? this._range.previewRange(candidate, endpoint, (bound) => this._boundEditable(bound))
+      ? this._range.previewRange(candidate, (bound) => this._boundEditable(bound))
       : null;
     if (!preview) {
       this._clearPreview();
@@ -1119,7 +1105,6 @@ export class DatePickerElement extends HTMLElement {
   _onGridDateFocus(event) {
     // The keyboard candidate is the cell that actually took focus, so Enter
     // commits exactly what the roving focus was previewing.
-    if (this._drag) return;
     const date = /** @type {CustomEvent} */ (event).detail?.date;
     if (isDate(date)) this._setPreview(date);
   }
@@ -1131,15 +1116,11 @@ export class DatePickerElement extends HTMLElement {
    */
   _onGridPointerOver(event) {
     const pointer = /** @type {PointerEvent} */ (event);
-    if (this._drag || pointer.pointerType === "touch") return;
+    if (pointer.pointerType === "touch") return;
     this._setPreview(this._cellDate(pointer.target));
   }
 
   _onGridPointerLeave() {
-    // Before capture, a gesture that leaves the grid can no longer become a
-    // drag; drop it so it cannot block the next press.
-    if (this._drag?.active === false) this._drag = null;
-    if (this._drag) return;
     this._clearPreview();
   }
 
@@ -1150,141 +1131,6 @@ export class DatePickerElement extends HTMLElement {
     return isDate(date) ? date : "";
   }
 
-  /** @param {number} x @param {number} y @returns {string} */
-  _dateAtPoint(x, y) {
-    const element = this.ownerDocument.elementFromPoint(x, y);
-    if (!(element instanceof Element) || !this._calendar?.contains(element)) return "";
-    return this._cellDate(element);
-  }
-
-  /**
-   * Arm an endpoint drag. Only a complete, ordered range offers two distinct
-   * handles; a one-day range carries both markers on the same cell, and
-   * guessing which one the user meant would be worse than not dragging.
-   * @param {Event} event
-   */
-  _onGridPointerDown(event) {
-    const pointer = /** @type {PointerEvent} */ (event);
-    this._suppressGridClick = false;
-    // An armed gesture that never started and never released (the pointer left
-    // the grid) must not block the next one.
-    if (this._drag?.active === false) this._drag = null;
-    if (!this._open || !this._range || this._drag) return;
-    if (!pointer.isPrimary || pointer.button !== 0) return;
-    // Mouse and pen first: touch keeps native scrolling (no global
-    // `touch-action: none`) and stays a plain tap.
-    if (pointer.pointerType !== "mouse" && pointer.pointerType !== "pen") return;
-    if (!this._range.complete) return;
-    const cell = pointer.target instanceof Element ? pointer.target.closest(".dp-day[data-date]") : null;
-    if (!(cell instanceof HTMLElement)) return;
-    const isStart = cell.hasAttribute("data-range-start");
-    const isEnd = cell.hasAttribute("data-range-end");
-    if (isStart === isEnd) return;
-    const endpoint = isStart ? "start" : "end";
-    const date = this._cellDate(cell);
-    if (!date || !this._boundEditable(endpoint)) return;
-    this._drag = {
-      pointerId: pointer.pointerId,
-      endpoint,
-      x: pointer.clientX,
-      y: pointer.clientY,
-      date,
-      active: false,
-    };
-  }
-
-  /** @param {Event} event */
-  _onGridPointerMove(event) {
-    const pointer = /** @type {PointerEvent} */ (event);
-    const drag = this._drag;
-    if (!drag || pointer.pointerId !== drag.pointerId) return;
-    if (!drag.active) {
-      // A press and release without travel stays a plain click.
-      const travelled =
-        Math.abs(pointer.clientX - drag.x) > DRAG_THRESHOLD ||
-        Math.abs(pointer.clientY - drag.y) > DRAG_THRESHOLD;
-      if (!travelled) return;
-      drag.active = true;
-      // Capture only once the gesture is a drag. Capturing on the press would
-      // retarget the trailing click to the calendar and swallow a plain pick
-      // on the very cell that carries a handle.
-      try {
-        this._calendar?.setPointerCapture(drag.pointerId);
-      } catch {
-        // No active pointer for this id (synthetic event): move and up still
-        // arrive through normal bubbling.
-      }
-      this._syncDragAffordance();
-    }
-    const date = this._dateAtPoint(pointer.clientX, pointer.clientY);
-    // An unavailable cell is not a drop target: hold the last valid projection
-    // instead of promising a move that would be refused.
-    if (!date || this._calendar?.getDateState(date).disabled) return;
-    drag.date = date;
-    this._setPreview(date, drag.endpoint);
-  }
-
-  /** @param {Event} event */
-  _onGridPointerUp(event) {
-    const pointer = /** @type {PointerEvent} */ (event);
-    const drag = this._drag;
-    if (!drag || pointer.pointerId !== drag.pointerId) return;
-    this._drag = null;
-    this._releaseDragCapture(drag.pointerId);
-    if (!drag.active) {
-      this._syncDragAffordance();
-      return;
-    }
-    this._suppressGridClick = true;
-    const transition = this._range?.projectEndpoint(drag.date, drag.endpoint, (bound) =>
-      this._boundEditable(bound),
-    );
-    if (!transition || transition.status === "refused" || !transition.changedEndpoints.length) {
-      this._syncHighlight();
-      return;
-    }
-    // The drop goes through the same availability check and the same
-    // cancelable `dateactivate` seam as a click, under the same generation
-    // guard: a late response can never move a bound after the popup closed or
-    // after a newer interaction.
-    const target = drag.endpoint === "start" ? transition.range.start : transition.range.end;
-    this._attachIntent(target, drag.endpoint);
-    void this._calendar?.activateDate(target);
-  }
-
-  /** @param {Event} event */
-  _onGridPointerCancel(event) {
-    const pointer = /** @type {PointerEvent} */ (event);
-    const drag = this._drag;
-    if (!drag || pointer.pointerId !== drag.pointerId) return;
-    this._drag = null;
-    this._releaseDragCapture(drag.pointerId);
-    // A cancelled gesture commits nothing and restores the committed band.
-    this._syncHighlight();
-  }
-
-  /** @param {number} pointerId */
-  _releaseDragCapture(pointerId) {
-    const calendar = this._calendar;
-    if (calendar?.hasPointerCapture(pointerId)) calendar.releasePointerCapture(pointerId);
-  }
-
-  /** Expose whether the band currently offers draggable handles, and whether
-   * one is being dragged, so the cursor can say so. */
-  _syncDragAffordance() {
-    const calendar = this._calendar;
-    if (!calendar || !this._range) return;
-    if (this._drag?.active) {
-      calendar.setAttribute("data-range-drag", "active");
-      return;
-    }
-    const { start, end } = this._range;
-    const draggable =
-      this._range.complete && start !== end && (this._boundEditable("start") || this._boundEditable("end"));
-    if (draggable) calendar.setAttribute("data-range-drag", "ready");
-    else calendar.removeAttribute("data-range-drag");
-  }
-
   /** @param {KeyboardEvent} event */
   _onEscape(event) {
     if (event.key === "Escape" && this._open) {
@@ -1426,12 +1272,13 @@ export class DatePickerElement extends HTMLElement {
   /** @param {boolean} emit @param {{force?: boolean, moveDisplay?: boolean}} [options] */
   async _commitText(emit, options = {}) {
     const field = this._field;
-    if (!field) return false;
+    const session = this._session;
+    if (!field || !session) return false;
     // Blur/change skip untouched text; explicit validation must recheck the
     // current value against the latest constraints regardless of dirtiness.
     if (!options.force && !field.isDirty) return false;
     const result = await field.commit(options);
-    if (!this._ownsField(field) || !field.isCommitCurrent(result.commitId)) {
+    if (session.signal.aborted || !field.isCommitCurrent(result.commitId)) {
       return false;
     }
     if (result.status === "stale" || result.status === "invalid") return false;
@@ -1446,12 +1293,13 @@ export class DatePickerElement extends HTMLElement {
   /** @param {"start" | "end"} which */
   async _commitFieldText(which) {
     const fields = this._fields;
-    if (!fields) return false;
+    const session = this._session;
+    if (!fields || !session) return false;
     const index = which === "end" ? 1 : 0;
     const field = fields[index];
     if (!field?.isDirty) return false;
     const result = await field.commit();
-    if (!this._ownsField(field) || !field.isCommitCurrent(result.commitId)) return false;
+    if (session.signal.aborted || !field.isCommitCurrent(result.commitId)) return false;
     if (result.status === "stale") return false;
     if (result.status === "invalid") {
       this._orderTags.delete(index);
@@ -1537,7 +1385,6 @@ export class DatePickerElement extends HTMLElement {
     this._previewDate = "";
     this._calendar.removeAttribute("data-range-preview");
     this._calendar.highlightedRange = this._displayRange();
-    this._syncDragAffordance();
   }
 
   /**
@@ -1610,12 +1457,9 @@ export class DatePickerElement extends HTMLElement {
   /** Run a timer only while the connection that scheduled it remains active.
    * @param {() => void} callback */
   _defer(callback) {
-    const controller = this._controller;
-    setTimeout(() => {
-      if (!this._connected || !controller || controller.signal.aborted || this._controller !== controller)
-        return;
-      callback();
-    }, 0);
+    const session = this._session;
+    if (!session) return;
+    setTimeout(guard(session.signal, callback), 0);
   }
 
   _restoreDefault() {
@@ -1695,6 +1539,7 @@ export class DatePickerElement extends HTMLElement {
 
   /** @public */
   async validate() {
+    const session = this._session;
     if (this._rangeMode()) {
       const fields = this._fields;
       if (!fields) return true;
@@ -1703,7 +1548,12 @@ export class DatePickerElement extends HTMLElement {
       // Empty text flows through commit()'s "clear" outcome, not an early exit.
       for (const [index, field] of fields.entries()) {
         const result = await field.commit({ moveDisplay: false });
-        if (!this._ownsField(field) || !field.isCommitCurrent(result.commitId)) continue;
+        // A dead session owns nothing: report authored validity and stop,
+        // instead of revalidating (and writing) the rebuilt instance.
+        if (!session || session.signal.aborted) {
+          return fields.every((field) => field.input.checkValidity());
+        }
+        if (!field.isCommitCurrent(result.commitId)) continue;
         // A parse/source error replaced the order error, which no longer owns it.
         if (result.status === "invalid") this._orderTags.delete(index);
         if (result.status === "ok" || result.status === "clear") {
@@ -1732,6 +1582,13 @@ export class DatePickerElement extends HTMLElement {
     // Empty text flows through commit()'s "clear" outcome so the canonical
     // value and hidden ISO are cleared with it.
     await this._commitText(false, { force: true, moveDisplay: false });
+    if (!session || session.signal.aborted) {
+      // Read native validity; never revalidate a rebuilt instance from a dead
+      // operation (the time order would write on the new companions).
+      return (
+        input.checkValidity() && this._timeFields.every((timeInput) => timeInput?.checkValidity() ?? true)
+      );
+    }
     // Same start-then-end order as the range path, so a from/to inversion
     // ends reported on "end". A programmatic time change resyncs here too.
     this._revalidateTimeOrder("start");
@@ -1776,12 +1633,8 @@ export class DatePickerElement extends HTMLElement {
     position();
     this._stopTracking = autoUpdate(this, panel, position);
     if (options.moveFocus !== false) {
-      const controller = this._controller;
-      queueMicrotask(() => {
-        if (!this._connected || !controller || controller.signal.aborted || this._controller !== controller)
-          return;
-        calendar.focusGrid();
-      });
+      const session = this._session;
+      if (session) queueMicrotask(guard(session.signal, () => calendar.focusGrid()));
     }
     this.dispatchEvent(new Event("open", { bubbles: true }));
   }
@@ -1807,11 +1660,6 @@ export class DatePickerElement extends HTMLElement {
     this._open = false;
     this._setExpanded(false);
     this._supersedeActivations();
-    this._suppressGridClick = false;
-    if (this._drag) {
-      this._releaseDragCapture(this._drag.pointerId);
-      this._drag = null;
-    }
     this._syncHighlight();
     if (restoreFocus) {
       if (this._rangeMode()) {

package/src/date-range.js

@@ -72,10 +72,9 @@ export function rangePosition(date, range) {
  * - activating through `start` commits `start`, moves the active endpoint to
  *   `end` and leaves the popup open for the second selection.
  *
- * Each rule exists once, as a `project*()` projection; `activate()` and
- * `moveEndpoint()` only apply one. Hover, keyboard and drag previews read the
- * same projections, so a second copy of the interaction rules cannot drift
- * into the DOM layer.
+ * Each rule exists once, as a `project()` projection; `activate()` only
+ * applies one. Keyboard and pointer previews read the same projection, so a
+ * second copy of the interaction rules cannot drift into the DOM layer.
  *
  * Text entry is deliberately outside this machine: a typed pair may be
  * temporarily inverted and report a validation error. It is the coordinator's
@@ -195,53 +194,23 @@ export class DateRangeController {
     };
   }
 
-  /**
-   * Project a direct move of one bound (endpoint drag), without mutating.
-   *
-   * Only a complete, ordered pair offers two handles to grab, and a handle
-   * never crosses the other one: the candidate is clamped to the opposite
-   * bound, so the previewed band is exactly what a drop commits. Equality is
-   * allowed (a one-day range).
-   * @param {string} date
-   * @param {"start" | "end"} endpoint
-   * @param {(bound: "start" | "end") => boolean} [editable]
-   * @returns {RangeTransition}
-   */
-  projectEndpoint(date, endpoint, editable = () => true) {
-    if (!isDate(date)) throw new TypeError(`Invalid range activation: ${date}`);
-    if (!this.complete || !editable(endpoint)) return this._refuse(endpoint);
-    const { start, end } = this;
-    const previous = endpoint === "start" ? start : end;
-    const target = endpoint === "start" ? earlier(date, end) : later(date, start);
-    return {
-      status: "complete",
-      endpoint,
-      changedEndpoints: target === previous ? [] : [endpoint],
-      range: endpoint === "start" ? { start: target, end } : { start, end: target },
-      activeEndpoint: endpoint,
-    };
-  }
-
   /**
    * Displayable band a candidate date would produce, or `null` when there is
-   * nothing to promise. Single source of truth for hover, keyboard and drag
-   * previews: the projection rules with no mutation and no event.
+   * nothing to promise. Single source of truth for hover and keyboard previews:
+   * the projection rules with no mutation and no event.
    *
-   * Without a drag handle a preview only speaks during range creation, when
-   * exactly one bound is anchored and the other is still open. An empty range
-   * has no anchor to project from, and a complete pair is not a promise in
-   * progress — previewing it would repaint the committed band on every hover.
+   * A preview only speaks during range creation, when exactly one bound is
+   * anchored and the other is still open. An empty range has no anchor to
+   * project from, and a complete pair is not a promise in progress —
+   * previewing it would repaint the committed band on every hover.
    * @param {string} date
-   * @param {"" | "start" | "end"} [endpoint] drag handle, empty for a normal pick
    * @param {(bound: "start" | "end") => boolean} [editable]
    * @returns {DateRange | null}
    */
-  previewRange(date, endpoint = "", editable = () => true) {
+  previewRange(date, editable = () => true) {
     if (!isDate(date)) return null;
-    if (!endpoint && Boolean(this.start) === Boolean(this.end)) return null;
-    const transition = endpoint
-      ? this.projectEndpoint(date, endpoint, editable)
-      : this.project(date, editable);
+    if (Boolean(this.start) === Boolean(this.end)) return null;
+    const transition = this.project(date, editable);
     if (transition.status === "refused") return null;
     const { start, end } = transition.range;
     if (!start || (end && compareDates(end, start) < 0)) return null;
@@ -266,17 +235,6 @@ export class DateRangeController {
   activate(date, editable = () => true) {
     return this._apply(this.project(date, editable));
   }
-
-  /**
-   * Apply a direct move of one bound (endpoint drag).
-   * @param {string} date
-   * @param {"start" | "end"} endpoint
-   * @param {(bound: "start" | "end") => boolean} [editable]
-   * @returns {RangeTransition}
-   */
-  moveEndpoint(date, endpoint, editable = () => true) {
-    return this._apply(this.projectEndpoint(date, endpoint, editable));
-  }
 }
 
 /** @param {string} a @param {string} b */