veslx 0.0.1

package/src/components/gallery/hooks/use-gallery-images.ts

@@ -0,0 +1,103 @@
+import { useMemo } from "react";
+import { useTheme } from "next-themes";
+import { useDirectory } from "../../../../plugin/src/client";
+import { FileEntry } from "../../../../plugin/src/lib";
+import { minimatch } from "minimatch";
+
+function sortPathsNumerically(paths: string[]): void {
+  paths.sort((a, b) => {
+    const nums = (s: string) => (s.match(/\d+/g) || []).map(Number);
+    const na = nums(a);
+    const nb = nums(b);
+    const len = Math.max(na.length, nb.length);
+    for (let i = 0; i < len; i++) {
+      const diff = (na[i] ?? 0) - (nb[i] ?? 0);
+      if (diff !== 0) return diff;
+    }
+    return a.localeCompare(b);
+  });
+}
+
+function filterPathsByTheme(paths: string[], theme: string | undefined): string[] {
+  const pathGroups = new Map<string, { light?: string; dark?: string; original?: string }>();
+
+  paths.forEach(path => {
+    if (path.endsWith('_light.png')) {
+      const baseName = path.replace('_light.png', '');
+      const group = pathGroups.get(baseName) || {};
+      group.light = path;
+      pathGroups.set(baseName, group);
+    } else if (path.endsWith('_dark.png')) {
+      const baseName = path.replace('_dark.png', '');
+      const group = pathGroups.get(baseName) || {};
+      group.dark = path;
+      pathGroups.set(baseName, group);
+    } else {
+      pathGroups.set(path, { original: path });
+    }
+  });
+
+  const filtered: string[] = [];
+  pathGroups.forEach((group, baseName) => {
+    if (group.original) {
+      filtered.push(group.original);
+    } else {
+      const isDark = theme === 'dark';
+      const preferredPath = isDark ? group.dark : group.light;
+      const fallbackPath = isDark ? group.light : group.dark;
+      filtered.push(preferredPath || fallbackPath || baseName);
+    }
+  });
+
+  return filtered;
+}
+
+
+export function useGalleryImages({
+  path,
+  globs = null,
+  limit,
+  page = 0,
+}: {
+  path?: string;
+  globs?: string[] | null;
+  limit?: number | null;
+  page?: number;
+}) {
+  const { resolvedTheme } = useTheme();
+
+  let resolvedPath = path;
+
+  const { directory } = useDirectory(resolvedPath);
+
+  const paths = useMemo(() => {
+    if (!directory) return [];
+
+    const imageChildren = directory.children.filter((child): child is FileEntry => {
+      return !!child.name.match(/\.(png|jpeg|gif|svg|webp)$/i) && child.type === "file";
+    });
+
+    let imagePaths = imageChildren.map(child => child.path);
+
+    if (globs && globs.length > 0) {
+      imagePaths = imagePaths.filter(p => {
+        return globs.some(glob => minimatch(p.split('/').pop() || '', glob));
+      });
+    }
+
+    sortPathsNumerically(imagePaths);
+    let filtered = filterPathsByTheme(imagePaths, resolvedTheme);
+
+    if (limit) {
+      filtered = filtered.slice(page * limit, (page + 1) * limit);
+    }
+
+    return filtered;
+  }, [directory, globs, resolvedTheme, limit, page]);
+
+  return {
+    paths,
+    isLoading: !directory,
+    isEmpty: directory !== undefined && paths.length === 0,
+  };
+}

package/src/components/gallery/hooks/use-lightbox.ts

@@ -0,0 +1,40 @@
+import { useKeyBindings } from "@/hooks/use-key-bindings"; 
+import { useCallback, useState } from "react";
+
+export function useLightbox(totalImages: number) {
+  const [selectedIndex, setSelectedIndex] = useState<number | null>(null);
+
+  const open = useCallback((index: number) => {
+    setSelectedIndex(index);
+  }, []);
+
+  const close = useCallback(() => {
+    setSelectedIndex(null);
+  }, []);
+
+  const goToPrevious = useCallback(() => {
+    setSelectedIndex(prev => prev !== null && prev > 0 ? prev - 1 : prev);
+  }, []);
+
+  const goToNext = useCallback(() => {
+    setSelectedIndex(prev => prev !== null && prev < totalImages - 1 ? prev + 1 : prev);
+  }, [totalImages]);
+
+  useKeyBindings(
+    [
+      { key: "Escape", action: close },
+      { key: "ArrowLeft", action: goToPrevious },
+      { key: "ArrowRight", action: goToNext },
+    ],
+    { enabled: () => selectedIndex !== null }
+  );
+
+  return {
+    selectedIndex,
+    open,
+    close,
+    goToPrevious,
+    goToNext,
+    isOpen: selectedIndex !== null,
+  };
+}

package/src/components/gallery/index.tsx

@@ -0,0 +1,134 @@
+import { useMemo } from "react";
+import { Image } from "lucide-react";
+import { Lightbox, LightboxImage } from "@/components/gallery/components/lightbox";
+import { useGalleryImages } from "./hooks/use-gallery-images";
+import { useLightbox } from "./hooks/use-lightbox";
+import { LoadingImage } from "./components/loading-image";
+import { FigureHeader } from "./components/figure-header";
+import { FigureCaption } from "./components/figure-caption";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from "@/components/ui/carousel"
+
+function getImageLabel(path: string): string {
+  const filename = path.split('/').pop() || path;
+  return filename
+    .replace(/\.(png|jpg|jpeg|gif|svg|webp)$/i, '')
+    .replace(/[_-]/g, ' ')
+    .replace(/\s+/g, ' ')
+    .trim();
+}
+
+function getImageUrl(path: string): string {
+  return `/raw/${path}`;
+}
+
+export default function Gallery({
+  path,
+  globs = null, 
+  caption,
+  captionLabel,
+  title,
+  subtitle,
+  limit = null,
+  page = 0,
+}: {
+  path?: string;
+  globs?: string[] | null;
+  caption?: string;
+  captionLabel?: string;
+  title?: string;
+  subtitle?: string;
+  limit?: number | null;
+  page?: number;
+}) {
+  const { paths, isLoading, isEmpty } = useGalleryImages({
+    path,
+    globs,
+    limit,
+    page: page,
+  });
+
+  const lightbox = useLightbox(paths.length);
+
+  const images: LightboxImage[] = useMemo(() =>
+    paths.map(p => ({ src: getImageUrl(p), label: getImageLabel(p) })),
+    [paths]
+  );
+
+  if (isLoading) {
+    return (
+      <div className="not-prose py-4 md:py-6">
+        <div className="grid grid-cols-3 gap-2 sm:gap-4 max-w-[var(--gallery-width)] mx-auto">
+          {[...Array(3)].map((_, i) => (
+            <div
+              key={i}
+              className="aspect-[4/3] bg-muted/30 animate-pulse"
+              style={{ animationDelay: `${i * 100}ms` }}
+            />
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  if (isEmpty) {
+    return (
+      <div className="not-prose py-16 text-center">
+        <div className="inline-flex items-center gap-3 text-muted-foreground/60">
+          <Image className="h-4 w-4" />
+          <span className="font-mono text-sm tracking-wide">no image(s) found</span>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <>
+      <div className="rounded-lg not-prose flex flex-col gap-0 relative p-4 -mx-[calc((var(--gallery-width)-var(--content-width))/2+var(--page-padding))]">
+        <FigureHeader title={title} subtitle={subtitle} />
+
+        <Carousel>
+          <CarouselContent>
+            {images.map((img, index) => (
+              <CarouselItem 
+                key={index} 
+                className="mx-auto md:basis-1/2 lg:basis-1/3 cursor-pointer transition-transform duration-700 ease-out-expo hover:scale-[1.02]"
+                // wrapperClassName="h-full"
+                onClick={() => lightbox.open(index)}
+              >
+                <LoadingImage
+                  src={img.src}
+                  alt={img.label}
+                />
+              </CarouselItem>
+            ))}
+          </CarouselContent>
+
+          {images.length > 3 && (
+            <>
+              <CarouselPrevious />
+              <CarouselNext />
+            </>
+          )}          
+        </Carousel>
+
+        <FigureCaption caption={caption} label={captionLabel} />
+      </div>
+
+      {lightbox.isOpen && lightbox.selectedIndex !== null && (
+        <Lightbox
+          images={images}
+          selectedIndex={lightbox.selectedIndex}
+          onClose={lightbox.close}
+          onPrevious={lightbox.goToPrevious}
+          onNext={lightbox.goToNext}
+        />
+      )}
+    </>
+  );
+}

package/src/components/gallery/lib/render-math-in-text.tsx

@@ -0,0 +1,47 @@
+import { ReactNode } from "react";
+import katex from "katex";
+
+export function renderMathInText(text: string): ReactNode {
+  // Match $...$ for inline math and $$...$$ for display math
+  const parts: ReactNode[] = [];
+  let lastIndex = 0;
+  // Match display math ($$...$$) first, then inline math ($...$)
+  const regex = /\$\$([^$]+)\$\$|\$([^$]+)\$/g;
+  let match;
+  let key = 0;
+
+  while ((match = regex.exec(text)) !== null) {
+    // Add text before this match
+    if (match.index > lastIndex) {
+      parts.push(text.slice(lastIndex, match.index));
+    }
+
+    const isDisplay = match[1] !== undefined;
+    const mathContent = match[1] || match[2];
+
+    try {
+      const html = katex.renderToString(mathContent, {
+        displayMode: isDisplay,
+        throwOnError: false,
+      });
+      parts.push(
+        <span
+          key={key++}
+          dangerouslySetInnerHTML={{ __html: html }}
+        />
+      );
+    } catch {
+      // If KaTeX fails, just show the original text
+      parts.push(match[0]);
+    }
+
+    lastIndex = match.index + match[0].length;
+  }
+
+  // Add remaining text
+  if (lastIndex < text.length) {
+    parts.push(text.slice(lastIndex));
+  }
+
+  return parts.length === 1 && typeof parts[0] === 'string' ? parts[0] : <>{parts}</>;
+}

package/src/components/header.tsx

@@ -0,0 +1,68 @@
+import { Link } from "react-router-dom";
+import { ModeToggle } from "./mode-toggle";
+import { SiGithub } from "@icons-pack/react-simple-icons";
+import { ChevronUp, ChevronDown } from "lucide-react";
+
+interface HeaderProps {
+  slideControls?: {
+    current: number;
+    total: number;
+    onPrevious: () => void;
+    onNext: () => void;
+  };
+}
+
+export function Header({ slideControls }: HeaderProps = {}) {
+  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">
+        <nav className="flex items-center gap-1">
+          <Link
+            to="/"
+            className="rounded-lg font-mono py-1.5 text-sm font-medium text-muted-foreground hover:underline"
+          >
+            pl
+          </Link>
+        </nav>
+
+        <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">
+          <Link
+            to="https://github.com/eoinmurray/pinglab"
+            target="_blank"
+            className="text-muted-foreground/70 hover:text-foreground transition-colors duration-300"
+            aria-label="GitHub"
+          >
+            <SiGithub className="h-4 w-4" />
+          </Link>
+          <ModeToggle />
+        </nav>
+      </div>
+    </header>
+  );
+}

package/src/components/index.ts

@@ -0,0 +1,5 @@
+
+export { default as Gallery } from './gallery'
+export { ParameterTable } from './parameter-table'
+export { ParameterBadge } from './parameter-badge'
+export { Slide } from './slide'

package/src/components/loading.tsx

@@ -0,0 +1,16 @@
+export default function Loading() {
+  return (
+    <main className="min-h-screen flex items-center justify-center bg-background">
+      <div className="flex flex-col items-center gap-6 animate-fade-in">
+        <div className="flex items-center gap-3">
+          <div className="w-1.5 h-1.5 bg-primary/60 rounded-full animate-pulse" />
+          <div className="w-1.5 h-1.5 bg-primary/40 rounded-full animate-pulse" style={{ animationDelay: '150ms' }} />
+          <div className="w-1.5 h-1.5 bg-primary/20 rounded-full animate-pulse" style={{ animationDelay: '300ms' }} />
+        </div>
+        <p className="font-mono text-xs text-muted-foreground/50 tracking-widest uppercase">
+          loading
+        </p>
+      </div>
+    </main>
+  )
+}

package/src/components/mdx-components.tsx

@@ -0,0 +1,163 @@
+
+import Gallery from '@/components/gallery'
+import { ParameterTable } from '@/components/parameter-table'
+import { ParameterBadge } from '@/components/parameter-badge'
+
+function generateId(children: unknown): string {
+  return children
+    ?.toString()
+    .toLowerCase()
+    .replace(/[^a-z0-9\s-]/g, '')
+    .replace(/\s+/g, '-') ?? ''
+}
+
+// Shared MDX components - lab notebook / coder aesthetic
+export const mdxComponents = {
+  Gallery,
+
+  ParameterTable,
+
+  ParameterBadge,
+
+  // Headings - clean sans-serif
+  h1: (props: React.HTMLAttributes<HTMLHeadingElement>) => {
+    const id = generateId(props.children)
+    return (
+      <h1
+        id={id}
+        className="text-2xl font-semibold tracking-tight mt-12 mb-4 first:mt-0"
+        {...props}
+      />
+    )
+  },
+  h2: (props: React.HTMLAttributes<HTMLHeadingElement>) => {
+    const id = generateId(props.children)
+    return (
+      <h2
+        id={id}
+        className="text-xl font-semibold tracking-tight mt-10 mb-3 pb-2 border-b border-border"
+        {...props}
+      />
+    )
+  },
+  h3: (props: React.HTMLAttributes<HTMLHeadingElement>) => {
+    const id = generateId(props.children)
+    return (
+      <h3
+        id={id}
+        className="text-lg font-medium tracking-tight mt-8 mb-2"
+        {...props}
+      />
+    )
+  },
+  h4: (props: React.HTMLAttributes<HTMLHeadingElement>) => {
+    const id = generateId(props.children)
+    return (
+      <h4
+        id={id}
+        className="text-base font-medium mt-6 mb-2"
+        {...props}
+      />
+    )
+  },
+  h5: (props: React.HTMLAttributes<HTMLHeadingElement>) => {
+    const id = generateId(props.children)
+    return (
+      <h5
+        id={id}
+        className="text-sm font-medium mt-4 mb-1"
+        {...props}
+      />
+    )
+  },
+
+  // Code blocks - IDE/terminal style
+  pre: (props: React.HTMLAttributes<HTMLPreElement>) => (
+    <pre
+      className="not-prose w-full overflow-x-auto p-4 text-sm bg-muted/50 border border-border rounded-md font-mono my-6"
+      {...props}
+    />
+  ),
+  code: (props: React.HTMLAttributes<HTMLElement> & { className?: string }) => {
+    const isInline = !props.className?.includes('language-')
+    if (isInline) {
+      return (
+        <code
+          className="font-mono text-[0.85em] bg-muted px-1.5 py-0.5 rounded text-primary"
+          {...props}
+        />
+      )
+    }
+    return <code {...props} />
+  },
+
+  // Blockquote
+  blockquote: (props: React.HTMLAttributes<HTMLQuoteElement>) => (
+    <blockquote
+      className="border-l-2 border-primary pl-4 my-6 text-muted-foreground"
+      {...props}
+    />
+  ),
+
+  // Lists
+  ul: (props: React.HTMLAttributes<HTMLUListElement>) => (
+    <ul className="my-4 ml-6 list-disc marker:text-muted-foreground" {...props} />
+  ),
+  ol: (props: React.HTMLAttributes<HTMLOListElement>) => (
+    <ol className="my-4 ml-6 list-decimal marker:text-muted-foreground" {...props} />
+  ),
+  li: (props: React.HTMLAttributes<HTMLLIElement>) => (
+    <li className="mt-1.5" {...props} />
+  ),
+
+  // Links
+  a: (props: React.AnchorHTMLAttributes<HTMLAnchorElement>) => (
+    <a
+      className="text-primary hover:underline underline-offset-2"
+      {...props}
+    />
+  ),
+
+  // Tables
+  table: (props: React.TableHTMLAttributes<HTMLTableElement>) => (
+    <div className="not-prose my-6 overflow-x-auto border border-border rounded-md">
+      <table className="w-full text-sm border-collapse" {...props} />
+    </div>
+  ),
+  thead: (props: React.HTMLAttributes<HTMLTableSectionElement>) => (
+    <thead className="bg-muted/50" {...props} />
+  ),
+  tbody: (props: React.HTMLAttributes<HTMLTableSectionElement>) => (
+    <tbody {...props} />
+  ),
+  tr: (props: React.HTMLAttributes<HTMLTableRowElement>) => (
+    <tr className="border-b border-border last:border-b-0" {...props} />
+  ),
+  th: (props: React.ThHTMLAttributes<HTMLTableCellElement>) => (
+    <th
+      className="px-4 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider"
+      {...props}
+    />
+  ),
+  td: (props: React.TdHTMLAttributes<HTMLTableCellElement>) => (
+    <td className="px-4 py-3 align-top" {...props} />
+  ),
+
+  // Horizontal rule
+  hr: (props: React.HTMLAttributes<HTMLHRElement>) => (
+    <hr className="my-8 border-t border-border" {...props} />
+  ),
+
+  // Paragraph
+  p: (props: React.HTMLAttributes<HTMLParagraphElement>) => (
+    <p className="leading-relaxed mb-4 last:mb-0" {...props} />
+  ),
+
+  // Strong/emphasis
+  strong: (props: React.HTMLAttributes<HTMLElement>) => (
+    <strong className="font-semibold" {...props} />
+  ),
+  em: (props: React.HTMLAttributes<HTMLElement>) => (
+    <em className="italic" {...props} />
+  ),
+}

package/src/components/mode-toggle.tsx

@@ -0,0 +1,44 @@
+import { Moon, Sun, Monitor } from "lucide-react"
+import { useTheme } from "next-themes"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+
+export function ModeToggle() {
+  const { theme, setTheme } = useTheme()
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <button
+          className="relative p-2 text-muted-foreground/70 hover:text-foreground transition-colors duration-300"
+          aria-label="Toggle theme"
+        >
+          <Sun className={`h-4 w-4 transition-all duration-300 ${theme === "light" ? "scale-100 rotate-0" : "scale-0 -rotate-90 absolute top-2 left-2"}`} />
+          <Moon className={`h-4 w-4 transition-all duration-300 ${theme === "dark" ? "scale-100 rotate-0" : "scale-0 rotate-90 absolute top-2 left-2"}`} />
+          <Monitor className={`h-4 w-4 transition-all duration-300 ${theme === "system" || !theme ? "scale-100" : "scale-0 absolute top-2 left-2"}`} />
+        </button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuRadioGroup value={theme} onValueChange={setTheme}>
+          <DropdownMenuRadioItem value="light">
+            <Sun className="mr-2 h-4 w-4" />
+            Light
+          </DropdownMenuRadioItem>
+          <DropdownMenuRadioItem value="dark">
+            <Moon className="mr-2 h-4 w-4" />
+            Dark
+          </DropdownMenuRadioItem>
+          <DropdownMenuRadioItem value="system">
+            <Monitor className="mr-2 h-4 w-4" />
+            System
+          </DropdownMenuRadioItem>
+        </DropdownMenuRadioGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}

package/src/components/page-error.tsx

@@ -0,0 +1,59 @@
+
+import { DirectoryError } from "../../plugin/src/client";
+
+export function ErrorDisplay({ error, path }: { error: DirectoryError; path: string }) {
+  const containerClass = "min-h-screen bg-background container mx-auto max-w-[var(--content-width)] py-24 px-[var(--page-padding)]";
+
+  switch (error.type) {
+    case 'config_not_found':
+      return (
+        <main className={containerClass}>
+          <div className="text-center space-y-4">
+            <h1 className="text-2xl font-semibold tracking-tight">Setup Required</h1>
+            <p className="text-muted-foreground">
+              Could not find <code className="font-mono text-sm bg-muted px-2 py-1">.veslx.json</code>
+            </p>
+            <p className="text-muted-foreground/70 text-sm">
+              Run the veslx build script to generate the directory index.
+            </p>
+          </div>
+        </main>
+      );
+
+    case 'path_not_found':
+      return (
+        <main className={containerClass}>
+          <div className="text-center space-y-4">
+            <h1 className="font-mono text-6xl tracking-tighter text-muted-foreground/30">404</h1>
+            <p className="text-lg text-foreground">Page not found</p>
+            <p className="text-muted-foreground text-sm">
+              <code className="font-mono bg-muted px-2 py-1">{path}</code>
+            </p>
+          </div>
+        </main>
+      );
+
+    case 'parse_error':
+      return (
+        <main className={containerClass}>
+          <div className="text-center space-y-4">
+            <h1 className="text-2xl font-semibold text-destructive">Configuration Error</h1>
+            <p className="text-muted-foreground">
+              Failed to parse <code className="font-mono text-sm bg-muted px-2 py-1">.veslx.json</code>
+            </p>
+          </div>
+        </main>
+      );
+
+    case 'fetch_error':
+    default:
+      return (
+        <main className={containerClass}>
+          <div className="text-center space-y-4">
+            <h1 className="text-2xl font-semibold text-destructive">Error</h1>
+            <p className="text-muted-foreground">{error.message}</p>
+          </div>
+        </main>
+      );
+  }
+}