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

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

@@ -0,0 +1,70 @@
+import type { SceneRuntime } from "./runtime";
+
+export type PlaybackHost = {
+  play: boolean;
+  ready: boolean;
+  inView: boolean;
+  runtime: SceneRuntime | null;
+  playOnHover: boolean;
+  hovering: boolean;
+  autoRotate: boolean;
+  raf: number;
+  drawFrame: (now: number) => void;
+};
+
+function prefersReducedMotion(): boolean {
+  return (
+    typeof matchMedia === "function" &&
+    matchMedia("(prefers-reduced-motion: reduce)").matches
+  );
+}
+
+function shouldAnimate(host: PlaybackHost): boolean {
+  if (!host.play) return false;
+  if (!host.ready) return false;
+  if (!host.inView) return false;
+  if (!host.runtime) return false;
+  if (prefersReducedMotion()) return false;
+  if (host.playOnHover) return host.hovering;
+  return true;
+}
+
+function syncAutoRotate(host: PlaybackHost) {
+  const on =
+    host.autoRotate &&
+    host.play &&
+    !prefersReducedMotion() &&
+    (!host.playOnHover || host.hovering);
+  host.runtime?.setAutoRotate(!!on);
+}
+
+function stopLoop(host: PlaybackHost) {
+  if (host.raf) {
+    cancelAnimationFrame(host.raf);
+    host.raf = 0;
+  }
+}
+
+function startLoop(host: PlaybackHost, loop: () => void) {
+  if (!host.raf) {
+    host.raf = requestAnimationFrame(loop);
+  }
+}
+
+function syncPlayback(host: PlaybackHost, loop: () => void) {
+  syncAutoRotate(host);
+  if (shouldAnimate(host)) {
+    startLoop(host, loop);
+  } else {
+    stopLoop(host);
+    if (host.ready) host.runtime?.render();
+  }
+}
+
+export const playback = {
+  prefersReducedMotion,
+  shouldAnimate,
+  syncAutoRotate,
+  syncPlayback,
+  stopLoop,
+} as const;

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

@@ -0,0 +1,79 @@
+import type { SceneHit } from "./pick";
+import type { SceneRuntime } from "./runtime";
+
+export type PointerHost = {
+  pointerX: number;
+  pointerY: number;
+  pick: boolean;
+  runtime: SceneRuntime | null;
+  lastHit: SceneHit | null;
+  hovering: boolean;
+  getBoundingClientRect: () => DOMRect;
+  dispatchEvent: (event: Event) => boolean;
+  syncPlayback: () => void;
+};
+
+function normPointer(
+  host: PointerHost,
+  e: PointerEvent,
+): { x: number; y: number } {
+  const rect = host.getBoundingClientRect();
+  const w = Math.max(rect.width, 1);
+  const h = Math.max(rect.height, 1);
+  return {
+    x: (e.clientX - rect.left) / w,
+    y: (e.clientY - rect.top) / h,
+  };
+}
+
+function onMove(host: PointerHost, e: PointerEvent) {
+  const p = normPointer(host, e);
+  host.pointerX = p.x;
+  host.pointerY = p.y;
+  if (host.pick && host.runtime?.ready) {
+    host.runtime.setHoverAt(p.x, p.y);
+  }
+}
+
+function onDown(host: PointerHost, e: PointerEvent) {
+  const p = normPointer(host, e);
+  host.pointerX = p.x;
+  host.pointerY = p.y;
+  if (!host.pick || !host.runtime) return;
+  if (e.button !== 0) return;
+  const hit = host.runtime.pick(p.x, p.y);
+  host.lastHit = hit;
+  if (!hit) return;
+  host.dispatchEvent(
+    new CustomEvent("pick", {
+      detail: hit,
+      bubbles: true,
+      composed: true,
+    }),
+  );
+}
+
+function onDblClick(host: PointerHost) {
+  if (!host.runtime?.ready) return;
+  host.runtime.fitToContent();
+  host.runtime.render();
+}
+
+function onEnter(host: PointerHost) {
+  host.hovering = true;
+  host.syncPlayback();
+}
+
+function onLeave(host: PointerHost) {
+  host.hovering = false;
+  host.runtime?.clearHighlight();
+  host.syncPlayback();
+}
+
+export const pointer = {
+  onMove,
+  onDown,
+  onDblClick,
+  onEnter,
+  onLeave,
+} as const;

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

@@ -0,0 +1,50 @@
+import { LitElement } from "lit";
+import { property } from "lit/decorators.js";
+import {
+  DEFAULT_EXPOSURE,
+  DEFAULT_FOV,
+  DEFAULT_MAX_DISTANCE,
+  DEFAULT_MAX_POLAR_DEG,
+  DEFAULT_MIN_DISTANCE,
+  DEFAULT_MIN_POLAR_DEG,
+  DEFAULT_OUT_INTERVAL_MS,
+  DEFAULT_SNAPSHOT_INTERVAL_MS,
+  Sonic3dCameraMode,
+} from "./constants";
+import type { Sonic3dAsset } from "./types";
+
+/** Attributs / propriétés Lit de `sonic-3d`. */
+export class Sonic3dProps extends LitElement {
+  @property() src = "";
+  @property({ attribute: false }) asset: Sonic3dAsset | null = null;
+  @property({ reflect: true })
+  camera: Sonic3dCameraMode = Sonic3dCameraMode.Orbit;
+  @property({ type: Number }) fov = DEFAULT_FOV;
+  @property({ type: Number }) exposure = DEFAULT_EXPOSURE;
+  @property({ type: Number, attribute: "min-distance" })
+  minDistance = DEFAULT_MIN_DISTANCE;
+  @property({ type: Number, attribute: "max-distance" })
+  maxDistance = DEFAULT_MAX_DISTANCE;
+  @property({ type: Number, attribute: "min-polar" })
+  minPolar = DEFAULT_MIN_POLAR_DEG;
+  @property({ type: Number, attribute: "max-polar" })
+  maxPolar = DEFAULT_MAX_POLAR_DEG;
+  @property({ type: Boolean, attribute: "auto-rotate" }) autoRotate = false;
+  @property({ type: Boolean }) fit = true;
+  @property({ type: Boolean }) pick = false;
+  @property({ type: Boolean, reflect: true }) play = true;
+  @property({ type: Boolean, attribute: "play-on-hover" }) playOnHover = false;
+  @property({ type: Boolean, attribute: "release-offscreen" })
+  releaseOffscreen = true;
+  @property({ type: Number, attribute: "dpr-max" }) dprMax = 2;
+  @property({ type: String, attribute: "aspect-ratio" }) aspectRatio = "";
+  @property({ type: String }) dataProvider = "";
+  @property({ type: String, attribute: "out-data-provider" })
+  outDataProvider = "";
+  @property({ type: Number, attribute: "out-interval" })
+  outInterval = DEFAULT_OUT_INTERVAL_MS;
+  @property({ type: Number, attribute: "snapshot-interval" })
+  snapshotInterval = DEFAULT_SNAPSHOT_INTERVAL_MS;
+  /** Publie `frameUrl` / `snapshot` (canvas) pour chaînage shader / jsonata. */
+  @property({ type: Boolean, attribute: "frame-out" }) frameOut = false;
+}

package/src/core/components/functional/3d/publisher-listen.ts

@@ -0,0 +1,13 @@
+/** Listener proxy DataProvider (`_proxies_.get(key).hasListener`). */
+
+export type PublisherProxies = {
+  _proxies_?: Map<string, { hasListener?: () => boolean }>;
+} | null;
+
+export function publisherFieldHasListener(
+  pub: PublisherProxies,
+  key: string,
+): boolean {
+  const child = pub?._proxies_?.get(key);
+  return !!child?.hasListener?.();
+}

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

@@ -0,0 +1,88 @@
+import { PublisherManager } from "@supersoniks/concorde/utils";
+import { asset } from "./asset";
+import type { FormOrbit } from "./form-params";
+import { playback } from "./playback";
+import type { SceneRuntime } from "./runtime";
+import type { Sonic3dAsset } from "./types";
+
+function degToRad(deg: number): number {
+  return ((Number.isFinite(deg) ? deg : 0) * Math.PI) / 180;
+}
+
+export type ReloadHost = {
+  runtime: SceneRuntime | null;
+  loadToken: number;
+  errorMessage: string;
+  ready: boolean;
+  startTime: number;
+  frame: number;
+  lastFormOrbit: FormOrbit | null;
+  formPublisher: ReturnType<typeof PublisherManager.get> | null;
+  asset: Sonic3dAsset | null;
+  src: string;
+  minDistance: number;
+  maxDistance: number;
+  minPolar: number;
+  maxPolar: number;
+  onFormMutation: () => void;
+  syncPlayback: () => void;
+  dispatchEvent: (event: Event) => boolean;
+};
+
+async function run(host: ReloadHost) {
+  if (!host.runtime) return;
+  const token = ++host.loadToken;
+  host.errorMessage = "";
+  try {
+    await host.runtime.load(asset.resolve(host, host.formPublisher));
+    if (token !== host.loadToken) return;
+    host.ready = true;
+    host.startTime = performance.now();
+    host.frame = 0;
+    host.lastFormOrbit = null;
+    host.onFormMutation();
+    playback.syncAutoRotate(host as never);
+    host.runtime.render();
+    host.syncPlayback();
+    host.dispatchEvent(
+      new CustomEvent("ready", {
+        detail: { ready: true },
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  } catch (err) {
+    if (token !== host.loadToken) return;
+    host.ready = !!host.runtime?.ready;
+    emitError(host, err);
+    host.syncPlayback();
+  }
+}
+
+function applyOrbitLimits(host: ReloadHost) {
+  host.runtime?.setOrbitLimits({
+    minDistance: host.minDistance,
+    maxDistance: host.maxDistance,
+    minPolar: degToRad(host.minPolar),
+    maxPolar: degToRad(host.maxPolar),
+  });
+}
+
+function emitError(host: ReloadHost, err: unknown) {
+  const message = err instanceof Error ? err.message : String(err);
+  host.errorMessage = message;
+  host.dispatchEvent(
+    new CustomEvent("error", {
+      detail: { message },
+      bubbles: true,
+      composed: true,
+    }),
+  );
+}
+
+export const reload = {
+  run,
+  applyOrbitLimits,
+  emitError,
+  degToRad,
+} as const;

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

@@ -0,0 +1,148 @@
+import * as THREE from "three";
+import type { OrbitControls } from "three/addons/controls/OrbitControls.js";
+import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js";
+import type { Sonic3dCameraMode } from "./constants";
+import { bootScene } from "./boot";
+import { ops, type OpsCtx } from "./ops";
+import type { SceneRuntimeOptions } from "./opts";
+import type { SceneHit } from "./pick";
+import { tune, type TuneCtx } from "./tune";
+import type { Sonic3dAsset, Sonic3dOutput } from "./types";
+import { view, type ViewCtx } from "./view";
+
+export type { SceneHit, SceneRuntimeOptions };
+
+/**
+ * Runtime Three.js encapsulé : renderer, scène, caméra, load, fit, pick.
+ * Le composant Lit gère RAF / viewport / DP.
+ */
+export class SceneRuntime {
+  readonly scene: THREE.Scene;
+  readonly renderer: THREE.WebGLRenderer;
+  private canvas: HTMLCanvasElement;
+  private perspCam: THREE.PerspectiveCamera;
+  private orthoCam: THREE.OrthographicCamera;
+  private activeCam: THREE.Camera;
+  private controls: OrbitControls | null = null;
+  private unbindWheelRelay: (() => void) | null = null;
+  private root: THREE.Group;
+  private content: THREE.Object3D | null = null;
+  private lights: THREE.Light[];
+  private loader = new GLTFLoader();
+  private loadToken = 0;
+  private blobUrl: string | null = null;
+  private dprMax: number;
+  private mode: Sonic3dCameraMode;
+  private fov: number;
+  private fitEnabled: boolean;
+  private limits: ReturnType<typeof bootScene>["limits"];
+  private bbox = new THREE.Box3();
+  private target = new THREE.Vector3();
+  private _ready = false;
+  private _loading = false;
+  private lastError: string | null = null;
+  private raycaster = new THREE.Raycaster();
+  private pointerNdc = new THREE.Vector2();
+  private highlighted: THREE.Mesh | null = null;
+  private prevEmissive = new THREE.Color();
+  private prevEmissiveIntensity = 0;
+
+  constructor(opts: SceneRuntimeOptions) {
+    const b = bootScene(opts);
+    this.scene = b.scene;
+    this.renderer = b.renderer;
+    this.canvas = b.canvas;
+    this.perspCam = b.perspCam;
+    this.orthoCam = b.orthoCam;
+    this.activeCam = b.activeCam;
+    this.root = b.root;
+    this.lights = b.lights;
+    this.dprMax = b.dprMax;
+    this.mode = b.mode;
+    this.fov = b.fov;
+    this.fitEnabled = b.fitEnabled;
+    this.limits = b.limits;
+    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];
+  }
+
+  get ready() {
+    return this._ready;
+  }
+  get loading() {
+    return this._loading;
+  }
+  get error() {
+    return this.lastError;
+  }
+  get isLost() {
+    return this.renderer.getContext()?.isContextLost?.() ?? false;
+  }
+
+  setDprMax(v: number) {
+    tune.setDprMax(this.asTuneCtx(), v);
+  }
+  setExposure(v: number) {
+    tune.setExposure(this.asTuneCtx(), v);
+  }
+  setFov(v: number) {
+    tune.setFov(this.asTuneCtx(), v);
+  }
+  setFit(v: boolean) {
+    tune.setFit(this.asTuneCtx(), v);
+  }
+  setAutoRotate(v: boolean) {
+    tune.setAutoRotate(this.asTuneCtx(), v);
+  }
+  setOrbitLimits(opts: Parameters<typeof tune.setOrbitLimits>[1]) {
+    tune.setOrbitLimits(this.asTuneCtx(), opts);
+  }
+  setOrbitSpherical(yaw: number, pitch: number, distance: number) {
+    tune.setOrbitSpherical(this.asTuneCtx(), yaw, pitch, distance);
+  }
+
+  applyCameraMode(mode: Sonic3dCameraMode) {
+    view.applyCameraMode(this.asViewCtx(), mode);
+  }
+  resize(cssW: number, cssH: number) {
+    view.resize(this.asViewCtx(), cssW, cssH);
+  }
+  async load(asset: Sonic3dAsset | null) {
+    return ops.runLoad(this.asOpsCtx(), asset);
+  }
+  fitToContent() {
+    ops.fitToContent(this.asOpsCtx());
+  }
+  render() {
+    this.controls?.update();
+    this.renderer.render(this.scene, this.activeCam);
+  }
+  pick(normX: number, normY: number): SceneHit | null {
+    return ops.pick(this.asOpsCtx(), normX, normY);
+  }
+  setHoverAt(normX: number, normY: number): SceneHit | null {
+    return ops.setHoverAt(this.asOpsCtx(), normX, normY);
+  }
+  clearHighlight() {
+    ops.clearHighlight(this.asOpsCtx());
+  }
+  snapshot(base: {
+    time: number;
+    frame: number;
+    hovering: number;
+    pointerX: number;
+    pointerY: number;
+    hit?: SceneHit | null;
+  }): Sonic3dOutput {
+    return ops.buildSnapshot(this.asOpsCtx(), base);
+  }
+  dispose(loseContext = false) {
+    ops.dispose(this.asOpsCtx(), loseContext);
+  }
+
+  private asTuneCtx = () => this as unknown as TuneCtx;
+  private asViewCtx = () => this as unknown as ViewCtx;
+  private asOpsCtx = () => this as unknown as OpsCtx;
+}
+

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

@@ -0,0 +1,9 @@
+/**
+ * Entrée publique `@supersoniks/concorde/3d/scene-runtime`.
+ * Implémentation : `runtime.ts` + helpers orbit/pick/load/….
+ */
+export {
+  SceneRuntime,
+  type SceneHit,
+  type SceneRuntimeOptions,
+} from "./runtime";

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

@@ -0,0 +1,73 @@
+import * as THREE from "three";
+import type { OrbitControls } from "three/addons/controls/OrbitControls.js";
+import { Sonic3dCameraMode } from "./constants";
+import type { SceneHit } from "./pick";
+import type { Sonic3dOutput } from "./types";
+
+export type SnapshotCtx = {
+  activeCam: THREE.Camera;
+  controls: OrbitControls | null;
+  target: THREE.Vector3;
+  mode: Sonic3dCameraMode;
+  perspCam: THREE.PerspectiveCamera;
+  orthoCam: THREE.OrthographicCamera;
+  bbox: THREE.Box3;
+  ready: boolean;
+  loading: boolean;
+};
+
+function build(
+  ctx: SnapshotCtx,
+  base: {
+    time: number;
+    frame: number;
+    hovering: number;
+    pointerX: number;
+    pointerY: number;
+    hit?: SceneHit | null;
+  },
+): Sonic3dOutput {
+  const cam = ctx.activeCam.position;
+  const t = ctx.controls?.target ?? ctx.target;
+  const offset = new THREE.Vector3().subVectors(cam, t);
+  const distance = offset.length();
+  const yaw = Math.atan2(offset.x, offset.z);
+  const pitch = Math.atan2(offset.y, Math.hypot(offset.x, offset.z));
+  const out: Sonic3dOutput = {
+    time: base.time,
+    frame: base.frame,
+    ready: ctx.ready ? 1 : 0,
+    loading: ctx.loading ? 1 : 0,
+    hovering: base.hovering,
+    pointerX: base.pointerX,
+    pointerY: base.pointerY,
+    camX: cam.x,
+    camY: cam.y,
+    camZ: cam.z,
+    targetX: t.x,
+    targetY: t.y,
+    targetZ: t.z,
+    fov: ctx.mode === Sonic3dCameraMode.Ortho ? 0 : ctx.perspCam.fov,
+    zoom: ctx.mode === Sonic3dCameraMode.Ortho ? ctx.orthoCam.zoom : 1,
+    distance,
+    yaw,
+    pitch,
+  };
+  if (!ctx.bbox.isEmpty()) {
+    out.bboxMinX = ctx.bbox.min.x;
+    out.bboxMinY = ctx.bbox.min.y;
+    out.bboxMinZ = ctx.bbox.min.z;
+    out.bboxMaxX = ctx.bbox.max.x;
+    out.bboxMaxY = ctx.bbox.max.y;
+    out.bboxMaxZ = ctx.bbox.max.z;
+  }
+  if (base.hit) {
+    out.hitX = base.hit.x;
+    out.hitY = base.hit.y;
+    out.hitZ = base.hit.z;
+    out.hitObjectId = base.hit.objectId;
+  }
+  return out;
+}
+
+export const snapshot = { build } as const;

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

@@ -0,0 +1,38 @@
+import { css } from "lit";
+
+export const sonic3dStyles = css`
+  :host {
+    display: block;
+    position: relative;
+    width: 100%;
+    max-width: 100%;
+    height: auto;
+    aspect-ratio: var(--sonic-3d-ar, 16 / 9);
+    overflow: hidden;
+    background: #0a0a0a;
+    color: #f87171;
+    font: 12px/1.4 ui-monospace, monospace;
+    touch-action: none;
+    cursor: grab;
+  }
+  :host(:active) {
+    cursor: grabbing;
+  }
+  canvas {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    display: block;
+  }
+  .err {
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    padding: 0.75rem;
+    background: rgba(0, 0, 0, 0.85);
+    white-space: pre-wrap;
+    overflow: auto;
+    pointer-events: none;
+  }
+`;

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

@@ -0,0 +1,72 @@
+import { DEFAULT_EXPOSURE, DEFAULT_FOV } from "./constants";
+import { orbit, type OrbitLimits } from "./orbit";
+import type { OrbitControls } from "three/addons/controls/OrbitControls.js";
+import type * as THREE from "three";
+
+export type TuneCtx = {
+  dprMax: number;
+  renderer: THREE.WebGLRenderer;
+  fov: number;
+  perspCam: THREE.PerspectiveCamera;
+  fitEnabled: boolean;
+  controls: OrbitControls | null;
+  limits: OrbitLimits;
+  activeCam: THREE.Camera;
+  target: THREE.Vector3;
+};
+
+function setDprMax(ctx: TuneCtx, v: number) {
+  ctx.dprMax = Math.max(1, v || 2);
+}
+
+function setExposure(ctx: TuneCtx, v: number) {
+  ctx.renderer.toneMappingExposure = Number.isFinite(v) ? v : DEFAULT_EXPOSURE;
+}
+
+function setFov(ctx: TuneCtx, v: number) {
+  ctx.fov = Number.isFinite(v) && v > 0 ? v : DEFAULT_FOV;
+  ctx.perspCam.fov = ctx.fov;
+  ctx.perspCam.updateProjectionMatrix();
+}
+
+function setFit(ctx: TuneCtx, v: boolean) {
+  ctx.fitEnabled = v;
+}
+
+function setAutoRotate(ctx: TuneCtx, v: boolean) {
+  if (ctx.controls) ctx.controls.autoRotate = v;
+}
+
+function setOrbitLimits(ctx: TuneCtx, opts: Partial<OrbitLimits>) {
+  ctx.limits = orbit.mergeLimits(ctx.limits, opts);
+  orbit.applyLimitsToControls(ctx.controls, ctx.limits);
+}
+
+function setOrbitSpherical(
+  ctx: TuneCtx,
+  yaw: number,
+  pitch: number,
+  distance: number,
+) {
+  orbit.setSpherical(
+    {
+      activeCam: ctx.activeCam,
+      controls: ctx.controls,
+      target: ctx.target,
+      limits: ctx.limits,
+    },
+    yaw,
+    pitch,
+    distance,
+  );
+}
+
+export const tune = {
+  setDprMax,
+  setExposure,
+  setFov,
+  setFit,
+  setAutoRotate,
+  setOrbitLimits,
+  setOrbitSpherical,
+} as const;