@docmd/ui 0.6.1 → 0.6.3

package/assets/css/docmd-main.css

@@ -557,6 +557,68 @@ body.sidebar-collapsed .main-content-wrapper {
     -webkit-backdrop-filter: blur(8px);
 }
 
+.header-titles-wrapper {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+.docmd-breadcrumbs {
+    font-size: 0.8125rem;
+    color: var(--text-muted);
+    margin-bottom: var(--space-4);
+    display: block;
+}
+
+.docmd-breadcrumbs ol {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 0.25rem;
+}
+
+.docmd-breadcrumbs li {
+    display: inline-flex;
+    align-items: center;
+    white-space: nowrap;
+}
+
+.docmd-breadcrumbs a {
+    color: var(--text-muted);
+    text-decoration: none;
+    transition: color 0.15s ease;
+}
+
+.docmd-breadcrumbs a:hover {
+    color: var(--link-color);
+}
+
+.docmd-breadcrumbs .breadcrumb-separator {
+    margin-left: 0.25rem;
+    opacity: 0.5;
+    display: inline-flex;
+    align-items: center;
+}
+
+.docmd-breadcrumbs .breadcrumb-separator .lucide-icon {
+    width: 0.8em;
+    height: 0.8em;
+}
+
+.docmd-breadcrumbs .active {
+    color: var(--text-color);
+    font-weight: 500;
+}
+
+@media (max-width: 768px) {
+    .docmd-breadcrumbs {
+        display: none;
+    }
+}
+
 .page-header .header-title {
     font-size: 1.25rem;
     font-weight: 600;

package/assets/js/docmd-main.js

@@ -75,28 +75,38 @@
     // Sticky Version Switching (Path Preservation)
     const versionLink = e.target.closest('.version-dropdown-item');
     if (versionLink) {
+      e.preventDefault(); // Prevent default link behavior immediately
       const targetRoot = versionLink.dataset.versionRoot;
       // Use global fallback if undefined (e.g. on 404 pages)
       const currentRoot = window.DOCMD_VERSION_ROOT || '/';
 
       if (targetRoot && window.location.pathname) {
-        try {
-          let currentPath = window.location.pathname;
-          const normCurrentRoot = currentRoot.endsWith('/') ? currentRoot : currentRoot + '/';
-
-          // Only try sticky if we are actually INSIDE the known version path
-          if (currentPath.startsWith(normCurrentRoot)) {
-            e.preventDefault();
-            const suffix = currentPath.substring(normCurrentRoot.length);
-            const normTargetRoot = targetRoot.endsWith('/') ? targetRoot : targetRoot + '/';
-            window.location.href = normTargetRoot + suffix + window.location.hash;
-            return;
-          }
-        } catch (e) {
-          // Ignore errors, let default click happen
+        let currentPath = window.location.pathname;
+        const normCurrentRoot = currentRoot.endsWith('/') ? currentRoot : currentRoot + '/';
+
+        // Only try sticky if we are actually INSIDE the known version path
+        if (currentPath.startsWith(normCurrentRoot)) {
+          const suffix = currentPath.substring(normCurrentRoot.length);
+          const normTargetRoot = targetRoot.endsWith('/') ? targetRoot : targetRoot + '/';
+          const targetHref = normTargetRoot + suffix + window.location.hash;
+
+          // Smart Switcher: Check if the exact page exists in the target version
+          fetch(targetHref, { method: 'HEAD' })
+            .then(response => {
+              if (response.ok) {
+                window.location.href = targetHref; // Exact match found
+              } else {
+                window.location.href = normTargetRoot; // Fallback to version root
+              }
+            })
+            .catch(() => {
+              window.location.href = normTargetRoot; // Network error fallback
+            });
+          return;
         }
       }
-      // If sticky logic skipped (e.g. on 404 page or outside root), default <a> click handles it
+      // If we are outside the root (or targetRoot is missing), just use the href defined in the link
+      window.location.href = versionLink.href;
     }
 
     // Close Dropdown if clicked outside
@@ -306,6 +316,7 @@
 
         const selectorsToSwap = [
           '.content-layout',
+          '.docmd-breadcrumbs',
           '.page-header .header-title',
           '.page-footer',
           '.footer-complete',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@docmd/ui",
-  "version": "0.6.1",
+  "version": "0.6.3",
   "description": "Base UI templates and assets for docmd.",
   "type": "module",
   "main": "dist/index.js",

package/templates/layout.ejs

@@ -138,9 +138,11 @@
                               <%- renderIcon('panel-left-close') %>
                             </button>
                             <% } %>
-                              <span class="header-title">
-                                <%= pageTitle %>
-                              </span>
+                              <div class="header-titles-wrapper">
+                                <span class="header-title">
+                                  <%= pageTitle %>
+                                </span>
+                              </div>
                         </div>
 
                         <div class="header-right">
@@ -154,6 +156,24 @@
                           <main class="content-area" id="main-content">
                             <div class="content-layout">
                               <div class="main-content">
+                                <% if (config.layout?.breadcrumbs !== false && locals.breadcrumbs && breadcrumbs.length > 0) { %>
+                                  <nav aria-label="breadcrumb" class="docmd-breadcrumbs">
+                                    <ol>
+                                      <% breadcrumbs.forEach((crumb, index) => { %>
+                                        <li class="breadcrumb-item <%= index === breadcrumbs.length - 1 ? 'active' : '' %>" <%= index === breadcrumbs.length - 1 ? 'aria-current="page"' : '' %>>
+                                          <% if (crumb.path && index < breadcrumbs.length - 1) { %>
+                                            <a href="<%= relativePathToRoot %><%- crumb.path.startsWith('/') ? crumb.path.substring(1) : crumb.path %>"><%= crumb.title %></a>
+                                          <% } else { %>
+                                            <span><%= crumb.title %></span>
+                                          <% } %>
+                                          <% if (index < breadcrumbs.length - 1) { %>
+                                            <span class="breadcrumb-separator"><%- renderIcon('chevron-right') %></span>
+                                          <% } %>
+                                        </li>
+                                      <% }) %>
+                                    </ol>
+                                  </nav>
+                                <% } %>
                                 <% if (headerConfig?.enabled===false) { %>
                                   <h1>
                                     <%= pageTitle %>