{child}
@@ -72,16 +76,16 @@ export interface PreWithCodeButtonGroupProps
* expected wrapped pre element is:
* ```html
*
- *
test.js
- *
+ *
test.js
+ *
diff --git a/packages/theme-default/src/components/FileTree/index.scss b/packages/theme-default/src/components/FileTree/index.scss
new file mode 100644
index 000000000..f73c6b61a
--- /dev/null
+++ b/packages/theme-default/src/components/FileTree/index.scss
@@ -0,0 +1,114 @@
+.rp-file-tree {
+ display: flex;
+ border: var(--rp-code-block-border);
+ border-radius: var(--rp-radius);
+ overflow: hidden;
+ background-color: var(--rp-code-block-bg);
+
+ &__sidebar {
+ flex: 0 0 220px;
+ box-sizing: border-box;
+ max-width: 100%;
+ border-right: var(--rp-code-block-border);
+ background-color: var(--rp-code-title-bg);
+ padding: 12px 16px;
+ overflow-y: auto;
+ }
+
+ &__content {
+ flex: 1 1 auto;
+ min-width: 0;
+ padding: 12px 16px;
+ background-color: var(--rp-code-block-bg);
+ overflow-x: auto;
+
+ .rp-codeblock {
+ border: none;
+ border-radius: 0;
+ padding: 0;
+ margin: 0;
+ .rp-codeblock__title {
+ display: none;
+ }
+ }
+ }
+
+ &__list {
+ margin: 0;
+ padding: 0;
+ list-style: none;
+
+ & & {
+ margin-top: 4px;
+ padding-left: 12px;
+ border-left: 1px solid rgba(0, 0, 0, 0.05);
+ }
+
+ .dark & & {
+ border-left: 1px solid rgba(255, 255, 255, 0.08);
+ }
+ }
+
+ &__item {
+ margin: 2px 0;
+ }
+
+ &__dir {
+ font-size: 13px;
+ font-weight: 600;
+ color: var(--rp-c-text-2);
+ padding: 4px 0;
+
+ &--active {
+ color: var(--rp-c-text-1);
+ }
+ }
+
+ &__file {
+ width: 100%;
+ text-align: left;
+ border: none;
+ background: none;
+ padding: 6px 8px;
+ border-radius: var(--rp-radius-small);
+ color: var(--rp-c-text-1);
+ font-size: 13px;
+ line-height: 1.4;
+ cursor: pointer;
+ transition:
+ background-color 0.2s ease,
+ color 0.2s ease;
+
+ &:hover,
+ &:focus {
+ background-color: var(--rp-c-brand-tint);
+ color: var(--rp-c-text-1);
+ }
+
+ &:focus-visible {
+ outline: 2px solid var(--rp-c-brand);
+ outline-offset: 2px;
+ }
+
+ &--active {
+ background-color: var(--rp-c-brand-tint);
+ color: var(--rp-c-brand-dark);
+ font-weight: 600;
+ }
+ }
+
+ @media (max-width: 960px) {
+ flex-direction: column;
+
+ &__sidebar {
+ flex: none;
+ width: 100%;
+ border-right: none;
+ border-bottom: var(--rp-code-block-border);
+ }
+
+ &__content {
+ padding-top: 8px;
+ }
+ }
+}
diff --git a/packages/theme-default/src/components/FileTree/index.tsx b/packages/theme-default/src/components/FileTree/index.tsx
new file mode 100644
index 000000000..591d0e006
--- /dev/null
+++ b/packages/theme-default/src/components/FileTree/index.tsx
@@ -0,0 +1,216 @@
+import clsx from 'clsx';
+import {
+ Children,
+ type CSSProperties,
+ cloneElement,
+ isValidElement,
+ type ReactElement,
+ type ReactNode,
+ useEffect,
+ useMemo,
+ useState,
+} from 'react';
+import './index.scss';
+
+interface FileEntry {
+ id: string;
+ path: string;
+ label: string;
+ segments: string[];
+ fullTitle: string;
+ element: ReactElement;
+}
+
+interface TreeNode {
+ name: string;
+ path: string;
+ isFile: boolean;
+ fileId?: string;
+ children: TreeNode[];
+}
+
+export interface FileTreeProps {
+ children: ReactNode;
+ className?: string;
+ style?: CSSProperties;
+}
+
+function buildTree(entries: FileEntry[]): TreeNode[] {
+ const root: TreeNode = {
+ name: '',
+ path: '',
+ isFile: false,
+ children: [],
+ };
+
+ entries.forEach(entry => {
+ let current = root;
+ entry.segments.forEach((segment, index) => {
+ const isLast = index === entry.segments.length - 1;
+ const nextPath = current.path ? `${current.path}/${segment}` : segment;
+ let child = current.children.find(
+ node => node.name === segment && node.isFile === isLast,
+ );
+
+ if (!child) {
+ child = {
+ name: segment,
+ path: nextPath,
+ isFile: isLast,
+ fileId: isLast ? entry.id : undefined,
+ children: [],
+ };
+ current.children.push(child);
+ }
+
+ if (isLast) {
+ child.isFile = true;
+ child.fileId = entry.id;
+ }
+
+ current = child;
+ });
+ });
+
+ return root.children;
+}
+
+export function FileTree({ children, className, style }: FileTreeProps) {
+ const entries = useMemo
(() => {
+ const normalized: FileEntry[] = [];
+
+ Children.forEach(children, (child, index) => {
+ if (!isValidElement(child)) return;
+ console.log(child.props, 111111);
+
+ const { title: rawTitle } = (child.props as any).children?.props as {
+ title?: string;
+ };
+ const trimmedTitle = typeof rawTitle === 'string' ? rawTitle.trim() : '';
+ const fallbackLabel = `File ${normalized.length + 1}`;
+ const sourceForSegments = trimmedTitle || fallbackLabel;
+ const segments = sourceForSegments
+ .split('/')
+ .map(segment => segment.trim())
+ .filter(Boolean);
+
+ if (!segments.length) {
+ segments.push(fallbackLabel);
+ }
+
+ const path = segments.join('/');
+ const label = segments[segments.length - 1];
+ const fullTitle = trimmedTitle || path;
+
+ normalized.push({
+ id: String(index),
+ path,
+ label,
+ segments,
+ fullTitle,
+ element: child,
+ });
+ });
+
+ return normalized;
+ }, [children]);
+
+ const entryMap = useMemo(() => {
+ return new Map(entries.map(entry => [entry.id, entry]));
+ }, [entries]);
+
+ const [activeId, setActiveId] = useState(entries[0]?.id);
+
+ useEffect(() => {
+ if (!entries.length) {
+ if (activeId !== undefined) {
+ setActiveId(undefined);
+ }
+ return;
+ }
+
+ const hasActiveEntry = activeId
+ ? entries.some(entry => entry.id === activeId)
+ : false;
+
+ if (!hasActiveEntry) {
+ setActiveId(entries[0]?.id);
+ }
+ }, [entries, activeId]);
+
+ const activeEntry = activeId ? entryMap.get(activeId) : undefined;
+ const activePath = activeEntry?.path ?? '';
+ const tree = useMemo(() => buildTree(entries), [entries]);
+
+ const renderNodes = (nodes: TreeNode[]): ReactNode => {
+ if (!nodes.length) return null;
+
+ return (
+
+ {nodes.map(node => {
+ const isActiveFile = node.isFile && node.fileId === activeId;
+ const isActiveBranch =
+ !node.isFile &&
+ Boolean(activePath) &&
+ (activePath === node.path ||
+ activePath.startsWith(`${node.path}/`));
+
+ if (node.isFile) {
+ const entry = node.fileId ? entryMap.get(node.fileId) : undefined;
+ return (
+ -
+
+
+ );
+ }
+
+ return (
+ -
+
+ {node.name}
+
+ {renderNodes(node.children)}
+
+ );
+ })}
+
+ );
+ };
+
+ if (!entries.length) {
+ return <>{children};
+ }
+
+ const content = activeEntry
+ ? cloneElement(activeEntry.element, { key: activeEntry.id })
+ : null;
+
+ return (
+
+
+
{content}
+