@on-panda/serve 0.6.1

package/README.md

@@ -0,0 +1,21 @@
+# @on-panda/serve
+
+A production server for the onPanda web application. It serves the same Vite production build as `pnpm preview`, including the server proxy middleware.
+
+## Usage
+
+```bash
+npx @on-panda/serve --port 8080 --web_config config.json5
+```
+
+Open `http://localhost:8080/`. The server listens on `0.0.0.0`, so it is also accessible through the host's network address.
+
+| Option | Default | Meaning |
+| --- | --- | --- |
+| `--web_config` | Omitted | JSON5 configuration file loaded by the web UI. When omitted, the config endpoint returns `{}`. |
+| `--port` | `4173` | HTTP port. |
+| `--help`, `-h` | | Print usage and exit. |
+
+Relative paths for `--web_config` are resolved against the working directory where the command is run.
+
+The server has no authentication. The web configuration is returned to browser clients, so its values should be treated as public.

package/bin/serve.js

@@ -0,0 +1,65 @@
+#!/usr/bin/env node
+
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { preview } from 'vite'
+
+import { createBypassCorsProxyPlugin } from '../server/bypassCorsProxyPlugin.js'
+import { createRuntimeImportPlugin } from '../server/runtimeImportPlugin.js'
+import { createUsingServerProxyPlugin } from '../server/usingServerProxyPlugin.js'
+import { createWebConfigPlugin } from '../server/webConfigPlugin.js'
+
+const packageDir = fileURLToPath(new URL('..', import.meta.url))
+
+function parseArgs(args) {
+  const options = {
+    port: 4173,
+    webConfig: '',
+  }
+  for (let index = 0; index < args.length; index += 1) {
+    const arg = args[index]
+    if (arg === '--web_config') {
+      options.webConfig = args[++index]
+    } else if (arg === '--port') {
+      options.port = Number(args[++index])
+    } else if (arg === '--help' || arg === '-h') {
+      console.log('Usage: serve [--web_config web_config.json5] [--port 4173]')
+      process.exit(0)
+    }
+  }
+  return {
+    ...options,
+    webConfig: options.webConfig ? path.resolve(options.webConfig) : '',
+  }
+}
+
+async function startServer(options) {
+  const runtimeImportPath = process.env.VITE_ON_PANDA_WEB_RUNTIME_IMPORT
+    ? path.resolve(process.cwd(), process.env.VITE_ON_PANDA_WEB_RUNTIME_IMPORT)
+    : ''
+  const server = await preview({
+    root: packageDir,
+    appType: 'spa',
+    plugins: [
+      createBypassCorsProxyPlugin(process.env.VITE_ON_PANDA_BROWSER_AGENT_PROXY_PATH),
+      createRuntimeImportPlugin(runtimeImportPath),
+      createUsingServerProxyPlugin(),
+      createWebConfigPlugin(options.webConfig),
+    ],
+    build: {
+      outDir: 'web',
+    },
+    preview: {
+      host: '0.0.0.0',
+      port: options.port,
+    },
+  })
+  const [url] = server.resolvedUrls.local
+  console.log(`onPanda web server: ${url}`)
+}
+
+const options = parseArgs(process.argv.slice(2))
+startServer(options).catch(error => {
+  console.error(error)
+  process.exitCode = 1
+})

package/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "@on-panda/serve",
+  "version": "0.6.1",
+  "description": "A production server for the onPanda web application",
+  "license": "MIT",
+  "type": "module",
+  "bin": {
+    "serve": "./bin/serve.js"
+  },
+  "files": [
+    "bin",
+    "server",
+    "web"
+  ],
+  "dependencies": {
+    "json5": "^2.x",
+    "undici": "^7.x",
+    "vite": "^5.3.1"
+  },
+  "scripts": {
+    "preview": "node bin/serve.js"
+  }
+}

package/server/bypassCorsProxyPlugin.js

@@ -0,0 +1,120 @@
+import { Readable } from 'node:stream'
+
+import { withSafeProxyMiddleware } from './safeProxyMiddleware.js'
+import { verifyUrlIsLlmApiCall, verifyUrlIsMcp } from './urlVerification.js'
+
+export function createBypassCorsProxyPlugin(browserAgentProxyPath = '') {
+  const corsMiddleware = withSafeProxyMiddleware('Bypass CORS proxy', createBypassCorsProxyMiddleware({
+    verifyUrl: targetUrl => verifyUrlIsLlmApiCall(targetUrl) || verifyUrlIsMcp(targetUrl),
+  }))
+  // Browser-agent proxy: forwards arbitrary URLs as a fallback for cors-internet.
+  const browserAgentMiddleware = browserAgentProxyPath
+    ? withSafeProxyMiddleware('Browser agent proxy', createBypassCorsProxyMiddleware())
+    : null
+  const register = (server) => {
+    server.middlewares.use('/bypass-CORS', corsMiddleware)
+    if (browserAgentMiddleware) server.middlewares.use(browserAgentProxyPath, browserAgentMiddleware)
+  }
+
+  return {
+    name: 'bypass-cors-proxy-middleware',
+    configureServer: register,
+    configurePreviewServer: register,
+  }
+}
+
+function createBypassCorsProxyMiddleware({ verifyUrl } = {}) {
+  return async (req, res) => {
+    const abortController = new AbortController()
+    try {
+      const rawPath = req.url || ''
+      const withoutPrefix = rawPath.startsWith('/bypass-CORS/')
+        ? rawPath.replace(/^\/bypass-CORS\//, '')
+        : rawPath.replace(/^\/+/, '')
+      const targetUrl = new URL(decodeURIComponent(withoutPrefix))
+      if (verifyUrl && !verifyUrl(targetUrl)) {
+        res.statusCode = 400
+        res.end(`Not an allowed target URL: ${targetUrl}`)
+        return
+      }
+
+      const method = req.method || 'GET'
+      const hopByHopHeaders = new Set(['connection', 'keep-alive', 'proxy-authenticate', 'proxy-authorization', 'te', 'trailers', 'transfer-encoding', 'upgrade', 'host'])
+      const headers = new Headers()
+      const abortUpstream = () => abortController.abort()
+      req.on('aborted', abortUpstream)
+      res.on('close', () => {
+        if (!res.writableEnded) {
+          abortUpstream()
+        }
+      })
+      Object.entries(req.headers).forEach(([key, value]) => {
+        if (!value || hopByHopHeaders.has(key.toLowerCase()) || key.toLowerCase() === 'accept-encoding') {
+          return
+        }
+        const values = Array.isArray(value) ? value : [value]
+        values.forEach(val => headers.append(key, val))
+      })
+      headers.set('accept-encoding', 'identity')
+
+      const fetchInit = {
+        method,
+        headers,
+        compress: false,
+        signal: abortController.signal,
+      }
+      const hasBody = !['GET', 'HEAD'].includes(method.toUpperCase())
+      if (hasBody) {
+        fetchInit.body = req
+        fetchInit.duplex = 'half'
+      }
+
+      const upstreamResponse = await fetch(targetUrl.toString(), fetchInit)
+      res.statusCode = upstreamResponse.status
+      const upstreamContentEncoding = upstreamResponse.headers.get('content-encoding')
+      const shouldNormalizeContentEncoding = upstreamContentEncoding && upstreamContentEncoding.toLowerCase() !== 'identity'
+      if (shouldNormalizeContentEncoding) {
+        res.setHeader('content-encoding', 'identity')
+      }
+      upstreamResponse.headers.forEach((value, key) => {
+        const lowerKey = key.toLowerCase()
+        if (hopByHopHeaders.has(lowerKey)) {
+          return
+        }
+        if (shouldNormalizeContentEncoding && ['content-encoding', 'content-length'].includes(lowerKey)) {
+          return
+        }
+        res.setHeader(key, value)
+      })
+      if (!upstreamResponse.body) {
+        res.end()
+        return
+      }
+      const proxyStream = Readable.fromWeb(upstreamResponse.body)
+      proxyStream.on('error', (err) => {
+        if (abortController.signal.aborted) {
+          return
+        }
+        console.error('Bypass CORS proxy stream failed', err)
+        if (!res.headersSent) {
+          res.statusCode = 502
+          res.setHeader('content-type', 'text/plain')
+          res.end('Proxy stream error')
+        } else {
+          res.destroy(err)
+        }
+      })
+      proxyStream.pipe(res)
+    } catch (error) {
+      if (abortController.signal.aborted) {
+        return
+      }
+      console.error('Bypass CORS proxy failed', error)
+      if (!res.headersSent) {
+        res.statusCode = 500
+        res.setHeader('content-type', 'text/plain')
+      }
+      res.end(`Proxy error: ${error instanceof Error ? error.message : 'Unknown error'}`)
+    }
+  }
+}

package/server/runtimeImportPlugin.js

@@ -0,0 +1,46 @@
+import fs from 'node:fs'
+import fsPromises from 'node:fs/promises'
+
+export function createRuntimeImportPlugin(runtimeImportPath) {
+  // For configurations that are included in `pnpm dev`/`preview` but not in git or the build.
+  if (!runtimeImportPath) {
+    return null
+  }
+
+  if (!fs.existsSync(runtimeImportPath)) {
+    throw new Error(`VITE_ON_PANDA_WEB_RUNTIME_IMPORT file not found: ${runtimeImportPath}`)
+  }
+
+  return {
+    name: 'on-panda-web-runtime-import',
+    configureServer(server) {
+      server.middlewares.use('/on-panda-web-runtime.js', createRuntimeFileMiddleware(runtimeImportPath))
+    },
+    configurePreviewServer(server) {
+      server.middlewares.use('/on-panda-web-runtime.js', createRuntimeFileMiddleware(runtimeImportPath))
+    }
+  }
+}
+
+function createRuntimeFileMiddleware(filePath) {
+  return async (req, res) => {
+    if (!['GET', 'HEAD'].includes(req.method || 'GET')) {
+      res.statusCode = 405
+      res.end('Method Not Allowed')
+      return
+    }
+    try {
+      const data = await fsPromises.readFile(filePath)
+      res.statusCode = 200
+      res.setHeader('content-type', 'text/javascript; charset=utf-8')
+      if (req.method === 'HEAD') {
+        res.end()
+        return
+      }
+      res.end(data)
+    } catch {
+      res.statusCode = 404
+      res.end('Not Found')
+    }
+  }
+}

package/server/safeProxyMiddleware.js

@@ -0,0 +1,18 @@
+export function withSafeProxyMiddleware(proxyName, middleware) {
+  return async (req, res) => {
+    try {
+      await middleware(req, res)
+    } catch (error) {
+      console.error(`${proxyName} crashed`, error)
+      if (res.headersSent) {
+        if (!res.writableEnded) {
+          res.end()
+        }
+        return
+      }
+      res.statusCode = 500
+      res.setHeader('content-type', 'text/plain')
+      res.end(`Proxy error: ${error instanceof Error ? error.message : 'Unknown error'}`)
+    }
+  }
+}

package/server/urlVerification.js

@@ -0,0 +1,8 @@
+export function verifyUrlIsLlmApiCall(url) {
+  // check is LLM api call by /models or /completions
+  return /(^|\/)(models|completions|messages)(\/|$)/.test(url.pathname)
+}
+
+export function verifyUrlIsMcp(url) {
+  return /(^|\/)mcp(\/|$)/.test(url.pathname)
+}

package/server/usingServerProxyPlugin.js

@@ -0,0 +1,123 @@
+import { Readable } from 'node:stream'
+
+import { ProxyAgent } from 'undici'
+
+import { withSafeProxyMiddleware } from './safeProxyMiddleware.js'
+import { verifyUrlIsLlmApiCall } from './urlVerification.js'
+
+export function createUsingServerProxyPlugin() {
+  const middleware = withSafeProxyMiddleware('Server proxy', createServerProxyMiddleware())
+
+  return {
+    name: 'using-server-proxy-middleware',
+    configureServer(server) {
+      server.middlewares.use('/using-server-proxy', middleware)
+    },
+    configurePreviewServer(server) {
+      server.middlewares.use('/using-server-proxy', middleware)
+    }
+  }
+}
+
+function createServerProxyMiddleware() {
+  return async (req, res) => {
+    const abortController = new AbortController()
+    try {
+      const rawPath = req.url || ''
+      const withoutPrefix = rawPath.startsWith('/using-server-proxy/')
+        ? rawPath.replace(/^\/using-server-proxy\//, '')
+        : rawPath.replace(/^\/+/, '')
+      const incomingPath = decodeURIComponent(withoutPrefix)
+      const match = incomingPath.match(/^(?<proxy>[a-zA-Z][a-zA-Z0-9+.-]*:\/\/[^/]+)\/(?<target>https?:\/\/.+)$/)
+      if (!match || !match.groups) {
+        res.statusCode = 400
+        res.end('Invalid proxy request: expected /using-server-proxy/<proxy>/<target>')
+        return
+      }
+      const { proxy: proxyUrl, target } = match.groups
+      const targetUrl = new URL(target)
+      if (!verifyUrlIsLlmApiCall(targetUrl)) {
+        throw new Error(`Not a valid LLM API call: ${targetUrl}`)
+      }
+
+      const method = req.method || 'GET'
+      const hopByHopHeaders = new Set(['connection', 'keep-alive', 'proxy-authenticate', 'proxy-authorization', 'te', 'trailers', 'transfer-encoding', 'upgrade', 'host'])
+      const headers = new Headers()
+      const abortUpstream = () => abortController.abort()
+      req.on('aborted', abortUpstream)
+      res.on('close', () => {
+        if (!res.writableEnded) {
+          abortUpstream()
+        }
+      })
+      Object.entries(req.headers).forEach(([key, value]) => {
+        if (!value || hopByHopHeaders.has(key.toLowerCase()) || key.toLowerCase() === 'accept-encoding') {
+          return
+        }
+        const values = Array.isArray(value) ? value : [value]
+        values.forEach(val => headers.append(key, val))
+      })
+      headers.set('accept-encoding', 'identity')
+
+      const fetchInit = {
+        method,
+        headers,
+        dispatcher: new ProxyAgent(proxyUrl),
+        compress: false,
+        signal: abortController.signal,
+      }
+      const hasBody = !['GET', 'HEAD'].includes(method.toUpperCase())
+      if (hasBody) {
+        fetchInit.body = req
+        fetchInit.duplex = 'half'
+      }
+
+      const upstreamResponse = await fetch(targetUrl.toString(), fetchInit)
+      res.statusCode = upstreamResponse.status
+      const upstreamContentEncoding = upstreamResponse.headers.get('content-encoding')
+      const shouldNormalizeContentEncoding = upstreamContentEncoding && upstreamContentEncoding.toLowerCase() !== 'identity'
+      if (shouldNormalizeContentEncoding) {
+        res.setHeader('content-encoding', 'identity')
+      }
+      upstreamResponse.headers.forEach((value, key) => {
+        const lowerKey = key.toLowerCase()
+        if (hopByHopHeaders.has(lowerKey)) {
+          return
+        }
+        if (shouldNormalizeContentEncoding && ['content-encoding', 'content-length'].includes(lowerKey)) {
+          return
+        }
+        res.setHeader(key, value)
+      })
+      if (!upstreamResponse.body) {
+        res.end()
+        return
+      }
+      const proxyStream = Readable.fromWeb(upstreamResponse.body)
+      proxyStream.on('error', (err) => {
+        if (abortController.signal.aborted) {
+          return
+        }
+        console.error('Server proxy stream failed', err)
+        if (!res.headersSent) {
+          res.statusCode = 502
+          res.setHeader('content-type', 'text/plain')
+          res.end('Proxy stream error')
+        } else {
+          res.destroy(err)
+        }
+      })
+      proxyStream.pipe(res)
+    } catch (error) {
+      if (abortController.signal.aborted) {
+        return
+      }
+      console.error('Server proxy failed', error)
+      if (!res.headersSent) {
+        res.statusCode = 500
+        res.setHeader('content-type', 'text/plain')
+      }
+      res.end(`Proxy error: ${error instanceof Error ? error.message : 'Unknown error'}`)
+    }
+  }
+}

package/server/webConfigPlugin.js

@@ -0,0 +1,41 @@
+import fs from 'node:fs/promises'
+
+import JSON5 from 'json5'
+
+const webConfigUrl = '/on-panda-web/web_config.json5'
+
+export function createWebConfigPlugin(webConfigPath = '') {
+  const middleware = createWebConfigMiddleware(webConfigPath)
+  return {
+    name: 'on-panda-web-config',
+    configureServer(server) {
+      server.middlewares.use(webConfigUrl, middleware)
+    },
+    configurePreviewServer(server) {
+      server.middlewares.use(webConfigUrl, middleware)
+    },
+  }
+}
+
+function createWebConfigMiddleware(webConfigPath) {
+  return async (req, res) => {
+    if (!['GET', 'HEAD'].includes(req.method || 'GET')) {
+      res.statusCode = 405
+      res.end('Method Not Allowed')
+      return
+    }
+    try {
+      const config = webConfigPath ? JSON5.parse(await fs.readFile(webConfigPath, 'utf8')) : {}
+      const body = JSON.stringify(config)
+      res.statusCode = 200
+      res.setHeader('content-type', 'application/json; charset=utf-8')
+      res.setHeader('cache-control', 'no-store')
+      res.setHeader('content-length', Buffer.byteLength(body))
+      res.end(req.method === 'HEAD' ? undefined : body)
+    } catch (error) {
+      res.statusCode = error.code === 'ENOENT' ? 404 : 400
+      res.setHeader('content-type', 'text/plain; charset=utf-8')
+      res.end(error.message)
+    }
+  }
+}

package/web/assets/AudioPlugin-B9D2vg7i.js

@@ -0,0 +1,73 @@
+import{_ as U,r as W,c as F,m as V,w as q,b as G,d as Y,o as $,a as B,e as j,f as J}from"./index-VDofnkb1.js";function y(c,t,e,i){return new(e||(e=Promise))(function(s,n){function r(o){try{l(i.next(o))}catch(h){n(h)}}function a(o){try{l(i.throw(o))}catch(h){n(h)}}function l(o){var h;o.done?s(o.value):(h=o.value,h instanceof e?h:new e(function(u){u(h)})).then(r,a)}l((i=i.apply(c,t||[])).next())})}let R=class{constructor(){this.listeners={}}on(t,e,i){if(this.listeners[t]||(this.listeners[t]=new Set),this.listeners[t].add(e),i==null?void 0:i.once){const s=()=>{this.un(t,s),this.un(t,e)};return this.on(t,s),s}return()=>this.un(t,e)}un(t,e){var i;(i=this.listeners[t])===null||i===void 0||i.delete(e)}once(t,e){return this.on(t,e,{once:!0})}unAll(){this.listeners={}}emit(t,...e){this.listeners[t]&&this.listeners[t].forEach(i=>i(...e))}};const L={decode:function(c,t){return y(this,void 0,void 0,function*(){const e=new AudioContext({sampleRate:t});return e.decodeAudioData(c).finally(()=>e.close())})},createBuffer:function(c,t){return typeof c[0]=="number"&&(c=[c]),function(e){const i=e[0];if(i.some(s=>s>1||s<-1)){const s=i.length;let n=0;for(let r=0;r<s;r++){const a=Math.abs(i[r]);a>n&&(n=a)}for(const r of e)for(let a=0;a<s;a++)r[a]/=n}}(c),{duration:t,length:c[0].length,sampleRate:c[0].length/t,numberOfChannels:c.length,getChannelData:e=>c==null?void 0:c[e],copyFromChannel:AudioBuffer.prototype.copyFromChannel,copyToChannel:AudioBuffer.prototype.copyToChannel}}};function H(c,t){const e=t.xmlns?document.createElementNS(t.xmlns,c):document.createElement(c);for(const[i,s]of Object.entries(t))if(i==="children")for(const[n,r]of Object.entries(t))typeof r=="string"?e.appendChild(document.createTextNode(r)):e.appendChild(H(n,r));else i==="style"?Object.assign(e.style,s):i==="textContent"?e.textContent=s:e.setAttribute(i,s.toString());return e}function z(c,t,e){const i=H(c,t||{});return e==null||e.appendChild(i),i}var K=Object.freeze({__proto__:null,createElement:z,default:z});const Q={fetchBlob:function(c,t,e){return y(this,void 0,void 0,function*(){const i=yield fetch(c,e);if(i.status>=400)throw new Error(`Failed to fetch ${c}: ${i.status} (${i.statusText})`);return function(s,n){y(this,void 0,void 0,function*(){if(!s.body||!s.headers)return;const r=s.body.getReader(),a=Number(s.headers.get("Content-Length"))||0;let l=0;const o=u=>y(this,void 0,void 0,function*(){l+=(u==null?void 0:u.length)||0;const d=Math.round(l/a*100);n(d)}),h=()=>y(this,void 0,void 0,function*(){let u;try{u=yield r.read()}catch{return}u.done||(o(u.value),yield h())});h()})}(i.clone(),t),i.blob()})}};class Z extends R{constructor(t){super(),this.isExternalMedia=!1,t.media?(this.media=t.media,this.isExternalMedia=!0):this.media=document.createElement("audio"),t.mediaControls&&(this.media.controls=!0),t.autoplay&&(this.media.autoplay=!0),t.playbackRate!=null&&this.onMediaEvent("canplay",()=>{t.playbackRate!=null&&(this.media.playbackRate=t.playbackRate)},{once:!0})}onMediaEvent(t,e,i){return this.media.addEventListener(t,e,i),()=>this.media.removeEventListener(t,e,i)}getSrc(){return this.media.currentSrc||this.media.src||""}revokeSrc(){const t=this.getSrc();t.startsWith("blob:")&&URL.revokeObjectURL(t)}canPlayType(t){return this.media.canPlayType(t)!==""}setSrc(t,e){const i=this.getSrc();if(t&&i===t)return;this.revokeSrc();const s=e instanceof Blob&&(this.canPlayType(e.type)||!t)?URL.createObjectURL(e):t;i&&(this.media.src="");try{this.media.src=s}catch{this.media.src=t}}destroy(){this.isExternalMedia||(this.media.pause(),this.media.remove(),this.revokeSrc(),this.media.src="",this.media.load())}setMediaElement(t){this.media=t}play(){return y(this,void 0,void 0,function*(){return this.media.play()})}pause(){this.media.pause()}isPlaying(){return!this.media.paused&&!this.media.ended}setTime(t){this.media.currentTime=Math.max(0,Math.min(t,this.getDuration()))}getDuration(){return this.media.duration}getCurrentTime(){return this.media.currentTime}getVolume(){return this.media.volume}setVolume(t){this.media.volume=t}getMuted(){return this.media.muted}setMuted(t){this.media.muted=t}getPlaybackRate(){return this.media.playbackRate}isSeeking(){return this.media.seeking}setPlaybackRate(t,e){e!=null&&(this.media.preservesPitch=e),this.media.playbackRate=t}getMediaElement(){return this.media}setSinkId(t){return this.media.setSinkId(t)}}class T extends R{constructor(t,e){super(),this.timeouts=[],this.isScrollable=!1,this.audioData=null,this.resizeObserver=null,this.lastContainerWidth=0,this.isDragging=!1,this.subscriptions=[],this.unsubscribeOnScroll=[],this.subscriptions=[],this.options=t;const i=this.parentFromOptionsContainer(t.container);this.parent=i;const[s,n]=this.initHtml();i.appendChild(s),this.container=s,this.scrollContainer=n.querySelector(".scroll"),this.wrapper=n.querySelector(".wrapper"),this.canvasWrapper=n.querySelector(".canvases"),this.progressWrapper=n.querySelector(".progress"),this.cursor=n.querySelector(".cursor"),e&&n.appendChild(e),this.initEvents()}parentFromOptionsContainer(t){let e;if(typeof t=="string"?e=document.querySelector(t):t instanceof HTMLElement&&(e=t),!e)throw new Error("Container not found");return e}initEvents(){const t=e=>{const i=this.wrapper.getBoundingClientRect(),s=e.clientX-i.left,n=e.clientY-i.top;return[s/i.width,n/i.height]};if(this.wrapper.addEventListener("click",e=>{const[i,s]=t(e);this.emit("click",i,s)}),this.wrapper.addEventListener("dblclick",e=>{const[i,s]=t(e);this.emit("dblclick",i,s)}),this.options.dragToSeek!==!0&&typeof this.options.dragToSeek!="object"||this.initDrag(),this.scrollContainer.addEventListener("scroll",()=>{const{scrollLeft:e,scrollWidth:i,clientWidth:s}=this.scrollContainer,n=e/i,r=(e+s)/i;this.emit("scroll",n,r,e,e+s)}),typeof ResizeObserver=="function"){const e=this.createDelay(100);this.resizeObserver=new ResizeObserver(()=>{e().then(()=>this.onContainerResize()).catch(()=>{})}),this.resizeObserver.observe(this.scrollContainer)}}onContainerResize(){const t=this.parent.clientWidth;t===this.lastContainerWidth&&this.options.height!=="auto"||(this.lastContainerWidth=t,this.reRender())}initDrag(){this.subscriptions.push(function(t,e,i,s,n=3,r=0,a=100){if(!t)return()=>{};const l=matchMedia("(pointer: coarse)").matches;let o=()=>{};const h=u=>{if(u.button!==r)return;u.preventDefault(),u.stopPropagation();let d=u.clientX,p=u.clientY,m=!1;const w=Date.now(),f=v=>{if(v.preventDefault(),v.stopPropagation(),l&&Date.now()-w<a)return;const S=v.clientX,x=v.clientY,P=S-d,M=x-p;if(m||Math.abs(P)>n||Math.abs(M)>n){const k=t.getBoundingClientRect(),{left:A,top:N}=k;m||(i==null||i(d-A,p-N),m=!0),e(P,M,S-A,x-N),d=S,p=x}},g=v=>{if(m){const S=v.clientX,x=v.clientY,P=t.getBoundingClientRect(),{left:M,top:k}=P;s==null||s(S-M,x-k)}o()},b=v=>{v.relatedTarget&&v.relatedTarget!==document.documentElement||g(v)},E=v=>{m&&(v.stopPropagation(),v.preventDefault())},C=v=>{m&&v.preventDefault()};document.addEventListener("pointermove",f),document.addEventListener("pointerup",g),document.addEventListener("pointerout",b),document.addEventListener("pointercancel",b),document.addEventListener("touchmove",C,{passive:!1}),document.addEventListener("click",E,{capture:!0}),o=()=>{document.removeEventListener("pointermove",f),document.removeEventListener("pointerup",g),document.removeEventListener("pointerout",b),document.removeEventListener("pointercancel",b),document.removeEventListener("touchmove",C),setTimeout(()=>{document.removeEventListener("click",E,{capture:!0})},10)}};return t.addEventListener("pointerdown",h),()=>{o(),t.removeEventListener("pointerdown",h)}}(this.wrapper,(t,e,i)=>{this.emit("drag",Math.max(0,Math.min(1,i/this.wrapper.getBoundingClientRect().width)))},t=>{this.isDragging=!0,this.emit("dragstart",Math.max(0,Math.min(1,t/this.wrapper.getBoundingClientRect().width)))},t=>{this.isDragging=!1,this.emit("dragend",Math.max(0,Math.min(1,t/this.wrapper.getBoundingClientRect().width)))}))}getHeight(t,e){var i;const s=((i=this.audioData)===null||i===void 0?void 0:i.numberOfChannels)||1;if(t==null)return 128;if(!isNaN(Number(t)))return Number(t);if(t==="auto"){const n=this.parent.clientHeight||128;return e!=null&&e.every(r=>!r.overlay)?n/s:n}return 128}initHtml(){const t=document.createElement("div"),e=t.attachShadow({mode:"open"}),i=this.options.cspNonce&&typeof this.options.cspNonce=="string"?this.options.cspNonce.replace(/"/g,""):"";return e.innerHTML=`
+      <style${i?` nonce="${i}"`:""}>
+        :host {
+          user-select: none;
+          min-width: 1px;
+        }
+        :host audio {
+          display: block;
+          width: 100%;
+        }
+        :host .scroll {
+          overflow-x: auto;
+          overflow-y: hidden;
+          width: 100%;
+          position: relative;
+        }
+        :host .noScrollbar {
+          scrollbar-color: transparent;
+          scrollbar-width: none;
+        }
+        :host .noScrollbar::-webkit-scrollbar {
+          display: none;
+          -webkit-appearance: none;
+        }
+        :host .wrapper {
+          position: relative;
+          overflow: visible;
+          z-index: 2;
+        }
+        :host .canvases {
+          min-height: ${this.getHeight(this.options.height,this.options.splitChannels)}px;
+        }
+        :host .canvases > div {
+          position: relative;
+        }
+        :host canvas {
+          display: block;
+          position: absolute;
+          top: 0;
+          image-rendering: pixelated;
+        }
+        :host .progress {
+          pointer-events: none;
+          position: absolute;
+          z-index: 2;
+          top: 0;
+          left: 0;
+          width: 0;
+          height: 100%;
+          overflow: hidden;
+        }
+        :host .progress > div {
+          position: relative;
+        }
+        :host .cursor {
+          pointer-events: none;
+          position: absolute;
+          z-index: 5;
+          top: 0;
+          left: 0;
+          height: 100%;
+          border-radius: 2px;
+        }
+      </style>
+
+      <div class="scroll" part="scroll">
+        <div class="wrapper" part="wrapper">
+          <div class="canvases" part="canvases"></div>
+          <div class="progress" part="progress"></div>
+          <div class="cursor" part="cursor"></div>
+        </div>
+      </div>
+    `,[t,e]}setOptions(t){if(this.options.container!==t.container){const e=this.parentFromOptionsContainer(t.container);e.appendChild(this.container),this.parent=e}t.dragToSeek!==!0&&typeof this.options.dragToSeek!="object"||this.initDrag(),this.options=t,this.reRender()}getWrapper(){return this.wrapper}getWidth(){return this.scrollContainer.clientWidth}getScroll(){return this.scrollContainer.scrollLeft}setScroll(t){this.scrollContainer.scrollLeft=t}setScrollPercentage(t){const{scrollWidth:e}=this.scrollContainer,i=e*t;this.setScroll(i)}destroy(){var t,e;this.subscriptions.forEach(i=>i()),this.container.remove(),(t=this.resizeObserver)===null||t===void 0||t.disconnect(),(e=this.unsubscribeOnScroll)===null||e===void 0||e.forEach(i=>i()),this.unsubscribeOnScroll=[]}createDelay(t=10){let e,i;const s=()=>{e&&clearTimeout(e),i&&i()};return this.timeouts.push(s),()=>new Promise((n,r)=>{s(),i=r,e=setTimeout(()=>{e=void 0,i=void 0,n()},t)})}convertColorValues(t){if(!Array.isArray(t))return t||"";if(t.length<2)return t[0]||"";const e=document.createElement("canvas"),i=e.getContext("2d"),s=e.height*(window.devicePixelRatio||1),n=i.createLinearGradient(0,0,0,s),r=1/(t.length-1);return t.forEach((a,l)=>{const o=l*r;n.addColorStop(o,a)}),n}getPixelRatio(){return Math.max(1,window.devicePixelRatio||1)}renderBarWaveform(t,e,i,s){const n=t[0],r=t[1]||t[0],a=n.length,{width:l,height:o}=i.canvas,h=o/2,u=this.getPixelRatio(),d=e.barWidth?e.barWidth*u:1,p=e.barGap?e.barGap*u:e.barWidth?d/2:0,m=e.barRadius||0,w=l/(d+p)/a,f=m&&"roundRect"in i?"roundRect":"rect";i.beginPath();let g=0,b=0,E=0;for(let C=0;C<=a;C++){const v=Math.round(C*w);if(v>g){const P=Math.round(b*h*s),M=P+Math.round(E*h*s)||1;let k=h-P;e.barAlign==="top"?k=0:e.barAlign==="bottom"&&(k=o-M),i[f](g*(d+p),k,d,M,m),g=v,b=0,E=0}const S=Math.abs(n[C]||0),x=Math.abs(r[C]||0);S>b&&(b=S),x>E&&(E=x)}i.fill(),i.closePath()}renderLineWaveform(t,e,i,s){const n=r=>{const a=t[r]||t[0],l=a.length,{height:o}=i.canvas,h=o/2,u=i.canvas.width/l;i.moveTo(0,h);let d=0,p=0;for(let m=0;m<=l;m++){const w=Math.round(m*u);if(w>d){const g=h+(Math.round(p*h*s)||1)*(r===0?-1:1);i.lineTo(d,g),d=w,p=0}const f=Math.abs(a[m]||0);f>p&&(p=f)}i.lineTo(d,h)};i.beginPath(),n(0),n(1),i.fill(),i.closePath()}renderWaveform(t,e,i){if(i.fillStyle=this.convertColorValues(e.waveColor),e.renderFunction)return void e.renderFunction(t,i);let s=e.barHeight||1;if(e.normalize){const n=Array.from(t[0]).reduce((r,a)=>Math.max(r,Math.abs(a)),0);s=n?1/n:1}e.barWidth||e.barGap||e.barAlign?this.renderBarWaveform(t,e,i,s):this.renderLineWaveform(t,e,i,s)}renderSingleCanvas(t,e,i,s,n,r,a){const l=this.getPixelRatio(),o=document.createElement("canvas");o.width=Math.round(i*l),o.height=Math.round(s*l),o.style.width=`${i}px`,o.style.height=`${s}px`,o.style.left=`${Math.round(n)}px`,r.appendChild(o);const h=o.getContext("2d");if(this.renderWaveform(t,e,h),o.width>0&&o.height>0){const u=o.cloneNode(),d=u.getContext("2d");d.drawImage(o,0,0),d.globalCompositeOperation="source-in",d.fillStyle=this.convertColorValues(e.progressColor),d.fillRect(0,0,o.width,o.height),a.appendChild(u)}}renderMultiCanvas(t,e,i,s,n,r){const a=this.getPixelRatio(),{clientWidth:l}=this.scrollContainer,o=i/a;let h=Math.min(T.MAX_CANVAS_WIDTH,l,o),u={};if(h===0)return;if(e.barWidth||e.barGap){const f=e.barWidth||.5,g=f+(e.barGap||f/2);h%g!=0&&(h=Math.floor(h/g)*g)}const d=f=>{if(f<0||f>=p||u[f])return;u[f]=!0;const g=f*h,b=Math.min(o-g,h);if(b<=0)return;const E=t.map(C=>{const v=Math.floor(g/o*C.length),S=Math.floor((g+b)/o*C.length);return C.slice(v,S)});this.renderSingleCanvas(E,e,b,s,g,n,r)},p=Math.ceil(o/h);if(!this.isScrollable){for(let f=0;f<p;f++)d(f);return}const m=this.scrollContainer.scrollLeft/o,w=Math.floor(m*p);if(d(w-1),d(w),d(w+1),p>1){const f=this.on("scroll",()=>{const{scrollLeft:g}=this.scrollContainer,b=Math.floor(g/o*p);Object.keys(u).length>T.MAX_NODES&&(n.innerHTML="",r.innerHTML="",u={}),d(b-1),d(b),d(b+1)});this.unsubscribeOnScroll.push(f)}}renderChannel(t,e,i,s){var{overlay:n}=e,r=function(h,u){var d={};for(var p in h)Object.prototype.hasOwnProperty.call(h,p)&&u.indexOf(p)<0&&(d[p]=h[p]);if(h!=null&&typeof Object.getOwnPropertySymbols=="function"){var m=0;for(p=Object.getOwnPropertySymbols(h);m<p.length;m++)u.indexOf(p[m])<0&&Object.prototype.propertyIsEnumerable.call(h,p[m])&&(d[p[m]]=h[p[m]])}return d}(e,["overlay"]);const a=document.createElement("div"),l=this.getHeight(r.height,r.splitChannels);a.style.height=`${l}px`,n&&s>0&&(a.style.marginTop=`-${l}px`),this.canvasWrapper.style.minHeight=`${l}px`,this.canvasWrapper.appendChild(a);const o=a.cloneNode();this.progressWrapper.appendChild(o),this.renderMultiCanvas(t,r,i,l,a,o)}render(t){return y(this,void 0,void 0,function*(){var e;this.timeouts.forEach(l=>l()),this.timeouts=[],this.canvasWrapper.innerHTML="",this.progressWrapper.innerHTML="",this.options.width!=null&&(this.scrollContainer.style.width=typeof this.options.width=="number"?`${this.options.width}px`:this.options.width);const i=this.getPixelRatio(),s=this.scrollContainer.clientWidth,n=Math.ceil(t.duration*(this.options.minPxPerSec||0));this.isScrollable=n>s;const r=this.options.fillParent&&!this.isScrollable,a=(r?s:n)*i;if(this.wrapper.style.width=r?"100%":`${n}px`,this.scrollContainer.style.overflowX=this.isScrollable?"auto":"hidden",this.scrollContainer.classList.toggle("noScrollbar",!!this.options.hideScrollbar),this.cursor.style.backgroundColor=`${this.options.cursorColor||this.options.progressColor}`,this.cursor.style.width=`${this.options.cursorWidth}px`,this.audioData=t,this.emit("render"),this.options.splitChannels)for(let l=0;l<t.numberOfChannels;l++){const o=Object.assign(Object.assign({},this.options),(e=this.options.splitChannels)===null||e===void 0?void 0:e[l]);this.renderChannel([t.getChannelData(l)],o,a,l)}else{const l=[t.getChannelData(0)];t.numberOfChannels>1&&l.push(t.getChannelData(1)),this.renderChannel(l,this.options,a,0)}Promise.resolve().then(()=>this.emit("rendered"))})}reRender(){if(this.unsubscribeOnScroll.forEach(i=>i()),this.unsubscribeOnScroll=[],!this.audioData)return;const{scrollWidth:t}=this.scrollContainer,{right:e}=this.progressWrapper.getBoundingClientRect();if(this.render(this.audioData),this.isScrollable&&t!==this.scrollContainer.scrollWidth){const{right:i}=this.progressWrapper.getBoundingClientRect();let s=i-e;s*=2,s=s<0?Math.floor(s):Math.ceil(s),s/=2,this.scrollContainer.scrollLeft+=s}}zoom(t){this.options.minPxPerSec=t,this.reRender()}scrollIntoView(t,e=!1){const{scrollLeft:i,scrollWidth:s,clientWidth:n}=this.scrollContainer,r=t*s,a=i,l=i+n,o=n/2;if(this.isDragging)r+30>l?this.scrollContainer.scrollLeft+=30:r-30<a&&(this.scrollContainer.scrollLeft-=30);else{(r<a||r>l)&&(this.scrollContainer.scrollLeft=r-(this.options.autoCenter?o:0));const h=r-i-o;e&&this.options.autoCenter&&h>0&&(this.scrollContainer.scrollLeft+=Math.min(h,10))}{const h=this.scrollContainer.scrollLeft,u=h/s,d=(h+n)/s;this.emit("scroll",u,d,h,h+n)}}renderProgress(t,e){if(isNaN(t))return;const i=100*t;this.canvasWrapper.style.clipPath=`polygon(${i}% 0, 100% 0, 100% 100%, ${i}% 100%)`,this.progressWrapper.style.width=`${i}%`,this.cursor.style.left=`${i}%`,this.cursor.style.transform=`translateX(-${Math.round(i)===100?this.options.cursorWidth:0}px)`,this.isScrollable&&this.options.autoScroll&&this.scrollIntoView(t,e)}exportImage(t,e,i){return y(this,void 0,void 0,function*(){const s=this.canvasWrapper.querySelectorAll("canvas");if(!s.length)throw new Error("No waveform data");if(i==="dataURL"){const n=Array.from(s).map(r=>r.toDataURL(t,e));return Promise.resolve(n)}return Promise.all(Array.from(s).map(n=>new Promise((r,a)=>{n.toBlob(l=>{l?r(l):a(new Error("Could not export image"))},t,e)})))})}}T.MAX_CANVAS_WIDTH=8e3,T.MAX_NODES=10;class tt extends R{constructor(){super(...arguments),this.unsubscribe=()=>{}}start(){this.unsubscribe=this.on("tick",()=>{requestAnimationFrame(()=>{this.emit("tick")})}),this.emit("tick")}stop(){this.unsubscribe()}destroy(){this.unsubscribe()}}class O extends R{constructor(t=new AudioContext){super(),this.bufferNode=null,this.playStartTime=0,this.playedDuration=0,this._muted=!1,this._playbackRate=1,this._duration=void 0,this.buffer=null,this.currentSrc="",this.paused=!0,this.crossOrigin=null,this.seeking=!1,this.autoplay=!1,this.addEventListener=this.on,this.removeEventListener=this.un,this.audioContext=t,this.gainNode=this.audioContext.createGain(),this.gainNode.connect(this.audioContext.destination)}load(){return y(this,void 0,void 0,function*(){})}get src(){return this.currentSrc}set src(t){if(this.currentSrc=t,this._duration=void 0,!t)return this.buffer=null,void this.emit("emptied");fetch(t).then(e=>{if(e.status>=400)throw new Error(`Failed to fetch ${t}: ${e.status} (${e.statusText})`);return e.arrayBuffer()}).then(e=>this.currentSrc!==t?null:this.audioContext.decodeAudioData(e)).then(e=>{this.currentSrc===t&&(this.buffer=e,this.emit("loadedmetadata"),this.emit("canplay"),this.autoplay&&this.play())})}_play(){var t;if(!this.paused)return;this.paused=!1,(t=this.bufferNode)===null||t===void 0||t.disconnect(),this.bufferNode=this.audioContext.createBufferSource(),this.buffer&&(this.bufferNode.buffer=this.buffer),this.bufferNode.playbackRate.value=this._playbackRate,this.bufferNode.connect(this.gainNode);let e=this.playedDuration*this._playbackRate;(e>=this.duration||e<0)&&(e=0,this.playedDuration=0),this.bufferNode.start(this.audioContext.currentTime,e),this.playStartTime=this.audioContext.currentTime,this.bufferNode.onended=()=>{this.currentTime>=this.duration&&(this.pause(),this.emit("ended"))}}_pause(){var t;this.paused=!0,(t=this.bufferNode)===null||t===void 0||t.stop(),this.playedDuration+=this.audioContext.currentTime-this.playStartTime}play(){return y(this,void 0,void 0,function*(){this.paused&&(this._play(),this.emit("play"))})}pause(){this.paused||(this._pause(),this.emit("pause"))}stopAt(t){const e=t-this.currentTime,i=this.bufferNode;i==null||i.stop(this.audioContext.currentTime+e),i==null||i.addEventListener("ended",()=>{i===this.bufferNode&&(this.bufferNode=null,this.pause())},{once:!0})}setSinkId(t){return y(this,void 0,void 0,function*(){return this.audioContext.setSinkId(t)})}get playbackRate(){return this._playbackRate}set playbackRate(t){this._playbackRate=t,this.bufferNode&&(this.bufferNode.playbackRate.value=t)}get currentTime(){return(this.paused?this.playedDuration:this.playedDuration+(this.audioContext.currentTime-this.playStartTime))*this._playbackRate}set currentTime(t){const e=!this.paused;e&&this._pause(),this.playedDuration=t/this._playbackRate,e&&this._play(),this.emit("seeking"),this.emit("timeupdate")}get duration(){var t,e;return(t=this._duration)!==null&&t!==void 0?t:((e=this.buffer)===null||e===void 0?void 0:e.duration)||0}set duration(t){this._duration=t}get volume(){return this.gainNode.gain.value}set volume(t){this.gainNode.gain.value=t,this.emit("volumechange")}get muted(){return this._muted}set muted(t){this._muted!==t&&(this._muted=t,this._muted?this.gainNode.disconnect():this.gainNode.connect(this.audioContext.destination))}canPlayType(t){return/^(audio|video)\//.test(t)}getGainNode(){return this.gainNode}getChannelData(){const t=[];if(!this.buffer)return t;const e=this.buffer.numberOfChannels;for(let i=0;i<e;i++)t.push(this.buffer.getChannelData(i));return t}}const et={waveColor:"#999",progressColor:"#555",cursorWidth:1,minPxPerSec:0,fillParent:!0,interact:!0,dragToSeek:!1,autoScroll:!0,autoCenter:!0,sampleRate:8e3};class D extends Z{static create(t){return new D(t)}constructor(t){const e=t.media||(t.backend==="WebAudio"?new O:void 0);super({media:e,mediaControls:t.mediaControls,autoplay:t.autoplay,playbackRate:t.audioRate}),this.plugins=[],this.decodedData=null,this.stopAtPosition=null,this.subscriptions=[],this.mediaSubscriptions=[],this.abortController=null,this.options=Object.assign({},et,t),this.timer=new tt;const i=e?void 0:this.getMediaElement();this.renderer=new T(this.options,i),this.initPlayerEvents(),this.initRendererEvents(),this.initTimerEvents(),this.initPlugins();const s=this.options.url||this.getSrc()||"";Promise.resolve().then(()=>{this.emit("init");const{peaks:n,duration:r}=this.options;(s||n&&r)&&this.load(s,n,r).catch(()=>null)})}updateProgress(t=this.getCurrentTime()){return this.renderer.renderProgress(t/this.getDuration(),this.isPlaying()),t}initTimerEvents(){this.subscriptions.push(this.timer.on("tick",()=>{if(!this.isSeeking()){const t=this.updateProgress();this.emit("timeupdate",t),this.emit("audioprocess",t),this.stopAtPosition!=null&&this.isPlaying()&&t>=this.stopAtPosition&&this.pause()}}))}initPlayerEvents(){this.isPlaying()&&(this.emit("play"),this.timer.start()),this.mediaSubscriptions.push(this.onMediaEvent("timeupdate",()=>{const t=this.updateProgress();this.emit("timeupdate",t)}),this.onMediaEvent("play",()=>{this.emit("play"),this.timer.start()}),this.onMediaEvent("pause",()=>{this.emit("pause"),this.timer.stop(),this.stopAtPosition=null}),this.onMediaEvent("emptied",()=>{this.timer.stop(),this.stopAtPosition=null}),this.onMediaEvent("ended",()=>{this.emit("timeupdate",this.getDuration()),this.emit("finish"),this.stopAtPosition=null}),this.onMediaEvent("seeking",()=>{this.emit("seeking",this.getCurrentTime())}),this.onMediaEvent("error",()=>{var t;this.emit("error",(t=this.getMediaElement().error)!==null&&t!==void 0?t:new Error("Media error")),this.stopAtPosition=null}))}initRendererEvents(){this.subscriptions.push(this.renderer.on("click",(t,e)=>{this.options.interact&&(this.seekTo(t),this.emit("interaction",t*this.getDuration()),this.emit("click",t,e))}),this.renderer.on("dblclick",(t,e)=>{this.emit("dblclick",t,e)}),this.renderer.on("scroll",(t,e,i,s)=>{const n=this.getDuration();this.emit("scroll",t*n,e*n,i,s)}),this.renderer.on("render",()=>{this.emit("redraw")}),this.renderer.on("rendered",()=>{this.emit("redrawcomplete")}),this.renderer.on("dragstart",t=>{this.emit("dragstart",t)}),this.renderer.on("dragend",t=>{this.emit("dragend",t)}));{let t;this.subscriptions.push(this.renderer.on("drag",e=>{if(!this.options.interact)return;let i;this.renderer.renderProgress(e),clearTimeout(t),this.isPlaying()?i=0:this.options.dragToSeek===!0?i=200:typeof this.options.dragToSeek=="object"&&this.options.dragToSeek!==void 0&&(i=this.options.dragToSeek.debounceTime),t=setTimeout(()=>{this.seekTo(e)},i),this.emit("interaction",e*this.getDuration()),this.emit("drag",e)}))}}initPlugins(){var t;!((t=this.options.plugins)===null||t===void 0)&&t.length&&this.options.plugins.forEach(e=>{this.registerPlugin(e)})}unsubscribePlayerEvents(){this.mediaSubscriptions.forEach(t=>t()),this.mediaSubscriptions=[]}setOptions(t){this.options=Object.assign({},this.options,t),t.duration&&!t.peaks&&(this.decodedData=L.createBuffer(this.exportPeaks(),t.duration)),t.peaks&&t.duration&&(this.decodedData=L.createBuffer(t.peaks,t.duration)),this.renderer.setOptions(this.options),t.audioRate&&this.setPlaybackRate(t.audioRate),t.mediaControls!=null&&(this.getMediaElement().controls=t.mediaControls)}registerPlugin(t){return t._init(this),this.plugins.push(t),this.subscriptions.push(t.once("destroy",()=>{this.plugins=this.plugins.filter(e=>e!==t)})),t}getWrapper(){return this.renderer.getWrapper()}getWidth(){return this.renderer.getWidth()}getScroll(){return this.renderer.getScroll()}setScroll(t){return this.renderer.setScroll(t)}setScrollTime(t){const e=t/this.getDuration();this.renderer.setScrollPercentage(e)}getActivePlugins(){return this.plugins}loadAudio(t,e,i,s){return y(this,void 0,void 0,function*(){var n;if(this.emit("load",t),!this.options.media&&this.isPlaying()&&this.pause(),this.decodedData=null,this.stopAtPosition=null,!e&&!i){const a=this.options.fetchParams||{};window.AbortController&&!a.signal&&(this.abortController=new AbortController,a.signal=(n=this.abortController)===null||n===void 0?void 0:n.signal);const l=h=>this.emit("loading",h);e=yield Q.fetchBlob(t,l,a);const o=this.options.blobMimeType;o&&(e=new Blob([e],{type:o}))}this.setSrc(t,e);const r=yield new Promise(a=>{const l=s||this.getDuration();l?a(l):this.mediaSubscriptions.push(this.onMediaEvent("loadedmetadata",()=>a(this.getDuration()),{once:!0}))});if(!t&&!e){const a=this.getMediaElement();a instanceof O&&(a.duration=r)}if(i)this.decodedData=L.createBuffer(i,r||0);else if(e){const a=yield e.arrayBuffer();this.decodedData=yield L.decode(a,this.options.sampleRate)}this.decodedData&&(this.emit("decode",this.getDuration()),this.renderer.render(this.decodedData)),this.emit("ready",this.getDuration())})}load(t,e,i){return y(this,void 0,void 0,function*(){try{return yield this.loadAudio(t,void 0,e,i)}catch(s){throw this.emit("error",s),s}})}loadBlob(t,e,i){return y(this,void 0,void 0,function*(){try{return yield this.loadAudio("",t,e,i)}catch(s){throw this.emit("error",s),s}})}zoom(t){if(!this.decodedData)throw new Error("No audio loaded");this.renderer.zoom(t),this.emit("zoom",t)}getDecodedData(){return this.decodedData}exportPeaks({channels:t=2,maxLength:e=8e3,precision:i=1e4}={}){if(!this.decodedData)throw new Error("The audio has not been decoded yet");const s=Math.min(t,this.decodedData.numberOfChannels),n=[];for(let r=0;r<s;r++){const a=this.decodedData.getChannelData(r),l=[],o=a.length/e;for(let h=0;h<e;h++){const u=a.slice(Math.floor(h*o),Math.ceil((h+1)*o));let d=0;for(let p=0;p<u.length;p++){const m=u[p];Math.abs(m)>Math.abs(d)&&(d=m)}l.push(Math.round(d*i)/i)}n.push(l)}return n}getDuration(){let t=super.getDuration()||0;return t!==0&&t!==1/0||!this.decodedData||(t=this.decodedData.duration),t}toggleInteraction(t){this.options.interact=t}setTime(t){this.stopAtPosition=null,super.setTime(t),this.updateProgress(t),this.emit("timeupdate",t)}seekTo(t){const e=this.getDuration()*t;this.setTime(e)}play(t,e){const i=Object.create(null,{play:{get:()=>super.play}});return y(this,void 0,void 0,function*(){t!=null&&this.setTime(t);const s=yield i.play.call(this);return e!=null&&(this.media instanceof O?this.media.stopAt(e):this.stopAtPosition=e),s})}playPause(){return y(this,void 0,void 0,function*(){return this.isPlaying()?this.pause():this.play()})}stop(){this.pause(),this.setTime(0)}skip(t){this.setTime(this.getCurrentTime()+t)}empty(){this.load("",[[0]],.001)}setMediaElement(t){this.unsubscribePlayerEvents(),super.setMediaElement(t),this.initPlayerEvents()}exportImage(){return y(this,arguments,void 0,function*(t="image/png",e=1,i="dataURL"){return this.renderer.exportImage(t,e,i)})}destroy(){var t;this.emit("destroy"),(t=this.abortController)===null||t===void 0||t.abort(),this.plugins.forEach(e=>e.destroy()),this.subscriptions.forEach(e=>e()),this.unsubscribePlayerEvents(),this.timer.destroy(),this.renderer.destroy(),super.destroy()}}D.BasePlugin=class extends R{constructor(c){super(),this.subscriptions=[],this.options=c}onInit(){}_init(c){this.wavesurfer=c,this.onInit()}destroy(){this.emit("destroy"),this.subscriptions.forEach(c=>c())}},D.dom=K;class it{constructor(){this.listeners={}}on(t,e,i){if(this.listeners[t]||(this.listeners[t]=new Set),this.listeners[t].add(e),i==null?void 0:i.once){const s=()=>{this.un(t,s),this.un(t,e)};return this.on(t,s),s}return()=>this.un(t,e)}un(t,e){var i;(i=this.listeners[t])===null||i===void 0||i.delete(e)}once(t,e){return this.on(t,e,{once:!0})}unAll(){this.listeners={}}emit(t,...e){this.listeners[t]&&this.listeners[t].forEach(i=>i(...e))}}class st extends it{constructor(t){super(),this.subscriptions=[],this.options=t}onInit(){}_init(t){this.wavesurfer=t,this.onInit()}destroy(){this.emit("destroy"),this.subscriptions.forEach(t=>t())}}function X(c,t){const e=t.xmlns?document.createElementNS(t.xmlns,c):document.createElement(c);for(const[i,s]of Object.entries(t))if(i==="children")for(const[n,r]of Object.entries(t))typeof r=="string"?e.appendChild(document.createTextNode(r)):e.appendChild(X(n,r));else i==="style"?Object.assign(e.style,s):i==="textContent"?e.textContent=s:e.setAttribute(i,s.toString());return e}function I(c,t,e){const i=X(c,t||{});return e==null||e.appendChild(i),i}const nt={lineWidth:1,labelSize:11,formatTimeCallback:c=>`${Math.floor(c/60)}:${`0${Math.floor(c)%60}`.slice(-2)}`};class _ extends st{constructor(t){super(t||{}),this.unsubscribe=()=>{},this.onPointerMove=e=>{if(!this.wavesurfer)return;const i=this.wavesurfer.getWrapper().getBoundingClientRect(),{width:s}=i,n=e.clientX-i.left,r=Math.min(1,Math.max(0,n/s)),a=Math.min(s-this.options.lineWidth-1,n);this.wrapper.style.transform=`translateX(${a}px)`,this.wrapper.style.opacity="1";const l=this.wavesurfer.getDuration()||0;this.label.textContent=this.options.formatTimeCallback(l*r);const o=this.label.offsetWidth;this.label.style.transform=a+o>s?`translateX(-${o+this.options.lineWidth}px)`:"",this.emit("hover",r)},this.onPointerLeave=()=>{this.wrapper.style.opacity="0"},this.options=Object.assign({},nt,t),this.wrapper=I("div",{part:"hover"}),this.label=I("span",{part:"hover-label"},this.wrapper)}static create(t){return new _(t)}addUnits(t){return`${t}${typeof t=="number"?"px":""}`}onInit(){if(!this.wavesurfer)throw Error("WaveSurfer is not initialized");const t=this.wavesurfer.options,e=this.options.lineColor||t.cursorColor||t.progressColor;Object.assign(this.wrapper.style,{position:"absolute",zIndex:10,left:0,top:0,height:"100%",pointerEvents:"none",borderLeft:`${this.addUnits(this.options.lineWidth)} solid ${e}`,opacity:"0",transition:"opacity .1s ease-in"}),Object.assign(this.label.style,{display:"block",backgroundColor:this.options.labelBackground,color:this.options.labelColor,fontSize:`${this.addUnits(this.options.labelSize)}`,transition:"transform .1s ease-in",padding:"2px 3px"});const i=this.wavesurfer.getWrapper();i.appendChild(this.wrapper),i.addEventListener("pointermove",this.onPointerMove),i.addEventListener("pointerleave",this.onPointerLeave),i.addEventListener("wheel",this.onPointerMove),this.unsubscribe=()=>{i.removeEventListener("pointermove",this.onPointerMove),i.removeEventListener("pointerleave",this.onPointerLeave),i.removeEventListener("wheel",this.onPointerLeave)}}destroy(){super.destroy(),this.unsubscribe(),this.wrapper.remove()}}const rt={class:"on-panda-audio-plugin"},ot=["src"],at={key:0,class:"fallback-message"},lt={__name:"AudioPlugin",props:{content:{type:Object,default:()=>({})}},setup(c){const t=c,e=W(null),i=W(null),s=W(!1);let n=null;const r=F(()=>V(t.content).base64_url),a=()=>{if(!(!e.value||!i.value||!r.value))try{n=D.create({container:e.value,waveColor:"rgba(255, 165, 0, 1)",progressColor:"rgba(192, 192, 192, 1)",media:i.value,normalize:!0,height:60,plugins:[_.create({lineColor:"#ff0000",lineWidth:2,labelBackground:"#555",labelColor:"#fff",labelSize:"11px"})]}),n.on("ready",()=>{s.value=!0,e.value.addEventListener("click",l=>{const o=e.value.getBoundingClientRect(),u=(l.clientX-o.left)/o.width;n.seekTo(u),i.value.play()})}),n.on("error",l=>{console.error("WaveSurfer error:",l),s.value=!1})}catch(l){console.error("Failed to initialize WaveSurfer:",l),s.value=!1}};return q(r,()=>{n&&(n.destroy(),n=null,s.value=!1),r.value&&setTimeout(a,100)},{immediate:!1}),G(()=>{r.value&&a()}),Y(()=>{n&&n.destroy()}),(l,o)=>($(),B("div",rt,[j("div",{ref_key:"waveformContainer",ref:e,class:"waveform-container"},null,512),j("audio",{ref_key:"audioElement",ref:i,src:r.value,controls:"",class:"audio-controls"},null,8,ot),!s.value&&r.value?($(),B("div",at," Waveform visualization unavailable - using audio controls only ")):J("",!0)]))}},dt=U(lt,[["__scopeId","data-v-0e4cb895"]]);export{dt as default};

package/web/assets/AudioPlugin-Ctg1swNk.css

@@ -0,0 +1 @@
+.on-panda-audio-plugin[data-v-0e4cb895]{width:100%;margin-bottom:10px;margin-top:10px;background-color:#f9f9f9;border-radius:8px;box-shadow:0 2px 4px #0000001a}.waveform-container[data-v-0e4cb895]{width:100%;cursor:pointer}.audio-controls[data-v-0e4cb895]{width:100%}.fallback-message[data-v-0e4cb895]{font-size:.9em;color:#666;font-style:italic;margin-top:.5rem}

package/web/assets/ImagePlugin-B55vjXoR.css

@@ -0,0 +1 @@
+.on-panda-image-plugin[data-v-3a06bfde]{max-width:min(100% - 5px,512px);max-height:512px;box-shadow:#00000080 0 0 8px;margin-left:5px;margin-right:5px;cursor:zoom-in}.on-panda-image-plugin.rawSizeImg[data-v-3a06bfde]{max-width:initial;max-height:initial;position:relative;z-index:1}

package/web/assets/ImagePlugin-D-lN3l8G.js

@@ -0,0 +1 @@
+import{_ as l,c as s,o as i,a as r}from"./index-VDofnkb1.js";const u=["src"],_={__name:"ImagePlugin",props:{content:{type:Object,default:()=>({})}},setup(a){const e=a,n=s(()=>e.content.blob_url||e.content.image_url.url);function c(t){t.target.classList.toggle("rawSizeImg")}function o(){window.open(n.value,"_blank")}return(t,p)=>(i(),r("img",{class:"on-panda-image-plugin",src:n.value,alt:"ON_PANDA_IMAGE",onClick:c,onDblclick:o},null,40,u))}},m=l(_,[["__scopeId","data-v-3a06bfde"]]);export{m as default};