@farming-labs/svelte-theme 0.0.1

package/src/components/ThemeToggle.svelte

@@ -0,0 +1,40 @@
+<script>
+  /**
+   * ThemeToggle — Light/dark mode switch.
+   * Uses a cookie-based approach that works with SSR.
+   */
+  import { onMount } from "svelte";
+
+  let theme = $state("light");
+
+  onMount(() => {
+    theme = document.documentElement.classList.contains("dark") ? "dark" : "light";
+  });
+
+  function toggle() {
+    theme = theme === "dark" ? "light" : "dark";
+    document.documentElement.classList.remove("light", "dark");
+    document.documentElement.classList.add(theme);
+    document.cookie = `theme=${theme};path=/;max-age=31536000`;
+  }
+</script>
+
+<button class="fd-theme-toggle" onclick={toggle} aria-label="Toggle theme">
+  {#if theme === "dark"}
+    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+      <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>
+  {:else}
+    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+      <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
+    </svg>
+  {/if}
+</button>

package/src/index.d.ts

@@ -0,0 +1,23 @@
+export { default as DocsLayout } from "./components/DocsLayout.svelte";
+export { default as DocsContent } from "./components/DocsContent.svelte";
+export { default as DocsSidebar } from "./components/DocsSidebar.svelte";
+export { default as DocsPage } from "./components/DocsPage.svelte";
+export { default as TableOfContents } from "./components/TableOfContents.svelte";
+export { default as Breadcrumb } from "./components/Breadcrumb.svelte";
+export { default as ThemeToggle } from "./components/ThemeToggle.svelte";
+export { default as SearchDialog } from "./components/SearchDialog.svelte";
+export { default as AskAIDialog } from "./components/AskAIDialog.svelte";
+export { default as FloatingAIChat } from "./components/FloatingAIChat.svelte";
+export { default as MobileNav } from "./components/MobileNav.svelte";
+export { default as Callout } from "./components/Callout.svelte";
+
+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,23 @@
+/**
+ * @farming-labs/svelte-theme
+ *
+ * Svelte UI components and theme presets for documentation sites.
+ * Port of @farming-labs/theme for SvelteKit.
+ */
+
+export { default as DocsLayout } from "./components/DocsLayout.svelte";
+export { default as DocsContent } from "./components/DocsContent.svelte";
+export { default as DocsSidebar } from "./components/DocsSidebar.svelte";
+export { default as DocsPage } from "./components/DocsPage.svelte";
+export { default as TableOfContents } from "./components/TableOfContents.svelte";
+export { default as Breadcrumb } from "./components/Breadcrumb.svelte";
+export { default as ThemeToggle } from "./components/ThemeToggle.svelte";
+export { default as SearchDialog } from "./components/SearchDialog.svelte";
+export { default as AskAIDialog } from "./components/AskAIDialog.svelte";
+export { default as FloatingAIChat } from "./components/FloatingAIChat.svelte";
+export { default as MobileNav } from "./components/MobileNav.svelte";
+export { default as Callout } from "./components/Callout.svelte";
+
+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.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.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.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 };