@farming-labs/nuxt-theme 0.0.3-beta.3 → 0.0.3-beta.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@farming-labs/nuxt-theme",
-  "version": "0.0.3-beta.3",
+  "version": "0.0.3-beta.4",
   "description": "Nuxt/Vue UI components for @farming-labs/docs — layout, sidebar, TOC, search, and theme toggle",
   "keywords": [
     "docs",
@@ -60,7 +60,7 @@
   },
   "dependencies": {
     "sugar-high": "^0.9.5",
-    "@farming-labs/docs": "0.0.3-beta.3"
+    "@farming-labs/docs": "0.0.3-beta.4"
   },
   "peerDependencies": {
     "nuxt": ">=3.0.0",

package/src/components/TableOfContents.vue

@@ -23,26 +23,60 @@ const thumbHeight = ref(0);
 const svgPath = ref("");
 
 const ACTIVE_ZONE_TOP = 120; // px from top of viewport — heading "active" when near this line
+const HYSTERESIS_PX = 65; // only switch section when new is this much closer — keeps TOC highlight smooth (no flicker)
 
 let observer: IntersectionObserver | null = null;
 let scrollRafId = 0;
+let lastStableId: string | null = null;
+
+function getDistanceToZone(id: string): number {
+  const el = document.getElementById(id);
+  if (!el) return Infinity;
+  const rect = el.getBoundingClientRect();
+  const mid = rect.top + rect.height / 2;
+  return Math.abs(mid - ACTIVE_ZONE_TOP);
+}
 
-function getActiveIdFromScroll(): Set<string> {
+function getClosestId(): string | null {
   const ids = items.value.map((item) => item.url.slice(1));
   let bestId: string | null = null;
   let bestDistance = Infinity;
   for (const id of ids) {
-    const el = document.getElementById(id);
-    if (!el) continue;
-    const rect = el.getBoundingClientRect();
-    const mid = rect.top + rect.height / 2;
-    const distance = Math.abs(mid - ACTIVE_ZONE_TOP);
-    if (distance < bestDistance) {
-      bestDistance = distance;
+    const d = getDistanceToZone(id);
+    if (d < bestDistance) {
+      bestDistance = d;
       bestId = id;
     }
   }
-  return bestId ? new Set([bestId]) : new Set();
+  return bestId;
+}
+
+function isInView(id: string): boolean {
+  const el = document.getElementById(id);
+  if (!el) return false;
+  const rect = el.getBoundingClientRect();
+  return rect.top < window.innerHeight && rect.bottom > 0;
+}
+
+function getActiveIdFromScroll(): Set<string> {
+  const newId = getClosestId();
+  if (!newId) return new Set();
+
+  if (lastStableId === null) {
+    lastStableId = newId;
+    return new Set([newId]);
+  }
+
+  if (newId === lastStableId) return new Set([newId]);
+
+  const newDist = getDistanceToZone(newId);
+  const currentDist = getDistanceToZone(lastStableId);
+
+  const switchToNew =
+    newDist <= currentDist - HYSTERESIS_PX || !isInView(lastStableId);
+
+  if (switchToNew) lastStableId = newId;
+  return new Set([lastStableId]);
 }
 
 function updateActiveFromScroll() {
@@ -221,6 +255,7 @@ onMounted(() => {
 watch(
   items,
   () => {
+    lastStableId = null; // reset so new page gets smooth TOC from scroll position
     observeHeadings();
     nextTick(() => {
       activeIds.value = getActiveIdFromScroll();

package/styles/greentree.css

@@ -86,40 +86,38 @@ aside#nd-sidebar,
 #nd-docs-layout aside,
 .fd-sidebar {
   border: none;
-  border-right: none;
+  border-right: 1px solid var(--color-fd-border);
   border-left: none;
-  border-color: transparent;
   box-shadow: none;
   background: var(--color-fd-background);
 }
 
 .dark .fd-sidebar {
-  background: var(--fd-sidebar-bg, #1a1a1a);
+  background: var(--color-fd-background);
 }
 
 .dark .fd-sidebar .fd-sidebar-title {
   font-size: 1.125rem;
   font-weight: 600;
-  color: #e0e0e0;
+  color: var(--color-fd-foreground);
 }
 
-/* Search bar — rounded, darker grey background, ⌘ K badges */
 .dark .fd-sidebar .fd-sidebar-search-btn {
-  background: var(--fd-sidebar-card-bg, #252525) !important;
-  border: 1px solid var(--fd-sidebar-indent-line, #3c3c3c);
+  background: var(--color-fd-secondary) !important;
+  border: 1px solid var(--color-fd-border);
   border-radius: 8px;
-  color: #a0a0a0;
+  color: var(--color-fd-muted-foreground);
   font-size: 0.875rem;
 }
 
 .dark .fd-sidebar .fd-sidebar-search-btn:hover {
-  background: #2d2d2d !important;
+  background: var(--color-fd-accent) !important;
 }
 
 .dark .fd-sidebar .fd-sidebar-search-btn kbd {
-  background: #404040 !important;
-  border-color: #3c3c3c;
-  color: #a0a0a0;
+  background: var(--color-fd-muted) !important;
+  border-color: var(--color-fd-border);
+  color: var(--color-fd-muted-foreground);
   border-radius: 4px;
   padding: 2px 6px;
   font-size: 11px;
@@ -135,7 +133,7 @@ aside a[data-active],
 .fd-sidebar .fd-sidebar-link {
   font-size: 0.875rem;
   line-height: 1.5;
-  font-weight: 400;
+  font-weight: 500;
   padding: 6px 10px;
   border-radius: 8px;
   color: var(--color-fd-muted-foreground);
@@ -143,7 +141,7 @@ aside a[data-active],
 }
 
 .dark .fd-sidebar .fd-sidebar-link {
-  color: #e0e0e0;
+  color: var(--color-fd-muted-foreground);
 }
 
 aside a[data-active]:hover,
@@ -153,69 +151,52 @@ aside a[data-active]:hover,
 }
 
 .dark .fd-sidebar .fd-sidebar-link:hover {
-  color: #e0e0e0;
-  background: #2d2d2d;
+  color: var(--color-fd-foreground);
+  background: var(--color-fd-accent);
 }
 
+/* Active sidebar item — green tinted background + left highlight line */
 aside a[data-active="true"],
 .fd-sidebar .fd-sidebar-link-active,
 .fd-sidebar .fd-sidebar-link[data-active="true"] {
+  position: relative !important;
   color: var(--color-fd-primary) !important;
   font-weight: 600 !important;
-  background: transparent !important;
-  background-color: transparent !important;
+  background: rgba(13, 147, 115, 0.08) !important;
+  background-color: rgba(13, 147, 115, 0.08) !important;
 }
 
 .dark .fd-sidebar .fd-sidebar-link-active,
 .dark .fd-sidebar .fd-sidebar-link[data-active="true"] {
-  color: var(--fd-sidebar-active-text, #50c878) !important;
-  background: transparent !important;
-  background-color: transparent !important;
+  color: var(--color-fd-primary) !important;
+  background: rgba(38, 189, 108, 0.1) !important;
+  background-color: rgba(38, 189, 108, 0.1) !important;
 }
 
+/* Left highlight line — only for links that are children inside a folder (not for top-level links with no children) */
 .fd-sidebar-folder-content .fd-sidebar-link-active::before,
 .fd-sidebar-folder-content .fd-sidebar-link[data-active="true"]::before {
-  content: "";
-  position: absolute;
-  left: 0;
-  top: 0;
-  bottom: 0;
-  width: 2px;
-  background: var(--fd-sidebar-active-line, #50c878);
-  border-radius: 0;
-}
-
-.dark .fd-sidebar-folder-content .fd-sidebar-link-active::before,
-.dark .fd-sidebar-folder-content .fd-sidebar-link[data-active="true"]::before {
-  background: var(--fd-sidebar-active-line, #50c878);
+  content: "" !important;
+  display: block !important;
+  position: absolute !important;
+  left: -9px !important;
+  top: 20% !important;
+  bottom: 20% !important;
+  width: 3px !important;
+  border-radius: 0 2px 2px 0 !important;
+  background: var(--color-fd-primary) !important;
 }
 
 .fd-sidebar .fd-sidebar-top-link.fd-sidebar-link-active,
 .fd-sidebar .fd-sidebar-top-link[data-active="true"] {
-  background: transparent !important;
-  background-color: transparent !important;
+  background: rgba(13, 147, 115, 0.08) !important;
+  background-color: rgba(13, 147, 115, 0.08) !important;
 }
 
-.fd-sidebar .fd-sidebar-top-link.fd-sidebar-link-active::before,
-.fd-sidebar .fd-sidebar-top-link[data-active="true"]::before {
-  content: "";
-  position: absolute;
-  left: 0;
-  top: 25%;
-  bottom: 25%;
-  width: 2px;
-  background: var(--color-fd-primary);
-  border-radius: 1px;
-}
-
-.dark .fd-sidebar .fd-sidebar-top-link.fd-sidebar-link-active::before,
-.dark .fd-sidebar .fd-sidebar-top-link[data-active="true"]::before {
-  background: var(--fd-sidebar-active-line, #50c878);
-}
-
-aside a[data-active="true"]::before {
-  background-color: transparent;
-  width: 0;
+.dark .fd-sidebar .fd-sidebar-top-link.fd-sidebar-link-active,
+.dark .fd-sidebar .fd-sidebar-top-link[data-active="true"] {
+  background: rgba(38, 189, 108, 0.1) !important;
+  background-color: rgba(38, 189, 108, 0.1) !important;
 }
 
 .dark .fd-sidebar .fd-sidebar-folder {
@@ -236,14 +217,14 @@ aside a[data-active].w-full,
   font-weight: 600;
   font-size: 0.875rem;
   color: var(--color-fd-foreground);
-  padding: 7px 10px 8px 10px;
+  padding: 4px 10px 4px 10px;
   margin-top: 0;
   border: none;
   background: transparent !important;
 }
 
 .dark .fd-sidebar .fd-sidebar-folder-trigger {
-  color: #e0e0e0;
+  color: var(--color-fd-muted-foreground);
 }
 
 .fd-sidebar .fd-sidebar-folder-trigger:hover {
@@ -251,7 +232,7 @@ aside a[data-active].w-full,
 }
 
 .dark .fd-sidebar .fd-sidebar-folder-trigger:hover {
-  background: #2d2d2d !important;
+  background: var(--color-fd-accent) !important;
 }
 
 aside a[data-active].w-full:first-child,
@@ -277,7 +258,7 @@ aside a[data-active="true"].w-full,
 
 .dark .fd-sidebar .fd-sidebar-top-link.fd-sidebar-link-active,
 .dark .fd-sidebar .fd-sidebar-top-link[data-active="true"] {
-  color: var(--fd-sidebar-active-text, #50c878) !important;
+  color: var(--color-fd-primary) !important;
 }
 
 aside div.w-full:not([role]) {
@@ -322,7 +303,7 @@ aside .border-t,
 aside [class*="border-t"],
 .fd-sidebar .fd-sidebar-footer,
 .fd-sidebar .fd-sidebar-footer-custom {
-  border-top-color: transparent;
+  border-top: 1px solid var(--color-fd-border);
 }
 
 /* ═══════════════════════════════════════════════════════════════════
@@ -539,21 +520,31 @@ details > :not(summary) {
   padding: 0.75rem 1rem;
 }
 
-#nd-toc a[data-active="true"] {
+/* TOC — use .fd-toc (matches layout); transition reduces flash when scroll spy toggles active */
+.fd-toc .fd-toc-link,
+.fd-toc .fd-toc-clerk-link {
+  transition: color 0.2s ease;
+}
+
+.fd-toc .fd-toc-link-active,
+.fd-toc .fd-toc-link[data-active="true"],
+.fd-toc .fd-toc-clerk-link[data-active="true"] {
   color: var(--color-fd-primary);
   font-weight: 500;
 }
 
-#nd-toc a[data-active="false"] {
+.fd-toc .fd-toc-link:not(.fd-toc-link-active):not([data-active="true"]),
+.fd-toc .fd-toc-clerk-link:not([data-active="true"]) {
   color: var(--color-fd-muted-foreground);
 }
 
-#nd-toc a {
+.fd-toc .fd-toc-link,
+.fd-toc .fd-toc-clerk-link {
   font-size: 0.875rem;
   line-height: 1.3;
 }
 
-#nd-toc h3 {
+.fd-toc .fd-toc-title {
   font-size: 0.875rem;
   font-weight: 500;
 }
@@ -591,6 +582,7 @@ details > :not(summary) {
 }
 
 .fd-page-description {
+  margin-bottom: 1rem;
   font-size: 1rem;
   line-height: 1.7;
   color: var(--color-fd-muted-foreground);
@@ -692,11 +684,42 @@ details > :not(summary) {
   filter: brightness(1.1);
 }
 
-.fd-ai-suggestion,
+.fd-ai-suggestion {
+  border-radius: 10px;
+}
+
 .fd-ai-result {
   border-radius: 10px;
 }
 
+.fd-ai-fm-input-container {
+  border-radius: 12px;
+}
+
+.fd-ai-fm-send-btn {
+  border-radius: 9999px;
+}
+
+.fd-ai-fm-suggestion {
+  border-radius: 9999px;
+}
+
+.fd-ai-fm-trigger-btn {
+  border-radius: 16px;
+}
+
+.fd-ai-fm-close-btn {
+  border-radius: 9999px;
+}
+
+.fd-ai-code-block {
+  border-radius: 10px;
+}
+
+.fd-ai-code-copy {
+  border-radius: 6px;
+}
+
 .fd-sidebar-search-ai-row {
   display: flex;
   gap: 8px;
@@ -773,54 +796,7 @@ details > :not(summary) {
   height: 16px;
 }
 
-.fd-page-actions {
-  display: flex;
-  gap: 0;
-  align-items: stretch;
-}
-
-.fd-page-action-btn {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  padding: 6px 12px;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  color: var(--color-fd-muted-foreground);
-  background: transparent;
-  border: 1px solid var(--color-fd-border);
-  cursor: pointer;
-  transition:
-    background-color 150ms,
-    color 150ms;
-  white-space: nowrap;
-}
-
-.fd-page-action-btn:hover {
-  background: var(--color-fd-accent);
-  color: var(--color-fd-foreground);
-}
-
-.fd-page-actions .fd-page-action-btn:first-child {
-  border-radius: 8px 0 0 8px;
-  border-right: none;
-}
-
-.fd-page-actions .fd-page-action-dropdown:last-child .fd-page-action-btn,
-.fd-page-actions > .fd-page-action-btn:last-child {
-  border-radius: 0 8px 8px 0;
-  border-left: 1px solid var(--color-fd-border);
-  padding: 6px 8px;
-}
-
-.fd-page-actions .fd-page-action-btn:only-child {
-  border-radius: 8px;
-  border: 1px solid var(--color-fd-border);
-}
-
-.fd-page-action-dropdown {
-  position: relative;
-}
+/* Page actions — greentree style overrides on top of Nuxt base layout */
 
 .fd-sidebar::-webkit-scrollbar {
   width: 4px;

package/styles/pixel-border.css

@@ -705,3 +705,41 @@ code:not(pre code) {
 .fd-ai-code-block code {
   font-family: var(--fd-font-mono, ui-monospace, monospace);
 }
+
+/* Light mode: AI code blocks — light bg + dark text + visible pixel border */
+:root:not(.dark) .fd-ai-code-block {
+  background: #f4f4f5 !important;
+  box-shadow: 3px 3px 0 0 hsl(0 0% 75%);
+  --sh-class: #b45309;
+  --sh-identifier: #1f2937;
+  --sh-keyword: #7c3aed;
+  --sh-string: #0d9488;
+  --sh-property: #dc2626;
+  --sh-entity: #059669;
+  --sh-sign: #374151;
+  --sh-comment: #6b7280;
+  --sh-jsxliterals: #7c3aed;
+}
+
+:root:not(.dark) .fd-ai-code-header {
+  border-bottom-color: hsl(0 0% 80%);
+  background: color-mix(in srgb, #e4e4e7 90%, transparent);
+}
+
+:root:not(.dark) .fd-ai-code-lang {
+  color: #52525b;
+}
+
+:root:not(.dark) .fd-ai-code-copy {
+  color: #52525b;
+  border-color: hsl(0 0% 75%);
+}
+
+:root:not(.dark) .fd-ai-code-copy:hover {
+  color: #18181b;
+  background: color-mix(in srgb, #d4d4d8 70%, transparent);
+}
+
+:root:not(.dark) .fd-ai-code-block code {
+  color: #1f2937;
+}