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

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

@@ -1,125 +0,0 @@
-import type { WebGpuFrameState } from "./gpu-runtime";
-
-const CHANNEL_COUNT = 4;
-const MIX_EPS = 0.001;
-const TINT_ALPHA = 0.45;
-const TINT_RGB = "rgb(38, 89, 217)";
-
-/**
- * Dernier recours : Canvas2D (webview / contexte GL mort).
- * Affiche channel0 + mix param0 — pas de WGSL.
- */
-export class Canvas2dFallbackRuntime {
-  readonly backend = "canvas2d" as const;
-  readonly canvas: HTMLCanvasElement;
-  private ctx: CanvasRenderingContext2D;
-  private images: (HTMLImageElement | null)[] = [null, null, null, null];
-  private channelUrls: [string, string, string, string] = ["", "", "", ""];
-  private channelSizes: ({ width: number; height: number } | null)[] = [
-    null,
-    null,
-    null,
-    null,
-  ];
-  /** Un token par canal (évite d’annuler Promise.all multi-canaux). */
-  private channelLoadTokens = [0, 0, 0, 0];
-  private disposed = false;
-
-  private constructor(
-    canvas: HTMLCanvasElement,
-    ctx: CanvasRenderingContext2D,
-  ) {
-    this.canvas = canvas;
-    this.ctx = ctx;
-  }
-
-  static create(canvas: HTMLCanvasElement): Canvas2dFallbackRuntime {
-    const ctx = canvas.getContext("2d", { alpha: true });
-    if (!ctx) throw new Error("Canvas2D indisponible");
-    return new Canvas2dFallbackRuntime(canvas, ctx);
-  }
-
-  async setShader(_userBody: string): Promise<void> {
-    this.assertAlive();
-  }
-
-  async setChannel(index: 0 | 1 | 2 | 3, url: string): Promise<void> {
-    this.assertAlive();
-    const trimmed = url.trim();
-    if (this.channelUrls[index] === trimmed && this.images[index]) return;
-    this.channelUrls[index] = trimmed;
-    const token = ++this.channelLoadTokens[index];
-    if (!trimmed) {
-      this.images[index] = null;
-      this.channelSizes[index] = null;
-      return;
-    }
-    const img = await loadImage(trimmed);
-    if (token !== this.channelLoadTokens[index] || this.disposed) return;
-    this.images[index] = img;
-    this.channelSizes[index] = { width: img.naturalWidth, height: img.naturalHeight };
-  }
-
-  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;
-  }
-
-  draw(state: WebGpuFrameState) {
-    this.assertAlive();
-    const { ctx, canvas } = this;
-    const w = canvas.width;
-    const h = canvas.height;
-    ctx.clearRect(0, 0, w, h);
-    const img = this.images[0];
-    const mix = Math.min(1, Math.max(0, state.params[0] ?? 0));
-    if (img) {
-      ctx.drawImage(img, 0, 0, w, h);
-      if (mix > MIX_EPS) {
-        ctx.save();
-        ctx.globalAlpha = mix * TINT_ALPHA;
-        ctx.fillStyle = TINT_RGB;
-        ctx.fillRect(0, 0, w, h);
-        ctx.restore();
-      }
-    } else {
-      const g = ctx.createLinearGradient(0, 0, w, h);
-      g.addColorStop(0, `rgb(38,${Math.round(40 + mix * 80)},80)`);
-      g.addColorStop(1, `rgb(90,${Math.round(60 + mix * 40)},120)`);
-      ctx.fillStyle = g;
-      ctx.fillRect(0, 0, w, h);
-    }
-  }
-
-  dispose(_destroyDevice = false) {
-    if (this.disposed) return;
-    this.disposed = true;
-    for (let i = 0; i < CHANNEL_COUNT; i++) this.channelLoadTokens[i]++;
-    this.images = [null, null, null, null];
-  }
-
-  private assertAlive() {
-    if (this.disposed) throw new Error("Canvas2D fallback disposed");
-  }
-}
-
-async function loadImage(url: string): Promise<HTMLImageElement> {
-  const img = new Image();
-  img.crossOrigin = "anonymous";
-  await new Promise<void>((resolve, reject) => {
-    img.onload = () => resolve();
-    img.onerror = () => reject(new Error(`Failed to load texture: ${url}`));
-    img.src = url;
-  });
-  return img;
-}

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,182 +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 elementResolver: ((key: string) => Element | null) | null = null;
-
-  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);
-  }
-
-  setElementResolver(fn: ((key: string) => Element | null) | null) {
-    this.elementResolver = fn;
-    this.toy.setElementResolver(fn);
-  }
-
-  /** 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) {
-      if (trimmed.startsWith("#")) {
-        this.toy.ensureElementTexture(trimmed);
-        return;
-      }
-      // 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();
-    await this.ensureChannelAssets();
-  }
-
-  /** 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();
-      await this.ensureChannelAssets();
-    });
-    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);
-  }
-
-  updateLiveChannels(resolveEl: (key: string) => Element | null) {
-    this.assertAlive();
-    this.toy.updateElementTextures(resolveEl);
-  }
-
-  draw(state: WebGpuFrameState) {
-    this.assertAlive();
-    if (this.toy.isLost) return;
-    if (this.elementResolver) {
-      this.toy.updateElementTextures(this.elementResolver);
-    }
-    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 async ensureChannelAssets() {
-    const urls = this.channelUrls.filter((u) => u && !u.startsWith("#"));
-    if (urls.length) await this.toy.ensureTextures(urls);
-    for (const key of this.channelUrls) {
-      if (key.startsWith("#")) this.toy.ensureElementTexture(key);
-    }
-  }
-
-  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");
-  }
-}