{"_id":"@ameshkin/markdown-handler","name":"@ameshkin/markdown-handler","dist-tags":{"latest":"0.1.7"},"versions":{"0.1.7":{"name":"@ameshkin/markdown-handler","version":"0.1.7","description":"Simple React + MUI library for displaying markdown help files with left navigation and right content panel","type":"module","main":"./public/index.js","module":"./public/index.js","types":"./public/index.d.ts","scripts":{"dev":"vite","build":"vite build && npm run build:types","build:types":"tsc -p tsconfig.build.json","preview":"vite preview","typecheck":"tsc --noEmit","clean":"rm -rf public node_modules/.vite","test":"vitest","test:run":"vitest run","test:coverage":"vitest run --coverage","test:jasmine":"jasmine --config=spec/support/jasmine.json","test:jasmine:watch":"jasmine --config=spec/support/jasmine.json --watch","test:e2e":"playwright test","test:e2e:ui":"playwright test --ui","test:e2e:headed":"playwright test --headed","test:e2e:debug":"playwright test --debug","prepare":"husky","prepublishOnly":"npm run build","version:patch":"npm version patch","version:minor":"npm version minor","version:major":"npm version major"},"dependencies":{"@types/react-syntax-highlighter":"^15.5.13","react":"^18.0.0","react-dom":"^18.0.0","react-markdown":"^9.0.1","react-syntax-highlighter":"^16.1.0","remark-gfm":"^4.0.0"},"devDependencies":{"@emotion/react":"^11.13.0","@emotion/styled":"^11.13.0","@mui/icons-material":"^7.0.0","@mui/material":"^7.0.0","@playwright/test":"^1.57.0","@testing-library/jest-dom":"^6.9.1","@testing-library/react":"^16.3.0","@testing-library/user-event":"^14.6.1","@types/jasmine":"^5.1.13","@types/react":"^18.2.0","@types/react-dom":"^18.2.0","@vitejs/plugin-react":"^4.3.1","husky":"^9.1.7","jasmine":"^5.13.0","jsdom":"^27.3.0","ts-node":"^10.9.2","typescript":"^5.0.0","vite":"^7.2.7","vitest":"^4.0.15"},"peerDependencies":{"react":"^18.0.0","react-dom":"^18.0.0"},"peerDependenciesMeta":{"@mui/material":{"optional":true},"@mui/icons-material":{"optional":true},"@emotion/react":{"optional":true},"@emotion/styled":{"optional":true}},"publishConfig":{"access":"public"},"keywords":["markdown","docs","help","documentation","react","mui"],"author":{"name":"Amir Meshkin"},"license":"MIT","gitHead":"9d2cab0bcc2a13e025e06088d3c8b99e82176611","_id":"@ameshkin/markdown-handler@0.1.7","_nodeVersion":"24.11.1","_npmVersion":"11.6.2","dist":{"integrity":"sha512-RmEnUwxS06suWrkSrhte7Ij2OMw84ZOYEeNLWsefO2XlBeFnfqBvZpx1sEtHdtLCCTj+PLX0nAkXi7RT7aUngA==","shasum":"9661db4e9112fb2b983e503e51c36158af8fca6a","tarball":"https://registry.npmjs.org/@ameshkin/markdown-handler/-/markdown-handler-0.1.7.tgz","fileCount":41,"unpackedSize":209548,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIDFY0Q6OX+BV9D6JNbRVjjj1t6udNxyxnUHlY9zx9Es5AiEAg4YLviZaQux1nirK3anuRlxzcYlbfPNb26P8ZWyHyi0="}]},"_npmUser":{"name":"nevaro","email":"amir.meshkin@gmail.com"},"directories":{},"maintainers":[{"name":"nevaro","email":"amir.meshkin@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/markdown-handler_0.1.7_1765509784635_0.6088897627591543"},"_hasShrinkwrap":false}},"time":{"created":"2025-12-12T03:23:04.520Z","0.1.7":"2025-12-12T03:23:04.797Z","modified":"2025-12-12T03:23:05.146Z"},"maintainers":[{"name":"nevaro","email":"amir.meshkin@gmail.com"}],"description":"Simple React + MUI library for displaying markdown help files with left navigation and right content panel","keywords":["markdown","docs","help","documentation","react","mui"],"author":{"name":"Amir Meshkin"},"license":"MIT","readme":"# @ameshkin/markdown-handler\n\nSimple React library for displaying markdown help files with left navigation and right content panel.\n\n**Works with or without MUI!** Choose the vanilla version for zero UI dependencies, or use the MUI version for Material Design components.\n\n## Features\n\n- 📄 **Markdown Rendering** - Uses `react-markdown` with GitHub Flavored Markdown support\n- 🎨 **Material-UI** - Beautiful, responsive UI with MUI components\n- 📑 **Tree Navigation** - Collapsible sidebar with file tree structure\n- 📱 **Responsive** - Works on mobile and desktop\n- 🎯 **Simple API** - Easy to integrate into any React app\n- 🎨 **Syntax Highlighting** - Code blocks with syntax highlighting and copy buttons\n- 📊 **MUI Tables** - Markdown tables rendered as proper MUI Table components\n- 🌈 **Theme Support** - Full MUI theme integration with dark/light mode\n- 🎨 **7 Pre-built Templates** - Choose from minimal, modern, classic, dark, compact, wide, and centered\n- 🔍 **Search Functionality** - Built-in search to filter navigation tree\n- 🧭 **Breadcrumbs** - Easy navigation with breadcrumb trails\n- 🎛️ **Customizable** - Header, footer, and full template customization\n\n## Installation\n\n### Vanilla Version (No MUI Required)\n\n```bash\nnpm install @ameshkin/markdown-handler react-syntax-highlighter\n```\n\n**No additional dependencies needed!** The vanilla version uses plain CSS and React.\n\n### MUI Version (Optional)\n\nIf you want to use the MUI version with Material Design components:\n\n```bash\nnpm install @ameshkin/markdown-handler react-syntax-highlighter @mui/material @mui/icons-material @emotion/react @emotion/styled\n```\n\n**Note:** `react-syntax-highlighter` is required for code highlighting in both versions.\n\n## Quick Start\n\n### Choose Your Version\n\n- **Vanilla Version** - No MUI required, uses plain CSS. Perfect for projects without Material-UI.\n- **MUI Version** - Full Material Design components with themes and templates.\n\n### Vanilla Version (No Dependencies)\n\n```tsx\nimport { MarkdownDocsViewerVanilla } from '@ameshkin/markdown-handler';\nimport '@ameshkin/markdown-handler/dist/style.css'; // Import CSS\n\nfunction App() {\n  return (\n    <MarkdownDocsViewerVanilla\n      tree={tree}\n      content={content}\n      currentPath={currentPath}\n      onDocClick={setCurrentPath}\n      enableSearch={true}\n      enableBreadcrumbs={true}\n    />\n  );\n}\n```\n\n### MUI Version\n\n```tsx\nimport { MarkdownDocsViewer } from '@ameshkin/markdown-handler';\n\nfunction App() {\n  return (\n    <MarkdownDocsViewer\n      tree={tree}\n      content={content}\n      currentPath={currentPath}\n      onDocClick={setCurrentPath}\n      template=\"modern\"\n    />\n  );\n}\n```\n\n### 1. Understanding the Data Structure\n\nThe component requires two main pieces of data:\n\n#### Tree Structure (`DocNode[]`)\n\nThe tree defines your documentation navigation structure. Each node can be:\n- **A folder** (has `children` array)\n- **A file** (has `isFile: true`)\n\n```typescript\nimport type { DocNode } from '@ameshkin/markdown-handler';\n\nconst tree: DocNode[] = [\n  {\n    name: 'Getting Started',        // Display name in sidebar\n    path: 'getting-started',        // Unique identifier (used for highlighting/clicking)\n    children: [                     // This is a folder\n      {\n        name: 'Installation',\n        path: 'getting-started/installation',\n        isFile: true,              // This is a file\n      },\n      {\n        name: 'Quick Start',\n        path: 'getting-started/quick-start',\n        isFile: true,\n      },\n    ],\n  },\n  {\n    name: 'API Reference',\n    path: 'api',\n    children: [\n      {\n        name: 'Components',\n        path: 'api/components',\n        isFile: true,\n      },\n      {\n        name: 'Utilities',\n        path: 'api/utilities',\n        isFile: true,\n      },\n    ],\n  },\n  {\n    name: 'Examples',\n    path: 'examples',\n    isFile: true,                  // Can also be a file at root level\n  },\n];\n```\n\n#### Markdown Content (`string`)\n\nThe content is just a markdown string that gets rendered:\n\n```typescript\nconst content = `# Getting Started\n\nWelcome to the documentation!\n\n## Installation\n\n\\`\\`\\`bash\nnpm install @ameshkin/markdown-handler\n\\`\\`\\`\n\n## Features\n\n- 📄 Markdown rendering\n- 🎨 Beautiful UI\n- 📑 Tree navigation\n\n## Code Example\n\n\\`\\`\\`typescript\ninterface DocNode {\n  name: string;\n  path: string;\n  children?: DocNode[];\n  isFile?: boolean;\n}\n\\`\\`\\`\n\n## Table Example\n\n| Feature | Status |\n|---------|--------|\n| Markdown | ✅ |\n| Navigation | ✅ |\n| Responsive | ✅ |\n`;\n```\n\n### 2. Basic Usage\n\n#### Vanilla Version\n\n```tsx\nimport { useState } from 'react';\nimport { MarkdownDocsViewerVanilla } from '@ameshkin/markdown-handler';\nimport '@ameshkin/markdown-handler/dist/style.css';\nimport type { DocNode } from '@ameshkin/markdown-handler';\n\nfunction App() {\n  const [currentPath, setCurrentPath] = useState('getting-started/installation');\n  \n  return (\n    <MarkdownDocsViewerVanilla\n      tree={tree}\n      content={content}\n      currentPath={currentPath}\n      onDocClick={setCurrentPath}\n    />\n  );\n}\n```\n\n#### MUI Version\n\n```tsx\nimport { useState } from 'react';\nimport { MarkdownDocsViewer } from '@ameshkin/markdown-handler';\nimport type { DocNode } from '@ameshkin/markdown-handler';\n\nfunction App() {\n  const [currentPath, setCurrentPath] = useState('getting-started/installation');\n  \n  // Your tree structure\n  const tree: DocNode[] = [\n    {\n      name: 'Getting Started',\n      path: 'getting-started',\n      children: [\n        {\n          name: 'Installation',\n          path: 'getting-started/installation',\n          isFile: true,\n        },\n        {\n          name: 'Quick Start',\n          path: 'getting-started/quick-start',\n          isFile: true,\n        },\n      ],\n    },\n  ];\n\n  // Your markdown content (load this based on currentPath)\n  const content = `# Installation\n\nInstall the package:\n\n\\`\\`\\`bash\nnpm install @ameshkin/markdown-handler\n\\`\\`\\`\n`;\n\n  return (\n    <MarkdownDocsViewer\n      tree={tree}\n      content={content}\n      currentPath={currentPath}\n      onDocClick={(path) => {\n        setCurrentPath(path);\n        // Load content for the selected path here\n        console.log('User clicked:', path);\n      }}\n    />\n  );\n}\n```\n\n### 3. Complete Example with Content Loading\n\nHere's a full example showing how to load different content based on the selected path:\n\n```tsx\nimport { useState, useMemo } from 'react';\nimport { MarkdownDocsViewer } from '@ameshkin/markdown-handler';\nimport type { DocNode } from '@ameshkin/markdown-handler';\n\n// Define your documentation content\nconst docsContent: Record<string, string> = {\n  'getting-started/installation': `# Installation\n\nInstall the package:\n\n\\`\\`\\`bash\nnpm install @ameshkin/markdown-handler react-syntax-highlighter\n\\`\\`\\`\n\n## Peer Dependencies\n\nMake sure you have React and MUI installed:\n\n\\`\\`\\`bash\nnpm install react react-dom @mui/material @mui/icons-material\n\\`\\`\\`\n`,\n\n  'getting-started/quick-start': `# Quick Start\n\nHere's a simple example:\n\n\\`\\`\\`tsx\nimport { MarkdownDocsViewer } from '@ameshkin/markdown-handler';\n\nfunction App() {\n  return (\n    <MarkdownDocsViewer\n      tree={tree}\n      content={content}\n      currentPath=\"getting-started\"\n    />\n  );\n}\n\\`\\`\\`\n\n## Next Steps\n\n1. Set up your tree structure\n2. Load your markdown content\n3. Handle the \\`onDocClick\\` callback\n`,\n\n  'api/components': `# Components\n\n## MarkdownDocsViewer\n\nThe main component for displaying documentation.\n\n### Props\n\n| Prop | Type | Required | Description |\n|------|------|----------|-------------|\n| tree | DocNode[] | Yes | Navigation tree structure |\n| content | string | Yes | Markdown content to display |\n| currentPath | string | No | Active path for highlighting |\n| onDocClick | function | No | Callback when item is clicked |\n| theme | Theme \\| 'default' | No | MUI theme override |\n`,\n\n  'api/utilities': `# Utilities\n\nHelper functions for building documentation trees.\n\n\\`\\`\\`typescript\nimport { buildDocsTree, getDocContent } from '@ameshkin/markdown-handler/utils';\n\\`\\`\\`\n`,\n};\n\n// Define your tree structure\nconst tree: DocNode[] = [\n  {\n    name: 'Getting Started',\n    path: 'getting-started',\n    children: [\n      {\n        name: 'Installation',\n        path: 'getting-started/installation',\n        isFile: true,\n      },\n      {\n        name: 'Quick Start',\n        path: 'getting-started/quick-start',\n        isFile: true,\n      },\n    ],\n  },\n  {\n    name: 'API Reference',\n    path: 'api',\n    children: [\n      {\n        name: 'Components',\n        path: 'api/components',\n        isFile: true,\n      },\n      {\n        name: 'Utilities',\n        path: 'api/utilities',\n        isFile: true,\n      },\n    ],\n  },\n];\n\nfunction App() {\n  const [currentPath, setCurrentPath] = useState('getting-started/installation');\n\n  // Get content for current path\n  const content = useMemo(() => {\n    return docsContent[currentPath] || '# Page Not Found\\n\\nThis page does not exist.';\n  }, [currentPath]);\n\n  return (\n    <MarkdownDocsViewer\n      tree={tree}\n      content={content}\n      currentPath={currentPath}\n      onDocClick={(path) => {\n        setCurrentPath(path);\n      }}\n    />\n  );\n}\n```\n\n### 4. With MUI Theme\n\nThe component integrates with MUI's theme system. You can:\n\n#### Option A: Use Parent ThemeProvider (Recommended)\n\n```tsx\nimport { ThemeProvider, createTheme, CssBaseline } from '@mui/material';\nimport { MarkdownDocsViewer } from '@ameshkin/markdown-handler';\n\nconst theme = createTheme({\n  palette: {\n    mode: 'dark',  // or 'light'\n    primary: {\n      main: '#1976d2',\n    },\n  },\n});\n\nfunction App() {\n  return (\n    <ThemeProvider theme={theme}>\n      <CssBaseline />\n      <MarkdownDocsViewer\n        tree={tree}\n        content={content}\n        currentPath={currentPath}\n        onDocClick={handleClick}\n      />\n    </ThemeProvider>\n  );\n}\n```\n\n#### Option B: Use Default Theme\n\n```tsx\nimport { MarkdownDocsViewer } from '@ameshkin/markdown-handler';\n\nfunction App() {\n  return (\n    <MarkdownDocsViewer\n      tree={tree}\n      content={content}\n      currentPath={currentPath}\n      onDocClick={handleClick}\n      theme=\"default\"  // Uses MUI's default theme\n    />\n  );\n}\n```\n\n#### Option C: Pass Custom Theme\n\n```tsx\nimport { createTheme } from '@mui/material';\nimport { MarkdownDocsViewer } from '@ameshkin/markdown-handler';\n\nconst customTheme = createTheme({\n  palette: {\n    mode: 'dark',\n    primary: {\n      main: '#ff6b6b',\n    },\n  },\n});\n\nfunction App() {\n  return (\n    <MarkdownDocsViewer\n      tree={tree}\n      content={content}\n      currentPath={currentPath}\n      onDocClick={handleClick}\n      theme={customTheme}  // Uses your custom theme\n    />\n  );\n}\n```\n\n## Vanilla vs MUI Version\n\n### When to Use Vanilla Version\n\n- ✅ You don't want to install MUI dependencies\n- ✅ You want a smaller bundle size\n- ✅ You prefer plain CSS styling\n- ✅ You want full control over styling\n- ✅ You're building a lightweight application\n\n### When to Use MUI Version\n\n- ✅ You're already using Material-UI in your project\n- ✅ You want pre-built templates and themes\n- ✅ You want Material Design components\n- ✅ You need advanced theming capabilities\n\n### Feature Comparison\n\n| Feature | Vanilla | MUI |\n|---------|---------|-----|\n| Zero UI Dependencies | ✅ | ❌ |\n| Search | ✅ | ✅ |\n| Breadcrumbs | ✅ | ✅ |\n| Syntax Highlighting | ✅ | ✅ |\n| Code Copy Buttons | ✅ | ✅ |\n| Responsive | ✅ | ✅ |\n| Dark Mode | ✅ (System) | ✅ (Full Control) |\n| Templates | ❌ | ✅ (7 templates) |\n| Custom Themes | ❌ | ✅ |\n| Custom Header/Footer | ✅ | ✅ |\n\n## Templates (MUI Version Only)\n\nThe MUI version includes 7 pre-built templates that you can use out of the box:\n\n### Available Templates\n\n1. **Minimal** - Clean and simple design with minimal styling\n2. **Modern** - Contemporary design with subtle shadows and rounded corners\n3. **Classic** - Traditional documentation style with clear hierarchy\n4. **Dark** - Dark theme optimized for low-light environments\n5. **Compact** - Space-efficient layout for dense documentation\n6. **Wide** - Maximum width layout for large screens\n7. **Centered** - Centered content with generous margins\n\n### Using Templates\n\n#### Simple Template Usage\n\n```tsx\nimport { MarkdownDocsViewer } from '@ameshkin/markdown-handler';\n\nfunction App() {\n  return (\n    <MarkdownDocsViewer\n      tree={tree}\n      content={content}\n      template=\"modern\"  // Use a pre-built template\n    />\n  );\n}\n```\n\n#### Custom Template Configuration\n\n```tsx\nimport { MarkdownDocsViewer } from '@ameshkin/markdown-handler';\nimport type { TemplateConfig } from '@ameshkin/markdown-handler';\n\nconst customTemplate: TemplateConfig = {\n  name: 'Custom',\n  description: 'My custom template',\n  variant: 'modern',\n  sidebarWidth: 350,\n  showSearch: true,\n  showBreadcrumbs: true,\n  contentMaxWidth: 1200,\n  sidebarStyle: 'elevated',\n  contentStyle: 'elevated',\n};\n\nfunction App() {\n  return (\n    <MarkdownDocsViewer\n      tree={tree}\n      content={content}\n      template={customTemplate}  // Use custom template\n    />\n  );\n}\n```\n\n#### Template Features\n\nEach template can include:\n- **Search** - Filter navigation tree by name\n- **Breadcrumbs** - Show navigation path\n- **Custom Styles** - Elevated, flat, or outlined\n- **Custom Widths** - Sidebar and content widths\n- **Theme** - Built-in light/dark themes\n\n### Template Showcase\n\nTo see all templates in action, check out the template showcase:\n\n```tsx\nimport { TemplateShowcaseApp } from '@ameshkin/markdown-handler/pages/TemplateShowcase';\n\nfunction App() {\n  return <TemplateShowcaseApp />;\n}\n```\n\nOr run the demo:\n\n```bash\nnpm run dev\n```\n\n## Search and Breadcrumbs\n\n### Enable Search\n\n```tsx\n<MarkdownDocsViewer\n  tree={tree}\n  content={content}\n  enableSearch={true}  // Enable search functionality\n/>\n```\n\n### Enable Breadcrumbs\n\n```tsx\n<MarkdownDocsViewer\n  tree={tree}\n  content={content}\n  enableBreadcrumbs={true}  // Enable breadcrumb navigation\n/>\n```\n\n### Both Features\n\n```tsx\n<MarkdownDocsViewer\n  tree={tree}\n  content={content}\n  template=\"modern\"  // Templates can include these features\n  enableSearch={true}\n  enableBreadcrumbs={true}\n/>\n```\n\n## Custom Header and Footer\n\nYou can add custom header and footer components:\n\n```tsx\n<MarkdownDocsViewer\n  tree={tree}\n  content={content}\n  header={\n    <div style={{ padding: '16px', background: '#f5f5f5' }}>\n      <h2>Custom Header</h2>\n    </div>\n  }\n  footer={\n    <div style={{ padding: '16px', textAlign: 'center' }}>\n      <p>© 2024 Your Company</p>\n    </div>\n  }\n/>\n```\n\n## Custom Styling with sx Props\n\nYou can use MUI's `sx` prop to customize styling at different levels:\n\n```tsx\n<MarkdownDocsViewer\n  tree={tree}\n  content={content}\n  // Style the root container\n  sx={{\n    backgroundColor: 'grey.100',\n    padding: 2,\n  }}\n  // Style the sidebar\n  sidebarSx={{\n    backgroundColor: 'primary.light',\n    borderRight: '2px solid',\n    borderColor: 'primary.main',\n  }}\n  // Style the content area\n  contentSx={{\n    backgroundColor: 'background.paper',\n    borderRadius: 2,\n  }}\n/>\n```\n\nThe `sx` prop supports all MUI theme-aware styling, including:\n- Colors (theme palette)\n- Spacing (theme spacing units)\n- Typography\n- Breakpoints (responsive design)\n- And more!\n\n## API Reference\n\n### `MarkdownDocsViewer`\n\nMain component for displaying markdown documentation.\n\n#### Props\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `tree` | `DocNode[]` | **required** | Tree structure of documentation files |\n| `content` | `string` | **required** | Markdown content to display |\n| `currentPath` | `string` | `''` | Current path (for highlighting active item) |\n| `onDocClick` | `(path: string) => void` | `undefined` | Callback when a doc item is clicked |\n| `sidebarTitle` | `string` | `'Documentation'` | Title for the sidebar |\n| `sidebarWidth` | `number` | `280` | Width of the sidebar in pixels |\n| `theme` | `Theme \\| 'default'` | `undefined` | MUI theme override. If not provided, uses parent ThemeProvider or default |\n| `template` | `TemplateVariant \\| TemplateConfig` | `undefined` | Template variant or custom template configuration |\n| `enableSearch` | `boolean` | `false` | Enable search functionality in sidebar |\n| `enableBreadcrumbs` | `boolean` | `false` | Enable breadcrumbs navigation |\n| `header` | `React.ReactNode` | `undefined` | Custom header component |\n| `footer` | `React.ReactNode` | `undefined` | Custom footer component |\n| `sx` | `SxProps<Theme>` | `undefined` | MUI sx prop for styling the root container |\n| `sidebarSx` | `SxProps<Theme>` | `undefined` | MUI sx prop for styling the sidebar Paper component |\n| `contentSx` | `SxProps<Theme>` | `undefined` | MUI sx prop for styling the content Paper component |\n\n### `DocNode`\n\n```typescript\ninterface DocNode {\n  name: string;           // Display name in sidebar\n  path: string;           // Unique path identifier (used for highlighting/clicking)\n  children?: DocNode[];   // Child nodes (for directories/folders)\n  isFile?: boolean;       // Whether this is a file (vs directory)\n}\n```\n\n### `TemplateConfig`\n\n```typescript\ninterface TemplateConfig {\n  name: string;\n  description: string;\n  variant: TemplateVariant;\n  theme?: Theme | 'default';\n  sidebarWidth?: number;\n  sidebarPosition?: 'left' | 'right';\n  showSearch?: boolean;\n  showBreadcrumbs?: boolean;\n  headerHeight?: number;\n  contentMaxWidth?: number | 'full';\n  sidebarStyle?: 'elevated' | 'flat' | 'outlined';\n  contentStyle?: 'elevated' | 'flat' | 'outlined';\n}\n\ntype TemplateVariant = \n  | 'minimal'\n  | 'modern'\n  | 'classic'\n  | 'dark'\n  | 'compact'\n  | 'wide'\n  | 'centered';\n```\n\n### Template Utilities\n\n```typescript\nimport { templates, getTemplate, getAllTemplates } from '@ameshkin/markdown-handler';\n\n// Get all available templates\nconst allTemplates = getAllTemplates();\n\n// Get a specific template\nconst modernTemplate = getTemplate('modern');\n```\n\n**Important Notes:**\n- `path` should be unique across all nodes\n- If a node has `children`, it's treated as a folder (can be expanded/collapsed)\n- If `isFile: true`, clicking it will call `onDocClick` with the path\n- Folders without `isFile: true` can also be clickable if they represent a page\n\n## Markdown Features\n\nThe component supports all standard markdown features plus:\n\n### Code Blocks with Syntax Highlighting\n\nCode blocks automatically get:\n- Syntax highlighting (based on language)\n- Copy button\n- Language label\n\n\\`\\`\\`typescript\n// Example TypeScript code\ninterface User {\n  name: string;\n  age: number;\n}\n\\`\\`\\`\n\nSupported languages: TypeScript, JavaScript, Python, Bash, JSON, CSS, HTML, and many more.\n\n### Tables\n\nTables are rendered as proper MUI Table components:\n\n| Feature | Status | Notes |\n|---------|--------|-------|\n| Syntax Highlighting | ✅ | With copy button |\n| MUI Tables | ✅ | Responsive |\n| Theme Support | ✅ | Dark/Light mode |\n\n### Inline Code\n\nInline code uses \\`backticks\\` and gets styled automatically.\n\n### Other Features\n\n- Headings (H1-H6)\n- Lists (ordered and unordered)\n- Blockquotes\n- Links\n- Images\n- GitHub Flavored Markdown (GFM) features\n\n## Data Structure Examples\n\n### Simple Flat Structure\n\n```typescript\nconst tree: DocNode[] = [\n  { name: 'Home', path: 'home', isFile: true },\n  { name: 'About', path: 'about', isFile: true },\n  { name: 'Contact', path: 'contact', isFile: true },\n];\n```\n\n### Nested Structure\n\n```typescript\nconst tree: DocNode[] = [\n  {\n    name: 'Documentation',\n    path: 'docs',\n    children: [\n      {\n        name: 'Guides',\n        path: 'docs/guides',\n        children: [\n          { name: 'Getting Started', path: 'docs/guides/getting-started', isFile: true },\n          { name: 'Advanced', path: 'docs/guides/advanced', isFile: true },\n        ],\n      },\n      {\n        name: 'API',\n        path: 'docs/api',\n        children: [\n          { name: 'Components', path: 'docs/api/components', isFile: true },\n          { name: 'Hooks', path: 'docs/api/hooks', isFile: true },\n        ],\n      },\n    ],\n  },\n];\n```\n\n### Mixed Structure\n\n```typescript\nconst tree: DocNode[] = [\n  {\n    name: 'Introduction',\n    path: 'intro',\n    isFile: true,  // Can be a file\n  },\n  {\n    name: 'Tutorials',\n    path: 'tutorials',\n    children: [    // Or a folder\n      { name: 'Part 1', path: 'tutorials/part-1', isFile: true },\n      { name: 'Part 2', path: 'tutorials/part-2', isFile: true },\n    ],\n  },\n];\n```\n\n## Styling\n\nAll styles use MUI's theme system - no hardcoded colors or values. The component automatically adapts to:\n- Dark/Light mode\n- Custom theme colors\n- Custom typography\n- Custom spacing\n\n## Development\n\n```bash\n# Install dependencies\nnpm install\n\n# Run dev server\nnpm run dev\n\n# Build library\nnpm run build\n\n# Type check\nnpm run typecheck\n```\n\n## License\n\nMIT\n","readmeFilename":"README.md","_rev":"1-8700c145ecdce1bd63085d044094e1a7"}