@supersoniks/concorde 4.6.0 → 4.7.3

package/src/core/utils/HTML.ts

@@ -59,8 +59,37 @@ class HTML {
     return null;
   }
 
+  /** Noms d'attribut DOM à tester (Lit reflect → minuscules, ex. serviceURL → serviceurl). */
+  private static scopeAttributeNames(attributeName: string): string[] {
+    const lower = attributeName.toLowerCase();
+    return lower === attributeName ? [attributeName] : [attributeName, lower];
+  }
+
+  private static readScopeValueOnElement(
+    element: HTMLElement,
+    attributeName: string,
+  ): string | null {
+    // Lit : la propriété est fiable avant le reflect ; un attribut vide (serviceurl="")
+    // ne doit pas masquer la propriété.
+    const prop = (element as unknown as Record<string, unknown>)[attributeName];
+    if (typeof prop === "string" && prop.length > 0) {
+      return prop;
+    }
+    for (const attrName of HTML.scopeAttributeNames(attributeName)) {
+      if (element.hasAttribute(attrName)) {
+        const attr = element.getAttribute(attrName);
+        if (attr != null && attr.length > 0) {
+          return attr;
+        }
+      }
+    }
+    return null;
+  }
+
   /**
-   * Va de parent en parent en partant de node pour trouver un attribut
+   * Va de parent en parent en partant de node pour trouver un attribut.
+   * Si l'attribut n'est pas encore reflété (ex. Lit `@property({ reflect: true })`
+   * au premier `connectedCallback`), lit la propriété homonyme sur l'élément.
    * @param attributeName nom de l'attribut
    * @returns valeur de l'attribut ou null si l'attribut n'est pas trouvé
    */
@@ -69,16 +98,19 @@ class HTML {
     attributeName: string
   ): string | null {
     if (!node) return null;
-    while (!("hasAttribute" in node && node.hasAttribute(attributeName))) {
-      const newNode = node.parentNode || (node as ShadowRoot).host;
-      if (!newNode) break;
-      node = (node.parentNode ||
-        (node as ShadowRoot).host) as SearchableDomElement;
-    }
-    if (!("hasAttribute" in node)) {
-      return null;
+    let current: SearchableDomElement | null = node;
+    while (current) {
+      if (current instanceof HTMLElement) {
+        const value = HTML.readScopeValueOnElement(current, attributeName);
+        if (value != null && value.length > 0) {
+          return value;
+        }
+      }
+      const parent = current.parentNode || (current as ShadowRoot).host;
+      if (!parent) break;
+      current = parent as SearchableDomElement;
     }
-    return node.getAttribute(attributeName);
+    return null;
   }
 
   /**

package/src/core/utils/PublisherProxy.ts

@@ -9,6 +9,8 @@ import type {
   CoreJSType,
   PublisherContentType,
 } from "../_types/types";
+import type { DataProviderKey } from "./dataProviderKey";
+import { resolveStaticPublisherPath } from "./dataProviderKey";
 import HTML from "./HTML";
 import Objects from "./Objects";
 import { sonicClassPrefix } from "./Utils";
@@ -1058,13 +1060,17 @@ export const getObservables = <T = any>(
   return new Set<DataProvider<T>>([observable as DataProvider<T>]);
 };
 
-// get value
-export const get = <T = any>(id: string) => {
-  return getObservables<T>(id).values().next().value?.get() as T;
-};
+// get value (snapshot at call time)
+export function get<T>(id: DataProviderKey<T>): T;
+export function get<T = any>(id: string): T;
+export function get<T>(id: string | DataProviderKey<T>): T {
+  const path = resolveStaticPublisherPath(id);
+  return getObservables<T>(path).values().next().value?.get() as T;
+}
 
-const deepee = <T = any>(id: string) => {
-  const value = getObservables<T>(id).values().next().value as DataProvider<T>;
+function deepee<T>(id: string | DataProviderKey<T>, _defaultValue?: T) {
+  const path = resolveStaticPublisherPath(id);
+  const value = getObservables<T>(path).values().next().value as DataProvider<T>;
   // if (defaultValue !== undefined && value) {
   //   const innerValue = value.get();
   //   if (Objects.isEmpty(innerValue as Record<string, any>)) {
@@ -1073,20 +1079,29 @@ const deepee = <T = any>(id: string) => {
   // }
 
   return value;
-};
+}
 
-export const dataProvider: <T = any>(
-  id: string,
+export function dataProvider<T>(id: DataProviderKey<T>, defaultValue?: T): DataProvider<T>;
+export function dataProvider<T = any>(id: string, defaultValue?: T): DataProvider<T>;
+export function dataProvider<T>(
+  id: string | DataProviderKey<T>,
   defaultValue?: T,
-) => DataProvider<T> = deepee;
-export const dp = deepee;
-
-export const set: <T = any>(id: string, value: T) => void = <T>(
-  id: string,
-  value: T,
-) => {
-  getObservables(id).values().next().value?.set(value);
-};
+): DataProvider<T> {
+  return deepee(id, defaultValue);
+}
+
+export function dp<T>(id: DataProviderKey<T>, defaultValue?: T): DataProvider<T>;
+export function dp<T = any>(id: string, defaultValue?: T): DataProvider<T>;
+export function dp<T>(id: string | DataProviderKey<T>, defaultValue?: T): DataProvider<T> {
+  return deepee(id, defaultValue);
+}
+
+export function set<T>(id: DataProviderKey<T>, value: T): void;
+export function set<T = any>(id: string, value: T): void;
+export function set<T>(id: string | DataProviderKey<T>, value: T): void {
+  const path = resolveStaticPublisherPath(id);
+  getObservables(path).values().next().value?.set(value);
+}
 
 /**
  * next back handling data invalidation

package/src/core/utils/dataProviderKey.ts

@@ -93,6 +93,29 @@ export interface DataProviderKeyConstructor {
   new <T, U = any>(path: string): DataProviderKey<T, U>;
 }
 
+/** Placeholders `${…}` / `{$…}` — resolved only by decorators (@subscribe, @publish, …). */
+const DYNAMIC_PUBLISHER_PATH = /\$\{|\{\$/;
+
+export function isDynamicPublisherPath(path: string): boolean {
+  return DYNAMIC_PUBLISHER_PATH.test(path);
+}
+
+export type PublisherPathInput = string | {path: string};
+
+/**
+ * Resolves a static publisher path for get / set / dp.
+ * Rejects DataProviderKey templates with dynamic placeholders.
+ */
+export function resolveStaticPublisherPath(input: PublisherPathInput): string {
+  const path = typeof input === "string" ? input : input.path;
+  if (isDynamicPublisherPath(path)) {
+    throw new Error(
+      "Static publisher path required for get/set/dp. Use @subscribe, @publish, or @handle for dynamic DataProviderKey paths.",
+    );
+  }
+  return path;
+}
+
 /* eslint-disable @typescript-eslint/no-explicit-any */
 export const DataProviderKey: DataProviderKeyConstructor = function (
   this: any,

package/src/core/utils/publisherPathKey.spec.ts

@@ -0,0 +1,58 @@
+import { describe, it, expect } from "vitest";
+import {
+  DataProviderKey,
+  isDynamicPublisherPath,
+  resolveStaticPublisherPath,
+} from "./dataProviderKey";
+import { dp, get, set } from "./PublisherProxy";
+
+type Counter = { count: number };
+
+describe("resolveStaticPublisherPath", () => {
+  it("accepte une string statique", () => {
+    expect(resolveStaticPublisherPath("myCounter")).toBe("myCounter");
+  });
+
+  it("accepte une DataProviderKey statique", () => {
+    const key = new DataProviderKey<Counter>("myCounter").count;
+    expect(resolveStaticPublisherPath(key)).toBe("myCounter.count");
+  });
+
+  it("rejette un chemin avec placeholder ${…}", () => {
+    expect(isDynamicPublisherPath("users.${userIndex}")).toBe(true);
+    expect(() =>
+      resolveStaticPublisherPath("users.${userIndex}"),
+    ).toThrow(/Static publisher path required/);
+  });
+
+  it("rejette une clé dynamique", () => {
+    const key = new DataProviderKey<Counter, { userIndex: number }>(
+      "users.${userIndex}",
+    );
+    expect(() => resolveStaticPublisherPath(key)).toThrow(
+      /Static publisher path required/,
+    );
+  });
+});
+
+describe("get / set / dp with DataProviderKey", () => {
+  const counterKey = new DataProviderKey<{ count: number }>(
+    "publisherPathKeySpecCounter",
+  );
+
+  it("set et get snapshot via clé racine", () => {
+    set(counterKey, { count: 0 });
+    expect(get(counterKey)).toEqual({ count: 0 });
+  });
+
+  it("dp sur sous-clé et écriture feuille", () => {
+    set(counterKey, { count: 0 });
+    dp(counterKey.count).set(3);
+    expect(get(counterKey)).toEqual({ count: 3 });
+  });
+
+  it("accepte encore un chemin string", () => {
+    set(`${counterKey.path}.legacy`, { count: 7 });
+    expect(get(`${counterKey.path}.legacy`)).toEqual({ count: 7 });
+  });
+});

package/src/docs/_core-concept/dataFlow.md

@@ -0,0 +1,73 @@
+# Data flow
+
+Recommended patterns for new Concorde apps (Lit + TypeScript). Under the hood, data lives in a **DataProvider** store (legacy **Publisher** API: [Legacy: Sharing data](#docs/_getting-started/pubsub.md/pubsub)).
+
+## Quick map
+
+| Need | Use |
+|------|-----|
+| Read/write in code | `get` / `set` / `dp` + `DataProviderKey` (static paths only) |
+| Reactive Lit template | `sub(key)` or `@subscribe` |
+| Read component state from store | `@subscribe` + `DataProviderKey<T, U>` + `@state` |
+| Inherit ancestor attributes | `@ancestorAttribute` |
+| Write from component state | `@publish` |
+| React to assignments | `@handle` |
+| HTTP GET | `@get` + `Endpoint`, or `sonic-list` / `sonic-queue` with `fetch` |
+| Forms | `formDataProvider` + `name` on fields |
+| Offline doc demos | `serviceURL="/docs-mock-api"` — [Local API demos](#docs/_misc/docs-mock-api.md/docs-mock-api) |
+
+Skill: `concorde-get-set-dp` in the package `ai/` folder.
+
+## DataProviderKey
+
+<sonic-code language="typescript">
+  <template>
+import { DataProviderKey } from "@supersoniks/concorde/dataProviderKey";
+import { dp, get, set } from "@supersoniks/concorde/utils";
+
+const cartKey = new DataProviderKey&lt;{ items: string[] }&gt;("cart");
+
+set(cartKey, { items: [] });
+dp(cartKey.items).set(["a", "b"]);
+get(cartKey);
+  </template>
+</sonic-code>
+
+Dynamic paths (`users.${userId}`) → decorators or `sub()` — not `get("users.${id}")` in imperative code.
+
+[DataProviderKey](#docs/_misc/dataProviderKey.md/dataProviderKey)
+
+## Decorators
+
+| Decorator | Role |
+|-----------|------|
+| `@subscribe` | Read-only property from store — [data configuration](#docs/_getting-started/my-first-component.md/my-first-component) (type + key + scope) |
+| `@publish` | Push property writes to store |
+| `@handle` | Method called on assignment |
+| `@ancestorAttribute` | Copy ancestor HTML attribute onto property |
+| `@get` | HTTP GET into `ApiGetResult&lt;T&gt;` |
+
+Walkthrough: [My first component](#docs/_getting-started/my-first-component.md/my-first-component)
+
+## HTTP and lists
+
+- [@get](#docs/_decorators/get.md/get) — single request on a component
+- [List](#core/components/functional/list/list.md/list) — `fetch` + `key="data"` + `/docs-mock-api/api/users`
+- [Queue](#core/components/functional/queue/queue.md/queue) — lazy `offset=$offset&per_page=$limit` + optional `dataFilterProvider` (form → query)
+
+## Starter kit
+
+```bash
+npx @supersoniks/create-concorde-ts-starter my-app
+```
+
+Interactive routes mirror these patterns (`/concepts/*`, `/demo/*`).
+
+## Legacy integration
+
+| Topic | Page |
+|-------|------|
+| `Subscriber` / `Fetcher` mixins on app code | [Legacy: Subscriber mixin](#docs/_core-concept/subscriber.md/subscriber), [Legacy: My first subscriber](#docs/_getting-started/my-first-subscriber.md/my-first-subscriber) |
+| `data-bind` HTML (plain HTML hosts) | [HTML integration](#docs/_misc/html-integration.md/html-integration) — doc demos use Lit in `src/docs/example/` |
+| `@onAssign` | [@onAssign](#docs/_decorators/on-assign.md/on-assign) (prefer `@handle`) |
+| `sonic-fetch` alone | [Fetch](#core/components/functional/fetch/fetch.md/fetch) |

package/src/docs/_core-concept/subscriber.md

@@ -1,12 +1,14 @@
-# The subscriber mixin
+# Legacy: Subscriber mixin
 
-This is a mixin that is commonly extended by Concorde core components and destination components. Pure UI components usually don't extend it, especially those outside of form components.
+> **New app components:** [My first component](#docs/_getting-started/my-first-component.md/my-first-component) and [Data flow](#docs/_core-concept/dataFlow.md/dataFlow) — extend `LitElement` with decorators (`@subscribe`, `@ancestorAttribute`, …). This mixin remains in **core** components (`sonic-list`, `sonic-fetch`, …) and [legacy tutorials](#docs/_getting-started/my-first-subscriber.md/my-first-subscriber).
+
+The Subscriber mixin was commonly extended by Concorde core components and older destination components. Pure UI components usually don't extend it, especially those outside of form components.
 
 ## DataProvider Attribute: Automatic Filling of Subscriber Properties
 
 Upon being added to the DOM (connectedCallback), subscribers search for the first occurrence of the `dataProvider` attribute in their parent's HTML structure.
 
-The value of this attribute is used to obtain a publisher via the PublisherManager (see [🥨 Sharing Data](#docs/_getting-started/pubsub.md/pubsub)).
+The value of this attribute is the DataProvider path (see [Data flow](#docs/_core-concept/dataFlow.md/dataFlow) and [DataProviderKey](#docs/_misc/dataProviderKey.md/dataProviderKey); legacy API: [Sharing Data](#docs/_getting-started/pubsub.md/pubsub)).
 
 The subscriber then subscribes to the publisher as a data template to be filled.
 
@@ -51,14 +53,11 @@ Suppose that:
 </sonic-code>
 - We want to keep the display of an image and its `title` attribute up to date, as well as a "contact" button to email the person in the photo. The content of the subscriber could be as follows:
 
-<sonic-code language="html">
-  <template>
-<img data-bind ::src="$img.avatar" ::title="ucFirst|$img.caption" />
-<a data-bind ::href="mailto:$email" ::inner-html="$email"></a>
-  </template>
-</sonic-code>
+In a **Lit** app, use the same data with [data configuration](#docs/_getting-started/my-first-component.md/my-first-component) (`@subscribe` + `DataProviderKey`) on a small row component — see `docs-user` in `src/docs/example/users.ts`.
+
+For **HTML-only** embedding (no Lit), attribute binding is described in [HTML integration](#docs/_misc/html-integration.md/html-integration) and in the Legacy [Subscriber mixin](#docs/_core-concept/subscriber.md/subscriber) pages.
 
-This example also illustrates:
+This pattern also illustrates:
 
 - Binding to subproperties using dot syntax, as done for the `src` attribute of the `img` tag.
 - Using a simple expression to include the property within a string, as in creating a `mailto` link.

package/src/docs/_decorators/ancestor-attribute.md

@@ -25,15 +25,15 @@ The component reads `dataProvider` and `testAttribute` from its ancestor wrapper
 import { html, LitElement } from "lit";
 import { customElement } from "lit/decorators.js";
 import { ancestorAttribute } from "@supersoniks/concorde/decorators";
-//
+
 @customElement("demo-ancestor-attribute")
 export class DemoAncestorAttribute extends LitElement {
   @ancestorAttribute("dataProvider")
   dataProvider: string | null = null;
-//
+
   @ancestorAttribute("testAttribute")
   testAttribute: string | null = null;
-//
+
   render() {
     return html`
       <section>
@@ -49,6 +49,7 @@ export class DemoAncestorAttribute extends LitElement {
 <sonic-code>
   <template>
 <div dataProvider="demoDataProvider" testAttribute="test-value-123">
+  <docs-demo-sources for="demo-ancestor-attribute"></docs-demo-sources>
   <demo-ancestor-attribute></demo-ancestor-attribute>
 </div>
   </template>

package/src/docs/_decorators/auto-subscribe.md

@@ -1,5 +1,7 @@
 # @autoSubscribe
 
+> **Legacy:** prefer [@subscribe](#docs/_decorators/subscribe.md/subscribe) + `DataProviderKey`. Examples below may still show `PublisherManager` for existing codebases.
+
 The `@autoSubscribe` decorator automatically detects which publishers are accessed within a method and subscribes to them. When any of these publishers change, the method is automatically re-executed.
 
 ## Principle
@@ -24,10 +26,10 @@ import { autoSubscribe } from "@supersoniks/concorde/decorators";
 @customElement("demo-auto-subscribe")
 export class DemoAutoSubscribe extends LitElement {
   static styles = [tailwind];
-  //
+
   @state() displayText: string = "";
   @state() computedValue: number = 0;
-  //
+
   @autoSubscribe()
   updateDisplay() {
     const value1 = PublisherManager.get("autoValue1").get() || 0;
@@ -35,7 +37,7 @@ export class DemoAutoSubscribe extends LitElement {
     this.computedValue = value1 + value2;
     this.displayText = `${value1} + ${value2} = ${this.computedValue}`;
   }
-  //
+
   render() {
     return html`
       <p><strong>${this.displayText}</strong></p>
@@ -49,7 +51,7 @@ export class DemoAutoSubscribe extends LitElement {
       </div>
     `;
   }
-  //
+
   randomizeValue(publisherId: string) {
     const value = PublisherManager.get(publisherId);
     value.set(Math.floor(Math.random() * 100));
@@ -61,6 +63,7 @@ export class DemoAutoSubscribe extends LitElement {
 
 <sonic-code >
   <template>
+    <docs-demo-sources for="demo-auto-subscribe"></docs-demo-sources>
     <demo-auto-subscribe></demo-auto-subscribe>
   </template>
 </sonic-code>
@@ -75,12 +78,12 @@ export class ReactiveView extends LitElement {
   render() {
     const data = PublisherManager.get("myData");
     const config = PublisherManager.get("config");
-    //
+
     // This render method will be automatically re-executed
     // when myData or config change
     const value = data.get()?.value || 0;
     const multiplier = config.get()?.multiplier || 1;
-    //
+
     return html`
       <div>
         <h1>Result: ${value * multiplier}</h1>
@@ -125,40 +128,40 @@ import { html, LitElement } from "lit";
 import { customElement } from "lit/decorators.js";
 import { autoSubscribe } from "@supersoniks/concorde/decorators";
 import { PublisherManager } from "@supersoniks/concorde/core/utils/PublisherProxy";
-//
+
 @customElement("shopping-cart")
 export class ShoppingCart extends LitElement {
   items: any[] = [];
   total: number = 0;
   discount: number = 0;
-  //
+
   @autoSubscribe()
   calculateTotal() {
     const cart = PublisherManager.get("cart");
     const promo = PublisherManager.get("promo");
-    //
+
     // Access cart items
     this.items = cart.items.get() || [];
-    //
+
     // Access promo code
     const promoCode = promo.code.get() || "";
     const discountPercent = promoCode === "SAVE10" ? 0.1 : 0;
-    //
+
     // Calculate totals
     const subtotal = this.items.reduce((sum, item) => 
       sum + (item.price * item.quantity), 0
     );
     this.discount = subtotal * discountPercent;
     this.total = subtotal - this.discount;
-    //
+
     this.requestUpdate();
   }
-  //
+
   connectedCallback() {
     super.connectedCallback();
     this.calculateTotal();
   }
-  //
+
   render() {
     return html`
       <div class="cart">
@@ -175,14 +178,14 @@ export class ShoppingCart extends LitElement {
     `;
   }
 }
-//
+
 // When you update the publishers, calculateTotal is automatically called:
 const cart = PublisherManager.get("cart");
 cart.items.set([
   { name: "Product 1", price: 10, quantity: 2 },
   { name: "Product 2", price: 15, quantity: 1 }
 ]);
-//
+
 const promo = PublisherManager.get("promo");
 promo.code.set("SAVE10");
 // calculateTotal will be automatically called and the UI will update

package/src/docs/_decorators/bind.md

@@ -8,7 +8,7 @@ For Lit re-renders, also add `@state()` on the same property.
 
 ## Principle
 
-The decorator subscribes via `PublisherManager` using dot notation. Publisher updates flow into the decorated property.
+The decorator subscribes to the DataProvider store using dot notation or a `DataProviderKey`. Updates flow into the decorated property ([Data flow](#docs/_core-concept/dataFlow.md/dataFlow)).
 
 ## Import
 
@@ -25,26 +25,26 @@ import { bind } from "@supersoniks/concorde/decorators";
 @customElement("demo-bind")
 export class DemoBind extends LitElement {
   static styles = [tailwind];
-  //
+
   @bind("demoData.firstName")
   @state()
   firstName = "";
-  //
+
   @bind("demoData.lastName")
   @state()
   lastName: string = "";
-  //
+
   @bind("demoData.count")
   @state()
   count: number = 0;
-  //
+
   render() {
     return //......
   }
-  //
+
   updateData() {
-    const demoData = PublisherManager.get("demoData");
-    const demoUsers = PublisherManager.get("demoUsers");
+    set(demoDataKey, { ...get(demoDataKey), count: get(demoDataKey).count + 1 });
+    // see demo-bind in src/docs/example/decorators-demo-bind-demos.ts
     const randomIndex = Math.floor(Math.random() * demoUsers.get().length);
     const randomUser = demoUsers.get()[randomIndex];
     demoData.set({
@@ -54,12 +54,13 @@ export class DemoBind extends LitElement {
     });
   }
 }
-//
+
 </template>
 </sonic-code>
 
 <sonic-code>
   <template>
+    <docs-demo-sources for="demo-bind"></docs-demo-sources>
     <demo-bind></demo-bind>
   </template>
 </sonic-code>
@@ -72,10 +73,10 @@ export class DemoBind extends LitElement {
   <template>
 import { bind } from "@supersoniks/concorde/decorators";
 import { DataProviderKey } from "@supersoniks/concorde/dataProviderKey";
-//
+
 type Data = { count: number };
 const dataKey = new DataProviderKey<Data>("data");
-//
+
 @bind(dataKey.count, { reflect: true })
 @state()
 count: number = 0;
@@ -99,15 +100,15 @@ avatar: string;
 @customElement("demo-bind-reflect")
 export class DemoBindReflect extends LitElement {
   static styles = [tailwind];
-//
+
   @bind("bindReflectDemo.count", { reflect: true })
   @state()
   withReflect: number = 0;
-//
+
   @bind("bindReflectDemo.count")
   @state()
   withoutReflect: number = 0;
-//
+
   render() {
     return html`
       <div class="mb-3">
@@ -124,13 +125,14 @@ export class DemoBindReflect extends LitElement {
     `;
   }
 }
-//
+
 </template>
 </sonic-code>
 
 <sonic-code toggleCode>
   <template>
-<demo-bind-reflect></demo-bind-reflect>
+    <docs-demo-sources for="demo-bind-reflect"></docs-demo-sources>
+    <demo-bind-reflect></demo-bind-reflect>
   </template>
 </sonic-code>
 
@@ -148,6 +150,7 @@ Use `${prop}` or `${this.prop}` inside a **normal string literal** (not a JS tem
 
 <sonic-code>
   <template>
+    <docs-demo-sources for="demo-bind-dynamic"></docs-demo-sources>
     <demo-bind-dynamic></demo-bind-dynamic>
   </template>
 </sonic-code>

package/src/docs/_decorators/get.md

@@ -7,7 +7,7 @@ Pass an [`Endpoint<T>`](#docs/_misc/endpoint.md/endpoint) as the first argument.
 ## Configuration
 
 - **Default:** `HTML.getApiConfiguration(host)` (ancestor `serviceURL`, etc.).
-- **Second argument:** `DataProviderKey<APIConfiguration>` — config is read from the publisher at the resolved path; internal mutations trigger another GET.
+- **Second argument:** `DataProviderKey<APIConfiguration>` — config is read from the publisher at the resolved path; internal mutations trigger another GET. See [API configuration](#docs/_misc/api-configuration.md/api-configuration) for mock demos.
 
 ## When the GET runs again
 
@@ -26,7 +26,7 @@ import { DataProviderKey } from "@supersoniks/concorde/dataProviderKey";
 
 ## Minimal example
 
-Same demo service as [`sonic-queue`](../../core/components/functional/queue/queue.demo.ts) (`geo.api.gouv.fr`). Publisher setup lives in `decorators-demo-geo.ts` and `decorators-demo-subscribe-publish-get-demos.ts`.
+Same demo service as [`sonic-queue`](../../core/components/functional/queue/queue.demo.ts) (`/docs-mock-api/geo/`). Publisher setup lives in `decorators-demo-geo.ts` and `decorators-demo-subscribe-publish-get-demos.ts`.
 
 <sonic-code language="typescript">
   <template>
@@ -40,6 +40,7 @@ payload: ApiGetResult<User> | null = null;
 
 <sonic-code>
   <template>
+    <docs-demo-sources for="demo-api-get"></docs-demo-sources>
     <demo-api-get></demo-api-get>
   </template>
 </sonic-code>
@@ -48,15 +49,17 @@ Dynamic config and endpoint path (`demo-api-get-configuration-key` in doc source
 
 <sonic-code>
   <template>
+    <docs-demo-sources for="demo-api-get-configuration-key"></docs-demo-sources>
     <demo-api-get-configuration-key></demo-api-get-configuration-key>
   </template>
 </sonic-code>
 
-Scoped `@get` with `@publish` / `@subscribe` on the payload (see [@publish](#docs/_decorators/publish.md/publish) and [@subscribe](#docs/_decorators/subscribe.md/subscribe)) — wrap under an ancestor with `serviceURL="https://geo.api.gouv.fr/"`:
+Scoped `@get` with `@publish` / `@subscribe` on the payload (see [@publish](#docs/_decorators/publish.md/publish) and [@subscribe](#docs/_decorators/subscribe.md/subscribe)) — wrap under an ancestor with `serviceURL="/docs-mock-api/geo/"`:
 
 <sonic-code>
   <template>
-<div serviceURL="https://geo.api.gouv.fr/">
+<div serviceURL="/docs-mock-api/geo/">
+  <docs-demo-sources for="demo-api-get-publish-subscribe"></docs-demo-sources>
   <demo-api-get-publish-subscribe></demo-api-get-publish-subscribe>
 </div>
   </template>