@adia-ai/web-components 0.8.30 → 0.8.32

package/core/provider.js

@@ -25,6 +25,7 @@
 import { UIElement } from './element.js';
 import { defineIfFree } from './register.js';
 import { BaseController } from './controller.js';
+import { viewTransition } from '../traits/view-transition/view-transition.js';
 
 // ═══════════════════════════════════════════════════════════════
 // ADIA PROVIDER (inline — tiny base class)
@@ -163,6 +164,15 @@ export class RouteController extends BaseController {
 // ═══════════════════════════════════════════════════════════════
 
 export class UIRouter extends UIProvider {
+  // gh#815 slice 1 — every route/content swap this element performs (the
+  // fetched-content path in #loadContent AND the content-less data-route-path
+  // swap consumers drive directly via setRoutePath()) rides the shared
+  // view-transition trait. That installs `this.startTransition(callback)`,
+  // which no-ops to a synchronous callback under prefers-reduced-motion or
+  // when the API is unsupported — this element never re-implements either
+  // fallback itself.
+  static traits = [viewTransition];
+
   #cache = new Map();
   #ownCtrl = null;
   #lastPath = null;
@@ -195,7 +205,32 @@ export class UIRouter extends UIProvider {
   navigate(path) { this.#ctrl?.commands.navigate(path); }
   replace(path) { this.#ctrl?.commands.replace(path); }
 
+  // Content-less usage (gh#815 slice 1): no `route.content` to fetch — a
+  // consumer's own CSS reveals children via `router-ui[data-route-path="…"]`
+  // selectors (embedded-app's tab routers do this) and the caller just wants
+  // the path attribute set. Routing that swap through the same trait as
+  // #loadContent gives it the identical no-flash guarantee instead of every
+  // consumer hand-rolling its own setAttribute + reduced-motion check.
+  setRoutePath(path) {
+    if (this.getAttribute('data-route-path') === path) return;
+    this.startTransition(() => { this.setAttribute('data-route-path', path); });
+  }
+
   connected() {
+    // Sensible default (motion tokens, foundation/motion.css) — a consumer
+    // that wants a different feel sets data-view-transition-duration itself;
+    // this only fills the gap when they haven't. Set BEFORE super.connected()
+    // (a no-op here, but PR #819 review: viewTransition.setup() reads these
+    // attributes once at trait-apply time, which happens after connected()
+    // returns in full — keeping the defaults first in program order makes
+    // that dependency obvious at the call site, not just true by accident
+    // of UIElement's connectedCallback ordering).
+    if (!this.hasAttribute('data-view-transition-duration')) {
+      this.setAttribute('data-view-transition-duration', 'var(--a-duration)');
+    }
+    if (!this.hasAttribute('data-view-transition-easing')) {
+      this.setAttribute('data-view-transition-easing', 'var(--a-easing)');
+    }
     super.connected();
     document.addEventListener('click', this.#onClick);
   }
@@ -251,30 +286,56 @@ export class UIRouter extends UIProvider {
       if (nav !== this.#navSeq) return; // superseded while resolving
     }
 
-    this.innerHTML = html;
-    // Re-stamp executable <script> tags so consumer demos can wire data via
-    // imperative JS APIs (the documented `el.items = […]` / `el.invoice = {…}`
-    // pattern used by plan-picker, invoice-detail, list-window et al). HTML
-    // assigned via innerHTML does NOT execute embedded <script> elements per
-    // the HTML spec; we replicate the canonical standalone-wrapper rehydration
-    // pattern by cloning each script + swapping the inert original. `<script
-    // type="application/json" …>` blocks are left untouched so the receiving
-    // custom element's connectedCallback can absorb them (the documented
-    // in-band data pattern; see PlanPicker.#absorbInlinePlansScript et al).
-    for (const oldScript of this.querySelectorAll('script')) {
-      const type = oldScript.getAttribute('type') || '';
-      // Skip data blocks — those are consumed by the runtime, not executed.
-      if (type === 'application/json' || type === 'application/ld+json') continue;
-      const newScript = document.createElement('script');
-      if (type) newScript.type = type;
-      if (oldScript.src) newScript.src = oldScript.src;
-      else newScript.textContent = oldScript.textContent;
-      oldScript.replaceWith(newScript);
-    }
-    this.scrollTo(0, 0);
-    (this.closest('section') || this.parentElement)?.scrollTo(0, 0);
+    // gh#815 slice 1 — the actual pane swap (old content → new) rides the
+    // view-transition trait so the browser cross-fades instead of a bare
+    // synchronous replace. startTransition() already degrades to running
+    // this callback synchronously under prefers-reduced-motion or when the
+    // API is unsupported (view-transition.js owns both fallbacks).
+    //
+    // PR #819 review (CodeRabbit) — on a REAL view transition the browser
+    // runs this callback asynchronously (it has to capture the "old"
+    // snapshot first, which needs a render pass); startTransition() itself
+    // returns before that callback has necessarily run. Two consequences,
+    // both closed here:
+    //   1. the callback itself must re-check `nav` — a newer navigation can
+    //      supersede this one during that async gap, same incident class
+    //      #navSeq exists to prevent (see the class comment above), and
+    //      without this guard a stale callback could paint old content
+    //      OVER a newer navigation's already-painted content.
+    //   2. everything downstream of the paint (setup-module import,
+    //      route-loaded emit) must wait for the paint to actually finish —
+    //      `transition.updateCallbackDone` resolves once the callback's
+    //      return value settles — or the setup module runs against the
+    //      PREVIOUS route's DOM instead of the one it was written for.
+    const transition = this.startTransition(() => {
+      if (nav !== this.#navSeq) return; // superseded — never paint stale content
+      this.innerHTML = html;
+      // Re-stamp executable <script> tags so consumer demos can wire data via
+      // imperative JS APIs (the documented `el.items = […]` / `el.invoice = {…}`
+      // pattern used by plan-picker, invoice-detail, list-window et al). HTML
+      // assigned via innerHTML does NOT execute embedded <script> elements per
+      // the HTML spec; we replicate the canonical standalone-wrapper rehydration
+      // pattern by cloning each script + swapping the inert original. `<script
+      // type="application/json" …>` blocks are left untouched so the receiving
+      // custom element's connectedCallback can absorb them (the documented
+      // in-band data pattern; see PlanPicker.#absorbInlinePlansScript et al).
+      for (const oldScript of this.querySelectorAll('script')) {
+        const type = oldScript.getAttribute('type') || '';
+        // Skip data blocks — those are consumed by the runtime, not executed.
+        if (type === 'application/json' || type === 'application/ld+json') continue;
+        const newScript = document.createElement('script');
+        if (type) newScript.type = type;
+        if (oldScript.src) newScript.src = oldScript.src;
+        else newScript.textContent = oldScript.textContent;
+        oldScript.replaceWith(newScript);
+      }
+      this.scrollTo(0, 0);
+      (this.closest('section') || this.parentElement)?.scrollTo(0, 0);
 
-    if (route.title) document.title = route.title;
+      if (route.title) document.title = route.title;
+    });
+    await transition.updateCallbackDone;
+    if (nav !== this.#navSeq) return; // superseded while the DOM update was in flight
 
     // Auto-import setup module
     if (route.content?.endsWith('.content.html')) {