@farming-labs/svelte 0.1.124 → 0.1.126

package/dist/markdown.js

@@ -348,20 +348,60 @@ function highlightCode(hl, code, lang) {
     }
 }
 function parseMeta(meta) {
-    const lang = (meta.split(/\s/)[0] || "text").toLowerCase();
-    const titleMatch = meta.match(/title=["']([^"']+)["']/);
+    const trimmed = meta.trim();
+    const lang = (trimmed.split(/\s/)[0] || "text").toLowerCase();
+    const titleMatch = trimmed.match(/\b(?:title|filename|file|name|label)=["']([^"']+)["']/);
     return { lang, title: titleMatch ? titleMatch[1] : null };
 }
+const ignoredCodeGroupBareTitleTokens = new Set([
+    "copy",
+    "no-copy",
+    "nocopy",
+    "line-numbers",
+    "linenumbers",
+    "runnable",
+    "show-line-numbers",
+    "showlinenumbers",
+    "wrap",
+]);
+function parseCodeGroupMeta(meta) {
+    const parsed = parseMeta(meta);
+    if (parsed.title)
+        return parsed;
+    const trimmed = meta.trim();
+    const language = trimmed.split(/\s+/, 1)[0] ?? "";
+    const bareTitle = trimmed
+        .slice(language.length)
+        .trim()
+        .replace(/\{[^}]*\}/g, " ")
+        .split(/\s+/)
+        .find((part) => part && !part.includes("=") && !ignoredCodeGroupBareTitleTokens.has(part.toLowerCase()));
+    return {
+        ...parsed,
+        title: bareTitle ? bareTitle.replace(/^["']|["']$/g, "") : null,
+    };
+}
+function createCodeGroupTabValue(label, used) {
+    const slug = slugify(label) || `code-${used.size + 1}`;
+    let value = slug;
+    let suffix = 2;
+    while (used.has(value)) {
+        value = `${slug}-${suffix}`;
+        suffix += 1;
+    }
+    used.add(value);
+    return value;
+}
 function wrapCodeWithCopy(html, rawCode, title, language) {
     const escapedRaw = rawCode
         .replace(/&/g, "&")
         .replace(/"/g, """)
         .replace(/</g, "&lt;")
         .replace(/>/g, "&gt;");
-    const dataLang = language ? ` data-language="${String(language).replace(/"/g, "&quot;")}"` : "";
+    const dataLang = language ? ` data-language="${escapeHtml(String(language))}"` : "";
     const copyBtn = `<button class="fd-copy-btn" data-code="${escapedRaw}" title="Copy code"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/></svg></button>`;
     if (title) {
-        return `<div class="fd-codeblock fd-codeblock--titled"${dataLang}><div class="fd-codeblock-title"><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 class="fd-codeblock-title-text">${title}</span>${copyBtn}</div><div class="fd-codeblock-content">${html}</div></div>`;
+        return `<div class="fd-codeblock fd-codeblock--titled"${dataLang}><div class="fd-codeblock-title"><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 class="fd-codeblock-title-text">${escapeHtml(title)}</span>${copyBtn}</div><div class="fd-codeblock-content">${html}</div></div>`;
     }
     return `<div class="fd-codeblock"${dataLang}>${copyBtn}<div class="fd-codeblock-content">${html}</div></div>`;
 }
@@ -389,8 +429,44 @@ export async function renderMarkdown(content, options = {}) {
         return "";
     const hl = await getHighlighter();
     let result = resolveDocsAgentMdxContent(content, "human");
-    // ── Tabs blocks: <Tabs items={[...]}> ... </Tabs> ──
+    // ── Mintlify-style code groups: <CodeGroup> fenced code blocks </CodeGroup> ──
     const tabsBlocks = [];
+    result = result.replace(/<CodeGroup(?:\s+([^>]*?))?>([\s\S]*?)<\/CodeGroup>/g, (_, attrSource, body) => {
+        const attrs = parseJsxAttributes(attrSource ?? "");
+        const dropdown = toBoolean(attrs.dropdown, false);
+        const usedValues = new Set();
+        const panels = [];
+        const codeRegex = /```([^\n]*)\n([\s\S]*?)```/g;
+        let codeMatch;
+        while ((codeMatch = codeRegex.exec(body)) !== null) {
+            const { lang, title } = parseCodeGroupMeta(codeMatch[1]);
+            const label = title || lang || `Code ${panels.length + 1}`;
+            const value = createCodeGroupTabValue(label, usedValues);
+            const dedented = dedentCode(codeMatch[2]);
+            const { html, raw } = highlightCode(hl, dedented, lang);
+            panels.push({
+                label,
+                value,
+                html: wrapCodeWithCopy(html, raw, null, lang),
+            });
+        }
+        if (panels.length === 0)
+            return body;
+        let tabsHtml = `<div class="fd-tabs" data-tabs data-code-group${dropdown ? ' data-dropdown="true"' : ""}>`;
+        tabsHtml += `<div class="fd-tabs-list" role="tablist">`;
+        for (let i = 0; i < panels.length; i++) {
+            tabsHtml += `<button role="tab" class="fd-tab-trigger${i === 0 ? " fd-tab-active" : ""}" data-tab-value="${escapeHtml(panels[i].value)}" aria-selected="${i === 0}">${escapeHtml(panels[i].label)}</button>`;
+        }
+        tabsHtml += `</div>`;
+        for (let i = 0; i < panels.length; i++) {
+            tabsHtml += `<div class="fd-tab-panel${i === 0 ? " fd-tab-panel-active" : ""}" data-tab-panel="${escapeHtml(panels[i].value)}" role="tabpanel">${panels[i].html}</div>`;
+        }
+        tabsHtml += `</div>`;
+        const placeholder = `%%TABS_${tabsBlocks.length}%%`;
+        tabsBlocks.push(tabsHtml);
+        return placeholder;
+    });
+    // ── Tabs blocks: <Tabs items={[...]}> ... </Tabs> ──
     result = result.replace(/<Tabs\s+items=\{?\[([^\]]+)\]\}?>([\s\S]*?)<\/Tabs>/g, (_, itemsStr, body) => {
         const items = itemsStr.split(",").map((s) => s.trim().replace(/^["']|["']$/g, ""));
         const panels = [];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@farming-labs/svelte",
-  "version": "0.1.124",
+  "version": "0.1.126",
   "description": "SvelteKit adapter for @farming-labs/docs — content loading and navigation utilities",
   "keywords": [
     "docs",
@@ -56,7 +56,7 @@
   "devDependencies": {
     "@types/node": "^22.10.0",
     "typescript": "^5.9.3",
-    "@farming-labs/docs": "0.1.124"
+    "@farming-labs/docs": "0.1.126"
   },
   "peerDependencies": {
     "@farming-labs/docs": "*"