stimeo-ui 0.16.0 → 0.17.0

data/dist/controllers/portal_controller.js

@@ -1,8 +1,5 @@
 import { Controller } from '@hotwired/stimulus';
 
-// src/controllers/portal_controller.ts
-
-// src/utils/declared_value.ts
 function parseDeclared(raw, parse, fallback) {
   try {
     return parse(raw);
@@ -22,63 +19,143 @@ function validSelector(element, raw, fallback) {
   );
 }
 
-// src/utils/detach_gate.ts
 var DetachGate = class _DetachGate {
-  /** Set while a probe is queued, waiting for a reconnect to cancel it. */
   #pending = false;
-  /**
-   * True while a probe is queued — the last disconnect was ambiguous and no
-   * reconnect has cancelled it yet. Read it from `connect()` to tell the
-   * reconnect half of an in-page move from a first connect: a controller whose
-   * initialisation restarts a measurement (a min-duration floor, an elapsed
-   * counter) must skip it for the move, where nothing actually restarted.
-   */
   get pending() {
     return this.#pending;
   }
-  /**
-   * True when the disconnect is definitely a real detach — the element left
-   * the document, or `data-controller` no longer lists the identifier. False
-   * means ambiguous (in-page move or observed-root exit), NOT "alive".
-   */
   static isDetached(host) {
-    if (!host.element.isConnected) return true;
-    const tokens = (host.element.getAttribute("data-controller") ?? "").split(/\s+/);
-    return !tokens.includes(host.identifier);
-  }
-  /**
-   * Call from `disconnect()`: runs `teardown` synchronously on a definite
-   * detach (fast path), otherwise defers it one microtask — a reconnect
-   * ({@link cancel} from `connect()`) keeps the state, no reconnect runs it.
-   * One microtask is the whole probe window: Stimulus reconnects a moved
-   * element within the same mutation batch, before the checkpoint drains.
-   */
+    return !host.element.isConnected || !_DetachGate.#listed(host);
+  }
   disconnected(host, teardown) {
-    if (_DetachGate.isDetached(host)) {
+    const carried = _DetachGate.#carried(host);
+    if (!carried && _DetachGate.isDetached(host)) {
       this.#pending = false;
       teardown();
       return;
     }
     this.#pending = true;
-    queueMicrotask(() => {
+    const probe = () => {
       if (!this.#pending) return;
       this.#pending = false;
       teardown();
-    });
+    };
+    if (carried) setTimeout(probe, 0);
+    else queueMicrotask(probe);
+  }
+  static #carried(host) {
+    const element = host.element;
+    return !element.isConnected && element.closest("[data-turbo-permanent]") !== null && _DetachGate.#listed(host);
+  }
+  static #listed(host) {
+    const tokens = (host.element.getAttribute("data-controller") ?? "").split(/\s+/);
+    return tokens.includes(host.identifier);
   }
-  /**
-   * Disarms a pending probe. Call from `connect()` (the reconnect that proves
-   * an in-page move) and from the head of any teardown path not routed through
-   * {@link disconnected} (disabled-toggle, Escape), so an orphaned probe can
-   * never run the teardown a second time.
-   */
   cancel() {
     this.#pending = false;
   }
 };
 
-// src/controllers/portal_controller.ts
-var portalState = /* @__PURE__ */ new WeakMap();
+var ListenerSet = class {
+  #abort = new AbortController();
+  add(target, type, handler, options) {
+    target.addEventListener(type, handler, { ...options, signal: this.#abort.signal });
+  }
+  dispose() {
+    this.#abort.abort();
+    this.#abort = new AbortController();
+  }
+};
+
+var MicrotaskCoalescer = class {
+  #run;
+  #queued = false;
+  #active = false;
+  #generation = 0;
+  constructor(run) {
+    this.#run = run;
+  }
+  activate() {
+    this.#active = true;
+  }
+  cancel() {
+    this.#active = false;
+    this.#queued = false;
+    this.#generation += 1;
+  }
+  schedule() {
+    if (!this.#active || this.#queued) return;
+    this.#queued = true;
+    const generation = this.#generation;
+    queueMicrotask(() => {
+      if (generation !== this.#generation || !this.#queued || !this.#active) return;
+      this.#queued = false;
+      this.#run();
+    });
+  }
+};
+
+var MorphRenderWatcher = class {
+  #listeners = new ListenerSet();
+  #pass;
+  #element = null;
+  #onMorph = () => this.#pass.schedule();
+  constructor(run) {
+    this.#pass = new MicrotaskCoalescer(run);
+  }
+  observe(element) {
+    if (this.#element === element) return;
+    this.disconnect();
+    this.#element = element;
+    this.#pass.activate();
+    this.#listeners.add(element, "turbo:morph-element", this.#onMorph);
+  }
+  schedule() {
+    this.#pass.schedule();
+  }
+  disconnect() {
+    this.#listeners.dispose();
+    this.#pass.cancel();
+    this.#element = null;
+  }
+};
+
+function sharedRegistry(key, create) {
+  const symbol = Symbol.for(key);
+  const scope = globalThis;
+  const existing = scope[symbol];
+  if (existing !== void 0) return existing;
+  const registry = create();
+  Object.defineProperty(globalThis, symbol, { value: registry });
+  return registry;
+}
+
+var portalState = sharedRegistry(
+  "stimeo-ui.portal-state.registry.v1",
+  () => /* @__PURE__ */ new WeakMap()
+);
+var contentForms = sharedRegistry(
+  "stimeo-ui.portal-content-forms.registry.v1",
+  () => /* @__PURE__ */ new WeakSet()
+);
+var displaced = sharedRegistry(
+  "stimeo-ui.portal-displaced.registry.v1",
+  () => /* @__PURE__ */ new WeakSet()
+);
+function takenByPage(state) {
+  return !state.node.isConnected && !state.destination.contains(state.node);
+}
+function relocate(parent, node, before) {
+  const move = parent.moveBefore;
+  if (typeof move === "function") {
+    try {
+      move.call(parent, node, before);
+      return;
+    } catch {
+    }
+  }
+  parent.insertBefore(node, before);
+}
 var PortalController = class extends Controller {
   static targets = ["content"];
   static values = {
@@ -87,44 +164,32 @@ var PortalController = class extends Controller {
     restore: { type: Boolean, default: true }
   };
   static events = ["mount", "unmount"];
-  /** Decides whether a `disconnect()` is an in-page move or a real detach. */
   #gate = new DetachGate();
-  /** The `to` declaration after validation; the default when it cannot be parsed. */
   #toSelector = "body";
-  /**
-   * Validates the destination declaration once, keeping only a selector the engine can
-   * read.
-   *
-   * A selector reads back as an ordinary string, so a malformed one survives until it is
-   * handed to the DOM — where it would take the whole teleport down and leave the part
-   * silently doing nothing. Falling back to the default puts the node somewhere visible
-   * instead, which reads as a mistake and can be traced back to the declaration.
-   */
+  #connected = false;
+  #replace = new MorphRenderWatcher(() => this.#place());
   toValueChanged() {
     this.#toSelector = validSelector(this.element, this.toValue, "body");
+    this.#replace.schedule();
+  }
+  positionValueChanged() {
+    this.#replace.schedule();
+  }
+  contentTargetConnected() {
+    this.#replace.schedule();
   }
   connect() {
     this.#gate.cancel();
     const existing = portalState.get(this.element);
-    if (existing) {
-      existing.owner = this;
-      return;
-    }
-    const node = this.hasContentTarget ? this.contentTarget : this.element;
-    const destination = this.#destination();
-    if (!destination || destination === node || node.contains(destination)) return;
-    const placeholder = document.createComment("stimeo--portal");
-    node.parentNode?.insertBefore(placeholder, node);
-    portalState.set(this.element, { node, placeholder, owner: this });
-    if (this.positionValue === "prepend") {
-      destination.prepend(node);
-    } else {
-      destination.appendChild(node);
-    }
-    node.setAttribute("data-portaled", "true");
-    this.dispatch("mount", { detail: { destination } });
+    if (existing) existing.owner = this;
+    this.#connected = true;
+    this.#place();
+    this.#replace.observe(this.element);
+    if (!this.#connected) this.#replace.disconnect();
   }
   disconnect() {
+    this.#connected = false;
+    this.#replace.disconnect();
     const state = portalState.get(this.element);
     if (!state) return;
     if (state.node === this.element) {
@@ -137,29 +202,97 @@ var PortalController = class extends Controller {
       if (current?.owner === this) this.#restore(current);
     });
   }
-  /**
-   * Returns the node to its placeholder (or removes it) and clears the bookkeeping.
-   *
-   * @stimeoRuntimeOnly `restore` decides whether this one unmount puts the node back or drops it.
-   */
+  #place() {
+    let state = portalState.get(this.element);
+    let node = state?.node ?? null;
+    if (state) {
+      const arrival = this.#arrival(state);
+      const taken = takenByPage(state);
+      if (arrival || taken) {
+        if (arrival && !taken) displaced.add(state.node);
+        this.#restore(state);
+        if (!this.#connected) return;
+        state = void 0;
+        node = arrival !== null && this.element.contains(arrival) ? arrival : null;
+      }
+    }
+    node ??= this.#source();
+    if (!node) return;
+    const destination = this.#destination();
+    if (!destination || destination === node || node.contains(destination)) {
+      if (state) this.#unmount(state, true);
+      return;
+    }
+    const position = this.positionValue === "prepend" ? "prepend" : "append";
+    const placed = this.#placedIn(node, destination);
+    if (state?.destination === destination && state.position === position && placed) {
+      node.setAttribute("data-portaled", "true");
+      return;
+    }
+    if (state) {
+      if (!state.placeholder.isConnected && !this.#placedIn(node, state.destination)) {
+        state.placeholder = this.#markHome(node);
+      }
+      state.destination = destination;
+      state.position = position;
+    } else {
+      const placeholder = this.#markHome(node);
+      const held = new Set(this.contentTargets);
+      portalState.set(this.element, {
+        node,
+        placeholder,
+        owner: this,
+        destination,
+        position,
+        held
+      });
+    }
+    relocate(destination, node, position === "prepend" ? destination.firstChild : null);
+    node.setAttribute("data-portaled", "true");
+    this.dispatch("mount", { detail: { destination } });
+  }
+  #placedIn(node, destination) {
+    if (!destination.contains(node)) return false;
+    return node === this.element || !this.element.contains(node) || this.element.contains(destination);
+  }
+  #markHome(node) {
+    const placeholder = document.createComment("stimeo--portal");
+    node.parentNode?.insertBefore(placeholder, node);
+    return placeholder;
+  }
+  #arrival(state) {
+    const { node, held } = state;
+    return this.contentTargets.find(
+      (target) => !node.contains(target) && !held.has(target) && !displaced.has(target)
+    ) ?? null;
+  }
+  #source() {
+    if (this.hasContentTarget) {
+      contentForms.add(this.element);
+      return this.contentTargets.find((target) => !displaced.has(target)) ?? null;
+    }
+    return contentForms.has(this.element) ? null : this.element;
+  }
   #restore(state) {
+    this.#unmount(state, this.restoreValue && !takenByPage(state));
+  }
+  #unmount(state, home) {
     portalState.delete(this.element);
     const { node, placeholder } = state;
     node.removeAttribute("data-portaled");
-    if (this.restoreValue && placeholder.parentNode) {
-      placeholder.parentNode.insertBefore(node, placeholder);
+    const origin = placeholder.parentNode;
+    if (home && origin) {
+      relocate(origin, node, placeholder);
     } else {
       node.remove();
     }
     placeholder.remove();
     this.dispatch("unmount", { detail: {} });
   }
-  /** Resolves the destination from the validated `to` selector. */
   #destination() {
     return document.querySelector(this.#toSelector);
   }
 };
 
 export { PortalController };
-//# sourceMappingURL=portal_controller.js.map
 //# sourceMappingURL=portal_controller.js.map