@farming-labs/svelte-theme 0.0.6 → 0.0.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@farming-labs/svelte-theme",
-  "version": "0.0.6",
+  "version": "0.0.8",
   "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.6",
-    "@farming-labs/svelte": "0.0.6"
+    "@farming-labs/docs": "0.0.8",
+    "@farming-labs/svelte": "0.0.8"
   },
   "peerDependencies": {
     "svelte": ">=5.0.0"

package/src/components/DocsLayout.svelte

@@ -20,6 +20,9 @@
 
   let resolvedTitle = $derived(title ?? config?.nav?.title ?? "Docs");
   let resolvedTitleUrl = $derived(titleUrl ?? config?.nav?.url ?? "/docs");
+  let staticExport = $derived(!!(config && config.staticExport));
+  let showSearch = $derived(!staticExport);
+  let showFloatingAI = $derived(!staticExport && config?.ai?.mode === "floating" && !!config?.ai?.enabled);
 
   let showThemeToggle = $derived.by(() => {
     const toggle = config?.themeToggle;
@@ -78,7 +81,7 @@
   }
 
   function handleKeydown(e) {
-    if ((e.metaKey || e.ctrlKey) && e.key === "k") {
+    if (showSearch && (e.metaKey || e.ctrlKey) && e.key === "k") {
       e.preventDefault();
       searchOpen = !searchOpen;
     }
@@ -198,6 +201,10 @@
     const layout = config?.theme?.ui?.layout;
     return [buildColorsCSS(colorOverrides), buildTypographyCSS(typography), buildLayoutCSS(layout)].filter(Boolean).join("\n");
   });
+
+  // Build style tag from parts so Vite/Svelte preprocessor doesn't treat it as a real <style> block (PostCSS would then fail on "overrideCSS")
+  const styleTagOpen = "<sty" + "le>";
+  const styleTagClose = "</sty" + "le>";
 </script>
 
 <svelte:window onkeydown={handleKeydown} />
@@ -205,7 +212,7 @@
 <svelte:head>
   {@html `<script>${themeInitScript}</script>`}
   {#if overrideCSS}
-    {@html `<style>${overrideCSS}</style>`}
+    {@html `${styleTagOpen}${overrideCSS}${styleTagClose}`}
   {/if}
 </svelte:head>
 
@@ -220,12 +227,14 @@
       </svg>
     </button>
     <a href={resolvedTitleUrl} class="fd-header-title">{resolvedTitle}</a>
-    <button class="fd-search-trigger-mobile" onclick={openSearch} aria-label="Search">
-      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
-        <circle cx="11" cy="11" r="8" />
-        <line x1="21" y1="21" x2="16.65" y2="16.65" />
-      </svg>
-    </button>
+    {#if showSearch}
+      <button class="fd-search-trigger-mobile" onclick={openSearch} aria-label="Search">
+        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
+          <circle cx="11" cy="11" r="8" />
+          <line x1="21" y1="21" x2="16.65" y2="16.65" />
+        </svg>
+      </button>
+    {/if}
   </header>
 
   {#if sidebarOpen}
@@ -244,16 +253,18 @@
       </a>
     </div>
 
-    <div class="fd-sidebar-search">
-      <button class="fd-sidebar-search-btn" onclick={openSearch}>
-        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
-          <circle cx="11" cy="11" r="8" />
-          <line x1="21" y1="21" x2="16.65" y2="16.65" />
-        </svg>
-        <span>Search</span>
-        <kbd>&#8984;</kbd><kbd>K</kbd>
-      </button>
-    </div>
+    {#if showSearch}
+      <div class="fd-sidebar-search">
+        <button class="fd-sidebar-search-btn" onclick={openSearch}>
+          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
+            <circle cx="11" cy="11" r="8" />
+            <line x1="21" y1="21" x2="16.65" y2="16.65" />
+          </svg>
+          <span>Search</span>
+          <kbd>&#8984;</kbd><kbd>K</kbd>
+        </button>
+      </div>
+    {/if}
 
     {#if sidebarHeader}
       <div class="fd-sidebar-banner">
@@ -386,7 +397,7 @@
   </main>
 </div>
 
-{#if config?.ai?.mode === "floating" && config?.ai?.enabled}
+{#if showFloatingAI}
   <FloatingAIChat
     suggestedQuestions={config.ai.suggestedQuestions ?? []}
     aiLabel={config.ai.aiLabel ?? "AI"}
@@ -396,6 +407,6 @@
   />
 {/if}
 
-{#if searchOpen}
+{#if showSearch && searchOpen}
   <SearchDialog onclose={closeSearch} />
 {/if}

package/src/components/FloatingAIChat.svelte

@@ -207,14 +207,41 @@
 
 {#if mounted}
   {#if isFullModal}
-    <!-- ═══ Full-Modal Mode (better-auth inspired) ═══ -->
+    <!-- ═══ Full-Modal Mode (better-auth inspired) ═══
+         Trigger is always in a fixed-position wrapper when closed (no morphing).
+         When open: overlay + separate fixed input bar for smooth open/close. -->
 
+    <!-- When closed: fixed trigger only — stays in place, no layout jump -->
+    {#if !isOpen}
+      <div class="fd-ai-fm-trigger-fixed" style={btnStyle}>
+        {#if triggerComponent}
+          {@const Trigger = 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 fd-ai-floating-trigger--static">
+            <Trigger aiLabel={label} />
+          </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}
+      </div>
+    {/if}
+
+    <!-- When open: overlay + input bar (separate elements, no morphing from trigger) -->
     {#if isOpen}
-      <!-- Full-screen overlay -->
       <!-- svelte-ignore a11y_click_events_have_key_events -->
       <!-- svelte-ignore a11y_no_static_element_interactions -->
-      <div class="fd-ai-fm-overlay" onclick={(e) => { if (e.target === e.currentTarget) isOpen = false; }}>
-        <!-- Close button -->
+      <div class="fd-ai-fm-overlay fd-ai-fm-overlay--animate" onclick={(e) => { if (e.target === e.currentTarget) isOpen = false; }}>
         <div class="fd-ai-fm-topbar">
           <button onclick={() => isOpen = false} class="fd-ai-fm-close-btn" aria-label="Close">
             <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
@@ -223,7 +250,6 @@
           </button>
         </div>
 
-        <!-- Scrollable message list -->
         <div bind:this={fmListEl} class="fd-ai-fm-messages">
           <div class="fd-ai-fm-messages-inner">
             {#each messages as msg, i}
@@ -252,38 +278,9 @@
           </div>
         </div>
       </div>
-    {/if}
 
-    <!-- Bottom input bar — always visible when open, pinned to bottom -->
-    <div
-      class="fd-ai-fm-input-bar {isOpen ? 'fd-ai-fm-input-bar--open' : 'fd-ai-fm-input-bar--closed'}"
-      style={isOpen ? undefined : btnStyle}
-    >
-      {#if !isOpen}
-        {#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} aiLabel={label} />
-          </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}
+      <!-- Input bar when open: fixed at bottom center, never morphs from trigger -->
+      <div class="fd-ai-fm-input-bar fd-ai-fm-input-bar--open">
         <div class="fd-ai-fm-input-container">
           <div class="fd-ai-fm-input-wrap">
             <textarea
@@ -350,9 +347,8 @@
             {/if}
           </div>
         </div>
-      {/if}
-    </div>
-
+      </div>
+    {/if}
   {:else}
     <!-- ═══ Panel / Modal / Popover Mode ═══ -->
 
@@ -479,6 +475,7 @@
 
     {#if !isOpen}
       {#if triggerComponent}
+        {@const Trigger = triggerComponent}
         <!-- svelte-ignore a11y_click_events_have_key_events -->
         <!-- svelte-ignore a11y_no_static_element_interactions -->
         <div
@@ -486,7 +483,7 @@
           class="fd-ai-floating-trigger"
           style={btnStyle}
         >
-          <svelte:component this={triggerComponent} aiLabel={label} />
+          <Trigger aiLabel={label} />
         </div>
       {:else}
         <button

package/styles/docs.css

@@ -2262,6 +2262,19 @@ html.dark pre.shiki {
   transform: scale(0.97);
 }
 
+.dark .fd-ai-floating-btn,
+.dark .fd-ai-fm-trigger-btn {
+  background: color-mix(in srgb, var(--color-fd-secondary, rgba(255, 255, 255, 0.08)) 90%, transparent);
+  color: var(--color-fd-foreground, #e4e4e7);
+  border-color: var(--color-fd-border, rgba(255, 255, 255, 0.12));
+}
+
+.dark .fd-ai-floating-btn:hover,
+.dark .fd-ai-fm-trigger-btn:hover {
+  background: var(--color-fd-accent);
+  color: var(--color-fd-accent-foreground);
+}
+
 .fd-ai-floating-trigger {
   position: fixed;
   z-index: 9997;
@@ -2269,8 +2282,6 @@ html.dark pre.shiki {
   animation: fd-ai-fade-in 300ms ease-out;
 }
 
-/* Custom Ask AI trigger (e.g. triggerComponent): same base as .fd-ai-floating-btn
-   so theme overrides for fd-ai-floating-btn can also target .ask-ai-trigger */
 .fd-ai-floating-trigger .ask-ai-trigger {
   display: flex;
   align-items: center;
@@ -2290,12 +2301,23 @@ html.dark pre.shiki {
   transition: transform 150ms, background 150ms, color 150ms;
 }
 
+.dark .fd-ai-floating-trigger .ask-ai-trigger {
+  background: color-mix(in srgb, var(--color-fd-secondary, rgba(255, 255, 255, 0.08)) 90%, transparent);
+  color: var(--color-fd-foreground, #e4e4e7);
+  border-color: var(--color-fd-border, rgba(255, 255, 255, 0.12));
+}
+
 .fd-ai-floating-trigger .ask-ai-trigger:hover {
   background: var(--color-fd-accent);
   color: var(--color-fd-accent-foreground);
   transform: scale(1.03);
 }
 
+.dark .fd-ai-floating-trigger .ask-ai-trigger:hover {
+  background: var(--color-fd-accent);
+  color: var(--color-fd-accent-foreground);
+}
+
 .fd-ai-floating-trigger .ask-ai-trigger:active {
   transform: scale(0.97);
 }
@@ -2304,6 +2326,17 @@ html.dark pre.shiki {
    Full-Modal (better-auth inspired) — fd-ai-fm-*
    ═══════════════════════════════════════════════════════════════ */
 
+/* Fixed wrapper for trigger when closed — never morphs, so no "stuck" feel */
+.fd-ai-fm-trigger-fixed {
+  position: fixed;
+  z-index: 9997;
+  animation: fd-ai-fade-in 200ms ease-out;
+}
+
+.fd-ai-floating-trigger--static {
+  position: static;
+}
+
 .fd-ai-fm-overlay {
   position: fixed;
   inset: 0;
@@ -2313,10 +2346,13 @@ html.dark pre.shiki {
   background: color-mix(in srgb, var(--color-fd-background, #000) 80%, transparent);
   backdrop-filter: blur(8px);
   z-index: 9998;
-  animation: fd-ai-fade-in 200ms ease-out;
   padding: 0 8px;
 }
 
+.fd-ai-fm-overlay--animate {
+  animation: fd-ai-fade-in 200ms ease-out;
+}
+
 /* ─── Top bar (close button) ─────────────────────────────────── */
 
 .fd-ai-fm-topbar {
@@ -2498,14 +2534,6 @@ html.dark pre.shiki {
 .fd-ai-fm-input-bar {
   position: fixed;
   z-index: 9999;
-  transition:
-    width 300ms cubic-bezier(0.34, 1.56, 0.64, 1),
-    height 300ms cubic-bezier(0.34, 1.56, 0.64, 1),
-    transform 200ms ease-out;
-}
-
-.fd-ai-fm-input-bar--closed {
-  /* inherits position from inline btnPosition styles */
 }
 
 .fd-ai-fm-input-bar--open {
@@ -2513,6 +2541,7 @@ html.dark pre.shiki {
   left: 50%;
   transform: translateX(-50%);
   width: min(800px, calc(100vw - 32px));
+  animation: fd-ai-fade-in 200ms ease-out;
 }
 
 .fd-ai-fm-input-container {