@supersoniks/concorde 4.5.2 → 4.7.0

package/docs/src/core/components/ui/form/input/input.md

@@ -1,6 +1,5 @@
 # Input
 
-
 <sonic-button type="info" size="sm" target="_blank" href="https://www.w3schools.com/tags/tag_input.asp#midcontentadcontainer">
   <sonic-icon library="iconoir" name="open-new-window" slot="prefix" ></sonic-icon>
   Native attibutes list
@@ -124,35 +123,11 @@
 
 
 
-## Example of use
-<sonic-code>
-  <template>
-  <sonic-input
-    formDataProvider="input-filter"
-    name="contains"
-    value="chien"
-    class="mb-4"
-  ></sonic-input>
-  <sonic-subscriber dataProvider="input-filter" class="text-xl my-4 block font-bold">
-    Blagues trouvées pour "<span data-bind ::inner-html="$contains"></span>" :
-  </sonic-subscriber>
-  <sonic-queue
-    lazyload
-    dataProviderExpression="joke/Any?amount=10&lang=fr"
-    dataFilterProvider="input-filter"
-    serviceURL="https://v2.jokeapi.dev"
-    key="jokes"
-  >
-    <template>
-      <div class="border-0 border-b-[1px] border-b-neutral-300 border-dotted py-3">
-        <div data-bind ::inner-html="$joke"></div>
-        <div data-bind ::inner-html="$setup"></div>
-        <div data-bind ::inner-html="$delivery"></div>
-      </div>
-    </template>
-  </sonic-queue>
-  </template>
-</sonic-code>
+## Example of use — search + queue
+
+Filter with **`formDataProvider`** + **`name="contains"`** (mock API: substring on joke text). Caption and rows via Lit (`@subscribe`, `.items` on `sonic-queue`):
+
+<docs-lit-demo for="docs-joke-search-demo"></docs-lit-demo>
 
 
 <sonic-code>

package/docs/src/core/components/ui/form/input-autocomplete/input-autocomplete.md

@@ -6,6 +6,8 @@ Please note that only basic text input params and methods are implemented at thi
 
 Here are some of the features of the input-autocomplete component:
 
+Doc examples below use HTML binding on suggestion rows. The Lit equivalent uses an **`items`** callback with the row object (see `docs-queue-geo-demo` in `src/docs/example/docs-queue-demos.ts`). Embedding without Lit: [HTML integration](#docs/_misc/html-integration.md/html-integration).
+
 * It provides a suggest behavior, where the user can type a few letters and the component will suggest possible matches.
 * It can be used with a variety of data providers, such as an API.
 * It is fully customizable, so you can change the look and feel of the component to match your needs.
@@ -34,7 +36,7 @@ The result is that when you select an item, the input takes the value of the sel
     name="nom" 
     propertyName="bloop"
     placeholder="Paris, Lyon, Tours, ..." 
-    serviceurl="https://geo.api.gouv.fr" 
+    serviceurl="/docs-mock-api/geo" 
     dataproviderexpression="communes?limit=5&boost=population"
     >
       <template>
@@ -65,7 +67,7 @@ By using these attributes, we can separate the search parameter from the name of
     name="siren" 
     value="212703771" 
     placeholder="Paris, Lyon, Tours, ..." 
-    serviceurl="https://geo.api.gouv.fr" 
+    serviceurl="/docs-mock-api/geo" 
     dataproviderexpression="communes?limit=5&boost=population"
     searchParameter="nom" 
     >
@@ -95,7 +97,7 @@ The following code shows how to use the `select` attribute in an autocomplete in
     name="siren" 
     value="212703771" 
     placeholder="Paris, Lyon, Tours, ..." 
-    serviceurl="https://geo.api.gouv.fr" 
+    serviceurl="/docs-mock-api/geo" 
     dataproviderexpression="communes?limit=5&boost=population"
     searchParameter="nom" 
     >
@@ -119,7 +121,7 @@ At the moment you can enable keyboard up/down by adding an attribut "data-keyboa
     name="nom" 
     data-keyboard-nav="nav-autocomplete" 
     placeholder="Paris, Lyon, Tours, ..." 
-    serviceurl="https://geo.api.gouv.fr" 
+    serviceurl="/docs-mock-api/geo" 
     dataproviderexpression="communes?limit=60&boost=population"
     >
     <template>

package/docs/src/core/components/ui/form/radio/radio.md

@@ -50,35 +50,8 @@
 </sonic-code>
 
 
-## Example of use
-<sonic-code>
-  <template>
-      <sonic-subscriber dataProvider="jokeFilterRadio" class="text-xl my-4 block font-bold">
-        Remove following jokes :
-        <sonic-value key="blacklistFlags" class="block text-sm"></sonic-value>
-      </sonic-subscriber>
-      <div formDataProvider="jokeFilterRadio"  class="grid grid-cols-2 lg:grid-cols-3 gap-x-6 gap-y-2 mt-2 mb-3">
-        <sonic-radio name="blacklistFlags"  value="nsfw">nsfw</sonic-radio>
-        <sonic-radio name="blacklistFlags"  value="religious">religious</sonic-radio>
-        <sonic-radio name="blacklistFlags"  value="political">political</sonic-radio>
-        <sonic-radio name="blacklistFlags"  value="racist" checked >racist</sonic-radio>
-        <sonic-radio name="blacklistFlags"  value="sexist"  >sexist</sonic-radio>
-        <sonic-radio name="blacklistFlags"   value="explicit">explicit</sonic-radio>
-      </div>
-      <sonic-queue
-        lazyload
-        dataProviderExpression="joke/Any?amount=10&lang=en"
-        dataFilterProvider="jokeFilterRadio"
-        serviceURL="https://v2.jokeapi.dev"
-        key="jokes"
-      >
-        <template>
-          <div class="border-0 border-b-[1px] border-b-neutral-300  py-3 leading-tight">
-            <sonic-value key="joke"></sonic-value>
-            <sonic-value key="setup" class="font-bold"></sonic-value><br>
-            <sonic-value key="delivery"></sonic-value>
-          </div>
-        </template>
-      </sonic-queue>
-  </template>
-</sonic-code>
+## Example of use — blacklist + queue
+
+Same mock filter as [Checkbox](#core/components/ui/form/checkbox/checkbox.md/checkbox) (`blacklistFlags` query param). Radio sends **one** flag at a time.
+
+<docs-lit-demo for="docs-joke-blacklist-radio-demo"></docs-lit-demo>

package/docs/src/core/components/ui/form/select/select.md

@@ -64,34 +64,8 @@
   </template>
 </sonic-code>
 
-## Example of use
-<sonic-code>
-  <template>
-    <sonic-select
-      formDataProvider="select-filter"
-      name="lang"
-      value="fr"
-    >
-    <option value="fr">fr<option>
-    <optionn value="en">en<option>
-    </sonic-select>
-    <sonic-subscriber dataProvider="select-filter" class="text-xl my-4 block font-bold">
-      Blagues trouvées pour le code de langue"<span data-bind ::inner-html="$lang"></span>" :
-    </sonic-subscriber>
-    <sonic-queue
-      lazyload
-      dataProviderExpression="joke/Any?amount=10"
-      dataFilterProvider="select-filter"
-      serviceURL="https://v2.jokeapi.dev"
-      key="jokes"
-    >
-      <template>
-        <div class="border-0 border-b-[1px] border-b-neutral-300 border-dotted py-3">
-          <div data-bind ::inner-html="$joke"></div>
-          <div data-bind ::inner-html="$setup"></div>
-          <div data-bind ::inner-html="$delivery"></div>
-        </div>
-      </template>
-    </sonic-queue>
-  </template>
-</sonic-code>
+## Example of use — language filter + queue
+
+**`name="lang"`** is sent as `?lang=fr|en` to the [doc mock API](#docs/_misc/docs-mock-api.md/docs-mock-api) (`filterDocsJokes`). Same pattern as [Input](#core/components/ui/form/input/input.md/input) (`contains`):
+
+<docs-lit-demo for="docs-joke-lang-demo"></docs-lit-demo>

package/docs/src/core/components/ui/form/switch/switch.md

@@ -50,35 +50,8 @@
 </sonic-code>
 
 
-## Example of use
-<sonic-code>
-  <template>
-      <sonic-subscriber dataProvider="jokeFilterswitch" class="text-xl my-4 block font-bold">
-        Remove following jokes :
-        <sonic-value key="blacklistFlags" class="block text-sm"></sonic-value>
-      </sonic-subscriber>
-      <div formDataProvider="jokeFilterswitch"  class="grid grid-cols-2 lg:grid-cols-3 gap-x-6 gap-y-2 mt-2 mb-3">
-        <sonic-switch name="blacklistFlags"  value="nsfw">nsfw</sonic-switch>
-        <sonic-switch name="blacklistFlags"  value="religious">religious</sonic-switch>
-        <sonic-switch name="blacklistFlags"  value="political">political</sonic-switch>
-        <sonic-switch name="blacklistFlags"  value="racist" checked >racist</sonic-switch>
-        <sonic-switch name="blacklistFlags"  value="sexist"  >sexist</sonic-switch>
-        <sonic-switch name="blacklistFlags"   value="explicit">explicit</sonic-switch>
-      </div>
-      <sonic-queue
-        lazyload
-        dataProviderExpression="joke/Any?amount=10&lang=en"
-        dataFilterProvider="jokeFilterswitch"
-        serviceURL="https://v2.jokeapi.dev"
-        key="jokes"
-      >
-        <template>
-          <div class="border-0 border-b-[1px] border-b-neutral-300  py-3 leading-tight">
-            <sonic-value key="joke"></sonic-value>
-            <sonic-value key="setup" class="font-bold"></sonic-value><br>
-            <sonic-value key="delivery"></sonic-value>
-          </div>
-        </template>
-      </sonic-queue>
-  </template>
-</sonic-code>
+## Example of use — blacklist + queue
+
+Same mock filter as [Checkbox](#core/components/ui/form/checkbox/checkbox.md/checkbox); switches can enable several flags (comma-separated in the query).
+
+<docs-lit-demo for="docs-joke-blacklist-switch-demo"></docs-lit-demo>

package/docs/src/core/components/ui/loader/loader.md

@@ -29,19 +29,7 @@
 
 ## Fixed mode
 
-<sonic-code >
-  <template>
-    <div dataProvider="toggleLoaderForm" formDataProvider="toggleLoaderForm">
-      <sonic-checkbox label="Show fixed loader" 
-          name="toggleLoader"
-          unique  value="true">
-      </sonic-checkbox>
-      <sonic-if  data-bind ::condition="$toggleLoader" >
-        <sonic-loader></sonic-loader>
-      </sonic-if>
-    </div>
-  </template>
-</sonic-code>
+<docs-lit-demo for="docs-toggle-loader-demo"></docs-lit-demo>
 
 
 ## Loading button

package/docs/src/core/components/ui/table/table.md

@@ -42,7 +42,7 @@
         </sonic-tr> 
       </sonic-thead>
       <sonic-tbody>
-        <sonic-list debug fetch serviceURL="https://reqres.in" dataProvider="api/users" key="data" displayContents>
+        <sonic-list debug fetch serviceURL="/docs-mock-api" dataProvider="api/users" key="data" displayContents>
           <template>
             <sonic-tr>
               <sonic-td data-bind ::inner-html="$id"></sonic-td>
@@ -135,7 +135,7 @@
         </sonic-tr> 
       </sonic-thead>
       <sonic-tbody>
-        <sonic-list  fetch serviceURL="https://reqres.in" dataProvider="api/users" key="data" displayContents>
+        <sonic-list  fetch serviceURL="/docs-mock-api" dataProvider="api/users" key="data" displayContents>
           <template>
             <sonic-tr>
               <sonic-td data-bind ::inner-html="$id"></sonic-td>
@@ -256,7 +256,7 @@ Every table is responsive by default
         </sonic-tr> 
       </sonic-thead>
       <sonic-tbody>
-        <sonic-list fetch serviceURL="https://reqres.in" dataProvider="api/users" key="data" displayContents>
+        <sonic-list fetch serviceURL="/docs-mock-api" dataProvider="api/users" key="data" displayContents>
           <template>
             <sonic-tr>
               <sonic-td data-bind ::inner-html="$id"></sonic-td>

package/docs/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/docs/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/docs/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/docs/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/docs/src/docs/_decorators/bind.md

@@ -4,11 +4,11 @@ Binds a class property to a path in a publisher. The property updates when publi
 
 For Lit re-renders, also add `@state()` on the same property.
 
-**See also:** [@subscribe](#docs/_decorators/subscribe.md/subscribe), [@publish](#docs/_decorators/publish.md/publish), [@get](#docs/_decorators/get.md/get).
+**See also:** [@subscribe](#docs/_decorators/subscribe.md/subscribe), [@handle](#docs/_decorators/handle.md/handle), [@publish](#docs/_decorators/publish.md/publish), [@get](#docs/_decorators/get.md/get).
 
 ## 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>