@supersoniks/concorde 5.1.0 → 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-boarding-pass-demo.ts

@@ -0,0 +1,134 @@
+import { html, LitElement } from "lit";
+import { customElement, state } from "lit/decorators.js";
+import { keyed } from "lit/directives/keyed.js";
+import { subscribe } from "@supersoniks/concorde/core/decorators/Subscriber";
+import { docsBoardingPassKey } from "./docs-provider-keys";
+
+const destinations: Record<string, string> = {
+  JFK: "New York",
+  GIG: "Rio de Janeiro",
+  HND: "Tokyo",
+  DXB: "Dubai",
+  SYD: "Sydney",
+};
+
+const isChecked = (v: unknown) =>
+  v === true || v === "true" || v === 1 || v === "1";
+
+@customElement("docs-boarding-pass-demo")
+export class DocsBoardingPassDemo extends LitElement {
+  /** Light DOM: the pass is part of the page (styles in tailwind/css/docs/boarding-pass.css). */
+  createRenderRoot() {
+    return this;
+  }
+
+
+  @subscribe(docsBoardingPassKey.firstName)
+  @state()
+  firstName = "";
+
+  @subscribe(docsBoardingPassKey.lastName)
+  @state()
+  lastName = "";
+
+  @subscribe(docsBoardingPassKey.destination)
+  @state()
+  destination = "JFK";
+
+  @subscribe(docsBoardingPassKey.firstClass)
+  @state()
+  firstClass = "";
+
+  render() {
+    const first = isChecked(this.firstClass);
+    const code = this.destination || "JFK";
+    const passenger =
+      `${this.lastName || "—"} / ${this.firstName || "—"}`.toUpperCase();
+
+    return html`
+      <div class="grid gap-6 max-w-[34rem] mx-auto">
+        <div formDataProvider=${docsBoardingPassKey.path} class="grid gap-3">
+          <div class="grid gap-3 sm:grid-cols-2">
+            <sonic-input name="firstName" label="First name"></sonic-input>
+            <sonic-input name="lastName" label="Last name"></sonic-input>
+          </div>
+          <sonic-select name="destination" label="Destination">
+            ${Object.entries(destinations).map(
+              ([value, city]) =>
+                html`<option value=${value}>${city} (${value})</option>`,
+            )}
+          </sonic-select>
+          <sonic-switch name="firstClass" value="true" unique
+            >First class</sonic-switch
+          >
+        </div>
+
+        <sonic-card
+          type=${first ? "invert" : "light"}
+          shadow="none"
+          class="block relative"
+        >
+          <div class="flex items-center justify-between gap-3 mb-5">
+            <span class="font-headings italic font-semibold text-xl"
+              >concorde airways</span
+            >
+            ${keyed(
+              first,
+              html`<sonic-badge
+                class="bp-pop"
+                variant="outline"
+                type=${first ? "warning" : "default"}
+                >${first ? "First class" : "Economy"}</sonic-badge
+              >`,
+            )}
+          </div>
+
+          <div class="grid grid-cols-[auto_1fr_auto] items-center gap-3">
+            <div>
+              <div class="font-headings text-4xl sm:text-5xl leading-none">CDG</div>
+              <div class="text-xs opacity-70">Paris</div>
+            </div>
+            <div class="bp-route">
+              ${keyed(
+                code,
+                html`<sonic-icon
+                  class="bp-fly"
+                  name="plane"
+                  library="fontAwesome"
+                  prefix="solid"
+                  size="lg"
+                ></sonic-icon>`,
+              )}
+            </div>
+            <div class="text-right">
+              ${keyed(
+                code,
+                html`<div class="bp-pop font-headings text-4xl sm:text-5xl leading-none">
+                  ${code}
+                </div>`,
+              )}
+              <div class="text-xs opacity-70">${destinations[code]}</div>
+            </div>
+          </div>
+
+          <div class="grid grid-cols-3 gap-3 mt-6 text-sm">
+            <div class="col-span-3 sm:col-span-1 min-w-0">
+              <div class="text-xs opacity-60">Passenger</div>
+              <div class="font-bold truncate">${passenger}</div>
+            </div>
+            <div>
+              <div class="text-xs opacity-60">Seat</div>
+              <div class="font-bold">${first ? "1A" : "24C"}</div>
+            </div>
+            <div>
+              <div class="text-xs opacity-60">Boarding</div>
+              <div class="font-bold">${first ? "10:05" : "10:25"}</div>
+            </div>
+          </div>
+
+          <div class="bp-barcode h-10 mt-6 opacity-80"></div>
+        </sonic-card>
+      </div>
+    `;
+  }
+}