From 4521957fb9b5c20cc08824187fcacacd5740aa1a Mon Sep 17 00:00:00 2001
From: Wildan Nursahidan <edpwildan@gmail.com>
Date: Sat, 1 Mar 2025 18:18:54 +0700
Subject: [PATCH] update versi docubook

---
 CHANGELOG.md                              |  23 +
 LICENSE                                   |   2 +-
 README.md                                 |  33 --
 app/blog/[slug]/page.tsx                  |   4 +-
 app/docs/[[...slug]]/page.tsx             |  14 +-
 app/docs/layout.tsx                       |   4 +-
 app/hire-me/page.tsx                      |  18 -
 app/layout.tsx                            |   8 +-
 components/{ => docs}/anchor.tsx          |   0
 components/{ => docs}/docs-breadcrumb.tsx |   0
 components/{ => docs}/docs-menu.tsx       |   0
 components/{ => docs}/edit-on-github.tsx  |   4 +-
 components/docs/footer.tsx                |  56 +++
 components/{ => docs}/leftbar.tsx         |  10 +-
 components/{ => docs}/mob-toc.tsx         |   0
 components/{ => docs}/navbar.tsx          |  37 +-
 components/{ => docs}/pagination.tsx      |   4 +-
 components/{ => docs}/scroll-to-top.tsx   |   2 +-
 components/{ => docs}/search.tsx          |   4 +-
 components/{ => docs}/sublink.tsx         |   0
 components/docs/theme-toggle.tsx          |  71 ++++
 components/{ => docs}/toc-observer.tsx    |   0
 components/{ => docs}/toc.tsx             |   0
 components/{ => docs}/typography.tsx      |   0
 components/footer.tsx                     |  57 ---
 components/home/copycommand.tsx           |  33 ++
 components/home/runtime.tsx               |  91 ++++
 components/terminal.tsx                   |  48 ---
 components/theme-toggle.tsx               |  40 --
 components/ui/toggle-group.tsx            |  61 +++
 components/ui/toggle.tsx                  |  46 ++
 docu.json                                 |  17 +-
 package-lock.json                         | 497 +++++++++++++---------
 package.json                              |   4 +-
 pnpm-lock.yaml                            |  58 +++
 35 files changed, 790 insertions(+), 456 deletions(-)
 delete mode 100644 app/hire-me/page.tsx
 rename components/{ => docs}/anchor.tsx (100%)
 rename components/{ => docs}/docs-breadcrumb.tsx (100%)
 rename components/{ => docs}/docs-menu.tsx (100%)
 rename components/{ => docs}/edit-on-github.tsx (93%)
 create mode 100644 components/docs/footer.tsx
 rename components/{ => docs}/leftbar.tsx (83%)
 rename components/{ => docs}/mob-toc.tsx (100%)
 rename components/{ => docs}/navbar.tsx (58%)
 rename components/{ => docs}/pagination.tsx (96%)
 rename components/{ => docs}/scroll-to-top.tsx (97%)
 rename components/{ => docs}/search.tsx (95%)
 rename components/{ => docs}/sublink.tsx (100%)
 create mode 100644 components/docs/theme-toggle.tsx
 rename components/{ => docs}/toc-observer.tsx (100%)
 rename components/{ => docs}/toc.tsx (100%)
 rename components/{ => docs}/typography.tsx (100%)
 delete mode 100644 components/footer.tsx
 create mode 100644 components/home/copycommand.tsx
 create mode 100644 components/home/runtime.tsx
 delete mode 100644 components/terminal.tsx
 delete mode 100644 components/theme-toggle.tsx
 create mode 100644 components/ui/toggle-group.tsx
 create mode 100644 components/ui/toggle.tsx

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8fbe5d9..0cac9ce 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,26 @@
+## [1.8.0] - 2025-03-01
+
+> Now looks more modern and clean which is a big change in layout and design
+
+### Added
+
+- Social footer
+- Toggle group
+- Site description {meta.description} in footer
+- Site title {meta.title} in footer
+
+### Improved
+
+- Header design changes
+- Footer design changes
+- New functions in theme provider
+- Object changes in docu.json
+
+### Fixed
+
+- Updates to path structure components
+- Groups to organize components
+
 ## [1.7.0] - 2025-02-23
 
 > Remove the old function in the search dialog and replace it with a new and more optimal feature
diff --git a/LICENSE b/LICENSE
index ab7a1da..02e35d7 100644
--- a/LICENSE
+++ b/LICENSE
@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2024 Mohd. Nisab
+Copyright (c) 2025 Wildan Nursahidan
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
diff --git a/README.md b/README.md
index 7a368f7..8d684d2 100644
--- a/README.md
+++ b/README.md
@@ -36,36 +36,3 @@ Next steps:
 3. Start the development server:
    npm run dev
 ```
-
-## Update
-### How to Update DocuBook?
-- **Open a New Terminal**: Please open a new terminal on the desktop that has DocuBook installed.
-- **Move Directory**: for example, if the directory name is docubook, then write `cd docubook` and press enter.
-
-```bash
-npx @docubook/update@latest
-```
-
-#### command output
-
-```bash
-📂 Updating Docubook project in /Users/wildan/Public/docubook...
-
-ℹ ⚡ Skipped public
-ℹ ⚡ Skipped contents
-ℹ ⚡ Skipped app/page.tsx
-ℹ ⚡ Skipped docu.json
-ℹ ⚡ Skipped CHANGELOG.md
-✨ Replacing styles folder...
-✨ Replaced all CSS files in styles folder
-✔ ✅ Docubook v1.4.2 successfully updated in /Users/wildan/Public/docubook!
-
-🎯 Next steps:
-1. Verify your changes in the current directory.
-2. Run the install script to check for package updates:
-   npm install
-3. Run the development server:
-   npm run dev
-```
-
-Access the app on => http://localhost:3000
diff --git a/app/blog/[slug]/page.tsx b/app/blog/[slug]/page.tsx
index 42951bc..61f6953 100644
--- a/app/blog/[slug]/page.tsx
+++ b/app/blog/[slug]/page.tsx
@@ -1,4 +1,4 @@
-import { Typography } from "@/components/typography";
+import { Typography } from "@/components/docs/typography";
 import { buttonVariants } from "@/components/ui/button";
 import { Author, getAllBlogStaticPaths, getBlogForSlug } from "@/lib/markdown";
 import { ArrowLeftIcon } from "lucide-react";
@@ -6,7 +6,7 @@ import Link from "next/link";
 import { notFound } from "next/navigation";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { formatDate } from "@/lib/utils";
-import { ScrollToTop } from "@/components/scroll-to-top";
+import { ScrollToTop } from "@/components/docs/scroll-to-top";
 
 type PageProps = {
   params: { slug: string };
diff --git a/app/docs/[[...slug]]/page.tsx b/app/docs/[[...slug]]/page.tsx
index aa1a9da..02e2621 100644
--- a/app/docs/[[...slug]]/page.tsx
+++ b/app/docs/[[...slug]]/page.tsx
@@ -1,14 +1,14 @@
 import { notFound } from "next/navigation";
 import { getDocsForSlug, getDocsTocs } from "@/lib/markdown";
-import DocsBreadcrumb from "@/components/docs-breadcrumb";
-import Pagination from "@/components/pagination";
-import Toc from "@/components/toc";
-import { Typography } from "@/components/typography";
-import EditThisPage from "@/components/edit-on-github";
+import DocsBreadcrumb from "@/components/docs/docs-breadcrumb";
+import Pagination from "@/components/docs/pagination";
+import Toc from "@/components/docs/toc";
+import { Typography } from "@/components/docs/typography";
+import EditThisPage from "@/components/docs/edit-on-github";
 import { formatDate2 } from "@/lib/utils";
 import docuConfig from "@/docu.json";
-import MobToc from "@/components/mob-toc";
-import { ScrollToTop } from "@/components/scroll-to-top";
+import MobToc from "@/components/docs/mob-toc";
+import { ScrollToTop } from "@/components/docs/scroll-to-top";
 
 const { meta } = docuConfig;
 
diff --git a/app/docs/layout.tsx b/app/docs/layout.tsx
index 83f9bba..c769f8f 100644
--- a/app/docs/layout.tsx
+++ b/app/docs/layout.tsx
@@ -1,4 +1,4 @@
-import { Leftbar } from "@/components/leftbar";
+import { Leftbar } from "@/components/docs/leftbar";
 
 export default function DocsLayout({
   children,
@@ -11,4 +11,4 @@ export default function DocsLayout({
       <div className="flex-[5.25]">{children}</div>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/app/hire-me/page.tsx b/app/hire-me/page.tsx
deleted file mode 100644
index 327d889..0000000
--- a/app/hire-me/page.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { getMetadata } from "@/app/layout";
-
-export const metadata = getMetadata({
-  title: "Hire Me",
-  description: "Hire me to start a documentation project with DocuBook",
-});
-
-export default function EmbeddedHTML() {
-    return (
-      <div className="w-full py-0 dark:bg-transparent mx-auto min-h-svh">
-        <iframe
-          src="/hire-me.html"
-          width="100%"
-          height="1000"
-        />
-      </div>
-    );
-}
diff --git a/app/layout.tsx b/app/layout.tsx
index cc91b43..595e88d 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,9 +1,9 @@
 import type { Metadata } from "next";
 import { ThemeProvider } from "@/components/contexts/theme-provider";
-import { Navbar } from "@/components/navbar";
+import { Navbar } from "@/components/docs/navbar";
 import { GeistSans } from "geist/font/sans";
 import { GeistMono } from "geist/font/mono";
-import { Footer } from "@/components/footer";
+import { Footer } from "@/components/docs/footer";
 import docuConfig from "@/docu.json";
 import { Toaster } from "@/components/ui/sonner";
 import "@/styles/globals.css";
@@ -45,7 +45,7 @@ export function getMetadata({
   image?: string;
 }): Metadata {
   const ogImage = image ? new URL(`/images/${image}`, meta.baseURL).toString() : undefined;
-  
+
   return {
     ...defaultMetadata,
     title: title ? `${title}` : defaultMetadata.title,
@@ -93,4 +93,4 @@ export default function RootLayout({
       </body>
     </html>
   );
-}
\ No newline at end of file
+}
diff --git a/components/anchor.tsx b/components/docs/anchor.tsx
similarity index 100%
rename from components/anchor.tsx
rename to components/docs/anchor.tsx
diff --git a/components/docs-breadcrumb.tsx b/components/docs/docs-breadcrumb.tsx
similarity index 100%
rename from components/docs-breadcrumb.tsx
rename to components/docs/docs-breadcrumb.tsx
diff --git a/components/docs-menu.tsx b/components/docs/docs-menu.tsx
similarity index 100%
rename from components/docs-menu.tsx
rename to components/docs/docs-menu.tsx
diff --git a/components/edit-on-github.tsx b/components/docs/edit-on-github.tsx
similarity index 93%
rename from components/edit-on-github.tsx
rename to components/docs/edit-on-github.tsx
index 0498642..1d07e6b 100644
--- a/components/edit-on-github.tsx
+++ b/components/docs/edit-on-github.tsx
@@ -25,11 +25,11 @@ const EditThisPage: React.FC<EditThisPageProps> = ({ filePath }) => {
           fontWeight: 'bold',
         }}
       >
-        <span className='text-primary text-sm max-[480px]:hidden'>Edit this page on Github</span>
+        <span className='text-primary text-sm max-[480px]:hidden'>Edit this page</span>
         <SquarePenIcon className="w-4 h-4 text-primary" />
       </Link>
     </div>
   );
 };
 
-export default EditThisPage;
\ No newline at end of file
+export default EditThisPage;
diff --git a/components/docs/footer.tsx b/components/docs/footer.tsx
new file mode 100644
index 0000000..76b4914
--- /dev/null
+++ b/components/docs/footer.tsx
@@ -0,0 +1,56 @@
+import Link from "next/link";
+import { ModeToggle } from "@/components/docs/theme-toggle";
+import docuConfig from "@/docu.json";
+import * as LucideIcons from "lucide-react"; // Import all icons
+
+export function Footer() {
+  const { footer } = docuConfig;
+  const { meta } = docuConfig;
+  return (
+    <footer className="w-full py-4 border-t lg:py-8 bg-background">
+      <div className="container flex flex-wrap items-center justify-between text-sm">
+        <div className="items-start justify-center hidden gap-4 lg:flex-col lg:flex lg:w-3/5">
+            <h3 className="text-lg font-bold font-code">{meta.title}</h3>
+            <span className="w-3/4 text-base text-wrap text-muted-foreground">{meta.description}</span>
+            <div className="flex items-center gap-6 mt-2">
+                <FooterButtons />
+            </div>
+        </div>
+        <div className="flex flex-col items-start justify-center w-full gap-4 mt-4 xl:items-end lg:w-2/5">
+            <p className="text-center text-muted-foreground">
+                Copyright © {new Date().getFullYear()} {footer.copyright} - Made with{" "}
+                <Link href="https://www.docubook.pro" target="_blank" rel="noopener noreferrer" className="underline underline-offset-2">
+                DocuBook
+                </Link>
+            </p>
+            <div className="hidden lg:flex">
+                <ModeToggle />
+            </div>
+        </div>
+      </div>
+    </footer>
+  );
+}
+
+export function FooterButtons() {
+  const { footer } = docuConfig;
+
+  return (
+    <>
+      {footer.social?.map((item) => {
+        const IconComponent = (LucideIcons[item.iconName as keyof typeof LucideIcons] ?? LucideIcons["Globe"]) as unknown as React.FC<{ className?: string }>;
+        return (
+          <Link
+            key={item.name}
+            href={item.url}
+            target="_blank"
+            rel="noopener noreferrer"
+            aria-label={item.name}
+          >
+            <IconComponent className="w-4 h-4 text-gray-800 transition-colors dark:text-gray-400 hover:text-primary" />
+          </Link>
+        );
+      })}
+    </>
+  );
+}
diff --git a/components/leftbar.tsx b/components/docs/leftbar.tsx
similarity index 83%
rename from components/leftbar.tsx
rename to components/docs/leftbar.tsx
index ef2b163..e5d5932 100644
--- a/components/leftbar.tsx
+++ b/components/docs/leftbar.tsx
@@ -6,12 +6,13 @@ import {
   SheetTrigger,
 } from "@/components/ui/sheet";
 import { Logo, NavMenu } from "./navbar";
-import { Button } from "./ui/button";
+import { Button } from "../ui/button";
 import { AlignLeftIcon } from "lucide-react";
 import { FooterButtons } from "./footer";
-import { DialogTitle } from "./ui/dialog";
+import { DialogTitle } from "../ui/dialog";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import DocsMenu from "./docs-menu";
+import { ModeToggle } from "./theme-toggle";
 
 export function Leftbar() {
   return (
@@ -45,9 +46,12 @@ export function SheetLeftbar() {
           <div className="mx-2 px-5">
             <DocsMenu isSheet />
           </div>
-          <div className="p-6 pb-4 flex gap-2.5">
+          <div className="px-6 py-2 flex justify-start items-center gap-6">
             <FooterButtons />
           </div>
+          <div className="flex w-2/4 px-5">
+            <ModeToggle />
+          </div>
         </div>
       </SheetContent>
     </Sheet>
diff --git a/components/mob-toc.tsx b/components/docs/mob-toc.tsx
similarity index 100%
rename from components/mob-toc.tsx
rename to components/docs/mob-toc.tsx
diff --git a/components/navbar.tsx b/components/docs/navbar.tsx
similarity index 58%
rename from components/navbar.tsx
rename to components/docs/navbar.tsx
index 1744b5e..cf6d26b 100644
--- a/components/navbar.tsx
+++ b/components/docs/navbar.tsx
@@ -1,8 +1,6 @@
-import { ModeToggle } from "@/components/theme-toggle";
 import { ArrowUpRight } from "lucide-react";
 import Link from "next/link";
 import Image from "next/image";
-import { buttonVariants } from "./ui/button";
 import Search from "./search";
 import Anchor from "./anchor";
 import { SheetLeftbar } from "./leftbar";
@@ -10,43 +8,24 @@ import { SheetClose } from "@/components/ui/sheet";
 import docuConfig from "@/docu.json"; // Import JSON
 
 export function Navbar() {
-  const { social } = docuConfig; // Extract navbar and social from JSON
 
   return (
-    <nav className="w-full border-b h-16 sticky top-0 z-50 bg-background">
+    <nav className="sticky top-0 z-50 w-full h-16 border-b bg-background">
       <div className="sm:container mx-auto w-[95vw] h-full flex items-center justify-between md:gap-2">
         <div className="flex items-center gap-5">
           <SheetLeftbar />
           <div className="flex items-center gap-6">
-            <div className="sm:flex hidden">
+            <div className="hidden sm:flex">
               <Logo />
             </div>
-            <div className="lg:flex hidden items-center gap-4 text-sm font-medium text-muted-foreground">
+            <div className="items-center hidden gap-4 text-sm font-medium lg:flex text-muted-foreground">
               <NavMenu />
             </div>
           </div>
         </div>
 
-        <div className="flex items-center gap-3">
-          <div className="flex items-center gap-2">
+        <div className="flex items-center gap-2">
             <Search />
-            <div className="flex ml-2.5 sm:ml-0 gap-2">
-              {social.map((item) => {
-                const Icon = require("lucide-react")[item.iconName]; // Dynamically load icon
-                return (
-                  <Link
-                    key={item.name}
-                    href={item.url}
-                    target="_blank"
-                    className={buttonVariants({ variant: "ghost", size: "icon" })}
-                  >
-                    <Icon className="h-[1.1rem] w-[1.1rem]" />
-                  </Link>
-                );
-              })}
-              <ModeToggle />
-            </div>
-          </div>
         </div>
       </div>
     </nav>
@@ -59,7 +38,7 @@ export function Logo() {
   return (
     <Link href="/" className="flex items-center gap-2.5">
       <Image src={navbar.logo.src} alt={navbar.logo.alt} width="24" height="24" />
-      <h2 className="text-md font-bold font-code">{navbar.logoText}</h2>
+      <h2 className="font-bold font-code text-md">{navbar.logoText}</h2>
     </Link>
   );
 }
@@ -69,12 +48,12 @@ export function NavMenu({ isSheet = false }) {
 
   return (
     <>
-      {navbar.menu.map((item) => {
+      {navbar?.menu?.map((item) => {
         const isExternal = item.href.startsWith("http");
 
         const Comp = (
           <Anchor
-            key={item.title + item.href}
+            key={`${item.title}-${item.href}`}
             activeClassName="!text-primary md:font-semibold font-medium"
             absolute
             className="flex items-center gap-1 dark:text-stone-300/85 text-stone-800"
@@ -83,7 +62,7 @@ export function NavMenu({ isSheet = false }) {
             rel={isExternal ? "noopener noreferrer" : undefined}
           >
             {item.title}
-            {isExternal && <ArrowUpRight className="h-4 w-4 text-muted-foreground" />}
+            {isExternal && <ArrowUpRight className="w-4 h-4 text-muted-foreground" />}
           </Anchor>
         );
         return isSheet ? (
diff --git a/components/pagination.tsx b/components/docs/pagination.tsx
similarity index 96%
rename from components/pagination.tsx
rename to components/docs/pagination.tsx
index 4f0ba7e..6adbf11 100644
--- a/components/pagination.tsx
+++ b/components/docs/pagination.tsx
@@ -1,7 +1,7 @@
 import { getPreviousNext } from "@/lib/markdown";
 import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
 import Link from "next/link";
-import { buttonVariants } from "./ui/button";
+import { buttonVariants } from "../ui/button";
 
 export default function Pagination({ pathname }: { pathname: string }) {
   const res = getPreviousNext(pathname);
@@ -46,4 +46,4 @@ export default function Pagination({ pathname }: { pathname: string }) {
       </div>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/components/scroll-to-top.tsx b/components/docs/scroll-to-top.tsx
similarity index 97%
rename from components/scroll-to-top.tsx
rename to components/docs/scroll-to-top.tsx
index 220ebe3..7a6fec5 100644
--- a/components/scroll-to-top.tsx
+++ b/components/docs/scroll-to-top.tsx
@@ -2,7 +2,7 @@
 
 import { ArrowUpIcon } from "lucide-react";
 import { useEffect, useState } from "react";
-import { Button } from "./ui/button";
+import { Button } from "../ui/button";
 import { cn } from "@/lib/utils";
 
 export function ScrollToTop() {
diff --git a/components/search.tsx b/components/docs/search.tsx
similarity index 95%
rename from components/search.tsx
rename to components/docs/search.tsx
index 01935b2..99b8642 100644
--- a/components/search.tsx
+++ b/components/docs/search.tsx
@@ -96,14 +96,14 @@ export default function Search() {
         }}
       >
         <DialogTrigger asChild>
-          <div className="relative flex-1 cursor-pointer sm:w-60">
+          <div className="relative flex-1 cursor-pointer max-w-[160px]">
             <SearchIcon className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-stone-500 dark:text-stone-400" />
             <Input
               className="md:w-full rounded-md dark:bg-background/95 bg-background border h-9 pl-10 pr-0 sm:pr-4 text-sm shadow-sm overflow-ellipsis"
               placeholder="Search"
               type="search"
             />
-            <div className="sm:flex hidden absolute top-1/2 -translate-y-1/2 right-2 text-xs font-medium font-mono items-center gap-0.5 dark:bg-black dark:border dark:border-white/20 bg-stone-200/50 border border-black/40 p-1 rounded-sm">
+            <div className="flex absolute top-1/2 -translate-y-1/2 right-2 text-xs font-medium font-mono items-center gap-0.5 dark:bg-black dark:border dark:border-white/20 bg-stone-200/50 border border-black/40 p-1 rounded-sm">
               <CommandIcon className="w-3 h-3" />
               <span>K</span>
             </div>
diff --git a/components/sublink.tsx b/components/docs/sublink.tsx
similarity index 100%
rename from components/sublink.tsx
rename to components/docs/sublink.tsx
diff --git a/components/docs/theme-toggle.tsx b/components/docs/theme-toggle.tsx
new file mode 100644
index 0000000..6421e86
--- /dev/null
+++ b/components/docs/theme-toggle.tsx
@@ -0,0 +1,71 @@
+"use client";
+
+import * as React from "react";
+import { Moon, Sun, Monitor } from "lucide-react";
+import { useTheme } from "next-themes";
+import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
+
+export function ModeToggle() {
+  const { theme, setTheme } = useTheme();
+  const [selectedTheme, setSelectedTheme] = React.useState<string>("system");
+
+  // Pastikan toggle tetap di posisi yang benar setelah reload
+  React.useEffect(() => {
+    if (theme) {
+      setSelectedTheme(theme);
+    } else {
+      setSelectedTheme("system"); // Default ke system jika undefined
+    }
+  }, [theme]);
+
+  return (
+    <ToggleGroup
+      type="single"
+      value={selectedTheme}
+      onValueChange={(value) => {
+        if (value) {
+          setTheme(value);
+          setSelectedTheme(value);
+        }
+      }}
+      className="flex items-center gap-1 rounded-full border border-gray-300 dark:border-gray-700 p-1 transition-all"
+    >
+      <ToggleGroupItem
+        value="light"
+        size="sm"
+        aria-label="Light Mode"
+        className={`rounded-full p-1 transition-all ${
+          selectedTheme === "light"
+            ? "bg-blue-500 text-white"
+            : "bg-transparent"
+        }`}
+      >
+        <Sun className={`h-4 w-4 ${selectedTheme === "light" ? "text-white" : "text-gray-600 dark:text-gray-300"}`} />
+      </ToggleGroupItem>
+      <ToggleGroupItem
+        value="system"
+        size="sm"
+        aria-label="System Mode"
+        className={`rounded-full p-1 transition-all ${
+          selectedTheme === "system"
+            ? "bg-blue-500 text-white"
+            : "bg-transparent"
+        }`}
+      >
+        <Monitor className={`h-4 w-4 ${selectedTheme === "system" ? "text-white" : "text-gray-600 dark:text-gray-300"}`} />
+      </ToggleGroupItem>
+      <ToggleGroupItem
+        value="dark"
+        size="sm"
+        aria-label="Dark Mode"
+        className={`rounded-full p-1 transition-all ${
+          selectedTheme === "dark"
+            ? "bg-blue-500 text-white"
+            : "bg-transparent"
+        }`}
+      >
+        <Moon className={`h-4 w-4 ${selectedTheme === "dark" ? "text-white" : "text-gray-600 dark:text-gray-300"}`} />
+      </ToggleGroupItem>
+    </ToggleGroup>
+  );
+}
diff --git a/components/toc-observer.tsx b/components/docs/toc-observer.tsx
similarity index 100%
rename from components/toc-observer.tsx
rename to components/docs/toc-observer.tsx
diff --git a/components/toc.tsx b/components/docs/toc.tsx
similarity index 100%
rename from components/toc.tsx
rename to components/docs/toc.tsx
diff --git a/components/typography.tsx b/components/docs/typography.tsx
similarity index 100%
rename from components/typography.tsx
rename to components/docs/typography.tsx
diff --git a/components/footer.tsx b/components/footer.tsx
deleted file mode 100644
index b2cc733..0000000
--- a/components/footer.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import Link from "next/link";
-import { buttonVariants } from "./ui/button";
-import docuConfig from "@/docu.json"; // Import JSON
-
-export function Footer() {
-  const { footer } = docuConfig; // Extract footer from JSON
-
-  return (
-    <footer className="border-t w-full h-16">
-      <div className="container flex items-center sm:justify-between justify-center sm:gap-0 gap-4 h-full text-muted-foreground text-sm flex-wrap sm:py-0 py-3 max-sm:px-4">
-        {/* Footer Text */}
-        <div className="flex items-center gap-3">
-          <p className="text-center">
-            Copyright © {new Date().getFullYear()} {footer.copyright} - Crafted with love using{" "}
-            <Link
-              href="https://www.docubook.pro"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="underline underline-offset-2"
-            >
-              DocuBook
-            </Link>
-          </p>
-        </div>
-
-        {/* Footer Buttons */}
-        <div className="gap-4 items-center hidden md:flex">
-          <FooterButtons />
-        </div>
-      </div>
-    </footer>
-  );
-}
-
-export function FooterButtons() {
-  const { footer } = docuConfig; // Extract footer from JSON
-
-  return (
-    <>
-      {footer.buttons.map((button, index) => {
-        const Icon = require("lucide-react")[button.iconName]; // Dynamically load icon
-        return (
-          <Link
-            key={index}
-            href={button.url}
-            target="_blank"
-            rel="noopener noreferrer"
-            className={buttonVariants({ variant: "outline", size: "sm" })}
-          >
-            <Icon className="h-4 w-4 mr-2 dark:text-primary dark:hover:text-accent-foreground" />
-            {button.text}
-          </Link>
-        );
-      })}
-    </>
-  );
-}
diff --git a/components/home/copycommand.tsx b/components/home/copycommand.tsx
new file mode 100644
index 0000000..64c6cd3
--- /dev/null
+++ b/components/home/copycommand.tsx
@@ -0,0 +1,33 @@
+"use client";
+
+import { useState } from "react";
+import { TerminalSquareIcon, ClipboardIcon, CheckIcon } from "lucide-react";
+
+export function CopyCommand() {
+  const [copied, setCopied] = useState(false);
+  const command = "npx @docubook/create@latest";
+
+  const copyToClipboard = () => {
+    navigator.clipboard.writeText(command);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 5000);
+  };
+
+  return (
+    <div className="relative flex flex-row items-center justify-center sm:gap-2 gap-0.5 text-muted-foreground text-md mt-10 mb-12 font-code text-base font-medium group">
+      <TerminalSquareIcon className="w-5 h-5 mr-1 mt-0.5" />
+      <span className="select-all">{command}</span>
+      <button
+        onClick={copyToClipboard}
+        className="p-1 ml-1 transition-opacity rounded-md opacity-0 group-hover:opacity-100 hover:bg-gray-200 dark:hover:bg-gray-700"
+      >
+        {copied ? (
+          <CheckIcon className="w-4 h-4 text-green-500" />
+        ) : (
+          <ClipboardIcon className="w-4 h-4" />
+        )}
+      </button>
+    </div>
+  );
+}
+export default CopyCommand;
diff --git a/components/home/runtime.tsx b/components/home/runtime.tsx
new file mode 100644
index 0000000..db67e35
--- /dev/null
+++ b/components/home/runtime.tsx
@@ -0,0 +1,91 @@
+"use client";
+
+import { useState, useEffect, useRef } from "react";
+import { Button } from "@/components/ui/button";
+import { Play } from "lucide-react";
+
+const scriptOutput = [
+  "DocuBook CLI Installer",
+  "✔ Enter your project directory name: docubook",
+  "? Choose a package manager:",
+  "> npm",
+  "  pnpm",
+  "  yarn",
+  "  bun",
+  "",
+  ":: Cloning starter from GitLab...",
+  "✔ Docubook project successfully created!",
+  "Skipping rename postcss.config.js because Bun is not installed.",
+  "",
+  "[ DocuBook Version 1.8.0 ]",
+  "",
+  "Starting the installation process...",
+  "Installation | ████████████████████████████████ | 100% 100/100",
+  "",
+  "Dependencies installed successfully using npm!",
+  "",
+  "┌────────────────────────────────────┐",
+  "│ Next Steps:                        │",
+  "│                                    │",
+  "│ 1. Navigate to project directory:  │",
+  "│    cd docubook                     │",
+  "│                                    │",
+  "│ 2. Install dependencies:           │",
+  "│    npm install                     │",
+  "│                                    │",
+  "│ 3. Start the development server:   │",
+  "│    npm run dev                     │",
+  "└────────────────────────────────────┘"
+];
+
+export function RuntimeSimulator() {
+  const [logs, setLogs] = useState<string[]>([]);
+  const [running, setRunning] = useState(false);
+  const terminalRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (running) {
+      setLogs([]);
+      scriptOutput.forEach((line, index) => {
+        setTimeout(() => {
+          setLogs((prev) => [...prev, line]);
+        }, index * 500);
+      });
+    }
+  }, [running]);
+
+  useEffect(() => {
+    terminalRef.current?.scrollTo({ top: terminalRef.current.scrollHeight, behavior: "smooth" });
+  }, [logs]);
+
+  return (
+    <div className="bg-gray-900 text-green-400 font-mono rounded-lg overflow-hidden w-full h-auto max-w-2xl shadow-lg">
+      <div className="bg-gray-800 text-gray-300 px-4 py-2 flex items-center space-x-2">
+        <div className="flex space-x-1">
+          <span className="w-3 h-3 bg-red-500 rounded-full"></span>
+          <span className="w-3 h-3 bg-yellow-500 rounded-full"></span>
+          <span className="w-3 h-3 bg-green-500 rounded-full"></span>
+        </div>
+        <span className="ml-3">docubook@localhost</span>
+      </div>
+      <div ref={terminalRef} className="p-4 md:h-[400px] h-72 overflow-y-auto text-left">
+        {logs.map((log, index) => (
+          <pre key={index} className="whitespace-pre-wrap">{log}</pre>
+        ))}
+      </div>
+      <div className="bg-gray-800 p-2 flex items-center space-x-2">
+        <input
+          type="text"
+          value="npx @docubook/create@latest"
+          readOnly
+          className="bg-gray-700 text-gray-300 px-2 py-1 rounded w-full text-left"
+        />
+        <Button onClick={() => setRunning(true)} className="bg-green-600 hover:bg-green-500 px-4 py-1">
+          <Play className="w-5 h-5" />
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+export default RuntimeSimulator;
diff --git a/components/terminal.tsx b/components/terminal.tsx
deleted file mode 100644
index e3c2408..0000000
--- a/components/terminal.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import {
-    AnimatedSpan,
-    Terminal,
-    TypingAnimation,
-  } from "@/components/ui/terminal";
-
-  export function NpxTerminal() {
-    return (
-      <Terminal>
-        <TypingAnimation className="text-left pl-6 dark:text-blue-300 text-blue-600">&gt; npx @docubook/create@latest</TypingAnimation>
-
-        <AnimatedSpan delay={1500} className="text-muted-foreground text-left pl-6">
-          <span>Need to install the following packages:</span>
-        </AnimatedSpan>
-
-        <AnimatedSpan delay={2000} className="text-muted-foreground text-left pl-6">
-          <span>@docubook/create@1.4.0</span>
-        </AnimatedSpan>
-
-        <AnimatedSpan delay={2500} className="text-muted-foreground text-left pl-6">
-          <span>Ok to proceed? (y)</span>
-        </AnimatedSpan>
-
-        <AnimatedSpan delay={3000} className="dark:text-blue-300 text-blue-600 text-left pl-6">
-          <span>✔ ? Enter a name for your project directory: (docubook)</span>
-        </AnimatedSpan>
-
-        <AnimatedSpan delay={3500} className="text-muted-foreground text-left pl-6">
-          <span>Creating a new Docubook project in /path/your/docubook from the starter branch...</span>
-        </AnimatedSpan>
-
-        <AnimatedSpan delay={4000} className="text-muted-foreground text-left pl-6">
-          <span>✔ Docubook project successfully created in /path/your/docubook!</span>
-        </AnimatedSpan>
-
-        <AnimatedSpan delay={6000} className="text-foreground text-left pl-6">
-          <span>Next Step</span>
-          <span className="pl-2 dark:text-blue-300 text-blue-600">1. Navigate to your project directory: cd docubook</span>
-          <span className="pl-2 dark:text-blue-300 text-blue-600">2. Install dependencies: npm install</span>
-          <span className="pl-2 dark:text-blue-300 text-blue-600">3. Start the development server: npm run dev</span>
-        </AnimatedSpan>
-
-        <TypingAnimation delay={6500} className="text-muted-foreground text-left pl-6">
-            Open the apps via browser http://localhost:3000.
-        </TypingAnimation>
-      </Terminal>
-    );
-  }
diff --git a/components/theme-toggle.tsx b/components/theme-toggle.tsx
deleted file mode 100644
index 3079558..0000000
--- a/components/theme-toggle.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-"use client";
-
-import * as React from "react";
-import { Moon, Sun } from "lucide-react";
-import { useTheme } from "next-themes";
-
-import { Button } from "@/components/ui/button";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-
-export function ModeToggle() {
-  const { setTheme } = useTheme();
-
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button variant="ghost" size="icon">
-          <Sun className="h-[1.1rem] w-[1.1rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
-          <Moon className="absolute h-[1.1rem] w-[1.1rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
-          <span className="sr-only">Toggle theme</span>
-        </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent align="end">
-        <DropdownMenuItem onClick={() => setTheme("light")}>
-          Light
-        </DropdownMenuItem>
-        <DropdownMenuItem onClick={() => setTheme("dark")}>
-          Dark
-        </DropdownMenuItem>
-        <DropdownMenuItem onClick={() => setTheme("system")}>
-          System
-        </DropdownMenuItem>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  );
-}
diff --git a/components/ui/toggle-group.tsx b/components/ui/toggle-group.tsx
new file mode 100644
index 0000000..1c876bb
--- /dev/null
+++ b/components/ui/toggle-group.tsx
@@ -0,0 +1,61 @@
+"use client"
+
+import * as React from "react"
+import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group"
+import { type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+import { toggleVariants } from "@/components/ui/toggle"
+
+const ToggleGroupContext = React.createContext<
+  VariantProps<typeof toggleVariants>
+>({
+  size: "default",
+  variant: "default",
+})
+
+const ToggleGroup = React.forwardRef<
+  React.ElementRef<typeof ToggleGroupPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> &
+    VariantProps<typeof toggleVariants>
+>(({ className, variant, size, children, ...props }, ref) => (
+  <ToggleGroupPrimitive.Root
+    ref={ref}
+    className={cn("flex items-center justify-center gap-1", className)}
+    {...props}
+  >
+    <ToggleGroupContext.Provider value={{ variant, size }}>
+      {children}
+    </ToggleGroupContext.Provider>
+  </ToggleGroupPrimitive.Root>
+))
+
+ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName
+
+const ToggleGroupItem = React.forwardRef<
+  React.ElementRef<typeof ToggleGroupPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &
+    VariantProps<typeof toggleVariants>
+>(({ className, children, variant, size, ...props }, ref) => {
+  const context = React.useContext(ToggleGroupContext)
+
+  return (
+    <ToggleGroupPrimitive.Item
+      ref={ref}
+      className={cn(
+        toggleVariants({
+          variant: context.variant || variant,
+          size: context.size || size,
+        }),
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </ToggleGroupPrimitive.Item>
+  )
+})
+
+ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName
+
+export { ToggleGroup, ToggleGroupItem }
diff --git a/components/ui/toggle.tsx b/components/ui/toggle.tsx
new file mode 100644
index 0000000..909c933
--- /dev/null
+++ b/components/ui/toggle.tsx
@@ -0,0 +1,46 @@
+"use client"
+
+import * as React from "react"
+import * as TogglePrimitive from "@radix-ui/react-toggle"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const toggleVariants = cva(
+  "inline-flex items-center justify-center gap-1 rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline:
+          "border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground",
+      },
+      size: {
+        default: "h-9 px-2 min-w-9",
+        sm: "h-8 px-1.5 min-w-8",
+        xs: "h-7 px-1 min-w-7",
+        lg: "h-10 px-2.5 min-w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+const Toggle = React.forwardRef<
+  React.ElementRef<typeof TogglePrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &
+    VariantProps<typeof toggleVariants>
+>(({ className, variant, size, ...props }, ref) => (
+  <TogglePrimitive.Root
+    ref={ref}
+    className={cn(toggleVariants({ variant, size, className }))}
+    {...props}
+  />
+))
+
+Toggle.displayName = TogglePrimitive.Root.displayName
+
+export { Toggle, toggleVariants }
diff --git a/docu.json b/docu.json
index 46e97ea..98fb676 100644
--- a/docu.json
+++ b/docu.json
@@ -11,23 +11,16 @@
         { "title": "Support", "href": "https://member.dwindi.com/member-area/support/" }
       ]
     },
-    "social": [
-      {
-        "name": "Website",
-        "url": "https://addonsejoli.pro",
-        "iconName": "RocketIcon"
-      }
-    ],
     "footer": {
       "copyright": "Addon Sejoli Pro",
-      "buttons": [
+      "social": [
         {
-          "text": "Youtube",
+          "name": "Youtube",
           "url": "https://www.youtube.com/@AddonsSejoliPro",
           "iconName": "YoutubeIcon"
         },
         {
-          "text": "Website",
+          "name": "Website",
           "url": "https://addonsejoli.pro/product",
           "iconName": "RocketIcon"
         }
@@ -35,8 +28,8 @@
     },
     "meta": {
       "baseURL": "https://docs.addonsejoli.pro",
-      "title": "Addon Sejoli Pro",
-      "description": "Panduan penggunaan plugin Addon Sejoli Pro",
+      "title": "AddonSejoliPro",
+      "description": "Penyedia Add-On untuk Fungsi tambahan pada Plugin Membership Sejoli. Addon Sejoli Pro tidak Berafiliasi dengan sejoli dan bukan bagian dari sejoli.co.id",
       "favicon": "/favicon.ico"
     },
     "repository": {
diff --git a/package-lock.json b/package-lock.json
index e8344b1..945f912 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "docubook",
-  "version": "1.7.0",
+  "version": "1.8.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "docubook",
-      "version": "1.7.0",
+      "version": "1.8.0",
       "dependencies": {
         "@radix-ui/react-accordion": "^1.2.0",
         "@radix-ui/react-avatar": "^1.1.0",
@@ -18,6 +18,8 @@
         "@radix-ui/react-separator": "^1.0.3",
         "@radix-ui/react-slot": "^1.1.0",
         "@radix-ui/react-tabs": "^1.1.0",
+        "@radix-ui/react-toggle": "^1.1.2",
+        "@radix-ui/react-toggle-group": "^1.1.2",
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.1.1",
         "framer-motion": "^12.4.1",
@@ -372,15 +374,15 @@
       }
     },
     "node_modules/@next/env": {
-      "version": "14.2.23",
-      "resolved": "https://registry.npmjs.org/@next/env/-/env-14.2.23.tgz",
-      "integrity": "sha512-CysUC9IO+2Bh0omJ3qrb47S8DtsTKbFidGm6ow4gXIG6reZybqxbkH2nhdEm1tC8SmgzDdpq3BIML0PWsmyUYA==",
+      "version": "14.2.24",
+      "resolved": "https://registry.npmjs.org/@next/env/-/env-14.2.24.tgz",
+      "integrity": "sha512-LAm0Is2KHTNT6IT16lxT+suD0u+VVfYNQqM+EJTKuFRRuY2z+zj01kueWXPCxbMBDt0B5vONYzabHGUNbZYAhA==",
       "license": "MIT"
     },
     "node_modules/@next/eslint-plugin-next": {
-      "version": "14.2.23",
-      "resolved": "https://registry.npmjs.org/@next/eslint-plugin-next/-/eslint-plugin-next-14.2.23.tgz",
-      "integrity": "sha512-efRC7m39GoiU1fXZRgGySqYbQi6ZyLkuGlvGst7IwkTTczehQTJA/7PoMg4MMjUZvZEGpiSEu+oJBAjPawiC3Q==",
+      "version": "14.2.24",
+      "resolved": "https://registry.npmjs.org/@next/eslint-plugin-next/-/eslint-plugin-next-14.2.24.tgz",
+      "integrity": "sha512-FDL3qs+5DML0AJz56DCVr+KnFYivxeAX73En8QbPw9GjJZ6zbfvqDy+HrarHFzbsIASn7y8y5ySJ/lllSruNVQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -388,9 +390,9 @@
       }
     },
     "node_modules/@next/swc-darwin-arm64": {
-      "version": "14.2.23",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.2.23.tgz",
-      "integrity": "sha512-WhtEntt6NcbABA8ypEoFd3uzq5iAnrl9AnZt9dXdO+PZLACE32z3a3qA5OoV20JrbJfSJ6Sd6EqGZTrlRnGxQQ==",
+      "version": "14.2.24",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.2.24.tgz",
+      "integrity": "sha512-7Tdi13aojnAZGpapVU6meVSpNzgrFwZ8joDcNS8cJVNuP3zqqrLqeory9Xec5TJZR/stsGJdfwo8KeyloT3+rQ==",
       "cpu": [
         "arm64"
       ],
@@ -404,9 +406,9 @@
       }
     },
     "node_modules/@next/swc-darwin-x64": {
-      "version": "14.2.23",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.2.23.tgz",
-      "integrity": "sha512-vwLw0HN2gVclT/ikO6EcE+LcIN+0mddJ53yG4eZd0rXkuEr/RnOaMH8wg/sYl5iz5AYYRo/l6XX7FIo6kwbw1Q==",
+      "version": "14.2.24",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.2.24.tgz",
+      "integrity": "sha512-lXR2WQqUtu69l5JMdTwSvQUkdqAhEWOqJEYUQ21QczQsAlNOW2kWZCucA6b3EXmPbcvmHB1kSZDua/713d52xg==",
       "cpu": [
         "x64"
       ],
@@ -420,9 +422,9 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-gnu": {
-      "version": "14.2.23",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.2.23.tgz",
-      "integrity": "sha512-uuAYwD3At2fu5CH1wD7FpP87mnjAv4+DNvLaR9kiIi8DLStWSW304kF09p1EQfhcbUI1Py2vZlBO2VaVqMRtpg==",
+      "version": "14.2.24",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.2.24.tgz",
+      "integrity": "sha512-nxvJgWOpSNmzidYvvGDfXwxkijb6hL9+cjZx1PVG6urr2h2jUqBALkKjT7kpfurRWicK6hFOvarmaWsINT1hnA==",
       "cpu": [
         "arm64"
       ],
@@ -436,9 +438,9 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-musl": {
-      "version": "14.2.23",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.2.23.tgz",
-      "integrity": "sha512-Mm5KHd7nGgeJ4EETvVgFuqKOyDh+UMXHXxye6wRRFDr4FdVRI6YTxajoV2aHE8jqC14xeAMVZvLqYqS7isHL+g==",
+      "version": "14.2.24",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.2.24.tgz",
+      "integrity": "sha512-PaBgOPhqa4Abxa3y/P92F3kklNPsiFjcjldQGT7kFmiY5nuFn8ClBEoX8GIpqU1ODP2y8P6hio6vTomx2Vy0UQ==",
       "cpu": [
         "arm64"
       ],
@@ -452,9 +454,9 @@
       }
     },
     "node_modules/@next/swc-linux-x64-gnu": {
-      "version": "14.2.23",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.2.23.tgz",
-      "integrity": "sha512-Ybfqlyzm4sMSEQO6lDksggAIxnvWSG2cDWnG2jgd+MLbHYn2pvFA8DQ4pT2Vjk3Cwrv+HIg7vXJ8lCiLz79qoQ==",
+      "version": "14.2.24",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.2.24.tgz",
+      "integrity": "sha512-vEbyadiRI7GOr94hd2AB15LFVgcJZQWu7Cdi9cWjCMeCiUsHWA0U5BkGPuoYRnTxTn0HacuMb9NeAmStfBCLoQ==",
       "cpu": [
         "x64"
       ],
@@ -468,9 +470,9 @@
       }
     },
     "node_modules/@next/swc-linux-x64-musl": {
-      "version": "14.2.23",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.2.23.tgz",
-      "integrity": "sha512-OSQX94sxd1gOUz3jhhdocnKsy4/peG8zV1HVaW6DLEbEmRRtUCUQZcKxUD9atLYa3RZA+YJx+WZdOnTkDuNDNA==",
+      "version": "14.2.24",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.2.24.tgz",
+      "integrity": "sha512-df0FC9ptaYsd8nQCINCzFtDWtko8PNRTAU0/+d7hy47E0oC17tI54U/0NdGk7l/76jz1J377dvRjmt6IUdkpzQ==",
       "cpu": [
         "x64"
       ],
@@ -484,9 +486,9 @@
       }
     },
     "node_modules/@next/swc-win32-arm64-msvc": {
-      "version": "14.2.23",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.2.23.tgz",
-      "integrity": "sha512-ezmbgZy++XpIMTcTNd0L4k7+cNI4ET5vMv/oqNfTuSXkZtSA9BURElPFyarjjGtRgZ9/zuKDHoMdZwDZIY3ehQ==",
+      "version": "14.2.24",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.2.24.tgz",
+      "integrity": "sha512-ZEntbLjeYAJ286eAqbxpZHhDFYpYjArotQ+/TW9j7UROh0DUmX7wYDGtsTPpfCV8V+UoqHBPU7q9D4nDNH014Q==",
       "cpu": [
         "arm64"
       ],
@@ -500,9 +502,9 @@
       }
     },
     "node_modules/@next/swc-win32-ia32-msvc": {
-      "version": "14.2.23",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.23.tgz",
-      "integrity": "sha512-zfHZOGguFCqAJ7zldTKg4tJHPJyJCOFhpoJcVxKL9BSUHScVDnMdDuOU1zPPGdOzr/GWxbhYTjyiEgLEpAoFPA==",
+      "version": "14.2.24",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.24.tgz",
+      "integrity": "sha512-9KuS+XUXM3T6v7leeWU0erpJ6NsFIwiTFD5nzNg8J5uo/DMIPvCp3L1Ao5HjbHX0gkWPB1VrKoo/Il4F0cGK2Q==",
       "cpu": [
         "ia32"
       ],
@@ -516,9 +518,9 @@
       }
     },
     "node_modules/@next/swc-win32-x64-msvc": {
-      "version": "14.2.23",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.2.23.tgz",
-      "integrity": "sha512-xCtq5BD553SzOgSZ7UH5LH+OATQihydObTrCTvVzOro8QiWYKdBVwcB2Mn2MLMo6DGW9yH1LSPw7jS7HhgJgjw==",
+      "version": "14.2.24",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.2.24.tgz",
+      "integrity": "sha512-cXcJ2+x0fXQ2CntaE00d7uUH+u1Bfp/E0HsNQH79YiLaZE5Rbm7dZzyAYccn3uICM7mw+DxoMqEfGXZtF4Fgaw==",
       "cpu": [
         "x64"
       ],
@@ -1242,6 +1244,60 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-toggle": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-toggle/-/react-toggle-1.1.2.tgz",
+      "integrity": "sha512-lntKchNWx3aCHuWKiDY+8WudiegQvBpDRAYL8dKLRvKEH8VOpl0XX6SSU/bUBqIRJbcTy4+MW06Wv8vgp10rzQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.1",
+        "@radix-ui/react-primitive": "2.0.2",
+        "@radix-ui/react-use-controllable-state": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-toggle-group": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-toggle-group/-/react-toggle-group-1.1.2.tgz",
+      "integrity": "sha512-JBm6s6aVG/nwuY5eadhU2zDi/IwYS0sDM5ZWb4nymv/hn3hZdkw+gENn0LP4iY1yCd7+bgJaCwueMYJIU3vk4A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.1",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-direction": "1.1.0",
+        "@radix-ui/react-primitive": "2.0.2",
+        "@radix-ui/react-roving-focus": "1.1.2",
+        "@radix-ui/react-toggle": "1.1.2",
+        "@radix-ui/react-use-controllable-state": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-use-callback-ref": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.0.tgz",
@@ -1467,9 +1523,9 @@
       "license": "MIT"
     },
     "node_modules/@types/node": {
-      "version": "20.17.17",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.17.17.tgz",
-      "integrity": "sha512-/WndGO4kIfMicEQLTi/mDANUu/iVUhT7KboZPdEqqHQ4aTS+3qT3U5gIqWDFV+XouorjfgGqvKILJeHhuQgFYg==",
+      "version": "20.17.21",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.17.21.tgz",
+      "integrity": "sha512-yw1WZ94lZpdZbpnaF+WRvlN/Sx2EZWe/YZVdK4mC4u02/ql6Ozen8qbRJhOtltOxCg97/kpijhGs5X6STwkvbg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -1515,17 +1571,17 @@
       "license": "MIT"
     },
     "node_modules/@typescript-eslint/eslint-plugin": {
-      "version": "8.23.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.23.0.tgz",
-      "integrity": "sha512-vBz65tJgRrA1Q5gWlRfvoH+w943dq9K1p1yDBY2pc+a1nbBLZp7fB9+Hk8DaALUbzjqlMfgaqlVPT1REJdkt/w==",
+      "version": "8.25.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.25.0.tgz",
+      "integrity": "sha512-VM7bpzAe7JO/BFf40pIT1lJqS/z1F8OaSsUB3rpFJucQA4cOSuH2RVVVkFULN+En0Djgr29/jb4EQnedUo95KA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@eslint-community/regexpp": "^4.10.0",
-        "@typescript-eslint/scope-manager": "8.23.0",
-        "@typescript-eslint/type-utils": "8.23.0",
-        "@typescript-eslint/utils": "8.23.0",
-        "@typescript-eslint/visitor-keys": "8.23.0",
+        "@typescript-eslint/scope-manager": "8.25.0",
+        "@typescript-eslint/type-utils": "8.25.0",
+        "@typescript-eslint/utils": "8.25.0",
+        "@typescript-eslint/visitor-keys": "8.25.0",
         "graphemer": "^1.4.0",
         "ignore": "^5.3.1",
         "natural-compare": "^1.4.0",
@@ -1545,16 +1601,16 @@
       }
     },
     "node_modules/@typescript-eslint/parser": {
-      "version": "8.23.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.23.0.tgz",
-      "integrity": "sha512-h2lUByouOXFAlMec2mILeELUbME5SZRN/7R9Cw2RD2lRQQY08MWMM+PmVVKKJNK1aIwqTo9t/0CvOxwPbRIE2Q==",
+      "version": "8.25.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.25.0.tgz",
+      "integrity": "sha512-4gbs64bnbSzu4FpgMiQ1A+D+urxkoJk/kqlDJ2W//5SygaEiAP2B4GoS7TEdxgwol2el03gckFV9lJ4QOMiiHg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/scope-manager": "8.23.0",
-        "@typescript-eslint/types": "8.23.0",
-        "@typescript-eslint/typescript-estree": "8.23.0",
-        "@typescript-eslint/visitor-keys": "8.23.0",
+        "@typescript-eslint/scope-manager": "8.25.0",
+        "@typescript-eslint/types": "8.25.0",
+        "@typescript-eslint/typescript-estree": "8.25.0",
+        "@typescript-eslint/visitor-keys": "8.25.0",
         "debug": "^4.3.4"
       },
       "engines": {
@@ -1570,14 +1626,14 @@
       }
     },
     "node_modules/@typescript-eslint/scope-manager": {
-      "version": "8.23.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.23.0.tgz",
-      "integrity": "sha512-OGqo7+dXHqI7Hfm+WqkZjKjsiRtFUQHPdGMXzk5mYXhJUedO7e/Y7i8AK3MyLMgZR93TX4bIzYrfyVjLC+0VSw==",
+      "version": "8.25.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.25.0.tgz",
+      "integrity": "sha512-6PPeiKIGbgStEyt4NNXa2ru5pMzQ8OYKO1hX1z53HMomrmiSB+R5FmChgQAP1ro8jMtNawz+TRQo/cSXrauTpg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/types": "8.23.0",
-        "@typescript-eslint/visitor-keys": "8.23.0"
+        "@typescript-eslint/types": "8.25.0",
+        "@typescript-eslint/visitor-keys": "8.25.0"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -1588,14 +1644,14 @@
       }
     },
     "node_modules/@typescript-eslint/type-utils": {
-      "version": "8.23.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.23.0.tgz",
-      "integrity": "sha512-iIuLdYpQWZKbiH+RkCGc6iu+VwscP5rCtQ1lyQ7TYuKLrcZoeJVpcLiG8DliXVkUxirW/PWlmS+d6yD51L9jvA==",
+      "version": "8.25.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.25.0.tgz",
+      "integrity": "sha512-d77dHgHWnxmXOPJuDWO4FDWADmGQkN5+tt6SFRZz/RtCWl4pHgFl3+WdYCn16+3teG09DY6XtEpf3gGD0a186g==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/typescript-estree": "8.23.0",
-        "@typescript-eslint/utils": "8.23.0",
+        "@typescript-eslint/typescript-estree": "8.25.0",
+        "@typescript-eslint/utils": "8.25.0",
         "debug": "^4.3.4",
         "ts-api-utils": "^2.0.1"
       },
@@ -1612,9 +1668,9 @@
       }
     },
     "node_modules/@typescript-eslint/types": {
-      "version": "8.23.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.23.0.tgz",
-      "integrity": "sha512-1sK4ILJbCmZOTt9k4vkoulT6/y5CHJ1qUYxqpF1K/DBAd8+ZUL4LlSCxOssuH5m4rUaaN0uS0HlVPvd45zjduQ==",
+      "version": "8.25.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.25.0.tgz",
+      "integrity": "sha512-+vUe0Zb4tkNgznQwicsvLUJgZIRs6ITeWSCclX1q85pR1iOiaj+4uZJIUp//Z27QWu5Cseiw3O3AR8hVpax7Aw==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -1626,14 +1682,14 @@
       }
     },
     "node_modules/@typescript-eslint/typescript-estree": {
-      "version": "8.23.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.23.0.tgz",
-      "integrity": "sha512-LcqzfipsB8RTvH8FX24W4UUFk1bl+0yTOf9ZA08XngFwMg4Kj8A+9hwz8Cr/ZS4KwHrmo9PJiLZkOt49vPnuvQ==",
+      "version": "8.25.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.25.0.tgz",
+      "integrity": "sha512-ZPaiAKEZ6Blt/TPAx5Ot0EIB/yGtLI2EsGoY6F7XKklfMxYQyvtL+gT/UCqkMzO0BVFHLDlzvFqQzurYahxv9Q==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/types": "8.23.0",
-        "@typescript-eslint/visitor-keys": "8.23.0",
+        "@typescript-eslint/types": "8.25.0",
+        "@typescript-eslint/visitor-keys": "8.25.0",
         "debug": "^4.3.4",
         "fast-glob": "^3.3.2",
         "is-glob": "^4.0.3",
@@ -1679,16 +1735,16 @@
       }
     },
     "node_modules/@typescript-eslint/utils": {
-      "version": "8.23.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.23.0.tgz",
-      "integrity": "sha512-uB/+PSo6Exu02b5ZEiVtmY6RVYO7YU5xqgzTIVZwTHvvK3HsL8tZZHFaTLFtRG3CsV4A5mhOv+NZx5BlhXPyIA==",
+      "version": "8.25.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.25.0.tgz",
+      "integrity": "sha512-syqRbrEv0J1wywiLsK60XzHnQe/kRViI3zwFALrNEgnntn1l24Ra2KvOAWwWbWZ1lBZxZljPDGOq967dsl6fkA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.4.0",
-        "@typescript-eslint/scope-manager": "8.23.0",
-        "@typescript-eslint/types": "8.23.0",
-        "@typescript-eslint/typescript-estree": "8.23.0"
+        "@typescript-eslint/scope-manager": "8.25.0",
+        "@typescript-eslint/types": "8.25.0",
+        "@typescript-eslint/typescript-estree": "8.25.0"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -1703,13 +1759,13 @@
       }
     },
     "node_modules/@typescript-eslint/visitor-keys": {
-      "version": "8.23.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.23.0.tgz",
-      "integrity": "sha512-oWWhcWDLwDfu++BGTZcmXWqpwtkwb5o7fxUIGksMQQDSdPW9prsSnfIOZMlsj4vBOSrcnjIUZMiIjODgGosFhQ==",
+      "version": "8.25.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.25.0.tgz",
+      "integrity": "sha512-kCYXKAum9CecGVHGij7muybDfTS2sD3t0L4bJsEZLkyrXUImiCTq1M3LG2SRtOhiHFwMR9wAFplpT6XHYjTkwQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/types": "8.23.0",
+        "@typescript-eslint/types": "8.25.0",
         "eslint-visitor-keys": "^4.2.0"
       },
       "engines": {
@@ -2227,9 +2283,9 @@
       }
     },
     "node_modules/call-bind-apply-helpers": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.1.tgz",
-      "integrity": "sha512-BhYE+WDaywFg2TBWYNXAE+8B1ATnThNBqXHP5nQu0jWJdVvY2hvkpyB3qOmtmDePiS5/BDQ8wASEWGMWRG148g==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
+      "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -2277,9 +2333,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001698",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001698.tgz",
-      "integrity": "sha512-xJ3km2oiG/MbNU8G6zIq6XRZ6HtAOVXsbOrP/blGazi52kc5Yy7b6sDA5O+FbROzRrV7BSTllLHuNvmawYUJjw==",
+      "version": "1.0.30001701",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001701.tgz",
+      "integrity": "sha512-faRs/AW3jA9nTwmJBSO1PQ6L/EOgsB5HMQQq4iCu5zhPgVVgO/pZRHlmatwijZKetFw8/Pr4q6dEN8sJuq8qTw==",
       "funding": [
         {
           "type": "opencollective",
@@ -2721,9 +2777,9 @@
       "license": "MIT"
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.5.96",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.96.tgz",
-      "integrity": "sha512-8AJUW6dh75Fm/ny8+kZKJzI1pgoE8bKLZlzDU2W1ENd+DXKJrx7I7l9hb8UWR4ojlnb5OlixMt00QWiYJoVw1w==",
+      "version": "1.5.109",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.109.tgz",
+      "integrity": "sha512-AidaH9JETVRr9DIPGfp1kAarm/W6hRJTPuCnkF+2MqhF4KaAgRIcBc8nvjk+YMXZhwfISof/7WG29eS4iGxQLQ==",
       "dev": true,
       "license": "ISC"
     },
@@ -2903,13 +2959,16 @@
       }
     },
     "node_modules/es-shim-unscopables": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/es-shim-unscopables/-/es-shim-unscopables-1.0.2.tgz",
-      "integrity": "sha512-J3yBRXCzDu4ULnQwxyToo/OjdMx6akgVC7K6few0a7F/0wLtmKKN7I73AH5T2836UuXRqN7Qg+IIUw/+YJksRw==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/es-shim-unscopables/-/es-shim-unscopables-1.1.0.tgz",
+      "integrity": "sha512-d9T8ucsEhh8Bi1woXCf+TIKDIROLG5WCkxg8geBCbvk22kzwC5G2OnXVMO6FUsvQlgUUXQ2itephWDLqDzbeCw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "hasown": "^2.0.0"
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
       }
     },
     "node_modules/es-to-primitive": {
@@ -3043,13 +3102,13 @@
       }
     },
     "node_modules/eslint-config-next": {
-      "version": "14.2.23",
-      "resolved": "https://registry.npmjs.org/eslint-config-next/-/eslint-config-next-14.2.23.tgz",
-      "integrity": "sha512-qtWJzOsDZxnLtXLNtnVjbutHmnEp6QTTSZBTlTCge/Wy0AsUaq8nwR91dBcZZvFg3eY3zKFPBhUkLMHu3Qpauw==",
+      "version": "14.2.24",
+      "resolved": "https://registry.npmjs.org/eslint-config-next/-/eslint-config-next-14.2.24.tgz",
+      "integrity": "sha512-9r1ujK++Pgpfixr5+DQ6rXDIQmSzuDbBlAQYMkJRMz9KWqovX7ESUTC0EAyBfOCl3ubkoeplw+aoXDuih3A8fw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@next/eslint-plugin-next": "14.2.23",
+        "@next/eslint-plugin-next": "14.2.24",
         "@rushstack/eslint-patch": "^1.3.3",
         "@typescript-eslint/eslint-plugin": "^5.4.2 || ^6.0.0 || ^7.0.0 || ^8.0.0",
         "@typescript-eslint/parser": "^5.4.2 || ^6.0.0 || ^7.0.0 || ^8.0.0",
@@ -3093,20 +3152,19 @@
       }
     },
     "node_modules/eslint-import-resolver-typescript": {
-      "version": "3.7.0",
-      "resolved": "https://registry.npmjs.org/eslint-import-resolver-typescript/-/eslint-import-resolver-typescript-3.7.0.tgz",
-      "integrity": "sha512-Vrwyi8HHxY97K5ebydMtffsWAn1SCR9eol49eCd5fJS4O1WV7PaAjbcjmbfJJSMz/t4Mal212Uz/fQZrOB8mow==",
+      "version": "3.8.3",
+      "resolved": "https://registry.npmjs.org/eslint-import-resolver-typescript/-/eslint-import-resolver-typescript-3.8.3.tgz",
+      "integrity": "sha512-A0bu4Ks2QqDWNpeEgTQMPTngaMhuDu4yv6xpftBMAf+1ziXnpx+eSR1WRfoPTe2BAiAjHFZ7kSNx1fvr5g5pmQ==",
       "dev": true,
       "license": "ISC",
       "dependencies": {
         "@nolyfill/is-core-module": "1.0.39",
         "debug": "^4.3.7",
         "enhanced-resolve": "^5.15.0",
-        "fast-glob": "^3.3.2",
-        "get-tsconfig": "^4.7.5",
+        "get-tsconfig": "^4.10.0",
         "is-bun-module": "^1.0.2",
-        "is-glob": "^4.0.3",
-        "stable-hash": "^0.0.4"
+        "stable-hash": "^0.0.4",
+        "tinyglobby": "^0.2.12"
       },
       "engines": {
         "node": "^14.18.0 || >=16.0.0"
@@ -3606,9 +3664,9 @@
       "license": "MIT"
     },
     "node_modules/fastq": {
-      "version": "1.19.0",
-      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.19.0.tgz",
-      "integrity": "sha512-7SFSRCNjBQIZH/xZR3iy5iQYR8aGBE0h3VG6/cwlbrpdciNYBMotQav8c1XI3HjHH+NikUpP53nPdlZSdWmFzA==",
+      "version": "1.19.1",
+      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.19.1.tgz",
+      "integrity": "sha512-GwLTyxkCXjXbxqIhTsMI2Nui8huMPtnxg7krajPJAjnEG/iiOS7i+zCtWGZR9G0NBKbXKh6X9m9UIsYX/N6vvQ==",
       "license": "ISC",
       "dependencies": {
         "reusify": "^1.0.4"
@@ -3672,16 +3730,16 @@
       }
     },
     "node_modules/flatted": {
-      "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.3.2.tgz",
-      "integrity": "sha512-AiwGJM8YcNOaobumgtng+6NHuOqC3A7MixFeDafM3X9cIUM+xUXoS5Vfgf+OihAYe20fxqNM9yPBXJzRtZ/4eA==",
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.3.3.tgz",
+      "integrity": "sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==",
       "dev": true,
       "license": "ISC"
     },
     "node_modules/for-each": {
-      "version": "0.3.4",
-      "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.4.tgz",
-      "integrity": "sha512-kKaIINnFpzW6ffJNDjjyjrk21BkDx38c0xa/klsT8VzLCaMEefv4ZTacrcVR4DmgTeBra++jMDAfS/tS799YDw==",
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.5.tgz",
+      "integrity": "sha512-dKx12eRCVIzqCxFGplyFKJMPvLEWgmNtUrpTiJIR5u97zEhRG8ySrtboPHZXx7daLxQVrl643cTzbab2tkQjxg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -3695,12 +3753,12 @@
       }
     },
     "node_modules/foreground-child": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.0.tgz",
-      "integrity": "sha512-Ld2g8rrAyMYFXBhEqMz8ZAHBi4J4uS1i/CxGMDnjyFWddMXLVcDp051DZfu+t7+ab7Wv6SMqpWmyFIj5UbfFvg==",
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.1.tgz",
+      "integrity": "sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==",
       "license": "ISC",
       "dependencies": {
-        "cross-spawn": "^7.0.0",
+        "cross-spawn": "^7.0.6",
         "signal-exit": "^4.0.1"
       },
       "engines": {
@@ -3725,12 +3783,12 @@
       }
     },
     "node_modules/framer-motion": {
-      "version": "12.4.1",
-      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.4.1.tgz",
-      "integrity": "sha512-5Ijbea3topSZjadQ0hgc/TcWj2ldMZmNREM7RvAhvsThYOA1HHOA8TT1yKvMu1YXP3jWaFwoZ6Vo9Nw+DUZrzA==",
+      "version": "12.4.7",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.4.7.tgz",
+      "integrity": "sha512-VhrcbtcAMXfxlrjeHPpWVu2+mkcoR31e02aNSR7OUS/hZAciKa8q6o3YN2mA1h+jjscRsSyKvX6E1CiY/7OLMw==",
       "license": "MIT",
       "dependencies": {
-        "motion-dom": "^12.0.0",
+        "motion-dom": "^12.4.5",
         "motion-utils": "^12.0.0",
         "tslib": "^2.4.0"
       },
@@ -3822,18 +3880,18 @@
       }
     },
     "node_modules/get-intrinsic": {
-      "version": "1.2.7",
-      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.7.tgz",
-      "integrity": "sha512-VW6Pxhsrk0KAOqs3WEd0klDiF/+V7gQOpAvY1jVU/LHmaD/kQO4523aiJuikX/QAKYiW6x8Jh+RJej1almdtCA==",
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
+      "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "call-bind-apply-helpers": "^1.0.1",
+        "call-bind-apply-helpers": "^1.0.2",
         "es-define-property": "^1.0.1",
         "es-errors": "^1.3.0",
-        "es-object-atoms": "^1.0.0",
+        "es-object-atoms": "^1.1.1",
         "function-bind": "^1.1.2",
-        "get-proto": "^1.0.0",
+        "get-proto": "^1.0.1",
         "gopd": "^1.2.0",
         "has-symbols": "^1.1.0",
         "hasown": "^2.0.2",
@@ -4179,16 +4237,16 @@
       }
     },
     "node_modules/hast-util-from-parse5": {
-      "version": "8.0.2",
-      "resolved": "https://registry.npmjs.org/hast-util-from-parse5/-/hast-util-from-parse5-8.0.2.tgz",
-      "integrity": "sha512-SfMzfdAi/zAoZ1KkFEyyeXBn7u/ShQrfd675ZEE9M3qj+PMFX05xubzRyF76CCSJu8au9jgVxDV1+okFvgZU4A==",
+      "version": "8.0.3",
+      "resolved": "https://registry.npmjs.org/hast-util-from-parse5/-/hast-util-from-parse5-8.0.3.tgz",
+      "integrity": "sha512-3kxEVkEKt0zvcZ3hCRYI8rqrgwtlIOFMWkbclACvjlDw8Li9S2hk/d51OI0nr/gIpdMHNepwgOKqZ/sy0Clpyg==",
       "license": "MIT",
       "dependencies": {
         "@types/hast": "^3.0.0",
         "@types/unist": "^3.0.0",
         "devlop": "^1.0.0",
         "hastscript": "^9.0.0",
-        "property-information": "^6.0.0",
+        "property-information": "^7.0.0",
         "vfile": "^6.0.0",
         "vfile-location": "^5.0.0",
         "web-namespaces": "^2.0.0"
@@ -4212,15 +4270,15 @@
       }
     },
     "node_modules/hast-util-from-parse5/node_modules/hastscript": {
-      "version": "9.0.0",
-      "resolved": "https://registry.npmjs.org/hastscript/-/hastscript-9.0.0.tgz",
-      "integrity": "sha512-jzaLBGavEDKHrc5EfFImKN7nZKKBdSLIdGvCwDZ9TfzbF2ffXiov8CKE445L2Z1Ek2t/m4SKQ2j6Ipv7NyUolw==",
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/hastscript/-/hastscript-9.0.1.tgz",
+      "integrity": "sha512-g7df9rMFX/SPi34tyGCyUBREQoKkapwdY/T04Qn9TDWfHhAYt4/I0gMVirzK5wEzeUqIjEB+LXC/ypb7Aqno5w==",
       "license": "MIT",
       "dependencies": {
         "@types/hast": "^3.0.0",
         "comma-separated-tokens": "^2.0.0",
         "hast-util-parse-selector": "^4.0.0",
-        "property-information": "^6.0.0",
+        "property-information": "^7.0.0",
         "space-separated-tokens": "^2.0.0"
       },
       "funding": {
@@ -4283,9 +4341,9 @@
       "license": "MIT"
     },
     "node_modules/hast-util-to-estree": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/hast-util-to-estree/-/hast-util-to-estree-3.1.1.tgz",
-      "integrity": "sha512-IWtwwmPskfSmma9RpzCappDUitC8t5jhAynHhc1m2+5trOgsrp7txscUSavc5Ic8PATyAjfrCK1wgtxh2cICVQ==",
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/hast-util-to-estree/-/hast-util-to-estree-3.1.2.tgz",
+      "integrity": "sha512-94SDoKOfop5gP8RHyw4vV1aj+oChuD42g08BONGAaWFbbO6iaWUqxk7SWfGybgcVzhK16KifZr3zD2dqQgx3jQ==",
       "license": "MIT",
       "dependencies": {
         "@types/estree": "^1.0.0",
@@ -4299,7 +4357,7 @@
         "mdast-util-mdx-expression": "^2.0.0",
         "mdast-util-mdx-jsx": "^3.0.0",
         "mdast-util-mdxjs-esm": "^2.0.0",
-        "property-information": "^6.0.0",
+        "property-information": "^7.0.0",
         "space-separated-tokens": "^2.0.0",
         "style-to-object": "^1.0.0",
         "unist-util-position": "^5.0.0",
@@ -4311,9 +4369,9 @@
       }
     },
     "node_modules/hast-util-to-jsx-runtime": {
-      "version": "2.3.2",
-      "resolved": "https://registry.npmjs.org/hast-util-to-jsx-runtime/-/hast-util-to-jsx-runtime-2.3.2.tgz",
-      "integrity": "sha512-1ngXYb+V9UT5h+PxNRa1O1FYguZK/XL+gkeqvp7EdHlB9oHUG0eYRo/vY5inBdcqo3RkPMC58/H94HvkbfGdyg==",
+      "version": "2.3.5",
+      "resolved": "https://registry.npmjs.org/hast-util-to-jsx-runtime/-/hast-util-to-jsx-runtime-2.3.5.tgz",
+      "integrity": "sha512-gHD+HoFxOMmmXLuq9f2dZDMQHVcplCVpMfBNRpJsF03yyLZvJGzsFORe8orVuYDX9k2w0VH0uF8oryFd1whqKQ==",
       "license": "MIT",
       "dependencies": {
         "@types/estree": "^1.0.0",
@@ -4326,7 +4384,7 @@
         "mdast-util-mdx-expression": "^2.0.0",
         "mdast-util-mdx-jsx": "^3.0.0",
         "mdast-util-mdxjs-esm": "^2.0.0",
-        "property-information": "^6.0.0",
+        "property-information": "^7.0.0",
         "space-separated-tokens": "^2.0.0",
         "style-to-object": "^1.0.0",
         "unist-util-position": "^5.0.0",
@@ -4395,6 +4453,16 @@
       "integrity": "sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==",
       "license": "MIT"
     },
+    "node_modules/hastscript/node_modules/property-information": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/property-information/-/property-information-6.5.0.tgz",
+      "integrity": "sha512-PgTgs/BlvHxOu8QuEN7wi5A0OmXaBcHpmCSTehcs6Uuu9IkDIEo13Hy7n898RHfrQ49vKCoGeWZSaAK01nwVig==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/ignore": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
@@ -5309,9 +5377,9 @@
       }
     },
     "node_modules/mdast-util-gfm": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/mdast-util-gfm/-/mdast-util-gfm-3.0.0.tgz",
-      "integrity": "sha512-dgQEX5Amaq+DuUqf26jJqSK9qgixgd6rYDHAv4aTBuA92cTknZlKpPfa86Z/s8Dj8xsAQpFfBmPUHWJBWqS4Bw==",
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-gfm/-/mdast-util-gfm-3.1.0.tgz",
+      "integrity": "sha512-0ulfdQOM3ysHhCJ1p06l0b0VKlhU0wuQs3thxZQagjcjPrlFRqY215uZGHHJan9GEAXd9MbfPjFJz+qMkVR6zQ==",
       "license": "MIT",
       "dependencies": {
         "mdast-util-from-markdown": "^2.0.0",
@@ -5345,9 +5413,9 @@
       }
     },
     "node_modules/mdast-util-gfm-footnote": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/mdast-util-gfm-footnote/-/mdast-util-gfm-footnote-2.0.0.tgz",
-      "integrity": "sha512-5jOT2boTSVkMnQ7LTrd6n/18kqwjmuYqo7JUPe+tRCY6O7dAuTFMtTPauYYrMPpox9hlN0uOx/FL8XvEfG9/mQ==",
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-gfm-footnote/-/mdast-util-gfm-footnote-2.1.0.tgz",
+      "integrity": "sha512-sqpDWlsHn7Ac9GNZQMeUzPQSMzR6Wv0WKRNvQRg0KqHh02fpTz69Qc1QSseNX29bhz1ROIyNyxExfawVKTm1GQ==",
       "license": "MIT",
       "dependencies": {
         "@types/mdast": "^4.0.0",
@@ -5565,9 +5633,9 @@
       }
     },
     "node_modules/micromark": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/micromark/-/micromark-4.0.1.tgz",
-      "integrity": "sha512-eBPdkcoCNvYcxQOAKAlceo5SNdzZWfF+FcSupREAzdAh9rRmE239CEQAiTwIgblwnoM8zzj35sZ5ZwvSEOF6Kw==",
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/micromark/-/micromark-4.0.2.tgz",
+      "integrity": "sha512-zpe98Q6kvavpCr1NPVSCMebCKfD7CA2NqZ+rykeNhONIJBpc1tFKt9hucLGwha3jNTNI8lHpctWJWoimVF4PfA==",
       "funding": [
         {
           "type": "GitHub Sponsors",
@@ -5600,9 +5668,9 @@
       }
     },
     "node_modules/micromark-core-commonmark": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/micromark-core-commonmark/-/micromark-core-commonmark-2.0.2.tgz",
-      "integrity": "sha512-FKjQKbxd1cibWMM1P9N+H8TwlgGgSkWZMmfuVucLCHaYqeSvJ0hFeHsIa65pA2nYbes0f8LDHPMrd9X7Ujxg9w==",
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/micromark-core-commonmark/-/micromark-core-commonmark-2.0.3.tgz",
+      "integrity": "sha512-RDBrHEMSxVFLg6xvnXmb1Ayr2WzLAWjeSATAoxwKYJV94TeNavgoIdA0a9ytzDSVzBy2YKFK+emCPOEibLeCrg==",
       "funding": [
         {
           "type": "GitHub Sponsors",
@@ -6230,9 +6298,9 @@
       }
     },
     "node_modules/micromark-util-subtokenize": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/micromark-util-subtokenize/-/micromark-util-subtokenize-2.0.4.tgz",
-      "integrity": "sha512-N6hXjrin2GTJDe3MVjf5FuXpm12PGm80BrUAeub9XFXca8JZbP+oIwY4LJSVwFUCL1IPm/WwSVUN7goFHmSGGQ==",
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-subtokenize/-/micromark-util-subtokenize-2.1.0.tgz",
+      "integrity": "sha512-XQLu552iSctvnEcgXw6+Sx75GflAPNED1qx7eBJ+wydBb2KCbRZe+NwvIEEMM83uml1+2WSXpBAcp9IUCgCYWA==",
       "funding": [
         {
           "type": "GitHub Sponsors",
@@ -6268,9 +6336,9 @@
       "license": "MIT"
     },
     "node_modules/micromark-util-types": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/micromark-util-types/-/micromark-util-types-2.0.1.tgz",
-      "integrity": "sha512-534m2WhVTddrcKVepwmVEVnUAmtrx9bfIjNoQHRqfnvdaHQiFytEhJoTgpWJvDEXCO5gLTQh3wYC1PgOJA4NSQ==",
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/micromark-util-types/-/micromark-util-types-2.0.2.tgz",
+      "integrity": "sha512-Yw0ECSpJoViF1qTU4DC6NwtC4aWGt1EkzaQB8KPPyCRR8z9TWeV0HbEFGTO+ZY1wB22zmxnJqhPyTpOVCpeHTA==",
       "funding": [
         {
           "type": "GitHub Sponsors",
@@ -6329,9 +6397,9 @@
       }
     },
     "node_modules/motion-dom": {
-      "version": "12.0.0",
-      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.0.0.tgz",
-      "integrity": "sha512-CvYd15OeIR6kHgMdonCc1ihsaUG4MYh/wrkz8gZ3hBX/uamyZCXN9S9qJoYF03GqfTt7thTV/dxnHYX4+55vDg==",
+      "version": "12.4.5",
+      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.4.5.tgz",
+      "integrity": "sha512-Q2xmhuyYug1CGTo0jdsL05EQ4RhIYXlggFS/yPhQQRNzbrhjKQ1tbjThx5Plv68aX31LsUQRq4uIkuDxdO5vRQ==",
       "license": "MIT",
       "dependencies": {
         "motion-utils": "^12.0.0"
@@ -6386,12 +6454,12 @@
       "license": "MIT"
     },
     "node_modules/next": {
-      "version": "14.2.23",
-      "resolved": "https://registry.npmjs.org/next/-/next-14.2.23.tgz",
-      "integrity": "sha512-mjN3fE6u/tynneLiEg56XnthzuYw+kD7mCujgVqioxyPqbmiotUCGJpIZGS/VaPg3ZDT1tvWxiVyRzeqJFm/kw==",
+      "version": "14.2.24",
+      "resolved": "https://registry.npmjs.org/next/-/next-14.2.24.tgz",
+      "integrity": "sha512-En8VEexSJ0Py2FfVnRRh8gtERwDRaJGNvsvad47ShkC2Yi8AXQPXEA2vKoDJlGFSj5WE5SyF21zNi4M5gyi+SQ==",
       "license": "MIT",
       "dependencies": {
-        "@next/env": "14.2.23",
+        "@next/env": "14.2.24",
         "@swc/helpers": "0.5.5",
         "busboy": "1.6.0",
         "caniuse-lite": "^1.0.30001579",
@@ -6406,15 +6474,15 @@
         "node": ">=18.17.0"
       },
       "optionalDependencies": {
-        "@next/swc-darwin-arm64": "14.2.23",
-        "@next/swc-darwin-x64": "14.2.23",
-        "@next/swc-linux-arm64-gnu": "14.2.23",
-        "@next/swc-linux-arm64-musl": "14.2.23",
-        "@next/swc-linux-x64-gnu": "14.2.23",
-        "@next/swc-linux-x64-musl": "14.2.23",
-        "@next/swc-win32-arm64-msvc": "14.2.23",
-        "@next/swc-win32-ia32-msvc": "14.2.23",
-        "@next/swc-win32-x64-msvc": "14.2.23"
+        "@next/swc-darwin-arm64": "14.2.24",
+        "@next/swc-darwin-x64": "14.2.24",
+        "@next/swc-linux-arm64-gnu": "14.2.24",
+        "@next/swc-linux-arm64-musl": "14.2.24",
+        "@next/swc-linux-x64-gnu": "14.2.24",
+        "@next/swc-linux-x64-musl": "14.2.24",
+        "@next/swc-win32-arm64-msvc": "14.2.24",
+        "@next/swc-win32-ia32-msvc": "14.2.24",
+        "@next/swc-win32-x64-msvc": "14.2.24"
       },
       "peerDependencies": {
         "@opentelemetry/api": "^1.1.0",
@@ -6882,9 +6950,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.5.1",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.1.tgz",
-      "integrity": "sha512-6oz2beyjc5VMn/KV1pPw8fliQkhBXrVn1Z3TVyqZxU8kZpzEKhBdmCFqI6ZbmGtamQvQGuU1sgPTk8ZrXDD7jQ==",
+      "version": "8.5.3",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.3.tgz",
+      "integrity": "sha512-dle9A3yYxlBSrt8Fu+IpjGT8SY8hN0mlaA6GY8t0P5PjIOZemULz/E2Bnm/2dcUOena75OTNkHI76uZBNUUq3A==",
       "funding": [
         {
           "type": "opencollective",
@@ -7061,9 +7129,9 @@
       }
     },
     "node_modules/property-information": {
-      "version": "6.5.0",
-      "resolved": "https://registry.npmjs.org/property-information/-/property-information-6.5.0.tgz",
-      "integrity": "sha512-PgTgs/BlvHxOu8QuEN7wi5A0OmXaBcHpmCSTehcs6Uuu9IkDIEo13Hy7n898RHfrQ49vKCoGeWZSaAK01nwVig==",
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/property-information/-/property-information-7.0.0.tgz",
+      "integrity": "sha512-7D/qOz/+Y4X/rzSB6jKxKUsQnphO046ei8qxG59mtM3RG3DHgTK81HrxrmoDVINJb8NKT5ZsRbwHvQ6B68Iyhg==",
       "license": "MIT",
       "funding": {
         "type": "github",
@@ -7503,9 +7571,9 @@
       }
     },
     "node_modules/remark-gfm": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/remark-gfm/-/remark-gfm-4.0.0.tgz",
-      "integrity": "sha512-U92vJgBPkbw4Zfu/IiW2oTZLSL3Zpv+uI7My2eq8JxKgqraFdU8YUGicEJCEgSbeaG+QDFqIcwwfMTOEelPxuA==",
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/remark-gfm/-/remark-gfm-4.0.1.tgz",
+      "integrity": "sha512-1quofZ2RQ9EWdeN34S79+KExV1764+wCUGop5CPL1WGdD0ocPpu91lzPGbwWMECpEpd42kJGQwzRfyov9j4yNg==",
       "license": "MIT",
       "dependencies": {
         "@types/mdast": "^4.0.0",
@@ -7623,9 +7691,9 @@
       }
     },
     "node_modules/reusify": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
-      "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.1.0.tgz",
+      "integrity": "sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==",
       "license": "MIT",
       "engines": {
         "iojs": ">=1.0.0",
@@ -8436,6 +8504,51 @@
         "node": ">=0.8"
       }
     },
+    "node_modules/tinyglobby": {
+      "version": "0.2.12",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.12.tgz",
+      "integrity": "sha512-qkf4trmKSIiMTs/E63cxH+ojC2unam7rJ0WrauAzpT3ECNTxGRMlaXxVbfxMUC/w0LaYk6jQ4y/nGR9uBO3tww==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fdir": "^6.4.3",
+        "picomatch": "^4.0.2"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/SuperchupuDev"
+      }
+    },
+    "node_modules/tinyglobby/node_modules/fdir": {
+      "version": "6.4.3",
+      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.4.3.tgz",
+      "integrity": "sha512-PMXmW2y1hDDfTSRc9gaXIuCCRpuoz3Kaz8cUelp3smouvfT632ozg2vrT6lJsHKKOF59YLbOGfAWGUcKEfRMQw==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "picomatch": "^3 || ^4"
+      },
+      "peerDependenciesMeta": {
+        "picomatch": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/tinyglobby/node_modules/picomatch": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz",
+      "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
     "node_modules/to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
@@ -8810,9 +8923,9 @@
       }
     },
     "node_modules/update-browserslist-db": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.2.tgz",
-      "integrity": "sha512-PPypAm5qvlD7XMZC3BujecnaOxwhrtoFR+Dqkk5Aa/6DssiH0ibKoketaj9w8LP7Bont1rYeoV5plxD7RTEPRg==",
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.3.tgz",
+      "integrity": "sha512-UxhIZQ+QInVdunkDAaiazvvT/+fXL5Osr0JZlJulepYu6Jd7qJtDZjlur0emRlT71EN3ScPoE7gvsuIKKNavKw==",
       "dev": true,
       "funding": [
         {
diff --git a/package.json b/package.json
index cffc0e7..2ee1f50 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "docubook",
-  "version": "1.7.0",
+  "version": "1.8.0",
   "private": true,
   "scripts": {
     "dev": "next dev",
@@ -19,6 +19,8 @@
     "@radix-ui/react-separator": "^1.0.3",
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-tabs": "^1.1.0",
+    "@radix-ui/react-toggle": "^1.1.2",
+    "@radix-ui/react-toggle-group": "^1.1.2",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "framer-motion": "^12.4.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index be64d55..3b781b4 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -38,6 +38,12 @@ importers:
       '@radix-ui/react-tabs':
         specifier: ^1.1.0
         version: 1.1.3(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-toggle':
+        specifier: ^1.1.2
+        version: 1.1.2(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-toggle-group':
+        specifier: ^1.1.2
+        version: 1.1.2(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       class-variance-authority:
         specifier: ^0.7.0
         version: 0.7.1
@@ -608,6 +614,32 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-toggle-group@1.1.2':
+    resolution: {integrity: sha512-JBm6s6aVG/nwuY5eadhU2zDi/IwYS0sDM5ZWb4nymv/hn3hZdkw+gENn0LP4iY1yCd7+bgJaCwueMYJIU3vk4A==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-toggle@1.1.2':
+    resolution: {integrity: sha512-lntKchNWx3aCHuWKiDY+8WudiegQvBpDRAYL8dKLRvKEH8VOpl0XX6SSU/bUBqIRJbcTy4+MW06Wv8vgp10rzQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-use-callback-ref@1.1.0':
     resolution: {integrity: sha512-CasTfvsy+frcFkbXtSJ2Zu9JHpN8TYKxkgJGWbjiZhFivxaeW7rMeZt7QELGVLaYVfFMsKHjb7Ak0nMEe+2Vfw==}
     peerDependencies:
@@ -3252,6 +3284,32 @@ snapshots:
       '@types/react': 18.3.18
       '@types/react-dom': 18.3.5(@types/react@18.3.18)
 
+  '@radix-ui/react-toggle-group@1.1.2(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.1
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-direction': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.2(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-roving-focus': 1.1.2(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-toggle': 1.1.2(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.18
+      '@types/react-dom': 18.3.5(@types/react@18.3.18)
+
+  '@radix-ui/react-toggle@1.1.2(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.1
+      '@radix-ui/react-primitive': 2.0.2(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.3.18)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.18
+      '@types/react-dom': 18.3.5(@types/react@18.3.18)
+
   '@radix-ui/react-use-callback-ref@1.1.0(@types/react@18.3.18)(react@18.3.1)':
     dependencies:
       react: 18.3.1