@brightspot/ui 1.2.0 → 1.4.0

package/dist/storybook/assets/index-yMswRDPh.js

@@ -0,0 +1 @@
+import{R as o}from"./WithTooltip-SK46ZJ2J-Df0E-KJO.js";import"./preload-helper-PPVm8Dsz.js";import"./iframe-lTczLWsL.js";import"./_commonjsHelpers-CqkleIqs.js";const e={},c=o.createContext(e);function m(t){const n=o.useContext(c);return o.useMemo(function(){return typeof t=="function"?t(n):{...n,...t}},[n,t])}function s(t){let n;return t.disableParentContext?n=typeof t.components=="function"?t.components(e):t.components||e:n=m(t.components),o.createElement(c.Provider,{value:n},t.children)}export{s as MDXProvider,m as useMDXComponents};

package/dist/storybook/assets/onFind-C6olvKHR.js

@@ -0,0 +1 @@
+import{g as J}from"./_commonjsHelpers-CqkleIqs.js";var b={exports:{}},K=b.exports,P;function X(){return P||(P=1,(function(r){(function(n,e){r.exports?r.exports=e():n.log=e()})(K,function(){var n=function(){},e="undefined",o=typeof window!==e&&typeof window.navigator!==e&&/Trident\/|MSIE /.test(window.navigator.userAgent),a=["trace","debug","info","warn","error"],s={},f=null;function I(l,c){var t=l[c];if(typeof t.bind=="function")return t.bind(l);try{return Function.prototype.bind.call(t,l)}catch{return function(){return Function.prototype.apply.apply(t,[l,arguments])}}}function q(){console.log&&(console.log.apply?console.log.apply(console,arguments):Function.prototype.apply.apply(console.log,[console,arguments])),console.trace&&console.trace()}function _(l){return l==="debug"&&(l="log"),typeof console===e?!1:l==="trace"&&o?q:console[l]!==void 0?I(console,l):console.log!==void 0?I(console,"log"):n}function v(){for(var l=this.getLevel(),c=0;c<a.length;c++){var t=a[c];this[t]=c<l?n:this.methodFactory(t,l,this.name)}if(this.log=this.debug,typeof console===e&&l<this.levels.SILENT)return"No console available for logging"}function W(l){return function(){typeof console!==e&&(v.call(this),this[l].apply(this,arguments))}}function $(l,c,t){return _(l)||W.apply(this,arguments)}function F(l,c){var t=this,w,E,d,g="loglevel";typeof l=="string"?g+=":"+l:typeof l=="symbol"&&(g=void 0);function z(i){var u=(a[i]||"silent").toUpperCase();if(!(typeof window===e||!g)){try{window.localStorage[g]=u;return}catch{}try{window.document.cookie=encodeURIComponent(g)+"="+u+";"}catch{}}}function M(){var i;if(!(typeof window===e||!g)){try{i=window.localStorage[g]}catch{}if(typeof i===e)try{var u=window.document.cookie,m=encodeURIComponent(g),S=u.indexOf(m+"=");S!==-1&&(i=/^([^;]+)/.exec(u.slice(S+m.length+1))[1])}catch{}return t.levels[i]===void 0&&(i=void 0),i}}function G(){if(!(typeof window===e||!g)){try{window.localStorage.removeItem(g)}catch{}try{window.document.cookie=encodeURIComponent(g)+"=; expires=Thu, 01 Jan 1970 00:00:00 UTC"}catch{}}}function h(i){var u=i;if(typeof u=="string"&&t.levels[u.toUpperCase()]!==void 0&&(u=t.levels[u.toUpperCase()]),typeof u=="number"&&u>=0&&u<=t.levels.SILENT)return u;throw new TypeError("log.setLevel() called with invalid level: "+i)}t.name=l,t.levels={TRACE:0,DEBUG:1,INFO:2,WARN:3,ERROR:4,SILENT:5},t.methodFactory=c||$,t.getLevel=function(){return d??E??w},t.setLevel=function(i,u){return d=h(i),u!==!1&&z(d),v.call(t)},t.setDefaultLevel=function(i){E=h(i),M()||t.setLevel(i,!1)},t.resetLevel=function(){d=null,G(),v.call(t)},t.enableAll=function(i){t.setLevel(t.levels.TRACE,i)},t.disableAll=function(i){t.setLevel(t.levels.SILENT,i)},t.rebuild=function(){if(f!==t&&(w=h(f.getLevel())),v.call(t),f===t)for(var i in s)s[i].rebuild()},w=h(f?f.getLevel():"WARN");var R=M();R!=null&&(d=h(R)),v.call(t)}f=new F,f.getLogger=function(c){if(typeof c!="symbol"&&typeof c!="string"||c==="")throw new TypeError("You must supply a name when creating a logger.");var t=s[c];return t||(t=s[c]=new F(c,f.methodFactory)),t};var B=typeof window!==e?window.log:void 0;return f.noConflict=function(){return typeof window!==e&&window.log===f&&(window.log=B),f},f.getLoggers=function(){return s},f.default=f,f})})(b)),b.exports}var Y=X();const H=J(Y);let Q=0;class Z{#r;#e;#t;#l;#o;constructor(n,e,o){this.#r=n,this.#e=`data-ofc${Q++}`,Array.isArray(e)||(e=[e]),this.#t=e.map(e.some(s=>s.indexOf(",")>-1)?s=>s:s=>`${s}:not([${this.#e}])`).join(","),this.#l=o;const a=e.map(s=>s.trim()).filter(s=>s.indexOf(" ")<0&&s.indexOf(",")<0);a.length===e.length&&(this.#o=a)}addTriggerElements(n,e){if(this.#r.contains(e)){e.matches(this.#t)&&n.push(e);for(const o of e.querySelectorAll(this.#t))n.push(o)}}trigger(n){if(document.readyState!=="loading")if(this.#o&&Array.isArray(n))for(const e of n)this.#o.some(o=>e.matches(o))&&this.#n(e);else for(const e of this.#r.querySelectorAll(this.#t))this.#n(e)}#n(n){if(!D(n)&&!n.hasAttribute(this.#e)){n.setAttribute(this.#e,"");try{this.#l(n)}catch(e){H.error("Failed callback!",n,e)}}}}let x=!1,C=!1,p=!1,y=[],A;const T=[];function D(r){return r instanceof Element?r.closest(".CIG-wordCount")!==null||r.closest(".ContentEdit-previewDisplay")!==null||r.closest(".ContentLabel")!==null||r.closest(".PreviewFrame-typeDisplay")!==null||r.closest(".ProseMirrorToolbar")!==null||r.closest(".ProseMirror")!==null||r.closest(".ProseMirrorContainer")!==null||r.closest(".ProseMirror-fullscreen-container")!==null||r.closest(".ProseMirror-comments")!==null||r.closest(".RichTextEditor")!==null||r.closest(".WorkInProgressSaveStatus")!==null||r.closest("#aria-live-container")!==null||r.closest(".widget-urlsAutomatic")!==null:!1}const N=Array.prototype.every,O=r=>r.nodeType===Node.TEXT_NODE;function L(r){if(x){C=!0;return}const n=Array.isArray(r),e=[];if(n){for(const o of r){const a=o.target;if(!D(a))switch(o.type){case"attributes":o.oldValue!==a.getAttribute(o.attributeName)&&e.push(o);break;case"childList":(!N.call(o.addedNodes,O)||!N.call(o.removedNodes,O))&&e.push(o);break}}if(e.length===0)return}if(e.length>500&&(p=!0),!p)if(n)for(const o of e){const a=o.target;switch(o.type){case"attributes":y.push(a);break;case"childList":for(const s of T)s.addTriggerElements(y,a);break}}else p=!0;(p||y.length>0)&&!A&&(A=window.requestAnimationFrame(()=>{const o=p?void 0:y;p=!1,y=[],A=0,T.forEach(a=>a.trigger(o))}))}function U(){document.documentElement.hidden=!1,L(),new MutationObserver(L).observe(document,{attributes:!0,attributeFilter:["class","data-bsp-autosubmit","data-chart-type","data-code-type","data-internal-name","data-tab","name","rel","target"],attributeOldValue:!0,childList:!0,subtree:!0})}document.documentElement.hidden=!0;document.readyState==="loading"?document.addEventListener("DOMContentLoaded",U):U();function k(r,n,e){let o,a;typeof e<"u"?(o=r,a=n):(o=document,a=r,e=n);const s=new Z(o,a,e);s.trigger(),T.push(s)}k.triggerCallbacks=L;k.pause=()=>{x=!0};k.resume=()=>{x=!1,C&&(C=!1,setTimeout(L,100))};export{k as o};

package/dist/storybook/assets/onFind.stories-DfW54CDE.js

@@ -0,0 +1,284 @@
+import{x as r}from"./iframe-lTczLWsL.js";import{o as l}from"./onFind-C6olvKHR.js";import"./preload-helper-PPVm8Dsz.js";import"./_commonjsHelpers-CqkleIqs.js";const v={title:"Utilities/onFind",tags:["autodocs"],parameters:{docs:{subtitle:"The `onFind` utility observes DOM mutations and executes callbacks when elements matching specified selectors appear. Uses MutationObserver internally to efficiently track element additions and attribute changes."},controls:{expanded:!0}},argTypes:{selector:{control:{type:"text"},description:"CSS selector to watch for"}},args:{selector:".dynamic-item"}},i={render:m=>{const t=`onfind-${Math.random().toString(36).substring(2,9)}`,c=`.dynamic-item-${t}`;let o=0,a=0;const d=()=>{const e=document.getElementById(`${t}-items-count`),n=document.getElementById(`${t}-found-count`);e&&(e.textContent=String(o)),n&&(n.textContent=String(a))};return l(c,e=>{a++,d(),e.classList.add("ring-2","ring-success-500")}),r`
+      <div class="space-y-4">
+        <div class="text-base">
+          <p class="mb-2">
+            Click "Add Item" to dynamically create elements. The onFind observer detects them and highlights them with a
+            green border.
+          </p>
+        </div>
+
+        <div class="flex gap-2">
+          <button @click=${()=>{o++;const e=document.getElementById(`${t}-container`);if(e){const n=document.createElement("div");n.className=`dynamic-item-${t} rounded border bg-white p-4`,n.textContent=`Item ${o}`,e.appendChild(n)}d()}} class="bg-primary-500 hover:bg-primary-600 rounded px-4 py-2 text-white">
+            Add Item
+          </button>
+          <button @click=${()=>{o=0,a=0;const e=document.getElementById(`${t}-container`);e&&(e.innerHTML=""),d()}} class="rounded bg-gray-200 px-4 py-2 hover:bg-gray-300">Clear All</button>
+        </div>
+
+        <div id="${t}-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">Items created</div>
+            <div id="${t}-items-count" class="text-2xl font-bold text-gray-900">0</div>
+          </div>
+          <div>
+            <div class="text-xs text-gray-500">Items detected by onFind</div>
+            <div id="${t}-found-count" class="text-primary-600 text-2xl font-bold">0</div>
+          </div>
+        </div>
+      </div>
+    `},parameters:{docs:{description:{story:"Interactive example showing onFind detecting dynamically added elements. Elements are automatically highlighted when detected."}}}},s={render:()=>r`
+    <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 onFind from '@brightspot/ui/dist/util/onFind.js'
+
+// Watch for elements globally
+onFind('.my-component', (element) => {
+  console.log('Found element:', element)
+  // Initialize component
+})
+
+// Watch within a specific root element
+const container = document.querySelector('#container')
+onFind(container, '.my-widget', (element) => {
+  // Initialize widget
+})</code></pre>
+      </div>
+
+      <div>
+        <h3 class="mb-2 font-bold">Multiple Selectors</h3>
+        <pre class="overflow-x-auto rounded bg-gray-900 p-4 text-gray-100"><code>// Watch for multiple selectors at once
+onFind(['.button', '.input', '.select'], (element) => {
+  if (element.matches('.button')) {
+    // Handle button
+  } else if (element.matches('.input')) {
+    // Handle input
+  }
+})</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 observations temporarily
+onFind.pause()
+
+// Make bulk DOM changes without triggering callbacks
+// ...
+
+// Resume observations
+onFind.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>Initialize components when they appear in the DOM</li>
+          <li>Attach event listeners to dynamically created elements</li>
+          <li>Enhance server-rendered content progressively</li>
+          <li>Detect and respond to attribute changes</li>
+          <li>Apply transformations to newly added content</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">root</code> (ParentNode, optional): Root element to observe. Defaults
+            to document.
+          </li>
+          <li>
+            <code class="rounded bg-gray-200 px-1">selectors</code> (string | string[]): CSS selector(s) to watch for
+          </li>
+          <li>
+            <code class="rounded bg-gray-200 px-1">fn</code> (function): Callback executed when matching elements are
+            found
+          </li>
+        </ul>
+      </div>
+
+      <div>
+        <h3 class="mb-2 font-bold">How It Works</h3>
+        <p class="text-gray-700">
+          onFind uses MutationObserver to efficiently watch for DOM changes. Each callback is executed only once per
+          element using data attributes to track already-processed elements. The observer watches for childList
+          mutations and specific attribute changes, with built-in blacklisting for editor containers.
+        </p>
+      </div>
+    </div>
+  `,parameters:{docs:{description:{story:"Code examples and documentation for using the onFind utility."}}}};i.parameters={...i.parameters,docs:{...i.parameters?.docs,source:{originalSource:`{
+  render: args => {
+    const instanceId = \`onfind-\${Math.random().toString(36).substring(2, 9)}\`;
+    const uniqueSelector = \`.dynamic-item-\${instanceId}\`;
+    let itemCount = 0;
+    let foundCount = 0;
+    const updateCounts = () => {
+      const itemsEl = document.getElementById(\`\${instanceId}-items-count\`);
+      const foundEl = document.getElementById(\`\${instanceId}-found-count\`);
+      if (itemsEl) itemsEl.textContent = String(itemCount);
+      if (foundEl) foundEl.textContent = String(foundCount);
+    };
+
+    // Set up onFind observer for dynamic items with unique selector
+    onFind(uniqueSelector, (element: HTMLElement) => {
+      foundCount++;
+      updateCounts();
+      element.classList.add('ring-2', 'ring-success-500');
+    });
+    const addItem = () => {
+      itemCount++;
+      const container = document.getElementById(\`\${instanceId}-container\`);
+      if (container) {
+        const item = document.createElement('div');
+        item.className = \`dynamic-item-\${instanceId} rounded border bg-white p-4\`;
+        item.textContent = \`Item \${itemCount}\`;
+        container.appendChild(item);
+      }
+      updateCounts();
+    };
+    const clearItems = () => {
+      itemCount = 0;
+      foundCount = 0;
+      const container = document.getElementById(\`\${instanceId}-container\`);
+      if (container) {
+        container.innerHTML = '';
+      }
+      updateCounts();
+    };
+    return html\`
+      <div class="space-y-4">
+        <div class="text-base">
+          <p class="mb-2">
+            Click "Add Item" to dynamically create elements. The onFind observer detects them and highlights them with a
+            green border.
+          </p>
+        </div>
+
+        <div class="flex gap-2">
+          <button @click=\${addItem} class="bg-primary-500 hover:bg-primary-600 rounded px-4 py-2 text-white">
+            Add Item
+          </button>
+          <button @click=\${clearItems} class="rounded bg-gray-200 px-4 py-2 hover:bg-gray-300">Clear All</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">Items created</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">Items detected by onFind</div>
+            <div id="\${instanceId}-found-count" class="text-primary-600 text-2xl font-bold">0</div>
+          </div>
+        </div>
+      </div>
+    \`;
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: \`Interactive example showing onFind detecting dynamically added elements. Elements are automatically highlighted when detected.\`
+      }
+    }
+  }
+}`,...i.parameters?.docs?.source}}};s.parameters={...s.parameters,docs:{...s.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 onFind from '@brightspot/ui/dist/util/onFind.js'
+
+// Watch for elements globally
+onFind('.my-component', (element) => {
+  console.log('Found element:', element)
+  // Initialize component
+})
+
+// Watch within a specific root element
+const container = document.querySelector('#container')
+onFind(container, '.my-widget', (element) => {
+  // Initialize widget
+})</code></pre>
+      </div>
+
+      <div>
+        <h3 class="mb-2 font-bold">Multiple Selectors</h3>
+        <pre class="overflow-x-auto rounded bg-gray-900 p-4 text-gray-100"><code>// Watch for multiple selectors at once
+onFind(['.button', '.input', '.select'], (element) => {
+  if (element.matches('.button')) {
+    // Handle button
+  } else if (element.matches('.input')) {
+    // Handle input
+  }
+})</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 observations temporarily
+onFind.pause()
+
+// Make bulk DOM changes without triggering callbacks
+// ...
+
+// Resume observations
+onFind.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>Initialize components when they appear in the DOM</li>
+          <li>Attach event listeners to dynamically created elements</li>
+          <li>Enhance server-rendered content progressively</li>
+          <li>Detect and respond to attribute changes</li>
+          <li>Apply transformations to newly added content</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">root</code> (ParentNode, optional): Root element to observe. Defaults
+            to document.
+          </li>
+          <li>
+            <code class="rounded bg-gray-200 px-1">selectors</code> (string | string[]): CSS selector(s) to watch for
+          </li>
+          <li>
+            <code class="rounded bg-gray-200 px-1">fn</code> (function): Callback executed when matching elements are
+            found
+          </li>
+        </ul>
+      </div>
+
+      <div>
+        <h3 class="mb-2 font-bold">How It Works</h3>
+        <p class="text-gray-700">
+          onFind uses MutationObserver to efficiently watch for DOM changes. Each callback is executed only once per
+          element using data attributes to track already-processed elements. The observer watches for childList
+          mutations and specific attribute changes, with built-in blacklisting for editor containers.
+        </p>
+      </div>
+    </div>
+  \`,
+  parameters: {
+    docs: {
+      description: {
+        story: \`Code examples and documentation for using the onFind utility.\`
+      }
+    }
+  }
+}`,...s.parameters?.docs?.source}}};const f=["Interactive","UsageExample"];export{i as Interactive,s as UsageExample,f as __namedExportsOrder,v as default};

package/dist/storybook/assets/onRemove.stories-C7W9KyRr.js

@@ -0,0 +1,234 @@
+import{x as p}from"./iframe-lTczLWsL.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 b={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="bg-primary-500 hover:bg-primary-600 rounded px-4 py-2 text-white">
+            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-primary-600 text-2xl font-bold">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/dist/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="bg-primary-500 hover:bg-primary-600 rounded px-4 py-2 text-white">
+            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-primary-600 text-2xl font-bold">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/dist/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,b as default};