@farming-labs/svelte-theme 0.0.7 → 0.0.9-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@farming-labs/svelte-theme",
-  "version": "0.0.7",
+  "version": "0.0.9-beta.1",
   "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.7",
-    "@farming-labs/svelte": "0.0.7"
+    "@farming-labs/svelte": "0.0.9-beta.1",
+    "@farming-labs/docs": "0.0.9-beta.1"
   },
   "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;
     }
@@ -224,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}
@@ -248,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">
@@ -390,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"}
@@ -400,6 +407,6 @@
   />
 {/if}
 
-{#if searchOpen}
+{#if showSearch && searchOpen}
   <SearchDialog onclose={closeSearch} />
 {/if}

package/styles/colorful.css

@@ -102,6 +102,114 @@
   caret-color: var(--color-fd-primary);
 }
 
+/* ─── Sidebar AI trigger (sidebar-icon mode) — search + Ask AI row ───── */
+
+.fd-sidebar-search-ai-row {
+  display: flex;
+  gap: 10px;
+  align-items: stretch;
+  width: 100%;
+  margin-bottom: 2px;
+}
+
+.fd-sidebar-search-ai-row .fd-sidebar-search-btn {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  font-size: 0.875rem;
+  color: var(--color-fd-muted-foreground);
+  background: transparent;
+  border: 1px solid var(--color-fd-border);
+  border-radius: 8px;
+  cursor: pointer;
+  transition: background-color 150ms, border-color 150ms, color 150ms;
+}
+
+.fd-sidebar-search-ai-row .fd-sidebar-search-btn:hover {
+  background: var(--color-fd-accent);
+  color: var(--color-fd-foreground);
+}
+
+.fd-sidebar-search-ai-row .fd-sidebar-search-btn svg {
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+}
+
+.fd-sidebar-search-ai-row .fd-sidebar-search-kbd {
+  display: flex;
+  gap: 2px;
+  margin-left: auto;
+  font-size: 0.75rem;
+  opacity: 0.8;
+}
+
+.fd-sidebar-search-ai-row .fd-sidebar-search-kbd kbd {
+  font-family: inherit;
+  font-size: 0.7rem;
+  padding: 2px 5px;
+  border: 1px solid var(--color-fd-border);
+  border-radius: 4px;
+  background: var(--color-fd-muted);
+}
+
+.fd-sidebar-search-ai-row .fd-sidebar-ai-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 38px;
+  min-width: 38px;
+  flex-shrink: 0;
+  border-radius: 8px;
+  border: 1px solid var(--color-fd-border);
+  background: transparent;
+  color: var(--color-fd-muted-foreground);
+  cursor: pointer;
+  transition: background-color 150ms, color 150ms, border-color 150ms;
+}
+
+.fd-sidebar-search-ai-row .fd-sidebar-ai-btn:hover {
+  background: var(--color-fd-accent);
+  color: var(--color-fd-primary);
+  border-color: var(--color-fd-primary);
+}
+
+.fd-sidebar-search-ai-row .fd-sidebar-ai-btn svg {
+  width: 16px;
+  height: 16px;
+}
+
+.dark .fd-sidebar .fd-sidebar-search-ai-row .fd-sidebar-search-btn {
+  background: var(--color-fd-secondary);
+  border-color: var(--color-fd-border);
+  color: var(--color-fd-muted-foreground);
+}
+
+.dark .fd-sidebar .fd-sidebar-search-ai-row .fd-sidebar-search-btn:hover {
+  background: var(--color-fd-accent);
+  color: var(--color-fd-foreground);
+}
+
+.dark .fd-sidebar .fd-sidebar-search-ai-row .fd-sidebar-search-kbd kbd {
+  background: var(--color-fd-muted);
+  border-color: var(--color-fd-border);
+}
+
+.dark .fd-sidebar .fd-sidebar-search-ai-row .fd-sidebar-ai-btn {
+  background: var(--color-fd-secondary);
+  border-color: var(--color-fd-border);
+  color: var(--color-fd-muted-foreground);
+}
+
+.dark .fd-sidebar .fd-sidebar-search-ai-row .fd-sidebar-ai-btn:hover {
+  background: var(--color-fd-accent);
+  color: var(--color-fd-primary);
+  border-color: var(--color-fd-primary);
+}
+
 /* ─── Page Actions — colorful theme ────────────────────────────────── */
 
 .fd-page-action-btn {

package/styles/docs.css

@@ -2262,7 +2262,6 @@ 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);
@@ -2283,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;