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

package/dist/types/core/utils/mediaRef.d.ts

@@ -4,6 +4,7 @@
  * - `url` : http(s) | blob: | data: (préféré pour les canaux shader)
  * - `blob` : binaire (HF, upload) — le producteur publie aussi `url` quand possible
  * - `blobUrl` : alias historique (extract shader)
+ * - `element` : sélecteur `#id` ou Element (pont live → canaux shader, ignoré par toMediaUrl)
  */
 export type SonicMediaRef = {
     url?: string;
@@ -12,7 +13,40 @@ export type SonicMediaRef = {
     width?: number;
     height?: number;
     mime?: string;
+    /** Sélecteur `#id` ou référence Element (upload live, pas d’URL). */
+    element?: string | Element;
 };
+/**
+ * Contrat minimal pour qu’un composant Concorde alimente un canal shader
+ * sans JPEG / blob (`channel0="#plateau"` ou `{ element }`).
+ */
+export type SonicFrameSource = {
+    /** Canvas lisible (preserveDrawingBuffer ou 2D). `null` tant que pas prêt. */
+    getFrameCanvas(): HTMLCanvasElement | null;
+    /** Incrémenté après chaque rendu effectif. */
+    readonly frameSeq: number;
+};
+/**
+ * Producteur de frames live qui peut rester actif hors viewport
+ * tant qu’un consommateur est enregistré (`sonic-3d` Lot 9).
+ */
+export type SonicFrameConsumerHost = {
+    registerFrameConsumer(token?: object): void;
+    unregisterFrameConsumer(token?: object): void;
+};
+export declare function isFrameSource(el: unknown): el is SonicFrameSource;
+export declare function isFrameConsumerHost(el: unknown): el is SonicFrameConsumerHost;
+/** Suit les `#id` résolus → register/unregister auprès du producteur. */
+export declare class FrameConsumerRegistry {
+    private tokens;
+    sync(elements: Iterable<Element | null | undefined>): void;
+    clear(): void;
+}
+/** Enregistre un Element sans id → clé `#__sonic_frame_N` (réutilisée). */
+export declare function registerLiveElement(el: Element): string;
+export declare function lookupLiveElement(key: string): Element | null;
+/** Normalise `element` DP → clé canal (`#id` ou live). */
+export declare function mediaElementKey(value: unknown): string | null;
 /** Objet image sérialisé (sortie HF / extract) : Blob + dimensions. */
 export declare function isMediaBlobObject(value: unknown): value is SonicMediaRef & {
     blob: Blob;

package/dist/types/core/utils/mediaRef.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"mediaRef.d.ts","sourceRoot":"","sources":["../../../../src/core/utils/mediaRef.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,MAAM,MAAM,aAAa,GAAG;IAC1B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,uEAAuE;AACvE,wBAAgB,iBAAiB,CAC/B,KAAK,EAAE,OAAO,GACb,KAAK,IAAI,aAAa,GAAG;IAAE,IAAI,EAAE,IAAI,CAAA;CAAE,CAWzC;AAaD,wBAAgB,UAAU,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM,GAAG,IAAI,CAMxD;AAED;;;;GAIG;AACH,wBAAgB,eAAe,CAC7B,KAAK,EAAE,OAAO,EACd,OAAO,EAAE,MAAM,EAAE,GAChB,OAAO,CAqBT;AAED,0DAA0D;AAC1D,wBAAgB,eAAe,CAAC,IAAI,EAAE,QAAQ,CAAC,MAAM,CAAC,GAAG,IAAI,CAQ5D;AAED;;;GAGG;AACH,wBAAsB,aAAa,CACjC,KAAK,EAAE,OAAO,GACb,OAAO,CAAC,aAAa,GAAG,IAAI,CAAC,CA6B/B"}
+{"version":3,"file":"mediaRef.d.ts","sourceRoot":"","sources":["../../../../src/core/utils/mediaRef.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,MAAM,MAAM,aAAa,GAAG;IAC1B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,qEAAqE;IACrE,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;CAC5B,CAAC;AAEF;;;GAGG;AACH,MAAM,MAAM,gBAAgB,GAAG;IAC7B,8EAA8E;IAC9E,cAAc,IAAI,iBAAiB,GAAG,IAAI,CAAC;IAC3C,8CAA8C;IAC9C,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;CAC3B,CAAC;AAEF;;;GAGG;AACH,MAAM,MAAM,sBAAsB,GAAG;IACnC,qBAAqB,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5C,uBAAuB,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC/C,CAAC;AAEF,wBAAgB,aAAa,CAAC,EAAE,EAAE,OAAO,GAAG,EAAE,IAAI,gBAAgB,CAMjE;AAED,wBAAgB,mBAAmB,CAAC,EAAE,EAAE,OAAO,GAAG,EAAE,IAAI,sBAAsB,CAO7E;AAED,yEAAyE;AACzE,qBAAa,qBAAqB;IAChC,OAAO,CAAC,MAAM,CAA8B;IAE5C,IAAI,CAAC,QAAQ,EAAE,QAAQ,CAAC,OAAO,GAAG,IAAI,GAAG,SAAS,CAAC;IAkBnD,KAAK;CAGN;AAQD,2EAA2E;AAC3E,wBAAgB,mBAAmB,CAAC,EAAE,EAAE,OAAO,GAAG,MAAM,CAOvD;AAED,wBAAgB,iBAAiB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,GAAG,IAAI,CAQ7D;AAED,0DAA0D;AAC1D,wBAAgB,eAAe,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM,GAAG,IAAI,CAY7D;AAED,uEAAuE;AACvE,wBAAgB,iBAAiB,CAC/B,KAAK,EAAE,OAAO,GACb,KAAK,IAAI,aAAa,GAAG;IAAE,IAAI,EAAE,IAAI,CAAA;CAAE,CAWzC;AAaD,wBAAgB,UAAU,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM,GAAG,IAAI,CAMxD;AAED;;;;GAIG;AACH,wBAAgB,eAAe,CAC7B,KAAK,EAAE,OAAO,EACd,OAAO,EAAE,MAAM,EAAE,GAChB,OAAO,CAqBT;AAED,0DAA0D;AAC1D,wBAAgB,eAAe,CAAC,IAAI,EAAE,QAAQ,CAAC,MAAM,CAAC,GAAG,IAAI,CAQ5D;AAED;;;GAGG;AACH,wBAAsB,aAAa,CACjC,KAAK,EAAE,OAAO,GACb,OAAO,CAAC,aAAa,GAAG,IAAI,CAAC,CA6B/B"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@supersoniks/concorde",
-  "version": "4.9.97-visual-stack.0",
+  "version": "4.9.98-visual-stack.1",
   "license": "MIT",
   "type": "module",
   "main": "",
@@ -178,6 +178,18 @@
       "types": "./dist/types/core/components/functional/3d/frame-capture.d.ts",
       "default": "./dist/js/core/components/functional/3d/frame-capture.js"
     },
+    "./frame-source": {
+      "types": "./dist/types/core/components/functional/3d/frame-source.d.ts",
+      "default": "./dist/js/core/components/functional/3d/frame-source.js"
+    },
+    "./functional/frame-source": {
+      "types": "./dist/types/core/components/functional/3d/frame-source.d.ts",
+      "default": "./dist/js/core/components/functional/3d/frame-source.js"
+    },
+    "./functional/3d/frame-source": {
+      "types": "./dist/types/core/components/functional/3d/frame-source.d.ts",
+      "default": "./dist/js/core/components/functional/3d/frame-source.js"
+    },
     "./gl": {
       "types": "./dist/types/core/components/functional/3d/gl.d.ts",
       "default": "./dist/js/core/components/functional/3d/gl.js"
@@ -310,6 +322,42 @@
       "types": "./dist/types/core/components/functional/3d/pointer.d.ts",
       "default": "./dist/js/core/components/functional/3d/pointer.js"
     },
+    "./post-bind": {
+      "types": "./dist/types/core/components/functional/3d/post-bind.d.ts",
+      "default": "./dist/js/core/components/functional/3d/post-bind.js"
+    },
+    "./functional/post-bind": {
+      "types": "./dist/types/core/components/functional/3d/post-bind.d.ts",
+      "default": "./dist/js/core/components/functional/3d/post-bind.js"
+    },
+    "./functional/3d/post-bind": {
+      "types": "./dist/types/core/components/functional/3d/post-bind.d.ts",
+      "default": "./dist/js/core/components/functional/3d/post-bind.js"
+    },
+    "./post-channels": {
+      "types": "./dist/types/core/components/functional/3d/post-channels.d.ts",
+      "default": "./dist/js/core/components/functional/3d/post-channels.js"
+    },
+    "./functional/post-channels": {
+      "types": "./dist/types/core/components/functional/3d/post-channels.d.ts",
+      "default": "./dist/js/core/components/functional/3d/post-channels.js"
+    },
+    "./functional/3d/post-channels": {
+      "types": "./dist/types/core/components/functional/3d/post-channels.d.ts",
+      "default": "./dist/js/core/components/functional/3d/post-channels.js"
+    },
+    "./post-fx": {
+      "types": "./dist/types/core/components/functional/3d/post-fx.d.ts",
+      "default": "./dist/js/core/components/functional/3d/post-fx.js"
+    },
+    "./functional/post-fx": {
+      "types": "./dist/types/core/components/functional/3d/post-fx.d.ts",
+      "default": "./dist/js/core/components/functional/3d/post-fx.js"
+    },
+    "./functional/3d/post-fx": {
+      "types": "./dist/types/core/components/functional/3d/post-fx.d.ts",
+      "default": "./dist/js/core/components/functional/3d/post-fx.js"
+    },
     "./props": {
       "types": "./dist/types/core/components/functional/3d/props.d.ts",
       "default": "./dist/js/core/components/functional/3d/props.js"

package/src/core/components/functional/3d/3d.md

@@ -85,7 +85,9 @@ Le viewer lit `asset` ou `src` depuis le DP — la source (fetch, upload, HF) n
 | `fit` | Fit bbox après load (défaut true) |
 | `pick` | Survol highlight + clic → event `pick` + `hit*` ; double-clic = fit |
 | `play` / `play-on-hover` | Boucle RAF |
-| `release-offscreen` | Dispose renderer hors viewport (défaut true) |
+| `play-offscreen` | Garde RAF / runtime hors viewport (pont live `#id`) |
+| `release-offscreen` | Dispose renderer hors viewport (défaut true) sauf si `play-offscreen` / consommateur live |
+| `damping` | Inertie OrbitControls (défaut `0.08`, `0` = off) |
 | `dpr-max` | Cap devicePixelRatio (défaut 2) |
 | `dataProvider` / `out-data-provider` | Entrée / sortie |
 | `out-interval` | Throttle publication ms (défaut 80) |
@@ -109,10 +111,51 @@ Le viewer lit `asset` ou `src` depuis le DP — la source (fetch, upload, HF) n
 
 ## Shader bridging
 
-No shared WebGL context between `sonic-3d` and `sonic-shader`. Bridge: `frame-out` publishes `frameUrl` + `snapshot` (`SonicMediaRef`) to the DP → shader channels.
+No shared WebGL context between `sonic-3d` and `sonic-shader`.
 
-**Note:** each new snapshot **revokes** the previous ObjectURL. To freeze a frame (HF / shader), clone with `cloneMediaRef` — otherwise `Failed to load texture: blob:…`.
+| Need | Bridge |
+|------|--------|
+| **Live post** | `channel0="#plateau"` on `sonic-shader` (or DP `{ element }`) — canvas copy each frame via `SonicFrameSource` |
+| **Export / HF / freeze** | `frame-out` → `frameUrl` + `snapshot` (`SonicMediaRef` JPEG). Clone with `cloneMediaRef` before holding a frame |
 
 ```html
+<!-- Live -->
+<sonic-3d id="plateau" play auto-rotate …></sonic-3d>
+<sonic-shader channel0="#plateau" image="…" play></sonic-shader>
+
+<!-- Export / freeze -->
 <sonic-3d frame-out out-data-provider="view3d" snapshot-interval="250" …></sonic-3d>
 ```
+
+Demo: [Visual stack — 3D → shader live](#docs/_misc/visual-stack.md/visual-stack).
+
+Un `sonic-shader` / `sonic-webgpu` qui pointe `#id` s’enregistre via `registerFrameConsumer` : le 3D **continue hors viewport** (pas de dispose). Option explicite : `play-offscreen`.
+
+### Arrêt net
+
+`el.stopMotion()` coupe `autoRotate` et l’inertie OrbitControls. Quand la caméra est immobile depuis ~8 frames : event `rest` + champ out `moving: 0|1`. Attribut `damping` (défaut `0.08`, `0` = off).
+
+## Post FX (in-viewer)
+
+When `post-image` is set, the scene renders to an offscreen target with a **depth texture**, then ShaderToy-style passes run inside the same Three context (`post-buffer-a`…`post-image`). Same GLSL as `sonic-shader` (`mainImage`, `iChannel0–3`, `uParam0–3`, `sonicLinearDepth`).
+
+| Channel token | Source |
+|---------------|--------|
+| `scene` (default ch0) | Color render target |
+| `depth` | Depth texture from the scene pass |
+| `buffer-a`…`d` | Ping-pong buffers |
+| URL / `#id` | External texture (same as shader live bridge) |
+
+```html
+<sonic-3d
+  post-image="…GLSL…"
+  post-image-ch0="scene"
+  post-image-ch1="depth"
+  param0="0.5"
+  post-scale="1"
+></sonic-3d>
+```
+
+Demo: [Visual stack — post depth edges](#docs/_misc/visual-stack.md/visual-stack).
+
+Pick / orbit still use scene geometry; `frame-out` captures the **final** canvas after post.

package/src/core/components/functional/3d/3d.spec.ts

@@ -169,3 +169,45 @@ describe("orbit.wheelAffectsZoom", () => {
     expect(orbit.wheelAffectsZoom(atMaxZoom, 1)).toBe(true);
   });
 });
+
+describe("wantsOffscreenPlay / frame consumers", () => {
+  it("playOffscreen ou consumers → true", async () => {
+    const { wantsOffscreenPlay } = await import("./playback");
+    expect(wantsOffscreenPlay({ playOffscreen: false, frameConsumerCount: 0 })).toBe(
+      false,
+    );
+    expect(wantsOffscreenPlay({ playOffscreen: true, frameConsumerCount: 0 })).toBe(
+      true,
+    );
+    expect(wantsOffscreenPlay({ playOffscreen: false, frameConsumerCount: 1 })).toBe(
+      true,
+    );
+  });
+
+  it("registerFrameConsumer incrémente le compteur", async () => {
+    const el = TestUtils.bootstrap(
+      `<sonic-3d style="width:64px;height:64px"></sonic-3d>`,
+      true,
+    )[0] as Sonic3d;
+    await el.updateComplete;
+    expect(el.frameConsumerCount).toBe(0);
+    const token = {};
+    el.registerFrameConsumer(token);
+    expect(el.frameConsumerCount).toBe(1);
+    expect(el.playOffscreen).toBe(false);
+    el.unregisterFrameConsumer(token);
+    expect(el.frameConsumerCount).toBe(0);
+  });
+
+  it("stopMotion coupe autoRotate", async () => {
+    const el = TestUtils.bootstrap(
+      `<sonic-3d auto-rotate style="width:64px;height:64px"></sonic-3d>`,
+      true,
+    )[0] as Sonic3d;
+    await el.updateComplete;
+    expect(el.autoRotate).toBe(true);
+    el.stopMotion();
+    expect(el.autoRotate).toBe(false);
+    expect(el.moving).toBe(0);
+  });
+});

package/src/core/components/functional/3d/3d.ts

@@ -1,9 +1,11 @@
 import { html } from "lit";
 import { customElement, state } from "lit/decorators.js";
 import { PublisherManager } from "@supersoniks/concorde/utils";
+import { ensure } from "./ensure";
 import { formBind, type FormOrbit } from "./form-bind";
 import { life } from "./life";
 import { outPublish } from "./out-publish";
+import { postBind } from "./post-bind";
 import type { SceneHit } from "./pick";
 import { playback } from "./playback";
 import { pointer } from "./pointer";
@@ -13,6 +15,8 @@ import { sonic3dStyles } from "./styles";
 import { propUpdate } from "./updated";
 import { wire } from "./wire";
 
+/** Frames sans mouvement avant `rest` / `moving=0`. */
+const REST_STILL_FRAMES = 8;
 /**
  * Viewer 3D Concorde (Three.js) — glTF/GLB, caméra orbit/perspective/ortho,
  * outputs dataProvider paresseux. Opt-in : `@supersoniks/concorde/3d`.
@@ -21,7 +25,7 @@ import { wire } from "./wire";
 export class Sonic3d extends Sonic3dProps {
   static styles = sonic3dStyles;
 
-  @state() private errorMessage = "";
+  @state() errorMessage = "";
 
   /** État runtime partagé avec les helpers (lu ici pour noUnusedLocals). */
   runtime: SceneRuntime | null = null;
@@ -46,7 +50,22 @@ export class Sonic3d extends Sonic3dProps {
   snapshotBusy = false;
   frameUrls: string[] = [];
   snapshotSeq = 0;
+  /** Contrat SonicFrameSource — incrémenté après chaque render. */
+  frameSeq = 0;
+  lastDrawAt = 0;
   lastFormOrbit: FormOrbit | null = null;
+  /** Consommateurs live (`registerFrameConsumer`). */
+  private frameConsumers = new Set<object>();
+  /** 1 si caméra en mouvement, 0 sinon (publié en out). */
+  moving = 0;
+  private stillFrames = 0;
+  private lastMotionYaw = NaN;
+  private lastMotionPitch = NaN;
+  private lastMotionDist = NaN;
+
+  get frameConsumerCount() {
+    return this.frameConsumers.size;
+  }
 
   onFormMutation = () => {
     const data = (this.formPublisher?.get() ?? {}) as Record<string, unknown>;
@@ -135,8 +154,93 @@ export class Sonic3d extends Sonic3dProps {
   private drawFrame(now: number) {
     if (!this.runtime || !this.ready) return;
     this.frame++;
+    const time = (now - this.startTime) / 1000;
+    const timeDelta = Math.max(0, (now - this.lastDrawAt) / 1000);
+    this.lastDrawAt = now;
+    postBind.syncFrame(this as never, time, timeDelta, this.frame);
     this.runtime.render();
-    outPublish.maybePublish(this as never, now, (now - this.startTime) / 1000);
+    this.frameSeq++;
+    this.trackMotion(time);
+    outPublish.maybePublish(this as never, now, time);
+  }
+
+  /**
+   * Enregistre un consommateur live (`sonic-shader` / `sonic-webgpu` via `#id`).
+   * Garde le RAF hors viewport tant qu’il reste au moins un token.
+   */
+  registerFrameConsumer(token: object = {}) {
+    this.frameConsumers.add(token);
+    ensure.syncVisibility(this as never);
+  }
+
+  unregisterFrameConsumer(token: object = {}) {
+    this.frameConsumers.delete(token);
+    ensure.syncVisibility(this as never);
+  }
+
+  /**
+   * Coupe `autoRotate` + inertie OrbitControls.
+   * Émet `rest` si la caméra était en mouvement.
+   */
+  stopMotion() {
+    this.autoRotate = false;
+    this.runtime?.stopMotion();
+    this.stillFrames = REST_STILL_FRAMES;
+    if (this.moving !== 0) {
+      this.moving = 0;
+      this.dispatchEvent(
+        new CustomEvent("rest", {
+          detail: { moving: 0 },
+          bubbles: true,
+          composed: true,
+        }),
+      );
+    }
+    this.syncPlayback();
+  }
+
+  private trackMotion(time: number) {
+    if (!this.runtime) return;
+    const snap = this.runtime.snapshot({
+      time,
+      frame: this.frame,
+      hovering: this.hovering ? 1 : 0,
+      pointerX: this.pointerX,
+      pointerY: this.pointerY,
+      hit: this.lastHit,
+    });
+    const eps = 1e-5;
+    const still =
+      Number.isFinite(this.lastMotionYaw) &&
+      Math.abs(snap.yaw - this.lastMotionYaw) < eps &&
+      Math.abs(snap.pitch - this.lastMotionPitch) < eps &&
+      Math.abs(snap.distance - this.lastMotionDist) < eps &&
+      !this.autoRotate;
+    this.lastMotionYaw = snap.yaw;
+    this.lastMotionPitch = snap.pitch;
+    this.lastMotionDist = snap.distance;
+    if (still) {
+      this.stillFrames++;
+      if (this.stillFrames >= REST_STILL_FRAMES && this.moving !== 0) {
+        this.moving = 0;
+        this.dispatchEvent(
+          new CustomEvent("rest", {
+            detail: { moving: 0, yaw: snap.yaw, pitch: snap.pitch },
+            bubbles: true,
+            composed: true,
+          }),
+        );
+      }
+    } else {
+      this.stillFrames = 0;
+      this.moving = 1;
+    }
+  }
+
+  /** Contrat SonicFrameSource — canvas Three (preserveDrawingBuffer). */
+  getFrameCanvas(): HTMLCanvasElement | null {
+    if (!this.runtime || !this.ready) return null;
+    return this.runtime.renderer.domElement;
   }
 
   onPointerMove = (e: PointerEvent) => pointer.onMove(this as never, e);
@@ -161,12 +265,17 @@ export type {
   Sonic3dConfig,
   Sonic3dOutput,
 } from "./types";
-export type { SonicMediaRef } from "@supersoniks/concorde/core/utils/mediaRef";
+export type { SonicMediaRef, SonicFrameSource, SonicFrameConsumerHost } from "@supersoniks/concorde/core/utils/mediaRef";
 export {
   toMediaUrl,
   cloneMediaRef,
+  isFrameSource,
+  isFrameConsumerHost,
+  FrameConsumerRegistry,
 } from "@supersoniks/concorde/core/utils/mediaRef";
+export { wantsOffscreenPlay } from "./playback";
 export { frameCapture } from "./frame-capture";
+export { frameSource } from "./frame-source";
 
 declare global {
   interface HTMLElementTagNameMap {

package/src/core/components/functional/3d/constants.ts

@@ -93,6 +93,9 @@ export const OUT_CONSUMER_KEYS = [
   /** Canvas → ObjectURL (SonicMediaRef) pour chaînage shader. */
   "frameUrl",
   "snapshot",
+  /** Pont live → sonic-shader (`{ element }`), publié une fois au ready. */
+  "frameSource",
+  "moving",
 ] as const;
 
 export type Sonic3dFormControlKey = (typeof FORM_CONTROL_KEYS)[number];

package/src/core/components/functional/3d/ensure.ts

@@ -1,6 +1,6 @@
 import type { Sonic3dCameraMode } from "./constants";
 import { parse } from "./parse";
-import { playback } from "./playback";
+import { playback, wantsOffscreenPlay } from "./playback";
 import { reload } from "./reload";
 import { SceneRuntime } from "./scene-runtime";
 
@@ -16,10 +16,13 @@ export type EnsureHost = {
   maxDistance: number;
   minPolar: number;
   maxPolar: number;
+  damping: number;
   loadToken: number;
   ready: boolean;
   inView: boolean;
   releaseOffscreen: boolean;
+  playOffscreen: boolean;
+  frameConsumerCount: number;
   getBoundingClientRect: () => DOMRect;
   clientWidth: number;
   clientHeight: number;
@@ -52,6 +55,7 @@ async function ensureRuntime(host: EnsureHost) {
       minPolar: reload.degToRad(host.minPolar),
       maxPolar: reload.degToRad(host.maxPolar),
     });
+    host.runtime.setDamping(host.damping);
     reload.applyOrbitLimits(host as never);
     syncSize(host);
     await reload.run(host as never);
@@ -71,11 +75,15 @@ function releaseRuntime(host: EnsureHost) {
 }
 
 function syncVisibility(host: EnsureHost) {
-  if (!host.inView && host.releaseOffscreen) {
+  const keepOffscreen = wantsOffscreenPlay(host);
+  if (!host.inView && host.releaseOffscreen && !keepOffscreen) {
     releaseRuntime(host);
     return;
   }
-  if (host.inView && (!host.runtime || host.runtime.isLost)) {
+  if (
+    (!host.runtime || host.runtime.isLost) &&
+    (host.inView || keepOffscreen || !host.releaseOffscreen)
+  ) {
     void ensureRuntime(host);
     return;
   }

package/src/core/components/functional/3d/form-params.ts

@@ -2,6 +2,7 @@ import { ORBIT_CHANGE_EPSILON } from "./constants";
 import { formFields } from "./form-fields";
 import { parse } from "./parse";
 import { playback } from "./playback";
+import { postBind } from "./post-bind";
 import { reload } from "./reload";
 import type { SceneRuntime } from "./runtime";
 import type { Sonic3dAsset, Sonic3dCameraMode } from "./types";
@@ -91,6 +92,7 @@ function applyFormParams(host: FormBindHost, data: Record<string, unknown>) {
 
   formFields.pushToRuntime(host, data);
   applyFormOrbit(host, data);
+  postBind.applyFormPost(host as never, data);
   if (needReload) void reload.run(host as never);
 }
 

package/src/core/components/functional/3d/frame-source.ts

@@ -0,0 +1,30 @@
+import { publisherFieldHasListener } from "./publisher-listen";
+
+type OutPublisherLike = {
+  _proxies_?: Map<string, { hasListener?: () => boolean }>;
+  frameSource?: { set: (v: unknown) => void };
+};
+
+export type FrameSourceHost = {
+  outPublisher: OutPublisherLike | null;
+  bindOutPublisher: () => void;
+  ready: boolean;
+};
+
+/**
+ * Publie `{ element: host }` une fois au ready si un lecteur écoute `frameSource`.
+ * Aucun coût pendant l’animation.
+ */
+function maybePublish(host: FrameSourceHost & Element) {
+  if (!host.ready) return;
+  if (!host.outPublisher) host.bindOutPublisher();
+  const pub = host.outPublisher;
+  if (!pub || !publisherFieldHasListener(pub, "frameSource")) return;
+  try {
+    pub.frameSource?.set({ element: host });
+  } catch {
+    /* leaf manquant */
+  }
+}
+
+export const frameSource = { maybePublish } as const;

package/src/core/components/functional/3d/life.ts

@@ -1,6 +1,7 @@
 import { PublisherManager } from "@supersoniks/concorde/utils";
 import { ensure } from "./ensure";
 import { formBind } from "./form-bind";
+import { wantsOffscreenPlay } from "./playback";
 import type { SceneRuntime } from "./runtime";
 
 /** Host Lit pour cycle de vie / observers / bind DP. */
@@ -9,6 +10,8 @@ export type LifeHost = {
   dataProvider: string;
   outDataProvider: string;
   releaseOffscreen: boolean;
+  playOffscreen: boolean;
+  frameConsumerCount: number;
   inView: boolean;
   runtime: SceneRuntime | null;
   camera: string;
@@ -86,7 +89,7 @@ function firstUpdated(host: LifeHost) {
   bindFormProvider(host);
   bindOutPublisher(host);
   requestAnimationFrame(() => {
-    if (host.inView || !host.releaseOffscreen) {
+    if (host.inView || !host.releaseOffscreen || wantsOffscreenPlay(host)) {
       void ensure.ensureRuntime(host as never);
     }
   });

package/src/core/components/functional/3d/out-publish.ts

@@ -33,6 +33,7 @@ export type OutPublishHost = {
   pointerY: number;
   lastHit: SceneHit | null;
   fov: number;
+  moving: number;
   formPublisher: OutPublisherLike | null;
   bindOutPublisher: () => void;
   dispatchEvent: (event: Event) => boolean;
@@ -64,7 +65,7 @@ function shouldSkipFormControlOutWrite(
 }
 
 function buildOutput(host: OutPublishHost, time: number): Sonic3dOutput {
-  return (
+  const base =
     host.runtime?.snapshot({
       time,
       frame: host.frame,
@@ -91,8 +92,8 @@ function buildOutput(host: OutPublishHost, time: number): Sonic3dOutput {
       distance: 0,
       yaw: 0,
       pitch: 0,
-    }
-  );
+    };
+  return { ...base, moving: host.moving };
 }
 
 function writePayload(host: OutPublishHost, payload: Sonic3dOutput) {

package/src/core/components/functional/3d/playback.ts

@@ -8,10 +8,21 @@ export type PlaybackHost = {
   playOnHover: boolean;
   hovering: boolean;
   autoRotate: boolean;
+  playOffscreen: boolean;
+  /** Nombre de consommateurs live (`registerFrameConsumer`). */
+  frameConsumerCount: number;
   raf: number;
   drawFrame: (now: number) => void;
 };
 
+/** Hors écran : jouer si `play-offscreen` ou au moins un consommateur live. */
+export function wantsOffscreenPlay(host: {
+  playOffscreen: boolean;
+  frameConsumerCount: number;
+}): boolean {
+  return !!host.playOffscreen || host.frameConsumerCount > 0;
+}
+
 function prefersReducedMotion(): boolean {
   return (
     typeof matchMedia === "function" &&
@@ -22,7 +33,7 @@ function prefersReducedMotion(): boolean {
 function shouldAnimate(host: PlaybackHost): boolean {
   if (!host.play) return false;
   if (!host.ready) return false;
-  if (!host.inView) return false;
+  if (!host.inView && !wantsOffscreenPlay(host)) return false;
   if (!host.runtime) return false;
   if (prefersReducedMotion()) return false;
   if (host.playOnHover) return host.hovering;
@@ -64,6 +75,7 @@ function syncPlayback(host: PlaybackHost, loop: () => void) {
 export const playback = {
   prefersReducedMotion,
   shouldAnimate,
+  wantsOffscreenPlay,
   syncAutoRotate,
   syncPlayback,
   stopLoop,