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

package/src/docs/example/docs-3d-form.ts

@@ -0,0 +1,95 @@
+import { html, LitElement } from "lit";
+import { customElement } from "lit/decorators.js";
+import { tailwind } from "../tailwind";
+import { DataProviderKey } from "@supersoniks/concorde/dataProviderKey";
+import { set } from "@supersoniks/concorde/utils";
+import "../../core/components/functional/3d/3d";
+import "../../core/components/ui/form/input/input";
+import "../../core/components/ui/form/checkbox/checkbox";
+import { DEMO_3D_STYLES, HELMET_GLB } from "./docs-3d-shared";
+
+/** Entrées form uniquement. */
+const formKey = new DataProviderKey<{
+  exposure: number;
+  fov: number;
+  minDistance: number;
+  maxDistance: number;
+  autoRotate: string | boolean | null;
+}>("docs3dForm");
+
+/**
+ * Auto-bind form → viewer (exposure / fov / autoRotate).
+ */
+@customElement("docs-3d-form-demo")
+export class Docs3dFormDemo extends LitElement {
+  static styles = [tailwind, DEMO_3D_STYLES];
+
+  connectedCallback(): void {
+    super.connectedCallback();
+    set(formKey, {
+      exposure: 1,
+      fov: 45,
+      minDistance: 1,
+      maxDistance: 8,
+      autoRotate: "true",
+    });
+  }
+
+  render() {
+    return html`
+      <div class="flex flex-col gap-3" formDataProvider=${formKey.path}>
+        <div class="grid grid-cols-2 gap-3 sm:grid-cols-3 max-w-2xl">
+          <sonic-input
+            name="exposure"
+            type="number"
+            label="Exposure"
+            step="0.1"
+          ></sonic-input>
+          <sonic-input
+            name="fov"
+            type="number"
+            label="FOV"
+            step="1"
+          ></sonic-input>
+          <sonic-input
+            name="minDistance"
+            type="number"
+            label="Min distance"
+            step="0.1"
+          ></sonic-input>
+          <sonic-input
+            name="maxDistance"
+            type="number"
+            label="Max distance"
+            step="0.5"
+          ></sonic-input>
+          <div class="flex items-end pb-2">
+            <sonic-checkbox
+              name="autoRotate"
+              unique
+              checked
+              value="true"
+              label="Auto-rotate"
+            ></sonic-checkbox>
+          </div>
+        </div>
+
+        <sonic-3d
+          src=${HELMET_GLB}
+          camera="orbit"
+          pick
+          play
+          dataProvider=${formKey.path}
+          out-data-provider="docs3dFormOut"
+          aspect-ratio="16/10"
+        ></sonic-3d>
+
+        <p class="text-sm text-neutral-500">
+          Form → viewer : <code>exposure</code>, <code>fov</code>,
+          <code>minDistance</code>, <code>maxDistance</code>,
+          <code>autoRotate</code>. Zoom molette borné par min/max.
+        </p>
+      </div>
+    `;
+  }
+}

package/src/docs/example/docs-3d-orbit.ts

@@ -0,0 +1,44 @@
+import { html, LitElement } from "lit";
+import { customElement, state } from "lit/decorators.js";
+import { tailwind } from "../tailwind";
+import "../../core/components/functional/3d/3d";
+import { DEMO_3D_STYLES, HELMET_GLB } from "./docs-3d-shared";
+
+@customElement("docs-3d-orbit-demo")
+export class Docs3dOrbitDemo extends LitElement {
+  static styles = [tailwind, DEMO_3D_STYLES];
+
+  @state() private hit = "";
+
+  private onPick = (e: Event) => {
+    const detail = (e as CustomEvent<{ objectId: string }>).detail;
+    this.hit = detail?.objectId ?? "";
+  };
+
+  render() {
+    return html`
+      <div class="flex flex-col gap-2">
+        <sonic-3d
+          src=${HELMET_GLB}
+          camera="orbit"
+          auto-rotate
+          pick
+          play
+          min-distance="1"
+          max-distance="10"
+          min-polar="10"
+          max-polar="170"
+          aspect-ratio="16/10"
+          @pick=${this.onPick}
+        ></sonic-3d>
+        <p class="text-sm text-neutral-500">
+          DamagedHelmet (CDN) — glisser = orbiter · molette = zoom · clic droit =
+          pan · survol = highlight · double-clic = recentrer
+          ${this.hit
+            ? html` · pick: <code>${this.hit}</code>`
+            : null}
+        </p>
+      </div>
+    `;
+  }
+}

package/src/docs/example/docs-3d-out.ts

@@ -0,0 +1,56 @@
+import { html, LitElement } from "lit";
+import { customElement } from "lit/decorators.js";
+import { tailwind } from "../tailwind";
+import { DataProviderKey } from "@supersoniks/concorde/dataProviderKey";
+import "../../core/components/functional/3d/3d";
+import "../../core/components/functional/value/value";
+import { DEMO_3D_STYLES, HELMET_GLB } from "./docs-3d-shared";
+
+/** Sorties télémétrie (séparé du form). */
+const outKey = new DataProviderKey("docs3dOut");
+
+@customElement("docs-3d-out-demo")
+export class Docs3dOutDemo extends LitElement {
+  static styles = [tailwind, DEMO_3D_STYLES];
+
+  render() {
+    return html`
+      <div class="flex flex-col gap-2">
+        <sonic-3d
+          src=${HELMET_GLB}
+          camera="orbit"
+          auto-rotate
+          play
+          pick
+          out-data-provider=${outKey.path}
+          aspect-ratio="16/10"
+        ></sonic-3d>
+        <div class="flex flex-wrap gap-4 text-sm tabular-nums text-neutral-600">
+          <span>
+            ready:
+            <sonic-value dataProvider=${outKey.path} key="ready"></sonic-value>
+          </span>
+          <span>
+            distance:
+            <sonic-value
+              dataProvider=${outKey.path}
+              key="distance"
+            ></sonic-value>
+          </span>
+          <span>
+            yaw:
+            <sonic-value dataProvider=${outKey.path} key="yaw"></sonic-value>
+          </span>
+          <span>
+            frame:
+            <sonic-value dataProvider=${outKey.path} key="frame"></sonic-value>
+          </span>
+        </div>
+        <p class="text-sm text-neutral-500">
+          Sorties → <code>out-data-provider</code> via
+          <code>sonic-value key="…"</code> (pas <code>name</code>).
+        </p>
+      </div>
+    `;
+  }
+}

package/src/docs/example/docs-3d-shared.ts

@@ -0,0 +1,15 @@
+import { css } from "lit";
+
+/**
+ * DamagedHelmet — Khronos Sample Assets (CC BY 4.0 / CC BY-NC original).
+ * Servi via jsDelivr (CDN).
+ */
+export const HELMET_GLB =
+  "https://cdn.jsdelivr.net/gh/KhronosGroup/glTF-Sample-Assets@main/Models/DamagedHelmet/glTF-Binary/DamagedHelmet.glb";
+
+export const DEMO_3D_STYLES = css`
+  sonic-3d {
+    border-radius: 0.5rem;
+    --sonic-3d-ar: 16 / 10;
+  }
+`;

package/src/docs/example/docs-harris-webgpu-demo.ts

@@ -0,0 +1,482 @@
+/**
+ * Harris (sonic-shader) → extract patches → sonic-webgpu collage (1 démo).
+ * Les blobUrl d’extract alimentent channel0…3 ; WGSL = mosaïque 2×2 animée.
+ */
+import { css, html, LitElement, nothing } from "lit";
+import { customElement, state } from "lit/decorators.js";
+import { DataProviderKey } from "@supersoniks/concorde/core/utils/dataProviderKey";
+import { dp, set } from "@supersoniks/concorde/utils";
+import { tailwind } from "../tailwind";
+
+import "../../core/components/functional/shader/shader";
+import "../../core/components/functional/webgpu/webgpu";
+import "../../core/components/ui/button/button";
+import "../../core/components/ui/form/input/input";
+
+const sample = (file: string) =>
+  new URL(`/docs/shader-samples/${file}`, location.origin).href;
+
+const HARRIS_BUFFER_A = `
+void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  vec2 uv = fragCoord / iResolution.xy;
+  vec2 px = 1.0 / iResolution.xy;
+  float tl = dot(texture(iChannel0, uv + px * vec2(-1.0,  1.0)).rgb, vec3(0.299, 0.587, 0.114));
+  float t  = dot(texture(iChannel0, uv + px * vec2( 0.0,  1.0)).rgb, vec3(0.299, 0.587, 0.114));
+  float tr = dot(texture(iChannel0, uv + px * vec2( 1.0,  1.0)).rgb, vec3(0.299, 0.587, 0.114));
+  float l  = dot(texture(iChannel0, uv + px * vec2(-1.0,  0.0)).rgb, vec3(0.299, 0.587, 0.114));
+  float r  = dot(texture(iChannel0, uv + px * vec2( 1.0,  0.0)).rgb, vec3(0.299, 0.587, 0.114));
+  float bl = dot(texture(iChannel0, uv + px * vec2(-1.0, -1.0)).rgb, vec3(0.299, 0.587, 0.114));
+  float b  = dot(texture(iChannel0, uv + px * vec2( 0.0, -1.0)).rgb, vec3(0.299, 0.587, 0.114));
+  float br = dot(texture(iChannel0, uv + px * vec2( 1.0, -1.0)).rgb, vec3(0.299, 0.587, 0.114));
+  float Ix = (tr + 2.0 * r + br) - (tl + 2.0 * l + bl);
+  float Iy = (tl + 2.0 * t + tr) - (bl + 2.0 * b + br);
+  fragColor = vec4(Ix * Ix, Iy * Iy, Ix * Iy, 1.0) * 4.0;
+}
+`;
+
+const HARRIS_BUFFER_B = `
+void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  vec2 uv = fragCoord / iResolution.xy;
+  vec2 px = 1.0 / iResolution.xy;
+  vec3 acc = vec3(0.0);
+  float wsum = 0.0;
+  for (int j = -2; j <= 2; j++) {
+    for (int i = -2; i <= 2; i++) {
+      float w = exp(-0.5 * float(i * i + j * j) / 1.6);
+      acc += texture(iChannel0, uv + px * vec2(float(i), float(j))).rgb * w;
+      wsum += w;
+    }
+  }
+  fragColor = vec4(acc / wsum, 1.0);
+}
+`;
+
+const HARRIS_IMAGE = `
+float harrisR(vec2 uv) {
+  vec3 t = texture(iChannel0, uv).rgb;
+  float k = max(uParam1, 0.001);
+  float det = t.x * t.y - t.z * t.z;
+  float trace = t.x + t.y;
+  return det - k * trace * trace;
+}
+void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  vec2 uv = fragCoord / iResolution.xy;
+  vec2 px = 1.0 / iResolution.xy;
+  vec3 video = texture(iChannel1, uv).rgb;
+  float R = harrisR(uv);
+  float thr = max(uParam0, 0.0001);
+  float overlay = clamp(uParam2, 0.0, 1.0);
+  float Rmax = R;
+  for (int j = -1; j <= 1; j++) {
+    for (int i = -1; i <= 1; i++) {
+      Rmax = max(Rmax, harrisR(uv + px * vec2(float(i), float(j))));
+    }
+  }
+  float isCorner = step(thr, R) * step(Rmax - 1e-6, R);
+  float heat = smoothstep(thr, thr * 3.0, max(R, 0.0));
+  vec3 col = mix(video, video * vec3(1.15, 0.35, 1.05) + vec3(0.35, 0.05, 0.4) * heat, heat * overlay);
+  col = mix(col, vec3(0.15, 1.0, 0.45), isCorner * overlay);
+  fragColor = vec4(col, 1.0);
+}
+`;
+
+const HARRIS_EXTRACT_MASK = `
+float harrisR(vec2 uv) {
+  vec3 t = texture(iChannel0, uv).rgb;
+  float k = max(uParam1, 0.001);
+  float det = t.x * t.y - t.z * t.z;
+  float trace = t.x + t.y;
+  return det - k * trace * trace;
+}
+void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  vec2 uv = fragCoord / iResolution.xy;
+  vec2 px = 1.0 / iResolution.xy;
+  float R = harrisR(uv);
+  float thr = max(uParam0, 0.0001);
+  float Rmax = R;
+  for (int j = -1; j <= 1; j++) {
+    for (int i = -1; i <= 1; i++) {
+      Rmax = max(Rmax, harrisR(uv + px * vec2(float(i), float(j))));
+    }
+  }
+  float isCorner = step(thr, R) * step(Rmax - 1e-6, R);
+  float Rp = max(R, 0.0);
+  float score = isCorner * (Rp / (Rp + thr * 3.0));
+  fragColor = vec4(vec3(score), 1.0);
+}
+`;
+
+/**
+ * Mosaïque 2×2 + mix voisin.
+ * params.x = mix 0–1 ; params.y = nombre de patches 1–4.
+ * Important : textureSample hors branches (sinon erreur WGSL uniform control flow).
+ */
+const PATCH_BOARD_WGSL = `
+fn pickPatch(id: i32, c0: vec3f, c1: vec3f, c2: vec3f, c3: vec3f) -> vec3f {
+  if (id <= 0) { return c0; }
+  if (id == 1) { return c1; }
+  if (id == 2) { return c2; }
+  return c3;
+}
+
+fn mainImage(uv: vec2f, fragCoord: vec2f) -> vec4f {
+  _ = fragCoord;
+  let cell = floor(uv * 2.0);
+  let local = fract(uv * 2.0);
+  let id = i32(cell.x) + i32(cell.y) * 2;
+  let n = i32(clamp(floor(u.params.y + 0.001), 1.0, 4.0));
+  let onCell = select(0.0, 1.0, id < n);
+
+  let breath = 0.015 * sin(u.time * 2.2 + f32(id) * 1.7);
+  let luv = clamp((local - 0.5) * (0.88 - breath) + 0.5, vec2f(0.0), vec2f(1.0));
+
+  // Samples uniformes (tous les canaux, toujours)
+  let s0 = iChannel0(luv).rgb;
+  let s1 = iChannel1(luv).rgb;
+  let s2 = iChannel2(luv).rgb;
+  let s3 = iChannel3(luv).rgb;
+  var col = pickPatch(id, s0, s1, s2, s3);
+
+  let nextCand = id + 1;
+  let nextId = select(nextCand, 0, nextCand >= n);
+  let other = pickPatch(nextId, s0, s1, s2, s3);
+  var muv = vec2f(0.5, 0.5);
+  if (length(u.mouse.xy) > 0.5) {
+    muv = u.mouse.xy / max(u.resolution, vec2f(1.0));
+  }
+  let mixAmt = clamp(u.params.x, 0.0, 1.0) * (0.25 + 0.55 * muv.x) * select(0.0, 1.0, n > 1);
+  let diff = abs(col - other);
+  let alike = 1.0 - clamp((diff.r + diff.g + diff.b) * 1.8, 0.0, 1.0);
+  col = mix(col, mix(col, other, 0.45), mixAmt * alike);
+  col += vec3f(0.05, 0.25, 0.15) * alike * mixAmt * 0.35;
+
+  let edge = max(
+    smoothstep(0.015, 0.0, min(local.x, local.y)),
+    smoothstep(0.985, 1.0, max(local.x, local.y)),
+  );
+  let pulse = 0.35 + 0.65 * (0.5 + 0.5 * sin(u.time * 3.0 + f32(id)));
+  col = mix(col, vec3f(0.2, 0.85, 0.55) * pulse, edge * 0.85);
+  col = mix(vec3f(0.08, 0.09, 0.11), col, onCell);
+  return vec4f(col, 1.0);
+}
+`;
+
+type ExtractItem = {
+  id?: string;
+  score?: number;
+  blobUrl?: string;
+  url?: string;
+  x?: number;
+  y?: number;
+};
+
+type ShaderDp = {
+  param0?: number;
+  param1?: number;
+  param2?: number;
+  extractCount?: number;
+  extractSeq?: number;
+  extracts?: ExtractItem[];
+};
+
+type GpuDp = {
+  channel0?: string;
+  channel1?: string;
+  channel2?: string;
+  channel3?: string;
+  param0?: number;
+  param1?: number;
+};
+
+const shaderKey = new DataProviderKey<ShaderDp>("harrisGpuShader");
+const gpuKey = new DataProviderKey<GpuDp | null>("harrisGpuFx");
+
+@customElement("docs-harris-webgpu-demo")
+export class DocsHarrisWebgpuDemo extends LitElement {
+  static styles = [
+    tailwind,
+    css`
+      :host {
+        display: block;
+      }
+      .stack {
+        display: flex;
+        flex-direction: column;
+        gap: 0;
+        border-radius: 0.5rem;
+        overflow: hidden;
+        border: 1px solid #e5e5e5;
+      }
+      .stack sonic-shader,
+      .stack sonic-webgpu {
+        border-radius: 0;
+        min-height: 0;
+      }
+      .stack sonic-shader {
+        --sonic-shader-ar: 16 / 10;
+      }
+      .stack sonic-webgpu {
+        --sonic-webgpu-ar: 16 / 9;
+        background: #0a0a0a;
+      }
+      .label-bar {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 0.5rem;
+        padding: 0.35rem 0.65rem;
+        font-size: 0.7rem;
+        background: #f4f4f5;
+        color: #525252;
+      }
+      .label-bar code {
+        font-size: 0.65rem;
+        padding: 0.05rem 0.3rem;
+        border-radius: 0.2rem;
+        background: #e4e4e7;
+      }
+      .thumbs {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0.35rem;
+        padding: 0.5rem 0.65rem;
+        background: #fafafa;
+        border-top: 1px solid #e5e5e5;
+      }
+      .thumbs img {
+        width: 3rem;
+        height: 3rem;
+        object-fit: cover;
+        border-radius: 0.25rem;
+        border: 1px solid #d4d4d8;
+      }
+      .pipe {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0.35rem 0.5rem;
+        align-items: center;
+        font-size: 0.75rem;
+        color: #737373;
+      }
+      .pipe code {
+        font-size: 0.7rem;
+        padding: 0.1rem 0.35rem;
+        border-radius: 0.25rem;
+        background: #f4f4f5;
+        color: #525252;
+      }
+      .pipe .arrow {
+        opacity: 0.45;
+      }
+    `,
+  ];
+
+  @state() private active = false;
+  @state() private patches: ExtractItem[] = [];
+  @state() private seq = 0;
+  private offExtract: (() => void) | null = null;
+
+  disconnectedCallback(): void {
+    this.offExtract?.();
+    super.disconnectedCallback();
+  }
+
+  private start = () => {
+    if (this.active) return;
+    this.active = true;
+    set(shaderKey, {
+      param0: 0.08,
+      param1: 0.1,
+      param2: 0.85,
+      extractCount: 0,
+      extractSeq: 0,
+      extracts: [],
+    });
+    set(gpuKey, { param0: 0.55, param1: 1 });
+
+    const syncGpu = (items: ExtractItem[]) => {
+      const urls = items
+        .map((it) => it.blobUrl || it.url)
+        .filter((u): u is string => typeof u === "string" && u.length > 0)
+        .slice(0, 4);
+      this.patches = items.slice(0, 4);
+      set(gpuKey, {
+        param0: 0.55,
+        param1: Math.max(1, urls.length),
+        channel0: urls[0] ?? "",
+        channel1: urls[1] ?? urls[0] ?? "",
+        channel2: urls[2] ?? urls[0] ?? "",
+        channel3: urls[3] ?? urls[0] ?? "",
+      });
+    };
+
+    const onSeq = (seq: number | null | undefined) => {
+      this.seq = typeof seq === "number" ? seq : this.seq;
+      const list = dp(shaderKey.extracts).get();
+      const items = Array.isArray(list) ? list : [];
+      syncGpu(items);
+    };
+    dp(shaderKey.extractSeq).onAssign(onSeq);
+    this.offExtract = () => dp(shaderKey.extractSeq).offAssign(onSeq);
+  };
+
+  private onExtract = (e: Event) => {
+    const detail = (e as CustomEvent).detail as {
+      items?: ExtractItem[];
+      frame?: number;
+    };
+    const items = detail.items ?? [];
+    this.seq = detail.frame ?? this.seq + 1;
+    const urls = items
+      .map((it) => it.blobUrl || it.url)
+      .filter((u): u is string => typeof u === "string" && u.length > 0)
+      .slice(0, 4);
+    this.patches = items.slice(0, 4);
+    set(gpuKey, {
+      param0: 0.55,
+      param1: Math.max(1, urls.length),
+      channel0: urls[0] ?? "",
+      channel1: urls[1] ?? urls[0] ?? "",
+      channel2: urls[2] ?? urls[0] ?? "",
+      channel3: urls[3] ?? urls[0] ?? "",
+    });
+  };
+
+  render() {
+    if (!this.active) {
+      return html`
+        <div
+          class="flex flex-col gap-3 rounded-lg border border-dashed border-neutral-300 p-4"
+        >
+          <div class="pipe">
+            <code>Harris</code><span class="arrow">→</span>
+            <code>extract patches</code><span class="arrow">→</span>
+            <code>webgpu</code>
+            <span class="text-neutral-400">(mosaïque)</span>
+          </div>
+          <p class="m-0 text-sm text-neutral-600">
+            Vidéo → coins Harris → crops → collage GPU (channels + diff entre
+            patches). Une seule démo, deux bandes empilées.
+          </p>
+          <sonic-button type="primary" size="sm" @click=${this.start}
+            >Try</sonic-button
+          >
+        </div>
+      `;
+    }
+
+    const video = sample("video.webm");
+
+    return html`
+      <div class="flex flex-col gap-3">
+        <div class="pipe">
+          <code>shader Harris</code><span class="arrow">→</span>
+          <code>patches</code><span class="arrow">→</span>
+          <code>webgpu</code>
+          <span class="text-neutral-400"
+            >· ${this.patches.length} patch(es) · #${this.seq}</span
+          >
+        </div>
+
+        <div
+          formDataProvider=${shaderKey.path}
+          class="flex flex-wrap gap-3 text-sm"
+        >
+          <div class="flex items-center gap-2 min-w-[8rem] flex-1">
+            <label class="text-xs text-neutral-500 shrink-0">seuil</label>
+            <sonic-input
+              type="range"
+              name="param0"
+              min="0.002"
+              max="0.08"
+              step="0.002"
+              class="flex-1"
+            ></sonic-input>
+          </div>
+          <div class="flex items-center gap-2 min-w-[8rem] flex-1">
+            <label class="text-xs text-neutral-500 shrink-0">k</label>
+            <sonic-input
+              type="range"
+              name="param1"
+              min="0.02"
+              max="0.1"
+              step="0.005"
+              class="flex-1"
+            ></sonic-input>
+          </div>
+        </div>
+
+        <div class="stack">
+          <div class="label-bar">
+            <span
+              ><code>sonic-shader</code> Harris + extract-bitmaps</span
+            >
+            <span class="text-neutral-400">coins → peaks</span>
+          </div>
+          <sonic-shader
+            play
+            .mouse=${false}
+            extract
+            extract-bitmaps
+            extract-mask="buffer-c"
+            extract-source="image"
+            extract-threshold="0.12"
+            extract-max="4"
+            extract-patch="56"
+            extract-interval="400"
+            extract-data-provider=${shaderKey.path}
+            dataProvider=${shaderKey.path}
+            channel0=${video}
+            buffer-a-ch0=${video}
+            buffer-b-ch0="buffer-a"
+            buffer-c-ch0="buffer-b"
+            image-ch0="buffer-b"
+            image-ch1=${video}
+            .bufferA=${HARRIS_BUFFER_A}
+            .bufferB=${HARRIS_BUFFER_B}
+            .bufferC=${HARRIS_EXTRACT_MASK}
+            .image=${HARRIS_IMAGE}
+            @extract=${this.onExtract}
+          ></sonic-shader>
+
+          <div class="label-bar">
+            <span
+              ><code>sonic-webgpu</code> kernel=image — mosaïque patches</span
+            >
+            <span class="text-neutral-400"
+              >channel0…3 · souris = mix voisin</span
+            >
+          </div>
+          <sonic-webgpu
+            play
+            mouse
+            kernel="image"
+            dataProvider=${gpuKey.path}
+            .shader=${PATCH_BOARD_WGSL}
+          ></sonic-webgpu>
+
+          ${this.patches.length
+            ? html`<div class="thumbs">
+                ${this.patches.map(
+                  (p, i) => html`
+                    <img
+                      src=${p.blobUrl || p.url || ""}
+                      alt="patch ${i}"
+                      title=${`score ${p.score?.toFixed?.(2) ?? "—"}`}
+                    />
+                  `,
+                )}
+              </div>`
+            : html`<div class="thumbs text-xs text-neutral-400">
+                En attente des premiers coins…
+              </div>`}
+        </div>
+
+        <p class="m-0 text-xs text-neutral-500">
+          Extract → DP → <code>channel0…3</code>. Le WGSL compare chaque case à
+          son voisin (diff RGB) pour un effet correspondence léger.
+        </p>
+      </div>
+    `;
+  }
+}