@supersoniks/concorde 4.9.98-visual-stack.0 → 5.0.0

package/dist/js/core/components/functional/shader/shader.js

@@ -1,1642 +0,0 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { css, html, LitElement } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
-import HTML from "@supersoniks/concorde/core/utils/HTML";
-import { revokeMediaUrls, toMediaUrl, mediaElementKey, lookupLiveElement } from "@supersoniks/concorde/core/utils/mediaRef";
-import { PublisherManager } from "@supersoniks/concorde/utils";
-import { parseChannelSource, ShaderToyRuntime, } from "./gl-runtime";
-import { ShaderCompileError, findPeaks, meanRgba, parseExtractPass, parseHoverParam, roiToPixels, } from "./types";
-const tagName = "sonic-shader";
-const MAX_PATCH_PX = 128;
-/**
- * Champs méta publiés vers le out-dataProvider.
- * `param0…3` sont exclus du gate « consommateur » : un `sonic-input name="param0"`
- * ne doit pas activer la publication (sinon write-back → reset des champs form).
- */
-const OUT_META_KEYS = [
-    "time",
-    "frame",
-    "mouseX",
-    "mouseY",
-    "hovering",
-];
-const OUT_PARAM_KEYS = ["param0", "param1", "param2", "param3"];
-/** Champs canaux lisibles depuis dataProvider (string | SonicMediaRef). */
-const CHANNEL_FORM_KEYS = [
-    "channel0",
-    "channel1",
-    "channel2",
-    "channel3",
-    "imageCh0",
-    "imageCh1",
-    "imageCh2",
-    "imageCh3",
-    "bufferACh0",
-    "bufferACh1",
-    "bufferACh2",
-    "bufferACh3",
-    "bufferBCh0",
-    "bufferBCh1",
-    "bufferBCh2",
-    "bufferBCh3",
-    "bufferCCh0",
-    "bufferCCh1",
-    "bufferCCh2",
-    "bufferCCh3",
-    "bufferDCh0",
-    "bufferDCh1",
-    "bufferDCh2",
-    "bufferDCh3",
-];
-/** Champs sample (coûteux : readPixels). */
-const OUT_SAMPLE_KEYS = [
-    "sampleR",
-    "sampleG",
-    "sampleB",
-    "sampleA",
-    "sampleLuma",
-];
-const EXTRACT_OUT_KEYS = ["extracts", "extractCount", "extractSeq"];
-function prefersReducedMotion() {
-    return (typeof matchMedia === "function" &&
-        matchMedia("(prefers-reduced-motion: reduce)").matches);
-}
-function toNum(v, fallback) {
-    if (typeof v === "number" && Number.isFinite(v))
-        return v;
-    if (typeof v === "string" && v.trim() !== "") {
-        const n = Number(v);
-        if (Number.isFinite(n))
-            return n;
-    }
-    return fallback;
-}
-/** Valeur canal depuis DP : string (url, buffer-a, #id) | MediaRef → url | { element }. */
-function channelFormValue(value) {
-    if (value === null || value === "")
-        return "";
-    if (typeof value === "string")
-        return value.trim();
-    const url = toMediaUrl(value);
-    if (url)
-        return url;
-    if (value && typeof value === "object") {
-        const el = value.element;
-        const key = mediaElementKey(el);
-        if (key)
-            return key;
-        return undefined;
-    }
-    return "";
-}
-/** Exposé pour tests. */
-export { channelFormValue };
-function parseRois(value) {
-    if (!Array.isArray(value))
-        return [];
-    const out = [];
-    for (const raw of value) {
-        if (!raw || typeof raw !== "object")
-            continue;
-        const o = raw;
-        const x = toNum(o.x, NaN);
-        const y = toNum(o.y, NaN);
-        if (!Number.isFinite(x) || !Number.isFinite(y))
-            continue;
-        const roi = { x, y, source: "manual" };
-        if (typeof o.id === "string" && o.id)
-            roi.id = o.id;
-        if ("w" in o)
-            roi.w = toNum(o.w, 0);
-        if ("h" in o)
-            roi.h = toNum(o.h, 0);
-        if ("patch" in o)
-            roi.patch = toNum(o.patch, 16);
-        out.push(roi);
-    }
-    return out;
-}
-const BYTES_PER_PIXEL = 4;
-async function rgbaToBlobUrl(data, width, height) {
-    if (typeof document === "undefined" || width < 1 || height < 1)
-        return null;
-    try {
-        const canvas = document.createElement("canvas");
-        canvas.width = width;
-        canvas.height = height;
-        const ctx = canvas.getContext("2d");
-        if (!ctx)
-            return null;
-        // WebGL readPixels is bottom-up; flip for canvas display.
-        const imageData = ctx.createImageData(width, height);
-        const dst = imageData.data;
-        for (let y = 0; y < height; y++) {
-            const srcRow = (height - 1 - y) * width * BYTES_PER_PIXEL;
-            const dstRow = y * width * BYTES_PER_PIXEL;
-            for (let i = 0; i < width * BYTES_PER_PIXEL; i++) {
-                dst[dstRow + i] = data[srcRow + i];
-            }
-        }
-        ctx.putImageData(imageData, 0, 0);
-        const blob = await new Promise((resolve) => {
-            try {
-                canvas.toBlob((b) => resolve(b), "image/png");
-            }
-            catch {
-                resolve(null);
-            }
-        });
-        if (blob)
-            return URL.createObjectURL(blob);
-        // Fallback (certs navigateurs / contexts bloquent toBlob)
-        const dataUrl = canvas.toDataURL("image/png");
-        return dataUrl || null;
-    }
-    catch {
-        return null;
-    }
-}
-function assignExtractMediaUrls(item, url) {
-    item.blobUrl = url;
-    item.url = url;
-}
-/**
- * ShaderToy-compatible multipass renderer (Image + Buffer A–D + Common).
- * Opt-in: import `@supersoniks/concorde/shader`.
- *
- * Optional `dataProvider` (attr or ancestor `dataProvider` / `formDataProvider`):
- * maps form fields `param0`…`param3` → uniforms `uParam0`…`uParam3`.
- */
-let SonicShader = class SonicShader extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.image = "";
-        this.bufferA = "";
-        this.bufferB = "";
-        this.bufferC = "";
-        this.bufferD = "";
-        this.common = "";
-        this.channel0 = "";
-        this.channel1 = "";
-        this.channel2 = "";
-        this.channel3 = "";
-        this.imageCh0 = "";
-        this.imageCh1 = "";
-        this.imageCh2 = "";
-        this.imageCh3 = "";
-        this.bufferACh0 = "";
-        this.bufferACh1 = "";
-        this.bufferACh2 = "";
-        this.bufferACh3 = "";
-        this.bufferBCh0 = "";
-        this.bufferBCh1 = "";
-        this.bufferBCh2 = "";
-        this.bufferBCh3 = "";
-        this.bufferCCh0 = "";
-        this.bufferCCh1 = "";
-        this.bufferCCh2 = "";
-        this.bufferCCh3 = "";
-        this.bufferDCh0 = "";
-        this.bufferDCh1 = "";
-        this.bufferDCh2 = "";
-        this.bufferDCh3 = "";
-        this.play = true;
-        /**
-         * N’anime que pendant le hover (ou tant que le param hover n’a pas fini
-         * sa transition). Utile avec beaucoup d’instances.
-         */
-        this.playOnHover = false;
-        this.mouse = true;
-        /**
-         * `direct` — `iMouse.xy` = pointeur (ShaderToy).
-         * `target` — le pointeur est une cible ; `iMouse.xy` suit (vitesse ∝ distance).
-         */
-        this.mouseMode = "direct";
-        /**
-         * Vitesse de poursuite en mode `target` (1/s). Plus haut = plus snappy.
-         * Déplacement ≈ `(cible − pos) * (1 − e^(−speed·dt))`.
-         */
-        this.mouseSpeed = 8;
-        /**
-         * Anime `uParamN` au rollover / roll-out (0↔1). Ex. `hover-param="0"` ou `"param0"`.
-         * Le shader lit `uParamN` pour mixer l’effet on/off.
-         */
-        this.hoverParam = "";
-        /** Vitesse d’easing hover on/off (1/s, défaut 10). */
-        this.hoverSpeed = 10;
-        /**
-         * Libère le contexte WebGL hors viewport (défaut true).
-         * Les navigateurs limitent ~8–16 contextes.
-         */
-        this.releaseOffscreen = true;
-        this.dprMax = 2;
-        /** Generic float uniforms `uParam0`…`uParam3` (no shader rebuild). */
-        this.param0 = 0;
-        this.param1 = 0;
-        this.param2 = 0;
-        this.param3 = 0;
-        /**
-         * Publisher id. Fields `param0`…`param3` feed `uParam0`…`uParam3`.
-         * Falls back to ancestor `dataProvider` or `formDataProvider` when unset.
-         * Also used as default out publisher (see `outDataProvider`).
-         */
-        this.dataProvider = "";
-        /**
-         * Publisher de sortie. Défaut : même id que `dataProvider` / ancêtre.
-         * Écrit mouseX/Y, hovering, frame (+ sample* si `sample`).
-         * Sur DP partagé form+out : ne réécrit pas param0…3 (sauf slot hover-param).
-         * Paresseux : pas de set / readPixels sans lecteur méta/sample ni listener `out`.
-         */
-        this.outDataProvider = "";
-        /**
-         * Active le sample couleur → sampleR/G/B/A + sampleLuma.
-         * `readPixels` uniquement s’il y a un consommateur out (DP ou event `out`).
-         */
-        this.sample = false;
-        /** Intervalle de publication / event `out` (ms, défaut 80). */
-        this.outInterval = 80;
-        /** Active l’extraction de patches / singularités. */
-        this.extract = false;
-        /** Throttle extract ms (défaut = `out-interval` ou 100). */
-        this.extractInterval = 0;
-        /** Pass où lire les pixels couleur : `image` \| `buffer-a`… */
-        this.extractSource = "image";
-        /** Pass mask pour détection : `none` \| `buffer-a`… */
-        this.extractMask = "none";
-        /** Seuil 0–1 sur le mask (défaut 0.5). */
-        this.extractThreshold = 0.5;
-        /** Cap N items détectés (défaut 8). */
-        this.extractMax = 8;
-        /** Taille patch px par défaut pour un point (défaut 16). */
-        this.extractPatch = 16;
-        /** Génère des blob URLs par item. */
-        this.extractBitmaps = false;
-        /** Publisher dédié extract (défaut = out / dataProvider). */
-        this.extractDataProvider = "";
-        /**
-         * Force CSS aspect-ratio (e.g. `"16/9"`, `"1"`).
-         * When empty, uses channel0 (or first texture) dimensions.
-         */
-        this.aspectRatio = "";
-        this.errorMessage = "";
-        this.runtime = null;
-        this.raf = 0;
-        this.startTime = 0;
-        this.lastTime = 0;
-        this.frame = 0;
-        /** Incrémenté après chaque render (contrat SonicFrameSource). */
-        this.frameSeq = 0;
-        this.mouseVec = [0, 0, 0, 0];
-        /** Cible pointeur (px drawing buffer, origine bas-gauche). */
-        this.mouseTarget = [0, 0];
-        /** Position suivie → `iMouse.xy` en mode target. */
-        this.mouseFollow = [0, 0];
-        this.mouseHasPointer = false;
-        this.pointerDown = false;
-        this.hovering = false;
-        this.hoverGoal = 0;
-        /**
-         * Valeur easée 0↔1 pour le slot `hover-param`.
-         * Privée (pas une @property) pour éviter un requestUpdate Lit à chaque frame
-         * — sinon re-renders / write-back dataProvider → enter/leave en boucle.
-         */
-        this.hoverMix = 0;
-        this.leaveRaf = 0;
-        /** Compteur d’écouteurs `out` (publication paresseuse). */
-        this.outEventListeners = 0;
-        /** Compteur d’écouteurs `extract`. */
-        this.extractEventListeners = 0;
-        this.releasing = false;
-        this.inView = true;
-        this.resizeObserver = null;
-        this.intersectionObserver = null;
-        this.rebuildToken = 0;
-        this.ready = false;
-        this.formPublisher = null;
-        this.outPublisher = null;
-        this.extractPublisher = null;
-        this.lastOutAt = 0;
-        this.lastExtractAt = 0;
-        this.manualRois = [];
-        this.lastBlobUrls = [];
-        this.pendingRevokeUrls = [];
-        this.extractRunning = false;
-        this.extractSeq = 0;
-        this.onFormMutation = () => {
-            const data = (this.formPublisher?.get() ?? {});
-            this.applyFormParams(data);
-        };
-        this.onContextLost = (e) => {
-            e.preventDefault();
-            if (this.releasing)
-                return;
-            this.rebuildToken++;
-            this.stopLoop();
-            this.ready = false;
-            this.runtime = null;
-        };
-        this.onContextRestored = () => {
-            if (this.releasing || !this.inView)
-                return;
-            void this.ensureRuntime();
-        };
-        this.loop = () => {
-            this.raf = requestAnimationFrame(this.loop);
-            this.drawFrame(performance.now());
-            // play-on-hover : arrêter une fois la transition terminée
-            if (this.playOnHover && !this.hovering && this.hoverSettled()) {
-                this.stopLoop();
-                this.runtime?.setVideosPlaying(false);
-            }
-        };
-        this.onPointerMove = (e) => {
-            if (!this.mouse)
-                return;
-            const { x, y } = this.localPointer(e);
-            this.setPointerTarget(x, y);
-            if (this.pointerDown) {
-                this.mouseVec[2] = x;
-                this.mouseVec[3] = y;
-            }
-        };
-        this.onPointerDown = (e) => {
-            if (!this.mouse)
-                return;
-            this.pointerDown = true;
-            this.setPointerCapture?.(e.pointerId);
-            const { x, y } = this.localPointer(e);
-            this.setPointerTarget(x, y, true);
-            this.mouseVec[2] = x;
-            this.mouseVec[3] = y;
-        };
-        this.onPointerUp = (e) => {
-            if (!this.mouse)
-                return;
-            this.pointerDown = false;
-            const { x, y } = this.localPointer(e);
-            this.setPointerTarget(x, y);
-            this.mouseVec[2] = -Math.abs(this.mouseVec[2]);
-            this.mouseVec[3] = -Math.abs(this.mouseVec[3]);
-        };
-        this.onPointerEnter = () => {
-            if (this.leaveRaf) {
-                cancelAnimationFrame(this.leaveRaf);
-                this.leaveRaf = 0;
-            }
-            this.hovering = true;
-            this.hoverGoal = 1;
-            this.syncPlayback();
-        };
-        this.onPointerLeave = () => {
-            // Différer : un leave parasite (re-render / enfant shadow) suivi d’un
-            // re-enter immédiat provoquait activation↔désactivation en boucle.
-            if (this.leaveRaf)
-                cancelAnimationFrame(this.leaveRaf);
-            this.leaveRaf = requestAnimationFrame(() => {
-                this.leaveRaf = 0;
-                if (!this.isConnected || this.matches(":hover"))
-                    return;
-                this.hovering = false;
-                this.hoverGoal = 0;
-                this.pointerDown = false;
-                this.syncPlayback();
-            });
-        };
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        this.addEventListener("pointermove", this.onPointerMove);
-        this.addEventListener("pointerdown", this.onPointerDown);
-        this.addEventListener("pointerup", this.onPointerUp);
-        this.addEventListener("pointerleave", this.onPointerLeave);
-        this.addEventListener("pointerenter", this.onPointerEnter);
-        this.bindFormProvider();
-        this.bindOutPublisher();
-        this.bindExtractPublisher();
-    }
-    /**
-     * Suit les listeners `out` / `extract` pour ne publier (et ne readPixels)
-     * que s’il y a un consommateur — zéro coût tant que personne ne lit.
-     */
-    addEventListener(type, listener, options) {
-        if (type === "out" && listener)
-            this.outEventListeners++;
-        if (type === "extract" && listener)
-            this.extractEventListeners++;
-        super.addEventListener(type, listener, options);
-    }
-    removeEventListener(type, listener, options) {
-        if (type === "out" && listener) {
-            this.outEventListeners = Math.max(0, this.outEventListeners - 1);
-        }
-        if (type === "extract" && listener) {
-            this.extractEventListeners = Math.max(0, this.extractEventListeners - 1);
-        }
-        super.removeEventListener(type, listener, options);
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        this.removeEventListener("pointermove", this.onPointerMove);
-        this.removeEventListener("pointerdown", this.onPointerDown);
-        this.removeEventListener("pointerup", this.onPointerUp);
-        this.removeEventListener("pointerleave", this.onPointerLeave);
-        this.removeEventListener("pointerenter", this.onPointerEnter);
-        if (this.leaveRaf) {
-            cancelAnimationFrame(this.leaveRaf);
-            this.leaveRaf = 0;
-        }
-        this.unbindFormProvider();
-        this.unbindContextEvents();
-        this.revokeBlobUrls();
-        for (const url of this.pendingRevokeUrls) {
-            try {
-                URL.revokeObjectURL(url);
-            }
-            catch {
-                /* ignore */
-            }
-        }
-        this.pendingRevokeUrls = [];
-        this.stopLoop();
-        this.resizeObserver?.disconnect();
-        this.intersectionObserver?.disconnect();
-        this.rebuildToken++;
-        this.ready = false;
-        this.releasing = true;
-        this.runtime?.dispose(true); // libère le slot navigateur
-        this.runtime = null;
-        this.outPublisher = null;
-        this.releasing = false;
-    }
-    firstUpdated() {
-        this.resizeObserver = new ResizeObserver(() => this.syncSize());
-        this.resizeObserver.observe(this);
-        this.intersectionObserver = new IntersectionObserver((entries) => {
-            this.inView = entries.some((e) => e.isIntersecting);
-            this.syncVisibility();
-        }, { threshold: 0 });
-        this.intersectionObserver.observe(this);
-        this.bindFormProvider();
-        this.bindOutPublisher();
-        this.bindExtractPublisher();
-        requestAnimationFrame(() => {
-            if (this.inView || !this.releaseOffscreen) {
-                void this.ensureRuntime();
-            }
-        });
-    }
-    updated(changed) {
-        if (!this.runtime)
-            return;
-        const shaderKeys = [
-            "image",
-            "bufferA",
-            "bufferB",
-            "bufferC",
-            "bufferD",
-            "common",
-            "channel0",
-            "channel1",
-            "channel2",
-            "channel3",
-            "imageCh0",
-            "imageCh1",
-            "imageCh2",
-            "imageCh3",
-            "bufferACh0",
-            "bufferACh1",
-            "bufferACh2",
-            "bufferACh3",
-            "bufferBCh0",
-            "bufferBCh1",
-            "bufferBCh2",
-            "bufferBCh3",
-            "bufferCCh0",
-            "bufferCCh1",
-            "bufferCCh2",
-            "bufferCCh3",
-            "bufferDCh0",
-            "bufferDCh1",
-            "bufferDCh2",
-            "bufferDCh3",
-        ];
-        if (shaderKeys.some((k) => changed.has(k))) {
-            void this.rebuild();
-        }
-        if (changed.has("play")) {
-            this.syncPlayback();
-        }
-        if (changed.has("dataProvider") ||
-            changed.has("outDataProvider") ||
-            changed.has("extractDataProvider")) {
-            this.bindFormProvider();
-            this.bindOutPublisher();
-            this.bindExtractPublisher();
-        }
-        if (changed.has("aspectRatio")) {
-            this.applyAspectRatio();
-        }
-    }
-    applyAspectRatio(textureUrl) {
-        const forced = this.aspectRatio.trim();
-        if (forced) {
-            this.style.setProperty("--sonic-shader-ar", forced.includes("/") ? forced : forced.replace(":", " / "));
-            return;
-        }
-        const url = textureUrl || this.channel0;
-        const size = url ? this.runtime?.getTextureSize(url) : null;
-        if (size) {
-            this.style.setProperty("--sonic-shader-ar", `${size.width} / ${size.height}`);
-            return;
-        }
-        this.style.removeProperty("--sonic-shader-ar");
-    }
-    resolveFormProviderId() {
-        const own = this.dataProvider?.trim();
-        if (own)
-            return own;
-        return (HTML.getAncestorAttributeValue(this, "dataProvider") ||
-            HTML.getAncestorAttributeValue(this, "formDataProvider") ||
-            "");
-    }
-    unbindFormProvider() {
-        if (this.formPublisher) {
-            // Nested form fields (sonic-input) mutate children — root onAssign
-            // does not fire; onInternalMutation does.
-            this.formPublisher.offInternalMutation(this.onFormMutation);
-            this.formPublisher = null;
-        }
-    }
-    bindFormProvider() {
-        this.unbindFormProvider();
-        const id = this.resolveFormProviderId();
-        if (!id)
-            return;
-        this.formPublisher = PublisherManager.get(id);
-        this.formPublisher.onInternalMutation(this.onFormMutation);
-        this.onFormMutation();
-    }
-    resolveOutProviderId() {
-        const own = this.outDataProvider?.trim();
-        if (own)
-            return own;
-        return this.resolveFormProviderId();
-    }
-    bindOutPublisher() {
-        const id = this.resolveOutProviderId();
-        this.outPublisher = id ? PublisherManager.get(id) : null;
-    }
-    resolveExtractProviderId() {
-        const own = this.extractDataProvider?.trim();
-        if (own)
-            return own;
-        return this.resolveOutProviderId();
-    }
-    bindExtractPublisher() {
-        const id = this.resolveExtractProviderId();
-        this.extractPublisher = id ? PublisherManager.get(id) : null;
-    }
-    applyFormParams(value) {
-        const data = value && typeof value === "object"
-            ? value
-            : {};
-        // Le slot hover-param est piloté en interne : ne pas le réécrire depuis le
-        // publisher (évite la boucle out → mutation → param ↔ hoverGoal).
-        const hoverSlot = parseHoverParam(this.hoverParam);
-        if (hoverSlot !== 0)
-            this.param0 = toNum(data.param0, this.param0);
-        if (hoverSlot !== 1)
-            this.param1 = toNum(data.param1, this.param1);
-        if (hoverSlot !== 2)
-            this.param2 = toNum(data.param2, this.param2);
-        if (hoverSlot !== 3)
-            this.param3 = toNum(data.param3, this.param3);
-        if ("mouseSpeed" in data) {
-            this.mouseSpeed = toNum(data.mouseSpeed, this.mouseSpeed);
-        }
-        if ("hoverSpeed" in data) {
-            this.hoverSpeed = toNum(data.hoverSpeed, this.hoverSpeed);
-        }
-        if ("extractThreshold" in data) {
-            this.extractThreshold = toNum(data.extractThreshold, this.extractThreshold);
-        }
-        if ("extractMax" in data) {
-            this.extractMax = toNum(data.extractMax, this.extractMax);
-        }
-        if ("extractPatch" in data) {
-            this.extractPatch = toNum(data.extractPatch, this.extractPatch);
-        }
-        if ("rois" in data) {
-            this.manualRois = parseRois(data.rois);
-        }
-        for (const key of CHANNEL_FORM_KEYS) {
-            if (!(key in data))
-                continue;
-            const next = channelFormValue(data[key]);
-            if (next === undefined)
-                continue;
-            if (this[key] !== next) {
-                this[key] = next;
-            }
-        }
-    }
-    /** Params GPU : remplace le slot `hover-param` par `hoverMix`. */
-    effectiveParams() {
-        const params = [
-            this.param0,
-            this.param1,
-            this.param2,
-            this.param3,
-        ];
-        const slot = parseHoverParam(this.hoverParam);
-        if (slot !== null)
-            params[slot] = this.hoverMix;
-        return params;
-    }
-    /**
-     * Hors viewport : libère textures / FBO / programmes, **sans** loseContext
-     * (sinon le même canvas ne peut plus compiler au retour).
-     * Le slot navigateur est libéré au disconnect (`dispose(true)`).
-     */
-    releaseRuntime() {
-        this.rebuildToken++;
-        this.stopLoop();
-        this.ready = false;
-        this.releasing = true;
-        this.unbindContextEvents();
-        this.runtime?.dispose(false);
-        this.runtime = null;
-        this.releasing = false;
-    }
-    getCanvas() {
-        return (this.renderRoot?.querySelector("canvas") ??
-            null);
-    }
-    /** Contrat SonicFrameSource — canvas lisible pour un autre sonic-shader. */
-    getFrameCanvas() {
-        if (!this.ready || !this.runtime || this.runtime.isLost)
-            return null;
-        return this.getCanvas();
-    }
-    /** Résout `#id` dans getRootNode() puis document ; clés live `__sonic_frame_`. */
-    lookupElement(key) {
-        if (!key.startsWith("#"))
-            return null;
-        const live = lookupLiveElement(key);
-        if (live)
-            return live;
-        const id = key.slice(1);
-        if (!id || id.startsWith("__sonic_frame_"))
-            return null;
-        const root = this.getRootNode();
-        if (root instanceof Document || root instanceof ShadowRoot) {
-            const el = root.getElementById(id);
-            if (el)
-                return el;
-        }
-        return typeof document !== "undefined" ? document.getElementById(id) : null;
-    }
-    bindContextEvents() {
-        const canvas = this.getCanvas();
-        canvas?.addEventListener("webglcontextlost", this.onContextLost);
-        canvas?.addEventListener("webglcontextrestored", this.onContextRestored);
-    }
-    unbindContextEvents() {
-        const canvas = this.getCanvas();
-        canvas?.removeEventListener("webglcontextlost", this.onContextLost);
-        canvas?.removeEventListener("webglcontextrestored", this.onContextRestored);
-    }
-    async ensureRuntime() {
-        if (this.runtime && !this.runtime.isLost)
-            return;
-        this.runtime = null;
-        await this.updateComplete;
-        if (!this.isConnected || (!this.inView && this.releaseOffscreen))
-            return;
-        const canvas = this.getCanvas();
-        if (!canvas)
-            return;
-        try {
-            this.errorMessage = "";
-            this.runtime = new ShaderToyRuntime(canvas);
-            this.runtime.setElementResolver((key) => this.lookupElement(key));
-            this.bindContextEvents();
-            this.syncSize();
-            await this.rebuild();
-        }
-        catch (err) {
-            this.emitError(err);
-        }
-    }
-    syncVisibility() {
-        if (!this.inView && this.releaseOffscreen) {
-            this.releaseRuntime();
-            return;
-        }
-        if (this.inView && (!this.runtime || this.runtime.isLost)) {
-            void this.ensureRuntime();
-            return;
-        }
-        this.syncPlayback();
-    }
-    syncSize() {
-        if (!this.runtime)
-            return;
-        const rect = this.getBoundingClientRect();
-        const cssW = Math.max(rect.width, this.clientWidth, 1);
-        const cssH = Math.max(rect.height, this.clientHeight, 1);
-        const dpr = Math.min(window.devicePixelRatio || 1, this.dprMax);
-        this.runtime.resize(cssW * dpr, cssH * dpr);
-        if (this.ready) {
-            this.drawFrame(performance.now());
-        }
-    }
-    buildChannels(pass) {
-        const fallbacks = [
-            this.channel0,
-            this.channel1,
-            this.channel2,
-            this.channel3,
-        ];
-        const overrides = pass === "image"
-            ? [this.imageCh0, this.imageCh1, this.imageCh2, this.imageCh3]
-            : pass === "bufferA"
-                ? [
-                    this.bufferACh0,
-                    this.bufferACh1,
-                    this.bufferACh2,
-                    this.bufferACh3,
-                ]
-                : pass === "bufferB"
-                    ? [
-                        this.bufferBCh0,
-                        this.bufferBCh1,
-                        this.bufferBCh2,
-                        this.bufferBCh3,
-                    ]
-                    : pass === "bufferC"
-                        ? [
-                            this.bufferCCh0,
-                            this.bufferCCh1,
-                            this.bufferCCh2,
-                            this.bufferCCh3,
-                        ]
-                        : [
-                            this.bufferDCh0,
-                            this.bufferDCh1,
-                            this.bufferDCh2,
-                            this.bufferDCh3,
-                        ];
-        return [0, 1, 2, 3].map((i) => parseChannelSource(overrides[i], fallbacks[i]));
-    }
-    collectUrls(channels) {
-        const urls = [];
-        for (const chs of channels.values()) {
-            for (const c of chs) {
-                if (c.kind === "url")
-                    urls.push(c.url);
-            }
-        }
-        return urls;
-    }
-    collectElementKeys(channels) {
-        const keys = [];
-        for (const chs of channels.values()) {
-            for (const c of chs) {
-                if (c.kind === "element")
-                    keys.push(c.key);
-            }
-        }
-        return [...new Set(keys)];
-    }
-    async rebuild() {
-        if (!this.runtime || this.runtime.isLost || !this.image.trim())
-            return;
-        const token = ++this.rebuildToken;
-        this.errorMessage = "";
-        const sources = {
-            common: this.common,
-            image: this.image,
-            bufferA: this.bufferA,
-            bufferB: this.bufferB,
-            bufferC: this.bufferC,
-            bufferD: this.bufferD,
-        };
-        const channels = new Map();
-        for (const pass of [
-            "bufferA",
-            "bufferB",
-            "bufferC",
-            "bufferD",
-            "image",
-        ]) {
-            channels.set(pass, this.buildChannels(pass));
-        }
-        try {
-            this.syncSize();
-            const urls = this.collectUrls(channels);
-            await this.runtime.ensureTextures(urls);
-            for (const key of this.collectElementKeys(channels)) {
-                this.runtime.ensureElementTexture(key);
-            }
-            if (token !== this.rebuildToken || !this.runtime || this.runtime.isLost) {
-                return;
-            }
-            const aspectHint = this.channel0.startsWith("#") ? "" : this.channel0 || urls[0];
-            this.applyAspectRatio(aspectHint);
-            this.syncSize();
-            this.runtime.setSources(sources, channels);
-            if (token !== this.rebuildToken || !this.runtime || this.runtime.isLost) {
-                return;
-            }
-            this.ready = true;
-            this.startTime = performance.now();
-            this.lastTime = this.startTime;
-            this.frame = 0;
-            this.drawFrame(this.startTime);
-            this.syncPlayback();
-        }
-        catch (err) {
-            if (token !== this.rebuildToken)
-                return;
-            this.ready = false;
-            this.stopLoop();
-            this.emitError(err);
-        }
-    }
-    emitError(err) {
-        const message = err instanceof ShaderCompileError
-            ? err.message
-            : err instanceof Error
-                ? err.message
-                : String(err);
-        this.errorMessage = message;
-        this.dispatchEvent(new CustomEvent("error", {
-            detail: {
-                message,
-                pass: err instanceof ShaderCompileError ? err.pass : undefined,
-                infoLog: err instanceof ShaderCompileError ? err.infoLog : undefined,
-            },
-            bubbles: true,
-            composed: true,
-        }));
-    }
-    shouldAnimate() {
-        if (!this.play ||
-            !this.ready ||
-            !this.inView ||
-            prefersReducedMotion() ||
-            !this.runtime) {
-            return false;
-        }
-        if (this.playOnHover) {
-            return this.hovering || !this.hoverSettled();
-        }
-        return true;
-    }
-    hoverSettled() {
-        if (parseHoverParam(this.hoverParam) === null)
-            return true;
-        return Math.abs(this.hoverMix - this.hoverGoal) < 0.002;
-    }
-    syncPlayback() {
-        if (this.shouldAnimate()) {
-            this.runtime?.setVideosPlaying(true);
-            if (!this.raf) {
-                this.lastTime = performance.now();
-                this.loop();
-            }
-        }
-        else {
-            this.stopLoop();
-            this.runtime?.setVideosPlaying(false);
-            if (this.ready)
-                this.drawFrame(performance.now());
-        }
-    }
-    stopLoop() {
-        if (this.raf) {
-            cancelAnimationFrame(this.raf);
-            this.raf = 0;
-        }
-    }
-    drawFrame(now) {
-        if (!this.runtime || !this.ready)
-            return;
-        const time = (now - this.startTime) / 1000;
-        const timeDelta = Math.max(0, (now - this.lastTime) / 1000);
-        this.lastTime = now;
-        this.advanceMouseFollow(timeDelta);
-        this.advanceHover(timeDelta);
-        const params = this.effectiveParams();
-        this.runtime.render({
-            time,
-            timeDelta,
-            frame: this.frame++,
-            mouse: this.mouseVec,
-            params,
-        });
-        this.frameSeq++;
-        this.maybePublishOut(now, time, params);
-        void this.maybeExtract(now, time);
-    }
-    round3(n) {
-        return Math.round(n * 1000) / 1000;
-    }
-    buildOutput(time, params, wantSample = false) {
-        const { width, height } = this.runtime?.size ?? { width: 1, height: 1 };
-        const hasPtr = this.mouseHasPointer;
-        const mx = hasPtr && width > 0 ? this.mouseVec[0] / width : 0.5;
-        const my = hasPtr && height > 0 ? this.mouseVec[1] / height : 0.5;
-        const p = params ?? this.effectiveParams();
-        const out = {
-            time: this.round3(time),
-            frame: this.frame,
-            mouseX: this.round3(mx),
-            mouseY: this.round3(my),
-            hovering: this.hovering ? 1 : 0,
-            param0: this.round3(p[0]),
-            param1: this.round3(p[1]),
-            param2: this.round3(p[2]),
-            param3: this.round3(p[3]),
-        };
-        if (wantSample && this.runtime) {
-            const sx = hasPtr ? this.mouseVec[0] : width * 0.5;
-            const sy = hasPtr ? this.mouseVec[1] : height * 0.5;
-            const [r8, g8, b8, a8] = this.runtime.readPixel(sx, sy);
-            const r = r8 / 255;
-            const g = g8 / 255;
-            const b = b8 / 255;
-            const a = a8 / 255;
-            out.sampleR = this.round3(r);
-            out.sampleG = this.round3(g);
-            out.sampleB = this.round3(b);
-            out.sampleA = this.round3(a);
-            out.sampleLuma = this.round3(0.2126 * r + 0.7152 * g + 0.0722 * b);
-        }
-        return out;
-    }
-    /** Un champ out du publisher a-t-il un listener (sonic-value, @subscribe…) ? */
-    publisherFieldHasListener(key) {
-        const pub = this.outPublisher;
-        const child = pub?._proxies_?.get(key);
-        return !!child?.hasListener?.();
-    }
-    /**
-     * Publication paresseuse : uniquement s’il y a un event `out` ou un lecteur
-     * DP sur un champ de sortie. Sinon aucun coût (pas de set, pas de readPixels).
-     */
-    hasOutConsumers() {
-        if (this.outEventListeners > 0)
-            return true;
-        if (!this.outPublisher)
-            return false;
-        for (const key of OUT_META_KEYS) {
-            if (this.publisherFieldHasListener(key))
-                return true;
-        }
-        for (const key of OUT_SAMPLE_KEYS) {
-            if (this.publisherFieldHasListener(key))
-                return true;
-        }
-        return false;
-    }
-    /**
-     * Même DP pour form (entrée param*) et out : ne pas réécrire les params
-     * pilotés par le formulaire (sinon sortie viewport / hoverMix → champs à 0).
-     * Seul le slot `hover-param` reste écrit (piloté par le shader).
-     */
-    shouldSkipParamOutWrite(key) {
-        if (!OUT_PARAM_KEYS.includes(key))
-            return false;
-        if (!this.formPublisher || this.formPublisher !== this.outPublisher) {
-            return false;
-        }
-        const slot = parseHoverParam(this.hoverParam);
-        if (slot === null)
-            return true;
-        return Number(key.slice(5)) !== slot;
-    }
-    /**
-     * `readPixels` si `sample` et au moins un consommateur out.
-     * (Un `@handle(frame)` + `get(dp)` massif doit recevoir les samples.)
-     */
-    needsSampleRead() {
-        return this.sample && this.hasOutConsumers();
-    }
-    maybePublishOut(now, time, params) {
-        if (!this.outPublisher)
-            this.bindOutPublisher();
-        if (!this.hasOutConsumers())
-            return;
-        const interval = Math.max(16, this.outInterval || 80);
-        if (now - this.lastOutAt < interval)
-            return;
-        this.lastOutAt = now;
-        const payload = this.buildOutput(time, params, this.needsSampleRead());
-        const pub = this.outPublisher;
-        if (pub) {
-            for (const [key, value] of Object.entries(payload)) {
-                if (value === undefined)
-                    continue;
-                if (this.shouldSkipParamOutWrite(key))
-                    continue;
-                try {
-                    // Champs individuels pour ne pas écraser le reste du form
-                    pub[key].set(value);
-                }
-                catch {
-                    /* publisher leaf manquant / non settable */
-                }
-            }
-        }
-        this.dispatchEvent(new CustomEvent("out", {
-            detail: payload,
-            bubbles: true,
-            composed: true,
-        }));
-    }
-    revokeBlobUrls() {
-        for (const url of this.lastBlobUrls) {
-            try {
-                URL.revokeObjectURL(url);
-            }
-            catch {
-                /* ignore */
-            }
-        }
-        this.lastBlobUrls = [];
-    }
-    /** Révoque les URLs du batch précédent après un court délai (évite img cassées). */
-    scheduleRevokePreviousBlobs(urls) {
-        const objectUrls = urls.filter((u) => u.startsWith("blob:"));
-        if (objectUrls.length === 0)
-            return;
-        this.pendingRevokeUrls.push(...objectUrls);
-        const toRevoke = objectUrls;
-        window.setTimeout(() => {
-            for (const url of toRevoke) {
-                try {
-                    URL.revokeObjectURL(url);
-                }
-                catch {
-                    /* ignore */
-                }
-                const i = this.pendingRevokeUrls.indexOf(url);
-                if (i >= 0)
-                    this.pendingRevokeUrls.splice(i, 1);
-            }
-        }, 1500);
-    }
-    publisherHasFieldListener(pub, key) {
-        const child = pub?._proxies_?.get(key);
-        return !!child?.hasListener?.();
-    }
-    hasExtractConsumers() {
-        if (this.extractEventListeners > 0)
-            return true;
-        const pub = this.extractPublisher;
-        if (!pub)
-            return false;
-        for (const key of EXTRACT_OUT_KEYS) {
-            if (this.publisherHasFieldListener(pub, key))
-                return true;
-        }
-        return false;
-    }
-    syncManualRoisFromPublishers() {
-        const tryGet = (pub) => {
-            if (!pub?.get)
-                return;
-            try {
-                const data = pub.get() ?? {};
-                if ("rois" in data)
-                    this.manualRois = parseRois(data.rois);
-            }
-            catch {
-                /* ignore */
-            }
-        };
-        tryGet(this.formPublisher);
-        if (this.extractPublisher && this.extractPublisher !== this.formPublisher) {
-            tryGet(this.extractPublisher);
-        }
-    }
-    resolveExtractInterval() {
-        if (this.extractInterval > 0)
-            return Math.max(16, this.extractInterval);
-        return Math.max(16, this.outInterval || 100);
-    }
-    /**
-     * Lit une ROI à la demande (hors throttle). Nécessite un runtime prêt.
-     */
-    async readRegion(roi) {
-        if (!this.runtime || !this.ready)
-            return null;
-        const item = await this.buildExtractItem(roi, "manual", undefined);
-        return item;
-    }
-    /** Lance une extraction complète immédiatement. */
-    async extractNow() {
-        const time = (performance.now() - this.startTime) / 1000;
-        return this.runExtract(time);
-    }
-    async maybeExtract(now, time) {
-        if (!this.extract || !this.ready || !this.runtime)
-            return;
-        if (!this.extractPublisher)
-            this.bindExtractPublisher();
-        if (!this.hasExtractConsumers())
-            return;
-        if (now - this.lastExtractAt < this.resolveExtractInterval())
-            return;
-        if (this.extractRunning)
-            return;
-        this.lastExtractAt = now;
-        await this.runExtract(time);
-    }
-    async runExtract(time) {
-        const empty = {
-            frame: this.frame,
-            time: this.round3(time),
-            items: [],
-        };
-        if (!this.runtime || !this.ready)
-            return empty;
-        this.extractRunning = true;
-        try {
-            this.syncManualRoisFromPublishers();
-            const { width: bufW, height: bufH } = this.runtime.size;
-            const rois = this.manualRois.map((r) => ({
-                ...r,
-                source: "manual",
-            }));
-            const maskPass = parseExtractPass(this.extractMask);
-            if (maskPass) {
-                const full = this.runtime.readBufferRect(maskPass, 0, 0, bufW, bufH);
-                if (full) {
-                    const peaks = findPeaks(full.data, full.width, full.height, {
-                        threshold: this.extractThreshold,
-                        maxCount: Math.max(0, Math.floor(this.extractMax)),
-                        // Défaut ≈ patch/3 plafonné à 16 (doc) — laisse assez de coins espacés
-                        minDistance: Math.max(8, Math.floor(Math.min(this.extractPatch / 3, 16))),
-                    });
-                    // Score relatif au meilleur peak du batch (ordre inchangé, UI lisible)
-                    const topScore = peaks[0]?.score || 1;
-                    for (let i = 0; i < peaks.length; i++) {
-                        const p = peaks[i];
-                        rois.push({
-                            id: `detect-${i}`,
-                            x: (p.x + 0.5) / bufW,
-                            y: (p.y + 0.5) / bufH,
-                            patch: this.extractPatch,
-                            source: "detect",
-                            score: topScore > 0 ? p.score / topScore : p.score,
-                        });
-                    }
-                }
-            }
-            const pending = [];
-            let detectIdx = 0;
-            const pass = parseExtractPass(this.extractSource) ?? "image";
-            for (const roi of rois) {
-                const source = roi.source === "detect" ? "detect" : "manual";
-                if (source === "detect") {
-                    if (detectIdx >= Math.max(0, Math.floor(this.extractMax)))
-                        continue;
-                    detectIdx++;
-                }
-                const px = roiToPixels(roi, bufW, bufH, this.extractPatch, MAX_PATCH_PX);
-                if (!px)
-                    continue;
-                const rect = pass === "image"
-                    ? this.runtime.readRect(px.x, px.y, px.w, px.h)
-                    : this.runtime.readBufferRect(pass, px.x, px.y, px.w, px.h);
-                if (!rect)
-                    continue;
-                // Copie : le buffer WebGL peut être réutilisé / invalidé ensuite
-                const rgba = new Uint8Array(rect.data);
-                const mean = meanRgba(rgba);
-                const item = {
-                    id: roi.id || `${source}-${px.x}-${px.y}`,
-                    x: this.round3(rect.x / bufW),
-                    y: this.round3(rect.y / bufH),
-                    w: this.round3(rect.width / bufW),
-                    h: this.round3(rect.height / bufH),
-                    meanR: this.round3(mean.r),
-                    meanG: this.round3(mean.g),
-                    meanB: this.round3(mean.b),
-                    meanA: this.round3(mean.a),
-                    meanLuma: this.round3(mean.luma),
-                    source,
-                };
-                if (typeof roi.score === "number")
-                    item.score = this.round3(roi.score);
-                pending.push({
-                    item,
-                    rgba,
-                    width: rect.width,
-                    height: rect.height,
-                });
-            }
-            // Phase async : bitmaps (après copies CPU)
-            if (this.extractBitmaps) {
-                const token = this.rebuildToken;
-                for (const p of pending) {
-                    if (token !== this.rebuildToken || !this.isConnected) {
-                        for (const q of pending) {
-                            if (q.item.blobUrl)
-                                revokeMediaUrls([q.item.blobUrl]);
-                        }
-                        return empty;
-                    }
-                    const url = await rgbaToBlobUrl(p.rgba, p.width, p.height);
-                    if (token !== this.rebuildToken || !this.isConnected) {
-                        if (url)
-                            revokeMediaUrls([url]);
-                        for (const q of pending) {
-                            if (q.item.blobUrl)
-                                revokeMediaUrls([q.item.blobUrl]);
-                        }
-                        return empty;
-                    }
-                    if (url)
-                        assignExtractMediaUrls(p.item, url);
-                }
-            }
-            if (!this.isConnected) {
-                for (const p of pending) {
-                    if (p.item.blobUrl)
-                        revokeMediaUrls([p.item.blobUrl]);
-                }
-                return empty;
-            }
-            const items = pending.map((p) => p.item);
-            const payload = {
-                frame: this.frame,
-                time: this.round3(time),
-                items,
-            };
-            this.publishExtract(payload);
-            return payload;
-        }
-        finally {
-            this.extractRunning = false;
-        }
-    }
-    async buildExtractItem(roi, source, score) {
-        if (!this.runtime)
-            return null;
-        const { width: bufW, height: bufH } = this.runtime.size;
-        const px = roiToPixels(roi, bufW, bufH, this.extractPatch, MAX_PATCH_PX);
-        if (!px)
-            return null;
-        const pass = parseExtractPass(this.extractSource) ?? "image";
-        const rect = pass === "image"
-            ? this.runtime.readRect(px.x, px.y, px.w, px.h)
-            : this.runtime.readBufferRect(pass, px.x, px.y, px.w, px.h);
-        if (!rect)
-            return null;
-        const mean = meanRgba(rect.data);
-        const item = {
-            id: roi.id || `${source}-${px.x}-${px.y}`,
-            x: this.round3(rect.x / bufW),
-            y: this.round3(rect.y / bufH),
-            w: this.round3(rect.width / bufW),
-            h: this.round3(rect.height / bufH),
-            meanR: this.round3(mean.r),
-            meanG: this.round3(mean.g),
-            meanB: this.round3(mean.b),
-            meanA: this.round3(mean.a),
-            meanLuma: this.round3(mean.luma),
-            source,
-        };
-        if (typeof score === "number")
-            item.score = this.round3(score);
-        if (this.extractBitmaps) {
-            const token = this.rebuildToken;
-            const url = await rgbaToBlobUrl(rect.data, rect.width, rect.height);
-            if (token !== this.rebuildToken || !this.isConnected) {
-                if (url)
-                    revokeMediaUrls([url]);
-                return null;
-            }
-            if (url)
-                assignExtractMediaUrls(item, url);
-        }
-        return item;
-    }
-    publishExtract(payload) {
-        // Ne pas révoquer tout de suite : les <img> du batch précédent casseraient.
-        this.scheduleRevokePreviousBlobs(this.lastBlobUrls);
-        this.lastBlobUrls = [];
-        for (const it of payload.items) {
-            if (it.blobUrl)
-                this.lastBlobUrls.push(it.blobUrl);
-        }
-        this.extractSeq++;
-        if (!this.extractPublisher)
-            this.bindExtractPublisher();
-        const pub = this.extractPublisher;
-        if (pub) {
-            // Set atomique sur la racine : invalide `_cachedGet_` du parent.
-            // (pub.extracts.set(...) seul laisse un snapshot périmé → 1 seul item en get()).
-            try {
-                const prev = pub.get?.() ?? {};
-                pub.set({
-                    ...prev,
-                    rois: Array.isArray(prev.rois) ? prev.rois : this.manualRois,
-                    extracts: payload.items,
-                    extractCount: payload.items.length,
-                    extractSeq: this.extractSeq,
-                });
-            }
-            catch {
-                try {
-                    pub.extracts.set(payload.items);
-                    pub.extractCount.set(payload.items.length);
-                    pub.extractSeq.set(this.extractSeq);
-                }
-                catch {
-                    /* ignore */
-                }
-            }
-        }
-        this.dispatchEvent(new CustomEvent("extract", {
-            detail: payload,
-            bubbles: true,
-            composed: true,
-        }));
-    }
-    /**
-     * Mode target : poursuite exponentielle (vitesse proportionnelle à la distance).
-     * Frame-rate indépendant via `1 - exp(-speed * dt)`.
-     */
-    advanceMouseFollow(dt) {
-        if (!this.mouse || this.mouseMode !== "target" || !this.mouseHasPointer) {
-            return;
-        }
-        const speed = Math.max(0, this.mouseSpeed);
-        const t = speed <= 0 || dt <= 0 ? 1 : 1 - Math.exp(-speed * dt);
-        this.mouseFollow[0] += (this.mouseTarget[0] - this.mouseFollow[0]) * t;
-        this.mouseFollow[1] += (this.mouseTarget[1] - this.mouseFollow[1]) * t;
-        this.mouseVec[0] = this.mouseFollow[0];
-        this.mouseVec[1] = this.mouseFollow[1];
-    }
-    /** Rollover / roll-out → easing de `hoverMix` (0↔1) pour le slot choisi. */
-    advanceHover(dt) {
-        if (parseHoverParam(this.hoverParam) === null)
-            return;
-        const speed = Math.max(0, this.hoverSpeed);
-        const t = speed <= 0 || dt <= 0 ? 1 : 1 - Math.exp(-speed * dt);
-        const next = this.hoverMix + (this.hoverGoal - this.hoverMix) * t;
-        // Snap pour éviter une micro-animation infinie (play-on-hover qui redémarre).
-        this.hoverMix =
-            Math.abs(next - this.hoverGoal) < 0.002 ? this.hoverGoal : next;
-    }
-    localPointer(e) {
-        const rect = this.getBoundingClientRect();
-        const dpr = Math.min(window.devicePixelRatio || 1, this.dprMax);
-        const x = (e.clientX - rect.left) * dpr;
-        const y = (rect.height - (e.clientY - rect.top)) * dpr;
-        return { x, y };
-    }
-    setPointerTarget(x, y, snap = false) {
-        this.mouseTarget[0] = x;
-        this.mouseTarget[1] = y;
-        if (!this.mouseHasPointer || snap || this.mouseMode === "direct") {
-            this.mouseHasPointer = true;
-            this.mouseFollow[0] = x;
-            this.mouseFollow[1] = y;
-            this.mouseVec[0] = x;
-            this.mouseVec[1] = y;
-        }
-    }
-    render() {
-        return html `
-      <canvas part="canvas"></canvas>
-      ${this.errorMessage
-            ? html `<div class="err" part="error">${this.errorMessage}</div>`
-            : null}
-    `;
-    }
-};
-SonicShader.styles = css `
-    :host {
-      display: block;
-      position: relative;
-      width: 100%;
-      max-width: 100%;
-      height: auto;
-      aspect-ratio: var(--sonic-shader-ar, 16 / 9);
-      overflow: hidden;
-      background: #0a0a0a;
-      color: #f87171;
-      font: 12px/1.4 ui-monospace, monospace;
-    }
-    canvas {
-      position: absolute;
-      inset: 0;
-      width: 100%;
-      height: 100%;
-      display: block;
-      touch-action: none;
-    }
-    .err {
-      position: absolute;
-      inset: 0;
-      z-index: 1;
-      padding: 0.75rem;
-      background: rgba(0, 0, 0, 0.85);
-      white-space: pre-wrap;
-      overflow: auto;
-    }
-  `;
-__decorate([
-    property()
-], SonicShader.prototype, "image", void 0);
-__decorate([
-    property({ attribute: "buffer-a" })
-], SonicShader.prototype, "bufferA", void 0);
-__decorate([
-    property({ attribute: "buffer-b" })
-], SonicShader.prototype, "bufferB", void 0);
-__decorate([
-    property({ attribute: "buffer-c" })
-], SonicShader.prototype, "bufferC", void 0);
-__decorate([
-    property({ attribute: "buffer-d" })
-], SonicShader.prototype, "bufferD", void 0);
-__decorate([
-    property()
-], SonicShader.prototype, "common", void 0);
-__decorate([
-    property()
-], SonicShader.prototype, "channel0", void 0);
-__decorate([
-    property()
-], SonicShader.prototype, "channel1", void 0);
-__decorate([
-    property()
-], SonicShader.prototype, "channel2", void 0);
-__decorate([
-    property()
-], SonicShader.prototype, "channel3", void 0);
-__decorate([
-    property({ attribute: "image-ch0" })
-], SonicShader.prototype, "imageCh0", void 0);
-__decorate([
-    property({ attribute: "image-ch1" })
-], SonicShader.prototype, "imageCh1", void 0);
-__decorate([
-    property({ attribute: "image-ch2" })
-], SonicShader.prototype, "imageCh2", void 0);
-__decorate([
-    property({ attribute: "image-ch3" })
-], SonicShader.prototype, "imageCh3", void 0);
-__decorate([
-    property({ attribute: "buffer-a-ch0" })
-], SonicShader.prototype, "bufferACh0", void 0);
-__decorate([
-    property({ attribute: "buffer-a-ch1" })
-], SonicShader.prototype, "bufferACh1", void 0);
-__decorate([
-    property({ attribute: "buffer-a-ch2" })
-], SonicShader.prototype, "bufferACh2", void 0);
-__decorate([
-    property({ attribute: "buffer-a-ch3" })
-], SonicShader.prototype, "bufferACh3", void 0);
-__decorate([
-    property({ attribute: "buffer-b-ch0" })
-], SonicShader.prototype, "bufferBCh0", void 0);
-__decorate([
-    property({ attribute: "buffer-b-ch1" })
-], SonicShader.prototype, "bufferBCh1", void 0);
-__decorate([
-    property({ attribute: "buffer-b-ch2" })
-], SonicShader.prototype, "bufferBCh2", void 0);
-__decorate([
-    property({ attribute: "buffer-b-ch3" })
-], SonicShader.prototype, "bufferBCh3", void 0);
-__decorate([
-    property({ attribute: "buffer-c-ch0" })
-], SonicShader.prototype, "bufferCCh0", void 0);
-__decorate([
-    property({ attribute: "buffer-c-ch1" })
-], SonicShader.prototype, "bufferCCh1", void 0);
-__decorate([
-    property({ attribute: "buffer-c-ch2" })
-], SonicShader.prototype, "bufferCCh2", void 0);
-__decorate([
-    property({ attribute: "buffer-c-ch3" })
-], SonicShader.prototype, "bufferCCh3", void 0);
-__decorate([
-    property({ attribute: "buffer-d-ch0" })
-], SonicShader.prototype, "bufferDCh0", void 0);
-__decorate([
-    property({ attribute: "buffer-d-ch1" })
-], SonicShader.prototype, "bufferDCh1", void 0);
-__decorate([
-    property({ attribute: "buffer-d-ch2" })
-], SonicShader.prototype, "bufferDCh2", void 0);
-__decorate([
-    property({ attribute: "buffer-d-ch3" })
-], SonicShader.prototype, "bufferDCh3", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], SonicShader.prototype, "play", void 0);
-__decorate([
-    property({ type: Boolean, attribute: "play-on-hover" })
-], SonicShader.prototype, "playOnHover", void 0);
-__decorate([
-    property({ type: Boolean })
-], SonicShader.prototype, "mouse", void 0);
-__decorate([
-    property({ type: String, attribute: "mouse-mode" })
-], SonicShader.prototype, "mouseMode", void 0);
-__decorate([
-    property({ type: Number, attribute: "mouse-speed" })
-], SonicShader.prototype, "mouseSpeed", void 0);
-__decorate([
-    property({ attribute: "hover-param" })
-], SonicShader.prototype, "hoverParam", void 0);
-__decorate([
-    property({ type: Number, attribute: "hover-speed" })
-], SonicShader.prototype, "hoverSpeed", void 0);
-__decorate([
-    property({ type: Boolean, attribute: "release-offscreen" })
-], SonicShader.prototype, "releaseOffscreen", void 0);
-__decorate([
-    property({ type: Number, attribute: "dpr-max" })
-], SonicShader.prototype, "dprMax", void 0);
-__decorate([
-    property({ type: Number, attribute: "param0" })
-], SonicShader.prototype, "param0", void 0);
-__decorate([
-    property({ type: Number, attribute: "param1" })
-], SonicShader.prototype, "param1", void 0);
-__decorate([
-    property({ type: Number, attribute: "param2" })
-], SonicShader.prototype, "param2", void 0);
-__decorate([
-    property({ type: Number, attribute: "param3" })
-], SonicShader.prototype, "param3", void 0);
-__decorate([
-    property({ type: String })
-], SonicShader.prototype, "dataProvider", void 0);
-__decorate([
-    property({ type: String, attribute: "out-data-provider" })
-], SonicShader.prototype, "outDataProvider", void 0);
-__decorate([
-    property({ type: Boolean })
-], SonicShader.prototype, "sample", void 0);
-__decorate([
-    property({ type: Number, attribute: "out-interval" })
-], SonicShader.prototype, "outInterval", void 0);
-__decorate([
-    property({ type: Boolean })
-], SonicShader.prototype, "extract", void 0);
-__decorate([
-    property({ type: Number, attribute: "extract-interval" })
-], SonicShader.prototype, "extractInterval", void 0);
-__decorate([
-    property({ type: String, attribute: "extract-source" })
-], SonicShader.prototype, "extractSource", void 0);
-__decorate([
-    property({ type: String, attribute: "extract-mask" })
-], SonicShader.prototype, "extractMask", void 0);
-__decorate([
-    property({ type: Number, attribute: "extract-threshold" })
-], SonicShader.prototype, "extractThreshold", void 0);
-__decorate([
-    property({ type: Number, attribute: "extract-max" })
-], SonicShader.prototype, "extractMax", void 0);
-__decorate([
-    property({ type: Number, attribute: "extract-patch" })
-], SonicShader.prototype, "extractPatch", void 0);
-__decorate([
-    property({ type: Boolean, attribute: "extract-bitmaps" })
-], SonicShader.prototype, "extractBitmaps", void 0);
-__decorate([
-    property({ type: String, attribute: "extract-data-provider" })
-], SonicShader.prototype, "extractDataProvider", void 0);
-__decorate([
-    property({ type: String, attribute: "aspect-ratio" })
-], SonicShader.prototype, "aspectRatio", void 0);
-__decorate([
-    state()
-], SonicShader.prototype, "errorMessage", void 0);
-SonicShader = __decorate([
-    customElement(tagName)
-], SonicShader);
-export { SonicShader };
-export { parseChannelSource, ShaderToyRuntime, shouldUploadElementFrame } from "./gl-runtime";
-export { buildFragmentSource } from "./shadertoy-prelude";
-export { toMediaUrl, cloneMediaRef, isFrameSource, mediaElementKey, } from "@supersoniks/concorde/core/utils/mediaRef";
-export { findPeaks, meanRgba, parseExtractPass, parseHoverParam, roiToPixels, ShaderCompileError, } from "./types";
-//# sourceMappingURL=shader.js.map