@rogieking/figui3 6.9.9 → 6.11.0

package/fig-lab.js

@@ -40,6 +40,12 @@ class FigFieldSlider extends HTMLElement {
     "color",
     "text",
     "full",
+    "elastic",
+    "size",
+    "name",
+    "class",
+    "data-wave-index",
+    "data-active",
     "data-elastic-dragging",
     "style",
   ]);
@@ -326,6 +332,7 @@ class FigFieldSlider extends HTMLElement {
 
   #handleElasticPointerDown(event) {
     if (event.button !== 0 || this.hasAttribute("disabled")) return;
+    if (this.getAttribute("elastic") === "false") return;
     if (event.target?.closest?.("fig-input-number")) return;
     const rangeInput =
       this.#slider?.querySelector('input[type="range"]') ?? this.#rangeInput;
@@ -498,7 +505,6 @@ class FigFieldSlider extends HTMLElement {
     this.removeAttribute("data-elastic-dragging");
     this.style.removeProperty("--fig-field-slider-elastic-size");
     this.style.removeProperty("--fig-field-slider-elastic-scale");
-    this.style.removeProperty("--fig-field-slider-elastic-origin");
   }
 
   #valueFromPointer(event) {
@@ -594,7 +600,7 @@ class FigFieldSlider extends HTMLElement {
   }
 
   #forwardSliderEvent(type, event) {
-    event.stopPropagation();
+    event.stopImmediatePropagation();
     if (type === "change") {
       this.#resetElasticPull();
     }
@@ -1833,11 +1839,13 @@ class FigInputOscillator extends HTMLElement {
   #bounds = null;
   #handleAmplitude = null;
   #handleFrequency = null;
-  #addTypeControl = null;
   #fields = [];
   #typeControls = [];
   #waveRows = [];
+  #waveGroups = [];
+  #expandedWaveIndices = new Set();
   #resizeObserver = null;
+  #activeFieldInput = null;
 
   static TYPES = [
     { name: "Wave", value: "sine" },
@@ -2090,8 +2098,8 @@ class FigInputOscillator extends HTMLElement {
           <line class="fig-input-oscillator-baseline"></line>
           <path class="fig-input-oscillator-path"></path>
           <circle class="fig-input-oscillator-playhead"></circle>
-          <foreignObject class="fig-input-oscillator-handle fig-input-oscillator-amplitude-handle" data-handle="amplitude" width="20" height="20"><div class="fig-input-oscillator-handle-inner"><fig-tooltip text="Amplitude"><fig-handle type="canvas" size="small" aria-label="Oscillator amplitude handle"${disabled}></fig-handle></fig-tooltip></div></foreignObject>
-          <foreignObject class="fig-input-oscillator-handle fig-input-oscillator-frequency-handle" data-handle="frequency" width="20" height="20"><div class="fig-input-oscillator-handle-inner"><fig-tooltip text="Frequency"><fig-handle type="canvas" size="small" aria-label="Oscillator frequency handle"${disabled}></fig-handle></fig-tooltip></div></foreignObject>
+          <foreignObject class="fig-input-oscillator-handle fig-input-oscillator-amplitude-handle" data-handle="amplitude" width="20" height="20"><div class="fig-input-oscillator-handle-inner"><fig-tooltip text="Amplitude"><fig-handle size="small" aria-label="Oscillator amplitude handle"${disabled}></fig-handle></fig-tooltip></div></foreignObject>
+          <foreignObject class="fig-input-oscillator-handle fig-input-oscillator-frequency-handle" data-handle="frequency" width="20" height="20"><div class="fig-input-oscillator-handle-inner"><fig-tooltip text="Frequency"><fig-handle size="small" aria-label="Oscillator frequency handle"${disabled}></fig-handle></fig-tooltip></div></foreignObject>
         </svg>
       </div>
       ${this.#isEditEnabled() ? this.#getWaveControlsHTML(disabled) : ""}`;
@@ -2100,12 +2108,6 @@ class FigInputOscillator extends HTMLElement {
   #getWaveControlsHTML(disabled) {
     return `<div class="fig-input-oscillator-waves">
       ${this.#waves.map((wave, index) => this.#getWaveRowHTML(wave, index, disabled)).join("")}
-      <hstack class="fig-input-oscillator-add-wave">
-        <fig-button class="fig-input-oscillator-add-type-button" type="select" variant="ghost" icon aria-label="Choose waveform type"${disabled}>
-          <fig-icon name="settings"></fig-icon>
-          ${this.#getWaveTypeDropdownHTML("fig-input-oscillator-add-type", "sine", disabled)}
-        </fig-button>
-      </hstack>
     </div>`;
   }
 
@@ -2113,18 +2115,27 @@ class FigInputOscillator extends HTMLElement {
     const removeDisabled = disabled || this.#waves.length <= 1 ? " disabled" : "";
     const active = index === this.#activeWaveIndex ? " data-active" : "";
     const label = FigInputOscillator.#labelForType(wave.type);
-    return `<details class="fig-input-oscillator-wave" data-wave-index="${index}" open>
-      <summary class="fig-input-oscillator-wave-summary">
-        <label>${FigInputOscillator.waveIcon(wave.type, 24)}<span>${label}</span></label>
-        <fig-button class="fig-input-oscillator-remove-button" variant="ghost" icon data-wave-index="${index}" aria-label="Remove waveform"${removeDisabled}><fig-icon name="minus"></fig-icon></fig-button>
-      </summary>
+    const open = this.#expandedWaveIndices.has(index) ? ' open="true"' : ' open="false"';
+    return `<fig-group class="fig-input-oscillator-wave" collapsible borderless compact="true"${open} data-wave-index="${index}">
+      <fig-header borderless>
+        <h3>${label}</h3>
+        <fig-tooltip text="Remove form">
+          <fig-button class="fig-input-oscillator-remove-button" variant="ghost" icon data-wave-index="${index}" aria-label="Remove form"${removeDisabled}><fig-icon name="minus"></fig-icon></fig-button>
+        </fig-tooltip>
+        <fig-tooltip text="Add form">
+          <fig-button class="fig-input-oscillator-add-type-button" type="select" variant="ghost" icon data-wave-index="${index}" aria-label="Add form"${disabled}>
+            <fig-icon name="add"></fig-icon>
+            ${this.#getWaveTypeDropdownHTML("fig-input-oscillator-add-type", "sine", disabled, index)}
+          </fig-button>
+        </fig-tooltip>
+      </fig-header>
       <div class="fig-input-oscillator-fields" data-wave-index="${index}"${active}>
         ${this.#getNumberFieldHTML(index, "frequency", "Frequency", 0.1, 16, 0.1, "")}
         ${this.#getNumberFieldHTML(index, "amplitude", "Amplitude", -4, 4, 0.1, "")}
         ${this.#getNumberFieldHTML(index, "phase", "Phase", -360, 360, 1, "°")}
         ${this.#getNumberFieldHTML(index, "offset", "Offset", -4, 4, 0.1, "")}
       </div>
-    </details>`;
+    </fig-group>`;
   }
 
   #getWaveTypeDropdownHTML(className, value, disabled, index = null) {
@@ -2135,9 +2146,9 @@ class FigInputOscillator extends HTMLElement {
         <label>${type.name}</label>
       </option>`;
     }).join("");
-    const indexAttr = index === null ? "" : ` data-wave-index="${index}"`;
-    const dropdownAttr = index === null ? ' type="dropdown" label="Choose waveform type"' : "";
-    return `<fig-dropdown class="${className}" value="${value}" experimental="modern"${dropdownAttr}${indexAttr}${disabled}>${options}</fig-dropdown>`;
+    const indexAttr =
+      index === null ? "" : ` data-wave-index="${FigInputOscillator.#escapeAttribute(String(index))}"`;
+    return `<fig-dropdown class="${className}" value="${value}" experimental="modern" type="dropdown" label="Add form"${indexAttr}${disabled}>${options}</fig-dropdown>`;
   }
 
   #getNumberFieldHTML(index, name, label, min, max, step, units) {
@@ -2146,11 +2157,7 @@ class FigInputOscillator extends HTMLElement {
       ? ` units="${FigInputOscillator.#escapeAttribute(units)}"`
       : "";
     const wave = this.#waves[index] || FigInputOscillator.#defaultWave();
-    return `<fig-field class="fig-input-oscillator-field" direction="horizontal" data-wave-index="${index}">
-      <label>${label}</label>
-      <fig-slider name="${name}" data-wave-index="${index}" value="${this.#round(wave[name])}" min="${min}" max="${max}" step="${step}" precision="${this.#precision}" text="true"${unitsAttr}${disabled}></fig-slider>
-    </fig-field>
-    `;
+    return `<fig-field-slider class="fig-input-oscillator-field" label="${label}" direction="horizontal" name="${name}" data-wave-index="${index}" value="${this.#round(wave[name])}" min="${min}" max="${max}" step="${step}" precision="${this.#precision}" elastic="false"${unitsAttr}${disabled}></fig-field-slider>`;
   }
 
   #cacheRefs() {
@@ -2161,16 +2168,36 @@ class FigInputOscillator extends HTMLElement {
     this.#bounds = this.querySelector(".fig-input-oscillator-bounds");
     this.#handleAmplitude = this.querySelector('[data-handle="amplitude"]');
     this.#handleFrequency = this.querySelector('[data-handle="frequency"]');
-    this.#addTypeControl = this.querySelector(".fig-input-oscillator-add-type");
     this.#typeControls = Array.from(
       this.querySelectorAll(".fig-input-oscillator-wave-type"),
     );
-    this.#fields = Array.from(this.querySelectorAll("fig-slider[name]"));
-    this.#waveRows = Array.from(this.querySelectorAll("[data-wave-index]")).filter(
-      (row) => row.classList.contains("fig-input-oscillator-field"),
+    this.#fields = Array.from(this.querySelectorAll("fig-field-slider[name]"));
+    this.#waveGroups = Array.from(
+      this.querySelectorAll("fig-group.fig-input-oscillator-wave"),
+    );
+    this.#waveRows = Array.from(
+      this.querySelectorAll(".fig-input-oscillator-fields"),
     );
   }
 
+  #reindexExpandedWaves(removedIndex) {
+    const nextExpanded = new Set();
+    for (const index of this.#expandedWaveIndices) {
+      if (index < removedIndex) nextExpanded.add(index);
+      else if (index > removedIndex) nextExpanded.add(index - 1);
+    }
+    this.#expandedWaveIndices = nextExpanded;
+  }
+
+  #reindexExpandedWavesAfterInsert(insertIndex) {
+    const nextExpanded = new Set();
+    for (const index of this.#expandedWaveIndices) {
+      nextExpanded.add(index >= insertIndex ? index + 1 : index);
+    }
+    nextExpanded.add(insertIndex);
+    this.#expandedWaveIndices = nextExpanded;
+  }
+
   #setupResizeObserver() {
     if (this.#resizeObserver || !window.ResizeObserver) return;
     this.#resizeObserver = new ResizeObserver(() => {
@@ -2344,12 +2371,17 @@ class FigInputOscillator extends HTMLElement {
     for (const field of this.#fields) {
       field.addEventListener("input", (event) => {
         event.stopPropagation();
-        this.#applyFieldValue(
-          this.#indexFromElement(field),
-          field.getAttribute("name"),
-          event.detail ?? event.currentTarget?.value ?? event.target?.value,
-          "input",
-        );
+        this.#activeFieldInput = field;
+        try {
+          this.#applyFieldValue(
+            this.#indexFromElement(field),
+            field.getAttribute("name"),
+            event.detail ?? event.currentTarget?.value ?? event.target?.value,
+            "input",
+          );
+        } finally {
+          this.#activeFieldInput = null;
+        }
       });
       field.addEventListener("change", (event) => {
         event.stopPropagation();
@@ -2362,31 +2394,64 @@ class FigInputOscillator extends HTMLElement {
       });
     }
 
-    for (const row of this.#waveRows) {
-      row.addEventListener("pointerdown", () => {
-        this.#setActiveWave(this.#indexFromElement(row));
+    for (const group of this.#waveGroups) {
+      group.addEventListener("pointerdown", () => {
+        this.#setActiveWave(this.#indexFromElement(group));
       });
-      row.addEventListener("focusin", () => {
-        this.#setActiveWave(this.#indexFromElement(row));
+      group.addEventListener("focusin", () => {
+        this.#setActiveWave(this.#indexFromElement(group));
+      });
+      group.addEventListener("openchange", (event) => {
+        const index = this.#indexFromElement(group);
+        if (event.detail?.open) {
+          this.#expandedWaveIndices.add(index);
+        } else {
+          this.#expandedWaveIndices.delete(index);
+        }
       });
     }
 
-    this.#addTypeControl?.addEventListener("change", (event) => {
-      if (this.#isDisabled()) return;
-      if (event.target !== this.#addTypeControl) return;
-      const type = this.#normalizeType(event.detail ?? this.#addTypeControl?.value);
-      this.#waves.push(FigInputOscillator.#defaultWave(type));
-      this.#activeWaveIndex = this.#waves.length - 1;
-      this.#render();
-      this.#emit("input");
-      this.#emit("change");
-    });
+    for (const control of this.querySelectorAll(".fig-input-oscillator-add-type")) {
+      const stopHeaderToggle = (event) => {
+        event.stopPropagation();
+      };
+      control.addEventListener("pointerdown", stopHeaderToggle);
+      control.addEventListener("click", stopHeaderToggle);
+      control.addEventListener("change", (event) => {
+        if (event.target !== control) return;
+        if (this.#isDisabled()) return;
+        const insertAfter = this.#indexFromElement(control);
+        const insertIndex = insertAfter + 1;
+        const type = this.#normalizeType(event.detail ?? control.value);
+        this.#waves.splice(insertIndex, 0, FigInputOscillator.#defaultWave(type));
+        this.#reindexExpandedWavesAfterInsert(insertIndex);
+        this.#activeWaveIndex = insertIndex;
+        this.#render();
+        this.#emit("input");
+        this.#emit("change");
+      });
+    }
+
+    for (const button of this.querySelectorAll(".fig-input-oscillator-add-type-button")) {
+      const stopHeaderToggle = (event) => {
+        event.stopPropagation();
+      };
+      button.addEventListener("pointerdown", stopHeaderToggle);
+      button.addEventListener("click", stopHeaderToggle);
+      button.closest("fig-tooltip")?.addEventListener("pointerdown", stopHeaderToggle);
+      button.closest("fig-tooltip")?.addEventListener("click", stopHeaderToggle);
+    }
 
     for (const button of this.querySelectorAll(".fig-input-oscillator-remove-button")) {
-      button.addEventListener("click", () => {
+      button.addEventListener("pointerdown", (event) => {
+        event.stopPropagation();
+      });
+      button.addEventListener("click", (event) => {
+        event.stopPropagation();
         if (this.#isDisabled() || this.#waves.length <= 1) return;
         const index = this.#indexFromElement(button);
         this.#waves.splice(index, 1);
+        this.#reindexExpandedWaves(index);
         this.#activeWaveIndex = Math.min(this.#activeWaveIndex, this.#waves.length - 1);
         this.#render();
         this.#emit("input");
@@ -2472,7 +2537,7 @@ class FigInputOscillator extends HTMLElement {
       ...this.#waves[index],
       [name]: next,
     });
-    this.#syncUI();
+    this.#syncUI({ skipFieldSync: eventType == "input" });
     this.#emit(eventType);
   }
 
@@ -2524,6 +2589,13 @@ class FigInputOscillator extends HTMLElement {
 
   #startDrag(event, type) {
     this.#isDragging = type;
+    this.#svg?.classList.add("dragging");
+    const dragCursor =
+      type === "frequency" ? "ew-resize" : type === "amplitude" ? "ns-resize" : "";
+    const prevBodyCursor = document.body.style.cursor;
+    if (dragCursor) {
+      document.body.style.cursor = dragCursor;
+    }
 
     const onMove = (moveEvent) => {
       if (!this.#isDragging) return;
@@ -2558,6 +2630,10 @@ class FigInputOscillator extends HTMLElement {
 
     const onUp = () => {
       this.#isDragging = null;
+      this.#svg?.classList.remove("dragging");
+      if (dragCursor) {
+        document.body.style.cursor = prevBodyCursor;
+      }
       document.removeEventListener("pointermove", onMove);
       document.removeEventListener("pointerup", onUp);
       this.#emit("change");
@@ -2584,9 +2660,9 @@ class FigInputOscillator extends HTMLElement {
     );
   }
 
-  #syncUI() {
+  #syncUI({ skipFieldSync = false } = {}) {
     this.#syncTypeControls();
-    this.#syncFields();
+    if (!skipFieldSync) this.#syncFields();
     this.#syncActiveWave();
     this.#updateWaveform();
   }
@@ -2600,9 +2676,16 @@ class FigInputOscillator extends HTMLElement {
 
   #syncFields() {
     for (const field of this.#fields) {
+      if (field === this.#activeFieldInput) continue;
       const index = this.#indexFromElement(field);
       const name = field.getAttribute("name");
-      field.setAttribute("value", this.#round(this.#waves[index]?.[name] ?? 0));
+      const next = this.#round(this.#waves[index]?.[name] ?? 0);
+      const slider = field.querySelector("fig-slider");
+      if (slider) {
+        slider.value = next;
+      } else {
+        field.setAttribute("value", String(next));
+      }
     }
   }
 
@@ -3149,3 +3232,441 @@ class FigInputAngle extends HTMLElement {
 }
 customElements.define("fig-input-angle", FigInputAngle);
 
+/* Reorder wrapper */
+class FigReorder extends HTMLElement {
+  static observedAttributes = ["axis", "handle", "disabled"];
+
+  static #DRAG_THRESHOLD = 6;
+
+  static #INTERACTIVE_SELECTORS = [
+    "input",
+    "button",
+    "select",
+    "textarea",
+    "a[href]",
+    "label",
+    "summary",
+    "fig-button",
+    "fig-dropdown",
+    "fig-slider",
+    "fig-input-number",
+    "fig-input-text",
+    "fig-field-slider",
+    "fig-checkbox",
+    "fig-switch",
+    "fig-combo-input",
+    "fig-segmented-control",
+    "fig-input-color",
+    "fig-input-fill",
+    '[contenteditable="true"]',
+  ];
+
+  #childObserver = null;
+  #bindings = new Map();
+  #drag = null;
+  #indicator = null;
+
+  connectedCallback() {
+    this.style.display = "contents";
+    this.#syncChildren();
+    this.#childObserver = new MutationObserver(() => this.#syncChildren());
+    this.#childObserver.observe(this, { childList: true });
+  }
+
+  disconnectedCallback() {
+    this.#childObserver?.disconnect();
+    this.#childObserver = null;
+    this.#unbindAll();
+    this.#cancelDrag();
+    this.#removeIndicator();
+  }
+
+  attributeChangedCallback() {
+    if (this.isConnected) this.#syncChildren();
+  }
+
+  get #disabled() {
+    return (
+      this.hasAttribute("disabled") && this.getAttribute("disabled") !== "false"
+    );
+  }
+
+  get #axis() {
+    const value = (this.getAttribute("axis") || "vertical").trim().toLowerCase();
+    return value === "horizontal" ? "horizontal" : "vertical";
+  }
+
+  get #handleSelector() {
+    return (this.getAttribute("handle") || "").trim();
+  }
+
+  #getElementChildren() {
+    return [...this.children].filter((node) => node.nodeType === Node.ELEMENT_NODE);
+  }
+
+  #syncChildren() {
+    const children = this.#getElementChildren();
+    const childSet = new Set(children);
+
+    for (const [child, binding] of this.#bindings) {
+      if (!childSet.has(child)) {
+        binding.target.removeEventListener(
+          "pointerdown",
+          binding.onPointerDown,
+          true,
+        );
+        this.#bindings.delete(child);
+      }
+    }
+
+    this.#clearHandleMarks(children);
+    this.#clearReorderItemMarks(children);
+
+    if (this.#disabled || children.length < 2) {
+      this.#unbindAll();
+      return;
+    }
+
+    for (const child of children) {
+      const target = this.#getDragTarget(child);
+      const existing = this.#bindings.get(child);
+      if (existing && existing.target === target) continue;
+      if (existing) {
+        existing.target.removeEventListener(
+          "pointerdown",
+          existing.onPointerDown,
+          true,
+        );
+        this.#bindings.delete(child);
+      }
+      if (!target) continue;
+      this.#bindChild(child, target);
+    }
+
+    this.#markHandles(children);
+    this.#markReorderItems(children);
+  }
+
+  #clearReorderItemMarks(children) {
+    for (const child of children) {
+      child.removeAttribute("data-reorder-item");
+    }
+  }
+
+  #markReorderItems(children) {
+    for (const child of children) {
+      child.setAttribute("data-reorder-item", "");
+    }
+  }
+
+  #clearHandleMarks(children) {
+    for (const child of children) {
+      child
+        .querySelectorAll("[data-reorder-handle]")
+        .forEach((node) => node.removeAttribute("data-reorder-handle"));
+    }
+  }
+
+  #markHandles(children) {
+    if (!this.#handleSelector) return;
+    for (const child of children) {
+      const handle = child.querySelector(this.#handleSelector);
+      if (handle) handle.setAttribute("data-reorder-handle", "");
+    }
+  }
+
+  #getDragTarget(child) {
+    if (this.#handleSelector) {
+      return child.querySelector(this.#handleSelector);
+    }
+    return child;
+  }
+
+  #bindChild(child, target) {
+    const onPointerDown = (event) => {
+      if (this.#disabled || this.#getElementChildren().length < 2) return;
+      if (event.button !== 0) return;
+      if (
+        !this.#handleSelector &&
+        this.#isInteractiveTarget(event.target, child)
+      ) {
+        return;
+      }
+      this.#startPendingDrag(event, child, target);
+    };
+
+    target.addEventListener("pointerdown", onPointerDown, true);
+    this.#bindings.set(child, { target, onPointerDown });
+  }
+
+  #isInteractiveTarget(target, child) {
+    let node = target;
+    while (node && node !== child) {
+      if (node instanceof Element) {
+        for (const selector of FigReorder.#INTERACTIVE_SELECTORS) {
+          if (node.matches(selector)) return true;
+        }
+      }
+      node = node.parentElement;
+    }
+    return false;
+  }
+
+  static #DRAGGING_BODY_CLASS = "fig-reorder-dragging";
+
+  static #setDocumentDragging(active) {
+    document.body.classList.toggle(FigReorder.#DRAGGING_BODY_CLASS, active);
+  }
+
+  #startPendingDrag(event, item, target) {
+    this.#cancelDrag();
+
+    const state = {
+      item,
+      target,
+      pointerId: event.pointerId,
+      oldIndex: this.#getElementChildren().indexOf(item),
+      startX: event.clientX,
+      startY: event.clientY,
+      active: false,
+      onMove: null,
+      onUp: null,
+      onKeyDown: null,
+    };
+
+    state.onMove = (moveEvent) => {
+      if (moveEvent.pointerId !== state.pointerId) return;
+
+      const dx = moveEvent.clientX - state.startX;
+      const dy = moveEvent.clientY - state.startY;
+
+      if (!state.active) {
+        if (dx * dx + dy * dy < FigReorder.#DRAG_THRESHOLD * FigReorder.#DRAG_THRESHOLD) {
+          return;
+        }
+        state.active = true;
+        event.preventDefault();
+        event.stopPropagation();
+        item.classList.add("dragging");
+        FigReorder.#setDocumentDragging(true);
+        try {
+          target.setPointerCapture(state.pointerId);
+        } catch {}
+      }
+
+      moveEvent.preventDefault();
+      const pointer =
+        this.#axis === "horizontal" ? moveEvent.clientX : moveEvent.clientY;
+      const index = this.#getInsertIndex(pointer);
+      this.#moveItemToIndex(item, index);
+      this.#updateIndicator(index, item);
+    };
+
+    state.onKeyDown = (keyEvent) => {
+      if (keyEvent.key !== "Escape" || !state.active) return;
+      keyEvent.preventDefault();
+      this.#finishDrag(state, true);
+    };
+
+    state.onUp = (upEvent) => {
+      if (upEvent.pointerId !== state.pointerId) return;
+      this.#finishDrag(state, false);
+    };
+
+    this.#drag = state;
+    window.addEventListener("pointermove", state.onMove);
+    window.addEventListener("pointerup", state.onUp);
+    window.addEventListener("pointercancel", state.onUp);
+    window.addEventListener("keydown", state.onKeyDown);
+  }
+
+  #getInsertIndex(pointer) {
+    const items = this.#getElementChildren();
+    const horizontal = this.#axis === "horizontal";
+
+    for (let i = 0; i < items.length; i++) {
+      const rect = items[i].getBoundingClientRect();
+      const midpoint = horizontal
+        ? rect.left + rect.width / 2
+        : rect.top + rect.height / 2;
+      if (pointer < midpoint) return i;
+    }
+
+    return items.length;
+  }
+
+  #shouldShowIndicator(item, index) {
+    const items = this.#getElementChildren();
+    const currentIndex = items.indexOf(item);
+    if (currentIndex === -1) return false;
+
+    const clamped = Math.max(0, Math.min(index, items.length));
+
+    // Hide only the redundant bottom line when the dragged item is already last.
+    if (clamped >= items.length && currentIndex === items.length - 1) {
+      return false;
+    }
+
+    return true;
+  }
+
+  #getReorderBounds(items) {
+    if (!items.length) return null;
+
+    let left = Infinity;
+    let right = -Infinity;
+    let top = Infinity;
+    let bottom = -Infinity;
+
+    for (const item of items) {
+      const rect = item.getBoundingClientRect();
+      left = Math.min(left, rect.left);
+      right = Math.max(right, rect.right);
+      top = Math.min(top, rect.top);
+      bottom = Math.max(bottom, rect.bottom);
+    }
+
+    return {
+      left,
+      top,
+      width: right - left,
+      height: bottom - top,
+    };
+  }
+
+  #ensureIndicator() {
+    if (this.#indicator) return this.#indicator;
+
+    const indicator = document.createElement("div");
+    indicator.className = "fig-reorder-indicator";
+    indicator.setAttribute("data-axis", this.#axis);
+    document.body.appendChild(indicator);
+    this.#indicator = indicator;
+    return indicator;
+  }
+
+  #updateIndicator(index, item) {
+    const items = this.#getElementChildren();
+    if (!this.#shouldShowIndicator(item, index)) {
+      this.#removeIndicator();
+      return;
+    }
+
+    const bounds = this.#getReorderBounds(items);
+    if (!bounds) {
+      this.#removeIndicator();
+      return;
+    }
+
+    const indicator = this.#ensureIndicator();
+    indicator.setAttribute("data-axis", this.#axis);
+
+    if (this.#axis === "horizontal") {
+      let x;
+      if (index <= 0) {
+        x = items[0].getBoundingClientRect().left;
+      } else if (index >= items.length) {
+        x = items[items.length - 1].getBoundingClientRect().right;
+      } else {
+        x = items[index].getBoundingClientRect().left;
+      }
+
+      indicator.style.left = `${x - 1}px`;
+      indicator.style.top = `${bounds.top}px`;
+      indicator.style.width = "2px";
+      indicator.style.height = `${bounds.height}px`;
+      return;
+    }
+
+    let y;
+    if (index <= 0) {
+      y = items[0].getBoundingClientRect().top;
+    } else if (index >= items.length) {
+      y = items[items.length - 1].getBoundingClientRect().bottom;
+    } else {
+      y = items[index].getBoundingClientRect().top;
+    }
+
+    indicator.style.left = `${bounds.left}px`;
+    indicator.style.top = `${y - 1}px`;
+    indicator.style.width = `${bounds.width}px`;
+    indicator.style.height = "2px";
+  }
+
+  #removeIndicator() {
+    this.#indicator?.remove();
+    this.#indicator = null;
+  }
+
+  #moveItemToIndex(item, index) {
+    const items = this.#getElementChildren();
+    const clamped = Math.max(0, Math.min(index, items.length));
+
+    if (clamped >= items.length) {
+      if (items[items.length - 1] !== item) this.appendChild(item);
+      return;
+    }
+
+    const ref = items[clamped];
+    if (ref !== item) this.insertBefore(item, ref);
+  }
+
+  #finishDrag(state, revert) {
+    const { item, oldIndex, active, onMove, onUp, onKeyDown } = state;
+
+    window.removeEventListener("pointermove", onMove);
+    window.removeEventListener("pointerup", onUp);
+    window.removeEventListener("pointercancel", onUp);
+    window.removeEventListener("keydown", onKeyDown);
+
+    if (active) {
+      if (revert) {
+        this.#restoreItemIndex(item, oldIndex);
+      } else {
+        const newIndex = this.#getElementChildren().indexOf(item);
+        if (newIndex !== -1 && newIndex !== oldIndex) {
+          this.dispatchEvent(
+            new CustomEvent("reorder", {
+              bubbles: true,
+              detail: { oldIndex, newIndex, item },
+            }),
+          );
+        }
+      }
+    }
+
+    item.classList.remove("dragging");
+    FigReorder.#setDocumentDragging(false);
+    this.#removeIndicator();
+    if (this.#drag === state) this.#drag = null;
+  }
+
+  #restoreItemIndex(item, index) {
+    const items = this.#getElementChildren().filter((node) => node !== item);
+    const ref = items[index] ?? null;
+    if (ref) {
+      this.insertBefore(item, ref);
+      return;
+    }
+    this.appendChild(item);
+  }
+
+  #unbindAll() {
+    for (const [, binding] of this.#bindings) {
+      binding.target.removeEventListener(
+        "pointerdown",
+        binding.onPointerDown,
+        true,
+      );
+    }
+    this.#bindings.clear();
+  }
+
+  #cancelDrag() {
+    if (!this.#drag) return;
+    this.#finishDrag(this.#drag, true);
+  }
+}
+
+customElements.define("fig-reorder", FigReorder);
+