@supersoniks/concorde 5.1.1 → 5.1.2

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

@@ -35,24 +35,21 @@ export class DemoAncestorAttribute extends LitElement {
   @ancestorAttribute("dataProvider")
   dataProvider: string | null = null;
 
-  @ancestorAttribute("testAttribute")
-  testAttribute: string | null = null;
+  @ancestorAttribute("gate")
+  gate: string | null = null;
 
   render() {
     return html`
       <div
         class="space-y-2 rounded border border-neutral-200 dark:border-neutral-700 p-3"
       >
-        <p class="text-sm text-neutral-600 dark:text-neutral-400">
-          <code>@ancestorAttribute</code> — lecture unique au connect (défaut)
-        </p>
         <p>
           dataProvider:
           <strong>${this.dataProvider ?? "null"}</strong>
         </p>
         <p>
-          testAttribute:
-          <strong>${this.testAttribute ?? "null"}</strong>
+          gate:
+          <strong>${this.gate ?? "null"}</strong>
         </p>
       </div>
     `;
@@ -86,43 +83,37 @@ export class DemoAncestorAttributeDynamicSection extends LitElement {
   static styles = [tailwind];
 
   /** Direct parent of the child — closest ancestor when set. */
-  @state() parentValue: string | null = "from-parent";
+  @state() parentValue: string | null = "departures";
   /** Grandparent — used when the parent has no attribute. */
-  @state() outerValue: string | null = "from-outer";
+  @state() outerValue: string | null = "fleet";
   /** Optional wrapper inserted between parent and child (wins over parent). */
   @state() closerActive = false;
 
   render() {
     return html`
       <div class="space-y-4">
-        <p class="text-sm text-neutral-600 dark:text-neutral-400">
-          The child always displays the <strong>nearest</strong> ancestor
-          <code>dataProvider</code>. Change a value, add a closer wrapper, or
-          remove an attribute — the property follows automatically.
-        </p>
-
         <div class="flex flex-wrap gap-2">
           <span class="text-xs text-neutral-500 self-center w-full"
             >Parent</span
           >
           <sonic-button
             size="sm"
-            @click=${() => (this.parentValue = "from-parent")}
+            @click=${() => (this.parentValue = "departures")}
           >
-            parent-a
+            departures
           </sonic-button>
           <sonic-button
             size="sm"
-            @click=${() => (this.parentValue = "from-parent-b")}
+            @click=${() => (this.parentValue = "arrivals")}
           >
-            parent-b
+            arrivals
           </sonic-button>
           <sonic-button
             size="sm"
             variant="outline"
             @click=${() => (this.parentValue = null)}
           >
-            Remove parent attr
+            Remove attribute
           </sonic-button>
         </div>
 
@@ -135,7 +126,7 @@ export class DemoAncestorAttributeDynamicSection extends LitElement {
             ?disabled=${this.closerActive}
             @click=${() => (this.closerActive = true)}
           >
-            Add closer → from-closer
+            Add closer (flights.CN001)
           </sonic-button>
           <sonic-button
             size="sm"
@@ -151,22 +142,22 @@ export class DemoAncestorAttributeDynamicSection extends LitElement {
           <span class="text-xs text-neutral-500 self-center w-full">Outer</span>
           <sonic-button
             size="sm"
-            @click=${() => (this.outerValue = "from-outer")}
+            @click=${() => (this.outerValue = "fleet")}
           >
-            outer-a
+            fleet
           </sonic-button>
           <sonic-button
             size="sm"
-            @click=${() => (this.outerValue = "from-outer-b")}
+            @click=${() => (this.outerValue = "crew")}
           >
-            outer-b
+            crew
           </sonic-button>
           <sonic-button
             size="sm"
             variant="outline"
             @click=${() => (this.outerValue = null)}
           >
-            Remove outer attr
+            Remove attribute
           </sonic-button>
         </div>
 
@@ -175,23 +166,23 @@ export class DemoAncestorAttributeDynamicSection extends LitElement {
           dataProvider=${this.outerValue ?? nothing}
         >
           <p class="text-xs text-neutral-400">
-            outer ${this.outerValue ?? "— no dataProvider —"}
+            outer: ${this.outerValue ?? "no dataProvider"}
           </p>
           <div
             class="rounded border border-dashed border-neutral-300 dark:border-neutral-600 p-3 space-y-2"
             dataProvider=${this.parentValue ?? nothing}
           >
             <p class="text-xs text-neutral-400">
-              parent ${this.parentValue ?? "— no dataProvider —"}
+              parent: ${this.parentValue ?? "no dataProvider"}
             </p>
             ${this.closerActive
               ? html`
                   <div
                     class="rounded border border-amber-300 dark:border-amber-700 bg-amber-50 dark:bg-amber-950/30 p-2 space-y-2"
-                    dataProvider="from-closer"
+                    dataProvider="flights.CN001"
                   >
                     <p class="text-xs text-amber-800 dark:text-amber-200">
-                      closer from-closer
+                      closer: flights.CN001
                     </p>
                     <demo-ancestor-attribute-dynamic></demo-ancestor-attribute-dynamic>
                   </div>
@@ -204,50 +195,57 @@ export class DemoAncestorAttributeDynamicSection extends LitElement {
   }
 }
 
+const PASSENGERS = [
+  "Ada Lindqvist",
+  "Captain Leo Marchand",
+  "Mira Okafor",
+  "Jonas Berg",
+];
+
 @customElement("demo-on-assign")
 export class DemoOnAssign extends LitElement {
   static styles = [tailwind];
 
-  @state() userWithSettings: any = null;
-  @state() isReady: boolean = false;
-  @state() lastUpdate: string = "";
+  @state() passenger: { name: string; email: string } | null = null;
+  @state() settings: { theme: string; language: string } | null = null;
+  @state() lastUpdate = "";
 
+  /** Called once both paths hold a value, then on every later assignment. */
   @onAssign("demoUser", "demoUserSettings")
-  handleDataReady(user: any, settings: any) {
-    this.isReady =
-      Object.keys(user).length > 0 && Object.keys(settings).length > 0;
-    this.userWithSettings = { ...user, ...settings };
+  handleDataReady(
+    user: { name: string; email: string },
+    settings: { theme: string; language: string },
+  ) {
+    this.passenger = user;
+    this.settings = settings;
     this.lastUpdate = new Date().toLocaleTimeString();
-    this.requestUpdate();
   }
 
   render() {
-    const { name, email, theme, language } = this.userWithSettings;
     return html`
-      <div class="mt-2">
-        <sonic-button @click=${this.updateData}>Update Data</sonic-button>
-      </div>
-      <div class="p-3">
-        ${this.isReady === false
-          ? html`<p>No settings yet...</p>`
-          : html`<p>${name || "N/A"}</p>
-              <p>${email || "N/A"}</p>
-              <p>${theme || "N/A"}</p>
-              <p>${language || "N/A"}</p>
-              <p><small>Last updated: ${this.lastUpdate}</small></p> `}
+      <div class="flex flex-col gap-3">
+        <div>
+          <sonic-button @click=${this.nextPassenger}>Next passenger</sonic-button>
+        </div>
+        ${this.passenger && this.settings
+          ? html`<div class="rounded border border-neutral-200 dark:border-neutral-700 p-3">
+              <p><strong>${this.passenger.name}</strong></p>
+              <p>${this.passenger.email}</p>
+              <p>Theme: ${this.settings.theme} · Language: ${this.settings.language}</p>
+              <p><small>Last update: ${this.lastUpdate}</small></p>
+            </div>`
+          : html`<p>Waiting for passenger and settings…</p>`}
       </div>
     `;
   }
 
-  updateData() {
-    const userNumber = Math.floor(Math.random() * 100);
-    set(demoUserKey, {
-      name: `User n°${userNumber}`,
-      email: `user-${userNumber}@example.com`,
-    });
+  nextPassenger() {
+    const name = PASSENGERS[Math.floor(Math.random() * PASSENGERS.length)];
+    const slug = name.toLowerCase().replace("captain ", "").replace(" ", ".");
+    set(demoUserKey, { name, email: `${slug}@example.com` });
     set(demoUserSettingsKey, {
       theme: ["light", "dark", "auto"][Math.floor(Math.random() * 3)],
-      language: ["en", "fr", "es"][Math.floor(Math.random() * 3)],
+      language: ["en", "fr", "sv"][Math.floor(Math.random() * 3)],
     });
   }
 }
@@ -300,11 +298,10 @@ export class DemoOnAssignDynamic extends LitElement {
     if (!users[idx] || !settings[idx]) return;
 
     const randomNames = [
-      { firstName: "Alice", lastName: "Wonder" },
-      { firstName: "Bob", lastName: "Builder" },
-      { firstName: "Charlie", lastName: "Chaplin" },
-      { firstName: "Diana", lastName: "Prince" },
-      { firstName: "Eve", lastName: "Adams" },
+      { firstName: "Ada", lastName: "Lindqvist" },
+      { firstName: "Leo", lastName: "Marchand" },
+      { firstName: "Mira", lastName: "Okafor" },
+      { firstName: "Jonas", lastName: "Berg" },
     ];
     const randomThemes = ["light", "dark", "auto"];
     const randomLanguages = ["en", "fr", "es", "de", "it"];
@@ -330,9 +327,9 @@ export class DemoOnAssignDynamic extends LitElement {
   render() {
     return html`
       <div class="flex flex-col gap-2">
-        <sonic-select label="Users set" @change=${this.updateDataProvider}>
-          <option value=${demoUsersKey.path}>First set of users</option>
-          <option value=${demoUsersAltKey.path}>Second set of users</option>
+        <sonic-select label="Passenger list" @change=${this.updateDataProvider}>
+          <option value=${demoUsersKey.path}>First list</option>
+          <option value=${demoUsersAltKey.path}>Second list</option>
         </sonic-select>
         <sonic-input
           type="number"
@@ -345,7 +342,7 @@ export class DemoOnAssignDynamic extends LitElement {
         >
         </sonic-input>
         <sonic-button @click=${this.updateCurrentUserData}
-          >Update current user data</sonic-button
+          >Update current passenger</sonic-button
         >
         <div class="flex flex-col gap-2 border p-2">
           <div>
@@ -370,35 +367,32 @@ export class DemoOnAssignDynamic extends LitElement {
 export class DemoAutoSubscribe extends LitElement {
   static styles = [tailwind];
 
-  @state() displayText: string = "";
-  @state() computedValue: number = 0;
+  @state() displayText = "";
 
+  /** Re-runs whenever `autoValue1` or `autoValue2` is assigned. */
   @autoSubscribe()
   updateDisplay() {
-    const value1 = get(autoValue1Key) || 0;
-    const value2 = get(autoValue2Key) || 0;
-
-    this.computedValue = value1 + value2;
-    this.displayText = `${value1} + ${value2} = ${this.computedValue}`;
+    const passengers = get(autoValue1Key) || 0;
+    const crew = get(autoValue2Key) || 0;
+    this.displayText = `${passengers} passengers + ${crew} crew = ${passengers + crew} on board`;
   }
 
   render() {
     return html`
-      <p><strong>${this.displayText}</strong></p>
-      <div>
-        <sonic-button @click=${() => this.randomizeValue("autoValue1")}
-          >Randomize Value 1</sonic-button
+      <p class="mb-2"><strong>${this.displayText}</strong></p>
+      <div class="flex flex-wrap gap-2">
+        <sonic-button @click=${() => this.randomize(autoValue1Key, 100)}
+          >Board passengers</sonic-button
+        >
+        <sonic-button @click=${() => this.randomize(autoValue2Key, 12)}
+          >Change crew</sonic-button
         >
-        <sonic-button @click=${() => this.randomizeValue("autoValue2")}
-          Randomize Value 2
-        </sonic-button>
       </div>
     `;
   }
 
-  randomizeValue(which: "autoValue1" | "autoValue2") {
-    const key = which === "autoValue1" ? autoValue1Key : autoValue2Key;
-    set(key, Math.floor(Math.random() * 100));
+  randomize(key: typeof autoValue1Key, max: number) {
+    set(key, Math.floor(Math.random() * max) + 1);
   }
 }
 
@@ -425,10 +419,10 @@ export class DemoWaitAncestorValue extends LitElement {
   render() {
     return html`
       <p>
-        DataProvider from ancestor:
-        <strong>${this.dataProvider || "—"}</strong>
+        dataProvider from ancestor:
+        <strong>${this.dataProvider || "none yet"}</strong>
       </p>
-      <p>Initialized at: ${this.initializedAt || "(waiting for parent…)"}</p>
+      <p>Initialized at: ${this.initializedAt || "waiting for the parent…"}</p>
     `;
   }
 }
@@ -500,11 +494,11 @@ export class DemoWaitAncestorValueMulti extends LitElement {
   render() {
     return html`
       <p>
-        DataProvider from ancestor:
-        <strong>${this.dataProvider || "—"}</strong>
+        dataProvider from ancestor:
+        <strong>${this.dataProvider || "none yet"}</strong>
       </p>
       <p>
-        Initialized at: ${this.initializedAt || "(waiting for both ancestors…)"}
+        Initialized at: ${this.initializedAt || "waiting for both ancestors…"}
       </p>
     `;
   }
@@ -581,7 +575,7 @@ export class DemoWaitAncestorValueReady extends LitElement {
 
   render() {
     return html`
-      <p>DataProvider: <strong>${this.dataProvider || "—"}</strong></p>
+      <p>dataProvider: <strong>${this.dataProvider || "none"}</strong></p>
       <p>Initialized at: ${this.initializedAt}</p>
     `;
   }
@@ -600,12 +594,8 @@ export class DemoWaitAncestorsReadySection extends LitElement {
   render() {
     return html`
       <div class="space-y-4">
-        <p class="text-sm text-neutral-600 dark:text-neutral-400">
-          Parent défini au chargement. Ajout dynamique de l’enfant —
-          initialisation immédiate si l’ancêtre est prêt.
-        </p>
         <sonic-button ?disabled=${this.childInDom} @click=${this.addChild}>
-          ${this.childInDom ? "Child added" : "Add child dynamically"}
+          ${this.childInDom ? "Child added" : "Add child"}
         </sonic-button>
         <demo-wait-ancestor-ready dataProvider=${waitAncestorDemoKey.path}>
           ${this.childInDom
@@ -623,9 +613,6 @@ export class DemoWaitAncestorsStaticSection extends LitElement {
 
   render() {
     return html`
-      <p class="text-sm text-neutral-600 dark:text-neutral-400 mb-4">
-        Parent et enfant présents dès le chargement — pas de délai.
-      </p>
       <demo-wait-ancestor-ready dataProvider=${waitAncestorDemoKey.path}>
         <demo-wait-ancestor-value-ready></demo-wait-ancestor-value-ready>
       </demo-wait-ancestor-ready>

package/src/docs/example/docs-api-config-demos.ts

@@ -4,7 +4,7 @@ import { get } from "@supersoniks/concorde/core/decorators/api";
 import type { ApiResult } from "@supersoniks/concorde/core/utils/api";
 import { Endpoint } from "@supersoniks/concorde/core/utils/endpoint";
 import { set } from "@supersoniks/concorde/core/utils/PublisherProxy";
-import { wording } from "@supersoniks/concorde/core/directives/Wording";
+import { t } from "@supersoniks/concorde/core/directives/Wording";
 import { DOCS_MOCK_API_BASE } from "../mock-api/urls";
 import {
   DOCS_MOCK_EVENTS_API_TOKEN,
@@ -128,32 +128,31 @@ export class DocsApiConfigStaleTokenDemo extends LitElement {
   }
 }
 
-/** Ancestor attributes: <code>wordingProvider</code> + directive <code>wording()</code>. */
+/** <code>t()</code> reads <code>serviceURL</code> / <code>wordingProvider</code> from the host and its ancestors. */
 @customElement("docs-api-config-wording-demo")
 export class DocsApiConfigWordingDemo extends LitElement {
   static styles = [tailwind];
 
+  connectedCallback() {
+    this.setAttribute("serviceURL", DOCS_MOCK_API_BASE);
+    this.setAttribute("wordingProvider", "wording/labels?lang=fr");
+    this.setAttribute("wordingVersionProvider", docsApiConfWordingVersionKey.path);
+    super.connectedCallback();
+  }
+
   render() {
     return html`
-      <div
-        serviceURL=${DOCS_MOCK_API_BASE}
-        wordingProvider="wording/labels?lang=fr"
-        wordingVersionProvider=${docsApiConfWordingVersionKey.path}
+      <p class="text-sm space-y-2">
+        <span class="block">${t("api-config.greeting")}</span>
+        <span class="block">${t("api-config.farewell")}</span>
+        <span class="block text-neutral-500">${t("api-config.hint")}</span>
+      </p>
+      <sonic-button
+        size="sm"
+        class="mt-3"
+        @click=${() => set(docsApiConfWordingVersionKey, Date.now())}
+        >Bump wording version (reload)</sonic-button
       >
-        <p class="text-sm space-y-2">
-          <span class="block">${wording("api-config.greeting")}</span>
-          <span class="block">${wording("api-config.farewell")}</span>
-          <span class="block text-neutral-500"
-            >${wording("api-config.hint")}</span
-          >
-        </p>
-        <sonic-button
-          size="sm"
-          class="mt-3"
-          @click=${() => set(docsApiConfWordingVersionKey, Date.now())}
-          >Bump wording version (reload)</sonic-button
-        >
-      </div>
     `;
   }
 }

package/src/docs/example/docs-flight-demos.ts

@@ -0,0 +1,147 @@
+import { html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { DOCS_MOCK_API_BASE } from "../mock-api/urls";
+import type { DocsFlight, DocsFlightStatus } from "../mock-api/flights";
+import {
+  docsFlightDelayedSwitchKey,
+  docsFlightDirectionFilterKey,
+  docsFlightSearchFilterKey,
+  docsFlightStatusRadioKey,
+} from "./docs-provider-keys";
+import { tailwind } from "../tailwind";
+
+import "../../core/components/functional/queue/queue";
+import "../../core/components/ui/badge/badge";
+import "../../core/components/ui/form/input/input";
+import "../../core/components/ui/form/select/select";
+import "../../core/components/ui/form/radio/radio";
+import "../../core/components/ui/form/switch/switch";
+
+const STATUS: Record<DocsFlightStatus, { label: string; type: string }> = {
+  "on-time": { label: "On time", type: "success" },
+  boarding: { label: "Boarding", type: "info" },
+  delayed: { label: "Delayed", type: "warning" },
+  landed: { label: "Landed", type: "neutral" },
+  cancelled: { label: "Cancelled", type: "danger" },
+};
+
+const flightRow = (f: DocsFlight) => html`
+  <div
+    class="grid grid-cols-[3.5rem_4.5rem_1fr_auto] items-center gap-3 border-0 border-b border-dotted border-neutral-300 py-2 text-sm"
+  >
+    <span class="font-mono">${f.time}</span>
+    <span class="font-mono">${f.code}</span>
+    <span>${f.city} <span class="text-neutral-500">(${f.airport})</span></span>
+    <sonic-badge size="xs" type=${STATUS[f.status].type}
+      >${STATUS[f.status].label}</sonic-badge
+    >
+  </div>
+`;
+
+/** Flight board: a sonic-queue on `/flights`, filtered by `filterProvider`. */
+@customElement("docs-flight-board")
+export class DocsFlightBoard extends LitElement {
+  static styles = [tailwind];
+
+  @property() filterProvider = "";
+  @property() direction = "";
+
+  render() {
+    const direction = this.direction ? `&direction=${this.direction}` : "";
+    return html`
+      <sonic-queue
+        serviceURL=${DOCS_MOCK_API_BASE}
+        dataProviderExpression="flights?offset=$offset&limit=$limit${direction}"
+        dataFilterProvider=${this.filterProvider}
+        key="flights"
+        limit="8"
+        class="mt-4 block max-h-80 overflow-y-auto"
+        .items=${flightRow}
+      ></sonic-queue>
+    `;
+  }
+}
+
+@customElement("docs-flight-search-demo")
+export class DocsFlightSearchDemo extends LitElement {
+  static styles = [tailwind];
+
+  render() {
+    return html`
+      <sonic-input
+        formDataProvider=${docsFlightSearchFilterKey.path}
+        name="q"
+        label="Search flights"
+        placeholder="City, airport or flight number"
+      ></sonic-input>
+      <docs-flight-board
+        filterProvider=${docsFlightSearchFilterKey.path}
+        direction="departures"
+      ></docs-flight-board>
+    `;
+  }
+}
+
+@customElement("docs-flight-direction-demo")
+export class DocsFlightDirectionDemo extends LitElement {
+  static styles = [tailwind];
+
+  render() {
+    return html`
+      <sonic-select
+        formDataProvider=${docsFlightDirectionFilterKey.path}
+        name="direction"
+        label="Board"
+      >
+        <option value="departures">Departures</option>
+        <option value="arrivals">Arrivals</option>
+      </sonic-select>
+      <docs-flight-board
+        filterProvider=${docsFlightDirectionFilterKey.path}
+      ></docs-flight-board>
+    `;
+  }
+}
+
+@customElement("docs-flight-status-radio-demo")
+export class DocsFlightStatusRadioDemo extends LitElement {
+  static styles = [tailwind];
+
+  render() {
+    return html`
+      <div
+        formDataProvider=${docsFlightStatusRadioKey.path}
+        class="flex flex-wrap gap-4"
+      >
+        <sonic-radio name="status" value="all" checked>All</sonic-radio>
+        <sonic-radio name="status" value="on-time">On time</sonic-radio>
+        <sonic-radio name="status" value="delayed">Delayed</sonic-radio>
+        <sonic-radio name="status" value="cancelled">Cancelled</sonic-radio>
+      </div>
+      <docs-flight-board
+        filterProvider=${docsFlightStatusRadioKey.path}
+        direction="arrivals"
+      ></docs-flight-board>
+    `;
+  }
+}
+
+@customElement("docs-flight-delayed-switch-demo")
+export class DocsFlightDelayedSwitchDemo extends LitElement {
+  static styles = [tailwind];
+
+  render() {
+    return html`
+      <sonic-switch
+        formDataProvider=${docsFlightDelayedSwitchKey.path}
+        name="status"
+        value="delayed"
+        >Delayed flights only</sonic-switch
+      >
+      <docs-flight-board
+        filterProvider=${docsFlightDelayedSwitchKey.path}
+        direction="departures"
+      ></docs-flight-board>
+    `;
+  }
+}