@farming-labs/svelte-theme 0.0.2-beta.22 → 0.0.2-beta.24

package/package.json

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

package/src/components/AskAIDialog.svelte

@@ -213,10 +213,10 @@
             onkeydown={handleSearchKeydown}
           />
           {#if isSearching}
-            <span class="fd-ai-loading-dots">
-              <span class="fd-ai-loading-dot"></span>
-              <span class="fd-ai-loading-dot"></span>
-              <span class="fd-ai-loading-dot"></span>
+            <span class="fd-ai-loader-typing-dots" style="margin-left:0">
+              <span class="fd-ai-loader-typing-dot"></span>
+              <span class="fd-ai-loader-typing-dot"></span>
+              <span class="fd-ai-loader-typing-dot"></span>
             </span>
           {/if}
         </div>
@@ -276,7 +276,7 @@
               {/if}
             </div>
           {:else}
-            {#each messages as msg}
+            {#each messages as msg, i}
               <div class="fd-ai-msg" data-role={msg.role}>
                 <div class="fd-ai-msg-label">
                   {msg.role === "user" ? "You" : aiLabel}
@@ -286,16 +286,18 @@
                 {:else}
                   <div class="fd-ai-bubble-ai">
                     {#if msg.content}
-                      {@html renderMarkdown(msg.content)}
+                      <div class={isStreaming && i === messages.length - 1 ? 'fd-ai-streaming' : ''}>
+                        {@html renderMarkdown(msg.content)}
+                      </div>
                     {:else}
-                      <span class="fd-ai-loading">
-                        <span class="fd-ai-loading-text">{aiLabel} is thinking</span>
-                        <span class="fd-ai-loading-dots">
-                          <span class="fd-ai-loading-dot"></span>
-                          <span class="fd-ai-loading-dot"></span>
-                          <span class="fd-ai-loading-dot"></span>
+                      <div class="fd-ai-loader">
+                        <span class="fd-ai-loader-shimmer-text">Thinking</span>
+                        <span class="fd-ai-loader-typing-dots">
+                          <span class="fd-ai-loader-typing-dot"></span>
+                          <span class="fd-ai-loader-typing-dot"></span>
+                          <span class="fd-ai-loader-typing-dot"></span>
                         </span>
-                      </span>
+                      </div>
                     {/if}
                   </div>
                 {/if}

package/src/components/DocsContent.svelte

@@ -30,6 +30,13 @@
   );
 
   let showLastModified = $derived(!!data.lastModified);
+
+  let llmsTxtEnabled = $derived.by(() => {
+    const cfg = config?.llmsTxt;
+    if (cfg === true) return true;
+    if (typeof cfg === "object" && cfg !== null) return cfg.enabled !== false;
+    return false;
+  });
 </script>
 
 <svelte:head>
@@ -48,6 +55,7 @@
   nextPage={data.nextPage}
   editOnGithub={showEditOnGithub ? data.editOnGithub : null}
   lastModified={showLastModified ? data.lastModified : null}
+  {llmsTxtEnabled}
 >
   {#snippet children()}
     {#if data.description}

package/src/components/DocsPage.svelte

@@ -13,6 +13,7 @@
     nextPage = null,
     editOnGithub = null,
     lastModified = null,
+    llmsTxtEnabled = false,
     children,
   } = $props();
 
@@ -92,7 +93,7 @@
     </div>
 
     <footer class="fd-page-footer">
-      {#if editOnGithub || lastModified}
+      {#if editOnGithub || lastModified || llmsTxtEnabled}
         <div class="fd-edit-on-github">
           {#if editOnGithub}
             <a href={editOnGithub} target="_blank" rel="noopener noreferrer">
@@ -103,6 +104,12 @@
               Edit on GitHub
             </a>
           {/if}
+          {#if llmsTxtEnabled}
+            <span class="fd-llms-txt-links">
+              <a href="/api/docs?format=llms" target="_blank" rel="noopener noreferrer" class="fd-llms-txt-link">llms.txt</a>
+              <a href="/api/docs?format=llms-full" target="_blank" rel="noopener noreferrer" class="fd-llms-txt-link">llms-full.txt</a>
+            </span>
+          {/if}
           {#if lastModified}
             <span class="fd-last-modified">Last updated: {lastModified}</span>
           {/if}

package/src/components/FloatingAIChat.svelte

@@ -226,19 +226,24 @@
         <!-- Scrollable message list -->
         <div bind:this={fmListEl} class="fd-ai-fm-messages">
           <div class="fd-ai-fm-messages-inner">
-            {#each messages as msg}
+            {#each messages as msg, i}
               <div class="fd-ai-fm-msg" data-role={msg.role}>
                 <div class="fd-ai-fm-msg-label" data-role={msg.role}>
                   {msg.role === "user" ? "you" : label}
                 </div>
                 <div class="fd-ai-fm-msg-content">
                   {#if msg.content}
-                    {@html renderMarkdown(msg.content)}
+                    <div class={isStreaming && i === messages.length - 1 && msg.role === 'assistant' ? 'fd-ai-streaming' : ''}>
+                      {@html renderMarkdown(msg.content)}
+                    </div>
                   {:else}
-                    <div class="fd-ai-fm-thinking">
-                      <span class="fd-ai-fm-thinking-dot"></span>
-                      <span class="fd-ai-fm-thinking-dot"></span>
-                      <span class="fd-ai-fm-thinking-dot"></span>
+                    <div class="fd-ai-loader">
+                      <span class="fd-ai-loader-shimmer-text">Thinking</span>
+                      <span class="fd-ai-loader-typing-dots">
+                        <span class="fd-ai-loader-typing-dot"></span>
+                        <span class="fd-ai-loader-typing-dot"></span>
+                        <span class="fd-ai-loader-typing-dot"></span>
+                      </span>
                     </div>
                   {/if}
                 </div>
@@ -292,10 +297,10 @@
             ></textarea>
             {#if isStreaming}
               <button class="fd-ai-fm-send-btn" onclick={() => isStreaming = false} aria-label="Stop">
-                <span class="fd-ai-loading-dots">
-                  <span class="fd-ai-loading-dot"></span>
-                  <span class="fd-ai-loading-dot"></span>
-                  <span class="fd-ai-loading-dot"></span>
+                <span class="fd-ai-loader-typing-dots" style="margin-left:0">
+                  <span class="fd-ai-loader-typing-dot"></span>
+                  <span class="fd-ai-loader-typing-dot"></span>
+                  <span class="fd-ai-loader-typing-dot"></span>
                 </span>
               </button>
             {:else}
@@ -407,7 +412,7 @@
                 {/if}
               </div>
             {:else}
-              {#each messages as msg}
+              {#each messages as msg, i}
                 <div class="fd-ai-msg" data-role={msg.role}>
                   <div class="fd-ai-msg-label">
                     {msg.role === "user" ? "You" : label}
@@ -417,16 +422,18 @@
                   {:else}
                     <div class="fd-ai-bubble-ai">
                       {#if msg.content}
-                        {@html renderMarkdown(msg.content)}
+                        <div class={isStreaming && i === messages.length - 1 ? 'fd-ai-streaming' : ''}>
+                          {@html renderMarkdown(msg.content)}
+                        </div>
                       {:else}
-                        <span class="fd-ai-loading">
-                          <span class="fd-ai-loading-text">{label} is thinking</span>
-                          <span class="fd-ai-loading-dots">
-                            <span class="fd-ai-loading-dot"></span>
-                            <span class="fd-ai-loading-dot"></span>
-                            <span class="fd-ai-loading-dot"></span>
+                        <div class="fd-ai-loader">
+                          <span class="fd-ai-loader-shimmer-text">Thinking</span>
+                          <span class="fd-ai-loader-typing-dots">
+                            <span class="fd-ai-loader-typing-dot"></span>
+                            <span class="fd-ai-loader-typing-dot"></span>
+                            <span class="fd-ai-loader-typing-dot"></span>
                           </span>
-                        </span>
+                        </div>
                       {/if}
                     </div>
                   {/if}

package/styles/docs.css

@@ -1237,6 +1237,29 @@ html.dark pre.shiki {
   font-size: 12px;
 }
 
+.fd-llms-txt-links {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.fd-llms-txt-link {
+  color: var(--color-fd-muted-foreground);
+  font-size: 0.75rem;
+  font-family: var(--fd-font-mono, ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace);
+  text-decoration: none;
+  padding: 0.125rem 0.375rem;
+  border-radius: 0.25rem;
+  border: 1px solid var(--color-fd-border, hsl(0 0% 80% / 50%));
+  transition: color 150ms, border-color 150ms;
+}
+
+.fd-llms-txt-link:hover {
+  color: var(--color-fd-foreground);
+  border-color: var(--color-fd-foreground);
+  text-decoration: none;
+}
+
 /* ─── Previous / Next Navigation ────────────────────────────────────── */
 
 .fd-page-nav {
@@ -1306,19 +1329,6 @@ html.dark pre.shiki {
  * AI Chat & Search Dialog — base styles (fd-ai-*)
  * ═══════════════════════════════════════════════════════════════════════ */
 
-@keyframes fd-ai-dot {
-  0%,
-  80%,
-  100% {
-    transform: scale(0);
-    opacity: 0.5;
-  }
-  40% {
-    transform: scale(1);
-    opacity: 1;
-  }
-}
-
 @keyframes fd-ai-fade-in {
   from {
     opacity: 0;
@@ -1670,6 +1680,12 @@ html.dark pre.shiki {
   line-height: 1.6;
   max-width: 95%;
   word-break: break-word;
+  animation: fd-ai-msg-in 300ms ease-out;
+}
+
+@keyframes fd-ai-msg-in {
+  from { opacity: 0; transform: translateY(6px); }
+  to { opacity: 1; transform: translateY(0); }
 }
 
 .fd-ai-chat-footer {
@@ -1722,36 +1738,70 @@ html.dark pre.shiki {
   color: var(--color-fd-primary-foreground);
 }
 
-.fd-ai-loading {
+.fd-ai-loader {
   display: inline-flex;
-  gap: 6px;
   align-items: center;
+  gap: 6px;
+  animation: fd-ai-loader-in 300ms ease-out;
 }
 
-.fd-ai-loading-text {
-  font-size: 12px;
-  color: var(--color-fd-muted-foreground);
+@keyframes fd-ai-loader-in {
+  from { opacity: 0; transform: translateY(4px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.fd-ai-loader-shimmer-text {
+  font-size: 13px;
+  font-weight: 500;
+  background: linear-gradient(to right, var(--color-fd-muted-foreground, #888) 40%, var(--color-fd-foreground, #fff) 60%, var(--color-fd-muted-foreground, #888) 80%);
+  background-size: 200% auto;
+  background-clip: text;
+  -webkit-background-clip: text;
+  color: transparent;
+  animation: fd-ai-shimmer-text 3s linear infinite;
 }
 
-.fd-ai-loading-dots {
+@keyframes fd-ai-shimmer-text {
+  0% { background-position: 150% center; }
+  100% { background-position: -150% center; }
+}
+
+.fd-ai-loader-typing-dots {
   display: inline-flex;
-  gap: 3px;
   align-items: center;
+  gap: 2px;
 }
 
-.fd-ai-loading-dot {
-  width: 5px;
-  height: 5px;
+.fd-ai-loader-typing-dot {
+  width: 4px;
+  height: 4px;
   border-radius: 50%;
-  background: var(--color-fd-muted-foreground);
-  animation: fd-ai-dot 1.4s infinite ease-in-out both;
+  background: var(--color-fd-primary, #6366f1);
+  animation: fd-ai-typing 1s infinite;
 }
 
-.fd-ai-loading-dot:nth-child(2) {
-  animation-delay: 0.16s;
+.fd-ai-loader-typing-dot:nth-child(2) { animation-delay: 250ms; }
+.fd-ai-loader-typing-dot:nth-child(3) { animation-delay: 500ms; }
+
+@keyframes fd-ai-typing {
+  0%, 100% { transform: translateY(0); opacity: 0.5; }
+  50% { transform: translateY(-2px); opacity: 1; }
+}
+
+.fd-ai-streaming::after {
+  content: "";
+  display: inline-block;
+  width: 2px;
+  height: 1em;
+  background: var(--color-fd-primary, #6366f1);
+  margin-left: 2px;
+  vertical-align: text-bottom;
+  animation: fd-ai-cursor-blink 0.8s step-end infinite;
 }
-.fd-ai-loading-dot:nth-child(3) {
-  animation-delay: 0.32s;
+
+@keyframes fd-ai-cursor-blink {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0; }
 }
 
 /* ─── Markdown in AI responses ───────────────────────────────── */
@@ -2138,41 +2188,7 @@ html.dark pre.shiki {
   font-size: 12px;
 }
 
-/* ─── Thinking dots ──────────────────────────────────────────── */
-
-.fd-ai-fm-thinking {
-  display: flex;
-  gap: 4px;
-  align-items: center;
-}
-
-.fd-ai-fm-thinking-dot {
-  width: 6px;
-  height: 6px;
-  border-radius: 9999px;
-  background: var(--color-fd-primary, #6366f1);
-  animation: fd-ai-fm-bounce 1s infinite ease-in-out;
-}
-
-.fd-ai-fm-thinking-dot:nth-child(2) {
-  animation-delay: 150ms;
-}
-.fd-ai-fm-thinking-dot:nth-child(3) {
-  animation-delay: 300ms;
-}
-
-@keyframes fd-ai-fm-bounce {
-  0%,
-  80%,
-  100% {
-    transform: scale(0.6);
-    opacity: 0.4;
-  }
-  40% {
-    transform: scale(1);
-    opacity: 1;
-  }
-}
+/* Full-modal now uses the shared .fd-ai-loader indicator */
 
 /* ─── Bottom input bar ───────────────────────────────────────── */
 

package/styles/pixel-border.css

@@ -477,13 +477,13 @@
   letter-spacing: 0.06em;
 }
 
-.fd-ai-loading-text {
+.fd-ai-loader-shimmer-text {
   text-transform: uppercase;
   letter-spacing: 0.04em;
   font-size: 11px;
 }
 
-.fd-ai-loading-dot {
+.fd-ai-loader-typing-dot {
   border-radius: 0;
   width: 4px;
   height: 4px;
@@ -561,11 +561,7 @@
   font-size: 11px;
 }
 
-.fd-ai-fm-thinking-dot {
-  border-radius: 0;
-  width: 5px;
-  height: 5px;
-}
+/* Full-modal now uses .fd-ai-loader-typing-dot (see above) */
 
 /* ─── Code blocks in AI chat (pixel-border) ──────────────────────── */