@farming-labs/svelte-theme 0.0.5 → 0.0.7

package/package.json

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

package/src/components/DocsLayout.svelte

@@ -198,6 +198,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 +209,7 @@
 <svelte:head>
   {@html `<script>${themeInitScript}</script>`}
   {#if overrideCSS}
-    {@html `<style>${overrideCSS}</style>`}
+    {@html `${styleTagOpen}${overrideCSS}${styleTagClose}`}
   {/if}
 </svelte:head>
 

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

@@ -2017,6 +2017,56 @@ html.dark pre.shiki {
   font-size: 12px;
 }
 
+/* ─── Markdown prose inside AI bubbles (panel/modal/popover) ─────── */
+
+.fd-ai-bubble-ai h2 {
+  font-size: 1.125rem;
+  font-weight: 600;
+  margin: 12px 0 6px;
+  line-height: 1.3;
+}
+
+.fd-ai-bubble-ai h3 {
+  font-size: 1rem;
+  font-weight: 600;
+  margin: 10px 0 4px;
+  line-height: 1.4;
+}
+
+.fd-ai-bubble-ai h4 {
+  font-size: 0.9375rem;
+  font-weight: 600;
+  margin: 8px 0 4px;
+  line-height: 1.4;
+}
+
+.fd-ai-bubble-ai strong {
+  font-weight: 600;
+  color: var(--color-fd-foreground, #e4e4e7);
+}
+
+.fd-ai-bubble-ai em {
+  font-style: italic;
+}
+
+.fd-ai-bubble-ai p {
+  margin: 0 0 6px;
+}
+
+.fd-ai-bubble-ai br {
+  content: "";
+  display: block;
+  margin-top: 2px;
+}
+
+.fd-ai-bubble-ai pre {
+  margin: 8px 0;
+  border-radius: 0;
+  border: none;
+  background: transparent;
+  padding: 0;
+}
+
 /* ═══════════════════════════════════════════════════════════════════
  * Code blocks in AI chat — fd-ai-code-*
  * ═══════════════════════════════════════════════════════════════════ */
@@ -2212,6 +2262,20 @@ html.dark pre.shiki {
   transform: scale(0.97);
 }
 
+/* Dark mode: floating button and trigger use dark-friendly colors */
+.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;
@@ -2240,12 +2304,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);
 }
@@ -2254,6 +2329,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;
@@ -2263,10 +2349,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 {
@@ -2391,6 +2480,56 @@ html.dark pre.shiki {
   font-size: 12px;
 }
 
+/* ─── Markdown prose inside full-modal messages ──────────────────── */
+
+.fd-ai-fm-msg-content h2 {
+  font-size: 1.25rem;
+  font-weight: 600;
+  margin: 16px 0 8px;
+  line-height: 1.3;
+}
+
+.fd-ai-fm-msg-content h3 {
+  font-size: 1.0625rem;
+  font-weight: 600;
+  margin: 12px 0 6px;
+  line-height: 1.4;
+}
+
+.fd-ai-fm-msg-content h4 {
+  font-size: 1rem;
+  font-weight: 600;
+  margin: 10px 0 4px;
+  line-height: 1.4;
+}
+
+.fd-ai-fm-msg-content strong {
+  font-weight: 600;
+  color: var(--color-fd-foreground, #e4e4e7);
+}
+
+.fd-ai-fm-msg-content em {
+  font-style: italic;
+}
+
+.fd-ai-fm-msg-content p {
+  margin: 0 0 8px;
+}
+
+.fd-ai-fm-msg-content br {
+  content: "";
+  display: block;
+  margin-top: 2px;
+}
+
+.fd-ai-fm-msg-content pre {
+  margin: 8px 0;
+  border-radius: 0;
+  border: none;
+  background: transparent;
+  padding: 0;
+}
+
 /* Full-modal now uses the shared .fd-ai-loader indicator */
 
 /* ─── Bottom input bar ───────────────────────────────────────── */
@@ -2398,14 +2537,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 {
@@ -2413,6 +2544,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 {