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

package/src/docs/_misc/html-integration.md

@@ -2,6 +2,8 @@
 
 Some hosts (legacy PHP pages, static HTML) embed Concorde components **without** a Lit build step. They can use HTML attributes such as **`data-bind`**, **`dataProvider`**, and **`formDataProvider`** on tags directly in the page.
 
+**Form fields** (`sonic-input`, checkbox, select, …) bind only via **`formDataProvider` + `name`**. They do not autofill from ancestor `dataProvider` (Subscriber was removed from FormElement — see [FormElement without Subscriber](#docs/_misc/formelement-subscriber-removal.md/formelement-subscriber-removal)).
+
 That style is **not** what we demonstrate in this doc site: live examples are **Lit components** under `src/docs/example/`, registered once and reused from Markdown via tags like `<docs-joke-search-demo>`.
 
 | Goal | Use |

package/src/docs/_misc/visual-stack.md

@@ -44,9 +44,27 @@ Also accepted: `<img>`, `<video>`, `<canvas>`, or another Concorde host that imp
 
 <docs-lit-demo for="docs-3d-shader-live-demo"></docs-lit-demo>
 
+## 3D → WebGPU live
+
+Same `#id` bridge as the shader: `sonic-webgpu channel0="#plateau-gpu"` copies the 3D canvas each `frameSeq` via `copyExternalImageToTexture` (persistent texture — no recreate when size is stable).
+
+<docs-lit-demo for="docs-3d-webgpu-live-demo"></docs-lit-demo>
+
+## Post FX + depth (in sonic-3d)
+
+Scene → offscreen color + depth → GLSL passes (`post-*`) in the same WebGL context. Use `post-image-ch1="depth"` for edge / DoF-style effects without a second component.
+
+<docs-lit-demo for="docs-3d-post-depth-demo"></docs-lit-demo>
+
 ## Harris → patches → WebGPU
 
-`sonic-shader` detects corners (Harris) and extracts patches → `channel0…3` on `sonic-webgpu` (`kernel="image"`): GPU mosaic.
+`sonic-shader` detects corners (Harris, `buffer-format="rgba16f"` + NMS 5×5 / shape filter) and extracts patches → `channel0…3` on `sonic-webgpu` (`kernel="image"`): GPU mosaic.
+
+Use `buffer-format="rgba16f"` so signed `IxIy` / non-clamped `Ix²` survive the buffer (RGBA8 zeros negatives and saturates). See [Shader — buffer precision](#core/components/functional/shader/shader.md/shader).
+
+Channel rebinds and `release-offscreen="auto"` (keep FBO state when a pass uses `self`) : [Shader — état et visibilité](#core/components/functional/shader/shader.md/shader).
+
+`sonic-3d` live sources keep playing off-screen when a `#id` consumer is registered (or `play-offscreen`) — see [3D — bridging](#core/components/functional/3d/3d.md/3d).
 
 <docs-lit-demo for="docs-harris-webgpu-demo"></docs-lit-demo>
 

package/src/docs/code.ts

@@ -36,6 +36,8 @@ export class DocsCode extends LitElement {
       pre {
         font-size: 13px !important;
         padding-right: 5rem !important;
+        border: 1px solid var(--sc-base-200);
+        border-radius: var(--sc-rounded);
       }
       .custom-scroll {
         overflow: auto !important;
@@ -239,7 +241,7 @@ export class DocsCode extends LitElement {
     return html`
       <div
         class="relative ${this.language === "markup"
-          ? "border border-neutral-100 p-4 rounded-md"
+          ? "rounded-md border border-neutral-200 bg-neutral-50/80 dark:border-neutral-700/80 dark:bg-neutral-900/40 p-4"
           : ""}"
       >
         ${this.language === "markup" && !this.noOutput

package/src/docs/components/docs-demo-sources.ts

@@ -96,6 +96,42 @@ export const DOCS_LIT_DEMO_REGISTRY: Record<string, DocsLitDemoConfig> = {
       { path: "src/docs/example/docs-queue-demos.ts", line: 38, label: "geo" },
     ],
   },
+  "docs-input-autocomplete-basic-demo": {
+    sources: [
+      {
+        path: "src/docs/example/docs-input-autocomplete-demos.ts",
+        line: 11,
+        label: "basic",
+      },
+    ],
+  },
+  "docs-input-autocomplete-code-demo": {
+    sources: [
+      {
+        path: "src/docs/example/docs-input-autocomplete-demos.ts",
+        line: 36,
+        label: "code",
+      },
+    ],
+  },
+  "docs-input-autocomplete-select-demo": {
+    sources: [
+      {
+        path: "src/docs/example/docs-input-autocomplete-demos.ts",
+        line: 63,
+        label: "select",
+      },
+    ],
+  },
+  "docs-input-autocomplete-keyboard-demo": {
+    sources: [
+      {
+        path: "src/docs/example/docs-input-autocomplete-demos.ts",
+        line: 91,
+        label: "keyboard",
+      },
+    ],
+  },
   "docs-users-list": {
     sources: [
       {
@@ -223,6 +259,22 @@ export const DOCS_LIT_DEMO_REGISTRY: Record<string, DocsLitDemoConfig> = {
       },
     ],
   },
+  "docs-3d-webgpu-live-demo": {
+    sources: [
+      {
+        path: "src/docs/example/docs-3d-webgpu-live-demo.ts",
+        label: "3D → webgpu live",
+      },
+    ],
+  },
+  "docs-3d-post-depth-demo": {
+    sources: [
+      {
+        path: "src/docs/example/docs-3d-post-depth-demo.ts",
+        label: "3D post depth edges",
+      },
+    ],
+  },
   "docs-webgpu-demo": {
     sources: [
       {
@@ -506,6 +558,18 @@ export const DOCS_DEMO_SOURCE_REGISTRY: Record<string, DocsSource[]> = {
       label: "3d → shader live",
     },
   ],
+  "docs-3d-webgpu-live-demo": [
+    {
+      path: "src/docs/example/docs-3d-webgpu-live-demo.ts",
+      label: "3d → webgpu live",
+    },
+  ],
+  "docs-3d-post-depth-demo": [
+    {
+      path: "src/docs/example/docs-3d-post-depth-demo.ts",
+      label: "3d post depth",
+    },
+  ],
   "docs-webgpu-demo": [
     { path: "src/docs/example/docs-webgpu-demo.ts", label: "webgpu demo" },
   ],
@@ -530,6 +594,30 @@ export const DOCS_DEMO_SOURCE_REGISTRY: Record<string, DocsSource[]> = {
   "docs-queue-geo-demo": [
     { path: "src/docs/example/docs-queue-demos.ts", label: "queue demos" },
   ],
+  "docs-input-autocomplete-basic-demo": [
+    {
+      path: "src/docs/example/docs-input-autocomplete-demos.ts",
+      label: "autocomplete demos",
+    },
+  ],
+  "docs-input-autocomplete-code-demo": [
+    {
+      path: "src/docs/example/docs-input-autocomplete-demos.ts",
+      label: "autocomplete demos",
+    },
+  ],
+  "docs-input-autocomplete-select-demo": [
+    {
+      path: "src/docs/example/docs-input-autocomplete-demos.ts",
+      label: "autocomplete demos",
+    },
+  ],
+  "docs-input-autocomplete-keyboard-demo": [
+    {
+      path: "src/docs/example/docs-input-autocomplete-demos.ts",
+      label: "autocomplete demos",
+    },
+  ],
   "docs-queue-users-demo": [
     { path: "src/docs/example/docs-queue-demos.ts", label: "queue demos" },
   ],

package/src/docs/docs.ts

@@ -13,6 +13,7 @@ import "./example/docs-users-list";
 import "./example/docs-user-two-scopes";
 import "./example/docs-joke-demos";
 import "./example/docs-queue-demos";
+import "./example/docs-input-autocomplete-demos";
 import "./example/docs-toggle-demos";
 import "./example/docs-list-demos";
 import "./example/docs-jsonata-demos";
@@ -22,6 +23,8 @@ import "./example/docs-shader-demos";
 import "./example/docs-webgpu-demo";
 import "./example/docs-visual-stack-demo";
 import "./example/docs-3d-shader-live-demo";
+import "./example/docs-3d-webgpu-live-demo";
+import "./example/docs-3d-post-depth-demo";
 import "./example/docs-harris-webgpu-demo";
 import "./example/docs-router-demos";
 import "./example/docs-submit-demos";

package/src/docs/example/docs-3d-post-depth-demo.ts

@@ -0,0 +1,68 @@
+/**
+ * Démo Lot 2 : post FX dans sonic-3d avec canal depth (contours).
+ */
+import { css, html, LitElement } from "lit";
+import { customElement } from "lit/decorators.js";
+import { tailwind } from "../tailwind";
+import "../../core/components/functional/3d/3d";
+import { DEMO_3D_STYLES, HELMET_GLB } from "./docs-3d-shared";
+
+const DEPTH_EDGE = `
+void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  vec2 uv = fragCoord / iResolution.xy;
+  vec2 px = 1.0 / max(iResolution.xy, vec2(1.0));
+  vec3 col = texture(iChannel0, uv).rgb;
+
+  float dC = texture(iChannel1, uv).r;
+  float dL = texture(iChannel1, uv - px * vec2(1.0, 0.0)).r;
+  float dR = texture(iChannel1, uv + px * vec2(1.0, 0.0)).r;
+  float dU = texture(iChannel1, uv + px * vec2(0.0, 1.0)).r;
+  float dD = texture(iChannel1, uv - px * vec2(0.0, 1.0)).r;
+  float edge = length(vec2(dR - dL, dU - dD));
+  edge = smoothstep(0.002 + uParam0 * 0.02, 0.02 + uParam0 * 0.05, edge);
+
+  vec3 ink = vec3(0.05, 0.95, 1.0);
+  col = mix(col, ink, edge * 0.85);
+  col *= 0.92 + 0.08 * sin(iTime * 1.5);
+  fragColor = vec4(col, 1.0);
+}
+`;
+
+@customElement("docs-3d-post-depth-demo")
+export class Docs3dPostDepthDemo extends LitElement {
+  static styles = [
+    tailwind,
+    DEMO_3D_STYLES,
+    css`
+      sonic-3d {
+        width: 100%;
+      }
+    `,
+  ];
+
+  render() {
+    return html`
+      <div class="flex flex-col gap-2">
+        <sonic-3d
+          src=${HELMET_GLB}
+          camera="orbit"
+          auto-rotate
+          play
+          pick
+          min-distance="1"
+          max-distance="10"
+          aspect-ratio="16/10"
+          post-image=${DEPTH_EDGE}
+          post-image-ch0="scene"
+          post-image-ch1="depth"
+          param0="0.55"
+        ></sonic-3d>
+        <p class="text-sm text-neutral-500">
+          Post FX interne (<code>post-image</code>) : couleur
+          <code>scene</code> + discontinuités sur <code>depth</code> — pas de
+          copie vers un second composant.
+        </p>
+      </div>
+    `;
+  }
+}

package/src/docs/example/docs-3d-webgpu-live-demo.ts

@@ -0,0 +1,83 @@
+/**
+ * Démo pont live : sonic-3d → sonic-webgpu via channel0="#plateau-gpu"
+ * (copyExternalImageToTexture chaque frameSeq, texture réutilisée).
+ */
+import { css, html, LitElement } from "lit";
+import { customElement } from "lit/decorators.js";
+import { tailwind } from "../tailwind";
+import "../../core/components/functional/3d/3d";
+import "../../core/components/functional/webgpu/webgpu";
+import { DEMO_3D_STYLES, HELMET_GLB } from "./docs-3d-shared";
+
+/** Tint + vignette — prouve le sampling live du canvas 3D. */
+const LIVE_WGSL = `
+fn mainImage(uv: vec2f, fragCoord: vec2f) -> vec4f {
+  _ = fragCoord;
+  let c = iChannel0(uv).rgb;
+  let mid = uv - vec2f(0.5);
+  let vig = smoothstep(1.1, 0.35, length(mid));
+  let pulse = 0.92 + 0.08 * sin(u.time * 2.0);
+  let tint = vec3f(0.15, 0.85, 1.0);
+  let edge = length(c - iChannel0(uv + mid * 0.012).rgb);
+  var col = mix(c, c * tint * 1.15, clamp(edge * 4.0, 0.0, 0.55));
+  col *= vig * pulse;
+  return vec4f(col, 1.0);
+}
+`;
+
+@customElement("docs-3d-webgpu-live-demo")
+export class Docs3dWebgpuLiveDemo extends LitElement {
+  static styles = [
+    tailwind,
+    DEMO_3D_STYLES,
+    css`
+      .grid {
+        display: grid;
+        gap: 0.75rem;
+        grid-template-columns: 1fr;
+      }
+      @media (min-width: 720px) {
+        .grid {
+          grid-template-columns: 1fr 1fr;
+        }
+      }
+      sonic-3d,
+      sonic-webgpu {
+        width: 100%;
+        border-radius: 0.5rem;
+        overflow: hidden;
+      }
+    `,
+  ];
+
+  render() {
+    return html`
+      <div class="flex flex-col gap-2">
+        <div class="grid">
+          <sonic-3d
+            id="plateau-gpu"
+            src=${HELMET_GLB}
+            camera="orbit"
+            auto-rotate
+            play
+            min-distance="1"
+            max-distance="10"
+            aspect-ratio="16/10"
+          ></sonic-3d>
+          <sonic-webgpu
+            play
+            kernel="image"
+            channel0="#plateau-gpu"
+            .shader=${LIVE_WGSL}
+            aspect-ratio="16/10"
+          ></sonic-webgpu>
+        </div>
+        <p class="text-sm text-neutral-500">
+          Live bridge: <code>channel0="#plateau-gpu"</code> →
+          <code>copyExternalImageToTexture</code> (texture persistante, pas de
+          JPEG). Gauche = <code>sonic-3d</code>, droite = tint / edge WebGPU.
+        </p>
+      </div>
+    `;
+  }
+}

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

@@ -17,6 +17,7 @@ const sample = (file: string) =>
   new URL(`/docs/shader-samples/${file}`, location.origin).href;
 
 const HARRIS_BUFFER_A = `
+// Tenseur structure (Ix², Iy², IxIy) — nécessite buffer-format=rgba16f (IxIy signé).
 void mainImage(out vec4 fragColor, in vec2 fragCoord) {
   vec2 uv = fragCoord / iResolution.xy;
   vec2 px = 1.0 / iResolution.xy;
@@ -30,11 +31,12 @@ void mainImage(out vec4 fragColor, in vec2 fragCoord) {
   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;
+  fragColor = vec4(Ix * Ix, Iy * Iy, Ix * Iy, 1.0);
 }
 `;
 
 const HARRIS_BUFFER_B = `
+// Lissage gaussien 5×5 du tenseur (σ ≈ 1.26).
 void mainImage(out vec4 fragColor, in vec2 fragCoord) {
   vec2 uv = fragCoord / iResolution.xy;
   vec2 px = 1.0 / iResolution.xy;
@@ -51,58 +53,50 @@ void mainImage(out vec4 fragColor, in vec2 fragCoord) {
 }
 `;
 
-const HARRIS_IMAGE = `
-float harrisR(vec2 uv) {
+const HARRIS_EXTRACT_MASK = `
+// Réponse Harris + filtre de forme + max local STRICT 5×5 (départage par position).
+float harrisAt(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;
+  float R = det - k * trace * trace;
+  // Forme ≈ 4 det / trace² ∈ [0,1] : ~1 coin isotropique, ~0 bord.
+  float shape = (trace > 1e-5) ? clamp(4.0 * det / (trace * trace), 0.0, 1.0) : 0.0;
+  if (R < max(uParam0, 1e-6) || shape < 0.45) return 0.0;
+  return R;
 }
 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 R = harrisAt(uv);
+  float thr = max(uParam0, 1e-6);
+  float isMax = step(thr, R);
+  for (int j = -2; j <= 2; j++) {
+    for (int i = -2; i <= 2; i++) {
+      if (i == 0 && j == 0) continue;
+      float n = harrisAt(uv + px * vec2(float(i), float(j)));
+      bool before = j < 0 || (j == 0 && i < 0);
+      if (n > R || (before && abs(n - R) < 1e-8)) isMax = 0.0;
     }
   }
-  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);
+  float Rp = max(R, 0.0);
+  float score = isMax * (Rp / (Rp + thr * 4.0));
+  fragColor = vec4(vec3(score), 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;
-}
+const HARRIS_IMAGE = `
 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);
+  vec3 video = texture(iChannel1, uv).rgb;
+  float score = texture(iChannel0, uv).r;
+  float overlay = clamp(uParam2, 0.0, 1.0);
+  float heat = smoothstep(0.05, 0.55, score);
+  vec3 col = mix(video, video * vec3(1.12, 0.4, 1.05) + vec3(0.28, 0.04, 0.35) * heat, heat * overlay * 0.55);
+  // Points isolés (pas de traînées de bords).
+  col = mix(col, vec3(0.12, 1.0, 0.42), step(0.08, score) * overlay);
+  fragColor = vec4(col, 1.0);
 }
 `;
 
@@ -285,9 +279,9 @@ export class DocsHarrisWebgpuDemo extends LitElement {
     if (this.active) return;
     this.active = true;
     set(shaderKey, {
-      param0: 0.08,
-      param1: 0.1,
-      param2: 0.85,
+      param0: 0.015,
+      param1: 0.05,
+      param2: 0.9,
       extractCount: 0,
       extractSeq: 0,
       extracts: [],
@@ -299,7 +293,7 @@ export class DocsHarrisWebgpuDemo extends LitElement {
         .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);
+      this.patches = items.slice(0, 8);
       set(gpuKey, {
         param0: 0.55,
         param1: Math.max(1, urls.length),
@@ -331,7 +325,7 @@ export class DocsHarrisWebgpuDemo extends LitElement {
       .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);
+    this.patches = items.slice(0, 8);
     set(gpuKey, {
       param0: 0.55,
       param1: Math.max(1, urls.length),
@@ -355,8 +349,8 @@ export class DocsHarrisWebgpuDemo extends LitElement {
             <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.
+            Vidéo → Harris (<code>rgba16f</code>, NMS 5×5 + filtre forme) →
+            crops → collage GPU. Coins isolés, pas de traînées sur les bords.
           </p>
           <sonic-button type="primary" size="sm" @click=${this.start}
             >Try</sonic-button
@@ -388,8 +382,8 @@ export class DocsHarrisWebgpuDemo extends LitElement {
               type="range"
               name="param0"
               min="0.002"
-              max="0.08"
-              step="0.002"
+              max="0.06"
+              step="0.001"
               class="flex-1"
             ></sonic-input>
           </div>
@@ -399,7 +393,7 @@ export class DocsHarrisWebgpuDemo extends LitElement {
               type="range"
               name="param1"
               min="0.02"
-              max="0.1"
+              max="0.12"
               step="0.005"
               class="flex-1"
             ></sonic-input>
@@ -409,19 +403,21 @@ export class DocsHarrisWebgpuDemo extends LitElement {
         <div class="stack">
           <div class="label-bar">
             <span
-              ><code>sonic-shader</code> Harris + extract-bitmaps</span
+              ><code>sonic-shader</code> Harris
+              <code>rgba16f</code> + extract</span
             >
-            <span class="text-neutral-400">coins → peaks</span>
+            <span class="text-neutral-400">coins isolés → peaks</span>
           </div>
           <sonic-shader
             play
+            buffer-format="rgba16f"
             .mouse=${false}
             extract
             extract-bitmaps
             extract-mask="buffer-c"
             extract-source="image"
-            extract-threshold="0.12"
-            extract-max="4"
+            extract-threshold="0.08"
+            extract-max="8"
             extract-patch="56"
             extract-interval="400"
             extract-data-provider=${shaderKey.path}
@@ -430,7 +426,7 @@ export class DocsHarrisWebgpuDemo extends LitElement {
             buffer-a-ch0=${video}
             buffer-b-ch0="buffer-a"
             buffer-c-ch0="buffer-b"
-            image-ch0="buffer-b"
+            image-ch0="buffer-c"
             image-ch1=${video}
             .bufferA=${HARRIS_BUFFER_A}
             .bufferB=${HARRIS_BUFFER_B}
@@ -473,8 +469,10 @@ export class DocsHarrisWebgpuDemo extends LitElement {
         </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.
+          <code>buffer-format="rgba16f"</code> conserve
+          <code>IxIy</code> signé ; NMS 5×5 + forme
+          <code>4·det/trace²</code> → points isolés. Extract → DP →
+          <code>channel0…3</code>.
         </p>
       </div>
     `;

package/src/docs/example/docs-input-autocomplete-demos.ts

@@ -0,0 +1,110 @@
+import { html, LitElement } from "lit";
+import { customElement } from "lit/decorators.js";
+import { DOCS_MOCK_GEO_SERVICE } from "../mock-api/urls";
+
+import "../../core/components/ui/form/input-autocomplete/input-autocomplete";
+import "../../core/components/ui/menu/menu-item";
+
+type CommuneRow = { nom: string; code: string };
+
+/** Ligne suggestion : pas de radio/name (évite d'écrire dans le form au render). */
+const communeItem =
+  (valueKey: "nom" | "code") => (item: CommuneRow) =>
+    html`<sonic-menu-item
+      data-autocomplete-value=${item[valueKey]}
+      data-autocomplete-label=${item.nom}
+      >${item.nom}</sonic-menu-item
+    >`;
+
+@customElement("docs-input-autocomplete-basic-demo")
+export class DocsInputAutocompleteBasicDemo extends LitElement {
+  private items = communeItem("nom");
+
+  render() {
+    return html`
+      <sonic-input-autocomplete
+        class="w-64"
+        label="Ville"
+        formDataProvider="autoComplete-example-base"
+        name="nom"
+        placeholder="Paris, Lyon, Tours, ..."
+        serviceURL=${DOCS_MOCK_GEO_SERVICE}
+        dataProviderExpression="communes?limit=5"
+        .items=${this.items}
+      ></sonic-input-autocomplete>
+    `;
+  }
+}
+
+@customElement("docs-input-autocomplete-code-demo")
+export class DocsInputAutocompleteCodeDemo extends LitElement {
+  private items = communeItem("code");
+
+  render() {
+    return html`
+      <sonic-input-autocomplete
+        class="w-64"
+        label="Ville (code INSEE)"
+        formDataProvider="autoComplete-example"
+        name="code"
+        value="13055"
+        placeholder="Paris, Lyon, Tours, ..."
+        serviceURL=${DOCS_MOCK_GEO_SERVICE}
+        dataProviderExpression="communes?limit=5"
+        searchParameter="nom"
+        .items=${this.items}
+      ></sonic-input-autocomplete>
+    `;
+  }
+}
+
+@customElement("docs-input-autocomplete-select-demo")
+export class DocsInputAutocompleteSelectDemo extends LitElement {
+  private items = communeItem("code");
+
+  render() {
+    return html`
+      <sonic-input-autocomplete
+        select
+        class="w-64"
+        label="Ville (select)"
+        formDataProvider="autoComplete-example2"
+        name="code"
+        value="69123"
+        placeholder="Paris, Lyon, Tours, ..."
+        serviceURL=${DOCS_MOCK_GEO_SERVICE}
+        dataProviderExpression="communes?limit=5"
+        searchParameter="nom"
+        .items=${this.items}
+      ></sonic-input-autocomplete>
+    `;
+  }
+}
+
+@customElement("docs-input-autocomplete-keyboard-demo")
+export class DocsInputAutocompleteKeyboardDemo extends LitElement {
+  private items = (item: CommuneRow) =>
+    html`<sonic-menu-item
+      data-keyboard-nav="nav-autocomplete"
+      data-autocomplete-value=${item.nom}
+      data-autocomplete-label=${item.nom}
+      >${item.nom}</sonic-menu-item
+    >`;
+
+  render() {
+    return html`
+      <sonic-input-autocomplete
+        class="w-64"
+        label="Ville"
+        formDataProvider="autoComplete-example-keyboard"
+        name="nom"
+        data-keyboard-nav="nav-autocomplete"
+        placeholder="Paris, Lyon, Tours, ..."
+        serviceURL=${DOCS_MOCK_GEO_SERVICE}
+        dataProviderExpression="communes?limit=60"
+        minSearchLength="1"
+        .items=${this.items}
+      ></sonic-input-autocomplete>
+    `;
+  }
+}