asjs-express 1.1.0

package/lib/client/asjs-router.js

@@ -0,0 +1,989 @@
+(function createASJSRouter() {
+  function nextFrame() {
+    return new Promise((resolve) => {
+      window.requestAnimationFrame(() => {
+        window.requestAnimationFrame(resolve);
+      });
+    });
+  }
+
+  function wait(duration) {
+    return new Promise((resolve) => {
+      window.setTimeout(resolve, duration);
+    });
+  }
+
+  function parseBooleanAttribute(value, fallback) {
+    if (value === undefined || value === null || value === '') {
+      return fallback;
+    }
+
+    return !['false', '0', 'off', 'no'].includes(String(value).toLowerCase());
+  }
+
+  function parseNumberAttribute(value, fallback) {
+    const normalized = Number.parseInt(value, 10);
+    return Number.isFinite(normalized) && normalized >= 0 ? normalized : fallback;
+  }
+
+  function normalizePathname(value) {
+    const normalized = String(value || '/').replace(/\/+$/, '');
+    return normalized || '/';
+  }
+
+  function isActivePath(targetPath, currentPath, mode) {
+    const normalizedTarget = normalizePathname(targetPath);
+    const normalizedCurrent = normalizePathname(currentPath);
+
+    if (mode === 'prefix') {
+      if (normalizedTarget === '/') {
+        return normalizedCurrent === '/';
+      }
+
+      return normalizedCurrent === normalizedTarget || normalizedCurrent.startsWith(`${normalizedTarget}/`);
+    }
+
+    return normalizedCurrent === normalizedTarget;
+  }
+
+  function normalizeUrl(url) {
+    const normalized = new URL(url, window.location.href);
+    normalized.hash = '';
+    return normalized.toString();
+  }
+
+  function copyAttributes(currentNode, nextNode) {
+    Array.from(currentNode.attributes).forEach((attribute) => {
+      if (!nextNode.hasAttribute(attribute.name)) {
+        currentNode.removeAttribute(attribute.name);
+      }
+    });
+
+    Array.from(nextNode.attributes).forEach((attribute) => {
+      currentNode.setAttribute(attribute.name, attribute.value);
+    });
+  }
+
+  function reviveScripts(scope) {
+    scope.querySelectorAll('script').forEach((oldScript) => {
+      const newScript = document.createElement('script');
+
+      Array.from(oldScript.attributes).forEach((attribute) => {
+        newScript.setAttribute(attribute.name, attribute.value);
+      });
+
+      newScript.textContent = oldScript.textContent;
+      oldScript.replaceWith(newScript);
+    });
+  }
+
+  function cloneManagedHeadNode(source) {
+    const node = document.createElement(source.tagName.toLowerCase());
+
+    Array.from(source.attributes).forEach((attribute) => {
+      node.setAttribute(attribute.name, attribute.value);
+    });
+
+    if (source.tagName === 'SCRIPT' || source.tagName === 'STYLE') {
+      node.textContent = source.textContent;
+    }
+
+    return node;
+  }
+
+  function syncManagedHead(parsedDocument) {
+    if (!parsedDocument.head) {
+      return;
+    }
+
+    const selector = '[data-asjs-head-key]';
+    const currentNodes = Array.from(document.head.querySelectorAll(selector));
+    const nextNodes = Array.from(parsedDocument.head.querySelectorAll(selector));
+    const currentMap = new Map();
+    const nextKeys = new Set();
+
+    currentNodes.forEach((node) => {
+      const key = node.getAttribute('data-asjs-head-key');
+
+      if (key) {
+        currentMap.set(key, node);
+      }
+    });
+
+    nextNodes.forEach((node) => {
+      const key = node.getAttribute('data-asjs-head-key');
+
+      if (!key) {
+        return;
+      }
+
+      nextKeys.add(key);
+
+      const currentNode = currentMap.get(key);
+      if (currentNode && currentNode.outerHTML === node.outerHTML) {
+        return;
+      }
+
+      const clone = cloneManagedHeadNode(node);
+
+      if (currentNode) {
+        currentNode.replaceWith(clone);
+      } else {
+        document.head.appendChild(clone);
+      }
+    });
+
+    currentNodes.forEach((node) => {
+      const key = node.getAttribute('data-asjs-head-key');
+
+      if (key && !nextKeys.has(key)) {
+        node.remove();
+      }
+    });
+  }
+
+  function syncBodyData(parsedDocument) {
+    const nextBody = parsedDocument.body;
+    if (!nextBody) {
+      return;
+    }
+
+    [
+      'data-asjs-transition',
+      'data-asjs-transition-duration',
+      'data-asjs-prefetch',
+      'data-asjs-prefetch-ttl',
+      'data-asjs-loading-bar'
+    ].forEach((attributeName) => {
+      if (nextBody.hasAttribute(attributeName)) {
+        document.body.setAttribute(attributeName, nextBody.getAttribute(attributeName));
+      } else {
+        document.body.removeAttribute(attributeName);
+      }
+    });
+  }
+
+  function appendFormDataToSearchParams(searchParams, formData) {
+    formData.forEach((value, key) => {
+      searchParams.append(key, value);
+    });
+
+    return searchParams;
+  }
+
+  function formDataToSearchParams(formData) {
+    return appendFormDataToSearchParams(new URLSearchParams(), formData);
+  }
+
+  function formDataToJson(formData) {
+    const payload = {};
+
+    formData.forEach((value, key) => {
+      if (Object.prototype.hasOwnProperty.call(payload, key)) {
+        if (Array.isArray(payload[key])) {
+          payload[key].push(value);
+          return;
+        }
+
+        payload[key] = [payload[key], value];
+        return;
+      }
+
+      payload[key] = value;
+    });
+
+    return payload;
+  }
+
+  function isHtmlPayload(contentType, payload) {
+    if (contentType && contentType.includes('text/html')) {
+      return true;
+    }
+
+    return typeof payload === 'string' && payload.includes('<html');
+  }
+
+  function createInlineResponseMarkup(message, tone) {
+    const root = document.createElement('div');
+    root.className = `asjs-inline-response ${tone === 'error' ? 'is-error' : 'is-success'}`;
+    const text = document.createElement('p');
+    text.textContent = message;
+    root.appendChild(text);
+    return root.outerHTML;
+  }
+
+  function clearTransitionClasses(node) {
+    Array.from(node.classList).forEach((className) => {
+      if (
+        className.startsWith('asjs-transition-name--') ||
+        className.startsWith('asjs-transition-phase--')
+      ) {
+        node.classList.remove(className);
+      }
+    });
+  }
+
+  class ASJSNavigator {
+    constructor(options = {}) {
+      this.linkSelector = options.linkSelector || 'a[data-asjs-link]';
+      this.viewSelector = options.viewSelector || '[data-asjs-view]';
+      this.defaultFormSelector = options.formSelector || 'form[data-asjs-form], form[data-webas-submit]';
+      this.formSelector = this.defaultFormSelector;
+      this.activeClass = options.activeClass || 'is-active';
+      this.defaultPrefetch = options.prefetch !== false;
+      this.defaultPrefetchTtl = parseNumberAttribute(options.prefetchTtl, 30000);
+      this.defaultLoadingBar = options.loadingBar !== false;
+      this.defaultForms = options.forms !== false;
+      this.defaultFormMode = options.formMode || 'view';
+      this.defaultFormHistory = Boolean(options.formHistory);
+      this.defaultFormResetOnSuccess = Boolean(options.formResetOnSuccess);
+      this.defaultFormTarget = options.formTarget || '';
+      this.defaultFormSwap = options.formSwap || 'replace';
+      this.pageCache = new Map();
+      this.prefetchRequests = new Map();
+      this.isNavigating = false;
+      this.progressStartedAt = 0;
+      this.progressShownAt = 0;
+      this.progressShowTimer = null;
+      this.progressRoot = document.querySelector('[data-asjs-progress]');
+      this.progressBar = this.progressRoot ? this.progressRoot.querySelector('.asjs-progress-bar') : null;
+      this.progressRampTimer = null;
+      this.progressHideTimer = null;
+      this.applyDocumentSettings(document.body);
+      this.bindEvents();
+      this.syncActiveLinks(window.location.pathname);
+    }
+
+    applyDocumentSettings(root) {
+      this.prefetchEnabled = parseBooleanAttribute(root && root.dataset.asjsPrefetch, this.defaultPrefetch);
+      this.prefetchTtl = parseNumberAttribute(root && root.dataset.asjsPrefetchTtl, this.defaultPrefetchTtl);
+      this.loadingBarEnabled = parseBooleanAttribute(root && root.dataset.asjsLoadingBar, this.defaultLoadingBar);
+      this.formsEnabled = parseBooleanAttribute(root && root.dataset.asjsForms, this.defaultForms);
+      this.formSelector = (root && root.dataset.asjsFormSelector) || this.defaultFormSelector;
+      this.formMode = (root && root.dataset.asjsFormMode) || this.defaultFormMode;
+      this.formHistory = parseBooleanAttribute(root && root.dataset.asjsFormHistory, this.defaultFormHistory);
+      this.formResetOnSuccess = parseBooleanAttribute(root && root.dataset.asjsFormResetOnSuccess, this.defaultFormResetOnSuccess);
+      this.formTarget = (root && root.dataset.asjsFormTarget) || this.defaultFormTarget;
+      this.formSwap = (root && root.dataset.asjsFormSwap) || this.defaultFormSwap;
+    }
+
+    ensureProgressBar() {
+      if (!this.progressRoot) {
+        this.progressRoot = document.createElement('div');
+        this.progressRoot.className = 'asjs-progress';
+        this.progressRoot.dataset.asjsProgress = 'true';
+        this.progressRoot.innerHTML = '<span class="asjs-progress-bar"></span>';
+        document.body.prepend(this.progressRoot);
+      }
+
+      this.progressBar = this.progressRoot.querySelector('.asjs-progress-bar');
+      return Boolean(this.progressRoot && this.progressBar);
+    }
+
+    startProgress() {
+      if (!this.loadingBarEnabled || !this.ensureProgressBar()) {
+        return;
+      }
+
+      this.progressStartedAt = Date.now();
+      this.progressShownAt = 0;
+      window.clearTimeout(this.progressShowTimer);
+      window.clearTimeout(this.progressRampTimer);
+      window.clearTimeout(this.progressHideTimer);
+      this.progressRoot.classList.remove('is-active');
+      this.progressBar.style.opacity = '0';
+      this.progressBar.style.transform = 'scaleX(0)';
+      this.progressShowTimer = window.setTimeout(() => {
+        this.progressShownAt = Date.now();
+        this.progressRoot.classList.add('is-active');
+        this.progressBar.style.opacity = '1';
+        this.progressBar.style.transform = 'scaleX(0.18)';
+        this.progressRampTimer = window.setTimeout(() => {
+          this.progressBar.style.transform = 'scaleX(0.58)';
+        }, 90);
+      }, 110);
+    }
+
+    completeProgress() {
+      if (!this.loadingBarEnabled || !this.ensureProgressBar()) {
+        return;
+      }
+
+      window.clearTimeout(this.progressShowTimer);
+      window.clearTimeout(this.progressRampTimer);
+      window.clearTimeout(this.progressHideTimer);
+
+      if (!this.progressRoot.classList.contains('is-active')) {
+        this.progressBar.style.opacity = '0';
+        this.progressBar.style.transform = 'scaleX(0)';
+        return;
+      }
+
+      const elapsed = this.progressShownAt ? Date.now() - this.progressShownAt : 0;
+      const remainingVisibleTime = Math.max(0, 220 - elapsed);
+
+      this.progressBar.style.opacity = '1';
+      this.progressBar.style.transform = 'scaleX(1)';
+      this.progressHideTimer = window.setTimeout(() => {
+        this.progressRoot.classList.remove('is-active');
+        this.progressBar.style.opacity = '0';
+        this.progressBar.style.transform = 'scaleX(0)';
+      }, remainingVisibleTime + 180);
+    }
+
+    bindEvents() {
+      document.addEventListener('click', (event) => {
+        const link = event.target.closest(this.linkSelector);
+
+        if (!link || !this.shouldHandleClick(link, event)) {
+          return;
+        }
+
+        event.preventDefault();
+        this.visit(link.href, { pushState: true, trigger: link });
+      });
+
+      document.addEventListener('mouseover', (event) => {
+        const link = event.target.closest(this.linkSelector);
+
+        if (link) {
+          this.prefetchLink(link);
+        }
+      });
+
+      document.addEventListener('focusin', (event) => {
+        const link = event.target.closest(this.linkSelector);
+
+        if (link) {
+          this.prefetchLink(link);
+        }
+      });
+
+      document.addEventListener('touchstart', (event) => {
+        const link = event.target.closest(this.linkSelector);
+
+        if (link) {
+          this.prefetchLink(link);
+        }
+      }, { passive: true });
+
+      document.addEventListener('submit', (event) => {
+        const form = event.target.closest(this.formSelector);
+
+        if (!form || !this.shouldHandleForm(form, event)) {
+          return;
+        }
+
+        event.preventDefault();
+        this.submitForm(form, { submitter: event.submitter || null });
+      });
+
+      window.addEventListener('popstate', () => {
+        this.visit(window.location.href, { pushState: false, preserveScroll: true });
+      });
+    }
+
+    shouldHandleClick(link, event) {
+      if (
+        event.defaultPrevented ||
+        event.button !== 0 ||
+        event.metaKey ||
+        event.ctrlKey ||
+        event.shiftKey ||
+        event.altKey ||
+        link.target === '_blank' ||
+        link.hasAttribute('download')
+      ) {
+        return false;
+      }
+
+      const nextUrl = new URL(link.href, window.location.href);
+      const currentUrl = new URL(window.location.href);
+
+      if (nextUrl.origin !== currentUrl.origin) {
+        return false;
+      }
+
+      if (
+        nextUrl.pathname === currentUrl.pathname &&
+        nextUrl.search === currentUrl.search &&
+        nextUrl.hash
+      ) {
+        return false;
+      }
+
+      return true;
+    }
+
+    shouldHandleForm(form, event) {
+      if (event.defaultPrevented || !this.formsEnabled) {
+        return false;
+      }
+
+      if (form.dataset.asjsForm === 'false' || form.target === '_blank') {
+        return false;
+      }
+
+      const action = form.getAttribute('action') || window.location.href;
+      const actionUrl = new URL(action, window.location.href);
+      const currentUrl = new URL(window.location.href);
+
+      if (actionUrl.origin !== currentUrl.origin) {
+        return false;
+      }
+
+      return ['GET', 'POST', 'PUT', 'PATCH', 'DELETE'].includes(
+        String(form.getAttribute('method') || 'GET').toUpperCase()
+      );
+    }
+
+    resolveFormOptions(form) {
+      return {
+        action: new URL(form.getAttribute('action') || window.location.href, window.location.href).toString(),
+        method: String(form.getAttribute('method') || 'GET').toUpperCase(),
+        mode: String(form.dataset.asjsFormMode || this.formMode || 'view').toLowerCase(),
+        history: parseBooleanAttribute(form.dataset.asjsFormHistory, this.formHistory),
+        resetOnSuccess: parseBooleanAttribute(form.dataset.asjsFormResetOnSuccess, this.formResetOnSuccess),
+        target: form.dataset.asjsFormTarget || this.formTarget || '',
+        swap: String(form.dataset.asjsFormSwap || this.formSwap || 'replace').toLowerCase(),
+        bodyMode: String(form.dataset.asjsFormBody || '').toLowerCase(),
+        preserveScroll: parseBooleanAttribute(form.dataset.asjsFormPreserveScroll, false),
+        transition: form.dataset.asjsTransition || null
+      };
+    }
+
+    createFormRequest(form, settings, submitter) {
+      const requestUrl = new URL(settings.action, window.location.href);
+      const formData = new FormData(form);
+      const headers = {
+        'X-Requested-With': 'ASJS',
+        'X-ASJS-Form': 'true',
+        'X-ASJS-Form-Mode': settings.mode
+      };
+
+      if (submitter && submitter.name && !formData.has(submitter.name)) {
+        formData.append(submitter.name, submitter.value);
+      }
+
+      if (settings.method === 'GET') {
+        requestUrl.search = appendFormDataToSearchParams(new URLSearchParams(requestUrl.search), formData).toString();
+
+        return {
+          url: requestUrl.toString(),
+          options: {
+            method: 'GET',
+            headers,
+            redirect: 'follow'
+          }
+        };
+      }
+
+      if (settings.bodyMode === 'json' || String(form.enctype || '').toLowerCase() === 'application/json') {
+        headers['Content-Type'] = 'application/json';
+
+        return {
+          url: requestUrl.toString(),
+          options: {
+            method: settings.method,
+            headers,
+            body: JSON.stringify(formDataToJson(formData)),
+            redirect: 'follow'
+          }
+        };
+      }
+
+      if (String(form.enctype || '').toLowerCase() === 'multipart/form-data') {
+        return {
+          url: requestUrl.toString(),
+          options: {
+            method: settings.method,
+            headers,
+            body: formData,
+            redirect: 'follow'
+          }
+        };
+      }
+
+      headers['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
+
+      return {
+        url: requestUrl.toString(),
+        options: {
+          method: settings.method,
+          headers,
+          body: formDataToSearchParams(formData),
+          redirect: 'follow'
+        }
+      };
+    }
+
+    applyTargetContent(targetSelector, content, swap) {
+      if (!targetSelector || !content) {
+        return false;
+      }
+
+      const target = document.querySelector(targetSelector);
+      if (!target) {
+        return false;
+      }
+
+      if (swap === 'append') {
+        target.insertAdjacentHTML('beforeend', content);
+      } else if (swap === 'prepend') {
+        target.insertAdjacentHTML('afterbegin', content);
+      } else {
+        target.innerHTML = content;
+      }
+
+      reviveScripts(target);
+      return true;
+    }
+
+    async swapViewFromHtml(html, url, options = {}) {
+      const currentView = document.querySelector(this.viewSelector);
+
+      if (!currentView) {
+        return false;
+      }
+
+      const parsedDocument = new DOMParser().parseFromString(html, 'text/html');
+      const nextView = parsedDocument.querySelector(this.viewSelector);
+
+      if (!nextView) {
+        return false;
+      }
+
+      const leaveTransition = this.resolveTransition({
+        trigger: options.trigger,
+        view: currentView,
+        root: document.body
+      });
+
+      const enterTransition = this.resolveTransition({
+        trigger: options.trigger,
+        view: nextView,
+        root: parsedDocument.body,
+        fallback: leaveTransition
+      });
+
+      await this.playTransition(currentView, leaveTransition, 'leave');
+      syncBodyData(parsedDocument);
+      syncManagedHead(parsedDocument);
+      this.applyDocumentSettings(document.body);
+      copyAttributes(currentView, nextView);
+      currentView.innerHTML = nextView.innerHTML;
+      reviveScripts(currentView);
+      document.dispatchEvent(new CustomEvent('asjs:content-replaced', {
+        detail: {
+          url,
+          title: parsedDocument.title || document.title
+        }
+      }));
+      await this.playTransition(currentView, enterTransition, 'enter');
+
+      document.title = parsedDocument.title || document.title;
+
+      if (options.pushState) {
+        window.history.pushState({}, '', url);
+      } else if (options.replaceState) {
+        window.history.replaceState({}, '', url);
+      }
+
+      this.syncActiveLinks(new URL(url, window.location.href).pathname);
+
+      if (!options.preserveScroll) {
+        window.scrollTo({ top: 0, behavior: 'smooth' });
+      }
+
+      document.dispatchEvent(new CustomEvent('asjs:navigated', {
+        detail: {
+          url,
+          fromCache: Boolean(options.fromCache)
+        }
+      }));
+
+      return true;
+    }
+
+    async handleHtmlFormResponse(form, response, html, settings) {
+      const finalUrl = response.url || settings.action;
+      const contentType = response.headers.get('content-type') || '';
+
+      if (isHtmlPayload(contentType, html)) {
+        const swapped = await this.swapViewFromHtml(html, finalUrl, {
+          trigger: form,
+          pushState: settings.history,
+          replaceState: response.redirected && !settings.history,
+          preserveScroll: settings.preserveScroll || response.status === 422
+        });
+
+        if (swapped) {
+          return true;
+        }
+      }
+
+      if (settings.target) {
+        return this.applyTargetContent(settings.target, html, settings.swap);
+      }
+
+      return false;
+    }
+
+    async handleJsonFormResponse(form, response, payload, settings) {
+      const detail = {
+        action: settings.action,
+        form,
+        method: settings.method,
+        payload,
+        status: response.status
+      };
+
+      document.dispatchEvent(new CustomEvent('asjs:form-response', { detail }));
+
+      let handled = false;
+      if (settings.target) {
+        if (payload && typeof payload.html === 'string') {
+          handled = this.applyTargetContent(settings.target, payload.html, settings.swap);
+        } else if (payload && typeof payload.message === 'string') {
+          handled = this.applyTargetContent(
+            settings.target,
+            createInlineResponseMarkup(payload.message, response.ok ? 'success' : 'error'),
+            settings.swap
+          );
+        }
+      }
+
+      if (response.ok && settings.resetOnSuccess) {
+        form.reset();
+      }
+
+      document.dispatchEvent(new CustomEvent(response.ok ? 'asjs:form-success' : 'asjs:form-error', {
+        detail
+      }));
+
+      return handled;
+    }
+
+    async submitForm(form, options = {}) {
+      if (this.isNavigating) {
+        return;
+      }
+
+      const settings = this.resolveFormOptions(form);
+      const request = this.createFormRequest(form, settings, options.submitter);
+
+      this.isNavigating = true;
+      form.classList.add('asjs-form-submitting');
+      document.documentElement.classList.add('asjs-loading');
+      document.dispatchEvent(new CustomEvent('asjs:before-submit', {
+        detail: {
+          action: settings.action,
+          form,
+          method: settings.method,
+          submitter: options.submitter || null
+        }
+      }));
+      this.startProgress();
+
+      try {
+        const response = await fetch(request.url, request.options);
+        const contentType = response.headers.get('content-type') || '';
+        const rawPayload = await response.text();
+        let handled = false;
+
+        if (settings.mode === 'json' || contentType.includes('application/json')) {
+          const payload = rawPayload ? JSON.parse(rawPayload) : null;
+          handled = await this.handleJsonFormResponse(form, response, payload, settings);
+        } else {
+          handled = await this.handleHtmlFormResponse(form, response, rawPayload, settings);
+          document.dispatchEvent(new CustomEvent(response.ok ? 'asjs:form-success' : 'asjs:form-error', {
+            detail: {
+              action: settings.action,
+              form,
+              method: settings.method,
+              status: response.status,
+              url: response.url || request.url
+            }
+          }));
+
+          if (response.ok && settings.resetOnSuccess) {
+            form.reset();
+          }
+        }
+
+        if (!handled && response.redirected) {
+          window.location.href = response.url;
+          return;
+        }
+
+        if (!handled && !response.ok) {
+          window.location.href = request.url;
+        }
+      } catch (error) {
+        console.error('ASJS form fetch hatasi:', error);
+        document.dispatchEvent(new CustomEvent('asjs:form-error', {
+          detail: {
+            action: settings.action,
+            error,
+            form,
+            method: settings.method
+          }
+        }));
+      } finally {
+        this.isNavigating = false;
+        form.classList.remove('asjs-form-submitting');
+        document.documentElement.classList.remove('asjs-loading');
+        this.completeProgress();
+      }
+    }
+
+    resolveActiveMode(link) {
+      return String(link.dataset.asjsActive || 'exact').toLowerCase();
+    }
+
+    isLinkActive(link, pathname) {
+      const linkUrl = new URL(link.href, window.location.href);
+      const matchPath = link.dataset.asjsMatchPath || linkUrl.pathname;
+      return isActivePath(matchPath, pathname, this.resolveActiveMode(link));
+    }
+
+    shouldPrefetch(link) {
+      const prefetchEnabled = parseBooleanAttribute(link.dataset.asjsPrefetch, this.prefetchEnabled);
+
+      if (!prefetchEnabled || link.dataset.asjsPrefetched === 'true') {
+        return false;
+      }
+
+      const targetUrl = new URL(link.href, window.location.href);
+      const currentUrl = new URL(window.location.href);
+
+      if (targetUrl.origin !== currentUrl.origin || link.target === '_blank' || link.hasAttribute('download')) {
+        return false;
+      }
+
+      return !(targetUrl.pathname === currentUrl.pathname && targetUrl.search === currentUrl.search);
+    }
+
+    resolvePrefetchTtl(trigger) {
+      return parseNumberAttribute(
+        trigger && trigger.dataset.asjsPrefetchTtl,
+        this.prefetchTtl
+      );
+    }
+
+    resolveTransition({ trigger, view, root, fallback } = {}) {
+      if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+        return { name: 'none', duration: 0 };
+      }
+
+      const rawName =
+        (trigger && trigger.dataset.asjsTransition) ||
+        (view && view.dataset.asjsTransition) ||
+        (root && root.dataset.asjsTransition) ||
+        (fallback && fallback.name) ||
+        'none';
+
+      const durationValue =
+        (trigger && trigger.dataset.asjsTransitionDuration) ||
+        (view && view.dataset.asjsTransitionDuration) ||
+        (root && root.dataset.asjsTransitionDuration) ||
+        (fallback && fallback.duration) ||
+        0;
+
+      const duration = Math.max(0, Number.parseInt(durationValue, 10) || 0);
+      const name = rawName === 'false' || rawName === 'off' ? 'none' : rawName;
+
+      return {
+        name,
+        duration: name === 'none' ? 0 : duration
+      };
+    }
+
+    async playTransition(view, transition, phase) {
+      if (!view || !transition || !transition.name || transition.name === 'none' || transition.duration <= 0) {
+        return;
+      }
+
+      const nameClass = `asjs-transition-name--${transition.name}`;
+      const phaseClass = `asjs-transition-phase--${phase}`;
+
+      view.style.setProperty('--asjs-transition-duration', `${transition.duration}ms`);
+      clearTransitionClasses(view);
+
+      if (phase === 'enter') {
+        view.classList.add(nameClass, phaseClass);
+        await nextFrame();
+        await nextFrame();
+        view.classList.remove(phaseClass);
+        await wait(transition.duration);
+        clearTransitionClasses(view);
+        return;
+      }
+
+      view.classList.add(nameClass);
+      await nextFrame();
+      view.classList.add(phaseClass);
+      await nextFrame();
+      await wait(transition.duration);
+    }
+
+    getCachedPage(url) {
+      const cacheKey = normalizeUrl(url);
+      const cached = this.pageCache.get(cacheKey);
+
+      if (!cached) {
+        return null;
+      }
+
+      if (cached.expiresAt <= Date.now()) {
+        this.pageCache.delete(cacheKey);
+        return null;
+      }
+
+      return cached.html;
+    }
+
+    setCachedPage(url, html, ttl) {
+      this.pageCache.set(normalizeUrl(url), {
+        html,
+        expiresAt: Date.now() + ttl
+      });
+    }
+
+    async readPage(url, options = {}) {
+      const cacheKey = normalizeUrl(url);
+      const cached = options.useCache === false ? null : this.getCachedPage(url);
+
+      if (cached) {
+        return {
+          html: cached,
+          status: 200,
+          fromCache: true
+        };
+      }
+
+      if (this.prefetchRequests.has(cacheKey)) {
+        return this.prefetchRequests.get(cacheKey);
+      }
+
+      const requestPromise = fetch(url, {
+        headers: {
+          'X-Requested-With': 'ASJS',
+          ...(options.prefetch ? { 'X-ASJS-Prefetch': 'true' } : {})
+        }
+      }).then(async (response) => {
+        const html = await response.text();
+
+        if (response.ok) {
+          this.setCachedPage(url, html, options.ttl || this.prefetchTtl);
+        }
+
+        return {
+          html,
+          status: response.status,
+          fromCache: false
+        };
+      }).finally(() => {
+        this.prefetchRequests.delete(cacheKey);
+      });
+
+      this.prefetchRequests.set(cacheKey, requestPromise);
+      return requestPromise;
+    }
+
+    async prefetchLink(link) {
+      if (!this.shouldPrefetch(link)) {
+        return;
+      }
+
+      try {
+        const result = await this.readPage(link.href, {
+          prefetch: true,
+          ttl: this.resolvePrefetchTtl(link)
+        });
+
+        if (result.status >= 200 && result.status < 300) {
+          link.dataset.asjsPrefetched = 'true';
+          document.dispatchEvent(new CustomEvent('asjs:prefetched', {
+            detail: { url: link.href }
+          }));
+        }
+      } catch (error) {
+        console.warn('ASJS prefetch hatasi:', error);
+      }
+    }
+
+    async visit(url, options = {}) {
+      if (this.isNavigating) {
+        return;
+      }
+
+      if (!document.querySelector(this.viewSelector)) {
+        window.location.href = url;
+        return;
+      }
+
+      this.isNavigating = true;
+      document.documentElement.classList.add('asjs-loading');
+      document.dispatchEvent(new CustomEvent('asjs:before-navigate', {
+        detail: { url, trigger: options.trigger || null }
+      }));
+      this.startProgress();
+
+      try {
+        const response = await this.readPage(url, {
+          ttl: this.resolvePrefetchTtl(options.trigger)
+        });
+
+        if (response.status < 200 || response.status >= 300) {
+          window.location.href = url;
+          return;
+        }
+
+        const swapped = await this.swapViewFromHtml(response.html, url, {
+          trigger: options.trigger,
+          pushState: options.pushState,
+          preserveScroll: options.preserveScroll,
+          fromCache: response.fromCache
+        });
+
+        if (!swapped) {
+          window.location.href = url;
+          return;
+        }
+      } catch (error) {
+        console.error('ASJS router fetch hatasi:', error);
+        document.dispatchEvent(new CustomEvent('asjs:navigation-error', {
+          detail: { url, error }
+        }));
+        window.location.href = url;
+      } finally {
+        this.isNavigating = false;
+        document.documentElement.classList.remove('asjs-loading');
+        this.completeProgress();
+      }
+    }
+
+    syncActiveLinks(pathname) {
+      document.querySelectorAll(this.linkSelector).forEach((link) => {
+        const isActive = this.isLinkActive(link, pathname);
+
+        link.classList.toggle(this.activeClass, isActive);
+
+        if (isActive) {
+          link.setAttribute('aria-current', 'page');
+        } else {
+          link.removeAttribute('aria-current');
+        }
+      });
+    }
+  }
+
+  window.ASJSNavigator = ASJSNavigator;
+
+  window.addEventListener('DOMContentLoaded', () => {
+    if (document.querySelector('[data-asjs-view]')) {
+      window.asjsNavigator = new ASJSNavigator();
+    }
+  });
+})();