veslx 0.1.3 → 0.1.4

package/dist/client/pages/slides.js

@@ -0,0 +1,137 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useRef, useCallback, useEffect } from "react";
+import { FULLSCREEN_DATA_ATTR } from "../lib/constants.js";
+import { useParams, useSearchParams } from "react-router-dom";
+import Loading from "../components/loading.js";
+import { FrontMatter } from "../components/front-matter.js";
+import { RunningBar } from "../components/running-bar.js";
+import { Header } from "../components/header.js";
+import { useMDXSlides } from "../hooks/use-mdx-content.js";
+import { useSlidesFromMDX, SlideContent } from "../components/slides-renderer.js";
+function SlidesPage() {
+  const { "path": path = "." } = useParams();
+  const [searchParams, setSearchParams] = useSearchParams();
+  const { Content, frontmatter, loading, error } = useMDXSlides(path);
+  const { slides } = useSlidesFromMDX({ Content, frontmatter });
+  const totalSlides = slides.length + 1;
+  const initialSlide = Math.max(0, Math.min(
+    parseInt(searchParams.get("slide") || "0", 10),
+    totalSlides - 1
+  ));
+  const [currentSlide, setCurrentSlide] = useState(initialSlide);
+  const slideRefs = useRef([]);
+  const goToSlide = useCallback((index) => {
+    const clampedIndex = Math.max(0, Math.min(index, totalSlides - 1));
+    const target = slideRefs.current[clampedIndex];
+    if (target) {
+      const targetTop = target.getBoundingClientRect().top + window.scrollY;
+      window.scrollTo({ top: targetTop, behavior: "smooth" });
+    }
+  }, [totalSlides]);
+  const goToPrevious = useCallback(() => {
+    goToSlide(currentSlide - 1);
+  }, [currentSlide, goToSlide]);
+  const goToNext = useCallback(() => {
+    goToSlide(currentSlide + 1);
+  }, [currentSlide, goToSlide]);
+  useEffect(() => {
+    const handleKeyDown = (e) => {
+      if (e.key === "ArrowUp" || e.key === "k") {
+        e.preventDefault();
+        goToPrevious();
+      } else if (e.key === "ArrowDown" || e.key === "j") {
+        e.preventDefault();
+        goToNext();
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [goToPrevious, goToNext]);
+  useEffect(() => {
+    let observer = null;
+    const timeoutId = setTimeout(() => {
+      observer = new IntersectionObserver(
+        (entries) => {
+          for (const entry of entries) {
+            if (entry.isIntersecting) {
+              const index = slideRefs.current.findIndex((ref) => ref === entry.target);
+              if (index !== -1) {
+                setCurrentSlide(index);
+                setSearchParams(index > 0 ? { slide: String(index) } : {}, { replace: true });
+              }
+            }
+          }
+        },
+        { threshold: 0.5 }
+      );
+      slideRefs.current.forEach((ref) => {
+        if (ref) observer.observe(ref);
+      });
+    }, 100);
+    return () => {
+      clearTimeout(timeoutId);
+      observer == null ? void 0 : observer.disconnect();
+    };
+  }, [slides.length, setSearchParams]);
+  if (loading) {
+    return /* @__PURE__ */ jsx(Loading, {});
+  }
+  if (error) {
+    return /* @__PURE__ */ jsx("main", { className: "min-h-screen bg-background container mx-auto max-w-4xl py-12", children: /* @__PURE__ */ jsx("p", { className: "text-center text-red-600", children: error.message }) });
+  }
+  if (slides.length === 0) {
+    return /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center p-12 text-muted-foreground font-mono text-sm", children: 'no slides found — use "---" to separate slides' });
+  }
+  return /* @__PURE__ */ jsxs("main", { className: "slides-container", children: [
+    /* @__PURE__ */ jsx("title", { children: frontmatter == null ? void 0 : frontmatter.title }),
+    /* @__PURE__ */ jsx(RunningBar, {}),
+    /* @__PURE__ */ jsx(
+      Header,
+      {
+        slideControls: {
+          current: currentSlide,
+          total: totalSlides,
+          onPrevious: goToPrevious,
+          onNext: goToNext
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { ...{ [FULLSCREEN_DATA_ATTR]: "true" }, children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: (el) => {
+            slideRefs.current[0] = el;
+          },
+          className: "slide-page max-w-xl min-h-[50vh] sm:min-h-[70vh] md:min-h-screen flex items-center justify-center py-8 sm:py-12 md:py-16 px-4 mx-auto",
+          children: /* @__PURE__ */ jsx(
+            FrontMatter,
+            {
+              title: frontmatter == null ? void 0 : frontmatter.title,
+              date: frontmatter == null ? void 0 : frontmatter.date,
+              description: frontmatter == null ? void 0 : frontmatter.description
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx("hr", { className: "print:hidden" }),
+      slides.map((slideContent, index) => /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: (el) => {
+              slideRefs.current[index + 1] = el;
+            },
+            className: "slide-page min-h-[50vh] sm:min-h-[70vh] md:min-h-screen flex items-center justify-center py-8 sm:py-12 md:py-16 px-4 mx-auto",
+            children: /* @__PURE__ */ jsx(SlideContent, { children: slideContent })
+          }
+        ),
+        index < slides.length - 1 && /* @__PURE__ */ jsx("hr", { className: "print:hidden" })
+      ] }, index))
+    ] })
+  ] });
+}
+export {
+  SlidesPage
+};
+//# sourceMappingURL=slides.js.map

package/dist/client/pages/slides.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slides.js","sources":["../../../src/pages/slides.tsx"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from \"react\";\nimport { FULLSCREEN_DATA_ATTR } from \"@/lib/constants\";\nimport { useParams, useSearchParams } from \"react-router-dom\"\nimport Loading from \"@/components/loading\";\nimport { FrontMatter } from \"@/components/front-matter\";\nimport { RunningBar } from \"@/components/running-bar\";\nimport { Header } from \"@/components/header\";\nimport { useMDXSlides } from \"@/hooks/use-mdx-content\";\nimport { useSlidesFromMDX, SlideContent } from \"@/components/slides-renderer\";\n\n\nexport function SlidesPage() {\n  const { \"path\": path = \".\" } = useParams();\n  const [searchParams, setSearchParams] = useSearchParams();\n\n  // Load the compiled MDX module\n  const { Content, frontmatter, loading, error } = useMDXSlides(path);\n\n  // Split the MDX content into slides by <hr> elements\n  const { slides } = useSlidesFromMDX({ Content, frontmatter });\n\n  // Total slides = 1 (title) + content slides\n  const totalSlides = slides.length + 1;\n\n  // Get initial slide from query param\n  const initialSlide = Math.max(0, Math.min(\n    parseInt(searchParams.get(\"slide\") || \"0\", 10),\n    totalSlides - 1\n  ));\n\n  const [currentSlide, setCurrentSlide] = useState(initialSlide);\n  const slideRefs = useRef<(HTMLDivElement | null)[]>([]);\n\n  // Scroll to slide and update query param\n  const goToSlide = useCallback((index: number) => {\n    const clampedIndex = Math.max(0, Math.min(index, totalSlides - 1));\n    const target = slideRefs.current[clampedIndex];\n    if (target) {\n      const targetTop = target.getBoundingClientRect().top + window.scrollY;\n      window.scrollTo({ top: targetTop, behavior: \"smooth\" });\n    }\n  }, [totalSlides]);\n\n  const goToPrevious = useCallback(() => {\n    goToSlide(currentSlide - 1);\n  }, [currentSlide, goToSlide]);\n\n  const goToNext = useCallback(() => {\n    goToSlide(currentSlide + 1);\n  }, [currentSlide, goToSlide]);\n\n  // Keyboard navigation\n  useEffect(() => {\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (e.key === \"ArrowUp\" || e.key === \"k\") {\n        e.preventDefault();\n        goToPrevious();\n      } else if (e.key === \"ArrowDown\" || e.key === \"j\") {\n        e.preventDefault();\n        goToNext();\n      }\n    };\n\n    window.addEventListener(\"keydown\", handleKeyDown);\n    return () => window.removeEventListener(\"keydown\", handleKeyDown);\n  }, [goToPrevious, goToNext]);\n\n  // Update query param on scroll (delayed to avoid interference on load)\n  useEffect(() => {\n    let observer: IntersectionObserver | null = null;\n\n    const timeoutId = setTimeout(() => {\n      observer = new IntersectionObserver(\n        (entries) => {\n          for (const entry of entries) {\n            if (entry.isIntersecting) {\n              const index = slideRefs.current.findIndex((ref) => ref === entry.target);\n              if (index !== -1) {\n                setCurrentSlide(index);\n                setSearchParams(index > 0 ? { slide: String(index) } : {}, { replace: true });\n              }\n            }\n          }\n        },\n        { threshold: 0.5 }\n      );\n\n      slideRefs.current.forEach((ref) => {\n        if (ref) observer!.observe(ref);\n      });\n    }, 100);\n\n    return () => {\n      clearTimeout(timeoutId);\n      observer?.disconnect();\n    };\n  }, [slides.length, setSearchParams]);\n\n  if (loading) {\n    return <Loading />\n  }\n\n  if (error) {\n    return (\n      <main className=\"min-h-screen bg-background container mx-auto max-w-4xl py-12\">\n        <p className=\"text-center text-red-600\">{error.message}</p>\n      </main>\n    )\n  }\n\n  if (slides.length === 0) {\n    return (\n      <div className=\"flex items-center justify-center p-12 text-muted-foreground font-mono text-sm\">\n        no slides found — use \"---\" to separate slides\n      </div>\n    );\n  }\n\n  return (\n    <main className=\"slides-container\">\n      <title>{frontmatter?.title}</title>\n      <RunningBar />\n      <Header\n        slideControls={{\n          current: currentSlide,\n          total: totalSlides,\n          onPrevious: goToPrevious,\n          onNext: goToNext,\n        }}\n      />\n      <div {...{[FULLSCREEN_DATA_ATTR]: \"true\"}}>\n        {/* Title slide */}\n        <div\n          ref={(el) => { slideRefs.current[0] = el; }}\n          className=\"slide-page max-w-xl min-h-[50vh] sm:min-h-[70vh] md:min-h-screen flex items-center justify-center py-8 sm:py-12 md:py-16 px-4 mx-auto\"\n        >\n          <FrontMatter\n            title={frontmatter?.title}\n            date={frontmatter?.date}\n            description={frontmatter?.description}\n          />\n        </div>\n        <hr className=\"print:hidden\" />\n\n        {/* Content slides */}\n        {slides.map((slideContent, index) => (\n          <div key={index}>\n            <div\n              ref={(el) => { slideRefs.current[index + 1] = el; }}\n              className=\"slide-page min-h-[50vh] sm:min-h-[70vh] md:min-h-screen flex items-center justify-center py-8 sm:py-12 md:py-16 px-4 mx-auto\"\n            >\n              <SlideContent>{slideContent}</SlideContent>\n            </div>\n            {index < slides.length - 1 && <hr className=\"print:hidden\" />}\n          </div>\n        ))}\n      </div>\n    </main>\n  )\n}\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,185 @@
+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
+    );
+    if (!nextDir) {
+      throw new Error(`Path not found: ${path}`);
+    }
+    currentDir = nextDir;
+  }
+  return { directory: currentDir, file };
+}
+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)
+  );
+  return readme || null;
+}
+function findSlides(directory) {
+  const readme = directory.children.find(
+    (child) => child.type === "file" && [
+      "SLIDES.md",
+      "Slides.md",
+      "slides.md",
+      "SLIDES.mdx",
+      "Slides.mdx",
+      "slides.mdx"
+    ].includes(child.name)
+  );
+  return readme || null;
+}
+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 () => {
+    };
+  }, [path]);
+  return { directory, file, loading, error };
+}
+function useFileContent(path) {
+  const [blob, setBlob] = useState(null);
+  const [content, setContent] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(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 {
+          const text = await fetchedBlob.text();
+          setContent(text);
+        } catch {
+          setContent(null);
+        }
+      } catch (err) {
+        if (err instanceof Error && err.name === "AbortError") {
+          return;
+        }
+        setError(err instanceof Error ? err.message : "Unknown error");
+      } finally {
+        setLoading(false);
+      }
+    })();
+    return () => controller.abort();
+  }, [path]);
+  return { blob, content, loading, error };
+}
+function isSimulationRunning() {
+  const [running, setRunning] = useState(false);
+  useEffect(() => {
+    let interval;
+    const fetchStatus = async () => {
+      const response = await fetch(`/raw/.running`);
+      const text = await response.text();
+      if (text === "") {
+        setRunning(true);
+      } else {
+        setRunning(false);
+      }
+    };
+    fetchStatus();
+    interval = setInterval(fetchStatus, 1e3);
+    return () => {
+      clearInterval(interval);
+    };
+  }, []);
+  return running;
+}
+export {
+  findReadme,
+  findSlides,
+  isSimulationRunning,
+  useDirectory,
+  useFileContent
+};
+//# sourceMappingURL=client.js.map

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

@@ -0,0 +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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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "veslx",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "type": "module",
   "bin": {
     "veslx": "bin/veslx.ts"
@@ -12,11 +12,14 @@
     "src",
     "public",
     "index.html",
-    "vite.config.ts"
+    "vite.config.ts",
+    "vite.lib.config.ts"
   ],
   "scripts": {
     "dev": "bun bin/veslx.ts serve",
-    "build": "bun bin/veslx.ts build"
+    "build": "bun bin/veslx.ts build",
+    "build:lib": "vite build --config vite.lib.config.ts",
+    "prepublishOnly": "npm run build:lib"
   },
   "dependencies": {
     "acorn": "^8.15.0",
@@ -82,7 +85,8 @@
     "eslint-plugin-react-refresh": "^0.4.24",
     "globals": "^16.5.0",
     "typescript": "~5.9.3",
-    "typescript-eslint": "^8.46.3"
+    "typescript-eslint": "^8.46.3",
+    "vite-plugin-dts": "^4.5.4"
   },
   "overrides": {}
 }

package/src/main.tsx

@@ -1,7 +1,7 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import './index.css'
-import App from './App'
+import App from '@/App'
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>

package/vite.config.ts

@@ -1,4 +1,3 @@
-
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 import tailwindcss from '@tailwindcss/vite'
@@ -10,9 +9,16 @@ import remarkGfm from 'remark-gfm'
 import remarkMdxFrontmatter from 'remark-mdx-frontmatter'
 import { fileURLToPath } from 'url'
 import path from 'path'
+import fs from 'fs'
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url))
 
+// Use pre-built client if available (published package), otherwise use src/ (local dev)
+const distClientPath = path.join(__dirname, 'dist/client')
+const srcPath = path.join(__dirname, 'src')
+const usePrebuilt = fs.existsSync(path.join(distClientPath, 'main.js'))
+const clientPath = usePrebuilt ? distClientPath : srcPath
+
 export default defineConfig({
   clearScreen: false,
   cacheDir: path.join(__dirname, 'node_modules/.vite'),
@@ -37,7 +43,7 @@ export default defineConfig({
   ],
   resolve: {
     alias: {
-      '@': path.join(__dirname, 'src'),
+      '@': clientPath,
     },
   },
   server: {
@@ -60,7 +66,7 @@ export default defineConfig({
     reportCompressedSize: false,
   },
   optimizeDeps: {
-    entries: [path.join(__dirname, 'src/main.tsx')],
+    entries: [path.join(clientPath, usePrebuilt ? 'main.js' : 'main.tsx')],
     include: [
       'react',
       'react-dom',
@@ -69,6 +75,19 @@ export default defineConfig({
       'react/jsx-dev-runtime',
       '@mdx-js/react',
       'react-router-dom',
+      // Pre-bundle heavy UI deps
+      '@radix-ui/react-collapsible',
+      '@radix-ui/react-dialog',
+      '@radix-ui/react-dropdown-menu',
+      '@radix-ui/react-scroll-area',
+      '@radix-ui/react-select',
+      '@radix-ui/react-tooltip',
+      'lucide-react',
+      'embla-carousel-react',
+      'next-themes',
+      'clsx',
+      'tailwind-merge',
+      'class-variance-authority',
     ],
   },
 })

package/vite.lib.config.ts

@@ -0,0 +1,47 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import { resolve } from 'path'
+
+// Library build config - pre-compiles src/ components for distribution
+// CSS is left to runtime processing (Tailwind needs to scan for classes)
+export default defineConfig({
+  plugins: [
+    react(),
+  ],
+  build: {
+    lib: {
+      entry: resolve(__dirname, 'src/main.tsx'),
+      formats: ['es'],
+      fileName: 'main'
+    },
+    rollupOptions: {
+      // Externalize all deps - they're resolved at runtime
+      external: (id) => {
+        // Virtual modules
+        if (id === 'virtual:content-modules') return true
+        // CSS files (processed at runtime by Tailwind)
+        if (id.endsWith('.css')) return true
+        // All node_modules
+        if (id.includes('node_modules')) return true
+        // Bare imports (dependencies)
+        if (!id.startsWith('.') && !id.startsWith('/') && !id.startsWith('@/')) return true
+        return false
+      },
+      output: {
+        preserveModules: true,
+        preserveModulesRoot: 'src',
+        entryFileNames: '[name].js',
+      }
+    },
+    outDir: 'dist/client',
+    emptyOutDir: true,
+    // Don't minify for better debugging
+    minify: false,
+    sourcemap: true,
+  },
+  resolve: {
+    alias: {
+      '@': resolve(__dirname, 'src'),
+    },
+  },
+})