@wishbone-media/spark 1.2.0 → 1.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wishbone-media/spark",
-  "version": "1.2.0",
+  "version": "1.3.1",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",

package/src/components/SparkModalContainer.vue

@@ -1,5 +1,5 @@
 <template>
-  <TransitionRoot as="template" :show="sparkModalService.state.isVisible">
+  <TransitionRoot v-if="isActive" as="template" :show="sparkModalService.state.isVisible">
     <!-- Headless UI emits close with a payload (false); call hide() without it
          so a backdrop/ESC dismiss resolves the show() promise with null -->
     <Dialog class="relative z-1000" @close="() => sparkModalService.hide()">
@@ -46,6 +46,13 @@
 </template>
 
 <script setup>
+import { computed, onUnmounted } from 'vue'
 import { Dialog, DialogPanel, TransitionChild, TransitionRoot } from '@headlessui/vue'
 import { sparkModalService } from '@/composables/sparkModalService'
+
+// Dedupe duplicate mounts: only the first mounted container renders, so twin
+// Dialogs can't dismiss each other's modal.
+const containerToken = sparkModalService.registerContainer()
+const isActive = computed(() => sparkModalService.isActiveContainer(containerToken))
+onUnmounted(() => sparkModalService.unregisterContainer(containerToken))
 </script>

package/src/components/SparkOverlay.vue

@@ -1,5 +1,11 @@
 <template>
-  <TransitionRoot :show="overlayInstance.state.isVisible" as="template">
+  <TransitionRoot
+    v-if="isActive"
+    :show="overlayInstance.state.isVisible"
+    as="template"
+    @after-enter="overlayInstance.notifyAfterEnter?.(rendererToken)"
+    @after-leave="overlayInstance.notifyAfterLeave?.(rendererToken)"
+  >
     <Dialog :initial-focus="panelRef" class="relative z-1000" @close="handleClose">
       <TransitionChild
         as="template"
@@ -49,7 +55,7 @@
 </template>
 
 <script setup>
-import { computed, ref } from 'vue'
+import { computed, onUnmounted, ref } from 'vue'
 import { Dialog, DialogPanel, TransitionChild, TransitionRoot } from '@headlessui/vue'
 
 const panelRef = ref(null)
@@ -77,6 +83,13 @@ const props = defineProps({
 
 const emit = defineEmits(['close'])
 
+// Register with the overlay instance: enables its transition guard and
+// dedupes duplicate mounts (only the first mounted renderer renders).
+// Optional-chained so plain state objects without the renderer API still work.
+const rendererToken = props.overlayInstance.registerRenderer?.()
+const isActive = computed(() => props.overlayInstance.isActiveRenderer?.(rendererToken) ?? true)
+onUnmounted(() => props.overlayInstance.unregisterRenderer?.(rendererToken))
+
 const widthClass = computed(() => {
   return sizeClasses[props.overlayInstance.state.size] || sizeClasses.md
 })

package/src/composables/sparkModalService.js

@@ -1,4 +1,4 @@
-import { reactive, markRaw } from 'vue'
+import { reactive, markRaw, shallowReactive } from 'vue'
 import SparkModalDialog from '@/components/SparkModalDialog.vue'
 
 class SparkModalService {
@@ -10,8 +10,39 @@ class SparkModalService {
       eventHandlers: {},
     })
     this._resolveShow = null
+    // Mounted SparkModalContainer instances, in mount order — only index 0
+    // renders. Duplicate containers each render their own Dialog and each
+    // twin's outside-click sensor dismisses the other, which silently breaks
+    // mouse-confirm on every dialog.
+    this._containers = shallowReactive([])
   }
 
+  /**
+   * Register a mounted SparkModalContainer. Only the first registered
+   * container renders; extra mounts no-op with a console warning.
+   *
+   * @returns {symbol} Token for isActiveContainer/unregisterContainer
+   */
+  registerContainer = () => {
+    const token = Symbol('SparkModalContainer')
+    this._containers.push(token)
+    if (this._containers.length > 1) {
+      console.warn(
+        '[spark] Duplicate SparkModalContainer mounted — only the first mounted instance ' +
+          'renders. SparkDefaultContainer and SparkPublicContainer already include one; ' +
+          'remove the extra mount.',
+      )
+    }
+    return token
+  }
+
+  unregisterContainer = (token) => {
+    const index = this._containers.indexOf(token)
+    if (index !== -1) this._containers.splice(index, 1)
+  }
+
+  isActiveContainer = (token) => this._containers[0] === token
+
   /**
    * Show a modal with a custom component.
    *

package/src/composables/sparkOverlayService.js

@@ -1,5 +1,15 @@
 import { useSparkOverlay } from '@/composables/useSparkOverlay'
 
+// Merge the caller's handlers with the auto-close behavior: the overlay
+// always closes on a `close` event, after the caller's own handler runs.
+const withAutoClose = (eventHandlers, close) => ({
+  ...eventHandlers,
+  close: () => {
+    eventHandlers.close?.()
+    close()
+  },
+})
+
 class SparkOverlayService {
   constructor() {
     this.left = useSparkOverlay()
@@ -7,29 +17,11 @@ class SparkOverlayService {
   }
 
   showLeft = (component, props = {}, eventHandlers = {}, options = {}) => {
-    const handlers = {
-      close: () => {
-        // Call user's close handler if provided
-        eventHandlers.close?.()
-        // Then close the overlay
-        this.closeLeft()
-      },
-      ...eventHandlers,
-    }
-    this.left.show(component, props, handlers, options)
+    this.left.show(component, props, withAutoClose(eventHandlers, this.closeLeft), options)
   }
 
   showRight = (component, props = {}, eventHandlers = {}, options = {}) => {
-    const handlers = {
-      close: () => {
-        // Call user's close handler if provided
-        eventHandlers.close?.()
-        // Then close the overlay
-        this.closeRight()
-      },
-      ...eventHandlers,
-    }
-    this.right.show(component, props, handlers, options)
+    this.right.show(component, props, withAutoClose(eventHandlers, this.closeRight), options)
   }
 
   closeLeft = () => {

package/src/composables/useSparkOverlay.js

@@ -1,4 +1,9 @@
-import { markRaw, reactive } from 'vue'
+import { markRaw, nextTick, reactive, shallowReactive } from 'vue'
+
+// Liveness fallback: if a renderer's after-enter/after-leave never arrives
+// (unmounted mid-transition, throttled background tab), force-settle so the
+// overlay can never hang in a transitioning phase.
+const SETTLE_FALLBACK_MS = 1000
 
 export function useSparkOverlay() {
   const state = reactive({
@@ -9,34 +14,156 @@ export function useSparkOverlay() {
     size: 'md',
   })
 
-  const toggle = () => {
-    state.isVisible = !state.isVisible
+  // Mounted SparkOverlay renderers for this instance, in mount order — only
+  // index 0 renders. Duplicate mounts would each render a Dialog whose
+  // outside-click sensor dismisses the other, so extras no-op.
+  const renderers = shallowReactive([])
+
+  // Transition phase machine. isVisible only flips from a settled phase
+  // ('open'/'closed'); show/close calls arriving mid-transition are queued
+  // (latest intent wins) and applied when the transition settles. Cancelling
+  // a Headless UI transition mid-flight can desync the Dialog from isVisible
+  // (overlay stuck closed with isVisible=true) and swallows its after-*
+  // events, so it is never done.
+  let phase = 'closed' // 'closed' | 'entering' | 'open' | 'leaving'
+  let pending = null
+  let settleFallbackTimer = null
+
+  const guarded = () => renderers.length > 0
+  const transitioning = () => phase === 'entering' || phase === 'leaving'
+
+  const setContent = (content, props = {}, eventHandlers = {}, options = {}) => {
+    state.content = markRaw(content)
+    state.props = props
+    state.eventHandlers = eventHandlers
+    state.size = options.size || 'md'
   }
 
-  const close = () => {
-    state.isVisible = false
+  const resetContent = () => {
     state.content = null
     state.props = {}
     state.eventHandlers = {}
     state.size = 'md'
   }
 
+  const beginTransition = (nextPhase) => {
+    phase = nextPhase
+    clearTimeout(settleFallbackTimer)
+    settleFallbackTimer = setTimeout(() => {
+      if (transitioning()) settle(state.isVisible ? 'open' : 'closed')
+    }, SETTLE_FALLBACK_MS)
+  }
+
+  const settle = (settledPhase) => {
+    phase = settledPhase
+    clearTimeout(settleFallbackTimer)
+    // Keep content when a queued show is about to flush — resetting first
+    // would make a queued open()/toggle() reopen an empty panel.
+    if (phase === 'closed' && pending?.action !== 'show') resetContent()
+    if (pending) {
+      const next = pending
+      pending = null
+      if (next.action === 'show') show(...next.args)
+      else close()
+    }
+  }
+
   const open = () => {
+    if (guarded() && transitioning()) {
+      pending = { action: 'show', args: [] }
+      return
+    }
+    if (state.isVisible) return
     state.isVisible = true
+    if (guarded()) {
+      beginTransition('entering')
+      nextTick(() => {
+        if (phase === 'entering') settle('open')
+      })
+    } else {
+      phase = 'open'
+    }
   }
 
-  const setContent = (content, props = {}, eventHandlers = {}, options = {}) => {
-    state.content = markRaw(content)
-    state.props = props
-    state.eventHandlers = eventHandlers
-    state.size = options.size || 'md'
+  const close = () => {
+    if (guarded() && transitioning()) {
+      pending = { action: 'close' }
+      return
+    }
+    if (!state.isVisible) {
+      phase = 'closed'
+      if (!guarded()) resetContent()
+      return
+    }
+    state.isVisible = false
+    if (guarded()) {
+      // Content stays until after-leave so the panel doesn't empty out
+      // while it is still fading.
+      beginTransition('leaving')
+    } else {
+      phase = 'closed'
+      resetContent()
+    }
+  }
+
+  const toggle = () => {
+    if (state.isVisible) {
+      close()
+    } else {
+      open()
+    }
   }
 
   const show = (content, props = {}, eventHandlers = {}, options = {}) => {
+    if (guarded() && transitioning()) {
+      pending = { action: 'show', args: [content, props, eventHandlers, options] }
+      return
+    }
+    // Toggle semantics (opt-in): re-showing the component that is already
+    // open closes it instead — e.g. a header button that opens a panel.
+    if (options.toggle && state.isVisible && content && state.content === content) {
+      close()
+      return
+    }
     if (content) setContent(content, props, eventHandlers, options)
     open()
   }
 
+  const registerRenderer = () => {
+    const token = Symbol('SparkOverlayRenderer')
+    renderers.push(token)
+    if (renderers.length > 1) {
+      console.warn(
+        '[spark] Duplicate SparkOverlay mounted for the same overlay instance — ' +
+          'only the first mounted instance renders. Remove the extra <SparkOverlay>.',
+      )
+    }
+    return token
+  }
+
+  const unregisterRenderer = (token) => {
+    const index = renderers.indexOf(token)
+    if (index === -1) return
+    renderers.splice(index, 1)
+    if (index === 0 && transitioning()) {
+      // The rendering instance unmounted mid-transition; its after-* events
+      // will never arrive. Settle to what the flags already claim.
+      settle(state.isVisible ? 'open' : 'closed')
+    }
+  }
+
+  const isActiveRenderer = (token) => renderers[0] === token
+
+  const notifyAfterEnter = (token) => {
+    if (token !== renderers[0]) return
+    if (phase === 'entering') settle('open')
+  }
+
+  const notifyAfterLeave = (token) => {
+    if (token !== renderers[0]) return
+    if (phase === 'leaving') settle('closed')
+  }
+
   return {
     state,
     toggle,
@@ -44,5 +171,10 @@ export function useSparkOverlay() {
     open,
     setContent,
     show,
+    registerRenderer,
+    unregisterRenderer,
+    isActiveRenderer,
+    notifyAfterEnter,
+    notifyAfterLeave,
   }
 }

package/src/containers/SparkDefaultContainer.vue

@@ -270,11 +270,16 @@ const toggleAppSelector = () => {
     slotProps.footerSlot = props.appSelectorSlots.footerSlot
   }
 
-  sparkOverlayService.showRight(SparkAppSelector, slotProps, {
-    select: () => {
-      sparkOverlayService.closeRight()
+  sparkOverlayService.showRight(
+    SparkAppSelector,
+    slotProps,
+    {
+      select: () => {
+        sparkOverlayService.closeRight()
+      },
     },
-  })
+    { toggle: true },
+  )
 }
 
 const toggleBrandSelector = () => {
@@ -287,6 +292,7 @@ const toggleBrandSelector = () => {
         sparkOverlayService.closeLeft()
       },
     },
+    { toggle: true },
   )
 }
 

package/src/containers/SparkPublicContainer.vue

@@ -2,6 +2,23 @@
   <main class="h-full">
     <router-view />
   </main>
+
+  <SparkOverlay
+    position="left"
+    :overlay-instance="sparkOverlayService.left"
+    @close="emit('overlayClose', 'left')"
+  />
+  <SparkOverlay
+    position="right"
+    :overlay-instance="sparkOverlayService.right"
+    @close="emit('overlayClose', 'right')"
+  />
+
+  <SparkModalContainer />
 </template>
 
-<script setup></script>
+<script setup>
+import { SparkModalContainer, SparkOverlay, sparkOverlayService } from '@/index.js'
+
+const emit = defineEmits(['overlayClose'])
+</script>