@docubook/create 1.9.0 → 1.11.2

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

@@ -0,0 +1,264 @@
+"use client";
+
+import { getDocsTocs } from "@/lib/markdown";
+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);
+  const [activeSectionIndex, setActiveSectionIndex] = 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]);
+
+  // Update active section index when activeId changes
+  useEffect(() => {
+    if (activeId) {
+      const index = data.findIndex(item => item.href.slice(1) === activeId);
+      if (index !== -1) {
+        setActiveSectionIndex(index);
+      }
+    }
+  }, [activeId, data]);
+
+  return (
+    <div className="relative">
+      <div className="relative text-sm text-stone-600 dark:text-stone-400">
+        <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;
+            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" : "bg-stone-300 dark:bg-stone-600"
+                    )}>
+                      {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" : "bg-stone-300 dark:bg-stone-600"
+                    )}>
+                      {isActive && (
+                        <motion.div
+                          className="absolute left-0 top-0 h-full w-full bg-primary 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-400 font-medium": isActive,
+                      "text-stone-600 dark:text-stone-400 hover:text-stone-900 dark:hover:text-stone-200": !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": isActive,
+                        "bg-stone-300 dark:bg-stone-600 scale-75 group-hover:scale-100 group-hover:bg-primary/50": !isActive,
+                      }
+                    )}>
+                      {isActive && (
+                        <motion.div
+                          className="absolute inset-0 rounded-full bg-primary/20"
+                          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>
+  );
+}

package/src/dist/components/toc.tsx

@@ -0,0 +1,27 @@
+import { getDocsTocs } from "@/lib/markdown";
+import TocObserver from "./toc-observer";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { ListIcon } from "lucide-react";
+import Sponsor from "./Sponsor";
+
+
+export default async function Toc({ path }: { path: string }) {
+  const tocs = await getDocsTocs(path);
+
+  return (
+    <div className="lg:flex hidden toc flex-[1.5] min-w-[238px] py-5 sticky top-16 h-[calc(100vh-4rem)]">
+      <div className="flex flex-col h-full w-full px-2 gap-2 mb-auto">
+        <div className="flex items-center gap-2">
+          <ListIcon className="w-4 h-4" />
+          <h3 className="font-medium text-sm">On this page</h3>
+        </div>
+        <div className="flex-shrink-0 min-h-0 max-h-[calc(70vh-4rem)]">
+          <ScrollArea className="h-full">
+            <TocObserver data={tocs} />
+          </ScrollArea>
+        </div>
+        <Sponsor />
+      </div>
+    </div>
+  );
+}

package/src/dist/components/typography.tsx

@@ -0,0 +1,9 @@
+import { PropsWithChildren } from "react";
+
+export function Typography({ children }: PropsWithChildren) {
+  return (
+    <div className="prose prose-zinc dark:prose-invert prose-code:font-code dark:prose-code:bg-stone-900/25 prose-code:bg-stone-50 prose-pre:bg-background prose-headings:scroll-m-20 w-[85vw] sm:w-full sm:mx-auto prose-code:text-sm prose-code:leading-6 dark:prose-code:text-white prose-code:text-stone-800 prose-code:p-1 prose-code:rounded-md prose-code:border pt-2 !min-w-full prose-img:rounded-md prose-img:border prose-code:before:content-none prose-code:after:content-none prose-code:px-1.5 prose-code:overflow-x-auto !max-w-[500px] prose-img:my-3 prose-h2:my-4 prose-h2:mt-8">
+      {children}
+    </div>
+  );
+}

package/src/dist/components/ui/accordion.tsx

@@ -0,0 +1,58 @@
+"use client"
+
+import * as React from "react"
+import * as AccordionPrimitive from "@radix-ui/react-accordion"
+import { ChevronDown } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Accordion = AccordionPrimitive.Root
+
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item
+    ref={ref}
+    className={cn("border-b", className)}
+    {...props}
+  />
+))
+AccordionItem.displayName = "AccordionItem"
+
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+))
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    {...props}
+  >
+    <div className={cn("pb-4 pt-0", className)}>{children}</div>
+  </AccordionPrimitive.Content>
+))
+
+AccordionContent.displayName = AccordionPrimitive.Content.displayName
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }

package/src/dist/components/ui/animated-shiny-text.tsx

@@ -0,0 +1,40 @@
+import { CSSProperties, FC, ReactNode } from "react";
+
+import { cn } from "@/lib/utils";
+
+interface AnimatedShinyTextProps {
+  children: ReactNode;
+  className?: string;
+  shimmerWidth?: number;
+}
+
+const AnimatedShinyText: FC<AnimatedShinyTextProps> = ({
+  children,
+  className,
+  shimmerWidth = 100,
+}) => {
+  return (
+    <p
+      style={
+        {
+          "--shiny-width": `${shimmerWidth}px`,
+        } as CSSProperties
+      }
+      className={cn(
+        "mx-auto max-w-md text-neutral-600/70 dark:text-neutral-400/70",
+
+        // Shine effect
+        "animate-shiny-text bg-clip-text bg-no-repeat [background-position:0_0] [background-size:var(--shiny-width)_100%] [transition:background-position_1s_cubic-bezier(.6,.6,0,1)_infinite]",
+
+        // Shine gradient
+        "bg-gradient-to-r from-transparent via-black/80 via-50% to-transparent  dark:via-white/80",
+
+        className,
+      )}
+    >
+      {children}
+    </p>
+  );
+};
+
+export default AnimatedShinyText;

package/src/dist/components/ui/aurora.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import React, { memo } from "react";
+
+interface AuroraTextProps {
+  children: React.ReactNode;
+  className?: string;
+  colors?: string[];
+  speed?: number;
+}
+
+export const AuroraText = memo(
+  ({
+    children,
+    className = "",
+    colors = ["#FF0080", "#7928CA", "#0070F3", "#38bdf8"],
+    speed = 1,
+  }: AuroraTextProps) => {
+    const gradientStyle = {
+      backgroundImage: `linear-gradient(135deg, ${colors.join(", ")}, ${
+        colors[0]
+      })`,
+      WebkitBackgroundClip: "text",
+      WebkitTextFillColor: "transparent",
+      animationDuration: `${10 / speed}s`,
+    };
+
+    return (
+      <span className={`relative inline-block ${className}`}>
+        <span className="sr-only">{children}</span>
+        <span
+          className="relative animate-aurora bg-[length:200%_auto] bg-clip-text text-transparent"
+          style={gradientStyle}
+          aria-hidden="true"
+        >
+          {children}
+        </span>
+      </span>
+    );
+  },
+);
+
+AuroraText.displayName = "AuroraText";
+
+export default AuroraText;

package/src/dist/components/ui/avatar.tsx

@@ -0,0 +1,50 @@
+"use client"
+
+import * as React from "react"
+import * as AvatarPrimitive from "@radix-ui/react-avatar"
+
+import { cn } from "@/lib/utils"
+
+const Avatar = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
+      className
+    )}
+    {...props}
+  />
+))
+Avatar.displayName = AvatarPrimitive.Root.displayName
+
+const AvatarImage = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Image>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image
+    ref={ref}
+    className={cn("aspect-square h-full w-full", className)}
+    {...props}
+  />
+))
+AvatarImage.displayName = AvatarPrimitive.Image.displayName
+
+const AvatarFallback = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn(
+      "flex h-full w-full items-center justify-center rounded-full bg-muted",
+      className
+    )}
+    {...props}
+  />
+))
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
+
+export { Avatar, AvatarImage, AvatarFallback }

package/src/dist/components/ui/badge.tsx

@@ -0,0 +1,37 @@
+"use client";
+
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/utils";
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+);
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  );
+}
+
+export { Badge, badgeVariants };

package/src/dist/components/ui/breadcrumb.tsx

@@ -0,0 +1,115 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { ChevronRight, MoreHorizontal } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Breadcrumb = React.forwardRef<
+  HTMLElement,
+  React.ComponentPropsWithoutRef<"nav"> & {
+    separator?: React.ReactNode
+  }
+>(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />)
+Breadcrumb.displayName = "Breadcrumb"
+
+const BreadcrumbList = React.forwardRef<
+  HTMLOListElement,
+  React.ComponentPropsWithoutRef<"ol">
+>(({ className, ...props }, ref) => (
+  <ol
+    ref={ref}
+    className={cn(
+      "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
+      className
+    )}
+    {...props}
+  />
+))
+BreadcrumbList.displayName = "BreadcrumbList"
+
+const BreadcrumbItem = React.forwardRef<
+  HTMLLIElement,
+  React.ComponentPropsWithoutRef<"li">
+>(({ className, ...props }, ref) => (
+  <li
+    ref={ref}
+    className={cn("inline-flex items-center gap-1.5", className)}
+    {...props}
+  />
+))
+BreadcrumbItem.displayName = "BreadcrumbItem"
+
+const BreadcrumbLink = React.forwardRef<
+  HTMLAnchorElement,
+  React.ComponentPropsWithoutRef<"a"> & {
+    asChild?: boolean
+  }
+>(({ asChild, className, ...props }, ref) => {
+  const Comp = asChild ? Slot : "a"
+
+  return (
+    <Comp
+      ref={ref}
+      className={cn("transition-colors hover:text-foreground", className)}
+      {...props}
+    />
+  )
+})
+BreadcrumbLink.displayName = "BreadcrumbLink"
+
+const BreadcrumbPage = React.forwardRef<
+  HTMLSpanElement,
+  React.ComponentPropsWithoutRef<"span">
+>(({ className, ...props }, ref) => (
+  <span
+    ref={ref}
+    role="link"
+    aria-disabled="true"
+    aria-current="page"
+    className={cn("font-normal text-foreground", className)}
+    {...props}
+  />
+))
+BreadcrumbPage.displayName = "BreadcrumbPage"
+
+const BreadcrumbSeparator = ({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<"li">) => (
+  <li
+    role="presentation"
+    aria-hidden="true"
+    className={cn("[&>svg]:size-3.5", className)}
+    {...props}
+  >
+    {children ?? <ChevronRight />}
+  </li>
+)
+BreadcrumbSeparator.displayName = "BreadcrumbSeparator"
+
+const BreadcrumbEllipsis = ({
+  className,
+  ...props
+}: React.ComponentProps<"span">) => (
+  <span
+    role="presentation"
+    aria-hidden="true"
+    className={cn("flex h-9 w-9 items-center justify-center", className)}
+    {...props}
+  >
+    <MoreHorizontal className="h-4 w-4" />
+    <span className="sr-only">More</span>
+  </span>
+)
+BreadcrumbEllipsis.displayName = "BreadcrumbElipssis"
+
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+}