From de6889cd629fbfc43cd01cb41130114a88ee3629 Mon Sep 17 00:00:00 2001
From: Alex Sorafumo <alex@yuion.net>
Date: Fri, 13 Nov 2026 18:22:37 +1100
Subject: [PATCH 1/5] feat(ui): pages crossfade on navigation, and the active
 tab and links slide to the new one

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/app/admin/admin.component.ts     |  2 +
 src/app/app.config.ts                | 26 +++++++++++
 src/app/ui/item-shell.component.ts   |  1 +
 src/app/ui/item-tablist.component.ts | 13 +++++-
 src/styles.css                       | 68 +++++++++++++++++++++++++++-
 5 files changed, 107 insertions(+), 3 deletions(-)

diff --git a/src/app/admin/admin.component.ts b/src/app/admin/admin.component.ts
index 272a7f916..1dd2bf011 100644
--- a/src/app/admin/admin.component.ts
+++ b/src/app/admin/admin.component.ts
@@ -22,6 +22,7 @@ import { TranslatePipe } from '../ui/translate.pipe';
             <div class="flex h-full w-px flex-1 flex-col overflow-hidden">
                 <div class="z-0 flex h-1/2 flex-1">
                     <nav
+                        admin-nav
                         class="border-base-200 relative z-10 h-full space-y-2 overflow-auto border-r px-2 pt-10 sm:w-56 sm:py-4"
                         [attr.aria-label]="'COMMON.MANAGE' | translate"
                     >
@@ -47,6 +48,7 @@ import { TranslatePipe } from '../ui/translate.pipe';
                     <main
                         id="main-content"
                         tabindex="-1"
+                        page-transition
                         class="relative z-0 h-full w-1/2 flex-1 overflow-auto outline-none"
                     >
                         <router-outlet />
diff --git a/src/app/app.config.ts b/src/app/app.config.ts
index 248bda3fb..b2b74b66e 100644
--- a/src/app/app.config.ts
+++ b/src/app/app.config.ts
@@ -6,15 +6,31 @@ import {
     provideZonelessChangeDetection,
 } from '@angular/core';
 import {
+    ActivatedRouteSnapshot,
     provideRouter,
     withHashLocation,
     withNavigationErrorHandler,
+    withViewTransitions,
 } from '@angular/router';
 import { provideServiceWorker } from '@angular/service-worker';
 import { appRoutes } from './app.routes';
 import { reloadApplicationOnChunkLoadError } from './common/application';
 import { SentryReportingErrorHandler } from './common/sentry';
 
+/** Upper bound of route levels that `routePath` walks */
+const MAX_ROUTE_DEPTH = 32;
+
+/** Path of a router state without its query params, e.g. `systems/sys-1/about` */
+function routePath(route: ActivatedRouteSnapshot) {
+    let leaf = route;
+    for (let i = 0; leaf.firstChild && i < MAX_ROUTE_DEPTH; i++) {
+        leaf = leaf.firstChild;
+    }
+    return leaf.pathFromRoot
+        .flatMap((level) => level.url.map((segment) => segment.path))
+        .join('/');
+}
+
 export const appConfig: ApplicationConfig = {
     providers: [
         provideBrowserGlobalErrorListeners(),
@@ -26,6 +42,16 @@ export const appConfig: ApplicationConfig = {
             withNavigationErrorHandler((event) =>
                 reloadApplicationOnChunkLoadError(event.error),
             ),
+            // Styles for the transitions are in styles.css. A change of
+            // query params only, e.g. a filter, does not animate.
+            withViewTransitions({
+                skipInitialTransition: true,
+                onViewTransitionCreated: ({ transition, from, to }) => {
+                    if (routePath(from) === routePath(to)) {
+                        transition.skipTransition();
+                    }
+                },
+            }),
         ),
         provideServiceWorker('ngsw-worker.js', {
             enabled: !isDevMode(), // Disable in development, enable in production
diff --git a/src/app/ui/item-shell.component.ts b/src/app/ui/item-shell.component.ts
index 2dbfd543e..d224ec048 100644
--- a/src/app/ui/item-shell.component.ts
+++ b/src/app/ui/item-shell.component.ts
@@ -107,6 +107,7 @@ function mediaQuery(query: string) {
                                     />
                                     <div
                                         #el
+                                        page-transition
                                         class="relative z-0 h-1/2 w-full flex-1 overflow-auto"
                                         (scroll)="scroll.set(el.scrollTop)"
                                     >
diff --git a/src/app/ui/item-tablist.component.ts b/src/app/ui/item-tablist.component.ts
index 019a7fb6e..4a135ba86 100644
--- a/src/app/ui/item-tablist.component.ts
+++ b/src/app/ui/item-tablist.component.ts
@@ -66,6 +66,8 @@ export interface ItemTab {
                         #rla="routerLinkActive"
                         [attr.aria-current]="rla.isActive ? 'page' : null"
                     >
+                        <!-- Moves to the new tab in the page transition -->
+                        <span indicator></span>
                         <icon class="text-xl" [icon]="link.icon" />&nbsp;
                         <div class="name">{{ link.name }}&nbsp;</div>
                         @if (link.count || link.count === 0) {
@@ -123,6 +125,7 @@ export interface ItemTab {
             }
 
             a {
+                position: relative;
                 display: flex;
                 flex: 1 0 auto;
                 align-items: center;
@@ -133,7 +136,6 @@ export interface ItemTab {
                 letter-spacing: 0.09em;
                 white-space: nowrap;
                 color: var(--base-content);
-                border-bottom: 2px solid transparent;
             }
 
             a:hover {
@@ -146,7 +148,14 @@ export interface ItemTab {
 
             a.active {
                 color: var(--secondary);
-                border-bottom-color: var(--secondary);
+            }
+
+            a.active [indicator] {
+                position: absolute;
+                inset: auto 0 0;
+                height: 2px;
+                background-color: var(--secondary);
+                view-transition-name: tab-indicator;
             }
         `,
     ],
diff --git a/src/styles.css b/src/styles.css
index 1770ed41e..83e130194 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -111,7 +111,8 @@
     --radius-md: 6px;
     --radius-lg: 8px;
     --motion-snap: 120ms cubic-bezier(0.8, -0.4, 0.5, 1);
-    --motion-enter: 160ms cubic-bezier(0.24, 1, 0.32, 1);
+    --ease-enter: cubic-bezier(0.24, 1, 0.32, 1);
+    --motion-enter: 160ms var(--ease-enter);
     /* Solid, unblurred shadows of raised surfaces */
     --shadow-high:
         0 4px 0 2px rgb(16 16 48 / 0.03), 0 1px 0 1px rgb(16 16 48 / 0.03);
@@ -1864,6 +1865,71 @@ a[icon] {
     opacity: 1;
 }
 
+/* Page transitions. The router starts a view transition on each navigation
+   (withViewTransitions in app.config.ts). The rest of the window changes at
+   once. Only these parts animate:
+   - `[page-transition]`: the routed content. It crossfades.
+   - the active tab, admin page and main menu link. They move to the new link. */
+[page-transition] {
+    view-transition-name: page;
+}
+
+[admin-nav] a[aria-current='page'] {
+    view-transition-name: admin-nav-active;
+}
+
+[sidebar-menu] a[aria-current='page'] {
+    view-transition-name: menu-active;
+}
+
+::view-transition-group(root),
+::view-transition-old(root),
+::view-transition-new(root) {
+    animation: none;
+}
+
+/* The page area can change size, e.g. from admin to systems. Show the
+   snapshots at their own size, so they do not stretch. */
+::view-transition-group(page) {
+    animation: none;
+}
+
+::view-transition-old(page),
+::view-transition-new(page) {
+    height: 100%;
+    object-fit: none;
+    object-position: top left;
+}
+
+::view-transition-old(page) {
+    animation: fade-out 80ms ease-in both;
+}
+
+::view-transition-new(page) {
+    animation: fade-in var(--motion-enter) both;
+}
+
+::view-transition-group(tab-indicator),
+::view-transition-group(admin-nav-active),
+::view-transition-group(menu-active) {
+    animation-duration: 200ms;
+    animation-timing-function: var(--ease-enter);
+}
+
+@media (prefers-reduced-motion: reduce) {
+    ::view-transition-group(*),
+    ::view-transition-old(*),
+    ::view-transition-new(*) {
+        animation: none !important;
+    }
+}
+
+@keyframes fade-out {
+    to {
+        opacity: 0;
+    }
+}
+
 /* Keyframe animations for enter transitions */
 @keyframes fade-in {
     from {

From b3a32476db7f50ddb768d6f9323bb1c09ce72f5e Mon Sep 17 00:00:00 2001
From: Alex Sorafumo <alex@yuion.net>
Date: Fri, 13 Nov 2026 18:22:37 +1100
Subject: [PATCH 2/5] feat(ui): menus, select panels and the search overlay
 animate in

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/app/ui/item-selection.component.ts |  4 ++--
 src/styles.css                         | 17 ++++++++++++++++-
 2 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/src/app/ui/item-selection.component.ts b/src/app/ui/item-selection.component.ts
index 44fc643f6..cdd3d590c 100644
--- a/src/app/ui/item-selection.component.ts
+++ b/src/app/ui/item-selection.component.ts
@@ -49,11 +49,11 @@ import { VirtualScrollComponent } from './virtual-scroll.component';
         </div>
         @if (show_view()) {
             <button
-                class="bg-base-100/80 absolute inset-0"
+                class="animate-fade-in bg-base-100/80 absolute inset-0"
                 (click)="close()"
             >
                 <button
-                    class="bg-base-100 border-base-300 absolute top-2 left-1/2 flex w-lg max-w-[calc(100%-1rem)] -translate-x-1/2 flex-col space-y-2 overflow-hidden rounded-sm border shadow-sm"
+                    class="animate-dialog-enter bg-base-100 border-base-300 absolute top-2 left-1/2 flex w-lg max-w-[calc(100%-1rem)] -translate-x-1/2 flex-col space-y-2 overflow-hidden rounded-sm border shadow-sm"
                     (click)="$event.stopPropagation()"
                 >
                     <div
diff --git a/src/styles.css b/src/styles.css
index 83e130194..9cd1f7bca 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -1013,6 +1013,7 @@ app-select {
     color: var(--base-content);
     box-shadow: 0 2px 0 var(--base-300);
     font-size: 0.875rem;
+    animation: dialog-enter var(--motion-enter);
 }
 
 .select-panel {
@@ -1322,7 +1323,9 @@ input[type='checkbox'][role='switch'] {
         animation-duration: 4s;
     }
 
-    .cdk-dialog-container {
+    .cdk-dialog-container,
+    .select-panel,
+    .cdk-menu {
         animation: none;
     }
 }
@@ -1970,10 +1973,22 @@ a[icon] {
     animation: fade-in-scale 200ms ease-out;
 }
 
+/* The same enter motion as dialogs, for panels that are not CDK dialogs */
+#placeos .animate-dialog-enter {
+    animation: dialog-enter var(--motion-enter);
+}
+
 #placeos .animate-slide-in-up {
     animation: slide-in-up 200ms ease-out;
 }
 
+/* Fades stay. Motion that moves or scales stops. */
+@media (prefers-reduced-motion: reduce) {
+    #placeos .animate-dialog-enter {
+        animation: none;
+    }
+}
+
 /* Slide animations */
 #placeos .slide-up {
     transform: translateY(100%);

From b78316317002b6ff1494139170844632a4ea8628 Mon Sep 17 00:00:00 2001
From: Alex Sorafumo <alex@yuion.net>
Date: Fri, 13 Nov 2026 18:22:37 +1100
Subject: [PATCH 3/5] feat(ui): item details fade in over the skeleton, and the
 mobile menu slides in

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/app/ui/item-shell.component.ts   |  7 ++++---
 src/app/ui/sidebar-menu.component.ts | 14 ++++++++++++++
 2 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/src/app/ui/item-shell.component.ts b/src/app/ui/item-shell.component.ts
index d224ec048..f93e31178 100644
--- a/src/app/ui/item-shell.component.ts
+++ b/src/app/ui/item-shell.component.ts
@@ -90,9 +90,10 @@ function mediaQuery(query: string) {
                             @if (loading()) {
                                 <item-details-skeleton />
                             } @else if (display_item()?.id) {
-                                <!-- Tabs and menus load once an item shows -->
+                                <!-- Tabs and menus load once an item shows. They fade in over the skeleton. -->
                                 @defer (on immediate) {
                                     <item-details
+                                        class="animate-fade-in"
                                         [item]="display_item()"
                                         [extra_actions]="extra_actions()"
                                         [type]="
@@ -103,12 +104,12 @@ function mediaQuery(query: string) {
                                         [base]="name()"
                                         [tabs]="tabs()"
                                         [scrolled]="scroll() > 0"
-                                        class="z-10"
+                                        class="animate-fade-in z-10"
                                     />
                                     <div
                                         #el
                                         page-transition
-                                        class="relative z-0 h-1/2 w-full flex-1 overflow-auto"
+                                        class="animate-fade-in relative z-0 h-1/2 w-full flex-1 overflow-auto"
                                         (scroll)="scroll.set(el.scrollTop)"
                                     >
                                         <router-outlet />
diff --git a/src/app/ui/sidebar-menu.component.ts b/src/app/ui/sidebar-menu.component.ts
index 6b747986c..80edea0ab 100644
--- a/src/app/ui/sidebar-menu.component.ts
+++ b/src/app/ui/sidebar-menu.component.ts
@@ -46,6 +46,7 @@ import { UserMenuTooltipComponent } from './user-menu-tooltip.component';
             [class.compact]="compact()"
             [class.sm:w-52]="!compact()"
             [class.!flex]="open()"
+            [class.open]="open()"
             [class.pointer-events-auto!]="open()"
         >
             <nav
@@ -267,6 +268,19 @@ import { UserMenuTooltipComponent } from './user-menu-tooltip.component';
                     width: 4.5rem;
                 }
             }
+
+            /* On small screens the menu covers the page. It slides in when it opens. */
+            @media (max-width: 39.99rem) and (prefers-reduced-motion: no-preference) {
+                .open {
+                    animation: menu-enter 200ms var(--ease-enter);
+                }
+            }
+
+            @keyframes menu-enter {
+                from {
+                    transform: translateX(-100%);
+                }
+            }
         `,
     ],
     imports: [

From 8fabea148518e0a8a7dff83c17cd89ebafbb9ea4 Mon Sep 17 00:00:00 2001
From: Alex Sorafumo <alex@yuion.net>
Date: Fri, 13 Nov 2026 18:22:37 +1100
Subject: [PATCH 4/5] feat(ui): toasts fade out, and the upload list, banner
 and tab counts animate in

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/app/ui/controls/toast-outlet.component.ts | 6 +++++-
 src/app/ui/global-banner.component.ts         | 2 +-
 src/app/ui/item-tablist.component.ts          | 4 +++-
 src/app/ui/upload-list.component.ts           | 2 +-
 src/styles.css                                | 8 +++++++-
 5 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/src/app/ui/controls/toast-outlet.component.ts b/src/app/ui/controls/toast-outlet.component.ts
index 244c33174..a1fc4d348 100644
--- a/src/app/ui/controls/toast-outlet.component.ts
+++ b/src/app/ui/controls/toast-outlet.component.ts
@@ -27,7 +27,11 @@ import { dismissToast, Toast, toasts } from '../../common/notifications';
         <ng-template #panel>
             <div class="toast-stack">
                 @for (toast of list(); track toast.id) {
-                    <div class="toast" [class]="toast.type">
+                    <div
+                        class="toast"
+                        [class]="toast.type"
+                        animate.leave="toast-leave"
+                    >
                         <span class="toast-message">{{ toast.message }}</span>
                         @if (toast.action) {
                             <button type="button" (click)="act(toast)">
diff --git a/src/app/ui/global-banner.component.ts b/src/app/ui/global-banner.component.ts
index 981a47243..d7c779a4b 100644
--- a/src/app/ui/global-banner.component.ts
+++ b/src/app/ui/global-banner.component.ts
@@ -14,7 +14,7 @@ export interface BannerDetails {
     template: `
         @if (!has_viewed) {
             <div
-                class="flex w-full items-center space-x-4 p-4"
+                class="animate-fade-in flex w-full items-center space-x-4 p-4"
                 [class.bg-info]="banner.type === 'info' || !banner.type"
                 [class.text-info-content]="
                     banner.type === 'info' || !banner.type
diff --git a/src/app/ui/item-tablist.component.ts b/src/app/ui/item-tablist.component.ts
index 4a135ba86..4d4eebe0d 100644
--- a/src/app/ui/item-tablist.component.ts
+++ b/src/app/ui/item-tablist.component.ts
@@ -81,7 +81,9 @@ export interface ItemTab {
                                         class="h-3 w-3 animate-spin rounded-full border-2 border-current/30 border-t-current"
                                     ></span>
                                 } @else {
-                                    {{ link.count || '0' }}
+                                    <span class="animate-fade-in">{{
+                                        link.count || '0'
+                                    }}</span>
                                 }
                             </div>
                         }
diff --git a/src/app/ui/upload-list.component.ts b/src/app/ui/upload-list.component.ts
index 3827c2ea2..5ddf30e05 100644
--- a/src/app/ui/upload-list.component.ts
+++ b/src/app/ui/upload-list.component.ts
@@ -18,7 +18,7 @@ import { TranslatePipe } from './translate.pipe';
         @if (show()) {
             <div
                 upload-list
-                class="border-base-300 bg-base-100 text-base-content pointer-events-auto absolute bottom-2 left-2 overflow-hidden rounded-sm border text-sm shadow-sm"
+                class="animate-slide-in-up border-base-300 bg-base-100 text-base-content pointer-events-auto absolute bottom-2 left-2 overflow-hidden rounded-sm border text-sm shadow-sm"
             >
                 <div
                     class="bg-base-200 text-base-content flex items-center gap-2 p-2"
diff --git a/src/styles.css b/src/styles.css
index 9cd1f7bca..a6a4922a8 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -1442,6 +1442,11 @@ input[type='checkbox'][role='switch'] {
     animation: fade-in-scale 150ms ease-out;
     @apply shadow-lg;
 
+    /* Set by animate.leave in the toast outlet while the toast closes */
+    &.toast-leave {
+        animation: fade-out 120ms ease-in forwards;
+    }
+
     &.success {
         background-color: var(--success);
         color: var(--success-content);
@@ -1984,7 +1989,8 @@ a[icon] {
 
 /* Fades stay. Motion that moves or scales stops. */
 @media (prefers-reduced-motion: reduce) {
-    #placeos .animate-dialog-enter {
+    #placeos .animate-dialog-enter,
+    #placeos .animate-slide-in-up {
         animation: none;
     }
 }

From 36a48fd26b2cc00130e5aae33fac7b48a77ce833 Mon Sep 17 00:00:00 2001
From: Alex Sorafumo <alex@yuion.net>
Date: Fri, 13 Nov 2026 18:22:37 +1100
Subject: [PATCH 5/5] refactor(ui): remove unused animation styles and document
 the motion conventions

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 AGENTS.md      |   1 +
 src/styles.css | 102 -------------------------------------------------
 2 files changed, 1 insertion(+), 102 deletions(-)

diff --git a/AGENTS.md b/AGENTS.md
index 894bb0cbe..fb5e60273 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -102,6 +102,7 @@ export class MyComponent extends AsyncHandler {
 - Do not add Angular Material. Use the controls in `src/app/ui/controls` (form field, select, autocomplete, chip list, tabs, tooltip, spinner, progress bar, dialog close, toasts) and the Angular CDK (dialog, menu, overlay). Their styles are in `src/styles.css`
 - Form errors: put `<div error>` in an `app-form-field`. It shows when its `[formField]` or `ngModel` control is touched and invalid
 - Add a `ripple` attribute to an element for a press ripple. Use native `<input type="checkbox">` for checkboxes, with `role="switch"` for a switch
+- Motion: each route change is a view transition (styles in `src/styles.css`). Add a `page-transition` attribute to a routed content area to crossfade it. For enter motion use the `animate-fade-in`, `animate-dialog-enter` and `animate-slide-in-up` classes. For exit motion use `animate.leave`. Stop motion that moves or scales for `prefers-reduced-motion`
 - Use **IconComponent** for icons. The default icon font is a subset of the icons in the source. After you add icons, run `bun config/icon-subset.ts` (needs `pip install fonttools brotli`). An icon that is not in the subset still shows, but it loads the full 420 KB font
 - `src/index.html` has a splash that shows until the app loads. Lighthouse measures its title as the largest contentful paint, so keep the title larger than the content of the first page
 - Use `feat/*`, `fix/*`, `perf/*`, or `refactor/*` for branch names
diff --git a/src/styles.css b/src/styles.css
index a6a4922a8..a1daaa181 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -239,26 +239,6 @@ span.highlight {
     font-family: 'Fira Code Variable', monospace;
 }
 
-@keyframes crossfade {
-    0% {
-        background-color: #d32f2f;
-    }
-    20% {
-        background-color: #7b1fa2;
-    }
-    40% {
-        background-color: #1976d2;
-    }
-    60% {
-        background-color: #00796b;
-    }
-    80% {
-        background-color: #ff8f00;
-    }
-    100% {
-        background-color: #d32f2f;
-    }
-}
 
 #placeos .markdown {
     ol {
@@ -555,26 +535,6 @@ span.highlight {
     font-family: 'Fira Code Variable', monospace;
 }
 
-@keyframes crossfade {
-    0% {
-        background-color: #d32f2f;
-    }
-    20% {
-        background-color: #7b1fa2;
-    }
-    40% {
-        background-color: #1976d2;
-    }
-    60% {
-        background-color: #00796b;
-    }
-    80% {
-        background-color: #ff8f00;
-    }
-    100% {
-        background-color: #d32f2f;
-    }
-}
 
 #placeos .markdown {
     ol {
@@ -1842,37 +1802,6 @@ a[icon] {
     min-height: 0;
 }
 
-/* Expandable with width animation */
-#placeos .expandable-all {
-    display: grid;
-    grid-template-rows: 0fr;
-    width: 0;
-    overflow: hidden;
-    transition:
-        grid-template-rows 200ms ease-in-out,
-        width 200ms ease-in-out;
-}
-
-#placeos .expandable-all.expanded {
-    grid-template-rows: 1fr;
-    width: auto;
-}
-
-#placeos .expandable-all > * {
-    overflow: hidden;
-    min-height: 0;
-}
-
-/* Fade animation */
-#placeos .fade-in-out {
-    opacity: 0;
-    transition: opacity 200ms ease-in-out;
-}
-
-#placeos .fade-in-out.visible {
-    opacity: 1;
-}
-
 /* Page transitions. The router starts a view transition on each navigation
    (withViewTransitions in app.config.ts). The rest of the window changes at
    once. Only these parts animate:
@@ -1974,10 +1903,6 @@ a[icon] {
     animation: fade-in 200ms ease-out;
 }
 
-#placeos .animate-fade-in-scale {
-    animation: fade-in-scale 200ms ease-out;
-}
-
 /* The same enter motion as dialogs, for panels that are not CDK dialogs */
 #placeos .animate-dialog-enter {
     animation: dialog-enter var(--motion-enter);
@@ -1995,33 +1920,6 @@ a[icon] {
     }
 }
 
-/* Slide animations */
-#placeos .slide-up {
-    transform: translateY(100%);
-    opacity: 0;
-    transition:
-        transform 200ms ease-in-out,
-        opacity 200ms ease-in-out;
-}
-
-#placeos .slide-up.visible {
-    transform: translateY(0);
-    opacity: 1;
-}
-
-#placeos .slide-down {
-    transform: translateY(-100%);
-    opacity: 0;
-    transition:
-        transform 200ms ease-in-out,
-        opacity 200ms ease-in-out;
-}
-
-#placeos .slide-down.visible {
-    transform: translateY(0);
-    opacity: 1;
-}
-
 #placeos {
     .cdk-overlay-pane {
         max-width: none !important;