@brightspot/ui 1.11.0 → 3.0.1-cms-ui-migration.0

package/dist/storybook/assets/Upload.stories-CvceXasD.js

@@ -0,0 +1,447 @@
+import{g as C,x as S}from"./iframe-D5Uwm8Zd.js";import{o as E}from"./if-defined-C1_PRAyA.js";import{o as x}from"./style-map-Cy6U2K_U.js";import"./preload-helper-PPVm8Dsz.js";const{events:B,args:U,argTypes:c}=C("btu-upload"),F=e=>{const o={};return e.dropzoneBg&&(o["--upload-dropzone-bg"]=e.dropzoneBg),e.dropzoneBorderColor&&(o["--upload-dropzone-border-color"]=e.dropzoneBorderColor),e.dropzoneBorderRadius&&(o["--upload-dropzone-border-radius"]=e.dropzoneBorderRadius),e.dropzoneHoverBg&&(o["--upload-dropzone-hover-bg"]=e.dropzoneHoverBg),e.dropzoneHoverBorderColor&&(o["--upload-dropzone-hover-border-color"]=e.dropzoneHoverBorderColor),e.dropzoneFocusRingColor&&(o["--upload-dropzone-focus-ring-color"]=e.dropzoneFocusRingColor),e.itemBg&&(o["--upload-item-bg"]=e.itemBg),e.itemBorderColor&&(o["--upload-item-border-color"]=e.itemBorderColor),e.itemActiveBorderColor&&(o["--upload-item-active-border-color"]=e.itemActiveBorderColor),e.itemCompleteBorderColor&&(o["--upload-item-complete-border-color"]=e.itemCompleteBorderColor),e.itemErrorBg&&(o["--upload-item-error-bg"]=e.itemErrorBg),e.itemErrorBorderColor&&(o["--upload-item-error-border-color"]=e.itemErrorBorderColor),o},T={title:"Components/Upload",component:"btu-upload",tags:["autodocs"],parameters:{docs:{subtitle:"btu-upload",description:{component:`
+A file upload component with drop zone and file list.
+
+The component is **presentation + file-selection only**. It handles file browsing
+(hidden \`<input type="file">\`), drag-and-drop reception, client-side validation
+(type, size, count), and rendering the file list with progress bars.
+
+It does **not** perform network requests. The consumer listens for events, performs
+their own upload (XHR, fetch, etc.), and drives state back into the component
+via imperative methods.
+
+<h3>Consumer API:</h3>
+<ul>
+  <li><code>setFileProgress(id, percent)</code> — Update progress bar (0-100)</li>
+  <li><code>setFileStatus(id, status, message?)</code> — Set 'uploading', 'complete', or 'error'</li>
+  <li><code>setFileSymbol(id, symbol)</code> — Override file icon</li>
+  <li><code>removeFile(id)</code> — Remove a file programmatically</li>
+  <li><code>getFiles()</code> — Get snapshot of all files and their states</li>
+</ul>
+
+<h3>Events:</h3>
+<ul>
+  <li><code>btu-upload-file-added</code> — File passed validation, ready for upload</li>
+  <li><code>btu-upload-file-removed</code> — File removed by user or programmatically</li>
+  <li><code>btu-upload-file-retry</code> — User clicked "Try again" on failed upload</li>
+  <li><code>btu-upload-file-rejected</code> — File failed client-side validation</li>
+</ul>
+        `}},actions:{handles:B},controls:{expanded:!0}},args:{...U,accept:"","max-file-size":void 0,"max-files":void 0,disabled:!1,"no-drag":!1},argTypes:{...c,accept:{...c.accept,control:{type:"text"},description:"Accepted file types (MIME types, extensions, or comma-separated list)"},"max-file-size":{...c["max-file-size"],control:{type:"number"},description:"Maximum file size in bytes. 0 means unlimited."},"max-files":{...c["max-files"],control:{type:"number"},description:"Maximum number of files allowed. Omit for unlimited. Set to 1 for single-file mode (new selection replaces the existing file)."},disabled:{...c.disabled,control:{type:"boolean"},description:"Disables all interaction"},"no-drag":{...c["no-drag"],control:{type:"boolean"},description:"Disables drag-and-drop. File selection via click still works."},"--upload-dropzone-bg":{table:{disable:!0}},"--upload-dropzone-border-color":{table:{disable:!0}},"--upload-dropzone-border-radius":{table:{disable:!0}},"--upload-dropzone-hover-bg":{table:{disable:!0}},"--upload-dropzone-hover-border-color":{table:{disable:!0}},"--upload-dropzone-focus-ring-color":{table:{disable:!0}},"--upload-item-bg":{table:{disable:!0}},"--upload-item-border-color":{table:{disable:!0}},"--upload-item-active-border-color":{table:{disable:!0}},"--upload-item-complete-border-color":{table:{disable:!0}},"--upload-item-error-bg":{table:{disable:!0}},"--upload-item-error-border-color":{table:{disable:!0}},dropzoneBg:{name:"--upload-dropzone-bg",control:{type:"color"},description:"Drop zone background color (default: gray-25)",table:{category:"CSS Properties"}},dropzoneBorderColor:{name:"--upload-dropzone-border-color",control:{type:"color"},description:"Drop zone border color (default: gray-200)",table:{category:"CSS Properties"}},dropzoneBorderRadius:{name:"--upload-dropzone-border-radius",control:{type:"text"},description:"Drop zone border radius (default: borderRadius.lg)",table:{category:"CSS Properties"}},dropzoneHoverBg:{name:"--upload-dropzone-hover-bg",control:{type:"color"},description:"Drop zone hover background (default: gray-50)",table:{category:"CSS Properties"}},itemBg:{name:"--upload-item-bg",control:{type:"color"},description:"Item background color (default: white)",table:{category:"CSS Properties"}},itemBorderColor:{name:"--upload-item-border-color",control:{type:"color"},description:"Item border color (default: gray-200)",table:{category:"CSS Properties"}},itemErrorBg:{name:"--upload-item-error-bg",control:{type:"color"},description:"Item error background (default: error-25)",table:{category:"CSS Properties"}},itemErrorBorderColor:{name:"--upload-item-error-border-color",control:{type:"color"},description:"Item error border color (default: error-300)",table:{category:"CSS Properties"}},dropzoneHoverBorderColor:{name:"--upload-dropzone-hover-border-color",control:{type:"color"},description:"Drop zone hover border color (default: primary-300)",table:{category:"CSS Properties"}},dropzoneFocusRingColor:{name:"--upload-dropzone-focus-ring-color",control:{type:"color"},description:"Drop zone focus ring color (default: primary-100)",table:{category:"CSS Properties"}},itemActiveBorderColor:{name:"--upload-item-active-border-color",control:{type:"color"},description:"Item active/in-progress border color (default: gray-300)",table:{category:"CSS Properties"}},itemCompleteBorderColor:{name:"--upload-item-complete-border-color",control:{type:"color"},description:"Item completed border color (default: primary-500)",table:{category:"CSS Properties"}}},render:e=>{const o=F(e);return S`
+      <btu-upload
+        style=${x(o)}
+        accept="${e.accept||""}"
+        max-file-size="${e["max-file-size"]||0}"
+        max-files="${E(e["max-files"])}"
+        ?disabled="${e.disabled}"
+        ?no-drag="${e["no-drag"]}"
+      ></btu-upload>
+    `}},u={},m={args:{},render:e=>{const o=`upload-sim-${crypto.randomUUID().slice(0,8)}`,p=a=>{a.addEventListener("btu-upload-file-added",(s=>{const{id:r}=s.detail;let i=0;const t=Math.random()<.3;a.setFileStatus(r,"uploading");const d=setInterval(()=>{i+=Math.random()*15+5,i>=100?(i=100,clearInterval(d),t?a.setFileStatus(r,"error","Network error: connection timed out"):(a.setFileProgress(r,100),a.setFileStatus(r,"complete"))):a.setFileProgress(r,i)},300)})),a.addEventListener("btu-upload-file-retry",(s=>{const{id:r}=s.detail;let i=0;a.setFileStatus(r,"uploading"),a.setFileProgress(r,0);const t=setInterval(()=>{i+=Math.random()*20+10,i>=100?(i=100,clearInterval(t),a.setFileProgress(r,100),a.setFileStatus(r,"complete")):a.setFileProgress(r,i)},300)}))};return setTimeout(()=>{const s=document.getElementById(o)?.querySelector("btu-upload");s&&p(s)},100),S`
+      <div id="${o}">
+        <btu-upload
+          style=${x(F(e))}
+          accept="${e.accept||""}"
+          max-file-size="${e["max-file-size"]||0}"
+          max-files="${E(e["max-files"])}"
+          ?disabled="${e.disabled}"
+          ?no-drag="${e["no-drag"]}"
+        ></btu-upload>
+      </div>
+    `}},f={args:{accept:"image/*,application/pdf","max-file-size":5242880},render:e=>{const o=`upload-log-${crypto.randomUUID().slice(0,8)}`,p=`log-${crypto.randomUUID().slice(0,8)}`,a={"btu-upload-file-added":"text-primary-600","btu-upload-file-removed":"text-gray-600","btu-upload-file-retry":"text-warning-600","btu-upload-file-rejected":"text-error-600","btu-upload-file-completed":"text-success-600"},s=i=>i.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;"),r=(i,t,d=1)=>{let l=0;const n=Math.random()<d;i.setFileStatus(t,"uploading");const $=setInterval(()=>{l+=Math.random()*15+5,l>=100?(clearInterval($),n?i.setFileStatus(t,"error","Simulated network error"):(i.setFileProgress(t,100),i.setFileStatus(t,"complete"))):i.setFileProgress(t,l)},300)};return setTimeout(()=>{const t=document.getElementById(o)?.querySelector("btu-upload"),d=document.getElementById(p);if(!t||!d)return;const l=(n,$)=>{d.querySelector(".log-placeholder")?.remove();const I=document.createElement("div");I.className="flex gap-3 py-1 border-b border-gray-200 last:border-b-0";const k=new Date().toLocaleTimeString("en-US",{hour12:!1}),w=a[n]??"";I.innerHTML=`
+          <span class="shrink-0 text-gray-400">${k}</span>
+          <code class="shrink-0 font-semibold ${w}">${n}</code>
+          <span class="truncate text-gray-700">${s(JSON.stringify($))}</span>
+        `,d.prepend(I)};t.addEventListener("btu-upload-file-added",(n=>{l("btu-upload-file-added",{id:n.detail.id,name:n.detail.file.name,size:n.detail.file.size}),r(t,n.detail.id)})),t.addEventListener("btu-upload-file-removed",(n=>{l("btu-upload-file-removed",{id:n.detail.id,name:n.detail.file.name})})),t.addEventListener("btu-upload-file-retry",(n=>{l("btu-upload-file-retry",{id:n.detail.id,name:n.detail.file.name}),r(t,n.detail.id,0)})),t.addEventListener("btu-upload-file-rejected",(n=>{l("btu-upload-file-rejected",{name:n.detail.file.name,reason:n.detail.reason,size:n.detail.file.size})})),t.addEventListener("btu-upload-file-completed",(n=>{l("btu-upload-file-completed",{id:n.detail.id,name:n.detail.file.name})}))},100),S`
+      <div id="${o}" class="flex flex-col gap-4">
+        <btu-upload
+          style=${x(F(e))}
+          accept="${e.accept||""}"
+          max-file-size="${e["max-file-size"]||0}"
+          max-files="${E(e["max-files"])}"
+          ?disabled="${e.disabled}"
+          ?no-drag="${e["no-drag"]}"
+        ></btu-upload>
+        <div class="rounded-md border border-gray-200 bg-gray-25 p-4">
+          <div class="mb-2 text-xs font-semibold uppercase tracking-wider text-gray-500">Event Log</div>
+          <div id="${p}" class="max-h-64 overflow-y-auto font-mono text-xs">
+            <div class="log-placeholder italic text-gray-400">No events yet. Drop files or click to upload.</div>
+          </div>
+        </div>
+      </div>
+    `},parameters:{docs:{description:{story:'Live log of all five public events: `btu-upload-file-added`, `btu-upload-file-removed`, `btu-upload-file-retry`, `btu-upload-file-rejected`, `btu-upload-file-completed`. Accepts images and PDFs up to 5 MB — drop a `.txt` file or an oversized PDF to trigger `rejected`. Added files always fail on first attempt (surfacing the "Try again" retry UX), and the retry always succeeds — so every upload exercises the full lifecycle: added → error → retry → completed.'}}}},g={render:e=>{const o=`upload-files-${crypto.randomUUID().slice(0,8)}`;return setTimeout(()=>{const a=document.getElementById(o)?.querySelector("btu-upload");a&&requestAnimationFrame(()=>{const s=[{name:"photo-vacation.jpg",type:"image/jpeg",size:42e5,status:"complete"},{name:"quarterly-report.pdf",type:"application/pdf",size:16e6,status:"uploading",progress:40},{name:"intro-video.mp4",type:"video/mp4",size:208e6,status:"error",error:"Upload failed — server returned 503"}];for(const r of s){const i=new File([""],r.name,{type:r.type});Object.defineProperty(i,"size",{value:r.size});const t=crypto.randomUUID().slice(0,8),d={id:t,file:i,status:"pending",progress:0},l=a;l._files.set(t,d),l._milestones.set(t,new Set),l._renderItem(d),l.requestUpdate(),r.status==="complete"?a.setFileStatus(t,"complete"):r.status==="error"?a.setFileStatus(t,"error",r.error):r.status==="uploading"&&a.setFileProgress(t,r.progress??0)}})},200),S`
+      <div id="${o}">
+        <btu-upload style=${x(F(e))}></btu-upload>
+      </div>
+    `}},b={args:{"max-files":1},parameters:{docs:{description:{story:'With `max-files="1"`, selecting a new file silently replaces the existing one. Only one file can be present at a time.'}}}},y={args:{accept:"image/*","max-file-size":5242880,"max-files":3},parameters:{docs:{description:{story:"Demonstrates client-side validation. Only images are accepted, with a 5 MB size limit and a maximum of 3 files. The drop zone hides when the limit is reached. Rejected files fire `btu-upload-file-rejected` events."}}}},v={args:{disabled:!0},parameters:{docs:{description:{story:"A grayed-out drop zone with muted text. File selection, drag-and-drop, and all action buttons are blocked."}}}},h={args:{"no-drag":!0},parameters:{docs:{description:{story:'With `no-drag`, drag-and-drop is disabled. Users can still select files by clicking the drop zone or the "select" link.'}}}},z={args:{},render:e=>S`
+      <btu-upload
+        style=${x({"--upload-dropzone-bg":"oklch(96% 0.02 260)","--upload-dropzone-border-color":"oklch(80% 0.08 260)","--upload-dropzone-hover-bg":"oklch(93% 0.04 260)","--upload-dropzone-border-radius":"1rem","--upload-item-border-color":"oklch(80% 0.08 260)"})}
+        accept="${e.accept||""}"
+        max-file-size="${e["max-file-size"]||0}"
+        max-files="${E(e["max-files"])}"
+        ?disabled="${e.disabled}"
+        ?no-drag="${e["no-drag"]}"
+      ></btu-upload>
+    `,parameters:{docs:{description:{story:"Demonstrates theming via CSS custom properties. The drop zone uses a purple-tinted background and rounded corners, and item borders match the custom palette."}}}};u.parameters={...u.parameters,docs:{...u.parameters?.docs,source:{originalSource:"{}",...u.parameters?.docs?.source},description:{story:"Empty drop zone with all controls exposed.",...u.parameters?.docs?.description}}};m.parameters={...m.parameters,docs:{...m.parameters?.docs,source:{originalSource:`{
+  args: {},
+  render: (args: Record<string, unknown>) => {
+    const containerId = \`upload-sim-\${crypto.randomUUID().slice(0, 8)}\`;
+    const startSimulation = (uploadEl: Upload) => {
+      uploadEl.addEventListener('btu-upload-file-added', ((e: CustomEvent<{
+        id: string;
+        file: File;
+      }>) => {
+        const {
+          id
+        } = e.detail;
+        let progress = 0;
+        const shouldFail = Math.random() < 0.3;
+        uploadEl.setFileStatus(id, 'uploading');
+        const interval = setInterval(() => {
+          progress += Math.random() * 15 + 5;
+          if (progress >= 100) {
+            progress = 100;
+            clearInterval(interval);
+            if (shouldFail) {
+              uploadEl.setFileStatus(id, 'error', 'Network error: connection timed out');
+            } else {
+              uploadEl.setFileProgress(id, 100);
+              uploadEl.setFileStatus(id, 'complete');
+            }
+          } else {
+            uploadEl.setFileProgress(id, progress);
+          }
+        }, 300);
+      }) as EventListener);
+      uploadEl.addEventListener('btu-upload-file-retry', ((e: CustomEvent<{
+        id: string;
+        file: File;
+      }>) => {
+        const {
+          id
+        } = e.detail;
+        let progress = 0;
+        uploadEl.setFileStatus(id, 'uploading');
+        uploadEl.setFileProgress(id, 0);
+        const interval = setInterval(() => {
+          progress += Math.random() * 20 + 10;
+          if (progress >= 100) {
+            progress = 100;
+            clearInterval(interval);
+            uploadEl.setFileProgress(id, 100);
+            uploadEl.setFileStatus(id, 'complete');
+          } else {
+            uploadEl.setFileProgress(id, progress);
+          }
+        }, 300);
+      }) as EventListener);
+    };
+    setTimeout(() => {
+      const container = document.getElementById(containerId);
+      const uploadEl = container?.querySelector('btu-upload') as Upload | null;
+      if (uploadEl) startSimulation(uploadEl);
+    }, 100);
+    return html\`
+      <div id="\${containerId}">
+        <btu-upload
+          style=\${styleMap(cssPropStyles(args))}
+          accept="\${args.accept || ''}"
+          max-file-size="\${args['max-file-size'] || 0}"
+          max-files="\${ifDefined(args['max-files'] as number | undefined)}"
+          ?disabled="\${args.disabled}"
+          ?no-drag="\${args['no-drag']}"
+        ></btu-upload>
+      </div>
+    \`;
+  }
+}`,...m.parameters?.docs?.source},description:{story:`Interactive demo that simulates file upload progress.
+
+Select files to see them upload with simulated progress. Some files will randomly
+fail to demonstrate the error state and retry flow.`,...m.parameters?.docs?.description}}};f.parameters={...f.parameters,docs:{...f.parameters?.docs,source:{originalSource:`{
+  args: {
+    accept: 'image/*,application/pdf',
+    'max-file-size': 5_242_880 // 5 MB
+  },
+  render: (args: Record<string, unknown>) => {
+    const containerId = \`upload-log-\${crypto.randomUUID().slice(0, 8)}\`;
+    const logId = \`log-\${crypto.randomUUID().slice(0, 8)}\`;
+    const eventColors: Record<string, string> = {
+      'btu-upload-file-added': 'text-primary-600',
+      'btu-upload-file-removed': 'text-gray-600',
+      'btu-upload-file-retry': 'text-warning-600',
+      'btu-upload-file-rejected': 'text-error-600',
+      'btu-upload-file-completed': 'text-success-600'
+    };
+    const escapeHtml = (s: string) => s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+    const simulateUpload = (uploadEl: Upload, id: string, failChance = 1) => {
+      let progress = 0;
+      const shouldFail = Math.random() < failChance;
+      uploadEl.setFileStatus(id, 'uploading');
+      const interval = setInterval(() => {
+        progress += Math.random() * 15 + 5;
+        if (progress >= 100) {
+          clearInterval(interval);
+          if (shouldFail) {
+            uploadEl.setFileStatus(id, 'error', 'Simulated network error');
+          } else {
+            uploadEl.setFileProgress(id, 100);
+            uploadEl.setFileStatus(id, 'complete');
+          }
+        } else {
+          uploadEl.setFileProgress(id, progress);
+        }
+      }, 300);
+    };
+    setTimeout(() => {
+      const container = document.getElementById(containerId);
+      const uploadEl = container?.querySelector('btu-upload') as Upload | null;
+      const logEl = document.getElementById(logId);
+      if (!uploadEl || !logEl) return;
+      const appendLog = (name: string, detail: Record<string, unknown>) => {
+        logEl.querySelector('.log-placeholder')?.remove();
+        const entry = document.createElement('div');
+        entry.className = 'flex gap-3 py-1 border-b border-gray-200 last:border-b-0';
+        const ts = new Date().toLocaleTimeString('en-US', {
+          hour12: false
+        });
+        const color = eventColors[name] ?? '';
+        entry.innerHTML = \`
+          <span class="shrink-0 text-gray-400">\${ts}</span>
+          <code class="shrink-0 font-semibold \${color}">\${name}</code>
+          <span class="truncate text-gray-700">\${escapeHtml(JSON.stringify(detail))}</span>
+        \`;
+        logEl.prepend(entry);
+      };
+      uploadEl.addEventListener('btu-upload-file-added', ((e: CustomEvent<{
+        id: string;
+        file: File;
+      }>) => {
+        appendLog('btu-upload-file-added', {
+          id: e.detail.id,
+          name: e.detail.file.name,
+          size: e.detail.file.size
+        });
+        simulateUpload(uploadEl, e.detail.id);
+      }) as EventListener);
+      uploadEl.addEventListener('btu-upload-file-removed', ((e: CustomEvent<{
+        id: string;
+        file: File;
+      }>) => {
+        appendLog('btu-upload-file-removed', {
+          id: e.detail.id,
+          name: e.detail.file.name
+        });
+      }) as EventListener);
+      uploadEl.addEventListener('btu-upload-file-retry', ((e: CustomEvent<{
+        id: string;
+        file: File;
+      }>) => {
+        appendLog('btu-upload-file-retry', {
+          id: e.detail.id,
+          name: e.detail.file.name
+        });
+        simulateUpload(uploadEl, e.detail.id, 0); // retry always succeeds
+      }) as EventListener);
+      uploadEl.addEventListener('btu-upload-file-rejected', ((e: CustomEvent<{
+        file: File;
+        reason: 'type' | 'size';
+      }>) => {
+        appendLog('btu-upload-file-rejected', {
+          name: e.detail.file.name,
+          reason: e.detail.reason,
+          size: e.detail.file.size
+        });
+      }) as EventListener);
+      uploadEl.addEventListener('btu-upload-file-completed', ((e: CustomEvent<{
+        id: string;
+        file: File;
+      }>) => {
+        appendLog('btu-upload-file-completed', {
+          id: e.detail.id,
+          name: e.detail.file.name
+        });
+      }) as EventListener);
+    }, 100);
+    return html\`
+      <div id="\${containerId}" class="flex flex-col gap-4">
+        <btu-upload
+          style=\${styleMap(cssPropStyles(args))}
+          accept="\${args.accept || ''}"
+          max-file-size="\${args['max-file-size'] || 0}"
+          max-files="\${ifDefined(args['max-files'] as number | undefined)}"
+          ?disabled="\${args.disabled}"
+          ?no-drag="\${args['no-drag']}"
+        ></btu-upload>
+        <div class="rounded-md border border-gray-200 bg-gray-25 p-4">
+          <div class="mb-2 text-xs font-semibold uppercase tracking-wider text-gray-500">Event Log</div>
+          <div id="\${logId}" class="max-h-64 overflow-y-auto font-mono text-xs">
+            <div class="log-placeholder italic text-gray-400">No events yet. Drop files or click to upload.</div>
+          </div>
+        </div>
+      </div>
+    \`;
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Live log of all five public events: \`btu-upload-file-added\`, \`btu-upload-file-removed\`, \`btu-upload-file-retry\`, \`btu-upload-file-rejected\`, \`btu-upload-file-completed\`. Accepts images and PDFs up to 5 MB — drop a \`.txt\` file or an oversized PDF to trigger \`rejected\`. Added files always fail on first attempt (surfacing the "Try again" retry UX), and the retry always succeeds — so every upload exercises the full lifecycle: added → error → retry → completed.'
+      }
+    }
+  }
+}`,...f.parameters?.docs?.source},description:{story:`Interactive demo with a live log of every public event fired by the component.
+
+Drop unsupported types or oversized files to see \`btu-upload-file-rejected\` entries.
+Add valid files to watch the full lifecycle: added → simulated upload → complete or
+error → (optional) retry → (optional) remove.`,...f.parameters?.docs?.description}}};g.parameters={...g.parameters,docs:{...g.parameters?.docs,source:{originalSource:`{
+  render: (args: Record<string, unknown>) => {
+    const containerId = \`upload-files-\${crypto.randomUUID().slice(0, 8)}\`;
+    setTimeout(() => {
+      const container = document.getElementById(containerId);
+      const uploadEl = container?.querySelector('btu-upload') as Upload | null;
+      if (!uploadEl) return;
+
+      // Wait for the component to render
+      requestAnimationFrame(() => {
+        // Simulate adding files by programmatically triggering the internal flow
+        const mockFiles = [{
+          name: 'photo-vacation.jpg',
+          type: 'image/jpeg',
+          size: 4200000,
+          status: 'complete' as const
+        }, {
+          name: 'quarterly-report.pdf',
+          type: 'application/pdf',
+          size: 16000000,
+          status: 'uploading' as const,
+          progress: 40
+        }, {
+          name: 'intro-video.mp4',
+          type: 'video/mp4',
+          size: 208000000,
+          status: 'error' as const,
+          error: 'Upload failed — server returned 503'
+        }];
+        for (const mock of mockFiles) {
+          const file = new File([''], mock.name, {
+            type: mock.type
+          });
+          Object.defineProperty(file, 'size', {
+            value: mock.size
+          });
+
+          // Drive the component through its public imperative API. The parent-side
+          // _processFiles path wants a DataTransfer-shaped payload, which can't be
+          // faked here, so we reach in to add the File and then drive status via
+          // the public setters. This is story-only plumbing for visual QA.
+          const id = crypto.randomUUID().slice(0, 8);
+          const initial: FileState = {
+            id,
+            file,
+            status: 'pending',
+            progress: 0
+          };
+          const internals = uploadEl as unknown as {
+            _files: Map<string, FileState>;
+            _milestones: Map<string, Set<number>>;
+            _renderItem: (s: FileState) => void;
+            requestUpdate: () => void;
+          };
+          internals._files.set(id, initial);
+          internals._milestones.set(id, new Set());
+          internals._renderItem(initial);
+          internals.requestUpdate();
+          if (mock.status === 'complete') {
+            uploadEl.setFileStatus(id, 'complete');
+          } else if (mock.status === 'error') {
+            uploadEl.setFileStatus(id, 'error', mock.error);
+          } else if (mock.status === 'uploading') {
+            uploadEl.setFileProgress(id, mock.progress ?? 0);
+          }
+        }
+      });
+    }, 200);
+    return html\`
+      <div id="\${containerId}">
+        <btu-upload style=\${styleMap(cssPropStyles(args))}></btu-upload>
+      </div>
+    \`;
+  }
+}`,...g.parameters?.docs?.source},description:{story:`Pre-seeded with files in mixed states: complete, uploading, and error.
+Shows all icon variants across diverse MIME types.`,...g.parameters?.docs?.description}}};b.parameters={...b.parameters,docs:{...b.parameters?.docs,source:{originalSource:`{
+  args: {
+    'max-files': 1
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'With \`max-files="1"\`, selecting a new file silently replaces the existing one. Only one file can be present at a time.'
+      }
+    }
+  }
+}`,...b.parameters?.docs?.source},description:{story:"Single-file mode where selecting a new file replaces the existing one.",...b.parameters?.docs?.description}}};y.parameters={...y.parameters,docs:{...y.parameters?.docs,source:{originalSource:`{
+  args: {
+    accept: 'image/*',
+    'max-file-size': 5242880,
+    'max-files': 3
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Demonstrates client-side validation. Only images are accepted, with a 5 MB size limit and a maximum of 3 files. The drop zone hides when the limit is reached. Rejected files fire \`btu-upload-file-rejected\` events.'
+      }
+    }
+  }
+}`,...y.parameters?.docs?.source},description:{story:`Validation demo with restricted file types, size limit, and file count limit.
+
+- Accepts only images (\`image/*\`)
+- Max file size: 5 MB
+- Max files: 3
+
+Rejected files fire \`btu-upload-file-rejected\` events (visible in the Actions panel).`,...y.parameters?.docs?.description}}};v.parameters={...v.parameters,docs:{...v.parameters?.docs,source:{originalSource:`{
+  args: {
+    disabled: true
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'A grayed-out drop zone with muted text. File selection, drag-and-drop, and all action buttons are blocked.'
+      }
+    }
+  }
+}`,...v.parameters?.docs?.source},description:{story:"Disabled state — all interaction is blocked.",...v.parameters?.docs?.description}}};h.parameters={...h.parameters,docs:{...h.parameters?.docs,source:{originalSource:`{
+  args: {
+    'no-drag': true
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'With \`no-drag\`, drag-and-drop is disabled. Users can still select files by clicking the drop zone or the "select" link.'
+      }
+    }
+  }
+}`,...h.parameters?.docs?.source},description:{story:"Drag-and-drop disabled — file selection via click still works.",...h.parameters?.docs?.description}}};z.parameters={...z.parameters,docs:{...z.parameters?.docs,source:{originalSource:`{
+  args: {},
+  render: (args: Record<string, unknown>) => {
+    const styles: Record<string, string> = {
+      '--upload-dropzone-bg': 'oklch(96% 0.02 260)',
+      '--upload-dropzone-border-color': 'oklch(80% 0.08 260)',
+      '--upload-dropzone-hover-bg': 'oklch(93% 0.04 260)',
+      '--upload-dropzone-border-radius': '1rem',
+      '--upload-item-border-color': 'oklch(80% 0.08 260)'
+    };
+    return html\`
+      <btu-upload
+        style=\${styleMap(styles)}
+        accept="\${args.accept || ''}"
+        max-file-size="\${args['max-file-size'] || 0}"
+        max-files="\${ifDefined(args['max-files'] as number | undefined)}"
+        ?disabled="\${args.disabled}"
+        ?no-drag="\${args['no-drag']}"
+      ></btu-upload>
+    \`;
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Demonstrates theming via CSS custom properties. The drop zone uses a purple-tinted background and rounded corners, and item borders match the custom palette.'
+      }
+    }
+  }
+}`,...z.parameters?.docs?.source},description:{story:"Themed upload component using CSS custom property overrides.",...z.parameters?.docs?.description}}};const j=["Default","SimulatedUpload","EventLog","WithFiles","SingleFile","Validation","Disabled","NoDrag","CSSCustomProperties"];export{z as CSSCustomProperties,u as Default,v as Disabled,f as EventLog,h as NoDrag,m as SimulatedUpload,b as SingleFile,y as Validation,g as WithFiles,j as __namedExportsOrder,T as default};

package/dist/storybook/assets/UploadItem.stories-BF6c7tVM.js

@@ -0,0 +1,167 @@
+import{g as y,x as c}from"./iframe-D5Uwm8Zd.js";import"./preload-helper-PPVm8Dsz.js";const{events:b,args:f,argTypes:h}=y("btu-upload-item"),e=r=>{const l=`upload-item-${crypto.randomUUID().slice(0,8)}`;return setTimeout(()=>{const m=document.getElementById(l)?.querySelector("btu-upload-item");if(!m)return;const u=new File([""],r.name,{type:r.mimeType??""});Object.defineProperty(u,"size",{value:r.size??0});const p=r.status??"uploading",d={id:crypto.randomUUID().slice(0,8),file:u,symbol:r.symbol},g=p==="pending"?{...d,status:"pending",progress:0}:p==="complete"?{...d,status:"complete",progress:100}:p==="error"?{...d,status:"error",progress:r.progress??0,errorMessage:r.errorMessage??""}:{...d,status:"uploading",progress:r.progress??0};m._configure(g)},50),c`<div id="${l}" style="max-width: 480px;"><btu-upload-item></btu-upload-item></div>`},k={title:"Components/Upload/Upload Item",component:"btu-upload-item",tags:["autodocs"],parameters:{docs:{subtitle:"Individual file row rendered inside btu-upload",description:{component:`
+\`btu-upload-item\` renders a single file's state inside a \`btu-upload\` file list. It is an **internal sub-component** — consumers should not create, query, or modify items directly. All interaction goes through \`btu-upload\` methods (\`setFileProgress\`, \`setFileStatus\`, \`setFileSymbol\`, \`removeFile\`).
+
+These stories exist for design documentation and visual QA of each status state in isolation. In practice, items are always created, configured, and destroyed by their parent \`btu-upload\`.
+
+<h3>Visual States:</h3>
+<ul>
+  <li><strong>Uploading / Pending</strong> — gray-300 border, progress bar visible, trash button</li>
+  <li><strong>Complete</strong> — primary-500 border, progress at 100%, green checkmark badge</li>
+  <li><strong>Error</strong> — error-25 background, error-300 border, "Upload failed…" text, original filename, "Try again" link, trash button</li>
+</ul>
+
+<h3>Icon Resolution:</h3>
+<p>Icons auto-resolve from MIME type: <code>image/*</code> → <code>image</code>, <code>video/*</code> → <code>film</code>, document types → <code>file</code>, fallback → <code>upload-cloud</code>. Overridable per-file via <code>btu-upload.setFileSymbol(id, symbol)</code>.</p>
+
+<h3>Internal Events:</h3>
+<ul>
+  <li><code>btu-upload-item-remove</code> — bubbles to parent \`btu-upload\`, which surfaces it as the public <code>btu-upload-file-removed</code> event</li>
+  <li><code>btu-upload-item-retry</code> — bubbles to parent \`btu-upload\`, which surfaces it as the public <code>btu-upload-file-retry</code> event</li>
+</ul>
+        `}},actions:{handles:b},controls:{expanded:!0}},args:{...f},argTypes:{...h}},t={render:()=>e({name:"quarterly-report.pdf",mimeType:"application/pdf",size:16e6,status:"uploading",progress:40}),parameters:{docs:{description:{story:"The default in-progress state — gray border, linear progress bar with percentage label, and a trash button for cancelling."}}}},s={render:()=>e({name:"draft-notes.txt",mimeType:"text/plain",size:2400,status:"pending",progress:0}),parameters:{docs:{description:{story:"Rendered immediately after a file is added, before the consumer has started transferring. Visually identical to the uploading state at 0%."}}}},o={render:()=>e({name:"photo-vacation.jpg",mimeType:"image/jpeg",size:42e5,status:"complete",progress:100}),parameters:{docs:{description:{story:'Success state — primary-500 border, gray progress track, and a success-tinted emphasize icon with a one-shot pulse animation. Consumer triggers via `setFileStatus(id, "complete")`.'}}}},a={render:()=>e({name:"intro-video.mp4",mimeType:"video/mp4",size:208e6,status:"error",errorMessage:"Upload failed — server returned 503"}),parameters:{docs:{description:{story:'Error state — error-tinted background and border, error icon color, plus a "Try again" link that fires `btu-upload-item-retry` (surfaced as `btu-upload-file-retry` by the parent).'}}}},n={render:()=>c`
+    <div class="flex flex-col gap-4">
+      ${e({name:"uploading.pdf",mimeType:"application/pdf",size:24e5,status:"uploading",progress:62})}
+      ${e({name:"complete.jpg",mimeType:"image/jpeg",size:11e5,status:"complete",progress:100})}
+      ${e({name:"failed.mp4",mimeType:"video/mp4",size:64e6,status:"error",errorMessage:"Upload failed — network unreachable"})}
+    </div>
+  `,parameters:{docs:{description:{story:"Side-by-side comparison of the three terminal states: uploading, complete, error."}}}},i={render:()=>c`
+    <div class="flex flex-col gap-4">
+      ${e({name:"photo.jpg",mimeType:"image/jpeg",size:84e4,status:"uploading",progress:30})}
+      ${e({name:"clip.mp4",mimeType:"video/mp4",size:32e6,status:"uploading",progress:30})}
+      ${e({name:"contract.pdf",mimeType:"application/pdf",size:12e5,status:"uploading",progress:30})}
+      ${e({name:"binary.bin",mimeType:"application/octet-stream",size:5e6,status:"uploading",progress:30})}
+    </div>
+  `,parameters:{docs:{description:{story:"Icon auto-resolution by MIME type: `image/*` → `image`, `video/*` → `film`, document types → `file`, everything else → `upload-cloud`."}}}};t.parameters={...t.parameters,docs:{...t.parameters?.docs,source:{originalSource:`{
+  render: () => renderMockItem({
+    name: 'quarterly-report.pdf',
+    mimeType: 'application/pdf',
+    size: 16_000_000,
+    status: 'uploading',
+    progress: 40
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story: 'The default in-progress state — gray border, linear progress bar with percentage label, and a trash button for cancelling.'
+      }
+    }
+  }
+}`,...t.parameters?.docs?.source},description:{story:"An upload item mid-transfer with a visible progress bar and remove button.",...t.parameters?.docs?.description}}};s.parameters={...s.parameters,docs:{...s.parameters?.docs,source:{originalSource:`{
+  render: () => renderMockItem({
+    name: 'draft-notes.txt',
+    mimeType: 'text/plain',
+    size: 2400,
+    status: 'pending',
+    progress: 0
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Rendered immediately after a file is added, before the consumer has started transferring. Visually identical to the uploading state at 0%.'
+      }
+    }
+  }
+}`,...s.parameters?.docs?.source},description:{story:"A freshly-added item awaiting its first progress update.",...s.parameters?.docs?.description}}};o.parameters={...o.parameters,docs:{...o.parameters?.docs,source:{originalSource:`{
+  render: () => renderMockItem({
+    name: 'photo-vacation.jpg',
+    mimeType: 'image/jpeg',
+    size: 4_200_000,
+    status: 'complete',
+    progress: 100
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Success state — primary-500 border, gray progress track, and a success-tinted emphasize icon with a one-shot pulse animation. Consumer triggers via \`setFileStatus(id, "complete")\`.'
+      }
+    }
+  }
+}`,...o.parameters?.docs?.source},description:{story:"A finished upload — 100% progress with a green checkmark badge.",...o.parameters?.docs?.description}}};a.parameters={...a.parameters,docs:{...a.parameters?.docs,source:{originalSource:`{
+  render: () => renderMockItem({
+    name: 'intro-video.mp4',
+    mimeType: 'video/mp4',
+    size: 208_000_000,
+    status: 'error',
+    errorMessage: 'Upload failed — server returned 503'
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Error state — error-tinted background and border, error icon color, plus a "Try again" link that fires \`btu-upload-item-retry\` (surfaced as \`btu-upload-file-retry\` by the parent).'
+      }
+    }
+  }
+}`,...a.parameters?.docs?.source},description:{story:'A failed upload with error message and "Try again" link.',...a.parameters?.docs?.description}}};n.parameters={...n.parameters,docs:{...n.parameters?.docs,source:{originalSource:`{
+  render: () => html\`
+    <div class="flex flex-col gap-4">
+      \${renderMockItem({
+    name: 'uploading.pdf',
+    mimeType: 'application/pdf',
+    size: 2_400_000,
+    status: 'uploading',
+    progress: 62
+  })}
+      \${renderMockItem({
+    name: 'complete.jpg',
+    mimeType: 'image/jpeg',
+    size: 1_100_000,
+    status: 'complete',
+    progress: 100
+  })}
+      \${renderMockItem({
+    name: 'failed.mp4',
+    mimeType: 'video/mp4',
+    size: 64_000_000,
+    status: 'error',
+    errorMessage: 'Upload failed — network unreachable'
+  })}
+    </div>
+  \`,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Side-by-side comparison of the three terminal states: uploading, complete, error.'
+      }
+    }
+  }
+}`,...n.parameters?.docs?.source},description:{story:"Each status rendered side by side for visual comparison.",...n.parameters?.docs?.description}}};i.parameters={...i.parameters,docs:{...i.parameters?.docs,source:{originalSource:`{
+  render: () => html\`
+    <div class="flex flex-col gap-4">
+      \${renderMockItem({
+    name: 'photo.jpg',
+    mimeType: 'image/jpeg',
+    size: 840_000,
+    status: 'uploading',
+    progress: 30
+  })}
+      \${renderMockItem({
+    name: 'clip.mp4',
+    mimeType: 'video/mp4',
+    size: 32_000_000,
+    status: 'uploading',
+    progress: 30
+  })}
+      \${renderMockItem({
+    name: 'contract.pdf',
+    mimeType: 'application/pdf',
+    size: 1_200_000,
+    status: 'uploading',
+    progress: 30
+  })}
+      \${renderMockItem({
+    name: 'binary.bin',
+    mimeType: 'application/octet-stream',
+    size: 5_000_000,
+    status: 'uploading',
+    progress: 30
+  })}
+    </div>
+  \`,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Icon auto-resolution by MIME type: \`image/*\` → \`image\`, \`video/*\` → \`film\`, document types → \`file\`, everything else → \`upload-cloud\`.'
+      }
+    }
+  }
+}`,...i.parameters?.docs?.source},description:{story:"One item per MIME-to-icon mapping to verify `resolveFileSymbol()` output.",...i.parameters?.docs?.description}}};const z=["Uploading","Pending","Complete","Error","AllStates","IconVariants"];export{n as AllStates,o as Complete,a as Error,i as IconVariants,s as Pending,t as Uploading,z as __namedExportsOrder,k as default};

package/dist/storybook/assets/{Welcome.stories-CfJtSM19.js → Welcome.stories-Ciht_H8A.js}

@@ -1,4 +1,4 @@
-import{S as U}from"./blocks-dP2DwISI.js";import{e as X,f as _,E as B,r as j,x as A}from"./iframe-DloIUNZz.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`
+import{S as U}from"./blocks-DIrsUt2U.js";import{e as X,f as _,E as B,r as j,x as A}from"./iframe-D5Uwm8Zd.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="