import{S as U}from"./blocks-B3SR9dnr.js";import{e as X,f as _,E as B,r as j,x as A}from"./iframe-CMPv_g6-.js";import"./preload-helper-PPVm8Dsz.js";const C=()=>new J;class J{}const w=new WeakMap,k=X(class extends _{render(e){return B}update(e,[o]){const t=o!==this.G;return t&&this.G!==void 0&&this.rt(void 0),(t||this.lt!==this.ct)&&(this.G=o,this.ht=e.options?.host,this.rt(this.ct=e.element)),B}rt(e){if(this.isConnected||(e=void 0),typeof this.G=="function"){const o=this.ht??globalThis;let t=w.get(o);t===void 0&&(t=new WeakMap,w.set(o,t)),t.get(this.G)!==void 0&&this.G.call(this.ht,void 0),t.set(this.G,e),e!==void 0&&this.G.call(this.ht,e)}else this.G.value=e}get lt(){return typeof this.G=="function"?w.get(this.ht??globalThis)?.get(this.G):this.G?.value}disconnected(){this.lt===this.ct&&this.rt(void 0)}reconnected(){this.rt(this.ct)}}),ee={title:"Welcome",tags:["autodocs","!dev"],parameters:{layout:"fullscreen",controls:{disable:!0},actions:{disable:!0},options:{showPanel:!1},docs:{page:()=>j.createElement("div",{className:"welcome-docs"},j.createElement(U))}}},$=[[13,52,158],[19,183,158],[99,43,176],[95,233,208],[240,67,62],[83,36,148]],d=(e,o)=>e+Math.random()*(o-e),M=e=>e[Math.floor(Math.random()*e.length)];function I(e,o){if(matchMedia("(prefers-reduced-motion: reduce)").matches)return;const t=e.getContext("2d"),l=Array.from({length:3},()=>({x:0,y:0,rgb:M($),opacity:0,radius:d(250,350)}));let h=null;function O(){const s=5*devicePixelRatio,n=Object.assign(document.createElement("canvas"),{width:s,height:s}),r=n.getContext("2d");r.fillStyle="#000",r.arc(s/2,s/2,1.6*devicePixelRatio,0,Math.PI*2),r.fill(),h=t.createPattern(n,"repeat")}function R(){const{width:s,height:n}=e.getBoundingClientRect();e.width=s*devicePixelRatio,e.height=n*devicePixelRatio,t.setTransform(devicePixelRatio,0,0,devicePixelRatio,0,0),O()}R(),addEventListener("resize",R);const a=o?l[0]:null;a&&(a.rgb=M($),a.radius=300),(function s(){if(!e.isConnected)return;const n=e.width/devicePixelRatio,r=e.height/devicePixelRatio;t.clearRect(0,0,n,r),a&&o&&(o.active?(a.x+=(o.tx-a.x)*.06,a.y+=(o.ty-a.y)*.06,a.opacity+=(.35-a.opacity)*.08):a.opacity+=(0-a.opacity)*.04);for(const i of l){if(i.opacity<=0)continue;const[u,p,b]=i.rgb,c=t.createRadialGradient(i.x,i.y,0,i.x,i.y,i.radius);c.addColorStop(0,`rgba(${u},${p},${b},${i.opacity})`),c.addColorStop(1,`rgba(${u},${p},${b},0)`),t.fillStyle=c,t.fillRect(i.x-i.radius,i.y-i.radius,i.radius*2,i.radius*2)}h&&(t.globalCompositeOperation="destination-in",t.fillStyle=h,t.fillRect(0,0,n,r),t.globalCompositeOperation="source-over"),requestAnimationFrame(s)})();function S(s){if(!e.isConnected)return;const{width:n,height:r}=e.getBoundingClientRect(),i=300,u=m=>m<2?{x:d(.15*n,.85*n),y:m===0?-i:r+i}:{x:m===2?-i:n+i,y:d(.15*r,.85*r)},p=Math.floor(Math.random()*4),b=(p+(Math.random()<.5?2:[1,3][Math.floor(Math.random()*2)]))%4,c=u(p),z=u(b),y=z.x-c.x,x=z.y-c.y,E=Math.hypot(y,x)||1,Y=Math.min(n,r)*d(.15,.35),D=d(1.2,2.2);s.rgb=M($),s.radius=d(250,350);let P=null;const F=d(6e3,7500);(function m(G){if(!e.isConnected)return;P??=G;const f=Math.min((G-P)/F,1),L=.5-.5*Math.cos(f*Math.PI),T=Math.sin(f*D*Math.PI)*Y;s.x=c.x+y*L+-x/E*T,s.y=c.y+x*L+y/E*T,s.opacity=.35*Math.min(f/.2,1)*Math.min((1-f)/.2,1),f<1?requestAnimationFrame(m):s.opacity=0})(performance.now())}(o?l.slice(1):l).forEach((s,n)=>setTimeout(()=>{S(s),setInterval(()=>e.isConnected&&S(s),7500)},1e3+n*2500))}const q="position:absolute;inset:0;width:100%;height:100%;pointer-events:none;",N=C(),W=C(),H=C(),v={active:!1,tx:0,ty:0},g={render:()=>(queueMicrotask(()=>{const e=N.value;e&&!e.dataset.init&&(e.dataset.init="1",I(e));const o=W.value;o&&!o.dataset.init&&(o.dataset.init="1",I(o,v));const t=H.value;t&&!t.dataset.init&&(t.dataset.init="1",t.addEventListener("mousemove",l=>{const h=t.getBoundingClientRect();v.tx=l.clientX-h.left,v.ty=l.clientY-h.top,v.active=!0}),t.addEventListener("mouseleave",()=>{v.active=!1}))}),A`
      <div
        ${k(H)}
        style="
          position: relative;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: flex-end;
          min-height: 100vh;
          padding: 40px 24px;
          font-family: 'Noto Sans', 'Helvetica Neue', Arial, sans-serif;
          overflow: hidden;
          background-color: var(--btu-theme-white);
        "
      >
        <canvas ${k(N)} aria-hidden="true" style="${q}z-index:0;"></canvas>

        <img
          src="/WelcomeBG.svg"
          aria-hidden="true"
          style="
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
            pointer-events: none;
            user-select: none;
            z-index: 1;
          "
        />

        <canvas ${k(W)} aria-hidden="true" style="${q}z-index:2;"></canvas>

        <div style="position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center;">
          <div
            style="
              display: flex;
              flex-wrap: wrap;
              gap: 16px;
              width: 100%;
              height: 100%;
            "
          >
            ${[{label:"Components",path:"?path=/docs/components-avatar--docs"},{label:"CSS Plugins",path:"?path=/docs/css-plugins-button--docs"},{label:"Design System",path:"?path=/docs/design-system-colors--docs"},{label:"Utilities",path:"?path=/docs/utilities-debounce--docs"}].map(e=>A`
                <div
                  style="
                    padding: 20px 24px;
                    border: 1px solid oklch(var(--btu-theme-gray-200));
                    border-radius: 10px;
                    background: color-mix(in oklch, var(--btu-theme-white) 85%, transparent);
                    backdrop-filter: blur(8px);
                    cursor: pointer;
                    transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
                  "
                  @mouseenter=${o=>{const t=o.currentTarget;t.style.borderColor="oklch(var(--btu-theme-primary-700))",t.style.transform="translateY(-2px)",t.classList.add("shadow-md")}}
                  @mouseleave=${o=>{const t=o.currentTarget;t.style.borderColor="oklch(var(--btu-theme-gray-200))",t.style.transform="none",t.classList.remove("shadow-md")}}
                  @click=${()=>{window.top.location.search=e.path}}
                >
                  <div
                    style="
                      font-size: 0.9375rem;
                      font-weight: 600;
                      color: oklch(var(--btu-theme-gray-900));
                      margin-bottom: 4px;
                    "
                  >
                    ${e.label}
                  </div>
                  <div style="font-size: 0.8125rem; color: oklch(var(--btu-theme-gray-500));">
                    Browse ${e.label.toLowerCase()}
                  </div>
                </div>
              `)}
          </div>
        </div>
      </div>
    `)};g.parameters={...g.parameters,docs:{...g.parameters?.docs,source:{originalSource:`{
  render: () => {
    queueMicrotask(() => {
      // Init back canvas (auto-swoop only)
      const back = backRef.value;
      if (back && !back.dataset.init) {
        back.dataset.init = '1';
        initSwoop(back);
      }
      // Init front canvas (mouse-follow on blob[0] + auto-swoop on rest)
      const front = frontRef.value;
      if (front && !front.dataset.init) {
        front.dataset.init = '1';
        initSwoop(front, mouse);
      }
      // Mouse events on container (covers full area including over cards)
      const ctr = containerRef.value;
      if (ctr && !ctr.dataset.init) {
        ctr.dataset.init = '1';
        ctr.addEventListener('mousemove', (e: MouseEvent) => {
          const rect = ctr.getBoundingClientRect();
          mouse.tx = e.clientX - rect.left;
          mouse.ty = e.clientY - rect.top;
          mouse.active = true;
        });
        ctr.addEventListener('mouseleave', () => {
          mouse.active = false;
        });
      }
    });
    return html\`
      <div
        \${ref(containerRef)}
        style="
          position: relative;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: flex-end;
          min-height: 100vh;
          padding: 40px 24px;
          font-family: 'Noto Sans', 'Helvetica Neue', Arial, sans-serif;
          overflow: hidden;
          background-color: var(--btu-theme-white);
        "
      >
        <canvas \${ref(backRef)} aria-hidden="true" style="\${canvasStyle}z-index:0;"></canvas>

        <img
          src="/WelcomeBG.svg"
          aria-hidden="true"
          style="
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
            pointer-events: none;
            user-select: none;
            z-index: 1;
          "
        />

        <canvas \${ref(frontRef)} aria-hidden="true" style="\${canvasStyle}z-index:2;"></canvas>

        <div style="position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center;">
          <div
            style="
              display: flex;
              flex-wrap: wrap;
              gap: 16px;
              width: 100%;
              height: 100%;
            "
          >
            \${([{
      label: 'Components',
      path: '?path=/docs/components-avatar--docs'
    }, {
      label: 'CSS Plugins',
      path: '?path=/docs/css-plugins-button--docs'
    }, {
      label: 'Design System',
      path: '?path=/docs/design-system-colors--docs'
    }, {
      label: 'Utilities',
      path: '?path=/docs/utilities-debounce--docs'
    }] as const).map(section => html\`
                <div
                  style="
                    padding: 20px 24px;
                    border: 1px solid oklch(var(--btu-theme-gray-200));
                    border-radius: 10px;
                    background: color-mix(in oklch, var(--btu-theme-white) 85%, transparent);
                    backdrop-filter: blur(8px);
                    cursor: pointer;
                    transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
                  "
                  @mouseenter=\${(e: Event) => {
      const el = e.currentTarget as HTMLElement;
      el.style.borderColor = 'oklch(var(--btu-theme-primary-700))';
      el.style.transform = 'translateY(-2px)';
      el.classList.add('shadow-md');
    }}
                  @mouseleave=\${(e: Event) => {
      const el = e.currentTarget as HTMLElement;
      el.style.borderColor = 'oklch(var(--btu-theme-gray-200))';
      el.style.transform = 'none';
      el.classList.remove('shadow-md');
    }}
                  @click=\${() => {
      window.top!.location.search = section.path;
    }}
                >
                  <div
                    style="
                      font-size: 0.9375rem;
                      font-weight: 600;
                      color: oklch(var(--btu-theme-gray-900));
                      margin-bottom: 4px;
                    "
                  >
                    \${section.label}
                  </div>
                  <div style="font-size: 0.8125rem; color: oklch(var(--btu-theme-gray-500));">
                    Browse \${section.label.toLowerCase()}
                  </div>
                </div>
              \`)}
          </div>
        </div>
      </div>
    \`;
  }
}`,...g.parameters?.docs?.source}}};const te=["Page"];export{g as Page,te as __namedExportsOrder,ee as default};
