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

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

@@ -34,8 +34,19 @@ export class Sonic3dProps extends LitElement {
   @property({ type: Boolean }) pick = false;
   @property({ type: Boolean, reflect: true }) play = true;
   @property({ type: Boolean, attribute: "play-on-hover" }) playOnHover = false;
+  /**
+   * Garde le RAF / runtime hors viewport (pont live `#id`).
+   * Aussi auto si un consommateur a appelé `registerFrameConsumer`.
+   */
+  @property({ type: Boolean, attribute: "play-offscreen" })
+  playOffscreen = false;
   @property({ type: Boolean, attribute: "release-offscreen" })
   releaseOffscreen = true;
+  /**
+   * Inertie OrbitControls (`dampingFactor`). `0` = pas d’inertie.
+   * Défaut `0.08`.
+   */
+  @property({ type: Number }) damping = 0.08;
   @property({ type: Number, attribute: "dpr-max" }) dprMax = 2;
   @property({ type: String, attribute: "aspect-ratio" }) aspectRatio = "";
   @property({ type: String }) dataProvider = "";
@@ -47,4 +58,38 @@ export class Sonic3dProps extends LitElement {
   snapshotInterval = DEFAULT_SNAPSHOT_INTERVAL_MS;
   /** Publie `frameUrl` / `snapshot` (canvas) pour chaînage shader / jsonata. */
   @property({ type: Boolean, attribute: "frame-out" }) frameOut = false;
+
+  /* —— Post FX (Lot 2) : passes ShaderToy dans le contexte Three —— */
+  @property({ attribute: "post-image" }) postImage = "";
+  @property({ attribute: "post-buffer-a" }) postBufferA = "";
+  @property({ attribute: "post-buffer-b" }) postBufferB = "";
+  @property({ attribute: "post-buffer-c" }) postBufferC = "";
+  @property({ attribute: "post-buffer-d" }) postBufferD = "";
+  @property({ attribute: "post-common" }) postCommon = "";
+  @property({ attribute: "post-image-ch0" }) postImageCh0 = "";
+  @property({ attribute: "post-image-ch1" }) postImageCh1 = "";
+  @property({ attribute: "post-image-ch2" }) postImageCh2 = "";
+  @property({ attribute: "post-image-ch3" }) postImageCh3 = "";
+  @property({ attribute: "post-buffer-a-ch0" }) postBufferACh0 = "";
+  @property({ attribute: "post-buffer-a-ch1" }) postBufferACh1 = "";
+  @property({ attribute: "post-buffer-a-ch2" }) postBufferACh2 = "";
+  @property({ attribute: "post-buffer-a-ch3" }) postBufferACh3 = "";
+  @property({ attribute: "post-buffer-b-ch0" }) postBufferBCh0 = "";
+  @property({ attribute: "post-buffer-b-ch1" }) postBufferBCh1 = "";
+  @property({ attribute: "post-buffer-b-ch2" }) postBufferBCh2 = "";
+  @property({ attribute: "post-buffer-b-ch3" }) postBufferBCh3 = "";
+  @property({ attribute: "post-buffer-c-ch0" }) postBufferCCh0 = "";
+  @property({ attribute: "post-buffer-c-ch1" }) postBufferCCh1 = "";
+  @property({ attribute: "post-buffer-c-ch2" }) postBufferCCh2 = "";
+  @property({ attribute: "post-buffer-c-ch3" }) postBufferCCh3 = "";
+  @property({ attribute: "post-buffer-d-ch0" }) postBufferDCh0 = "";
+  @property({ attribute: "post-buffer-d-ch1" }) postBufferDCh1 = "";
+  @property({ attribute: "post-buffer-d-ch2" }) postBufferDCh2 = "";
+  @property({ attribute: "post-buffer-d-ch3" }) postBufferDCh3 = "";
+  @property({ type: Number }) param0 = 0;
+  @property({ type: Number }) param1 = 0;
+  @property({ type: Number }) param2 = 0;
+  @property({ type: Number }) param3 = 0;
+  /** Échelle des cibles post (0.25–1, défaut 1). */
+  @property({ type: Number, attribute: "post-scale" }) postScale = 1;
 }

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

@@ -2,6 +2,7 @@ import { PublisherManager } from "@supersoniks/concorde/utils";
 import { asset } from "./asset";
 import type { FormOrbit } from "./form-params";
 import { frameSource } from "./frame-source";
+import { postBind } from "./post-bind";
 import { playback } from "./playback";
 import type { SceneRuntime } from "./runtime";
 import type { Sonic3dAsset } from "./types";
@@ -49,6 +50,7 @@ async function run(host: ReloadHost) {
     host.runtime.render();
     host.frameSeq++;
     host.syncPlayback();
+    postBind.applyConfig(host as never);
     frameSource.maybePublish(host as never);
     host.dispatchEvent(
       new CustomEvent("ready", {

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

@@ -6,14 +6,22 @@ import { bootScene } from "./boot";
 import { ops, type OpsCtx } from "./ops";
 import type { SceneRuntimeOptions } from "./opts";
 import type { SceneHit } from "./pick";
+import {
+  PostFxCompileError,
+  PostFxPipeline,
+  type PostFxConfig,
+  type PostFxUniforms,
+} from "./post-fx";
 import { tune, type TuneCtx } from "./tune";
 import type { Sonic3dAsset, Sonic3dOutput } from "./types";
 import { view, type ViewCtx } from "./view";
 
 export type { SceneHit, SceneRuntimeOptions };
+export { PostFxCompileError };
+export type { PostFxConfig, PostFxUniforms };
 
 /**
- * Runtime Three.js encapsulé : renderer, scène, caméra, load, fit, pick.
+ * Runtime Three.js encapsulé : renderer, scène, caméra, load, fit, pick, post FX.
  * Le composant Lit gère RAF / viewport / DP.
  */
 export class SceneRuntime {
@@ -46,6 +54,19 @@ export class SceneRuntime {
   private highlighted: THREE.Mesh | null = null;
   private prevEmissive = new THREE.Color();
   private prevEmissiveIntensity = 0;
+  private postFx: PostFxPipeline;
+  private lastCssW = 1;
+  private lastCssH = 1;
+  private damping = 0.08;
+  private postFrame: PostFxUniforms = {
+    time: 0,
+    timeDelta: 1 / 60,
+    frame: 0,
+    mouse: [0, 0, 0, 0],
+    params: [0, 0, 0, 0],
+    near: 0.1,
+    far: 100,
+  };
 
   constructor(opts: SceneRuntimeOptions) {
     const b = bootScene(opts);
@@ -62,9 +83,32 @@ export class SceneRuntime {
     this.fov = b.fov;
     this.fitEnabled = b.fitEnabled;
     this.limits = b.limits;
+    this.postFx = new PostFxPipeline(this.renderer);
     this.applyCameraMode(this.mode);
     if (b.autoRotate) this.setAutoRotate(true);
-    void [this.canvas, this.perspCam, this.orthoCam, this.root, this.content, this.lights, this.loader, this.loadToken, this.blobUrl, this.dprMax, this.fov, this.fitEnabled, this.limits, this.bbox, this.target, this.raycaster, this.pointerNdc, this.highlighted, this.prevEmissive, this.prevEmissiveIntensity, this.unbindWheelRelay];
+    void [
+      this.canvas,
+      this.perspCam,
+      this.orthoCam,
+      this.root,
+      this.content,
+      this.lights,
+      this.loader,
+      this.loadToken,
+      this.blobUrl,
+      this.dprMax,
+      this.fov,
+      this.fitEnabled,
+      this.limits,
+      this.bbox,
+      this.target,
+      this.raycaster,
+      this.pointerNdc,
+      this.highlighted,
+      this.prevEmissive,
+      this.prevEmissiveIntensity,
+      this.unbindWheelRelay,
+    ];
   }
 
   get ready() {
@@ -79,6 +123,9 @@ export class SceneRuntime {
   get isLost() {
     return this.renderer.getContext()?.isContextLost?.() ?? false;
   }
+  get hasPostFx() {
+    return this.postFx.isEnabled;
+  }
 
   setDprMax(v: number) {
     tune.setDprMax(this.asTuneCtx(), v);
@@ -95,6 +142,15 @@ export class SceneRuntime {
   setAutoRotate(v: boolean) {
     tune.setAutoRotate(this.asTuneCtx(), v);
   }
+  setDamping(v: number) {
+    this.damping = Number.isFinite(v) ? Math.max(0, v) : 0.08;
+    tune.setDamping(this.asTuneCtx(), this.damping);
+  }
+  /** Coupe autoRotate + inertie OrbitControls. */
+  stopMotion() {
+    tune.setAutoRotate(this.asTuneCtx(), false);
+    tune.stopMotion(this.asTuneCtx());
+  }
   setOrbitLimits(opts: Parameters<typeof tune.setOrbitLimits>[1]) {
     tune.setOrbitLimits(this.asTuneCtx(), opts);
   }
@@ -104,9 +160,17 @@ export class SceneRuntime {
 
   applyCameraMode(mode: Sonic3dCameraMode) {
     view.applyCameraMode(this.asViewCtx(), mode);
+    tune.setDamping(this.asTuneCtx(), this.damping);
   }
   resize(cssW: number, cssH: number) {
+    this.lastCssW = cssW;
+    this.lastCssH = cssH;
     view.resize(this.asViewCtx(), cssW, cssH);
+    const dpr = Math.min(
+      typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1,
+      this.dprMax,
+    );
+    this.postFx.resize(cssW * dpr, cssH * dpr);
   }
   async load(asset: Sonic3dAsset | null) {
     return ops.runLoad(this.asOpsCtx(), asset);
@@ -114,9 +178,34 @@ export class SceneRuntime {
   fitToContent() {
     ops.fitToContent(this.asOpsCtx());
   }
+
+  setPostConfig(config: PostFxConfig | null) {
+    this.postFx.setConfig(config);
+    if (config && this.lastCssW > 0) {
+      this.resize(this.lastCssW, this.lastCssH);
+    }
+  }
+
+  setPostElementResolver(fn: ((key: string) => Element | null) | null) {
+    this.postFx.setElementResolver(fn);
+  }
+
+  setPostFrame(frame: Partial<PostFxUniforms>) {
+    Object.assign(this.postFrame, frame);
+    const cam = this.activeCam as THREE.PerspectiveCamera;
+    if ("near" in cam && "far" in cam) {
+      this.postFrame.near = cam.near;
+      this.postFrame.far = cam.far;
+    }
+  }
+
   render() {
     this.controls?.update();
-    this.renderer.render(this.scene, this.activeCam);
+    if (this.postFx.isEnabled) {
+      this.postFx.render(this.scene, this.activeCam, this.postFrame);
+    } else {
+      this.renderer.render(this.scene, this.activeCam);
+    }
   }
   pick(normX: number, normY: number): SceneHit | null {
     return ops.pick(this.asOpsCtx(), normX, normY);
@@ -138,6 +227,7 @@ export class SceneRuntime {
     return ops.buildSnapshot(this.asOpsCtx(), base);
   }
   dispose(loseContext = false) {
+    this.postFx.dispose();
     ops.dispose(this.asOpsCtx(), loseContext);
   }
 
@@ -145,4 +235,3 @@ export class SceneRuntime {
   private asViewCtx = () => this as unknown as ViewCtx;
   private asOpsCtx = () => this as unknown as OpsCtx;
 }
-

package/src/core/components/functional/3d/scene-runtime.ts

@@ -4,6 +4,9 @@
  */
 export {
   SceneRuntime,
+  PostFxCompileError,
   type SceneHit,
   type SceneRuntimeOptions,
+  type PostFxConfig,
+  type PostFxUniforms,
 } from "./runtime";

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

@@ -37,6 +37,25 @@ function setAutoRotate(ctx: TuneCtx, v: boolean) {
   if (ctx.controls) ctx.controls.autoRotate = v;
 }
 
+function setDamping(ctx: TuneCtx, v: number) {
+  if (!ctx.controls) return;
+  const d = Number.isFinite(v) ? Math.max(0, v) : 0.08;
+  ctx.controls.enableDamping = d > 0;
+  ctx.controls.dampingFactor = d > 0 ? d : 0.08;
+}
+
+/** Coupe autoRotate + vide l’inertie OrbitControls. */
+function stopMotion(ctx: TuneCtx) {
+  if (!ctx.controls) return;
+  ctx.controls.autoRotate = false;
+  const wasDamping = ctx.controls.enableDamping;
+  const factor = ctx.controls.dampingFactor;
+  ctx.controls.enableDamping = false;
+  ctx.controls.update();
+  ctx.controls.enableDamping = wasDamping;
+  ctx.controls.dampingFactor = factor;
+}
+
 function setOrbitLimits(ctx: TuneCtx, opts: Partial<OrbitLimits>) {
   ctx.limits = orbit.mergeLimits(ctx.limits, opts);
   orbit.applyLimitsToControls(ctx.controls, ctx.limits);
@@ -67,6 +86,8 @@ export const tune = {
   setFov,
   setFit,
   setAutoRotate,
+  setDamping,
+  stopMotion,
   setOrbitLimits,
   setOrbitSpherical,
 } as const;

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

@@ -65,6 +65,13 @@ export type Sonic3dConfig = {
   playOnHover?: boolean;
   /** Libère le renderer hors viewport (défaut true). */
   releaseOffscreen?: boolean;
+  /**
+   * Garde RAF / runtime hors viewport (pont live).
+   * Aussi auto via `registerFrameConsumer`.
+   */
+  playOffscreen?: boolean;
+  /** Inertie OrbitControls (défaut 0.08, 0 = off). */
+  damping?: number;
   dprMax?: number;
   aspectRatio?: string;
 
@@ -124,6 +131,8 @@ export type Sonic3dOutput = {
   distance: number;
   yaw: number;
   pitch: number;
+  /** 1 si la caméra bouge (orbit / inertie / autoRotate), sinon 0. */
+  moving?: number;
   /** Présents après un pick réussi. */
   hitX?: number;
   hitY?: number;

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

@@ -3,6 +3,7 @@ import type { LifeHost } from "./life";
 import { life } from "./life";
 import { parse } from "./parse";
 import { playback } from "./playback";
+import { postBind } from "./post-bind";
 import { reload } from "./reload";
 
 function hasAny(
@@ -61,10 +62,25 @@ function updated(
   if (changed.has("autoRotate") || changed.has("play")) {
     playback.syncAutoRotate(host as never);
   }
-  if (changed.has("play") || changed.has("playOnHover")) {
+  if (
+    changed.has("play") ||
+    changed.has("playOnHover") ||
+    changed.has("playOffscreen")
+  ) {
     host.syncPlayback();
   }
+  if (changed.has("playOffscreen") || changed.has("releaseOffscreen")) {
+    ensure.syncVisibility(host as never);
+  }
+  if (changed.has("damping") && host.runtime) {
+    host.runtime.setDamping(
+      (host as unknown as { damping: number }).damping,
+    );
+  }
   if (changed.has("src") || changed.has("asset")) void reload.run(host as never);
+  if (postBind.propsChanged(changed)) {
+    postBind.applyConfig(host as never);
+  }
 }
 
 export const propUpdate = { updated } as const;

package/src/core/components/functional/if/if.ts

@@ -1,23 +1,70 @@
 import {css, html, LitElement, nothing} from "lit";
 import {customElement, property} from "lit/decorators.js";
-const tagName = "sonic-if"; // For Astro.build
+import {Subscriber} from "@supersoniks/concorde/mixins";
+
+const tagName = "sonic-if";
+
+function pathGet(obj: unknown, path: string): unknown {
+  if (!path) return obj;
+  let cur: any = obj;
+  for (const p of path.split(".").filter(Boolean)) {
+    if (cur == null) return undefined;
+    cur = cur[p];
+  }
+  return cur;
+}
+
 /**
- * Le composant *sonic-if* affiche son contenu dans le slot principal si sa propriété .condition est évaluée à true
+ * Affiche le slot si `.condition` est true **ou** via attributs SDUI
+ * `dataProvider` + `key` (+ `equals` / `not` / `truthy` / `gt` / `lt`).
  */
 @customElement(tagName)
-export class SonicIF extends LitElement {
+export class SonicIF extends Subscriber(LitElement) {
   static styles = css`
     :host {
       display: contents;
     }
   `;
 
-  /**
-   * Le contenu s'affiche si la condition est évaluée à true.
-   */
+  /** Mode Lit classique. */
   @property({type: Boolean}) condition = false;
+
+  @property({type: String}) key = "";
+
+  @property({type: String}) equals = "";
+
+  @property({type: String}) not = "";
+
+  @property({type: Boolean}) truthy = false;
+
+  @property({type: String}) gt = "";
+
+  @property({type: String}) lt = "";
+
+  private attrMode(): boolean {
+    return Boolean(
+      this.dataProvider &&
+        (this.key ||
+          this.truthy ||
+          this.equals !== "" ||
+          this.not !== "" ||
+          this.gt !== "" ||
+          this.lt !== ""),
+    );
+  }
+
+  private show(): boolean {
+    if (!this.attrMode()) return this.condition;
+    const value = pathGet(this.props, this.key);
+    if (this.equals !== "") return String(value) === this.equals;
+    if (this.not !== "") return String(value) !== this.not;
+    if (this.gt !== "") return Number(value) > Number(this.gt);
+    if (this.lt !== "") return Number(value) < Number(this.lt);
+    return Boolean(value);
+  }
+
   render() {
-    if (!this.condition) return nothing;
+    if (!this.show()) return nothing;
     return html` <slot></slot> `;
   }
 }

package/src/core/components/functional/interactive/action.ts

@@ -0,0 +1,84 @@
+import { LitElement, css, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { dispatch, type SonicActionMessage } from "./registry";
+
+const tagName = "sonic-action";
+
+/**
+ * Wrapper clic → dispatch vers un store.
+ * `hold-repeat="170,50"` pour d-pad tactile.
+ */
+@customElement(tagName)
+export class SonicAction extends LitElement {
+  static styles = css`
+    :host {
+      display: contents;
+    }
+  `;
+
+  @property({ type: String })
+  target = "";
+
+  @property({ type: String })
+  type = "";
+
+  @property({ type: Object })
+  payload: unknown = null;
+
+  @property({ type: String, attribute: "hold-repeat" })
+  holdRepeat = "";
+
+  @property({ type: Boolean, attribute: "dispatch-event" })
+  dispatchEventFlag = false;
+
+  private holdTimer: number | null = null;
+  private holdInterval: number | null = null;
+
+  private onPointerDown = (e: PointerEvent) => {
+    if (e.button != null && e.button !== 0) return;
+    this.emit();
+    const parts = this.holdRepeat.split(",").map((s) => Number(s.trim()));
+    if (parts.length === 2 && parts.every((n) => Number.isFinite(n))) {
+      const [delay, interval] = parts;
+      this.holdTimer = window.setTimeout(() => {
+        this.emit();
+        this.holdInterval = window.setInterval(() => this.emit(), Math.max(16, interval));
+      }, Math.max(0, delay));
+    }
+  };
+
+  private onPointerUp = () => this.clearHold();
+
+  private clearHold(): void {
+    if (this.holdTimer != null) clearTimeout(this.holdTimer);
+    if (this.holdInterval != null) clearInterval(this.holdInterval);
+    this.holdTimer = null;
+    this.holdInterval = null;
+  }
+
+  private emit(): void {
+    if (!this.type) return;
+    const action: SonicActionMessage = { type: this.type, payload: this.payload };
+    if (this.target) dispatch(this.target, action);
+    if (this.dispatchEventFlag) {
+      this.dispatchEvent(
+        new CustomEvent("sonic-action", {
+          detail: action,
+          bubbles: true,
+          composed: true,
+        }),
+      );
+    }
+  }
+
+  render() {
+    return html`<slot
+      @pointerdown=${this.onPointerDown}
+      @pointerup=${this.onPointerUp}
+      @pointercancel=${this.onPointerUp}
+      @pointerleave=${this.onPointerUp}
+    ></slot>`;
+  }
+}
+
+export default SonicAction;