@farming-labs/svelte-theme 0.0.2-beta.15 → 0.0.2-beta.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@farming-labs/svelte-theme",
-  "version": "0.0.2-beta.15",
+  "version": "0.0.2-beta.18",
   "description": "Svelte UI components for @farming-labs/docs — layout, sidebar, TOC, search, and theme toggle",
   "type": "module",
   "svelte": "./src/index.js",
@@ -26,12 +26,19 @@
       "import": "./src/themes/darksharp.js",
       "default": "./src/themes/darksharp.js"
     },
+    "./colorful": {
+      "types": "./src/themes/colorful.d.ts",
+      "import": "./src/themes/colorful.js",
+      "default": "./src/themes/colorful.js"
+    },
     "./css": "./styles/docs.css",
     "./fumadocs/css": "./styles/docs.css",
     "./styles/pixel-border.css": "./styles/pixel-border.css",
     "./styles/darksharp.css": "./styles/darksharp.css",
     "./pixel-border/css": "./styles/pixel-border-bundle.css",
-    "./darksharp/css": "./styles/darksharp-bundle.css"
+    "./darksharp/css": "./styles/darksharp-bundle.css",
+    "./styles/colorful.css": "./styles/colorful.css",
+    "./colorful/css": "./styles/colorful-bundle.css"
   },
   "typesVersions": {
     "*": {
@@ -65,8 +72,8 @@
   "dependencies": {
     "gray-matter": "^4.0.3",
     "sugar-high": "^0.9.5",
-    "@farming-labs/docs": "0.0.2-beta.15",
-    "@farming-labs/svelte": "0.0.2-beta.15"
+    "@farming-labs/docs": "0.0.2-beta.18",
+    "@farming-labs/svelte": "0.0.2-beta.18"
   },
   "peerDependencies": {
     "svelte": ">=5.0.0"

package/src/components/Breadcrumb.svelte

@@ -5,8 +5,7 @@
   let { pathname = "", entry = "docs" } = $props();
 
   let segments = $derived.by(() => {
-    const all = pathname.split("/").filter(Boolean);
-    return all.filter((s) => s.toLowerCase() !== entry.toLowerCase());
+    return pathname.split("/").filter(Boolean);
   });
 
   let parentLabel = $derived.by(() => {
@@ -25,10 +24,7 @@
 
   let parentUrl = $derived.by(() => {
     if (segments.length < 2) return "";
-    const all = pathname.split("/").filter(Boolean);
-    const parentSegment = segments[segments.length - 2];
-    const parentIndex = all.indexOf(parentSegment);
-    return "/" + all.slice(0, parentIndex + 1).join("/");
+    return "/" + segments.slice(0, segments.length - 1).join("/");
   });
 </script>
 

package/src/components/DocsContent.svelte

@@ -13,6 +13,10 @@
     config?.theme?.ui?.layout?.toc?.enabled ?? true
   );
 
+  let tocStyle = $derived(
+    config?.theme?.ui?.layout?.toc?.style ?? "default"
+  );
+
   let breadcrumbEnabled = $derived.by(() => {
     const bc = config?.breadcrumb;
     if (bc === undefined || bc === true) return true;
@@ -38,6 +42,7 @@
 <DocsPage
   entry={config?.entry ?? "docs"}
   {tocEnabled}
+  {tocStyle}
   {breadcrumbEnabled}
   previousPage={data.previousPage}
   nextPage={data.nextPage}
@@ -45,6 +50,9 @@
   lastModified={showLastModified ? data.lastModified : null}
 >
   {#snippet children()}
+    {#if data.description}
+      <p class="fd-page-description">{data.description}</p>
+    {/if}
     {@html data.html}
   {/snippet}
 </DocsPage>

package/src/components/DocsLayout.svelte

@@ -11,6 +11,7 @@
     title = undefined,
     titleUrl = undefined,
     children,
+    triggerComponent = null,
   } = $props();
 
   let resolvedTitle = $derived(title ?? config?.nav?.title ?? "Docs");
@@ -143,7 +144,7 @@
       vars.push(`${COLOR_MAP[key]}: ${value};`);
     }
     if (vars.length === 0) return "";
-    return `:root, .dark {\n  ${vars.join("\n  ")}\n}`;
+    return `.dark {\n  ${vars.join("\n  ")}\n}`;
   }
 
   function buildFontStyleVars(prefix, style) {
@@ -352,6 +353,7 @@
     aiLabel={config.ai.aiLabel ?? "AI"}
     position={config.ai.position ?? "bottom-right"}
     floatingStyle={config.ai.floatingStyle ?? "panel"}
+    {triggerComponent}
   />
 {/if}
 

package/src/components/DocsPage.svelte

@@ -6,6 +6,7 @@
 
   let {
     tocEnabled = true,
+    tocStyle = "default",
     breadcrumbEnabled = true,
     entry = "docs",
     previousPage = null,
@@ -143,7 +144,7 @@
 
   {#if tocEnabled}
     <aside class="fd-toc">
-      <TableOfContents items={tocItems} />
+      <TableOfContents items={tocItems} {tocStyle} />
     </aside>
   {/if}
 </div>

package/src/components/FloatingAIChat.svelte

@@ -8,6 +8,7 @@
     aiLabel = "AI",
     position = "bottom-right",
     floatingStyle = "panel",
+    triggerComponent = null,
   } = $props();
 
   let isOpen = $state(false);
@@ -254,17 +255,29 @@
       style={isOpen ? undefined : btnStyle}
     >
       {#if !isOpen}
-        <button
-          onclick={() => isOpen = true}
-          class="fd-ai-fm-trigger-btn"
-          aria-label="Ask {label}"
-        >
-          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-            <path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z"/>
-            <path d="M20 3v4"/><path d="M22 5h-4"/>
-          </svg>
-          <span>Ask {label}</span>
-        </button>
+        {#if triggerComponent}
+          <!-- svelte-ignore a11y_click_events_have_key_events -->
+          <!-- svelte-ignore a11y_no_static_element_interactions -->
+          <div
+            onclick={() => isOpen = true}
+            class="fd-ai-floating-trigger"
+            style={btnStyle}
+          >
+            <svelte:component this={triggerComponent} />
+          </div>
+        {:else}
+          <button
+            onclick={() => isOpen = true}
+            class="fd-ai-fm-trigger-btn"
+            aria-label="Ask {label}"
+          >
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z"/>
+              <path d="M20 3v4"/><path d="M22 5h-4"/>
+            </svg>
+            <span>Ask {label}</span>
+          </button>
+        {/if}
       {:else}
         <div class="fd-ai-fm-input-container">
           <div class="fd-ai-fm-input-wrap">
@@ -458,17 +471,30 @@
     {/if}
 
     {#if !isOpen}
-      <button
-        onclick={() => isOpen = true}
-        aria-label="Ask {label}"
-        class="fd-ai-floating-btn"
-        style={btnStyle}
-      >
-        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-          <path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z"/>
-          <path d="M20 3v4"/><path d="M22 5h-4"/>
-        </svg>
-      </button>
+      {#if triggerComponent}
+        <!-- svelte-ignore a11y_click_events_have_key_events -->
+        <!-- svelte-ignore a11y_no_static_element_interactions -->
+        <div
+          onclick={() => isOpen = true}
+          class="fd-ai-floating-trigger"
+          style={btnStyle}
+        >
+          <svelte:component this={triggerComponent} />
+        </div>
+      {:else}
+        <button
+          onclick={() => isOpen = true}
+          aria-label="Ask {label}"
+          class="fd-ai-floating-btn"
+          style={btnStyle}
+        >
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z"/>
+            <path d="M20 3v4"/><path d="M22 5h-4"/>
+          </svg>
+          <span>Ask {label}</span>
+        </button>
+      {/if}
     {/if}
   {/if}
 {/if}

package/src/components/TableOfContents.svelte

@@ -1,45 +1,176 @@
 <script>
-  import { onMount, onDestroy } from "svelte";
+  import { onMount, onDestroy, tick } from "svelte";
 
-  let { items = [] } = $props();
-  let activeId = $state("");
+  let { items = [], tocStyle = "default" } = $props();
+  let activeIds = $state(new Set());
   let observer;
+  let listEl;
+
+  let svgPath = $state("");
+  let svgWidth = $state(0);
+  let svgHeight = $state(0);
+  let thumbTop = $state(0);
+  let thumbHeight = $state(0);
+
+  const isDirectional = $derived(tocStyle === "directional");
+
+  function getItemOffset(depth) {
+    if (depth <= 2) return 14;
+    if (depth === 3) return 26;
+    return 36;
+  }
+
+  function getLineOffset(depth) {
+    return depth >= 3 ? 10 : 0;
+  }
+
+  function buildSvgPath() {
+    if (!listEl) return;
+    const links = listEl.querySelectorAll(".fd-toc-clerk-link");
+    if (links.length === 0) { svgPath = ""; return; }
+
+    let d = [];
+    let w = 0, h = 0;
+
+    links.forEach((el, i) => {
+      if (i >= items.length) return;
+      const depth = items[i].depth;
+      const x = getLineOffset(depth) + 1;
+      const styles = getComputedStyle(el);
+      const top = el.offsetTop + parseFloat(styles.paddingTop);
+      const bottom = el.offsetTop + el.clientHeight - parseFloat(styles.paddingBottom);
+      w = Math.max(x, w);
+      h = Math.max(h, bottom);
+      d.push(`${i === 0 ? "M" : "L"}${x} ${top}`);
+      d.push(`L${x} ${bottom}`);
+    });
+
+    svgPath = d.join(" ");
+    svgWidth = w + 1;
+    svgHeight = h;
+  }
+
+  function calcThumb() {
+    if (!listEl || activeIds.size === 0) {
+      thumbTop = 0;
+      thumbHeight = 0;
+      return;
+    }
+
+    let upper = Infinity, lower = 0;
+    for (const id of activeIds) {
+      const el = listEl.querySelector(`a[href="#${id}"]`);
+      if (!el) continue;
+      const styles = getComputedStyle(el);
+      upper = Math.min(upper, el.offsetTop + parseFloat(styles.paddingTop));
+      lower = Math.max(lower, el.offsetTop + el.clientHeight - parseFloat(styles.paddingBottom));
+    }
+
+    if (upper === Infinity) {
+      thumbTop = 0;
+      thumbHeight = 0;
+      return;
+    }
+
+    thumbTop = upper;
+    thumbHeight = lower - upper;
+  }
+
+  function maskSvgUrl() {
+    if (!svgPath) return "none";
+    const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${svgWidth} ${svgHeight}"><path d="${svgPath}" stroke="black" stroke-width="1" fill="none"/></svg>`;
+    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));
+  }
+
+  function hasDiagonal(index) {
+    if (index === 0) return false;
+    return items[index - 1].depth !== items[index].depth;
+  }
+
+  function getDiagonalCoords(index) {
+    const upperOffset = getLineOffset(items[index - 1].depth);
+    const currentOffset = getLineOffset(items[index].depth);
+    return { upperOffset, currentOffset };
+  }
+
+  function verticalLineStyle(item, index) {
+    const prevDepth = index > 0 ? items[index - 1].depth : item.depth;
+    const nextDepth = index < items.length - 1 ? items[index + 1].depth : item.depth;
+    return {
+      position: "absolute",
+      left: `${getLineOffset(item.depth)}px`,
+      top: prevDepth !== item.depth ? "6px" : "0",
+      bottom: nextDepth !== item.depth ? "6px" : "0",
+      width: "1px",
+      background: "hsla(0, 0%, 50%, 0.1)",
+    };
+  }
+
+  function styleObj(obj) {
+    return Object.entries(obj).map(([k, v]) => `${k}:${v}`).join(";");
+  }
 
   onMount(() => {
     observer = new IntersectionObserver(
       (entries) => {
         for (const entry of entries) {
           if (entry.isIntersecting) {
-            activeId = entry.target.id;
+            activeIds.add(entry.target.id);
+          } else {
+            activeIds.delete(entry.target.id);
           }
         }
+        activeIds = new Set(activeIds);
       },
       { rootMargin: "-80px 0px -80% 0px" }
     );
-
     observeHeadings();
+
+    if (isDirectional) {
+      tick().then(() => {
+        buildSvgPath();
+        calcThumb();
+      });
+    }
   });
 
   $effect(() => {
     void items;
     observeHeadings();
+    if (isDirectional) {
+      tick().then(() => {
+        buildSvgPath();
+        calcThumb();
+      });
+    }
   });
 
-  function observeHeadings() {
-    if (!observer) return;
-    observer.disconnect();
-    for (const item of items) {
-      const el = document.querySelector(item.url);
-      if (el) observer.observe(el);
+  $effect(() => {
+    void activeIds;
+    if (isDirectional) {
+      calcThumb();
     }
-  }
+  });
 
   onDestroy(() => {
     observer?.disconnect();
   });
 </script>
 
-<div class="fd-toc-inner">
+<div class="fd-toc-inner" class:fd-toc-directional={isDirectional}>
   <h3 class="fd-toc-title">
     <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
       <line x1="3" y1="6" x2="21" y2="6" />
@@ -50,14 +181,14 @@
   </h3>
   {#if items.length === 0}
     <p class="fd-toc-empty">No Headings</p>
-  {:else}
+  {:else if !isDirectional}
     <ul class="fd-toc-list">
       {#each items as item}
         <li class="fd-toc-item">
           <a
             href={item.url}
             class="fd-toc-link"
-            class:fd-toc-link-active={activeId === item.url.slice(1)}
+            class:fd-toc-link-active={isActive(item)}
             style:padding-left="{12 + (item.depth - 2) * 12}px"
           >
             {item.title}
@@ -65,5 +196,41 @@
         </li>
       {/each}
     </ul>
+  {:else}
+    <ul class="fd-toc-list fd-toc-clerk" style="position:relative;" bind:this={listEl}>
+      {#each items as item, index}
+        <li class="fd-toc-item">
+          <a
+            href={item.url}
+            class="fd-toc-link fd-toc-clerk-link"
+            data-active={isActive(item) ? "true" : undefined}
+            style="position:relative; padding-left:{getItemOffset(item.depth)}px; padding-top:6px; padding-bottom:6px; font-size:{item.depth <= 2 ? '14' : '13'}px; overflow-wrap:anywhere;"
+          >
+            <div style={styleObj(verticalLineStyle(item, index))}></div>
+
+            {#if hasDiagonal(index)}
+              {@const d = getDiagonalCoords(index)}
+              <svg viewBox="0 0 16 16" width="16" height="16" style="position:absolute; top:-6px; left:0;">
+                <line x1={d.upperOffset} y1="0" x2={d.currentOffset} y2="12" stroke="hsla(0, 0%, 50%, 0.1)" stroke-width="1" />
+              </svg>
+            {/if}
+
+            {item.title}
+          </a>
+        </li>
+      {/each}
+
+      {#if svgPath}
+        <div
+          class="fd-toc-clerk-mask"
+          style="position:absolute; left:0; top:0; width:{svgWidth}px; height:{svgHeight}px; pointer-events:none; mask-image:{maskSvgUrl()}; -webkit-mask-image:{maskSvgUrl()}; mask-repeat:no-repeat; -webkit-mask-repeat:no-repeat;"
+        >
+          <div
+            class="fd-toc-clerk-thumb"
+            style="margin-top:{thumbTop}px; height:{thumbHeight}px; background:var(--color-fd-primary); transition:all 0.15s; will-change:height,margin-top;"
+          ></div>
+        </div>
+      {/if}
+    </ul>
   {/if}
 </div>

package/src/themes/colorful.d.ts

@@ -0,0 +1,2 @@
+export declare const colorful: (overrides?: { ui?: Record<string, unknown> }) => import("@farming-labs/docs").DocsTheme;
+export declare const ColorfulUIDefaults: Record<string, unknown>;

package/src/themes/colorful.js

@@ -0,0 +1,42 @@
+import { createTheme } from "@farming-labs/docs";
+
+const ColorfulUIDefaults = {
+  colors: {
+    primary: "hsl(40, 96%, 40%)",
+    background: "#ffffff",
+    muted: "#64748b",
+    border: "#e5e7eb",
+  },
+  typography: {
+    font: {
+      style: {
+        sans: "Inter, system-ui, sans-serif",
+        mono: "JetBrains Mono, monospace",
+      },
+      h1: { size: "1.875rem", weight: 700, lineHeight: "1.2", letterSpacing: "-0.02em" },
+      h2: { size: "1.5rem", weight: 600, lineHeight: "1.3" },
+      h3: { size: "1.25rem", weight: 600, lineHeight: "1.4" },
+      h4: { size: "1.125rem", weight: 600, lineHeight: "1.4" },
+      body: { size: "1rem", weight: 400, lineHeight: "1.75" },
+      small: { size: "0.875rem", weight: 400, lineHeight: "1.5" },
+    },
+  },
+  layout: {
+    contentWidth: 768,
+    sidebarWidth: 260,
+    toc: { enabled: true, depth: 3, style: "directional" },
+    header: { height: 56, sticky: true },
+  },
+  components: {
+    Callout: { variant: "soft", icon: true },
+    CodeBlock: { showCopyButton: true },
+    Tabs: { style: "default" },
+  },
+};
+
+export const colorful = createTheme({
+  name: "fumadocs-colorful",
+  ui: ColorfulUIDefaults,
+});
+
+export { ColorfulUIDefaults };

package/styles/colorful-bundle.css

@@ -0,0 +1,2 @@
+@import "./docs.css";
+@import "./colorful.css";

package/styles/colorful.css

@@ -0,0 +1,148 @@
+/* @farming-labs/svelte-theme — colorful theme overrides
+ * Fumadocs-inspired theme with warm yellow/amber accent colors.
+ * Import AFTER the base theme CSS (docs.css).
+ */
+
+/* ─── Colorful yellow accent overrides ────────────────────────────── */
+
+:root {
+  --color-fd-primary: hsl(40, 96%, 40%);
+  --color-fd-primary-foreground: hsl(0, 0%, 100%);
+  --color-fd-ring: hsl(40, 80%, 50%);
+}
+
+.dark {
+  --color-fd-primary: hsl(45, 100%, 60%);
+  --color-fd-primary-foreground: hsl(0, 0%, 5%);
+  --color-fd-ring: hsl(45, 90%, 55%);
+}
+
+/* ─── Description under title ──────────────────────────────────────── */
+
+.fd-page-description {
+  margin-bottom: 1rem;
+  font-size: 1.125rem;
+  line-height: 1.75;
+  color: var(--color-fd-muted-foreground);
+}
+
+/* ─── Sidebar dark overrides (fumadocs neutral) ────────────────────── */
+
+.dark .fd-sidebar {
+  --color-fd-muted: hsl(0, 0%, 16%);
+  --color-fd-secondary: hsl(0, 0%, 18%);
+  --color-fd-muted-foreground: hsl(0, 0%, 72%);
+}
+
+/* ─── Cards (fumadocs style) ────────────────────────────────────────── */
+
+.fd-card {
+  display: block;
+  border-radius: 0.75rem;
+  border: 1px solid var(--color-fd-border);
+  background: var(--color-fd-card);
+  padding: 1rem;
+  font-size: 0.875rem;
+  color: var(--color-fd-card-foreground);
+  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
+  transition: background-color 150ms, border-color 150ms;
+}
+
+.fd-card:hover {
+  background: var(--color-fd-accent);
+}
+
+.fd-card-icon {
+  margin-bottom: 0.5rem;
+  width: fit-content;
+  border-radius: 0.375rem;
+  border: 1px solid var(--color-fd-border);
+  padding: 0.375rem;
+  color: var(--color-fd-muted-foreground);
+}
+
+.fd-card-title {
+  font-weight: 500;
+}
+
+.fd-card-description {
+  color: var(--color-fd-muted-foreground);
+  margin-top: 0.25rem;
+}
+
+.fd-cards {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 1rem;
+}
+
+@media (min-width: 640px) {
+  .fd-cards {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+/* ─── Page nav cards ───────────────────────────────────────────────── */
+
+.fd-page-nav-card {
+  border-radius: 0.75rem;
+}
+
+/* ─── Inline code ──────────────────────────────────────────────────── */
+
+.fd-docs-content :not(pre) > code {
+  padding: 3px;
+  border: 1px solid var(--color-fd-border);
+  font-size: 13px;
+  border-radius: 5px;
+  background: var(--color-fd-muted);
+}
+
+/* ─── Links in prose ───────────────────────────────────────────────── */
+
+.fd-docs-content a:not(.fd-page-nav-card):not([class]) {
+  text-decoration: underline;
+  text-underline-offset: 3.5px;
+  text-decoration-color: var(--color-fd-primary);
+  text-decoration-thickness: 1.5px;
+  font-weight: 500;
+}
+
+/* ─── Tables (rounded) ─────────────────────────────────────────────── */
+
+.fd-docs-content table {
+  border-collapse: separate;
+  border-spacing: 0;
+  background: var(--color-fd-card);
+  border-radius: 0.75rem;
+  border: 1px solid var(--color-fd-border);
+  overflow: hidden;
+}
+
+.fd-docs-content th {
+  background: var(--color-fd-muted);
+  font-weight: 600;
+}
+
+.fd-docs-content th,
+.fd-docs-content td {
+  padding: 0.625rem;
+  border-bottom: 1px solid var(--color-fd-border);
+}
+
+.fd-docs-content tr:last-child td {
+  border-bottom: none;
+}
+
+/* ─── Blockquotes ──────────────────────────────────────────────────── */
+
+.fd-docs-content blockquote {
+  border-left: 2px solid var(--color-fd-primary);
+  padding-left: 1rem;
+  color: var(--color-fd-foreground);
+  font-style: normal;
+}
+
+.fd-docs-content hr {
+  border-color: var(--color-fd-border);
+}

package/styles/docs.css

@@ -477,6 +477,37 @@ code, kbd, pre, samp {
   border-left-color: var(--color-fd-primary);
 }
 
+/* ─── Clerk TOC (tree-line style) ────────────────────────────────────── */
+
+.fd-toc-clerk {
+  border-left: none !important;
+}
+
+.fd-toc-clerk .fd-toc-link {
+  display: block;
+  border-left: none;
+  margin-left: 0;
+  color: var(--color-fd-muted-foreground);
+  text-decoration: none;
+  transition: color 0.15s;
+}
+
+.fd-toc-clerk .fd-toc-link:hover {
+  color: var(--color-fd-foreground);
+}
+
+.fd-toc-clerk .fd-toc-link[data-active="true"] {
+  color: var(--color-fd-primary);
+}
+
+.fd-toc-clerk-mask {
+  overflow: hidden;
+}
+
+.fd-toc-clerk-thumb {
+  width: 100%;
+}
+
 @media (max-width: 1279px) {
   .fd-toc {
     display: none;
@@ -497,6 +528,15 @@ code, kbd, pre, samp {
   }
 }
 
+/* ─── Page description (frontmatter) ─────────────────────────────────── */
+
+.fd-page-description {
+  margin-bottom: 1rem;
+  font-size: 1.125rem;
+  line-height: 1.75;
+  color: var(--color-fd-muted-foreground);
+}
+
 /* ─── Breadcrumb ─────────────────────────────────────────────────────── */
 
 .fd-breadcrumb {
@@ -1749,11 +1789,6 @@ html.dark pre.shiki {
 
 .fd-ai-floating-btn {
   border-radius: 26px;
-  box-shadow: 0 8px 32px rgba(99, 102, 241, 0.3);
-}
-
-.fd-ai-floating-btn:hover {
-  box-shadow: 0 10px 40px rgba(99, 102, 241, 0.4);
 }
 
 .fd-ai-suggestion {
@@ -1802,24 +1837,32 @@ html.dark pre.shiki {
 .fd-ai-floating-btn {
   position: fixed;
   z-index: 9997;
-  width: 52px;
-  height: 52px;
-  border-radius: var(--radius, 26px);
-  border: 1px solid var(--color-fd-border, rgba(255, 255, 255, 0.1));
-  background: var(--color-fd-primary, #6366f1);
-  color: var(--color-fd-primary-foreground, #fff);
-  cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
-  box-shadow: 0 8px 32px color-mix(in srgb, var(--color-fd-primary, #6366f1) 30%, transparent);
-  transition: all 200ms;
+  gap: 8px;
+  padding: 8px 12px;
+  height: 40px;
+  border-radius: 16px;
+  border: 1px solid var(--color-fd-border, rgba(255, 255, 255, 0.1));
+  background: color-mix(in srgb, var(--color-fd-secondary, #f4f4f5) 80%, transparent);
+  backdrop-filter: blur(4px);
+  color: var(--color-fd-muted-foreground, #71717a);
+  cursor: pointer;
+  font-size: 14px;
+  box-shadow: 0 1px 3px color-mix(in srgb, var(--color-fd-background, #000) 20%, transparent);
+  transition: transform 150ms, background 150ms, color 150ms;
   animation: fd-ai-fade-in 300ms ease-out;
 }
 
 .fd-ai-floating-btn:hover {
-  transform: scale(1.05);
-  box-shadow: 0 10px 40px color-mix(in srgb, var(--color-fd-primary, #6366f1) 40%, transparent);
+  background: var(--color-fd-accent);
+  color: var(--color-fd-accent-foreground);
+  transform: scale(1.03);
+}
+
+.fd-ai-floating-btn:active {
+  transform: scale(0.97);
 }
 
 .fd-ai-floating-trigger {
@@ -2148,24 +2191,28 @@ html.dark pre.shiki {
   align-items: center;
   justify-content: center;
   gap: 8px;
-  padding: 8px 16px;
+  padding: 8px 12px;
   height: 40px;
-  border-radius: var(--radius, 16px);
+  border-radius: 16px;
   border: 1px solid var(--color-fd-border, rgba(255, 255, 255, 0.1));
-  background: var(--color-fd-secondary, rgba(255, 255, 255, 0.06));
+  background: color-mix(in srgb, var(--color-fd-secondary, #f4f4f5) 80%, transparent);
+  backdrop-filter: blur(4px);
   color: var(--color-fd-muted-foreground, #71717a);
   font-family: inherit;
   font-size: 14px;
   cursor: pointer;
-  backdrop-filter: blur(8px);
-  box-shadow: 0 8px 32px color-mix(in srgb, var(--color-fd-background, #000) 40%, transparent);
-  transition: all 200ms;
+  box-shadow: 0 1px 3px color-mix(in srgb, var(--color-fd-background, #000) 20%, transparent);
+  transition: transform 150ms, background 150ms, color 150ms;
   animation: fd-ai-fade-in 300ms ease-out;
   white-space: nowrap;
 }
 
 .fd-ai-fm-trigger-btn:hover {
-  background: var(--color-fd-accent, rgba(255, 255, 255, 0.1));
-  color: var(--color-fd-accent-foreground, #fff);
+  background: var(--color-fd-accent);
+  color: var(--color-fd-accent-foreground);
   transform: scale(1.03);
 }
+
+.fd-ai-fm-trigger-btn:active {
+  transform: scale(0.97);
+}