tribunal-kit 9.2.4 → 9.2.5

package/.agent/skills/app-builder/templates/react-native-app/TEMPLATE.md

@@ -1,122 +1,122 @@
----
-name: react-native-app
-description: React Native mobile app template principles. Expo, TypeScript, navigation.
----
-
-# React Native App Template (2026 Edition)
-
-Modern mobile app template, optimized for New Architecture and React 19.
-
-## Tech Stack
-
-| Component  | Technology            | Version / Notes                        |
-| ---------- | --------------------- | -------------------------------------- |
-| Core       | React Native + Expo   | SDK 52+ (New Architecture Enabled)     |
-| Language   | TypeScript            | v5+ (Strict Mode)                      |
-| UI Logic   | React                 | v19 (React Compiler, auto-memoization) |
-| Navigation | Expo Router           | v4+ (File-based, Universal Links)      |
-| Styling    | NativeWind            | v4.0 (Tailwind v4, CSS-first config)   |
-| State      | Zustand + React Query | v5+ (Async State Management)           |
-| Storage    | Expo SecureStore      | Encrypted local storage                |
-
----
-
-## Directory Structure
-
-Standardized structure for Expo Router and NativeWind v4.
-
-```
-project-name/
-├── app/                 # Expo Router (File-based routing)
-│   ├── _layout.tsx      # Root Layout (Stack/Tabs config)
-│   ├── index.tsx        # Main Screen
-│   ├── (tabs)/          # Route Group for Tab Bar
-│   │   ├── _layout.tsx
-│   │   ├── home.tsx
-│   │   └── profile.tsx
-│   ├── +not-found.tsx   # 404 Page
-│   └── [id].tsx         # Dynamic Route (Typed)
-├── components/
-│   ├── ui/              # Primitive Components (Button, Text)
-│   └── features/        # Complex Components
-├── hooks/               # Custom Hooks
-├── lib/
-│   ├── api.ts           # Axios/Fetch client
-│   └── storage.ts       # SecureStore wrapper
-├── store/               # Zustand stores
-├── constants/           # Colors, Theme config
-├── assets/              # Fonts, Images
-├── global.css           # Entry point for NativeWind v4
-├── tailwind.config.ts   # Tailwind Config (if custom theme needed)
-├── babel.config.js      # NativeWind Babel Plugin
-└── app.json             # Expo Config
-```
-
----
-
-## Navigation Patterns (Expo Router)
-
-| Pattern | Description                        | Implement                               |
-| ------- | ---------------------------------- | --------------------------------------- |
-| Stack   | Hierarchical navigation (Push/Pop) | `<Stack />` in `_layout.tsx`            |
-| Tabs    | Bottom navigation bar              | `<Tabs />` in `(tabs)/_layout.tsx`      |
-| Drawer  | Side slide-out menu                | `expo-router/drawer`                    |
-| Modals  | Overlay screens                    | `presentation: 'modal'` in Stack screen |
-
----
-
-## Key Packages & Purpose
-
-| Package                 | Purpose                                        |
-| ----------------------- | ---------------------------------------------- |
-| expo-router             | File-based routing (Next.js like)              |
-| nativewind              | Use Tailwind CSS classes in React Native       |
-| react-native-reanimated | Smooth animations (runs on UI thread)          |
-| @tanstack/react-query   | Server state management, caching, pre-fetching |
-| zustand                 | Global state management (lighter than Redux)   |
-| expo-image              | Optimized image rendering for performance      |
-
----
-
-## Setup Steps (2026 Standard)
-
-1. Initialize Project:
-
-   ```bash
-   npx create-expo-app@latest my-app --template default
-   cd my-app
-   ```
-
-2. Install Core Dependencies:
-
-   ```bash
-   npx expo install expo-router react-native-safe-area-context react-native-screens expo-link expo-constants expo-status-bar
-   ```
-
-3. Install NativeWind v4:
-
-   ```bash
-   npm install nativewind tailwindcss react-native-reanimated
-   ```
-
-4. Configure NativeWind (Babel & CSS):
-   - Add plugin to `babel.config.js`: `plugins: ["nativewind/babel"]`.
-   - Create `global.css` with: `@import "tailwindcss";`.
-   - Import `global.css` in `app/_layout.tsx`.
-
-5. Run Project:
-   ```bash
-   npx expo start -c
-   # Press 'i' for iOS simulator or 'a' for Android emulator
-   ```
-
----
-
-## Best Practices (Updated)
-
-- **New Architecture**: Ensure `newArchEnabled: true` in `app.json` to leverage TurboModules and Fabric Renderer.
-- **Typed Routes**: Use Expo Router's "Typed Routes" feature for type-safe routing (e.g., `router.push('/path')`).
-- **React 19**: Reduce usage of `useMemo` or `useCallback` thanks to React Compiler (if enabled).
-- **Components**: Build UI primitives (Box, Text) with NativeWind className for reusability.
-- **Assets**: Use `expo-image` instead of default `<Image />` for better caching and performance.
-- **API**: Always wrap API calls with TanStack Query, avoid direct calls in `useEffect`.
+---
+name: react-native-app
+description: React Native mobile app template principles. Expo, TypeScript, navigation.
+---
+
+# React Native App Template (2026 Edition)
+
+Modern mobile app template, optimized for New Architecture and React 19.
+
+## Tech Stack
+
+| Component  | Technology            | Version / Notes                        |
+| ---------- | --------------------- | -------------------------------------- |
+| Core       | React Native + Expo   | SDK 52+ (New Architecture Enabled)     |
+| Language   | TypeScript            | v5+ (Strict Mode)                      |
+| UI Logic   | React                 | v19 (React Compiler, auto-memoization) |
+| Navigation | Expo Router           | v4+ (File-based, Universal Links)      |
+| Styling    | NativeWind            | v4.0 (Tailwind v4, CSS-first config)   |
+| State      | Zustand + React Query | v5+ (Async State Management)           |
+| Storage    | Expo SecureStore      | Encrypted local storage                |
+
+---
+
+## Directory Structure
+
+Standardized structure for Expo Router and NativeWind v4.
+
+```
+project-name/
+├── app/                 # Expo Router (File-based routing)
+│   ├── _layout.tsx      # Root Layout (Stack/Tabs config)
+│   ├── index.tsx        # Main Screen
+│   ├── (tabs)/          # Route Group for Tab Bar
+│   │   ├── _layout.tsx
+│   │   ├── home.tsx
+│   │   └── profile.tsx
+│   ├── +not-found.tsx   # 404 Page
+│   └── [id].tsx         # Dynamic Route (Typed)
+├── components/
+│   ├── ui/              # Primitive Components (Button, Text)
+│   └── features/        # Complex Components
+├── hooks/               # Custom Hooks
+├── lib/
+│   ├── api.ts           # Axios/Fetch client
+│   └── storage.ts       # SecureStore wrapper
+├── store/               # Zustand stores
+├── constants/           # Colors, Theme config
+├── assets/              # Fonts, Images
+├── global.css           # Entry point for NativeWind v4
+├── tailwind.config.ts   # Tailwind Config (if custom theme needed)
+├── babel.config.js      # NativeWind Babel Plugin
+└── app.json             # Expo Config
+```
+
+---
+
+## Navigation Patterns (Expo Router)
+
+| Pattern | Description                        | Implement                               |
+| ------- | ---------------------------------- | --------------------------------------- |
+| Stack   | Hierarchical navigation (Push/Pop) | `<Stack />` in `_layout.tsx`            |
+| Tabs    | Bottom navigation bar              | `<Tabs />` in `(tabs)/_layout.tsx`      |
+| Drawer  | Side slide-out menu                | `expo-router/drawer`                    |
+| Modals  | Overlay screens                    | `presentation: 'modal'` in Stack screen |
+
+---
+
+## Key Packages & Purpose
+
+| Package                 | Purpose                                        |
+| ----------------------- | ---------------------------------------------- |
+| expo-router             | File-based routing (Next.js like)              |
+| nativewind              | Use Tailwind CSS classes in React Native       |
+| react-native-reanimated | Smooth animations (runs on UI thread)          |
+| @tanstack/react-query   | Server state management, caching, pre-fetching |
+| zustand                 | Global state management (lighter than Redux)   |
+| expo-image              | Optimized image rendering for performance      |
+
+---
+
+## Setup Steps (2026 Standard)
+
+1. Initialize Project:
+
+   ```bash
+   npx create-expo-app@latest my-app --template default
+   cd my-app
+   ```
+
+2. Install Core Dependencies:
+
+   ```bash
+   npx expo install expo-router react-native-safe-area-context react-native-screens expo-link expo-constants expo-status-bar
+   ```
+
+3. Install NativeWind v4:
+
+   ```bash
+   npm install nativewind tailwindcss react-native-reanimated
+   ```
+
+4. Configure NativeWind (Babel & CSS):
+   - Add plugin to `babel.config.js`: `plugins: ["nativewind/babel"]`.
+   - Create `global.css` with: `@import "tailwindcss";`.
+   - Import `global.css` in `app/_layout.tsx`.
+
+5. Run Project:
+   ```bash
+   npx expo start -c
+   # Press 'i' for iOS simulator or 'a' for Android emulator
+   ```
+
+---
+
+## Best Practices (Updated)
+
+- **New Architecture**: Ensure `newArchEnabled: true` in `app.json` to leverage TurboModules and Fabric Renderer.
+- **Typed Routes**: Use Expo Router's "Typed Routes" feature for type-safe routing (e.g., `router.push('/path')`).
+- **React 19**: Reduce usage of `useMemo` or `useCallback` thanks to React Compiler (if enabled).
+- **Components**: Build UI primitives (Box, Text) with NativeWind className for reusability.
+- **Assets**: Use `expo-image` instead of default `<Image />` for better caching and performance.
+- **API**: Always wrap API calls with TanStack Query, avoid direct calls in `useEffect`.

package/.agent/skills/appflow-wireframe/SKILL.md

@@ -1,96 +1,96 @@
----
-name: appflow-wireframe
-description: "Use when Application flow and wireframing mastery. Mermaid.js flowcharting, state diagrams, user journey mapping, interaction matrices, explicit screen boundary demarcation, and accessibility flow modeling. Use when planning UI architectures, designing user onboarding flows, or visualizing complex state machines before writing code."
-version: 5.0.0
-last-updated: 2026-09-13
-tools: Read, Grep, Glob, Bash, Edit, Write
-scripts-binding:
-  - .agent/scripts/lint_runner.js
-  - .agent/scripts/verify_all.js
----
-
-# Appflow & Wireframing — Visualization Mastery
-
----
-
-## 🛠️ Technical Architecture & Reference Recipes
-
-## Hallucination Traps (Read First)
-
----
-
----
-
-## 1. The Mermaid Appflow Protocol
-
-When asked to "design the flow", do not write prose. Write deterministic Mermaid diagrams that map state interactions.
-
-### Example: E-Commerce Checkout Flow
-
-```mermaid
-stateDiagram-v2
-    [*] --> CartView
-
-    state CartView {
-        [*] --> Empty: Load
-        Empty --> Populated: Add Item
-    }
-
-    CartView --> CheckoutModal: Click Checkout
-
-    state CheckoutModal {
-        [*] --> AuthCheck
-        AuthCheck --> GuestCheckout: Not Logged In
-        AuthCheck --> ProfilePreFill: Logged In
-
-        GuestCheckout --> PaymentProcessing: Submit
-        ProfilePreFill --> PaymentProcessing: Submit
-    }
-
-    PaymentProcessing --> Success: Stripe 200 OK
-    PaymentProcessing --> CheckoutModal: Stripe 402 Error (Retry)
-
-    Success --> [*]: Redirect Dashboard
-```
-
----
-
-## 2. Low-Fidelity Wireframe Notation
-
-When asked to define the UI layout conceptually before building Shadcn/Tailwind components, use structural ASCII/Markdown notation to establish layout boundaries.
-
-```text
-[ HEADER: Logo (Left) | Search Bar (Center, expanding) | User Avatar (Right) ]
--------------------------------------------------------------------------
-[ SIDEBAR (Sticky, W-64) ] |  [ HERO SECTION: H1 Hook | CTA Button Primary ]
-- Dashboard                |  [ .......................................... ]
-- Analytics                |  [ FEATURE GRID (CSS Grid columns-3)        ]
-- Settings                 |  [ [Card 1]     [Card 2]      [Card 3]      ]
-[........................] |  [..........................................]
-```
-
-**Why do this?**
-Because moving an ASCII box takes 3 seconds. Rewriting 4 nested div flexbox tails takes 5 minutes. Secure the approval on the wireframe before touching code.
-
----
-
-## 3. The Empty State / Loading State Mandate
-
-When mapping application flows, AI frequently charts the "Happy Path" (User logs in -> User sees 10 items).
-
-Every single screen designed in an App Flow MUST explicitly define:
-
-1. **The Loading State:** What does the user see while the network executes? (Skeleton loaders vs Spinners).
-2. **The Empty State:** What does the UI look like on Day 1 when the user has zero data? (An empty white screen is an instant bounce-rate death sentence; use an Empty State CTA).
-
----
-
-## 4. Interaction Matrices (Event Mapping)
-
-Before writing React, chart exactly what the user can do on the screen and what the system does in response.
-
-| Interaction         | Trigger                | System Response Hook         | Edge Case                      |
-| :------------------ | :--------------------- | :--------------------------- | :----------------------------- |
-| Click `Add to Cart` | `onClick`              | Dispatch `Zustand.add(item)` | If out of stock, render Toast  |
-| Scroll to Bottom    | `IntersectionObserver` | `fetchNextPage()`            | Reached max items, show footer |
-| Click outside Modal | `useClickAway`         | `setIsOpen(false)`           | Prevent close if form is dirty |
+---
+name: appflow-wireframe
+description: "Use when Application flow and wireframing mastery. Mermaid.js flowcharting, state diagrams, user journey mapping, interaction matrices, explicit screen boundary demarcation, and accessibility flow modeling. Use when planning UI architectures, designing user onboarding flows, or visualizing complex state machines before writing code."
+version: 5.0.0
+last-updated: 2026-09-13
+tools: Read, Grep, Glob, Bash, Edit, Write
+scripts-binding:
+  - .agent/scripts/lint_runner.js
+  - .agent/scripts/verify_all.js
+---
+
+# Appflow & Wireframing — Visualization Mastery
+
+---
+
+## 🛠️ Technical Architecture & Reference Recipes
+
+## Hallucination Traps (Read First)
+
+---
+
+---
+
+## 1. The Mermaid Appflow Protocol
+
+When asked to "design the flow", do not write prose. Write deterministic Mermaid diagrams that map state interactions.
+
+### Example: E-Commerce Checkout Flow
+
+```mermaid
+stateDiagram-v2
+    [*] --> CartView
+
+    state CartView {
+        [*] --> Empty: Load
+        Empty --> Populated: Add Item
+    }
+
+    CartView --> CheckoutModal: Click Checkout
+
+    state CheckoutModal {
+        [*] --> AuthCheck
+        AuthCheck --> GuestCheckout: Not Logged In
+        AuthCheck --> ProfilePreFill: Logged In
+
+        GuestCheckout --> PaymentProcessing: Submit
+        ProfilePreFill --> PaymentProcessing: Submit
+    }
+
+    PaymentProcessing --> Success: Stripe 200 OK
+    PaymentProcessing --> CheckoutModal: Stripe 402 Error (Retry)
+
+    Success --> [*]: Redirect Dashboard
+```
+
+---
+
+## 2. Low-Fidelity Wireframe Notation
+
+When asked to define the UI layout conceptually before building Shadcn/Tailwind components, use structural ASCII/Markdown notation to establish layout boundaries.
+
+```text
+[ HEADER: Logo (Left) | Search Bar (Center, expanding) | User Avatar (Right) ]
+-------------------------------------------------------------------------
+[ SIDEBAR (Sticky, W-64) ] |  [ HERO SECTION: H1 Hook | CTA Button Primary ]
+- Dashboard                |  [ .......................................... ]
+- Analytics                |  [ FEATURE GRID (CSS Grid columns-3)        ]
+- Settings                 |  [ [Card 1]     [Card 2]      [Card 3]      ]
+[........................] |  [..........................................]
+```
+
+**Why do this?**
+Because moving an ASCII box takes 3 seconds. Rewriting 4 nested div flexbox tails takes 5 minutes. Secure the approval on the wireframe before touching code.
+
+---
+
+## 3. The Empty State / Loading State Mandate
+
+When mapping application flows, AI frequently charts the "Happy Path" (User logs in -> User sees 10 items).
+
+Every single screen designed in an App Flow MUST explicitly define:
+
+1. **The Loading State:** What does the user see while the network executes? (Skeleton loaders vs Spinners).
+2. **The Empty State:** What does the UI look like on Day 1 when the user has zero data? (An empty white screen is an instant bounce-rate death sentence; use an Empty State CTA).
+
+---
+
+## 4. Interaction Matrices (Event Mapping)
+
+Before writing React, chart exactly what the user can do on the screen and what the system does in response.
+
+| Interaction         | Trigger                | System Response Hook         | Edge Case                      |
+| :------------------ | :--------------------- | :--------------------------- | :----------------------------- |
+| Click `Add to Cart` | `onClick`              | Dispatch `Zustand.add(item)` | If out of stock, render Toast  |
+| Scroll to Bottom    | `IntersectionObserver` | `fetchNextPage()`            | Reached max items, show footer |
+| Click outside Modal | `useClickAway`         | `setIsOpen(false)`           | Prevent close if form is dirty |

package/.agent/skills/apple-design/SKILL.md

@@ -1,89 +1,89 @@
----
-name: apple-design
-description: "Use when Apple's approach to interface design and fluid, physical motion, translated for the web. Use when building or reviewing gesture-driven UI, spring animations, drag/swipe/sheet interactions, momentum and interruptible transitions, translucent materials and depth, typography (optical sizing, tracking, leading), reduced-motion, or the design foundations behind Apple-style interfaces."
-version: 5.0.0
-last-updated: 2026-09-13
-skills:
-  - soft-skill
-  - emil-design-eng
-  - 60fps-animation
-tools: Read, Grep, Glob, Bash, Edit, Write
-scripts-binding:
-  - .agent/scripts/lint_runner.js
-  - .agent/scripts/verify_all.js
----
-
-# Apple Design — Fluid Motion, Physicality & Translucent Depth
-
----
-
-## 🛠️ Technical Architecture & Reference Recipes
-
----
-
----
-
-## 1. Physics-Based Spring Animations
-
-Apple interfaces do NOT use fixed-duration cubic-beziers for interactive elements; they use **physics-based springs**.
-
-- **Interruptibility**: Animations MUST be interruptible. If a user taps or drags mid-animation, the spring seamlessly absorbs current velocity without snapping to standard origin.
-- **Spring Parameters**:
-  - **Overdamped (Solid/Restrained)**: `mass: 1, stiffness: 200, damping: 25` (Modals, Sheets, Drawers)
-  - **Snappy (Buttons/Toggles)**: `mass: 0.5, stiffness: 350, damping: 20` (Pills, Switches, Keypad)
-  - **Bouncy (Micro-delight)**: `mass: 0.8, stiffness: 400, damping: 15` (Badges, Tooltips, Success Checkmarks)
-
-```javascript
-// Framer Motion / Motion React Spring Config
-const appleSpring = {
-  type: 'spring',
-  stiffness: 300,
-  damping: 24,
-  mass: 0.8,
-};
-```
-
----
-
-## 2. Translucent Materials & Multi-Layer Blur
-
-Apple depth relies on subtle, multi-layered backdrop blur and border highlights:
-
-```css
-.apple-glass-panel {
-  background: rgba(255, 255, 255, 0.72);
-  backdrop-filter: blur(20px) saturate(180%);
-  -webkit-backdrop-filter: blur(20px) saturate(180%);
-  border: 1px solid rgba(255, 255, 255, 0.3);
-  box-shadow:
-    0 1px 2px 0 rgba(0, 0, 0, 0.05),
-    0 8px 24px -4px rgba(0, 0, 0, 0.08);
-}
-
-@media (prefers-color-scheme: dark) {
-  .apple-glass-panel {
-    background: rgba(26, 26, 32, 0.75);
-    border: 1px solid rgba(255, 255, 255, 0.08);
-    box-shadow:
-      0 1px 2px 0 rgba(0, 0, 0, 0.2),
-      0 12px 32px -8px rgba(0, 0, 0, 0.4);
-  }
-}
-```
-
----
-
-## 3. Optical Typography & Dynamic Tracking
-
-- **Optical Letter-Spacing (SF Pro Standard)**: Larger titles require tighter tracking (`-0.025em`), while caption text requires positive tracking (`+0.015em`).
-- **Dynamic Line Heights**: `1.1` for large titles, `1.4` to `1.5` for body text.
-
----
-
-## Anti-Slop Table
-
-| Anti-Pattern                  | Apple Design Solution                                         | Rationale                                       |
-| ----------------------------- | ------------------------------------------------------------- | ----------------------------------------------- |
-| Rigid linear/ease transitions | Physics-based spring curves (`stiffness: 300, damping: 24`)   | Simulates real-world physical momentum          |
-| Opaque static dropdowns       | Translucent backdrop blur panel (`blur(20px) saturate(180%)`) | Preserves spatial context beneath UI            |
-| Sudden state jumps            | Interruptible velocity-preserving spring animations           | Prevents visual jarring during rapid user input |
+---
+name: apple-design
+description: "Use when Apple's approach to interface design and fluid, physical motion, translated for the web. Use when building or reviewing gesture-driven UI, spring animations, drag/swipe/sheet interactions, momentum and interruptible transitions, translucent materials and depth, typography (optical sizing, tracking, leading), reduced-motion, or the design foundations behind Apple-style interfaces."
+version: 5.0.0
+last-updated: 2026-09-13
+skills:
+  - soft-skill
+  - emil-design-eng
+  - 60fps-animation
+tools: Read, Grep, Glob, Bash, Edit, Write
+scripts-binding:
+  - .agent/scripts/lint_runner.js
+  - .agent/scripts/verify_all.js
+---
+
+# Apple Design — Fluid Motion, Physicality & Translucent Depth
+
+---
+
+## 🛠️ Technical Architecture & Reference Recipes
+
+---
+
+---
+
+## 1. Physics-Based Spring Animations
+
+Apple interfaces do NOT use fixed-duration cubic-beziers for interactive elements; they use **physics-based springs**.
+
+- **Interruptibility**: Animations MUST be interruptible. If a user taps or drags mid-animation, the spring seamlessly absorbs current velocity without snapping to standard origin.
+- **Spring Parameters**:
+  - **Overdamped (Solid/Restrained)**: `mass: 1, stiffness: 200, damping: 25` (Modals, Sheets, Drawers)
+  - **Snappy (Buttons/Toggles)**: `mass: 0.5, stiffness: 350, damping: 20` (Pills, Switches, Keypad)
+  - **Bouncy (Micro-delight)**: `mass: 0.8, stiffness: 400, damping: 15` (Badges, Tooltips, Success Checkmarks)
+
+```javascript
+// Framer Motion / Motion React Spring Config
+const appleSpring = {
+  type: 'spring',
+  stiffness: 300,
+  damping: 24,
+  mass: 0.8,
+};
+```
+
+---
+
+## 2. Translucent Materials & Multi-Layer Blur
+
+Apple depth relies on subtle, multi-layered backdrop blur and border highlights:
+
+```css
+.apple-glass-panel {
+  background: rgba(255, 255, 255, 0.72);
+  backdrop-filter: blur(20px) saturate(180%);
+  -webkit-backdrop-filter: blur(20px) saturate(180%);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  box-shadow:
+    0 1px 2px 0 rgba(0, 0, 0, 0.05),
+    0 8px 24px -4px rgba(0, 0, 0, 0.08);
+}
+
+@media (prefers-color-scheme: dark) {
+  .apple-glass-panel {
+    background: rgba(26, 26, 32, 0.75);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    box-shadow:
+      0 1px 2px 0 rgba(0, 0, 0, 0.2),
+      0 12px 32px -8px rgba(0, 0, 0, 0.4);
+  }
+}
+```
+
+---
+
+## 3. Optical Typography & Dynamic Tracking
+
+- **Optical Letter-Spacing (SF Pro Standard)**: Larger titles require tighter tracking (`-0.025em`), while caption text requires positive tracking (`+0.015em`).
+- **Dynamic Line Heights**: `1.1` for large titles, `1.4` to `1.5` for body text.
+
+---
+
+## Anti-Slop Table
+
+| Anti-Pattern                  | Apple Design Solution                                         | Rationale                                       |
+| ----------------------------- | ------------------------------------------------------------- | ----------------------------------------------- |
+| Rigid linear/ease transitions | Physics-based spring curves (`stiffness: 300, damping: 24`)   | Simulates real-world physical momentum          |
+| Opaque static dropdowns       | Translucent backdrop blur panel (`blur(20px) saturate(180%)`) | Preserves spatial context beneath UI            |
+| Sudden state jumps            | Interruptible velocity-preserving spring animations           | Prevents visual jarring during rapid user input |