@byline/host-tanstack-start 2.2.4 → 2.2.6

package/dist/admin-shell/chrome/menu-drawer_module.css

@@ -1,7 +1,8 @@
 :is(.aside-zO2mZZ, .byline-admin-menu-drawer-aside) {
-  border-right: var(--border-width-thin) var(--border-style-solid) var(--gray-50);
+  border-right: var(--border-width-thin) var(--border-style-solid)
+    var(--gray-50);
   background-color: var(--canvas-25);
-  z-index: 15;
+  z-index: 40;
   flex-direction: column;
   transition: all .3s ease-in-out;
   display: flex;

package/dist/admin-shell/chrome/route-progress-bar.d.ts

@@ -0,0 +1 @@
+export declare function RouteProgressBar(): import("react").JSX.Element;

package/dist/admin-shell/chrome/route-progress-bar.js

@@ -0,0 +1,83 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { useRouterState } from "@tanstack/react-router";
+import classnames from "classnames";
+import route_progress_bar_module from "./route-progress-bar.module.js";
+const SHOW_DELAY_MS = 80;
+const MIN_VISIBLE_MS = 250;
+const FINISH_EXIT_MS = 350;
+function RouteProgressBar() {
+    const isNavigating = useRouterState({
+        select: (s)=>s.isLoading || s.isTransitioning
+    });
+    const [phase, setPhase] = useState('idle');
+    const showTimerRef = useRef(null);
+    const finishTimerRef = useRef(null);
+    const resetTimerRef = useRef(null);
+    const visibleSinceRef = useRef(null);
+    useEffect(()=>{
+        const clearShow = ()=>{
+            if (showTimerRef.current) {
+                clearTimeout(showTimerRef.current);
+                showTimerRef.current = null;
+            }
+        };
+        const clearFinish = ()=>{
+            if (finishTimerRef.current) {
+                clearTimeout(finishTimerRef.current);
+                finishTimerRef.current = null;
+            }
+            if (resetTimerRef.current) {
+                clearTimeout(resetTimerRef.current);
+                resetTimerRef.current = null;
+            }
+        };
+        if (isNavigating) {
+            clearFinish();
+            if ('finishing' === phase) {
+                visibleSinceRef.current = performance.now();
+                setPhase('visible');
+                return;
+            }
+            if ('idle' === phase && null === showTimerRef.current) showTimerRef.current = setTimeout(()=>{
+                showTimerRef.current = null;
+                visibleSinceRef.current = performance.now();
+                setPhase('visible');
+            }, SHOW_DELAY_MS);
+            return;
+        }
+        if (null !== showTimerRef.current) return void clearShow();
+        if ('visible' === phase) {
+            const elapsed = performance.now() - (visibleSinceRef.current ?? 0);
+            const wait = Math.max(0, MIN_VISIBLE_MS - elapsed);
+            finishTimerRef.current = setTimeout(()=>{
+                finishTimerRef.current = null;
+                setPhase('finishing');
+                resetTimerRef.current = setTimeout(()=>{
+                    resetTimerRef.current = null;
+                    visibleSinceRef.current = null;
+                    setPhase('idle');
+                }, FINISH_EXIT_MS);
+            }, wait);
+        }
+    }, [
+        isNavigating,
+        phase
+    ]);
+    useEffect(()=>()=>{
+            if (showTimerRef.current) clearTimeout(showTimerRef.current);
+            if (finishTimerRef.current) clearTimeout(finishTimerRef.current);
+            if (resetTimerRef.current) clearTimeout(resetTimerRef.current);
+        }, []);
+    return /*#__PURE__*/ jsx("div", {
+        "aria-hidden": "true",
+        className: classnames('byline-route-progress-bar', route_progress_bar_module.bar, {
+            [route_progress_bar_module.barVisible]: 'visible' === phase,
+            'byline-route-progress-bar-visible': 'visible' === phase,
+            [route_progress_bar_module.barFinishing]: 'finishing' === phase,
+            'byline-route-progress-bar-finishing': 'finishing' === phase
+        })
+    });
+}
+export { RouteProgressBar };

package/dist/admin-shell/chrome/route-progress-bar.module.js

@@ -0,0 +1,7 @@
+import "./route-progress-bar_module.css";
+const route_progress_bar_module = {
+    bar: "bar-KT7kQq",
+    barVisible: "barVisible-qOhb8T",
+    barFinishing: "barFinishing-Ifa7gF"
+};
+export default route_progress_bar_module;

package/dist/admin-shell/chrome/route-progress-bar_module.css

@@ -0,0 +1,25 @@
+:is(.bar-KT7kQq, .byline-route-progress-bar) {
+  z-index: 100;
+  background-color: var(--primary-500);
+  opacity: 0;
+  pointer-events: none;
+  will-change: width, opacity;
+  width: 0%;
+  height: 2px;
+  position: fixed;
+  top: 0;
+  left: 0;
+}
+
+:is(.barVisible-qOhb8T, .byline-route-progress-bar-visible) {
+  opacity: 1;
+  width: 90%;
+  transition: width 8s cubic-bezier(0, .6, .1, 1), opacity .1s linear;
+}
+
+:is(.barFinishing-Ifa7gF, .byline-route-progress-bar-finishing) {
+  opacity: 0;
+  width: 100%;
+  transition: width .18s ease-out, opacity .25s ease-out 80ms;
+}
+

package/dist/routes/create-admin-layout-route.js

@@ -9,6 +9,7 @@ import { DrawerToggle } from "../admin-shell/chrome/drawer-toggle.js";
 import { AdminMenuDrawer } from "../admin-shell/chrome/menu-drawer.js";
 import { AdminMenuProvider } from "../admin-shell/chrome/menu-provider.js";
 import { RouteError, RouteNotFound } from "../admin-shell/chrome/route-error.js";
+import { RouteProgressBar } from "../admin-shell/chrome/route-progress-bar.js";
 import { bylineAdminServices } from "../integrations/byline-admin-services.js";
 import { BylineAiAdminProvider } from "../integrations/byline-ai.js";
 import { bylineFieldServices } from "../integrations/byline-field-services.js";
@@ -40,6 +41,7 @@ function createAdminLayoutRoute(path, opts = {}) {
                     children: /*#__PURE__*/ jsx(BylineAiAdminProvider, {
                         children: /*#__PURE__*/ jsxs(AdminMenuProvider, {
                             children: [
+                                /*#__PURE__*/ jsx(RouteProgressBar, {}),
                                 /*#__PURE__*/ jsx(AdminAppBar, {
                                     user: user
                                 }),

package/package.json

@@ -3,7 +3,7 @@
   "private": false,
   "type": "module",
   "license": "MPL-2.0",
-  "version": "2.2.4",
+  "version": "2.2.6",
   "engines": {
     "node": ">=20.9.0"
   },
@@ -107,12 +107,12 @@
     "react-swipeable": "^7.0.2",
     "uuid": "^14.0.0",
     "zod": "^4.4.3",
-    "@byline/admin": "2.2.4",
-    "@byline/ai": "2.2.4",
-    "@byline/auth": "2.2.4",
-    "@byline/client": "2.2.4",
-    "@byline/core": "2.2.4",
-    "@byline/ui": "2.2.4"
+    "@byline/auth": "2.2.6",
+    "@byline/client": "2.2.6",
+    "@byline/core": "2.2.6",
+    "@byline/ui": "2.2.6",
+    "@byline/ai": "2.2.6",
+    "@byline/admin": "2.2.6"
   },
   "peerDependencies": {
     "@tanstack/react-router": "^1.167.0",

package/src/admin-shell/chrome/menu-drawer.module.css

@@ -16,14 +16,16 @@
 :global(.byline-admin-menu-drawer-aside) {
   display: flex;
   flex-direction: column;
-  border-right: var(--border-width-thin) var(--border-style-solid) var(--gray-50);
+  border-right: var(--border-width-thin) var(--border-style-solid)
+    var(--gray-50);
   background-color: var(--canvas-25);
-  z-index: 15;
+  z-index: 40;
   transition: all 300ms ease-in-out;
 }
 
 :is([data-theme="dark"], :global(.dark)) .aside,
-:is([data-theme="dark"], :global(.dark)) :global(.byline-admin-menu-drawer-aside) {
+:is([data-theme="dark"], :global(.dark))
+  :global(.byline-admin-menu-drawer-aside) {
   border-right-color: var(--canvas-700);
   background-color: var(--canvas-800);
 }
@@ -132,18 +134,27 @@
 }
 
 .nav ul :global(li.menu-item) :is(a, button):disabled,
-:global(.byline-admin-menu-drawer) ul :global(li.menu-item) :is(a, button):disabled {
+:global(.byline-admin-menu-drawer)
+  ul
+  :global(li.menu-item)
+  :is(a, button):disabled {
   cursor: not-allowed;
   opacity: 0.6;
 }
 
 .nav ul :global(li.menu-item.compact) :is(a, button),
-:global(.byline-admin-menu-drawer) ul :global(li.menu-item.compact) :is(a, button) {
+:global(.byline-admin-menu-drawer)
+  ul
+  :global(li.menu-item.compact)
+  :is(a, button) {
   justify-content: center;
 }
 
 .nav ul :global(li.menu-item.active) :is(a, button),
-:global(.byline-admin-menu-drawer) ul :global(li.menu-item.active) :is(a, button) {
+:global(.byline-admin-menu-drawer)
+  ul
+  :global(li.menu-item.active)
+  :is(a, button) {
   color: #111111;
   text-decoration: none;
 }
@@ -156,7 +167,11 @@
   background-color: #dddddd;
 }
 
-:is([data-theme="dark"], :global(.dark)) .nav ul :global(li.menu-item) :is(a, button),
+:is([data-theme="dark"], :global(.dark))
+  .nav
+  ul
+  :global(li.menu-item)
+  :is(a, button),
 :is([data-theme="dark"], :global(.dark))
   :global(.byline-admin-menu-drawer)
   ul
@@ -165,7 +180,11 @@
   color: #dddddd;
 }
 
-:is([data-theme="dark"], :global(.dark)) .nav ul :global(li.menu-item.active) :is(a, button),
+:is([data-theme="dark"], :global(.dark))
+  .nav
+  ul
+  :global(li.menu-item.active)
+  :is(a, button),
 :is([data-theme="dark"], :global(.dark))
   :global(.byline-admin-menu-drawer)
   ul

package/src/admin-shell/chrome/route-progress-bar.module.css

@@ -0,0 +1,41 @@
+/**
+ * RouteProgressBar — top-of-viewport indeterminate progress indicator for
+ * admin route transitions.
+ *
+ * Override handles:
+ *   .byline-route-progress-bar            — base bar element
+ *   .byline-route-progress-bar-visible    — bar is growing (navigation in flight)
+ *   .byline-route-progress-bar-finishing  — bar is completing + fading out
+ */
+
+.bar,
+:global(.byline-route-progress-bar) {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 100;
+  height: 2px;
+  width: 0%;
+  background-color: var(--primary-500);
+  opacity: 0;
+  pointer-events: none;
+  will-change: width, opacity;
+}
+
+.barVisible,
+:global(.byline-route-progress-bar-visible) {
+  width: 90%;
+  opacity: 1;
+  transition:
+    width 8s cubic-bezier(0, 0.6, 0.1, 1),
+    opacity 100ms linear;
+}
+
+.barFinishing,
+:global(.byline-route-progress-bar-finishing) {
+  width: 100%;
+  opacity: 0;
+  transition:
+    width 180ms ease-out,
+    opacity 250ms ease-out 80ms;
+}

package/src/admin-shell/chrome/route-progress-bar.tsx

@@ -0,0 +1,128 @@
+'use client'
+
+/**
+ * This Source Code is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) Infonomic Company Limited
+ */
+
+/**
+ * RouteProgressBar — global navigation progress indicator for the admin shell.
+ *
+ * Driven by TanStack Router's reactive state via `useRouterState`. The bar
+ * appears across the top of the viewport whenever a route transition or
+ * loader is in flight.
+ *
+ * Timing:
+ *   - SHOW_DELAY_MS  — debounce before the bar appears. Sub-debounce
+ *                      navigations (typical instant client-side transitions)
+ *                      never show the bar at all.
+ *   - MIN_VISIBLE_MS — once shown, the bar remains visible for at least this
+ *                      long before the completion animation, so it never
+ *                      flickers as a single-frame artefact.
+ */
+
+import { useEffect, useRef, useState } from 'react'
+import { useRouterState } from '@tanstack/react-router'
+
+import cx from 'classnames'
+
+import styles from './route-progress-bar.module.css'
+
+const SHOW_DELAY_MS = 80
+const MIN_VISIBLE_MS = 250
+const FINISH_EXIT_MS = 350
+
+type Phase = 'idle' | 'visible' | 'finishing'
+
+export function RouteProgressBar() {
+  const isNavigating = useRouterState({
+    select: (s) => s.isLoading || s.isTransitioning,
+  })
+  const [phase, setPhase] = useState<Phase>('idle')
+  const showTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+  const finishTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+  const resetTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+  const visibleSinceRef = useRef<number | null>(null)
+
+  useEffect(() => {
+    const clearShow = () => {
+      if (showTimerRef.current) {
+        clearTimeout(showTimerRef.current)
+        showTimerRef.current = null
+      }
+    }
+    const clearFinish = () => {
+      if (finishTimerRef.current) {
+        clearTimeout(finishTimerRef.current)
+        finishTimerRef.current = null
+      }
+      if (resetTimerRef.current) {
+        clearTimeout(resetTimerRef.current)
+        resetTimerRef.current = null
+      }
+    }
+
+    if (isNavigating) {
+      // A new navigation started — abort any pending exit animation.
+      clearFinish()
+
+      if (phase === 'finishing') {
+        // Re-grab the bar mid-fade.
+        visibleSinceRef.current = performance.now()
+        setPhase('visible')
+        return
+      }
+      if (phase === 'idle' && showTimerRef.current === null) {
+        showTimerRef.current = setTimeout(() => {
+          showTimerRef.current = null
+          visibleSinceRef.current = performance.now()
+          setPhase('visible')
+        }, SHOW_DELAY_MS)
+      }
+      return
+    }
+
+    // Navigation finished.
+    if (showTimerRef.current !== null) {
+      // Still inside the debounce window — bar never appeared. No-op.
+      clearShow()
+      return
+    }
+    if (phase === 'visible') {
+      const elapsed = performance.now() - (visibleSinceRef.current ?? 0)
+      const wait = Math.max(0, MIN_VISIBLE_MS - elapsed)
+      finishTimerRef.current = setTimeout(() => {
+        finishTimerRef.current = null
+        setPhase('finishing')
+        resetTimerRef.current = setTimeout(() => {
+          resetTimerRef.current = null
+          visibleSinceRef.current = null
+          setPhase('idle')
+        }, FINISH_EXIT_MS)
+      }, wait)
+    }
+  }, [isNavigating, phase])
+
+  useEffect(() => {
+    return () => {
+      if (showTimerRef.current) clearTimeout(showTimerRef.current)
+      if (finishTimerRef.current) clearTimeout(finishTimerRef.current)
+      if (resetTimerRef.current) clearTimeout(resetTimerRef.current)
+    }
+  }, [])
+
+  return (
+    <div
+      aria-hidden="true"
+      className={cx('byline-route-progress-bar', styles.bar, {
+        [styles.barVisible]: phase === 'visible',
+        'byline-route-progress-bar-visible': phase === 'visible',
+        [styles.barFinishing]: phase === 'finishing',
+        'byline-route-progress-bar-finishing': phase === 'finishing',
+      })}
+    />
+  )
+}

package/src/routes/create-admin-layout-route.tsx

@@ -31,6 +31,7 @@ import { DrawerToggle } from '../admin-shell/chrome/drawer-toggle.js'
 import { AdminMenuDrawer } from '../admin-shell/chrome/menu-drawer.js'
 import { AdminMenuProvider } from '../admin-shell/chrome/menu-provider.js'
 import { RouteError, RouteNotFound } from '../admin-shell/chrome/route-error.js'
+import { RouteProgressBar } from '../admin-shell/chrome/route-progress-bar.js'
 import { bylineAdminServices } from '../integrations/byline-admin-services.js'
 import { BylineAiAdminProvider } from '../integrations/byline-ai.js'
 import { bylineFieldServices } from '../integrations/byline-field-services.js'
@@ -70,6 +71,7 @@ export function createAdminLayoutRoute(path: string, opts: AdminLayoutOpts = {})
           <BylineFieldServicesProvider services={bylineFieldServices}>
             <BylineAiAdminProvider>
               <AdminMenuProvider>
+                <RouteProgressBar />
                 <AdminAppBar user={user} />
                 <main className={cx('byline-admin-layout-main', layoutStyles.main)}>
                   <DrawerToggle />