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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@farming-labs/svelte-theme",
-  "version": "0.0.3-beta.3",
+  "version": "0.0.3-beta.4",
   "description": "Svelte UI components for @farming-labs/docs — layout, sidebar, TOC, search, and theme toggle",
   "keywords": [
     "docs",
@@ -82,8 +82,8 @@
   "dependencies": {
     "gray-matter": "^4.0.3",
     "sugar-high": "^0.9.5",
-    "@farming-labs/docs": "0.0.3-beta.3",
-    "@farming-labs/svelte": "0.0.3-beta.3"
+    "@farming-labs/docs": "0.0.3-beta.4",
+    "@farming-labs/svelte": "0.0.3-beta.4"
   },
   "peerDependencies": {
     "svelte": ">=5.0.0"

package/src/components/TableOfContents.svelte

@@ -1,10 +1,14 @@
 <script>
   import { onMount, onDestroy, tick } from "svelte";
 
+  const ACTIVE_ZONE_TOP = 120;
+  const HYSTERESIS_PX = 65;
+
   let { items = [], tocStyle = "default" } = $props();
   let activeIds = $state(new Set());
-  let observer;
-  let listEl;
+  let listEl = $state(null);
+  let lastStableId = null;
+  let scrollRafId = 0;
 
   let svgPath = $state("");
   let svgWidth = $state(0);
@@ -14,6 +18,63 @@
 
   const isDirectional = $derived(tocStyle === "directional");
 
+  function getDistanceToZone(id) {
+    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 getClosestId() {
+    const ids = items.map((item) => item.url.slice(1));
+    let bestId = null;
+    let bestDistance = Infinity;
+    for (const id of ids) {
+      const d = getDistanceToZone(id);
+      if (d < bestDistance) {
+        bestDistance = d;
+        bestId = id;
+      }
+    }
+    return bestId;
+  }
+
+  function isInView(id) {
+    const el = document.getElementById(id);
+    if (!el) return false;
+    const rect = el.getBoundingClientRect();
+    return rect.top < window.innerHeight && rect.bottom > 0;
+  }
+
+  function updateActiveFromScroll() {
+    scrollRafId = 0;
+    const newId = getClosestId();
+    if (!newId) {
+      activeIds = new Set();
+      return;
+    }
+    if (lastStableId === null) {
+      lastStableId = newId;
+      activeIds = new Set([newId]);
+      return;
+    }
+    if (newId === lastStableId) {
+      activeIds = new Set([newId]);
+      return;
+    }
+    const newDist = getDistanceToZone(newId);
+    const currentDist = getDistanceToZone(lastStableId);
+    const switchToNew = newDist <= currentDist - HYSTERESIS_PX || !isInView(lastStableId);
+    if (switchToNew) lastStableId = newId;
+    activeIds = new Set([lastStableId]);
+  }
+
+  function scheduleActiveUpdate() {
+    if (scrollRafId !== 0) return;
+    scrollRafId = requestAnimationFrame(updateActiveFromScroll);
+  }
+
   function getItemOffset(depth) {
     if (depth <= 2) return 14;
     if (depth === 3) return 26;
@@ -82,15 +143,6 @@
     return `url("data:image/svg+xml,${encodeURIComponent(svg)}")`;
   }
 
-  function observeHeadings() {
-    if (!observer) return;
-    observer.disconnect();
-    for (const item of items) {
-      const el = document.querySelector(item.url);
-      if (el) observer.observe(el);
-    }
-  }
-
   function isActive(item) {
     return activeIds.has(item.url.slice(1));
   }
@@ -124,33 +176,32 @@
   }
 
   onMount(() => {
-    observer = new IntersectionObserver(
-      (entries) => {
-        for (const entry of entries) {
-          if (entry.isIntersecting) {
-            activeIds.add(entry.target.id);
-          } else {
-            activeIds.delete(entry.target.id);
-          }
-        }
-        activeIds = new Set(activeIds);
-      },
-      { rootMargin: "-80px 0px -80% 0px" }
-    );
-    observeHeadings();
+    const onScroll = () => scheduleActiveUpdate();
+    window.addEventListener("scroll", onScroll, { passive: true, capture: true });
+    document.addEventListener("scroll", onScroll, { passive: true, capture: true });
 
-    if (isDirectional) {
-      tick().then(() => {
+    tick().then(() => {
+      const id = getClosestId();
+      if (id) {
+        lastStableId = id;
+        activeIds = new Set([id]);
+      }
+      if (isDirectional) {
         buildSvgPath();
         calcThumb();
-      });
-    }
+      }
+    });
+
+    return () => {
+      window.removeEventListener("scroll", onScroll, { capture: true });
+      document.removeEventListener("scroll", onScroll, { capture: true });
+      if (scrollRafId) cancelAnimationFrame(scrollRafId);
+    };
   });
 
   $effect(() => {
     void items;
-    observeHeadings();
-    if (isDirectional) {
+    if (isDirectional && listEl) {
       tick().then(() => {
         buildSvgPath();
         calcThumb();
@@ -165,9 +216,7 @@
     }
   });
 
-  onDestroy(() => {
-    observer?.disconnect();
-  });
+  onDestroy(() => {});
 </script>
 
 <div class="fd-toc-inner" class:fd-toc-directional={isDirectional}>

package/styles/greentree.css

@@ -42,6 +42,13 @@
   --color-fd-accent: #1a1d1c;
   --color-fd-accent-foreground: #e5e7e6;
   --color-fd-border: #2a2d2c;
+
+  --fd-sidebar-bg: #0a0d0d;
+  --fd-sidebar-card-bg: #1a1d1c;
+  --fd-sidebar-active-bg: #284d2b;
+  --fd-sidebar-active-text: #26bd6c;
+  --fd-sidebar-active-line: #26bd6c;
+  --fd-sidebar-indent-line: #2a2d2c;
 }
 
 /* ─── Typography — Inter, Mintlify-style values ──────────────── */
@@ -63,79 +70,202 @@ h3 {
   font-weight: 600;
   line-height: 1.3;
 }
-
+.fd-docs-content {
+  border: none !important;
+}
 .fd-docs-content p {
   font-size: 1rem;
   line-height: 1.7;
 }
 
 /* ═══════════════════════════════════════════════════════════════════
- * SIDEBAR — GreenTree: no border, green active background
  * ═══════════════════════════════════════════════════════════════════ */
 
 aside,
 #nd-sidebar,
 aside#nd-sidebar,
-#nd-docs-layout aside {
+#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);
 }
 
-aside a[data-active] {
+.dark .fd-sidebar {
+  background: var(--color-fd-background);
+}
+
+.dark .fd-sidebar .fd-sidebar-title {
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: var(--color-fd-foreground);
+}
+
+.dark .fd-sidebar .fd-sidebar-search-btn {
+  background: var(--color-fd-secondary) !important;
+  border: 1px solid var(--color-fd-border);
+  border-radius: 8px;
+  color: var(--color-fd-muted-foreground);
+  font-size: 0.875rem;
+}
+
+.dark .fd-sidebar .fd-sidebar-search-btn:hover {
+  background: var(--color-fd-accent) !important;
+}
+
+.dark .fd-sidebar .fd-sidebar-search-btn kbd {
+  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: 12px;
+  line-height: 1;
+}
+
+/* Nav padding */
+.fd-sidebar .fd-sidebar-nav {
+  padding: 8px 12px;
+}
+
+/* All sidebar links — 14px, 500 weight, 6px 10px padding */
+aside a[data-active],
+.fd-sidebar .fd-sidebar-link {
   font-size: 0.875rem;
   line-height: 1.5;
   font-weight: 500;
   padding: 6px 10px;
   border-radius: 8px;
   color: var(--color-fd-muted-foreground);
-  transition:
-    color 150ms,
-    background-color 150ms;
+  transition: color 150ms, background-color 150ms;
 }
 
-aside a[data-active]:hover {
+.dark .fd-sidebar .fd-sidebar-link {
+  color: var(--color-fd-muted-foreground);
+}
+
+aside a[data-active]:hover,
+.fd-sidebar .fd-sidebar-link:hover {
   color: var(--color-fd-foreground);
   background: var(--color-fd-accent);
 }
 
-aside a[data-active="true"] {
-  color: var(--color-fd-primary);
-  font-weight: 600;
-  background: rgba(13, 147, 115, 0.08);
-  background-color: rgba(13, 147, 115, 0.08);
+.dark .fd-sidebar .fd-sidebar-link:hover {
+  color: var(--color-fd-foreground);
+  background: var(--color-fd-accent);
 }
 
-.dark aside a[data-active="true"] {
-  background: rgba(38, 189, 108, 0.1);
-  background-color: rgba(38, 189, 108, 0.1);
-  color: var(--color-fd-primary);
+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: 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(--color-fd-primary) !important;
+  background: rgba(38, 189, 108, 0.1) !important;
+  background-color: rgba(38, 189, 108, 0.1) !important;
+}
+
+.fd-sidebar-folder-content .fd-sidebar-link-active::before,
+.fd-sidebar-folder-content .fd-sidebar-link[data-active="true"]::before {
+  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: rgba(13, 147, 115, 0.08) !important;
+  background-color: rgba(13, 147, 115, 0.08) !important;
+}
+
+.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 {
+  margin: 2px 0;
+  padding: 0;
+  border-radius: 0;
+  border: none;
+  background: transparent;
+  overflow: visible;
+}
+.fd-sidebar .fd-sidebar-folder {
+  border: none;
+}
+.fd-page-body .fd-table-wrapper {
+  border: none !important;
 }
 
-aside a[data-active="true"]::before {
-  background-color: transparent;
-  width: 0;
+.dark .fd-sidebar .fd-sidebar-folder.fd-sidebar-first-item {
+  margin-top: 0;
 }
 
-aside a[data-active].w-full {
+aside a[data-active].w-full,
+.fd-sidebar .fd-sidebar-folder-trigger {
   font-weight: 600;
   font-size: 0.875rem;
   color: var(--color-fd-foreground);
-  padding-top: 1rem;
-  padding-bottom: 0.25rem;
-  margin-top: 0.5rem;
+  padding: 4px 10px 4px 10px;
+  margin-top: 0;
+  border: none;
   background: transparent !important;
 }
 
-aside a[data-active].w-full:first-child {
+.dark .fd-sidebar .fd-sidebar-folder-trigger {
+  color: var(--color-fd-muted-foreground);
+  border: none;
+}
+
+.fd-sidebar .fd-sidebar-folder-trigger:hover {
+  background: var(--color-fd-accent) !important;
+
+}
+
+.dark .fd-sidebar .fd-sidebar-folder-trigger:hover {
+  background: var(--color-fd-accent) !important;
+}
+
+aside a[data-active].w-full:first-child,
+.fd-sidebar-nav > .fd-sidebar-folder.fd-sidebar-first-item > .fd-sidebar-folder-trigger {
   margin-top: 0;
 }
 
-aside a[data-active="true"].w-full {
-  color: var(--color-fd-primary);
+.fd-sidebar .fd-sidebar-top-link {
+  margin-top: 0;
+  padding: 6px 10px;
+}
+
+.fd-sidebar .fd-sidebar-top-link.fd-sidebar-first-item {
+  margin-top: 0;
+}
+
+aside a[data-active="true"].w-full,
+.fd-sidebar .fd-sidebar-top-link.fd-sidebar-link-active,
+.fd-sidebar .fd-sidebar-top-link[data-active="true"] {
+  color: var(--color-fd-primary) !important;
+}
+
+.dark .fd-sidebar .fd-sidebar-top-link.fd-sidebar-link-active,
+.dark .fd-sidebar .fd-sidebar-top-link[data-active="true"] {
+  color: var(--color-fd-primary) !important;
 }
 
 aside div.w-full:not([role]) {
@@ -147,7 +277,30 @@ aside div.w-full:not([role]) {
   margin-top: 0.5rem;
 }
 
-aside button[class*="bg-fd-secondary"] {
+.fd-sidebar .fd-sidebar-folder-content {
+  position: relative;
+  padding-left: 16px;
+  margin-left: 8px;
+  margin-top: -12px;
+}
+
+.fd-sidebar .fd-sidebar-folder-content::before {
+  content: "";
+  position: absolute;
+  left: 8px;
+  top: 8px;
+  height: 90%;
+  bottom: 4px;
+  width: 1px;
+  background: var(--color-fd-border);
+}
+
+.dark .fd-sidebar .fd-sidebar-folder-content::before {
+  background: var(--fd-sidebar-indent-line, var(--color-fd-border));
+}
+
+aside button[class*="bg-fd-secondary"],
+.dark .fd-sidebar .fd-sidebar-search-btn {
   background: transparent;
   border: 1px solid var(--color-fd-border);
   border-radius: 8px;
@@ -155,8 +308,10 @@ aside button[class*="bg-fd-secondary"] {
 }
 
 aside .border-t,
-aside [class*="border-t"] {
-  border-top-color: transparent;
+aside [class*="border-t"],
+.fd-sidebar .fd-sidebar-footer,
+.fd-sidebar .fd-sidebar-footer-custom {
+  border-top: 1px solid var(--color-fd-border);
 }
 
 /* ═══════════════════════════════════════════════════════════════════
@@ -236,6 +391,24 @@ nav[class*="header"] {
   margin: 1rem 0;
 }
 
+.fd-page-actions,
+[data-page-actions] {
+  gap: 0 !important;
+  margin-right: 10px;
+}
+/* 
+.fd-page-actions .fd-page-action-btn:nth-child(2) {
+  border-top-right-radius: 0 !important;
+  border-bottom-right-radius: 0 !important;
+}
+
+.fd-page-actions,
+[data-page-actions] .fd-page-action-btn:first-child {
+  border-top-left-radius: 0 !important;
+  border-bottom-left-radius: 0 !important;
+  border-left: none !important;
+} */
+
 .fd-docs-content hr {
   border-color: var(--color-fd-border);
 }
@@ -373,21 +546,30 @@ details > :not(summary) {
   padding: 0.75rem 1rem;
 }
 
-#nd-toc a[data-active="true"] {
+.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;
 }
@@ -540,11 +722,48 @@ details > :not(summary) {
   filter: brightness(1.1);
 }
 
-.fd-ai-suggestion,
+.fd-ai-suggestion {
+  border-radius: 10px;
+}
+.dark .fd-ai-suggestion:hover {
+  border: 1px solid var(--color-fd-primary/50);
+}
+
 .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: 20px;
+}
+
+.fd-ai-fm-msg-content table  {
+  border-radius: 20px;
+}
+.fd-ai-code-copy {
+  border-radius: 6px;
+}
+
 .fd-sidebar-search-ai-row {
   display: flex;
   gap: 8px;
@@ -569,7 +788,7 @@ details > :not(summary) {
 }
 
 .fd-sidebar-search-btn:hover {
-  background: var(--color-fd-accent);
+  background: var(--color-fd-accent) ;
 }
 
 .fd-sidebar-search-btn svg {
@@ -643,7 +862,6 @@ details > :not(summary) {
 
 .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,

package/styles/pixel-border.css

@@ -707,6 +707,44 @@ code:not(pre 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;
+}
+
 /* ─── Omni Command Palette — pixel-border theme ──────────────────── */
 
 .omni-content {