docyard 0.9.0 → 1.0.1

data/lib/docyard/templates/assets/css/components/page-actions.css

@@ -0,0 +1,131 @@
+.page-actions {
+  margin-top: var(--spacing-6);
+  padding-top: var(--spacing-4);
+  border-top: 1px solid var(--border);
+}
+
+.page-actions__copy-btn {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  padding: 0;
+  background: none;
+  border: none;
+  font-family: inherit;
+  font-size: var(--text-sm);
+  color: var(--muted-foreground);
+  cursor: pointer;
+  transition: color var(--transition-fast);
+}
+
+.page-actions__copy-btn:hover {
+  color: var(--foreground);
+}
+
+.page-actions__copy-btn .docyard-icon,
+.page-actions__copy-btn i[class*="ph-"] {
+  font-size: 1rem;
+  flex-shrink: 0;
+}
+
+.page-actions__copy-btn i[class*="ph-"] {
+  display: inline-block;
+  transition: transform 0.15s cubic-bezier(0.4, 0, 1, 1);
+}
+
+.page-actions__copy-btn.is-copied i[class*="ph-"] {
+  color: var(--success, #22c55e);
+}
+
+.page-actions__copy-btn.is-copied .page-actions__copy-text {
+  color: var(--success, #22c55e);
+}
+
+.page-actions__copy-btn i.icon-animate-in {
+  animation: iconPopIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+.page-actions__copy-btn i.icon-animate-out {
+  animation: iconPopOut 0.15s cubic-bezier(0.4, 0, 1, 1);
+}
+
+@keyframes iconPopIn {
+  0% {
+    transform: scale(0);
+    opacity: 0;
+  }
+  50% {
+    transform: scale(1.2);
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+@keyframes iconPopOut {
+  0% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(0.8);
+    opacity: 0;
+  }
+}
+
+.page-actions__edit-link {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  margin-top: var(--spacing-2);
+  font-size: var(--text-sm);
+  color: var(--muted-foreground);
+  text-decoration: none;
+  transition: color var(--transition-fast);
+}
+
+.page-actions__edit-link:hover {
+  color: var(--foreground);
+}
+
+.page-actions__edit-link .docyard-icon,
+.page-actions__edit-link i[class*="ph-"] {
+  font-size: 1rem;
+  flex-shrink: 0;
+}
+
+.page-actions__last-updated {
+  margin-top: var(--spacing-3);
+  font-size: var(--text-xs);
+  color: oklch(from var(--muted-foreground) l c h / 80%);
+}
+
+.page-actions__last-updated time {
+  cursor: help;
+  border-bottom: 1px dotted currentColor;
+}
+
+.page-actions-mobile {
+  display: none;
+}
+
+@media (max-width: 1280px) {
+  .page-actions-mobile {
+    display: block;
+    margin-top: var(--spacing-12);
+    text-align: center;
+  }
+
+  .page-actions-mobile .page-actions {
+    border-top: none;
+    padding-top: 0;
+    margin-top: 0;
+  }
+
+  .page-actions-mobile .page-actions__copy-btn,
+  .page-actions-mobile .page-actions__edit-link {
+    width: 100%;
+    justify-content: center;
+  }
+}

data/lib/docyard/templates/assets/css/components/prev-next.css

@@ -56,26 +56,31 @@
   justify-content: flex-end;
 }
 
-.pager-label .docyard-icon {
+.pager-label .docyard-icon,
+.pager-label i[class*="ph-"] {
   display: inline-flex;
   opacity: 0.5;
   transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
 }
 
-.pager-label .docyard-icon svg {
+.pager-label .docyard-icon svg,
+.pager-label i[class*="ph-"] {
   width: 1rem;
   height: 1rem;
 }
 
-.pager-link:hover .pager-label .docyard-icon {
+.pager-link:hover .pager-label .docyard-icon,
+.pager-link:hover .pager-label i[class*="ph-"] {
   opacity: 1;
 }
 
-.pager-link.prev:hover .pager-label .docyard-icon {
+.pager-link.prev:hover .pager-label .docyard-icon,
+.pager-link.prev:hover .pager-label i[class*="ph-"] {
   transform: translateX(-4px);
 }
 
-.pager-link.next:hover .pager-label .docyard-icon {
+.pager-link.next:hover .pager-label .docyard-icon,
+.pager-link.next:hover .pager-label i[class*="ph-"] {
   transform: translateX(4px);
 }
 
@@ -98,7 +103,8 @@
     padding: var(--spacing-3) var(--spacing-4);
   }
 
-  .pager-label .docyard-icon {
+  .pager-label .docyard-icon,
+  .pager-label i[class*="ph-"] {
     opacity: 0.5;
   }
 
@@ -110,7 +116,8 @@
 
 @media (prefers-reduced-motion: reduce) {
   .pager-link,
-  .pager-label .docyard-icon {
+  .pager-label .docyard-icon,
+  .pager-label i[class*="ph-"] {
     transition: none;
   }
 }

data/lib/docyard/templates/assets/css/components/search.css

@@ -134,6 +134,7 @@
   transform: scale(0.95) translateY(-10px);
   opacity: 0;
   transition: transform var(--transition-base), opacity var(--transition-fast);
+  will-change: transform, opacity;
 }
 
 .search-modal.is-open .search-modal-container {
@@ -247,14 +248,8 @@
   opacity: 0.4;
 }
 
-.search-empty-icon .docyard-icon {
-  width: 4rem;
-  height: 4rem;
-}
-
-.search-empty-icon .docyard-icon svg {
-  width: 100%;
-  height: 100%;
+.search-empty-icon {
+  font-size: var(--text-3xl);
 }
 
 .search-empty-title {
@@ -490,7 +485,7 @@
 
 @media (max-width: 1024px) {
 
-  
+
   .search-trigger {
     min-width: auto;
     width: 2.25rem;
@@ -515,7 +510,8 @@
     display: none;
   }
 
-  .search-trigger-icon .docyard-icon {
+  .search-trigger-icon .docyard-icon,
+  .search-trigger-icon i[class*="ph-"] {
     width: 1.25rem;
     height: 1.25rem;
   }

data/lib/docyard/templates/assets/css/components/tab-bar.css

@@ -62,7 +62,8 @@
   opacity: 0.7;
 }
 
-.tab-icon .docyard-icon {
+.tab-icon .docyard-icon,
+.tab-icon i[class*="ph-"] {
   width: 16px;
   height: 16px;
 }
@@ -89,10 +90,12 @@
   border-radius: 2px 2px 0 0;
   pointer-events: none;
   view-transition-name: tab-indicator;
+  opacity: 0;
 }
 
 .tab-indicator.is-ready {
-  transition: left 0.25s cubic-bezier(0.4, 0, 0.2, 1), width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+  opacity: 1;
+  transition: left 0.25s cubic-bezier(0.4, 0, 0.2, 1), width 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.15s ease;
 }
 
 /* View Transitions API - animate indicator between pages */
@@ -120,7 +123,7 @@
 
 @media (max-width: 1280px) and (min-width: 1025px) {
   .has-tabs .layout {
-    padding-top: calc(var(--header-height) + var(--tab-bar-height) + 3rem);
+    padding-top: calc(var(--header-height) + var(--tab-bar-height) + var(--secondary-header-height));
   }
 }
 
@@ -133,14 +136,14 @@
   top: calc(var(--header-height) + var(--tab-bar-height));
 }
 
-/* Hide tab bar on mobile */
+/* Hide tab bar on mobile - use .has-tabs for specificity to override .has-tabs .tab-bar { display: block } */
 @media (max-width: 1024px) {
-  .tab-bar {
+  .has-tabs .tab-bar {
     display: none;
   }
 
   .has-tabs .layout {
-    padding-top: calc(var(--header-height) + 3rem);
+    padding-top: calc(var(--header-height) + var(--secondary-header-height));
   }
 
   .has-tabs .sidebar {

data/lib/docyard/templates/assets/css/components/table-of-contents.css

@@ -107,12 +107,19 @@
     box-shadow: 0 0 0 var(--ring-width) oklch(from var(--ring) l c h / 50%);
   }
 
-  .secondary-header-toc-toggle svg {
+  .secondary-header-toc-toggle .docyard-icon {
     transform: rotate(-90deg);
     transition: transform var(--transition-base);
   }
 
-  .secondary-header-toc-toggle[aria-expanded="true"] svg {
+  .secondary-header-toc-toggle i[class*="ph-"] {
+    display: inline-block;
+    transform: rotate(-90deg);
+    transition: transform var(--transition-base);
+  }
+
+  .secondary-header-toc-toggle[aria-expanded="true"] .docyard-icon,
+  .secondary-header-toc-toggle[aria-expanded="true"] i[class*="ph-"] {
     transform: rotate(0deg);
   }
 }
@@ -216,7 +223,6 @@
   }
 
   .docyard-toc__nav {
-    display: none;
     position: fixed;
     overflow-y: auto;
     overscroll-behavior: contain;
@@ -226,42 +232,55 @@
     border-radius: var(--radius-xl);
     box-shadow: var(--shadow-lg);
     z-index: 9999;
-    transition: top 0.3s cubic-bezier(0.4, 0, 0.2, 1),
-      opacity 0.2s ease,
-      transform 0.2s ease;
-    transform: translateY(-8px);
+    transform: scale(0.95) translateY(-8px);
+    transform-origin: top right;
     opacity: 0;
+    visibility: hidden;
     pointer-events: none;
+    transition:
+      transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
+      opacity 0.15s ease-out,
+      visibility 0.2s;
   }
 
   .docyard-toc__nav.is-expanded {
-    display: block;
+    transform: scale(1) translateY(0);
     opacity: 1;
-    transform: translateY(0);
+    visibility: visible;
     pointer-events: auto;
+    transition:
+      transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
+      opacity 0.2s ease-out,
+      visibility 0s;
   }
 }
 
 @media (max-width: 1280px) and (min-width: 1025px) {
   .docyard-toc__nav {
-    top: calc(var(--header-height) + 3rem + var(--spacing-2));
+    top: calc(var(--header-height) + var(--secondary-header-height) + var(--spacing-2));
     right: var(--spacing-6);
     width: 280px;
-    max-height: calc(100vh - var(--header-height) - 3rem - var(--spacing-8));
+    max-height: calc(100vh - var(--header-height) - var(--secondary-header-height) - var(--spacing-8));
+  }
+
+  .has-tabs .docyard-toc__nav {
+    top: calc(var(--header-height) + var(--tab-bar-height) + var(--secondary-header-height) + var(--spacing-2));
+    max-height: calc(100vh - var(--header-height) - var(--tab-bar-height) - var(--secondary-header-height) - var(--spacing-8));
   }
 }
 
 @media (max-width: 1024px) {
   .docyard-toc__nav {
-    top: calc(var(--header-height) + 3rem - 2px);
+    top: calc(var(--header-height) + var(--secondary-header-height) - 2px);
     left: var(--spacing-4);
     right: var(--spacing-4);
-    max-height: calc(100vh - var(--header-height) - 3rem - var(--spacing-2));
+    max-height: calc(100vh - var(--header-height) - var(--secondary-header-height) - var(--spacing-2));
+    transform-origin: top center;
   }
 
   .secondary-header.shift-up ~ .layout .docyard-toc__nav {
-    top: calc(3rem - 2px);
-    max-height: calc(100vh - 3rem - var(--spacing-2));
+    top: calc(var(--secondary-header-height) - 2px);
+    max-height: calc(100vh - var(--secondary-header-height) - var(--spacing-2));
   }
 
   .docyard-toc__list .docyard-toc__list {
@@ -270,13 +289,40 @@
   }
 }
 
+/* Adjust TOC dropdown position when announcement banner is visible */
+@media (max-width: 1280px) and (min-width: 1025px) {
+  body.has-announcement .docyard-toc__nav {
+    top: calc(var(--header-height) + var(--announcement-height) + var(--secondary-header-height) + var(--spacing-2));
+    max-height: calc(100vh - var(--header-height) - var(--announcement-height) - var(--secondary-header-height) - var(--spacing-8));
+  }
+
+  body.has-announcement.has-tabs .docyard-toc__nav {
+    top: calc(var(--header-height) + var(--tab-bar-height) + var(--announcement-height) + var(--secondary-header-height) + var(--spacing-2));
+    max-height: calc(100vh - var(--header-height) - var(--tab-bar-height) - var(--announcement-height) - var(--secondary-header-height) - var(--spacing-8));
+  }
+}
+
+@media (max-width: 1024px) {
+  body.has-announcement .docyard-toc__nav {
+    top: calc(var(--header-height) + var(--announcement-height) + var(--secondary-header-height) - 2px);
+    max-height: calc(100vh - var(--header-height) - var(--announcement-height) - var(--secondary-header-height) - var(--spacing-2));
+  }
+
+  body.has-announcement .secondary-header.shift-up ~ .layout .docyard-toc__nav {
+    top: calc(var(--announcement-height) + var(--secondary-header-height) - 2px);
+    max-height: calc(100vh - var(--announcement-height) - var(--secondary-header-height) - var(--spacing-2));
+  }
+}
+
 @media (prefers-reduced-motion: reduce) {
   .docyard-toc__link,
-  .docyard-toc__indicator {
+  .docyard-toc__indicator,
+  .docyard-toc__nav {
     transition: none;
   }
 
-  .secondary-header-toc-toggle svg {
+  .secondary-header-toc-toggle .docyard-icon,
+  .secondary-header-toc-toggle i[class*="ph-"] {
     transition: none;
   }
 }

data/lib/docyard/templates/assets/css/components/tabs.css

@@ -74,7 +74,8 @@
   flex-shrink: 0;
 }
 
-.docyard-tabs__icon .docyard-icon {
+.docyard-tabs__icon .docyard-icon,
+.docyard-tabs__icon i[class*="ph-"] {
   width: 1rem;
   height: 1rem;
   display: inline-flex;
@@ -94,13 +95,19 @@
   border-radius: 1px;
   pointer-events: none;
   z-index: 1;
-  
+  opacity: 0;
+
   transition:
     transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
-    width 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+    width 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
+    opacity 0.15s ease;
   will-change: transform, width;
 }
 
+.docyard-tabs__indicator.is-ready {
+  opacity: 1;
+}
+
 .docyard-tabs__scroll-indicator {
   position: absolute;
   top: 0;
@@ -230,7 +237,8 @@
     gap: var(--spacing-1);
   }
 
-  .docyard-tabs__icon .docyard-icon {
+  .docyard-tabs__icon .docyard-icon,
+  .docyard-tabs__icon i[class*="ph-"] {
     width: 0.875rem;
     height: 0.875rem;
   }

data/lib/docyard/templates/assets/css/components/theme-toggle.css

@@ -39,7 +39,9 @@
 }
 
 .theme-toggle-sun .docyard-icon,
-.theme-toggle-moon .docyard-icon {
+.theme-toggle-moon .docyard-icon,
+.theme-toggle-sun i[class*="ph-"],
+.theme-toggle-moon i[class*="ph-"] {
   width: 1.125rem;
   height: 1.125rem;
 }

data/lib/docyard/templates/assets/css/landing.css

@@ -73,15 +73,15 @@
 
 .hero-bg--grid {
   background-image:
-    linear-gradient(oklch(0 0 0 / 0.06) 1px, transparent 1px),
-    linear-gradient(90deg, oklch(0 0 0 / 0.06) 1px, transparent 1px);
-  background-size: 100px 100px;
+    linear-gradient(oklch(0 0 0 / 0.03) 1px, transparent 1px),
+    linear-gradient(90deg, oklch(0 0 0 / 0.03) 1px, transparent 1px);
+  background-size: 60px 60px;
 }
 
 .dark .hero-bg--grid {
   background-image:
-    linear-gradient(oklch(1 0 0 / 0.08) 1px, transparent 1px),
-    linear-gradient(90deg, oklch(1 0 0 / 0.08) 1px, transparent 1px);
+    linear-gradient(oklch(1 0 0 / 0.04) 1px, transparent 1px),
+    linear-gradient(90deg, oklch(1 0 0 / 0.04) 1px, transparent 1px);
 }
 
 .hero-bg--grid::after {
@@ -249,7 +249,7 @@
   background: linear-gradient(135deg,
       var(--foreground) 0%,
       var(--foreground) 40%,
-      oklch(from var(--primary) calc(l + 0.1) c h) 100%);
+      oklch(from var(--primary) calc(l - 0.15) c h) 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
@@ -314,12 +314,12 @@
 
 .hero-action--secondary {
   background: transparent;
-  color: var(--foreground);
-  border: 1px solid var(--border);
+  color: var(--muted-foreground);
+  border: none;
 }
 
 .hero-action--secondary:hover {
-  background: var(--muted);
+  background: transparent;
   color: var(--foreground);
 }
 
@@ -382,6 +382,70 @@
   display: block;
 }
 
+.hero-custom-visual {
+  position: relative;
+  z-index: 1;
+}
+
+.hero-custom-visual--side {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.hero-custom-visual--bottom {
+  width: 100%;
+  max-width: 1100px;
+  margin: 0 auto;
+  padding: 0 var(--spacing-6);
+  margin-bottom: var(--spacing-2);
+}
+
+.hero--with-bottom-visual {
+  min-height: auto;
+  height: auto;
+  align-items: flex-start;
+  padding-top: 10rem;
+  padding-bottom: var(--spacing-4);
+}
+
+.hero--with-bottom-visual .hero-content {
+  padding-top: 0;
+  padding-bottom: var(--spacing-16);
+}
+
+@media (max-width: 1024px) {
+  .hero-custom-visual--side {
+    grid-column: 1 / -1;
+    order: 1;
+    width: 100%;
+    max-width: 1100px;
+    margin: 0 auto;
+    padding: 0 var(--spacing-4);
+    margin-bottom: var(--spacing-2);
+  }
+
+  .hero--with-image:has(.hero-custom-visual--side) {
+    min-height: auto;
+    height: auto;
+    padding-top: 7rem;
+    padding-bottom: var(--spacing-4);
+  }
+
+  .hero--with-image:has(.hero-custom-visual--side) .hero-content {
+    padding-top: 0;
+    padding-bottom: var(--spacing-16);
+  }
+
+  .hero-custom-visual--bottom {
+    padding: 0 var(--spacing-4);
+  }
+
+  .hero--with-bottom-visual {
+    padding-top: 7rem;
+  }
+}
+
 .features-section {
   padding: var(--spacing-16) var(--spacing-6) var(--spacing-20);
   background: linear-gradient(180deg, var(--background) 0%, oklch(from var(--background) calc(l + 0.02) c h) 100%);
@@ -394,7 +458,7 @@
 .features-header {
   text-align: center;
   max-width: 600px;
-  margin: 0 auto var(--spacing-12);
+  margin: 0 auto var(--spacing-20);
 }
 
 .features-label {
@@ -407,15 +471,15 @@
 }
 
 .features-title {
-  font-size: var(--text-2xl);
-  font-weight: var(--font-semibold);
+  font-size: clamp(2rem, 4vw, 3rem);
+  font-weight: 700;
   color: var(--foreground);
   margin: 0 0 var(--spacing-3) 0;
 }
 
 .features-description {
   color: var(--muted-foreground);
-  font-size: var(--text-base);
+  font-size: var(--text-lg);
   margin: 0;
   line-height: 1.6;
 }
@@ -478,6 +542,7 @@
   flex-direction: column;
   gap: var(--spacing-4);
   padding: var(--spacing-6);
+  height: 100%;
   background: var(--card);
   border: 1px solid var(--border);
   border-radius: var(--radius-xl);
@@ -746,6 +811,10 @@ a.feature-card:active {
     padding: var(--spacing-10) var(--spacing-4) var(--spacing-12);
   }
 
+  .hero-custom-visual--bottom + .features-section {
+    padding-top: var(--spacing-2);
+  }
+
   .features-header {
     margin-bottom: var(--spacing-8);
   }