import{x as p}from"./iframe-CMPv_g6-.js";import"./preload-helper-PPVm8Dsz.js";let l=!1;function m(e,o){const s=new MutationObserver(r=>{for(const v of r)for(const n of v.removedNodes)n.contains(e)&&!l&&(s.disconnect(),o())});s.observe(document,{childList:!0,subtree:!0})}m.pause=()=>{l=!0};m.resume=()=>{l=!1};const h={title:"Utilities/onRemove",tags:["autodocs"],parameters:{docs:{subtitle:"The `onRemove` utility triggers a callback when a DOM element is removed from the document. Uses MutationObserver to watch for removals, with global pause/resume support."},controls:{expanded:!0}},argTypes:{selector:{control:{type:"text"},description:"CSS selector of element to watch"}},args:{selector:".watched-item"}},i={render:()=>{const e=`onremove-${Math.random().toString(36).substring(2,9)}`;let o=0,s=0;const r=()=>{const n=document.getElementById(`${e}-items-count`),t=document.getElementById(`${e}-removed-count`);n&&(n.textContent=String(o)),t&&(t.textContent=String(s))};return p`
      <div class="space-y-4">
        <div class="text-base">
          <p class="mb-2">
            Click "Add Item" to create elements, then click "Remove" on each item. The onRemove callback detects
            removals and logs them.
          </p>
        </div>

        <div class="flex gap-2">
          <button @click=${()=>{o++;const n=document.getElementById(`${e}-container`);if(!n)return;const t=document.createElement("div"),u=o;t.className="flex items-center justify-between rounded border bg-white p-4",t.innerHTML=`<span>Item ${u}</span>`;const d=document.createElement("button");d.className="rounded bg-red-100 px-2 py-1 text-xs text-red-700 hover:bg-red-200",d.textContent="Remove",d.addEventListener("click",()=>t.remove()),t.appendChild(d),n.appendChild(t),m(t,()=>{s++,o--,r();const g=document.getElementById(`${e}-log`);if(g){const c=document.createElement("div");c.className="text-sm text-gray-600",c.textContent=`Item ${u} removed at ${new Date().toLocaleTimeString()}`,g.prepend(c)}}),r()}} class="btu-button btu-button-primary btu-button-sm">Add Item</button>
        </div>

        <div id="${e}-container" class="min-h-32 space-y-2 rounded border-2 border-gray-300 bg-gray-50 p-4">
          <div class="text-sm text-gray-500">Items will appear here...</div>
        </div>

        <div class="flex justify-around">
          <div>
            <div class="text-xs text-gray-500">Active items</div>
            <div id="${e}-items-count" class="text-2xl font-bold text-gray-900">0</div>
          </div>
          <div>
            <div class="text-xs text-gray-500">Removals detected</div>
            <div id="${e}-removed-count" class="text-2xl font-bold text-primary-600">0</div>
          </div>
        </div>

        <div>
          <h4 class="mb-1 text-xs font-bold text-gray-500">Removal Log</h4>
          <div id="${e}-log" class="max-h-32 overflow-y-auto rounded border border-gray-200 bg-gray-50 p-2">
            <div class="text-sm text-gray-400">No removals yet.</div>
          </div>
        </div>
      </div>
    `},parameters:{docs:{description:{story:"Interactive example showing onRemove detecting when elements are removed from the DOM. Add items, then remove them to see the callback fire."}}}},a={render:()=>p`
    <div class="space-y-4 text-sm">
      <div>
        <h3 class="mb-2 font-bold">Basic Usage</h3>
        <pre
          class="overflow-x-auto rounded bg-gray-900 p-4 text-gray-100"
        ><code>import onRemove from '@brightspot/ui/util/onRemove.js'

// Clean up when element is removed
const widget = document.querySelector('.my-widget')
onRemove(widget, () => {
  console.log('Widget was removed')
  // Tear down event listeners, intervals, etc.
})</code></pre>
      </div>

      <div>
        <h3 class="mb-2 font-bold">Pause and Resume</h3>
        <pre class="overflow-x-auto rounded bg-gray-900 p-4 text-gray-100"><code>// Pause during bulk DOM operations
onRemove.pause()

// Move elements around without triggering callbacks
container.innerHTML = ''
container.append(...reorderedElements)

// Resume watching
onRemove.resume()</code></pre>
      </div>

      <div>
        <h3 class="mb-2 font-bold">Common Use Cases</h3>
        <ul class="list-inside list-disc space-y-1 text-gray-700">
          <li>Cleaning up event listeners when elements are removed</li>
          <li>Cancelling intervals or timeouts tied to DOM elements</li>
          <li>Disconnecting observers or WebSocket connections</li>
          <li>Releasing resources when components are destroyed</li>
        </ul>
      </div>

      <div>
        <h3 class="mb-2 font-bold">Parameters</h3>
        <ul class="space-y-2">
          <li><code class="rounded bg-gray-200 px-1">element</code> (Element): The DOM element to watch for removal</li>
          <li>
            <code class="rounded bg-gray-200 px-1">callback</code> (function): Called once when the element is removed
            from the document
          </li>
        </ul>
      </div>
    </div>
  `,parameters:{docs:{description:{story:"Code examples and documentation for using the onRemove utility."}}}};i.parameters={...i.parameters,docs:{...i.parameters?.docs,source:{originalSource:`{
  render: () => {
    const instanceId = \`onremove-\${Math.random().toString(36).substring(2, 9)}\`;
    let itemCount = 0;
    let removeCount = 0;
    const updateCounts = () => {
      const itemsEl = document.getElementById(\`\${instanceId}-items-count\`);
      const removedEl = document.getElementById(\`\${instanceId}-removed-count\`);
      if (itemsEl) itemsEl.textContent = String(itemCount);
      if (removedEl) removedEl.textContent = String(removeCount);
    };
    const addItem = () => {
      itemCount++;
      const container = document.getElementById(\`\${instanceId}-container\`);
      if (!container) return;
      const item = document.createElement('div');
      const itemNum = itemCount;
      item.className = 'flex items-center justify-between rounded border bg-white p-4';
      item.innerHTML = \`<span>Item \${itemNum}</span>\`;
      const removeBtn = document.createElement('button');
      removeBtn.className = 'rounded bg-red-100 px-2 py-1 text-xs text-red-700 hover:bg-red-200';
      removeBtn.textContent = 'Remove';
      removeBtn.addEventListener('click', () => item.remove());
      item.appendChild(removeBtn);
      container.appendChild(item);

      // Watch for this element's removal
      onRemove(item, () => {
        removeCount++;
        itemCount--;
        updateCounts();
        const log = document.getElementById(\`\${instanceId}-log\`);
        if (log) {
          const entry = document.createElement('div');
          entry.className = 'text-sm text-gray-600';
          entry.textContent = \`Item \${itemNum} removed at \${new Date().toLocaleTimeString()}\`;
          log.prepend(entry);
        }
      });
      updateCounts();
    };
    return html\`
      <div class="space-y-4">
        <div class="text-base">
          <p class="mb-2">
            Click "Add Item" to create elements, then click "Remove" on each item. The onRemove callback detects
            removals and logs them.
          </p>
        </div>

        <div class="flex gap-2">
          <button @click=\${addItem} class="btu-button btu-button-primary btu-button-sm">Add Item</button>
        </div>

        <div id="\${instanceId}-container" class="min-h-32 space-y-2 rounded border-2 border-gray-300 bg-gray-50 p-4">
          <div class="text-sm text-gray-500">Items will appear here...</div>
        </div>

        <div class="flex justify-around">
          <div>
            <div class="text-xs text-gray-500">Active items</div>
            <div id="\${instanceId}-items-count" class="text-2xl font-bold text-gray-900">0</div>
          </div>
          <div>
            <div class="text-xs text-gray-500">Removals detected</div>
            <div id="\${instanceId}-removed-count" class="text-2xl font-bold text-primary-600">0</div>
          </div>
        </div>

        <div>
          <h4 class="mb-1 text-xs font-bold text-gray-500">Removal Log</h4>
          <div id="\${instanceId}-log" class="max-h-32 overflow-y-auto rounded border border-gray-200 bg-gray-50 p-2">
            <div class="text-sm text-gray-400">No removals yet.</div>
          </div>
        </div>
      </div>
    \`;
  },
  parameters: {
    docs: {
      description: {
        story: \`Interactive example showing onRemove detecting when elements are removed from the DOM. Add items, then remove them to see the callback fire.\`
      }
    }
  }
}`,...i.parameters?.docs?.source}}};a.parameters={...a.parameters,docs:{...a.parameters?.docs,source:{originalSource:`{
  render: () => html\`
    <div class="space-y-4 text-sm">
      <div>
        <h3 class="mb-2 font-bold">Basic Usage</h3>
        <pre
          class="overflow-x-auto rounded bg-gray-900 p-4 text-gray-100"
        ><code>import onRemove from '@brightspot/ui/util/onRemove.js'

// Clean up when element is removed
const widget = document.querySelector('.my-widget')
onRemove(widget, () => {
  console.log('Widget was removed')
  // Tear down event listeners, intervals, etc.
})</code></pre>
      </div>

      <div>
        <h3 class="mb-2 font-bold">Pause and Resume</h3>
        <pre class="overflow-x-auto rounded bg-gray-900 p-4 text-gray-100"><code>// Pause during bulk DOM operations
onRemove.pause()

// Move elements around without triggering callbacks
container.innerHTML = ''
container.append(...reorderedElements)

// Resume watching
onRemove.resume()</code></pre>
      </div>

      <div>
        <h3 class="mb-2 font-bold">Common Use Cases</h3>
        <ul class="list-inside list-disc space-y-1 text-gray-700">
          <li>Cleaning up event listeners when elements are removed</li>
          <li>Cancelling intervals or timeouts tied to DOM elements</li>
          <li>Disconnecting observers or WebSocket connections</li>
          <li>Releasing resources when components are destroyed</li>
        </ul>
      </div>

      <div>
        <h3 class="mb-2 font-bold">Parameters</h3>
        <ul class="space-y-2">
          <li><code class="rounded bg-gray-200 px-1">element</code> (Element): The DOM element to watch for removal</li>
          <li>
            <code class="rounded bg-gray-200 px-1">callback</code> (function): Called once when the element is removed
            from the document
          </li>
        </ul>
      </div>
    </div>
  \`,
  parameters: {
    docs: {
      description: {
        story: \`Code examples and documentation for using the onRemove utility.\`
      }
    }
  }
}`,...a.parameters?.docs?.source}}};const y=["Interactive","UsageExample"];export{i as Interactive,a as UsageExample,y as __namedExportsOrder,h as default};
