@supersoniks/concorde 4.9.95 → 4.9.97-visual-stack.0

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

@@ -0,0 +1,1593 @@
+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 } 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 ou buffer-a) | MediaRef → url. */
+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")
+        return undefined;
+    return "";
+}
+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;
+        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);
+    }
+    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.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;
+    }
+    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);
+            if (token !== this.rebuildToken || !this.runtime || this.runtime.isLost) {
+                return;
+            }
+            this.applyAspectRatio(this.channel0 || urls[0]);
+            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.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 } from "./gl-runtime";
+export { buildFragmentSource } from "./shadertoy-prelude";
+export { toMediaUrl, cloneMediaRef, } from "@supersoniks/concorde/core/utils/mediaRef";
+export { findPeaks, meanRgba, parseExtractPass, parseHoverParam, roiToPixels, ShaderCompileError, } from "./types";
+//# sourceMappingURL=shader.js.map