@openpkg-ts/doc-generator 0.5.1 → 0.6.0

package/dist/react-styled.d.ts

@@ -600,6 +600,8 @@ interface FullAPIReferencePageProps {
 	kinds?: SpecExportKind5[];
 	/** Show kind filter buttons (default: true) */
 	showFilters?: boolean;
+	/** Show in-page TOC navigation (default: false) */
+	showTOC?: boolean;
 	/** Custom title (default: spec.meta.name) */
 	title?: string;
 	/** Custom description */
@@ -613,8 +615,8 @@ interface FullAPIReferencePageProps {
 *
 * @example
 * ```tsx
-* // Show all exports
-* <FullAPIReferencePage spec={spec} />
+* // Show all exports with TOC
+* <FullAPIReferencePage spec={spec} showTOC />
 * ```
 *
 * @example
@@ -623,7 +625,7 @@ interface FullAPIReferencePageProps {
 * <FullAPIReferencePage spec={spec} kinds={['function']} title="Functions" />
 * ```
 */
-declare function FullAPIReferencePage({ spec, kinds, showFilters, title, description, className }: FullAPIReferencePageProps): ReactNode5;
+declare function FullAPIReferencePage({ spec, kinds, showFilters, showTOC, title, description, className }: FullAPIReferencePageProps): ReactNode5;
 import { OpenPkg as OpenPkg12, SpecExport as SpecExport6 } from "@openpkg-ts/spec";
 import { ReactNode as ReactNode6 } from "react";
 interface FunctionPageProps {

package/dist/react-styled.js

@@ -23197,7 +23197,7 @@ function APIPage({
 // src/components/styled/FullAPIReferencePage.tsx
 import { APIReferencePage } from "@doccov/ui/docskit";
 import { cn as cn3 } from "@doccov/ui/lib/utils";
-import { useState as useState5, useMemo as useMemo2 } from "react";
+import { useState as useState5, useMemo as useMemo2, useEffect as useEffect2, useRef, useCallback } from "react";
 
 // src/components/styled/sections/ExportSection.tsx
 import { jsx as jsx21 } from "react/jsx-runtime";
@@ -23241,15 +23241,33 @@ var KIND_LABELS2 = {
   enum: "Enums",
   variable: "Variables"
 };
+function getExportTitle(exp) {
+  switch (exp.kind) {
+    case "function":
+      return `${exp.name}()`;
+    case "class":
+      return `class ${exp.name}`;
+    case "interface":
+    case "type":
+      return exp.name;
+    case "enum":
+      return `enum ${exp.name}`;
+    default:
+      return exp.name;
+  }
+}
 function FullAPIReferencePage({
   spec,
   kinds,
   showFilters = true,
+  showTOC = false,
   title,
   description,
   className
 }) {
   const [activeFilter, setActiveFilter] = useState5("all");
+  const [activeSection, setActiveSection] = useState5(null);
+  const isScrollingRef = useRef(false);
   const availableKinds = useMemo2(() => {
     const kindSet = new Set;
     for (const exp of spec.exports) {
@@ -23277,6 +23295,81 @@ function FullAPIReferencePage({
       return a.name.localeCompare(b.name);
     });
   }, [spec.exports, kinds, activeFilter]);
+  const groupedExports = useMemo2(() => {
+    const groups = new Map;
+    for (const exp of filteredExports) {
+      const kind = exp.kind;
+      if (!groups.has(kind)) {
+        groups.set(kind, []);
+      }
+      groups.get(kind).push(exp);
+    }
+    return groups;
+  }, [filteredExports]);
+  useEffect2(() => {
+    if (typeof window === "undefined")
+      return;
+    const hash = window.location.hash.slice(1);
+    if (hash) {
+      const timer = setTimeout(() => {
+        const element = document.getElementById(hash);
+        if (element) {
+          isScrollingRef.current = true;
+          element.scrollIntoView({ behavior: "smooth" });
+          setActiveSection(hash);
+          setTimeout(() => {
+            isScrollingRef.current = false;
+          }, 1000);
+        }
+      }, 100);
+      return () => clearTimeout(timer);
+    }
+  }, []);
+  useEffect2(() => {
+    if (!showTOC || typeof window === "undefined")
+      return;
+    const sectionIds = filteredExports.map((exp) => exp.id || exp.name);
+    const observers = [];
+    const handleIntersect = (entries) => {
+      if (isScrollingRef.current)
+        return;
+      for (const entry of entries) {
+        if (entry.isIntersecting && entry.intersectionRatio > 0) {
+          const id = entry.target.id;
+          setActiveSection(id);
+          if (typeof window !== "undefined") {
+            window.history.replaceState(null, "", `#${id}`);
+          }
+          break;
+        }
+      }
+    };
+    const observer = new IntersectionObserver(handleIntersect, {
+      rootMargin: "-20% 0px -70% 0px",
+      threshold: 0
+    });
+    for (const id of sectionIds) {
+      const element = document.getElementById(id);
+      if (element) {
+        observer.observe(element);
+      }
+    }
+    return () => {
+      observer.disconnect();
+    };
+  }, [showTOC, filteredExports]);
+  const handleTOCClick = useCallback((id) => {
+    const element = document.getElementById(id);
+    if (element) {
+      isScrollingRef.current = true;
+      element.scrollIntoView({ behavior: "smooth" });
+      setActiveSection(id);
+      window.history.replaceState(null, "", `#${id}`);
+      setTimeout(() => {
+        isScrollingRef.current = false;
+      }, 1000);
+    }
+  }, []);
   const defaultDescription = /* @__PURE__ */ jsxs15("div", {
     children: [
       spec.meta.description && /* @__PURE__ */ jsx22("p", {
@@ -23292,50 +23385,98 @@ function FullAPIReferencePage({
     ]
   });
   const shouldShowFilters = showFilters && !kinds?.length && availableKinds.length > 1;
-  return /* @__PURE__ */ jsx22("div", {
-    className: cn3("not-prose", className),
-    children: /* @__PURE__ */ jsxs15(APIReferencePage, {
-      title: title || spec.meta.name || "API Reference",
-      description: description || defaultDescription,
-      children: [
-        shouldShowFilters && /* @__PURE__ */ jsxs15("div", {
-          className: "flex flex-wrap gap-2 mb-8 -mt-4",
+  return /* @__PURE__ */ jsxs15("div", {
+    className: cn3("not-prose", showTOC && "lg:grid lg:grid-cols-[220px_1fr] lg:gap-8", className),
+    children: [
+      showTOC && /* @__PURE__ */ jsx22("aside", {
+        className: "hidden lg:block",
+        children: /* @__PURE__ */ jsxs15("nav", {
+          className: "sticky top-20 max-h-[calc(100vh-6rem)] overflow-y-auto pr-4",
           children: [
-            /* @__PURE__ */ jsx22("button", {
-              type: "button",
-              onClick: () => setActiveFilter("all"),
-              className: cn3("px-3 py-1.5 text-sm rounded-md transition-all cursor-pointer", activeFilter === "all" ? "bg-primary text-primary-foreground font-medium" : "bg-muted text-muted-foreground hover:bg-muted/80 hover:text-foreground"),
-              children: "All"
+            /* @__PURE__ */ jsx22("h4", {
+              className: "text-sm font-semibold text-foreground mb-3",
+              children: "On this page"
             }),
-            availableKinds.map((kind) => /* @__PURE__ */ jsx22("button", {
-              type: "button",
-              onClick: () => setActiveFilter(kind),
-              className: cn3("px-3 py-1.5 text-sm rounded-md transition-all cursor-pointer", activeFilter === kind ? "bg-primary text-primary-foreground font-medium" : "bg-muted text-muted-foreground hover:bg-muted/80 hover:text-foreground"),
-              children: KIND_LABELS2[kind]
-            }, kind))
+            /* @__PURE__ */ jsx22("div", {
+              className: "space-y-4",
+              children: KIND_ORDER2.map((kind) => {
+                const exports = groupedExports.get(kind);
+                if (!exports?.length)
+                  return null;
+                return /* @__PURE__ */ jsxs15("div", {
+                  children: [
+                    /* @__PURE__ */ jsx22("h5", {
+                      className: "text-xs font-medium text-muted-foreground uppercase tracking-wide mb-2",
+                      children: KIND_LABELS2[kind]
+                    }),
+                    /* @__PURE__ */ jsx22("ul", {
+                      className: "space-y-1",
+                      children: exports.map((exp) => {
+                        const id = exp.id || exp.name;
+                        const isActive = activeSection === id;
+                        return /* @__PURE__ */ jsx22("li", {
+                          children: /* @__PURE__ */ jsx22("button", {
+                            type: "button",
+                            onClick: () => handleTOCClick(id),
+                            className: cn3("block w-full text-left text-sm py-1 px-2 rounded-md transition-colors cursor-pointer truncate", isActive ? "bg-primary/10 text-primary font-medium" : "text-muted-foreground hover:text-foreground hover:bg-muted/50"),
+                            title: getExportTitle(exp),
+                            children: getExportTitle(exp)
+                          })
+                        }, id);
+                      })
+                    })
+                  ]
+                }, kind);
+              })
+            })
           ]
-        }),
-        filteredExports.map((exp) => /* @__PURE__ */ jsx22(ExportSection, {
-          export: exp,
-          spec
-        }, exp.id || exp.name)),
-        filteredExports.length === 0 && /* @__PURE__ */ jsxs15("div", {
-          className: "rounded-lg border border-border bg-card/50 p-8 text-center",
+        })
+      }),
+      /* @__PURE__ */ jsx22("div", {
+        children: /* @__PURE__ */ jsxs15(APIReferencePage, {
+          title: title || spec.meta.name || "API Reference",
+          description: description || defaultDescription,
           children: [
-            /* @__PURE__ */ jsx22("p", {
-              className: "text-muted-foreground",
-              children: activeFilter !== "all" ? `No ${KIND_LABELS2[activeFilter].toLowerCase()} found.` : "No exports found in this package."
+            shouldShowFilters && /* @__PURE__ */ jsxs15("div", {
+              className: "flex flex-wrap gap-2 mb-8 -mt-4",
+              children: [
+                /* @__PURE__ */ jsx22("button", {
+                  type: "button",
+                  onClick: () => setActiveFilter("all"),
+                  className: cn3("px-3 py-1.5 text-sm rounded-md transition-all cursor-pointer", activeFilter === "all" ? "bg-primary text-primary-foreground font-medium" : "bg-muted text-muted-foreground hover:bg-muted/80 hover:text-foreground"),
+                  children: "All"
+                }),
+                availableKinds.map((kind) => /* @__PURE__ */ jsx22("button", {
+                  type: "button",
+                  onClick: () => setActiveFilter(kind),
+                  className: cn3("px-3 py-1.5 text-sm rounded-md transition-all cursor-pointer", activeFilter === kind ? "bg-primary text-primary-foreground font-medium" : "bg-muted text-muted-foreground hover:bg-muted/80 hover:text-foreground"),
+                  children: KIND_LABELS2[kind]
+                }, kind))
+              ]
             }),
-            activeFilter !== "all" && /* @__PURE__ */ jsx22("button", {
-              type: "button",
-              onClick: () => setActiveFilter("all"),
-              className: "mt-3 text-sm text-primary hover:underline cursor-pointer",
-              children: "Show all exports"
+            filteredExports.map((exp) => /* @__PURE__ */ jsx22(ExportSection, {
+              export: exp,
+              spec
+            }, exp.id || exp.name)),
+            filteredExports.length === 0 && /* @__PURE__ */ jsxs15("div", {
+              className: "rounded-lg border border-border bg-card/50 p-8 text-center",
+              children: [
+                /* @__PURE__ */ jsx22("p", {
+                  className: "text-muted-foreground",
+                  children: activeFilter !== "all" ? `No ${KIND_LABELS2[activeFilter].toLowerCase()} found.` : "No exports found in this package."
+                }),
+                activeFilter !== "all" && /* @__PURE__ */ jsx22("button", {
+                  type: "button",
+                  onClick: () => setActiveFilter("all"),
+                  className: "mt-3 text-sm text-primary hover:underline cursor-pointer",
+                  children: "Show all exports"
+                })
+              ]
             })
           ]
         })
-      ]
-    })
+      })
+    ]
   });
 }
 // src/components/styled/ParameterItem.tsx

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openpkg-ts/doc-generator",
-  "version": "0.5.1",
+  "version": "0.6.0",
   "description": "API doc generator consuming OpenPkg specs. TypeDoc alternative for modern doc frameworks.",
   "keywords": [
     "openpkg",