veslx 0.0.1

package/src/components/ui/skeleton.tsx

@@ -0,0 +1,15 @@
+import { cn } from "@/lib/utils"
+
+function Skeleton({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn("animate-pulse rounded-md bg-muted", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }

package/src/components/ui/spinner.tsx

@@ -0,0 +1,16 @@
+import { Loader2Icon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
+  return (
+    <Loader2Icon
+      role="status"
+      aria-label="Loading"
+      className={cn("size-4 animate-spin", className)}
+      {...props}
+    />
+  )
+}
+
+export { Spinner }

package/src/components/ui/tooltip.tsx

@@ -0,0 +1,28 @@
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import { cn } from "@/lib/utils"
+
+const TooltipProvider = TooltipPrimitive.Provider
+
+const Tooltip = TooltipPrimitive.Root
+
+const TooltipTrigger = TooltipPrimitive.Trigger
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Content
+    ref={ref}
+    sideOffset={sideOffset}
+    className={cn(
+      "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-tooltip-content-transform-origin]",
+      className
+    )}
+    {...props}
+  />
+))
+TooltipContent.displayName = TooltipPrimitive.Content.displayName
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

package/src/components/welcome.tsx

@@ -0,0 +1,21 @@
+
+export function Welcome() {
+  return (
+    <div className="text-muted-foreground">
+      <pre 
+        className="not-prose text-xs md:text-sm rounded"
+      >
+        {/* Rubifont on figlet */}
+{`
+▗▄▄▖▗▄▄▄▖▗▖  ▗▖ ▗▄▄▖▗▖    ▗▄▖ ▗▄▄▖ 
+▐▌ ▐▌ █  ▐▛▚▖▐▌▐▌   ▐▌   ▐▌ ▐▌▐▌ ▐▌
+▐▛▀▘  █  ▐▌ ▝▜▌▐▌▝▜▌▐▌   ▐▛▀▜▌▐▛▀▚▖
+▐▌  ▗▄█▄▖▐▌  ▐▌▝▚▄▞▘▐▙▄▄▖▐▌ ▐▌▐▙▄▞▘                                                                    
+`}
+      </pre>
+      <div className="text-xs mt-2 font-mono">
+        PingLab is a repository for running experiments on PING Spiking Neural Networks.
+      </div>
+    </div>
+  )
+}

package/src/hooks/use-key-bindings.ts

@@ -0,0 +1,72 @@
+import { useEffect } from "react";
+
+type KeyModifiers = {
+  meta?: boolean;
+  ctrl?: boolean;
+  alt?: boolean;
+  shift?: boolean;
+};
+
+type KeyBinding = {
+  key: string | string[];
+  action: () => void;
+  modifiers?: KeyModifiers;
+  preventDefault?: boolean;
+};
+
+type UseKeyBindingsOptions = {
+  enabled?: boolean | (() => boolean);
+  ignoreModifiers?: boolean;
+};
+
+export function useKeyBindings(
+  bindings: KeyBinding[],
+  options: UseKeyBindingsOptions = {}
+) {
+  const { enabled = true, ignoreModifiers = true } = options;
+
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      const isEnabled = typeof enabled === "function" ? enabled() : enabled;
+      if (!isEnabled) return;
+
+      // By default, ignore events with modifier keys unless explicitly specified
+      if (ignoreModifiers && (e.metaKey || e.ctrlKey || e.altKey)) {
+        // Check if any binding explicitly wants this modifier combination
+        const hasModifierBinding = bindings.some((b) => {
+          const mods = b.modifiers || {};
+          return mods.meta || mods.ctrl || mods.alt;
+        });
+        if (!hasModifierBinding) return;
+      }
+
+      for (const binding of bindings) {
+        const keys = Array.isArray(binding.key) ? binding.key : [binding.key];
+        const mods = binding.modifiers || {};
+
+        // Check if key matches
+        if (!keys.includes(e.key)) continue;
+
+        // Check modifiers if specified
+        if (mods.meta !== undefined && mods.meta !== e.metaKey) continue;
+        if (mods.ctrl !== undefined && mods.ctrl !== e.ctrlKey) continue;
+        if (mods.alt !== undefined && mods.alt !== e.altKey) continue;
+        if (mods.shift !== undefined && mods.shift !== e.shiftKey) continue;
+
+        // If ignoreModifiers is true and no modifiers specified, skip if any modifier is pressed
+        if (ignoreModifiers && !binding.modifiers && (e.metaKey || e.ctrlKey || e.altKey)) {
+          continue;
+        }
+
+        if (binding.preventDefault !== false) {
+          e.preventDefault();
+        }
+        binding.action();
+        return;
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [bindings, enabled, ignoreModifiers]);
+}

package/src/hooks/use-mobile.tsx

@@ -0,0 +1,19 @@
+import * as React from "react"
+
+const MOBILE_BREAKPOINT = 768
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    }
+    mql.addEventListener("change", onChange)
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    return () => mql.removeEventListener("change", onChange)
+  }, [])
+
+  return !!isMobile
+}

package/src/index.css

@@ -0,0 +1,279 @@
+
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:ital,wght@0,300;0,400;0,500;0,600;1,400&display=swap');
+
+@import "tailwindcss";
+
+@theme {
+  --color-background: hsl(var(--background));
+  --color-foreground: hsl(var(--foreground));
+  --color-card: hsl(var(--card));
+  --color-card-foreground: hsl(var(--card-foreground));
+  --color-popover: hsl(var(--popover));
+  --color-popover-foreground: hsl(var(--popover-foreground));
+  --color-primary: hsl(var(--primary));
+  --color-primary-foreground: hsl(var(--primary-foreground));
+  --color-secondary: hsl(var(--secondary));
+  --color-secondary-foreground: hsl(var(--secondary-foreground));
+  --color-muted: hsl(var(--muted));
+  --color-muted-foreground: hsl(var(--muted-foreground));
+  --color-accent: hsl(var(--accent));
+  --color-accent-foreground: hsl(var(--accent-foreground));
+  --color-destructive: hsl(var(--destructive));
+  --color-destructive-foreground: hsl(var(--destructive-foreground));
+  --color-border: hsl(var(--border));
+  --color-input: hsl(var(--input));
+  --color-ring: hsl(var(--ring));
+  --color-sidebar-background: hsl(var(--sidebar-background));
+  --color-sidebar-foreground: hsl(var(--sidebar-foreground));
+  --color-sidebar-primary: hsl(var(--sidebar-primary));
+  --color-sidebar-primary-foreground: hsl(var(--sidebar-primary-foreground));
+  --color-sidebar-accent: hsl(var(--sidebar-accent));
+  --color-sidebar-accent-foreground: hsl(var(--sidebar-accent-foreground));
+  --color-sidebar-border: hsl(var(--sidebar-border));
+  --color-sidebar-ring: hsl(var(--sidebar-ring));
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+}
+
+:root {
+  /* Clean light theme - lab notebook feel */
+  --background: 0 0% 100%;
+  --foreground: 240 10% 10%;
+  --card: 0 0% 99%;
+  --card-foreground: 240 10% 10%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 240 10% 10%;
+
+  /* Cyan/teal accent - technical, precise */
+  --primary: 190 80% 42%;
+  --primary-foreground: 0 0% 100%;
+
+  --secondary: 220 14% 96%;
+  --secondary-foreground: 240 10% 20%;
+  --muted: 220 14% 95%;
+  --muted-foreground: 220 10% 45%;
+  --accent: 220 14% 96%;
+  --accent-foreground: 240 10% 10%;
+
+  --destructive: 0 84% 60%;
+  --destructive-foreground: 0 0% 100%;
+
+  --border: 220 13% 90%;
+  --input: 220 13% 90%;
+  --ring: 190 80% 42%;
+  --radius: 0.375rem;
+
+  /* Sidebar */
+  --sidebar-background: 220 14% 98%;
+  --sidebar-foreground: 220 10% 40%;
+  --sidebar-primary: 190 80% 42%;
+  --sidebar-primary-foreground: 0 0% 100%;
+  --sidebar-accent: 220 14% 95%;
+  --sidebar-accent-foreground: 240 10% 10%;
+  --sidebar-border: 220 13% 91%;
+  --sidebar-ring: 190 80% 42%;
+
+  /* Layout widths - generous for galleries */
+  --content-width: 44rem;
+  --content-width-wide: 72rem;
+  --gallery-width: 90vw;
+  --prose-width: 60ch;
+  --page-padding: 2rem;
+}
+
+.dark {
+  /* Dark theme - zinc neutrals, no blue tint */
+  --background: 0 0% 7%;
+  --foreground: 0 0% 93%;
+  --card: 0 0% 10%;
+  --card-foreground: 0 0% 93%;
+  --popover: 0 0% 10%;
+  --popover-foreground: 0 0% 93%;
+
+  /* Cyan accent - crisp against zinc */
+  --primary: 175 70% 45%;
+  --primary-foreground: 0 0% 98%;
+
+  --secondary: 0 0% 14%;
+  --secondary-foreground: 0 0% 80%;
+  --muted: 0 0% 16%;
+  --muted-foreground: 0 0% 50%;
+  --accent: 0 0% 14%;
+  --accent-foreground: 0 0% 93%;
+
+  --destructive: 0 65% 55%;
+  --destructive-foreground: 0 0% 98%;
+
+  --border: 0 0% 22%;
+  --input: 0 0% 22%;
+  --ring: 175 70% 45%;
+
+  /* Sidebar - zinc */
+  --sidebar-background: 0 0% 10%;
+  --sidebar-foreground: 0 0% 65%;
+  --sidebar-primary: 175 70% 45%;
+  --sidebar-primary-foreground: 0 0% 98%;
+  --sidebar-accent: 0 0% 13%;
+  --sidebar-accent-foreground: 0 0% 93%;
+  --sidebar-border: 0 0% 19%;
+  --sidebar-ring: 175 70% 45%;
+}
+
+@layer base {
+  * {
+    border-color: hsl(var(--border));
+  }
+
+  html {
+    scroll-behavior: smooth;
+  }
+
+  body {
+    background-color: hsl(var(--background));
+    color: hsl(var(--foreground));
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    font-feature-settings: "cv11", "ss01", "liga", "calt";
+    line-height: 1.7;
+    letter-spacing: -0.01em;
+  }
+
+  /* Headings - clean sans-serif */
+  h1, h2, h3, h4, h5, h6 {
+    font-family: ui-sans-serif, system-ui, sans-serif;
+    font-weight: 600;
+    letter-spacing: -0.02em;
+    line-height: 1.25;
+  }
+
+  h1 {
+    font-weight: 700;
+    letter-spacing: -0.025em;
+  }
+
+  :focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 1px hsl(var(--ring)), 0 0 0 2px hsl(var(--background));
+  }
+
+  ::selection {
+    background-color: hsl(var(--primary) / 0.15);
+    color: hsl(var(--foreground));
+  }
+
+  /* Prose styling */
+  .prose {
+    line-height: 1.8;
+    letter-spacing: 0.005em;
+    max-width: var(--prose-width);
+  }
+
+  .prose p {
+    margin-bottom: 1.5em;
+  }
+
+  .prose a {
+    color: hsl(var(--primary));
+    text-decoration: underline;
+    text-underline-offset: 2px;
+    text-decoration-color: hsl(var(--primary) / 0.4);
+    transition: text-decoration-color 0.15s;
+  }
+
+  .prose a:hover {
+    text-decoration-color: hsl(var(--primary));
+  }
+
+  /* Keyboard hint styling */
+  kbd {
+    font-family: ui-monospace, monospace;
+    font-size: 0.75em;
+    padding: 0.125rem 0.375rem;
+    border-radius: 0.25rem;
+    border: 1px solid hsl(var(--border));
+    background-color: hsl(var(--muted) / 0.5);
+  }
+
+  /* Code blocks - terminal aesthetic */
+  pre {
+    font-family: ui-monospace, monospace;
+    font-size: 0.875rem;
+    letter-spacing: 0;
+  }
+
+  code {
+    font-family: ui-monospace, monospace;
+    font-size: 0.875em;
+    letter-spacing: 0;
+  }
+
+  /* Scrollbar styling */
+  ::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+
+  ::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background-color: hsl(var(--border));
+    border-radius: 9999px;
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    background-color: hsl(var(--muted-foreground) / 0.3);
+  }
+
+  /* Custom cursor for interactive elements */
+  button, a, [role="button"] {
+    cursor: pointer;
+  }
+}
+
+/* Animation utilities */
+@keyframes fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes fade-in-slow {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes slide-up {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.animate-fade-in {
+  animation: fade-in 0.4s ease-out forwards;
+}
+
+.animate-fade-in-slow {
+  animation: fade-in-slow 0.6s ease-out forwards;
+}
+
+.animate-slide-up {
+  animation: slide-up 0.5s ease-out forwards;
+}

package/src/lib/constants.ts

@@ -0,0 +1,10 @@
+// Data attributes for fullscreen components
+export const FULLSCREEN_DATA_ATTR = "data-fullscreen-active";
+
+/**
+ * Check if any fullscreen component (Gallery or Slides) is currently active.
+ * Components using fullscreen should set the data-fullscreen-active attribute.
+ */
+export function isFullscreenActive(): boolean {
+  return document.querySelector(`[${FULLSCREEN_DATA_ATTR}="true"]`) !== null;
+}

package/src/lib/format-date.tsx

@@ -0,0 +1,6 @@
+
+import { format } from 'date-fns'
+
+export function formatDate(date: string | number | Date): string {
+  return format(new Date(date), "dd MMM, yy")
+}

package/src/lib/format-file-size.ts

@@ -0,0 +1,10 @@
+/**
+ * Format a file size in bytes to a human-readable string.
+ */
+export function formatFileSize(bytes: number): string {
+  if (bytes === 0) return "0 B";
+  const k = 1024;
+  const sizes = ["B", "KB", "MB", "GB"];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return `${(bytes / Math.pow(k, i)).toFixed(1)} ${sizes[i]}`;
+}

package/src/lib/parameter-utils.ts

@@ -0,0 +1,134 @@
+import { load } from "js-yaml";
+
+export type ParameterValue = string | number | boolean | null | ParameterValue[] | { [key: string]: ParameterValue };
+
+/**
+ * Extract a value from nested data using a jq-like path.
+ * Supports:
+ *   - .foo.bar  → nested keys
+ *   - .foo[0]   → array index
+ *   - .foo[]    → all array elements (returns array)
+ */
+export function extractPath(data: ParameterValue, path: string): ParameterValue | undefined {
+  if (!path || path === ".") return data;
+
+  const cleanPath = path.startsWith(".") ? path.slice(1) : path;
+  if (!cleanPath) return data;
+
+  const segments: Array<{ type: "key" | "index" | "all"; value: string | number }> = [];
+  let current = "";
+  let i = 0;
+
+  while (i < cleanPath.length) {
+    const char = cleanPath[i];
+
+    if (char === ".") {
+      if (current) {
+        segments.push({ type: "key", value: current });
+        current = "";
+      }
+      i++;
+    } else if (char === "[") {
+      if (current) {
+        segments.push({ type: "key", value: current });
+        current = "";
+      }
+      const closeIdx = cleanPath.indexOf("]", i);
+      if (closeIdx === -1) return undefined;
+      const inner = cleanPath.slice(i + 1, closeIdx);
+      if (inner === "") {
+        segments.push({ type: "all", value: 0 });
+      } else {
+        const idx = parseInt(inner, 10);
+        if (isNaN(idx)) return undefined;
+        segments.push({ type: "index", value: idx });
+      }
+      i = closeIdx + 1;
+    } else {
+      current += char;
+      i++;
+    }
+  }
+  if (current) {
+    segments.push({ type: "key", value: current });
+  }
+
+  let result: ParameterValue | undefined = data;
+
+  for (const seg of segments) {
+    if (result === null || result === undefined) return undefined;
+
+    if (seg.type === "key") {
+      if (typeof result !== "object" || Array.isArray(result)) return undefined;
+      result = (result as Record<string, ParameterValue>)[seg.value as string];
+    } else if (seg.type === "index") {
+      if (!Array.isArray(result)) return undefined;
+      result = result[seg.value as number];
+    } else if (seg.type === "all") {
+      if (!Array.isArray(result)) return undefined;
+      // Return the array itself for further processing
+    }
+  }
+
+  return result;
+}
+
+export function getValueType(value: ParameterValue): "string" | "number" | "boolean" | "null" | "array" | "object" {
+  if (value === null) return "null";
+  if (Array.isArray(value)) return "array";
+  if (typeof value === "object") return "object";
+  if (typeof value === "boolean") return "boolean";
+  if (typeof value === "number") return "number";
+  return "string";
+}
+
+export function formatNumber(value: number): string {
+  if (Math.abs(value) < 0.0001 && value !== 0) return value.toExponential(1);
+  if (Math.abs(value) >= 10000) return value.toExponential(1);
+  if (Number.isInteger(value)) return value.toString();
+  const str = value.toString();
+  if (str.length > 6) return value.toPrecision(4);
+  return str;
+}
+
+export function formatValue(value: ParameterValue): string {
+  if (value === null) return "null";
+  if (typeof value === "boolean") return value ? "true" : "false";
+  if (typeof value === "number") return formatNumber(value);
+  if (Array.isArray(value)) return `[${value.length}]`;
+  if (typeof value === "object") return "{...}";
+  return String(value);
+}
+
+/**
+ * Parse YAML or JSON content based on file extension.
+ */
+export function parseConfigFile(content: string, path: string): Record<string, ParameterValue> | null {
+  if (path.endsWith(".yaml") || path.endsWith(".yml")) {
+    try {
+      return load(content) as Record<string, ParameterValue>;
+    } catch {
+      return null;
+    }
+  }
+
+  if (path.endsWith(".json")) {
+    try {
+      return JSON.parse(content) as Record<string, ParameterValue>;
+    } catch {
+      return null;
+    }
+  }
+
+  return null;
+}
+
+/**
+ * Derive a label from a jq-like keyPath.
+ * E.g., ".base.N_E" → "N_E"
+ */
+export function deriveLabelFromPath(keyPath: string): string {
+  const cleanPath = keyPath.startsWith(".") ? keyPath.slice(1) : keyPath;
+  const parts = cleanPath.split(".");
+  return parts[parts.length - 1].replace(/\[\d+\]/g, "");
+}

package/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

package/src/main.tsx

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

package/src/pages/home.tsx

@@ -0,0 +1,39 @@
+import { useParams } from "react-router-dom"
+import { useDirectory } from "../../plugin/src/client";
+import Loading from "@/components/loading";
+import PostList from "@/components/post-list";
+import { ErrorDisplay } from "@/components/page-error";
+import { RunningBar } from "@/components/running-bar";
+import { Header } from "@/components/header";
+
+export function Home() {
+  const { "*": path = "." } = useParams();
+  const { directory, loading, error } = useDirectory(path)
+
+  if (error) {
+    return <ErrorDisplay error={error} path={path} />;
+  }
+
+  if (loading) {
+    return (
+      <Loading />
+    )
+  }
+
+  return (
+    <div className="flex min-h-screen flex-col bg-background noise-overlay">
+      <RunningBar />
+      <Header />
+      <main className="flex-1 mx-auto w-full max-w-[var(--content-width)] px-[var(--page-padding)]">
+        <title>{`Pinglab ${path}`}</title>
+        <main className="flex flex-col gap-6 mb-32 mt-32">
+          {directory && (
+            <div className="animate-fade-in">
+              <PostList directory={directory}/>
+            </div>
+          )}
+        </main>
+      </main>
+    </div>
+  )
+}