import{x as d}from"./iframe-CMPv_g6-.js";import{o as g}from"./onFind-B81tRmr7.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">
            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="${i}-visible-count" class="text-2xl font-bold text-primary-600">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,o)=>d`<div class="${`lazy-item-${i}`} rounded border bg-white p-4 opacity-30 transition-all">
                  Item ${o+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."}}}},a={render:()=>d`
    <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/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={...l.parameters,docs:{...l.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-2xl font-bold text-primary-600">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.\`
      }
    }
  }
}`,...l.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 { onVisible } from '@brightspot/ui/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.\`
      }
    }
  }
}`,...a.parameters?.docs?.source}}};const x=["Interactive","UsageExample"];export{l as Interactive,a as UsageExample,x as __namedExportsOrder,f as default};
