@adia-ai/web-components 0.8.31 → 0.8.32

package/core/icons-phosphor.js

@@ -37,36 +37,48 @@
  *   });
  *
  * Brace-list globs are statically analyzed; only the named files are
- * emitted as chunks (or inlined when `eager: true`). Use the `../node_modules/...`
- * form shown here, not `/node_modules/...` — see "Why the glob is entry-relative,
- * not root-relative" below; the same reasoning applies to a hand-written
- * scoped glob as to the auto-discovery globs this file installs by default.
+ * emitted as chunks (or inlined when `eager: true`). Better yet, in your OWN
+ * source you can skip globs entirely and use plain bare-specifier `?raw`
+ * imports (see `icons.js`'s JSDoc, loading path 3) — module resolution finds
+ * the package under any layout. If you do hand-write a glob, note it resolves
+ * by literal path join from YOUR file, not module resolution — see "Why there
+ * are three candidate globs" below.
  *
- * ## Why the glob is entry-relative, not root-relative
+ * ## Why there are three candidate globs, not one (gh#287 · gh#340 · gh#786)
  *
  * `import.meta.glob` only accepts a small set of static forms (`/`-rooted,
  * `./`, `../`, `**\/`, or a `#`-subpath with a literal `*`), and each resolves
  * via a literal path join, not module resolution (confirmed against Vite 8's
- * `toAbsoluteGlob`, gh#287). A `/`-rooted glob joins to Vite's CONFIGURED
- * PROJECT ROOT — for a consumer app, that only reaches `@phosphor-icons/core`
- * when it's ALSO hoisted to that exact root. Under pnpm's default
- * (non-hoisted, symlinked) linking, a package you depend on only
- * TRANSITIVELY — `@phosphor-icons/core` is a dependency of THIS package, not
- * necessarily your app's — is linked only inside that package's own
- * resolution scope, never flattened into your app's top-level `node_modules`.
- * A root-rooted glob then silently matches zero files.
- *
- * A `../`-prefixed glob instead joins to THIS FILE'S OWN directory
- * (`core/`), one level inside `@adia-ai/web-components` — so `../node_modules`
- * reaches `@adia-ai/web-components`'s own local `node_modules`, which pnpm
- * always populates with a package's own direct dependencies (a symlink into
- * the pnpm store) regardless of whether your app also hoists them. This
- * holds for the published package too — `core/icons-phosphor.js` ships at
- * the same one-level depth (see `package.json`'s `files` field). Verified
- * empirically against a real hoisting-gap install (a pnpm workspace where
- * `@phosphor-icons/core` is declared only by a nested package, not the
- * workspace root): the root-rooted form matches zero files; the
- * entry-relative form matches the full set with real content.
+ * `toAbsoluteGlob`, gh#287). No single literal path exists that reaches
+ * `@phosphor-icons/core` under every package manager's `node_modules` layout,
+ * so this file probes THREE entry-relative candidates (resolved from this
+ * file's own directory, `core/`, one level inside `@adia-ai/web-components` —
+ * the published package ships at the same depth) and installs the first that
+ * matches anything:
+ *
+ *   1. `../node_modules/@phosphor-icons/core/…` — pnpm's nested layout.
+ *      pnpm always populates a package's OWN local `node_modules` with its
+ *      direct dependencies (a symlink into the store), regardless of what the
+ *      consumer app hoists. gh#287's original fix; still first preference.
+ *   2. `../../../@phosphor-icons/core/…` — npm / yarn-classic hoisting in a
+ *      consumer install. `core/` sits at
+ *      `node_modules/@adia-ai/web-components/core/`, so three levels up IS
+ *      the consumer's (or workspace root's) `node_modules`, where hoisting
+ *      flattens transitive deps as siblings. This is the layout gh#786's
+ *      npm-workspace consumer has — candidate 1 is structurally guaranteed
+ *      to match zero files there.
+ *   3. `../../../node_modules/@phosphor-icons/core/…` — THIS repo's own
+ *      checkout when `node_modules` is npm-shaped (gh#340: `npm ci` /
+ *      `npm install` re-shape it). `core/` sits at
+ *      `packages/web-components/core/`, so three levels up is the repo root
+ *      and the hoisted copy lives in its `node_modules/`.
+ *
+ * A `/`-rooted glob is NOT among the candidates: it joins to Vite's
+ * CONFIGURED PROJECT ROOT, which only reaches `@phosphor-icons/core` when
+ * it happens to be hoisted to that exact root — the original gh#287 failure.
+ * Globs that match zero files are free: `import.meta.glob` returns `{}`
+ * without touching the filesystem at runtime, so the losing candidates cost
+ * nothing.
  *
  * ## Vite dep-optimizer pre-bundling (gh#287, second independent failure mode)
  *
@@ -104,19 +116,50 @@
  *     to the manifest fetch below
  */
 
-import { installIconLoaders } from './icons.js';
+import { installIconLoaders, iconRegistryUnwired } from './icons.js';
 
-let weightModules;
+let candidates;
 let hasViteGlob = false;
 try {
-  weightModules = {
-    regular: import.meta.glob('../node_modules/@phosphor-icons/core/assets/regular/*.svg', { query: '?raw', import: 'default' }),
-    thin:    import.meta.glob('../node_modules/@phosphor-icons/core/assets/thin/*.svg',    { query: '?raw', import: 'default' }),
-    light:   import.meta.glob('../node_modules/@phosphor-icons/core/assets/light/*.svg',   { query: '?raw', import: 'default' }),
-    bold:    import.meta.glob('../node_modules/@phosphor-icons/core/assets/bold/*.svg',    { query: '?raw', import: 'default' }),
-    fill:    import.meta.glob('../node_modules/@phosphor-icons/core/assets/fill/*.svg',    { query: '?raw', import: 'default' }),
-    duotone: import.meta.glob('../node_modules/@phosphor-icons/core/assets/duotone/*.svg', { query: '?raw', import: 'default' }),
-  };
+  // Three node_modules layouts, probed in order — see the JSDoc section
+  // "Why there are three candidate globs" above. Every glob string and its
+  // options object must stay a static literal (Vite's macro constraint), so
+  // the 18 calls can't be generated from a loop.
+  candidates = [
+    {
+      layout: 'pnpm-nested `../node_modules/@phosphor-icons/core`',
+      weights: {
+        regular: import.meta.glob('../node_modules/@phosphor-icons/core/assets/regular/*.svg', { query: '?raw', import: 'default' }),
+        thin:    import.meta.glob('../node_modules/@phosphor-icons/core/assets/thin/*.svg',    { query: '?raw', import: 'default' }),
+        light:   import.meta.glob('../node_modules/@phosphor-icons/core/assets/light/*.svg',   { query: '?raw', import: 'default' }),
+        bold:    import.meta.glob('../node_modules/@phosphor-icons/core/assets/bold/*.svg',    { query: '?raw', import: 'default' }),
+        fill:    import.meta.glob('../node_modules/@phosphor-icons/core/assets/fill/*.svg',    { query: '?raw', import: 'default' }),
+        duotone: import.meta.glob('../node_modules/@phosphor-icons/core/assets/duotone/*.svg', { query: '?raw', import: 'default' }),
+      },
+    },
+    {
+      layout: 'npm/yarn-hoisted sibling `../../../@phosphor-icons/core`',
+      weights: {
+        regular: import.meta.glob('../../../@phosphor-icons/core/assets/regular/*.svg', { query: '?raw', import: 'default' }),
+        thin:    import.meta.glob('../../../@phosphor-icons/core/assets/thin/*.svg',    { query: '?raw', import: 'default' }),
+        light:   import.meta.glob('../../../@phosphor-icons/core/assets/light/*.svg',   { query: '?raw', import: 'default' }),
+        bold:    import.meta.glob('../../../@phosphor-icons/core/assets/bold/*.svg',    { query: '?raw', import: 'default' }),
+        fill:    import.meta.glob('../../../@phosphor-icons/core/assets/fill/*.svg',    { query: '?raw', import: 'default' }),
+        duotone: import.meta.glob('../../../@phosphor-icons/core/assets/duotone/*.svg', { query: '?raw', import: 'default' }),
+      },
+    },
+    {
+      layout: 'workspace-root `../../../node_modules/@phosphor-icons/core` (npm-shaped monorepo checkout)',
+      weights: {
+        regular: import.meta.glob('../../../node_modules/@phosphor-icons/core/assets/regular/*.svg', { query: '?raw', import: 'default' }),
+        thin:    import.meta.glob('../../../node_modules/@phosphor-icons/core/assets/thin/*.svg',    { query: '?raw', import: 'default' }),
+        light:   import.meta.glob('../../../node_modules/@phosphor-icons/core/assets/light/*.svg',   { query: '?raw', import: 'default' }),
+        bold:    import.meta.glob('../../../node_modules/@phosphor-icons/core/assets/bold/*.svg',    { query: '?raw', import: 'default' }),
+        fill:    import.meta.glob('../../../node_modules/@phosphor-icons/core/assets/fill/*.svg',    { query: '?raw', import: 'default' }),
+        duotone: import.meta.glob('../../../node_modules/@phosphor-icons/core/assets/duotone/*.svg', { query: '?raw', import: 'default' }),
+      },
+    },
+  ];
   hasViteGlob = true;
 } catch (err) {
   // FB-08: distinguish "no Vite at all" (expected, ReferenceError) from
@@ -135,45 +178,60 @@ try {
 }
 
 if (hasViteGlob) {
-  // FB-08: detect the silent-empty-glob case — `import.meta.glob` returns
-  // `{}` when zero files match (it does NOT throw). The previous behavior
-  // installed empty per-weight maps and the consumer saw an empty icon
-  // registry with no diagnostic. gh#287 names two independent causes, both
-  // producing this same empty-map symptom:
-  //   1. A packaging/bundler step re-nested this file at a different depth
-  //      than it ships at (breaks the `../`-relative glob's one-level-inside
-  //      assumption — see "Why the glob is entry-relative" above), a Yarn
-  //      Berry PnP install (virtual/zip filesystem), or @phosphor-icons/core
-  //      missing entirely.
-  //   2. Vite's dev-server `optimizeDeps` pre-bundled this package (see
-  //      "Vite dep-optimizer pre-bundling" above) — confirmed empirically to
-  //      transform the glob into a literal empty object, no exception.
-  const totalIcons = Object.values(weightModules).reduce(
+  // Install the first candidate layout whose globs matched anything.
+  // `import.meta.glob` returns `{}` when zero files match (it does NOT
+  // throw), so the losing layouts cost nothing.
+  const candidateTotal = (c) => Object.values(c.weights).reduce(
     (sum, weight) => sum + Object.keys(weight).length, 0
   );
-  if (totalIcons === 0) {
-    console.warn(
-      `[icons-phosphor] No Phosphor icons matched the auto-install glob ` +
-      `\`../node_modules/@phosphor-icons/core/assets/<weight>/*.svg\` (resolved ` +
-      `relative to this file's own directory — hoisting-safe under pnpm, gh#287). ` +
-      `Two known causes: (1) this package got pre-bundled by Vite's dev-server ` +
-      `optimizeDeps, which empties the glob — add it to optimizeDeps.exclude in ` +
-      `your Vite config:\n` +
-      `  optimizeDeps: { exclude: ['@adia-ai/web-components', '@adia-ai/web-modules'] }\n` +
-      `(2) @phosphor-icons/core is missing, or this file was re-nested to a ` +
-      `different depth by a packaging step (Yarn PnP, a custom bundler). If ` +
-      `neither fix applies, install loaders manually instead:\n` +
-      `  import { installIconLoaders } from '@adia-ai/web-components/core/icons';\n` +
-      `  import caretRight from '@phosphor-icons/core/assets/regular/caret-right.svg?raw';\n` +
-      `  installIconLoaders({\n` +
-      `    regular: {\n` +
-      `      '/node_modules/@phosphor-icons/core/assets/regular/caret-right.svg': caretRight,\n` +
-      `    },\n` +
-      `  });\n` +
-      `See the JSDoc header of icons-phosphor.js for the full recipe.`
-    );
+  const matched = candidates.find(c => candidateTotal(c) > 0);
+  if (matched) {
+    installIconLoaders(matched.weights);
+  } else {
+    // Every candidate matched zero files. Two possibilities remain, and
+    // only one is a failure:
+    //   - The consumer registers icons manually (installIconLoaders /
+    //     registerIcon) and never wanted the auto-install path — gh#786's
+    //     reporter. Their registration runs later in the same startup, so
+    //     defer the verdict and stay silent once the registry is wired.
+    //   - The registry genuinely ends up empty: Vite's dev-server
+    //     optimizeDeps pre-bundled this package (esbuild rewrites the globs
+    //     to empty literals, gh#287), @phosphor-icons/core is missing, or
+    //     the install layout is one this file doesn't probe (e.g. Yarn PnP's
+    //     virtual filesystem). Zero icons will render — fail loudly, once,
+    //     naming the fix (gh#340's acceptance).
+    // Deliberately NOT calling installIconLoaders with empty maps here:
+    // that would mark the registry "ready", suppressing <icon-ui>'s own
+    // unwired-registry diagnostic and clobbering nothing-yet for manual
+    // consumers.
+    setTimeout(() => {
+      if (!iconRegistryUnwired()) return; // manual registration landed — working setup, no noise
+      console.error(
+        `[icons-phosphor] Zero-config icon auto-install failed: no Phosphor ` +
+        `SVGs found under any known node_modules layout (probed pnpm-nested ` +
+        `\`../node_modules/\`, npm/yarn-hoisted \`../../../\`, and workspace-root ` +
+        `\`../../../node_modules/\` — all relative to icons-phosphor.js), and no ` +
+        `icons were registered manually. Every <icon-ui> will render blank. ` +
+        `Fixes, most likely first:\n` +
+        `(1) Vite dev-server pre-bundling emptied the globs — exclude this ` +
+        `package from optimizeDeps in vite.config.js:\n` +
+        `  optimizeDeps: { exclude: ['@adia-ai/web-components', '@adia-ai/web-modules'] }\n` +
+        `(2) @phosphor-icons/core is not installed, or your package manager ` +
+        `lays out node_modules somewhere this file doesn't probe (Yarn PnP is ` +
+        `not supported by the zero-config path).\n` +
+        `(3) Register the icons you use manually — this also silences this ` +
+        `error permanently:\n` +
+        `  import { installIconLoaders } from '@adia-ai/web-components/core/icons';\n` +
+        `  import caretRight from '@phosphor-icons/core/assets/regular/caret-right.svg?raw';\n` +
+        `  installIconLoaders({\n` +
+        `    regular: {\n` +
+        `      '/node_modules/@phosphor-icons/core/assets/regular/caret-right.svg': caretRight,\n` +
+        `    },\n` +
+        `  });\n` +
+        `See the JSDoc header of icons-phosphor.js for the full recipe (gh#786).`
+      );
+    }, 0);
   }
-  installIconLoaders(weightModules);
 } else {
   // Non-Vite static serving: fetch the build-time manifest in the
   // background. No top-level await — module finishes loading immediately;

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')) {