fix: DockerSecretsResolver - don't normalize absolute paths like /var/www/html/...

docs/features/view-transitions.md

@@ -0,0 +1,283 @@
+# View Transitions API
+
+View Transitions API für nahtlose Übergänge zwischen Seiten und Zuständen.
+
+## Baseline Status
+
+**Baseline 2023**: View Transitions API ist Baseline Newly available.
+
+## Übersicht
+
+Die View Transitions API ermöglicht nahtlose Übergänge zwischen verschiedenen Seitenzuständen ohne zusätzliche JavaScript-Bibliotheken.
+
+## Verwendung
+
+### Automatische Navigation Transitions
+
+Die View Transitions API wird automatisch für Navigation verwendet:
+
+```css
+@view-transition {
+    navigation: auto;
+}
+```
+
+### Manuelle View Transitions
+
+```javascript
+import { transitionNavigation, transitionContentUpdate } from './modules/admin/view-transitions.js';
+
+// Navigation Transition
+transitionNavigation(() => {
+    window.location.href = '/new-page';
+});
+
+// Content Update Transition
+transitionContentUpdate(() => {
+    document.getElementById('content').innerHTML = newContent;
+});
+```
+
+## Benannte Bereiche
+
+### Admin-Bereiche
+
+Die folgenden Bereiche haben benannte View Transitions:
+
+- `admin-sidebar` - Sidebar-Navigation
+- `admin-content` - Hauptinhalt
+- `admin-header` - Header-Bereich
+- `admin-popover` - Popover-Elemente
+
+### CSS-Definition
+
+```css
+.admin-sidebar {
+    view-transition-name: admin-sidebar;
+}
+
+.admin-content {
+    view-transition-name: admin-content;
+}
+
+.admin-header {
+    view-transition-name: admin-header;
+}
+
+[popover].admin-popover {
+    view-transition-name: admin-popover;
+}
+```
+
+## JavaScript Helper
+
+### Verfügbare Funktionen
+
+#### `supportsViewTransitions()`
+
+Prüft, ob View Transitions unterstützt werden:
+
+```javascript
+import { supportsViewTransitions } from './modules/admin/view-transitions.js';
+
+if (supportsViewTransitions()) {
+    // View Transitions verfügbar
+}
+```
+
+#### `transitionNavigation(callback)`
+
+Startet eine View Transition für Navigation:
+
+```javascript
+import { transitionNavigation } from './modules/admin/view-transitions.js';
+
+transitionNavigation(() => {
+    window.location.href = '/new-page';
+});
+```
+
+#### `transitionContentUpdate(callback)`
+
+Startet eine View Transition für Content-Updates:
+
+```javascript
+import { transitionContentUpdate } from './modules/admin/view-transitions.js';
+
+transitionContentUpdate(() => {
+    document.getElementById('content').innerHTML = newContent;
+});
+```
+
+#### `transitionPopover(popoverElement, callback)`
+
+Startet eine View Transition für Popover:
+
+```javascript
+import { transitionPopover } from './modules/admin/view-transitions.js';
+
+const popover = document.getElementById('my-popover');
+transitionPopover(popover, () => {
+    popover.showPopover();
+});
+```
+
+#### `initViewTransitions()`
+
+Initialisiert alle View Transitions automatisch:
+
+```javascript
+import { initViewTransitions } from './modules/admin/view-transitions.js';
+
+initViewTransitions();
+```
+
+## CSS-Animationen
+
+### Standard-Animationen
+
+```css
+::view-transition-old(admin-sidebar),
+::view-transition-new(admin-sidebar) {
+    animation: fade 0.15s ease-out;
+}
+
+::view-transition-old(admin-content),
+::view-transition-new(admin-content) {
+    animation: fade 0.15s ease-out;
+}
+
+::view-transition-old(admin-header),
+::view-transition-new(admin-header) {
+    animation: slide-down 0.2s ease-out;
+}
+```
+
+### Custom Animationen
+
+```css
+::view-transition-old(custom-area),
+::view-transition-new(custom-area) {
+    animation: custom-animation 0.3s ease-in-out;
+}
+
+@keyframes custom-animation {
+    from {
+        opacity: 0;
+        transform: scale(0.95);
+    }
+    to {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+```
+
+## Best Practices
+
+### 1. Benannte Bereiche verwenden
+
+Verwende `view-transition-name` für präzise Animationen:
+
+```css
+.important-content {
+    view-transition-name: important-content;
+}
+```
+
+### 2. Performance beachten
+
+View Transitions sollten schnell sein (0.15s - 0.3s):
+
+```css
+::view-transition-old(content),
+::view-transition-new(content) {
+    animation-duration: 0.15s;
+}
+```
+
+### 3. Accessibility respektieren
+
+Respektiere `prefers-reduced-motion`:
+
+```css
+@media (prefers-reduced-motion: reduce) {
+    ::view-transition-old(*),
+    ::view-transition-new(*) {
+        animation: none;
+    }
+}
+```
+
+### 4. Fallback für nicht unterstützende Browser
+
+```javascript
+if (supportsViewTransitions()) {
+    transitionNavigation(() => {
+        // Navigation
+    });
+} else {
+    // Fallback ohne Transition
+    window.location.href = '/new-page';
+}
+```
+
+## Admin-spezifische Patterns
+
+### Navigation Links
+
+Navigation Links verwenden automatisch View Transitions:
+
+```html
+<a href="/admin/users" class="admin-nav__link">Users</a>
+```
+
+### Content Updates
+
+Content-Updates können mit View Transitions animiert werden:
+
+```javascript
+transitionContentUpdate(() => {
+    document.querySelector('.admin-content').innerHTML = newContent;
+});
+```
+
+### Popover Transitions
+
+Popover verwenden automatisch View Transitions beim Öffnen/Schließen.
+
+## Browser-Support
+
+- Chrome 111+
+- Firefox 129+
+- Safari 18+
+- Edge 111+
+
+## Migration
+
+### Von Custom Transitions migrieren
+
+**Vorher:**
+```javascript
+// Custom Transition
+element.style.transition = 'opacity 0.3s';
+element.style.opacity = '0';
+setTimeout(() => {
+    updateContent();
+    element.style.opacity = '1';
+}, 300);
+```
+
+**Nachher:**
+```javascript
+// View Transitions API
+transitionContentUpdate(() => {
+    updateContent();
+});
+```
+
+## Weitere Ressourcen
+
+- [MDN: View Transitions API](https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API)
+- [web.dev: View Transitions](https://web.dev/view-transitions/)
+