mdx-forge 0.1.1

package/dist/esm/components/base/BaseTabs.js

@@ -0,0 +1,168 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// packages/webview-app/src/components/shims/base/BaseTabs.tsx
+// factory for creating framework-specific Tabs components w/ shared logic
+import { createContext, useContext, useRef, useCallback, Children, isValidElement, } from 'react';
+import { cn } from '../internal/cn.js';
+import { useTabState, useIndexTabs, } from './useTabState.js';
+// factory function to create framework-specific Tabs components
+// all implementations share the same core logic via useTabState hook
+export function createTabs(config) {
+    const { classPrefix, wrapperClass, supportsGroupId = false, tabItemClassName = `${classPrefix}-item`, contextName, } = config;
+    // create a unique context for this tabs implementation
+    const TabsContext = createContext(false);
+    TabsContext.displayName = `${contextName}Context`;
+    // the Tabs component
+    function Tabs({ children, defaultValue, values, className, groupId, }) {
+        const { activeValue, setActiveValue, tabs, tabItems } = useTabState({
+            children,
+            defaultValue,
+            values,
+        });
+        // refs for tab buttons to enable focus management
+        const tabRefs = useRef([]);
+        // handle keyboard navigation for tabs
+        const handleKeyDown = useCallback((e, currentIndex) => {
+            const tabCount = tabs.length;
+            let newIndex = currentIndex;
+            switch (e.key) {
+                case 'ArrowLeft':
+                case 'ArrowUp':
+                    newIndex = (currentIndex - 1 + tabCount) % tabCount;
+                    break;
+                case 'ArrowRight':
+                case 'ArrowDown':
+                    newIndex = (currentIndex + 1) % tabCount;
+                    break;
+                case 'Home':
+                    newIndex = 0;
+                    break;
+                case 'End':
+                    newIndex = tabCount - 1;
+                    break;
+                default:
+                    return;
+            }
+            e.preventDefault();
+            setActiveValue(tabs[newIndex].value);
+            tabRefs.current[newIndex]?.focus();
+        }, [tabs, setActiveValue]);
+        // build wrapper class
+        const wrapperClassName = wrapperClass
+            ? `${wrapperClass}${className ? ` ${className}` : ''}`
+            : `${classPrefix}${className ? ` ${className}` : ''}`;
+        return (_jsx(TabsContext.Provider, { value: true, children: _jsxs("div", { className: wrapperClassName, "data-component": "tabs", "data-group-id": supportsGroupId ? groupId : undefined, children: [_jsx("div", { className: `${classPrefix}-header`, role: "tablist", children: tabs.map((tab, index) => (_jsx("button", { ref: (el) => {
+                                tabRefs.current[index] = el;
+                            }, role: "tab", className: `${classPrefix}-button${tab.value === activeValue ? ' active' : ''}`, "aria-selected": tab.value === activeValue, onClick: () => setActiveValue(tab.value), onKeyDown: (e) => handleKeyDown(e, index), tabIndex: tab.value === activeValue ? 0 : -1, children: tab.label }, tab.value))) }), _jsx("div", { className: `${classPrefix}-content`, children: tabItems.map((item) => (_jsx("div", { role: "tabpanel", className: `${classPrefix}-panel${item.value === activeValue ? ' active' : ''}`, hidden: item.value !== activeValue, children: item.content }, item.value))) })] }) }));
+    }
+    Tabs.displayName = contextName;
+    // provide TabItem for shared props extraction
+    function TabItem({ children }) {
+        const isInsideTabs = useContext(TabsContext);
+        // if used outside of Tabs context, render directly
+        if (!isInsideTabs) {
+            return _jsx("div", { className: tabItemClassName, children: children });
+        }
+        // render content via parent when inside Tabs
+        return _jsx(_Fragment, { children: children });
+    }
+    TabItem.displayName = `${contextName}TabItem`;
+    // hook to check if inside Tabs context
+    function useTabsContext() {
+        return useContext(TabsContext);
+    }
+    return { Tabs, TabItem, useTabsContext, TabsContext };
+}
+// factory for creating index-based Tabs components (Nextra style)
+// use items array instead of extracting tabs from children
+export function createIndexTabs(config, accessors) {
+    const { classPrefix, contextName } = config;
+    const { getLabel, isDisabled = () => false } = accessors;
+    const TabsContext = createContext(false);
+    TabsContext.displayName = `${contextName}Context`;
+    // tab subcomponent (compound component pattern)
+    function Tab({ children }) {
+        return _jsx(_Fragment, { children: children });
+    }
+    function TabsComponent({ children, items, defaultIndex = 0, selectedIndex: controlledIndex, storageKey, onChange, className, tabClassName, ...props }) {
+        const { activeIndex, setActiveIndex } = useIndexTabs({
+            items,
+            defaultIndex,
+            controlledIndex,
+            storageKey,
+            onChange,
+            isDisabled,
+        });
+        // refs for tab buttons to enable focus management
+        const tabRefs = useRef([]);
+        // handle keyboard navigation for tabs
+        const handleKeyDown = useCallback((e, currentIndex) => {
+            const tabCount = items.length;
+            let newIndex = currentIndex;
+            switch (e.key) {
+                case 'ArrowLeft':
+                case 'ArrowUp':
+                    // find previous non-disabled tab
+                    for (let i = 1; i <= tabCount; i++) {
+                        const idx = (currentIndex - i + tabCount) % tabCount;
+                        if (!isDisabled(items[idx])) {
+                            newIndex = idx;
+                            break;
+                        }
+                    }
+                    break;
+                case 'ArrowRight':
+                case 'ArrowDown':
+                    // find next non-disabled tab
+                    for (let i = 1; i <= tabCount; i++) {
+                        const idx = (currentIndex + i) % tabCount;
+                        if (!isDisabled(items[idx])) {
+                            newIndex = idx;
+                            break;
+                        }
+                    }
+                    break;
+                case 'Home':
+                    // find first non-disabled tab
+                    for (let i = 0; i < tabCount; i++) {
+                        if (!isDisabled(items[i])) {
+                            newIndex = i;
+                            break;
+                        }
+                    }
+                    break;
+                case 'End':
+                    // find last non-disabled tab
+                    for (let i = tabCount - 1; i >= 0; i--) {
+                        if (!isDisabled(items[i])) {
+                            newIndex = i;
+                            break;
+                        }
+                    }
+                    break;
+                default:
+                    return;
+            }
+            e.preventDefault();
+            setActiveIndex(newIndex);
+            tabRefs.current[newIndex]?.focus();
+        }, [items, setActiveIndex]);
+        // get Tab children for content panels
+        const tabChildren = Children.toArray(children).filter((child) => isValidElement(child) && child.type === Tab);
+        return (_jsx(TabsContext.Provider, { value: true, children: _jsxs("div", { className: cn(classPrefix, className), ...props, children: [_jsx("div", { className: `${classPrefix}-header`, role: "tablist", children: items.map((item, index) => {
+                            const label = getLabel(item);
+                            const disabled = isDisabled(item);
+                            const selected = index === activeIndex;
+                            const customClass = tabClassName
+                                ? typeof tabClassName === 'function'
+                                    ? tabClassName(index, selected)
+                                    : tabClassName
+                                : undefined;
+                            return (_jsx("button", { ref: (el) => {
+                                    tabRefs.current[index] = el;
+                                }, role: "tab", "aria-selected": selected, "aria-disabled": disabled, tabIndex: selected ? 0 : -1, className: cn(`${classPrefix}-button`, selected && `${classPrefix}-button-active`, disabled && `${classPrefix}-button-disabled`, customClass), onClick: () => setActiveIndex(index), onKeyDown: (e) => handleKeyDown(e, index), disabled: disabled, children: label }, index));
+                        }) }), _jsx("div", { className: `${classPrefix}-content`, children: tabChildren.map((child, index) => (_jsx("div", { role: "tabpanel", hidden: index !== activeIndex, className: `${classPrefix}-panel`, children: index === activeIndex && child }, index))) })] }) }));
+    }
+    const Tabs = Object.assign(TabsComponent, { Tab });
+    Tabs.displayName = contextName;
+    return { Tabs, TabsContext };
+}

package/dist/esm/components/base/CopyButton.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCopyToClipboard } from './useCopyToClipboard.js';
+import { COPY_ICONS } from './icons.js';
+// reusable copy-to-clipboard button w/ visual feedback
+export function CopyButton({ text, className = 'copy-button', copiedClassName = 'copied', }) {
+    const { copied, copy } = useCopyToClipboard();
+    const buttonClass = copied ? `${className} ${copiedClassName}` : className;
+    return (_jsx("button", { className: buttonClass, onClick: () => copy(text), title: copied ? 'Copied!' : 'Copy code', "aria-label": copied ? 'Copied!' : 'Copy code', children: _jsx("span", { dangerouslySetInnerHTML: {
+                __html: copied ? COPY_ICONS.check : COPY_ICONS.copy,
+            } }) }));
+}
+export default CopyButton;

package/dist/esm/components/base/createCollapsible.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// packages/webview-app/src/components/shims/base/createCollapsible.tsx
+// factory for creating framework-specific collapsible/details components
+import { useState, } from 'react';
+import { cn } from '../internal/cn.js';
+import { ChevronIcon } from './icons.js';
+// preset class configurations for each framework
+// class names for Generic Collapsible
+export const GENERIC_COLLAPSIBLE_CLASSES = {
+    container: 'mdx-preview-generic-collapsible',
+    summary: 'mdx-preview-generic-collapsible-summary',
+    icon: 'mdx-preview-generic-collapsible-icon',
+    iconOpen: 'open',
+    title: 'mdx-preview-generic-collapsible-title',
+    content: 'mdx-preview-generic-collapsible-content',
+};
+// class names for Docusaurus Details
+export const DOCUSAURUS_DETAILS_CLASSES = {
+    container: 'docusaurus-details',
+    summary: 'details-summary',
+    icon: 'details-toggle-icon',
+    iconOpen: 'expanded',
+    title: 'details-summary-text',
+    content: 'details-content',
+};
+// factory function to create framework-specific Collapsible components
+export function createCollapsible(config) {
+    const { classNames, iconSize = 16, useNativeToggle = true, applyOpenClassToWrapper = true, defaultSummary = 'Details', } = config;
+    function Collapsible({ children, summary, title, defaultOpen = false, open, className, }) {
+        // resolve prop aliases
+        const effectiveSummary = summary ?? title ?? defaultSummary;
+        const effectiveDefaultOpen = open ?? defaultOpen;
+        const [isOpen, setIsOpen] = useState(effectiveDefaultOpen);
+        // native toggle handler (Docusaurus pattern)
+        const handleNativeToggle = useNativeToggle
+            ? (e) => {
+                setIsOpen(e.target.open);
+            }
+            : undefined;
+        // custom click handler (Generic Collapsible pattern)
+        const handleSummaryClick = !useNativeToggle
+            ? (e) => {
+                e.preventDefault();
+                setIsOpen(!isOpen);
+            }
+            : undefined;
+        // prevent native toggle when using custom click handling
+        const handleDetailsClick = !useNativeToggle
+            ? (e) => {
+                if (e.target.tagName === 'SUMMARY') {
+                    e.preventDefault();
+                }
+            }
+            : undefined;
+        // determine icon class based on applyOpenClassToWrapper
+        const iconWrapperClass = applyOpenClassToWrapper
+            ? cn(classNames.icon, isOpen && classNames.iconOpen)
+            : classNames.icon;
+        const iconSvgClass = !applyOpenClassToWrapper && isOpen ? classNames.iconOpen : undefined;
+        return (_jsxs("details", { className: cn(classNames.container, className), "data-component": "collapsible", open: isOpen, onToggle: handleNativeToggle, onClick: handleDetailsClick, children: [_jsxs("summary", { className: classNames.summary, onClick: handleSummaryClick, children: [_jsx("span", { className: iconWrapperClass, children: _jsx(ChevronIcon, { size: iconSize, className: iconSvgClass }) }), _jsx("span", { className: classNames.title, children: effectiveSummary })] }), _jsx("div", { className: classNames.content, children: children })] }));
+    }
+    return Collapsible;
+}

package/dist/esm/components/base/createIconComponent.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// parse an SVG string to extract viewBox, style attributes & inner content
+// called once per icon at module load time (not per-render)
+function parseSvg(svgString) {
+    const viewBoxMatch = svgString.match(/viewBox="([^"]+)"/);
+    const fillMatch = svgString.match(/\sfill="([^"]+)"/);
+    const strokeMatch = svgString.match(/\sstroke="([^"]+)"/);
+    const strokeWidthMatch = svgString.match(/stroke-width="([^"]+)"/);
+    const strokeLinecapMatch = svgString.match(/stroke-linecap="([^"]+)"/);
+    const strokeLinejoinMatch = svgString.match(/stroke-linejoin="([^"]+)"/);
+    const innerMatch = svgString.match(/<svg[^>]*>([\s\S]*)<\/svg>/);
+    return {
+        viewBox: viewBoxMatch?.[1] ?? '0 0 24 24',
+        fill: fillMatch?.[1] ?? 'none',
+        stroke: strokeMatch?.[1],
+        strokeWidth: strokeWidthMatch?.[1],
+        strokeLinecap: strokeLinecapMatch?.[1],
+        strokeLinejoin: strokeLinejoinMatch?.[1],
+        innerHtml: innerMatch?.[1] ?? '',
+    };
+}
+// create a React icon component from a shared SVG string
+// parse the SVG once at module level for zero per-render overhead
+// inner content rendered via dangerouslySetInnerHTML (safe: compile-time constants)
+export function createIconComponent(svgString, defaultSize = 16) {
+    const parsed = parseSvg(svgString);
+    function IconComponent({ size = defaultSize, className, }) {
+        return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: parsed.viewBox, fill: parsed.fill, stroke: parsed.stroke, strokeWidth: parsed.strokeWidth, strokeLinecap: parsed.strokeLinecap, strokeLinejoin: parsed.strokeLinejoin, className: className, dangerouslySetInnerHTML: { __html: parsed.innerHtml } }));
+    }
+    return IconComponent;
+}

package/dist/esm/components/base/extractTextContent.js

@@ -0,0 +1,19 @@
+// packages/webview-app/src/components/shims/base/extractTextContent.ts
+// shared utility for extracting plain text from React children
+import { isValidElement } from 'react';
+// extract plain text content from React children
+export function extractTextContent(node) {
+    if (typeof node === 'string') {
+        return node;
+    }
+    if (typeof node === 'number') {
+        return String(node);
+    }
+    if (Array.isArray(node)) {
+        return node.map(extractTextContent).join('');
+    }
+    if (isValidElement(node)) {
+        return extractTextContent(node.props.children);
+    }
+    return '';
+}

package/dist/esm/components/base/icons.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CALLOUT_ICONS as SHARED_CALLOUT_ICONS, GITHUB_ICONS as SHARED_GITHUB_ICONS, FILE_TREE_ICONS as SHARED_FILE_TREE_ICONS, LUCIDE_ICONS as SHARED_LUCIDE_ICONS, } from '../../internal/icons.js';
+import { createIconComponent } from './createIconComponent.js';
+// re-export SVG icon registries from shared package
+export const CALLOUT_ICONS = SHARED_CALLOUT_ICONS;
+export const FILE_TREE_ICONS = SHARED_FILE_TREE_ICONS;
+export const GITHUB_ICONS = SHARED_GITHUB_ICONS;
+export const LUCIDE_ICONS = SHARED_LUCIDE_ICONS;
+// unified copy/check icons for clipboard functionality
+// use GitHub Primer style for consistency w/ code blocks
+export const COPY_ICONS = {
+    copy: GITHUB_ICONS.copy,
+    check: GITHUB_ICONS.check,
+};
+// JSX icon components derived from shared SVG strings
+// eliminates SVG path duplication between shared & webview packages
+// chevron icon (Lucide style) - used for collapsibles & tree views
+export const ChevronIcon = createIconComponent(FILE_TREE_ICONS.chevron, 16);
+// GitHub Primer style lightbulb icon - used for Nextra default callout
+export const LightbulbIcon = createIconComponent(GITHUB_ICONS.lightbulb, 16);
+// GitHub Primer style info icon - used for Nextra info callout
+export const InfoIconGitHub = createIconComponent(GITHUB_ICONS.info, 16);
+// GitHub Primer style warning icon - used for Nextra warning callout
+export const WarningIconGitHub = createIconComponent(GITHUB_ICONS.warning, 16);
+// GitHub Primer style error/octagon icon - used for Nextra error callout
+export const ErrorIconGitHub = createIconComponent(GITHUB_ICONS.error, 16);
+// GitHub Primer style comment/important icon - used for Nextra important callout
+export const ImportantIconGitHub = createIconComponent(GITHUB_ICONS.important, 16);
+// pre-create GitHub variant at module level (avoid per-render allocation)
+const GitHubArrowIcon = createIconComponent(GITHUB_ICONS.arrowRight, 16);
+const LucideArrowIcon = createIconComponent(LUCIDE_ICONS.arrowRight, 16);
+// arrow icon - used for link cards & navigation
+export function ArrowIcon({ size = 16, className, variant = 'lucide', }) {
+    if (variant === 'github') {
+        return _jsx(GitHubArrowIcon, { size: size, className: className });
+    }
+    return _jsx(LucideArrowIcon, { size: size, className: className });
+}
+// copy icon (Lucide style) - used for copy buttons
+export const CopyIcon = createIconComponent(LUCIDE_ICONS.copy, 16);
+// check icon (Lucide style) - used for copy confirmation
+export const CheckIcon = createIconComponent(LUCIDE_ICONS.check, 16);
+export const NEXTRA_CALLOUT_ICONS = {
+    default: LightbulbIcon,
+    info: InfoIconGitHub,
+    warning: WarningIconGitHub,
+    error: ErrorIconGitHub,
+    important: ImportantIconGitHub,
+};

package/dist/esm/components/base/index.js

@@ -0,0 +1,15 @@
+// packages/webview-app/src/components/shims/base/index.ts
+// barrel exports for base shim utilities
+export { useTabState, extractTabItems, } from './useTabState.js';
+export { createTabs, } from './BaseTabs.js';
+export { BaseCard } from './BaseCard.js';
+export { ArrowIcon } from './icons.js';
+export { useCopyToClipboard, } from './useCopyToClipboard.js';
+export { extractTextContent } from './extractTextContent.js';
+export { CopyButton } from './CopyButton.js';
+export { CALLOUT_ICONS, FILE_TREE_ICONS } from './icons.js';
+export { createCallout, } from './BaseCallout.js';
+export { createCodeBlock } from './BaseCodeBlock.js';
+export { createCollapsible, GENERIC_COLLAPSIBLE_CLASSES, DOCUSAURUS_DETAILS_CLASSES, } from './createCollapsible.js';
+// re-export generic callout normalization for discoverability
+export { normalizeCalloutType } from '../generic/types.js';

package/dist/esm/components/base/useCopyToClipboard.js

@@ -0,0 +1,17 @@
+// packages/webview-app/src/components/shims/base/useCopyToClipboard.ts
+// shared hook for copy-to-clipboard functionality
+import { useState, useCallback } from 'react';
+import { copyToClipboard } from '../internal/clipboard.js';
+import { CODE_COPY_FEEDBACK_DURATION_MS } from '../internal/constants.js';
+// hook for copy-to-clipboard functionality w/ visual feedback
+export function useCopyToClipboard() {
+    const [copied, setCopied] = useState(false);
+    const copy = useCallback(async (text) => {
+        const success = await copyToClipboard(text);
+        if (success) {
+            setCopied(true);
+            setTimeout(() => setCopied(false), CODE_COPY_FEEDBACK_DURATION_MS);
+        }
+    }, []);
+    return { copied, copy };
+}

package/dist/esm/components/base/useTabState.js

@@ -0,0 +1,113 @@
+// packages/webview-app/src/components/shims/base/useTabState.ts
+// shared hook for tab state management across framework shims
+import { useState, useCallback, isValidElement, Children, } from 'react';
+// extract TabItem children w/ their props
+export function extractTabItems(children) {
+    const items = [];
+    Children.forEach(children, (child) => {
+        if (!isValidElement(child)) {
+            return;
+        }
+        const props = child.props;
+        // accept either 'value' (Docusaurus) or 'label' (Starlight) as identifier
+        const value = props.value ?? props.label;
+        if (value !== undefined) {
+            items.push({
+                value,
+                label: props.label || value,
+                content: props.children,
+            });
+        }
+    });
+    return items;
+}
+// find default tab value from children
+function findDefaultFromChildren(children, tabItems) {
+    const childArray = Children.toArray(children);
+    for (const item of tabItems) {
+        const child = childArray.find((c) => isValidElement(c) && c.props.value === item.value);
+        if (child &&
+            isValidElement(child) &&
+            child.props.default) {
+            return item.value;
+        }
+    }
+    return undefined;
+}
+// hook for managing tab state
+// extract tab items from children, determine initial active value
+// & provide state management for tab selection
+export function useTabState(options) {
+    const { children, defaultValue, values } = options;
+    // extract tab items from children
+    const tabItems = extractTabItems(children);
+    // use provided values or extracted ones
+    const tabs = values ||
+        tabItems.map((item) => ({
+            value: item.value,
+            label: item.label,
+        }));
+    // determine initial active value
+    const initialValue = defaultValue ||
+        findDefaultFromChildren(children, tabItems) ||
+        tabs[0]?.value ||
+        '';
+    const [activeValue, setActiveValue] = useState(initialValue);
+    // ensure activeValue is valid (in case tabs change)
+    const validActiveValue = tabs.find((t) => t.value === activeValue)
+        ? activeValue
+        : tabs[0]?.value || '';
+    return {
+        activeValue: validActiveValue,
+        setActiveValue,
+        tabs,
+        tabItems,
+    };
+}
+export default useTabState;
+// hook for index-based tab state management
+export function useIndexTabs({ items, defaultIndex = 0, controlledIndex, storageKey, onChange, isDisabled = () => false, }) {
+    // get initial index from localStorage if storageKey is provided
+    const getInitialIndex = useCallback(() => {
+        if (storageKey && typeof window !== 'undefined') {
+            try {
+                const stored = localStorage.getItem(`nextra-tabs-${storageKey}`);
+                if (stored !== null) {
+                    const parsed = parseInt(stored, 10);
+                    if (!isNaN(parsed) && parsed >= 0 && parsed < items.length) {
+                        return parsed;
+                    }
+                }
+            }
+            catch {
+                // ignore localStorage errors
+            }
+        }
+        return defaultIndex;
+    }, [storageKey, defaultIndex, items.length]);
+    const [internalIndex, setInternalIndex] = useState(getInitialIndex);
+    const activeIndex = controlledIndex ?? internalIndex;
+    // handle tab selection
+    const setActiveIndex = useCallback((index) => {
+        // check if tab is disabled
+        if (items[index] !== undefined && isDisabled(items[index], index)) {
+            return;
+        }
+        // update internal state if not controlled
+        if (controlledIndex === undefined) {
+            setInternalIndex(index);
+        }
+        // save to localStorage if storageKey is provided
+        if (storageKey && typeof window !== 'undefined') {
+            try {
+                localStorage.setItem(`nextra-tabs-${storageKey}`, String(index));
+            }
+            catch {
+                // ignore localStorage errors
+            }
+        }
+        // call onChange callback
+        onChange?.(index);
+    }, [controlledIndex, items, isDisabled, onChange, storageKey]);
+    return { activeIndex, setActiveIndex };
+}

package/dist/esm/components/docusaurus/CodeBlock.js

@@ -0,0 +1,13 @@
+// packages/webview-app/src/components/shims/docusaurus/CodeBlock.tsx
+// Docusaurus CodeBlock component shim for MDX Preview
+// provide preview-compatible version of @theme/CodeBlock
+import { createCodeBlock } from '../base/BaseCodeBlock.js';
+// code block component using shared factory
+export const CodeBlock = createCodeBlock({
+    classPrefix: 'docusaurus-codeblock',
+    codeAsString: false,
+    supportsFrames: false,
+    showLangBadgeWithTitle: true,
+});
+// default export for compatibility
+export default CodeBlock;

package/dist/esm/components/docusaurus/Details.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// packages/webview-app/src/components/shims/docusaurus/Details.tsx
+// Docusaurus Details component shim for MDX Preview
+import { createCollapsible, DOCUSAURUS_DETAILS_CLASSES, } from '../base/createCollapsible.js';
+// create base details w/ Docusaurus configuration
+// use native toggle handling (more semantic)
+const BaseDetails = createCollapsible({
+    classNames: DOCUSAURUS_DETAILS_CLASSES,
+    iconSize: 14,
+    useNativeToggle: true,
+    applyOpenClassToWrapper: false,
+    defaultSummary: 'Details',
+});
+// Docusaurus Details component
+export function Details(props) {
+    return _jsx(BaseDetails, { ...props });
+}
+export default Details;

package/dist/esm/components/docusaurus/Tabs.js

@@ -0,0 +1,15 @@
+// packages/webview-app/src/components/shims/docusaurus/Tabs.tsx
+// Docusaurus Tabs/TabItem component shim for MDX Preview
+// provide preview-compatible versions of @theme/Tabs & @theme/TabItem
+import { createTabs, } from '../base/index.js';
+// create Docusaurus-compatible tabs using the factory
+// use 'mdx-preview-tabs' class prefix w/ 'docusaurus-tabs' wrapper
+// support groupId for tab synchronization
+const { Tabs, TabItem, useTabsContext, TabsContext } = createTabs({
+    classPrefix: 'mdx-preview-tabs',
+    wrapperClass: 'docusaurus-tabs',
+    supportsGroupId: true,
+    contextName: 'DocusaurusTabs',
+});
+export { Tabs, TabItem, useTabsContext, TabsContext };
+export default Tabs;

package/dist/esm/components/docusaurus/index.js

@@ -0,0 +1,3 @@
+export { Tabs, TabItem } from './Tabs.js';
+export { CodeBlock } from './CodeBlock.js';
+export { Details } from './Details.js';

package/dist/esm/components/generic/Callout.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createCallout } from '../base/BaseCallout.js';
+import { CALLOUT_TITLES, normalizeCalloutType } from './types.js';
+import { CALLOUT_ICONS } from '../base/icons.js';
+// create the base Callout using factory
+const BaseCallout = createCallout({
+    classPrefix: 'mdx-preview-generic-callout',
+    types: ['note', 'tip', 'warning', 'danger', 'info', 'caution', 'important'],
+    defaultType: 'note',
+    icons: { type: 'svg', icons: CALLOUT_ICONS },
+    defaultTitles: CALLOUT_TITLES,
+    layout: 'header',
+});
+// callout component w/ type normalization
+export function Callout(props) {
+    // normalize type aliases (success -> tip, error -> danger, etc.)
+    const normalizedType = normalizeCalloutType(props.type);
+    return _jsx(BaseCallout, { ...props, type: normalizedType });
+}
+// alert component (alias for Callout)
+export function Alert(props) {
+    return _jsx(Callout, { ...props });
+}
+// admonition component (alias for Callout, Docusaurus style)
+export function Admonition(props) {
+    return _jsx(Callout, { ...props });
+}
+export default Callout;

package/dist/esm/components/generic/CodeGroup.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// packages/webview-app/src/components/shims/generic/CodeGroup.tsx
+// Generic CodeGroup component shim for MDX Preview
+// provide tabbed code blocks w/o framework dependency
+import { Children, isValidElement, useState } from 'react';
+// extract label from code block element
+function extractLabelFromCodeBlock(child) {
+    const props = child.props;
+    // try various prop names used by different frameworks
+    if (typeof props.title === 'string') {
+        return props.title;
+    }
+    if (typeof props.label === 'string') {
+        return props.label;
+    }
+    if (typeof props.filename === 'string') {
+        return props.filename;
+    }
+    if (typeof props.language === 'string') {
+        return props.language;
+    }
+    if (typeof props.lang === 'string') {
+        return props.lang;
+    }
+    // try to get from className (e.g., "language-javascript")
+    if (typeof props.className === 'string') {
+        const match = props.className.match(/language-(\w+)/);
+        if (match) {
+            return match[1];
+        }
+    }
+    return 'Code';
+}
+// render tabbed code blocks from children
+export function CodeGroup({ children, labels }) {
+    const childArray = Children.toArray(children).filter(isValidElement);
+    const [activeIndex, setActiveIndex] = useState(0);
+    // extract tabs from children
+    const tabs = childArray.map((child, index) => {
+        const label = labels?.[index] || extractLabelFromCodeBlock(child);
+        return { label, content: child };
+    });
+    if (tabs.length === 0) {
+        return (_jsx("div", { className: "mdx-preview-generic-code-group-empty", children: children }));
+    }
+    // if only one code block, just render it directly
+    if (tabs.length === 1) {
+        return (_jsx("div", { className: "mdx-preview-generic-code-group", children: tabs[0].content }));
+    }
+    return (_jsxs("div", { className: "mdx-preview-generic-code-group", children: [_jsx("div", { className: "mdx-preview-generic-code-group-header", role: "tablist", children: tabs.map((tab, index) => (_jsx("button", { role: "tab", className: `mdx-preview-generic-code-group-button${index === activeIndex ? ' active' : ''}`, "aria-selected": index === activeIndex, onClick: () => setActiveIndex(index), tabIndex: index === activeIndex ? 0 : -1, children: tab.label }, index))) }), _jsx("div", { className: "mdx-preview-generic-code-group-content", children: tabs.map((tab, index) => (_jsx("div", { role: "tabpanel", className: `mdx-preview-generic-code-group-panel${index === activeIndex ? ' active' : ''}`, hidden: index !== activeIndex, children: tab.content }, index))) })] }));
+}
+export default CodeGroup;

package/dist/esm/components/generic/Collapsible.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// packages/webview-app/src/components/shims/generic/Collapsible.tsx
+// Generic Collapsible/Accordion component shim for MDX Preview
+import { createCollapsible, GENERIC_COLLAPSIBLE_CLASSES, } from '../base/createCollapsible.js';
+// create base collapsible w/ generic configuration
+// use custom click handling (prevent native toggle for more control)
+const BaseCollapsible = createCollapsible({
+    classNames: GENERIC_COLLAPSIBLE_CLASSES,
+    iconSize: 16,
+    useNativeToggle: false,
+    applyOpenClassToWrapper: true,
+});
+// generic Collapsible component
+export function Collapsible(props) {
+    return _jsx(BaseCollapsible, { ...props });
+}
+// accordion component (alias for Collapsible)
+export function Accordion(props) {
+    return _jsx(Collapsible, { ...props });
+}
+export default Collapsible;