stimeo-ui 0.9.0 → 0.10.0

data/dist/positioning/index.js

@@ -2,6 +2,20 @@ import { computePosition, autoUpdate, offset, flip, shift } from '@floating-ui/d
 import { Controller } from '@hotwired/stimulus';
 
 // src/positioning/index.ts
+var PLACEMENTS = /* @__PURE__ */ new Set([
+  "top",
+  "top-start",
+  "top-end",
+  "right",
+  "right-start",
+  "right-end",
+  "bottom",
+  "bottom-start",
+  "bottom-end",
+  "left",
+  "left-start",
+  "left-end"
+]);
 var AnchoredController = class extends Controller {
   static targets = ["anchor", "floating"];
   static values = {
@@ -16,10 +30,18 @@ var AnchoredController = class extends Controller {
   static events = ["position"];
   /** `autoUpdate` cleanup while tracking; `null` when detached. */
   #stop = null;
+  /** Identity of the live attach; `null` when detached — see {@link #onComputed}. */
+  #attachId = null;
   /** True between connect and disconnect (Stimulus may fire value callbacks before connect). */
   #connected = false;
-  /** Serialized options of the live observer, or `null` when detached — see {@link #sync}. */
-  #appliedKey = null;
+  /**
+   * Serialized options as of the last reconcile, empty only before the first one —
+   * a value no serialization produces, so it can never match a real key.
+   */
+  #appliedKey = "";
+  /** Elements the live observer holds, or `null` when detached — see {@link #sync}. */
+  #appliedAnchor = null;
+  #appliedFloating = null;
   connect() {
     this.#connected = true;
     this.#sync();
@@ -28,8 +50,21 @@ var AnchoredController = class extends Controller {
     this.#connected = false;
     this.#sync();
   }
-  // Every value change (active or an option) re-syncs. `#sync` is idempotent and
-  // order-independent, so no Value has to be declared in a particular position.
+  // Every value change (active or an option) and every target arrival or
+  // departure re-syncs. `#sync` is idempotent and order-independent, so no Value
+  // has to be declared in a particular position.
+  anchorTargetConnected() {
+    this.#sync();
+  }
+  anchorTargetDisconnected() {
+    this.#sync();
+  }
+  floatingTargetConnected() {
+    this.#sync();
+  }
+  floatingTargetDisconnected() {
+    this.#sync();
+  }
   activeValueChanged() {
     this.#sync();
   }
@@ -54,48 +89,72 @@ var AnchoredController = class extends Controller {
   /** Current Values mapped to the positioning engine's options. */
   get #options() {
     return {
-      placement: this.placementValue,
-      offset: this.offsetValue,
+      // Narrow every free-form Value to what the engine can use. A placement
+      // outside the set would be published on the hook as a resolved side it is
+      // not, and a non-finite distance poisons the coordinate it feeds until the
+      // browser drops the whole declaration and leaves that axis unplaced.
+      placement: PLACEMENTS.has(this.placementValue) ? this.placementValue : "bottom",
+      offset: Number.isFinite(this.offsetValue) ? this.offsetValue : 0,
       flip: this.flipValue,
       shift: this.shiftValue,
-      padding: this.paddingValue,
-      // Narrow the free-form Value to the engine's union; anything but "fixed"
-      // falls back to the default "absolute".
+      padding: Number.isFinite(this.paddingValue) ? this.paddingValue : 0,
       strategy: this.strategyValue === "fixed" ? "fixed" : "absolute"
     };
   }
   /**
    * Reconciles the live observer with the desired state — track iff connected,
-   * `active`, and both targets exist — re-attaching only when that state or the
-   * options actually changed. Stimulus fires the value-changed callbacks on
-   * connect in declaration order and may run them before or after `connect()`;
-   * keying on the applied options collapses that whole burst (in any order) to a
-   * single attach, while an option change at runtime re-attaches exactly once. So
-   * correctness never depends on `active` being declared last.
+   * `active`, and both targets exist — re-attaching only when that state, the
+   * options, or the elements actually changed. Stimulus fires the value-changed
+   * callbacks on connect in declaration order and may run them before or after
+   * `connect()`; keying on what is applied collapses that whole burst (in any
+   * order) to a single attach, while an option or target change at runtime
+   * re-attaches exactly once. So correctness never depends on `active` being
+   * declared last. The elements are part of the key because the engine holds the
+   * pair it was handed: a swap leaves the same options behind and would otherwise
+   * keep measuring the node that just left the document.
    */
   #sync() {
     const shouldTrack = this.#connected && this.activeValue && this.hasAnchorTarget && this.hasFloatingTarget;
-    const key = shouldTrack ? JSON.stringify(this.#options) : null;
-    if (key === this.#appliedKey) return;
+    const anchor = shouldTrack ? this.anchorTarget : null;
+    const floating = shouldTrack ? this.floatingTarget : null;
+    const key = JSON.stringify(this.#options);
+    if (key === this.#appliedKey && anchor === this.#appliedAnchor && floating === this.#appliedFloating) {
+      return;
+    }
     this.#detach();
     this.#appliedKey = key;
-    if (shouldTrack) this.#attach();
+    this.#appliedAnchor = anchor;
+    this.#appliedFloating = floating;
+    if (anchor && floating) this.#attach(anchor, floating);
   }
-  #attach() {
+  #attach(anchor, floating) {
+    const id = /* @__PURE__ */ Symbol("anchored-attach");
+    this.#attachId = id;
     this.#stop = attachPositioning(
-      this.anchorTarget,
-      this.floatingTarget,
+      anchor,
+      floating,
       this.#options,
-      (result) => this.#onComputed(result)
+      (result) => this.#onComputed(id, floating, result)
     );
   }
   #detach() {
     this.#stop?.();
     this.#stop = null;
+    this.#attachId = null;
   }
-  /** Reflects the resolved side onto the CSS hook and announces the placement. */
-  #onComputed(result) {
-    this.floatingTarget.setAttribute("data-anchored-placement", result.placement);
+  /**
+   * Reflects the resolved side onto the CSS hook and announces the placement.
+   *
+   * The pass carries the attach that started it and the element it positioned,
+   * and lands only while that attach is still the live one: `autoUpdate`'s
+   * cleanup stops further updates but cannot cancel one already computing, so a
+   * pass superseded mid-flight would otherwise write and dispatch afterwards.
+   * The element cannot stand in for that identity — an option change re-attaches
+   * against the very same pair.
+   */
+  #onComputed(id, floating, result) {
+    if (id !== this.#attachId) return;
+    floating.setAttribute("data-anchored-placement", result.placement);
     this.dispatch("position", {
       detail: { placement: result.placement, x: result.x, y: result.y }
     });

data/lib/stimeo/ui/version.rb

@@ -5,6 +5,6 @@ module Stimeo
     # Kept in lockstep with package.json (stable versions share the same
     # notation; a prerelease maps npm `-beta.N` ⇔ gem `.pre.beta.N` because
     # RubyGems forbids dashes). Bump both together.
-    VERSION = "0.9.0"
+    VERSION = "0.10.0"
   end
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: stimeo-ui
 version: !ruby/object:Gem::Version
-  version: 0.9.0
+  version: 0.10.0
 platform: ruby
 authors:
 - Stimeo Labs
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2026-08-28 00:00:00.000000000 Z
+date: 2026-08-31 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: railties