@supersoniks/concorde 4.9.97-visual-stack.0 → 4.9.98-visual-stack.1

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

@@ -7,12 +7,49 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 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 { revokeMediaUrls, toMediaUrl, mediaElementKey, lookupLiveElement, FrameConsumerRegistry } 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";
+import { ShaderCompileError, channelsUseSelf, findPeaks, meanRgba, parseBufferFormat, parseExtractPass, parseHoverParam, parseReleaseOffscreen, roiToPixels, rgbaToUint8, shouldReleaseWhenOffscreen, } from "./types";
 const tagName = "sonic-shader";
 const MAX_PATCH_PX = 128;
+/** Clés qui forcent une recompilation / recreate FBO. */
+const PROGRAM_KEYS = [
+    "image",
+    "bufferA",
+    "bufferB",
+    "bufferC",
+    "bufferD",
+    "common",
+    "bufferFormat",
+];
+/** Clés qui ne font que re-lier les textures (pas de rebuild). */
+const CHANNEL_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 méta publiés vers le out-dataProvider.
  * `param0…3` sont exclus du gate « consommateur » : un `sonic-input name="param0"`
@@ -76,7 +113,7 @@ function toNum(v, fallback) {
     }
     return fallback;
 }
-/** Valeur canal depuis DP : string (url ou buffer-a) | MediaRef → url. */
+/** Valeur canal depuis DP : string (url, buffer-a, #id) | MediaRef → url | { element }. */
 function channelFormValue(value) {
     if (value === null || value === "")
         return "";
@@ -85,10 +122,17 @@ function channelFormValue(value) {
     const url = toMediaUrl(value);
     if (url)
         return url;
-    if (value && typeof value === "object")
+    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 [];
@@ -223,11 +267,19 @@ let SonicShader = class SonicShader extends LitElement {
         /** 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.
+         * Hors viewport : libère textures/FBO (garde le contexte).
+         * `auto` (défaut) : ne libère pas si une passe lit `self`.
+         * `true` / `false` forcent le comportement.
          */
-        this.releaseOffscreen = true;
+        this.releaseOffscreen = "auto";
         this.dprMax = 2;
+        /**
+         * Format des buffers A–D : `rgba8` (défaut) | `rgba16f` | `rgba32f`.
+         * Attribut reflété `active-buffer-format` = format réellement utilisé.
+         */
+        this.bufferFormat = "rgba8";
+        /** Format actif après repli éventuel (lecture seule, reflect). */
+        this.activeBufferFormat = "rgba8";
         /** Generic float uniforms `uParam0`…`uParam3` (no shader rebuild). */
         this.param0 = 0;
         this.param1 = 0;
@@ -282,6 +334,8 @@ let SonicShader = class SonicShader extends LitElement {
         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];
@@ -307,6 +361,9 @@ let SonicShader = class SonicShader extends LitElement {
         this.resizeObserver = null;
         this.intersectionObserver = null;
         this.rebuildToken = 0;
+        /** Annule un `rebindChannels` en vol si rebuild / release intervient. */
+        this.rebindToken = 0;
+        this.frameConsumers = new FrameConsumerRegistry();
         this.ready = false;
         this.formPublisher = null;
         this.outPublisher = null;
@@ -327,6 +384,7 @@ let SonicShader = class SonicShader extends LitElement {
             if (this.releasing)
                 return;
             this.rebuildToken++;
+            this.rebindToken++;
             this.stopLoop();
             this.ready = false;
             this.runtime = null;
@@ -454,9 +512,11 @@ let SonicShader = class SonicShader extends LitElement {
         }
         this.pendingRevokeUrls = [];
         this.stopLoop();
+        this.frameConsumers.clear();
         this.resizeObserver?.disconnect();
         this.intersectionObserver?.disconnect();
         this.rebuildToken++;
+        this.rebindToken++;
         this.ready = false;
         this.releasing = true;
         this.runtime?.dispose(true); // libère le slot navigateur
@@ -476,7 +536,7 @@ let SonicShader = class SonicShader extends LitElement {
         this.bindOutPublisher();
         this.bindExtractPublisher();
         requestAnimationFrame(() => {
-            if (this.inView || !this.releaseOffscreen) {
+            if (this.inView || !this.wantsReleaseOffscreen()) {
                 void this.ensureRuntime();
             }
         });
@@ -484,44 +544,20 @@ let SonicShader = class SonicShader extends LitElement {
     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))) {
+        const programChanged = PROGRAM_KEYS.some((k) => changed.has(k));
+        const channelChanged = CHANNEL_KEYS.some((k) => changed.has(k));
+        if (programChanged) {
             void this.rebuild();
         }
+        else if (channelChanged) {
+            void this.rebindChannels();
+        }
         if (changed.has("play")) {
             this.syncPlayback();
         }
+        if (changed.has("releaseOffscreen") || channelChanged) {
+            this.syncVisibility();
+        }
         if (changed.has("dataProvider") ||
             changed.has("outDataProvider") ||
             changed.has("extractDataProvider")) {
@@ -656,6 +692,7 @@ let SonicShader = class SonicShader extends LitElement {
      */
     releaseRuntime() {
         this.rebuildToken++;
+        this.rebindToken++;
         this.stopLoop();
         this.ready = false;
         this.releasing = true;
@@ -668,6 +705,30 @@ let SonicShader = class SonicShader extends LitElement {
         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);
@@ -683,7 +744,7 @@ let SonicShader = class SonicShader extends LitElement {
             return;
         this.runtime = null;
         await this.updateComplete;
-        if (!this.isConnected || (!this.inView && this.releaseOffscreen))
+        if (!this.isConnected || (!this.inView && this.wantsReleaseOffscreen()))
             return;
         const canvas = this.getCanvas();
         if (!canvas)
@@ -691,6 +752,8 @@ let SonicShader = class SonicShader extends LitElement {
         try {
             this.errorMessage = "";
             this.runtime = new ShaderToyRuntime(canvas);
+            this.runtime.setElementResolver((key) => this.lookupElement(key));
+            this.activeBufferFormat = this.runtime.setBufferFormat(parseBufferFormat(this.bufferFormat));
             this.bindContextEvents();
             this.syncSize();
             await this.rebuild();
@@ -700,7 +763,7 @@ let SonicShader = class SonicShader extends LitElement {
         }
     }
     syncVisibility() {
-        if (!this.inView && this.releaseOffscreen) {
+        if (!this.inView && this.wantsReleaseOffscreen()) {
             this.releaseRuntime();
             return;
         }
@@ -770,9 +833,76 @@ let SonicShader = class SonicShader extends LitElement {
         }
         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)];
+    }
+    /** Enregistre les producteurs live (`sonic-3d`…) pour play-offscreen auto. */
+    syncFrameConsumers(channels) {
+        const els = this.collectElementKeys(channels).map((k) => this.lookupElement(k));
+        this.frameConsumers.sync(els);
+    }
+    /** Map canaux courante (tous les passes). */
+    collectPassChannels() {
+        const channels = new Map();
+        for (const pass of [
+            "bufferA",
+            "bufferB",
+            "bufferC",
+            "bufferD",
+            "image",
+        ]) {
+            channels.set(pass, this.buildChannels(pass));
+        }
+        return channels;
+    }
+    /** `true` si hors viewport on doit libérer textures/FBO. */
+    wantsReleaseOffscreen() {
+        return shouldReleaseWhenOffscreen(this.releaseOffscreen, channelsUseSelf(this.collectPassChannels().values()));
+    }
+    /**
+     * Re-lie les canaux sans recompiler ni vider les FBO (Vague A Lot 2).
+     */
+    async rebindChannels() {
+        if (!this.runtime || this.runtime.isLost || !this.image.trim())
+            return;
+        if (!this.ready) {
+            void this.rebuild();
+            return;
+        }
+        const token = ++this.rebindToken;
+        const channels = this.collectPassChannels();
+        try {
+            const urls = this.collectUrls(channels);
+            await this.runtime.ensureTextures(urls);
+            for (const key of this.collectElementKeys(channels)) {
+                this.runtime.ensureElementTexture(key);
+            }
+            if (token !== this.rebindToken || !this.runtime || this.runtime.isLost) {
+                return;
+            }
+            this.syncFrameConsumers(channels);
+            const aspectHint = this.channel0.startsWith("#") ? "" : this.channel0 || urls[0];
+            this.applyAspectRatio(aspectHint);
+            this.runtime.setPassChannels(channels);
+            this.syncSize();
+        }
+        catch (err) {
+            if (token !== this.rebindToken)
+                return;
+            this.emitError(err);
+        }
+    }
     async rebuild() {
         if (!this.runtime || this.runtime.isLost || !this.image.trim())
             return;
+        this.rebindToken++;
         const token = ++this.rebuildToken;
         this.errorMessage = "";
         const sources = {
@@ -783,24 +913,21 @@ let SonicShader = class SonicShader extends LitElement {
             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));
-        }
+        const channels = this.collectPassChannels();
         try {
             this.syncSize();
+            this.activeBufferFormat = this.runtime.setBufferFormat(parseBufferFormat(this.bufferFormat));
             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;
             }
-            this.applyAspectRatio(this.channel0 || urls[0]);
+            this.syncFrameConsumers(channels);
+            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) {
@@ -893,6 +1020,7 @@ let SonicShader = class SonicShader extends LitElement {
             mouse: this.mouseVec,
             params,
         });
+        this.frameSeq++;
         this.maybePublishOut(now, time, params);
         void this.maybeExtract(now, time);
     }
@@ -1171,8 +1299,8 @@ let SonicShader = class SonicShader extends LitElement {
                 if (!rect)
                     continue;
                 // Copie : le buffer WebGL peut être réutilisé / invalidé ensuite
-                const rgba = new Uint8Array(rect.data);
-                const mean = meanRgba(rgba);
+                const rgba = rgbaToUint8(rect.data);
+                const mean = meanRgba(rect.data);
                 const item = {
                     id: roi.id || `${source}-${px.x}-${px.y}`,
                     x: this.round3(rect.x / bufW),
@@ -1271,7 +1399,7 @@ let SonicShader = class SonicShader extends LitElement {
             item.score = this.round3(score);
         if (this.extractBitmaps) {
             const token = this.rebuildToken;
-            const url = await rgbaToBlobUrl(rect.data, rect.width, rect.height);
+            const url = await rgbaToBlobUrl(rgbaToUint8(rect.data), rect.width, rect.height);
             if (token !== this.rebuildToken || !this.isConnected) {
                 if (url)
                     revokeMediaUrls([url]);
@@ -1520,11 +1648,29 @@ __decorate([
     property({ type: Number, attribute: "hover-speed" })
 ], SonicShader.prototype, "hoverSpeed", void 0);
 __decorate([
-    property({ type: Boolean, attribute: "release-offscreen" })
+    property({
+        attribute: "release-offscreen",
+        converter: {
+            fromAttribute: (value) => parseReleaseOffscreen(value),
+            toAttribute: (value) => {
+                if (value === "auto")
+                    return "auto";
+                if (value === false)
+                    return "false";
+                return "";
+            },
+        },
+    })
 ], SonicShader.prototype, "releaseOffscreen", void 0);
 __decorate([
     property({ type: Number, attribute: "dpr-max" })
 ], SonicShader.prototype, "dprMax", void 0);
+__decorate([
+    property({ attribute: "buffer-format" })
+], SonicShader.prototype, "bufferFormat", void 0);
+__decorate([
+    property({ attribute: "active-buffer-format", reflect: true })
+], SonicShader.prototype, "activeBufferFormat", void 0);
 __decorate([
     property({ type: Number, attribute: "param0" })
 ], SonicShader.prototype, "param0", void 0);
@@ -1586,8 +1732,8 @@ SonicShader = __decorate([
     customElement(tagName)
 ], SonicShader);
 export { SonicShader };
-export { parseChannelSource, ShaderToyRuntime } from "./gl-runtime";
+export { parseChannelSource, ShaderToyRuntime, shouldUploadElementFrame, resolveBufferGlFormat, resetBufferFormatWarnFlag } 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";
+export { toMediaUrl, cloneMediaRef, isFrameSource, mediaElementKey, } from "@supersoniks/concorde/core/utils/mediaRef";
+export { channelsUseSelf, findPeaks, meanRgba, parseBufferFormat, parseExtractPass, parseHoverParam, parseReleaseOffscreen, roiToPixels, rgbaToUint8, shouldReleaseWhenOffscreen, ShaderCompileError, } from "./types";
 //# sourceMappingURL=shader.js.map