Overlay

Stack inspector

Open overlays (top of stack last):

Allocate a slot

$store.overlay.register(plugin, id) returns the z-index and adds the entry to the stack. Idempotent — repeat calls return the same value.

Render via the portal root

Anything inside <template x-teleport="#overlay-root"> mounts into the plugin-managed portal container. Bind :style to $store.overlay.zIndexOf(...) for stacking.

configure()

Idempotent — calling it again with new baseZIndex or step updates the allocator for future slots. Existing allocations keep their z-index.

Last allocated z:

Snippet

$store.overlay.register('dialog', 'confirm')   // → 1000
$store.overlay.zIndexOf('dialog', 'confirm')  // → 1000
$store.overlay.unregister('dialog', 'confirm')

// In the template, render through the portal root:
<template x-teleport="#overlay-root">
  <div :style="$store.overlay.zIndexOf('dialog', 'confirm')">...</div>
</template>

How the demo app uses it

• DialogDemo, MenuDemo, TooltipDemo, CommandDemo all teleport to #overlay-root
• The portal container is created lazily on first register, so SSR pages never ship an empty wrapper
• configure() is idempotent — call it any time after install with root, baseZIndex, and step