veslx 0.1.14 → 0.1.15

package/dist/client/plugin/src/client.js

@@ -1,42 +1,48 @@
-import { useState, useEffect } from "react";
-async function parsePath(directory, path) {
-  const parts = path === "." ? [] : path.split("/").filter(Boolean);
-  let file = null;
-  let currentDir = directory;
-  for (let i = 0; i < parts.length; i++) {
-    const part = parts[i];
-    const isLastPart = i === parts.length - 1;
-    if (isLastPart) {
-      const matchedFile = currentDir.children.find(
-        (child) => child.type === "file" && child.name === part
-      );
-      if (matchedFile) {
-        file = matchedFile;
-        break;
-      }
-    }
-    const nextDir = currentDir.children.find(
-      (child) => child.type === "directory" && child.name === part
+import { useState, useMemo, useEffect } from "react";
+import { buildDirectoryTree, navigateToPath } from "./directory-tree.js";
+import { frontmatters, files } from "virtual:content-modules";
+function findReadme(directory) {
+  const indexFiles = [
+    "index.mdx",
+    "index.md",
+    "README.mdx",
+    "Readme.mdx",
+    "readme.mdx",
+    "README.md",
+    "Readme.md",
+    "readme.md"
+  ];
+  for (const filename of indexFiles) {
+    const found = directory.children.find(
+      (child) => child.type === "file" && child.name === filename
     );
-    if (!nextDir) {
-      throw new Error(`Path not found: ${path}`);
-    }
-    currentDir = nextDir;
+    if (found) return found;
   }
-  return { directory: currentDir, file };
+  return null;
 }
-function findReadme(directory) {
-  const readme = directory.children.find(
-    (child) => child.type === "file" && [
-      "README.md",
-      "Readme.md",
-      "readme.md",
-      "README.mdx",
-      "Readme.mdx",
-      "readme.mdx"
-    ].includes(child.name)
+function findMdxFiles(directory) {
+  const indexFiles = [
+    "index.mdx",
+    "index.md",
+    "README.mdx",
+    "Readme.mdx",
+    "readme.mdx",
+    "README.md",
+    "Readme.md",
+    "readme.md"
+  ];
+  const slideFiles = [
+    "SLIDES.mdx",
+    "Slides.mdx",
+    "slides.mdx",
+    "SLIDES.md",
+    "Slides.md",
+    "slides.md"
+  ];
+  const excludeFiles = [...indexFiles, ...slideFiles];
+  return directory.children.filter(
+    (child) => child.type === "file" && (child.name.endsWith(".mdx") || child.name.endsWith(".md")) && !excludeFiles.includes(child.name) && !child.name.endsWith(".slides.mdx") && !child.name.endsWith(".slides.md")
   );
-  return readme || null;
 }
 function findSlides(directory) {
   const readme = directory.children.find(
@@ -51,70 +57,25 @@ function findSlides(directory) {
   );
   return readme || null;
 }
+const directoryTree = buildDirectoryTree(Object.keys(files), frontmatters);
 function useDirectory(path = ".") {
-  const [directory, setDirectory] = useState(null);
-  const [file, setFile] = useState(null);
-  const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
-  useEffect(() => {
-    setLoading(true);
-    setError(null);
-    (async () => {
-      try {
-        const response = await fetch(`/raw/.veslx.json`);
-        if (!response.ok) {
-          if (response.status === 404) {
-            setError({ type: "config_not_found", message: ".veslx.json not found" });
-          } else {
-            setError({ type: "fetch_error", message: `Failed to fetch: ${response.status} ${response.statusText}` });
-          }
-          return;
-        }
-        let json;
-        try {
-          json = await response.json();
-        } catch {
-          setError({ type: "parse_error", message: "Failed to parse .veslx.json" });
-          return;
-        }
-        let parsed;
-        try {
-          parsed = await parsePath(json, path);
-        } catch {
-          setError({ type: "path_not_found", message: `Path not found: ${path}`, status: 404 });
-          return;
-        }
-        parsed.directory.children.sort((a, b) => {
-          let aDate, bDate;
-          if (a.children) {
-            const readme = findReadme(a);
-            if (readme && readme.frontmatter && readme.frontmatter.date) {
-              aDate = new Date(readme.frontmatter.date);
-            }
-          }
-          if (b.children) {
-            const readme = findReadme(b);
-            if (readme && readme.frontmatter && readme.frontmatter.date) {
-              bDate = new Date(readme.frontmatter.date);
-            }
-          }
-          if (aDate && bDate) {
-            return bDate.getTime() - aDate.getTime();
-          }
-          return 0;
-        });
-        setDirectory(parsed.directory);
-        setFile(parsed.file);
-      } catch (err) {
-        setError({ type: "fetch_error", message: err.message || "Unknown error" });
-      } finally {
-        setLoading(false);
-      }
-    })();
-    return () => {
-    };
+  const result = useMemo(() => {
+    try {
+      const { directory, file } = navigateToPath(directoryTree, path);
+      return { directory, file };
+    } catch {
+      setError({ type: "path_not_found", message: `Path not found: ${path}`, status: 404 });
+      return { directory: null, file: null };
+    }
   }, [path]);
-  return { directory, file, loading, error };
+  return {
+    directory: result.directory,
+    file: result.file,
+    loading: false,
+    // No async loading needed
+    error
+  };
 }
 function useFileContent(path) {
   const [blob, setBlob] = useState(null);
@@ -176,6 +137,7 @@ function isSimulationRunning() {
   return running;
 }
 export {
+  findMdxFiles,
   findReadme,
   findSlides,
   isSimulationRunning,

package/dist/client/plugin/src/client.js.map

@@ -1 +1 @@
-{"version":3,"file":"client.js","sources":["../../../../plugin/src/client.tsx"],"sourcesContent":["import { useState, useEffect } from \"react\";\nimport { DirectoryEntry, FileEntry } from \"./lib\";\n\nasync function parsePath(directory: DirectoryEntry, path: string): Promise<{ directory: DirectoryEntry; file: FileEntry | null }> {\n  const parts = path === \".\" ? [] : path.split(\"/\").filter(Boolean);\n\n  let file = null;\n  let currentDir = directory;\n\n  for (let i = 0; i < parts.length; i++) {\n    const part = parts[i];\n    const isLastPart = i === parts.length - 1;\n\n    // Check if this part matches a file (only on last part)\n    if (isLastPart) {\n      const matchedFile = currentDir.children.find(\n        (child) => child.type === \"file\" && child.name === part\n      ) as FileEntry | undefined;\n\n      if (matchedFile) {\n        file = matchedFile;\n        break;\n      }\n    }\n\n    // Otherwise, look for a directory\n    const nextDir = currentDir.children.find(\n      (child) => child.type === \"directory\" && child.name === part\n    ) as DirectoryEntry | undefined;\n\n    if (!nextDir) {\n      throw new Error(`Path not found: ${path}`);\n    }\n\n    currentDir = nextDir;\n  }\n\n  return { directory: currentDir, file };\n}\n\nexport function findReadme(directory: DirectoryEntry): FileEntry | null {\n  const readme = directory.children.find((child) => \n    child.type === \"file\" && \n    [\n      \"README.md\", \"Readme.md\", \"readme.md\",\n      \"README.mdx\", \"Readme.mdx\", \"readme.mdx\"\n    ].includes(child.name)\n  ) as FileEntry | undefined;\n\n  return readme || null;\n}\n\nexport function findSlides(directory: DirectoryEntry): FileEntry | null {\n  const readme = directory.children.find((child) =>\n    child.type === \"file\" &&\n    [\n      \"SLIDES.md\", \"Slides.md\", \"slides.md\",\n      \"SLIDES.mdx\", \"Slides.mdx\", \"slides.mdx\"\n    ].includes(child.name)\n  ) as FileEntry | undefined;\n\n  return readme || null;\n}\n\n\nexport type DirectoryError =\n  | { type: 'config_not_found'; message: string }\n  | { type: 'path_not_found'; message: string; status: 404 }\n  | { type: 'fetch_error'; message: string }\n  | { type: 'parse_error'; message: string };\n\nexport function useDirectory(path: string = \".\") {\n  const [directory, setDirectory] = useState<DirectoryEntry | null>(null);\n  const [file, setFile] = useState<FileEntry | null>(null);\n  const [loading, setLoading] = useState(true);\n  const [error, setError] = useState<DirectoryError | null>(null);\n\n  useEffect(() => {\n    setLoading(true);\n    setError(null);\n\n    (async () => {\n      try {\n        const response = await fetch(`/raw/.veslx.json`);\n\n        if (!response.ok) {\n          if (response.status === 404) {\n            setError({ type: 'config_not_found', message: '.veslx.json not found' });\n          } else {\n            setError({ type: 'fetch_error', message: `Failed to fetch: ${response.status} ${response.statusText}` });\n          }\n          return;\n        }\n\n        let json;\n        try {\n          json = await response.json();\n        } catch {\n          setError({ type: 'parse_error', message: 'Failed to parse .veslx.json' });\n          return;\n        }\n\n        let parsed: { directory: DirectoryEntry; file: FileEntry | null };\n        try {\n          parsed = await parsePath(json, path);\n        } catch {\n          setError({ type: 'path_not_found', message: `Path not found: ${path}`, status: 404 });\n          return;\n        }\n\n        parsed.directory.children.sort((a: any, b: any) => {\n          let aDate, bDate;\n          if (a.children) {\n            const readme = findReadme(a);\n            if (readme && readme.frontmatter && readme.frontmatter.date) {\n              aDate = new Date(readme.frontmatter.date as string | number | Date)\n            }\n          }\n          if (b.children) {\n            const readme = findReadme(b);\n            if (readme && readme.frontmatter && readme.frontmatter.date) {\n              bDate = new Date(readme.frontmatter.date as string | number | Date)\n            }\n          }\n          if (aDate && bDate) {\n            return bDate.getTime() - aDate.getTime()\n          }\n          return 0;\n        });\n\n        setDirectory(parsed.directory);\n        setFile(parsed.file);\n      } catch (err: any) {\n        setError({ type: 'fetch_error', message: err.message || 'Unknown error' });\n      } finally {\n        setLoading(false);\n      }\n    })();\n\n    return () => {};\n  }, [path]);\n\n  return { directory, file, loading, error };\n}\n\nexport function useFileContent(path: string) {\n  const [blob, setBlob] = useState<Blob | null>(null);\n  const [content, setContent] = useState<string | null>(null);\n  const [loading, setLoading] = useState(true);\n  const [error, setError] = useState<string | null>(null);\n\n  useEffect(() => {\n    const controller = new AbortController();\n    setLoading(true);\n    setError(null);\n\n    (async () => {\n      try {\n        const res = await fetch(`/raw/${path}`, {\n          signal: controller.signal,\n        });\n\n        if (!res.ok) {\n          throw new Error(`Failed to fetch: ${res.status} ${res.statusText}`);\n        }\n\n        const fetchedBlob = await res.blob();\n        setBlob(fetchedBlob);\n\n        // Try to read as text - some binary files may fail\n        try {\n          const text = await fetchedBlob.text();\n          setContent(text);\n        } catch {\n          // Binary file - text content not available\n          setContent(null);\n        }\n      } catch (err) {\n        if (err instanceof Error && err.name === 'AbortError') {\n          return; // Ignore abort errors\n        }\n        setError(err instanceof Error ? err.message : 'Unknown error');\n      } finally {\n        setLoading(false);\n      }\n    })();\n\n    return () => controller.abort();\n  }, [path]);\n\n  return { blob, content, loading, error };\n}\n\nexport function isSimulationRunning() {\n  const [running, setRunning] = useState<boolean>(false);\n\n  useEffect(() => {\n    let interval: ReturnType<typeof setInterval>;\n\n    const fetchStatus = async () => {\n      const response = await fetch(`/raw/.running`);\n\n      // this is an elaborate workaround to stop devtools logging errors on 404s\n      const text = await response.text()\n      if (text === \"\") {\n        setRunning(true);\n      } else {\n        setRunning(false);\n      }\n    };\n\n    // Initial fetch\n    fetchStatus();\n\n    // Poll every second\n    interval = setInterval(fetchStatus, 1000);\n\n    return () => {\n      clearInterval(interval);\n    };\n  }, []);\n\n  return running;\n}"],"names":[],"mappings":"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"}
+{"version":3,"file":"client.js","sources":["../../../../plugin/src/client.tsx"],"sourcesContent":["import { useState, useEffect, useMemo } from \"react\";\nimport { DirectoryEntry, FileEntry } from \"./lib\";\nimport { buildDirectoryTree, navigateToPath } from \"./directory-tree\";\n// @ts-ignore - virtual module\nimport { files, frontmatters } from \"virtual:content-modules\";\n\n/**\n * Find the main content file for a directory.\n * Supports (in order of preference):\n * - index.mdx / index.md (modern convention)\n * - README.mdx / README.md (traditional convention)\n */\nexport function findReadme(directory: DirectoryEntry): FileEntry | null {\n  const indexFiles = [\n    \"index.mdx\", \"index.md\",\n    \"README.mdx\", \"Readme.mdx\", \"readme.mdx\",\n    \"README.md\", \"Readme.md\", \"readme.md\",\n  ];\n\n  for (const filename of indexFiles) {\n    const found = directory.children.find((child) =>\n      child.type === \"file\" && child.name === filename\n    ) as FileEntry | undefined;\n    if (found) return found;\n  }\n\n  return null;\n}\n\n/**\n * Find all MDX files in a directory (excluding index/README and slides)\n */\nexport function findMdxFiles(directory: DirectoryEntry): FileEntry[] {\n  const indexFiles = [\n    \"index.mdx\", \"index.md\",\n    \"README.mdx\", \"Readme.mdx\", \"readme.mdx\",\n    \"README.md\", \"Readme.md\", \"readme.md\",\n  ];\n  const slideFiles = [\n    \"SLIDES.mdx\", \"Slides.mdx\", \"slides.mdx\",\n    \"SLIDES.md\", \"Slides.md\", \"slides.md\",\n  ];\n  const excludeFiles = [...indexFiles, ...slideFiles];\n\n  return directory.children.filter((child): child is FileEntry =>\n    child.type === \"file\" &&\n    (child.name.endsWith('.mdx') || child.name.endsWith('.md')) &&\n    !excludeFiles.includes(child.name) &&\n    !child.name.endsWith('.slides.mdx') &&\n    !child.name.endsWith('.slides.md')\n  );\n}\n\nexport function findSlides(directory: DirectoryEntry): FileEntry | null {\n  const readme = directory.children.find((child) =>\n    child.type === \"file\" &&\n    [\n      \"SLIDES.md\", \"Slides.md\", \"slides.md\",\n      \"SLIDES.mdx\", \"Slides.mdx\", \"slides.mdx\"\n    ].includes(child.name)\n  ) as FileEntry | undefined;\n\n  return readme || null;\n}\n\n\nexport type DirectoryError =\n  | { type: 'path_not_found'; message: string; status: 404 };\n\n// Build directory tree once from glob keys, with frontmatter metadata\nconst directoryTree = buildDirectoryTree(Object.keys(files), frontmatters as Record<string, FileEntry['frontmatter']>);\n\nexport function useDirectory(path: string = \".\") {\n  const [error, setError] = useState<DirectoryError | null>(null);\n\n  const result = useMemo(() => {\n    try {\n      const { directory, file } = navigateToPath(directoryTree, path);\n      return { directory, file };\n    } catch {\n      setError({ type: 'path_not_found', message: `Path not found: ${path}`, status: 404 });\n      return { directory: null, file: null };\n    }\n  }, [path]);\n\n  return {\n    directory: result.directory,\n    file: result.file,\n    loading: false, // No async loading needed\n    error\n  };\n}\n\nexport function useFileContent(path: string) {\n  const [blob, setBlob] = useState<Blob | null>(null);\n  const [content, setContent] = useState<string | null>(null);\n  const [loading, setLoading] = useState(true);\n  const [error, setError] = useState<string | null>(null);\n\n  useEffect(() => {\n    const controller = new AbortController();\n    setLoading(true);\n    setError(null);\n\n    (async () => {\n      try {\n        const res = await fetch(`/raw/${path}`, {\n          signal: controller.signal,\n        });\n\n        if (!res.ok) {\n          throw new Error(`Failed to fetch: ${res.status} ${res.statusText}`);\n        }\n\n        const fetchedBlob = await res.blob();\n        setBlob(fetchedBlob);\n\n        // Try to read as text - some binary files may fail\n        try {\n          const text = await fetchedBlob.text();\n          setContent(text);\n        } catch {\n          // Binary file - text content not available\n          setContent(null);\n        }\n      } catch (err) {\n        if (err instanceof Error && err.name === 'AbortError') {\n          return; // Ignore abort errors\n        }\n        setError(err instanceof Error ? err.message : 'Unknown error');\n      } finally {\n        setLoading(false);\n      }\n    })();\n\n    return () => controller.abort();\n  }, [path]);\n\n  return { blob, content, loading, error };\n}\n\nexport function isSimulationRunning() {\n  const [running, setRunning] = useState<boolean>(false);\n\n  useEffect(() => {\n    let interval: ReturnType<typeof setInterval>;\n\n    const fetchStatus = async () => {\n      const response = await fetch(`/raw/.running`);\n\n      // this is an elaborate workaround to stop devtools logging errors on 404s\n      const text = await response.text()\n      if (text === \"\") {\n        setRunning(true);\n      } else {\n        setRunning(false);\n      }\n    };\n\n    // Initial fetch\n    fetchStatus();\n\n    // Poll every second\n    interval = setInterval(fetchStatus, 1000);\n\n    return () => {\n      clearInterval(interval);\n    };\n  }, []);\n\n  return running;\n}"],"names":[],"mappings":"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"}

package/dist/client/plugin/src/directory-tree.js

@@ -0,0 +1,111 @@
+function findCommonPrefix(paths) {
+  if (paths.length === 0) return "";
+  const dirPaths = paths.map((p) => {
+    const parts = p.split("/").filter(Boolean);
+    return parts.slice(0, -1);
+  });
+  if (dirPaths.length === 0 || dirPaths[0].length === 0) return "";
+  const firstDirParts = dirPaths[0];
+  let commonLength = 0;
+  for (let i = 0; i < firstDirParts.length; i++) {
+    const segment = firstDirParts[i];
+    const allMatch = dirPaths.every((parts) => parts[i] === segment);
+    if (allMatch) {
+      commonLength = i + 1;
+    } else {
+      break;
+    }
+  }
+  if (commonLength > 0) {
+    return "/" + firstDirParts.slice(0, commonLength).join("/");
+  }
+  return "";
+}
+function buildDirectoryTree(globKeys, frontmatters) {
+  const root = {
+    type: "directory",
+    name: ".",
+    path: ".",
+    children: []
+  };
+  if (globKeys.length === 0) return root;
+  const commonPrefix = findCommonPrefix(globKeys);
+  for (const key of globKeys) {
+    let relativePath = key;
+    if (commonPrefix && key.startsWith(commonPrefix)) {
+      relativePath = key.slice(commonPrefix.length);
+    }
+    if (relativePath.startsWith("/")) {
+      relativePath = relativePath.slice(1);
+    }
+    if (relativePath.split("/").some((part) => part.startsWith("."))) {
+      continue;
+    }
+    const parts = relativePath.split("/").filter(Boolean);
+    if (parts.length === 0) continue;
+    let current = root;
+    for (let i = 0; i < parts.length - 1; i++) {
+      const dirName = parts[i];
+      let dir = current.children.find(
+        (c) => c.type === "directory" && c.name === dirName
+      );
+      if (!dir) {
+        dir = {
+          type: "directory",
+          name: dirName,
+          path: parts.slice(0, i + 1).join("/"),
+          children: []
+        };
+        current.children.push(dir);
+      }
+      current = dir;
+    }
+    const filename = parts[parts.length - 1];
+    const exists = current.children.some(
+      (c) => c.type === "file" && c.name === filename
+    );
+    if (exists) continue;
+    const frontmatter = frontmatters == null ? void 0 : frontmatters[key];
+    const fileEntry = {
+      type: "file",
+      name: filename,
+      path: relativePath,
+      size: 0,
+      // Size not available from glob keys
+      frontmatter
+    };
+    current.children.push(fileEntry);
+  }
+  return root;
+}
+function navigateToPath(root, path) {
+  const parts = path === "." || path === "" ? [] : path.split("/").filter(Boolean);
+  let currentDir = root;
+  let file = null;
+  for (let i = 0; i < parts.length; i++) {
+    const part = parts[i];
+    const isLastPart = i === parts.length - 1;
+    if (isLastPart) {
+      const matchedFile = currentDir.children.find(
+        (child) => child.type === "file" && child.name === part
+      );
+      if (matchedFile) {
+        file = matchedFile;
+        break;
+      }
+    }
+    const nextDir = currentDir.children.find(
+      (child) => child.type === "directory" && child.name === part
+    );
+    if (!nextDir) {
+      throw new Error(`Path not found: ${path}`);
+    }
+    currentDir = nextDir;
+  }
+  return { directory: currentDir, file };
+}
+export {
+  buildDirectoryTree,
+  navigateToPath
+};
+//# sourceMappingURL=directory-tree.js.map

package/dist/client/plugin/src/directory-tree.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"directory-tree.js","sources":["../../../../plugin/src/directory-tree.ts"],"sourcesContent":["import type { DirectoryEntry, FileEntry } from './lib';\n\n/**\n * Find the common directory prefix among all paths.\n * E.g., [\"/docs/a.mdx\", \"/docs/b/c.mdx\"] -> \"/docs\"\n * Only considers directory segments, not filenames.\n */\nfunction findCommonPrefix(paths: string[]): string {\n  if (paths.length === 0) return '';\n\n  // Extract directory parts only (exclude filename from each path)\n  const dirPaths = paths.map(p => {\n    const parts = p.split('/').filter(Boolean);\n    // Remove the last part (filename)\n    return parts.slice(0, -1);\n  });\n\n  if (dirPaths.length === 0 || dirPaths[0].length === 0) return '';\n\n  // Find how many directory segments are common to all paths\n  const firstDirParts = dirPaths[0];\n  let commonLength = 0;\n\n  for (let i = 0; i < firstDirParts.length; i++) {\n    const segment = firstDirParts[i];\n    const allMatch = dirPaths.every(parts => parts[i] === segment);\n    if (allMatch) {\n      commonLength = i + 1;\n    } else {\n      break;\n    }\n  }\n\n  if (commonLength > 0) {\n    return '/' + firstDirParts.slice(0, commonLength).join('/');\n  }\n  return '';\n}\n\n/**\n * Build a directory tree from glob keys.\n * Keys are paths like \"/docs/file.mdx\" (Vite-resolved from @content alias)\n * We auto-detect and strip the common prefix (content directory).\n * @param globKeys - Array of file paths from import.meta.glob\n * @param frontmatters - Optional map of paths to frontmatter objects\n */\nexport function buildDirectoryTree(\n  globKeys: string[],\n  frontmatters?: Record<string, FileEntry['frontmatter']>\n): DirectoryEntry {\n  const root: DirectoryEntry = {\n    type: 'directory',\n    name: '.',\n    path: '.',\n    children: []\n  };\n\n  if (globKeys.length === 0) return root;\n\n  // Auto-detect the content directory prefix\n  // Vite resolves @content to the actual path, so keys look like \"/docs/file.mdx\"\n  const commonPrefix = findCommonPrefix(globKeys);\n\n  for (const key of globKeys) {\n    // Strip the common prefix to get path relative to content root\n    let relativePath = key;\n    if (commonPrefix && key.startsWith(commonPrefix)) {\n      relativePath = key.slice(commonPrefix.length);\n    }\n    // Remove leading slash if present\n    if (relativePath.startsWith('/')) {\n      relativePath = relativePath.slice(1);\n    }\n\n    // Skip hidden files and directories\n    if (relativePath.split('/').some(part => part.startsWith('.'))) {\n      continue;\n    }\n\n    const parts = relativePath.split('/').filter(Boolean);\n    if (parts.length === 0) continue;\n\n    let current = root;\n\n    // Navigate/create directories for all but the last part\n    for (let i = 0; i < parts.length - 1; i++) {\n      const dirName = parts[i];\n      let dir = current.children.find(\n        c => c.type === 'directory' && c.name === dirName\n      ) as DirectoryEntry | undefined;\n\n      if (!dir) {\n        dir = {\n          type: 'directory',\n          name: dirName,\n          path: parts.slice(0, i + 1).join('/'),\n          children: []\n        };\n        current.children.push(dir);\n      }\n      current = dir;\n    }\n\n    // Add file entry (last part)\n    const filename = parts[parts.length - 1];\n\n    // Don't add duplicates\n    const exists = current.children.some(\n      c => c.type === 'file' && c.name === filename\n    );\n    if (exists) continue;\n\n    // Look up frontmatter using the original key (before prefix stripping)\n    const frontmatter = frontmatters?.[key];\n\n    const fileEntry: FileEntry = {\n      type: 'file',\n      name: filename,\n      path: relativePath,\n      size: 0, // Size not available from glob keys\n      frontmatter\n    };\n    current.children.push(fileEntry);\n  }\n\n  return root;\n}\n\n/**\n * Navigate to a path within the directory tree.\n * Returns the directory and optionally a file if the path points to one.\n */\nexport function navigateToPath(\n  root: DirectoryEntry,\n  path: string\n): { directory: DirectoryEntry; file: FileEntry | null } {\n  const parts = path === '.' || path === '' ? [] : path.split('/').filter(Boolean);\n\n  let currentDir = root;\n  let file: FileEntry | null = null;\n\n  for (let i = 0; i < parts.length; i++) {\n    const part = parts[i];\n    const isLastPart = i === parts.length - 1;\n\n    // Check if this part matches a file (only on last part)\n    if (isLastPart) {\n      const matchedFile = currentDir.children.find(\n        child => child.type === 'file' && child.name === part\n      ) as FileEntry | undefined;\n\n      if (matchedFile) {\n        file = matchedFile;\n        break;\n      }\n    }\n\n    // Otherwise, look for a directory\n    const nextDir = currentDir.children.find(\n      child => child.type === 'directory' && child.name === part\n    ) as DirectoryEntry | undefined;\n\n    if (!nextDir) {\n      throw new Error(`Path not found: ${path}`);\n    }\n\n    currentDir = nextDir;\n  }\n\n  return { directory: currentDir, file };\n}\n"],"names":[],"mappings":"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"}

package/index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/logo_dark.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Pinglab</title>
+    <title>veslx</title>
     <!-- Google Fonts: DM Sans + DM Mono -->
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "veslx",
-  "version": "0.1.14",
+  "version": "0.1.15",
   "type": "module",
   "repository": {
     "type": "git",
@@ -23,16 +23,15 @@
     "vite.lib.config.ts"
   ],
   "scripts": {
-    "dev": "bun bin/veslx.ts serve",
-    "build": "bun bin/veslx.ts build",
+    "dev": "VESLX_DEV=1 bun bin/veslx.ts serve content",
+    "build": "bun bin/veslx.ts build content",
     "build:lib": "vite build --config vite.lib.config.ts",
     "prepublishOnly": "npm run build:lib"
   },
   "dependencies": {
-    "acorn": "^8.15.0",
-    "acorn-jsx": "^5.3.2",
     "@icons-pack/react-simple-icons": "^13.8.0",
     "@mdx-js/react": "^3.1.1",
+    "@mdx-js/rollup": "^3.1.1",
     "@radix-ui/react-collapsible": "^1.1.12",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
@@ -44,20 +43,40 @@
     "@radix-ui/react-slot": "^1.2.4",
     "@radix-ui/react-tooltip": "^1.2.8",
     "@radix-ui/react-use-controllable-state": "^1.2.2",
+    "@tailwindcss/postcss": "^4.1.17",
     "@tailwindcss/vite": "^4.1.17",
     "@types/bun": "^1.3.4",
     "@types/js-yaml": "^4.0.9",
+    "@visx/axis": "^3.12.0",
+    "@visx/curve": "^3.12.0",
+    "@visx/gradient": "^3.12.0",
+    "@visx/grid": "^3.12.0",
+    "@visx/group": "^3.12.0",
+    "@visx/responsive": "^3.12.0",
+    "@visx/scale": "^3.12.0",
+    "@visx/shape": "^3.12.0",
+    "@visx/text": "^3.12.0",
+    "@visx/tooltip": "^3.12.0",
+    "@vitejs/plugin-react": "^5.1.0",
+    "acorn": "^8.15.0",
+    "acorn-jsx": "^5.3.2",
+    "autoprefixer": "^10.4.22",
     "bun-promptx": "^0.2.0",
     "cac": "^6.7.14",
+    "canvas-confetti": "^1.9.4",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
     "embla-carousel-react": "^8.6.0",
     "gray-matter": "^4.0.3",
     "install": "^0.13.0",
     "js-yaml": "^4.1.1",
     "katex": "^0.16.25",
+    "lucide-react": "^0.554.0",
     "minimatch": "^10.1.1",
     "next-themes": "^0.4.6",
     "pm2": "^6.0.14",
+    "postcss": "^8.5.6",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "react-router-dom": "^7.9.5",
@@ -67,18 +86,11 @@
     "remark-math": "^6.0.0",
     "remark-mdx-frontmatter": "^5.2.0",
     "shiki": "^3.15.0",
-    "vite": "^6.0.3",
-    "@vitejs/plugin-react": "^5.1.0",
-    "@mdx-js/rollup": "^3.1.1",
-    "@tailwindcss/postcss": "^4.1.17",
-    "postcss": "^8.5.6",
-    "autoprefixer": "^10.4.22",
-    "lucide-react": "^0.554.0",
-    "class-variance-authority": "^0.7.1",
-    "clsx": "^2.1.1",
     "tailwind-merge": "^3.4.0",
     "tailwindcss": "^4.1.17",
-    "tailwindcss-animate": "^1.0.7"
+    "tailwindcss-animate": "^1.0.7",
+    "unist-util-visit": "^5.0.0",
+    "vite": "^6.0.3"
   },
   "devDependencies": {
     "@eslint/js": "^9.39.1",

package/plugin/src/client.tsx

@@ -1,53 +1,54 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, useMemo } from "react";
 import { DirectoryEntry, FileEntry } from "./lib";
-
-async function parsePath(directory: DirectoryEntry, path: string): Promise<{ directory: DirectoryEntry; file: FileEntry | null }> {
-  const parts = path === "." ? [] : path.split("/").filter(Boolean);
-
-  let file = null;
-  let currentDir = directory;
-
-  for (let i = 0; i < parts.length; i++) {
-    const part = parts[i];
-    const isLastPart = i === parts.length - 1;
-
-    // Check if this part matches a file (only on last part)
-    if (isLastPart) {
-      const matchedFile = currentDir.children.find(
-        (child) => child.type === "file" && child.name === part
-      ) as FileEntry | undefined;
-
-      if (matchedFile) {
-        file = matchedFile;
-        break;
-      }
-    }
-
-    // Otherwise, look for a directory
-    const nextDir = currentDir.children.find(
-      (child) => child.type === "directory" && child.name === part
-    ) as DirectoryEntry | undefined;
-
-    if (!nextDir) {
-      throw new Error(`Path not found: ${path}`);
-    }
-
-    currentDir = nextDir;
+import { buildDirectoryTree, navigateToPath } from "./directory-tree";
+// @ts-ignore - virtual module
+import { files, frontmatters } from "virtual:content-modules";
+
+/**
+ * Find the main content file for a directory.
+ * Supports (in order of preference):
+ * - index.mdx / index.md (modern convention)
+ * - README.mdx / README.md (traditional convention)
+ */
+export function findReadme(directory: DirectoryEntry): FileEntry | null {
+  const indexFiles = [
+    "index.mdx", "index.md",
+    "README.mdx", "Readme.mdx", "readme.mdx",
+    "README.md", "Readme.md", "readme.md",
+  ];
+
+  for (const filename of indexFiles) {
+    const found = directory.children.find((child) =>
+      child.type === "file" && child.name === filename
+    ) as FileEntry | undefined;
+    if (found) return found;
   }
 
-  return { directory: currentDir, file };
+  return null;
 }
 
-export function findReadme(directory: DirectoryEntry): FileEntry | null {
-  const readme = directory.children.find((child) => 
-    child.type === "file" && 
-    [
-      "README.md", "Readme.md", "readme.md",
-      "README.mdx", "Readme.mdx", "readme.mdx"
-    ].includes(child.name)
-  ) as FileEntry | undefined;
-
-  return readme || null;
+/**
+ * Find all MDX files in a directory (excluding index/README and slides)
+ */
+export function findMdxFiles(directory: DirectoryEntry): FileEntry[] {
+  const indexFiles = [
+    "index.mdx", "index.md",
+    "README.mdx", "Readme.mdx", "readme.mdx",
+    "README.md", "Readme.md", "readme.md",
+  ];
+  const slideFiles = [
+    "SLIDES.mdx", "Slides.mdx", "slides.mdx",
+    "SLIDES.md", "Slides.md", "slides.md",
+  ];
+  const excludeFiles = [...indexFiles, ...slideFiles];
+
+  return directory.children.filter((child): child is FileEntry =>
+    child.type === "file" &&
+    (child.name.endsWith('.mdx') || child.name.endsWith('.md')) &&
+    !excludeFiles.includes(child.name) &&
+    !child.name.endsWith('.slides.mdx') &&
+    !child.name.endsWith('.slides.md')
+  );
 }
 
 export function findSlides(directory: DirectoryEntry): FileEntry | null {
@@ -64,83 +65,30 @@ export function findSlides(directory: DirectoryEntry): FileEntry | null {
 
 
 export type DirectoryError =
-  | { type: 'config_not_found'; message: string }
-  | { type: 'path_not_found'; message: string; status: 404 }
-  | { type: 'fetch_error'; message: string }
-  | { type: 'parse_error'; message: string };
+  | { type: 'path_not_found'; message: string; status: 404 };
+
+// Build directory tree once from glob keys, with frontmatter metadata
+const directoryTree = buildDirectoryTree(Object.keys(files), frontmatters as Record<string, FileEntry['frontmatter']>);
 
 export function useDirectory(path: string = ".") {
-  const [directory, setDirectory] = useState<DirectoryEntry | null>(null);
-  const [file, setFile] = useState<FileEntry | null>(null);
-  const [loading, setLoading] = useState(true);
   const [error, setError] = useState<DirectoryError | null>(null);
 
-  useEffect(() => {
-    setLoading(true);
-    setError(null);
-
-    (async () => {
-      try {
-        const response = await fetch(`/raw/.veslx.json`);
-
-        if (!response.ok) {
-          if (response.status === 404) {
-            setError({ type: 'config_not_found', message: '.veslx.json not found' });
-          } else {
-            setError({ type: 'fetch_error', message: `Failed to fetch: ${response.status} ${response.statusText}` });
-          }
-          return;
-        }
-
-        let json;
-        try {
-          json = await response.json();
-        } catch {
-          setError({ type: 'parse_error', message: 'Failed to parse .veslx.json' });
-          return;
-        }
-
-        let parsed: { directory: DirectoryEntry; file: FileEntry | null };
-        try {
-          parsed = await parsePath(json, path);
-        } catch {
-          setError({ type: 'path_not_found', message: `Path not found: ${path}`, status: 404 });
-          return;
-        }
-
-        parsed.directory.children.sort((a: any, b: any) => {
-          let aDate, bDate;
-          if (a.children) {
-            const readme = findReadme(a);
-            if (readme && readme.frontmatter && readme.frontmatter.date) {
-              aDate = new Date(readme.frontmatter.date as string | number | Date)
-            }
-          }
-          if (b.children) {
-            const readme = findReadme(b);
-            if (readme && readme.frontmatter && readme.frontmatter.date) {
-              bDate = new Date(readme.frontmatter.date as string | number | Date)
-            }
-          }
-          if (aDate && bDate) {
-            return bDate.getTime() - aDate.getTime()
-          }
-          return 0;
-        });
-
-        setDirectory(parsed.directory);
-        setFile(parsed.file);
-      } catch (err: any) {
-        setError({ type: 'fetch_error', message: err.message || 'Unknown error' });
-      } finally {
-        setLoading(false);
-      }
-    })();
-
-    return () => {};
+  const result = useMemo(() => {
+    try {
+      const { directory, file } = navigateToPath(directoryTree, path);
+      return { directory, file };
+    } catch {
+      setError({ type: 'path_not_found', message: `Path not found: ${path}`, status: 404 });
+      return { directory: null, file: null };
+    }
   }, [path]);
 
-  return { directory, file, loading, error };
+  return {
+    directory: result.directory,
+    file: result.file,
+    loading: false, // No async loading needed
+    error
+  };
 }
 
 export function useFileContent(path: string) {