import{x as i}from"./iframe-CMPv_g6-.js";import{b as d}from"./celebrate-KwPoF1K3.js";import{b as l}from"./ripple-DQbyyRUw.js";import{B as r}from"./Button-DskBi-a0.js";import"./preload-helper-PPVm8Dsz.js";import"./position-CFNQy3J6.js";const v={title:"Effects/Combined Effects",tags:["autodocs"],parameters:{docs:{subtitle:"Ripple + Sparkle via Houdini Paint API inside the View Transition",description:{component:"Triggers `btuRipple` with the `sparkle` option. When the CSS Paint API is available (Chrome/Edge), sparkle particles render directly on the View Transition pseudo-element via a paint worklet — synchronized with the ripple ring. Falls back to DOM-based `btuCelebrate` in other browsers."}},controls:{expanded:!0}},argTypes:{rippleDuration:{control:{type:"range",min:500,max:5e3,step:100},description:"Ripple animation duration (ms)"},ringWidth:{control:{type:"range",min:10,max:100,step:5},description:"Width of the hue-shifted band (px)"},feather:{control:{type:"range",min:10,max:120,step:5},description:"Feathered edge transition width (px)"},hueShift:{control:{type:"range",min:0,max:330,step:30},description:"OKLCH hue rotation (degrees)"},contrast:{control:{type:"range",min:.5,max:3,step:.1},description:"Contrast multiplier"},saturate:{control:{type:"range",min:0,max:5,step:.5},description:"Saturation multiplier"},sparkle:{control:"boolean",description:"Enable sparkle particles via CSS Paint API (Chrome/Edge). Falls back to DOM celebrate when off."},sparkleDuration:{control:{type:"range",min:500,max:5e3,step:100},description:"Sparkle animation duration (ms) — independent from ripple duration"},sparkleSize:{control:{type:"range",min:100,max:600,step:50},description:"Sparkle burst area size (px)"}},args:{rippleDuration:1200,ringWidth:40,feather:75,hueShift:0,contrast:1.8,saturate:1.5,sparkle:!0,sparkleDuration:2e3,sparkleSize:300}},s={args:{rippleDuration:1e3,ringWidth:35,hueShift:0,sparkleDuration:1300,sparkleSize:300,contrast:1.5,saturate:2.5,feather:115},render:e=>i`
      <div @click=${async a=>{const{ready:t}=l({position:a,duration:e.rippleDuration,ringWidth:e.ringWidth,feather:e.feather,hueShift:e.hueShift,contrast:e.contrast,saturate:e.saturate,sparkle:e.sparkle?{size:e.sparkleSize,duration:e.sparkleDuration}:!1});e.sparkle||(await t,d({position:a,size:e.sparkleSize}))}} class="flex" style="min-height: 100vh;">
        <!-- Left Nav Rail -->
        <div class="flex w-16 flex-shrink-0 flex-col items-center gap-4 border-r border-gray-200 bg-white py-4">
          <div class="h-8 w-8 rounded-lg bg-primary-500"></div>
          <div class="mt-2 h-5 w-5 rounded bg-gray-300"></div>
          <div class="h-5 w-5 rounded bg-gray-300"></div>
          <div class="h-5 w-5 rounded bg-gray-300"></div>
          <div class="h-5 w-5 rounded bg-gray-300"></div>
          <div class="h-5 w-5 rounded bg-gray-200"></div>
          <div class="h-5 w-5 rounded bg-gray-200"></div>
        </div>

        <!-- Main Content -->
        <div class="flex min-w-0 flex-1 flex-col bg-gray-50">
          <!-- Header -->
          <div class="flex h-14 items-center justify-between border-b border-gray-200 bg-white px-6">
            <div class="flex items-center gap-3">
              <span class="text-sm font-semibold text-gray-900">Lorem Ipsum</span>
              <div class="h-5 w-5 rounded bg-gray-200"></div>
              <span class="rounded bg-primary-100 px-2 py-0.5 text-xs font-medium text-primary-700">EN</span>
            </div>
            <div class="flex items-center gap-3">
              <div class="h-8 w-64 rounded-md bg-gray-100"></div>
              ${r({color:"primary",fill:!0,contained:!0,size:"sm",label:"",icon:"plus"})}
            </div>
          </div>

          <!-- Tabs -->
          <div class="flex gap-6 border-b border-gray-200 bg-white px-6">
            <span class="border-b-2 border-primary-500 py-3 text-sm font-medium text-primary-600">Dolor</span>
            <span class="py-3 text-sm text-gray-500">Amet</span>
            <span class="py-3 text-sm text-gray-500">Consectetur</span>
            <span class="py-3 text-sm text-gray-500">Adipiscing</span>
            <span class="py-3 text-sm text-gray-500">Elit</span>
          </div>

          <!-- Page Content -->
          <div class="flex flex-col gap-6 p-6">
            <!-- Warning -->
            <p class="rounded-md border border-warning-200 bg-warning-50 px-3 py-2 text-xs text-warning-700">
              ⚠ Click anywhere — the hue ripple sweeps outward while sparkles burst from the click point. The UI is
              non-interactive during the view transition.
            </p>

            <!-- Quick Start -->
            <div class="flex gap-3">
              <div class="flex w-44 flex-col gap-2 rounded-lg border border-gray-200 bg-white p-4">
                <div class="h-8 w-8 rounded-md bg-primary-100"></div>
                <span class="text-sm font-medium text-gray-700">Sed Do</span>
                <div class="h-1 w-full rounded bg-primary-500"></div>
              </div>
              <div class="flex w-44 flex-col gap-2 rounded-lg border border-gray-200 bg-white p-4">
                <div class="h-8 w-8 rounded-md bg-primary-100"></div>
                <span class="text-sm font-medium text-gray-700">Eiusmod</span>
              </div>
              <div class="flex w-44 flex-col gap-2 rounded-lg border border-gray-200 bg-white p-4">
                <div class="h-8 w-8 rounded-md bg-primary-100"></div>
                <span class="text-sm font-medium text-gray-700">Tempor</span>
              </div>
            </div>

            <!-- Two-Column Widgets -->
            <div class="grid grid-cols-2 gap-6">
              <!-- Recent Activity -->
              <div class="rounded-lg border border-gray-200 bg-white">
                <div class="flex items-center justify-between border-b border-gray-100 px-5 py-3">
                  <span class="text-sm font-semibold text-gray-900">Incididunt</span>
                  <div class="h-5 w-5 rounded bg-gray-200"></div>
                </div>
                <div class="flex flex-col">
                  <div class="flex items-center gap-3 border-b border-gray-50 px-5 py-3">
                    <div class="h-8 w-8 rounded bg-gray-100"></div>
                    <div class="flex flex-1 flex-col gap-1">
                      <div class="h-3 w-3/4 rounded bg-gray-200"></div>
                      <div class="h-2 w-1/3 rounded bg-gray-100"></div>
                    </div>
                    <span class="rounded-full bg-success-100 px-2 py-0.5 text-xs text-success-700">Ipsum</span>
                  </div>
                  <div class="flex items-center gap-3 border-b border-gray-50 px-5 py-3">
                    <div class="h-8 w-8 rounded bg-gray-100"></div>
                    <div class="flex flex-1 flex-col gap-1">
                      <div class="h-3 w-2/3 rounded bg-gray-200"></div>
                      <div class="h-2 w-1/4 rounded bg-gray-100"></div>
                    </div>
                    <span class="rounded-full bg-warning-100 px-2 py-0.5 text-xs text-warning-700">Dolor</span>
                  </div>
                  <div class="flex items-center gap-3 border-b border-gray-50 px-5 py-3">
                    <div class="h-8 w-8 rounded bg-gray-100"></div>
                    <div class="flex flex-1 flex-col gap-1">
                      <div class="h-3 w-1/2 rounded bg-gray-200"></div>
                      <div class="h-2 w-1/3 rounded bg-gray-100"></div>
                    </div>
                    <span class="rounded-full bg-error-100 px-2 py-0.5 text-xs text-error-700">Amet</span>
                  </div>
                  <div class="flex items-center gap-3 px-5 py-3">
                    <div class="h-8 w-8 rounded bg-gray-100"></div>
                    <div class="flex flex-1 flex-col gap-1">
                      <div class="h-3 w-3/5 rounded bg-gray-200"></div>
                      <div class="h-2 w-1/4 rounded bg-gray-100"></div>
                    </div>
                    <span class="rounded-full bg-success-100 px-2 py-0.5 text-xs text-success-700">Ipsum</span>
                  </div>
                </div>
              </div>

              <!-- Workstreams -->
              <div class="rounded-lg border border-gray-200 bg-white">
                <div class="flex items-center justify-between border-b border-gray-100 px-5 py-3">
                  <span class="text-sm font-semibold text-gray-900">Labore</span>
                  <div class="h-5 w-5 rounded bg-gray-200"></div>
                </div>
                <div class="flex flex-col gap-4 p-5">
                  <div class="rounded-lg border border-gray-100 p-4">
                    <div class="flex items-center gap-2">
                      <span class="text-xs text-gray-500">Magna Aliqua</span>
                      <span class="rounded-full bg-success-100 px-2 py-0.5 text-xs text-success-700">Sit</span>
                    </div>
                    <p class="mt-1 text-sm font-medium text-gray-900">Ut enim ad minim veniam</p>
                    <p class="mt-0.5 text-xs text-gray-500">Quis nostrud exercitation ullamco...</p>
                    <div class="mt-3 flex items-center justify-between">
                      <span class="text-xs text-gray-500">60%</span>
                      ${r({color:"primary",fill:!0,contained:!0,size:"sm",label:"View"})}
                    </div>
                    <div class="mt-2 h-1.5 w-3/5 rounded-full bg-primary-500"></div>
                  </div>
                  <div class="rounded-lg border border-gray-100 p-4">
                    <div class="flex items-center gap-2">
                      <span class="text-xs text-gray-500">Magna Aliqua</span>
                      <span class="rounded-full bg-warning-100 px-2 py-0.5 text-xs text-warning-700">Sed</span>
                    </div>
                    <p class="mt-1 text-sm font-medium text-gray-900">Duis aute irure dolor</p>
                    <p class="mt-0.5 text-xs text-gray-500">Excepteur sint occaecat cupidatat...</p>
                    <div class="mt-3 flex items-center justify-between">
                      <span class="text-xs text-gray-500">30%</span>
                      ${r({color:"primary",fill:!0,contained:!0,size:"sm",label:"View"})}
                    </div>
                    <div class="mt-2 h-1.5 w-1/3 rounded-full bg-primary-500"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    `,parameters:{docs:{description:{story:"Sparkle particles render inside the View Transition via the CSS Paint API, synchronized with the hue ripple ring. Toggle the `sparkle` control to compare with the DOM-based celebrate fallback."}}}};s.parameters={...s.parameters,docs:{...s.parameters?.docs,source:{originalSource:`{
  args: {
    rippleDuration: 1000,
    ringWidth: 35,
    hueShift: 0,
    sparkleDuration: 1300,
    sparkleSize: 300,
    contrast: 1.5,
    saturate: 2.5,
    feather: 115
  },
  render: args => {
    const onClick = async (e: MouseEvent) => {
      const {
        ready
      } = btuRipple({
        position: e,
        duration: args.rippleDuration,
        ringWidth: args.ringWidth,
        feather: args.feather,
        hueShift: args.hueShift,
        contrast: args.contrast,
        saturate: args.saturate,
        sparkle: args.sparkle ? {
          size: args.sparkleSize,
          duration: args.sparkleDuration
        } : false
      });
      if (!args.sparkle) {
        await ready;
        btuCelebrate({
          position: e,
          size: args.sparkleSize
        });
      }
    };
    return html\`
      <div @click=\${onClick} class="flex" style="min-height: 100vh;">
        <!-- Left Nav Rail -->
        <div class="flex w-16 flex-shrink-0 flex-col items-center gap-4 border-r border-gray-200 bg-white py-4">
          <div class="h-8 w-8 rounded-lg bg-primary-500"></div>
          <div class="mt-2 h-5 w-5 rounded bg-gray-300"></div>
          <div class="h-5 w-5 rounded bg-gray-300"></div>
          <div class="h-5 w-5 rounded bg-gray-300"></div>
          <div class="h-5 w-5 rounded bg-gray-300"></div>
          <div class="h-5 w-5 rounded bg-gray-200"></div>
          <div class="h-5 w-5 rounded bg-gray-200"></div>
        </div>

        <!-- Main Content -->
        <div class="flex min-w-0 flex-1 flex-col bg-gray-50">
          <!-- Header -->
          <div class="flex h-14 items-center justify-between border-b border-gray-200 bg-white px-6">
            <div class="flex items-center gap-3">
              <span class="text-sm font-semibold text-gray-900">Lorem Ipsum</span>
              <div class="h-5 w-5 rounded bg-gray-200"></div>
              <span class="rounded bg-primary-100 px-2 py-0.5 text-xs font-medium text-primary-700">EN</span>
            </div>
            <div class="flex items-center gap-3">
              <div class="h-8 w-64 rounded-md bg-gray-100"></div>
              \${Button({
      color: 'primary',
      fill: true,
      contained: true,
      size: 'sm',
      label: '',
      icon: 'plus'
    })}
            </div>
          </div>

          <!-- Tabs -->
          <div class="flex gap-6 border-b border-gray-200 bg-white px-6">
            <span class="border-b-2 border-primary-500 py-3 text-sm font-medium text-primary-600">Dolor</span>
            <span class="py-3 text-sm text-gray-500">Amet</span>
            <span class="py-3 text-sm text-gray-500">Consectetur</span>
            <span class="py-3 text-sm text-gray-500">Adipiscing</span>
            <span class="py-3 text-sm text-gray-500">Elit</span>
          </div>

          <!-- Page Content -->
          <div class="flex flex-col gap-6 p-6">
            <!-- Warning -->
            <p class="rounded-md border border-warning-200 bg-warning-50 px-3 py-2 text-xs text-warning-700">
              ⚠ Click anywhere — the hue ripple sweeps outward while sparkles burst from the click point. The UI is
              non-interactive during the view transition.
            </p>

            <!-- Quick Start -->
            <div class="flex gap-3">
              <div class="flex w-44 flex-col gap-2 rounded-lg border border-gray-200 bg-white p-4">
                <div class="h-8 w-8 rounded-md bg-primary-100"></div>
                <span class="text-sm font-medium text-gray-700">Sed Do</span>
                <div class="h-1 w-full rounded bg-primary-500"></div>
              </div>
              <div class="flex w-44 flex-col gap-2 rounded-lg border border-gray-200 bg-white p-4">
                <div class="h-8 w-8 rounded-md bg-primary-100"></div>
                <span class="text-sm font-medium text-gray-700">Eiusmod</span>
              </div>
              <div class="flex w-44 flex-col gap-2 rounded-lg border border-gray-200 bg-white p-4">
                <div class="h-8 w-8 rounded-md bg-primary-100"></div>
                <span class="text-sm font-medium text-gray-700">Tempor</span>
              </div>
            </div>

            <!-- Two-Column Widgets -->
            <div class="grid grid-cols-2 gap-6">
              <!-- Recent Activity -->
              <div class="rounded-lg border border-gray-200 bg-white">
                <div class="flex items-center justify-between border-b border-gray-100 px-5 py-3">
                  <span class="text-sm font-semibold text-gray-900">Incididunt</span>
                  <div class="h-5 w-5 rounded bg-gray-200"></div>
                </div>
                <div class="flex flex-col">
                  <div class="flex items-center gap-3 border-b border-gray-50 px-5 py-3">
                    <div class="h-8 w-8 rounded bg-gray-100"></div>
                    <div class="flex flex-1 flex-col gap-1">
                      <div class="h-3 w-3/4 rounded bg-gray-200"></div>
                      <div class="h-2 w-1/3 rounded bg-gray-100"></div>
                    </div>
                    <span class="rounded-full bg-success-100 px-2 py-0.5 text-xs text-success-700">Ipsum</span>
                  </div>
                  <div class="flex items-center gap-3 border-b border-gray-50 px-5 py-3">
                    <div class="h-8 w-8 rounded bg-gray-100"></div>
                    <div class="flex flex-1 flex-col gap-1">
                      <div class="h-3 w-2/3 rounded bg-gray-200"></div>
                      <div class="h-2 w-1/4 rounded bg-gray-100"></div>
                    </div>
                    <span class="rounded-full bg-warning-100 px-2 py-0.5 text-xs text-warning-700">Dolor</span>
                  </div>
                  <div class="flex items-center gap-3 border-b border-gray-50 px-5 py-3">
                    <div class="h-8 w-8 rounded bg-gray-100"></div>
                    <div class="flex flex-1 flex-col gap-1">
                      <div class="h-3 w-1/2 rounded bg-gray-200"></div>
                      <div class="h-2 w-1/3 rounded bg-gray-100"></div>
                    </div>
                    <span class="rounded-full bg-error-100 px-2 py-0.5 text-xs text-error-700">Amet</span>
                  </div>
                  <div class="flex items-center gap-3 px-5 py-3">
                    <div class="h-8 w-8 rounded bg-gray-100"></div>
                    <div class="flex flex-1 flex-col gap-1">
                      <div class="h-3 w-3/5 rounded bg-gray-200"></div>
                      <div class="h-2 w-1/4 rounded bg-gray-100"></div>
                    </div>
                    <span class="rounded-full bg-success-100 px-2 py-0.5 text-xs text-success-700">Ipsum</span>
                  </div>
                </div>
              </div>

              <!-- Workstreams -->
              <div class="rounded-lg border border-gray-200 bg-white">
                <div class="flex items-center justify-between border-b border-gray-100 px-5 py-3">
                  <span class="text-sm font-semibold text-gray-900">Labore</span>
                  <div class="h-5 w-5 rounded bg-gray-200"></div>
                </div>
                <div class="flex flex-col gap-4 p-5">
                  <div class="rounded-lg border border-gray-100 p-4">
                    <div class="flex items-center gap-2">
                      <span class="text-xs text-gray-500">Magna Aliqua</span>
                      <span class="rounded-full bg-success-100 px-2 py-0.5 text-xs text-success-700">Sit</span>
                    </div>
                    <p class="mt-1 text-sm font-medium text-gray-900">Ut enim ad minim veniam</p>
                    <p class="mt-0.5 text-xs text-gray-500">Quis nostrud exercitation ullamco...</p>
                    <div class="mt-3 flex items-center justify-between">
                      <span class="text-xs text-gray-500">60%</span>
                      \${Button({
      color: 'primary',
      fill: true,
      contained: true,
      size: 'sm',
      label: 'View'
    })}
                    </div>
                    <div class="mt-2 h-1.5 w-3/5 rounded-full bg-primary-500"></div>
                  </div>
                  <div class="rounded-lg border border-gray-100 p-4">
                    <div class="flex items-center gap-2">
                      <span class="text-xs text-gray-500">Magna Aliqua</span>
                      <span class="rounded-full bg-warning-100 px-2 py-0.5 text-xs text-warning-700">Sed</span>
                    </div>
                    <p class="mt-1 text-sm font-medium text-gray-900">Duis aute irure dolor</p>
                    <p class="mt-0.5 text-xs text-gray-500">Excepteur sint occaecat cupidatat...</p>
                    <div class="mt-3 flex items-center justify-between">
                      <span class="text-xs text-gray-500">30%</span>
                      \${Button({
      color: 'primary',
      fill: true,
      contained: true,
      size: 'sm',
      label: 'View'
    })}
                    </div>
                    <div class="mt-2 h-1.5 w-1/3 rounded-full bg-primary-500"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    \`;
  },
  parameters: {
    docs: {
      description: {
        story: 'Sparkle particles render inside the View Transition via the CSS Paint API, synchronized with the hue ripple ring. Toggle the \`sparkle\` control to compare with the DOM-based celebrate fallback.'
      }
    }
  }
}`,...s.parameters?.docs?.source}}};const m=["Default"];export{s as Default,m as __namedExportsOrder,v as default};
