fix(toast): initialize toaster state in initialize() so pre-existing targets don't throw (#499)

* fix(toast): init toaster state in initialize() to survive pre-existing targets

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

* Update toaster_controller.js

Signed-off-by: Jean Pierry <pierrybm@gmail.com>

* Update toaster_controller.js

Signed-off-by: Jean Pierry <pierrybm@gmail.com>

* chore(mcp): rebuild registry.json for toaster_controller fix

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

* fix(toast): clear _listEl on disconnect for symmetric teardown

`connect()` resolves `_listEl`, but `disconnect()` left it pointing at the
detached `<ol>`. Stimulus tears down in this order (Context#disconnect):
`controller.disconnect()` first, then `targetObserver.stop()` ->
`disconnectAllTargets()`, so every `toastTargetDisconnected` — and the
`_reflow()` it triggers — runs *after* the controller disconnected, writing
inline styles onto nodes on their way out.

Null out `_listEl` at the end of `disconnect()` so `_reflow()`'s existing
`if (!this._listEl) return` guard actually does its job.

The global API closure (`window.RubyUI.toast`) outlives the controller and
calls `_dismissById` / `_mutate` directly rather than through the removed
window listeners, so those reads become optional and `_spawn` bails early
instead of throwing on a null list.

* refactor(toast): react to position/expand via value changed callbacks

`position` and `expand` are Stimulus values, but nothing reacted to them
changing: `_spawn` mirrored `positionValue` into `data-position` by hand, and
`expand` was only read once in `connect()`. Flipping either attribute at
runtime (`element.dataset.rubyUiToasterExpandValue = "true"`) had no effect
until the next pointer event.

Add `positionValueChanged` / `expandValueChanged` so the DOM follows the value:
the position callback owns the `data-position` sync the CSS placement rules key
off, and both reflow. `_spawn` now just assigns `positionValue`.

Both callbacks fire during `valueObserver.start()`, before `connect()`, so they
rely on `_reflow()`'s `if (!this._listEl) return` guard — same pattern as the
target callbacks.

`connect()` keeps `_expanded = this.expandValue`: `StringMapObserver#stop` does
not clear its map, so an unchanged attribute fires no callback when the
observer restarts. The region is `data-turbo-permanent`, so it really does
disconnect/reconnect with the same controller instance, and without that line
a toaster left hover-expanded would reconnect still expanded.

* fix(toast): make toastTargetConnected idempotent

Now that `_resizeObservers` lives in `initialize()` it survives
disconnect/reconnect cycles of the same element, so a second
`toastTargetConnected` for an element that still has an observer would
overwrite the WeakMap entry and leak the first one — it keeps observing and
keeps calling `_reflow()`.

Stimulus guards against that today (`TargetObserver#connectTarget` skips
elements already in `targetsByName`), but the callback should not depend on
that internal: disconnect any existing observer for the element first.

---------

Signed-off-by: Jean Pierry <pierrybm@gmail.com>
Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>
Co-authored-by: Djalma Araújo <djalma@nossomos.cc>

Author: 3 people

docs/app/javascript/controllers/ruby_ui/toaster_controller.js

@@ -39,9 +39,13 @@ export default class extends Controller {
     dir: { type: String, default: "ltr" },
   }
 
-  connect() {
+  initialize() {
+    this._expanded = false
     this._heights = new Map()
     this._resizeObservers = new WeakMap()
+  }
+
+  connect() {
     this._expanded = this.expandValue
     this._listEl = this.element.querySelector("ol") || (this.element.tagName === "OL" ? this.element : null)
     this._registerGlobalApi()
@@ -59,6 +63,8 @@ export default class extends Controller {
     this._listEl.addEventListener("pointerenter", this._onPointerEnter)
     this._listEl.addEventListener("pointerleave", this._onPointerLeave)
     document.addEventListener("keydown", this._onKey)
+
+    this._reflow()
   }
 
   disconnect() {
@@ -67,9 +73,21 @@ export default class extends Controller {
     this._listEl?.removeEventListener("pointerenter", this._onPointerEnter)
     this._listEl?.removeEventListener("pointerleave", this._onPointerLeave)
     document.removeEventListener("keydown", this._onKey)
+    this._listEl = null
+  }
+
+  positionValueChanged(value) {
+    this.element.setAttribute("data-position", value)
+    this._reflow()
+  }
+
+  expandValueChanged(value) {
+    this._expanded = value
+    this._reflow()
   }
 
   toastTargetConnected(el) {
+    this._resizeObservers.get(el)?.disconnect()
     if (typeof ResizeObserver !== "undefined") {
       const ro = new ResizeObserver(() => {
         this._heights.set(el, el.offsetHeight)
@@ -90,13 +108,11 @@ export default class extends Controller {
   }
 
   _spawn(detail) {
+    if (!this._listEl) return null
     const variant = VARIANTS.includes(detail.variant) ? detail.variant : "default"
     const tpl = this._skeletonFor(variant)
     if (!tpl) return null
-    if (detail.position) {
-      this.element.setAttribute("data-position", detail.position)
-      this.positionValue = detail.position
-    }
+    if (detail.position) this.positionValue = detail.position
     const node = tpl.content.firstElementChild.cloneNode(true)
 
     node.id = detail.id || `toast-${this._uuid()}`
@@ -151,7 +167,7 @@ export default class extends Controller {
       )
       return
     }
-    const el = this._listEl.querySelector(`#${CSS.escape(id)}`)
+    const el = this._listEl?.querySelector(`#${CSS.escape(id)}`)
     if (el) el.dispatchEvent(new CustomEvent("ruby-ui:toast:force-dismiss", { bubbles: true }))
   }
 
@@ -243,7 +259,7 @@ export default class extends Controller {
     if (wantCtrl !== e.ctrlKey) return
     if (wantMeta !== e.metaKey) return
     e.preventDefault()
-    const first = this._listEl.firstElementChild
+    const first = this._listEl?.firstElementChild
     first?.focus()
   }
 
@@ -278,7 +294,7 @@ export default class extends Controller {
   }
 
   _mutate(id, variant, text) {
-    const el = this._listEl.querySelector(`#${CSS.escape(id)}`)
+    const el = this._listEl?.querySelector(`#${CSS.escape(id)}`)
     if (!el) return
     el.dataset.variant = variant
     el.setAttribute("role", variant === "error" ? "alert" : "status")

gem/lib/ruby_ui/toast/toaster_controller.js

@@ -39,9 +39,13 @@ export default class extends Controller {
     dir: { type: String, default: "ltr" },
   }
 
-  connect() {
+  initialize() {
+    this._expanded = false
     this._heights = new Map()
     this._resizeObservers = new WeakMap()
+  }
+
+  connect() {
     this._expanded = this.expandValue
     this._listEl = this.element.querySelector("ol") || (this.element.tagName === "OL" ? this.element : null)
     this._registerGlobalApi()
@@ -59,6 +63,8 @@ export default class extends Controller {
     this._listEl.addEventListener("pointerenter", this._onPointerEnter)
     this._listEl.addEventListener("pointerleave", this._onPointerLeave)
     document.addEventListener("keydown", this._onKey)
+
+    this._reflow()
   }
 
   disconnect() {
@@ -67,9 +73,21 @@ export default class extends Controller {
     this._listEl?.removeEventListener("pointerenter", this._onPointerEnter)
     this._listEl?.removeEventListener("pointerleave", this._onPointerLeave)
     document.removeEventListener("keydown", this._onKey)
+    this._listEl = null
+  }
+
+  positionValueChanged(value) {
+    this.element.setAttribute("data-position", value)
+    this._reflow()
+  }
+
+  expandValueChanged(value) {
+    this._expanded = value
+    this._reflow()
   }
 
   toastTargetConnected(el) {
+    this._resizeObservers.get(el)?.disconnect()
     if (typeof ResizeObserver !== "undefined") {
       const ro = new ResizeObserver(() => {
         this._heights.set(el, el.offsetHeight)
@@ -90,13 +108,11 @@ export default class extends Controller {
   }
 
   _spawn(detail) {
+    if (!this._listEl) return null
     const variant = VARIANTS.includes(detail.variant) ? detail.variant : "default"
     const tpl = this._skeletonFor(variant)
     if (!tpl) return null
-    if (detail.position) {
-      this.element.setAttribute("data-position", detail.position)
-      this.positionValue = detail.position
-    }
+    if (detail.position) this.positionValue = detail.position
     const node = tpl.content.firstElementChild.cloneNode(true)
 
     node.id = detail.id || `toast-${this._uuid()}`
@@ -151,7 +167,7 @@ export default class extends Controller {
       )
       return
     }
-    const el = this._listEl.querySelector(`#${CSS.escape(id)}`)
+    const el = this._listEl?.querySelector(`#${CSS.escape(id)}`)
     if (el) el.dispatchEvent(new CustomEvent("ruby-ui:toast:force-dismiss", { bubbles: true }))
   }
 
@@ -243,7 +259,7 @@ export default class extends Controller {
     if (wantCtrl !== e.ctrlKey) return
     if (wantMeta !== e.metaKey) return
     e.preventDefault()
-    const first = this._listEl.firstElementChild
+    const first = this._listEl?.firstElementChild
     first?.focus()
   }
 
@@ -278,7 +294,7 @@ export default class extends Controller {
   }
 
   _mutate(id, variant, text) {
-    const el = this._listEl.querySelector(`#${CSS.escape(id)}`)
+    const el = this._listEl?.querySelector(`#${CSS.escape(id)}`)
     if (!el) return
     el.dataset.variant = variant
     el.setAttribute("role", variant === "error" ? "alert" : "status")