docyard 0.4.0 → 0.6.0

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

@@ -0,0 +1,269 @@
+/* Table of Contents - Desktop & Mobile */
+
+.docyard-toc {
+  width: var(--toc-width);
+  position: fixed;
+  top: var(--header-height);
+  right: 0;
+  height: calc(100vh - var(--header-height));
+  padding: var(--space-3) var(--space-6) var(--space-3) var(--space-8);
+  overflow-y: auto;
+  overflow-x: hidden;
+  border-left: 1px solid var(--color-border);
+  background-color: var(--color-bg);
+}
+
+/* TOC Header */
+.docyard-toc__header {
+  margin-bottom: var(--space-4);
+}
+
+.docyard-toc__title {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  font-size: 0.6875rem;
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text-tertiary);
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  margin-bottom: 0;
+}
+
+.docyard-toc__title svg {
+  flex-shrink: 0;
+}
+
+/* Secondary Header TOC Toggle (tablet & mobile) */
+.secondary-header-toc-toggle {
+  display: none;
+}
+
+/* Tablet & Mobile TOC Toggle */
+@media (max-width: 1280px) {
+  .secondary-header-toc-toggle {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    padding: var(--space-2) var(--space-3);
+    background: transparent;
+    border: none;
+    color: var(--color-text);
+    font-size: var(--font-size-sm);
+    font-weight: var(--font-weight-medium);
+    font-family: var(--font-sans);
+    cursor: pointer;
+    transition: color var(--transition-fast);
+    outline: none;
+  }
+
+  .secondary-header-toc-toggle:hover {
+    color: var(--color-text-secondary);
+  }
+
+  .secondary-header-toc-toggle:focus-visible {
+    outline: 2px solid var(--color-primary);
+    outline-offset: 2px;
+    border-radius: var(--radius-sm);
+  }
+
+  .secondary-header-toc-toggle svg {
+    transform: rotate(-90deg);
+    transition: transform var(--transition-base);
+  }
+
+  .secondary-header-toc-toggle[aria-expanded="true"] svg {
+    transform: rotate(0deg);
+  }
+}
+
+/* TOC Navigation */
+.docyard-toc__nav {
+  display: block;
+}
+
+/* TOC List */
+.docyard-toc__list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.docyard-toc__list .docyard-toc__list {
+  margin-top: var(--space-1);
+  margin-left: var(--space-4);
+  border-left: 1px solid var(--color-border);
+  padding-left: var(--space-3);
+}
+
+/* TOC Items */
+.docyard-toc__item {
+  margin-bottom: 0.375rem;
+}
+
+/* TOC Links */
+.docyard-toc__link {
+  display: block;
+  padding: 0.25rem var(--space-2);
+  color: var(--color-text-secondary);
+  text-decoration: none;
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-tight);
+  border-radius: var(--radius-sm);
+  transition: color var(--transition-fast);
+  font-weight: var(--font-weight-medium);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.docyard-toc__link:hover {
+  color: var(--color-text);
+  text-decoration: none;
+}
+
+.docyard-toc__link:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 2px;
+  color: var(--color-text);
+  text-decoration: none;
+}
+
+/* Active link */
+.docyard-toc__link.is-active {
+  color: var(--color-primary);
+  font-weight: var(--font-weight-semibold);
+}
+
+/* Level-specific styling */
+.docyard-toc__item--level-2>.docyard-toc__link {
+  font-weight: var(--font-weight-medium);
+}
+
+.docyard-toc__item--level-3>.docyard-toc__link {
+  font-size: 0.8125rem;
+}
+
+.docyard-toc__item--level-4>.docyard-toc__link {
+  font-size: 0.8125rem;
+  color: var(--color-text-tertiary);
+}
+
+/* TOC Scrollbar */
+.docyard-toc::-webkit-scrollbar {
+  width: 0.5rem;
+}
+
+.docyard-toc::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.docyard-toc::-webkit-scrollbar-thumb {
+  background: rgba(208, 215, 222, 0.5);
+  border-radius: 0.25rem;
+}
+
+.docyard-toc::-webkit-scrollbar-thumb:hover {
+  background: rgba(208, 215, 222, 0.7);
+}
+
+.dark .docyard-toc::-webkit-scrollbar-thumb {
+  background: rgba(110, 118, 129, 0.4);
+}
+
+.dark .docyard-toc::-webkit-scrollbar-thumb:hover {
+  background: rgba(110, 118, 129, 0.6);
+}
+
+/* Tablet & Mobile Layout - TOC in secondary header */
+@media (max-width: 1280px) {
+  .docyard-toc {
+    display: block;
+    position: static;
+    width: 0;
+    height: 0;
+    padding: 0;
+    margin: 0;
+    border: none;
+    overflow: visible;
+  }
+
+  .docyard-toc__header {
+    display: none;
+  }
+
+  .docyard-toc__nav {
+    display: none;
+    position: fixed;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    padding: var(--space-5);
+    background: var(--color-bg);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-lg);
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
+      0 2px 4px -1px rgba(0, 0, 0, 0.06),
+      0 0 0 1px rgba(0, 0, 0, 0.05);
+    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);
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  .dark .docyard-toc__nav {
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3),
+      0 2px 4px -1px rgba(0, 0, 0, 0.2),
+      0 0 0 1px rgba(255, 255, 255, 0.1);
+  }
+
+  .docyard-toc__nav.is-expanded {
+    display: block;
+    opacity: 1;
+    transform: translateY(0);
+    pointer-events: auto;
+  }
+}
+
+/* Tablet-specific: floating dropdown on right */
+@media (max-width: 1280px) and (min-width: 1025px) {
+  .docyard-toc__nav {
+    top: calc(var(--header-height) + 3rem + var(--space-2));
+    right: var(--space-6);
+    width: 280px;
+    max-height: calc(100vh - var(--header-height) - 3rem - var(--space-8));
+  }
+}
+
+/* Mobile Layout (< 1024px) */
+@media (max-width: 1024px) {
+  .docyard-toc__nav {
+    top: calc(var(--header-height) + 3rem - 2px);
+    left: var(--space-4);
+    right: var(--space-4);
+    max-height: calc(100vh - var(--header-height) - 3rem - var(--space-2));
+  }
+
+  .secondary-header.shift-up~.layout .docyard-toc__nav {
+    top: calc(3rem - 2px);
+    max-height: calc(100vh - 3rem - var(--space-2));
+  }
+
+  .docyard-toc__list .docyard-toc__list {
+    margin-left: var(--space-3);
+    padding-left: var(--space-2);
+  }
+}
+
+/* Reduced Motion */
+@media (prefers-reduced-motion: reduce) {
+  .docyard-toc__link {
+    transition: none;
+  }
+
+  .secondary-header-toc-toggle svg {
+    transition: none;
+  }
+}

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

@@ -1,4 +1,4 @@
-/* Tabs Component - Modern Design */
+/* Tabs Component */
 
 .docyard-tabs {
   margin: var(--space-6) 0;
@@ -13,12 +13,16 @@
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
 }
 
-/* Tab List Wrapper - Contains scroll indicators */
+/* Tab List Wrapper */
 .docyard-tabs__list-wrapper {
   position: relative;
   background: var(--color-bg-secondary);
 }
 
+.dark .docyard-tabs__list-wrapper {
+  background: rgba(255, 255, 255, 0.03);
+}
+
 /* Tab List Container */
 .docyard-tabs__list {
   display: flex;
@@ -36,7 +40,7 @@
   display: none;
 }
 
-/* Bottom border line - sits behind tabs */
+/* Bottom border line */
 .docyard-tabs__list::after {
   content: '';
   position: absolute;
@@ -81,7 +85,7 @@
 
 .docyard-tabs__tab[aria-selected="true"] {
   color: var(--color-primary);
-  background: var(--color-bg);
+  background: var(--color-code-bg);
 }
 
 /* Cover the border-bottom for active tab */
@@ -92,11 +96,11 @@
   left: 0;
   right: 0;
   height: 2px;
-  background: var(--color-bg);
+  background: var(--color-code-bg);
   z-index: 2;
 }
 
-/* Focus indicator for keyboard navigation */
+/* Focus state */
 .docyard-tabs__tab:focus-visible {
   outline: 2px solid var(--color-primary);
   outline-offset: 2px;
@@ -121,7 +125,7 @@
   height: 100%;
 }
 
-/* Scroll Indicators - Gradient overlays showing more content */
+/* Scroll Indicators */
 .docyard-tabs__scroll-indicator {
   position: absolute;
   top: 0;
@@ -151,7 +155,7 @@
   opacity: 1;
 }
 
-/* Slide indicator - vibrant accent line */
+/* Slide Indicator */
 .docyard-tabs__indicator {
   position: absolute;
   top: 0;
@@ -173,11 +177,7 @@
   background: var(--color-bg);
 }
 
-/* If panel has mixed content (not just code block), add padding to panel */
-.docyard-tabs__panel:not(:has(> [class*="language-"]:only-child)) {
-  padding: var(--space-6);
-}
-
+/* Panel base styles */
 .docyard-tabs__panel p {
   margin-bottom: 0;
 }
@@ -186,7 +186,7 @@
   display: block;
 }
 
-/* Ensure proper spacing for content inside panels */
+/* Panel content spacing */
 .docyard-tabs__panel>*:first-child {
   margin-top: 0;
 }
@@ -195,43 +195,49 @@
   margin-bottom: 0;
 }
 
-/* Code blocks inside tabs - seamless integration */
-.docyard-tabs__panel .highlight,
-.docyard-tabs__panel pre {
+/* Code blocks inside tabs */
+.docyard-tabs__panel .docyard-code-block {
   margin: 0;
-  border-radius: 0;
-  border: none;
-  padding: 0 !important;
-  background-color: var(--color-bg) !important;
-  box-shadow: none !important;
 }
 
-/* If panel has ONLY code block, add padding to the highlight element */
-.docyard-tabs__panel:has(> [class*="language-"]:only-child) pre {
-  padding: var(--space-6) !important;
+/* Reset code block styling in tabs */
+.docyard-tabs__panel .docyard-code-block .highlight {
+  border: none;
+  border-radius: 0;
+  box-shadow: none;
+  background: transparent;
 }
 
-/* Apply secondary background when highlighter-rouge has siblings */
-.docyard-tabs__panel .highlighter-rouge:not(:only-child) .highlight pre code {
-  padding: var(--space-4) !important;
-  background-color: var(--color-bg-secondary) !important;
-  border-radius: var(--radius-lg) !important;
-  border: 1px solid var(--color-border) !important;
-  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.03) !important;
+/* Panel styles with :has() support */
+@supports selector(:has(*)) {
+  .docyard-tabs__panel:not(:has(> [class*="language-"]:only-child)) {
+    padding: var(--space-6);
+  }
+
+  .docyard-tabs__panel:has(> [class*="language-"]:only-child) {
+    background: var(--color-code-bg);
+  }
+
+  .docyard-tabs__panel:has(> [class*="language-"]:only-child) .highlight pre {
+    padding: var(--space-6);
+    background: transparent;
+  }
 }
 
-.docyard-tabs__panel pre code {
-  padding: 0 !important;
-  display: block;
-  overflow-x: auto;
-  background-color: var(--color-bg) !important;
-  border-radius: 0;
-  border: none !important;
-  box-shadow: none !important;
+/* Fallback for browsers without :has() */
+@supports not selector(:has(*)) {
+  .docyard-tabs__panel {
+    padding: var(--space-6);
+  }
 }
 
-.docyard-tabs__panel pre code .w {
-  background-color: var(--color-bg) !important;
+/* Code blocks with siblings */
+.docyard-tabs__panel .docyard-code-block:not(:only-child) .highlight {
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.03);
+  margin: var(--space-4) 0;
+  background: var(--color-code-bg);
 }
 
 /* Inline code inside tabs */
@@ -242,7 +248,7 @@
   font-size: 0.9em;
 }
 
-/* Mobile responsive - preserve design language */
+/* Mobile responsive */
 @media (max-width: 640px) {
   .docyard-tabs {
     margin: var(--space-4) 0;
@@ -256,7 +262,7 @@
   .docyard-tabs__tab {
     padding: var(--space-3) var(--space-3);
     font-size: var(--font-size-sm);
-    gap: var(--space-1-5);
+    gap: var(--space-2);
   }
 
   .docyard-tabs__icon .docyard-icon {

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

@@ -65,11 +65,45 @@
   border-radius: var(--radius-sm);
 }
 
-/* Secondary Header (Mobile Navigation Bar) */
+/* Secondary Header (Tablet & Mobile Navigation Bar) */
 .secondary-header {
   display: none;
 }
 
+/* Tablet: Show secondary header with TOC toggle only */
+@media (max-width: 1280px) and (min-width: 1025px) {
+  .secondary-header {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    position: fixed;
+    top: var(--header-height);
+    left: var(--sidebar-width);
+    right: 0;
+    height: 3rem;
+    min-height: 3rem;
+    background: var(--color-bg);
+    border-bottom: 1px solid var(--color-border);
+    padding: 0 var(--space-6);
+    z-index: var(--z-secondary-header);
+    transition: top 0.3s cubic-bezier(0.4, 0, 0.2, 1), left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.02);
+  }
+
+  .secondary-header.shift-up {
+    top: 0;
+  }
+
+  .secondary-header-menu {
+    display: none;
+  }
+
+  .layout {
+    padding-top: calc(var(--header-height) + 3rem);
+  }
+}
+
+/* Mobile: Show menu button + TOC toggle */
 @media (max-width: 1024px) {
   .secondary-header {
     display: flex;
@@ -80,6 +114,7 @@
     left: 0;
     right: 0;
     height: 3rem;
+    min-height: 3rem;
     background: var(--color-bg);
     border-bottom: 1px solid var(--color-border);
     padding: 0 var(--space-6);
@@ -107,6 +142,7 @@
     transition: background-color 0.2s ease;
     font-family: var(--font-sans);
     margin-left: calc(-1 * var(--space-2));
+    outline: none;
   }
 
   .secondary-header-menu:hover {
@@ -117,6 +153,12 @@
     background-color: var(--color-border);
   }
 
+  .secondary-header-menu:focus-visible {
+    outline: 2px solid var(--color-primary);
+    outline-offset: 2px;
+    border-radius: var(--radius-sm);
+  }
+
   .secondary-header-menu .icon {
     flex-shrink: 0;
   }
@@ -176,11 +218,19 @@
 .layout-main {
   flex: 1;
   margin-left: var(--sidebar-width);
+  margin-right: var(--toc-width, 0);
   display: flex;
   flex-direction: column;
   min-width: 0;
 }
 
+/* Tablet Layout (1024px - 1280px) */
+@media (max-width: 1280px) and (min-width: 1025px) {
+  .layout-main {
+    margin-right: 0;
+  }
+}
+
 /* Content wrapper */
 main.content {
   flex: 1;
@@ -200,6 +250,7 @@ main.content {
 
   .layout {
     padding-top: calc(var(--header-height) + 3rem);
+    flex-direction: column;
   }
 
   .sidebar {
@@ -223,8 +274,14 @@ main.content {
     box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
   }
 
+  .docyard-toc {
+    order: 1;
+  }
+
   .layout-main {
     margin-left: 0;
+    margin-right: 0;
+    order: 2;
   }
 
   main.content {

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

@@ -12,6 +12,7 @@
   --color-border: #e4e7eb;
   --color-border-secondary: #f3f4f6;
   --color-primary: #2563eb;
+  --color-primary-rgb: 37, 99, 235;
   --color-primary-hover: #1d4ed8;
   --color-primary-light: #eff6ff;
   --color-link: #0969da;
@@ -32,6 +33,27 @@
   --color-info: #0969da;
   --color-info-bg: #ddf4ff;
 
+  /* Diff colors - Light Theme */
+  --color-diff-add-bg: rgba(34, 197, 94, 0.15);
+  --color-diff-add-border: #22c55e;
+  --color-diff-add-gutter-bg: rgba(34, 197, 94, 0.2);
+  --color-diff-add-indicator: #166534;
+
+  --color-diff-remove-bg: rgba(239, 68, 68, 0.15);
+  --color-diff-remove-border: #ef4444;
+  --color-diff-remove-gutter-bg: rgba(239, 68, 68, 0.2);
+  --color-diff-remove-indicator: #991b1b;
+
+  /* Code error/warning colors - Light Theme */
+  --color-code-error-bg: rgba(239, 68, 68, 0.15);
+  --color-code-error-border: #ef4444;
+  --color-code-error-gutter-bg: rgba(239, 68, 68, 0.2);
+  --color-code-error-indicator: #991b1b;
+  --color-code-warning-bg: rgba(245, 158, 11, 0.15);
+  --color-code-warning-border: #f59e0b;
+  --color-code-warning-gutter-bg: rgba(245, 158, 11, 0.2);
+  --color-code-warning-indicator: #78350f;
+
   /* Callout colors - shadcn inspired */
   --callout-note: #0ea5e9;
   --callout-note-text: #0c4a6e;
@@ -98,6 +120,7 @@
 
   /* Layout */
   --sidebar-width: 288px;
+  --toc-width: 280px;
   --header-height: 64px;
   --content-max-width: 800px;
   --layout-max-width: 1440px;
@@ -142,6 +165,7 @@
   --color-border: #30363d;
   --color-border-secondary: #21262d;
   --color-primary: #3b82f6;
+  --color-primary-rgb: 59, 130, 246;
   --color-primary-hover: #60a5fa;
   --color-primary-light: #1e3a8a;
   --color-link: #58a6ff;
@@ -162,6 +186,27 @@
   --color-info: #58a6ff;
   --color-info-bg: #1e3a5f;
 
+  /* Diff colors - Dark Theme */
+  --color-diff-add-bg: rgba(34, 197, 94, 0.1);
+  --color-diff-add-border: #22c55e;
+  --color-diff-add-gutter-bg: rgba(34, 197, 94, 0.15);
+  --color-diff-add-indicator: #4ade80;
+
+  --color-diff-remove-bg: rgba(239, 68, 68, 0.1);
+  --color-diff-remove-border: #ef4444;
+  --color-diff-remove-gutter-bg: rgba(239, 68, 68, 0.15);
+  --color-diff-remove-indicator: #f87171;
+
+  /* Code error/warning colors - Dark Theme */
+  --color-code-error-bg: rgba(239, 68, 68, 0.1);
+  --color-code-error-border: #ef4444;
+  --color-code-error-gutter-bg: rgba(239, 68, 68, 0.15);
+  --color-code-error-indicator: #f87171;
+  --color-code-warning-bg: rgba(245, 158, 11, 0.1);
+  --color-code-warning-border: #f59e0b;
+  --color-code-warning-gutter-bg: rgba(245, 158, 11, 0.15);
+  --color-code-warning-indicator: #fbbf24;
+
   /* Callout colors - Dark mode shadcn inspired */
   --callout-note: #38bdf8;
   --callout-note-text: #7dd3fc;