@docubook/create 2.4.0 → 2.5.0

package/src/dist/components/mob-toc.tsx

@@ -1,134 +0,0 @@
-"use client";
-
-import { List, ChevronDown, ChevronUp } from "lucide-react";
-import TocObserver from "./toc-observer";
-import * as React from "react";
-import { useRef, useMemo } from "react";
-import { usePathname } from "next/navigation";
-import { Button } from "./ui/button";
-import { motion, AnimatePresence } from "framer-motion";
-import { useActiveSection } from "@/hooks";
-import { TocItem } from "@/lib/toc";
-
-interface MobTocProps {
-  tocs: TocItem[];
-}
-
-const useClickOutside = (ref: React.RefObject<HTMLElement | null>, callback: () => void) => {
-  const handleClick = React.useCallback((event: MouseEvent) => {
-    if (ref.current && !ref.current.contains(event.target as Node)) {
-      callback();
-    }
-  }, [ref, callback]);
-
-  React.useEffect(() => {
-    document.addEventListener('mousedown', handleClick);
-    return () => {
-      document.removeEventListener('mousedown', handleClick);
-    };
-  }, [handleClick]);
-};
-
-export default function MobToc({ tocs }: MobTocProps) {
-  const pathname = usePathname();
-  const [isExpanded, setIsExpanded] = React.useState(false);
-  const tocRef = useRef<HTMLDivElement>(null);
-  const contentRef = useRef<HTMLDivElement>(null);
-
-  // Use custom hooks
-  const { activeId, setActiveId } = useActiveSection(tocs);
-
-  // Only show on /docs pages
-  const isDocsPage = useMemo(() => pathname?.startsWith('/docs'), [pathname]);
-
-  const [mounted, setMounted] = React.useState(false);
-
-  React.useEffect(() => {
-    setMounted(true);
-  }, []);
-
-  // Toggle expanded state
-  const toggleExpanded = React.useCallback((e: React.MouseEvent) => {
-    e.stopPropagation();
-    setIsExpanded(prev => !prev);
-  }, []);
-
-  // Close TOC when clicking outside
-  useClickOutside(tocRef, () => {
-    if (isExpanded) {
-      setIsExpanded(false);
-    }
-  });
-
-  // Handle body overflow when TOC is expanded
-  React.useEffect(() => {
-    if (isExpanded) {
-      document.body.style.overflow = 'hidden';
-    } else {
-      document.body.style.overflow = '';
-    }
-
-    return () => {
-      document.body.style.overflow = '';
-    };
-  }, [isExpanded]);
-
-  // Don't render anything if not on docs page or no TOC items
-  if (!isDocsPage || !tocs?.length || !mounted) return null;
-
-  const chevronIcon = isExpanded ? (
-    <ChevronUp className="w-4 h-4 text-muted-foreground flex-shrink-0" />
-  ) : (
-    <ChevronDown className="w-4 h-4 text-muted-foreground flex-shrink-0" />
-  );
-
-  return (
-    <AnimatePresence>
-      <motion.div
-        ref={tocRef}
-        className="lg:hidden fixed top-16 left-0 right-0 z-50"
-        initial={{ y: -100, opacity: 0 }}
-        animate={{ y: 0, opacity: 1 }}
-        exit={{ y: -100, opacity: 0 }}
-        transition={{ duration: 0.2, ease: 'easeInOut' }}
-      >
-        <div className="w-full bg-background/95 backdrop-blur-sm border-b border-stone-200 dark:border-stone-800 shadow-sm">
-          <div className="sm:px-8 px-4 py-2">
-            <Button
-              variant="ghost"
-              size="sm"
-              className="w-full justify-between h-auto py-2 px-2 -mx-1 rounded-md hover:bg-transparent hover:text-inherit"
-              onClick={toggleExpanded}
-              aria-label={isExpanded ? 'Collapse table of contents' : 'Expand table of contents'}
-            >
-              <div className="flex items-center gap-2">
-                <List className="w-4 h-4 text-muted-foreground flex-shrink-0" />
-                <span className="font-medium text-sm">On this page</span>
-              </div>
-              {chevronIcon}
-            </Button>
-
-            <AnimatePresence>
-              {isExpanded && (
-                <motion.div
-                  ref={contentRef}
-                  className="mt-2 pb-2 max-h-[60vh] overflow-y-auto px-1 -mx-1"
-                  initial={{ opacity: 0, height: 0 }}
-                  animate={{ opacity: 1, height: 'auto' }}
-                  exit={{ opacity: 0, height: 0 }}
-                  transition={{ duration: 0.2, ease: 'easeInOut' }}
-                >
-                  <TocObserver
-                    data={tocs}
-                    activeId={activeId}
-                    onActiveIdChange={setActiveId}
-                  />
-                </motion.div>
-              )}
-            </AnimatePresence>
-          </div>
-        </div>
-      </motion.div>
-    </AnimatePresence>
-  );
-}

package/src/dist/components/search.tsx

@@ -1,55 +0,0 @@
-"use client";
-
-import { useState, useEffect } from "react";
-import { Dialog } from "@/components/ui/dialog";
-import { SearchTrigger } from "@/components/SearchTrigger";
-import { SearchModal } from "@/components/SearchModal";
-import DocSearchComponent from "@/components/DocSearch";
-import { DialogTrigger } from "@radix-ui/react-dialog";
-
-interface SearchProps {
-  /**
-   * Specify which search engine to use.
-   * @default 'default'
-   */
-  type?: "default" | "algolia";
-}
-
-export default function Search({ type = "default" }: SearchProps) {
-  const [isOpen, setIsOpen] = useState(false);
-
-  // The useEffect below is ONLY for the 'default' type, which is correct.
-  // DocSearch handles its own keyboard shortcut.
-  useEffect(() => {
-    if (type === 'default') {
-      const handleKeyDown = (event: KeyboardEvent) => {
-        if ((event.ctrlKey || event.metaKey) && event.key === "k") {
-          event.preventDefault();
-          setIsOpen((open) => !open);
-        }
-      };
-
-      window.addEventListener("keydown", handleKeyDown);
-      return () => {
-        window.removeEventListener("keydown", handleKeyDown);
-      };
-    }
-  }, [type]);
-
-  if (type === "algolia") {
-    // Just render the component without passing any state props
-    return <DocSearchComponent />;
-  }
-
-  // Logic for 'default' search
-  return (
-    <div>
-      <Dialog open={isOpen} onOpenChange={setIsOpen}>
-        <DialogTrigger asChild>
-          <SearchTrigger />
-        </DialogTrigger>
-        <SearchModal isOpen={isOpen} setIsOpen={setIsOpen} />
-      </Dialog>
-    </div>
-  );
-}

package/src/dist/components/toc-observer.tsx

@@ -1,254 +0,0 @@
-"use client";
-
-import clsx from "clsx";
-import Link from "next/link";
-import { useState, useRef, useEffect, useCallback } from "react";
-import { motion } from "framer-motion";
-import { ScrollToTop } from "./scroll-to-top";
-import { TocItem } from "@/lib/toc";
-
-interface TocObserverProps {
-  data: TocItem[];
-  activeId?: string | null;
-  onActiveIdChange?: (id: string | null) => void;
-}
-
-export default function TocObserver({
-  data,
-  activeId: externalActiveId,
-  onActiveIdChange
-}: TocObserverProps) {
-  const [internalActiveId, setInternalActiveId] = useState<string | null>(null);
-  const observer = useRef<IntersectionObserver | null>(null);
-  const [clickedId, setClickedId] = useState<string | null>(null);
-  const itemRefs = useRef<Map<string, HTMLAnchorElement>>(new Map());
-
-  // Use external activeId if provided, otherwise use internal state
-  const activeId = externalActiveId !== undefined ? externalActiveId : internalActiveId;
-  const setActiveId = onActiveIdChange || setInternalActiveId;
-
-  // Handle intersection observer for auto-highlighting
-  useEffect(() => {
-    const handleIntersect = (entries: IntersectionObserverEntry[]) => {
-      const visibleEntries = entries.filter(entry => entry.isIntersecting);
-
-      // Find the most recently scrolled-into-view element
-      const mostVisibleEntry = visibleEntries.reduce((prev, current) => {
-        // Prefer the entry that's more visible or higher on the page
-        const prevRatio = prev?.intersectionRatio || 0;
-        const currentRatio = current.intersectionRatio;
-
-        if (currentRatio > prevRatio) return current;
-        if (currentRatio === prevRatio &&
-            current.boundingClientRect.top < prev.boundingClientRect.top) {
-          return current;
-        }
-        return prev;
-      }, visibleEntries[0]);
-
-      if (mostVisibleEntry && !clickedId) {
-        const newActiveId = mostVisibleEntry.target.id;
-        if (newActiveId !== activeId) {
-          setActiveId(newActiveId);
-        }
-      }
-    };
-
-    observer.current = new IntersectionObserver(handleIntersect, {
-      root: null,
-      rootMargin: "-20% 0px -70% 0px", // Adjusted margins for better section detection
-      threshold: [0, 0.1, 0.5, 0.9, 1], // Multiple thresholds for better accuracy
-    });
-
-    const elements = data.map((item) =>
-      document.getElementById(item.href.slice(1))
-    );
-
-    elements.forEach((el) => {
-      if (el && observer.current) {
-        observer.current.observe(el);
-      }
-    });
-
-    // Set initial active ID if none is set
-    if (!activeId && elements[0]) {
-      setActiveId(elements[0].id);
-    }
-
-    return () => {
-      if (observer.current) {
-        elements.forEach((el) => {
-          if (el) {
-            observer.current!.unobserve(el);
-          }
-        });
-      }
-    };
-  }, [data, clickedId, activeId, setActiveId]);
-
-  const handleLinkClick = useCallback((id: string) => {
-    setClickedId(id);
-    setActiveId(id);
-
-    // Reset the clicked state after a delay to allow for smooth scrolling
-    const timer = setTimeout(() => {
-      setClickedId(null);
-    }, 1000);
-
-    return () => clearTimeout(timer);
-  }, [setActiveId]);
-
-  // Function to check if an item has children
-  const hasChildren = (currentId: string, currentLevel: number) => {
-    const currentIndex = data.findIndex(item => item.href.slice(1) === currentId);
-    if (currentIndex === -1 || currentIndex === data.length - 1) return false;
-
-    const nextItem = data[currentIndex + 1];
-    return nextItem.level > currentLevel;
-  };
-
-  // Calculate scroll progress for the active section
-  const [scrollProgress, setScrollProgress] = useState(0);
-
-  useEffect(() => {
-    const handleScroll = () => {
-      if (!activeId) return;
-
-      const activeElement = document.getElementById(activeId);
-      if (!activeElement) return;
-
-      const rect = activeElement.getBoundingClientRect();
-      const windowHeight = window.innerHeight;
-      const elementTop = rect.top;
-      const elementHeight = rect.height;
-
-      // Calculate how much of the element is visible
-      let progress = 0;
-      if (elementTop < windowHeight) {
-        progress = Math.min(1, (windowHeight - elementTop) / (windowHeight + elementHeight));
-      }
-
-      setScrollProgress(progress);
-    };
-
-    window.addEventListener('scroll', handleScroll, { passive: true });
-    return () => window.removeEventListener('scroll', handleScroll);
-  }, [activeId]);
-
-
-  return (
-    <div className="relative">
-      <div className="relative text-sm text-foreground/70 hover:text-foreground transition-colors">
-        <div className="flex flex-col gap-0">
-          {data.map(({ href, level, text }, index) => {
-            const id = href.slice(1);
-            const isActive = activeId === id;
-            const indent = level > 1 ? (level - 1) * 20 : 0;
-            // Prefix with underscore to indicate intentionally unused
-            const _isParent = hasChildren(id, level);
-            const _isLastInLevel = index === data.length - 1 || data[index + 1].level <= level;
-
-            return (
-              <div key={href} className="relative">
-                {/* Simple L-shaped connector */}
-                {level > 1 && (
-                  <div
-                    className={clsx("absolute top-0 h-full w-6", {
-                      "left-[6px]": indent === 20, // Level 2
-                      "left-[22px]": indent === 40, // Level 3
-                      "left-[38px]": indent === 60, // Level 4
-                    })}
-                  >
-                    {/* Vertical line */}
-                    <div className={clsx(
-                      "absolute left-0 top-0 h-full w-px",
-                      isActive ? "bg-primary/20 dark:bg-primary/30" : "bg-border/50 dark:bg-border/50"
-                    )}>
-                      {isActive && (
-                        <motion.div
-                          className="absolute left-0 top-0 w-full h-full bg-primary origin-top"
-                          initial={{ scaleY: 0 }}
-                          animate={{ scaleY: scrollProgress }}
-                          transition={{ duration: 0.3 }}
-                        />
-                      )}
-                    </div>
-
-                    {/* Horizontal line */}
-                    <div className={clsx(
-                      "absolute left-0 top-1/2 h-px w-6",
-                      isActive ? "bg-primary/20 dark:bg-primary/30" : "bg-border/50 dark:bg-border/50"
-                    )}>
-                      {isActive && (
-                        <motion.div
-                          className="absolute left-0 top-0 h-full w-full bg-primary dark:bg-accent origin-left"
-                          initial={{ scaleX: 0 }}
-                          animate={{ scaleX: scrollProgress }}
-                          transition={{ duration: 0.3, delay: 0.1 }}
-                        />
-                      )}
-                    </div>
-                  </div>
-                )}
-
-                <Link
-                  href={href}
-                  onClick={() => handleLinkClick(id)}
-                  className={clsx(
-                    "relative flex items-center py-2 transition-colors",
-                    {
-                      "text-primary dark:text-primary font-medium": isActive,
-                      "text-muted-foreground hover:text-foreground dark:hover:text-foreground/90": !isActive,
-                    }
-                  )}
-                  style={{
-                    paddingLeft: `${indent}px`,
-                    marginLeft: level > 1 ? '12px' : '0',
-                  }}
-                  ref={(el) => {
-                    const map = itemRefs.current;
-                    if (el) {
-                      map.set(id, el);
-                    } else {
-                      map.delete(id);
-                    }
-                  }}
-                >
-                  {/* Circle indicator */}
-                  <div className="relative w-4 h-4 flex items-center justify-center flex-shrink-0">
-                    <div className={clsx(
-                      "w-1.5 h-1.5 rounded-full transition-all duration-300 relative z-10",
-                      {
-                        "bg-primary scale-100 dark:bg-primary/90": isActive,
-                        "bg-muted-foreground/30 dark:bg-muted-foreground/30 scale-75 group-hover:scale-100 group-hover:bg-primary/50 dark:group-hover:bg-primary/50": !isActive,
-                      }
-                    )}>
-                      {isActive && (
-                        <motion.div
-                          className="absolute inset-0 rounded-full bg-primary/20 dark:bg-primary/30"
-                          initial={{ scale: 1 }}
-                          animate={{ scale: 1.8 }}
-                          transition={{
-                            duration: 2,
-                            repeat: Infinity,
-                            repeatType: "reverse"
-                          }}
-                        />
-                      )}
-                    </div>
-                  </div>
-
-                  <span className="truncate text-sm">
-                    {text}
-                  </span>
-                </Link>
-              </div>
-            );
-          })}
-        </div>
-      </div>
-      {/* Add scroll to top link at the bottom of TOC */}
-      <ScrollToTop className="mt-6" />
-    </div>
-  );
-}