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

package/src/core/components/functional/webgpu/form-bind.ts

@@ -1,116 +0,0 @@
-import HTML from "@supersoniks/concorde/core/utils/HTML";
-import { PublisherManager } from "@supersoniks/concorde/utils";
-import {
-  CHANNEL_FORM_KEYS,
-  OUT_PARAM_KEYS,
-  channelFormValue,
-  toNum,
-} from "./helpers";
-
-export type FormBindHost = {
-  dataProvider: string;
-  outDataProvider: string;
-  formPublisher: ReturnType<typeof PublisherManager.get> | null;
-  outPublisher: ReturnType<typeof PublisherManager.get> | null;
-  channel0: string;
-  channel1: string;
-  channel2: string;
-  channel3: string;
-  param0: number;
-  param1: number;
-  param2: number;
-  param3: number;
-  remoteTarget: { x: number; y: number } | null;
-  mouseVec: [number, number, number, number];
-  mouse: boolean;
-  hovering: boolean;
-  runtime: { canvas: HTMLCanvasElement } | null;
-  onFormMutation: () => void;
-};
-
-function resolveFormProviderId(host: FormBindHost & HTMLElement): string {
-  const own = host.dataProvider?.trim();
-  if (own) return own;
-  return (
-    HTML.getAncestorAttributeValue(host, "dataProvider") ||
-    HTML.getAncestorAttributeValue(host, "formDataProvider") ||
-    ""
-  );
-}
-
-function unbindFormProvider(host: FormBindHost) {
-  if (host.formPublisher) {
-    host.formPublisher.offInternalMutation(host.onFormMutation);
-    host.formPublisher = null;
-  }
-}
-
-function bindFormProvider(host: FormBindHost & HTMLElement) {
-  unbindFormProvider(host);
-  const id = resolveFormProviderId(host);
-  if (!id) return;
-  host.formPublisher = PublisherManager.get(id);
-  host.formPublisher.onInternalMutation(host.onFormMutation);
-  host.onFormMutation();
-}
-
-function bindOutPublisher(host: FormBindHost & HTMLElement) {
-  const id = host.outDataProvider?.trim() || resolveFormProviderId(host) || "";
-  host.outPublisher = id ? PublisherManager.get(id) : null;
-}
-
-function applyFormParams(host: FormBindHost, data: Record<string, unknown>) {
-  for (const key of CHANNEL_FORM_KEYS) {
-    if (!(key in data)) continue;
-    const next = channelFormValue(data[key]);
-    if (next === undefined) continue;
-    if (host[key] !== next) host[key] = next;
-  }
-  for (const key of OUT_PARAM_KEYS) {
-    if (!(key in data)) continue;
-    const n = toNum(data[key], NaN);
-    if (!Number.isFinite(n)) continue;
-    if (host[key] !== n) host[key] = n;
-  }
-  // targetX/Y (0–1, CSS top-left) → attracteur GPU ; hors plage = off
-  if ("targetX" in data || "targetY" in data) {
-    const tx = toNum(data.targetX, NaN);
-    const ty = toNum(data.targetY, NaN);
-    if (
-      Number.isFinite(tx) &&
-      Number.isFinite(ty) &&
-      tx >= 0 &&
-      tx <= 1 &&
-      ty >= 0 &&
-      ty <= 1
-    ) {
-      host.remoteTarget = { x: tx, y: ty };
-      applyRemoteMouse(host);
-    } else {
-      host.remoteTarget = null;
-      host.mouseVec[0] = 0;
-      host.mouseVec[1] = 0;
-    }
-  }
-}
-
-/** Convertit target normalisé → coords buffer (origine bas-gauche, comme le pointeur). */
-function applyRemoteMouse(host: FormBindHost) {
-  if (!host.remoteTarget || !host.runtime) return;
-  // Pendant un hover pointeur, le doigt / souris gagne
-  if (host.mouse && host.hovering) return;
-  const w = host.runtime.canvas.width;
-  const h = host.runtime.canvas.height;
-  if (w < 2 || h < 2) return;
-  host.mouseVec[0] = host.remoteTarget.x * w;
-  host.mouseVec[1] = (1 - host.remoteTarget.y) * h;
-}
-
-export const formBind = {
-  resolveFormProviderId,
-  unbindFormProvider,
-  bindFormProvider,
-  bindOutPublisher,
-  applyFormParams,
-  applyRemoteMouse,
-} as const;

package/src/core/components/functional/webgpu/gl-fallback.ts

@@ -1,158 +0,0 @@
-import {
-  parseChannelSource,
-  ShaderToyRuntime,
-  type FrameUniforms,
-} from "../shader/gl-runtime";
-import type { PassChannels, ShaderSources } from "../shader/types";
-import type { WebGpuFrameState } from "./gpu-runtime";
-
-/** GLSL image pass — même dialecte ShaderToy que sonic-shader. */
-const FALLBACK_IMAGE = `
-void mainImage(out vec4 fragColor, in vec2 fragCoord) {
-  vec2 uv = fragCoord / iResolution.xy;
-  vec4 c = texture(iChannel0, uv);
-  float has = step(0.001, c.a + c.r + c.g + c.b);
-  // Souris en UV (origine bas-gauche, comme fragCoord)
-  vec2 muv = iMouse.xy / max(iResolution.xy, vec2(1.0));
-  float m = length(uv - muv);
-  // Halo souris toujours visible + mix global via uParam0
-  float glow = exp(-m * 8.0) * (0.35 + 0.65 * uParam0);
-  vec4 tint = vec4(0.15, 0.45, 0.95, 1.0);
-  vec4 mixed = mix(c, tint, clamp(uParam0 * 0.35 + glow, 0.0, 1.0));
-  float g = 0.15 + 0.25 * uv.y;
-  vec4 grad = vec4(g, g * 0.85 + 0.08 * uParam0, 0.35 + 0.4 * uv.x, 1.0);
-  fragColor = mix(grad, mixed, has);
-}
-`;
-
-const EMPTY_SOURCES: ShaderSources = {
-  common: "",
-  image: FALLBACK_IMAGE,
-  bufferA: "",
-  bufferB: "",
-  bufferC: "",
-  bufferD: "",
-};
-
-/**
- * Fallback WebGL2 = wrapper de `ShaderToyRuntime` (même stack que sonic-shader).
- */
-export class WebGl2FallbackRuntime {
-  readonly backend = "webgl2" as const;
-  readonly canvas: HTMLCanvasElement;
-  private toy: ShaderToyRuntime;
-  private channelUrls: [string, string, string, string] = ["", "", "", ""];
-  private lastTime = 0;
-  private disposed = false;
-  private channelQueue: Promise<void> = Promise.resolve();
-
-  private constructor(canvas: HTMLCanvasElement, toy: ShaderToyRuntime) {
-    this.canvas = canvas;
-    this.toy = toy;
-    this.applySources();
-  }
-
-  static create(canvas: HTMLCanvasElement): WebGl2FallbackRuntime {
-    const toy = new ShaderToyRuntime(canvas);
-    return new WebGl2FallbackRuntime(canvas, toy);
-  }
-
-  /** WGSL ignoré — effet GLSL fixe (canaux / params OK). */
-  async setShader(_userBody: string): Promise<void> {
-    this.assertAlive();
-  }
-
-  async setChannel(index: 0 | 1 | 2 | 3, url: string): Promise<void> {
-    // sérialisé : évite applySources / ensureTextures en parallèle (rebuild Promise.all)
-    this.channelQueue = this.channelQueue.then(() =>
-      this.setChannelNow(index, url),
-    );
-    return this.channelQueue;
-  }
-
-  private async setChannelNow(
-    index: 0 | 1 | 2 | 3,
-    url: string,
-  ): Promise<void> {
-    this.assertAlive();
-    const trimmed = url.trim();
-    if (this.channelUrls[index] === trimmed) {
-      // Même URL : s’assurer que la texture est bien chargée
-      if (trimmed && !this.toy.getTextureSize(trimmed)) {
-        await this.toy.ensureTextures([trimmed]);
-      }
-      return;
-    }
-    this.channelUrls[index] = trimmed;
-    this.applySources();
-    const urls = this.channelUrls.filter(Boolean);
-    if (urls.length) await this.toy.ensureTextures(urls);
-  }
-
-  /** Applique les 4 canaux d’un coup (préféré au boot). */
-  async setChannels(urls: [string, string, string, string]): Promise<void> {
-    this.channelQueue = this.channelQueue.then(async () => {
-      this.assertAlive();
-      this.channelUrls = [
-        urls[0].trim(),
-        urls[1].trim(),
-        urls[2].trim(),
-        urls[3].trim(),
-      ];
-      this.applySources();
-      const list = this.channelUrls.filter(Boolean);
-      if (list.length) await this.toy.ensureTextures(list);
-    });
-    return this.channelQueue;
-  }
-
-  getTextureSize(url: string): { width: number; height: number } | null {
-    return this.toy.getTextureSize(url.trim());
-  }
-
-  resize(width: number, height: number) {
-    this.assertAlive();
-    this.toy.resize(width, height);
-  }
-
-  draw(state: WebGpuFrameState) {
-    this.assertAlive();
-    if (this.toy.isLost) return;
-    const timeDelta =
-      this.lastTime > 0 ? Math.max(0, state.time - this.lastTime) : 0;
-    this.lastTime = state.time;
-    const frame: FrameUniforms = {
-      time: state.time,
-      timeDelta,
-      frame: Math.floor(state.frame),
-      mouse: state.mouse,
-      params: state.params,
-    };
-    this.toy.render(frame);
-  }
-
-  dispose(loseContext = true) {
-    if (this.disposed) return;
-    this.disposed = true;
-    this.toy.dispose(loseContext);
-  }
-
-  private applySources() {
-    const channels = new Map([
-      [
-        "image" as const,
-        [
-          parseChannelSource(this.channelUrls[0], ""),
-          parseChannelSource(this.channelUrls[1], ""),
-          parseChannelSource(this.channelUrls[2], ""),
-          parseChannelSource(this.channelUrls[3], ""),
-        ] as PassChannels,
-      ],
-    ]);
-    this.toy.setSources(EMPTY_SOURCES, channels);
-  }
-
-  private assertAlive() {
-    if (this.disposed) throw new Error("WebGL2 fallback disposed");
-  }
-}

package/src/core/components/functional/webgpu/gpu-runtime.ts

@@ -1,349 +0,0 @@
-/// <reference types="@webgpu/types" />
-
-import { WebGpuCompileError } from "./types";
-import { buildWgslSource } from "./wgsl-prelude";
-
-const UNIFORM_BYTES = 64; // resolution+time+frame+mouse+params + pad
-const CHANNEL_COUNT = 4;
-
-/** Adapter WebGPU : high-performance → low-power → défaut. */
-export async function requestBestAdapter(
-  gpu: GPU = navigator.gpu!,
-): Promise<GPUAdapter | null> {
-  return (
-    (await gpu.requestAdapter({ powerPreference: "high-performance" })) ??
-    (await gpu.requestAdapter({ powerPreference: "low-power" })) ??
-    (await gpu.requestAdapter())
-  );
-}
-
-export type WebGpuFrameState = {
-  width: number;
-  height: number;
-  time: number;
-  frame: number;
-  mouse: [number, number, number, number];
-  params: [number, number, number, number];
-};
-
-async function createPlaceholderTexture(
-  device: GPUDevice,
-): Promise<GPUTexture> {
-  const texture = device.createTexture({
-    size: [1, 1],
-    format: "rgba8unorm",
-    usage:
-      GPUTextureUsage.TEXTURE_BINDING |
-      GPUTextureUsage.COPY_DST |
-      GPUTextureUsage.RENDER_ATTACHMENT,
-  });
-  device.queue.writeTexture(
-    { texture },
-    new Uint8Array([0, 0, 0, 0]),
-    { bytesPerRow: 4 },
-    [1, 1],
-  );
-  return texture;
-}
-
-/**
- * Runtime WebGPU minimal : 1 passe fullscreen + 4 textures + uniforms.
- */
-export class WebGpuRuntime {
-  readonly backend = "webgpu" as const;
-  readonly canvas: HTMLCanvasElement;
-  private device: GPUDevice;
-  private context: GPUCanvasContext;
-  private format: GPUTextureFormat;
-  private pipeline: GPURenderPipeline | null = null;
-  private uniformBuffer: GPUBuffer;
-  private sampler: GPUSampler;
-  private channelTextures: (GPUTexture | null)[] = [
-    null,
-    null,
-    null,
-    null,
-  ];
-  private channelViews: (GPUTextureView | null)[] = [
-    null,
-    null,
-    null,
-    null,
-  ];
-  private channelSizes: ({ width: number; height: number } | null)[] = [
-    null,
-    null,
-    null,
-    null,
-  ];
-  private channelUrls: [string, string, string, string] = ["", "", "", ""];
-  private placeholder: GPUTexture | null = null;
-  private placeholderView: GPUTextureView | null = null;
-  private bindGroup: GPUBindGroup | null = null;
-  private disposed = false;
-  /** Un token par canal — un token global annulait Promise.all(setChannel×4). */
-  private channelLoadTokens = [0, 0, 0, 0];
-
-  private constructor(
-    canvas: HTMLCanvasElement,
-    device: GPUDevice,
-    context: GPUCanvasContext,
-    format: GPUTextureFormat,
-  ) {
-    this.canvas = canvas;
-    this.device = device;
-    this.context = context;
-    this.format = format;
-    this.uniformBuffer = device.createBuffer({
-      size: UNIFORM_BYTES,
-      usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
-    });
-    this.sampler = device.createSampler({
-      magFilter: "linear",
-      minFilter: "linear",
-      addressModeU: "clamp-to-edge",
-      addressModeV: "clamp-to-edge",
-    });
-  }
-
-  /**
-   * Teste WebGPU sans toucher au canvas (évite de le verrouiller si échec).
-   * @returns `null` si OK, sinon raison courte.
-   */
-  static async probe(): Promise<string | null> {
-    const gpu = navigator.gpu;
-    if (!gpu) return "WebGPU indisponible (pas de navigator.gpu)";
-    try {
-      const adapter = await requestBestAdapter(gpu);
-      if (!adapter) return "WebGPU adapter indisponible";
-      const device = await adapter.requestDevice();
-      device.destroy();
-      return null;
-    } catch (e) {
-      return e instanceof Error ? e.message : String(e);
-    }
-  }
-
-  static async create(canvas: HTMLCanvasElement): Promise<WebGpuRuntime> {
-    const gpu = navigator.gpu;
-    if (!gpu) {
-      throw new Error("WebGPU indisponible (pas de navigator.gpu)");
-    }
-    const adapter = await requestBestAdapter(gpu);
-    if (!adapter) {
-      throw new Error("WebGPU adapter indisponible");
-    }
-    const device = await adapter.requestDevice();
-    const context = canvas.getContext("webgpu");
-    if (!context) {
-      device.destroy();
-      throw new Error("WebGPU canvas context indisponible");
-    }
-    const format = navigator.gpu.getPreferredCanvasFormat();
-    context.configure({
-      device,
-      format,
-      alphaMode: "premultiplied",
-    });
-    const runtime = new WebGpuRuntime(canvas, device, context, format);
-    runtime.placeholder = await createPlaceholderTexture(device);
-    runtime.placeholderView = runtime.placeholder.createView();
-    return runtime;
-  }
-
-  async setShader(userBody: string): Promise<void> {
-    this.assertAlive();
-    let source: string;
-    try {
-      source = buildWgslSource(userBody);
-    } catch (e) {
-      const message = e instanceof Error ? e.message : String(e);
-      throw new WebGpuCompileError(message);
-    }
-    const module = this.device.createShaderModule({ code: source });
-    const info = await module.getCompilationInfo();
-    const errors = info.messages.filter((m) => m.type === "error");
-    if (errors.length) {
-      throw new WebGpuCompileError(
-        "WGSL compile error",
-        errors.map((m) => m.message).join("\n"),
-      );
-    }
-    this.pipeline = this.device.createRenderPipeline({
-      layout: "auto",
-      vertex: { module, entryPoint: "vs_main" },
-      fragment: {
-        module,
-        entryPoint: "fs_main",
-        targets: [{ format: this.format }],
-      },
-      primitive: { topology: "triangle-list" },
-    });
-    this.bindGroup = null;
-  }
-
-  async setChannel(index: 0 | 1 | 2 | 3, url: string): Promise<void> {
-    this.assertAlive();
-    const trimmed = url.trim();
-    if (this.channelUrls[index] === trimmed && this.channelTextures[index]) {
-      return;
-    }
-    this.channelUrls[index] = trimmed;
-    const token = ++this.channelLoadTokens[index];
-    if (!trimmed) {
-      this.destroyChannel(index);
-      this.bindGroup = null;
-      return;
-    }
-    const img = await loadImage(trimmed);
-    if (token !== this.channelLoadTokens[index] || this.disposed) return;
-    const texture = this.device.createTexture({
-      size: [img.width, img.height],
-      format: "rgba8unorm",
-      usage:
-        GPUTextureUsage.TEXTURE_BINDING |
-        GPUTextureUsage.COPY_DST |
-        GPUTextureUsage.RENDER_ATTACHMENT,
-    });
-    this.device.queue.copyExternalImageToTexture(
-      { source: img },
-      { texture },
-      [img.width, img.height],
-    );
-    this.destroyChannel(index);
-    this.channelTextures[index] = texture;
-    this.channelViews[index] = texture.createView();
-    this.channelSizes[index] = { width: img.width, height: img.height };
-    this.bindGroup = null;
-  }
-
-  getTextureSize(url: string): { width: number; height: number } | null {
-    const i = this.channelUrls.indexOf(url.trim());
-    if (i < 0) return null;
-    return this.channelSizes[i];
-  }
-
-  resize(width: number, height: number) {
-    this.assertAlive();
-    const w = Math.max(1, Math.floor(width));
-    const h = Math.max(1, Math.floor(height));
-    if (this.canvas.width === w && this.canvas.height === h) return;
-    this.canvas.width = w;
-    this.canvas.height = h;
-    this.context.configure({
-      device: this.device,
-      format: this.format,
-      alphaMode: "premultiplied",
-    });
-  }
-
-  draw(state: WebGpuFrameState) {
-    this.assertAlive();
-    if (!this.pipeline || !this.placeholderView) return;
-    this.writeUniforms(state);
-    if (!this.bindGroup) {
-      this.bindGroup = this.device.createBindGroup({
-        layout: this.pipeline.getBindGroupLayout(0),
-        entries: [
-          { binding: 0, resource: { buffer: this.uniformBuffer } },
-          {
-            binding: 1,
-            resource: this.channelViews[0] ?? this.placeholderView,
-          },
-          {
-            binding: 2,
-            resource: this.channelViews[1] ?? this.placeholderView,
-          },
-          {
-            binding: 3,
-            resource: this.channelViews[2] ?? this.placeholderView,
-          },
-          {
-            binding: 4,
-            resource: this.channelViews[3] ?? this.placeholderView,
-          },
-          { binding: 5, resource: this.sampler },
-        ],
-      });
-    }
-    const encoder = this.device.createCommandEncoder();
-    const pass = encoder.beginRenderPass({
-      colorAttachments: [
-        {
-          view: this.context.getCurrentTexture().createView(),
-          clearValue: { r: 0, g: 0, b: 0, a: 1 },
-          loadOp: "clear",
-          storeOp: "store",
-        },
-      ],
-    });
-    pass.setPipeline(this.pipeline);
-    pass.setBindGroup(0, this.bindGroup);
-    pass.draw(3);
-    pass.end();
-    this.device.queue.submit([encoder.finish()]);
-  }
-
-  dispose(destroyDevice = false) {
-    if (this.disposed) return;
-    this.disposed = true;
-    for (let i = 0; i < CHANNEL_COUNT; i++) {
-      this.channelLoadTokens[i]++;
-      this.destroyChannel(i);
-    }
-    this.placeholder?.destroy();
-    this.placeholder = null;
-    this.placeholderView = null;
-    this.uniformBuffer.destroy();
-    this.pipeline = null;
-    this.bindGroup = null;
-    try {
-      this.context.unconfigure();
-    } catch {
-      /* ignore */
-    }
-    if (destroyDevice) {
-      try {
-        this.device.destroy();
-      } catch {
-        /* ignore */
-      }
-    }
-  }
-
-  private writeUniforms(state: WebGpuFrameState) {
-    const data = new ArrayBuffer(UNIFORM_BYTES);
-    const f32 = new Float32Array(data);
-    f32[0] = state.width;
-    f32[1] = state.height;
-    f32[2] = state.time;
-    f32[3] = state.frame;
-    f32[4] = state.mouse[0];
-    f32[5] = state.mouse[1];
-    f32[6] = state.mouse[2];
-    f32[7] = state.mouse[3];
-    f32[8] = state.params[0];
-    f32[9] = state.params[1];
-    f32[10] = state.params[2];
-    f32[11] = state.params[3];
-    this.device.queue.writeBuffer(this.uniformBuffer, 0, data);
-  }
-
-  private destroyChannel(index: number) {
-    this.channelTextures[index]?.destroy();
-    this.channelTextures[index] = null;
-    this.channelViews[index] = null;
-    this.channelSizes[index] = null;
-  }
-
-  private assertAlive() {
-    if (this.disposed) throw new Error("WebGPU runtime disposed");
-  }
-}
-
-async function loadImage(url: string): Promise<ImageBitmap> {
-  const res = await fetch(url);
-  if (!res.ok) throw new Error(`Failed to load texture: ${url}`);
-  const blob = await res.blob();
-  return createImageBitmap(blob);
-}

package/src/core/components/functional/webgpu/helpers.ts

@@ -1,47 +0,0 @@
-import { toMediaUrl } from "@supersoniks/concorde/core/utils/mediaRef";
-
-export const LOG_PREFIX = "[sonic-webgpu]";
-
-export const OUT_META_KEYS = [
-  "time",
-  "frame",
-  "mouseX",
-  "mouseY",
-  "hovering",
-] as const;
-
-export const OUT_PARAM_KEYS = ["param0", "param1", "param2", "param3"] as const;
-
-export const CHANNEL_FORM_KEYS = [
-  "channel0",
-  "channel1",
-  "channel2",
-  "channel3",
-] as const;
-
-export const FRAME_OUT_KEYS = ["frameUrl", "snapshot"] as const;
-
-export function prefersReducedMotion(): boolean {
-  return (
-    typeof matchMedia === "function" &&
-    matchMedia("(prefers-reduced-motion: reduce)").matches
-  );
-}
-
-export function toNum(v: unknown, fallback: number): number {
-  if (typeof v === "number" && Number.isFinite(v)) return v;
-  if (typeof v === "string" && v.trim() !== "") {
-    const n = Number(v);
-    if (Number.isFinite(n)) return n;
-  }
-  return fallback;
-}
-
-export function channelFormValue(value: unknown): string | undefined {
-  if (value === null || value === "") return "";
-  if (typeof value === "string") return value.trim();
-  const url = toMediaUrl(value);
-  if (url) return url;
-  if (value && typeof value === "object") return undefined;
-  return "";
-}