From cd2f9f4e7f8b4e3741e2bcd9adddb747f2ae150b Mon Sep 17 00:00:00 2001
From: boboqun <liboqun@live.com>
Date: Fri, 23 Jan 2026 12:05:51 +0800
Subject: [PATCH 1/5] fix(docs): improve mkdocs admonition compatibility and
 robustness - normalize admonition types to lowercase (e.g., `!!! Note` ->
 `::: note`) to match VitePress custom container expectations. - automatically
 strip dangling code fences from admonition content to prevent rendering
 errors caused by malformed markdown (e.g., in `docs/coil/compose.md`).

Solution:
- Replaced the fixed `height` on `.card` with `min-height` to allow cards to grow dynamically with their content.
- Added a `line-height` to `.cardTitle` to ensure multi-line titles are legible.
- Introduced media queries (`@media`) to:
  - Decrease `padding` within `.cardContent` on smaller screens.
  - Scale down `font-size` for titles and descriptions on mobile viewports for a more balanced layout.
---
 docs/.vitepress/markdown-it-mk-admonitions.ts | 22 ++++++++++++++++++-
 1 file changed, 21 insertions(+), 1 deletion(-)

diff --git a/docs/.vitepress/markdown-it-mk-admonitions.ts b/docs/.vitepress/markdown-it-mk-admonitions.ts
index 269e5a97a..2a5707269 100644
--- a/docs/.vitepress/markdown-it-mk-admonitions.ts
+++ b/docs/.vitepress/markdown-it-mk-admonitions.ts
@@ -21,7 +21,7 @@ export default function markdownItMkAdmonition(md) {
 
       if (match) {
         const leadingWhitespace = match[1] || ''; // Whitespace before !!!
-        const type = match[2];
+        const type = match[2].toLowerCase();
         const title = match[3] || ''; // Title content, or empty string if not present
 
         const content = [];
@@ -59,6 +59,25 @@ export default function markdownItMkAdmonition(md) {
           admonitionContentStartIndex = j + 1; // Update line counter
         }
 
+
+        // Fix for dangling code fences (e.g., incorrect indentation in original MD)
+        // If content has an odd number of code fences, and the last line is a fence, remove it.
+        let fenceCount = 0;
+        for (const line of content) {
+          if (line.trim().startsWith('```') || line.trim().startsWith('~~~')) {
+            fenceCount++;
+          }
+        }
+
+        if (fenceCount % 2 !== 0 && content.length > 0) {
+          const lastLineIndex = content.length - 1;
+          const lastLine = content[lastLineIndex].trim();
+          if (lastLine.startsWith('```') || lastLine.startsWith('~~~')) {
+            // Remove the dangling fence
+            content.splice(lastLineIndex, 1);
+          }
+        }
+
         if (hasActualContent) {
           // Construct VitePress container
           newLines.push(`${leadingWhitespace}::: ${type}${title ? ' ' + title.trim() : ''}`);
@@ -67,6 +86,7 @@ export default function markdownItMkAdmonition(md) {
           }));
           newLines.push(`${leadingWhitespace}:::`);
           i = admonitionContentStartIndex; // Move master index past processed admonition
+
         } else {
           // No valid content found, treat as regular line
           newLines.push(currentLine);

From 41c6230a68fa004c54441299c7e9124284dba3cf Mon Sep 17 00:00:00 2001
From: boboqun <liboqun@live.com>
Date: Mon, 26 Jan 2026 09:14:21 +0800
Subject: [PATCH 2/5] fix(docs): enhance mkdocs admonition support for unicode
 and stability
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Relax regex to `\S+` to support non-ASCII admonition types (e.g., `!!! 注意`).
- Add specific mapping for `!!! 注意` to render as `::: note 注意`.
- Normalize standard admonition types to lowercase (e.g., `!!! Note` -> `::: note`).
- Automatically strip dangling code fences from admonition content to fix rendering issues in files like `docs/coil/compose.md`.
---
 docs/.vitepress/markdown-it-mk-admonitions.ts | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/docs/.vitepress/markdown-it-mk-admonitions.ts b/docs/.vitepress/markdown-it-mk-admonitions.ts
index 2a5707269..32fcf5ddb 100644
--- a/docs/.vitepress/markdown-it-mk-admonitions.ts
+++ b/docs/.vitepress/markdown-it-mk-admonitions.ts
@@ -10,10 +10,10 @@ export default function markdownItMkAdmonition(md) {
     // Regex to find the start of an MKDocs admonition
     // ^(\s*)!!!             - Start of line, optional leading whitespace (capture 1), then !!!
     // \s+                   - One or more spaces
-    // (\w+)                 - The admonition type (e.g., note, warning) (capture 2)
+    // (\S+)                 - The admonition type (non-whitespace characters) (capture 2)
     // (?:\s+"([^"]*)")?     - Optional: space, then a quoted title (capture 3 is the title content)
     // \s*$                  - Optional trailing whitespace, end of line
-    const admonitionStartRegex = /^(\s*)!!!\s+(\w+)(?:\s+"([^"]*)")?\s*$/;
+    const admonitionStartRegex = /^(\s*)!!!\s+(\S+)(?:\s+"([^"]*)")?\s*$/;
 
     while (i < lines.length) {
       const currentLine = lines[i];
@@ -21,8 +21,18 @@ export default function markdownItMkAdmonition(md) {
 
       if (match) {
         const leadingWhitespace = match[1] || ''; // Whitespace before !!!
-        const type = match[2].toLowerCase();
-        const title = match[3] || ''; // Title content, or empty string if not present
+        let type = match[2];
+        let title = match[3] || ''; // Title content, or empty string if not present
+
+        // Handle Chinese '注意' mapping
+        if (type === '注意') {
+          type = 'note';
+          if (!title) {
+            title = '注意';
+          }
+        } else {
+          type = type.toLowerCase();
+        }
 
         const content = [];
         let admonitionContentStartIndex = i + 1;

From 44f5a45fcc952156d2311f1b706620135a2d098b Mon Sep 17 00:00:00 2001
From: boboqun <liboqun@live.com>
Date: Tue, 10 Feb 2026 10:27:29 +0800
Subject: [PATCH 3/5] feat: improve MkDocs tabs support in VitePress

- Refactor `markdown-it-mk-code-tabs` plugin to generate direct `<tabs>` and `<tab>` HTML tags instead of `::: tabs` containers, aligning with the manual syntax used in other documentation files.
- Fix nested tabs support by flattening indentation of generated HTML tags, preventing `markdown-it` from parsing them as code blocks.
- Fix fenced code block rendering (e.g., `bash`) inside tabs by correctly calculating and applying output indentation relative to the parent container.
- Fix parsing of subsequent markdown blocks (e.g., `!!! note`) by ensuring a blank line is inserted after closing a `</tabs>` group.
- Enhance [Tabs.vue](cci:7://file:///Users/bobo/Documents/GitHub/Open-Docs-fork/docs/.vitepress/component/Tabs.vue:0:0-0:0) component robustness:
    - Update child filtering logic to explicitly exclude Text, Comment, and Fragment nodes, ensuring all valid tab components are rendered.
    - Add safe navigation for tab titles to prevent runtime errors.
---
 docs/.vitepress/component/Tabs.vue          |   8 +-
 docs/.vitepress/config/markdown.config.ts   |  22 ++
 docs/.vitepress/markdown-it-mk-code-tabs.ts | 272 ++++++++++++--------
 3 files changed, 186 insertions(+), 116 deletions(-)

diff --git a/docs/.vitepress/component/Tabs.vue b/docs/.vitepress/component/Tabs.vue
index 44e6acfb5..845c935a6 100644
--- a/docs/.vitepress/component/Tabs.vue
+++ b/docs/.vitepress/component/Tabs.vue
@@ -1,10 +1,12 @@
 <script setup>
-import { useSlots, ref, computed } from 'vue';
+import { useSlots, ref, computed, Text, Comment, Fragment } from 'vue';
 
 const slots = useSlots();
 
 const tabs = computed(() => {
-  return slots.default ? slots.default().filter(child => child.type && child.props) : [];
+  return slots.default ? slots.default().filter(child => {
+    return child.type !== Text && child.type !== Comment && child.type !== Fragment
+  }) : [];
 });
 
 const activeIndex = ref(0);
@@ -32,7 +34,7 @@ const isTab = tabs.props?.id;
             :for="`${groupName}-${index}`"
             @click="activeIndex = index"
         >
-          {{ tab.props?.title }}
+          {{ tab.props?.title || 'Tab' }}
         </label>
       </template>
     </div>
diff --git a/docs/.vitepress/config/markdown.config.ts b/docs/.vitepress/config/markdown.config.ts
index 169042896..c715d5bbb 100644
--- a/docs/.vitepress/config/markdown.config.ts
+++ b/docs/.vitepress/config/markdown.config.ts
@@ -88,6 +88,28 @@ export function registerMarkdownPlugins(md: any) {
   createContainer(md, 'warning', 'danger', 'WARNING')
   createContainer(md, 'example', 'info', 'EXAMPLE')
 
+  // Tabs
+  md.use(markdownItContainer, 'tabs', {
+    render: (tokens: any[], idx: number) => {
+      if (tokens[idx].nesting === 1) {
+        return '<Tabs>\n'
+      } else {
+        return '</Tabs>\n'
+      }
+    }
+  })
+  md.use(markdownItContainer, 'tab', {
+    render: (tokens: any[], idx: number) => {
+      if (tokens[idx].nesting === 1) {
+        const title = tokens[idx].info.trim().slice('tab'.length).trim()
+        const safeTitle = title.replace(/"/g, '&quot;')
+        return `<Tab title="${safeTitle}">\n`
+      } else {
+        return '</Tab>\n'
+      }
+    }
+  })
+
   // Auto-titling (must be registered last as it overrides md.parse)
   md.use(markdownItAutoTitle)
 }
diff --git a/docs/.vitepress/markdown-it-mk-code-tabs.ts b/docs/.vitepress/markdown-it-mk-code-tabs.ts
index 968e937d1..acd33b049 100644
--- a/docs/.vitepress/markdown-it-mk-code-tabs.ts
+++ b/docs/.vitepress/markdown-it-mk-code-tabs.ts
@@ -1,122 +1,168 @@
-// Process Material MKDocs flavored Code Tabs to VitePress Code Group
-export default function markdownItMkCodeTabs(md) {
-  function transformContentTabs(state) {
-    const src = state.src;
-    const lines = src.split('\n');
-    const newLines = [];
-    let i = 0; // Current line index in the original `lines` array
-
-    // Regex for the start of an MKDocs content tab header
-    // Captures: 1: blockIndent, 2: tabTitle
-    const tabStartRegex = /^(\s*)===\s*"([^"]+)"\s*$/;
-
-    while (i < lines.length) {
-      const currentLine = lines[i];
-      const firstTabMatch = currentLine.match(tabStartRegex);
-
-      if (firstTabMatch) {
-        const blockIndent = firstTabMatch[1] || ''; // Indentation of the '===' line itself
-        let currentGroupLineIndex = i; // Line index for iterating through potential tabs in a group
-        const collectedTabs = []; // Stores data for each tab in the current group
-
-        // Loop to collect all contiguous tabs belonging to this group
-        while (currentGroupLineIndex < lines.length) {
-          const lineForGroupCheck = lines[currentGroupLineIndex];
-          const tabMatch = lineForGroupCheck.match(tabStartRegex);
-
-          // Check if this line is a tab header at the same blockIndent level
-          if (tabMatch && (tabMatch[1] || '') === blockIndent) {
-            const tabTitle = tabMatch[2];
-            let codeLinesForThisTab = [];
-            let currentTabLang = '';
-            let currentTabActualIndent = ''; // Indentation of the '```' line itself
-            let inCodeBlockForThisTab = false;
-            // Start scanning for this tab's content from the line *after* the '===' header
-            let tabContentEndLineIndex = currentGroupLineIndex + 1;
-
-            let contentScanIndex = currentGroupLineIndex + 1;
-            while (contentScanIndex < lines.length) {
-              const contentLine = lines[contentScanIndex];
-
-              if (!inCodeBlockForThisTab) {
-                // Allow blank lines (at least blockIndent deep) before the code block starts
-                if (contentLine.trim() === '' && contentLine.startsWith(blockIndent) && !contentLine.substring(blockIndent.length).trimStart()) {
-                  contentScanIndex++;
-                  tabContentEndLineIndex = contentScanIndex;
-                  continue;
-                }
-
-                // Regex for '```lang', capturing its own indent and lang
-                // Expects code block to be more indented than the '===' line
-                const codeBlockStartMatch = contentLine.match(/^(\s*)```(\w*)/);
-                if (codeBlockStartMatch && codeBlockStartMatch[1].length > blockIndent.length) {
-                  inCodeBlockForThisTab = true;
-                  currentTabActualIndent = codeBlockStartMatch[1]; // Full indent of the ``` line
-                  currentTabLang = codeBlockStartMatch[2] || '';
-                  tabContentEndLineIndex = contentScanIndex + 1; // Consume the opening ``` line
-                } else {
-                  // Not a valid indented code block start for this tab. This tab definition ends here.
-                  break;
-                }
-              } else { // We are inside a code block, looking for content or the closing ```
-                // Check for closing fence, it must match currentTabActualIndent
-                if (contentLine.startsWith(currentTabActualIndent + "```")) {
-                  tabContentEndLineIndex = contentScanIndex + 1; // Consume the closing ``` line
-                  break; // End of this tab's content
-                }
-                // Add the code line, de-dented relative to the ``` fence's own indentation
-                codeLinesForThisTab.push(contentLine.substring(currentTabActualIndent.length));
-                tabContentEndLineIndex = contentScanIndex + 1;
-              }
-              contentScanIndex++;
-            } // End while loop for a single tab's content
-
-            if (inCodeBlockForThisTab) {
-              collectedTabs.push({
-                title: tabTitle,
-                lang: currentTabLang,
-                codeLines: codeLinesForThisTab,
-              });
-              currentGroupLineIndex = tabContentEndLineIndex; // Move to the line after this tab's content
-            } else {
-              // This '===' line was not followed by a valid code block.
-              // End the current group collection. The '===' line will be handled as plain text.
-              break;
-            }
+// Process Material MKDocs flavored Content Tabs to VitePress Custom Containers
+
+interface TabStackItem {
+  indent: string;
+  outputIndent: string;
+  type: 'tabs' | 'tab';
+}
+
+export default function markdownItMkCodeTabs(md: any) {
+  md.core.ruler.before('normalize', 'mk_tabs_to_container', (state: any) => {
+    const lines = state.src.split('\n');
+    const newLines: string[] = [];
+    const stack: TabStackItem[] = []; // Stack of { indent: string, type: 'tabs' | 'tab' }
+
+    function closeLevels(targetIndentLen: number) {
+      while (stack.length > 0) {
+        const top = stack[stack.length - 1];
+        if (top.indent.length >= targetIndentLen) {
+          // Close the level
+          if (top.type === 'tabs') {
+            newLines.push(`${top.outputIndent}</tabs>`);
+            // Add blank line after closing tabs to ensure subsequent markdown content is parsed correctly
+            newLines.push('');
           } else {
-            // This line is not part of the current tab group (e.g. different indent or not a tab header)
-            break;
-          }
-        } // End while loop for collecting a group of tabs
-
-        if (collectedTabs.length > 0) {
-          // Construct the VitePress code-group
-          newLines.push(`${blockIndent}::: code-group`);
-          for (const tab of collectedTabs) {
-            newLines.push(`${blockIndent}\`\`\`${tab.lang} [${tab.title}]`);
-            for (const codeLine of tab.codeLines) {
-              // Prepend original blockIndent to the already de-dented code line
-              newLines.push(blockIndent + codeLine);
-            }
-            newLines.push(`${blockIndent}\`\`\``);
+            newLines.push(`${top.outputIndent}</tab>`);
           }
-          newLines.push(`${blockIndent}:::`);
-          i = currentGroupLineIndex; // Update main loop index to after the processed group
+          stack.pop();
         } else {
-          // No valid tab group was formed from the initial '===' line (e.g., malformed content).
-          // Push the original '===' line and let it be handled as plain text.
-          newLines.push(currentLine);
-          i++;
+          break;
+        }
+      }
+    }
+
+    for (let i = 0; i < lines.length; i++) {
+      const line = lines[i];
+      const match = line.match(/^(\s*)===\s*"(.*)"\s*$/);
+
+      if (match) {
+        const indent = match[1];
+        const title = match[2];
+
+        // Close strictly deeper levels first
+        closeLevels(indent.length + 1);
+
+        // Check if we are at the same level as a current tab
+        if (stack.length > 0) {
+          const top = stack[stack.length - 1];
+          if (top.indent.length === indent.length && top.type === 'tab') {
+            // Close sibling tab
+            newLines.push(`${top.outputIndent}</tab>`);
+            stack.pop();
+          }
+        }
+
+        // Calculate output indent
+        let outputIndent = indent;
+        if (stack.length > 0) {
+          const parent = stack[stack.length - 1];
+          // Parent content is indented by parent.indent + 4 spaces
+          // We want to dedent relative to that.
+          // Actually, we want to simply use the parent's outputIndent?
+          // No, if list item... 
+          // Logic: source indent - (parent.indent + 4) + parent.outputIndent ??
+          // Simpler: If in a tab, we dedent by (parent.indent + 4).
+          // But we need to keep any base indentation from list items.
+          // If parent is at Source=0, Output=0.
+          // Inner is Source=4. Dedent=4. Output=0.
+
+          // If Parent is Source=4 (List), Output=4.
+          // Inner is Source=8. Dedent=8 (absolute?) or 4 relative?
+          // Inner Source 8. Parent Content Start = 4+4=8.
+          // So dedent 8? 
+          // Result 0 relative to parent... so 0 + ParentOutput(4) = 4?
+
+          // Wait, simply: the indentation we strip from source is `parent.indent.length + 4`.
+          // But we need to prepend `parent.outputIndent`?
+          // If we strictly flatten:
+          // Top level tabs -> OutputIndent = indent.
+          // Nested tabs -> OutputIndent = parent.outputIndent.
+          // Because content starts at parent.outputIndent.
+
+          // Let's try: Nested tabs always align with their container.
+          // Container for Inner is Outer. Outer starts at 0.
+          // Inner should start at 0.
+          // Container for List Tab is List Item (0). Tab starts at 4.
+
+          // So:
+          if (parent.type === 'tab') {
+            // If nested inside a tab, align with parent tab's content start (which is effectively parent.outputIndent)
+            outputIndent = parent.outputIndent;
+          } else {
+            // inside 'tabs' group?
+            // 'tabs' group has same indent as 'tab'.
+            outputIndent = parent.outputIndent;
+          }
+        }
+
+        // Check if we need to start a new group
+        let inGroup = false;
+        if (stack.length > 0) {
+          const top = stack[stack.length - 1];
+          if (top.indent.length === indent.length && top.type === 'tabs') {
+            inGroup = true;
+          }
         }
+
+        if (!inGroup) {
+          newLines.push(`${outputIndent}<tabs>`);
+          stack.push({ indent: indent, type: 'tabs', outputIndent: outputIndent });
+        }
+
+        // Start tab
+        newLines.push(`${outputIndent}<tab title="${title}">`);
+        stack.push({ indent: indent, type: 'tab', outputIndent: outputIndent });
+
       } else {
-        // Line is not a tab start, keep it as is
-        newLines.push(currentLine);
-        i++;
+        // Content or outside
+        if (line.trim() === '') {
+          newLines.push(line);
+          continue;
+        }
+
+        const currentIndentMatch = line.match(/^(\s*)/);
+        const currentIndentLen = currentIndentMatch ? currentIndentMatch[1].length : 0;
+
+        // Check if valid content for current tab
+        let isContent = false;
+        if (stack.length > 0) {
+          const top = stack[stack.length - 1];
+          // If we are in a tab (top.type === 'tab')
+          // Valid content must be deeper than header indent.
+          if (currentIndentLen > top.indent.length && top.type === 'tab') {
+            isContent = true;
+
+            // Dedent logic: remove 4 spaces relative to parent, if possible.
+            let content = line;
+            if (content.startsWith(top.indent)) {
+              content = content.slice(top.indent.length);
+              // Remove up to 4 spaces
+              if (content.startsWith('    ')) {
+                content = content.slice(4);
+              } else if (content.startsWith('\t')) {
+                content = content.slice(1);
+              } else {
+                // fallback
+              }
+              newLines.push(top.outputIndent + content);
+            } else {
+              newLines.push(line);
+            }
+          }
+        }
+
+        if (!isContent) {
+          // Not content for current tab (or stack empty)
+          // Close levels that are >= currentIndent
+          closeLevels(currentIndentLen);
+          newLines.push(line);
+        }
       }
-    } // End while loop for all lines in the source
+    }
 
-    state.src = newLines.join('\n');
-  }
+    // End of doc, close all
+    closeLevels(0);
 
-  md.core.ruler.before('normalize', 'content_tabs_to_code_group', transformContentTabs);
+    state.src = newLines.join('\n');
+  });
 }

From 463b71881f75172ef1334abf6d9700c8d1dd11aa Mon Sep 17 00:00:00 2001
From: boboqun <liboqun@live.com>
Date: Mon, 23 Feb 2026 18:39:15 +0800
Subject: [PATCH 4/5] fix(docs): resolve Invalid end tag by ensuring blank
 lines around generated tab HTML

This fixes Vue template compilation errors when fenced code blocks inside tabs were parsed as raw text instead of HTML, due to insufficient block separation.
---
 docs/.vitepress/markdown-it-mk-code-tabs.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/docs/.vitepress/markdown-it-mk-code-tabs.ts b/docs/.vitepress/markdown-it-mk-code-tabs.ts
index acd33b049..99e55debd 100644
--- a/docs/.vitepress/markdown-it-mk-code-tabs.ts
+++ b/docs/.vitepress/markdown-it-mk-code-tabs.ts
@@ -18,11 +18,11 @@ export default function markdownItMkCodeTabs(md: any) {
         if (top.indent.length >= targetIndentLen) {
           // Close the level
           if (top.type === 'tabs') {
-            newLines.push(`${top.outputIndent}</tabs>`);
+            newLines.push(`\n${top.outputIndent}</tabs>`);
             // Add blank line after closing tabs to ensure subsequent markdown content is parsed correctly
             newLines.push('');
           } else {
-            newLines.push(`${top.outputIndent}</tab>`);
+            newLines.push(`\n${top.outputIndent}</tab>`);
           }
           stack.pop();
         } else {
@@ -105,12 +105,12 @@ export default function markdownItMkCodeTabs(md: any) {
         }
 
         if (!inGroup) {
-          newLines.push(`${outputIndent}<tabs>`);
+          newLines.push(`${outputIndent}<tabs>\n`);
           stack.push({ indent: indent, type: 'tabs', outputIndent: outputIndent });
         }
 
         // Start tab
-        newLines.push(`${outputIndent}<tab title="${title}">`);
+        newLines.push(`${outputIndent}<tab title="${title}">\n`);
         stack.push({ indent: indent, type: 'tab', outputIndent: outputIndent });
 
       } else {

From 2967459e64317c3c39890e6475321182f55f2eef Mon Sep 17 00:00:00 2001
From: boboqun <liboqun@live.com>
Date: Tue, 24 Feb 2026 10:13:34 +0800
Subject: [PATCH 5/5] chore: temporarily restore tab-related files to unblock
 build

- Reverted changes to markdown-it-mk-code-tabs.ts and related files that caused `docs:build` to fail with "Element is missing end tag" errors.
- The documentation site now loads successfully, though some MkDocs-style `=== "Tab"` syntax remains unprocessed and does not render as tabs.
- This represents a stable state; tab processing issues are deferred for future investigation.
---
 docs/.vitepress/component/Tabs.vue          |   8 +-
 docs/.vitepress/config/markdown.config.ts   |  22 --
 docs/.vitepress/markdown-it-mk-code-tabs.ts | 272 ++++++++------------
 3 files changed, 116 insertions(+), 186 deletions(-)

diff --git a/docs/.vitepress/component/Tabs.vue b/docs/.vitepress/component/Tabs.vue
index 845c935a6..44e6acfb5 100644
--- a/docs/.vitepress/component/Tabs.vue
+++ b/docs/.vitepress/component/Tabs.vue
@@ -1,12 +1,10 @@
 <script setup>
-import { useSlots, ref, computed, Text, Comment, Fragment } from 'vue';
+import { useSlots, ref, computed } from 'vue';
 
 const slots = useSlots();
 
 const tabs = computed(() => {
-  return slots.default ? slots.default().filter(child => {
-    return child.type !== Text && child.type !== Comment && child.type !== Fragment
-  }) : [];
+  return slots.default ? slots.default().filter(child => child.type && child.props) : [];
 });
 
 const activeIndex = ref(0);
@@ -34,7 +32,7 @@ const isTab = tabs.props?.id;
             :for="`${groupName}-${index}`"
             @click="activeIndex = index"
         >
-          {{ tab.props?.title || 'Tab' }}
+          {{ tab.props?.title }}
         </label>
       </template>
     </div>
diff --git a/docs/.vitepress/config/markdown.config.ts b/docs/.vitepress/config/markdown.config.ts
index c715d5bbb..169042896 100644
--- a/docs/.vitepress/config/markdown.config.ts
+++ b/docs/.vitepress/config/markdown.config.ts
@@ -88,28 +88,6 @@ export function registerMarkdownPlugins(md: any) {
   createContainer(md, 'warning', 'danger', 'WARNING')
   createContainer(md, 'example', 'info', 'EXAMPLE')
 
-  // Tabs
-  md.use(markdownItContainer, 'tabs', {
-    render: (tokens: any[], idx: number) => {
-      if (tokens[idx].nesting === 1) {
-        return '<Tabs>\n'
-      } else {
-        return '</Tabs>\n'
-      }
-    }
-  })
-  md.use(markdownItContainer, 'tab', {
-    render: (tokens: any[], idx: number) => {
-      if (tokens[idx].nesting === 1) {
-        const title = tokens[idx].info.trim().slice('tab'.length).trim()
-        const safeTitle = title.replace(/"/g, '&quot;')
-        return `<Tab title="${safeTitle}">\n`
-      } else {
-        return '</Tab>\n'
-      }
-    }
-  })
-
   // Auto-titling (must be registered last as it overrides md.parse)
   md.use(markdownItAutoTitle)
 }
diff --git a/docs/.vitepress/markdown-it-mk-code-tabs.ts b/docs/.vitepress/markdown-it-mk-code-tabs.ts
index 99e55debd..968e937d1 100644
--- a/docs/.vitepress/markdown-it-mk-code-tabs.ts
+++ b/docs/.vitepress/markdown-it-mk-code-tabs.ts
@@ -1,168 +1,122 @@
-// Process Material MKDocs flavored Content Tabs to VitePress Custom Containers
-
-interface TabStackItem {
-  indent: string;
-  outputIndent: string;
-  type: 'tabs' | 'tab';
-}
-
-export default function markdownItMkCodeTabs(md: any) {
-  md.core.ruler.before('normalize', 'mk_tabs_to_container', (state: any) => {
-    const lines = state.src.split('\n');
-    const newLines: string[] = [];
-    const stack: TabStackItem[] = []; // Stack of { indent: string, type: 'tabs' | 'tab' }
-
-    function closeLevels(targetIndentLen: number) {
-      while (stack.length > 0) {
-        const top = stack[stack.length - 1];
-        if (top.indent.length >= targetIndentLen) {
-          // Close the level
-          if (top.type === 'tabs') {
-            newLines.push(`\n${top.outputIndent}</tabs>`);
-            // Add blank line after closing tabs to ensure subsequent markdown content is parsed correctly
-            newLines.push('');
-          } else {
-            newLines.push(`\n${top.outputIndent}</tab>`);
-          }
-          stack.pop();
-        } else {
-          break;
-        }
-      }
-    }
-
-    for (let i = 0; i < lines.length; i++) {
-      const line = lines[i];
-      const match = line.match(/^(\s*)===\s*"(.*)"\s*$/);
-
-      if (match) {
-        const indent = match[1];
-        const title = match[2];
-
-        // Close strictly deeper levels first
-        closeLevels(indent.length + 1);
-
-        // Check if we are at the same level as a current tab
-        if (stack.length > 0) {
-          const top = stack[stack.length - 1];
-          if (top.indent.length === indent.length && top.type === 'tab') {
-            // Close sibling tab
-            newLines.push(`${top.outputIndent}</tab>`);
-            stack.pop();
-          }
-        }
-
-        // Calculate output indent
-        let outputIndent = indent;
-        if (stack.length > 0) {
-          const parent = stack[stack.length - 1];
-          // Parent content is indented by parent.indent + 4 spaces
-          // We want to dedent relative to that.
-          // Actually, we want to simply use the parent's outputIndent?
-          // No, if list item... 
-          // Logic: source indent - (parent.indent + 4) + parent.outputIndent ??
-          // Simpler: If in a tab, we dedent by (parent.indent + 4).
-          // But we need to keep any base indentation from list items.
-          // If parent is at Source=0, Output=0.
-          // Inner is Source=4. Dedent=4. Output=0.
-
-          // If Parent is Source=4 (List), Output=4.
-          // Inner is Source=8. Dedent=8 (absolute?) or 4 relative?
-          // Inner Source 8. Parent Content Start = 4+4=8.
-          // So dedent 8? 
-          // Result 0 relative to parent... so 0 + ParentOutput(4) = 4?
-
-          // Wait, simply: the indentation we strip from source is `parent.indent.length + 4`.
-          // But we need to prepend `parent.outputIndent`?
-          // If we strictly flatten:
-          // Top level tabs -> OutputIndent = indent.
-          // Nested tabs -> OutputIndent = parent.outputIndent.
-          // Because content starts at parent.outputIndent.
-
-          // Let's try: Nested tabs always align with their container.
-          // Container for Inner is Outer. Outer starts at 0.
-          // Inner should start at 0.
-          // Container for List Tab is List Item (0). Tab starts at 4.
-
-          // So:
-          if (parent.type === 'tab') {
-            // If nested inside a tab, align with parent tab's content start (which is effectively parent.outputIndent)
-            outputIndent = parent.outputIndent;
-          } else {
-            // inside 'tabs' group?
-            // 'tabs' group has same indent as 'tab'.
-            outputIndent = parent.outputIndent;
-          }
-        }
-
-        // Check if we need to start a new group
-        let inGroup = false;
-        if (stack.length > 0) {
-          const top = stack[stack.length - 1];
-          if (top.indent.length === indent.length && top.type === 'tabs') {
-            inGroup = true;
-          }
-        }
-
-        if (!inGroup) {
-          newLines.push(`${outputIndent}<tabs>\n`);
-          stack.push({ indent: indent, type: 'tabs', outputIndent: outputIndent });
-        }
-
-        // Start tab
-        newLines.push(`${outputIndent}<tab title="${title}">\n`);
-        stack.push({ indent: indent, type: 'tab', outputIndent: outputIndent });
-
-      } else {
-        // Content or outside
-        if (line.trim() === '') {
-          newLines.push(line);
-          continue;
-        }
-
-        const currentIndentMatch = line.match(/^(\s*)/);
-        const currentIndentLen = currentIndentMatch ? currentIndentMatch[1].length : 0;
-
-        // Check if valid content for current tab
-        let isContent = false;
-        if (stack.length > 0) {
-          const top = stack[stack.length - 1];
-          // If we are in a tab (top.type === 'tab')
-          // Valid content must be deeper than header indent.
-          if (currentIndentLen > top.indent.length && top.type === 'tab') {
-            isContent = true;
-
-            // Dedent logic: remove 4 spaces relative to parent, if possible.
-            let content = line;
-            if (content.startsWith(top.indent)) {
-              content = content.slice(top.indent.length);
-              // Remove up to 4 spaces
-              if (content.startsWith('    ')) {
-                content = content.slice(4);
-              } else if (content.startsWith('\t')) {
-                content = content.slice(1);
-              } else {
-                // fallback
+// Process Material MKDocs flavored Code Tabs to VitePress Code Group
+export default function markdownItMkCodeTabs(md) {
+  function transformContentTabs(state) {
+    const src = state.src;
+    const lines = src.split('\n');
+    const newLines = [];
+    let i = 0; // Current line index in the original `lines` array
+
+    // Regex for the start of an MKDocs content tab header
+    // Captures: 1: blockIndent, 2: tabTitle
+    const tabStartRegex = /^(\s*)===\s*"([^"]+)"\s*$/;
+
+    while (i < lines.length) {
+      const currentLine = lines[i];
+      const firstTabMatch = currentLine.match(tabStartRegex);
+
+      if (firstTabMatch) {
+        const blockIndent = firstTabMatch[1] || ''; // Indentation of the '===' line itself
+        let currentGroupLineIndex = i; // Line index for iterating through potential tabs in a group
+        const collectedTabs = []; // Stores data for each tab in the current group
+
+        // Loop to collect all contiguous tabs belonging to this group
+        while (currentGroupLineIndex < lines.length) {
+          const lineForGroupCheck = lines[currentGroupLineIndex];
+          const tabMatch = lineForGroupCheck.match(tabStartRegex);
+
+          // Check if this line is a tab header at the same blockIndent level
+          if (tabMatch && (tabMatch[1] || '') === blockIndent) {
+            const tabTitle = tabMatch[2];
+            let codeLinesForThisTab = [];
+            let currentTabLang = '';
+            let currentTabActualIndent = ''; // Indentation of the '```' line itself
+            let inCodeBlockForThisTab = false;
+            // Start scanning for this tab's content from the line *after* the '===' header
+            let tabContentEndLineIndex = currentGroupLineIndex + 1;
+
+            let contentScanIndex = currentGroupLineIndex + 1;
+            while (contentScanIndex < lines.length) {
+              const contentLine = lines[contentScanIndex];
+
+              if (!inCodeBlockForThisTab) {
+                // Allow blank lines (at least blockIndent deep) before the code block starts
+                if (contentLine.trim() === '' && contentLine.startsWith(blockIndent) && !contentLine.substring(blockIndent.length).trimStart()) {
+                  contentScanIndex++;
+                  tabContentEndLineIndex = contentScanIndex;
+                  continue;
+                }
+
+                // Regex for '```lang', capturing its own indent and lang
+                // Expects code block to be more indented than the '===' line
+                const codeBlockStartMatch = contentLine.match(/^(\s*)```(\w*)/);
+                if (codeBlockStartMatch && codeBlockStartMatch[1].length > blockIndent.length) {
+                  inCodeBlockForThisTab = true;
+                  currentTabActualIndent = codeBlockStartMatch[1]; // Full indent of the ``` line
+                  currentTabLang = codeBlockStartMatch[2] || '';
+                  tabContentEndLineIndex = contentScanIndex + 1; // Consume the opening ``` line
+                } else {
+                  // Not a valid indented code block start for this tab. This tab definition ends here.
+                  break;
+                }
+              } else { // We are inside a code block, looking for content or the closing ```
+                // Check for closing fence, it must match currentTabActualIndent
+                if (contentLine.startsWith(currentTabActualIndent + "```")) {
+                  tabContentEndLineIndex = contentScanIndex + 1; // Consume the closing ``` line
+                  break; // End of this tab's content
+                }
+                // Add the code line, de-dented relative to the ``` fence's own indentation
+                codeLinesForThisTab.push(contentLine.substring(currentTabActualIndent.length));
+                tabContentEndLineIndex = contentScanIndex + 1;
               }
-              newLines.push(top.outputIndent + content);
+              contentScanIndex++;
+            } // End while loop for a single tab's content
+
+            if (inCodeBlockForThisTab) {
+              collectedTabs.push({
+                title: tabTitle,
+                lang: currentTabLang,
+                codeLines: codeLinesForThisTab,
+              });
+              currentGroupLineIndex = tabContentEndLineIndex; // Move to the line after this tab's content
             } else {
-              newLines.push(line);
+              // This '===' line was not followed by a valid code block.
+              // End the current group collection. The '===' line will be handled as plain text.
+              break;
             }
+          } else {
+            // This line is not part of the current tab group (e.g. different indent or not a tab header)
+            break;
           }
+        } // End while loop for collecting a group of tabs
+
+        if (collectedTabs.length > 0) {
+          // Construct the VitePress code-group
+          newLines.push(`${blockIndent}::: code-group`);
+          for (const tab of collectedTabs) {
+            newLines.push(`${blockIndent}\`\`\`${tab.lang} [${tab.title}]`);
+            for (const codeLine of tab.codeLines) {
+              // Prepend original blockIndent to the already de-dented code line
+              newLines.push(blockIndent + codeLine);
+            }
+            newLines.push(`${blockIndent}\`\`\``);
+          }
+          newLines.push(`${blockIndent}:::`);
+          i = currentGroupLineIndex; // Update main loop index to after the processed group
+        } else {
+          // No valid tab group was formed from the initial '===' line (e.g., malformed content).
+          // Push the original '===' line and let it be handled as plain text.
+          newLines.push(currentLine);
+          i++;
         }
-
-        if (!isContent) {
-          // Not content for current tab (or stack empty)
-          // Close levels that are >= currentIndent
-          closeLevels(currentIndentLen);
-          newLines.push(line);
-        }
+      } else {
+        // Line is not a tab start, keep it as is
+        newLines.push(currentLine);
+        i++;
       }
-    }
-
-    // End of doc, close all
-    closeLevels(0);
+    } // End while loop for all lines in the source
 
     state.src = newLines.join('\n');
-  });
+  }
+
+  md.core.ruler.before('normalize', 'content_tabs_to_code_group', transformContentTabs);
 }