@brightspot/ui 6.0.5 → 6.0.6

package/dist/storybook/assets/{onFind.stories-DgxMtTTG.js → onFind.stories-rDFDR12f.js}

@@ -1,4 +1,4 @@
-import{x as f}from"./iframe-D43T7JCn.js";import{l as P,o as p}from"./onFind-CamigPPi.js";import"./preload-helper-PPVm8Dsz.js";const F=Symbol.for("brightspot.onFind");let y;function v(){return y||(y=globalThis[F],y||(y={calledIndex:0,callbacks:[],blacklist:[],triggerPaused:!1,triggerOnResume:!1,triggerAll:!1,triggerElements:[],triggerFrame:0,initialized:!1},globalThis[F]=y),y)}class O{#n;#e;#t;#a;#s;constructor(t,e,n){this.#n=t,this.#e=`data-ofc${v().calledIndex++}`,Array.isArray(e)||(e=[e]),this.#t=e.map(e.some(o=>o.indexOf(",")>-1)?o=>o:o=>`${o}:not([${this.#e}])`).join(","),this.#a=n;const a=e.map(o=>o.trim()).filter(o=>o.indexOf(" ")<0&&o.indexOf(",")<0);a.length===e.length&&(this.#s=a)}addTriggerElements(t,e){if(this.#n.contains(e)){e.matches(this.#t)&&t.push(e);for(const n of e.querySelectorAll(this.#t))t.push(n)}}trigger(t){if(document.readyState!=="loading")if(this.#s&&Array.isArray(t))for(const e of t)this.#s.some(n=>e.matches(n))&&this.#o(e);else for(const e of this.#n.querySelectorAll(this.#t))this.#o(e)}#o(t){if(!H(t)&&!t.hasAttribute(this.#e)){t.setAttribute(this.#e,"");try{this.#a(t)}catch(e){P.error("Failed callback!",t,e)}}}}function H(s){if(!(s instanceof Element))return!1;const{blacklist:t}=v();return t.length>0&&t.some(e=>s.closest(e)!==null)}const $=Array.prototype.every,S=s=>s.nodeType===Node.TEXT_NODE;function C(s){const t=v();if(t.triggerPaused){t.triggerOnResume=!0;return}const e=Array.isArray(s),n=[];if(e){for(const a of s){const o=a.target;if(!H(o))switch(a.type){case"attributes":a.oldValue!==o.getAttribute(a.attributeName)&&n.push(a);break;case"childList":(!$.call(a.addedNodes,S)||!$.call(a.removedNodes,S))&&n.push(a);break}}if(n.length===0)return}if(n.length>500&&(t.triggerAll=!0),!t.triggerAll)if(e)for(const a of n){const o=a.target;switch(a.type){case"attributes":t.triggerElements.push(o);break;case"childList":for(const c of t.callbacks)c.addTriggerElements(t.triggerElements,o);break}}else t.triggerAll=!0;(t.triggerAll||t.triggerElements.length>0)&&!t.triggerFrame&&(t.triggerFrame=window.requestAnimationFrame(()=>{const a=t.triggerAll?void 0:t.triggerElements;t.triggerAll=!1,t.triggerElements=[],t.triggerFrame=0,t.callbacks.forEach(o=>o.trigger(a))}))}function z(){C(),new MutationObserver(C).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})}function D(){const s=v();s.initialized||(s.initialized=!0,document.readyState==="loading"?document.addEventListener("DOMContentLoaded",z):z())}function b(s,t,e){D();let n,a;typeof e<"u"?(n=s,a=t):(n=document,a=s,e=t);const o=new O(n,a,e);return o.trigger(),v().callbacks.push(o),()=>{const{callbacks:c}=v(),m=c.indexOf(o);m!==-1&&c.splice(m,1)}}b.triggerCallbacks=C;b.pause=()=>{v().triggerPaused=!0};b.resume=()=>{const s=v();s.triggerPaused=!1,s.triggerOnResume&&(s.triggerOnResume=!1,setTimeout(C,100))};b.ignore=(...s)=>{const{blacklist:t}=v();for(const e of s){try{document.querySelector(e)}catch{continue}t.includes(e)||t.push(e)}};const{expect:d,userEvent:r,waitFor:u,within:k}=__STORYBOOK_MODULE_TEST__,R={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"}},h={render:s=>{const t=`onfind-${Math.random().toString(36).substring(2,9)}`,e=`.dynamic-item-${t}`;let n=0,a=0;const o=()=>{const i=document.getElementById(`${t}-items-count`),l=document.getElementById(`${t}-found-count`);i&&(i.textContent=String(n)),l&&(l.textContent=String(a))};return p(e,i=>{a++,o(),i.classList.add("ring-2","ring-success-500")}),f`
+import{x as f}from"./iframe-D1g1spfw.js";import{l as P,o as p}from"./onFind-ZJa5FYZA.js";import"./preload-helper-PPVm8Dsz.js";const F=Symbol.for("brightspot.onFind");let y;function v(){return y||(y=globalThis[F],y||(y={calledIndex:0,callbacks:[],blacklist:[],triggerPaused:!1,triggerOnResume:!1,triggerAll:!1,triggerElements:[],triggerContainers:new Set,triggerFrame:0,initialized:!1},globalThis[F]=y),y)}class O{#n;#e;#t;#a;#s;constructor(t,e,n){this.#n=t,this.#e=`data-ofc${v().calledIndex++}`,Array.isArray(e)||(e=[e]),this.#t=e.map(e.some(a=>a.indexOf(",")>-1)?a=>a:a=>`${a}:not([${this.#e}])`).join(","),this.#a=n;const d=e.map(a=>a.trim()).filter(a=>a.indexOf(" ")<0&&a.indexOf(",")<0);d.length===e.length&&(this.#s=d)}addTriggerElements(t,e){if(this.#n.contains(e)){e.matches(this.#t)&&t.push(e);for(const n of e.querySelectorAll(this.#t))t.push(n)}}trigger(t){if(document.readyState!=="loading")if(this.#s&&Array.isArray(t))for(const e of t)this.#s.some(n=>e.matches(n))&&this.#o(e);else for(const e of this.#n.querySelectorAll(this.#t))this.#o(e)}#o(t){if(!H(t)&&!t.hasAttribute(this.#e)){t.setAttribute(this.#e,"");try{this.#a(t)}catch(e){P.error("Failed callback!",t,e)}}}}function H(s){if(!(s instanceof Element))return!1;const{blacklist:t}=v();return t.length>0&&t.some(e=>s.closest(e)!==null)}const S=Array.prototype.every,$=s=>s.nodeType===Node.TEXT_NODE;function C(s){const t=v();if(t.triggerPaused){t.triggerOnResume=!0;return}const e=Array.isArray(s),n=[];if(e){for(const a of s){const c=a.target;if(!H(c))switch(a.type){case"attributes":a.oldValue!==c.getAttribute(a.attributeName)&&n.push(a);break;case"childList":(!S.call(a.addedNodes,$)||!S.call(a.removedNodes,$))&&n.push(a);break}}if(n.length===0)return}n.length>500&&(t.triggerAll=!0);const d=t.triggerContainers??(t.triggerContainers=new Set);if(!t.triggerAll)if(e)for(const a of n){const c=a.target;switch(a.type){case"attributes":t.triggerElements.push(c);break;case"childList":d.add(c);break}}else t.triggerAll=!0;(t.triggerAll||t.triggerElements.length>0||d.size>0)&&!t.triggerFrame&&(t.triggerFrame=window.requestAnimationFrame(()=>{let a;if(!t.triggerAll){for(const c of d)if(c instanceof Element)for(const u of t.callbacks)u.addTriggerElements(t.triggerElements,c);a=t.triggerElements}t.triggerAll=!1,t.triggerElements=[],t.triggerContainers=new Set,t.triggerFrame=0,t.callbacks.forEach(c=>c.trigger(a))}))}function z(){C(),new MutationObserver(C).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})}function D(){const s=v();s.initialized||(s.initialized=!0,document.readyState==="loading"?document.addEventListener("DOMContentLoaded",z):z())}function b(s,t,e){D();let n,d;typeof e<"u"?(n=s,d=t):(n=document,d=s,e=t);const a=new O(n,d,e);return a.trigger(),v().callbacks.push(a),()=>{const{callbacks:c}=v(),u=c.indexOf(a);u!==-1&&c.splice(u,1)}}b.triggerCallbacks=C;b.pause=()=>{v().triggerPaused=!0};b.resume=()=>{const s=v();s.triggerPaused=!1,s.triggerOnResume&&(s.triggerOnResume=!1,setTimeout(C,100))};b.ignore=(...s)=>{const{blacklist:t}=v();for(const e of s){try{document.querySelector(e)}catch{continue}t.includes(e)||t.push(e)}};const{expect:i,userEvent:r,waitFor:g,within:k}=__STORYBOOK_MODULE_TEST__,R={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"}},h={render:s=>{const t=`onfind-${Math.random().toString(36).substring(2,9)}`,e=`.dynamic-item-${t}`;let n=0,d=0;const a=()=>{const o=document.getElementById(`${t}-items-count`),l=document.getElementById(`${t}-found-count`);o&&(o.textContent=String(n)),l&&(l.textContent=String(d))};return p(e,o=>{d++,a(),o.classList.add("ring-2","ring-success-500")}),f`
       <div class="space-y-4">
         <div class="text-base">
           <p class="mb-2">
@@ -8,10 +8,10 @@ import{x as f}from"./iframe-D43T7JCn.js";import{l as P,o as p}from"./onFind-Cami
         </div>
 
         <div class="flex gap-2">
-          <button data-testid="add-item" @click=${()=>{n++;const i=document.getElementById(`${t}-container`);if(i){const l=document.createElement("div");l.className=`dynamic-item-${t} rounded border bg-white p-4`,l.textContent=`Item ${n}`,i.appendChild(l)}o()}} class="btu-button btu-button-primary btu-button-sm">
+          <button data-testid="add-item" @click=${()=>{n++;const o=document.getElementById(`${t}-container`);if(o){const l=document.createElement("div");l.className=`dynamic-item-${t} rounded border bg-white p-4`,l.textContent=`Item ${n}`,o.appendChild(l)}a()}} class="btu-button btu-button-primary btu-button-sm">
             Add Item
           </button>
-          <button data-testid="clear-items" @click=${()=>{n=0,a=0;const i=document.getElementById(`${t}-container`);i&&(i.innerHTML=""),o()}} class="btu-button btu-button-gray btu-button-sm">
+          <button data-testid="clear-items" @click=${()=>{n=0,d=0;const o=document.getElementById(`${t}-container`);o&&(o.innerHTML=""),a()}} class="btu-button btu-button-gray btu-button-sm">
             Clear All
           </button>
         </div>
@@ -35,7 +35,7 @@ import{x as f}from"./iframe-D43T7JCn.js";import{l as P,o as p}from"./onFind-Cami
           </div>
         </div>
       </div>
-    `},parameters:{docs:{description:{story:"Interactive example showing onFind detecting dynamically added elements. Elements are automatically highlighted when detected."}}},play:async({canvasElement:s,step:t})=>{const e=k(s);await t("Detects dynamically added element",async()=>{await r.click(e.getByTestId("add-item")),await u(()=>d(e.getByTestId("found-count")).toHaveTextContent("1"))}),await t("Detects multiple elements",async()=>{await r.click(e.getByTestId("add-item")),await r.click(e.getByTestId("add-item")),await u(()=>d(e.getByTestId("found-count")).toHaveTextContent("3"))}),await t("Clear resets counts",async()=>{await r.click(e.getByTestId("clear-items")),d(e.getByTestId("items-count")).toHaveTextContent("0"),d(e.getByTestId("found-count")).toHaveTextContent("0")}),await t("Detection resumes after clear",async()=>{await r.click(e.getByTestId("add-item")),await u(()=>d(e.getByTestId("found-count")).toHaveTextContent("1"))})}},B={render:()=>{const s="onfind-ignore-demo",t=".ignore-demo-item",e="ignore-demo-zone";let n=0,a=0;const o=()=>{const i=document.getElementById(`${s}-found-count`);i&&(i.textContent=String(n))};return p.ignore(`.${e}`),p(t,i=>{n++,o(),i.classList.add("ring-2","ring-success-500")}),f`
+    `},parameters:{docs:{description:{story:"Interactive example showing onFind detecting dynamically added elements. Elements are automatically highlighted when detected."}}},play:async({canvasElement:s,step:t})=>{const e=k(s);await t("Detects dynamically added element",async()=>{await r.click(e.getByTestId("add-item")),await g(()=>i(e.getByTestId("found-count")).toHaveTextContent("1"))}),await t("Detects multiple elements",async()=>{await r.click(e.getByTestId("add-item")),await r.click(e.getByTestId("add-item")),await g(()=>i(e.getByTestId("found-count")).toHaveTextContent("3"))}),await t("Clear resets counts",async()=>{await r.click(e.getByTestId("clear-items")),i(e.getByTestId("items-count")).toHaveTextContent("0"),i(e.getByTestId("found-count")).toHaveTextContent("0")}),await t("Detection resumes after clear",async()=>{await r.click(e.getByTestId("add-item")),await g(()=>i(e.getByTestId("found-count")).toHaveTextContent("1"))})}},B={render:()=>{const s="onfind-ignore-demo",t=".ignore-demo-item",e="ignore-demo-zone";let n=0,d=0;const a=()=>{const o=document.getElementById(`${s}-found-count`);o&&(o.textContent=String(n))};return p.ignore(`.${e}`),p(t,o=>{n++,a(),o.classList.add("ring-2","ring-success-500")}),f`
       <div class="space-y-4">
         <p class="text-base">
           Elements added inside the <strong>ignored zone</strong> are skipped by onFind callbacks. Elements added
@@ -43,10 +43,10 @@ import{x as f}from"./iframe-D43T7JCn.js";import{l as P,o as p}from"./onFind-Cami
         </p>
 
         <div class="flex gap-2">
-          <button data-testid="add-outside" @click=${()=>{a++;const i=document.getElementById(`${s}-outside`);if(i){const l=document.createElement("div");l.className=`${t.slice(1)} rounded border bg-white p-4`,l.textContent=`Outside ${a}`,i.appendChild(l)}}} class="btu-button btu-button-primary btu-button-sm">
+          <button data-testid="add-outside" @click=${()=>{d++;const o=document.getElementById(`${s}-outside`);if(o){const l=document.createElement("div");l.className=`${t.slice(1)} rounded border bg-white p-4`,l.textContent=`Outside ${d}`,o.appendChild(l)}}} class="btu-button btu-button-primary btu-button-sm">
             Add Outside
           </button>
-          <button data-testid="add-inside" @click=${()=>{a++;const i=document.getElementById(`${s}-inside`);if(i){const l=document.createElement("div");l.className=`${t.slice(1)} rounded border bg-white p-4`,l.textContent=`Inside ${a}`,i.appendChild(l)}}} class="btu-button btu-button-gray btu-button-sm">
+          <button data-testid="add-inside" @click=${()=>{d++;const o=document.getElementById(`${s}-inside`);if(o){const l=document.createElement("div");l.className=`${t.slice(1)} rounded border bg-white p-4`,l.textContent=`Inside ${d}`,o.appendChild(l)}}} class="btu-button btu-button-gray btu-button-sm">
             Add Inside Ignored
           </button>
         </div>
@@ -80,7 +80,7 @@ import{x as f}from"./iframe-D43T7JCn.js";import{l as P,o as p}from"./onFind-Cami
           </div>
         </div>
       </div>
-    `},parameters:{docs:{description:{story:"Demonstrates `onFind.ignore()` — elements inside ignored containers are excluded from callback processing. Useful for skipping rich-text editors or other zones where DOM mutations should not trigger component initialization."}}},play:async({canvasElement:s,step:t})=>{const e=k(s);await t("Detects outside ignored zone",async()=>{await r.click(e.getByTestId("add-outside")),await u(()=>d(e.getByTestId("ignore-found-count")).toHaveTextContent("1"))}),await t("Skips inside ignored zone",async()=>{await r.click(e.getByTestId("add-inside")),await new Promise(n=>requestAnimationFrame(()=>requestAnimationFrame(n))),d(e.getByTestId("ignore-found-count")).toHaveTextContent("1")}),await t("Continues detecting outside",async()=>{await r.click(e.getByTestId("add-outside")),await u(()=>d(e.getByTestId("ignore-found-count")).toHaveTextContent("2"))})}},I={render:()=>{const s="onfind-pause-demo",t=".pause-demo-item";let e=0,n=0;const a=()=>{const i=document.getElementById(`${s}-found-count`);i&&(i.textContent=String(e))};p(t,i=>{e++,a(),i.classList.add("ring-2","ring-success-500")});const o=()=>{n++;const i=document.getElementById(`${s}-container`);if(i){const l=document.createElement("div");l.className=`${t.slice(1)} rounded border bg-white p-4`,l.textContent=`Item ${n}`,i.appendChild(l)}};let c=!1;return f`
+    `},parameters:{docs:{description:{story:"Demonstrates `onFind.ignore()` — elements inside ignored containers are excluded from callback processing. Useful for skipping rich-text editors or other zones where DOM mutations should not trigger component initialization."}}},play:async({canvasElement:s,step:t})=>{const e=k(s);await t("Detects outside ignored zone",async()=>{await r.click(e.getByTestId("add-outside")),await g(()=>i(e.getByTestId("ignore-found-count")).toHaveTextContent("1"))}),await t("Skips inside ignored zone",async()=>{await r.click(e.getByTestId("add-inside")),await new Promise(n=>requestAnimationFrame(()=>requestAnimationFrame(n))),i(e.getByTestId("ignore-found-count")).toHaveTextContent("1")}),await t("Continues detecting outside",async()=>{await r.click(e.getByTestId("add-outside")),await g(()=>i(e.getByTestId("ignore-found-count")).toHaveTextContent("2"))})}},w={render:()=>{const s="onfind-pause-demo",t=".pause-demo-item";let e=0,n=0;const d=()=>{const o=document.getElementById(`${s}-found-count`);o&&(o.textContent=String(e))};p(t,o=>{e++,d(),o.classList.add("ring-2","ring-success-500")});const a=()=>{n++;const o=document.getElementById(`${s}-container`);if(o){const l=document.createElement("div");l.className=`${t.slice(1)} rounded border bg-white p-4`,l.textContent=`Item ${n}`,o.appendChild(l)}};let c=!1;return f`
       <div class="space-y-4">
         <p class="text-base">
           Use <code>onFind.pause()</code> to temporarily stop detection and <code>onFind.resume()</code> to restart it.
@@ -88,10 +88,10 @@ import{x as f}from"./iframe-D43T7JCn.js";import{l as P,o as p}from"./onFind-Cami
         </p>
 
         <div class="flex gap-2">
-          <button data-testid="pause-add" @click=${o} class="btu-button btu-button-primary btu-button-sm">
+          <button data-testid="pause-add" @click=${a} class="btu-button btu-button-primary btu-button-sm">
             Add Item
           </button>
-          <button data-testid="toggle-pause" @click=${()=>{c=!c,c?p.pause():p.resume();const i=document.querySelector('[data-testid="toggle-pause"]');i&&(i.textContent=c?"Resume":"Pause",i.className=c?"btu-button btu-button-success btu-button-sm":"btu-button btu-button-warning btu-button-sm")}} class="btu-button btu-button-warning btu-button-sm">
+          <button data-testid="toggle-pause" @click=${()=>{c=!c,c?p.pause():p.resume();const o=document.querySelector('[data-testid="toggle-pause"]');o&&(o.textContent=c?"Resume":"Pause",o.className=c?"btu-button btu-button-success btu-button-sm":"btu-button btu-button-warning btu-button-sm")}} class="btu-button btu-button-warning btu-button-sm">
             Pause
           </button>
         </div>
@@ -111,7 +111,7 @@ import{x as f}from"./iframe-D43T7JCn.js";import{l as P,o as p}from"./onFind-Cami
           </div>
         </div>
       </div>
-    `},parameters:{docs:{description:{story:"Demonstrates `onFind.pause()` and `onFind.resume()`. While paused, DOM mutations are queued and processed when resumed."}}},play:async({canvasElement:s,step:t})=>{const e=k(s);await t("Normal detection before pause",async()=>{await r.click(e.getByTestId("pause-add")),await u(()=>d(e.getByTestId("pause-found-count")).toHaveTextContent("1"))}),await t("Pause stops detection",async()=>{await r.click(e.getByTestId("toggle-pause")),await r.click(e.getByTestId("pause-add")),await new Promise(n=>setTimeout(n,200)),d(e.getByTestId("pause-found-count")).toHaveTextContent("1")}),await t("Resume triggers pending detection",async()=>{await r.click(e.getByTestId("toggle-pause")),await u(()=>d(e.getByTestId("pause-found-count")).toHaveTextContent("2"),{timeout:2e3})})}},w={render:()=>{const s=p,t=".singleton-item-a",e=".singleton-item-b";let n=0,a=0;const o=()=>{const g=document.getElementById("singleton-count-a"),x=document.getElementById("singleton-count-b");g&&(g.textContent=String(n)),x&&(x.textContent=String(a))};s.ignore(".singleton-ignored-zone"),s(t,g=>{n++,o(),g.classList.add("ring-2","ring-blue-500")}),b(e,g=>{a++,o(),g.classList.add("ring-2","ring-purple-500")});const c=(g,x,M)=>{const A=document.getElementById(M);if(A){const E=document.createElement("div");E.className=`${g.slice(1)} rounded border bg-white p-4`,E.textContent=x,A.appendChild(E)}};let m=!1;return f`
+    `},parameters:{docs:{description:{story:"Demonstrates `onFind.pause()` and `onFind.resume()`. While paused, DOM mutations are queued and processed when resumed."}}},play:async({canvasElement:s,step:t})=>{const e=k(s);await t("Normal detection before pause",async()=>{await r.click(e.getByTestId("pause-add")),await g(()=>i(e.getByTestId("pause-found-count")).toHaveTextContent("1"))}),await t("Pause stops detection",async()=>{await r.click(e.getByTestId("toggle-pause")),await r.click(e.getByTestId("pause-add")),await new Promise(n=>setTimeout(n,200)),i(e.getByTestId("pause-found-count")).toHaveTextContent("1")}),await t("Resume triggers pending detection",async()=>{await r.click(e.getByTestId("toggle-pause")),await g(()=>i(e.getByTestId("pause-found-count")).toHaveTextContent("2"),{timeout:2e3})})}},I={render:()=>{const s=p,t=".singleton-item-a",e=".singleton-item-b";let n=0,d=0;const a=()=>{const m=document.getElementById("singleton-count-a"),x=document.getElementById("singleton-count-b");m&&(m.textContent=String(n)),x&&(x.textContent=String(d))};s.ignore(".singleton-ignored-zone"),s(t,m=>{n++,a(),m.classList.add("ring-2","ring-blue-500")}),b(e,m=>{d++,a(),m.classList.add("ring-2","ring-purple-500")});const c=(m,x,M)=>{const A=document.getElementById(M);if(A){const E=document.createElement("div");E.className=`${m.slice(1)} rounded border bg-white p-4`,E.textContent=x,A.appendChild(E)}};let u=!1;return f`
       <div class="space-y-4">
         <p class="text-base">
           Two separate ES module instances of <code>onFind</code> (each with its own <code>_state</code> cache) share
@@ -121,7 +121,7 @@ import{x as f}from"./iframe-D43T7JCn.js";import{l as P,o as p}from"./onFind-Cami
         <div class="flex items-center gap-4">
           <button
             data-testid="singleton-toggle-pause"
-            @click=${()=>{m=!m,m?s.pause():s.resume();const g=document.querySelector('[data-testid="singleton-toggle-pause"]');g&&(g.textContent=m?"Resume":"Pause",g.className=m?"btu-button btu-button-success btu-button-sm":"btu-button btu-button-warning btu-button-sm")}}
+            @click=${()=>{u=!u,u?s.pause():s.resume();const m=document.querySelector('[data-testid="singleton-toggle-pause"]');m&&(m.textContent=u?"Resume":"Pause",m.className=u?"btu-button btu-button-success btu-button-sm":"btu-button btu-button-warning btu-button-sm")}}
             class="btu-button btu-button-warning btu-button-sm"
           >
             Pause
@@ -203,7 +203,7 @@ import{x as f}from"./iframe-D43T7JCn.js";import{l as P,o as p}from"./onFind-Cami
           </div>
         </div>
       </div>
-    `},parameters:{docs:{description:{story:"Two independent module instances of `onFind` (simulating separate bundles) share a single MutationObserver, ignore list, and pause/resume state through the `globalThis[Symbol.for()]` singleton pattern."}}},play:async({canvasElement:s,step:t})=>{const e=k(s);await t("Shared observer: Bundle A detects A items, Bundle B detects B items",async()=>{await r.click(e.getByTestId("singleton-add-a")),await u(()=>d(e.getByTestId("singleton-count-a")).toHaveTextContent("1")),await r.click(e.getByTestId("singleton-add-b")),await u(()=>d(e.getByTestId("singleton-count-b")).toHaveTextContent("1"))}),await t("Cross-zone detection fires correct callback",async()=>{await r.click(e.getByTestId("singleton-zone-a-add-b")),await u(()=>d(e.getByTestId("singleton-count-b")).toHaveTextContent("2")),d(e.getByTestId("singleton-count-a")).toHaveTextContent("1"),await r.click(e.getByTestId("singleton-zone-b-add-a")),await u(()=>d(e.getByTestId("singleton-count-a")).toHaveTextContent("2")),d(e.getByTestId("singleton-count-b")).toHaveTextContent("2")}),await t("Shared ignore list: Bundle A ignore() blocks Bundle B callbacks",async()=>{const n=e.getByTestId("singleton-count-a").textContent,a=e.getByTestId("singleton-count-b").textContent;await r.click(e.getByTestId("singleton-add-ignored")),await new Promise(o=>requestAnimationFrame(()=>requestAnimationFrame(o))),d(e.getByTestId("singleton-count-a")).toHaveTextContent(n),d(e.getByTestId("singleton-count-b")).toHaveTextContent(a)}),await t("Ignore lists are merged and deduped across bundles",async()=>{const n=globalThis[Symbol.for("brightspot.onFind")],a=n.blacklist.length;b.ignore(".singleton-ignored-zone"),d(n.blacklist.length).toBe(a),b.ignore(".bundle-b-ignored"),d(n.blacklist).toContain(".singleton-ignored-zone"),d(n.blacklist).toContain(".bundle-b-ignored"),d(n.blacklist.length).toBe(a+1)}),await t("Shared pause/resume: Bundle A pause() stops Bundle B detection",async()=>{await r.click(e.getByTestId("singleton-toggle-pause")),await r.click(e.getByTestId("singleton-add-a")),await r.click(e.getByTestId("singleton-add-b")),await new Promise(n=>setTimeout(n,200)),d(e.getByTestId("singleton-count-a")).toHaveTextContent("2"),d(e.getByTestId("singleton-count-b")).toHaveTextContent("2"),await r.click(e.getByTestId("singleton-toggle-pause")),await u(()=>d(e.getByTestId("singleton-count-a")).toHaveTextContent("3"),{timeout:2e3}),await u(()=>d(e.getByTestId("singleton-count-b")).toHaveTextContent("3"),{timeout:2e3})}),await t("No index collision on data-ofc attributes",async()=>{const n=s.querySelectorAll(".singleton-item-a, .singleton-item-b"),a=new Set;n.forEach(o=>{o.getAttributeNames().filter(c=>c.startsWith("data-ofc")).forEach(c=>a.add(c))}),d(a.size).toBeGreaterThanOrEqual(2)}),await t("Singleton state: both bundles share the same globalThis object",async()=>{const n=globalThis[Symbol.for("brightspot.onFind")];d(n).toBeDefined(),d(n.callbacks).toBeDefined(),d(Array.isArray(n.callbacks)).toBe(!0),d(n.initialized).toBe(!0),d(p.pause).not.toBe(b.pause),d(p.resume).not.toBe(b.resume)})}},T={render:()=>f`
+    `},parameters:{docs:{description:{story:"Two independent module instances of `onFind` (simulating separate bundles) share a single MutationObserver, ignore list, and pause/resume state through the `globalThis[Symbol.for()]` singleton pattern."}}},play:async({canvasElement:s,step:t})=>{const e=k(s);await t("Shared observer: Bundle A detects A items, Bundle B detects B items",async()=>{await r.click(e.getByTestId("singleton-add-a")),await g(()=>i(e.getByTestId("singleton-count-a")).toHaveTextContent("1")),await r.click(e.getByTestId("singleton-add-b")),await g(()=>i(e.getByTestId("singleton-count-b")).toHaveTextContent("1"))}),await t("Cross-zone detection fires correct callback",async()=>{await r.click(e.getByTestId("singleton-zone-a-add-b")),await g(()=>i(e.getByTestId("singleton-count-b")).toHaveTextContent("2")),i(e.getByTestId("singleton-count-a")).toHaveTextContent("1"),await r.click(e.getByTestId("singleton-zone-b-add-a")),await g(()=>i(e.getByTestId("singleton-count-a")).toHaveTextContent("2")),i(e.getByTestId("singleton-count-b")).toHaveTextContent("2")}),await t("Shared ignore list: Bundle A ignore() blocks Bundle B callbacks",async()=>{const n=e.getByTestId("singleton-count-a").textContent,d=e.getByTestId("singleton-count-b").textContent;await r.click(e.getByTestId("singleton-add-ignored")),await new Promise(a=>requestAnimationFrame(()=>requestAnimationFrame(a))),i(e.getByTestId("singleton-count-a")).toHaveTextContent(n),i(e.getByTestId("singleton-count-b")).toHaveTextContent(d)}),await t("Ignore lists are merged and deduped across bundles",async()=>{const n=globalThis[Symbol.for("brightspot.onFind")],d=n.blacklist.length;b.ignore(".singleton-ignored-zone"),i(n.blacklist.length).toBe(d),b.ignore(".bundle-b-ignored"),i(n.blacklist).toContain(".singleton-ignored-zone"),i(n.blacklist).toContain(".bundle-b-ignored"),i(n.blacklist.length).toBe(d+1)}),await t("Shared pause/resume: Bundle A pause() stops Bundle B detection",async()=>{await r.click(e.getByTestId("singleton-toggle-pause")),await r.click(e.getByTestId("singleton-add-a")),await r.click(e.getByTestId("singleton-add-b")),await new Promise(n=>setTimeout(n,200)),i(e.getByTestId("singleton-count-a")).toHaveTextContent("2"),i(e.getByTestId("singleton-count-b")).toHaveTextContent("2"),await r.click(e.getByTestId("singleton-toggle-pause")),await g(()=>i(e.getByTestId("singleton-count-a")).toHaveTextContent("3"),{timeout:2e3}),await g(()=>i(e.getByTestId("singleton-count-b")).toHaveTextContent("3"),{timeout:2e3})}),await t("No index collision on data-ofc attributes",async()=>{const n=s.querySelectorAll(".singleton-item-a, .singleton-item-b"),d=new Set;n.forEach(a=>{a.getAttributeNames().filter(c=>c.startsWith("data-ofc")).forEach(c=>d.add(c))}),i(d.size).toBeGreaterThanOrEqual(2)}),await t("Singleton state: both bundles share the same globalThis object",async()=>{const n=globalThis[Symbol.for("brightspot.onFind")];i(n).toBeDefined(),i(n.callbacks).toBeDefined(),i(Array.isArray(n.callbacks)).toBe(!0),i(n.initialized).toBe(!0),i(p.pause).not.toBe(b.pause),i(p.resume).not.toBe(b.resume)})}},T={render:()=>f`
     <div class="space-y-4 text-sm">
       <div>
         <h3 class="mb-2 font-bold">Basic Usage</h3>
@@ -556,7 +556,7 @@ onFind.ignore('.ProseMirror', '.RichTextEditor')
       await waitFor(() => expect(canvas.getByTestId('ignore-found-count')).toHaveTextContent('2'));
     });
   }
-}`,...B.parameters?.docs?.source}}};I.parameters={...I.parameters,docs:{...I.parameters?.docs,source:{originalSource:`{
+}`,...B.parameters?.docs?.source}}};w.parameters={...w.parameters,docs:{...w.parameters?.docs,source:{originalSource:`{
   render: () => {
     const instanceId = 'onfind-pause-demo';
     const itemSelector = '.pause-demo-item';
@@ -659,7 +659,7 @@ onFind.ignore('.ProseMirror', '.RichTextEditor')
       });
     });
   }
-}`,...I.parameters?.docs?.source}}};w.parameters={...w.parameters,docs:{...w.parameters?.docs,source:{originalSource:`{
+}`,...w.parameters?.docs?.source}}};I.parameters={...I.parameters,docs:{...I.parameters?.docs,source:{originalSource:`{
   render: () => {
     const onFindA = onFind;
     const selectorA = '.singleton-item-a';
@@ -900,7 +900,7 @@ onFind.ignore('.ProseMirror', '.RichTextEditor')
       expect(onFind.resume).not.toBe(onFindB.resume);
     });
   }
-}`,...w.parameters?.docs?.source}}};T.parameters={...T.parameters,docs:{...T.parameters?.docs,source:{originalSource:`{
+}`,...I.parameters?.docs?.source}}};T.parameters={...T.parameters,docs:{...T.parameters?.docs,source:{originalSource:`{
   render: () => html\`
     <div class="space-y-4 text-sm">
       <div>
@@ -1042,4 +1042,4 @@ onFind.ignore('.ProseMirror', '.RichTextEditor')
       }
     }
   }
-}`,...T.parameters?.docs?.source}}};const U=["Interactive","Ignore","PauseResume","Singleton","UsageExample"];export{B as Ignore,h as Interactive,I as PauseResume,w as Singleton,T as UsageExample,U as __namedExportsOrder,R as default};
+}`,...T.parameters?.docs?.source}}};const U=["Interactive","Ignore","PauseResume","Singleton","UsageExample"];export{B as Ignore,h as Interactive,w as PauseResume,I as Singleton,T as UsageExample,U as __namedExportsOrder,R as default};

package/dist/storybook/assets/{onRemove.stories-DltMfNLX.js → onRemove.stories-Cmk4GOI5.js}

@@ -1,4 +1,4 @@
-import{x as p}from"./iframe-D43T7JCn.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`
+import{x as p}from"./iframe-D1g1spfw.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">

package/dist/storybook/assets/{onVisible.stories-x3VhGAuF.js → onVisible.stories-RZ3Q87MG.js}

@@ -1,4 +1,4 @@
-import{x as d}from"./iframe-D43T7JCn.js";import{o as g}from"./onFind-CamigPPi.js";import"./preload-helper-PPVm8Dsz.js";const b=Symbol.for("brightspot.onVisible");let t;function v(){return t||(t=globalThis[b],t||(t={calledIndex:0},globalThis[b]=t),t)}function h(i,r){const s=`_ovc${v().calledIndex++}`,n=new IntersectionObserver(e=>{for(const o of e)if(o.isIntersecting){const c=o.target,m=c.classList;m.contains(s)||(m.add(s),n.unobserve(c),r(c))}});g(i,e=>{n.observe(e)})}const f={title:"Utilities/onVisible",tags:["autodocs"],parameters:{docs:{subtitle:"The `onVisible` utility triggers a callback once when elements matching a selector become visible in the viewport. Combines `onFind` with `IntersectionObserver` for lazy initialization of dynamically added elements."},controls:{expanded:!0}},argTypes:{selector:{control:{type:"text"},description:"CSS selector to watch for visibility"}},args:{selector:".lazy-item"}},l={render:()=>{const i=`onvisible-${Math.random().toString(36).substring(2,9)}`,r=`.lazy-item-${i}`;let s=0;const n=()=>{const e=document.getElementById(`${i}-visible-count`);e&&(e.textContent=String(s))};return h(r,e=>{s++,n(),e.classList.remove("opacity-30"),e.classList.add("ring-2","ring-success-500","opacity-100"),e.textContent+=" — visible!"}),d`
+import{x as d}from"./iframe-D1g1spfw.js";import{o as g}from"./onFind-ZJa5FYZA.js";import"./preload-helper-PPVm8Dsz.js";const b=Symbol.for("brightspot.onVisible");let t;function v(){return t||(t=globalThis[b],t||(t={calledIndex:0},globalThis[b]=t),t)}function h(i,r){const s=`_ovc${v().calledIndex++}`,n=new IntersectionObserver(e=>{for(const o of e)if(o.isIntersecting){const c=o.target,m=c.classList;m.contains(s)||(m.add(s),n.unobserve(c),r(c))}});g(i,e=>{n.observe(e)})}const f={title:"Utilities/onVisible",tags:["autodocs"],parameters:{docs:{subtitle:"The `onVisible` utility triggers a callback once when elements matching a selector become visible in the viewport. Combines `onFind` with `IntersectionObserver` for lazy initialization of dynamically added elements."},controls:{expanded:!0}},argTypes:{selector:{control:{type:"text"},description:"CSS selector to watch for visibility"}},args:{selector:".lazy-item"}},l={render:()=>{const i=`onvisible-${Math.random().toString(36).substring(2,9)}`,r=`.lazy-item-${i}`;let s=0;const n=()=>{const e=document.getElementById(`${i}-visible-count`);e&&(e.textContent=String(s))};return h(r,e=>{s++,n(),e.classList.remove("opacity-30"),e.classList.add("ring-2","ring-success-500","opacity-100"),e.textContent+=" — visible!"}),d`
       <div class="space-y-4">
         <div class="text-base">
           <p class="mb-2">

package/dist/storybook/assets/{style-map-C5J-rKx9.js → style-map-DS-2jfV3.js}

@@ -1 +1 @@
-import{e as l,ae as u,af as c,ag as a}from"./iframe-D43T7JCn.js";const o="important",d=" !"+o,h=l(class extends u{constructor(s){if(super(s),s.type!==c.ATTRIBUTE||s.name!=="style"||s.strings?.length>2)throw Error("The `styleMap` directive must be used in the `style` attribute and must be the only part in the attribute.")}render(s){return Object.keys(s).reduce(((n,t)=>{const e=s[t];return e==null?n:n+`${t=t.includes("-")?t:t.replace(/(?:^(webkit|moz|ms|o)|)(?=[A-Z])/g,"-$&").toLowerCase()}:${e};`}),"")}update(s,[n]){const{style:t}=s.element;if(this.ft===void 0)return this.ft=new Set(Object.keys(n)),this.render(n);for(const e of this.ft)n[e]==null&&(this.ft.delete(e),e.includes("-")?t.removeProperty(e):t[e]=null);for(const e in n){const r=n[e];if(r!=null){this.ft.add(e);const i=typeof r=="string"&&r.endsWith(d);e.includes("-")||i?t.setProperty(e,i?r.slice(0,-11):r,i?o:""):t[e]=r}}return a}});export{h as o};
+import{e as l,ae as u,af as c,ag as a}from"./iframe-D1g1spfw.js";const o="important",d=" !"+o,h=l(class extends u{constructor(s){if(super(s),s.type!==c.ATTRIBUTE||s.name!=="style"||s.strings?.length>2)throw Error("The `styleMap` directive must be used in the `style` attribute and must be the only part in the attribute.")}render(s){return Object.keys(s).reduce(((n,t)=>{const e=s[t];return e==null?n:n+`${t=t.includes("-")?t:t.replace(/(?:^(webkit|moz|ms|o)|)(?=[A-Z])/g,"-$&").toLowerCase()}:${e};`}),"")}update(s,[n]){const{style:t}=s.element;if(this.ft===void 0)return this.ft=new Set(Object.keys(n)),this.render(n);for(const e of this.ft)n[e]==null&&(this.ft.delete(e),e.includes("-")?t.removeProperty(e):t[e]=null);for(const e in n){const r=n[e];if(r!=null){this.ft.add(e);const i=typeof r=="string"&&r.endsWith(d);e.includes("-")||i?t.setProperty(e,i?r.slice(0,-11):r,i?o:""):t[e]=r}}return a}});export{h as o};