veslx 0.1.35 → 0.1.36

package/bin/lib/serve.ts

@@ -102,7 +102,15 @@ export default async function serve(dir?: string) {
     ],
   })
 
-  await server.listen()
+  try {
+    await server.listen()
+  } catch (err: any) {
+    if (err?.code === 'EADDRINUSE') {
+      log.error(`port already in use`)
+      process.exit(1)
+    }
+    throw err
+  }
 
   const info = server.resolvedUrls
   if (info?.local[0]) {

package/dist/client/components/gallery/index.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { useMemo } from "react";
+import { useRef, useMemo, useEffect } from "react";
 import { Image } from "lucide-react";
 import { Lightbox } from "./components/lightbox.js";
 import { useGalleryImages } from "./hooks/use-gallery-images.js";
@@ -7,6 +7,23 @@ import { useLightbox } from "./hooks/use-lightbox.js";
 import { LoadingImage } from "./components/loading-image.js";
 import { FigureHeader } from "./components/figure-header.js";
 import { FigureCaption } from "./components/figure-caption.js";
+function usePreventSwipeNavigation(ref) {
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    const handleWheel = (e) => {
+      if (Math.abs(e.deltaX) <= Math.abs(e.deltaY)) return;
+      const { scrollLeft, scrollWidth, clientWidth } = el;
+      const atLeftEdge = scrollLeft <= 0;
+      const atRightEdge = scrollLeft + clientWidth >= scrollWidth - 1;
+      if (atLeftEdge && e.deltaX < 0 || atRightEdge && e.deltaX > 0) {
+        e.preventDefault();
+      }
+    };
+    el.addEventListener("wheel", handleWheel, { passive: false });
+    return () => el.removeEventListener("wheel", handleWheel);
+  }, [ref]);
+}
 function getImageLabel(path) {
   const filename = path.split("/").pop() || path;
   return filename.replace(/\.(png|jpg|jpeg|gif|svg|webp)$/i, "").replace(/[_-]/g, " ").replace(/\s+/g, " ").trim();
@@ -33,6 +50,8 @@ function Gallery({
     page
   });
   const lightbox = useLightbox(paths.length);
+  const scrollRef = useRef(null);
+  usePreventSwipeNavigation(scrollRef);
   const images = useMemo(
     () => paths.map((p) => ({ src: getImageUrl(p), label: getImageLabel(p) })),
     [paths]
@@ -98,7 +117,7 @@ function Gallery({
         /* @__PURE__ */ jsx(FigureHeader, { title, subtitle }),
         imageElement(0, images[0]),
         /* @__PURE__ */ jsx(FigureCaption, { caption, label: captionLabel })
-      ] }) : isCompact ? /* @__PURE__ */ jsx("div", { className: "flex gap-3", children: images.map((img, index) => imageElement(index, img, "flex-1")) }) : /* @__PURE__ */ jsx("div", { className: "flex gap-3 overflow-x-auto overscroll-x-contain pb-4", children: images.map((img, index) => /* @__PURE__ */ jsx(
+      ] }) : isCompact ? /* @__PURE__ */ jsx("div", { className: "flex gap-3", children: images.map((img, index) => imageElement(index, img, "flex-1")) }) : /* @__PURE__ */ jsx("div", { ref: scrollRef, className: "flex gap-3 overflow-x-auto overscroll-x-contain pb-4", children: images.map((img, index) => /* @__PURE__ */ jsx(
         "div",
         {
           title: img.label,

package/dist/client/components/gallery/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/gallery/index.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport { Image } from \"lucide-react\";\nimport { Lightbox, LightboxImage } from \"@/components/gallery/components/lightbox\";\nimport { useGalleryImages } from \"./hooks/use-gallery-images\";\nimport { useLightbox } from \"./hooks/use-lightbox\";\nimport { LoadingImage } from \"./components/loading-image\";\nimport { FigureHeader } from \"./components/figure-header\";\nimport { FigureCaption } from \"./components/figure-caption\";\n\nfunction getImageLabel(path: string): string {\n  const filename = path.split('/').pop() || path;\n  return filename\n    .replace(/\\.(png|jpg|jpeg|gif|svg|webp)$/i, '')\n    .replace(/[_-]/g, ' ')\n    .replace(/\\s+/g, ' ')\n    .trim();\n}\n\nfunction getImageUrl(path: string): string {\n  return `/raw/${path}`;\n}\n\nexport default function Gallery({\n  path,\n  globs = null,\n  caption,\n  captionLabel,\n  title,\n  subtitle,\n  limit = null,\n  page = 0,\n  children,\n  childAlign = \"right\",\n}: {\n  path?: string;\n  globs?: string[] | null;\n  caption?: string;\n  captionLabel?: string;\n  title?: string;\n  subtitle?: string;\n  limit?: number | null;\n  page?: number;\n  children?: React.ReactNode;\n  childAlign?: \"left\" | \"right\";\n}) {\n  const { paths, isLoading, isEmpty } = useGalleryImages({\n    path,\n    globs,\n    limit,\n    page: page,\n  });\n\n  const lightbox = useLightbox(paths.length);\n\n  const images: LightboxImage[] = useMemo(() =>\n    paths.map(p => ({ src: getImageUrl(p), label: getImageLabel(p) })),\n    [paths]\n  );\n\n  if (isLoading) {\n    return (\n      <figure className=\"not-prose py-6 md:py-8\">\n        <div className=\"grid grid-cols-3 gap-3 max-w-[var(--gallery-width)] mx-auto\">\n          {[...Array(3)].map((_, i) => (\n            <div\n              key={i}\n              className=\"aspect-square rounded-sm bg-muted/20 relative overflow-hidden\"\n            >\n              <div\n                className=\"absolute inset-0 bg-gradient-to-r from-transparent via-muted/30 to-transparent animate-shimmer\"\n                style={{ animationDelay: `${i * 150}ms` }}\n              />\n            </div>\n          ))}\n        </div>\n      </figure>\n    );\n  }\n\n  if (isEmpty) {\n    return (\n      <figure className=\"not-prose py-12 text-center\">\n        <div className=\"inline-flex items-center gap-2.5 text-muted-foreground/40\">\n          <Image className=\"h-3.5 w-3.5\" strokeWidth={1.5} />\n          <span className=\"font-mono text-xs uppercase tracking-widest\">No images</span>\n        </div>\n      </figure>\n    );\n  }\n\n  const isSingle = images.length === 1;\n  const isTwo = images.length === 2;\n  const isCompact = images.length <= 3;\n  const isSingleWithChildren = images.length === 1 && children;\n  // 2-3 images should break out of the content width\n  const shouldBreakOut = images.length >= 2;\n\n  const imageElement = (index: number, img: LightboxImage, className?: string) => (\n    <div\n      key={index}\n      title={img.label}\n      className={`aspect-square overflow-hidden rounded-sm bg-muted/10 cursor-pointer group ${className || ''}`}\n      onClick={() => lightbox.open(index)}\n    >\n      <LoadingImage\n        src={img.src}\n        alt={img.label}\n        className=\"object-contain transition-transform duration-500 ease-out group-hover:scale-[1.02]\"\n      />\n    </div>\n  );\n\n  return (\n    <>\n      <figure className={`not-prose relative py-6 md:py-8 ${shouldBreakOut ? (isTwo ? 'w-[75vw] ml-[calc(-37.5vw+50%)]' : isCompact ? 'w-[96vw] ml-[calc(-48vw+50%)]' : 'w-[var(--gallery-width)] ml-[calc(-45vw+50%)]') : ''}`}>\n        {!isSingleWithChildren && !isSingle && (\n          <div className=\"max-w-[var(--content-width)] mx-auto px-[var(--page-padding)]\">\n            <FigureHeader title={title} subtitle={subtitle} />\n          </div>\n        )}\n\n        {isSingleWithChildren ? (\n          <div className={`flex gap-6 ${childAlign === 'left' ? '' : 'flex-row-reverse'}`}>\n            <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\">\n              {(title || subtitle) && <div className=\"invisible\"><FigureHeader title={title} subtitle={subtitle} /></div>}\n              <div>{children}</div>\n            </div>\n            <div className=\"w-3/5 flex-shrink-0\">\n              <FigureHeader title={title} subtitle={subtitle} />\n              {imageElement(0, images[0])}\n              <FigureCaption caption={caption} label={captionLabel} />\n            </div>\n          </div>\n        ) : isSingle ? (\n          <div className=\"max-w-[70%] mx-auto\">\n            <FigureHeader title={title} subtitle={subtitle} />\n            {imageElement(0, images[0])}\n            <FigureCaption caption={caption} label={captionLabel} />\n          </div>\n        ) : isCompact ? (\n          <div className=\"flex gap-3\">\n            {images.map((img, index) => imageElement(index, img, 'flex-1'))}\n          </div>\n        ) : (\n          <div className=\"flex gap-3 overflow-x-auto overscroll-x-contain pb-4\">\n            {images.map((img, index) => (\n              <div\n                key={index}\n                title={img.label}\n                className=\"flex-none w-[30%] min-w-[250px] aspect-square overflow-hidden rounded-sm bg-muted/10 cursor-pointer group\"\n                onClick={() => lightbox.open(index)}\n              >\n                <LoadingImage\n                  src={img.src}\n                  alt={img.label}\n                  className=\"object-contain transition-transform duration-500 ease-out group-hover:scale-[1.02]\"\n                />\n              </div>\n            ))}\n          </div>\n        )}\n\n        {!isSingleWithChildren && !isSingle && (\n          <div className=\"max-w-[var(--content-width)] mx-auto px-[var(--page-padding)]\">\n            <FigureCaption caption={caption} label={captionLabel} />\n          </div>\n        )}\n      </figure>\n\n      {lightbox.isOpen && lightbox.selectedIndex !== null && (\n        <Lightbox\n          images={images}\n          selectedIndex={lightbox.selectedIndex}\n          onClose={lightbox.close}\n          onPrevious={lightbox.goToPrevious}\n          onNext={lightbox.goToNext}\n        />\n      )}\n    </>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;AASA,SAAS,cAAc,MAAsB;AAC3C,QAAM,WAAW,KAAK,MAAM,GAAG,EAAE,SAAS;AAC1C,SAAO,SACJ,QAAQ,mCAAmC,EAAE,EAC7C,QAAQ,SAAS,GAAG,EACpB,QAAQ,QAAQ,GAAG,EACnB,KAAA;AACL;AAEA,SAAS,YAAY,MAAsB;AACzC,SAAO,QAAQ,IAAI;AACrB;AAEA,SAAwB,QAAQ;AAAA,EAC9B;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,OAAO;AAAA,EACP;AAAA,EACA,aAAa;AACf,GAWG;AACD,QAAM,EAAE,OAAO,WAAW,QAAA,IAAY,iBAAiB;AAAA,IACrD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,CACD;AAED,QAAM,WAAW,YAAY,MAAM,MAAM;AAEzC,QAAM,SAA0B;AAAA,IAAQ,MACtC,MAAM,IAAI,CAAA,OAAM,EAAE,KAAK,YAAY,CAAC,GAAG,OAAO,cAAc,CAAC,IAAI;AAAA,IACjE,CAAC,KAAK;AAAA,EAAA;AAGR,MAAI,WAAW;AACb,+BACG,UAAA,EAAO,WAAU,0BAChB,UAAA,oBAAC,SAAI,WAAU,+DACZ,UAAA,CAAC,GAAG,MAAM,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,MACrB;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC,WAAU;AAAA,QAEV,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO,EAAE,gBAAgB,GAAG,IAAI,GAAG,KAAA;AAAA,UAAK;AAAA,QAAA;AAAA,MAC1C;AAAA,MANK;AAAA,IAAA,CAQR,GACH,EAAA,CACF;AAAA,EAEJ;AAEA,MAAI,SAAS;AACX,+BACG,UAAA,EAAO,WAAU,+BAChB,UAAA,qBAAC,OAAA,EAAI,WAAU,6DACb,UAAA;AAAA,MAAA,oBAAC,OAAA,EAAM,WAAU,eAAc,aAAa,KAAK;AAAA,MACjD,oBAAC,QAAA,EAAK,WAAU,+CAA8C,UAAA,YAAA,CAAS;AAAA,IAAA,EAAA,CACzE,EAAA,CACF;AAAA,EAEJ;AAEA,QAAM,WAAW,OAAO,WAAW;AACnC,QAAM,QAAQ,OAAO,WAAW;AAChC,QAAM,YAAY,OAAO,UAAU;AACnC,QAAM,uBAAuB,OAAO,WAAW,KAAK;AAEpD,QAAM,iBAAiB,OAAO,UAAU;AAExC,QAAM,eAAe,CAAC,OAAe,KAAoB,cACvD;AAAA,IAAC;AAAA,IAAA;AAAA,MAEC,OAAO,IAAI;AAAA,MACX,WAAW,6EAA6E,aAAa,EAAE;AAAA,MACvG,SAAS,MAAM,SAAS,KAAK,KAAK;AAAA,MAElC,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,KAAK,IAAI;AAAA,UACT,KAAK,IAAI;AAAA,UACT,WAAU;AAAA,QAAA;AAAA,MAAA;AAAA,IACZ;AAAA,IATK;AAAA,EAAA;AAaT,SACE,qBAAA,UAAA,EACE,UAAA;AAAA,IAAA,qBAAC,UAAA,EAAO,WAAW,mCAAmC,iBAAkB,QAAQ,oCAAoC,YAAY,kCAAkC,kDAAmD,EAAE,IACpN,UAAA;AAAA,MAAA,CAAC,wBAAwB,CAAC,YACzB,oBAAC,OAAA,EAAI,WAAU,iEACb,UAAA,oBAAC,cAAA,EAAa,OAAc,SAAA,CAAoB,EAAA,CAClD;AAAA,MAGD,4CACE,OAAA,EAAI,WAAW,cAAc,eAAe,SAAS,KAAK,kBAAkB,IAC3E,UAAA;AAAA,QAAA,qBAAC,OAAA,EAAI,WAAU,gLACX,UAAA;AAAA,WAAA,SAAS,iCAAc,OAAA,EAAI,WAAU,aAAY,UAAA,oBAAC,cAAA,EAAa,OAAc,SAAA,CAAoB,EAAA,CAAE;AAAA,UACrG,oBAAC,SAAK,SAAA,CAAS;AAAA,QAAA,GACjB;AAAA,QACA,qBAAC,OAAA,EAAI,WAAU,uBACb,UAAA;AAAA,UAAA,oBAAC,cAAA,EAAa,OAAc,SAAA,CAAoB;AAAA,UAC/C,aAAa,GAAG,OAAO,CAAC,CAAC;AAAA,UAC1B,oBAAC,eAAA,EAAc,SAAkB,OAAO,aAAA,CAAc;AAAA,QAAA,EAAA,CACxD;AAAA,MAAA,EAAA,CACF,IACE,WACF,qBAAC,OAAA,EAAI,WAAU,uBACb,UAAA;AAAA,QAAA,oBAAC,cAAA,EAAa,OAAc,SAAA,CAAoB;AAAA,QAC/C,aAAa,GAAG,OAAO,CAAC,CAAC;AAAA,QAC1B,oBAAC,eAAA,EAAc,SAAkB,OAAO,aAAA,CAAc;AAAA,MAAA,EAAA,CACxD,IACE,YACF,oBAAC,OAAA,EAAI,WAAU,cACZ,UAAA,OAAO,IAAI,CAAC,KAAK,UAAU,aAAa,OAAO,KAAK,QAAQ,CAAC,EAAA,CAChE,IAEA,oBAAC,OAAA,EAAI,WAAU,wDACZ,UAAA,OAAO,IAAI,CAAC,KAAK,UAChB;AAAA,QAAC;AAAA,QAAA;AAAA,UAEC,OAAO,IAAI;AAAA,UACX,WAAU;AAAA,UACV,SAAS,MAAM,SAAS,KAAK,KAAK;AAAA,UAElC,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,KAAK,IAAI;AAAA,cACT,KAAK,IAAI;AAAA,cACT,WAAU;AAAA,YAAA;AAAA,UAAA;AAAA,QACZ;AAAA,QATK;AAAA,MAAA,CAWR,GACH;AAAA,MAGD,CAAC,wBAAwB,CAAC,YACzB,oBAAC,OAAA,EAAI,WAAU,iEACb,UAAA,oBAAC,eAAA,EAAc,SAAkB,OAAO,cAAc,EAAA,CACxD;AAAA,IAAA,GAEJ;AAAA,IAEC,SAAS,UAAU,SAAS,kBAAkB,QAC7C;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAe,SAAS;AAAA,QACxB,SAAS,SAAS;AAAA,QAClB,YAAY,SAAS;AAAA,QACrB,QAAQ,SAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EACnB,GAEJ;AAEJ;"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/gallery/index.tsx"],"sourcesContent":["import { useMemo, useRef, useEffect } from \"react\";\nimport { Image } from \"lucide-react\";\nimport { Lightbox, LightboxImage } from \"@/components/gallery/components/lightbox\";\nimport { useGalleryImages } from \"./hooks/use-gallery-images\";\nimport { useLightbox } from \"./hooks/use-lightbox\";\nimport { LoadingImage } from \"./components/loading-image\";\nimport { FigureHeader } from \"./components/figure-header\";\nimport { FigureCaption } from \"./components/figure-caption\";\n\n/**\n * Hook to prevent horizontal scroll from triggering browser back/forward gestures.\n * Captures wheel events and prevents default when at scroll boundaries.\n */\nfunction usePreventSwipeNavigation(ref: React.RefObject<HTMLElement | null>) {\n  useEffect(() => {\n    const el = ref.current;\n    if (!el) return;\n\n    const handleWheel = (e: WheelEvent) => {\n      // Only handle horizontal scrolling\n      if (Math.abs(e.deltaX) <= Math.abs(e.deltaY)) return;\n\n      const { scrollLeft, scrollWidth, clientWidth } = el;\n      const atLeftEdge = scrollLeft <= 0;\n      const atRightEdge = scrollLeft + clientWidth >= scrollWidth - 1;\n\n      // Prevent default if trying to scroll past boundaries\n      if ((atLeftEdge && e.deltaX < 0) || (atRightEdge && e.deltaX > 0)) {\n        e.preventDefault();\n      }\n    };\n\n    el.addEventListener('wheel', handleWheel, { passive: false });\n    return () => el.removeEventListener('wheel', handleWheel);\n  }, [ref]);\n}\n\nfunction getImageLabel(path: string): string {\n  const filename = path.split('/').pop() || path;\n  return filename\n    .replace(/\\.(png|jpg|jpeg|gif|svg|webp)$/i, '')\n    .replace(/[_-]/g, ' ')\n    .replace(/\\s+/g, ' ')\n    .trim();\n}\n\nfunction getImageUrl(path: string): string {\n  return `/raw/${path}`;\n}\n\nexport default function Gallery({\n  path,\n  globs = null,\n  caption,\n  captionLabel,\n  title,\n  subtitle,\n  limit = null,\n  page = 0,\n  children,\n  childAlign = \"right\",\n}: {\n  path?: string;\n  globs?: string[] | null;\n  caption?: string;\n  captionLabel?: string;\n  title?: string;\n  subtitle?: string;\n  limit?: number | null;\n  page?: number;\n  children?: React.ReactNode;\n  childAlign?: \"left\" | \"right\";\n}) {\n  const { paths, isLoading, isEmpty } = useGalleryImages({\n    path,\n    globs,\n    limit,\n    page: page,\n  });\n\n  const lightbox = useLightbox(paths.length);\n  const scrollRef = useRef<HTMLDivElement>(null);\n  usePreventSwipeNavigation(scrollRef);\n\n  const images: LightboxImage[] = useMemo(() =>\n    paths.map(p => ({ src: getImageUrl(p), label: getImageLabel(p) })),\n    [paths]\n  );\n\n  if (isLoading) {\n    return (\n      <figure className=\"not-prose py-6 md:py-8\">\n        <div className=\"grid grid-cols-3 gap-3 max-w-[var(--gallery-width)] mx-auto\">\n          {[...Array(3)].map((_, i) => (\n            <div\n              key={i}\n              className=\"aspect-square rounded-sm bg-muted/20 relative overflow-hidden\"\n            >\n              <div\n                className=\"absolute inset-0 bg-gradient-to-r from-transparent via-muted/30 to-transparent animate-shimmer\"\n                style={{ animationDelay: `${i * 150}ms` }}\n              />\n            </div>\n          ))}\n        </div>\n      </figure>\n    );\n  }\n\n  if (isEmpty) {\n    return (\n      <figure className=\"not-prose py-12 text-center\">\n        <div className=\"inline-flex items-center gap-2.5 text-muted-foreground/40\">\n          <Image className=\"h-3.5 w-3.5\" strokeWidth={1.5} />\n          <span className=\"font-mono text-xs uppercase tracking-widest\">No images</span>\n        </div>\n      </figure>\n    );\n  }\n\n  const isSingle = images.length === 1;\n  const isTwo = images.length === 2;\n  const isCompact = images.length <= 3;\n  const isSingleWithChildren = images.length === 1 && children;\n  // 2-3 images should break out of the content width\n  const shouldBreakOut = images.length >= 2;\n\n  const imageElement = (index: number, img: LightboxImage, className?: string) => (\n    <div\n      key={index}\n      title={img.label}\n      className={`aspect-square overflow-hidden rounded-sm bg-muted/10 cursor-pointer group ${className || ''}`}\n      onClick={() => lightbox.open(index)}\n    >\n      <LoadingImage\n        src={img.src}\n        alt={img.label}\n        className=\"object-contain transition-transform duration-500 ease-out group-hover:scale-[1.02]\"\n      />\n    </div>\n  );\n\n  return (\n    <>\n      <figure className={`not-prose relative py-6 md:py-8 ${shouldBreakOut ? (isTwo ? 'w-[75vw] ml-[calc(-37.5vw+50%)]' : isCompact ? 'w-[96vw] ml-[calc(-48vw+50%)]' : 'w-[var(--gallery-width)] ml-[calc(-45vw+50%)]') : ''}`}>\n        {!isSingleWithChildren && !isSingle && (\n          <div className=\"max-w-[var(--content-width)] mx-auto px-[var(--page-padding)]\">\n            <FigureHeader title={title} subtitle={subtitle} />\n          </div>\n        )}\n\n        {isSingleWithChildren ? (\n          <div className={`flex gap-6 ${childAlign === 'left' ? '' : 'flex-row-reverse'}`}>\n            <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\">\n              {(title || subtitle) && <div className=\"invisible\"><FigureHeader title={title} subtitle={subtitle} /></div>}\n              <div>{children}</div>\n            </div>\n            <div className=\"w-3/5 flex-shrink-0\">\n              <FigureHeader title={title} subtitle={subtitle} />\n              {imageElement(0, images[0])}\n              <FigureCaption caption={caption} label={captionLabel} />\n            </div>\n          </div>\n        ) : isSingle ? (\n          <div className=\"max-w-[70%] mx-auto\">\n            <FigureHeader title={title} subtitle={subtitle} />\n            {imageElement(0, images[0])}\n            <FigureCaption caption={caption} label={captionLabel} />\n          </div>\n        ) : isCompact ? (\n          <div className=\"flex gap-3\">\n            {images.map((img, index) => imageElement(index, img, 'flex-1'))}\n          </div>\n        ) : (\n          <div ref={scrollRef} className=\"flex gap-3 overflow-x-auto overscroll-x-contain pb-4\">\n            {images.map((img, index) => (\n              <div\n                key={index}\n                title={img.label}\n                className=\"flex-none w-[30%] min-w-[250px] aspect-square overflow-hidden rounded-sm bg-muted/10 cursor-pointer group\"\n                onClick={() => lightbox.open(index)}\n              >\n                <LoadingImage\n                  src={img.src}\n                  alt={img.label}\n                  className=\"object-contain transition-transform duration-500 ease-out group-hover:scale-[1.02]\"\n                />\n              </div>\n            ))}\n          </div>\n        )}\n\n        {!isSingleWithChildren && !isSingle && (\n          <div className=\"max-w-[var(--content-width)] mx-auto px-[var(--page-padding)]\">\n            <FigureCaption caption={caption} label={captionLabel} />\n          </div>\n        )}\n      </figure>\n\n      {lightbox.isOpen && lightbox.selectedIndex !== null && (\n        <Lightbox\n          images={images}\n          selectedIndex={lightbox.selectedIndex}\n          onClose={lightbox.close}\n          onPrevious={lightbox.goToPrevious}\n          onNext={lightbox.goToNext}\n        />\n      )}\n    </>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;AAaA,SAAS,0BAA0B,KAA0C;AAC3E,YAAU,MAAM;AACd,UAAM,KAAK,IAAI;AACf,QAAI,CAAC,GAAI;AAET,UAAM,cAAc,CAAC,MAAkB;AAErC,UAAI,KAAK,IAAI,EAAE,MAAM,KAAK,KAAK,IAAI,EAAE,MAAM,EAAG;AAE9C,YAAM,EAAE,YAAY,aAAa,YAAA,IAAgB;AACjD,YAAM,aAAa,cAAc;AACjC,YAAM,cAAc,aAAa,eAAe,cAAc;AAG9D,UAAK,cAAc,EAAE,SAAS,KAAO,eAAe,EAAE,SAAS,GAAI;AACjE,UAAE,eAAA;AAAA,MACJ;AAAA,IACF;AAEA,OAAG,iBAAiB,SAAS,aAAa,EAAE,SAAS,OAAO;AAC5D,WAAO,MAAM,GAAG,oBAAoB,SAAS,WAAW;AAAA,EAC1D,GAAG,CAAC,GAAG,CAAC;AACV;AAEA,SAAS,cAAc,MAAsB;AAC3C,QAAM,WAAW,KAAK,MAAM,GAAG,EAAE,SAAS;AAC1C,SAAO,SACJ,QAAQ,mCAAmC,EAAE,EAC7C,QAAQ,SAAS,GAAG,EACpB,QAAQ,QAAQ,GAAG,EACnB,KAAA;AACL;AAEA,SAAS,YAAY,MAAsB;AACzC,SAAO,QAAQ,IAAI;AACrB;AAEA,SAAwB,QAAQ;AAAA,EAC9B;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,OAAO;AAAA,EACP;AAAA,EACA,aAAa;AACf,GAWG;AACD,QAAM,EAAE,OAAO,WAAW,QAAA,IAAY,iBAAiB;AAAA,IACrD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,CACD;AAED,QAAM,WAAW,YAAY,MAAM,MAAM;AACzC,QAAM,YAAY,OAAuB,IAAI;AAC7C,4BAA0B,SAAS;AAEnC,QAAM,SAA0B;AAAA,IAAQ,MACtC,MAAM,IAAI,CAAA,OAAM,EAAE,KAAK,YAAY,CAAC,GAAG,OAAO,cAAc,CAAC,IAAI;AAAA,IACjE,CAAC,KAAK;AAAA,EAAA;AAGR,MAAI,WAAW;AACb,+BACG,UAAA,EAAO,WAAU,0BAChB,UAAA,oBAAC,SAAI,WAAU,+DACZ,UAAA,CAAC,GAAG,MAAM,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,MACrB;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC,WAAU;AAAA,QAEV,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO,EAAE,gBAAgB,GAAG,IAAI,GAAG,KAAA;AAAA,UAAK;AAAA,QAAA;AAAA,MAC1C;AAAA,MANK;AAAA,IAAA,CAQR,GACH,EAAA,CACF;AAAA,EAEJ;AAEA,MAAI,SAAS;AACX,+BACG,UAAA,EAAO,WAAU,+BAChB,UAAA,qBAAC,OAAA,EAAI,WAAU,6DACb,UAAA;AAAA,MAAA,oBAAC,OAAA,EAAM,WAAU,eAAc,aAAa,KAAK;AAAA,MACjD,oBAAC,QAAA,EAAK,WAAU,+CAA8C,UAAA,YAAA,CAAS;AAAA,IAAA,EAAA,CACzE,EAAA,CACF;AAAA,EAEJ;AAEA,QAAM,WAAW,OAAO,WAAW;AACnC,QAAM,QAAQ,OAAO,WAAW;AAChC,QAAM,YAAY,OAAO,UAAU;AACnC,QAAM,uBAAuB,OAAO,WAAW,KAAK;AAEpD,QAAM,iBAAiB,OAAO,UAAU;AAExC,QAAM,eAAe,CAAC,OAAe,KAAoB,cACvD;AAAA,IAAC;AAAA,IAAA;AAAA,MAEC,OAAO,IAAI;AAAA,MACX,WAAW,6EAA6E,aAAa,EAAE;AAAA,MACvG,SAAS,MAAM,SAAS,KAAK,KAAK;AAAA,MAElC,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,KAAK,IAAI;AAAA,UACT,KAAK,IAAI;AAAA,UACT,WAAU;AAAA,QAAA;AAAA,MAAA;AAAA,IACZ;AAAA,IATK;AAAA,EAAA;AAaT,SACE,qBAAA,UAAA,EACE,UAAA;AAAA,IAAA,qBAAC,UAAA,EAAO,WAAW,mCAAmC,iBAAkB,QAAQ,oCAAoC,YAAY,kCAAkC,kDAAmD,EAAE,IACpN,UAAA;AAAA,MAAA,CAAC,wBAAwB,CAAC,YACzB,oBAAC,OAAA,EAAI,WAAU,iEACb,UAAA,oBAAC,cAAA,EAAa,OAAc,SAAA,CAAoB,EAAA,CAClD;AAAA,MAGD,4CACE,OAAA,EAAI,WAAW,cAAc,eAAe,SAAS,KAAK,kBAAkB,IAC3E,UAAA;AAAA,QAAA,qBAAC,OAAA,EAAI,WAAU,gLACX,UAAA;AAAA,WAAA,SAAS,iCAAc,OAAA,EAAI,WAAU,aAAY,UAAA,oBAAC,cAAA,EAAa,OAAc,SAAA,CAAoB,EAAA,CAAE;AAAA,UACrG,oBAAC,SAAK,SAAA,CAAS;AAAA,QAAA,GACjB;AAAA,QACA,qBAAC,OAAA,EAAI,WAAU,uBACb,UAAA;AAAA,UAAA,oBAAC,cAAA,EAAa,OAAc,SAAA,CAAoB;AAAA,UAC/C,aAAa,GAAG,OAAO,CAAC,CAAC;AAAA,UAC1B,oBAAC,eAAA,EAAc,SAAkB,OAAO,aAAA,CAAc;AAAA,QAAA,EAAA,CACxD;AAAA,MAAA,EAAA,CACF,IACE,WACF,qBAAC,OAAA,EAAI,WAAU,uBACb,UAAA;AAAA,QAAA,oBAAC,cAAA,EAAa,OAAc,SAAA,CAAoB;AAAA,QAC/C,aAAa,GAAG,OAAO,CAAC,CAAC;AAAA,QAC1B,oBAAC,eAAA,EAAc,SAAkB,OAAO,aAAA,CAAc;AAAA,MAAA,EAAA,CACxD,IACE,YACF,oBAAC,OAAA,EAAI,WAAU,cACZ,UAAA,OAAO,IAAI,CAAC,KAAK,UAAU,aAAa,OAAO,KAAK,QAAQ,CAAC,EAAA,CAChE,IAEA,oBAAC,OAAA,EAAI,KAAK,WAAW,WAAU,wDAC5B,UAAA,OAAO,IAAI,CAAC,KAAK,UAChB;AAAA,QAAC;AAAA,QAAA;AAAA,UAEC,OAAO,IAAI;AAAA,UACX,WAAU;AAAA,UACV,SAAS,MAAM,SAAS,KAAK,KAAK;AAAA,UAElC,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,KAAK,IAAI;AAAA,cACT,KAAK,IAAI;AAAA,cACT,WAAU;AAAA,YAAA;AAAA,UAAA;AAAA,QACZ;AAAA,QATK;AAAA,MAAA,CAWR,GACH;AAAA,MAGD,CAAC,wBAAwB,CAAC,YACzB,oBAAC,OAAA,EAAI,WAAU,iEACb,UAAA,oBAAC,eAAA,EAAc,SAAkB,OAAO,cAAc,EAAA,CACxD;AAAA,IAAA,GAEJ;AAAA,IAEC,SAAS,UAAU,SAAS,kBAAkB,QAC7C;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAe,SAAS;AAAA,QACxB,SAAS,SAAS;AAAA,QAClB,YAAY,SAAS;AAAA,QACrB,QAAQ,SAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EACnB,GAEJ;AAEJ;"}

package/dist/client/components/parameter-table.js

@@ -1,8 +1,56 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useFileContent } from "../plugin/src/client.js";
-import { useMemo, useState } from "react";
+import { useDirectory, useFileContent } from "../plugin/src/client.js";
+import { useMemo, useRef, useEffect, useState } from "react";
+import { useParams } from "react-router-dom";
 import { cn } from "../lib/utils.js";
+import { minimatch } from "minimatch";
 import { parseConfigFile, extractPath, getValueType, formatValue } from "../lib/parameter-utils.js";
+function usePreventSwipeNavigation(ref) {
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    const handleWheel = (e) => {
+      if (Math.abs(e.deltaX) <= Math.abs(e.deltaY)) return;
+      const { scrollLeft, scrollWidth, clientWidth } = el;
+      const atLeftEdge = scrollLeft <= 0;
+      const atRightEdge = scrollLeft + clientWidth >= scrollWidth - 1;
+      if (atLeftEdge && e.deltaX < 0 || atRightEdge && e.deltaX > 0) {
+        e.preventDefault();
+      }
+    };
+    el.addEventListener("wheel", handleWheel, { passive: false });
+    return () => el.removeEventListener("wheel", handleWheel);
+  }, [ref]);
+}
+function isGlobPattern(path) {
+  return path.includes("*") || path.includes("?") || path.includes("[");
+}
+function collectAllConfigFiles(entry) {
+  if (entry.type === "file") {
+    if (entry.name.match(/\.(yaml|yml|json)$/i)) {
+      return [entry];
+    }
+    return [];
+  }
+  const files = [];
+  for (const child of entry.children || []) {
+    files.push(...collectAllConfigFiles(child));
+  }
+  return files;
+}
+function sortPathsNumerically(paths) {
+  paths.sort((a, b) => {
+    const nums = (s) => (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 filterData(data, keys) {
   const result = {};
   for (const keyPath of keys) {
@@ -200,16 +248,28 @@ function splitIntoColumns(entries, numColumns) {
   }
   return columns;
 }
-function ParameterTable({ path, keys }) {
+function SingleParameterTable({ path, keys, label, withMargin = true }) {
   const { content, loading, error } = useFileContent(path);
-  const parsed = useMemo(() => {
-    if (!content) return null;
+  const { parsed, parseError } = useMemo(() => {
+    if (!content) return { parsed: null, parseError: "no content" };
     const data = parseConfigFile(content, path);
-    if (!data) return null;
+    if (!data) {
+      if (!path.match(/\.(yaml|yml|json)$/i)) {
+        return { parsed: null, parseError: `unsupported file type` };
+      }
+      if (content.trim().startsWith("<!") || content.trim().startsWith("<html")) {
+        return { parsed: null, parseError: `file not found` };
+      }
+      return { parsed: null, parseError: `invalid ${path.split(".").pop()} syntax` };
+    }
     if (keys && keys.length > 0) {
-      return filterData(data, keys);
+      const filtered = filterData(data, keys);
+      if (Object.keys(filtered).length === 0) {
+        return { parsed: null, parseError: `keys not found: ${keys.join(", ")}` };
+      }
+      return { parsed: filtered, parseError: null };
     }
-    return data;
+    return { parsed: data, parseError: null };
   }, [content, path, keys]);
   if (loading) {
     return /* @__PURE__ */ jsx("div", { className: "my-6 p-4 rounded border border-border/50 bg-card/30", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-muted-foreground/60", children: [
@@ -221,7 +281,13 @@ function ParameterTable({ path, keys }) {
     return /* @__PURE__ */ jsx("div", { className: "my-6 p-3 rounded border border-destructive/30 bg-destructive/5", children: /* @__PURE__ */ jsx("p", { className: "text-[11px] font-mono text-destructive", children: error }) });
   }
   if (!parsed) {
-    return /* @__PURE__ */ jsx("div", { className: "my-6 p-3 rounded border border-border/50 bg-card/30", children: /* @__PURE__ */ jsx("p", { className: "text-[11px] font-mono text-muted-foreground", children: "unable to parse config" }) });
+    return /* @__PURE__ */ jsx("div", { className: cn("p-3 rounded border border-border/50 bg-card/30", withMargin && "my-6"), children: /* @__PURE__ */ jsxs("p", { className: "text-[11px] font-mono text-muted-foreground", children: [
+      label && /* @__PURE__ */ jsxs("span", { className: "text-foreground/60", children: [
+        label,
+        ": "
+      ] }),
+      parseError || "unable to parse"
+    ] }) });
   }
   const entries = Object.entries(parsed);
   const topLeaves = entries.filter(([, v]) => {
@@ -281,19 +347,86 @@ function ParameterTable({ path, keys }) {
       key
     );
   };
-  return /* @__PURE__ */ jsx("div", { className: "my-6 not-prose", children: /* @__PURE__ */ jsxs("div", { className: "rounded border border-border/60 bg-card/20 p-3 overflow-hidden", children: [
-    topLeaves.length > 0 && /* @__PURE__ */ jsx("div", { className: cn(topNested.length > 0 && "mb-4 pb-3 border-b border-border/30"), children: /* @__PURE__ */ jsx(ParameterGrid, { entries: topLeaves }) }),
-    useColumns ? /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: "grid gap-6",
-        style: { gridTemplateColumns: `repeat(${columns.length}, 1fr)` },
-        children: columns.map((columnEntries, colIndex) => /* @__PURE__ */ jsx("div", { className: cn(
-          colIndex > 0 && "border-l border-border/30 pl-6"
-        ), children: columnEntries.map(renderNestedEntry) }, colIndex))
-      }
-    ) : topNested.map(renderNestedEntry)
-  ] }) });
+  return /* @__PURE__ */ jsxs("div", { className: cn("not-prose", withMargin && "my-6"), children: [
+    label && /* @__PURE__ */ jsx("div", { className: "text-[11px] font-mono text-muted-foreground mb-1.5 truncate", title: label, children: label }),
+    /* @__PURE__ */ jsxs("div", { className: "rounded border border-border/60 bg-card/20 p-3 overflow-hidden", children: [
+      topLeaves.length > 0 && /* @__PURE__ */ jsx("div", { className: cn(topNested.length > 0 && "mb-4 pb-3 border-b border-border/30"), children: /* @__PURE__ */ jsx(ParameterGrid, { entries: topLeaves }) }),
+      useColumns ? /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "grid gap-6",
+          style: { gridTemplateColumns: `repeat(${columns.length}, 1fr)` },
+          children: columns.map((columnEntries, colIndex) => /* @__PURE__ */ jsx("div", { className: cn(
+            colIndex > 0 && "border-l border-border/30 pl-6"
+          ), children: columnEntries.map(renderNestedEntry) }, colIndex))
+        }
+      ) : topNested.map(renderNestedEntry)
+    ] })
+  ] });
+}
+function ParameterTable({ path, keys }) {
+  const { "*": routePath = "" } = useParams();
+  const currentDir = routePath.replace(/\/?[^/]+\.mdx$/i, "").replace(/\/$/, "") || ".";
+  let resolvedPath = path;
+  if (path == null ? void 0 : path.startsWith("./")) {
+    const relativePart = path.slice(2);
+    resolvedPath = currentDir === "." ? relativePart : `${currentDir}/${relativePart}`;
+  } else if (path && !path.startsWith("/") && !path.includes("/") && !isGlobPattern(path)) {
+    resolvedPath = currentDir === "." ? path : `${currentDir}/${path}`;
+  }
+  const hasGlob = isGlobPattern(resolvedPath);
+  const baseDir = hasGlob ? resolvedPath.split(/[*?\[]/, 1)[0].replace(/\/$/, "") || "." : null;
+  const { directory } = useDirectory(baseDir || ".");
+  const matchingPaths = useMemo(() => {
+    if (!hasGlob || !directory) return [];
+    const allFiles = collectAllConfigFiles(directory);
+    const paths = allFiles.map((f) => f.path).filter((p) => minimatch(p, resolvedPath, { matchBase: true }));
+    sortPathsNumerically(paths);
+    console.log("[ParameterTable]", {
+      original: path,
+      resolved: resolvedPath,
+      baseDir,
+      allConfigFiles: allFiles.map((f) => f.path),
+      matched: paths
+    });
+    return paths;
+  }, [hasGlob, directory, resolvedPath, path, baseDir]);
+  if (!hasGlob) {
+    return /* @__PURE__ */ jsx(SingleParameterTable, { path: resolvedPath, keys });
+  }
+  if (!directory) {
+    return /* @__PURE__ */ jsx("div", { className: "my-6 p-4 rounded border border-border/50 bg-card/30", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-muted-foreground/60", children: [
+      /* @__PURE__ */ jsx("div", { className: "w-3 h-3 border border-current border-t-transparent rounded-full animate-spin" }),
+      /* @__PURE__ */ jsx("span", { className: "text-[11px] font-mono", children: "loading parameters..." })
+    ] }) });
+  }
+  if (matchingPaths.length === 0) {
+    return /* @__PURE__ */ jsx("div", { className: "my-6 p-3 rounded border border-border/50 bg-card/30", children: /* @__PURE__ */ jsxs("p", { className: "text-[11px] font-mono text-muted-foreground", children: [
+      "no files matching: ",
+      resolvedPath,
+      /* @__PURE__ */ jsx("br", {}),
+      /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground/50", children: [
+        "(base dir: ",
+        baseDir,
+        ", original: ",
+        path,
+        ")"
+      ] })
+    ] }) });
+  }
+  const count = matchingPaths.length;
+  const breakoutClass = count >= 3 ? "w-[90vw] ml-[calc(-45vw+50%)]" : count === 2 ? "w-[75vw] ml-[calc(-37.5vw+50%)]" : "";
+  const scrollRef = useRef(null);
+  usePreventSwipeNavigation(scrollRef);
+  return /* @__PURE__ */ jsx("div", { ref: scrollRef, className: `my-6 flex gap-4 overflow-x-auto overscroll-x-contain pb-2 ${breakoutClass}`, children: matchingPaths.map((filePath) => /* @__PURE__ */ jsx("div", { className: "flex-none min-w-[300px] max-w-[400px]", children: /* @__PURE__ */ jsx(
+    SingleParameterTable,
+    {
+      path: filePath,
+      keys,
+      label: filePath.split("/").pop() || filePath,
+      withMargin: false
+    }
+  ) }, filePath)) });
 }
 export {
   ParameterTable

package/dist/client/components/parameter-table.js.map

@@ -1 +1 @@
-{"version":3,"file":"parameter-table.js","sources":["../../../src/components/parameter-table.tsx"],"sourcesContent":["import { useFileContent } from \"../../plugin/src/client\";\nimport { useMemo, useState } from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport {\n  type ParameterValue,\n  extractPath,\n  getValueType,\n  formatValue,\n  parseConfigFile,\n} from \"@/lib/parameter-utils\";\n\n/**\n * Build a filtered data object from an array of jq-like paths.\n * Each path extracts data and places it in the result under the final key name.\n */\nfunction filterData(\n  data: Record<string, ParameterValue>,\n  keys: string[]\n): Record<string, ParameterValue> {\n  const result: Record<string, ParameterValue> = {};\n\n  for (const keyPath of keys) {\n    const extracted = extractPath(data, keyPath);\n    if (extracted === undefined) continue;\n\n    const cleanPath = keyPath.startsWith(\".\") ? keyPath.slice(1) : keyPath;\n\n    // For simple paths like .base.N_E, use \"N_E\" as key\n    // For paths with [], preserve more context\n    let keyName: string;\n    if (cleanPath.includes(\"[\")) {\n      keyName = cleanPath.replace(/\\[\\]/g, \"\").replace(/\\[(\\d+)\\]/g, \"_$1\");\n    } else {\n      const parts = cleanPath.split(\".\");\n      keyName = parts[parts.length - 1];\n    }\n\n    result[keyName] = extracted;\n  }\n\n  return result;\n}\n\n// Renders a flat section of key-value pairs in a dense grid\nfunction ParameterGrid({ entries }: { entries: [string, ParameterValue][] }) {\n  if (entries.length === 0) return null;\n\n  return (\n    <div className=\"grid grid-cols-[repeat(auto-fill,minmax(180px,1fr))] gap-x-6 gap-y-px\">\n      {entries.map(([key, value]) => {\n        const type = getValueType(value);\n        return (\n          <div\n            key={key}\n            className=\"flex items-baseline justify-between gap-2 py-1 group hover:bg-muted/30 -mx-1.5 px-1.5 rounded-sm transition-colors\"\n          >\n            <span className=\"text-[11px] text-muted-foreground font-mono truncate\">\n              {key}\n            </span>\n            <span\n              className={cn(\n                \"text-[11px] font-mono tabular-nums font-medium shrink-0\",\n                type === \"number\" && \"text-foreground\",\n                type === \"string\" && \"text-amber-600 dark:text-amber-500\",\n                type === \"boolean\" && \"text-cyan-600 dark:text-cyan-500\",\n                type === \"null\" && \"text-muted-foreground/50\"\n              )}\n            >\n              {type === \"string\" ? `\"${formatValue(value)}\"` : formatValue(value)}\n            </span>\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n\n// Renders a nested section with its own header\nfunction ParameterSection({\n  name,\n  data,\n  depth = 0\n}: {\n  name: string;\n  data: Record<string, ParameterValue>;\n  depth?: number;\n}) {\n  const [isCollapsed, setIsCollapsed] = useState(false);\n\n  const entries = Object.entries(data);\n  const leafEntries = entries.filter(([, v]) => {\n    const t = getValueType(v);\n    return t !== \"object\" && t !== \"array\";\n  });\n  const nestedEntries = entries.filter(([, v]) => {\n    const t = getValueType(v);\n    return t === \"object\" || t === \"array\";\n  });\n\n  return (\n    <div className={cn(depth === 0 && \"mb-4 last:mb-0\")}>\n      <button\n        onClick={() => setIsCollapsed(!isCollapsed)}\n        className={cn(\n          \"flex items-center gap-2 w-full text-left group mb-1.5\",\n          depth === 0 && \"pb-1 border-b border-border/50\"\n        )}\n      >\n        <span className={cn(\n          \"text-[10px] text-muted-foreground/60 transition-transform duration-150 select-none\",\n          isCollapsed && \"-rotate-90\"\n        )}>\n          {isCollapsed ? \"+\" : \"-\"}\n        </span>\n\n        <span className={cn(\n          \"font-mono text-[11px] uppercase tracking-widest\",\n          depth === 0\n            ? \"text-foreground/80 font-semibold\"\n            : \"text-muted-foreground/70\"\n        )}>\n          {name.replace(/_/g, \" \")}\n        </span>\n\n        <span className=\"text-[9px] font-mono text-muted-foreground/40 ml-auto\">\n          {entries.length}\n        </span>\n      </button>\n\n      {!isCollapsed && (\n        <div className={cn(\n          depth > 0 && \"pl-3 ml-1 border-l border-border/40\"\n        )}>\n          {leafEntries.length > 0 && (\n            <div className={cn(nestedEntries.length > 0 && \"mb-3\")}>\n              <ParameterGrid entries={leafEntries} />\n            </div>\n          )}\n\n          {nestedEntries.map(([key, value]) => {\n            const type = getValueType(value);\n            if (type === \"array\") {\n              const arr = value as ParameterValue[];\n              return (\n                <div key={key} className=\"mb-2 last:mb-0\">\n                  <div className=\"text-[10px] font-mono text-muted-foreground/60 uppercase tracking-wider mb-1\">\n                    {key} [{arr.length}]\n                  </div>\n                  <div className=\"pl-3 ml-1 border-l border-border/40\">\n                    {arr.map((item, i) => {\n                      const itemType = getValueType(item);\n                      if (itemType === \"object\") {\n                        return (\n                          <ParameterSection\n                            key={i}\n                            name={`${i}`}\n                            data={item as Record<string, ParameterValue>}\n                            depth={depth + 1}\n                          />\n                        );\n                      }\n                      return (\n                        <div key={i} className=\"text-[11px] font-mono text-foreground py-0.5\">\n                          [{i}] {formatValue(item)}\n                        </div>\n                      );\n                    })}\n                  </div>\n                </div>\n              );\n            }\n            return (\n              <ParameterSection\n                key={key}\n                name={key}\n                data={value as Record<string, ParameterValue>}\n                depth={depth + 1}\n              />\n            );\n          })}\n        </div>\n      )}\n    </div>\n  );\n}\n\ninterface ParameterTableProps {\n  /** Path to the YAML or JSON file */\n  path: string;\n  /**\n   * Optional array of jq-like paths to filter which parameters to show.\n   * Examples:\n   *   - [\".base.N_E\", \".base.N_I\"] → show only N_E and N_I from base\n   *   - [\".base\"] → show entire base section\n   *   - [\".default_inputs\", \".base.dt\"] → show default_inputs section and dt from base\n   */\n  keys?: string[];\n}\n\n/**\n * Estimate the height contribution of a data structure.\n */\nfunction estimateHeight(data: Record<string, ParameterValue>, depth = 0): number {\n  const entries = Object.entries(data);\n  let height = 0;\n\n  for (const [, value] of entries) {\n    const type = getValueType(value);\n    if (type === \"object\") {\n      height += 28 + estimateHeight(value as Record<string, ParameterValue>, depth + 1);\n    } else if (type === \"array\") {\n      const arr = value as ParameterValue[];\n      height += 28;\n      for (const item of arr) {\n        if (getValueType(item) === \"object\") {\n          height += 24 + estimateHeight(item as Record<string, ParameterValue>, depth + 1);\n        } else {\n          height += 24;\n        }\n      }\n    } else {\n      height += 24;\n    }\n  }\n\n  return height;\n}\n\n/**\n * Split entries into balanced columns based on estimated height.\n */\nfunction splitIntoColumns<T extends [string, ParameterValue]>(\n  entries: T[],\n  numColumns: number\n): T[][] {\n  if (numColumns <= 1) return [entries];\n\n  const entryHeights = entries.map(([, value]) => {\n    const type = getValueType(value);\n    if (type === \"object\") {\n      return 28 + estimateHeight(value as Record<string, ParameterValue>);\n    } else if (type === \"array\") {\n      const arr = value as ParameterValue[];\n      let h = 28;\n      for (const item of arr) {\n        if (getValueType(item) === \"object\") {\n          h += 24 + estimateHeight(item as Record<string, ParameterValue>);\n        } else {\n          h += 24;\n        }\n      }\n      return h;\n    }\n    return 24;\n  });\n\n  const totalHeight = entryHeights.reduce((a, b) => a + b, 0);\n  const targetPerColumn = totalHeight / numColumns;\n\n  const columns: T[][] = [];\n  let currentColumn: T[] = [];\n  let currentHeight = 0;\n\n  for (let i = 0; i < entries.length; i++) {\n    const entry = entries[i];\n    const entryHeight = entryHeights[i];\n\n    if (currentHeight >= targetPerColumn && columns.length < numColumns - 1 && currentColumn.length > 0) {\n      columns.push(currentColumn);\n      currentColumn = [];\n      currentHeight = 0;\n    }\n\n    currentColumn.push(entry);\n    currentHeight += entryHeight;\n  }\n\n  if (currentColumn.length > 0) {\n    columns.push(currentColumn);\n  }\n\n  return columns;\n}\n\nexport function ParameterTable({ path, keys }: ParameterTableProps) {\n  const { content, loading, error } = useFileContent(path);\n\n  const parsed = useMemo(() => {\n    if (!content) return null;\n\n    const data = parseConfigFile(content, path);\n    if (!data) return null;\n\n    if (keys && keys.length > 0) {\n      return filterData(data, keys);\n    }\n\n    return data;\n  }, [content, path, keys]);\n\n  if (loading) {\n    return (\n      <div className=\"my-6 p-4 rounded border border-border/50 bg-card/30\">\n        <div className=\"flex items-center gap-2 text-muted-foreground/60\">\n          <div className=\"w-3 h-3 border border-current border-t-transparent rounded-full animate-spin\" />\n          <span className=\"text-[11px] font-mono\">loading parameters...</span>\n        </div>\n      </div>\n    );\n  }\n\n  if (error) {\n    return (\n      <div className=\"my-6 p-3 rounded border border-destructive/30 bg-destructive/5\">\n        <p className=\"text-[11px] font-mono text-destructive\">{error}</p>\n      </div>\n    );\n  }\n\n  if (!parsed) {\n    return (\n      <div className=\"my-6 p-3 rounded border border-border/50 bg-card/30\">\n        <p className=\"text-[11px] font-mono text-muted-foreground\">unable to parse config</p>\n      </div>\n    );\n  }\n\n  const entries = Object.entries(parsed);\n\n  const topLeaves = entries.filter(([, v]) => {\n    const t = getValueType(v);\n    return t !== \"object\" && t !== \"array\";\n  });\n  const topNested = entries.filter(([, v]) => {\n    const t = getValueType(v);\n    return t === \"object\" || t === \"array\";\n  });\n\n  const estHeight = estimateHeight(parsed);\n  const HEIGHT_THRESHOLD = 500;\n  const numColumns = estHeight > HEIGHT_THRESHOLD ? Math.min(Math.ceil(estHeight / HEIGHT_THRESHOLD), 3) : 1;\n  const useColumns = numColumns > 1 && topNested.length > 1;\n\n  const columns = useColumns\n    ? splitIntoColumns(topNested as [string, ParameterValue][], numColumns)\n    : [topNested];\n\n  const filename = path.split(\"/\").pop() || path;\n\n  const renderNestedEntry = ([key, value]: [string, ParameterValue]) => {\n    const type = getValueType(value);\n    if (type === \"array\") {\n      const arr = value as ParameterValue[];\n      return (\n        <div key={key} className=\"mb-4 last:mb-0\">\n          <div className=\"text-[11px] font-mono text-foreground/80 uppercase tracking-widest font-semibold mb-1.5 pb-1 border-b border-border/50\">\n            {key.replace(/_/g, \" \")} [{arr.length}]\n          </div>\n          <div className=\"pl-3 ml-1 border-l border-border/40\">\n            {arr.map((item, i) => {\n              const itemType = getValueType(item);\n              if (itemType === \"object\") {\n                return (\n                  <ParameterSection\n                    key={i}\n                    name={`${i}`}\n                    data={item as Record<string, ParameterValue>}\n                    depth={1}\n                  />\n                );\n              }\n              return (\n                <div key={i} className=\"text-[11px] font-mono text-foreground py-0.5\">\n                  [{i}] {formatValue(item)}\n                </div>\n              );\n            })}\n          </div>\n        </div>\n      );\n    }\n    return (\n      <ParameterSection\n        key={key}\n        name={key}\n        data={value as Record<string, ParameterValue>}\n        depth={0}\n      />\n    );\n  };\n\n  return (\n    <div className=\"my-6 not-prose\">\n      <div className=\"rounded border border-border/60 bg-card/20 p-3 overflow-hidden\">\n        {topLeaves.length > 0 && (\n          <div className={cn(topNested.length > 0 && \"mb-4 pb-3 border-b border-border/30\")}>\n            <ParameterGrid entries={topLeaves} />\n          </div>\n        )}\n\n        {useColumns ? (\n          <div\n            className=\"grid gap-6\"\n            style={{ gridTemplateColumns: `repeat(${columns.length}, 1fr)` }}\n          >\n            {columns.map((columnEntries, colIndex) => (\n              <div key={colIndex} className={cn(\n                colIndex > 0 && \"border-l border-border/30 pl-6\"\n              )}>\n                {columnEntries.map(renderNestedEntry)}\n              </div>\n            ))}\n          </div>\n        ) : (\n          topNested.map(renderNestedEntry)\n        )}\n      </div>\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"parameter-table.js","sources":["../../../src/components/parameter-table.tsx"],"sourcesContent":["import { useFileContent, useDirectory } from \"../../plugin/src/client\";\nimport { useMemo, useState, useRef, useEffect } from \"react\";\nimport { useParams } from \"react-router-dom\";\nimport { cn } from \"@/lib/utils\";\nimport { minimatch } from \"minimatch\";\nimport {\n  type ParameterValue,\n  extractPath,\n  getValueType,\n  formatValue,\n  parseConfigFile,\n} from \"@/lib/parameter-utils\";\nimport { FileEntry, DirectoryEntry } from \"../../plugin/src/lib\";\n\n/**\n * Hook to prevent horizontal scroll from triggering browser back/forward gestures.\n */\nfunction usePreventSwipeNavigation(ref: React.RefObject<HTMLElement | null>) {\n  useEffect(() => {\n    const el = ref.current;\n    if (!el) return;\n\n    const handleWheel = (e: WheelEvent) => {\n      if (Math.abs(e.deltaX) <= Math.abs(e.deltaY)) return;\n\n      const { scrollLeft, scrollWidth, clientWidth } = el;\n      const atLeftEdge = scrollLeft <= 0;\n      const atRightEdge = scrollLeft + clientWidth >= scrollWidth - 1;\n\n      if ((atLeftEdge && e.deltaX < 0) || (atRightEdge && e.deltaX > 0)) {\n        e.preventDefault();\n      }\n    };\n\n    el.addEventListener('wheel', handleWheel, { passive: false });\n    return () => el.removeEventListener('wheel', handleWheel);\n  }, [ref]);\n}\n\n// Check if a path contains glob patterns\nfunction isGlobPattern(path: string): boolean {\n  return path.includes('*') || path.includes('?') || path.includes('[');\n}\n\n// Recursively collect all config files from a directory tree\nfunction collectAllConfigFiles(entry: DirectoryEntry | FileEntry): FileEntry[] {\n  if (entry.type === \"file\") {\n    if (entry.name.match(/\\.(yaml|yml|json)$/i)) {\n      return [entry];\n    }\n    return [];\n  }\n  const files: FileEntry[] = [];\n  for (const child of entry.children || []) {\n    files.push(...collectAllConfigFiles(child));\n  }\n  return files;\n}\n\n// Sort paths numerically\nfunction sortPathsNumerically(paths: string[]): void {\n  paths.sort((a, b) => {\n    const nums = (s: string) => (s.match(/\\d+/g) || []).map(Number);\n    const na = nums(a);\n    const nb = nums(b);\n    const len = Math.max(na.length, nb.length);\n    for (let i = 0; i < len; i++) {\n      const diff = (na[i] ?? 0) - (nb[i] ?? 0);\n      if (diff !== 0) return diff;\n    }\n    return a.localeCompare(b);\n  });\n}\n\n/**\n * Build a filtered data object from an array of jq-like paths.\n * Each path extracts data and places it in the result under the final key name.\n */\nfunction filterData(\n  data: Record<string, ParameterValue>,\n  keys: string[]\n): Record<string, ParameterValue> {\n  const result: Record<string, ParameterValue> = {};\n\n  for (const keyPath of keys) {\n    const extracted = extractPath(data, keyPath);\n    if (extracted === undefined) continue;\n\n    const cleanPath = keyPath.startsWith(\".\") ? keyPath.slice(1) : keyPath;\n\n    // For simple paths like .base.N_E, use \"N_E\" as key\n    // For paths with [], preserve more context\n    let keyName: string;\n    if (cleanPath.includes(\"[\")) {\n      keyName = cleanPath.replace(/\\[\\]/g, \"\").replace(/\\[(\\d+)\\]/g, \"_$1\");\n    } else {\n      const parts = cleanPath.split(\".\");\n      keyName = parts[parts.length - 1];\n    }\n\n    result[keyName] = extracted;\n  }\n\n  return result;\n}\n\n// Renders a flat section of key-value pairs in a dense grid\nfunction ParameterGrid({ entries }: { entries: [string, ParameterValue][] }) {\n  if (entries.length === 0) return null;\n\n  return (\n    <div className=\"grid grid-cols-[repeat(auto-fill,minmax(180px,1fr))] gap-x-6 gap-y-px\">\n      {entries.map(([key, value]) => {\n        const type = getValueType(value);\n        return (\n          <div\n            key={key}\n            className=\"flex items-baseline justify-between gap-2 py-1 group hover:bg-muted/30 -mx-1.5 px-1.5 rounded-sm transition-colors\"\n          >\n            <span className=\"text-[11px] text-muted-foreground font-mono truncate\">\n              {key}\n            </span>\n            <span\n              className={cn(\n                \"text-[11px] font-mono tabular-nums font-medium shrink-0\",\n                type === \"number\" && \"text-foreground\",\n                type === \"string\" && \"text-amber-600 dark:text-amber-500\",\n                type === \"boolean\" && \"text-cyan-600 dark:text-cyan-500\",\n                type === \"null\" && \"text-muted-foreground/50\"\n              )}\n            >\n              {type === \"string\" ? `\"${formatValue(value)}\"` : formatValue(value)}\n            </span>\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n\n// Renders a nested section with its own header\nfunction ParameterSection({\n  name,\n  data,\n  depth = 0\n}: {\n  name: string;\n  data: Record<string, ParameterValue>;\n  depth?: number;\n}) {\n  const [isCollapsed, setIsCollapsed] = useState(false);\n\n  const entries = Object.entries(data);\n  const leafEntries = entries.filter(([, v]) => {\n    const t = getValueType(v);\n    return t !== \"object\" && t !== \"array\";\n  });\n  const nestedEntries = entries.filter(([, v]) => {\n    const t = getValueType(v);\n    return t === \"object\" || t === \"array\";\n  });\n\n  return (\n    <div className={cn(depth === 0 && \"mb-4 last:mb-0\")}>\n      <button\n        onClick={() => setIsCollapsed(!isCollapsed)}\n        className={cn(\n          \"flex items-center gap-2 w-full text-left group mb-1.5\",\n          depth === 0 && \"pb-1 border-b border-border/50\"\n        )}\n      >\n        <span className={cn(\n          \"text-[10px] text-muted-foreground/60 transition-transform duration-150 select-none\",\n          isCollapsed && \"-rotate-90\"\n        )}>\n          {isCollapsed ? \"+\" : \"-\"}\n        </span>\n\n        <span className={cn(\n          \"font-mono text-[11px] uppercase tracking-widest\",\n          depth === 0\n            ? \"text-foreground/80 font-semibold\"\n            : \"text-muted-foreground/70\"\n        )}>\n          {name.replace(/_/g, \" \")}\n        </span>\n\n        <span className=\"text-[9px] font-mono text-muted-foreground/40 ml-auto\">\n          {entries.length}\n        </span>\n      </button>\n\n      {!isCollapsed && (\n        <div className={cn(\n          depth > 0 && \"pl-3 ml-1 border-l border-border/40\"\n        )}>\n          {leafEntries.length > 0 && (\n            <div className={cn(nestedEntries.length > 0 && \"mb-3\")}>\n              <ParameterGrid entries={leafEntries} />\n            </div>\n          )}\n\n          {nestedEntries.map(([key, value]) => {\n            const type = getValueType(value);\n            if (type === \"array\") {\n              const arr = value as ParameterValue[];\n              return (\n                <div key={key} className=\"mb-2 last:mb-0\">\n                  <div className=\"text-[10px] font-mono text-muted-foreground/60 uppercase tracking-wider mb-1\">\n                    {key} [{arr.length}]\n                  </div>\n                  <div className=\"pl-3 ml-1 border-l border-border/40\">\n                    {arr.map((item, i) => {\n                      const itemType = getValueType(item);\n                      if (itemType === \"object\") {\n                        return (\n                          <ParameterSection\n                            key={i}\n                            name={`${i}`}\n                            data={item as Record<string, ParameterValue>}\n                            depth={depth + 1}\n                          />\n                        );\n                      }\n                      return (\n                        <div key={i} className=\"text-[11px] font-mono text-foreground py-0.5\">\n                          [{i}] {formatValue(item)}\n                        </div>\n                      );\n                    })}\n                  </div>\n                </div>\n              );\n            }\n            return (\n              <ParameterSection\n                key={key}\n                name={key}\n                data={value as Record<string, ParameterValue>}\n                depth={depth + 1}\n              />\n            );\n          })}\n        </div>\n      )}\n    </div>\n  );\n}\n\ninterface SingleParameterTableProps {\n  /** Path to the YAML or JSON file */\n  path: string;\n  /**\n   * Optional array of jq-like paths to filter which parameters to show.\n   * Examples:\n   *   - [\".base.N_E\", \".base.N_I\"] → show only N_E and N_I from base\n   *   - [\".base\"] → show entire base section\n   *   - [\".default_inputs\", \".base.dt\"] → show default_inputs section and dt from base\n   */\n  keys?: string[];\n  /** Optional label to show above the table */\n  label?: string;\n  /** Whether to include vertical margin (default true) */\n  withMargin?: boolean;\n}\n\ninterface ParameterTableProps {\n  /** Path to the YAML or JSON file, supports glob patterns like \"*.yaml\" */\n  path: string;\n  /**\n   * Optional array of jq-like paths to filter which parameters to show.\n   */\n  keys?: string[];\n}\n\n/**\n * Estimate the height contribution of a data structure.\n */\nfunction estimateHeight(data: Record<string, ParameterValue>, depth = 0): number {\n  const entries = Object.entries(data);\n  let height = 0;\n\n  for (const [, value] of entries) {\n    const type = getValueType(value);\n    if (type === \"object\") {\n      height += 28 + estimateHeight(value as Record<string, ParameterValue>, depth + 1);\n    } else if (type === \"array\") {\n      const arr = value as ParameterValue[];\n      height += 28;\n      for (const item of arr) {\n        if (getValueType(item) === \"object\") {\n          height += 24 + estimateHeight(item as Record<string, ParameterValue>, depth + 1);\n        } else {\n          height += 24;\n        }\n      }\n    } else {\n      height += 24;\n    }\n  }\n\n  return height;\n}\n\n/**\n * Split entries into balanced columns based on estimated height.\n */\nfunction splitIntoColumns<T extends [string, ParameterValue]>(\n  entries: T[],\n  numColumns: number\n): T[][] {\n  if (numColumns <= 1) return [entries];\n\n  const entryHeights = entries.map(([, value]) => {\n    const type = getValueType(value);\n    if (type === \"object\") {\n      return 28 + estimateHeight(value as Record<string, ParameterValue>);\n    } else if (type === \"array\") {\n      const arr = value as ParameterValue[];\n      let h = 28;\n      for (const item of arr) {\n        if (getValueType(item) === \"object\") {\n          h += 24 + estimateHeight(item as Record<string, ParameterValue>);\n        } else {\n          h += 24;\n        }\n      }\n      return h;\n    }\n    return 24;\n  });\n\n  const totalHeight = entryHeights.reduce((a, b) => a + b, 0);\n  const targetPerColumn = totalHeight / numColumns;\n\n  const columns: T[][] = [];\n  let currentColumn: T[] = [];\n  let currentHeight = 0;\n\n  for (let i = 0; i < entries.length; i++) {\n    const entry = entries[i];\n    const entryHeight = entryHeights[i];\n\n    if (currentHeight >= targetPerColumn && columns.length < numColumns - 1 && currentColumn.length > 0) {\n      columns.push(currentColumn);\n      currentColumn = [];\n      currentHeight = 0;\n    }\n\n    currentColumn.push(entry);\n    currentHeight += entryHeight;\n  }\n\n  if (currentColumn.length > 0) {\n    columns.push(currentColumn);\n  }\n\n  return columns;\n}\n\nfunction SingleParameterTable({ path, keys, label, withMargin = true }: SingleParameterTableProps) {\n  const { content, loading, error } = useFileContent(path);\n\n  const { parsed, parseError } = useMemo(() => {\n    if (!content) return { parsed: null, parseError: 'no content' };\n\n    const data = parseConfigFile(content, path);\n    if (!data) {\n      // Check why parsing failed\n      if (!path.match(/\\.(yaml|yml|json)$/i)) {\n        return { parsed: null, parseError: `unsupported file type` };\n      }\n      // Check if content looks like HTML (404 page)\n      if (content.trim().startsWith('<!') || content.trim().startsWith('<html')) {\n        return { parsed: null, parseError: `file not found` };\n      }\n      return { parsed: null, parseError: `invalid ${path.split('.').pop()} syntax` };\n    }\n\n    if (keys && keys.length > 0) {\n      const filtered = filterData(data, keys);\n      if (Object.keys(filtered).length === 0) {\n        return { parsed: null, parseError: `keys not found: ${keys.join(', ')}` };\n      }\n      return { parsed: filtered, parseError: null };\n    }\n\n    return { parsed: data, parseError: null };\n  }, [content, path, keys]);\n\n  if (loading) {\n    return (\n      <div className=\"my-6 p-4 rounded border border-border/50 bg-card/30\">\n        <div className=\"flex items-center gap-2 text-muted-foreground/60\">\n          <div className=\"w-3 h-3 border border-current border-t-transparent rounded-full animate-spin\" />\n          <span className=\"text-[11px] font-mono\">loading parameters...</span>\n        </div>\n      </div>\n    );\n  }\n\n  if (error) {\n    return (\n      <div className=\"my-6 p-3 rounded border border-destructive/30 bg-destructive/5\">\n        <p className=\"text-[11px] font-mono text-destructive\">{error}</p>\n      </div>\n    );\n  }\n\n  if (!parsed) {\n    return (\n      <div className={cn(\"p-3 rounded border border-border/50 bg-card/30\", withMargin && \"my-6\")}>\n        <p className=\"text-[11px] font-mono text-muted-foreground\">\n          {label && <span className=\"text-foreground/60\">{label}: </span>}\n          {parseError || 'unable to parse'}\n        </p>\n      </div>\n    );\n  }\n\n  const entries = Object.entries(parsed);\n\n  const topLeaves = entries.filter(([, v]) => {\n    const t = getValueType(v);\n    return t !== \"object\" && t !== \"array\";\n  });\n  const topNested = entries.filter(([, v]) => {\n    const t = getValueType(v);\n    return t === \"object\" || t === \"array\";\n  });\n\n  const estHeight = estimateHeight(parsed);\n  const HEIGHT_THRESHOLD = 500;\n  const numColumns = estHeight > HEIGHT_THRESHOLD ? Math.min(Math.ceil(estHeight / HEIGHT_THRESHOLD), 3) : 1;\n  const useColumns = numColumns > 1 && topNested.length > 1;\n\n  const columns = useColumns\n    ? splitIntoColumns(topNested as [string, ParameterValue][], numColumns)\n    : [topNested];\n\n  const filename = path.split(\"/\").pop() || path;\n\n  const renderNestedEntry = ([key, value]: [string, ParameterValue]) => {\n    const type = getValueType(value);\n    if (type === \"array\") {\n      const arr = value as ParameterValue[];\n      return (\n        <div key={key} className=\"mb-4 last:mb-0\">\n          <div className=\"text-[11px] font-mono text-foreground/80 uppercase tracking-widest font-semibold mb-1.5 pb-1 border-b border-border/50\">\n            {key.replace(/_/g, \" \")} [{arr.length}]\n          </div>\n          <div className=\"pl-3 ml-1 border-l border-border/40\">\n            {arr.map((item, i) => {\n              const itemType = getValueType(item);\n              if (itemType === \"object\") {\n                return (\n                  <ParameterSection\n                    key={i}\n                    name={`${i}`}\n                    data={item as Record<string, ParameterValue>}\n                    depth={1}\n                  />\n                );\n              }\n              return (\n                <div key={i} className=\"text-[11px] font-mono text-foreground py-0.5\">\n                  [{i}] {formatValue(item)}\n                </div>\n              );\n            })}\n          </div>\n        </div>\n      );\n    }\n    return (\n      <ParameterSection\n        key={key}\n        name={key}\n        data={value as Record<string, ParameterValue>}\n        depth={0}\n      />\n    );\n  };\n\n  return (\n    <div className={cn(\"not-prose\", withMargin && \"my-6\")}>\n      {label && (\n        <div className=\"text-[11px] font-mono text-muted-foreground mb-1.5 truncate\" title={label}>\n          {label}\n        </div>\n      )}\n      <div className=\"rounded border border-border/60 bg-card/20 p-3 overflow-hidden\">\n        {topLeaves.length > 0 && (\n          <div className={cn(topNested.length > 0 && \"mb-4 pb-3 border-b border-border/30\")}>\n            <ParameterGrid entries={topLeaves} />\n          </div>\n        )}\n\n        {useColumns ? (\n          <div\n            className=\"grid gap-6\"\n            style={{ gridTemplateColumns: `repeat(${columns.length}, 1fr)` }}\n          >\n            {columns.map((columnEntries, colIndex) => (\n              <div key={colIndex} className={cn(\n                colIndex > 0 && \"border-l border-border/30 pl-6\"\n              )}>\n                {columnEntries.map(renderNestedEntry)}\n              </div>\n            ))}\n          </div>\n        ) : (\n          topNested.map(renderNestedEntry)\n        )}\n      </div>\n    </div>\n  );\n}\n\n/**\n * ParameterTable component that displays YAML/JSON config files.\n * Supports glob patterns in the path prop to show multiple files.\n */\nexport function ParameterTable({ path, keys }: ParameterTableProps) {\n  const { \"*\": routePath = \"\" } = useParams();\n\n  // Get current directory from route\n  const currentDir = routePath\n    .replace(/\\/?[^/]+\\.mdx$/i, \"\")\n    .replace(/\\/$/, \"\")\n    || \".\";\n\n  // Resolve relative paths\n  let resolvedPath = path;\n  if (path?.startsWith(\"./\")) {\n    const relativePart = path.slice(2);\n    resolvedPath = currentDir === \".\" ? relativePart : `${currentDir}/${relativePart}`;\n  } else if (path && !path.startsWith(\"/\") && !path.includes(\"/\") && !isGlobPattern(path)) {\n    resolvedPath = currentDir === \".\" ? path : `${currentDir}/${path}`;\n  }\n\n  // Check if this is a glob pattern\n  const hasGlob = isGlobPattern(resolvedPath);\n\n  // For glob patterns, get the base directory (everything before the first glob character)\n  const baseDir = hasGlob\n    ? resolvedPath.split(/[*?\\[]/, 1)[0].replace(/\\/$/, \"\") || \".\"\n    : null;\n\n  const { directory } = useDirectory(baseDir || \".\");\n\n  // Find matching files for glob patterns\n  const matchingPaths = useMemo(() => {\n    if (!hasGlob || !directory) return [];\n\n    const allFiles = collectAllConfigFiles(directory);\n    const paths = allFiles\n      .map(f => f.path)\n      .filter(p => minimatch(p, resolvedPath, { matchBase: true }));\n\n    sortPathsNumerically(paths);\n\n    // Debug logging\n    console.log('[ParameterTable]', {\n      original: path,\n      resolved: resolvedPath,\n      baseDir,\n      allConfigFiles: allFiles.map(f => f.path),\n      matched: paths\n    });\n\n    return paths;\n  }, [hasGlob, directory, resolvedPath, path, baseDir]);\n\n  // If not a glob pattern, just render the single table\n  if (!hasGlob) {\n    return <SingleParameterTable path={resolvedPath} keys={keys} />;\n  }\n\n  // Loading state for glob patterns\n  if (!directory) {\n    return (\n      <div className=\"my-6 p-4 rounded border border-border/50 bg-card/30\">\n        <div className=\"flex items-center gap-2 text-muted-foreground/60\">\n          <div className=\"w-3 h-3 border border-current border-t-transparent rounded-full animate-spin\" />\n          <span className=\"text-[11px] font-mono\">loading parameters...</span>\n        </div>\n      </div>\n    );\n  }\n\n  // No matches\n  if (matchingPaths.length === 0) {\n    return (\n      <div className=\"my-6 p-3 rounded border border-border/50 bg-card/30\">\n        <p className=\"text-[11px] font-mono text-muted-foreground\">\n          no files matching: {resolvedPath}\n          <br />\n          <span className=\"text-muted-foreground/50\">(base dir: {baseDir}, original: {path})</span>\n        </p>\n      </div>\n    );\n  }\n\n  // Render a table for each matching file horizontally\n  // Break out of content width when there are multiple tables\n  const count = matchingPaths.length;\n  const breakoutClass = count >= 3\n    ? 'w-[90vw] ml-[calc(-45vw+50%)]'\n    : count === 2\n      ? 'w-[75vw] ml-[calc(-37.5vw+50%)]'\n      : '';\n\n  const scrollRef = useRef<HTMLDivElement>(null);\n  usePreventSwipeNavigation(scrollRef);\n\n  return (\n    <div ref={scrollRef} className={`my-6 flex gap-4 overflow-x-auto overscroll-x-contain pb-2 ${breakoutClass}`}>\n      {matchingPaths.map((filePath) => (\n        <div key={filePath} className=\"flex-none min-w-[300px] max-w-[400px]\">\n          <SingleParameterTable\n            path={filePath}\n            keys={keys}\n            label={filePath.split('/').pop() || filePath}\n            withMargin={false}\n          />\n        </div>\n      ))}\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "veslx",
-  "version": "0.1.35",
+  "version": "0.1.36",
   "type": "module",
   "repository": {
     "type": "git",

package/plugin/src/plugin.ts

@@ -392,7 +392,7 @@ export const posts = import.meta.glob(['@content/**/*.mdx', '@content/**/*.md'],
 export const allMdx = import.meta.glob(['@content/**/*.mdx', '@content/**/*.md']);
 export const slides = import.meta.glob(['@content/**/SLIDES.mdx', '@content/**/SLIDES.md', '@content/**/*.slides.mdx', '@content/**/*.slides.md']);
 
-// All files for directory tree building (web-compatible files only)
+// All files for directory tree building
 export const files = import.meta.glob([
   '@content/**/*.mdx',
   '@content/**/*.md',
@@ -407,6 +407,9 @@ export const files = import.meta.glob([
   '@content/**/*.svg',
   '@content/**/*.webp',
   '@content/**/*.css',
+  '@content/**/*.yaml',
+  '@content/**/*.yml',
+  '@content/**/*.json',
 ], { eager: false });
 
 // Frontmatter extracted at build time (no MDX execution required)

package/src/components/gallery/index.tsx

@@ -1,4 +1,4 @@
-import { useMemo } from "react";
+import { useMemo, useRef, useEffect } from "react";
 import { Image } from "lucide-react";
 import { Lightbox, LightboxImage } from "@/components/gallery/components/lightbox";
 import { useGalleryImages } from "./hooks/use-gallery-images";
@@ -7,6 +7,34 @@ import { LoadingImage } from "./components/loading-image";
 import { FigureHeader } from "./components/figure-header";
 import { FigureCaption } from "./components/figure-caption";
 
+/**
+ * Hook to prevent horizontal scroll from triggering browser back/forward gestures.
+ * Captures wheel events and prevents default when at scroll boundaries.
+ */
+function usePreventSwipeNavigation(ref: React.RefObject<HTMLElement | null>) {
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+
+    const handleWheel = (e: WheelEvent) => {
+      // Only handle horizontal scrolling
+      if (Math.abs(e.deltaX) <= Math.abs(e.deltaY)) return;
+
+      const { scrollLeft, scrollWidth, clientWidth } = el;
+      const atLeftEdge = scrollLeft <= 0;
+      const atRightEdge = scrollLeft + clientWidth >= scrollWidth - 1;
+
+      // Prevent default if trying to scroll past boundaries
+      if ((atLeftEdge && e.deltaX < 0) || (atRightEdge && e.deltaX > 0)) {
+        e.preventDefault();
+      }
+    };
+
+    el.addEventListener('wheel', handleWheel, { passive: false });
+    return () => el.removeEventListener('wheel', handleWheel);
+  }, [ref]);
+}
+
 function getImageLabel(path: string): string {
   const filename = path.split('/').pop() || path;
   return filename
@@ -51,6 +79,8 @@ export default function Gallery({
   });
 
   const lightbox = useLightbox(paths.length);
+  const scrollRef = useRef<HTMLDivElement>(null);
+  usePreventSwipeNavigation(scrollRef);
 
   const images: LightboxImage[] = useMemo(() =>
     paths.map(p => ({ src: getImageUrl(p), label: getImageLabel(p) })),
@@ -142,7 +172,7 @@ export default function Gallery({
             {images.map((img, index) => imageElement(index, img, 'flex-1'))}
           </div>
         ) : (
-          <div className="flex gap-3 overflow-x-auto overscroll-x-contain pb-4">
+          <div ref={scrollRef} className="flex gap-3 overflow-x-auto overscroll-x-contain pb-4">
             {images.map((img, index) => (
               <div
                 key={index}

package/src/components/parameter-table.tsx

@@ -1,6 +1,8 @@
-import { useFileContent } from "../../plugin/src/client";
-import { useMemo, useState } from "react";
+import { useFileContent, useDirectory } from "../../plugin/src/client";
+import { useMemo, useState, useRef, useEffect } from "react";
+import { useParams } from "react-router-dom";
 import { cn } from "@/lib/utils";
+import { minimatch } from "minimatch";
 import {
   type ParameterValue,
   extractPath,
@@ -8,6 +10,67 @@ import {
   formatValue,
   parseConfigFile,
 } from "@/lib/parameter-utils";
+import { FileEntry, DirectoryEntry } from "../../plugin/src/lib";
+
+/**
+ * Hook to prevent horizontal scroll from triggering browser back/forward gestures.
+ */
+function usePreventSwipeNavigation(ref: React.RefObject<HTMLElement | null>) {
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+
+    const handleWheel = (e: WheelEvent) => {
+      if (Math.abs(e.deltaX) <= Math.abs(e.deltaY)) return;
+
+      const { scrollLeft, scrollWidth, clientWidth } = el;
+      const atLeftEdge = scrollLeft <= 0;
+      const atRightEdge = scrollLeft + clientWidth >= scrollWidth - 1;
+
+      if ((atLeftEdge && e.deltaX < 0) || (atRightEdge && e.deltaX > 0)) {
+        e.preventDefault();
+      }
+    };
+
+    el.addEventListener('wheel', handleWheel, { passive: false });
+    return () => el.removeEventListener('wheel', handleWheel);
+  }, [ref]);
+}
+
+// Check if a path contains glob patterns
+function isGlobPattern(path: string): boolean {
+  return path.includes('*') || path.includes('?') || path.includes('[');
+}
+
+// Recursively collect all config files from a directory tree
+function collectAllConfigFiles(entry: DirectoryEntry | FileEntry): FileEntry[] {
+  if (entry.type === "file") {
+    if (entry.name.match(/\.(yaml|yml|json)$/i)) {
+      return [entry];
+    }
+    return [];
+  }
+  const files: FileEntry[] = [];
+  for (const child of entry.children || []) {
+    files.push(...collectAllConfigFiles(child));
+  }
+  return files;
+}
+
+// Sort paths numerically
+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);
+  });
+}
 
 /**
  * Build a filtered data object from an array of jq-like paths.
@@ -184,7 +247,7 @@ function ParameterSection({
   );
 }
 
-interface ParameterTableProps {
+interface SingleParameterTableProps {
   /** Path to the YAML or JSON file */
   path: string;
   /**
@@ -195,6 +258,19 @@ interface ParameterTableProps {
    *   - [".default_inputs", ".base.dt"] → show default_inputs section and dt from base
    */
   keys?: string[];
+  /** Optional label to show above the table */
+  label?: string;
+  /** Whether to include vertical margin (default true) */
+  withMargin?: boolean;
+}
+
+interface ParameterTableProps {
+  /** Path to the YAML or JSON file, supports glob patterns like "*.yaml" */
+  path: string;
+  /**
+   * Optional array of jq-like paths to filter which parameters to show.
+   */
+  keys?: string[];
 }
 
 /**
@@ -282,20 +358,34 @@ function splitIntoColumns<T extends [string, ParameterValue]>(
   return columns;
 }
 
-export function ParameterTable({ path, keys }: ParameterTableProps) {
+function SingleParameterTable({ path, keys, label, withMargin = true }: SingleParameterTableProps) {
   const { content, loading, error } = useFileContent(path);
 
-  const parsed = useMemo(() => {
-    if (!content) return null;
+  const { parsed, parseError } = useMemo(() => {
+    if (!content) return { parsed: null, parseError: 'no content' };
 
     const data = parseConfigFile(content, path);
-    if (!data) return null;
+    if (!data) {
+      // Check why parsing failed
+      if (!path.match(/\.(yaml|yml|json)$/i)) {
+        return { parsed: null, parseError: `unsupported file type` };
+      }
+      // Check if content looks like HTML (404 page)
+      if (content.trim().startsWith('<!') || content.trim().startsWith('<html')) {
+        return { parsed: null, parseError: `file not found` };
+      }
+      return { parsed: null, parseError: `invalid ${path.split('.').pop()} syntax` };
+    }
 
     if (keys && keys.length > 0) {
-      return filterData(data, keys);
+      const filtered = filterData(data, keys);
+      if (Object.keys(filtered).length === 0) {
+        return { parsed: null, parseError: `keys not found: ${keys.join(', ')}` };
+      }
+      return { parsed: filtered, parseError: null };
     }
 
-    return data;
+    return { parsed: data, parseError: null };
   }, [content, path, keys]);
 
   if (loading) {
@@ -319,8 +409,11 @@ export function ParameterTable({ path, keys }: ParameterTableProps) {
 
   if (!parsed) {
     return (
-      <div className="my-6 p-3 rounded border border-border/50 bg-card/30">
-        <p className="text-[11px] font-mono text-muted-foreground">unable to parse config</p>
+      <div className={cn("p-3 rounded border border-border/50 bg-card/30", withMargin && "my-6")}>
+        <p className="text-[11px] font-mono text-muted-foreground">
+          {label && <span className="text-foreground/60">{label}: </span>}
+          {parseError || 'unable to parse'}
+        </p>
       </div>
     );
   }
@@ -390,7 +483,12 @@ export function ParameterTable({ path, keys }: ParameterTableProps) {
   };
 
   return (
-    <div className="my-6 not-prose">
+    <div className={cn("not-prose", withMargin && "my-6")}>
+      {label && (
+        <div className="text-[11px] font-mono text-muted-foreground mb-1.5 truncate" title={label}>
+          {label}
+        </div>
+      )}
       <div className="rounded border border-border/60 bg-card/20 p-3 overflow-hidden">
         {topLeaves.length > 0 && (
           <div className={cn(topNested.length > 0 && "mb-4 pb-3 border-b border-border/30")}>
@@ -418,3 +516,116 @@ export function ParameterTable({ path, keys }: ParameterTableProps) {
     </div>
   );
 }
+
+/**
+ * ParameterTable component that displays YAML/JSON config files.
+ * Supports glob patterns in the path prop to show multiple files.
+ */
+export function ParameterTable({ path, keys }: ParameterTableProps) {
+  const { "*": routePath = "" } = useParams();
+
+  // Get current directory from route
+  const currentDir = routePath
+    .replace(/\/?[^/]+\.mdx$/i, "")
+    .replace(/\/$/, "")
+    || ".";
+
+  // Resolve relative paths
+  let resolvedPath = path;
+  if (path?.startsWith("./")) {
+    const relativePart = path.slice(2);
+    resolvedPath = currentDir === "." ? relativePart : `${currentDir}/${relativePart}`;
+  } else if (path && !path.startsWith("/") && !path.includes("/") && !isGlobPattern(path)) {
+    resolvedPath = currentDir === "." ? path : `${currentDir}/${path}`;
+  }
+
+  // Check if this is a glob pattern
+  const hasGlob = isGlobPattern(resolvedPath);
+
+  // For glob patterns, get the base directory (everything before the first glob character)
+  const baseDir = hasGlob
+    ? resolvedPath.split(/[*?\[]/, 1)[0].replace(/\/$/, "") || "."
+    : null;
+
+  const { directory } = useDirectory(baseDir || ".");
+
+  // Find matching files for glob patterns
+  const matchingPaths = useMemo(() => {
+    if (!hasGlob || !directory) return [];
+
+    const allFiles = collectAllConfigFiles(directory);
+    const paths = allFiles
+      .map(f => f.path)
+      .filter(p => minimatch(p, resolvedPath, { matchBase: true }));
+
+    sortPathsNumerically(paths);
+
+    // Debug logging
+    console.log('[ParameterTable]', {
+      original: path,
+      resolved: resolvedPath,
+      baseDir,
+      allConfigFiles: allFiles.map(f => f.path),
+      matched: paths
+    });
+
+    return paths;
+  }, [hasGlob, directory, resolvedPath, path, baseDir]);
+
+  // If not a glob pattern, just render the single table
+  if (!hasGlob) {
+    return <SingleParameterTable path={resolvedPath} keys={keys} />;
+  }
+
+  // Loading state for glob patterns
+  if (!directory) {
+    return (
+      <div className="my-6 p-4 rounded border border-border/50 bg-card/30">
+        <div className="flex items-center gap-2 text-muted-foreground/60">
+          <div className="w-3 h-3 border border-current border-t-transparent rounded-full animate-spin" />
+          <span className="text-[11px] font-mono">loading parameters...</span>
+        </div>
+      </div>
+    );
+  }
+
+  // No matches
+  if (matchingPaths.length === 0) {
+    return (
+      <div className="my-6 p-3 rounded border border-border/50 bg-card/30">
+        <p className="text-[11px] font-mono text-muted-foreground">
+          no files matching: {resolvedPath}
+          <br />
+          <span className="text-muted-foreground/50">(base dir: {baseDir}, original: {path})</span>
+        </p>
+      </div>
+    );
+  }
+
+  // Render a table for each matching file horizontally
+  // Break out of content width when there are multiple tables
+  const count = matchingPaths.length;
+  const breakoutClass = count >= 3
+    ? 'w-[90vw] ml-[calc(-45vw+50%)]'
+    : count === 2
+      ? 'w-[75vw] ml-[calc(-37.5vw+50%)]'
+      : '';
+
+  const scrollRef = useRef<HTMLDivElement>(null);
+  usePreventSwipeNavigation(scrollRef);
+
+  return (
+    <div ref={scrollRef} className={`my-6 flex gap-4 overflow-x-auto overscroll-x-contain pb-2 ${breakoutClass}`}>
+      {matchingPaths.map((filePath) => (
+        <div key={filePath} className="flex-none min-w-[300px] max-w-[400px]">
+          <SingleParameterTable
+            path={filePath}
+            keys={keys}
+            label={filePath.split('/').pop() || filePath}
+            withMargin={false}
+          />
+        </div>
+      ))}
+    </div>
+  );
+}