veslx 0.1.22 → 0.1.23

package/dist/client/components/slides-renderer.js.map

@@ -1 +1 @@
-{"version":3,"file":"slides-renderer.js","sources":["../../../src/components/slides-renderer.tsx"],"sourcesContent":["import { ReactNode } from 'react'\nimport { mdxComponents } from '@/components/mdx-components'\nimport { Slide } from '@/components/slide'\n\n/**\n * MDX components for slides - includes the Slide component\n */\nexport const slidesMdxComponents = {\n  ...mdxComponents,\n  Slide,\n}\n\n/**\n * Renders a single slide's content\n */\nexport function SlideContent({ children }: { children: ReactNode }) {\n  return (\n    <div className=\"slide-content prose dark:prose-invert prose-headings:tracking-tight prose-p:leading-relaxed max-w-xl\">\n      {children}\n    </div>\n  )\n}\n"],"names":[],"mappings":";;;AAOO,MAAM,sBAAsB;AAAA,EACjC,GAAG;AAAA,EACH;AACF;"}
+{"version":3,"file":"slides-renderer.js","sources":["../../../src/components/slides-renderer.tsx"],"sourcesContent":["import { ReactNode } from 'react'\nimport { mdxComponents } from '@/components/mdx-components'\nimport { Slide } from '@/components/slide'\n\n/**\n * MDX components for slides - includes the Slide component\n */\nexport const slidesMdxComponents = {\n  ...mdxComponents,\n  Slide,\n}\n\n/**\n * Renders a single slide's content\n */\nexport function SlideContent({ children }: { children: ReactNode }) {\n  return (\n    <div className=\"slide-content prose dark:prose-invert prose-headings:tracking-tight prose-p:leading-relaxed\">\n      {children}\n    </div>\n  )\n}\n"],"names":[],"mappings":";;;AAOO,MAAM,sBAAsB;AAAA,EACjC,GAAG;AAAA,EACH;AACF;"}

package/dist/client/pages/home.js

@@ -5,7 +5,6 @@ import PostList from "../components/post-list.js";
 import { ErrorDisplay } from "../components/page-error.js";
 import { RunningBar } from "../components/running-bar.js";
 import { Header } from "../components/header.js";
-import { ContentTabs } from "../components/content-tabs.js";
 import { getViewCounts, filterVisiblePosts, directoryToPostEntries } from "../lib/content-classification.js";
 import siteConfig from "virtual:veslx-config";
 function Home({ view }) {
@@ -16,7 +15,7 @@ function Home({ view }) {
   const { directory, error } = useDirectory(directoryPath);
   const activeView = view ?? config.defaultView;
   const isRoot = path === "." || path === "" || isViewRoute;
-  const counts = directory ? getViewCounts(filterVisiblePosts(directoryToPostEntries(directory))) : { posts: 0, docs: 0, all: 0 };
+  directory ? getViewCounts(filterVisiblePosts(directoryToPostEntries(directory))) : {};
   if (error) {
     return /* @__PURE__ */ jsx(ErrorDisplay, { error, path });
   }
@@ -30,10 +29,7 @@ function Home({ view }) {
           /* @__PURE__ */ jsx("h1", { className: "text-2xl md:text-3xl font-semibold tracking-tight text-foreground", children: config.name }),
           config.description && /* @__PURE__ */ jsx("p", { className: "mt-2 text-muted-foreground", children: config.description })
         ] }),
-        /* @__PURE__ */ jsxs("div", { className: "", children: [
-          isRoot && directory && /* @__PURE__ */ jsx("div", { className: "animate-fade-in", children: /* @__PURE__ */ jsx(ContentTabs, { value: activeView, counts }) }),
-          directory && /* @__PURE__ */ jsx("div", { className: "animate-fade-in", children: /* @__PURE__ */ jsx(PostList, { directory, view: isRoot ? activeView : "all" }) })
-        ] })
+        /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: directory && /* @__PURE__ */ jsx("div", { className: "animate-fade-in", children: /* @__PURE__ */ jsx(PostList, { directory, view: isRoot ? activeView : "all" }) }) })
       ] })
     ] })
   ] });

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

@@ -1 +1 @@
-{"version":3,"file":"home.js","sources":["../../../src/pages/home.tsx"],"sourcesContent":["import { useParams } from \"react-router-dom\"\nimport { useDirectory } from \"../../plugin/src/client\";\nimport Loading from \"@/components/loading\";\nimport PostList from \"@/components/post-list\";\nimport { ErrorDisplay } from \"@/components/page-error\";\nimport { RunningBar } from \"@/components/running-bar\";\nimport { Header } from \"@/components/header\";\nimport { ContentTabs } from \"@/components/content-tabs\";\nimport {\n  type ContentView,\n  directoryToPostEntries,\n  filterVisiblePosts,\n  getViewCounts,\n} from \"@/lib/content-classification\";\nimport siteConfig from \"virtual:veslx-config\";\n\ninterface HomeProps {\n  view?: ContentView;\n}\n\nexport function Home({ view }: HomeProps) {\n  const { \"*\": path = \".\" } = useParams();\n  const config = siteConfig;\n\n  // Normalize path - \"posts\", \"docs\", and \"all\" are view routes, not directories\n  const isViewRoute = path === \"posts\" || path === \"docs\" || path === \"all\";\n  const directoryPath = isViewRoute ? \".\" : path;\n\n  const { directory, loading, error } = useDirectory(directoryPath)\n\n  // Use prop view, fallback to config default\n  const activeView = view ?? config.defaultView;\n\n  const isRoot = path === \".\" || path === \"\" || isViewRoute;\n\n  // Calculate counts for tabs (only meaningful on root)\n  const counts = directory\n    ? getViewCounts(filterVisiblePosts(directoryToPostEntries(directory)))\n    : { posts: 0, docs: 0, all: 0 };\n\n  if (error) {\n    return <ErrorDisplay error={error} path={path} />;\n  }\n\n  if (loading) {\n    return (\n      <Loading />\n    )\n  }\n\n  return (\n    <div className=\"flex min-h-screen flex-col bg-background noise-overlay\">\n      <RunningBar />\n      <Header />\n      <main className=\"flex-1 mx-auto w-full max-w-[var(--content-width)] px-[var(--page-padding)]\">\n        <title>{isRoot ? config.name : `${config.name} - ${path}`}</title>\n        <main className=\"flex flex-col gap-8 mb-32 mt-32\">\n          {isRoot && (\n            <div className=\"animate-fade-in\">\n              <h1 className=\"text-2xl md:text-3xl font-semibold tracking-tight text-foreground\">\n                {config.name}\n              </h1>\n              {config.description && (\n                <p className=\"mt-2 text-muted-foreground\">\n                  {config.description}\n                </p>\n              )}\n            </div>\n          )}\n\n          <div className=\"\">\n            {isRoot && directory && (\n              <div className=\"animate-fade-in\">\n                <ContentTabs value={activeView} counts={counts} />\n              </div>\n            )}\n            {directory && (\n              <div className=\"animate-fade-in\">\n                <PostList directory={directory} view={isRoot ? activeView : 'all'} />\n              </div>\n            )}\n          </div>\n        </main>\n      </main>\n    </div>\n  )\n}\n"],"names":[],"mappings":";;;;;;;;;;AAoBO,SAAS,KAAK,EAAE,QAAmB;AACxC,QAAM,EAAE,KAAK,OAAO,IAAA,IAAQ,UAAA;AAC5B,QAAM,SAAS;AAGf,QAAM,cAAc,SAAS,WAAW,SAAS,UAAU,SAAS;AACpE,QAAM,gBAAgB,cAAc,MAAM;AAE1C,QAAM,EAAE,WAAoB,UAAU,aAAa,aAAa;AAGhE,QAAM,aAAa,QAAQ,OAAO;AAElC,QAAM,SAAS,SAAS,OAAO,SAAS,MAAM;AAG9C,QAAM,SAAS,YACX,cAAc,mBAAmB,uBAAuB,SAAS,CAAC,CAAC,IACnE,EAAE,OAAO,GAAG,MAAM,GAAG,KAAK,EAAA;AAE9B,MAAI,OAAO;AACT,WAAO,oBAAC,cAAA,EAAa,OAAc,KAAA,CAAY;AAAA,EACjD;AAQA,SACE,qBAAC,OAAA,EAAI,WAAU,0DACb,UAAA;AAAA,IAAA,oBAAC,YAAA,EAAW;AAAA,wBACX,QAAA,EAAO;AAAA,IACR,qBAAC,QAAA,EAAK,WAAU,+EACd,UAAA;AAAA,MAAA,oBAAC,SAAA,EAAO,mBAAS,OAAO,OAAO,GAAG,OAAO,IAAI,MAAM,IAAI,GAAA,CAAG;AAAA,MAC1D,qBAAC,QAAA,EAAK,WAAU,mCACb,UAAA;AAAA,QAAA,UACC,qBAAC,OAAA,EAAI,WAAU,mBACb,UAAA;AAAA,UAAA,oBAAC,MAAA,EAAG,WAAU,qEACX,UAAA,OAAO,MACV;AAAA,UACC,OAAO,eACN,oBAAC,OAAE,WAAU,8BACV,iBAAO,YAAA,CACV;AAAA,QAAA,GAEJ;AAAA,QAGF,qBAAC,OAAA,EAAI,WAAU,IACZ,UAAA;AAAA,UAAA,UAAU,aACT,oBAAC,OAAA,EAAI,WAAU,mBACb,8BAAC,aAAA,EAAY,OAAO,YAAY,OAAA,CAAgB,EAAA,CAClD;AAAA,UAED,aACC,oBAAC,OAAA,EAAI,WAAU,mBACb,UAAA,oBAAC,UAAA,EAAS,WAAsB,MAAM,SAAS,aAAa,MAAA,CAAO,EAAA,CACrE;AAAA,QAAA,EAAA,CAEJ;AAAA,MAAA,EAAA,CACF;AAAA,IAAA,EAAA,CACF;AAAA,EAAA,GACF;AAEJ;"}
+{"version":3,"file":"home.js","sources":["../../../src/pages/home.tsx"],"sourcesContent":["import { useParams } from \"react-router-dom\"\nimport { useDirectory } from \"../../plugin/src/client\";\nimport Loading from \"@/components/loading\";\nimport PostList from \"@/components/post-list\";\nimport { ErrorDisplay } from \"@/components/page-error\";\nimport { RunningBar } from \"@/components/running-bar\";\nimport { Header } from \"@/components/header\";\nimport { ContentTabs } from \"@/components/content-tabs\";\nimport {\n  type ContentView,\n  directoryToPostEntries,\n  filterVisiblePosts,\n  getViewCounts,\n} from \"@/lib/content-classification\";\nimport siteConfig from \"virtual:veslx-config\";\n\ninterface HomeProps {\n  view?: ContentView;\n}\n\nexport function Home({ view }: HomeProps) {\n  const { \"*\": path = \".\" } = useParams();\n  const config = siteConfig;\n\n  // Normalize path - \"posts\", \"docs\", and \"all\" are view routes, not directories\n  const isViewRoute = path === \"posts\" || path === \"docs\" || path === \"all\";\n  const directoryPath = isViewRoute ? \".\" : path;\n\n  const { directory, loading, error } = useDirectory(directoryPath)\n\n  // Use prop view, fallback to config default\n  const activeView = view ?? config.defaultView;\n\n  const isRoot = path === \".\" || path === \"\" || isViewRoute;\n\n  // Calculate counts for tabs (only meaningful on root)\n  const counts = directory\n    ? getViewCounts(filterVisiblePosts(directoryToPostEntries(directory)))\n    : { posts: 0, docs: 0, all: 0 };\n\n  if (error) {\n    return <ErrorDisplay error={error} path={path} />;\n  }\n\n  if (loading) {\n    return (\n      <Loading />\n    )\n  }\n\n  return (\n    <div className=\"flex min-h-screen flex-col bg-background noise-overlay\">\n      <RunningBar />\n      <Header />\n      <main className=\"flex-1 mx-auto w-full max-w-[var(--content-width)] px-[var(--page-padding)]\">\n        <title>{isRoot ? config.name : `${config.name} - ${path}`}</title>\n        <main className=\"flex flex-col gap-8 mb-32 mt-32\">\n          {isRoot && (\n            <div className=\"animate-fade-in\">\n              <h1 className=\"text-2xl md:text-3xl font-semibold tracking-tight text-foreground\">\n                {config.name}\n              </h1>\n              {config.description && (\n                <p className=\"mt-2 text-muted-foreground\">\n                  {config.description}\n                </p>\n              )}\n            </div>\n          )}\n\n          <div className=\"flex flex-col gap-2\">\n            {/* {isRoot && directory && (\n              <div className=\"animate-fade-in\">\n                <ContentTabs value={activeView} counts={counts} />\n              </div>\n            )} */}\n            {directory && (\n              <div className=\"animate-fade-in\">\n                <PostList directory={directory} view={isRoot ? activeView : 'all'} />\n              </div>\n            )}\n          </div>\n        </main>\n      </main>\n    </div>\n  )\n}\n"],"names":[],"mappings":";;;;;;;;;AAoBO,SAAS,KAAK,EAAE,QAAmB;AACxC,QAAM,EAAE,KAAK,OAAO,IAAA,IAAQ,UAAA;AAC5B,QAAM,SAAS;AAGf,QAAM,cAAc,SAAS,WAAW,SAAS,UAAU,SAAS;AACpE,QAAM,gBAAgB,cAAc,MAAM;AAE1C,QAAM,EAAE,WAAoB,UAAU,aAAa,aAAa;AAGhE,QAAM,aAAa,QAAQ,OAAO;AAElC,QAAM,SAAS,SAAS,OAAO,SAAS,MAAM;AAG/B,cACX,cAAc,mBAAmB,uBAAuB,SAAS,CAAC,CAAC,IACnE,CAA4B;AAEhC,MAAI,OAAO;AACT,WAAO,oBAAC,cAAA,EAAa,OAAc,KAAA,CAAY;AAAA,EACjD;AAQA,SACE,qBAAC,OAAA,EAAI,WAAU,0DACb,UAAA;AAAA,IAAA,oBAAC,YAAA,EAAW;AAAA,wBACX,QAAA,EAAO;AAAA,IACR,qBAAC,QAAA,EAAK,WAAU,+EACd,UAAA;AAAA,MAAA,oBAAC,SAAA,EAAO,mBAAS,OAAO,OAAO,GAAG,OAAO,IAAI,MAAM,IAAI,GAAA,CAAG;AAAA,MAC1D,qBAAC,QAAA,EAAK,WAAU,mCACb,UAAA;AAAA,QAAA,UACC,qBAAC,OAAA,EAAI,WAAU,mBACb,UAAA;AAAA,UAAA,oBAAC,MAAA,EAAG,WAAU,qEACX,UAAA,OAAO,MACV;AAAA,UACC,OAAO,eACN,oBAAC,OAAE,WAAU,8BACV,iBAAO,YAAA,CACV;AAAA,QAAA,GAEJ;AAAA,4BAGD,OAAA,EAAI,WAAU,uBAMZ,UAAA,iCACE,OAAA,EAAI,WAAU,mBACb,UAAA,oBAAC,YAAS,WAAsB,MAAM,SAAS,aAAa,OAAO,GACrE,EAAA,CAEJ;AAAA,MAAA,EAAA,CACF;AAAA,IAAA,EAAA,CACF;AAAA,EAAA,GACF;AAEJ;"}

package/dist/client/pages/slides.js

@@ -13,14 +13,14 @@ function SlidesPage() {
   const [searchParams, setSearchParams] = useSearchParams();
   const mdxPath = rawPath;
   const { Content, frontmatter, slideCount, loading, error } = useMDXSlides(mdxPath);
-  const totalSlides = (slideCount || 0) + 1;
+  const totalSlides = slideCount || 0;
   const [currentSlide, setCurrentSlide] = useState(0);
   const titleSlideRef = useRef(null);
   const contentRef = useRef(null);
   useEffect(() => {
     const slideParam = parseInt(searchParams.get("slide") || "0", 10);
     if (slideParam > 0 && contentRef.current) {
-      const slideEl = contentRef.current.querySelector(`[data-slide-index="${slideParam - 1}"]`);
+      const slideEl = contentRef.current.querySelector(`[data-slide-index="${slideParam}"]`);
       if (slideEl) {
         slideEl.scrollIntoView({ behavior: "auto" });
       }
@@ -33,7 +33,7 @@ function SlidesPage() {
           if (entry.isIntersecting) {
             const index = entry.target.getAttribute("data-slide-index");
             if (index !== null) {
-              const slideNum = index === "title" ? 0 : parseInt(index, 10) + 1;
+              const slideNum = index === "title" ? 0 : parseInt(index, 10);
               setCurrentSlide(slideNum);
               setSearchParams(slideNum > 0 ? { slide: String(slideNum) } : {}, { replace: true });
             }
@@ -53,19 +53,15 @@ function SlidesPage() {
   }, [Content, setSearchParams]);
   const goToPrevious = useCallback(() => {
     const prev = Math.max(0, currentSlide - 1);
-    if (prev === 0 && titleSlideRef.current) {
-      titleSlideRef.current.scrollIntoView({ behavior: "smooth" });
-    } else if (contentRef.current) {
-      const slideEl = contentRef.current.querySelector(`[data-slide-index="${prev - 1}"]`);
+    if (contentRef.current) {
+      const slideEl = contentRef.current.querySelector(`[data-slide-index="${prev}"]`);
       slideEl == null ? void 0 : slideEl.scrollIntoView({ behavior: "smooth" });
     }
   }, [currentSlide]);
   const goToNext = useCallback(() => {
     const next = Math.min(totalSlides - 1, currentSlide + 1);
-    if (next === 0 && titleSlideRef.current) {
-      titleSlideRef.current.scrollIntoView({ behavior: "smooth" });
-    } else if (contentRef.current) {
-      const slideEl = contentRef.current.querySelector(`[data-slide-index="${next - 1}"]`);
+    if (contentRef.current) {
+      const slideEl = contentRef.current.querySelector(`[data-slide-index="${next}"]`);
       slideEl == null ? void 0 : slideEl.scrollIntoView({ behavior: "smooth" });
     }
   }, [currentSlide, totalSlides]);

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

@@ -1 +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 { RunningBar } from \"@/components/running-bar\";\nimport { Header } from \"@/components/header\";\nimport { useMDXSlides } from \"@/hooks/use-mdx-content\";\nimport { slidesMdxComponents } from \"@/components/slides-renderer\";\nimport { FrontmatterProvider } from \"@/lib/frontmatter-context\";\n\n\nexport function SlidesPage() {\n  const { \"*\": rawPath = \".\" } = useParams();\n  const [searchParams, setSearchParams] = useSearchParams();\n\n  // The path includes the .mdx extension from the route\n  const mdxPath = rawPath;\n\n  // Load the compiled MDX module (now includes slideCount export)\n  const { Content, frontmatter, slideCount, loading, error } = useMDXSlides(mdxPath);\n\n  // Total slides = 1 (title) + content slides\n  const totalSlides = (slideCount || 0) + 1;\n\n  const [currentSlide, setCurrentSlide] = useState(0);\n  const titleSlideRef = useRef<HTMLDivElement>(null);\n  const contentRef = useRef<HTMLDivElement>(null);\n\n  // Scroll to slide on initial load if query param is set\n  useEffect(() => {\n    const slideParam = parseInt(searchParams.get(\"slide\") || \"0\", 10);\n    if (slideParam > 0 && contentRef.current) {\n      const slideEl = contentRef.current.querySelector(`[data-slide-index=\"${slideParam - 1}\"]`);\n      if (slideEl) {\n        slideEl.scrollIntoView({ behavior: \"auto\" });\n      }\n    }\n  }, [searchParams, Content]);\n\n  // Track current slide based on scroll position\n  useEffect(() => {\n    const observer = new IntersectionObserver(\n      (entries) => {\n        for (const entry of entries) {\n          if (entry.isIntersecting) {\n            const index = entry.target.getAttribute(\"data-slide-index\");\n            if (index !== null) {\n              const slideNum = index === \"title\" ? 0 : parseInt(index, 10) + 1;\n              setCurrentSlide(slideNum);\n              setSearchParams(slideNum > 0 ? { slide: String(slideNum) } : {}, { replace: true });\n            }\n          }\n        }\n      },\n      { threshold: 0.5 }\n    );\n\n    // Observe title slide\n    if (titleSlideRef.current) {\n      observer.observe(titleSlideRef.current);\n    }\n\n    // Observe content slides\n    if (contentRef.current) {\n      const slides = contentRef.current.querySelectorAll(\"[data-slide-index]\");\n      slides.forEach((slide) => observer.observe(slide));\n    }\n\n    return () => observer.disconnect();\n  }, [Content, setSearchParams]);\n\n  // Keyboard/scroll navigation helpers\n  const goToPrevious = useCallback(() => {\n    const prev = Math.max(0, currentSlide - 1);\n    if (prev === 0 && titleSlideRef.current) {\n      titleSlideRef.current.scrollIntoView({ behavior: \"smooth\" });\n    } else if (contentRef.current) {\n      const slideEl = contentRef.current.querySelector(`[data-slide-index=\"${prev - 1}\"]`);\n      slideEl?.scrollIntoView({ behavior: \"smooth\" });\n    }\n  }, [currentSlide]);\n\n  const goToNext = useCallback(() => {\n    const next = Math.min(totalSlides - 1, currentSlide + 1);\n    if (next === 0 && titleSlideRef.current) {\n      titleSlideRef.current.scrollIntoView({ behavior: \"smooth\" });\n    } else if (contentRef.current) {\n      const slideEl = contentRef.current.querySelector(`[data-slide-index=\"${next - 1}\"]`);\n      slideEl?.scrollIntoView({ behavior: \"smooth\" });\n    }\n  }, [currentSlide, totalSlides]);\n\n  // Keyboard navigation\n  useEffect(() => {\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (e.key === \"ArrowUp\" || e.key === \"ArrowLeft\" || e.key === \"k\") {\n        e.preventDefault();\n        goToPrevious();\n      } else if (e.key === \"ArrowDown\" || e.key === \"ArrowRight\" || 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  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 (!Content) {\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      <FrontmatterProvider frontmatter={frontmatter}>\n        <div {...{[FULLSCREEN_DATA_ATTR]: \"true\"}}>\n          <div ref={contentRef}>\n            <Content components={slidesMdxComponents} />\n          </div>\n        </div>\n      </FrontmatterProvider>\n    </main>\n  )\n}\n"],"names":[],"mappings":"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"}
+{"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 { RunningBar } from \"@/components/running-bar\";\nimport { Header } from \"@/components/header\";\nimport { useMDXSlides } from \"@/hooks/use-mdx-content\";\nimport { slidesMdxComponents } from \"@/components/slides-renderer\";\nimport { FrontmatterProvider } from \"@/lib/frontmatter-context\";\n\n\nexport function SlidesPage() {\n  const { \"*\": rawPath = \".\" } = useParams();\n  const [searchParams, setSearchParams] = useSearchParams();\n\n  // The path includes the .mdx extension from the route\n  const mdxPath = rawPath;\n\n  // Load the compiled MDX module (now includes slideCount export)\n  const { Content, frontmatter, slideCount, loading, error } = useMDXSlides(mdxPath);\n\n  const totalSlides = slideCount || 0;\n\n  const [currentSlide, setCurrentSlide] = useState(0);\n  const titleSlideRef = useRef<HTMLDivElement>(null);\n  const contentRef = useRef<HTMLDivElement>(null);\n\n  // Scroll to slide on initial load if query param is set\n  useEffect(() => {\n    const slideParam = parseInt(searchParams.get(\"slide\") || \"0\", 10);\n    if (slideParam > 0 && contentRef.current) {\n      const slideEl = contentRef.current.querySelector(`[data-slide-index=\"${slideParam}\"]`);\n      if (slideEl) {\n        slideEl.scrollIntoView({ behavior: \"auto\" });\n      }\n    }\n  }, [searchParams, Content]);\n\n  // Track current slide based on scroll position\n  useEffect(() => {\n    const observer = new IntersectionObserver(\n      (entries) => {\n        for (const entry of entries) {\n          if (entry.isIntersecting) {\n            const index = entry.target.getAttribute(\"data-slide-index\");\n            if (index !== null) {\n              const slideNum = index === \"title\" ? 0 : parseInt(index, 10);\n              setCurrentSlide(slideNum);\n              setSearchParams(slideNum > 0 ? { slide: String(slideNum) } : {}, { replace: true });\n            }\n          }\n        }\n      },\n      { threshold: 0.5 }\n    );\n\n    // Observe title slide\n    if (titleSlideRef.current) {\n      observer.observe(titleSlideRef.current);\n    }\n\n    // Observe content slides\n    if (contentRef.current) {\n      const slides = contentRef.current.querySelectorAll(\"[data-slide-index]\");\n      slides.forEach((slide) => observer.observe(slide));\n    }\n\n    return () => observer.disconnect();\n  }, [Content, setSearchParams]);\n\n  // Keyboard/scroll navigation helpers\n  const goToPrevious = useCallback(() => {\n    const prev = Math.max(0, currentSlide - 1);\n    if (contentRef.current) {\n      const slideEl = contentRef.current.querySelector(`[data-slide-index=\"${prev}\"]`);\n      slideEl?.scrollIntoView({ behavior: \"smooth\" });\n    }\n  }, [currentSlide]);\n\n  const goToNext = useCallback(() => {\n    const next = Math.min(totalSlides - 1, currentSlide + 1);\n    if (contentRef.current) {\n      const slideEl = contentRef.current.querySelector(`[data-slide-index=\"${next}\"]`);\n      slideEl?.scrollIntoView({ behavior: \"smooth\" });\n    }\n  }, [currentSlide, totalSlides]);\n\n  // Keyboard navigation\n  useEffect(() => {\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (e.key === \"ArrowUp\" || e.key === \"ArrowLeft\" || e.key === \"k\") {\n        e.preventDefault();\n        goToPrevious();\n      } else if (e.key === \"ArrowDown\" || e.key === \"ArrowRight\" || 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  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 (!Content) {\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      <FrontmatterProvider frontmatter={frontmatter}>\n        <div {...{[FULLSCREEN_DATA_ATTR]: \"true\"}}>\n          <div ref={contentRef}>\n            <Content components={slidesMdxComponents} />\n          </div>\n        </div>\n      </FrontmatterProvider>\n    </main>\n  )\n}\n"],"names":[],"mappings":"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"}

package/index.html

@@ -5,6 +5,19 @@
     <link rel="icon" type="image/svg+xml" href="/logo_dark.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>veslx</title>
+    <!-- Prevent FOUC: apply theme before render -->
+    <script>
+      (function() {
+        var theme = localStorage.getItem('theme');
+        var isDark = theme === 'dark' || (!theme && window.matchMedia('(prefers-color-scheme: dark)').matches);
+        if (isDark) document.documentElement.classList.add('dark');
+        document.documentElement.style.colorScheme = isDark ? 'dark' : 'light';
+      })();
+    </script>
+    <style>
+      html { background: hsl(0 0% 100%); }
+      html.dark { background: hsl(0 0% 7%); }
+    </style>
     <!-- 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.22",
+  "version": "0.1.23",
   "type": "module",
   "repository": {
     "type": "git",

package/src/components/content-tabs.tsx

@@ -8,9 +8,9 @@ interface ContentTabsProps {
 }
 
 const views: { key: ContentView; label: string; path: string }[] = [
-  { key: "posts", label: "posts", path: "/posts" },
-  { key: "docs", label: "docs", path: "/docs" },
-  { key: "all", label: "all", path: "/all" },
+  { key: "posts", label: "Posts", path: "/posts" },
+  { key: "docs", label: "Docs", path: "/docs" },
+  // { key: "all", label: "All", path: "/all" },
 ];
 
 export function ContentTabs({ value, counts }: ContentTabsProps) {
@@ -28,7 +28,7 @@ export function ContentTabs({ value, counts }: ContentTabsProps) {
   };
 
   return (
-    <nav className="flex justify-end items-center gap-3 font-mono font-medium text-xs text-muted-foreground">
+    <nav className="flex items-center gap-3 font-mono font-medium text-xs text-muted-foreground">
       {views.map((view) => {
         const disabled = isDisabled(view.key);
 

package/src/components/gallery/components/figure-caption.tsx

@@ -4,7 +4,7 @@ export function FigureCaption({ caption, label }: { caption?: string; label?: st
   if (!caption && !label) return null;
 
   return (
-    <figcaption className="px-[calc((var(--gallery-width)-var(--content-width))/2)] mt-4">
+    <figcaption className="mt-4">
       <p className="text-[13px] leading-[1.6] text-muted-foreground">
         {label && (
           <span className="font-semibold text-foreground tracking-tight">

package/src/components/gallery/components/figure-header.tsx

@@ -4,7 +4,7 @@ export function FigureHeader({ title, subtitle }: { title?: string; subtitle?: s
   if (!title && !subtitle) return null;
 
   return (
-    <div className="px-[calc((var(--gallery-width)-var(--content-width))/2)] mb-4">
+    <div className="mb-4">
       {title && (
         <h3 className="text-[15px] font-medium tracking-[-0.01em] text-foreground">
           {renderMathInText(title)}

package/src/components/gallery/components/lightbox.tsx

@@ -31,7 +31,7 @@ export function Lightbox({
 
   return createPortal(
     <div
-      className="fixed inset-0 z-[9999] bg-background/98 backdrop-blur-md animate-fade-in-slow"
+      className="fixed inset-0 z-[9999] bg-background/98 backdrop-blur-md animate-[fade-in_150ms_ease-out]"
       onClick={onClose}
       {...{ [FULLSCREEN_DATA_ATTR]: "true" }}
       style={{ top: 0, left: 0, right: 0, bottom: 0 }}

package/src/components/gallery/index.tsx

@@ -29,13 +29,15 @@ function getImageUrl(path: string): string {
 
 export default function Gallery({
   path,
-  globs = null, 
+  globs = null,
   caption,
   captionLabel,
   title,
   subtitle,
   limit = null,
   page = 0,
+  children,
+  childAlign = "right",
 }: {
   path?: string;
   globs?: string[] | null;
@@ -45,6 +47,8 @@ export default function Gallery({
   subtitle?: string;
   limit?: number | null;
   page?: number;
+  children?: React.ReactNode;
+  childAlign?: "left" | "right";
 }) {
   const { paths, isLoading, isEmpty } = useGalleryImages({
     path,
@@ -91,39 +95,74 @@ export default function Gallery({
     );
   }
 
+  const isCompact = images.length <= 3;
+  const isSingleWithChildren = images.length === 1 && children;
+
+  const imageElement = (index: number, img: LightboxImage, className?: string) => (
+    <div
+      key={index}
+      className={`aspect-square overflow-hidden rounded-sm bg-muted/10 cursor-pointer group ${className || ''}`}
+      onClick={() => lightbox.open(index)}
+    >
+      <LoadingImage
+        src={img.src}
+        alt={img.label}
+        className="object-contain transition-transform duration-500 ease-out group-hover:scale-[1.02]"
+      />
+    </div>
+  );
+
   return (
     <>
-      <figure className="not-prose relative py-6 md:py-8 -mx-[calc((var(--gallery-width)-var(--content-width))/2+var(--page-padding))]">
-        <FigureHeader title={title} subtitle={subtitle} />
+      <figure className={`not-prose relative py-6 md:py-8 ${isCompact ? '' : '-mx-[calc((var(--gallery-width)-var(--content-width))/2+var(--page-padding))] px-[calc((var(--gallery-width)-var(--content-width))/2)]'}`}>
+        {!isSingleWithChildren && <FigureHeader title={title} subtitle={subtitle} />}
 
-        <Carousel className="w-full">
-          <CarouselContent className={`-ml-2 md:-ml-3 ${images.length < 3 ? 'justify-center' : ''}`}>
-            {images.map((img, index) => (
-              <CarouselItem
-                key={index}
-                className={`pl-2 md:pl-3 md:basis-1/2 lg:basis-1/3 cursor-pointer group ${images.length < 3 ? 'flex-none' : ''}`}
-                onClick={() => lightbox.open(index)}
-              >
-                <div className="aspect-square overflow-hidden rounded-sm bg-muted/10">
-                  <LoadingImage
-                    src={img.src}
-                    alt={img.label}
-                    className="object-contain transition-transform duration-500 ease-out group-hover:scale-[1.02]"
-                  />
-                </div>
-              </CarouselItem>
-            ))}
-          </CarouselContent>
+        {isSingleWithChildren ? (
+          <div className={`flex gap-6 ${childAlign === 'left' ? '' : 'flex-row-reverse'}`}>
+            <div className="flex-1 text-sm leading-relaxed text-foreground/90 space-y-3 [&>ul]:space-y-1.5 [&>ul]:list-disc [&>ul]:pl-5 [&>ol]:space-y-1.5 [&>ol]:list-decimal [&>ol]:pl-5 flex flex-col">
+              {(title || subtitle) && <div className="invisible"><FigureHeader title={title} subtitle={subtitle} /></div>}
+              <div>{children}</div>
+            </div>
+            <div className="w-3/5 flex-shrink-0">
+              <FigureHeader title={title} subtitle={subtitle} />
+              {imageElement(0, images[0])}
+              <FigureCaption caption={caption} label={captionLabel} />
+            </div>
+          </div>
+        ) : isCompact ? (
+          <div className="flex gap-3">
+            {images.map((img, index) => imageElement(index, img, 'flex-1'))}
+          </div>
+        ) : (
+          <Carousel className="w-full">
+            <CarouselContent className="-ml-2 md:-ml-3">
+              {images.map((img, index) => (
+                <CarouselItem
+                  key={index}
+                  className="pl-2 md:pl-3 md:basis-1/2 lg:basis-1/3 cursor-pointer group"
+                  onClick={() => lightbox.open(index)}
+                >
+                  <div className="aspect-square overflow-hidden rounded-sm bg-muted/10">
+                    <LoadingImage
+                      src={img.src}
+                      alt={img.label}
+                      className="object-contain transition-transform duration-500 ease-out group-hover:scale-[1.02]"
+                    />
+                  </div>
+                </CarouselItem>
+              ))}
+            </CarouselContent>
 
-          {images.length > 3 && (
-            <>
-              <CarouselPrevious className="left-4 bg-background/80 backdrop-blur-sm border-border/50 hover:bg-background hover:border-border" />
-              <CarouselNext className="right-4 bg-background/80 backdrop-blur-sm border-border/50 hover:bg-background hover:border-border" />
-            </>
-          )}
-        </Carousel>
+            {images.length > 3 && (
+              <>
+                <CarouselPrevious className="left-4 bg-background/80 backdrop-blur-sm border-border/50 hover:bg-background hover:border-border" />
+                <CarouselNext className="right-4 bg-background/80 backdrop-blur-sm border-border/50 hover:bg-background hover:border-border" />
+              </>
+            )}
+          </Carousel>
+        )}
 
-        <FigureCaption caption={caption} label={captionLabel} />
+        {!isSingleWithChildren && <FigureCaption caption={caption} label={captionLabel} />}
       </figure>
 
       {lightbox.isOpen && lightbox.selectedIndex !== null && (

package/src/components/header.tsx

@@ -1,8 +1,9 @@
-import { Link } from "react-router-dom";
+import { Link, useParams } from "react-router-dom";
 import { ModeToggle } from "./mode-toggle";
 import { SiGithub } from "@icons-pack/react-simple-icons";
 import { ChevronUp, ChevronDown } from "lucide-react";
 import siteConfig from "virtual:veslx-config";
+import { cn } from "@/lib/utils";
 
 interface HeaderProps {
   slideControls?: {
@@ -16,6 +17,8 @@ interface HeaderProps {
 export function Header({ slideControls }: HeaderProps = {}) {
   const config = siteConfig;
 
+  const { "*": path } = useParams()
+
   return (
     <header className="print:hidden fixed top-0 left-0 right-0 z-40">
       <div className="mx-auto w-full px-[var(--page-padding)] flex items-center gap-8 py-4">
@@ -30,31 +33,47 @@ export function Header({ slideControls }: HeaderProps = {}) {
 
         <div className="flex-1" />
 
-        {/* Slide navigation controls */}
-        {slideControls && (
-          <nav className="flex items-center gap-1">
-            <button
-              onClick={slideControls.onPrevious}
-              className="p-1.5 text-muted-foreground/70 hover:text-foreground transition-colors duration-200"
-              title="Previous slide (↑)"
-            >
-              <ChevronUp className="h-4 w-4" />
-            </button>
-            <span className="font-mono text-xs text-muted-foreground/70 tabular-nums min-w-[3ch] text-center">
-              {slideControls.current + 1}/{slideControls.total}
-            </span>
-            <button
-              onClick={slideControls.onNext}
-              className="p-1.5 text-muted-foreground/70 hover:text-foreground transition-colors duration-200"
-              title="Next slide (↓)"
-            >
-              <ChevronDown className="h-4 w-4" />
-            </button>
-          </nav>
-        )}
-
         {/* Navigation */}
-        <nav className="flex items-center gap-2">
+        <nav className="flex items-center gap-4">
+          {slideControls && (
+            <>
+              <button
+                onClick={slideControls.onPrevious}
+                className="p-1.5 text-muted-foreground/70 hover:text-foreground transition-colors duration-200"
+                title="Previous slide (↑)"
+              >
+                <ChevronUp className="h-4 w-4" />
+              </button>
+              <span className="font-mono text-xs text-muted-foreground/70 tabular-nums min-w-[3ch] text-center">
+                {slideControls.current + 1}/{slideControls.total}
+              </span>
+              <button
+                onClick={slideControls.onNext}
+                className="p-1.5 text-muted-foreground/70 hover:text-foreground transition-colors duration-200"
+                title="Next slide (↓)"
+              >
+                <ChevronDown className="h-4 w-4" />
+              </button>
+            </>
+          )}
+          <Link
+            to={`/posts`}
+            className={cn(
+              "font-medium text-muted-foreground/70 hover:text-foreground transition-colors duration-300",
+              path?.startsWith("posts") && "font-semibold text-foreground",
+            )}
+          >
+            Posts
+          </Link>
+          <Link
+            to={`/docs`}
+            className={cn(
+              "font-medium text-muted-foreground/70 hover:text-foreground transition-colors duration-300",
+              path?.startsWith("docs") && "font-semibold text-foreground",
+            )}
+          >
+            Docs
+          </Link>
           {config.github && (
             <Link
               to={`https://github.com/${config.github}`}

package/src/components/mdx-components.tsx

@@ -3,6 +3,10 @@ import Gallery from '@/components/gallery'
 import { ParameterTable } from '@/components/parameter-table'
 import { ParameterBadge } from '@/components/parameter-badge'
 import { FrontMatter } from './front-matter'
+import { HeroSlide } from './slides/hero-slide'
+import { FigureSlide } from './slides/figure-slide'
+import { TextSlide } from './slides/text-slide'
+import { SlideOutline } from './slides/slide-outline'
 
 /**
  * Smart link component that uses React Router for internal links
@@ -77,6 +81,14 @@ export const mdxComponents = {
 
   ParameterBadge,
 
+  HeroSlide,
+
+  FigureSlide,
+
+  TextSlide,
+
+  SlideOutline,
+
   // Headings - clean sans-serif
   h1: (props: React.HTMLAttributes<HTMLHeadingElement>) => {
     const id = generateId(props.children)

package/src/components/post-list.tsx

@@ -2,7 +2,7 @@ import { Link } from "react-router-dom";
 import { cn } from "@/lib/utils";
 import type { DirectoryEntry } from "../../plugin/src/lib";
 import { formatDate } from "@/lib/format-date";
-import { ArrowRight } from "lucide-react";
+import { ArrowRight, Presentation } from "lucide-react";
 import {
   type ContentView,
   type PostEntry,
@@ -117,6 +117,8 @@ export default function PostList({ directory, view = 'all' }: PostListProps) {
           linkPath = `/${post.path}`;
         }
 
+        const isSlides = linkPath.endsWith('SLIDES.mdx');
+
         return (
           <Link
             key={post.path}
@@ -126,15 +128,7 @@ export default function PostList({ directory, view = 'all' }: PostListProps) {
               "transition-colors duration-150",
             )}
           >
-            <article className="flex items-start gap-4">
-              {/* Date - left side, fixed width */}
-              <time
-                dateTime={date?.toISOString()}
-                className="font-mono text-xs text-muted-foreground tabular-nums w-20 flex-shrink-0 pt-0.5"
-              >
-                {date ? formatDate(date) : <span className="text-muted-foreground/30">—</span>}
-              </time>
-
+            <article className="flex items-center gap-4">
               {/* Main content */}
               <div className="flex-1 min-w-0">
                 <h3 className={cn(
@@ -152,6 +146,16 @@ export default function PostList({ directory, view = 'all' }: PostListProps) {
                   </p>
                 )}
               </div>
+
+              {isSlides && (
+                <Presentation className="h-3 w-3 text-muted-foreground" />
+              )}
+              <time
+                dateTime={date?.toISOString()}
+                className="font-mono text-xs text-muted-foreground tabular-nums w-20 flex-shrink-0"
+              >
+                {date && formatDate(date)}
+              </time>
             </article>
           </Link>
         );

package/src/components/slides/figure-slide.tsx

@@ -0,0 +1,16 @@
+
+
+export function FigureSlide({
+  title,
+  src,
+}: {
+  title: string;
+  src: string;
+}) {
+  return (
+    <div className="figure-slide">
+      <h2>{title}</h2>
+      <img src={src} alt={title} />
+    </div>
+  );
+}

package/src/components/slides/hero-slide.tsx

@@ -0,0 +1,34 @@
+
+export function HeroSlide({
+  title,
+  subtitle,
+  author,
+  date,
+}: {
+  title: string;
+  subtitle?: string;
+  author?: string;
+  date?: string;
+}) {
+  return (
+    <div>
+      <h1 className="text-[clamp(2.5rem,6vw,5rem)] font-semibold leading-[1.1] tracking-[-0.02em] text-foreground text-balance">
+        {title}
+      </h1>
+
+      {subtitle && (
+        <p className="text-[clamp(1rem,2vw,1.5rem)] text-muted-foreground max-w-[50ch] leading-relaxed">
+          {subtitle}
+        </p>
+      )}
+
+      {(author || date) && (
+        <div className="flex flex-wrap gap-x-4 gap-y-1 text-sm text-muted-foreground mt-4">
+          {author && <span>{author}</span>}
+          {author && date && <span className="text-border">·</span>}
+          {date && <span>{date}</span>}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/slides/slide-outline.tsx

@@ -0,0 +1,38 @@
+
+
+export function SlideOutline({
+  children,
+  className,
+  size="md"
+}: {
+  children?: React.ReactNode;
+  className?: string;
+  size?: "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "full";
+}) {
+
+  const wClasses: Record<string, string> = {
+    sm: "max-w-lg",
+    md: "max-w-2xl",
+    lg: "max-w-5xl",
+    xl: "max-w-7xl",
+    full: "max-w-full",
+  };
+
+  const wClassName = `${wClasses[size]} ${className ?? ""}`;
+
+  const hClasses: Record<string, string> = {
+    sm: "min-h-[300px]",
+    md: "min-h-[400px]",
+    lg: "min-h-[500px]",
+    xl: "min-h-[600px]",
+    full: "min-h-[600px]",
+  };
+
+  const hClassName = `${hClasses[size]} ${className ?? ""}`;
+
+  return (
+    <div className={`border rounded relative left-1/2 -translate-x-1/2 w-screen ${wClassName} ${hClassName} ${className}`}>
+      {children}
+    </div>
+  );
+}