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

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) |
@@ -126,3 +128,34 @@ No shared WebGL context between `sonic-3d` and `sonic-shader`.
 ```
 
 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;
@@ -48,7 +52,20 @@ export class Sonic3d extends Sonic3dProps {
   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>;
@@ -137,9 +154,87 @@ 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();
     this.frameSeq++;
-    outPublish.maybePublish(this as never, now, (now - this.startTime) / 1000);
+    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). */
@@ -170,12 +265,15 @@ export type {
   Sonic3dConfig,
   Sonic3dOutput,
 } from "./types";
-export type { SonicMediaRef, SonicFrameSource } 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";
 

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

@@ -95,6 +95,7 @@ export const OUT_CONSUMER_KEYS = [
   "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/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,

package/src/core/components/functional/3d/post-bind.ts

@@ -0,0 +1,262 @@
+/**
+ * Construit la config PostFx depuis les props Lit / form DP.
+ */
+import { lookupLiveElement } from "@supersoniks/concorde/core/utils/mediaRef";
+import {
+  clampPostScale,
+  parsePostChannelSource,
+  type PostChannels,
+  type PostPassId,
+  type PostSources,
+} from "./post-channels";
+import type { PostFxConfig } from "./post-fx";
+import type { SceneRuntime } from "./runtime";
+
+export type PostBindHost = {
+  postImage: string;
+  postBufferA: string;
+  postBufferB: string;
+  postBufferC: string;
+  postBufferD: string;
+  postCommon: string;
+  postImageCh0: string;
+  postImageCh1: string;
+  postImageCh2: string;
+  postImageCh3: string;
+  postBufferACh0: string;
+  postBufferACh1: string;
+  postBufferACh2: string;
+  postBufferACh3: string;
+  postBufferBCh0: string;
+  postBufferBCh1: string;
+  postBufferBCh2: string;
+  postBufferBCh3: string;
+  postBufferCCh0: string;
+  postBufferCCh1: string;
+  postBufferCCh2: string;
+  postBufferCCh3: string;
+  postBufferDCh0: string;
+  postBufferDCh1: string;
+  postBufferDCh2: string;
+  postBufferDCh3: string;
+  postScale: number;
+  param0: number;
+  param1: number;
+  param2: number;
+  param3: number;
+  runtime: SceneRuntime | null;
+  errorMessage: string;
+  getRootNode: () => Node;
+  dispatchEvent: (event: Event) => boolean;
+};
+
+const POST_PROP_KEYS = [
+  "postImage",
+  "postBufferA",
+  "postBufferB",
+  "postBufferC",
+  "postBufferD",
+  "postCommon",
+  "postImageCh0",
+  "postImageCh1",
+  "postImageCh2",
+  "postImageCh3",
+  "postBufferACh0",
+  "postBufferACh1",
+  "postBufferACh2",
+  "postBufferACh3",
+  "postBufferBCh0",
+  "postBufferBCh1",
+  "postBufferBCh2",
+  "postBufferBCh3",
+  "postBufferCCh0",
+  "postBufferCCh1",
+  "postBufferCCh2",
+  "postBufferCCh3",
+  "postBufferDCh0",
+  "postBufferDCh1",
+  "postBufferDCh2",
+  "postBufferDCh3",
+  "postScale",
+] as const;
+
+function buildChannels(host: PostBindHost, pass: PostPassId): PostChannels {
+  const fallbacks = ["", "", "", ""];
+  // image defaults ch0=scene via parse empty+slot0
+  let overrides: string[] = ["", "", "", ""];
+  if (pass === "image") {
+    overrides = [
+      host.postImageCh0,
+      host.postImageCh1,
+      host.postImageCh2,
+      host.postImageCh3,
+    ];
+  } else if (pass === "bufferA") {
+    overrides = [
+      host.postBufferACh0,
+      host.postBufferACh1,
+      host.postBufferACh2,
+      host.postBufferACh3,
+    ];
+  } else if (pass === "bufferB") {
+    overrides = [
+      host.postBufferBCh0,
+      host.postBufferBCh1,
+      host.postBufferBCh2,
+      host.postBufferBCh3,
+    ];
+  } else if (pass === "bufferC") {
+    overrides = [
+      host.postBufferCCh0,
+      host.postBufferCCh1,
+      host.postBufferCCh2,
+      host.postBufferCCh3,
+    ];
+  } else {
+    overrides = [
+      host.postBufferDCh0,
+      host.postBufferDCh1,
+      host.postBufferDCh2,
+      host.postBufferDCh3,
+    ];
+  }
+  return [0, 1, 2, 3].map((i) =>
+    parsePostChannelSource(
+      overrides[i],
+      fallbacks[i],
+      i as 0 | 1 | 2 | 3,
+    ),
+  ) as PostChannels;
+}
+
+function buildConfig(host: PostBindHost): PostFxConfig | null {
+  if (!host.postImage.trim()) return null;
+  const sources: PostSources = {
+    common: host.postCommon,
+    image: host.postImage,
+    bufferA: host.postBufferA,
+    bufferB: host.postBufferB,
+    bufferC: host.postBufferC,
+    bufferD: host.postBufferD,
+  };
+  const channels = new Map<PostPassId, PostChannels>();
+  for (const pass of [
+    "bufferA",
+    "bufferB",
+    "bufferC",
+    "bufferD",
+    "image",
+  ] as PostPassId[]) {
+    channels.set(pass, buildChannels(host, pass));
+  }
+  return {
+    sources,
+    channels,
+    scale: clampPostScale(host.postScale),
+  };
+}
+
+function lookupElement(host: PostBindHost, key: string): Element | null {
+  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 = host.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;
+}
+
+function applyConfig(host: PostBindHost) {
+  if (!host.runtime) return;
+  host.runtime.setPostElementResolver((key) => lookupElement(host, key));
+  try {
+    host.runtime.setPostConfig(buildConfig(host));
+    if (host.errorMessage.startsWith("Post FX")) host.errorMessage = "";
+  } catch (err) {
+    const message = err instanceof Error ? err.message : String(err);
+    host.errorMessage = `Post FX: ${message}`;
+    const pass =
+      err && typeof err === "object" && "pass" in err
+        ? String((err as { pass: string }).pass)
+        : "image";
+    const infoLog =
+      err && typeof err === "object" && "infoLog" in err
+        ? String((err as { infoLog: string }).infoLog)
+        : "";
+    host.dispatchEvent(
+      new CustomEvent("error", {
+        detail: { message, pass, infoLog },
+        bubbles: true,
+        composed: true,
+      }),
+    );
+    try {
+      host.runtime.setPostConfig(null);
+    } catch {
+      /* ignore */
+    }
+  }
+}
+
+function syncFrame(
+  host: PostBindHost,
+  time: number,
+  timeDelta: number,
+  frame: number,
+  mouse: [number, number, number, number] = [0, 0, 0, 0],
+) {
+  host.runtime?.setPostFrame({
+    time,
+    timeDelta,
+    frame,
+    mouse,
+    params: [host.param0, host.param1, host.param2, host.param3],
+  });
+}
+
+function propsChanged(
+  changed: Map<string | number | symbol, unknown>,
+): boolean {
+  return POST_PROP_KEYS.some((k) => changed.has(k));
+}
+
+/** Applique param0…3 + post* depuis un DP form. */
+function applyFormPost(host: PostBindHost, data: Record<string, unknown>) {
+  let touched = false;
+  for (const k of ["param0", "param1", "param2", "param3"] as const) {
+    if (k in data && typeof data[k] === "number") {
+      host[k] = data[k] as number;
+      touched = true;
+    } else if (k in data && typeof data[k] === "string") {
+      const n = Number(data[k]);
+      if (Number.isFinite(n)) {
+        host[k] = n;
+        touched = true;
+      }
+    }
+  }
+  for (const k of POST_PROP_KEYS) {
+    if (!(k in data)) continue;
+    const v = data[k];
+    if (k === "postScale" && (typeof v === "number" || typeof v === "string")) {
+      host.postScale = clampPostScale(Number(v));
+      touched = true;
+    } else if (typeof v === "string") {
+      (host as unknown as Record<string, string>)[k] = v;
+      touched = true;
+    }
+  }
+  if (touched) applyConfig(host);
+}
+
+export const postBind = {
+  applyConfig,
+  syncFrame,
+  propsChanged,
+  applyFormPost,
+  POST_PROP_KEYS,
+} as const;