@supersoniks/concorde 4.9.7 → 4.9.91

package/src/docs/_decorators/patch.md

@@ -1,45 +1,56 @@
 # @patch
 
-Sends data through [`API.patchDetailed`](../../core/utils/api.ts). Same model as [@post](#docs/_decorators/post.md/post): decorated property is **`ApiResult<T> | null`** (`request`, `response`, `result`).
+`@patch` applies a partial update with the body from a publisher. It uses the
+same model as [@post](#docs/_decorators/post.md/post):
+`Endpoint<T>`, `DataProviderKey<B>`, `ApiResult<T>`, options, and the
+`send(component)` handle.
 
-Pass an [`Endpoint<T>`](#docs/_misc/endpoint.md/endpoint) and a `DataProviderKey` for the **request body**. Import `patch` and `ApiResult` from `@supersoniks/concorde/decorators`.
+## Minimal usage
 
-## Configuration
+```typescript
+const bodyKey = new DataProviderKey<Partial<User>>("users.patch");
+const patchUser = patch(new Endpoint<User>("users/42"), bodyKey);
 
-Same as [@post](#docs/_decorators/post.md/post) / [@get](#docs/_decorators/get.md/get): scoped `HTML.getApiConfiguration(host)` or `DataProviderKey<APIConfiguration>` as third argument.
+@patchUser
+@state()
+payload?: ApiResult<User>;
+```
+
+To run the operation again from the component:
+
+```typescript
+savePatch() {
+  patchUser.send(this);
+}
+```
+
+The PATCH is also sent automatically when the body mutates, unless
+`autoPostOnBodyMutation: false` is set. The available options are described in
+[@post](#docs/_decorators/post.md/post):
 
-## Options (`PatchOptions`)
+- `autoPostOnBodyMutation`
+- `skipIfBodyMissing`
+- `refetchEveryMs`
+- `skipEmptyPlaceholder`
 
-Same shape as `PostOptions` on [@post](#docs/_decorators/post.md/post) (`ApiSendOptions`): `refetchEveryMs`, `skipIfBodyMissing`, `autoPostOnBodyMutation`, `triggerKey`, `skipEmptyPlaceholder`. See [Dynamic path placeholders](#docs/_misc/dynamic-path.md/dynamic-path) for `${sessionId}` and empty-string behaviour.
+Pass explicit API configuration as the third argument:
+
+```typescript
+@patch(endpoint, bodyKey, apiConfigurationKey)
+```
 
 ## Import
 
 <sonic-code language="typescript">
   <template>
 import { patch, type ApiResult } from "@supersoniks/concorde/decorators";
-import { Endpoint } from "@supersoniks/concorde/utils/endpoint";
 import { DataProviderKey } from "@supersoniks/concorde/dataProviderKey";
-  </template>
-</sonic-code>
-
-## Example
-
-<sonic-code language="typescript">
-  <template>
-const patchBodyKey = new DataProviderKey&lt;Partial&lt;Resource&gt;&gt;("resourcePatch");
-
-@patch(
-  new Endpoint&lt;Resource, { resourceId: string }&gt;("resources/${resourceId}"),
-  patchBodyKey,
-  { skipEmptyPlaceholder: true },
-)
-@state()
-payload?: ApiResult&lt;Resource&gt; | null;
+import { Endpoint } from "@supersoniks/concorde/utils/endpoint";
   </template>
 </sonic-code>
 
 ## See also
 
-- [@post](#docs/_decorators/post.md/post) — POST (live demos)
-- [@put](#docs/_decorators/put.md/put) — full replacement (PUT)
+- [@post](#docs/_decorators/post.md/post) — options and triggers
+- [@put](#docs/_decorators/put.md/put) — full replacement
 - [Dynamic path placeholders](#docs/_misc/dynamic-path.md/dynamic-path)

package/src/docs/_decorators/post.md

@@ -1,93 +1,130 @@
 # @post
 
-Sends data through [`API.postDetailed`](../../core/utils/api.ts). The decorated property is **`ApiResult<T> | null`**: `request`, `response`, and typed `result`.
+`@post` sends the contents of a publisher and stores the response in an
+optional `ApiResult<T>` property. The property is `undefined` until a result
+is available.
 
-Pass an [`Endpoint<T>`](#docs/_misc/endpoint.md/endpoint) as the first argument and a `DataProviderKey` for the **request body** as the second. Import `post` and `ApiResult` from `@supersoniks/concorde/decorators`, and `Endpoint` from `@supersoniks/concorde/utils/endpoint`.
+## Minimal usage
 
-## Configuration
+Pass an `Endpoint<T>` and a `DataProviderKey<B>` for the request body.
 
-Same as [@get](#docs/_decorators/get.md/get): scoped `HTML.getApiConfiguration(host)` by default, or `DataProviderKey<APIConfiguration>` as third argument. See [API configuration](#docs/_misc/api-configuration.md/api-configuration) for mock demos.
+```typescript
+const userBodyKey = new DataProviderKey<CreateUser>("users.form");
+const createUser = post(new Endpoint<User>("users"), userBodyKey);
 
-## Optional `PostOptions` (third or fourth argument)
+@createUser
+@state()
+payload?: ApiResult<User>;
+```
 
-| Option | Description |
-|--------|-------------|
-| `refetchEveryMs` | Re-post on an interval (ms). |
-| `skipIfBodyMissing` | Skip when body publisher is `null`/`undefined` (default: `true`). |
-| `autoPostOnBodyMutation` | Re-post when the body publisher mutates (default: `true`). `false` = manual via `triggerKey.invalidate()`. |
-| `skipEmptyPlaceholder` | If `true`, a placeholder resolved to `''` blocks the request (empty string only — not `0` or `false`). See [Dynamic paths](#docs/_misc/dynamic-path.md/dynamic-path). |
-| `triggerKey` | `DataProviderKey` — `invalidate()` re-runs the POST with the current body. |
+The current body is read from `userBodyKey`. By default, the POST is sent when
+the component connects and after each body mutation. Mutations in the same
+frame are coalesced into one request.
 
-## When the POST runs again
+API configuration is read from the HTML scope, as with
+[@get](#docs/_decorators/get.md/get).
 
-- Body publisher `onInternalMutation` when `autoPostOnBodyMutation` is `true` (default). Plusieurs mutations synchrones dans la même frame sont regroupées en **un seul POST** via `requestAnimationFrame`.
-- Endpoint path dependency changes (`${sessionId}` on the host).
-- Configuration publisher mutation.
-- `triggerKey` publisher `invalidate()`.
-- `refetchEveryMs` timer (if set).
+## Sending the POST again
 
-## Import
+### From the component
 
-<sonic-code language="typescript">
-  <template>
-import { post, publish, type ApiResult } from "@supersoniks/concorde/decorators";
-import { Endpoint } from "@supersoniks/concorde/utils/endpoint";
-import { DataProviderKey } from "@supersoniks/concorde/dataProviderKey";
-  </template>
-</sonic-code>
+Keep the decorator to access `send(component)`. The body is read again when the
+operation runs.
+
+```typescript
+saveAgain() {
+  createUser.send(this);
+}
+```
+
+`send()` is useful for “Save” or “Retry” buttons. It can repeat an operation
+with side effects.
+
+### From a method decorator
+
+The send action can decorate a local method. It runs after the method by
+default and waits for an eventual Promise to resolve:
+
+```typescript
+import { send } from "@supersoniks/concorde/decorators";
+
+@send(createUser)
+async save() {
+  // Prepare local state or validate the form.
+}
+```
+
+Use `{ when: "before" }` when the body must be sent before the method runs:
+
+```typescript
+@send(createUser, { when: "before" })
+saveBefore() {
+  // The POST is scheduled before this method runs.
+}
+```
+
+The method decorator adds an explicit send. If the method also mutates the body
+publisher, set `autoPostOnBodyMutation: false` when the decorated method must
+be the only trigger.
+
+## Options (`PostOptions`)
+
+Options are the third argument, or the fourth argument when a configuration key
+is provided.
+
+- `autoPostOnBodyMutation`: send after a body mutation (default: `true`). Set
+  it to `false` to use `send()`.
+- `skipIfBodyMissing`: skip when the body is `null` or `undefined` (default:
+  `true`).
+- `refetchEveryMs`: repeat the POST at this interval. Use it only when
+  repeating the operation is intended.
+- `skipEmptyPlaceholder`: block the request when a `${...}` placeholder is
+  `""`.
+
+With a configuration key:
 
-## Minimal example
+```typescript
+@post(endpoint, userBodyKey, apiConfigurationKey)
+```
 
-Mock service: `POST /docs-mock-api/api/register` (same route as [`sonic-submit`](#core/components/functional/submit/submit.md/submit) demos). Publisher setup lives in `decorators-demo-post.ts`.
+See [Dynamic path placeholders](#docs/_misc/dynamic-path.md/dynamic-path) for
+dynamic path details.
+
+## When the POST is sent
+
+- when the component connects and the body and configuration are available;
+- after a body mutation, unless `autoPostOnBodyMutation: false`;
+- when a property used in `${...}` changes;
+- when a configuration publisher changes;
+- when `send()` is called;
+- after each response when `refetchEveryMs` is set.
+
+## Import
 
 <sonic-code language="typescript">
   <template>
-const syncRequest = new DataProviderKey&lt;SyncRequest&gt;("syncRequest");
-const syncTrigger = new DataProviderKey&lt;number&gt;("syncTrigger");
-
-@post(
-  new Endpoint&lt;SyncResponse, { sessionId: string }&gt;("sessions/${sessionId}/sync"),
-  syncRequest,
-  { triggerKey: syncTrigger },
-)
-@state()
-payload?: ApiResult&lt;SyncResponse&gt; | null;
+import { post, type ApiResult } from "@supersoniks/concorde/decorators";
+import { DataProviderKey } from "@supersoniks/concorde/dataProviderKey";
+import { Endpoint } from "@supersoniks/concorde/utils/endpoint";
   </template>
 </sonic-code>
 
-## Live demos
+## Demos
 
 <sonic-code>
   <template>
     <docs-demo-sources for="demo-api-post"></docs-demo-sources>
     <demo-api-post></demo-api-post>
-  </template>
-</sonic-code>
-
-Dynamic endpoint path — changing `sessionId` on the host re-runs the POST (`POST /docs-mock-api/api/sessions/{id}/sync`):
-
-<sonic-code>
-  <template>
     <docs-demo-sources for="demo-api-post-dynamic"></docs-demo-sources>
     <demo-api-post-dynamic></demo-api-post-dynamic>
   </template>
 </sonic-code>
 
-`@post` + `@publish` on the same property (see [@publish](#docs/_decorators/publish.md/publish)):
-
-<sonic-code>
-  <template>
-    <docs-demo-sources for="demo-api-post-publish"></docs-demo-sources>
-    <demo-api-post-publish></demo-api-post-publish>
-  </template>
-</sonic-code>
-
-Stale responses are ignored if the path or generation changed before the request finished.
-
-**Note:** plusieurs composants `@post` sur la même page qui partagent le même `bodyKey` enverront chacun une requête à chaque mutation du body — utiliser une clé par composant (voir les deux démos live ci-dessus).
-
-Path placeholders (`${sessionId}`, …): [Dynamic path placeholders](#docs/_misc/dynamic-path.md/dynamic-path).
+See [@put](#docs/_decorators/put.md/put) and
+[@patch](#docs/_decorators/patch.md/patch): they use the same model with a
+different HTTP method.
 
-## See also
+## Advanced
 
-- [@put](#docs/_decorators/put.md/put) · [@patch](#docs/_decorators/patch.md/patch) — same decorator model, `PUT` / `PATCH` via `putDetailed` / `patchDetailed`
+External invalidation is currently available through `triggerKey`; it is kept
+out of the main usage examples.

package/src/docs/_decorators/put.md

@@ -1,43 +1,56 @@
 # @put
 
-Sends data through [`API.putDetailed`](../../core/utils/api.ts). Same model as [@post](#docs/_decorators/post.md/post): decorated property is **`ApiResult<T> | null`** (`request`, `response`, `result`).
+`@put` replaces a resource with the body from a publisher. It uses exactly the
+same model as [@post](#docs/_decorators/post.md/post):
+`Endpoint<T>`, `DataProviderKey<B>`, `ApiResult<T>`, options, and the
+`send(component)` handle.
 
-Pass an [`Endpoint<T>`](#docs/_misc/endpoint.md/endpoint) and a `DataProviderKey` for the **request body**. Import `put` and `ApiResult` from `@supersoniks/concorde/decorators`.
+## Minimal usage
 
-## Configuration
+```typescript
+const bodyKey = new DataProviderKey<UpdateUser>("users.form");
+const updateUser = put(new Endpoint<User>("users/42"), bodyKey);
 
-Same as [@post](#docs/_decorators/post.md/post) / [@get](#docs/_decorators/get.md/get): scoped `HTML.getApiConfiguration(host)` or `DataProviderKey<APIConfiguration>` as third argument.
+@updateUser
+@state()
+payload?: ApiResult<User>;
+```
+
+To run the operation again from the component:
+
+```typescript
+update() {
+  updateUser.send(this);
+}
+```
+
+The PUT is also sent automatically when the body mutates, unless
+`autoPostOnBodyMutation: false` is set. See
+[@post](#docs/_decorators/post.md/post) for the option details:
 
-## Options (`PutOptions`)
+- `autoPostOnBodyMutation`
+- `skipIfBodyMissing`
+- `refetchEveryMs`
+- `skipEmptyPlaceholder`
 
-Same shape as `PostOptions` on [@post](#docs/_decorators/post.md/post) (`ApiSendOptions`): `refetchEveryMs`, `skipIfBodyMissing`, `autoPostOnBodyMutation`, `triggerKey`, `skipEmptyPlaceholder`. See [Dynamic path placeholders](#docs/_misc/dynamic-path.md/dynamic-path) for `${sessionId}` and empty-string behaviour.
+Pass explicit API configuration as the third argument:
+
+```typescript
+@put(endpoint, bodyKey, apiConfigurationKey)
+```
 
 ## Import
 
 <sonic-code language="typescript">
   <template>
 import { put, type ApiResult } from "@supersoniks/concorde/decorators";
-import { Endpoint } from "@supersoniks/concorde/utils/endpoint";
 import { DataProviderKey } from "@supersoniks/concorde/dataProviderKey";
+import { Endpoint } from "@supersoniks/concorde/utils/endpoint";
   </template>
 </sonic-code>
 
-## Example
-
-<sonic-code language="typescript">
-  <template>
-const bodyKey = new DataProviderKey&lt;UpdatePayload&gt;("resourceBody");
-
-@put(new Endpoint&lt;Resource, { resourceId: string }&gt;("resources/${resourceId}"), bodyKey)
-@state()
-payload?: ApiResult&lt;Resource&gt; | null;
-  </template>
-</sonic-code>
-
-Changing `resourceId` on the host re-runs the PUT when the path becomes ready — see [Dynamic path placeholders](#docs/_misc/dynamic-path.md/dynamic-path).
-
 ## See also
 
-- [@post](#docs/_decorators/post.md/post) — POST (live demos, polling, `@publish`)
-- [@patch](#docs/_decorators/patch.md/patch) — partial update (PATCH)
-- [Endpoint](#docs/_misc/endpoint.md/endpoint) · [API configuration](#docs/_misc/api-configuration.md/api-configuration)
+- [@post](#docs/_decorators/post.md/post) — options and triggers
+- [@patch](#docs/_decorators/patch.md/patch) — partial update
+- [Dynamic path placeholders](#docs/_misc/dynamic-path.md/dynamic-path)

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

@@ -258,12 +258,7 @@ export const DOCS_DEMO_SOURCE_REGISTRY: Record<string, DocsSource[]> = {
       line: 147,
       label: "demo-api-get-configuration-key",
     },
-    {
-      path: "src/docs/example/decorators-demo-subscribe-publish-get-demos.ts",
-      line: 239,
-      label: "demo-api-get-refresh-remote",
-    },
-    { path: "src/docs/example/decorators-demo-geo.ts", label: "geo API + triggerKey" },
+    { path: "src/docs/example/decorators-demo-geo.ts", label: "geo API" },
   ],
   "demo-api-get-publish-subscribe": [
     {

package/src/docs/example/decorators-demo-geo.ts

@@ -26,22 +26,6 @@ export const geoCommunesApiGetEndpoint = new Endpoint<GeoCommuneRow[]>(
   "communes?limit=5&fields=nom,code",
 );
 
-export const docsDemoDynApiConfKeyTemplate =
-  new DataProviderKey<APIConfiguration>("docsDemoDynApiConf${configSlot}");
-
-export const docsDemoDynApiConfAKey = new DataProviderKey<APIConfiguration>(
-  "docsDemoDynApiConfA",
-);
-export const docsDemoDynApiConfBKey = new DataProviderKey<APIConfiguration>(
-  "docsDemoDynApiConfB",
-);
-
-set(docsDemoDynApiConfAKey, geoApiDemoConfiguration);
-set(docsDemoDynApiConfBKey, {
-  ...geoApiDemoConfiguration,
-  serviceURL: DOCS_MOCK_GEO_SERVICE,
-});
-
 export const geoCommunesApiGetEndpointDynamic = new Endpoint<GeoCommuneRow[]>(
   "communes?limit=${communeLimit}&fields=nom,code",
 );
@@ -49,8 +33,3 @@ export const geoCommunesApiGetEndpointDynamic = new Endpoint<GeoCommuneRow[]>(
 export const geoCommunesApiGetPublishKey = new DataProviderKey<
   ApiResult<GeoCommuneRow[]>
 >(geoCommunesApiGetEndpoint.path);
-
-/** Signal de refetch manuel pour les démos `@get` (voir `triggerKey`). */
-export const docsDemoGeoCommunesRefreshKey = new DataProviderKey<void>(
-  "docsDemoGeoCommunesRefresh",
-);

package/src/docs/example/decorators-demo-subscribe-publish-get-demos.ts

@@ -5,7 +5,6 @@ import type { ApiResult } from "@supersoniks/concorde/core/utils/api";
 import { DataProviderKey } from "@supersoniks/concorde/core/utils/dataProviderKey";
 import { sub } from "@supersoniks/concorde/directives";
 import {
-  dp,
   get as storeGet,
   set,
 } from "@supersoniks/concorde/core/utils/PublisherProxy";
@@ -13,30 +12,23 @@ import { publishDemoKey } from "./docs-provider-keys";
 import { tailwind } from "../tailwind";
 import "./decorators-demo-init";
 import {
-  docsDemoDynApiConfKeyTemplate,
   docsDemoGeoApiConfigurationKey,
-  docsDemoGeoCommunesRefreshKey,
   geoCommunesApiGetEndpoint,
   geoCommunesApiGetEndpointDynamic,
   geoCommunesApiGetPublishKey,
   type GeoCommuneRow,
 } from "./decorators-demo-geo";
 
-function formatFetchedAt(response: Response | null | undefined): string {
-  const raw = response?.headers.get("X-Fetched-At");
-  if (!raw) return "—";
-  try {
-    return new Date(raw).toLocaleTimeString();
-  } catch {
-    return raw;
-  }
-}
-
 type PublishDemoData = {
   email: string;
   message: string;
 };
 
+const geoCommunesGet = get(
+  geoCommunesApiGetEndpoint,
+  docsDemoGeoApiConfigurationKey,
+);
+
 @customElement("demo-publish")
 export class DemoPublish extends LitElement {
   static styles = [tailwind];
@@ -95,50 +87,35 @@ export class DemoPublish extends LitElement {
 export class DemoApiGet extends LitElement {
   static styles = [tailwind];
 
-  @get(geoCommunesApiGetEndpoint, docsDemoGeoApiConfigurationKey, {
-    triggerKey: docsDemoGeoCommunesRefreshKey,
-  })
+  @geoCommunesGet
   @state()
   geoApiPayload?: ApiResult<GeoCommuneRow[]>;
 
   private refresh() {
-    dp(docsDemoGeoCommunesRefreshKey).invalidate();
+    geoCommunesGet.refetch(this);
   }
 
   render() {
     const rows = this.geoApiPayload?.result;
-    const status = this.geoApiPayload?.response?.status;
-    const fetchedAt = formatFetchedAt(this.geoApiPayload?.response ?? null);
     return html`
-      <div class="space-y-2">
+      <div class="space-y-3">
+        <div class="flex flex-wrap items-center gap-3">
+          <span class="text-sm font-medium">🗺️ GET simple</span>
+          <sonic-button size="sm" @click=${this.refresh}>Rafraîchir</sonic-button>
+        </div>
         <p class="text-sm text-neutral-600 dark:text-neutral-400">
-          <code>@get</code> — même service que
-          <code>sonic-queue</code> (<code>/docs-mock-api/geo/</code>).
-          Propriété typée <code>ApiResult&lt;T&gt;</code>.
-          Refetch via <code>triggerKey</code> (<code
-            >docsDemoGeoCommunesRefresh</code
-          >).
+          Une liste de communes chargée avec <code>@get</code>.
         </p>
-        <sonic-button size="sm" @click=${this.refresh}>Rafraîchir</sonic-button>
-        ${status != null
-          ? html`<p class="text-xs text-neutral-500">
-              HTTP ${status} · fetch ${fetchedAt}
-            </p>`
-          : ""}
-        ${this.geoApiPayload === null
-          ? html`<p class="text-neutral-500">Chargement…</p>`
+        ${this.geoApiPayload == null
+          ? html`<p class="text-sm text-neutral-500">Chargement…</p>`
           : !rows || rows.length === 0
-            ? html`<p class="text-neutral-500">Aucune commune</p>`
+            ? html`<p class="text-sm text-neutral-500">Aucune commune</p>`
             : html`
-                <ul class="list-disc pl-5 space-y-1">
+                <ul class="grid gap-1 sm:grid-cols-2">
                   ${rows.map(
-                    (c) =>
-                      html`<li>
-                        <span class="font-medium">${c.nom}</span>
-                        <span class="text-neutral-500 text-sm">
-                          — ${c.code}</span
-                        >
-                      </li>`,
+                    (c) => html`<li class="text-sm">
+                      ${c.nom} <span class="text-neutral-500">(${c.code})</span>
+                    </li>`,
                   )}
                 </ul>
               `}
@@ -151,116 +128,48 @@ export class DemoApiGet extends LitElement {
 export class DemoApiGetConfigurationKey extends LitElement {
   static styles = [tailwind];
 
-  @property({ type: String })
-  configSlot: "A" | "B" = "A";
-
   @property({ type: Number })
-  communeLimit = 5;
+  communeLimit = 3;
 
-  @get(geoCommunesApiGetEndpointDynamic, docsDemoDynApiConfKeyTemplate, {
-    triggerKey: docsDemoGeoCommunesRefreshKey,
-  })
+  @get(geoCommunesApiGetEndpointDynamic, docsDemoGeoApiConfigurationKey)
   @state()
   geoApiPayloadDyn?: ApiResult<GeoCommuneRow[]>;
 
   render() {
     const rows = this.geoApiPayloadDyn?.result;
-    const status = this.geoApiPayloadDyn?.response?.status;
-    const fetchedAt = formatFetchedAt(this.geoApiPayloadDyn?.response ?? null);
     return html`
       <div class="space-y-3">
         <p class="text-sm text-neutral-600 dark:text-neutral-400">
-          Config dynamique (<code>docsDemoDynApiConf\${configSlot}</code>) +
-          path d’endpoint avec <code>communeLimit</code>. Le refetch manuel
-          passe par <code>triggerKey</code> — voir le bouton « ailleurs »
-          ci-dessous dans la doc.
+          <code>@get</code> avec un endpoint et une configuration dynamiques.
         </p>
-        <div class="flex flex-wrap gap-2 items-center">
-          <span class="text-xs text-neutral-500">Limite API :</span>
+        <div class="flex flex-wrap items-center gap-2">
+          <span class="text-sm">Nombre de communes :</span>
           ${[3, 5, 10].map(
-            (n) => html`
+            (limit) => html`
               <sonic-button
                 size="sm"
-                type=${this.communeLimit === n ? "primary" : "neutral"}
+                type=${this.communeLimit === limit ? "primary" : "neutral"}
                 @click=${() => {
-                  this.communeLimit = n;
+                  this.communeLimit = limit;
                 }}
-                >${n}</sonic-button
               >
+                ${limit}
+              </sonic-button>
             `,
           )}
         </div>
-        <div class="flex flex-wrap gap-2 items-center">
-          <span class="text-xs text-neutral-500">Publisher config :</span>
-          <sonic-button
-            size="sm"
-            type=${this.configSlot === "A" ? "primary" : "neutral"}
-            @click=${() => {
-              this.configSlot = "A";
-            }}
-            >docsDemoDynApiConfA</sonic-button
-          >
-          <sonic-button
-            size="sm"
-            type=${this.configSlot === "B" ? "primary" : "neutral"}
-            @click=${() => {
-              this.configSlot = "B";
-            }}
-            >docsDemoDynApiConfB</sonic-button
-          >
-        </div>
-        ${status != null
-          ? html`<p class="text-xs text-neutral-500">
-              HTTP ${status} · fetch ${fetchedAt} · limit=${this.communeLimit} ·
-              conf=docsDemoDynApiConf${this.configSlot}
-            </p>`
-          : ""}
-        ${this.geoApiPayloadDyn === null
-          ? html`<p class="text-neutral-500">Chargement…</p>`
-          : !rows || rows.length === 0
-            ? html`<p class="text-neutral-500">Aucune commune</p>`
-            : html`
-                <ul class="list-disc pl-5 space-y-1">
-                  ${rows.map(
-                    (c) =>
-                      html`<li>
-                        <span class="font-medium">${c.nom}</span>
-                        <span class="text-neutral-500 text-sm">
-                          — ${c.code}</span
-                        >
-                      </li>`,
-                  )}
-                </ul>
-              `}
-      </div>
-    `;
-  }
-}
-
-/** Déclenche le refetch d’un `@get` distant via `triggerKey` (sans toucher la config). */
-@customElement("demo-api-get-refresh-remote")
-export class DemoApiGetRefreshRemote extends LitElement {
-  static styles = [tailwind];
-
-  private refreshFromElsewhere() {
-    dp(docsDemoGeoCommunesRefreshKey).invalidate();
-  }
-
-  render() {
-    return html`
-      <div
-        class="rounded border border-dashed border-neutral-300 dark:border-neutral-600 p-3 space-y-2"
-      >
-        <p class="text-sm text-neutral-600 dark:text-neutral-400">
-          Composant séparé — même publisher
-          <code>docsDemoGeoCommunesRefresh</code> :
+        <p class="font-mono text-xs text-neutral-500">
+          communes?limit=${this.communeLimit}
         </p>
-        <pre
-          class="text-xs bg-neutral-100 dark:bg-neutral-800 p-2 rounded overflow-x-auto"
-        ><code>dp(docsDemoGeoCommunesRefreshKey).invalidate();</code></pre>
-        <sonic-button size="sm" variant="secondary" @click=${this.refreshFromElsewhere}>
-          Rafraîchir le GET (depuis ailleurs)
-        </sonic-button>
+        ${this.geoApiPayloadDyn == null
+          ? html`<p class="text-sm text-neutral-500">Chargement…</p>`
+          : html`
+              <ul class="grid gap-1 sm:grid-cols-2">
+                ${(rows ?? []).map(
+                  (c) => html`<li class="text-sm">${c.nom}</li>`,
+                )}
+              </ul>
+            `}
       </div>
     `;
   }