@moldea.ai/website-ui 1.0.0 → 1.1.0

package/README.md

@@ -7,7 +7,7 @@ The package owns the reusable design tokens, global website primitives, interact
 ## Install after release
 
 ```bash
-pnpm add @moldea.ai/website-ui@1.0.0
+pnpm add @moldea.ai/website-ui@1.1.0
 ```
 
 The package currently supports Astro `7.2.2` and Tailwind CSS `4.3.3` exactly. Import the shared stylesheet once from the website's global stylesheet:
@@ -38,10 +38,11 @@ Every component has a dedicated public subpath:
 - `@moldea.ai/website-ui/breadcrumbs`
 - `@moldea.ai/website-ui/inline-brand-text`
 - `@moldea.ai/website-ui/local-search`
+- `@moldea.ai/website-ui/navigation-progress`
 - `@moldea.ai/website-ui/theme-bootstrap`
 - `@moldea.ai/website-ui/theme-control`
 
-`ThemeBootstrap` belongs in the document head before rendered content. Pass the same app-owned storage key to `ThemeControl`. `BrandLogo` receives app-owned asset paths and labels rather than embedding one site's identity. `LocalSearch` receives app-owned copy, routes, and the generated index URL.
+`ThemeBootstrap` belongs in the document head before rendered content. Pass the same app-owned storage key to `ThemeControl`. Mount `NavigationProgress` once near the start of the document body in websites that use Astro's `ClientRouter`; it reports client navigation preparation without taking ownership of the app's layout. `BrandLogo` receives app-owned asset paths and labels rather than embedding one site's identity. `LocalSearch` receives app-owned copy, routes, and the generated index URL.
 
 ## Development
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moldea.ai/website-ui",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Shared Astro foundations for moldea public websites.",
   "homepage": "https://github.com/moldea-ai/packages/tree/main/projects/website-ui#readme",
   "bugs": {
@@ -65,6 +65,9 @@
     "./local-search": {
       "import": "./src/components/local-search/local-search.component.astro"
     },
+    "./navigation-progress": {
+      "import": "./src/components/navigation-progress/navigation-progress.component.astro"
+    },
     "./theme-bootstrap": {
       "import": "./src/components/theme-bootstrap/theme-bootstrap.component.astro"
     },

package/src/components/navigation-progress/navigation-progress.component.astro

@@ -0,0 +1,93 @@
+<div
+  class="pointer-events-none fixed inset-x-0 top-0 z-[999] h-1 overflow-hidden bg-background"
+  data-navigation-progress
+  role="progressbar"
+  aria-label="Page navigation progress"
+  aria-valuetext="Loading next page"
+  hidden
+>
+  <span
+    class="block h-full w-full origin-left animate-navigation-progress bg-foreground will-change-[transform,opacity]"
+    data-navigation-progress-indicator
+    aria-hidden="true"
+  ></span>
+</div>
+
+<script>
+  import type { TransitionBeforePreparationEvent } from 'astro:transitions/client';
+
+  type INavigationProgressWindow = Window & {
+    __moldeaWebsiteUiNavigationProgressInitialized?: boolean;
+  };
+
+  const pendingPreparations = new Set<symbol>();
+
+  /** Shows or hides every mounted navigation progress indicator. */
+  const setNavigationProgressVisibility = (isVisible: boolean): void => {
+    for (const progress of document.querySelectorAll<HTMLElement>('[data-navigation-progress]')) {
+      progress.hidden = !isVisible;
+    }
+  };
+
+  /** Clears pending navigation state and restores the idle presentation. */
+  const resetNavigationProgress = (): void => {
+    pendingPreparations.clear();
+    setNavigationProgressVisibility(false);
+  };
+
+  /** Completes one preparation without hiding a newer concurrent navigation. */
+  const finishPreparation = (preparationId: symbol): void => {
+    pendingPreparations.delete(preparationId);
+
+    if (pendingPreparations.size === 0) {
+      setNavigationProgressVisibility(false);
+    }
+  };
+
+  /** Starts progress and guarantees cleanup when Astro's loader resolves, rejects, or aborts. */
+  const handleBeforePreparation = (event: TransitionBeforePreparationEvent): void => {
+    const preparationId = Symbol('navigation-preparation');
+    const loader = event.loader;
+
+    pendingPreparations.add(preparationId);
+    setNavigationProgressVisibility(true);
+
+    event.loader = async (): Promise<void> => {
+      try {
+        await loader();
+      } finally {
+        finishPreparation(preparationId);
+      }
+    };
+  };
+
+  /** Provides an idempotent lifecycle cleanup after successful preparation. */
+  const handleAfterPreparation = (): void => {
+    if (pendingPreparations.size === 0) {
+      setNavigationProgressVisibility(false);
+    }
+  };
+
+  const navigationWindow = window as INavigationProgressWindow;
+
+  if (navigationWindow.__moldeaWebsiteUiNavigationProgressInitialized !== true) {
+    navigationWindow.__moldeaWebsiteUiNavigationProgressInitialized = true;
+    document.addEventListener('astro:before-preparation', handleBeforePreparation);
+    document.addEventListener('astro:after-preparation', handleAfterPreparation);
+    document.addEventListener('astro:page-load', resetNavigationProgress);
+    window.addEventListener('pageshow', resetNavigationProgress);
+  }
+
+  resetNavigationProgress();
+</script>
+
+<style>
+  @media (prefers-reduced-motion: reduce) {
+    [data-navigation-progress-indicator] {
+      animation: none;
+      opacity: 1;
+      transform: translateX(8%) scaleX(0.32);
+      will-change: auto;
+    }
+  }
+</style>

package/src/tokens.css

@@ -56,6 +56,25 @@
   --shadow-raised: var(--shadow-raised-value);
   --shadow-surface: var(--shadow-surface-value);
   --shadow-inset: var(--shadow-inset-value);
+
+  --animate-navigation-progress: navigation-progress 1.2s ease-in-out infinite;
+}
+
+@keyframes navigation-progress {
+  0% {
+    opacity: 0;
+    transform: translateX(-100%) scaleX(0.2);
+  }
+
+  40% {
+    opacity: 1;
+    transform: translateX(-20%) scaleX(0.55);
+  }
+
+  100% {
+    opacity: 0;
+    transform: translateX(100%) scaleX(0.2);
+  }
 }
 
 :root {