veslx 0.0.1

package/README.md

@@ -0,0 +1,3 @@
+
+# veslx
+

package/bin/lib/import-config.ts

@@ -0,0 +1,13 @@
+
+
+export default async function importConfig(root: string) {
+  const file = Bun.file(`${root}/veslx.config.ts`);
+
+  if (!await file.exists()) {
+    return
+  }
+  
+  const module = await import(`file://${root}/veslx.config.ts`);
+  const config = module.default;
+  return config
+}

package/bin/lib/init.ts

@@ -0,0 +1,31 @@
+import { createPrompt } from "bun-promptx";
+
+export default async function createNewConfig() {
+
+  const path = "veslx.config.ts"
+
+  if (await Bun.file(path).exists()) {
+    console.error(`Configuration file '${path}' already exists in the current directory.`);
+    return
+  }
+
+  console.log("Initializing a new veslx project...");
+
+  const dir = createPrompt("Enter dir: ");
+  if (dir.error) {
+    console.error("Failed to read dir");
+    process.exit(1);
+  }
+
+  console.log("You entered:", dir.value);
+
+  const configStr = `
+export default {
+  dir: '${dir.value}',
+}`
+
+  await Bun.write(path, configStr.trim());
+
+  console.log("Created 'veslx.config.ts' in the current directory.");
+  console.log("You can now run 'veslx serve' to start the development server.");
+}

package/bin/lib/serve.ts

@@ -0,0 +1,35 @@
+
+import { createServer } from 'vite'
+import importConfig from "./import-config";
+import veslxPlugin from '../../plugin/src/plugin'
+
+export default async function startServer() {
+  const cwd = process.cwd()
+
+  console.log(`Starting veslx server in ${cwd}`);
+
+  const config = await importConfig(cwd);
+
+  if (!config) {
+    console.error("Configuration file 'veslx.config.ts' not found in the current directory.");
+    return
+  }
+
+  const veslxRoot = new URL('../..', import.meta.url).pathname;
+
+  const server = await createServer({
+    root: veslxRoot,
+    configFile: new URL('../../vite.config.ts', import.meta.url).pathname,
+    plugins: [
+      veslxPlugin(config.dir)
+    ],
+    env: {
+      cwd,
+    }
+  })
+
+  await server.listen()
+
+  server.printUrls()
+  server.bindCLIShortcuts({ print: true })
+}

package/bin/lib/start.ts

@@ -0,0 +1,40 @@
+import importConfig from "./import-config"
+import pm2 from "pm2";
+
+export default async function start() {
+  const config = await importConfig(process.cwd());
+
+  if (!config) {
+    console.error("Configuration file 'veslx.config.ts' not found in the current directory.");
+    return
+  }
+
+  const cwd = process.cwd();
+  const name = `veslx-${cwd.replace(/\//g, '-').replace(/^-/, '')}`.toLowerCase();
+
+  pm2.connect((err) => {
+    if (err) {
+      console.error('PM2 connect error:', err);
+      return;
+    }
+
+    pm2.start({
+      name: name,
+      script: 'bunx',
+      args: ['veslx', 'serve'],
+      cwd: cwd,
+      autorestart: true,
+      watch: false,
+      max_memory_restart: '200M'
+    }, (err, apps) => {
+      pm2.disconnect();   // Disconnects from PM2
+
+      if (err) {
+        console.error('Failed to start daemon:', err);
+        return;
+      }
+
+      console.log(`veslx daemon started in ${cwd}`);
+    });
+  })
+}

package/bin/lib/stop.ts

@@ -0,0 +1,24 @@
+import pm2 from "pm2";
+
+export default async function start() {
+  const cwd = process.cwd();
+  const name = `veslx-${cwd.replace(/\//g, '-').replace(/^-/, '')}`.toLowerCase();
+
+  pm2.connect((err) => {
+    if (err) {
+      console.error('PM2 connect error:', err);
+      return;
+    }
+
+    pm2.stop(name, (err, apps) => {
+      pm2.disconnect();   // Disconnects from PM2
+
+      if (err) {
+        console.error('Failed to stop daemon:', err);
+        return;
+      }
+
+      console.log(`veslx daemon stopped as "${name}" in ${cwd}`);
+    });
+  })
+}

package/bin/vesl.ts

@@ -0,0 +1,41 @@
+#!/usr/bin/env bun
+
+import { cac } from "cac";
+import pkg from "../package.json" assert { type: "json" };
+import init from "./lib/init";
+import serve from "./lib/serve";
+import start from "./lib/start";
+import stop from "./lib/stop";
+
+const cli = cac("veslx");
+
+console.log(`▗▖  ▗▖▗▄▄▄▖ ▗▄▄▖▗▖   
+▐▌  ▐▌▐▌   ▐▌   ▐▌   
+▐▌  ▐▌▐▛▀▀▘ ▝▀▚▖▐▌   
+ ▝▚▞▘ ▐▙▄▄▖▗▄▄▞▘▐▙▄▄▖
+  `);
+
+cli
+  .command("init", "Initialize a new veslx project")
+  .action(init)
+
+cli
+  .command("serve", "Start the veslx server")
+  .action(serve);
+
+cli
+  .command("start", "Start the veslx server as a deamon")
+  .action(start);
+
+cli
+  .command("stop", "Stop the veslx deamon")
+  .action(stop);
+
+cli.help();
+cli.version(pkg.version);
+cli.parse();
+
+if (!cli.matchedCommand && process.argv.length <= 2) {
+  cli.outputHelp();
+  process.exit(0);
+}

package/components.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/index.css",
+    "baseColor": "slate",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "src/components",
+    "utils": "src/lib/utils",
+    "ui": "src/components/ui",
+    "lib": "src/lib",
+    "hooks": "src/hooks"
+  }
+}

package/eslint.config.js

@@ -0,0 +1,23 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+  },
+])

package/index.html

@@ -0,0 +1,17 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <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>
+    <!-- Google Fonts: DM Sans + DM Mono -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&display=swap" rel="stylesheet">
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/package.json

@@ -0,0 +1,89 @@
+{
+  "name": "veslx",
+  "version": "0.0.1",
+  "type": "module",
+  "bin": {
+    "veslx": "bin/veslx.ts"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "typecheck": "tsc -b",
+    "lint": "eslint .",
+    "preview": "vite preview",
+    "start": "vite preview"
+  },
+  "dependencies": {
+    "@icons-pack/react-simple-icons": "^13.8.0",
+    "@mdx-js/react": "^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",
+    "@radix-ui/react-label": "^2.1.8",
+    "@radix-ui/react-scroll-area": "^1.2.10",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-separator": "^1.1.8",
+    "@radix-ui/react-slider": "^1.3.6",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-tooltip": "^1.2.8",
+    "@radix-ui/react-use-controllable-state": "^1.2.2",
+    "@tailwindcss/vite": "^4.1.17",
+    "@types/bun": "^1.3.4",
+    "@types/js-yaml": "^4.0.9",
+    "@visx/axis": "^3.12.0",
+    "@visx/grid": "^3.12.0",
+    "@visx/group": "^3.12.0",
+    "@visx/scale": "^3.12.0",
+    "@visx/shape": "^3.12.0",
+    "bun-promptx": "^0.2.0",
+    "cac": "^6.7.14",
+    "date-fns": "^4.1.0",
+    "embla-carousel-react": "^8.6.0",
+    "install": "^0.13.0",
+    "js-yaml": "^4.1.1",
+    "katex": "^0.16.25",
+    "minimatch": "^10.1.1",
+    "next-themes": "^0.4.6",
+    "pm2": "^6.0.14",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-router-dom": "^7.9.5",
+    "react-use": "^17.6.0",
+    "rehype-katex": "^7.0.1",
+    "remark-frontmatter": "^5.0.0",
+    "remark-gfm": "^4.0.1",
+    "remark-math": "^6.0.0",
+    "remark-mdx-frontmatter": "^5.2.0",
+    "shiki": "^3.15.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@mdx-js/rollup": "^3.1.1",
+    "@tailwindcss/postcss": "^4.1.17",
+    "@tailwindcss/typography": "^0.5.19",
+    "@types/node": "^25.0.0",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.2",
+    "@vitejs/plugin-react": "^5.1.0",
+    "autoprefixer": "^10.4.22",
+    "chokidar": "^4.0.3",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^16.5.0",
+    "gray-matter": "^4.0.3",
+    "lucide-react": "^0.554.0",
+    "postcss": "^8.5.6",
+    "tailwind-merge": "^3.4.0",
+    "tailwindcss": "^4.1.17",
+    "tailwindcss-animate": "^1.0.7",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.46.3",
+    "vite": "npm:rolldown-vite@7.2.2"
+  },
+  "overrides": {
+    "vite": "npm:rolldown-vite@7.2.2"
+  }
+}

package/plugin/README.md

@@ -0,0 +1,21 @@
+# bun-react-template
+
+To install dependencies:
+
+```bash
+bun install
+```
+
+To start a development server:
+
+```bash
+bun dev
+```
+
+To run for production:
+
+```bash
+bun start
+```
+
+This project was created using `bun init` in bun v1.3.2. [Bun](https://bun.com) is a fast all-in-one JavaScript runtime.

package/plugin/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@veslx/vite-plugin",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "main": "./src/plugin.ts",
+  "exports": {
+    ".": "./src/plugin.ts",
+    "./lib": "./src/lib.ts"
+  },
+  "scripts": {
+    "dev": "bun --hot src/index.ts",
+    "build": "bun build ./src/index.html --outdir=dist --sourcemap --target=browser --minify --define:process.env.NODE_ENV='\"production\"' --env='BUN_PUBLIC_*'",
+    "start": "NODE_ENV=production bun src/index.ts"
+  },
+  "dependencies": {
+    "gray-matter": "^4.0.3",
+    "react": "^19",
+    "react-dom": "^19"
+  },
+  "devDependencies": {
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "@types/bun": "latest"
+  }
+}

package/plugin/src/cli.ts

@@ -0,0 +1,30 @@
+import { parseArgs } from "util";
+import { buildAll } from "./lib";
+
+async function cli(): Promise<void> {
+
+  const { values } = parseArgs({
+    args: Bun.argv,
+    options: {
+      dir: {
+        type: "string",
+      },
+    },
+    strict: true,
+    allowPositionals: true,
+  });
+
+  if (!values.dir) {
+    throw new Error("Content directory is required. Use --dir to specify.");
+  }
+
+
+  await buildAll([values.dir]);
+}
+
+// Run if executed directly
+if (import.meta.url === `file://${process.argv[1]}`) {
+  cli()
+}
+
+export { cli };

package/plugin/src/client.tsx

@@ -0,0 +1,224 @@
+import { useState, useEffect } 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;
+  }
+
+  return { directory: currentDir, file };
+}
+
+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;
+}
+
+export function findSlides(directory: DirectoryEntry): FileEntry | null {
+  const readme = directory.children.find((child) =>
+    child.type === "file" &&
+    [
+      "SLIDES.md", "Slides.md", "slides.md",
+      "SLIDES.mdx", "Slides.mdx", "slides.mdx"
+    ].includes(child.name)
+  ) as FileEntry | undefined;
+
+  return readme || 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 };
+
+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 () => {};
+  }, [path]);
+
+  return { directory, file, loading, error };
+}
+
+export function useFileContent(path: string) {
+  const [blob, setBlob] = useState<Blob | null>(null);
+  const [content, setContent] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const controller = new AbortController();
+    setLoading(true);
+    setError(null);
+
+    (async () => {
+      try {
+        const res = await fetch(`/raw/${path}`, {
+          signal: controller.signal,
+        });
+
+        if (!res.ok) {
+          throw new Error(`Failed to fetch: ${res.status} ${res.statusText}`);
+        }
+
+        const fetchedBlob = await res.blob();
+        setBlob(fetchedBlob);
+
+        // Try to read as text - some binary files may fail
+        try {
+          const text = await fetchedBlob.text();
+          setContent(text);
+        } catch {
+          // Binary file - text content not available
+          setContent(null);
+        }
+      } catch (err) {
+        if (err instanceof Error && err.name === 'AbortError') {
+          return; // Ignore abort errors
+        }
+        setError(err instanceof Error ? err : new Error('Unknown error'));
+      } finally {
+        setLoading(false);
+      }
+    })();
+
+    return () => controller.abort();
+  }, [path]);
+
+  return { blob, content, loading, error };
+}
+
+export function isSimulationRunning() {
+  const [running, setRunning] = useState<boolean>(false);
+
+  useEffect(() => {
+    let interval: ReturnType<typeof setInterval>;
+
+    const fetchStatus = async () => {
+      const response = await fetch(`/raw/.running`);
+
+      // this is an elaborate workaround to stop devtools logging errors on 404s
+      const text = await response.text()
+      if (text === "") {
+        setRunning(true);
+      } else {
+        setRunning(false);
+      }
+    };
+
+    // Initial fetch
+    fetchStatus();
+
+    // Poll every second
+    interval = setInterval(fetchStatus, 1000);
+
+    return () => {
+      clearInterval(interval);
+    };
+  }, []);
+
+  return running;
+}