@prolibu-suite/cobalt-core 0.11.4 → 0.11.5

package/dist/esm/co-audio-player.entry.js

@@ -51,6 +51,67 @@ function resamplePeaks(channelData, bars) {
     }
     return peaks;
 }
+/**
+ * Resolución de la envolvente que se retiene por grabación, en bloques.
+ *
+ * Las barras EXACTAS del ancho vigente se calculan del PCM antes de soltarlo (ver
+ * `co-audio-player.peaks-cache`); la envolvente solo sirve los anchos que aparecen
+ * DESPUÉS (resize, o una segunda instancia que llega con el caché ya caliente). El
+ * reproductor deriva las barras del ancho (`floor(ancho / barDensity)`, ~853 a
+ * 2560 px), así que la envolvente tiene que ir muy por encima de eso: 65 536 bloques
+ * = ≥ 76 bloques por barra hasta 2560 px, y pesan 256 KB (Float32) frente a ~32 MB
+ * del PCM de 3 min a 44,1 kHz. Medido contra el exacto con PCM sintético de 3 min:
+ * desvío máx. ≈ 1 px de 40 en las barras que difieren (≈ 0,8 px con ruido blanco).
+ */
+const PEAK_ENVELOPE_BINS = 65536;
+/** PCM → envolvente de a lo sumo `maxBins` bloques. Con `length ≤ maxBins` el bloque
+ *  es de 1 muestra y la envolvente ES |PCM| (sin pérdida). */
+function buildPeakEnvelope(channelData, maxBins = PEAK_ENVELOPE_BINS) {
+    const length = channelData.length;
+    const blockSize = Math.max(1, Math.ceil(length / Math.max(1, maxBins)));
+    const bins = Math.ceil(length / blockSize);
+    const peaks = new Float32Array(bins);
+    for (let b = 0; b < bins; b++) {
+        let max = 0;
+        const end = Math.min(length, (b + 1) * blockSize);
+        for (let j = b * blockSize; j < end; j++) {
+            const abs = Math.abs(channelData[j]);
+            if (abs > max)
+                max = abs;
+        }
+        peaks[b] = max;
+    }
+    return { peaks, blockSize, length };
+}
+/**
+ * Las mismas barras que `resamplePeaks(pcm, bars)`, calculadas desde la envolvente:
+ * mismo paso (`floor(length / bars)` muestras), mismo recorte de la cola y misma
+ * fórmula de altura. Cada barra toma el máximo de los bloques que TOCA su rango de
+ * muestras, así que el resultado es IDÉNTICO cuando `blockSize` es 1 o divide el
+ * paso, y en el caso general solo puede sumar el pico de un bloque parcial en cada
+ * borde (nunca queda por debajo del exacto).
+ */
+function resampleEnvelope(env, bars) {
+    const { peaks: blocks, blockSize, length: len } = env;
+    if (!len || bars <= 0)
+        return [];
+    const step = Math.max(1, Math.floor(len / bars));
+    const peaks = [];
+    for (let i = 0; i < bars; i++) {
+        const start = i * step;
+        const end = Math.min(start + step, len); // exclusivo, como el bucle de resamplePeaks
+        let max = 0;
+        if (start < end) {
+            const last = Math.floor((end - 1) / blockSize);
+            for (let b = Math.floor(start / blockSize); b <= last; b++) {
+                if (blocks[b] > max)
+                    max = blocks[b];
+            }
+        }
+        peaks.push(0.12 + max * 0.88);
+    }
+    return peaks;
+}
 /** Deterministic pseudo-waveform (stable render + testable — no Math.random). */
 function fallbackPeaks(bars) {
     if (bars <= 0)
@@ -70,6 +131,105 @@ function scrubFraction(clientX, rect) {
     return Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
 }
 
+/** Tope de entradas. Cada una pesa ≤ 256 KB (`PEAK_ENVELOPE_BINS` Float32) más unas
+ *  pocas listas de barras exactas, así que el caché lleno queda en ~4 MB. Una
+ *  instancia montada conserva SU envolvente aunque la entrada se desaloje (es la
+ *  misma referencia, no una copia). */
+const PEAKS_CACHE_MAX = 16;
+// Map conserva el orden de inserción: la primera clave es la menos usada (LRU).
+const cache = new Map();
+const inflight = new Map();
+function remember(url, value) {
+    cache.delete(url);
+    cache.set(url, value);
+    while (cache.size > PEAKS_CACHE_MAX)
+        cache.delete(cache.keys().next().value);
+}
+/**
+ * Picos + duración de `url`: del caché si están, uniéndose a la carga en vuelo si
+ * otra instancia ya la pidió, o cargándolos. Solo se cachea un resultado real: un
+ * error (CORS, red, códec) o un `null` se devuelven tal cual y el próximo pedido
+ * reintenta.
+ */
+function loadAudioPeaks(url, wantBars, loader = decodeAudioPeaks) {
+    const hit = cache.get(url);
+    if (hit) {
+        remember(url, hit); // refresca su posición LRU
+        return Promise.resolve(hit);
+    }
+    const pending = inflight.get(url);
+    if (pending) {
+        if (wantBars)
+            pending.wanted.add(wantBars);
+        return pending.promise;
+    }
+    const wanted = new Set(wantBars ? [wantBars] : []);
+    const p = loader(url, wanted).then((res) => {
+        inflight.delete(url);
+        if (res)
+            remember(url, res);
+        return res;
+    }, (err) => {
+        inflight.delete(url);
+        throw err;
+    });
+    inflight.set(url, { promise: p, wanted });
+    return p;
+}
+/**
+ * Descarga + decode con Web Audio, reducido a la envolvente. El `AudioBuffer`
+ * (y con él el PCM completo) no sale de esta función: queda sin referencias
+ * apenas se calcula la envolvente.
+ */
+async function decodeAudioPeaks(url, wanted = new Set()) {
+    var _a;
+    let ctx;
+    try {
+        /**
+         * `OfflineAudioContext` FIRST, and a live `AudioContext` only as the
+         * fallback: decoding a waveform needs no audio OUTPUT, and a live context
+         * created before the user has interacted trips the browser's autoplay
+         * policy — "The AudioContext was not allowed to start. It must be resumed
+         * (or created) after a user gesture on the page", once per player. A page
+         * with 15 recordings logged it 15 times. The offline one has no output
+         * device, so the policy does not apply to it.
+         *
+         * Its arguments are placeholders: nothing is ever rendered through this
+         * context, it is only the host for `decodeAudioData`.
+         */
+        const OfflineCtx = window.OfflineAudioContext || window.webkitOfflineAudioContext;
+        const Ctx = window.AudioContext || window.webkitAudioContext;
+        if ((!OfflineCtx && !Ctx) || typeof fetch === 'undefined')
+            return null;
+        ctx = OfflineCtx ? new OfflineCtx(1, 1, 44100) : new Ctx();
+        const buf = await (await fetch(url)).arrayBuffer();
+        const audioBuf = await ctx.decodeAudioData(buf);
+        const pcm = audioBuf.getChannelData(0);
+        return { envelope: buildPeakEnvelope(pcm), exact: exactBarsFor(pcm, wanted), duration: audioBuf.duration };
+    }
+    finally {
+        // Always release the context. Chrome caps concurrent AudioContexts per
+        // document, so leaking one per failed decode would eventually stop every
+        // later player on the page from decoding at all. `close()` lives on
+        // AudioContext, not on every BaseAudioContext (an OfflineAudioContext
+        // needs no closing and may not implement it): optional call, not a cast.
+        try {
+            await ((_a = ctx === null || ctx === void 0 ? void 0 : ctx.close) === null || _a === void 0 ? void 0 : _a.call(ctx));
+        }
+        catch ( /* already closed */_b) { /* already closed */ }
+    }
+}
+/** Barras exactas para cada ancho que las instancias en espera quieren ahora mismo. */
+function exactBarsFor(pcm, wanted) {
+    const exact = new Map();
+    for (const want of wanted) {
+        const bars = want();
+        if (bars > 0 && !exact.has(bars))
+            exact.set(bars, resamplePeaks(pcm, bars));
+    }
+    return exact;
+}
+
 const coAudioPlayerCss = () => `:host{display:block;font-family:var(--co-font-family-primary)}.co-audio-player{display:flex;align-items:center;gap:var(--co-spacing-md);padding:var(--co-spacing-sm) var(--co-spacing-md);border:1px solid var(--co-semantic-border-default);border-radius:var(--co-border-radius-xs);background:var(--co-semantic-surface-secondary);min-width:180px}.co-audio-player--compact{gap:var(--co-spacing-sm2);padding:var(--co-spacing-sm2) var(--co-spacing-sm);min-width:140px}.co-audio-player__play{flex:0 0 auto;width:28px;height:28px;border:none;border-radius:50%;cursor:pointer;background:var(--co-semantic-surface-primary);color:var(--co-semantic-text-inverse);display:inline-flex;align-items:center;justify-content:center}.co-audio-player--compact .co-audio-player__play{width:24px;height:24px}.co-audio-player__play:disabled{opacity:.5;cursor:not-allowed}.co-audio-player__play:focus-visible{outline:2px solid var(--co-semantic-border-focus);outline-offset:2px}.co-audio-player__wave{flex:1;height:40px;min-width:0;cursor:pointer;display:flex;align-items:center}.co-audio-player__wave:focus-visible{outline:2px solid var(--co-semantic-border-focus);outline-offset:2px;border-radius:var(--co-border-radius-xxs)}.co-audio-player__svg{width:100%;height:100%;display:block}.co-audio-player__bar{fill:var(--co-semantic-border-field);transition:fill var(--co-motion-duration-fast)}.co-audio-player__wave:hover .co-audio-player__bar{fill:var(--co-semantic-text-muted)}.co-audio-player__bar--played{fill:var(--co-semantic-surface-primary)}.co-audio-player__time{flex:0 0 auto;font-size:var(--co-font-size-12);color:var(--co-semantic-text-muted);font-variant-numeric:tabular-nums;min-width:62px;text-align:right}.co-audio-player__speed{flex:0 0 auto;border:none;background:transparent;cursor:pointer;padding:2px 4px;color:var(--co-semantic-text-muted);font-family:var(--co-font-family-primary);font-size:var(--co-font-size-12);font-variant-numeric:tabular-nums;min-width:34px;text-align:center}.co-audio-player__speed:hover{color:var(--co-semantic-text-default)}.co-audio-player__speed:focus-visible{outline:2px solid var(--co-semantic-border-focus);outline-offset:2px;border-radius:var(--co-border-radius-xxs)}.co-audio-player__dl{flex:0 0 auto;border:none;background:transparent;cursor:pointer;padding:2px;color:var(--co-semantic-text-muted);display:inline-flex}.co-audio-player__dl:hover{color:var(--co-semantic-text-default)}.co-audio-player__dl:focus-visible{outline:2px solid var(--co-semantic-border-focus);outline-offset:2px}.co-audio-player--error .co-audio-player__wave{opacity:.5}.co-audio-player--error .co-audio-player__play{background:var(--co-color-status-error);color:var(--co-semantic-text-inverse);opacity:1}`;
 
 const CoAudioPlayer = class {
@@ -108,8 +268,15 @@ const CoAudioPlayer = class {
         this.containerWidth = 0;
         /** Current playback rate; the speed control cycles through `SPEEDS`. */
         this.playbackRate = 1;
-        // Decoded mono PCM, kept so bars can be re-resampled on resize without re-fetching.
-        this.rawChannelData = null;
+        // Envolvente acotada del decode (≤ PEAK_ENVELOPE_BINS máximos por bloque), para
+        // re-derivar las barras al redimensionar sin volver a descargar. NUNCA el PCM
+        // completo: ese pesaba ~32 MB por 3 min de audio y por instancia. La envolvente es
+        // la misma referencia que guarda el caché de módulo (compartida, no copiada).
+        this.peakEnvelope = null;
+        // Barras exactas (del PCM, calculadas dentro del decode) para los anchos que esta
+        // instancia —u otra con la misma src— tenía mientras el decode estaba en vuelo.
+        // Un ancho que no esté acá sale de la envolvente.
+        this.exactPeaks = null;
         // Length reported by the WebAudio decode; NaN when nothing has decoded (yet).
         // It is the only trustworthy duration for a container without a duration header.
         this.decodedDuration = NaN;
@@ -238,17 +405,22 @@ const CoAudioPlayer = class {
         this.resizeObserver = undefined;
     }
     onSrcChange() { this.init(); }
-    // Re-derive bars for the current width: from cached PCM if decoded, else the
+    // Re-derive bars for the current width: from the decoded envelope if any, else the
     // deterministic fallback shape. Reassign the array so Stencil re-renders.
     rebuildBars() {
-        this.peaks = this.rawChannelData
-            ? resamplePeaks(this.rawChannelData, this.effectiveBars)
+        this.peaks = this.peakEnvelope
+            ? this.decodedBars(this.effectiveBars)
             : fallbackPeaks(this.effectiveBars);
     }
+    decodedBars(bars) {
+        var _a, _b;
+        return (_b = (_a = this.exactPeaks) === null || _a === void 0 ? void 0 : _a.get(bars)) !== null && _b !== void 0 ? _b : resampleEnvelope(this.peakEnvelope, bars);
+    }
     init() {
         this.teardown();
         const token = ++this.loadToken;
-        this.rawChannelData = null;
+        this.peakEnvelope = null;
+        this.exactPeaks = null;
         this.decodedDuration = NaN;
         this.peaks = fallbackPeaks(this.effectiveBars); // draw immediately; refine with real peaks
         this.currentTime = 0;
@@ -287,56 +459,36 @@ const CoAudioPlayer = class {
         }
         this.isPlaying = false;
     }
+    /**
+     * Picos + duración del decode, vía el caché de módulo (`co-audio-player.peaks-cache`):
+     * dos instancias con la misma `src` comparten UNA descarga y UN decode, y lo que
+     * vuelve es la envolvente acotada, no el PCM.
+     */
     async extractPeaks(url, token) {
-        var _a;
-        let ctx;
         try {
-            /**
-             * `OfflineAudioContext` FIRST, and a live `AudioContext` only as the
-             * fallback: decoding a waveform needs no audio OUTPUT, and a live context
-             * created before the user has interacted trips the browser's autoplay
-             * policy — "The AudioContext was not allowed to start. It must be resumed
-             * (or created) after a user gesture on the page", once per player. A page
-             * with 15 recordings logged it 15 times. The offline one has no output
-             * device, so the policy does not apply to it.
-             *
-             * Its arguments are placeholders: nothing is ever rendered through this
-             * context, it is only the host for `decodeAudioData`.
-             */
-            const OfflineCtx = window.OfflineAudioContext || window.webkitOfflineAudioContext;
-            const Ctx = window.AudioContext || window.webkitAudioContext;
-            if ((!OfflineCtx && !Ctx) || typeof fetch === 'undefined')
-                return; // keep fallback
-            ctx = OfflineCtx ? new OfflineCtx(1, 1, 44100) : new Ctx();
-            const buf = await (await fetch(url)).arrayBuffer();
-            const audioBuf = await ctx.decodeAudioData(buf);
+            // El ancho se consulta al TERMINAR el decode (no ahora: acá todavía no se midió);
+            // 0 si esta carga ya no es la vigente, para no pagar barras que nadie pinta.
+            const res = await loadAudioPeaks(url, () => (token === this.loadToken ? this.effectiveBars : 0));
             if (token !== this.loadToken)
                 return; // a newer src superseded this decode
-            this.rawChannelData = audioBuf.getChannelData(0);
-            this.decodedDuration = audioBuf.duration;
-            this.peaks = resamplePeaks(this.rawChannelData, this.effectiveBars);
+            if (!res)
+                return; // no WebAudio/fetch here: keep the fallback
+            this.peakEnvelope = res.envelope;
+            this.exactPeaks = res.exact;
+            this.decodedDuration = res.duration;
+            this.peaks = this.decodedBars(this.effectiveBars);
         }
-        catch (_b) {
+        catch (_a) {
             if (token !== this.loadToken)
                 return;
             // Undecodable (codec WebAudio can't handle, CORS, network): keep the
             // deterministic fallback wave and let <audio> own the duration — playback,
             // seek and the time readout all still work, or degrade to `--:--`.
-            this.rawChannelData = null;
+            this.peakEnvelope = null;
+            this.exactPeaks = null;
             this.decodedDuration = NaN;
             this.peaks = fallbackPeaks(this.effectiveBars); // stays functional
         }
-        finally {
-            // Always release the context. Chrome caps concurrent AudioContexts per
-            // document, so leaking one per failed decode would eventually stop every
-            // later player on the page from decoding at all. `close()` lives on
-            // AudioContext, not on every BaseAudioContext (an OfflineAudioContext
-            // needs no closing and may not implement it): optional call, not a cast.
-            try {
-                await ((_a = ctx === null || ctx === void 0 ? void 0 : ctx.close) === null || _a === void 0 ? void 0 : _a.call(ctx));
-            }
-            catch ( /* already closed */_c) { /* already closed */ }
-        }
         if (token === this.loadToken)
             this.syncDuration();
     }
@@ -417,13 +569,13 @@ const CoAudioPlayer = class {
         // below `aria-valuenow` the moment playback advances. ARIA 1.2 makes valuemax
         // optional for `slider`, so leaving it off while unknown is well-formed.
         const ariaMax = total ? Math.floor(total) : undefined;
-        const bar = (hFrac, i, played = false) => (h("rect", { key: '4b294190b3be5e7cf15282d43e7e51164a3dda4c', x: i * UNIT, y: H / 2 - (hFrac * H) / 2, width: W, height: Math.max(hFrac * H, 2), rx: R, class: { 'co-audio-player__bar': true, 'co-audio-player__bar--played': played } }));
-        return (h("div", { key: '0758a438c4a71e822de94f8b41219945f62ae62d', class: {
+        const bar = (hFrac, i, played = false) => (h("rect", { key: 'a3d5a225a904e22ba9905ef8198fa7e1b14e0e2f', x: i * UNIT, y: H / 2 - (hFrac * H) / 2, width: W, height: Math.max(hFrac * H, 2), rx: R, class: { 'co-audio-player__bar': true, 'co-audio-player__bar--played': played } }));
+        return (h("div", { key: 'afbbf524713a1146653e69928ee21e263202315f', class: {
                 'co-audio-player': true,
                 'co-audio-player--compact': this.compact,
                 'co-audio-player--error': this.hasError,
                 'co-audio-player--playing': this.isPlaying,
-            }, part: "player" }, h("button", { key: '4c4161e7ba7344a9c6a32dcc8fd92c300b750d95', type: "button", class: "co-audio-player__play", part: "play", "aria-label": this.hasError ? 'Audio no disponible' : this.isPlaying ? 'Pausar' : 'Reproducir', "aria-busy": this.isLoading ? 'true' : 'false', disabled: this.hasError || !this.src, onClick: this.toggle }, h("co-icon", { key: 'ea749ee1cf627a49e3859029ca274170c8d69c63', name: this.hasError ? 'warning-circle' : this.isPlaying ? 'pause' : 'play', weight: "fill", size: this.compact ? 12 : 14 })), h("div", { key: 'f39bf8bf114860a672979fa53287672dccea1b7f', class: "co-audio-player__wave", part: "wave", role: "slider", tabindex: "0", "aria-label": "Progreso de reproducci\u00F3n", "aria-valuemin": 0, "aria-valuemax": ariaMax, "aria-valuenow": Math.floor(this.currentTime), ref: (el) => (this.waveEl = el), onClick: (e) => this.seekAt(e.clientX), onKeyDown: this.onWaveKey }, h("svg", { key: '2145f303271ca676988999b5ea7d76ab384c5e2d', class: "co-audio-player__svg", viewBox: `0 0 ${vbW} ${H}`, preserveAspectRatio: "none", "aria-hidden": "true" }, this.peaks.map((hFrac, i) => bar(hFrac, i)), h("clipPath", { key: '6014c9f96f5df60086265a5e01344be80ebff741', id: "co-ap-clip" }, h("rect", { key: '5857fa3098fc0eb9df58b643c2b44316cf819ae8', x: "0", y: "0", width: (pct / 100) * vbW, height: H })), h("g", { key: '241608ddfdb863ba5b18444ed2bffb39e72abeb5', "clip-path": "url(#co-ap-clip)" }, this.peaks.map((hFrac, i) => bar(hFrac, i, true))))), h("span", { key: '18f190b8b23f8939da5dd2c230214d42a5b330c1', class: "co-audio-player__time", part: "time" }, formatTime(this.currentTime), " / ", formatTime(this.duration)), !this.compact && (h("button", { key: '4a29cae938ab347997bc76e0cfe5621b402730f7', type: "button", class: "co-audio-player__speed", part: "speed", "aria-label": `Velocidad de reproducción ${this.playbackRate}x`, onClick: this.cycleSpeed }, this.playbackRate, "x")), !this.compact && !this.noDownload && (h("button", { key: 'c451449e629584bc3937b27b31b1124e510af91e', type: "button", class: "co-audio-player__dl", part: "download", "aria-label": "Descargar", onClick: () => this.download() }, h("co-icon", { key: 'f4d014129829ab57ddae0d3e32b1e0930f1bc288', name: "download-simple", size: 14 })))));
+            }, part: "player" }, h("button", { key: '5918385fbd8fb6fad4795e1a75eed5d073e0654c', type: "button", class: "co-audio-player__play", part: "play", "aria-label": this.hasError ? 'Audio no disponible' : this.isPlaying ? 'Pausar' : 'Reproducir', "aria-busy": this.isLoading ? 'true' : 'false', disabled: this.hasError || !this.src, onClick: this.toggle }, h("co-icon", { key: 'e7a566257df253914593712bd20029bb8f1bcdfd', name: this.hasError ? 'warning-circle' : this.isPlaying ? 'pause' : 'play', weight: "fill", size: this.compact ? 12 : 14 })), h("div", { key: '70488015726d0c966fa3e738d9f2893d71b99ebf', class: "co-audio-player__wave", part: "wave", role: "slider", tabindex: "0", "aria-label": "Progreso de reproducci\u00F3n", "aria-valuemin": 0, "aria-valuemax": ariaMax, "aria-valuenow": Math.floor(this.currentTime), ref: (el) => (this.waveEl = el), onClick: (e) => this.seekAt(e.clientX), onKeyDown: this.onWaveKey }, h("svg", { key: '8c70e4f74537e5f8ab6f66bc0da464a72507e81c', class: "co-audio-player__svg", viewBox: `0 0 ${vbW} ${H}`, preserveAspectRatio: "none", "aria-hidden": "true" }, this.peaks.map((hFrac, i) => bar(hFrac, i)), h("clipPath", { key: 'f0d37d76b3d6ab09dbd09582c8657b3fe7cb8c4c', id: "co-ap-clip" }, h("rect", { key: '436de0ce10f98c868760c76505d134f3db2dbb54', x: "0", y: "0", width: (pct / 100) * vbW, height: H })), h("g", { key: '939a1a8851d6e41b4d3c37d7201f87a6403830bb', "clip-path": "url(#co-ap-clip)" }, this.peaks.map((hFrac, i) => bar(hFrac, i, true))))), h("span", { key: 'bd57bdd97a780864aa633ec5174d4f733799a278', class: "co-audio-player__time", part: "time" }, formatTime(this.currentTime), " / ", formatTime(this.duration)), !this.compact && (h("button", { key: 'd1f559546da0b0f97009afca79fe922ce569e67f', type: "button", class: "co-audio-player__speed", part: "speed", "aria-label": `Velocidad de reproducción ${this.playbackRate}x`, onClick: this.cycleSpeed }, this.playbackRate, "x")), !this.compact && !this.noDownload && (h("button", { key: 'a1503b85bb2edf02566dcad9b8e83b1fea20b159', type: "button", class: "co-audio-player__dl", part: "download", "aria-label": "Descargar", onClick: () => this.download() }, h("co-icon", { key: 'dc96b8afdb8036e76a0c515d76c625460f4fc44d', name: "download-simple", size: 14 })))));
     }
     static get watchers() { return {
         "src": [{

package/dist/esm/index-DJkaRtbb.js

@@ -383,10 +383,6 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
                     return import(
                       /* webpackMode: "lazy" */
                       './co-loader.entry.js').then(processMod, consoleError);
-                case 'co-audio-player':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './co-audio-player.entry.js').then(processMod, consoleError);
                 case 'co-bottom-sheet':
                     return import(
                       /* webpackMode: "lazy" */
@@ -455,6 +451,10 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
                     return import(
                       /* webpackMode: "lazy" */
                       './co-icon.entry.js').then(processMod, consoleError);
+                case 'co-audio-player':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './co-audio-player.entry.js').then(processMod, consoleError);
                 case 'co-color-picker':
                     return import(
                       /* webpackMode: "lazy" */

package/dist/types/components/co-audio-player/co-audio-player.d.ts

@@ -60,7 +60,8 @@ export declare class CoAudioPlayer {
     }>;
     private audio?;
     private waveEl?;
-    private rawChannelData;
+    private peakEnvelope;
+    private exactPeaks;
     private decodedDuration;
     private loadToken;
     private resizeObserver?;
@@ -77,8 +78,14 @@ export declare class CoAudioPlayer {
     disconnectedCallback(): void;
     onSrcChange(): void;
     private rebuildBars;
+    private decodedBars;
     private init;
     private teardown;
+    /**
+     * Picos + duración del decode, vía el caché de módulo (`co-audio-player.peaks-cache`):
+     * dos instancias con la misma `src` comparten UNA descarga y UN decode, y lo que
+     * vuelve es la envolvente acotada, no el PCM.
+     */
     private extractPeaks;
     /** Re-derive the shown duration from whichever source knows it. Called from both
      *  `loadedmetadata` and the end of the decode, because either can land first. */

package/dist/types/components/co-audio-player/co-audio-player.peaks-cache.d.ts

@@ -0,0 +1,58 @@
+import { type PeakEnvelope } from './co-audio-player.utils';
+/**
+ * Caché de picos de `co-audio-player`, a nivel de MÓDULO (compartido por todas las
+ * instancias del documento).
+ *
+ * Por qué: la misma grabación suele estar montada dos veces (la tarjeta de la
+ * llamada y su detalle) y cada instancia descargaba y decodificaba el audio
+ * completo por su cuenta. Acá se guarda solo lo que la onda necesita —la
+ * envolvente acotada y la duración decodificada— y los pedidos simultáneos de la
+ * misma URL comparten una sola promesa.
+ *
+ * Fidelidad de la onda: mientras el PCM existe (dentro del decode) se calculan las
+ * barras EXACTAS —`resamplePeaks`, lo mismo que antes— para el ancho vigente de cada
+ * instancia que está esperando ese decode; esas se pintan idénticas a como se
+ * pintaban. Solo un ancho que aparece después (resize, u otra instancia con el caché
+ * ya caliente) sale de la envolvente (`resampleEnvelope`, alta resolución).
+ *
+ * Key = la URL TAL CUAL. No se normaliza: una URL firmada (S3 `?X-Amz-Signature=…`)
+ * que se renueva es otra entrada y vuelve a descargar. Es un límite aceptado: una
+ * normalización propia (quitar la query) podría confundir dos recursos distintos.
+ */
+export interface AudioPeaks {
+    envelope: PeakEnvelope;
+    /** Barras exactas (del PCM) por cantidad de barras, para los anchos pedidos
+     *  mientras el decode estaba en vuelo. Unas pocas entradas de cientos de valores. */
+    exact: ReadonlyMap<number, number[]>;
+    /** `AudioBuffer.duration` (s): la única duración fiable de un blob sin cabecera. */
+    duration: number;
+}
+/** Cantidad de barras que una instancia quiere AHORA; se consulta al terminar el
+ *  decode (no al pedirlo: el ancho se mide después de `componentWillLoad`). Un valor
+ *  no positivo = ya no le interesa (src cambiada, desmontada). */
+export type BarsWanted = () => number;
+/** `null` = el entorno no puede decodificar (sin WebAudio o sin fetch): no es un error.
+ *  `wanted` es un conjunto VIVO: puede crecer mientras la carga está en vuelo. */
+export type PeaksLoader = (url: string, wanted: ReadonlySet<BarsWanted>) => Promise<AudioPeaks | null>;
+/** Tope de entradas. Cada una pesa ≤ 256 KB (`PEAK_ENVELOPE_BINS` Float32) más unas
+ *  pocas listas de barras exactas, así que el caché lleno queda en ~4 MB. Una
+ *  instancia montada conserva SU envolvente aunque la entrada se desaloje (es la
+ *  misma referencia, no una copia). */
+export declare const PEAKS_CACHE_MAX = 16;
+/**
+ * Picos + duración de `url`: del caché si están, uniéndose a la carga en vuelo si
+ * otra instancia ya la pidió, o cargándolos. Solo se cachea un resultado real: un
+ * error (CORS, red, códec) o un `null` se devuelven tal cual y el próximo pedido
+ * reintenta.
+ */
+export declare function loadAudioPeaks(url: string, wantBars?: BarsWanted, loader?: PeaksLoader): Promise<AudioPeaks | null>;
+/** Vacía el caché (tests; y un host que necesite liberar memoria a mano). */
+export declare function clearAudioPeaksCache(): void;
+/**
+ * Descarga + decode con Web Audio, reducido a la envolvente. El `AudioBuffer`
+ * (y con él el PCM completo) no sale de esta función: queda sin referencias
+ * apenas se calcula la envolvente.
+ */
+export declare function decodeAudioPeaks(url: string, wanted?: ReadonlySet<BarsWanted>): Promise<AudioPeaks | null>;
+/** Barras exactas para cada ancho que las instancias en espera quieren ahora mismo. */
+export declare function exactBarsFor(pcm: Float32Array | number[], wanted: ReadonlySet<BarsWanted>): Map<number, number[]>;

package/dist/types/components/co-audio-player/co-audio-player.utils.d.ts

@@ -19,6 +19,39 @@ export declare function formatTime(seconds: number): string;
 export declare function resolveDuration(fromAudio: number, fromDecode: number): number;
 /** Downsample raw PCM to `bars` peak heights, each normalized to a 0..1 fraction. */
 export declare function resamplePeaks(channelData: Float32Array | number[], bars: number): number[];
+/**
+ * Resolución de la envolvente que se retiene por grabación, en bloques.
+ *
+ * Las barras EXACTAS del ancho vigente se calculan del PCM antes de soltarlo (ver
+ * `co-audio-player.peaks-cache`); la envolvente solo sirve los anchos que aparecen
+ * DESPUÉS (resize, o una segunda instancia que llega con el caché ya caliente). El
+ * reproductor deriva las barras del ancho (`floor(ancho / barDensity)`, ~853 a
+ * 2560 px), así que la envolvente tiene que ir muy por encima de eso: 65 536 bloques
+ * = ≥ 76 bloques por barra hasta 2560 px, y pesan 256 KB (Float32) frente a ~32 MB
+ * del PCM de 3 min a 44,1 kHz. Medido contra el exacto con PCM sintético de 3 min:
+ * desvío máx. ≈ 1 px de 40 en las barras que difieren (≈ 0,8 px con ruido blanco).
+ */
+export declare const PEAK_ENVELOPE_BINS = 65536;
+/** Máximos absolutos por bloque de `blockSize` muestras contiguas: lo único que se
+ *  retiene de un decode. `length` es la cantidad de muestras del PCM original, que
+ *  `resampleEnvelope` necesita para reproducir el paso de `resamplePeaks`. */
+export interface PeakEnvelope {
+    peaks: Float32Array;
+    blockSize: number;
+    length: number;
+}
+/** PCM → envolvente de a lo sumo `maxBins` bloques. Con `length ≤ maxBins` el bloque
+ *  es de 1 muestra y la envolvente ES |PCM| (sin pérdida). */
+export declare function buildPeakEnvelope(channelData: Float32Array | number[], maxBins?: number): PeakEnvelope;
+/**
+ * Las mismas barras que `resamplePeaks(pcm, bars)`, calculadas desde la envolvente:
+ * mismo paso (`floor(length / bars)` muestras), mismo recorte de la cola y misma
+ * fórmula de altura. Cada barra toma el máximo de los bloques que TOCA su rango de
+ * muestras, así que el resultado es IDÉNTICO cuando `blockSize` es 1 o divide el
+ * paso, y en el caso general solo puede sumar el pico de un bloque parcial en cada
+ * borde (nunca queda por debajo del exacto).
+ */
+export declare function resampleEnvelope(env: PeakEnvelope, bars: number): number[];
 /** Deterministic pseudo-waveform (stable render + testable — no Math.random). */
 export declare function fallbackPeaks(bars: number): number[];
 /** Clamped 0..1 position of a click within a track rect. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prolibu-suite/cobalt-core",
-  "version": "0.11.4",
+  "version": "0.11.5",
   "description": "Cobalt Design System — Framework-agnostic Web Components built with Stencil",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -51,9 +51,9 @@
     "dompurify": "^3.2.6",
     "overlayscrollbars": "^2.16.0",
     "@prolibu-suite/cobalt-date-utils": "0.1.2",
-    "@prolibu-suite/cobalt-calendar-utils": "0.1.1",
+    "@prolibu-suite/cobalt-tokens": "0.6.0",
     "@prolibu-suite/cobalt-rich-text": "0.2.1",
-    "@prolibu-suite/cobalt-tokens": "0.6.0"
+    "@prolibu-suite/cobalt-calendar-utils": "0.1.1"
   },
   "devDependencies": {
     "@stencil/core": "^4.43.4",

package/dist/cobalt/p-358a6c2a.entry.js

@@ -1 +0,0 @@
-import{r as t,c as i,h as a}from"./p-DJkaRtbb.js";function s(t){if(!Number.isFinite(t)||t<0)return"--:--";const i=Math.floor(t);return`${Math.floor(i/60)}:${(i%60).toString().padStart(2,"0")}`}function e(t,i){const a=t.length;if(!a||i<=0)return[];const s=Math.max(1,Math.floor(a/i)),e=[];for(let o=0;o<i;o++){let i=0;const r=o*s;for(let e=r;e<r+s&&e<a;e++){const a=Math.abs(t[e]);a>i&&(i=a)}e.push(.12+.88*i)}return e}function o(t){if(t<=0)return[];const i=[];for(let a=0;a<t;a++){const s=.6*Math.sin(a/Math.max(1,t)*Math.PI)+.3,e=.75+.25*Math.abs(Math.sin(1.7*a));i.push(.12+s*e*.88)}return i}const r=class{constructor(a){t(this,a),this.coPlay=i(this,"coPlay",7),this.coPause=i(this,"coPause",7),this.coEnded=i(this,"coEnded",7),this.coError=i(this,"coError",7),this.coTimeUpdate=i(this,"coTimeUpdate",3),this.compact=!1,this.bars=64,this.barDensity=3,this.preload="metadata",this.downloadFilename="audio",this.noDownload=!1,this.isPlaying=!1,this.isLoading=!1,this.hasError=!1,this.currentTime=0,this.duration=NaN,this.peaks=[],this.containerWidth=0,this.playbackRate=1,this.rawChannelData=null,this.decodedDuration=NaN,this.loadToken=0,this.onMeta=()=>{this.syncDuration(),this.applyPendingSeek()},this.pendingSeek=null,this.onCanPlay=()=>{this.isLoading=!1,this.applyPendingSeek()},this.onWaiting=()=>{this.isLoading=!0},this.onTime=()=>{var t;this.currentTime=(null===(t=this.audio)||void 0===t?void 0:t.currentTime)||0,this.coTimeUpdate.emit({currentTime:this.currentTime,duration:this.knownDuration})},this.onEnded=()=>{this.isPlaying=!1,this.currentTime=0,this.coEnded.emit()},this.onErr=t=>{this.isLoading=!1,this.hasError=!0,this.coError.emit(t)},this.toggle=()=>{this.audio&&!this.hasError&&(this.isPlaying?(this.audio.pause(),this.isPlaying=!1,this.coPause.emit()):this.audio.play().then((()=>{this.isPlaying=!0,this.coPlay.emit()})).catch((()=>{})))},this.SPEEDS=[1,1.5,2,.5],this.cycleSpeed=()=>{const t=this.SPEEDS.indexOf(this.playbackRate);this.playbackRate=this.SPEEDS[(t+1)%this.SPEEDS.length],this.audio&&(this.audio.playbackRate=this.playbackRate)},this.seekAt=t=>{const i=this.knownDuration;if(!this.audio||!this.waveEl||!i)return;const a=function(t,i){return i.width?Math.max(0,Math.min(1,(t-i.left)/i.width)):0}(t,this.waveEl.getBoundingClientRect());this.audio.currentTime=a*i,this.currentTime=this.audio.currentTime},this.onWaveKey=t=>{if(" "===t.key||"Enter"===t.key)return t.preventDefault(),void this.toggle();if(!this.audio)return;const i=this.knownDuration,a=this.audio.currentTime;if("ArrowRight"===t.key)this.audio.currentTime=i?Math.min(i,a+5):a+5;else{if("ArrowLeft"!==t.key)return;this.audio.currentTime=Math.max(0,a-5)}this.currentTime=this.audio.currentTime}}get knownDuration(){return Number.isFinite(this.duration)&&this.duration>0?this.duration:0}get effectiveBars(){return this.containerWidth>0?Math.max(24,Math.floor(this.containerWidth/this.barDensity)):this.bars}componentWillLoad(){this.init()}componentDidLoad(){if("undefined"==typeof ResizeObserver||!this.waveEl)return;this.resizeObserver=new ResizeObserver((t=>{var i;for(const a of t){const t=(null===(i=a.contentRect)||void 0===i?void 0:i.width)||a.target.clientWidth||0;t>2&&Math.abs(t-this.containerWidth)>2&&(this.containerWidth=t,this.rebuildBars())}})),this.resizeObserver.observe(this.waveEl);const t=this.waveEl.clientWidth||0;t>2&&(this.containerWidth=t,this.rebuildBars())}disconnectedCallback(){var t;this.loadToken++,this.teardown(),null===(t=this.resizeObserver)||void 0===t||t.disconnect(),this.resizeObserver=void 0}onSrcChange(){this.init()}rebuildBars(){this.peaks=this.rawChannelData?e(this.rawChannelData,this.effectiveBars):o(this.effectiveBars)}init(){this.teardown();const t=++this.loadToken;if(this.rawChannelData=null,this.decodedDuration=NaN,this.peaks=o(this.effectiveBars),this.currentTime=0,this.duration=NaN,this.playbackRate=1,this.hasError=!1,!this.src)return;if(this.isLoading=!0,this.extractPeaks(this.src,t),"undefined"==typeof Audio)return;const i=new Audio;i.preload=this.preload,i.crossOrigin="anonymous",i.src=this.src,i.addEventListener("loadedmetadata",this.onMeta),i.addEventListener("timeupdate",this.onTime),i.addEventListener("ended",this.onEnded),i.addEventListener("error",this.onErr),i.addEventListener("canplay",this.onCanPlay),i.addEventListener("waiting",this.onWaiting),this.audio=i}teardown(){this.audio&&(this.audio.pause(),this.audio.removeEventListener("loadedmetadata",this.onMeta),this.audio.removeEventListener("timeupdate",this.onTime),this.audio.removeEventListener("ended",this.onEnded),this.audio.removeEventListener("error",this.onErr),this.audio.removeEventListener("canplay",this.onCanPlay),this.audio.removeEventListener("waiting",this.onWaiting),this.audio.src="",this.audio=void 0),this.isPlaying=!1}async extractPeaks(t,i){var a;let s;try{const a=window.OfflineAudioContext||window.webkitOfflineAudioContext,o=window.AudioContext||window.webkitAudioContext;if(!a&&!o||"undefined"==typeof fetch)return;s=a?new a(1,1,44100):new o;const r=await(await fetch(t)).arrayBuffer(),h=await s.decodeAudioData(r);if(i!==this.loadToken)return;this.rawChannelData=h.getChannelData(0),this.decodedDuration=h.duration,this.peaks=e(this.rawChannelData,this.effectiveBars)}catch(t){if(i!==this.loadToken)return;this.rawChannelData=null,this.decodedDuration=NaN,this.peaks=o(this.effectiveBars)}finally{try{await(null===(a=null==s?void 0:s.close)||void 0===a?void 0:a.call(s))}catch(t){}}i===this.loadToken&&this.syncDuration()}syncDuration(){var t,i;const a=(s=null!==(i=null===(t=this.audio)||void 0===t?void 0:t.duration)&&void 0!==i?i:NaN,e=this.decodedDuration,Number.isFinite(s)&&s>0?s:Number.isFinite(e)&&e>0?e:NaN);var s,e;Object.is(a,this.duration)||(this.duration=a)}applyPendingSeek(){if(null==this.pendingSeek||!this.audio)return;const t=this.pendingSeek;this.pendingSeek=null,this.audio.currentTime=t,this.currentTime=this.audio.currentTime,this.coTimeUpdate.emit({currentTime:this.currentTime,duration:this.knownDuration})}async seek(t){var i;if(!this.audio||!Number.isFinite(t))return;const a=this.knownDuration,s=a?Math.max(0,Math.min(a,t)):Math.max(0,t);this.audio.currentTime=s,Math.abs((null!==(i=this.audio.currentTime)&&void 0!==i?i:0)-s)>.05&&(this.pendingSeek=s),this.currentTime=s,this.coTimeUpdate.emit({currentTime:this.currentTime,duration:a})}async play(){if(this.audio&&!this.isPlaying&&!this.hasError)try{await this.audio.play(),this.isPlaying=!0,this.coPlay.emit()}catch(t){}}async download(){if(this.src&&"undefined"!=typeof fetch)try{const t=await(await fetch(this.src)).blob(),i=URL.createObjectURL(t),a=document.createElement("a");a.href=i,a.download=this.downloadFilename,document.body.appendChild(a),a.click(),a.remove(),URL.revokeObjectURL(i)}catch(t){}}render(){const t=Math.max(1,3*this.peaks.length),i=this.knownDuration,e=i?this.currentTime/i*100:0,o=i?Math.floor(i):void 0,r=(t,i,s=!1)=>a("rect",{key:"4b294190b3be5e7cf15282d43e7e51164a3dda4c",x:3*i,y:20-40*t/2,width:1.8,height:Math.max(40*t,2),rx:.6,class:{"co-audio-player__bar":!0,"co-audio-player__bar--played":s}});return a("div",{key:"0758a438c4a71e822de94f8b41219945f62ae62d",class:{"co-audio-player":!0,"co-audio-player--compact":this.compact,"co-audio-player--error":this.hasError,"co-audio-player--playing":this.isPlaying},part:"player"},a("button",{key:"4c4161e7ba7344a9c6a32dcc8fd92c300b750d95",type:"button",class:"co-audio-player__play",part:"play","aria-label":this.hasError?"Audio no disponible":this.isPlaying?"Pausar":"Reproducir","aria-busy":this.isLoading?"true":"false",disabled:this.hasError||!this.src,onClick:this.toggle},a("co-icon",{key:"ea749ee1cf627a49e3859029ca274170c8d69c63",name:this.hasError?"warning-circle":this.isPlaying?"pause":"play",weight:"fill",size:this.compact?12:14})),a("div",{key:"f39bf8bf114860a672979fa53287672dccea1b7f",class:"co-audio-player__wave",part:"wave",role:"slider",tabindex:"0","aria-label":"Progreso de reproducción","aria-valuemin":0,"aria-valuemax":o,"aria-valuenow":Math.floor(this.currentTime),ref:t=>this.waveEl=t,onClick:t=>this.seekAt(t.clientX),onKeyDown:this.onWaveKey},a("svg",{key:"2145f303271ca676988999b5ea7d76ab384c5e2d",class:"co-audio-player__svg",viewBox:`0 0 ${t} 40`,preserveAspectRatio:"none","aria-hidden":"true"},this.peaks.map(((t,i)=>r(t,i))),a("clipPath",{key:"6014c9f96f5df60086265a5e01344be80ebff741",id:"co-ap-clip"},a("rect",{key:"5857fa3098fc0eb9df58b643c2b44316cf819ae8",x:"0",y:"0",width:e/100*t,height:40})),a("g",{key:"241608ddfdb863ba5b18444ed2bffb39e72abeb5","clip-path":"url(#co-ap-clip)"},this.peaks.map(((t,i)=>r(t,i,!0)))))),a("span",{key:"18f190b8b23f8939da5dd2c230214d42a5b330c1",class:"co-audio-player__time",part:"time"},s(this.currentTime)," / ",s(this.duration)),!this.compact&&a("button",{key:"4a29cae938ab347997bc76e0cfe5621b402730f7",type:"button",class:"co-audio-player__speed",part:"speed","aria-label":`Velocidad de reproducción ${this.playbackRate}x`,onClick:this.cycleSpeed},this.playbackRate,"x"),!this.compact&&!this.noDownload&&a("button",{key:"c451449e629584bc3937b27b31b1124e510af91e",type:"button",class:"co-audio-player__dl",part:"download","aria-label":"Descargar",onClick:()=>this.download()},a("co-icon",{key:"f4d014129829ab57ddae0d3e32b1e0930f1bc288",name:"download-simple",size:14})))}static get watchers(){return{src:[{onSrcChange:0}]}}};r.style=":host{display:block;font-family:var(--co-font-family-primary)}.co-audio-player{display:flex;align-items:center;gap:var(--co-spacing-md);padding:var(--co-spacing-sm) var(--co-spacing-md);border:1px solid var(--co-semantic-border-default);border-radius:var(--co-border-radius-xs);background:var(--co-semantic-surface-secondary);min-width:180px}.co-audio-player--compact{gap:var(--co-spacing-sm2);padding:var(--co-spacing-sm2) var(--co-spacing-sm);min-width:140px}.co-audio-player__play{flex:0 0 auto;width:28px;height:28px;border:none;border-radius:50%;cursor:pointer;background:var(--co-semantic-surface-primary);color:var(--co-semantic-text-inverse);display:inline-flex;align-items:center;justify-content:center}.co-audio-player--compact .co-audio-player__play{width:24px;height:24px}.co-audio-player__play:disabled{opacity:.5;cursor:not-allowed}.co-audio-player__play:focus-visible{outline:2px solid var(--co-semantic-border-focus);outline-offset:2px}.co-audio-player__wave{flex:1;height:40px;min-width:0;cursor:pointer;display:flex;align-items:center}.co-audio-player__wave:focus-visible{outline:2px solid var(--co-semantic-border-focus);outline-offset:2px;border-radius:var(--co-border-radius-xxs)}.co-audio-player__svg{width:100%;height:100%;display:block}.co-audio-player__bar{fill:var(--co-semantic-border-field);transition:fill var(--co-motion-duration-fast)}.co-audio-player__wave:hover .co-audio-player__bar{fill:var(--co-semantic-text-muted)}.co-audio-player__bar--played{fill:var(--co-semantic-surface-primary)}.co-audio-player__time{flex:0 0 auto;font-size:var(--co-font-size-12);color:var(--co-semantic-text-muted);font-variant-numeric:tabular-nums;min-width:62px;text-align:right}.co-audio-player__speed{flex:0 0 auto;border:none;background:transparent;cursor:pointer;padding:2px 4px;color:var(--co-semantic-text-muted);font-family:var(--co-font-family-primary);font-size:var(--co-font-size-12);font-variant-numeric:tabular-nums;min-width:34px;text-align:center}.co-audio-player__speed:hover{color:var(--co-semantic-text-default)}.co-audio-player__speed:focus-visible{outline:2px solid var(--co-semantic-border-focus);outline-offset:2px;border-radius:var(--co-border-radius-xxs)}.co-audio-player__dl{flex:0 0 auto;border:none;background:transparent;cursor:pointer;padding:2px;color:var(--co-semantic-text-muted);display:inline-flex}.co-audio-player__dl:hover{color:var(--co-semantic-text-default)}.co-audio-player__dl:focus-visible{outline:2px solid var(--co-semantic-border-focus);outline-offset:2px}.co-audio-player--error .co-audio-player__wave{opacity:.5}.co-audio-player--error .co-audio-player__play{background:var(--co-color-status-error);color:var(--co-semantic-text-inverse);opacity:1}";export{r as co_audio_player}