@supersoniks/concorde 4.2.1 → 4.3.0

package/src/tsconfig-model.json

@@ -1,5 +1,5 @@
 {
-  "exclude": ["node_modules/**/*", "dist/**/*", "vite.config.mts", "docs.ts", "docs/*", "router-test.html"],
+  "exclude": ["node_modules/**/*", "dist/**/*", "vite.config.mts", "docs.ts", "docs/*", "router-test.html", "**/*.type-test.ts"],
   "compilerOptions": {
     "target": "es2021",
     "experimentalDecorators": true,

package/src/tsconfig.json

@@ -5,7 +5,8 @@
     "vite.config.mts",
     "docs.ts",
     "docs/*",
-    "router-test.html"
+    "router-test.html",
+    "**/*.type-test.ts"
   ],
   "compilerOptions": {
     "target": "es2021",
@@ -14,6 +15,12 @@
     "module": "esnext",
     "moduleResolution": "bundler",
     "paths": {
+      "./_types/endpoint": [
+        "/sites/concorde/src/core/_types/endpoint.ts"
+      ],
+      "./_types/key": [
+        "/sites/concorde/src/core/_types/key.ts"
+      ],
       "./_types/types": [
         "/sites/concorde/src/core/_types/types.ts"
       ],
@@ -767,6 +774,12 @@
       "./decorators/Subscriber": [
         "/sites/concorde/src/core/decorators/Subscriber.ts"
       ],
+      "./decorators/api.spec": [
+        "/sites/concorde/src/core/decorators/api.spec.ts"
+      ],
+      "./decorators/api": [
+        "/sites/concorde/src/core/decorators/api.ts"
+      ],
       "./decorators/lifecycle": [
         "/sites/concorde/src/core/decorators/lifecycle.ts"
       ],
@@ -785,9 +798,33 @@
       "./decorators/subscriber/common": [
         "/sites/concorde/src/core/decorators/subscriber/common.ts"
       ],
+      "./decorators/subscriber/dynamicPath": [
+        "/sites/concorde/src/core/decorators/subscriber/dynamicPath.ts"
+      ],
+      "./decorators/subscriber/dynamicPropertyWatch": [
+        "/sites/concorde/src/core/decorators/subscriber/dynamicPropertyWatch.ts"
+      ],
       "./decorators/subscriber/onAssign": [
         "/sites/concorde/src/core/decorators/subscriber/onAssign.ts"
       ],
+      "./decorators/subscriber/publish.spec": [
+        "/sites/concorde/src/core/decorators/subscriber/publish.spec.ts"
+      ],
+      "./decorators/subscriber/publish": [
+        "/sites/concorde/src/core/decorators/subscriber/publish.ts"
+      ],
+      "./decorators/subscriber/publisherPath": [
+        "/sites/concorde/src/core/decorators/subscriber/publisherPath.ts"
+      ],
+      "./decorators/subscriber/subscribe.spec": [
+        "/sites/concorde/src/core/decorators/subscriber/subscribe.spec.ts"
+      ],
+      "./decorators/subscriber/subscribe": [
+        "/sites/concorde/src/core/decorators/subscriber/subscribe.ts"
+      ],
+      "./decorators/subscriber/subscribe.type-test": [
+        "/sites/concorde/src/core/decorators/subscriber/subscribe.type-test.ts"
+      ],
       "./directives/DataProvider": [
         "/sites/concorde/src/core/directives/DataProvider.ts"
       ],
@@ -848,6 +885,18 @@
       "./utils/api": [
         "/sites/concorde/src/core/utils/api.ts"
       ],
+      "./utils/dataProviderKey.spec": [
+        "/sites/concorde/src/core/utils/dataProviderKey.spec.ts"
+      ],
+      "./utils/dataProviderKey": [
+        "/sites/concorde/src/core/utils/dataProviderKey.ts"
+      ],
+      "./utils/endpoint.spec": [
+        "/sites/concorde/src/core/utils/endpoint.spec.ts"
+      ],
+      "./utils/endpoint": [
+        "/sites/concorde/src/core/utils/endpoint.ts"
+      ],
       "./utils/route.spec": [
         "/sites/concorde/src/core/utils/route.spec.ts"
       ],
@@ -863,6 +912,18 @@
       "./docs": [
         "/sites/concorde/src/docs/docs.ts"
       ],
+      "./example/decorators-demo-bind-demos": [
+        "/sites/concorde/src/docs/example/decorators-demo-bind-demos.ts"
+      ],
+      "./example/decorators-demo-geo": [
+        "/sites/concorde/src/docs/example/decorators-demo-geo.ts"
+      ],
+      "./example/decorators-demo-init": [
+        "/sites/concorde/src/docs/example/decorators-demo-init.ts"
+      ],
+      "./example/decorators-demo-subscribe-publish-get-demos": [
+        "/sites/concorde/src/docs/example/decorators-demo-subscribe-publish-get-demos.ts"
+      ],
       "./example/decorators-demo": [
         "/sites/concorde/src/docs/example/decorators-demo.ts"
       ],
@@ -902,6 +963,9 @@
       "./TestUtils": [
         "/sites/concorde/src/test-utils/TestUtils.ts"
       ],
+      "@supersoniks/concorde/dataProviderKey": [
+        "/sites/concorde/src/core/utils/dataProviderKey.ts"
+      ],
       "@supersoniks/concorde/*": [
         "./*"
       ],

package/src/tsconfig.tsbuildinfo

@@ -1 +1 @@
-{"root":["./components.ts","./concorde-loaded.ts","./dataprovider.ts","./decorators.ts","./directives.ts","./index.ts","./mixins.ts","./utils.ts","./core/core.ts","./core/_types/types.ts","./core/components/functional/functional.ts","./core/components/functional/date/date.ts","./core/components/functional/example/example.ts","./core/components/functional/fetch/fetch.ts","./core/components/functional/if/if.test.ts","./core/components/functional/if/if.ts","./core/components/functional/list/list.demo.ts","./core/components/functional/list/list.spec.ts","./core/components/functional/list/list.ts","./core/components/functional/mix/mix.ts","./core/components/functional/queue/queue.demo.ts","./core/components/functional/queue/queue.ts","./core/components/functional/router/redirect.ts","./core/components/functional/router/router.demo.ts","./core/components/functional/router/router.spec.ts","./core/components/functional/router/router.ts","./core/components/functional/sdui/SDUIDescriptorTransformer.ts","./core/components/functional/sdui/sdui-utils.ts","./core/components/functional/sdui/sdui.ts","./core/components/functional/sdui/types.ts","./core/components/functional/sonic-scope/sonic-scope.ts","./core/components/functional/states/states.demo.ts","./core/components/functional/states/states.spec.ts","./core/components/functional/states/states.ts","./core/components/functional/submit/submit.ts","./core/components/functional/subscriber/subscriber.ts","./core/components/functional/translation/translation.ts","./core/components/functional/value/value.ts","./core/components/ui/ui.ts","./core/components/ui/_css/scroll.ts","./core/components/ui/_css/shadow.ts","./core/components/ui/_css/size.ts","./core/components/ui/_css/type.ts","./core/components/ui/alert/alert.ts","./core/components/ui/alert-messages/alert-messages.ts","./core/components/ui/badge/badge.ts","./core/components/ui/button/button.ts","./core/components/ui/captcha/altchaStyles.ts","./core/components/ui/captcha/captcha.ts","./core/components/ui/card/card-footer.ts","./core/components/ui/card/card-header-descripton.ts","./core/components/ui/card/card-header.ts","./core/components/ui/card/card-main.ts","./core/components/ui/card/card.ts","./core/components/ui/divider/divider.ts","./core/components/ui/form/checkbox/checkbox.ts","./core/components/ui/form/css/form-control.ts","./core/components/ui/form/fieldset/fieldset.ts","./core/components/ui/form/fieldset/legend-description.ts","./core/components/ui/form/fieldset/legend.ts","./core/components/ui/form/form-actions/form-actions.ts","./core/components/ui/form/form-layout/form-layout.ts","./core/components/ui/form/input/input.ts","./core/components/ui/form/input/password-helper.ts","./core/components/ui/form/input/same-value-helper.ts","./core/components/ui/form/input-autocomplete/input-autocomplete.ts","./core/components/ui/form/radio/radio.ts","./core/components/ui/form/select/select.ts","./core/components/ui/form/switch/switch.ts","./core/components/ui/form/textarea/textarea.ts","./core/components/ui/group/group.ts","./core/components/ui/icon/icon.stories.ts","./core/components/ui/icon/icon.ts","./core/components/ui/icon/icons.ts","./core/components/ui/image/image.ts","./core/components/ui/link/link.ts","./core/components/ui/loader/loader.stories.ts","./core/components/ui/loader/loader.ts","./core/components/ui/loader/styles/fixed.ts","./core/components/ui/loader/styles/inline.ts","./core/components/ui/menu/menu-item.ts","./core/components/ui/menu/menu.ts","./core/components/ui/modal/modal-actions.ts","./core/components/ui/modal/modal-close.ts","./core/components/ui/modal/modal-content.ts","./core/components/ui/modal/modal-subtitle.ts","./core/components/ui/modal/modal-title.ts","./core/components/ui/modal/modal.ts","./core/components/ui/pop/pop.ts","./core/components/ui/progress/progress.ts","./core/components/ui/table/table-caption.ts","./core/components/ui/table/table-tbody.ts","./core/components/ui/table/table-td.ts","./core/components/ui/table/table-tfoot.ts","./core/components/ui/table/table-th.ts","./core/components/ui/table/table-thead.ts","./core/components/ui/table/table-tr.ts","./core/components/ui/table/table.ts","./core/components/ui/theme/theme.ts","./core/components/ui/theme/theme-collection/core-variables.ts","./core/components/ui/theme/theme-collection/dark.ts","./core/components/ui/theme/theme-collection/light.ts","./core/components/ui/toast/message-subscriber.ts","./core/components/ui/toast/toast-item.ts","./core/components/ui/toast/toast.ts","./core/components/ui/toast/types.ts","./core/components/ui/tooltip/tooltip.ts","./core/decorators/Subscriber.ts","./core/decorators/lifecycle.ts","./core/decorators/subscriber/ancestorAttribute.ts","./core/decorators/subscriber/autoFill.ts","./core/decorators/subscriber/autoSubscribe.ts","./core/decorators/subscriber/bind.ts","./core/decorators/subscriber/common.ts","./core/decorators/subscriber/onAssign.ts","./core/directives/DataProvider.ts","./core/directives/Wording.ts","./core/mixins/Fetcher.ts","./core/mixins/FormCheckable.ts","./core/mixins/FormElement.ts","./core/mixins/FormInput.ts","./core/mixins/Subscriber.ts","./core/mixins/TemplatesContainer.ts","./core/mixins/mixins.ts","./core/utils/Arrays.ts","./core/utils/DataBindObserver.ts","./core/utils/Electron.ts","./core/utils/Format.ts","./core/utils/HTML.ts","./core/utils/LocationHandler.ts","./core/utils/Objects.ts","./core/utils/PublisherProxy.ts","./core/utils/Utils.ts","./core/utils/aesCrypto.ts","./core/utils/api.ts","./core/utils/route.spec.ts","./core/utils/route.ts","./core/utils/url-pattern.ts","./test-utils/TestUtils.ts"],"version":"5.9.2"}
+{"root":["./components.ts","./concorde-loaded.ts","./dataprovider.ts","./decorators.ts","./directives.ts","./index.ts","./mixins.ts","./utils.ts","./core/core.ts","./core/_types/endpoint.ts","./core/_types/key.ts","./core/_types/types.ts","./core/components/functional/functional.ts","./core/components/functional/date/date.ts","./core/components/functional/example/example.ts","./core/components/functional/fetch/fetch.ts","./core/components/functional/if/if.test.ts","./core/components/functional/if/if.ts","./core/components/functional/list/list.demo.ts","./core/components/functional/list/list.spec.ts","./core/components/functional/list/list.ts","./core/components/functional/mix/mix.ts","./core/components/functional/queue/queue.demo.ts","./core/components/functional/queue/queue.ts","./core/components/functional/router/redirect.ts","./core/components/functional/router/router.demo.ts","./core/components/functional/router/router.spec.ts","./core/components/functional/router/router.ts","./core/components/functional/sdui/SDUIDescriptorTransformer.ts","./core/components/functional/sdui/sdui-utils.ts","./core/components/functional/sdui/sdui.ts","./core/components/functional/sdui/types.ts","./core/components/functional/sonic-scope/sonic-scope.ts","./core/components/functional/states/states.demo.ts","./core/components/functional/states/states.spec.ts","./core/components/functional/states/states.ts","./core/components/functional/submit/submit.ts","./core/components/functional/subscriber/subscriber.ts","./core/components/functional/translation/translation.ts","./core/components/functional/value/value.ts","./core/components/ui/ui.ts","./core/components/ui/_css/scroll.ts","./core/components/ui/_css/shadow.ts","./core/components/ui/_css/size.ts","./core/components/ui/_css/type.ts","./core/components/ui/alert/alert.ts","./core/components/ui/alert-messages/alert-messages.ts","./core/components/ui/badge/badge.ts","./core/components/ui/button/button.ts","./core/components/ui/captcha/altchaStyles.ts","./core/components/ui/captcha/captcha.ts","./core/components/ui/card/card-footer.ts","./core/components/ui/card/card-header-descripton.ts","./core/components/ui/card/card-header.ts","./core/components/ui/card/card-main.ts","./core/components/ui/card/card.ts","./core/components/ui/divider/divider.ts","./core/components/ui/form/checkbox/checkbox.ts","./core/components/ui/form/css/form-control.ts","./core/components/ui/form/fieldset/fieldset.ts","./core/components/ui/form/fieldset/legend-description.ts","./core/components/ui/form/fieldset/legend.ts","./core/components/ui/form/form-actions/form-actions.ts","./core/components/ui/form/form-layout/form-layout.ts","./core/components/ui/form/input/input.ts","./core/components/ui/form/input/password-helper.ts","./core/components/ui/form/input/same-value-helper.ts","./core/components/ui/form/input-autocomplete/input-autocomplete.ts","./core/components/ui/form/radio/radio.ts","./core/components/ui/form/select/select.ts","./core/components/ui/form/switch/switch.ts","./core/components/ui/form/textarea/textarea.ts","./core/components/ui/group/group.ts","./core/components/ui/icon/icon.stories.ts","./core/components/ui/icon/icon.ts","./core/components/ui/icon/icons.ts","./core/components/ui/image/image.ts","./core/components/ui/link/link.ts","./core/components/ui/loader/loader.stories.ts","./core/components/ui/loader/loader.ts","./core/components/ui/loader/styles/fixed.ts","./core/components/ui/loader/styles/inline.ts","./core/components/ui/menu/menu-item.ts","./core/components/ui/menu/menu.ts","./core/components/ui/modal/modal-actions.ts","./core/components/ui/modal/modal-close.ts","./core/components/ui/modal/modal-content.ts","./core/components/ui/modal/modal-subtitle.ts","./core/components/ui/modal/modal-title.ts","./core/components/ui/modal/modal.ts","./core/components/ui/pop/pop.ts","./core/components/ui/progress/progress.ts","./core/components/ui/table/table-caption.ts","./core/components/ui/table/table-tbody.ts","./core/components/ui/table/table-td.ts","./core/components/ui/table/table-tfoot.ts","./core/components/ui/table/table-th.ts","./core/components/ui/table/table-thead.ts","./core/components/ui/table/table-tr.ts","./core/components/ui/table/table.ts","./core/components/ui/theme/theme.ts","./core/components/ui/theme/theme-collection/core-variables.ts","./core/components/ui/theme/theme-collection/dark.ts","./core/components/ui/theme/theme-collection/light.ts","./core/components/ui/toast/message-subscriber.ts","./core/components/ui/toast/toast-item.ts","./core/components/ui/toast/toast.ts","./core/components/ui/toast/types.ts","./core/components/ui/tooltip/tooltip.ts","./core/decorators/Subscriber.ts","./core/decorators/api.spec.ts","./core/decorators/api.ts","./core/decorators/lifecycle.ts","./core/decorators/subscriber/ancestorAttribute.ts","./core/decorators/subscriber/autoFill.ts","./core/decorators/subscriber/autoSubscribe.ts","./core/decorators/subscriber/bind.ts","./core/decorators/subscriber/common.ts","./core/decorators/subscriber/dynamicPath.ts","./core/decorators/subscriber/dynamicPropertyWatch.ts","./core/decorators/subscriber/onAssign.ts","./core/decorators/subscriber/publish.spec.ts","./core/decorators/subscriber/publish.ts","./core/decorators/subscriber/publisherPath.ts","./core/decorators/subscriber/subscribe.spec.ts","./core/decorators/subscriber/subscribe.ts","./core/directives/DataProvider.ts","./core/directives/Wording.ts","./core/mixins/Fetcher.ts","./core/mixins/FormCheckable.ts","./core/mixins/FormElement.ts","./core/mixins/FormInput.ts","./core/mixins/Subscriber.ts","./core/mixins/TemplatesContainer.ts","./core/mixins/mixins.ts","./core/utils/Arrays.ts","./core/utils/DataBindObserver.ts","./core/utils/Electron.ts","./core/utils/Format.ts","./core/utils/HTML.ts","./core/utils/LocationHandler.ts","./core/utils/Objects.ts","./core/utils/PublisherProxy.ts","./core/utils/Utils.ts","./core/utils/aesCrypto.ts","./core/utils/api.ts","./core/utils/dataProviderKey.spec.ts","./core/utils/dataProviderKey.ts","./core/utils/endpoint.spec.ts","./core/utils/endpoint.ts","./core/utils/route.spec.ts","./core/utils/route.ts","./core/utils/url-pattern.ts","./test-utils/TestUtils.ts"],"version":"5.9.2"}

package/src/utils.ts

@@ -21,7 +21,12 @@ export const api = myApi.default;
 import * as myURLPattern from "@supersoniks/concorde/core/utils/url-pattern";
 export const URLPattern = myURLPattern.default;
 
-import {ConcordeWindow} from "./core/_types/types";
+import { Endpoint } from "./core/utils/endpoint";
+import { DataProviderKey } from "./core/utils/dataProviderKey";
+export { Endpoint, DataProviderKey };
+
+import { ConcordeWindow } from "./core/_types/types";
+
 declare const window: ConcordeWindow;
 
 window["concorde-utils"] = window["concorde-utils"] || {};
@@ -36,4 +41,6 @@ window["concorde-utils"] = {
   PublisherManager: PublisherManager,
   api: api,
   URLPattern: URLPattern,
+  Endpoint: Endpoint,
+  DataProviderKey: DataProviderKey,
 };

package/vite.config.mts

@@ -79,6 +79,17 @@ export default defineConfig({
   },
   resolve: {
     alias: [
+      {
+        find: "@supersoniks/concorde/dataProviderKey",
+        replacement: path.resolve(
+          __dirname,
+          "src/core/utils/dataProviderKey.ts",
+        ),
+      },
+      {
+        find: "@supersoniks/concorde/endpoint",
+        replacement: path.resolve(__dirname, "src/core/utils/endpoint.ts"),
+      },
       {
         find: "@supersoniks/concorde",
         replacement: path.resolve(__dirname, "src"),

package/src/docs/_misc/bind.md

@@ -1,362 +0,0 @@
-# @bind
-
-The `@bind` decorator automatically binds a class property to a path in a publisher. The property will be automatically 
-updated when the publisher's data changes.
-
-If you need to trigger the rendering lifecycle of a LitElement, please also add the `@state()` decorator to the property.
-
-## Principle
-
-This decorator subscribes to a publisher via the `PublisherManager` using a path (dot notation) to access a specific property. When this property is modified in the publisher, the decorated property is automatically updated.
-
-## Usage
-
-### Import
-
-<sonic-code language="typescript">
-  <template>
-import { bind } from "@supersoniks/concorde/decorators";
-  </template>
-</sonic-code>
-
-### Basic example
-
-<sonic-code language="typescript">
-<template>
-@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");
-    const randomIndex = Math.floor(Math.random() * demoUsers.get().length);
-    const randomUser = demoUsers.get()[randomIndex];
-    demoData.set({
-      firstName: randomUser.firstName,
-      lastName: randomUser.lastName,
-      count: (demoData.count.get() || 0) + 1,
-    });
-  }
-}
-</template>
-</sonic-code>
-
-<sonic-code>
-  <template>
-    <demo-bind></demo-bind>
-  </template>
-</sonic-code>
-
-
-## Reflect (liaison bidirectionnelle)
-
-Lorsque vous avez besoin que les modifications locales se propagent également vers le publisher, activez l'option `reflect` :
-
-<sonic-code language="typescript">
-  <template>
-@bind("userData.profile.avatarUrl", { reflect: true })
-@state()
-avatar: string;
-  </template>
-</sonic-code>
-
-- `reflect: true` crée un getter/setter qui garde les descripteurs existants et synchronise la valeur avec le publisher.
-- Les mises à jour provenant du publisher sont protégées par un flag interne afin d'éviter les boucles infinies.
-- Toute écriture sur la propriété décorée (ex. saisie utilisateur, mise à jour durant `render`) déclenche un `publisher.set(...)`.
-- Pratique pour implémenter des formulaires pilotés par les publishers sans écrire manuellement la logique de synchronisation.
-
-
-<sonic-code language="typescript">
-  <template>
-@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">
-        from publisher : ${sub("bindReflectDemo.count") || 0} <br />
-        from component with reflect : ${this.withReflect || 0} <br />
-        from component without reflect : ${this.withoutReflect || 0}
-      </div>
-      <sonic-button @click=${() => this.withReflect++}
-        >Increment with reflect</sonic-button
-      >
-      <sonic-button @click=${() => this.withoutReflect++}
-        >Increment without reflect</sonic-button
-      >
-    `;
-  }
-}
-  </template>
-</sonic-code>
-
-<sonic-code toggleCode>
-  <template>
-<demo-bind-reflect></demo-bind-reflect>
-  </template>
-</sonic-code>
-
-
-### Complex path
-
-<sonic-code language="typescript">
-  <template>
-@customElement("user-profile")
-export class UserProfile extends LitElement {
-  // Access to a simple property
-  @bind("cart")
-  @state()
-  cart: object;
-  //
-  // Access to a nested property
-  @bind("userData.profile.email")
-  @state()
-  userEmail: string;
-  //
-  // Access to an array element
-  @bind("userData.addresses.0.city")
-  @state()
-  primaryCity: string;
-  //
-  render() {
-    return html`
-      <div>
-        <p>Number of items : ${this.cart.items.length}</p>
-        <p>Email: ${this.userEmail}</p>
-        <p>City: ${this.primaryCity}</p>
-      </div>
-    `;
-  }
-}
-  </template>
-</sonic-code>
-
-## Path syntax
-
-The path uses dot notation to navigate through the publisher structure:
-
-- **First segment**: dataProvider identifier (e.g., `"myDataProvider"`)
-- **Following segments**: nested properties (e.g., `"myDataProvider.user.profile"`)
-- **Array access**: use numeric index (e.g., `"myDataProvider.items.0"`)
-
-
-
-### Dynamic path driven by class properties
-
-You can now build the path dynamically by referencing the host class properties inside the string passed to `@bind`. Two placeholder syntaxes are supported:
-
-- `` ${myProperty} `` or `` ${this.myProperty} ``
-- `` {$myProperty} ``
-
-Each placeholder is replaced at runtime with the current value of the corresponding property. `@bind` automatically watches those properties and:
-
-- re-evaluates the final path when one of them changes,
-- removes the previous subscription before attaching the new one,
-- keeps working with `reflect: true`.
-- observe the changes inside `willUpdate(changedProperties)` so nothing touche aux getters/setters.
-
-
-<sonic-code language="typescript">
-  <template>
-@customElement("demo-bind-dynamic")
-export class DemoBindDynamic extends LitElement {
-  static styles = [tailwind];
-  //
-  @property({ type: String })
-  dataProvider: "demoUsers" | "demoUsersAlt" = "demoUsers";
-  //
-  @property({ type: Number })
-  userIndex: number = 0;
-  //
-  @bind("${dataProvider}.${userIndex}")
-  @state()
-  user: any = {};
-  //
-  updateUserIndex(e: Event) {
-    this.userIndex = parseInt((e.target as HTMLInputElement).value);
-  }
-  //
-  updateDataProvider(e: Event) {
-    this.dataProvider = (e.target as HTMLSelectElement).value as
-      | "demoUsers"
-      | "demoUsersAlt";
-  }
-  //
-  updateCurrentUserData() {
-    const usersPublisher = PublisherManager.get(this.dataProvider);
-    const userPublisher = Objects.traverse(
-      usersPublisher,
-      [String(this.userIndex)]
-    ) as PublisherProxy;
-
-    if (userPublisher) {
-      // Générer de nouvelles données aléatoires
-      const randomNames = [
-        { firstName: "Alice", lastName: "Wonder" },
-        { firstName: "Bob", lastName: "Builder" },
-        { firstName: "Charlie", lastName: "Chaplin" },
-      ];
-
-      const randomName =
-        randomNames[Math.floor(Math.random() * randomNames.length)];
-      const randomEmail = `${randomName.firstName.toLowerCase()}.${randomName.lastName.toLowerCase()}@example.com`;
-
-      // Mettre à jour l'utilisateur directement
-      const currentUser = userPublisher.get() || {};
-      userPublisher.set({
-        ...currentUser,
-        firstName: randomName.firstName,
-        lastName: randomName.lastName,
-        email: randomEmail,
-      });
-    }
-  }
-  //
-  render() {
-    return html`
-      <div class="flex flex-col gap-2">
-        <sonic-select
-          .value=${this.dataProvider}
-          label="Users set"
-          @change=${this.updateDataProvider}
-        >
-          <option value="demoUsers">First set of users</option>
-          <option value="demoUsersAlt">Second set of users</option>
-        </sonic-select>
-        <sonic-input
-          type="number"
-          .value=${this.userIndex}
-          @input=${this.updateUserIndex}
-          min="0"
-          max="9"
-          label="Index"
-          class="block"
-        >
-        </sonic-input>
-        <sonic-button @click=${this.updateCurrentUserData}
-          >Update current user data</sonic-button
-        >
-        <div class="flex flex-col gap-2 border p-2">
-          <div>
-            <sonic-icon name="user" library="heroicons"></sonic-icon>
-            ${this.user?.firstName} ${this.user?.lastName}
-          </div>
-          <div>
-            <sonic-icon name="envelope" library="heroicons"></sonic-icon>
-            ${this.user?.email}
-          </div>
-        </div>
-      </div>
-    `;
-  }
-
-  </template>
-</sonic-code>
-
-<sonic-code>
-  <template>
-    <demo-bind-dynamic></demo-bind-dynamic>
-  </template>
-</sonic-code>
-
-> ⚠️ Use a classic string literal: `@bind("${dataProvider}.${profileId}.info.title")`. Do **not** use a template literal (backticks), otherwise JavaScript would try to interpolate the value immediately.
-> 
-
-Additional constraints:
-
-- The hosting class must expose a `willUpdate(changedProperties?: Map<PropertyKey, unknown>)` method (LitElement already le fournit) so that `@bind` peut écouter les changements de dépendances.
-- Dependencies need to be reactive (e.g. `@property()` on LitElement) or you must call `this.requestUpdate("myProp")` manually after changing them, otherwise `willUpdate` ne sera jamais notifié.
-- If you use nested expressions like `${user.id}`, the first segment (`user`) is the one being observed: you need to reassign `this.user` (e.g. with a new object) so that the binding can detect the change.
-
-## Behavior
-
-- The property is automatically updated when the publisher's data changes
-- Subscription happens at the time of `connectedCallback`
-- Unsubscription happens automatically at the time of `disconnectedCallback`
-- If the path doesn't exist yet, a publisher is created with the value `null`
-- The value will be updated as soon as the data becomes available
-
-
-## Use cases
-
-This decorator is particularly useful for:
-
-- **Binding properties** to specific data in a publisher
-- **Accessing sub-properties** without having to manually write subscription logic
-- **Simplifying code** by avoiding repetitive calls to `PublisherManager.get()` and `onAssign()`
-
-## Complete example
-
-<sonic-code language="typescript">
-  <template>
-import { html, LitElement } from "lit";
-import { customElement } from "lit/decorators.js";
-import { bind } from "@supersoniks/concorde/decorators";
-import { PublisherManager } from "@supersoniks/concorde/core/utils/PublisherProxy";
-//
-@customElement("product-card")
-export class ProductCard extends LitElement {
-  @bind("productData.name")
-  @state()
-  productName: string;
-  //
-  @bind("productData.price")
-  @state()
-  price: number;
-  //
-  @bind("productData.description")
-  @state()
-  description: string;
-  //
-  render() {
-    return html`
-      <div class="product-card">
-        <h2>${this.productName}</h2>
-        <p class="price">${this.price}€</p>
-        <p>${this.description}</p>
-      </div>
-    `;
-  }
-}
-// Somewhere in your code, update the data:
-const productPublisher = PublisherManager.get("productData");
-productPublisher.set({
-  name: "Example product",
-  price: 29.99,
-  description: "A product description"
-});
-// The component properties will be automatically updated
-  </template>
-</sonic-code>
-
-## Notes
-
-- This decorator works with any component that has `connectedCallback` and `disconnectedCallback` methods (such as `LitElement` or components extending `Subscriber`)
-- Updates are reactive: any modification to the publisher triggers a property update
-- For more information about publishers, see the documentation on [Sharing data](#docs/_getting-started/pubsub.md/pubsub)