@farming-labs/astro-theme 0.0.2-beta.15

package/src/components/SearchDialog.astro

@@ -0,0 +1,315 @@
+---
+const { config = null } = Astro.props;
+const aiMode = config?.ai?.mode ?? "search";
+const aiInSearch = config?.ai?.enabled && aiMode !== "floating";
+const aiLabel = config?.ai?.aiLabel ?? "AI";
+const suggestedQuestions = config?.ai?.suggestedQuestions ?? [];
+---
+
+<div id="fd-search-config" data-ai-label={aiLabel} style="display:none"></div>
+<div class="fd-ai-overlay" id="fd-search-dialog" style="display:none">
+  <div class="fd-ai-dialog" style="left:50%;top:12%;transform:translateX(-50%);width:min(640px,calc(100vw - 32px));max-height:min(520px,calc(100vh - 120px));animation:fd-ai-slide-up 200ms ease-out">
+    <div class="fd-ai-tab-bar">
+      <button class="fd-ai-tab" data-tab="search" data-active="true">
+        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <circle cx="11" cy="11" r="8" /><path d="m21 21-4.3-4.3" />
+        </svg>
+        Search
+      </button>
+      {aiInSearch && (
+        <button class="fd-ai-tab" data-tab="ai">
+          <svg width="15" height="15" 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" />
+          </svg>
+          Ask {aiLabel}
+        </button>
+      )}
+      <span style="margin-left:auto;display:flex;align-items:center;padding-right:12px">
+        <kbd class="fd-ai-esc">ESC</kbd>
+      </span>
+    </div>
+
+    <div id="fd-search-panel" style="display:flex;flex-direction:column;flex:1;min-height:0">
+      <div class="fd-ai-search-wrap">
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <circle cx="11" cy="11" r="8" /><path d="m21 21-4.3-4.3" />
+        </svg>
+        <input id="fd-search-input" class="fd-ai-input" placeholder="Search documentation..." type="text" />
+      </div>
+      <div class="fd-ai-results" id="fd-search-results">
+        <div class="fd-ai-result-empty">Type to search the docs</div>
+      </div>
+    </div>
+
+    {aiInSearch && (
+      <div id="fd-ai-panel" style="display:none;flex-direction:column;flex:1;min-height:0">
+        <div class="fd-ai-messages" id="fd-ai-messages">
+          <div class="fd-ai-empty">
+            <svg width="20" height="20" 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>
+            <div class="fd-ai-empty-title">Ask anything about the docs</div>
+            <div class="fd-ai-empty-desc">{aiLabel} will search through the documentation and answer your question.</div>
+          </div>
+        </div>
+        <div class="fd-ai-chat-footer">
+          <div class="fd-ai-input-wrap">
+            <input id="fd-ai-input" class="fd-ai-input" placeholder="Ask a question..." type="text" />
+            <button id="fd-ai-send" class="fd-ai-send-btn" aria-label="Send">
+              <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="m5 12 7-7 7 7" /><path d="M12 19V5" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    )}
+  </div>
+</div>
+
+<script>
+  import { highlight } from 'sugar-high';
+
+  function escapeHtml(s: string): string {
+    return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+  }
+
+  function buildCodeBlock(lang: string, code: string): string {
+    const trimmed = code.replace(/\n$/, '');
+    const highlighted = highlight(trimmed).replace(/<\/span>\n<span/g, '</span><span');
+    const langLabel = lang ? `<div class="fd-ai-code-lang">${escapeHtml(lang)}</div>` : '';
+    const copyBtn = `<button class="fd-ai-code-copy" onclick="(function(btn){var code=btn.closest('.fd-ai-code-block').querySelector('code').textContent;navigator.clipboard.writeText(code).then(function(){btn.textContent='Copied!';setTimeout(function(){btn.textContent='Copy'},1500)})})(this)">Copy</button>`;
+    return `<div class="fd-ai-code-block"><div class="fd-ai-code-header">${langLabel}${copyBtn}</div><pre><code>${highlighted}</code></pre></div>`;
+  }
+
+  function isTableRow(line: string): boolean {
+    const t = line.trim();
+    return t.startsWith('|') && t.endsWith('|') && t.includes('|');
+  }
+
+  function isTableSeparator(line: string): boolean {
+    return /^\|[\s:]*-+[\s:]*(\|[\s:]*-+[\s:]*)*\|$/.test(line.trim());
+  }
+
+  function renderTable(rows: string[]): string {
+    const parseRow = (row: string) =>
+      row.trim().replace(/^\|/, '').replace(/\|$/, '').split('|').map(c => c.trim());
+    const headerCells = parseRow(rows[0]);
+    const thead = `<thead><tr>${headerCells.map(c => `<th>${c}</th>`).join('')}</tr></thead>`;
+    const bodyRows = rows.slice(1).map(row => {
+      const cells = parseRow(row);
+      return `<tr>${cells.map(c => `<td>${c}</td>`).join('')}</tr>`;
+    }).join('');
+    return `<table>${thead}<tbody>${bodyRows}</tbody></table>`;
+  }
+
+  function renderMarkdown(text: string): string {
+    if (!text) return '';
+    const codeBlocks: string[] = [];
+    let processed = text.replace(/```(\w*)\n([\s\S]*?)```/g, (_m, lang, code) => {
+      codeBlocks.push(buildCodeBlock(lang, code));
+      return `\x00CB${codeBlocks.length - 1}\x00`;
+    });
+    processed = processed.replace(/```(\w*)\n([\s\S]*)$/, (_m, lang, code) => {
+      codeBlocks.push(buildCodeBlock(lang, code));
+      return `\x00CB${codeBlocks.length - 1}\x00`;
+    });
+    const lines = processed.split('\n');
+    const output: string[] = [];
+    let i = 0;
+    while (i < lines.length) {
+      if (isTableRow(lines[i]) && i + 1 < lines.length && isTableSeparator(lines[i + 1])) {
+        const tableLines = [lines[i]];
+        i += 2;
+        while (i < lines.length && isTableRow(lines[i])) { tableLines.push(lines[i]); i++; }
+        output.push(renderTable(tableLines));
+        continue;
+      }
+      output.push(lines[i]);
+      i++;
+    }
+    let result = output.join('\n');
+    result = result
+      .replace(/`([^`]+)`/g, '<code>$1</code>')
+      .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
+      .replace(/(?<!\*)\*([^*]+)\*(?!\*)/g, '<em>$1</em>')
+      .replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2">$1</a>')
+      .replace(/^### (.*$)/gm, '<h4>$1</h4>')
+      .replace(/^## (.*$)/gm, '<h3>$1</h3>')
+      .replace(/^# (.*$)/gm, '<h2>$1</h2>')
+      .replace(/^[-*] (.*$)/gm, '<div style="display:flex;gap:8px;padding:2px 0"><span style="opacity:0.5">\u2022</span><span>$1</span></div>')
+      .replace(/^(\d+)\. (.*$)/gm, '<div style="display:flex;gap:8px;padding:2px 0"><span style="opacity:0.5">$1.</span><span>$2</span></div>')
+      .replace(/\n\n/g, '<div style="height:8px"></div>')
+      .replace(/\n/g, '<br>');
+    result = result.replace(/\x00CB(\d+)\x00/g, (_m, idx) => codeBlocks[Number(idx)]);
+    return result;
+  }
+
+  function initSearchDialog() {
+    const cfgEl = document.getElementById('fd-search-config');
+    const aiLabel = cfgEl?.dataset.aiLabel || 'AI';
+    const dialog = document.getElementById('fd-search-dialog');
+    const searchInput = document.getElementById('fd-search-input');
+    const searchResults = document.getElementById('fd-search-results');
+    const tabs = dialog?.querySelectorAll('.fd-ai-tab');
+    const searchPanel = document.getElementById('fd-search-panel');
+    const aiPanel = document.getElementById('fd-ai-panel');
+    let debounceTimer: ReturnType<typeof setTimeout>;
+
+    dialog?.addEventListener('click', (e) => {
+      if (e.target === dialog) dialog.style.display = 'none';
+    });
+
+    dialog?.querySelector('.fd-ai-dialog')?.addEventListener('click', (e) => {
+      e.stopPropagation();
+    });
+
+    tabs?.forEach(tab => {
+      tab.addEventListener('click', () => {
+        const target = tab.getAttribute('data-tab');
+        tabs.forEach(t => t.removeAttribute('data-active'));
+        tab.setAttribute('data-active', 'true');
+        if (searchPanel) searchPanel.style.display = target === 'search' ? 'flex' : 'none';
+        if (aiPanel) aiPanel.style.display = target === 'ai' ? 'flex' : 'none';
+        if (target === 'search') searchInput?.focus();
+        else document.getElementById('fd-ai-input')?.focus();
+      });
+    });
+
+    searchInput?.addEventListener('input', () => {
+      clearTimeout(debounceTimer);
+      const query = (searchInput as HTMLInputElement).value.trim();
+      if (!query) {
+        if (searchResults) searchResults.innerHTML = '<div class="fd-ai-result-empty">Type to search the docs</div>';
+        return;
+      }
+      debounceTimer = setTimeout(async () => {
+        try {
+          const res = await fetch(`/api/docs?query=${encodeURIComponent(query)}`);
+          if (res.ok) {
+            const data = await res.json();
+            if (data.length === 0) {
+              searchResults!.innerHTML = `<div class="fd-ai-result-empty">No results found</div>`;
+            } else {
+              searchResults!.innerHTML = data.map((r: any) => `
+                <a href="${r.url}" class="fd-ai-result" style="display:flex;align-items:center;gap:8px;text-decoration:none">
+                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                    <path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" /><path d="M14 2v4a2 2 0 0 0 2 2h4" />
+                  </svg>
+                  <span style="flex:1">${r.content}</span>
+                </a>
+              `).join('');
+              searchResults!.querySelectorAll('a').forEach(a => {
+                a.addEventListener('click', () => { dialog!.style.display = 'none'; });
+              });
+            }
+          }
+        } catch {}
+      }, 150);
+    });
+
+    // AI chat
+    const aiInput = document.getElementById('fd-ai-input') as HTMLInputElement | null;
+    const aiSend = document.getElementById('fd-ai-send');
+    const aiMessages = document.getElementById('fd-ai-messages');
+    let messages: Array<{ role: string; content: string }> = [];
+    let isStreaming = false;
+
+    let renderScheduled = false;
+    function scheduleRender() {
+      if (renderScheduled) return;
+      renderScheduled = true;
+      requestAnimationFrame(() => { renderScheduled = false; doRender(); });
+    }
+
+    async function submitAI(question: string) {
+      if (!question.trim() || isStreaming) return;
+      isStreaming = true;
+      messages.push({ role: 'user', content: question });
+      messages.push({ role: 'assistant', content: '' });
+      if (aiInput) aiInput.value = '';
+      doRender();
+
+      try {
+        const res = await fetch('/api/docs', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ messages: messages.filter(m => m.content).map(m => ({ role: m.role, content: m.content })) }),
+        });
+
+        if (!res.ok) {
+          let errMsg = 'Something went wrong.';
+          try { const err = await res.json(); errMsg = err.error || errMsg; } catch {}
+          messages[messages.length - 1].content = errMsg;
+          doRender();
+          isStreaming = false;
+          return;
+        }
+
+        const reader = res.body!.getReader();
+        const decoder = new TextDecoder();
+        let buffer = '';
+        let assistantContent = '';
+
+        while (true) {
+          const { done, value } = await reader.read();
+          if (done) break;
+          buffer += decoder.decode(value, { stream: true });
+          const lines = buffer.split('\n');
+          buffer = lines.pop() || '';
+          for (const line of lines) {
+            if (line.startsWith('data: ')) {
+              const data = line.slice(6).trim();
+              if (data === '[DONE]') continue;
+              try {
+                const json = JSON.parse(data);
+                const content = json.choices?.[0]?.delta?.content;
+                if (content) {
+                  assistantContent += content;
+                  messages[messages.length - 1].content = assistantContent;
+                  scheduleRender();
+                }
+              } catch {}
+            }
+          }
+        }
+      } catch {
+        messages[messages.length - 1].content = messages[messages.length - 1].content || 'Failed to connect.';
+        doRender();
+      }
+      isStreaming = false;
+      doRender();
+    }
+
+    function doRender() {
+      if (!aiMessages) return;
+      if (messages.length === 0) {
+        aiMessages.innerHTML = '<div class="fd-ai-empty"><div class="fd-ai-empty-title">Ask anything about the docs</div></div>';
+        return;
+      }
+      const THINKING = `<span class="fd-ai-loading"><span class="fd-ai-loading-text">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></span></span>`;
+      aiMessages.innerHTML = messages.map(m => {
+        const renderedContent = m.role === 'user'
+          ? escapeHtml(m.content)
+          : (m.content ? renderMarkdown(m.content) : THINKING);
+        return `<div class="fd-ai-msg" data-role="${m.role}"><div class="fd-ai-msg-label">${m.role === 'user' ? 'You' : aiLabel}</div><div class="${m.role === 'user' ? 'fd-ai-bubble-user' : 'fd-ai-bubble-ai'}">${renderedContent}</div></div>`;
+      }).join('');
+      aiMessages.scrollTop = aiMessages.scrollHeight;
+    }
+
+    aiSend?.addEventListener('click', () => {
+      if (aiInput?.value) submitAI(aiInput.value);
+    });
+
+    aiInput?.addEventListener('keydown', (e) => {
+      if (e.key === 'Enter' && !e.shiftKey) {
+        e.preventDefault();
+        if (aiInput.value) submitAI(aiInput.value);
+      }
+    });
+  }
+
+  initSearchDialog();
+  document.addEventListener('astro:after-swap', initSearchDialog);
+</script>

package/src/components/ThemeToggle.astro

@@ -0,0 +1,46 @@
+---
+---
+<button class="fd-theme-toggle" id="fd-theme-toggle" aria-label="Toggle theme">
+  <svg id="fd-theme-sun" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="display:none">
+    <circle cx="12" cy="12" r="5" />
+    <line x1="12" y1="1" x2="12" y2="3" />
+    <line x1="12" y1="21" x2="12" y2="23" />
+    <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
+    <line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
+    <line x1="1" y1="12" x2="3" y2="12" />
+    <line x1="21" y1="12" x2="23" y2="12" />
+    <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
+    <line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
+  </svg>
+  <svg id="fd-theme-moon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="display:none">
+    <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
+  </svg>
+</button>
+
+<script>
+  function initThemeToggle() {
+    const btn = document.getElementById('fd-theme-toggle');
+    const sun = document.getElementById('fd-theme-sun');
+    const moon = document.getElementById('fd-theme-moon');
+
+    function update() {
+      const isDark = document.documentElement.classList.contains('dark');
+      if (sun) sun.style.display = isDark ? 'block' : 'none';
+      if (moon) moon.style.display = isDark ? 'none' : 'block';
+    }
+
+    update();
+
+    btn?.addEventListener('click', () => {
+      const isDark = document.documentElement.classList.contains('dark');
+      const next = isDark ? 'light' : 'dark';
+      document.documentElement.classList.remove('light', 'dark');
+      document.documentElement.classList.add(next);
+      document.cookie = `theme=${next};path=/;max-age=31536000`;
+      update();
+    });
+  }
+
+  initThemeToggle();
+  document.addEventListener('astro:after-swap', initThemeToggle);
+</script>

package/src/index.d.ts

@@ -0,0 +1,10 @@
+import type { DocsTheme } from "@farming-labs/docs";
+
+export declare const fumadocs: (overrides?: Partial<DocsTheme>) => DocsTheme;
+export declare const DefaultUIDefaults: Record<string, any>;
+
+export declare const pixelBorder: (overrides?: Partial<DocsTheme>) => DocsTheme;
+export declare const PixelBorderUIDefaults: Record<string, any>;
+
+export declare const darksharp: (overrides?: Partial<DocsTheme>) => DocsTheme;
+export declare const DarksharpUIDefaults: Record<string, any>;

package/src/index.js

@@ -0,0 +1,10 @@
+/**
+ * @farming-labs/astro-theme
+ *
+ * Astro UI components and theme presets for documentation sites.
+ * Port of @farming-labs/theme for Astro.
+ */
+
+export { fumadocs, DefaultUIDefaults } from "./themes/default.js";
+export { pixelBorder, PixelBorderUIDefaults } from "./themes/pixel-border.js";
+export { darksharp, DarksharpUIDefaults } from "./themes/darksharp.js";

package/src/lib/renderMarkdown.js

@@ -0,0 +1,110 @@
+/**
+ * Markdown renderer for AI chat — exact port of the Next.js fumadocs version.
+ *
+ * Uses sugar-high for syntax highlighting in code blocks.
+ * Supports: fenced code blocks, tables, inline code, bold, italic,
+ * links, headings, bullet lists, numbered lists.
+ */
+import { highlight } from "sugar-high";
+
+function escapeHtml(s) {
+  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+
+function buildCodeBlock(lang, code) {
+  const trimmed = code.replace(/\n$/, "");
+  const highlighted = highlight(trimmed).replace(/<\/span>\n<span/g, "</span><span");
+  const langLabel = lang ? `<div class="fd-ai-code-lang">${escapeHtml(lang)}</div>` : "";
+  const copyBtn = `<button class="fd-ai-code-copy" onclick="(function(btn){var code=btn.closest('.fd-ai-code-block').querySelector('code').textContent;navigator.clipboard.writeText(code).then(function(){btn.textContent='Copied!';setTimeout(function(){btn.textContent='Copy'},1500)})})(this)">Copy</button>`;
+  return `<div class="fd-ai-code-block">`
+    + `<div class="fd-ai-code-header">${langLabel}${copyBtn}</div>`
+    + `<pre><code>${highlighted}</code></pre>`
+    + `</div>`;
+}
+
+function isTableRow(line) {
+  const trimmed = line.trim();
+  return trimmed.startsWith("|") && trimmed.endsWith("|") && trimmed.includes("|");
+}
+
+function isTableSeparator(line) {
+  return /^\|[\s:]*-+[\s:]*(\|[\s:]*-+[\s:]*)*\|$/.test(line.trim());
+}
+
+function renderTable(rows) {
+  const parseRow = (row) =>
+    row.trim().replace(/^\|/, "").replace(/\|$/, "").split("|").map(c => c.trim());
+
+  const headerCells = parseRow(rows[0]);
+  const thead = `<thead><tr>${headerCells.map(c => `<th>${c}</th>`).join("")}</tr></thead>`;
+
+  const bodyRows = rows.slice(1).map(row => {
+    const cells = parseRow(row);
+    return `<tr>${cells.map(c => `<td>${c}</td>`).join("")}</tr>`;
+  }).join("");
+
+  return `<table>${thead}<tbody>${bodyRows}</tbody></table>`;
+}
+
+export function renderMarkdown(text) {
+  if (!text) return "";
+
+  const codeBlocks = [];
+
+  // Complete fences: ```lang\n...\n```
+  let processed = text.replace(/```(\w*)\n([\s\S]*?)```/g, (_match, lang, code) => {
+    codeBlocks.push(buildCodeBlock(lang, code));
+    return `\x00CB${codeBlocks.length - 1}\x00`;
+  });
+
+  // Incomplete fence (streaming): opening ``` with no closing one
+  processed = processed.replace(/```(\w*)\n([\s\S]*)$/, (_match, lang, code) => {
+    codeBlocks.push(buildCodeBlock(lang, code));
+    return `\x00CB${codeBlocks.length - 1}\x00`;
+  });
+
+  const lines = processed.split("\n");
+  const output = [];
+  let i = 0;
+
+  while (i < lines.length) {
+    if (isTableRow(lines[i]) && i + 1 < lines.length && isTableSeparator(lines[i + 1])) {
+      const tableLines = [lines[i]];
+      i++; // separator
+      i++; // move past separator
+      while (i < lines.length && isTableRow(lines[i])) {
+        tableLines.push(lines[i]);
+        i++;
+      }
+      output.push(renderTable(tableLines));
+      continue;
+    }
+    output.push(lines[i]);
+    i++;
+  }
+
+  let result = output.join("\n");
+
+  result = result
+    .replace(/`([^`]+)`/g, "<code>$1</code>")
+    .replace(/\*\*(.*?)\*\*/g, "<strong>$1</strong>")
+    .replace(/(?<!\*)\*([^*]+)\*(?!\*)/g, "<em>$1</em>")
+    .replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2">$1</a>')
+    .replace(/^### (.*$)/gm, "<h4>$1</h4>")
+    .replace(/^## (.*$)/gm, "<h3>$1</h3>")
+    .replace(/^# (.*$)/gm, "<h2>$1</h2>")
+    .replace(
+      /^[-*] (.*$)/gm,
+      '<div style="display:flex;gap:8px;padding:2px 0"><span style="opacity:0.5">\u2022</span><span>$1</span></div>',
+    )
+    .replace(
+      /^(\d+)\. (.*$)/gm,
+      '<div style="display:flex;gap:8px;padding:2px 0"><span style="opacity:0.5">$1.</span><span>$2</span></div>',
+    )
+    .replace(/\n\n/g, '<div style="height:8px"></div>')
+    .replace(/\n/g, "<br>");
+
+  result = result.replace(/\x00CB(\d+)\x00/g, (_m, idx) => codeBlocks[Number(idx)]);
+
+  return result;
+}

package/src/themes/darksharp.d.ts

@@ -0,0 +1,4 @@
+import type { DocsTheme } from "@farming-labs/docs";
+
+export declare const darksharp: (overrides?: Partial<DocsTheme>) => DocsTheme;
+export declare const DarksharpUIDefaults: Record<string, any>;

package/src/themes/darksharp.js

@@ -0,0 +1,42 @@
+import { createTheme } from "@farming-labs/docs";
+
+const DarksharpUIDefaults = {
+  colors: {
+    primary: "#fafaf9",
+    background: "#000000",
+    muted: "#a8a29e",
+    border: "#292524",
+  },
+  typography: {
+    font: {
+      style: {
+        sans: "Geist, system-ui, sans-serif",
+        mono: "Geist Mono, monospace",
+      },
+      h1: { size: "2rem", 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: 280,
+    toc: { enabled: true, depth: 3 },
+    header: { height: 56, sticky: true },
+  },
+  components: {
+    Callout: { variant: "soft", icon: true },
+    CodeBlock: { showCopyButton: true },
+    Tabs: { style: "default" },
+  },
+};
+
+export const darksharp = createTheme({
+  name: "fumadocs-darksharp",
+  ui: DarksharpUIDefaults,
+});
+
+export { DarksharpUIDefaults };

package/src/themes/default.d.ts

@@ -0,0 +1,4 @@
+import type { DocsTheme } from "@farming-labs/docs";
+
+export declare const fumadocs: (overrides?: Partial<DocsTheme>) => DocsTheme;
+export declare const DefaultUIDefaults: Record<string, any>;

package/src/themes/default.js

@@ -0,0 +1,42 @@
+import { createTheme } from "@farming-labs/docs";
+
+const DefaultUIDefaults = {
+  colors: {
+    primary: "#6366f1",
+    background: "#ffffff",
+    muted: "#64748b",
+    border: "#e5e7eb",
+  },
+  typography: {
+    font: {
+      style: {
+        sans: "Inter, system-ui, sans-serif",
+        mono: "JetBrains Mono, monospace",
+      },
+      h1: { size: "2rem", 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: 280,
+    toc: { enabled: true, depth: 3 },
+    header: { height: 72, sticky: true },
+  },
+  components: {
+    Callout: { variant: "soft", icon: true },
+    CodeBlock: { showCopyButton: true },
+    Tabs: { style: "default" },
+  },
+};
+
+export const fumadocs = createTheme({
+  name: "fumadocs-default",
+  ui: DefaultUIDefaults,
+});
+
+export { DefaultUIDefaults };

package/src/themes/pixel-border.d.ts

@@ -0,0 +1,4 @@
+import type { DocsTheme } from "@farming-labs/docs";
+
+export declare const pixelBorder: (overrides?: Partial<DocsTheme>) => DocsTheme;
+export declare const PixelBorderUIDefaults: Record<string, any>;

package/src/themes/pixel-border.js

@@ -0,0 +1,38 @@
+import { createTheme } from "@farming-labs/docs";
+
+const PixelBorderUIDefaults = {
+  colors: {
+    primary: "oklch(0.985 0.001 106.423)",
+    background: "hsl(0 0% 2%)",
+    muted: "hsl(0 0% 55%)",
+    border: "hsl(0 0% 15%)",
+  },
+  typography: {
+    font: {
+      style: {
+        sans: "system-ui, -apple-system, sans-serif",
+        mono: "ui-monospace, monospace",
+      },
+      h1: { size: "2.25rem", weight: 700, lineHeight: "1.2", letterSpacing: "-0.02em" },
+      h2: { size: "1.5rem", weight: 600, lineHeight: "1.3", letterSpacing: "-0.01em" },
+      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: 860,
+    sidebarWidth: 286,
+    toc: { enabled: true, depth: 3 },
+    header: { height: 56, sticky: true },
+  },
+  components: {},
+};
+
+export const pixelBorder = createTheme({
+  name: "fumadocs-pixel-border",
+  ui: PixelBorderUIDefaults,
+});
+
+export { PixelBorderUIDefaults };

package/styles/darksharp-bundle.css

@@ -0,0 +1,6 @@
+/* @farming-labs/astro-theme — darksharp theme (bundled)
+ * Single import: includes base docs.css + darksharp overrides.
+ * Usage: @import "@farming-labs/astro-theme/darksharp/css";
+ */
+@import "./docs.css";
+@import "./darksharp.css";