@farming-labs/svelte 0.2.45 → 0.2.47

package/dist/markdown.js

@@ -316,10 +316,41 @@ const calloutIcons = {
     important: '<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="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/></svg>',
     caution: '<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="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>',
 };
-function renderCallout(type, content) {
-    const icon = calloutIcons[type] || calloutIcons.note;
-    const label = type.charAt(0).toUpperCase() + type.slice(1);
-    return `<div class="fd-callout fd-callout-${type}" role="note"><div class="fd-callout-indicator" role="none"></div><div class="fd-callout-icon">${icon}</div><div class="fd-callout-content"><p class="fd-callout-title">${label}</p><p>${content}</p></div></div>`;
+const calloutTypeAliases = {
+    danger: "caution",
+    error: "caution",
+    info: "note",
+    success: "tip",
+    warn: "warning",
+};
+const calloutLabels = {
+    caution: "Caution",
+    important: "Important",
+    note: "Note",
+    tip: "Tip",
+    warning: "Warning",
+};
+function normalizeCalloutType(type) {
+    const normalized = type.trim().toLowerCase();
+    const aliased = calloutTypeAliases[normalized] ?? normalized;
+    return calloutIcons[aliased] ? aliased : "note";
+}
+function renderInlineCalloutContent(content) {
+    return content
+        .trim()
+        .replace(/`([^`]+)`/g, "<code>$1</code>")
+        .replace(/\*\*\*(.+?)\*\*\*/g, "<strong><em>$1</em></strong>")
+        .replace(/\*\*(.+?)\*\*/g, "<strong>$1</strong>")
+        .replace(/\*(.+?)\*/g, "<em>$1</em>")
+        .replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2">$1</a>')
+        .replace(/\n+/g, "<br />");
+}
+function renderCallout(type, content, title) {
+    const normalizedType = normalizeCalloutType(type);
+    const icon = calloutIcons[normalizedType] || calloutIcons.note;
+    const label = title?.trim() || calloutLabels[normalizedType] || "Note";
+    const renderedContent = renderInlineCalloutContent(content);
+    return `<div class="fd-callout fd-callout-${normalizedType}" role="note"><div class="fd-callout-indicator" role="none"></div><div class="fd-callout-icon">${icon}</div><div class="fd-callout-content"><p class="fd-callout-title">${escapeHtml(label)}</p><p>${renderedContent}</p></div></div>`;
 }
 function highlightCode(hl, code, lang) {
     if (lang === "sh" || lang === "shell")
@@ -347,12 +378,6 @@ function highlightCode(hl, code, lang) {
         };
     }
 }
-function parseMeta(meta) {
-    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",
@@ -364,6 +389,25 @@ const ignoredCodeGroupBareTitleTokens = new Set([
     "showlinenumbers",
     "wrap",
 ]);
+function parseMeta(meta) {
+    const trimmed = meta.trim();
+    const firstToken = trimmed.split(/\s+/, 1)[0] ?? "";
+    const hasLanguage = Boolean(firstToken && !firstToken.includes("=") && !firstToken.startsWith("{"));
+    const lang = hasLanguage ? firstToken.toLowerCase() : "text";
+    const titleMatch = trimmed.match(/\b(?:title|filename|file|name|label)=["']([^"']+)["']/);
+    if (titleMatch)
+        return { lang, title: titleMatch[1] };
+    const bareTitle = trimmed
+        .slice(hasLanguage ? firstToken.length : 0)
+        .trim()
+        .replace(/\{[^}]*\}/g, " ")
+        .split(/\s+/)
+        .find((part) => part && !part.includes("=") && !ignoredCodeGroupBareTitleTokens.has(part.toLowerCase()));
+    return {
+        lang,
+        title: bareTitle ? bareTitle.replace(/^["']|["']$/g, "") : null,
+    };
+}
 function parseCodeGroupMeta(meta) {
     const parsed = parseMeta(meta);
     if (parsed.title)
@@ -392,6 +436,25 @@ function createCodeGroupTabValue(label, used) {
     used.add(value);
     return value;
 }
+const terminalCodeLanguages = new Set([
+    "bash",
+    "console",
+    "sh",
+    "shell",
+    "shellscript",
+    "terminal",
+]);
+const fileCodeBlockIcon = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><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>';
+const terminalCodeBlockIcon = '<svg width="14" height="14" viewBox="0 0 24 24" aria-hidden="true"><path d="m 4,4 a 1,1 0 0 0 -0.7070312,0.2929687 1,1 0 0 0 0,1.4140625 L 8.5859375,11 3.2929688,16.292969 a 1,1 0 0 0 0,1.414062 1,1 0 0 0 1.4140624,0 l 5.9999998,-6 a 1.0001,1.0001 0 0 0 0,-1.414062 L 4.7070312,4.2929687 A 1,1 0 0 0 4,4 Z m 8,14 a 1,1 0 0 0 -1,1 1,1 0 0 0 1,1 h 8 a 1,1 0 0 0 1,-1 1,1 0 0 0 -1,-1 z" fill="currentColor"/></svg>';
+const copyCodeBlockIcon = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect width="8" height="4" x="8" y="2" rx="1" ry="1"/><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/></svg>';
+function renderCodeBlockTitleIcon(title, language) {
+    const normalizedTitle = title?.trim().toLowerCase() ?? "";
+    const normalizedLanguage = language?.trim().toLowerCase() ?? "";
+    if (normalizedTitle.includes("terminal") || terminalCodeLanguages.has(normalizedLanguage)) {
+        return terminalCodeBlockIcon;
+    }
+    return fileCodeBlockIcon;
+}
 function wrapCodeWithCopy(html, rawCode, title, language) {
     const escapedRaw = rawCode
         .replace(/&/g, "&amp;")
@@ -399,11 +462,11 @@ function wrapCodeWithCopy(html, rawCode, title, language) {
         .replace(/</g, "&lt;")
         .replace(/>/g, "&gt;");
     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>`;
+    const copyBtn = `<button type="button" class="fd-copy-btn" data-code="${escapedRaw}" title="Copy code" aria-label="Copy code">${copyCodeBlockIcon}</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">${escapeHtml(title)}</span>${copyBtn}</div><div class="fd-codeblock-content">${html}</div></div>`;
+        return `<figure class="fd-codeblock fd-codeblock--titled shiki not-prose" dir="ltr" tabindex="-1"${dataLang}><div class="fd-codeblock-title" data-title>${renderCodeBlockTitleIcon(title, language)}<span class="fd-codeblock-title-text">${escapeHtml(title)}</span><div class="fd-codeblock-actions">${copyBtn}</div></div><div class="fd-codeblock-content fd-scroll-container" role="region" tabindex="0">${html}</div></figure>`;
     }
-    return `<div class="fd-codeblock"${dataLang}>${copyBtn}<div class="fd-codeblock-content">${html}</div></div>`;
+    return `<figure class="fd-codeblock shiki not-prose" dir="ltr" tabindex="-1"${dataLang}><div class="fd-codeblock-actions fd-codeblock-actions-floating">${copyBtn}</div><div class="fd-codeblock-content fd-scroll-container" role="region" tabindex="0">${html}</div></figure>`;
 }
 function dedentCode(raw) {
     const lines = raw.replace(/\n$/, "").split("\n");
@@ -452,14 +515,16 @@ export async function renderMarkdown(content, options = {}) {
         }
         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">`;
+        let tabsHtml = `<div class="fd-tabs fd-code-group" data-tabs data-code-group data-fd-code-group${dropdown ? ' data-dropdown="true"' : ""}>`;
+        tabsHtml += `<div class="fd-tabs-list fd-code-group-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>`;
+            const state = i === 0 ? "active" : "inactive";
+            tabsHtml += `<button type="button" role="tab" class="fd-tab-trigger${i === 0 ? " fd-tab-active" : ""}" data-tab-value="${escapeHtml(panels[i].value)}" data-state="${state}" aria-selected="${i === 0}" tabindex="${i === 0 ? "0" : "-1"}">${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>`;
+            const state = i === 0 ? "active" : "inactive";
+            tabsHtml += `<div class="fd-tab-panel fd-code-group-panel${i === 0 ? " fd-tab-panel-active" : ""}" data-tab-panel="${escapeHtml(panels[i].value)}" data-state="${state}" role="tabpanel">${panels[i].html}</div>`;
         }
         tabsHtml += `</div>`;
         const placeholder = `%%TABS_${tabsBlocks.length}%%`;
@@ -489,11 +554,13 @@ export async function renderMarkdown(content, options = {}) {
         let tabsHtml = `<div class="fd-tabs" data-tabs>`;
         tabsHtml += `<div class="fd-tabs-list" role="tablist">`;
         for (let i = 0; i < items.length; i++) {
-            tabsHtml += `<button role="tab" class="fd-tab-trigger${i === 0 ? " fd-tab-active" : ""}" data-tab-value="${items[i]}" aria-selected="${i === 0}">${items[i]}</button>`;
+            const state = i === 0 ? "active" : "inactive";
+            tabsHtml += `<button type="button" role="tab" class="fd-tab-trigger${i === 0 ? " fd-tab-active" : ""}" data-tab-value="${escapeHtml(items[i])}" data-state="${state}" aria-selected="${i === 0}" tabindex="${i === 0 ? "0" : "-1"}">${escapeHtml(items[i])}</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="${panels[i].value}" role="tabpanel">${panels[i].html}</div>`;
+            const state = i === 0 ? "active" : "inactive";
+            tabsHtml += `<div class="fd-tab-panel${i === 0 ? " fd-tab-panel-active" : ""}" data-tab-panel="${escapeHtml(panels[i].value)}" data-state="${state}" role="tabpanel">${panels[i].html}</div>`;
         }
         tabsHtml += `</div>`;
         const placeholder = `%%TABS_${tabsBlocks.length}%%`;
@@ -521,6 +588,15 @@ export async function renderMarkdown(content, options = {}) {
         promptBlocks.push(renderPrompt(attrSource ?? "", children, options));
         return placeholder;
     });
+    const calloutBlocks = [];
+    result = result.replace(/<Callout(?:\s+([^>]*?))?>([\s\S]*?)<\/Callout>/g, (_, attrSource, children) => {
+        const attrs = parseJsxAttributes(attrSource ?? "");
+        const type = toStringValue(attrs.type) ?? toStringValue(attrs.kind) ?? "note";
+        const title = toStringValue(attrs.title);
+        const placeholder = `%%CALLOUT_${calloutBlocks.length}%%`;
+        calloutBlocks.push(renderCallout(type, children, title));
+        return placeholder;
+    });
     // Inline code
     result = result.replace(/`([^`]+)`/g, "<code>$1</code>");
     // Headings (h4 → h1 order to avoid prefix collisions)
@@ -535,7 +611,6 @@ export async function renderMarkdown(content, options = {}) {
     });
     result = result.replace(/^# (.+)$/gm, "<h1>$1</h1>");
     // ── Callouts / blockquotes (before inline formatting) ──
-    const calloutBlocks = [];
     result = result.replace(/(?:^>\s*.+\n?)+/gm, (block) => {
         const lines = block.split("\n").filter(Boolean);
         const inner = lines.map((l) => l.replace(/^>\s?/, "")).join("\n");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@farming-labs/svelte",
-  "version": "0.2.45",
+  "version": "0.2.47",
   "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.2.45"
+    "@farming-labs/docs": "0.2.47"
   },
   "peerDependencies": {
     "@farming-labs/docs": "*"