@brightspot/ui 1.3.0 → 1.4.0

package/dist/storybook/assets/{index-mcT8sPvs.js → index-yMswRDPh.js}

@@ -1 +1 @@
-import{R as o}from"./WithTooltip-SK46ZJ2J-QQZnlVfm.js";import"./preload-helper-PPVm8Dsz.js";import"./iframe-D-tG1MVV.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};
+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-Dagoyfc5.js → onFind.stories-DfW54CDE.js}

@@ -1,4 +1,4 @@
-import{x as q}from"./iframe-D-tG1MVV.js";import{g as K}from"./_commonjsHelpers-CqkleIqs.js";import"./preload-helper-PPVm8Dsz.js";var E={exports:{}},X=E.exports,U;function Y(){return U||(U=1,(function(i){(function(n,e){i.exports?i.exports=e():n.log=e()})(X,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"],r={},c=null;function k(s,d){var t=s[d];if(typeof t.bind=="function")return t.bind(s);try{return Function.prototype.bind.call(t,s)}catch{return function(){return Function.prototype.apply.apply(t,[s,arguments])}}}function g(){console.log&&(console.log.apply?console.log.apply(console,arguments):Function.prototype.apply.apply(console.log,[console,arguments])),console.trace&&console.trace()}function f(s){return s==="debug"&&(s="log"),typeof console===e?!1:s==="trace"&&o?g:console[s]!==void 0?k(console,s):console.log!==void 0?k(console,"log"):n}function v(){for(var s=this.getLevel(),d=0;d<a.length;d++){var t=a[d];this[t]=d<s?n:this.methodFactory(t,s,this.name)}if(this.log=this.debug,typeof console===e&&s<this.levels.SILENT)return"No console available for logging"}function z(s){return function(){typeof console!==e&&(v.call(this),this[s].apply(this,arguments))}}function _(s,d,t){return f(s)||z.apply(this,arguments)}function O(s,d){var t=this,x,S,p,m="loglevel";typeof s=="string"?m+=":"+s:typeof s=="symbol"&&(m=void 0);function G(l){var u=(a[l]||"silent").toUpperCase();if(!(typeof window===e||!m)){try{window.localStorage[m]=u;return}catch{}try{window.document.cookie=encodeURIComponent(m)+"="+u+";"}catch{}}}function P(){var l;if(!(typeof window===e||!m)){try{l=window.localStorage[m]}catch{}if(typeof l===e)try{var u=window.document.cookie,w=encodeURIComponent(m),D=u.indexOf(w+"=");D!==-1&&(l=/^([^;]+)/.exec(u.slice(D+w.length+1))[1])}catch{}return t.levels[l]===void 0&&(l=void 0),l}}function V(){if(!(typeof window===e||!m)){try{window.localStorage.removeItem(m)}catch{}try{window.document.cookie=encodeURIComponent(m)+"=; expires=Thu, 01 Jan 1970 00:00:00 UTC"}catch{}}}function y(l){var u=l;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: "+l)}t.name=s,t.levels={TRACE:0,DEBUG:1,INFO:2,WARN:3,ERROR:4,SILENT:5},t.methodFactory=d||_,t.getLevel=function(){return p??S??x},t.setLevel=function(l,u){return p=y(l),u!==!1&&G(p),v.call(t)},t.setDefaultLevel=function(l){S=y(l),P()||t.setLevel(l,!1)},t.resetLevel=function(){p=null,V(),v.call(t)},t.enableAll=function(l){t.setLevel(t.levels.TRACE,l)},t.disableAll=function(l){t.setLevel(t.levels.SILENT,l)},t.rebuild=function(){if(c!==t&&(x=y(c.getLevel())),v.call(t),c===t)for(var l in r)r[l].rebuild()},x=y(c?c.getLevel():"WARN");var R=P();R!=null&&(p=y(R)),v.call(t)}c=new O,c.getLogger=function(d){if(typeof d!="symbol"&&typeof d!="string"||d==="")throw new TypeError("You must supply a name when creating a logger.");var t=r[d];return t||(t=r[d]=new O(d,c.methodFactory)),t};var j=typeof window!==e?window.log:void 0;return c.noConflict=function(){return typeof window!==e&&window.log===c&&(window.log=j),c},c.getLoggers=function(){return r},c.default=c,c})})(E)),E.exports}var Q=Y();const Z=K(Q);let ee=0;class te{#n;#e;#t;#i;#o;constructor(n,e,o){this.#n=n,this.#e=`data-ofc${ee++}`,Array.isArray(e)||(e=[e]),this.#t=e.map(e.some(r=>r.indexOf(",")>-1)?r=>r:r=>`${r}:not([${this.#e}])`).join(","),this.#i=o;const a=e.map(r=>r.trim()).filter(r=>r.indexOf(" ")<0&&r.indexOf(",")<0);a.length===e.length&&(this.#o=a)}addTriggerElements(n,e){if(this.#n.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.#r(e);else for(const e of this.#n.querySelectorAll(this.#t))this.#r(e)}#r(n){if(!H(n)&&!n.hasAttribute(this.#e)){n.setAttribute(this.#e,"");try{this.#i(n)}catch(e){Z.error("Failed callback!",n,e)}}}}let $=!1,A=!1,h=!1,b=[],M;const T=[];function H(i){return i instanceof Element?i.closest(".CIG-wordCount")!==null||i.closest(".ContentEdit-previewDisplay")!==null||i.closest(".ContentLabel")!==null||i.closest(".PreviewFrame-typeDisplay")!==null||i.closest(".ProseMirrorToolbar")!==null||i.closest(".ProseMirror")!==null||i.closest(".ProseMirrorContainer")!==null||i.closest(".ProseMirror-fullscreen-container")!==null||i.closest(".ProseMirror-comments")!==null||i.closest(".RichTextEditor")!==null||i.closest(".WorkInProgressSaveStatus")!==null||i.closest("#aria-live-container")!==null||i.closest(".widget-urlsAutomatic")!==null:!1}const N=Array.prototype.every,B=i=>i.nodeType===Node.TEXT_NODE;function L(i){if($){A=!0;return}const n=Array.isArray(i),e=[];if(n){for(const o of i){const a=o.target;if(!H(a))switch(o.type){case"attributes":o.oldValue!==a.getAttribute(o.attributeName)&&e.push(o);break;case"childList":(!N.call(o.addedNodes,B)||!N.call(o.removedNodes,B))&&e.push(o);break}}if(e.length===0)return}if(e.length>500&&(h=!0),!h)if(n)for(const o of e){const a=o.target;switch(o.type){case"attributes":b.push(a);break;case"childList":for(const r of T)r.addTriggerElements(b,a);break}}else h=!0;(h||b.length>0)&&!M&&(M=window.requestAnimationFrame(()=>{const o=h?void 0:b;h=!1,b=[],M=0,T.forEach(a=>a.trigger(o))}))}function W(){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",W):W();function F(i,n,e){let o,a;typeof e<"u"?(o=i,a=n):(o=document,a=i,e=n);const r=new te(o,a,e);r.trigger(),T.push(r)}F.triggerCallbacks=L;F.pause=()=>{$=!0};F.resume=()=>{$=!1,A&&(A=!1,setTimeout(L,100))};const re={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:i=>{const n=`onfind-${Math.random().toString(36).substring(2,9)}`,e=`.dynamic-item-${n}`;let o=0,a=0;const r=()=>{const g=document.getElementById(`${n}-items-count`),f=document.getElementById(`${n}-found-count`);g&&(g.textContent=String(o)),f&&(f.textContent=String(a))};return F(e,g=>{a++,r(),g.classList.add("ring-2","ring-success-500")}),q`
+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">
@@ -8,28 +8,28 @@ import{x as q}from"./iframe-D-tG1MVV.js";import{g as K}from"./_commonjsHelpers-C
         </div>
 
         <div class="flex gap-2">
-          <button @click=${()=>{o++;const g=document.getElementById(`${n}-container`);if(g){const f=document.createElement("div");f.className=`dynamic-item-${n} rounded border bg-white p-4`,f.textContent=`Item ${o}`,g.appendChild(f)}r()}} class="bg-primary-500 hover:bg-primary-600 rounded px-4 py-2 text-white">
+          <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 g=document.getElementById(`${n}-container`);g&&(g.innerHTML=""),r()}} class="rounded bg-gray-200 px-4 py-2 hover:bg-gray-300">Clear All</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="${n}-container" class="min-h-32 space-y-2 rounded border-2 border-gray-300 bg-gray-50 p-4">
+        <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="${n}-items-count" class="text-2xl font-bold text-gray-900">0</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="${n}-found-count" class="text-primary-600 text-2xl font-bold">0</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."}}}},C={render:()=>q`
+    `},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>
@@ -111,7 +111,7 @@ onFind.resume()</code></pre>
         </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:`{
+  `,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}\`;
@@ -190,7 +190,7 @@ onFind.resume()</code></pre>
       }
     }
   }
-}`,...I.parameters?.docs?.source}}};C.parameters={...C.parameters,docs:{...C.parameters?.docs,source:{originalSource:`{
+}`,...i.parameters?.docs?.source}}};s.parameters={...s.parameters,docs:{...s.parameters?.docs,source:{originalSource:`{
   render: () => html\`
     <div class="space-y-4 text-sm">
       <div>
@@ -281,4 +281,4 @@ onFind.resume()</code></pre>
       }
     }
   }
-}`,...C.parameters?.docs?.source}}};const se=["Interactive","UsageExample"];export{I as Interactive,C as UsageExample,se as __namedExportsOrder,re as default};
+}`,...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};

package/dist/storybook/assets/onVisible.stories-CIl6R0q4.js

@@ -0,0 +1,187 @@
+import{x as c}from"./iframe-lTczLWsL.js";import{o as m}from"./onFind-C6olvKHR.js";import"./preload-helper-PPVm8Dsz.js";import"./_commonjsHelpers-CqkleIqs.js";let b=0;function v(t,a){const i=`_ovc${b++}`,s=new IntersectionObserver(e=>{for(const n of e)if(n.isIntersecting){const r=n.target,d=r.classList;d.contains(i)||(d.add(i),s.unobserve(r),a(r))}});m(t,e=>{s.observe(e)})}const u={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"}},o={render:()=>{const t=`onvisible-${Math.random().toString(36).substring(2,9)}`,a=`.lazy-item-${t}`;let i=0;const s=()=>{const e=document.getElementById(`${t}-visible-count`);e&&(e.textContent=String(i))};return v(a,e=>{i++,s(),e.classList.remove("opacity-30"),e.classList.add("ring-2","ring-success-500","opacity-100"),e.textContent+=" — visible!"}),c`
+      <div class="space-y-4">
+        <div class="text-base">
+          <p class="mb-2">
+            Scroll down inside the box below. Items start faded and are highlighted when they enter the viewport. Each
+            callback fires only once per element.
+          </p>
+        </div>
+
+        <div class="flex justify-around">
+          <div>
+            <div class="text-xs text-gray-500">Items detected as visible</div>
+            <div id="${t}-visible-count" class="text-primary-600 text-2xl font-bold">0</div>
+          </div>
+        </div>
+
+        <div class="h-64 overflow-y-scroll rounded border-2 border-gray-300 bg-gray-50 p-4">
+          <div class="space-y-4">
+            ${Array.from({length:30},(e,n)=>c`<div class="${`lazy-item-${t}`} rounded border bg-white p-4 opacity-30 transition-all">
+                  Item ${n+1}
+                </div>`)}
+          </div>
+        </div>
+      </div>
+    `},parameters:{docs:{description:{story:"Interactive example showing onVisible detecting elements as they scroll into view. Elements are highlighted once when they become visible."}}}},l={render:()=>c`
+    <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 { onVisible } from '@brightspot/ui/dist/util/onVisible.js'
+
+// Lazy-load images when they scroll into view
+onVisible('.lazy-image', (element) => {
+  element.src = element.dataset.src
+})
+
+// Initialize heavy components only when visible
+onVisible('.chart-container', (element) => {
+  initChart(element)
+})</code></pre>
+      </div>
+
+      <div>
+        <h3 class="mb-2 font-bold">How It Works</h3>
+        <p class="text-gray-700">
+          onVisible combines two utilities: <code class="rounded bg-gray-200 px-1">onFind</code> detects when matching
+          elements are added to the DOM, then <code class="rounded bg-gray-200 px-1">IntersectionObserver</code> watches
+          for when those elements enter the viewport. The callback fires at most once per element.
+        </p>
+      </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>Lazy-loading images or iframes</li>
+          <li>Deferring expensive component initialization</li>
+          <li>Triggering animations on scroll</li>
+          <li>Analytics tracking for element impressions</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">selectors</code> (string | string[]): CSS selector(s) to watch for
+          </li>
+          <li>
+            <code class="rounded bg-gray-200 px-1">callback</code> (function): Called once per element when it becomes
+            visible
+          </li>
+        </ul>
+      </div>
+    </div>
+  `,parameters:{docs:{description:{story:"Code examples and documentation for using the onVisible utility."}}}};o.parameters={...o.parameters,docs:{...o.parameters?.docs,source:{originalSource:`{
+  render: () => {
+    const instanceId = \`onvisible-\${Math.random().toString(36).substring(2, 9)}\`;
+    const uniqueSelector = \`.lazy-item-\${instanceId}\`;
+    let visibleCount = 0;
+    const updateCount = () => {
+      const el = document.getElementById(\`\${instanceId}-visible-count\`);
+      if (el) el.textContent = String(visibleCount);
+    };
+    onVisible(uniqueSelector, (element: HTMLElement) => {
+      visibleCount++;
+      updateCount();
+      element.classList.remove('opacity-30');
+      element.classList.add('ring-2', 'ring-success-500', 'opacity-100');
+      element.textContent += ' — visible!';
+    });
+    return html\`
+      <div class="space-y-4">
+        <div class="text-base">
+          <p class="mb-2">
+            Scroll down inside the box below. Items start faded and are highlighted when they enter the viewport. Each
+            callback fires only once per element.
+          </p>
+        </div>
+
+        <div class="flex justify-around">
+          <div>
+            <div class="text-xs text-gray-500">Items detected as visible</div>
+            <div id="\${instanceId}-visible-count" class="text-primary-600 text-2xl font-bold">0</div>
+          </div>
+        </div>
+
+        <div class="h-64 overflow-y-scroll rounded border-2 border-gray-300 bg-gray-50 p-4">
+          <div class="space-y-4">
+            \${Array.from({
+      length: 30
+    }, (_, i) => html\`<div class="\${\`lazy-item-\${instanceId}\`} rounded border bg-white p-4 opacity-30 transition-all">
+                  Item \${i + 1}
+                </div>\`)}
+          </div>
+        </div>
+      </div>
+    \`;
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: \`Interactive example showing onVisible detecting elements as they scroll into view. Elements are highlighted once when they become visible.\`
+      }
+    }
+  }
+}`,...o.parameters?.docs?.source}}};l.parameters={...l.parameters,docs:{...l.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 { onVisible } from '@brightspot/ui/dist/util/onVisible.js'
+
+// Lazy-load images when they scroll into view
+onVisible('.lazy-image', (element) => {
+  element.src = element.dataset.src
+})
+
+// Initialize heavy components only when visible
+onVisible('.chart-container', (element) => {
+  initChart(element)
+})</code></pre>
+      </div>
+
+      <div>
+        <h3 class="mb-2 font-bold">How It Works</h3>
+        <p class="text-gray-700">
+          onVisible combines two utilities: <code class="rounded bg-gray-200 px-1">onFind</code> detects when matching
+          elements are added to the DOM, then <code class="rounded bg-gray-200 px-1">IntersectionObserver</code> watches
+          for when those elements enter the viewport. The callback fires at most once per element.
+        </p>
+      </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>Lazy-loading images or iframes</li>
+          <li>Deferring expensive component initialization</li>
+          <li>Triggering animations on scroll</li>
+          <li>Analytics tracking for element impressions</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">selectors</code> (string | string[]): CSS selector(s) to watch for
+          </li>
+          <li>
+            <code class="rounded bg-gray-200 px-1">callback</code> (function): Called once per element when it becomes
+            visible
+          </li>
+        </ul>
+      </div>
+    </div>
+  \`,
+  parameters: {
+    docs: {
+      description: {
+        story: \`Code examples and documentation for using the onVisible utility.\`
+      }
+    }
+  }
+}`,...l.parameters?.docs?.source}}};const f=["Interactive","UsageExample"];export{o as Interactive,l as UsageExample,f as __namedExportsOrder,u as default};