odac 1.4.4 → 1.4.5

package/.agent/rules/memory.md

@@ -38,6 +38,7 @@ trigger: always_on
 
 ## Documentation Standards
 - **AI Skill Front Matter:** Every file under `docs/ai/skills/**/*.md` must start with YAML front matter containing `name`, `description`, and `metadata.tags`; values must be specific to that document's topic (never copied from generic examples).
+- **Template Syntax Documentation:** `{{ }}` and `<odac var>` are equal-status syntaxes, NOT legacy vs modern. `{{ }}` is preferred inside HTML attributes and inline text; `<odac var>` is preferred for standalone block output. Never label `{{ }}` as "legacy" or "backward compatibility" in docs.
 
 ## Testing & Validation
 - **Mandatory Test Coverage:** Every new feature, method, or significant logic change MUST be accompanied by a corresponding unit or integration test.
@@ -53,4 +54,7 @@ trigger: always_on
 - **Automatic JSON Parsing:** The `#ajax` method (and by extension `odac.get`) must automatically parse the response if the `Content-Type` header contains `application/json`, even if `dataType` is not explicitly set to `json`.
 
 ## Security Logic & Authentication
-- **Enterprise Token Rotation:** The `Auth.js` system utilizes a non-blocking refresh token rotation mechanism for cookies (`odac_x`/`odac_y`). To prevent race conditions during concurrent requests in high-throughput SPAs, rotated tokens are **not** immediately deleted. Instead, their `active` timestamp is set to naturally expire in 60 seconds (Grace Period), and their `date` timestamp is set to the Unix Epoch (`new Date(0)`) as an identifier mark. Never delete rotated tokens immediately.
+- **Enterprise Token Rotation:** The `Auth.js` system utilizes a non-blocking refresh token rotation mechanism for cookies (`odac_x`/`odac_y`). To prevent race conditions during concurrent requests in high-throughput SPAs, rotated tokens are **not** immediately deleted. Instead, their `active` timestamp is set to naturally expire in 60 seconds (Grace Period), and their `date` timestamp is set to the Unix Epoch (`new Date(0)`) as an identifier mark. Never delete rotated tokens immediately.
+
+## View Engine & SSR
+- **Auto-Navigation Injection:** The ODAC View engine (`src/View.js`) automatically parses skeleton HTML files and dynamically injects `data-odac-navigate="content"` into the element immediately wrapping `{{ CONTENT }}`. Do NOT manually add this attribute to HTML templates or assume it is missing based on static analysis, as it is handled seamlessly at runtime via SSR.

package/CHANGELOG.md

@@ -1,3 +1,31 @@
+### security
+
+- **template:** add noopener to external footer links to mitigate reverse tabnabbing
+- **template:** add rel="noopener" to all external links to prevent tabnabbing without losing referer analytics
+
+### ✨ What's New
+
+- **client:** add native View Transition API support via odac-transition attribute
+- Implement a complete UI redesign using Tailwind CSS, introduce new components, and update branding to ODAC.
+
+### 📚 Documentation
+
+- Add documentation for auto-navigation injection in the View Engine and SSR.
+- **template:** correct casing for Odac object api references in comments
+- **views:** clarify template syntax as equal-status with usage guidelines
+
+### 🛠️ Fixes & Improvements
+
+- **client:** clear stale view transition names on aborted navigation promises
+- **client:** decode HTML entities in document title to prevent XSS vulnerabilities
+- **template:** sync active nav state properly across desktop and mobile menus
+
+
+
+---
+
+Powered by [⚡ ODAC](https://odac.run)
+
 ### doc
 
 - Introduce WebSocket routing and controllers, update request handling, and refactor language and validator modules to use async operations.

package/README.md

@@ -8,7 +8,7 @@
 *   🚀 **Developer Friendly:** Simple setup and intuitive API design let you start building immediately.
 *   🎨 **Built-in Tailwind CSS:** Zero-config integration with Tailwind CSS v4. Automatic compilation and optimization out of the box.
 *   🔗 **Powerful Routing:** Create clean, custom URLs and manage infinite pages with a flexible routing system.
-*   ✨ **Seamless SPA Experience:** Automatic AJAX handling for forms and page transitions eliminates the need for complex client-side code.
+*   ✨ **Seamless SPA Experience:** Automatic AJAX handling for forms and page transitions with native **View Transition API** support. Add a single HTML attribute for smooth, browser-native animations — no client-side code required.
 *   🛡️ **Built-in Security:** Enterprise-grade security out of the box. Includes secure default headers and a **Multi-tab Safe, Single-Use CSRF Protection (Nonce)**. Tokens self-replenish in the background, ensuring maximum defense without ever interrupting the user experience.
 *   🔐 **Authentication:** Ready-to-use session management with enterprise-grade **Refresh Token Rotation**, secure password hashing, and authentication helpers.
 *   🗄️ **Database Agnostic:** Integrated support for major databases (PostgreSQL, MySQL, SQLite) and Redis via Knex.js.
@@ -72,6 +72,7 @@ project/
 ├── middleware/     # Route middlewares
 ├── public/         # Static assets
 ├── route/          # Route definitions
+├── schema/         # Database schemas (auto-migrate)
 ├── view/           # HTML templates
 ├── .env            # Environment variables
 └── odac.json       # App configuration

package/client/odac.js

@@ -195,6 +195,33 @@ if (typeof window !== 'undefined') {
       xhr.send(data)
     }
 
+    /**
+     * Assigns `view-transition-name` CSS properties to all elements carrying
+     * the `odac-transition` attribute, enabling the browser's native View
+     * Transition API to animate them individually during navigation.
+     *
+     * @returns {Element[]} The list of elements that received transition names.
+     */
+    #applyTransitionNames() {
+      const elements = document.querySelectorAll('[odac-transition]')
+      elements.forEach(el => {
+        el.style.viewTransitionName = el.getAttribute('odac-transition')
+      })
+      return Array.from(elements)
+    }
+
+    /**
+     * Removes `view-transition-name` from previously tagged elements to
+     * prevent stale names from conflicting with future transitions.
+     *
+     * @param {Element[]} elements - Elements to clean up.
+     */
+    #clearTransitionNames(elements) {
+      elements.forEach(el => {
+        el.style.viewTransitionName = ''
+      })
+    }
+
     #fade(element, type, duration = 400, callback) {
       const isIn = type === 'in'
       const startOpacity = isIn ? 0 : 1
@@ -720,6 +747,20 @@ if (typeof window !== 'undefined') {
         .replace(/\n/g, '<br>')
     }
 
+    /**
+     * Decodes HTML entities back to their plain-text representation.
+     * Uses a textarea element as a safe decoder — no script execution risk.
+     *
+     * @param {string} str - HTML-encoded string (e.g. "&amp;" → "&").
+     * @returns {string} Decoded plain-text string.
+     */
+    #decodeHtmlEntities(str) {
+      if (typeof str !== 'string') return str
+      const textarea = document.createElement('textarea')
+      textarea.innerHTML = str
+      return textarea.value
+    }
+
     load(url, callback, push = true) {
       if (this.#isNavigating) return false
 
@@ -739,6 +780,84 @@ if (typeof window !== 'undefined') {
         if (element) elementsToUpdate.push({key, element})
       })
 
+      const useViewTransition = document.startViewTransition && document.querySelectorAll('[odac-transition]').length > 0
+
+      if (useViewTransition) {
+        this.#loadWithViewTransition(url, callback, push, currentUrl, currentSkeleton, elementsToUpdate)
+      } else {
+        this.#loadWithFade(url, callback, push, currentUrl, currentSkeleton, elementsToUpdate)
+      }
+    }
+
+    /**
+     * Performs page navigation using the browser's native View Transition API.
+     * Elements with `odac-transition` attributes receive individual transition
+     * names, enabling per-element morphing animations orchestrated by the browser.
+     * Non-transition elements still update their content within the transition frame.
+     */
+    #loadWithViewTransition(url, callback, push, currentUrl, currentSkeleton, elementsToUpdate) {
+      const oldTransitionElements = this.#applyTransitionNames()
+
+      this.#ajax({
+        url,
+        type: 'GET',
+        headers: {
+          'X-Odac': 'ajaxload',
+          'X-Odac-Load': Object.keys(this.#loader.elements).join(','),
+          'X-Odac-Skeleton': currentSkeleton || ''
+        },
+        dataType: 'json',
+        success: (data, status, xhr) => {
+          const finalUrl = xhr.responseURL || url
+          if (data.skeletonChanged) {
+            this.#clearTransitionNames(oldTransitionElements)
+            window.location.href = finalUrl
+            return
+          }
+
+          const transition = document.startViewTransition(() => {
+            if (finalUrl !== currentUrl && push) window.history.pushState(null, document.title, finalUrl)
+
+            const newPage = xhr.getResponseHeader('X-Odac-Page')
+            if (newPage !== null) {
+              this.#page = newPage
+              document.documentElement.dataset.odacPage = newPage
+            }
+
+            if (data.data) this.#data = data.data
+            if (data.title) document.title = this.#decodeHtmlEntities(data.title)
+
+            elementsToUpdate.forEach(({key, element}) => {
+              if (data.output && data.output[key] !== undefined) element.innerHTML = data.output[key]
+            })
+
+            this.#applyTransitionNames()
+          })
+
+          transition.finished
+            .then(() => {
+              this.#clearTransitionNames(document.querySelectorAll('[odac-transition]'))
+              this.#handleLoadComplete(data, callback)
+            })
+            .catch(() => {
+              this.#clearTransitionNames(document.querySelectorAll('[odac-transition]'))
+              this.#isNavigating = false
+            })
+        },
+        error: () => {
+          this.#clearTransitionNames(oldTransitionElements)
+          this.#isNavigating = false
+          window.location.replace(url)
+        }
+      })
+    }
+
+    /**
+     * Performs page navigation using the legacy fade-in/fade-out animation.
+     * This is the fallback path when the View Transition API is unavailable
+     * or no `odac-transition` elements exist in the DOM.
+     */
+    #loadWithFade(url, callback, push, currentUrl, currentSkeleton, elementsToUpdate) {
       let ajaxData = null,
         ajaxXhr = null,
         fadeOutComplete = false,
@@ -761,7 +880,7 @@ if (typeof window !== 'undefined') {
         }
 
         if (ajaxData.data) this.#data = ajaxData.data
-        if (ajaxData.title) document.title = ajaxData.title
+        if (ajaxData.title) document.title = this.#decodeHtmlEntities(ajaxData.title)
 
         if (elementsToUpdate.length === 0) {
           this.#handleLoadComplete(ajaxData, callback)
@@ -794,7 +913,7 @@ if (typeof window !== 'undefined') {
       }
 
       this.#ajax({
-        url: url,
+        url,
         type: 'GET',
         headers: {
           'X-Odac': 'ajaxload',

package/docs/ai/skills/backend/views.md

@@ -14,12 +14,18 @@ Views in ODAC are logic-light but powerful. They support automatic XSS protectio
 
 ## Core Rules
 1.  **Skeleton Architecture**: Use `Odac.View.skeleton('name')` to wrap content in a layout.
-2.  **Data Binding**:
-    -   `{{ key }}`: Escaped output (Standard).
-    -   `{!! key !!}`: Raw output (Use with extreme caution).
-3.  **Conditionals**: Use `<odac:if condition="VAR"> ... </odac:if>`.
-4.  **Looping**: Use `<odac:for in="ARRAY" value="ITEM"> ... </odac:for>` or the performance-optimized `[[odac_for ...]]`.
-5.  **Server-Side JS**: Use `<script:odac>` for complex calculations during rendering.
+2.  **Data Binding — Two Equivalent Syntaxes**:
+    -   `<odac var="key" />`: Tag-based output (HTML-escaped, XSS-safe).
+    -   `{{ key }}`: Inline/interpolation output (HTML-escaped, XSS-safe). Identical behavior to `<odac var>`.
+    -   `<odac var="key" raw />` or `{!! key !!}`: Raw output (Use with extreme caution).
+3.  **Choosing the Right Syntax**:
+    -   **Inside HTML attributes** (`src`, `alt`, `href`, `class`, `value`, etc.) → Always prefer `{{ }}`. It reads naturally and keeps markup clean.
+    -   **Inline within text or mixed HTML** → Prefer `{{ }}` for short interpolations.
+    -   **Standalone block output** (the variable is the only content of an element) → Prefer `<odac var="" />` for structural clarity and IDE support.
+    -   Both syntaxes compile to the same engine output. The choice is about readability, not functionality.
+4.  **Conditionals**: Use `<odac:if condition="VAR"> ... </odac:if>`.
+5.  **Looping**: Use `<odac:for in="ARRAY" value="ITEM"> ... </odac:for>` or the performance-optimized `[[odac_for ...]]`.
+6.  **Server-Side JS**: Use `<script:odac>` for complex calculations during rendering.
 
 ## Reference Patterns
 
@@ -35,8 +41,17 @@ Odac.View.set({
 
 ### 2. Template Syntax Reference
 ```html
-<!-- Display Variable -->
-<h1>{{ title }}</h1>
+<!-- Standalone block output — prefer <odac var> -->
+<h1><odac var="title" /></h1>
+
+<!-- Inside attributes — prefer {{ }} -->
+<img src="{{ product.image }}" alt="{{ product.name }}">
+<a href="/user/{{ user.id }}" class="btn {{ isActive ? 'active' : '' }}">Profile</a>
+<input type="text" value="{{ query }}">
+
+<!-- Inline text interpolation — prefer {{ }} -->
+<p>Welcome, {{ user.name }}. You have {{ notifications }} new messages.</p>
+<span>${{ product.price }}</span>
 
 <!-- Conditional -->
 <odac:if condition="stats.users > 100">
@@ -62,7 +77,17 @@ Perfect for calculations that shouldn't clutter the controller but are too compl
 <p>Tax: ${{ tax }}</p>
 ```
 
+## Syntax Selection Guide
+
+| Context | Preferred Syntax | Example |
+|---------|-----------------|---------|
+| HTML attributes (`src`, `href`, `alt`, `class`, `value`) | `{{ }}` | `<img src="{{ photo.url }}" alt="{{ photo.caption }}">` |
+| Inline text within elements | `{{ }}` | `<p>Hello, {{ user.name }}</p>` |
+| Standalone element content | `<odac var />` | `<h1><odac var="title" /></h1>` |
+| Raw HTML output (trusted only) | `<odac var raw />` or `{!! !!}` | `<div><odac var="content" raw /></div>` |
+
 ## Security Best Practices
--   **Always use `{{ }}`**: Standard tags prevent XSS.
+-   **Both `{{ }}` and `<odac var>` are XSS-safe**: Both apply HTML escaping by default. Use either with confidence.
+-   **Raw output requires trust**: Only use `raw` / `{!! !!}` with content you fully control. Never with user input.
 -   **Limit `<script:odac>`**: Do not perform database queries or API calls inside views; keep them in the controller.
 -   **Partial Awareness**: Use `<odac:include view="path.to.view" />` for reusable components.

package/docs/ai/skills/frontend/navigation.md

@@ -2,7 +2,7 @@
 name: frontend-navigation-spa-skill
 description: Single-page navigation patterns in odac.js for smooth transitions, route control, and lifecycle-safe execution.
 metadata:
-  tags: frontend, navigation, spa, ajax-navigation, page-lifecycle, transitions
+  tags: frontend, navigation, spa, ajax-navigation, page-lifecycle, transitions, view-transitions
 ---
 
 # Frontend Navigation & SPA Skill
@@ -13,6 +13,7 @@ Smooth transitions and single-page application behavior using `odac.js`.
 1.  **Selection**: Enable via `Odac.action({ navigate: 'main' })`.
 2.  **Exclusion**: Use `data-navigate="false"` or `.no-navigate` class for full reloads.
 3.  **Lifecycle**: Use `load` and `page` events to run code after navigation.
+4.  **View Transitions**: Add `odac-transition` attribute to elements for native browser View Transition API animations. Zero-config — no JS setup required.
 
 ## Patterns
 ```javascript
@@ -25,3 +26,46 @@ Odac.action({
   }
 });
 ```
+
+## View Transitions (Native Browser API)
+
+Elements with the `odac-transition` attribute automatically use the browser's View Transition API instead of the legacy fade animation. The attribute value becomes the `view-transition-name`, enabling per-element morphing between pages.
+
+### HTML Usage
+```html
+<header odac-transition="header">Site Header</header>
+<nav odac-transition="sidebar">Navigation</nav>
+<main>Content updated by AJAX loader</main>
+<img odac-transition="hero" src="/hero.jpg" />
+```
+
+### Behavior
+- When `odac-transition` elements exist and the browser supports View Transition API → native transition is used.
+- When no `odac-transition` elements exist or the API is unsupported → legacy fade fallback runs automatically.
+- Transition names are applied before the snapshot and cleaned up after the transition completes.
+- The attribute value must be unique per page (browser requirement for `view-transition-name`).
+
+### CSS Customization
+```css
+/* Target a specific element's transition */
+::view-transition-old(hero) {
+  animation: fade-out 0.3s ease;
+}
+::view-transition-new(hero) {
+  animation: fade-in 0.3s ease;
+}
+
+/* Slide sidebar from left */
+::view-transition-old(sidebar) {
+  animation: slide-out-left 0.25s ease;
+}
+::view-transition-new(sidebar) {
+  animation: slide-in-left 0.25s ease;
+}
+```
+
+### Rules
+1. Each `odac-transition` value must be unique within the page.
+2. Elements persist across navigations (e.g., shared header) for smooth morphing.
+3. No JavaScript configuration needed — attribute-only setup.
+4. Falls back to fade animation gracefully on unsupported browsers.

package/docs/backend/07-views/03-template-syntax.md

@@ -1,8 +1,17 @@
 ## 🔧 Template Syntax Overview
 
-Odac uses a powerful template engine to create dynamic content in view files. The engine provides a clean, HTML-like syntax for displaying variables, conditionals, loops, translations, and more.
+Odac uses a powerful template engine to create dynamic content in view files. The engine provides two equivalent syntaxes for displaying variables, plus dedicated tags for conditionals, loops, translations, and more.
 
-> **Note:** Odac also supports legacy syntax (`{{ }}`, `{!! !!}`, `{{-- --}}`) for backward compatibility, but the new `<odac>` tag syntax is recommended for all new projects.
+### Two Syntaxes, One Engine
+
+ODAC offers two ways to output variables. Both are HTML-escaped (XSS-safe) and compile to the same engine code. The choice is about readability, not functionality.
+
+| Syntax | Best For | Example |
+|--------|----------|---------|
+| `<odac var="x" />` | Standalone block output where the variable is the main content | `<h1><odac var="title" /></h1>` |
+| `{{ x }}` | Attributes, inline text, and mixed HTML where tag syntax would be verbose | `<img src="{{ photo.url }}" alt="{{ photo.caption }}">` |
+
+> **Guideline:** Use `{{ }}` inside HTML attributes (`src`, `href`, `alt`, `class`, `value`, etc.) and for inline text interpolation. Use `<odac var>` for standalone element content. Both are equally supported and recommended.
 
 ### Quick Reference
 
@@ -13,10 +22,17 @@ This page provides a quick overview of all available template features. For deta
 Display data passed from controllers using `Odac.set()`:
 
 ```html
-<!-- HTML-safe output -->
-<odac var="username" />
+<!-- Standalone block output — prefer <odac var> -->
+<h1><odac var="username" /></h1>
+
+<!-- Inside attributes — prefer {{ }} -->
+<img src="{{ product.image }}" alt="{{ product.name }}">
+<a href="/user/{{ user.id }}">Profile</a>
 
-<!-- Raw HTML output -->
+<!-- Inline text — prefer {{ }} -->
+<p>Welcome, {{ user.name }}. You have {{ count }} items.</p>
+
+<!-- Raw HTML output (trusted content only) -->
 <odac var="htmlContent" raw />
 
 <!-- String literals -->
@@ -163,8 +179,10 @@ Full access to the Odac object in templates:
 
 | Feature | Syntax | Documentation |
 |---------|--------|---------------|
-| Variable (Controller) | `<odac var="x" />` | [Variables](./03-variables.md) |
-| Raw HTML | `<odac var="x" raw />` | [Variables](./03-variables.md) |
+| Variable (standalone) | `<odac var="x" />` | [Variables](./03-variables.md) |
+| Variable (inline/attribute) | `{{ x }}` | [Variables](./03-variables.md) |
+| Raw HTML (tag) | `<odac var="x" raw />` | [Variables](./03-variables.md) |
+| Raw HTML (inline) | `{!! x !!}` | [Variables](./03-variables.md) |
 | String | `<odac>text</odac>` | [Variables](./03-variables.md) |
 | Query Parameter | `<odac get="key" />` | [Request Data](./04-request-data.md) |
 | Translation | `<odac translate>key</odac>` | [Translations](./07-translations.md) |
@@ -180,18 +198,34 @@ Full access to the Odac object in templates:
 | Comment | `<!--odac ... odac-->` | [Comments](./09-comments.md) |
 | Image | `<odac:img src="..." />` | [Image Optimization](./11-image-optimization.md) |
 
-### Legacy Syntax
+### Syntax Selection Guide
+
+Choose the right syntax based on context for clean, readable templates:
 
 ```html
-<!-- Variable output -->
-{{ username }}
+<!-- ✅ Attributes — use {{ }} -->
+<img src="{{ product.image }}" alt="{{ product.name }}">
+<a href="/products/{{ product.id }}" class="card {{ isActive ? 'active' : '' }}">
+<input type="text" name="search" value="{{ query }}">
+
+<!-- ✅ Inline text — use {{ }} -->
+<p>Hello, {{ user.name }}. You have {{ count }} notifications.</p>
+<span>${{ product.price }}</span>
+
+<!-- ✅ Standalone block content — use <odac var> -->
+<h1><odac var="pageTitle" /></h1>
+<td><odac var="user.email" /></td>
+
+<!-- ✅ Raw output — either form works -->
+<div><odac var="richContent" raw /></div>
+<div>{!! richContent !!}</div>
+```
 
-<!-- Raw HTML -->
-{!! htmlContent !!}
+### Legacy Comment Syntax
 
-<!-- Comments -->
+```html
 {{-- This is a comment --}}
 ```
 
-**Note:** The new `<odac>` tag syntax is recommended for all new projects.
+**Note:** For new projects, prefer the `<!--odac ... odac-->` comment syntax for consistency.
 

package/docs/backend/07-views/03-variables.md

@@ -311,18 +311,33 @@ module.exports = async function(Odac) {
 </odac:if>
 ```
 
-### Legacy Syntax (Backward Compatibility)
+### Inline Syntax (`{{ }}` and `{!! !!}`)
 
-Odac also supports legacy syntax:
+ODAC provides an inline interpolation syntax that is equivalent to the `<odac var>` tag. Both compile to the same engine output and are equally supported.
+
+**Use `{{ }}` when the variable appears inside HTML attributes or inline within text:**
 
 ```html
-<!-- HTML-safe output -->
-{{ username }}
-{{ user.email }}
+<!-- Inside attributes — {{ }} keeps markup clean -->
+<img src="{{ product.image }}" alt="{{ product.name }}">
+<a href="/user/{{ user.id }}" class="btn {{ isActive ? 'active' : '' }}">Profile</a>
+<input type="text" name="q" value="{{ searchQuery }}">
+
+<!-- Inline text interpolation -->
+<p>Welcome, {{ user.name }}. You have {{ notifications }} new messages.</p>
+<span>${{ product.price }}</span>
 
-<!-- Raw HTML output -->
+<!-- Raw inline output (trusted content only) -->
 {!! htmlContent !!}
 {!! user.bio !!}
 ```
 
-**Note:** The new `<odac>` tag syntax is recommended for all new projects as it provides better IDE support and readability.
+**Use `<odac var>` when the variable is the standalone content of an element:**
+
+```html
+<h1><odac var="pageTitle" /></h1>
+<td><odac var="user.email" /></td>
+<p><odac var="product.description" /></p>
+```
+
+Both syntaxes are XSS-safe by default (HTML-escaped). The choice is purely about readability. See [Template Syntax Overview](./03-template-syntax.md) for the full selection guide.

package/docs/frontend/02-ajax-navigation/01-quick-start.md

@@ -6,6 +6,7 @@ Odac framework includes a built-in AJAX navigation system that enables smooth, s
 
 - **Zero Configuration**: Works automatically with all internal links (`/`)
 - **Smooth Transitions**: Load only specific page sections without full page reload
+- **Native View Transitions**: Automatic browser View Transition API support via `odac-transition` attribute
 - **History API Integration**: Browser back/forward buttons work seamlessly
 - **Automatic Token Management**: CSRF tokens are handled automatically
 - **Progressive Enhancement**: Falls back to normal navigation if JavaScript fails
@@ -178,6 +179,27 @@ module.exports = function (Odac) {
 5. Browser URL updates via History API
 6. Page-specific callbacks execute
 
+### View Transition Load (with `odac-transition` elements)
+
+When elements with `odac-transition` attribute exist on the page and the browser supports the View Transition API, ODAC uses native transitions instead of fade:
+
+1. User clicks `<a href="/about">`
+2. ODAC assigns `view-transition-name` to all `odac-transition` elements (old state snapshot)
+3. AJAX request is sent (same as above)
+4. `document.startViewTransition()` is called — browser captures old state
+5. DOM is updated with new content inside the transition callback
+6. New `odac-transition` elements receive their names
+7. Browser animates between old and new snapshots
+8. Transition names are cleaned up after completion
+
+No configuration needed — just add the attribute to your HTML:
+
+```html
+<header odac-transition="header">{{ HEADER }}</header>
+<main>{{ CONTENT }}</main>
+<img odac-transition="hero" src="/hero.jpg" alt="Hero" />
+```
+
 **Key Points:**
 - The `output` keys in the JSON response match the lowercase keys from `Odac.View.set()` in your controller
 - These keys correspond to UPPERCASE placeholders in your skeleton (e.g., `content` → `{{ CONTENT }}`)

package/docs/frontend/02-ajax-navigation/03-advanced-usage.md

@@ -143,6 +143,57 @@ Odac.action({
 
 ## Animation & Transitions
 
+### View Transitions (Recommended)
+
+ODAC natively supports the browser's [View Transition API](https://developer.mozilla.org/en-US/docs/Web/API/View_Transition_API). Add the `odac-transition` attribute to any element that should animate between page navigations. No JavaScript configuration is needed.
+
+```html
+<header odac-transition="header">Site Header</header>
+<nav odac-transition="sidebar">Navigation</nav>
+<main>Regular content (updated by AJAX loader)</main>
+<img odac-transition="hero" src="/hero.jpg" alt="Hero" />
+```
+
+**How it works:**
+- Before navigation, ODAC assigns `view-transition-name` to each `odac-transition` element
+- The browser captures a snapshot of the old state
+- DOM is updated with new content
+- New `odac-transition` elements receive their transition names
+- The browser animates between old and new snapshots
+
+**Rules:**
+1. Each `odac-transition` value must be unique within the page (browser requirement)
+2. Elements that persist across pages (e.g., shared header) will morph smoothly
+3. If the browser doesn't support View Transition API, the legacy fade animation runs automatically
+
+**CSS Customization:**
+
+```css
+/* Crossfade the hero image */
+::view-transition-old(hero) {
+  animation: fade-out 0.3s ease;
+}
+::view-transition-new(hero) {
+  animation: fade-in 0.3s ease;
+}
+
+/* Slide the sidebar */
+::view-transition-old(sidebar) {
+  animation: slide-out-left 0.25s ease;
+}
+::view-transition-new(sidebar) {
+  animation: slide-in-left 0.25s ease;
+}
+
+/* Default transition for all elements */
+::view-transition-old(*) {
+  animation-duration: 0.2s;
+}
+::view-transition-new(*) {
+  animation-duration: 0.2s;
+}
+```
+
 ### Custom Transitions
 
 Add custom animations:

package/package.json

@@ -7,7 +7,7 @@
     "email": "mail@emre.red",
     "url": "https://emre.red"
   },
-  "version": "1.4.4",
+  "version": "1.4.5",
   "license": "MIT",
   "engines": {
     "node": ">=18.0.0"

package/template/controller/page/about.js

@@ -1,8 +1,8 @@
 /**
  * About Page Controller
  *
- * This controller renders the about page using Odac's skeleton-based view system.
- * Provides information about Odac and its key components.
+ * This controller renders the about page using ODAC's skeleton-based view system.
+ * Provides information about ODAC and its key components.
  *
  * For AJAX requests, only content is returned. For full page loads, skeleton + content.
  */
@@ -11,7 +11,7 @@ module.exports = function (Odac) {
   // Set variables for AJAX responses
   Odac.set(
     {
-      pageTitle: 'About Odac',
+      pageTitle: 'About ODAC',
       version: '1.0.0'
     },
     true

package/template/controller/page/index.js

@@ -1,7 +1,7 @@
 /**
  * Home Page Controller
  *
- * This controller renders the home page using Odac's skeleton-based view system.
+ * This controller renders the home page using ODAC's skeleton-based view system.
  * The skeleton provides the layout (header, nav, footer) and the view provides the content.
  *
  * For AJAX requests (odac-link navigation), only the content is returned.
@@ -18,7 +18,7 @@ module.exports = function (Odac) {
   // Set variables that will be available in AJAX responses
   Odac.set(
     {
-      welcomeMessage: 'Welcome to Odac!',
+      welcomeMessage: 'Welcome to ODAC!',
       timestamp: Date.now()
     },
     true